diff --git a/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/transaction/[transaction_id]/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/transaction/[transaction_id]/page.tsx new file mode 100644 index 0000000..b5b7a0d --- /dev/null +++ b/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/transaction/[transaction_id]/page.tsx @@ -0,0 +1,18 @@ +import CashBankDetailTransactionContent from '@/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent' +import CashBankDetailTransactionHeader from '@/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader' +import Grid from '@mui/material/Grid2' + +const TransactionPage = () => { + return ( + + + + + + + + + ) +} + +export default TransactionPage diff --git a/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx b/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx index e2bb454..d8b114a 100644 --- a/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx +++ b/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx @@ -338,7 +338,7 @@ const CashBankDetailTable = () => { color='primary' className='p-0 min-w-0 font-medium normal-case justify-start' component={Link} - href={getLocalizedUrl(`/apps/cashbank/${row.original.id}/detail`, locale as Locale)} + href={getLocalizedUrl(`/apps/cash-bank/1-10003/detail/transaction/${row.original.id}`, locale as Locale)} sx={{ textTransform: 'none', fontWeight: 500, diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent.tsx new file mode 100644 index 0000000..c96cf25 --- /dev/null +++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent.tsx @@ -0,0 +1,27 @@ +'use client' + +import Grid from '@mui/material/Grid2' +import CashBankDetailTransactionInformation from './CashBankDetailTransactionInformation' +import CashBankDetailTransactionLog from './CashBankDetailTransactionLog' +import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled' +import { useState } from 'react' + +const CashBankDetailTransactionContent = () => { + return ( + <> + + + + + {/* + + */} + + + + + + ) +} + +export default CashBankDetailTransactionContent diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader.tsx new file mode 100644 index 0000000..217d716 --- /dev/null +++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader.tsx @@ -0,0 +1,23 @@ +import { Typography } from '@mui/material' + +interface Props { + title: string + transaction: string +} + +const CashBankDetailTransactionHeader = ({ title, transaction }: Props) => { + return ( +
+
+ + {title} + + + Transaksi: {transaction} + +
+
+ ) +} + +export default CashBankDetailTransactionHeader diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionInformation.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionInformation.tsx new file mode 100644 index 0000000..3d8e1a2 --- /dev/null +++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionInformation.tsx @@ -0,0 +1,177 @@ +'use client' + +import React, { useState } from 'react' +import { Card, CardHeader, CardContent, Typography, Box, Button, IconButton } from '@mui/material' +import Grid from '@mui/material/Grid2' +import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled' + +interface PaymentData { + dari: string + nomor: string + tglTransaksi: string + referensi: string + status: string +} + +interface TransactionItem { + deskripsi: string + total: number +} + +const CashBankDetailTransactionInformation: React.FC = () => { + const [open, setOpen] = useState(false) + + const paymentData: PaymentData = { + dari: 'POS Customer', + nomor: 'IP/00030', + tglTransaksi: '10/09/2025', + referensi: 'Pembayaran INV/01/59A/4CY/00003', + status: 'Unreconciled' + } + + const transactionItems: TransactionItem[] = [ + { + deskripsi: 'Terima pembayaran tagihan INV/01/59A/4CY/00003', + total: 220890 + } + ] + + const totalAmount: number = transactionItems.reduce((sum, item) => sum + item.total, 0) + + const formatCurrency = (amount: number): string => { + return new Intl.NumberFormat('id-ID').format(amount) + } + + return ( + <> + + + + Unreconciled + + + + + + + + } + /> + + + {/* Payment Information */} + + + + + Dari + + + {paymentData.dari} + + + + + + Tanggal Transaksi + + {paymentData.tglTransaksi} + + + + + + + Nomor + + {paymentData.nomor} + + + + + Referensi + + {paymentData.referensi} + + + + + {/* Transaction Items Header */} + + + Deskripsi + + + Total + + + + {/* Transaction Items */} + + {transactionItems.map((item, index) => ( + + + + {item.deskripsi} + + + + + {formatCurrency(item.total)} + + + + ))} + + + {/* Total Section */} + + + + Total + + + {formatCurrency(totalAmount)} + + + + + + setOpen(!open)} /> + + ) +} + +export default CashBankDetailTransactionInformation diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionLog.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionLog.tsx new file mode 100644 index 0000000..cd19d0d --- /dev/null +++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionLog.tsx @@ -0,0 +1,59 @@ +'use client' + +import React from 'react' +import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material' + +interface LogEntry { + id: string + action: string + timestamp: string + user: string +} + +const CashBankDetailTransactionLog: React.FC = () => { + const logEntries: LogEntry[] = [ + { + id: '1', + action: 'Terakhir diubah oleh', + timestamp: '08 Sep 2025 18:26', + user: 'pada' + } + ] + + return ( + + + Pantau log perubahan data + + } + sx={{ pb: 1 }} + /> + + {logEntries.map(entry => ( + + + + + {entry.action} {entry.user} {entry.timestamp} + + + + ))} + + + ) +} + +export default CashBankDetailTransactionLog diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionReconsiled.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionReconsiled.tsx new file mode 100644 index 0000000..681069b --- /dev/null +++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionReconsiled.tsx @@ -0,0 +1,342 @@ +import React, { useState } from 'react' +import { + Drawer, + Typography, + Box, + IconButton, + Button, + TextField, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Checkbox, + Paper, + MenuItem, + Select, + FormControl +} from '@mui/material' +import Grid from '@mui/material/Grid2' + +interface Props { + open: boolean + handleClose: () => void +} + +const CashBankDetailTransactionReconciliationDrawer: React.FC = ({ 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 ( + + {/* Header */} + +
+ + Rekonsiliasi + + + + +
+ + + {/* Content */} + + + + {/* Mutasi Bank Section */} + + + Mutasi Bank + + + Cari mutasi bank yang sesuai dengan transaksi di Kledo + + + {/* Filter Section */} + + {/* Tanggal */} + + + Tanggal + +
+ setTanggalDari(e.target.value)} + sx={{ width: '150px' }} + /> + s/d + setTanggalSampai(e.target.value)} + sx={{ width: '150px' }} + /> +
+ + + {/* Total */} + + + Total + +
+ setTotalDari(e.target.value)} + sx={{ width: '150px' }} + /> + s/d + setTotalSampai(e.target.value)} + sx={{ width: '150px' }} + /> +
+ + + {/* Cari */} + + + Cari + +
+ setCari(e.target.value)} + sx={{ width: '300px' }} + /> + +
+ + + + {/* Table */} + + + + + + + + Detil + Kirim + Terima + + + + + +
+ + + Tidak ada data + +
+ + + +
+ + + {/* Information Text */} + + Transaksi yang sudah dipilih, tambah transaksi baru sesuai kebutuhan. + + + {/* Table */} + + + + + + + + Detil + Kirim + Terima + + + + + +
+ + + Tidak ada data + +
+ + + +
+ + + + {/* Summary Section */} + + + Total transaksi di Kledo harus sama dengan total mutasi + + + + + + Total transaksi di Kledo + + + + + 220.890 + + + + + + + + Total mutasi + + + + + 0 + + + + + + + + Selisih + + + + + 220.890 + + + + + + + {/* Transaction Summary */} + + + + + Detil + + {transactionData.detil} + + + + Kirim + + + {transactionData.kirim} + + + + + Terima + + + {transactionData.terima} + + + + + + + + Total + + + 220.890 + + + + + + + + + {/* Footer Buttons */} + +
+ + +
+ + + ) +} + +export default CashBankDetailTransactionReconciliationDrawer