Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/invoices.index.tsx

@@ -604,7 +604,7 @@ function InvoicesIndex() {
                       No matching expenses.
                     </td></tr>
                   )}
-                  {visibleExp.map((e) => {
+                  {pagedExp.map((e) => {
                     const marked = isPlaceholder(e.invoice_id);
                     return (
                       <tr key={e.id} className="border-t hover:bg-muted/30">
@@ -646,6 +646,18 @@ function InvoicesIndex() {
               </table>
             </CardContent>
           </Card>
+          {visibleExp.length > TAB_PAGE_SIZE && (
+            <div className="flex items-center justify-between mt-3 text-sm">
+              <span className="text-muted-foreground">
+                Showing {expPage * TAB_PAGE_SIZE + 1}–{Math.min((expPage + 1) * TAB_PAGE_SIZE, visibleExp.length)} of {visibleExp.length}
+              </span>
+              <div className="flex items-center gap-2">
+                <Button variant="outline" size="sm" disabled={expPage === 0} onClick={() => setExpPage((p) => Math.max(0, p - 1))}>Previous</Button>
+                <span className="text-muted-foreground">Page {expPage + 1} of {expTotalPages}</span>
+                <Button variant="outline" size="sm" disabled={expPage + 1 >= expTotalPages} onClick={() => setExpPage((p) => p + 1)}>Next</Button>
+              </div>
+            </div>
+          )}
         </TabsContent>
       </Tabs>
     </PageContainer>