feat(dashboard): Next.js 16 merchant panel with offline POS and PWA
Complete merchant dashboard upgrade:
Next.js 16 compatibility:
- Fix params/searchParams typed as Promise<{}> throughout App Router
- Replace middleware.ts with proxy.ts (Next.js 16 convention)
- Remove unused @ts-expect-error directives caught by stricter TS
- Cast dynamic next-intl t() keys to fix TranslateArgs type errors
Offline POS:
- IndexedDB queue (meezi_pos_offline) for orders created while offline
- Zustand sync store tracking queueCount, isSyncing, isOnline
- useOfflineSync hook: auto-syncs on reconnect/visibility-change
- SyncStatusIndicator chip in topbar (amber=offline, blue=syncing)
- submitOrderToApi falls back to local order on network failure
- Local orders skip payment flow; sync on reconnect
PWA (installable):
- @ducanh2912/next-pwa with Workbox runtime caching rules
- Web App Manifest (manifest.ts) — RTL/Farsi, theme #0F6E56
- PWA icons: 192px, 512px, maskable 512px
- next.config.ts replaces next.config.mjs
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Printer } from "lucide-react";
|
||||
import { apiGet } from "@/lib/api/client";
|
||||
import { printErrorMessage, testPrinter } from "@/lib/api/print";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type BranchPrintSettings = {
|
||||
receiptPrinterIp?: string | null;
|
||||
receiptPrinterPort?: number | null;
|
||||
kitchenPrinterIp?: string | null;
|
||||
kitchenPrinterPort?: number | null;
|
||||
};
|
||||
|
||||
type SettingsPrintTestPanelProps = {
|
||||
cafeId: string;
|
||||
onOpenPrinterSettings?: () => void;
|
||||
};
|
||||
|
||||
function printerEndpointLabel(
|
||||
ip: string | null | undefined,
|
||||
port: number | null | undefined
|
||||
): string {
|
||||
if (!ip?.trim()) return "—";
|
||||
return `${ip.trim()}:${port ?? 9100}`;
|
||||
}
|
||||
|
||||
export function SettingsPrintTestPanel({
|
||||
cafeId,
|
||||
onOpenPrinterSettings,
|
||||
}: SettingsPrintTestPanelProps) {
|
||||
const t = useTranslations("print");
|
||||
const tSettings = useTranslations("settings");
|
||||
const tCommon = useTranslations("common");
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [lastTarget, setLastTarget] = useState<"receipt" | "kitchen" | null>(null);
|
||||
|
||||
const { data: branches = [], isLoading: branchesLoading } = useQuery({
|
||||
queryKey: ["branches", cafeId],
|
||||
queryFn: () => apiGet<{ id: string }[]>(`/api/cafes/${cafeId}/branches`),
|
||||
enabled: !!cafeId,
|
||||
});
|
||||
|
||||
const branchId = branches[0]?.id;
|
||||
|
||||
const { data: settings, isLoading: settingsLoading } = useQuery({
|
||||
queryKey: ["branch-print-settings", cafeId, branchId],
|
||||
queryFn: () =>
|
||||
apiGet<BranchPrintSettings>(
|
||||
`/api/cafes/${cafeId}/branches/${branchId}/print-settings`
|
||||
),
|
||||
enabled: !!cafeId && !!branchId,
|
||||
});
|
||||
|
||||
const runTest = useMutation({
|
||||
mutationFn: (target: "receipt" | "kitchen") => {
|
||||
const ip =
|
||||
target === "receipt"
|
||||
? settings?.receiptPrinterIp?.trim()
|
||||
: settings?.kitchenPrinterIp?.trim();
|
||||
const port =
|
||||
target === "receipt"
|
||||
? settings?.receiptPrinterPort ?? 9100
|
||||
: settings?.kitchenPrinterPort ?? 9100;
|
||||
if (!ip) throw new Error("PRINTER_NOT_CONFIGURED");
|
||||
return testPrinter(cafeId, ip, port);
|
||||
},
|
||||
onMutate: (target) => setLastTarget(target),
|
||||
onSuccess: () => setMessage(t("success")),
|
||||
onError: (err) => setMessage(printErrorMessage(err, t)),
|
||||
});
|
||||
|
||||
const isLoading = branchesLoading || settingsLoading;
|
||||
const receiptReady = !!settings?.receiptPrinterIp?.trim();
|
||||
const kitchenReady = !!settings?.kitchenPrinterIp?.trim();
|
||||
|
||||
if (isLoading) {
|
||||
return <p className="text-sm text-muted-foreground">{tCommon("loading")}</p>;
|
||||
}
|
||||
|
||||
if (!branchId) {
|
||||
return (
|
||||
<Card className="rounded-xl border border-border/80 shadow-sm">
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-sm text-muted-foreground">{t("noBranchForPrinter")}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card className="rounded-xl border border-border/80 shadow-sm">
|
||||
<CardHeader className="space-y-2 px-6 pb-4 pt-6">
|
||||
<CardTitle className="text-base font-medium">{tSettings("nav.printTest")}</CardTitle>
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">{t("testPageHint")}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5 px-6 pb-6 pt-0">
|
||||
{message ? (
|
||||
<p
|
||||
className={cn(
|
||||
"rounded-md border px-3 py-2 text-sm",
|
||||
lastTarget && runTest.isSuccess
|
||||
? "border-[#0F6E56]/30 bg-[#E1F5EE] text-[#0F6E56]"
|
||||
: "border-border/80 bg-muted/40"
|
||||
)}
|
||||
>
|
||||
{message}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="rounded-xl border border-border/80 bg-card p-5 space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#E1F5EE] text-[#0F6E56]">
|
||||
<Printer className="h-4 w-4" />
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{t("receiptPrinter")}</p>
|
||||
<p className="text-[11px] text-muted-foreground" dir="ltr">
|
||||
{printerEndpointLabel(
|
||||
settings?.receiptPrinterIp,
|
||||
settings?.receiptPrinterPort
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-[#0F6E56] hover:bg-[#0c5e46]"
|
||||
disabled={!receiptReady || runTest.isPending}
|
||||
onClick={() => runTest.mutate("receipt")}
|
||||
>
|
||||
{t("testPrintReceipt")}
|
||||
</Button>
|
||||
{!receiptReady ? (
|
||||
<p className="text-[11px] text-[#BA7517]">{t("notConfigured")}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-border/80 bg-card p-5 space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-[#0C447C]">
|
||||
<Printer className="h-4 w-4" />
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{t("kitchenPrinter")}</p>
|
||||
<p className="text-[11px] text-muted-foreground" dir="ltr">
|
||||
{printerEndpointLabel(
|
||||
settings?.kitchenPrinterIp,
|
||||
settings?.kitchenPrinterPort
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
disabled={!kitchenReady || runTest.isPending}
|
||||
onClick={() => runTest.mutate("kitchen")}
|
||||
>
|
||||
{t("testPrintKitchen")}
|
||||
</Button>
|
||||
{!kitchenReady ? (
|
||||
<p className="text-[11px] text-[#BA7517]">{t("notConfigured")}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{onOpenPrinterSettings ? (
|
||||
<Button variant="ghost" size="sm" onClick={onOpenPrinterSettings}>
|
||||
{t("configurePrinters")}
|
||||
</Button>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user