Add sub invoice detail page with delete/mark paid/receipt; fix payable stat

src/App.jsx

@@ -21,6 +21,7 @@ const CreateInvoice = lazy(() => import('./pages/team/CreateInvoice'));
 const CreateSubcontractorPO = lazy(() => import('./pages/team/CreateSubcontractorPO'));
 const InvoiceDetail = lazy(() => import('./pages/team/InvoiceDetail'));
 const SubcontractorPODetail = lazy(() => import('./pages/team/SubcontractorPODetail'));
+const SubInvoiceDetail = lazy(() => import('./pages/team/SubInvoiceDetail'));
 const SurveyMaker = lazy(() => import('./pages/team/SurveyMaker'));
 const BrandBook = lazy(() => import('./pages/team/BrandBook'));
 const Converters = lazy(() => import('./pages/team/Converters'));
@@ -64,6 +65,7 @@ export default function App() {
           <Route path="/subcontractor-pos/new" element={<ProtectedRoute role="team"><CreateSubcontractorPO /></ProtectedRoute>} />
           <Route path="/invoices/:id" element={<ProtectedRoute role="team"><InvoiceDetail /></ProtectedRoute>} />
           <Route path="/subcontractor-pos/:id" element={<ProtectedRoute role="team"><SubcontractorPODetail /></ProtectedRoute>} />
+          <Route path="/sub-invoices/:id" element={<ProtectedRoute role="team"><SubInvoiceDetail /></ProtectedRoute>} />
           <Route path="/survey-maker" element={<ProtectedRoute role={['team', 'external']}><SurveyMaker /></ProtectedRoute>} />
           <Route path="/brand-book" element={<ProtectedRoute role={['team', 'external']}><BrandBook /></ProtectedRoute>} />
           <Route path="/converters" element={<ProtectedRoute role={['team', 'external']}><Converters /></ProtectedRoute>} />