admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Initial commit: Full project structure

Browse Source 
- Backend: NestJS with Docker
- Frontend: Next.js with Docker
- Nginx configuration for reverse proxy
- PostgreSQL setup
- Docker compose for orchestration
- Development environment configuration
This commit is contained in:
Admin
2026-04-23 15:33:11 +03:30
commit 26bd35ae3c
94 changed files with 5627 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
frontend/src/app/(dashboard)/billing/page.tsx Normal file
View File

@@ -0,0 +1,202 @@
// 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>
);
}