src/views/apps/expense/list/ExpenseListTable.tsx

@@ -188,7 +188,6 @@ const ExpenseListTable = () => {
     return filteredData.reduce((sum, expense) => sum + expense.total, 0)
   }, [filteredData])
 
-  // For demonstration, adding tax/additional fees to show difference between subtotal and total
   const taxAmount = subtotalTotal * 0.1 // 10% tax example
   const finalTotal = subtotalTotal + taxAmount
 

src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx

@@ -42,6 +42,8 @@ import Loading from '@/components/layout/shared/Loading'
 import { getLocalizedUrl } from '@/utils/i18n'
 import { SalesBillType } from '@/types/apps/salesTypes'
 import { salesBillData } from '@/data/dummy/sales'
+import DateRangePicker from '@/components/RangeDatePicker'
+import StatusFilterTabs from '@/components/StatusFilterTab'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -144,6 +146,8 @@ const SalesBillListTable = () => {
   const [search, setSearch] = useState('')
   const [statusFilter, setStatusFilter] = useState<string>('Semua')
   const [filteredData, setFilteredData] = useState<SalesBillType[]>(salesBillData)
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
 
   // Hooks
   const { lang: locale } = useParams()
@@ -178,6 +182,17 @@ const SalesBillListTable = () => {
     return filteredData.slice(startIndex, startIndex + pageSize)
   }, [filteredData, currentPage, pageSize])
 
+  const subtotalremainingBill = useMemo(() => {
+    return filteredData.reduce((sum, expense) => sum + expense.remainingBill, 0)
+  }, [filteredData])
+
+  const subtotalTotal = useMemo(() => {
+    return filteredData.reduce((sum, expense) => sum + expense.total, 0)
+  }, [filteredData])
+
+  const taxAmount = subtotalTotal * 0.1 // 10% tax example
+  const finalTotal = subtotalTotal + taxAmount
+
   const handlePageChange = useCallback((event: unknown, newPage: number) => {
     setCurrentPage(newPage)
   }, [])
@@ -323,30 +338,29 @@ const SalesBillListTable = () => {
   return (
     <>
       <Card>
-        {/* Filter Status Tabs */}
+        {/* Filter Status Tabs and Range Date */}
         <div className='p-6 border-bs'>
-          <div className='flex flex-wrap gap-2'>
-            {['Semua', 'Belum Dibayar', 'Dibayar Sebagian', 'Lunas', 'Void', 'Retur'].map(status => (
-              <Button
-                key={status}
-                variant={statusFilter === status ? 'contained' : 'outlined'}
-                color={statusFilter === status ? 'primary' : 'inherit'}
-                onClick={() => handleStatusFilter(status)}
-                size='small'
-                className='rounded-lg'
-                sx={{
-                  textTransform: 'none',
-                  fontWeight: statusFilter === status ? 600 : 400,
-                  borderRadius: '8px',
-                  ...(statusFilter !== status && {
-                    borderColor: '#e0e0e0',
-                    color: '#666'
-                  })
-                }}
-              >
-                {status}
-              </Button>
-            ))}
+          <div className='flex items-center justify-between'>
+            <StatusFilterTabs
+              statusOptions={[
+                'Semua',
+                'Belum Dibayar',
+                'Dibayar Sebagian',
+                'Lunas',
+                'Void',
+                'Jatuh Tempo',
+                'Retur',
+                'Transaksi Berulang'
+              ]}
+              selectedStatus={statusFilter}
+              onStatusChange={handleStatusFilter}
+            />
+            <DateRangePicker
+              startDate={startDate}
+              endDate={endDate}
+              onStartDateChange={setStartDate}
+              onEndDateChange={setEndDate}
+            />
           </div>
         </div>
 
@@ -435,6 +449,56 @@ const SalesBillListTable = () => {
                     </tr>
                   )
                 })}
+
+                {/* Subtotal Row */}
+                <tr className='border-t-2 bg-gray-50'>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold'>
+                      Subtotal
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibol'>
+                      {formatCurrency(subtotalremainingBill)}
+                    </Typography>
+                  </td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold'>
+                      {formatCurrency(subtotalTotal)}
+                    </Typography>
+                  </td>
+                </tr>
+
+                {/* Total Row */}
+                <tr className='border-t bg-gray-100'>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      Total
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      {formatCurrency(subtotalremainingBill + taxAmount)}
+                    </Typography>
+                  </td>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      {formatCurrency(finalTotal)}
+                    </Typography>
+                  </td>
+                </tr>
               </tbody>
             )}
           </table>