aferrer/stock-manager
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): localize inventory items UI

Browse Source
This commit is contained in:
Asis ferrer
2026-06-13 11:12:02 +02:00
parent 9f7d1b8ef8
commit 964b1648ca
12 changed files with 414 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(dashboard)/inventory/items/[itemId]/edit/page.tsx
+5 -3
View File
@@ -13,24 +13,26 @@ export default async function AddItem({
const categories = await CategoryService.findAll()
const item = await ItemService.findByIdWithAssetCount(itemId)
const { dictionary } = await getI18n()
const copy = dictionary.inventory.items
if (!item) {
return <div>Item not found</div>
return <div>{copy.edit.notFound}</div>
}
return (
<div className="flex flex-col gap-4">
{item?._count?.assets && item?._count.assets > 0 && (
<div className="rounded-sm bg-red-100 p-4 text-red-800">
<p>{`This item has already assets assigned to it.`}</p>
<p>{copy.edit.hasAssetsWarning}</p>
</div>
)}
<div className="flex items-center justify-between gap-4">
<h1 className="text-2xl font-bold">Edit Item</h1>
<h1 className="text-2xl font-bold">{copy.edit.title}</h1>
</div>
<UpdateItemForm
categories={categories}
item={item}
formCopy={copy.form}
submitButtonCopy={dictionary.common.submitButton}
/>
</div>
src/app/(dashboard)/inventory/items/[itemId]/page.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
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"
@@ -12,9 +13,11 @@ export default async function ItemPage({
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
if (!item) {
return <div>Item not found</div>
return <div>{copy.notFound}</div>
}
return (
@@ -26,11 +29,11 @@ export default async function ItemPage({
<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">Category</span>
<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">Stock</span>
<span className="text-gray-600">{copy.labels.stock}</span>
<span>{item.stock}</span>
</div>
</div>
src/app/(dashboard)/inventory/items/_components/delete.item.button.tsx
+11 -2
View File
@@ -7,7 +7,15 @@ import { toast } from "sonner"
import { deleteItemAction } from "@/actions/item.actions"
import { Button } from "@/components/ui/button"
export default function DeleteItemButton({ itemId }: { itemId: string }) {
import type { ItemDeleteCopy } from "./item.copy"
export default function DeleteItemButton({
itemId,
copy,
}: {
itemId: string
copy: ItemDeleteCopy
}) {
const router = useRouter()
const [isPending, startTransition] = useTransition()
@@ -24,7 +32,7 @@ export default function DeleteItemButton({ itemId }: { itemId: string }) {
toast.success(response.message)
router.refresh()
} else {
toast.error(response.message ?? "Unknown error")
toast.error(response.message ?? copy.unknownError)
}
})
}
@@ -38,6 +46,7 @@ export default function DeleteItemButton({ itemId }: { itemId: string }) {
size="icon"
variant="outline"
disabled={isPending}
aria-label={isPending ? copy.pending : copy.label}
>
<Trash />
</Button>
src/app/(dashboard)/inventory/items/_components/item.copy.ts
+6
View File
@@ -0,0 +1,6 @@
import type { Dictionary } from "@/i18n/dictionaries"
export type ItemListCopy = Dictionary["inventory"]["items"]["list"]
export type ItemDetailCopy = Dictionary["inventory"]["items"]["detail"]
export type ItemFormCopy = Dictionary["inventory"]["items"]["form"]
export type ItemDeleteCopy = Dictionary["inventory"]["items"]["delete"]
src/app/(dashboard)/inventory/items/_components/new.item.form.tsx
+11 -7
View File
@@ -15,11 +15,15 @@ import {
} from "@/schemas/item.schema"
import type { CategorySummary } from "@/types"
import type { ItemFormCopy } from "./item.copy"
export default function NewItemForm({
categories,
formCopy,
submitButtonCopy,
}: {
categories: CategorySummary[]
formCopy: ItemFormCopy
submitButtonCopy: SubmitButtonCopy
}) {
const router = useRouter()
@@ -61,12 +65,12 @@ export default function NewItemForm({
<form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="name" className="mb-2 block text-lg">
Name
{formCopy.nameLabel}
</label>
<input
type="text"
id="name"
placeholder="Item name"
placeholder={formCopy.namePlaceholder}
{...register("name")}
className="w-full rounded-lg border px-4 py-2"
/>
@@ -74,14 +78,14 @@ export default function NewItemForm({
</div>
<div>
<label htmlFor="categoryId" className="mb-2 block text-lg">
Category
{formCopy.categoryLabel}
</label>
<select
id="categoryId"
{...register("categoryId")}
className="w-full rounded-lg border px-4 py-2"
>
<option value="">Select a category</option>
<option value="">{formCopy.categoryPlaceholder}</option>
{categories?.map((category) => (
<option key={category.id} value={category.id}>
{category.name}
@@ -94,13 +98,13 @@ export default function NewItemForm({
</div>
<div>
<label htmlFor="stock" className="mb-2 block text-lg">
Stock
{formCopy.stockLabel}
</label>
<input
type="number"
id="stock"
pattern="{[0-9]*}"
placeholder="0"
placeholder={formCopy.stockPlaceholder}
min="0"
{...register("stock")}
className="w-full rounded-lg border px-4 py-2"
@@ -124,7 +128,7 @@ export default function NewItemForm({
isSubmitting={isSubmitting}
isSubmitSuccessful={isSubmitSuccessful}
>
Create Item
{formCopy.createSubmit}
</SubmitButton>
</form>
)
src/app/(dashboard)/inventory/items/_components/update.item.form.tsx
+11 -7
View File
@@ -15,13 +15,17 @@ import {
} from "@/schemas/item.schema"
import type { CategorySummary, ItemWithAssetCount } from "@/types"
import type { ItemFormCopy } from "./item.copy"
export default function UpdateItemForm({
categories,
item,
formCopy,
submitButtonCopy,
}: {
categories: CategorySummary[]
item: ItemWithAssetCount
formCopy: ItemFormCopy
submitButtonCopy: SubmitButtonCopy
}) {
const router = useRouter()
@@ -72,12 +76,12 @@ export default function UpdateItemForm({
{item?.id && <input type="hidden" name="id" value={item.id} />}
<div>
<label htmlFor="name" className="mb-2 block text-lg">
Name
{formCopy.nameLabel}
</label>
<input
type="text"
id="name"
placeholder="Item name"
placeholder={formCopy.namePlaceholder}
{...register("name")}
className={`w-full rounded-lg border px-4 py-2`}
/>
@@ -85,7 +89,7 @@ export default function UpdateItemForm({
</div>
<div>
<label htmlFor="categoryId" className="mb-2 block text-lg">
Category
{formCopy.categoryLabel}
</label>
<select
id="categoryId"
@@ -93,7 +97,7 @@ export default function UpdateItemForm({
{...register("categoryId")}
className={`w-full rounded-lg border px-4 py-2`}
>
<option value="">Select a category</option>
<option value="">{formCopy.categoryPlaceholder}</option>
{categories?.map((category) => (
<option key={category.id} value={category.id}>
{category.name}
@@ -106,13 +110,13 @@ export default function UpdateItemForm({
</div>
<div>
<label htmlFor="stock" className="mb-2 block text-lg">
Stock
{formCopy.stockLabel}
</label>
<input
type="number"
id="stock"
pattern="{[0-9]*}"
placeholder="0"
placeholder={formCopy.stockPlaceholder}
min={item.stock}
disabled={isDisabled}
{...register("stock")}
@@ -139,7 +143,7 @@ export default function UpdateItemForm({
isSubmitting={isSubmitting}
isSubmitSuccessful={isSubmitSuccessful}
>
Update Item
{formCopy.updateSubmit}
</SubmitButton>
</form>
)
src/app/(dashboard)/inventory/items/new/page.tsx
+3 -1
View File
@@ -6,14 +6,16 @@ import NewItemForm from "../_components/new.item.form"
export default async function NewItemPage() {
const categories = await CategoryService.findAll()
const { dictionary } = await getI18n()
const copy = dictionary.inventory.items
return (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between gap-4">
<h1 className="text-2xl font-bold">New Item</h1>
<h1 className="text-2xl font-bold">{copy.new.title}</h1>
</div>
<NewItemForm
categories={categories}
formCopy={copy.form}
submitButtonCopy={dictionary.common.submitButton}
/>
</div>
src/app/(dashboard)/inventory/items/page.tsx
+22 -10
View File
@@ -4,6 +4,7 @@ import Link from "next/link"
import PageHeader from "@/components/common/pageheader"
import PaginationButtons from "@/components/common/pagination"
import { Button } from "@/components/ui/button"
import { getI18n } from "@/i18n/server"
import { ItemService } from "@/services/item.service"
import DeleteItemButton from "./_components/delete.item.button"
@@ -22,19 +23,22 @@ export default async function ItemsPage(props: {
pageSize: 10,
search,
})
const { dictionary } = await getI18n()
const copy = dictionary.inventory.items
return (
<div className="flex flex-col gap-4">
<PageHeader
title="Items"
title={copy.list.title}
link="/inventory/items/new"
addLabel={copy.list.addLabel}
data={items}
search={search}
/>
{items.length === 0 && currentPage === 1 && (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between gap-4">
No items found.
{copy.list.empty}
</div>
</div>
)}
@@ -44,19 +48,19 @@ export default async function ItemsPage(props: {
<thead className="border-b">
<tr>
<th scope="col" className="p-4">
Name
{copy.list.columns.name}
</th>
<th scope="col" className="p-4">
Category
{copy.list.columns.category}
</th>
<th scope="col" className="p-4">
Assets
{copy.list.columns.assets}
</th>
<th scope="col" className="p-4">
Stock
{copy.list.columns.stock}
</th>
<th scope="col" className="p-4">
Actions
{copy.list.columns.actions}
</th>
</tr>
</thead>
@@ -69,17 +73,25 @@ export default async function ItemsPage(props: {
<td className="p-4">{item.stock}</td>
<td className="flex items-center gap-2 p-4">
<Link href={`/inventory/items/${item.id}`} passHref>
<Button variant="outline" size="icon">
<Button
variant="outline"
size="icon"
aria-label={copy.list.actions.view}
>
<Eye />
</Button>
</Link>
<Link href={`/inventory/items/${item.id}/edit`} passHref>
<Button variant="outline" size="icon">
<Button
variant="outline"
size="icon"
aria-label={copy.list.actions.edit}
>
<Pencil />
</Button>
</Link>
{item._count.assets === 0 && item.stock === 0 && (
<DeleteItemButton itemId={item.id} />
<DeleteItemButton itemId={item.id} copy={copy.delete} />
)}
</td>
</tr>
src/i18n/dictionaries/en.ts
+69
View File
@@ -113,6 +113,75 @@ export const en = {
idRequired: "ID is required",
},
},
items: {
list: {
title: "Items",
addLabel: "Add Item",
empty: "No items found.",
columns: {
name: "Name",
category: "Category",
assets: "Assets",
stock: "Stock",
actions: "Actions",
},
actions: {
view: "View item",
edit: "Edit item",
delete: "Delete item",
},
},
detail: {
notFound: "Item not found",
labels: {
category: "Category",
stock: "Stock",
},
},
new: {
title: "New Item",
},
edit: {
title: "Edit Item",
notFound: "Item not found",
hasAssetsWarning: "This item has already assets assigned to it.",
},
form: {
nameLabel: "Name",
namePlaceholder: "Item name",
categoryLabel: "Category",
categoryPlaceholder: "Select a category",
stockLabel: "Stock",
stockPlaceholder: "0",
createSubmit: "Create Item",
updateSubmit: "Update Item",
},
delete: {
label: "Delete item",
pending: "Deleting...",
unknownError: "Unknown error",
},
actions: {
createSuccess: "Item created successfully!",
createFailure: "Error creating item",
updateSuccess: "Item updated successfully!",
updateFailure: "Failed to update item",
deleteSuccess: "Item deleted successfully!",
deleteFailure: "Failed to delete item",
duplicateName: "Item already exists",
notFound: "Item not found",
hasAssets: "Cannot delete item with assets",
hasStock: "Cannot delete item with stock",
invalidStock: "Invalid stock",
negativeStock: "Stock cannot be negative",
},
schema: {
nameRequired: "Name is required",
categoryRequired: "Category is required",
stockRequired: "Stock is required",
itemRequired: "Item is required",
},
},
},
login: {
title: "Sign In",
src/i18n/dictionaries/es.ts
+69
View File
@@ -116,6 +116,75 @@ export const es = {
idRequired: "El ID es obligatorio",
},
},
items: {
list: {
title: "Artículos",
addLabel: "Agregar artículo",
empty: "No se encontraron artículos.",
columns: {
name: "Nombre",
category: "Categoría",
assets: "Activos",
stock: "Stock",
actions: "Acciones",
},
actions: {
view: "Ver artículo",
edit: "Editar artículo",
delete: "Eliminar artículo",
},
},
detail: {
notFound: "Artículo no encontrado",
labels: {
category: "Categoría",
stock: "Stock",
},
},
new: {
title: "Nuevo artículo",
},
edit: {
title: "Editar artículo",
notFound: "Artículo no encontrado",
hasAssetsWarning: "Este artículo ya tiene activos asignados.",
},
form: {
nameLabel: "Nombre",
namePlaceholder: "Nombre del artículo",
categoryLabel: "Categoría",
categoryPlaceholder: "Selecciona una categoría",
stockLabel: "Stock",
stockPlaceholder: "0",
createSubmit: "Crear artículo",
updateSubmit: "Actualizar artículo",
},
delete: {
label: "Eliminar artículo",
pending: "Eliminando...",
unknownError: "Error desconocido",
},
actions: {
createSuccess: "Artículo creado correctamente",
createFailure: "Error al crear el artículo",
updateSuccess: "Artículo actualizado correctamente",
updateFailure: "Error al actualizar el artículo",
deleteSuccess: "Artículo eliminado correctamente",
deleteFailure: "Error al eliminar el artículo",
duplicateName: "El artículo ya existe",
notFound: "Artículo no encontrado",
hasAssets: "No se puede eliminar un artículo con activos",
hasStock: "No se puede eliminar un artículo con stock",
invalidStock: "Stock inválido",
negativeStock: "El stock no puede ser negativo",
},
schema: {
nameRequired: "El nombre es obligatorio",
categoryRequired: "La categoría es obligatoria",
stockRequired: "El stock es obligatorio",
itemRequired: "El artículo es obligatorio",
},
},
},
login: {
title: "Iniciar sesión",
tests/e2e/inventory-items.spec.ts
+59
View File
@@ -0,0 +1,59 @@
import { expect, type Page, test } from "@playwright/test"
async function setLocaleCookie(
page: Page,
locale: "en" | "es",
baseURL?: string,
) {
await page.context().addCookies([
{
name: "stock-manager-locale",
value: locale,
url: baseURL ?? "http://127.0.0.1:3100",
},
])
}
async function signInAsAdmin(page: Page, baseURL?: string) {
await setLocaleCookie(page, "en", baseURL)
await page.goto("/login")
await page.getByLabel("Username").fill("admin")
await page.getByLabel("Password").fill("admin-password")
await page.getByRole("button", { name: "Sign In" }).click()
await expect(page).toHaveURL("/")
}
test.describe("inventory items localization", () => {
test("renders item list and new form UI copy in Spanish", async ({
baseURL,
page,
}) => {
await signInAsAdmin(page, baseURL)
await setLocaleCookie(page, "es", baseURL)
await page.goto("/inventory/items")
await expect(page.locator("html")).toHaveAttribute("lang", "es")
await expect(page.getByRole("heading", { name: "Artículos" })).toBeVisible()
await expect(
page.getByRole("link", { name: /Agregar artículo/ }),
).toBeVisible()
await expect(page.getByText("No se encontraron artículos.")).toBeVisible()
await page.goto("/inventory/items/new")
await expect(
page.getByRole("heading", { name: "Nuevo artículo" }),
).toBeVisible()
await expect(page.getByLabel("Nombre")).toBeVisible()
await expect(page.getByPlaceholder("Nombre del artículo")).toBeVisible()
await expect(page.getByLabel("Categoría")).toBeVisible()
await expect(page.locator("select#categoryId")).toContainText(
"Selecciona una categoría",
)
await expect(page.getByLabel("Stock")).toBeVisible()
await expect(
page.getByRole("button", { name: "Crear artículo" }),
).toBeVisible()
})
})
tests/unit/i18n/dictionaries.test.ts
+142
View File
@@ -266,6 +266,148 @@ describe("i18n dictionaries", () => {
})
})
it("provides localized inventory item copy for English and Spanish", () => {
expect(getDictionary("en").inventory.items).toEqual({
list: {
title: "Items",
addLabel: "Add Item",
empty: "No items found.",
columns: {
name: "Name",
category: "Category",
assets: "Assets",
stock: "Stock",
actions: "Actions",
},
actions: {
view: "View item",
edit: "Edit item",
delete: "Delete item",
},
},
detail: {
notFound: "Item not found",
labels: {
category: "Category",
stock: "Stock",
},
},
new: {
title: "New Item",
},
edit: {
title: "Edit Item",
notFound: "Item not found",
hasAssetsWarning: "This item has already assets assigned to it.",
},
form: {
nameLabel: "Name",
namePlaceholder: "Item name",
categoryLabel: "Category",
categoryPlaceholder: "Select a category",
stockLabel: "Stock",
stockPlaceholder: "0",
createSubmit: "Create Item",
updateSubmit: "Update Item",
},
delete: {
label: "Delete item",
pending: "Deleting...",
unknownError: "Unknown error",
},
actions: {
createSuccess: "Item created successfully!",
createFailure: "Error creating item",
updateSuccess: "Item updated successfully!",
updateFailure: "Failed to update item",
deleteSuccess: "Item deleted successfully!",
deleteFailure: "Failed to delete item",
duplicateName: "Item already exists",
notFound: "Item not found",
hasAssets: "Cannot delete item with assets",
hasStock: "Cannot delete item with stock",
invalidStock: "Invalid stock",
negativeStock: "Stock cannot be negative",
},
schema: {
nameRequired: "Name is required",
categoryRequired: "Category is required",
stockRequired: "Stock is required",
itemRequired: "Item is required",
},
})
expect(getDictionary("es").inventory.items).toEqual({
list: {
title: "Artículos",
addLabel: "Agregar artículo",
empty: "No se encontraron artículos.",
columns: {
name: "Nombre",
category: "Categoría",
assets: "Activos",
stock: "Stock",
actions: "Acciones",
},
actions: {
view: "Ver artículo",
edit: "Editar artículo",
delete: "Eliminar artículo",
},
},
detail: {
notFound: "Artículo no encontrado",
labels: {
category: "Categoría",
stock: "Stock",
},
},
new: {
title: "Nuevo artículo",
},
edit: {
title: "Editar artículo",
notFound: "Artículo no encontrado",
hasAssetsWarning: "Este artículo ya tiene activos asignados.",
},
form: {
nameLabel: "Nombre",
namePlaceholder: "Nombre del artículo",
categoryLabel: "Categoría",
categoryPlaceholder: "Selecciona una categoría",
stockLabel: "Stock",
stockPlaceholder: "0",
createSubmit: "Crear artículo",
updateSubmit: "Actualizar artículo",
},
delete: {
label: "Eliminar artículo",
pending: "Eliminando...",
unknownError: "Error desconocido",
},
actions: {
createSuccess: "Artículo creado correctamente",
createFailure: "Error al crear el artículo",
updateSuccess: "Artículo actualizado correctamente",
updateFailure: "Error al actualizar el artículo",
deleteSuccess: "Artículo eliminado correctamente",
deleteFailure: "Error al eliminar el artículo",
duplicateName: "El artículo ya existe",
notFound: "Artículo no encontrado",
hasAssets: "No se puede eliminar un artículo con activos",
hasStock: "No se puede eliminar un artículo con stock",
invalidStock: "Stock inválido",
negativeStock: "El stock no puede ser negativo",
},
schema: {
nameRequired: "El nombre es obligatorio",
categoryRequired: "La categoría es obligatoria",
stockRequired: "El stock es obligatorio",
itemRequired: "El artículo es obligatorio",
},
})
})
it("keeps dashboard home dictionary keys aligned across locales", () => {
expect(getDictionary("en").dashboardHome).toEqual({
heading: "Dashboard",