Add customer partnership form and admin requests list with detail modal.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
f192085c1f
commit
e687e4502e
@@ -30,6 +30,13 @@ export default function CustomerHomePage() {
|
||||
description: "اطلاعات حساب و آدرس‌ها",
|
||||
icon: <ProfileIcon />,
|
||||
},
|
||||
{
|
||||
href: "/account/partners",
|
||||
title: "شروع همکاری",
|
||||
titleEn: "Partnership",
|
||||
description: "درخواست همکاری به‌عنوان تولیدکننده",
|
||||
icon: <PartnersIcon />,
|
||||
},
|
||||
...(showAdmin
|
||||
? [
|
||||
{
|
||||
@@ -104,13 +111,13 @@ function OrdersIcon() {
|
||||
<path
|
||||
d="M6 7h12l-.8 11.2a1 1 0 0 1-1 .8H7.8a1 1 0 0 1-1-.8L6 7Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.15"
|
||||
strokeWidth="0.85"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9 7a3 3 0 0 1 6 0"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.15"
|
||||
strokeWidth="0.85"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
@@ -120,24 +127,43 @@ function OrdersIcon() {
|
||||
function ProfileIcon() {
|
||||
return (
|
||||
<svg {...iconProps()}>
|
||||
<circle cx="12" cy="8" r="3" stroke="currentColor" strokeWidth="1.15" />
|
||||
<circle cx="12" cy="8" r="3" stroke="currentColor" strokeWidth="0.85" />
|
||||
<path
|
||||
d="M5 19c1.5-3.2 3.8-4.8 7-4.8s5.5 1.6 7 4.8"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.15"
|
||||
strokeWidth="0.85"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function PartnersIcon() {
|
||||
return (
|
||||
<svg {...iconProps()}>
|
||||
<path
|
||||
d="M8 12h8M12 8v8"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.85"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M7 5.5h10a1.5 1.5 0 0 1 1.5 1.5v10a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 17V7A1.5 1.5 0 0 1 7 5.5Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.85"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function AdminIcon() {
|
||||
return (
|
||||
<svg {...iconProps()}>
|
||||
<path
|
||||
d="M4.5 10.5 12 4.5l7.5 6V19a1 1 0 0 1-1 1h-4.5v-5h-5v5H5.5a1 1 0 0 1-1-1v-8.5Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.15"
|
||||
strokeWidth="0.85"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@@ -0,0 +1,410 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import ClothesShell from "@/components/clothes/ClothesShell";
|
||||
import SearchableMultiSelect from "@/components/ui/SearchableMultiSelect";
|
||||
import { ApiError } from "@/lib/api";
|
||||
import { fetchProfile } from "@/lib/profile-api";
|
||||
import {
|
||||
createPartnershipRequest,
|
||||
fetchPublicCategoryOptions,
|
||||
uploadPartnershipImage,
|
||||
type FlatCategoryOption,
|
||||
} from "@/lib/partnership-api";
|
||||
|
||||
const PROVINCES = [
|
||||
"تهران",
|
||||
"اصفهان",
|
||||
"فارس",
|
||||
"خراسان رضوی",
|
||||
"آذربایجان شرقی",
|
||||
"آذربایجان غربی",
|
||||
"گیلان",
|
||||
"مازندران",
|
||||
"خوزستان",
|
||||
"کرمان",
|
||||
"یزد",
|
||||
"قم",
|
||||
"البرز",
|
||||
"همدان",
|
||||
"کردستان",
|
||||
"کرمانشاه",
|
||||
"هرمزگان",
|
||||
"بوشهر",
|
||||
"سیستان و بلوچستان",
|
||||
"گلستان",
|
||||
"قزوین",
|
||||
"زنجان",
|
||||
"اردبیل",
|
||||
"لرستان",
|
||||
"مرکزی",
|
||||
"سمنان",
|
||||
"چهارمحال و بختیاری",
|
||||
"کهگیلویه و بویراحمد",
|
||||
"ایلام",
|
||||
"خراسان شمالی",
|
||||
"خراسان جنوبی",
|
||||
];
|
||||
|
||||
const MAX_IMAGES = 6;
|
||||
|
||||
export default function AccountPartnersPage() {
|
||||
const [categories, setCategories] = useState<FlatCategoryOption[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [cellNumber, setCellNumber] = useState("");
|
||||
const [businessNameFa, setBusinessNameFa] = useState("");
|
||||
const [businessNameEn, setBusinessNameEn] = useState("");
|
||||
const [selectedCategories, setSelectedCategories] = useState<number[]>([]);
|
||||
const [description, setDescription] = useState("");
|
||||
const [imageUrls, setImageUrls] = useState<string[]>([]);
|
||||
const [landline, setLandline] = useState("");
|
||||
const [instagram, setInstagram] = useState("");
|
||||
const [city, setCity] = useState("");
|
||||
const [province, setProvince] = useState("");
|
||||
const [address, setAddress] = useState("");
|
||||
const [postalCode, setPostalCode] = useState("");
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [sent, setSent] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
void (async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [profile, cats] = await Promise.all([
|
||||
fetchProfile(),
|
||||
fetchPublicCategoryOptions(),
|
||||
]);
|
||||
if (cancelled) return;
|
||||
setCellNumber(profile.cellNumber || "");
|
||||
if (profile.instagram) setInstagram(profile.instagram);
|
||||
setCategories(cats);
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof ApiError
|
||||
? err.message
|
||||
: "بارگذاری فرم ناموفق بود",
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function handleImagesSelected(
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) {
|
||||
const files = Array.from(event.target.files ?? []);
|
||||
event.target.value = "";
|
||||
if (!files.length) return;
|
||||
|
||||
const remaining = MAX_IMAGES - imageUrls.length;
|
||||
if (remaining <= 0) {
|
||||
setError(`حداکثر ${MAX_IMAGES} تصویر می‌توانید بارگذاری کنید`);
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null);
|
||||
setUploading(true);
|
||||
try {
|
||||
const uploaded: string[] = [];
|
||||
for (const file of files.slice(0, remaining)) {
|
||||
const result = await uploadPartnershipImage(file);
|
||||
uploaded.push(result.url);
|
||||
}
|
||||
setImageUrls((prev) => [...prev, ...uploaded]);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof ApiError ? err.message : "بارگذاری تصویر ناموفق بود",
|
||||
);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
|
||||
if (!selectedCategories.length) {
|
||||
setError("حداقل یک دسته‌بندی فعالیت انتخاب کنید");
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
await createPartnershipRequest({
|
||||
businessNameFa: businessNameFa.trim(),
|
||||
businessNameEn: businessNameEn.trim(),
|
||||
categoryIds: selectedCategories,
|
||||
description: description.trim(),
|
||||
imageUrls,
|
||||
landline: landline.trim() || undefined,
|
||||
instagram: instagram.trim() || undefined,
|
||||
city: city.trim(),
|
||||
province,
|
||||
address: address.trim(),
|
||||
postalCode: postalCode.trim(),
|
||||
});
|
||||
setSent(true);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof ApiError ? err.message : "ارسال درخواست ناموفق بود",
|
||||
);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ClothesShell
|
||||
eyebrow="Partnership"
|
||||
title="شروع همکاری"
|
||||
description="اگر تولیدکننده‌اید، اطلاعات کسب‌وکار خود را ارسال کنید تا امکان همکاری را بررسی کنیم."
|
||||
breadcrumbs={[
|
||||
{ label: "حساب کاربری", href: "/account" },
|
||||
{ label: "شروع همکاری" },
|
||||
]}
|
||||
>
|
||||
{loading ? (
|
||||
<p className="rounded-lg border border-line bg-surface px-4 py-10 text-center text-sm text-muted">
|
||||
در حال بارگذاری…
|
||||
</p>
|
||||
) : sent ? (
|
||||
<div className="rounded-lg border border-line bg-surface px-5 py-10 text-center">
|
||||
<p className="font-doran text-xl text-ink">درخواست شما ثبت شد</p>
|
||||
<p
|
||||
dir="ltr"
|
||||
className="mt-1 font-display text-[10px] uppercase tracking-[0.16em] text-muted"
|
||||
>
|
||||
Partnership request received
|
||||
</p>
|
||||
<p className="mt-3 text-sm leading-7 text-muted">
|
||||
تیم مانا به‌زودی درخواست همکاری شما را بررسی می‌کند.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form
|
||||
onSubmit={(e) => void handleSubmit(e)}
|
||||
className="dash-enter space-y-3"
|
||||
dir="rtl"
|
||||
>
|
||||
{error ? (
|
||||
<p className="rounded-lg border border-line bg-surface px-4 py-3 text-sm text-red-600">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<section className="rounded-lg border border-line bg-surface p-4 sm:p-5">
|
||||
<h2 className="mb-4 font-doran text-lg text-ink">اطلاعات کسب‌وکار</h2>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-12">
|
||||
<div className="clothes-field sm:col-span-6">
|
||||
<label htmlFor="partner-name-fa">نام کسب‌وکار (فارسی)</label>
|
||||
<input
|
||||
id="partner-name-fa"
|
||||
required
|
||||
value={businessNameFa}
|
||||
onChange={(e) => setBusinessNameFa(e.target.value)}
|
||||
placeholder="نام برند یا فروشگاه"
|
||||
/>
|
||||
</div>
|
||||
<div className="clothes-field sm:col-span-6">
|
||||
<label htmlFor="partner-name-en">Business name (EN)</label>
|
||||
<input
|
||||
id="partner-name-en"
|
||||
dir="ltr"
|
||||
value={businessNameEn}
|
||||
onChange={(e) => setBusinessNameEn(e.target.value)}
|
||||
placeholder="Brand or shop name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="clothes-field sm:col-span-12">
|
||||
<label>دسته‌بندی فعالیت</label>
|
||||
<SearchableMultiSelect
|
||||
options={categories}
|
||||
value={selectedCategories}
|
||||
onChange={setSelectedCategories}
|
||||
placeholder="انتخاب دسته‌بندی‌ها"
|
||||
searchPlaceholder="جستجوی دسته‌بندی..."
|
||||
/>
|
||||
<span className="text-[0.65rem] text-muted">
|
||||
می‌توانید چند مورد انتخاب کنید
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="clothes-field sm:col-span-12">
|
||||
<label htmlFor="partner-desc">توضیحات</label>
|
||||
<textarea
|
||||
id="partner-desc"
|
||||
required
|
||||
rows={5}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="درباره محصولات، ظرفیت تولید و نحوه همکاری بنویسید..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-12">
|
||||
<div className="mb-2 flex items-center justify-between gap-3">
|
||||
<span className="text-sm text-ink">تصاویر</span>
|
||||
<span className="text-xs text-muted">
|
||||
{imageUrls.length}/{MAX_IMAGES}
|
||||
</span>
|
||||
</div>
|
||||
{imageUrls.length > 0 ? (
|
||||
<div className="mb-3 flex flex-wrap gap-2">
|
||||
{imageUrls.map((url) => (
|
||||
<div
|
||||
key={url}
|
||||
className="relative overflow-hidden rounded border border-line bg-[#f7f7f5]"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={url}
|
||||
alt=""
|
||||
className="h-28 w-auto max-w-full object-contain"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setImageUrls((prev) => prev.filter((u) => u !== url))
|
||||
}
|
||||
className="absolute start-1 top-1 rounded bg-ink/80 px-1.5 py-0.5 text-[10px] text-white"
|
||||
>
|
||||
حذف
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{imageUrls.length < MAX_IMAGES ? (
|
||||
<label className="inline-flex cursor-pointer items-center rounded border border-dashed border-line bg-white px-3 py-2.5 text-sm text-ink/80 transition-colors hover:border-ink hover:text-ink">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
multiple
|
||||
className="sr-only"
|
||||
disabled={uploading}
|
||||
onChange={handleImagesSelected}
|
||||
/>
|
||||
{uploading ? "در حال بارگذاری…" : "افزودن تصویر"}
|
||||
</label>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border border-line bg-surface p-4 sm:p-5">
|
||||
<h2 className="mb-4 font-doran text-lg text-ink">اطلاعات تماس</h2>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-12">
|
||||
<div className="clothes-field sm:col-span-4">
|
||||
<label htmlFor="partner-cell">شماره موبایل</label>
|
||||
<input
|
||||
id="partner-cell"
|
||||
dir="ltr"
|
||||
className="!text-end font-montserrat profile-input-locked"
|
||||
value={cellNumber}
|
||||
readOnly
|
||||
aria-readonly="true"
|
||||
/>
|
||||
<span className="text-[0.65rem] text-muted">قابل تغییر نیست</span>
|
||||
</div>
|
||||
<div className="clothes-field sm:col-span-4">
|
||||
<label htmlFor="partner-landline">تلفن ثابت</label>
|
||||
<input
|
||||
id="partner-landline"
|
||||
dir="ltr"
|
||||
value={landline}
|
||||
onChange={(e) => setLandline(e.target.value)}
|
||||
placeholder="021xxxxxxx"
|
||||
/>
|
||||
</div>
|
||||
<div className="clothes-field sm:col-span-4">
|
||||
<label htmlFor="partner-ig">اینستاگرام</label>
|
||||
<input
|
||||
id="partner-ig"
|
||||
dir="ltr"
|
||||
value={instagram}
|
||||
onChange={(e) => setInstagram(e.target.value)}
|
||||
placeholder="@username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border border-line bg-surface p-4 sm:p-5">
|
||||
<h2 className="mb-4 font-doran text-lg text-ink">آدرس</h2>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-12">
|
||||
<div className="clothes-field sm:col-span-4">
|
||||
<label htmlFor="partner-province">استان</label>
|
||||
<select
|
||||
id="partner-province"
|
||||
required
|
||||
value={province}
|
||||
onChange={(e) => setProvince(e.target.value)}
|
||||
>
|
||||
<option value="">انتخاب استان</option>
|
||||
{PROVINCES.map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="clothes-field sm:col-span-4">
|
||||
<label htmlFor="partner-city">شهر</label>
|
||||
<input
|
||||
id="partner-city"
|
||||
required
|
||||
value={city}
|
||||
onChange={(e) => setCity(e.target.value)}
|
||||
placeholder="شهر"
|
||||
/>
|
||||
</div>
|
||||
<div className="clothes-field sm:col-span-4">
|
||||
<label htmlFor="partner-postal">کد پستی</label>
|
||||
<input
|
||||
id="partner-postal"
|
||||
dir="ltr"
|
||||
required
|
||||
value={postalCode}
|
||||
onChange={(e) => setPostalCode(e.target.value)}
|
||||
placeholder="xxxxxxxxxx"
|
||||
/>
|
||||
</div>
|
||||
<div className="clothes-field sm:col-span-12">
|
||||
<label htmlFor="partner-address">آدرس</label>
|
||||
<textarea
|
||||
id="partner-address"
|
||||
required
|
||||
rows={3}
|
||||
value={address}
|
||||
onChange={(e) => setAddress(e.target.value)}
|
||||
placeholder="آدرس کامل"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex justify-end pt-1">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving || uploading}
|
||||
className="inline-flex h-11 min-w-[12rem] items-center justify-center rounded-[5px] bg-ink px-5 text-sm text-white transition-opacity hover:opacity-90 disabled:opacity-50"
|
||||
>
|
||||
{saving ? "..." : "ارسال درخواست همکاری"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</ClothesShell>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,337 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import ClothesShell from "@/components/clothes/ClothesShell";
|
||||
import Modal from "@/components/ui/Modal";
|
||||
import Pagination from "@/components/ui/Pagination";
|
||||
import { ApiError, api } from "@/lib/api";
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
type PartnershipCategory = {
|
||||
id: number;
|
||||
nameFa: string;
|
||||
nameEn: string;
|
||||
};
|
||||
|
||||
type PartnershipItem = {
|
||||
id: string;
|
||||
businessNameFa: string;
|
||||
businessNameEn: string;
|
||||
cellNumber: string;
|
||||
landline: string | null;
|
||||
instagram: string | null;
|
||||
city: string;
|
||||
province: string;
|
||||
address: string;
|
||||
postalCode: string;
|
||||
description: string;
|
||||
imageUrls: string[];
|
||||
status: string;
|
||||
createdAt: string;
|
||||
categories: PartnershipCategory[];
|
||||
user: {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
cellNumber: string;
|
||||
};
|
||||
};
|
||||
|
||||
type ListResponse = {
|
||||
items: PartnershipItem[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
totalPages: number;
|
||||
};
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
pending: "در انتظار",
|
||||
reviewed: "بررسی‌شده",
|
||||
accepted: "پذیرفته",
|
||||
rejected: "رد شده",
|
||||
};
|
||||
|
||||
function formatDate(value: string) {
|
||||
try {
|
||||
return new Intl.DateTimeFormat("fa-IR", {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
}).format(new Date(value));
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-1 border-b border-line/70 py-2.5 last:border-b-0 sm:grid-cols-[8rem_1fr] sm:gap-3">
|
||||
<dt className="text-xs text-muted">{label}</dt>
|
||||
<dd className="text-sm text-ink">{children}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function WebsiteRequestsPage() {
|
||||
const [items, setItems] = useState<PartnershipItem[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<PartnershipItem | null>(null);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
|
||||
const load = useCallback(async (nextPage: number) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await api<ListResponse>(
|
||||
`/partnership-requests?page=${nextPage}&limit=${PAGE_SIZE}`,
|
||||
);
|
||||
setItems(data.items ?? []);
|
||||
setPage(data.page ?? nextPage);
|
||||
setTotalPages(data.totalPages ?? 1);
|
||||
setTotalItems(data.total ?? 0);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof ApiError
|
||||
? err.message
|
||||
: "بارگذاری درخواست‌ها ناموفق بود",
|
||||
);
|
||||
setItems([]);
|
||||
setTotalItems(0);
|
||||
setTotalPages(1);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load(page);
|
||||
}, [load, page]);
|
||||
|
||||
async function openDetail(item: PartnershipItem) {
|
||||
setSelected(item);
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const fresh = await api<PartnershipItem>(
|
||||
`/partnership-requests/${item.id}`,
|
||||
);
|
||||
setSelected(fresh);
|
||||
} catch {
|
||||
/* keep list payload if detail fetch fails */
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ClothesShell
|
||||
eyebrow="Requests"
|
||||
title="درخواست‌ها"
|
||||
description="پیام‌ها و درخواست‌های ارسال‌شده از وب‌سایت."
|
||||
description="درخواست‌های همکاری ارسال‌شده از وب‌سایت."
|
||||
breadcrumbs={[
|
||||
{ label: "داشبورد", href: "/" },
|
||||
{ label: "وب‌سایت", href: "/website" },
|
||||
{ label: "درخواست‌ها" },
|
||||
]}
|
||||
>
|
||||
<p className="rounded-lg border border-line bg-surface px-4 py-10 text-center text-sm text-muted">
|
||||
به‌زودی درخواست‌های کاربران اینجا نمایش داده می‌شود.
|
||||
</p>
|
||||
{error ? (
|
||||
<p className="mb-2 rounded-lg border border-line bg-surface px-4 py-3 text-sm text-red-600">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{loading ? (
|
||||
<p className="rounded-lg border border-line bg-surface px-4 py-10 text-center text-sm text-muted">
|
||||
در حال بارگذاری…
|
||||
</p>
|
||||
) : items.length === 0 ? (
|
||||
<p className="rounded-lg border border-line bg-surface px-4 py-10 text-center text-sm text-muted">
|
||||
هنوز درخواستی ثبت نشده است.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-hidden rounded-lg border border-line bg-surface">
|
||||
<div className="hidden grid-cols-[1.4fr_1fr_1fr_7rem_8rem] gap-3 border-b border-line bg-[#f7f7f5] px-4 py-2.5 text-xs text-muted sm:grid">
|
||||
<span>کسب‌وکار</span>
|
||||
<span>متقاضی</span>
|
||||
<span>شهر</span>
|
||||
<span>وضعیت</span>
|
||||
<span>تاریخ</span>
|
||||
</div>
|
||||
|
||||
<ul className="divide-y divide-line">
|
||||
{items.map((item, i) => (
|
||||
<li key={item.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void openDetail(item)}
|
||||
className="grid w-full grid-cols-1 gap-2 px-4 py-3.5 text-right transition-colors hover:bg-[#fafafa] sm:grid-cols-[1.4fr_1fr_1fr_7rem_8rem] sm:items-center sm:gap-3 dash-enter"
|
||||
style={{ animationDelay: `${50 + i * 40}ms` }}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-ink">
|
||||
{item.businessNameFa}
|
||||
</p>
|
||||
{item.businessNameEn ? (
|
||||
<p
|
||||
dir="ltr"
|
||||
className="mt-0.5 truncate font-montserrat text-[10px] text-muted"
|
||||
>
|
||||
{item.businessNameEn}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm text-ink/80">
|
||||
{item.user.firstName} {item.user.lastName}
|
||||
</p>
|
||||
<p
|
||||
dir="ltr"
|
||||
className="mt-0.5 truncate font-montserrat text-[10px] text-muted"
|
||||
>
|
||||
{item.cellNumber}
|
||||
</p>
|
||||
</div>
|
||||
<p className="truncate text-sm text-ink/75">
|
||||
{item.province}، {item.city}
|
||||
</p>
|
||||
<span className="inline-flex w-fit rounded bg-ink/5 px-2 py-0.5 text-[11px] text-ink/70">
|
||||
{STATUS_LABELS[item.status] ?? item.status}
|
||||
</span>
|
||||
<time
|
||||
dateTime={item.createdAt}
|
||||
className="text-xs text-muted"
|
||||
>
|
||||
{formatDate(item.createdAt)}
|
||||
</time>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
totalItems={totalItems}
|
||||
pageSize={PAGE_SIZE}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
open={Boolean(selected)}
|
||||
title={selected?.businessNameFa || "جزئیات درخواست"}
|
||||
subtitle={selected?.businessNameEn || "Partnership request"}
|
||||
onClose={() => setSelected(null)}
|
||||
wide="xl"
|
||||
footer={
|
||||
<button
|
||||
type="button"
|
||||
className="modal-btn-ghost"
|
||||
onClick={() => setSelected(null)}
|
||||
>
|
||||
بستن
|
||||
</button>
|
||||
}
|
||||
>
|
||||
{selected ? (
|
||||
detailLoading ? (
|
||||
<p className="py-6 text-center text-sm text-muted">
|
||||
در حال بارگذاری…
|
||||
</p>
|
||||
) : (
|
||||
<dl className="space-y-0" dir="rtl">
|
||||
<DetailRow label="وضعیت">
|
||||
{STATUS_LABELS[selected.status] ?? selected.status}
|
||||
</DetailRow>
|
||||
<DetailRow label="تاریخ">
|
||||
{formatDate(selected.createdAt)}
|
||||
</DetailRow>
|
||||
<DetailRow label="متقاضی">
|
||||
{selected.user.firstName} {selected.user.lastName}
|
||||
</DetailRow>
|
||||
<DetailRow label="موبایل">
|
||||
<span dir="ltr" className="font-montserrat">
|
||||
{selected.cellNumber}
|
||||
</span>
|
||||
</DetailRow>
|
||||
<DetailRow label="تلفن ثابت">
|
||||
{selected.landline ? (
|
||||
<span dir="ltr" className="font-montserrat">
|
||||
{selected.landline}
|
||||
</span>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</DetailRow>
|
||||
<DetailRow label="اینستاگرام">
|
||||
{selected.instagram ? (
|
||||
<span dir="ltr">{selected.instagram}</span>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</DetailRow>
|
||||
<DetailRow label="دسته‌بندی‌ها">
|
||||
{selected.categories.length
|
||||
? selected.categories.map((c) => c.nameFa).join("، ")
|
||||
: "—"}
|
||||
</DetailRow>
|
||||
<DetailRow label="آدرس">
|
||||
{selected.province}، {selected.city}
|
||||
<br />
|
||||
{selected.address}
|
||||
{selected.postalCode ? (
|
||||
<>
|
||||
<br />
|
||||
<span dir="ltr" className="font-montserrat text-xs text-muted">
|
||||
{selected.postalCode}
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
</DetailRow>
|
||||
<DetailRow label="توضیحات">
|
||||
<p className="whitespace-pre-wrap leading-7">
|
||||
{selected.description}
|
||||
</p>
|
||||
</DetailRow>
|
||||
{selected.imageUrls.length > 0 ? (
|
||||
<DetailRow label="تصاویر">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selected.imageUrls.map((url) => (
|
||||
<a
|
||||
key={url}
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block overflow-hidden rounded border border-line bg-[#f7f7f5]"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={url}
|
||||
alt=""
|
||||
className="h-28 w-auto max-w-full object-contain"
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</DetailRow>
|
||||
) : null}
|
||||
</dl>
|
||||
)
|
||||
) : null}
|
||||
</Modal>
|
||||
</ClothesShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,10 @@
|
||||
import { useEffect } from "react";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import {
|
||||
readReturnToParam,
|
||||
redirectWithAuthHandoff,
|
||||
} from "@/lib/auth-handoff";
|
||||
|
||||
const PUBLIC_PATHS = ["/login"];
|
||||
const CUSTOMER_HOME = "/account";
|
||||
@@ -39,7 +43,10 @@ export default function RequireAuth({
|
||||
if (loading) return;
|
||||
// Already signed in — leave the login page.
|
||||
if (isPublic) {
|
||||
if (user) router.replace(CUSTOMER_HOME);
|
||||
if (user) {
|
||||
if (redirectWithAuthHandoff(readReturnToParam())) return;
|
||||
router.replace(CUSTOMER_HOME);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!user) {
|
||||
|
||||
@@ -11,6 +11,10 @@ import {
|
||||
import ManaLogo from "@/components/ui/ManaLogo";
|
||||
import { ApiError } from "@/lib/api";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import {
|
||||
readReturnToParam,
|
||||
redirectWithAuthHandoff,
|
||||
} from "@/lib/auth-handoff";
|
||||
|
||||
type AuthMode = "login" | "register";
|
||||
type LoginMethod = "password" | "otp";
|
||||
@@ -35,6 +39,7 @@ function AuthFormInner() {
|
||||
const isLogin = mode === "login";
|
||||
|
||||
function afterAuth(_role: string) {
|
||||
if (redirectWithAuthHandoff(readReturnToParam())) return;
|
||||
router.replace("/account");
|
||||
}
|
||||
|
||||
|
||||
@@ -22,8 +22,13 @@ const ADMIN_LINKS: NavLink[] = [
|
||||
const CUSTOMER_LINKS: NavLink[] = [
|
||||
{ href: "/account/orders", label: "سفارش‌های من" },
|
||||
{ href: "/account/profile", label: "پروفایل من" },
|
||||
{ href: "/account/partners", label: "شروع همکاری" },
|
||||
];
|
||||
|
||||
const SITE_URL =
|
||||
process.env.NEXT_PUBLIC_SITE_URL?.replace(/\/$/, "") ||
|
||||
"http://mana-collection.com:3000";
|
||||
|
||||
function canAccessAdmin(role: string | undefined) {
|
||||
return role === "STORE_ADMIN" || role === "SUPER_ADMIN";
|
||||
}
|
||||
@@ -44,7 +49,6 @@ export default function DashboardHeader({
|
||||
const pathname = usePathname();
|
||||
const onCustomerArea = isCustomerPath(pathname);
|
||||
const isAdmin = canAccessAdmin(user?.role);
|
||||
const homeHref = onCustomerArea ? "/account" : "/";
|
||||
const profileHref = onCustomerArea ? "/account/profile" : "/profile";
|
||||
const navLinks = onCustomerArea
|
||||
? [
|
||||
@@ -100,7 +104,7 @@ export default function DashboardHeader({
|
||||
<MenuIcon open={menuOpen} />
|
||||
</button>
|
||||
|
||||
<ManaLogo href={homeHref} height={31} variant="black" />
|
||||
<ManaLogo href={SITE_URL} height={31} variant="black" />
|
||||
</div>
|
||||
|
||||
<div ref={userRef} className="relative">
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
export type SearchableOption = {
|
||||
id: number;
|
||||
label: string;
|
||||
depth?: number;
|
||||
};
|
||||
|
||||
type SearchableMultiSelectProps = {
|
||||
options: SearchableOption[];
|
||||
value: number[];
|
||||
onChange: (next: number[]) => void;
|
||||
placeholder?: string;
|
||||
searchPlaceholder?: string;
|
||||
emptyLabel?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export default function SearchableMultiSelect({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "انتخاب کنید",
|
||||
searchPlaceholder = "جستجو...",
|
||||
emptyLabel = "موردی یافت نشد",
|
||||
disabled = false,
|
||||
}: SearchableMultiSelectProps) {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const selected = useMemo(() => {
|
||||
const map = new Map(options.map((o) => [o.id, o]));
|
||||
return value.map((id) => map.get(id)).filter(Boolean) as SearchableOption[];
|
||||
}, [options, value]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return options;
|
||||
return options.filter((o) => o.label.toLowerCase().includes(q));
|
||||
}, [options, query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onDoc = (e: MouseEvent) => {
|
||||
if (!rootRef.current?.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
setQuery("");
|
||||
}
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
setOpen(false);
|
||||
setQuery("");
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", onDoc);
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onDoc);
|
||||
window.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
function toggle(id: number) {
|
||||
if (value.includes(id)) onChange(value.filter((x) => x !== id));
|
||||
else onChange([...value, id]);
|
||||
}
|
||||
|
||||
function remove(id: number) {
|
||||
onChange(value.filter((x) => x !== id));
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={rootRef} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-line bg-white px-2.5 py-1.5 text-right text-sm text-ink outline-none transition-colors hover:border-ink/40 focus:border-ink disabled:cursor-not-allowed disabled:bg-[#f5f5f3]"
|
||||
>
|
||||
{selected.length === 0 ? (
|
||||
<span className="px-1 py-1 text-muted">{placeholder}</span>
|
||||
) : (
|
||||
selected.map((item) => (
|
||||
<span
|
||||
key={item.id}
|
||||
className="inline-flex max-w-full items-center gap-1 rounded bg-[#eee] px-2 py-1 text-xs text-ink"
|
||||
>
|
||||
<span className="truncate">{item.label}</span>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`حذف ${item.label}`}
|
||||
className="shrink-0 text-muted hover:text-ink"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
remove(item.id);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
remove(item.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
×
|
||||
</span>
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
<span className="ms-auto shrink-0 px-1 text-muted" aria-hidden>
|
||||
▾
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{open ? (
|
||||
<div className="absolute inset-x-0 top-[calc(100%+4px)] z-30 overflow-hidden rounded-md border border-line bg-white shadow-[0_12px_40px_rgba(0,0,0,0.12)]">
|
||||
<div className="border-b border-line p-2">
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={searchPlaceholder}
|
||||
className="h-9 w-full rounded border border-line bg-white px-3 text-sm outline-none focus:border-ink"
|
||||
/>
|
||||
</div>
|
||||
<ul
|
||||
role="listbox"
|
||||
aria-multiselectable
|
||||
className="max-h-56 overflow-y-auto py-1"
|
||||
>
|
||||
{filtered.length === 0 ? (
|
||||
<li className="px-3 py-3 text-center text-sm text-muted">
|
||||
{emptyLabel}
|
||||
</li>
|
||||
) : (
|
||||
filtered.map((opt) => {
|
||||
const checked = value.includes(opt.id);
|
||||
return (
|
||||
<li key={opt.id} role="option" aria-selected={checked}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(opt.id)}
|
||||
className={`flex w-full items-center gap-2 px-3 py-2 text-right text-sm hover:bg-[#f7f7f5] ${
|
||||
checked ? "bg-[#f7f7f5]" : ""
|
||||
}`}
|
||||
style={{
|
||||
paddingInlineStart: `${12 + (opt.depth ?? 0) * 12}px`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`flex size-4 shrink-0 items-center justify-center rounded border text-[10px] ${
|
||||
checked
|
||||
? "border-ink bg-ink text-white"
|
||||
: "border-line bg-white text-transparent"
|
||||
}`}
|
||||
aria-hidden
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 truncate">{opt.label}</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* After auth on the store app, send the user back to an external page
|
||||
* (e.g. website /partners) with tokens in the URL hash for cross-origin handoff.
|
||||
* Returns true if a handoff redirect was started.
|
||||
*/
|
||||
export function redirectWithAuthHandoff(returnTo: string | null | undefined): boolean {
|
||||
if (typeof window === "undefined" || !returnTo) return false;
|
||||
|
||||
try {
|
||||
const target = new URL(returnTo);
|
||||
if (target.protocol !== "http:" && target.protocol !== "https:") {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Same-origin return — no token handoff needed.
|
||||
if (target.origin === window.location.origin) {
|
||||
window.location.href = target.toString();
|
||||
return true;
|
||||
}
|
||||
|
||||
const access = localStorage.getItem("mana_access_token");
|
||||
const refresh = localStorage.getItem("mana_refresh_token");
|
||||
const user = localStorage.getItem("mana_user");
|
||||
if (!access || !refresh) return false;
|
||||
|
||||
const hash = new URLSearchParams({
|
||||
access_token: access,
|
||||
refresh_token: refresh,
|
||||
...(user ? { user } : {}),
|
||||
});
|
||||
target.hash = hash.toString();
|
||||
window.location.href = target.toString();
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function readReturnToParam(): string | null {
|
||||
if (typeof window === "undefined") return null;
|
||||
return new URLSearchParams(window.location.search).get("returnTo");
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { API_URL, ApiError, api } from "@/lib/api";
|
||||
|
||||
const STORE_SLUG =
|
||||
process.env.NEXT_PUBLIC_STORE_SLUG?.trim() || "mana-collection";
|
||||
|
||||
export type PublicCategoryNode = {
|
||||
id: number;
|
||||
parentId: number | null;
|
||||
nameFa: string;
|
||||
nameEn: string;
|
||||
children: PublicCategoryNode[];
|
||||
};
|
||||
|
||||
export type FlatCategoryOption = {
|
||||
id: number;
|
||||
label: string;
|
||||
depth: number;
|
||||
};
|
||||
|
||||
export type CreatePartnershipInput = {
|
||||
businessNameFa: string;
|
||||
businessNameEn?: string;
|
||||
categoryIds: number[];
|
||||
description: string;
|
||||
imageUrls: string[];
|
||||
landline?: string;
|
||||
instagram?: string;
|
||||
city: string;
|
||||
province: string;
|
||||
address: string;
|
||||
postalCode: string;
|
||||
};
|
||||
|
||||
function flattenCategories(
|
||||
nodes: PublicCategoryNode[],
|
||||
depth = 0,
|
||||
): FlatCategoryOption[] {
|
||||
const out: FlatCategoryOption[] = [];
|
||||
for (const node of nodes) {
|
||||
out.push({
|
||||
id: node.id,
|
||||
label: node.nameFa || node.nameEn || String(node.id),
|
||||
depth,
|
||||
});
|
||||
if (node.children?.length) {
|
||||
out.push(...flattenCategories(node.children, depth + 1));
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export async function fetchPublicCategoryOptions(): Promise<
|
||||
FlatCategoryOption[]
|
||||
> {
|
||||
const data = await api<{ categories: PublicCategoryNode[] }>(
|
||||
`/public/categories?storeSlug=${encodeURIComponent(STORE_SLUG)}`,
|
||||
{ auth: false },
|
||||
);
|
||||
return flattenCategories(data.categories ?? []);
|
||||
}
|
||||
|
||||
export async function createPartnershipRequest(body: CreatePartnershipInput) {
|
||||
return api("/partnership-requests", { method: "POST", body });
|
||||
}
|
||||
|
||||
export async function uploadPartnershipImage(file: File): Promise<{
|
||||
url: string;
|
||||
}> {
|
||||
const form = new FormData();
|
||||
form.append("file", file);
|
||||
|
||||
const headers: Record<string, string> = {};
|
||||
const token =
|
||||
typeof window !== "undefined"
|
||||
? localStorage.getItem("mana_access_token")
|
||||
: null;
|
||||
if (token) headers.Authorization = `Bearer ${token}`;
|
||||
|
||||
const res = await fetch(`${API_URL}/partnership-requests/images`, {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: form,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => null);
|
||||
const message =
|
||||
(body && typeof body === "object" && "message" in body
|
||||
? Array.isArray((body as { message: unknown }).message)
|
||||
? (body as { message: string[] }).message.join("، ")
|
||||
: String((body as { message: unknown }).message)
|
||||
: null) ||
|
||||
res.statusText ||
|
||||
"بارگذاری تصویر ناموفق بود";
|
||||
throw new ApiError(res.status, message, body);
|
||||
}
|
||||
|
||||
return (await res.json()) as { url: string };
|
||||
}
|
||||
Reference in New Issue
Block a user