feat(i18n): localize movement UI

src/app/(dashboard)/inventory/items/[itemId]/page.tsx

@@ -1,3 +1,4 @@
+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"
@@ -15,6 +16,7 @@ export default async function ItemPage({
   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>
@@ -77,7 +79,7 @@ export default async function ItemPage({
       {movements?.length > 0 && (
         <Card className="rounded-sm shadow-none">
           <CardHeader>
-            <CardTitle>Movements</CardTitle>
+            <CardTitle>{movementCopy.snippet.title}</CardTitle>
           </CardHeader>
           <CardContent>
             {movements.map((movement) => (
@@ -86,11 +88,21 @@ export default async function ItemPage({
                 className="grid grid-cols-2 gap-x-8 gap-y-2 text-sm"
               >
                 <div className="flex justify-between">
-                  <span className="text-gray-600">Type</span>
-                  <span>{movement.type}</span>
+                  <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">Quantity</span>
+                  <span className="text-gray-600">
+                    {movementCopy.snippet.labels.quantity}
+                  </span>
                   <span>{movement.quantity}</span>
                 </div>
               </div>

src/app/(dashboard)/movements/movement.copy.ts

@@ -0,0 +1,15 @@
+import type { Dictionary } from "@/i18n/dictionaries"
+
+export type MovementTypeCopy = Dictionary["inventory"]["movements"]["types"]
+export type MovementFallbackCopy =
+  Dictionary["inventory"]["movements"]["fallback"]
+
+export function formatMovementType(
+  type: string,
+  typeCopy: MovementTypeCopy,
+  fallbackCopy: MovementFallbackCopy,
+) {
+  return type in typeCopy
+    ? typeCopy[type as keyof MovementTypeCopy]
+    : fallbackCopy.unknownType
+}

src/app/(dashboard)/movements/page.tsx

@@ -1,7 +1,10 @@
 import PaginationButtons from "@/components/common/pagination"
+import { getI18n } from "@/i18n/server"
 import { formatDate } from "@/lib/utils"
 import { MovementService } from "@/services/movement.service"
 
+import { formatMovementType } from "./movement.copy"
+
 export default async function MovementsPage(props: {
   searchParams?: Promise<{
     page?: string
@@ -13,50 +16,62 @@ export default async function MovementsPage(props: {
     page: currentPage,
     pageSize: 12,
   })
+  const { dictionary } = await getI18n()
+  const copy = dictionary.inventory.movements
 
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between gap-4">
-        <h1 className="text-2xl font-bold">Movements</h1>
+        <h1 className="text-2xl font-bold">{copy.list.title}</h1>
       </div>
-      {movements.length === 0 && <div>No movements found</div>}
+      {movements.length === 0 && <div>{copy.list.empty}</div>}
       {movements.length > 0 && (
         <div className="overflow-x-auto">
           <table className="text-muted-foreground w-full text-left text-sm">
             <thead className="border-b">
               <tr>
                 <th scope="col" className="p-4">
-                  Type
+                  {copy.list.columns.type}
                 </th>
                 <th scope="col" className="p-4">
-                  Item
+                  {copy.list.columns.item}
                 </th>
                 <th scope="col" className="p-4">
-                  Serial Number
+                  {copy.list.columns.serialNumber}
                 </th>
                 <th scope="col" className="p-4">
-                  Quantity
+                  {copy.list.columns.quantity}
                 </th>
                 <th scope="col" className="p-4">
-                  Recipient
+                  {copy.list.columns.recipient}
                 </th>
                 <th scope="col" className="p-4">
-                  Date
+                  {copy.list.columns.date}
                 </th>
               </tr>
             </thead>
             <tbody>
               {movements.map((movement) => (
                 <tr key={movement.id} className="border-b">
-                  <td className="p-4">{movement.type}</td>
-                  <td className="p-4">{movement?.item?.name}</td>
                   <td className="p-4">
-                    {movement?.asset?.serialNumber || "-"}
+                    {formatMovementType(
+                      movement.type,
+                      copy.types,
+                      copy.fallback,
+                    )}
+                  </td>
+                  <td className="p-4">
+                    {movement?.item?.name || copy.fallback.missingValue}
+                  </td>
+                  <td className="p-4">
+                    {movement?.asset?.serialNumber ||
+                      copy.fallback.missingValue}
                   </td>
                   <td className="p-4">{movement.quantity}</td>
                   <td className="p-4">
-                    {movement?.recipient?.firstName || "-"}{" "}
-                    {movement?.recipient?.lastName || "-"}
+                    {movement?.recipient
+                      ? `${movement.recipient.firstName} ${movement.recipient.lastName}`
+                      : copy.fallback.missingValue}
                   </td>
                   <td className="p-4">{formatDate(movement.createdAt)}</td>
                 </tr>