gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Refactor skeleton components to remove default columns

Browse Source
This commit is contained in:
rstubryan
2026-02-19 10:14:28 +07:00
parent 8fe19feaac
commit befc1c1217
12 changed files with 55 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/closing/skeleton/ClosingTabSkeleton.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ const ClosingTabSkeleton = <T extends object>({
title,
subtitle,
}: {
columns: ColumnDef<T>[];
columns: ColumnDef<T, unknown>[];
icon: React.ReactNode;
title: string;
subtitle: string;
@@ -17,7 +17,7 @@ const ClosingTabSkeleton = <T extends object>({
<div className='relative size-full'>
<Table
data={[]}
columns={columns as ColumnDef<T>[]}
columns={columns}
isLoading={true}
className={{
skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
src/components/pages/closing/skeleton/HppExpeditionClosingSkeleton.tsx
+2 -17
View File
@@ -9,29 +9,14 @@ const HppExpeditionClosingSkeleton = ({
subtitle = 'Tidak ada data HPP ekspedisi untuk periode ini.',
iconName = 'heroicons:chart-bar',
}: {
columns?: ColumnDef<BaseExpeditionCost>[];
columns: ColumnDef<BaseExpeditionCost>[];
title?: string;
subtitle?: string;
iconName?: string;
}) => {
const defaultColumns: ColumnDef<BaseExpeditionCost>[] = [
{
id: 'id',
header: 'No',
},
{
id: 'expedition_vendor_name',
header: 'Nama Ekspedisi',
},
{
id: 'hpp_amount',
header: 'HPP Ekspedisi',
},
];
return (
<ClosingTabSkeleton<BaseExpeditionCost>
columns={columns || defaultColumns}
columns={columns}
icon={
<Icon icon={iconName} className='text-white' width={20} height={20} />
}
src/components/pages/closing/skeleton/OverheadClosingSkeleton.tsx
+2 -45
View File
@@ -9,57 +9,14 @@ const OverheadClosingSkeleton = ({
subtitle = 'Tidak ada data overhead untuk periode ini.',
iconName = 'heroicons:chart-bar',
}: {
columns?: ColumnDef<Overhead>[];
columns: ColumnDef<Overhead>[];
title?: string;
subtitle?: string;
iconName?: string;
}) => {
const defaultColumns: ColumnDef<Overhead>[] = [
{
id: 'name',
header: 'Nama Overhead',
},
{
id: 'budget_quantity',
header: 'Budget Pengajuan - Jumlah',
},
{
id: 'budget_unit_price',
header: 'Budget Pengajuan - Harga Satuan',
},
{
id: 'budget_total_amount',
header: 'Budget Pengajuan - Total',
},
{
id: 'actual_quantity',
header: 'Realisasi - Jumlah',
},
{
id: 'actual_unit_price',
header: 'Realisasi - Harga Satuan',
},
{
id: 'actual_total_amount',
header: 'Realisasi - Total',
},
{
id: 'difference_quantity',
header: 'Selisih - Jumlah',
},
{
id: 'difference_unit_price',
header: 'Selisih - Harga Satuan',
},
{
id: 'difference_total_amount',
header: 'Selisih - Total',
},
];
return (
<ClosingTabSkeleton<Overhead>
columns={columns || defaultColumns}
columns={columns}
icon={
<Icon icon={iconName} className='text-white' width={20} height={20} />
}
src/components/pages/closing/skeleton/SalesClosingSkeleton.tsx
+2 -57
View File
@@ -9,69 +9,14 @@ const SalesClosingSkeleton = ({
subtitle = 'Tidak ada data penjualan untuk periode ini.',
iconName = 'heroicons:chart-bar',
}: {
columns?: ColumnDef<BaseSales>[];
columns: ColumnDef<BaseSales>[];
title?: string;
subtitle?: string;
iconName?: string;
}) => {
const defaultColumns: ColumnDef<BaseSales>[] = [
{
id: 'realization_date',
header: 'Tanggal Realisasi',
},
{
id: 'age',
header: 'Umur',
},
{
id: 'do_number',
header: 'No. DO',
},
{
id: 'product',
header: 'Produk',
},
{
id: 'customer',
header: 'Customer',
},
{
id: 'qty',
header: 'Kuantitas',
},
{
id: 'weight',
header: 'Kg',
},
{
id: 'avg_weight',
header: 'AVG (Kg)',
},
{
id: 'sales_price',
header: 'Harga Sales (Rp)',
},
{
id: 'total_sales_price',
header: 'Total Sales (Rp)',
},
{
id: 'actual_price',
header: 'Harga Act (Rp)',
},
{
id: 'total_actual_price',
header: 'Total Act (Rp)',
},
{
id: 'kandang',
header: 'Kandang',
},
];
return (
<ClosingTabSkeleton<BaseSales>
columns={columns || defaultColumns}
columns={columns}
icon={
<Icon icon={iconName} className='text-white' width={20} height={20} />
}
src/components/pages/closing/skeleton/SapronakCalculationClosingSkeleton.tsx
+2 -45
View File
@@ -9,57 +9,14 @@ const SapronakCalculationClosingSkeleton = ({
subtitle = 'Tidak ada data perhitungan sapronak untuk periode ini.',
iconName = 'heroicons:chart-bar',
}: {
columns?: ColumnDef<RowSapronakCalculation>[];
columns: ColumnDef<RowSapronakCalculation>[];
title?: string;
subtitle?: string;
iconName?: string;
}) => {
const defaultColumns: ColumnDef<RowSapronakCalculation>[] = [
{
id: 'date',
header: 'Tanggal',
},
{
id: 'reference_number',
header: 'No. Referensi',
},
{
id: 'qty_in',
header: 'QTY Masuk',
},
{
id: 'qty_out',
header: 'QTY Keluar',
},
{
id: 'qty_used',
header: 'QTY Pakai',
},
{
id: 'balance',
header: 'Saldo',
},
{
id: 'unit_price_in',
header: 'Harga Masuk',
},
{
id: 'unit_price_out',
header: 'Harga Keluar',
},
{
id: 'total_price_in',
header: 'Total Harga Masuk',
},
{
id: 'total_price_out',
header: 'Total Harga Keluar',
},
];
return (
<ClosingTabSkeleton<RowSapronakCalculation>
columns={columns || defaultColumns}
columns={columns}
icon={
<Icon icon={iconName} className='text-white' width={20} height={20} />
}
src/components/pages/closing/skeleton/SapronakClosingSkeleton.tsx
+6 -92
View File
@@ -1,103 +1,20 @@
import { Icon } from '@iconify/react';
import ClosingTabSkeleton from './ClosingTabSkeleton';
import { ClosingIncomingSapronak } from '@/types/api/closing';
import { ColumnDef } from '@tanstack/react-table';
const SapronakClosingSkeleton = ({
const SapronakClosingSkeleton = <T extends object>({
columns,
type = 'incoming',
title,
subtitle,
iconName = 'heroicons:chart-bar',
}: {
columns?: ColumnDef<ClosingIncomingSapronak>[];
columns: ColumnDef<T, unknown>[];
type?: 'incoming' | 'outgoing';
title?: string;
subtitle?: string;
iconName?: string;
}) => {
const defaultIncomingColumns: ColumnDef<ClosingIncomingSapronak>[] = [
{
id: '#',
header: '#',
},
{
id: 'date',
header: 'Tanggal',
},
{
id: 'reference_number',
header: 'No. Referensi',
},
{
id: 'transaction_type',
header: 'Jenis Transaksi',
},
{
id: 'product_name',
header: 'Produk',
},
{
id: 'product_category',
header: 'Kategori Produk',
},
{
id: 'source_warehouse',
header: 'Gudang Asal',
},
{
id: 'destination_warehouse',
header: 'Gudang Tujuan',
},
{
id: 'quantity',
header: 'Kuantitas',
},
{
id: 'notes',
header: 'Keterangan',
},
];
const defaultOutgoingColumns: ColumnDef<ClosingIncomingSapronak>[] = [
{
id: '#',
header: '#',
},
{
id: 'date',
header: 'Tanggal',
},
{
id: 'reference_number',
header: 'No. Referensi',
},
{
id: 'transaction_type',
header: 'Jenis Transaksi',
},
{
id: 'product_name',
header: 'Produk',
},
{
id: 'product_category',
header: 'Kategori Produk',
},
{
id: 'source_warehouse',
header: 'Gudang Asal',
},
{
id: 'quantity',
header: 'Kuantitas',
},
{
id: 'notes',
header: 'Keterangan',
},
];
const defaultTitle =
type === 'incoming'
? 'Data Sapronak Masuk Belum Tersedia'
@@ -105,15 +22,12 @@ const SapronakClosingSkeleton = ({
const defaultSubtitle =
type === 'incoming'
? 'Silakan pilih periode atau filter untuk melihat data sapronak masuk.'
: 'Silakan pilih periode atau filter untuk melihat data sapronak keluar.';
? 'Tidak ada data sapronak masuk untuk periode ini.'
: 'Tidak ada data sapronak keluar untuk periode ini.';
return (
<ClosingTabSkeleton<ClosingIncomingSapronak>
columns={
columns ||
(type === 'incoming' ? defaultIncomingColumns : defaultOutgoingColumns)
}
<ClosingTabSkeleton<T>
columns={columns}
icon={
<Icon icon={iconName} className='text-white' width={20} height={20} />
}
src/components/pages/closing/table/OverheadClosingTable.tsx
+25 -25
View File
@@ -210,27 +210,27 @@ const OverheadClosingTable = ({
return (
<>
{isLoadingOverhead ? (
<OverheadClosingSkeleton columns={columns} />
) : !isResponseSuccess(overhead) ||
(!kandangId && overhead.data?.overheads.length === 0) ||
(kandangId && !isResponseSuccess(overheadKandang)) ? (
<OverheadClosingSkeleton
columns={columns}
iconName='heroicons:chart-bar'
title='Data Overhead Tidak Ditemukan'
subtitle='Tidak ada data overhead untuk periode ini.'
/>
) : (
<Card
title='Pengeluaran Overhead'
collapsible
defaultCollapsed={false}
className={{
wrapper: 'w-full',
body: 'p-4 shadow',
}}
>
<Card
title='Pengeluaran Overhead'
collapsible
defaultCollapsed={false}
className={{
wrapper: 'w-full',
body: 'p-4 shadow',
}}
>
{isLoadingOverhead ? (
<OverheadClosingSkeleton columns={columns} />
) : !isResponseSuccess(overhead) ||
(!kandangId && overhead.data?.overheads.length === 0) ||
(kandangId && !isResponseSuccess(overheadKandang)) ? (
<OverheadClosingSkeleton
columns={columns}
iconName='heroicons:chart-bar'
title='Data Overhead Tidak Ditemukan'
subtitle='Tidak ada data overhead untuk periode ini.'
/>
) : (
<Table<Overhead>
data={
kandangId
@@ -256,7 +256,8 @@ const OverheadClosingTable = ({
: false
}
/>
{kandangId && (
)}
{kandangId && !isLoadingOverhead && isResponseSuccess(overhead) && (
<Card
className={{
wrapper: 'w-full',
@@ -309,9 +310,8 @@ const OverheadClosingTable = ({
</div>
</div>
</Card>
)}
</Card>
)}
)}
</Card>
</>
);
};
src/components/pages/closing/table/SapronakCalculationClosingTable.tsx
+6 -3
View File
@@ -195,10 +195,11 @@ const SapronakCalculationClosingTable = ({
}}
>
{isLoading ? (
<SapronakCalculationClosingSkeleton />
<SapronakCalculationClosingSkeleton columns={docColumns} />
) : isResponseSuccess(sapronakCalculation) &&
sapronakCalculation.data?.doc?.rows?.length === 0 ? (
<SapronakCalculationClosingSkeleton
columns={docColumns}
iconName='heroicons:chart-bar'
title='Data Perhitungan Sapronak Tidak Ditemukan'
subtitle='Tidak ada data perhitungan sapronak untuk periode ini.'
@@ -232,10 +233,11 @@ const SapronakCalculationClosingTable = ({
}}
>
{isLoading ? (
<SapronakCalculationClosingSkeleton />
<SapronakCalculationClosingSkeleton columns={ovkColumns} />
) : isResponseSuccess(sapronakCalculation) &&
sapronakCalculation.data?.ovk?.rows?.length === 0 ? (
<SapronakCalculationClosingSkeleton
columns={ovkColumns}
iconName='heroicons:chart-bar'
title='Data Perhitungan Sapronak Tidak Ditemukan'
subtitle='Tidak ada data perhitungan sapronak untuk periode ini.'
@@ -269,10 +271,11 @@ const SapronakCalculationClosingTable = ({
}}
>
{isLoading ? (
<SapronakCalculationClosingSkeleton />
<SapronakCalculationClosingSkeleton columns={pakanColumns} />
) : isResponseSuccess(sapronakCalculation) &&
sapronakCalculation.data?.pakan?.rows?.length === 0 ? (
<SapronakCalculationClosingSkeleton
columns={pakanColumns}
iconName='heroicons:chart-bar'
title='Data Perhitungan Sapronak Tidak Ditemukan'
subtitle='Tidak ada data perhitungan sapronak untuk periode ini.'
src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx
+2 -1
View File
@@ -133,11 +133,12 @@ const ClosingIncomingSapronaksSummaryTable = ({
>
<div className='w-full p-0'>
{isLoadingIncomingSapronakSummaries ? (
<SapronakClosingSkeleton type='incoming' />
<SapronakClosingSkeleton type='incoming' columns={incomingSapronaksColumns} />
) : isResponseSuccess(incomingSapronakSummaries) &&
incomingSapronakSummaries.data.length === 0 ? (
<SapronakClosingSkeleton
type='incoming'
columns={incomingSapronaksColumns}
iconName='heroicons:chart-bar'
title='Ringkasan Sapronak Masuk Tidak Ditemukan'
subtitle='Tidak ada ringkasan sapronak masuk untuk periode ini.'
src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx
+2 -1
View File
@@ -169,11 +169,12 @@ const ClosingIncomingSapronaksTable = ({
</div>
{isLoadingIncomingSapronaks ? (
<SapronakClosingSkeleton type='incoming' />
<SapronakClosingSkeleton type='incoming' columns={incomingSapronaksColumns} />
) : isResponseSuccess(incomingSapronaks) &&
incomingSapronaks.data.length === 0 ? (
<SapronakClosingSkeleton
type='incoming'
columns={incomingSapronaksColumns}
iconName='heroicons:chart-bar'
title='Data Sapronak Masuk Tidak Ditemukan'
subtitle='Tidak ada data sapronak masuk untuk periode ini.'
src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx
+2 -1
View File
@@ -133,11 +133,12 @@ const ClosingOutgoingSapronaksSummaryTable = ({
>
<div className='w-full p-0'>
{isLoadingOutgoingSapronakSummaries ? (
<SapronakClosingSkeleton type='outgoing' />
<SapronakClosingSkeleton type='outgoing' columns={outgoingSapronaksColumns} />
) : isResponseSuccess(outgoingSapronakSummaries) &&
outgoingSapronakSummaries.data.length === 0 ? (
<SapronakClosingSkeleton
type='outgoing'
columns={outgoingSapronaksColumns}
iconName='heroicons:chart-bar'
title='Ringkasan Sapronak Keluar Tidak Ditemukan'
subtitle='Tidak ada ringkasan sapronak keluar untuk periode ini.'
src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx
+2 -1
View File
@@ -169,11 +169,12 @@ const ClosingOutgoingSapronaksTable = ({
</div>
{isLoadingOutgoingSapronaks ? (
<SapronakClosingSkeleton type='outgoing' />
<SapronakClosingSkeleton type='outgoing' columns={outgoingSapronaksColumns} />
) : isResponseSuccess(outgoingSapronaks) &&
outgoingSapronaks.data.length === 0 ? (
<SapronakClosingSkeleton
type='outgoing'
columns={outgoingSapronaksColumns}
iconName='heroicons:chart-bar'
title='Data Sapronak Keluar Tidak Ditemukan'
subtitle='Tidak ada data sapronak keluar untuk periode ini.'