Merge branch 'fix/adjustment-uniformity-ui' into 'development'

[FIX/FE] Pixel Perfect Uniformity UI See merge request mbugroup/lti-web-client!279
2026-05-20 13:32:00 +00:00 · 2026-01-30 10:44:22 +07:00
parent ab4e9fbd39 06c4631ca5
commit 352688054e
13 changed files with 675 additions and 543 deletions
@@ -58,6 +58,7 @@ const DrawerHeader = ({
    if (leftIconOnClick) {
      return (
        <button
+          type='button'
          onClick={leftIconOnClick}
          className='hover:text-gray-400 bg-transparent border-none p-0'
        >
@@ -72,12 +73,12 @@ const DrawerHeader = ({
  return (
    <div
      className={cn(
-        'flex flex-row justify-between items-center px-4 pt-4',
+        'flex flex-row justify-between items-center px-4 pt-4 pb-4 border-b border-base-content/10',
        className
      )}
    >
      {/* Left Side */}
-      <div className='flex flex-row h-full gap-2 items-center'>
+      <div className='flex flex-row h-full gap-3 items-center'>
        {renderLeftIcon()}

        {showDivider && subtitle && (
@@ -85,7 +86,12 @@ const DrawerHeader = ({
        )}

        {subtitle && (
-          <div className={cn('text-sm text-neutral', subtitleClassName)}>
+          <div
+            className={cn(
+              'text-sm font-medium text-base-content/50',
+              subtitleClassName
+            )}
+          >
            {subtitle}
          </div>
        )}
@@ -5,6 +5,7 @@ import UniformityGaugeChart from '@/components/pages/production/uniformity/chart
 import UniformityBarChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton';
 import UniformityGaugeChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton';
 import { Uniformity, type ChartData } from '@/types/api/production/uniformity';
+import { Icon } from '@iconify/react';

 interface UniformityChartProps {
  uniformityData?: Uniformity | null;
@@ -101,15 +102,26 @@ const UniformityChart = ({
  const shouldShowEmptyState = !isFiltered;

  return (
-    <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4'>
+    <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-[1fr_350px] gap-3'>
      <Card
-        title='Performance Overview ⓘ'
        variant='bordered'
        className={{
-          wrapper: 'xl:col-span-1 2xl:col-span-3 w-full',
-          body: 'h-96',
+          wrapper:
+            '2xl:col-span-1 w-full rounded-xl border border-base-content/10',
+          body: 'h-96 p-4',
        }}
      >
+        <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-3'>
+          <div className='text-base font-semibold leading-7 flex gap-3 items-center'>
+            Performance Overview{' '}
+            <Icon
+              icon='heroicons:information-circle'
+              width={20}
+              height={20}
+              className='inline text-neutral-500'
+            />
+          </div>
+        </div>
        <div className='w-full h-full flex items-center justify-center'>
          {shouldShowEmptyState ||
          !uniformityData ||
@@ -120,26 +132,31 @@ const UniformityChart = ({
          )}
        </div>
      </Card>
+      <Card
+        variant='bordered'
+        className={{
+          wrapper:
+            '2xl:col-span-1 w-full rounded-xl border border-base-content/10',
+          body:
+            shouldShowEmptyState || !uniformityData || !gaugeChartData
+              ? 'h-110 p-4'
+              : 'p-4',
+        }}
+      >
+        <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-3'>
+          <div className='text-base font-semibold leading-7 flex gap-3 items-center'>
+            Weekly Performance{' '}
+            <Icon
+              icon='heroicons:information-circle'
+              width={20}
+              height={20}
+              className='inline text-neutral-500'
+            />
+          </div>
+        </div>
        {shouldShowEmptyState || !uniformityData || !gaugeChartData ? (
-        <Card
-          variant='bordered'
-          title='Weekly Performance ⓘ'
-          className={{
-            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
-            body: 'h-110',
-          }}
-        >
          <UniformityGaugeChartSkeleton />
-        </Card>
        ) : (
-        <Card
-          variant='bordered'
-          title='Weekly Performance ⓘ'
-          className={{
-            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
-            body: 'p-4',
-          }}
-        >
          <UniformityGaugeChart
            value={gaugeChartData.value}
            label={gaugeChartData.label}
@@ -150,8 +167,8 @@ const UniformityChart = ({
            hasPrevWeek={gaugeChartData.hasPrevWeek}
            hasNextWeek={gaugeChartData.hasNextWeek}
          />
-        </Card>
        )}
+      </Card>
    </section>
  );
 };
@@ -3,7 +3,7 @@
 import { usePathname, useRouter } from 'next/navigation';
 import Drawer from '@/components/Drawer';
 import React, { ReactNode } from 'react';
-import UniformityTable from '@/components/pages/production/uniformity/UniformityTable';
+import Uniformity from '@/app/production/uniformity/page';
 import { useUiStore } from '@/stores/ui/ui.store';

 export default function UniformityPageWrapper({
@@ -40,8 +40,8 @@ export default function UniformityPageWrapper({

  return (
    <>
-      <div className='w-full p-4'>
-        <UniformityTable />
+      <div className='w-full'>
+        <Uniformity />
      </div>

      <Drawer
@@ -19,11 +19,11 @@ 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';
 import toast from 'react-hot-toast';
-import Card from '@/components/Card';
 import UniformityTableSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityTableSkeleton';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { useUniformityStore } from '@/stores/uniformity/uniformity.store';
@@ -45,12 +45,11 @@ 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';
 import Dropdown from '@/components/Dropdown';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import { useFormik } from 'formik';
 import {
  UniformityTableFilterSchema,
@@ -113,12 +112,10 @@ const UniformityConfirmationPreview = ({

  const columns: ColumnDef<DetailOptionType>[] = [
    {
-      accessorKey: 'label',
      header: 'Label',
      cell: (props) => props.row.original.label,
    },
    {
-      accessorKey: 'value',
      header: 'Value',
      cell: (props) => {
        const id = props.row.original.id;
@@ -819,7 +816,7 @@ const UniformityTable = () => {
          );

          return (
-            <div className='w-full flex flex-row justify-center'>
+            <div className='w-full flex flex-row xl:justify-center justify-end'>
              <CheckboxInput
                name='allRow'
                checked={isAllSelected}
@@ -832,7 +829,7 @@ const UniformityTable = () => {
        },
        cell: ({ row }) => {
          return (
-            <div>
+            <div className='w-full flex flex-row xl:justify-center justify-end'>
              <CheckboxInput
                name='row'
                checked={row.getIsSelected()}
@@ -862,8 +859,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 +872,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} />;
        },
      },
      {
@@ -900,60 +891,145 @@ const UniformityTable = () => {
    []
  );

+  // ===== CALCULATE FILTER COUNT =====
+  const filterCount = useMemo(() => {
+    let count = 0;
+
+    if (filterStartDate && filterEndDate) {
+      count += 1;
+    }
+
+    if (filterLocation) {
+      count += 1;
+    }
+
+    if (filterProjectFlock) {
+      count += 1;
+    }
+
+    if (filterKandang) {
+      count += 1;
+    }
+
+    return count;
+  }, [
+    filterStartDate,
+    filterEndDate,
+    filterLocation,
+    filterProjectFlock,
+    filterKandang,
+  ]);
+
+  const isFilterActive = filterCount > 0;
+
  return (
    <>
-      <section className='[&_button]:w-full [&_button]:sm:w-fit [&_button]:last:mt-2 [&_button]:last:sm:mt-0 sm:flex sm:justify-between grid grid-cols-1 sm:gap-0 gap-2'>
-        <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+      <div className='@container w-full'>
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
            <RequirePermission permissions='lti.production.uniformity.create'>
-            <Button color='primary' href='/production/uniformity/add'>
-              <Icon icon='ic:round-plus' width={18} height={18} />
+              <Button
+                href='/production/uniformity/add'
+                color='primary'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+              >
+                <Icon icon='heroicons:plus' width={20} height={20} />
                Add Uniformity
              </Button>
            </RequirePermission>
          </div>

-        <div className='sm:flex gap-2'>
-          <Button variant='outline' onClick={filterModal.openModal}>
-            <Icon icon='heroicons:funnel' width={18} height={18} />
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+            <Button
+              variant='outline'
+              color='none'
+              onClick={filterModal.openModal}
+              className={cn(
+                'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+                {
+                  'border-primary-gradient text-primary': isFilterActive,
+                }
+              )}
+            >
+              <Icon icon='heroicons:funnel' width={20} height={20} />
              Filter
+              {isFilterActive && (
+                <Badge
+                  className={{
+                    badge:
+                      'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
+                  }}
+                >
+                  {filterCount}
+                </Badge>
+              )}
            </Button>

            <Dropdown
+              align='end'
+              direction='bottom'
+              className={{
+                content:
+                  'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+              }}
              trigger={
-              <Button variant='outline' isLoading={isAnyExportLoading}>
+                <Button
+                  variant='outline'
+                  color='none'
+                  className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                >
+                  <div className='flex flex-row items-center gap-1.5'>
                    <Icon
                      icon='heroicons:cloud-arrow-down'
-                  width={18}
-                  height={18}
+                      width={20}
+                      height={20}
                    />
-                Export
+
+                    <span>Export</span>
+
+                    <div className='w-px self-stretch bg-base-content/10' />
+
+                    <Icon
+                      icon='heroicons:chevron-down'
+                      width={14}
+                      height={14}
+                    />
+                  </div>
                </Button>
              }
-            align='end'
            >
-            <Menu>
-              <MenuItem title='Excel' onClick={handleExportExcel} />
-              <MenuItem title='PDF' onClick={handleExportPDF} />
-            </Menu>
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={handleExportExcel}
+                isLoading={isExcelExportLoading}
+                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} />
+                Export to Excel
+              </Button>
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={handleExportPDF}
+                isLoading={isPdfExportLoading}
+                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap hover:bg-base-content/5'
+              >
+                <Icon icon='heroicons:document-text' width={20} height={20} />
+                Export to PDF
+              </Button>
            </Dropdown>
          </div>
-      </section>
+        </div>

-      <div className='my-4 divider'></div>
-
-      <section>
+        <section className='p-3'>
          <UniformityChartWrapper
            uniformitySwrKey={uniformitySwrKey}
            isFiltered={isSubmitted}
          />
        </section>
+      </div>

-      <Card
-        variant='bordered'
-        className={{
-          wrapper: 'my-4 w-full relative',
-        }}
-      >
      <Table<Uniformity>
        data={isResponseSuccess(uniformities) ? uniformities?.data : []}
        columns={uniformityColumns}
@@ -971,19 +1047,15 @@ 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 ',
-            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',
+            'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
          bodyColumnClassName:
-              'px-6 py-3 last:flex last:flex-row last:justify-end',
+            'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
        }}
        emptyContent={<UniformityTableSkeleton />}
      />
@@ -1137,7 +1209,8 @@ const UniformityTable = () => {
        ref={bulkRejectModal.ref}
        type='error'
        iconPosition='left'
-          text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
+        text={`Reject This Submission?`}
+        subtitleText={`Are you sure you want to reject this submission? (${selectedRowIds.length} data)`}
        secondaryButton={{
          text: 'Cancel',
        }}
@@ -1169,65 +1242,59 @@ const UniformityTable = () => {
        ref={filterModal.ref}
        className={{
          modal: 'p-0',
-            modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+          modalBox: 'p-0 rounded-[0.875rem]',
        }}
      >
-          <div className='space-y-6'>
+        <div className='flex flex-col'>
          {/* 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 justify-between p-4 border-b border-base-content/10'>
            <div className='flex items-center gap-2 text-primary'>
              <Icon icon='heroicons:funnel' width={20} height={20} />
-                <h3 className='font-semibold'>Filter Data</h3>
+              <h3 className='font-medium text-sm'>Filter Data</h3>
            </div>
            <Button
              variant='link'
              onClick={filterModal.closeModal}
-                className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+              className='text-gray-500 hover:text-gray-700'
            >
              <Icon icon='heroicons:x-mark' width={20} height={20} />
            </Button>
          </div>

-            {/* Error List Alert */}
-            {formErrorList.length > 0 && (
-              <div className='w-full px-4'>
-                <AlertErrorList formErrorList={formErrorList} onClose={close} />
-              </div>
-            )}
-
-            <div className='space-y-4 px-4'>
-              <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
+          <form
+            className='flex flex-col'
+            onSubmit={handleFormSubmit}
+            onReset={handleResetFilters}
+          >
+            <div className='flex flex-col p-4 gap-1.5'>
+              {/* Rentang Waktu */}
              <div>
+                <label className='flex text-xs items-center gap-2 py-2 font-semibold'>
+                  Tanggal
+                </label>
+                <div className='flex items-center gap-2'>
                  <DateInput
-                    required
-                    label='Tanggal mulai'
                    name='start_date'
+                    placeholder='Tanggal Mulai'
                    value={filterFormik.values.start_date}
+                    errorMessage={filterFormik.errors.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>
-
-                <div>
+                  <hr className='w-full max-w-3 h-px border-base-content/10'></hr>
                  <DateInput
-                    required
-                    label='Tanggal akhir'
                    name='end_date'
+                    placeholder='Tanggal Akhir'
                    value={filterFormik.values.end_date}
+                    errorMessage={filterFormik.errors.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>
@@ -1299,24 +1366,34 @@ const UniformityTable = () => {
                  className={{ wrapper: 'w-full' }}
                />
              </div>
+
+              {formErrorList.length > 0 && (
+                <div className='w-full'>
+                  <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'>
+            <div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-gray-100'>
              <Button
+                type='reset'
                variant='soft'
-                className='ms-4 min-w-36 rounded-lg'
-                onClick={handleResetFilters}
+                className='rounded-lg p-3 bg-gray-100 border-gray-100 text-base-content/65 hover:bg-base-content/10'
              >
                Reset Filter
              </Button>
              <Button
-                className='me-4 min-w-36 rounded-lg'
-                onClick={handleApplyFilters}
+                type='submit'
+                className='min-w-40 text-sm p-3 text-white rounded-lg'
              >
                Apply Filter
              </Button>
            </div>
+          </form>
        </div>
      </Modal>

@@ -1366,7 +1443,6 @@ const UniformityTable = () => {
        selectedRowIds={selectedRowIds}
        onClose={handleCloseFab}
      />
-      </Card>
    </>
  );
 };
@@ -319,18 +319,19 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
      <DrawerHeader
        leftIconHref='/production/uniformity'
        subtitle={`Details`}
-        subtitleClassName='text-sm text-neutral'
+        subtitleClassName='text-sm font-medium text-base-content/50'
        showDivider
      />

      {/* Form Section */}
-      <div className='divider mt-3.5'></div>
-      <section className='w-full px-6 mb-6'>
+      <section className='w-full p-4'>
        {initialValues ? (
          <div className='flex flex-col gap-4'>
            {/* Info Umum */}
            <div className=''>
-              <p className='text-sm font-medium mb-5'>Informasi Umum</p>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                Informasi Umum
+              </h2>
              <Table<DetailOptionType>
                data={infoUmumTableData}
                columns={columnsInfoUmum}
@@ -345,7 +346,9 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
            {/* Sampling and Range */}
            {initialValues.sampling && (
              <div className=''>
-                <p className='text-sm font-medium mb-5'>Sampling and Range</p>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                  Sampling and Range
+                </h2>
                <Table<DetailOptionType>
                  data={samplingTableData}
                  columns={columnsSampling}
@@ -361,7 +364,9 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
            {/* Result */}
            {initialValues.result && (
              <div className=''>
-                <p className='text-sm font-medium mb-5'>Result</p>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                  Result
+                </h2>
                <Table<DetailOptionType>
                  data={resultTableData}
                  columns={resultColumns}
@@ -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';

@@ -51,7 +50,7 @@ const UniformityDetailsPreview = ({
    () => [
      {
        accessorKey: 'number',
-        header: 'No',
+        header: 'Number',
        cell: (props) => props.row.original.number,
      },
      {
@@ -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' />
          );
        },
      },
@@ -102,7 +83,7 @@ const UniformityDetailsPreview = ({
      <DrawerHeader
        leftIcon=''
        subtitle={info_umum?.file_name ?? 'Uniformity Details'}
-        subtitleClassName='text-sm text-neutral line-clamp-1'
+        subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
        showDivider={false}
      >
        <button
@@ -114,8 +95,7 @@ const UniformityDetailsPreview = ({
      </DrawerHeader>

      {/* Form Section */}
-      <div className='divider mt-3.5'></div>
-      <section className='w-full px-6'>
+      <section className='w-full p-4'>
        {info_umum ? (
          <div className='flex flex-col gap-4'>
            {/* Body Weight Details */}
@@ -493,24 +493,25 @@ const UniformityForm = ({
    <>
      <section className='w-full'>
        <DrawerHeader
-          leftIcon={formType == 'add' ? 'mdi:close' : 'mdi:arrow-left'}
-          leftIconSize={24}
+          leftIcon={formType == 'add' ? 'heroicons:x-mark' : 'mdi:arrow-left'}
+          leftIconSize={20}
          leftIconHref={
            formType == 'add'
              ? '/production/uniformity'
              : `/production/uniformity/detail`
          }
-          leftIconClassName='hover:text-gray-400'
+          leftIconClassName='hover:text-base-content'
          subtitle={formType == 'add' ? 'Add Uniformity' : 'Update Uniformity'}
-          subtitleClassName='text-sm text-neutral'
+          subtitleClassName='text-sm font-medium text-base-content/50'
          showDivider
        />

-        <div className='divider mt-3'></div>
-        <section className='w-full px-6 mb-6'>
-          <h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
+        <section className='w-full p-4'>
+          <h2 className='text-base font-medium text-base-content/50 font-roboto'>
+            Informasi Umum
+          </h2>

-          <form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col gap-1.5'>
            <DateInput
              required
              label='Tanggal'
@@ -756,11 +757,13 @@ const UniformityForm = ({
            </div>

            {!isNextStep && (
+              <>
+                <div className='border-t border-base-content/20 mt-3' />
                <RequirePermission permissions='lti.production.uniformity.create'>
                  <Button
                    type='submit'
                    color='primary'
-                  className='w-full'
+                    className='w-full mt-4'
                    disabled={formik.isSubmitting}
                  >
                    {formik.isSubmitting ? (
@@ -770,6 +773,7 @@ const UniformityForm = ({
                    )}
                  </Button>
                </RequirePermission>
+              </>
            )}
          </form>
        </section>
@@ -50,7 +50,7 @@ const UniformityPreviewForm = () => {
    () => [
      {
        accessorKey: 'number',
-        header: 'No',
+        header: 'Number',
        cell: (props) => props.row.original.number,
      },
      {
@@ -68,19 +68,18 @@ const UniformityPreviewForm = () => {
      <DrawerHeader
        leftIcon=''
        subtitle={uniformityFormData?.file_name || 'Add Body Weight'}
-        subtitleClassName='text-sm text-neutral line-clamp-1'
+        subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
        showDivider={false}
      >
        <Button variant='link' className='p-0 text-error' onClick={handleClose}>
          <Tooltip content='Hapus' position='left'>
-            <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+            <Icon icon='heroicons-outline:trash' width={18} height={18} />
          </Tooltip>
        </Button>
      </DrawerHeader>

      {/* Form Section */}
-      <div className='divider mt-3.5'></div>
-      <section className='w-full px-6'>
+      <section className='w-full p-4'>
        {verifyUniformityResult ? (
          <div className='flex flex-col gap-4'>
            <Table<BodyWeightData>
@@ -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 {
@@ -190,7 +189,7 @@ const UniformityResultForm = () => {
    () => [
      {
        accessorKey: 'number',
-        header: 'No',
+        header: 'Number',
        cell: (props) => props.row.original.number,
      },
      {
@@ -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' />
          );
        },
      },
@@ -241,23 +222,24 @@ const UniformityResultForm = () => {
      <DrawerHeader
        leftIcon=''
        subtitle={uniformityFormData?.document_name || 'Uniformity Result'}
-        subtitleClassName='text-sm text-neutral line-clamp-1'
+        subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
        showDivider={false}
      >
        <Button variant='link' className='p-0 text-error' onClick={handleClose}>
          <Tooltip content='Hapus' position='left'>
-            <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+            <Icon icon='heroicons-outline:trash' width={20} height={20} />
          </Tooltip>
        </Button>
      </DrawerHeader>

      {/* Form Section */}
-      <div className='divider mt-3.5'></div>
-      <section className='w-full px-6'>
+      <section className='w-full p-4'>
        {verifyUniformityResult ? (
          <div className='flex flex-col gap-4'>
            <div className=''>
-              <p className='text-sm font-medium mb-5'>Sampling and Range</p>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                Sampling and Range
+              </h2>
              <Table<DetailOptionType>
                data={samplingTableData}
                columns={columnsSampling}
@@ -270,7 +252,9 @@ const UniformityResultForm = () => {
            </div>

            <div className=''>
-              <p className='text-sm font-medium mb-5'>Result</p>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                Result
+              </h2>
              <Table<DetailOptionType>
                data={resultTableData}
                columns={resultColumns}
@@ -1,4 +1,3 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';

 const LeftLegend = () => {
@@ -45,11 +44,11 @@ const ChartArea = () => {
            ))}
          </div>

-          <div className='flex justify-between gap-2 sm:gap-4 md:gap-8 lg:gap-12 px-2 sm:px-4 py-2'>
+          <div className='flex justify-between gap-1 xs:gap-2 sm:gap-3 md:gap-4 lg:gap-6 px-1 xs:px-2 sm:px-3 md:px-4 py-2'>
            {ranges.map((range) => (
              <div
                key={range}
-                className='skeleton h-3 w-8 sm:w-12 md:w-16 shrink-0'
+                className='skeleton h-3 w-6 xs:w-8 sm:w-10 md:w-12 flex-1 max-w-12 xs:max-w-14 sm:max-w-16'
              />
            ))}
          </div>
@@ -65,28 +64,38 @@ const ChartArea = () => {

 const EmptyState = () => {
  return (
-    <>
-      <div className='absolute inset-0 flex flex-col items-center justify-center z-10 gap-2'>
-        <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center my-2'>
-          <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
-            <Icon icon={'heroicons:funnel'} className='text-4xl text-whitd' />
-          </Button>
+    <div className='absolute inset-0 flex items-center justify-center z-10'>
+      <div className='flex flex-col items-center justify-center'>
+        {/* Filter icon */}
+        <div className='mb-2'>
+          <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+            <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+              <Icon
+                icon='heroicons:funnel'
+                className='text-white'
+                width={20}
+                height={20}
+              />
            </div>
-        <span className='text-xl font-semibold text-[#18181B80] leading-5'>
+          </div>
+        </div>
+
+        {/* Empty state text */}
+        <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
          No Filters Selected
-        </span>
-        <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+        </h3>
+        <p className='text-base-content/50 text-xs text-center max-w-xs'>
          Please choose filters to narrow down your results and make your search
          easier.
-        </span>
+        </p>
+      </div>
    </div>
-    </>
  );
 };

 const UniformityBarChartSkeleton = () => {
  return (
-    <div className='relative w-full h-full min-h-[300px] xl:min-h-[350px]'>
+    <div className='relative w-full h-full min-h-[270px] xl:min-h-[330px]'>
      <div className='sm:flex hidden h-full gap-4'>
        <LeftLegend />
        <ChartArea />
@@ -1,4 +1,3 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import React from 'react';
 import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
@@ -55,22 +54,29 @@ const UniformityGaugeChartSkeleton: React.FC<
              </Pie>
            </PieChart>
          </ResponsiveContainer>
-          <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'>
-            <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center mt-5'>
-              <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
+          <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center mt-4'>
+            {/* Filter icon */}
+            <div className='mb-2 mt-5'>
+              <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+                <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                  <Icon
-                  icon={'heroicons:funnel'}
-                  className='text-4xl text-whitd'
+                    icon='heroicons:funnel'
+                    className='text-white'
+                    width={20}
+                    height={20}
                  />
-              </Button>
                </div>
-            <span className='text-lg font-semibold text-[#18181B80] leading-5 my-3'>
+              </div>
+            </div>
+
+            {/* Empty state text */}
+            <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
              No Filters Selected
-            </span>
-            <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+            </h3>
+            <p className='text-base-content/50 text-xs text-center max-w-xs'>
              Please choose filters to narrow down your results and make your
              search easier.
-            </span>
+            </p>
          </div>
        </div>
      </div>
@@ -1,24 +1,30 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';

 const UniformityTableSkeleton = () => {
  return (
-    <div className='flex flex-col items-center justify-center gap-2 my-20'>
-      <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center'>
-        <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
+    <div className='flex flex-col items-center justify-center my-20'>
+      {/* Document icon */}
+      <div className='mb-2'>
+        <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+          <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
            <Icon
-            icon={'heroicons-outline:chart-bar'}
-            className='text-4xl text-whitd'
+              icon='heroicons:document-text'
+              className='text-white'
+              width={20}
+              height={20}
            />
-        </Button>
          </div>
-      <span className='text-xl font-semibold text-[#18181B80] leading-5'>
+        </div>
+      </div>
+
+      {/* Empty state text */}
+      <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
        No Data Available
-      </span>
-      <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+      </h3>
+      <p className='text-base-content/50 text-xs text-center max-w-xs'>
        There is no uniformity data displayed. Enter uniformity check data to
        get started.
-      </span>
+      </p>
    </div>
  );
 };
@@ -25,6 +25,20 @@ export const getWeightStatusText = (status: string): string => {
  return weightStatusTextMap[status] || status;
 };

+export const weightStatusBadgeColorMap: Record<
+  string,
+  'success' | 'error' | 'neutral' | 'info'
+> = {
+  ideal: 'success',
+  outside: 'error',
+};
+
+export const getWeightStatusBadgeColor = (
+  status: string
+): 'success' | 'error' | 'neutral' | 'info' => {
+  return weightStatusBadgeColorMap[status] || 'neutral';
+};
+
 export const statusColorMap: Record<string, string> = {
  APPROVED: 'bg-[#00D39033]',
  Disetujui: 'bg-[#00D39033]',
@@ -63,3 +77,29 @@ export const getStatusIndicatorColor = (status: string): string => {
 export const getStatusText = (status: string): string => {
  return statusTextMap[status] || status;
 };
+
+export const statusBadgeColorMap: Record<
+  string,
+  'success' | 'error' | 'neutral' | 'info'
+> = {
+  APPROVED: 'success',
+  Disetujui: 'success',
+  approved: 'success',
+  disetujui: 'success',
+  REJECTED: 'error',
+  Ditolak: 'error',
+  rejected: 'error',
+  ditolak: 'error',
+  CREATED: 'neutral',
+  Pengajuan: 'neutral',
+  created: 'neutral',
+  pengajuan: 'neutral',
+  PENDING: 'neutral',
+  pending: 'neutral',
+};
+
+export const getStatusBadgeColor = (
+  status: string
+): 'success' | 'error' | 'neutral' | 'info' => {
+  return statusBadgeColorMap[status] || 'neutral';
+};