# 🚀 Seotics - All-in-One SEO, GEO & Content Agency Platform

**Seotics** adalah aplikasi web All-in-One Dashboard yang dirancang khusus untuk SEO Specialist dan Digital Marketing Agency guna memantau pergerakan traffic website klien, **SEO Analytics (Traditional Search)**, **GEO Analytics (Generative Engine Optimization / AI Search & Geographic Location)**, **AI Article Generator berbasis To-Do**, serta **Agency-Grade Professional Report Exporter**.

---

## 💻 Tech Stack Resmi (Final Selection)

* **Backend:** **Python 3.11+ (FastAPI)**
  * *Crawler & Audit:* `httpx` + `BeautifulSoup4` + `Playwright` (Async HTML/JS parser)
  * *Integrasi API:* `google-api-python-client` (GA4 & GSC) + `google-generativeai` / `openai` SDK
  * *Database & Task:* `SQLite` / `SQLModel` + `FastAPI BackgroundTasks`
  * *PDF Exporter:* `WeasyPrint` (HTML/CSS to Business PDF)
* **Frontend:** **Vue 3 (Vite + Vue 3 Composition API)**
  * *UI & Visual:* Custom Vanilla CSS / Tailwind + `Lucide-Vue`
  * *Charts & Maps:* `Chart.js` (`vue-chartjs`) + `Leaflet.js` (Interactive Geo Heatmap)
  * *Editor:* Tiptap / Quill WYSIWYG Editor

---

## 📌 1. Visi & Tujuan Utama
* **Daily Actionable Dashboard:** Tampilan intuitif yang memberikan *insight* dan tugas kerja harian otomatis dalam 2 menit.
* **Dual Power Analytics (SEO + GEO):** Memantau pencarian tradisional (Google/Bing) sekaligus pencarian AI generasi baru (ChatGPT, Perplexity, Gemini, Claude).
* **Automated AI Content Engine:** Menghasilkan artikel siap rilis yang sudah dioptimasi untuk SEO & GEO berdasarkan rekomendasi *To-Do* harian.
* **Enterprise Agency-Grade Reporting:** Menghasilkan laporan eksklusif berstandar agensi besar (*White-label*, logo agensi, skor performa, grafik pertumbuhan ROI).
* **Tanpa Biaya Langganan Bulanan (Rp 0/bulan operational stack):** Memanfaatkan kuota resmi API gratis dari Google & *open-source tools*.

---

## 🧩 2. Arsitektur Komponen Frontend (Vue 3)

### 📐 A. Layout & Shell Components
1. `AppSidebar.vue`: Navigasi utama (Dashboard, SEO Pulse, GEO AI, Location Heatmap, Daily To-Do, Content Generator, Reports, Settings).
2. `AppHeader.vue`: Dropdown pemilih klien, pemilih tanggal (*Date Range*), logo agensi white-label, & profil pengguna.
3. `StatCard.vue`: Kartu matriks dengan ikon, angka, indikator pergeseran (%), dan grafik garis mini (*sparkline*).

### 📊 B. SEO Analytics Components
1. `RankPulseTable.vue`: Tabel peringkat kata kunci, perubahan posisi (+/-), volume pencarian, dan URL landing page.
2. `SearchConsoleChart.vue`: Grafik garis interaktif (Clicks, Impressions, CTR, Posisi Rata-rata).
3. `TechnicalHealthCard.vue`: Kartu skor kesehatan teknis (0-100), status HTTP (200/404), SSL, & Core Web Vitals.
4. `WinnersLosersList.vue`: Daftar halaman yang paling melonjak atau anjlok minggu ini.

### 🤖 C. GEO Analytics Components (AI Search)
1. `AICitationShare.vue`: Chart donat/pie pangsa sitasi AI (ChatGPT vs Perplexity vs Gemini vs Claude).
2. `PromptRankTable.vue`: Tabel peringkat brand pada *Buyer Prompts* di AI Search (#1, #2, Not Found).
3. `AISentimentBadge.vue`: Badge indikator sentimen jawaban AI (Positif, Netral, Negatif).

### 🌐 D. GEO Location Components
1. `GeoHeatmapMap.vue`: Peta interaktif Leaflet.js yang menampilkan intensitas traffic berdasarkan negara & kota.
2. `LocalRankCard.vue`: Tabel peringkat Google Maps / Local Pack untuk keyword area lokal.

### ⚡ E. Daily Actionable & Content Engine Components
1. `DailyActionWidget.vue`: Daftar 3 tugas To-Do harian otomatis dengan badge prioritas (🔴/🤖/🟢) & tombol aksi 1-klik.
2. `ArticleGeneratorModal.vue`: Modal konfigurasi AI Article Generator (Opsi SEO Keyword, GEO BLUF format, FAQ Schema).
3. `ArticleEditor.vue`: Editor artikel WYSIWYG dengan checklist skor SEO/GEO live & tombol Copy HTML/Markdown.

### 📄 F. Reporting Components
1. `ReportBuilderModal.vue`: Modal konfigurasi laporan PDF White-label (Upload logo, nama klien, pilih matriks).
2. `ReportPDFPreview.vue`: Preview langsung laporan PDF berstandar agensi sebelum di-download/dibagikan.

---

## 🛠️ 3. Integrasi Stack & Data Provider Gratis

| Modul | Source Data / API Gratis | Output UI / Deliverable |
| :--- | :--- | :--- |
| **SEO Analytics** | Google Analytics 4 API + Google Search Console API | Line charts, ranking tables, CTR distribution. |
| **Technical SEO** | Google PageSpeed Insights API + Custom Python Crawler | Health Scorecard (0-100), issue audit list. |
| **GEO Location** | GA4 Geographic Dimensions API + Leaflet Maps | Interactive World/Country Heatmap. |
| **GEO AI Search** | Direct LLM Search Sampling (OpenAI / Gemini API) | Citation Share Chart & Prompt Ranking Table. |
| **AI Article Generator** | OpenAI / Gemini / Free LLM API Integration | WYSIWYG Editor, Markdown/HTML Export. |
| **Agency Reporting** | WeasyPrint / HTML-to-PDF Engine | PDF Majalah Business Report & Live Client Link. |
| **Indexing & Alerts** | Google Indexing API + WhatsApp Webhook | Auto indexing status & WA/Email alerts. |

---

## 🗓️ 4. Rencana Tahap Pengembangan (Roadmap UI & System)

- **Fase 1:** Setup Project Python FastAPI + Vue 3 (Vite) & Core Dashboard UI (SEO + GEO + Map).
- **Fase 2:** Daily Actionable Widget, AI Article Generator (SEO+GEO Standard), & Google Indexing API.
- **Fase 3:** Competitor Benchmark, WhatsApp Alerts, & Enterprise Agency PDF Report Exporter.

---

*Dokumen ini diperbarui pada: 11 Agustus 2026*  
*Lokasi Project: `C:\laragon\www\seotics`*