96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|||
|
|
import { Sparkles, Loader2 } from "lucide-react";
|
|||
|
|
import { apiPost } from "@/lib/api/client";
|
|||
|
|
import { useAuthStore } from "@/lib/stores/auth.store";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
interface DemoSeedResult {
|
|||
|
|
categoriesAdded: number;
|
|||
|
|
itemsAdded: number;
|
|||
|
|
tablesAdded: number;
|
|||
|
|
ingredientsAdded: number;
|
|||
|
|
taxCreated: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
/** Which queries to invalidate after seeding. */
|
|||
|
|
invalidateKeys: string[][];
|
|||
|
|
className?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function DemoDataBanner({ invalidateKeys, className }: Props) {
|
|||
|
|
const cafeId = useAuthStore((s) => s.user?.cafeId);
|
|||
|
|
const role = useAuthStore((s) => s.user?.role);
|
|||
|
|
const qc = useQueryClient();
|
|||
|
|
const [done, setDone] = useState(false);
|
|||
|
|
const [summary, setSummary] = useState<DemoSeedResult | null>(null);
|
|||
|
|
|
|||
|
|
const seed = useMutation({
|
|||
|
|
mutationFn: () =>
|
|||
|
|
apiPost<DemoSeedResult>(`/api/cafes/${cafeId}/demo/seed`, {}),
|
|||
|
|
onSuccess: (result) => {
|
|||
|
|
setSummary(result);
|
|||
|
|
setDone(true);
|
|||
|
|
for (const key of invalidateKeys) {
|
|||
|
|
qc.invalidateQueries({ queryKey: key });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!cafeId || (role !== "Owner" && role !== "Manager")) return null;
|
|||
|
|
if (done && summary) {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
"flex items-center gap-3 rounded-xl border border-[#0F6E56]/30 bg-[#E1F5EE] px-4 py-3 text-sm text-[#0F6E56]",
|
|||
|
|
className
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Sparkles className="size-4 shrink-0" />
|
|||
|
|
<span>
|
|||
|
|
دادههای نمونه اضافه شد — {summary.categoriesAdded} دسته،{" "}
|
|||
|
|
{summary.itemsAdded} آیتم، {summary.tablesAdded} میز،{" "}
|
|||
|
|
{summary.ingredientsAdded} ماده اولیه
|
|||
|
|
{summary.taxCreated ? "، مالیات ۹٪" : ""}.
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
"flex flex-col gap-3 rounded-xl border border-dashed border-[#0F6E56]/40 bg-[#E1F5EE]/40 px-5 py-4 sm:flex-row sm:items-center sm:justify-between",
|
|||
|
|
className
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Sparkles className="size-5 shrink-0 text-[#0F6E56]" />
|
|||
|
|
<div>
|
|||
|
|
<p className="text-sm font-semibold text-[#0F6E56]">شروع سریع با دادههای نمونه</p>
|
|||
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|||
|
|
۷ دسته، ۵۹+ آیتم منو، ۱۰ میز، ۱۵ ماده اولیه و مالیات ۹٪ بهصورت خودکار اضافه میشود.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
className="shrink-0 bg-[#0F6E56] hover:bg-[#0c5a46]"
|
|||
|
|
disabled={seed.isPending}
|
|||
|
|
onClick={() => seed.mutate()}
|
|||
|
|
>
|
|||
|
|
{seed.isPending ? (
|
|||
|
|
<Loader2 className="me-1.5 size-4 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Sparkles className="me-1.5 size-4" />
|
|||
|
|
)}
|
|||
|
|
افزودن دادههای نمونه
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|