Excel Spreadsheet Information

Sistem informasi web modern untuk melihat, mencari, memfilter, menganalisis, dan mengelola data spreadsheet secara read-only.

Data Saat Ini

Sumber utama:

https://docs.google.com/spreadsheets/d/1-6xUcDWz-XDBhS5pr-UcWF3IQDQZrQ4VRUlIFHriSew/edit

Snapshot yang sudah dimasukkan:

• data/all-prompts-live.csv — data mentah dari Google Sheets.
• data/all-prompts-live.json — data terstruktur plus metadata.
• data/manifest.json — ringkasan kolom, jumlah row, dan counts.
• workbooks/all-prompts-live.xlsx — workbook Excel dari snapshot yang sama.

---

Web Application (Dashboard)

Tech Stack

Layer	Library
Framework	Vite + React + TypeScript
Table	TanStack Table v8
Charts	Recharts
Routing	React Router DOM v7
Icons	Lucide React
Styling	Vanilla CSS (dark mode)

Cara Menjalankan

# Masuk ke folder web
cd web

# Install dependencies (hanya pertama kali)
npm install

# Jalankan dev server
npm run dev

Buka browser di http://localhost:5173

Build Production

cd web
npm run build
npm run preview

---

Fitur Dashboard

📊 Dashboard

• Stat cards: Total Rows, Pending, Ready, Needs Revision, Blank Status, Total Types, Total Groups
• Pie chart status & type distribution
• Group breakdown dengan progress bar

📋 Data Table

• Tabel lengkap semua 2.140+ baris
• Search global di semua kolom
• Filter: status, type, group, category
• Sort semua kolom
• Pagination: 10 / 25 / 50 / 100 per halaman
• Copy prompt dengan satu klik
• Open link langsung dari tabel
• Double-click baris untuk melihat detail
• Export filtered data ke CSV atau JSON

📈 Analytics

• Status distribution (donut chart)
• Type distribution (donut chart)
• Group distribution (bar chart)
• Top 20 category ranking dengan progress bar

🔍 Detail Row

• Semua field ditampilkan lengkap
• Prompt panjang dalam scrollable card
• Tombol Copy Prompt
• Tombol Open Link jika tersedia

---

Struktur Direktori

excelspreadsheet/
├── data/                        # Snapshot data (jangan diedit manual)
│   ├── all-prompts-live.csv
│   ├── all-prompts-live.json
│   └── manifest.json
├── workbooks/
│   └── all-prompts-live.xlsx
├── scripts/
│   ├── build_snapshot.py        # Build JSON + manifest dari CSV
│   └── build_workbook.mjs       # Build XLSX dari CSV
├── web/                         # Vite React App
│   ├── public/
│   │   ├── data/                # Symlink ke ../data/
│   │   └── favicon.svg
│   ├── src/
│   │   ├── components/          # Layout, StatCard, StatusBadge
│   │   ├── pages/               # Dashboard, Table, Analytics, Detail
│   │   ├── lib/                 # dataLoader.ts
│   │   ├── types/               # TypeScript interfaces
│   │   ├── styles/              # globals.css (design system)
│   │   ├── App.tsx              # Router
│   │   └── main.tsx             # Entry point
│   ├── index.html
│   ├── package.json
│   ├── tsconfig.json
│   └── vite.config.ts
└── README.md

---

Struktur Data JSON

File data/all-prompts-live.json:

{
  "meta": {
    "name": "...",
    "generatedAt": "2026-06-15T04:27:05.602349+00:00",
    "sourceSheet": "https://...",
    "totalRows": 2140,
    "statusCounts": { "pending": 706, "ready": 1431, ... },
    "typeCounts": { "image": 1086, "video": 1032, ... },
    "groupCounts": { "My Showcase Prompts": 990, ... }
  },
  "rows": [
    {
      "id": "hire-1",
      "title": "Hire Video — The Introduction",
      "type": "video",
      "category": "hire-video",
      "status": "pending",
      "group": "Hire Video Storyboard",
      "prompt": "...",
      "notes": "...",
      "note": "...",
      "link": "https://..."
    }
  ]
}

Kolom Data

Kolom	Keterangan
id	ID unik baris (e.g. hire-1)
title	Judul prompt
type	image, video, atau image+video
category	Kategori konten
status	pending, ready, tested-needs-revision, atau kosong
group	Grup prompt
prompt	Teks prompt utama
notes	Catatan tambahan
note	Catatan singkat
link	URL referensi (opsional)

---

Refresh Snapshot dari Google Sheets

# 1. Download CSV terbaru
curl -L 'https://docs.google.com/spreadsheets/d/1-6xUcDWz-XDBhS5pr-UcWF3IQDQZrQ4VRUlIFHriSew/gviz/tq?tqx=out:csv&sheet=Sheet1' -o data/all-prompts-live.csv

# 2. Build JSON + manifest
python3 scripts/build_snapshot.py

# 3. Build XLSX (opsional)
node scripts/build_workbook.mjs

Setelah refresh, reload browser — data akan otomatis ter-update karena symlink web/public/data → ../data/.

---

Catatan Metode Live Sheet

Di website videoai-rosy.vercel.app, data spreadsheet dibaca dengan Google Visualization JSONP. Metode ini cocok untuk static site karena tidak kena batasan CORS seperti fetch() CSV langsung.

Repository ini menyimpan snapshot data untuk arsip dan sistem informasi ini.

Pengembangan Selanjutnya

• Live sync langsung dari Google Sheets API
• Edit/write ke spreadsheet (saat ini read-only)
• Filter berdasarkan tanggal update
• Dark/light mode toggle
• Mobile sidebar toggle