Merge branch 'development' of https://gitlab.com/mbugroup/lti-web-client into fix/dashboard

src/app/expense/page.tsx

@@ -2,7 +2,7 @@ import ExpensesTable from '@/components/pages/expense/ExpensesTable';
 
 const Expense = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <ExpensesTable />
     </section>
   );

src/app/expense/realization/edit/page.tsx

@@ -38,8 +38,8 @@ const ExpenseRealizationEditPage = () => {
     !isLoadingExpense &&
     isResponseSuccess(expense) &&
     expense.data.latest_approval.action !== 'REJECTED' &&
-    (expense.data.latest_approval.step_number === 4 ||
-      expense.data.latest_approval.step_number === 5);
+    (expense.data.latest_approval.step_number === 5 ||
+      expense.data.latest_approval.step_number === 6);
 
   if (!isLoadingExpense && !isExpenseRealizationCanBeEdited) {
     router.back();

src/app/globals.css

@@ -30,14 +30,14 @@
   --color-base-100: oklch(100% 0 0); /* #ffffff */
   --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
   --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
-  --color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
+  --color-base-content: #18181b;
 
   /* Status/Utility Colors */
   --color-info: oklch(67.4% 0.176 238.9);
   --color-info-content: oklch(0% 0 0); /* #000000 */
   --color-success: #00d390;
   --color-success-content: oklch(100% 0 0); /* #ffffff */
-  --color-warning: oklch(82.2% 0.165 91.9);
+  --color-warning: #fcb700;
   --color-warning-content: oklch(0% 0 0); /* #000000 */
   --color-error: #ff3a3a;
   --color-error-content: oklch(100% 0 0); /* #fffffff */

src/app/inventory/movement/page.tsx

@@ -2,7 +2,7 @@ import MovementTable from '@/components/pages/inventory/movement/MovementTable';
 
 const Movement = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <MovementTable />
     </section>
   );

src/app/production/recording/page.tsx

@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
 
 const Recording = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <RecordingTable />
     </section>
   );

src/app/production/transfer-to-laying/add/page.tsx

@@ -1,11 +0,0 @@
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-const AddTransferToLaying = () => {
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      <TransferToLayingForm />
-    </div>
-  );
-};
-
-export default AddTransferToLaying;

src/app/production/transfer-to-laying/detail/edit/page.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const TransferToLayingEdit = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const transferToLayingId = searchParams.get('transferToLayingId');
-
-  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId, (id: number) =>
-      TransferToLayingApi.getSingle(id)
-    );
-
-  if (!transferToLayingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (
-    !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  if (
-    isResponseSuccess(transferToLaying) &&
-    transferToLaying.data.approval.step_number === 2
-  ) {
-    router.replace('/production/transfer-to-laying');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingTransferToLaying && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-        <TransferToLayingForm
-          type='edit'
-          initialValues={transferToLaying.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TransferToLayingEdit;

src/app/production/transfer-to-laying/detail/layout.tsx

@@ -1,11 +0,0 @@
-import SuspenseHelper from '@/components/helper/SuspenseHelper';
-
-const Layout = ({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>;
-};
-
-export default Layout;

src/app/production/transfer-to-laying/detail/page.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const TransferToLayingDetail = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const transferToLayingId = searchParams.get('transferToLayingId');
-
-  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId, (id: number) =>
-      TransferToLayingApi.getSingle(id)
-    );
-
-  if (!transferToLayingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (
-    !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingTransferToLaying && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-        <TransferToLayingForm
-          type='detail'
-          initialValues={transferToLaying.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TransferToLayingDetail;

src/app/production/transfer-to-laying/page.tsx

@@ -1,5 +1,6 @@
 import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
 import TransferToLayingFormModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFormModal';
+import TransferToLayingDetailModal from '@/components/pages/production/transfer-to-laying/TransferToLayingDetailModal';
 
 const TransferToLaying = () => {
   return (
@@ -7,6 +8,8 @@ const TransferToLaying = () => {
       <TransferToLayingsTable />
 
       <TransferToLayingFormModal />
+
+      <TransferToLayingDetailModal />
     </section>
   );
 };

src/app/purchase/page.tsx

@@ -2,7 +2,7 @@ import PurchaseTable from '@/components/pages/purchase/PurchaseTable';
 
 const Purchase = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <PurchaseTable />
     </section>
   );

src/components/helper/ApprovalStepsV2.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import { BaseApproval } from '@/types/api/api-general';
+import Button from '@/components/Button';
+
+import { cn, formatDate } from '@/lib/helper';
+
+interface ApprovalStepsV2Props {
+  approvals?: BaseApproval[];
+  steps: {
+    step_number: number;
+    step_name: string;
+  }[];
+  maxVisibleSteps?: number;
+  className?: {
+    wrapper?: string;
+    stepsWrapper?: string;
+    stepsContainer?: string;
+  };
+}
+
+const ApprovalStepsV2 = ({
+  approvals,
+  steps,
+  maxVisibleSteps = 2,
+  className,
+}: ApprovalStepsV2Props) => {
+  const [isSeeAll, setIsSeeAll] = useState(false);
+  const [formattedApprovals, setFormattedApprovals] = useState<
+    (BaseApproval & { isActive: boolean })[]
+  >([]);
+
+  const latestApprovalStepNumber =
+    approvals?.[approvals.length - 1].step_number ?? 0;
+
+  const lastStepNumber = steps[steps.length - 1].step_number;
+
+  const isLatestApprovalStepNumberLessThanLastStepNumber =
+    latestApprovalStepNumber < lastStepNumber;
+
+  const slicedFormattedApprovals = useMemo(() => {
+    return formattedApprovals.slice(0, isSeeAll ? undefined : maxVisibleSteps);
+  }, [formattedApprovals, isSeeAll]);
+
+  const seeMoreClickHandler = () => {
+    setIsSeeAll((prevVal) => !prevVal);
+  };
+
+  useEffect(() => {
+    if (approvals) {
+      const tempFormattedApprovals: (BaseApproval & { isActive: boolean })[] =
+        [];
+
+      approvals.forEach((approval) => {
+        tempFormattedApprovals.push({
+          ...approval,
+          isActive: true,
+        });
+      });
+
+      if (isLatestApprovalStepNumberLessThanLastStepNumber) {
+        const latestApprovalStepNumberIndexInSteps = steps.findIndex(
+          (step) => step.step_number === latestApprovalStepNumber
+        );
+
+        const slicedSteps = steps.slice(
+          latestApprovalStepNumberIndexInSteps + 1
+        );
+
+        slicedSteps.forEach((step) => {
+          tempFormattedApprovals.push({
+            action: 'APPROVED',
+            action_at: new Date().toISOString(),
+            action_by: {
+              id: 0,
+              id_user: 0,
+              email: '',
+              name: '',
+            },
+            step_name: step.step_name,
+            step_number: step.step_number,
+            isActive: false,
+          });
+        });
+      }
+
+      setFormattedApprovals(tempFormattedApprovals);
+    }
+  }, [approvals]);
+
+  return (
+    <div
+      className={cn(
+        'w-full p-4 flex flex-col border-b border-base-content/10',
+        className?.wrapper
+      )}
+    >
+      <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+        Progress Details
+      </h4>
+
+      <div
+        className={cn(
+          'mt-6 mb-8 flex flex-col gap-10',
+          className?.stepsWrapper
+        )}
+      >
+        {slicedFormattedApprovals.map((approval, idx) => {
+          const isApprovalActionCreated = approval.action === 'CREATED';
+          const isApprovalActionUpdated = approval.action === 'UPDATED';
+          const isApprovalActionRejected = approval.action === 'REJECTED';
+          const isApprovalActionApproved = approval.action === 'APPROVED';
+
+          const approvalIcon =
+            isApprovalActionCreated || isApprovalActionUpdated
+              ? 'heroicons:clock-solid'
+              : isApprovalActionRejected
+                ? 'heroicons:x-circle-solid'
+                : isApprovalActionApproved
+                  ? 'heroicons:check-badge-solid'
+                  : 'heroicons:check-badge-solid';
+
+          return (
+            <div key={idx} className='w-full flex flex-row items-stretch gap-3'>
+              <div className='w-fit self-stretch relative'>
+                <div className='w-fit h-fit flex flex-col items-start'>
+                  <Icon
+                    icon={approvalIcon}
+                    width={24}
+                    height={24}
+                    className={cn({
+                      'text-warning':
+                        isApprovalActionCreated || isApprovalActionUpdated,
+                      'text-error': isApprovalActionRejected,
+                      'text-success': isApprovalActionApproved,
+                      'text-base-content/20': !approval.isActive,
+                    })}
+                  />
+
+                  {idx < formattedApprovals.length - 1 && (
+                    <div className='absolute top-6 left-1/2 -translate-x-1/2 w-0 min-h-full h-[calc(100%)] mx-auto my-2 border border-dashed border-base-content/10' />
+                  )}
+                </div>
+              </div>
+
+              <div
+                className={cn('w-full flex flex-col gap-1 text-base-content', {
+                  'text-base-content/20': !approval.isActive,
+                })}
+              >
+                <div className='flex flex-col'>
+                  <span className='text-xs'>{approval.step_name}</span>
+                  <span className='text-sm font-semibold'>
+                    {(isApprovalActionCreated || isApprovalActionUpdated) &&
+                      'Diajukan oleh '}
+                    {isApprovalActionRejected && 'Ditolak oleh '}
+                    {isApprovalActionApproved && 'Disetujui oleh '}
+                    {approval.isActive ? approval.action_by.name : '...'}
+                  </span>
+                </div>
+
+                {approval.isActive && (
+                  <p className='w-full max-w-60 p-3 bg-base-content/5 rounded-xl text-xs text-base-content/50'>
+                    Created at :{' '}
+                    {formatDate(approval.action_at, 'DD-MM-YYYY, HH:mm')}
+                    <br />
+                    Notes : {approval.notes ?? '-'}
+                  </p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {formattedApprovals.length > maxVisibleSteps && (
+        <Button
+          variant='outline'
+          color='none'
+          onClick={seeMoreClickHandler}
+          className={cn(
+            'px-3 py-2 gap-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-lg transition-all'
+          )}
+        >
+          <Icon
+            icon='heroicons-outline:chevron-double-down'
+            width={20}
+            height={20}
+            className={cn('transition-all duration-300', {
+              '-rotate-180': isSeeAll,
+            })}
+          />
+          See {isSeeAll ? 'Less' : 'More'}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default ApprovalStepsV2;

src/components/helper/pdf/table/PdfTable.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { View, StyleSheet } from '@react-pdf/renderer';
+import { PdfThead, PdfColumn } from './PdfThead';
+import { PdfTbody, PdfTbodyCell } from './PdfTbody';
+import { PdfTfoot, PdfTfootCell } from './PdfTfoot';
+
+const styles = StyleSheet.create({
+  table: {
+    borderWidth: 1,
+    borderColor: '#000000',
+    marginBottom: 15,
+  },
+});
+
+interface PdfTableProps {
+  columns: PdfColumn[];
+  data: PdfTbodyCell[][];
+  footer?: PdfTfootCell[];
+  footerLabel?: string;
+  firstRow?: {
+    valueKey: string;
+    value: number;
+    align?: 'right';
+    color?: string;
+  };
+}
+
+export const PdfTable = ({
+  columns,
+  data,
+  footer,
+  footerLabel = 'Total',
+  firstRow,
+}: PdfTableProps) => {
+  return (
+    <View style={styles.table}>
+      <PdfThead columns={columns} />
+      <PdfTbody columns={columns} rows={data} firstRow={firstRow} />
+      {footer && footer.length > 0 && (
+        <PdfTfoot columns={columns} cells={footer} label={footerLabel} />
+      )}
+    </View>
+  );
+};

src/components/helper/pdf/table/PdfTbody.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+
+export interface PdfColumn {
+  key: string;
+  header: string;
+  flex: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface PdfTbodyCell {
+  key: string;
+  value: string | number | React.ReactNode;
+  align?: 'left' | 'center' | 'right';
+  color?: string;
+  formatAs?: 'text' | 'date' | 'currency' | 'number';
+  formatDate?: string;
+}
+
+const styles = StyleSheet.create({
+  tableRow: {
+    flexDirection: 'row',
+  },
+  tableBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  tableCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    textAlign: 'left',
+  },
+  tableCellLast: {
+    flex: 1,
+    padding: 4,
+    fontSize: 7,
+    borderRightWidth: 0,
+  },
+  tableCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  tableCellCenter: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    textAlign: 'center',
+  },
+  tableCellNo: {
+    flex: 0.5,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    textAlign: 'center',
+  },
+});
+
+interface PdfTbodyProps {
+  columns: PdfColumn[];
+  rows: PdfTbodyCell[][];
+  firstRow?: {
+    valueKey: string;
+    value: number;
+    align?: 'right';
+    color?: string;
+  };
+  formatDate?: (date: string, format: string) => string;
+  formatNumber?: (num: number) => string;
+  formatCurrency?: (num: number) => string;
+}
+
+export const PdfTbody = ({ columns, rows, firstRow }: PdfTbodyProps) => {
+  return (
+    <>
+      {/* First Row */}
+      {firstRow && (
+        <View style={[styles.tableRow, styles.tableBorderBottom]}>
+          {columns.map((column, index) => {
+            const isLastColumn = index === columns.length - 1;
+            const isfirstRowColumn = column.key === firstRow.valueKey;
+            const align = column.align || 'center';
+
+            const cellStyle =
+              column.key === 'no'
+                ? [styles.tableCellNo, { flex: column.flex }]
+                : isfirstRowColumn
+                  ? [
+                      styles.tableCellRight,
+                      {
+                        flex: column.flex,
+                        color: firstRow.color || 'black',
+                        borderRightWidth: isLastColumn ? 0 : 1,
+                      },
+                    ]
+                  : align === 'right'
+                    ? [
+                        styles.tableCellRight,
+                        {
+                          flex: column.flex,
+                          borderRightWidth: isLastColumn ? 0 : 1,
+                        },
+                      ]
+                    : align === 'center'
+                      ? [
+                          styles.tableCellCenter,
+                          {
+                            flex: column.flex,
+                            borderRightWidth: isLastColumn ? 0 : 1,
+                          },
+                        ]
+                      : isLastColumn
+                        ? [
+                            styles.tableCellLast,
+                            {
+                              flex: column.flex,
+                              borderRightWidth: 0,
+                            },
+                          ]
+                        : [styles.tableCell, { flex: column.flex }];
+
+            return (
+              <View key={column.key} style={cellStyle}>
+                <Text>{isfirstRowColumn ? firstRow.value : ''}</Text>
+              </View>
+            );
+          })}
+        </View>
+      )}
+
+      {/* Data Rows */}
+      {rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === rows.length - 1;
+
+        return (
+          <View
+            key={rowIndex}
+            style={[
+              styles.tableRow,
+              !isLastRow ? styles.tableBorderBottom : {},
+            ]}
+          >
+            {columns.map((column, colIndex) => {
+              const cell = row.find((c) => c.key === column.key);
+              const isLastColumn = colIndex === columns.length - 1;
+              const align = cell?.align || column.align || 'center';
+
+              const cellStyle =
+                column.key === 'no'
+                  ? [styles.tableCellNo, { flex: column.flex }]
+                  : align === 'right'
+                    ? [
+                        styles.tableCellRight,
+                        {
+                          flex: column.flex,
+                          color: cell?.color || 'black',
+                          borderRightWidth: isLastColumn ? 0 : 1,
+                        },
+                      ]
+                    : align === 'center'
+                      ? [
+                          styles.tableCellCenter,
+                          {
+                            flex: column.flex,
+                            color: cell?.color || 'black',
+                            borderRightWidth: isLastColumn ? 0 : 1,
+                          },
+                        ]
+                      : isLastColumn
+                        ? [
+                            styles.tableCellLast,
+                            { flex: column.flex, borderRightWidth: 0 },
+                          ]
+                        : [
+                            styles.tableCell,
+                            {
+                              flex: column.flex,
+                              color: cell?.color || 'black',
+                              borderRightWidth: isLastColumn ? 0 : 1,
+                            },
+                          ];
+
+              return (
+                <View key={column.key} style={cellStyle}>
+                  {cell?.value !== undefined &&
+                  cell?.value !== null &&
+                  cell?.value !== '' ? (
+                    typeof cell.value === 'object' ? (
+                      cell.value
+                    ) : (
+                      <Text>{String(cell.value)}</Text>
+                    )
+                  ) : (
+                    <Text>-</Text>
+                  )}
+                </View>
+              );
+            })}
+          </View>
+        );
+      })}
+    </>
+  );
+};

src/components/helper/pdf/table/PdfTfoot.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+
+export interface PdfColumn {
+  key: string;
+  header: string;
+  flex: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface PdfTfootCell {
+  key: string;
+  value: string | number;
+  align?: 'left' | 'center' | 'right';
+  flex?: number;
+  color?: string;
+}
+
+const styles = StyleSheet.create({
+  tableRow: {
+    flexDirection: 'row',
+  },
+  summaryRow: {
+    backgroundColor: '#F0F0F0',
+    fontWeight: 'bold',
+  },
+  tableCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    textAlign: 'left',
+  },
+  tableCellLast: {
+    flex: 1,
+    padding: 4,
+    fontSize: 7,
+    borderRightWidth: 0,
+  },
+  tableCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    textAlign: 'right',
+  },
+  tableCellCenter: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    textAlign: 'center',
+  },
+  tableCellNo: {
+    flex: 0.5,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    textAlign: 'center',
+  },
+});
+
+interface PdfTfootProps {
+  columns: PdfColumn[];
+  cells: PdfTfootCell[];
+  label?: string;
+}
+
+export const PdfTfoot = ({
+  columns,
+  cells,
+  label = 'Total',
+}: PdfTfootProps) => {
+  return (
+    <View style={[styles.tableRow, styles.summaryRow]}>
+      {columns.map((column, index) => {
+        const isLastColumn = index === columns.length - 1;
+        const cellData = cells.find((c) => c.key === column.key);
+
+        const cellStyle =
+          column.key === 'no'
+            ? [
+                styles.tableCellNo,
+                { flex: column.flex, borderRightWidth: isLastColumn ? 0 : 1 },
+              ]
+            : cellData?.align === 'right'
+              ? [
+                  styles.tableCellRight,
+                  {
+                    flex: column.flex,
+                    color: cellData?.color || 'black',
+                    borderRightWidth: isLastColumn ? 0 : 1,
+                  },
+                ]
+              : cellData?.align === 'center'
+                ? [
+                    styles.tableCellCenter,
+                    {
+                      flex: column.flex,
+                      color: cellData?.color || 'black',
+                      borderRightWidth: isLastColumn ? 0 : 1,
+                    },
+                  ]
+                : isLastColumn
+                  ? [styles.tableCellLast, { flex: column.flex }]
+                  : [
+                      styles.tableCell,
+                      {
+                        flex: column.flex,
+                        color: cellData?.color || 'black',
+                      },
+                    ];
+
+        return (
+          <View key={column.key} style={cellStyle}>
+            <Text>{column.key === 'no' ? label : cellData?.value || ''}</Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+};

src/components/helper/pdf/table/PdfThead.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+
+export interface PdfColumn {
+  key: string;
+  header: string;
+  flex: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+const styles = StyleSheet.create({
+  tableRow: {
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellHeader: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    paddingVertical: 12,
+    textAlign: 'center',
+  },
+  tableCellHeaderRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 4,
+    fontSize: 7,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+    textAlign: 'right',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    paddingVertical: 12,
+  },
+});
+
+interface PdfTheadProps {
+  columns: PdfColumn[];
+}
+
+export const PdfThead = ({ columns }: PdfTheadProps) => {
+  return (
+    <View style={[styles.tableRow, styles.tableHeader]}>
+      {columns.map((column, index) => {
+        const align = column.align || 'center';
+        const isLastColumn = index === columns.length - 1;
+
+        const cellStyle =
+          align === 'right'
+            ? [
+                styles.tableCellHeaderRight,
+                {
+                  flex: column.flex,
+                  textAlign: 'right' as const,
+                  borderRightWidth: isLastColumn ? 0 : 1,
+                },
+              ]
+            : [
+                styles.tableCellHeader,
+                {
+                  flex: column.flex,
+                  textAlign: align as 'left' | 'center' | 'right',
+                  borderRightWidth: isLastColumn ? 0 : 1,
+                },
+              ];
+
+        return (
+          <View key={column.key} style={cellStyle}>
+            <Text>{column.header}</Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+};

src/components/helper/pdf/table/index.ts

@@ -0,0 +1,7 @@
+export { PdfTable } from './PdfTable';
+export { PdfThead } from './PdfThead';
+export { PdfTbody } from './PdfTbody';
+export { PdfTfoot } from './PdfTfoot';
+export type { PdfColumn } from './PdfThead';
+export type { PdfTbodyCell } from './PdfTbody';
+export type { PdfTfootCell } from './PdfTfoot';

src/components/input/DateInput.tsx

@@ -226,7 +226,7 @@ const DateInput = ({
 
       <div
         className={cn(
-          'input h-12 bg-inherit px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg transition-all duration-200 flex items-center border border-base-content/10',
+          'input h-fit bg-inherit px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg transition-all duration-200 flex items-center border border-base-content/10',
           {
             'border-error': finalIsError,
             'border-success': externalValid && !finalIsError,
@@ -245,7 +245,10 @@ const DateInput = ({
           disabled={disabled}
           readOnly // ✅ tidak bisa diketik manual
           className={cn(
-            'grow bg-transparent cursor-pointer focus:outline-none',
+            'grow bg-transparent cursor-pointer focus:outline-none text-sm leading-tight',
+            {
+              'cursor-not-allowed': readOnly,
+            },
             className?.input
           )}
         />
@@ -257,8 +260,8 @@ const DateInput = ({
         )}
         <Icon
           icon='heroicons:calendar-date-range'
-          width={14}
-          height={14}
+          width={15}
+          height={15}
           className='cursor-pointer text-base-content/20'
           onClick={(e) =>
             handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)

src/components/input/FileInput.tsx

@@ -41,7 +41,7 @@ const FileInput = ({
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-2 text-start',
+        'w-full flex flex-col gap-0 text-start rounded-lg',
         className?.wrapper
       )}
     >
@@ -49,7 +49,7 @@ const FileInput = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full text-sm font-normal leading-5',
+            'w-full py-2 text-xs font-semibold leading-5',
             {
               'text-error': isError,
             },
@@ -77,15 +77,19 @@ const FileInput = ({
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        className={cn('grow file-input w-full h-12 rounded', className?.input)}
+        className={cn(
+          'grow file-input w-full h-fit px-3 py-1.5 text-sm font-normal leading-6 rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+          className?.input
+        )}
         readOnly={readOnly}
       />
 
-      {bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      {!isError && bottomLabel && (
+        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
       )}
-
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };

src/components/input/SelectInput.tsx

@@ -42,6 +42,7 @@ interface SelectInputBaseProps<T = OptionType> {
   optionComponent?: OptionComponent<T>;
   components?: Partial<typeof ReactSelectComponents>;
   isDisabled?: boolean;
+  readOnly?: boolean;
   isLoading?: boolean;
   isClearable?: boolean;
   isRtl?: boolean;
@@ -156,6 +157,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     closeMenuOnSelect,
     hideSelectedOptions,
     onMenuScrollToBottom,
+    readOnly,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -235,7 +237,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         onInputChange={internalInputChangeHandler}
         onMenuClose={() => setInternalInputValue('')}
         isMulti={isMulti}
-        isDisabled={isDisabled}
+        isDisabled={isDisabled || readOnly}
         isLoading={isLoading}
         isClearable={isClearable}
         isRtl={isRtl}
@@ -247,30 +249,37 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           ...(!startAdornment && {
             control: ({ isFocused, isDisabled }) =>
-              cn(
-                'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
-                {
-                  'border-red-500! ring-2 ring-red-200': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                  'border-base-content/10!': !isError && !isFocused,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-                }
-              ),
-            valueContainer: () => cn('flex-1 p-3! py-2! gap-1'),
+              cn('w-full rounded-lg! border bg-white transition-shadow', {
+                'cursor-pointer!': !readOnly && !isDisabled,
+                'border-red-500! ring-2 ring-red-200': isError,
+                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                'border-base-content/10!': !isError && !isFocused,
+                'bg-gray-100 text-gray-400 cursor-not-allowed':
+                  isDisabled && !readOnly,
+                'bg-transparent! cursor-not-allowed!': readOnly,
+              }),
+            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
           }),
           placeholder: () =>
-            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+            cn({
+              'text-gray-400 text-sm leading-tight': !isError,
+              'text-red-300!': isError,
+            }),
           singleValue: () =>
-            cn({ 'text-gray-900': !isError, 'text-error!': isError }),
-          input: () => cn('text-gray-900 m-0! p-0!'),
-          indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
+            cn({
+              'm-0! text-gray-900 text-sm leading-tight': !isError,
+              'text-error!': isError,
+              'text-gray-900!': readOnly,
+            }),
+          input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
+          indicatorsContainer: () => cn('flex items-center gap-1 pr-3 py-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1! rounded hover:bg-gray-100', {
+            cn('p-0! rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
-          clearIndicator: () => cn('p-1! rounded hover:bg-gray-100'),
+          clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
           menu: () =>
             cn(
               'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'

src/components/input/TextArea.tsx

@@ -83,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'textarea h-auto px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg outline-none! transition-all bg-white border-base-content/10',
+          'textarea h-auto px-3 py-2.5 text-sm text-base-content font-normal leading-6 w-full rounded-lg outline-none! transition-all bg-white border-base-content/10',
           {
             'border-error': isError,
             'border-success!': isValid,

src/components/input/TextInput.tsx

@@ -102,10 +102,10 @@ const TextInput = ({
           {inputPrefix && (
             <div
               className={cn(
-                'inline-flex items-center px-3 py-2.5 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
+                'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-gray-300': !disabled,
-                  'bg-gray-50 border-gray-200': disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -118,7 +118,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-12 px-3 py-2.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
+              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -165,10 +165,10 @@ const TextInput = ({
           {inputSuffix && (
             <div
               className={cn(
-                'inline-flex items-center px-3 py-2.5 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
+                'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-gray-300': !disabled,
-                  'bg-gray-50 border-gray-200': disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -182,7 +182,7 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-12 px-3 py-2.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,

src/components/pages/expense/form/ExpenseRealizationForm.schema.ts

@@ -73,7 +73,14 @@ export const ExpenseRealizationFormSchema: Yup.ObjectSchema<ExpenseRealizationFo
     realizations: Yup.array()
       .of(
         Yup.object({
-          kandang_id: Yup.number().min(1, 'Wajib memilih kandang!').optional(),
+          kandang_id: Yup.number()
+            .optional()
+            .test('valid-kandang-id', 'Wajib memilih kandang!', (value) => {
+              if (value === undefined || value === null || value === 0) {
+                return true;
+              }
+              return value >= 1;
+            }),
           cost_items: Yup.array()
             .of(
               Yup.object({
@@ -175,7 +182,7 @@ export const getExpenseRealizationFormInitialValues = (
               : [];
 
           return {
-            kandang_id: kandangExpense.kandang_id,
+            kandang_id: kandangExpense.id,
             cost_items: costItemsInitialValue,
           };
         })

src/components/pages/expense/form/ExpenseRealizationForm.tsx

@@ -101,13 +101,23 @@ const ExpenseRealizationForm = ({
 
       values.realizations.forEach((realization) => {
         realization.cost_items.forEach((costItem) => {
-          const realizationItem = {
+          const realizationItem: {
+            expense_nonstock_id: number;
+            qty: number;
+            price: number;
+            notes: string;
+            kandang_id?: number;
+          } = {
             expense_nonstock_id: costItem.nonstock?.value as number,
             qty: parseFloat(String(costItem.quantity)) as number,
             price: parseFloat(String(costItem.price)) as number,
             notes: costItem.notes ?? '',
           };
 
+          if (realization.kandang_id && realization.kandang_id > 0) {
+            realizationItem.kandang_id = realization.kandang_id;
+          }
+
           realizations.push(realizationItem);
         });
       });

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -372,23 +372,6 @@ const ExpenseRequestForm = ({
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {expenseFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{expenseFormErrorMessage}</span>
-            </div>
-          )}
-
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
           <div className='grid grid-cols-12 gap-4'>
             <SelectInput
               label='Kategori'
@@ -557,6 +540,24 @@ const ExpenseRequestForm = ({
             />
           </div>
 
+          {expenseFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{expenseFormErrorMessage}</span>
+            </div>
+          )}
+
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>

src/components/pages/inventory/movement/form/MovementForm.schema.ts

@@ -37,7 +37,7 @@ type MovementFormSchemaType = {
       value: number;
       label: string;
     } | null;
-    supplier_id: number;
+    supplier_id?: number | null;
     products: {
       product?: {
         value: number;
@@ -69,7 +69,7 @@ export type DeliverySchema = {
     value: number;
     label: string;
   } | null;
-  supplier_id: number;
+  supplier_id?: number | null;
   products: {
     product?: {
       value: number;
@@ -151,9 +151,9 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
   supplier_id: Yup.number()
-    .required('Supplier wajib diisi!')
-    .min(1, 'Supplier wajib diisi!')
-    .typeError('Supplier wajib diisi!'),
+    .optional()
+    .nullable()
+    .typeError('Supplier harus berupa angka!'),
   products: Yup.array()
     .of(DeliveryProductObjectSchema)
     .min(1, 'Minimal harus ada 1 produk!')

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -1263,25 +1263,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {movementFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{movementFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           {/* Top card - Movement details */}
           <Card
             title='Detail Movement'
@@ -1494,7 +1475,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 </thead>
                 <tbody>
                   {formik.values.products?.map((product, idx) => (
-                    <tr key={`product-row-${idx}-${product.product_id}`}>
+                    <tr key={`product-row-${idx}`}>
                       {type !== 'detail' && (
                         <td className='align-middle!'>
                           <CheckboxInput
@@ -1665,15 +1646,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                     </th>
-                    <th>
-                      Supplier
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-9999'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
+                    <th>Supplier</th>
                     <th>
                       Plat Nomor
                       <span
@@ -1716,9 +1689,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 </thead>
                 <tbody>
                   {formik.values.deliveries?.map((delivery, idx) => (
-                    <tr
-                      key={`delivery-row-${idx}-${delivery.supplier_id}-${delivery.vehicle_plate}`}
-                    >
+                    <tr key={`delivery-row-${idx}`}>
                       {type !== 'detail' && (
                         <td className='align-middle!'>
                           <CheckboxInput
@@ -1787,7 +1758,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       </td>
                       <td>
                         <SelectInput
-                          required
                           placeholder='Pilih supplier...'
                           value={delivery.supplier}
                           onChange={(val) =>
@@ -2018,6 +1988,27 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
             )}
           </Card>
 
+          <div className='w-full'>
+            {movementFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{movementFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (

src/components/pages/master-data/product-category/ProductCategoryTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useRef, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -22,6 +22,7 @@ import { ProductCategoryApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { useUiStore } from '@/stores/ui/ui.store';
 import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
@@ -80,6 +81,9 @@ const RowOptionsMenu = ({
 };
 
 const ProductCategoryTable = () => {
+  const { searchValue, setSearchValue, resetSearchValue } = useUiStore();
+  const previousPathRef = useRef<string | null>(null);
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -87,7 +91,7 @@ const ProductCategoryTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '', nameSort: '' },
+    initial: { search: searchValue, nameSort: '' },
     paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
   });
 
@@ -188,6 +192,7 @@ const ProductCategoryTable = () => {
   };
 
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
@@ -196,6 +201,28 @@ const ProductCategoryTable = () => {
     setPageSize(newVal.value as number);
   };
 
+  useEffect(() => {
+    // Store current path on mount
+    previousPathRef.current = window.location.pathname;
+
+    return () => {
+      const currentPath = window.location.pathname;
+
+      // if both paths are within /master-data/product-category module
+      const isCurrentPathProductCategory = currentPath.includes(
+        '/master-data/product-category'
+      );
+      const isPreviousPathProductCategory = previousPathRef.current?.includes(
+        '/master-data/product-category'
+      );
+
+      // reset if we outside product category module entirely
+      if (isPreviousPathProductCategory && !isCurrentPathProductCategory) {
+        resetSearchValue();
+      }
+    };
+  }, [resetSearchValue]);
+
   useEffect(() => {
     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
     if (!isNameSorted) {

src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx

@@ -159,19 +159,6 @@ const ProductCategoryForm = ({
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {formErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{formErrorMessage}</span>
-            </div>
-          )}
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
           <div className='flex flex-col gap-4'>
             <TextInput
               required
@@ -240,6 +227,21 @@ const ProductCategoryForm = ({
               </div>
             )}
 
+            <div className='w-full mb-4'>
+              {formErrorMessage && (
+                <div role='alert' className='alert alert-error'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{formErrorMessage}</span>
+                </div>
+              )}
+
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            </div>
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -273,19 +273,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {productFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{productFormErrorMessage}</span>
-            </div>
-          )}
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
           <div className='grid grid-cols-1 gap-4'>
             <TextInput
               required
@@ -627,6 +614,22 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 )}
               </div>
             )}
+
+            <div className='mb-4 w-full'>
+              {productFormErrorMessage && (
+                <div role='alert' className='alert alert-error'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{productFormErrorMessage}</span>
+                </div>
+              )}
+
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            </div>
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -1395,8 +1395,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           if (hasSameDayRecording) {
             toast.error(
-              `Recording untuk hari ${nextDayRecording.next_day} sudah ada.
-              Tidak bisa membuat recording duplikat, mohon perbarui recording yang sudah ada terlebih dahulu.`
+              `Recording untuk hari ke-${nextDayRecording.next_day} sudah ada datanya.
+              Tidak bisa membuat recording di hari yang sama dengan project flock yang sama, mohon perbarui recording yang sudah ada terlebih dahulu.`
             );
             return;
           }
@@ -1734,22 +1734,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           onSubmit={handleFormSubmit}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {recordingFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{recordingFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList formErrorList={formErrorList} onClose={close} />
-          )}
-
           {/* Basic Info Card */}
           {(type === 'add' || type === 'edit') && (
             <Card
@@ -3010,6 +2994,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             </Card>
           )}
 
+          <div className='w-full'>
+            {recordingFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{recordingFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-col sm:flex-row sm:justify-between gap-2'>
             {/* Left side - Detail & Edit actions */}

src/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal.tsx

@@ -175,6 +175,10 @@ const TransferToLayingConfirmationModalTable = ({
     <Table<TransferToLayingConfirmationTableDataType>
       columns={confirmationTableColumns}
       data={confirmationTableData}
+      isLoading={
+        isLoadingTransferToLaying ||
+        (!transferToLayingId && !transferToLayingForm)
+      }
       withPagination={false}
       pageSize={10000}
       expanded={true}

src/components/pages/production/transfer-to-laying/TransferToLayingDetailModal.tsx

@@ -0,0 +1,338 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Modal, { useModal } from '@/components/Modal';
+import Button from '@/components/Button';
+import DateInput from '@/components/input/DateInput';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import NumberInput from '@/components/input/NumberInput';
+import TextArea from '@/components/input/TextArea';
+import ApprovalStepsV2 from '@/components/helper/ApprovalStepsV2';
+import StatusBadge from '@/components/helper/StatusBadge';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+import { APPROVAL_WORKFLOWS } from '@/config/constant';
+
+const TransferToLayingDetailModal = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const modalAction = searchParams.get('action');
+  const transferToLayingId = searchParams.get('id');
+
+  const {
+    data: transferToLayingResponse,
+    isLoading: isLoadingTransferToLaying,
+  } = useSWR(
+    transferToLayingId
+      ? ['detail-transfer-to-laying', transferToLayingId]
+      : undefined,
+    ([, id]) => TransferToLayingApi.getSingle(Number(id))
+  );
+
+  const transferToLaying = isResponseSuccess(transferToLayingResponse)
+    ? transferToLayingResponse.data
+    : undefined;
+
+  const {
+    data: transferToLayingApprovalResponse,
+    isLoading: isLoadingTransferToLayingApproval,
+  } = useSWR(
+    transferToLayingId
+      ? ['approval-transfer-to-laying', transferToLayingId]
+      : undefined,
+    ([, id]) => TransferToLayingApi.getApprovalLineHistory(Number(id))
+  );
+
+  const transferToLayingApproval = isResponseSuccess(
+    transferToLayingApprovalResponse
+  )
+    ? transferToLayingApprovalResponse.data
+    : undefined;
+
+  const detailModal = useModal();
+
+  const totalEnteredChickenForTransfer =
+    transferToLaying?.sources.reduce(
+      (acc, item) => acc + Number(item.qty),
+      0
+    ) ?? 0;
+
+  const totalTransferedChicken =
+    transferToLaying?.targets.reduce(
+      (acc, item) => acc + Number(item.qty),
+      0
+    ) ?? 0;
+
+  const totalAvailableChickenForTransfer =
+    totalEnteredChickenForTransfer - totalTransferedChicken;
+
+  const closeModalHandler = (shouldPushToRoute: boolean = true) => {
+    if (shouldPushToRoute) {
+      router.push('/production/transfer-to-laying');
+    }
+
+    detailModal.closeModal();
+  };
+
+  useEffect(() => {
+    if (modalAction === 'detail') {
+      detailModal.openModal();
+    }
+  }, [modalAction]);
+
+  return (
+    <Modal
+      ref={detailModal.ref}
+      position='end'
+      className={{
+        modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+      }}
+    >
+      <div className='w-full sm:w-[446px] min-h-full flex flex-col items-stretch bg-base-100 rounded-xl overflow-y-auto'>
+        <div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
+          <Button
+            type='button'
+            variant='ghost'
+            color='none'
+            onClick={() => closeModalHandler()}
+            className='p-0 text-black hover:text-base-content'
+          >
+            <Icon icon='heroicons:chevron-left' width={20} height={20} />
+          </Button>
+
+          <div className='w-px border-none bg-base-content/10' />
+
+          <h4 className='text-sm font-medium text-base-content/50'>
+            Confirmation
+          </h4>
+        </div>
+
+        {!isLoadingTransferToLaying && transferToLaying && (
+          <>
+            <ApprovalStepsV2
+              approvals={transferToLayingApproval}
+              steps={APPROVAL_WORKFLOWS.TRANSFER_TO_LAYINGS}
+            />
+
+            <div className='w-full p-4 flex flex-col border-b border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Umum
+              </h4>
+
+              <DateInput
+                name='transfer_date'
+                label='Tanggal'
+                placeholder='Tanggal'
+                value={transferToLaying?.transfer_date ?? ''}
+                readOnly
+              />
+
+              <SelectInputRadio
+                label='Flock Asal'
+                placeholder='Pilih Flock Asal'
+                value={{
+                  label: transferToLaying?.from_project_flock?.flock_name ?? '',
+                  value: transferToLaying?.from_project_flock.id ?? '',
+                }}
+                options={[]}
+                readOnly
+              />
+
+              <SelectInputRadio
+                label='Flock Tujuan'
+                placeholder='Pilih Flock Tujuan'
+                value={{
+                  label: transferToLaying?.to_project_flock?.flock_name ?? '',
+                  value: transferToLaying?.to_project_flock.id ?? '',
+                }}
+                options={[]}
+                readOnly
+              />
+            </div>
+
+            <div className='w-full p-4 flex flex-col border-b border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Kandang
+              </h4>
+
+              {/* Source Kandang */}
+              <div className='flex flex-col'>
+                <span className='w-full py-2 text-xs font-semibold'>
+                  Kandang Asal{' '}
+                  <span className='tooltip tooltip-error' data-tip='required'>
+                    <span className='text-error'> *</span>
+                  </span>
+                </span>
+
+                {transferToLaying?.sources.length === 0 && (
+                  <span className='text-sm text-base-content/50 italic'>
+                    Belum ada kandang asal yang dipilih
+                  </span>
+                )}
+
+                {transferToLaying?.sources &&
+                  transferToLaying?.sources.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                      {transferToLaying?.sources.map((item, index) => {
+                        return (
+                          <NumberInput
+                            key={`flockSourceKandangs-${item.source_project_flock_kandang.id}-${index}`}
+                            name={`flockSourceKandangs.${index}.quantity`}
+                            placeholder='Masukkan Kuantitas'
+                            value={item.qty}
+                            readOnly
+                            inputPrefix={
+                              <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
+                                <span
+                                  title={
+                                    item.source_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                  className='text-sm text-base-content self-center text-nowrap truncate'
+                                >
+                                  {
+                                    item.source_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                </span>
+
+                                <div className='w-px bg-base-content/10' />
+                              </div>
+                            }
+                            className={{
+                              inputPrefix:
+                                'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                              inputPrefixSuffixWrapper: 'grid grid-cols-2',
+                              inputWrapper: 'border-l-0 pl-5',
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+              </div>
+
+              {/* Destination Kandang */}
+              <div className='mt-3 flex flex-col'>
+                <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
+                  <span className='text-nowrap'>
+                    Kandang Tujuan{' '}
+                    <span className='tooltip tooltip-error' data-tip='required'>
+                      <span className='text-error'> *</span>
+                    </span>
+                  </span>
+
+                  <div className='w-px h-5 bg-base-content/10' />
+
+                  <StatusBadge
+                    color={
+                      totalAvailableChickenForTransfer < 0 ? 'error' : 'neutral'
+                    }
+                    text={`Sisa transfer: ${formatNumber(
+                      totalAvailableChickenForTransfer,
+                      'en-US'
+                    )} ekor`}
+                    className={{
+                      badge: 'text-nowrap',
+                    }}
+                  />
+                </span>
+
+                {transferToLaying?.targets.length === 0 && (
+                  <span className='text-sm text-base-content/50 italic'>
+                    Belum ada kandang tujuan yang dipilih
+                  </span>
+                )}
+
+                {transferToLaying?.targets &&
+                  transferToLaying?.targets.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                      {transferToLaying?.targets.map((item, index) => {
+                        return (
+                          <NumberInput
+                            key={`flockDestinationKandangs-${item.target_project_flock_kandang.id}-${index}`}
+                            name={`flockDestinationKandangs.${index}.quantity`}
+                            placeholder='Masukkan Kuantitas'
+                            value={item.qty}
+                            readOnly
+                            inputPrefix={
+                              <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
+                                <span
+                                  title={
+                                    item.target_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                  className='text-sm text-base-content self-center text-nowrap truncate'
+                                >
+                                  {
+                                    item.target_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                </span>
+
+                                <div className='w-px bg-base-content/10' />
+                              </div>
+                            }
+                            className={{
+                              inputPrefix:
+                                'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                              inputPrefixSuffixWrapper: 'grid grid-cols-2',
+                              inputWrapper: 'border-l-0 pl-5',
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+              </div>
+            </div>
+
+            <div className='w-full p-4 flex flex-col border-y border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Umum
+              </h4>
+
+              <NumberInput
+                name='totalQuantity'
+                label='Jumlah Transfer'
+                placeholder='Total Kuantitas Transfer'
+                value={totalTransferedChicken}
+                readOnly
+                errorMessage={
+                  totalAvailableChickenForTransfer < 0
+                    ? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
+                    : ''
+                }
+              />
+
+              <TextArea
+                required
+                name='reason'
+                label='Catatan'
+                placeholder='Alasan Transfer'
+                rows={4}
+                value={transferToLaying?.notes}
+                readOnly
+              />
+            </div>
+          </>
+        )}
+
+        {isLoadingTransferToLaying && (
+          <div className='w-full flex-1 flex flex-col items-center justify-center'>
+            <span className='loading loading-spinner loading-lg' />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default TransferToLayingDetailModal;

src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx

@@ -49,6 +49,8 @@ const TransferToLayingFormModal = () => {
   const modalAction = searchParams.get('action');
   const transferToLayingId = searchParams.get('id');
 
+  const isModalActionForForm = modalAction === 'add' || modalAction === 'edit';
+
   const { mutate } = useSWRConfig();
 
   const refreshTransferToLayings = () => {
@@ -60,7 +62,7 @@ const TransferToLayingFormModal = () => {
 
   const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
     useSWR(
-      transferToLayingId
+      isModalActionForForm && transferToLayingId
         ? ['detail-transfer-to-laying', transferToLayingId]
         : undefined,
       ([, id]) => TransferToLayingApi.getSingle(Number(id))
@@ -288,6 +290,48 @@ const TransferToLayingFormModal = () => {
     return { available: countAvailable, unavailable: countUnavailable };
   }, [mappedFlockSourceKandangsAvailability]);
 
+  const {
+    data: flockDestinationKandangsMaxTargetQty,
+    isLoading: isLoadingFlockDestinationKandangsMaxTargetQty,
+  } = useSWR(
+    formik.values.flockDestination
+      ? [
+          'transfer-to-laying',
+          'max-target-qty',
+          String(formik.values.flockDestination.value),
+        ]
+      : undefined,
+    ([, , id]: string[]) =>
+      TransferToLayingApi.getMappedFlockKandangsMaxTargetQty(Number(id))
+  );
+
+  const mappedFlockDestinationKandangsMaxTargetQty: {
+    kandang_name: string;
+    max_target_qty: number;
+    project_flock_kandang_id: number;
+  }[] = useMemo(() => {
+    if (
+      !flockDestinationKandangsMaxTargetQty ||
+      !selectedFlockDestinationRawData
+    )
+      return [];
+
+    return selectedFlockDestinationRawData
+      ? selectedFlockDestinationRawData.kandangs.map((kandang) => {
+          const maxQty =
+            flockDestinationKandangsMaxTargetQty[
+              kandang.project_flock_kandang_id
+            ]?.max_target_qty;
+
+          return {
+            kandang_name: kandang.name,
+            max_target_qty: maxQty,
+            project_flock_kandang_id: kandang.project_flock_kandang_id,
+          };
+        })
+      : [];
+  }, [flockDestinationKandangsMaxTargetQty, selectedFlockDestinationRawData]);
+
   const mappedFlockDestinationKandangsAvailabilityInfo: {
     available: number;
     unavailable: number;
@@ -298,9 +342,8 @@ const TransferToLayingFormModal = () => {
     let countAvailable = 0;
     let countUnavailable = 0;
 
-    selectedFlockDestinationRawData?.kandangs.forEach((item) => {
-      // TODO: change this to real available quota later
-      if (item.capacity > 0) {
+    mappedFlockDestinationKandangsMaxTargetQty.forEach((item) => {
+      if (item.max_target_qty > 0) {
         countAvailable += 1;
       } else {
         countUnavailable += 1;
@@ -308,7 +351,7 @@ const TransferToLayingFormModal = () => {
     });
 
     return { available: countAvailable, unavailable: countUnavailable };
-  }, [selectedFlockDestinationRawData]);
+  }, [mappedFlockDestinationKandangsMaxTargetQty]);
 
   const totalEnteredChickenForTransfer =
     formik.values.flockSourceKandangs.reduce(
@@ -424,7 +467,7 @@ const TransferToLayingFormModal = () => {
   useEffect(() => {
     formik.setFieldValue('totalQuantity', totalTransferedChicken);
     formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);
-  }, [totalTransferedChicken]);
+  }, [totalTransferedChicken, formik.values.flockDestinationKandangs]);
 
   return (
     <>
@@ -465,6 +508,7 @@ const TransferToLayingFormModal = () => {
               </h4>
 
               <DateInput
+                required
                 name='transfer_date'
                 label='Tanggal'
                 placeholder='Tanggal'
@@ -480,6 +524,7 @@ const TransferToLayingFormModal = () => {
               />
 
               <SelectInputRadio
+                required
                 label='Flock Asal'
                 placeholder='Pilih Flock Asal'
                 value={formik.values.flockSource}
@@ -492,6 +537,7 @@ const TransferToLayingFormModal = () => {
               />
 
               <SelectInputRadio
+                required
                 label='Flock Tujuan'
                 placeholder='Pilih Flock Tujuan'
                 value={formik.values.flockDestination}
@@ -645,10 +691,9 @@ const TransferToLayingFormModal = () => {
                   </div>
 
                   <div className='w-full rounded-xl border border-base-content/10'>
-                    {selectedFlockDestinationRawData?.kandangs.map(
+                    {mappedFlockDestinationKandangsMaxTargetQty.map(
                       (item, itemIdx) => {
-                        // TODO: change this to real available quota later
-                        const isAvailable = item.capacity > 0;
+                        const isAvailable = item.max_target_qty > 0;
                         const isChecked =
                           formik.values.flockDestinationKandangs.some(
                             (k) =>
@@ -666,11 +711,10 @@ const TransferToLayingFormModal = () => {
                               {
                                 kandang: {
                                   value: item.project_flock_kandang_id,
-                                  label: item.name,
+                                  label: item.kandang_name,
                                 },
                                 quantity: '',
-                                // TODO: change this to real available quota later
-                                maxQuantity: item.capacity,
+                                maxQuantity: item.max_target_qty,
                               },
                             ]);
                           } else {
@@ -715,9 +759,8 @@ const TransferToLayingFormModal = () => {
                                   'cursor-not-allowed': !isAvailable,
                                 })}
                               >
-                                {item.name}{' '}
-                                {/* TODO: change this to real available quota later */}
-                                <span className='text-base-content/20'>{`(Max: ${item.capacity})`}</span>
+                                {item.kandang_name}{' '}
+                                <span className='text-base-content/20'>{`(Max: ${item.max_target_qty})`}</span>
                               </label>
                             </div>
 
@@ -776,7 +819,10 @@ const TransferToLayingFormModal = () => {
                 {/* Source Kandang */}
                 <div className='flex flex-col'>
                   <span className='w-full py-2 text-xs font-semibold'>
-                    Kandang Asal
+                    Kandang Asal{' '}
+                    <span className='tooltip tooltip-error' data-tip='required'>
+                      <span className='text-error'> *</span>
+                    </span>
                   </span>
 
                   {formik.values.flockSourceKandangs.length === 0 && (
@@ -845,7 +891,15 @@ const TransferToLayingFormModal = () => {
                 {/* Destination Kandang */}
                 <div className='mt-3 flex flex-col'>
                   <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
-                    <span className='text-nowrap'>Kandang Tujuan</span>
+                    <span className='text-nowrap'>
+                      Kandang Tujuan{' '}
+                      <span
+                        className='tooltip tooltip-error'
+                        data-tip='required'
+                      >
+                        <span className='text-error'> *</span>
+                      </span>
+                    </span>
 
                     <div className='w-px h-5 bg-base-content/10' />
 
@@ -946,13 +1000,14 @@ const TransferToLayingFormModal = () => {
                   isError={totalAvailableChickenForTransfer < 0}
                   errorMessage={
                     totalAvailableChickenForTransfer < 0
-                      ? 'Jumlah transfer melebihi ketersediaan'
+                      ? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
                       : ''
                   }
                   disabled
                 />
 
                 <TextArea
+                  required
                   name='reason'
                   label='Catatan'
                   placeholder='Alasan Transfer'

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import {
   CellContext,
@@ -33,6 +33,7 @@ import { cn, formatDate, formatNumber } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Color } from '@/types/theme';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 
 const RowOptionsMenu = ({
   props,
@@ -74,7 +75,7 @@ const RowOptionsMenu = ({
         <div className='flex flex-col bg-base-100 rounded-xl'>
           <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
             <Button
-              href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
+              href={`/production/transfer-to-laying/?action=detail&id=${props.row.original.id}`}
               variant='ghost'
               color='none'
               className='p-3 justify-start text-sm font-semibold w-full'
@@ -182,6 +183,9 @@ const TransferToLayingsTable = () => {
 
   const isFilterActive = filterCount > 0;
 
+  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+    useState(false);
+
   // Modal hooks
   const filterModal = useModal();
   const deleteModal = useModal();
@@ -240,6 +244,10 @@ const TransferToLayingsTable = () => {
       header: 'Tanggal Transfer',
       cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
     },
+    {
+      accessorKey: 'transfer_number',
+      header: 'No. Transfer',
+    },
     {
       accessorKey: 'flock_source',
       header: 'Flock Asal',
@@ -266,6 +274,13 @@ const TransferToLayingsTable = () => {
       accessorKey: 'notes',
       header: 'Alasan Transfer',
       enableSorting: false,
+      cell: (props) => {
+        return (
+          <span title={props.row.original.notes} className='line-clamp-1'>
+            {props.row.original.notes}
+          </span>
+        );
+      },
     },
     {
       header: 'Status',
@@ -421,6 +436,10 @@ const TransferToLayingsTable = () => {
     setIsRejectLoading(false);
   };
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
   const filterSubmitHandler = (values: TransferToLayingFilter) => {
     updateFilter('startDate', values.startDate);
     updateFilter('endDate', values.endDate);
@@ -437,9 +456,12 @@ const TransferToLayingsTable = () => {
     updateFilter('status', '');
   };
 
-  // TODO: add export to excel functionality
-  const exportToExcelHandler = () => {
-    toast.error('Not implemented yet');
+  const exportToExcelHandler = async () => {
+    setIsLoadingExportingToExcel(true);
+
+    await TransferToLayingApi.exportToExcel(getTableFilterQueryString());
+
+    setIsLoadingExportingToExcel(false);
   };
 
   useEffect(() => {
@@ -516,7 +538,27 @@ const TransferToLayingsTable = () => {
             )}
           </div>
 
-          <div className='flex flex-row justify-center items-center gap-3'>
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Search'
+              value={tableFilterState.search ?? ''}
+              onChange={searchChangeHandler}
+              startAdornment={
+                <Icon
+                  icon='heroicons:magnifying-glass'
+                  width={20}
+                  height={20}
+                />
+              }
+              className={{
+                wrapper: 'w-full min-w-24 max-w-3xs',
+                inputWrapper: 'rounded-xl! shadow-button-soft',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
+              }}
+            />
+
             <Button
               variant='outline'
               color='none'
@@ -579,6 +621,7 @@ const TransferToLayingsTable = () => {
                 variant='ghost'
                 color='none'
                 onClick={exportToExcelHandler}
+                isLoading={isLoadingExportingToExcel}
                 className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
               >
                 <Icon icon='heroicons:table-cells' width={20} height={20} />

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts

@@ -59,7 +59,8 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
       .min(0, 'Jumlah transfer minimal 0')
       .max(
         Yup.ref('maxTotalQuantity'),
-        ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+        ({ max }) =>
+          `Kuantitas melebihi kapasitas kandang tujuan. Kuantitas maksimal ${formatNumber(max, 'en-US')}!`
       )
       .required('Jumlah transfer wajib diisi!'),
 
@@ -79,7 +80,7 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
             .min(0, 'Kuantitas minimal 0!')
             .max(
               Yup.ref('maxQuantity'),
-              ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+              ({ max }) => `Kuantitas maksimal ${formatNumber(max, 'en-US')}!`
             )
             .required('Kuantitas wajib diisi!'),
 
@@ -101,7 +102,8 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
             .min(0, 'Kuantitas minimal 0!')
             .max(
               Yup.ref('maxQuantity'),
-              ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+              ({ max }) =>
+                `Kuantitas melebihi kapasitas kandang tujuan. Maks: ${formatNumber(max, 'en-US')}!`
             )
             .required('Kuantitas wajib diisi!'),
 
@@ -174,6 +176,11 @@ export const getFilledTransferToLayingFormInitialValues = async (
       initialValues?.from_project_flock.id as number
     );
 
+  const mappedFlockDestinationKandangsMaxTargetQty =
+    await TransferToLayingApi.getMappedFlockKandangsMaxTargetQty(
+      initialValues?.to_project_flock.id as number
+    );
+
   const formattedFlockSourceKandangs = initialValues?.sources
     ? initialValues.sources.map((sourceKandang) => ({
         kandang: {
@@ -195,20 +202,8 @@ export const getFilledTransferToLayingFormInitialValues = async (
     maxTotalQuantity += item.quantity;
   });
 
-  const flockDestination = await ProjectFlockApi.getSingle(
-    initialValues?.to_project_flock.id as number
-  );
-
   const formattedFlockDestinationKandangs = initialValues?.targets
     ? initialValues.targets.map((targetKandang) => {
-        const kandang = isResponseSuccess(flockDestination)
-          ? flockDestination?.data?.kandangs.find(
-              (kandang) =>
-                String(kandang.project_flock_kandang_id) ===
-                String(targetKandang.target_project_flock_kandang.id)
-            )
-          : undefined;
-
         return {
           kandang: {
             value: targetKandang.target_project_flock_kandang.id,
@@ -216,7 +211,12 @@ export const getFilledTransferToLayingFormInitialValues = async (
           },
           quantity: targetKandang.qty,
 
-          maxQuantity: kandang?.capacity ?? 0,
+          maxQuantity:
+            (mappedFlockDestinationKandangsMaxTargetQty &&
+              mappedFlockDestinationKandangsMaxTargetQty[
+                targetKandang.target_project_flock_kandang.id
+              ].max_target_qty) ??
+            0,
         };
       })
     : [];

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx

@@ -1,932 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { useFormik } from 'formik';
-import { toast } from 'react-hot-toast';
-import useSWR from 'swr';
-
-import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
-import RequirePermission from '@/components/helper/RequirePermission';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
-import TextArea from '@/components/input/TextArea';
-import { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import DateInput from '@/components/input/DateInput';
-import NumberInput from '@/components/input/NumberInput';
-import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
-import ApprovalSteps, {
-  formatGroupedApprovalsToApprovalSteps,
-} from '@/components/pages/ApprovalSteps';
-
-import {
-  getFilledTransferToLayingFormInitialValues,
-  getTransferToLayingFormInitialValues,
-  TransferToLayingFormSchema,
-  TransferToLayingFormValues,
-  UpdateTransferToLayingFormSchema,
-} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import {
-  TransferToLaying,
-  CreateTransferToLayingPayload,
-  UpdateTransferToLayingPayload,
-} from '@/types/api/production/transfer-to-laying';
-import { cn } from '@/lib/helper';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { TRANSFER_TO_LAYING_APPROVAL_LINE } from '@/config/approval-line';
-import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
-import AlertErrorList from '@/components/helper/form/FormErrors';
-
-interface TransferToLayingFormProps {
-  type?: 'add' | 'edit' | 'detail';
-  initialValues?: TransferToLaying;
-}
-
-const TransferToLayingForm = ({
-  type = 'add',
-  initialValues,
-}: TransferToLayingFormProps) => {
-  const router = useRouter();
-
-  // Modal hooks
-  const deleteModal = useModal();
-  const approveModal = useModal();
-  const rejectModal = useModal();
-
-  const [formErrorMessage, setFormErrorMessage] = useState('');
-
-  // Modal loading state
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
-  const [isRejectLoading, setIsRejectLoading] = useState(false);
-
-  const { data: approvalHistory, isLoading: isLoadingApprovalHistory } = useSWR(
-    type === 'detail' && initialValues ? [String(initialValues.id)] : null,
-    ([id]: string[]) => TransferToLayingApi.getApprovalHistory(Number(id))
-  );
-
-  const createTransferToLayingHandler = useCallback(
-    async (payload: CreateTransferToLayingPayload) => {
-      const createTransferToLayingRes =
-        await TransferToLayingApi.create(payload);
-
-      if (isResponseError(createTransferToLayingRes)) {
-        setFormErrorMessage(createTransferToLayingRes.message);
-        return;
-      }
-
-      toast.success(createTransferToLayingRes?.message as string);
-      router.push('/production/transfer-to-laying');
-    },
-    [router]
-  );
-
-  const updateTransferToLayingHandler = useCallback(
-    async (
-      transferToLayingId: number,
-      payload: UpdateTransferToLayingPayload
-    ) => {
-      const updateKandangRes = await TransferToLayingApi.update(
-        transferToLayingId,
-        payload
-      );
-
-      if (updateKandangRes?.status === 'error') {
-        setFormErrorMessage(updateKandangRes.message);
-        return;
-      }
-
-      toast.success(updateKandangRes?.message as string);
-      router.refresh();
-      router.push('/production/transfer-to-laying');
-    },
-    [router]
-  );
-
-  // const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
-  //   return getTransferToLayingFormInitialValues(initialValues);
-  // }, [initialValues]);
-
-  const [formikInitialValues, setFormikInitialValues] = useState(
-    getTransferToLayingFormInitialValues()
-  );
-
-  const formik = useFormik<TransferToLayingFormValues>({
-    initialValues: formikInitialValues,
-    validationSchema:
-      type === 'edit'
-        ? UpdateTransferToLayingFormSchema
-        : TransferToLayingFormSchema,
-    onSubmit: async (values) => {
-      setFormErrorMessage('');
-
-      const transferToLayingPayload: CreateTransferToLayingPayload = {
-        transfer_date: values.transfer_date as string,
-        source_project_flock_id: values.flockSource?.value as number,
-        target_project_flock_id: values.flockDestination?.value as number,
-        totalQuantity: values.totalQuantity as number,
-
-        source_kandangs: values.flockSourceKandangs?.map((kandang) => ({
-          project_flock_kandang_id: kandang.kandang.value,
-          quantity: parseFloat(kandang.quantity as string),
-        })) as CreateTransferToLayingPayload['source_kandangs'],
-
-        target_kandangs: values.flockDestinationKandangs?.map((kandang) => ({
-          project_flock_kandang_id: kandang.kandang.value,
-          quantity: parseFloat(kandang.quantity as string),
-        })) as CreateTransferToLayingPayload['target_kandangs'],
-
-        reason: values.reason as string,
-      };
-
-      switch (type) {
-        case 'add':
-          await createTransferToLayingHandler(transferToLayingPayload);
-          break;
-
-        case 'edit':
-          await updateTransferToLayingHandler(
-            initialValues?.id as number,
-            transferToLayingPayload
-          );
-          break;
-      }
-    },
-  });
-
-  const { setValues: formikSetValues, values: formikValues } = formik;
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
-  const {
-    flockSourceKandangs: flockSourceKandangsValue,
-    flockDestinationKandangs: flockDestinationKandangsValue,
-    totalQuantity,
-  } = formikValues;
-
-  const deleteTransferToLayingClickHandler = () => {
-    deleteModal.openModal();
-  };
-
-  const approveClickHandler = () => {
-    approveModal.openModal();
-  };
-
-  const rejectClickHandler = () => {
-    rejectModal.openModal();
-  };
-
-  // Modal confirm click handler
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-
-    try {
-      await TransferToLayingApi.delete(initialValues?.id as number);
-
-      toast.success('Berhasil menghapus data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } catch (error) {
-      toast.success('Gagal menghapus data transfer ke laying!');
-    } finally {
-      deleteModal.closeModal();
-      setIsDeleteLoading(false);
-    }
-  };
-
-  const confirmationModalApproveClickHandler = async (notes: string) => {
-    setIsApproveLoading(true);
-
-    const approveResponse = await TransferToLayingApi.approve(
-      initialValues?.id as number,
-      notes
-    );
-
-    if (isResponseSuccess(approveResponse)) {
-      approveModal.closeModal();
-
-      toast.success('Berhasil approve data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } else {
-      approveModal.closeModal();
-
-      toast.error('Gagal approve data transfer ke laying!');
-    }
-
-    setIsApproveLoading(false);
-  };
-
-  const confirmationModalRejectClickHandler = async (notes: string) => {
-    setIsRejectLoading(true);
-
-    const rejectResponse = await TransferToLayingApi.reject(
-      initialValues?.id as number,
-      notes
-    );
-
-    if (isResponseSuccess(rejectResponse)) {
-      rejectModal.closeModal();
-
-      toast.success('Berhasil reject data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } else {
-      rejectModal.closeModal();
-
-      toast.error('Gagal reject data transfer ke laying!');
-    }
-
-    setIsRejectLoading(false);
-  };
-
-  // flock source
-  const isFlockSourceKandangsRepeaterInputError = (
-    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.touched.flockSourceKandangs?.[idx]?.[column] &&
-      Boolean(
-        formik.errors.flockSourceKandangs?.[idx] instanceof Object &&
-          formik.errors.flockSourceKandangs?.[idx]?.[column]
-      )
-    );
-  };
-
-  const flockSourceKandangsRepeaterInputErrorMessage = (
-    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.errors.flockSourceKandangs?.[idx] as Record<string, string>
-    )?.[column];
-  };
-
-  const {
-    setInputValue: setFlockSourceInputValue,
-    options: flockSourceOptions,
-    isLoadingOptions: isLoadingFlockSourceOptions,
-    rawData: flockSources,
-    loadMore: loadMoreFlockSource,
-    hasMore: hasMoreFlockSource,
-  } = useSelect<ProjectFlock>(
-    '/production/project-flocks',
-    'id',
-    'flock_name',
-    'search',
-    {
-      category: 'GROWING',
-    }
-  );
-
-  const flockSourceChangeHandler = async (
-    val: OptionType | OptionType[] | null
-  ) => {
-    // Get flock source data for total quantity and kandang
-    const flockSource =
-      isResponseSuccess(flockSources) && val !== null
-        ? flockSources.data.find(
-            (item) => item.id === (val as OptionType).value
-          )
-        : undefined;
-
-    // Set total quantity and kandangs
-    if (flockSource) {
-      const mappedFlockKandangsAvailableQty =
-        await TransferToLayingApi.getMappedFlockKandangsAvailability(
-          flockSource.id
-        );
-
-      const formattedKandangs = flockSource.kandangs.map((item) => ({
-        kandang: {
-          value: item.project_flock_kandang_id,
-          label: item.name,
-        },
-        quantity: '',
-        maxQuantity:
-          (mappedFlockKandangsAvailableQty &&
-            mappedFlockKandangsAvailableQty[item.project_flock_kandang_id]
-              .available_qty) ??
-          0,
-      }));
-
-      let maxTotalQuantity = 0;
-      // flockSource.kandangs.forEach((item) => {
-      //   maxTotalQuantity += item.capacity;
-      // });
-      formattedKandangs.forEach((item) => {
-        maxTotalQuantity += item.maxQuantity;
-      });
-
-      formik.setFieldValue('totalQuantity', '');
-      formik.setFieldValue('maxTotalQuantity', maxTotalQuantity);
-      formik.setFieldValue('flockSourceKandangs', formattedKandangs);
-    } else {
-      formik.setFieldValue('totalQuantity', undefined);
-      formik.setFieldValue('flockSourceKandangs', undefined);
-      formik.setFieldValue('reason', '');
-    }
-
-    formik.setFieldTouched('flockSource', true);
-    formik.setFieldValue('flockSource', val);
-  };
-
-  // flock destination
-  const isFlockDestinationKandangsRepeaterInputError = (
-    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.touched.flockDestinationKandangs?.[idx]?.[column] &&
-      Boolean(
-        formik.errors.flockDestinationKandangs?.[idx] instanceof Object &&
-          formik.errors.flockDestinationKandangs?.[idx]?.[column]
-      )
-    );
-  };
-
-  const flockDestinationKandangsRepeaterInputErrorMessage = (
-    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.errors.flockDestinationKandangs?.[idx] as Record<string, string>
-    )?.[column];
-  };
-
-  const {
-    setInputValue: setFlockDestinationInputValue,
-    options: flockDestinationOptions,
-    isLoadingOptions: isLoadingFlockDestinationOptions,
-    rawData: flockDestinations,
-    loadMore: loadMoreFlockDestination,
-    hasMore: hasMoreFlockDestination,
-  } = useSelect<ProjectFlock>(
-    '/production/project-flocks',
-    'id',
-    'flock_name',
-    'search',
-    {
-      category: 'LAYING',
-    }
-  );
-
-  const flockDestinationChangeHandler = (
-    val: OptionType | OptionType[] | null
-  ) => {
-    // Get flock destination data for total quantity and kandang
-    const flockDestination =
-      isResponseSuccess(flockDestinations) && val !== null
-        ? flockDestinations.data.find(
-            (item) => item.id === (val as OptionType).value
-          )
-        : undefined;
-
-    // Set total quantity and kandangs
-    if (flockDestination) {
-      const formattedKandangs = flockDestination.kandangs.map((item) => ({
-        kandang: {
-          value: item.project_flock_kandang_id,
-          label: item.name,
-        },
-        quantity: '',
-
-        // TODO: integrate this later to real kandang capacity API
-        // maxQuantity: item.capacity ?? 0,
-        maxQuantity: item.capacity ?? Infinity,
-      }));
-
-      formik.setFieldValue('flockDestinationKandangs', formattedKandangs);
-    }
-
-    formik.setFieldTouched('flockDestination', true);
-    formik.setFieldValue('flockDestination', val);
-  };
-
-  const isShowApproveRejectButton =
-    initialValues &&
-    initialValues?.approval?.step_number === 1 &&
-    initialValues?.approval.action !== 'REJECTED';
-
-  const isShowDeleteButton =
-    initialValues &&
-    initialValues?.approval.action !== 'REJECTED' &&
-    initialValues?.approval.action !== 'APPROVED';
-
-  const isShowEditButton = isShowDeleteButton;
-
-  useEffect(() => {
-    const getFilledInitialValues = async () => {
-      if (initialValues) {
-        const filledInitialValues =
-          await getFilledTransferToLayingFormInitialValues(initialValues);
-
-        setFormikInitialValues(filledInitialValues);
-      }
-    };
-
-    getFilledInitialValues();
-  }, [initialValues, setFormikInitialValues]);
-
-  useEffect(() => {
-    formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
-
-  useEffect(() => {
-    // calculate total quantity if kandangs quantity change
-    if (flockSourceKandangsValue && flockSourceKandangsValue.length > 0) {
-      let newTotalQuantity = 0;
-
-      flockSourceKandangsValue.forEach((item) => {
-        newTotalQuantity += parseFloat(item.quantity as string);
-      });
-
-      formik.setFieldValue('totalQuantity', newTotalQuantity);
-      formik.validateField('totalQuantity');
-    }
-  }, [formikSetValues, flockSourceKandangsValue]);
-
-  useEffect(() => {
-    // calculate total quantity if kandangs quantity change
-    if (
-      flockDestinationKandangsValue &&
-      flockDestinationKandangsValue.length > 0
-    ) {
-      let destinationKandangsTotalQuantity = 0;
-
-      flockDestinationKandangsValue.forEach((item) => {
-        destinationKandangsTotalQuantity += parseFloat(item.quantity as string);
-      });
-
-      if (
-        destinationKandangsTotalQuantity > parseFloat(String(totalQuantity))
-      ) {
-      }
-    }
-  }, [formikSetValues, flockDestinationKandangsValue]);
-
-  return (
-    <>
-      <section className='w-full max-w-3xl'>
-        <header className='flex flex-col gap-4'>
-          <Button
-            href='/production/transfer-to-laying'
-            variant='link'
-            className='w-fit p-0 text-primary'
-          >
-            <Icon icon='uil:arrow-left' width={24} height={24} />
-            Kembali
-          </Button>
-
-          <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Transfer ke Laying'}
-            {type === 'edit' && 'Edit Transfer ke Laying'}
-            {type === 'detail' && 'Detail Transfer ke Laying'}
-          </h1>
-        </header>
-
-        {type === 'detail' &&
-          initialValues &&
-          !isLoadingApprovalHistory &&
-          isResponseSuccess(approvalHistory) && (
-            <div className='w-full my-4'>
-              <ApprovalSteps
-                approvals={formatGroupedApprovalsToApprovalSteps(
-                  TRANSFER_TO_LAYING_APPROVAL_LINE,
-                  approvalHistory.data,
-                  initialValues.approval
-                )}
-              />
-            </div>
-          )}
-
-        <div className='w-full my-4 flex flex-row justify-between gap-2'>
-          {type === 'detail' && (
-            <>
-              {isShowApproveRejectButton && (
-                <div className='w-full flex flex-row justify-end gap-2'>
-                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
-                    <Button
-                      variant='outline'
-                      color='success'
-                      onClick={approveClickHandler}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:check'
-                        width={24}
-                        height={24}
-                      />
-                      Approve
-                    </Button>
-                  </RequirePermission>
-
-                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
-                    <Button
-                      variant='outline'
-                      color='error'
-                      onClick={rejectClickHandler}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
-                      />
-                      Reject
-                    </Button>
-                  </RequirePermission>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-
-        <form
-          onSubmit={handleFormSubmit}
-          onReset={formik.handleReset}
-          className='w-full flex flex-col gap-6'
-        >
-          <div className='flex flex-col gap-4'>
-            <DateInput
-              required
-              label='Tanggal Transfer'
-              name='transfer_date'
-              placeholder='Masukkan tanggal transfer'
-              value={formik.values.transfer_date ?? ''}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.transfer_date &&
-                Boolean(formik.errors.transfer_date)
-              }
-              errorMessage={formik.errors.transfer_date}
-              readOnly={type === 'detail'}
-            />
-
-            <div className='flex flex-col sm:flex-row gap-4'>
-              <SelectInput
-                required
-                label='Flock Asal'
-                placeholder='Flock asal'
-                value={formik.values.flockSource as OptionType}
-                options={flockSourceOptions}
-                onChange={flockSourceChangeHandler}
-                isLoading={isLoadingFlockSourceOptions}
-                onInputChange={setFlockSourceInputValue}
-                onMenuScrollToBottom={loadMoreFlockSource}
-                isError={
-                  formik.touched.flockSource &&
-                  Boolean(typeof formik.errors.flockSource === 'string')
-                }
-                errorMessage={formik.errors.flockSource as string}
-                isDisabled={type === 'detail'}
-                isClearable
-              />
-
-              <SelectInput
-                required
-                label='Flock Tujuan'
-                placeholder='Flock tujuan'
-                value={formik.values.flockDestination as OptionType}
-                options={flockDestinationOptions}
-                onChange={flockDestinationChangeHandler}
-                isLoading={isLoadingFlockDestinationOptions}
-                onInputChange={setFlockDestinationInputValue}
-                onMenuScrollToBottom={loadMoreFlockDestination}
-                isError={
-                  formik.touched.flockDestination &&
-                  Boolean(typeof formik.errors.flockDestination === 'string')
-                }
-                errorMessage={formik.errors.flockDestination as string}
-                isDisabled={type === 'detail'}
-                isClearable
-              />
-            </div>
-
-            <NumberInput
-              required
-              name='totalQuantity'
-              label='Jumlah Transfer'
-              bottomLabel={
-                formikValues.maxTotalQuantity
-                  ? `Max: ${formikValues.maxTotalQuantity}`
-                  : undefined
-              }
-              placeholder='Masukkan jumlah transfer'
-              value={
-                formik.values.totalQuantity ? formik.values.totalQuantity : ''
-              }
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.totalQuantity &&
-                Boolean(formik.errors.totalQuantity)
-              }
-              errorMessage={formik.errors.totalQuantity}
-              disabled
-            />
-
-            <div className='flex flex-col gap-4'>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      <th>Kandang Flock Asal</th>
-                      <th>Kuantitas</th>
-                    </tr>
-                  </thead>
-
-                  <tbody>
-                    {(!formik.values.flockSourceKandangs ||
-                      formik.values.flockSourceKandangs.length === 0) && (
-                      <tr>
-                        <td colSpan={2}>
-                          <p className='w-full text-center text-gray-400'>
-                            Pilih flock asal terlebih dahulu!
-                          </p>
-                        </td>
-                      </tr>
-                    )}
-
-                    {formik.values.flockSourceKandangs &&
-                      formik.values.flockSourceKandangs.map((kandang, idx) => (
-                        <tr key={idx}>
-                          <td>
-                            <SelectInput
-                              value={kandang.kandang}
-                              options={[]}
-                              isDisabled
-                              className={{
-                                wrapper: 'min-w-52',
-                              }}
-                            />
-                          </td>
-
-                          <td>
-                            <NumberInput
-                              required
-                              name={`flockSourceKandangs[${idx}].quantity`}
-                              bottomLabel={
-                                kandang.maxQuantity
-                                  ? `Max: ${kandang.maxQuantity}`
-                                  : undefined
-                              }
-                              placeholder='Masukkan kuantitas'
-                              value={kandang.quantity}
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              isError={isFlockSourceKandangsRepeaterInputError(
-                                'quantity',
-                                idx
-                              )}
-                              errorMessage={flockSourceKandangsRepeaterInputErrorMessage(
-                                'quantity',
-                                idx
-                              )}
-                              readOnly={type === 'detail'}
-                              className={{
-                                wrapper: 'min-w-52',
-                              }}
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-              </div>
-
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      <th>Kandang Flock Tujuan</th>
-                      <th>Kuantitas</th>
-                    </tr>
-                  </thead>
-
-                  <tbody>
-                    {(!formik.values.flockDestinationKandangs ||
-                      formik.values.flockDestinationKandangs.length === 0) && (
-                      <tr>
-                        <td colSpan={2}>
-                          <p className='w-full text-center text-gray-400'>
-                            Pilih flock tujuan terlebih dahulu!
-                          </p>
-                        </td>
-                      </tr>
-                    )}
-
-                    {formik.values.flockDestinationKandangs &&
-                      formik.values.flockDestinationKandangs.map(
-                        (kandang, idx) => (
-                          <tr key={idx}>
-                            <td>
-                              <SelectInput
-                                value={kandang.kandang}
-                                options={[]}
-                                isDisabled
-                                className={{
-                                  wrapper: 'min-w-52',
-                                }}
-                              />
-                            </td>
-
-                            <td>
-                              <NumberInput
-                                required
-                                name={`flockDestinationKandangs[${idx}].quantity`}
-                                bottomLabel={
-                                  kandang.maxQuantity
-                                    ? `Max: ${kandang.maxQuantity}`
-                                    : undefined
-                                }
-                                placeholder='Masukkan kuantitas'
-                                value={kandang.quantity}
-                                onChange={formik.handleChange}
-                                onBlur={formik.handleBlur}
-                                isError={isFlockDestinationKandangsRepeaterInputError(
-                                  'quantity',
-                                  idx
-                                )}
-                                errorMessage={flockDestinationKandangsRepeaterInputErrorMessage(
-                                  'quantity',
-                                  idx
-                                )}
-                                readOnly={type === 'detail'}
-                                className={{
-                                  wrapper: 'min-w-52',
-                                }}
-                              />
-                            </td>
-                          </tr>
-                        )
-                      )}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            <TextArea
-              required
-              rows={5}
-              name='reason'
-              label='Alasan Transfer'
-              placeholder='Alasan transfer'
-              value={formik.values.reason}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.reason && Boolean(formik.errors.reason)}
-              errorMessage={formik.errors.reason}
-              readOnly={type === 'detail'}
-              disabled={Boolean(formik.errors.flockSource)}
-            />
-          </div>
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
-          {formErrorMessage && (
-            <div role='alert' className='alert alert-error w-full'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{formErrorMessage}</span>
-            </div>
-          )}
-
-          <div className='flex flex-row justify-between gap-2 flex-wrap'>
-            {type !== 'add' && (
-              <div className='flex flex-row justify-start gap-2'>
-                {isShowDeleteButton && (
-                  <RequirePermission permissions='lti.production.transfer_to_laying.delete'>
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={deleteTransferToLayingClickHandler}
-                      className='px-4'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Delete
-                    </Button>
-                  </RequirePermission>
-                )}
-
-                {type !== 'edit' && isShowEditButton && (
-                  <RequirePermission permissions='lti.production.transfer_to_laying.update'>
-                    <Button
-                      type='button'
-                      color='warning'
-                      href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
-                      className='px-4'
-                    >
-                      <Icon
-                        icon='material-symbols:edit-outline'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Edit
-                    </Button>
-                  </RequirePermission>
-                )}
-              </div>
-            )}
-
-            {type !== 'detail' && (
-              <div
-                className={cn('flex flex-row justify-end gap-2', {
-                  'w-full': type === 'add',
-                })}
-              >
-                <Button type='reset' color='warning' className='px-4'>
-                  Reset
-                </Button>
-
-                <RequirePermission
-                  permissions={
-                    type === 'add'
-                      ? 'lti.production.transfer_to_laying.create'
-                      : 'lti.production.transfer_to_laying.update'
-                  }
-                >
-                  <Button
-                    type='submit'
-                    color='primary'
-                    isLoading={formik.isSubmitting}
-                    disabled={formik.isSubmitting}
-                    className='px-4'
-                  >
-                    Submit
-                  </Button>
-                </RequirePermission>
-              </div>
-            )}
-          </div>
-        </form>
-      </section>
-
-      {type !== 'add' && (
-        <ConfirmationModal
-          ref={deleteModal.ref}
-          type='error'
-          text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isDeleteLoading,
-            onClick: confirmationModalDeleteClickHandler,
-          }}
-        />
-      )}
-
-      {type === 'detail' && (
-        <>
-          <ConfirmationModalWithNotes
-            ref={approveModal.ref}
-            type='success'
-            text='Apakah anda yakin ingin approve data transfer ke laying ini?'
-            secondaryButton={{
-              text: 'Tidak',
-            }}
-            primaryButton={{
-              text: 'Ya',
-              color: 'success',
-              isLoading: isApproveLoading,
-              onClick: confirmationModalApproveClickHandler,
-            }}
-          />
-
-          <ConfirmationModalWithNotes
-            ref={rejectModal.ref}
-            type='error'
-            text='Apakah anda yakin ingin reject data transfer ke laying ini?'
-            secondaryButton={{
-              text: 'Tidak',
-            }}
-            primaryButton={{
-              text: 'Ya',
-              color: 'error',
-              isLoading: isRejectLoading,
-              onClick: confirmationModalRejectClickHandler,
-            }}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-export default TransferToLayingForm;

src/components/pages/production/uniformity/form/UniformityForm.tsx

@@ -511,25 +511,6 @@ const UniformityForm = ({
           <h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
 
           <form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
-            {uniformityFormErrorMessage && (
-              <div className='alert alert-error' role='alert'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{uniformityFormErrorMessage}</span>
-              </div>
-            )}
-
-            {/* Error List Alert */}
-            {formErrorList.length > 0 && (
-              <AlertErrorList
-                formErrorList={formErrorList}
-                onClose={() => setFormErrorList([])}
-              />
-            )}
-
             <DateInput
               required
               label='Tanggal'
@@ -753,6 +734,27 @@ const UniformityForm = ({
               )}
             </div>
 
+            <div className='w-full'>
+              {uniformityFormErrorMessage && (
+                <div className='alert alert-error' role='alert'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{uniformityFormErrorMessage}</span>
+                </div>
+              )}
+
+              {/* Error List Alert */}
+              {formErrorList.length > 0 && (
+                <AlertErrorList
+                  formErrorList={formErrorList}
+                  onClose={() => setFormErrorList([])}
+                />
+              )}
+            </div>
+
             {!isNextStep && (
               <RequirePermission permissions='lti.production.uniformity.create'>
                 <Button

src/components/pages/purchase/PurchaseTable.tsx

@@ -16,6 +16,7 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
+import Badge from '@/components/Badge';
 
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -153,6 +154,57 @@ const PurchaseTable = () => {
         return `${diffDays} hari`;
       },
     },
+    {
+      header: 'Status Approval',
+      cell: (props) => {
+        const approval = props.row.original.latest_approval;
+        if (!approval) return '-';
+
+        const isRejected = approval.action === 'REJECTED';
+
+        let statusColor:
+          | 'warning'
+          | 'success'
+          | 'neutral'
+          | 'error'
+          | 'primary'
+          | 'info' = 'neutral';
+
+        switch (approval.step_number) {
+          case 1:
+            statusColor = 'neutral';
+            break;
+          case 2:
+            statusColor = 'primary';
+            break;
+          case 3:
+            statusColor = 'info';
+            break;
+          case 4:
+            statusColor = 'warning';
+            break;
+          case 5:
+            statusColor = 'success';
+            break;
+        }
+
+        if (isRejected) {
+          statusColor = 'error';
+        }
+
+        return (
+          <Badge
+            variant='soft'
+            color={statusColor}
+            className={{
+              badge: 'whitespace-nowrap',
+            }}
+          >
+            {isRejected ? 'Ditolak' : approval.step_name}
+          </Badge>
+        );
+      },
+    },
     {
       header: 'Aksi',
       cell: (props) => {

src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx

@@ -370,25 +370,6 @@ const PurchaseOrderAcceptApprovalForm = ({
             ? 'Konfirmasi Penerimaan Produk'
             : 'Edit Penerimaan Produk'}
         </h2>
-        {purchaseOrderFormErrorMessage && (
-          <div role='alert' className='alert alert-error'>
-            <Icon
-              icon='material-symbols:error-outline'
-              width={24}
-              height={24}
-            />
-            <span>{purchaseOrderFormErrorMessage}</span>
-          </div>
-        )}
-
-        {/* Error List Alert */}
-        {formErrorList.length > 0 && (
-          <AlertErrorList
-            formErrorList={formErrorList}
-            onClose={() => setFormErrorList([])}
-          />
-        )}
-
         <div className='overflow-x-auto'>
           <table className='table'>
             <thead>
@@ -709,6 +690,27 @@ const PurchaseOrderAcceptApprovalForm = ({
           />
         </div>
 
+        <div className='w-full mt-4'>
+          {purchaseOrderFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseOrderFormErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+        </div>
+
         {/* Action buttons */}
         <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
           <div className='flex flex-row justify-end gap-2 w-full'>

src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

@@ -688,25 +688,6 @@ const PurchaseOrderStaffApprovalForm = ({
               ? 'Konfirmasi Item Pembelian'
               : 'Edit Item Pembelian'}
           </h2>
-          {purchaseOrderFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{purchaseOrderFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           <div className='overflow-x-auto'>
             {groupedPurchaseItems.length > 0 ? (
               <div>
@@ -1186,6 +1167,27 @@ const PurchaseOrderStaffApprovalForm = ({
             />
           </div>
 
+          <div className='w-full mt-4'>
+            {purchaseOrderFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{purchaseOrderFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
             <div className='flex flex-row justify-end gap-2 w-full'>

src/components/pages/purchase/form/request/PurchaseRequestForm.tsx

@@ -494,25 +494,6 @@ const PurchaseRequestForm = ({
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {purchaseRequestFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{purchaseRequestFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           {/* Basic Info Card */}
           <Card
             title='Informasi Purchase Request'
@@ -912,6 +893,27 @@ const PurchaseRequestForm = ({
             )}
           </Card>
 
+          <div className='w-full mb-4'>
+            {purchaseRequestFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{purchaseRequestFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -605,7 +605,7 @@ const PurchaseOrderDetail = ({
   return (
     <section className='w-full'>
       {/* Approval and Action Buttons */}
-      <div className='flex justify-between items-center w-full my-6'>
+      <div className='flex flex-col sm:flex-row sm:justify-between sm:items-center w-full mb-6 gap-4 sm:gap-0'>
         <Button
           href='/purchase'
           variant='link'
@@ -630,7 +630,7 @@ const PurchaseOrderDetail = ({
                 onClick={handleApprovalClick}
                 variant='outline'
                 color='success'
-                className='w-full sm:w-fit'
+                className='flex-1 sm:w-fit'
               >
                 <Icon icon='material-symbols:check' width={24} height={24} />
                 Approve
@@ -649,7 +649,7 @@ const PurchaseOrderDetail = ({
               <Button
                 variant='outline'
                 color='error'
-                className='w-full sm:w-fit'
+                className='flex-1 sm:w-fit'
                 onClick={handleRejectionClick}
               >
                 <Icon icon='material-symbols:close' width={24} height={24} />

src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx

@@ -12,6 +12,12 @@ import {
 
 import { formatDate, formatCurrency, formatNumber } from '@/lib/helper';
 import { CustomerPaymentReport } from '@/types/api/report/customer-payment';
+import {
+  PdfTable,
+  PdfColumn,
+  PdfTbodyCell,
+  PdfTfootCell,
+} from '@/components/helper/pdf/table';
 
 Font.register({
   family: 'Helvetica',
@@ -45,97 +51,6 @@ const pdfStyles = StyleSheet.create({
     marginBottom: 5,
     color: '#333333',
   },
-  table: {
-    borderWidth: 1,
-    borderColor: '#000000',
-    marginBottom: 15,
-  },
-  tableRow: {
-    flexDirection: 'row',
-  },
-  tableHeader: {
-    backgroundColor: '#F5F5F5',
-  },
-  tableCell: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'left',
-  },
-  tableCellNo: {
-    flex: 0.5,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'center',
-  },
-  tableCellLast: {
-    flex: 1,
-    padding: 4,
-    fontSize: 7,
-  },
-  tableCellHeader: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-    textAlign: 'center',
-  },
-  tableCellHeaderRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    textAlign: 'right',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-  },
-  tableCellRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  tableCellCenter: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 7,
-    textAlign: 'center',
-  },
-  tableBorderBottom: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-  },
-  summaryRow: {
-    backgroundColor: '#F0F0F0',
-    fontWeight: 'bold',
-  },
   badge: {
     backgroundColor: '#1f74bf',
     color: '#FFFFFF',
@@ -217,6 +132,165 @@ const getParameterText = (
   return paramsText;
 };
 
+// Helper functions for PdfTable
+const getTableColumns = (): PdfColumn[] => [
+  { key: 'no', header: 'No', flex: 0.5, align: 'center' },
+  { key: 'trans_date', header: 'Tanggal DO', flex: 1.2, align: 'center' },
+  {
+    key: 'delivery_date',
+    header: 'Tanggal Realisasi',
+    flex: 1.2,
+    align: 'center',
+  },
+  { key: 'aging', header: 'Aging', flex: 0.8, align: 'center' },
+  { key: 'reference', header: 'Referensi', flex: 1.5, align: 'left' },
+  { key: 'vehicle_numbers', header: 'No Polisi', flex: 1.2, align: 'left' },
+  { key: 'qty', header: 'Qty', flex: 0.8, align: 'right' },
+  { key: 'weight', header: 'Berat', flex: 1, align: 'right' },
+  { key: 'average_weight', header: 'Rata-Rata', flex: 0.8, align: 'right' },
+  { key: 'unit_price', header: 'Harga/Unit', flex: 1.2, align: 'right' },
+  { key: 'final_price', header: 'Harga Akhir', flex: 1.2, align: 'right' },
+  { key: 'total_price', header: 'Total', flex: 1.2, align: 'right' },
+  { key: 'payment_amount', header: 'Pembayaran', flex: 1.2, align: 'right' },
+  { key: 'accounts_receivable', header: 'Saldo', flex: 1.2, align: 'right' },
+  { key: 'status', header: 'Keterangan', flex: 1.5, align: 'center' },
+  { key: 'pickup_info', header: 'Pengambilan', flex: 1, align: 'left' },
+  { key: 'sales_person', header: 'Sales', flex: 1.5, align: 'left' },
+];
+
+const getTableData = (
+  rows: CustomerPaymentReport['rows']
+): PdfTbodyCell[][] => {
+  return rows.map((item, index) => [
+    { key: 'no', value: index + 1 },
+    {
+      key: 'trans_date',
+      value: item.trans_date ? formatDate(item.trans_date, 'DD MMM YY') : '-',
+    },
+    {
+      key: 'delivery_date',
+      value: item.delivery_date
+        ? formatDate(item.delivery_date, 'DD MMM YY')
+        : '-',
+    },
+    {
+      key: 'aging',
+      value:
+        item.aging_day != null ? `${formatNumber(item.aging_day)} hari` : '-',
+    },
+    { key: 'reference', value: item.reference || '-' },
+    {
+      key: 'vehicle_numbers',
+      value:
+        Array.isArray(item.vehicle_numbers) && item.vehicle_numbers.length > 0
+          ? item.vehicle_numbers.join(', ')
+          : '-',
+    },
+    { key: 'qty', value: formatNumber(item.qty), align: 'right' },
+    { key: 'weight', value: formatNumber(item.weight), align: 'right' },
+    {
+      key: 'average_weight',
+      value: formatNumber(item.average_weight),
+      align: 'right',
+    },
+    {
+      key: 'unit_price',
+      value: formatCurrency(item.unit_price),
+      align: 'right',
+    },
+    {
+      key: 'final_price',
+      value: formatCurrency(item.final_price),
+      align: 'right',
+    },
+    {
+      key: 'total_price',
+      value: formatCurrency(item.total_price),
+      align: 'right',
+    },
+    {
+      key: 'payment_amount',
+      value: formatCurrency(item.payment_amount),
+      align: 'right',
+    },
+    {
+      key: 'accounts_receivable',
+      value: formatCurrency(item.accounts_receivable),
+      align: 'right',
+      color: item.accounts_receivable < 0 ? '#DC2626' : undefined,
+    },
+    {
+      key: 'status',
+      value: item.status ? (
+        <View
+          style={[
+            pdfStyles.badge,
+            item.status === 'LUNAS'
+              ? pdfStyles.badgeLunas
+              : pdfStyles.badgeBelumLunas,
+          ]}
+        >
+          <Text>{item.status === 'LUNAS' ? 'Lunas' : 'Belum Lunas'}</Text>
+        </View>
+      ) : (
+        '-'
+      ),
+    },
+    {
+      key: 'pickup_info',
+      value:
+        Array.isArray(item.pickup_info) && item.pickup_info.length > 0
+          ? item.pickup_info.join(', ')
+          : '-',
+    },
+    { key: 'sales_person', value: item.sales_person || '-' },
+  ]);
+};
+
+const getTableFooter = (
+  summary: CustomerPaymentReport['summary']
+): PdfTfootCell[] => [
+  { key: 'no', value: 'Total' },
+  { key: 'trans_date', value: '' },
+  { key: 'delivery_date', value: '' },
+  { key: 'aging', value: '' },
+  { key: 'reference', value: '' },
+  { key: 'vehicle_numbers', value: '' },
+  { key: 'qty', value: formatNumber(summary?.total_qty || 0), align: 'right' },
+  {
+    key: 'weight',
+    value: formatNumber(summary?.total_weight || 0),
+    align: 'right',
+  },
+  { key: 'average_weight', value: '' },
+  { key: 'unit_price', value: '' },
+  {
+    key: 'final_price',
+    value: formatCurrency(summary?.total_final_amount || 0),
+    align: 'right',
+  },
+  {
+    key: 'total_price',
+    value: formatCurrency(summary?.total_grand_amount || 0),
+    align: 'right',
+  },
+  {
+    key: 'payment_amount',
+    value: formatCurrency(summary?.total_payment || 0),
+    align: 'right',
+  },
+  {
+    key: 'accounts_receivable',
+    value: formatCurrency(summary?.total_accounts_receivable || 0),
+    align: 'right',
+    color:
+      (summary?.total_accounts_receivable || 0) < 0 ? '#DC2626' : undefined,
+  },
+  { key: 'status', value: '' },
+  { key: 'pickup_info', value: '' },
+  { key: 'sales_person', value: '' },
+];
+
 const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
   return (
     <Document>
@@ -269,329 +343,27 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
           </View>
 
           {/* Table */}
-          <View style={pdfStyles.table}>
-            {/* Table Header */}
-            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
-              <View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
-                <Text>No</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>Tanggal DO</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>Tanggal Realisasi</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 0.8 }]}>
-                <Text>Aging</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
-                <Text>Referensi</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>No Polisi</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Qty</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Berat</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Rata-Rata</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Harga/Unit</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Harga Akhir</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Total</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Pembayaran</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Saldo</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
-                <Text>Keterangan</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
-                <Text>Pengambilan</Text>
-              </View>
-              <View
-                style={[
-                  pdfStyles.tableCellHeader,
-                  { flex: 1.5, borderRightWidth: 0 },
-                ]}
-              >
-                <Text>Sales</Text>
-              </View>
-            </View>
-
-            {/* Table Body */}
-            <>
-              {/* Initial Balance Row */}
-              <View style={[pdfStyles.tableRow, pdfStyles.tableBorderBottom]}>
-                <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellCenter, { flex: 0.8 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellRight,
-                    {
-                      flex: 1.2,
-                      color:
-                        typeof customerReport.initial_balance === 'number' &&
-                        customerReport.initial_balance < 0
-                          ? 'red'
-                          : 'black',
-                    },
-                  ]}
-                >
-                  <Text>
-                    {formatCurrency(customerReport.initial_balance || 0)}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                  <Text></Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCell,
-                    { flex: 1.5, borderRightWidth: 0 },
-                  ]}
-                >
-                  <Text></Text>
-                </View>
-              </View>
-
-              {/* Data Rows */}
-              {customerReport.rows.map((item, index) => (
-                <View
-                  key={index}
-                  style={[
-                    pdfStyles.tableRow,
-                    index < customerReport.rows.length - 1
-                      ? pdfStyles.tableBorderBottom
-                      : {},
-                  ]}
-                >
-                  <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
-                    <Text>{index + 1}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
-                    <Text>
-                      {item.trans_date
-                        ? formatDate(item.trans_date, 'DD MMM YY')
-                        : '-'}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
-                    <Text>
-                      {item.delivery_date
-                        ? formatDate(item.delivery_date, 'DD MMM YY')
-                        : '-'}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellCenter, { flex: 0.8 }]}>
-                    <Text>
-                      {item.aging_day != null
-                        ? `${formatNumber(item.aging_day)} hari`
-                        : '-'}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                    <Text>{item.reference || '-'}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                    <Text>
-                      {Array.isArray(item.vehicle_numbers)
-                        ? item.vehicle_numbers.length > 0
-                          ? item.vehicle_numbers.join(', ')
-                          : '-'
-                        : '-'}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                    <Text>{formatNumber(item.qty)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>{formatNumber(item.weight)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                    <Text>{formatNumber(item.average_weight)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(item.unit_price)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(item.final_price)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(item.total_price)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(item.payment_amount)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text style={pdfStyles.textError}>
-                      {formatCurrency(item.accounts_receivable)}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellCenter, { flex: 1.5 }]}>
-                    {item.status ? (
-                      <View
-                        style={[
-                          pdfStyles.badge,
-                          item.status === 'LUNAS'
-                            ? pdfStyles.badgeLunas
-                            : pdfStyles.badgeBelumLunas,
-                        ]}
-                      >
-                        <Text>
-                          {item.status === 'LUNAS' ? 'Lunas' : 'Belum Lunas'}
-                        </Text>
-                      </View>
-                    ) : (
-                      <Text>-</Text>
-                    )}
-                  </View>
-                  <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                    <Text>
-                      {Array.isArray(item.pickup_info)
-                        ? item.pickup_info.length > 0
-                          ? item.pickup_info.join(', ')
-                          : '-'
-                        : '-'}
-                    </Text>
-                  </View>
-                  <View
-                    style={[
-                      pdfStyles.tableCell,
-                      { flex: 1.5, borderRightWidth: 0 },
-                    ]}
-                  >
-                    <Text>{item.sales_person || '-'}</Text>
-                  </View>
-                </View>
-              ))}
-            </>
-
-            {/* Summary Row */}
-            {customerReport.summary && (
-              <View style={[pdfStyles.tableRow, pdfStyles.summaryRow]}>
-                <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
-                  <Text>Total</Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 0.8 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatNumber(customerReport.summary.total_qty)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                  <Text>
-                    {formatNumber(customerReport.summary.total_weight)}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>
-                    {formatCurrency(customerReport.summary.total_final_amount)}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>
-                    {formatCurrency(customerReport.summary.total_grand_amount)}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>
-                    {formatCurrency(customerReport.summary.total_payment)}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text style={pdfStyles.textError}>
-                    {formatCurrency(
-                      customerReport.summary.total_accounts_receivable
-                    )}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                  <Text></Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCell,
-                    { flex: 1.5, borderRightWidth: 0 },
-                  ]}
-                >
-                  <Text></Text>
-                </View>
-              </View>
-            )}
-          </View>
+          <PdfTable
+            columns={getTableColumns()}
+            data={getTableData(customerReport.rows)}
+            footer={
+              customerReport.summary
+                ? getTableFooter(customerReport.summary)
+                : undefined
+            }
+            firstRow={
+              typeof customerReport.initial_balance === 'number' &&
+              customerReport.initial_balance !== 0
+                ? {
+                    valueKey: 'accounts_receivable',
+                    value: customerReport.initial_balance,
+                    align: 'right',
+                    color:
+                      customerReport.initial_balance < 0 ? '#DC2626' : 'black',
+                  }
+                : undefined
+            }
+          />
         </Page>
       ))}
     </Document>

src/components/pages/report/logistic-stock/export/PurchasesPerSupplierExport.tsx

@@ -11,6 +11,11 @@ import {
 } from '@react-pdf/renderer';
 import { LogisticPurchasePerSupplierReport } from '@/types/api/report/logistic-stock';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import {
+  PdfTable,
+  PdfColumn,
+  PdfTbodyCell,
+} from '@/components/helper/pdf/table';
 
 Font.register({
   family: 'Helvetica',
@@ -39,117 +44,6 @@ const pdfStyles = StyleSheet.create({
     marginBottom: 8,
     color: '#1f74bf',
   },
-  table: {
-    borderWidth: 1,
-    borderColor: '#000000',
-    marginBottom: 15,
-  },
-  tableRow: {
-    flexDirection: 'row',
-  },
-  tableHeader: {
-    backgroundColor: '#F5F5F5',
-  },
-  tableCell: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    textAlign: 'left',
-  },
-  tableCellNo: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    textAlign: 'center',
-  },
-  tableCellLast: {
-    flex: 1,
-    padding: 4,
-    fontSize: 8,
-  },
-  tableCellHeader: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-    textAlign: 'center',
-  },
-  tableCellHeaderRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    textAlign: 'right',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-  },
-  tableCellHeaderLast: {
-    flex: 1,
-    padding: 4,
-    fontSize: 8,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-    textAlign: 'center',
-  },
-  tableCellRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    textAlign: 'right',
-  },
-  tableCellCenter: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    textAlign: 'center',
-  },
-  tableCellCenterLast: {
-    flex: 1,
-    padding: 4,
-    fontSize: 8,
-    textAlign: 'center',
-  },
-  tableBorderBottom: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-  },
-  supplierSection: {
-    marginBottom: 10,
-  },
-  supplierSectionBreak: {
-    marginBottom: 15,
-  },
   badge: {
     backgroundColor: '#1f74bf',
     color: '#FFFFFF',
@@ -174,6 +68,12 @@ const pdfStyles = StyleSheet.create({
     flexWrap: 'wrap',
     marginBottom: 8,
   },
+  supplierSection: {
+    marginBottom: 10,
+  },
+  supplierSectionBreak: {
+    marginBottom: 15,
+  },
 });
 
 interface PurchasesPerSupplierExportParams {
@@ -218,6 +118,85 @@ const getParameterText = (
   return paramsText;
 };
 
+// Helper functions for PdfTable
+const getTableColumns = (): PdfColumn[] => [
+  { key: 'no', header: 'No', flex: 0.5, align: 'center' },
+  { key: 'receive_date', header: 'Tanggal Terima', flex: 1, align: 'center' },
+  { key: 'po_date', header: 'Tanggal PO', flex: 1, align: 'center' },
+  { key: 'po_number', header: 'Referensi', flex: 1, align: 'left' },
+  { key: 'product', header: 'Produk', flex: 1, align: 'left' },
+  { key: 'warehouse', header: 'Tujuan', flex: 1, align: 'left' },
+  { key: 'qty', header: 'Qty', flex: 0.8, align: 'right' },
+  { key: 'unit_price', header: 'Harga Beli', flex: 1.2, align: 'right' },
+  {
+    key: 'purchase_value',
+    header: 'Nilai Pembelian',
+    flex: 1.5,
+    align: 'right',
+  },
+  {
+    key: 'transport_price',
+    header: 'Biaya Transport',
+    flex: 1.2,
+    align: 'right',
+  },
+  { key: 'total_amount', header: 'Total', flex: 1.5, align: 'right' },
+  { key: 'expedition', header: 'Armada', flex: 1.2, align: 'center' },
+  { key: 'delivery_number', header: 'Surat Jalan', flex: 1, align: 'left' },
+];
+
+const getTableData = (
+  rows: LogisticPurchasePerSupplierReport['rows']
+): PdfTbodyCell[][] => {
+  return rows.map((item, index) => [
+    { key: 'no', value: index + 1, align: 'center' },
+    {
+      key: 'receive_date',
+      value: formatDate(item.receive_date, 'DD-MMM-YYYY'),
+      align: 'center',
+    },
+    {
+      key: 'po_date',
+      value: formatDate(item.po_date, 'DD-MMM-YYYY'),
+      align: 'center',
+    },
+    { key: 'po_number', value: item.po_number || '-' },
+    { key: 'product', value: item.product?.name || '-' },
+    { key: 'warehouse', value: item.warehouse?.name || '-' },
+    { key: 'qty', value: formatNumber(item.qty || 0), align: 'right' },
+    {
+      key: 'unit_price',
+      value: formatCurrency(item.unit_price || 0),
+      align: 'right',
+    },
+    {
+      key: 'purchase_value',
+      value: formatCurrency(item.purchase_value || 0),
+      align: 'right',
+    },
+    {
+      key: 'transport_price',
+      value: formatCurrency(item.transport_unit_price || 0),
+      align: 'right',
+    },
+    {
+      key: 'total_amount',
+      value: formatCurrency(item.total_amount || 0),
+      align: 'right',
+    },
+    {
+      key: 'expedition',
+      value: (
+        <View style={pdfStyles.badge}>
+          <Text>{item.expedition || '-'}</Text>
+        </View>
+      ),
+      align: 'center',
+    },
+    { key: 'delivery_number', value: item.delivery_number || '-' },
+  ]);
+};
+
 const createPDFDocument = (
   supplierReports: LogisticPurchasePerSupplierReport[],
   params: PurchasesPerSupplierExportParams['params']
@@ -266,114 +245,10 @@ const createPDFDocument = (
                 {supplierReport.supplier.name}
               </Text>
 
-              <View style={pdfStyles.table}>
-                {/* Table Header */}
-                <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
-                  <View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
-                    <Text>No</Text>
-                  </View>
-                  <View style={pdfStyles.tableCellHeader}>
-                    <Text>Tanggal Terima</Text>
-                  </View>
-                  <View style={pdfStyles.tableCellHeader}>
-                    <Text>Tanggal PO</Text>
-                  </View>
-                  <View style={pdfStyles.tableCellHeader}>
-                    <Text>Referensi</Text>
-                  </View>
-                  <View style={pdfStyles.tableCellHeader}>
-                    <Text>Produk</Text>
-                  </View>
-                  <View style={pdfStyles.tableCellHeader}>
-                    <Text>Tujuan</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                    <Text>Qty</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                    <Text>Harga Beli</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
-                    <Text>Nilai Pembelian</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                    <Text>Biaya Transport</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
-                    <Text>Total</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                    <Text>Armada</Text>
-                  </View>
-                  <View style={pdfStyles.tableCellHeaderLast}>
-                    <Text>Surat Jalan</Text>
-                  </View>
-                </View>
-
-                {/* Table Body */}
-                {supplierReport.rows.map(
-                  (
-                    item: LogisticPurchasePerSupplierReport['rows'][number],
-                    index: number
-                  ) => (
-                    <View
-                      key={index}
-                      style={[
-                        pdfStyles.tableRow,
-                        index < supplierReport.rows.length - 1
-                          ? pdfStyles.tableBorderBottom
-                          : {},
-                      ]}
-                    >
-                      <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
-                        <Text>{index + 1}</Text>
-                      </View>
-                      <View style={pdfStyles.tableCell}>
-                        <Text>
-                          {formatDate(item.receive_date, 'DD-MMM-YYYY')}
-                        </Text>
-                      </View>
-                      <View style={pdfStyles.tableCell}>
-                        <Text>{formatDate(item.po_date, 'DD-MMM-YYYY')}</Text>
-                      </View>
-                      <View style={pdfStyles.tableCell}>
-                        <Text>{item.po_number || '-'}</Text>
-                      </View>
-                      <View style={pdfStyles.tableCell}>
-                        <Text>{item.product?.name || '-'}</Text>
-                      </View>
-                      <View style={pdfStyles.tableCell}>
-                        <Text>{item.warehouse?.name || '-'}</Text>
-                      </View>
-                      <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                        <Text>{formatNumber(item.qty || 0)}</Text>
-                      </View>
-                      <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                        <Text>{formatCurrency(item.unit_price || 0)}</Text>
-                      </View>
-                      <View style={[pdfStyles.tableCellRight, { flex: 1.5 }]}>
-                        <Text>{formatCurrency(item.purchase_value || 0)}</Text>
-                      </View>
-                      <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                        <Text>
-                          {formatCurrency(item.transport_unit_price || 0)}
-                        </Text>
-                      </View>
-                      <View style={[pdfStyles.tableCellRight, { flex: 1.5 }]}>
-                        <Text>{formatCurrency(item.total_amount || 0)}</Text>
-                      </View>
-                      <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                        <View style={pdfStyles.badge}>
-                          <Text>{item.expedition || '-'}</Text>
-                        </View>
-                      </View>
-                      <View style={pdfStyles.tableCellLast}>
-                        <Text>{item.delivery_number || '-'}</Text>
-                      </View>
-                    </View>
-                  )
-                )}
-              </View>
+              <PdfTable
+                columns={getTableColumns()}
+                data={getTableData(supplierReport.rows)}
+              />
             </View>
           );
         }

src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx

@@ -29,6 +29,7 @@ import Menu from '@/components/menu/Menu';
 import { generatePurchasesPerSupplierPDF } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExport';
 import toast from 'react-hot-toast';
 import * as XLSX from 'xlsx';
+import { Icon } from '@iconify/react';
 
 const PurchasesPerSupplierTab = () => {
   // ===== STATE MANAGEMENT =====
@@ -723,27 +724,6 @@ const PurchasesPerSupplierTab = () => {
         subtitle='Laporan > Rekapitulasi Pembelian Per Supplier'
         className={{ wrapper: 'w-full', body: 'p-1!' }}
       >
-        <div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
-          <Button color='primary' onClick={handleSubmit}>
-            Cari
-          </Button>
-          <Button color='warning' onClick={resetFilters}>
-            Reset
-          </Button>
-          <Dropdown
-            trigger={
-              <Button color='success' isLoading={isAnyExportLoading}>
-                Export
-              </Button>
-            }
-            align='end'
-          >
-            <Menu className='w-32'>
-              <MenuItem title='Excel' onClick={handleExportExcel} />
-              <MenuItem title='PDF' onClick={handleExportPdf} />
-            </Menu>
-          </Dropdown>
-        </div>
         <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
           <SelectInput
             label='Area'
@@ -848,6 +828,34 @@ const PurchasesPerSupplierTab = () => {
             />
           </div>
         </div>
+        <div className='mt-4 flex justify-end gap-2 [&_button]:px-4'>
+          <Button color='primary' onClick={handleSubmit}>
+            <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
+            Cari
+          </Button>
+          <Button color='warning' onClick={resetFilters}>
+            <Icon icon='heroicons-outline:refresh' width={20} height={20} />
+            Reset
+          </Button>
+          <Dropdown
+            trigger={
+              <Button color='success' isLoading={isAnyExportLoading}>
+                Export
+                <Icon
+                  icon='heroicons-outline:download'
+                  width={20}
+                  height={20}
+                />
+              </Button>
+            }
+            align='end'
+          >
+            <Menu className='w-32'>
+              <MenuItem title='Excel' onClick={handleExportExcel} />
+              <MenuItem title='PDF' onClick={handleExportPdf} />
+            </Menu>
+          </Dropdown>
+        </div>
 
         {!isSubmitted ? (
           <div className='mt-6 text-center text-gray-500'>
@@ -880,18 +888,25 @@ const PurchasesPerSupplierTab = () => {
                 key={supplierReport.supplier.id}
                 title={supplierReport.supplier.name}
                 subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
-                className={{ wrapper: 'w-full' }}
+                className={{
+                  wrapper: 'w-full rounded-2xl',
+                  body: 'p-0',
+                  title:
+                    'py-1.5 px-3 bg-primary text-white text-lg font-normal',
+                  subtitle:
+                    'px-3 pb-1 bg-primary text-white text-sm font-normal',
+                }}
                 variant='bordered'
                 collapsible={true}
               >
                 <Table
                   data={supplierReport.rows}
                   columns={tableColumns}
-                  pageSize={10}
+                  pageSize={supplierReport.rows.length}
                   renderFooter={supplierReport.rows.length > 0}
                   className={{
-                    containerClassName: 'w-full',
-                    tableWrapperClassName: 'overflow-x-auto mt-4',
+                    containerClassName: 'w-full mb-0!',
+                    tableWrapperClassName: 'overflow-x-auto',
                     tableClassName: 'w-full table-auto text-sm',
                     headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
                     headerColumnClassName:

src/components/pages/report/sale/export/HppPerkandangExport.tsx

@@ -15,6 +15,12 @@ import {
   HppPerKandangPerWeightRange,
 } from '@/types/api/report/hpp-per-kandang';
 import { formatDate, formatNumber, formatCurrency } from '@/lib/helper';
+import {
+  PdfTable,
+  PdfColumn,
+  PdfTbodyCell,
+  PdfTfootCell,
+} from '@/components/helper/pdf/table';
 
 Font.register({
   family: 'Helvetica',
@@ -43,85 +49,6 @@ const pdfStyles = StyleSheet.create({
     marginBottom: 8,
     color: '#1f74bf',
   },
-  table: {
-    borderWidth: 1,
-    borderColor: '#000000',
-    marginBottom: 15,
-  },
-  tableRow: {
-    flexDirection: 'row',
-  },
-  tableHeader: {
-    backgroundColor: '#F5F5F5',
-  },
-  tableCell: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    textAlign: 'left',
-  },
-  tableCellHeader: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-    textAlign: 'center',
-  },
-  tableCellHeaderRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    textAlign: 'right',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    paddingVertical: 12,
-  },
-  tableCellRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    textAlign: 'right',
-  },
-  tableCellCenter: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 4,
-    fontSize: 8,
-    textAlign: 'center',
-  },
-  tableBorderBottom: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-  },
-  supplierSection: {
-    marginBottom: 10,
-  },
-  supplierSectionBreak: {
-    marginBottom: 15,
-  },
   parameterBadge: {
     backgroundColor: '#F5F5F5',
     color: '#333333',
@@ -136,6 +63,9 @@ const pdfStyles = StyleSheet.create({
     flexWrap: 'wrap',
     marginBottom: 8,
   },
+  section: {
+    marginBottom: 15,
+  },
 });
 
 interface HppPerKandangExportParams {
@@ -192,6 +122,215 @@ const getParameterText = (params: HppPerKandangExportParams['params']) => {
   return paramsText;
 };
 
+// Helper functions for PdfTable - Rekapitulasi
+const getRekapitulasiColumns = (): PdfColumn[] => [
+  { key: 'rentang_bw', header: 'Rentang BW', flex: 1.2, align: 'center' },
+  { key: 'sisa_butir', header: 'Sisa Butir', flex: 1, align: 'right' },
+  { key: 'sisa_kg', header: 'Sisa Kg', flex: 1, align: 'right' },
+  {
+    key: 'rata_rata_bobot',
+    header: 'Rata-Rata Bobot (Kg)',
+    flex: 1.2,
+    align: 'right',
+  },
+  { key: 'feed_supplier', header: 'Feed (Supplier)', flex: 1.5, align: 'left' },
+  { key: 'doc_supplier', header: 'DOC (Supplier)', flex: 1.2, align: 'left' },
+  {
+    key: 'rata_harga_doc',
+    header: 'Rata-Rata Harga DOC',
+    flex: 1.2,
+    align: 'right',
+  },
+  { key: 'hpp_telur', header: 'HPP Telur (RP/KG)', flex: 1.2, align: 'right' },
+  { key: 'nominal_sisa', header: 'Nominal Sisa', flex: 1.2, align: 'right' },
+];
+
+const getRekapitulasiData = (
+  perWeightRange: HppPerKandangPerWeightRange[]
+): PdfTbodyCell[][] => {
+  return perWeightRange.map((group) => [
+    { key: 'rentang_bw', value: group.label, align: 'center' },
+    {
+      key: 'sisa_butir',
+      value: formatNumber(group.egg_production_pieces),
+      align: 'right',
+    },
+    {
+      key: 'sisa_kg',
+      value: formatNumber(group.egg_production_kg),
+      align: 'right',
+    },
+    {
+      key: 'rata_rata_bobot',
+      value: formatNumber(group.avg_weight_kg),
+      align: 'right',
+    },
+    {
+      key: 'feed_supplier',
+      value:
+        group.feed_suppliers
+          ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+          .join(' | ') || '-',
+    },
+    {
+      key: 'doc_supplier',
+      value:
+        group.doc_suppliers
+          ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+          .join(' | ') || '-',
+    },
+    {
+      key: 'rata_harga_doc',
+      value: formatCurrency(group.average_doc_price_rp),
+      align: 'right',
+    },
+    {
+      key: 'hpp_telur',
+      value: formatCurrency(group.egg_hpp_rp_per_kg),
+      align: 'right',
+    },
+    {
+      key: 'nominal_sisa',
+      value: formatCurrency(group.egg_value_rp),
+      align: 'right',
+    },
+  ]);
+};
+
+// Helper functions for PdfTable - Detail Per Kandang
+const getDetailColumns = (): PdfColumn[] => [
+  { key: 'no', header: 'No', flex: 0.5, align: 'center' },
+  { key: 'kandang', header: 'Kandang', flex: 1.5, align: 'left' },
+  { key: 'rentang_bw', header: 'Rentang BW', flex: 1, align: 'left' },
+  {
+    key: 'rata_rata_bobot',
+    header: 'Rata-Rata Bobot (Kg)',
+    flex: 1,
+    align: 'right',
+  },
+  { key: 'sisa_butir', header: 'Sisa Butir', flex: 0.8, align: 'right' },
+  { key: 'sisa_kg', header: 'Sisa Kg (Telur)', flex: 0.8, align: 'right' },
+  { key: 'feed_supplier', header: 'Feed (Supplier)', flex: 1.2, align: 'left' },
+  { key: 'doc_supplier', header: 'DOC (Supplier)', flex: 1, align: 'left' },
+  {
+    key: 'rata_harga_doc',
+    header: 'Rata-Rata Harga DOC',
+    flex: 1.2,
+    align: 'right',
+  },
+  { key: 'hpp_telur', header: 'HPP Telur (RP/KG)', flex: 1, align: 'right' },
+  { key: 'nominal_sisa', header: 'Nominal Sisa', flex: 1.2, align: 'right' },
+];
+
+const getDetailData = (rows: HppPerKandangRow[]): PdfTbodyCell[][] => {
+  return rows.map((item, index) => [
+    { key: 'no', value: index + 1, align: 'center' },
+    { key: 'kandang', value: item.kandang?.name || '-' },
+    {
+      key: 'rentang_bw',
+      value: `${item.weight_range.weight_min.toFixed(2)} - ${item.weight_range.weight_max.toFixed(2)}`,
+    },
+    {
+      key: 'rata_rata_bobot',
+      value: formatNumber(item.avg_weight_kg),
+      align: 'right',
+    },
+    {
+      key: 'sisa_butir',
+      value: formatNumber(item.egg_production_pieces),
+      align: 'right',
+    },
+    {
+      key: 'sisa_kg',
+      value: formatNumber(item.egg_production_kg),
+      align: 'right',
+    },
+    {
+      key: 'feed_supplier',
+      value:
+        item.feed_suppliers
+          ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+          .join(' | ') || '-',
+    },
+    {
+      key: 'doc_supplier',
+      value:
+        item.doc_suppliers
+          ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+          .join(' | ') || '-',
+    },
+    {
+      key: 'rata_harga_doc',
+      value: formatCurrency(item.average_doc_price_rp),
+      align: 'right',
+    },
+    {
+      key: 'hpp_telur',
+      value: formatCurrency(item.egg_hpp_rp_per_kg),
+      align: 'right',
+    },
+    {
+      key: 'nominal_sisa',
+      value: formatCurrency(item.egg_value_rp),
+      align: 'right',
+    },
+  ]);
+};
+
+const getDetailFooter = (
+  summary: HppPerKandangReport['summary']
+): PdfTfootCell[] => {
+  if (!summary?.total) return [];
+
+  const allFeedSuppliers =
+    summary.total.feed_suppliers
+      ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+      .join(' | ') || '-';
+
+  const allDocSuppliers =
+    summary.total.doc_suppliers
+      ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
+      .join(' | ') || '-';
+
+  return [
+    { key: 'no', value: 'TOTAL' },
+    { key: 'kandang', value: 'ALL' },
+    { key: 'rentang_bw', value: '-' },
+    {
+      key: 'rata_rata_bobot',
+      value: formatNumber(summary.total.average_weight_kg),
+      align: 'right',
+    },
+    {
+      key: 'sisa_butir',
+      value: formatNumber(summary.total.total_egg_production_pieces),
+      align: 'right',
+    },
+    {
+      key: 'sisa_kg',
+      value: formatNumber(summary.total.total_egg_production_kg),
+      align: 'right',
+    },
+    { key: 'feed_supplier', value: allFeedSuppliers },
+    { key: 'doc_supplier', value: allDocSuppliers },
+    {
+      key: 'rata_harga_doc',
+      value: formatCurrency(summary.total.total_average_doc_price_rp),
+      align: 'right',
+    },
+    {
+      key: 'hpp_telur',
+      value: formatCurrency(summary.total.average_egg_hpp_rp_per_kg),
+      align: 'right',
+    },
+    {
+      key: 'nominal_sisa',
+      value: formatCurrency(summary.total.total_egg_value_rp),
+      align: 'right',
+    },
+  ];
+};
+
 const createPDFDocument = (
   data: HppPerKandangExportParams['data'],
   params: HppPerKandangExportParams['params']
@@ -216,404 +355,23 @@ const createPDFDocument = (
         </View>
 
         {/* Rekapitulasi Section */}
-        <View style={pdfStyles.supplierSection}>
+        <View style={pdfStyles.section}>
           <Text style={pdfStyles.supplierTitle}>Rekapitulasi</Text>
-
-          <View style={pdfStyles.table}>
-            {/* Table Header */}
-            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>Rentang BW</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Sisa Butir</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Sisa Kg</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Rata-Rata Bobot (Kg)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
-                <Text>Feed (Supplier)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>DOC (Supplier)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Rata-Rata Harga DOC</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>HPP Telur (RP/KG)</Text>
-              </View>
-              <View
-                style={[
-                  pdfStyles.tableCellHeaderRight,
-                  { flex: 1.2, borderRightWidth: 0 },
-                ]}
-              >
-                <Text>Nominal Sisa</Text>
-              </View>
-            </View>
-
-            {/* Table Body - Rekapitulasi */}
-            {rekapitulasiByWeightRange.map(
-              (group: HppPerKandangPerWeightRange, index: number) => (
-                <View
-                  key={index}
-                  style={[
-                    pdfStyles.tableRow,
-                    index < rekapitulasiByWeightRange.length - 1
-                      ? pdfStyles.tableBorderBottom
-                      : {},
-                  ]}
-                >
-                  <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
-                    <Text>{group.label}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>{formatNumber(group.egg_production_pieces)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>{formatNumber(group.egg_production_kg)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatNumber(group.avg_weight_kg)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                    <Text>
-                      {group.feed_suppliers
-                        ?.map(
-                          (s: { alias?: string; name: string }) =>
-                            s.alias || s.name
-                        )
-                        .join(' | ') || '-'}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                    <Text>
-                      {group.doc_suppliers
-                        ?.map(
-                          (s: { alias?: string; name: string }) =>
-                            s.alias || s.name
-                        )
-                        .join(' | ') || '-'}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(group.average_doc_price_rp)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(group.egg_hpp_rp_per_kg)}</Text>
-                  </View>
-                  <View
-                    style={[
-                      pdfStyles.tableCellRight,
-                      { flex: 1.2, borderRightWidth: 0 },
-                    ]}
-                  >
-                    <Text>{formatCurrency(group.egg_value_rp)}</Text>
-                  </View>
-                </View>
-              )
-            )}
-          </View>
+          <PdfTable
+            columns={getRekapitulasiColumns()}
+            data={getRekapitulasiData(rekapitulasiByWeightRange)}
+          />
         </View>
 
         {/* Detail Per Kandang Section */}
-        <View style={pdfStyles.supplierSectionBreak}>
+        <View style={pdfStyles.section}>
           <Text style={pdfStyles.supplierTitle}>Detail Per Kandang</Text>
-
-          <View style={pdfStyles.table}>
-            {/* Table Header */}
-            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
-              <View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
-                <Text>No</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
-                <Text>Kandang</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
-                <Text>Rentang BW</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Rata-Rata Bobot (Kg)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Sisa Butir</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Sisa Kg (Telur)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>Feed (Supplier)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
-                <Text>DOC (Supplier)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Rata-Rata Harga DOC</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>HPP Telur (RP/KG)</Text>
-              </View>
-              <View
-                style={[
-                  pdfStyles.tableCellHeaderRight,
-                  { flex: 1.2, borderRightWidth: 0 },
-                ]}
-              >
-                <Text>Nominal Sisa</Text>
-              </View>
-            </View>
-
-            {/* Table Body - Detail Per Kandang */}
-            {data.rows.map((item: HppPerKandangRow, index: number) => (
-              <View
-                key={index}
-                style={[pdfStyles.tableRow, pdfStyles.tableBorderBottom]}
-              >
-                <View style={[pdfStyles.tableCellCenter, { flex: 0.5 }]}>
-                  <Text>{index + 1}</Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text>{item.kandang?.name || '-'}</Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                  <Text>
-                    {item.weight_range.weight_min.toFixed(2)} -{' '}
-                    {item.weight_range.weight_max.toFixed(2)}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                  <Text>{formatNumber(item.avg_weight_kg)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatNumber(item.egg_production_pieces)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatNumber(item.egg_production_kg)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                  <Text>
-                    {item.feed_suppliers
-                      ?.map(
-                        (s: { alias?: string; name: string }) =>
-                          s.alias || s.name
-                      )
-                      .join(' | ')}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                  <Text>
-                    {item.doc_suppliers
-                      ?.map(
-                        (s: { alias?: string; name: string }) =>
-                          s.alias || s.name
-                      )
-                      .join(' | ')}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.average_doc_price_rp)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                  <Text>{formatCurrency(item.egg_hpp_rp_per_kg)}</Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellRight,
-                    { flex: 1.2, borderRightWidth: 0 },
-                  ]}
-                >
-                  <Text>{formatCurrency(item.egg_value_rp)}</Text>
-                </View>
-              </View>
-            ))}
-
-            {/* TOTAL Row */}
-            {data.summary?.total && (
-              <View style={pdfStyles.tableRow}>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeader,
-                    {
-                      flex: 0.5,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>TOTAL</Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeader,
-                    {
-                      flex: 1.5,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>ALL</Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeader,
-                    {
-                      flex: 1,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>-</Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeaderRight,
-                    {
-                      flex: 1,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>
-                    {formatNumber(data.summary.total.average_weight_kg)}
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeaderRight,
-                    {
-                      flex: 0.8,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>
-                    {formatNumber(
-                      data.summary.total.total_egg_production_pieces
-                    )}
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeaderRight,
-                    {
-                      flex: 0.8,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>
-                    {formatNumber(data.summary.total.total_egg_production_kg)}
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeader,
-                    {
-                      flex: 1.2,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>
-                    {data.rows
-                      .flatMap((row: HppPerKandangRow) =>
-                        row.feed_suppliers?.map(
-                          (s: { alias?: string; name: string }) =>
-                            s.alias || s.name
-                        )
-                      )
-                      .filter(
-                        (v: string, i: number, a: string[]) =>
-                          a.indexOf(v) === i
-                      )
-                      .join(' | ') || '-'}
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeader,
-                    {
-                      flex: 1,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>
-                    {data.rows
-                      .flatMap((row: HppPerKandangRow) =>
-                        row.doc_suppliers?.map(
-                          (s: { alias?: string; name: string }) =>
-                            s.alias || s.name
-                        )
-                      )
-                      .filter(
-                        (v: string, i: number, a: string[]) =>
-                          a.indexOf(v) === i
-                      )
-                      .join(' | ') || '-'}
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeaderRight,
-                    {
-                      flex: 1.2,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>
-                    {formatCurrency(
-                      data.summary.total.total_average_doc_price_rp
-                    )}
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeaderRight,
-                    {
-                      flex: 1,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>
-                    {formatCurrency(
-                      data.summary.total.average_egg_hpp_rp_per_kg
-                    )}
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    pdfStyles.tableCellHeaderRight,
-                    {
-                      flex: 1.2,
-                      backgroundColor: '#F5F5F5',
-                      borderBottomWidth: 0,
-                      borderRightWidth: 0,
-                    },
-                  ]}
-                >
-                  <Text>
-                    {formatCurrency(data.summary.total.total_egg_value_rp)}
-                  </Text>
-                </View>
-              </View>
-            )}
-          </View>
+          <PdfTable
+            columns={getDetailColumns()}
+            data={getDetailData(data.rows)}
+            footer={data.summary ? getDetailFooter(data.summary) : undefined}
+            footerLabel='TOTAL'
+          />
         </View>
       </Page>
     </Document>

src/config/constant.ts

@@ -408,34 +408,39 @@ export const FINANCE_INITIAL_BALANCE_STATUS = ['SALDO_AWAL'];
 
 export const FINANCE_INJECTION_STATUS = ['INJECTION'];
 
-export const APPROVAL_WORKFLOWS = [
-  {
-    key: 'PROJECT_FLOCKS',
-    steps: [
-      {
-        step_number: 1,
-        step_name: 'Pengajuan',
-      },
-      {
-        step_number: 2,
-        step_name: 'Aktif',
-      },
-    ],
-  },
-  {
-    key: 'RECORDINGS',
-    steps: [
-      {
-        step_number: 1,
-        step_name: 'Pengajuan',
-      },
-      {
-        step_number: 2,
-        step_name: 'Disetujui',
-      },
-    ],
-  },
-];
+export const APPROVAL_WORKFLOWS = {
+  PROJECT_FLOCKS: [
+    {
+      step_number: 1,
+      step_name: 'Pengajuan',
+    },
+    {
+      step_number: 2,
+      step_name: 'Aktif',
+    },
+  ],
+  RECORDINGS: [
+    {
+      step_number: 1,
+      step_name: 'Pengajuan',
+    },
+    {
+      step_number: 2,
+      step_name: 'Disetujui',
+    },
+  ],
+
+  TRANSFER_TO_LAYINGS: [
+    {
+      step_number: 1,
+      step_name: 'Pengajuan',
+    },
+    {
+      step_number: 2,
+      step_name: 'Disetujui',
+    },
+  ],
+};
 
 export const ACCEPTED_FILE_TYPE = {
   PDF: {

src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx

@@ -466,6 +466,8 @@ export function DailyChecklistContent() {
     setTempSelectedPhaseIds([...selectedPhaseIds]);
     setSearchPhase('');
     setShowPhaseModal(true);
+    setTempSelectedEmployees([]);
+    setSelectedEmployees([]);
   };
 
   const toggleTempPhase = (phaseId: string) => {
@@ -486,21 +488,19 @@ export function DailyChecklistContent() {
 
     try {
       // Insert new phase links
-      if (tempSelectedPhaseIds.length > 0) {
-        const setDailyChecklistPhaseRes =
-          await DailyChecklistApi.setDailyChecklistPhase(
-            dailyChecklistId,
-            tempSelectedPhaseIds
-          );
+      const setDailyChecklistPhaseRes =
+        await DailyChecklistApi.setDailyChecklistPhase(
+          dailyChecklistId,
+          tempSelectedPhaseIds
+        );
 
-        if (isResponseError(setDailyChecklistPhaseRes)) {
-          console.error(
-            'Error saving phases:',
-            setDailyChecklistPhaseRes.message
-          );
-          toast.error('Gagal menyimpan fase');
-          return;
-        }
+      if (isResponseError(setDailyChecklistPhaseRes)) {
+        console.error(
+          'Error saving phases:',
+          setDailyChecklistPhaseRes.message
+        );
+        toast.error('Gagal menyimpan fase');
+        return;
       }
 
       setSelectedPhaseIds([...tempSelectedPhaseIds]);

src/services/api/production/transfer-to-laying.ts

@@ -1,15 +1,25 @@
+import * as XLSX from 'xlsx';
 import axios from 'axios';
 import { BaseApiService } from '@/services/api/base';
-import { BaseApiResponse, GroupedApprovals } from '@/types/api/api-general';
+import {
+  Approvals,
+  BaseApiResponse,
+  GroupedApprovals,
+} from '@/types/api/api-general';
 
 import {
   CreateTransferToLayingPayload,
   TransferToLaying,
   UpdateTransferToLayingPayload,
 } from '@/types/api/production/transfer-to-laying';
-import { httpClient } from '@/services/http/client';
-import { ProjectFlockAvailableQuantity } from '@/types/api/production/project-flock';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { httpClient, httpClientFetcher } from '@/services/http/client';
+import {
+  ProjectFlockAvailableQuantity,
+  ProjectFlockMaxQuantity,
+} from '@/types/api/production/project-flock';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { formatDate } from '@/lib/helper';
 
 export class TransferToLayingService extends BaseApiService<
   TransferToLaying,
@@ -128,7 +138,7 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
-  async getAvailabelQty(projectFlockId: number) {
+  async getAvailableQty(projectFlockId: number) {
     try {
       const availableQtyRes = await httpClient<
         BaseApiResponse<ProjectFlockAvailableQuantity>
@@ -150,7 +160,7 @@ export class TransferToLayingService extends BaseApiService<
 
   async getMappedFlockKandangsAvailability(projectFlockId: number) {
     try {
-      const flockAvailableQty = await this.getAvailabelQty(projectFlockId);
+      const flockAvailableQty = await this.getAvailableQty(projectFlockId);
 
       const flockKandangsAvailableQty = isResponseSuccess(flockAvailableQty)
         ? flockAvailableQty.data.kandangs
@@ -173,6 +183,101 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
+  async getMaxTargetQty(projectFlockId: number) {
+    try {
+      const availableQtyRes = await httpClient<
+        BaseApiResponse<ProjectFlockMaxQuantity>
+      >(`${this.basePath}/project-flocks/${projectFlockId}/max-target-qty`);
+
+      return availableQtyRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ProjectFlockMaxQuantity>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async getMappedFlockKandangsMaxTargetQty(projectFlockId: number) {
+    try {
+      const flockMaxTargetQty = await this.getMaxTargetQty(projectFlockId);
+
+      const flockKandangsMaxTargetQty = isResponseSuccess(flockMaxTargetQty)
+        ? flockMaxTargetQty.data.project_flock_kandangs
+        : [];
+
+      const mappedFlockKandangsMaxTargetQty: Record<
+        number,
+        (typeof flockKandangsMaxTargetQty)[0]
+      > = {};
+
+      flockKandangsMaxTargetQty.forEach((item) => {
+        if (!mappedFlockKandangsMaxTargetQty[item.project_flock_kandang_id]) {
+          mappedFlockKandangsMaxTargetQty[item.project_flock_kandang_id] = item;
+        }
+      });
+
+      return mappedFlockKandangsMaxTargetQty;
+    } catch (error) {
+      return undefined;
+    }
+  }
+
+  async exportToExcel(initialQueryString: string) {
+    const params = new URLSearchParams(initialQueryString);
+
+    params.set('limit', '9999999');
+
+    const queryString = `?${params.toString()}`;
+
+    try {
+      const transferToLayings = await httpClientFetcher<
+        BaseApiResponse<TransferToLaying[]>
+      >(`${this.basePath}${queryString}`);
+
+      if (isResponseError(transferToLayings)) {
+        toast.error('Gagal melakukan export transfer to laying! Coba lagi.');
+        return;
+      }
+
+      const rows = transferToLayings.data;
+
+      const formattedRows = [];
+
+      for (let i = 0; i < rows.length; i++) {
+        formattedRows.push({
+          id: rows[i].id,
+          transfer_number: rows[i].transfer_number,
+          transfer_date: formatDate(rows[i].transfer_date, 'DD-MM-YYYY'),
+          project_flock_source: rows[i].from_project_flock.flock_name,
+          project_flock_target: rows[i].to_project_flock.flock_name,
+          pending_usage_qty: rows[i].pending_usage_qty,
+          usage_qty: rows[i].usage_qty,
+          project_flock_source_kandang: rows[i].sources
+            .map((item) => item.source_project_flock_kandang.kandang.name)
+            .join(', '),
+          project_flock_target_kandang: rows[i].targets
+            .map((item) => item.target_project_flock_kandang.kandang.name)
+            .join(', '),
+          created_user: rows[i].created_user.name,
+          created_at: formatDate(rows[i].created_at, 'DD-MM-YYYY'),
+          updated_at: formatDate(rows[i].updated_at, 'DD-MM-YYYY'),
+          notes: rows[i].notes,
+        });
+      }
+
+      const ws = XLSX.utils.json_to_sheet(formattedRows);
+      const wb = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(wb, ws, 'transfer-ke-laying');
+
+      // triggers download in browser
+      XLSX.writeFile(wb, 'transfer-ke-laying.xlsx');
+    } catch (error) {
+      toast.error('Gagal melakukan export transfer to laying! Coba lagi.');
+    }
+  }
+
   async getApprovalHistory(
     transferToLayingId: number,
     group: boolean = true,
@@ -202,6 +307,33 @@ export class TransferToLayingService extends BaseApiService<
       return undefined;
     }
   }
+
+  async getApprovalLineHistory(
+    transferToLayingId: number,
+    page: number = 1,
+    limit: number = 100
+  ) {
+    try {
+      const approvalHistoryRes = await httpClient<Approvals>('/approvals', {
+        query: {
+          module_name: 'TRANSFER_TO_LAYINGS',
+          module_id: transferToLayingId,
+          group_step_number: 'false',
+          page,
+          limit,
+          order_by_date: 'ASC',
+        },
+      });
+
+      return approvalHistoryRes;
+    } catch (error) {
+      if (axios.isAxiosError<Approvals>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
 }
 
 export const TransferToLayingApi = new TransferToLayingService(

src/types/api/api-general.d.ts

@@ -113,7 +113,7 @@ export type BaseGroupedApproval = {
   approvals: BaseApproval[];
 };
 
-export type Approvals = BaseApiResponse<BaseApproval>;
+export type Approvals = BaseApiResponse<BaseApproval[]>;
 
 export type GroupedApprovals = BaseApiResponse<BaseGroupedApproval[]>;
 

src/types/api/inventory/movement.d.ts

@@ -73,7 +73,7 @@ export type CreateMovementPayloadData = {
     document_index?: number;
     driver_name: string;
     vehicle_plate: string;
-    supplier_id: number;
+    supplier_id?: number | null;
     products: {
       product_id: number;
       product_qty: number;

src/types/api/production/project-flock.d.ts

@@ -89,6 +89,14 @@ export type ProjectFlockAvailableQuantity = {
   }[];
 };
 
+export type ProjectFlockMaxQuantity = {
+  project_flock_id: number;
+  project_flock_kandangs: {
+    project_flock_kandang_id: number;
+    max_target_qty: number;
+  }[];
+};
+
 export type ProjectFlockPeriods = {
   id: number;
   name: string;