Merge pull request 'efril' (#6) from efril into main

Reviewed-on: #6

src/app/[lang]/(dashboard)/(private)/apps/account/page.tsx

@@ -0,0 +1,7 @@
+import AccountList from '@/views/apps/account'
+
+const AccountPage = () => {
+  return <AccountList />
+}
+
+export default AccountPage

src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/page.tsx

@@ -0,0 +1,7 @@
+import CashBankDetail from '@/views/apps/cash-bank/detail'
+
+const CashBankDetailPage = () => {
+  return <CashBankDetail />
+}
+
+export default CashBankDetailPage

src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/transaction/[transaction_id]/page.tsx

@@ -0,0 +1,18 @@
+import CashBankDetailTransactionContent from '@/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent'
+import CashBankDetailTransactionHeader from '@/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader'
+import Grid from '@mui/material/Grid2'
+
+const TransactionPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailTransactionHeader title='Giro 1-10003' transaction='Terima Pembayaran Tagihan' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailTransactionContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default TransactionPage

src/app/[lang]/(dashboard)/(private)/apps/cash-bank/page.tsx

@@ -0,0 +1,7 @@
+import CashBankList from '@/views/apps/cash-bank/CashBankList'
+
+const CashBankPage = () => {
+  return <CashBankList />
+}
+
+export default CashBankPage

src/app/[lang]/(dashboard)/(private)/apps/expense/[id]/detail/page.tsx

@@ -0,0 +1,18 @@
+import ExpenseDetailContent from '@/views/apps/expense/detail/ExpenseDetailContent'
+import ExpenseDetailHeader from '@/views/apps/expense/detail/ExpenseDetailHeader'
+import Grid from '@mui/material/Grid2'
+
+const ExpenseDetailPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseDetailPage

src/app/[lang]/(dashboard)/(private)/apps/expense/add/page.tsx

@@ -0,0 +1,18 @@
+import ExpenseAddForm from '@/views/apps/expense/add/ExpenseAddForm'
+import ExpenseAddHeader from '@/views/apps/expense/add/ExpenseAddHeader'
+import Grid from '@mui/material/Grid2'
+
+const ExpenseAddPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseAddPage

src/app/[lang]/(dashboard)/(private)/apps/expense/page.tsx

@@ -0,0 +1,7 @@
+import ExpenseList from '@/views/apps/expense/list'
+
+const ExpensePage = () => {
+  return <ExpenseList />
+}
+
+export default ExpensePage

src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/add/page.tsx

@@ -0,0 +1,18 @@
+import FixedAssetAddForm from '@/views/apps/fixed-assets/add/FixedAssetAddForm'
+import FixedAssetAddHeader from '@/views/apps/fixed-assets/add/FixedAssetAddHeader'
+import Grid from '@mui/material/Grid2'
+
+const FixedAssetPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <FixedAssetAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <FixedAssetAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default FixedAssetPage

src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/page.tsx

@@ -0,0 +1,7 @@
+import FixedAssetList from '@/views/apps/fixed-assets'
+
+const FixedAssetPage = () => {
+  return <FixedAssetList />
+}
+
+export default FixedAssetPage

src/app/[lang]/(dashboard)/(private)/apps/inventory/products/ingredients/[id]/detail/page.tsx

@@ -0,0 +1,7 @@
+import IngredientDetail from '@/views/apps/ecommerce/products/ingredient/detail'
+
+const IngredientDetailPage = () => {
+  return <IngredientDetail />
+}
+
+export default IngredientDetailPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/overview/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import Grid from '@mui/material/Grid2'
+
+import { TextField, Typography, useTheme } from '@mui/material'
+import { useState } from 'react'
+import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
+import PurchaseOverviewLeft from '@/views/apps/purchase/overview/overview-left'
+import PurchaseOverviewRight from '@/views/apps/purchase/overview/overview-right'
+
+const PurchaseOverviewPage = () => {
+  const theme = useTheme()
+
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+
+  const [filter, setFilter] = useState({
+    date_from: formatDateDDMMYYYY(monthAgo),
+    date_to: formatDateDDMMYYYY(today)
+  })
+
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12 }}>
+          <div className='flex gap-4 items-center justify-between'>
+            <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
+              Overview Pembelian
+            </Typography>
+            <div className='flex items-center gap-4'>
+              <TextField
+                type='date'
+                value={formatForInputDate(today || new Date())}
+                onChange={e => {
+                  setFilter({
+                    ...filter,
+                    date_from: formatDateDDMMYYYY(new Date(e.target.value))
+                  })
+                }}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+              <Typography>-</Typography>
+              <TextField
+                type='date'
+                value={today}
+                onChange={e => {}}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+            </div>
+          </div>
+        </Grid>
+      </Grid>
+      <Grid container spacing={6} className='mt-5'>
+        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+          <PurchaseOverviewRight />
+        </Grid>
+        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+          <PurchaseOverviewLeft />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default PurchaseOverviewPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/[id]/detail/page.tsx

@@ -0,0 +1,18 @@
+import PurchaseDetailContent from '@/views/apps/purchase/purchase-detail/PurchaseDetailContent'
+import PurchaseDetailHeader from '@/views/apps/purchase/purchase-detail/PurchaseDetailHeader'
+import Grid from '@mui/material/Grid2'
+
+const PurchaseBillDetailPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDetailHeader title='Detail Pesanan Pembelian' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDetailContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseBillDetailPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/add/page.tsx

@@ -0,0 +1,19 @@
+import Grid from '@mui/material/Grid2'
+
+import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
+import PurchaseBillAddHeader from '@/views/apps/purchase/purchase-bills/add/PurchaseBillAddHeader'
+
+const PurchaseBillAddPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseBillAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseBillAddPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/page.tsx

@@ -0,0 +1,7 @@
+import PurchaseBillList from '@/views/apps/purchase/purchase-bills/list'
+
+const PurchaseBillsPage = () => {
+  return <PurchaseBillList />
+}
+
+export default PurchaseBillsPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-deliveries/page.tsx

@@ -0,0 +1,7 @@
+import PurchaseDeliveryListTable from '@/views/apps/purchase/purchase-deliveries/list/PurchaseDeliveryListTable'
+
+const PurchaseDeliveryPage = () => {
+  return <PurchaseDeliveryListTable />
+}
+
+export default PurchaseDeliveryPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx

@@ -0,0 +1,19 @@
+import Grid from '@mui/material/Grid2'
+
+import PurchaseOrderAddHeader from '@/views/apps/purchase/purchase-orders/add/PurchaseOrderAddHeader'
+import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
+
+const PurchaseOrderAddPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseOrderAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseOrderAddPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/page.tsx

@@ -0,0 +1,7 @@
+import PurchaseOrderList from '@/views/apps/purchase/purchase-orders/list'
+
+const PurchaseOrdersPage = () => {
+  return <PurchaseOrderList />
+}
+
+export default PurchaseOrdersPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/add/page.tsx

@@ -0,0 +1,19 @@
+import Grid from '@mui/material/Grid2'
+
+import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
+import PurchaseQuoteAddHeader from '@/views/apps/purchase/purchase-quote/add/PurchaseQuoteAddHeader'
+
+const PurchaseQuoteAddPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseQuoteAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseQuoteAddPage

src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/page.tsx

@@ -0,0 +1,7 @@
+import PurchaseQuoteList from '@/views/apps/purchase/purchase-quote/list'
+
+const PurchaseQuotePage = () => {
+  return <PurchaseQuoteList />
+}
+
+export default PurchaseQuotePage

src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx

@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportCashFlowCard from '@/views/apps/report/cash-flow/ReportCashFlowCard'
+import ReportCashFlowContent from '@/views/apps/report/cash-flow/ReportCashFlowContent'
+import Grid from '@mui/material/Grid2'
+
+const CashFlowPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Arus Kas' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportCashFlowCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportCashFlowContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default CashFlowPage

src/app/[lang]/(dashboard)/(private)/apps/report/neraca/page.tsx

@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportNeracaCard from '@/views/apps/report/neraca/ReportNeracaCard'
+import ReportNeracaContent from '@/views/apps/report/neraca/ReportNeracaContent'
+import Grid from '@mui/material/Grid2'
+
+const NeracaPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Neraca' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportNeracaCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportNeracaContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default NeracaPage

src/app/[lang]/(dashboard)/(private)/apps/report/page.tsx

@@ -0,0 +1,7 @@
+import ReportList from '@/views/apps/report'
+
+const ReportPage = () => {
+  return <ReportList />
+}
+
+export default ReportPage

src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx

@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportProfitLossCard from '@/views/apps/report/profit-loss/ReportProfitLossCard'
+import ReportProfitLossContent from '@/views/apps/report/profit-loss/ReportProfitLossContent'
+import Grid from '@mui/material/Grid2'
+
+const ProfiltLossPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laba Rugi' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportProfitLossCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportProfitLossContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ProfiltLossPage

src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import Grid from '@mui/material/Grid2'
+
+import { TextField, Typography, useTheme } from '@mui/material'
+import { useState } from 'react'
+import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
+import SalesOverviewRight from '@/views/apps/sales/overview/overview-right'
+import SalesOverviewLeft from '@/views/apps/sales/overview/overview-left'
+
+const SalesOverviewPage = () => {
+  const theme = useTheme()
+
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+
+  const [filter, setFilter] = useState({
+    date_from: formatDateDDMMYYYY(monthAgo),
+    date_to: formatDateDDMMYYYY(today)
+  })
+
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12 }}>
+          <div className='flex gap-4 items-center justify-between'>
+            <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
+              Overview Penjualan
+            </Typography>
+            <div className='flex items-center gap-4'>
+              <TextField
+                type='date'
+                value={formatForInputDate(today || new Date())}
+                onChange={e => {
+                  setFilter({
+                    ...filter,
+                    date_from: formatDateDDMMYYYY(new Date(e.target.value))
+                  })
+                }}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+              <Typography>-</Typography>
+              <TextField
+                type='date'
+                value={today}
+                onChange={e => {}}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+            </div>
+          </div>
+        </Grid>
+      </Grid>
+      <Grid container spacing={6} className='mt-5'>
+        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+          <SalesOverviewRight />
+        </Grid>
+        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+          <SalesOverviewLeft />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default SalesOverviewPage

src/app/[lang]/(dashboard)/(private)/apps/sales/sales-bills/page.tsx

@@ -0,0 +1,7 @@
+import SalesBillList from '@/views/apps/sales/sales-bill/list'
+
+const SalesBillPage = () => {
+  return <SalesBillList />
+}
+
+export default SalesBillPage

src/app/[lang]/(dashboard)/(private)/apps/sales/sales-deliveries/page.tsx

@@ -0,0 +1,7 @@
+import SalesDeliveryListTable from '@/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable'
+
+const SalesDeliveryPage = () => {
+  return <SalesDeliveryListTable />
+}
+
+export default SalesDeliveryPage

src/app/[lang]/(dashboard)/(private)/apps/sales/sales-orders/page.tsx

@@ -0,0 +1,7 @@
+import SalesOrderList from '@/views/apps/sales/sales-orders/list'
+
+const SalesOrdersPage = () => {
+  return <SalesOrderList />
+}
+
+export default SalesOrdersPage

src/app/[lang]/(dashboard)/(private)/apps/sales/sales-quotes/page.tsx

@@ -0,0 +1,7 @@
+import SalesQuoteList from '@/views/apps/sales/sales-quote/list'
+
+const SalesQuotePage = () => {
+  return <SalesQuoteList />
+}
+
+export default SalesQuotePage

src/app/[lang]/(dashboard)/(private)/apps/vendor/detail/page.tsx

@@ -0,0 +1,7 @@
+import VendorView from '@/views/apps/vendor/detail'
+
+const VendorViewPage = async () => {
+  return <VendorView />
+}
+
+export default VendorViewPage

src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx

@@ -0,0 +1,8 @@
+import { vendorDummyData } from '@/data/dummy/vendor'
+import VendorList from '@/views/apps/vendor/list'
+
+const VendorListTablePage = async () => {
+  return <VendorList vendorData={vendorDummyData} />
+}
+
+export default VendorListTablePage

src/components/ImageUpload.tsx

@@ -0,0 +1,291 @@
+'use client'
+
+// React Imports
+import { useEffect, useState } from 'react'
+
+// MUI Imports
+import type { BoxProps } from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+
+// Third-party Imports
+import { useDropzone } from 'react-dropzone'
+
+// Component Imports
+import Link from '@components/Link'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+import AppReactDropzone from '@/libs/styles/AppReactDropzone'
+
+type FileProp = {
+  name: string
+  type: string
+  size: number
+}
+
+interface ImageUploadProps {
+  // Required props
+  onUpload: (file: File) => Promise<string> | string // Returns image URL
+
+  // Optional customization props
+  title?: string | null // Made nullable
+  currentImageUrl?: string
+  onImageRemove?: () => void
+  onImageChange?: (url: string) => void
+
+  // Upload state
+  isUploading?: boolean
+
+  // UI customization
+  maxFileSize?: number // in bytes
+  acceptedFileTypes?: string[]
+  showUrlOption?: boolean
+  uploadButtonText?: string
+  browseButtonText?: string
+  dragDropText?: string
+  replaceText?: string
+
+  // Style customization
+  className?: string
+  disabled?: boolean
+}
+
+// Styled Dropzone Component
+const Dropzone = styled(AppReactDropzone)<BoxProps>(({ theme }) => ({
+  '& .dropzone': {
+    minHeight: 'unset',
+    padding: theme.spacing(12),
+    [theme.breakpoints.down('sm')]: {
+      paddingInline: theme.spacing(5)
+    },
+    '&+.MuiList-root .MuiListItem-root .file-name': {
+      fontWeight: theme.typography.body1.fontWeight
+    }
+  }
+}))
+
+const ImageUpload: React.FC<ImageUploadProps> = ({
+  onUpload,
+  title = null, // Default to null
+  currentImageUrl = '',
+  onImageRemove,
+  onImageChange,
+  isUploading = false,
+  maxFileSize = 5 * 1024 * 1024, // 5MB default
+  acceptedFileTypes = ['image/*'],
+  showUrlOption = true,
+  uploadButtonText = 'Upload',
+  browseButtonText = 'Browse Image',
+  dragDropText = 'Drag and Drop Your Image Here.',
+  replaceText = 'Drop New Image to Replace',
+  className = '',
+  disabled = false
+}) => {
+  // States
+  const [files, setFiles] = useState<File[]>([])
+  const [error, setError] = useState<string>('')
+
+  const handleUpload = async () => {
+    if (!files.length) return
+
+    try {
+      setError('')
+      const imageUrl = await onUpload(files[0])
+
+      if (typeof imageUrl === 'string') {
+        onImageChange?.(imageUrl)
+        setFiles([]) // Clear files after successful upload
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed')
+    }
+  }
+
+  // Hooks
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles: File[]) => {
+      setError('')
+
+      if (acceptedFiles.length === 0) return
+
+      const file = acceptedFiles[0]
+
+      // Validate file size
+      if (file.size > maxFileSize) {
+        setError(`File size should be less than ${formatFileSize(maxFileSize)}`)
+        return
+      }
+
+      // Replace files instead of adding to them
+      setFiles([file])
+    },
+    accept: acceptedFileTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),
+    disabled: disabled || isUploading
+  })
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  const renderFilePreview = (file: FileProp) => {
+    if (file.type.startsWith('image')) {
+      return <img width={38} height={38} alt={file.name} src={URL.createObjectURL(file as any)} />
+    } else {
+      return <i className='tabler-file-description' />
+    }
+  }
+
+  const handleRemoveFile = (file: FileProp) => {
+    const filtered = files.filter((i: FileProp) => i.name !== file.name)
+    setFiles(filtered)
+    setError('')
+  }
+
+  const handleRemoveCurrentImage = () => {
+    onImageRemove?.()
+  }
+
+  const handleRemoveAllFiles = () => {
+    setFiles([])
+    setError('')
+  }
+
+  const fileList = files.map((file: FileProp) => (
+    <ListItem key={file.name} className='pis-4 plb-3'>
+      <div className='file-details'>
+        <div className='file-preview'>{renderFilePreview(file)}</div>
+        <div>
+          <Typography className='file-name font-medium' color='text.primary'>
+            {file.name}
+          </Typography>
+          <Typography className='file-size' variant='body2'>
+            {formatFileSize(file.size)}
+          </Typography>
+        </div>
+      </div>
+      <IconButton onClick={() => handleRemoveFile(file)} disabled={isUploading}>
+        <i className='tabler-x text-xl' />
+      </IconButton>
+    </ListItem>
+  ))
+
+  return (
+    <Dropzone className={className}>
+      {/* Conditional title and URL option header */}
+      {title && (
+        <div className='flex justify-between items-center mb-4'>
+          <Typography variant='h6' component='h2'>
+            {title}
+          </Typography>
+          {showUrlOption && (
+            <Typography component={Link} color='primary.main' className='font-medium'>
+              Add media from URL
+            </Typography>
+          )}
+        </div>
+      )}
+
+      <div {...getRootProps({ className: 'dropzone' })}>
+        <input {...getInputProps()} />
+        <div className='flex items-center flex-col gap-2 text-center'>
+          <CustomAvatar variant='rounded' skin='light' color='secondary'>
+            <i className='tabler-upload' />
+          </CustomAvatar>
+          <Typography variant='h4'>{currentImageUrl && !files.length ? replaceText : dragDropText}</Typography>
+          <Typography color='text.disabled'>or</Typography>
+          <Button variant='tonal' size='small' disabled={disabled || isUploading}>
+            {browseButtonText}
+          </Button>
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <Typography color='error' variant='body2' className='mt-2 text-center'>
+          {error}
+        </Typography>
+      )}
+
+      {/* Show current image if it exists */}
+      {currentImageUrl && !files.length && (
+        <div className='current-image mb-4'>
+          <Typography variant='subtitle2' className='mb-2'>
+            Current Image:
+          </Typography>
+          <div className='flex items-center justify-between p-3 border border-gray-200 rounded'>
+            <div className='flex items-center gap-3'>
+              <img width={60} height={60} alt='Current image' src={currentImageUrl} className='rounded object-cover' />
+              <div>
+                <Typography className='font-medium' color='text.primary'>
+                  Current image
+                </Typography>
+                <Typography variant='body2' color='text.secondary'>
+                  Uploaded image
+                </Typography>
+              </div>
+            </div>
+            {onImageRemove && (
+              <IconButton onClick={handleRemoveCurrentImage} color='error' disabled={isUploading}>
+                <i className='tabler-x text-xl' />
+              </IconButton>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* File list and upload buttons */}
+      {files.length > 0 && (
+        <>
+          <List>{fileList}</List>
+          <div className='buttons'>
+            <Button color='error' variant='tonal' onClick={handleRemoveAllFiles} disabled={isUploading}>
+              Remove All
+            </Button>
+            <Button variant='contained' onClick={handleUpload} disabled={isUploading}>
+              {isUploading ? 'Uploading...' : uploadButtonText}
+            </Button>
+          </div>
+        </>
+      )}
+    </Dropzone>
+  )
+}
+
+export default ImageUpload
+
+// ===== USAGE EXAMPLES =====
+
+// 1. Without title
+// <ImageUpload
+//   onUpload={handleUpload}
+//   currentImageUrl={imageUrl}
+//   onImageChange={setImageUrl}
+//   onImageRemove={() => setImageUrl('')}
+// />
+
+// 2. With title
+// <ImageUpload
+//   title="Product Image"
+//   onUpload={handleUpload}
+//   currentImageUrl={imageUrl}
+//   onImageChange={setImageUrl}
+//   onImageRemove={() => setImageUrl('')}
+// />
+
+// 3. Explicitly set title to null
+// <ImageUpload
+//   title={null}
+//   onUpload={handleUpload}
+//   currentImageUrl={imageUrl}
+//   onImageChange={setImageUrl}
+//   onImageRemove={() => setImageUrl('')}
+// />

src/components/RangeDatePicker.tsx

@@ -0,0 +1,276 @@
+// React Imports
+import React from 'react'
+
+// MUI Imports
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+
+interface DateRangePickerProps {
+  /**
+   * Start date value (Date object or date string)
+   */
+  startDate: Date | string | null
+  /**
+   * End date value (Date object or date string)
+   */
+  endDate: Date | string | null
+  /**
+   * Callback when start date changes
+   */
+  onStartDateChange: (date: Date | null) => void
+  /**
+   * Callback when end date changes
+   */
+  onEndDateChange: (date: Date | null) => void
+  /**
+   * Label for start date field
+   */
+  startLabel?: string
+  /**
+   * Label for end date field
+   */
+  endLabel?: string
+  /**
+   * Placeholder for start date field
+   */
+  startPlaceholder?: string
+  /**
+   * Placeholder for end date field
+   */
+  endPlaceholder?: string
+  /**
+   * Size of the text fields
+   */
+  size?: 'small' | 'medium'
+  /**
+   * Whether the fields are disabled
+   */
+  disabled?: boolean
+  /**
+   * Whether the fields are required
+   */
+  required?: boolean
+  /**
+   * Custom className for the container
+   */
+  className?: string
+  /**
+   * Custom styles for the container
+   */
+  containerStyle?: React.CSSProperties
+  /**
+   * Separator between date fields
+   */
+  separator?: string
+  /**
+   * Custom props for start date TextField
+   */
+  startTextFieldProps?: Omit<TextFieldProps, 'type' | 'value' | 'onChange'>
+  /**
+   * Custom props for end date TextField
+   */
+  endTextFieldProps?: Omit<TextFieldProps, 'type' | 'value' | 'onChange'>
+  /**
+   * Error state for start date
+   */
+  startError?: boolean
+  /**
+   * Error state for end date
+   */
+  endError?: boolean
+  /**
+   * Helper text for start date
+   */
+  startHelperText?: string
+  /**
+   * Helper text for end date
+   */
+  endHelperText?: string
+}
+
+// Utility functions
+const formatDateForInput = (date: Date | string | null): string => {
+  if (!date) return ''
+
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+
+  if (isNaN(dateObj.getTime())) return ''
+
+  return dateObj.toISOString().split('T')[0]
+}
+
+const parseDateFromInput = (dateString: string): Date | null => {
+  if (!dateString) return null
+
+  const date = new Date(dateString)
+  return isNaN(date.getTime()) ? null : date
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange,
+  startLabel,
+  endLabel,
+  startPlaceholder,
+  endPlaceholder,
+  size = 'small',
+  disabled = false,
+  required = false,
+  className = '',
+  containerStyle = {},
+  separator = '-',
+  startTextFieldProps = {},
+  endTextFieldProps = {},
+  startError = false,
+  endError = false,
+  startHelperText,
+  endHelperText
+}) => {
+  const theme = useTheme()
+
+  const defaultTextFieldSx = {
+    '& .MuiOutlinedInput-root': {
+      '&.Mui-focused fieldset': {
+        borderColor: 'primary.main'
+      },
+      '& fieldset': {
+        borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+      }
+    }
+  }
+
+  const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const date = parseDateFromInput(event.target.value)
+    onStartDateChange(date)
+  }
+
+  const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const date = parseDateFromInput(event.target.value)
+    onEndDateChange(date)
+  }
+
+  return (
+    <div className={`flex items-center gap-4 ${className}`} style={containerStyle}>
+      <TextField
+        type='date'
+        label={startLabel}
+        placeholder={startPlaceholder}
+        value={formatDateForInput(startDate)}
+        onChange={handleStartDateChange}
+        size={size}
+        disabled={disabled}
+        required={required}
+        error={startError}
+        helperText={startHelperText}
+        sx={{
+          ...defaultTextFieldSx,
+          ...startTextFieldProps.sx
+        }}
+        {...startTextFieldProps}
+      />
+
+      <Typography
+        color='text.secondary'
+        sx={{
+          userSelect: 'none',
+          fontSize: size === 'small' ? '14px' : '16px'
+        }}
+      >
+        {separator}
+      </Typography>
+
+      <TextField
+        type='date'
+        label={endLabel}
+        placeholder={endPlaceholder}
+        value={formatDateForInput(endDate)}
+        onChange={handleEndDateChange}
+        size={size}
+        disabled={disabled}
+        required={required}
+        error={endError}
+        helperText={endHelperText}
+        sx={{
+          ...defaultTextFieldSx,
+          ...endTextFieldProps.sx
+        }}
+        {...endTextFieldProps}
+      />
+    </div>
+  )
+}
+
+export default DateRangePicker
+
+// Export utility functions for external use
+export { formatDateForInput, parseDateFromInput }
+
+// Example usage:
+/*
+import DateRangePicker from '@/components/DateRangePicker'
+
+// In your component:
+const [startDate, setStartDate] = useState<Date | null>(new Date())
+const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+// Basic usage
+<DateRangePicker
+  startDate={startDate}
+  endDate={endDate}
+  onStartDateChange={setStartDate}
+  onEndDateChange={setEndDate}
+/>
+
+// With labels and validation
+<DateRangePicker
+  startDate={startDate}
+  endDate={endDate}
+  onStartDateChange={setStartDate}
+  onEndDateChange={setEndDate}
+  startLabel="Tanggal Mulai"
+  endLabel="Tanggal Selesai"
+  required
+  startError={startDate && endDate && startDate > endDate}
+  endError={startDate && endDate && startDate > endDate}
+  startHelperText={startDate && endDate && startDate > endDate ? "Tanggal mulai tidak boleh lebih besar dari tanggal selesai" : ""}
+/>
+
+// Custom styling
+<DateRangePicker
+  startDate={startDate}
+  endDate={endDate}
+  onStartDateChange={setStartDate}
+  onEndDateChange={setEndDate}
+  separator="sampai"
+  size="medium"
+  className="my-custom-class"
+  startTextFieldProps={{
+    variant: "filled",
+    sx: { minWidth: '150px' }
+  }}
+  endTextFieldProps={{
+    variant: "filled", 
+    sx: { minWidth: '150px' }
+  }}
+/>
+
+// Integration with your existing filter logic
+const handleDateRangeChange = (start: Date | null, end: Date | null) => {
+  setFilter({
+    ...filter,
+    date_from: start ? formatDateDDMMYYYY(start) : null,
+    date_to: end ? formatDateDDMMYYYY(end) : null
+  })
+}
+
+<DateRangePicker
+  startDate={filter.date_from ? new Date(filter.date_from) : null}
+  endDate={filter.date_to ? new Date(filter.date_to) : null}
+  onStartDateChange={(date) => handleDateRangeChange(date, filter.date_to ? new Date(filter.date_to) : null)}
+  onEndDateChange={(date) => handleDateRangeChange(filter.date_from ? new Date(filter.date_from) : null, date)}
+/>
+*/

src/components/StatusFilterTab.tsx

@@ -0,0 +1,249 @@
+// React Imports
+import React, { useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+
+const DropdownButton = styled(Button)(({ theme }) => ({
+  textTransform: 'none',
+  fontWeight: 400,
+  borderRadius: '8px',
+  borderColor: '#e0e0e0',
+  color: '#666',
+  '&:hover': {
+    borderColor: '#ccc',
+    backgroundColor: 'rgba(0, 0, 0, 0.04)'
+  }
+}))
+
+interface StatusFilterTabsProps {
+  /**
+   * Array of status options to display as filter tabs
+   */
+  statusOptions: string[]
+  /**
+   * Currently selected status filter
+   */
+  selectedStatus: string
+  /**
+   * Callback function when a status is selected
+   */
+  onStatusChange: (status: string) => void
+  /**
+   * Custom className for the container
+   */
+  className?: string
+  /**
+   * Custom styles for the container
+   */
+  containerStyle?: React.CSSProperties
+  /**
+   * Size of the buttons
+   */
+  buttonSize?: 'small' | 'medium' | 'large'
+  /**
+   * Maximum number of status options to show as buttons before switching to dropdown
+   */
+  maxButtonsBeforeDropdown?: number
+  /**
+   * Label for the dropdown when there are many options
+   */
+  dropdownLabel?: string
+}
+
+const StatusFilterTabs: React.FC<StatusFilterTabsProps> = ({
+  statusOptions,
+  selectedStatus,
+  onStatusChange,
+  className = '',
+  containerStyle = {},
+  buttonSize = 'small',
+  maxButtonsBeforeDropdown = 5,
+  dropdownLabel = 'Lainnya'
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+
+  const handleDropdownClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleDropdownClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleDropdownItemClick = (status: string) => {
+    onStatusChange(status)
+    handleDropdownClose()
+  }
+
+  // If status options are <= maxButtonsBeforeDropdown, show all as buttons
+  if (statusOptions.length <= maxButtonsBeforeDropdown) {
+    return (
+      <div className='flex flex-wrap gap-2'>
+        {statusOptions.map(status => (
+          <Button
+            key={status}
+            variant={selectedStatus === status ? 'contained' : 'outlined'}
+            color={selectedStatus === status ? 'primary' : 'inherit'}
+            onClick={() => onStatusChange(status)}
+            size={buttonSize}
+            className='rounded-lg'
+            sx={{
+              textTransform: 'none',
+              fontWeight: selectedStatus === status ? 600 : 400,
+              borderRadius: '8px',
+              ...(selectedStatus !== status && {
+                borderColor: '#e0e0e0',
+                color: '#666'
+              })
+            }}
+          >
+            {status}
+          </Button>
+        ))}
+      </div>
+    )
+  }
+
+  // If more than maxButtonsBeforeDropdown, show first few as buttons and rest in dropdown
+  const buttonStatuses = statusOptions.slice(0, maxButtonsBeforeDropdown - 1)
+  const dropdownStatuses = statusOptions.slice(maxButtonsBeforeDropdown - 1)
+  const isDropdownItemSelected = dropdownStatuses.includes(selectedStatus)
+
+  return (
+    <div className='flex flex-wrap gap-2'>
+      {/* Regular buttons for first few statuses */}
+      {buttonStatuses.map(status => (
+        <Button
+          key={status}
+          variant={selectedStatus === status ? 'contained' : 'outlined'}
+          color={selectedStatus === status ? 'primary' : 'inherit'}
+          onClick={() => onStatusChange(status)}
+          size={buttonSize}
+          className='rounded-lg'
+          sx={{
+            textTransform: 'none',
+            fontWeight: selectedStatus === status ? 600 : 400,
+            borderRadius: '8px',
+            ...(selectedStatus !== status && {
+              borderColor: '#e0e0e0',
+              color: '#666'
+            })
+          }}
+        >
+          {status}
+        </Button>
+      ))}
+
+      {/* Dropdown button for remaining statuses */}
+      <DropdownButton
+        variant='outlined'
+        onClick={handleDropdownClick}
+        size={buttonSize}
+        endIcon={<i className='tabler-chevron-down' />}
+        sx={{
+          ...(isDropdownItemSelected && {
+            backgroundColor: 'primary.main',
+            color: 'primary.contrastText',
+            borderColor: 'primary.main',
+            fontWeight: 600,
+            '&:hover': {
+              backgroundColor: 'primary.dark',
+              borderColor: 'primary.dark'
+            }
+          })
+        }}
+      >
+        {isDropdownItemSelected ? selectedStatus : dropdownLabel}
+      </DropdownButton>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleDropdownClose}
+        PaperProps={{
+          elevation: 3,
+          sx: {
+            mt: 1,
+            borderRadius: '8px',
+            minWidth: '160px'
+          }
+        }}
+        transformOrigin={{ horizontal: 'left', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+      >
+        {dropdownStatuses.map(status => (
+          <MenuItem
+            key={status}
+            onClick={() => handleDropdownItemClick(status)}
+            selected={selectedStatus === status}
+            sx={{
+              fontSize: '14px',
+              fontWeight: selectedStatus === status ? 600 : 400,
+              color: selectedStatus === status ? 'primary.main' : 'text.primary'
+            }}
+          >
+            {status}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  )
+}
+
+export default StatusFilterTabs
+
+// Example usage:
+/*
+import StatusFilterTabs from '@/components/StatusFilterTabs'
+
+// In your component:
+const [statusFilter, setStatusFilter] = useState('Semua')
+
+// For few statuses (will show all as buttons)
+const expenseStatusOptions = ['Semua', 'Belum Dibayar', 'Dibayar Sebagian', 'Lunas']
+
+// For many statuses (will show some buttons + dropdown)
+const manyStatusOptions = [
+  'Semua', 
+  'Belum Dibayar', 
+  'Dibayar Sebagian', 
+  'Lunas', 
+  'Void', 
+  'Retur',
+  'Jatuh Tempo',
+  'Transaksi Berulang',
+  'Ditangguhkan',
+  'Dibatalkan'
+]
+
+<StatusFilterTabs
+  statusOptions={expenseStatusOptions}
+  selectedStatus={statusFilter}
+  onStatusChange={setStatusFilter}
+/>
+
+// With many options (will automatically use dropdown)
+<StatusFilterTabs
+  statusOptions={manyStatusOptions}
+  selectedStatus={statusFilter}
+  onStatusChange={setStatusFilter}
+  maxButtonsBeforeDropdown={4} // Show 3 buttons + dropdown
+  dropdownLabel="Status Lain"
+/>
+
+// Custom configuration
+<StatusFilterTabs
+  statusOptions={manyStatusOptions}
+  selectedStatus={statusFilter}
+  onStatusChange={setStatusFilter}
+  maxButtonsBeforeDropdown={3}
+  dropdownLabel="Lainnya"
+  buttonSize="medium"
+  showBorder={false}
+/>
+*/

src/components/card-statistics/HorizontalWithSubtitle.tsx

@@ -32,7 +32,7 @@ const HorizontalWithSubtitle = (props: UserDataType) => {
         <div className='flex flex-col gap-1 flex-grow'>
           <Typography color='text.primary'>{title}</Typography>
           <div className='flex items-center gap-2 flex-wrap'>
-            <Typography variant='h4'>{stats}</Typography>
+            <Typography variant='h5'>{stats}</Typography>
             <Typography color={trend === 'negative' ? 'error.main' : 'success.main'}>
               {`(${trend === 'negative' ? '-' : '+'}${trendNumber})`}
             </Typography>

src/components/layout/shared/LanguageDropdown.tsx

@@ -43,12 +43,8 @@ const languageData: LanguageDataType[] = [
     langName: 'English'
   },
   {
-    langCode: 'fr',
-    langName: 'French'
-  },
-  {
-    langCode: 'ar',
-    langName: 'Arabic'
+    langCode: 'id',
+    langName: 'Indonesian'
   }
 ]
 

src/components/layout/vertical/VerticalMenu.tsx

@@ -91,6 +91,68 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           <MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
         </SubMenu>
         <MenuSection label={dictionary['navigation'].appsPages}>
+          <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-receipt-2' />}>
+            <MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
+            <MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
+            <MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</MenuItem>
+            <MenuItem href={`/${locale}/apps/sales/sales-orders`}>{dictionary['navigation'].sales_orders}</MenuItem>
+            <MenuItem href={`/${locale}/apps/sales/sales-quotes`}>{dictionary['navigation'].quotes}</MenuItem>
+          </SubMenu>
+          <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-shopping-cart' />}>
+            <MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
+            <MenuItem href={`/${locale}/apps/purchase/purchase-bills`}>
+              {dictionary['navigation'].purchase_bills}
+            </MenuItem>
+            <MenuItem href={`/${locale}/apps/purchase/purchase-deliveries`}>
+              {dictionary['navigation'].purchase_delivery}
+            </MenuItem>
+            <MenuItem href={`/${locale}/apps/purchase/purchase-orders`}>
+              {dictionary['navigation'].purchase_orders}
+            </MenuItem>
+            <MenuItem href={`/${locale}/apps/purchase/purchase-quotes`}>
+              {dictionary['navigation'].purchase_quotes}
+            </MenuItem>
+          </SubMenu>
+          <MenuItem
+            href={`/${locale}/apps/expense`}
+            icon={<i className='tabler-cash' />}
+            exactMatch={false}
+            activeUrl='/apps/expense'
+          >
+            {dictionary['navigation'].expenses}
+          </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/cash-bank`}
+            icon={<i className='tabler-building-bank' />}
+            exactMatch={false}
+            activeUrl='/apps/cash-bank'
+          >
+            {dictionary['navigation'].cash_and_bank}
+          </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/account`}
+            icon={<i className='tabler-align-box-left-stretch' />}
+            exactMatch={false}
+            activeUrl='/apps/account'
+          >
+            {dictionary['navigation'].account}
+          </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/fixed-assets`}
+            icon={<i className='tabler-apps' />}
+            exactMatch={false}
+            activeUrl='/apps/fixed-assets'
+          >
+            {dictionary['navigation'].fixed_assets}
+          </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/report`}
+            icon={<i className='tabler-file-analytics' />}
+            exactMatch={false}
+            activeUrl='/apps/report'
+          >
+            {dictionary['navigation'].reports}
+          </MenuItem>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
@@ -120,9 +182,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             </SubMenu>
             <SubMenu label={dictionary['navigation'].stock}>
               <MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
-              <MenuItem href={`/${locale}/apps/inventory/stock/restock`}>
-                {dictionary['navigation'].restock}
-              </MenuItem>
+              <MenuItem href={`/${locale}/apps/inventory/stock/restock`}>{dictionary['navigation'].restock}</MenuItem>
             </SubMenu>
             {/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
           </SubMenu>
@@ -136,10 +196,22 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
               <MenuItem href={`/${locale}/apps/finance/payment-methods/list`}>{dictionary['navigation'].list}</MenuItem>
             </SubMenu>
           </SubMenu>
-          <SubMenu label={dictionary['navigation'].user} icon={<i className='tabler-user' />}>
-            <MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
-            {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
-          </SubMenu>
+          <MenuItem
+            href={`/${locale}/apps/user/list`}
+            icon={<i className='tabler-user' />}
+            exactMatch={false}
+            activeUrl='/apps/user/list'
+          >
+            {dictionary['navigation'].user}
+          </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/vendor/list`}
+            icon={<i className='tabler-building' />}
+            exactMatch={false}
+            activeUrl='/apps/vendor/list'
+          >
+            {dictionary['navigation'].vendor}
+          </MenuItem>
         </MenuSection>
       </Menu>
     </ScrollWrapper>

src/components/report/ReportItem.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { Box, Typography, Paper } from '@mui/material'
+
+// Types
+type ReportItemHeaderProps = {
+  title: string
+  date?: string
+  amount?: number
+}
+
+type ReportItemSubheaderProps = {
+  title: string
+}
+
+type ReportItemProps = {
+  accountCode: string
+  accountName: string
+  amount: number
+  onClick?: () => void
+  isSubtitle?: boolean
+}
+
+type ReportItemFooterProps = {
+  title: string
+  amount: number
+  children?: React.ReactNode
+}
+
+// Helper function to format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(amount)
+}
+
+// ReportItemHeader Component
+export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date, amount }) => {
+  return (
+    <Box className='bg-slate-200 px-6 py-4 flex justify-between items-center'>
+      <Typography variant='h6' className='text-primary font-semibold'>
+        {title}
+      </Typography>
+      <Typography variant='body1' className='text-primary font-medium'>
+        {amount ? formatCurrency(amount) : date}
+      </Typography>
+    </Box>
+  )
+}
+
+// ReportItemSubheader Component
+export const ReportItemSubheader: React.FC<ReportItemSubheaderProps> = ({ title }) => {
+  return (
+    <Box className='px-6 py-3 bg-white border-b border-gray-300 hover:bg-gray-50 transition-colors'>
+      <Typography variant='subtitle1' className='font-semibold text-gray-900'>
+        {title}
+      </Typography>
+    </Box>
+  )
+}
+
+// ReportItem Component
+export const ReportItem: React.FC<ReportItemProps> = ({
+  accountCode,
+  accountName,
+  amount,
+  onClick,
+  isSubtitle = true
+}) => {
+  return (
+    <Box
+      onClick={onClick}
+      className={`px-6 py-3 flex justify-between items-center bg-white border-b border-gray-300 transition-all duration-200 ease-in-out ${
+        onClick ? 'cursor-pointer hover:bg-gray-50' : 'cursor-default'
+      }`}
+    >
+      <Typography variant='body1' className={`text-gray-900 font-normal ${isSubtitle ? 'ml-4' : ''}`}>
+        {accountCode} {accountName}
+      </Typography>
+      <Typography variant='body1' className='text-primary font-medium text-right'>
+        {formatCurrency(amount)}
+      </Typography>
+    </Box>
+  )
+}
+
+// ReportItemFooter Component
+export const ReportItemFooter: React.FC<ReportItemFooterProps> = ({ title, amount, children }) => {
+  return (
+    <Box className='px-6 py-4 border-b border-gray-300 hover:bg-gray-50 transition-colors'>
+      <Box className='flex justify-between items-center'>
+        <Typography variant='subtitle1' className='font-bold text-gray-900'>
+          {title}
+        </Typography>
+        <Typography variant='subtitle1' className='text-primary font-bold text-right'>
+          {formatCurrency(amount)}
+        </Typography>
+      </Box>
+      {children && <Box className='mt-2'>{children}</Box>}
+    </Box>
+  )
+}

src/components/report/ReportTitle.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+interface Props {
+  title: string
+}
+
+const ReportTitle = ({ title }: Props) => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          {title}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+interface Props {
+  title: string
+}
+
+export default ReportTitle

src/configs/i18n.ts

@@ -1,9 +1,10 @@
 export const i18n = {
   defaultLocale: 'en',
-  locales: ['en', 'fr', 'ar'],
+  locales: ['en', 'id'],
   langDirection: {
     en: 'ltr',
     fr: 'ltr',
+    id: 'ltr',
     ar: 'rtl'
   }
 } as const

src/contexts/authContext.tsx

@@ -25,7 +25,15 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     const savedToken = localStorage.getItem('authToken')
     const savedUser = localStorage.getItem('user')
     if (savedToken) setToken(savedToken)
-    if (savedUser) setCurrentUser(JSON.parse(savedUser))
+    if (savedUser) {
+      try {
+        setCurrentUser(JSON.parse(savedUser))
+      } catch (error) {
+        console.error('Failed to parse saved user data:', error)
+        // Clear invalid data
+        localStorage.removeItem('user')
+      }
+    }
     setIsInitialized(true)
   }, [])
 

src/data/dictionaries/ar.json

@@ -1,116 +0,0 @@
-{
-  "navigation": {
-    "dashboards": "لوحات القيادة",
-    "analytics": "تحليلات",
-    "inventory": "تجزئة الكترونية",
-    "stock": "المخزون",
-    "academy": "أكاديمية",
-    "logistics": "اللوجستية",
-    "frontPages": "الصفحات الأولى",
-    "landing": "الهبوط",
-    "pricing": "التسعير",
-    "payment": "قسط",
-    "checkout": "الدفع",
-    "helpCenter": "مركز المساعدة",
-    "appsPages": "التطبيقات والصفحات",
-    "apps": "تطبيقات",
-    "dashboard": "لوحة القيادة",
-    "products": "منتجات",
-    "list": "قائمة",
-    "add": "يضيف",
-    "restock": "استرجاع",
-    "category": "فئة",
-    "overview": "نظرة عامة",
-    "profitloss": "الربح والخسارة",
-    "finance": "مالية",
-    "paymentMethods": "طرق الدفع",
-    "organization": "المنظمة",
-    "outlet": "مخزن",
-    "units": "وحدات",
-    "reports": "تقارير",
-    "ingredients": "مكونات",
-    "orders": "أوامر",
-    "details": "تفاصيل",
-    "customers": "العملاء",
-    "manageReviews": "إدارة المراجعات",
-    "referrals": "الإحالات",
-    "settings": "إعدادات",
-    "myCourses": "دوراتي",
-    "courseDetails": "تفاصيل الدورة",
-    "fleet": "أسطول",
-    "email": "البريد الإلكتروني",
-    "chat": "محادثة",
-    "calendar": "تقويم",
-    "kanban": "كانبان",
-    "invoice": "فاتورة",
-    "preview": "معاينة",
-    "edit": "يحرر",
-    "user": "المستعمل",
-    "view": "رأي",
-    "rolesPermissions": "الأدوار والأذونات",
-    "roles": "الأدوار",
-    "permissions": "أذونات",
-    "pages": "الصفحات",
-    "userProfile": "ملف تعريفي للمستخدم",
-    "accountSettings": "إعدادت الحساب",
-    "faq": "التعليمات",
-    "miscellaneous": "متفرقات",
-    "comingSoon": "قريبا",
-    "underMaintenance": "تحت الصيانة",
-    "pageNotFound404": "الصفحة غير موجودة - 404",
-    "notAuthorized401": "غير مصرح به - 401",
-    "authPages": "صفحات المصادقة",
-    "login": "تسجيل الدخول",
-    "loginV1": "تسجيل الدخول v1",
-    "loginV2": "تسجيل الدخول الإصدار 2",
-    "register": "يسجل",
-    "registerV1": "تسجيل الإصدار 1",
-    "registerV2": "تسجيل الإصدار 2",
-    "registerMultiSteps": "تسجيل متعدد الخطوات",
-    "verifyEmail": "التحقق من البريد الإلكتروني",
-    "verifyEmailV1": "التحقق من البريد الإلكتروني الإصدار 1",
-    "verifyEmailV2": "التحقق من البريد الإلكتروني الإصدار 2",
-    "forgotPassword": "هل نسيت كلمة السر",
-    "forgotPasswordV1": "نسيت كلمة المرور v1",
-    "forgotPasswordV2": "نسيت كلمة المرور v2",
-    "resetPassword": "إعادة تعيين كلمة المرور",
-    "resetPasswordV1": "إعادة تعيين كلمة المرور v1",
-    "resetPasswordV2": "إعادة تعيين كلمة المرور الإصدار 2",
-    "twoSteps": "خطوتين",
-    "twoStepsV1": "خطوتين v1",
-    "twoStepsV2": "خطوتان - الإصدار 2",
-    "wizardExamples": "أمثلة على المعالج",
-    "propertyListing": "قائمة الممتلكات",
-    "createDeal": "إنشاء صفقة",
-    "dialogExamples": "أمثلة الحوار",
-    "widgetExamples": "أمثلة القطعة",
-    "basic": "أساسي",
-    "advanced": "متقدم",
-    "statistics": "إحصائيات",
-    "actions": "أجراءات",
-    "formsAndTables": "النماذج والجداول",
-    "formLayouts": "تخطيطات النموذج",
-    "formValidation": "التحقق من صحة النموذج",
-    "formWizard": "معالج النماذج",
-    "reactTable": "جدول رد الفعل",
-    "formELements": "عناصر النماذج",
-    "muiTables": "جداول MUI",
-    "chartsMisc": "الرسوم البيانية ومتفرقات",
-    "charts": "الرسوم البيانية",
-    "recharts": "يعيد رسم الخرائط",
-    "apex": "ذروة",
-    "foundation": "مؤسسة",
-    "components": "عناصر",
-    "menuExamples": "أمثلة القائمة",
-    "raiseSupport": "رفع الدعم",
-    "documentation": "توثيق",
-    "others": "آحرون",
-    "itemWithBadge": "العنصر مع شارة",
-    "externalLink": "رابط خارجي",
-    "menuLevels": "مستويات القائمة",
-    "menuLevel2": "مستوى القائمة 2",
-    "menuLevel3": "مستوى القائمة 3",
-    "disabledMenu": "قائمة المعوقين",
-    "dailyReport": "تقرير يومي"
-  }
-}

src/data/dictionaries/en.json

@@ -111,6 +111,21 @@
     "menuLevel2": "Menu Level 2",
     "menuLevel3": "Menu Level 3",
     "disabledMenu": "Disabled Menu",
-    "dailyReport": "Daily Report"
+    "dailyReport": "Daily Report",
+    "vendor": "Vendor",
+    "sales": "Sales",
+    "purchase_text": "Purchase",
+    "purchase_orders": "Purchase Orders",
+    "purchase_bills": "Purchase Bills",
+    "purchase_delivery": "Purchase Delivery",
+    "purchase_quotes": "Purchase Quotes",
+    "invoices": "Invoices",
+    "deliveries": "Deliveries",
+    "sales_orders": "Orders",
+    "quotes": "Quotes",
+    "expenses": "Expenses",
+    "cash_and_bank": "Cash & Bank",
+    "account": "Account",
+    "fixed_assets": "Fixed Assets"
   }
 }

src/data/dictionaries/fr.json

@@ -1,116 +0,0 @@
-{
-  "navigation": {
-    "dashboards": "Tableaux de bord",
-    "analytics": "Analytique",
-    "inventory": "Inventaire",
-    "stock": "Stock",
-    "academy": "Académie",
-    "logistics": "Logistique",
-    "frontPages": "Premières pages",
-    "landing": "Atterrissage",
-    "pricing": "Tarifs",
-    "payment": "Paiement",
-    "checkout": "Vérifier",
-    "helpCenter": "Centre d'aide",
-    "appsPages": "Applications et pages",
-    "apps": "Apps",
-    "dashboard": "Tableau de bord",
-    "products": "Produits",
-    "list": "Liste",
-    "add": "Ajouter",
-    "restock": "Rapprocher",
-    "category": "Catégorie",
-    "overview": "Aperçu",
-    "profitloss": "Profit et perte",
-    "finance": "Finance",
-    "paymentMethods": "Méthodes de paiement",
-    "organization": "Organisation",
-    "outlet": "Point de vente",
-    "units": "Unites",
-    "reports": "Rapports",
-    "ingredients": "Ingrédients",
-    "orders": "Ordres",
-    "details": "Détails",
-    "customers": "Clientes",
-    "manageReviews": "Gérer les avis",
-    "referrals": "Références",
-    "settings": "Paramètres",
-    "myCourses": "Mes cours",
-    "courseDetails": "Détails du cours",
-    "fleet": "Flotte",
-    "email": "E-mail",
-    "chat": "chatte",
-    "calendar": "Calendrier",
-    "kanban": "Kanban",
-    "invoice": "Facture d'achat",
-    "preview": "Aperçu",
-    "edit": "Éditer",
-    "user": "Utilisateur",
-    "view": "Voir",
-    "rolesPermissions": "Rôles et autorisations",
-    "roles": "Les rôles",
-    "permissions": "Autorisations",
-    "pages": "Pages",
-    "userProfile": "Profil de l'utilisateur",
-    "accountSettings": "Paramètres du compte",
-    "faq": "FAQ",
-    "miscellaneous": "Divers",
-    "comingSoon": "À venir",
-    "underMaintenance": "En maintenance",
-    "pageNotFound404": "Page non trouvée - 404",
-    "notAuthorized401": "Non autorisé - 401",
-    "authPages": "Pages d'authentification",
-    "login": "Connexion",
-    "loginV1": "Connexion v1",
-    "loginV2": "Connexion v2",
-    "register": "S'inscrire",
-    "registerV1": "Enregistrer v1",
-    "registerV2": "Enregistrer v2",
-    "registerMultiSteps": "Enregistrer plusieurs étapes",
-    "verifyEmail": "Vérifier les courriels",
-    "verifyEmailV1": "Vérifier l'e-mail v1",
-    "verifyEmailV2": "Vérifier l'e-mail v2",
-    "forgotPassword": "Mot de passe oublié",
-    "forgotPasswordV1": "Mot de passe oublié v1",
-    "forgotPasswordV2": "Mot de passe oublié v2",
-    "resetPassword": "Réinitialiser le mot de passe",
-    "resetPasswordV1": "Réinitialiser le mot de passe v1",
-    "resetPasswordV2": "Réinitialiser le mot de passe v2",
-    "twoSteps": "Deux étapes",
-    "twoStepsV1": "Deux étapes v1",
-    "twoStepsV2": "Deux étapes v2",
-    "wizardExamples": "Exemples d'assistants",
-    "propertyListing": "Liste des biens",
-    "createDeal": "Créer un accord",
-    "dialogExamples": "Exemples de dialogue",
-    "widgetExamples": "Exemples de widgets",
-    "basic": "Basique",
-    "advanced": "Avancée",
-    "statistics": "Statistiques",
-    "actions": "Actions",
-    "formsAndTables": "Formulaires et tableaux",
-    "formLayouts": "Dispositions de formulaire",
-    "formValidation": "Validation du formulaire",
-    "formWizard": "Assistant de formulaire",
-    "reactTable": "Tableau de réaction",
-    "formELements": "Éléments de formulaire",
-    "muiTables": "Tableaux MUI",
-    "chartsMisc": "Graphiques & Divers",
-    "charts": "Graphiques",
-    "recharts": "Regraphiques",
-    "apex": "Sommet",
-    "foundation": "fondation",
-    "components": "Composants",
-    "menuExamples": "Exemples de menus",
-    "raiseSupport": "Augmenter le soutien",
-    "documentation": "Documentation",
-    "others": "Les autres",
-    "itemWithBadge": "Article avec badge",
-    "externalLink": "Lien Externe",
-    "menuLevels": "Niveaux de menus",
-    "menuLevel2": "Niveau menu 2",
-    "menuLevel3": "Niveau menu 3",
-    "disabledMenu": "Menu désactivé",
-    "dailyReport": "Rapport quotidien"
-  }
-}

src/data/dictionaries/id.json

@@ -0,0 +1,131 @@
+{
+    "navigation": {
+        "dashboards": "Dasbor",
+        "analytics": "Analitik",
+        "inventory": "Inventaris",
+        "stock": "Stok",
+        "academy": "Akademi",
+        "logistics": "Logistik",
+        "frontPages": "Halaman Depan",
+        "landing": "Beranda",
+        "pricing": "Harga",
+        "payment": "Pembayaran",
+        "checkout": "Checkout",
+        "helpCenter": "Pusat Bantuan",
+        "appsPages": "Aplikasi & Halaman",
+        "apps": "Aplikasi",
+        "dashboard": "Dasbor",
+        "products": "Produk",
+        "list": "Daftar",
+        "add": "Tambah",
+        "restock": "Isi Ulang Stok",
+        "category": "Kategori",
+        "overview": "Ringkasan",
+        "profitloss": "Laba Rugi",
+        "units": "Unit",
+        "reports": "Laporan",
+        "finance": "Keuangan",
+        "paymentMethods": "Metode Pembayaran",
+        "organization": "Organisasi",
+        "outlet": "Outlet",
+        "ingredients": "Bahan",
+        "orders": "Pesanan",
+        "details": "Detail",
+        "customers": "Pelanggan",
+        "manageReviews": "Kelola Ulasan",
+        "referrals": "Rujukan",
+        "settings": "Pengaturan",
+        "myCourses": "Kursus Saya",
+        "courseDetails": "Detail Kursus",
+        "fleet": "Armada",
+        "email": "Email",
+        "chat": "Chat",
+        "calendar": "Kalender",
+        "kanban": "Kanban",
+        "invoice": "Faktur",
+        "preview": "Pratinjau",
+        "edit": "Edit",
+        "user": "Pengguna",
+        "view": "Lihat",
+        "rolesPermissions": "Peran & Izin",
+        "roles": "Peran",
+        "permissions": "Izin",
+        "pages": "Halaman",
+        "userProfile": "Profil Pengguna",
+        "accountSettings": "Pengaturan Akun",
+        "faq": "FAQ",
+        "miscellaneous": "Lain-lain",
+        "comingSoon": "Segera Hadir",
+        "underMaintenance": "Dalam Pemeliharaan",
+        "pageNotFound404": "Halaman Tidak Ditemukan - 404",
+        "notAuthorized401": "Tidak Diizinkan - 401",
+        "authPages": "Halaman Autentikasi",
+        "login": "Masuk",
+        "loginV1": "Masuk v1",
+        "loginV2": "Masuk v2",
+        "register": "Daftar",
+        "registerV1": "Daftar v1",
+        "registerV2": "Daftar v2",
+        "registerMultiSteps": "Daftar Multi-Langkah",
+        "verifyEmail": "Verifikasi Email",
+        "verifyEmailV1": "Verifikasi Email v1",
+        "verifyEmailV2": "Verifikasi Email v2",
+        "forgotPassword": "Lupa Kata Sandi",
+        "forgotPasswordV1": "Lupa Kata Sandi v1",
+        "forgotPasswordV2": "Lupa Kata Sandi v2",
+        "resetPassword": "Reset Kata Sandi",
+        "resetPasswordV1": "Reset Kata Sandi v1",
+        "resetPasswordV2": "Reset Kata Sandi v2",
+        "twoSteps": "Dua Langkah",
+        "twoStepsV1": "Dua Langkah v1",
+        "twoStepsV2": "Dua Langkah v2",
+        "wizardExamples": "Contoh Wizard",
+        "propertyListing": "Daftar Properti",
+        "createDeal": "Buat Penawaran",
+        "dialogExamples": "Contoh Dialog",
+        "widgetExamples": "Contoh Widget",
+        "basic": "Dasar",
+        "advanced": "Lanjutan",
+        "statistics": "Statistik",
+        "actions": "Aksi",
+        "formsAndTables": "Form & Tabel",
+        "formLayouts": "Layout Form",
+        "formValidation": "Validasi Form",
+        "formWizard": "Wizard Form",
+        "reactTable": "Tabel React",
+        "formELements": "Elemen Form",
+        "muiTables": "Tabel MUI",
+        "chartsMisc": "Grafik & Lain-lain",
+        "charts": "Grafik",
+        "recharts": "Recharts",
+        "apex": "Apex",
+        "foundation": "Fondasi",
+        "components": "Komponen",
+        "menuExamples": "Contoh Menu",
+        "raiseSupport": "Buat Tiket Dukungan",
+        "documentation": "Dokumentasi",
+        "others": "Lainnya",
+        "itemWithBadge": "Item dengan Badge",
+        "externalLink": "Link Eksternal",
+        "menuLevels": "Level Menu",
+        "menuLevel2": "Level Menu 2",
+        "menuLevel3": "Level Menu 3",
+        "disabledMenu": "Menu Nonaktif",
+        "dailyReport": "Laporan Harian",
+        "vendor": "Vendor",
+        "sales": "Penjualan",
+        "purchase_text": "Pembelian",
+        "purchase_orders": "Pesanan Pembelian",
+        "purchase_bills": "Tagihan Pembelian",
+        "purchase_delivery": "Pengiriman Pembelian",
+        "purchase_quotes": "Penawaran Pembelian",
+        "invoices": "Tagihan",
+        "deliveries": "Pengiriman",
+        "sales_orders": "Pemesanan",
+        "quotes": "Penawaran",
+        "expenses": "Biaya",
+        "cash_and_bank": "Kas & Bank",
+        "account": "Akun",
+        "fixed_assets": "Aset Tetap"
+    }
+}

src/data/dummy/expense.ts

@@ -0,0 +1,224 @@
+import { ExpenseType } from '@/types/apps/expenseTypes'
+
+export const expenseData: ExpenseType[] = [
+  {
+    id: 1,
+    date: '2025-01-05',
+    number: 'EXP/2025/001',
+    reference: 'REF-EXP-001',
+    benefeciaryName: 'Budi Santoso',
+    benefeciaryCompany: 'PT Maju Jaya',
+    status: 'Belum Dibayar',
+    balanceDue: 5000000,
+    total: 5000000
+  },
+  {
+    id: 2,
+    date: '2025-01-06',
+    number: 'EXP/2025/002',
+    reference: 'REF-EXP-002',
+    benefeciaryName: 'Siti Aminah',
+    benefeciaryCompany: 'CV Sentosa Abadi',
+    status: 'Dibayar Sebagian',
+    balanceDue: 2500000,
+    total: 6000000
+  },
+  {
+    id: 3,
+    date: '2025-01-07',
+    number: 'EXP/2025/003',
+    reference: 'REF-EXP-003',
+    benefeciaryName: 'Agus Prasetyo',
+    benefeciaryCompany: 'UD Makmur',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 4200000
+  },
+  {
+    id: 4,
+    date: '2025-01-08',
+    number: 'EXP/2025/004',
+    reference: 'REF-EXP-004',
+    benefeciaryName: 'Rina Wulandari',
+    benefeciaryCompany: 'PT Sejahtera Bersama',
+    status: 'Belum Dibayar',
+    balanceDue: 3200000,
+    total: 3200000
+  },
+  {
+    id: 5,
+    date: '2025-01-09',
+    number: 'EXP/2025/005',
+    reference: 'REF-EXP-005',
+    benefeciaryName: 'Dedi Kurniawan',
+    benefeciaryCompany: 'CV Bintang Terang',
+    status: 'Dibayar Sebagian',
+    balanceDue: 1500000,
+    total: 7000000
+  },
+  {
+    id: 6,
+    date: '2025-01-10',
+    number: 'EXP/2025/006',
+    reference: 'REF-EXP-006',
+    benefeciaryName: 'Sri Lestari',
+    benefeciaryCompany: 'PT Barokah Jaya',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 2800000
+  },
+  {
+    id: 7,
+    date: '2025-01-11',
+    number: 'EXP/2025/007',
+    reference: 'REF-EXP-007',
+    benefeciaryName: 'Joko Widodo',
+    benefeciaryCompany: 'UD Sumber Rejeki',
+    status: 'Belum Dibayar',
+    balanceDue: 8000000,
+    total: 8000000
+  },
+  {
+    id: 8,
+    date: '2025-01-12',
+    number: 'EXP/2025/008',
+    reference: 'REF-EXP-008',
+    benefeciaryName: 'Maya Kartika',
+    benefeciaryCompany: 'PT Bumi Lestari',
+    status: 'Dibayar Sebagian',
+    balanceDue: 2000000,
+    total: 9000000
+  },
+  {
+    id: 9,
+    date: '2025-01-13',
+    number: 'EXP/2025/009',
+    reference: 'REF-EXP-009',
+    benefeciaryName: 'Eko Yulianto',
+    benefeciaryCompany: 'CV Cahaya Baru',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 3500000
+  },
+  {
+    id: 10,
+    date: '2025-01-14',
+    number: 'EXP/2025/010',
+    reference: 'REF-EXP-010',
+    benefeciaryName: 'Nina Rahmawati',
+    benefeciaryCompany: 'PT Gemilang',
+    status: 'Belum Dibayar',
+    balanceDue: 4700000,
+    total: 4700000
+  },
+  {
+    id: 11,
+    date: '2025-01-15',
+    number: 'EXP/2025/011',
+    reference: 'REF-EXP-011',
+    benefeciaryName: 'Andi Saputra',
+    benefeciaryCompany: 'CV Harmoni',
+    status: 'Dibayar Sebagian',
+    balanceDue: 1200000,
+    total: 6000000
+  },
+  {
+    id: 12,
+    date: '2025-01-16',
+    number: 'EXP/2025/012',
+    reference: 'REF-EXP-012',
+    benefeciaryName: 'Yuni Astuti',
+    benefeciaryCompany: 'PT Surya Abadi',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 5200000
+  },
+  {
+    id: 13,
+    date: '2025-01-17',
+    number: 'EXP/2025/013',
+    reference: 'REF-EXP-013',
+    benefeciaryName: 'Ridwan Hidayat',
+    benefeciaryCompany: 'UD Berkah',
+    status: 'Belum Dibayar',
+    balanceDue: 2900000,
+    total: 2900000
+  },
+  {
+    id: 14,
+    date: '2025-01-18',
+    number: 'EXP/2025/014',
+    reference: 'REF-EXP-014',
+    benefeciaryName: 'Ratna Sari',
+    benefeciaryCompany: 'PT Amanah Sentosa',
+    status: 'Dibayar Sebagian',
+    balanceDue: 1000000,
+    total: 4000000
+  },
+  {
+    id: 15,
+    date: '2025-01-19',
+    number: 'EXP/2025/015',
+    reference: 'REF-EXP-015',
+    benefeciaryName: 'Hendra Gunawan',
+    benefeciaryCompany: 'CV Murni',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 2500000
+  },
+  {
+    id: 16,
+    date: '2025-01-20',
+    number: 'EXP/2025/016',
+    reference: 'REF-EXP-016',
+    benefeciaryName: 'Mega Putri',
+    benefeciaryCompany: 'PT Citra Mandiri',
+    status: 'Belum Dibayar',
+    balanceDue: 6100000,
+    total: 6100000
+  },
+  {
+    id: 17,
+    date: '2025-01-21',
+    number: 'EXP/2025/017',
+    reference: 'REF-EXP-017',
+    benefeciaryName: 'Bayu Saputra',
+    benefeciaryCompany: 'UD Lancar Jaya',
+    status: 'Dibayar Sebagian',
+    balanceDue: 1700000,
+    total: 5000000
+  },
+  {
+    id: 18,
+    date: '2025-01-22',
+    number: 'EXP/2025/018',
+    reference: 'REF-EXP-018',
+    benefeciaryName: 'Dian Anggraini',
+    benefeciaryCompany: 'CV Sumber Cahaya',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 3300000
+  },
+  {
+    id: 19,
+    date: '2025-01-23',
+    number: 'EXP/2025/019',
+    reference: 'REF-EXP-019',
+    benefeciaryName: 'Rizky Aditya',
+    benefeciaryCompany: 'PT Mandiri Abadi',
+    status: 'Belum Dibayar',
+    balanceDue: 7000000,
+    total: 7000000
+  },
+  {
+    id: 20,
+    date: '2025-01-24',
+    number: 'EXP/2025/020',
+    reference: 'REF-EXP-020',
+    benefeciaryName: 'Lina Marlina',
+    benefeciaryCompany: 'CV Anugerah',
+    status: 'Dibayar Sebagian',
+    balanceDue: 2000000,
+    total: 6500000
+  }
+]

src/data/dummy/purchase-bill.ts

@@ -0,0 +1,244 @@
+import { PurchaseBillType } from '@/types/apps/purchaseBillType'
+
+export const purchaseBillsData: PurchaseBillType[] = [
+  {
+    id: 1,
+    number: 'PB-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-001',
+    date: '2025-09-01',
+    dueDate: '2025-09-15',
+    status: 'Belum Dibayar',
+    remainingBill: 5000000,
+    total: 5000000
+  },
+  {
+    id: 2,
+    number: 'PB-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-002',
+    date: '2025-08-28',
+    dueDate: '2025-09-12',
+    status: 'Dibayar Sebagian',
+    remainingBill: 2000000,
+    total: 8000000
+  },
+  {
+    id: 3,
+    number: 'PB-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-003',
+    date: '2025-09-05',
+    dueDate: '2025-09-20',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 3500000
+  },
+  {
+    id: 4,
+    number: 'PB-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-004',
+    date: '2025-08-30',
+    dueDate: '2025-09-14',
+    status: 'Belum Dibayar',
+    remainingBill: 12000000,
+    total: 12000000
+  },
+  {
+    id: 5,
+    number: 'PB-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-005',
+    date: '2025-09-03',
+    dueDate: '2025-09-18',
+    status: 'Dibayar Sebagian',
+    remainingBill: 1500000,
+    total: 6000000
+  },
+  {
+    id: 6,
+    number: 'PB-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-006',
+    date: '2025-09-06',
+    dueDate: '2025-09-21',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 9000000
+  },
+  {
+    id: 7,
+    number: 'PB-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-007',
+    date: '2025-09-02',
+    dueDate: '2025-09-17',
+    status: 'Belum Dibayar',
+    remainingBill: 7200000,
+    total: 7200000
+  },
+  {
+    id: 8,
+    number: 'PB-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-008',
+    date: '2025-08-27',
+    dueDate: '2025-09-11',
+    status: 'Dibayar Sebagian',
+    remainingBill: 3000000,
+    total: 10000000
+  },
+  {
+    id: 9,
+    number: 'PB-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-009',
+    date: '2025-09-04',
+    dueDate: '2025-09-19',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 4500000
+  },
+  {
+    id: 10,
+    number: 'PB-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-010',
+    date: '2025-09-07',
+    dueDate: '2025-09-22',
+    status: 'Belum Dibayar',
+    remainingBill: 2500000,
+    total: 2500000
+  },
+  {
+    id: 11,
+    number: 'PB-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-011',
+    date: '2025-09-01',
+    dueDate: '2025-09-16',
+    status: 'Dibayar Sebagian',
+    remainingBill: 1000000,
+    total: 7000000
+  },
+  {
+    id: 12,
+    number: 'PB-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-012',
+    date: '2025-09-08',
+    dueDate: '2025-09-23',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 5600000
+  },
+  {
+    id: 13,
+    number: 'PB-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-013',
+    date: '2025-08-29',
+    dueDate: '2025-09-13',
+    status: 'Belum Dibayar',
+    remainingBill: 8000000,
+    total: 8000000
+  },
+  {
+    id: 14,
+    number: 'PB-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-014',
+    date: '2025-09-05',
+    dueDate: '2025-09-20',
+    status: 'Dibayar Sebagian',
+    remainingBill: 4000000,
+    total: 10000000
+  },
+  {
+    id: 15,
+    number: 'PB-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-015',
+    date: '2025-09-03',
+    dueDate: '2025-09-18',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 3000000
+  },
+  {
+    id: 16,
+    number: 'PB-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-016',
+    date: '2025-08-31',
+    dueDate: '2025-09-15',
+    status: 'Belum Dibayar',
+    remainingBill: 6700000,
+    total: 6700000
+  },
+  {
+    id: 17,
+    number: 'PB-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-017',
+    date: '2025-09-02',
+    dueDate: '2025-09-17',
+    status: 'Dibayar Sebagian',
+    remainingBill: 2000000,
+    total: 9000000
+  },
+  {
+    id: 18,
+    number: 'PB-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-018',
+    date: '2025-09-06',
+    dueDate: '2025-09-21',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 7200000
+  },
+  {
+    id: 19,
+    number: 'PB-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-019',
+    date: '2025-09-04',
+    dueDate: '2025-09-19',
+    status: 'Belum Dibayar',
+    remainingBill: 11000000,
+    total: 11000000
+  },
+  {
+    id: 20,
+    number: 'PB-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-020',
+    date: '2025-09-07',
+    dueDate: '2025-09-22',
+    status: 'Dibayar Sebagian',
+    remainingBill: 500000,
+    total: 4500000
+  }
+]

src/data/dummy/purchase-delivery.ts

@@ -0,0 +1,184 @@
+import { PurchaseDeliveryType } from '@/types/apps/purchaseDeliveryTypes'
+
+export const purchaseDeliveryData: PurchaseDeliveryType[] = [
+  {
+    id: 1,
+    number: 'PD-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-PD-001',
+    date: '2025-09-01',
+    status: 'Open'
+  },
+  {
+    id: 2,
+    number: 'PD-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-PD-002',
+    date: '2025-09-02',
+    status: 'Selesai'
+  },
+  {
+    id: 3,
+    number: 'PD-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-PD-003',
+    date: '2025-09-03',
+    status: 'Open'
+  },
+  {
+    id: 4,
+    number: 'PD-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-PD-004',
+    date: '2025-09-04',
+    status: 'Selesai'
+  },
+  {
+    id: 5,
+    number: 'PD-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-PD-005',
+    date: '2025-09-05',
+    status: 'Open'
+  },
+  {
+    id: 6,
+    number: 'PD-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-PD-006',
+    date: '2025-09-06',
+    status: 'Selesai'
+  },
+  {
+    id: 7,
+    number: 'PD-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-PD-007',
+    date: '2025-09-07',
+    status: 'Open'
+  },
+  {
+    id: 8,
+    number: 'PD-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-PD-008',
+    date: '2025-09-08',
+    status: 'Selesai'
+  },
+  {
+    id: 9,
+    number: 'PD-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-PD-009',
+    date: '2025-09-09',
+    status: 'Open'
+  },
+  {
+    id: 10,
+    number: 'PD-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-PD-010',
+    date: '2025-09-10',
+    status: 'Selesai'
+  },
+  {
+    id: 11,
+    number: 'PD-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-PD-011',
+    date: '2025-09-11',
+    status: 'Open'
+  },
+  {
+    id: 12,
+    number: 'PD-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-PD-012',
+    date: '2025-09-12',
+    status: 'Selesai'
+  },
+  {
+    id: 13,
+    number: 'PD-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-PD-013',
+    date: '2025-09-13',
+    status: 'Open'
+  },
+  {
+    id: 14,
+    number: 'PD-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-PD-014',
+    date: '2025-09-14',
+    status: 'Selesai'
+  },
+  {
+    id: 15,
+    number: 'PD-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-PD-015',
+    date: '2025-09-15',
+    status: 'Open'
+  },
+  {
+    id: 16,
+    number: 'PD-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-PD-016',
+    date: '2025-09-16',
+    status: 'Selesai'
+  },
+  {
+    id: 17,
+    number: 'PD-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-PD-017',
+    date: '2025-09-17',
+    status: 'Open'
+  },
+  {
+    id: 18,
+    number: 'PD-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-PD-018',
+    date: '2025-09-18',
+    status: 'Selesai'
+  },
+  {
+    id: 19,
+    number: 'PD-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-PD-019',
+    date: '2025-09-19',
+    status: 'Open'
+  },
+  {
+    id: 20,
+    number: 'PD-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-PD-020',
+    date: '2025-09-20',
+    status: 'Selesai'
+  }
+]

src/data/dummy/purchase-order.ts

@@ -0,0 +1,224 @@
+import { PurchaseOrderType } from '@/types/apps/purchaseOrderTypes'
+
+export const purchaseOrdersData: PurchaseOrderType[] = [
+  {
+    id: 1,
+    number: 'PO/00040',
+    vendorName: 'Kairav Wijaya Nababan',
+    vendorCompany: 'Yayasan Haryanto Tbk',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Disetujui',
+    total: 2037170
+  },
+  {
+    id: 2,
+    number: 'PO/00041',
+    vendorName: 'Sari Melani Hutapea',
+    vendorCompany: 'PT Santoso Jaya',
+    reference: 'REF-2025-001',
+    date: '03/09/2025',
+    dueDate: '17/09/2025',
+    status: 'Draft',
+    total: 1875500
+  },
+  {
+    id: 3,
+    number: 'PO/00042',
+    vendorName: 'Budi Prasetyo Manullang',
+    vendorCompany: 'CV Wijaya Makmur',
+    reference: 'REF-2025-002',
+    date: '07/09/2025',
+    dueDate: '21/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 3250750
+  },
+  {
+    id: 4,
+    number: 'PO/00043',
+    vendorName: 'Maya Sari Lumban Gaol',
+    vendorCompany: 'PT Indah Permata',
+    reference: '',
+    date: '02/09/2025',
+    dueDate: '16/09/2025',
+    status: 'Selesai',
+    total: 980250
+  },
+  {
+    id: 5,
+    number: 'PO/00044',
+    vendorName: 'Rahman Hakim Siahaan',
+    vendorCompany: 'Toko Bahagia Sejahtera',
+    reference: 'REF-2025-003',
+    date: '08/09/2025',
+    dueDate: '22/09/2025',
+    status: 'Draft',
+    total: 4125890
+  },
+  {
+    id: 6,
+    number: 'PO/00045',
+    vendorName: 'Dewi Anggraini Panjaitan',
+    vendorCompany: 'PT Maju Bersama',
+    reference: 'REF-2025-004',
+    date: '01/09/2025',
+    dueDate: '15/09/2025',
+    status: 'Selesai',
+    total: 2678300
+  },
+  {
+    id: 7,
+    number: 'PO/00046',
+    vendorName: 'Agung Wijaya Simbolon',
+    vendorCompany: 'CV Karya Mandiri',
+    reference: '',
+    date: '06/09/2025',
+    dueDate: '20/09/2025',
+    status: 'Disetujui',
+    total: 1456780
+  },
+  {
+    id: 8,
+    number: 'PO/00047',
+    vendorName: 'Fitri Handayani Sitorus',
+    vendorCompany: 'PT Global Nusantara',
+    reference: 'REF-2025-005',
+    date: '04/09/2025',
+    dueDate: '18/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 5892450
+  },
+  {
+    id: 9,
+    number: 'PO/00048',
+    vendorName: 'Andi Setiawan Tampubolon',
+    vendorCompany: 'Yayasan Pembangunan Tbk',
+    reference: 'REF-2025-006',
+    date: '09/09/2025',
+    dueDate: '23/09/2025',
+    status: 'Draft',
+    total: 3567120
+  },
+  {
+    id: 10,
+    number: 'PO/00049',
+    vendorName: 'Rina Maharani Hutasoit',
+    vendorCompany: 'PT Sejahtera Abadi',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Disetujui',
+    total: 2234680
+  },
+  {
+    id: 11,
+    number: 'PO/00050',
+    vendorName: 'Joko Santoso Nainggolan',
+    vendorCompany: 'CV Berkah Jaya',
+    reference: 'REF-2025-007',
+    date: '03/09/2025',
+    dueDate: '17/09/2025',
+    status: 'Selesai',
+    total: 1789560
+  },
+  {
+    id: 12,
+    number: 'PO/00051',
+    vendorName: 'Linda Safitri Simanjuntak',
+    vendorCompany: 'PT Harapan Bangsa',
+    reference: 'REF-2025-008',
+    date: '07/09/2025',
+    dueDate: '21/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 4321870
+  },
+  {
+    id: 13,
+    number: 'PO/00052',
+    vendorName: 'Irfan Maulana Pasaribu',
+    vendorCompany: 'CV Sumber Rejeki',
+    reference: 'REF-2025-009',
+    date: '10/09/2025',
+    dueDate: '24/09/2025',
+    status: 'Draft',
+    total: 2567890
+  },
+  {
+    id: 14,
+    number: 'PO/00053',
+    vendorName: 'Siska Permata Sinaga',
+    vendorCompany: 'PT Mitra Sukses',
+    reference: '',
+    date: '11/09/2025',
+    dueDate: '25/09/2025',
+    status: 'Disetujui',
+    total: 3456780
+  },
+  {
+    id: 15,
+    number: 'PO/00054',
+    vendorName: 'Rizky Aditya Siregar',
+    vendorCompany: 'Toko Aman Sentosa',
+    reference: 'REF-2025-010',
+    date: '08/09/2025',
+    dueDate: '22/09/2025',
+    status: 'Selesai',
+    total: 1234567
+  },
+  {
+    id: 16,
+    number: 'PO/00055',
+    vendorName: 'Nina Sari Hutabarat',
+    vendorCompany: 'PT Cahaya Terang',
+    reference: 'REF-2025-011',
+    date: '12/09/2025',
+    dueDate: '26/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 5678900
+  },
+  {
+    id: 17,
+    number: 'PO/00056',
+    vendorName: 'Doni Prasetya Situmorang',
+    vendorCompany: 'CV Barokah Makmur',
+    reference: '',
+    date: '09/09/2025',
+    dueDate: '23/09/2025',
+    status: 'Draft',
+    total: 987654
+  },
+  {
+    id: 18,
+    number: 'PO/00057',
+    vendorName: 'Anita Dewi Marpaung',
+    vendorCompany: 'Yayasan Karya Bhakti',
+    reference: 'REF-2025-012',
+    date: '06/09/2025',
+    dueDate: '20/09/2025',
+    status: 'Disetujui',
+    total: 4567123
+  },
+  {
+    id: 19,
+    number: 'PO/00058',
+    vendorName: 'Tommy Wijaya Samosir',
+    vendorCompany: 'PT Bintang Timur',
+    reference: 'REF-2025-013',
+    date: '13/09/2025',
+    dueDate: '27/09/2025',
+    status: 'Selesai',
+    total: 2345678
+  },
+  {
+    id: 20,
+    number: 'PO/00059',
+    vendorName: 'Lestari Indah Pakpahan',
+    vendorCompany: 'CV Harmoni Jaya',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 3789012
+  }
+]

src/data/dummy/purchase-quote.ts

@@ -0,0 +1,224 @@
+import { PurchaseQuoteType } from '@/types/apps/purchaseQuoteTypes'
+
+export const purchaseQuoteData: PurchaseQuoteType[] = [
+  {
+    id: 1,
+    number: 'PQ-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-PQ-001',
+    date: '2025-09-01',
+    dueDate: '2025-09-10',
+    status: 'Open',
+    total: 4500000
+  },
+  {
+    id: 2,
+    number: 'PQ-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-PQ-002',
+    date: '2025-09-02',
+    dueDate: '2025-09-12',
+    status: 'Selesai',
+    total: 7200000
+  },
+  {
+    id: 3,
+    number: 'PQ-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-PQ-003',
+    date: '2025-09-03',
+    dueDate: '2025-09-13',
+    status: 'Dipesan Sebagai',
+    total: 3100000
+  },
+  {
+    id: 4,
+    number: 'PQ-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-PQ-004',
+    date: '2025-09-04',
+    dueDate: '2025-09-15',
+    status: 'Open',
+    total: 5800000
+  },
+  {
+    id: 5,
+    number: 'PQ-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-PQ-005',
+    date: '2025-09-05',
+    dueDate: '2025-09-16',
+    status: 'Selesai',
+    total: 8000000
+  },
+  {
+    id: 6,
+    number: 'PQ-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-PQ-006',
+    date: '2025-09-06',
+    dueDate: '2025-09-17',
+    status: 'Dipesan Sebagai',
+    total: 2600000
+  },
+  {
+    id: 7,
+    number: 'PQ-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-PQ-007',
+    date: '2025-09-07',
+    dueDate: '2025-09-18',
+    status: 'Open',
+    total: 9300000
+  },
+  {
+    id: 8,
+    number: 'PQ-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-PQ-008',
+    date: '2025-09-08',
+    dueDate: '2025-09-19',
+    status: 'Selesai',
+    total: 4100000
+  },
+  {
+    id: 9,
+    number: 'PQ-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-PQ-009',
+    date: '2025-09-09',
+    dueDate: '2025-09-20',
+    status: 'Dipesan Sebagai',
+    total: 6900000
+  },
+  {
+    id: 10,
+    number: 'PQ-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-PQ-010',
+    date: '2025-09-10',
+    dueDate: '2025-09-21',
+    status: 'Open',
+    total: 5500000
+  },
+  {
+    id: 11,
+    number: 'PQ-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-PQ-011',
+    date: '2025-09-11',
+    dueDate: '2025-09-22',
+    status: 'Selesai',
+    total: 12000000
+  },
+  {
+    id: 12,
+    number: 'PQ-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-PQ-012',
+    date: '2025-09-12',
+    dueDate: '2025-09-23',
+    status: 'Dipesan Sebagai',
+    total: 3300000
+  },
+  {
+    id: 13,
+    number: 'PQ-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-PQ-013',
+    date: '2025-09-13',
+    dueDate: '2025-09-24',
+    status: 'Open',
+    total: 7500000
+  },
+  {
+    id: 14,
+    number: 'PQ-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-PQ-014',
+    date: '2025-09-14',
+    dueDate: '2025-09-25',
+    status: 'Selesai',
+    total: 8600000
+  },
+  {
+    id: 15,
+    number: 'PQ-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-PQ-015',
+    date: '2025-09-15',
+    dueDate: '2025-09-26',
+    status: 'Dipesan Sebagai',
+    total: 2950000
+  },
+  {
+    id: 16,
+    number: 'PQ-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-PQ-016',
+    date: '2025-09-16',
+    dueDate: '2025-09-27',
+    status: 'Open',
+    total: 6800000
+  },
+  {
+    id: 17,
+    number: 'PQ-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-PQ-017',
+    date: '2025-09-17',
+    dueDate: '2025-09-28',
+    status: 'Selesai',
+    total: 4700000
+  },
+  {
+    id: 18,
+    number: 'PQ-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-PQ-018',
+    date: '2025-09-18',
+    dueDate: '2025-09-29',
+    status: 'Dipesan Sebagai',
+    total: 5300000
+  },
+  {
+    id: 19,
+    number: 'PQ-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-PQ-019',
+    date: '2025-09-19',
+    dueDate: '2025-09-30',
+    status: 'Open',
+    total: 9500000
+  },
+  {
+    id: 20,
+    number: 'PQ-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-PQ-020',
+    date: '2025-09-20',
+    dueDate: '2025-10-01',
+    status: 'Selesai',
+    total: 4200000
+  }
+]

src/data/dummy/sales.ts

@@ -0,0 +1,873 @@
+import { SalesBillType, SalesDeliveryType, SalesOrderType, SalesQuoteType } from '@/types/apps/salesTypes'
+
+export const salesBillData: SalesBillType[] = [
+  {
+    id: 1,
+    number: 'INV/001',
+    customerName: 'Andi Wijaya',
+    customerCompany: 'PT Nusantara Abadi',
+    reference: 'REF-SB-001',
+    date: '2025-09-01',
+    dueDate: '2025-09-15',
+    status: 'Belum Dibayar',
+    remainingBill: 5000000,
+    total: 5000000
+  },
+  {
+    id: 2,
+    number: 'INV/002',
+    customerName: 'Siti Rahma',
+    customerCompany: 'CV Cahaya Abadi',
+    reference: 'REF-SB-002',
+    date: '2025-09-02',
+    dueDate: '2025-09-16',
+    status: 'Dibayar Sebagian',
+    remainingBill: 2000000,
+    total: 8000000
+  },
+  {
+    id: 3,
+    number: 'INV/003',
+    customerName: 'Budi Santoso',
+    customerCompany: 'UD Sejahtera',
+    reference: 'REF-SB-003',
+    date: '2025-09-03',
+    dueDate: '2025-09-17',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 3500000
+  },
+  {
+    id: 4,
+    number: 'INV/004',
+    customerName: 'Rina Kartika',
+    customerCompany: 'PT Mitra Jaya',
+    reference: 'REF-SB-004',
+    date: '2025-09-04',
+    dueDate: '2025-09-18',
+    status: 'Void',
+    remainingBill: 0,
+    total: 4200000
+  },
+  {
+    id: 5,
+    number: 'INV/005',
+    customerName: 'Agus Salim',
+    customerCompany: 'CV Bumi Persada',
+    reference: 'REF-SB-005',
+    date: '2025-09-05',
+    dueDate: '2025-09-19',
+    status: 'Retur',
+    remainingBill: 0,
+    total: 6100000
+  },
+  {
+    id: 6,
+    number: 'INV/006',
+    customerName: 'Maya Lestari',
+    customerCompany: 'PT Tunas Baru',
+    reference: 'REF-SB-006',
+    date: '2025-09-06',
+    dueDate: '2025-09-20',
+    status: 'Belum Dibayar',
+    remainingBill: 9000000,
+    total: 9000000
+  },
+  {
+    id: 7,
+    number: 'INV/007',
+    customerName: 'Hendra Gunawan',
+    customerCompany: 'UD Prima Sentosa',
+    reference: 'REF-SB-007',
+    date: '2025-09-07',
+    dueDate: '2025-09-21',
+    status: 'Dibayar Sebagian',
+    remainingBill: 1500000,
+    total: 7500000
+  },
+  {
+    id: 8,
+    number: 'INV/008',
+    customerName: 'Dewi Anggraini',
+    customerCompany: 'CV Inti Mandiri',
+    reference: 'REF-SB-008',
+    date: '2025-09-08',
+    dueDate: '2025-09-22',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 4500000
+  },
+  {
+    id: 9,
+    number: 'INV/009',
+    customerName: 'Yusuf Arifin',
+    customerCompany: 'PT Surya Kencana',
+    reference: 'REF-SB-009',
+    date: '2025-09-09',
+    dueDate: '2025-09-23',
+    status: 'Void',
+    remainingBill: 0,
+    total: 5000000
+  },
+  {
+    id: 10,
+    number: 'INV/010',
+    customerName: 'Nurhayati',
+    customerCompany: 'UD Cahaya Mulia',
+    reference: 'REF-SB-010',
+    date: '2025-09-10',
+    dueDate: '2025-09-24',
+    status: 'Retur',
+    remainingBill: 0,
+    total: 3000000
+  },
+  {
+    id: 11,
+    number: 'INV/011',
+    customerName: 'Fajar Hidayat',
+    customerCompany: 'PT Bina Karya',
+    reference: 'REF-SB-011',
+    date: '2025-09-11',
+    dueDate: '2025-09-25',
+    status: 'Belum Dibayar',
+    remainingBill: 6000000,
+    total: 6000000
+  },
+  {
+    id: 12,
+    number: 'INV/012',
+    customerName: 'Ratna Sari',
+    customerCompany: 'CV Mega Utama',
+    reference: 'REF-SB-012',
+    date: '2025-09-12',
+    dueDate: '2025-09-26',
+    status: 'Dibayar Sebagian',
+    remainingBill: 2500000,
+    total: 10000000
+  },
+  {
+    id: 13,
+    number: 'INV/013',
+    customerName: 'Tono Prasetyo',
+    customerCompany: 'UD Karya Indah',
+    reference: 'REF-SB-013',
+    date: '2025-09-13',
+    dueDate: '2025-09-27',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 7000000
+  },
+  {
+    id: 14,
+    number: 'INV/014',
+    customerName: 'Lina Marlina',
+    customerCompany: 'PT Harmoni Sejati',
+    reference: 'REF-SB-014',
+    date: '2025-09-14',
+    dueDate: '2025-09-28',
+    status: 'Void',
+    remainingBill: 0,
+    total: 3200000
+  },
+  {
+    id: 15,
+    number: 'INV/015',
+    customerName: 'Arman Saputra',
+    customerCompany: 'CV Sentra Niaga',
+    reference: 'REF-SB-015',
+    date: '2025-09-15',
+    dueDate: '2025-09-29',
+    status: 'Retur',
+    remainingBill: 0,
+    total: 5400000
+  },
+  {
+    id: 16,
+    number: 'INV/016',
+    customerName: 'Indah Permata',
+    customerCompany: 'PT Citra Abadi',
+    reference: 'REF-SB-016',
+    date: '2025-09-16',
+    dueDate: '2025-09-30',
+    status: 'Belum Dibayar',
+    remainingBill: 8000000,
+    total: 8000000
+  },
+  {
+    id: 17,
+    number: 'INV/017',
+    customerName: 'Adi Putra',
+    customerCompany: 'UD Makmur Bersama',
+    reference: 'REF-SB-017',
+    date: '2025-09-17',
+    dueDate: '2025-10-01',
+    status: 'Dibayar Sebagian',
+    remainingBill: 1200000,
+    total: 6200000
+  },
+  {
+    id: 18,
+    number: 'INV/018',
+    customerName: 'Sri Wahyuni',
+    customerCompany: 'CV Bintang Terang',
+    reference: 'REF-SB-018',
+    date: '2025-09-18',
+    dueDate: '2025-10-02',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 9200000
+  },
+  {
+    id: 19,
+    number: 'INV/019',
+    customerName: 'Eko Prabowo',
+    customerCompany: 'PT Mandiri Jaya',
+    reference: 'REF-SB-019',
+    date: '2025-09-19',
+    dueDate: '2025-10-03',
+    status: 'Void',
+    remainingBill: 0,
+    total: 2500000
+  },
+  {
+    id: 20,
+    number: 'INV/020',
+    customerName: 'Novi Astuti',
+    customerCompany: 'UD Sinar Harapan',
+    reference: 'REF-SB-020',
+    date: '2025-09-20',
+    dueDate: '2025-10-04',
+    status: 'Retur',
+    remainingBill: 0,
+    total: 4800000
+  }
+]
+
+export const salesDeliveryData: SalesDeliveryType[] = [
+  {
+    id: 1,
+    number: 'INV-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-INV-001',
+    date: '2025-09-01',
+    status: 'Open'
+  },
+  {
+    id: 2,
+    number: 'INV-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-INV-002',
+    date: '2025-09-02',
+    status: 'Selesai'
+  },
+  {
+    id: 3,
+    number: 'INV-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-INV-003',
+    date: '2025-09-03',
+    status: 'Open'
+  },
+  {
+    id: 4,
+    number: 'INV-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-INV-004',
+    date: '2025-09-04',
+    status: 'Selesai'
+  },
+  {
+    id: 5,
+    number: 'INV-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-INV-005',
+    date: '2025-09-05',
+    status: 'Open'
+  },
+  {
+    id: 6,
+    number: 'INV-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-INV-006',
+    date: '2025-09-06',
+    status: 'Selesai'
+  },
+  {
+    id: 7,
+    number: 'INV-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-INV-007',
+    date: '2025-09-07',
+    status: 'Open'
+  },
+  {
+    id: 8,
+    number: 'INV-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-INV-008',
+    date: '2025-09-08',
+    status: 'Selesai'
+  },
+  {
+    id: 9,
+    number: 'INV-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-INV-009',
+    date: '2025-09-09',
+    status: 'Open'
+  },
+  {
+    id: 10,
+    number: 'INV-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-INV-010',
+    date: '2025-09-10',
+    status: 'Selesai'
+  },
+  {
+    id: 11,
+    number: 'INV-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-INV-011',
+    date: '2025-09-11',
+    status: 'Open'
+  },
+  {
+    id: 12,
+    number: 'INV-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-INV-012',
+    date: '2025-09-12',
+    status: 'Selesai'
+  },
+  {
+    id: 13,
+    number: 'INV-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-INV-013',
+    date: '2025-09-13',
+    status: 'Open'
+  },
+  {
+    id: 14,
+    number: 'INV-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-INV-014',
+    date: '2025-09-14',
+    status: 'Selesai'
+  },
+  {
+    id: 15,
+    number: 'INV-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-INV-015',
+    date: '2025-09-15',
+    status: 'Open'
+  },
+  {
+    id: 16,
+    number: 'INV-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-INV-016',
+    date: '2025-09-16',
+    status: 'Selesai'
+  },
+  {
+    id: 17,
+    number: 'INV-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-INV-017',
+    date: '2025-09-17',
+    status: 'Open'
+  },
+  {
+    id: 18,
+    number: 'INV-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-INV-018',
+    date: '2025-09-18',
+    status: 'Selesai'
+  },
+  {
+    id: 19,
+    number: 'INV-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-INV-019',
+    date: '2025-09-19',
+    status: 'Open'
+  },
+  {
+    id: 20,
+    number: 'INV-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-INV-020',
+    date: '2025-09-20',
+    status: 'Selesai'
+  }
+]
+
+export const salesOrdersData: SalesOrderType[] = [
+  {
+    id: 1,
+    number: 'PO/00040',
+    vendorName: 'Kairav Wijaya Nababan',
+    vendorCompany: 'Yayasan Haryanto Tbk',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Disetujui',
+    total: 2037170
+  },
+  {
+    id: 2,
+    number: 'PO/00041',
+    vendorName: 'Sari Melani Hutapea',
+    vendorCompany: 'PT Santoso Jaya',
+    reference: 'REF-2025-001',
+    date: '03/09/2025',
+    dueDate: '17/09/2025',
+    status: 'Draft',
+    total: 1875500
+  },
+  {
+    id: 3,
+    number: 'PO/00042',
+    vendorName: 'Budi Prasetyo Manullang',
+    vendorCompany: 'CV Wijaya Makmur',
+    reference: 'REF-2025-002',
+    date: '07/09/2025',
+    dueDate: '21/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 3250750
+  },
+  {
+    id: 4,
+    number: 'PO/00043',
+    vendorName: 'Maya Sari Lumban Gaol',
+    vendorCompany: 'PT Indah Permata',
+    reference: '',
+    date: '02/09/2025',
+    dueDate: '16/09/2025',
+    status: 'Selesai',
+    total: 980250
+  },
+  {
+    id: 5,
+    number: 'PO/00044',
+    vendorName: 'Rahman Hakim Siahaan',
+    vendorCompany: 'Toko Bahagia Sejahtera',
+    reference: 'REF-2025-003',
+    date: '08/09/2025',
+    dueDate: '22/09/2025',
+    status: 'Draft',
+    total: 4125890
+  },
+  {
+    id: 6,
+    number: 'PO/00045',
+    vendorName: 'Dewi Anggraini Panjaitan',
+    vendorCompany: 'PT Maju Bersama',
+    reference: 'REF-2025-004',
+    date: '01/09/2025',
+    dueDate: '15/09/2025',
+    status: 'Selesai',
+    total: 2678300
+  },
+  {
+    id: 7,
+    number: 'PO/00046',
+    vendorName: 'Agung Wijaya Simbolon',
+    vendorCompany: 'CV Karya Mandiri',
+    reference: '',
+    date: '06/09/2025',
+    dueDate: '20/09/2025',
+    status: 'Disetujui',
+    total: 1456780
+  },
+  {
+    id: 8,
+    number: 'PO/00047',
+    vendorName: 'Fitri Handayani Sitorus',
+    vendorCompany: 'PT Global Nusantara',
+    reference: 'REF-2025-005',
+    date: '04/09/2025',
+    dueDate: '18/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 5892450
+  },
+  {
+    id: 9,
+    number: 'PO/00048',
+    vendorName: 'Andi Setiawan Tampubolon',
+    vendorCompany: 'Yayasan Pembangunan Tbk',
+    reference: 'REF-2025-006',
+    date: '09/09/2025',
+    dueDate: '23/09/2025',
+    status: 'Draft',
+    total: 3567120
+  },
+  {
+    id: 10,
+    number: 'PO/00049',
+    vendorName: 'Rina Maharani Hutasoit',
+    vendorCompany: 'PT Sejahtera Abadi',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Disetujui',
+    total: 2234680
+  },
+  {
+    id: 11,
+    number: 'PO/00050',
+    vendorName: 'Joko Santoso Nainggolan',
+    vendorCompany: 'CV Berkah Jaya',
+    reference: 'REF-2025-007',
+    date: '03/09/2025',
+    dueDate: '17/09/2025',
+    status: 'Selesai',
+    total: 1789560
+  },
+  {
+    id: 12,
+    number: 'PO/00051',
+    vendorName: 'Linda Safitri Simanjuntak',
+    vendorCompany: 'PT Harapan Bangsa',
+    reference: 'REF-2025-008',
+    date: '07/09/2025',
+    dueDate: '21/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 4321870
+  },
+  {
+    id: 13,
+    number: 'PO/00052',
+    vendorName: 'Irfan Maulana Pasaribu',
+    vendorCompany: 'CV Sumber Rejeki',
+    reference: 'REF-2025-009',
+    date: '10/09/2025',
+    dueDate: '24/09/2025',
+    status: 'Draft',
+    total: 2567890
+  },
+  {
+    id: 14,
+    number: 'PO/00053',
+    vendorName: 'Siska Permata Sinaga',
+    vendorCompany: 'PT Mitra Sukses',
+    reference: '',
+    date: '11/09/2025',
+    dueDate: '25/09/2025',
+    status: 'Disetujui',
+    total: 3456780
+  },
+  {
+    id: 15,
+    number: 'PO/00054',
+    vendorName: 'Rizky Aditya Siregar',
+    vendorCompany: 'Toko Aman Sentosa',
+    reference: 'REF-2025-010',
+    date: '08/09/2025',
+    dueDate: '22/09/2025',
+    status: 'Selesai',
+    total: 1234567
+  },
+  {
+    id: 16,
+    number: 'PO/00055',
+    vendorName: 'Nina Sari Hutabarat',
+    vendorCompany: 'PT Cahaya Terang',
+    reference: 'REF-2025-011',
+    date: '12/09/2025',
+    dueDate: '26/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 5678900
+  },
+  {
+    id: 17,
+    number: 'PO/00056',
+    vendorName: 'Doni Prasetya Situmorang',
+    vendorCompany: 'CV Barokah Makmur',
+    reference: '',
+    date: '09/09/2025',
+    dueDate: '23/09/2025',
+    status: 'Draft',
+    total: 987654
+  },
+  {
+    id: 18,
+    number: 'PO/00057',
+    vendorName: 'Anita Dewi Marpaung',
+    vendorCompany: 'Yayasan Karya Bhakti',
+    reference: 'REF-2025-012',
+    date: '06/09/2025',
+    dueDate: '20/09/2025',
+    status: 'Disetujui',
+    total: 4567123
+  },
+  {
+    id: 19,
+    number: 'PO/00058',
+    vendorName: 'Tommy Wijaya Samosir',
+    vendorCompany: 'PT Bintang Timur',
+    reference: 'REF-2025-013',
+    date: '13/09/2025',
+    dueDate: '27/09/2025',
+    status: 'Selesai',
+    total: 2345678
+  },
+  {
+    id: 20,
+    number: 'PO/00059',
+    vendorName: 'Lestari Indah Pakpahan',
+    vendorCompany: 'CV Harmoni Jaya',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 3789012
+  }
+]
+
+export const salesQuoteData: SalesQuoteType[] = [
+  {
+    id: 1,
+    number: 'PQ-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-PQ-001',
+    date: '2025-09-01',
+    dueDate: '2025-09-10',
+    status: 'Open',
+    total: 4500000
+  },
+  {
+    id: 2,
+    number: 'PQ-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-PQ-002',
+    date: '2025-09-02',
+    dueDate: '2025-09-12',
+    status: 'Selesai',
+    total: 7200000
+  },
+  {
+    id: 3,
+    number: 'PQ-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-PQ-003',
+    date: '2025-09-03',
+    dueDate: '2025-09-13',
+    status: 'Dipesan Sebagai',
+    total: 3100000
+  },
+  {
+    id: 4,
+    number: 'PQ-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-PQ-004',
+    date: '2025-09-04',
+    dueDate: '2025-09-15',
+    status: 'Open',
+    total: 5800000
+  },
+  {
+    id: 5,
+    number: 'PQ-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-PQ-005',
+    date: '2025-09-05',
+    dueDate: '2025-09-16',
+    status: 'Selesai',
+    total: 8000000
+  },
+  {
+    id: 6,
+    number: 'PQ-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-PQ-006',
+    date: '2025-09-06',
+    dueDate: '2025-09-17',
+    status: 'Dipesan Sebagai',
+    total: 2600000
+  },
+  {
+    id: 7,
+    number: 'PQ-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-PQ-007',
+    date: '2025-09-07',
+    dueDate: '2025-09-18',
+    status: 'Open',
+    total: 9300000
+  },
+  {
+    id: 8,
+    number: 'PQ-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-PQ-008',
+    date: '2025-09-08',
+    dueDate: '2025-09-19',
+    status: 'Selesai',
+    total: 4100000
+  },
+  {
+    id: 9,
+    number: 'PQ-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-PQ-009',
+    date: '2025-09-09',
+    dueDate: '2025-09-20',
+    status: 'Dipesan Sebagai',
+    total: 6900000
+  },
+  {
+    id: 10,
+    number: 'PQ-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-PQ-010',
+    date: '2025-09-10',
+    dueDate: '2025-09-21',
+    status: 'Open',
+    total: 5500000
+  },
+  {
+    id: 11,
+    number: 'PQ-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-PQ-011',
+    date: '2025-09-11',
+    dueDate: '2025-09-22',
+    status: 'Selesai',
+    total: 12000000
+  },
+  {
+    id: 12,
+    number: 'PQ-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-PQ-012',
+    date: '2025-09-12',
+    dueDate: '2025-09-23',
+    status: 'Dipesan Sebagai',
+    total: 3300000
+  },
+  {
+    id: 13,
+    number: 'PQ-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-PQ-013',
+    date: '2025-09-13',
+    dueDate: '2025-09-24',
+    status: 'Open',
+    total: 7500000
+  },
+  {
+    id: 14,
+    number: 'PQ-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-PQ-014',
+    date: '2025-09-14',
+    dueDate: '2025-09-25',
+    status: 'Selesai',
+    total: 8600000
+  },
+  {
+    id: 15,
+    number: 'PQ-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-PQ-015',
+    date: '2025-09-15',
+    dueDate: '2025-09-26',
+    status: 'Dipesan Sebagai',
+    total: 2950000
+  },
+  {
+    id: 16,
+    number: 'PQ-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-PQ-016',
+    date: '2025-09-16',
+    dueDate: '2025-09-27',
+    status: 'Open',
+    total: 6800000
+  },
+  {
+    id: 17,
+    number: 'PQ-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-PQ-017',
+    date: '2025-09-17',
+    dueDate: '2025-09-28',
+    status: 'Selesai',
+    total: 4700000
+  },
+  {
+    id: 18,
+    number: 'PQ-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-PQ-018',
+    date: '2025-09-18',
+    dueDate: '2025-09-29',
+    status: 'Dipesan Sebagai',
+    total: 5300000
+  },
+  {
+    id: 19,
+    number: 'PQ-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-PQ-019',
+    date: '2025-09-19',
+    dueDate: '2025-09-30',
+    status: 'Open',
+    total: 9500000
+  },
+  {
+    id: 20,
+    number: 'PQ-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-PQ-020',
+    date: '2025-09-20',
+    dueDate: '2025-10-01',
+    status: 'Selesai',
+    total: 4200000
+  }
+]

src/data/dummy/vendor.ts

@@ -0,0 +1,484 @@
+import { VendorDebsPayedType, VendorTransactionType, VendorType } from '@/types/apps/vendorTypes'
+
+export const vendorDummyData: VendorType[] = [
+  {
+    id: 1,
+    photo: '',
+    name: 'Budi Santoso',
+    company: 'PT Maju Bersama Sejahtera',
+    email: 'budi.santoso@majubersama.co.id',
+    telephone: '+62 21 5551234',
+    youPayable: 25500000,
+    theyPayable: 12300000
+  },
+  {
+    id: 2,
+    photo: '',
+    name: 'Siti Nurhaliza',
+    company: 'CV Berkah Mandiri',
+    email: 'siti.nurhaliza@berkahmandiri.com',
+    telephone: '+62 22 8887654',
+    youPayable: 18750000,
+    theyPayable: 8950000
+  },
+  {
+    id: 3,
+    photo: '',
+    name: 'Ahmad Wijaya',
+    company: 'PT Teknologi Nusantara',
+    email: 'ahmad.wijaya@teknusantara.co.id',
+    telephone: '+62 24 3332211',
+    youPayable: 42100000,
+    theyPayable: 15600000
+  },
+  {
+    id: 4,
+    photo: '',
+    name: 'Dewi Sartika',
+    company: 'UD Sumber Rejeki',
+    email: 'dewi.sartika@sumberrejeki.net',
+    telephone: '+62 31 4445566',
+    youPayable: 9800000,
+    theyPayable: 22100000
+  },
+  {
+    id: 5,
+    photo: '',
+    name: 'Rudi Hermawan',
+    company: 'PT Indah Karya Persada',
+    email: 'rudi.hermawan@indahkarya.co.id',
+    telephone: '+62 274 7778899',
+    youPayable: 33250000,
+    theyPayable: 5400000
+  },
+  {
+    id: 6,
+    photo: '',
+    name: 'Maya Sari',
+    company: 'CV Harapan Jaya',
+    email: 'maya.sari@harapanjaya.com',
+    telephone: '+62 261 1112233',
+    youPayable: 16900000,
+    theyPayable: 28750000
+  },
+  {
+    id: 7,
+    photo: '',
+    name: 'Andi Prasetyo',
+    company: 'PT Cipta Mandiri Utama',
+    email: 'andi.prasetyo@ciptamandiri.co.id',
+    telephone: '+62 411 5556677',
+    youPayable: 21400000,
+    theyPayable: 11850000
+  },
+  {
+    id: 8,
+    photo: '',
+    name: 'Fitri Ramadhani',
+    company: 'UD Barokah Sukses',
+    email: 'fitri.ramadhani@barokahsukses.net',
+    telephone: '+62 751 9998877',
+    youPayable: 12650000,
+    theyPayable: 19300000
+  },
+  {
+    id: 9,
+    photo: '',
+    name: 'Agus Setiawan',
+    company: 'PT Nusantara Prima',
+    email: 'agus.setiawan@nusantaraprima.co.id',
+    telephone: '+62 541 3334455',
+    youPayable: 38800000,
+    theyPayable: 7200000
+  },
+  {
+    id: 10,
+    photo: '',
+    name: 'Rina Sulastri',
+    company: 'CV Mitra Sejati',
+    email: 'rina.sulastri@mitrasejati.com',
+    telephone: '+62 778 6667788',
+    youPayable: 14300000,
+    theyPayable: 24950000
+  },
+  {
+    id: 11,
+    photo: '',
+    name: 'Bambang Kurniawan',
+    company: 'PT Harmoni Bersama',
+    email: 'bambang.kurniawan@harmonibersama.co.id',
+    telephone: '+62 21 7779900',
+    youPayable: 29150000,
+    theyPayable: 13750000
+  },
+  {
+    id: 12,
+    photo: '',
+    name: 'Indah Permatasari',
+    company: 'UD Cahaya Abadi',
+    email: 'indah.permatasari@cahayaabadi.net',
+    telephone: '+62 361 2223344',
+    youPayable: 8900000,
+    theyPayable: 31200000
+  },
+  {
+    id: 13,
+    photo: '',
+    name: 'Dodi Supriadi',
+    company: 'PT Karya Gemilang',
+    email: 'dodi.supriadi@karyagemilang.co.id',
+    telephone: '+62 721 8889911',
+    youPayable: 36700000,
+    theyPayable: 9100000
+  },
+  {
+    id: 14,
+    photo: '',
+    name: 'Lestari Wulandari',
+    company: 'CV Anugrah Sentosa',
+    email: 'lestari.wulandari@anugrahsentosa.com',
+    telephone: '+62 741 4445566',
+    youPayable: 19850000,
+    theyPayable: 16400000
+  },
+  {
+    id: 15,
+    photo: '',
+    name: 'Hendra Gunawan',
+    company: 'PT Surya Mandala',
+    email: 'hendra.gunawan@suryamandala.co.id',
+    telephone: '+62 511 7778800',
+    youPayable: 27300000,
+    theyPayable: 21650000
+  },
+  {
+    id: 16,
+    photo: '',
+    name: 'Nurul Hidayah',
+    company: 'UD Rezeki Barokah',
+    email: 'nurul.hidayah@rezekibarokah.net',
+    telephone: '+62 431 1112200',
+    youPayable: 15200000,
+    theyPayable: 26800000
+  },
+  {
+    id: 17,
+    photo: '',
+    name: 'Teguh Prasetyo',
+    company: 'PT Dinamika Persada',
+    email: 'teguh.prasetyo@dinamikapersada.co.id',
+    telephone: '+62 62 5556600',
+    youPayable: 32900000,
+    theyPayable: 12150000
+  },
+  {
+    id: 18,
+    photo: '',
+    name: 'Sri Mulyani',
+    company: 'CV Berkah Mulia',
+    email: 'sri.mulyani@berkahmulia.com',
+    telephone: '+62 771 3337799',
+    youPayable: 11700000,
+    theyPayable: 29400000
+  },
+  {
+    id: 19,
+    photo: '',
+    name: 'Joko Widodo',
+    company: 'PT Makmur Sejahtera',
+    email: 'joko.widodo@makmursejahtera.co.id',
+    telephone: '+62 341 8882211',
+    youPayable: 24800000,
+    theyPayable: 18350000
+  },
+  {
+    id: 20,
+    photo: '',
+    name: 'Ratna Sari',
+    company: 'UD Sari Indah',
+    email: 'ratna.sari@sariindah.net',
+    telephone: '+62 717 9990011',
+    youPayable: 17950000,
+    theyPayable: 23600000
+  }
+]
+
+// Dummy data untuk VendorDebsPayedType
+export const vendorDebsPayedData: VendorDebsPayedType[] = [
+  {
+    date: '2024-08-15',
+    transaction: 'Hutang ke PT Supplier Bahan Kimia',
+    reference: 'DEBT-001-2024',
+    total: 4500000
+  },
+  {
+    date: '2024-08-22',
+    transaction: 'Invoice Belum Dibayar #INV-2024-789',
+    reference: 'DEBT-002-2024',
+    total: 2750000
+  },
+  {
+    date: '2024-08-30',
+    transaction: 'Tagihan CV Mitra Sejahtera',
+    reference: 'DEBT-003-2024',
+    total: 1850000
+  },
+  {
+    date: '2024-09-05',
+    transaction: 'Hutang Pembelian Peralatan Kantor',
+    reference: 'DEBT-004-2024',
+    total: 3200000
+  },
+  {
+    date: '2024-09-08',
+    transaction: 'Tagihan Listrik & Utilities Bulan Lalu',
+    reference: 'DEBT-005-2024',
+    total: 950000
+  },
+  {
+    date: '2024-09-10',
+    transaction: 'Hutang ke PT Konstruksi Prima',
+    reference: 'DEBT-006-2024',
+    total: 12500000
+  },
+  {
+    date: '2024-09-12',
+    transaction: 'Invoice Jasa Konsultasi IT',
+    reference: 'DEBT-007-2024',
+    total: 6800000
+  },
+  {
+    date: '2024-09-15',
+    transaction: 'Tagihan Bahan Baku Produksi',
+    reference: 'DEBT-008-2024',
+    total: 8900000
+  },
+  {
+    date: '2024-09-18',
+    transaction: 'Hutang ke Supplier Packaging',
+    reference: 'DEBT-009-2024',
+    total: 2100000
+  },
+  {
+    date: '2024-09-20',
+    transaction: 'Invoice Maintenance Equipment',
+    reference: 'DEBT-010-2024',
+    total: 4300000
+  },
+  {
+    date: '2024-09-22',
+    transaction: 'Tagihan Jasa Logistik & Pengiriman',
+    reference: 'DEBT-011-2024',
+    total: 1650000
+  },
+  {
+    date: '2024-09-25',
+    transaction: 'Hutang Pembelian Software License',
+    reference: 'DEBT-012-2024',
+    total: 5400000
+  },
+  {
+    date: '2024-09-28',
+    transaction: 'Invoice Jasa Cleaning Service',
+    reference: 'DEBT-013-2024',
+    total: 750000
+  },
+  {
+    date: '2024-09-30',
+    transaction: 'Tagihan Sewa Gedung Bulan September',
+    reference: 'DEBT-014-2024',
+    total: 15000000
+  },
+  {
+    date: '2024-10-01',
+    transaction: 'Hutang ke CV Digital Marketing',
+    reference: 'DEBT-015-2024',
+    total: 3800000
+  }
+]
+
+export const vendorReceivablesData: VendorDebsPayedType[] = [
+  {
+    date: '2024-08-20',
+    transaction: 'Piutang dari PT Mitra Sejahtera Abadi',
+    reference: 'RCV-001-2024',
+    total: 5500000
+  },
+  {
+    date: '2024-08-25',
+    transaction: 'Invoice Jual Produk #INV-2024-456',
+    reference: 'RCV-002-2024',
+    total: 3250000
+  },
+  {
+    date: '2024-09-02',
+    transaction: 'Tagihan ke CV Berkah Mandiri',
+    reference: 'RCV-003-2024',
+    total: 2800000
+  },
+  {
+    date: '2024-09-05',
+    transaction: 'Piutang Penjualan Barang Jadi',
+    reference: 'RCV-004-2024',
+    total: 4200000
+  },
+  {
+    date: '2024-09-08',
+    transaction: 'Invoice Jasa Konsultasi',
+    reference: 'RCV-005-2024',
+    total: 1750000
+  },
+  {
+    date: '2024-09-10',
+    transaction: 'Tagihan ke PT Digital Solutions',
+    reference: 'RCV-006-2024',
+    total: 8900000
+  },
+  {
+    date: '2024-09-12',
+    transaction: 'Piutang dari Toko Elektronik Prima',
+    reference: 'RCV-007-2024',
+    total: 2450000
+  },
+  {
+    date: '2024-09-15',
+    transaction: 'Invoice Penjualan Software License',
+    reference: 'RCV-008-2024',
+    total: 12500000
+  },
+  {
+    date: '2024-09-18',
+    transaction: 'Tagihan Jasa Maintenance Equipment',
+    reference: 'RCV-009-2024',
+    total: 3600000
+  },
+  {
+    date: '2024-09-20',
+    transaction: 'Piutang dari CV Kreatif Media',
+    reference: 'RCV-010-2024',
+    total: 1950000
+  },
+  {
+    date: '2024-09-22',
+    transaction: 'Invoice Jual Material Konstruksi',
+    reference: 'RCV-011-2024',
+    total: 7200000
+  },
+  {
+    date: '2024-09-25',
+    transaction: 'Tagihan Jasa Pelatihan IT',
+    reference: 'RCV-012-2024',
+    total: 4800000
+  },
+  {
+    date: '2024-09-28',
+    transaction: 'Piutang dari PT Logistik Nusantara',
+    reference: 'RCV-013-2024',
+    total: 5300000
+  },
+  {
+    date: '2024-09-30',
+    transaction: 'Invoice Penjualan Peralatan Kantor',
+    reference: 'RCV-014-2024',
+    total: 2100000
+  },
+  {
+    date: '2024-10-02',
+    transaction: 'Tagihan ke Supplier Packaging',
+    reference: 'RCV-015-2024',
+    total: 3850000
+  }
+]
+
+export const vendorTransactionData: VendorTransactionType[] = [
+  {
+    date: '2024-08-15',
+    transaction: 'Pembelian Bahan Baku Produksi',
+    none: 'PO-001-2024',
+    total: 4500000
+  },
+  {
+    date: '2024-08-18',
+    transaction: 'Pembayaran Invoice Supplier',
+    none: 'PAY-001-2024',
+    total: 2750000
+  },
+  {
+    date: '2024-08-22',
+    transaction: 'Penjualan Produk ke Klien',
+    none: 'INV-001-2024',
+    total: 6200000
+  },
+  {
+    date: '2024-08-25',
+    transaction: 'Pembelian Peralatan Kantor',
+    none: 'PO-002-2024',
+    total: 1850000
+  },
+  {
+    date: '2024-08-28',
+    transaction: 'Pembayaran Jasa Konsultasi',
+    none: 'PAY-002-2024',
+    total: 3200000
+  },
+  {
+    date: '2024-09-02',
+    transaction: 'Penjualan Software License',
+    none: 'INV-002-2024',
+    total: 8900000
+  },
+  {
+    date: '2024-09-05',
+    transaction: 'Pembelian Material Konstruksi',
+    none: 'PO-003-2024',
+    total: 12500000
+  },
+  {
+    date: '2024-09-08',
+    transaction: 'Pembayaran Maintenance Equipment',
+    none: 'PAY-003-2024',
+    total: 2450000
+  },
+  {
+    date: '2024-09-12',
+    transaction: 'Penjualan Jasa Pelatihan',
+    none: 'INV-003-2024',
+    total: 4800000
+  },
+  {
+    date: '2024-09-15',
+    transaction: 'Pembelian Bahan Kimia',
+    none: 'PO-004-2024',
+    total: 3600000
+  },
+  {
+    date: '2024-09-18',
+    transaction: 'Pembayaran Sewa Gedung',
+    none: 'PAY-004-2024',
+    total: 15000000
+  },
+  {
+    date: '2024-09-22',
+    transaction: 'Penjualan Peralatan Elektronik',
+    none: 'INV-004-2024',
+    total: 7200000
+  },
+  {
+    date: '2024-09-25',
+    transaction: 'Pembelian Packaging Materials',
+    none: 'PO-005-2024',
+    total: 1950000
+  },
+  {
+    date: '2024-09-28',
+    transaction: 'Pembayaran Jasa Logistik',
+    none: 'PAY-005-2024',
+    total: 2100000
+  },
+  {
+    date: '2024-10-01',
+    transaction: 'Penjualan Produk Digital',
+    none: 'INV-005-2024',
+    total: 5300000
+  }
+]

src/services/api.ts

@@ -33,6 +33,8 @@ api.interceptors.response.use(
     const currentPath = window.location.pathname
 
     if (status === 401 && !currentPath.endsWith('/login')) {
+      localStorage.removeItem('user')
+      localStorage.removeItem('authToken')
       window.location.href = '/login'
     }
 
@@ -47,4 +49,3 @@ api.interceptors.response.use(
     return Promise.reject(error)
   }
 )
-

src/types/apps/accountTypes.ts

@@ -0,0 +1,7 @@
+export type AccountType = {
+  id: number
+  code: string
+  name: string
+  category: string
+  balance: string
+}

src/types/apps/cashBankTypes.ts

@@ -0,0 +1,10 @@
+export type CashBankType = {
+  id: number
+  date: string
+  description: string
+  reference: string
+  accept: number
+  send: number
+  balance: number
+  status: string
+}

src/types/apps/expenseTypes.ts

@@ -0,0 +1,68 @@
+export type ExpenseType = {
+  id: number
+  date: string
+  number: string
+  reference: string
+  benefeciaryName: string
+  benefeciaryCompany: string
+  status: string
+  balanceDue: number
+  total: number
+}
+
+export interface ExpenseRecipient {
+  id: string
+  name: string
+}
+
+export interface ExpenseAccount {
+  id: string
+  name: string
+  code: string
+}
+
+export interface ExpenseTax {
+  id: string
+  name: string
+  rate: number
+}
+
+export interface ExpenseTag {
+  id: string
+  name: string
+  color: string
+}
+
+export interface ExpenseItem {
+  id: number
+  account: ExpenseAccount | null
+  description: string
+  tax: ExpenseTax | null
+  total: number
+}
+
+export interface ExpenseFormData {
+  // Header fields
+  paidFrom: string // "Dibayar Dari"
+  payLater: boolean // "Bayar Nanti" toggle
+  recipient: ExpenseRecipient | null // "Penerima"
+  transactionDate: string // "Tgl. Transaksi"
+
+  // Reference fields
+  number: string // "Nomor"
+  reference: string // "Referensi"
+  tag: ExpenseTag | null // "Tag"
+  includeTax: boolean // "Harga termasuk pajak"
+
+  // Expense items
+  expenseItems: ExpenseItem[]
+
+  // Totals
+  subtotal: number
+  total: number
+
+  // Optional sections
+  showMessage: boolean
+  showAttachment: boolean
+  message: string
+}

src/types/apps/fixedAssetTypes.ts

@@ -0,0 +1,8 @@
+export type FixedAssetType = {
+  id: number
+  assetName: string
+  puchaseBill: string // Code Purchase
+  reference: string
+  date: string
+  price: number
+}

src/types/apps/purchaseBillType.ts

@@ -0,0 +1,12 @@
+export type PurchaseBillType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  remainingBill: number
+  total: number
+}

src/types/apps/purchaseDeliveryTypes.ts

@@ -0,0 +1,9 @@
+export type PurchaseDeliveryType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  status: string
+}

src/types/apps/purchaseOrderTypes.ts

@@ -0,0 +1,66 @@
+export type PurchaseOrderType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  total: number
+}
+
+export interface IngredientItem {
+  id: number
+  ingredient: { label: string; value: string } | null
+  deskripsi: string
+  kuantitas: number
+  satuan: { label: string; value: string } | null
+  discount: string
+  harga: number
+  pajak: { label: string; value: string } | null
+  waste: { label: string; value: string } | null
+  total: number
+}
+
+export interface PurchaseOrderFormData {
+  vendor: { label: string; value: string } | null
+  nomor: string
+  tglTransaksi: string
+  tglJatuhTempo: string
+  referensi: string
+  termin: { label: string; value: string } | null
+  hargaTermasukPajak: boolean
+  showShippingInfo: boolean
+  tanggalPengiriman: string
+  ekspedisi: { label: string; value: string } | null
+  noResi: string
+  showPesan: boolean
+  showAttachment: boolean
+  showTambahDiskon: boolean
+  showBiayaPengiriman: boolean
+  showBiayaTransaksi: boolean
+  showUangMuka: boolean
+  pesan: string
+  ingredientItems: IngredientItem[]
+  transactionCosts?: TransactionCost[]
+  subtotal?: number
+  discountType?: 'percentage' | 'fixed'
+  downPaymentType?: 'percentage' | 'fixed'
+  discountValue?: string
+  shippingCost?: string
+  transactionCost?: string
+  downPayment?: string
+}
+
+export interface TransactionCost {
+  id: string
+  type: string
+  name: string
+  amount: string
+}
+
+export interface DropdownOption {
+  label: string
+  value: string
+}

src/types/apps/purchaseQuoteTypes.ts

@@ -0,0 +1,11 @@
+export type PurchaseQuoteType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  total: number
+}

src/types/apps/salesTypes.ts

@@ -0,0 +1,46 @@
+export type SalesBillType = {
+  id: number
+  number: string
+  customerName: string
+  customerCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  remainingBill: number
+  total: number
+}
+
+export type SalesDeliveryType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  status: string
+}
+
+export type SalesOrderType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  total: number
+}
+
+export type SalesQuoteType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  total: number
+}

src/types/apps/vendorTypes.ts

@@ -0,0 +1,23 @@
+export type VendorType = {
+  id: number
+  photo: string
+  name: string
+  company: string
+  email: string
+  telephone: string
+  youPayable: number
+  theyPayable: number
+}
+
+export type VendorDebsPayedType = {
+  date: string
+  transaction: string
+  reference: string
+  total: number
+}
+export type VendorTransactionType = {
+  date: string
+  transaction: string
+  none: string
+  total: number
+}

src/utils/getDictionary.ts

@@ -3,8 +3,7 @@ import type { Locale } from '@configs/i18n'
 
 const dictionaries = {
   en: () => import('@/data/dictionaries/en.json').then(module => module.default),
-  fr: () => import('@/data/dictionaries/fr.json').then(module => module.default),
-  ar: () => import('@/data/dictionaries/ar.json').then(module => module.default)
+  id: () => import('@/data/dictionaries/id.json').then(module => module.default)
 }
 
 export const getDictionary = async (locale: Locale) => dictionaries[locale]()

src/views/apps/account/AccountFormDrawer.tsx

@@ -0,0 +1,308 @@
+// React Imports
+import { useState, useEffect } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+
+// Account Type
+export type AccountType = {
+  id: number
+  code: string
+  name: string
+  category: string
+  balance: string
+}
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  accountData?: AccountType[]
+  setData: (data: AccountType[]) => void
+  editingAccount?: AccountType | null
+}
+
+type FormValidateType = {
+  name: string
+  code: string
+  category: string
+  parentAccount?: string
+}
+
+// Categories available for accounts
+const accountCategories = [
+  'Kas & Bank',
+  'Piutang',
+  'Persediaan',
+  'Aset Tetap',
+  'Hutang',
+  'Ekuitas',
+  'Pendapatan',
+  'Beban'
+]
+
+// Parent accounts (dummy data for dropdown)
+const parentAccounts = [
+  { id: 1, code: '1-10001', name: 'Kas' },
+  { id: 2, code: '1-10002', name: 'Bank BCA' },
+  { id: 3, code: '1-10003', name: 'Bank Mandiri' },
+  { id: 4, code: '1-10101', name: 'Piutang Usaha' },
+  { id: 5, code: '1-10201', name: 'Persediaan Barang' },
+  { id: 6, code: '2-20001', name: 'Hutang Usaha' },
+  { id: 7, code: '3-30001', name: 'Modal Pemilik' },
+  { id: 8, code: '4-40001', name: 'Penjualan' },
+  { id: 9, code: '5-50001', name: 'Beban Gaji' }
+]
+
+// Vars
+const initialData = {
+  name: '',
+  code: '',
+  category: '',
+  parentAccount: ''
+}
+
+const AccountFormDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, accountData, setData, editingAccount } = props
+
+  // Determine if we're editing
+  const isEdit = !!editingAccount
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: initialData
+  })
+
+  // Reset form when editingAccount changes or drawer opens
+  useEffect(() => {
+    if (open) {
+      if (editingAccount) {
+        // Populate form with existing data
+        resetForm({
+          name: editingAccount.name,
+          code: editingAccount.code,
+          category: editingAccount.category,
+          parentAccount: ''
+        })
+      } else {
+        // Reset to initial data for new account
+        resetForm(initialData)
+      }
+    }
+  }, [editingAccount, open, resetForm])
+
+  const onSubmit = (data: FormValidateType) => {
+    if (isEdit && editingAccount) {
+      // Update existing account
+      const updatedAccounts =
+        accountData?.map(account =>
+          account.id === editingAccount.id
+            ? {
+                ...account,
+                code: data.code,
+                name: data.name,
+                category: data.category
+              }
+            : account
+        ) || []
+
+      setData(updatedAccounts)
+    } else {
+      // Create new account
+      const newAccount: AccountType = {
+        id: accountData?.length ? Math.max(...accountData.map(a => a.id)) + 1 : 1,
+        code: data.code,
+        name: data.name,
+        category: data.category,
+        balance: '0'
+      }
+
+      setData([...(accountData ?? []), newAccount])
+    }
+
+    handleClose()
+    resetForm(initialData)
+  }
+
+  const handleReset = () => {
+    handleClose()
+    resetForm(initialData)
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 300, sm: 400 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>{isEdit ? 'Edit Akun' : 'Tambah Akun Baru'}</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='account-form' onSubmit={handleSubmit(data => onSubmit(data))}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Nama */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Nama <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='name'
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    placeholder='Nama'
+                    {...(errors.name && { error: true, helperText: 'Field ini wajib diisi.' })}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Kode */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Kode <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='code'
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    placeholder='Kode'
+                    {...(errors.code && { error: true, helperText: 'Field ini wajib diisi.' })}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Kategori */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Kategori <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='category'
+                control={control}
+                rules={{ required: true }}
+                render={({ field: { onChange, value, ...field } }) => (
+                  <CustomAutocomplete
+                    {...field}
+                    options={accountCategories}
+                    value={value || null}
+                    onChange={(_, newValue) => onChange(newValue || '')}
+                    renderInput={params => (
+                      <CustomTextField
+                        {...params}
+                        placeholder='Pilih kategori'
+                        {...(errors.category && { error: true, helperText: 'Field ini wajib diisi.' })}
+                      />
+                    )}
+                    isOptionEqualToValue={(option, value) => option === value}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Sub Akun dari */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Sub Akun dari
+              </Typography>
+              <Controller
+                name='parentAccount'
+                control={control}
+                render={({ field: { onChange, value, ...field } }) => (
+                  <CustomAutocomplete
+                    {...field}
+                    options={parentAccounts}
+                    value={parentAccounts.find(account => `${account.code} ${account.name}` === value) || null}
+                    onChange={(_, newValue) => onChange(newValue ? `${newValue.code} ${newValue.name}` : '')}
+                    getOptionLabel={option => `${option.code} ${option.name}`}
+                    renderInput={params => <CustomTextField {...params} placeholder='Pilih akun' />}
+                    isOptionEqualToValue={(option, value) =>
+                      `${option.code} ${option.name}` === `${value.code} ${value.name}`
+                    }
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='account-form'>
+            {isEdit ? 'Update' : 'Simpan'}
+          </Button>
+          <Button variant='tonal' color='error' onClick={() => handleReset()}>
+            Batal
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default AccountFormDrawer

src/views/apps/account/AccountListTable.tsx

@@ -0,0 +1,574 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import AccountFormDrawer from './AccountFormDrawer'
+
+// Account Type
+export type AccountType = {
+  id: number
+  code: string
+  name: string
+  category: string
+  balance: string
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type AccountTypeWithAction = AccountType & {
+  actions?: string
+}
+
+// Dummy Account Data
+export const accountsData: AccountType[] = [
+  {
+    id: 1,
+    code: '1-10001',
+    name: 'Kas',
+    category: 'Kas & Bank',
+    balance: '20000000'
+  },
+  {
+    id: 2,
+    code: '1-10002',
+    name: 'Bank BCA',
+    category: 'Kas & Bank',
+    balance: '150000000'
+  },
+  {
+    id: 3,
+    code: '1-10003',
+    name: 'Bank Mandiri',
+    category: 'Kas & Bank',
+    balance: '75000000'
+  },
+  {
+    id: 4,
+    code: '1-10101',
+    name: 'Piutang Usaha',
+    category: 'Piutang',
+    balance: '50000000'
+  },
+  {
+    id: 5,
+    code: '1-10102',
+    name: 'Piutang Karyawan',
+    category: 'Piutang',
+    balance: '5000000'
+  },
+  {
+    id: 6,
+    code: '1-10201',
+    name: 'Persediaan Barang',
+    category: 'Persediaan',
+    balance: '100000000'
+  },
+  {
+    id: 7,
+    code: '1-10301',
+    name: 'Peralatan Kantor',
+    category: 'Aset Tetap',
+    balance: '25000000'
+  },
+  {
+    id: 8,
+    code: '1-10302',
+    name: 'Kendaraan',
+    category: 'Aset Tetap',
+    balance: '200000000'
+  },
+  {
+    id: 9,
+    code: '2-20001',
+    name: 'Hutang Usaha',
+    category: 'Hutang',
+    balance: '-30000000'
+  },
+  {
+    id: 10,
+    code: '2-20002',
+    name: 'Hutang Gaji',
+    category: 'Hutang',
+    balance: '-15000000'
+  },
+  {
+    id: 11,
+    code: '3-30001',
+    name: 'Modal Pemilik',
+    category: 'Ekuitas',
+    balance: '500000000'
+  },
+  {
+    id: 12,
+    code: '4-40001',
+    name: 'Penjualan',
+    category: 'Pendapatan',
+    balance: '250000000'
+  },
+  {
+    id: 13,
+    code: '5-50001',
+    name: 'Beban Gaji',
+    category: 'Beban',
+    balance: '-80000000'
+  },
+  {
+    id: 14,
+    code: '5-50002',
+    name: 'Beban Listrik',
+    category: 'Beban',
+    balance: '-5000000'
+  },
+  {
+    id: 15,
+    code: '5-50003',
+    name: 'Beban Telepon',
+    category: 'Beban',
+    balance: '-2000000'
+  }
+]
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Category color mapping for Accounts
+const getCategoryColor = (category: string) => {
+  switch (category) {
+    case 'Kas & Bank':
+      return 'success'
+    case 'Piutang':
+      return 'info'
+    case 'Persediaan':
+      return 'warning'
+    case 'Aset Tetap':
+      return 'primary'
+    case 'Hutang':
+      return 'error'
+    case 'Ekuitas':
+      return 'secondary'
+    case 'Pendapatan':
+      return 'success'
+    case 'Beban':
+      return 'error'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: string) => {
+  const numAmount = parseInt(amount)
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(Math.abs(numAmount))
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<AccountTypeWithAction>()
+
+const AccountListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addAccountOpen, setAddAccountOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [accountId, setAccountId] = useState('')
+  const [search, setSearch] = useState('')
+  const [categoryFilter, setCategoryFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<AccountType[]>(accountsData)
+  const [data, setData] = useState<AccountType[]>(accountsData)
+  const [editingAccount, setEditingAccount] = useState<AccountType | null>(null)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Get unique categories for filter
+  const categories = useMemo(() => {
+    const uniqueCategories = [...new Set(data.map(account => account.category))]
+    return ['Semua', ...uniqueCategories]
+  }, [data])
+
+  // Filter data based on search and category
+  useEffect(() => {
+    let filtered = data
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        account =>
+          account.code.toLowerCase().includes(search.toLowerCase()) ||
+          account.name.toLowerCase().includes(search.toLowerCase()) ||
+          account.category.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by category
+    if (categoryFilter !== 'Semua') {
+      filtered = filtered.filter(account => account.category === categoryFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, categoryFilter, data])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  // Handle row click for edit
+  const handleRowClick = (account: AccountType, event: React.MouseEvent) => {
+    // Don't trigger row click if clicking on checkbox or link
+    const target = event.target as HTMLElement
+    if (target.closest('input[type="checkbox"]') || target.closest('a') || target.closest('button')) {
+      return
+    }
+
+    setEditingAccount(account)
+    setAddAccountOpen(true)
+  }
+
+  // Handle closing drawer and reset editing state
+  const handleCloseDrawer = () => {
+    setAddAccountOpen(false)
+    setEditingAccount(null)
+  }
+
+  const columns = useMemo<ColumnDef<AccountTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('code', {
+        header: 'Kode Akun',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.code}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('name', {
+        header: 'Nama Akun',
+        cell: ({ row }) => (
+          <Typography color='text.primary' className='font-medium'>
+            {row.original.name}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('category', {
+        header: 'Kategori',
+        cell: ({ row }) => (
+          <Chip
+            variant='tonal'
+            label={row.original.category}
+            size='small'
+            color={getCategoryColor(row.original.category) as any}
+            className='capitalize'
+          />
+        )
+      }),
+      columnHelper.accessor('balance', {
+        header: 'Saldo',
+        cell: ({ row }) => {
+          const balance = parseInt(row.original.balance)
+          return (
+            <Typography className='font-medium text-right text-primary'>
+              {balance < 0 ? '-' : ''}
+              {formatCurrency(row.original.balance)}
+            </Typography>
+          )
+        }
+      })
+    ],
+    [locale]
+  )
+
+  const table = useReactTable({
+    data: paginatedData as AccountType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Akun'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              onClick={() => {
+                setEditingAccount(null)
+                setAddAccountOpen(true)
+              }}
+            >
+              Tambah Akun
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr
+                      key={row.id}
+                      className={classnames({
+                        selected: row.getIsSelected(),
+                        'cursor-pointer hover:bg-gray-50': true
+                      })}
+                      onClick={e => handleRowClick(row.original, e)}
+                    >
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+      <AccountFormDrawer
+        open={addAccountOpen}
+        handleClose={handleCloseDrawer}
+        accountData={data}
+        setData={setData}
+        editingAccount={editingAccount}
+      />
+    </>
+  )
+}
+
+export default AccountListTable

src/views/apps/account/index.tsx

@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import AccountListTable from './AccountListTable'
+
+const AccountList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <AccountListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default AccountList

src/views/apps/cash-bank/CashBankCard.tsx

@@ -0,0 +1,265 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+import Link from 'next/link'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Types
+interface Balance {
+  amount: string | number
+  label: string
+}
+
+interface ChartData {
+  name: string
+  data: number[]
+}
+
+interface CashBankCardProps {
+  title: string
+  accountNumber: string
+  balances: Balance[]
+  chartData: ChartData[]
+  categories: string[]
+  buttonText?: string
+  buttonIcon?: string
+  href?: string
+  chartColor?: string
+  height?: number
+  currency?: 'IDR' | 'USD' | 'EUR'
+  showButton?: boolean
+  maxValue?: number
+  enableHover?: boolean
+}
+
+const CashBankCard = ({
+  title,
+  accountNumber,
+  balances,
+  chartData,
+  categories,
+  href,
+  chartColor = '#ff6b9d',
+  height = 300,
+  currency = 'IDR',
+  showButton = true,
+  maxValue,
+  enableHover = true
+}: CashBankCardProps) => {
+  // Vars
+  const divider = 'var(--mui-palette-divider)'
+  const disabledText = 'var(--mui-palette-text-disabled)'
+  const primaryText = 'var(--mui-palette-text-primary)'
+
+  // Auto calculate maxValue if not provided
+  const calculatedMaxValue = maxValue || Math.max(...chartData.flatMap(series => series.data)) * 1.2
+
+  // Currency formatter
+  const formatCurrency = (value: number) => {
+    const formatters = {
+      IDR: new Intl.NumberFormat('id-ID', {
+        style: 'currency',
+        currency: 'IDR',
+        minimumFractionDigits: 0
+      }),
+      USD: new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 0
+      }),
+      EUR: new Intl.NumberFormat('de-DE', {
+        style: 'currency',
+        currency: 'EUR',
+        minimumFractionDigits: 0
+      })
+    }
+    return formatters[currency].format(value)
+  }
+
+  // Format balance display
+  const formatBalance = (amount: string | number) => {
+    if (typeof amount === 'string') return amount
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  // Y-axis label formatter based on currency
+  const formatYAxisLabel = (val: number) => {
+    if (currency === 'IDR') {
+      return (val / 1000000).toFixed(0) + '.000.000'
+    }
+    return (val / 1000).toFixed(0) + 'K'
+  }
+
+  const options: ApexOptions = {
+    chart: {
+      height: height,
+      type: 'area',
+      parentHeightOffset: 0,
+      zoom: { enabled: false },
+      toolbar: { show: false }
+    },
+    colors: [chartColor],
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shade: 'light',
+        type: 'vertical',
+        shadeIntensity: 0.4,
+        gradientToColors: [chartColor],
+        inverseColors: false,
+        opacityFrom: 0.8,
+        opacityTo: 0.1,
+        stops: [0, 100]
+      }
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 3
+    },
+    dataLabels: { enabled: false },
+    grid: {
+      show: true,
+      borderColor: divider,
+      strokeDashArray: 3,
+      padding: {
+        top: -10,
+        bottom: -10,
+        left: 20,
+        right: 20
+      },
+      xaxis: {
+        lines: { show: true }
+      },
+      yaxis: {
+        lines: { show: true }
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val: number) {
+          return formatCurrency(val)
+        }
+      }
+    },
+    yaxis: {
+      min: 0,
+      max: calculatedMaxValue,
+      tickAmount: 7,
+      labels: {
+        style: {
+          colors: disabledText,
+          fontSize: '12px',
+          fontWeight: '400'
+        },
+        formatter: function (val: number) {
+          return formatYAxisLabel(val)
+        }
+      }
+    },
+    xaxis: {
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+      crosshairs: {
+        stroke: { color: divider }
+      },
+      labels: {
+        style: {
+          colors: disabledText,
+          fontSize: '12px',
+          fontWeight: '400'
+        }
+      },
+      categories: categories
+    },
+    legend: {
+      show: false
+    }
+  }
+
+  return (
+    <Card
+      sx={{
+        height: '100%',
+        transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+        '&:hover': enableHover
+          ? {
+              transform: 'translateY(-4px)',
+              boxShadow: '0 12px 35px rgba(0, 0, 0, 0.15)'
+            }
+          : {},
+        cursor: enableHover ? 'pointer' : 'default'
+      }}
+    >
+      <CardHeader
+        title={
+          <Box>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
+              <Box>
+                <Typography variant='h6' sx={{ fontWeight: 600, color: primaryText }}>
+                  {title}
+                </Typography>
+                <Typography variant='body2' sx={{ color: disabledText }}>
+                  {accountNumber}
+                </Typography>
+              </Box>
+              {showButton && (
+                <Button
+                  variant='contained'
+                  size='small'
+                  component={Link}
+                  href={href}
+                  className='bg-primary '
+                  sx={{
+                    textTransform: 'none',
+                    fontSize: '12px'
+                  }}
+                >
+                  <i className='tabler-wallet text-sm mr-2' /> Atur Akun
+                </Button>
+              )}
+            </Box>
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
+              {balances.map((balance, index) => (
+                <Box key={index}>
+                  <Typography variant='h4' sx={{ fontWeight: 700, color: primaryText }}>
+                    {formatBalance(balance.amount)}
+                  </Typography>
+                  <Typography variant='body2' sx={{ color: disabledText }}>
+                    {balance.label}
+                  </Typography>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        }
+        sx={{
+          pb: 0,
+          '& .MuiCardHeader-content': {
+            width: '100%'
+          }
+        }}
+      />
+      <CardContent sx={{ pt: 0 }}>
+        <AppReactApexCharts type='area' width='100%' height={height} options={options} series={chartData} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CashBankCard

src/views/apps/cash-bank/CashBankList.tsx

@@ -0,0 +1,355 @@
+'use client'
+
+import { useState, useMemo, useEffect } from 'react'
+import Grid from '@mui/material/Grid2'
+import TextField, { TextFieldProps } from '@mui/material/TextField'
+import InputAdornment from '@mui/material/InputAdornment'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import CashBankCard from './CashBankCard' // Adjust import path as needed
+import CustomTextField from '@/@core/components/mui/TextField'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
+import AccountFormDrawer, { AccountType } from '../account/AccountFormDrawer'
+import { accountsData } from '../account/AccountListTable'
+import { Button } from '@mui/material'
+
+// Types
+interface BankAccount {
+  id: string
+  title: string
+  accountNumber: string
+  balances: Array<{
+    amount: string | number
+    label: string
+  }>
+  chartData: Array<{
+    name: string
+    data: number[]
+  }>
+  categories: string[]
+  chartColor?: string
+  currency: 'IDR' | 'USD' | 'EUR'
+  accountType: 'giro' | 'savings' | 'investment' | 'credit' | 'cash'
+  bank: string
+  status: 'active' | 'inactive' | 'blocked'
+}
+
+// Dummy Data
+const dummyAccounts: BankAccount[] = [
+  {
+    id: '1',
+    title: 'Giro',
+    accountNumber: '1-10003',
+    balances: [
+      { amount: '7.313.321', label: 'Saldo di bank' },
+      { amount: '30.631.261', label: 'Saldo di kledo' }
+    ],
+    chartData: [
+      {
+        name: 'Saldo',
+        data: [
+          20000000, 21000000, 20500000, 20800000, 21500000, 22000000, 25000000, 26000000, 28000000, 29000000, 30000000,
+          31000000
+        ]
+      }
+    ],
+    categories: ['Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des', 'Jan', 'Feb', 'Mar'],
+    chartColor: '#ff6b9d',
+    currency: 'IDR',
+    accountType: 'giro',
+    bank: 'Bank Mandiri',
+    status: 'active'
+  },
+  {
+    id: '2',
+    title: 'Tabungan Premium',
+    accountNumber: 'SAV-001234',
+    balances: [
+      { amount: 15420000, label: 'Saldo Tersedia' },
+      { amount: 18750000, label: 'Total Saldo' }
+    ],
+    chartData: [
+      {
+        name: 'Balance',
+        data: [
+          12000000, 13500000, 14200000, 15000000, 15800000, 16200000, 17000000, 17500000, 18000000, 18200000, 18500000,
+          18750000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    chartColor: '#4285f4',
+    currency: 'IDR',
+    accountType: 'savings',
+    bank: 'Bank BCA',
+    status: 'active'
+  },
+  {
+    id: '3',
+    title: 'Investment Portfolio',
+    accountNumber: 'INV-789012',
+    balances: [
+      { amount: 125000, label: 'Portfolio Value' },
+      { amount: 8750, label: 'Total Gains' }
+    ],
+    chartData: [
+      {
+        name: 'Portfolio Value',
+        data: [110000, 115000, 112000, 118000, 122000, 119000, 125000, 128000, 126000, 130000, 127000, 125000]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    currency: 'USD',
+    accountType: 'investment',
+    bank: 'Charles Schwab',
+    status: 'active'
+  },
+  {
+    id: '4',
+    title: 'Kartu Kredit Platinum',
+    accountNumber: 'CC-456789',
+    balances: [
+      { amount: 2500000, label: 'Saldo Saat Ini' },
+      { amount: 47500000, label: 'Limit Tersedia' }
+    ],
+    chartData: [
+      {
+        name: 'Spending',
+        data: [
+          1200000, 1800000, 2200000, 1900000, 2100000, 2400000, 2800000, 2600000, 2300000, 2500000, 2700000, 2500000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    currency: 'IDR',
+    accountType: 'credit',
+    bank: 'Bank BNI',
+    status: 'active'
+  },
+  {
+    id: '5',
+    title: 'Deposito Berjangka',
+    accountNumber: 'DEP-334455',
+    balances: [
+      { amount: 50000000, label: 'Pokok Deposito' },
+      { amount: 2500000, label: 'Bunga Terkumpul' }
+    ],
+    chartData: [
+      {
+        name: 'Deposito Growth',
+        data: [
+          50000000, 50200000, 50420000, 50650000, 50880000, 51120000, 51360000, 51610000, 51860000, 52120000, 52380000,
+          52500000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    currency: 'IDR',
+    accountType: 'savings',
+    bank: 'Bank BRI',
+    status: 'active'
+  },
+  {
+    id: '6',
+    title: 'Cash Management',
+    accountNumber: 'CSH-111222',
+    balances: [{ amount: 5000, label: 'Available Cash' }],
+    chartData: [
+      {
+        name: 'Cash Flow',
+        data: [4000, 4500, 4200, 4800, 5200, 4900, 5000, 5300, 5100, 5400, 5200, 5000]
+      }
+    ],
+    categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2', 'Q3', 'Q4'],
+    chartColor: '#00bcd4',
+    currency: 'USD',
+    accountType: 'cash',
+    bank: 'Wells Fargo',
+    status: 'active'
+  },
+  {
+    id: '7',
+    title: 'Rekening Bisnis',
+    accountNumber: 'BIZ-998877',
+    balances: [
+      { amount: 85000000, label: 'Saldo Operasional' },
+      { amount: 15000000, label: 'Dana Cadangan' }
+    ],
+    chartData: [
+      {
+        name: 'Business Account',
+        data: [
+          70000000, 75000000, 80000000, 82000000, 85000000, 88000000, 90000000, 87000000, 85000000, 89000000, 92000000,
+          100000000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    chartColor: '#ff9800',
+    currency: 'IDR',
+    accountType: 'giro',
+    bank: 'Bank Mandiri',
+    status: 'active'
+  },
+  {
+    id: '8',
+    title: 'Tabungan Pendidikan',
+    accountNumber: 'EDU-567890',
+    balances: [
+      { amount: 25000000, label: 'Dana Pendidikan' },
+      { amount: 3500000, label: 'Bunga Terkumpul' }
+    ],
+    chartData: [
+      {
+        name: 'Education Savings',
+        data: [
+          20000000, 21000000, 22000000, 23000000, 24000000, 24500000, 25000000, 25500000, 26000000, 27000000, 28000000,
+          28500000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    chartColor: '#3f51b5',
+    currency: 'IDR',
+    accountType: 'savings',
+    bank: 'Bank BCA',
+    status: 'inactive'
+  }
+]
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+const CashBankList = () => {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [editingAccount, setEditingAccount] = useState<AccountType | null>(null)
+  const [addAccountOpen, setAddAccountOpen] = useState(false)
+  const [data, setData] = useState<AccountType[]>(accountsData)
+  const { lang: locale } = useParams()
+
+  const handleCloseDrawer = () => {
+    setAddAccountOpen(false)
+    setEditingAccount(null)
+  }
+
+  // Filter and search logic
+  const filteredAccounts = useMemo(() => {
+    return dummyAccounts.filter(account => {
+      const matchesSearch =
+        account.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        account.accountNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        account.bank.toLowerCase().includes(searchQuery.toLowerCase())
+      return matchesSearch
+    })
+  }, [searchQuery])
+
+  return (
+    <>
+      <Box sx={{ p: 3 }}>
+        {/* Search and Filters */}
+        <Box sx={{ mb: 4 }}>
+          <div className='flex justify-between items-center'>
+            <DebouncedInput
+              value={searchQuery}
+              onChange={value => setSearchQuery(value as string)}
+              placeholder='Cari '
+              className='max-sm:is-full'
+            />
+            <Box>
+              <Button
+                variant='contained'
+                className='max-sm:is-full is-auto'
+                startIcon={<i className='tabler-plus' />}
+                onClick={() => {
+                  setEditingAccount(null)
+                  setAddAccountOpen(true)
+                }}
+              >
+                Tambah Akun
+              </Button>
+            </Box>
+          </div>
+        </Box>
+
+        {/* Account Cards */}
+        <Grid container spacing={3}>
+          {filteredAccounts.length > 0 ? (
+            filteredAccounts.map(account => (
+              <Grid key={account.id} size={{ xs: 12, lg: 6, xl: 4 }}>
+                <CashBankCard
+                  title={account.title}
+                  accountNumber={account.accountNumber}
+                  balances={account.balances}
+                  chartData={account.chartData}
+                  categories={account.categories}
+                  chartColor={account.chartColor}
+                  currency={account.currency}
+                  showButton={account.accountType !== 'cash'}
+                  href={getLocalizedUrl(`/apps/cash-bank/${account.accountNumber}/detail`, locale as Locale)}
+                />
+              </Grid>
+            ))
+          ) : (
+            <Grid size={{ xs: 12 }}>
+              <Box
+                sx={{
+                  textAlign: 'center',
+                  py: 8,
+                  backgroundColor: 'grey.50',
+                  borderRadius: 2
+                }}
+              >
+                <Typography variant='h6' color='text.secondary' gutterBottom>
+                  Tidak ada akun yang ditemukan
+                </Typography>
+                <Typography variant='body2' color='text.secondary'>
+                  Coba ubah kata kunci pencarian atau filter yang digunakan
+                </Typography>
+              </Box>
+            </Grid>
+          )}
+        </Grid>
+      </Box>
+      <AccountFormDrawer
+        open={addAccountOpen}
+        handleClose={handleCloseDrawer}
+        accountData={data}
+        setData={setData}
+        editingAccount={editingAccount}
+      />
+    </>
+  )
+}
+
+export default CashBankList

src/views/apps/cash-bank/detail/CashBankDetailCard.tsx

@@ -0,0 +1,62 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'SALDO',
+    stats: '30.631.261',
+    avatarIcon: 'tabler-wallet',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '22.3%',
+    subtitle: 'Hari ini vs 30 hari lalu'
+  },
+  {
+    title: 'MASUK',
+    stats: '3.486.871',
+    avatarIcon: 'tabler-arrow-down-circle',
+    avatarColor: 'success',
+    trend: 'negative',
+    trendNumber: '44.1%',
+    subtitle: 'Bulan ini vs tanggal sama bulan lalu'
+  },
+  {
+    title: 'KELUAR',
+    stats: '3.163.000',
+    avatarIcon: 'tabler-arrow-up-circle',
+    avatarColor: 'info',
+    trend: 'positive',
+    trendNumber: '137.8%',
+    subtitle: 'Bulan ini vs tanggal sama bulan lalu'
+  },
+  {
+    title: 'NET',
+    stats: '323.871',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '93.4%',
+    subtitle: 'Bulan ini vs tanggal sama bulan lalu'
+  }
+]
+
+const CashBankDetailCard = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default CashBankDetailCard

src/views/apps/cash-bank/detail/CashBankDetailHeader.tsx

@@ -0,0 +1,19 @@
+import { Typography } from '@mui/material'
+
+interface Props {
+  title: string
+}
+
+const CashBankDetailHeader = ({ title }: Props) => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          {title}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default CashBankDetailHeader

src/views/apps/cash-bank/detail/CashBankDetailTable.tsx

@@ -0,0 +1,615 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import StatusFilterTabs from '@/components/StatusFilterTab'
+import DateRangePicker from '@/components/RangeDatePicker'
+
+// Updated CashBankType
+export type CashBankType = {
+  id: number
+  date: string
+  description: string
+  reference: string
+  accept: number
+  send: number
+  balance: number
+  status: string
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type CashBankTypeWithAction = CashBankType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for CashBank
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Transaksi di Apskel':
+      return 'info'
+    case 'Transaksi di Bank':
+      return 'primary'
+    case 'Rekonsiliasi':
+      return 'success'
+    case 'Transaksi Berulang':
+      return 'secondary'
+    case 'Void':
+      return 'error'
+    case 'Menunggu Persetujuan':
+      return 'warning'
+    case 'Di tolak':
+      return 'error'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Sample CashBank data
+const cashBankData: CashBankType[] = [
+  {
+    id: 1,
+    date: '2024-01-15',
+    description: 'Transfer ke supplier ABC',
+    reference: 'TRF-001',
+    accept: 0,
+    send: 5000000,
+    balance: 45000000,
+    status: 'Transaksi di Bank'
+  },
+  {
+    id: 2,
+    date: '2024-01-16',
+    description: 'Pembayaran dari customer XYZ',
+    reference: 'PAY-002',
+    accept: 10000000,
+    send: 0,
+    balance: 55000000,
+    status: 'Rekonsiliasi'
+  },
+  {
+    id: 3,
+    date: '2024-01-17',
+    description: 'Pembayaran gaji karyawan',
+    reference: 'SALARY-001',
+    accept: 0,
+    send: 25000000,
+    balance: 30000000,
+    status: 'Menunggu Persetujuan'
+  },
+  {
+    id: 4,
+    date: '2024-01-18',
+    description: 'Transfer antar rekening',
+    reference: 'TRF-002',
+    accept: 0,
+    send: 2000000,
+    balance: 28000000,
+    status: 'Transaksi di Apskel'
+  },
+  {
+    id: 5,
+    date: '2024-01-19',
+    description: 'Pembayaran otomatis tagihan listrik',
+    reference: 'AUTO-001',
+    accept: 0,
+    send: 1500000,
+    balance: 26500000,
+    status: 'Transaksi Berulang'
+  },
+  {
+    id: 6,
+    date: '2024-01-20',
+    description: 'Transfer yang dibatalkan',
+    reference: 'TRF-003',
+    accept: 0,
+    send: 3000000,
+    balance: 26500000,
+    status: 'Void'
+  },
+  {
+    id: 7,
+    date: '2024-01-21',
+    description: 'Pembayaran yang ditolak sistem',
+    reference: 'PAY-003',
+    accept: 0,
+    send: 5000000,
+    balance: 26500000,
+    status: 'Di tolak'
+  }
+]
+
+// Column Definitions
+const columnHelper = createColumnHelper<CashBankTypeWithAction>()
+
+const CashBankDetailTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addTransactionOpen, setAddTransactionOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [transactionId, setTransactionId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<CashBankType[]>(cashBankData)
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = cashBankData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        transaction =>
+          transaction.description.toLowerCase().includes(search.toLowerCase()) ||
+          transaction.reference.toLowerCase().includes(search.toLowerCase()) ||
+          transaction.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(transaction => transaction.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  // Calculate totals from filtered data
+  const subtotalAccept = useMemo(() => {
+    return filteredData.reduce((sum, transaction) => sum + transaction.accept, 0)
+  }, [filteredData])
+
+  const subtotalSend = useMemo(() => {
+    return filteredData.reduce((sum, transaction) => sum + transaction.send, 0)
+  }, [filteredData])
+
+  const netBalance = subtotalAccept - subtotalSend
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleTransactionClick = (transactionId: string) => {
+    console.log('Navigasi ke detail Transaksi:', transactionId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<CashBankTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('description', {
+        header: 'Keterangan',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/cash-bank/1-10003/detail/transaction/${row.original.id}`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.description}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('accept', {
+        header: 'Penerimaan',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.accept > 0 ? 'text-green-600' : 'text-gray-500'}`}>
+            {row.original.accept > 0 ? formatCurrency(row.original.accept) : '-'}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('send', {
+        header: 'Pengeluaran',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.send > 0 ? 'text-red-600' : 'text-gray-500'}`}>
+            {row.original.send > 0 ? formatCurrency(row.original.send) : '-'}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('balance', {
+        header: 'Saldo',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.balance >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+            {formatCurrency(row.original.balance)}
+          </Typography>
+        )
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as CashBankType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs and Range Date */}
+        <div className='p-6 border-bs'>
+          <div className='flex items-center justify-between'>
+            <StatusFilterTabs
+              statusOptions={[
+                'Semua',
+                'Transaksi di Apskel',
+                'Transaksi di Bank',
+                'Rekonsiliasi',
+                'Transaksi Berulang',
+                'Void',
+                'Menunggu Persetujuan',
+                'Di tolak'
+              ]}
+              selectedStatus={statusFilter}
+              onStatusChange={handleStatusFilter}
+            />
+            <DateRangePicker
+              startDate={startDate}
+              endDate={endDate}
+              onStartDateChange={setStartDate}
+              onEndDateChange={setEndDate}
+            />
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Transaksi Cash/Bank'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/cashbank/add', locale as Locale)}
+            >
+              Tambah Transaksi
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </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 className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold text-green-600'>
+                      {formatCurrency(subtotalAccept)}
+                    </Typography>
+                  </td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold text-red-600'>
+                      {formatCurrency(subtotalSend)}
+                    </Typography>
+                  </td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography
+                      variant='h6'
+                      className={`font-semibold ${netBalance >= 0 ? 'text-green-600' : 'text-red-600'}`}
+                    >
+                      {formatCurrency(netBalance)}
+                    </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 ${netBalance >= 0 ? 'text-green-600' : 'text-red-600'}`}
+                    >
+                      {formatCurrency(netBalance)}
+                    </Typography>
+                  </td>
+                </tr>
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default CashBankDetailTable

src/views/apps/cash-bank/detail/index.tsx

@@ -0,0 +1,23 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import CashBankDetailHeader from './CashBankDetailHeader'
+import CashBankDetailTable from './CashBankDetailTable'
+import CashBankDetailCard from './CashBankDetailCard'
+
+const CashBankDetail = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailHeader title='Giro 1-10003' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default CashBankDetail

src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Grid from '@mui/material/Grid2'
+import CashBankDetailTransactionInformation from './CashBankDetailTransactionInformation'
+import CashBankDetailTransactionLog from './CashBankDetailTransactionLog'
+import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled'
+import { useState } from 'react'
+
+const CashBankDetailTransactionContent = () => {
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12 }}>
+          <CashBankDetailTransactionInformation />
+        </Grid>
+        {/* <Grid size={{ xs: 12 }}>
+        <ExpenseDetailSendPayment />
+        </Grid> */}
+        <Grid size={{ xs: 12 }}>
+          <CashBankDetailTransactionLog />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default CashBankDetailTransactionContent

src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader.tsx

@@ -0,0 +1,23 @@
+import { Typography } from '@mui/material'
+
+interface Props {
+  title: string
+  transaction: string
+}
+
+const CashBankDetailTransactionHeader = ({ title, transaction }: Props) => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          {title}
+        </Typography>
+        <Typography variant='h6' className='mbe-1'>
+          Transaksi: {transaction}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default CashBankDetailTransactionHeader

src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionInformation.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Card, CardHeader, CardContent, Typography, Box, Button, IconButton } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled'
+
+interface PaymentData {
+  dari: string
+  nomor: string
+  tglTransaksi: string
+  referensi: string
+  status: string
+}
+
+interface TransactionItem {
+  deskripsi: string
+  total: number
+}
+
+const CashBankDetailTransactionInformation: React.FC = () => {
+  const [open, setOpen] = useState(false)
+
+  const paymentData: PaymentData = {
+    dari: 'POS Customer',
+    nomor: 'IP/00030',
+    tglTransaksi: '10/09/2025',
+    referensi: 'Pembayaran INV/01/59A/4CY/00003',
+    status: 'Unreconciled'
+  }
+
+  const transactionItems: TransactionItem[] = [
+    {
+      deskripsi: 'Terima pembayaran tagihan INV/01/59A/4CY/00003',
+      total: 220890
+    }
+  ]
+
+  const totalAmount: number = transactionItems.reduce((sum, item) => sum + item.total, 0)
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  return (
+    <>
+      <Card sx={{ width: '100%' }}>
+        <CardHeader
+          title={
+            <Box display='flex' justifyContent='space-between' alignItems='center'>
+              <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
+                Unreconciled
+              </Typography>
+              <Box>
+                <Button variant='outlined' size='small' sx={{ mr: 1 }} onClick={() => setOpen(true)}>
+                  Rekonsiliasi
+                </Button>
+                <Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                  Bagikan
+                </Button>
+                <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                  Print
+                </Button>
+              </Box>
+            </Box>
+          }
+        />
+
+        <CardContent>
+          {/* Payment Information */}
+          <Grid container spacing={3} sx={{ mb: 4 }}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ mb: 2 }}>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Dari
+                </Typography>
+                <Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
+                  {paymentData.dari}
+                </Typography>
+              </Box>
+
+              <Box sx={{ mb: 2 }}>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Tanggal Transaksi
+                </Typography>
+                <Typography variant='body1'>{paymentData.tglTransaksi}</Typography>
+              </Box>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ mb: 2 }}>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Nomor
+                </Typography>
+                <Typography variant='body1'>{paymentData.nomor}</Typography>
+              </Box>
+
+              <Box>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Referensi
+                </Typography>
+                <Typography variant='body1'>{paymentData.referensi}</Typography>
+              </Box>
+            </Grid>
+          </Grid>
+
+          {/* Transaction Items Header */}
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              py: 2,
+              borderBottom: '2px solid #e0e0e0',
+              mb: 2
+            }}
+          >
+            <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+              Deskripsi
+            </Typography>
+            <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+              Total
+            </Typography>
+          </Box>
+
+          {/* Transaction Items */}
+          <Box sx={{ mb: 4 }}>
+            {transactionItems.map((item, index) => (
+              <Box
+                key={index}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  py: 2,
+                  borderBottom: index === transactionItems.length - 1 ? 'none' : '1px solid #f0f0f0'
+                }}
+              >
+                <Box sx={{ flex: 1 }}>
+                  <Typography variant='body1' color='primary' sx={{ cursor: 'pointer' }}>
+                    {item.deskripsi}
+                  </Typography>
+                </Box>
+                <Box sx={{ textAlign: 'right', ml: 3 }}>
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    {formatCurrency(item.total)}
+                  </Typography>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+
+          {/* Total Section */}
+          <Box sx={{ mt: 4, pt: 3, borderTop: '2px solid #e0e0e0' }}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'center'
+              }}
+            >
+              <Typography variant='h5' sx={{ fontWeight: 'bold', mr: 4 }}>
+                Total
+              </Typography>
+              <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
+                {formatCurrency(totalAmount)}
+              </Typography>
+            </Box>
+          </Box>
+        </CardContent>
+      </Card>
+      <CashBankDetailTransactionReconciliationDrawer open={open} handleClose={() => setOpen(!open)} />
+    </>
+  )
+}
+
+export default CashBankDetailTransactionInformation

src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionLog.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material'
+
+interface LogEntry {
+  id: string
+  action: string
+  timestamp: string
+  user: string
+}
+
+const CashBankDetailTransactionLog: React.FC = () => {
+  const logEntries: LogEntry[] = [
+    {
+      id: '1',
+      action: 'Terakhir diubah oleh',
+      timestamp: '08 Sep 2025 18:26',
+      user: 'pada'
+    }
+  ]
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+            Pantau log perubahan data
+          </Typography>
+        }
+        sx={{ pb: 1 }}
+      />
+      <CardContent sx={{ mt: 5 }}>
+        {logEntries.map(entry => (
+          <Box key={entry.id} sx={{ mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <i className='tabler-edit' style={{ fontSize: '16px', color: '#1976d2' }} />
+              <Link
+                href='#'
+                underline='hover'
+                color='primary'
+                sx={{
+                  textDecoration: 'none',
+                  '&:hover': {
+                    textDecoration: 'underline'
+                  }
+                }}
+              >
+                {entry.action} {entry.user} {entry.timestamp}
+              </Link>
+            </Box>
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CashBankDetailTransactionLog

src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionReconsiled.tsx

@@ -0,0 +1,342 @@
+import React, { useState } from 'react'
+import {
+  Drawer,
+  Typography,
+  Box,
+  IconButton,
+  Button,
+  TextField,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Checkbox,
+  Paper,
+  MenuItem,
+  Select,
+  FormControl
+} from '@mui/material'
+import Grid from '@mui/material/Grid2'
+
+interface Props {
+  open: boolean
+  handleClose: () => void
+}
+
+const CashBankDetailTransactionReconciliationDrawer: React.FC<Props> = ({ open, handleClose }) => {
+  const [tanggalDari, setTanggalDari] = useState('10/09/2025')
+  const [tanggalSampai, setTanggalSampai] = useState('10/09/2025')
+  const [totalDari, setTotalDari] = useState('220.890')
+  const [totalSampai, setTotalSampai] = useState('220.890')
+  const [cari, setCari] = useState('')
+
+  const transactionData = {
+    detil: '10/09/2025',
+    kirim: 'Terima pembayaran tagihan: POS Customer INV/01/59A/4CY/00003',
+    terima: '220.890'
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleClose}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: '90%', sm: '80%', md: '80%', lg: '80%' },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center justify-between'>
+          <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
+            Rekonsiliasi
+          </Typography>
+          <IconButton size='small' onClick={handleClose}>
+            <i className='tabler-x text-2xl' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto', p: 3 }}>
+        <Grid container spacing={2}>
+          <Grid size={6}>
+            {/* Mutasi Bank Section */}
+            <Box sx={{ mb: 4 }}>
+              <Typography variant='h6' sx={{ fontWeight: 'bold', mb: 1 }}>
+                Mutasi Bank
+              </Typography>
+              <Typography variant='body2' color='text.secondary' sx={{ mb: 3 }}>
+                Cari mutasi bank yang sesuai dengan transaksi di Kledo
+              </Typography>
+
+              {/* Filter Section */}
+              <Grid container spacing={3} sx={{ mb: 3 }}>
+                {/* Tanggal */}
+                <Grid size={12}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
+                    Tanggal
+                  </Typography>
+                  <div className='flex items-center gap-3'>
+                    <TextField
+                      size='small'
+                      value={tanggalDari}
+                      onChange={e => setTanggalDari(e.target.value)}
+                      sx={{ width: '150px' }}
+                    />
+                    <Typography variant='body2'>s/d</Typography>
+                    <TextField
+                      size='small'
+                      value={tanggalSampai}
+                      onChange={e => setTanggalSampai(e.target.value)}
+                      sx={{ width: '150px' }}
+                    />
+                  </div>
+                </Grid>
+
+                {/* Total */}
+                <Grid size={12}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
+                    Total
+                  </Typography>
+                  <div className='flex items-center gap-3'>
+                    <TextField
+                      size='small'
+                      value={totalDari}
+                      onChange={e => setTotalDari(e.target.value)}
+                      sx={{ width: '150px' }}
+                    />
+                    <Typography variant='body2'>s/d</Typography>
+                    <TextField
+                      size='small'
+                      value={totalSampai}
+                      onChange={e => setTotalSampai(e.target.value)}
+                      sx={{ width: '150px' }}
+                    />
+                  </div>
+                </Grid>
+
+                {/* Cari */}
+                <Grid size={12}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
+                    Cari
+                  </Typography>
+                  <div className='flex items-center gap-3'>
+                    <TextField
+                      size='small'
+                      placeholder='Cari'
+                      value={cari}
+                      onChange={e => setCari(e.target.value)}
+                      sx={{ width: '300px' }}
+                    />
+                    <Button variant='contained' size='small'>
+                      Go
+                    </Button>
+                  </div>
+                </Grid>
+              </Grid>
+
+              {/* Table */}
+              <TableContainer component={Paper} sx={{ mb: 3 }}>
+                <Table size='small'>
+                  <TableHead>
+                    <TableRow sx={{ backgroundColor: 'grey.50' }}>
+                      <TableCell padding='checkbox'>
+                        <Checkbox />
+                      </TableCell>
+                      <TableCell>Detil</TableCell>
+                      <TableCell>Kirim</TableCell>
+                      <TableCell>Terima</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
+                        <div className='flex flex-col items-center gap-2'>
+                          <i className='tabler-folder-open text-gray-400 text-4xl' />
+                          <Typography variant='body2' color='text.secondary'>
+                            Tidak ada data
+                          </Typography>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </TableContainer>
+
+              {/* Information Text */}
+              <Typography variant='body2' color='text.secondary' sx={{ mb: 2 }}>
+                Transaksi yang sudah dipilih, tambah transaksi baru sesuai kebutuhan.
+              </Typography>
+
+              {/* Table */}
+              <TableContainer component={Paper} sx={{ mb: 3 }}>
+                <Table size='small'>
+                  <TableHead>
+                    <TableRow sx={{ backgroundColor: 'grey.50' }}>
+                      <TableCell padding='checkbox'>
+                        <Checkbox />
+                      </TableCell>
+                      <TableCell>Detil</TableCell>
+                      <TableCell>Kirim</TableCell>
+                      <TableCell>Terima</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
+                        <div className='flex flex-col items-center gap-2'>
+                          <i className='tabler-folder-open text-gray-400 text-4xl' />
+                          <Typography variant='body2' color='text.secondary'>
+                            Tidak ada data
+                          </Typography>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Box>
+
+            {/* Summary Section */}
+            <Box sx={{ mb: 4 }}>
+              <Typography variant='body2' sx={{ mb: 3, fontWeight: 'medium' }}>
+                Total transaksi di Kledo harus sama dengan total mutasi
+              </Typography>
+
+              <Grid container spacing={3} sx={{ mb: 3 }}>
+                <Grid size={6}>
+                  <Typography variant='body2' color='text.secondary'>
+                    Total transaksi di Kledo
+                  </Typography>
+                </Grid>
+                <Grid size={6}>
+                  <Typography variant='body2' sx={{ textAlign: 'right' }}>
+                    220.890
+                  </Typography>
+                </Grid>
+              </Grid>
+
+              <Grid container spacing={3} sx={{ mb: 3 }}>
+                <Grid size={6}>
+                  <Typography variant='body2' color='text.secondary'>
+                    Total mutasi
+                  </Typography>
+                </Grid>
+                <Grid size={6}>
+                  <Typography variant='body2' sx={{ textAlign: 'right' }}>
+                    0
+                  </Typography>
+                </Grid>
+              </Grid>
+
+              <Grid container spacing={3}>
+                <Grid size={6}>
+                  <Typography variant='body2' sx={{ fontWeight: 'bold' }}>
+                    Selisih
+                  </Typography>
+                </Grid>
+                <Grid size={6}>
+                  <Typography variant='body2' sx={{ textAlign: 'right', fontWeight: 'bold' }}>
+                    220.890
+                  </Typography>
+                </Grid>
+              </Grid>
+            </Box>
+          </Grid>
+          <Grid size={6}>
+            {/* Transaction Summary */}
+            <Box
+              sx={{
+                backgroundColor: 'grey.50',
+                p: 3,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: 'grey.200'
+              }}
+            >
+              <Grid container spacing={3}>
+                <Grid size={4}>
+                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
+                    Detil
+                  </Typography>
+                  <Typography variant='body2'>{transactionData.detil}</Typography>
+                </Grid>
+                <Grid size={4}>
+                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
+                    Kirim
+                  </Typography>
+                  <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
+                    {transactionData.kirim}
+                  </Typography>
+                </Grid>
+                <Grid size={4}>
+                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
+                    Terima
+                  </Typography>
+                  <Typography variant='body2' color='primary' sx={{ fontWeight: 'bold' }}>
+                    {transactionData.terima}
+                  </Typography>
+                </Grid>
+              </Grid>
+
+              <Box sx={{ mt: 3, pt: 2, borderTop: '1px solid', borderColor: 'grey.300' }}>
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+                  <Typography variant='h6' sx={{ fontWeight: 'bold', mr: 2 }}>
+                    Total
+                  </Typography>
+                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                    220.890
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+
+      {/* Footer Buttons */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center justify-end gap-3'>
+          <Button variant='outlined' color='error' onClick={handleClose}>
+            Batal
+          </Button>
+          <Button variant='outlined' disabled>
+            Rekonsiliasi
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default CashBankDetailTransactionReconciliationDrawer

src/views/apps/ecommerce/products/ingredient/ProductIngredientTable.tsx

@@ -38,6 +38,10 @@ import AddProductIngredientDrawer from './AddProductIngredientDrawer'
 import { useIngredientsMutation } from '../../../../../services/mutations/ingredients'
 import { useDispatch } from 'react-redux'
 import { setIngredient } from '../../../../../redux-store/slices/ingredient'
+import Link from 'next/link'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -110,6 +114,8 @@ const ProductIngredientTable = () => {
   const [openConfirm, setOpenConfirm] = useState(false)
   const [search, setSearch] = useState('')
 
+  const { lang: locale } = useParams()
+
   // Fetch products with pagination and search
   const { data, isLoading, error, isFetching } = useIngredients({
     page: currentPage,
@@ -166,14 +172,23 @@ const ProductIngredientTable = () => {
       columnHelper.accessor('name', {
         header: 'Name',
         cell: ({ row }) => (
-          <div className='flex items-center gap-3'>
-            {/* <img src={row.original.image} width={38} height={38} className='rounded bg-actionHover' /> */}
-            <div className='flex flex-col items-start'>
-              <Typography className='font-medium' color='text.primary'>
-                {row.original.name || '-'}
-              </Typography>
-            </div>
-          </div>
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/inventory/products/ingredients/${row.original.id}/detail`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.name}
+          </Button>
         )
       }),
       columnHelper.accessor('cost', {
@@ -396,7 +411,10 @@ const ProductIngredientTable = () => {
         />
       </Card>
 
-      <AddProductIngredientDrawer open={addIngredientOpen} handleClose={() => setAddIngredientOpen(!addIngredientOpen)} />
+      <AddProductIngredientDrawer
+        open={addIngredientOpen}
+        handleClose={() => setAddIngredientOpen(!addIngredientOpen)}
+      />
 
       <ConfirmDeleteDialog
         open={openConfirm}

src/views/apps/ecommerce/products/ingredient/detail/IngedientUnitConversionDrawer.tsx

@@ -0,0 +1,370 @@
+'use client'
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid2'
+import Box from '@mui/material/Box'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  setData?: (data: any) => void
+}
+
+type UnitConversionType = {
+  satuan: string
+  quantity: number
+  unit: string
+  hargaBeli: number
+  hargaJual: number
+  isDefault: boolean
+}
+
+type FormValidateType = {
+  conversions: UnitConversionType[]
+}
+
+// Vars
+const initialConversion: UnitConversionType = {
+  satuan: 'Box',
+  quantity: 12,
+  unit: 'Pcs',
+  hargaBeli: 3588000,
+  hargaJual: 5988000,
+  isDefault: false
+}
+
+const IngedientUnitConversionDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, setData } = props
+
+  // States
+  const [conversions, setConversions] = useState<UnitConversionType[]>([initialConversion])
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: {
+      conversions: [initialConversion]
+    }
+  })
+
+  // Functions untuk konversi unit
+  const handleTambahBaris = () => {
+    const newConversion: UnitConversionType = {
+      satuan: '',
+      quantity: 0,
+      unit: '',
+      hargaBeli: 0,
+      hargaJual: 0,
+      isDefault: false
+    }
+    setConversions([...conversions, newConversion])
+  }
+
+  const handleHapusBaris = (index: number) => {
+    if (conversions.length > 1) {
+      const newConversions = conversions.filter((_, i) => i !== index)
+      setConversions(newConversions)
+    }
+  }
+
+  const handleChangeConversion = (index: number, field: keyof UnitConversionType, value: any) => {
+    const newConversions = [...conversions]
+    newConversions[index] = { ...newConversions[index], [field]: value }
+    setConversions(newConversions)
+  }
+
+  const handleToggleDefault = (index: number) => {
+    const newConversions = conversions.map((conversion, i) => ({
+      ...conversion,
+      isDefault: i === index
+    }))
+    setConversions(newConversions)
+  }
+
+  const onSubmit = (data: FormValidateType) => {
+    console.log('Unit conversions:', conversions)
+    if (setData) {
+      setData(conversions)
+    }
+    handleClose()
+  }
+
+  const handleReset = () => {
+    handleClose()
+    setConversions([initialConversion])
+    resetForm({ conversions: [initialConversion] })
+  }
+
+  const formatNumber = (value: number) => {
+    return new Intl.NumberFormat('id-ID').format(value)
+  }
+
+  const parseNumber = (value: string) => {
+    return parseInt(value.replace(/\./g, '')) || 0
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 350, sm: 800 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>Konversi Unit Bahan</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='unit-conversion-form' onSubmit={handleSubmit(data => onSubmit(data))}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Header Kolom */}
+            <Grid container spacing={2} alignItems='center' className='bg-gray-50 p-3 rounded-lg'>
+              <Grid size={2}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Satuan
+                </Typography>
+              </Grid>
+              <Grid size={1} className='text-center'>
+                <Typography variant='body2' fontWeight='medium'>
+                  =
+                </Typography>
+              </Grid>
+              <Grid size={1.5}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Jumlah
+                </Typography>
+              </Grid>
+              <Grid size={1.5}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Unit
+                </Typography>
+              </Grid>
+              <Grid size={2}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Harga Beli
+                </Typography>
+              </Grid>
+              <Grid size={2}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Harga Jual
+                </Typography>
+              </Grid>
+              <Grid size={1}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Default
+                </Typography>
+              </Grid>
+              <Grid size={1}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Action
+                </Typography>
+              </Grid>
+            </Grid>
+
+            {/* Baris Konversi */}
+            {conversions.map((conversion, index) => (
+              <Grid container spacing={2} alignItems='center' key={index} className='py-2'>
+                <Grid size={0.5}>
+                  <Typography variant='body2' color='text.secondary'>
+                    {index + 1}
+                  </Typography>
+                </Grid>
+
+                {/* Satuan */}
+                <Grid size={1.5}>
+                  <CustomTextField
+                    select
+                    fullWidth
+                    size='small'
+                    value={conversion.satuan}
+                    onChange={e => handleChangeConversion(index, 'satuan', e.target.value)}
+                  >
+                    <MenuItem value='Box'>Box</MenuItem>
+                    <MenuItem value='Kg'>Kg</MenuItem>
+                    <MenuItem value='Liter'>Liter</MenuItem>
+                    <MenuItem value='Pack'>Pack</MenuItem>
+                    <MenuItem value='Pcs'>Pcs</MenuItem>
+                  </CustomTextField>
+                </Grid>
+
+                {/* Tanda sama dengan */}
+                <Grid size={1} className='text-center'>
+                  <Typography variant='h6'>=</Typography>
+                </Grid>
+
+                {/* Quantity */}
+                <Grid size={1.5}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    type='number'
+                    value={conversion.quantity}
+                    onChange={e => handleChangeConversion(index, 'quantity', parseInt(e.target.value) || 0)}
+                  />
+                </Grid>
+
+                {/* Unit */}
+                <Grid size={1.5}>
+                  <CustomTextField
+                    select
+                    fullWidth
+                    size='small'
+                    value={conversion.unit}
+                    onChange={e => handleChangeConversion(index, 'unit', e.target.value)}
+                  >
+                    <MenuItem value='Pcs'>Pcs</MenuItem>
+                    <MenuItem value='Kg'>Kg</MenuItem>
+                    <MenuItem value='Gram'>Gram</MenuItem>
+                    <MenuItem value='Liter'>Liter</MenuItem>
+                    <MenuItem value='ML'>ML</MenuItem>
+                  </CustomTextField>
+                </Grid>
+
+                {/* Harga Beli */}
+                <Grid size={2}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={formatNumber(conversion.hargaBeli)}
+                    onChange={e => handleChangeConversion(index, 'hargaBeli', parseNumber(e.target.value))}
+                  />
+                </Grid>
+
+                {/* Harga Jual */}
+                <Grid size={2}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={formatNumber(conversion.hargaJual)}
+                    onChange={e => handleChangeConversion(index, 'hargaJual', parseNumber(e.target.value))}
+                  />
+                </Grid>
+
+                {/* Default Star */}
+                <Grid size={1} className='text-center'>
+                  <IconButton
+                    size='small'
+                    onClick={() => handleToggleDefault(index)}
+                    sx={{
+                      color: conversion.isDefault ? 'warning.main' : 'grey.400'
+                    }}
+                  >
+                    <i className={conversion.isDefault ? 'tabler-star-filled' : 'tabler-star'} />
+                  </IconButton>
+                </Grid>
+
+                {/* Delete Button */}
+                <Grid size={1} className='text-center'>
+                  {conversions.length > 1 && (
+                    <IconButton
+                      size='small'
+                      onClick={() => handleHapusBaris(index)}
+                      sx={{
+                        color: 'error.main',
+                        border: 1,
+                        borderColor: 'error.main',
+                        '&:hover': {
+                          backgroundColor: 'error.light',
+                          borderColor: 'error.main'
+                        }
+                      }}
+                    >
+                      <i className='tabler-trash' />
+                    </IconButton>
+                  )}
+                </Grid>
+              </Grid>
+            ))}
+
+            {/* Tambah Baris Button */}
+            <div className='flex items-center justify-start'>
+              <Button
+                variant='outlined'
+                startIcon={<i className='tabler-plus' />}
+                onClick={handleTambahBaris}
+                sx={{
+                  color: 'primary.main',
+                  borderColor: 'primary.main',
+                  '&:hover': {
+                    backgroundColor: 'primary.light',
+                    borderColor: 'primary.main'
+                  }
+                }}
+              >
+                Tambah baris
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='unit-conversion-form'>
+            Simpan
+          </Button>
+          <Button variant='tonal' color='error' onClick={() => handleReset()}>
+            Batal
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default IngedientUnitConversionDrawer

src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailInfo.tsx

@@ -0,0 +1,30 @@
+import { formatCurrency } from '@/utils/transform'
+import { Card, CardHeader, Chip, Typography } from '@mui/material'
+
+const IngredientDetailInfo = () => {
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <div className='flex items-center gap-3'>
+            <Typography variant='h4' component='h1' className='font-bold'>
+              Tepung Terigu
+            </Typography>
+            <Chip label={'Active'} color={'success'} size='small' />
+          </div>
+        }
+        subheader={
+          <div className='flex flex-col gap-1 mt-2'>
+            <div className='flex gap-4'>
+              <Typography variant='body2'>
+                <span className='font-semibold'>Cost:</span> {formatCurrency(5000)}
+              </Typography>
+            </div>
+          </div>
+        }
+      />
+    </Card>
+  )
+}
+
+export default IngredientDetailInfo

src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx

@@ -0,0 +1,454 @@
+'use client'
+// React Imports
+import { useEffect, useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid2'
+import Box from '@mui/material/Box'
+import Radio from '@mui/material/Radio'
+import RadioGroup from '@mui/material/RadioGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import FormControl from '@mui/material/FormControl'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  setData?: (data: any) => void
+}
+
+type StockAdjustmentType = {
+  tipeStok: 'perhitungan' | 'stokMasukKeluar'
+  gudang: string
+  tanggal: string
+  akun: string
+  nomor: string
+  referensi: string
+  tag: string
+  qtyTercatat: number
+  satuan: string
+  qtyAktual: number
+  selisih: number
+  hargaRataRata: number
+}
+
+type FormValidateType = StockAdjustmentType
+
+// Vars
+const initialData: StockAdjustmentType = {
+  tipeStok: 'perhitungan',
+  gudang: '',
+  tanggal: '11/09/2025',
+  akun: '8-80100 Penyesuaian Persediaan',
+  nomor: 'SA/00007',
+  referensi: '',
+  tag: '',
+  qtyTercatat: 0,
+  satuan: 'Pcs',
+  qtyAktual: 0,
+  selisih: 0,
+  hargaRataRata: 0
+}
+
+const IngredientDetailStockAdjustmentDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, setData } = props
+
+  // States
+  const [formData, setFormData] = useState<StockAdjustmentType>(initialData)
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: initialData
+  })
+
+  // Watch values untuk kalkulasi otomatis
+  const qtyTercatat = watch('qtyTercatat')
+  const qtyAktual = watch('qtyAktual')
+
+  // Kalkulasi selisih otomatis
+  useEffect(() => {
+    const selisih = qtyAktual - qtyTercatat
+    setValue('selisih', selisih)
+  }, [qtyTercatat, qtyAktual, setValue])
+
+  const onSubmit = (data: FormValidateType) => {
+    console.log('Stock adjustment data:', data)
+    if (setData) {
+      setData(data)
+    }
+    handleClose()
+  }
+
+  const handleReset = () => {
+    handleClose()
+    resetForm(initialData)
+    setFormData(initialData)
+  }
+
+  const formatNumber = (value: number) => {
+    return new Intl.NumberFormat('id-ID').format(value)
+  }
+
+  const parseNumber = (value: string) => {
+    return parseInt(value.replace(/\./g, '')) || 0
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 400, sm: 600 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>Penyesuaian Stok</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='stock-adjustment-form' onSubmit={handleSubmit(data => onSubmit(data))}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Tipe Penyesuaian Stok */}
+            <div>
+              <Typography variant='body2' className='mb-3' sx={{ color: 'error.main' }}>
+                * Tipe penyesuaian stok
+              </Typography>
+              <Controller
+                name='tipeStok'
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <FormControl component='fieldset'>
+                    <RadioGroup {...field} row sx={{ gap: 4 }}>
+                      <FormControlLabel
+                        value='perhitungan'
+                        control={<Radio />}
+                        label={
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <Typography>Perhitungan Stok</Typography>
+                            <IconButton size='small' sx={{ color: 'text.secondary' }}>
+                              <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                            </IconButton>
+                          </Box>
+                        }
+                      />
+                      <FormControlLabel
+                        value='stokMasukKeluar'
+                        control={<Radio />}
+                        label={
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <Typography>Stok Masuk / Keluar</Typography>
+                            <IconButton size='small' sx={{ color: 'text.secondary' }}>
+                              <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                            </IconButton>
+                          </Box>
+                        }
+                      />
+                    </RadioGroup>
+                  </FormControl>
+                )}
+              />
+            </div>
+
+            {/* Gudang dan Tanggal */}
+            <Grid container spacing={4}>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
+                  * Gudang
+                </Typography>
+                <Controller
+                  name='gudang'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      select
+                      fullWidth
+                      placeholder='Pilih gudang'
+                      {...(errors.gudang && { error: true, helperText: 'Field ini wajib diisi.' })}
+                    >
+                      <MenuItem value=''>Pilih gudang</MenuItem>
+                      <MenuItem value='Gudang Utama'>Gudang Utama</MenuItem>
+                      <MenuItem value='Gudang Cabang'>Gudang Cabang</MenuItem>
+                      <MenuItem value='Gudang Produksi'>Gudang Produksi</MenuItem>
+                    </CustomTextField>
+                  )}
+                />
+              </Grid>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
+                  * Tanggal
+                </Typography>
+                <Controller
+                  name='tanggal'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      fullWidth
+                      type='date'
+                      {...(errors.tanggal && { error: true, helperText: 'Field ini wajib diisi.' })}
+                    />
+                  )}
+                />
+              </Grid>
+            </Grid>
+
+            {/* Akun dan Nomor */}
+            <Grid container spacing={4}>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
+                  * Akun
+                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
+                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                  </IconButton>
+                </Typography>
+                <Controller
+                  name='akun'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      select
+                      fullWidth
+                      {...(errors.akun && { error: true, helperText: 'Field ini wajib diisi.' })}
+                    >
+                      <MenuItem value='8-80100 Penyesuaian Persediaan'>8-80100 Penyesuaian Persediaan</MenuItem>
+                      <MenuItem value='8-80200 Penyesuaian Stok Rusak'>8-80200 Penyesuaian Stok Rusak</MenuItem>
+                      <MenuItem value='8-80300 Penyesuaian Stok Hilang'>8-80300 Penyesuaian Stok Hilang</MenuItem>
+                    </CustomTextField>
+                  )}
+                />
+              </Grid>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2'>
+                  Nomor
+                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
+                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                  </IconButton>
+                </Typography>
+                <Controller
+                  name='nomor'
+                  control={control}
+                  render={({ field }) => <CustomTextField {...field} fullWidth placeholder='SA/00007' />}
+                />
+              </Grid>
+            </Grid>
+
+            {/* Referensi dan Tag */}
+            <Grid container spacing={4}>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2'>
+                  Referensi
+                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
+                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                  </IconButton>
+                </Typography>
+                <Controller
+                  name='referensi'
+                  control={control}
+                  render={({ field }) => <CustomTextField {...field} fullWidth placeholder='Referensi' />}
+                />
+              </Grid>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2'>
+                  Tag
+                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
+                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                  </IconButton>
+                </Typography>
+                <Controller
+                  name='tag'
+                  control={control}
+                  render={({ field }) => (
+                    <CustomTextField {...field} select fullWidth placeholder='Pilih Tag'>
+                      <MenuItem value=''>Pilih Tag</MenuItem>
+                      <MenuItem value='Urgent'>Urgent</MenuItem>
+                      <MenuItem value='Regular'>Regular</MenuItem>
+                      <MenuItem value='Maintenance'>Maintenance</MenuItem>
+                    </CustomTextField>
+                  )}
+                />
+              </Grid>
+            </Grid>
+
+            {/* Stock Details Section */}
+            <Box sx={{ mt: 4 }}>
+              <Grid container spacing={2} alignItems='end'>
+                {/* Qty Tercatat */}
+                <Grid size={2}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Qty Tercatat
+                  </Typography>
+                  <Controller
+                    name='qtyTercatat'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        type='number'
+                        onChange={e => field.onChange(parseInt(e.target.value) || 0)}
+                      />
+                    )}
+                  />
+                </Grid>
+
+                {/* Satuan */}
+                <Grid size={2}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Satuan
+                  </Typography>
+                  <Controller
+                    name='satuan'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField {...field} select fullWidth>
+                        <MenuItem value='Pcs'>Pcs</MenuItem>
+                        <MenuItem value='Kg'>Kg</MenuItem>
+                        <MenuItem value='Liter'>Liter</MenuItem>
+                        <MenuItem value='Box'>Box</MenuItem>
+                      </CustomTextField>
+                    )}
+                  />
+                </Grid>
+
+                {/* Qty Aktual */}
+                <Grid size={2}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Qty Aktual
+                  </Typography>
+                  <Controller
+                    name='qtyAktual'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        type='number'
+                        onChange={e => field.onChange(parseInt(e.target.value) || 0)}
+                      />
+                    )}
+                  />
+                </Grid>
+
+                {/* Selisih */}
+                <Grid size={2}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Selisih
+                  </Typography>
+                  <Controller
+                    name='selisih'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        type='number'
+                        disabled
+                        sx={{
+                          '& .MuiInputBase-input.Mui-disabled': {
+                            WebkitTextFillColor: 'text.primary',
+                            backgroundColor: 'grey.100'
+                          }
+                        }}
+                      />
+                    )}
+                  />
+                </Grid>
+
+                {/* Harga Rata-rata */}
+                <Grid size={4}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Harga Rata-rata
+                  </Typography>
+                  <Controller
+                    name='hargaRataRata'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        value={formatNumber(field.value)}
+                        onChange={e => field.onChange(parseNumber(e.target.value))}
+                      />
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Box>
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='stock-adjustment-form'>
+            Simpan
+          </Button>
+          <Button variant='tonal' color='error' onClick={() => handleReset()}>
+            Batal
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default IngredientDetailStockAdjustmentDrawer

src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx

@@ -0,0 +1,69 @@
+'use client'
+import React, { useState } from 'react'
+import { Card, CardContent, CardHeader, Typography, Button, Box, Stack } from '@mui/material'
+import IngedientUnitConversionDrawer from './IngedientUnitConversionDrawer' // Sesuaikan dengan path file Anda
+
+const IngredientDetailUnit = () => {
+  // State untuk mengontrol drawer
+  const [openConversionDrawer, setOpenConversionDrawer] = useState(false)
+
+  // Function untuk membuka drawer
+  const handleOpenConversionDrawer = () => {
+    setOpenConversionDrawer(true)
+  }
+
+  // Function untuk menutup drawer
+  const handleCloseConversionDrawer = () => {
+    setOpenConversionDrawer(false)
+  }
+
+  // Function untuk handle data dari drawer (opsional)
+  const handleSetConversionData = (data: any) => {
+    console.log('Conversion data received:', data)
+    // Anda bisa menambahkan logic untuk mengupdate state atau API call di sini
+  }
+
+  return (
+    <>
+      <Card sx={{ maxWidth: 400 }}>
+        <CardHeader title='Satuan' />
+        <CardContent>
+          <Stack spacing={2} sx={{ mb: 3 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography variant='body1' color='text.secondary'>
+                Satuan Dasar
+              </Typography>
+              <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                : Pcs
+              </Typography>
+            </Box>
+          </Stack>
+
+          <Button
+            variant='contained'
+            fullWidth
+            startIcon={<span style={{ fontSize: '18px' }}>+</span>}
+            onClick={handleOpenConversionDrawer}
+            sx={{
+              py: 1.5,
+              borderRadius: 2,
+              textTransform: 'none',
+              fontSize: '16px'
+            }}
+          >
+            Ubah konversi satuan
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* Ingredient Unit Conversion Drawer */}
+      <IngedientUnitConversionDrawer
+        open={openConversionDrawer}
+        handleClose={handleCloseConversionDrawer}
+        setData={handleSetConversionData}
+      />
+    </>
+  )
+}
+
+export default IngredientDetailUnit

src/views/apps/ecommerce/products/ingredient/detail/index.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useState } from 'react'
+import Grid from '@mui/material/Grid2'
+import IngredientDetailInfo from './IngredientDetailInfo'
+import IngredientDetailUnit from './IngredientDetailUnit'
+import IngredientDetailStockAdjustmentDrawer from './IngredientDetailStockAdjustmentDrawer' // Sesuaikan dengan path file Anda
+import { Button } from '@mui/material'
+
+const IngredientDetail = () => {
+  // State untuk mengontrol stock adjustment drawer
+  const [openStockAdjustmentDrawer, setOpenStockAdjustmentDrawer] = useState(false)
+
+  // Function untuk membuka stock adjustment drawer
+  const handleOpenStockAdjustmentDrawer = () => {
+    setOpenStockAdjustmentDrawer(true)
+  }
+
+  // Function untuk menutup stock adjustment drawer
+  const handleCloseStockAdjustmentDrawer = () => {
+    setOpenStockAdjustmentDrawer(false)
+  }
+
+  // Function untuk handle data dari stock adjustment drawer
+  const handleSetStockAdjustmentData = (data: any) => {
+    console.log('Stock adjustment data received:', data)
+    // Anda bisa menambahkan logic untuk mengupdate state atau API call di sini
+    // Misalnya: update stock data, refresh ingredient data, dll.
+  }
+
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+          <IngredientDetailInfo />
+        </Grid>
+        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+          <Button
+            variant='contained'
+            fullWidth
+            startIcon={<span style={{ fontSize: '18px' }}>+</span>}
+            onClick={handleOpenStockAdjustmentDrawer}
+            className='mb-4'
+            sx={{
+              py: 1.5,
+              borderRadius: 2,
+              textTransform: 'none',
+              fontSize: '16px',
+              mb: 3 // Menambahkan margin bottom untuk spacing
+            }}
+          >
+            Penyesuaian Stok
+          </Button>
+          <IngredientDetailUnit />
+        </Grid>
+      </Grid>
+
+      {/* Stock Adjustment Drawer */}
+      <IngredientDetailStockAdjustmentDrawer
+        open={openStockAdjustmentDrawer}
+        handleClose={handleCloseStockAdjustmentDrawer}
+        setData={handleSetStockAdjustmentData}
+      />
+    </>
+  )
+}
+
+export default IngredientDetail

src/views/apps/expense/add/ExpenseAddAccount.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import React from 'react'
+import {
+  Button,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  MenuItem
+} from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import { ExpenseFormData, ExpenseItem, ExpenseAccount, ExpenseTax } from '@/types/apps/expenseTypes'
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAutocomplete from '@core/components/mui/Autocomplete'
+
+interface ExpenseAddAccountProps {
+  formData: ExpenseFormData
+  mockAccounts: ExpenseAccount[]
+  mockTaxes: ExpenseTax[]
+  onExpenseItemChange: (index: number, field: keyof ExpenseItem, value: any) => void
+  onAddExpenseItem: () => void
+  onRemoveExpenseItem: (index: number) => void
+}
+
+const ExpenseAddAccount: React.FC<ExpenseAddAccountProps> = ({
+  formData,
+  mockAccounts,
+  mockTaxes,
+  onExpenseItemChange,
+  onAddExpenseItem,
+  onRemoveExpenseItem
+}) => {
+  return (
+    <Grid size={{ xs: 12 }}>
+      <TableContainer component={Paper} variant='outlined'>
+        <Table>
+          <TableHead>
+            <TableRow sx={{ backgroundColor: 'grey.50' }}>
+              <TableCell sx={{ fontWeight: 'bold' }}>Akun Biaya</TableCell>
+              <TableCell sx={{ fontWeight: 'bold' }}>Deskripsi</TableCell>
+              <TableCell sx={{ fontWeight: 'bold' }}>Pajak</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'right' }}>Total</TableCell>
+              <TableCell sx={{ width: 50 }}></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {formData.expenseItems.map((item, index) => (
+              <TableRow key={item.id}>
+                <TableCell sx={{ width: '25%' }}>
+                  <CustomAutocomplete
+                    size='small'
+                    options={mockAccounts}
+                    getOptionLabel={option => `${option.code} ${option.name}`}
+                    value={item.account}
+                    onChange={(_, value) => onExpenseItemChange(index, 'account', value)}
+                    renderInput={params => <CustomTextField {...params} placeholder='Pilih akun' />}
+                  />
+                </TableCell>
+                <TableCell sx={{ width: '30%' }}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={item.description}
+                    onChange={e => onExpenseItemChange(index, 'description', e.target.value)}
+                  />
+                </TableCell>
+                <TableCell sx={{ width: '20%' }}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    select
+                    value={item.tax?.id || ''}
+                    onChange={e => {
+                      const tax = mockTaxes.find(t => t.id === e.target.value)
+                      onExpenseItemChange(index, 'tax', tax || null)
+                    }}
+                    SelectProps={{
+                      displayEmpty: true
+                    }}
+                  >
+                    <MenuItem value=''>...</MenuItem>
+                    {mockTaxes.map(tax => (
+                      <MenuItem key={tax.id} value={tax.id}>
+                        {tax.name}
+                      </MenuItem>
+                    ))}
+                  </CustomTextField>
+                </TableCell>
+                <TableCell sx={{ width: '20%' }}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    type='number'
+                    value={item.total}
+                    onChange={e => onExpenseItemChange(index, 'total', parseFloat(e.target.value) || 0)}
+                    sx={{
+                      '& .MuiInputBase-input': {
+                        textAlign: 'right'
+                      }
+                    }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <IconButton
+                    size='small'
+                    color='error'
+                    onClick={() => onRemoveExpenseItem(index)}
+                    disabled={formData.expenseItems.length === 1}
+                  >
+                    <i className='tabler-trash' />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Button
+        startIcon={<i className='tabler-plus' />}
+        onClick={onAddExpenseItem}
+        variant='outlined'
+        size='small'
+        sx={{ mt: 1 }}
+      >
+        Tambah baris
+      </Button>
+    </Grid>
+  )
+}
+
+export default ExpenseAddAccount

src/views/apps/expense/add/ExpenseAddBasicInfo.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import React from 'react'
+import { Switch, FormControlLabel, Box } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import { ExpenseFormData, ExpenseAccount, ExpenseRecipient, ExpenseTag } from '@/types/apps/expenseTypes'
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAutocomplete from '@core/components/mui/Autocomplete'
+
+interface ExpenseAddBasicInfoProps {
+  formData: ExpenseFormData
+  mockAccounts: ExpenseAccount[]
+  mockRecipients: ExpenseRecipient[]
+  mockTags: ExpenseTag[]
+  onInputChange: (field: keyof ExpenseFormData, value: any) => void
+}
+
+const ExpenseAddBasicInfo: React.FC<ExpenseAddBasicInfoProps> = ({
+  formData,
+  mockAccounts,
+  mockRecipients,
+  mockTags,
+  onInputChange
+}) => {
+  return (
+    <>
+      {/* Row 1: Dibayar Dari (6) + Bayar Nanti (6) */}
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CustomAutocomplete
+          size='small'
+          options={mockAccounts}
+          getOptionLabel={option => `${option.code} ${option.name}`}
+          value={mockAccounts.find(acc => `${acc.code} ${acc.name}` === formData.paidFrom) || null}
+          onChange={(_, value) => onInputChange('paidFrom', value ? `${value.code} ${value.name}` : '')}
+          renderInput={params => <CustomTextField {...params} label='Dibayar Dari' required />}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: { xs: 'flex-start', md: 'flex-end' },
+            alignItems: 'end',
+            height: '100%'
+          }}
+        >
+          <FormControlLabel
+            control={
+              <Switch
+                checked={formData.payLater}
+                onChange={e => onInputChange('payLater', e.target.checked)}
+                size='small'
+              />
+            }
+            label='Bayar Nanti'
+          />
+        </Box>
+      </Grid>
+
+      {/* Row 2: Penerima (6) */}
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CustomAutocomplete
+          size='small'
+          options={mockRecipients}
+          getOptionLabel={option => option.name}
+          value={formData.recipient}
+          onChange={(_, value) => onInputChange('recipient', value)}
+          renderInput={params => <CustomTextField {...params} label='Penerima' required placeholder='Pilih penerima' />}
+        />
+      </Grid>
+
+      {/* Row 3: Tgl. Transaksi (6) */}
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CustomTextField
+          fullWidth
+          size='small'
+          type='date'
+          label='Tgl. Transaksi'
+          required
+          value={formData.transactionDate.split('/').reverse().join('-')}
+          onChange={e => {
+            const date = new Date(e.target.value)
+            const formattedDate = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear()}`
+            onInputChange('transactionDate', formattedDate)
+          }}
+          slotProps={{
+            input: {
+              endAdornment: <i className='tabler-calendar' style={{ fontSize: 20 }} />
+            }
+          }}
+        />
+      </Grid>
+
+      {/* Row 4: Nomor, Referensi, Tag */}
+      <Grid size={{ xs: 12 }}>
+        <Grid container spacing={2}>
+          <Grid size={{ xs: 12, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  Nomor
+                  <i className='tabler-help' style={{ fontSize: 16 }} />
+                </Box>
+              }
+              value={formData.number}
+              onChange={e => onInputChange('number', e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  Referensi
+                  <i className='tabler-help' style={{ fontSize: 16 }} />
+                </Box>
+              }
+              placeholder='Referensi'
+              value={formData.reference}
+              onChange={e => onInputChange('reference', e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  Tag
+                  <i className='tabler-help' style={{ fontSize: 16 }} />
+                </Box>
+              }
+              placeholder='Pilih Tag'
+              value={formData.tag?.name || ''}
+              onChange={e => {
+                const tag = mockTags.find(t => t.name === e.target.value)
+                onInputChange('tag', tag || null)
+              }}
+            />
+          </Grid>
+        </Grid>
+      </Grid>
+
+      {/* Row 5: Harga termasuk pajak */}
+      <Grid size={{ xs: 12 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={formData.includeTax}
+                onChange={e => onInputChange('includeTax', e.target.checked)}
+                size='small'
+              />
+            }
+            label='Harga termasuk pajak'
+          />
+        </Box>
+      </Grid>
+    </>
+  )
+}
+
+export default ExpenseAddBasicInfo

src/views/apps/expense/add/ExpenseAddForm.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Card, CardContent } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import {
+  ExpenseFormData,
+  ExpenseItem,
+  ExpenseAccount,
+  ExpenseTax,
+  ExpenseTag,
+  ExpenseRecipient
+} from '@/types/apps/expenseTypes'
+import ExpenseAddBasicInfo from './ExpenseAddBasicInfo'
+import ExpenseAddAccount from './ExpenseAddAccount'
+import ExpenseAddSummary from './ExpenseAddSummary'
+
+// Mock data
+const mockAccounts: ExpenseAccount[] = [
+  { id: '1', name: 'Kas', code: '1-10001' },
+  { id: '2', name: 'Bank BCA', code: '1-10002' },
+  { id: '3', name: 'Bank Mandiri', code: '1-10003' }
+]
+
+const mockRecipients: ExpenseRecipient[] = [
+  { id: '1', name: 'PT ABC Company' },
+  { id: '2', name: 'CV XYZ Trading' },
+  { id: '3', name: 'John Doe' },
+  { id: '4', name: 'Jane Smith' }
+]
+
+const mockTaxes: ExpenseTax[] = [
+  { id: '1', name: 'PPN 11%', rate: 11 },
+  { id: '2', name: 'PPh 23', rate: 2 },
+  { id: '3', name: 'Bebas Pajak', rate: 0 }
+]
+
+const mockTags: ExpenseTag[] = [
+  { id: '1', name: 'Operasional', color: '#2196F3' },
+  { id: '2', name: 'Marketing', color: '#4CAF50' },
+  { id: '3', name: 'IT', color: '#FF9800' }
+]
+
+const ExpenseAddForm: React.FC = () => {
+  const [formData, setFormData] = useState<ExpenseFormData>({
+    paidFrom: '1-10001 Kas',
+    payLater: false,
+    recipient: null,
+    transactionDate: '13/09/2025',
+    number: 'EXP/00042',
+    reference: '',
+    tag: null,
+    includeTax: false,
+    expenseItems: [
+      {
+        id: 1,
+        account: null,
+        description: '',
+        tax: null,
+        total: 0
+      }
+    ],
+    subtotal: 0,
+    total: 0,
+    showMessage: false,
+    showAttachment: false,
+    message: ''
+  })
+
+  const handleInputChange = (field: keyof ExpenseFormData, value: any): void => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }))
+  }
+
+  const handleExpenseItemChange = (index: number, field: keyof ExpenseItem, value: any): void => {
+    setFormData(prev => {
+      const newItems = [...prev.expenseItems]
+      newItems[index] = { ...newItems[index], [field]: value }
+
+      const subtotal = newItems.reduce((sum, item) => sum + item.total, 0)
+      const total = subtotal
+
+      return {
+        ...prev,
+        expenseItems: newItems,
+        subtotal,
+        total
+      }
+    })
+  }
+
+  const addExpenseItem = (): void => {
+    const newItem: ExpenseItem = {
+      id: Date.now(),
+      account: null,
+      description: '',
+      tax: null,
+      total: 0
+    }
+    setFormData(prev => ({
+      ...prev,
+      expenseItems: [...prev.expenseItems, newItem]
+    }))
+  }
+
+  const removeExpenseItem = (index: number): void => {
+    if (formData.expenseItems.length > 1) {
+      setFormData(prev => ({
+        ...prev,
+        expenseItems: prev.expenseItems.filter((_, i) => i !== index)
+      }))
+    }
+  }
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  return (
+    <Card sx={{ maxWidth: 1200, margin: 'auto', mt: 2 }}>
+      <CardContent>
+        <Grid container spacing={3}>
+          <ExpenseAddBasicInfo
+            formData={formData}
+            mockAccounts={mockAccounts}
+            mockRecipients={mockRecipients}
+            mockTags={mockTags}
+            onInputChange={handleInputChange}
+          />
+
+          <ExpenseAddAccount
+            formData={formData}
+            mockAccounts={mockAccounts}
+            mockTaxes={mockTaxes}
+            onExpenseItemChange={handleExpenseItemChange}
+            onAddExpenseItem={addExpenseItem}
+            onRemoveExpenseItem={removeExpenseItem}
+          />
+
+          <ExpenseAddSummary formData={formData} onInputChange={handleInputChange} formatCurrency={formatCurrency} />
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ExpenseAddForm

src/views/apps/expense/add/ExpenseAddHeader.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const ExpenseAddHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Tambah Biaya
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default ExpenseAddHeader

src/views/apps/expense/add/ExpenseAddSummary.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import React from 'react'
+import { Button, Accordion, AccordionSummary, AccordionDetails, Typography, Box } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import { ExpenseFormData } from '@/types/apps/expenseTypes'
+import CustomTextField from '@core/components/mui/TextField'
+import ImageUpload from '@/components/ImageUpload'
+
+interface ExpenseAddSummaryProps {
+  formData: ExpenseFormData
+  onInputChange: (field: keyof ExpenseFormData, value: any) => void
+  formatCurrency: (amount: number) => string
+}
+
+const ExpenseAddSummary: React.FC<ExpenseAddSummaryProps> = ({ formData, onInputChange, formatCurrency }) => {
+  const handleUpload = async (file: File): Promise<string> => {
+    // Simulate upload
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(URL.createObjectURL(file))
+      }, 1000)
+    })
+  }
+
+  return (
+    <Grid size={12} sx={{ mt: 4 }}>
+      <Grid container spacing={3}>
+        {/* Left Side - Pesan and Attachment */}
+        <Grid size={{ xs: 12, md: 7 }}>
+          {/* Pesan Section */}
+          <Box sx={{ mb: 3 }}>
+            <Button
+              variant='text'
+              color='inherit'
+              onClick={() => onInputChange('showMessage', !formData.showMessage)}
+              sx={{
+                textTransform: 'none',
+                fontSize: '14px',
+                fontWeight: 500,
+                padding: '12px 16px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                backgroundColor: '#f5f5f5',
+                border: '1px solid #e0e0e0',
+                borderRadius: '4px',
+                color: 'text.primary',
+                '&:hover': {
+                  backgroundColor: '#eeeeee'
+                }
+              }}
+            >
+              <Box component='span' sx={{ mr: 1 }}>
+                {formData.showMessage ? (
+                  <i className='tabler-chevron-down w-4 h-4' />
+                ) : (
+                  <i className='tabler-chevron-right w-4 h-4' />
+                )}
+              </Box>
+              Pesan
+            </Button>
+            {formData.showMessage && (
+              <Box sx={{ mt: 2 }}>
+                <CustomTextField
+                  fullWidth
+                  multiline
+                  rows={3}
+                  placeholder='Tambahkan pesan...'
+                  value={formData.message || ''}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => onInputChange('message', e.target.value)}
+                />
+              </Box>
+            )}
+          </Box>
+
+          {/* Attachment Section */}
+          <Box>
+            <Button
+              variant='text'
+              color='inherit'
+              onClick={() => onInputChange('showAttachment', !formData.showAttachment)}
+              sx={{
+                textTransform: 'none',
+                fontSize: '14px',
+                fontWeight: 500,
+                padding: '12px 16px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                backgroundColor: '#f5f5f5',
+                border: '1px solid #e0e0e0',
+                borderRadius: '4px',
+                color: 'text.primary',
+                '&:hover': {
+                  backgroundColor: '#eeeeee'
+                }
+              }}
+            >
+              <Box component='span' sx={{ mr: 1 }}>
+                {formData.showAttachment ? (
+                  <i className='tabler-chevron-down w-4 h-4' />
+                ) : (
+                  <i className='tabler-chevron-right w-4 h-4' />
+                )}
+              </Box>
+              Attachment
+            </Button>
+            {formData.showAttachment && (
+              <ImageUpload
+                onUpload={handleUpload}
+                maxFileSize={1 * 1024 * 1024} // 1MB
+                showUrlOption={false}
+                dragDropText='Drop your image here'
+                browseButtonText='Choose Image'
+              />
+            )}
+          </Box>
+        </Grid>
+
+        {/* Right Side - Totals */}
+        <Grid size={{ xs: 12, md: 5 }}>
+          <Box sx={{ backgroundColor: '#ffffff', p: 3, borderRadius: '8px' }}>
+            {/* Sub Total */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                py: 2,
+                borderBottom: '1px solid #e0e0e0',
+                '&:hover': {
+                  backgroundColor: '#f8f8f8'
+                }
+              }}
+            >
+              <Typography variant='body1' color='text.secondary' sx={{ fontSize: '16px' }}>
+                Sub Total
+              </Typography>
+              <Typography variant='body1' fontWeight={600} sx={{ fontSize: '16px', textAlign: 'right' }}>
+                {new Intl.NumberFormat('id-ID', {
+                  style: 'currency',
+                  currency: 'IDR',
+                  minimumFractionDigits: 0
+                }).format(formData.subtotal || 0)}
+              </Typography>
+            </Box>
+
+            {/* Additional Options */}
+
+            {/* Total */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                py: 2,
+                borderBottom: '1px solid #e0e0e0',
+                '&:hover': {
+                  backgroundColor: '#f8f8f8'
+                }
+              }}
+            >
+              <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px' }}>
+                Total
+              </Typography>
+              <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px', textAlign: 'right' }}>
+                RP. 120.000
+              </Typography>
+            </Box>
+
+            {/* Save Button */}
+            <Button
+              variant='contained'
+              color='primary'
+              fullWidth
+              sx={{
+                textTransform: 'none',
+                fontWeight: 600,
+                py: 1.5,
+                boxShadow: 'none',
+                '&:hover': {
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+                }
+              }}
+            >
+              Simpan
+            </Button>
+          </Box>
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseAddSummary

src/views/apps/expense/detail/ExpenseDetailContent.tsx

@@ -0,0 +1,22 @@
+import Grid from '@mui/material/Grid2'
+import ExpenseDetailInformation from './ExpenseDetailInformation'
+import ExpenseDetailSendPayment from './ExpenseDetailSendPayment'
+import ExpenseDetailLog from './ExpenseDetailLog'
+
+const ExpenseDetailContent = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailInformation />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailSendPayment />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailLog />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseDetailContent

src/views/apps/expense/detail/ExpenseDetailHeader.tsx

@@ -0,0 +1,15 @@
+import { Typography } from '@mui/material'
+
+const ExpenseDetailHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Detail Biaya
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default ExpenseDetailHeader

src/views/apps/expense/detail/ExpenseDetailInformation.tsx

@@ -0,0 +1,265 @@
+import React from 'react'
+import { Card, CardHeader, CardContent, Typography, Box, Button, IconButton } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+
+interface Product {
+  produk: string
+  deskripsi: string
+  kuantitas: number
+  satuan: string
+  discount: string
+  harga: number
+  pajak: string
+  jumlah: number
+}
+
+interface PurchaseData {
+  vendor: string
+  nomor: string
+  tglTransaksi: string
+  tglJatuhTempo: string
+  gudang: string
+  status: string
+}
+
+const ExpenseDetailInformation: React.FC = () => {
+  const purchaseData: PurchaseData = {
+    vendor: 'Bagas Rizki Sihotang S.Farm Widodo',
+    nomor: 'PI/00053',
+    tglTransaksi: '08/09/2025',
+    tglJatuhTempo: '06/10/2025',
+    gudang: 'Unassigned',
+    status: 'Belum Dibayar'
+  }
+
+  const products: Product[] = [
+    {
+      produk: 'Komisi penjualan tim IT',
+      deskripsi: '6-60002 - Komisi & Fee (PPN)',
+      kuantitas: 1,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 810000,
+      pajak: 'PPN',
+      jumlah: 810000
+    },
+    {
+      produk: 'Hotel Ibis 3 Malam, Surabaya',
+      deskripsi: '6-60004 - Perjalanan Dinas - Penjualan (PPN)',
+      kuantitas: 1,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 400000,
+      pajak: 'PPN',
+      jumlah: 400000
+    },
+    {
+      produk: 'Biaya telp fixed',
+      deskripsi: '6-60005 - Komunikasi - Penjualan',
+      kuantitas: 1,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 950000,
+      pajak: 'PPN',
+      jumlah: 950000
+    }
+  ]
+
+  const subTotal: number = products.reduce((sum, product) => sum + product.jumlah, 0)
+  const ppn: number = Math.round(subTotal * 0.11)
+  const total: number = subTotal + ppn
+  const sisaTagihan: number = total
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  return (
+    <Card sx={{ width: '100%' }}>
+      <CardHeader
+        title={
+          <Box display='flex' justifyContent='space-between' alignItems='center'>
+            <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
+              Belum Dibayar
+            </Typography>
+            <Box>
+              <Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                Bagikan
+              </Button>
+              <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                Print
+              </Button>
+              <IconButton>
+                <i className='tabler-dots-vertical' />
+              </IconButton>
+            </Box>
+          </Box>
+        }
+      />
+
+      <CardContent>
+        {/* Purchase Information */}
+        <Grid container spacing={3} sx={{ mb: 4 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Penerima
+              </Typography>
+              <Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
+                {purchaseData.vendor}
+              </Typography>
+            </Box>
+
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Tgl. Transaksi
+              </Typography>
+              <Typography variant='body1'>{purchaseData.tglTransaksi}</Typography>
+            </Box>
+          </Grid>
+
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Nomor
+              </Typography>
+              <Typography variant='body1'>{purchaseData.nomor}</Typography>
+            </Box>
+
+            <Box>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Tgl. Jatuh Tempo
+              </Typography>
+              <Typography variant='body1'>{purchaseData.tglJatuhTempo}</Typography>
+            </Box>
+          </Grid>
+        </Grid>
+
+        {/* Products List */}
+        <Box sx={{ mb: 4 }}>
+          {products.map((product, index) => (
+            <Box
+              key={index}
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+                py: 2,
+                borderBottom: index === products.length - 1 ? 'none' : '1px solid #f0f0f0'
+              }}
+            >
+              <Box sx={{ flex: 1 }}>
+                <Typography variant='body1' sx={{ fontWeight: 'medium', mb: 0.5 }}>
+                  {product.produk}
+                </Typography>
+                <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
+                  {product.deskripsi}
+                </Typography>
+              </Box>
+              <Box sx={{ textAlign: 'right', ml: 3 }}>
+                <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                  {formatCurrency(product.jumlah)}
+                </Typography>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+
+        {/* Summary Section */}
+        <Box sx={{ mt: 3 }}>
+          <Grid container spacing={2}>
+            <Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    Sub Total
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    {formatCurrency(subTotal)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    PPN
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    {formatCurrency(ppn)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
+                    Total
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
+                    {formatCurrency(total)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                    Sisa Tagihan
+                  </Typography>
+                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                    {formatCurrency(sisaTagihan)}
+                  </Typography>
+                </Box>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ExpenseDetailInformation

src/views/apps/expense/detail/ExpenseDetailLog.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material'
+
+interface LogEntry {
+  id: string
+  action: string
+  timestamp: string
+  user: string
+}
+
+const ExpenseDetailLog: React.FC = () => {
+  const logEntries: LogEntry[] = [
+    {
+      id: '1',
+      action: 'Terakhir diubah oleh',
+      timestamp: '08 Sep 2025 18:26',
+      user: 'pada'
+    }
+  ]
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+            Pantau log perubahan data
+          </Typography>
+        }
+        sx={{ pb: 1 }}
+      />
+      <CardContent sx={{ mt: 5 }}>
+        {logEntries.map(entry => (
+          <Box key={entry.id} sx={{ mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <i className='tabler-edit' style={{ fontSize: '16px', color: '#1976d2' }} />
+              <Link
+                href='#'
+                underline='hover'
+                color='primary'
+                sx={{
+                  textDecoration: 'none',
+                  '&:hover': {
+                    textDecoration: 'underline'
+                  }
+                }}
+              >
+                {entry.action} {entry.user} {entry.timestamp}
+              </Link>
+            </Box>
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ExpenseDetailLog

src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx

@@ -0,0 +1,431 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Box,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Tooltip,
+  IconButton,
+  CardHeader
+} from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CustomTextField from '@/@core/components/mui/TextField'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+import ImageUpload from '@/components/ImageUpload'
+
+interface PaymentFormData {
+  totalDibayar: string
+  tglTransaksi: string
+  referensi: string
+  nomor: string
+  dibayarDari: string
+}
+
+interface PemotonganItem {
+  id: string
+  dipotong: string
+  persentase: string
+  nominal: string
+  tipe: 'persen' | 'rupiah'
+}
+
+const ExpenseDetailSendPayment: React.FC = () => {
+  const [formData, setFormData] = useState<PaymentFormData>({
+    totalDibayar: '849.000',
+    tglTransaksi: '10/09/2025',
+    referensi: '',
+    nomor: 'PP/00025',
+    dibayarDari: '1-10001 Kas'
+  })
+
+  const [expanded, setExpanded] = useState<boolean>(false)
+  const [pemotonganItems, setPemotonganItems] = useState<PemotonganItem[]>([])
+
+  const dibayarDariOptions = [
+    { label: '1-10001 Kas', value: '1-10001 Kas' },
+    { label: '1-10002 Bank BCA', value: '1-10002 Bank BCA' },
+    { label: '1-10003 Bank Mandiri', value: '1-10003 Bank Mandiri' },
+    { label: '1-10004 Petty Cash', value: '1-10004 Petty Cash' }
+  ]
+
+  const pemotonganOptions = [
+    { label: 'PPN 11%', value: 'ppn' },
+    { label: 'PPh 21', value: 'pph21' },
+    { label: 'PPh 23', value: 'pph23' },
+    { label: 'Biaya Admin', value: 'admin' }
+  ]
+
+  const handleChange =
+    (field: keyof PaymentFormData) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | any) => {
+      setFormData(prev => ({
+        ...prev,
+        [field]: event.target.value
+      }))
+    }
+
+  const handleDibayarDariChange = (value: { label: string; value: string } | null) => {
+    setFormData(prev => ({
+      ...prev,
+      dibayarDari: value?.value || ''
+    }))
+  }
+
+  const addPemotongan = () => {
+    const newItem: PemotonganItem = {
+      id: Date.now().toString(),
+      dipotong: '',
+      persentase: '0',
+      nominal: '',
+      tipe: 'persen'
+    }
+    setPemotonganItems(prev => [...prev, newItem])
+  }
+
+  const removePemotongan = (id: string) => {
+    setPemotonganItems(prev => prev.filter(item => item.id !== id))
+  }
+
+  const updatePemotongan = (id: string, field: keyof PemotonganItem, value: string) => {
+    setPemotonganItems(prev => prev.map(item => (item.id === id ? { ...item, [field]: value } : item)))
+  }
+
+  const handleAccordionChange = () => {
+    setExpanded(!expanded)
+  }
+
+  const calculatePemotongan = (item: PemotonganItem): number => {
+    const totalDibayar = parseInt(formData.totalDibayar.replace(/\D/g, '')) || 0
+    const nilai = parseFloat(item.persentase) || 0
+
+    if (item.tipe === 'persen') {
+      return (totalDibayar * nilai) / 100
+    } else {
+      return nilai
+    }
+  }
+
+  const formatCurrency = (amount: string | number): string => {
+    const numAmount = typeof amount === 'string' ? parseInt(amount.replace(/\D/g, '')) : amount
+    return new Intl.NumberFormat('id-ID').format(numAmount)
+  }
+
+  const handleUpload = async (file: File): Promise<string> => {
+    // Simulate upload
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(URL.createObjectURL(file))
+      }, 1000)
+    })
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <Box display='flex' justifyContent='space-between' alignItems='center'>
+            <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
+              Kirim Pembayaran
+            </Typography>
+          </Box>
+        }
+      />
+      <CardContent>
+        <Grid container spacing={3}>
+          {/* Left Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            {/* Total Dibayar */}
+            <Box sx={{ mb: 3 }}>
+              <CustomTextField
+                fullWidth
+                label={
+                  <span>
+                    <span style={{ color: 'red' }}>*</span> Total Dibayar
+                  </span>
+                }
+                value={formData.totalDibayar}
+                onChange={handleChange('totalDibayar')}
+                sx={{
+                  '& .MuiInputBase-root': {
+                    textAlign: 'right'
+                  }
+                }}
+              />
+            </Box>
+
+            {/* Tgl. Transaksi */}
+            <Box sx={{ mb: 3 }}>
+              <CustomTextField
+                fullWidth
+                label={
+                  <span>
+                    <span style={{ color: 'red' }}>*</span> Tgl. Transaksi
+                  </span>
+                }
+                type='date'
+                value={formData.tglTransaksi.split('/').reverse().join('-')}
+                onChange={handleChange('tglTransaksi')}
+                slotProps={{
+                  input: {
+                    endAdornment: <i className='tabler-calendar' style={{ color: '#666' }} />
+                  }
+                }}
+              />
+            </Box>
+
+            {/* Referensi */}
+            <Box sx={{ mb: 3 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                <Typography variant='body2' sx={{ color: 'text.secondary' }}>
+                  Referensi
+                </Typography>
+                <Tooltip title='Informasi referensi pembayaran'>
+                  <IconButton size='small' sx={{ ml: 0.5 }}>
+                    <i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <CustomTextField
+                fullWidth
+                placeholder='Referensi'
+                value={formData.referensi}
+                onChange={handleChange('referensi')}
+              />
+            </Box>
+
+            {/* Attachment Accordion */}
+            <Accordion
+              expanded={expanded}
+              onChange={handleAccordionChange}
+              sx={{
+                boxShadow: 'none',
+                border: '1px solid #e0e0e0',
+                borderRadius: '8px',
+                '&:before': { display: 'none' }
+              }}
+            >
+              <AccordionSummary
+                expandIcon={
+                  <i
+                    className='tabler-chevron-right'
+                    style={{
+                      transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                      transition: 'transform 0.2s'
+                    }}
+                  />
+                }
+                sx={{
+                  backgroundColor: '#f8f9fa',
+                  borderRadius: '8px',
+                  minHeight: '48px',
+                  '& .MuiAccordionSummary-content': {
+                    margin: '12px 0'
+                  }
+                }}
+              >
+                <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                  Attachment
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails sx={{ p: 2 }}>
+                <ImageUpload
+                  onUpload={handleUpload}
+                  maxFileSize={1 * 1024 * 1024} // 1MB
+                  showUrlOption={false}
+                  dragDropText='Drop your image here'
+                  browseButtonText='Choose Image'
+                />
+              </AccordionDetails>
+            </Accordion>
+          </Grid>
+
+          {/* Right Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            {/* Nomor */}
+            <Box sx={{ mb: 3 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                <Typography variant='body2' sx={{ color: 'text.secondary' }}>
+                  Nomor
+                </Typography>
+                <Tooltip title='Nomor pembayaran otomatis'>
+                  <IconButton size='small' sx={{ ml: 0.5 }}>
+                    <i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <CustomTextField fullWidth value={formData.nomor} onChange={handleChange('nomor')} disabled />
+            </Box>
+
+            {/* Dibayar Dari */}
+            <Box sx={{ mb: 3 }}>
+              <Typography variant='body2' sx={{ color: 'text.secondary', mb: 1 }}>
+                <span style={{ color: 'red' }}>*</span> Dibayar Dari
+              </Typography>
+              <CustomAutocomplete
+                fullWidth
+                options={dibayarDariOptions}
+                getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
+                value={dibayarDariOptions.find(option => option.value === formData.dibayarDari) || null}
+                onChange={(_, value: { label: string; value: string } | null) => handleDibayarDariChange(value)}
+                renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih akun pembayaran' />}
+                noOptionsText='Tidak ada pilihan'
+              />
+            </Box>
+
+            {/* Empty space to match Referensi height */}
+            <Box sx={{ mb: 3, height: '74px' }}>{/* Empty space */}</Box>
+
+            {/* Pemotongan Button - aligned with Attachment */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'flex-start',
+                minHeight: '48px'
+              }}
+            >
+              <Button
+                startIcon={<i className='tabler-plus' />}
+                variant='text'
+                color='primary'
+                sx={{ textTransform: 'none' }}
+                onClick={addPemotongan}
+              >
+                Pemotongan
+              </Button>
+            </Box>
+          </Grid>
+        </Grid>
+
+        {/* Pemotongan Items */}
+        {pemotonganItems.length > 0 && (
+          <Box sx={{ mt: 3 }}>
+            {pemotonganItems.map((item, index) => (
+              <Box
+                key={item.id}
+                sx={{
+                  mb: 2,
+                  p: 2,
+                  border: '1px solid #e0e0e0',
+                  borderRadius: 1,
+                  position: 'relative'
+                }}
+              >
+                <Grid container spacing={2} alignItems='center'>
+                  <Grid size={{ xs: 12, md: 1 }}>
+                    <IconButton
+                      color='error'
+                      size='small'
+                      onClick={() => removePemotongan(item.id)}
+                      sx={{
+                        backgroundColor: '#fff',
+                        border: '1px solid #f44336',
+                        '&:hover': { backgroundColor: '#ffebee' }
+                      }}
+                    >
+                      <i className='tabler-minus' style={{ fontSize: '16px' }} />
+                    </IconButton>
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <CustomAutocomplete
+                      fullWidth
+                      options={pemotonganOptions}
+                      getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
+                      value={pemotonganOptions.find(option => option.value === item.dipotong) || null}
+                      onChange={(_, value: { label: string; value: string } | null) =>
+                        updatePemotongan(item.id, 'dipotong', value?.value || '')
+                      }
+                      renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih dipotong...' />}
+                      noOptionsText='Tidak ada pilihan'
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 2 }}>
+                    <CustomTextField
+                      fullWidth
+                      value={item.persentase}
+                      onChange={e => updatePemotongan(item.id, 'persentase', e.target.value)}
+                      placeholder='0'
+                      sx={{
+                        '& .MuiInputBase-root': {
+                          textAlign: 'center'
+                        }
+                      }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 1 }}>
+                    <Box sx={{ display: 'flex', gap: 0.5 }}>
+                      <Button
+                        variant={item.tipe === 'persen' ? 'contained' : 'outlined'}
+                        size='small'
+                        onClick={() => updatePemotongan(item.id, 'tipe', 'persen')}
+                        sx={{ minWidth: '40px', px: 1 }}
+                      >
+                        %
+                      </Button>
+                      <Button
+                        variant={item.tipe === 'rupiah' ? 'contained' : 'outlined'}
+                        size='small'
+                        onClick={() => updatePemotongan(item.id, 'tipe', 'rupiah')}
+                        sx={{ minWidth: '40px', px: 1 }}
+                      >
+                        Rp
+                      </Button>
+                    </Box>
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+                      <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                        {formatCurrency(calculatePemotongan(item))}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                </Grid>
+              </Box>
+            ))}
+          </Box>
+        )}
+
+        {/* Bottom Section */}
+        <Box sx={{ mt: 4, pt: 3, borderTop: '1px solid #e0e0e0' }}>
+          <Grid container spacing={2} alignItems='center'>
+            <Grid size={{ xs: 12, md: 6 }}>{/* Empty space */}</Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+                <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                  Total
+                </Typography>
+                <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                  {formatCurrency(formData.totalDibayar)}
+                </Typography>
+              </Box>
+
+              <Button
+                variant='contained'
+                startIcon={<i className='tabler-plus' />}
+                fullWidth
+                sx={{
+                  py: 1.5,
+                  textTransform: 'none',
+                  fontWeight: 'medium'
+                }}
+              >
+                Tambah Pembayaran
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ExpenseDetailSendPayment

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

@@ -0,0 +1,51 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsHorizontalWithAvatarProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CardStatsHorizontalWithAvatar from '@components/card-statistics/HorizontalWithAvatar'
+
+const data: CardStatsHorizontalWithAvatarProps[] = [
+  {
+    stats: '10.495.100',
+    title: 'Bulan Ini',
+    avatarIcon: 'tabler-calendar-month',
+    avatarColor: 'warning'
+  },
+  {
+    stats: '25.868.800',
+    title: '30 Hari Lalu',
+    avatarIcon: 'tabler-calendar-time',
+    avatarColor: 'error'
+  },
+  {
+    stats: '17.903.400',
+    title: 'Belum Dibayar',
+    avatarIcon: 'tabler-clock-exclamation',
+    avatarColor: 'warning'
+  },
+  {
+    stats: '13.467.200',
+    title: 'Jatuh Tempo',
+    avatarIcon: 'tabler-calendar-due',
+    avatarColor: 'success'
+  }
+]
+
+const ExpenseListCard = () => {
+  return (
+    data && (
+      <Grid container spacing={6}>
+        {data.map((item, index) => (
+          <Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
+            <CardStatsHorizontalWithAvatar {...item} avatarSkin='light' />
+          </Grid>
+        ))}
+      </Grid>
+    )
+  )
+}
+
+export default ExpenseListCard

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

@@ -0,0 +1,519 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { ExpenseType } from '@/types/apps/expenseTypes'
+import { expenseData } from '@/data/dummy/expense'
+import StatusFilterTabs from '@/components/StatusFilterTab'
+import DateRangePicker from '@/components/RangeDatePicker'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type ExpenseTypeWithAction = ExpenseType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for Expense
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Belum Dibayar':
+      return 'error'
+    case 'Dibayar Sebagian':
+      return 'warning'
+    case 'Lunas':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<ExpenseTypeWithAction>()
+
+const ExpenseListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addExpenseOpen, setAddExpenseOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [expenseId, setExpenseId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<ExpenseType[]>(expenseData)
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = expenseData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        expense =>
+          expense.number.toLowerCase().includes(search.toLowerCase()) ||
+          expense.benefeciaryName.toLowerCase().includes(search.toLowerCase()) ||
+          expense.benefeciaryCompany.toLowerCase().includes(search.toLowerCase()) ||
+          expense.status.toLowerCase().includes(search.toLowerCase()) ||
+          expense.reference.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(expense => expense.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  // Calculate subtotal and total from filtered data
+  const subtotalBalanceDue = useMemo(() => {
+    return filteredData.reduce((sum, expense) => sum + expense.balanceDue, 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)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleExpenseClick = (expenseId: string) => {
+    console.log('Navigasi ke detail Expense:', expenseId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<ExpenseTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor Expense',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/expense/${row.original.id}/detail`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('benefeciaryName', {
+        header: 'Beneficiary',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.benefeciaryName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.benefeciaryCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('balanceDue', {
+        header: 'Sisa Tagihan',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.balanceDue > 0 ? 'text-red-600' : 'text-green-600'}`}>
+            {formatCurrency(row.original.balanceDue)}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('total', {
+        header: 'Total',
+        cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as ExpenseType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs and Range Date */}
+        <div className='p-6 border-bs'>
+          <div className='flex items-center justify-between'>
+            <StatusFilterTabs
+              statusOptions={[
+                'Semua',
+                'Belum Dibayar',
+                'Dibayar Sebagian',
+                'Lunas',
+                'Jatuh Tempo',
+                'Transaksi Berulang'
+              ]}
+              selectedStatus={statusFilter}
+              onStatusChange={handleStatusFilter}
+            />
+            <DateRangePicker
+              startDate={startDate}
+              endDate={endDate}
+              onStartDateChange={setStartDate}
+              onEndDateChange={setEndDate}
+            />
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Expense'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/expense/add', locale as Locale)}
+            >
+              Tambah
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </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 className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibol'>
+                      {formatCurrency(subtotalBalanceDue)}
+                    </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 className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      {formatCurrency(subtotalBalanceDue + taxAmount)}
+                    </Typography>
+                  </td>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      {formatCurrency(finalTotal)}
+                    </Typography>
+                  </td>
+                </tr>
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default ExpenseListTable

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

@@ -0,0 +1,23 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import ExpenseListTable from './ExpenseListTable'
+import ExpenseListCard from './ExpenseListCard'
+
+// Type Imports
+
+// Component Imports
+
+const ExpenseList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseListCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseList

src/views/apps/fixed-assets/FixedAssetCard.tsx

@@ -0,0 +1,63 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  // Fixed Assets Data (from the image)
+  {
+    title: 'Nilai Aset',
+    stats: 'Rp 17.900.000',
+    avatarIcon: 'tabler-building-store',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '100%',
+    subtitle: 'Hari ini vs 365 hari lalu'
+  },
+  {
+    title: 'Depresiasi Aset',
+    stats: 'Rp 0',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'secondary',
+    trend: 'neutral',
+    trendNumber: '0%',
+    subtitle: 'Tahun ini vs tanggal sama tahun lalu'
+  },
+  {
+    title: 'Laba/Rugi Pelepasan Aset',
+    stats: 'Rp 0',
+    avatarIcon: 'tabler-exchange',
+    avatarColor: 'secondary',
+    trend: 'neutral',
+    trendNumber: '0%',
+    subtitle: 'Tahun ini vs tanggal sama tahun lalu'
+  },
+  {
+    title: 'Aset Baru',
+    stats: 'Rp 17.900.000',
+    avatarIcon: 'tabler-plus-circle',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '100%',
+    subtitle: 'Tahun ini vs tanggal sama tahun lalu'
+  }
+]
+
+const FixedAssetCards = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default FixedAssetCards

src/views/apps/fixed-assets/FixedAssetTable.tsx

@@ -0,0 +1,512 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import StatusFilterTabs from '@/components/StatusFilterTab'
+
+// Fixed Asset Type
+export type FixedAssetType = {
+  id: number
+  assetName: string
+  puchaseBill: string // Code Purchase
+  reference: string
+  date: string
+  price: number
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type FixedAssetTypeWithAction = FixedAssetType & {
+  actions?: string
+}
+
+// Dummy data for fixed assets
+const fixedAssetData: FixedAssetType[] = [
+  {
+    id: 1,
+    assetName: 'Laptop Dell XPS 13',
+    puchaseBill: 'PB-2024-001',
+    reference: 'REF-001',
+    date: '2024-01-15',
+    price: 15000000
+  },
+  {
+    id: 2,
+    assetName: 'Office Furniture Set',
+    puchaseBill: 'PB-2024-002',
+    reference: 'REF-002',
+    date: '2024-02-10',
+    price: 8500000
+  },
+  {
+    id: 3,
+    assetName: 'Printer Canon ImageClass',
+    puchaseBill: 'PB-2024-003',
+    reference: 'REF-003',
+    date: '2024-02-20',
+    price: 3200000
+  },
+  {
+    id: 4,
+    assetName: 'Air Conditioning Unit',
+    puchaseBill: 'PB-2024-004',
+    reference: 'REF-004',
+    date: '2024-03-05',
+    price: 12000000
+  },
+  {
+    id: 5,
+    assetName: 'Conference Room TV',
+    puchaseBill: 'PB-2024-005',
+    reference: 'REF-005',
+    date: '2024-03-15',
+    price: 7500000
+  },
+  {
+    id: 6,
+    assetName: 'MacBook Pro 16"',
+    puchaseBill: 'PB-2024-006',
+    reference: 'REF-006',
+    date: '2024-04-01',
+    price: 28000000
+  },
+  {
+    id: 7,
+    assetName: 'Standing Desk Electric',
+    puchaseBill: 'PB-2024-007',
+    reference: 'REF-007',
+    date: '2024-04-15',
+    price: 4500000
+  },
+  {
+    id: 8,
+    assetName: 'Server HP ProLiant',
+    puchaseBill: 'PB-2024-008',
+    reference: 'REF-008',
+    date: '2024-05-01',
+    price: 45000000
+  }
+]
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Format date
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('id-ID', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<FixedAssetTypeWithAction>()
+
+const FixedAssetTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addAssetOpen, setAddAssetOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [assetId, setAssetId] = useState('')
+  const [search, setSearch] = useState('')
+  const [filteredData, setFilteredData] = useState<FixedAssetType[]>([])
+  const [statusFilter, setStatusFilter] = useState<string>('Draft')
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Initialize data on component mount
+  useEffect(() => {
+    console.log('Initial fixedAssetData:', fixedAssetData)
+    setFilteredData(fixedAssetData)
+  }, [])
+
+  // Filter data based on search
+  useEffect(() => {
+    let filtered = [...fixedAssetData]
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        asset =>
+          asset.assetName.toLowerCase().includes(search.toLowerCase()) ||
+          asset.puchaseBill.toLowerCase().includes(search.toLowerCase()) ||
+          asset.reference.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    console.log('Filtered data:', filtered) // Debug log
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  // Calculate total value from filtered data
+  const totalValue = useMemo(() => {
+    return filteredData.reduce((sum, asset) => sum + asset.price, 0)
+  }, [filteredData])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleAssetClick = (assetId: string) => {
+    console.log('Navigasi ke detail Asset:', assetId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<FixedAssetTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('puchaseBill', {
+        header: 'Kode Pembelian',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/fixed-asset/${row.original.id}/detail`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.puchaseBill}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('assetName', {
+        header: 'Nama Aset',
+        cell: ({ row }) => (
+          <Typography color='text.primary' className='font-medium'>
+            {row.original.assetName}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal Pembelian',
+        cell: ({ row }) => <Typography>{formatDate(row.original.date)}</Typography>
+      }),
+      columnHelper.accessor('price', {
+        header: 'Harga',
+        cell: ({ row }) => (
+          <Typography className='font-medium text-primary'>{formatCurrency(row.original.price)}</Typography>
+        )
+      })
+    ],
+    [locale]
+  )
+
+  const table = useReactTable({
+    data: paginatedData as FixedAssetType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Header */}
+        <div className='p-6 border-bs'>
+          <StatusFilterTabs
+            statusOptions={['Draft', 'Terdaftar', 'Terjual/Dilepaskan']}
+            selectedStatus={statusFilter}
+            onStatusChange={handleStatusFilter}
+          />
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Aset Tetap'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/fixed-assets/add', locale as Locale)}
+            >
+              Tambah Aset
+            </Button>
+          </div>
+        </div>
+
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+
+                {/* Total Row */}
+                <tr className='border-t-2 bg-gray-50'>
+                  <td className='font-bold text-lg py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      Total Nilai Aset
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-bold text-lg py-4'>
+                    <Typography variant='h6' className='font-bold text-primary'>
+                      {formatCurrency(totalValue)}
+                    </Typography>
+                  </td>
+                  <td></td>
+                </tr>
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default FixedAssetTable

src/views/apps/fixed-assets/add/FixedAssetAddForm.tsx

@@ -0,0 +1,561 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Card, CardContent, Typography, Button, Switch, FormControlLabel, Box, Radio } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CustomTextField from '@/@core/components/mui/TextField'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+
+interface FormData {
+  namaAset: string
+  nomor: string
+  tanggalPembelian: string
+  hargaBeli: string
+  akunAsetTetap: any
+  dikreditkanDariAkun: any
+  deskripsi: string
+  referensi: string
+  tanpaPenyusutan: boolean
+  akunAkumulasiPenyusutan: any
+  akunPenyusutan: any
+  nilaiPenyusuanPerTahun: string
+  masaManfaatTahun: string
+  masaManfaatBulan: string
+  depreciationType: 'percentage' | 'useful-life'
+  showAdditionalOptions: boolean
+  metodePenyusutan: any
+  tanggalMulaiPenyusutan: string
+  akumulasiPenyusutan: string
+  batasBiaya: string
+  nilaiResidu: string
+  showImageUpload: boolean
+  uploadedImage: string | null
+}
+
+// Simple ImageUpload component
+const ImageUpload = ({ onUpload, maxFileSize, showUrlOption, dragDropText, browseButtonText }: any) => {
+  const [dragOver, setDragOver] = useState(false)
+
+  const handleFileSelect = (file: File) => {
+    if (file.size > maxFileSize) {
+      alert(`File size exceeds ${maxFileSize / (1024 * 1024)}MB limit`)
+      return
+    }
+
+    const url = URL.createObjectURL(file)
+    onUpload(file, url)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragOver(false)
+    const files = Array.from(e.dataTransfer.files)
+    if (files[0]) {
+      handleFileSelect(files[0])
+    }
+  }
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
+    if (files[0]) {
+      handleFileSelect(files[0])
+    }
+  }
+
+  return (
+    <Box
+      sx={{
+        border: dragOver ? '2px dashed #1976d2' : '2px dashed #ccc',
+        borderRadius: 2,
+        p: 3,
+        textAlign: 'center',
+        backgroundColor: dragOver ? '#f5f5f5' : 'transparent',
+        transition: 'all 0.3s ease'
+      }}
+      onDrop={handleDrop}
+      onDragOver={e => {
+        e.preventDefault()
+        setDragOver(true)
+      }}
+      onDragLeave={() => setDragOver(false)}
+    >
+      <Typography variant='body1' sx={{ mb: 2 }}>
+        {dragDropText}
+      </Typography>
+      <input
+        type='file'
+        accept='image/*'
+        style={{ display: 'none' }}
+        id='image-upload-input'
+        onChange={handleFileInput}
+      />
+      <label htmlFor='image-upload-input'>
+        <Button variant='outlined' component='span'>
+          {browseButtonText}
+        </Button>
+      </label>
+    </Box>
+  )
+}
+
+const FixedAssetAddForm = () => {
+  const [formData, setFormData] = useState<FormData>({
+    namaAset: '',
+    nomor: 'FA/00003',
+    tanggalPembelian: '11/09/2025',
+    hargaBeli: '0',
+    akunAsetTetap: null,
+    dikreditkanDariAkun: null,
+    deskripsi: '',
+    referensi: '',
+    tanpaPenyusutan: true,
+    akunAkumulasiPenyusutan: null,
+    akunPenyusutan: null,
+    nilaiPenyusuanPerTahun: '',
+    masaManfaatTahun: '',
+    masaManfaatBulan: '',
+    depreciationType: 'percentage',
+    showAdditionalOptions: false,
+    metodePenyusutan: null,
+    tanggalMulaiPenyusutan: '11/09/2025',
+    akumulasiPenyusutan: '0',
+    batasBiaya: '0',
+    nilaiResidu: '0',
+    showImageUpload: false,
+    uploadedImage: null
+  })
+
+  const handleInputChange = (field: keyof FormData, value: any) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }))
+  }
+
+  // Sample options - replace with your actual data
+  const akunAsetTetapOptions = [{ label: '1-10705 Aset Tetap - Perlengkapan Kantor', value: '1-10705' }]
+
+  const dikreditkanDariAkunOptions = [{ label: 'Silakan pilih dikreditkan dari akun', value: '' }]
+
+  const akunAkumulasiPenyusutanOptions = [{ label: 'Silakan pilih akun akumulasi penyusutan', value: '' }]
+
+  const akunPenyusutanOptions = [{ label: 'Silakan pilih akbun penyusutan', value: '' }]
+
+  const metodePenyusutanOptions = [
+    { label: 'Straight Line', value: 'straight-line' },
+    { label: 'Declining Balance', value: 'declining-balance' },
+    { label: 'Sum of Years Digits', value: 'sum-of-years' }
+  ]
+
+  const handleUpload = (file: File, url: string) => {
+    handleInputChange('uploadedImage', url)
+    console.log('Image uploaded:', { file, url })
+  }
+
+  const handleSubmit = () => {
+    console.log('Form Data:', formData)
+    // Handle form submission here
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant='h6' gutterBottom>
+          Detil
+        </Typography>
+
+        <Box sx={{ mb: 2 }}>
+          <Button
+            variant='text'
+            color='primary'
+            sx={{ textTransform: 'none', p: 0, minWidth: 'auto' }}
+            onClick={() => handleInputChange('showImageUpload', !formData.showImageUpload)}
+          >
+            {formData.showImageUpload ? '- Sembunyikan gambar aset tetap' : '+ Tampilkan gambar aset tetap'}
+          </Button>
+        </Box>
+
+        {/* Image Upload Section */}
+        {formData.showImageUpload && (
+          <Box sx={{ mb: 3 }}>
+            <ImageUpload
+              onUpload={handleUpload}
+              maxFileSize={1 * 1024 * 1024} // 1MB
+              showUrlOption={false}
+              dragDropText='Drop your image here'
+              browseButtonText='Choose Image'
+            />
+            {formData.uploadedImage && (
+              <Box sx={{ mt: 2, textAlign: 'center' }}>
+                <img
+                  src={formData.uploadedImage}
+                  alt='Uploaded asset'
+                  style={{ maxWidth: '200px', maxHeight: '200px', borderRadius: '8px' }}
+                />
+              </Box>
+            )}
+          </Box>
+        )}
+
+        <Grid container spacing={3}>
+          {/* Left Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            <CustomTextField
+              fullWidth
+              label='Nama Aset'
+              placeholder='Nama Aset'
+              value={formData.namaAset}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('namaAset', e.target.value)}
+              required
+              sx={{ mb: 3 }}
+            />
+
+            <CustomTextField
+              fullWidth
+              label='Tanggal Pembelian'
+              type='date'
+              value={formData.tanggalPembelian}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleInputChange('tanggalPembelian', e.target.value)
+              }
+              InputLabelProps={{
+                shrink: true
+              }}
+              required
+              sx={{ mb: 3 }}
+            />
+
+            <CustomAutocomplete
+              fullWidth
+              options={akunAsetTetapOptions}
+              value={formData.akunAsetTetap}
+              onChange={(event, newValue) => handleInputChange('akunAsetTetap', newValue)}
+              renderInput={params => (
+                <CustomTextField
+                  {...params}
+                  label='Akun Aset Tetap'
+                  placeholder='1-10705 Aset Tetap - Perlengkapan Kantor'
+                  fullWidth
+                  required
+                />
+              )}
+              sx={{ mb: 3 }}
+            />
+
+            <CustomTextField
+              fullWidth
+              label='Deskripsi'
+              placeholder='Deskripsi'
+              multiline
+              rows={4}
+              value={formData.deskripsi}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('deskripsi', e.target.value)}
+              sx={{ mb: 3 }}
+            />
+
+            <CustomTextField
+              fullWidth
+              label='Referensi'
+              placeholder='Referensi'
+              value={formData.referensi}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('referensi', e.target.value)}
+            />
+          </Grid>
+
+          {/* Right Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            <CustomTextField
+              fullWidth
+              label='Nomor'
+              value={formData.nomor}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('nomor', e.target.value)}
+              sx={{ mb: 3 }}
+            />
+
+            <CustomTextField
+              fullWidth
+              label='Harga Beli'
+              type='number'
+              value={formData.hargaBeli}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('hargaBeli', e.target.value)}
+              sx={{ mb: 3 }}
+            />
+
+            <CustomAutocomplete
+              fullWidth
+              options={dikreditkanDariAkunOptions}
+              value={formData.dikreditkanDariAkun}
+              onChange={(event, newValue) => handleInputChange('dikreditkanDariAkun', newValue)}
+              renderInput={params => (
+                <CustomTextField
+                  {...params}
+                  label='Dikreditkan Dari Akun'
+                  placeholder='Silakan pilih dikreditkan dari akun'
+                  fullWidth
+                  required
+                />
+              )}
+              sx={{ mb: 3 }}
+            />
+          </Grid>
+        </Grid>
+
+        {/* Penyusutan Section */}
+        <Box sx={{ mt: 4 }}>
+          <Typography variant='h6' gutterBottom>
+            Penyusutan
+          </Typography>
+
+          <FormControlLabel
+            control={
+              <Switch
+                checked={formData.tanpaPenyusutan}
+                onChange={e => handleInputChange('tanpaPenyusutan', e.target.checked)}
+                color='primary'
+              />
+            }
+            label='Tanpa penyusutan'
+          />
+
+          {/* Show depreciation fields when switch is OFF (false) */}
+          {!formData.tanpaPenyusutan && (
+            <Grid container spacing={3} sx={{ mt: 2 }}>
+              <Grid size={{ xs: 12, md: 6 }}>
+                <CustomAutocomplete
+                  fullWidth
+                  options={akunAkumulasiPenyusutanOptions}
+                  value={formData.akunAkumulasiPenyusutan}
+                  onChange={(event, newValue) => handleInputChange('akunAkumulasiPenyusutan', newValue)}
+                  renderInput={params => (
+                    <CustomTextField
+                      {...params}
+                      label='Akun Akumulasi Penyusutan'
+                      placeholder='Silakan pilih akun akumulasi penyusutan'
+                      fullWidth
+                      required
+                    />
+                  )}
+                  sx={{ mb: 3 }}
+                />
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <CustomAutocomplete
+                  fullWidth
+                  options={akunPenyusutanOptions}
+                  value={formData.akunPenyusutan}
+                  onChange={(event, newValue) => handleInputChange('akunPenyusutan', newValue)}
+                  renderInput={params => (
+                    <CustomTextField
+                      {...params}
+                      label='Akun penyusutan'
+                      placeholder='Silakan pilih akbun penyusutan'
+                      fullWidth
+                      required
+                    />
+                  )}
+                  sx={{ mb: 3 }}
+                />
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <Box sx={{ mb: 3 }}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                    Nilai penyusutan per tahun *
+                  </Typography>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Radio
+                      checked={formData.depreciationType === 'percentage'}
+                      onChange={() => handleInputChange('depreciationType', 'percentage')}
+                      value='percentage'
+                      name='depreciation-method'
+                      color='primary'
+                      size='small'
+                    />
+                    <Box>
+                      <CustomTextField
+                        value={formData.nilaiPenyusuanPerTahun}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          handleInputChange('nilaiPenyusuanPerTahun', e.target.value)
+                        }
+                        disabled={formData.depreciationType !== 'percentage'}
+                        sx={{
+                          flex: 1,
+                          '& .MuiOutlinedInput-root': {
+                            border: 'none',
+                            '& fieldset': {
+                              border: 'none'
+                            }
+                          }
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                </Box>
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <Box sx={{ mb: 3 }}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                    Masa Manfaat *
+                  </Typography>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Radio
+                      checked={formData.depreciationType === 'useful-life'}
+                      onChange={() => handleInputChange('depreciationType', 'useful-life')}
+                      value='useful-life'
+                      name='depreciation-method'
+                      color='primary'
+                      size='small'
+                    />
+                    <Box>
+                      <CustomTextField
+                        placeholder='Tahun'
+                        value={formData.masaManfaatTahun}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          handleInputChange('masaManfaatTahun', e.target.value)
+                        }
+                        disabled={formData.depreciationType !== 'useful-life'}
+                        sx={{
+                          flex: 1,
+                          '& .MuiOutlinedInput-root': {
+                            borderRadius: 0,
+                            borderRight: '1px solid #e0e0e0',
+                            '& fieldset': {
+                              border: 'none'
+                            }
+                          }
+                        }}
+                      />
+                      <CustomTextField
+                        placeholder='Bulan'
+                        value={formData.masaManfaatBulan}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          handleInputChange('masaManfaatBulan', e.target.value)
+                        }
+                        disabled={formData.depreciationType !== 'useful-life'}
+                        sx={{
+                          flex: 1,
+                          '& .MuiOutlinedInput-root': {
+                            borderRadius: 0,
+                            '& fieldset': {
+                              border: 'none'
+                            }
+                          }
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                </Box>
+              </Grid>
+
+              <Grid size={12}>
+                <Button
+                  variant='text'
+                  color='primary'
+                  sx={{ textTransform: 'none', p: 0, minWidth: 'auto' }}
+                  onClick={() => handleInputChange('showAdditionalOptions', !formData.showAdditionalOptions)}
+                >
+                  {formData.showAdditionalOptions ? '- Sembunyikan opsi lainnya' : '+ Tampilkan opsi lainnya'}
+                </Button>
+              </Grid>
+
+              {/* Additional Options */}
+              {formData.showAdditionalOptions && (
+                <>
+                  <Grid size={{ xs: 12, md: 6 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500, color: 'error.main' }}>
+                      Metode Penyusutan *
+                    </Typography>
+                    <CustomAutocomplete
+                      fullWidth
+                      options={metodePenyusutanOptions}
+                      value={formData.metodePenyusutan}
+                      onChange={(event, newValue) => handleInputChange('metodePenyusutan', newValue)}
+                      renderInput={params => (
+                        <CustomTextField {...params} placeholder='Straight Line' fullWidth required />
+                      )}
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 6 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                      Tanggal Mulai Penyusutan
+                    </Typography>
+                    <CustomTextField
+                      fullWidth
+                      type='date'
+                      value={formData.tanggalMulaiPenyusutan}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('tanggalMulaiPenyusutan', e.target.value)
+                      }
+                      InputLabelProps={{
+                        shrink: true
+                      }}
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                      Akumulasi Penyusutan
+                    </Typography>
+                    <CustomTextField
+                      fullWidth
+                      type='number'
+                      value={formData.akumulasiPenyusutan}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('akumulasiPenyusutan', e.target.value)
+                      }
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                      Batas Biaya
+                    </Typography>
+                    <CustomTextField
+                      fullWidth
+                      type='number'
+                      value={formData.batasBiaya}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('batasBiaya', e.target.value)
+                      }
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                      Nilai Residu
+                    </Typography>
+                    <CustomTextField
+                      fullWidth
+                      type='number'
+                      value={formData.nilaiResidu}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('nilaiResidu', e.target.value)
+                      }
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+                </>
+              )}
+            </Grid>
+          )}
+        </Box>
+
+        {/* Submit Button */}
+        <Box sx={{ mt: 4, display: 'flex', justifyContent: 'flex-end' }}>
+          <Button variant='contained' color='primary' onClick={handleSubmit} sx={{ minWidth: 120 }}>
+            Simpan
+          </Button>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default FixedAssetAddForm

src/views/apps/fixed-assets/add/FixedAssetAddHeader.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const FixedAssetAddHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Tambah Asset Tetap
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default FixedAssetAddHeader