Buatkan project web fullstack bernama "ServiceBook" menggunakan **SvelteKit** dengan UI memakai **Tailwind CSS**, ikon **Lucide** dan palet warna berupa **soft color blocks + white** (bersih, minimal, modern). Aplikasi ini untuk pencatatan keuangan usaha servis HP.

Desain/Style:
- Framework: SvelteKit (latest)
- Styling: Tailwind CSS (JIT), gunakan utility-first, responsive.
- Icons: Lucide icons
- Theme: background putih, gunakan block warna soft (pastel) untuk cards/kategori:
- Primary soft: #E6F4FF (soft blue)
- Accent soft: #FFF3E6 (soft orange)
- Success soft: #E8F7E8 (soft green)
- Danger soft: #FFE6E6 (soft red)
- Text: #0F172A (very dark blue/near-black)
- Use white (#FFFFFF) for main backgrounds and elevated cards with subtle shadow
- Use accessible contrast, rounded corners (md), and 8–12px spacing system.

Fungsionalitas utama:
1. Input transaksi:
- Fields: date, type (Pemasukan / Pengeluaran), description, category, amount, paymentMethod (optional)
- Validasi: jumlah > 0, date required, category required
2. Listing transaksi:
- Paginated / infinite scroll
- Indikator warna/icon: hijau untuk pemasukan, merah untuk pengeluaran
- Edit & Delete tiap transaksi
3. Laporan & Dashboard:
- Ringkasan: total pemasukan, total pengeluaran, laba/rugi
- Grafik bulanan (lihat detail di fitur grafik)
4. Filter & Search:
- Filter by date range: today, this week, this month, custom range
- Filter by category
- Full-text search by description
5. Export Data:
- Export ke PDF (generate report PDF, printable) — pakai jsPDF/html2canvas
- Export ke Excel (.xlsx) — pakai SheetJS (xlsx)
- Share laporan via WhatsApp / Email — support Web Share API dan WhatsApp prefilled message URL
6. Offline Mode & Sync:
- Local cache menggunakan **IndexedDB** via **Dexie.js** (karena ini web app)
- Auto-sync background: ketika online, push lokal changes ke cloud DB (Turso) and pull remote changes
- Tampilkan status sync (last synced time, pending changes count, connection status)
- Optionally: for mobile packaged app (Capacitor), use SQLite or Room on Android for stronger offline guarantee
7. Backend / Database:
- Cloud DB: **Turso** (libSQL). Provide REST/HTTP or GraphQL wrapper service if needed.
- Sync strategy: optimistic local writes -> queue pending ops -> background sync with conflict resolution by last-write-wins (and keep change history)
- DB schema (libSQL):
```
CREATE TABLE transactions (
id TEXT PRIMARY KEY, -- UUID
date TEXT NOT NULL, -- ISO 8601
type TEXT NOT NULL, -- "Pemasukan" or "Pengeluaran"
description TEXT,
category TEXT,
amount REAL NOT NULL,
user_id TEXT,
created_at TEXT,
updated_at TEXT
);

CREATE TABLE transaction_history (
history_id TEXT PRIMARY KEY,
transaction_id TEXT,
action TEXT, -- "create","update","delete"
payload TEXT, -- json snapshot
performed_at TEXT,
performed_by TEXT
);
```
8. Authentication & Multi-user:
- Implement authentication (Login/Register) using **Supabase Auth** or **Clerk** (or custom JWT). Auth provider choice must support multi-device sync.
- Data separated per user (user_id on each transaction).
9. Edit & History:
- Edit existing transactions with proper validation
- Save changes to `transaction_history` for audit trail (who, when, what changed)
- UI: show history/timeline modal per transaction
10. Reminder & Notifications:
- Local reminders: schedule daily input reminder and target omzet notifications (use browser Notifications API + service worker for PWA)
- Alert when monthly expense for category exceeds threshold (configurable)
11. Charts:
- Use chart library: **Chart.js** or **ApexCharts** via Svelte wrapper
- Provide:
- Bar/Line chart: monthly trend (income vs expense per month)
- Pie chart: percentage breakdown by category for selected period
- Line chart: profit/loss trend over time
- Charts should be interactive (hover tooltips, toggle series)
12. Additional UX:
- PWA ready (installable)
- Theme toggle (light/dark) persisted to local storage/DataStore equivalent
- Export / import backup (.json)
- Role-based UI (admin vs basic user) if needed

Tech Stack & Libraries suggested:
- Frontend: SvelteKit
- Styling: Tailwind CSS
- Icons: Lucide
- Charts: Chart.js or ApexCharts (Svelte wrapper)
- Local cache: Dexie.js (IndexedDB)
- Cloud DB: Turso (libSQL) — use HTTP API or small sync microservice
- Auth: Supabase Auth / Clerk / or custom JWT
- Export: jsPDF + html2canvas (PDF), SheetJS (xlsx)
- Background sync / worker: Service Worker + Background Sync / periodic sync (PWA)
- Notifications: Web Notifications API + Service Worker
- Optional: Capacitor for building Android/iOS native wrapper (if want mobile offline with SQLite/Room)
- Utilities: uuid, dayjs/date-fns

API endpoints (examples):
- POST /api/auth/register
- POST /api/auth/login
- GET /api/transactions?userId=...
- POST /api/transactions
- PUT /api/transactions/:id
- DELETE /api/transactions/:id
- POST /api/sync (batch sync handler)
- GET /api/report?from=YYYY-MM-DD&to=YYYY-MM-DD

Deliverables:
- Full SvelteKit repo scaffolded with pages:
- / (dashboard)
- /transactions (list)
- /transactions/new
- /transactions/:id/edit
- /reports
- /settings
- /auth/login, /auth/register
- Implement Dexie-based local DB wrapper with queueing logic for offline writes and sync module to Turso
- Implement Chart components (monthly bar/line, category pie)
- Export to PDF & Excel functions, and share via WhatsApp/Email
- PWA & Service Worker support for offline cache & notifications
- README with setup, Turso config/env vars, and sync architecture notes

Important notes for implementer:
- Replace Room Database with IndexedDB (Dexie) for web; mention option to use native SQLite/Room when wrapping as mobile app (Capacitor) to keep parity with original Android idea.
- Provide clear migration/sync logic to handle multiple devices and conflict resolution.
- Keep UI lightweight (Svelte + Tailwind) so app runs smoothly on mid-range mobile devices and desktops.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Buatkan Project Web Fullstack Bernama S
-emoji: 😻
-colorFrom: blue
-colorTo: purple
+title: Buatkan-project-web-fullstack-bernama--S
+colorFrom: red
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

package.json

@@ -0,0 +1,35 @@
+json
+{
+  "name": "servicebook",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.2.0",
+    "@sveltejs/kit": "^1.27.4",
+    "autoprefixer": "^10.4.16",
+    "chart.js": "^4.4.0",
+    "lucide-svelte": "^0.308.0",
+    "postcss": "^8.4.31",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.3.5",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.39.0",
+    "dexie": "^3.2.4",
+    "dexie-export-import": "^1.0.4",
+    "jspdf": "^2.5.1",
+    "xlsx": "^0.18.5"
+  }
+}
+
+</html>

src/app.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --primary-soft: #e6f4ff;
+  --accent-soft: #fff3e6;
+  --success-soft: #e8f7e8;
+  --danger-soft: #ffe6e6;
+  --text: #0f172a;
+}
+
+/* Custom utility classes */
+@layer utilities {
+  .card {
+    @apply bg-white rounded-lg shadow-sm border border-slate-100 p-4;
+  }
+
+  .btn-primary {
+    @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors;
+  }
+
+  .btn-secondary {
+    @apply bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg transition-colors;
+  }
+
+  .input-field {
+    @apply w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all;
+  }
+}

src/app.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ServiceBook - Phone Repair Finance</title>
+  <meta name="description" content="Track your phone repair service finances" />
+  <meta name="theme-color" content="#FFFFFF" />
+  %sveltekit.head%
+</head>
+<body data-sveltekit-preload-data="hover">
+  <div style="display: contents">%sveltekit.body%</div>
+</body>
+</html>

src/components/Footer.svelte

@@ -0,0 +1,8 @@
+svelte
+<footer class="bg-slate-50 border-t border-slate-100 py-6 mt-8">
+  <div class="container mx-auto px-4 text-center text-slate-500 text-sm">
+    <p>© {new Date().getFullYear()} ServiceBook - Phone Repair Finance Manager</p>
+  </div>
+</footer>
+
+</html>

src/components/Navbar.svelte

@@ -0,0 +1,53 @@
+svelte
+<script>
+  import { LucideHome, LucidePieChart, LucideList, LucideSettings, LucideLogIn, LucideUser } from 'lucide-svelte';
+  import { page } from '$app/stores';
+
+  export let session;
+</script>
+
+<nav class="bg-white border-b border-slate-100 shadow-sm">
+  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+    <a href="/" class="flex items-center space-x-2">
+      <span class="text-xl font-bold text-slate-900">ServiceBook</span>
+    </a>
+
+    <div class="flex items-center space-x-6">
+      <a href="/" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
+        <LucideHome size={18} />
+        <span class={$page.url.pathname === '/' ? 'font-medium' : ''}>Dashboard</span>
+      </a>
+      
+      <a href="/transactions" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
+        <LucideList size={18} />
+        <span class={$page.url.pathname.startsWith('/transactions') ? 'font-medium' : ''}>Transactions</span>
+      </a>
+      
+      <a href="/reports" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
+        <LucidePieChart size={18} />
+        <span class={$page.url.pathname.startsWith('/reports') ? 'font-medium' : ''}>Reports</span>
+      </a>
+
+      {#if session}
+        <a href="/settings" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
+          <LucideSettings size={18} />
+          <span class={$page.url.pathname.startsWith('/settings') ? 'font-medium' : ''}>Settings</span>
+        </a>
+        
+        <div class="flex items-center space-x-2">
+          <div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center">
+            <LucideUser size={16} class="text-slate-600" />
+          </div>
+          <span class="text-sm font-medium text-slate-700">{session.user.email}</span>
+        </div>
+      {:else}
+        <a href="/auth/login" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
+          <LucideLogIn size={18} />
+          <span>Login</span>
+        </a>
+      {/if}
+    </div>
+  </div>
+</nav>
+
+</html>

src/components/dashboard/CategoryPie.svelte

@@ -0,0 +1,62 @@
+svelte
+<script>
+  import { onMount } from 'svelte';
+  import { Chart } from 'chart.js/auto';
+  
+  let chart;
+  let canvas;
+  
+  onMount(() => {
+    if (canvas) {
+      chart = new Chart(canvas, {
+        type: 'doughnut',
+        data: {
+          labels: ['Screen Repair', 'Battery', 'Software', 'Accessories', 'Other'],
+          datasets: [{
+            data: [35, 25, 20, 15, 5],
+            backgroundColor: [
+              '#FF6384',
+              '#36A2EB',
+              '#FFCE56',
+              '#4BC0C0',
+              '#9966FF'
+            ],
+            borderWidth: 0
+          }]
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              position: 'right'
+            },
+            tooltip: {
+              callbacks: {
+                label: function(context) {
+                  const label = context.label || '';
+                  const value = context.raw || 0;
+                  const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                  const percentage = Math.round((value / total) * 100);
+                  return `${label}: ${percentage}% (Rp ${value.toLocaleString()})`;
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    
+    return () => {
+      if (chart) {
+        chart.destroy();
+      }
+    };
+  });
+</script>
+
+<div class="card h-full">
+  <h2 class="text-lg font-semibold text-slate-900 mb-4">Expense Categories</h2>
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+</html>

src/components/dashboard/MonthlyChart.svelte

@@ -0,0 +1,71 @@
+svelte
+<script>
+  import { onMount } from 'svelte';
+  import { Chart } from 'chart.js/auto';
+  
+  let chart;
+  let canvas;
+  
+  onMount(() => {
+    if (canvas) {
+      chart = new Chart(canvas, {
+        type: 'bar',
+        data: {
+          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          datasets: [
+            {
+              label: 'Income',
+              data: [12000000, 15000000, 18000000, 14000000, 16000000, 19000000, 21000000, 23000000, 20000000, 22000000, 24000000, 26000000],
+              backgroundColor: '#4CAF50',
+              borderRadius: 4
+            },
+            {
+              label: 'Expenses',
+              data: [8000000, 9000000, 10000000, 8500000, 9500000, 11000000, 12000000, 13000000, 11500000, 12500000, 14000000, 15000000],
+              backgroundColor: '#F44336',
+              borderRadius: 4
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              position: 'top'
+            },
+            tooltip: {
+              callbacks: {
+                label: function(context) {
+                  return `${context.dataset.label}: Rp ${context.raw.toLocaleString()}`;
+                }
+              }
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              ticks: {
+                callback: function(value) {
+                  return `Rp ${value.toLocaleString()}`;
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    
+    return () => {
+      if (chart) {
+        chart.destroy();
+      }
+    };
+  });
+</script>
+
+<div class="card h-full">
+  <h2 class="text-lg font-semibold text-slate-900 mb-4">Monthly Income vs Expenses</h2>
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+</html>

src/components/dashboard/SummaryCards.svelte

@@ -0,0 +1,51 @@
+svelte
+<script>
+  import { LucideArrowUp, LucideArrowDown, LucideDollarSign } from 'lucide-svelte';
+  
+  export let income = 0;
+  export let expenses = 0;
+  export let profit = income - expenses;
+</script>
+
+<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+  <!-- Income Card -->
+  <div class="card bg-[var(--success-soft)]">
+    <div class="flex items-start justify-between">
+      <div>
+        <p class="text-sm text-slate-600">Total Income</p>
+        <p class="text-2xl font-bold text-slate-900">Rp {income.toLocaleString()}</p>
+      </div>
+      <div class="p-2 rounded-full bg-green-100 text-green-600">
+        <LucideArrowUp size={20} />
+      </div>
+    </div>
+  </div>
+  
+  <!-- Expense Card -->
+  <div class="card bg-[var(--danger-soft)]">
+    <div class="flex items-start justify-between">
+      <div>
+        <p class="text-sm text-slate-600">Total Expenses</p>
+        <p class="text-2xl font-bold text-slate-900">Rp {expenses.toLocaleString()}</p>
+      </div>
+      <div class="p-2 rounded-full bg-red-100 text-red-600">
+        <LucideArrowDown size={20} />
+      </div>
+    </div>
+  </div>
+  
+  <!-- Profit Card -->
+  <div class="card bg-[var(--primary-soft)]">
+    <div class="flex items-start justify-between">
+      <div>
+        <p class="text-sm text-slate-600">Profit/Loss</p>
+        <p class="text-2xl font-bold text-slate-900">Rp {profit.toLocaleString()}</p>
+      </div>
+      <div class="p-2 rounded-full bg-blue-100 text-blue-600">
+        <LucideDollarSign size={20} />
+      </div>
+    </div>
+  </div>
+</div>
+
+</html>

src/components/reports/ProfitTrend.svelte

@@ -0,0 +1,67 @@
+svelte
+<script>
+  import { onMount } from 'svelte';
+  import { Chart } from 'chart.js/auto';
+  
+  let chart;
+  let canvas;
+  
+  onMount(() => {
+    if (canvas) {
+      chart = new Chart(canvas, {
+        type: 'line',
+        data: {
+          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          datasets: [{
+            label: 'Profit/Loss',
+            data: [4000000, 6000000, 8000000, 5500000, 6500000, 8000000, 9000000, 10000000, 8500000, 9500000, 10000000, 11000000],
+            borderColor: '#3B82F6',
+            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+            fill: true,
+            tension: 0.3,
+            pointRadius: 4,
+            pointBackgroundColor: '#3B82F6'
+          }]
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              display: false
+            },
+            tooltip: {
+              callbacks: {
+                label: function(context) {
+                  return `Profit: Rp ${context.raw.toLocaleString()}`;
+                }
+              }
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: false,
+              ticks: {
+                callback: function(value) {
+                  return `Rp ${value.toLocaleString()}`;
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    
+    return () => {
+      if (chart) {
+        chart.destroy();
+      }
+    };
+  });
+</script>
+
+<div>
+  <h2 class="text-lg font-semibold text-slate-900 mb-4">Profit Trend</h2>
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+</html>

src/components/reports/ReportControls.svelte

@@ -0,0 +1,49 @@
+svelte
+<script>
+  export let dateRange = 'this-month';
+  
+  const ranges = [
+    { value: 'today', label: 'Today' },
+    { value: 'this-week', label: 'This Week' },
+    { value: 'this-month', label: 'This Month' },
+    { value: 'this-year', label: 'This Year' },
+    { value: 'custom', label: 'Custom Range' }
+  ];
+</script>
+
+<div class="card flex items-center space-x-4">
+  <div>
+    <label for="dateRange" class="block text-sm font-medium text-slate-700 mb-1">Date Range</label>
+    <select
+      id="dateRange"
+      bind:value={dateRange}
+      class="input-field"
+    >
+      {#each ranges as range}
+        <option value={range.value}>{range.label}</option>
+      {/each}
+    </select>
+  </div>
+  
+  {#if dateRange === 'custom'}
+    <div>
+      <label for="startDate" class="block text-sm font-medium text-slate-700 mb-1">From</label>
+      <input
+        id="startDate"
+        type="date"
+        class="input-field"
+      />
+    </div>
+    
+    <div>
+      <label for="endDate" class="block text-sm font-medium text-slate-700 mb-1">To</label>
+      <input
+        id="endDate"
+        type="date"
+        class="input-field"
+      />
+    </div>
+  {/if}
+</div>
+
+</html>

src/components/transactions/RecentTransactions.svelte

@@ -0,0 +1,82 @@
+svelte
+<script>
+  import { LucideArrowUpRight, LucideArrowDownRight, LucideMoreVertical } from 'lucide-svelte';
+  
+  export let transactions = [
+    {
+      id: 1,
+      date: '2023-05-15',
+      description: 'iPhone 12 screen replacement',
+      type: 'income',
+      category: 'Screen Repair',
+      amount: 1200000
+    },
+    {
+      id: 2,
+      date: '2023-05-14',
+      description: 'Bought battery for iPhone X',
+      type: 'expense',
+      category: 'Battery',
+      amount: 350000
+    },
+    {
+      id: 3,
+      date: '2023-05-12',
+      description: 'Samsung S21 screen repair',
+      type: 'income',
+      category: 'Screen Repair',
+      amount: 900000
+    },
+    {
+      id: 4,
+      date: '2023-05-10',
+      description: 'Software troubleshooting',
+      type: 'income',
+      category: 'Software',
+      amount: 300000
+    }
+  ];
+</script>
+
+<div class="card">
+  <div class="flex items-center justify-between mb-4">
+    <h2 class="text-lg font-semibold text-slate-900">Recent Transactions</h2>
+    <a href="/transactions" class="text-sm text-blue-500 hover:underline">View All</a>
+  </div>
+  
+  <div class="space-y-3">
+    {#each transactions as transaction}
+      <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
+        <div class="flex items-center space-x-3">
+          {#if transaction.type === 'income'}
+            <div class="p-2 rounded-full bg-green-100 text-green-600">
+              <LucideArrowUpRight size={16} />
+            </div>
+          {:else}
+            <div class="p-2 rounded-full bg-red-100 text-red-600">
+              <LucideArrowDownRight size={16} />
+            </div>
+          {/if}
+          
+          <div>
+            <p class="font-medium text-slate-900">{transaction.description}</p>
+            <p class="text-xs text-slate-500">
+              {transaction.date} • {transaction.category}
+            </p>
+          </div>
+        </div>
+        
+        <div class="flex items-center space-x-4">
+          <p class:font-bold={true} class:text-green-600={transaction.type === 'income'} class:text-red-600={transaction.type === 'expense'}>
+            {transaction.type === 'income' ? '+' : '-'}Rp {transaction.amount.toLocaleString()}
+          </p>
+          <button class="text-slate-400 hover:text-slate-600">
+            <LucideMoreVertical size={16} />
+          </button>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+</html>

src/components/transactions/TransactionForm.svelte

@@ -0,0 +1,137 @@
+svelte
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { LucideSave, LucideX } from 'lucide-svelte';
+  
+  const dispatch = createEventDispatcher();
+  
+  export let transaction = {
+    date: new Date().toISOString().split('T')[0],
+    type: 'income',
+    description: '',
+    category: '',
+    amount: 0,
+    paymentMethod: 'cash'
+  };
+  
+  export let categories = [];
+  
+  const paymentMethods = [
+    { value: 'cash', label: 'Cash' },
+    { value: 'bank', label: 'Bank Transfer' },
+    { value: 'card', label: 'Credit Card' },
+    { value: 'ewallet', label: 'E-Wallet' }
+  ];
+  
+  function handleSubmit() {
+    if (!transaction.amount || transaction.amount <= 0) return;
+    if (!transaction.category) return;
+    
+    dispatch('submit', transaction);
+  }
+</script>
+
+<form on:submit|preventDefault={handleSubmit} class="space-y-4">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div>
+      <label for="date" class="block text-sm font-medium text-slate-700 mb-1">Date</label>
+      <input
+        id="date"
+        type="date"
+        bind:value={transaction.date}
+        class="input-field"
+        required
+      />
+    </div>
+    
+    <div>
+      <label for="type" class="block text-sm font-medium text-slate-700 mb-1">Type</label>
+      <select
+        id="type"
+        bind:value={transaction.type}
+        class="input-field"
+      >
+        <option value="income">Income</option>
+        <option value="expense">Expense</option>
+      </select>
+    </div>
+  </div>
+  
+  <div>
+    <label for="description" class="block text-sm font-medium text-slate-700 mb-1">Description</label>
+    <input
+      id="description"
+      type="text"
+      bind:value={transaction.description}
+      class="input-field"
+      placeholder="Repair iPhone screen, Buy spare parts..."
+    />
+  </div>
+  
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div>
+      <label for="category" class="block text-sm font-medium text-slate-700 mb-1">Category</label>
+      <select
+        id="category"
+        bind:value={transaction.category}
+        class="input-field"
+        required
+      >
+        <option value="">Select a category</option>
+        {#each categories as category}
+          <option value={category}>{category}</option>
+        {/each}
+      </select>
+    </div>
+    
+    <div>
+      <label for="amount" class="block text-sm font-medium text-slate-700 mb-1">Amount</label>
+      <div class="relative">
+        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">Rp</span>
+        <input
+          id="amount"
+          type="number"
+          bind:value={transaction.amount}
+          class="input-field pl-10"
+          min="0"
+          step="1000"
+          required
+        />
+      </div>
+    </div>
+  </div>
+  
+  <div>
+    <label for="paymentMethod" class="block text-sm font-medium text-slate-700 mb-1">Payment Method</label>
+    <select
+      id="paymentMethod"
+      bind:value={transaction.paymentMethod}
+      class="input-field"
+    >
+      {#each paymentMethods as method}
+        <option value={method.value}>{method.label}</option>
+      {/each}
+    </select>
+  </div>
+  
+  <div class="flex justify-end space-x-3 pt-4">
+    <button
+      type="button"
+      on:click={() => dispatch('cancel')}
+      class="btn-secondary flex items-center space-x-1"
+    >
+      <LucideX size={18} />
+      <span>Cancel</span>
+    </button>
+    
+    <button
+      type="submit"
+      class="btn-primary flex items-center space-x-1"
+    >
+      <LucideSave size={18} />
+      <span>Save</span>
+    </button>
+  </div>
+</form>
+
+</html>

src/components/transactions/TransactionTable.svelte

@@ -0,0 +1,122 @@
+svelte
+<script>
+  import { LucideArrowUpRight, LucideArrowDownRight, LucideEdit, LucideTrash2 } from 'lucide-svelte';
+  
+  let transactions = [
+    {
+      id: 1,
+      date: '2023-05-15',
+      description: 'iPhone 12 screen replacement',
+      type: 'income',
+      category: 'Screen Repair',
+      amount: 1200000,
+      paymentMethod: 'cash'
+    },
+    {
+      id: 2,
+      date: '2023-05-14',
+      description: 'Bought battery for iPhone X',
+      type: 'expense',
+      category: 'Battery',
+      amount: 350000,
+      paymentMethod: 'bank'
+    },
+    {
+      id: 3,
+      date: '2023-05-12',
+      description: 'Samsung S21 screen repair',
+      type: 'income',
+      category: 'Screen Repair',
+      amount: 900000,
+      paymentMethod: 'ewallet'
+    }
+  ];
+  
+  let currentPage = 1;
+  const itemsPerPage = 10;
+  
+  function handleEdit(transaction) {
+    // TODO: Implement edit
+    console.log('Edit:', transaction);
+  }
+  
+  function handleDelete(id) {
+    // TODO: Implement delete
+    console.log('Delete:', id);
+  }
+</script>
+
+<div class="overflow-x-auto">
+  <table class="min-w-full divide-y divide-slate-200">
+    <thead class="bg-slate-50">
+      <tr>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Date</th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Description</th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Category</th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Payment</th>
+        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Amount</th>
+        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Actions</th>
+      </tr>
+    </thead>
+    <tbody class="bg-white divide-y divide-slate-200">
+      {#each transactions as transaction (transaction.id)}
+        <tr class="hover:bg-slate-50">
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{transaction.date}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{transaction.description}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{transaction.category}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500 capitalize">{transaction.paymentMethod}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-right {transaction.type === 'income' ? 'text-green-600' : 'text-red-600'}">
+            {transaction.type === 'income' ? '+' : '-'}Rp {transaction.amount.toLocaleString()}
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            <div class="flex space-x-2 justify-end">
+              <button
+                on:click={() => handleEdit(transaction)}
+                class="text-blue-500 hover:text-blue-700"
+                title="Edit"
+              >
+                <LucideEdit size={16} />
+              </button>
+              <button
+                on:click={() => handleDelete(transaction.id)}
+                class="text-red-500 hover:text-red-700"
+                title="Delete"
+              >
+                <LucideTrash2 size={16} />
+              </button>
+            </div>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+{#if transactions.length === 0}
+  <div class="text-center py-8">
+    <p class="text-slate-500">No transactions yet. Add your first transaction!</p>
+  </div>
+{/if}
+
+<div class="flex items-center justify-between mt-4">
+  <div class="text-sm text-slate-500">
+    Showing {Math.min(currentPage * itemsPerPage, transactions.length)} of {transactions.length} transactions
+  </div>
+  
+  <div class="flex space-x-2">
+    <button
+      disabled={currentPage === 1}
+      class="px-3 py-1 rounded border border-slate-200 text-slate-700 disabled:opacity-50"
+    >
+      Previous
+    </button>
+    <button
+      disabled={currentPage * itemsPerPage >= transactions.length}
+      class="px-3 py-1 rounded border border-slate-200 text-slate-700 disabled:opacity-50"
+    >
+      Next
+    </button>
+  </div>
+</div>
+
+</html>

src/lib/db.js

@@ -0,0 +1,19 @@
+import Dexie from 'dexie';
+
+export const db = new Dexie('ServiceBookDB');
+
+db.version(1).stores({
+  transactions: '++id, userId, date, type, category, amount',
+  syncQueue: '++id, action, payload, timestamp',
+  settings: 'key'
+});
+
+db.version(2).upgrade(trans => {
+  return trans.table('transactions').toCollection().modify(transaction => {
+    transaction.synced = false;
+    transaction.updatedAt = new Date().toISOString();
+  });
+});
+
+// Export the database instance
+export default db;

src/routes/+layout.server.js

@@ -0,0 +1,5 @@
+export const load = async ({ locals }) => {
+  return {
+    session: await locals.getSession()
+  };
+};

src/routes/+layout.svelte

@@ -0,0 +1,19 @@
+svelte
+<script>
+  import '../app.css';
+  import Navbar from '$components/Navbar.svelte';
+  import Footer from '$components/Footer.svelte';
+  import { session } from '$stores/auth';
+</script>
+
+<div class="min-h-screen flex flex-col bg-white">
+  <Navbar {session} />
+
+  <main class="flex-1 container mx-auto px-4 py-8">
+    <slot />
+  </main>
+
+  <Footer />
+</div>
+
+</html>

src/routes/+page.svelte

@@ -0,0 +1,27 @@
+svelte
+<script>
+  import { page } from '$app/stores';
+  import SummaryCards from '$components/dashboard/SummaryCards.svelte';
+  import MonthlyChart from '$components/dashboard/MonthlyChart.svelte';
+  import CategoryPie from '$components/dashboard/CategoryPie.svelte';
+  import RecentTransactions from '$components/transactions/RecentTransactions.svelte';
+
+  export let data;
+  
+  $: session = data.session;
+</script>
+
+<div class="space-y-8">
+  <h1 class="text-3xl font-bold text-slate-900">Dashboard</h1>
+
+  <SummaryCards />
+  
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <MonthlyChart />
+    <CategoryPie />
+  </div>
+
+  <RecentTransactions />
+</div>
+
+</html>

src/routes/auth/login/+page.svelte

@@ -0,0 +1,96 @@
+svelte
+<script>
+  import { goto } from '$app/navigation';
+  import { LucideLogIn } from 'lucide-svelte';
+  
+  let email = '';
+  let password = '';
+  let error = '';
+  let loading = false;
+  
+  async function handleLogin() {
+    if (!email || !password) {
+      error = 'Please fill all fields';
+      return;
+    }
+    
+    loading = true;
+    error = '';
+    
+    try {
+      // TODO: Implement actual login
+      console.log('Logging in with:', email, password);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      goto('/');
+    } catch (err) {
+      error = err.message || 'Login failed';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<div class="max-w-md mx-auto my-12">
+  <div class="card p-8">
+    <div class="text-center mb-8">
+      <h1 class="text-2xl font-bold text-slate-900 mb-1">Welcome back</h1>
+      <p class="text-slate-600">Login to manage your phone repair finances</p>
+    </div>
+    
+    {#if error}
+      <div class="mb-4 p-3 bg-red-100 text-red-700 rounded-lg text-sm">
+        {error}
+      </div>
+    {/if}
+    
+    <form on:submit|preventDefault={handleLogin} class="space-y-4">
+      <div>
+        <label for="email" class="block text-sm font-medium text-slate-700 mb-1">Email</label>
+        <input
+          id="email"
+          type="email"
+          bind:value={email}
+          class="input-field"
+          placeholder="your@email.com"
+          required
+        />
+      </div>
+      
+      <div>
+        <label for="password" class="block text-sm font-medium text-slate-700 mb-1">Password</label>
+        <input
+          id="password"
+          type="password"
+          bind:value={password}
+          class="input-field"
+          placeholder="••••••••"
+          required
+        />
+      </div>
+      
+      <div class="pt-2">
+        <button
+          type="submit"
+          class="btn-primary w-full flex items-center justify-center space-x-2"
+          disabled={loading}
+        >
+          {#if loading}
+            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          {:else}
+            <LucideLogIn size={16} />
+          {/if}
+          <span>Login</span>
+        </button>
+      </div>
+      
+      <div class="text-center text-sm text-slate-500 pt-2">
+        Don't have an account? <a href="/auth/register" class="text-blue-500 hover:underline">Register</a>
+      </div>
+    </form>
+  </div>
+</div>
+
+</html>

src/routes/reports/+page.svelte

@@ -0,0 +1,79 @@
+svelte
+<script>
+  import MonthlyChart from '$components/dashboard/MonthlyChart.svelte';
+  import CategoryPie from '$components/dashboard/CategoryPie.svelte';
+  import ProfitTrend from '$components/reports/ProfitTrend.svelte';
+  import ReportControls from '$components/reports/ReportControls.svelte';
+  import { LucideDownload, LucideShare2 } from 'lucide-svelte';
+  
+  let dateRange = 'this-month';
+  let exporting = false;
+  
+  async function exportToPDF() {
+    exporting = true;
+    // TODO: Implement PDF export
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    exporting = false;
+  }
+  
+  async function shareReport() {
+    try {
+      // TODO: Implement share
+      if (navigator.share) {
+        await navigator.share({
+          title: 'ServiceBook Report',
+          text: 'Check out my phone repair business financial report',
+          url: window.location.href
+        });
+      } else {
+        // Fallback for browsers without Web Share API
+        window.open(`whatsapp://send?text=Check out my report: ${window.location.href}`);
+      }
+    } catch (err) {
+      console.log('Sharing cancelled', err);
+    }
+  }
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-bold text-slate-900">Reports</h1>
+    <div class="flex space-x-2">
+      <button
+        on:click={shareReport}
+        class="btn-secondary flex items-center space-x-1"
+      >
+        <LucideShare2 size={16} />
+        <span>Share</span>
+      </button>
+      <button
+        on:click={exportToPDF}
+        class="btn-secondary flex items-center space-x-1"
+        disabled={exporting}
+      >
+        {#if exporting}
+          <svg class="animate-spin -ml-1 mr-1 h-4 w-4 text-slate-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        {:else}
+          <LucideDownload size={16} />
+        {/if}
+        <span>Export</span>
+      </button>
+    </div>
+  </div>
+  
+  <ReportControls bind:dateRange />
+  
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <MonthlyChart />
+    <CategoryPie />
+  </div>
+  
+  <div class="card">
+    <ProfitTrend />
+  </div>
+</div>
+
+</html>

src/routes/settings/+page.svelte

@@ -0,0 +1,108 @@
+svelte
+<script>
+  import { LucideSave } from 'lucide-svelte';
+  
+  let categories = ['Screen Repair', 'Battery', 'Software', 'Accessories', 'Other'];
+  let newCategory = '';
+  let saving = false;
+  
+  function addCategory() {
+    if (newCategory && !categories.includes(newCategory)) {
+      categories = [...categories, newCategory];
+      newCategory = '';
+    }
+  }
+  
+  function removeCategory(category) {
+    categories = categories.filter(c => c !== category);
+  }
+  
+  async function saveSettings() {
+    saving = true;
+    // TODO: Save settings
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    saving = false;
+  }
+</script>
+
+<div class="space-y-6">
+  <h1 class="text-2xl font-bold text-slate-900">Settings</h1>
+  
+  <div class="card space-y-4">
+    <h2 class="text-lg font-medium text-slate-900">Transaction Categories</h2>
+    
+    <div class="flex items-center space-x-2">
+      <input
+        type="text"
+        bind:value={newCategory}
+        placeholder="New category name"
+        class="input-field flex-1"
+      />
+      <button
+        on:click={addCategory}
+        class="btn-secondary"
+      >
+        Add
+      </button>
+    </div>
+    
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
+      {#each categories as category}
+        <div class="flex items-center justify-between bg-slate-50 rounded-lg px-3 py-2">
+          <span class="text-slate-800">{category}</span>
+          <button
+            on:click={() => removeCategory(category)}
+            class="text-red-500 hover:text-red-700"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      {/each}
+    </div>
+  </div>
+  
+  <div class="card space-y-4">
+    <h2 class="text-lg font-medium text-slate-900">Export/Import Data</h2>
+    
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div>
+        <h3 class="text-sm font-medium text-slate-700 mb-2">Export Data</h3>
+        <p class="text-sm text-slate-500 mb-3">Download a backup of your transactions</p>
+        <button class="btn-secondary">
+          Export to JSON
+        </button>
+      </div>
+      
+      <div>
+        <h3 class="text-sm font-medium text-slate-700 mb-2">Import Data</h3>
+        <p class="text-sm text-slate-500 mb-3">Restore from a previous backup</p>
+        <button class="btn-secondary">
+          Import from JSON
+        </button>
+      </div>
+    </div>
+  </div>
+  
+  <div class="flex justify-end">
+    <button
+      on:click={saveSettings}
+      class="btn-primary flex items-center space-x-1"
+      disabled={saving}
+    >
+      {#if saving}
+        <svg class="animate-spin -ml-1 mr-1 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      {:else}
+        <LucideSave size={16} />
+      {/if}
+      <span>Save Settings</span>
+    </button>
+  </div>
+</div>
+
+</html>

src/routes/transactions/+page.svelte

@@ -0,0 +1,44 @@
+svelte
+<script>
+  import TransactionForm from '$components/transactions/TransactionForm.svelte';
+  import TransactionTable from '$components/transactions/TransactionTable.svelte';
+  import { LucidePlus } from 'lucide-svelte';
+  
+  let showForm = false;
+  let categories = ['Screen Repair', 'Battery', 'Software', 'Accessories', 'Other'];
+  
+  function handleSubmit(newTransaction) {
+    // TODO: Save transaction
+    console.log('New transaction:', newTransaction);
+    showForm = false;
+  }
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-bold text-slate-900">Transactions</h1>
+    <button
+      on:click={() => showForm = true}
+      class="btn-primary flex items-center space-x-1"
+    >
+      <LucidePlus size={16} />
+      <span>Add Transaction</span>
+    </button>
+  </div>
+  
+  {#if showForm}
+    <div class="card">
+      <TransactionForm
+        categories={categories}
+        on:submit={handleSubmit}
+        on:cancel={() => showForm = false}
+      />
+    </div>
+  {/if}
+  
+  <div class="card">
+    <TransactionTable />
+  </div>
+</div>
+
+</html>

svelte.config.js

@@ -0,0 +1,17 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapter(),
+    alias: {
+      $components: 'src/components',
+      $lib: 'src/lib',
+      $stores: 'src/stores'
+    }
+  },
+  preprocess: [vitePreprocess()]
+};
+
+export default config;