efril #6
@ -0,0 +1,7 @@
|
|||||||
|
import AccountList from '@/views/apps/account'
|
||||||
|
|
||||||
|
const AccountPage = () => {
|
||||||
|
return <AccountList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AccountPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import CashBankDetail from '@/views/apps/cash-bank/detail'
|
||||||
|
|
||||||
|
const CashBankDetailPage = () => {
|
||||||
|
return <CashBankDetail />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailPage
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import CashBankDetailTransactionContent from '@/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent'
|
||||||
|
import CashBankDetailTransactionHeader from '@/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const TransactionPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<CashBankDetailTransactionHeader title='Giro 1-10003' transaction='Terima Pembayaran Tagihan' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<CashBankDetailTransactionContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TransactionPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import CashBankList from '@/views/apps/cash-bank/CashBankList'
|
||||||
|
|
||||||
|
const CashBankPage = () => {
|
||||||
|
return <CashBankList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankPage
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import ExpenseDetailContent from '@/views/apps/expense/detail/ExpenseDetailContent'
|
||||||
|
import ExpenseDetailHeader from '@/views/apps/expense/detail/ExpenseDetailHeader'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const ExpenseDetailPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ExpenseDetailHeader />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ExpenseDetailContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseDetailPage
|
||||||
@ -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
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import ExpenseList from '@/views/apps/expense/list'
|
||||||
|
|
||||||
|
const ExpensePage = () => {
|
||||||
|
return <ExpenseList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpensePage
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import FixedAssetAddForm from '@/views/apps/fixed-assets/add/FixedAssetAddForm'
|
||||||
|
import FixedAssetAddHeader from '@/views/apps/fixed-assets/add/FixedAssetAddHeader'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const FixedAssetPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<FixedAssetAddHeader />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<FixedAssetAddForm />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FixedAssetPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import FixedAssetList from '@/views/apps/fixed-assets'
|
||||||
|
|
||||||
|
const FixedAssetPage = () => {
|
||||||
|
return <FixedAssetList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FixedAssetPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import IngredientDetail from '@/views/apps/ecommerce/products/ingredient/detail'
|
||||||
|
|
||||||
|
const IngredientDetailPage = () => {
|
||||||
|
return <IngredientDetail />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IngredientDetailPage
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
import { TextField, Typography, useTheme } from '@mui/material'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
|
||||||
|
import PurchaseOverviewLeft from '@/views/apps/purchase/overview/overview-left'
|
||||||
|
import PurchaseOverviewRight from '@/views/apps/purchase/overview/overview-right'
|
||||||
|
|
||||||
|
const PurchaseOverviewPage = () => {
|
||||||
|
const theme = useTheme()
|
||||||
|
|
||||||
|
const today = new Date()
|
||||||
|
const monthAgo = new Date()
|
||||||
|
monthAgo.setDate(today.getDate() - 30)
|
||||||
|
|
||||||
|
const [filter, setFilter] = useState({
|
||||||
|
date_from: formatDateDDMMYYYY(monthAgo),
|
||||||
|
date_to: formatDateDDMMYYYY(today)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<div className='flex gap-4 items-center justify-between'>
|
||||||
|
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
||||||
|
Overview Pembelian
|
||||||
|
</Typography>
|
||||||
|
<div className='flex items-center gap-4'>
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
value={formatForInputDate(today || new Date())}
|
||||||
|
onChange={e => {
|
||||||
|
setFilter({
|
||||||
|
...filter,
|
||||||
|
date_from: formatDateDDMMYYYY(new Date(e.target.value))
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
size='small'
|
||||||
|
sx={{
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'&.Mui-focused fieldset': {
|
||||||
|
borderColor: 'primary.main'
|
||||||
|
},
|
||||||
|
'& fieldset': {
|
||||||
|
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography>-</Typography>
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
value={today}
|
||||||
|
onChange={e => {}}
|
||||||
|
size='small'
|
||||||
|
sx={{
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'&.Mui-focused fieldset': {
|
||||||
|
borderColor: 'primary.main'
|
||||||
|
},
|
||||||
|
'& fieldset': {
|
||||||
|
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<Grid container spacing={6} className='mt-5'>
|
||||||
|
<Grid size={{ xs: 12, lg: 8, md: 7 }}>
|
||||||
|
<PurchaseOverviewRight />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12, lg: 4, md: 5 }}>
|
||||||
|
<PurchaseOverviewLeft />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseOverviewPage
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import PurchaseDetailContent from '@/views/apps/purchase/purchase-detail/PurchaseDetailContent'
|
||||||
|
import PurchaseDetailHeader from '@/views/apps/purchase/purchase-detail/PurchaseDetailHeader'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const PurchaseBillDetailPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<PurchaseDetailHeader title='Detail Pesanan Pembelian' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<PurchaseDetailContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseBillDetailPage
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
|
||||||
|
import PurchaseBillAddHeader from '@/views/apps/purchase/purchase-bills/add/PurchaseBillAddHeader'
|
||||||
|
|
||||||
|
const PurchaseBillAddPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<PurchaseBillAddHeader />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<PurchaseAddForm />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseBillAddPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import PurchaseBillList from '@/views/apps/purchase/purchase-bills/list'
|
||||||
|
|
||||||
|
const PurchaseBillsPage = () => {
|
||||||
|
return <PurchaseBillList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseBillsPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import PurchaseDeliveryListTable from '@/views/apps/purchase/purchase-deliveries/list/PurchaseDeliveryListTable'
|
||||||
|
|
||||||
|
const PurchaseDeliveryPage = () => {
|
||||||
|
return <PurchaseDeliveryListTable />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseDeliveryPage
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
import PurchaseOrderAddHeader from '@/views/apps/purchase/purchase-orders/add/PurchaseOrderAddHeader'
|
||||||
|
import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
|
||||||
|
|
||||||
|
const PurchaseOrderAddPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<PurchaseOrderAddHeader />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<PurchaseAddForm />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseOrderAddPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import PurchaseOrderList from '@/views/apps/purchase/purchase-orders/list'
|
||||||
|
|
||||||
|
const PurchaseOrdersPage = () => {
|
||||||
|
return <PurchaseOrderList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseOrdersPage
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
|
||||||
|
import PurchaseQuoteAddHeader from '@/views/apps/purchase/purchase-quote/add/PurchaseQuoteAddHeader'
|
||||||
|
|
||||||
|
const PurchaseQuoteAddPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<PurchaseQuoteAddHeader />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<PurchaseAddForm />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseQuoteAddPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import PurchaseQuoteList from '@/views/apps/purchase/purchase-quote/list'
|
||||||
|
|
||||||
|
const PurchaseQuotePage = () => {
|
||||||
|
return <PurchaseQuoteList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PurchaseQuotePage
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
|
import ReportCashFlowCard from '@/views/apps/report/cash-flow/ReportCashFlowCard'
|
||||||
|
import ReportCashFlowContent from '@/views/apps/report/cash-flow/ReportCashFlowContent'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const CashFlowPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Arus Kas' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportCashFlowCard />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportCashFlowContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashFlowPage
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
|
import ReportNeracaCard from '@/views/apps/report/neraca/ReportNeracaCard'
|
||||||
|
import ReportNeracaContent from '@/views/apps/report/neraca/ReportNeracaContent'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const NeracaPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Neraca' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportNeracaCard />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportNeracaContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NeracaPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import ReportList from '@/views/apps/report'
|
||||||
|
|
||||||
|
const ReportPage = () => {
|
||||||
|
return <ReportList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportPage
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import ReportTitle from '@/components/report/ReportTitle'
|
||||||
|
import ReportProfitLossCard from '@/views/apps/report/profit-loss/ReportProfitLossCard'
|
||||||
|
import ReportProfitLossContent from '@/views/apps/report/profit-loss/ReportProfitLossContent'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
const ProfiltLossPage = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportTitle title='Laba Rugi' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportProfitLossCard />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ReportProfitLossContent />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProfiltLossPage
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
import { TextField, Typography, useTheme } from '@mui/material'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
|
||||||
|
import SalesOverviewRight from '@/views/apps/sales/overview/overview-right'
|
||||||
|
import SalesOverviewLeft from '@/views/apps/sales/overview/overview-left'
|
||||||
|
|
||||||
|
const SalesOverviewPage = () => {
|
||||||
|
const theme = useTheme()
|
||||||
|
|
||||||
|
const today = new Date()
|
||||||
|
const monthAgo = new Date()
|
||||||
|
monthAgo.setDate(today.getDate() - 30)
|
||||||
|
|
||||||
|
const [filter, setFilter] = useState({
|
||||||
|
date_from: formatDateDDMMYYYY(monthAgo),
|
||||||
|
date_to: formatDateDDMMYYYY(today)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<div className='flex gap-4 items-center justify-between'>
|
||||||
|
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
||||||
|
Overview Penjualan
|
||||||
|
</Typography>
|
||||||
|
<div className='flex items-center gap-4'>
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
value={formatForInputDate(today || new Date())}
|
||||||
|
onChange={e => {
|
||||||
|
setFilter({
|
||||||
|
...filter,
|
||||||
|
date_from: formatDateDDMMYYYY(new Date(e.target.value))
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
size='small'
|
||||||
|
sx={{
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'&.Mui-focused fieldset': {
|
||||||
|
borderColor: 'primary.main'
|
||||||
|
},
|
||||||
|
'& fieldset': {
|
||||||
|
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography>-</Typography>
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
value={today}
|
||||||
|
onChange={e => {}}
|
||||||
|
size='small'
|
||||||
|
sx={{
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'&.Mui-focused fieldset': {
|
||||||
|
borderColor: 'primary.main'
|
||||||
|
},
|
||||||
|
'& fieldset': {
|
||||||
|
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<Grid container spacing={6} className='mt-5'>
|
||||||
|
<Grid size={{ xs: 12, lg: 8, md: 7 }}>
|
||||||
|
<SalesOverviewRight />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12, lg: 4, md: 5 }}>
|
||||||
|
<SalesOverviewLeft />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesOverviewPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import SalesBillList from '@/views/apps/sales/sales-bill/list'
|
||||||
|
|
||||||
|
const SalesBillPage = () => {
|
||||||
|
return <SalesBillList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesBillPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import SalesDeliveryListTable from '@/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable'
|
||||||
|
|
||||||
|
const SalesDeliveryPage = () => {
|
||||||
|
return <SalesDeliveryListTable />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesDeliveryPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import SalesOrderList from '@/views/apps/sales/sales-orders/list'
|
||||||
|
|
||||||
|
const SalesOrdersPage = () => {
|
||||||
|
return <SalesOrderList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesOrdersPage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import SalesQuoteList from '@/views/apps/sales/sales-quote/list'
|
||||||
|
|
||||||
|
const SalesQuotePage = () => {
|
||||||
|
return <SalesQuoteList />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SalesQuotePage
|
||||||
7
src/app/[lang]/(dashboard)/(private)/apps/vendor/detail/page.tsx
vendored
Normal file
7
src/app/[lang]/(dashboard)/(private)/apps/vendor/detail/page.tsx
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import VendorView from '@/views/apps/vendor/detail'
|
||||||
|
|
||||||
|
const VendorViewPage = async () => {
|
||||||
|
return <VendorView />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VendorViewPage
|
||||||
8
src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx
vendored
Normal file
8
src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { vendorDummyData } from '@/data/dummy/vendor'
|
||||||
|
import VendorList from '@/views/apps/vendor/list'
|
||||||
|
|
||||||
|
const VendorListTablePage = async () => {
|
||||||
|
return <VendorList vendorData={vendorDummyData} />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VendorListTablePage
|
||||||
291
src/components/ImageUpload.tsx
Normal file
291
src/components/ImageUpload.tsx
Normal file
@ -0,0 +1,291 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// React Imports
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import type { BoxProps } from '@mui/material/Box'
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import List from '@mui/material/List'
|
||||||
|
import ListItem from '@mui/material/ListItem'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import { useDropzone } from 'react-dropzone'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import Link from '@components/Link'
|
||||||
|
import CustomAvatar from '@core/components/mui/Avatar'
|
||||||
|
|
||||||
|
// Styled Component Imports
|
||||||
|
import AppReactDropzone from '@/libs/styles/AppReactDropzone'
|
||||||
|
|
||||||
|
type FileProp = {
|
||||||
|
name: string
|
||||||
|
type: string
|
||||||
|
size: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImageUploadProps {
|
||||||
|
// Required props
|
||||||
|
onUpload: (file: File) => Promise<string> | string // Returns image URL
|
||||||
|
|
||||||
|
// Optional customization props
|
||||||
|
title?: string | null // Made nullable
|
||||||
|
currentImageUrl?: string
|
||||||
|
onImageRemove?: () => void
|
||||||
|
onImageChange?: (url: string) => void
|
||||||
|
|
||||||
|
// Upload state
|
||||||
|
isUploading?: boolean
|
||||||
|
|
||||||
|
// UI customization
|
||||||
|
maxFileSize?: number // in bytes
|
||||||
|
acceptedFileTypes?: string[]
|
||||||
|
showUrlOption?: boolean
|
||||||
|
uploadButtonText?: string
|
||||||
|
browseButtonText?: string
|
||||||
|
dragDropText?: string
|
||||||
|
replaceText?: string
|
||||||
|
|
||||||
|
// Style customization
|
||||||
|
className?: string
|
||||||
|
disabled?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// Styled Dropzone Component
|
||||||
|
const Dropzone = styled(AppReactDropzone)<BoxProps>(({ theme }) => ({
|
||||||
|
'& .dropzone': {
|
||||||
|
minHeight: 'unset',
|
||||||
|
padding: theme.spacing(12),
|
||||||
|
[theme.breakpoints.down('sm')]: {
|
||||||
|
paddingInline: theme.spacing(5)
|
||||||
|
},
|
||||||
|
'&+.MuiList-root .MuiListItem-root .file-name': {
|
||||||
|
fontWeight: theme.typography.body1.fontWeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
const ImageUpload: React.FC<ImageUploadProps> = ({
|
||||||
|
onUpload,
|
||||||
|
title = null, // Default to null
|
||||||
|
currentImageUrl = '',
|
||||||
|
onImageRemove,
|
||||||
|
onImageChange,
|
||||||
|
isUploading = false,
|
||||||
|
maxFileSize = 5 * 1024 * 1024, // 5MB default
|
||||||
|
acceptedFileTypes = ['image/*'],
|
||||||
|
showUrlOption = true,
|
||||||
|
uploadButtonText = 'Upload',
|
||||||
|
browseButtonText = 'Browse Image',
|
||||||
|
dragDropText = 'Drag and Drop Your Image Here.',
|
||||||
|
replaceText = 'Drop New Image to Replace',
|
||||||
|
className = '',
|
||||||
|
disabled = false
|
||||||
|
}) => {
|
||||||
|
// States
|
||||||
|
const [files, setFiles] = useState<File[]>([])
|
||||||
|
const [error, setError] = useState<string>('')
|
||||||
|
|
||||||
|
const handleUpload = async () => {
|
||||||
|
if (!files.length) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
setError('')
|
||||||
|
const imageUrl = await onUpload(files[0])
|
||||||
|
|
||||||
|
if (typeof imageUrl === 'string') {
|
||||||
|
onImageChange?.(imageUrl)
|
||||||
|
setFiles([]) // Clear files after successful upload
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'Upload failed')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const { getRootProps, getInputProps } = useDropzone({
|
||||||
|
onDrop: (acceptedFiles: File[]) => {
|
||||||
|
setError('')
|
||||||
|
|
||||||
|
if (acceptedFiles.length === 0) return
|
||||||
|
|
||||||
|
const file = acceptedFiles[0]
|
||||||
|
|
||||||
|
// Validate file size
|
||||||
|
if (file.size > maxFileSize) {
|
||||||
|
setError(`File size should be less than ${formatFileSize(maxFileSize)}`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Replace files instead of adding to them
|
||||||
|
setFiles([file])
|
||||||
|
},
|
||||||
|
accept: acceptedFileTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),
|
||||||
|
disabled: disabled || isUploading
|
||||||
|
})
|
||||||
|
|
||||||
|
const formatFileSize = (bytes: number): string => {
|
||||||
|
if (bytes === 0) return '0 Bytes'
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderFilePreview = (file: FileProp) => {
|
||||||
|
if (file.type.startsWith('image')) {
|
||||||
|
return <img width={38} height={38} alt={file.name} src={URL.createObjectURL(file as any)} />
|
||||||
|
} else {
|
||||||
|
return <i className='tabler-file-description' />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemoveFile = (file: FileProp) => {
|
||||||
|
const filtered = files.filter((i: FileProp) => i.name !== file.name)
|
||||||
|
setFiles(filtered)
|
||||||
|
setError('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemoveCurrentImage = () => {
|
||||||
|
onImageRemove?.()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemoveAllFiles = () => {
|
||||||
|
setFiles([])
|
||||||
|
setError('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileList = files.map((file: FileProp) => (
|
||||||
|
<ListItem key={file.name} className='pis-4 plb-3'>
|
||||||
|
<div className='file-details'>
|
||||||
|
<div className='file-preview'>{renderFilePreview(file)}</div>
|
||||||
|
<div>
|
||||||
|
<Typography className='file-name font-medium' color='text.primary'>
|
||||||
|
{file.name}
|
||||||
|
</Typography>
|
||||||
|
<Typography className='file-size' variant='body2'>
|
||||||
|
{formatFileSize(file.size)}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<IconButton onClick={() => handleRemoveFile(file)} disabled={isUploading}>
|
||||||
|
<i className='tabler-x text-xl' />
|
||||||
|
</IconButton>
|
||||||
|
</ListItem>
|
||||||
|
))
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropzone className={className}>
|
||||||
|
{/* Conditional title and URL option header */}
|
||||||
|
{title && (
|
||||||
|
<div className='flex justify-between items-center mb-4'>
|
||||||
|
<Typography variant='h6' component='h2'>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
{showUrlOption && (
|
||||||
|
<Typography component={Link} color='primary.main' className='font-medium'>
|
||||||
|
Add media from URL
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div {...getRootProps({ className: 'dropzone' })}>
|
||||||
|
<input {...getInputProps()} />
|
||||||
|
<div className='flex items-center flex-col gap-2 text-center'>
|
||||||
|
<CustomAvatar variant='rounded' skin='light' color='secondary'>
|
||||||
|
<i className='tabler-upload' />
|
||||||
|
</CustomAvatar>
|
||||||
|
<Typography variant='h4'>{currentImageUrl && !files.length ? replaceText : dragDropText}</Typography>
|
||||||
|
<Typography color='text.disabled'>or</Typography>
|
||||||
|
<Button variant='tonal' size='small' disabled={disabled || isUploading}>
|
||||||
|
{browseButtonText}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error Message */}
|
||||||
|
{error && (
|
||||||
|
<Typography color='error' variant='body2' className='mt-2 text-center'>
|
||||||
|
{error}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Show current image if it exists */}
|
||||||
|
{currentImageUrl && !files.length && (
|
||||||
|
<div className='current-image mb-4'>
|
||||||
|
<Typography variant='subtitle2' className='mb-2'>
|
||||||
|
Current Image:
|
||||||
|
</Typography>
|
||||||
|
<div className='flex items-center justify-between p-3 border border-gray-200 rounded'>
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<img width={60} height={60} alt='Current image' src={currentImageUrl} className='rounded object-cover' />
|
||||||
|
<div>
|
||||||
|
<Typography className='font-medium' color='text.primary'>
|
||||||
|
Current image
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='text.secondary'>
|
||||||
|
Uploaded image
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{onImageRemove && (
|
||||||
|
<IconButton onClick={handleRemoveCurrentImage} color='error' disabled={isUploading}>
|
||||||
|
<i className='tabler-x text-xl' />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* File list and upload buttons */}
|
||||||
|
{files.length > 0 && (
|
||||||
|
<>
|
||||||
|
<List>{fileList}</List>
|
||||||
|
<div className='buttons'>
|
||||||
|
<Button color='error' variant='tonal' onClick={handleRemoveAllFiles} disabled={isUploading}>
|
||||||
|
Remove All
|
||||||
|
</Button>
|
||||||
|
<Button variant='contained' onClick={handleUpload} disabled={isUploading}>
|
||||||
|
{isUploading ? 'Uploading...' : uploadButtonText}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Dropzone>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ImageUpload
|
||||||
|
|
||||||
|
// ===== USAGE EXAMPLES =====
|
||||||
|
|
||||||
|
// 1. Without title
|
||||||
|
// <ImageUpload
|
||||||
|
// onUpload={handleUpload}
|
||||||
|
// currentImageUrl={imageUrl}
|
||||||
|
// onImageChange={setImageUrl}
|
||||||
|
// onImageRemove={() => setImageUrl('')}
|
||||||
|
// />
|
||||||
|
|
||||||
|
// 2. With title
|
||||||
|
// <ImageUpload
|
||||||
|
// title="Product Image"
|
||||||
|
// onUpload={handleUpload}
|
||||||
|
// currentImageUrl={imageUrl}
|
||||||
|
// onImageChange={setImageUrl}
|
||||||
|
// onImageRemove={() => setImageUrl('')}
|
||||||
|
// />
|
||||||
|
|
||||||
|
// 3. Explicitly set title to null
|
||||||
|
// <ImageUpload
|
||||||
|
// title={null}
|
||||||
|
// onUpload={handleUpload}
|
||||||
|
// currentImageUrl={imageUrl}
|
||||||
|
// onImageChange={setImageUrl}
|
||||||
|
// onImageRemove={() => setImageUrl('')}
|
||||||
|
// />
|
||||||
276
src/components/RangeDatePicker.tsx
Normal file
276
src/components/RangeDatePicker.tsx
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
// React Imports
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import TextField from '@mui/material/TextField'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import { useTheme } from '@mui/material/styles'
|
||||||
|
import type { TextFieldProps } from '@mui/material/TextField'
|
||||||
|
|
||||||
|
interface DateRangePickerProps {
|
||||||
|
/**
|
||||||
|
* Start date value (Date object or date string)
|
||||||
|
*/
|
||||||
|
startDate: Date | string | null
|
||||||
|
/**
|
||||||
|
* End date value (Date object or date string)
|
||||||
|
*/
|
||||||
|
endDate: Date | string | null
|
||||||
|
/**
|
||||||
|
* Callback when start date changes
|
||||||
|
*/
|
||||||
|
onStartDateChange: (date: Date | null) => void
|
||||||
|
/**
|
||||||
|
* Callback when end date changes
|
||||||
|
*/
|
||||||
|
onEndDateChange: (date: Date | null) => void
|
||||||
|
/**
|
||||||
|
* Label for start date field
|
||||||
|
*/
|
||||||
|
startLabel?: string
|
||||||
|
/**
|
||||||
|
* Label for end date field
|
||||||
|
*/
|
||||||
|
endLabel?: string
|
||||||
|
/**
|
||||||
|
* Placeholder for start date field
|
||||||
|
*/
|
||||||
|
startPlaceholder?: string
|
||||||
|
/**
|
||||||
|
* Placeholder for end date field
|
||||||
|
*/
|
||||||
|
endPlaceholder?: string
|
||||||
|
/**
|
||||||
|
* Size of the text fields
|
||||||
|
*/
|
||||||
|
size?: 'small' | 'medium'
|
||||||
|
/**
|
||||||
|
* Whether the fields are disabled
|
||||||
|
*/
|
||||||
|
disabled?: boolean
|
||||||
|
/**
|
||||||
|
* Whether the fields are required
|
||||||
|
*/
|
||||||
|
required?: boolean
|
||||||
|
/**
|
||||||
|
* Custom className for the container
|
||||||
|
*/
|
||||||
|
className?: string
|
||||||
|
/**
|
||||||
|
* Custom styles for the container
|
||||||
|
*/
|
||||||
|
containerStyle?: React.CSSProperties
|
||||||
|
/**
|
||||||
|
* Separator between date fields
|
||||||
|
*/
|
||||||
|
separator?: string
|
||||||
|
/**
|
||||||
|
* Custom props for start date TextField
|
||||||
|
*/
|
||||||
|
startTextFieldProps?: Omit<TextFieldProps, 'type' | 'value' | 'onChange'>
|
||||||
|
/**
|
||||||
|
* Custom props for end date TextField
|
||||||
|
*/
|
||||||
|
endTextFieldProps?: Omit<TextFieldProps, 'type' | 'value' | 'onChange'>
|
||||||
|
/**
|
||||||
|
* Error state for start date
|
||||||
|
*/
|
||||||
|
startError?: boolean
|
||||||
|
/**
|
||||||
|
* Error state for end date
|
||||||
|
*/
|
||||||
|
endError?: boolean
|
||||||
|
/**
|
||||||
|
* Helper text for start date
|
||||||
|
*/
|
||||||
|
startHelperText?: string
|
||||||
|
/**
|
||||||
|
* Helper text for end date
|
||||||
|
*/
|
||||||
|
endHelperText?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility functions
|
||||||
|
const formatDateForInput = (date: Date | string | null): string => {
|
||||||
|
if (!date) return ''
|
||||||
|
|
||||||
|
const dateObj = typeof date === 'string' ? new Date(date) : date
|
||||||
|
|
||||||
|
if (isNaN(dateObj.getTime())) return ''
|
||||||
|
|
||||||
|
return dateObj.toISOString().split('T')[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
const parseDateFromInput = (dateString: string): Date | null => {
|
||||||
|
if (!dateString) return null
|
||||||
|
|
||||||
|
const date = new Date(dateString)
|
||||||
|
return isNaN(date.getTime()) ? null : date
|
||||||
|
}
|
||||||
|
|
||||||
|
const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
onStartDateChange,
|
||||||
|
onEndDateChange,
|
||||||
|
startLabel,
|
||||||
|
endLabel,
|
||||||
|
startPlaceholder,
|
||||||
|
endPlaceholder,
|
||||||
|
size = 'small',
|
||||||
|
disabled = false,
|
||||||
|
required = false,
|
||||||
|
className = '',
|
||||||
|
containerStyle = {},
|
||||||
|
separator = '-',
|
||||||
|
startTextFieldProps = {},
|
||||||
|
endTextFieldProps = {},
|
||||||
|
startError = false,
|
||||||
|
endError = false,
|
||||||
|
startHelperText,
|
||||||
|
endHelperText
|
||||||
|
}) => {
|
||||||
|
const theme = useTheme()
|
||||||
|
|
||||||
|
const defaultTextFieldSx = {
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'&.Mui-focused fieldset': {
|
||||||
|
borderColor: 'primary.main'
|
||||||
|
},
|
||||||
|
'& fieldset': {
|
||||||
|
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const date = parseDateFromInput(event.target.value)
|
||||||
|
onStartDateChange(date)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const date = parseDateFromInput(event.target.value)
|
||||||
|
onEndDateChange(date)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex items-center gap-4 ${className}`} style={containerStyle}>
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
label={startLabel}
|
||||||
|
placeholder={startPlaceholder}
|
||||||
|
value={formatDateForInput(startDate)}
|
||||||
|
onChange={handleStartDateChange}
|
||||||
|
size={size}
|
||||||
|
disabled={disabled}
|
||||||
|
required={required}
|
||||||
|
error={startError}
|
||||||
|
helperText={startHelperText}
|
||||||
|
sx={{
|
||||||
|
...defaultTextFieldSx,
|
||||||
|
...startTextFieldProps.sx
|
||||||
|
}}
|
||||||
|
{...startTextFieldProps}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Typography
|
||||||
|
color='text.secondary'
|
||||||
|
sx={{
|
||||||
|
userSelect: 'none',
|
||||||
|
fontSize: size === 'small' ? '14px' : '16px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{separator}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
type='date'
|
||||||
|
label={endLabel}
|
||||||
|
placeholder={endPlaceholder}
|
||||||
|
value={formatDateForInput(endDate)}
|
||||||
|
onChange={handleEndDateChange}
|
||||||
|
size={size}
|
||||||
|
disabled={disabled}
|
||||||
|
required={required}
|
||||||
|
error={endError}
|
||||||
|
helperText={endHelperText}
|
||||||
|
sx={{
|
||||||
|
...defaultTextFieldSx,
|
||||||
|
...endTextFieldProps.sx
|
||||||
|
}}
|
||||||
|
{...endTextFieldProps}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DateRangePicker
|
||||||
|
|
||||||
|
// Export utility functions for external use
|
||||||
|
export { formatDateForInput, parseDateFromInput }
|
||||||
|
|
||||||
|
// Example usage:
|
||||||
|
/*
|
||||||
|
import DateRangePicker from '@/components/DateRangePicker'
|
||||||
|
|
||||||
|
// In your component:
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||||
|
|
||||||
|
// Basic usage
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
|
|
||||||
|
// With labels and validation
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
startLabel="Tanggal Mulai"
|
||||||
|
endLabel="Tanggal Selesai"
|
||||||
|
required
|
||||||
|
startError={startDate && endDate && startDate > endDate}
|
||||||
|
endError={startDate && endDate && startDate > endDate}
|
||||||
|
startHelperText={startDate && endDate && startDate > endDate ? "Tanggal mulai tidak boleh lebih besar dari tanggal selesai" : ""}
|
||||||
|
/>
|
||||||
|
|
||||||
|
// Custom styling
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
separator="sampai"
|
||||||
|
size="medium"
|
||||||
|
className="my-custom-class"
|
||||||
|
startTextFieldProps={{
|
||||||
|
variant: "filled",
|
||||||
|
sx: { minWidth: '150px' }
|
||||||
|
}}
|
||||||
|
endTextFieldProps={{
|
||||||
|
variant: "filled",
|
||||||
|
sx: { minWidth: '150px' }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
// Integration with your existing filter logic
|
||||||
|
const handleDateRangeChange = (start: Date | null, end: Date | null) => {
|
||||||
|
setFilter({
|
||||||
|
...filter,
|
||||||
|
date_from: start ? formatDateDDMMYYYY(start) : null,
|
||||||
|
date_to: end ? formatDateDDMMYYYY(end) : null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={filter.date_from ? new Date(filter.date_from) : null}
|
||||||
|
endDate={filter.date_to ? new Date(filter.date_to) : null}
|
||||||
|
onStartDateChange={(date) => handleDateRangeChange(date, filter.date_to ? new Date(filter.date_to) : null)}
|
||||||
|
onEndDateChange={(date) => handleDateRangeChange(filter.date_from ? new Date(filter.date_from) : null, date)}
|
||||||
|
/>
|
||||||
|
*/
|
||||||
249
src/components/StatusFilterTab.tsx
Normal file
249
src/components/StatusFilterTab.tsx
Normal file
@ -0,0 +1,249 @@
|
|||||||
|
// React Imports
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Menu from '@mui/material/Menu'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
|
||||||
|
const DropdownButton = styled(Button)(({ theme }) => ({
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 400,
|
||||||
|
borderRadius: '8px',
|
||||||
|
borderColor: '#e0e0e0',
|
||||||
|
color: '#666',
|
||||||
|
'&:hover': {
|
||||||
|
borderColor: '#ccc',
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)'
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
interface StatusFilterTabsProps {
|
||||||
|
/**
|
||||||
|
* Array of status options to display as filter tabs
|
||||||
|
*/
|
||||||
|
statusOptions: string[]
|
||||||
|
/**
|
||||||
|
* Currently selected status filter
|
||||||
|
*/
|
||||||
|
selectedStatus: string
|
||||||
|
/**
|
||||||
|
* Callback function when a status is selected
|
||||||
|
*/
|
||||||
|
onStatusChange: (status: string) => void
|
||||||
|
/**
|
||||||
|
* Custom className for the container
|
||||||
|
*/
|
||||||
|
className?: string
|
||||||
|
/**
|
||||||
|
* Custom styles for the container
|
||||||
|
*/
|
||||||
|
containerStyle?: React.CSSProperties
|
||||||
|
/**
|
||||||
|
* Size of the buttons
|
||||||
|
*/
|
||||||
|
buttonSize?: 'small' | 'medium' | 'large'
|
||||||
|
/**
|
||||||
|
* Maximum number of status options to show as buttons before switching to dropdown
|
||||||
|
*/
|
||||||
|
maxButtonsBeforeDropdown?: number
|
||||||
|
/**
|
||||||
|
* Label for the dropdown when there are many options
|
||||||
|
*/
|
||||||
|
dropdownLabel?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatusFilterTabs: React.FC<StatusFilterTabsProps> = ({
|
||||||
|
statusOptions,
|
||||||
|
selectedStatus,
|
||||||
|
onStatusChange,
|
||||||
|
className = '',
|
||||||
|
containerStyle = {},
|
||||||
|
buttonSize = 'small',
|
||||||
|
maxButtonsBeforeDropdown = 5,
|
||||||
|
dropdownLabel = 'Lainnya'
|
||||||
|
}) => {
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
const open = Boolean(anchorEl)
|
||||||
|
|
||||||
|
const handleDropdownClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDropdownClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDropdownItemClick = (status: string) => {
|
||||||
|
onStatusChange(status)
|
||||||
|
handleDropdownClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
// If status options are <= maxButtonsBeforeDropdown, show all as buttons
|
||||||
|
if (statusOptions.length <= maxButtonsBeforeDropdown) {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
{statusOptions.map(status => (
|
||||||
|
<Button
|
||||||
|
key={status}
|
||||||
|
variant={selectedStatus === status ? 'contained' : 'outlined'}
|
||||||
|
color={selectedStatus === status ? 'primary' : 'inherit'}
|
||||||
|
onClick={() => onStatusChange(status)}
|
||||||
|
size={buttonSize}
|
||||||
|
className='rounded-lg'
|
||||||
|
sx={{
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: selectedStatus === status ? 600 : 400,
|
||||||
|
borderRadius: '8px',
|
||||||
|
...(selectedStatus !== status && {
|
||||||
|
borderColor: '#e0e0e0',
|
||||||
|
color: '#666'
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// If more than maxButtonsBeforeDropdown, show first few as buttons and rest in dropdown
|
||||||
|
const buttonStatuses = statusOptions.slice(0, maxButtonsBeforeDropdown - 1)
|
||||||
|
const dropdownStatuses = statusOptions.slice(maxButtonsBeforeDropdown - 1)
|
||||||
|
const isDropdownItemSelected = dropdownStatuses.includes(selectedStatus)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
{/* Regular buttons for first few statuses */}
|
||||||
|
{buttonStatuses.map(status => (
|
||||||
|
<Button
|
||||||
|
key={status}
|
||||||
|
variant={selectedStatus === status ? 'contained' : 'outlined'}
|
||||||
|
color={selectedStatus === status ? 'primary' : 'inherit'}
|
||||||
|
onClick={() => onStatusChange(status)}
|
||||||
|
size={buttonSize}
|
||||||
|
className='rounded-lg'
|
||||||
|
sx={{
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: selectedStatus === status ? 600 : 400,
|
||||||
|
borderRadius: '8px',
|
||||||
|
...(selectedStatus !== status && {
|
||||||
|
borderColor: '#e0e0e0',
|
||||||
|
color: '#666'
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Dropdown button for remaining statuses */}
|
||||||
|
<DropdownButton
|
||||||
|
variant='outlined'
|
||||||
|
onClick={handleDropdownClick}
|
||||||
|
size={buttonSize}
|
||||||
|
endIcon={<i className='tabler-chevron-down' />}
|
||||||
|
sx={{
|
||||||
|
...(isDropdownItemSelected && {
|
||||||
|
backgroundColor: 'primary.main',
|
||||||
|
color: 'primary.contrastText',
|
||||||
|
borderColor: 'primary.main',
|
||||||
|
fontWeight: 600,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'primary.dark',
|
||||||
|
borderColor: 'primary.dark'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isDropdownItemSelected ? selectedStatus : dropdownLabel}
|
||||||
|
</DropdownButton>
|
||||||
|
|
||||||
|
<Menu
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={open}
|
||||||
|
onClose={handleDropdownClose}
|
||||||
|
PaperProps={{
|
||||||
|
elevation: 3,
|
||||||
|
sx: {
|
||||||
|
mt: 1,
|
||||||
|
borderRadius: '8px',
|
||||||
|
minWidth: '160px'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
transformOrigin={{ horizontal: 'left', vertical: 'top' }}
|
||||||
|
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
|
||||||
|
>
|
||||||
|
{dropdownStatuses.map(status => (
|
||||||
|
<MenuItem
|
||||||
|
key={status}
|
||||||
|
onClick={() => handleDropdownItemClick(status)}
|
||||||
|
selected={selectedStatus === status}
|
||||||
|
sx={{
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: selectedStatus === status ? 600 : 400,
|
||||||
|
color: selectedStatus === status ? 'primary.main' : 'text.primary'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StatusFilterTabs
|
||||||
|
|
||||||
|
// Example usage:
|
||||||
|
/*
|
||||||
|
import StatusFilterTabs from '@/components/StatusFilterTabs'
|
||||||
|
|
||||||
|
// In your component:
|
||||||
|
const [statusFilter, setStatusFilter] = useState('Semua')
|
||||||
|
|
||||||
|
// For few statuses (will show all as buttons)
|
||||||
|
const expenseStatusOptions = ['Semua', 'Belum Dibayar', 'Dibayar Sebagian', 'Lunas']
|
||||||
|
|
||||||
|
// For many statuses (will show some buttons + dropdown)
|
||||||
|
const manyStatusOptions = [
|
||||||
|
'Semua',
|
||||||
|
'Belum Dibayar',
|
||||||
|
'Dibayar Sebagian',
|
||||||
|
'Lunas',
|
||||||
|
'Void',
|
||||||
|
'Retur',
|
||||||
|
'Jatuh Tempo',
|
||||||
|
'Transaksi Berulang',
|
||||||
|
'Ditangguhkan',
|
||||||
|
'Dibatalkan'
|
||||||
|
]
|
||||||
|
|
||||||
|
<StatusFilterTabs
|
||||||
|
statusOptions={expenseStatusOptions}
|
||||||
|
selectedStatus={statusFilter}
|
||||||
|
onStatusChange={setStatusFilter}
|
||||||
|
/>
|
||||||
|
|
||||||
|
// With many options (will automatically use dropdown)
|
||||||
|
<StatusFilterTabs
|
||||||
|
statusOptions={manyStatusOptions}
|
||||||
|
selectedStatus={statusFilter}
|
||||||
|
onStatusChange={setStatusFilter}
|
||||||
|
maxButtonsBeforeDropdown={4} // Show 3 buttons + dropdown
|
||||||
|
dropdownLabel="Status Lain"
|
||||||
|
/>
|
||||||
|
|
||||||
|
// Custom configuration
|
||||||
|
<StatusFilterTabs
|
||||||
|
statusOptions={manyStatusOptions}
|
||||||
|
selectedStatus={statusFilter}
|
||||||
|
onStatusChange={setStatusFilter}
|
||||||
|
maxButtonsBeforeDropdown={3}
|
||||||
|
dropdownLabel="Lainnya"
|
||||||
|
buttonSize="medium"
|
||||||
|
showBorder={false}
|
||||||
|
/>
|
||||||
|
*/
|
||||||
@ -32,7 +32,7 @@ const HorizontalWithSubtitle = (props: UserDataType) => {
|
|||||||
<div className='flex flex-col gap-1 flex-grow'>
|
<div className='flex flex-col gap-1 flex-grow'>
|
||||||
<Typography color='text.primary'>{title}</Typography>
|
<Typography color='text.primary'>{title}</Typography>
|
||||||
<div className='flex items-center gap-2 flex-wrap'>
|
<div className='flex items-center gap-2 flex-wrap'>
|
||||||
<Typography variant='h4'>{stats}</Typography>
|
<Typography variant='h5'>{stats}</Typography>
|
||||||
<Typography color={trend === 'negative' ? 'error.main' : 'success.main'}>
|
<Typography color={trend === 'negative' ? 'error.main' : 'success.main'}>
|
||||||
{`(${trend === 'negative' ? '-' : '+'}${trendNumber})`}
|
{`(${trend === 'negative' ? '-' : '+'}${trendNumber})`}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|||||||
@ -43,12 +43,8 @@ const languageData: LanguageDataType[] = [
|
|||||||
langName: 'English'
|
langName: 'English'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
langCode: 'fr',
|
langCode: 'id',
|
||||||
langName: 'French'
|
langName: 'Indonesian'
|
||||||
},
|
|
||||||
{
|
|
||||||
langCode: 'ar',
|
|
||||||
langName: 'Arabic'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -91,6 +91,68 @@ 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' />}>
|
||||||
|
<MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/apps/sales/sales-orders`}>{dictionary['navigation'].sales_orders}</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/apps/sales/sales-quotes`}>{dictionary['navigation'].quotes}</MenuItem>
|
||||||
|
</SubMenu>
|
||||||
|
<SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-shopping-cart' />}>
|
||||||
|
<MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/apps/purchase/purchase-bills`}>
|
||||||
|
{dictionary['navigation'].purchase_bills}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/apps/purchase/purchase-deliveries`}>
|
||||||
|
{dictionary['navigation'].purchase_delivery}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/apps/purchase/purchase-orders`}>
|
||||||
|
{dictionary['navigation'].purchase_orders}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem href={`/${locale}/apps/purchase/purchase-quotes`}>
|
||||||
|
{dictionary['navigation'].purchase_quotes}
|
||||||
|
</MenuItem>
|
||||||
|
</SubMenu>
|
||||||
|
<MenuItem
|
||||||
|
href={`/${locale}/apps/expense`}
|
||||||
|
icon={<i className='tabler-cash' />}
|
||||||
|
exactMatch={false}
|
||||||
|
activeUrl='/apps/expense'
|
||||||
|
>
|
||||||
|
{dictionary['navigation'].expenses}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
href={`/${locale}/apps/cash-bank`}
|
||||||
|
icon={<i className='tabler-building-bank' />}
|
||||||
|
exactMatch={false}
|
||||||
|
activeUrl='/apps/cash-bank'
|
||||||
|
>
|
||||||
|
{dictionary['navigation'].cash_and_bank}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
href={`/${locale}/apps/account`}
|
||||||
|
icon={<i className='tabler-align-box-left-stretch' />}
|
||||||
|
exactMatch={false}
|
||||||
|
activeUrl='/apps/account'
|
||||||
|
>
|
||||||
|
{dictionary['navigation'].account}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
href={`/${locale}/apps/fixed-assets`}
|
||||||
|
icon={<i className='tabler-apps' />}
|
||||||
|
exactMatch={false}
|
||||||
|
activeUrl='/apps/fixed-assets'
|
||||||
|
>
|
||||||
|
{dictionary['navigation'].fixed_assets}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
href={`/${locale}/apps/report`}
|
||||||
|
icon={<i className='tabler-file-analytics' />}
|
||||||
|
exactMatch={false}
|
||||||
|
activeUrl='/apps/report'
|
||||||
|
>
|
||||||
|
{dictionary['navigation'].reports}
|
||||||
|
</MenuItem>
|
||||||
<SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
|
<SubMenu label={dictionary['navigation'].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>
|
||||||
@ -120,9 +182,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
|||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].stock}>
|
<SubMenu label={dictionary['navigation'].stock}>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/stock/restock`}>
|
<MenuItem href={`/${locale}/apps/inventory/stock/restock`}>{dictionary['navigation'].restock}</MenuItem>
|
||||||
{dictionary['navigation'].restock}
|
|
||||||
</MenuItem>
|
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
{/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
|
{/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
@ -136,10 +196,22 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
|||||||
<MenuItem href={`/${locale}/apps/finance/payment-methods/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/finance/payment-methods/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].user} icon={<i className='tabler-user' />}>
|
<MenuItem
|
||||||
<MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
|
href={`/${locale}/apps/user/list`}
|
||||||
{/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
|
icon={<i className='tabler-user' />}
|
||||||
</SubMenu>
|
exactMatch={false}
|
||||||
|
activeUrl='/apps/user/list'
|
||||||
|
>
|
||||||
|
{dictionary['navigation'].user}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
href={`/${locale}/apps/vendor/list`}
|
||||||
|
icon={<i className='tabler-building' />}
|
||||||
|
exactMatch={false}
|
||||||
|
activeUrl='/apps/vendor/list'
|
||||||
|
>
|
||||||
|
{dictionary['navigation'].vendor}
|
||||||
|
</MenuItem>
|
||||||
</MenuSection>
|
</MenuSection>
|
||||||
</Menu>
|
</Menu>
|
||||||
</ScrollWrapper>
|
</ScrollWrapper>
|
||||||
|
|||||||
102
src/components/report/ReportItem.tsx
Normal file
102
src/components/report/ReportItem.tsx
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Box, Typography, Paper } from '@mui/material'
|
||||||
|
|
||||||
|
// Types
|
||||||
|
type ReportItemHeaderProps = {
|
||||||
|
title: string
|
||||||
|
date?: string
|
||||||
|
amount?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type ReportItemSubheaderProps = {
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type ReportItemProps = {
|
||||||
|
accountCode: string
|
||||||
|
accountName: string
|
||||||
|
amount: number
|
||||||
|
onClick?: () => void
|
||||||
|
isSubtitle?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
type ReportItemFooterProps = {
|
||||||
|
title: string
|
||||||
|
amount: number
|
||||||
|
children?: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to format currency
|
||||||
|
const formatCurrency = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('id-ID', {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0
|
||||||
|
}).format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ReportItemHeader Component
|
||||||
|
export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date, amount }) => {
|
||||||
|
return (
|
||||||
|
<Box className='bg-slate-200 px-6 py-4 flex justify-between items-center'>
|
||||||
|
<Typography variant='h6' className='text-primary font-semibold'>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1' className='text-primary font-medium'>
|
||||||
|
{amount ? formatCurrency(amount) : date}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ReportItemSubheader Component
|
||||||
|
export const ReportItemSubheader: React.FC<ReportItemSubheaderProps> = ({ title }) => {
|
||||||
|
return (
|
||||||
|
<Box className='px-6 py-3 bg-white border-b border-gray-300 hover:bg-gray-50 transition-colors'>
|
||||||
|
<Typography variant='subtitle1' className='font-semibold text-gray-900'>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ReportItem Component
|
||||||
|
export const ReportItem: React.FC<ReportItemProps> = ({
|
||||||
|
accountCode,
|
||||||
|
accountName,
|
||||||
|
amount,
|
||||||
|
onClick,
|
||||||
|
isSubtitle = true
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
onClick={onClick}
|
||||||
|
className={`px-6 py-3 flex justify-between items-center bg-white border-b border-gray-300 transition-all duration-200 ease-in-out ${
|
||||||
|
onClick ? 'cursor-pointer hover:bg-gray-50' : 'cursor-default'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Typography variant='body1' className={`text-gray-900 font-normal ${isSubtitle ? 'ml-4' : ''}`}>
|
||||||
|
{accountCode} {accountName}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1' className='text-primary font-medium text-right'>
|
||||||
|
{formatCurrency(amount)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ReportItemFooter Component
|
||||||
|
export const ReportItemFooter: React.FC<ReportItemFooterProps> = ({ title, amount, children }) => {
|
||||||
|
return (
|
||||||
|
<Box className='px-6 py-4 border-b border-gray-300 hover:bg-gray-50 transition-colors'>
|
||||||
|
<Box className='flex justify-between items-center'>
|
||||||
|
<Typography variant='subtitle1' className='font-bold text-gray-900'>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='subtitle1' className='text-primary font-bold text-right'>
|
||||||
|
{formatCurrency(amount)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
{children && <Box className='mt-2'>{children}</Box>}
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
27
src/components/report/ReportTitle.tsx
Normal file
27
src/components/report/ReportTitle.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ReportTitle = ({ title }: Props) => {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
|
||||||
|
<div>
|
||||||
|
<Typography variant='h4' className='mbe-1'>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReportTitle
|
||||||
@ -1,9 +1,10 @@
|
|||||||
export const i18n = {
|
export const i18n = {
|
||||||
defaultLocale: 'en',
|
defaultLocale: 'en',
|
||||||
locales: ['en', 'fr', 'ar'],
|
locales: ['en', 'id'],
|
||||||
langDirection: {
|
langDirection: {
|
||||||
en: 'ltr',
|
en: 'ltr',
|
||||||
fr: 'ltr',
|
fr: 'ltr',
|
||||||
|
id: 'ltr',
|
||||||
ar: 'rtl'
|
ar: 'rtl'
|
||||||
}
|
}
|
||||||
} as const
|
} as const
|
||||||
|
|||||||
@ -25,7 +25,15 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
|
|||||||
const savedToken = localStorage.getItem('authToken')
|
const savedToken = localStorage.getItem('authToken')
|
||||||
const savedUser = localStorage.getItem('user')
|
const savedUser = localStorage.getItem('user')
|
||||||
if (savedToken) setToken(savedToken)
|
if (savedToken) setToken(savedToken)
|
||||||
if (savedUser) setCurrentUser(JSON.parse(savedUser))
|
if (savedUser) {
|
||||||
|
try {
|
||||||
|
setCurrentUser(JSON.parse(savedUser))
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to parse saved user data:', error)
|
||||||
|
// Clear invalid data
|
||||||
|
localStorage.removeItem('user')
|
||||||
|
}
|
||||||
|
}
|
||||||
setIsInitialized(true)
|
setIsInitialized(true)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
|||||||
@ -1,116 +0,0 @@
|
|||||||
{
|
|
||||||
"navigation": {
|
|
||||||
"dashboards": "لوحات القيادة",
|
|
||||||
"analytics": "تحليلات",
|
|
||||||
"inventory": "تجزئة الكترونية",
|
|
||||||
"stock": "المخزون",
|
|
||||||
"academy": "أكاديمية",
|
|
||||||
"logistics": "اللوجستية",
|
|
||||||
"frontPages": "الصفحات الأولى",
|
|
||||||
"landing": "الهبوط",
|
|
||||||
"pricing": "التسعير",
|
|
||||||
"payment": "قسط",
|
|
||||||
"checkout": "الدفع",
|
|
||||||
"helpCenter": "مركز المساعدة",
|
|
||||||
"appsPages": "التطبيقات والصفحات",
|
|
||||||
"apps": "تطبيقات",
|
|
||||||
"dashboard": "لوحة القيادة",
|
|
||||||
"products": "منتجات",
|
|
||||||
"list": "قائمة",
|
|
||||||
"add": "يضيف",
|
|
||||||
"restock": "استرجاع",
|
|
||||||
"category": "فئة",
|
|
||||||
"overview": "نظرة عامة",
|
|
||||||
"profitloss": "الربح والخسارة",
|
|
||||||
"finance": "مالية",
|
|
||||||
"paymentMethods": "طرق الدفع",
|
|
||||||
"organization": "المنظمة",
|
|
||||||
"outlet": "مخزن",
|
|
||||||
"units": "وحدات",
|
|
||||||
"reports": "تقارير",
|
|
||||||
"ingredients": "مكونات",
|
|
||||||
"orders": "أوامر",
|
|
||||||
"details": "تفاصيل",
|
|
||||||
"customers": "العملاء",
|
|
||||||
"manageReviews": "إدارة المراجعات",
|
|
||||||
"referrals": "الإحالات",
|
|
||||||
"settings": "إعدادات",
|
|
||||||
"myCourses": "دوراتي",
|
|
||||||
"courseDetails": "تفاصيل الدورة",
|
|
||||||
"fleet": "أسطول",
|
|
||||||
"email": "البريد الإلكتروني",
|
|
||||||
"chat": "محادثة",
|
|
||||||
"calendar": "تقويم",
|
|
||||||
"kanban": "كانبان",
|
|
||||||
"invoice": "فاتورة",
|
|
||||||
"preview": "معاينة",
|
|
||||||
"edit": "يحرر",
|
|
||||||
"user": "المستعمل",
|
|
||||||
"view": "رأي",
|
|
||||||
"rolesPermissions": "الأدوار والأذونات",
|
|
||||||
"roles": "الأدوار",
|
|
||||||
"permissions": "أذونات",
|
|
||||||
"pages": "الصفحات",
|
|
||||||
"userProfile": "ملف تعريفي للمستخدم",
|
|
||||||
"accountSettings": "إعدادت الحساب",
|
|
||||||
"faq": "التعليمات",
|
|
||||||
"miscellaneous": "متفرقات",
|
|
||||||
"comingSoon": "قريبا",
|
|
||||||
"underMaintenance": "تحت الصيانة",
|
|
||||||
"pageNotFound404": "الصفحة غير موجودة - 404",
|
|
||||||
"notAuthorized401": "غير مصرح به - 401",
|
|
||||||
"authPages": "صفحات المصادقة",
|
|
||||||
"login": "تسجيل الدخول",
|
|
||||||
"loginV1": "تسجيل الدخول v1",
|
|
||||||
"loginV2": "تسجيل الدخول الإصدار 2",
|
|
||||||
"register": "يسجل",
|
|
||||||
"registerV1": "تسجيل الإصدار 1",
|
|
||||||
"registerV2": "تسجيل الإصدار 2",
|
|
||||||
"registerMultiSteps": "تسجيل متعدد الخطوات",
|
|
||||||
"verifyEmail": "التحقق من البريد الإلكتروني",
|
|
||||||
"verifyEmailV1": "التحقق من البريد الإلكتروني الإصدار 1",
|
|
||||||
"verifyEmailV2": "التحقق من البريد الإلكتروني الإصدار 2",
|
|
||||||
"forgotPassword": "هل نسيت كلمة السر",
|
|
||||||
"forgotPasswordV1": "نسيت كلمة المرور v1",
|
|
||||||
"forgotPasswordV2": "نسيت كلمة المرور v2",
|
|
||||||
"resetPassword": "إعادة تعيين كلمة المرور",
|
|
||||||
"resetPasswordV1": "إعادة تعيين كلمة المرور v1",
|
|
||||||
"resetPasswordV2": "إعادة تعيين كلمة المرور الإصدار 2",
|
|
||||||
"twoSteps": "خطوتين",
|
|
||||||
"twoStepsV1": "خطوتين v1",
|
|
||||||
"twoStepsV2": "خطوتان - الإصدار 2",
|
|
||||||
"wizardExamples": "أمثلة على المعالج",
|
|
||||||
"propertyListing": "قائمة الممتلكات",
|
|
||||||
"createDeal": "إنشاء صفقة",
|
|
||||||
"dialogExamples": "أمثلة الحوار",
|
|
||||||
"widgetExamples": "أمثلة القطعة",
|
|
||||||
"basic": "أساسي",
|
|
||||||
"advanced": "متقدم",
|
|
||||||
"statistics": "إحصائيات",
|
|
||||||
"actions": "أجراءات",
|
|
||||||
"formsAndTables": "النماذج والجداول",
|
|
||||||
"formLayouts": "تخطيطات النموذج",
|
|
||||||
"formValidation": "التحقق من صحة النموذج",
|
|
||||||
"formWizard": "معالج النماذج",
|
|
||||||
"reactTable": "جدول رد الفعل",
|
|
||||||
"formELements": "عناصر النماذج",
|
|
||||||
"muiTables": "جداول MUI",
|
|
||||||
"chartsMisc": "الرسوم البيانية ومتفرقات",
|
|
||||||
"charts": "الرسوم البيانية",
|
|
||||||
"recharts": "يعيد رسم الخرائط",
|
|
||||||
"apex": "ذروة",
|
|
||||||
"foundation": "مؤسسة",
|
|
||||||
"components": "عناصر",
|
|
||||||
"menuExamples": "أمثلة القائمة",
|
|
||||||
"raiseSupport": "رفع الدعم",
|
|
||||||
"documentation": "توثيق",
|
|
||||||
"others": "آحرون",
|
|
||||||
"itemWithBadge": "العنصر مع شارة",
|
|
||||||
"externalLink": "رابط خارجي",
|
|
||||||
"menuLevels": "مستويات القائمة",
|
|
||||||
"menuLevel2": "مستوى القائمة 2",
|
|
||||||
"menuLevel3": "مستوى القائمة 3",
|
|
||||||
"disabledMenu": "قائمة المعوقين",
|
|
||||||
"dailyReport": "تقرير يومي"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -111,6 +111,21 @@
|
|||||||
"menuLevel2": "Menu Level 2",
|
"menuLevel2": "Menu Level 2",
|
||||||
"menuLevel3": "Menu Level 3",
|
"menuLevel3": "Menu Level 3",
|
||||||
"disabledMenu": "Disabled Menu",
|
"disabledMenu": "Disabled Menu",
|
||||||
"dailyReport": "Daily Report"
|
"dailyReport": "Daily Report",
|
||||||
|
"vendor": "Vendor",
|
||||||
|
"sales": "Sales",
|
||||||
|
"purchase_text": "Purchase",
|
||||||
|
"purchase_orders": "Purchase Orders",
|
||||||
|
"purchase_bills": "Purchase Bills",
|
||||||
|
"purchase_delivery": "Purchase Delivery",
|
||||||
|
"purchase_quotes": "Purchase Quotes",
|
||||||
|
"invoices": "Invoices",
|
||||||
|
"deliveries": "Deliveries",
|
||||||
|
"sales_orders": "Orders",
|
||||||
|
"quotes": "Quotes",
|
||||||
|
"expenses": "Expenses",
|
||||||
|
"cash_and_bank": "Cash & Bank",
|
||||||
|
"account": "Account",
|
||||||
|
"fixed_assets": "Fixed Assets"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,116 +0,0 @@
|
|||||||
{
|
|
||||||
"navigation": {
|
|
||||||
"dashboards": "Tableaux de bord",
|
|
||||||
"analytics": "Analytique",
|
|
||||||
"inventory": "Inventaire",
|
|
||||||
"stock": "Stock",
|
|
||||||
"academy": "Académie",
|
|
||||||
"logistics": "Logistique",
|
|
||||||
"frontPages": "Premières pages",
|
|
||||||
"landing": "Atterrissage",
|
|
||||||
"pricing": "Tarifs",
|
|
||||||
"payment": "Paiement",
|
|
||||||
"checkout": "Vérifier",
|
|
||||||
"helpCenter": "Centre d'aide",
|
|
||||||
"appsPages": "Applications et pages",
|
|
||||||
"apps": "Apps",
|
|
||||||
"dashboard": "Tableau de bord",
|
|
||||||
"products": "Produits",
|
|
||||||
"list": "Liste",
|
|
||||||
"add": "Ajouter",
|
|
||||||
"restock": "Rapprocher",
|
|
||||||
"category": "Catégorie",
|
|
||||||
"overview": "Aperçu",
|
|
||||||
"profitloss": "Profit et perte",
|
|
||||||
"finance": "Finance",
|
|
||||||
"paymentMethods": "Méthodes de paiement",
|
|
||||||
"organization": "Organisation",
|
|
||||||
"outlet": "Point de vente",
|
|
||||||
"units": "Unites",
|
|
||||||
"reports": "Rapports",
|
|
||||||
"ingredients": "Ingrédients",
|
|
||||||
"orders": "Ordres",
|
|
||||||
"details": "Détails",
|
|
||||||
"customers": "Clientes",
|
|
||||||
"manageReviews": "Gérer les avis",
|
|
||||||
"referrals": "Références",
|
|
||||||
"settings": "Paramètres",
|
|
||||||
"myCourses": "Mes cours",
|
|
||||||
"courseDetails": "Détails du cours",
|
|
||||||
"fleet": "Flotte",
|
|
||||||
"email": "E-mail",
|
|
||||||
"chat": "chatte",
|
|
||||||
"calendar": "Calendrier",
|
|
||||||
"kanban": "Kanban",
|
|
||||||
"invoice": "Facture d'achat",
|
|
||||||
"preview": "Aperçu",
|
|
||||||
"edit": "Éditer",
|
|
||||||
"user": "Utilisateur",
|
|
||||||
"view": "Voir",
|
|
||||||
"rolesPermissions": "Rôles et autorisations",
|
|
||||||
"roles": "Les rôles",
|
|
||||||
"permissions": "Autorisations",
|
|
||||||
"pages": "Pages",
|
|
||||||
"userProfile": "Profil de l'utilisateur",
|
|
||||||
"accountSettings": "Paramètres du compte",
|
|
||||||
"faq": "FAQ",
|
|
||||||
"miscellaneous": "Divers",
|
|
||||||
"comingSoon": "À venir",
|
|
||||||
"underMaintenance": "En maintenance",
|
|
||||||
"pageNotFound404": "Page non trouvée - 404",
|
|
||||||
"notAuthorized401": "Non autorisé - 401",
|
|
||||||
"authPages": "Pages d'authentification",
|
|
||||||
"login": "Connexion",
|
|
||||||
"loginV1": "Connexion v1",
|
|
||||||
"loginV2": "Connexion v2",
|
|
||||||
"register": "S'inscrire",
|
|
||||||
"registerV1": "Enregistrer v1",
|
|
||||||
"registerV2": "Enregistrer v2",
|
|
||||||
"registerMultiSteps": "Enregistrer plusieurs étapes",
|
|
||||||
"verifyEmail": "Vérifier les courriels",
|
|
||||||
"verifyEmailV1": "Vérifier l'e-mail v1",
|
|
||||||
"verifyEmailV2": "Vérifier l'e-mail v2",
|
|
||||||
"forgotPassword": "Mot de passe oublié",
|
|
||||||
"forgotPasswordV1": "Mot de passe oublié v1",
|
|
||||||
"forgotPasswordV2": "Mot de passe oublié v2",
|
|
||||||
"resetPassword": "Réinitialiser le mot de passe",
|
|
||||||
"resetPasswordV1": "Réinitialiser le mot de passe v1",
|
|
||||||
"resetPasswordV2": "Réinitialiser le mot de passe v2",
|
|
||||||
"twoSteps": "Deux étapes",
|
|
||||||
"twoStepsV1": "Deux étapes v1",
|
|
||||||
"twoStepsV2": "Deux étapes v2",
|
|
||||||
"wizardExamples": "Exemples d'assistants",
|
|
||||||
"propertyListing": "Liste des biens",
|
|
||||||
"createDeal": "Créer un accord",
|
|
||||||
"dialogExamples": "Exemples de dialogue",
|
|
||||||
"widgetExamples": "Exemples de widgets",
|
|
||||||
"basic": "Basique",
|
|
||||||
"advanced": "Avancée",
|
|
||||||
"statistics": "Statistiques",
|
|
||||||
"actions": "Actions",
|
|
||||||
"formsAndTables": "Formulaires et tableaux",
|
|
||||||
"formLayouts": "Dispositions de formulaire",
|
|
||||||
"formValidation": "Validation du formulaire",
|
|
||||||
"formWizard": "Assistant de formulaire",
|
|
||||||
"reactTable": "Tableau de réaction",
|
|
||||||
"formELements": "Éléments de formulaire",
|
|
||||||
"muiTables": "Tableaux MUI",
|
|
||||||
"chartsMisc": "Graphiques & Divers",
|
|
||||||
"charts": "Graphiques",
|
|
||||||
"recharts": "Regraphiques",
|
|
||||||
"apex": "Sommet",
|
|
||||||
"foundation": "fondation",
|
|
||||||
"components": "Composants",
|
|
||||||
"menuExamples": "Exemples de menus",
|
|
||||||
"raiseSupport": "Augmenter le soutien",
|
|
||||||
"documentation": "Documentation",
|
|
||||||
"others": "Les autres",
|
|
||||||
"itemWithBadge": "Article avec badge",
|
|
||||||
"externalLink": "Lien Externe",
|
|
||||||
"menuLevels": "Niveaux de menus",
|
|
||||||
"menuLevel2": "Niveau menu 2",
|
|
||||||
"menuLevel3": "Niveau menu 3",
|
|
||||||
"disabledMenu": "Menu désactivé",
|
|
||||||
"dailyReport": "Rapport quotidien"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
131
src/data/dictionaries/id.json
Normal file
131
src/data/dictionaries/id.json
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
{
|
||||||
|
"navigation": {
|
||||||
|
"dashboards": "Dasbor",
|
||||||
|
"analytics": "Analitik",
|
||||||
|
"inventory": "Inventaris",
|
||||||
|
"stock": "Stok",
|
||||||
|
"academy": "Akademi",
|
||||||
|
"logistics": "Logistik",
|
||||||
|
"frontPages": "Halaman Depan",
|
||||||
|
"landing": "Beranda",
|
||||||
|
"pricing": "Harga",
|
||||||
|
"payment": "Pembayaran",
|
||||||
|
"checkout": "Checkout",
|
||||||
|
"helpCenter": "Pusat Bantuan",
|
||||||
|
"appsPages": "Aplikasi & Halaman",
|
||||||
|
"apps": "Aplikasi",
|
||||||
|
"dashboard": "Dasbor",
|
||||||
|
"products": "Produk",
|
||||||
|
"list": "Daftar",
|
||||||
|
"add": "Tambah",
|
||||||
|
"restock": "Isi Ulang Stok",
|
||||||
|
"category": "Kategori",
|
||||||
|
"overview": "Ringkasan",
|
||||||
|
"profitloss": "Laba Rugi",
|
||||||
|
"units": "Unit",
|
||||||
|
"reports": "Laporan",
|
||||||
|
"finance": "Keuangan",
|
||||||
|
"paymentMethods": "Metode Pembayaran",
|
||||||
|
"organization": "Organisasi",
|
||||||
|
"outlet": "Outlet",
|
||||||
|
"ingredients": "Bahan",
|
||||||
|
"orders": "Pesanan",
|
||||||
|
"details": "Detail",
|
||||||
|
"customers": "Pelanggan",
|
||||||
|
"manageReviews": "Kelola Ulasan",
|
||||||
|
"referrals": "Rujukan",
|
||||||
|
"settings": "Pengaturan",
|
||||||
|
"myCourses": "Kursus Saya",
|
||||||
|
"courseDetails": "Detail Kursus",
|
||||||
|
"fleet": "Armada",
|
||||||
|
"email": "Email",
|
||||||
|
"chat": "Chat",
|
||||||
|
"calendar": "Kalender",
|
||||||
|
"kanban": "Kanban",
|
||||||
|
"invoice": "Faktur",
|
||||||
|
"preview": "Pratinjau",
|
||||||
|
"edit": "Edit",
|
||||||
|
"user": "Pengguna",
|
||||||
|
"view": "Lihat",
|
||||||
|
"rolesPermissions": "Peran & Izin",
|
||||||
|
"roles": "Peran",
|
||||||
|
"permissions": "Izin",
|
||||||
|
"pages": "Halaman",
|
||||||
|
"userProfile": "Profil Pengguna",
|
||||||
|
"accountSettings": "Pengaturan Akun",
|
||||||
|
"faq": "FAQ",
|
||||||
|
"miscellaneous": "Lain-lain",
|
||||||
|
"comingSoon": "Segera Hadir",
|
||||||
|
"underMaintenance": "Dalam Pemeliharaan",
|
||||||
|
"pageNotFound404": "Halaman Tidak Ditemukan - 404",
|
||||||
|
"notAuthorized401": "Tidak Diizinkan - 401",
|
||||||
|
"authPages": "Halaman Autentikasi",
|
||||||
|
"login": "Masuk",
|
||||||
|
"loginV1": "Masuk v1",
|
||||||
|
"loginV2": "Masuk v2",
|
||||||
|
"register": "Daftar",
|
||||||
|
"registerV1": "Daftar v1",
|
||||||
|
"registerV2": "Daftar v2",
|
||||||
|
"registerMultiSteps": "Daftar Multi-Langkah",
|
||||||
|
"verifyEmail": "Verifikasi Email",
|
||||||
|
"verifyEmailV1": "Verifikasi Email v1",
|
||||||
|
"verifyEmailV2": "Verifikasi Email v2",
|
||||||
|
"forgotPassword": "Lupa Kata Sandi",
|
||||||
|
"forgotPasswordV1": "Lupa Kata Sandi v1",
|
||||||
|
"forgotPasswordV2": "Lupa Kata Sandi v2",
|
||||||
|
"resetPassword": "Reset Kata Sandi",
|
||||||
|
"resetPasswordV1": "Reset Kata Sandi v1",
|
||||||
|
"resetPasswordV2": "Reset Kata Sandi v2",
|
||||||
|
"twoSteps": "Dua Langkah",
|
||||||
|
"twoStepsV1": "Dua Langkah v1",
|
||||||
|
"twoStepsV2": "Dua Langkah v2",
|
||||||
|
"wizardExamples": "Contoh Wizard",
|
||||||
|
"propertyListing": "Daftar Properti",
|
||||||
|
"createDeal": "Buat Penawaran",
|
||||||
|
"dialogExamples": "Contoh Dialog",
|
||||||
|
"widgetExamples": "Contoh Widget",
|
||||||
|
"basic": "Dasar",
|
||||||
|
"advanced": "Lanjutan",
|
||||||
|
"statistics": "Statistik",
|
||||||
|
"actions": "Aksi",
|
||||||
|
"formsAndTables": "Form & Tabel",
|
||||||
|
"formLayouts": "Layout Form",
|
||||||
|
"formValidation": "Validasi Form",
|
||||||
|
"formWizard": "Wizard Form",
|
||||||
|
"reactTable": "Tabel React",
|
||||||
|
"formELements": "Elemen Form",
|
||||||
|
"muiTables": "Tabel MUI",
|
||||||
|
"chartsMisc": "Grafik & Lain-lain",
|
||||||
|
"charts": "Grafik",
|
||||||
|
"recharts": "Recharts",
|
||||||
|
"apex": "Apex",
|
||||||
|
"foundation": "Fondasi",
|
||||||
|
"components": "Komponen",
|
||||||
|
"menuExamples": "Contoh Menu",
|
||||||
|
"raiseSupport": "Buat Tiket Dukungan",
|
||||||
|
"documentation": "Dokumentasi",
|
||||||
|
"others": "Lainnya",
|
||||||
|
"itemWithBadge": "Item dengan Badge",
|
||||||
|
"externalLink": "Link Eksternal",
|
||||||
|
"menuLevels": "Level Menu",
|
||||||
|
"menuLevel2": "Level Menu 2",
|
||||||
|
"menuLevel3": "Level Menu 3",
|
||||||
|
"disabledMenu": "Menu Nonaktif",
|
||||||
|
"dailyReport": "Laporan Harian",
|
||||||
|
"vendor": "Vendor",
|
||||||
|
"sales": "Penjualan",
|
||||||
|
"purchase_text": "Pembelian",
|
||||||
|
"purchase_orders": "Pesanan Pembelian",
|
||||||
|
"purchase_bills": "Tagihan Pembelian",
|
||||||
|
"purchase_delivery": "Pengiriman Pembelian",
|
||||||
|
"purchase_quotes": "Penawaran Pembelian",
|
||||||
|
"invoices": "Tagihan",
|
||||||
|
"deliveries": "Pengiriman",
|
||||||
|
"sales_orders": "Pemesanan",
|
||||||
|
"quotes": "Penawaran",
|
||||||
|
"expenses": "Biaya",
|
||||||
|
"cash_and_bank": "Kas & Bank",
|
||||||
|
"account": "Akun",
|
||||||
|
"fixed_assets": "Aset Tetap"
|
||||||
|
}
|
||||||
|
}
|
||||||
224
src/data/dummy/expense.ts
Normal file
224
src/data/dummy/expense.ts
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
import { ExpenseType } from '@/types/apps/expenseTypes'
|
||||||
|
|
||||||
|
export const expenseData: ExpenseType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
date: '2025-01-05',
|
||||||
|
number: 'EXP/2025/001',
|
||||||
|
reference: 'REF-EXP-001',
|
||||||
|
benefeciaryName: 'Budi Santoso',
|
||||||
|
benefeciaryCompany: 'PT Maju Jaya',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
balanceDue: 5000000,
|
||||||
|
total: 5000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
date: '2025-01-06',
|
||||||
|
number: 'EXP/2025/002',
|
||||||
|
reference: 'REF-EXP-002',
|
||||||
|
benefeciaryName: 'Siti Aminah',
|
||||||
|
benefeciaryCompany: 'CV Sentosa Abadi',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
balanceDue: 2500000,
|
||||||
|
total: 6000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
date: '2025-01-07',
|
||||||
|
number: 'EXP/2025/003',
|
||||||
|
reference: 'REF-EXP-003',
|
||||||
|
benefeciaryName: 'Agus Prasetyo',
|
||||||
|
benefeciaryCompany: 'UD Makmur',
|
||||||
|
status: 'Lunas',
|
||||||
|
balanceDue: 0,
|
||||||
|
total: 4200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
date: '2025-01-08',
|
||||||
|
number: 'EXP/2025/004',
|
||||||
|
reference: 'REF-EXP-004',
|
||||||
|
benefeciaryName: 'Rina Wulandari',
|
||||||
|
benefeciaryCompany: 'PT Sejahtera Bersama',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
balanceDue: 3200000,
|
||||||
|
total: 3200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
date: '2025-01-09',
|
||||||
|
number: 'EXP/2025/005',
|
||||||
|
reference: 'REF-EXP-005',
|
||||||
|
benefeciaryName: 'Dedi Kurniawan',
|
||||||
|
benefeciaryCompany: 'CV Bintang Terang',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
balanceDue: 1500000,
|
||||||
|
total: 7000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
date: '2025-01-10',
|
||||||
|
number: 'EXP/2025/006',
|
||||||
|
reference: 'REF-EXP-006',
|
||||||
|
benefeciaryName: 'Sri Lestari',
|
||||||
|
benefeciaryCompany: 'PT Barokah Jaya',
|
||||||
|
status: 'Lunas',
|
||||||
|
balanceDue: 0,
|
||||||
|
total: 2800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
date: '2025-01-11',
|
||||||
|
number: 'EXP/2025/007',
|
||||||
|
reference: 'REF-EXP-007',
|
||||||
|
benefeciaryName: 'Joko Widodo',
|
||||||
|
benefeciaryCompany: 'UD Sumber Rejeki',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
balanceDue: 8000000,
|
||||||
|
total: 8000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
date: '2025-01-12',
|
||||||
|
number: 'EXP/2025/008',
|
||||||
|
reference: 'REF-EXP-008',
|
||||||
|
benefeciaryName: 'Maya Kartika',
|
||||||
|
benefeciaryCompany: 'PT Bumi Lestari',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
balanceDue: 2000000,
|
||||||
|
total: 9000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
date: '2025-01-13',
|
||||||
|
number: 'EXP/2025/009',
|
||||||
|
reference: 'REF-EXP-009',
|
||||||
|
benefeciaryName: 'Eko Yulianto',
|
||||||
|
benefeciaryCompany: 'CV Cahaya Baru',
|
||||||
|
status: 'Lunas',
|
||||||
|
balanceDue: 0,
|
||||||
|
total: 3500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
date: '2025-01-14',
|
||||||
|
number: 'EXP/2025/010',
|
||||||
|
reference: 'REF-EXP-010',
|
||||||
|
benefeciaryName: 'Nina Rahmawati',
|
||||||
|
benefeciaryCompany: 'PT Gemilang',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
balanceDue: 4700000,
|
||||||
|
total: 4700000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
date: '2025-01-15',
|
||||||
|
number: 'EXP/2025/011',
|
||||||
|
reference: 'REF-EXP-011',
|
||||||
|
benefeciaryName: 'Andi Saputra',
|
||||||
|
benefeciaryCompany: 'CV Harmoni',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
balanceDue: 1200000,
|
||||||
|
total: 6000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
date: '2025-01-16',
|
||||||
|
number: 'EXP/2025/012',
|
||||||
|
reference: 'REF-EXP-012',
|
||||||
|
benefeciaryName: 'Yuni Astuti',
|
||||||
|
benefeciaryCompany: 'PT Surya Abadi',
|
||||||
|
status: 'Lunas',
|
||||||
|
balanceDue: 0,
|
||||||
|
total: 5200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
date: '2025-01-17',
|
||||||
|
number: 'EXP/2025/013',
|
||||||
|
reference: 'REF-EXP-013',
|
||||||
|
benefeciaryName: 'Ridwan Hidayat',
|
||||||
|
benefeciaryCompany: 'UD Berkah',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
balanceDue: 2900000,
|
||||||
|
total: 2900000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
date: '2025-01-18',
|
||||||
|
number: 'EXP/2025/014',
|
||||||
|
reference: 'REF-EXP-014',
|
||||||
|
benefeciaryName: 'Ratna Sari',
|
||||||
|
benefeciaryCompany: 'PT Amanah Sentosa',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
balanceDue: 1000000,
|
||||||
|
total: 4000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
date: '2025-01-19',
|
||||||
|
number: 'EXP/2025/015',
|
||||||
|
reference: 'REF-EXP-015',
|
||||||
|
benefeciaryName: 'Hendra Gunawan',
|
||||||
|
benefeciaryCompany: 'CV Murni',
|
||||||
|
status: 'Lunas',
|
||||||
|
balanceDue: 0,
|
||||||
|
total: 2500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
date: '2025-01-20',
|
||||||
|
number: 'EXP/2025/016',
|
||||||
|
reference: 'REF-EXP-016',
|
||||||
|
benefeciaryName: 'Mega Putri',
|
||||||
|
benefeciaryCompany: 'PT Citra Mandiri',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
balanceDue: 6100000,
|
||||||
|
total: 6100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
date: '2025-01-21',
|
||||||
|
number: 'EXP/2025/017',
|
||||||
|
reference: 'REF-EXP-017',
|
||||||
|
benefeciaryName: 'Bayu Saputra',
|
||||||
|
benefeciaryCompany: 'UD Lancar Jaya',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
balanceDue: 1700000,
|
||||||
|
total: 5000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
date: '2025-01-22',
|
||||||
|
number: 'EXP/2025/018',
|
||||||
|
reference: 'REF-EXP-018',
|
||||||
|
benefeciaryName: 'Dian Anggraini',
|
||||||
|
benefeciaryCompany: 'CV Sumber Cahaya',
|
||||||
|
status: 'Lunas',
|
||||||
|
balanceDue: 0,
|
||||||
|
total: 3300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
date: '2025-01-23',
|
||||||
|
number: 'EXP/2025/019',
|
||||||
|
reference: 'REF-EXP-019',
|
||||||
|
benefeciaryName: 'Rizky Aditya',
|
||||||
|
benefeciaryCompany: 'PT Mandiri Abadi',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
balanceDue: 7000000,
|
||||||
|
total: 7000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
date: '2025-01-24',
|
||||||
|
number: 'EXP/2025/020',
|
||||||
|
reference: 'REF-EXP-020',
|
||||||
|
benefeciaryName: 'Lina Marlina',
|
||||||
|
benefeciaryCompany: 'CV Anugerah',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
balanceDue: 2000000,
|
||||||
|
total: 6500000
|
||||||
|
}
|
||||||
|
]
|
||||||
244
src/data/dummy/purchase-bill.ts
Normal file
244
src/data/dummy/purchase-bill.ts
Normal file
@ -0,0 +1,244 @@
|
|||||||
|
import { PurchaseBillType } from '@/types/apps/purchaseBillType'
|
||||||
|
|
||||||
|
export const purchaseBillsData: PurchaseBillType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
number: 'PB-001',
|
||||||
|
vendorName: 'Andi Wijaya',
|
||||||
|
vendorCompany: 'PT Sumber Makmur',
|
||||||
|
reference: 'REF-001',
|
||||||
|
date: '2025-09-01',
|
||||||
|
dueDate: '2025-09-15',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 5000000,
|
||||||
|
total: 5000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
number: 'PB-002',
|
||||||
|
vendorName: 'Siti Rahma',
|
||||||
|
vendorCompany: 'CV Cahaya Abadi',
|
||||||
|
reference: 'REF-002',
|
||||||
|
date: '2025-08-28',
|
||||||
|
dueDate: '2025-09-12',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 2000000,
|
||||||
|
total: 8000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
number: 'PB-003',
|
||||||
|
vendorName: 'Budi Santoso',
|
||||||
|
vendorCompany: 'UD Sejahtera',
|
||||||
|
reference: 'REF-003',
|
||||||
|
date: '2025-09-05',
|
||||||
|
dueDate: '2025-09-20',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 3500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
number: 'PB-004',
|
||||||
|
vendorName: 'Rina Kartika',
|
||||||
|
vendorCompany: 'PT Mitra Jaya',
|
||||||
|
reference: 'REF-004',
|
||||||
|
date: '2025-08-30',
|
||||||
|
dueDate: '2025-09-14',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 12000000,
|
||||||
|
total: 12000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
number: 'PB-005',
|
||||||
|
vendorName: 'Agus Salim',
|
||||||
|
vendorCompany: 'CV Bumi Persada',
|
||||||
|
reference: 'REF-005',
|
||||||
|
date: '2025-09-03',
|
||||||
|
dueDate: '2025-09-18',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 1500000,
|
||||||
|
total: 6000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
number: 'PB-006',
|
||||||
|
vendorName: 'Maya Lestari',
|
||||||
|
vendorCompany: 'PT Tunas Baru',
|
||||||
|
reference: 'REF-006',
|
||||||
|
date: '2025-09-06',
|
||||||
|
dueDate: '2025-09-21',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 9000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
number: 'PB-007',
|
||||||
|
vendorName: 'Hendra Gunawan',
|
||||||
|
vendorCompany: 'UD Prima Sentosa',
|
||||||
|
reference: 'REF-007',
|
||||||
|
date: '2025-09-02',
|
||||||
|
dueDate: '2025-09-17',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 7200000,
|
||||||
|
total: 7200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
number: 'PB-008',
|
||||||
|
vendorName: 'Dewi Anggraini',
|
||||||
|
vendorCompany: 'CV Inti Mandiri',
|
||||||
|
reference: 'REF-008',
|
||||||
|
date: '2025-08-27',
|
||||||
|
dueDate: '2025-09-11',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 3000000,
|
||||||
|
total: 10000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
number: 'PB-009',
|
||||||
|
vendorName: 'Yusuf Arifin',
|
||||||
|
vendorCompany: 'PT Surya Kencana',
|
||||||
|
reference: 'REF-009',
|
||||||
|
date: '2025-09-04',
|
||||||
|
dueDate: '2025-09-19',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 4500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
number: 'PB-010',
|
||||||
|
vendorName: 'Nurhayati',
|
||||||
|
vendorCompany: 'UD Cahaya Mulia',
|
||||||
|
reference: 'REF-010',
|
||||||
|
date: '2025-09-07',
|
||||||
|
dueDate: '2025-09-22',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 2500000,
|
||||||
|
total: 2500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
number: 'PB-011',
|
||||||
|
vendorName: 'Fajar Hidayat',
|
||||||
|
vendorCompany: 'PT Bina Karya',
|
||||||
|
reference: 'REF-011',
|
||||||
|
date: '2025-09-01',
|
||||||
|
dueDate: '2025-09-16',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 1000000,
|
||||||
|
total: 7000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
number: 'PB-012',
|
||||||
|
vendorName: 'Ratna Sari',
|
||||||
|
vendorCompany: 'CV Mega Utama',
|
||||||
|
reference: 'REF-012',
|
||||||
|
date: '2025-09-08',
|
||||||
|
dueDate: '2025-09-23',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 5600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
number: 'PB-013',
|
||||||
|
vendorName: 'Tono Prasetyo',
|
||||||
|
vendorCompany: 'UD Karya Indah',
|
||||||
|
reference: 'REF-013',
|
||||||
|
date: '2025-08-29',
|
||||||
|
dueDate: '2025-09-13',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 8000000,
|
||||||
|
total: 8000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
number: 'PB-014',
|
||||||
|
vendorName: 'Lina Marlina',
|
||||||
|
vendorCompany: 'PT Harmoni Sejati',
|
||||||
|
reference: 'REF-014',
|
||||||
|
date: '2025-09-05',
|
||||||
|
dueDate: '2025-09-20',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 4000000,
|
||||||
|
total: 10000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
number: 'PB-015',
|
||||||
|
vendorName: 'Arman Saputra',
|
||||||
|
vendorCompany: 'CV Sentra Niaga',
|
||||||
|
reference: 'REF-015',
|
||||||
|
date: '2025-09-03',
|
||||||
|
dueDate: '2025-09-18',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 3000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
number: 'PB-016',
|
||||||
|
vendorName: 'Indah Permata',
|
||||||
|
vendorCompany: 'PT Citra Abadi',
|
||||||
|
reference: 'REF-016',
|
||||||
|
date: '2025-08-31',
|
||||||
|
dueDate: '2025-09-15',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 6700000,
|
||||||
|
total: 6700000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
number: 'PB-017',
|
||||||
|
vendorName: 'Adi Putra',
|
||||||
|
vendorCompany: 'UD Makmur Bersama',
|
||||||
|
reference: 'REF-017',
|
||||||
|
date: '2025-09-02',
|
||||||
|
dueDate: '2025-09-17',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 2000000,
|
||||||
|
total: 9000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
number: 'PB-018',
|
||||||
|
vendorName: 'Sri Wahyuni',
|
||||||
|
vendorCompany: 'CV Bintang Terang',
|
||||||
|
reference: 'REF-018',
|
||||||
|
date: '2025-09-06',
|
||||||
|
dueDate: '2025-09-21',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 7200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
number: 'PB-019',
|
||||||
|
vendorName: 'Eko Prabowo',
|
||||||
|
vendorCompany: 'PT Mandiri Jaya',
|
||||||
|
reference: 'REF-019',
|
||||||
|
date: '2025-09-04',
|
||||||
|
dueDate: '2025-09-19',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 11000000,
|
||||||
|
total: 11000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
number: 'PB-020',
|
||||||
|
vendorName: 'Novi Astuti',
|
||||||
|
vendorCompany: 'UD Sinar Harapan',
|
||||||
|
reference: 'REF-020',
|
||||||
|
date: '2025-09-07',
|
||||||
|
dueDate: '2025-09-22',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 500000,
|
||||||
|
total: 4500000
|
||||||
|
}
|
||||||
|
]
|
||||||
184
src/data/dummy/purchase-delivery.ts
Normal file
184
src/data/dummy/purchase-delivery.ts
Normal file
@ -0,0 +1,184 @@
|
|||||||
|
import { PurchaseDeliveryType } from '@/types/apps/purchaseDeliveryTypes'
|
||||||
|
|
||||||
|
export const purchaseDeliveryData: PurchaseDeliveryType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
number: 'PD-001',
|
||||||
|
vendorName: 'Andi Wijaya',
|
||||||
|
vendorCompany: 'PT Sumber Makmur',
|
||||||
|
reference: 'REF-PD-001',
|
||||||
|
date: '2025-09-01',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
number: 'PD-002',
|
||||||
|
vendorName: 'Siti Rahma',
|
||||||
|
vendorCompany: 'CV Cahaya Abadi',
|
||||||
|
reference: 'REF-PD-002',
|
||||||
|
date: '2025-09-02',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
number: 'PD-003',
|
||||||
|
vendorName: 'Budi Santoso',
|
||||||
|
vendorCompany: 'UD Sejahtera',
|
||||||
|
reference: 'REF-PD-003',
|
||||||
|
date: '2025-09-03',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
number: 'PD-004',
|
||||||
|
vendorName: 'Rina Kartika',
|
||||||
|
vendorCompany: 'PT Mitra Jaya',
|
||||||
|
reference: 'REF-PD-004',
|
||||||
|
date: '2025-09-04',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
number: 'PD-005',
|
||||||
|
vendorName: 'Agus Salim',
|
||||||
|
vendorCompany: 'CV Bumi Persada',
|
||||||
|
reference: 'REF-PD-005',
|
||||||
|
date: '2025-09-05',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
number: 'PD-006',
|
||||||
|
vendorName: 'Maya Lestari',
|
||||||
|
vendorCompany: 'PT Tunas Baru',
|
||||||
|
reference: 'REF-PD-006',
|
||||||
|
date: '2025-09-06',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
number: 'PD-007',
|
||||||
|
vendorName: 'Hendra Gunawan',
|
||||||
|
vendorCompany: 'UD Prima Sentosa',
|
||||||
|
reference: 'REF-PD-007',
|
||||||
|
date: '2025-09-07',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
number: 'PD-008',
|
||||||
|
vendorName: 'Dewi Anggraini',
|
||||||
|
vendorCompany: 'CV Inti Mandiri',
|
||||||
|
reference: 'REF-PD-008',
|
||||||
|
date: '2025-09-08',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
number: 'PD-009',
|
||||||
|
vendorName: 'Yusuf Arifin',
|
||||||
|
vendorCompany: 'PT Surya Kencana',
|
||||||
|
reference: 'REF-PD-009',
|
||||||
|
date: '2025-09-09',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
number: 'PD-010',
|
||||||
|
vendorName: 'Nurhayati',
|
||||||
|
vendorCompany: 'UD Cahaya Mulia',
|
||||||
|
reference: 'REF-PD-010',
|
||||||
|
date: '2025-09-10',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
number: 'PD-011',
|
||||||
|
vendorName: 'Fajar Hidayat',
|
||||||
|
vendorCompany: 'PT Bina Karya',
|
||||||
|
reference: 'REF-PD-011',
|
||||||
|
date: '2025-09-11',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
number: 'PD-012',
|
||||||
|
vendorName: 'Ratna Sari',
|
||||||
|
vendorCompany: 'CV Mega Utama',
|
||||||
|
reference: 'REF-PD-012',
|
||||||
|
date: '2025-09-12',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
number: 'PD-013',
|
||||||
|
vendorName: 'Tono Prasetyo',
|
||||||
|
vendorCompany: 'UD Karya Indah',
|
||||||
|
reference: 'REF-PD-013',
|
||||||
|
date: '2025-09-13',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
number: 'PD-014',
|
||||||
|
vendorName: 'Lina Marlina',
|
||||||
|
vendorCompany: 'PT Harmoni Sejati',
|
||||||
|
reference: 'REF-PD-014',
|
||||||
|
date: '2025-09-14',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
number: 'PD-015',
|
||||||
|
vendorName: 'Arman Saputra',
|
||||||
|
vendorCompany: 'CV Sentra Niaga',
|
||||||
|
reference: 'REF-PD-015',
|
||||||
|
date: '2025-09-15',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
number: 'PD-016',
|
||||||
|
vendorName: 'Indah Permata',
|
||||||
|
vendorCompany: 'PT Citra Abadi',
|
||||||
|
reference: 'REF-PD-016',
|
||||||
|
date: '2025-09-16',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
number: 'PD-017',
|
||||||
|
vendorName: 'Adi Putra',
|
||||||
|
vendorCompany: 'UD Makmur Bersama',
|
||||||
|
reference: 'REF-PD-017',
|
||||||
|
date: '2025-09-17',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
number: 'PD-018',
|
||||||
|
vendorName: 'Sri Wahyuni',
|
||||||
|
vendorCompany: 'CV Bintang Terang',
|
||||||
|
reference: 'REF-PD-018',
|
||||||
|
date: '2025-09-18',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
number: 'PD-019',
|
||||||
|
vendorName: 'Eko Prabowo',
|
||||||
|
vendorCompany: 'PT Mandiri Jaya',
|
||||||
|
reference: 'REF-PD-019',
|
||||||
|
date: '2025-09-19',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
number: 'PD-020',
|
||||||
|
vendorName: 'Novi Astuti',
|
||||||
|
vendorCompany: 'UD Sinar Harapan',
|
||||||
|
reference: 'REF-PD-020',
|
||||||
|
date: '2025-09-20',
|
||||||
|
status: 'Selesai'
|
||||||
|
}
|
||||||
|
]
|
||||||
224
src/data/dummy/purchase-order.ts
Normal file
224
src/data/dummy/purchase-order.ts
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
import { PurchaseOrderType } from '@/types/apps/purchaseOrderTypes'
|
||||||
|
|
||||||
|
export const purchaseOrdersData: PurchaseOrderType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
number: 'PO/00040',
|
||||||
|
vendorName: 'Kairav Wijaya Nababan',
|
||||||
|
vendorCompany: 'Yayasan Haryanto Tbk',
|
||||||
|
reference: '',
|
||||||
|
date: '05/09/2025',
|
||||||
|
dueDate: '19/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 2037170
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
number: 'PO/00041',
|
||||||
|
vendorName: 'Sari Melani Hutapea',
|
||||||
|
vendorCompany: 'PT Santoso Jaya',
|
||||||
|
reference: 'REF-2025-001',
|
||||||
|
date: '03/09/2025',
|
||||||
|
dueDate: '17/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 1875500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
number: 'PO/00042',
|
||||||
|
vendorName: 'Budi Prasetyo Manullang',
|
||||||
|
vendorCompany: 'CV Wijaya Makmur',
|
||||||
|
reference: 'REF-2025-002',
|
||||||
|
date: '07/09/2025',
|
||||||
|
dueDate: '21/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 3250750
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
number: 'PO/00043',
|
||||||
|
vendorName: 'Maya Sari Lumban Gaol',
|
||||||
|
vendorCompany: 'PT Indah Permata',
|
||||||
|
reference: '',
|
||||||
|
date: '02/09/2025',
|
||||||
|
dueDate: '16/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 980250
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
number: 'PO/00044',
|
||||||
|
vendorName: 'Rahman Hakim Siahaan',
|
||||||
|
vendorCompany: 'Toko Bahagia Sejahtera',
|
||||||
|
reference: 'REF-2025-003',
|
||||||
|
date: '08/09/2025',
|
||||||
|
dueDate: '22/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 4125890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
number: 'PO/00045',
|
||||||
|
vendorName: 'Dewi Anggraini Panjaitan',
|
||||||
|
vendorCompany: 'PT Maju Bersama',
|
||||||
|
reference: 'REF-2025-004',
|
||||||
|
date: '01/09/2025',
|
||||||
|
dueDate: '15/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 2678300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
number: 'PO/00046',
|
||||||
|
vendorName: 'Agung Wijaya Simbolon',
|
||||||
|
vendorCompany: 'CV Karya Mandiri',
|
||||||
|
reference: '',
|
||||||
|
date: '06/09/2025',
|
||||||
|
dueDate: '20/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 1456780
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
number: 'PO/00047',
|
||||||
|
vendorName: 'Fitri Handayani Sitorus',
|
||||||
|
vendorCompany: 'PT Global Nusantara',
|
||||||
|
reference: 'REF-2025-005',
|
||||||
|
date: '04/09/2025',
|
||||||
|
dueDate: '18/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 5892450
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
number: 'PO/00048',
|
||||||
|
vendorName: 'Andi Setiawan Tampubolon',
|
||||||
|
vendorCompany: 'Yayasan Pembangunan Tbk',
|
||||||
|
reference: 'REF-2025-006',
|
||||||
|
date: '09/09/2025',
|
||||||
|
dueDate: '23/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 3567120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
number: 'PO/00049',
|
||||||
|
vendorName: 'Rina Maharani Hutasoit',
|
||||||
|
vendorCompany: 'PT Sejahtera Abadi',
|
||||||
|
reference: '',
|
||||||
|
date: '05/09/2025',
|
||||||
|
dueDate: '19/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 2234680
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
number: 'PO/00050',
|
||||||
|
vendorName: 'Joko Santoso Nainggolan',
|
||||||
|
vendorCompany: 'CV Berkah Jaya',
|
||||||
|
reference: 'REF-2025-007',
|
||||||
|
date: '03/09/2025',
|
||||||
|
dueDate: '17/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 1789560
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
number: 'PO/00051',
|
||||||
|
vendorName: 'Linda Safitri Simanjuntak',
|
||||||
|
vendorCompany: 'PT Harapan Bangsa',
|
||||||
|
reference: 'REF-2025-008',
|
||||||
|
date: '07/09/2025',
|
||||||
|
dueDate: '21/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 4321870
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
number: 'PO/00052',
|
||||||
|
vendorName: 'Irfan Maulana Pasaribu',
|
||||||
|
vendorCompany: 'CV Sumber Rejeki',
|
||||||
|
reference: 'REF-2025-009',
|
||||||
|
date: '10/09/2025',
|
||||||
|
dueDate: '24/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 2567890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
number: 'PO/00053',
|
||||||
|
vendorName: 'Siska Permata Sinaga',
|
||||||
|
vendorCompany: 'PT Mitra Sukses',
|
||||||
|
reference: '',
|
||||||
|
date: '11/09/2025',
|
||||||
|
dueDate: '25/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 3456780
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
number: 'PO/00054',
|
||||||
|
vendorName: 'Rizky Aditya Siregar',
|
||||||
|
vendorCompany: 'Toko Aman Sentosa',
|
||||||
|
reference: 'REF-2025-010',
|
||||||
|
date: '08/09/2025',
|
||||||
|
dueDate: '22/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 1234567
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
number: 'PO/00055',
|
||||||
|
vendorName: 'Nina Sari Hutabarat',
|
||||||
|
vendorCompany: 'PT Cahaya Terang',
|
||||||
|
reference: 'REF-2025-011',
|
||||||
|
date: '12/09/2025',
|
||||||
|
dueDate: '26/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 5678900
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
number: 'PO/00056',
|
||||||
|
vendorName: 'Doni Prasetya Situmorang',
|
||||||
|
vendorCompany: 'CV Barokah Makmur',
|
||||||
|
reference: '',
|
||||||
|
date: '09/09/2025',
|
||||||
|
dueDate: '23/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 987654
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
number: 'PO/00057',
|
||||||
|
vendorName: 'Anita Dewi Marpaung',
|
||||||
|
vendorCompany: 'Yayasan Karya Bhakti',
|
||||||
|
reference: 'REF-2025-012',
|
||||||
|
date: '06/09/2025',
|
||||||
|
dueDate: '20/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 4567123
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
number: 'PO/00058',
|
||||||
|
vendorName: 'Tommy Wijaya Samosir',
|
||||||
|
vendorCompany: 'PT Bintang Timur',
|
||||||
|
reference: 'REF-2025-013',
|
||||||
|
date: '13/09/2025',
|
||||||
|
dueDate: '27/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 2345678
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
number: 'PO/00059',
|
||||||
|
vendorName: 'Lestari Indah Pakpahan',
|
||||||
|
vendorCompany: 'CV Harmoni Jaya',
|
||||||
|
reference: '',
|
||||||
|
date: '05/09/2025',
|
||||||
|
dueDate: '19/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 3789012
|
||||||
|
}
|
||||||
|
]
|
||||||
224
src/data/dummy/purchase-quote.ts
Normal file
224
src/data/dummy/purchase-quote.ts
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
import { PurchaseQuoteType } from '@/types/apps/purchaseQuoteTypes'
|
||||||
|
|
||||||
|
export const purchaseQuoteData: PurchaseQuoteType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
number: 'PQ-001',
|
||||||
|
vendorName: 'Andi Wijaya',
|
||||||
|
vendorCompany: 'PT Sumber Makmur',
|
||||||
|
reference: 'REF-PQ-001',
|
||||||
|
date: '2025-09-01',
|
||||||
|
dueDate: '2025-09-10',
|
||||||
|
status: 'Open',
|
||||||
|
total: 4500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
number: 'PQ-002',
|
||||||
|
vendorName: 'Siti Rahma',
|
||||||
|
vendorCompany: 'CV Cahaya Abadi',
|
||||||
|
reference: 'REF-PQ-002',
|
||||||
|
date: '2025-09-02',
|
||||||
|
dueDate: '2025-09-12',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 7200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
number: 'PQ-003',
|
||||||
|
vendorName: 'Budi Santoso',
|
||||||
|
vendorCompany: 'UD Sejahtera',
|
||||||
|
reference: 'REF-PQ-003',
|
||||||
|
date: '2025-09-03',
|
||||||
|
dueDate: '2025-09-13',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 3100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
number: 'PQ-004',
|
||||||
|
vendorName: 'Rina Kartika',
|
||||||
|
vendorCompany: 'PT Mitra Jaya',
|
||||||
|
reference: 'REF-PQ-004',
|
||||||
|
date: '2025-09-04',
|
||||||
|
dueDate: '2025-09-15',
|
||||||
|
status: 'Open',
|
||||||
|
total: 5800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
number: 'PQ-005',
|
||||||
|
vendorName: 'Agus Salim',
|
||||||
|
vendorCompany: 'CV Bumi Persada',
|
||||||
|
reference: 'REF-PQ-005',
|
||||||
|
date: '2025-09-05',
|
||||||
|
dueDate: '2025-09-16',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 8000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
number: 'PQ-006',
|
||||||
|
vendorName: 'Maya Lestari',
|
||||||
|
vendorCompany: 'PT Tunas Baru',
|
||||||
|
reference: 'REF-PQ-006',
|
||||||
|
date: '2025-09-06',
|
||||||
|
dueDate: '2025-09-17',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 2600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
number: 'PQ-007',
|
||||||
|
vendorName: 'Hendra Gunawan',
|
||||||
|
vendorCompany: 'UD Prima Sentosa',
|
||||||
|
reference: 'REF-PQ-007',
|
||||||
|
date: '2025-09-07',
|
||||||
|
dueDate: '2025-09-18',
|
||||||
|
status: 'Open',
|
||||||
|
total: 9300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
number: 'PQ-008',
|
||||||
|
vendorName: 'Dewi Anggraini',
|
||||||
|
vendorCompany: 'CV Inti Mandiri',
|
||||||
|
reference: 'REF-PQ-008',
|
||||||
|
date: '2025-09-08',
|
||||||
|
dueDate: '2025-09-19',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 4100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
number: 'PQ-009',
|
||||||
|
vendorName: 'Yusuf Arifin',
|
||||||
|
vendorCompany: 'PT Surya Kencana',
|
||||||
|
reference: 'REF-PQ-009',
|
||||||
|
date: '2025-09-09',
|
||||||
|
dueDate: '2025-09-20',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 6900000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
number: 'PQ-010',
|
||||||
|
vendorName: 'Nurhayati',
|
||||||
|
vendorCompany: 'UD Cahaya Mulia',
|
||||||
|
reference: 'REF-PQ-010',
|
||||||
|
date: '2025-09-10',
|
||||||
|
dueDate: '2025-09-21',
|
||||||
|
status: 'Open',
|
||||||
|
total: 5500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
number: 'PQ-011',
|
||||||
|
vendorName: 'Fajar Hidayat',
|
||||||
|
vendorCompany: 'PT Bina Karya',
|
||||||
|
reference: 'REF-PQ-011',
|
||||||
|
date: '2025-09-11',
|
||||||
|
dueDate: '2025-09-22',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 12000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
number: 'PQ-012',
|
||||||
|
vendorName: 'Ratna Sari',
|
||||||
|
vendorCompany: 'CV Mega Utama',
|
||||||
|
reference: 'REF-PQ-012',
|
||||||
|
date: '2025-09-12',
|
||||||
|
dueDate: '2025-09-23',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 3300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
number: 'PQ-013',
|
||||||
|
vendorName: 'Tono Prasetyo',
|
||||||
|
vendorCompany: 'UD Karya Indah',
|
||||||
|
reference: 'REF-PQ-013',
|
||||||
|
date: '2025-09-13',
|
||||||
|
dueDate: '2025-09-24',
|
||||||
|
status: 'Open',
|
||||||
|
total: 7500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
number: 'PQ-014',
|
||||||
|
vendorName: 'Lina Marlina',
|
||||||
|
vendorCompany: 'PT Harmoni Sejati',
|
||||||
|
reference: 'REF-PQ-014',
|
||||||
|
date: '2025-09-14',
|
||||||
|
dueDate: '2025-09-25',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 8600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
number: 'PQ-015',
|
||||||
|
vendorName: 'Arman Saputra',
|
||||||
|
vendorCompany: 'CV Sentra Niaga',
|
||||||
|
reference: 'REF-PQ-015',
|
||||||
|
date: '2025-09-15',
|
||||||
|
dueDate: '2025-09-26',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 2950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
number: 'PQ-016',
|
||||||
|
vendorName: 'Indah Permata',
|
||||||
|
vendorCompany: 'PT Citra Abadi',
|
||||||
|
reference: 'REF-PQ-016',
|
||||||
|
date: '2025-09-16',
|
||||||
|
dueDate: '2025-09-27',
|
||||||
|
status: 'Open',
|
||||||
|
total: 6800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
number: 'PQ-017',
|
||||||
|
vendorName: 'Adi Putra',
|
||||||
|
vendorCompany: 'UD Makmur Bersama',
|
||||||
|
reference: 'REF-PQ-017',
|
||||||
|
date: '2025-09-17',
|
||||||
|
dueDate: '2025-09-28',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 4700000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
number: 'PQ-018',
|
||||||
|
vendorName: 'Sri Wahyuni',
|
||||||
|
vendorCompany: 'CV Bintang Terang',
|
||||||
|
reference: 'REF-PQ-018',
|
||||||
|
date: '2025-09-18',
|
||||||
|
dueDate: '2025-09-29',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 5300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
number: 'PQ-019',
|
||||||
|
vendorName: 'Eko Prabowo',
|
||||||
|
vendorCompany: 'PT Mandiri Jaya',
|
||||||
|
reference: 'REF-PQ-019',
|
||||||
|
date: '2025-09-19',
|
||||||
|
dueDate: '2025-09-30',
|
||||||
|
status: 'Open',
|
||||||
|
total: 9500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
number: 'PQ-020',
|
||||||
|
vendorName: 'Novi Astuti',
|
||||||
|
vendorCompany: 'UD Sinar Harapan',
|
||||||
|
reference: 'REF-PQ-020',
|
||||||
|
date: '2025-09-20',
|
||||||
|
dueDate: '2025-10-01',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 4200000
|
||||||
|
}
|
||||||
|
]
|
||||||
873
src/data/dummy/sales.ts
Normal file
873
src/data/dummy/sales.ts
Normal file
@ -0,0 +1,873 @@
|
|||||||
|
import { SalesBillType, SalesDeliveryType, SalesOrderType, SalesQuoteType } from '@/types/apps/salesTypes'
|
||||||
|
|
||||||
|
export const salesBillData: SalesBillType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
number: 'INV/001',
|
||||||
|
customerName: 'Andi Wijaya',
|
||||||
|
customerCompany: 'PT Nusantara Abadi',
|
||||||
|
reference: 'REF-SB-001',
|
||||||
|
date: '2025-09-01',
|
||||||
|
dueDate: '2025-09-15',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 5000000,
|
||||||
|
total: 5000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
number: 'INV/002',
|
||||||
|
customerName: 'Siti Rahma',
|
||||||
|
customerCompany: 'CV Cahaya Abadi',
|
||||||
|
reference: 'REF-SB-002',
|
||||||
|
date: '2025-09-02',
|
||||||
|
dueDate: '2025-09-16',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 2000000,
|
||||||
|
total: 8000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
number: 'INV/003',
|
||||||
|
customerName: 'Budi Santoso',
|
||||||
|
customerCompany: 'UD Sejahtera',
|
||||||
|
reference: 'REF-SB-003',
|
||||||
|
date: '2025-09-03',
|
||||||
|
dueDate: '2025-09-17',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 3500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
number: 'INV/004',
|
||||||
|
customerName: 'Rina Kartika',
|
||||||
|
customerCompany: 'PT Mitra Jaya',
|
||||||
|
reference: 'REF-SB-004',
|
||||||
|
date: '2025-09-04',
|
||||||
|
dueDate: '2025-09-18',
|
||||||
|
status: 'Void',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 4200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
number: 'INV/005',
|
||||||
|
customerName: 'Agus Salim',
|
||||||
|
customerCompany: 'CV Bumi Persada',
|
||||||
|
reference: 'REF-SB-005',
|
||||||
|
date: '2025-09-05',
|
||||||
|
dueDate: '2025-09-19',
|
||||||
|
status: 'Retur',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 6100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
number: 'INV/006',
|
||||||
|
customerName: 'Maya Lestari',
|
||||||
|
customerCompany: 'PT Tunas Baru',
|
||||||
|
reference: 'REF-SB-006',
|
||||||
|
date: '2025-09-06',
|
||||||
|
dueDate: '2025-09-20',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 9000000,
|
||||||
|
total: 9000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
number: 'INV/007',
|
||||||
|
customerName: 'Hendra Gunawan',
|
||||||
|
customerCompany: 'UD Prima Sentosa',
|
||||||
|
reference: 'REF-SB-007',
|
||||||
|
date: '2025-09-07',
|
||||||
|
dueDate: '2025-09-21',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 1500000,
|
||||||
|
total: 7500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
number: 'INV/008',
|
||||||
|
customerName: 'Dewi Anggraini',
|
||||||
|
customerCompany: 'CV Inti Mandiri',
|
||||||
|
reference: 'REF-SB-008',
|
||||||
|
date: '2025-09-08',
|
||||||
|
dueDate: '2025-09-22',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 4500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
number: 'INV/009',
|
||||||
|
customerName: 'Yusuf Arifin',
|
||||||
|
customerCompany: 'PT Surya Kencana',
|
||||||
|
reference: 'REF-SB-009',
|
||||||
|
date: '2025-09-09',
|
||||||
|
dueDate: '2025-09-23',
|
||||||
|
status: 'Void',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 5000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
number: 'INV/010',
|
||||||
|
customerName: 'Nurhayati',
|
||||||
|
customerCompany: 'UD Cahaya Mulia',
|
||||||
|
reference: 'REF-SB-010',
|
||||||
|
date: '2025-09-10',
|
||||||
|
dueDate: '2025-09-24',
|
||||||
|
status: 'Retur',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 3000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
number: 'INV/011',
|
||||||
|
customerName: 'Fajar Hidayat',
|
||||||
|
customerCompany: 'PT Bina Karya',
|
||||||
|
reference: 'REF-SB-011',
|
||||||
|
date: '2025-09-11',
|
||||||
|
dueDate: '2025-09-25',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 6000000,
|
||||||
|
total: 6000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
number: 'INV/012',
|
||||||
|
customerName: 'Ratna Sari',
|
||||||
|
customerCompany: 'CV Mega Utama',
|
||||||
|
reference: 'REF-SB-012',
|
||||||
|
date: '2025-09-12',
|
||||||
|
dueDate: '2025-09-26',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 2500000,
|
||||||
|
total: 10000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
number: 'INV/013',
|
||||||
|
customerName: 'Tono Prasetyo',
|
||||||
|
customerCompany: 'UD Karya Indah',
|
||||||
|
reference: 'REF-SB-013',
|
||||||
|
date: '2025-09-13',
|
||||||
|
dueDate: '2025-09-27',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 7000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
number: 'INV/014',
|
||||||
|
customerName: 'Lina Marlina',
|
||||||
|
customerCompany: 'PT Harmoni Sejati',
|
||||||
|
reference: 'REF-SB-014',
|
||||||
|
date: '2025-09-14',
|
||||||
|
dueDate: '2025-09-28',
|
||||||
|
status: 'Void',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 3200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
number: 'INV/015',
|
||||||
|
customerName: 'Arman Saputra',
|
||||||
|
customerCompany: 'CV Sentra Niaga',
|
||||||
|
reference: 'REF-SB-015',
|
||||||
|
date: '2025-09-15',
|
||||||
|
dueDate: '2025-09-29',
|
||||||
|
status: 'Retur',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 5400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
number: 'INV/016',
|
||||||
|
customerName: 'Indah Permata',
|
||||||
|
customerCompany: 'PT Citra Abadi',
|
||||||
|
reference: 'REF-SB-016',
|
||||||
|
date: '2025-09-16',
|
||||||
|
dueDate: '2025-09-30',
|
||||||
|
status: 'Belum Dibayar',
|
||||||
|
remainingBill: 8000000,
|
||||||
|
total: 8000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
number: 'INV/017',
|
||||||
|
customerName: 'Adi Putra',
|
||||||
|
customerCompany: 'UD Makmur Bersama',
|
||||||
|
reference: 'REF-SB-017',
|
||||||
|
date: '2025-09-17',
|
||||||
|
dueDate: '2025-10-01',
|
||||||
|
status: 'Dibayar Sebagian',
|
||||||
|
remainingBill: 1200000,
|
||||||
|
total: 6200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
number: 'INV/018',
|
||||||
|
customerName: 'Sri Wahyuni',
|
||||||
|
customerCompany: 'CV Bintang Terang',
|
||||||
|
reference: 'REF-SB-018',
|
||||||
|
date: '2025-09-18',
|
||||||
|
dueDate: '2025-10-02',
|
||||||
|
status: 'Lunas',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 9200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
number: 'INV/019',
|
||||||
|
customerName: 'Eko Prabowo',
|
||||||
|
customerCompany: 'PT Mandiri Jaya',
|
||||||
|
reference: 'REF-SB-019',
|
||||||
|
date: '2025-09-19',
|
||||||
|
dueDate: '2025-10-03',
|
||||||
|
status: 'Void',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 2500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
number: 'INV/020',
|
||||||
|
customerName: 'Novi Astuti',
|
||||||
|
customerCompany: 'UD Sinar Harapan',
|
||||||
|
reference: 'REF-SB-020',
|
||||||
|
date: '2025-09-20',
|
||||||
|
dueDate: '2025-10-04',
|
||||||
|
status: 'Retur',
|
||||||
|
remainingBill: 0,
|
||||||
|
total: 4800000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const salesDeliveryData: SalesDeliveryType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
number: 'INV-001',
|
||||||
|
vendorName: 'Andi Wijaya',
|
||||||
|
vendorCompany: 'PT Sumber Makmur',
|
||||||
|
reference: 'REF-INV-001',
|
||||||
|
date: '2025-09-01',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
number: 'INV-002',
|
||||||
|
vendorName: 'Siti Rahma',
|
||||||
|
vendorCompany: 'CV Cahaya Abadi',
|
||||||
|
reference: 'REF-INV-002',
|
||||||
|
date: '2025-09-02',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
number: 'INV-003',
|
||||||
|
vendorName: 'Budi Santoso',
|
||||||
|
vendorCompany: 'UD Sejahtera',
|
||||||
|
reference: 'REF-INV-003',
|
||||||
|
date: '2025-09-03',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
number: 'INV-004',
|
||||||
|
vendorName: 'Rina Kartika',
|
||||||
|
vendorCompany: 'PT Mitra Jaya',
|
||||||
|
reference: 'REF-INV-004',
|
||||||
|
date: '2025-09-04',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
number: 'INV-005',
|
||||||
|
vendorName: 'Agus Salim',
|
||||||
|
vendorCompany: 'CV Bumi Persada',
|
||||||
|
reference: 'REF-INV-005',
|
||||||
|
date: '2025-09-05',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
number: 'INV-006',
|
||||||
|
vendorName: 'Maya Lestari',
|
||||||
|
vendorCompany: 'PT Tunas Baru',
|
||||||
|
reference: 'REF-INV-006',
|
||||||
|
date: '2025-09-06',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
number: 'INV-007',
|
||||||
|
vendorName: 'Hendra Gunawan',
|
||||||
|
vendorCompany: 'UD Prima Sentosa',
|
||||||
|
reference: 'REF-INV-007',
|
||||||
|
date: '2025-09-07',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
number: 'INV-008',
|
||||||
|
vendorName: 'Dewi Anggraini',
|
||||||
|
vendorCompany: 'CV Inti Mandiri',
|
||||||
|
reference: 'REF-INV-008',
|
||||||
|
date: '2025-09-08',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
number: 'INV-009',
|
||||||
|
vendorName: 'Yusuf Arifin',
|
||||||
|
vendorCompany: 'PT Surya Kencana',
|
||||||
|
reference: 'REF-INV-009',
|
||||||
|
date: '2025-09-09',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
number: 'INV-010',
|
||||||
|
vendorName: 'Nurhayati',
|
||||||
|
vendorCompany: 'UD Cahaya Mulia',
|
||||||
|
reference: 'REF-INV-010',
|
||||||
|
date: '2025-09-10',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
number: 'INV-011',
|
||||||
|
vendorName: 'Fajar Hidayat',
|
||||||
|
vendorCompany: 'PT Bina Karya',
|
||||||
|
reference: 'REF-INV-011',
|
||||||
|
date: '2025-09-11',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
number: 'INV-012',
|
||||||
|
vendorName: 'Ratna Sari',
|
||||||
|
vendorCompany: 'CV Mega Utama',
|
||||||
|
reference: 'REF-INV-012',
|
||||||
|
date: '2025-09-12',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
number: 'INV-013',
|
||||||
|
vendorName: 'Tono Prasetyo',
|
||||||
|
vendorCompany: 'UD Karya Indah',
|
||||||
|
reference: 'REF-INV-013',
|
||||||
|
date: '2025-09-13',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
number: 'INV-014',
|
||||||
|
vendorName: 'Lina Marlina',
|
||||||
|
vendorCompany: 'PT Harmoni Sejati',
|
||||||
|
reference: 'REF-INV-014',
|
||||||
|
date: '2025-09-14',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
number: 'INV-015',
|
||||||
|
vendorName: 'Arman Saputra',
|
||||||
|
vendorCompany: 'CV Sentra Niaga',
|
||||||
|
reference: 'REF-INV-015',
|
||||||
|
date: '2025-09-15',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
number: 'INV-016',
|
||||||
|
vendorName: 'Indah Permata',
|
||||||
|
vendorCompany: 'PT Citra Abadi',
|
||||||
|
reference: 'REF-INV-016',
|
||||||
|
date: '2025-09-16',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
number: 'INV-017',
|
||||||
|
vendorName: 'Adi Putra',
|
||||||
|
vendorCompany: 'UD Makmur Bersama',
|
||||||
|
reference: 'REF-INV-017',
|
||||||
|
date: '2025-09-17',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
number: 'INV-018',
|
||||||
|
vendorName: 'Sri Wahyuni',
|
||||||
|
vendorCompany: 'CV Bintang Terang',
|
||||||
|
reference: 'REF-INV-018',
|
||||||
|
date: '2025-09-18',
|
||||||
|
status: 'Selesai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
number: 'INV-019',
|
||||||
|
vendorName: 'Eko Prabowo',
|
||||||
|
vendorCompany: 'PT Mandiri Jaya',
|
||||||
|
reference: 'REF-INV-019',
|
||||||
|
date: '2025-09-19',
|
||||||
|
status: 'Open'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
number: 'INV-020',
|
||||||
|
vendorName: 'Novi Astuti',
|
||||||
|
vendorCompany: 'UD Sinar Harapan',
|
||||||
|
reference: 'REF-INV-020',
|
||||||
|
date: '2025-09-20',
|
||||||
|
status: 'Selesai'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const salesOrdersData: SalesOrderType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
number: 'PO/00040',
|
||||||
|
vendorName: 'Kairav Wijaya Nababan',
|
||||||
|
vendorCompany: 'Yayasan Haryanto Tbk',
|
||||||
|
reference: '',
|
||||||
|
date: '05/09/2025',
|
||||||
|
dueDate: '19/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 2037170
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
number: 'PO/00041',
|
||||||
|
vendorName: 'Sari Melani Hutapea',
|
||||||
|
vendorCompany: 'PT Santoso Jaya',
|
||||||
|
reference: 'REF-2025-001',
|
||||||
|
date: '03/09/2025',
|
||||||
|
dueDate: '17/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 1875500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
number: 'PO/00042',
|
||||||
|
vendorName: 'Budi Prasetyo Manullang',
|
||||||
|
vendorCompany: 'CV Wijaya Makmur',
|
||||||
|
reference: 'REF-2025-002',
|
||||||
|
date: '07/09/2025',
|
||||||
|
dueDate: '21/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 3250750
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
number: 'PO/00043',
|
||||||
|
vendorName: 'Maya Sari Lumban Gaol',
|
||||||
|
vendorCompany: 'PT Indah Permata',
|
||||||
|
reference: '',
|
||||||
|
date: '02/09/2025',
|
||||||
|
dueDate: '16/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 980250
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
number: 'PO/00044',
|
||||||
|
vendorName: 'Rahman Hakim Siahaan',
|
||||||
|
vendorCompany: 'Toko Bahagia Sejahtera',
|
||||||
|
reference: 'REF-2025-003',
|
||||||
|
date: '08/09/2025',
|
||||||
|
dueDate: '22/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 4125890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
number: 'PO/00045',
|
||||||
|
vendorName: 'Dewi Anggraini Panjaitan',
|
||||||
|
vendorCompany: 'PT Maju Bersama',
|
||||||
|
reference: 'REF-2025-004',
|
||||||
|
date: '01/09/2025',
|
||||||
|
dueDate: '15/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 2678300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
number: 'PO/00046',
|
||||||
|
vendorName: 'Agung Wijaya Simbolon',
|
||||||
|
vendorCompany: 'CV Karya Mandiri',
|
||||||
|
reference: '',
|
||||||
|
date: '06/09/2025',
|
||||||
|
dueDate: '20/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 1456780
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
number: 'PO/00047',
|
||||||
|
vendorName: 'Fitri Handayani Sitorus',
|
||||||
|
vendorCompany: 'PT Global Nusantara',
|
||||||
|
reference: 'REF-2025-005',
|
||||||
|
date: '04/09/2025',
|
||||||
|
dueDate: '18/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 5892450
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
number: 'PO/00048',
|
||||||
|
vendorName: 'Andi Setiawan Tampubolon',
|
||||||
|
vendorCompany: 'Yayasan Pembangunan Tbk',
|
||||||
|
reference: 'REF-2025-006',
|
||||||
|
date: '09/09/2025',
|
||||||
|
dueDate: '23/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 3567120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
number: 'PO/00049',
|
||||||
|
vendorName: 'Rina Maharani Hutasoit',
|
||||||
|
vendorCompany: 'PT Sejahtera Abadi',
|
||||||
|
reference: '',
|
||||||
|
date: '05/09/2025',
|
||||||
|
dueDate: '19/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 2234680
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
number: 'PO/00050',
|
||||||
|
vendorName: 'Joko Santoso Nainggolan',
|
||||||
|
vendorCompany: 'CV Berkah Jaya',
|
||||||
|
reference: 'REF-2025-007',
|
||||||
|
date: '03/09/2025',
|
||||||
|
dueDate: '17/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 1789560
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
number: 'PO/00051',
|
||||||
|
vendorName: 'Linda Safitri Simanjuntak',
|
||||||
|
vendorCompany: 'PT Harapan Bangsa',
|
||||||
|
reference: 'REF-2025-008',
|
||||||
|
date: '07/09/2025',
|
||||||
|
dueDate: '21/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 4321870
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
number: 'PO/00052',
|
||||||
|
vendorName: 'Irfan Maulana Pasaribu',
|
||||||
|
vendorCompany: 'CV Sumber Rejeki',
|
||||||
|
reference: 'REF-2025-009',
|
||||||
|
date: '10/09/2025',
|
||||||
|
dueDate: '24/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 2567890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
number: 'PO/00053',
|
||||||
|
vendorName: 'Siska Permata Sinaga',
|
||||||
|
vendorCompany: 'PT Mitra Sukses',
|
||||||
|
reference: '',
|
||||||
|
date: '11/09/2025',
|
||||||
|
dueDate: '25/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 3456780
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
number: 'PO/00054',
|
||||||
|
vendorName: 'Rizky Aditya Siregar',
|
||||||
|
vendorCompany: 'Toko Aman Sentosa',
|
||||||
|
reference: 'REF-2025-010',
|
||||||
|
date: '08/09/2025',
|
||||||
|
dueDate: '22/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 1234567
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
number: 'PO/00055',
|
||||||
|
vendorName: 'Nina Sari Hutabarat',
|
||||||
|
vendorCompany: 'PT Cahaya Terang',
|
||||||
|
reference: 'REF-2025-011',
|
||||||
|
date: '12/09/2025',
|
||||||
|
dueDate: '26/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 5678900
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
number: 'PO/00056',
|
||||||
|
vendorName: 'Doni Prasetya Situmorang',
|
||||||
|
vendorCompany: 'CV Barokah Makmur',
|
||||||
|
reference: '',
|
||||||
|
date: '09/09/2025',
|
||||||
|
dueDate: '23/09/2025',
|
||||||
|
status: 'Draft',
|
||||||
|
total: 987654
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
number: 'PO/00057',
|
||||||
|
vendorName: 'Anita Dewi Marpaung',
|
||||||
|
vendorCompany: 'Yayasan Karya Bhakti',
|
||||||
|
reference: 'REF-2025-012',
|
||||||
|
date: '06/09/2025',
|
||||||
|
dueDate: '20/09/2025',
|
||||||
|
status: 'Disetujui',
|
||||||
|
total: 4567123
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
number: 'PO/00058',
|
||||||
|
vendorName: 'Tommy Wijaya Samosir',
|
||||||
|
vendorCompany: 'PT Bintang Timur',
|
||||||
|
reference: 'REF-2025-013',
|
||||||
|
date: '13/09/2025',
|
||||||
|
dueDate: '27/09/2025',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 2345678
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
number: 'PO/00059',
|
||||||
|
vendorName: 'Lestari Indah Pakpahan',
|
||||||
|
vendorCompany: 'CV Harmoni Jaya',
|
||||||
|
reference: '',
|
||||||
|
date: '05/09/2025',
|
||||||
|
dueDate: '19/09/2025',
|
||||||
|
status: 'Dikirim Sebagian',
|
||||||
|
total: 3789012
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const salesQuoteData: SalesQuoteType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
number: 'PQ-001',
|
||||||
|
vendorName: 'Andi Wijaya',
|
||||||
|
vendorCompany: 'PT Sumber Makmur',
|
||||||
|
reference: 'REF-PQ-001',
|
||||||
|
date: '2025-09-01',
|
||||||
|
dueDate: '2025-09-10',
|
||||||
|
status: 'Open',
|
||||||
|
total: 4500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
number: 'PQ-002',
|
||||||
|
vendorName: 'Siti Rahma',
|
||||||
|
vendorCompany: 'CV Cahaya Abadi',
|
||||||
|
reference: 'REF-PQ-002',
|
||||||
|
date: '2025-09-02',
|
||||||
|
dueDate: '2025-09-12',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 7200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
number: 'PQ-003',
|
||||||
|
vendorName: 'Budi Santoso',
|
||||||
|
vendorCompany: 'UD Sejahtera',
|
||||||
|
reference: 'REF-PQ-003',
|
||||||
|
date: '2025-09-03',
|
||||||
|
dueDate: '2025-09-13',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 3100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
number: 'PQ-004',
|
||||||
|
vendorName: 'Rina Kartika',
|
||||||
|
vendorCompany: 'PT Mitra Jaya',
|
||||||
|
reference: 'REF-PQ-004',
|
||||||
|
date: '2025-09-04',
|
||||||
|
dueDate: '2025-09-15',
|
||||||
|
status: 'Open',
|
||||||
|
total: 5800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
number: 'PQ-005',
|
||||||
|
vendorName: 'Agus Salim',
|
||||||
|
vendorCompany: 'CV Bumi Persada',
|
||||||
|
reference: 'REF-PQ-005',
|
||||||
|
date: '2025-09-05',
|
||||||
|
dueDate: '2025-09-16',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 8000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
number: 'PQ-006',
|
||||||
|
vendorName: 'Maya Lestari',
|
||||||
|
vendorCompany: 'PT Tunas Baru',
|
||||||
|
reference: 'REF-PQ-006',
|
||||||
|
date: '2025-09-06',
|
||||||
|
dueDate: '2025-09-17',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 2600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
number: 'PQ-007',
|
||||||
|
vendorName: 'Hendra Gunawan',
|
||||||
|
vendorCompany: 'UD Prima Sentosa',
|
||||||
|
reference: 'REF-PQ-007',
|
||||||
|
date: '2025-09-07',
|
||||||
|
dueDate: '2025-09-18',
|
||||||
|
status: 'Open',
|
||||||
|
total: 9300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
number: 'PQ-008',
|
||||||
|
vendorName: 'Dewi Anggraini',
|
||||||
|
vendorCompany: 'CV Inti Mandiri',
|
||||||
|
reference: 'REF-PQ-008',
|
||||||
|
date: '2025-09-08',
|
||||||
|
dueDate: '2025-09-19',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 4100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
number: 'PQ-009',
|
||||||
|
vendorName: 'Yusuf Arifin',
|
||||||
|
vendorCompany: 'PT Surya Kencana',
|
||||||
|
reference: 'REF-PQ-009',
|
||||||
|
date: '2025-09-09',
|
||||||
|
dueDate: '2025-09-20',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 6900000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
number: 'PQ-010',
|
||||||
|
vendorName: 'Nurhayati',
|
||||||
|
vendorCompany: 'UD Cahaya Mulia',
|
||||||
|
reference: 'REF-PQ-010',
|
||||||
|
date: '2025-09-10',
|
||||||
|
dueDate: '2025-09-21',
|
||||||
|
status: 'Open',
|
||||||
|
total: 5500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
number: 'PQ-011',
|
||||||
|
vendorName: 'Fajar Hidayat',
|
||||||
|
vendorCompany: 'PT Bina Karya',
|
||||||
|
reference: 'REF-PQ-011',
|
||||||
|
date: '2025-09-11',
|
||||||
|
dueDate: '2025-09-22',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 12000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
number: 'PQ-012',
|
||||||
|
vendorName: 'Ratna Sari',
|
||||||
|
vendorCompany: 'CV Mega Utama',
|
||||||
|
reference: 'REF-PQ-012',
|
||||||
|
date: '2025-09-12',
|
||||||
|
dueDate: '2025-09-23',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 3300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
number: 'PQ-013',
|
||||||
|
vendorName: 'Tono Prasetyo',
|
||||||
|
vendorCompany: 'UD Karya Indah',
|
||||||
|
reference: 'REF-PQ-013',
|
||||||
|
date: '2025-09-13',
|
||||||
|
dueDate: '2025-09-24',
|
||||||
|
status: 'Open',
|
||||||
|
total: 7500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
number: 'PQ-014',
|
||||||
|
vendorName: 'Lina Marlina',
|
||||||
|
vendorCompany: 'PT Harmoni Sejati',
|
||||||
|
reference: 'REF-PQ-014',
|
||||||
|
date: '2025-09-14',
|
||||||
|
dueDate: '2025-09-25',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 8600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
number: 'PQ-015',
|
||||||
|
vendorName: 'Arman Saputra',
|
||||||
|
vendorCompany: 'CV Sentra Niaga',
|
||||||
|
reference: 'REF-PQ-015',
|
||||||
|
date: '2025-09-15',
|
||||||
|
dueDate: '2025-09-26',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 2950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
number: 'PQ-016',
|
||||||
|
vendorName: 'Indah Permata',
|
||||||
|
vendorCompany: 'PT Citra Abadi',
|
||||||
|
reference: 'REF-PQ-016',
|
||||||
|
date: '2025-09-16',
|
||||||
|
dueDate: '2025-09-27',
|
||||||
|
status: 'Open',
|
||||||
|
total: 6800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
number: 'PQ-017',
|
||||||
|
vendorName: 'Adi Putra',
|
||||||
|
vendorCompany: 'UD Makmur Bersama',
|
||||||
|
reference: 'REF-PQ-017',
|
||||||
|
date: '2025-09-17',
|
||||||
|
dueDate: '2025-09-28',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 4700000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
number: 'PQ-018',
|
||||||
|
vendorName: 'Sri Wahyuni',
|
||||||
|
vendorCompany: 'CV Bintang Terang',
|
||||||
|
reference: 'REF-PQ-018',
|
||||||
|
date: '2025-09-18',
|
||||||
|
dueDate: '2025-09-29',
|
||||||
|
status: 'Dipesan Sebagai',
|
||||||
|
total: 5300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
number: 'PQ-019',
|
||||||
|
vendorName: 'Eko Prabowo',
|
||||||
|
vendorCompany: 'PT Mandiri Jaya',
|
||||||
|
reference: 'REF-PQ-019',
|
||||||
|
date: '2025-09-19',
|
||||||
|
dueDate: '2025-09-30',
|
||||||
|
status: 'Open',
|
||||||
|
total: 9500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
number: 'PQ-020',
|
||||||
|
vendorName: 'Novi Astuti',
|
||||||
|
vendorCompany: 'UD Sinar Harapan',
|
||||||
|
reference: 'REF-PQ-020',
|
||||||
|
date: '2025-09-20',
|
||||||
|
dueDate: '2025-10-01',
|
||||||
|
status: 'Selesai',
|
||||||
|
total: 4200000
|
||||||
|
}
|
||||||
|
]
|
||||||
484
src/data/dummy/vendor.ts
Normal file
484
src/data/dummy/vendor.ts
Normal file
@ -0,0 +1,484 @@
|
|||||||
|
import { VendorDebsPayedType, VendorTransactionType, VendorType } from '@/types/apps/vendorTypes'
|
||||||
|
|
||||||
|
export const vendorDummyData: VendorType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
photo: '',
|
||||||
|
name: 'Budi Santoso',
|
||||||
|
company: 'PT Maju Bersama Sejahtera',
|
||||||
|
email: 'budi.santoso@majubersama.co.id',
|
||||||
|
telephone: '+62 21 5551234',
|
||||||
|
youPayable: 25500000,
|
||||||
|
theyPayable: 12300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
photo: '',
|
||||||
|
name: 'Siti Nurhaliza',
|
||||||
|
company: 'CV Berkah Mandiri',
|
||||||
|
email: 'siti.nurhaliza@berkahmandiri.com',
|
||||||
|
telephone: '+62 22 8887654',
|
||||||
|
youPayable: 18750000,
|
||||||
|
theyPayable: 8950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
photo: '',
|
||||||
|
name: 'Ahmad Wijaya',
|
||||||
|
company: 'PT Teknologi Nusantara',
|
||||||
|
email: 'ahmad.wijaya@teknusantara.co.id',
|
||||||
|
telephone: '+62 24 3332211',
|
||||||
|
youPayable: 42100000,
|
||||||
|
theyPayable: 15600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
photo: '',
|
||||||
|
name: 'Dewi Sartika',
|
||||||
|
company: 'UD Sumber Rejeki',
|
||||||
|
email: 'dewi.sartika@sumberrejeki.net',
|
||||||
|
telephone: '+62 31 4445566',
|
||||||
|
youPayable: 9800000,
|
||||||
|
theyPayable: 22100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
photo: '',
|
||||||
|
name: 'Rudi Hermawan',
|
||||||
|
company: 'PT Indah Karya Persada',
|
||||||
|
email: 'rudi.hermawan@indahkarya.co.id',
|
||||||
|
telephone: '+62 274 7778899',
|
||||||
|
youPayable: 33250000,
|
||||||
|
theyPayable: 5400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
photo: '',
|
||||||
|
name: 'Maya Sari',
|
||||||
|
company: 'CV Harapan Jaya',
|
||||||
|
email: 'maya.sari@harapanjaya.com',
|
||||||
|
telephone: '+62 261 1112233',
|
||||||
|
youPayable: 16900000,
|
||||||
|
theyPayable: 28750000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
photo: '',
|
||||||
|
name: 'Andi Prasetyo',
|
||||||
|
company: 'PT Cipta Mandiri Utama',
|
||||||
|
email: 'andi.prasetyo@ciptamandiri.co.id',
|
||||||
|
telephone: '+62 411 5556677',
|
||||||
|
youPayable: 21400000,
|
||||||
|
theyPayable: 11850000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
photo: '',
|
||||||
|
name: 'Fitri Ramadhani',
|
||||||
|
company: 'UD Barokah Sukses',
|
||||||
|
email: 'fitri.ramadhani@barokahsukses.net',
|
||||||
|
telephone: '+62 751 9998877',
|
||||||
|
youPayable: 12650000,
|
||||||
|
theyPayable: 19300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
photo: '',
|
||||||
|
name: 'Agus Setiawan',
|
||||||
|
company: 'PT Nusantara Prima',
|
||||||
|
email: 'agus.setiawan@nusantaraprima.co.id',
|
||||||
|
telephone: '+62 541 3334455',
|
||||||
|
youPayable: 38800000,
|
||||||
|
theyPayable: 7200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
photo: '',
|
||||||
|
name: 'Rina Sulastri',
|
||||||
|
company: 'CV Mitra Sejati',
|
||||||
|
email: 'rina.sulastri@mitrasejati.com',
|
||||||
|
telephone: '+62 778 6667788',
|
||||||
|
youPayable: 14300000,
|
||||||
|
theyPayable: 24950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
photo: '',
|
||||||
|
name: 'Bambang Kurniawan',
|
||||||
|
company: 'PT Harmoni Bersama',
|
||||||
|
email: 'bambang.kurniawan@harmonibersama.co.id',
|
||||||
|
telephone: '+62 21 7779900',
|
||||||
|
youPayable: 29150000,
|
||||||
|
theyPayable: 13750000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
photo: '',
|
||||||
|
name: 'Indah Permatasari',
|
||||||
|
company: 'UD Cahaya Abadi',
|
||||||
|
email: 'indah.permatasari@cahayaabadi.net',
|
||||||
|
telephone: '+62 361 2223344',
|
||||||
|
youPayable: 8900000,
|
||||||
|
theyPayable: 31200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
photo: '',
|
||||||
|
name: 'Dodi Supriadi',
|
||||||
|
company: 'PT Karya Gemilang',
|
||||||
|
email: 'dodi.supriadi@karyagemilang.co.id',
|
||||||
|
telephone: '+62 721 8889911',
|
||||||
|
youPayable: 36700000,
|
||||||
|
theyPayable: 9100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
photo: '',
|
||||||
|
name: 'Lestari Wulandari',
|
||||||
|
company: 'CV Anugrah Sentosa',
|
||||||
|
email: 'lestari.wulandari@anugrahsentosa.com',
|
||||||
|
telephone: '+62 741 4445566',
|
||||||
|
youPayable: 19850000,
|
||||||
|
theyPayable: 16400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
photo: '',
|
||||||
|
name: 'Hendra Gunawan',
|
||||||
|
company: 'PT Surya Mandala',
|
||||||
|
email: 'hendra.gunawan@suryamandala.co.id',
|
||||||
|
telephone: '+62 511 7778800',
|
||||||
|
youPayable: 27300000,
|
||||||
|
theyPayable: 21650000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
photo: '',
|
||||||
|
name: 'Nurul Hidayah',
|
||||||
|
company: 'UD Rezeki Barokah',
|
||||||
|
email: 'nurul.hidayah@rezekibarokah.net',
|
||||||
|
telephone: '+62 431 1112200',
|
||||||
|
youPayable: 15200000,
|
||||||
|
theyPayable: 26800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
photo: '',
|
||||||
|
name: 'Teguh Prasetyo',
|
||||||
|
company: 'PT Dinamika Persada',
|
||||||
|
email: 'teguh.prasetyo@dinamikapersada.co.id',
|
||||||
|
telephone: '+62 62 5556600',
|
||||||
|
youPayable: 32900000,
|
||||||
|
theyPayable: 12150000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
photo: '',
|
||||||
|
name: 'Sri Mulyani',
|
||||||
|
company: 'CV Berkah Mulia',
|
||||||
|
email: 'sri.mulyani@berkahmulia.com',
|
||||||
|
telephone: '+62 771 3337799',
|
||||||
|
youPayable: 11700000,
|
||||||
|
theyPayable: 29400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
photo: '',
|
||||||
|
name: 'Joko Widodo',
|
||||||
|
company: 'PT Makmur Sejahtera',
|
||||||
|
email: 'joko.widodo@makmursejahtera.co.id',
|
||||||
|
telephone: '+62 341 8882211',
|
||||||
|
youPayable: 24800000,
|
||||||
|
theyPayable: 18350000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
photo: '',
|
||||||
|
name: 'Ratna Sari',
|
||||||
|
company: 'UD Sari Indah',
|
||||||
|
email: 'ratna.sari@sariindah.net',
|
||||||
|
telephone: '+62 717 9990011',
|
||||||
|
youPayable: 17950000,
|
||||||
|
theyPayable: 23600000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// Dummy data untuk VendorDebsPayedType
|
||||||
|
export const vendorDebsPayedData: VendorDebsPayedType[] = [
|
||||||
|
{
|
||||||
|
date: '2024-08-15',
|
||||||
|
transaction: 'Hutang ke PT Supplier Bahan Kimia',
|
||||||
|
reference: 'DEBT-001-2024',
|
||||||
|
total: 4500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-08-22',
|
||||||
|
transaction: 'Invoice Belum Dibayar #INV-2024-789',
|
||||||
|
reference: 'DEBT-002-2024',
|
||||||
|
total: 2750000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-08-30',
|
||||||
|
transaction: 'Tagihan CV Mitra Sejahtera',
|
||||||
|
reference: 'DEBT-003-2024',
|
||||||
|
total: 1850000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-05',
|
||||||
|
transaction: 'Hutang Pembelian Peralatan Kantor',
|
||||||
|
reference: 'DEBT-004-2024',
|
||||||
|
total: 3200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-08',
|
||||||
|
transaction: 'Tagihan Listrik & Utilities Bulan Lalu',
|
||||||
|
reference: 'DEBT-005-2024',
|
||||||
|
total: 950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-10',
|
||||||
|
transaction: 'Hutang ke PT Konstruksi Prima',
|
||||||
|
reference: 'DEBT-006-2024',
|
||||||
|
total: 12500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-12',
|
||||||
|
transaction: 'Invoice Jasa Konsultasi IT',
|
||||||
|
reference: 'DEBT-007-2024',
|
||||||
|
total: 6800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-15',
|
||||||
|
transaction: 'Tagihan Bahan Baku Produksi',
|
||||||
|
reference: 'DEBT-008-2024',
|
||||||
|
total: 8900000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-18',
|
||||||
|
transaction: 'Hutang ke Supplier Packaging',
|
||||||
|
reference: 'DEBT-009-2024',
|
||||||
|
total: 2100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-20',
|
||||||
|
transaction: 'Invoice Maintenance Equipment',
|
||||||
|
reference: 'DEBT-010-2024',
|
||||||
|
total: 4300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-22',
|
||||||
|
transaction: 'Tagihan Jasa Logistik & Pengiriman',
|
||||||
|
reference: 'DEBT-011-2024',
|
||||||
|
total: 1650000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-25',
|
||||||
|
transaction: 'Hutang Pembelian Software License',
|
||||||
|
reference: 'DEBT-012-2024',
|
||||||
|
total: 5400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-28',
|
||||||
|
transaction: 'Invoice Jasa Cleaning Service',
|
||||||
|
reference: 'DEBT-013-2024',
|
||||||
|
total: 750000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-30',
|
||||||
|
transaction: 'Tagihan Sewa Gedung Bulan September',
|
||||||
|
reference: 'DEBT-014-2024',
|
||||||
|
total: 15000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-10-01',
|
||||||
|
transaction: 'Hutang ke CV Digital Marketing',
|
||||||
|
reference: 'DEBT-015-2024',
|
||||||
|
total: 3800000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const vendorReceivablesData: VendorDebsPayedType[] = [
|
||||||
|
{
|
||||||
|
date: '2024-08-20',
|
||||||
|
transaction: 'Piutang dari PT Mitra Sejahtera Abadi',
|
||||||
|
reference: 'RCV-001-2024',
|
||||||
|
total: 5500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-08-25',
|
||||||
|
transaction: 'Invoice Jual Produk #INV-2024-456',
|
||||||
|
reference: 'RCV-002-2024',
|
||||||
|
total: 3250000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-02',
|
||||||
|
transaction: 'Tagihan ke CV Berkah Mandiri',
|
||||||
|
reference: 'RCV-003-2024',
|
||||||
|
total: 2800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-05',
|
||||||
|
transaction: 'Piutang Penjualan Barang Jadi',
|
||||||
|
reference: 'RCV-004-2024',
|
||||||
|
total: 4200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-08',
|
||||||
|
transaction: 'Invoice Jasa Konsultasi',
|
||||||
|
reference: 'RCV-005-2024',
|
||||||
|
total: 1750000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-10',
|
||||||
|
transaction: 'Tagihan ke PT Digital Solutions',
|
||||||
|
reference: 'RCV-006-2024',
|
||||||
|
total: 8900000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-12',
|
||||||
|
transaction: 'Piutang dari Toko Elektronik Prima',
|
||||||
|
reference: 'RCV-007-2024',
|
||||||
|
total: 2450000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-15',
|
||||||
|
transaction: 'Invoice Penjualan Software License',
|
||||||
|
reference: 'RCV-008-2024',
|
||||||
|
total: 12500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-18',
|
||||||
|
transaction: 'Tagihan Jasa Maintenance Equipment',
|
||||||
|
reference: 'RCV-009-2024',
|
||||||
|
total: 3600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-20',
|
||||||
|
transaction: 'Piutang dari CV Kreatif Media',
|
||||||
|
reference: 'RCV-010-2024',
|
||||||
|
total: 1950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-22',
|
||||||
|
transaction: 'Invoice Jual Material Konstruksi',
|
||||||
|
reference: 'RCV-011-2024',
|
||||||
|
total: 7200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-25',
|
||||||
|
transaction: 'Tagihan Jasa Pelatihan IT',
|
||||||
|
reference: 'RCV-012-2024',
|
||||||
|
total: 4800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-28',
|
||||||
|
transaction: 'Piutang dari PT Logistik Nusantara',
|
||||||
|
reference: 'RCV-013-2024',
|
||||||
|
total: 5300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-30',
|
||||||
|
transaction: 'Invoice Penjualan Peralatan Kantor',
|
||||||
|
reference: 'RCV-014-2024',
|
||||||
|
total: 2100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-10-02',
|
||||||
|
transaction: 'Tagihan ke Supplier Packaging',
|
||||||
|
reference: 'RCV-015-2024',
|
||||||
|
total: 3850000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const vendorTransactionData: VendorTransactionType[] = [
|
||||||
|
{
|
||||||
|
date: '2024-08-15',
|
||||||
|
transaction: 'Pembelian Bahan Baku Produksi',
|
||||||
|
none: 'PO-001-2024',
|
||||||
|
total: 4500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-08-18',
|
||||||
|
transaction: 'Pembayaran Invoice Supplier',
|
||||||
|
none: 'PAY-001-2024',
|
||||||
|
total: 2750000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-08-22',
|
||||||
|
transaction: 'Penjualan Produk ke Klien',
|
||||||
|
none: 'INV-001-2024',
|
||||||
|
total: 6200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-08-25',
|
||||||
|
transaction: 'Pembelian Peralatan Kantor',
|
||||||
|
none: 'PO-002-2024',
|
||||||
|
total: 1850000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-08-28',
|
||||||
|
transaction: 'Pembayaran Jasa Konsultasi',
|
||||||
|
none: 'PAY-002-2024',
|
||||||
|
total: 3200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-02',
|
||||||
|
transaction: 'Penjualan Software License',
|
||||||
|
none: 'INV-002-2024',
|
||||||
|
total: 8900000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-05',
|
||||||
|
transaction: 'Pembelian Material Konstruksi',
|
||||||
|
none: 'PO-003-2024',
|
||||||
|
total: 12500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-08',
|
||||||
|
transaction: 'Pembayaran Maintenance Equipment',
|
||||||
|
none: 'PAY-003-2024',
|
||||||
|
total: 2450000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-12',
|
||||||
|
transaction: 'Penjualan Jasa Pelatihan',
|
||||||
|
none: 'INV-003-2024',
|
||||||
|
total: 4800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-15',
|
||||||
|
transaction: 'Pembelian Bahan Kimia',
|
||||||
|
none: 'PO-004-2024',
|
||||||
|
total: 3600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-18',
|
||||||
|
transaction: 'Pembayaran Sewa Gedung',
|
||||||
|
none: 'PAY-004-2024',
|
||||||
|
total: 15000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-22',
|
||||||
|
transaction: 'Penjualan Peralatan Elektronik',
|
||||||
|
none: 'INV-004-2024',
|
||||||
|
total: 7200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-25',
|
||||||
|
transaction: 'Pembelian Packaging Materials',
|
||||||
|
none: 'PO-005-2024',
|
||||||
|
total: 1950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-09-28',
|
||||||
|
transaction: 'Pembayaran Jasa Logistik',
|
||||||
|
none: 'PAY-005-2024',
|
||||||
|
total: 2100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2024-10-01',
|
||||||
|
transaction: 'Penjualan Produk Digital',
|
||||||
|
none: 'INV-005-2024',
|
||||||
|
total: 5300000
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -33,6 +33,8 @@ 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'
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,4 +49,3 @@ api.interceptors.response.use(
|
|||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
7
src/types/apps/accountTypes.ts
Normal file
7
src/types/apps/accountTypes.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export type AccountType = {
|
||||||
|
id: number
|
||||||
|
code: string
|
||||||
|
name: string
|
||||||
|
category: string
|
||||||
|
balance: string
|
||||||
|
}
|
||||||
10
src/types/apps/cashBankTypes.ts
Normal file
10
src/types/apps/cashBankTypes.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export type CashBankType = {
|
||||||
|
id: number
|
||||||
|
date: string
|
||||||
|
description: string
|
||||||
|
reference: string
|
||||||
|
accept: number
|
||||||
|
send: number
|
||||||
|
balance: number
|
||||||
|
status: string
|
||||||
|
}
|
||||||
68
src/types/apps/expenseTypes.ts
Normal file
68
src/types/apps/expenseTypes.ts
Normal file
@ -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
|
||||||
|
}
|
||||||
8
src/types/apps/fixedAssetTypes.ts
Normal file
8
src/types/apps/fixedAssetTypes.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export type FixedAssetType = {
|
||||||
|
id: number
|
||||||
|
assetName: string
|
||||||
|
puchaseBill: string // Code Purchase
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
price: number
|
||||||
|
}
|
||||||
12
src/types/apps/purchaseBillType.ts
Normal file
12
src/types/apps/purchaseBillType.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
export type PurchaseBillType = {
|
||||||
|
id: number
|
||||||
|
number: string
|
||||||
|
vendorName: string
|
||||||
|
vendorCompany: string
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
dueDate: string
|
||||||
|
status: string
|
||||||
|
remainingBill: number
|
||||||
|
total: number
|
||||||
|
}
|
||||||
9
src/types/apps/purchaseDeliveryTypes.ts
Normal file
9
src/types/apps/purchaseDeliveryTypes.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export type PurchaseDeliveryType = {
|
||||||
|
id: number
|
||||||
|
number: string
|
||||||
|
vendorName: string
|
||||||
|
vendorCompany: string
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
status: string
|
||||||
|
}
|
||||||
66
src/types/apps/purchaseOrderTypes.ts
Normal file
66
src/types/apps/purchaseOrderTypes.ts
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
export type PurchaseOrderType = {
|
||||||
|
id: number
|
||||||
|
number: string
|
||||||
|
vendorName: string
|
||||||
|
vendorCompany: string
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
dueDate: string
|
||||||
|
status: string
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IngredientItem {
|
||||||
|
id: number
|
||||||
|
ingredient: { label: string; value: string } | null
|
||||||
|
deskripsi: string
|
||||||
|
kuantitas: number
|
||||||
|
satuan: { label: string; value: string } | null
|
||||||
|
discount: string
|
||||||
|
harga: number
|
||||||
|
pajak: { label: string; value: string } | null
|
||||||
|
waste: { label: string; value: string } | null
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PurchaseOrderFormData {
|
||||||
|
vendor: { label: string; value: string } | null
|
||||||
|
nomor: string
|
||||||
|
tglTransaksi: string
|
||||||
|
tglJatuhTempo: string
|
||||||
|
referensi: string
|
||||||
|
termin: { label: string; value: string } | null
|
||||||
|
hargaTermasukPajak: boolean
|
||||||
|
showShippingInfo: boolean
|
||||||
|
tanggalPengiriman: string
|
||||||
|
ekspedisi: { label: string; value: string } | null
|
||||||
|
noResi: string
|
||||||
|
showPesan: boolean
|
||||||
|
showAttachment: boolean
|
||||||
|
showTambahDiskon: boolean
|
||||||
|
showBiayaPengiriman: boolean
|
||||||
|
showBiayaTransaksi: boolean
|
||||||
|
showUangMuka: boolean
|
||||||
|
pesan: string
|
||||||
|
ingredientItems: IngredientItem[]
|
||||||
|
transactionCosts?: TransactionCost[]
|
||||||
|
subtotal?: number
|
||||||
|
discountType?: 'percentage' | 'fixed'
|
||||||
|
downPaymentType?: 'percentage' | 'fixed'
|
||||||
|
discountValue?: string
|
||||||
|
shippingCost?: string
|
||||||
|
transactionCost?: string
|
||||||
|
downPayment?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TransactionCost {
|
||||||
|
id: string
|
||||||
|
type: string
|
||||||
|
name: string
|
||||||
|
amount: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DropdownOption {
|
||||||
|
label: string
|
||||||
|
value: string
|
||||||
|
}
|
||||||
11
src/types/apps/purchaseQuoteTypes.ts
Normal file
11
src/types/apps/purchaseQuoteTypes.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
export type PurchaseQuoteType = {
|
||||||
|
id: number
|
||||||
|
number: string
|
||||||
|
vendorName: string
|
||||||
|
vendorCompany: string
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
dueDate: string
|
||||||
|
status: string
|
||||||
|
total: number
|
||||||
|
}
|
||||||
46
src/types/apps/salesTypes.ts
Normal file
46
src/types/apps/salesTypes.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
export type SalesBillType = {
|
||||||
|
id: number
|
||||||
|
number: string
|
||||||
|
customerName: string
|
||||||
|
customerCompany: string
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
dueDate: string
|
||||||
|
status: string
|
||||||
|
remainingBill: number
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SalesDeliveryType = {
|
||||||
|
id: number
|
||||||
|
number: string
|
||||||
|
vendorName: string
|
||||||
|
vendorCompany: string
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
status: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SalesOrderType = {
|
||||||
|
id: number
|
||||||
|
number: string
|
||||||
|
vendorName: string
|
||||||
|
vendorCompany: string
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
dueDate: string
|
||||||
|
status: string
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SalesQuoteType = {
|
||||||
|
id: number
|
||||||
|
number: string
|
||||||
|
vendorName: string
|
||||||
|
vendorCompany: string
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
dueDate: string
|
||||||
|
status: string
|
||||||
|
total: number
|
||||||
|
}
|
||||||
23
src/types/apps/vendorTypes.ts
Normal file
23
src/types/apps/vendorTypes.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
export type VendorType = {
|
||||||
|
id: number
|
||||||
|
photo: string
|
||||||
|
name: string
|
||||||
|
company: string
|
||||||
|
email: string
|
||||||
|
telephone: string
|
||||||
|
youPayable: number
|
||||||
|
theyPayable: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type VendorDebsPayedType = {
|
||||||
|
date: string
|
||||||
|
transaction: string
|
||||||
|
reference: string
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
export type VendorTransactionType = {
|
||||||
|
date: string
|
||||||
|
transaction: string
|
||||||
|
none: string
|
||||||
|
total: number
|
||||||
|
}
|
||||||
@ -3,8 +3,7 @@ import type { Locale } from '@configs/i18n'
|
|||||||
|
|
||||||
const dictionaries = {
|
const dictionaries = {
|
||||||
en: () => import('@/data/dictionaries/en.json').then(module => module.default),
|
en: () => import('@/data/dictionaries/en.json').then(module => module.default),
|
||||||
fr: () => import('@/data/dictionaries/fr.json').then(module => module.default),
|
id: () => import('@/data/dictionaries/id.json').then(module => module.default)
|
||||||
ar: () => import('@/data/dictionaries/ar.json').then(module => module.default)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getDictionary = async (locale: Locale) => dictionaries[locale]()
|
export const getDictionary = async (locale: Locale) => dictionaries[locale]()
|
||||||
|
|||||||
308
src/views/apps/account/AccountFormDrawer.tsx
Normal file
308
src/views/apps/account/AccountFormDrawer.tsx
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
// React Imports
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Drawer from '@mui/material/Drawer'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import Box from '@mui/material/Box'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import { useForm, Controller } from 'react-hook-form'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
|
||||||
|
|
||||||
|
// Account Type
|
||||||
|
export type AccountType = {
|
||||||
|
id: number
|
||||||
|
code: string
|
||||||
|
name: string
|
||||||
|
category: string
|
||||||
|
balance: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
open: boolean
|
||||||
|
handleClose: () => void
|
||||||
|
accountData?: AccountType[]
|
||||||
|
setData: (data: AccountType[]) => void
|
||||||
|
editingAccount?: AccountType | null
|
||||||
|
}
|
||||||
|
|
||||||
|
type FormValidateType = {
|
||||||
|
name: string
|
||||||
|
code: string
|
||||||
|
category: string
|
||||||
|
parentAccount?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Categories available for accounts
|
||||||
|
const accountCategories = [
|
||||||
|
'Kas & Bank',
|
||||||
|
'Piutang',
|
||||||
|
'Persediaan',
|
||||||
|
'Aset Tetap',
|
||||||
|
'Hutang',
|
||||||
|
'Ekuitas',
|
||||||
|
'Pendapatan',
|
||||||
|
'Beban'
|
||||||
|
]
|
||||||
|
|
||||||
|
// Parent accounts (dummy data for dropdown)
|
||||||
|
const parentAccounts = [
|
||||||
|
{ id: 1, code: '1-10001', name: 'Kas' },
|
||||||
|
{ id: 2, code: '1-10002', name: 'Bank BCA' },
|
||||||
|
{ id: 3, code: '1-10003', name: 'Bank Mandiri' },
|
||||||
|
{ id: 4, code: '1-10101', name: 'Piutang Usaha' },
|
||||||
|
{ id: 5, code: '1-10201', name: 'Persediaan Barang' },
|
||||||
|
{ id: 6, code: '2-20001', name: 'Hutang Usaha' },
|
||||||
|
{ id: 7, code: '3-30001', name: 'Modal Pemilik' },
|
||||||
|
{ id: 8, code: '4-40001', name: 'Penjualan' },
|
||||||
|
{ id: 9, code: '5-50001', name: 'Beban Gaji' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// Vars
|
||||||
|
const initialData = {
|
||||||
|
name: '',
|
||||||
|
code: '',
|
||||||
|
category: '',
|
||||||
|
parentAccount: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const AccountFormDrawer = (props: Props) => {
|
||||||
|
// Props
|
||||||
|
const { open, handleClose, accountData, setData, editingAccount } = props
|
||||||
|
|
||||||
|
// Determine if we're editing
|
||||||
|
const isEdit = !!editingAccount
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
reset: resetForm,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors }
|
||||||
|
} = useForm<FormValidateType>({
|
||||||
|
defaultValues: initialData
|
||||||
|
})
|
||||||
|
|
||||||
|
// Reset form when editingAccount changes or drawer opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
if (editingAccount) {
|
||||||
|
// Populate form with existing data
|
||||||
|
resetForm({
|
||||||
|
name: editingAccount.name,
|
||||||
|
code: editingAccount.code,
|
||||||
|
category: editingAccount.category,
|
||||||
|
parentAccount: ''
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// Reset to initial data for new account
|
||||||
|
resetForm(initialData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [editingAccount, open, resetForm])
|
||||||
|
|
||||||
|
const onSubmit = (data: FormValidateType) => {
|
||||||
|
if (isEdit && editingAccount) {
|
||||||
|
// Update existing account
|
||||||
|
const updatedAccounts =
|
||||||
|
accountData?.map(account =>
|
||||||
|
account.id === editingAccount.id
|
||||||
|
? {
|
||||||
|
...account,
|
||||||
|
code: data.code,
|
||||||
|
name: data.name,
|
||||||
|
category: data.category
|
||||||
|
}
|
||||||
|
: account
|
||||||
|
) || []
|
||||||
|
|
||||||
|
setData(updatedAccounts)
|
||||||
|
} else {
|
||||||
|
// Create new account
|
||||||
|
const newAccount: AccountType = {
|
||||||
|
id: accountData?.length ? Math.max(...accountData.map(a => a.id)) + 1 : 1,
|
||||||
|
code: data.code,
|
||||||
|
name: data.name,
|
||||||
|
category: data.category,
|
||||||
|
balance: '0'
|
||||||
|
}
|
||||||
|
|
||||||
|
setData([...(accountData ?? []), newAccount])
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClose()
|
||||||
|
resetForm(initialData)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
handleClose()
|
||||||
|
resetForm(initialData)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
anchor='right'
|
||||||
|
variant='temporary'
|
||||||
|
onClose={handleReset}
|
||||||
|
ModalProps={{ keepMounted: true }}
|
||||||
|
sx={{
|
||||||
|
'& .MuiDrawer-paper': {
|
||||||
|
width: { xs: 300, sm: 400 },
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Sticky Header */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderBottom: 1,
|
||||||
|
borderColor: 'divider'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-between plb-5 pli-6'>
|
||||||
|
<Typography variant='h5'>{isEdit ? 'Edit Akun' : 'Tambah Akun Baru'}</Typography>
|
||||||
|
<IconButton size='small' onClick={handleReset}>
|
||||||
|
<i className='tabler-x text-2xl text-textPrimary' />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Scrollable Content */}
|
||||||
|
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||||
|
<form id='account-form' onSubmit={handleSubmit(data => onSubmit(data))}>
|
||||||
|
<div className='flex flex-col gap-6 p-6'>
|
||||||
|
{/* Nama */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Nama <span className='text-red-500'>*</span>
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='name'
|
||||||
|
control={control}
|
||||||
|
rules={{ required: true }}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
placeholder='Nama'
|
||||||
|
{...(errors.name && { error: true, helperText: 'Field ini wajib diisi.' })}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kode */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Kode <span className='text-red-500'>*</span>
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='code'
|
||||||
|
control={control}
|
||||||
|
rules={{ required: true }}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
placeholder='Kode'
|
||||||
|
{...(errors.code && { error: true, helperText: 'Field ini wajib diisi.' })}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kategori */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Kategori <span className='text-red-500'>*</span>
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='category'
|
||||||
|
control={control}
|
||||||
|
rules={{ required: true }}
|
||||||
|
render={({ field: { onChange, value, ...field } }) => (
|
||||||
|
<CustomAutocomplete
|
||||||
|
{...field}
|
||||||
|
options={accountCategories}
|
||||||
|
value={value || null}
|
||||||
|
onChange={(_, newValue) => onChange(newValue || '')}
|
||||||
|
renderInput={params => (
|
||||||
|
<CustomTextField
|
||||||
|
{...params}
|
||||||
|
placeholder='Pilih kategori'
|
||||||
|
{...(errors.category && { error: true, helperText: 'Field ini wajib diisi.' })}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
isOptionEqualToValue={(option, value) => option === value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sub Akun dari */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Sub Akun dari
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='parentAccount'
|
||||||
|
control={control}
|
||||||
|
render={({ field: { onChange, value, ...field } }) => (
|
||||||
|
<CustomAutocomplete
|
||||||
|
{...field}
|
||||||
|
options={parentAccounts}
|
||||||
|
value={parentAccounts.find(account => `${account.code} ${account.name}` === value) || null}
|
||||||
|
onChange={(_, newValue) => onChange(newValue ? `${newValue.code} ${newValue.name}` : '')}
|
||||||
|
getOptionLabel={option => `${option.code} ${option.name}`}
|
||||||
|
renderInput={params => <CustomTextField {...params} placeholder='Pilih akun' />}
|
||||||
|
isOptionEqualToValue={(option, value) =>
|
||||||
|
`${option.code} ${option.name}` === `${value.code} ${value.name}`
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Sticky Footer */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
bottom: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderTop: 1,
|
||||||
|
borderColor: 'divider',
|
||||||
|
p: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center gap-4'>
|
||||||
|
<Button variant='contained' type='submit' form='account-form'>
|
||||||
|
{isEdit ? 'Update' : 'Simpan'}
|
||||||
|
</Button>
|
||||||
|
<Button variant='tonal' color='error' onClick={() => handleReset()}>
|
||||||
|
Batal
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AccountFormDrawer
|
||||||
574
src/views/apps/account/AccountListTable.tsx
Normal file
574
src/views/apps/account/AccountListTable.tsx
Normal file
@ -0,0 +1,574 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// React Imports
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||||
|
|
||||||
|
// Next Imports
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Card from '@mui/material/Card'
|
||||||
|
import CardHeader from '@mui/material/CardHeader'
|
||||||
|
import Checkbox from '@mui/material/Checkbox'
|
||||||
|
import Chip from '@mui/material/Chip'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
import type { TextFieldProps } from '@mui/material/TextField'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import type { RankingInfo } from '@tanstack/match-sorter-utils'
|
||||||
|
import { rankItem } from '@tanstack/match-sorter-utils'
|
||||||
|
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
|
||||||
|
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
||||||
|
import classnames from 'classnames'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { Locale } from '@configs/i18n'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
import OptionMenu from '@core/components/option-menu'
|
||||||
|
|
||||||
|
// Style Imports
|
||||||
|
import tableStyles from '@core/styles/table.module.css'
|
||||||
|
import { Box, CircularProgress, TablePagination } from '@mui/material'
|
||||||
|
import { useDispatch } from 'react-redux'
|
||||||
|
import TablePaginationComponent from '@/components/TablePaginationComponent'
|
||||||
|
import Loading from '@/components/layout/shared/Loading'
|
||||||
|
import { getLocalizedUrl } from '@/utils/i18n'
|
||||||
|
import AccountFormDrawer from './AccountFormDrawer'
|
||||||
|
|
||||||
|
// Account Type
|
||||||
|
export type AccountType = {
|
||||||
|
id: number
|
||||||
|
code: string
|
||||||
|
name: string
|
||||||
|
category: string
|
||||||
|
balance: string
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '@tanstack/table-core' {
|
||||||
|
interface FilterFns {
|
||||||
|
fuzzy: FilterFn<unknown>
|
||||||
|
}
|
||||||
|
interface FilterMeta {
|
||||||
|
itemRank: RankingInfo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type AccountTypeWithAction = AccountType & {
|
||||||
|
actions?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dummy Account Data
|
||||||
|
export const accountsData: AccountType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
code: '1-10001',
|
||||||
|
name: 'Kas',
|
||||||
|
category: 'Kas & Bank',
|
||||||
|
balance: '20000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
code: '1-10002',
|
||||||
|
name: 'Bank BCA',
|
||||||
|
category: 'Kas & Bank',
|
||||||
|
balance: '150000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
code: '1-10003',
|
||||||
|
name: 'Bank Mandiri',
|
||||||
|
category: 'Kas & Bank',
|
||||||
|
balance: '75000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
code: '1-10101',
|
||||||
|
name: 'Piutang Usaha',
|
||||||
|
category: 'Piutang',
|
||||||
|
balance: '50000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
code: '1-10102',
|
||||||
|
name: 'Piutang Karyawan',
|
||||||
|
category: 'Piutang',
|
||||||
|
balance: '5000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
code: '1-10201',
|
||||||
|
name: 'Persediaan Barang',
|
||||||
|
category: 'Persediaan',
|
||||||
|
balance: '100000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
code: '1-10301',
|
||||||
|
name: 'Peralatan Kantor',
|
||||||
|
category: 'Aset Tetap',
|
||||||
|
balance: '25000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
code: '1-10302',
|
||||||
|
name: 'Kendaraan',
|
||||||
|
category: 'Aset Tetap',
|
||||||
|
balance: '200000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
code: '2-20001',
|
||||||
|
name: 'Hutang Usaha',
|
||||||
|
category: 'Hutang',
|
||||||
|
balance: '-30000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
code: '2-20002',
|
||||||
|
name: 'Hutang Gaji',
|
||||||
|
category: 'Hutang',
|
||||||
|
balance: '-15000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
code: '3-30001',
|
||||||
|
name: 'Modal Pemilik',
|
||||||
|
category: 'Ekuitas',
|
||||||
|
balance: '500000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
code: '4-40001',
|
||||||
|
name: 'Penjualan',
|
||||||
|
category: 'Pendapatan',
|
||||||
|
balance: '250000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
code: '5-50001',
|
||||||
|
name: 'Beban Gaji',
|
||||||
|
category: 'Beban',
|
||||||
|
balance: '-80000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
code: '5-50002',
|
||||||
|
name: 'Beban Listrik',
|
||||||
|
category: 'Beban',
|
||||||
|
balance: '-5000000'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
code: '5-50003',
|
||||||
|
name: 'Beban Telepon',
|
||||||
|
category: 'Beban',
|
||||||
|
balance: '-2000000'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// Styled Components
|
||||||
|
const Icon = styled('i')({})
|
||||||
|
|
||||||
|
const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
||||||
|
// Rank the item
|
||||||
|
const itemRank = rankItem(row.getValue(columnId), value)
|
||||||
|
|
||||||
|
// Store the itemRank info
|
||||||
|
addMeta({
|
||||||
|
itemRank
|
||||||
|
})
|
||||||
|
|
||||||
|
// Return if the item should be filtered in/out
|
||||||
|
return itemRank.passed
|
||||||
|
}
|
||||||
|
|
||||||
|
const DebouncedInput = ({
|
||||||
|
value: initialValue,
|
||||||
|
onChange,
|
||||||
|
debounce = 500,
|
||||||
|
...props
|
||||||
|
}: {
|
||||||
|
value: string | number
|
||||||
|
onChange: (value: string | number) => void
|
||||||
|
debounce?: number
|
||||||
|
} & Omit<TextFieldProps, 'onChange'>) => {
|
||||||
|
// States
|
||||||
|
const [value, setValue] = useState(initialValue)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setValue(initialValue)
|
||||||
|
}, [initialValue])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
onChange(value)
|
||||||
|
}, debounce)
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [value])
|
||||||
|
|
||||||
|
return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category color mapping for Accounts
|
||||||
|
const getCategoryColor = (category: string) => {
|
||||||
|
switch (category) {
|
||||||
|
case 'Kas & Bank':
|
||||||
|
return 'success'
|
||||||
|
case 'Piutang':
|
||||||
|
return 'info'
|
||||||
|
case 'Persediaan':
|
||||||
|
return 'warning'
|
||||||
|
case 'Aset Tetap':
|
||||||
|
return 'primary'
|
||||||
|
case 'Hutang':
|
||||||
|
return 'error'
|
||||||
|
case 'Ekuitas':
|
||||||
|
return 'secondary'
|
||||||
|
case 'Pendapatan':
|
||||||
|
return 'success'
|
||||||
|
case 'Beban':
|
||||||
|
return 'error'
|
||||||
|
default:
|
||||||
|
return 'default'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format currency
|
||||||
|
const formatCurrency = (amount: string) => {
|
||||||
|
const numAmount = parseInt(amount)
|
||||||
|
return new Intl.NumberFormat('id-ID', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'IDR',
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
}).format(Math.abs(numAmount))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Column Definitions
|
||||||
|
const columnHelper = createColumnHelper<AccountTypeWithAction>()
|
||||||
|
|
||||||
|
const AccountListTable = () => {
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
|
||||||
|
// States
|
||||||
|
const [addAccountOpen, setAddAccountOpen] = useState(false)
|
||||||
|
const [rowSelection, setRowSelection] = useState({})
|
||||||
|
const [currentPage, setCurrentPage] = useState(0)
|
||||||
|
const [pageSize, setPageSize] = useState(10)
|
||||||
|
const [openConfirm, setOpenConfirm] = useState(false)
|
||||||
|
const [accountId, setAccountId] = useState('')
|
||||||
|
const [search, setSearch] = useState('')
|
||||||
|
const [categoryFilter, setCategoryFilter] = useState<string>('Semua')
|
||||||
|
const [filteredData, setFilteredData] = useState<AccountType[]>(accountsData)
|
||||||
|
const [data, setData] = useState<AccountType[]>(accountsData)
|
||||||
|
const [editingAccount, setEditingAccount] = useState<AccountType | null>(null)
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const { lang: locale } = useParams()
|
||||||
|
|
||||||
|
// Get unique categories for filter
|
||||||
|
const categories = useMemo(() => {
|
||||||
|
const uniqueCategories = [...new Set(data.map(account => account.category))]
|
||||||
|
return ['Semua', ...uniqueCategories]
|
||||||
|
}, [data])
|
||||||
|
|
||||||
|
// Filter data based on search and category
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = data
|
||||||
|
|
||||||
|
// Filter by search
|
||||||
|
if (search) {
|
||||||
|
filtered = filtered.filter(
|
||||||
|
account =>
|
||||||
|
account.code.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
account.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
account.category.toLowerCase().includes(search.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by category
|
||||||
|
if (categoryFilter !== 'Semua') {
|
||||||
|
filtered = filtered.filter(account => account.category === categoryFilter)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredData(filtered)
|
||||||
|
setCurrentPage(0)
|
||||||
|
}, [search, categoryFilter, data])
|
||||||
|
|
||||||
|
const totalCount = filteredData.length
|
||||||
|
const paginatedData = useMemo(() => {
|
||||||
|
const startIndex = currentPage * pageSize
|
||||||
|
return filteredData.slice(startIndex, startIndex + pageSize)
|
||||||
|
}, [filteredData, currentPage, pageSize])
|
||||||
|
|
||||||
|
const handlePageChange = useCallback((event: unknown, newPage: number) => {
|
||||||
|
setCurrentPage(newPage)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const newPageSize = parseInt(event.target.value, 10)
|
||||||
|
setPageSize(newPageSize)
|
||||||
|
setCurrentPage(0)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
setOpenConfirm(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle row click for edit
|
||||||
|
const handleRowClick = (account: AccountType, event: React.MouseEvent) => {
|
||||||
|
// Don't trigger row click if clicking on checkbox or link
|
||||||
|
const target = event.target as HTMLElement
|
||||||
|
if (target.closest('input[type="checkbox"]') || target.closest('a') || target.closest('button')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setEditingAccount(account)
|
||||||
|
setAddAccountOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle closing drawer and reset editing state
|
||||||
|
const handleCloseDrawer = () => {
|
||||||
|
setAddAccountOpen(false)
|
||||||
|
setEditingAccount(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<AccountTypeWithAction, any>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: ({ table }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: table.getIsAllRowsSelected(),
|
||||||
|
indeterminate: table.getIsSomeRowsSelected(),
|
||||||
|
onChange: table.getToggleAllRowsSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: row.getIsSelected(),
|
||||||
|
disabled: !row.getCanSelect(),
|
||||||
|
indeterminate: row.getIsSomeSelected(),
|
||||||
|
onChange: row.getToggleSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
columnHelper.accessor('code', {
|
||||||
|
header: 'Kode Akun',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Button
|
||||||
|
variant='text'
|
||||||
|
color='primary'
|
||||||
|
className='p-0 min-w-0 font-medium normal-case justify-start'
|
||||||
|
sx={{
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 500,
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.original.code}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('name', {
|
||||||
|
header: 'Nama Akun',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Typography color='text.primary' className='font-medium'>
|
||||||
|
{row.original.name}
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('category', {
|
||||||
|
header: 'Kategori',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Chip
|
||||||
|
variant='tonal'
|
||||||
|
label={row.original.category}
|
||||||
|
size='small'
|
||||||
|
color={getCategoryColor(row.original.category) as any}
|
||||||
|
className='capitalize'
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('balance', {
|
||||||
|
header: 'Saldo',
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const balance = parseInt(row.original.balance)
|
||||||
|
return (
|
||||||
|
<Typography className='font-medium text-right text-primary'>
|
||||||
|
{balance < 0 ? '-' : ''}
|
||||||
|
{formatCurrency(row.original.balance)}
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
|
[locale]
|
||||||
|
)
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: paginatedData as AccountType[],
|
||||||
|
columns,
|
||||||
|
filterFns: {
|
||||||
|
fuzzy: fuzzyFilter
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
rowSelection,
|
||||||
|
pagination: {
|
||||||
|
pageIndex: currentPage,
|
||||||
|
pageSize
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enableRowSelection: true,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
manualPagination: true,
|
||||||
|
pageCount: Math.ceil(totalCount / pageSize)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card>
|
||||||
|
<div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
|
||||||
|
<DebouncedInput
|
||||||
|
value={search}
|
||||||
|
onChange={value => setSearch(value as string)}
|
||||||
|
placeholder='Cari Akun'
|
||||||
|
className='max-sm:is-full'
|
||||||
|
/>
|
||||||
|
<div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
value={pageSize}
|
||||||
|
onChange={handlePageSizeChange}
|
||||||
|
className='max-sm:is-full sm:is-[70px]'
|
||||||
|
>
|
||||||
|
<MenuItem value={10}>10</MenuItem>
|
||||||
|
<MenuItem value={25}>25</MenuItem>
|
||||||
|
<MenuItem value={50}>50</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
className='max-sm:is-full is-auto'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
onClick={() => {
|
||||||
|
setEditingAccount(null)
|
||||||
|
setAddAccountOpen(true)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tambah Akun
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table className={tableStyles.table}>
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<th key={header.id}>
|
||||||
|
{header.isPlaceholder ? null : (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={classnames({
|
||||||
|
'flex items-center': header.column.getIsSorted(),
|
||||||
|
'cursor-pointer select-none': header.column.getCanSort()
|
||||||
|
})}
|
||||||
|
onClick={header.column.getToggleSortingHandler()}
|
||||||
|
>
|
||||||
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||||
|
{{
|
||||||
|
asc: <i className='tabler-chevron-up text-xl' />,
|
||||||
|
desc: <i className='tabler-chevron-down text-xl' />
|
||||||
|
}[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
{filteredData.length === 0 ? (
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
|
||||||
|
Tidak ada data tersedia
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
) : (
|
||||||
|
<tbody>
|
||||||
|
{table.getRowModel().rows.map(row => {
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={row.id}
|
||||||
|
className={classnames({
|
||||||
|
selected: row.getIsSelected(),
|
||||||
|
'cursor-pointer hover:bg-gray-50': true
|
||||||
|
})}
|
||||||
|
onClick={e => handleRowClick(row.original, e)}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
)}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TablePagination
|
||||||
|
component={() => (
|
||||||
|
<TablePaginationComponent
|
||||||
|
pageIndex={currentPage}
|
||||||
|
pageSize={pageSize}
|
||||||
|
totalCount={totalCount}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
count={totalCount}
|
||||||
|
rowsPerPage={pageSize}
|
||||||
|
page={currentPage}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
onRowsPerPageChange={handlePageSizeChange}
|
||||||
|
rowsPerPageOptions={[10, 25, 50]}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<AccountFormDrawer
|
||||||
|
open={addAccountOpen}
|
||||||
|
handleClose={handleCloseDrawer}
|
||||||
|
accountData={data}
|
||||||
|
setData={setData}
|
||||||
|
editingAccount={editingAccount}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AccountListTable
|
||||||
19
src/views/apps/account/index.tsx
Normal file
19
src/views/apps/account/index.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
// MUI Imports
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import AccountListTable from './AccountListTable'
|
||||||
|
|
||||||
|
const AccountList = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<AccountListTable />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AccountList
|
||||||
265
src/views/apps/cash-bank/CashBankCard.tsx
Normal file
265
src/views/apps/cash-bank/CashBankCard.tsx
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// Next Imports
|
||||||
|
import dynamic from 'next/dynamic'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Card from '@mui/material/Card'
|
||||||
|
import CardHeader from '@mui/material/CardHeader'
|
||||||
|
import CardContent from '@mui/material/CardContent'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import Box from '@mui/material/Box'
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import type { ApexOptions } from 'apexcharts'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
// Styled Component Imports
|
||||||
|
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||||
|
|
||||||
|
// Types
|
||||||
|
interface Balance {
|
||||||
|
amount: string | number
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ChartData {
|
||||||
|
name: string
|
||||||
|
data: number[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CashBankCardProps {
|
||||||
|
title: string
|
||||||
|
accountNumber: string
|
||||||
|
balances: Balance[]
|
||||||
|
chartData: ChartData[]
|
||||||
|
categories: string[]
|
||||||
|
buttonText?: string
|
||||||
|
buttonIcon?: string
|
||||||
|
href?: string
|
||||||
|
chartColor?: string
|
||||||
|
height?: number
|
||||||
|
currency?: 'IDR' | 'USD' | 'EUR'
|
||||||
|
showButton?: boolean
|
||||||
|
maxValue?: number
|
||||||
|
enableHover?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const CashBankCard = ({
|
||||||
|
title,
|
||||||
|
accountNumber,
|
||||||
|
balances,
|
||||||
|
chartData,
|
||||||
|
categories,
|
||||||
|
href,
|
||||||
|
chartColor = '#ff6b9d',
|
||||||
|
height = 300,
|
||||||
|
currency = 'IDR',
|
||||||
|
showButton = true,
|
||||||
|
maxValue,
|
||||||
|
enableHover = true
|
||||||
|
}: CashBankCardProps) => {
|
||||||
|
// Vars
|
||||||
|
const divider = 'var(--mui-palette-divider)'
|
||||||
|
const disabledText = 'var(--mui-palette-text-disabled)'
|
||||||
|
const primaryText = 'var(--mui-palette-text-primary)'
|
||||||
|
|
||||||
|
// Auto calculate maxValue if not provided
|
||||||
|
const calculatedMaxValue = maxValue || Math.max(...chartData.flatMap(series => series.data)) * 1.2
|
||||||
|
|
||||||
|
// Currency formatter
|
||||||
|
const formatCurrency = (value: number) => {
|
||||||
|
const formatters = {
|
||||||
|
IDR: new Intl.NumberFormat('id-ID', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'IDR',
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
}),
|
||||||
|
USD: new Intl.NumberFormat('en-US', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD',
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
}),
|
||||||
|
EUR: new Intl.NumberFormat('de-DE', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'EUR',
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return formatters[currency].format(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format balance display
|
||||||
|
const formatBalance = (amount: string | number) => {
|
||||||
|
if (typeof amount === 'string') return amount
|
||||||
|
return new Intl.NumberFormat('id-ID').format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Y-axis label formatter based on currency
|
||||||
|
const formatYAxisLabel = (val: number) => {
|
||||||
|
if (currency === 'IDR') {
|
||||||
|
return (val / 1000000).toFixed(0) + '.000.000'
|
||||||
|
}
|
||||||
|
return (val / 1000).toFixed(0) + 'K'
|
||||||
|
}
|
||||||
|
|
||||||
|
const options: ApexOptions = {
|
||||||
|
chart: {
|
||||||
|
height: height,
|
||||||
|
type: 'area',
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
zoom: { enabled: false },
|
||||||
|
toolbar: { show: false }
|
||||||
|
},
|
||||||
|
colors: [chartColor],
|
||||||
|
fill: {
|
||||||
|
type: 'gradient',
|
||||||
|
gradient: {
|
||||||
|
shade: 'light',
|
||||||
|
type: 'vertical',
|
||||||
|
shadeIntensity: 0.4,
|
||||||
|
gradientToColors: [chartColor],
|
||||||
|
inverseColors: false,
|
||||||
|
opacityFrom: 0.8,
|
||||||
|
opacityTo: 0.1,
|
||||||
|
stops: [0, 100]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
curve: 'smooth',
|
||||||
|
width: 3
|
||||||
|
},
|
||||||
|
dataLabels: { enabled: false },
|
||||||
|
grid: {
|
||||||
|
show: true,
|
||||||
|
borderColor: divider,
|
||||||
|
strokeDashArray: 3,
|
||||||
|
padding: {
|
||||||
|
top: -10,
|
||||||
|
bottom: -10,
|
||||||
|
left: 20,
|
||||||
|
right: 20
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: true }
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
lines: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
enabled: true,
|
||||||
|
y: {
|
||||||
|
formatter: function (val: number) {
|
||||||
|
return formatCurrency(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
min: 0,
|
||||||
|
max: calculatedMaxValue,
|
||||||
|
tickAmount: 7,
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: disabledText,
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: '400'
|
||||||
|
},
|
||||||
|
formatter: function (val: number) {
|
||||||
|
return formatYAxisLabel(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
axisBorder: { show: false },
|
||||||
|
axisTicks: { show: false },
|
||||||
|
crosshairs: {
|
||||||
|
stroke: { color: divider }
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: disabledText,
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: '400'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
categories: categories
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
sx={{
|
||||||
|
height: '100%',
|
||||||
|
transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
|
||||||
|
'&:hover': enableHover
|
||||||
|
? {
|
||||||
|
transform: 'translateY(-4px)',
|
||||||
|
boxShadow: '0 12px 35px rgba(0, 0, 0, 0.15)'
|
||||||
|
}
|
||||||
|
: {},
|
||||||
|
cursor: enableHover ? 'pointer' : 'default'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<Box>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
|
||||||
|
<Box>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 600, color: primaryText }}>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' sx={{ color: disabledText }}>
|
||||||
|
{accountNumber}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
{showButton && (
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
size='small'
|
||||||
|
component={Link}
|
||||||
|
href={href}
|
||||||
|
className='bg-primary '
|
||||||
|
sx={{
|
||||||
|
textTransform: 'none',
|
||||||
|
fontSize: '12px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className='tabler-wallet text-sm mr-2' /> Atur Akun
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
|
||||||
|
{balances.map((balance, index) => (
|
||||||
|
<Box key={index}>
|
||||||
|
<Typography variant='h4' sx={{ fontWeight: 700, color: primaryText }}>
|
||||||
|
{formatBalance(balance.amount)}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' sx={{ color: disabledText }}>
|
||||||
|
{balance.label}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
sx={{
|
||||||
|
pb: 0,
|
||||||
|
'& .MuiCardHeader-content': {
|
||||||
|
width: '100%'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<CardContent sx={{ pt: 0 }}>
|
||||||
|
<AppReactApexCharts type='area' width='100%' height={height} options={options} series={chartData} />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankCard
|
||||||
355
src/views/apps/cash-bank/CashBankList.tsx
Normal file
355
src/views/apps/cash-bank/CashBankList.tsx
Normal file
@ -0,0 +1,355 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useMemo, useEffect } from 'react'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import TextField, { TextFieldProps } from '@mui/material/TextField'
|
||||||
|
import InputAdornment from '@mui/material/InputAdornment'
|
||||||
|
import Box from '@mui/material/Box'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import Chip from '@mui/material/Chip'
|
||||||
|
import FormControl from '@mui/material/FormControl'
|
||||||
|
import InputLabel from '@mui/material/InputLabel'
|
||||||
|
import Select from '@mui/material/Select'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import CashBankCard from './CashBankCard' // Adjust import path as needed
|
||||||
|
import CustomTextField from '@/@core/components/mui/TextField'
|
||||||
|
import { getLocalizedUrl } from '@/utils/i18n'
|
||||||
|
import { Locale } from '@/configs/i18n'
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
import AccountFormDrawer, { AccountType } from '../account/AccountFormDrawer'
|
||||||
|
import { accountsData } from '../account/AccountListTable'
|
||||||
|
import { Button } from '@mui/material'
|
||||||
|
|
||||||
|
// Types
|
||||||
|
interface BankAccount {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
accountNumber: string
|
||||||
|
balances: Array<{
|
||||||
|
amount: string | number
|
||||||
|
label: string
|
||||||
|
}>
|
||||||
|
chartData: Array<{
|
||||||
|
name: string
|
||||||
|
data: number[]
|
||||||
|
}>
|
||||||
|
categories: string[]
|
||||||
|
chartColor?: string
|
||||||
|
currency: 'IDR' | 'USD' | 'EUR'
|
||||||
|
accountType: 'giro' | 'savings' | 'investment' | 'credit' | 'cash'
|
||||||
|
bank: string
|
||||||
|
status: 'active' | 'inactive' | 'blocked'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dummy Data
|
||||||
|
const dummyAccounts: BankAccount[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: 'Giro',
|
||||||
|
accountNumber: '1-10003',
|
||||||
|
balances: [
|
||||||
|
{ amount: '7.313.321', label: 'Saldo di bank' },
|
||||||
|
{ amount: '30.631.261', label: 'Saldo di kledo' }
|
||||||
|
],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: 'Saldo',
|
||||||
|
data: [
|
||||||
|
20000000, 21000000, 20500000, 20800000, 21500000, 22000000, 25000000, 26000000, 28000000, 29000000, 30000000,
|
||||||
|
31000000
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
categories: ['Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des', 'Jan', 'Feb', 'Mar'],
|
||||||
|
chartColor: '#ff6b9d',
|
||||||
|
currency: 'IDR',
|
||||||
|
accountType: 'giro',
|
||||||
|
bank: 'Bank Mandiri',
|
||||||
|
status: 'active'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: 'Tabungan Premium',
|
||||||
|
accountNumber: 'SAV-001234',
|
||||||
|
balances: [
|
||||||
|
{ amount: 15420000, label: 'Saldo Tersedia' },
|
||||||
|
{ amount: 18750000, label: 'Total Saldo' }
|
||||||
|
],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: 'Balance',
|
||||||
|
data: [
|
||||||
|
12000000, 13500000, 14200000, 15000000, 15800000, 16200000, 17000000, 17500000, 18000000, 18200000, 18500000,
|
||||||
|
18750000
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
|
||||||
|
chartColor: '#4285f4',
|
||||||
|
currency: 'IDR',
|
||||||
|
accountType: 'savings',
|
||||||
|
bank: 'Bank BCA',
|
||||||
|
status: 'active'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
title: 'Investment Portfolio',
|
||||||
|
accountNumber: 'INV-789012',
|
||||||
|
balances: [
|
||||||
|
{ amount: 125000, label: 'Portfolio Value' },
|
||||||
|
{ amount: 8750, label: 'Total Gains' }
|
||||||
|
],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: 'Portfolio Value',
|
||||||
|
data: [110000, 115000, 112000, 118000, 122000, 119000, 125000, 128000, 126000, 130000, 127000, 125000]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||||
|
currency: 'USD',
|
||||||
|
accountType: 'investment',
|
||||||
|
bank: 'Charles Schwab',
|
||||||
|
status: 'active'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
title: 'Kartu Kredit Platinum',
|
||||||
|
accountNumber: 'CC-456789',
|
||||||
|
balances: [
|
||||||
|
{ amount: 2500000, label: 'Saldo Saat Ini' },
|
||||||
|
{ amount: 47500000, label: 'Limit Tersedia' }
|
||||||
|
],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: 'Spending',
|
||||||
|
data: [
|
||||||
|
1200000, 1800000, 2200000, 1900000, 2100000, 2400000, 2800000, 2600000, 2300000, 2500000, 2700000, 2500000
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
|
||||||
|
currency: 'IDR',
|
||||||
|
accountType: 'credit',
|
||||||
|
bank: 'Bank BNI',
|
||||||
|
status: 'active'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
title: 'Deposito Berjangka',
|
||||||
|
accountNumber: 'DEP-334455',
|
||||||
|
balances: [
|
||||||
|
{ amount: 50000000, label: 'Pokok Deposito' },
|
||||||
|
{ amount: 2500000, label: 'Bunga Terkumpul' }
|
||||||
|
],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: 'Deposito Growth',
|
||||||
|
data: [
|
||||||
|
50000000, 50200000, 50420000, 50650000, 50880000, 51120000, 51360000, 51610000, 51860000, 52120000, 52380000,
|
||||||
|
52500000
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
|
||||||
|
currency: 'IDR',
|
||||||
|
accountType: 'savings',
|
||||||
|
bank: 'Bank BRI',
|
||||||
|
status: 'active'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
title: 'Cash Management',
|
||||||
|
accountNumber: 'CSH-111222',
|
||||||
|
balances: [{ amount: 5000, label: 'Available Cash' }],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: 'Cash Flow',
|
||||||
|
data: [4000, 4500, 4200, 4800, 5200, 4900, 5000, 5300, 5100, 5400, 5200, 5000]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2', 'Q3', 'Q4'],
|
||||||
|
chartColor: '#00bcd4',
|
||||||
|
currency: 'USD',
|
||||||
|
accountType: 'cash',
|
||||||
|
bank: 'Wells Fargo',
|
||||||
|
status: 'active'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '7',
|
||||||
|
title: 'Rekening Bisnis',
|
||||||
|
accountNumber: 'BIZ-998877',
|
||||||
|
balances: [
|
||||||
|
{ amount: 85000000, label: 'Saldo Operasional' },
|
||||||
|
{ amount: 15000000, label: 'Dana Cadangan' }
|
||||||
|
],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: 'Business Account',
|
||||||
|
data: [
|
||||||
|
70000000, 75000000, 80000000, 82000000, 85000000, 88000000, 90000000, 87000000, 85000000, 89000000, 92000000,
|
||||||
|
100000000
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
|
||||||
|
chartColor: '#ff9800',
|
||||||
|
currency: 'IDR',
|
||||||
|
accountType: 'giro',
|
||||||
|
bank: 'Bank Mandiri',
|
||||||
|
status: 'active'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '8',
|
||||||
|
title: 'Tabungan Pendidikan',
|
||||||
|
accountNumber: 'EDU-567890',
|
||||||
|
balances: [
|
||||||
|
{ amount: 25000000, label: 'Dana Pendidikan' },
|
||||||
|
{ amount: 3500000, label: 'Bunga Terkumpul' }
|
||||||
|
],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
name: 'Education Savings',
|
||||||
|
data: [
|
||||||
|
20000000, 21000000, 22000000, 23000000, 24000000, 24500000, 25000000, 25500000, 26000000, 27000000, 28000000,
|
||||||
|
28500000
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
|
||||||
|
chartColor: '#3f51b5',
|
||||||
|
currency: 'IDR',
|
||||||
|
accountType: 'savings',
|
||||||
|
bank: 'Bank BCA',
|
||||||
|
status: 'inactive'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const DebouncedInput = ({
|
||||||
|
value: initialValue,
|
||||||
|
onChange,
|
||||||
|
debounce = 500,
|
||||||
|
...props
|
||||||
|
}: {
|
||||||
|
value: string | number
|
||||||
|
onChange: (value: string | number) => void
|
||||||
|
debounce?: number
|
||||||
|
} & Omit<TextFieldProps, 'onChange'>) => {
|
||||||
|
// States
|
||||||
|
const [value, setValue] = useState(initialValue)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setValue(initialValue)
|
||||||
|
}, [initialValue])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
onChange(value)
|
||||||
|
}, debounce)
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [value])
|
||||||
|
|
||||||
|
return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
|
||||||
|
}
|
||||||
|
const CashBankList = () => {
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [editingAccount, setEditingAccount] = useState<AccountType | null>(null)
|
||||||
|
const [addAccountOpen, setAddAccountOpen] = useState(false)
|
||||||
|
const [data, setData] = useState<AccountType[]>(accountsData)
|
||||||
|
const { lang: locale } = useParams()
|
||||||
|
|
||||||
|
const handleCloseDrawer = () => {
|
||||||
|
setAddAccountOpen(false)
|
||||||
|
setEditingAccount(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter and search logic
|
||||||
|
const filteredAccounts = useMemo(() => {
|
||||||
|
return dummyAccounts.filter(account => {
|
||||||
|
const matchesSearch =
|
||||||
|
account.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
account.accountNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
account.bank.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
return matchesSearch
|
||||||
|
})
|
||||||
|
}, [searchQuery])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
{/* Search and Filters */}
|
||||||
|
<Box sx={{ mb: 4 }}>
|
||||||
|
<div className='flex justify-between items-center'>
|
||||||
|
<DebouncedInput
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={value => setSearchQuery(value as string)}
|
||||||
|
placeholder='Cari '
|
||||||
|
className='max-sm:is-full'
|
||||||
|
/>
|
||||||
|
<Box>
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
className='max-sm:is-full is-auto'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
onClick={() => {
|
||||||
|
setEditingAccount(null)
|
||||||
|
setAddAccountOpen(true)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tambah Akun
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Account Cards */}
|
||||||
|
<Grid container spacing={3}>
|
||||||
|
{filteredAccounts.length > 0 ? (
|
||||||
|
filteredAccounts.map(account => (
|
||||||
|
<Grid key={account.id} size={{ xs: 12, lg: 6, xl: 4 }}>
|
||||||
|
<CashBankCard
|
||||||
|
title={account.title}
|
||||||
|
accountNumber={account.accountNumber}
|
||||||
|
balances={account.balances}
|
||||||
|
chartData={account.chartData}
|
||||||
|
categories={account.categories}
|
||||||
|
chartColor={account.chartColor}
|
||||||
|
currency={account.currency}
|
||||||
|
showButton={account.accountType !== 'cash'}
|
||||||
|
href={getLocalizedUrl(`/apps/cash-bank/${account.accountNumber}/detail`, locale as Locale)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
textAlign: 'center',
|
||||||
|
py: 8,
|
||||||
|
backgroundColor: 'grey.50',
|
||||||
|
borderRadius: 2
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='h6' color='text.secondary' gutterBottom>
|
||||||
|
Tidak ada akun yang ditemukan
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='text.secondary'>
|
||||||
|
Coba ubah kata kunci pencarian atau filter yang digunakan
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
<AccountFormDrawer
|
||||||
|
open={addAccountOpen}
|
||||||
|
handleClose={handleCloseDrawer}
|
||||||
|
accountData={data}
|
||||||
|
setData={setData}
|
||||||
|
editingAccount={editingAccount}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankList
|
||||||
62
src/views/apps/cash-bank/detail/CashBankDetailCard.tsx
Normal file
62
src/views/apps/cash-bank/detail/CashBankDetailCard.tsx
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
// MUI Imports
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
|
||||||
|
// Vars
|
||||||
|
const data: UserDataType[] = [
|
||||||
|
{
|
||||||
|
title: 'SALDO',
|
||||||
|
stats: '30.631.261',
|
||||||
|
avatarIcon: 'tabler-wallet',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '22.3%',
|
||||||
|
subtitle: 'Hari ini vs 30 hari lalu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'MASUK',
|
||||||
|
stats: '3.486.871',
|
||||||
|
avatarIcon: 'tabler-arrow-down-circle',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'negative',
|
||||||
|
trendNumber: '44.1%',
|
||||||
|
subtitle: 'Bulan ini vs tanggal sama bulan lalu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'KELUAR',
|
||||||
|
stats: '3.163.000',
|
||||||
|
avatarIcon: 'tabler-arrow-up-circle',
|
||||||
|
avatarColor: 'info',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '137.8%',
|
||||||
|
subtitle: 'Bulan ini vs tanggal sama bulan lalu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'NET',
|
||||||
|
stats: '323.871',
|
||||||
|
avatarIcon: 'tabler-trending-up',
|
||||||
|
avatarColor: 'error',
|
||||||
|
trend: 'negative',
|
||||||
|
trendNumber: '93.4%',
|
||||||
|
subtitle: 'Bulan ini vs tanggal sama bulan lalu'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const CashBankDetailCard = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
{data.map((item, i) => (
|
||||||
|
<Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
|
||||||
|
<HorizontalWithSubtitle {...item} />
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailCard
|
||||||
19
src/views/apps/cash-bank/detail/CashBankDetailHeader.tsx
Normal file
19
src/views/apps/cash-bank/detail/CashBankDetailHeader.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { Typography } from '@mui/material'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const CashBankDetailHeader = ({ title }: Props) => {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
|
||||||
|
<div>
|
||||||
|
<Typography variant='h4' className='mbe-1'>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailHeader
|
||||||
615
src/views/apps/cash-bank/detail/CashBankDetailTable.tsx
Normal file
615
src/views/apps/cash-bank/detail/CashBankDetailTable.tsx
Normal file
@ -0,0 +1,615 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// React Imports
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||||
|
|
||||||
|
// Next Imports
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Card from '@mui/material/Card'
|
||||||
|
import CardHeader from '@mui/material/CardHeader'
|
||||||
|
import Checkbox from '@mui/material/Checkbox'
|
||||||
|
import Chip from '@mui/material/Chip'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
import type { TextFieldProps } from '@mui/material/TextField'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import type { RankingInfo } from '@tanstack/match-sorter-utils'
|
||||||
|
import { rankItem } from '@tanstack/match-sorter-utils'
|
||||||
|
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
|
||||||
|
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
||||||
|
import classnames from 'classnames'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { Locale } from '@configs/i18n'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
import OptionMenu from '@core/components/option-menu'
|
||||||
|
|
||||||
|
// Style Imports
|
||||||
|
import tableStyles from '@core/styles/table.module.css'
|
||||||
|
import { Box, CircularProgress, TablePagination } from '@mui/material'
|
||||||
|
import { useDispatch } from 'react-redux'
|
||||||
|
import TablePaginationComponent from '@/components/TablePaginationComponent'
|
||||||
|
import Loading from '@/components/layout/shared/Loading'
|
||||||
|
import { getLocalizedUrl } from '@/utils/i18n'
|
||||||
|
import StatusFilterTabs from '@/components/StatusFilterTab'
|
||||||
|
import DateRangePicker from '@/components/RangeDatePicker'
|
||||||
|
|
||||||
|
// Updated CashBankType
|
||||||
|
export type CashBankType = {
|
||||||
|
id: number
|
||||||
|
date: string
|
||||||
|
description: string
|
||||||
|
reference: string
|
||||||
|
accept: number
|
||||||
|
send: number
|
||||||
|
balance: number
|
||||||
|
status: string
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '@tanstack/table-core' {
|
||||||
|
interface FilterFns {
|
||||||
|
fuzzy: FilterFn<unknown>
|
||||||
|
}
|
||||||
|
interface FilterMeta {
|
||||||
|
itemRank: RankingInfo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type CashBankTypeWithAction = CashBankType & {
|
||||||
|
actions?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Styled Components
|
||||||
|
const Icon = styled('i')({})
|
||||||
|
|
||||||
|
const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
||||||
|
// Rank the item
|
||||||
|
const itemRank = rankItem(row.getValue(columnId), value)
|
||||||
|
|
||||||
|
// Store the itemRank info
|
||||||
|
addMeta({
|
||||||
|
itemRank
|
||||||
|
})
|
||||||
|
|
||||||
|
// Return if the item should be filtered in/out
|
||||||
|
return itemRank.passed
|
||||||
|
}
|
||||||
|
|
||||||
|
const DebouncedInput = ({
|
||||||
|
value: initialValue,
|
||||||
|
onChange,
|
||||||
|
debounce = 500,
|
||||||
|
...props
|
||||||
|
}: {
|
||||||
|
value: string | number
|
||||||
|
onChange: (value: string | number) => void
|
||||||
|
debounce?: number
|
||||||
|
} & Omit<TextFieldProps, 'onChange'>) => {
|
||||||
|
// States
|
||||||
|
const [value, setValue] = useState(initialValue)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setValue(initialValue)
|
||||||
|
}, [initialValue])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
onChange(value)
|
||||||
|
}, debounce)
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [value])
|
||||||
|
|
||||||
|
return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
|
||||||
|
}
|
||||||
|
|
||||||
|
// Status color mapping for CashBank
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Transaksi di Apskel':
|
||||||
|
return 'info'
|
||||||
|
case 'Transaksi di Bank':
|
||||||
|
return 'primary'
|
||||||
|
case 'Rekonsiliasi':
|
||||||
|
return 'success'
|
||||||
|
case 'Transaksi Berulang':
|
||||||
|
return 'secondary'
|
||||||
|
case 'Void':
|
||||||
|
return 'error'
|
||||||
|
case 'Menunggu Persetujuan':
|
||||||
|
return 'warning'
|
||||||
|
case 'Di tolak':
|
||||||
|
return 'error'
|
||||||
|
default:
|
||||||
|
return 'default'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format currency
|
||||||
|
const formatCurrency = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('id-ID', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'IDR',
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
}).format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sample CashBank data
|
||||||
|
const cashBankData: CashBankType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
date: '2024-01-15',
|
||||||
|
description: 'Transfer ke supplier ABC',
|
||||||
|
reference: 'TRF-001',
|
||||||
|
accept: 0,
|
||||||
|
send: 5000000,
|
||||||
|
balance: 45000000,
|
||||||
|
status: 'Transaksi di Bank'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
date: '2024-01-16',
|
||||||
|
description: 'Pembayaran dari customer XYZ',
|
||||||
|
reference: 'PAY-002',
|
||||||
|
accept: 10000000,
|
||||||
|
send: 0,
|
||||||
|
balance: 55000000,
|
||||||
|
status: 'Rekonsiliasi'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
date: '2024-01-17',
|
||||||
|
description: 'Pembayaran gaji karyawan',
|
||||||
|
reference: 'SALARY-001',
|
||||||
|
accept: 0,
|
||||||
|
send: 25000000,
|
||||||
|
balance: 30000000,
|
||||||
|
status: 'Menunggu Persetujuan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
date: '2024-01-18',
|
||||||
|
description: 'Transfer antar rekening',
|
||||||
|
reference: 'TRF-002',
|
||||||
|
accept: 0,
|
||||||
|
send: 2000000,
|
||||||
|
balance: 28000000,
|
||||||
|
status: 'Transaksi di Apskel'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
date: '2024-01-19',
|
||||||
|
description: 'Pembayaran otomatis tagihan listrik',
|
||||||
|
reference: 'AUTO-001',
|
||||||
|
accept: 0,
|
||||||
|
send: 1500000,
|
||||||
|
balance: 26500000,
|
||||||
|
status: 'Transaksi Berulang'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
date: '2024-01-20',
|
||||||
|
description: 'Transfer yang dibatalkan',
|
||||||
|
reference: 'TRF-003',
|
||||||
|
accept: 0,
|
||||||
|
send: 3000000,
|
||||||
|
balance: 26500000,
|
||||||
|
status: 'Void'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
date: '2024-01-21',
|
||||||
|
description: 'Pembayaran yang ditolak sistem',
|
||||||
|
reference: 'PAY-003',
|
||||||
|
accept: 0,
|
||||||
|
send: 5000000,
|
||||||
|
balance: 26500000,
|
||||||
|
status: 'Di tolak'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// Column Definitions
|
||||||
|
const columnHelper = createColumnHelper<CashBankTypeWithAction>()
|
||||||
|
|
||||||
|
const CashBankDetailTable = () => {
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
|
||||||
|
// States
|
||||||
|
const [addTransactionOpen, setAddTransactionOpen] = useState(false)
|
||||||
|
const [rowSelection, setRowSelection] = useState({})
|
||||||
|
const [currentPage, setCurrentPage] = useState(0)
|
||||||
|
const [pageSize, setPageSize] = useState(10)
|
||||||
|
const [openConfirm, setOpenConfirm] = useState(false)
|
||||||
|
const [transactionId, setTransactionId] = useState('')
|
||||||
|
const [search, setSearch] = useState('')
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('Semua')
|
||||||
|
const [filteredData, setFilteredData] = useState<CashBankType[]>(cashBankData)
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const { lang: locale } = useParams()
|
||||||
|
|
||||||
|
// Filter data based on search and status
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = cashBankData
|
||||||
|
|
||||||
|
// Filter by search
|
||||||
|
if (search) {
|
||||||
|
filtered = filtered.filter(
|
||||||
|
transaction =>
|
||||||
|
transaction.description.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
transaction.reference.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
transaction.status.toLowerCase().includes(search.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by status
|
||||||
|
if (statusFilter !== 'Semua') {
|
||||||
|
filtered = filtered.filter(transaction => transaction.status === statusFilter)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredData(filtered)
|
||||||
|
setCurrentPage(0)
|
||||||
|
}, [search, statusFilter])
|
||||||
|
|
||||||
|
const totalCount = filteredData.length
|
||||||
|
const paginatedData = useMemo(() => {
|
||||||
|
const startIndex = currentPage * pageSize
|
||||||
|
return filteredData.slice(startIndex, startIndex + pageSize)
|
||||||
|
}, [filteredData, currentPage, pageSize])
|
||||||
|
|
||||||
|
// Calculate totals from filtered data
|
||||||
|
const subtotalAccept = useMemo(() => {
|
||||||
|
return filteredData.reduce((sum, transaction) => sum + transaction.accept, 0)
|
||||||
|
}, [filteredData])
|
||||||
|
|
||||||
|
const subtotalSend = useMemo(() => {
|
||||||
|
return filteredData.reduce((sum, transaction) => sum + transaction.send, 0)
|
||||||
|
}, [filteredData])
|
||||||
|
|
||||||
|
const netBalance = subtotalAccept - subtotalSend
|
||||||
|
|
||||||
|
const handlePageChange = useCallback((event: unknown, newPage: number) => {
|
||||||
|
setCurrentPage(newPage)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const newPageSize = parseInt(event.target.value, 10)
|
||||||
|
setPageSize(newPageSize)
|
||||||
|
setCurrentPage(0)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
setOpenConfirm(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTransactionClick = (transactionId: string) => {
|
||||||
|
console.log('Navigasi ke detail Transaksi:', transactionId)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleStatusFilter = (status: string) => {
|
||||||
|
setStatusFilter(status)
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<CashBankTypeWithAction, any>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: ({ table }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: table.getIsAllRowsSelected(),
|
||||||
|
indeterminate: table.getIsSomeRowsSelected(),
|
||||||
|
onChange: table.getToggleAllRowsSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: row.getIsSelected(),
|
||||||
|
disabled: !row.getCanSelect(),
|
||||||
|
indeterminate: row.getIsSomeSelected(),
|
||||||
|
onChange: row.getToggleSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
columnHelper.accessor('date', {
|
||||||
|
header: 'Tanggal',
|
||||||
|
cell: ({ row }) => <Typography>{row.original.date}</Typography>
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('description', {
|
||||||
|
header: 'Keterangan',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Button
|
||||||
|
variant='text'
|
||||||
|
color='primary'
|
||||||
|
className='p-0 min-w-0 font-medium normal-case justify-start'
|
||||||
|
component={Link}
|
||||||
|
href={getLocalizedUrl(`/apps/cash-bank/1-10003/detail/transaction/${row.original.id}`, locale as Locale)}
|
||||||
|
sx={{
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 500,
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.original.description}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('reference', {
|
||||||
|
header: 'Referensi',
|
||||||
|
cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('status', {
|
||||||
|
header: 'Status',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<Chip
|
||||||
|
variant='tonal'
|
||||||
|
label={row.original.status}
|
||||||
|
size='small'
|
||||||
|
color={getStatusColor(row.original.status) as any}
|
||||||
|
className='capitalize'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('accept', {
|
||||||
|
header: 'Penerimaan',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Typography className={`font-medium ${row.original.accept > 0 ? 'text-green-600' : 'text-gray-500'}`}>
|
||||||
|
{row.original.accept > 0 ? formatCurrency(row.original.accept) : '-'}
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('send', {
|
||||||
|
header: 'Pengeluaran',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Typography className={`font-medium ${row.original.send > 0 ? 'text-red-600' : 'text-gray-500'}`}>
|
||||||
|
{row.original.send > 0 ? formatCurrency(row.original.send) : '-'}
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('balance', {
|
||||||
|
header: 'Saldo',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Typography className={`font-medium ${row.original.balance >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||||
|
{formatCurrency(row.original.balance)}
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: paginatedData as CashBankType[],
|
||||||
|
columns,
|
||||||
|
filterFns: {
|
||||||
|
fuzzy: fuzzyFilter
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
rowSelection,
|
||||||
|
pagination: {
|
||||||
|
pageIndex: currentPage,
|
||||||
|
pageSize
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enableRowSelection: true,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
manualPagination: true,
|
||||||
|
pageCount: Math.ceil(totalCount / pageSize)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card>
|
||||||
|
{/* Filter Status Tabs and Range Date */}
|
||||||
|
<div className='p-6 border-bs'>
|
||||||
|
<div className='flex items-center justify-between'>
|
||||||
|
<StatusFilterTabs
|
||||||
|
statusOptions={[
|
||||||
|
'Semua',
|
||||||
|
'Transaksi di Apskel',
|
||||||
|
'Transaksi di Bank',
|
||||||
|
'Rekonsiliasi',
|
||||||
|
'Transaksi Berulang',
|
||||||
|
'Void',
|
||||||
|
'Menunggu Persetujuan',
|
||||||
|
'Di tolak'
|
||||||
|
]}
|
||||||
|
selectedStatus={statusFilter}
|
||||||
|
onStatusChange={handleStatusFilter}
|
||||||
|
/>
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
|
||||||
|
<DebouncedInput
|
||||||
|
value={search}
|
||||||
|
onChange={value => setSearch(value as string)}
|
||||||
|
placeholder='Cari Transaksi Cash/Bank'
|
||||||
|
className='max-sm:is-full'
|
||||||
|
/>
|
||||||
|
<div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
value={pageSize}
|
||||||
|
onChange={handlePageSizeChange}
|
||||||
|
className='max-sm:is-full sm:is-[70px]'
|
||||||
|
>
|
||||||
|
<MenuItem value={10}>10</MenuItem>
|
||||||
|
<MenuItem value={25}>25</MenuItem>
|
||||||
|
<MenuItem value={50}>50</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
component={Link}
|
||||||
|
className='max-sm:is-full is-auto'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
href={getLocalizedUrl('/apps/cashbank/add', locale as Locale)}
|
||||||
|
>
|
||||||
|
Tambah Transaksi
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table className={tableStyles.table}>
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<th key={header.id}>
|
||||||
|
{header.isPlaceholder ? null : (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={classnames({
|
||||||
|
'flex items-center': header.column.getIsSorted(),
|
||||||
|
'cursor-pointer select-none': header.column.getCanSort()
|
||||||
|
})}
|
||||||
|
onClick={header.column.getToggleSortingHandler()}
|
||||||
|
>
|
||||||
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||||
|
{{
|
||||||
|
asc: <i className='tabler-chevron-up text-xl' />,
|
||||||
|
desc: <i className='tabler-chevron-down text-xl' />
|
||||||
|
}[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
{filteredData.length === 0 ? (
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
|
||||||
|
Tidak ada data tersedia
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
) : (
|
||||||
|
<tbody>
|
||||||
|
{table.getRowModel().rows.map(row => {
|
||||||
|
return (
|
||||||
|
<tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Subtotal Row */}
|
||||||
|
<tr className='border-t-2 bg-gray-50'>
|
||||||
|
<td className='font-semibold text-lg py-4'>
|
||||||
|
<Typography variant='h6' className='font-semibold'>
|
||||||
|
Subtotal
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td className='font-semibold text-lg py-4'>
|
||||||
|
<Typography variant='h6' className='font-semibold text-green-600'>
|
||||||
|
{formatCurrency(subtotalAccept)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td className='font-semibold text-lg py-4'>
|
||||||
|
<Typography variant='h6' className='font-semibold text-red-600'>
|
||||||
|
{formatCurrency(subtotalSend)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td className='font-semibold text-lg py-4'>
|
||||||
|
<Typography
|
||||||
|
variant='h6'
|
||||||
|
className={`font-semibold ${netBalance >= 0 ? 'text-green-600' : 'text-red-600'}`}
|
||||||
|
>
|
||||||
|
{formatCurrency(netBalance)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
{/* Total Row */}
|
||||||
|
<tr className='border-t bg-gray-100'>
|
||||||
|
<td className='font-bold text-xl py-4'>
|
||||||
|
<Typography variant='h6' className='font-bold'>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td className='font-bold text-xl py-4'>
|
||||||
|
<Typography
|
||||||
|
variant='h6'
|
||||||
|
className={`font-bold ${netBalance >= 0 ? 'text-green-600' : 'text-red-600'}`}
|
||||||
|
>
|
||||||
|
{formatCurrency(netBalance)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
)}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TablePagination
|
||||||
|
component={() => (
|
||||||
|
<TablePaginationComponent
|
||||||
|
pageIndex={currentPage}
|
||||||
|
pageSize={pageSize}
|
||||||
|
totalCount={totalCount}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
count={totalCount}
|
||||||
|
rowsPerPage={pageSize}
|
||||||
|
page={currentPage}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
onRowsPerPageChange={handlePageSizeChange}
|
||||||
|
rowsPerPageOptions={[10, 25, 50]}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailTable
|
||||||
23
src/views/apps/cash-bank/detail/index.tsx
Normal file
23
src/views/apps/cash-bank/detail/index.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
// MUI Imports
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import CashBankDetailHeader from './CashBankDetailHeader'
|
||||||
|
import CashBankDetailTable from './CashBankDetailTable'
|
||||||
|
import CashBankDetailCard from './CashBankDetailCard'
|
||||||
|
|
||||||
|
const CashBankDetail = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<CashBankDetailHeader title='Giro 1-10003' />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<CashBankDetailCard />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<CashBankDetailTable />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetail
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import CashBankDetailTransactionInformation from './CashBankDetailTransactionInformation'
|
||||||
|
import CashBankDetailTransactionLog from './CashBankDetailTransactionLog'
|
||||||
|
import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
const CashBankDetailTransactionContent = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<CashBankDetailTransactionInformation />
|
||||||
|
</Grid>
|
||||||
|
{/* <Grid size={{ xs: 12 }}>
|
||||||
|
<ExpenseDetailSendPayment />
|
||||||
|
</Grid> */}
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<CashBankDetailTransactionLog />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailTransactionContent
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { Typography } from '@mui/material'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
transaction: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const CashBankDetailTransactionHeader = ({ title, transaction }: Props) => {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
|
||||||
|
<div>
|
||||||
|
<Typography variant='h4' className='mbe-1'>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='h6' className='mbe-1'>
|
||||||
|
Transaksi: {transaction}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailTransactionHeader
|
||||||
@ -0,0 +1,177 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { Card, CardHeader, CardContent, Typography, Box, Button, IconButton } from '@mui/material'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled'
|
||||||
|
|
||||||
|
interface PaymentData {
|
||||||
|
dari: string
|
||||||
|
nomor: string
|
||||||
|
tglTransaksi: string
|
||||||
|
referensi: string
|
||||||
|
status: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TransactionItem {
|
||||||
|
deskripsi: string
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const CashBankDetailTransactionInformation: React.FC = () => {
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
|
||||||
|
const paymentData: PaymentData = {
|
||||||
|
dari: 'POS Customer',
|
||||||
|
nomor: 'IP/00030',
|
||||||
|
tglTransaksi: '10/09/2025',
|
||||||
|
referensi: 'Pembayaran INV/01/59A/4CY/00003',
|
||||||
|
status: 'Unreconciled'
|
||||||
|
}
|
||||||
|
|
||||||
|
const transactionItems: TransactionItem[] = [
|
||||||
|
{
|
||||||
|
deskripsi: 'Terima pembayaran tagihan INV/01/59A/4CY/00003',
|
||||||
|
total: 220890
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const totalAmount: number = transactionItems.reduce((sum, item) => sum + item.total, 0)
|
||||||
|
|
||||||
|
const formatCurrency = (amount: number): string => {
|
||||||
|
return new Intl.NumberFormat('id-ID').format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card sx={{ width: '100%' }}>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<Box display='flex' justifyContent='space-between' alignItems='center'>
|
||||||
|
<Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Unreconciled
|
||||||
|
</Typography>
|
||||||
|
<Box>
|
||||||
|
<Button variant='outlined' size='small' sx={{ mr: 1 }} onClick={() => setOpen(true)}>
|
||||||
|
Rekonsiliasi
|
||||||
|
</Button>
|
||||||
|
<Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
||||||
|
Bagikan
|
||||||
|
</Button>
|
||||||
|
<Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
||||||
|
Print
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
{/* Payment Information */}
|
||||||
|
<Grid container spacing={3} sx={{ mb: 4 }}>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ mb: 2 }}>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Dari
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
|
||||||
|
{paymentData.dari}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ mb: 2 }}>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Tanggal Transaksi
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1'>{paymentData.tglTransaksi}</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ mb: 2 }}>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Nomor
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1'>{paymentData.nomor}</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Referensi
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1'>{paymentData.referensi}</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Transaction Items Header */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
py: 2,
|
||||||
|
borderBottom: '2px solid #e0e0e0',
|
||||||
|
mb: 2
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Deskripsi
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Transaction Items */}
|
||||||
|
<Box sx={{ mb: 4 }}>
|
||||||
|
{transactionItems.map((item, index) => (
|
||||||
|
<Box
|
||||||
|
key={index}
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
py: 2,
|
||||||
|
borderBottom: index === transactionItems.length - 1 ? 'none' : '1px solid #f0f0f0'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ flex: 1 }}>
|
||||||
|
<Typography variant='body1' color='primary' sx={{ cursor: 'pointer' }}>
|
||||||
|
{item.deskripsi}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ textAlign: 'right', ml: 3 }}>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||||||
|
{formatCurrency(item.total)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Total Section */}
|
||||||
|
<Box sx={{ mt: 4, pt: 3, borderTop: '2px solid #e0e0e0' }}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='h5' sx={{ fontWeight: 'bold', mr: 4 }}>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='h5' sx={{ fontWeight: 'bold' }}>
|
||||||
|
{formatCurrency(totalAmount)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<CashBankDetailTransactionReconciliationDrawer open={open} handleClose={() => setOpen(!open)} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailTransactionInformation
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material'
|
||||||
|
|
||||||
|
interface LogEntry {
|
||||||
|
id: string
|
||||||
|
action: string
|
||||||
|
timestamp: string
|
||||||
|
user: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const CashBankDetailTransactionLog: React.FC = () => {
|
||||||
|
const logEntries: LogEntry[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
action: 'Terakhir diubah oleh',
|
||||||
|
timestamp: '08 Sep 2025 18:26',
|
||||||
|
user: 'pada'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Pantau log perubahan data
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
sx={{ pb: 1 }}
|
||||||
|
/>
|
||||||
|
<CardContent sx={{ mt: 5 }}>
|
||||||
|
{logEntries.map(entry => (
|
||||||
|
<Box key={entry.id} sx={{ mb: 2 }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<i className='tabler-edit' style={{ fontSize: '16px', color: '#1976d2' }} />
|
||||||
|
<Link
|
||||||
|
href='#'
|
||||||
|
underline='hover'
|
||||||
|
color='primary'
|
||||||
|
sx={{
|
||||||
|
textDecoration: 'none',
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{entry.action} {entry.user} {entry.timestamp}
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailTransactionLog
|
||||||
@ -0,0 +1,342 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
Typography,
|
||||||
|
Box,
|
||||||
|
IconButton,
|
||||||
|
Button,
|
||||||
|
TextField,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Checkbox,
|
||||||
|
Paper,
|
||||||
|
MenuItem,
|
||||||
|
Select,
|
||||||
|
FormControl
|
||||||
|
} from '@mui/material'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
open: boolean
|
||||||
|
handleClose: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const CashBankDetailTransactionReconciliationDrawer: React.FC<Props> = ({ open, handleClose }) => {
|
||||||
|
const [tanggalDari, setTanggalDari] = useState('10/09/2025')
|
||||||
|
const [tanggalSampai, setTanggalSampai] = useState('10/09/2025')
|
||||||
|
const [totalDari, setTotalDari] = useState('220.890')
|
||||||
|
const [totalSampai, setTotalSampai] = useState('220.890')
|
||||||
|
const [cari, setCari] = useState('')
|
||||||
|
|
||||||
|
const transactionData = {
|
||||||
|
detil: '10/09/2025',
|
||||||
|
kirim: 'Terima pembayaran tagihan: POS Customer INV/01/59A/4CY/00003',
|
||||||
|
terima: '220.890'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
anchor='right'
|
||||||
|
variant='temporary'
|
||||||
|
onClose={handleClose}
|
||||||
|
ModalProps={{ keepMounted: true }}
|
||||||
|
sx={{
|
||||||
|
'& .MuiDrawer-paper': {
|
||||||
|
width: { xs: '90%', sm: '80%', md: '80%', lg: '80%' },
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderBottom: 1,
|
||||||
|
borderColor: 'divider',
|
||||||
|
p: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-between'>
|
||||||
|
<Typography variant='h5' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Rekonsiliasi
|
||||||
|
</Typography>
|
||||||
|
<IconButton size='small' onClick={handleClose}>
|
||||||
|
<i className='tabler-x text-2xl' />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<Box sx={{ flex: 1, overflowY: 'auto', p: 3 }}>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid size={6}>
|
||||||
|
{/* Mutasi Bank Section */}
|
||||||
|
<Box sx={{ mb: 4 }}>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold', mb: 1 }}>
|
||||||
|
Mutasi Bank
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='text.secondary' sx={{ mb: 3 }}>
|
||||||
|
Cari mutasi bank yang sesuai dengan transaksi di Kledo
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{/* Filter Section */}
|
||||||
|
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||||
|
{/* Tanggal */}
|
||||||
|
<Grid size={12}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
|
||||||
|
Tanggal
|
||||||
|
</Typography>
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<TextField
|
||||||
|
size='small'
|
||||||
|
value={tanggalDari}
|
||||||
|
onChange={e => setTanggalDari(e.target.value)}
|
||||||
|
sx={{ width: '150px' }}
|
||||||
|
/>
|
||||||
|
<Typography variant='body2'>s/d</Typography>
|
||||||
|
<TextField
|
||||||
|
size='small'
|
||||||
|
value={tanggalSampai}
|
||||||
|
onChange={e => setTanggalSampai(e.target.value)}
|
||||||
|
sx={{ width: '150px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Total */}
|
||||||
|
<Grid size={12}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<TextField
|
||||||
|
size='small'
|
||||||
|
value={totalDari}
|
||||||
|
onChange={e => setTotalDari(e.target.value)}
|
||||||
|
sx={{ width: '150px' }}
|
||||||
|
/>
|
||||||
|
<Typography variant='body2'>s/d</Typography>
|
||||||
|
<TextField
|
||||||
|
size='small'
|
||||||
|
value={totalSampai}
|
||||||
|
onChange={e => setTotalSampai(e.target.value)}
|
||||||
|
sx={{ width: '150px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Cari */}
|
||||||
|
<Grid size={12}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
|
||||||
|
Cari
|
||||||
|
</Typography>
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<TextField
|
||||||
|
size='small'
|
||||||
|
placeholder='Cari'
|
||||||
|
value={cari}
|
||||||
|
onChange={e => setCari(e.target.value)}
|
||||||
|
sx={{ width: '300px' }}
|
||||||
|
/>
|
||||||
|
<Button variant='contained' size='small'>
|
||||||
|
Go
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<TableContainer component={Paper} sx={{ mb: 3 }}>
|
||||||
|
<Table size='small'>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow sx={{ backgroundColor: 'grey.50' }}>
|
||||||
|
<TableCell padding='checkbox'>
|
||||||
|
<Checkbox />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>Detil</TableCell>
|
||||||
|
<TableCell>Kirim</TableCell>
|
||||||
|
<TableCell>Terima</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
|
||||||
|
<div className='flex flex-col items-center gap-2'>
|
||||||
|
<i className='tabler-folder-open text-gray-400 text-4xl' />
|
||||||
|
<Typography variant='body2' color='text.secondary'>
|
||||||
|
Tidak ada data
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
{/* Information Text */}
|
||||||
|
<Typography variant='body2' color='text.secondary' sx={{ mb: 2 }}>
|
||||||
|
Transaksi yang sudah dipilih, tambah transaksi baru sesuai kebutuhan.
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<TableContainer component={Paper} sx={{ mb: 3 }}>
|
||||||
|
<Table size='small'>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow sx={{ backgroundColor: 'grey.50' }}>
|
||||||
|
<TableCell padding='checkbox'>
|
||||||
|
<Checkbox />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>Detil</TableCell>
|
||||||
|
<TableCell>Kirim</TableCell>
|
||||||
|
<TableCell>Terima</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
|
||||||
|
<div className='flex flex-col items-center gap-2'>
|
||||||
|
<i className='tabler-folder-open text-gray-400 text-4xl' />
|
||||||
|
<Typography variant='body2' color='text.secondary'>
|
||||||
|
Tidak ada data
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Summary Section */}
|
||||||
|
<Box sx={{ mb: 4 }}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 3, fontWeight: 'medium' }}>
|
||||||
|
Total transaksi di Kledo harus sama dengan total mutasi
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' color='text.secondary'>
|
||||||
|
Total transaksi di Kledo
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' sx={{ textAlign: 'right' }}>
|
||||||
|
220.890
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' color='text.secondary'>
|
||||||
|
Total mutasi
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' sx={{ textAlign: 'right' }}>
|
||||||
|
0
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid container spacing={3}>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Selisih
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' sx={{ textAlign: 'right', fontWeight: 'bold' }}>
|
||||||
|
220.890
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={6}>
|
||||||
|
{/* Transaction Summary */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'grey.50',
|
||||||
|
p: 3,
|
||||||
|
borderRadius: 1,
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'grey.200'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid container spacing={3}>
|
||||||
|
<Grid size={4}>
|
||||||
|
<Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
|
||||||
|
Detil
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2'>{transactionData.detil}</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={4}>
|
||||||
|
<Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
|
||||||
|
Kirim
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
|
||||||
|
{transactionData.kirim}
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={4}>
|
||||||
|
<Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
|
||||||
|
Terima
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='primary' sx={{ fontWeight: 'bold' }}>
|
||||||
|
{transactionData.terima}
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Box sx={{ mt: 3, pt: 2, borderTop: '1px solid', borderColor: 'grey.300' }}>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold', mr: 2 }}>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
220.890
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Footer Buttons */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
bottom: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderTop: 1,
|
||||||
|
borderColor: 'divider',
|
||||||
|
p: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-end gap-3'>
|
||||||
|
<Button variant='outlined' color='error' onClick={handleClose}>
|
||||||
|
Batal
|
||||||
|
</Button>
|
||||||
|
<Button variant='outlined' disabled>
|
||||||
|
Rekonsiliasi
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CashBankDetailTransactionReconciliationDrawer
|
||||||
@ -38,6 +38,10 @@ import AddProductIngredientDrawer from './AddProductIngredientDrawer'
|
|||||||
import { useIngredientsMutation } from '../../../../../services/mutations/ingredients'
|
import { useIngredientsMutation } from '../../../../../services/mutations/ingredients'
|
||||||
import { useDispatch } from 'react-redux'
|
import { useDispatch } from 'react-redux'
|
||||||
import { setIngredient } from '../../../../../redux-store/slices/ingredient'
|
import { setIngredient } from '../../../../../redux-store/slices/ingredient'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { getLocalizedUrl } from '@/utils/i18n'
|
||||||
|
import { Locale } from '@/configs/i18n'
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
|
||||||
declare module '@tanstack/table-core' {
|
declare module '@tanstack/table-core' {
|
||||||
interface FilterFns {
|
interface FilterFns {
|
||||||
@ -110,6 +114,8 @@ const ProductIngredientTable = () => {
|
|||||||
const [openConfirm, setOpenConfirm] = useState(false)
|
const [openConfirm, setOpenConfirm] = useState(false)
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('')
|
||||||
|
|
||||||
|
const { lang: locale } = useParams()
|
||||||
|
|
||||||
// Fetch products with pagination and search
|
// Fetch products with pagination and search
|
||||||
const { data, isLoading, error, isFetching } = useIngredients({
|
const { data, isLoading, error, isFetching } = useIngredients({
|
||||||
page: currentPage,
|
page: currentPage,
|
||||||
@ -166,14 +172,23 @@ const ProductIngredientTable = () => {
|
|||||||
columnHelper.accessor('name', {
|
columnHelper.accessor('name', {
|
||||||
header: 'Name',
|
header: 'Name',
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<div className='flex items-center gap-3'>
|
<Button
|
||||||
{/* <img src={row.original.image} width={38} height={38} className='rounded bg-actionHover' /> */}
|
variant='text'
|
||||||
<div className='flex flex-col items-start'>
|
color='primary'
|
||||||
<Typography className='font-medium' color='text.primary'>
|
className='p-0 min-w-0 font-medium normal-case justify-start'
|
||||||
{row.original.name || '-'}
|
component={Link}
|
||||||
</Typography>
|
href={getLocalizedUrl(`/apps/inventory/products/ingredients/${row.original.id}/detail`, locale as Locale)}
|
||||||
</div>
|
sx={{
|
||||||
</div>
|
textTransform: 'none',
|
||||||
|
fontWeight: 500,
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.original.name}
|
||||||
|
</Button>
|
||||||
)
|
)
|
||||||
}),
|
}),
|
||||||
columnHelper.accessor('cost', {
|
columnHelper.accessor('cost', {
|
||||||
@ -396,7 +411,10 @@ const ProductIngredientTable = () => {
|
|||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<AddProductIngredientDrawer open={addIngredientOpen} handleClose={() => setAddIngredientOpen(!addIngredientOpen)} />
|
<AddProductIngredientDrawer
|
||||||
|
open={addIngredientOpen}
|
||||||
|
handleClose={() => setAddIngredientOpen(!addIngredientOpen)}
|
||||||
|
/>
|
||||||
|
|
||||||
<ConfirmDeleteDialog
|
<ConfirmDeleteDialog
|
||||||
open={openConfirm}
|
open={openConfirm}
|
||||||
|
|||||||
@ -0,0 +1,370 @@
|
|||||||
|
'use client'
|
||||||
|
// React Imports
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Drawer from '@mui/material/Drawer'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import Divider from '@mui/material/Divider'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import Box from '@mui/material/Box'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import { useForm, Controller } from 'react-hook-form'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
open: boolean
|
||||||
|
handleClose: () => void
|
||||||
|
setData?: (data: any) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
type UnitConversionType = {
|
||||||
|
satuan: string
|
||||||
|
quantity: number
|
||||||
|
unit: string
|
||||||
|
hargaBeli: number
|
||||||
|
hargaJual: number
|
||||||
|
isDefault: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
type FormValidateType = {
|
||||||
|
conversions: UnitConversionType[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vars
|
||||||
|
const initialConversion: UnitConversionType = {
|
||||||
|
satuan: 'Box',
|
||||||
|
quantity: 12,
|
||||||
|
unit: 'Pcs',
|
||||||
|
hargaBeli: 3588000,
|
||||||
|
hargaJual: 5988000,
|
||||||
|
isDefault: false
|
||||||
|
}
|
||||||
|
|
||||||
|
const IngedientUnitConversionDrawer = (props: Props) => {
|
||||||
|
// Props
|
||||||
|
const { open, handleClose, setData } = props
|
||||||
|
|
||||||
|
// States
|
||||||
|
const [conversions, setConversions] = useState<UnitConversionType[]>([initialConversion])
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
reset: resetForm,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors }
|
||||||
|
} = useForm<FormValidateType>({
|
||||||
|
defaultValues: {
|
||||||
|
conversions: [initialConversion]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Functions untuk konversi unit
|
||||||
|
const handleTambahBaris = () => {
|
||||||
|
const newConversion: UnitConversionType = {
|
||||||
|
satuan: '',
|
||||||
|
quantity: 0,
|
||||||
|
unit: '',
|
||||||
|
hargaBeli: 0,
|
||||||
|
hargaJual: 0,
|
||||||
|
isDefault: false
|
||||||
|
}
|
||||||
|
setConversions([...conversions, newConversion])
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleHapusBaris = (index: number) => {
|
||||||
|
if (conversions.length > 1) {
|
||||||
|
const newConversions = conversions.filter((_, i) => i !== index)
|
||||||
|
setConversions(newConversions)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChangeConversion = (index: number, field: keyof UnitConversionType, value: any) => {
|
||||||
|
const newConversions = [...conversions]
|
||||||
|
newConversions[index] = { ...newConversions[index], [field]: value }
|
||||||
|
setConversions(newConversions)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleDefault = (index: number) => {
|
||||||
|
const newConversions = conversions.map((conversion, i) => ({
|
||||||
|
...conversion,
|
||||||
|
isDefault: i === index
|
||||||
|
}))
|
||||||
|
setConversions(newConversions)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSubmit = (data: FormValidateType) => {
|
||||||
|
console.log('Unit conversions:', conversions)
|
||||||
|
if (setData) {
|
||||||
|
setData(conversions)
|
||||||
|
}
|
||||||
|
handleClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
handleClose()
|
||||||
|
setConversions([initialConversion])
|
||||||
|
resetForm({ conversions: [initialConversion] })
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatNumber = (value: number) => {
|
||||||
|
return new Intl.NumberFormat('id-ID').format(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const parseNumber = (value: string) => {
|
||||||
|
return parseInt(value.replace(/\./g, '')) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
anchor='right'
|
||||||
|
variant='temporary'
|
||||||
|
onClose={handleReset}
|
||||||
|
ModalProps={{ keepMounted: true }}
|
||||||
|
sx={{
|
||||||
|
'& .MuiDrawer-paper': {
|
||||||
|
width: { xs: 350, sm: 800 },
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Sticky Header */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderBottom: 1,
|
||||||
|
borderColor: 'divider'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-between plb-5 pli-6'>
|
||||||
|
<Typography variant='h5'>Konversi Unit Bahan</Typography>
|
||||||
|
<IconButton size='small' onClick={handleReset}>
|
||||||
|
<i className='tabler-x text-2xl text-textPrimary' />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Scrollable Content */}
|
||||||
|
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||||
|
<form id='unit-conversion-form' onSubmit={handleSubmit(data => onSubmit(data))}>
|
||||||
|
<div className='flex flex-col gap-6 p-6'>
|
||||||
|
{/* Header Kolom */}
|
||||||
|
<Grid container spacing={2} alignItems='center' className='bg-gray-50 p-3 rounded-lg'>
|
||||||
|
<Grid size={2}>
|
||||||
|
<Typography variant='body2' fontWeight='medium'>
|
||||||
|
Satuan
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={1} className='text-center'>
|
||||||
|
<Typography variant='body2' fontWeight='medium'>
|
||||||
|
=
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={1.5}>
|
||||||
|
<Typography variant='body2' fontWeight='medium'>
|
||||||
|
Jumlah
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={1.5}>
|
||||||
|
<Typography variant='body2' fontWeight='medium'>
|
||||||
|
Unit
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={2}>
|
||||||
|
<Typography variant='body2' fontWeight='medium'>
|
||||||
|
Harga Beli
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={2}>
|
||||||
|
<Typography variant='body2' fontWeight='medium'>
|
||||||
|
Harga Jual
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={1}>
|
||||||
|
<Typography variant='body2' fontWeight='medium'>
|
||||||
|
Default
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={1}>
|
||||||
|
<Typography variant='body2' fontWeight='medium'>
|
||||||
|
Action
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Baris Konversi */}
|
||||||
|
{conversions.map((conversion, index) => (
|
||||||
|
<Grid container spacing={2} alignItems='center' key={index} className='py-2'>
|
||||||
|
<Grid size={0.5}>
|
||||||
|
<Typography variant='body2' color='text.secondary'>
|
||||||
|
{index + 1}
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Satuan */}
|
||||||
|
<Grid size={1.5}>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
fullWidth
|
||||||
|
size='small'
|
||||||
|
value={conversion.satuan}
|
||||||
|
onChange={e => handleChangeConversion(index, 'satuan', e.target.value)}
|
||||||
|
>
|
||||||
|
<MenuItem value='Box'>Box</MenuItem>
|
||||||
|
<MenuItem value='Kg'>Kg</MenuItem>
|
||||||
|
<MenuItem value='Liter'>Liter</MenuItem>
|
||||||
|
<MenuItem value='Pack'>Pack</MenuItem>
|
||||||
|
<MenuItem value='Pcs'>Pcs</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Tanda sama dengan */}
|
||||||
|
<Grid size={1} className='text-center'>
|
||||||
|
<Typography variant='h6'>=</Typography>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Quantity */}
|
||||||
|
<Grid size={1.5}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
size='small'
|
||||||
|
type='number'
|
||||||
|
value={conversion.quantity}
|
||||||
|
onChange={e => handleChangeConversion(index, 'quantity', parseInt(e.target.value) || 0)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Unit */}
|
||||||
|
<Grid size={1.5}>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
fullWidth
|
||||||
|
size='small'
|
||||||
|
value={conversion.unit}
|
||||||
|
onChange={e => handleChangeConversion(index, 'unit', e.target.value)}
|
||||||
|
>
|
||||||
|
<MenuItem value='Pcs'>Pcs</MenuItem>
|
||||||
|
<MenuItem value='Kg'>Kg</MenuItem>
|
||||||
|
<MenuItem value='Gram'>Gram</MenuItem>
|
||||||
|
<MenuItem value='Liter'>Liter</MenuItem>
|
||||||
|
<MenuItem value='ML'>ML</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Harga Beli */}
|
||||||
|
<Grid size={2}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
size='small'
|
||||||
|
value={formatNumber(conversion.hargaBeli)}
|
||||||
|
onChange={e => handleChangeConversion(index, 'hargaBeli', parseNumber(e.target.value))}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Harga Jual */}
|
||||||
|
<Grid size={2}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
size='small'
|
||||||
|
value={formatNumber(conversion.hargaJual)}
|
||||||
|
onChange={e => handleChangeConversion(index, 'hargaJual', parseNumber(e.target.value))}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Default Star */}
|
||||||
|
<Grid size={1} className='text-center'>
|
||||||
|
<IconButton
|
||||||
|
size='small'
|
||||||
|
onClick={() => handleToggleDefault(index)}
|
||||||
|
sx={{
|
||||||
|
color: conversion.isDefault ? 'warning.main' : 'grey.400'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className={conversion.isDefault ? 'tabler-star-filled' : 'tabler-star'} />
|
||||||
|
</IconButton>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Delete Button */}
|
||||||
|
<Grid size={1} className='text-center'>
|
||||||
|
{conversions.length > 1 && (
|
||||||
|
<IconButton
|
||||||
|
size='small'
|
||||||
|
onClick={() => handleHapusBaris(index)}
|
||||||
|
sx={{
|
||||||
|
color: 'error.main',
|
||||||
|
border: 1,
|
||||||
|
borderColor: 'error.main',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'error.light',
|
||||||
|
borderColor: 'error.main'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className='tabler-trash' />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Tambah Baris Button */}
|
||||||
|
<div className='flex items-center justify-start'>
|
||||||
|
<Button
|
||||||
|
variant='outlined'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
onClick={handleTambahBaris}
|
||||||
|
sx={{
|
||||||
|
color: 'primary.main',
|
||||||
|
borderColor: 'primary.main',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'primary.light',
|
||||||
|
borderColor: 'primary.main'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tambah baris
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Sticky Footer */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
bottom: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderTop: 1,
|
||||||
|
borderColor: 'divider',
|
||||||
|
p: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center gap-4'>
|
||||||
|
<Button variant='contained' type='submit' form='unit-conversion-form'>
|
||||||
|
Simpan
|
||||||
|
</Button>
|
||||||
|
<Button variant='tonal' color='error' onClick={() => handleReset()}>
|
||||||
|
Batal
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IngedientUnitConversionDrawer
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { formatCurrency } from '@/utils/transform'
|
||||||
|
import { Card, CardHeader, Chip, Typography } from '@mui/material'
|
||||||
|
|
||||||
|
const IngredientDetailInfo = () => {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<Typography variant='h4' component='h1' className='font-bold'>
|
||||||
|
Tepung Terigu
|
||||||
|
</Typography>
|
||||||
|
<Chip label={'Active'} color={'success'} size='small' />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
subheader={
|
||||||
|
<div className='flex flex-col gap-1 mt-2'>
|
||||||
|
<div className='flex gap-4'>
|
||||||
|
<Typography variant='body2'>
|
||||||
|
<span className='font-semibold'>Cost:</span> {formatCurrency(5000)}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IngredientDetailInfo
|
||||||
@ -0,0 +1,454 @@
|
|||||||
|
'use client'
|
||||||
|
// React Imports
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Drawer from '@mui/material/Drawer'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import Box from '@mui/material/Box'
|
||||||
|
import Radio from '@mui/material/Radio'
|
||||||
|
import RadioGroup from '@mui/material/RadioGroup'
|
||||||
|
import FormControlLabel from '@mui/material/FormControlLabel'
|
||||||
|
import FormControl from '@mui/material/FormControl'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import { useForm, Controller } from 'react-hook-form'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
open: boolean
|
||||||
|
handleClose: () => void
|
||||||
|
setData?: (data: any) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
type StockAdjustmentType = {
|
||||||
|
tipeStok: 'perhitungan' | 'stokMasukKeluar'
|
||||||
|
gudang: string
|
||||||
|
tanggal: string
|
||||||
|
akun: string
|
||||||
|
nomor: string
|
||||||
|
referensi: string
|
||||||
|
tag: string
|
||||||
|
qtyTercatat: number
|
||||||
|
satuan: string
|
||||||
|
qtyAktual: number
|
||||||
|
selisih: number
|
||||||
|
hargaRataRata: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type FormValidateType = StockAdjustmentType
|
||||||
|
|
||||||
|
// Vars
|
||||||
|
const initialData: StockAdjustmentType = {
|
||||||
|
tipeStok: 'perhitungan',
|
||||||
|
gudang: '',
|
||||||
|
tanggal: '11/09/2025',
|
||||||
|
akun: '8-80100 Penyesuaian Persediaan',
|
||||||
|
nomor: 'SA/00007',
|
||||||
|
referensi: '',
|
||||||
|
tag: '',
|
||||||
|
qtyTercatat: 0,
|
||||||
|
satuan: 'Pcs',
|
||||||
|
qtyAktual: 0,
|
||||||
|
selisih: 0,
|
||||||
|
hargaRataRata: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const IngredientDetailStockAdjustmentDrawer = (props: Props) => {
|
||||||
|
// Props
|
||||||
|
const { open, handleClose, setData } = props
|
||||||
|
|
||||||
|
// States
|
||||||
|
const [formData, setFormData] = useState<StockAdjustmentType>(initialData)
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
reset: resetForm,
|
||||||
|
handleSubmit,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
formState: { errors }
|
||||||
|
} = useForm<FormValidateType>({
|
||||||
|
defaultValues: initialData
|
||||||
|
})
|
||||||
|
|
||||||
|
// Watch values untuk kalkulasi otomatis
|
||||||
|
const qtyTercatat = watch('qtyTercatat')
|
||||||
|
const qtyAktual = watch('qtyAktual')
|
||||||
|
|
||||||
|
// Kalkulasi selisih otomatis
|
||||||
|
useEffect(() => {
|
||||||
|
const selisih = qtyAktual - qtyTercatat
|
||||||
|
setValue('selisih', selisih)
|
||||||
|
}, [qtyTercatat, qtyAktual, setValue])
|
||||||
|
|
||||||
|
const onSubmit = (data: FormValidateType) => {
|
||||||
|
console.log('Stock adjustment data:', data)
|
||||||
|
if (setData) {
|
||||||
|
setData(data)
|
||||||
|
}
|
||||||
|
handleClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
handleClose()
|
||||||
|
resetForm(initialData)
|
||||||
|
setFormData(initialData)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatNumber = (value: number) => {
|
||||||
|
return new Intl.NumberFormat('id-ID').format(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const parseNumber = (value: string) => {
|
||||||
|
return parseInt(value.replace(/\./g, '')) || 0
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
anchor='right'
|
||||||
|
variant='temporary'
|
||||||
|
onClose={handleReset}
|
||||||
|
ModalProps={{ keepMounted: true }}
|
||||||
|
sx={{
|
||||||
|
'& .MuiDrawer-paper': {
|
||||||
|
width: { xs: 400, sm: 600 },
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Sticky Header */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderBottom: 1,
|
||||||
|
borderColor: 'divider'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-between plb-5 pli-6'>
|
||||||
|
<Typography variant='h5'>Penyesuaian Stok</Typography>
|
||||||
|
<IconButton size='small' onClick={handleReset}>
|
||||||
|
<i className='tabler-x text-2xl text-textPrimary' />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Scrollable Content */}
|
||||||
|
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||||
|
<form id='stock-adjustment-form' onSubmit={handleSubmit(data => onSubmit(data))}>
|
||||||
|
<div className='flex flex-col gap-6 p-6'>
|
||||||
|
{/* Tipe Penyesuaian Stok */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-3' sx={{ color: 'error.main' }}>
|
||||||
|
* Tipe penyesuaian stok
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='tipeStok'
|
||||||
|
control={control}
|
||||||
|
rules={{ required: true }}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormControl component='fieldset'>
|
||||||
|
<RadioGroup {...field} row sx={{ gap: 4 }}>
|
||||||
|
<FormControlLabel
|
||||||
|
value='perhitungan'
|
||||||
|
control={<Radio />}
|
||||||
|
label={
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<Typography>Perhitungan Stok</Typography>
|
||||||
|
<IconButton size='small' sx={{ color: 'text.secondary' }}>
|
||||||
|
<i className='tabler-help-circle' style={{ fontSize: '16px' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
value='stokMasukKeluar'
|
||||||
|
control={<Radio />}
|
||||||
|
label={
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<Typography>Stok Masuk / Keluar</Typography>
|
||||||
|
<IconButton size='small' sx={{ color: 'text.secondary' }}>
|
||||||
|
<i className='tabler-help-circle' style={{ fontSize: '16px' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gudang dan Tanggal */}
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
|
||||||
|
* Gudang
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='gudang'
|
||||||
|
control={control}
|
||||||
|
rules={{ required: true }}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
select
|
||||||
|
fullWidth
|
||||||
|
placeholder='Pilih gudang'
|
||||||
|
{...(errors.gudang && { error: true, helperText: 'Field ini wajib diisi.' })}
|
||||||
|
>
|
||||||
|
<MenuItem value=''>Pilih gudang</MenuItem>
|
||||||
|
<MenuItem value='Gudang Utama'>Gudang Utama</MenuItem>
|
||||||
|
<MenuItem value='Gudang Cabang'>Gudang Cabang</MenuItem>
|
||||||
|
<MenuItem value='Gudang Produksi'>Gudang Produksi</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
|
||||||
|
* Tanggal
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='tanggal'
|
||||||
|
control={control}
|
||||||
|
rules={{ required: true }}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
type='date'
|
||||||
|
{...(errors.tanggal && { error: true, helperText: 'Field ini wajib diisi.' })}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Akun dan Nomor */}
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
|
||||||
|
* Akun
|
||||||
|
<IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
|
||||||
|
<i className='tabler-help-circle' style={{ fontSize: '16px' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='akun'
|
||||||
|
control={control}
|
||||||
|
rules={{ required: true }}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
select
|
||||||
|
fullWidth
|
||||||
|
{...(errors.akun && { error: true, helperText: 'Field ini wajib diisi.' })}
|
||||||
|
>
|
||||||
|
<MenuItem value='8-80100 Penyesuaian Persediaan'>8-80100 Penyesuaian Persediaan</MenuItem>
|
||||||
|
<MenuItem value='8-80200 Penyesuaian Stok Rusak'>8-80200 Penyesuaian Stok Rusak</MenuItem>
|
||||||
|
<MenuItem value='8-80300 Penyesuaian Stok Hilang'>8-80300 Penyesuaian Stok Hilang</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Nomor
|
||||||
|
<IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
|
||||||
|
<i className='tabler-help-circle' style={{ fontSize: '16px' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='nomor'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => <CustomTextField {...field} fullWidth placeholder='SA/00007' />}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Referensi dan Tag */}
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Referensi
|
||||||
|
<IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
|
||||||
|
<i className='tabler-help-circle' style={{ fontSize: '16px' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='referensi'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => <CustomTextField {...field} fullWidth placeholder='Referensi' />}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={6}>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Tag
|
||||||
|
<IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
|
||||||
|
<i className='tabler-help-circle' style={{ fontSize: '16px' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='tag'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField {...field} select fullWidth placeholder='Pilih Tag'>
|
||||||
|
<MenuItem value=''>Pilih Tag</MenuItem>
|
||||||
|
<MenuItem value='Urgent'>Urgent</MenuItem>
|
||||||
|
<MenuItem value='Regular'>Regular</MenuItem>
|
||||||
|
<MenuItem value='Maintenance'>Maintenance</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Stock Details Section */}
|
||||||
|
<Box sx={{ mt: 4 }}>
|
||||||
|
<Grid container spacing={2} alignItems='end'>
|
||||||
|
{/* Qty Tercatat */}
|
||||||
|
<Grid size={2}>
|
||||||
|
<Typography variant='body2' className='mb-2 font-medium'>
|
||||||
|
Qty Tercatat
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='qtyTercatat'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
type='number'
|
||||||
|
onChange={e => field.onChange(parseInt(e.target.value) || 0)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Satuan */}
|
||||||
|
<Grid size={2}>
|
||||||
|
<Typography variant='body2' className='mb-2 font-medium'>
|
||||||
|
Satuan
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='satuan'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField {...field} select fullWidth>
|
||||||
|
<MenuItem value='Pcs'>Pcs</MenuItem>
|
||||||
|
<MenuItem value='Kg'>Kg</MenuItem>
|
||||||
|
<MenuItem value='Liter'>Liter</MenuItem>
|
||||||
|
<MenuItem value='Box'>Box</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Qty Aktual */}
|
||||||
|
<Grid size={2}>
|
||||||
|
<Typography variant='body2' className='mb-2 font-medium'>
|
||||||
|
Qty Aktual
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='qtyAktual'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
type='number'
|
||||||
|
onChange={e => field.onChange(parseInt(e.target.value) || 0)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Selisih */}
|
||||||
|
<Grid size={2}>
|
||||||
|
<Typography variant='body2' className='mb-2 font-medium'>
|
||||||
|
Selisih
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='selisih'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
type='number'
|
||||||
|
disabled
|
||||||
|
sx={{
|
||||||
|
'& .MuiInputBase-input.Mui-disabled': {
|
||||||
|
WebkitTextFillColor: 'text.primary',
|
||||||
|
backgroundColor: 'grey.100'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Harga Rata-rata */}
|
||||||
|
<Grid size={4}>
|
||||||
|
<Typography variant='body2' className='mb-2 font-medium'>
|
||||||
|
Harga Rata-rata
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='hargaRataRata'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
value={formatNumber(field.value)}
|
||||||
|
onChange={e => field.onChange(parseNumber(e.target.value))}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Sticky Footer */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
bottom: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderTop: 1,
|
||||||
|
borderColor: 'divider',
|
||||||
|
p: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center gap-4'>
|
||||||
|
<Button variant='contained' type='submit' form='stock-adjustment-form'>
|
||||||
|
Simpan
|
||||||
|
</Button>
|
||||||
|
<Button variant='tonal' color='error' onClick={() => handleReset()}>
|
||||||
|
Batal
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IngredientDetailStockAdjustmentDrawer
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
'use client'
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { Card, CardContent, CardHeader, Typography, Button, Box, Stack } from '@mui/material'
|
||||||
|
import IngedientUnitConversionDrawer from './IngedientUnitConversionDrawer' // Sesuaikan dengan path file Anda
|
||||||
|
|
||||||
|
const IngredientDetailUnit = () => {
|
||||||
|
// State untuk mengontrol drawer
|
||||||
|
const [openConversionDrawer, setOpenConversionDrawer] = useState(false)
|
||||||
|
|
||||||
|
// Function untuk membuka drawer
|
||||||
|
const handleOpenConversionDrawer = () => {
|
||||||
|
setOpenConversionDrawer(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function untuk menutup drawer
|
||||||
|
const handleCloseConversionDrawer = () => {
|
||||||
|
setOpenConversionDrawer(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function untuk handle data dari drawer (opsional)
|
||||||
|
const handleSetConversionData = (data: any) => {
|
||||||
|
console.log('Conversion data received:', data)
|
||||||
|
// Anda bisa menambahkan logic untuk mengupdate state atau API call di sini
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card sx={{ maxWidth: 400 }}>
|
||||||
|
<CardHeader title='Satuan' />
|
||||||
|
<CardContent>
|
||||||
|
<Stack spacing={2} sx={{ mb: 3 }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Typography variant='body1' color='text.secondary'>
|
||||||
|
Satuan Dasar
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||||||
|
: Pcs
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
fullWidth
|
||||||
|
startIcon={<span style={{ fontSize: '18px' }}>+</span>}
|
||||||
|
onClick={handleOpenConversionDrawer}
|
||||||
|
sx={{
|
||||||
|
py: 1.5,
|
||||||
|
borderRadius: 2,
|
||||||
|
textTransform: 'none',
|
||||||
|
fontSize: '16px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Ubah konversi satuan
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Ingredient Unit Conversion Drawer */}
|
||||||
|
<IngedientUnitConversionDrawer
|
||||||
|
open={openConversionDrawer}
|
||||||
|
handleClose={handleCloseConversionDrawer}
|
||||||
|
setData={handleSetConversionData}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IngredientDetailUnit
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import IngredientDetailInfo from './IngredientDetailInfo'
|
||||||
|
import IngredientDetailUnit from './IngredientDetailUnit'
|
||||||
|
import IngredientDetailStockAdjustmentDrawer from './IngredientDetailStockAdjustmentDrawer' // Sesuaikan dengan path file Anda
|
||||||
|
import { Button } from '@mui/material'
|
||||||
|
|
||||||
|
const IngredientDetail = () => {
|
||||||
|
// State untuk mengontrol stock adjustment drawer
|
||||||
|
const [openStockAdjustmentDrawer, setOpenStockAdjustmentDrawer] = useState(false)
|
||||||
|
|
||||||
|
// Function untuk membuka stock adjustment drawer
|
||||||
|
const handleOpenStockAdjustmentDrawer = () => {
|
||||||
|
setOpenStockAdjustmentDrawer(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function untuk menutup stock adjustment drawer
|
||||||
|
const handleCloseStockAdjustmentDrawer = () => {
|
||||||
|
setOpenStockAdjustmentDrawer(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function untuk handle data dari stock adjustment drawer
|
||||||
|
const handleSetStockAdjustmentData = (data: any) => {
|
||||||
|
console.log('Stock adjustment data received:', data)
|
||||||
|
// Anda bisa menambahkan logic untuk mengupdate state atau API call di sini
|
||||||
|
// Misalnya: update stock data, refresh ingredient data, dll.
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12, lg: 8, md: 7 }}>
|
||||||
|
<IngredientDetailInfo />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12, lg: 4, md: 5 }}>
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
fullWidth
|
||||||
|
startIcon={<span style={{ fontSize: '18px' }}>+</span>}
|
||||||
|
onClick={handleOpenStockAdjustmentDrawer}
|
||||||
|
className='mb-4'
|
||||||
|
sx={{
|
||||||
|
py: 1.5,
|
||||||
|
borderRadius: 2,
|
||||||
|
textTransform: 'none',
|
||||||
|
fontSize: '16px',
|
||||||
|
mb: 3 // Menambahkan margin bottom untuk spacing
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Penyesuaian Stok
|
||||||
|
</Button>
|
||||||
|
<IngredientDetailUnit />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Stock Adjustment Drawer */}
|
||||||
|
<IngredientDetailStockAdjustmentDrawer
|
||||||
|
open={openStockAdjustmentDrawer}
|
||||||
|
handleClose={handleCloseStockAdjustmentDrawer}
|
||||||
|
setData={handleSetStockAdjustmentData}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IngredientDetail
|
||||||
137
src/views/apps/expense/add/ExpenseAddAccount.tsx
Normal file
137
src/views/apps/expense/add/ExpenseAddAccount.tsx
Normal file
@ -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
|
||||||
166
src/views/apps/expense/add/ExpenseAddBasicInfo.tsx
Normal file
166
src/views/apps/expense/add/ExpenseAddBasicInfo.tsx
Normal file
@ -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
|
||||||
149
src/views/apps/expense/add/ExpenseAddForm.tsx
Normal file
149
src/views/apps/expense/add/ExpenseAddForm.tsx
Normal file
@ -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
|
||||||
19
src/views/apps/expense/add/ExpenseAddHeader.tsx
Normal file
19
src/views/apps/expense/add/ExpenseAddHeader.tsx
Normal file
@ -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
|
||||||
198
src/views/apps/expense/add/ExpenseAddSummary.tsx
Normal file
198
src/views/apps/expense/add/ExpenseAddSummary.tsx
Normal file
@ -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
|
||||||
22
src/views/apps/expense/detail/ExpenseDetailContent.tsx
Normal file
22
src/views/apps/expense/detail/ExpenseDetailContent.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import ExpenseDetailInformation from './ExpenseDetailInformation'
|
||||||
|
import ExpenseDetailSendPayment from './ExpenseDetailSendPayment'
|
||||||
|
import ExpenseDetailLog from './ExpenseDetailLog'
|
||||||
|
|
||||||
|
const ExpenseDetailContent = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ExpenseDetailInformation />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ExpenseDetailSendPayment />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ExpenseDetailLog />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseDetailContent
|
||||||
15
src/views/apps/expense/detail/ExpenseDetailHeader.tsx
Normal file
15
src/views/apps/expense/detail/ExpenseDetailHeader.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Typography } from '@mui/material'
|
||||||
|
|
||||||
|
const ExpenseDetailHeader = () => {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
|
||||||
|
<div>
|
||||||
|
<Typography variant='h4' className='mbe-1'>
|
||||||
|
Detail Biaya
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseDetailHeader
|
||||||
265
src/views/apps/expense/detail/ExpenseDetailInformation.tsx
Normal file
265
src/views/apps/expense/detail/ExpenseDetailInformation.tsx
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Card, CardHeader, CardContent, Typography, Box, Button, IconButton } from '@mui/material'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
interface Product {
|
||||||
|
produk: string
|
||||||
|
deskripsi: string
|
||||||
|
kuantitas: number
|
||||||
|
satuan: string
|
||||||
|
discount: string
|
||||||
|
harga: number
|
||||||
|
pajak: string
|
||||||
|
jumlah: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PurchaseData {
|
||||||
|
vendor: string
|
||||||
|
nomor: string
|
||||||
|
tglTransaksi: string
|
||||||
|
tglJatuhTempo: string
|
||||||
|
gudang: string
|
||||||
|
status: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ExpenseDetailInformation: React.FC = () => {
|
||||||
|
const purchaseData: PurchaseData = {
|
||||||
|
vendor: 'Bagas Rizki Sihotang S.Farm Widodo',
|
||||||
|
nomor: 'PI/00053',
|
||||||
|
tglTransaksi: '08/09/2025',
|
||||||
|
tglJatuhTempo: '06/10/2025',
|
||||||
|
gudang: 'Unassigned',
|
||||||
|
status: 'Belum Dibayar'
|
||||||
|
}
|
||||||
|
|
||||||
|
const products: Product[] = [
|
||||||
|
{
|
||||||
|
produk: 'Komisi penjualan tim IT',
|
||||||
|
deskripsi: '6-60002 - Komisi & Fee (PPN)',
|
||||||
|
kuantitas: 1,
|
||||||
|
satuan: 'Pcs',
|
||||||
|
discount: '0%',
|
||||||
|
harga: 810000,
|
||||||
|
pajak: 'PPN',
|
||||||
|
jumlah: 810000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
produk: 'Hotel Ibis 3 Malam, Surabaya',
|
||||||
|
deskripsi: '6-60004 - Perjalanan Dinas - Penjualan (PPN)',
|
||||||
|
kuantitas: 1,
|
||||||
|
satuan: 'Pcs',
|
||||||
|
discount: '0%',
|
||||||
|
harga: 400000,
|
||||||
|
pajak: 'PPN',
|
||||||
|
jumlah: 400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
produk: 'Biaya telp fixed',
|
||||||
|
deskripsi: '6-60005 - Komunikasi - Penjualan',
|
||||||
|
kuantitas: 1,
|
||||||
|
satuan: 'Pcs',
|
||||||
|
discount: '0%',
|
||||||
|
harga: 950000,
|
||||||
|
pajak: 'PPN',
|
||||||
|
jumlah: 950000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const subTotal: number = products.reduce((sum, product) => sum + product.jumlah, 0)
|
||||||
|
const ppn: number = Math.round(subTotal * 0.11)
|
||||||
|
const total: number = subTotal + ppn
|
||||||
|
const sisaTagihan: number = total
|
||||||
|
|
||||||
|
const formatCurrency = (amount: number): string => {
|
||||||
|
return new Intl.NumberFormat('id-ID').format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card sx={{ width: '100%' }}>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<Box display='flex' justifyContent='space-between' alignItems='center'>
|
||||||
|
<Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Belum Dibayar
|
||||||
|
</Typography>
|
||||||
|
<Box>
|
||||||
|
<Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
||||||
|
Bagikan
|
||||||
|
</Button>
|
||||||
|
<Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
||||||
|
Print
|
||||||
|
</Button>
|
||||||
|
<IconButton>
|
||||||
|
<i className='tabler-dots-vertical' />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
{/* Purchase Information */}
|
||||||
|
<Grid container spacing={3} sx={{ mb: 4 }}>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ mb: 2 }}>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Penerima
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
|
||||||
|
{purchaseData.vendor}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ mb: 2 }}>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Tgl. Transaksi
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1'>{purchaseData.tglTransaksi}</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ mb: 2 }}>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Nomor
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1'>{purchaseData.nomor}</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
<Typography variant='subtitle2' color='text.secondary'>
|
||||||
|
Tgl. Jatuh Tempo
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1'>{purchaseData.tglJatuhTempo}</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Products List */}
|
||||||
|
<Box sx={{ mb: 4 }}>
|
||||||
|
{products.map((product, index) => (
|
||||||
|
<Box
|
||||||
|
key={index}
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
py: 2,
|
||||||
|
borderBottom: index === products.length - 1 ? 'none' : '1px solid #f0f0f0'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ flex: 1 }}>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'medium', mb: 0.5 }}>
|
||||||
|
{product.produk}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
|
||||||
|
{product.deskripsi}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ textAlign: 'right', ml: 3 }}>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||||||
|
{formatCurrency(product.jumlah)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Summary Section */}
|
||||||
|
<Box sx={{ mt: 3 }}>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
py: 2,
|
||||||
|
borderBottom: '1px solid #e0e0e0',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||||||
|
transition: 'background-color 0.15s ease'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||||||
|
Sub Total
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||||||
|
{formatCurrency(subTotal)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
py: 2,
|
||||||
|
borderBottom: '1px solid #e0e0e0',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||||||
|
transition: 'background-color 0.15s ease'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||||||
|
PPN
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||||||
|
{formatCurrency(ppn)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
py: 2,
|
||||||
|
borderBottom: '1px solid #e0e0e0',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||||||
|
transition: 'background-color 0.15s ease'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body1' sx={{ fontWeight: 'bold' }}>
|
||||||
|
{formatCurrency(total)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
py: 2,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||||||
|
transition: 'background-color 0.15s ease'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Sisa Tagihan
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
{formatCurrency(sisaTagihan)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseDetailInformation
|
||||||
59
src/views/apps/expense/detail/ExpenseDetailLog.tsx
Normal file
59
src/views/apps/expense/detail/ExpenseDetailLog.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material'
|
||||||
|
|
||||||
|
interface LogEntry {
|
||||||
|
id: string
|
||||||
|
action: string
|
||||||
|
timestamp: string
|
||||||
|
user: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ExpenseDetailLog: React.FC = () => {
|
||||||
|
const logEntries: LogEntry[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
action: 'Terakhir diubah oleh',
|
||||||
|
timestamp: '08 Sep 2025 18:26',
|
||||||
|
user: 'pada'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Pantau log perubahan data
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
sx={{ pb: 1 }}
|
||||||
|
/>
|
||||||
|
<CardContent sx={{ mt: 5 }}>
|
||||||
|
{logEntries.map(entry => (
|
||||||
|
<Box key={entry.id} sx={{ mb: 2 }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<i className='tabler-edit' style={{ fontSize: '16px', color: '#1976d2' }} />
|
||||||
|
<Link
|
||||||
|
href='#'
|
||||||
|
underline='hover'
|
||||||
|
color='primary'
|
||||||
|
sx={{
|
||||||
|
textDecoration: 'none',
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{entry.action} {entry.user} {entry.timestamp}
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseDetailLog
|
||||||
431
src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx
Normal file
431
src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx
Normal file
@ -0,0 +1,431 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
Box,
|
||||||
|
Accordion,
|
||||||
|
AccordionSummary,
|
||||||
|
AccordionDetails,
|
||||||
|
Tooltip,
|
||||||
|
IconButton,
|
||||||
|
CardHeader
|
||||||
|
} from '@mui/material'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import CustomTextField from '@/@core/components/mui/TextField'
|
||||||
|
import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
|
||||||
|
import ImageUpload from '@/components/ImageUpload'
|
||||||
|
|
||||||
|
interface PaymentFormData {
|
||||||
|
totalDibayar: string
|
||||||
|
tglTransaksi: string
|
||||||
|
referensi: string
|
||||||
|
nomor: string
|
||||||
|
dibayarDari: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PemotonganItem {
|
||||||
|
id: string
|
||||||
|
dipotong: string
|
||||||
|
persentase: string
|
||||||
|
nominal: string
|
||||||
|
tipe: 'persen' | 'rupiah'
|
||||||
|
}
|
||||||
|
|
||||||
|
const ExpenseDetailSendPayment: React.FC = () => {
|
||||||
|
const [formData, setFormData] = useState<PaymentFormData>({
|
||||||
|
totalDibayar: '849.000',
|
||||||
|
tglTransaksi: '10/09/2025',
|
||||||
|
referensi: '',
|
||||||
|
nomor: 'PP/00025',
|
||||||
|
dibayarDari: '1-10001 Kas'
|
||||||
|
})
|
||||||
|
|
||||||
|
const [expanded, setExpanded] = useState<boolean>(false)
|
||||||
|
const [pemotonganItems, setPemotonganItems] = useState<PemotonganItem[]>([])
|
||||||
|
|
||||||
|
const dibayarDariOptions = [
|
||||||
|
{ label: '1-10001 Kas', value: '1-10001 Kas' },
|
||||||
|
{ label: '1-10002 Bank BCA', value: '1-10002 Bank BCA' },
|
||||||
|
{ label: '1-10003 Bank Mandiri', value: '1-10003 Bank Mandiri' },
|
||||||
|
{ label: '1-10004 Petty Cash', value: '1-10004 Petty Cash' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const pemotonganOptions = [
|
||||||
|
{ label: 'PPN 11%', value: 'ppn' },
|
||||||
|
{ label: 'PPh 21', value: 'pph21' },
|
||||||
|
{ label: 'PPh 23', value: 'pph23' },
|
||||||
|
{ label: 'Biaya Admin', value: 'admin' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const handleChange =
|
||||||
|
(field: keyof PaymentFormData) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | any) => {
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[field]: event.target.value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDibayarDariChange = (value: { label: string; value: string } | null) => {
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
dibayarDari: value?.value || ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const addPemotongan = () => {
|
||||||
|
const newItem: PemotonganItem = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
dipotong: '',
|
||||||
|
persentase: '0',
|
||||||
|
nominal: '',
|
||||||
|
tipe: 'persen'
|
||||||
|
}
|
||||||
|
setPemotonganItems(prev => [...prev, newItem])
|
||||||
|
}
|
||||||
|
|
||||||
|
const removePemotongan = (id: string) => {
|
||||||
|
setPemotonganItems(prev => prev.filter(item => item.id !== id))
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatePemotongan = (id: string, field: keyof PemotonganItem, value: string) => {
|
||||||
|
setPemotonganItems(prev => prev.map(item => (item.id === id ? { ...item, [field]: value } : item)))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAccordionChange = () => {
|
||||||
|
setExpanded(!expanded)
|
||||||
|
}
|
||||||
|
|
||||||
|
const calculatePemotongan = (item: PemotonganItem): number => {
|
||||||
|
const totalDibayar = parseInt(formData.totalDibayar.replace(/\D/g, '')) || 0
|
||||||
|
const nilai = parseFloat(item.persentase) || 0
|
||||||
|
|
||||||
|
if (item.tipe === 'persen') {
|
||||||
|
return (totalDibayar * nilai) / 100
|
||||||
|
} else {
|
||||||
|
return nilai
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatCurrency = (amount: string | number): string => {
|
||||||
|
const numAmount = typeof amount === 'string' ? parseInt(amount.replace(/\D/g, '')) : amount
|
||||||
|
return new Intl.NumberFormat('id-ID').format(numAmount)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUpload = async (file: File): Promise<string> => {
|
||||||
|
// Simulate upload
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve(URL.createObjectURL(file))
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
title={
|
||||||
|
<Box display='flex' justifyContent='space-between' alignItems='center'>
|
||||||
|
<Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Kirim Pembayaran
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<CardContent>
|
||||||
|
<Grid container spacing={3}>
|
||||||
|
{/* Left Column */}
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
{/* Total Dibayar */}
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
label={
|
||||||
|
<span>
|
||||||
|
<span style={{ color: 'red' }}>*</span> Total Dibayar
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
value={formData.totalDibayar}
|
||||||
|
onChange={handleChange('totalDibayar')}
|
||||||
|
sx={{
|
||||||
|
'& .MuiInputBase-root': {
|
||||||
|
textAlign: 'right'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Tgl. Transaksi */}
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
label={
|
||||||
|
<span>
|
||||||
|
<span style={{ color: 'red' }}>*</span> Tgl. Transaksi
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
type='date'
|
||||||
|
value={formData.tglTransaksi.split('/').reverse().join('-')}
|
||||||
|
onChange={handleChange('tglTransaksi')}
|
||||||
|
slotProps={{
|
||||||
|
input: {
|
||||||
|
endAdornment: <i className='tabler-calendar' style={{ color: '#666' }} />
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Referensi */}
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
||||||
|
<Typography variant='body2' sx={{ color: 'text.secondary' }}>
|
||||||
|
Referensi
|
||||||
|
</Typography>
|
||||||
|
<Tooltip title='Informasi referensi pembayaran'>
|
||||||
|
<IconButton size='small' sx={{ ml: 0.5 }}>
|
||||||
|
<i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
placeholder='Referensi'
|
||||||
|
value={formData.referensi}
|
||||||
|
onChange={handleChange('referensi')}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Attachment Accordion */}
|
||||||
|
<Accordion
|
||||||
|
expanded={expanded}
|
||||||
|
onChange={handleAccordionChange}
|
||||||
|
sx={{
|
||||||
|
boxShadow: 'none',
|
||||||
|
border: '1px solid #e0e0e0',
|
||||||
|
borderRadius: '8px',
|
||||||
|
'&:before': { display: 'none' }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AccordionSummary
|
||||||
|
expandIcon={
|
||||||
|
<i
|
||||||
|
className='tabler-chevron-right'
|
||||||
|
style={{
|
||||||
|
transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
|
||||||
|
transition: 'transform 0.2s'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#f8f9fa',
|
||||||
|
borderRadius: '8px',
|
||||||
|
minHeight: '48px',
|
||||||
|
'& .MuiAccordionSummary-content': {
|
||||||
|
margin: '12px 0'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='body2' sx={{ fontWeight: 'medium' }}>
|
||||||
|
Attachment
|
||||||
|
</Typography>
|
||||||
|
</AccordionSummary>
|
||||||
|
<AccordionDetails sx={{ p: 2 }}>
|
||||||
|
<ImageUpload
|
||||||
|
onUpload={handleUpload}
|
||||||
|
maxFileSize={1 * 1024 * 1024} // 1MB
|
||||||
|
showUrlOption={false}
|
||||||
|
dragDropText='Drop your image here'
|
||||||
|
browseButtonText='Choose Image'
|
||||||
|
/>
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
{/* Nomor */}
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
||||||
|
<Typography variant='body2' sx={{ color: 'text.secondary' }}>
|
||||||
|
Nomor
|
||||||
|
</Typography>
|
||||||
|
<Tooltip title='Nomor pembayaran otomatis'>
|
||||||
|
<IconButton size='small' sx={{ ml: 0.5 }}>
|
||||||
|
<i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
<CustomTextField fullWidth value={formData.nomor} onChange={handleChange('nomor')} disabled />
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Dibayar Dari */}
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<Typography variant='body2' sx={{ color: 'text.secondary', mb: 1 }}>
|
||||||
|
<span style={{ color: 'red' }}>*</span> Dibayar Dari
|
||||||
|
</Typography>
|
||||||
|
<CustomAutocomplete
|
||||||
|
fullWidth
|
||||||
|
options={dibayarDariOptions}
|
||||||
|
getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
|
||||||
|
value={dibayarDariOptions.find(option => option.value === formData.dibayarDari) || null}
|
||||||
|
onChange={(_, value: { label: string; value: string } | null) => handleDibayarDariChange(value)}
|
||||||
|
renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih akun pembayaran' />}
|
||||||
|
noOptionsText='Tidak ada pilihan'
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Empty space to match Referensi height */}
|
||||||
|
<Box sx={{ mb: 3, height: '74px' }}>{/* Empty space */}</Box>
|
||||||
|
|
||||||
|
{/* Pemotongan Button - aligned with Attachment */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
minHeight: '48px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
variant='text'
|
||||||
|
color='primary'
|
||||||
|
sx={{ textTransform: 'none' }}
|
||||||
|
onClick={addPemotongan}
|
||||||
|
>
|
||||||
|
Pemotongan
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Pemotongan Items */}
|
||||||
|
{pemotonganItems.length > 0 && (
|
||||||
|
<Box sx={{ mt: 3 }}>
|
||||||
|
{pemotonganItems.map((item, index) => (
|
||||||
|
<Box
|
||||||
|
key={item.id}
|
||||||
|
sx={{
|
||||||
|
mb: 2,
|
||||||
|
p: 2,
|
||||||
|
border: '1px solid #e0e0e0',
|
||||||
|
borderRadius: 1,
|
||||||
|
position: 'relative'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid container spacing={2} alignItems='center'>
|
||||||
|
<Grid size={{ xs: 12, md: 1 }}>
|
||||||
|
<IconButton
|
||||||
|
color='error'
|
||||||
|
size='small'
|
||||||
|
onClick={() => removePemotongan(item.id)}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
border: '1px solid #f44336',
|
||||||
|
'&:hover': { backgroundColor: '#ffebee' }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className='tabler-minus' style={{ fontSize: '16px' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 4 }}>
|
||||||
|
<CustomAutocomplete
|
||||||
|
fullWidth
|
||||||
|
options={pemotonganOptions}
|
||||||
|
getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
|
||||||
|
value={pemotonganOptions.find(option => option.value === item.dipotong) || null}
|
||||||
|
onChange={(_, value: { label: string; value: string } | null) =>
|
||||||
|
updatePemotongan(item.id, 'dipotong', value?.value || '')
|
||||||
|
}
|
||||||
|
renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih dipotong...' />}
|
||||||
|
noOptionsText='Tidak ada pilihan'
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 2 }}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
value={item.persentase}
|
||||||
|
onChange={e => updatePemotongan(item.id, 'persentase', e.target.value)}
|
||||||
|
placeholder='0'
|
||||||
|
sx={{
|
||||||
|
'& .MuiInputBase-root': {
|
||||||
|
textAlign: 'center'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 1 }}>
|
||||||
|
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||||
|
<Button
|
||||||
|
variant={item.tipe === 'persen' ? 'contained' : 'outlined'}
|
||||||
|
size='small'
|
||||||
|
onClick={() => updatePemotongan(item.id, 'tipe', 'persen')}
|
||||||
|
sx={{ minWidth: '40px', px: 1 }}
|
||||||
|
>
|
||||||
|
%
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={item.tipe === 'rupiah' ? 'contained' : 'outlined'}
|
||||||
|
size='small'
|
||||||
|
onClick={() => updatePemotongan(item.id, 'tipe', 'rupiah')}
|
||||||
|
sx={{ minWidth: '40px', px: 1 }}
|
||||||
|
>
|
||||||
|
Rp
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 4 }}>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
{formatCurrency(calculatePemotongan(item))}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bottom Section */}
|
||||||
|
<Box sx={{ mt: 4, pt: 3, borderTop: '1px solid #e0e0e0' }}>
|
||||||
|
<Grid container spacing={2} alignItems='center'>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>{/* Empty space */}</Grid>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||||
|
{formatCurrency(formData.totalDibayar)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
fullWidth
|
||||||
|
sx={{
|
||||||
|
py: 1.5,
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 'medium'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tambah Pembayaran
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseDetailSendPayment
|
||||||
51
src/views/apps/expense/list/ExpenseListCard.tsx
Normal file
51
src/views/apps/expense/list/ExpenseListCard.tsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
// MUI Imports
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
// Types Imports
|
||||||
|
import type { CardStatsHorizontalWithAvatarProps } from '@/types/pages/widgetTypes'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CardStatsHorizontalWithAvatar from '@components/card-statistics/HorizontalWithAvatar'
|
||||||
|
|
||||||
|
const data: CardStatsHorizontalWithAvatarProps[] = [
|
||||||
|
{
|
||||||
|
stats: '10.495.100',
|
||||||
|
title: 'Bulan Ini',
|
||||||
|
avatarIcon: 'tabler-calendar-month',
|
||||||
|
avatarColor: 'warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stats: '25.868.800',
|
||||||
|
title: '30 Hari Lalu',
|
||||||
|
avatarIcon: 'tabler-calendar-time',
|
||||||
|
avatarColor: 'error'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stats: '17.903.400',
|
||||||
|
title: 'Belum Dibayar',
|
||||||
|
avatarIcon: 'tabler-clock-exclamation',
|
||||||
|
avatarColor: 'warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stats: '13.467.200',
|
||||||
|
title: 'Jatuh Tempo',
|
||||||
|
avatarIcon: 'tabler-calendar-due',
|
||||||
|
avatarColor: 'success'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const ExpenseListCard = () => {
|
||||||
|
return (
|
||||||
|
data && (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
{data.map((item, index) => (
|
||||||
|
<Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
|
||||||
|
<CardStatsHorizontalWithAvatar {...item} avatarSkin='light' />
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseListCard
|
||||||
519
src/views/apps/expense/list/ExpenseListTable.tsx
Normal file
519
src/views/apps/expense/list/ExpenseListTable.tsx
Normal file
@ -0,0 +1,519 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// React Imports
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||||
|
|
||||||
|
// Next Imports
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Card from '@mui/material/Card'
|
||||||
|
import CardHeader from '@mui/material/CardHeader'
|
||||||
|
import Checkbox from '@mui/material/Checkbox'
|
||||||
|
import Chip from '@mui/material/Chip'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
import type { TextFieldProps } from '@mui/material/TextField'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import type { RankingInfo } from '@tanstack/match-sorter-utils'
|
||||||
|
import { rankItem } from '@tanstack/match-sorter-utils'
|
||||||
|
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
|
||||||
|
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
||||||
|
import classnames from 'classnames'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { Locale } from '@configs/i18n'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
import OptionMenu from '@core/components/option-menu'
|
||||||
|
|
||||||
|
// Style Imports
|
||||||
|
import tableStyles from '@core/styles/table.module.css'
|
||||||
|
import { Box, CircularProgress, TablePagination } from '@mui/material'
|
||||||
|
import { useDispatch } from 'react-redux'
|
||||||
|
import TablePaginationComponent from '@/components/TablePaginationComponent'
|
||||||
|
import Loading from '@/components/layout/shared/Loading'
|
||||||
|
import { getLocalizedUrl } from '@/utils/i18n'
|
||||||
|
import { ExpenseType } from '@/types/apps/expenseTypes'
|
||||||
|
import { expenseData } from '@/data/dummy/expense'
|
||||||
|
import StatusFilterTabs from '@/components/StatusFilterTab'
|
||||||
|
import DateRangePicker from '@/components/RangeDatePicker'
|
||||||
|
|
||||||
|
declare module '@tanstack/table-core' {
|
||||||
|
interface FilterFns {
|
||||||
|
fuzzy: FilterFn<unknown>
|
||||||
|
}
|
||||||
|
interface FilterMeta {
|
||||||
|
itemRank: RankingInfo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type ExpenseTypeWithAction = ExpenseType & {
|
||||||
|
actions?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Styled Components
|
||||||
|
const Icon = styled('i')({})
|
||||||
|
|
||||||
|
const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
||||||
|
// Rank the item
|
||||||
|
const itemRank = rankItem(row.getValue(columnId), value)
|
||||||
|
|
||||||
|
// Store the itemRank info
|
||||||
|
addMeta({
|
||||||
|
itemRank
|
||||||
|
})
|
||||||
|
|
||||||
|
// Return if the item should be filtered in/out
|
||||||
|
return itemRank.passed
|
||||||
|
}
|
||||||
|
|
||||||
|
const DebouncedInput = ({
|
||||||
|
value: initialValue,
|
||||||
|
onChange,
|
||||||
|
debounce = 500,
|
||||||
|
...props
|
||||||
|
}: {
|
||||||
|
value: string | number
|
||||||
|
onChange: (value: string | number) => void
|
||||||
|
debounce?: number
|
||||||
|
} & Omit<TextFieldProps, 'onChange'>) => {
|
||||||
|
// States
|
||||||
|
const [value, setValue] = useState(initialValue)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setValue(initialValue)
|
||||||
|
}, [initialValue])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
onChange(value)
|
||||||
|
}, debounce)
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [value])
|
||||||
|
|
||||||
|
return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
|
||||||
|
}
|
||||||
|
|
||||||
|
// Status color mapping for Expense
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Belum Dibayar':
|
||||||
|
return 'error'
|
||||||
|
case 'Dibayar Sebagian':
|
||||||
|
return 'warning'
|
||||||
|
case 'Lunas':
|
||||||
|
return 'success'
|
||||||
|
default:
|
||||||
|
return 'default'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format currency
|
||||||
|
const formatCurrency = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('id-ID', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'IDR',
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
}).format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Column Definitions
|
||||||
|
const columnHelper = createColumnHelper<ExpenseTypeWithAction>()
|
||||||
|
|
||||||
|
const ExpenseListTable = () => {
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
|
||||||
|
// States
|
||||||
|
const [addExpenseOpen, setAddExpenseOpen] = useState(false)
|
||||||
|
const [rowSelection, setRowSelection] = useState({})
|
||||||
|
const [currentPage, setCurrentPage] = useState(0)
|
||||||
|
const [pageSize, setPageSize] = useState(10)
|
||||||
|
const [openConfirm, setOpenConfirm] = useState(false)
|
||||||
|
const [expenseId, setExpenseId] = useState('')
|
||||||
|
const [search, setSearch] = useState('')
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('Semua')
|
||||||
|
const [filteredData, setFilteredData] = useState<ExpenseType[]>(expenseData)
|
||||||
|
const [startDate, setStartDate] = useState<Date | null>(new Date())
|
||||||
|
const [endDate, setEndDate] = useState<Date | null>(new Date())
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const { lang: locale } = useParams()
|
||||||
|
|
||||||
|
// Filter data based on search and status
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = expenseData
|
||||||
|
|
||||||
|
// Filter by search
|
||||||
|
if (search) {
|
||||||
|
filtered = filtered.filter(
|
||||||
|
expense =>
|
||||||
|
expense.number.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
expense.benefeciaryName.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
expense.benefeciaryCompany.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
expense.status.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
expense.reference.toLowerCase().includes(search.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by status
|
||||||
|
if (statusFilter !== 'Semua') {
|
||||||
|
filtered = filtered.filter(expense => expense.status === statusFilter)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredData(filtered)
|
||||||
|
setCurrentPage(0)
|
||||||
|
}, [search, statusFilter])
|
||||||
|
|
||||||
|
const totalCount = filteredData.length
|
||||||
|
const paginatedData = useMemo(() => {
|
||||||
|
const startIndex = currentPage * pageSize
|
||||||
|
return filteredData.slice(startIndex, startIndex + pageSize)
|
||||||
|
}, [filteredData, currentPage, pageSize])
|
||||||
|
|
||||||
|
// Calculate subtotal and total from filtered data
|
||||||
|
const subtotalBalanceDue = useMemo(() => {
|
||||||
|
return filteredData.reduce((sum, expense) => sum + expense.balanceDue, 0)
|
||||||
|
}, [filteredData])
|
||||||
|
|
||||||
|
const subtotalTotal = useMemo(() => {
|
||||||
|
return filteredData.reduce((sum, expense) => sum + expense.total, 0)
|
||||||
|
}, [filteredData])
|
||||||
|
|
||||||
|
const taxAmount = subtotalTotal * 0.1 // 10% tax example
|
||||||
|
const finalTotal = subtotalTotal + taxAmount
|
||||||
|
|
||||||
|
const handlePageChange = useCallback((event: unknown, newPage: number) => {
|
||||||
|
setCurrentPage(newPage)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const newPageSize = parseInt(event.target.value, 10)
|
||||||
|
setPageSize(newPageSize)
|
||||||
|
setCurrentPage(0)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
setOpenConfirm(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExpenseClick = (expenseId: string) => {
|
||||||
|
console.log('Navigasi ke detail Expense:', expenseId)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleStatusFilter = (status: string) => {
|
||||||
|
setStatusFilter(status)
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<ExpenseTypeWithAction, any>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: ({ table }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: table.getIsAllRowsSelected(),
|
||||||
|
indeterminate: table.getIsSomeRowsSelected(),
|
||||||
|
onChange: table.getToggleAllRowsSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: row.getIsSelected(),
|
||||||
|
disabled: !row.getCanSelect(),
|
||||||
|
indeterminate: row.getIsSomeSelected(),
|
||||||
|
onChange: row.getToggleSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
columnHelper.accessor('number', {
|
||||||
|
header: 'Nomor Expense',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Button
|
||||||
|
variant='text'
|
||||||
|
color='primary'
|
||||||
|
className='p-0 min-w-0 font-medium normal-case justify-start'
|
||||||
|
component={Link}
|
||||||
|
href={getLocalizedUrl(`/apps/expense/${row.original.id}/detail`, locale as Locale)}
|
||||||
|
sx={{
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 500,
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.original.number}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('benefeciaryName', {
|
||||||
|
header: 'Beneficiary',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<Typography color='text.primary' className='font-medium'>
|
||||||
|
{row.original.benefeciaryName}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' color='text.secondary'>
|
||||||
|
{row.original.benefeciaryCompany}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('reference', {
|
||||||
|
header: 'Referensi',
|
||||||
|
cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('date', {
|
||||||
|
header: 'Tanggal',
|
||||||
|
cell: ({ row }) => <Typography>{row.original.date}</Typography>
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('status', {
|
||||||
|
header: 'Status',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<Chip
|
||||||
|
variant='tonal'
|
||||||
|
label={row.original.status}
|
||||||
|
size='small'
|
||||||
|
color={getStatusColor(row.original.status) as any}
|
||||||
|
className='capitalize'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('balanceDue', {
|
||||||
|
header: 'Sisa Tagihan',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Typography className={`font-medium ${row.original.balanceDue > 0 ? 'text-red-600' : 'text-green-600'}`}>
|
||||||
|
{formatCurrency(row.original.balanceDue)}
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('total', {
|
||||||
|
header: 'Total',
|
||||||
|
cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
|
||||||
|
})
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: paginatedData as ExpenseType[],
|
||||||
|
columns,
|
||||||
|
filterFns: {
|
||||||
|
fuzzy: fuzzyFilter
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
rowSelection,
|
||||||
|
pagination: {
|
||||||
|
pageIndex: currentPage,
|
||||||
|
pageSize
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enableRowSelection: true,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
manualPagination: true,
|
||||||
|
pageCount: Math.ceil(totalCount / pageSize)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card>
|
||||||
|
{/* Filter Status Tabs and Range Date */}
|
||||||
|
<div className='p-6 border-bs'>
|
||||||
|
<div className='flex items-center justify-between'>
|
||||||
|
<StatusFilterTabs
|
||||||
|
statusOptions={[
|
||||||
|
'Semua',
|
||||||
|
'Belum Dibayar',
|
||||||
|
'Dibayar Sebagian',
|
||||||
|
'Lunas',
|
||||||
|
'Jatuh Tempo',
|
||||||
|
'Transaksi Berulang'
|
||||||
|
]}
|
||||||
|
selectedStatus={statusFilter}
|
||||||
|
onStatusChange={handleStatusFilter}
|
||||||
|
/>
|
||||||
|
<DateRangePicker
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={setStartDate}
|
||||||
|
onEndDateChange={setEndDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
|
||||||
|
<DebouncedInput
|
||||||
|
value={search}
|
||||||
|
onChange={value => setSearch(value as string)}
|
||||||
|
placeholder='Cari Expense'
|
||||||
|
className='max-sm:is-full'
|
||||||
|
/>
|
||||||
|
<div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
value={pageSize}
|
||||||
|
onChange={handlePageSizeChange}
|
||||||
|
className='max-sm:is-full sm:is-[70px]'
|
||||||
|
>
|
||||||
|
<MenuItem value={10}>10</MenuItem>
|
||||||
|
<MenuItem value={25}>25</MenuItem>
|
||||||
|
<MenuItem value={50}>50</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
component={Link}
|
||||||
|
className='max-sm:is-full is-auto'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
href={getLocalizedUrl('/apps/expense/add', locale as Locale)}
|
||||||
|
>
|
||||||
|
Tambah
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table className={tableStyles.table}>
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<th key={header.id}>
|
||||||
|
{header.isPlaceholder ? null : (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={classnames({
|
||||||
|
'flex items-center': header.column.getIsSorted(),
|
||||||
|
'cursor-pointer select-none': header.column.getCanSort()
|
||||||
|
})}
|
||||||
|
onClick={header.column.getToggleSortingHandler()}
|
||||||
|
>
|
||||||
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||||
|
{{
|
||||||
|
asc: <i className='tabler-chevron-up text-xl' />,
|
||||||
|
desc: <i className='tabler-chevron-down text-xl' />
|
||||||
|
}[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
{filteredData.length === 0 ? (
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
|
||||||
|
Tidak ada data tersedia
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
) : (
|
||||||
|
<tbody>
|
||||||
|
{table.getRowModel().rows.map(row => {
|
||||||
|
return (
|
||||||
|
<tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Subtotal Row */}
|
||||||
|
<tr className='border-t-2 bg-gray-50'>
|
||||||
|
<td className='font-semibold text-lg py-4'>
|
||||||
|
<Typography variant='h6' className='font-semibold'>
|
||||||
|
Subtotal
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td className='font-semibold text-lg py-4'>
|
||||||
|
<Typography variant='h6' className='font-semibol'>
|
||||||
|
{formatCurrency(subtotalBalanceDue)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td className='font-semibold text-lg py-4'>
|
||||||
|
<Typography variant='h6' className='font-semibold'>
|
||||||
|
{formatCurrency(subtotalTotal)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
{/* Total Row */}
|
||||||
|
<tr className='border-t bg-gray-100'>
|
||||||
|
<td className='font-bold text-xl py-4'>
|
||||||
|
<Typography variant='h6' className='font-bold'>
|
||||||
|
Total
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td className='font-bold text-xl py-4'>
|
||||||
|
<Typography variant='h6' className='font-bold'>
|
||||||
|
{formatCurrency(subtotalBalanceDue + taxAmount)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td className='font-bold text-xl py-4'>
|
||||||
|
<Typography variant='h6' className='font-bold'>
|
||||||
|
{formatCurrency(finalTotal)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
)}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TablePagination
|
||||||
|
component={() => (
|
||||||
|
<TablePaginationComponent
|
||||||
|
pageIndex={currentPage}
|
||||||
|
pageSize={pageSize}
|
||||||
|
totalCount={totalCount}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
count={totalCount}
|
||||||
|
rowsPerPage={pageSize}
|
||||||
|
page={currentPage}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
onRowsPerPageChange={handlePageSizeChange}
|
||||||
|
rowsPerPageOptions={[10, 25, 50]}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseListTable
|
||||||
23
src/views/apps/expense/list/index.tsx
Normal file
23
src/views/apps/expense/list/index.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
// MUI Imports
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import ExpenseListTable from './ExpenseListTable'
|
||||||
|
import ExpenseListCard from './ExpenseListCard'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
|
||||||
|
const ExpenseList = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ExpenseListCard />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<ExpenseListTable />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseList
|
||||||
63
src/views/apps/fixed-assets/FixedAssetCard.tsx
Normal file
63
src/views/apps/fixed-assets/FixedAssetCard.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
// MUI Imports
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
|
||||||
|
// Vars
|
||||||
|
const data: UserDataType[] = [
|
||||||
|
// Fixed Assets Data (from the image)
|
||||||
|
{
|
||||||
|
title: 'Nilai Aset',
|
||||||
|
stats: 'Rp 17.900.000',
|
||||||
|
avatarIcon: 'tabler-building-store',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '100%',
|
||||||
|
subtitle: 'Hari ini vs 365 hari lalu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Depresiasi Aset',
|
||||||
|
stats: 'Rp 0',
|
||||||
|
avatarIcon: 'tabler-trending-down',
|
||||||
|
avatarColor: 'secondary',
|
||||||
|
trend: 'neutral',
|
||||||
|
trendNumber: '0%',
|
||||||
|
subtitle: 'Tahun ini vs tanggal sama tahun lalu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Laba/Rugi Pelepasan Aset',
|
||||||
|
stats: 'Rp 0',
|
||||||
|
avatarIcon: 'tabler-exchange',
|
||||||
|
avatarColor: 'secondary',
|
||||||
|
trend: 'neutral',
|
||||||
|
trendNumber: '0%',
|
||||||
|
subtitle: 'Tahun ini vs tanggal sama tahun lalu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Aset Baru',
|
||||||
|
stats: 'Rp 17.900.000',
|
||||||
|
avatarIcon: 'tabler-plus-circle',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '100%',
|
||||||
|
subtitle: 'Tahun ini vs tanggal sama tahun lalu'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const FixedAssetCards = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
{data.map((item, i) => (
|
||||||
|
<Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
|
||||||
|
<HorizontalWithSubtitle {...item} />
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FixedAssetCards
|
||||||
512
src/views/apps/fixed-assets/FixedAssetTable.tsx
Normal file
512
src/views/apps/fixed-assets/FixedAssetTable.tsx
Normal file
@ -0,0 +1,512 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// React Imports
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||||
|
|
||||||
|
// Next Imports
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Card from '@mui/material/Card'
|
||||||
|
import CardHeader from '@mui/material/CardHeader'
|
||||||
|
import Checkbox from '@mui/material/Checkbox'
|
||||||
|
import Chip from '@mui/material/Chip'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
import type { TextFieldProps } from '@mui/material/TextField'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import type { RankingInfo } from '@tanstack/match-sorter-utils'
|
||||||
|
import { rankItem } from '@tanstack/match-sorter-utils'
|
||||||
|
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
|
||||||
|
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
||||||
|
import classnames from 'classnames'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { Locale } from '@configs/i18n'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
import OptionMenu from '@core/components/option-menu'
|
||||||
|
|
||||||
|
// Style Imports
|
||||||
|
import tableStyles from '@core/styles/table.module.css'
|
||||||
|
import { Box, CircularProgress, TablePagination } from '@mui/material'
|
||||||
|
import { useDispatch } from 'react-redux'
|
||||||
|
import TablePaginationComponent from '@/components/TablePaginationComponent'
|
||||||
|
import Loading from '@/components/layout/shared/Loading'
|
||||||
|
import { getLocalizedUrl } from '@/utils/i18n'
|
||||||
|
import StatusFilterTabs from '@/components/StatusFilterTab'
|
||||||
|
|
||||||
|
// Fixed Asset Type
|
||||||
|
export type FixedAssetType = {
|
||||||
|
id: number
|
||||||
|
assetName: string
|
||||||
|
puchaseBill: string // Code Purchase
|
||||||
|
reference: string
|
||||||
|
date: string
|
||||||
|
price: number
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '@tanstack/table-core' {
|
||||||
|
interface FilterFns {
|
||||||
|
fuzzy: FilterFn<unknown>
|
||||||
|
}
|
||||||
|
interface FilterMeta {
|
||||||
|
itemRank: RankingInfo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type FixedAssetTypeWithAction = FixedAssetType & {
|
||||||
|
actions?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dummy data for fixed assets
|
||||||
|
const fixedAssetData: FixedAssetType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
assetName: 'Laptop Dell XPS 13',
|
||||||
|
puchaseBill: 'PB-2024-001',
|
||||||
|
reference: 'REF-001',
|
||||||
|
date: '2024-01-15',
|
||||||
|
price: 15000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
assetName: 'Office Furniture Set',
|
||||||
|
puchaseBill: 'PB-2024-002',
|
||||||
|
reference: 'REF-002',
|
||||||
|
date: '2024-02-10',
|
||||||
|
price: 8500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
assetName: 'Printer Canon ImageClass',
|
||||||
|
puchaseBill: 'PB-2024-003',
|
||||||
|
reference: 'REF-003',
|
||||||
|
date: '2024-02-20',
|
||||||
|
price: 3200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
assetName: 'Air Conditioning Unit',
|
||||||
|
puchaseBill: 'PB-2024-004',
|
||||||
|
reference: 'REF-004',
|
||||||
|
date: '2024-03-05',
|
||||||
|
price: 12000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
assetName: 'Conference Room TV',
|
||||||
|
puchaseBill: 'PB-2024-005',
|
||||||
|
reference: 'REF-005',
|
||||||
|
date: '2024-03-15',
|
||||||
|
price: 7500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
assetName: 'MacBook Pro 16"',
|
||||||
|
puchaseBill: 'PB-2024-006',
|
||||||
|
reference: 'REF-006',
|
||||||
|
date: '2024-04-01',
|
||||||
|
price: 28000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
assetName: 'Standing Desk Electric',
|
||||||
|
puchaseBill: 'PB-2024-007',
|
||||||
|
reference: 'REF-007',
|
||||||
|
date: '2024-04-15',
|
||||||
|
price: 4500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
assetName: 'Server HP ProLiant',
|
||||||
|
puchaseBill: 'PB-2024-008',
|
||||||
|
reference: 'REF-008',
|
||||||
|
date: '2024-05-01',
|
||||||
|
price: 45000000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// Styled Components
|
||||||
|
const Icon = styled('i')({})
|
||||||
|
|
||||||
|
const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
||||||
|
// Rank the item
|
||||||
|
const itemRank = rankItem(row.getValue(columnId), value)
|
||||||
|
|
||||||
|
// Store the itemRank info
|
||||||
|
addMeta({
|
||||||
|
itemRank
|
||||||
|
})
|
||||||
|
|
||||||
|
// Return if the item should be filtered in/out
|
||||||
|
return itemRank.passed
|
||||||
|
}
|
||||||
|
|
||||||
|
const DebouncedInput = ({
|
||||||
|
value: initialValue,
|
||||||
|
onChange,
|
||||||
|
debounce = 500,
|
||||||
|
...props
|
||||||
|
}: {
|
||||||
|
value: string | number
|
||||||
|
onChange: (value: string | number) => void
|
||||||
|
debounce?: number
|
||||||
|
} & Omit<TextFieldProps, 'onChange'>) => {
|
||||||
|
// States
|
||||||
|
const [value, setValue] = useState(initialValue)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setValue(initialValue)
|
||||||
|
}, [initialValue])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
onChange(value)
|
||||||
|
}, debounce)
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [value])
|
||||||
|
|
||||||
|
return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format currency
|
||||||
|
const formatCurrency = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('id-ID', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'IDR',
|
||||||
|
minimumFractionDigits: 0
|
||||||
|
}).format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format date
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('id-ID', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Column Definitions
|
||||||
|
const columnHelper = createColumnHelper<FixedAssetTypeWithAction>()
|
||||||
|
|
||||||
|
const FixedAssetTable = () => {
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
|
||||||
|
// States
|
||||||
|
const [addAssetOpen, setAddAssetOpen] = useState(false)
|
||||||
|
const [rowSelection, setRowSelection] = useState({})
|
||||||
|
const [currentPage, setCurrentPage] = useState(0)
|
||||||
|
const [pageSize, setPageSize] = useState(10)
|
||||||
|
const [openConfirm, setOpenConfirm] = useState(false)
|
||||||
|
const [assetId, setAssetId] = useState('')
|
||||||
|
const [search, setSearch] = useState('')
|
||||||
|
const [filteredData, setFilteredData] = useState<FixedAssetType[]>([])
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('Draft')
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const { lang: locale } = useParams()
|
||||||
|
|
||||||
|
// Initialize data on component mount
|
||||||
|
useEffect(() => {
|
||||||
|
console.log('Initial fixedAssetData:', fixedAssetData)
|
||||||
|
setFilteredData(fixedAssetData)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Filter data based on search
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = [...fixedAssetData]
|
||||||
|
|
||||||
|
// Filter by search
|
||||||
|
if (search) {
|
||||||
|
filtered = filtered.filter(
|
||||||
|
asset =>
|
||||||
|
asset.assetName.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
asset.puchaseBill.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
asset.reference.toLowerCase().includes(search.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Filtered data:', filtered) // Debug log
|
||||||
|
setFilteredData(filtered)
|
||||||
|
setCurrentPage(0)
|
||||||
|
}, [search])
|
||||||
|
|
||||||
|
const totalCount = filteredData.length
|
||||||
|
const paginatedData = useMemo(() => {
|
||||||
|
const startIndex = currentPage * pageSize
|
||||||
|
return filteredData.slice(startIndex, startIndex + pageSize)
|
||||||
|
}, [filteredData, currentPage, pageSize])
|
||||||
|
|
||||||
|
// Calculate total value from filtered data
|
||||||
|
const totalValue = useMemo(() => {
|
||||||
|
return filteredData.reduce((sum, asset) => sum + asset.price, 0)
|
||||||
|
}, [filteredData])
|
||||||
|
|
||||||
|
const handlePageChange = useCallback((event: unknown, newPage: number) => {
|
||||||
|
setCurrentPage(newPage)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const newPageSize = parseInt(event.target.value, 10)
|
||||||
|
setPageSize(newPageSize)
|
||||||
|
setCurrentPage(0)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
setOpenConfirm(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAssetClick = (assetId: string) => {
|
||||||
|
console.log('Navigasi ke detail Asset:', assetId)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleStatusFilter = (status: string) => {
|
||||||
|
setStatusFilter(status)
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<FixedAssetTypeWithAction, any>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: ({ table }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: table.getIsAllRowsSelected(),
|
||||||
|
indeterminate: table.getIsSomeRowsSelected(),
|
||||||
|
onChange: table.getToggleAllRowsSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: row.getIsSelected(),
|
||||||
|
disabled: !row.getCanSelect(),
|
||||||
|
indeterminate: row.getIsSomeSelected(),
|
||||||
|
onChange: row.getToggleSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
columnHelper.accessor('puchaseBill', {
|
||||||
|
header: 'Kode Pembelian',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Button
|
||||||
|
variant='text'
|
||||||
|
color='primary'
|
||||||
|
className='p-0 min-w-0 font-medium normal-case justify-start'
|
||||||
|
component={Link}
|
||||||
|
href={getLocalizedUrl(`/apps/fixed-asset/${row.original.id}/detail`, locale as Locale)}
|
||||||
|
sx={{
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 500,
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.original.puchaseBill}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('assetName', {
|
||||||
|
header: 'Nama Aset',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Typography color='text.primary' className='font-medium'>
|
||||||
|
{row.original.assetName}
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('reference', {
|
||||||
|
header: 'Referensi',
|
||||||
|
cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('date', {
|
||||||
|
header: 'Tanggal Pembelian',
|
||||||
|
cell: ({ row }) => <Typography>{formatDate(row.original.date)}</Typography>
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('price', {
|
||||||
|
header: 'Harga',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Typography className='font-medium text-primary'>{formatCurrency(row.original.price)}</Typography>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
],
|
||||||
|
[locale]
|
||||||
|
)
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: paginatedData as FixedAssetType[],
|
||||||
|
columns,
|
||||||
|
filterFns: {
|
||||||
|
fuzzy: fuzzyFilter
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
rowSelection,
|
||||||
|
pagination: {
|
||||||
|
pageIndex: currentPage,
|
||||||
|
pageSize
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enableRowSelection: true,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
manualPagination: true,
|
||||||
|
pageCount: Math.ceil(totalCount / pageSize)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card>
|
||||||
|
{/* Header */}
|
||||||
|
<div className='p-6 border-bs'>
|
||||||
|
<StatusFilterTabs
|
||||||
|
statusOptions={['Draft', 'Terdaftar', 'Terjual/Dilepaskan']}
|
||||||
|
selectedStatus={statusFilter}
|
||||||
|
onStatusChange={handleStatusFilter}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
|
||||||
|
<DebouncedInput
|
||||||
|
value={search}
|
||||||
|
onChange={value => setSearch(value as string)}
|
||||||
|
placeholder='Cari Aset Tetap'
|
||||||
|
className='max-sm:is-full'
|
||||||
|
/>
|
||||||
|
<div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
value={pageSize}
|
||||||
|
onChange={handlePageSizeChange}
|
||||||
|
className='max-sm:is-full sm:is-[70px]'
|
||||||
|
>
|
||||||
|
<MenuItem value={10}>10</MenuItem>
|
||||||
|
<MenuItem value={25}>25</MenuItem>
|
||||||
|
<MenuItem value={50}>50</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
component={Link}
|
||||||
|
className='max-sm:is-full is-auto'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
href={getLocalizedUrl('/apps/fixed-assets/add', locale as Locale)}
|
||||||
|
>
|
||||||
|
Tambah Aset
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table className={tableStyles.table}>
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<th key={header.id}>
|
||||||
|
{header.isPlaceholder ? null : (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={classnames({
|
||||||
|
'flex items-center': header.column.getIsSorted(),
|
||||||
|
'cursor-pointer select-none': header.column.getCanSort()
|
||||||
|
})}
|
||||||
|
onClick={header.column.getToggleSortingHandler()}
|
||||||
|
>
|
||||||
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||||
|
{{
|
||||||
|
asc: <i className='tabler-chevron-up text-xl' />,
|
||||||
|
desc: <i className='tabler-chevron-down text-xl' />
|
||||||
|
}[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
{filteredData.length === 0 ? (
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
|
||||||
|
Tidak ada data tersedia
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
) : (
|
||||||
|
<tbody>
|
||||||
|
{table.getRowModel().rows.map(row => {
|
||||||
|
return (
|
||||||
|
<tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Total Row */}
|
||||||
|
<tr className='border-t-2 bg-gray-50'>
|
||||||
|
<td className='font-bold text-lg py-4'>
|
||||||
|
<Typography variant='h6' className='font-bold'>
|
||||||
|
Total Nilai Aset
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td className='font-bold text-lg py-4'>
|
||||||
|
<Typography variant='h6' className='font-bold text-primary'>
|
||||||
|
{formatCurrency(totalValue)}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
)}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TablePagination
|
||||||
|
component={() => (
|
||||||
|
<TablePaginationComponent
|
||||||
|
pageIndex={currentPage}
|
||||||
|
pageSize={pageSize}
|
||||||
|
totalCount={totalCount}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
count={totalCount}
|
||||||
|
rowsPerPage={pageSize}
|
||||||
|
page={currentPage}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
onRowsPerPageChange={handlePageSizeChange}
|
||||||
|
rowsPerPageOptions={[10, 25, 50]}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FixedAssetTable
|
||||||
561
src/views/apps/fixed-assets/add/FixedAssetAddForm.tsx
Normal file
561
src/views/apps/fixed-assets/add/FixedAssetAddForm.tsx
Normal file
@ -0,0 +1,561 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { Card, CardContent, Typography, Button, Switch, FormControlLabel, Box, Radio } from '@mui/material'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import CustomTextField from '@/@core/components/mui/TextField'
|
||||||
|
import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
|
||||||
|
|
||||||
|
interface FormData {
|
||||||
|
namaAset: string
|
||||||
|
nomor: string
|
||||||
|
tanggalPembelian: string
|
||||||
|
hargaBeli: string
|
||||||
|
akunAsetTetap: any
|
||||||
|
dikreditkanDariAkun: any
|
||||||
|
deskripsi: string
|
||||||
|
referensi: string
|
||||||
|
tanpaPenyusutan: boolean
|
||||||
|
akunAkumulasiPenyusutan: any
|
||||||
|
akunPenyusutan: any
|
||||||
|
nilaiPenyusuanPerTahun: string
|
||||||
|
masaManfaatTahun: string
|
||||||
|
masaManfaatBulan: string
|
||||||
|
depreciationType: 'percentage' | 'useful-life'
|
||||||
|
showAdditionalOptions: boolean
|
||||||
|
metodePenyusutan: any
|
||||||
|
tanggalMulaiPenyusutan: string
|
||||||
|
akumulasiPenyusutan: string
|
||||||
|
batasBiaya: string
|
||||||
|
nilaiResidu: string
|
||||||
|
showImageUpload: boolean
|
||||||
|
uploadedImage: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simple ImageUpload component
|
||||||
|
const ImageUpload = ({ onUpload, maxFileSize, showUrlOption, dragDropText, browseButtonText }: any) => {
|
||||||
|
const [dragOver, setDragOver] = useState(false)
|
||||||
|
|
||||||
|
const handleFileSelect = (file: File) => {
|
||||||
|
if (file.size > maxFileSize) {
|
||||||
|
alert(`File size exceeds ${maxFileSize / (1024 * 1024)}MB limit`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = URL.createObjectURL(file)
|
||||||
|
onUpload(file, url)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDrop = (e: React.DragEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setDragOver(false)
|
||||||
|
const files = Array.from(e.dataTransfer.files)
|
||||||
|
if (files[0]) {
|
||||||
|
handleFileSelect(files[0])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const files = Array.from(e.target.files || [])
|
||||||
|
if (files[0]) {
|
||||||
|
handleFileSelect(files[0])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
border: dragOver ? '2px dashed #1976d2' : '2px dashed #ccc',
|
||||||
|
borderRadius: 2,
|
||||||
|
p: 3,
|
||||||
|
textAlign: 'center',
|
||||||
|
backgroundColor: dragOver ? '#f5f5f5' : 'transparent',
|
||||||
|
transition: 'all 0.3s ease'
|
||||||
|
}}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
onDragOver={e => {
|
||||||
|
e.preventDefault()
|
||||||
|
setDragOver(true)
|
||||||
|
}}
|
||||||
|
onDragLeave={() => setDragOver(false)}
|
||||||
|
>
|
||||||
|
<Typography variant='body1' sx={{ mb: 2 }}>
|
||||||
|
{dragDropText}
|
||||||
|
</Typography>
|
||||||
|
<input
|
||||||
|
type='file'
|
||||||
|
accept='image/*'
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
id='image-upload-input'
|
||||||
|
onChange={handleFileInput}
|
||||||
|
/>
|
||||||
|
<label htmlFor='image-upload-input'>
|
||||||
|
<Button variant='outlined' component='span'>
|
||||||
|
{browseButtonText}
|
||||||
|
</Button>
|
||||||
|
</label>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const FixedAssetAddForm = () => {
|
||||||
|
const [formData, setFormData] = useState<FormData>({
|
||||||
|
namaAset: '',
|
||||||
|
nomor: 'FA/00003',
|
||||||
|
tanggalPembelian: '11/09/2025',
|
||||||
|
hargaBeli: '0',
|
||||||
|
akunAsetTetap: null,
|
||||||
|
dikreditkanDariAkun: null,
|
||||||
|
deskripsi: '',
|
||||||
|
referensi: '',
|
||||||
|
tanpaPenyusutan: true,
|
||||||
|
akunAkumulasiPenyusutan: null,
|
||||||
|
akunPenyusutan: null,
|
||||||
|
nilaiPenyusuanPerTahun: '',
|
||||||
|
masaManfaatTahun: '',
|
||||||
|
masaManfaatBulan: '',
|
||||||
|
depreciationType: 'percentage',
|
||||||
|
showAdditionalOptions: false,
|
||||||
|
metodePenyusutan: null,
|
||||||
|
tanggalMulaiPenyusutan: '11/09/2025',
|
||||||
|
akumulasiPenyusutan: '0',
|
||||||
|
batasBiaya: '0',
|
||||||
|
nilaiResidu: '0',
|
||||||
|
showImageUpload: false,
|
||||||
|
uploadedImage: null
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleInputChange = (field: keyof FormData, value: any) => {
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[field]: value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sample options - replace with your actual data
|
||||||
|
const akunAsetTetapOptions = [{ label: '1-10705 Aset Tetap - Perlengkapan Kantor', value: '1-10705' }]
|
||||||
|
|
||||||
|
const dikreditkanDariAkunOptions = [{ label: 'Silakan pilih dikreditkan dari akun', value: '' }]
|
||||||
|
|
||||||
|
const akunAkumulasiPenyusutanOptions = [{ label: 'Silakan pilih akun akumulasi penyusutan', value: '' }]
|
||||||
|
|
||||||
|
const akunPenyusutanOptions = [{ label: 'Silakan pilih akbun penyusutan', value: '' }]
|
||||||
|
|
||||||
|
const metodePenyusutanOptions = [
|
||||||
|
{ label: 'Straight Line', value: 'straight-line' },
|
||||||
|
{ label: 'Declining Balance', value: 'declining-balance' },
|
||||||
|
{ label: 'Sum of Years Digits', value: 'sum-of-years' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const handleUpload = (file: File, url: string) => {
|
||||||
|
handleInputChange('uploadedImage', url)
|
||||||
|
console.log('Image uploaded:', { file, url })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
console.log('Form Data:', formData)
|
||||||
|
// Handle form submission here
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent>
|
||||||
|
<Typography variant='h6' gutterBottom>
|
||||||
|
Detil
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box sx={{ mb: 2 }}>
|
||||||
|
<Button
|
||||||
|
variant='text'
|
||||||
|
color='primary'
|
||||||
|
sx={{ textTransform: 'none', p: 0, minWidth: 'auto' }}
|
||||||
|
onClick={() => handleInputChange('showImageUpload', !formData.showImageUpload)}
|
||||||
|
>
|
||||||
|
{formData.showImageUpload ? '- Sembunyikan gambar aset tetap' : '+ Tampilkan gambar aset tetap'}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Image Upload Section */}
|
||||||
|
{formData.showImageUpload && (
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<ImageUpload
|
||||||
|
onUpload={handleUpload}
|
||||||
|
maxFileSize={1 * 1024 * 1024} // 1MB
|
||||||
|
showUrlOption={false}
|
||||||
|
dragDropText='Drop your image here'
|
||||||
|
browseButtonText='Choose Image'
|
||||||
|
/>
|
||||||
|
{formData.uploadedImage && (
|
||||||
|
<Box sx={{ mt: 2, textAlign: 'center' }}>
|
||||||
|
<img
|
||||||
|
src={formData.uploadedImage}
|
||||||
|
alt='Uploaded asset'
|
||||||
|
style={{ maxWidth: '200px', maxHeight: '200px', borderRadius: '8px' }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Grid container spacing={3}>
|
||||||
|
{/* Left Column */}
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
label='Nama Aset'
|
||||||
|
placeholder='Nama Aset'
|
||||||
|
value={formData.namaAset}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('namaAset', e.target.value)}
|
||||||
|
required
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
label='Tanggal Pembelian'
|
||||||
|
type='date'
|
||||||
|
value={formData.tanggalPembelian}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
handleInputChange('tanggalPembelian', e.target.value)
|
||||||
|
}
|
||||||
|
InputLabelProps={{
|
||||||
|
shrink: true
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CustomAutocomplete
|
||||||
|
fullWidth
|
||||||
|
options={akunAsetTetapOptions}
|
||||||
|
value={formData.akunAsetTetap}
|
||||||
|
onChange={(event, newValue) => handleInputChange('akunAsetTetap', newValue)}
|
||||||
|
renderInput={params => (
|
||||||
|
<CustomTextField
|
||||||
|
{...params}
|
||||||
|
label='Akun Aset Tetap'
|
||||||
|
placeholder='1-10705 Aset Tetap - Perlengkapan Kantor'
|
||||||
|
fullWidth
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
label='Deskripsi'
|
||||||
|
placeholder='Deskripsi'
|
||||||
|
multiline
|
||||||
|
rows={4}
|
||||||
|
value={formData.deskripsi}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('deskripsi', e.target.value)}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
label='Referensi'
|
||||||
|
placeholder='Referensi'
|
||||||
|
value={formData.referensi}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('referensi', e.target.value)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
label='Nomor'
|
||||||
|
value={formData.nomor}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('nomor', e.target.value)}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
label='Harga Beli'
|
||||||
|
type='number'
|
||||||
|
value={formData.hargaBeli}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('hargaBeli', e.target.value)}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CustomAutocomplete
|
||||||
|
fullWidth
|
||||||
|
options={dikreditkanDariAkunOptions}
|
||||||
|
value={formData.dikreditkanDariAkun}
|
||||||
|
onChange={(event, newValue) => handleInputChange('dikreditkanDariAkun', newValue)}
|
||||||
|
renderInput={params => (
|
||||||
|
<CustomTextField
|
||||||
|
{...params}
|
||||||
|
label='Dikreditkan Dari Akun'
|
||||||
|
placeholder='Silakan pilih dikreditkan dari akun'
|
||||||
|
fullWidth
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Penyusutan Section */}
|
||||||
|
<Box sx={{ mt: 4 }}>
|
||||||
|
<Typography variant='h6' gutterBottom>
|
||||||
|
Penyusutan
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Switch
|
||||||
|
checked={formData.tanpaPenyusutan}
|
||||||
|
onChange={e => handleInputChange('tanpaPenyusutan', e.target.checked)}
|
||||||
|
color='primary'
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label='Tanpa penyusutan'
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Show depreciation fields when switch is OFF (false) */}
|
||||||
|
{!formData.tanpaPenyusutan && (
|
||||||
|
<Grid container spacing={3} sx={{ mt: 2 }}>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<CustomAutocomplete
|
||||||
|
fullWidth
|
||||||
|
options={akunAkumulasiPenyusutanOptions}
|
||||||
|
value={formData.akunAkumulasiPenyusutan}
|
||||||
|
onChange={(event, newValue) => handleInputChange('akunAkumulasiPenyusutan', newValue)}
|
||||||
|
renderInput={params => (
|
||||||
|
<CustomTextField
|
||||||
|
{...params}
|
||||||
|
label='Akun Akumulasi Penyusutan'
|
||||||
|
placeholder='Silakan pilih akun akumulasi penyusutan'
|
||||||
|
fullWidth
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<CustomAutocomplete
|
||||||
|
fullWidth
|
||||||
|
options={akunPenyusutanOptions}
|
||||||
|
value={formData.akunPenyusutan}
|
||||||
|
onChange={(event, newValue) => handleInputChange('akunPenyusutan', newValue)}
|
||||||
|
renderInput={params => (
|
||||||
|
<CustomTextField
|
||||||
|
{...params}
|
||||||
|
label='Akun penyusutan'
|
||||||
|
placeholder='Silakan pilih akbun penyusutan'
|
||||||
|
fullWidth
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
|
||||||
|
Nilai penyusutan per tahun *
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<Radio
|
||||||
|
checked={formData.depreciationType === 'percentage'}
|
||||||
|
onChange={() => handleInputChange('depreciationType', 'percentage')}
|
||||||
|
value='percentage'
|
||||||
|
name='depreciation-method'
|
||||||
|
color='primary'
|
||||||
|
size='small'
|
||||||
|
/>
|
||||||
|
<Box>
|
||||||
|
<CustomTextField
|
||||||
|
value={formData.nilaiPenyusuanPerTahun}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
handleInputChange('nilaiPenyusuanPerTahun', e.target.value)
|
||||||
|
}
|
||||||
|
disabled={formData.depreciationType !== 'percentage'}
|
||||||
|
sx={{
|
||||||
|
flex: 1,
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
border: 'none',
|
||||||
|
'& fieldset': {
|
||||||
|
border: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Box sx={{ mb: 3 }}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
|
||||||
|
Masa Manfaat *
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||||
|
<Radio
|
||||||
|
checked={formData.depreciationType === 'useful-life'}
|
||||||
|
onChange={() => handleInputChange('depreciationType', 'useful-life')}
|
||||||
|
value='useful-life'
|
||||||
|
name='depreciation-method'
|
||||||
|
color='primary'
|
||||||
|
size='small'
|
||||||
|
/>
|
||||||
|
<Box>
|
||||||
|
<CustomTextField
|
||||||
|
placeholder='Tahun'
|
||||||
|
value={formData.masaManfaatTahun}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
handleInputChange('masaManfaatTahun', e.target.value)
|
||||||
|
}
|
||||||
|
disabled={formData.depreciationType !== 'useful-life'}
|
||||||
|
sx={{
|
||||||
|
flex: 1,
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
borderRadius: 0,
|
||||||
|
borderRight: '1px solid #e0e0e0',
|
||||||
|
'& fieldset': {
|
||||||
|
border: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<CustomTextField
|
||||||
|
placeholder='Bulan'
|
||||||
|
value={formData.masaManfaatBulan}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
handleInputChange('masaManfaatBulan', e.target.value)
|
||||||
|
}
|
||||||
|
disabled={formData.depreciationType !== 'useful-life'}
|
||||||
|
sx={{
|
||||||
|
flex: 1,
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
borderRadius: 0,
|
||||||
|
'& fieldset': {
|
||||||
|
border: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={12}>
|
||||||
|
<Button
|
||||||
|
variant='text'
|
||||||
|
color='primary'
|
||||||
|
sx={{ textTransform: 'none', p: 0, minWidth: 'auto' }}
|
||||||
|
onClick={() => handleInputChange('showAdditionalOptions', !formData.showAdditionalOptions)}
|
||||||
|
>
|
||||||
|
{formData.showAdditionalOptions ? '- Sembunyikan opsi lainnya' : '+ Tampilkan opsi lainnya'}
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Additional Options */}
|
||||||
|
{formData.showAdditionalOptions && (
|
||||||
|
<>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 500, color: 'error.main' }}>
|
||||||
|
Metode Penyusutan *
|
||||||
|
</Typography>
|
||||||
|
<CustomAutocomplete
|
||||||
|
fullWidth
|
||||||
|
options={metodePenyusutanOptions}
|
||||||
|
value={formData.metodePenyusutan}
|
||||||
|
onChange={(event, newValue) => handleInputChange('metodePenyusutan', newValue)}
|
||||||
|
renderInput={params => (
|
||||||
|
<CustomTextField {...params} placeholder='Straight Line' fullWidth required />
|
||||||
|
)}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
|
||||||
|
Tanggal Mulai Penyusutan
|
||||||
|
</Typography>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
type='date'
|
||||||
|
value={formData.tanggalMulaiPenyusutan}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
handleInputChange('tanggalMulaiPenyusutan', e.target.value)
|
||||||
|
}
|
||||||
|
InputLabelProps={{
|
||||||
|
shrink: true
|
||||||
|
}}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 4 }}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
|
||||||
|
Akumulasi Penyusutan
|
||||||
|
</Typography>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
type='number'
|
||||||
|
value={formData.akumulasiPenyusutan}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
handleInputChange('akumulasiPenyusutan', e.target.value)
|
||||||
|
}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 4 }}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
|
||||||
|
Batas Biaya
|
||||||
|
</Typography>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
type='number'
|
||||||
|
value={formData.batasBiaya}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
handleInputChange('batasBiaya', e.target.value)
|
||||||
|
}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={{ xs: 12, md: 4 }}>
|
||||||
|
<Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
|
||||||
|
Nilai Residu
|
||||||
|
</Typography>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
type='number'
|
||||||
|
value={formData.nilaiResidu}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
handleInputChange('nilaiResidu', e.target.value)
|
||||||
|
}
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Submit Button */}
|
||||||
|
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
|
<Button variant='contained' color='primary' onClick={handleSubmit} sx={{ minWidth: 120 }}>
|
||||||
|
Simpan
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FixedAssetAddForm
|
||||||
19
src/views/apps/fixed-assets/add/FixedAssetAddHeader.tsx
Normal file
19
src/views/apps/fixed-assets/add/FixedAssetAddHeader.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
|
||||||
|
const FixedAssetAddHeader = () => {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
|
||||||
|
<div>
|
||||||
|
<Typography variant='h4' className='mbe-1'>
|
||||||
|
Tambah Asset Tetap
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FixedAssetAddHeader
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user