feat(frontend): add React UI — procurement office, wizard, suppliers, inventory panel (dash port), role-based login
This commit is contained in:
ali_mohaghegh
@@ -0,0 +1,178 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Navigate, useParams } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { Inbox, Plus } from "lucide-react";
|
||||
import type { Supplier } from "../../lib/types";
|
||||
import { nextId } from "../../lib/api";
|
||||
import { useAddSupplier, useMaterials, useQuotes, useRemoveSupplier, useStoreData, useSuppliers } from "../../hooks";
|
||||
import { normalize } from "../../lib/normalize";
|
||||
import { Header, PageLayout } from "../../components/layout/Header";
|
||||
import { EmptyState } from "../../components/EmptyState";
|
||||
import { Combobox } from "../../components/Combobox";
|
||||
import { MultiSelectCombobox } from "../../components/MultiSelectCombobox";
|
||||
import { SupplierCard, suppliersOfCategory, topicCategories, topicFromParam } from "./supplierUtils";
|
||||
import { Button } from "../../components/ui/button";
|
||||
|
||||
// صفحه‌ی تأمین‌کننده‌های یک متریال + فرم افزودن تأمین‌کننده
|
||||
export function CategoryPage() {
|
||||
useStoreData();
|
||||
const { topic: topicParam = "", category: catParam = "" } = useParams();
|
||||
|
||||
const materials = useMaterials();
|
||||
const suppliers = useSuppliers();
|
||||
const quotes = useQuotes();
|
||||
const addSupplier = useAddSupplier();
|
||||
const removeSupplier = useRemoveSupplier();
|
||||
|
||||
const topic = useMemo(() => topicFromParam(topicParam), [topicParam]);
|
||||
const matched = useMemo(
|
||||
() => (topic ? topicCategories(topic, materials, suppliers).find((c) => normalize(c) === normalize(catParam)) : undefined),
|
||||
[topic, catParam, materials, suppliers],
|
||||
);
|
||||
|
||||
const [form, setForm] = useState<{ name: string; categories: string[]; location: string; phone: string; contact: string }>({
|
||||
name: "",
|
||||
categories: [],
|
||||
location: "",
|
||||
phone: "",
|
||||
contact: "",
|
||||
});
|
||||
|
||||
// همه‌ی تأمین‌کننده‌ها برای انتخاب سریع (task: کومبوکس کش‌شده)
|
||||
const supplierOptions = useMemo(
|
||||
() => suppliers.map((s) => ({ id: s.id, name: s.name })),
|
||||
[suppliers],
|
||||
);
|
||||
|
||||
if (!topic || !matched) {
|
||||
return topic ? <Navigate to={`/topics/${encodeURIComponent(topic)}`} replace /> : <Navigate to="/suppliers" replace />;
|
||||
}
|
||||
|
||||
const sups = suppliersOfCategory(topic, matched, suppliers);
|
||||
|
||||
// متریال‌های خریداری‌شده از هر تأمین‌کننده
|
||||
const supMats = useMemo(() => {
|
||||
const map = new Map<string, string[]>();
|
||||
quotes.forEach((q) => {
|
||||
(q.line_items || []).forEach((li) => {
|
||||
if (li.rejected) return;
|
||||
const m = materials.find((x) => x.id === li.material_id);
|
||||
if (!m) return;
|
||||
const label = `${m.category}${m.brand ? " " + m.brand : ""}${m.specs.length ? " (" + m.specs.join("، ") + ")" : ""}`;
|
||||
if (!map.has(q.supplier_id)) map.set(q.supplier_id, []);
|
||||
const list = map.get(q.supplier_id)!;
|
||||
if (!list.includes(label)) list.push(label);
|
||||
});
|
||||
});
|
||||
return map;
|
||||
}, [quotes, materials]);
|
||||
|
||||
const addSup = () => {
|
||||
const name = form.name.trim();
|
||||
if (!name) {
|
||||
toast.error("نام تأمین‌کننده را وارد کنید.");
|
||||
return;
|
||||
}
|
||||
// اگر متریالی انتخاب نشده، تأمین‌کننده به همین متریالِ صفحه اضافه می‌شود
|
||||
const cats = form.categories.length ? form.categories : [matched];
|
||||
const s: Supplier = {
|
||||
id: nextId("s", suppliers),
|
||||
topic,
|
||||
categories: cats,
|
||||
name,
|
||||
location: form.location.trim(),
|
||||
phone: form.phone.trim(),
|
||||
contact: form.contact.trim(),
|
||||
};
|
||||
void addSupplier.mutateAsync(s);
|
||||
setForm({ name: "", categories: [], location: "", phone: "", contact: "" });
|
||||
toast.success("تأمین‌کننده افزوده شد.");
|
||||
};
|
||||
|
||||
const removeSup = (id: string) => {
|
||||
const s = suppliers.find((x) => x.id === id);
|
||||
if (!s) return;
|
||||
if (confirm(`تأمین‌کننده «${s.name}» حذف شود؟ پیشنهادهای قبلی او در دفتر باقی می‌مانند.`)) {
|
||||
void removeSupplier.mutateAsync(id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Header title={matched} sub={`تأمین‌کننده‌های این متریال — ${topic}`} backTo="/suppliers" backLabel="موضوع‌ها" />
|
||||
<PageLayout className="flex flex-col gap-4">
|
||||
{!sups.length ? (
|
||||
<EmptyState icon={Inbox} text="هنوز تأمین‌کننده‌ای برای این متریال ثبت نشده است." />
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
|
||||
{sups.map((s) => (
|
||||
<SupplierCard key={s.id} s={s} topic={topic} deletable onDelete={removeSup} materials={supMats.get(s.id) || []} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="add-panel">
|
||||
<h4>
|
||||
<Plus className="me-1 inline h-4 w-4 text-accent" /> افزودن تأمین‌کننده‌ی جدید
|
||||
</h4>
|
||||
<div className="grid max-w-2xl grid-cols-2 gap-3">
|
||||
<div className="field">
|
||||
<label>نام تأمین‌کننده *</label>
|
||||
<Combobox
|
||||
value={form.name}
|
||||
onChange={(it: { id: string; label: string }) => setForm((f) => ({ ...f, name: it.label }))}
|
||||
items={supplierOptions}
|
||||
allowAdd
|
||||
addSuffix="به عنوان تأمین‌کنندهٔ جدید"
|
||||
placeholder="تایپ کنید یا از تأمین‌کننده‌ها انتخاب کنید"
|
||||
onInputChange={(v) => setForm((f) => ({ ...f, name: v }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>متریال (ها)</label>
|
||||
<MultiSelectCombobox
|
||||
values={form.categories}
|
||||
onChange={(cats) => setForm((f) => ({ ...f, categories: cats }))}
|
||||
options={topicCategories(topic, materials, suppliers)}
|
||||
placeholder="متریال را انتخاب یا تایپ کنید..."
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>موقعیت (شهر - منطقه)</label>
|
||||
<input
|
||||
type="text"
|
||||
className="h-9 w-full rounded-lg border border-line bg-panel px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
|
||||
placeholder="مثلاً تهران - ظفر"
|
||||
value={form.location}
|
||||
onChange={(e) => setForm((f) => ({ ...f, location: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>تلفن</label>
|
||||
<input
|
||||
type="text"
|
||||
className="h-9 w-full rounded-lg border border-line bg-panel px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
|
||||
placeholder="۰۲۱-..."
|
||||
value={form.phone}
|
||||
onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>شخص رابط</label>
|
||||
<input
|
||||
type="text"
|
||||
className="h-9 w-full rounded-lg border border-line bg-panel px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
|
||||
placeholder="نام فرد"
|
||||
value={form.contact}
|
||||
onChange={(e) => setForm((f) => ({ ...f, contact: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" className="mt-3" onClick={addSup}>
|
||||
ذخیره تأمین‌کننده
|
||||
</Button>
|
||||
</div>
|
||||
</PageLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user