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

feature: Organizations link and invitation flow implemented minimally.

Browse Source
This commit is contained in:
Admin
2026-05-06 19:25:01 +03:30
parent bb44270795
commit 2dca609ba1
7 changed files with 258 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/app/(dashboard)/billing/page.tsx
View File

@@ -1,10 +1,11 @@
// src/app/(dashboard)/billing/page.tsx
'use client';
import { useState } from 'react';
import { Search } from 'lucide-react';
import { Pencil } from 'lucide-react';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
import { Badge } from '@/components/ui/common/Badge';
import { Table } from '@/components/ui/common/Table';
import { SearchBar } from '@/components/ui/common/SearchBar';
import { useAuth } from '@/lib/hooks/useAuth';
import { hasPermission } from '@/shared/permissions';
// Mock data matching your design
@@ -78,17 +79,12 @@ export default function BillingPage() {
/>
</div>
{/* Filters */}
<div className="surface-card p-4">
<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 icon-flat" />}
/>
</div>
<div className="flex gap-2">
<SearchBar
value={search}
onChange={setSearch}
placeholder="Search patients..."
actions={(
<>
{['all', 'paid', 'unpaid', 'overdue'].map((status) => (
<button
key={status}
@@ -101,14 +97,13 @@ export default function BillingPage() {
{status}
</button>
))}
</div>
</div>
</div>
</>
)}
/>
{/* Invoices Table - Matching your design */}
<div className="surface-card overflow-hidden">
<table className="w-full">
<thead className="bg-background-secondary/70 border-b border-border">
<tr>
<Table
headers={
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Invoice ID
</th>
@@ -134,29 +129,30 @@ export default function BillingPage() {
Action
</th>
</tr>
</thead>
<tbody className="divide-y divide-border/60">
}
body={
<>
{invoices.map((invoice) => (
<tr key={invoice.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-4 text-sm font-medium text-text-primary">
<tr key={invoice.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-1.5 text-sm font-medium text-text-primary">
{invoice.id}
</td>
<td className="px-6 py-4 text-sm text-text-primary">
<td className="px-6 py-1.5 text-sm text-text-primary">
{invoice.patient}
</td>
<td className="px-6 py-4 text-sm text-text-secondary">
<td className="px-6 py-1.5 text-sm text-text-secondary">
{invoice.date}
</td>
<td className="px-6 py-4 text-sm text-text-primary">
<td className="px-6 py-1.5 text-sm text-text-primary">
{invoice.service}
</td>
<td className="px-6 py-4 text-sm text-text-primary">
<td className="px-6 py-1.5 text-sm text-text-primary">
${invoice.amount}
</td>
<td className="px-6 py-4 text-sm text-text-primary">
<td className="px-6 py-1.5 text-sm text-text-primary">
${invoice.paid}
</td>
<td className="px-6 py-4 text-center align-middle">
<td className="px-6 py-1.5 text-center align-middle">
<Badge
variant={statusColors[invoice.status as keyof typeof statusColors]}
className="capitalize"
@@ -164,21 +160,24 @@ export default function BillingPage() {
{invoice.status}
</Badge>
</td>
<td className="px-6 py-4">
<td className="px-6 py-1.5">
<button
className={`text-sm ${canEditBilling ? 'text-primary hover:opacity-90' : 'text-text-muted cursor-not-allowed'}`}
className={`p-2 rounded-md ${canEditBilling
? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
: 'text-text-muted cursor-not-allowed opacity-50'}`}
disabled={!canEditBilling}
title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
aria-label="Edit invoice"
>
Edit
<Pencil className="w-4 h-4" />
</button>
</td>
</tr>
</tr>
))}
</tbody>
</table>
{/* Pagination - Matching your design */}
<div className="px-6 py-4 border-t border-border/60 flex justify-between items-center bg-background-secondary/70">
</>
}
footer={(
<>
<button className="text-sm text-text-secondary hover:text-text-primary">
← Previous
</button>
@@ -188,8 +187,9 @@ export default function BillingPage() {
<button className="text-sm text-text-secondary hover:text-text-primary">
Next →
</button>
</div>
</div>
</>
)}
/>
</div>
);
}