Tracker-Sigma

KO | EN

gitlite — search

#python #hacktoberfest #react #llm #android #machine-learning #rust #linux #nodejs #macos #java #awesome-list #pytorch #mcp

(★ 9)

Pantau kegiatan harian dan jadi lebih prodeuktif

Tracker-Sigma Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🚀 Sigma Tracker - System Management & Activity Tracker

**Sigma Tracker** adalah aplikasi manajemen kegiatan, tugas, dan produktivitas berbasis web modern yang dibangun dengan **React**, **TypeScript**, **Tailwind CSS**, dan **Vite**. Aplikasi ini dirancang untuk memberikan pemantauan real-time terhadap seluruh aktivitas, lengkap dengan statistik visual, kalender interaktif bertingkat, sertajadwal kegiatan yang mudah dikelola.

---

## 🌟 Fitur Utama

### 📊 1. Dashboard Real-Time & Analytics

- **Ringkasan KPI**: Total Kegiatan, Kegiatan Berlangsung, Terlambat, dan Selesai yang dihitung secara akurat dari data riil.
- **Grafik Distribusi Status**: Visualisasi Pie Chart (Recharts) interaktif untuk memantau porsi status kegiatan.
- **Tren Produktivitas Mingguan**: Grafik Bar Chart yang menghitung total kegiatan selesai vs total target minggu ini vs minggu lalu.
- **Tenggat Waktu Mendatang**: List aktivitas mendesak yang dilengkapi timer countdown akurat.
- **Analisis Kategori**: Pemantauan porsi kegiatan berdasarkan kategori (Kerja, Pribadi, Studi, dll.).

### 📅 2. Kalender Interaktif 3 Level (Month, Year, Decade)

- **Visual Tampilan Kalender**: Kalender berbasis Date Picker modern dengan kontrol tombol panah (_caret_) atas-bawah & kiri-kanan.
- **3 Mode Tampilan**:
  - **Month View**: Tampilan hari-hari dalam bulan berjalan lengkap dengan titik penanda kegiatan (_event dot_).
  - **Year View**: Grid 12 bulan untuk navigasi cepat antar bulan.
  - **Decade View**: Grid dekade (contoh: 2020–2029) untuk navigasi tahunan.
- **Seksi Acara/Kegiatan Terpilih**: Mengklik tanggal pada kalender akan langsung memunculkan seksi daftar acara khusus untuk tanggal tersebut di sisi kanan.
- **Integrasi Kalender Eksternal**:
  - Tombol **GCalendar** untuk otomatis menambahkan jadwal ke Google Calendar.
  - Fitur **Ekspor .ics** untuk diimpor ke Apple Calendar, Outlook, atau Google Calendar.

### 📝 3. Manajemen Kegiatan (CRUD)

- **Pencarian & Filter**: Filter berdasarkan kategori, prioritas (Tinggi, Sedang, Rendah), status, dan tanggal.
- **Aksi Cepat**: Tambah kegiatan baru, edit detail, duplikasi kegiatan, dan hapus.
- **Update Status & Progress**: Ubah status (_Belum Dimulai, Berlangsung, Selesai, Ditunda_) dan slider _progress_ % secara langsung.

### 🌗 4. Mode Gelap & Terang (Dark / Light Theme)

- Dukungan penuh tema **Light Mode** dan **Dark Mode** yang konsisten di seluruh komponen visual.
- Tombol switch cepat pada navigasi utama dengan penyimpanan preferensi pengguna.

### 🔒 5. Pengaturan & Cadangan Data

- **Manajemen Kategori**: Tambah dan atur warna serta ikon kategori.
- **Ekspor & Impor JSON**: Cadangkan seluruh data aplikasi ke dalam file JSON lokal atau pulihkan data dari file cadangan.

---

## 🛠️ Teknologi yang Digunakan

- **Frontend Framework**: [React 18](https://react.dev/) + [TypeScript](https://www.typescriptlang.org/)
- **Build Tool**: [Vite](https://vitejs.dev/)
- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/)
- **Icons**: [Lucide React](https://lucide.dev/)
- **Charts**: [Recharts](https://recharts.org/)
- **Animation**: [Motion](https://motion.dev/)
- **Backend Dev Server**: [Express.js](https://expressjs.com/) + [TSX](https://github.com/privatenumber/tsx)

---

## 💻 Panduan Menjalankan di VS Code (Lokal)

### 1. Prasyarat

Pastikan komputer Anda telah terinstal:

- **Node.js** (Versi 18.x atau lebih baru) -> [Download Node.js](https://nodejs.org/)
- **npm** (Bawaan dari Node.js)
- **VS Code** (Visual Studio Code)

---

### 2. Langkah-Langkah Instalasi

#### Step A: Buka Project di VS Code

1. Ekspor atau download file project ini (ZIP/GitHub).
2. Ekstrak folder project (jika berupa ZIP).
3. Buka **VS Code**, lalu pilih `File > Open Folder...` dan pilih folder project **Sigma Tracker**.

#### Step B: Buka Terminal

Buka terminal terintegrasi di VS Code dengan menekan shortcut `Ctrl + ~` (atau `Cmd + ~` di Mac), atau lewat menu `Terminal > New Terminal`.

#### Step C: Install Dependencies

Jalankan perintah berikut untuk menginstal seluruh paket library yang dibutuhkan:

```bash
npm install
```

#### Step D: Konfigurasi Environment Variable (`.env`)

Buat file bernama `.env` di root folder (sejajar dengan `package.json`), atau salin dari `.env.example`:

```bash
# Untuk Linux / macOS / Git Bash
cp .env.example .env

# Atau untuk Windows CMD
copy .env.example .env
```

Isi file `.env` (Opsional, untuk fitur yang memerlukan API key seperti Gemini AI jika digunakan):

```env
# Server Port Configuration
PORT=3000

# Gemini API Key (Opsional untuk fitur AI jika diaktifkan)
GEMINI_API_KEY=your_gemini_api_key_here
```

---

### 3. Menjalankan Aplikasi di Mode Pengembangan (_Development_)

Jalankan perintah berikut di terminal VS Code:

```bash
npm run dev
```

Output di terminal akan menampilkan link server lokal:

```text
  Server running on http://localhost:3000
```

Buka browser Anda dan akses:
👉 **`http://localhost:3000`**

---

### 4. Perintah Tambahan (_Scripts_)

---

## 📂 Struktur Direktori Project

```text
├── src/
│   ├── components/         # Komponen UI utama
│   │   ├── ActivitiesView.tsx   # Tampilan Manajemen Kegiatan & Kalender Interaktif
│   │   ├── DashboardView.tsx    # Tampilan Ringkasan & Grafik Statistik Real-time
│   │   ├── Navigation.tsx       # Sidebar & Topbar Navigasi
│   │   ├── SettingsView.tsx     # Tampilan Pengaturan & Cadangan Data
│   │   └── ...
│   ├── data/               # Data awal (Initial mock state)
│   │   └── initialData.ts
│   ├── utils/              # Helper & fungsi utilitas (Format tanggal, .ics exporter, dll)
│   │   └── helpers.ts
│   ├── App.tsx             # Komponen utama & Manajemen State Utama
│   ├── main.tsx            # Entry point React
│   ├── index.css           # Styling Tailwind CSS
│   └── types.ts            # Definisi Interface & Type TypeScript
├── .env.example            # Template variabel lingkungan
├── package.json            # Daftar dependensi & npm scripts
├── server.ts               # Express Backend Dev Server + Vite Middleware
├── tsconfig.json           # Konfigurasi TypeScript
├── vite.config.ts          # Konfigurasi Vite
└── README.md               # Dokumentasi Lengkap Aplikasi
```

---

## ❓ FAQ (Pertanyaan yang Sering Diajukan)

1. **Bagaimana jika port 3000 sudah digunakan di komputer saya?**
   Anda dapat mengubah variabel `PORT` di file `.env` Anda menjadi port lain (misal: `PORT=5000`).

2. **Apakah data saya akan hilang saat halaman direfresh?**
   Tidak, aplikasi ini menyimpan seluruh perubahan kegiatan, kategori, dan preferensi tema secara lokal di `localStorage` browser Anda.

3. **Bagaimana cara mengekspor jadwal ke Google Calendar?**
   Di setiap kartu kegiatan atau seksi kalender, klik tombol **GCalendar** atau **Ekspor .ics** untuk mengunduh berkas kalender standar yang dapat diimpor langsung ke Google Calendar atau Outlook.

---

✨ _Dikembangkan dengan ❤️ menggunakan React, TypeScript, dan Tailwind CSS._

Tracker-Sigma

Tracker-Sigma Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Tracker-Sigma

Tracker-Sigma Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README