ui/ux overhaul and add subscription (by gemini)

Author: Gemini Bot

src/components/AboutSection.tsx

@@ -8,16 +8,16 @@ const AboutSection: React.FC = () => {
         <div className="rounded-xl border bg-card p-8 text-center space-y-6 shadow-sm">
           {/* Title */}
           <h2 className="text-2xl font-bold text-foreground">
-            Tentang
+            hi there! 
           </h2>
 
           {/* Subtitle */}
           <p className="text-sm text-muted-foreground font-medium">
-            Aureus adalah aplikasi pencatat keuangan sederhana yang berjalan sepenuhnya di perangkat Anda.
+            Thanks for using my app! This project is open-source and available on GitHub. Feel free to check it out, contribute, or report any issues you find.
           </p>
 
           {/* Social Links */}
-          <div className="flex items-center justify-center gap-6 py-4">
+          <div className="flex flex-wrap items-center justify-center gap-4 py-4">
             {/* Instagram */}
             <a
               href="https://instagram.com/rmeydani_"
@@ -44,7 +44,7 @@ const AboutSection: React.FC = () => {
           {/* Humble Quote */}
           <div className="pt-4 border-t border-border">
             <p className="text-sm text-muted-foreground italic">
-              Dibuat untuk pencatatan harian yang cepat, rapi, dan mudah ditinjau.
+              "how to center a div?"
             </p>
           </div>
 

src/components/BottomNav.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Home, BarChart, File, Grid } from 'lucide-react';
+import { Home, BarChart, File, Grid, Ticket } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-export type NavTab = 'home' | 'stats' | 'reports' | 'more';
+export type NavTab = 'home' | 'stats' | 'subs' | 'reports' | 'more';
 
 interface BottomNavProps {
   activeTab: NavTab;
@@ -13,6 +13,7 @@ const BottomNav: React.FC<BottomNavProps> = ({ activeTab, onTabChange }) => {
   const navItems = [
     { id: 'home' as NavTab, icon: Home, label: 'Beranda' },
     { id: 'stats' as NavTab, icon: BarChart, label: 'Statistik' },
+    { id: 'subs' as NavTab, icon: Ticket, label: 'Langganan' },
     { id: 'reports' as NavTab, icon: File, label: 'Laporan' },
     { id: 'more' as NavTab, icon: Grid, label: 'Lainnya' },
   ];

src/components/Header.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import ThemeToggle from './ThemeToggle';
+import { Sun } from 'lucide-react';
 
 const Header: React.FC = () => {
   return (
     <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60 safe-area-top">
       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
           <div className="flex items-center gap-3">
+            <Sun className="h-6 w-6 text-primary animate-spin-slow" />
             <h1 className="text-lg font-bold tracking-tight sm:text-xl">
               <span className="gradient-text">Aureus</span>
             </h1>

src/components/SmartInsights.tsx

@@ -1,213 +1,58 @@
-
-import React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { ArrowUp, ArrowDown, AlertCircle, Circle } from 'lucide-react';
-import { Transaction } from '@/pages/Index';
+import React, { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Quote } from 'lucide-react';
+import { Transaction } from '@/pages/Index';
 
 interface SmartInsightsProps {
   transactions: Transaction[];
 }
 
-const SmartInsights: React.FC<SmartInsightsProps> = ({ transactions }) => {
-  const generateInsights = () => {
-    const insights: Array<{
-      type: 'success' | 'warning' | 'info' | 'danger';
-      icon: React.ReactNode;
-      title: string;
-      message: string;
-    }> = [];
-
-    const currentDate = new Date();
-    const currentMonth = currentDate.getMonth();
-    const currentYear = currentDate.getFullYear();
-    const lastMonth = currentMonth === 0 ? 11 : currentMonth - 1;
-    const lastMonthYear = currentMonth === 0 ? currentYear - 1 : currentYear;
-
-    // Current month transactions
-    const thisMonthTransactions = transactions.filter(t => {
-      const date = new Date(t.date);
-      return date.getMonth() === currentMonth && date.getFullYear() === currentYear;
-    });
-    
-    // Last month transactions
-    const lastMonthTransactions = transactions.filter(t => {
-      const date = new Date(t.date);
-      return date.getMonth() === lastMonth && date.getFullYear() === lastMonthYear;
-    });
-
-    const thisMonthIncome = thisMonthTransactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0);
-    const thisMonthExpense = thisMonthTransactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0);
-    const lastMonthIncome = lastMonthTransactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0);
-    const lastMonthExpense = lastMonthTransactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0);
-
-    // Income trend analysis
-    if (lastMonthIncome > 0) {
-      const incomeChange = ((thisMonthIncome - lastMonthIncome) / lastMonthIncome) * 100;
-      if (incomeChange > 10) {
-        insights.push({
-          type: 'success',
-          icon: <ArrowUp className="h-4 w-4" />,
-          title: 'Pemasukan Meningkat!',
-          message: `Pemasukan Anda naik ${incomeChange.toFixed(1)}% dibanding bulan lalu. Pertahankan!`
-        });
-      } else if (incomeChange < -10) {
-        insights.push({
-          type: 'warning',
-          icon: <ArrowDown className="h-4 w-4" />,
-          title: 'Pemasukan Menurun',
-          message: `Pemasukan turun ${Math.abs(incomeChange).toFixed(1)}% dibanding bulan lalu. Perlu perhatian.`
-        });
-      }
-    }
-
-    // Expense trend analysis
-    if (lastMonthExpense > 0) {
-      const expenseChange = ((thisMonthExpense - lastMonthExpense) / lastMonthExpense) * 100;
-      if (expenseChange > 20) {
-        insights.push({
-          type: 'danger',
-          icon: <AlertCircle className="h-4 w-4" />,
-          title: 'Pengeluaran Melonjak!',
-          message: `Pengeluaran naik ${expenseChange.toFixed(1)}% dibanding bulan lalu. Cek kategori terbesar.`
-        });
-      } else if (expenseChange < -10) {
-        insights.push({
-          type: 'success',
-          icon: <ArrowDown className="h-4 w-4" />,
-          title: 'Pengeluaran Terkendali',
-          message: `Pengeluaran turun ${Math.abs(expenseChange).toFixed(1)}% dibanding bulan lalu. Bagus!`
-        });
-      }
-    }
-
-    // Category analysis
-    const expensesByCategory = thisMonthTransactions
-      .filter(t => t.type === 'expense')
-      .reduce((acc, t) => {
-        acc[t.category] = (acc[t.category] || 0) + t.amount;
-        return acc;
-      }, {} as Record<string, number>);
-
-    const topCategory = Object.entries(expensesByCategory)
-      .sort(([,a], [,b]) => b - a)[0];
-
-    if (topCategory && topCategory[1] > thisMonthExpense * 0.4) {
-      insights.push({
-        type: 'info',
-        icon: <Circle className="h-4 w-4" />,
-        title: 'Kategori Dominan',
-        message: `${topCategory[0]} menghabiskan ${((topCategory[1] / thisMonthExpense) * 100).toFixed(1)}% total pengeluaran.`
-      });
-    }
-
-    // Savings rate
-    if (thisMonthIncome > 0) {
-      const savingsRate = ((thisMonthIncome - thisMonthExpense) / thisMonthIncome) * 100;
-      if (savingsRate > 20) {
-        insights.push({
-          type: 'success',
-          icon: <ArrowUp className="h-4 w-4" />,
-          title: 'Tingkat Tabungan Bagus',
-          message: `Anda menabung ${savingsRate.toFixed(1)}% dari pendapatan. Luar biasa!`
-        });
-      } else if (savingsRate < 0) {
-        insights.push({
-          type: 'danger',
-          icon: <AlertCircle className="h-4 w-4" />,
-          title: 'Pengeluaran > Pemasukan',
-          message: 'Pengeluaran melebihi pemasukan bulan ini. Review anggaran Anda.'
-        });
-      }
-    }
-
-    // Transaction frequency
-    const dailyTransactions = thisMonthTransactions.length / currentDate.getDate();
-    if (dailyTransactions > 5) {
-      insights.push({
-        type: 'info',
-        icon: <Circle className="h-4 w-4" />,
-        title: 'Aktivitas Transaksi Tinggi',
-        message: `Rata-rata ${dailyTransactions.toFixed(1)} transaksi per hari. Pertimbangkan konsolidasi.`
-      });
-    }
-
-    return insights;
-  };
-
-  const insights = generateInsights();
-
-  if (insights.length === 0) {
-    return null;
-  }
-
-  const getInsightStyle = (type: string) => {
-    switch (type) {
-      case 'success':
-        return 'bg-success/10 border-success/30';
-      case 'warning':
-        return 'bg-primary/10 border-primary/30';
-      case 'danger':
-        return 'bg-destructive/10 border-destructive/30';
-      case 'info':
-      default:
-        return 'bg-muted/40 border-border';
-    }
-  };
-
-  const getTextStyle = (type: string) => {
-    switch (type) {
-      case 'success':
-        return 'text-success';
-      case 'warning':
-        return 'text-primary';
-      case 'danger':
-        return 'text-destructive';
-      case 'info':
-      default:
-        return 'text-foreground';
-    }
-  };
+const MONEY_QUOTES = [
+  "Uang tidak bisa membeli kebahagiaan, tapi lebih enak menangis di dalam Mercedes daripada di atas sepeda.",
+  "Hemat pangkal kaya, tapi kalau pelit pangkal dijauhi teman.",
+  "Jangan menabung apa yang tersisa setelah belanja, tapi belanjalah apa yang tersisa setelah menabung.",
+  "Aturan No.1: Jangan pernah rugi. Aturan No.2: Jangan lupa Aturan No.1.",
+  "Terlalu banyak orang menghabiskan uang yang tidak mereka miliki, untuk membeli barang yang tidak mereka butuhkan, demi membuat kagum orang yang tidak mereka sukai.",
+  "Investasi dalam pengetahuan selalu membayar bunga terbaik.",
+  "Bukan seberapa banyak uang yang kamu hasilkan, tapi seberapa banyak yang kamu simpan.",
+  "Uang adalah hamba yang baik, tapi tuan yang buruk.",
+  "Orang kaya punya TV kecil dan perpustakaan besar. Orang miskin punya TV besar dan tidak punya perpustakaan.",
+  "Hati-hati dengan pengeluaran kecil; kebocoran kecil bisa menenggelamkan kapal besar.",
+  "Saya suka uang saya berada di tempat yang bisa saya lihat: tergantung di lemari pakaian saya. (Carrie Bradshaw)",
+  "Satu-satunya cara untuk tidak memikirkan uang adalah dengan memiliki banyak uang.",
+  "Waktu adalah uang. Kalau kamu buang-buang waktu, kamu buang-buang uang.",
+  "Gaji itu seperti menstruasi, datang sebulan sekali, tapi nyerinya bisa seminggu.",
+  "Jika Anda berutang $100 pada bank, itu masalah Anda. Jika Anda berutang $100 juta, itu masalah bank."
+];
+
+const SmartInsights: React.FC<SmartInsightsProps> = () => {
+  const [quote, setQuote] = useState("");
+
+  useEffect(() => {
+    // Pick a random quote on mount
+    const randomQuote = MONEY_QUOTES[Math.floor(Math.random() * MONEY_QUOTES.length)];
+    setQuote(randomQuote);
+  }, []);
 
   return (
-    <Card>
-      <CardHeader className="pb-4">
-        <CardTitle className="flex items-center gap-2 text-base">
-          <Circle className="h-5 w-5 text-primary" />
-          Wawasan Keuangan
+    <Card className="border-2 border-primary/20 shadow-[4px_4px_0px_0px_rgba(var(--primary),0.2)] hover:shadow-[6px_6px_0px_0px_rgba(var(--primary),0.4)] transition-all duration-300">
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-base font-display">
+          <Quote className="h-5 w-5 text-primary rotate-180" />
+          Kata Bijak (Mungkin)
         </CardTitle>
       </CardHeader>
       <CardContent>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {insights.map((insight, index) => (
-          <div
-            key={index}
-            className={`rounded-lg border p-4 ${getInsightStyle(insight.type)}`}
-          >
-            <div className="flex items-start gap-3">
-              <div className={getTextStyle(insight.type)}>
-                {insight.icon}
-              </div>
-              <div className="flex-1">
-                <h4 className={`font-medium mb-1 ${getTextStyle(insight.type)}`}>
-                  {insight.title}
-                </h4>
-                <p className="text-sm text-muted-foreground">
-                  {insight.message}
-                </p>
-              </div>
-              <Badge variant={insight.type === 'success' ? 'default' : 'secondary'} className="text-xs">
-                {insight.type === 'success' ? 'Bagus' : 
-                 insight.type === 'warning' ? 'Perhatian' :
-                 insight.type === 'danger' ? 'Penting' : 'Info'}
-              </Badge>
-            </div>
-          </div>
-        ))}
-      </div>
+        <div className="relative p-6 bg-primary/5 rounded-lg border border-dashed border-primary/30">
+          <Quote className="absolute top-2 left-2 h-8 w-8 text-primary/10 -scale-x-100" />
+          <p className="text-lg font-medium text-center italic text-foreground/80 font-serif leading-relaxed">
+            "{quote}"
+          </p>
+          <Quote className="absolute bottom-2 right-2 h-8 w-8 text-primary/10" />
+        </div>
       </CardContent>
     </Card>
   );
 };
 
-export default SmartInsights;
+export default SmartInsights;