feat(invoices): add MyInvoices page and integrate it into patient navigation

Barata-Ribeiro · Barata-Ribeiro · commit 8e6c245ccbf7 · 2025-11-03T09:54:13.000-03:00
diff --git a/resources/js/components/navigation/nav-patient.tsx b/resources/js/components/navigation/nav-patient.tsx
@@ -6,11 +6,12 @@ import {
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
 import appointments from '@/routes/appointments';
+import { myInvoices } from '@/routes/invoices';
 import { myRecord } from '@/routes/medicalRecords';
 import { myPrescriptions } from '@/routes/prescriptions';
 import { NavItem, SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
-import { ClipboardClockIcon, ClipboardListIcon, PillIcon } from 'lucide-react';
+import { ClipboardClockIcon, ClipboardListIcon, PillIcon, ScrollTextIcon } from 'lucide-react';
 
 const patientItems: NavItem[] = [
     {
@@ -28,6 +29,11 @@ const patientItems: NavItem[] = [
         href: myPrescriptions().url,
         icon: PillIcon,
     },
+    {
+        title: 'My Invoices',
+        href: myInvoices().url,
+        icon: ScrollTextIcon,
+    },
 ];
 
 export function NavPatient() {
diff --git a/resources/js/pages/patient/invoices/MyInvoices.tsx b/resources/js/pages/patient/invoices/MyInvoices.tsx
@@ -0,0 +1,35 @@
+import { DataTable } from '@/components/data-table';
+import Heading from '@/components/heading';
+import Layout from '@/layouts/app-layout';
+import { column } from '@/pages/patient/invoices/column';
+import { myInvoices } from '@/routes/invoices';
+import { BreadcrumbItem } from '@/types';
+import { PaginationInvoice } from '@/types/application/invoice';
+import { Head } from '@inertiajs/react';
+
+interface MyInvoicesProps {
+    invoices: PaginationInvoice;
+}
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'My Invoices',
+        href: myInvoices().url,
+    },
+];
+
+export default function MyInvoices({ invoices }: Readonly<MyInvoicesProps>) {
+    return (
+        <Layout breadcrumbs={breadcrumbs}>
+            <Head title="My Invoices" />
+
+            <div className="px-4 py-6">
+                <Heading title="My Invoices" description="Manage your invoices here." />
+
+                <section aria-label="Invoices Table">
+                    <DataTable columns={column} data={invoices.data} pagination={invoices} />
+                </section>
+            </div>
+        </Layout>
+    );
+}
