feat(payments): add coupon management page

src/app/admin/coupons/page.tsx

@@ -0,0 +1,5 @@
+import AdminCoupons from "@/views/AdminCoupons";
+
+export default function AdminCouponsRoute() {
+  return <AdminCoupons />;
+}

src/views/AdminCoupons.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Edit3, Plus, Trash2 } from "lucide-react";
+import AdminDateTimeField from "@/components/AdminDateTimeField";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import type { DiscountCodeSchema, DiscountCodeWriteSchema } from "@/lib/types";
+import { api } from "@/lib/api";
+import { formatNumberPersian, resolveErrorMessage } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
+
+const PAGE_SIZE = 20;
+
+const emptyForm: DiscountCodeWriteSchema = {
+  code: "",
+  type: "percent",
+  value: 0,
+  max_discount: null,
+  is_active: true,
+  starts_at: null,
+  ends_at: null,
+  usage_limit_total: null,
+  usage_limit_per_user: null,
+  min_amount: null,
+  applicable_event_ids: [],
+};
+
+export default function AdminCoupons() {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  const [editing, setEditing] = React.useState<DiscountCodeSchema | null>(null);
+  const [open, setOpen] = React.useState(false);
+  const [form, setForm] = React.useState<DiscountCodeWriteSchema>(emptyForm);
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedSearch(search.trim()), 300);
+    return () => window.clearTimeout(timer);
+  }, [search]);
+
+  const query = useQuery({
+    queryKey: ["admin", "coupons", debouncedSearch, page],
+    queryFn: () => api.listDiscountCodes({ search: debouncedSearch || undefined, limit: PAGE_SIZE, offset: (page - 1) * PAGE_SIZE }),
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: () => (editing ? api.updateDiscountCode(editing.id, form) : api.createDiscountCode(form)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "coupons"] });
+      setOpen(false);
+      toast({ title: "کد تخفیف ذخیره شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => api.deleteDiscountCode(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "coupons"] });
+      toast({ title: "کد تخفیف حذف شد", variant: "success" });
+    },
+    onError: (error) => toast({ title: "خطا", description: resolveErrorMessage(error), variant: "destructive" }),
+  });
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm);
+    setOpen(true);
+  };
+
+  const openEdit = (item: DiscountCodeSchema) => {
+    setEditing(item);
+    setForm({
+      code: item.code,
+      type: item.type,
+      value: item.value,
+      max_discount: item.max_discount,
+      is_active: item.is_active,
+      starts_at: item.starts_at,
+      ends_at: item.ends_at,
+      usage_limit_total: item.usage_limit_total,
+      usage_limit_per_user: item.usage_limit_per_user,
+      min_amount: item.min_amount,
+      applicable_event_ids: item.applicable_event_ids,
+    });
+    setOpen(true);
+  };
+
+  const items = query.data?.results ?? [];
+  const count = query.data?.count ?? 0;
+  const hasMore = page * PAGE_SIZE < count;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold">کدهای تخفیف</h2>
+          <p className="mt-1 text-sm text-muted-foreground">مدیریت کدهای تخفیف رویدادها</p>
+        </div>
+        <Button onClick={openCreate}>
+          <Plus className="ml-2 h-4 w-4" />
+          افزودن
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>فهرست کدها</CardTitle>
+          <CardDescription>جستجو و مدیریت وضعیت کدهای تخفیف</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Input
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPage(1);
+            }}
+            placeholder="جستجو بر اساس کد..."
+            className="max-w-md"
+          />
+          <div className="overflow-x-auto rounded-2xl border">
+            <table className="w-full min-w-[760px] text-sm">
+              <thead className="bg-muted/40 text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 text-right">کد</th>
+                  <th className="px-4 py-3 text-right">نوع</th>
+                  <th className="px-4 py-3 text-right">مقدار</th>
+                  <th className="px-4 py-3 text-right">استفاده</th>
+                  <th className="px-4 py-3 text-right">وضعیت</th>
+                  <th className="px-4 py-3 text-left"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {query.isLoading ? (
+                  <tr><td colSpan={6} className="px-4 py-6 text-center text-muted-foreground">در حال بارگذاری...</td></tr>
+                ) : items.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-6 text-center text-muted-foreground">کدی یافت نشد.</td></tr>
+                ) : (
+                  items.map((item) => (
+                    <tr key={item.id} className="border-t hover:bg-muted/40">
+                      <td className="px-4 py-3 font-mono font-bold">{item.code}</td>
+                      <td className="px-4 py-3">{item.type === "percent" ? "درصدی" : "مبلغ ثابت"}</td>
+                      <td className="px-4 py-3">{formatNumberPersian(item.value)}</td>
+                      <td className="px-4 py-3">{formatNumberPersian(item.usage_count)}</td>
+                      <td className="px-4 py-3">
+                        <Badge variant={item.is_active ? "default" : "outline"}>{item.is_active ? "فعال" : "غیرفعال"}</Badge>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex justify-end gap-2">
+                          <Button size="icon" variant="outline" onClick={() => openEdit(item)} aria-label="ویرایش">
+                            <Edit3 className="h-4 w-4" />
+                          </Button>
+                          <Button size="icon" variant="outline" className="text-destructive hover:text-destructive" onClick={() => deleteMutation.mutate(item.id)} aria-label="حذف">
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>صفحه {formatNumberPersian(page)} از {formatNumberPersian(Math.max(1, Math.ceil(count / PAGE_SIZE)))}</span>
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline" disabled={page === 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>قبلی</Button>
+              <Button size="sm" variant="outline" disabled={!hasMore} onClick={() => setPage((current) => current + 1)}>بعدی</Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-h-[90vh] overflow-y-auto" dir="rtl">
+          <DialogHeader className="text-right">
+            <DialogTitle>{editing ? "ویرایش کد تخفیف" : "افزودن کد تخفیف"}</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-2 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>کد</Label>
+              <Input dir="ltr" value={form.code} onChange={(event) => setForm((current) => ({ ...current, code: event.target.value }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>نوع</Label>
+              <Select value={form.type} onValueChange={(value) => setForm((current) => ({ ...current, type: value as "percent" | "fixed" }))}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="percent">درصدی</SelectItem>
+                  <SelectItem value="fixed">مبلغ ثابت</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>مقدار</Label>
+              <Input type="number" value={form.value} onChange={(event) => setForm((current) => ({ ...current, value: Number(event.target.value) }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>حداکثر تخفیف</Label>
+              <Input type="number" value={form.max_discount ?? ""} onChange={(event) => setForm((current) => ({ ...current, max_discount: event.target.value ? Number(event.target.value) : null }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>حداقل مبلغ</Label>
+              <Input type="number" value={form.min_amount ?? ""} onChange={(event) => setForm((current) => ({ ...current, min_amount: event.target.value ? Number(event.target.value) : null }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>محدودیت کل</Label>
+              <Input type="number" value={form.usage_limit_total ?? ""} onChange={(event) => setForm((current) => ({ ...current, usage_limit_total: event.target.value ? Number(event.target.value) : null }))} />
+            </div>
+            <div className="space-y-2">
+              <Label>محدودیت هر کاربر</Label>
+              <Input type="number" value={form.usage_limit_per_user ?? ""} onChange={(event) => setForm((current) => ({ ...current, usage_limit_per_user: event.target.value ? Number(event.target.value) : null }))} />
+            </div>
+            <div className="flex items-center justify-between rounded-xl border px-3 py-2">
+              <Label>فعال</Label>
+              <Switch checked={form.is_active ?? true} onCheckedChange={(checked) => setForm((current) => ({ ...current, is_active: checked }))} />
+            </div>
+            <AdminDateTimeField label="شروع اعتبار" value={form.starts_at} onChange={(value) => setForm((current) => ({ ...current, starts_at: value }))} />
+            <AdminDateTimeField label="پایان اعتبار" value={form.ends_at} onChange={(value) => setForm((current) => ({ ...current, ends_at: value }))} />
+          </div>
+          <DialogFooter className="gap-2 sm:justify-start">
+            <Button variant="outline" onClick={() => setOpen(false)}>انصراف</Button>
+            <Button disabled={saveMutation.isPending || !form.code.trim() || form.value <= 0} onClick={() => saveMutation.mutate()}>
+              ذخیره
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}