ferdiansyah/pos-dashboard-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ferdiansyah:00620026e40f4a3654b95b700c70625fdb8df50c
Branches Tags
ferdiansyah:main
ferdiansyah:efril
..
compare: ferdiansyah:c32d08666eee8b23ae2d30b57db2da27366277c4
Branches Tags
ferdiansyah:main
ferdiansyah:efril

No commits in common. "00620026e40f4a3654b95b700c70625fdb8df50c" and "c32d08666eee8b23ae2d30b57db2da27366277c4" have entirely different histories.
00620026e4 ... c32d08666e

27 changed files with 266 additions and 3223 deletions
Show Stats Expand all files Collapse all files

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

@ -1,18 +0,0 @@
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

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

@ -1,18 +0,0 @@
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

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

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

276
src/components/RangeDatePicker.tsx
View File

@ -1,276 +0,0 @@
// 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)}
/>
*/

249
src/components/StatusFilterTab.tsx
View File

@ -1,249 +0,0 @@
// 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}
/>
*/

9
src/components/layout/vertical/VerticalMenu.tsx
View File

@ -91,14 +91,14 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
<MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem> <MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
</SubMenu> </SubMenu>
<MenuSection label={dictionary['navigation'].appsPages}> <MenuSection label={dictionary['navigation'].appsPages}>
<SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-receipt-2' />}> <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-user' />}>
<MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem> <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-bills`}>{dictionary['navigation'].invoices}</MenuItem>
<MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</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-orders`}>{dictionary['navigation'].sales_orders}</MenuItem>
<MenuItem href={`/${locale}/apps/sales/sales-quotes`}>{dictionary['navigation'].quotes}</MenuItem> <MenuItem href={`/${locale}/apps/sales/sales-quotes`}>{dictionary['navigation'].quotes}</MenuItem>
</SubMenu> </SubMenu>
<SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-shopping-cart' />}> <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
<MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem> <MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
<MenuItem href={`/${locale}/apps/purchase/purchase-bills`}> <MenuItem href={`/${locale}/apps/purchase/purchase-bills`}>
{dictionary['navigation'].purchase_bills} {dictionary['navigation'].purchase_bills}
@ -113,9 +113,6 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
{dictionary['navigation'].purchase_quotes} {dictionary['navigation'].purchase_quotes}
</MenuItem> </MenuItem>
</SubMenu> </SubMenu>
<SubMenu label={dictionary['navigation'].expenses} icon={<i className='tabler-cash' />}>
<MenuItem href={`/${locale}/apps/expense`}>{dictionary['navigation'].list}</MenuItem>
</SubMenu>
<SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}> <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
<SubMenu label={dictionary['navigation'].products}> <SubMenu label={dictionary['navigation'].products}>
<MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem> <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
@ -163,7 +160,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
<MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem> <MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
{/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */} {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
</SubMenu> </SubMenu>
<SubMenu label={dictionary['navigation'].vendor} icon={<i className='tabler-building' />}> <SubMenu label={dictionary['navigation'].vendor} icon={<i className='tabler-user' />}>
<MenuItem href={`/${locale}/apps/vendor/list`}>{dictionary['navigation'].list}</MenuItem> <MenuItem href={`/${locale}/apps/vendor/list`}>{dictionary['navigation'].list}</MenuItem>
{/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */} {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
</SubMenu> </SubMenu>

3
src/data/dictionaries/en.json
View File

@ -122,7 +122,6 @@
"invoices": "Invoices", "invoices": "Invoices",
"deliveries": "Deliveries", "deliveries": "Deliveries",
"sales_orders": "Orders", "sales_orders": "Orders",
"quotes": "Quotes", "quotes": "Quotes"
"expenses": "Expenses"
} }
} }

3
src/data/dictionaries/id.json
View File

@ -122,7 +122,6 @@
"invoices": "Tagihan", "invoices": "Tagihan",
"deliveries": "Pengiriman", "deliveries": "Pengiriman",
"sales_orders": "Pemesanan", "sales_orders": "Pemesanan",
"quotes": "Penawaran", "quotes": "Penawaran"
"expenses": "Biaya"
} }
} }

224
src/data/dummy/expense.ts
View File

@ -1,224 +0,0 @@
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
}
]

3
src/services/api.ts
View File

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

68
src/types/apps/expenseTypes.ts
View File

@ -1,68 +0,0 @@
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
}

137
src/views/apps/expense/add/ExpenseAddAccount.tsx
View File

@ -1,137 +0,0 @@
'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

166
src/views/apps/expense/add/ExpenseAddBasicInfo.tsx
View File

@ -1,166 +0,0 @@
'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

149
src/views/apps/expense/add/ExpenseAddForm.tsx
View File

@ -1,149 +0,0 @@
'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

19
src/views/apps/expense/add/ExpenseAddHeader.tsx
View File

@ -1,19 +0,0 @@
'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

198
src/views/apps/expense/add/ExpenseAddSummary.tsx
View File

@ -1,198 +0,0 @@
'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

22
src/views/apps/expense/detail/ExpenseDetailContent.tsx
View File

@ -1,22 +0,0 @@
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

15
src/views/apps/expense/detail/ExpenseDetailHeader.tsx
View File

@ -1,15 +0,0 @@
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

265
src/views/apps/expense/detail/ExpenseDetailInformation.tsx
View File

@ -1,265 +0,0 @@
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

59
src/views/apps/expense/detail/ExpenseDetailLog.tsx
View File

@ -1,59 +0,0 @@
'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

417
src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx
View File

@ -1,417 +0,0 @@
'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'
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)
}
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 }}>
<Typography variant='body2' color='text.secondary'>
Drag and drop files here or click to upload
</Typography>
</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

51
src/views/apps/expense/list/ExpenseListCard.tsx
View File

@ -1,51 +0,0 @@
// 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

519
src/views/apps/expense/list/ExpenseListTable.tsx
View File

@ -1,519 +0,0 @@
'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

23
src/views/apps/expense/list/index.tsx
View File

@ -1,23 +0,0 @@
// 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

340
src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
View File

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

121
src/views/apps/purchase/purchase-form/PurchaseSummary.tsx
View File

@ -464,75 +464,64 @@ const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({ formData, handleInput
} }
}} }}
> >
<Button <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
variant='text' <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
color='primary' {/* Dropdown */}
size='small' <CustomAutocomplete
sx={{ textTransform: 'none', fontSize: '14px', p: 0, textAlign: 'left' }} size='small'
onClick={() => handleInputChange('showUangMuka', !formData.showUangMuka)} options={[{ label: '1-10003 Gi...', value: '1-10003' }]}
> getOptionLabel={option => (typeof option === 'string' ? option : option.label)}
{formData.showUangMuka ? '- Sembunyikan Uang Muka' : '+ Uang Muka'} value={{ label: '1-10003 Gi...', value: '1-10003' }}
</Button> onChange={(_, newValue) => {
{formData.showUangMuka && ( // Handle change if needed
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{/* Dropdown */}
<CustomAutocomplete
size='small'
options={[{ label: '1-10003 Gi...', value: '1-10003' }]}
getOptionLabel={option => (typeof option === 'string' ? option : option.label)}
value={{ label: '1-10003 Gi...', value: '1-10003' }}
onChange={(_, newValue) => {
// Handle change if needed
}}
renderInput={params => <CustomTextField {...params} size='small' />}
sx={{ minWidth: 120 }}
/>
{/* Amount input */}
<CustomTextField
size='small'
placeholder='0'
value={formData.downPayment || '0'}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
handleInputChange('downPayment', e.target.value)
}
sx={{ width: '80px' }}
inputProps={{
style: { textAlign: 'center' }
}}
/>
{/* Percentage/Fixed toggle */}
<ToggleButtonGroup
value={formData.downPaymentType || 'fixed'}
exclusive
onChange={(_, newValue) => {
if (newValue) handleInputChange('downPaymentType', newValue)
}}
size='small'
>
<ToggleButton value='percentage' sx={{ px: 1.5 }}>
%
</ToggleButton>
<ToggleButton value='fixed' sx={{ px: 1.5 }}>
Rp
</ToggleButton>
</ToggleButtonGroup>
</Box>
{/* Right side text */}
<Typography
variant='body1'
sx={{
fontSize: '16px',
fontWeight: 400
}} }}
renderInput={params => <CustomTextField {...params} size='small' />}
sx={{ minWidth: 120 }}
/>
{/* Amount input */}
<CustomTextField
size='small'
placeholder='0'
value={formData.downPayment || '0'}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
handleInputChange('downPayment', e.target.value)
}
sx={{ width: '80px' }}
inputProps={{
style: { textAlign: 'center' }
}}
/>
{/* Percentage/Fixed toggle */}
<ToggleButtonGroup
value={formData.downPaymentType || 'fixed'}
exclusive
onChange={(_, newValue) => {
if (newValue) handleInputChange('downPaymentType', newValue)
}}
size='small'
> >
Uang muka {downPayment > 0 ? downPayment.toLocaleString('id-ID') : '0'} <ToggleButton value='percentage' sx={{ px: 1.5 }}>
</Typography> %
</ToggleButton>
<ToggleButton value='fixed' sx={{ px: 1.5 }}>
Rp
</ToggleButton>
</ToggleButtonGroup>
</Box> </Box>
)}
{/* Right side text */}
<Typography
variant='body1'
sx={{
fontSize: '16px',
fontWeight: 400
}}
>
Uang muka {downPayment > 0 ? downPayment.toLocaleString('id-ID') : '0'}
</Typography>
</Box>
</Box> </Box>
{/* Sisa Tagihan */} {/* Sisa Tagihan */}

110
src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx
View File

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