bender/3833fba9-2cac-4c20-b071-e56e3188501b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/app/admin/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-10 15:40:40 +00:00
parent 294e837c81
commit cf7b085154
1 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app/admin/page.tsx Normal file
View File

@@ -0,0 +1,100 @@
"use client";
import { BarChart, CreditCard, DollarSign, Package } from 'lucide-react';
import Link from 'next/link';
const revenueData = [
{ date: 'Jan 1', revenue: 1000 }, { date: 'Jan 5', revenue: 1200 }, { date: 'Jan 10', revenue: 1500 },
{ date: 'Jan 15', revenue: 1300 }, { date: 'Jan 20', revenue: 1700 }, { date: 'Jan 25', revenue: 1600 },
{ date: 'Jan 30', revenue: 2000 },
];
const recentOrders = [
{ id: '1001', customer: 'John Doe', amount: '$150.00', status: 'Completed', date: '2024-03-01' },
{ id: '1002', customer: 'Jane Smith', amount: '$230.50', status: 'Pending', date: '2024-03-01' },
{ id: '1003', customer: 'Alice Brown', amount: '$75.25', status: 'Completed', date: '2024-02-29' },
{ id: '1004', customer: 'Bob White', amount: '$400.00', status: 'Processing', date: '2024-02-28' },
{ id: '1005', customer: 'Charlie Green', amount: '$110.00', status: 'Completed', date: '2024-02-28' },
];
export default function AdminOverviewPage() {
return (
<div className="space-y-8">
<h2 className="text-4xl font-bold text-white mb-8">Overview</h2>
{/* Revenue Stats Display */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
<div>
<p className="text-neutral-400 text-sm">Total Revenue</p>
<p className="text-3xl font-semibold text-white">$12,450</p>
</div>
<DollarSign className="h-8 w-8 text-primary-cta" />
</div>
<div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
<div>
<p className="text-neutral-400 text-sm">Total Orders</p>
<p className="text-3xl font-semibold text-white">850</p>
</div>
<Package className="h-8 w-8 text-primary-cta" />
</div>
<div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
<div>
<p className="text-neutral-400 text-sm">Pending Orders</p>
<p className="text-3xl font-semibold text-white">32</p>
</div>
<CreditCard className="h-8 w-8 text-primary-cta" />
</div>
<div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
<div>
<p className="text-neutral-400 text-sm">New Users</p>
<p className="text-3xl font-semibold text-white">120</p>
</div>
<BarChart className="h-8 w-8 text-primary-cta" />
</div>
</div>
{/* Orders Chart (Last 30 Days) */}
<div className="bg-neutral-900 p-6 rounded-lg shadow-md">
<h3 className="text-2xl font-semibold text-white mb-4">Orders Chart (Last 30 Days)</h3>
<div className="h-64 flex items-center justify-center bg-neutral-800 rounded-md text-neutral-500">
<p>Placeholder for a chart library (e.g., Recharts, Chart.js)</p>
</div>
</div>
{/* Recent Orders Table */}
<div className="bg-neutral-900 p-6 rounded-lg shadow-md">
<h3 className="text-2xl font-semibold text-white mb-4">Recent Orders</h3>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-neutral-800">
<thead>
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Order ID</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Customer</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Amount</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Status</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody className="divide-y divide-neutral-800">
{recentOrders.map((order) => (
<tr key={order.id}>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">{order.id}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.customer}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.amount}</td>
<td className={`px-6 py-4 whitespace-nowrap text-sm ${order.status === 'Completed' ? 'text-green-500' : order.status === 'Pending' ? 'text-yellow-500' : 'text-blue-500'}`}>{order.status}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.date}</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="mt-4 text-right">
<Link href="/admin/orders" className="text-primary-cta hover:underline">
View All Orders
</Link>
</div>
</div>
</div>
);
}