Files
stock-manager/src/app/(dashboard)/inventory/items/[itemId]/page.tsx
T

116 lines
4.0 KiB
TypeScript

import { formatMovementType } from "@/app/(dashboard)/movements/movement.copy"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { getI18n } from "@/i18n/server"
import { AssetService } from "@/services/asset.service"
import { ItemService } from "@/services/item.service"
import { MovementService } from "@/services/movement.service"
export default async function ItemPage({
params,
}: {
params: Promise<{ itemId: string }>
}) {
const { itemId } = await params
const item = await ItemService.findByIdWithCategory(itemId)
const assets = await AssetService.findByItemId(itemId)
const movements = await MovementService.findAllByItemId(itemId)
const { dictionary } = await getI18n()
const copy = dictionary.inventory.items.detail
const movementCopy = dictionary.inventory.movements
if (!item) {
return <div>{copy.notFound}</div>
}
return (
<div className="grid gap-6">
<Card className="rounded-sm shadow-none">
<CardHeader>
<CardTitle>{item.name}</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-x-8 gap-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600">{copy.labels.category}</span>
<span>{item.category.name}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">{copy.labels.stock}</span>
<span>{item.stock}</span>
</div>
</div>
</CardContent>
</Card>
{assets?.length > 0 && (
<Card className="rounded-sm shadow-none">
<CardHeader>
<CardTitle>Assets</CardTitle>
</CardHeader>
<CardContent>
{assets?.map((asset) => (
<div
key={asset.id}
className="grid grid-cols-3 gap-x-8 gap-y-2 text-sm"
>
<div className="flex justify-between">
<span className="text-gray-600">Status</span>
<span>{asset.status || "Available"}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Serial Number</span>
<span>{asset.serialNumber}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Delivery Note</span>
<span>{asset.deliveryNote}</span>
</div>
</div>
))}
{assets?.length === 0 && (
<p className="col-span-2 text-center text-gray-500">
No assets found.
</p>
)}
</CardContent>
</Card>
)}
{movements?.length > 0 && (
<Card className="rounded-sm shadow-none">
<CardHeader>
<CardTitle>{movementCopy.snippet.title}</CardTitle>
</CardHeader>
<CardContent>
{movements.map((movement) => (
<div
key={`${movement.id}-${movement.type}`}
className="grid grid-cols-2 gap-x-8 gap-y-2 text-sm"
>
<div className="flex justify-between">
<span className="text-gray-600">
{movementCopy.snippet.labels.type}
</span>
<span>
{formatMovementType(
movement.type,
movementCopy.types,
movementCopy.fallback,
)}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">
{movementCopy.snippet.labels.quantity}
</span>
<span>{movement.quantity}</span>
</div>
</div>
))}
</CardContent>
</Card>
)}
</div>
)
}