From ad9e4d06f4514c5901dcff9ec4d7f32bc03fb9ad Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:10:33 +0000
Subject: [PATCH] Seed: dashboard template (24 files)

---
 src/pages/Index.tsx | 226 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 226 insertions(+)
 create mode 100644 src/pages/Index.tsx

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
new file mode 100644
index 0000000..af8311c
--- /dev/null
+++ b/src/pages/Index.tsx
@@ -0,0 +1,226 @@
+import { useState } from "react";
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Separator } from "@/components/ui/separator";
+import {
+  DollarSign, Users, ShoppingCart, TrendingUp, TrendingDown,
+  ArrowUpRight, ArrowDownRight, MoreHorizontal, Eye,
+  FileText, UserPlus, BarChart3, Download
+} from "lucide-react";
+import Sidebar from "@/components/Sidebar";
+import Header from "@/components/Header";
+
+const kpiCards = [
+  {
+    title: "Total Revenue",
+    value: "$48.5K",
+    change: "+12.5%",
+    trend: "up" as const,
+    icon: DollarSign,
+    color: "text-sky-600 bg-sky-100",
+  },
+  {
+    title: "Active Users",
+    value: "2,438",
+    change: "+8.2%",
+    trend: "up" as const,
+    icon: Users,
+    color: "text-orange-600 bg-orange-100",
+  },
+  {
+    title: "Total Orders",
+    value: "1,256",
+    change: "+23.1%",
+    trend: "up" as const,
+    icon: ShoppingCart,
+    color: "text-emerald-600 bg-emerald-100",
+  },
+  {
+    title: "Conversion Rate",
+    value: "3.2%",
+    change: "+0.5%",
+    trend: "up" as const,
+    icon: TrendingUp,
+    color: "text-violet-600 bg-violet-100",
+  },
+];
+
+const recentOrders = [
+  { id: "#ORD-7291", customer: "Sarah Mitchell", amount: "$234.50", status: "Completed", statusColor: "bg-emerald-100 text-emerald-700", date: "Apr 10, 2026" },
+  { id: "#ORD-7290", customer: "James Cooper", amount: "$891.00", status: "Processing", statusColor: "bg-sky-100 text-sky-700", date: "Apr 10, 2026" },
+  { id: "#ORD-7289", customer: "Emily Zhang", amount: "$156.25", status: "Completed", statusColor: "bg-emerald-100 text-emerald-700", date: "Apr 9, 2026" },
+  { id: "#ORD-7288", customer: "Michael Brown", amount: "$432.80", status: "Pending", statusColor: "bg-amber-100 text-amber-700", date: "Apr 9, 2026" },
+  { id: "#ORD-7287", customer: "Lisa Anderson", amount: "$67.90", status: "Cancelled", statusColor: "bg-red-100 text-red-700", date: "Apr 8, 2026" },
+];
+
+const activityFeed = [
+  { user: "SM", name: "Sarah Mitchell", action: "placed a new order for $234.50", time: "2 minutes ago" },
+  { user: "JC", name: "James Cooper", action: "upgraded to the Pro plan", time: "15 minutes ago" },
+  { user: "EZ", name: "Emily Zhang", action: "submitted a support ticket", time: "1 hour ago" },
+  { user: "MB", name: "Michael Brown", action: "updated their billing information", time: "3 hours ago" },
+  { user: "LA", name: "Lisa Anderson", action: "cancelled order #ORD-7287", time: "5 hours ago" },
+];
+
+const revenueData = [
+  { month: "Jan", revenue: 4200 }, { month: "Feb", revenue: 5400 }, { month: "Mar", revenue: 4800 },
+  { month: "Apr", revenue: 6200 }, { month: "May", revenue: 5800 }, { month: "Jun", revenue: 7500 },
+  { month: "Jul", revenue: 6800 }, { month: "Aug", revenue: 8200 }, { month: "Sep", revenue: 7600 },
+  { month: "Oct", revenue: 9500 }, { month: "Nov", revenue: 8800 }, { month: "Dec", revenue: 10200 },
+];
+
+export default function IndexPage() {
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      <Sidebar activePath="/" />
+      <div className="flex-1 lg:ml-64">
+        <Header />
+        <main className="p-6 space-y-8">
+          {/* ── Quick Actions ── */}
+          <div className="flex flex-wrap gap-3">
+            <Button variant="outline" size="sm" className="active:scale-[0.98] transition-all">
+              <FileText className="mr-2 h-4 w-4 text-sky-600" /> Create Report
+            </Button>
+            <Button variant="outline" size="sm" className="active:scale-[0.98] transition-all">
+              <UserPlus className="mr-2 h-4 w-4 text-emerald-600" /> Add User
+            </Button>
+            <Button variant="outline" size="sm" className="active:scale-[0.98] transition-all">
+              <BarChart3 className="mr-2 h-4 w-4 text-orange-600" /> View Analytics
+            </Button>
+            <Button variant="outline" size="sm" className="active:scale-[0.98] transition-all">
+              <Download className="mr-2 h-4 w-4 text-violet-600" /> Export Data
+            </Button>
+          </div>
+
+          {/* ── KPI Cards ── */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 stagger">
+            {kpiCards.map((kpi) => (
+              <Card key={kpi.title} className="border-0 shadow-sm hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 backdrop-blur-sm bg-card/80">
+                <CardContent className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div className={`flex items-center justify-center h-12 w-12 rounded-xl \${kpi.color}`}>
+                      <kpi.icon className="h-6 w-6" />
+                    </div>
+                    <div className={`flex items-center gap-1 text-sm font-medium \${kpi.trend === "up" ? "text-emerald-600" : "text-red-600"}`}>
+                      {kpi.trend === "up" ? <TrendingUp className="h-3.5 w-3.5" /> : <TrendingDown className="h-3.5 w-3.5" />}
+                      {kpi.change}
+                    </div>
+                  </div>
+                  <div className="mt-4">
+                    <p className="text-2xl font-bold text-slate-900">{kpi.value}</p>
+                    <p className="text-sm text-slate-500 mt-1">{kpi.title}</p>
+                    <div className="mt-2 h-8 bg-gradient-to-r from-primary/5 to-primary/20 rounded" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* ── Revenue Chart ── */}
+          <Card className="border-0 shadow-sm animate-scale-in">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <div>
+                <CardTitle className="text-lg font-semibold text-slate-900">Revenue Overview</CardTitle>
+                <CardDescription>Monthly revenue performance for the current year</CardDescription>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button variant="outline" size="sm" className="text-xs active:scale-[0.98]">7D</Button>
+                <Button variant="outline" size="sm" className="text-xs bg-sky-50 text-sky-700 border-sky-200 active:scale-[0.98]">30D</Button>
+                <Button variant="outline" size="sm" className="text-xs active:scale-[0.98]">90D</Button>
+              </div>
+            </CardHeader>
+            <CardContent className="pt-4">
+              <ResponsiveContainer width="100%" height={300}>
+                <BarChart data={revenueData}>
+                  <defs>
+                    <linearGradient id="barGrad" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity={0.8} />
+                      <stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity={0.2} />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />
+                  <XAxis dataKey="month" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                  <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                  <Tooltip />
+                  <Bar dataKey="revenue" fill="url(#barGrad)" radius={[4,4,0,0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          {/* ── Orders + Activity ── */}
+          <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+            {/* Recent Orders */}
+            <Card className="xl:col-span-2 border-0 shadow-sm">
+              <CardHeader className="flex flex-row items-center justify-between">
+                <div>
+                  <CardTitle className="text-lg font-semibold text-slate-900">Recent Orders</CardTitle>
+                  <CardDescription>Latest customer orders and their status</CardDescription>
+                </div>
+                <Button variant="outline" size="sm" className="text-xs active:scale-[0.98]">
+                  View All <ArrowUpRight className="ml-1 h-3 w-3" />
+                </Button>
+              </CardHeader>
+              <CardContent>
+                <Table>
+                  <TableHeader>
+                    <TableRow className="border-slate-100">
+                      <TableHead className="text-slate-500 font-medium">Order</TableHead>
+                      <TableHead className="text-slate-500 font-medium">Customer</TableHead>
+                      <TableHead className="text-slate-500 font-medium">Amount</TableHead>
+                      <TableHead className="text-slate-500 font-medium">Status</TableHead>
+                      <TableHead className="text-slate-500 font-medium">Date</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {recentOrders.map((order) => (
+                      <TableRow key={order.id} className="border-slate-100 hover:bg-muted/50 transition-colors">
+                        <TableCell className="font-medium text-slate-900">{order.id}</TableCell>
+                        <TableCell className="text-slate-600">{order.customer}</TableCell>
+                        <TableCell className="font-medium text-slate-900">{order.amount}</TableCell>
+                        <TableCell>
+                          <Badge variant="secondary" className={`\${order.statusColor} border-0 font-medium`}>
+                            {order.status}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-slate-500">{order.date}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+
+            {/* Activity Feed */}
+            <Card className="border-0 shadow-sm">
+              <CardHeader>
+                <CardTitle className="text-lg font-semibold text-slate-900">Recent Activity</CardTitle>
+                <CardDescription>Latest actions across your workspace</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-5 stagger">
+                {activityFeed.map((item, i) => (
+                  <div key={i} className="flex items-start gap-3">
+                    <Avatar className="h-9 w-9 bg-sky-100 text-sky-700">
+                      <AvatarFallback className="text-xs font-semibold bg-sky-100 text-sky-700">{item.user}</AvatarFallback>
+                    </Avatar>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm text-slate-700">
+                        <span className="font-medium text-slate-900">{item.name}</span>{" "}
+                        {item.action}
+                      </p>
+                      <p className="text-xs text-slate-400 mt-0.5">{item.time}</p>
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}