From 0e43957e6ea2bc9d735a35a792f3430a1808cdf7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:58:09 +0700
Subject: [PATCH] refactor(FE): Replace Badge with StatusBadge in uniformity
 views

---
 .../production/uniformity/UniformityTable.tsx | 800 +++++++++---------
 .../detail/UniformityDetailsPreview.tsx       |  33 +-
 .../uniformity/form/UniformityResultForm.tsx  |  33 +-
 3 files changed, 406 insertions(+), 460 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index be133c7c..6cf28f02 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/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,425 +1035,413 @@ const UniformityTable = () => {
         </section>
       </div>
 
-      <section className='p-3 pt-0'>
-        <Table<Uniformity>
-          data={isResponseSuccess(uniformities) ? uniformities?.data : []}
-          columns={uniformityColumns}
-          pageSize={tableFilterState.pageSize}
-          page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
-          totalItems={
-            isResponseSuccess(uniformities)
-              ? uniformities?.meta?.total_results
-              : 0
-          }
-          onPageChange={setPage}
-          isLoading={isLoading}
-          sorting={sorting}
-          setSorting={setSorting}
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
-          className={{
-            containerClassName: cn({
-              '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',
-          }}
-          emptyContent={<UniformityTableSkeleton />}
-        />
+      <Table<Uniformity>
+        data={isResponseSuccess(uniformities) ? uniformities?.data : []}
+        columns={uniformityColumns}
+        pageSize={tableFilterState.pageSize}
+        page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
+        totalItems={
+          isResponseSuccess(uniformities)
+            ? uniformities?.meta?.total_results
+            : 0
+        }
+        onPageChange={setPage}
+        isLoading={isLoading}
+        sorting={sorting}
+        setSorting={setSorting}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+        className={{
+          containerClassName: cn('p-3 pt-0', {
+            'mb-20':
+              isResponseSuccess(uniformities) &&
+              uniformities?.data?.length === 0,
+          }),
+          headerColumnClassName: 'text-nowrap',
+        }}
+        emptyContent={<UniformityTableSkeleton />}
+      />
 
-        <ConfirmationModal
-          ref={successModal.ref}
-          type='success'
-          iconPosition='left'
-          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'>
-            {createdUniformity ? (
-              <UniformityConfirmationPreview
-                uniformityDetail={createdUniformity}
-              />
-            ) : selectedRowIds.length === 1 ? (
-              <UniformityConfirmationPreview
-                uniformity={selectedUniformities[0]}
-              />
-            ) : (
-              <div className='text-center text-gray-500'>
-                {selectedRowIds.length} data dipilih
-              </div>
-            )}
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={singleDeleteModal.ref}
-          type='error'
-          iconPosition='left'
-          text={`Delete This Data?`}
-          subtitleText='Are you sure you want to delete this data?'
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Delete',
-            color: 'primary',
-            isLoading: isDeleteLoading,
-            onClick: singleDeleteHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            <UniformityConfirmationPreview uniformity={selectedUniformity} />
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={singleApproveModal.ref}
-          type='success'
-          iconPosition='left'
-          text='Approve This Submission?'
-          subtitleText='Are you sure you want to approve this submission?'
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Approve',
-            color: 'primary',
-            isLoading: isDeleteLoading,
-            onClick: singleApproveHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            {selectedRowIds.length === 1 ? (
-              <UniformityConfirmationPreview
-                uniformity={selectedUniformities[0]}
-              />
-            ) : (
-              <div className='text-center text-gray-500'>
-                {selectedRowIds.length} data dipilih
-              </div>
-            )}
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={bulkApproveModal.ref}
-          type='success'
-          iconPosition='left'
-          text={`Approve This Submission?`}
-          subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Approve',
-            color: 'primary',
-            isLoading: isBulkActionLoading,
-            onClick: bulkApproveHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            <UniformityConfirmationPreview uniformity={selectedUniformity} />
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={singleRejectModal.ref}
-          type='error'
-          iconPosition='left'
-          text='Reject This Submission?'
-          subtitleText='Are you sure you want to reject this submission?'
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Reject',
-            color: 'primary',
-            isLoading: isDeleteLoading,
-            onClick: singleRejectHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            {selectedRowIds.length === 1 ? (
-              <UniformityConfirmationPreview
-                uniformity={selectedUniformities[0]}
-              />
-            ) : (
-              <div className='text-center text-gray-500'>
-                {selectedRowIds.length} data dipilih
-              </div>
-            )}
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={bulkRejectModal.ref}
-          type='error'
-          iconPosition='left'
-          text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Reject',
-            color: 'primary',
-            isLoading: isBulkActionLoading,
-            onClick: bulkRejectHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            {selectedRowIds.length === 1 ? (
-              <UniformityConfirmationPreview
-                uniformity={selectedUniformities[0]}
-              />
-            ) : (
-              <div className='text-center text-gray-500'>
-                {selectedRowIds.length} data dipilih
-              </div>
-            )}
-          </div>
-        </ConfirmationModal>
-
-        {/* Filter Modal */}
-        <Modal
-          ref={filterModal.ref}
-          className={{
-            modal: 'p-0',
-            modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
-          }}
-        >
-          <div className='space-y-6'>
-            {/* Modal Header */}
-            <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
-              <div className='flex items-center gap-2 text-primary'>
-                <Icon icon='heroicons:funnel' width={20} height={20} />
-                <h3 className='font-semibold'>Filter Data</h3>
-              </div>
-              <Button
-                variant='link'
-                onClick={filterModal.closeModal}
-                className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
-              >
-                <Icon icon='heroicons:x-mark' width={20} height={20} />
-              </Button>
+      <ConfirmationModal
+        ref={successModal.ref}
+        type='success'
+        iconPosition='left'
+        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'>
+          {createdUniformity ? (
+            <UniformityConfirmationPreview
+              uniformityDetail={createdUniformity}
+            />
+          ) : selectedRowIds.length === 1 ? (
+            <UniformityConfirmationPreview
+              uniformity={selectedUniformities[0]}
+            />
+          ) : (
+            <div className='text-center text-gray-500'>
+              {selectedRowIds.length} data dipilih
             </div>
+          )}
+        </div>
+      </ConfirmationModal>
 
-            <div className='space-y-1.5 px-4'>
-              <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
-                <div>
-                  <DateInput
-                    required
-                    label='Tanggal mulai'
-                    name='start_date'
-                    value={filterFormik.values.start_date}
-                    onChange={handleFilterStartDateChange}
-                    onBlur={filterFormik.handleBlur}
-                    isError={
-                      filterFormik.touched.start_date &&
-                      Boolean(filterFormik.errors.start_date)
-                    }
-                    errorMessage={filterFormik.errors.start_date}
-                    className={{ wrapper: 'w-full' }}
-                  />
-                </div>
+      <ConfirmationModal
+        ref={singleDeleteModal.ref}
+        type='error'
+        iconPosition='left'
+        text={`Delete This Data?`}
+        subtitleText='Are you sure you want to delete this data?'
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Delete',
+          color: 'primary',
+          isLoading: isDeleteLoading,
+          onClick: singleDeleteHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          <UniformityConfirmationPreview uniformity={selectedUniformity} />
+        </div>
+      </ConfirmationModal>
 
-                <div>
-                  <DateInput
-                    required
-                    label='Tanggal akhir'
-                    name='end_date'
-                    value={filterFormik.values.end_date}
-                    onChange={handleFilterEndDateChange}
-                    onBlur={filterFormik.handleBlur}
-                    isError={
-                      filterFormik.touched.end_date &&
-                      Boolean(filterFormik.errors.end_date)
-                    }
-                    errorMessage={filterFormik.errors.end_date}
-                    className={{ wrapper: 'w-full' }}
-                  />
-                </div>
-              </div>
+      <ConfirmationModal
+        ref={singleApproveModal.ref}
+        type='success'
+        iconPosition='left'
+        text='Approve This Submission?'
+        subtitleText='Are you sure you want to approve this submission?'
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Approve',
+          color: 'primary',
+          isLoading: isDeleteLoading,
+          onClick: singleApproveHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          {selectedRowIds.length === 1 ? (
+            <UniformityConfirmationPreview
+              uniformity={selectedUniformities[0]}
+            />
+          ) : (
+            <div className='text-center text-gray-500'>
+              {selectedRowIds.length} data dipilih
+            </div>
+          )}
+        </div>
+      </ConfirmationModal>
 
+      <ConfirmationModal
+        ref={bulkApproveModal.ref}
+        type='success'
+        iconPosition='left'
+        text={`Approve This Submission?`}
+        subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Approve',
+          color: 'primary',
+          isLoading: isBulkActionLoading,
+          onClick: bulkApproveHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          <UniformityConfirmationPreview uniformity={selectedUniformity} />
+        </div>
+      </ConfirmationModal>
+
+      <ConfirmationModal
+        ref={singleRejectModal.ref}
+        type='error'
+        iconPosition='left'
+        text='Reject This Submission?'
+        subtitleText='Are you sure you want to reject this submission?'
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Reject',
+          color: 'primary',
+          isLoading: isDeleteLoading,
+          onClick: singleRejectHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          {selectedRowIds.length === 1 ? (
+            <UniformityConfirmationPreview
+              uniformity={selectedUniformities[0]}
+            />
+          ) : (
+            <div className='text-center text-gray-500'>
+              {selectedRowIds.length} data dipilih
+            </div>
+          )}
+        </div>
+      </ConfirmationModal>
+
+      <ConfirmationModal
+        ref={bulkRejectModal.ref}
+        type='error'
+        iconPosition='left'
+        text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Reject',
+          color: 'primary',
+          isLoading: isBulkActionLoading,
+          onClick: bulkRejectHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          {selectedRowIds.length === 1 ? (
+            <UniformityConfirmationPreview
+              uniformity={selectedUniformities[0]}
+            />
+          ) : (
+            <div className='text-center text-gray-500'>
+              {selectedRowIds.length} data dipilih
+            </div>
+          )}
+        </div>
+      </ConfirmationModal>
+
+      {/* Filter Modal */}
+      <Modal
+        ref={filterModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        <div className='space-y-6'>
+          {/* Modal Header */}
+          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+            <div className='flex items-center gap-2 text-primary'>
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              <h3 className='font-semibold'>Filter Data</h3>
+            </div>
+            <Button
+              variant='link'
+              onClick={filterModal.closeModal}
+              className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+            >
+              <Icon icon='heroicons:x-mark' width={20} height={20} />
+            </Button>
+          </div>
+
+          <div className='space-y-1.5 px-4'>
+            <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
               <div>
-                <SelectInput
+                <DateInput
                   required
-                  label='Lokasi'
-                  placeholder='Pilih Lokasi...'
-                  value={filterFormik.values.location}
-                  onChange={(value) => {
-                    handleFilterLocationChange(value);
-                  }}
-                  options={filterLocationOptions}
-                  onInputChange={setFilterLocationInputValue}
-                  isLoading={isLoadingFilterLocations}
-                  onMenuScrollToBottom={loadMoreFilterLocations}
+                  label='Tanggal mulai'
+                  name='start_date'
+                  value={filterFormik.values.start_date}
+                  onChange={handleFilterStartDateChange}
+                  onBlur={filterFormik.handleBlur}
                   isError={
-                    filterFormik.touched.location &&
-                    Boolean(filterFormik.errors.location)
+                    filterFormik.touched.start_date &&
+                    Boolean(filterFormik.errors.start_date)
                   }
-                  errorMessage={filterFormik.errors.location}
-                  isClearable
+                  errorMessage={filterFormik.errors.start_date}
                   className={{ wrapper: 'w-full' }}
                 />
               </div>
 
               <div>
-                <SelectInput
+                <DateInput
                   required
-                  label='Project Flock'
-                  placeholder='Pilih Project Flock...'
-                  value={filterFormik.values.project_flock}
-                  onChange={(value) => {
-                    handleFilterProjectFlockChange(value);
-                  }}
-                  options={filterProjectFlockOptions}
-                  onInputChange={setFilterProjectFlockSearchValue}
-                  isLoading={isLoadingFilterProjectFlocks}
-                  onMenuScrollToBottom={loadMoreFilterProjectFlocks}
-                  isDisabled={!filterFormik.values.location}
+                  label='Tanggal akhir'
+                  name='end_date'
+                  value={filterFormik.values.end_date}
+                  onChange={handleFilterEndDateChange}
+                  onBlur={filterFormik.handleBlur}
                   isError={
-                    filterFormik.touched.project_flock &&
-                    Boolean(filterFormik.errors.project_flock)
+                    filterFormik.touched.end_date &&
+                    Boolean(filterFormik.errors.end_date)
                   }
-                  errorMessage={filterFormik.errors.project_flock}
-                  isClearable
-                  className={{ wrapper: 'w-full' }}
-                />
-              </div>
-
-              <div>
-                <SelectInput
-                  required
-                  label='Kandang'
-                  placeholder='Pilih Kandang...'
-                  value={filterFormik.values.kandang}
-                  onChange={(value) => {
-                    handleFilterKandangChange(value);
-                  }}
-                  options={filterKandangOptions}
-                  isDisabled={!filterFormik.values.project_flock}
-                  isError={
-                    filterFormik.touched.kandang &&
-                    Boolean(filterFormik.errors.kandang)
-                  }
-                  errorMessage={filterFormik.errors.kandang}
-                  isClearable
+                  errorMessage={filterFormik.errors.end_date}
                   className={{ wrapper: 'w-full' }}
                 />
               </div>
             </div>
 
-            <div className='w-full'>
-              {/* Error List Alert */}
-              {formErrorList.length > 0 && (
-                <div className='w-full px-4'>
-                  <AlertErrorList
-                    formErrorList={formErrorList}
-                    onClose={close}
-                  />
-                </div>
-              )}
+            <div>
+              <SelectInput
+                required
+                label='Lokasi'
+                placeholder='Pilih Lokasi...'
+                value={filterFormik.values.location}
+                onChange={(value) => {
+                  handleFilterLocationChange(value);
+                }}
+                options={filterLocationOptions}
+                onInputChange={setFilterLocationInputValue}
+                isLoading={isLoadingFilterLocations}
+                onMenuScrollToBottom={loadMoreFilterLocations}
+                isError={
+                  filterFormik.touched.location &&
+                  Boolean(filterFormik.errors.location)
+                }
+                errorMessage={filterFormik.errors.location}
+                isClearable
+                className={{ wrapper: 'w-full' }}
+              />
             </div>
 
-            {/* Action Buttons */}
-            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
-              <Button
-                variant='soft'
-                className='ms-4 min-w-36 rounded-lg'
-                onClick={handleResetFilters}
-              >
-                Reset Filter
-              </Button>
-              <Button
-                className='me-4 min-w-36 rounded-lg'
-                onClick={handleApplyFilters}
-              >
-                Apply Filter
-              </Button>
+            <div>
+              <SelectInput
+                required
+                label='Project Flock'
+                placeholder='Pilih Project Flock...'
+                value={filterFormik.values.project_flock}
+                onChange={(value) => {
+                  handleFilterProjectFlockChange(value);
+                }}
+                options={filterProjectFlockOptions}
+                onInputChange={setFilterProjectFlockSearchValue}
+                isLoading={isLoadingFilterProjectFlocks}
+                onMenuScrollToBottom={loadMoreFilterProjectFlocks}
+                isDisabled={!filterFormik.values.location}
+                isError={
+                  filterFormik.touched.project_flock &&
+                  Boolean(filterFormik.errors.project_flock)
+                }
+                errorMessage={filterFormik.errors.project_flock}
+                isClearable
+                className={{ wrapper: 'w-full' }}
+              />
+            </div>
+
+            <div>
+              <SelectInput
+                required
+                label='Kandang'
+                placeholder='Pilih Kandang...'
+                value={filterFormik.values.kandang}
+                onChange={(value) => {
+                  handleFilterKandangChange(value);
+                }}
+                options={filterKandangOptions}
+                isDisabled={!filterFormik.values.project_flock}
+                isError={
+                  filterFormik.touched.kandang &&
+                  Boolean(filterFormik.errors.kandang)
+                }
+                errorMessage={filterFormik.errors.kandang}
+                isClearable
+                className={{ wrapper: 'w-full' }}
+              />
             </div>
           </div>
-        </Modal>
 
-        {/* Floating Actions Button */}
-        <FloatingActionsButton
-          actions={[
-            {
-              action: 'DETAIL',
-              icon: 'mdi:eye-outline',
-              label: 'Lihat Detail',
-              hidden: selectedRowIds.length !== 1,
-              onClick() {
-                router.push(
-                  `/production/uniformity/detail?uniformityId=${selectedRowIds[0]}`
-                );
-                setRowSelection({});
-              },
-              permissions: 'lti.production.uniformity.detail',
+          <div className='w-full'>
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <div className='w-full px-4'>
+                <AlertErrorList formErrorList={formErrorList} onClose={close} />
+              </div>
+            )}
+          </div>
+
+          {/* Action Buttons */}
+          <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
+            <Button
+              variant='soft'
+              className='ms-4 min-w-36 rounded-lg'
+              onClick={handleResetFilters}
+            >
+              Reset Filter
+            </Button>
+            <Button
+              className='me-4 min-w-36 rounded-lg'
+              onClick={handleApplyFilters}
+            >
+              Apply Filter
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Floating Actions Button */}
+      <FloatingActionsButton
+        actions={[
+          {
+            action: 'DETAIL',
+            icon: 'mdi:eye-outline',
+            label: 'Lihat Detail',
+            hidden: selectedRowIds.length !== 1,
+            onClick() {
+              router.push(
+                `/production/uniformity/detail?uniformityId=${selectedRowIds[0]}`
+              );
+              setRowSelection({});
             },
-            {
-              action: 'DELETE',
-              icon: 'mdi:delete-outline',
-              label: 'Delete',
-              hidden: selectedRowIds.length !== 1,
-              onClick: handleDelete,
-              permissions: 'lti.production.uniformity.delete',
-            },
-          ]}
-          approvals={[
-            {
-              action: 'APPROVED',
-              icon: 'mdi:check-circle-outline',
-              label: 'Approve',
-              onClick: handleBulkApprove,
-              permissions: 'lti.production.uniformity.approve',
-              disabled: !canApproveReject,
-            },
-            {
-              action: 'REJECTED',
-              icon: 'mdi:close-circle-outline',
-              label: 'Reject',
-              onClick: handleBulkReject,
-              permissions: 'lti.production.uniformity.approve',
-              disabled: !canApproveReject,
-            },
-          ]}
-          selectedRowIds={selectedRowIds}
-          onClose={handleCloseFab}
-        />
-      </section>
+            permissions: 'lti.production.uniformity.detail',
+          },
+          {
+            action: 'DELETE',
+            icon: 'mdi:delete-outline',
+            label: 'Delete',
+            hidden: selectedRowIds.length !== 1,
+            onClick: handleDelete,
+            permissions: 'lti.production.uniformity.delete',
+          },
+        ]}
+        approvals={[
+          {
+            action: 'APPROVED',
+            icon: 'mdi:check-circle-outline',
+            label: 'Approve',
+            onClick: handleBulkApprove,
+            permissions: 'lti.production.uniformity.approve',
+            disabled: !canApproveReject,
+          },
+          {
+            action: 'REJECTED',
+            icon: 'mdi:close-circle-outline',
+            label: 'Reject',
+            onClick: handleBulkReject,
+            permissions: 'lti.production.uniformity.approve',
+            disabled: !canApproveReject,
+          },
+        ]}
+        selectedRowIds={selectedRowIds}
+        onClose={handleCloseFab}
+      />
     </>
   );
 };
diff --git a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
index 9188ba59..8d38d669 100644
--- a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
+++ b/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' />
           );
         },
       },
diff --git a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
index 103fc791..5963df8a 100644
--- a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+++ b/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' />
           );
         },
       },