34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { BarChart3 } from 'lucide-react';
|
|
|
|
export default function ReportsPage() {
|
|
return (
|
|
<div>
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-slate-800">Reports</h1>
|
|
<p className="text-slate-500 text-sm mt-1">Financial and operational reports</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{['Collections Report', 'Subscriber Growth', 'Invoice Aging', 'Technician Performance'].map(
|
|
(report) => (
|
|
<Card key={report} className="border shadow-sm hover:shadow-md transition-shadow cursor-pointer">
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center gap-2 text-slate-700">
|
|
<BarChart3 size={18} style={{ color: '#0891B2' }} />
|
|
{report}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-slate-400 text-sm">Coming soon — report generation will be available here.</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|