Skip to content

C
ctas-box
Commit b7ff97de authored by Rais Aryaguna's avatar Rais Aryaguna
Browse files
Options

Merge branch 'develop' of ssh://gitlab.ortax.org:2222/fachri/ctas-box into develop

parents 4a474f6c d89056f3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2610 additions and 1514 deletions
src/main.tsx
View file @ b7ff97de
......@@ -6,6 +6,10 @@ import { LicenseInfo } from '@mui/x-license';
import App from './app';
import { routesSection } from './routes/sections';
import { ErrorBoundary } from './routes/components';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
// ----------------------------------------------------------------------
LicenseInfo.setLicenseKey(
......
src/pages/dashboard/index.tsx
View file @ b7ff97de
import { CONFIG } from 'src/global-config';
import { DashboardView } from 'src/sections/dashboard/view';
// import { OverviewAppView } from 'src/sections/overview/app/view';
// ----------------------------------------------------------------------
const metadata = { title: `Dashboard - ${CONFIG.appName}` };
export default function OverviewAppPage() {
return (
<>
<title>{metadata.title}</title>
{/* <OverviewAppView /> */}
{/* aaa */}
<DashboardView />
</>
);
......
src/pages/unifikasi/unifikasiNr.tsx
View file @ b7ff97de
import { CONFIG } from 'src/global-config';
import { NrListView } from 'src/sections/bupot-unifikasi/bupot-nr/view/nr-list-view';
// import { NrListView } from 'src/sections/bupot-unifikasi/bupot-nr/view';
import { NrListView } from 'src/sections/bupot-unifikasi/bupot-nr/view';
const metadata = { title: `E-Bupot Unifikasi- ${CONFIG.appName}` };
......
src/routes/paths.ts
View file @ b7ff97de
......@@ -143,30 +143,5 @@ export const paths = {
edit: (id: string) => `${ROOTS.DASHBOARD}/user/${id}/edit`,
demo: { edit: `${ROOTS.DASHBOARD}/user/${MOCK_ID}/edit` },
},
product: {
root: `${ROOTS.DASHBOARD}/product`,
new: `${ROOTS.DASHBOARD}/product/new`,
details: (id: string) => `${ROOTS.DASHBOARD}/product/${id}`,
edit: (id: string) => `${ROOTS.DASHBOARD}/product/${id}/edit`,
demo: {
details: `${ROOTS.DASHBOARD}/product/${MOCK_ID}`,
edit: `${ROOTS.DASHBOARD}/product/${MOCK_ID}/edit`,
},
},
invoice: {
root: `${ROOTS.DASHBOARD}/invoice`,
new: `${ROOTS.DASHBOARD}/invoice/new`,
details: (id: string) => `${ROOTS.DASHBOARD}/invoice/${id}`,
edit: (id: string) => `${ROOTS.DASHBOARD}/invoice/${id}/edit`,
demo: {
details: `${ROOTS.DASHBOARD}/invoice/${MOCK_ID}`,
edit: `${ROOTS.DASHBOARD}/invoice/${MOCK_ID}/edit`,
},
},
order: {
root: `${ROOTS.DASHBOARD}/order`,
details: (id: string) => `${ROOTS.DASHBOARD}/order/${id}`,
demo: { details: `${ROOTS.DASHBOARD}/order/${MOCK_ID}` },
},
},
};
src/routes/sections/dashboard.tsx
View file @ b7ff97de
......@@ -122,6 +122,7 @@ export const dashboardRoutes: RouteObject[] = [
{ path: 'dn/:id/:type', element: <OverviewUnifikasiRekamDnPage /> },
{ path: 'nr', element: <OverviewUnifikasiNrPage /> },
{ path: 'nr/new', element: <OverviewUnifikasiRekamNrPage /> },
{ path: 'nr/:id/:type', element: <OverviewUnifikasiRekamNrPage /> },
{ path: 'ssp', element: <OverviewUnifikasiSspPage /> },
{ path: 'ssp/new', element: <OverviewUnifikasiRekamSspPage /> },
{ path: 'digunggung', element: <OverviewUnifikasiDigunggungPage /> },
......
src/sections/bupot-unifikasi/bupot-dn/components/rekamDn/Identitas.tsx
View file @ b7ff97de
// import Box from '@mui/material/Box';
// import Button from '@mui/material/Button';
// import Grid from '@mui/material/Grid';
// import dayjs from 'dayjs';
// import React, { useEffect, useState } from 'react';
// import { useFormContext } from 'react-hook-form';
// import { Field } from 'src/components/hook-form';
// type IdentitasProps = {
// isPengganti: boolean;
// existingDn?: any; // data penuh dari API
// };
// const Identitas = ({ isPengganti, existingDn }: IdentitasProps) => {
// const { setValue, watch, getValues } = useFormContext();
// const tanggalPemotongan = watch('tglPemotongan');
// const maxKeterangan = 5;
// const [jumlahKeterangan, setJumlahKeterangan] = useState<number>(0);
// // 🧩 Auto isi tahun & masa pajak berdasarkan tanggalPemotongan
// useEffect(() => {
// if (tanggalPemotongan) {
// const date = dayjs(tanggalPemotongan);
// setValue('thnPajak', date.format('YYYY'));
// setValue('msPajak', date.format('MM'));
// } else {
// setValue('thnPajak', '');
// setValue('msPajak', '');
// }
// }, [tanggalPemotongan, setValue]);
// useEffect(() => {
// // ambil nilai form saat ini (setelah reset di parent)
// const currentValues = getValues();
// const arr = [
// currentValues.keterangan1,
// currentValues.keterangan2,
// currentValues.keterangan3,
// currentValues.keterangan4,
// currentValues.keterangan5,
// ];
// const count = arr.filter((k) => !!k && k.trim() !== '').length;
// console.log('🧠 Detected keterangan count:', count, arr);
// // kalau ada field terisi, render sebanyak itu
// if (count > 0) {
// setJumlahKeterangan(count);
// }
// }, [existingDn, getValues]);
// // ➕ Tambah field
// const handleTambah = () => {
// if (jumlahKeterangan < maxKeterangan) {
// setJumlahKeterangan((prev) => prev + 1);
// }
// };
// // ➖ Hapus field terakhir
// const handleHapus = () => {
// if (jumlahKeterangan > 0) {
// setValue(`keterangan${jumlahKeterangan}`, '');
// setJumlahKeterangan((prev) => prev - 1);
// }
// };
// console.log(existingDn);
// return (
// <>
// <Grid container rowSpacing={2} alignItems="center" columnSpacing={2} sx={{ mb: 4 }}>
// {/* 📅 Tanggal & Masa Pajak */}
// <Grid size={{ md: 6 }}>
// <Field.DatePicker
// name="tglPemotongan"
// label="Tanggal Pemotongan"
// format="DD/MM/YYYY"
// maxDate={dayjs()}
// />
// </Grid>
// <Grid size={{ md: 3 }}>
// <Field.DatePicker name="thnPajak" label="Tahun Pajak" view="year" format="YYYY" />
// </Grid>
// <Grid size={{ md: 3 }}>
// <Field.DatePicker name="msPajak" label="Masa Pajak" view="month" format="MM" />
// </Grid>
// {/* 🧾 NPWP dan NITKU */}
// <Grid size={{ md: 6 }}>
// <Field.Text
// name="idDipotong"
// label="NPWP"
// onChange={(e) => {
// const value = e.target.value.replace(/\D/g, '').slice(0, 16);
// setValue('idDipotong', value, { shouldValidate: true, shouldDirty: true });
// setValue('nitku', value.length === 16 ? value + '000000' : value, {
// shouldValidate: true,
// shouldDirty: true,
// });
// }}
// />
// </Grid>
// <Grid size={{ md: 6 }}>
// <Field.Text
// name="nitku"
// label="NITKU"
// onChange={(e) => {
// const value = e.target.value.replace(/\D/g, '').slice(0, 22);
// setValue('nitku', value, { shouldValidate: true, shouldDirty: true });
// }}
// />
// </Grid>
// {/* 👤 Nama dan Email */}
// <Grid size={{ md: 6 }}>
// <Field.Text name="namaDipotong" label="Nama" />
// </Grid>
// <Grid size={{ md: 6 }}>
// <Field.Text name="email" label="Email (optional)" />
// </Grid>
// </Grid>
// {/* ✏️ Tombol Tambah / Hapus Keterangan */}
// <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
// <Box
// sx={{
// borderRadius: '18px',
// border: jumlahKeterangan >= maxKeterangan ? '1px solid #eee' : '1px solid #2e7d3280',
// color: jumlahKeterangan >= maxKeterangan ? '#eee' : '#2e7d3280',
// p: '0px 10px',
// }}
// >
// <Button disabled={jumlahKeterangan >= maxKeterangan} onClick={handleTambah}>
// Tambah Keterangan
// </Button>
// </Box>
// <Box
// sx={{
// borderRadius: '18px',
// border: jumlahKeterangan === 0 ? '1px solid #eee' : '1px solid #f44336',
// color: jumlahKeterangan === 0 ? '#eee' : '#f44336',
// p: '0px 10px',
// }}
// >
// <Button disabled={jumlahKeterangan === 0} onClick={handleHapus}>
// Hapus Keterangan
// </Button>
// </Box>
// </Box>
// {/* 🗒️ Input Keterangan Tambahan */}
// <Box sx={{ mb: 3 }}>
// {Array.from({ length: jumlahKeterangan }).map((_, i) => (
// <Grid size={{ md: 12 }} key={i}>
// <Field.Text
// sx={{ mb: 2 }}
// name={`keterangan${i + 1}`}
// label={`Keterangan Tambahan ${i + 1}`}
// />
// </Grid>
// ))}
// </Box>
// </>
// );
// };
// export default Identitas;
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
......@@ -360,7 +188,7 @@ const Identitas = ({ isPengganti, existingDn }: IdentitasProps) => {
{/* 🗒️ Input Keterangan Tambahan */}
<Box sx={{ mb: 3 }}>
{Array.from({ length: jumlahKeterangan }).map((_, i) => (
<Grid size={{ md: 12 }} key={i}>
<Grid size={{ md: 12 }} key={`keterangan${i + 1}`}>
<Field.Text
sx={{ mb: 2 }}
name={`keterangan${i + 1}`}
......
src/sections/bupot-unifikasi/bupot-dn/hooks/useAdvancedFilterDn.tsx
View file @ b7ff97de
// type FilterItem = {
// field: string;
// operator: string;
// value?: string | number | Array<string | number> | null;
// join?: 'AND' | 'OR'; // optional: join connector BEFORE this item (first item usually undefined)
// };
// type BaseParams = Record<string, any>;
// export function useAdvancedFilter() {
// const numericFields = new Set(['masaPajak', 'tahunPajak', 'dpp', 'pphDipotong']);
// const dateFields = new Set(['created_at', 'updated_at']);
// const fieldMap: Record<string, string> = {
// noBupot: 'nomorBupot',
// };
// const dbField = (field: string) => fieldMap[field] ?? field;
// const escape = (v: string) => String(v).replace(/'/g, "''");
// const toDbDate = (value: string | Date) => {
// if (value instanceof Date) {
// const y = value.getFullYear();
// const m = String(value.getMonth() + 1).padStart(2, '0');
// const d = String(value.getDate()).padStart(2, '0');
// return `${y}${m}${d}`;
// }
// const digits = String(value).replace(/[^0-9]/g, '');
// if (digits.length >= 8) return digits.slice(0, 8);
// return digits;
// };
// const normalizeOp = (op: string) => op?.toString().trim();
// function buildAdvancedFilter(filters?: FilterItem[] | null) {
// if (!filters || filters.length === 0) return '';
// const exprs: string[] = []; // each item's expression
// const joins: ('AND' | 'OR')[] = []; // join before each expr (for item 0, push nothing/AND by default)
// for (let i = 0; i < filters.length; i++) {
// const f = filters[i];
// if (!f || !f.field) continue;
// const op = normalizeOp(f.operator ?? '');
// const fieldName = dbField(f.field);
// // build expression for this item
// let expr: string | null = null;
// // DATE handling
// if (dateFields.has(fieldName)) {
// const rawVal = f.value;
// if (!rawVal && !/is empty|is not empty/i.test(op)) {
// continue;
// }
// if (/^is$/i.test(op)) {
// const ymd = toDbDate(rawVal as string | Date);
// if (!ymd) continue;
// expr = `\"${fieldName}\" >= '${ymd} 00:00:00' AND \"${fieldName}\" <= '${ymd} 23:59:59'`;
// } else if (/is on or after/i.test(op)) {
// const ymd = toDbDate(rawVal as string | Date);
// if (!ymd) continue;
// expr = `\"${fieldName}\" >= '${ymd}'`;
// } else if (/is on or before/i.test(op)) {
// const ymd = toDbDate(rawVal as string | Date);
// if (!ymd) continue;
// expr = `\"${fieldName}\" <= '${ymd}'`;
// }
// }
// // EMPTY checks (user requested LOWER("col") IS NULL semantics)
// if (/is empty/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") IS NULL`;
// } else if (/is not empty/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") IS NOT NULL`;
// }
// // IS ANY OF handling
// if (!expr && /is any of/i.test(op)) {
// // collect values array
// let values: Array<string | number> = [];
// if (Array.isArray(f.value)) values = f.value as any;
// else if (typeof f.value === 'string')
// values = (f.value as string)
// .split(',')
// .map((s) => s.trim())
// .filter(Boolean);
// else if (f.value != null) values = [f.value as any];
// if ((values || []).length === 0) {
// expr = null;
// } else {
// // special-case fgStatus: need LIKE %val% OR LIKE %val2%
// if (fieldName === 'fgStatus' || fieldName === 'fg_status') {
// const ors = (values as any[]).map((v) => {
// const s = escape(String(v).toLowerCase());
// return `LOWER(\"${fieldName}\") LIKE LOWER('%${s}%')`;
// });
// expr = `(${ors.join(' OR ')})`;
// } else {
// // default: OR of equality (case-insensitive)
// const ors = (values as any[]).map((v) => {
// const s = escape(String(v).toLowerCase());
// return `LOWER(\"${fieldName}\") = '${s}'`;
// });
// expr = `(${ors.join(' OR ')})`;
// }
// }
// }
// // FGSTATUS special single-value is / is not / contains semantics
// if (!expr && (fieldName === 'fgStatus' || fieldName === 'fg_status')) {
// const valRaw = f.value == null ? '' : String(f.value);
// if (valRaw === '' && !/is any of|is empty|is not empty/i.test(op)) {
// expr = null;
// } else {
// const valEscaped = escape(valRaw.toLowerCase());
// if (/^is$/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") LIKE LOWER('%${valEscaped}%')`;
// } else if (/is not/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") NOT LIKE LOWER('%${valEscaped}%')`;
// }
// }
// }
// // GENERIC text/numeric handling when expr still not set
// if (!expr) {
// const valRaw = f.value == null ? '' : String(f.value);
// if (valRaw === '') {
// expr = null;
// } else {
// const valEscaped = escape(valRaw.toLowerCase());
// // numeric fields: operators (=, >=, <=)
// if (numericFields.has(fieldName) && /^(=|>=|<=)$/.test(op)) {
// expr = `\"${fieldName}\" ${op} '${valEscaped}'`;
// } else if (/^contains$/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") LIKE LOWER('%${valEscaped}%')`;
// } else if (/^equals$/i.test(op)) {
// // equals should produce IN (wrap single value as IN)
// // attempt to parse CSV if provided
// let values: string[] = [];
// if (Array.isArray(f.value))
// values = (f.value as any[]).map((v) => escape(String(v).toLowerCase()));
// else values = [escape(String(f.value).toLowerCase())];
// expr = `LOWER(\"${fieldName}\") IN (${values.map((v) => `'${v}'`).join(',')})`;
// } else if (/^(>=|<=|=)$/.test(op) && !numericFields.has(fieldName)) {
// expr = `LOWER(\"${fieldName}\") ${op} '${valEscaped}'`;
// } else if (/^(is)$/i.test(op)) {
// // fallback: treat as equals
// expr = `LOWER(\"${fieldName}\") = '${valEscaped}'`;
// } else {
// // fallback equality
// expr = `LOWER(\"${fieldName}\") = '${valEscaped}'`;
// }
// }
// }
// if (expr) {
// exprs.push(expr);
// // record join for this item (use provided join or default AND except for first item)
// const joinBefore = (f.join as 'AND' | 'OR') ?? (exprs.length > 1 ? 'AND' : 'AND');
// joins.push(joinBefore);
// }
// }
// // now combine exprs with joins; joins[i] is join BEFORE exprs[i]
// if (exprs.length === 0) return '';
// let out = exprs[0];
// for (let i = 1; i < exprs.length; i++) {
// const j = joins[i] ?? 'AND';
// out = `(${out}) ${j} (${exprs[i]})`;
// }
// return out;
// }
// function buildRequestParams(base: BaseParams = {}, advanced: string) {
// const out: BaseParams = { ...(base ?? {}) };
// if ('noBupot' in out) {
// out.nomorBupot = out.noBupot;
// delete out.noBupot;
// }
// out.advanced = advanced || '';
// return out;
// }
// return { buildAdvancedFilter, buildRequestParams } as const;
// }
// export default useAdvancedFilter;
type FilterItem = {
field: string;
operator: string;
......
src/sections/bupot-unifikasi/bupot-dn/hooks/useGetDn.tsx
View file @ b7ff97de
......@@ -92,24 +92,6 @@ const normalisePropsGetDn = (params: TGetListDataTableDn) => ({
updated_at: formatDateToDDMMYYYY(params.updated_at),
});
// ---------- normalizer for params request ----------
// const normalisPropsParmasGetDn = (params: any) => {
// const sorting = !isEmpty(params.sortModel)
// ? transformSortModelToSortApiPayload(params.sortModel)
// : {};
// return {
// ...params,
// page: (typeof params.page === 'number' ? params.page : 0) + 1,
// limit: params.pageSize,
// masaPajak: params.msPajak || null,
// tahunPajak: params.thnPajak || null,
// npwp: params.idDipotong || null,
// advanced: isEmpty(params.advanced) ? undefined : params.advanced,
// ...sorting,
// };
// };
const normalizeParams = (params: any) => {
const {
page = 0,
......
src/sections/bupot-unifikasi/bupot-dn/view/dnRekamView.tsx
View file @ b7ff97de
......@@ -24,36 +24,50 @@ import useUpload from '../hooks/useUpload';
import { useGetDnById } from '../hooks/useGetDn';
import ModalUploadDn from '../components/dialog/ModalUploadDn';
const bpuSchema = z.object({
tglPemotongan: z.string().nonempty('Tanggal Pemotongan harus diisi'),
thnPajak: z.string().nonempty('Tahun Pajak harus diisi'),
msPajak: z.string().nonempty('Masa Pajak harus diisi'),
idDipotong: z
.string()
.nonempty('NPWP harus diisi')
.regex(/^\d{16}$/, 'NPWP harus 16 digit'),
nitku: z
.string()
.nonempty('NITKU harus diisi')
.regex(/^\d{22}$/, 'NITKU harus 22 digit'),
namaDipotong: z.string().nonempty('Nama harus diisi'),
email: z.string().email({ message: 'Email tidak valid' }).optional().or(z.literal('')),
keterangan1: z.string().optional(),
keterangan2: z.string().optional(),
keterangan3: z.string().optional(),
keterangan4: z.string().optional(),
keterangan5: z.string().optional(),
kdObjPjk: z.string().nonempty('Kode Objek Pajak harus diisi'),
fgFasilitas: z.string().nonempty('Fasilitas harus diisi'),
noDokLainnya: z.string().nonempty('No Dokumen Lainnya harus diisi'),
jmlBruto: z.string().nonempty('Jumlah Penghasilan Bruto harus diisi'),
tarif: z.union([z.string().nonempty('Tarif harus diisi'), z.number()]),
pphDipotong: z.string().nonempty('PPh Yang Dipotong/Dipungut harus diisi'),
namaDok: z.string().nonempty('Nama Dokumen harus diisi'),
nomorDok: z.string().nonempty('Nomor Dokumen harus diisi'),
tglDok: z.string().nonempty('Tanggal Dokumen harus diisi'),
idTku: z.string().nonempty('Cabang harus diisi'),
});
const bpuSchema = z
.object({
tglPemotongan: z.string().nonempty('Tanggal Pemotongan harus diisi'),
thnPajak: z.string().nonempty('Tahun Pajak harus diisi'),
msPajak: z.string().nonempty('Masa Pajak harus diisi'),
idDipotong: z
.string()
.nonempty('NPWP harus diisi')
.regex(/^\d{16}$/, 'NPWP harus 16 digit'),
nitku: z
.string()
.nonempty('NITKU harus diisi')
.regex(/^\d{22}$/, 'NITKU harus 22 digit'),
namaDipotong: z.string().nonempty('Nama harus diisi'),
email: z.string().email({ message: 'Email tidak valid' }).optional().or(z.literal('')),
keterangan1: z.string().optional(),
keterangan2: z.string().optional(),
keterangan3: z.string().optional(),
keterangan4: z.string().optional(),
keterangan5: z.string().optional(),
kdObjPjk: z.string().nonempty('Kode Objek Pajak harus diisi'),
fgFasilitas: z.string().nonempty('Fasilitas harus diisi'),
noDokLainnya: z.string().optional(),
jmlBruto: z.string().nonempty('Jumlah Penghasilan Bruto harus diisi'),
tarif: z.union([z.string().nonempty('Tarif harus diisi'), z.number()]),
pphDipotong: z.string().nonempty('PPh Yang Dipotong/Dipungut harus diisi'),
namaDok: z.string().nonempty('Nama Dokumen harus diisi'),
nomorDok: z.string().nonempty('Nomor Dokumen harus diisi'),
tglDok: z.string().nonempty('Tanggal Dokumen harus diisi'),
idTku: z.string().nonempty('Cabang harus diisi'),
})
.superRefine((data, ctx) => {
// Field dianggap DISABLED kalau fgFasilitas kosong ('') atau '9'
const isDisabled = ['', '9'].includes(data.fgFasilitas);
// Jika tidak disabled, berarti aktif → wajib isi
if (!isDisabled && (!data.noDokLainnya || data.noDokLainnya.trim() === '')) {
ctx.addIssue({
path: ['noDokLainnya'],
code: 'custom',
message: 'No Dokumen Lainnya harus diisi',
});
}
});
const DnRekamView = () => {
const { id, type } = useParams<{ id?: string; type?: 'ubah' | 'pengganti' | 'new' }>();
......
src/sections/bupot-unifikasi/bupot-nr/components/CustomColumnsButton.tsx
View file @ b7ff97de
import React from 'react';
import { GridPreferencePanelsValue, useGridApiContext } from '@mui/x-data-grid-premium';
import type { GridPreferencePanelsValue } from '@mui/x-data-grid-premium';
import { useGridApiContext } from '@mui/x-data-grid-premium';
import { IconButton, Tooltip } from '@mui/material';
import ViewColumnIcon from '@mui/icons-material/ViewColumn';
......
src/sections/bupot-unifikasi/bupot-nr/components/CustomToolbar.tsx
View file @ b7ff97de
import * as React from 'react';
import { GridToolbarContainer, GridToolbarProps } from '@mui/x-data-grid-premium';
import type { GridToolbarProps } from '@mui/x-data-grid-premium';
import { GridToolbarContainer } from '@mui/x-data-grid-premium';
import { Stack, Divider, IconButton, Tooltip } from '@mui/material';
import { ActionItem } from '../types/types';
import type { ActionItem } from '../types/types';
import { CustomFilterButton } from './CustomFilterButton';
import CustomColumnsButton from './CustomColumnsButton';
......
src/sections/bupot-unifikasi/bupot-nr/components/dialog/ModalCancelDn.tsx → src/sections/bupot-unifikasi/bupot-nr/components/dialog/ModalCancelNr.tsx
View file @ b7ff97de
// import React, { useMemo, useState } from 'react';
// import { Stack, Button, Typography } from '@mui/material';
// import { useQueryClient } from '@tanstack/react-query';
// import { enqueueSnackbar } from 'notistack';
// import { DatePicker } from '@mui/x-date-pickers/DatePicker';
// import dayjs, { Dayjs } from 'dayjs';
// import minMax from 'dayjs/plugin/minMax';
// import DialogUmum from 'src/shared/components/dialog/DialogUmum';
// import DialogProgressBar from 'src/shared/components/dialog/DialogProgressBar';
// import useDialogProgressBar from 'src/shared/hooks/useDialogProgressBar';
// import useCancelDn from '../../hooks/useCancelDn';
// import { GridRowSelectionModel } from '@mui/x-data-grid-premium';
// dayjs.extend(minMax);
// // Helper format tanggal ke format API (DDMMYYYY)
// const formatDateDDMMYYYY = (d: Date) => {
// const dd = String(d.getDate()).padStart(2, '0');
// const mm = String(d.getMonth() + 1).padStart(2, '0');
// const yyyy = d.getFullYear();
// return `${dd}${mm}${yyyy}`;
// };
// interface ModalCancelDnProps {
// dataSelected?: any[]; // ✅ array of full row data (dari dataSelectedRef.current)
// setSelectionModel?: React.Dispatch<React.SetStateAction<GridRowSelectionModel | undefined>>;
// tableApiRef?: React.MutableRefObject<any>;
// isOpenDialogCancel: boolean;
// setIsOpenDialogCancel: (v: boolean) => void;
// successMessage?: string;
// }
// const ModalCancelDn: React.FC<ModalCancelDnProps> = ({
// dataSelected = [],
// setSelectionModel,
// tableApiRef,
// isOpenDialogCancel,
// setIsOpenDialogCancel,
// successMessage = 'Data berhasil dibatalkan',
// }) => {
// const queryClient = useQueryClient();
// const [tglPembatalan, setTglPembatalan] = useState<Dayjs | null>(null);
// const [isOpenDialogProgressBar, setIsOpenDialogProgressBar] = useState(false);
// const {
// numberOfData,
// numberOfDataFail,
// numberOfDataProcessed,
// numberOfDataSuccess,
// processSuccess,
// processFail,
// resetToDefault,
// status,
// } = useDialogProgressBar();
// const { mutateAsync } = useCancelDn({
// onSuccess: () => processSuccess(),
// onError: () => processFail(),
// });
// // ✅ Ambil tanggal pemotongan paling awal (minDate untuk DatePicker)
// const minPembatalanDate = useMemo(() => {
// if (!dataSelected.length) return null;
// const dates = dataSelected
// .map((d) => {
// const tgl = d.tglPemotongan || d.tglpemotongan;
// return tgl ? dayjs(tgl, ['YYYY-MM-DD', 'DD/MM/YYYY']) : null;
// })
// .filter((d): d is Dayjs => !!d && d.isValid());
// return dates.length > 0 ? dayjs.min(dates) : null;
// }, [dataSelected]);
// const handleCloseModal = () => {
// setIsOpenDialogCancel(false);
// resetToDefault();
// };
// const clearSelection = () => {
// tableApiRef?.current?.setRowSelectionModel?.([]);
// setSelectionModel?.(undefined);
// };
// const handleSubmit = async () => {
// if (!tglPembatalan) {
// enqueueSnackbar('Tanggal pembatalan harus diisi', { variant: 'warning' });
// return;
// }
// const formattedDate = formatDateDDMMYYYY(tglPembatalan.toDate());
// const ids = dataSelected.map((item) => String(item.id ?? item.internal_id));
// try {
// setIsOpenDialogProgressBar(true);
// const results = await Promise.allSettled(
// ids.map((id) => mutateAsync({ id, tglPembatalan: formattedDate }))
// );
// const rejected = results.filter((r) => r.status === 'rejected');
// const success = results.filter((r) => r.status === 'fulfilled');
// if (rejected.length > 0) {
// const errorMessages = rejected
// .map((r) => (r.status === 'rejected' ? r.reason?.message : ''))
// .filter(Boolean)
// .join('\n');
// enqueueSnackbar(
// <span style={{ whiteSpace: 'pre-line' }}>
// {errorMessages || `${rejected.length} dari ${ids.length} data gagal dibatalkan.`}
// </span>,
// { variant: 'error' }
// );
// processFail();
// } else {
// enqueueSnackbar(successMessage, { variant: 'success' });
// processSuccess();
// }
// // ✅ Langkah penting:
// // tunggu sampai React Query benar-benar refetch data baru
// await queryClient.invalidateQueries({ queryKey: ['unifikasi', 'dn'] });
// // ✅ lalu clear selection di DataGrid
// tableApiRef?.current?.setRowSelectionModel?.([]);
// setSelectionModel?.(undefined);
// handleCloseModal();
// } catch (error: any) {
// enqueueSnackbar(error?.message || 'Gagal membatalkan data', { variant: 'error' });
// } finally {
// setIsOpenDialogProgressBar(false);
// }
// };
// return (
// <>
// {/* ✅ Dialog reusable */}
// <DialogUmum
// isOpen={isOpenDialogCancel}
// onClose={handleCloseModal}
// title="Batal Bukti Pemotongan/Pemungutan PPh Unifikasi"
// >
// <Stack spacing={2}>
// <Typography>
// Silakan isi tanggal pembatalan. Tanggal tidak boleh sebelum tanggal pemotongan.
// </Typography>
// <DatePicker
// label="Tanggal Pembatalan"
// format="DD/MM/YYYY"
// value={tglPembatalan}
// maxDate={dayjs()} // tanggal maksimal = hari ini
// minDate={minPembatalanDate || undefined} // 🔹 minDate sesuai tglPemotongan
// onChange={(newValue) => setTglPembatalan(newValue)}
// slotProps={{
// textField: {
// size: 'medium',
// fullWidth: true,
// helperText:
// minPembatalanDate && `Tanggal minimal: ${minPembatalanDate.format('DD/MM/YYYY')}`,
// InputLabelProps: { shrink: true },
// sx: {
// '& .MuiOutlinedInput-root': {
// borderRadius: 1.5,
// backgroundColor: '#fff',
// '&:hover fieldset': {
// borderColor: '#123375 !important',
// },
// '&.Mui-focused fieldset': {
// borderColor: '#123375 !important',
// borderWidth: '1px',
// },
// },
// },
// },
// }}
// />
// <Stack direction="row" justifyContent="flex-end" spacing={1} mt={1}>
// <Button variant="outlined" onClick={handleCloseModal}>
// Batal
// </Button>
// <Button
// variant="contained"
// color="error"
// onClick={handleSubmit}
// disabled={!tglPembatalan}
// >
// Batalkan
// </Button>
// </Stack>
// </Stack>
// </DialogUmum>
// {/* ✅ Dialog progress bar */}
// <DialogProgressBar
// isOpen={isOpenDialogProgressBar}
// handleClose={() => {
// handleCloseModal();
// setIsOpenDialogProgressBar(false);
// }}
// numberOfData={numberOfData}
// numberOfDataProcessed={numberOfDataProcessed}
// numberOfDataFail={numberOfDataFail}
// numberOfDataSuccess={numberOfDataSuccess}
// status={status}
// />
// </>
// );
// };
// export default ModalCancelDn;
import React, { useEffect, useMemo, useState } from 'react';
import { Stack, Button, Typography } from '@mui/material';
import { useQueryClient } from '@tanstack/react-query';
import { enqueueSnackbar } from 'notistack';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs, { Dayjs } from 'dayjs';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import minMax from 'dayjs/plugin/minMax';
import DialogUmum from 'src/shared/components/dialog/DialogUmum';
import DialogProgressBar from 'src/shared/components/dialog/DialogProgressBar';
import useDialogProgressBar from 'src/shared/hooks/useDialogProgressBar';
import useCancelDn from '../../hooks/useCancelDn';
import { GridRowSelectionModel } from '@mui/x-data-grid-premium';
import useCancelDn from '../../hooks/useCancelNr';
import type { GridRowSelectionModel } from '@mui/x-data-grid-premium';
dayjs.extend(minMax);
......@@ -247,7 +31,7 @@ interface ModalCancelDnProps {
successMessage?: string;
}
const ModalCancelDn: React.FC<ModalCancelDnProps> = ({
const ModalCancelNr: React.FC<ModalCancelDnProps> = ({
dataSelected = [],
setSelectionModel,
tableApiRef,
......@@ -441,4 +225,4 @@ const ModalCancelDn: React.FC<ModalCancelDnProps> = ({
);
};
export default ModalCancelDn;
export default ModalCancelNr;
src/sections/bupot-unifikasi/bupot-nr/components/dialog/ModalCetakPdfDn.tsx → src/sections/bupot-unifikasi/bupot-nr/components/dialog/ModalCetakPdfNr.tsx
View file @ b7ff97de
......@@ -4,7 +4,7 @@ import DialogUmum from 'src/shared/components/dialog/DialogUmum';
import DialogContent from '@mui/material/DialogContent';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import useCetakPdfDn from '../../hooks/useCetakPdfDn';
import useCetakPdfDn from '../../hooks/useCetakPdfNr';
import normalizePayloadCetakPdf from '../../utils/normalizePayloadCetakPdf';
interface ModalCetakPdfDnProps {
......@@ -13,18 +13,7 @@ interface ModalCetakPdfDnProps {
onClose: () => void;
}
const formatTanggalIndo = (isoDate: string | undefined | null): string => {
if (!isoDate) return '';
const date = new Date(isoDate);
const formatter = new Intl.DateTimeFormat('id-ID', {
day: '2-digit',
month: 'long',
year: 'numeric',
});
return formatter.format(date);
};
const ModalCetakPdfDn: React.FC<ModalCetakPdfDnProps> = ({ payload, isOpen, onClose }) => {
const ModalCetakPdfNr: React.FC<ModalCetakPdfDnProps> = ({ payload, isOpen, onClose }) => {
const [pdfUrl, setPdfUrl] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(false);
......@@ -104,4 +93,4 @@ const ModalCetakPdfDn: React.FC<ModalCetakPdfDnProps> = ({ payload, isOpen, onCl
);
};
export default ModalCetakPdfDn;
export default ModalCetakPdfNr;
src/sections/bupot-unifikasi/bupot-nr/components/dialog/ModalDeleteDn.tsx → src/sections/bupot-unifikasi/bupot-nr/components/dialog/ModalDeleteNr.tsx
View file @ b7ff97de
import React, { useEffect, useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useQueryClient } from '@tanstack/react-query';
import { enqueueSnackbar } from 'notistack';
import DialogProgressBar from 'src/shared/components/dialog/DialogProgressBar';
import useDialogProgressBar from 'src/shared/hooks/useDialogProgressBar';
import dnApi from '../../utils/api';
import queryKey from '../../constant/queryKey';
import DialogConfirm from 'src/shared/components/dialog/DialogConfirm';
import { GridRowSelectionModel } from '@mui/x-data-grid-premium';
import useDeleteDn from '../../hooks/useDeleteDn';
import type { GridRowSelectionModel } from '@mui/x-data-grid-premium';
import useDeleteDn from '../../hooks/useDeleteNr';
interface ModalDeleteDnProps {
dataSelected?: GridRowSelectionModel;
......@@ -46,7 +44,7 @@ const normalizeSelection = (sel?: any): (string | number)[] => {
return [];
};
const ModalDeleteDn: React.FC<ModalDeleteDnProps> = ({
const ModalDeleteNr: React.FC<ModalDeleteDnProps> = ({
dataSelected,
setSelectionModel,
tableApiRef,
......@@ -145,4 +143,4 @@ const ModalDeleteDn: React.FC<ModalDeleteDnProps> = ({
);
};
export default ModalDeleteDn;
export default ModalDeleteNr;
src/sections/bupot-unifikasi/bupot-nr/components/dialog/ModalUploadDn.tsx → src/sections/bupot-unifikasi/bupot-nr/components/dialog/ModalUploadNr.tsx
View file @ b7ff97de
......@@ -3,7 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
import { enqueueSnackbar } from 'notistack';
import DialogProgressBar from 'src/shared/components/dialog/DialogProgressBar';
import useDialogProgressBar from 'src/shared/hooks/useDialogProgressBar';
import { GridRowSelectionModel } from '@mui/x-data-grid-premium';
import type { GridRowSelectionModel } from '@mui/x-data-grid-premium';
import useUpload from '../../hooks/useUpload';
import DialogUmum from 'src/shared/components/dialog/DialogUmum';
import Stack from '@mui/material/Stack';
......@@ -11,12 +11,12 @@ import Grid from '@mui/material/Grid';
import { Field } from 'src/components/hook-form';
import MenuItem from '@mui/material/MenuItem';
import { useSelector } from 'react-redux';
import { RootState } from 'src/store';
import type { RootState } from 'src/store';
import Agreement from 'src/shared/components/agreement/Agreement';
import { FormProvider, useForm } from 'react-hook-form';
import { LoadingButton } from '@mui/lab';
interface ModalUploadDnProps {
interface ModalUploadNrProps {
dataSelected?: GridRowSelectionModel;
setSelectionModel?: React.Dispatch<React.SetStateAction<GridRowSelectionModel | undefined>>;
tableApiRef?: React.MutableRefObject<any>;
......@@ -55,7 +55,7 @@ const normalizeSelection = (sel?: any): (string | number)[] => {
return [];
};
const ModalUploadDn: React.FC<ModalUploadDnProps> = ({
const ModalUploadNr: React.FC<ModalUploadNrProps> = ({
dataSelected,
setSelectionModel,
tableApiRef,
......@@ -66,7 +66,7 @@ const ModalUploadDn: React.FC<ModalUploadDnProps> = ({
}) => {
const queryClient = useQueryClient();
const uploadDn = useUpload();
const uploadNr = useUpload();
// custom hooks for progress state
const {
numberOfData,
......@@ -124,7 +124,7 @@ const ModalUploadDn: React.FC<ModalUploadDnProps> = ({
enqueueSnackbar(error?.message || 'Gagal upload data', { variant: 'error' });
} finally {
// sesuaikan queryKey jika perlu; tetap panggil invalidasi
queryClient.invalidateQueries({ queryKey: ['unifikasi', 'dn'] });
queryClient.invalidateQueries({ queryKey: ['unifikasi', 'nr'] });
}
};
......@@ -158,17 +158,17 @@ const ModalUploadDn: React.FC<ModalUploadDnProps> = ({
<LoadingButton
type="button"
disabled={!isCheckedAgreement}
// onClick={onSubmit}
onClick={async () => {
if (onConfirmUpload) {
await onConfirmUpload();
setIsOpenDialogUpload(false);
return;
}
await onSubmit();
}}
loading={uploadDn.isPending}
loading={uploadNr.isPending}
variant="contained"
sx={{ background: '#143B88' }}
>
......@@ -195,4 +195,4 @@ const ModalUploadDn: React.FC<ModalUploadDnProps> = ({
);
};
export default ModalUploadDn;
export default ModalUploadNr;
src/sections/bupot-unifikasi/bupot-nr/components/rekamNr/DokumenReferensi.tsx 0 → 100644
View file @ b7ff97de
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import MenuItem from '@mui/material/MenuItem';
import { useEffect } from 'react';
import { Field } from 'src/components/hook-form';
import { JENIS_DOKUMEN } from '../../constant';
import dayjs from 'dayjs';
import { useSelector } from 'react-redux';
import type { RootState } from 'src/store';
import { useFormContext } from 'react-hook-form';
const DokumenReferensi = () => {
const { watch, setValue } = useFormContext<Record<string, any>>();
const nitku = useSelector((state: RootState) => state.user.data.nitku_trial);
const nitkuValue = watch('idTku');
useEffect(() => {
if (!nitkuValue && nitku) {
setValue('idTku', nitku);
}
}, [nitku, nitkuValue, setValue]);
return (
<Grid sx={{ mb: 3 }} container rowSpacing={2} columnSpacing={2}>
<Grid sx={{ mt: 3 }} size={{ md: 12 }}>
<Divider sx={{ fontWeight: 'bold' }} textAlign="left">
Daftar Dokumen
</Divider>
</Grid>
<Grid size={{ md: 6 }}>
<Field.Select name="namaDok" label="Nama Dokumen">
{JENIS_DOKUMEN.map((item, index) => (
<MenuItem key={index} value={item.value}>
{item.label}
</MenuItem>
))}
</Field.Select>
</Grid>
<Grid size={{ md: 6 }}>
<Field.Text name="nomorDok" label="Nomor Dokumen" />
</Grid>
<Grid size={{ md: 6 }}>
<Field.DatePicker
name="tglDok"
label="Tanggal Dokumen"
maxDate={dayjs()}
minDate={dayjs('2025-01-01')}
/>
</Grid>
<Grid size={{ md: 6 }}>
<Field.Select name="idTku" label="NITKU Pemotong">
<MenuItem value={nitku}>{nitku}</MenuItem>
</Field.Select>
</Grid>
</Grid>
);
};
export default DokumenReferensi;
src/sections/bupot-unifikasi/bupot-nr/components/rekamNr/Identitas.tsx 0 → 100644
View file @ b7ff97de
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import { Field } from 'src/components/hook-form';
import type { TCountryResult } from '../../types/types';
import MenuItem from '@mui/material/MenuItem';
type IdentitasProps = {
isPengganti: boolean;
existingNr?: any; // Data penuh dari API (opsional, untuk edit/pengganti)
country: TCountryResult;
};
const Identitas = ({ isPengganti, existingNr, country }: IdentitasProps) => {
const { setValue, watch, getValues } = useFormContext();
const tanggalPemotongan = watch('tglPemotongan');
const maxKeterangan = 5;
const [jumlahKeterangan, setJumlahKeterangan] = useState<number>(0);
// 🧩 Auto isi Tahun & Masa Pajak berdasarkan tanggalPemotongan
useEffect(() => {
if (tanggalPemotongan) {
const date = dayjs(tanggalPemotongan);
setValue('thnPajak', date.format('YYYY'));
setValue('masaPajak', date.format('MM'));
} else {
setValue('thnPajak', '');
setValue('masaPajak', '');
}
}, [tanggalPemotongan, setValue]);
// 🧠 Saat data API sudah masuk (edit/pengganti)
// Gunakan getValues() agar langsung membaca nilai dari form (bukan nunggu watch)
useEffect(() => {
if (existingNr) {
const currentValues = getValues();
const arr = [
currentValues.keterangan1,
currentValues.keterangan2,
currentValues.keterangan3,
currentValues.keterangan4,
currentValues.keterangan5,
];
const count = arr.filter((k) => !!k && k.trim() !== '').length;
console.log('🧠 Detected existing keterangan:', arr, 'count:', count);
if (count > 0) {
setJumlahKeterangan(count);
}
}
}, [existingNr, getValues]);
// 🧩 Pantau perubahan manual user (Tambah/Hapus)
useEffect(() => {
const subscription = watch((values) => {
const arr = [
values.keterangan1,
values.keterangan2,
values.keterangan3,
values.keterangan4,
values.keterangan5,
];
const count = arr.filter((k) => !!k && k.trim() !== '').length;
setJumlahKeterangan(count);
});
return () => subscription.unsubscribe();
}, [watch]);
// ➕ Tambah field baru
const handleTambah = () => {
if (jumlahKeterangan < maxKeterangan) {
setJumlahKeterangan((prev) => prev + 1);
}
};
// ➖ Hapus field terakhir
const handleHapus = () => {
if (jumlahKeterangan > 0) {
setValue(`keterangan${jumlahKeterangan}`, '');
setJumlahKeterangan((prev) => prev - 1);
}
};
return (
<>
{/* 📋 Identitas Dasar */}
<Grid container rowSpacing={2} alignItems="center" columnSpacing={2} sx={{ mb: 4 }}>
{/* 📅 Tanggal & Masa Pajak */}
<Grid size={{ md: 6 }}>
<Field.DatePicker
name="tglPemotongan"
label="Tanggal Pemotongan"
format="DD/MM/YYYY"
maxDate={dayjs()}
disabled={isPengganti}
/>
</Grid>
<Grid size={{ md: 3 }}>
<Field.DatePicker
name="thnPajak"
label="Tahun Pajak"
view="year"
format="YYYY"
disabled={isPengganti}
/>
</Grid>
<Grid size={{ md: 3 }}>
<Field.DatePicker
name="masaPajak"
label="Masa Pajak"
view="month"
format="MM"
disabled={isPengganti}
/>
</Grid>
<Grid size={{ md: 6 }}>
<Field.Text name="idDipotong" label="Tax ID Number (TIN)" disabled={isPengganti} />
</Grid>
<Grid size={{ md: 6 }}>
<Field.Text name="namaDipotong" label="Nama" disabled={isPengganti} />
</Grid>
<Grid size={{ md: 12 }}>
<Field.Text
name="alamatDipotong"
label="Alamat"
multiline
minRows={2}
disabled={isPengganti}
sx={{
'& .MuiInputBase-inputMultiline': {
lineHeight: 1.6,
},
'& .MuiOutlinedInput-root': {
borderRadius: '8px',
},
'& .MuiOutlinedInput-notchedOutline': {
borderColor: '#bdbdbd',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: '#1976d2',
borderWidth: '2px',
},
}}
/>
</Grid>
<Grid size={{ md: 12 }}>
<Field.Select name="negaraDipotong" label="Negara" disabled={isPengganti}>
{country.map((item) => (
<MenuItem key={item.kode} value={item.kode}>
{`${item.nama}`}
</MenuItem>
))}
</Field.Select>
</Grid>
<Grid size={{ md: 6 }}>
<Field.Text name="tmptLahirDipotong" label="Tempat Lahir" disabled={isPengganti} />
</Grid>
<Grid size={{ md: 6 }}>
<Field.DatePicker
name="tglLahirDipotong"
label="Tanggal Lahir"
format="DD/MM/YYYY"
maxDate={dayjs()}
disabled={isPengganti}
/>
</Grid>
<Grid size={{ md: 6 }}>
<Field.Text name="nomorPaspor" label="No. Paspor" disabled={isPengganti} />
</Grid>
<Grid size={{ md: 6 }}>
<Field.Text name="nomorKitasKitap" label="No.KITAS/KITAP" disabled={isPengganti} />
</Grid>
</Grid>
{/* ✏️ Tombol Tambah / Hapus Keterangan */}
<Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
<Box
sx={{
borderRadius: '18px',
border: jumlahKeterangan >= maxKeterangan ? '1px solid #eee' : '1px solid #2e7d3280',
color: jumlahKeterangan >= maxKeterangan ? '#eee' : '#2e7d3280',
p: '0px 10px',
}}
>
<Button disabled={jumlahKeterangan >= maxKeterangan} onClick={handleTambah}>
Tambah Keterangan
</Button>
</Box>
<Box
sx={{
borderRadius: '18px',
border: jumlahKeterangan === 0 ? '1px solid #eee' : '1px solid #f44336',
color: jumlahKeterangan === 0 ? '#eee' : '#f44336',
p: '0px 10px',
}}
>
<Button disabled={jumlahKeterangan === 0} onClick={handleHapus}>
Hapus Keterangan
</Button>
</Box>
</Box>
{/* 🗒️ Input Keterangan Tambahan */}
<Box sx={{ mb: 3 }}>
{Array.from({ length: jumlahKeterangan }).map((_, i) => (
<Grid size={{ md: 12 }} key={`keterangan${i + 1}`}>
<Field.Text
sx={{ mb: 2 }}
name={`keterangan${i + 1}`}
label={`Keterangan Tambahan ${i + 1}`}
/>
</Grid>
))}
</Box>
</>
);
};
export default Identitas;
src/sections/bupot-unifikasi/bupot-nr/components/rekamNr/PanduanDnRekam.tsx 0 → 100644
View file @ b7ff97de
import type { FC} from 'react';
import { Fragment, memo } from 'react';
import { Box, Button, Card, CardContent, CardHeader, IconButton, Typography } from '@mui/material';
import { ChevronRightRounded, CloseRounded } from '@mui/icons-material';
import { m } from 'framer-motion';
import { PANDUAN_REKAM_DN } from '../../constant';
interface PanduanDnRekamProps {
handleOpen: () => void;
isOpen: boolean;
}
const PanduanDnRekam: FC<PanduanDnRekamProps> = ({ handleOpen, isOpen }) => (
<Box position="sticky">
{/* Tombol toggle */}
{!isOpen && (
<Box height="100%" display="flex" justifyContent="center" alignItems="center">
<Button
variant="contained"
sx={{
height: 'fit-content',
right: 0,
borderRadius: 0,
minWidth: 35,
pt: 3,
pb: 3,
fontWeight: 'bold',
fontSize: 16,
backgroundColor: '#143B88',
}}
size="small"
onClick={handleOpen}
>
<span
style={{
writingMode: 'vertical-rl',
transform: 'rotate(180deg)',
display: 'flex',
alignItems: 'center',
}}
>
Panduan Penggunaan
<ChevronRightRounded sx={{ fontSize: 30 }} />
</span>
</Button>
</Box>
)}
{/* Konten panduan */}
{isOpen && (
<m.div
initial={{ x: 20, opacity: 0 }}
animate={{ x: 0, opacity: 1, transition: { delay: 0.2 } }}
>
<Card>
<CardHeader
avatar={
<img src="/assets/icon_panduan_penggunaan_1.svg" alt="Panduan" loading="lazy" />
}
sx={{
backgroundColor: '#123375',
color: '#FFFFFF',
p: 2,
'& .MuiCardHeader-title': { fontSize: 18 },
}}
action={
<IconButton aria-label="close" onClick={handleOpen} sx={{ color: 'white' }}>
<CloseRounded />
</IconButton>
}
title="Panduan Penggunaan"
/>
<CardContent
sx={{
maxHeight: 300,
overflow: 'auto',
'&::-webkit-scrollbar': { width: 6 },
'&::-webkit-scrollbar-track': {
backgroundColor: '#f0f0f0',
borderRadius: 8,
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#123375',
borderRadius: 8,
},
'&::-webkit-scrollbar-thumb:hover': {
backgroundColor: '#0d2858',
},
scrollbarWidth: 'thin',
scrollbarColor: '#123375 #f0f0f0',
}}
>
{/* Deskripsi Form */}
<Typography variant="body2" sx={{ mb: 2, whiteSpace: 'pre-line' }}>
<strong>Deskripsi Form:</strong>
<br />
{PANDUAN_REKAM_DN.description.intro}
</Typography>
<Typography variant="body2">{PANDUAN_REKAM_DN.description.textList}</Typography>
<Box component="ol" sx={{ pl: 3, mb: 2 }}>
{PANDUAN_REKAM_DN.description.list.map((item, idx) => (
<Typography key={`desc-${idx}`} variant="body2" component="li">
{item}
</Typography>
))}
</Box>
<Typography variant="body2" sx={{ mb: 2 }}>
{PANDUAN_REKAM_DN.description.closing}
</Typography>
{/* Bagian-bagian */}
{PANDUAN_REKAM_DN.sections.map((section, i) => (
<Box key={`section-${i}`} sx={{ mb: 2 }}>
<Typography
variant="body2"
sx={{ fontWeight: 'bold', fontSize: '0.95rem', mb: 0.5 }}
>
{section.title}
</Typography>
<Box component="ul" sx={{ pl: 2, listStyle: 'disc' }}>
{section.items.map((item, idx) => (
<Fragment key={`item-${i}-${idx}`}>
<Box component="li" sx={{ mb: 0.5 }}>
<Typography variant="body2" component="span">
{item.text}
</Typography>
{item.subItems?.length > 0 && (
<Box component="ol" sx={{ pl: 3, listStyle: 'decimal' }}>
{item.subItems.map((sub, subIdx) => (
<Typography
key={`sub-${i}-${idx}-${subIdx}`}
variant="body2"
component="li"
>
{sub}
</Typography>
))}
</Box>
)}
</Box>
</Fragment>
))}
</Box>
</Box>
))}
</CardContent>
</Card>
</m.div>
)}
</Box>
);
export default memo(PanduanDnRekam);
src/sections/bupot-unifikasi/bupot-nr/constant/queryKey.tsx
View file @ b7ff97de
......@@ -2,14 +2,14 @@ const appRootKey = 'unifikasi';
const queryKey = {
getKodeObjekPajak: (params: any) => [appRootKey, 'kode-objek-pajak', params],
dn: {
all: (params: any) => [appRootKey, 'dn', params],
detail: (params: any) => [appRootKey, 'dn', 'detail', params],
draft: [appRootKey, 'dn', 'draft'],
delete: [appRootKey, 'dn', 'delete'],
upload: [appRootKey, 'dn', 'upload'],
cancel: [appRootKey, 'dn', 'cancel'],
cetakPdf: (params: any) => [appRootKey, 'dn-cetak-pdf', params],
nr: {
all: (params: any) => [appRootKey, 'nr', params],
detail: (params: any) => [appRootKey, 'nr', 'detail', params],
draft: [appRootKey, 'nr', 'draft'],
delete: [appRootKey, 'nr', 'delete'],
upload: [appRootKey, 'nr', 'upload'],
cancel: [appRootKey, 'nr', 'cancel'],
cetakPdf: (params: any) => [appRootKey, 'nr-cetak-pdf', params],
},
};
......
src/sections/bupot-unifikasi/bupot-nr/hooks/useAdvancedFilterDn.tsx → src/sections/bupot-unifikasi/bupot-nr/hooks/useAdvancedFilterNr.tsx
View file @ b7ff97de
// type FilterItem = {
// field: string;
// operator: string;
// value?: string | number | Array<string | number> | null;
// join?: 'AND' | 'OR'; // optional: join connector BEFORE this item (first item usually undefined)
// };
// type BaseParams = Record<string, any>;
// export function useAdvancedFilter() {
// const numericFields = new Set(['masaPajak', 'tahunPajak', 'dpp', 'pphDipotong']);
// const dateFields = new Set(['created_at', 'updated_at']);
// const fieldMap: Record<string, string> = {
// noBupot: 'nomorBupot',
// };
// const dbField = (field: string) => fieldMap[field] ?? field;
// const escape = (v: string) => String(v).replace(/'/g, "''");
// const toDbDate = (value: string | Date) => {
// if (value instanceof Date) {
// const y = value.getFullYear();
// const m = String(value.getMonth() + 1).padStart(2, '0');
// const d = String(value.getDate()).padStart(2, '0');
// return `${y}${m}${d}`;
// }
// const digits = String(value).replace(/[^0-9]/g, '');
// if (digits.length >= 8) return digits.slice(0, 8);
// return digits;
// };
// const normalizeOp = (op: string) => op?.toString().trim();
// function buildAdvancedFilter(filters?: FilterItem[] | null) {
// if (!filters || filters.length === 0) return '';
// const exprs: string[] = []; // each item's expression
// const joins: ('AND' | 'OR')[] = []; // join before each expr (for item 0, push nothing/AND by default)
// for (let i = 0; i < filters.length; i++) {
// const f = filters[i];
// if (!f || !f.field) continue;
// const op = normalizeOp(f.operator ?? '');
// const fieldName = dbField(f.field);
// // build expression for this item
// let expr: string | null = null;
// // DATE handling
// if (dateFields.has(fieldName)) {
// const rawVal = f.value;
// if (!rawVal && !/is empty|is not empty/i.test(op)) {
// continue;
// }
// if (/^is$/i.test(op)) {
// const ymd = toDbDate(rawVal as string | Date);
// if (!ymd) continue;
// expr = `\"${fieldName}\" >= '${ymd} 00:00:00' AND \"${fieldName}\" <= '${ymd} 23:59:59'`;
// } else if (/is on or after/i.test(op)) {
// const ymd = toDbDate(rawVal as string | Date);
// if (!ymd) continue;
// expr = `\"${fieldName}\" >= '${ymd}'`;
// } else if (/is on or before/i.test(op)) {
// const ymd = toDbDate(rawVal as string | Date);
// if (!ymd) continue;
// expr = `\"${fieldName}\" <= '${ymd}'`;
// }
// }
// // EMPTY checks (user requested LOWER("col") IS NULL semantics)
// if (/is empty/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") IS NULL`;
// } else if (/is not empty/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") IS NOT NULL`;
// }
// // IS ANY OF handling
// if (!expr && /is any of/i.test(op)) {
// // collect values array
// let values: Array<string | number> = [];
// if (Array.isArray(f.value)) values = f.value as any;
// else if (typeof f.value === 'string')
// values = (f.value as string)
// .split(',')
// .map((s) => s.trim())
// .filter(Boolean);
// else if (f.value != null) values = [f.value as any];
// if ((values || []).length === 0) {
// expr = null;
// } else {
// // special-case fgStatus: need LIKE %val% OR LIKE %val2%
// if (fieldName === 'fgStatus' || fieldName === 'fg_status') {
// const ors = (values as any[]).map((v) => {
// const s = escape(String(v).toLowerCase());
// return `LOWER(\"${fieldName}\") LIKE LOWER('%${s}%')`;
// });
// expr = `(${ors.join(' OR ')})`;
// } else {
// // default: OR of equality (case-insensitive)
// const ors = (values as any[]).map((v) => {
// const s = escape(String(v).toLowerCase());
// return `LOWER(\"${fieldName}\") = '${s}'`;
// });
// expr = `(${ors.join(' OR ')})`;
// }
// }
// }
// // FGSTATUS special single-value is / is not / contains semantics
// if (!expr && (fieldName === 'fgStatus' || fieldName === 'fg_status')) {
// const valRaw = f.value == null ? '' : String(f.value);
// if (valRaw === '' && !/is any of|is empty|is not empty/i.test(op)) {
// expr = null;
// } else {
// const valEscaped = escape(valRaw.toLowerCase());
// if (/^is$/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") LIKE LOWER('%${valEscaped}%')`;
// } else if (/is not/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") NOT LIKE LOWER('%${valEscaped}%')`;
// }
// }
// }
// // GENERIC text/numeric handling when expr still not set
// if (!expr) {
// const valRaw = f.value == null ? '' : String(f.value);
// if (valRaw === '') {
// expr = null;
// } else {
// const valEscaped = escape(valRaw.toLowerCase());
// // numeric fields: operators (=, >=, <=)
// if (numericFields.has(fieldName) && /^(=|>=|<=)$/.test(op)) {
// expr = `\"${fieldName}\" ${op} '${valEscaped}'`;
// } else if (/^contains$/i.test(op)) {
// expr = `LOWER(\"${fieldName}\") LIKE LOWER('%${valEscaped}%')`;
// } else if (/^equals$/i.test(op)) {
// // equals should produce IN (wrap single value as IN)
// // attempt to parse CSV if provided
// let values: string[] = [];
// if (Array.isArray(f.value))
// values = (f.value as any[]).map((v) => escape(String(v).toLowerCase()));
// else values = [escape(String(f.value).toLowerCase())];
// expr = `LOWER(\"${fieldName}\") IN (${values.map((v) => `'${v}'`).join(',')})`;
// } else if (/^(>=|<=|=)$/.test(op) && !numericFields.has(fieldName)) {
// expr = `LOWER(\"${fieldName}\") ${op} '${valEscaped}'`;
// } else if (/^(is)$/i.test(op)) {
// // fallback: treat as equals
// expr = `LOWER(\"${fieldName}\") = '${valEscaped}'`;
// } else {
// // fallback equality
// expr = `LOWER(\"${fieldName}\") = '${valEscaped}'`;
// }
// }
// }
// if (expr) {
// exprs.push(expr);
// // record join for this item (use provided join or default AND except for first item)
// const joinBefore = (f.join as 'AND' | 'OR') ?? (exprs.length > 1 ? 'AND' : 'AND');
// joins.push(joinBefore);
// }
// }
// // now combine exprs with joins; joins[i] is join BEFORE exprs[i]
// if (exprs.length === 0) return '';
// let out = exprs[0];
// for (let i = 1; i < exprs.length; i++) {
// const j = joins[i] ?? 'AND';
// out = `(${out}) ${j} (${exprs[i]})`;
// }
// return out;
// }
// function buildRequestParams(base: BaseParams = {}, advanced: string) {
// const out: BaseParams = { ...(base ?? {}) };
// if ('noBupot' in out) {
// out.nomorBupot = out.noBupot;
// delete out.noBupot;
// }
// out.advanced = advanced || '';
// return out;
// }
// return { buildAdvancedFilter, buildRequestParams } as const;
// }
// export default useAdvancedFilter;
type FilterItem = {
field: string;
operator: string;
......
src/sections/bupot-unifikasi/bupot-nr/hooks/useCancelDn.tsx deleted 100644 → 0
View file @ 4a474f6c
import { useMutation } from '@tanstack/react-query';
import { TCancelDnRequest, TCancelDnResponse } from '../types/types';
import dnApi from '../utils/api';
const useCancelDn = (props?: any) =>
useMutation<TCancelDnResponse, Error, TCancelDnRequest>({
mutationKey: ['cancel-dn'],
mutationFn: (payload) => dnApi.cancel(payload),
...props,
});
export default useCancelDn;
src/sections/bupot-unifikasi/bupot-nr/hooks/useCancelNr.tsx 0 → 100644
View file @ b7ff97de
import { useMutation } from '@tanstack/react-query';
import type { TCancelNrRequest, TCancelNrResponse } from '../types/types';
import nrApi from '../utils/api';
const useCancelNr = (props?: any) =>
useMutation<TCancelNrResponse, Error, TCancelNrRequest>({
mutationKey: ['cancel-nr'],
mutationFn: (payload) => nrApi.cancel(payload),
...props,
});
export default useCancelNr;
src/sections/bupot-unifikasi/bupot-nr/hooks/useCetakPdfDn.tsx → src/sections/bupot-unifikasi/bupot-nr/hooks/useCetakPdfNr.tsx
View file @ b7ff97de
import { useMutation } from '@tanstack/react-query';
import dnApi from '../utils/api';
import nrApi from '../utils/api';
const useCetakPdfDn = (options?: any) =>
const useCetakPdfNr = (options?: any) =>
useMutation({
mutationKey: ['unifikasi', 'dn', 'cetak-pdf'],
mutationFn: async (params: any) => dnApi.cetakPdfDetail(params),
mutationKey: ['unifikasi', 'nr', 'cetak-pdf'],
mutationFn: async (params: any) => nrApi.cetakPdfDetail(params),
...options,
});
export default useCetakPdfDn;
export default useCetakPdfNr;
src/sections/bupot-unifikasi/bupot-nr/hooks/useDeleteDn.tsx → src/sections/bupot-unifikasi/bupot-nr/hooks/useDeleteNr.tsx
View file @ b7ff97de
import { useMutation } from '@tanstack/react-query';
import { TDeleteDnRequest, TBaseResponseAPI } from '../types/types';
import dnApi from '../utils/api';
import type { TBaseResponseAPI, TDeleteNrRequest } from '../types/types';
import nrApi from '../utils/api';
const useDeleteDn = (props?: any) =>
useMutation<TBaseResponseAPI<null>, Error, TDeleteDnRequest>({
mutationKey: ['delete-dn'],
mutationFn: (payload) => dnApi.deleteDn(payload),
useMutation<TBaseResponseAPI<null>, Error, TDeleteNrRequest>({
mutationKey: ['delete-nr'],
mutationFn: (payload) => nrApi.deleteNr(payload),
...props,
});
......
src/sections/bupot-unifikasi/bupot-nr/hooks/useGetKodeObjekPajak.tsx → src/sections/bupot-unifikasi/bupot-nr/hooks/useGetKodeObjekPajakNr.tsx
View file @ b7ff97de
import { useQuery } from '@tanstack/react-query';
import { TBaseResponseAPI, TGetListDataKOPDnResult } from '../types/types';
import type { TBaseResponseAPI, TGetListDataKOPNrResult } from '../types/types';
import queryKey from '../constant/queryKey';
import dnApi from '../utils/api';
import nrApi from '../utils/api';
const useGetKodeObjekPajak = (params?: Record<string, any>) =>
useQuery<TBaseResponseAPI<TGetListDataKOPDnResult>>({
const useGetKodeObjekPajakNr = (params?: Record<string, any>) =>
useQuery<TBaseResponseAPI<TGetListDataKOPNrResult>>({
queryKey: queryKey.getKodeObjekPajak(params),
queryFn: () => dnApi.getKodeObjekPajakDn(params),
queryFn: () => nrApi.getKodeObjekPajakNr(params),
});
export default useGetKodeObjekPajak;
export default useGetKodeObjekPajakNr;
src/sections/bupot-unifikasi/bupot-nr/hooks/useGetNegara.tsx 0 → 100644
View file @ b7ff97de
import { useQuery } from '@tanstack/react-query';
import type { TCountryResult } from '../types/types';
import nrApi from '../utils/api';
export const useGetNegara = (params?: Record<string, any>) =>
useQuery<TCountryResult>({
queryKey: ['negara-nr'],
queryFn: async () => {
const res = await nrApi.getCountryNr(params);
return res.data; // ✅ langsung array negara
},
});
export default useGetNegara;
src/sections/bupot-unifikasi/bupot-nr/hooks/useGetDn.tsx → src/sections/bupot-unifikasi/bupot-nr/hooks/useGetNr.tsx
View file @ b7ff97de
import { isEmpty } from 'lodash';
import { useQuery } from '@tanstack/react-query';
import dnApi from '../utils/api';
import { TGetListDataTableDn, TGetListDataTableDnResult } from '../types/types';
import type {
// TGetListDataTableDnResult,
TGetListDataTableNr,
TGetListDataTableNrResult,
} from '../types/types';
import { FG_PDF_STATUS, FG_SIGN_STATUS } from '../constant';
import queryKey from '../constant/queryKey';
import nrApi from '../utils/api';
import dayjs from 'dayjs';
export type TGetDnApiWrapped = {
data: TGetListDataTableDnResult[];
data: TGetListDataTableNrResult[];
total: number;
pageSize: number;
page: number; // 1-based
......@@ -61,7 +66,7 @@ export const formatDateToDDMMYYYY = (dateString: string | null | undefined) => {
return `${day}/${month}/${year}`;
};
const normalisePropsGetDn = (params: TGetListDataTableDn) => ({
const normalisePropsGetNr = (params: TGetListDataTableNr) => ({
...params,
nomorSP2D: params.dokumen_referensi?.[0]?.nomorSP2D || '',
metodePembayaranBendahara: params.dokumen_referensi?.[0]?.metodePembayaranBendahara || '',
......@@ -74,7 +79,7 @@ const normalisePropsGetDn = (params: TGetListDataTableDn) => ({
fgStatus: params.fgStatus,
fgSignStatus: transformFgStatusToFgSignStatus(params.fgStatus),
fgPdf: getFgStatusPdf(params.link, transformFgStatusToFgSignStatus(params.fgStatus)),
fgLapor: params.fgLapor,
// fgLapor: params.fgLapor,
revNo: params.revNo,
thnPajak: params.tahunPajak,
msPajak: params.masaPajak,
......@@ -92,23 +97,55 @@ const normalisePropsGetDn = (params: TGetListDataTableDn) => ({
updated_at: formatDateToDDMMYYYY(params.updated_at),
});
// ---------- normalizer for params request ----------
const normalisPropsParmasGetDn = (params: any) => {
const sorting = !isEmpty(params.sortModel)
? transformSortModelToSortApiPayload(params.sortModel)
: {};
export const normalizeExistingNr = (res: any) => ({
// 🧾 Data Pajak Utama
tglPemotongan: res.tglpemotongan ?? '',
thnPajak: res.tahunPajak ?? '',
msPajak: res.masaPajak ?? '',
return {
...params,
page: (typeof params.page === 'number' ? params.page : 0) + 1,
limit: params.pageSize,
masaPajak: params.msPajak || null,
tahunPajak: params.thnPajak || null,
npwp: params.idDipotong || null,
advanced: isEmpty(params.advanced) ? undefined : params.advanced,
...sorting,
};
};
// 👤 Identitas Dipotong
idDipotong: res.npwpPemotong ?? '',
namaDipotong: res.namaDipotong ?? '',
alamatDipotong: res.alamatDipotong ?? '',
negaraDipotong: res.negaraDipotong ?? '',
tmptLahirDipotong: res.tmptLahirDipotong ?? '',
tglLahirDipotong:
res.tglLahirDipotong && res.tglLahirDipotong.length === 8
? dayjs(res.tglLahirDipotong, 'DDMMYYYY').format('YYYY-MM-DD')
: '',
nomorPaspor: res.nomorPaspor ?? '',
nomorKitasKitap: res.nomorKitasKitap ?? '',
// 🧠 Informasi Tambahan
email: res.email ?? '',
keterangan1: res.keterangan1 ?? '',
keterangan2: res.keterangan2 ?? '',
keterangan3: res.keterangan3 ?? '',
keterangan4: res.keterangan4 ?? '',
keterangan5: res.keterangan5 ?? '',
// 💰 Pajak dan Penghasilan
kodeObjekPajak: res.kodeObjekPajak ?? '',
fgFasilitas: res.sertifikatInsentifDipotong ?? '',
noDokLainnya: res.nomorSertifikatInsentif ?? '',
penghasilanBruto: res.penghasilanBruto ?? '',
normaPenghasilanNeto: res.normaPenghasilanNeto ?? '',
tarif: String(res.tarif ?? ''),
pphDipotong: String(res.pphDipotong ?? ''),
// 📄 Dokumen Referensi
namaDok: res.dokumen_referensi?.[0]?.dokReferensi ?? '',
nomorDok: res.dokumen_referensi?.[0]?.nomorDokumen ?? '',
tglDok: res.dokumen_referensi?.[0]?.tanggal_Dokumen ?? '',
// 🏢 Cabang / Unit
idTku: res.idTku ?? '',
// 🆔 Metadata tambahan
idBupot: res.idBupot ?? '',
noBupot: res.noBupot ?? '',
revNo: res.revNo ?? 0,
});
const normalizeParams = (params: any) => {
const {
......@@ -155,7 +192,7 @@ const normalizeParams = (params: any) => {
};
};
export const useGetDn = ({ params }: { params: any }) => {
export const useGetNr = ({ params }: { params: any }) => {
const { page, limit, advanced, sortingMode, sortingMethod } = params;
const normalized = normalizeParams(params);
......@@ -163,19 +200,19 @@ export const useGetDn = ({ params }: { params: any }) => {
queryKey: ['dn', page, limit, advanced, sortingMode, sortingMethod],
queryFn: async () => {
const res: any = await dnApi.getDn({ params: normalized });
const res: any = await nrApi.getNr({ params: normalized });
const rawData: any[] = Array.isArray(res?.data) ? res.data : res?.data ? [res.data] : [];
const total = Number(res?.total ?? res?.totalRow ?? 0);
let dataArray: TGetListDataTableDnResult[] = [];
let dataArray: TGetListDataTableNrResult[] = [];
const normalizeWithWorker = () =>
new Promise<TGetListDataTableDnResult[]>((resolve, reject) => {
new Promise<TGetListDataTableNrResult[]>((resolve, reject) => {
try {
const worker = new Worker(
new URL('../workers/normalizeDn.worker.js', import.meta.url),
new URL('../workers/normalizeNr.worker.js', import.meta.url),
{ type: 'module' }
);
......@@ -186,7 +223,7 @@ export const useGetDn = ({ params }: { params: any }) => {
reject(new Error(error));
} else {
worker.terminate();
resolve(data as TGetListDataTableDnResult[]);
resolve(data as TGetListDataTableNrResult[]);
}
};
......@@ -206,11 +243,11 @@ export const useGetDn = ({ params }: { params: any }) => {
dataArray = await normalizeWithWorker();
} else {
console.warn('⚠️ Worker not supported, using sync normalization');
dataArray = rawData.map(normalisePropsGetDn) as unknown as TGetListDataTableDnResult[];
dataArray = rawData.map(normalisePropsGetNr) as unknown as TGetListDataTableNrResult[];
}
} catch (err) {
console.error('❌ Worker failed, fallback to sync normalize:', err);
dataArray = rawData.map(normalisePropsGetDn) as unknown as TGetListDataTableDnResult[];
dataArray = rawData.map(normalisePropsGetNr) as unknown as TGetListDataTableNrResult[];
}
return {
......@@ -230,43 +267,14 @@ export const useGetDn = ({ params }: { params: any }) => {
});
};
export const useGetDnById = (id: string, options = {}) =>
export const useGetNrById = (id: string, options = {}) =>
useQuery({
queryKey: queryKey.dn.detail(id),
queryKey: queryKey.nr.detail(id),
queryFn: async () => {
console.log('🔍 Fetching getDnById with ID:', id);
const res = await dnApi.getDnById(id);
const res = await nrApi.getNrById(id);
console.log(res);
if (!res) throw new Error('Data tidak ditemukan');
const normalized = {
id: res.id ?? '',
tglPemotongan: res.tglpemotongan ?? '',
thnPajak: res.tahunPajak ?? '',
msPajak: res.masaPajak ?? '',
idDipotong: res.npwpPemotong ?? '',
nitku: res.idTku ?? '',
namaDipotong: res.nama ?? '',
email: res.email ?? '',
keterangan1: res.keterangan1 ?? '',
keterangan2: res.keterangan2 ?? '',
keterangan3: res.keterangan3 ?? '',
keterangan4: res.keterangan4 ?? '',
keterangan5: res.keterangan5 ?? '',
kdObjPjk: res.kodeObjekPajak ?? '',
fgFasilitas: res.sertifikatInsentifDipotong ?? '',
noDokLainnya: res.nomorSertifikatInsentif ?? '',
jmlBruto: res.dpp ?? '',
tarif: String(res.tarif ?? ''),
pphDipotong: String(res.pphDipotong ?? ''),
namaDok: res.dokumen_referensi?.[0]?.dokReferensi ?? '',
nomorDok: res.dokumen_referensi?.[0]?.nomorDokumen ?? '',
tglDok: res.dokumen_referensi?.[0]?.tanggal_Dokumen ?? '',
idTku: res.idTku ?? '',
revNo: res.revNo ?? 0,
noBupot: res.noBupot ?? '',
idBupot: res.idBupot ?? '',
};
const normalized = normalizeExistingNr(res);
console.log('✅ Normalized data:', normalized);
return normalized;
},
......@@ -275,4 +283,4 @@ export const useGetDnById = (id: string, options = {}) =>
...options,
});
export default useGetDn;
export default useGetNr;
src/sections/bupot-unifikasi/bupot-nr/hooks/usePphDipotong.tsx
View file @ b7ff97de
/* eslint-disable @typescript-eslint/no-shadow */
import { useEffect } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';
import { TGetListDataKOPDn } from '../types/types';
import type { TGetListDataKOPNr } from '../types/types';
const usePphDipotong = (kodeObjekPajakSelected?: TGetListDataKOPDn) => {
const usePphDipotong = (kodeObjekPajakSelected?: TGetListDataKOPNr) => {
const { watch, setValue, control } = useFormContext();
// ambil value dari form
......@@ -35,7 +36,6 @@ const usePphDipotong = (kodeObjekPajakSelected?: TGetListDataKOPDn) => {
name: ['thnPajak', 'fgFasilitas', 'fgIdDipotong', 'jmlBruto', 'tarif'],
});
// eslint-disable-next-line @typescript-eslint/no-shadow
const calculateAndSetPphDipotong = (
thnPajak: number,
fgFasilitas: string,
......@@ -67,6 +67,7 @@ const usePphDipotong = (kodeObjekPajakSelected?: TGetListDataKOPDn) => {
Number(handlerSetPphDipotong[4])
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [handlerSetPphDipotong]);
return {
......
src/sections/bupot-unifikasi/bupot-nr/hooks/useSaveDn.tsx deleted 100644 → 0
View file @ 4a474f6c
import { useMutation } from '@tanstack/react-query';
import dayjs from 'dayjs';
import dnApi from '../utils/api';
import { TPostDnRequest } from '../types/types';
const transformParams = ({ isPengganti = false, ...dnData }: any): TPostDnRequest => {
const {
id,
idBupot,
noBupot,
msPajak,
thnPajak,
idDipotong,
nitku,
namaDipotong,
fgFasilitas,
noDokLainnya,
kdObjPjk,
kdJnsPjk,
statusPph,
jmlBruto,
tarif,
pphDipotong,
kap,
kjs,
revNo: initialRevNo,
tglPemotongan,
namaDok,
nomorDok,
tglDok,
metodePembayaranBendahara,
nomorSP2D,
idTku,
email,
glAccount,
keterangan1,
keterangan2,
keterangan3,
keterangan4,
keterangan5,
} = dnData;
const dokReferensi = [
{
dokReferensi: namaDok || '',
nomorDokumen: nomorDok || '',
tanggal_Dokumen: tglDok ? dayjs(tglDok).format('DDMMYYYY') : '',
metodePembayaranBendahara: metodePembayaranBendahara || '',
nomorSP2D: nomorSP2D || '',
},
];
const revNo = isPengganti ? parseInt(initialRevNo || 0, 10) + 1 : parseInt(initialRevNo || 0, 10);
const npwpLog = localStorage.getItem('npwp_log') ?? '';
return {
id: !isPengganti ? (id ?? null) : null,
idBupot: idBupot ?? null,
noBupot: noBupot ?? null,
npwpPemotong: npwpLog,
idTku: idTku ?? '',
masaPajak: msPajak ? dayjs(msPajak).format('MM') : '',
tahunPajak: thnPajak ? Number(dayjs(thnPajak).format('YYYY')) : 0,
npwp: idDipotong ?? '',
nik: nitku ?? (idDipotong ? `${idDipotong}000000` : ''),
nama: namaDipotong ?? '',
revNo,
fgNpwpNik: 'true', // static
fgJnsBupot: 'BPU', // static
dataDetilBpu: {
sertifikatInsentifDipotong: fgFasilitas ?? '9',
nomorSertifikatInsentif: noDokLainnya ?? '',
kodeObjekPajak: kdObjPjk ?? '',
pasalPPh: kdJnsPjk ?? '',
statusPPh: statusPph ?? '',
dpp: jmlBruto ?? '',
tarif: tarif ?? '',
pphDipotong: pphDipotong ?? '',
kap: kap ?? '',
kjs: kjs ?? '',
dokReferensi,
},
tglPemotongan: tglPemotongan ? dayjs(tglPemotongan).format('DDMMYYYY') : '',
email: email ?? '',
glAccount: glAccount ?? '',
keterangan1: keterangan1 ?? '',
keterangan2: keterangan2 ?? '',
keterangan3: keterangan3 ?? '',
keterangan4: keterangan4 ?? '',
keterangan5: keterangan5 ?? '',
};
};
const useSaveDn = (props?: any) =>
useMutation({
mutationKey: ['Save-Dn'],
mutationFn: (params: any) => dnApi.saveDn(transformParams(params)),
...props,
});
export default useSaveDn;
src/sections/bupot-unifikasi/bupot-nr/hooks/useSaveNr.tsx 0 → 100644
View file @ b7ff97de
import { useMutation } from '@tanstack/react-query';
import dayjs from 'dayjs';
import type { TPostNrRequest } from '../types/types';
import nrApi from '../utils/api';
const transformParams = ({ isPengganti = false, ...nrData }: any): TPostNrRequest => {
const {
id,
idBupot,
noBupot,
npwpPemotong,
idTku,
masaPajak,
tahunPajak,
tinDipotong,
namaDipotong,
alamatDipotong,
negaraDipotong,
tglLahirDipotong,
tmptLahirDipotong,
nomorPaspor,
nomorKitasKitap,
sertifikatInsentifDipotong,
nomorSertifikatInsentif,
kodeObjekPajak,
pasalPph,
statusPph,
penghasilanBruto,
normaPenghasilanNeto,
tarif,
pphDipotong,
kap,
kjs,
metodePembayaranBendahara,
nomorSP2D,
tglPemotongan,
userId,
kanal,
revNo: initialRevNo,
glAccount,
keterangan1,
keterangan2,
keterangan3,
keterangan4,
keterangan5,
} = nrData;
// Increment revNo kalau pengganti
const revNo = isPengganti
? parseInt(initialRevNo?.toString() || '0', 10) + 1
: parseInt(initialRevNo?.toString() || '0', 10);
// Ambil NPWP dari localStorage kalau mau fallback
const npwpLog = localStorage.getItem('npwp_log') ?? '';
return {
id: !isPengganti ? (id ?? null) : null,
idBupot: idBupot ?? null,
noBupot: noBupot ?? null,
// Header-level Identitas
npwpPemotong: npwpPemotong ?? npwpLog,
idTku: idTku ?? '',
masaPajak: masaPajak ? dayjs(masaPajak).format('MM') : '',
tahunPajak: tahunPajak ? Number(dayjs(tahunPajak).format('YYYY')) : new Date().getFullYear(),
// Data Wajib Pajak Dipotong
tinDipotong: tinDipotong ?? '',
namaDipotong: namaDipotong ?? '',
alamatDipotong: alamatDipotong ?? '',
negaraDipotong: negaraDipotong ?? '',
tglLahirDipotong: tglLahirDipotong ? dayjs(tglLahirDipotong).format('DDMMYYYY') : '',
tmptLahirDipotong: tmptLahirDipotong ?? '',
nomorPaspor: nomorPaspor ?? '',
nomorKitasKitap: nomorKitasKitap ?? '',
keterangan1: keterangan1 ?? '',
keterangan2: keterangan2 ?? '',
keterangan3: keterangan3 ?? '',
keterangan4: keterangan4 ?? '',
keterangan5: keterangan5 ?? '',
// Fasilitas
sertifikatInsentifDipotong: sertifikatInsentifDipotong ?? '9',
nomorSertifikatInsentif: nomorSertifikatInsentif ?? '',
// Objek Pajak
kodeObjekPajak: kodeObjekPajak ?? '',
pasalPph: pasalPph ?? '',
statusPph: statusPph ?? '',
penghasilanBruto: Number(penghasilanBruto ?? 0),
normaPenghasilanNeto: Number(normaPenghasilanNeto ?? 0),
tarif: Number(tarif ?? 0),
pphDipotong: Number(pphDipotong ?? 0),
kap: Number(kap ?? 0),
kjs: Number(kjs ?? 0),
dokReferensi: (() => {
const { namaDok, nomorDok, tglDok } = nrData;
// pastikan tidak undefined dan tanggal valid
if (!namaDok || !nomorDok || !tglDok) return [];
const parsedDate = dayjs(tglDok);
const tanggalFormatted = parsedDate.isValid() ? parsedDate.format('DDMMYYYY') : '';
if (!tanggalFormatted) return [];
return [
{
dokReferensi: namaDok,
nomorDokumen: nomorDok,
tanggal_Dokumen: tanggalFormatted,
},
];
})(),
metodePembayaranBendahara: metodePembayaranBendahara ?? '',
nomorSP2D: nomorSP2D ?? '',
tglPemotongan: tglPemotongan ? dayjs(tglPemotongan).format('DDMMYYYY') : '',
userId: userId ?? '',
kanal: kanal ?? '',
revNo,
glAccount: glAccount ?? '',
};
};
const useSaveNr = (props?: any) =>
useMutation({
mutationKey: ['Save-Nr'],
mutationFn: (params: any) => nrApi.saveNr(transformParams(params)),
...props,
});
export default useSaveNr;
src/sections/bupot-unifikasi/bupot-nr/hooks/useUpload.tsx
View file @ b7ff97de
// hooks/useUpload.ts
import { useMutation } from '@tanstack/react-query';
import dnApi from '../utils/api';
import nrApi from '../utils/api';
const useUpload = (props?: any) =>
useMutation({
mutationKey: ['upload-dn'],
mutationFn: (payload: { id: string | number }) => dnApi.upload(payload),
mutationKey: ['upload-nr'],
mutationFn: (payload: { id: string | number }) => nrApi.upload(payload),
...props,
});
......
src/sections/bupot-unifikasi/bupot-nr/types/types.ts 0 → 100644
View file @ b7ff97de
export type TBaseResponseAPI<T> = {
status: string;
message: string;
data: T;
time: string;
code: number;
metaPage: TBaseResponseMetaPage;
total?: number;
};
type TBaseResponseMetaPage = {
pageNum: number | null;
rowPerPage: number | null;
totalRow: number;
};
export type TGetListDataTableNr = {
id: number;
npwpPemotong: string;
idTku: string;
masaPajak: string;
tahunPajak: string;
fgNpwpNik: string;
npwp: string;
nik: string;
nama: string;
sertifikatInsentifDipotong: string;
nomorSertifikatInsentif: string;
kodeObjekPajak: string;
pasalPPh: string;
statusPPh: string;
dpp: string;
tarif: string;
pphDipotong: string;
kap: string;
kjs: string;
tglpemotongan: string;
userId: string;
created_at: string;
updated_at: string;
created_by: string;
updated_by: string;
fgStatus: string;
internal_id: string;
dokumen_referensi: {
dokReferensi: string;
nomorDokumen: string;
tanggal_Dokumen: string;
metodePembayaranBendahara: string;
nomorSP2D: string;
}[];
revNo: number;
noBupot: string;
idBupot: string;
npwpNikPenandatangan: string;
namaPenandatangan: string;
link: string | null;
errorMsg: string | null;
email: string | null;
glAccount: string;
fgkirimemail: string;
glName: string | null;
keterangan1: string | null;
keterangan2: string | null;
keterangan3: string | null;
keterangan4: string | null;
keterangan5: string | null;
};
export type TGetListDataTableNrResult = TGetListDataTableNr[];
export type TGetListDataKOPNr = {
kode: string;
nama: string;
pasal: string;
statuspph: string;
normanetto: string;
tarif: string;
kap: string;
kjs: string;
noCertificate: number;
certofDomicile: number;
otherCert: number;
};
export type TGetListDataKOPNrResult = TGetListDataKOPNr[];
export type ActionItem = {
title: string;
icon: React.ReactNode;
func?: () => void;
disabled?: boolean;
};
export type TDokReferensi = {
dokReferensi: string;
nomorDokumen: string;
tanggal_Dokumen: string; // format: DDMMYYYY
};
export type TPostNrRequest = {
id: string | null;
idBupot: string;
noBupot: string;
npwpPemotong: string;
idTku: string;
masaPajak: string;
tahunPajak: number;
tinDipotong: string;
namaDipotong: string;
alamatDipotong: string;
negaraDipotong: string;
tglLahirDipotong: string;
tmptLahirDipotong: string;
nomorPaspor: string;
nomorKitasKitap: string;
sertifikatInsentifDipotong: string;
nomorSertifikatInsentif: string;
kodeObjekPajak: string;
pasalPph: string;
statusPph: string;
penghasilanBruto: number;
normaPenghasilanNeto: number;
tarif: number;
pphDipotong: number;
kap: number;
kjs: number;
dokReferensi: TDokReferensi[];
metodePembayaranBendahara: string;
nomorSP2D: string;
tglPemotongan: string;
userId: string;
kanal: string;
revNo: number;
glAccount: string;
keterangan1: string | null;
keterangan2: string | null;
keterangan3: string | null;
keterangan4: string | null;
keterangan5: string | null;
};
export type TCountry = {
kode: string;
nama: string;
};
export type TCountryResult = TCountry[];
export type TPostUpload = {
id: string;
};
export type TDeleteNrRequest = {
id: string;
};
export type TCancelNrRequest = {
id: string | number;
tglPembatalan: string; // format: DDMMYYYY
};
export type TCancelNrResponse = TBaseResponseAPI<{
id: string | number;
statusBatal?: string;
message?: string;
}>;
src/sections/bupot-unifikasi/bupot-nr/utils/api.tsx
View file @ b7ff97de
import axios from 'axios';
import {
import type {
TBaseResponseAPI,
TCancelDnRequest,
TCancelDnResponse,
TDeleteDnRequest,
TGetListDataKOPDnResult,
TGetListDataTableDnResult,
TPostDnRequest,
TPostUpload,
TCancelNrRequest,
TCancelNrResponse,
TCountryResult,
TDeleteNrRequest,
TGetListDataKOPNrResult,
TGetListDataTableNrResult,
TPostNrRequest,
} from '../types/types';
import unifikasiClient from './unifikasiClient';
const dnApi = () => {};
const nrApi = () => {};
const axiosCetakPdf = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API_URL_CETAK,
......@@ -22,11 +23,11 @@ const axiosCetakPdf = axios.create({
});
// API untuk get list table
dnApi.getDn = async (config: any) => {
nrApi.getNr = async (config: any) => {
const {
data: { status, message, metaPage, data },
data: { message, metaPage, data },
status: statusCode,
} = await unifikasiClient.get<TBaseResponseAPI<TGetListDataTableDnResult>>('IF_TXR_028/bpu', {
} = await unifikasiClient.get<TBaseResponseAPI<TGetListDataTableNrResult>>('IF_TXR_029/', {
...config,
});
......@@ -37,9 +38,24 @@ dnApi.getDn = async (config: any) => {
return { total: metaPage ? Number(metaPage.totalRow) : 0, data };
};
dnApi.getKodeObjekPajakDn = async (params?: Record<string, any>) => {
const response = await unifikasiClient.get<TBaseResponseAPI<TGetListDataKOPDnResult>>(
'/sandbox/mst_kop_bpu',
nrApi.getKodeObjekPajakNr = async (params?: Record<string, any>) => {
const response = await unifikasiClient.get<TBaseResponseAPI<TGetListDataKOPNrResult>>(
'/sandbox/mst_kop_bpnr',
{ params }
);
const body = response.data;
if (response.status !== 200 || body.status !== 'success') {
throw new Error(body.message);
}
return body;
};
nrApi.getCountryNr = async (params?: Record<string, any>) => {
const response = await unifikasiClient.get<TBaseResponseAPI<TCountryResult>>(
'/sandbox/mst_negara',
{ params }
);
......@@ -52,11 +68,10 @@ dnApi.getKodeObjekPajakDn = async (params?: Record<string, any>) => {
return body;
};
dnApi.saveDn = async (config: TPostDnRequest) => {
nrApi.saveNr = async (config: TPostNrRequest) => {
const {
data: { status, message, data, code },
status: statusCode,
} = await unifikasiClient.post<TBaseResponseAPI<TPostDnRequest>>('/IF_TXR_028/bpu', {
data: { message, data, code },
} = await unifikasiClient.post<TBaseResponseAPI<TPostNrRequest>>('/IF_TXR_029/', {
...config,
});
if (code === 0) {
......@@ -66,8 +81,8 @@ dnApi.saveDn = async (config: TPostDnRequest) => {
return data;
};
dnApi.getDnById = async (id: string) => {
const res = await unifikasiClient.get('/IF_TXR_028/bpu', { params: { id } });
nrApi.getNrById = async (id: string) => {
const res = await unifikasiClient.get('/IF_TXR_029/', { params: { id } });
const {
data: { status, message, data },
......@@ -75,8 +90,8 @@ dnApi.getDnById = async (id: string) => {
} = res;
if (statusCode !== 200 || status?.toLowerCase() !== 'success') {
console.error('getDnById failed:', { statusCode, status, message });
throw new Error(message || 'Gagal mengambil data DN');
console.error('getNrId failed:', { statusCode, status, message });
throw new Error(message || 'Gagal mengambil data NR');
}
const dnData = Array.isArray(data) ? data[0] : data;
......@@ -84,40 +99,39 @@ dnApi.getDnById = async (id: string) => {
return dnData;
};
dnApi.upload = async ({ id }: { id: string | number }) => {
nrApi.upload = async ({ id }: { id: string | number }) => {
const {
data: { status, message, data, code },
status: statusCode,
} = await unifikasiClient.post('/IF_TXR_028/bpu/upload', { id });
} = await unifikasiClient.post('/IF_TXR_029/upload', { id });
return { status, message, data, code, statusCode };
};
dnApi.deleteDn = async (payload: TDeleteDnRequest, config?: Record<string, any>): Promise<any> => {
nrApi.deleteNr = async (payload: TDeleteNrRequest, config?: Record<string, any>): Promise<any> => {
const {
data: { status, message, data },
status: statusCode,
} = await unifikasiClient.post<TBaseResponseAPI<any>>('/IF_TXR_028/bpu/delete', payload, {
} = await unifikasiClient.post<TBaseResponseAPI<any>>('/IF_TXR_029/delete', payload, {
...config,
});
if (statusCode !== 200 || status?.toLowerCase() === 'error') {
throw new Error(message || 'Gagal menghapus data DN');
throw new Error(message || 'Gagal menghapus data NR');
}
return data;
};
dnApi.cancel = async ({ id, tglPembatalan }: TCancelDnRequest): Promise<TCancelDnResponse> => {
nrApi.cancel = async ({ id, tglPembatalan }: TCancelNrRequest): Promise<TCancelNrResponse> => {
const {
data: { status, message, data, code, time, metaPage, total },
status: statusCode,
} = await unifikasiClient.post('/IF_TXR_028/bpu/batal', {
} = await unifikasiClient.post('/IF_TXR_029/batal', {
id,
tglPembatalan,
});
console.log('Cancel DN response:', { code, message, status });
console.log('Cancel NR response:', { code, message, status });
if (code === 0) {
throw new Error(message || 'Gagal membatalkan data');
}
......@@ -133,8 +147,8 @@ dnApi.cancel = async ({ id, tglPembatalan }: TCancelDnRequest): Promise<TCancelD
};
};
dnApi.cetakPdfDetail = async (payload: Record<string, any>) => {
const response = await axiosCetakPdf.post('/report/ctas/bpu', payload);
nrApi.cetakPdfDetail = async (payload: Record<string, any>) => {
const response = await axiosCetakPdf.post('/report/ctas/bpnr', payload);
const body = response.data;
......@@ -153,4 +167,4 @@ dnApi.cetakPdfDetail = async (payload: Record<string, any>) => {
return body;
};
export default dnApi;
export default nrApi;
src/sections/bupot-unifikasi/bupot-nr/utils/normalizePayloadCetakPdf.ts
View file @ b7ff97de
......@@ -43,11 +43,11 @@ export const normalizePayloadCetakPdf = (payload: Record<string, any>) => {
adjusted.metodePembayaranBendahara = adjusted.metodePembayaranBendahara || '-';
adjusted.nomorSP2D = adjusted.nomorSP2D || '-';
adjusted.npwpDipotong = adjusted.npwp || '';
adjusted.namaDipotong = adjusted.nama || '';
adjusted.namaDipotong = adjusted.namaDipotong || '';
adjusted.nitkuDipotong = adjusted.nik || '';
adjusted.namaPemotong = adjusted.nama || '';
adjusted.nitkuPemotong = adjusted.nik || '';
adjusted.penghasilanBruto = adjusted.dpp || '';
adjusted.namaPemotong = adjusted.namaDipotong || '';
adjusted.nitkuPemotong = adjusted.idTku || '';
adjusted.penghasilanBruto = adjusted.penghasilanBruto || '';
adjusted.tanggal_Dokumen = adjusted.dokumen_referensi[0].tanggal_Dokumen;
adjusted.status = 'Proforma';
adjusted.msPajak = adjusted.masaPajak;
......
src/sections/bupot-unifikasi/bupot-nr/view/nr-list-view.tsx
View file @ b7ff97de
......@@ -29,18 +29,20 @@ import {
// import { CustomToolbar } from '../components/CustomToolbar';
import { formatRupiah } from 'src/shared/FormatRupiah/FormatRupiah';
import { FG_STATUS_DN } from '../constant';
import ModalDeleteDn from '../components/dialog/ModalDeleteDn';
import ModalUploadDn from '../components/dialog/ModalUploadDn';
import ModalCancelDn from '../components/dialog/ModalCancelDn';
import ModalCetakPdfDn from '../components/dialog/ModalCetakPdfDn';
import useGetDn from '../hooks/useGetDn';
import ModalDeleteNr from '../components/dialog/ModalDeleteNr';
import ModalUploadNr from '../components/dialog/ModalUploadNr';
import ModalCancelNr from '../components/dialog/ModalCancelNr';
import ModalCetakPdfNr from '../components/dialog/ModalCetakPdfNr';
import { useGetNr } from '../hooks/useGetNr';
import { enqueueSnackbar } from 'notistack';
import { usePaginationStore } from '../store/paginationStore';
import StatusChip from '../components/StatusChip';
import { useDebounce, useThrottle } from 'src/shared/hooks/useDebounceThrottle';
import useGetKodeObjekPajak from '../hooks/useGetKodeObjekPajak';
import useAdvancedFilter from '../hooks/useAdvancedFilterDn';
import useGetKodeObjekPajak from '../hooks/useGetKodeObjekPajakNr';
import useAdvancedFilter from '../hooks/useAdvancedFilterNr';
import { CustomToolbar } from '../components/CustomToolbar';
import { useSelector } from 'react-redux';
import type { RootState } from 'src/store';
export type IColumnGrid = GridColDef & {
field:
......@@ -48,13 +50,14 @@ export type IColumnGrid = GridColDef & {
| 'noBupot'
| 'masaPajak'
| 'tahunPajak'
| 'kdObjPjk'
| 'kodeObjekPajak'
| 'pasalPPh'
| 'npwp'
| 'nama'
| 'dpp'
| 'npwpPemotong'
| 'namaDipotong'
| 'penghasilanBruto'
| 'pphDipotong'
| 'idTku'
| 'negaraDipotong'
| 'dokReferensi'
| 'nomorDokumen'
| 'created_by'
......@@ -75,13 +78,14 @@ type TKodeObjekPajak = {
nama: string;
pasal: string;
statuspph: string;
normanetto: string;
};
export function NrListView() {
const apiRef = useGridApiRef();
const navigate = useNavigate();
const tableKey = 'dn';
const tableKey = 'nr';
const page = usePaginationStore((s) => s.tables[tableKey]?.page ?? 0);
const pageSize = usePaginationStore((s) => s.tables[tableKey]?.pageSize ?? 10);
......@@ -104,7 +108,8 @@ export function NrListView() {
const [selectionVersion, setSelectionVersion] = useState(0);
const [kodeObjekPajaks, setKodeObjekPajaks] = useState<TKodeObjekPajak[]>([]);
const { data: kodeObjekPajak, isLoading: isLoadingKop } = useGetKodeObjekPajak();
const { data: kodeObjekPajak } = useGetKodeObjekPajak();
const signer = useSelector((state: RootState) => state.user.data.signer);
const { buildAdvancedFilter, buildRequestParams } = useAdvancedFilter();
......@@ -127,7 +132,7 @@ export function NrListView() {
return buildRequestParams(baseParams, advanced);
}, [page, pageSize, sortModel, filterModel.items, buildAdvancedFilter, buildRequestParams]);
const { data, isFetching, refetch } = useGetDn({
const { data, isFetching, refetch } = useGetNr({
params,
});
const idStatusMapRef = useRef<Map<string | number, string>>(new Map());
......@@ -174,6 +179,7 @@ export function NrListView() {
// ---------- status options and columns (kept identical to your original) ----------
type Status = 'draft' | 'normal' | 'cancelled' | 'amended';
type StatusOption = { value: Status; label: string };
// eslint-disable-next-line react-hooks/exhaustive-deps
const statusOptions: StatusOption[] = [
{ value: 'draft', label: 'Draft' },
{ value: 'normal', label: 'Normal' },
......@@ -198,14 +204,24 @@ export function NrListView() {
{ field: 'noBupot', headerName: 'Nomor Bukti Pemotongan', width: 200 },
{ field: 'masaPajak', headerName: 'Masa Pajak', width: 150 },
{ field: 'tahunPajak', headerName: 'Tahun Pajak', width: 150 },
{ field: 'kdObjPjk', headerName: 'Kode Objek Pajak', width: 150 },
{ field: 'npwp', headerName: 'Identitas', width: 150 },
{ field: 'nama', headerName: 'Nama', width: 150 },
{ field: 'kodeObjekPajak', headerName: 'Kode Objek Pajak', width: 150 },
{ field: 'npwpPemotong', headerName: 'Identitas', width: 150 },
{ field: 'namaDipotong', headerName: 'Nama', width: 150 },
{
field: 'dpp',
field: 'negaraDipotong',
headerName: 'Negara',
width: 180,
renderCell: ({ row }) => {
const kode = row.negaraDipotong || '-';
const nama = row.namaNegara || '';
return `${kode}${nama ? ' - ' + nama : ''}`;
},
},
{
field: 'penghasilanBruto',
headerName: 'Jumlah Penghasilan Bruto (Rp)',
width: 150,
renderCell: ({ row }) => formatRupiah(row.dpp),
renderCell: ({ row }) => formatRupiah(row.penghasilanBruto),
},
{
field: 'pphDipotong',
......@@ -217,7 +233,7 @@ export function NrListView() {
{ field: 'dokReferensi', headerName: 'Nama dokumen', width: 150 },
{ field: 'nomorDokumen', headerName: 'Nomor dokumen', width: 150 },
{ field: 'created_by', headerName: 'Created', width: 150 },
{ field: 'created_at', headerName: 'Created At', width: 200 },
{ field: 'created_at', headerName: 'Created At', width: 150 },
{ field: 'updated_by', headerName: 'Updated', width: 150 },
{ field: 'updated_at', headerName: 'Update At', width: 150 },
{ field: 'internal_id', headerName: 'Referensi', width: 150 },
......@@ -243,7 +259,7 @@ export function NrListView() {
(type = 'ubah') => {
const selectedRow = dataSelectedRef.current[0];
if (!selectedRow) return;
navigate(`/unifikasi/dn/${selectedRow.id}/${type}`);
navigate(`/unifikasi/nr/${selectedRow.id}/${type}`);
},
[navigate]
);
......@@ -305,6 +321,7 @@ export function NrListView() {
canReplacement: count === 1 && dataSelected[0].fgStatus === FG_STATUS_DN.NORMAL_DONE,
canCancel: hasSelection && allNormal,
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectionVersion]);
useEffect(() => {
......@@ -321,9 +338,13 @@ export function NrListView() {
return;
}
console.log('🧾 selectedRow:', selectedRow);
console.log('🧩 Keys:', Object.keys(selectedRow));
const kode = selectedRow.kodeObjekPajak || selectedRow.kdObjPjk;
const detailKop = kodeObjekPajaks.find((item) => item.kode === kode);
console.log(detailKop);
const mergedRow = {
...selectedRow,
...(detailKop
......@@ -331,8 +352,11 @@ export function NrListView() {
namaObjekPajak: detailKop.nama,
pasalPPh: detailKop.pasal,
statusPPh: detailKop.statuspph,
normaPenghasilanNeto: detailKop.normanetto,
}
: {}),
tinDipotong: selectedRow.npwpPemotong ?? '',
namaPenandatangan: signer,
};
setPreviewPayload(mergedRow);
......@@ -391,6 +415,7 @@ export function NrListView() {
},
],
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[validatedActions, refetch, handleEditData]
);
......@@ -416,20 +441,25 @@ export function NrListView() {
const api = apiRef.current;
if (!api) return;
const id = window.setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const selected = getSelectedRowByKey('all');
}, 100);
// eslint-disable-next-line consistent-return
return () => clearTimeout(id);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [apiRef, selectionVersion]);
return (
<>
<DashboardContent>
<CustomBreadcrumbs
heading="Bupot Unifikasi"
links={[{ name: 'Dashboard', href: paths.dashboard.root }, { name: 'e-Bupot Unifikasi' }]}
heading="Bupot Unifikasi Non Residen"
links={[
{ name: 'Dashboard', href: paths.dashboard.root },
{ name: 'e-Bupot Unifikasi Non Residen' },
]}
action={
<Button component={RouterLink} href={paths.unifikasi.dnNew} variant="contained">
<Button component={RouterLink} href={paths.unifikasi.nrNew} variant="contained">
Rekam Data
</Button>
}
......@@ -487,7 +517,7 @@ export function NrListView() {
</DashboardContent>
{isDeleteModalOpen && (
<ModalDeleteDn
<ModalDeleteNr
dataSelected={rowSelectionModel}
setSelectionModel={setRowSelectionModel}
tableApiRef={apiRef}
......@@ -498,7 +528,7 @@ export function NrListView() {
)}
{isUploadModalOpen && (
<ModalUploadDn
<ModalUploadNr
dataSelected={rowSelectionModel}
setSelectionModel={setRowSelectionModel}
tableApiRef={apiRef}
......@@ -509,7 +539,7 @@ export function NrListView() {
)}
{isCancelModalOpen && (
<ModalCancelDn
<ModalCancelNr
dataSelected={dataSelectedRef.current}
setSelectionModel={setRowSelectionModel}
tableApiRef={apiRef}
......@@ -520,7 +550,7 @@ export function NrListView() {
)}
{isPreviewOpen && (
<ModalCetakPdfDn
<ModalCetakPdfNr
payload={previewPayload}
isOpen={isPreviewOpen}
onClose={() => {
......
src/sections/bupot-unifikasi/bupot-nr/workers/normalizeNr.worker.js 0 → 100644
View file @ b7ff97de
// src/workers/normalizeDn.worker.js
// NOTE: keep this file plain JS - no TS imports - copy needed transform functions here.
function formatDateToDDMMYYYY(dateString) {
if (!dateString) return '';
const d = new Date(dateString);
const day = String(d.getDate()).padStart(2, '0');
const month = String(d.getMonth() + 1).padStart(2, '0');
const year = d.getFullYear();
return `${day}/${month}/${year}`;
}
// minimal transform helpers used in normalize
function transformFgStatusToFgSignStatus(fgStatus) {
const splitted = (fgStatus || '').split('-') || [];
if (splitted.includes('SIGN') > 0) return 'FAILED';
if (splitted.includes('SIGNING IN PROGRESS')) return 'IN_PROGRESS';
switch (splitted[1]) {
case 'document signed successfully':
case 'Done':
return 'SIGNED';
default:
return null;
}
}
function getFgStatusPdf(link, fgSignStatus) {
if (!link || fgSignStatus === 'IN_PROGRESS') return 'TIDAK_TERSEDIA';
if (!link.includes('https://coretaxdjp.pajak.go.id/')) return 'BELUM_TERBENTUK';
return 'TERBENTUK';
}
function normalisePropsGetDn(params) {
if (!params) return params;
return {
...params,
nomorSP2D: params.dokumen_referensi?.[0]?.nomorSP2D || '',
metodePembayaranBendahara: params.dokumen_referensi?.[0]?.metodePembayaranBendahara || '',
dokReferensi: params.dokumen_referensi?.[0]?.dokReferensi || '',
nomorDokumen: params.dokumen_referensi?.[0]?.nomorDokumen || '',
id: params.id,
internal_id: params.internal_id,
fgStatus: params.fgStatus,
fgSignStatus: transformFgStatusToFgSignStatus(params.fgStatus),
fgPdf: getFgStatusPdf(params.link, transformFgStatusToFgSignStatus(params.fgStatus)),
created_at: formatDateToDDMMYYYY(params.created_at),
updated_at: formatDateToDDMMYYYY(params.updated_at),
};
}
// eslint-disable-next-line func-names
onmessage = function (e) {
const { data } = e;
// data should be array of items
if (!Array.isArray(data)) {
postMessage({ error: 'expected array' });
return;
}
try {
const out = data.map(normalisePropsGetDn);
postMessage({ data: out });
} catch (err) {
postMessage({ error: (err && err.message) || String(err) });
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment