refactor(FE): Replace Badge with StatusBadge in uniformity views

src/components/pages/production/uniformity/UniformityTable.tsx

@@ -19,6 +19,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { type BaseApiResponse } from '@/types/api/api-general';
 import Table from '@/components/Table';
 import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -45,6 +46,7 @@ import {
   getStatusColor,
   getStatusIndicatorColor,
   getStatusText,
+  getStatusBadgeColor,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { generateUniformityPDF } from '@/components/pages/production/uniformity/export/UniformityExportPDF';
 import { generateUniformityExcel } from '@/components/pages/production/uniformity/export/UniformityExportExcel';
@@ -832,7 +834,7 @@ const UniformityTable = () => {
         },
         cell: ({ row }) => {
           return (
-            <div>
+            <div className='w-full flex flex-row justify-center'>
               <CheckboxInput
                 name='row'
                 checked={row.getIsSelected()}
@@ -862,8 +864,11 @@ const UniformityTable = () => {
       {
         accessorKey: 'week',
         header: 'Tanggal (Week)',
-        cell: (props) =>
-          `${formatDate(props.row.original.applied_at, 'DD MMM YYYY')} (${props.row.original.week})`,
+        cell: (props) => (
+          <span className='text-nowrap'>
+            {`${formatDate(props.row.original.applied_at, 'DD MMM YYYY')} (${props.row.original.week})`}
+          </span>
+        ),
       },
       {
         accessorKey: 'status',
@@ -872,20 +877,11 @@ const UniformityTable = () => {
           const uniformity = props.row.original;
           const status =
             uniformity.latest_approval?.action ?? uniformity.status;
-          return (
-            <div className='w-full'>
-              <Badge
-                statusIndicator={true}
-                variant='soft'
-                className={{
-                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
-                  status: getStatusIndicatorColor(status),
-                }}
-              >
-                {getStatusText(status)}
-              </Badge>
-            </div>
-          );
+
+          const badgeColor = getStatusBadgeColor(status);
+          const statusText = getStatusText(status);
+
+          return <StatusBadge color={badgeColor} text={statusText} />;
         },
       },
       {
@@ -1039,7 +1035,6 @@ const UniformityTable = () => {
         </section>
       </div>
 
-      <section className='p-3 pt-0'>
       <Table<Uniformity>
         data={isResponseSuccess(uniformities) ? uniformities?.data : []}
         columns={uniformityColumns}
@@ -1057,19 +1052,12 @@ const UniformityTable = () => {
         rowSelection={rowSelection}
         setRowSelection={setRowSelection}
         className={{
-            containerClassName: cn({
+          containerClassName: cn('p-3 pt-0', {
             'mb-20':
               isResponseSuccess(uniformities) &&
               uniformities?.data?.length === 0,
           }),
-            tableWrapperClassName: 'overflow-x-auto min-h-full rounded-xl',
-            tableClassName: 'font-inter w-full table-auto min-h-full!',
-            headerRowClassName: 'border-b border-b-gray-200',
-            headerColumnClassName:
-              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-            bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName:
-              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          headerColumnClassName: 'text-nowrap',
         }}
         emptyContent={<UniformityTableSkeleton />}
       />
@@ -1384,10 +1372,7 @@ const UniformityTable = () => {
             {/* Error List Alert */}
             {formErrorList.length > 0 && (
               <div className='w-full px-4'>
-                  <AlertErrorList
-                    formErrorList={formErrorList}
-                    onClose={close}
-                  />
+                <AlertErrorList formErrorList={formErrorList} onClose={close} />
               </div>
             )}
           </div>
@@ -1457,7 +1442,6 @@ const UniformityTable = () => {
         selectedRowIds={selectedRowIds}
         onClose={handleCloseFab}
       />
-      </section>
     </>
   );
 };

src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx

@@ -10,11 +10,10 @@ import {
   UniformityInfoUmum,
 } from '@/types/api/production/uniformity';
 import Table from '@/components/Table';
-import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import {
-  getWeightStatusColor,
-  getWeightStatusIndicatorColor,
   getWeightStatusText,
+  getWeightStatusBadgeColor,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { BodyWeightData } from '@/types/api/production/uniformity';
 
@@ -65,30 +64,12 @@ const UniformityDetailsPreview = ({
         cell: (props) => {
           const status = props.row.original.status;
           return status ? (
-            <div className='w-full'>
-              <Badge
-                statusIndicator={true}
-                variant='soft'
-                className={{
-                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getWeightStatusColor(status)}`,
-                  status: getWeightStatusIndicatorColor(status),
-                }}
-              >
-                {getWeightStatusText(status)}
-              </Badge>
-            </div>
+            <StatusBadge
+              color={getWeightStatusBadgeColor(status)}
+              text={getWeightStatusText(status)}
+            />
           ) : (
-            <Badge
-              statusIndicator={true}
-              variant='soft'
-              className={{
-                badge:
-                  'rounded-xl w-full justify-start border border-gray-200 text-black bg-info/10',
-                status: 'bg-info',
-              }}
-            >
-              Unknown
-            </Badge>
+            <StatusBadge color='info' text='Unknown' />
           );
         },
       },

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

@@ -14,12 +14,11 @@ import { useRouter } from 'next/navigation';
 import toast from 'react-hot-toast';
 import { UniformityApi } from '@/services/api/uniformity';
 import { isResponseError } from '@/lib/api-helper';
-import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import { formatNumber } from '@/lib/helper';
 import {
-  getWeightStatusColor,
-  getWeightStatusIndicatorColor,
   getWeightStatusText,
+  getWeightStatusBadgeColor,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { DetailOptionType } from '@/types/api/production/uniformity';
 import {
@@ -204,30 +203,12 @@ const UniformityResultForm = () => {
         cell: (props) => {
           const status = props.row.original.status;
           return status ? (
-            <div className='w-full'>
-              <Badge
-                statusIndicator={true}
-                variant='soft'
-                className={{
-                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getWeightStatusColor(status)}`,
-                  status: getWeightStatusIndicatorColor(status),
-                }}
-              >
-                {getWeightStatusText(status)}
-              </Badge>
-            </div>
+            <StatusBadge
+              color={getWeightStatusBadgeColor(status)}
+              text={getWeightStatusText(status)}
+            />
           ) : (
-            <Badge
-              statusIndicator={true}
-              variant='soft'
-              className={{
-                badge:
-                  'rounded-xl w-full justify-start border border-gray-200 text-black bg-info/10',
-                status: 'bg-info',
-              }}
-            >
-              Unknown
-            </Badge>
+            <StatusBadge color='info' text='Unknown' />
           );
         },
       },