refactor(FE-438): Add icon position/size and subtitle to modal

src/components/modal/ConfirmationModal.tsx

@@ -8,10 +8,13 @@ import Button, { ButtonProps } from '@/components/Button';
 
 import { cn } from '@/lib/helper';
 
+export type IconPosition = 'left' | 'center' | 'right';
+
 export interface ConfirmationModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   type?: 'info' | 'success' | 'error';
   text?: string;
+  subtitleText?: string;
   closeOnBackdrop?: boolean;
   primaryButton?: ButtonProps & {
     text?: string;
@@ -24,17 +27,22 @@ export interface ConfirmationModalProps {
     modalBox?: string;
   };
   children?: React.ReactNode;
+  iconSize?: number;
+  iconPosition?: IconPosition;
 }
 
 const ConfirmationModal = ({
   ref,
   type = 'info',
   text,
+  subtitleText,
   closeOnBackdrop,
   primaryButton,
   secondaryButton,
   className,
   children,
+  iconSize = 64,
+  iconPosition = 'center',
 }: ConfirmationModalProps) => {
   const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
 
@@ -55,6 +63,8 @@ const ConfirmationModal = ({
   return (
     <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
       <div className='w-full flex flex-col gap-4'>
+        {iconPosition === 'center' ? (
+          <>
             <div
               className={cn(
                 'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
@@ -68,8 +78,8 @@ const ConfirmationModal = ({
               {type === 'info' && (
                 <Icon
                   icon='material-symbols:info-outline-rounded'
-              width={64}
+                  width={iconSize}
-              height={64}
+                  height={iconSize}
                   className='text-info-content'
                 />
               )}
@@ -77,8 +87,8 @@ const ConfirmationModal = ({
               {type === 'success' && (
                 <Icon
                   icon='qlementine-icons:success-12'
-              width={64}
+                  width={iconSize}
-              height={64}
+                  height={iconSize}
                   className='text-success-content'
                 />
               )}
@@ -86,8 +96,8 @@ const ConfirmationModal = ({
               {type === 'error' && (
                 <Icon
                   icon='solar:danger-triangle-linear'
-              width={64}
+                  width={iconSize}
-              height={64}
+                  height={iconSize}
                   className='text-error-content'
                 />
               )}
@@ -97,6 +107,69 @@ const ConfirmationModal = ({
               {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
             </p>
 
+            {subtitleText && (
+              <p className='text-center text-sm text-gray-400'>
+                {subtitleText}
+              </p>
+            )}
+          </>
+        ) : (
+          <div
+            className={cn('flex flex-row items-center gap-4', {
+              'flex-row': iconPosition === 'left',
+              'flex-row-reverse': iconPosition === 'right',
+            })}
+          >
+            <div
+              className={cn(
+                'w-fit p-4 flex flex-row justify-center items-center rounded-full',
+                {
+                  'bg-error': type === 'error',
+                  'bg-info': type === 'info',
+                  'bg-success': type === 'success',
+                }
+              )}
+            >
+              {type === 'info' && (
+                <Icon
+                  icon='material-symbols:info-outline-rounded'
+                  width={iconSize}
+                  height={iconSize}
+                  className='text-info-content'
+                />
+              )}
+
+              {type === 'success' && (
+                <Icon
+                  icon='qlementine-icons:success-12'
+                  width={iconSize}
+                  height={iconSize}
+                  className='text-success-content'
+                />
+              )}
+
+              {type === 'error' && (
+                <Icon
+                  icon='solar:danger-triangle-linear'
+                  width={iconSize}
+                  height={iconSize}
+                  className='text-error-content'
+                />
+              )}
+            </div>
+
+            <div className='flex flex-col gap-1'>
+              <p className='font-medium'>
+                {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+              </p>
+
+              {subtitleText && (
+                <p className='text-sm text-gray-400'>{subtitleText}</p>
+              )}
+            </div>
+          </div>
+        )}
+
         {children && <div className='w-full'>{children}</div>}
 
         <div className='w-full flex flex-row gap-2'>

src/components/pages/uniformity/UniformityTable.tsx

@@ -420,6 +420,8 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
         <ConfirmationModal
           ref={singleDeleteModal.ref}
           type='error'
+          iconPosition='left'
+          iconSize={32}
           text={`Apakah anda yakin ingin menghapus data Uniformity ini?`}
           secondaryButton={{
             text: 'Tidak',
@@ -430,11 +432,71 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
             isLoading: isDeleteLoading,
             onClick: singleDeleteHandler,
           }}
+          className={{
+            modalBox: 'rounded-2xl',
+          }}
+        >
+          {' '}
+          <div className='flex flex-col gap-4 mt-4'>
+            <Table
+              data={[
+                {
+                  id: 'tanggal',
+                  label: 'Tanggal',
+                  value: '28 Desember 2025',
+                },
+                {
+                  id: 'lokasi-farm',
+                  label: 'Lokasi Farm',
+                  value: 'Farm A',
+                },
+                {
+                  id: 'project-flock',
+                  label: 'Project Flock',
+                  value: 'Flock 2025-01',
+                },
+                {
+                  id: 'kandang',
+                  label: 'Kandang',
+                  value: 'Kandang 1',
+                },
+                {
+                  id: 'file-uniformity',
+                  label: 'File Uniformity',
+                  value: 'uniformity_data.xlsx',
+                },
+                {
+                  id: 'status',
+                  label: 'Status',
+                  value: 'Disetujui',
+                },
+              ]}
+              columns={[
+                {
+                  accessorKey: 'label',
+                  header: 'Label',
+                  cell: (props) => props.row.original.label,
+                },
+                {
+                  accessorKey: 'value',
+                  header: 'Value',
+                  cell: (props) => <span>{props.row.original.value}</span>,
+                },
+              ]}
+              pageSize={6}
+              className={{
+                containerClassName: 'mb-0',
+                paginationClassName: 'hidden',
+              }}
             />
+          </div>
+        </ConfirmationModal>
 
         <ConfirmationModal
           ref={bulkDeleteModal.ref}
           type='error'
+          iconPosition='left'
+          iconSize={32}
           text={`Apakah anda yakin ingin menghapus ${selectedRowIds.length} data Uniformity yang dipilih?`}
           secondaryButton={{
             text: 'Tidak',
@@ -445,18 +507,81 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
             isLoading: isBulkActionLoading,
             onClick: bulkDeleteHandler,
           }}
+          className={{
+            modalBox: 'rounded-2xl',
+          }}
+        >
+          <div className='flex flex-col gap-4 mt-4'>
+            <Table
+              data={[
+                {
+                  id: 'tanggal',
+                  label: 'Tanggal',
+                  value: '28 Desember 2025',
+                },
+                {
+                  id: 'lokasi-farm',
+                  label: 'Lokasi Farm',
+                  value: 'Farm A',
+                },
+                {
+                  id: 'project-flock',
+                  label: 'Project Flock',
+                  value: 'Flock 2025-01',
+                },
+                {
+                  id: 'kandang',
+                  label: 'Kandang',
+                  value: 'Kandang 1',
+                },
+                {
+                  id: 'file-uniformity',
+                  label: 'File Uniformity',
+                  value: 'uniformity_data.xlsx',
+                },
+                {
+                  id: 'status',
+                  label: 'Status',
+                  value: 'Disetujui',
+                },
+              ]}
+              columns={[
+                {
+                  accessorKey: 'label',
+                  header: 'Label',
+                  cell: (props) => props.row.original.label,
+                },
+                {
+                  accessorKey: 'value',
+                  header: 'Value',
+                  cell: (props) => <span>{props.row.original.value}</span>,
+                },
+              ]}
+              pageSize={6}
+              className={{
+                containerClassName: 'mb-0',
+                paginationClassName: 'hidden',
+              }}
             />
+          </div>
+        </ConfirmationModal>
 
         <ConfirmationModal
           ref={successModal.ref}
           type='success'
+          iconPosition='left'
+          iconSize={32}
           text='Data Berhasil Ditambahkan'
+          subtitleText='Data uniformity telah berhasil disimpan.'
           closeOnBackdrop={false}
           primaryButton={{
             text: 'Ok',
             color: 'primary',
             onClick: handleSuccessModalClose,
           }}
+          className={{
+            modalBox: 'rounded-2xl',
+          }}
         >
           <div className='flex flex-col gap-4 mt-4'>
             <Table