updates

apps/dashboard/app/(authenticated)/sales/invoice/[id]/layout.tsx

@@ -4,6 +4,7 @@ import { InvoiceActions } from '@/modules/invoices/invoice-actions'
 import { InvoiceProvider } from '@/modules/invoices/invoice-context'
 import { ReceiptIcon } from 'lucide-react'
 import React from 'react'
+import InvoiceStatusBadge from '@/modules/invoices/invoice-status-badge'
 
 export default async function InvoiceDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
     const { id } = await props.params
@@ -13,19 +14,26 @@ export default async function InvoiceDetailLayout(props: { params: Promise<{ id:
     const title = data?.subject || data?.invoice_number || 'Invoice Details'
 
     return (
-        <InvoiceProvider invoice={{ id, label: title }}>
+        <InvoiceProvider invoice={data}>
             <DashboardDetailsPage
                 className='p-0 lg:p-0'
                 title={title}
                 description={data?.invoice_number ? `Invoice #: ${data.invoice_number}` : undefined}
                 icon={<ReceiptIcon className="size-5" />}
                 backHref="/sales/invoice"
-                actions={<InvoiceActions invoiceId={id} />}
+                actions={
+                    <div className="flex space-x-2 items-center">
+
+                        <InvoiceStatusBadge invoice={{id, status:data?.status}} />
+                        <InvoiceActions invoiceId={id} />
+                    </div>
+                }
                 tabs={[
                     {
                         href: `/sales/invoice/${id}`,
                         label: 'Details'
                     },
+
                     {
                         href: `/sales/invoice/${id}/documents`,
                         label: 'Documents'

apps/dashboard/app/(authenticated)/sales/invoice/[id]/page.tsx

@@ -3,7 +3,10 @@ import { InvoiceGeneralInfo } from '@/modules/invoices/invoice-general-info'
 import { InvoicePartsSection } from '@/modules/invoices/invoice-parts-section'
 import { InvoiceServicesSection } from '@/modules/invoices/invoice-services-section'
 import { InvoiceExpensesSection } from '@/modules/invoices/invoice-expenses-section'
+import { InvoiceTotalsSummary } from '@/modules/invoices/invoice-totals-summary'
 import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
+import InvoicePaymentsSection from '@/modules/invoices/invoice-payments-section'
+
 
 export default async function InvoiceDetailPage(props: { params: Promise<{ id: string }> }) {
     const { id } = await props.params
@@ -18,10 +21,12 @@ export default async function InvoiceDetailPage(props: { params: Promise<{ id: s
     return (
         <DashboardPage header={null}>
             <div className="grid gap-6">
-                <InvoiceGeneralInfo invoice={data} />
+                <InvoiceGeneralInfo />
                 <InvoicePartsSection parts={data.invoice_parts} />
                 <InvoiceServicesSection services={data.invoice_services} />
                 <InvoiceExpensesSection expenses={data.invoice_expenses} />
+                <InvoicePaymentsSection></InvoicePaymentsSection>
+                <InvoiceTotalsSummary />
             </div>
         </DashboardPage>
     )

apps/dashboard/app/(authenticated)/sales/invoice/page.tsx

@@ -30,7 +30,7 @@ export default function InvoicesPage() {
             onRowClick={(row) => router.push(`/sales/invoice/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
-                    <FormDialog title="Invoice">
+                    <FormDialog classNames={{dialogContent:'lg:min-w-6xl'}} title="Invoice">
                         {(resourceId) => (
                             <InvoiceForm
                                 resourceId={resourceId}