gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 23:35:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'development' into fix/project-flock

Browse Source
This commit is contained in:
ValdiANS
2026-02-02 08:50:53 +07:00
parent 4e801bf744 66c8f67245
commit 448fb51c81
44 changed files with 1721 additions and 1078 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
+1
View File
@@ -98,6 +98,7 @@ const TransferToLayingFormModal = () => {
'search',
{
category: 'GROWING',
transfer_context: 'transfer_to_laying',
}
);
src/components/pages/production/uniformity/UniformityChart.tsx
+42 -25
View File
@@ -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>
{shouldShowEmptyState || !uniformityData || !gaugeChartData ? (
<Card
variant='bordered'
title='Weekly Performance ⓘ'
className={{
wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
body: 'h-110',
}}
>
<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 ? (
<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>
);
};
src/components/pages/production/uniformity/UniformityPageWrapper.tsx
+7 -4
View File
@@ -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
@@ -58,7 +58,10 @@ export default function UniformityPageWrapper({
zIndex='99999'
sidebarContent={isOpen ? <div className=''>{children}</div> : null}
expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
expandedWidth='w-[500px]'
className={{
drawerSidebarContent: 'w-[446px]',
drawerExpandedContent: 'w-[446px]',
}}
/>
</>
);
src/components/pages/production/uniformity/UniformityTable.tsx
+464 -396
View File
File diff suppressed because it is too large Load Diff
src/components/pages/production/uniformity/chart/UniformityBarChart.tsx
+2 -2
View File
@@ -164,7 +164,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
const margin = {
top: 20,
right: 30,
left: 20,
left: 0,
bottom: 5,
};
@@ -172,7 +172,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
<ResponsiveContainer
width='100%'
height='100%'
className='min-h-[300px] xl:min-h-[350px]'
className='min-h-[270px] xl:min-h-72'
>
<BarChart data={data} margin={margin} barGap={20}>
<defs>
src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
+15 -12
View File
@@ -65,12 +65,12 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
</Pie>
</PieChart>
</ResponsiveContainer>
<div className='absolute inset-x-0 bottom-8 flex flex-col items-center justify-center'>
<span className='2xl:text-3xl text-2xl font-bold text-gray-800 mb-4'>
<div className='absolute inset-x-0 bottom-10 flex flex-col items-center justify-center'>
<span className='text-2xl font-medium text-base-content mb-4 leading-8'>
{value}%
</span>
<div className='mt-2 px-4 py-1 bg-base-100 rounded-full shadow-sm border border-gray-200'>
<span className='text-sm font-medium text-gray-700 mb-32'>
<div className='px-3.5 py-1 bg-base-100 rounded-full shadow-sm border border-base-content/10'>
<span className='text-lg font-medium text-base-content leading-6'>
{label}
</span>
</div>
@@ -81,7 +81,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<button
onClick={() => onWeekChange?.('prev')}
disabled={!hasPrevWeek}
className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
aria-label='Previous week'
>
<Icon icon='heroicons:chevron-left' width={20} height={20} />
@@ -89,21 +89,24 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<Card
variant='bordered'
className={{
wrapper: 'max-w-xs',
wrapper: 'max-w-40 rounded-lg',
body: 'p-3',
}}
>
<section className='flex items-center justify-center gap-4'>
<div className='grid grid-cols-1 min-w-0 text-center'>
<div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'>
<span className='text-[#0069E0] font-semibold truncate'>
<div className='flex items-center justify-center space-x-2 text-base-content/50 text-sm mb-1'>
<span className='text-primary font-semibold truncate'>
{week}
</span>
</div>
<div className='text-xl font-bold text-[#18181B80]'>
<span className='text-[#0069E0] break-all'>
<div className='text-xl font-bold text-base-content/50'>
<span className='text-primary break-all'>
{formatNumber(currentValue ?? 0)}
</span>
<span className='mx-1 text-gray-400 text-base'>From</span>
<span className='mx-1 text-base-content/50 text-sm font-semibold leading-5'>
From
</span>
<span className='break-all'>
{formatNumber(totalValue ?? 0)}
</span>
@@ -114,7 +117,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<button
onClick={() => onWeekChange?.('next')}
disabled={!hasNextWeek}
className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
aria-label='Next week'
>
<Icon icon='heroicons:chevron-right' width={20} height={20} />
src/components/pages/production/uniformity/detail/UniformityDetail.tsx
+42 -26
View File
@@ -7,7 +7,7 @@ import { ColumnDef } from '@tanstack/react-table';
import Button from '@/components/Button';
import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
import Table from '@/components/Table';
import Badge from '@/components/Badge';
import StatusBadge from '@/components/helper/StatusBadge';
import Tooltip from '@/components/Tooltip';
import RequirePermission from '@/components/helper/RequirePermission';
import { UniformityDetail as UniformityDetailType } from '@/types/api/production/uniformity';
@@ -18,8 +18,7 @@ import { UniformityApi } from '@/services/api/uniformity';
import useSWR from 'swr';
import { isResponseSuccess } from '@/lib/api-helper';
import {
getStatusColor,
getStatusIndicatorColor,
getStatusBadgeColor,
getStatusText,
} from '@/components/pages/production/uniformity/uniformity-utils';
import { DetailOptionType } from '@/types/api/production/uniformity';
@@ -150,12 +149,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [
{
accessorKey: 'label',
header: 'Label',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => {
const id = props.row.original.id;
const { info_umum, latest_approval } = initialValues!;
@@ -178,16 +183,10 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
if (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>
<StatusBadge
color={getStatusBadgeColor(status)}
text={getStatusText(status)}
/>
</div>
);
}
@@ -258,12 +257,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [
{
accessorKey: 'label',
header: 'Label',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => <span>{props.row.original.value}</span>,
},
],
@@ -301,12 +306,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [
{
accessorKey: 'label',
header: 'Label',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => <span>{props.row.original.value}</span>,
},
],
@@ -319,18 +330,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'>
<div className='flex flex-col gap-3'>
{/* 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 leading-6 tracking-[0.15px] mb-1.5'>
Informasi Umum
</h2>
<Table<DetailOptionType>
data={infoUmumTableData}
columns={columnsInfoUmum}
@@ -345,7 +357,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 leading-6 tracking-[0.15px] mb-1.5'>
Sampling and Range
</h2>
<Table<DetailOptionType>
data={samplingTableData}
columns={columnsSampling}
@@ -361,7 +375,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 leading-6 tracking-[0.15px] mb-1.5'>
Result
</h2>
<Table<DetailOptionType>
data={resultTableData}
columns={resultColumns}
src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
+12 -32
View File
@@ -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,13 +95,12 @@ 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'>
<div className='flex flex-col gap-3'>
{/* Body Weight Details */}
{uniformity_details && uniformity_details.length > 0 ? (
<div className='mt-4'>
<div className=''>
<Table<BodyWeightData>
data={tableData}
columns={columnsUniformity}
src/components/pages/production/uniformity/form/UniformityForm.tsx
+32 -28
View File
@@ -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 mb-1.5'>
Informasi Umum
</h2>
<form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
<form onSubmit={handleFormSubmit} className='flex flex-col'>
<DateInput
required
label='Tanggal'
@@ -581,7 +582,7 @@ const UniformityForm = ({
<label
htmlFor='file-upload-input'
className={cn(
"w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500",
"w-full text-xs font-semibold leading-5 after:content-['*'] after:ml-0.5 after:text-red-500 py-2",
formik.touched.document &&
formik.errors.document &&
'text-red-500'
@@ -597,8 +598,8 @@ const UniformityForm = ({
>
<Icon
icon='heroicons-solid:trash'
width={20}
height={20}
width={15}
height={15}
className='text-gray-400 hover:text-gray-600'
/>
</button>
@@ -610,8 +611,8 @@ const UniformityForm = ({
>
<Icon
icon='heroicons:information-circle'
width={20}
height={20}
width={15}
height={15}
className='text-gray-400 hover:text-gray-600'
/>
</Tooltip>
@@ -621,7 +622,7 @@ const UniformityForm = ({
<section
className={cn(
'h-full w-full border rounded-2xl border-dashed cursor-pointer mt-2',
'h-full w-full border rounded-2xl border-dashed cursor-pointer',
formik.touched.document && formik.errors.document
? 'border-red-500'
: 'border-gray-300'
@@ -756,20 +757,23 @@ const UniformityForm = ({
</div>
{!isNextStep && (
<RequirePermission permissions='lti.production.uniformity.create'>
<Button
type='submit'
color='primary'
className='w-full'
disabled={formik.isSubmitting}
>
{formik.isSubmitting ? (
<span className='loading loading-spinner'></span>
) : (
'Next'
)}
</Button>
</RequirePermission>
<>
<div className='border-t border-base-content/10 -mx-4 mt-4' />
<RequirePermission permissions='lti.production.uniformity.create'>
<Button
type='submit'
color='primary'
className='w-full mt-4 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
disabled={formik.isSubmitting}
>
{formik.isSubmitting ? (
<span className='loading loading-spinner'></span>
) : (
'Next'
)}
</Button>
</RequirePermission>
</>
)}
</form>
</section>
src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
+14 -7
View File
@@ -50,12 +50,16 @@ const UniformityPreviewForm = () => {
() => [
{
accessorKey: 'number',
header: 'No',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Number</span>
),
cell: (props) => props.row.original.number,
},
{
accessorKey: 'weight',
header: 'Weight (g)',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Weight (g)</span>
),
cell: (props) => <span>{props.row.original.weight}</span>,
},
],
@@ -68,19 +72,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>
@@ -90,7 +93,11 @@ const UniformityPreviewForm = () => {
className={{ containerClassName: 'mb-5' }}
/>
<RequirePermission permissions='lti.production.uniformity.create'>
<Button color='primary' onClick={handleNext} className='mb-10'>
<Button
color='primary'
onClick={handleNext}
className='mb-5 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
>
Next
</Button>
</RequirePermission>
src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+36 -40
View File
@@ -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 {
@@ -121,13 +120,19 @@ const UniformityResultForm = () => {
() => [
{
accessorKey: 'label',
header: 'Label',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
enableSorting: false,
},
{
accessorKey: 'value',
header: 'Value',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => <span>{props.row.original.value}</span>,
enableSorting: false,
},
],
[]
@@ -161,13 +166,19 @@ const UniformityResultForm = () => {
() => [
{
accessorKey: 'label',
header: 'Label',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
enableSorting: false,
},
{
accessorKey: 'value',
header: 'Value',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => <span>{props.row.original.value}</span>,
enableSorting: false,
},
],
[]
@@ -190,7 +201,7 @@ const UniformityResultForm = () => {
() => [
{
accessorKey: 'number',
header: 'No',
header: 'Number',
cell: (props) => props.row.original.number,
},
{
@@ -204,30 +215,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 +234,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={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'>
<div className='flex flex-col gap-3'>
<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 leading-6 tracking-[0.15px] mb-1.5'>
Sampling and Range
</h2>
<Table<DetailOptionType>
data={samplingTableData}
columns={columnsSampling}
@@ -270,7 +264,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 leading-6 tracking-[0.15px] mb-1.5'>
Result
</h2>
<Table<DetailOptionType>
data={resultTableData}
columns={resultColumns}
@@ -281,7 +277,7 @@ const UniformityResultForm = () => {
}}
/>
</div>
<div className='mt-4'>
<div className=''>
<Table<BodyWeightData>
data={tableData}
columns={columnsUniformity}
@@ -296,7 +292,7 @@ const UniformityResultForm = () => {
onClick={handleSubmit}
isLoading={isSubmitting}
disabled={!uniformityFormData}
className='mb-10'
className='mb-5 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
>
Submit
</Button>
src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+24 -15
View File
@@ -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>
</div>
</div>
<span className='text-xl font-semibold text-[#18181B80] leading-5'>
{/* 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 />
src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
+19 -13
View File
@@ -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'>
<Icon
icon={'heroicons:funnel'}
className='text-4xl text-whitd'
/>
</Button>
<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-white'
width={20}
height={20}
/>
</div>
</div>
</div>
<span className='text-lg font-semibold text-[#18181B80] leading-5 my-3'>
{/* 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>
src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+19 -13
View File
@@ -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'>
<Icon
icon={'heroicons-outline:chart-bar'}
className='text-4xl text-whitd'
/>
</Button>
<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:document-text'
className='text-white'
width={20}
height={20}
/>
</div>
</div>
</div>
<span className='text-xl font-semibold text-[#18181B80] leading-5'>
{/* 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>
);
};
src/components/pages/production/uniformity/uniformity-utils.ts
+36 -40
View File
@@ -1,46 +1,24 @@
export const weightStatusColorMap: Record<string, string> = {
ideal: 'bg-[#00D39033]',
outside: 'bg-error/10',
};
export const weightStatusIndicatorColorMap: Record<string, string> = {
ideal: 'bg-[#008000]',
outside: 'bg-error',
};
export const weightStatusTextMap: Record<string, string> = {
ideal: 'Ideal',
outside: 'Outside',
};
export const getWeightStatusColor = (status: string): string => {
return weightStatusColorMap[status] || 'bg-info';
};
export const getWeightStatusIndicatorColor = (status: string): string => {
return weightStatusIndicatorColorMap[status] || 'bg-info';
};
export const getWeightStatusText = (status: string): string => {
return weightStatusTextMap[status] || status;
};
export const statusColorMap: Record<string, string> = {
APPROVED: 'bg-[#00D39033]',
Disetujui: 'bg-[#00D39033]',
REJECTED: 'bg-error/10',
Ditolak: 'bg-error/10',
CREATED: 'bg-[#f3f3f4]',
Pengajuan: 'bg-[#f3f3f4]',
export const weightStatusBadgeColorMap: Record<
string,
'success' | 'error' | 'neutral' | 'info'
> = {
ideal: 'success',
outside: 'error',
};
export const statusIndicatorColorMap: Record<string, string> = {
APPROVED: 'bg-[#008000]',
Disetujui: 'bg-[#008000]',
REJECTED: 'bg-error',
Ditolak: 'bg-error',
CREATED: 'bg-[#D9D9D9]',
Pengajuan: 'bg-[#D9D9D9]',
export const getWeightStatusBadgeColor = (
status: string
): 'success' | 'error' | 'neutral' | 'info' => {
return weightStatusBadgeColorMap[status] || 'neutral';
};
export const statusTextMap: Record<string, string> = {
@@ -52,14 +30,32 @@ export const statusTextMap: Record<string, string> = {
Pengajuan: 'Pengajuan',
};
export const getStatusColor = (status: string): string => {
return statusColorMap[status] || 'bg-info';
};
export const getStatusIndicatorColor = (status: string): string => {
return statusIndicatorColorMap[status] || 'bg-info';
};
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';
};