dyolink/frontend/src/app/(dashboard)/billing/page.tsx

// src/app/(dashboard)/billing/page.tsx
'use client';
import { useState } from 'react';
import { Search, Filter, Plus } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Badge } from '@/components/ui/Badge';
// Mock data matching your design
const invoices = [
    { id: '#123456', patient: 'Ali Rahmani', date: '24/9/2026', service: 'Hygiene', amount: 300, paid: 0, status: 'unpaid' },
    { id: '#123457', patient: 'Neda Akbari', date: '01/10/2026', service: 'Filling', amount: 700, paid: 400, status: 'overdue' },
    { id: '#123458', patient: 'Nima Haghi', date: '09/12/2026', service: 'Extraction', amount: 450, paid: 450, status: 'paid' },
];
const statusColors = {
    paid: 'success',
    unpaid: 'warning',
    overdue: 'danger',
} as const;
type StatCardColor = 'blue' | 'yellow' | 'green' | 'red';

interface StatCardProps {
    title: string;
    count: number;
    amount: number;
    color: StatCardColor;
}
export default function BillingPage() {
    const [search, setSearch] = useState('');
    const [statusFilter, setStatusFilter] = useState('all');
    const stats = {
        total: { count: 235, amount: 80900 },
        unpaid: { count: 30, amount: 2800 },
        paid: { count: 190, amount: 80900 },
        overdue: { count: 235, amount: 80900 },
    };
    return (
        <div className="space-y-6">
            {/* Header */}
            <div className="flex justify-between items-center">
                <h1 className="text-2xl font-bold text-gray-900">Billing</h1>
                <Button variant="primary" className="flex items-center gap-2">
                    <Plus className="h-4 w-4" />
                    New Invoice
                </Button>
            </div>
            {/* Stats Cards - Matching your design */}
            <div className="grid grid-cols-4 gap-4">
                <StatCard
                    title="Total Invoices"
                    count={stats.total.count}
                    amount={stats.total.amount}
                    color="blue"
                />
                <StatCard
                    title="Unpaid Invoices"
                    count={stats.unpaid.count}
                    amount={stats.unpaid.amount}
                    color="yellow"
                />
                <StatCard
                    title="Paid Invoices"
                    count={stats.paid.count}
                    amount={stats.paid.amount}
                    color="green"
                />
                <StatCard
                    title="Overdue Invoices"
                    count={stats.overdue.count}
                    amount={stats.overdue.amount}
                    color="red"
                />
            </div>
            {/* Filters */}
            <div className="bg-white p-4 rounded-xl shadow-sm border">
                <div className="flex gap-4 items-center">
                    <div className="flex-1">
                        <Input
                            placeholder="Search patients..."
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                            icon={<Search className="h-4 w-4 text-gray-400" />}
                        />
                    </div>
                    <div className="flex gap-2">
                        {['all', 'paid', 'unpaid', 'overdue'].map((status) => (
                            <button
                                key={status}
                                onClick={() => setStatusFilter(status)}
                                className={`px-4 py-2 rounded-lg text-sm font-medium capitalize ${statusFilter === status
                                    ? 'bg-primary-50 text-primary-700 border border-primary-200'
                                    : 'text-gray-600 hover:bg-gray-50'
                                    }`}
                            >
                                {status}
                            </button>
                        ))}
                    </div>
                </div>
            </div>
            {/* Invoices Table - Matching your design */}
            <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
                <table className="w-full">
                    <thead className="bg-gray-50 border-b">
                        <tr>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Invoice ID
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Patient name
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Date
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Service
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Total amount
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Paid
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Status
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200">
                        {invoices.map((invoice) => (
                            <tr key={invoice.id} className="hover:bg-gray-50">
                                <td className="px-6 py-4 text-sm font-medium text-gray-900">
                                    {invoice.id}
                                </td>
                                <td className="px-6 py-4 text-sm text-gray-900">
                                    {invoice.patient}
                                </td>
                                <td className="px-6 py-4 text-sm text-gray-500">
                                    {invoice.date}
                                </td>
                                <td className="px-6 py-4 text-sm text-gray-900">
                                    {invoice.service}
                                </td>
                                <td className="px-6 py-4 text-sm text-gray-900">
                                    ${invoice.amount}
                                </td>
                                <td className="px-6 py-4 text-sm text-gray-900">
                                    ${invoice.paid}
                                </td>
                                <td className="px-6 py-4">
                                    <Badge
                                        variant={statusColors[invoice.status as keyof typeof statusColors]}
                                        className="capitalize"
                                    >
                                        {invoice.status}
                                    </Badge>
                                </td>
                                <td className="px-6 py-4">
                                    <button className="text-primary-600 hover:text-primary-800 text-sm">
                                        Edit
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                {/* Pagination - Matching your design */}
                <div className="px-6 py-4 border-t flex justify-between items-center bg-gray-50">
                    <button className="text-sm text-gray-600 hover:text-gray-900">
                        ← Previous
                    </button>
                    <div className="text-sm text-gray-600">
                        Page 1 of 10
                    </div>
                    <button className="text-sm text-gray-600 hover:text-gray-900">
                        Next →
                    </button>
                </div>
            </div>
        </div>
    );
}
function StatCard({ title, count, amount, color }: StatCardProps) {
    const colors: Record<StatCardColor, string> = {
        blue: 'bg-blue-50 text-blue-700 border-blue-200',
        yellow: 'bg-yellow-50 text-yellow-700 border-yellow-200',
        green: 'bg-green-50 text-green-700 border-green-200',
        red: 'bg-red-50 text-red-700 border-red-200',
    };

    return (
        <div className={`p-4 rounded-xl border ${colors[color]}`}>
            <p className="text-sm font-medium opacity-80">{title}</p>
            <p className="text-2xl font-bold mt-1">{count}</p>
            <p className="text-sm font-medium mt-1">
                ${amount.toLocaleString()}
            </p>
        </div>
    );
}