refactor(FE): Refine Uniformity table headers and layout

This commit is contained in:
rstubryan
2026-01-30 14:36:36 +07:00
parent 8b0dd6deea
commit b9b02f285f
3 changed files with 39 additions and 23 deletions
@@ -150,12 +150,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [ () => [
{ {
accessorKey: 'label', accessorKey: 'label',
header: 'Label', enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label, cell: (props) => props.row.original.label,
}, },
{ {
accessorKey: 'value', accessorKey: 'value',
header: 'Value', enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => { cell: (props) => {
const id = props.row.original.id; const id = props.row.original.id;
const { info_umum, latest_approval } = initialValues!; const { info_umum, latest_approval } = initialValues!;
@@ -258,12 +264,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [ () => [
{ {
accessorKey: 'label', accessorKey: 'label',
header: 'Label', enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label, cell: (props) => props.row.original.label,
}, },
{ {
accessorKey: 'value', 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>, cell: (props) => <span>{props.row.original.value}</span>,
}, },
], ],
@@ -301,12 +313,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [ () => [
{ {
accessorKey: 'label', accessorKey: 'label',
header: 'Label', enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label, cell: (props) => props.row.original.label,
}, },
{ {
accessorKey: 'value', 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>, cell: (props) => <span>{props.row.original.value}</span>,
}, },
], ],
@@ -326,10 +344,10 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
{/* Form Section */} {/* Form Section */}
<section className='w-full p-4'> <section className='w-full p-4'>
{initialValues ? ( {initialValues ? (
<div className='flex flex-col gap-4'> <div className='flex flex-col gap-3'>
{/* Info Umum */} {/* Info Umum */}
<div className=''> <div className=''>
<h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'> <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Informasi Umum Informasi Umum
</h2> </h2>
<Table<DetailOptionType> <Table<DetailOptionType>
@@ -346,7 +364,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
{/* Sampling and Range */} {/* Sampling and Range */}
{initialValues.sampling && ( {initialValues.sampling && (
<div className=''> <div className=''>
<h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'> <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Sampling and Range Sampling and Range
</h2> </h2>
<Table<DetailOptionType> <Table<DetailOptionType>
@@ -364,7 +382,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
{/* Result */} {/* Result */}
{initialValues.result && ( {initialValues.result && (
<div className=''> <div className=''>
<h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'> <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Result Result
</h2> </h2>
<Table<DetailOptionType> <Table<DetailOptionType>
@@ -97,10 +97,10 @@ const UniformityDetailsPreview = ({
{/* Form Section */} {/* Form Section */}
<section className='w-full p-4'> <section className='w-full p-4'>
{info_umum ? ( {info_umum ? (
<div className='flex flex-col gap-4'> <div className='flex flex-col gap-3'>
{/* Body Weight Details */} {/* Body Weight Details */}
{uniformity_details && uniformity_details.length > 0 ? ( {uniformity_details && uniformity_details.length > 0 ? (
<div className='mt-4'> <div className=''>
<Table<BodyWeightData> <Table<BodyWeightData>
data={tableData} data={tableData}
columns={columnsUniformity} columns={columnsUniformity}
@@ -124,6 +124,7 @@ const UniformityResultForm = () => {
<span className='font-medium text-sm leading-[150%]'>Label</span> <span className='font-medium text-sm leading-[150%]'>Label</span>
), ),
cell: (props) => props.row.original.label, cell: (props) => props.row.original.label,
enableSorting: false,
}, },
{ {
accessorKey: 'value', accessorKey: 'value',
@@ -131,6 +132,7 @@ const UniformityResultForm = () => {
<span className='font-medium text-sm leading-[150%]'>Value</span> <span className='font-medium text-sm leading-[150%]'>Value</span>
), ),
cell: (props) => <span>{props.row.original.value}</span>, cell: (props) => <span>{props.row.original.value}</span>,
enableSorting: false,
}, },
], ],
[] []
@@ -168,6 +170,7 @@ const UniformityResultForm = () => {
<span className='font-medium text-sm leading-[150%]'>Label</span> <span className='font-medium text-sm leading-[150%]'>Label</span>
), ),
cell: (props) => props.row.original.label, cell: (props) => props.row.original.label,
enableSorting: false,
}, },
{ {
accessorKey: 'value', accessorKey: 'value',
@@ -175,6 +178,7 @@ const UniformityResultForm = () => {
<span className='font-medium text-sm leading-[150%]'>Value</span> <span className='font-medium text-sm leading-[150%]'>Value</span>
), ),
cell: (props) => <span>{props.row.original.value}</span>, cell: (props) => <span>{props.row.original.value}</span>,
enableSorting: false,
}, },
], ],
[] []
@@ -197,23 +201,17 @@ const UniformityResultForm = () => {
() => [ () => [
{ {
accessorKey: 'number', accessorKey: 'number',
header: () => ( header: 'Number',
<span className='font-medium text-sm leading-[150%]'>Number</span>
),
cell: (props) => props.row.original.number, cell: (props) => props.row.original.number,
}, },
{ {
accessorKey: 'weight', accessorKey: 'weight',
header: () => ( header: 'Weight (g)',
<span className='font-medium text-sm leading-[150%]'>Weight (g)</span>
),
cell: (props) => <span>{props.row.original.weight}</span>, cell: (props) => <span>{props.row.original.weight}</span>,
}, },
{ {
accessorKey: 'status', accessorKey: 'status',
header: () => ( header: 'Status',
<span className='font-medium text-sm leading-[150%]'>Status</span>
),
cell: (props) => { cell: (props) => {
const status = props.row.original.status; const status = props.row.original.status;
return status ? ( return status ? (
@@ -251,7 +249,7 @@ const UniformityResultForm = () => {
{verifyUniformityResult ? ( {verifyUniformityResult ? (
<div className='flex flex-col gap-3'> <div className='flex flex-col gap-3'>
<div className=''> <div className=''>
<h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'> <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Sampling and Range Sampling and Range
</h2> </h2>
<Table<DetailOptionType> <Table<DetailOptionType>
@@ -266,7 +264,7 @@ const UniformityResultForm = () => {
</div> </div>
<div className=''> <div className=''>
<h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'> <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Result Result
</h2> </h2>
<Table<DetailOptionType> <Table<DetailOptionType>