Expense Add

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/data/dummy/expense.ts

@@ -1,4 +1,4 @@
-import { ExpenseType } from '@/types/apps/expenseType'
+import { ExpenseType } from '@/types/apps/expenseTypes'
 
 export const expenseData: ExpenseType[] = [
   {

src/types/apps/expenseType.ts

@@ -1,11 +0,0 @@
-export type ExpenseType = {
-  id: number
-  date: string
-  number: string
-  reference: string
-  benefeciaryName: string
-  benefeciaryCompany: string
-  status: string
-  balanceDue: number
-  total: number
-}

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/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/list/ExpenseListTable.tsx

@@ -40,7 +40,7 @@ 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/expenseType'
+import { ExpenseType } from '@/types/apps/expenseTypes'
 import { expenseData } from '@/data/dummy/expense'
 import StatusFilterTabs from '@/components/StatusFilterTab'
 import DateRangePicker from '@/components/RangeDatePicker'
@@ -387,7 +387,7 @@ const ExpenseListTable = () => {
               component={Link}
               className='max-sm:is-full is-auto'
               startIcon={<i className='tabler-plus' />}
-              href={getLocalizedUrl('/apps/expenses/add', locale as Locale)}
+              href={getLocalizedUrl('/apps/expense/add', locale as Locale)}
             >
               Tambah
             </Button>

src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx

@@ -1,7 +1,18 @@
 'use client'
 
 import React from 'react'
-import { Button, Typography } from '@mui/material'
+import {
+  Button,
+  Typography,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper
+} from '@mui/material'
 import Grid from '@mui/material/Grid2'
 import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
 import CustomTextField from '@/@core/components/mui/TextField'
@@ -53,77 +64,40 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
   ]
 
   return (
-    <Grid size={12} sx={{ mt: 4 }}>
+    <Grid size={{ xs: 12 }} sx={{ mt: 4 }}>
       <Typography variant='h6' sx={{ mb: 2, fontWeight: 600 }}>
         Bahan Baku / Ingredients
       </Typography>
 
-      {/* Table Header */}
+      <TableContainer component={Paper} variant='outlined'>
-      <Grid container spacing={1} sx={{ mb: 2, px: 1 }}>
+        <Table>
-        <Grid size={1.8}>
+          <TableHead>
-          <Typography variant='subtitle2' fontWeight={600}>
+            <TableRow sx={{ backgroundColor: 'grey.50' }}>
-            Bahan Baku
+              <TableCell sx={{ fontWeight: 'bold', minWidth: 180 }}>Bahan Baku</TableCell>
-          </Typography>
+              <TableCell sx={{ fontWeight: 'bold', minWidth: 150 }}>Deskripsi</TableCell>
-        </Grid>
+              <TableCell sx={{ fontWeight: 'bold', width: 100 }}>Kuantitas</TableCell>
-        <Grid size={1.8}>
+              <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Satuan</TableCell>
-          <Typography variant='subtitle2' fontWeight={600}>
+              <TableCell sx={{ fontWeight: 'bold', width: 100 }}>Discount</TableCell>
-            Deskripsi
+              <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Harga</TableCell>
-          </Typography>
+              <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Pajak</TableCell>
-        </Grid>
+              <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Waste</TableCell>
-        <Grid size={1}>
+              <TableCell sx={{ fontWeight: 'bold', width: 100, textAlign: 'right' }}>Total</TableCell>
-          <Typography variant='subtitle2' fontWeight={600}>
+              <TableCell sx={{ width: 50 }}></TableCell>
-            Kuantitas
+            </TableRow>
-          </Typography>
+          </TableHead>
-        </Grid>
+          <TableBody>
-        <Grid size={1.2}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Satuan
-          </Typography>
-        </Grid>
-        <Grid size={1}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Discount
-          </Typography>
-        </Grid>
-        <Grid size={1.2}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Harga
-          </Typography>
-        </Grid>
-        <Grid size={1.2}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Pajak
-          </Typography>
-        </Grid>
-        <Grid size={1.2}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Waste
-          </Typography>
-        </Grid>
-        <Grid size={1}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Total
-          </Typography>
-        </Grid>
-        <Grid size={0.6}></Grid>
-      </Grid>
-
-      {/* Ingredient Items */}
             {formData.ingredientItems.map((item: IngredientItem, index: number) => (
-        <Grid container spacing={1} key={item.id} sx={{ mb: 2, alignItems: 'center' }}>
+              <TableRow key={item.id}>
-          <Grid size={1.8}>
+                <TableCell>
                   <CustomAutocomplete
-              fullWidth
                     size='small'
                     options={ingredientOptions}
                     value={item.ingredient}
                     onChange={(event, newValue) => handleIngredientChange(index, 'ingredient', newValue)}
-              renderInput={params => (
+                    renderInput={params => <CustomTextField {...params} placeholder='Pilih Bahan Baku' />}
-                <CustomTextField {...params} placeholder='Pilih Bahan Baku' size='small' fullWidth />
-              )}
                   />
-          </Grid>
+                </TableCell>
-          <Grid size={1.8}>
+                <TableCell>
                   <CustomTextField
                     fullWidth
                     size='small'
@@ -133,8 +107,8 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
                     }
                     placeholder='Deskripsi'
                   />
-          </Grid>
+                </TableCell>
-          <Grid size={1}>
+                <TableCell>
                   <CustomTextField
                     fullWidth
                     size='small'
@@ -145,18 +119,17 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
                     }
                     inputProps={{ min: 1 }}
                   />
-          </Grid>
+                </TableCell>
-          <Grid size={1.2}>
+                <TableCell>
                   <CustomAutocomplete
-              fullWidth
                     size='small'
                     options={satuanOptions}
                     value={item.satuan}
                     onChange={(event, newValue) => handleIngredientChange(index, 'satuan', newValue)}
-              renderInput={params => <CustomTextField {...params} placeholder='Pilih...' size='small' fullWidth />}
+                    renderInput={params => <CustomTextField {...params} placeholder='Pilih...' />}
                   />
-          </Grid>
+                </TableCell>
-          <Grid size={1}>
+                <TableCell>
                   <CustomTextField
                     fullWidth
                     size='small'
@@ -166,19 +139,18 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
                     }
                     placeholder='0%'
                   />
-          </Grid>
+                </TableCell>
-          <Grid size={1.2}>
+                <TableCell>
                   <CustomTextField
                     fullWidth
                     size='small'
                     type='number'
-              value={item.harga === 0 ? '' : item.harga?.toString() || ''} // Ubah ini: 0 jadi empty string
+                    value={item.harga === 0 ? '' : item.harga?.toString() || ''}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       const value = e.target.value
 
                       if (value === '') {
-                  // Jika kosong, set ke null atau undefined, bukan 0
+                        handleIngredientChange(index, 'harga', null)
-                  handleIngredientChange(index, 'harga', null) // atau undefined
                         return
                       }
 
@@ -188,61 +160,65 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
                     inputProps={{ min: 0, step: 'any' }}
                     placeholder='0'
                   />
-          </Grid>
+                </TableCell>
-          <Grid size={1.2}>
+                <TableCell>
                   <CustomAutocomplete
-              fullWidth
                     size='small'
                     options={pajakOptions}
                     value={item.pajak}
                     onChange={(event, newValue) => handleIngredientChange(index, 'pajak', newValue)}
-              renderInput={params => <CustomTextField {...params} placeholder='...' size='small' fullWidth />}
+                    renderInput={params => <CustomTextField {...params} placeholder='...' />}
                   />
-          </Grid>
+                </TableCell>
-          <Grid size={1.2}>
+                <TableCell>
                   <CustomAutocomplete
-              fullWidth
                     size='small'
                     options={wasteOptions}
                     value={item.waste}
                     onChange={(event, newValue) => handleIngredientChange(index, 'waste', newValue)}
-              renderInput={params => <CustomTextField {...params} placeholder='...' size='small' fullWidth />}
+                    renderInput={params => <CustomTextField {...params} placeholder='...' />}
                   />
-          </Grid>
+                </TableCell>
-          <Grid size={1}>
+                <TableCell>
-            <CustomTextField fullWidth size='small' value={item.total} InputProps={{ readOnly: true }} />
+                  <CustomTextField
-          </Grid>
+                    fullWidth
-          <Grid size={0.6}>
-            <Button
-              variant='outlined'
-              color='error'
                     size='small'
+                    value={item.total}
+                    InputProps={{ readOnly: true }}
+                    sx={{
+                      '& .MuiInputBase-input': {
+                        textAlign: 'right'
+                      }
+                    }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <IconButton
+                    size='small'
+                    color='error'
                     onClick={() => removeIngredientItem(index)}
-              sx={{ minWidth: 'auto', p: 1 }}
+                    disabled={formData.ingredientItems.length === 1}
                   >
                     <i className='tabler-trash' />
-            </Button>
+                  </IconButton>
-          </Grid>
+                </TableCell>
-        </Grid>
+              </TableRow>
             ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
 
       {/* Add New Item Button */}
-      <Grid container spacing={1}>
-        <Grid size={12}>
       <Button
-            variant='outlined'
+        startIcon={<i className='tabler-plus' />}
         onClick={addIngredientItem}
-            sx={{
+        variant='outlined'
-              textTransform: 'none',
+        size='small'
-              color: 'primary.main',
+        sx={{ mt: 1 }}
-              borderColor: 'primary.main'
-            }}
       >
-            + Tambah bahan baku
+        Tambah bahan baku
       </Button>
     </Grid>
-      </Grid>
-    </Grid>
   )
 }
 

src/views/apps/purchase/purchase-form/PurchaseSummary.tsx

@@ -464,6 +464,16 @@ const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({ formData, handleInput
                 }
               }}
             >
+              <Button
+                variant='text'
+                color='primary'
+                size='small'
+                sx={{ textTransform: 'none', fontSize: '14px', p: 0, textAlign: 'left' }}
+                onClick={() => handleInputChange('showUangMuka', !formData.showUangMuka)}
+              >
+                {formData.showUangMuka ? '- Sembunyikan Uang Muka' : '+ Uang Muka'}
+              </Button>
+              {formData.showUangMuka && (
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                     {/* Dropdown */}
@@ -522,6 +532,7 @@ const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({ formData, handleInput
                     Uang muka {downPayment > 0 ? downPayment.toLocaleString('id-ID') : '0'}
                   </Typography>
                 </Box>
+              )}
             </Box>
 
             {/* Sisa Tagihan */}