feat(FE): Add skeleton components for closing pages

2026-05-24 15:25:46 +00:00 · 2026-02-19 10:03:25 +07:00
parent 9c953ca382
commit 8fe19feaac
18 changed files with 1262 additions and 613 deletions
@@ -15,6 +15,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
 import { ClosingIncomingSapronakSummary } from '@/types/api/closing';
+import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';

 interface ClosingIncomingSapronaksSummaryTableProps {
  projectFlockId: number;
@@ -131,40 +132,52 @@ const ClosingIncomingSapronaksSummaryTable = ({
        titleClassName='w-full p-0!'
      >
        <div className='w-full p-0'>
-          <Table<ClosingIncomingSapronakSummary>
-            data={
-              isResponseSuccess(incomingSapronakSummaries)
-                ? incomingSapronakSummaries?.data
-                : []
-            }
-            columns={incomingSapronaksColumns}
-            pageSize={tableFilterState.pageSize}
-            onPageSizeChange={setPageSize}
-            rowOptions={[10, 20, 50, 100]}
-            page={
-              isResponseSuccess(incomingSapronakSummaries)
-                ? incomingSapronakSummaries?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(incomingSapronakSummaries)
-                ? incomingSapronakSummaries?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            isLoading={isLoadingIncomingSapronakSummaries}
-            sorting={sorting}
-            setSorting={setSorting}
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
-            className={{
-              containerClassName: cn({
-                'w-full mb-20':
-                  isResponseSuccess(incomingSapronakSummaries) &&
-                  incomingSapronakSummaries?.data?.length === 0,
-              }),
-            }}
-          />
+          {isLoadingIncomingSapronakSummaries ? (
+            <SapronakClosingSkeleton type='incoming' />
+          ) : isResponseSuccess(incomingSapronakSummaries) &&
+            incomingSapronakSummaries.data.length === 0 ? (
+            <SapronakClosingSkeleton
+              type='incoming'
+              iconName='heroicons:chart-bar'
+              title='Ringkasan Sapronak Masuk Tidak Ditemukan'
+              subtitle='Tidak ada ringkasan sapronak masuk untuk periode ini.'
+            />
+          ) : (
+            <Table<ClosingIncomingSapronakSummary>
+              data={
+                isResponseSuccess(incomingSapronakSummaries)
+                  ? incomingSapronakSummaries?.data
+                  : []
+              }
+              columns={incomingSapronaksColumns}
+              pageSize={tableFilterState.pageSize}
+              onPageSizeChange={setPageSize}
+              rowOptions={[10, 20, 50, 100]}
+              page={
+                isResponseSuccess(incomingSapronakSummaries)
+                  ? incomingSapronakSummaries?.meta?.page
+                  : 0
+              }
+              totalItems={
+                isResponseSuccess(incomingSapronakSummaries)
+                  ? incomingSapronakSummaries?.meta?.total_results
+                  : 0
+              }
+              onPageChange={setPage}
+              isLoading={isLoadingIncomingSapronakSummaries}
+              sorting={sorting}
+              setSorting={setSorting}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              className={{
+                containerClassName: cn({
+                  'w-full mb-20':
+                    isResponseSuccess(incomingSapronakSummaries) &&
+                    incomingSapronakSummaries?.data?.length === 0,
+                }),
+              }}
+            />
+          )}
        </div>
      </Collapse>
    </Card>
@@ -16,6 +16,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
 import { ClosingIncomingSapronak } from '@/types/api/closing';
+import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';

 interface ClosingIncomingSapronaksTableProps {
  projectFlockId: number;
@@ -167,40 +168,52 @@ const ClosingIncomingSapronaksTable = ({
            </div>
          </div>

-          <Table<ClosingIncomingSapronak>
-            data={
-              isResponseSuccess(incomingSapronaks)
-                ? incomingSapronaks?.data
-                : []
-            }
-            columns={incomingSapronaksColumns}
-            pageSize={tableFilterState.pageSize}
-            onPageSizeChange={setPageSize}
-            rowOptions={[10, 20, 50, 100]}
-            page={
-              isResponseSuccess(incomingSapronaks)
-                ? incomingSapronaks?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(incomingSapronaks)
-                ? incomingSapronaks?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            isLoading={isLoadingIncomingSapronaks}
-            sorting={sorting}
-            setSorting={setSorting}
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
-            className={{
-              containerClassName: cn({
-                'w-full mb-20':
-                  isResponseSuccess(incomingSapronaks) &&
-                  incomingSapronaks?.data?.length === 0,
-              }),
-            }}
-          />
+          {isLoadingIncomingSapronaks ? (
+            <SapronakClosingSkeleton type='incoming' />
+          ) : isResponseSuccess(incomingSapronaks) &&
+            incomingSapronaks.data.length === 0 ? (
+            <SapronakClosingSkeleton
+              type='incoming'
+              iconName='heroicons:chart-bar'
+              title='Data Sapronak Masuk Tidak Ditemukan'
+              subtitle='Tidak ada data sapronak masuk untuk periode ini.'
+            />
+          ) : (
+            <Table<ClosingIncomingSapronak>
+              data={
+                isResponseSuccess(incomingSapronaks)
+                  ? incomingSapronaks?.data
+                  : []
+              }
+              columns={incomingSapronaksColumns}
+              pageSize={tableFilterState.pageSize}
+              onPageSizeChange={setPageSize}
+              rowOptions={[10, 20, 50, 100]}
+              page={
+                isResponseSuccess(incomingSapronaks)
+                  ? incomingSapronaks?.meta?.page
+                  : 0
+              }
+              totalItems={
+                isResponseSuccess(incomingSapronaks)
+                  ? incomingSapronaks?.meta?.total_results
+                  : 0
+              }
+              onPageChange={setPage}
+              isLoading={isLoadingIncomingSapronaks}
+              sorting={sorting}
+              setSorting={setSorting}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              className={{
+                containerClassName: cn({
+                  'w-full mb-20':
+                    isResponseSuccess(incomingSapronaks) &&
+                    incomingSapronaks?.data?.length === 0,
+                }),
+              }}
+            />
+          )}
        </div>
      </Collapse>
    </Card>
@@ -15,6 +15,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
 import { ClosingOutgoingSapronakSummary } from '@/types/api/closing';
+import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';

 interface ClosingOutgoingSapronaksSummaryTableProps {
  projectFlockId: number;
@@ -131,40 +132,52 @@ const ClosingOutgoingSapronaksSummaryTable = ({
        titleClassName='w-full p-0!'
      >
        <div className='w-full p-0'>
-          <Table<ClosingOutgoingSapronakSummary>
-            data={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.data
-                : []
-            }
-            columns={outgoingSapronaksColumns}
-            pageSize={tableFilterState.pageSize}
-            onPageSizeChange={setPageSize}
-            rowOptions={[10, 20, 50, 100]}
-            page={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(outgoingSapronakSummaries)
-                ? outgoingSapronakSummaries?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            isLoading={isLoadingOutgoingSapronakSummaries}
-            sorting={sorting}
-            setSorting={setSorting}
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
-            className={{
-              containerClassName: cn({
-                'w-full mb-20':
-                  isResponseSuccess(outgoingSapronakSummaries) &&
-                  outgoingSapronakSummaries?.data?.length === 0,
-              }),
-            }}
-          />
+          {isLoadingOutgoingSapronakSummaries ? (
+            <SapronakClosingSkeleton type='outgoing' />
+          ) : isResponseSuccess(outgoingSapronakSummaries) &&
+            outgoingSapronakSummaries.data.length === 0 ? (
+            <SapronakClosingSkeleton
+              type='outgoing'
+              iconName='heroicons:chart-bar'
+              title='Ringkasan Sapronak Keluar Tidak Ditemukan'
+              subtitle='Tidak ada ringkasan sapronak keluar untuk periode ini.'
+            />
+          ) : (
+            <Table<ClosingOutgoingSapronakSummary>
+              data={
+                isResponseSuccess(outgoingSapronakSummaries)
+                  ? outgoingSapronakSummaries?.data
+                  : []
+              }
+              columns={outgoingSapronaksColumns}
+              pageSize={tableFilterState.pageSize}
+              onPageSizeChange={setPageSize}
+              rowOptions={[10, 20, 50, 100]}
+              page={
+                isResponseSuccess(outgoingSapronakSummaries)
+                  ? outgoingSapronakSummaries?.meta?.page
+                  : 0
+              }
+              totalItems={
+                isResponseSuccess(outgoingSapronakSummaries)
+                  ? outgoingSapronakSummaries?.meta?.total_results
+                  : 0
+              }
+              onPageChange={setPage}
+              isLoading={isLoadingOutgoingSapronakSummaries}
+              sorting={sorting}
+              setSorting={setSorting}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              className={{
+                containerClassName: cn({
+                  'w-full mb-20':
+                    isResponseSuccess(outgoingSapronakSummaries) &&
+                    outgoingSapronakSummaries?.data?.length === 0,
+                }),
+              }}
+            />
+          )}
        </div>
      </Collapse>
    </Card>
@@ -16,6 +16,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
 import { ClosingOutgoingSapronak } from '@/types/api/closing';
+import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';

 interface ClosingOutgoingSapronaksTableProps {
  projectFlockId: number;
@@ -167,40 +168,52 @@ const ClosingOutgoingSapronaksTable = ({
            </div>
          </div>

-          <Table<ClosingOutgoingSapronak>
-            data={
-              isResponseSuccess(outgoingSapronaks)
-                ? outgoingSapronaks?.data
-                : []
-            }
-            columns={outgoingSapronaksColumns}
-            pageSize={tableFilterState.pageSize}
-            onPageSizeChange={setPageSize}
-            rowOptions={[10, 20, 50, 100]}
-            page={
-              isResponseSuccess(outgoingSapronaks)
-                ? outgoingSapronaks?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(outgoingSapronaks)
-                ? outgoingSapronaks?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            isLoading={isLoadingOutgoingSapronaks}
-            sorting={sorting}
-            setSorting={setSorting}
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
-            className={{
-              containerClassName: cn({
-                'w-full mb-20':
-                  isResponseSuccess(outgoingSapronaks) &&
-                  outgoingSapronaks?.data?.length === 0,
-              }),
-            }}
-          />
+          {isLoadingOutgoingSapronaks ? (
+            <SapronakClosingSkeleton type='outgoing' />
+          ) : isResponseSuccess(outgoingSapronaks) &&
+            outgoingSapronaks.data.length === 0 ? (
+            <SapronakClosingSkeleton
+              type='outgoing'
+              iconName='heroicons:chart-bar'
+              title='Data Sapronak Keluar Tidak Ditemukan'
+              subtitle='Tidak ada data sapronak keluar untuk periode ini.'
+            />
+          ) : (
+            <Table<ClosingOutgoingSapronak>
+              data={
+                isResponseSuccess(outgoingSapronaks)
+                  ? outgoingSapronaks?.data
+                  : []
+              }
+              columns={outgoingSapronaksColumns}
+              pageSize={tableFilterState.pageSize}
+              onPageSizeChange={setPageSize}
+              rowOptions={[10, 20, 50, 100]}
+              page={
+                isResponseSuccess(outgoingSapronaks)
+                  ? outgoingSapronaks?.meta?.page
+                  : 0
+              }
+              totalItems={
+                isResponseSuccess(outgoingSapronaks)
+                  ? outgoingSapronaks?.meta?.total_results
+                  : 0
+              }
+              onPageChange={setPage}
+              isLoading={isLoadingOutgoingSapronaks}
+              sorting={sorting}
+              setSorting={setSorting}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              className={{
+                containerClassName: cn({
+                  'w-full mb-20':
+                    isResponseSuccess(outgoingSapronaks) &&
+                    outgoingSapronaks?.data?.length === 0,
+                }),
+              }}
+            />
+          )}
        </div>
      </Collapse>
    </Card>