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>
2026-05-27 21:34:12 +03:30
parent ef15fd6247
commit 131ecdbbe6
208 changed files with 37123 additions and 0 deletions
@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { Sparkles } from "lucide-react";
+import { apiPostPublic, ApiClientError } from "@/lib/api/client";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+type CoffeeAdvisorPick = {
+  name: string;
+  reason: string;
+  menuItemId?: string | null;
+};
+
+type CoffeeAdvisorResult = {
+  summary: string;
+  picks: CoffeeAdvisorPick[];
+};
+
+type CoffeeAdvisorPanelProps = {
+  cafeSlug: string;
+};
+
+export function CoffeeAdvisorPanel({ cafeSlug }: CoffeeAdvisorPanelProps) {
+  const t = useTranslations("discoverPublic.coffeeAdvisor");
+  const [purpose, setPurpose] = useState("");
+  const [result, setResult] = useState<CoffeeAdvisorResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const submit = async () => {
+    const trimmed = purpose.trim();
+    if (trimmed.length < 3) return;
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const data = await apiPostPublic<CoffeeAdvisorResult>(
+        "/api/public/coffee-advisor",
+        { purpose: trimmed, cafeSlug }
+      );
+      setResult(data);
+    } catch (e) {
+      if (e instanceof ApiClientError && e.code === "AI_NOT_CONFIGURED") {
+        setError(t("notConfigured"));
+      } else {
+        setError(t("failed"));
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card className="rounded-xl border border-primary/20 bg-gradient-to-b from-[#E1F5EE]/40 to-card">
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Sparkles className="h-4 w-4 text-primary" aria-hidden />
+          {t("title")}
+        </CardTitle>
+        <p className="text-xs text-muted-foreground">{t("subtitle")}</p>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Input
+            value={purpose}
+            onChange={(e) => setPurpose(e.target.value)}
+            placeholder={t("placeholder")}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !loading) void submit();
+            }}
+          />
+          <Button
+            type="button"
+            className="shrink-0 bg-primary hover:bg-primary/90"
+            disabled={loading || purpose.trim().length < 3}
+            onClick={() => void submit()}
+          >
+            {loading ? t("loading") : t("submit")}
+          </Button>
+        </div>
+        {error ? (
+          <p className="text-sm text-destructive">{error}</p>
+        ) : null}
+        {result ? (
+          <div className="space-y-3 rounded-lg border border-primary/15 bg-card/80 p-3">
+            <p className="text-sm leading-relaxed">{result.summary}</p>
+            {result.picks.length > 0 ? (
+              <ul className="space-y-2">
+                {result.picks.map((pick) => (
+                  <li
+                    key={`${pick.name}-${pick.menuItemId ?? "x"}`}
+                    className="rounded-lg border border-border/60 bg-background px-3 py-2"
+                  >
+                    <p className="text-sm font-medium text-primary">{pick.name}</p>
+                    <p className="mt-1 text-xs text-muted-foreground">{pick.reason}</p>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}