mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
refactor(FE-316): Extract Uniformity confirmation preview component
This commit is contained in:
rstubryan
@@ -33,6 +33,108 @@ const isUniformityLocked = (uniformity: Uniformity): boolean => {
|
|||||||
return uniformity.status === 'APPROVED' || uniformity.status === 'REJECTED';
|
return uniformity.status === 'APPROVED' || uniformity.status === 'REJECTED';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
interface UniformityPreviewData {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UniformityConfirmationPreview = ({
|
||||||
|
tanggal = '28 Desember 2025',
|
||||||
|
lokasiFarm = 'Farm A',
|
||||||
|
projectFlock = 'Flock 2025-01',
|
||||||
|
kandang = 'Kandang 1',
|
||||||
|
fileName = 'uniformity_data.xlsx',
|
||||||
|
status = 'APPROVED',
|
||||||
|
}: {
|
||||||
|
tanggal?: string;
|
||||||
|
lokasiFarm?: string;
|
||||||
|
projectFlock?: string;
|
||||||
|
kandang?: string;
|
||||||
|
fileName?: string;
|
||||||
|
status?: string;
|
||||||
|
}) => {
|
||||||
|
const data: UniformityPreviewData[] = [
|
||||||
|
{
|
||||||
|
id: 'tanggal',
|
||||||
|
label: 'Tanggal',
|
||||||
|
value: tanggal,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'lokasi-farm',
|
||||||
|
label: 'Lokasi Farm',
|
||||||
|
value: lokasiFarm,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'project-flock',
|
||||||
|
label: 'Project Flock',
|
||||||
|
value: projectFlock,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'kandang',
|
||||||
|
label: 'Kandang',
|
||||||
|
value: kandang,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'file-uniformity',
|
||||||
|
label: 'File Uniformity',
|
||||||
|
value: fileName,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
label: 'Status',
|
||||||
|
value: status,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ColumnDef<UniformityPreviewData>[] = [
|
||||||
|
{
|
||||||
|
accessorKey: 'label',
|
||||||
|
header: 'Label',
|
||||||
|
cell: (props) => props.row.original.label,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'value',
|
||||||
|
header: 'Value',
|
||||||
|
cell: (props) => {
|
||||||
|
const id = props.row.original.id;
|
||||||
|
const value = props.row.original.value;
|
||||||
|
|
||||||
|
if (id === '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(value)}`,
|
||||||
|
status: getStatusIndicatorColor(value),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getStatusText(value)}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <span>{value}</span>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
data={data}
|
||||||
|
columns={columns}
|
||||||
|
pageSize={6}
|
||||||
|
className={{
|
||||||
|
containerClassName: 'mb-0',
|
||||||
|
paginationClassName: 'hidden',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
@@ -475,57 +577,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col gap-4 mt-4'>
|
<div className='flex flex-col gap-4 mt-4'>
|
||||||
<Table
|
<UniformityConfirmationPreview />
|
||||||
data={[
|
|
||||||
{
|
|
||||||
id: 'tanggal',
|
|
||||||
label: 'Tanggal',
|
|
||||||
value: '28 Desember 2025',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lokasi-farm',
|
|
||||||
label: 'Lokasi Farm',
|
|
||||||
value: 'Farm A',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'project-flock',
|
|
||||||
label: 'Project Flock',
|
|
||||||
value: 'Flock 2025-01',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'kandang',
|
|
||||||
label: 'Kandang',
|
|
||||||
value: 'Kandang 1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'file-uniformity',
|
|
||||||
label: 'File Uniformity',
|
|
||||||
value: 'uniformity_data.xlsx',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
label: 'Status',
|
|
||||||
value: 'Disetujui',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
accessorKey: 'label',
|
|
||||||
header: 'Label',
|
|
||||||
cell: (props) => props.row.original.label,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'value',
|
|
||||||
header: 'Value',
|
|
||||||
cell: (props) => <span>{props.row.original.value}</span>,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={6}
|
|
||||||
className={{
|
|
||||||
containerClassName: 'mb-0',
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ConfirmationModal>
|
</ConfirmationModal>
|
||||||
|
|
||||||
@@ -549,57 +601,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col gap-4 mt-4'>
|
<div className='flex flex-col gap-4 mt-4'>
|
||||||
<Table
|
<UniformityConfirmationPreview />
|
||||||
data={[
|
|
||||||
{
|
|
||||||
id: 'tanggal',
|
|
||||||
label: 'Tanggal',
|
|
||||||
value: '28 Desember 2025',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lokasi-farm',
|
|
||||||
label: 'Lokasi Farm',
|
|
||||||
value: 'Farm A',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'project-flock',
|
|
||||||
label: 'Project Flock',
|
|
||||||
value: 'Flock 2025-01',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'kandang',
|
|
||||||
label: 'Kandang',
|
|
||||||
value: 'Kandang 1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'file-uniformity',
|
|
||||||
label: 'File Uniformity',
|
|
||||||
value: 'uniformity_data.xlsx',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
label: 'Status',
|
|
||||||
value: 'Disetujui',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
accessorKey: 'label',
|
|
||||||
header: 'Label',
|
|
||||||
cell: (props) => props.row.original.label,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'value',
|
|
||||||
header: 'Value',
|
|
||||||
cell: (props) => <span>{props.row.original.value}</span>,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={6}
|
|
||||||
className={{
|
|
||||||
containerClassName: 'mb-0',
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ConfirmationModal>
|
</ConfirmationModal>
|
||||||
|
|
||||||
@@ -623,57 +625,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col gap-4 mt-4'>
|
<div className='flex flex-col gap-4 mt-4'>
|
||||||
<Table
|
<UniformityConfirmationPreview />
|
||||||
data={[
|
|
||||||
{
|
|
||||||
id: 'tanggal',
|
|
||||||
label: 'Tanggal',
|
|
||||||
value: '28 Desember 2025',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lokasi-farm',
|
|
||||||
label: 'Lokasi Farm',
|
|
||||||
value: 'Farm A',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'project-flock',
|
|
||||||
label: 'Project Flock',
|
|
||||||
value: 'Flock 2025-01',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'kandang',
|
|
||||||
label: 'Kandang',
|
|
||||||
value: 'Kandang 1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'file-uniformity',
|
|
||||||
label: 'File Uniformity',
|
|
||||||
value: 'uniformity_data.xlsx',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
label: 'Status',
|
|
||||||
value: 'Disetujui',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
accessorKey: 'label',
|
|
||||||
header: 'Label',
|
|
||||||
cell: (props) => props.row.original.label,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'value',
|
|
||||||
header: 'Value',
|
|
||||||
cell: (props) => <span>{props.row.original.value}</span>,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={6}
|
|
||||||
className={{
|
|
||||||
containerClassName: 'mb-0',
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ConfirmationModal>
|
</ConfirmationModal>
|
||||||
|
|
||||||
@@ -697,57 +649,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col gap-4 mt-4'>
|
<div className='flex flex-col gap-4 mt-4'>
|
||||||
<Table
|
<UniformityConfirmationPreview />
|
||||||
data={[
|
|
||||||
{
|
|
||||||
id: 'tanggal',
|
|
||||||
label: 'Tanggal',
|
|
||||||
value: '28 Desember 2025',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lokasi-farm',
|
|
||||||
label: 'Lokasi Farm',
|
|
||||||
value: 'Farm A',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'project-flock',
|
|
||||||
label: 'Project Flock',
|
|
||||||
value: 'Flock 2025-01',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'kandang',
|
|
||||||
label: 'Kandang',
|
|
||||||
value: 'Kandang 1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'file-uniformity',
|
|
||||||
label: 'File Uniformity',
|
|
||||||
value: 'uniformity_data.xlsx',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
label: 'Status',
|
|
||||||
value: 'Disetujui',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
accessorKey: 'label',
|
|
||||||
header: 'Label',
|
|
||||||
cell: (props) => props.row.original.label,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'value',
|
|
||||||
header: 'Value',
|
|
||||||
cell: (props) => <span>{props.row.original.value}</span>,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={6}
|
|
||||||
className={{
|
|
||||||
containerClassName: 'mb-0',
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ConfirmationModal>
|
</ConfirmationModal>
|
||||||
|
|
||||||
@@ -771,57 +673,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col gap-4 mt-4'>
|
<div className='flex flex-col gap-4 mt-4'>
|
||||||
<Table
|
<UniformityConfirmationPreview />
|
||||||
data={[
|
|
||||||
{
|
|
||||||
id: 'tanggal',
|
|
||||||
label: 'Tanggal',
|
|
||||||
value: '28 Desember 2025',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lokasi-farm',
|
|
||||||
label: 'Lokasi Farm',
|
|
||||||
value: 'Farm A',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'project-flock',
|
|
||||||
label: 'Project Flock',
|
|
||||||
value: 'Flock 2025-01',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'kandang',
|
|
||||||
label: 'Kandang',
|
|
||||||
value: 'Kandang 1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'file-uniformity',
|
|
||||||
label: 'File Uniformity',
|
|
||||||
value: 'uniformity_data.xlsx',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
label: 'Status',
|
|
||||||
value: 'Disetujui',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
accessorKey: 'label',
|
|
||||||
header: 'Label',
|
|
||||||
cell: (props) => props.row.original.label,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'value',
|
|
||||||
header: 'Value',
|
|
||||||
cell: (props) => <span>{props.row.original.value}</span>,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={6}
|
|
||||||
className={{
|
|
||||||
containerClassName: 'mb-0',
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ConfirmationModal>
|
</ConfirmationModal>
|
||||||
|
|
||||||
@@ -845,57 +697,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col gap-4 mt-4'>
|
<div className='flex flex-col gap-4 mt-4'>
|
||||||
<Table
|
<UniformityConfirmationPreview />
|
||||||
data={[
|
|
||||||
{
|
|
||||||
id: 'tanggal',
|
|
||||||
label: 'Tanggal',
|
|
||||||
value: '28 Desember 2025',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lokasi-farm',
|
|
||||||
label: 'Lokasi Farm',
|
|
||||||
value: 'Farm A',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'project-flock',
|
|
||||||
label: 'Project Flock',
|
|
||||||
value: 'Flock 2025-01',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'kandang',
|
|
||||||
label: 'Kandang',
|
|
||||||
value: 'Kandang 1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'file-uniformity',
|
|
||||||
label: 'File Uniformity',
|
|
||||||
value: 'uniformity_data.xlsx',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
label: 'Status',
|
|
||||||
value: 'Disetujui',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
accessorKey: 'label',
|
|
||||||
header: 'Label',
|
|
||||||
cell: (props) => props.row.original.label,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'value',
|
|
||||||
header: 'Value',
|
|
||||||
cell: (props) => <span>{props.row.original.value}</span>,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={6}
|
|
||||||
className={{
|
|
||||||
containerClassName: 'mb-0',
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ConfirmationModal>
|
</ConfirmationModal>
|
||||||
|
|
||||||
@@ -918,57 +720,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col gap-4 mt-4'>
|
<div className='flex flex-col gap-4 mt-4'>
|
||||||
<Table
|
<UniformityConfirmationPreview />
|
||||||
data={[
|
|
||||||
{
|
|
||||||
id: 'tanggal',
|
|
||||||
label: 'Tanggal',
|
|
||||||
value: '28 Desember 2025',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lokasi-farm',
|
|
||||||
label: 'Lokasi Farm',
|
|
||||||
value: 'Farm A',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'project-flock',
|
|
||||||
label: 'Project Flock',
|
|
||||||
value: 'Flock 2025-01',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'kandang',
|
|
||||||
label: 'Kandang',
|
|
||||||
value: 'Kandang 1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'file-uniformity',
|
|
||||||
label: 'File Uniformity',
|
|
||||||
value: 'uniformity_data.xlsx',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
label: 'Status',
|
|
||||||
value: 'Disetujui',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
accessorKey: 'label',
|
|
||||||
header: 'Label',
|
|
||||||
cell: (props) => props.row.original.label,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'value',
|
|
||||||
header: 'Value',
|
|
||||||
cell: (props) => <span>{props.row.original.value}</span>,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={6}
|
|
||||||
className={{
|
|
||||||
containerClassName: 'mb-0',
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ConfirmationModal>
|
</ConfirmationModal>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user