@base44/app-plugin-commerce 0.7.1 → 0.8.0

package/src/commerce/admin/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useOutlet } from "react-router-dom";
 import { Toaster } from "sonner";
 import AuthGuard from "./layout/AuthGuard";
 import AdminLayout from "./layout/AdminLayout";
@@ -7,50 +6,27 @@ import AdminRoutes from "./routes";
 import { SettingsProvider } from "./context/SettingsContext";
 import { BasePathProvider } from "./context/BasePathContext";
 
-export { default as AdminRoutes } from "./routes";
-
 /**
  * The store admin application.
  *
- * Mount it as a *layout route* in the app's own `src/App.jsx`: declare the few
- * screens that should be listed among the app's pages there, as literal `<Route>`
- * JSX, and hand everything deeper to `<AdminRoutes />` on a splat. Base44
- * discovers an app's pages by reading that file rather than running it, so a
- * route declared anywhere else is reachable by URL but never listed — and a
- * splat is skipped by discovery, which is what keeps the editors and the
- * settings tabs off the list while leaving them navigable.
- *
- *   <Route path="/store-admin" element={<AdminApp />}>
- *     <Route index element={<Dashboard />} />
- *     <Route path="orders" element={<OrdersList />} />
- *     …
- *     <Route path="*" element={<AdminRoutes />} />
- *   </Route>
+ * Mount inside your app's router:
+ *   <Route path="/store-admin/*" element={<AdminApp />} />
  *
  * If mounted somewhere other than /store-admin, pass the prefix:
- *   <Route path="/backoffice" element={<AdminApp basePath="/backoffice" />}>
- *
- * The providers belong here, above the outlet, and must not be repeated per
- * route: SettingsProvider fetches commerce.StoreSettings on mount, so wrapping
- * each route would cost a round trip and a remounted sidebar on every admin
- * navigation.
+ *   <Route path="/backoffice/*" element={<AdminApp basePath="/backoffice" />} />
  *
  * Requires an authenticated user with role "admin" (enforced by AuthGuard,
  * and independently by entity RLS + requireAdmin() in backend functions).
  */
 export default function AdminApp({ basePath = "/store-admin" }) {
-  // Installs from before the routes moved into App.jsx mount the whole admin
-  // behind one splat route (`<Route path="/store-admin/*" element={<AdminApp />} />`)
-  // and declare no children, so nothing ever fills the outlet. Fall back to the
-  // kit's own router there rather than drawing an empty page area under the
-  // sidebar; those apps keep working until an agent rewrites their App.jsx.
-  const outlet = useOutlet();
   return (
     <BasePathProvider value={basePath}>
       <Toaster richColors position="top-right" />
       <AuthGuard>
         <SettingsProvider>
-          <AdminLayout>{outlet ?? <AdminRoutes />}</AdminLayout>
+          <AdminLayout>
+            <AdminRoutes />
+          </AdminLayout>
         </SettingsProvider>
       </AuthGuard>
     </BasePathProvider>

package/src/commerce/admin/layout/AccessDenied.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Lock, ShieldAlert } from "lucide-react";
+import { t } from "../i18n";
 
 /**
  * Access screens for the admin.
@@ -21,29 +22,27 @@ export default function AccessDenied({ variant = "forbidden", email, onLogin, on
               <ShieldAlert className="h-6 w-6 text-destructive" />
             )}
           </div>
-          <CardTitle>{unauth ? "Sign in required" : "Admin access required"}</CardTitle>
+          <CardTitle>{unauth ? t("auth.sign_in_required") : t("auth.admin_required")}</CardTitle>
           <CardDescription>
             {unauth
               ? timedOut
-                ? "We couldn't confirm who you are. Sign in to continue — if this page is embedded in a preview pane, open it in its own browser tab first, since sign-in can't complete inside a frame."
-                : "You must sign in to access the store admin."
-              : "Your account does not have the admin role. Ask a store administrator to grant you access."}
+                ? t("auth.sign_in_timeout")
+                : t("auth.must_sign_in")
+              : t("auth.no_admin_role")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
           {unauth ? (
             <Button onClick={onLogin} className="w-full">
-              Sign in
+              {t("auth.sign_in")}
             </Button>
           ) : (
             <>
               {email && (
-                <p className="text-sm text-muted-foreground">
-                  Signed in as <span className="font-medium">{email}</span>
-                </p>
+                <p className="text-sm text-muted-foreground">{t("auth.signed_in_as", { email })}</p>
               )}
               <Button variant="outline" onClick={onLogout} className="w-full">
-                Sign out
+                {t("auth.sign_out")}
               </Button>
             </>
           )}

package/src/commerce/admin/layout/AuthGuard.jsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { Loader2 } from "lucide-react";
 import { base44 } from "../lib/api";
+import { t } from "../i18n";
 import AccessDenied from "./AccessDenied";
 
 const AuthContext = createContext(null);
@@ -55,7 +56,7 @@ export default function AuthGuard({ children }) {
     return (
       <div className="flex h-screen flex-col items-center justify-center gap-3">
         <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-        <p className="text-xs text-muted-foreground">Checking your access…</p>
+        <p className="text-xs text-muted-foreground">{t("auth.checking_access")}</p>
       </div>
     );
   }

package/src/commerce/admin/layout/Sidebar.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { NavLink, useLocation } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
 import { Badge } from "@/components/ui/badge";
 import {
   BadgePercent,
@@ -9,36 +9,38 @@ import {
   Settings,
   ShoppingCart,
   Sparkles,
+  Store,
   Users,
 } from "lucide-react";
 import { call } from "../lib/api";
 import { useAdminHref } from "../context/BasePathContext";
+import { t } from "../i18n";
 
 const NAV = [
-  { items: [{ label: "Dashboard", path: "", icon: LayoutDashboard, end: true }] },
+  { items: [{ label: t("routes.dashboard"), path: "", icon: LayoutDashboard, end: true }] },
   {
     items: [
-      { label: "Orders", path: "orders", icon: ShoppingCart, badge: "processing" },
-      { label: "Customers", path: "customers", icon: Users },
-      { label: "Reports", path: "reports", icon: BarChart3 },
+      { label: t("routes.orders"), path: "orders", icon: ShoppingCart, badge: "processing" },
+      { label: t("routes.customers"), path: "customers", icon: Users },
+      { label: t("routes.reports"), path: "reports", icon: BarChart3 },
     ],
   },
   {
-    title: "Products",
+    title: t("nav.products_group"),
     icon: Package,
     items: [
-      { label: "All Products", path: "products", end: true },
-      { label: "Categories", path: "products/categories" },
-      { label: "Reviews", path: "products/reviews" },
+      { label: t("nav.all_products"), path: "products", end: true },
+      { label: t("routes.categories"), path: "products/categories" },
+      { label: t("routes.reviews"), path: "products/reviews" },
     ],
   },
   {
-    title: "Marketing",
+    title: t("nav.marketing_group"),
     icon: BadgePercent,
-    items: [{ label: "Coupons", path: "coupons" }],
+    items: [{ label: t("routes.coupons"), path: "coupons" }],
   },
   {
-    items: [{ label: "Settings", path: "settings", icon: Settings }],
+    items: [{ label: t("routes.settings"), path: "settings", icon: Settings }],
   },
 ];
 
@@ -70,7 +72,7 @@ export default function Sidebar({ onNavigate, onOpenBot }) {
     <div className="flex h-full flex-col">
       <div className="flex h-14 items-center gap-2 border-b px-4">
         <Package className="h-5 w-5 text-primary" />
-        <span className="font-semibold">Store Management</span>
+        <span className="font-semibold">{t("nav.store_management")}</span>
       </div>
       <nav className="flex-1 space-y-4 overflow-y-auto p-3">
         {NAV.map((group, gi) => (
@@ -105,18 +107,27 @@ export default function Sidebar({ onNavigate, onOpenBot }) {
           </div>
         ))}
       </nav>
-      {onOpenBot && (
-        <div className="border-t p-3">
+      <div className="space-y-0.5 border-t p-3">
+        {/* The way back out — the storefront the merchant is managing. */}
+        <Link
+          to="/"
+          onClick={onNavigate}
+          className="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <Store className="h-4 w-4 shrink-0" />
+          <span className="flex-1">{t("nav.view_storefront")}</span>
+        </Link>
+        {onOpenBot && (
           <button
             type="button"
             onClick={onOpenBot}
             className="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
           >
             <Sparkles className="h-4 w-4 shrink-0 text-primary" />
-            <span className="flex-1 text-left">StoreAdmin bot</span>
+            <span className="flex-1 text-left">{t("nav.storeadmin_bot")}</span>
           </button>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }

package/src/commerce/admin/layout/Topbar.jsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ChevronRight, LogOut, Menu, UserCircle } from "lucide-react";
 import { base44 } from "../lib/api";
+import { t } from "../i18n";
 import { useAuth } from "./AuthGuard";
 import { useBasePath, useAdminHref } from "../context/BasePathContext";
 import { ADMIN_ROUTES } from "../routes";
@@ -30,7 +31,7 @@ function useBreadcrumbs() {
   const base = useBasePath();
   const rel = pathname.startsWith(base) ? pathname.slice(base.length) : pathname;
   const segs = rel.split("/").filter(Boolean);
-  const crumbs = [{ label: "Dashboard", path: "" }];
+  const crumbs = [{ label: t("routes.dashboard"), path: "" }];
   segs.forEach((seg, i) => {
     const prefix = segs.slice(0, i + 1).join("/");
     const route = matchRoute(prefix);
@@ -80,12 +81,12 @@ export default function Topbar({ onMenuClick }) {
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
           <DropdownMenuLabel className="font-normal">
-            <div className="text-sm font-medium">{user?.full_name || "Administrator"}</div>
+            <div className="text-sm font-medium">{user?.full_name || t("auth.administrator")}</div>
             <div className="text-xs text-muted-foreground">{user?.email}</div>
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => base44.auth.logout()}>
-            <LogOut className="mr-2 h-4 w-4" /> Sign out
+            <LogOut className="mr-2 h-4 w-4" /> {t("auth.sign_out")}
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>

package/src/commerce/admin/lib/api.js

@@ -9,6 +9,7 @@
  */
 import { base44 } from "@/api/base44Client";
 import { toast } from "sonner";
+import { t } from "../i18n";
 
 /**
  * Invoke a backend function using the template's `{action, ...payload}` convention.
@@ -31,7 +32,7 @@ export async function call(fn, action, payload = {}, opts = {}) {
     const data = res?.data;
     if (data && typeof data === "object" && "success" in data) {
       if (data.success === false) {
-        throw Object.assign(new Error(data.error || "Request failed"), {
+        throw Object.assign(new Error(data.error || t("common.request_failed")), {
           code: data.code,
           details: data,
         });
@@ -41,7 +42,7 @@ export async function call(fn, action, payload = {}, opts = {}) {
     return data;
   } catch (err) {
     const body = err.response?.data;
-    const message = body?.error || err.message || "Request failed";
+    const message = body?.error || err.message || t("common.request_failed");
     const wrapped = Object.assign(new Error(message), {
       code: body?.code || err.code,
       details: body || err.details || null,

package/src/commerce/admin/lib/constants.js

@@ -1,56 +1,57 @@
-/** Shared enums, labels and badge colors for the admin UI. */
+/** Shared enums, labels and badge colors for the admin UI. Labels come from i18n. */
+import { t } from "../i18n";
 
 export const ORDER_STATUSES = [
-  { value: "pending", label: "Pending payment", color: "bg-amber-100 text-amber-800 border-amber-200" },
-  { value: "processing", label: "Processing", color: "bg-green-100 text-green-800 border-green-200" },
-  { value: "on-hold", label: "On hold", color: "bg-orange-100 text-orange-800 border-orange-200" },
-  { value: "completed", label: "Completed", color: "bg-blue-100 text-blue-800 border-blue-200" },
-  { value: "cancelled", label: "Cancelled", color: "bg-gray-100 text-gray-700 border-gray-200" },
-  { value: "refunded", label: "Refunded", color: "bg-slate-100 text-slate-700 border-slate-200" },
-  { value: "failed", label: "Failed", color: "bg-red-100 text-red-800 border-red-200" },
+  { value: "pending", label: t("status.order.pending"), color: "bg-amber-100 text-amber-800 border-amber-200" },
+  { value: "processing", label: t("status.order.processing"), color: "bg-green-100 text-green-800 border-green-200" },
+  { value: "on-hold", label: t("status.order.on-hold"), color: "bg-orange-100 text-orange-800 border-orange-200" },
+  { value: "completed", label: t("status.order.completed"), color: "bg-blue-100 text-blue-800 border-blue-200" },
+  { value: "cancelled", label: t("status.order.cancelled"), color: "bg-gray-100 text-gray-700 border-gray-200" },
+  { value: "refunded", label: t("status.order.refunded"), color: "bg-slate-100 text-slate-700 border-slate-200" },
+  { value: "failed", label: t("status.order.failed"), color: "bg-red-100 text-red-800 border-red-200" },
 ];
 
 export const PRODUCT_STATUSES = [
-  { value: "draft", label: "Draft", color: "bg-gray-100 text-gray-700 border-gray-200" },
-  { value: "pending", label: "Pending review", color: "bg-amber-100 text-amber-800 border-amber-200" },
-  { value: "private", label: "Private", color: "bg-slate-100 text-slate-700 border-slate-200" },
-  { value: "publish", label: "Published", color: "bg-green-100 text-green-800 border-green-200" },
+  { value: "draft", label: t("status.product.draft"), color: "bg-gray-100 text-gray-700 border-gray-200" },
+  { value: "pending", label: t("status.product.pending"), color: "bg-amber-100 text-amber-800 border-amber-200" },
+  { value: "private", label: t("status.product.private"), color: "bg-slate-100 text-slate-700 border-slate-200" },
+  { value: "publish", label: t("status.product.publish"), color: "bg-green-100 text-green-800 border-green-200" },
 ];
 
 export const STOCK_STATUSES = [
-  { value: "instock", label: "In stock", color: "bg-green-100 text-green-800 border-green-200" },
-  { value: "outofstock", label: "Out of stock", color: "bg-red-100 text-red-800 border-red-200" },
-  { value: "onbackorder", label: "On backorder", color: "bg-amber-100 text-amber-800 border-amber-200" },
+  { value: "instock", label: t("status.stock.instock"), color: "bg-green-100 text-green-800 border-green-200" },
+  { value: "outofstock", label: t("status.stock.outofstock"), color: "bg-red-100 text-red-800 border-red-200" },
+  { value: "onbackorder", label: t("status.stock.onbackorder"), color: "bg-amber-100 text-amber-800 border-amber-200" },
 ];
 
 export const BACKORDER_OPTIONS = [
-  { value: "no", label: "Do not allow" },
-  { value: "notify", label: "Allow, but notify customer" },
-  { value: "yes", label: "Allow" },
+  { value: "no", label: t("backorder.no") },
+  { value: "notify", label: t("backorder.notify") },
+  { value: "yes", label: t("backorder.yes") },
 ];
 
 export const TAX_STATUSES = [
-  { value: "taxable", label: "Taxable" },
-  { value: "none", label: "None" },
+  { value: "taxable", label: t("tax_status.taxable") },
+  { value: "none", label: t("tax_status.none") },
 ];
 
 export const COUPON_TYPES = [
-  { value: "percent", label: "Percentage discount" },
-  { value: "fixed_cart", label: "Fixed cart discount" },
-  { value: "fixed_product", label: "Fixed product discount" },
+  { value: "percent", label: t("coupon_type.percent") },
+  { value: "fixed_cart", label: t("coupon_type.fixed_cart") },
+  { value: "fixed_product", label: t("coupon_type.fixed_product") },
 ];
 
 export const REVIEW_STATUSES = [
-  { value: "approved", label: "Approved", color: "bg-green-100 text-green-800 border-green-200" },
-  { value: "hold", label: "Pending", color: "bg-amber-100 text-amber-800 border-amber-200" },
-  { value: "spam", label: "Spam", color: "bg-red-100 text-red-800 border-red-200" },
-  { value: "trash", label: "Trash", color: "bg-gray-100 text-gray-700 border-gray-200" },
+  { value: "approved", label: t("status.review.approved"), color: "bg-green-100 text-green-800 border-green-200" },
+  { value: "hold", label: t("status.review.hold"), color: "bg-amber-100 text-amber-800 border-amber-200" },
+  { value: "spam", label: t("status.review.spam"), color: "bg-red-100 text-red-800 border-red-200" },
+  { value: "trash", label: t("status.review.trash"), color: "bg-gray-100 text-gray-700 border-gray-200" },
 ];
 
 export const WEBHOOK_STATUSES = [
-  { value: "active", label: "Active", color: "bg-green-100 text-green-800 border-green-200" },
-  { value: "paused", label: "Paused", color: "bg-amber-100 text-amber-800 border-amber-200" },
-  { value: "disabled", label: "Disabled", color: "bg-gray-100 text-gray-700 border-gray-200" },
+  { value: "active", label: t("status.webhook.active"), color: "bg-green-100 text-green-800 border-green-200" },
+  { value: "paused", label: t("status.webhook.paused"), color: "bg-amber-100 text-amber-800 border-amber-200" },
+  { value: "disabled", label: t("status.webhook.disabled"), color: "bg-gray-100 text-gray-700 border-gray-200" },
 ];
 
 export const WEBHOOK_TOPICS = [
@@ -66,19 +67,19 @@ export const WEBHOOK_TOPICS = [
  * `managed_by_auth` emails are handled by Base44 auth, not this template.
  */
 export const EMAIL_TYPES = [
-  { id: "new_order", label: "New order", recipient: "admin" },
-  { id: "cancelled_order", label: "Cancelled order", recipient: "admin" },
-  { id: "failed_order", label: "Failed order", recipient: "admin" },
-  { id: "low_stock", label: "Low stock", recipient: "admin", stock: true },
-  { id: "out_of_stock", label: "Out of stock", recipient: "admin", stock: true },
-  { id: "on_hold_order", label: "Order on-hold", recipient: "customer" },
-  { id: "processing_order", label: "Processing order", recipient: "customer" },
-  { id: "completed_order", label: "Completed order", recipient: "customer" },
-  { id: "refunded_order", label: "Refunded order", recipient: "customer" },
-  { id: "customer_invoice", label: "Customer invoice / Order details", recipient: "customer", manual: true },
-  { id: "customer_note", label: "Customer note", recipient: "customer" },
-  { id: "reset_password", label: "Reset password", recipient: "customer", managed_by_auth: true },
-  { id: "new_account", label: "New account", recipient: "customer", managed_by_auth: true },
+  { id: "new_order", label: t("email_type.new_order"), recipient: "admin" },
+  { id: "cancelled_order", label: t("email_type.cancelled_order"), recipient: "admin" },
+  { id: "failed_order", label: t("email_type.failed_order"), recipient: "admin" },
+  { id: "low_stock", label: t("email_type.low_stock"), recipient: "admin", stock: true },
+  { id: "out_of_stock", label: t("email_type.out_of_stock"), recipient: "admin", stock: true },
+  { id: "on_hold_order", label: t("email_type.on_hold_order"), recipient: "customer" },
+  { id: "processing_order", label: t("email_type.processing_order"), recipient: "customer" },
+  { id: "completed_order", label: t("email_type.completed_order"), recipient: "customer" },
+  { id: "refunded_order", label: t("email_type.refunded_order"), recipient: "customer" },
+  { id: "customer_invoice", label: t("email_type.customer_invoice"), recipient: "customer", manual: true },
+  { id: "customer_note", label: t("email_type.customer_note"), recipient: "customer" },
+  { id: "reset_password", label: t("email_type.reset_password"), recipient: "customer", managed_by_auth: true },
+  { id: "new_account", label: t("email_type.new_account"), recipient: "customer", managed_by_auth: true },
 ];
 
 export const CURRENCIES = [

package/src/commerce/admin/lib/format.js

@@ -1,17 +1,18 @@
-/** Date/text formatting helpers. */
+/** Date/text formatting helpers. Dates render in the admin's i18n locale. */
+import { locale } from "../i18n";
 
 export function formatDate(iso) {
   if (!iso) return "—";
   const d = new Date(iso);
   if (isNaN(d)) return "—";
-  return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+  return d.toLocaleDateString(locale, { year: "numeric", month: "short", day: "numeric" });
 }
 
 export function formatDateTime(iso) {
   if (!iso) return "—";
   const d = new Date(iso);
   if (isNaN(d)) return "—";
-  return d.toLocaleString(undefined, {
+  return d.toLocaleString(locale, {
     year: "numeric",
     month: "short",
     day: "numeric",

package/src/commerce/admin/lib/paths.js

@@ -1,9 +1,8 @@
 /**
  * Mount-path handling for the admin app.
  *
- * Installs from before the routes moved into App.jsx mount the admin with a splat
- * route — `<Route path="/store-admin/*">` — and both halves of that pattern leak
- * into places they shouldn't: the `basePath` prop
+ * The admin is mounted with a splat route — `<Route path="/store-admin/*">` — and both
+ * halves of that pattern leak into places they shouldn't: the `basePath` prop
  * gets the pattern pasted in verbatim, and the literal URL `/store-admin/*` gets
  * opened (pattern copied into the address bar, or a nav link built from the
  * route table). Neither is a real page, so both are normalized here rather than

package/src/commerce/admin/pages/Dashboard.jsx

@@ -15,6 +15,7 @@ import {
 import { BarChart3, PackagePlus, Plus, ShoppingCart, TicketPercent, TrendingUp, AlertTriangle } from "lucide-react";
 
 import { call, base44 } from "../lib/api";
+import { t } from "../i18n";
 import useAsync from "../hooks/useAsync";
 import useRealtime from "../hooks/useRealtime";
 import useMoney from "../hooks/useMoney";
@@ -85,23 +86,23 @@ export default function Dashboard() {
     <div className="space-y-6">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div>
-          <h1 className="text-xl font-semibold tracking-tight">Dashboard</h1>
-          <p className="text-sm text-muted-foreground">Your store at a glance.</p>
+          <h1 className="text-xl font-semibold tracking-tight">{t("routes.dashboard")}</h1>
+          <p className="text-sm text-muted-foreground">{t("dashboard.subtitle")}</p>
         </div>
         <div className="flex gap-2">
           <Button variant="outline" size="sm" asChild>
             <Link to={href("products/new")}>
-              <PackagePlus className="mr-1.5 h-4 w-4" /> Add product
+              <PackagePlus className="mr-1.5 h-4 w-4" /> {t("routes.products_new")}
             </Link>
           </Button>
           <Button variant="outline" size="sm" asChild>
             <Link to={href("coupons/new")}>
-              <TicketPercent className="mr-1.5 h-4 w-4" /> Create coupon
+              <TicketPercent className="mr-1.5 h-4 w-4" /> {t("dashboard.create_coupon")}
             </Link>
           </Button>
           <Button variant="outline" size="sm" asChild>
             <Link to={href("reports")}>
-              <BarChart3 className="mr-1.5 h-4 w-4" /> View reports
+              <BarChart3 className="mr-1.5 h-4 w-4" /> {t("dashboard.view_reports")}
             </Link>
           </Button>
         </div>
@@ -110,28 +111,28 @@ export default function Dashboard() {
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <StatCard
           icon={TrendingUp}
-          label="Net sales today"
+          label={t("dashboard.net_sales_today")}
           value={format(asMoneyNumber(s.sales_today))}
           loading={summary.loading}
         />
         <StatCard
           icon={BarChart3}
-          label="Net sales this month"
+          label={t("dashboard.net_sales_month")}
           value={format(asMoneyNumber(s.sales_month))}
           loading={summary.loading}
         />
         <StatCard
           icon={ShoppingCart}
-          label="Awaiting processing"
+          label={t("dashboard.awaiting_processing")}
           value={processingCount}
-          hint="orders to fulfill"
+          hint={t("dashboard.orders_to_fulfill")}
           loading={summary.loading}
         />
         <StatCard
           icon={AlertTriangle}
-          label="Low stock"
+          label={t("dashboard.low_stock")}
           value={s.low_stock_count ?? lowStock.length}
-          hint="products at or below threshold"
+          hint={t("dashboard.low_stock_hint")}
           loading={summary.loading && stock.loading}
         />
       </div>
@@ -141,7 +142,7 @@ export default function Dashboard() {
         {ORDER_STATUSES.map((st) => (
           <Link key={st.value} to={href(`orders?status=${st.value}`)}>
             <Badge variant="outline" className={`${st.color} cursor-pointer`}>
-              {st.label}: {ordersByStatus[st.value] || 0}
+              {t("dashboard.status_count", { status: st.label, count: ordersByStatus[st.value] || 0 })}
             </Badge>
           </Link>
         ))}
@@ -151,7 +152,7 @@ export default function Dashboard() {
         {/* Latest orders */}
         <Card className="xl:col-span-2">
           <CardHeader className="pb-2">
-            <CardTitle className="text-base">Latest orders</CardTitle>
+            <CardTitle className="text-base">{t("dashboard.latest_orders")}</CardTitle>
           </CardHeader>
           <CardContent className="p-0">
             {latest.loading ? (
@@ -164,19 +165,19 @@ export default function Dashboard() {
               <div className="py-10">
                 <EmptyState
                   icon={ShoppingCart}
-                  title="No orders yet"
-                  description="Orders will appear here as soon as they come in."
+                  title={t("dashboard.no_orders_title")}
+                  description={t("dashboard.no_orders_description")}
                 />
               </div>
             ) : (
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>Order</TableHead>
-                    <TableHead>Date</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Customer</TableHead>
-                    <TableHead className="text-right">Total</TableHead>
+                    <TableHead>{t("routes.order")}</TableHead>
+                    <TableHead>{t("dashboard.date")}</TableHead>
+                    <TableHead>{t("common.status")}</TableHead>
+                    <TableHead>{t("routes.customer")}</TableHead>
+                    <TableHead className="text-right">{t("dashboard.total")}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -204,7 +205,7 @@ export default function Dashboard() {
         {/* Low stock */}
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-base">Low on stock</CardTitle>
+            <CardTitle className="text-base">{t("dashboard.low_on_stock")}</CardTitle>
           </CardHeader>
           <CardContent className="p-0">
             {stock.loading ? (
@@ -215,7 +216,7 @@ export default function Dashboard() {
               </div>
             ) : lowStock.length === 0 ? (
               <div className="py-10">
-                <EmptyState icon={Plus} title="All stocked up" description="No products are low on stock." />
+                <EmptyState icon={Plus} title={t("dashboard.all_stocked_title")} description={t("dashboard.all_stocked_description")} />
               </div>
             ) : (
               <ul className="divide-y">
@@ -227,10 +228,10 @@ export default function Dashboard() {
                     >
                       <span className="min-w-0">
                         <span className="block truncate text-sm font-medium">{p.name}</span>
-                        {p.sku && <span className="text-xs text-muted-foreground">SKU: {p.sku}</span>}
+                        {p.sku && <span className="text-xs text-muted-foreground">{t("dashboard.sku", { sku: p.sku })}</span>}
                       </span>
                       <Badge variant="outline" className="ml-2 shrink-0 bg-amber-100 text-amber-800 border-amber-200">
-                        {p.stock_quantity ?? 0} left
+                        {t("dashboard.n_left", { count: p.stock_quantity ?? 0 })}
                       </Badge>
                     </Link>
                   </li>