feat: refactor CuttingShow component layout for improved readability and structure

This commit is contained in:
Yoga Pangestu 2026-08-14 21:50:40 +07:00
parent 9132e0c9b3
commit b846219b9d

View File

@ -1,5 +1,3 @@
import { Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import { ImagePreviewButton } from '@/components/dialogs';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
@ -13,6 +11,8 @@ import {
} from '@/components/ui/table';
import { formatNumber } from '@/lib/format';
import { index as cuttingIndex } from '@/routes/admin/manage/cuttings';
import { Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import type { Cutting } from './columns';
import { CuttingItemSubRow } from './cutting-sub-row';
@ -126,37 +126,11 @@ export default function CuttingShow({ cutting }: Props) {
<h3 className="mb-3 text-sm font-semibold">Bahan Baku</h3>
<div className="pb-2">
<div className="grid gap-4 sm:grid-cols-2">
<div className="rounded-lg border p-3">
<p className="text-xs text-muted-foreground">Total Pemakaian</p>
<p className="mt-1 text-lg font-semibold text-primary">
{formatNumber(totalUsage)}
</p>
</div>
{result?.cutting_result && (
<div className="rounded-lg border p-3">
<p className="text-xs text-muted-foreground">Total Hasil Cutting</p>
<p className="mt-1 text-lg font-semibold text-primary">
{formatNumber(result.cutting_result)} pcs
</p>
</div>
)}
{cutting.formatted_cost_per_unit && (
<div className="rounded-lg border p-3">
<p className="text-xs text-muted-foreground">Biaya Per Produk</p>
<p className="mt-1 text-lg font-semibold text-primary">
{cutting.formatted_cost_per_unit}
</p>
</div>
)}
{cutting.formatted_total_material_cost && (
<div className="rounded-lg border p-3">
<p className="text-xs text-muted-foreground">Total Biaya Bahan</p>
<p className="mt-1 text-lg font-semibold text-primary">
{cutting.formatted_total_material_cost}
</p>
</div>
)}
<div className="rounded-lg border p-3">
<p className="text-xs text-muted-foreground">Total Pemakaian</p>
<p className="mt-1 text-lg font-semibold text-primary">
{formatNumber(totalUsage)}
</p>
</div>
</div>