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,208 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { apiPatch, apiPost, apiUpload, resolveMediaUrl } from "@/lib/api/client";
|
||||
import {
|
||||
cafeSettingsQueryKey,
|
||||
useCafeSettings,
|
||||
type CafeSettings,
|
||||
} from "@/lib/hooks/use-cafe-settings";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { LabeledField } from "@/components/ui/labeled-field";
|
||||
import { notify } from "@/lib/notify";
|
||||
|
||||
type SettingsShopPanelProps = {
|
||||
cafeId: string;
|
||||
};
|
||||
|
||||
export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
|
||||
const t = useTranslations("settings");
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [city, setCity] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [address, setAddress] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [logoUrl, setLogoUrl] = useState("");
|
||||
const [coverImageUrl, setCoverImageUrl] = useState("");
|
||||
const [snappfoodVendorId, setSnappfoodVendorId] = useState("");
|
||||
|
||||
const { data: cafeSettings } = useCafeSettings(cafeId);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cafeSettings) return;
|
||||
setName(cafeSettings.name ?? "");
|
||||
setCity(cafeSettings.city ?? "");
|
||||
setPhone(cafeSettings.phone ?? "");
|
||||
setAddress(cafeSettings.address ?? "");
|
||||
setDescription(cafeSettings.description ?? "");
|
||||
setLogoUrl(cafeSettings.logoUrl ?? "");
|
||||
setCoverImageUrl(cafeSettings.coverImageUrl ?? "");
|
||||
setSnappfoodVendorId(cafeSettings.snappfoodVendorId ?? "");
|
||||
}, [cafeSettings]);
|
||||
|
||||
const saveProfile = useMutation({
|
||||
mutationFn: () =>
|
||||
apiPatch<CafeSettings>(`/api/cafes/${cafeId}/settings`, {
|
||||
name,
|
||||
city,
|
||||
phone,
|
||||
address,
|
||||
description,
|
||||
logoUrl: logoUrl || null,
|
||||
coverImageUrl: coverImageUrl || null,
|
||||
snappfoodVendorId,
|
||||
}),
|
||||
onSuccess: (data) => {
|
||||
queryClient.setQueryData(cafeSettingsQueryKey(cafeId), data);
|
||||
notify.success(t("profile.saved"));
|
||||
},
|
||||
});
|
||||
|
||||
const uploadLogo = useMutation({
|
||||
mutationFn: (file: File) =>
|
||||
apiUpload<{ url: string }>(`/api/cafes/${cafeId}/media/cafe-logo`, file),
|
||||
onSuccess: (data) => setLogoUrl(data.url),
|
||||
});
|
||||
|
||||
const uploadCover = useMutation({
|
||||
mutationFn: (file: File) =>
|
||||
apiUpload<{ url: string }>(`/api/cafes/${cafeId}/media/cafe-cover`, file),
|
||||
onSuccess: (data) => setCoverImageUrl(data.url),
|
||||
});
|
||||
|
||||
const submitTaraz = useMutation({
|
||||
mutationFn: () =>
|
||||
apiPost<{ trackingCode?: string; message?: string }>(
|
||||
`/api/cafes/${cafeId}/tax/taraz/submit`
|
||||
),
|
||||
onSuccess: (data) => notify.success(data.message ?? t("tarazQueued")),
|
||||
});
|
||||
|
||||
const logoSrc = resolveMediaUrl(logoUrl);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card className="rounded-xl border border-border/80 shadow-sm">
|
||||
<CardHeader className="px-6 pb-4 pt-6">
|
||||
<CardTitle className="text-base font-medium">{t("profile.title")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 px-6 pb-6 pt-0">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{logoSrc ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={logoSrc} alt="" className="h-16 w-16 rounded-lg object-cover" />
|
||||
) : (
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-muted text-xs text-muted-foreground">
|
||||
{t("profile.logo")}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<label className="cursor-pointer rounded-md border px-3 py-2 text-sm hover:bg-muted">
|
||||
{t("profile.uploadLogo")}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (f) uploadLogo.mutate(f);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label className="cursor-pointer rounded-md border px-3 py-2 text-sm hover:bg-muted">
|
||||
{t("profile.uploadCover")}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (f) uploadCover.mutate(f);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<LabeledField label={t("profile.name")} htmlFor="cafe-name">
|
||||
<Input id="cafe-name" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
</LabeledField>
|
||||
<LabeledField label={t("profile.city")} htmlFor="cafe-city">
|
||||
<Input id="cafe-city" value={city} onChange={(e) => setCity(e.target.value)} />
|
||||
</LabeledField>
|
||||
<LabeledField label={t("profile.phone")} htmlFor="cafe-phone">
|
||||
<Input
|
||||
id="cafe-phone"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
dir="ltr"
|
||||
className="text-end"
|
||||
/>
|
||||
</LabeledField>
|
||||
<LabeledField label={t("profile.address")} htmlFor="cafe-address">
|
||||
<Input
|
||||
id="cafe-address"
|
||||
value={address}
|
||||
onChange={(e) => setAddress(e.target.value)}
|
||||
/>
|
||||
</LabeledField>
|
||||
</div>
|
||||
<LabeledField label={t("profile.description")} htmlFor="cafe-description">
|
||||
<textarea
|
||||
id="cafe-description"
|
||||
className="min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</LabeledField>
|
||||
<Button
|
||||
className="bg-[#0F6E56] hover:bg-[#0c5e46]"
|
||||
disabled={saveProfile.isPending}
|
||||
onClick={() => saveProfile.mutate()}
|
||||
>
|
||||
{t("saveProfile")}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="rounded-xl border border-border/80 shadow-sm">
|
||||
<CardHeader className="px-6 pb-4 pt-6">
|
||||
<CardTitle className="text-base font-medium">{t("snappfoodVendor")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-6 pb-6 pt-0">
|
||||
<LabeledField label={t("snappfoodVendor")} htmlFor="snappfood-vendor">
|
||||
<Input
|
||||
id="snappfood-vendor"
|
||||
value={snappfoodVendorId}
|
||||
onChange={(e) => setSnappfoodVendorId(e.target.value)}
|
||||
dir="ltr"
|
||||
className="text-end"
|
||||
/>
|
||||
</LabeledField>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="rounded-xl border border-border/80 shadow-sm">
|
||||
<CardHeader className="px-6 pb-4 pt-6">
|
||||
<CardTitle className="text-base font-medium">{t("taraz")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 px-6 pb-6 pt-0">
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">{t("tarazHint")}</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={submitTaraz.isPending}
|
||||
onClick={() => submitTaraz.mutate()}
|
||||
>
|
||||
{t("tarazSubmit")}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user