Seed: dashboard template (24 files)
This commit is contained in:
@@ -0,0 +1,155 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||||
|
import {
|
||||||
|
FileText, Download, Plus, BarChart3, Users, ShoppingCart,
|
||||||
|
Calendar, FileDown, Eye, TrendingUp, DollarSign, ArrowUpRight
|
||||||
|
} from "lucide-react";
|
||||||
|
import Sidebar from "@/components/Sidebar";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
|
||||||
|
const recentReports = [
|
||||||
|
{ name: "Monthly Sales Report", type: "Sales", typeColor: "bg-emerald-100 text-emerald-700", date: "Apr 10, 2026", size: "2.4 MB", icon: DollarSign },
|
||||||
|
{ name: "User Acquisition Q1", type: "Users", typeColor: "bg-sky-100 text-sky-700", date: "Apr 8, 2026", size: "1.8 MB", icon: Users },
|
||||||
|
{ name: "Traffic Analysis March", type: "Traffic", typeColor: "bg-orange-100 text-orange-700", date: "Apr 5, 2026", size: "3.1 MB", icon: BarChart3 },
|
||||||
|
{ name: "Weekly Sales Summary", type: "Sales", typeColor: "bg-emerald-100 text-emerald-700", date: "Apr 3, 2026", size: "890 KB", icon: DollarSign },
|
||||||
|
{ name: "User Retention Report", type: "Users", typeColor: "bg-sky-100 text-sky-700", date: "Mar 28, 2026", size: "1.5 MB", icon: Users },
|
||||||
|
{ name: "Quarterly Traffic Overview", type: "Traffic", typeColor: "bg-orange-100 text-orange-700", date: "Mar 25, 2026", size: "4.2 MB", icon: BarChart3 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const previewStats = [
|
||||||
|
{ label: "Total Revenue", value: "$124,582", change: "+14.2%", icon: DollarSign },
|
||||||
|
{ label: "New Users", value: "3,847", change: "+8.7%", icon: Users },
|
||||||
|
{ label: "Orders Placed", value: "2,156", change: "+23.5%", icon: ShoppingCart },
|
||||||
|
{ label: "Conversion Rate", value: "4.8%", change: "+1.2%", icon: TrendingUp },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ReportsPage() {
|
||||||
|
const [reportType, setReportType] = useState("sales");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen bg-slate-50">
|
||||||
|
<Sidebar activePath="/reports" />
|
||||||
|
<div className="flex-1 lg:ml-64">
|
||||||
|
<Header />
|
||||||
|
<main className="p-6 space-y-8">
|
||||||
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 animate-fade-up">Reports</h1>
|
||||||
|
<p className="text-sm text-slate-500 mt-1">Generate and manage your analytics reports</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Select value={reportType} onValueChange={setReportType}>
|
||||||
|
<SelectTrigger className="w-[160px] bg-white">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="sales">Sales Report</SelectItem>
|
||||||
|
<SelectItem value="users">Users Report</SelectItem>
|
||||||
|
<SelectItem value="traffic">Traffic Report</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Button className="bg-sky-600 hover:bg-sky-700 text-white active:scale-[0.98] transition-all">
|
||||||
|
<Plus className="mr-2 h-4 w-4" /> Generate Report
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Report Preview ── */}
|
||||||
|
<Card className="border-0 shadow-sm">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-lg font-semibold text-slate-900">Report Preview</CardTitle>
|
||||||
|
<CardDescription>Summary of the latest generated report</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-emerald-100 text-emerald-700 border-0">
|
||||||
|
<Calendar className="mr-1.5 h-3 w-3" /> Apr 2026
|
||||||
|
</Badge>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 stagger">
|
||||||
|
{previewStats.map((stat) => (
|
||||||
|
<div key={stat.label} className="p-4 rounded-xl bg-slate-50 border border-slate-100 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="h-10 w-10 rounded-lg bg-sky-100 flex items-center justify-center">
|
||||||
|
<stat.icon className="h-5 w-5 text-sky-600" />
|
||||||
|
</div>
|
||||||
|
<span className="flex items-center text-xs font-medium text-emerald-600">
|
||||||
|
<ArrowUpRight className="h-3 w-3 mr-0.5" />{stat.change}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xl font-bold text-slate-900">{stat.value}</p>
|
||||||
|
<p className="text-xs text-slate-500 mt-1">{stat.label}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chart Placeholder */}
|
||||||
|
<div className="mt-6 h-48 rounded-xl bg-gradient-to-br from-sky-50/80 via-slate-50 to-violet-50/60 border border-slate-200/60 flex items-center justify-center animate-scale-in">
|
||||||
|
<div className="text-center">
|
||||||
|
<BarChart3 className="h-10 w-10 text-slate-300 mx-auto mb-2" />
|
||||||
|
<p className="text-sm text-slate-400">Report visualization will appear here</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* ── Recent Reports Table ── */}
|
||||||
|
<Card className="border-0 shadow-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg font-semibold text-slate-900">Recent Reports</CardTitle>
|
||||||
|
<CardDescription>Previously generated reports and downloads</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="border-slate-100">
|
||||||
|
<TableHead className="text-slate-500 font-medium">Report Name</TableHead>
|
||||||
|
<TableHead className="text-slate-500 font-medium">Type</TableHead>
|
||||||
|
<TableHead className="text-slate-500 font-medium">Generated</TableHead>
|
||||||
|
<TableHead className="text-slate-500 font-medium">Size</TableHead>
|
||||||
|
<TableHead className="text-slate-500 font-medium text-right">Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{recentReports.map((report) => (
|
||||||
|
<TableRow key={report.name} className="border-slate-100 hover:bg-muted/50 transition-colors">
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="h-9 w-9 rounded-lg bg-slate-100 flex items-center justify-center">
|
||||||
|
<FileText className="h-4 w-4 text-slate-500" />
|
||||||
|
</div>
|
||||||
|
<span className="font-medium text-slate-900">{report.name}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="secondary" className={`\${report.typeColor} border-0 font-medium`}>
|
||||||
|
{report.type}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-500">{report.date}</TableCell>
|
||||||
|
<TableCell className="text-slate-500">{report.size}</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<div className="flex items-center justify-end gap-1">
|
||||||
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-slate-400 hover:text-sky-600">
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-slate-400 hover:text-sky-600">
|
||||||
|
<Download className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user