diff --git a/web/dashboard/src/app/[locale]/(fullscreen)/pos-classic/layout.tsx b/web/dashboard/src/app/[locale]/(fullscreen)/pos-classic/layout.tsx
deleted file mode 100644
index 0690187..0000000
--- a/web/dashboard/src/app/[locale]/(fullscreen)/pos-classic/layout.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { useLocale } from "next-intl";
-import { Sidebar } from "@/components/layout/sidebar";
-import { Topbar } from "@/components/layout/topbar";
-import { CafeThemeProvider } from "@/components/theme/cafe-theme-provider";
-
-/**
- * Classic POS route layout — wraps the terminal in the standard dashboard
- * chrome (collapsible sidebar + topbar) but keeps the main content area
- * overflow-hidden so PosScreen can manage its own internal scrolling.
- */
-export default function PosClassicLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const locale = useLocale();
-  const isRtl = locale !== "en";
-
-  const mainColumn = (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-      <Topbar />
-      <main className="min-h-0 flex-1 overflow-hidden bg-background p-3 md:p-4">
-        {children}
-      </main>
-    </div>
-  );
-
-  return (
-    <CafeThemeProvider>
-      <div
-        className="flex h-screen min-h-0 overflow-hidden bg-background"
-        dir={isRtl ? "rtl" : "ltr"}
-      >
-        {isRtl ? (
-          <>
-            <Sidebar side="right" />
-            {mainColumn}
-          </>
-        ) : (
-          <>
-            <Sidebar side="left" />
-            {mainColumn}
-          </>
-        )}
-      </div>
-    </CafeThemeProvider>
-  );
-}
diff --git a/web/dashboard/src/app/[locale]/(fullscreen)/pos-classic/page.tsx b/web/dashboard/src/app/[locale]/(fullscreen)/pos-classic/page.tsx
deleted file mode 100644
index 3a52fc3..0000000
--- a/web/dashboard/src/app/[locale]/(fullscreen)/pos-classic/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Suspense } from "react";
-import { PosScreen } from "@/components/pos/pos-screen";
-
-/** Classic POS terminal — chrome (sidebar + topbar) is provided by layout.tsx.
- *  Kept as a fallback while POS v2 (at /pos) is piloted. */
-export default function PosClassicPage() {
-  return (
-    <Suspense fallback={null}>
-      <PosScreen />
-    </Suspense>
-  );
-}
diff --git a/web/dashboard/src/app/[locale]/(fullscreen)/pos/layout.tsx b/web/dashboard/src/app/[locale]/(fullscreen)/pos/layout.tsx
index 6b107e1..370b590 100644
--- a/web/dashboard/src/app/[locale]/(fullscreen)/pos/layout.tsx
+++ b/web/dashboard/src/app/[locale]/(fullscreen)/pos/layout.tsx
@@ -6,7 +6,6 @@ import { CafeThemeProvider } from "@/components/theme/cafe-theme-provider";
  * POS v2 layout — the redesigned terminal is full-screen (its own topbar +
  * order ticket), so no dashboard sidebar/topbar chrome here. Café theming
  * still applies. Auth guarding comes from the parent (fullscreen) layout.
- * The classic POS keeps its chrome under /pos-classic.
  */
 export default function PosLayout({ children }: { children: React.ReactNode }) {
   return <CafeThemeProvider>{children}</CafeThemeProvider>;
diff --git a/web/dashboard/src/app/[locale]/(fullscreen)/pos/page.tsx b/web/dashboard/src/app/[locale]/(fullscreen)/pos/page.tsx
index 6e1d92d..6926072 100644
--- a/web/dashboard/src/app/[locale]/(fullscreen)/pos/page.tsx
+++ b/web/dashboard/src/app/[locale]/(fullscreen)/pos/page.tsx
@@ -1,8 +1,7 @@
 import { Pos2Screen } from "@/components/pos2/pos2-screen";
 
-/** Default POS terminal — redesigned v2, wired to live data (menu, tables,
- *  orders, payments) via the shared cart store + offline submit pipeline.
- *  The classic POS remains available at /[locale]/pos-classic. */
+/** POS terminal — wired to live data (menu, tables, orders, payments) via the
+ *  shared cart store + offline submit pipeline. */
 export default function PosPage() {
   return <Pos2Screen />;
 }
diff --git a/web/dashboard/src/components/pos/pos-pay-panel.tsx b/web/dashboard/src/components/pos/pos-pay-panel.tsx
deleted file mode 100644
index 50e3420..0000000
--- a/web/dashboard/src/components/pos/pos-pay-panel.tsx
+++ /dev/null
@@ -1,682 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useTranslations } from "next-intl";
-import * as signalR from "@microsoft/signalr";
-import { apiGet, apiPost, ApiClientError } from "@/lib/api/client";
-import { printErrorMessage, printReceipt } from "@/lib/api/print";
-import { requestPosPayment, posDeviceErrorMessage } from "@/lib/api/pos-device";
-import { PosSlipModal } from "@/components/pos/pos-slip-modal";
-import type { Customer, Order, Table, TableBoardItem } from "@/lib/api/types";
-import { formatCurrency, formatNumber } from "@/lib/format";
-import { formatPosOrderLabel } from "@/lib/pos-order-label";
-import { formatOrderNumber } from "@/lib/order-number";
-import { PosTableBoard } from "@/components/pos/pos-table-board";
-import { Can } from "@/components/auth/can";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { LabeledField } from "@/components/ui/labeled-field";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { cn } from "@/lib/utils";
-import { useCafeSettings } from "@/lib/hooks/use-cafe-settings";
-import { confirmPayLabel } from "@/lib/pos-confirm-pay-label";
-import { useConfirm } from "@/components/providers/confirm-provider";
-
-type PaymentRow = {
-  method: "Cash" | "Card" | "Credit";
-  amount: string;
-};
-
-type BranchPrintSettings = {
-  receiptHeader?: string | null;
-  receiptFooter?: string | null;
-  wifiPassword?: string | null;
-  paperWidthMm?: number;
-};
-
-type PosPayPanelProps = {
-  cafeId: string;
-  numberLocale: string;
-  branchId?: string | null;
-};
-
-export function PosPayPanel({ cafeId, numberLocale, branchId = null }: PosPayPanelProps) {
-  const t = useTranslations("pos");
-  const tPrint = useTranslations("print");
-  const tDashboard = useTranslations("dashboard");
-  const queryClient = useQueryClient();
-  const confirmDialog = useConfirm();
-  const { data: cafeSettings } = useCafeSettings(cafeId);
-  const cafeName = cafeSettings?.name ?? tDashboard("cafeName");
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [selectedTableId, setSelectedTableId] = useState<string | null>(null);
-  const [filterTableId, setFilterTableId] = useState<string | null>(null);
-  const [search, setSearch] = useState("");
-  const [debouncedSearch, setDebouncedSearch] = useState("");
-  const [payMessage, setPayMessage] = useState<string | null>(null);
-  const [cancelReason, setCancelReason] = useState("");
-  const [receiptOrder, setReceiptOrder] = useState<Order | null>(null);
-  const printSettingsBranchId = receiptOrder?.branchId ?? branchId ?? null;
-  const [lastPaidOrderId, setLastPaidOrderId] = useState<string | null>(null);
-  const [paymentRows, setPaymentRows] = useState<PaymentRow[]>([
-    { method: "Cash", amount: "" },
-  ]);
-  const [loyaltyRedeem, setLoyaltyRedeem] = useState(0);
-
-  const apiBase = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:5080";
-
-  useEffect(() => {
-    const id = setTimeout(() => setDebouncedSearch(search.trim()), 300);
-    return () => clearTimeout(id);
-  }, [search]);
-
-  const { data: openOrders = [], isLoading } = useQuery({
-    queryKey: ["orders-open", cafeId, debouncedSearch],
-    queryFn: () => {
-      const qs = debouncedSearch
-        ? `?search=${encodeURIComponent(debouncedSearch)}`
-        : "";
-      return apiGet<Order[]>(`/api/cafes/${cafeId}/orders/open${qs}`);
-    },
-    enabled: !!cafeId,
-    refetchInterval: 15_000,
-  });
-
-  const { data: tables = [] } = useQuery({
-    queryKey: ["tables", cafeId],
-    queryFn: () => apiGet<Table[]>(`/api/cafes/${cafeId}/tables`),
-    enabled: !!cafeId,
-  });
-
-  const { data: printSettings } = useQuery({
-    queryKey: ["branch-print-settings", cafeId, printSettingsBranchId],
-    queryFn: () =>
-      apiGet<BranchPrintSettings>(
-        `/api/cafes/${cafeId}/branches/${printSettingsBranchId}/print-settings`
-      ),
-    enabled: !!cafeId && !!printSettingsBranchId,
-    staleTime: 5 * 60 * 1000,
-  });
-
-  const displayedOrders = useMemo(() => {
-    if (!filterTableId) return openOrders;
-    return openOrders.filter((o) => o.tableId === filterTableId);
-  }, [openOrders, filterTableId]);
-
-  useEffect(() => {
-    if (!cafeId) return;
-    const token =
-      typeof window !== "undefined" ? localStorage.getItem("meezi_access_token") : null;
-    const connection = new signalR.HubConnectionBuilder()
-      .withUrl(`${apiBase}/hubs/kds`, { accessTokenFactory: () => token ?? "" })
-      .withAutomaticReconnect()
-      .build();
-    connection
-      .start()
-      .then(() => connection.invoke("JoinCafe", cafeId))
-      .catch(() => undefined);
-    const refresh = () => {
-      queryClient.invalidateQueries({ queryKey: ["orders-open", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["tables-board", cafeId] });
-    };
-    connection.on("TableStatusChanged", refresh);
-    connection.on("OrderStatusChanged", refresh);
-    return () => {
-      void connection.stop();
-    };
-  }, [cafeId, apiBase, queryClient]);
-
-  const selectOrder = (order: Order, tableId?: string | null) => {
-    setSelectedId(order.id);
-    setSelectedTableId(tableId ?? order.tableId ?? null);
-    setPayMessage(null);
-  };
-
-  const handleTableSelect = (table: TableBoardItem, activeOrder: Order | null) => {
-    setFilterTableId(table.id);
-    setSelectedTableId(table.id);
-    if (activeOrder) {
-      selectOrder(activeOrder, table.id);
-      return;
-    }
-    setSelectedId(null);
-    setPayMessage(t("noOrderOnTable"));
-  };
-
-  const selected = openOrders.find((o) => o.id === selectedId) ?? null;
-
-  const remaining = useMemo(() => {
-    if (!selected) return 0;
-    return Math.max(0, selected.total - (selected.paidAmount ?? 0));
-  }, [selected]);
-
-  const { data: payCustomer } = useQuery({
-    queryKey: ["customer", cafeId, selected?.customerId],
-    queryFn: () =>
-      apiGet<Customer>(`/api/cafes/${cafeId}/customers/${selected!.customerId}`),
-    enabled: !!cafeId && !!selected?.customerId,
-  });
-
-  const maxLoyaltyRedeem = useMemo(() => {
-    if (!payCustomer || !selected) return 0;
-    const byDue = Math.floor(remaining / 100);
-    return Math.min(payCustomer.loyaltyPoints, byDue);
-  }, [payCustomer, selected, remaining]);
-
-  const loyaltyDiscount = loyaltyRedeem * 100;
-  const effectiveRemaining = Math.max(0, remaining - loyaltyDiscount);
-
-  useEffect(() => {
-    setLoyaltyRedeem(0);
-    setCancelReason("");
-  }, [selected?.id]);
-
-  useEffect(() => {
-    if (!selected) return;
-    setPaymentRows([{ method: "Cash", amount: String(effectiveRemaining) }]);
-  }, [selected?.id, selected?.total, selected?.paidAmount, effectiveRemaining]);
-
-  const payOrder = useMutation({
-    mutationFn: async (order: Order) => {
-      const payments = paymentRows
-        .map((row) => ({
-          method: row.method,
-          amount: parseFloat(row.amount.replace(/,/g, "")) || 0,
-        }))
-        .filter((p) => p.amount > 0);
-
-      if (payments.length === 0) throw new Error("no payments");
-
-      const cardTotal = payments
-        .filter((p) => p.method === "Card")
-        .reduce((s, p) => s + p.amount, 0);
-
-      const payBranchId = order.branchId ?? branchId;
-      if (cardTotal > 0 && payBranchId) {
-        await requestPosPayment(cafeId, payBranchId, order.id, cardTotal);
-      }
-
-      return apiPost(`/api/cafes/${cafeId}/orders/${order.id}/payments`, {
-        payments,
-        loyaltyPointsToRedeem: loyaltyRedeem > 0 ? loyaltyRedeem : undefined,
-      });
-    },
-    onSuccess: async (_data, order) => {
-      setPayMessage(t("paySuccess"));
-      setLastPaidOrderId(order.id);
-      try {
-        const paid = await apiGet<Order>(`/api/cafes/${cafeId}/orders/${order!.id}`);
-        setReceiptOrder(paid);
-      } catch {
-        setReceiptOrder(order ?? null);
-      }
-      setSelectedId(null);
-      setSelectedTableId(null);
-      setFilterTableId(null);
-      setSearch("");
-      setPaymentRows([{ method: "Cash", amount: "" }]);
-      setLoyaltyRedeem(0);
-      queryClient.invalidateQueries({ queryKey: ["orders-open", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["orders-live", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["tables-board", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["reservations", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["customer", cafeId] });
-    },
-    onError: (err) => {
-      if (err instanceof ApiClientError) {
-        if (err.code.startsWith("POS_DEVICE")) {
-          setPayMessage(posDeviceErrorMessage(err, t));
-          return;
-        }
-        if (err.code === "NO_OPEN_SHIFT") {
-          setPayMessage(t("payNeedsOpenShift"));
-          return;
-        }
-        if (err.code === "LOYALTY_NO_CUSTOMER") {
-          setPayMessage(t("loyaltyNoCustomer"));
-          return;
-        }
-        if (err.code === "LOYALTY_INSUFFICIENT_POINTS") {
-          setPayMessage(t("loyaltyInsufficient"));
-          return;
-        }
-        setPayMessage(err.message || t("payError"));
-        return;
-      }
-      setPayMessage(t("payError"));
-    },
-  });
-
-  const cancelOrder = useMutation({
-    mutationFn: ({ orderId, reason }: { orderId: string; reason: string }) =>
-      apiPost(`/api/cafes/${cafeId}/orders/${orderId}/cancel`, {
-        reason: reason.trim() || undefined,
-      }),
-    onSuccess: () => {
-      setPayMessage(t("cancelOrderSuccess"));
-      setCancelReason("");
-      setSelectedId(null);
-      setSelectedTableId(null);
-      setFilterTableId(null);
-      setPaymentRows([{ method: "Cash", amount: "" }]);
-      queryClient.invalidateQueries({ queryKey: ["orders-open", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["orders-live", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["tables-board", cafeId] });
-    },
-    onError: (err) => {
-      if (err instanceof ApiClientError) {
-        if (err.code === "ORDER_HAS_PAYMENTS") {
-          setPayMessage(t("cancelOrderHasPayments"));
-          return;
-        }
-        setPayMessage(err.message || t("cancelOrderError"));
-        return;
-      }
-      setPayMessage(t("cancelOrderError"));
-    },
-  });
-
-  const paymentSum = paymentRows.reduce(
-    (s, row) => s + (parseFloat(row.amount.replace(/,/g, "")) || 0),
-    0
-  );
-  const canPay =
-    selected && paymentSum > 0 && paymentSum <= effectiveRemaining + 0.01;
-
-  const payButtonLabel = confirmPayLabel(paymentRows, t);
-
-  const thermalPrint = useMutation({
-    mutationFn: (orderId: string) => printReceipt(cafeId, orderId),
-    onSuccess: () => setPayMessage(tPrint("success")),
-    onError: (err) => setPayMessage(printErrorMessage(err, tPrint)),
-  });
-
-  return (
-    <div className="flex h-full min-h-0 w-full gap-4 overflow-hidden">
-      <Card className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-        <CardHeader className="shrink-0 space-y-3 pb-2">
-          <CardTitle className="text-base">{t("openOrders")}</CardTitle>
-          <p className="text-xs text-muted-foreground">{t("payOpenOrdersHint")}</p>
-
-          <PosTableBoard
-            cafeId={cafeId}
-            numberLocale={numberLocale}
-            branchId={branchId}
-            mode="pay"
-            selectedTableId={selectedTableId}
-            selectedOrderId={selectedId}
-            onSelectTable={handleTableSelect}
-          />
-
-          <LabeledField label={t("selectTable")} htmlFor="pay-table-filter">
-            <select
-              id="pay-table-filter"
-              className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
-              value={filterTableId ?? ""}
-              onChange={(e) => {
-                const id = e.target.value || null;
-                setFilterTableId(id);
-                setSelectedTableId(id);
-                if (!id) {
-                  setSelectedId(null);
-                  setPayMessage(null);
-                  return;
-                }
-                void (async () => {
-                  try {
-                    const order = await apiGet<Order>(
-                      `/api/cafes/${cafeId}/tables/${id}/active-order`
-                    );
-                    selectOrder(order, id);
-                  } catch {
-                    const match = openOrders.find((o) => o.tableId === id);
-                    if (match) selectOrder(match, id);
-                    else {
-                      setSelectedId(null);
-                      setPayMessage(t("noOrderOnTable"));
-                    }
-                  }
-                })();
-              }}
-            >
-              <option value="">{t("allTables")}</option>
-              {tables?.map((tbl) => (
-                <option key={tbl.id} value={tbl.id}>
-                  {t("table")} {tbl.number}
-                </option>
-              ))}
-            </select>
-          </LabeledField>
-
-          <div className="space-y-1">
-            <p className="text-xs font-medium text-muted-foreground">
-              {t("payPickByName")}
-            </p>
-            <Input
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder={t("searchOpenOrder")}
-              className="h-9"
-            />
-          </div>
-        </CardHeader>
-        <CardContent className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-4 pt-0">
-          {payMessage && !selected ? (
-            <p className="mb-2 text-center text-sm text-amber-700">{payMessage}</p>
-          ) : null}
-          {isLoading ? (
-            <p className="text-sm text-muted-foreground">...</p>
-          ) : displayedOrders.length === 0 ? (
-            <p className="text-sm text-muted-foreground">
-              {filterTableId ? t("noOpenOrdersOnTable") : t("noOpenOrders")}
-            </p>
-          ) : (
-            <ul className="space-y-2">
-              {displayedOrders.map((order) => {
-                const label = formatPosOrderLabel(order, t("table"));
-                const isSelected = selectedId === order.id;
-                const guestLine =
-                  order.guestName?.trim() ||
-                  order.customerName?.trim() ||
-                  order.guestPhone ||
-                  order.customerPhone;
-                return (
-                  <li key={order.id}>
-                    <button
-                      type="button"
-                      onClick={() => selectOrder(order)}
-                      className={cn(
-                        "flex w-full flex-col gap-1 rounded-lg border border-border bg-card px-4 py-3 text-start shadow-sm transition hover:border-primary",
-                        isSelected && "border-primary ring-1 ring-primary/30"
-                      )}
-                    >
-                      <div className="flex w-full items-center justify-between gap-3">
-                        <div className="min-w-0">
-                          <p className="truncate text-sm font-semibold">{label}</p>
-                          {guestLine ? (
-                            <p className="truncate text-xs text-[#0C447C]">
-                              {guestLine}
-                            </p>
-                          ) : null}
-                          <p className="text-xs text-muted-foreground">
-                            {formatNumber(order.items.length, numberLocale)}{" "}
-                            {t("itemsCount")} · {formatOrderNumber(order)}
-                          </p>
-                        </div>
-                        <span className="shrink-0 text-sm font-bold text-primary">
-                          {formatCurrency(order.total, numberLocale)}
-                        </span>
-                      </div>
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-        </CardContent>
-      </Card>
-
-      <Card className="flex h-full min-h-0 w-[min(100%,20rem)] shrink-0 flex-col overflow-hidden sm:w-72 lg:w-80">
-        <CardHeader className="shrink-0 space-y-2 pb-2">
-          <CardTitle className="text-lg">{t("payOrder")}</CardTitle>
-          {selected ? (
-            <div className="rounded-lg border border-[#0F6E56]/30 bg-[#E1F5EE] px-3 py-2">
-              <p className="text-xs text-muted-foreground">{t("payFor")}</p>
-              <p className="text-base font-semibold text-[#0F6E56]">
-                {formatPosOrderLabel(selected, t("table"))}
-              </p>
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">{t("selectOrderToPay")}</p>
-          )}
-        </CardHeader>
-        <CardContent className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden pt-2">
-          {selected ? (
-            <>
-              <div className="min-h-0 flex-1 space-y-1.5 overflow-y-auto overscroll-contain">
-                {selected.items.map((line) => (
-                  <div
-                    key={line.id}
-                    className="flex justify-between gap-2 rounded-md border border-border/60 px-2 py-1.5 text-sm"
-                  >
-                    <span className="min-w-0 truncate">
-                      {line.menuItemName} × {formatNumber(line.quantity, numberLocale)}
-                    </span>
-                    <span className="shrink-0 tabular-nums">
-                      {formatCurrency(line.unitPrice * line.quantity, numberLocale)}
-                    </span>
-                  </div>
-                ))}
-              </div>
-              <div className="shrink-0 space-y-2 border-t border-border pt-2">
-                <div className="flex justify-between text-sm">
-                  <span>{t("subtotal")}</span>
-                  <span>{formatCurrency(selected.subtotal, numberLocale)}</span>
-                </div>
-                {selected.discountAmount > 0 ? (
-                  <div className="flex justify-between text-sm text-[#0F6E56]">
-                    <span>{t("discount")}</span>
-                    <span>-{formatCurrency(selected.discountAmount, numberLocale)}</span>
-                  </div>
-                ) : null}
-                <div className="flex justify-between text-sm">
-                  <span>{t("tax")}</span>
-                  <span>{formatCurrency(selected.taxTotal, numberLocale)}</span>
-                </div>
-                <div className="flex justify-between text-base font-bold">
-                  <span>{t("total")}</span>
-                  <span>{formatCurrency(selected.total, numberLocale)}</span>
-                </div>
-                {(selected.paidAmount ?? 0) > 0 ? (
-                  <div className="flex justify-between text-sm text-muted-foreground">
-                    <span>{t("paidSoFar")}</span>
-                    <span>{formatCurrency(selected.paidAmount, numberLocale)}</span>
-                  </div>
-                ) : null}
-                <div className="flex justify-between text-sm font-semibold text-primary">
-                  <span>{t("remaining")}</span>
-                  <span>{formatCurrency(effectiveRemaining, numberLocale)}</span>
-                </div>
-                {loyaltyDiscount > 0 ? (
-                  <div className="flex justify-between text-sm text-[#0F6E56]">
-                    <span>{t("loyaltyRedeemApplied")}</span>
-                    <span>-{formatCurrency(loyaltyDiscount, numberLocale)}</span>
-                  </div>
-                ) : null}
-
-                {selected.customerId && payCustomer ? (
-                  <div className="space-y-2 rounded-lg border border-[#0F6E56]/25 bg-[#E1F5EE]/50 p-2">
-                    <p className="text-xs font-medium text-[#0F6E56]">
-                      {t("loyaltyBalance", {
-                        points: formatNumber(payCustomer.loyaltyPoints, numberLocale),
-                      })}
-                    </p>
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Input
-                        type="number"
-                        min={0}
-                        max={maxLoyaltyRedeem}
-                        value={loyaltyRedeem || ""}
-                        onChange={(e) => {
-                          const n = Math.min(
-                            maxLoyaltyRedeem,
-                            Math.max(0, parseInt(e.target.value, 10) || 0)
-                          );
-                          setLoyaltyRedeem(n);
-                        }}
-                        className="h-8 w-24 tabular-nums"
-                        disabled={maxLoyaltyRedeem === 0}
-                      />
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className="h-8 text-xs"
-                        disabled={maxLoyaltyRedeem === 0}
-                        onClick={() => setLoyaltyRedeem(maxLoyaltyRedeem)}
-                      >
-                        {t("loyaltyUseMax")}
-                      </Button>
-                    </div>
-                    <p className="text-[10px] text-muted-foreground">{t("loyaltyRedeemHint")}</p>
-                  </div>
-                ) : null}
-
-                <div className="space-y-2 pt-1">
-                  <p className="text-xs font-medium text-muted-foreground">
-                    {t("splitPayments")}
-                  </p>
-                  {paymentRows.map((row, idx) => (
-                    <div key={idx} className="flex gap-2">
-                      <select
-                        className="h-9 rounded-md border border-input bg-background px-2 text-sm"
-                        value={row.method}
-                        onChange={(e) => {
-                          const method = e.target.value as PaymentRow["method"];
-                          setPaymentRows((rows) =>
-                            rows.map((r, i) => (i === idx ? { ...r, method } : r))
-                          );
-                        }}
-                      >
-                        <option value="Cash">{t("cash")}</option>
-                        <option value="Card">{t("card")}</option>
-                        <option value="Credit">{t("credit")}</option>
-                      </select>
-                      <Input
-                        dir="ltr"
-                        className="h-9 flex-1 text-end tabular-nums"
-                        value={row.amount}
-                        onChange={(e) => {
-                          const amount = e.target.value;
-                          setPaymentRows((rows) =>
-                            rows.map((r, i) => (i === idx ? { ...r, amount } : r))
-                          );
-                        }}
-                        placeholder="0"
-                      />
-                      {paymentRows.length > 1 ? (
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          onClick={() =>
-                            setPaymentRows((rows) => rows.filter((_, i) => i !== idx))
-                          }
-                        >
-                          ×
-                        </Button>
-                      ) : null}
-                    </div>
-                  ))}
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    className="w-full"
-                    onClick={() =>
-                      setPaymentRows((rows) => [
-                        ...rows,
-                        { method: "Card", amount: "" },
-                      ])
-                    }
-                  >
-                    {t("addPaymentRow")}
-                  </Button>
-                </div>
-
-                {payMessage ? (
-                  <p className="text-center text-sm text-primary">{payMessage}</p>
-                ) : null}
-                {lastPaidOrderId ? (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    className="w-full"
-                    disabled={thermalPrint.isPending}
-                    onClick={() => thermalPrint.mutate(lastPaidOrderId)}
-                  >
-                    {thermalPrint.isPending ? "..." : tPrint("printReceipt")}
-                  </Button>
-                ) : null}
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full"
-                  onClick={() => setReceiptOrder(selected)}
-                >
-                  {t("previewBill")}
-                </Button>
-                <Input
-                  value={cancelReason}
-                  onChange={(e) => setCancelReason(e.target.value)}
-                  placeholder={t("cancelReasonPlaceholder")}
-                  className="h-9"
-                  maxLength={500}
-                />
-                <Can permission="VoidOrder">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    className="w-full border-[#A32D2D]/40 text-[#A32D2D] hover:bg-red-50"
-                    disabled={cancelOrder.isPending}
-                    onClick={async () => {
-                      if (!selected) return;
-                      const ok = await confirmDialog({
-                        description: t("cancelOrderConfirm"),
-                        variant: "destructive",
-                        confirmLabel: t("cancelOrder"),
-                      });
-                      if (!ok) return;
-                      cancelOrder.mutate({ orderId: selected.id, reason: cancelReason });
-                    }}
-                  >
-                    {cancelOrder.isPending ? "..." : t("cancelOrder")}
-                  </Button>
-                </Can>
-                <form
-                  className="w-full"
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    if (canPay && selected && !payOrder.isPending) {
-                      payOrder.mutate(selected);
-                    }
-                  }}
-                >
-                  <Can permission="HandlePayments">
-                    <Button
-                      type="submit"
-                      className="w-full"
-                      disabled={!canPay || payOrder.isPending}
-                    >
-                      {payOrder.isPending ? "..." : payButtonLabel}
-                    </Button>
-                  </Can>
-                </form>
-              </div>
-            </>
-          ) : null}
-        </CardContent>
-      </Card>
-
-      {receiptOrder ? (
-        <PosSlipModal
-          variant="bill"
-          order={receiptOrder}
-          cafeName={cafeName}
-          logoUrl={cafeSettings?.logoUrl}
-          tagline={
-            [cafeSettings?.address, cafeSettings?.phone]
-              .filter(Boolean)
-              .join(" • ") || undefined
-          }
-          receiptHeader={printSettings?.receiptHeader}
-          receiptFooter={printSettings?.receiptFooter}
-          wifiPassword={printSettings?.wifiPassword}
-          paperWidthMm={printSettings?.paperWidthMm}
-          onClose={() => setReceiptOrder(null)}
-        />
-      ) : null}
-    </div>
-  );
-}
diff --git a/web/dashboard/src/components/pos/pos-queue-bar.tsx b/web/dashboard/src/components/pos/pos-queue-bar.tsx
deleted file mode 100644
index 54fcd50..0000000
--- a/web/dashboard/src/components/pos/pos-queue-bar.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useTranslations, useLocale } from "next-intl";
-import { apiGet, apiPost } from "@/lib/api/client";
-import type { QueueBoard } from "@/lib/api/types";
-import { formatNumber } from "@/lib/format";
-import { Button } from "@/components/ui/button";
-import { Link } from "@/i18n/routing";
-
-type PosQueueBarProps = {
-  cafeId: string;
-  branchId: string | null;
-};
-
-export function PosQueueBar({ cafeId, branchId }: PosQueueBarProps) {
-  const t = useTranslations("queue");
-  const locale = useLocale();
-  const numberLocale = locale === "en" ? "en-US" : "fa-IR";
-  const queryClient = useQueryClient();
-  const query = branchId ? `?branchId=${encodeURIComponent(branchId)}` : "";
-
-  const { data: board } = useQuery({
-    queryKey: ["queue-today", cafeId, branchId],
-    queryFn: () => apiGet<QueueBoard>(`/api/cafes/${cafeId}/queue/today${query}`),
-    enabled: !!cafeId,
-    refetchInterval: 15_000,
-  });
-
-  const callNext = useMutation({
-    mutationFn: () =>
-      apiPost<QueueBoard>(`/api/cafes/${cafeId}/queue/call-next${query}`, {}),
-    onSuccess: () =>
-      queryClient.invalidateQueries({ queryKey: ["queue-today"] }),
-  });
-
-  return (
-    <div className="flex shrink-0 flex-wrap items-center gap-2 rounded-lg border border-primary/25 bg-primary/5 px-3 py-2 text-sm">
-      <span className="font-medium text-primary">{t("title")}</span>
-      <span className="text-muted-foreground">
-        {t("nowServing")}:{" "}
-        <strong className="text-foreground tabular-nums">
-          {board?.nowServing != null
-            ? formatNumber(board.nowServing, numberLocale)
-            : "—"}
-        </strong>
-      </span>
-      <span className="text-muted-foreground">
-        {t("lastIssued")}:{" "}
-        <strong className="tabular-nums">
-          {formatNumber(board?.lastIssued ?? 0, numberLocale)}
-        </strong>
-      </span>
-      <Button
-        type="button"
-        size="sm"
-        variant="outline"
-        className="h-7 text-xs"
-        disabled={callNext.isPending || (board?.waitingCount ?? 0) === 0}
-        onClick={() => callNext.mutate()}
-      >
-        {t("callNext")}
-      </Button>
-      <Link
-        href="/queue"
-        className="text-xs text-primary underline-offset-2 hover:underline"
-      >
-        {t("issueNext")} →
-      </Link>
-    </div>
-  );
-}
diff --git a/web/dashboard/src/components/pos/pos-receipt-modal.tsx b/web/dashboard/src/components/pos/pos-receipt-modal.tsx
deleted file mode 100644
index ea1a755..0000000
--- a/web/dashboard/src/components/pos/pos-receipt-modal.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { PosReceiptModal, PosSlipModal } from "@/components/pos/pos-slip-modal";
-export type { KitchenSlipLine } from "@/components/pos/pos-slip-modal";
diff --git a/web/dashboard/src/components/pos/pos-receipt-print.css b/web/dashboard/src/components/pos/pos-receipt-print.css
deleted file mode 100644
index f71458e..0000000
--- a/web/dashboard/src/components/pos/pos-receipt-print.css
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * pos-receipt-print.css
- *
- * Fallback @media print styles for the slip preview panel.
- * The real thermal print job goes through thermal-print.ts (iframe) —
- * these rules only fire if window.print() is called on the main page directly.
- */
-
-@media print {
-  /* 80 mm roll — height tracks the content, zero blank tail */
-  @page {
-    size: 80mm auto;
-    margin: 0;
-  }
-
-  /* Force RTL and thermal width on the document root */
-  html {
-    direction: rtl !important;
-    width: 80mm !important;
-  }
-
-  /* Hide everything except the slip */
-  body > * {
-    display: none !important;
-  }
-
-  /* The modal overlay needs to be block but transparent */
-  body > *:has(#pos-slip-print-area) {
-    display: block !important;
-    position: static !important;
-    background: transparent !important;
-  }
-
-  #pos-slip-print-area,
-  #pos-slip-print-area * {
-    visibility: visible !important;
-  }
-
-  #pos-slip-print-area {
-    display: block !important;
-    position: static !important;
-    width: 80mm !important;
-    margin: 0 !important;
-    padding: 3mm 4mm !important;
-    border: none !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-  }
-}
-
-/* ── Screen preview styles ───────────────────────────────────────────────── */
-
-#pos-slip-print-area {
-  width: 100%;
-  max-width: 76mm;
-  font-family: "Vazirmatn", "Tahoma", "Arial", sans-serif;
-  font-size: 12px;
-  direction: rtl;
-  text-align: right;
-}
-
-.receipt-divider {
-  border-top: 1px dashed #000;
-  margin: 3mm 0;
-}
-
-.receipt-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.receipt-total {
-  font-weight: bold;
-  font-size: 14px;
-}
diff --git a/web/dashboard/src/components/pos/pos-screen.tsx b/web/dashboard/src/components/pos/pos-screen.tsx
deleted file mode 100644
index a47169b..0000000
--- a/web/dashboard/src/components/pos/pos-screen.tsx
+++ /dev/null
@@ -1,1575 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useTranslations, useLocale } from "next-intl";
-import {
-  ChevronLeft,
-  ChevronRight,
-  Minus,
-  Package,
-  Plus,
-  Search,
-  ShoppingCart,
-  Trash2,
-  UtensilsCrossed,
-  Users,
-  Video,
-  X,
-} from "lucide-react";
-import { apiGet, apiPatch, apiPost, ApiClientError } from "@/lib/api/client";
-import type {
-  MenuCategory,
-  MenuItem,
-  Order,
-  Table,
-  TableBoardItem,
-  QueueTicket,
-} from "@/lib/api/types";
-import { useAuthStore } from "@/lib/stores/auth.store";
-import { useCafeSettings } from "@/lib/hooks/use-cafe-settings";
-import { useCartStore, type CartItem } from "@/lib/stores/cart.store";
-import type { OrderType } from "@/lib/stores/cart.store";
-import { formatCurrency, formatNumber } from "@/lib/format";
-import { formatOrderNumber } from "@/lib/order-number";
-import { iranMobileForApi } from "@/lib/phone";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { useIsRtl } from "@/lib/use-is-rtl";
-import { useBranchStore } from "@/lib/stores/branch.store";
-import { getOrCreateTerminalId } from "@/lib/terminal";
-import { MenuItemLabels } from "@/components/menu/menu-item-labels";
-import { CategoryVisual } from "@/components/menu/category-visual";
-import { getMenuPrimaryName, menuItemMatchesSearch } from "@/lib/menu-display";
-import { Input } from "@/components/ui/input";
-import { LabeledField } from "@/components/ui/labeled-field";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import { MenuItemMedia } from "@/components/menu/menu-item-media";
-import {
-  buildCategoryNameMap,
-  inferMenuItemKind,
-} from "@/lib/menu-item-image";
-import { Can } from "@/components/auth/can";
-import { PosPayPanel } from "@/components/pos/pos-pay-panel";
-import { PosTableBoard } from "@/components/pos/pos-table-board";
-import { PosCustomerPicker } from "@/components/pos/pos-customer-picker";
-import { PosSlipModal, type KitchenSlipLine } from "@/components/pos/pos-slip-modal";
-import { PosQueueBar } from "@/components/pos/pos-queue-bar";
-import {
-  branchMenuItemToMenuItem,
-  getBranchMenu,
-} from "@/lib/api/branch-menu";
-import { requestPosPayment, posDeviceErrorMessage } from "@/lib/api/pos-device";
-import { orderAmountDue, submitOrderToApi, isLocalOrder } from "@/lib/pos/submit-order";
-import { useSyncQueueStore } from "@/lib/stores/sync-queue.store";
-import { useConfirm } from "@/components/providers/confirm-provider";
-
-const TAX_RATE = 0.09;
-
-function buildKitchenLines(
-  pending: { menuItemId: string; quantity: number; notes?: string }[],
-  cartItems: CartItem[]
-): KitchenSlipLine[] {
-  return pending.map((p) => {
-    const line = cartItems.find((i) => i.menuItem.id === p.menuItemId);
-    return {
-      name: line?.menuItem.name ?? p.menuItemId,
-      quantity: p.quantity,
-      notes: p.notes,
-    };
-  });
-}
-
-function cartToKitchenLines(cartItems: CartItem[]): KitchenSlipLine[] {
-  return cartItems
-    .filter((i) => !i.isVoided && i.quantity > 0)
-    .map((i) => ({
-      name: i.menuItem.name,
-      quantity: i.quantity,
-      notes: i.notes,
-    }));
-}
-
-// ─── Order Type Picker ───────────────────────────────────────────────────────
-
-function OrderTypePicker({
-  onSelect,
-  t,
-}: {
-  onSelect: (type: OrderType) => void;
-  t: ReturnType<typeof useTranslations<"pos">>;
-}) {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-8 px-4 py-10">
-      <div className="text-center">
-        <h2 className="text-2xl font-bold tracking-tight">
-          {t("orderTypePicker")}
-        </h2>
-      </div>
-
-      <div className="grid w-full max-w-xl grid-cols-3 gap-3 sm:gap-4">
-        {/* Table */}
-        <button
-          type="button"
-          onClick={() => onSelect("table")}
-          className="group flex cursor-pointer flex-col items-center gap-3 rounded-2xl border-2 border-border bg-card p-5 shadow-sm transition-all hover:border-primary hover:shadow-md active:scale-[0.97]"
-        >
-          <div className="rounded-xl bg-primary/10 p-3.5 transition-colors group-hover:bg-primary/20">
-            <UtensilsCrossed className="size-8 text-primary" />
-          </div>
-          <div className="text-center">
-            <p className="text-sm font-semibold sm:text-base">
-              {t("orderTypeTable")}
-            </p>
-            <p className="mt-0.5 text-[11px] text-muted-foreground">
-              {t("orderTypeTableDesc")}
-            </p>
-          </div>
-        </button>
-
-        {/* Counter */}
-        <button
-          type="button"
-          onClick={() => onSelect("counter")}
-          className="group flex cursor-pointer flex-col items-center gap-3 rounded-2xl border-2 border-border bg-card p-5 shadow-sm transition-all hover:border-blue-500 hover:shadow-md active:scale-[0.97]"
-        >
-          <div className="rounded-xl bg-blue-500/10 p-3.5 transition-colors group-hover:bg-blue-500/20">
-            <Users className="size-8 text-blue-600" />
-          </div>
-          <div className="text-center">
-            <p className="text-sm font-semibold sm:text-base">
-              {t("orderTypeCounter")}
-            </p>
-            <p className="mt-0.5 text-[11px] text-muted-foreground">
-              {t("orderTypeCounterDesc")}
-            </p>
-          </div>
-        </button>
-
-        {/* Takeaway */}
-        <button
-          type="button"
-          onClick={() => onSelect("takeaway")}
-          className="group flex cursor-pointer flex-col items-center gap-3 rounded-2xl border-2 border-border bg-card p-5 shadow-sm transition-all hover:border-amber-500 hover:shadow-md active:scale-[0.97]"
-        >
-          <div className="rounded-xl bg-amber-500/10 p-3.5 transition-colors group-hover:bg-amber-500/20">
-            <Package className="size-8 text-amber-600" />
-          </div>
-          <div className="text-center">
-            <p className="text-sm font-semibold sm:text-base">
-              {t("orderTypeTakeaway")}
-            </p>
-            <p className="mt-0.5 text-[11px] text-muted-foreground">
-              {t("orderTypeTakeawayDesc")}
-            </p>
-          </div>
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ─── Order Type Badge ─────────────────────────────────────────────────────────
-
-function OrderTypeBadge({
-  orderType,
-  tableNumber,
-  onClick,
-  t,
-}: {
-  orderType: OrderType;
-  tableNumber?: number | string | null;
-  onClick?: () => void;
-  t: ReturnType<typeof useTranslations<"pos">>;
-}) {
-  const label =
-    orderType === "table"
-      ? `${t("table")} ${tableNumber ?? "—"}`
-      : orderType === "counter"
-        ? t("counterBadge")
-        : t("takeawayBadge");
-
-  const cls =
-    orderType === "table"
-      ? "border-primary bg-primary/10 text-primary hover:bg-primary/20"
-      : orderType === "counter"
-        ? "border-blue-400 bg-blue-50 text-blue-700 hover:bg-blue-100"
-        : "border-amber-400 bg-amber-50 text-amber-700 hover:bg-amber-100";
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        "shrink-0 rounded-full border px-3 py-1 text-xs font-semibold transition-colors",
-        cls,
-        onClick ? "cursor-pointer" : "cursor-default"
-      )}
-    >
-      {label}
-    </button>
-  );
-}
-
-// ─── Main Component ───────────────────────────────────────────────────────────
-
-export function PosScreen() {
-  const t = useTranslations("pos");
-  const tQueue = useTranslations("queue");
-  const tErrors = useTranslations("errors");
-  const tCommon = useTranslations("common");
-  const tDashboard = useTranslations("dashboard");
-  const locale = useLocale();
-  const isRtl = useIsRtl();
-  const numberLocale = locale === "en" ? "en-US" : "fa-IR";
-  const cafeId = useAuthStore((s) => s.user?.cafeId);
-  const { data: cafeSettings } = useCafeSettings(cafeId);
-  const cafeName = cafeSettings?.name ?? tDashboard("cafeName");
-  const userRole = useAuthStore((s) => s.user?.role);
-  const isManager = userRole === "Manager" || userRole === "Owner";
-  const branchId = useBranchStore((s) => s.branchId);
-  const setBranchId = useBranchStore((s) => s.setBranchId);
-  const queryClient = useQueryClient();
-  const confirmDialog = useConfirm();
-  const isOnline = useSyncQueueStore((s) => s.isOnline);
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const reservationId = searchParams.get("reservationId");
-  const reservationGuest = searchParams.get("guestName");
-  const urlOrderId = searchParams.get("orderId");
-
-  const [kitchenSlip, setKitchenSlip] = useState<{
-    lines: KitchenSlipLine[];
-    orderId?: string;
-    tableNumber?: string | number | null;
-    guestName?: string | null;
-  } | null>(null);
-  const [posMode, setPosMode] = useState<"order" | "pay">("order");
-  const [showTablePicker, setShowTablePicker] = useState(false);
-  const [showTransferPicker, setShowTransferPicker] = useState(false);
-
-  const {
-    items,
-    addItem,
-    removeItem,
-    updateQty,
-    setNotes,
-    couponCode,
-    appliedCoupon,
-    setCouponCode,
-    setAppliedCoupon,
-    clearCoupon,
-    tableId,
-    setTableId,
-    orderType,
-    setOrderType,
-    activeOrderId,
-    activeOrderDisplayNumber,
-    setActiveOrderId,
-    customerId,
-    guestName,
-    setGuestName,
-    guestPhone,
-    setGuestPhone,
-    setCustomer,
-    clearCustomer,
-    hydrateFromOrder,
-    getPendingLines,
-    clearCart,
-    clearSession,
-    subtotal,
-  } = useCartStore();
-
-  const syncUrl = useCallback(
-    (tid: string | null, oid: string | null) => {
-      const params = new URLSearchParams(searchParams.toString());
-      if (tid) params.set("tableId", tid);
-      else params.delete("tableId");
-      if (oid) params.set("orderId", oid);
-      else params.delete("orderId");
-      const qs = params.toString();
-      router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
-    },
-    [pathname, router, searchParams]
-  );
-
-  // Restore tableId + infer orderType from URL params
-  useEffect(() => {
-    const tid = searchParams.get("tableId");
-    if (tid) {
-      setTableId(tid);
-      if (!orderType) setOrderType("table");
-    }
-  }, [searchParams, setTableId, setOrderType, orderType]);
-
-  useEffect(() => {
-    if (urlOrderId) setActiveOrderId(urlOrderId);
-  }, [urlOrderId, setActiveOrderId]);
-
-  useEffect(() => {
-    if (reservationGuest) setGuestName(reservationGuest);
-  }, [reservationGuest, setGuestName]);
-
-  useEffect(() => {
-    if (!cafeId) return;
-    apiPost(`/api/cafes/${cafeId}/terminals/register`, {
-      terminalId: getOrCreateTerminalId(),
-    }).catch(() => undefined);
-  }, [cafeId]);
-
-  const [selectedCategory, setSelectedCategory] = useState<string | "all">("all");
-  const [itemSearch, setItemSearch] = useState("");
-  const [orderMessage, setOrderMessage] = useState<string | null>(null);
-  const [couponMessage, setCouponMessage] = useState<{
-    type: "success" | "error";
-    text: string;
-  } | null>(null);
-
-  const { data: branches = [] } = useQuery({
-    queryKey: ["branches", cafeId],
-    queryFn: () =>
-      apiGet<{ id: string; name: string }[]>(`/api/cafes/${cafeId}/branches`),
-    enabled: !!cafeId,
-  });
-
-  useEffect(() => {
-    if (branches.length === 0) return;
-    const valid = branchId && branches.some((b) => b.id === branchId);
-    if (!valid) setBranchId(branches[0]!.id);
-  }, [branches, branchId, setBranchId]);
-
-  const orderBranchId = useMemo(() => {
-    if (branches.length === 0) return null;
-    if (branchId && branches.some((b) => b.id === branchId)) return branchId;
-    return branches[0]?.id ?? null;
-  }, [branchId, branches]);
-
-  const { data: categories, isLoading: loadingCategories } = useQuery({
-    queryKey: ["menu-categories", cafeId],
-    queryFn: () => apiGet<MenuCategory[]>(`/api/cafes/${cafeId}/menu/categories`),
-    enabled: !!cafeId,
-  });
-
-  const { data: globalMenuItems, isLoading: loadingGlobalItems } = useQuery({
-    queryKey: ["menu-items", cafeId, selectedCategory],
-    queryFn: () => {
-      const qs =
-        selectedCategory !== "all" ? `?categoryId=${selectedCategory}` : "";
-      return apiGet<MenuItem[]>(`/api/cafes/${cafeId}/menu/items${qs}`);
-    },
-    enabled: !!cafeId && !orderBranchId,
-  });
-
-  const { data: branchMenuRows, isLoading: loadingBranchMenu } = useQuery({
-    queryKey: ["branch-menu", cafeId, orderBranchId, selectedCategory],
-    queryFn: () => getBranchMenu(cafeId!, orderBranchId!),
-    enabled: !!cafeId && !!orderBranchId,
-  });
-
-  const menuItems = useMemo(() => {
-    if (orderBranchId && branchMenuRows) {
-      const mapped = branchMenuRows.map(branchMenuItemToMenuItem);
-      if (selectedCategory === "all") return mapped;
-      return mapped.filter((i) => i.categoryId === selectedCategory);
-    }
-    return globalMenuItems;
-  }, [orderBranchId, branchMenuRows, globalMenuItems, selectedCategory]);
-
-  const loadingItems = orderBranchId ? loadingBranchMenu : loadingGlobalItems;
-
-  const { data: allMenuItems, isLoading: loadingAllCatalog } = useQuery({
-    queryKey: ["branch-menu-all", cafeId, orderBranchId],
-    queryFn: async () => {
-      if (orderBranchId && cafeId) {
-        const rows = await getBranchMenu(cafeId, orderBranchId);
-        return rows.map(branchMenuItemToMenuItem);
-      }
-      return apiGet<MenuItem[]>(`/api/cafes/${cafeId}/menu/items`);
-    },
-    enabled: !!cafeId,
-  });
-
-  const menuById = useMemo(() => {
-    const map = new Map<string, MenuItem>();
-    for (const m of allMenuItems ?? menuItems ?? []) {
-      map.set(m.id, m);
-    }
-    return map;
-  }, [allMenuItems, menuItems]);
-
-  // Hydrate from URL order
-  useEffect(() => {
-    if (!cafeId || !urlOrderId || menuById.size === 0) return;
-    if (activeOrderId === urlOrderId && items.length > 0) return;
-    apiGet<Order>(`/api/cafes/${cafeId}/orders/${urlOrderId}`)
-      .then((order) => {
-        hydrateFromOrder(order, menuById);
-        if (order.tableId) {
-          setTableId(order.tableId);
-          setOrderType("table");
-        } else if (!orderType) {
-          setOrderType("counter");
-        }
-      })
-      .catch(() => undefined);
-  }, [
-    cafeId,
-    urlOrderId,
-    menuById,
-    activeOrderId,
-    items.length,
-    hydrateFromOrder,
-    setTableId,
-    setOrderType,
-    orderType,
-  ]);
-
-  const sessionPatchRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => {
-    if (!cafeId || !activeOrderId) return;
-    if (sessionPatchRef.current) clearTimeout(sessionPatchRef.current);
-    sessionPatchRef.current = setTimeout(() => {
-      apiPatch(`/api/cafes/${cafeId}/orders/${activeOrderId}/session`, {
-        guestName: guestName.trim() || null,
-        guestPhone: iranMobileForApi(guestPhone) ?? null,
-        customerId: customerId ?? null,
-      }).catch(() => undefined);
-    }, 600);
-    return () => {
-      if (sessionPatchRef.current) clearTimeout(sessionPatchRef.current);
-    };
-  }, [guestName, guestPhone, customerId, activeOrderId, cafeId]);
-
-  const handleTableSelect = useCallback(
-    (table: TableBoardItem, activeOrder: Order | null) => {
-      setShowTablePicker(false);
-
-      if (activeOrder) {
-        setTableId(table.id);
-        hydrateFromOrder(activeOrder, menuById);
-        syncUrl(table.id, activeOrder.id);
-        setOrderMessage(t("sessionActive"));
-        return;
-      }
-
-      const hadOpenSession = !!useCartStore.getState().activeOrderId;
-      if (hadOpenSession) {
-        clearSession();
-      } else {
-        setActiveOrderId(null);
-      }
-
-      setTableId(table.id);
-      syncUrl(table.id, null);
-      setOrderMessage(null);
-    },
-    [
-      setTableId,
-      hydrateFromOrder,
-      menuById,
-      syncUrl,
-      setActiveOrderId,
-      clearSession,
-      t,
-    ]
-  );
-
-  // Handle order type selection from the picker
-  const handleOrderTypeSelect = useCallback(
-    (type: OrderType) => {
-      setOrderType(type);
-      if (type === "table") {
-        setShowTablePicker(true);
-      }
-    },
-    [setOrderType]
-  );
-
-  // Go back to type picker (with clear)
-  const handleBackToTypePicker = useCallback(() => {
-    clearSession();
-    syncUrl(null, null);
-    setOrderMessage(null);
-    setCouponMessage(null);
-  }, [clearSession, syncUrl]);
-
-  const tablesQuery = orderBranchId
-    ? `?branchId=${encodeURIComponent(orderBranchId)}`
-    : "";
-
-  const { data: tables } = useQuery({
-    queryKey: ["tables", cafeId, orderBranchId],
-    queryFn: () => apiGet<Table[]>(`/api/cafes/${cafeId}/tables${tablesQuery}`),
-    enabled: !!cafeId,
-  });
-
-  const { data: boardTables = [] } = useQuery({
-    queryKey: ["tables-board", cafeId, orderBranchId, "transfer"],
-    queryFn: () =>
-      apiGet<TableBoardItem[]>(
-        `/api/cafes/${cafeId}/tables/board${tablesQuery}`
-      ),
-    enabled: !!cafeId && showTransferPicker,
-  });
-
-  const voidItemMutation = useMutation({
-    mutationFn: async (orderItemId: string) => {
-      if (!cafeId || !activeOrderId) throw new Error("no session");
-      return apiPatch<Order>(
-        `/api/cafes/${cafeId}/orders/${activeOrderId}/items/${orderItemId}/void`,
-        {}
-      );
-    },
-    onSuccess: async (order) => {
-      hydrateFromOrder(order, menuById);
-      queryClient.invalidateQueries({ queryKey: ["tables-board", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["orders-open", cafeId] });
-    },
-    onError: () => setOrderMessage(t("voidError")),
-  });
-
-  const transferTableMutation = useMutation({
-    mutationFn: async (targetTableId: string) => {
-      if (!cafeId || !activeOrderId) throw new Error("no session");
-      return apiPost<Order>(`/api/cafes/${cafeId}/orders/${activeOrderId}/transfer`, {
-        targetTableId,
-      });
-    },
-    onSuccess: async (order) => {
-      setShowTransferPicker(false);
-      hydrateFromOrder(order, menuById);
-      if (order.tableId) setTableId(order.tableId);
-      syncUrl(order.tableId ?? null, order.id);
-      setOrderMessage(t("transferSuccess"));
-      queryClient.invalidateQueries({ queryKey: ["tables-board", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["orders-open", cafeId] });
-    },
-    onError: (err: Error) => {
-      const code = err instanceof ApiClientError ? err.code : "";
-      if (code === "TABLE_OCCUPIED") setOrderMessage(t("tableOccupied"));
-      else if (code === "TABLE_CLEANING") setOrderMessage(t("tableNotAvailable"));
-      else setOrderMessage(t("transferError"));
-    },
-  });
-
-  const handleVoidItem = async (orderItemId: string) => {
-    const ok = await confirmDialog({
-      description: t("confirmVoid"),
-      variant: "destructive",
-      confirmLabel: tCommon("confirm"),
-    });
-    if (!ok) return;
-    voidItemMutation.mutate(orderItemId);
-  };
-
-  const freeTransferTables = boardTables.filter(
-    (tbl) => tbl.status === "Free" && tbl.id !== tableId
-  );
-
-  const itemSearchQuery = itemSearch.trim();
-  const isSearchingItems = itemSearchQuery.length > 0;
-
-  const catalogForSearch = useMemo(
-    () => allMenuItems ?? menuItems ?? [],
-    [allMenuItems, menuItems]
-  );
-
-  const filteredItems = useMemo(() => {
-    const base = isSearchingItems ? catalogForSearch : (menuItems ?? []);
-    return base.filter((i) => {
-      if (!i.isAvailable) return false;
-      if (!isSearchingItems) return true;
-      return menuItemMatchesSearch(i, itemSearchQuery, locale);
-    });
-  }, [catalogForSearch, menuItems, isSearchingItems, itemSearchQuery, locale]);
-
-  const showItemsLoading = isSearchingItems ? loadingAllCatalog : loadingItems;
-
-  const categoryNameById = useMemo(
-    () => buildCategoryNameMap(categories ?? []),
-    [categories]
-  );
-
-  const itemVisualKind = (item: MenuItem) =>
-    inferMenuItemKind(item.categoryId, categoryNameById.get(item.categoryId));
-
-  const sub = subtotal();
-  const discount = appliedCoupon?.discountAmount ?? 0;
-  const taxable = Math.max(0, sub - discount);
-  const tax = Math.round(taxable * TAX_RATE);
-  const total = taxable + tax;
-
-  const couponErrorKey = (code: string) => {
-    const map: Record<string, string> = {
-      COUPON_NOT_FOUND: "couponInvalid",
-      COUPON_INACTIVE: "couponInvalid",
-      COUPON_EXPIRED: "couponExpired",
-      COUPON_NOT_STARTED: "couponNotStarted",
-      COUPON_LIMIT_REACHED: "couponLimitReached",
-      COUPON_MIN_ORDER: "couponMinOrder",
-      CART_EMPTY: "couponCartEmpty",
-      COUPON_REQUIRED: "couponRequired",
-      COUPON_NO_DISCOUNT: "couponInvalid",
-    };
-    return map[code] ?? "couponInvalid";
-  };
-
-  const validateCoupon = useMutation({
-    mutationFn: async () => {
-      if (!cafeId) throw new Error("no cafe");
-      return apiPost<{
-        couponId: string;
-        code: string;
-        discountAmount: number;
-      }>(`/api/cafes/${cafeId}/coupons/validate`, {
-        code: couponCode.trim(),
-        subtotal: subtotal(),
-      });
-    },
-    onSuccess: (data) => {
-      setAppliedCoupon({
-        id: data.couponId,
-        code: data.code,
-        discountAmount: data.discountAmount,
-      });
-      setCouponMessage({
-        type: "success",
-        text: t("couponApplied", {
-          code: data.code,
-          amount: formatCurrency(data.discountAmount, numberLocale),
-        }),
-      });
-    },
-    onError: (err: Error) => {
-      setAppliedCoupon(null);
-      const code = err instanceof ApiClientError ? err.code : "COUPON_NOT_FOUND";
-      setCouponMessage({ type: "error", text: t(couponErrorKey(code)) });
-    },
-  });
-
-  const openKitchenSlip = useCallback(() => {
-    const pending = getPendingLines();
-    const lines =
-      pending.length > 0
-        ? buildKitchenLines(pending, items)
-        : cartToKitchenLines(items);
-    if (lines.length === 0) return;
-    setKitchenSlip({
-      lines,
-      orderId: activeOrderId ?? undefined,
-      tableNumber: tables?.find((tbl) => tbl.id === tableId)?.number ?? null,
-      guestName: guestName.trim() || null,
-    });
-  }, [getPendingLines, items, activeOrderId, tables, tableId, guestName]);
-
-  const submitOrder = useMutation({
-    mutationFn: async () => {
-      if (!cafeId || items.length === 0) throw new Error("empty");
-      const cart = useCartStore.getState();
-      const pending = cart.getPendingLines();
-      if (pending.length === 0) throw new Error("nothing pending");
-      const kitchenLines = buildKitchenLines(pending, cart.items);
-      const order = await submitOrderToApi({
-        cafeId,
-        orderBranchId: orderBranchId ?? undefined,
-        cart,
-        reservationId,
-        cartItems: cart.items,
-      });
-      return { order, kitchenLines };
-    },
-    onMutate: () => ({ hadSession: !!useCartStore.getState().activeOrderId }),
-    onSuccess: ({ order, kitchenLines }, _, context) => {
-      hydrateFromOrder(order, menuById);
-      syncUrl(order.tableId ?? tableId, order.id);
-      setCouponMessage(null);
-      if (kitchenLines.length > 0) {
-        setKitchenSlip({
-          lines: kitchenLines,
-          orderId: order.id,
-          tableNumber: order.tableNumber ?? null,
-          guestName: order.guestName ?? (guestName.trim() || null),
-        });
-      }
-      const baseMsg = context?.hadSession ? t("addToOrder") : t("orderPlaced");
-      setOrderMessage(baseMsg);
-      void apiPost<QueueTicket>(`/api/cafes/${cafeId}/queue/next`, {
-        branchId: orderBranchId,
-        customerLabel:
-          order.guestName ?? (guestName.trim() || undefined),
-        orderId: order.id,
-      })
-        .then((ticket) => {
-          setOrderMessage(
-            `${baseMsg} · ${t("queueNumber", { number: ticket.number })}`
-          );
-          queryClient.invalidateQueries({ queryKey: ["queue-today"] });
-        })
-        .catch(() => undefined);
-      queryClient.invalidateQueries({ queryKey: ["orders-live", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["orders-open", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["tables-board", cafeId] });
-      if (reservationId) {
-        queryClient.invalidateQueries({ queryKey: ["reservations", cafeId] });
-      }
-    },
-    onError: (err: Error) => {
-      if (err instanceof ApiClientError) {
-        if (err.code === "ORDER_NOT_FOUND" || err.code === "ORDER_NOT_OPEN") {
-          setActiveOrderId(null);
-          syncUrl(tableId, null);
-        }
-        const key =
-          err.code === "TABLE_NOT_AVAILABLE"
-            ? "tableNotAvailable"
-            : err.code === "TABLE_OCCUPIED"
-              ? "tableOccupied"
-              : err.code === "PLAN_LIMIT_REACHED"
-                ? "planLimit"
-                : err.code === "INVALID_ORDER"
-                  ? "orderInvalid"
-                  : err.code === "ORDER_NOT_OPEN"
-                    ? "orderNotOpen"
-                    : err.code === "ORDER_NOT_FOUND"
-                      ? "orderNotOpen"
-                      : err.code === "VALIDATION_ERROR"
-                        ? "orderValidation"
-                        : "orderError";
-        setOrderMessage(
-          err.code === "VALIDATION_ERROR"
-            ? err.message
-            : key === "planLimit"
-              ? tErrors("planLimit")
-              : t(key)
-        );
-        return;
-      }
-      if (err.message === "nothing pending") {
-        setOrderMessage(t("nothingPending"));
-        return;
-      }
-      setOrderMessage(t("orderError"));
-    },
-  });
-
-  const submitOrderAndPay = useMutation({
-    mutationFn: async () => {
-      if (!cafeId || items.length === 0) throw new Error("empty");
-      const cart = useCartStore.getState();
-      const pending = cart.getPendingLines();
-      if (pending.length === 0) throw new Error("nothing pending");
-      const kitchenLines = buildKitchenLines(pending, cart.items);
-      const order = await submitOrderToApi({
-        cafeId,
-        orderBranchId: orderBranchId ?? undefined,
-        cart,
-        reservationId,
-        cartItems: cart.items,
-      });
-      const due = orderAmountDue(order);
-      if (isLocalOrder(order.id)) return { order, kitchenLines };
-      const payBranchId = order.branchId ?? orderBranchId;
-      if (due > 0) {
-        if (!payBranchId) throw new Error("no branch");
-        await requestPosPayment(cafeId, payBranchId, order.id, due);
-        await apiPost(`/api/cafes/${cafeId}/orders/${order.id}/payments`, {
-          payments: [{ method: "Card", amount: due }],
-        });
-      }
-      return { order, kitchenLines };
-    },
-    onMutate: () => ({ hadSession: !!useCartStore.getState().activeOrderId }),
-    onSuccess: ({ order, kitchenLines }, _, context) => {
-      hydrateFromOrder(order, menuById);
-      syncUrl(order.tableId ?? tableId, order.id);
-      setCouponMessage(null);
-      if (kitchenLines.length > 0) {
-        setKitchenSlip({
-          lines: kitchenLines,
-          orderId: order.id,
-          tableNumber: order.tableNumber ?? null,
-          guestName: order.guestName ?? (guestName.trim() || null),
-        });
-      }
-      const baseMsg = context?.hadSession ? t("orderPaidAdd") : t("orderPaidNew");
-      setOrderMessage(baseMsg);
-      queryClient.invalidateQueries({ queryKey: ["orders-live", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["orders-open", cafeId] });
-      queryClient.invalidateQueries({ queryKey: ["tables-board", cafeId] });
-      if (reservationId) {
-        queryClient.invalidateQueries({ queryKey: ["reservations", cafeId] });
-      }
-    },
-    onError: (err: Error) => {
-      if (err instanceof ApiClientError) {
-        if (
-          err.code === "POS_DEVICE_CONNECTION_FAILED" ||
-          err.code === "POS_DEVICE_TIMEOUT" ||
-          err.code === "POS_DEVICE_REJECTED" ||
-          err.code.startsWith("POS_DEVICE")
-        ) {
-          setOrderMessage(posDeviceErrorMessage(err, t));
-          return;
-        }
-        if (err.code === "ORDER_NOT_FOUND" || err.code === "ORDER_NOT_OPEN") {
-          setActiveOrderId(null);
-          syncUrl(tableId, null);
-        }
-        const key =
-          err.code === "TABLE_NOT_AVAILABLE"
-            ? "tableNotAvailable"
-            : err.code === "TABLE_OCCUPIED"
-              ? "tableOccupied"
-              : err.code === "PLAN_LIMIT_REACHED"
-                ? "planLimit"
-                : err.code === "INVALID_ORDER"
-                  ? "orderInvalid"
-                  : err.code === "ORDER_NOT_OPEN"
-                    ? "orderNotOpen"
-                    : err.code === "ORDER_NOT_FOUND"
-                      ? "orderNotOpen"
-                      : err.code === "VALIDATION_ERROR"
-                        ? "orderValidation"
-                        : "orderError";
-        setOrderMessage(
-          err.code === "VALIDATION_ERROR"
-            ? err.message
-            : key === "planLimit"
-              ? tErrors("planLimit")
-              : t(key)
-        );
-        return;
-      }
-      if (err.message === "nothing pending") {
-        setOrderMessage(t("nothingPending"));
-        return;
-      }
-      if (err.message === "no branch") {
-        setOrderMessage(t("posDeviceNoBranch"));
-        return;
-      }
-      setOrderMessage(t("payError"));
-    },
-  });
-
-  const pendingCount = getPendingLines().length;
-  const isOrderBusy = submitOrder.isPending || submitOrderAndPay.isPending;
-
-  // Counter/takeaway orders don't require a table
-  const canSubmitOrder =
-    pendingCount > 0 &&
-    (orderType === "counter" ||
-      orderType === "takeaway" ||
-      !!tableId ||
-      !!customerId ||
-      guestName.trim().length > 0);
-
-  // Show order type picker when there's no active session
-  const showTypePicker =
-    posMode === "order" &&
-    orderType === null &&
-    items.length === 0 &&
-    !urlOrderId &&
-    !activeOrderId;
-
-  // The current table number for display
-  const currentTableNumber = tables?.find((tbl) => tbl.id === tableId)?.number;
-
-  if (!cafeId) return null;
-
-  return (
-    <div
-      className="flex h-full min-h-0 w-full flex-col overflow-hidden"
-      dir={isRtl ? "rtl" : "ltr"}
-    >
-      {/* ── Top bar: mode switcher ─────────────────────────────────────────── */}
-      <div className="flex shrink-0 items-center gap-2 border-b border-border px-1 pb-2">
-        <Button
-          size="sm"
-          variant={posMode === "order" ? "default" : "outline"}
-          onClick={() => setPosMode("order")}
-        >
-          {t("modeOrder")}
-        </Button>
-        <Button
-          size="sm"
-          variant={posMode === "pay" ? "default" : "outline"}
-          onClick={() => setPosMode("pay")}
-        >
-          {t("modePay")}
-        </Button>
-
-        <div className="flex-1" />
-      </div>
-
-      {/* ── Pay mode ──────────────────────────────────────────────────────── */}
-      {posMode === "pay" ? (
-        <PosPayPanel
-          cafeId={cafeId}
-          numberLocale={numberLocale}
-          branchId={orderBranchId}
-        />
-      ) : showTypePicker ? (
-        /* ── Order type picker ──────────────────────────────────────────── */
-        <OrderTypePicker onSelect={handleOrderTypeSelect} t={t} />
-      ) : (
-        /* ── Order screen ───────────────────────────────────────────────── */
-        <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden pt-2">
-          {/* Order screen header */}
-          <div className="flex shrink-0 items-center gap-2 px-1">
-            {/* Back / new order button */}
-            <button
-              type="button"
-              onClick={handleBackToTypePicker}
-              aria-label={t("newOrder")}
-              className="flex shrink-0 cursor-pointer items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-            >
-              {isRtl ? (
-                <ChevronRight className="size-4" />
-              ) : (
-                <ChevronLeft className="size-4" />
-              )}
-              {t("newOrder")}
-            </button>
-
-            {/* Order type badge — tappable to change table */}
-            {orderType ? (
-              <OrderTypeBadge
-                orderType={orderType}
-                tableNumber={currentTableNumber}
-                onClick={
-                  orderType === "table"
-                    ? () => setShowTablePicker(true)
-                    : undefined
-                }
-                t={t}
-              />
-            ) : null}
-
-            {/* Active order number */}
-            {activeOrderId ? (
-              <span className="text-xs text-muted-foreground">
-                #
-                {activeOrderDisplayNumber
-                  ? String(activeOrderDisplayNumber)
-                  : formatOrderNumber({ id: activeOrderId })}
-              </span>
-            ) : null}
-
-            <div className="flex-1" />
-
-            {/* Queue bar */}
-            {cafeId ? (
-              <PosQueueBar cafeId={cafeId} branchId={orderBranchId} />
-            ) : null}
-          </div>
-
-          {/* Reservation banner */}
-          {reservationId && reservationGuest ? (
-            <div className="mx-1 shrink-0 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-sm text-primary">
-              {t("reservationBanner", { name: reservationGuest })}
-            </div>
-          ) : null}
-
-          {/* ── Main split: menu + cart ──────────────────────────────────── */}
-          <div className="flex min-h-0 flex-1 gap-3 overflow-hidden">
-            {/* ── Menu panel ────────────────────────────────────────────── */}
-            <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-hidden">
-              {/* Search bar */}
-              <div className="relative shrink-0">
-                <Search
-                  className="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
-                  aria-hidden
-                />
-                <Input
-                  type="search"
-                  value={itemSearch}
-                  onChange={(e) => setItemSearch(e.target.value)}
-                  placeholder={t("searchItemsPlaceholder")}
-                  aria-label={t("searchItems")}
-                  className="h-10 ps-9 pe-9"
-                />
-                {itemSearch ? (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="absolute end-1 top-1/2 size-7 -translate-y-1/2"
-                    onClick={() => setItemSearch("")}
-                    aria-label={tCommon("cancel")}
-                  >
-                    <X className="size-4" />
-                  </Button>
-                ) : null}
-              </div>
-
-              {/* Horizontal scrolling category tabs — no wrap */}
-              <div className="flex shrink-0 gap-1.5 overflow-x-auto pb-0.5 [scrollbar-width:none] [-ms-overflow-style:none]">
-                <Button
-                  size="sm"
-                  variant={selectedCategory === "all" ? "default" : "outline"}
-                  className="shrink-0"
-                  onClick={() => setSelectedCategory("all")}
-                >
-                  {t("allCategories")}
-                </Button>
-                {loadingCategories
-                  ? Array.from({ length: 4 }).map((_, i) => (
-                      <Skeleton key={i} className="h-9 w-20 shrink-0" />
-                    ))
-                  : categories?.map((c) => (
-                      <Button
-                        key={c.id}
-                        size="sm"
-                        variant={
-                          selectedCategory === c.id ? "default" : "outline"
-                        }
-                        className="shrink-0 gap-1.5"
-                        onClick={() => setSelectedCategory(c.id)}
-                      >
-                        <CategoryVisual
-                          icon={c.icon}
-                          iconPresetId={c.iconPresetId}
-                          iconStyle={c.iconStyle}
-                          imageUrl={c.imageUrl}
-                          size="xs"
-                        />
-                        {getMenuPrimaryName(c, locale)}
-                      </Button>
-                    ))}
-              </div>
-
-              {/* Product grid — bigger cards with image area */}
-              <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-                <div className="grid grid-cols-2 gap-2 content-start sm:grid-cols-3 lg:grid-cols-4">
-                  {showItemsLoading
-                    ? Array.from({ length: 8 }).map((_, i) => (
-                        <Skeleton key={i} className="h-36 rounded-xl" />
-                      ))
-                    : filteredItems.length === 0 && isSearchingItems
-                      ? (
-                          <p className="col-span-full py-10 text-center text-sm text-muted-foreground">
-                            {t("searchNoResults")}
-                          </p>
-                        )
-                      : filteredItems.map((item) => {
-                          const qty = items.find(
-                            (ci) => ci.menuItem.id === item.id
-                          )?.quantity;
-                          return (
-                            <button
-                              key={item.id}
-                              type="button"
-                              onClick={() => addItem(item)}
-                              className={cn(
-                                "group relative flex cursor-pointer flex-col gap-2 rounded-xl border bg-card p-2.5 text-start shadow-sm transition-all hover:border-primary hover:shadow-md active:scale-[0.97]",
-                                qty
-                                  ? "border-primary"
-                                  : "border-border"
-                              )}
-                            >
-                              {/* Thumbnail */}
-                              <div className="relative w-full overflow-hidden rounded-lg border border-border/50 bg-muted aspect-[4/3]">
-                                <MenuItemMedia
-                                  imageUrl={item.imageUrl}
-                                  kind={itemVisualKind(item)}
-                                  size="sm"
-                                />
-                                {item.videoUrl ? (
-                                  <span
-                                    className="absolute bottom-0 end-0 rounded-ss-sm bg-black/55 p-px"
-                                    aria-hidden
-                                  >
-                                    <Video className="h-2.5 w-2.5 text-white" />
-                                  </span>
-                                ) : null}
-                                {/* Cart quantity badge */}
-                                {qty ? (
-                                  <span className="absolute start-1.5 top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground">
-                                    {qty}
-                                  </span>
-                                ) : null}
-                              </div>
-
-                              {/* Info */}
-                              <div className="min-w-0">
-                                <MenuItemLabels
-                                  item={item}
-                                  lines={2}
-                                  primaryClassName="text-sm font-medium leading-snug"
-                                  secondaryClassName="text-[10px]"
-                                />
-                                <p className="mt-1 text-sm font-semibold text-primary">
-                                  {formatCurrency(item.price, numberLocale)}
-                                </p>
-                              </div>
-                            </button>
-                          );
-                        })}
-                </div>
-              </div>
-            </div>
-
-            {/* ── Cart sidebar ──────────────────────────────────────────── */}
-            <Card className="flex h-full min-h-0 w-[min(100%,21rem)] shrink-0 flex-col overflow-hidden sm:w-72 lg:w-80">
-              <CardHeader className="shrink-0 space-y-2 p-3 pb-2">
-                {/* Cart header: title + table/type badge */}
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex items-center gap-2">
-                    <ShoppingCart className="size-4 text-muted-foreground" />
-                    <CardTitle className="text-sm">{t("takeOrder")}</CardTitle>
-                  </div>
-
-                  {orderType === "table" ? (
-                    tableId ? (
-                      <button
-                        type="button"
-                        onClick={() => setShowTablePicker(true)}
-                        className="shrink-0 cursor-pointer rounded-md border-2 border-primary bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary transition-colors hover:bg-primary/20"
-                      >
-                        {t("table")}{" "}
-                        {currentTableNumber ?? "—"}
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={() => setShowTablePicker(true)}
-                        className="shrink-0 cursor-pointer rounded-md border border-dashed border-primary px-2 py-0.5 text-xs text-primary transition-colors hover:bg-primary/5"
-                      >
-                        {t("selectTableBoard")}
-                      </button>
-                    )
-                  ) : orderType ? (
-                    <span
-                      className={cn(
-                        "shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium",
-                        orderType === "counter"
-                          ? "bg-blue-50 text-blue-700"
-                          : "bg-amber-50 text-amber-700"
-                      )}
-                    >
-                      {orderType === "counter"
-                        ? t("counterBadge")
-                        : t("takeawayBadge")}
-                    </span>
-                  ) : null}
-                </div>
-
-                {/* Customer picker */}
-                {cafeId ? (
-                  <PosCustomerPicker
-                    compact
-                    cafeId={cafeId}
-                    guestName={guestName}
-                    guestPhone={guestPhone}
-                    customerId={customerId}
-                    onGuestNameChange={setGuestName}
-                    onGuestPhoneChange={setGuestPhone}
-                    onCustomerChange={setCustomer}
-                    onClearCustomer={clearCustomer}
-                  />
-                ) : null}
-
-                {/* Transfer table (for table orders with active session) */}
-                {activeOrderId && tableId ? (
-                  <Can permission="EditOrder">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      className="h-8 w-full text-xs"
-                      onClick={() => setShowTransferPicker(true)}
-                    >
-                      {t("transferTable")}
-                    </Button>
-                  </Can>
-                ) : null}
-
-                {/* Assign table button (for counter orders) */}
-                {orderType === "counter" && activeOrderId ? (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    className="h-8 w-full text-xs"
-                    onClick={() => setShowTablePicker(true)}
-                  >
-                    {t("assignTable")} →
-                  </Button>
-                ) : null}
-              </CardHeader>
-
-              <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden p-3 pt-0">
-                {/* Cart items */}
-                <div className="min-h-0 flex-1 space-y-1.5 overflow-y-auto overscroll-contain pe-0.5">
-                  {items.length === 0 ? (
-                    <p className="py-4 text-center text-sm text-muted-foreground">
-                      {t("emptyCart")}
-                    </p>
-                  ) : (
-                    items.map((line) => (
-                      <div
-                        key={line.orderItemId ?? line.menuItem.id}
-                        className={cn(
-                          "flex flex-col gap-1.5 rounded-lg border border-border p-2",
-                          line.isVoided && "opacity-60"
-                        )}
-                      >
-                        <div className="flex items-center gap-2">
-                        <div className="min-w-0 flex-1">
-                          <MenuItemLabels
-                            item={line.menuItem}
-                            lines={1}
-                            primaryClassName={cn(
-                              "text-xs font-medium",
-                              line.isVoided &&
-                                "line-through text-muted-foreground"
-                            )}
-                            secondaryClassName="text-[10px]"
-                          />
-                          <p className="mt-0.5 text-[11px] text-muted-foreground">
-                            {line.isVoided ? (
-                              <span>{t("voided")}</span>
-                            ) : (
-                              formatCurrency(
-                                line.menuItem.price * line.quantity,
-                                numberLocale
-                              )
-                            )}
-                          </p>
-                        </div>
-
-                        <div
-                          className="flex shrink-0 items-center gap-0.5"
-                          onClick={(e) => e.stopPropagation()}
-                          onKeyDown={(e) => e.stopPropagation()}
-                        >
-                          {isManager &&
-                          line.orderItemId &&
-                          !line.isVoided &&
-                          activeOrderId ? (
-                            <Can permission="VoidOrder">
-                              <button
-                                type="button"
-                                className="cursor-pointer text-[10px] text-destructive hover:underline"
-                                onClick={() => handleVoidItem(line.orderItemId!)}
-                                aria-label={t("voidItem")}
-                              >
-                                {t("void")}
-                              </button>
-                            </Can>
-                          ) : null}
-                          {!line.isVoided ? (
-                            <>
-                              <Button
-                                size="icon"
-                                variant="outline"
-                                className="h-8 w-8"
-                                onClick={() =>
-                                  updateQty(line.menuItem.id, line.quantity - 1)
-                                }
-                              >
-                                <Minus className="h-3.5 w-3.5" />
-                              </Button>
-                              <span className="w-6 text-center text-xs font-medium">
-                                {formatNumber(line.quantity, numberLocale)}
-                              </span>
-                              <Button
-                                size="icon"
-                                variant="outline"
-                                className="h-8 w-8"
-                                onClick={() =>
-                                  updateQty(line.menuItem.id, line.quantity + 1)
-                                }
-                              >
-                                <Plus className="h-3.5 w-3.5" />
-                              </Button>
-                              <Button
-                                size="icon"
-                                variant="ghost"
-                                className="h-8 w-8 text-destructive"
-                                onClick={() => removeItem(line.menuItem.id)}
-                              >
-                                <Trash2 className="h-3.5 w-3.5" />
-                              </Button>
-                            </>
-                          ) : null}
-                        </div>
-                        </div>
-                        {!line.isVoided && (
-                          <input
-                            type="text"
-                            value={line.notes ?? ""}
-                            onChange={(e) => setNotes(line.menuItem.id, e.target.value)}
-                            onClick={(e) => e.stopPropagation()}
-                            onKeyDown={(e) => e.stopPropagation()}
-                            placeholder={t("itemNotePlaceholder")}
-                            className="w-full rounded-md border border-border/70 bg-background px-2 py-1 text-[11px] placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40"
-                          />
-                        )}
-                      </div>
-                    ))
-                  )}
-                </div>
-
-                {/* Totals + actions */}
-                <div className="shrink-0 space-y-1.5 border-t border-border bg-card pt-2">
-                  {/* Coupon row */}
-                  <div className="flex flex-wrap items-end gap-1.5">
-                    <LabeledField
-                      label={t("couponCode")}
-                      htmlFor="pos-coupon"
-                      className="min-w-0 flex-1"
-                    >
-                      <Input
-                        id="pos-coupon"
-                        value={couponCode}
-                        onChange={(e) => {
-                          setCouponCode(e.target.value);
-                          if (couponMessage) setCouponMessage(null);
-                        }}
-                        onKeyDown={(e) => {
-                          if (
-                            e.key === "Enter" &&
-                            !appliedCoupon &&
-                            couponCode.trim() &&
-                            !validateCoupon.isPending
-                          ) {
-                            e.preventDefault();
-                            validateCoupon.mutate();
-                          }
-                        }}
-                        disabled={!!appliedCoupon}
-                        dir="ltr"
-                        className="h-8 text-end text-sm"
-                      />
-                    </LabeledField>
-                    {appliedCoupon ? (
-                      <Button
-                        variant="outline"
-                        onClick={() => {
-                          clearCoupon();
-                          setCouponMessage({
-                            type: "success",
-                            text: t("couponRemoved"),
-                          });
-                        }}
-                      >
-                        {t("removeCoupon")}
-                      </Button>
-                    ) : (
-                      <Button
-                        variant="outline"
-                        disabled={
-                          !couponCode.trim() ||
-                          items.length === 0 ||
-                          validateCoupon.isPending
-                        }
-                        onClick={() => validateCoupon.mutate()}
-                      >
-                        {t("applyCoupon")}
-                      </Button>
-                    )}
-                  </div>
-
-                  {couponMessage ? (
-                    <p
-                      className={cn(
-                        "text-center text-sm",
-                        couponMessage.type === "success"
-                          ? "text-[#0F6E56]"
-                          : "text-[#A32D2D]"
-                      )}
-                    >
-                      {couponMessage.text}
-                    </p>
-                  ) : null}
-
-                  {appliedCoupon ? (
-                    <div className="flex justify-between text-sm text-[#BA7517]">
-                      <span>{t("couponActive", { code: appliedCoupon.code })}</span>
-                      <span>-{formatCurrency(discount, numberLocale)}</span>
-                    </div>
-                  ) : null}
-
-                  <div className="flex justify-between text-sm">
-                    <span>{t("subtotal")}</span>
-                    <span>{formatCurrency(sub, numberLocale)}</span>
-                  </div>
-                  {discount > 0 ? (
-                    <div className="flex justify-between text-sm text-[#0F6E56]">
-                      <span>{t("discount")}</span>
-                      <span>-{formatCurrency(discount, numberLocale)}</span>
-                    </div>
-                  ) : null}
-                  <div className="flex justify-between text-sm">
-                    <span>{t("tax")}</span>
-                    <span>{formatCurrency(tax, numberLocale)}</span>
-                  </div>
-                  <div className="flex justify-between text-sm font-bold">
-                    <span>{t("total")}</span>
-                    <span>{formatCurrency(total, numberLocale)}</span>
-                  </div>
-
-                  {!isOnline ? (
-                    <p className="rounded-md border border-amber-200 bg-amber-50 px-2 py-1 text-center text-[11px] text-amber-700">
-                      {t("offlineQueueNotice")}
-                    </p>
-                  ) : null}
-
-                  {orderMessage ? (
-                    <p className="text-center text-xs text-primary">
-                      {orderMessage}
-                    </p>
-                  ) : null}
-
-                  {!canSubmitOrder &&
-                  items.length > 0 &&
-                  orderType !== "counter" &&
-                  orderType !== "takeaway" ? (
-                    <p className="text-center text-[10px] text-amber-700">
-                      {t("needTableOrName")}
-                    </p>
-                  ) : null}
-
-                  {items.some((line) => !line.isVoided) ? (
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="outline"
-                      className="w-full"
-                      onClick={openKitchenSlip}
-                    >
-                      {t("kitchenSlip")}
-                    </Button>
-                  ) : null}
-
-                  <div className="flex flex-col gap-2 pt-0.5">
-                    <Can permission="HandlePayments">
-                      <Button
-                        size="sm"
-                        className="w-full"
-                        disabled={!canSubmitOrder || isOrderBusy}
-                        onClick={() => submitOrderAndPay.mutate()}
-                      >
-                        {submitOrderAndPay.isPending
-                          ? "..."
-                          : t("submitOrderAndPay")}
-                      </Button>
-                    </Can>
-                    <div className="flex gap-2">
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        className="flex-1"
-                        disabled={!canSubmitOrder || isOrderBusy}
-                        onClick={() => submitOrder.mutate()}
-                      >
-                        {submitOrder.isPending ? "..." : t("submitOrder")}
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={handleBackToTypePicker}
-                      >
-                        {t("clearCart")}
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      )}
-
-      {/* ── Table picker modal (for Table orders & counter assign) ────────── */}
-      {showTablePicker ? (
-        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4 pt-16">
-          <div className="w-full max-w-3xl rounded-2xl border border-border bg-background p-5 shadow-2xl">
-            <div className="mb-4 flex items-center justify-between gap-2">
-              <h3 className="text-base font-semibold">{t("selectTableBoard")}</h3>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                onClick={() => {
-                  setShowTablePicker(false);
-                  // If table type was selected but user dismissed without choosing a table,
-                  // go back to type picker
-                  if (orderType === "table" && !tableId) {
-                    setOrderType(null);
-                  }
-                }}
-              >
-                <X className="size-5" />
-              </Button>
-            </div>
-            {cafeId ? (
-              <PosTableBoard
-                cafeId={cafeId}
-                numberLocale={numberLocale}
-                selectedTableId={tableId}
-                branchId={orderBranchId}
-                onSelectTable={handleTableSelect}
-              />
-            ) : null}
-          </div>
-        </div>
-      ) : null}
-
-      {/* ── Kitchen slip modal ────────────────────────────────────────────── */}
-      {kitchenSlip ? (
-        <PosSlipModal
-          variant="kitchen"
-          cafeName={cafeName}
-          kitchenLines={kitchenSlip.lines}
-          orderId={kitchenSlip.orderId}
-          tableNumber={kitchenSlip.tableNumber}
-          guestName={kitchenSlip.guestName}
-          onClose={() => setKitchenSlip(null)}
-        />
-      ) : null}
-
-      {/* ── Transfer table modal ──────────────────────────────────────────── */}
-      {showTransferPicker ? (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-          <div className="w-full max-w-sm rounded-xl border border-border bg-background p-4 shadow-lg">
-            <p className="mb-3 text-sm font-medium">{t("selectTargetTable")}</p>
-            <div className="mb-4 flex max-h-48 flex-wrap gap-2 overflow-y-auto">
-              {freeTransferTables.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
-                  {t("noOrderOnTable")}
-                </p>
-              ) : (
-                freeTransferTables.map((tbl) => (
-                  <Button
-                    key={tbl.id}
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    disabled={transferTableMutation.isPending}
-                    onClick={() => transferTableMutation.mutate(tbl.id)}
-                  >
-                    {t("table")} {tbl.number}
-                  </Button>
-                ))
-              )}
-            </div>
-            <Button
-              type="button"
-              variant="ghost"
-              className="w-full"
-              onClick={() => setShowTransferPicker(false)}
-            >
-              {tCommon("cancel")}
-            </Button>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/web/dashboard/src/components/pos/pos-slip-modal.tsx b/web/dashboard/src/components/pos/pos-slip-modal.tsx
deleted file mode 100644
index ea7f987..0000000
--- a/web/dashboard/src/components/pos/pos-slip-modal.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-"use client";
-
-import { useTranslations, useLocale } from "next-intl";
-import { Printer } from "lucide-react";
-import type { Order } from "@/lib/api/types";
-import { formatCurrency } from "@/lib/format";
-import { formatOrderNumber } from "@/lib/order-number";
-import { buildThermalDocument, printThermal } from "@/lib/thermal-print";
-import { resolveMediaUrl } from "@/lib/api/client";
-import { Button } from "@/components/ui/button";
-import "./pos-receipt-print.css";
-
-export type KitchenSlipLine = {
-  name: string;
-  quantity: number;
-  notes?: string;
-};
-
-type PosSlipModalProps = {
-  variant: "kitchen" | "bill";
-  cafeName: string;
-  /** Café logo for receipt branding. */
-  logoUrl?: string;
-  /** Address / phone line shown under the café name on the bill. */
-  tagline?: string;
-  /** Custom header note from branch print settings (bill only). */
-  receiptHeader?: string | null;
-  /** Custom footer note from branch print settings (bill only). */
-  receiptFooter?: string | null;
-  /** WiFi password printed near the bill footer. */
-  wifiPassword?: string | null;
-  /** Paper width in mm — 58 or 80 (default 80). */
-  paperWidthMm?: number;
-  onClose: () => void;
-  /** Full order for customer bill */
-  order?: Order;
-  /** Kitchen ticket lines (new items or full order) */
-  kitchenLines?: KitchenSlipLine[];
-  tableNumber?: string | number | null;
-  orderId?: string;
-  guestName?: string | null;
-  createdAt?: string;
-};
-
-export function PosSlipModal({
-  variant,
-  cafeName,
-  logoUrl,
-  tagline,
-  receiptHeader,
-  receiptFooter,
-  wifiPassword,
-  paperWidthMm,
-  onClose,
-  order,
-  kitchenLines = [],
-  tableNumber,
-  orderId,
-  guestName,
-  createdAt,
-}: PosSlipModalProps) {
-  const t = useTranslations("receipt");
-  const locale = useLocale();
-  const numberLocale = locale === "en" ? "en-US" : "fa-IR";
-
-  const dateSource = order?.createdAt ?? createdAt ?? new Date().toISOString();
-  const formattedDate = new Intl.DateTimeFormat(
-    locale === "en" ? "en-US" : "fa-IR",
-    { dateStyle: "short", timeStyle: "short" }
-  ).format(new Date(dateSource));
-
-  const table = order?.tableNumber ?? tableNumber ?? "—";
-  const orderNo = order
-    ? formatOrderNumber(order)
-    : orderId
-      ? formatOrderNumber({ id: orderId })
-      : null;
-  const guest = order?.guestName ?? guestName;
-
-  const activeBillItems = order?.items.filter((i) => !i.isVoided) ?? [];
-
-  const paymentKey = (method: string) => {
-    const m = method.toLowerCase();
-    if (m === "cash")   return t("payment.cash");
-    if (m === "card")   return t("payment.card");
-    if (m === "credit") return t("payment.credit");
-    return method;
-  };
-
-  // ── Build meta row ─────────────────────────────────────────────────────────
-  const metaParts: string[] = [];
-  metaParts.push(`${t("table")}: ${table}`);
-  if (orderNo) metaParts.push(`${t("order")}: #${orderNo}`);
-  if (guest)   metaParts.push(`${t("guest")}: ${guest}`);
-  const metaRow = metaParts.join(" | ");
-
-  // ── Print handler ─────────────────────────────────────────────────────────
-  const handlePrint = () => {
-    const slipData =
-      variant === "kitchen"
-        ? {
-            cafeName,
-            title: t("kitchenTitle"),
-            date: formattedDate,
-            metaRow,
-            lines: kitchenLines.map((l) => ({
-              name: l.name,
-              quantity: l.quantity,
-              notes: l.notes,
-            })),
-            footer: t("kitchenFooter"),
-            locale,
-          }
-        : {
-            cafeName,
-            logoUrl: resolveMediaUrl(logoUrl),
-            tagline,
-            header: receiptHeader?.trim() || undefined,
-            wifi: wifiPassword?.trim() || undefined,
-            paperWidthMm,
-            title: t("billTitle"),
-            date: formattedDate,
-            metaRow,
-            lines: activeBillItems.map((item) => ({
-              name: item.menuItemName,
-              quantity: item.quantity,
-              price: formatCurrency(item.unitPrice * item.quantity, numberLocale),
-              notes: item.notes,
-            })),
-            totals: {
-              total: formatCurrency(order!.total, numberLocale),
-              payments: order!.payments?.map((p) => ({
-                method: paymentKey(p.method),
-                amount: formatCurrency(p.amount, numberLocale),
-              })),
-            },
-            footer: receiptFooter?.trim() || t("thankYou"),
-            locale,
-          };
-
-    printThermal(buildThermalDocument(slipData));
-  };
-
-  // ── Render ─────────────────────────────────────────────────────────────────
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-      <div className="w-full max-w-[340px] rounded-xl border border-border bg-background p-4 shadow-xl">
-
-        {/* ── Print preview ──────────────────────────────────────────────── */}
-        <div
-          id="pos-slip-print-area"
-          className="mb-4 rounded-md border border-dashed border-border p-3"
-        >
-          {variant === "bill" && logoUrl && (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              src={resolveMediaUrl(logoUrl)}
-              alt=""
-              className="mx-auto mb-1.5 max-h-12 w-auto object-contain"
-            />
-          )}
-          <div className="text-center text-lg font-extrabold leading-tight">{cafeName}</div>
-          {variant === "bill" && tagline && (
-            <div className="text-center text-[10px] text-muted-foreground">{tagline}</div>
-          )}
-          {variant === "bill" && receiptHeader?.trim() && (
-            <div className="whitespace-pre-line text-center text-[11px] font-medium text-foreground/80">
-              {receiptHeader.trim()}
-            </div>
-          )}
-          <div className="mb-1 mt-1.5 border-y border-foreground/60 py-0.5 text-center text-xs font-bold">
-            {variant === "kitchen" ? t("kitchenTitle") : t("billTitle")}
-          </div>
-          <div className="mb-2 text-center text-xs text-muted-foreground">
-            {formattedDate}
-          </div>
-          <div className="text-xs">{metaRow}</div>
-
-          <div className="receipt-divider" />
-
-          {variant === "kitchen"
-            ? kitchenLines.map((line, idx) => (
-                <div key={`${line.name}-${idx}`} className="receipt-row mb-1 text-xs">
-                  <span>
-                    {line.name} × {line.quantity}
-                    {line.notes ? ` (${line.notes})` : ""}
-                  </span>
-                </div>
-              ))
-            : activeBillItems.map((item) => (
-                <div key={item.id} className="mb-1 text-xs">
-                  <div className="receipt-row">
-                    <span>
-                      {item.menuItemName} × {item.quantity}
-                    </span>
-                    <span>
-                      {formatCurrency(item.unitPrice * item.quantity, numberLocale)}
-                    </span>
-                  </div>
-                  {item.notes && (
-                    <div className="ps-2 text-[10px] text-muted-foreground">
-                      {item.notes}
-                    </div>
-                  )}
-                </div>
-              ))}
-
-          {variant === "bill" && (
-            <>
-              <div className="receipt-divider" />
-              <div className="receipt-row receipt-total">
-                <span>{t("total")}</span>
-                <span>{formatCurrency(order!.total, numberLocale)}</span>
-              </div>
-              {order!.payments?.map((p) => (
-                <div key={p.id} className="receipt-row mt-1 text-xs">
-                  <span>{paymentKey(p.method)}</span>
-                  <span>{formatCurrency(p.amount, numberLocale)}</span>
-                </div>
-              ))}
-              <div className="receipt-divider" />
-              {wifiPassword?.trim() && (
-                <div className="text-center text-[11px]" dir="ltr">
-                  WiFi: {wifiPassword.trim()}
-                </div>
-              )}
-              <div className="mt-2 text-center text-xs">
-                {receiptFooter?.trim() || t("thankYou")}
-              </div>
-            </>
-          )}
-
-          {variant === "kitchen" && (
-            <div className="mt-2 text-center text-[10px] text-muted-foreground">
-              {t("kitchenFooter")}
-            </div>
-          )}
-        </div>
-
-        {/* ── Actions ────────────────────────────────────────────────────── */}
-        <div className="flex gap-2">
-          <Button type="button" className="flex-1 gap-1.5" onClick={handlePrint}>
-            <Printer className="h-4 w-4" />
-            {t("print")}
-          </Button>
-          <Button type="button" variant="outline" className="flex-1" onClick={onClose}>
-            {t("close")}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/** @deprecated Use PosSlipModal variant="bill" */
-export function PosReceiptModal({
-  order,
-  cafeName,
-  onClose,
-}: {
-  order: Order;
-  cafeName: string;
-  onClose: () => void;
-}) {
-  return (
-    <PosSlipModal
-      variant="bill"
-      order={order}
-      cafeName={cafeName}
-      onClose={onClose}
-    />
-  );
-}
diff --git a/web/dashboard/src/components/pos/pos-table-board.tsx b/web/dashboard/src/components/pos/pos-table-board.tsx
deleted file mode 100644
index f0c3672..0000000
--- a/web/dashboard/src/components/pos/pos-table-board.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useMemo } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useTranslations } from "next-intl";
-import * as signalR from "@microsoft/signalr";
-import { apiGet, apiPatch } from "@/lib/api/client";
-import {
-  branchTablesPath,
-  fetchCafeTableBoard,
-  setTableCleaning,
-  type TableSectionDto,
-} from "@/lib/api/branch-tables";
-import type { Order, TableBoardItem } from "@/lib/api/types";
-import { formatCurrency } from "@/lib/format";
-import { Link } from "@/i18n/routing";
-import { cn } from "@/lib/utils";
-
-const statusStyles: Record<TableBoardItem["status"], string> = {
-  Free: "bg-[#E1F5EE] text-[#0F6E56] border-[#0F6E56]/40 hover:border-[#0F6E56]",
-  Busy: "bg-blue-50 text-[#0C447C] border-blue-300 hover:border-blue-500",
-  Reserved: "bg-amber-50 text-[#BA7517] border-amber-300 hover:border-amber-500",
-  Cleaning: "bg-slate-100 text-slate-600 border-slate-300 hover:border-slate-500",
-};
-
-const selectedTableStyles =
-  "border-primary bg-primary/10 text-primary shadow-[0_0_0_2px_hsl(var(--primary)/0.35)] z-[1]";
-
-type PosTableBoardProps = {
-  cafeId: string;
-  numberLocale: string;
-  selectedTableId: string | null;
-  selectedOrderId?: string | null;
-  branchId: string | null;
-  mode?: "order" | "pay";
-  onSelectTable: (table: TableBoardItem, activeOrder: Order | null) => void;
-};
-
-function groupPosTables(
-  tables: TableBoardItem[],
-  sections: TableSectionDto[],
-  noSectionLabel: string
-): { key: string; label: string | null; tables: TableBoardItem[] }[] {
-  const groups: { key: string; label: string | null; tables: TableBoardItem[] }[] = [];
-  for (const sec of sections) {
-    const items = tables.filter((t) => t.sectionId === sec.id);
-    if (items.length > 0) {
-      groups.push({ key: sec.id, label: sec.name, tables: items });
-    }
-  }
-  const unassigned = tables.filter((t) => !t.sectionId);
-  if (unassigned.length > 0) {
-    groups.push({ key: "_none", label: noSectionLabel, tables: unassigned });
-  }
-  if (groups.length === 0 && tables.length > 0) {
-    groups.push({ key: "_all", label: null, tables });
-  }
-  return groups;
-}
-
-export function PosTableBoard({
-  cafeId,
-  numberLocale,
-  selectedTableId,
-  selectedOrderId = null,
-  branchId,
-  mode = "order",
-  onSelectTable,
-}: PosTableBoardProps) {
-  const t = useTranslations("pos");
-  const tQr = useTranslations("qrMenu");
-  const tTables = useTranslations("tables");
-  const queryClient = useQueryClient();
-  const apiBase = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:5080";
-
-  const {
-    data: tables = [],
-    isLoading,
-    isError,
-    refetch,
-  } = useQuery({
-    queryKey: ["tables-board", cafeId, branchId, "pos"],
-    queryFn: () => fetchCafeTableBoard(cafeId, branchId),
-    enabled: !!cafeId,
-  });
-
-  const { data: sections = [] } = useQuery({
-    queryKey: ["table-sections", cafeId, branchId],
-    queryFn: () =>
-      apiGet<TableSectionDto[]>(
-        `${branchTablesPath(cafeId, branchId!)}/sections`
-      ),
-    enabled: !!cafeId && !!branchId,
-    retry: false,
-  });
-
-  const grouped = useMemo(
-    () => groupPosTables(tables, sections, tTables("noSection")),
-    [tables, sections, tTables]
-  );
-
-  const refresh = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ["tables-board", cafeId] });
-    queryClient.invalidateQueries({ queryKey: ["orders-open", cafeId] });
-  }, [queryClient, cafeId]);
-
-  useEffect(() => {
-    if (!cafeId) return;
-    const token =
-      typeof window !== "undefined" ? localStorage.getItem("meezi_access_token") : null;
-    const connection = new signalR.HubConnectionBuilder()
-      .withUrl(`${apiBase}/hubs/kds`, { accessTokenFactory: () => token ?? "" })
-      .withAutomaticReconnect()
-      .build();
-    connection
-      .start()
-      .then(() => connection.invoke("JoinCafe", cafeId))
-      .catch(() => undefined);
-    connection.on("TableStatusChanged", refresh);
-    connection.on("OrderCreated", refresh);
-    connection.on("OrderStatusChanged", refresh);
-    return () => {
-      void connection.stop();
-    };
-  }, [cafeId, apiBase, refresh]);
-
-  const setCleaning = useMutation({
-    mutationFn: ({
-      tableId,
-      isCleaning,
-      tableBranchId,
-    }: {
-      tableId: string;
-      isCleaning: boolean;
-      tableBranchId: string;
-    }) => setTableCleaning(cafeId, tableId, isCleaning, branchId ?? tableBranchId),
-    onSuccess: () => refresh(),
-  });
-
-  const handleClick = async (table: TableBoardItem) => {
-    if (table.isCleaning ?? table.status === "Cleaning") return;
-    if (mode === "pay" && table.status !== "Busy") return;
-
-    let activeOrder: Order | null = null;
-    if (table.status === "Busy" && table.currentOrder?.orderId) {
-      try {
-        activeOrder = await apiGet<Order>(
-          `/api/cafes/${cafeId}/orders/${table.currentOrder.orderId}`
-        );
-      } catch {
-        try {
-          activeOrder = await apiGet<Order>(
-            `/api/cafes/${cafeId}/tables/${table.id}/active-order`
-          );
-        } catch {
-          activeOrder = null;
-        }
-      }
-    }
-    onSelectTable(table, activeOrder);
-  };
-
-  const statusLabel = (status: TableBoardItem["status"]) => {
-    switch (status) {
-      case "Free":
-        return tTables("status.free");
-      case "Busy":
-        return tTables("status.occupied");
-      case "Reserved":
-        return tTables("status.reserved");
-      case "Cleaning":
-        return tTables("status.cleaning");
-    }
-  };
-
-  const title =
-    mode === "pay" ? t("paySelectTable") : t("selectTableBoard");
-
-  const renderTableButton = (table: TableBoardItem) => {
-    const cleaning = table.isCleaning ?? table.status === "Cleaning";
-    const isSelected =
-      selectedTableId === table.id ||
-      (selectedOrderId != null &&
-        table.currentOrder?.orderId === selectedOrderId);
-    const payDisabled =
-      mode === "pay" &&
-      (table.status === "Cleaning" || table.status !== "Busy");
-    return (
-      <div key={table.id} className="flex shrink-0 flex-col gap-1">
-        <button
-          type="button"
-          disabled={cleaning || payDisabled}
-          onClick={() => void handleClick(table)}
-          className={cn(
-            "flex min-w-[4.5rem] flex-col items-center rounded-lg border-2 px-3 py-2 text-center transition",
-            isSelected ? selectedTableStyles : statusStyles[table.status],
-            (cleaning || payDisabled) &&
-              "cursor-not-allowed opacity-60"
-          )}
-        >
-          <span className="text-lg font-bold">{table.number}</span>
-          <span className="text-[10px]">{statusLabel(table.status)}</span>
-          {table.currentOrder && table.status === "Busy" ? (
-            <span className="mt-0.5 max-w-[4rem] truncate text-[10px] tabular-nums">
-              {formatCurrency(table.currentOrder.total, numberLocale)}
-            </span>
-          ) : null}
-          {table.currentOrder?.guestLabel && table.status === "Busy" ? (
-            <span className="mt-0.5 max-w-[4.5rem] truncate text-[9px] opacity-90">
-              {table.currentOrder.guestLabel}
-            </span>
-          ) : null}
-          {table.currentOrder?.source === "GuestQr" && table.status === "Busy" ? (
-            <span className="mt-0.5 rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold text-amber-900">
-              {tQr("guestQrBadge")}
-            </span>
-          ) : null}
-        </button>
-        {mode === "order" ? (
-          <button
-            type="button"
-            className="text-[10px] text-muted-foreground underline-offset-2 hover:underline"
-            onClick={(e) => {
-              e.stopPropagation();
-              setCleaning.mutate({
-                tableId: table.id,
-                tableBranchId: table.branchId,
-                isCleaning: !cleaning,
-              });
-            }}
-          >
-            {cleaning
-              ? tTables("markReady")
-              : tTables("markCleaning")}
-          </button>
-        ) : null}
-      </div>
-    );
-  };
-
-  return (
-    <div className="shrink-0 space-y-2 rounded-lg border border-border/80 bg-muted/20 p-3">
-      <p className="text-xs font-medium text-muted-foreground">{title}</p>
-
-      {isLoading ? (
-        <p className="text-sm text-muted-foreground">{t("loadingTables")}</p>
-      ) : null}
-
-      {isError ? (
-        <div className="space-y-2">
-          <p className="text-sm text-[#A32D2D]">{t("tablesLoadError")}</p>
-          <button
-            type="button"
-            className="text-xs text-[#0F6E56] underline-offset-2 hover:underline"
-            onClick={() => void refetch()}
-          >
-            {t("retryTables")}
-          </button>
-        </div>
-      ) : null}
-
-      {!isLoading && !isError && tables.length === 0 ? (
-        <div className="space-y-2 rounded-md border border-dashed border-[#BA7517]/50 bg-amber-50/50 px-3 py-3">
-          <p className="text-sm text-[#BA7517]">{t("noTablesOnBoard")}</p>
-          <Link
-            href="/tables"
-            className="text-xs font-medium text-[#0F6E56] underline-offset-2 hover:underline"
-          >
-            {t("manageTablesLink")}
-          </Link>
-        </div>
-      ) : null}
-
-      {!isLoading && !isError && tables.length > 0
-        ? grouped.map((group) => (
-            <div key={group.key} className="space-y-1.5">
-              {group.label ? (
-                <p className="text-[10px] font-medium uppercase tracking-[0.06em] text-muted-foreground">
-                  {group.label}
-                </p>
-              ) : null}
-              <div className="-mx-0.5 flex gap-2 overflow-x-auto px-1 py-1">
-                {group.tables.map(renderTableButton)}
-              </div>
-            </div>
-          ))
-        : null}
-    </div>
-  );
-}
diff --git a/web/dashboard/src/components/pos/pos-customer-picker.tsx b/web/dashboard/src/components/pos2/pos-customer-picker.tsx
similarity index 100%
rename from web/dashboard/src/components/pos/pos-customer-picker.tsx
rename to web/dashboard/src/components/pos2/pos-customer-picker.tsx
diff --git a/web/dashboard/src/components/pos2/pos2-screen.tsx b/web/dashboard/src/components/pos2/pos2-screen.tsx
index 06397dd..43f40f1 100644
--- a/web/dashboard/src/components/pos2/pos2-screen.tsx
+++ b/web/dashboard/src/components/pos2/pos2-screen.tsx
@@ -12,7 +12,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   Search, Plus, Minus, Trash2, Send, CreditCard, SplitSquareHorizontal,
   X, WifiOff, ShoppingCart, Users, Coffee, ArrowRight, LayoutGrid, Armchair,
-  Banknote, Check, Delete, ReceiptText, ShoppingBag, Loader2, RotateCcw,
+  Banknote, Check, Delete, ReceiptText, ShoppingBag, Loader2,
   BadgePercent, Sparkles, Home, StickyNote,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -22,10 +22,10 @@ import { useAuthStore } from "@/lib/stores/auth.store";
 import { useBranchStore } from "@/lib/stores/branch.store";
 import { useCartStore } from "@/lib/stores/cart.store";
 import { apiGet, apiPost, ApiClientError } from "@/lib/api/client";
-import { submitOrderToApi, orderAmountDue, isLocalOrder } from "@/lib/pos/submit-order";
+import { submitOrderToApi, orderAmountDue, isLocalOrder } from "@/lib/pos2/submit-order";
 import { requestPosPayment, posDeviceErrorMessage } from "@/lib/api/pos-device";
 import { printReceipt } from "@/lib/api/print";
-import { PosCustomerPicker } from "@/components/pos/pos-customer-picker";
+import { PosCustomerPicker } from "@/components/pos2/pos-customer-picker";
 import { Can } from "@/components/auth/can";
 import type { Customer, MenuItem, Order, TableBoardItem } from "@/lib/api/types";
 import { usePos2Categories, usePos2Menu, usePos2Tables, useMenuById } from "@/lib/pos2/use-pos2";
@@ -387,13 +387,6 @@ export function Pos2Screen() {
           </span>
           <div className="flex-1" />
           {offlineBadge}
-          <button
-            type="button"
-            onClick={() => router.push("/pos-classic")}
-            className="hidden min-h-[40px] cursor-pointer items-center gap-1.5 rounded-xl px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent sm:flex"
-          >
-            <RotateCcw className="size-4" /> نسخه کلاسیک
-          </button>
           <button
             type="button"
             onClick={openTakeaway}
diff --git a/web/dashboard/src/lib/pos/submit-order.ts b/web/dashboard/src/lib/pos2/submit-order.ts
similarity index 100%
rename from web/dashboard/src/lib/pos/submit-order.ts
rename to web/dashboard/src/lib/pos2/submit-order.ts