2276 lines
110 KiB
TypeScript
2276 lines
110 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
import crypto from "crypto";
|
|
import {
|
|
type WholesaleOrder,
|
|
type WholesaleCustomer,
|
|
type WholesaleProduct,
|
|
type WholesaleSettings,
|
|
type WholesaleDashboardStats,
|
|
type NotificationRecipient,
|
|
getWholesaleOrders,
|
|
getWholesaleCustomers,
|
|
getWholesaleProducts,
|
|
getWholesaleSettings,
|
|
getWholesaleDashboardStats,
|
|
markWholesaleOrderFulfilled,
|
|
updateWholesaleOrderStatus,
|
|
deleteWholesaleOrder,
|
|
deleteWholesaleCustomer,
|
|
deleteWholesaleProduct,
|
|
saveWholesaleCustomer,
|
|
saveWholesaleProduct,
|
|
saveWholesaleSettings,
|
|
recordWholesaleDeposit,
|
|
bulkFulfillWholesaleOrders,
|
|
bulkRecordWholesaleDeposit,
|
|
enqueueWholesaleNotification,
|
|
getWebhookSettings,
|
|
saveWebhookSettings,
|
|
enqueueWholesaleWebhook,
|
|
getRecentWebhookActivity,
|
|
} from "@/actions/wholesale";
|
|
import DepositModal from "@/components/wholesale/DepositModal";
|
|
import OrderDetailsModal from "@/components/wholesale/OrderDetailsModal";
|
|
import { getPendingWholesaleRegistrations, approveWholesaleRegistration, getWholesaleCustomerPricing, upsertWholesaleCustomerPricing, deleteWholesaleCustomerPricing } from "@/actions/wholesale-register";
|
|
import { getCurrentAdminUser } from "@/actions/admin-user";
|
|
import { type AdminUser } from "@/lib/admin-permissions";
|
|
import { formatDate } from "@/lib/format-date";
|
|
|
|
type Tab = "dashboard" | "customers" | "products" | "orders" | "settings";
|
|
|
|
export default function WholesaleClient({ brandId }: { brandId: string }) {
|
|
const [tab, setTab] = useState<Tab>("dashboard");
|
|
const [msg, setMsg] = useState<{ kind: "success" | "error"; text: string } | null>(null);
|
|
const [adminUser, setAdminUser] = useState<AdminUser | null>(null);
|
|
|
|
// Data state
|
|
const [orders, setOrders] = useState<WholesaleOrder[]>([]);
|
|
const [customers, setCustomers] = useState<WholesaleCustomer[]>([]);
|
|
const [products, setProducts] = useState<WholesaleProduct[]>([]);
|
|
const [settings, setSettings] = useState<WholesaleSettings | null>(null);
|
|
const [stats, setStats] = useState<WholesaleDashboardStats | null>(null);
|
|
const [registrations, setRegistrations] = useState<Array<{
|
|
id: string; company_name: string | null; contact_name: string | null;
|
|
email: string; phone: string | null; account_status: string; created_at: string;
|
|
}>>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [webhookActivity, setWebhookActivity] = useState<Array<{
|
|
id: string; event_type: string; order_id: string | null;
|
|
status: string; attempts: number; created_at: string; response: string | null;
|
|
}>>([]);
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
setLoading(true);
|
|
const [au, o, c, p, s, st, r, wa] = await Promise.all([
|
|
getCurrentAdminUser(),
|
|
getWholesaleOrders(brandId),
|
|
getWholesaleCustomers(brandId),
|
|
getWholesaleProducts(brandId),
|
|
getWholesaleSettings(brandId),
|
|
getWholesaleDashboardStats(brandId),
|
|
getPendingWholesaleRegistrations(brandId),
|
|
getRecentWebhookActivity(brandId, 5),
|
|
]);
|
|
setAdminUser(au);
|
|
setOrders(o);
|
|
setCustomers(c);
|
|
setProducts(p);
|
|
setSettings(s);
|
|
setStats(st);
|
|
setRegistrations(r as typeof registrations);
|
|
setWebhookActivity(wa);
|
|
setLoading(false);
|
|
}
|
|
load();
|
|
}, [brandId]);
|
|
|
|
function showMsg(kind: "success" | "error", text: string) {
|
|
setMsg({ kind, text });
|
|
setTimeout(() => setMsg(null), 4000);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-zinc-950 flex items-center justify-center">
|
|
<p className="text-zinc-500">Loading wholesale data...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-zinc-950">
|
|
{/* Header */}
|
|
<div className="bg-zinc-900 border-b border-zinc-800 px-6 py-4">
|
|
<div className="mx-auto max-w-7xl flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-zinc-100">Wholesale Portal</h1>
|
|
<p className="mt-0.5 text-sm text-zinc-500">Manage wholesale orders, customers, and products</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab nav */}
|
|
<div className="bg-zinc-900 border-b border-zinc-800 px-6">
|
|
<div className="mx-auto max-w-7xl">
|
|
<nav className="flex gap-1 -mb-px">
|
|
{(["dashboard", "customers", "products", "orders", "settings"] as Tab[]).map((t) => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setTab(t)}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
tab === t
|
|
? "border-green-600 text-green-400"
|
|
: "border-transparent text-zinc-500 hover:text-zinc-300"
|
|
}`}
|
|
>
|
|
{t.charAt(0).toUpperCase() + t.slice(1)}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-7xl px-6 py-6">
|
|
{msg && (
|
|
<div className={`mb-4 rounded-xl border px-4 py-3 text-sm ${
|
|
msg.kind === "success"
|
|
? "border-green-200 bg-green-900/30 text-green-400"
|
|
: "border-red-200 bg-red-900/30 text-red-400"
|
|
}`}>
|
|
{msg.text}
|
|
</div>
|
|
)}
|
|
|
|
{tab === "dashboard" && (
|
|
<DashboardTab
|
|
stats={stats!}
|
|
recentOrders={orders.slice(0, 10)}
|
|
brandId={brandId}
|
|
onMsg={showMsg}
|
|
webhookActivity={webhookActivity}
|
|
/>
|
|
)}
|
|
{tab === "customers" && (
|
|
<CustomersTab
|
|
customers={customers}
|
|
products={products}
|
|
brandId={brandId}
|
|
onMsg={showMsg}
|
|
registrations={registrations}
|
|
onRefresh={async () => {
|
|
const r = await getPendingWholesaleRegistrations(brandId);
|
|
setRegistrations(r as typeof registrations);
|
|
}}
|
|
/>
|
|
)}
|
|
{tab === "products" && (
|
|
<ProductsTab
|
|
products={products}
|
|
brandId={brandId}
|
|
onMsg={showMsg}
|
|
onRefresh={async () => {
|
|
const p = await getWholesaleProducts(brandId);
|
|
setProducts(p);
|
|
}}
|
|
/>
|
|
)}
|
|
{tab === "orders" && (
|
|
<OrdersTab
|
|
orders={orders}
|
|
customers={customers}
|
|
brandId={brandId}
|
|
onMsg={showMsg}
|
|
onRefresh={async () => {
|
|
const o = await getWholesaleOrders(brandId);
|
|
setOrders(o);
|
|
}}
|
|
/>
|
|
)}
|
|
{tab === "settings" && (
|
|
<SettingsTab
|
|
settings={settings}
|
|
brandId={brandId}
|
|
onMsg={showMsg}
|
|
onRefresh={async () => {
|
|
const s = await getWholesaleSettings(brandId);
|
|
setSettings(s);
|
|
}}
|
|
canManageSettings={adminUser?.can_manage_settings ?? false}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Dashboard Tab ─────────────────────────────────────────────────────────────
|
|
|
|
function DashboardTab({ stats, recentOrders, brandId, onMsg, webhookActivity }: {
|
|
stats: WholesaleDashboardStats;
|
|
recentOrders: WholesaleOrder[];
|
|
brandId: string;
|
|
onMsg: (kind: "success" | "error", text: string) => void;
|
|
webhookActivity: Array<{
|
|
id: string; event_type: string; order_id: string | null;
|
|
status: string; attempts: number; created_at: string; response: string | null;
|
|
}>;
|
|
}) {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Stat cards */}
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
|
|
{[
|
|
{ label: "Open Orders", value: stats.open_orders, color: "bg-blue-50 border-blue-200" },
|
|
{ label: "Pickup Today", value: stats.pickup_today, color: "bg-yellow-50 border-yellow-200" },
|
|
{ label: "Past Due", value: stats.past_due, color: "bg-red-900/30 border-red-200" },
|
|
{ label: "Total Unpaid", value: `$${stats.total_unpaid.toFixed(2)}`, color: "bg-orange-50 border-orange-200" },
|
|
{ label: "Awaiting Deposit", value: stats.awaiting_deposit, color: "bg-purple-50 border-purple-200" },
|
|
{ label: "Fulfilled Today", value: stats.fulfilled_today, color: "bg-green-900/30 border-green-200" },
|
|
].map((card) => (
|
|
<div key={card.label} className={`rounded-xl border p-4 ${card.color}`}>
|
|
<p className="text-xs text-zinc-500">{card.label}</p>
|
|
<p className="mt-1 text-2xl font-bold text-zinc-100">{card.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Recent orders */}
|
|
<div className="rounded-2xl bg-zinc-900 p-6 shadow-black/20 ring-1 ring-zinc-700">
|
|
<h2 className="text-lg font-semibold text-zinc-100 mb-4">Recent Orders</h2>
|
|
{recentOrders.length === 0 ? (
|
|
<p className="text-sm text-slate-400 py-8 text-center">No wholesale orders yet.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-zinc-500 border-b">
|
|
<th className="pb-3 font-medium">Invoice</th>
|
|
<th className="pb-3 font-medium">Customer</th>
|
|
<th className="pb-3 font-medium">Pickup Date</th>
|
|
<th className="pb-3 font-medium text-right">Total</th>
|
|
<th className="pb-3 font-medium">Status</th>
|
|
<th className="pb-3 font-medium">Payment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{recentOrders.map((order) => (
|
|
<tr key={order.id} className="hover:bg-zinc-800">
|
|
<td className="py-3 font-mono text-xs text-slate-400">{order.invoice_number ?? "—"}</td>
|
|
<td className="py-3 font-medium text-zinc-100">{order.company_name}</td>
|
|
<td className="py-3 text-zinc-400">{order.anticipated_pickup_date ?? "—"}</td>
|
|
<td className="py-3 text-right font-semibold text-zinc-100">${Number(order.subtotal).toFixed(2)}</td>
|
|
<td className="py-3">
|
|
<StatusBadge status={order.status} />
|
|
</td>
|
|
<td className="py-3">
|
|
<span className={`text-xs font-medium ${
|
|
order.payment_status === "paid" ? "text-green-600" : "text-orange-600"
|
|
}`}>
|
|
{order.payment_status === "paid" ? "Paid" : order.balance_due > 0 ? `$${Number(order.balance_due).toFixed(2)} due` : "Partial"}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Recent webhook activity */}
|
|
{webhookActivity.length > 0 && (
|
|
<div className="rounded-2xl bg-zinc-900 p-6 shadow-black/20 ring-1 ring-zinc-700">
|
|
<h2 className="text-lg font-semibold text-zinc-100 mb-4">Recent Webhook Activity</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-zinc-500 border-b">
|
|
<th className="pb-3 font-medium">Event</th>
|
|
<th className="pb-3 font-medium">Order</th>
|
|
<th className="pb-3 font-medium">Status</th>
|
|
<th className="pb-3 font-medium">Attempts</th>
|
|
<th className="pb-3 font-medium">Sent At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{webhookActivity.map((entry) => (
|
|
<tr key={entry.id} className="hover:bg-zinc-800">
|
|
<td className="py-3">
|
|
<span className="font-mono text-xs bg-zinc-950 px-2 py-0.5 rounded">{entry.event_type}</span>
|
|
</td>
|
|
<td className="py-3 font-mono text-xs text-slate-400">{entry.order_id ? entry.order_id.slice(0, 8) : "—"}</td>
|
|
<td className="py-3">
|
|
<span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
|
|
entry.status === "sent" ? "bg-green-100 text-green-400" :
|
|
entry.status === "failed" ? "bg-red-100 text-red-400" :
|
|
entry.status === "retrying" ? "bg-yellow-100 text-yellow-700" :
|
|
"bg-zinc-950 text-zinc-400"
|
|
}`}>
|
|
{entry.status}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 text-zinc-500">{entry.attempts}</td>
|
|
<td className="py-3 text-zinc-500">{new Date(entry.created_at).toLocaleString()}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Customers Tab ────────────────────────────────────────────────────────────
|
|
|
|
function CustomersTab({ customers, products, brandId, onMsg, registrations = [], onRefresh }: {
|
|
customers: WholesaleCustomer[];
|
|
products: WholesaleProduct[];
|
|
brandId: string;
|
|
onMsg: (kind: "success" | "error", text: string) => void;
|
|
registrations?: Array<{
|
|
id: string; company_name: string | null; contact_name: string | null;
|
|
email: string; phone: string | null; account_status: string; created_at: string;
|
|
}>;
|
|
onRefresh: () => void;
|
|
}) {
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editing, setEditing] = useState<WholesaleCustomer | null>(null);
|
|
const [subTab, setSubTab] = useState<"customers" | "registrations">("customers");
|
|
const [form, setForm] = useState({
|
|
companyName: "", contactName: "", email: "", phone: "",
|
|
accountStatus: "active", creditLimit: 0,
|
|
depositsEnabled: false, depositThreshold: "", depositPercentage: "",
|
|
orderEmail: "", invoiceEmail: "", adminNotes: "",
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
const [processingReg, setProcessingReg] = useState<string | null>(null);
|
|
const [pricingCustomer, setPricingCustomer] = useState<WholesaleCustomer | null>(null);
|
|
const [selectedCustomers, setSelectedCustomers] = useState<Set<string>>(new Set());
|
|
const [sendingPriceSheet, setSendingPriceSheet] = useState(false);
|
|
const [priceSheetTarget, setPriceSheetTarget] = useState<{
|
|
customerIds: string[];
|
|
defaultSubject: string;
|
|
} | null>(null);
|
|
const [openCustomerActions, setOpenCustomerActions] = useState<string | null>(null);
|
|
const [deletingCustomer, setDeletingCustomer] = useState<string | null>(null);
|
|
|
|
function toggleSelectCustomer(id: string) {
|
|
setSelectedCustomers(prev => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id); else next.add(id);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function toggleAllCustomers() {
|
|
if (selectedCustomers.size === customers.length) {
|
|
setSelectedCustomers(new Set());
|
|
} else {
|
|
setSelectedCustomers(new Set(customers.map(c => c.id)));
|
|
}
|
|
}
|
|
|
|
function openPriceSheetModal(customerIds: string[]) {
|
|
const ids = customerIds;
|
|
if (ids.length === 0) return;
|
|
// Generate default subject from brand name in settings
|
|
const brandName = ""; // will be filled by the API call
|
|
setPriceSheetTarget({
|
|
customerIds: ids,
|
|
defaultSubject: `Wholesale Price Sheet — ${new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}`,
|
|
});
|
|
}
|
|
|
|
async function handleSendPriceSheet(customerId?: string) {
|
|
const ids = customerId ? [customerId] : Array.from(selectedCustomers);
|
|
if (ids.length === 0) return;
|
|
openPriceSheetModal(ids);
|
|
}
|
|
|
|
async function handleConfirmPriceSheet(subject: string, customNote: string) {
|
|
if (!priceSheetTarget) return;
|
|
setSendingPriceSheet(true);
|
|
setPriceSheetTarget(null);
|
|
try {
|
|
const res = await fetch("/api/wholesale/price-sheet", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
customerIds: priceSheetTarget.customerIds,
|
|
brandId,
|
|
subject,
|
|
customNote: customNote || undefined,
|
|
}),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
onMsg("success", `Price sheet sent to ${data.enqueued} customer(s).`);
|
|
setSelectedCustomers(new Set());
|
|
} else {
|
|
onMsg("error", data.error ?? "Failed to send price sheet.");
|
|
}
|
|
} catch {
|
|
onMsg("error", "Failed to send price sheet.");
|
|
} finally {
|
|
setSendingPriceSheet(false);
|
|
}
|
|
}
|
|
|
|
async function handleApproveReject(regId: string, action: "approve" | "reject") {
|
|
setProcessingReg(regId);
|
|
const result = await approveWholesaleRegistration(regId, brandId, action);
|
|
setProcessingReg(null);
|
|
if (result.success) {
|
|
onMsg("success", action === "approve" ? "Registration approved." : "Registration rejected.");
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to process registration.");
|
|
}
|
|
}
|
|
|
|
// Close customer actions dropdown when clicking outside
|
|
useEffect(() => {
|
|
function handleClick(e: MouseEvent) {
|
|
if (!(e.target as Element).closest(".customer-actions-cell")) {
|
|
setOpenCustomerActions(null);
|
|
}
|
|
}
|
|
document.addEventListener("click", handleClick);
|
|
return () => document.removeEventListener("click", handleClick);
|
|
}, []);
|
|
|
|
function toggleCustomerActions(customerId: string, e: React.MouseEvent) {
|
|
e.stopPropagation();
|
|
setOpenCustomerActions(prev => prev === customerId ? null : customerId);
|
|
}
|
|
|
|
async function handleDeleteCustomer(customerId: string) {
|
|
if (!confirm("Delete this customer? This cannot be undone. Customers with existing orders cannot be deleted.")) return;
|
|
setDeletingCustomer(customerId);
|
|
const result = await deleteWholesaleCustomer(customerId);
|
|
setDeletingCustomer(null);
|
|
if (result.success) {
|
|
onMsg("success", "Customer deleted.");
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to delete customer.");
|
|
}
|
|
}
|
|
|
|
async function handleSave() {
|
|
setSaving(true);
|
|
const result = await saveWholesaleCustomer({
|
|
brandId,
|
|
userId: editing?.user_id ?? undefined,
|
|
companyName: form.companyName || undefined,
|
|
contactName: form.contactName || undefined,
|
|
email: form.email || undefined,
|
|
phone: form.phone || undefined,
|
|
accountStatus: form.accountStatus,
|
|
creditLimit: form.creditLimit,
|
|
depositsEnabled: form.depositsEnabled,
|
|
depositThreshold: form.depositThreshold ? Number(form.depositThreshold) : undefined,
|
|
depositPercentage: form.depositPercentage ? Number(form.depositPercentage) : undefined,
|
|
orderEmail: form.orderEmail || undefined,
|
|
invoiceEmail: form.invoiceEmail || undefined,
|
|
adminNotes: form.adminNotes || undefined,
|
|
});
|
|
setSaving(false);
|
|
if (result.success) {
|
|
onMsg("success", editing ? "Customer updated." : "Customer created.");
|
|
setShowForm(false);
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to save.");
|
|
}
|
|
}
|
|
|
|
function openNew() {
|
|
setEditing(null);
|
|
setForm({ companyName: "", contactName: "", email: "", phone: "", accountStatus: "active", creditLimit: 0, depositsEnabled: false, depositThreshold: "", depositPercentage: "", orderEmail: "", invoiceEmail: "", adminNotes: "" });
|
|
setShowForm(true);
|
|
}
|
|
|
|
function openEdit(c: WholesaleCustomer) {
|
|
setEditing(c);
|
|
setForm({
|
|
companyName: c.company_name ?? "",
|
|
contactName: c.contact_name ?? "",
|
|
email: c.email ?? "",
|
|
phone: c.phone ?? "",
|
|
accountStatus: c.account_status ?? "active",
|
|
creditLimit: Number(c.credit_limit),
|
|
depositsEnabled: c.deposits_enabled,
|
|
depositThreshold: c.deposit_threshold?.toString() ?? "",
|
|
depositPercentage: c.deposit_percentage?.toString() ?? "",
|
|
orderEmail: c.order_email ?? "",
|
|
invoiceEmail: c.invoice_email ?? "",
|
|
adminNotes: c.admin_notes ?? "",
|
|
});
|
|
setShowForm(true);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Sub-tab nav */}
|
|
<div className="flex items-center gap-4">
|
|
<button onClick={() => setSubTab("customers")}
|
|
className={`px-3 py-1.5 text-sm font-medium rounded-lg ${subTab === "customers" ? "bg-green-100 text-green-400" : "bg-zinc-950 text-zinc-400"}`}>
|
|
Customers ({customers.filter(c => c.account_status !== "pending_approval" && c.account_status !== "rejected").length})
|
|
</button>
|
|
<button onClick={() => setSubTab("registrations")}
|
|
className={`px-3 py-1.5 text-sm font-medium rounded-lg ${subTab === "registrations" ? "bg-green-100 text-green-400" : "bg-zinc-950 text-zinc-400"}`}>
|
|
Registrations ({registrations.filter(r => r.account_status === "pending_approval").length})
|
|
</button>
|
|
{subTab === "customers" && (
|
|
<button onClick={openNew}
|
|
className="ml-auto rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700">
|
|
+ Add Customer
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{subTab === "registrations" && (
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-semibold text-zinc-300">Pending Registrations</h3>
|
|
{registrations.filter(r => r.account_status === "pending_approval").length === 0 ? (
|
|
<p className="text-sm text-slate-400 py-4 text-center">No pending registrations.</p>
|
|
) : (
|
|
<div className="rounded-2xl bg-zinc-900 shadow-black/20 ring-1 ring-zinc-700 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-50 text-zinc-400">
|
|
<tr>
|
|
<th className="px-5 py-3 font-semibold text-left">Company</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Contact</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Status</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Registered</th>
|
|
<th className="px-5 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{registrations.filter(r => r.account_status === "pending_approval").map(r => (
|
|
<tr key={r.id} className="hover:bg-zinc-800">
|
|
<td className="px-5 py-3 font-medium text-zinc-100">{r.company_name ?? "—"}</td>
|
|
<td className="px-5 py-3 text-zinc-400">{r.contact_name ?? "—"}<br/><span className="text-xs text-slate-400">{r.email}</span></td>
|
|
<td className="px-5 py-3">
|
|
<span className="rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-700">Pending</span>
|
|
</td>
|
|
<td className="px-5 py-3 text-slate-400 text-xs">{formatDate(new Date(r.created_at))}</td>
|
|
<td className="px-5 py-3">
|
|
<div className="flex gap-2">
|
|
<button onClick={() => handleApproveReject(r.id, "approve")}
|
|
disabled={processingReg === r.id}
|
|
className="rounded-lg bg-green-600 px-3 py-1 text-xs font-semibold text-white hover:bg-green-700 disabled:opacity-50">
|
|
{processingReg === r.id ? "..." : "Approve"}
|
|
</button>
|
|
<button onClick={() => handleApproveReject(r.id, "reject")}
|
|
disabled={processingReg === r.id}
|
|
className="rounded-lg bg-red-900/300 px-3 py-1 text-xs font-semibold text-white hover:bg-red-600 disabled:opacity-50">
|
|
Reject
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{subTab === "customers" && (
|
|
<>
|
|
{showForm && (
|
|
<div className="rounded-2xl bg-zinc-900 p-6 shadow-black/20 ring-1 ring-zinc-700">
|
|
<h3 className="font-semibold text-zinc-100 mb-4">{editing ? "Edit Customer" : "New Customer"}</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Company Name</label>
|
|
<input value={form.companyName} onChange={e => setForm(f => ({ ...f, companyName: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Contact Name</label>
|
|
<input value={form.contactName} onChange={e => setForm(f => ({ ...f, contactName: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Email</label>
|
|
<input value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Phone</label>
|
|
<input value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Status</label>
|
|
<select value={form.accountStatus} onChange={e => setForm(f => ({ ...f, accountStatus: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900">
|
|
<option value="active">Active</option>
|
|
<option value="on_hold">On Hold</option>
|
|
<option value="disabled">Disabled</option>
|
|
<option value="pending_approval">Pending Approval</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Credit Limit ($)</label>
|
|
<input type="number" value={form.creditLimit} onChange={e => setForm(f => ({ ...f, creditLimit: Number(e.target.value) }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" placeholder="0 = unlimited" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 p-4 rounded-xl bg-slate-50 space-y-3">
|
|
<p className="text-sm font-semibold text-zinc-300">Deposit Rules</p>
|
|
<div className="flex items-center gap-3">
|
|
<input type="checkbox" checked={form.depositsEnabled}
|
|
onChange={e => setForm(f => ({ ...f, depositsEnabled: e.target.checked }))}
|
|
className="rounded" id="dep-enabled" />
|
|
<label htmlFor="dep-enabled" className="text-sm text-zinc-300">Enable deposit requirement</label>
|
|
</div>
|
|
{form.depositsEnabled && (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-xs text-zinc-500 mb-1">Threshold ($ order total to trigger)</label>
|
|
<input type="number" value={form.depositThreshold} onChange={e => setForm(f => ({ ...f, depositThreshold: e.target.value }))}
|
|
className="w-full rounded-lg border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" placeholder="0" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs text-zinc-500 mb-1">Deposit %</label>
|
|
<input type="number" value={form.depositPercentage} onChange={e => setForm(f => ({ ...f, depositPercentage: e.target.value }))}
|
|
className="w-full rounded-lg border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" placeholder="20" min="1" max="100" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-4 flex gap-3">
|
|
<button onClick={handleSave} disabled={saving}
|
|
className="rounded-xl bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 disabled:opacity-50">
|
|
{saving ? "Saving..." : "Save Customer"}
|
|
</button>
|
|
<button onClick={() => setShowForm(false)}
|
|
className="rounded-xl border border-zinc-600 px-5 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="rounded-2xl bg-zinc-900 shadow-black/20 ring-1 ring-zinc-700 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-50 text-zinc-400">
|
|
<tr>
|
|
<th className="px-5 py-3 font-semibold text-left">
|
|
<input type="checkbox" className="rounded border-slate-400"
|
|
checked={selectedCustomers.size === customers.length && customers.length > 0}
|
|
onChange={toggleAllCustomers}
|
|
/>
|
|
</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Company</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Contact</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Status</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Credit</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Deposits</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Created</th>
|
|
<th className="px-5 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{customers.length === 0 ? (
|
|
<tr><td colSpan={7} className="py-8 text-center text-slate-400">No customers yet.</td></tr>
|
|
) : customers.map(c => (
|
|
<tr key={c.id} className="hover:bg-zinc-800">
|
|
<td className="px-5 py-3">
|
|
<input type="checkbox" className="rounded border-slate-400"
|
|
checked={selectedCustomers.has(c.id)}
|
|
onChange={() => toggleSelectCustomer(c.id)}
|
|
/>
|
|
</td>
|
|
<td className="px-5 py-3 font-medium text-zinc-100">{c.company_name ?? "—"}</td>
|
|
<td className="px-5 py-3 text-zinc-400">{c.contact_name ?? "—"}<br/><span className="text-xs text-slate-400">{c.email}</span></td>
|
|
<td className="px-5 py-3">
|
|
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
c.account_status === "active" ? "bg-green-100 text-green-400" :
|
|
c.account_status === "on_hold" ? "bg-yellow-100 text-yellow-700" : "bg-red-100 text-red-400"
|
|
}`}>{c.account_status}</span>
|
|
</td>
|
|
<td className="px-5 py-3 text-zinc-400">
|
|
{c.credit_limit <= 0 ? "Unlimited" : `$${Number(c.credit_limit).toFixed(2)}`}
|
|
</td>
|
|
<td className="px-5 py-3 text-zinc-400">
|
|
{c.deposits_enabled ? `${c.deposit_percentage}%` : "—"}
|
|
</td>
|
|
<td className="px-5 py-3 text-slate-400 text-xs">{formatDate(new Date(c.created_at))}</td>
|
|
<td className="px-5 py-4 customer-actions-cell relative">
|
|
<div className="flex items-center gap-1.5">
|
|
<button
|
|
onClick={() => openPriceSheetModal([c.id])}
|
|
title="Send price sheet"
|
|
className="inline-flex items-center justify-center rounded-xl w-9 h-9 text-blue-600 hover:text-blue-800 hover:bg-blue-50 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
|
</button>
|
|
<div className="relative">
|
|
<button
|
|
onClick={(e) => toggleCustomerActions(c.id, e)}
|
|
title="More actions"
|
|
className="inline-flex items-center justify-center rounded-xl w-9 h-9 text-slate-400 hover:text-zinc-300 hover:bg-zinc-950 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="4" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="10" cy="16" r="1.5"/></svg>
|
|
</button>
|
|
{openCustomerActions === c.id && (
|
|
<div
|
|
className="absolute bottom-full right-0 mb-1 z-30 w-52 rounded-xl bg-zinc-900 shadow-xl ring-1 ring-zinc-700 py-1 text-sm"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<button
|
|
onClick={() => { setOpenCustomerActions(null); openEdit(c); }}
|
|
className="w-full text-left px-4 py-3 text-green-400 hover:bg-green-900/30 flex items-center gap-3 font-medium"
|
|
>
|
|
<svg className="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
|
|
Edit Customer
|
|
</button>
|
|
<button
|
|
onClick={() => { setOpenCustomerActions(null); setPricingCustomer(c); }}
|
|
className="w-full text-left px-4 py-3 text-zinc-300 hover:bg-zinc-800 flex items-center gap-3"
|
|
>
|
|
<svg className="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Pricing
|
|
</button>
|
|
<a
|
|
href={`/wholesale/portal?preview_customer_id=${c.id}&_admin_preview=1`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-full text-left px-4 py-3 text-zinc-300 hover:bg-zinc-800 flex items-center gap-3"
|
|
>
|
|
<svg className="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
View Portal As
|
|
</a>
|
|
<div className="my-1 border-t border-slate-100" />
|
|
<button
|
|
onClick={() => { setOpenCustomerActions(null); handleDeleteCustomer(c.id); }}
|
|
disabled={deletingCustomer === c.id}
|
|
className="w-full text-left px-4 py-3 text-red-500 hover:bg-red-900/30 flex items-center gap-3 disabled:opacity-50"
|
|
>
|
|
<svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
|
{deletingCustomer === c.id ? "Deleting..." : "Delete Customer"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
{selectedCustomers.size > 0 && (
|
|
<tfoot className="bg-blue-50 border-t border-blue-200">
|
|
<tr>
|
|
<td colSpan={8} className="px-5 py-3 flex items-center gap-4">
|
|
<span className="text-sm text-blue-700 font-medium">{selectedCustomers.size} selected</span>
|
|
<button onClick={() => openPriceSheetModal(Array.from(selectedCustomers))} disabled={sendingPriceSheet}
|
|
className="rounded-lg bg-blue-600 text-white px-4 py-1.5 text-sm font-medium hover:bg-blue-700 disabled:opacity-50">
|
|
{sendingPriceSheet ? "Sending..." : `Send Price Sheet to ${selectedCustomers.size} Customer(s)`}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
)}
|
|
</table>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Customer Pricing Overrides Panel */}
|
|
{pricingCustomer && (
|
|
<CustomerPricingPanel
|
|
customer={pricingCustomer}
|
|
products={products}
|
|
onClose={() => setPricingCustomer(null)}
|
|
onMsg={onMsg}
|
|
/>
|
|
)}
|
|
|
|
{/* Price Sheet Modal */}
|
|
{priceSheetTarget && (
|
|
<PriceSheetModal
|
|
customerCount={priceSheetTarget.customerIds.length}
|
|
defaultSubject={priceSheetTarget.defaultSubject}
|
|
onConfirm={handleConfirmPriceSheet}
|
|
onClose={() => { setPriceSheetTarget(null); setSendingPriceSheet(false); }}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Customer Pricing Panel ──────────────────────────────────────────────────────
|
|
|
|
function CustomerPricingPanel({ customer, products, onClose, onMsg }: {
|
|
customer: WholesaleCustomer;
|
|
products: WholesaleProduct[];
|
|
onClose: () => void;
|
|
onMsg: (kind: "success" | "error", text: string) => void;
|
|
}) {
|
|
const [overrides, setOverrides] = useState<Record<string, string>>({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
getWholesaleCustomerPricing(customer.id).then(pricing => {
|
|
const map: Record<string, string> = {};
|
|
for (const p of pricing) {
|
|
map[p.product_id] = p.custom_unit_price.toString();
|
|
}
|
|
setOverrides(map);
|
|
setLoading(false);
|
|
});
|
|
}, [customer.id]);
|
|
|
|
async function handleSave(productId: string, price: string) {
|
|
if (!price || isNaN(Number(price))) {
|
|
await deleteWholesaleCustomerPricing({ customerId: customer.id, productId });
|
|
setOverrides(prev => { const n = { ...prev }; delete n[productId]; return n; });
|
|
} else {
|
|
await upsertWholesaleCustomerPricing({ customerId: customer.id, productId, customUnitPrice: Number(price) });
|
|
setOverrides(prev => ({ ...prev, [productId]: price }));
|
|
}
|
|
onMsg("success", "Pricing updated.");
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
|
|
<div className="bg-zinc-900 rounded-2xl shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
|
<div className="px-6 py-4 border-b border-zinc-800 flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-bold text-zinc-100">Pricing Overrides</h2>
|
|
<p className="text-sm text-zinc-500">{customer.company_name}</p>
|
|
</div>
|
|
<button onClick={onClose} className="text-slate-400 hover:text-zinc-400">
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="overflow-y-auto flex-1 px-6 py-4">
|
|
{loading ? (
|
|
<p className="text-zinc-500 text-sm">Loading...</p>
|
|
) : products.length === 0 ? (
|
|
<p className="text-slate-400 text-sm">No products available.</p>
|
|
) : (
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-zinc-500 border-b">
|
|
<th className="pb-2 font-medium">Product</th>
|
|
<th className="pb-2 font-medium">Standard Price</th>
|
|
<th className="pb-2 font-medium">Override Price</th>
|
|
<th className="pb-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{products.map(p => {
|
|
const standardPrice = p.price_tiers?.[0]?.price ?? 0;
|
|
const overridePrice = overrides[p.id] ?? "";
|
|
return (
|
|
<tr key={p.id}>
|
|
<td className="py-2.5 font-medium text-zinc-100">{p.name}</td>
|
|
<td className="py-2.5 text-zinc-500">${standardPrice.toFixed(2)}</td>
|
|
<td className="py-2.5">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-slate-400">$</span>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
value={overridePrice}
|
|
onChange={e => setOverrides(prev => ({ ...prev, [p.id]: e.target.value }))}
|
|
placeholder={standardPrice.toFixed(2)}
|
|
className="w-24 rounded-lg border border-zinc-600 px-2 py-1 text-sm outline-none focus:border-green-600"
|
|
/>
|
|
{overridePrice && overridePrice !== standardPrice.toFixed(2) && (
|
|
<span className="text-xs text-green-600 font-medium">Custom</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="py-2.5">
|
|
<button
|
|
onClick={() => handleSave(p.id, overrides[p.id] ?? "")}
|
|
disabled={saving}
|
|
className="rounded-lg bg-green-600 px-3 py-1 text-xs font-semibold text-white hover:bg-green-700 disabled:opacity-50"
|
|
>
|
|
Save
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
<p className="mt-3 text-xs text-slate-400">
|
|
Leave override price blank to remove custom pricing and use standard price tiers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Price Sheet Modal ──────────────────────────────────────────────────────────
|
|
|
|
function PriceSheetModal({
|
|
customerCount,
|
|
defaultSubject,
|
|
onConfirm,
|
|
onClose,
|
|
}: {
|
|
customerCount: number;
|
|
defaultSubject: string;
|
|
onConfirm: (subject: string, customNote: string) => void;
|
|
onClose: () => void;
|
|
}) {
|
|
const [subject, setSubject] = useState(defaultSubject);
|
|
const [note, setNote] = useState("");
|
|
const [sending, setSending] = useState(false);
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!subject.trim()) return;
|
|
setSending(true);
|
|
onConfirm(subject.trim(), note.trim());
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 px-4" onClick={onClose}>
|
|
<div className="bg-zinc-900 rounded-2xl shadow-xl w-full max-w-lg" onClick={e => e.stopPropagation()}>
|
|
<div className="px-6 py-4 border-b border-zinc-800 flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-bold text-zinc-100">Send Price Sheet</h2>
|
|
<p className="text-sm text-zinc-500">
|
|
{customerCount === 1 ? "1 customer" : `${customerCount} customers`}
|
|
</p>
|
|
</div>
|
|
<button onClick={onClose} className="text-slate-400 hover:text-zinc-400">
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="px-6 py-5 space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1.5">Subject</label>
|
|
<input
|
|
value={subject}
|
|
onChange={e => setSubject(e.target.value)}
|
|
required
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-green-600"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1.5">
|
|
Add a Note <span className="text-slate-400 font-normal">(optional)</span>
|
|
</label>
|
|
<textarea
|
|
value={note}
|
|
onChange={e => setNote(e.target.value)}
|
|
rows={4}
|
|
placeholder="e.g. 'Check out our new seasonal items on page 2. Place your order by Friday for weekend pickup.'"
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-green-600 resize-none"
|
|
/>
|
|
<p className="mt-1 text-xs text-slate-400">
|
|
This note will appear at the top of the email, above the product table.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-6 py-4 border-t border-zinc-800 flex items-center justify-between bg-slate-50 rounded-b-2xl">
|
|
<div className="text-sm text-zinc-500">
|
|
{customerCount === 1 ? "1 customer" : `${customerCount} customers`} will receive this email.
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<button type="button" onClick={onClose}
|
|
className="rounded-xl border border-zinc-600 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-950">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" disabled={sending || !subject.trim()}
|
|
className="rounded-xl bg-blue-600 px-5 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50">
|
|
{sending ? "Sending..." : `Send to ${customerCount === 1 ? "1 Customer" : `${customerCount} Customers`}`}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Products Tab ─────────────────────────────────────────────────────────────
|
|
|
|
function ProductsTab({ products, brandId, onMsg, onRefresh }: {
|
|
products: WholesaleProduct[];
|
|
brandId: string;
|
|
onMsg: (kind: "success" | "error", text: string) => void;
|
|
onRefresh: () => void;
|
|
}) {
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editing, setEditing] = useState<WholesaleProduct | null>(null);
|
|
const [form, setForm] = useState({
|
|
name: "", description: "", unitType: "each", availability: "available",
|
|
qtyAvailable: 0, priceTiers: "", hpSku: "", hpItemId: "",
|
|
handlingInstructions: "", storageWarning: "", productLabel: "",
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
const [openProductActions, setOpenProductActions] = useState<string | null>(null);
|
|
const [deletingProduct, setDeletingProduct] = useState<string | null>(null);
|
|
|
|
// Close product actions dropdown when clicking outside
|
|
useEffect(() => {
|
|
function handleClick(e: MouseEvent) {
|
|
if (!(e.target as Element).closest(".product-actions-cell")) {
|
|
setOpenProductActions(null);
|
|
}
|
|
}
|
|
document.addEventListener("click", handleClick);
|
|
return () => document.removeEventListener("click", handleClick);
|
|
}, []);
|
|
|
|
function toggleProductActions(productId: string, e: React.MouseEvent) {
|
|
e.stopPropagation();
|
|
setOpenProductActions(prev => prev === productId ? null : productId);
|
|
}
|
|
|
|
async function handleDeleteProduct(productId: string) {
|
|
if (!confirm("Delete this product? Products attached to order items cannot be deleted. Set availability to unavailable instead.")) return;
|
|
setDeletingProduct(productId);
|
|
const result = await deleteWholesaleProduct(productId);
|
|
setDeletingProduct(null);
|
|
if (result.success) {
|
|
onMsg("success", "Product deleted.");
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to delete product.");
|
|
}
|
|
}
|
|
|
|
async function handleSave() {
|
|
setSaving(true);
|
|
let tiers: Array<{ min_qty: number; max_qty: number; price: number }> = [];
|
|
try { tiers = JSON.parse(form.priceTiers || "[]"); } catch {}
|
|
const result = await saveWholesaleProduct({
|
|
brandId,
|
|
id: editing?.id,
|
|
name: form.name,
|
|
description: form.description || undefined,
|
|
unitType: form.unitType,
|
|
availability: form.availability,
|
|
qtyAvailable: form.qtyAvailable,
|
|
priceTiers: tiers,
|
|
hpSku: form.hpSku || undefined,
|
|
hpItemId: form.hpItemId || undefined,
|
|
handlingInstructions: form.handlingInstructions || undefined,
|
|
storageWarning: form.storageWarning || undefined,
|
|
productLabel: form.productLabel || undefined,
|
|
});
|
|
setSaving(false);
|
|
if (result.success) {
|
|
onMsg("success", editing ? "Product updated." : "Product created.");
|
|
setShowForm(false);
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to save.");
|
|
}
|
|
}
|
|
|
|
function openNew() {
|
|
setEditing(null);
|
|
setForm({ name: "", description: "", unitType: "each", availability: "available", qtyAvailable: 0, priceTiers: "", hpSku: "", hpItemId: "", handlingInstructions: "", storageWarning: "", productLabel: "" });
|
|
setShowForm(true);
|
|
}
|
|
|
|
function openEdit(p: WholesaleProduct) {
|
|
setEditing(p);
|
|
setForm({
|
|
name: p.name,
|
|
description: p.description ?? "",
|
|
unitType: p.unit_type,
|
|
availability: p.availability,
|
|
qtyAvailable: Number(p.qty_available),
|
|
priceTiers: JSON.stringify(p.price_tiers),
|
|
hpSku: p.hp_sku ?? "",
|
|
hpItemId: p.hp_item_id ?? "",
|
|
handlingInstructions: p.handling_instructions ?? "",
|
|
storageWarning: p.storage_warning ?? "",
|
|
productLabel: p.product_label ?? "",
|
|
});
|
|
setShowForm(true);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold text-zinc-100">Wholesale Products ({products.length})</h2>
|
|
<button onClick={openNew} className="rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700">
|
|
+ Add Product
|
|
</button>
|
|
</div>
|
|
|
|
{showForm && (
|
|
<div className="rounded-2xl bg-zinc-900 p-6 shadow-black/20 ring-1 ring-zinc-700">
|
|
<h3 className="font-semibold text-zinc-100 mb-4">{editing ? "Edit Product" : "New Product"}</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Product Name</label>
|
|
<input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Description</label>
|
|
<textarea value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" rows={2} />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Unit Type</label>
|
|
<select value={form.unitType} onChange={e => setForm(f => ({ ...f, unitType: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900">
|
|
{["each", "48-count box", "bag", "pallet", "bin", "load", "custom"].map(u => (
|
|
<option key={u} value={u}>{u}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Availability</label>
|
|
<select value={form.availability} onChange={e => setForm(f => ({ ...f, availability: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900">
|
|
<option value="available">Available</option>
|
|
<option value="unavailable">Unavailable</option>
|
|
<option value="coming_soon">Coming Soon</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Qty Available</label>
|
|
<input type="number" value={form.qtyAvailable} onChange={e => setForm(f => ({ ...f, qtyAvailable: Number(e.target.value) }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">HP SKU</label>
|
|
<input value={form.hpSku} onChange={e => setForm(f => ({ ...f, hpSku: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">
|
|
Price Tiers (JSON array of {"{\"min_qty\":1,\"max_qty\":24,\"price\":20}"})
|
|
</label>
|
|
<input value={form.priceTiers} onChange={e => setForm(f => ({ ...f, priceTiers: e.target.value }))}
|
|
placeholder='[{"min_qty":1,"max_qty":24,"price":20},{"min_qty":25,"max_qty":0,"price":18}]'
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm font-mono outline-none focus:border-slate-900" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex gap-3">
|
|
<button onClick={handleSave} disabled={saving}
|
|
className="rounded-xl bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 disabled:opacity-50">
|
|
{saving ? "Saving..." : "Save Product"}
|
|
</button>
|
|
<button onClick={() => setShowForm(false)}
|
|
className="rounded-xl border border-zinc-600 px-5 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="rounded-2xl bg-zinc-900 shadow-black/20 ring-1 ring-zinc-700 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-50 text-zinc-400">
|
|
<tr>
|
|
<th className="px-5 py-3 font-semibold text-left">Product</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Unit</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Availability</th>
|
|
<th className="px-5 py-3 font-semibold text-left">In Stock</th>
|
|
<th className="px-5 py-3 font-semibold text-left">HP SKU</th>
|
|
<th className="px-5 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{products.length === 0 ? (
|
|
<tr><td colSpan={6} className="py-8 text-center text-slate-400">No products yet.</td></tr>
|
|
) : products.map(p => (
|
|
<tr key={p.id} className="hover:bg-zinc-800">
|
|
<td className="px-5 py-3 font-medium text-zinc-100">{p.name}</td>
|
|
<td className="px-5 py-3 text-zinc-400">{p.unit_type}</td>
|
|
<td className="px-5 py-3">
|
|
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
p.availability === "available" ? "bg-green-100 text-green-400" :
|
|
p.availability === "coming_soon" ? "bg-yellow-100 text-yellow-700" : "bg-zinc-950 text-zinc-500"
|
|
}`}>{p.availability.replace("_", " ")}</span>
|
|
</td>
|
|
<td className="px-5 py-3 text-zinc-400">{p.qty_available}</td>
|
|
<td className="px-5 py-4 font-mono text-xs text-slate-400">{p.hp_sku ?? "—"}</td>
|
|
<td className="px-5 py-4 product-actions-cell relative">
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="relative">
|
|
<button
|
|
onClick={(e) => toggleProductActions(p.id, e)}
|
|
title="More actions"
|
|
className="inline-flex items-center justify-center rounded-xl w-9 h-9 text-slate-400 hover:text-zinc-300 hover:bg-zinc-950 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="4" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="10" cy="16" r="1.5"/></svg>
|
|
</button>
|
|
{openProductActions === p.id && (
|
|
<div
|
|
className="absolute bottom-full right-0 mb-1 z-30 w-48 rounded-xl bg-zinc-900 shadow-xl ring-1 ring-zinc-700 py-1 text-sm"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<button
|
|
onClick={() => { setOpenProductActions(null); openEdit(p); }}
|
|
className="w-full text-left px-4 py-3 text-green-400 hover:bg-green-900/30 flex items-center gap-3 font-medium"
|
|
>
|
|
<svg className="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
|
|
Edit Product
|
|
</button>
|
|
<div className="my-1 border-t border-slate-100" />
|
|
<button
|
|
onClick={() => { setOpenProductActions(null); handleDeleteProduct(p.id); }}
|
|
disabled={deletingProduct === p.id}
|
|
className="w-full text-left px-4 py-3 text-red-500 hover:bg-red-900/30 flex items-center gap-3 disabled:opacity-50"
|
|
>
|
|
<svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
|
{deletingProduct === p.id ? "Deleting..." : "Delete Product"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Orders Tab ───────────────────────────────────────────────────────────────
|
|
|
|
function OrdersTab({ orders, customers, brandId, onMsg, onRefresh }: {
|
|
orders: WholesaleOrder[];
|
|
customers: WholesaleCustomer[];
|
|
brandId: string;
|
|
onMsg: (kind: "success" | "error", text: string) => void;
|
|
onRefresh: () => void;
|
|
}) {
|
|
const [showDepForm, setShowDepForm] = useState<string | null>(null);
|
|
const [depAmount, setDepAmount] = useState("");
|
|
const [depMethod, setDepMethod] = useState("cash");
|
|
const [fulfilling, setFulfilling] = useState<string | null>(null);
|
|
const [manifestLoading, setManifestLoading] = useState(false);
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const [statusFilter, setStatusFilter] = useState("all");
|
|
const [dateFrom, setDateFrom] = useState("");
|
|
const [dateTo, setDateTo] = useState("");
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [bulkDepAmount, setBulkDepAmount] = useState("");
|
|
const [bulkDepMethod, setBulkDepMethod] = useState("cash");
|
|
const [showBulkDep, setShowBulkDep] = useState(false);
|
|
const [bulkLoading, setBulkLoading] = useState(false);
|
|
|
|
const filtered = orders.filter(o => {
|
|
if (statusFilter !== "all" && o.status !== statusFilter) return false;
|
|
if (dateFrom && (!o.anticipated_pickup_date || o.anticipated_pickup_date < dateFrom)) return false;
|
|
if (dateTo && (!o.anticipated_pickup_date || o.anticipated_pickup_date > dateTo)) return false;
|
|
if (searchQuery) {
|
|
const q = searchQuery.toLowerCase();
|
|
if (!(o.company_name?.toLowerCase().includes(q) || o.invoice_number?.toLowerCase().includes(q) || o.customer_email?.toLowerCase().includes(q))) return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
function toggleSelect(id: string) {
|
|
setSelected(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
|
|
}
|
|
function toggleAll() {
|
|
if (selected.size === filtered.length) { setSelected(new Set()); }
|
|
else { setSelected(new Set(filtered.map(o => o.id))); }
|
|
}
|
|
|
|
async function handleBulkFulfill() {
|
|
if (selected.size === 0) return;
|
|
setBulkLoading(true);
|
|
const result = await bulkFulfillWholesaleOrders(Array.from(selected));
|
|
setBulkLoading(false);
|
|
if (result.success) {
|
|
onMsg("success", `${result.count} order(s) marked as fulfilled.`);
|
|
setSelected(new Set());
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Bulk fulfill failed.");
|
|
}
|
|
}
|
|
|
|
async function handleBulkDeposit() {
|
|
if (selected.size === 0 || !bulkDepAmount) return;
|
|
setBulkLoading(true);
|
|
const result = await bulkRecordWholesaleDeposit(Array.from(selected), Number(bulkDepAmount), bulkDepMethod);
|
|
setBulkLoading(false);
|
|
if (result.success) {
|
|
onMsg("success", `Deposit recorded on ${result.count} order(s).`);
|
|
setSelected(new Set());
|
|
setShowBulkDep(false);
|
|
setBulkDepAmount("");
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Bulk deposit failed.");
|
|
}
|
|
}
|
|
|
|
async function handleFulfill(orderId: string) {
|
|
setFulfilling(orderId);
|
|
const result = await markWholesaleOrderFulfilled(orderId);
|
|
setFulfilling(null);
|
|
if (result.success) {
|
|
onMsg("success", "Order marked as fulfilled.");
|
|
onRefresh();
|
|
|
|
// Enqueue order fulfilled notification
|
|
const order = orders.find(o => o.id === orderId);
|
|
const customer = order ? customers.find(c => c.email === order.customer_email) : null;
|
|
if (order && customer) {
|
|
enqueueWholesaleNotification({
|
|
brandId: brandId,
|
|
customerId: customer.id,
|
|
orderId,
|
|
type: "order_fulfilled",
|
|
emailTo: customer.email,
|
|
subject: `Order ${order.invoice_number ?? orderId.slice(0, 8)} Ready for Pickup`,
|
|
bodyHtml: `
|
|
<h2>Your Order is Ready!</h2>
|
|
<p>Hi ${customer.company_name},</p>
|
|
<p>Your wholesale order <strong>${order.invoice_number ?? orderId.slice(0, 8)}</strong> has been fulfilled and is ready for pickup${order.anticipated_pickup_date ? ` on ${order.anticipated_pickup_date}` : ""}.</p>
|
|
<p>Thank you for your business!</p>
|
|
`,
|
|
bodyText: `Order ${order.invoice_number ?? orderId.slice(0, 8)} has been fulfilled and is ready for pickup${order.anticipated_pickup_date ? ` on ${order.anticipated_pickup_date}` : ""}. Thank you!`,
|
|
});
|
|
|
|
// Also notify the admin
|
|
const settings = await getWholesaleSettings(brandId);
|
|
const adminEmail = settings?.notification_email ?? settings?.from_email ?? settings?.invoice_business_email ?? null;
|
|
if (adminEmail) {
|
|
enqueueWholesaleNotification({
|
|
brandId: brandId,
|
|
customerId: customer.id,
|
|
orderId,
|
|
type: "order_fulfilled",
|
|
emailTo: adminEmail,
|
|
subject: `[Admin] Order Fulfilled — ${order.invoice_number ?? orderId.slice(0, 8)}`,
|
|
bodyHtml: `
|
|
<h2>Order Fulfilled</h2>
|
|
<p>Order <strong>${order.invoice_number ?? orderId.slice(0, 8)}</strong> for <strong>${customer.company_name}</strong> has been marked as fulfilled.</p>
|
|
${order.anticipated_pickup_date ? `<p><strong>Pickup Date:</strong> ${order.anticipated_pickup_date}</p>` : ""}
|
|
`,
|
|
bodyText: `Order ${order.invoice_number ?? orderId.slice(0, 8)} for ${customer.company_name} has been fulfilled.`,
|
|
});
|
|
}
|
|
|
|
// Trigger notification send (fire-and-forget)
|
|
fetch(`/api/wholesale/notifications/send`, { method: "POST" }).catch(() => {});
|
|
}
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to fulfill order.");
|
|
}
|
|
}
|
|
|
|
const [openActions, setOpenActions] = useState<string | null>(null);
|
|
const [showViewOrder, setShowViewOrder] = useState<WholesaleOrder | null>(null);
|
|
const [deleting, setDeleting] = useState<string | null>(null);
|
|
|
|
// Close actions dropdown when clicking outside
|
|
useEffect(() => {
|
|
function handleClick(e: MouseEvent) {
|
|
if (!(e.target as Element).closest(".actions-cell")) {
|
|
setOpenActions(null);
|
|
}
|
|
}
|
|
document.addEventListener("click", handleClick);
|
|
return () => document.removeEventListener("click", handleClick);
|
|
}, []);
|
|
|
|
function toggleActions(orderId: string, e: React.MouseEvent) {
|
|
e.stopPropagation();
|
|
setOpenActions(prev => prev === orderId ? null : orderId);
|
|
}
|
|
|
|
async function handleRecordDeposit(orderId: string) {
|
|
const result = await recordWholesaleDeposit(orderId, Number(depAmount), depMethod);
|
|
setShowDepForm(null);
|
|
setDepAmount("");
|
|
if (result.success) {
|
|
onMsg("success", "Deposit recorded.");
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to record deposit.");
|
|
}
|
|
}
|
|
|
|
async function handleCancelOrder(orderId: string) {
|
|
if (!confirm("Cancel this order? This cannot be undone.")) return;
|
|
const { updateWholesaleOrderStatus } = await import("@/actions/wholesale");
|
|
const result = await updateWholesaleOrderStatus(orderId, "cancelled");
|
|
if (result.success) {
|
|
onMsg("success", "Order cancelled.");
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to cancel order.");
|
|
}
|
|
}
|
|
|
|
async function handleDeleteOrder(orderId: string) {
|
|
if (!confirm("Delete this order? Fulfilled and paid orders cannot be deleted. This cannot be undone.")) return;
|
|
setDeleting(orderId);
|
|
const { deleteWholesaleOrder } = await import("@/actions/wholesale");
|
|
const result = await deleteWholesaleOrder(orderId);
|
|
setDeleting(null);
|
|
if (result.success) {
|
|
onMsg("success", "Order deleted.");
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to delete order.");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-zinc-100">Wholesale Orders ({orders.length})</h2>
|
|
|
|
{/* Filter bar */}
|
|
<div className="flex flex-wrap items-center gap-3 rounded-2xl bg-zinc-900 shadow-black/20 ring-1 ring-zinc-700 p-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-zinc-500 mb-1">Status</label>
|
|
<select value={statusFilter} onChange={e => setStatusFilter(e.target.value)}
|
|
className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm outline-none focus:border-green-600">
|
|
<option value="all">All Statuses</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="awaiting_deposit">Awaiting Deposit</option>
|
|
<option value="confirmed">Confirmed</option>
|
|
<option value="fulfilled">Fulfilled</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-zinc-500 mb-1">Pickup From</label>
|
|
<input type="date" value={dateFrom} onChange={e => setDateFrom(e.target.value)}
|
|
className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm outline-none focus:border-green-600" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-zinc-500 mb-1">Pickup To</label>
|
|
<input type="date" value={dateTo} onChange={e => setDateTo(e.target.value)}
|
|
className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm outline-none focus:border-green-600" />
|
|
</div>
|
|
<div className="flex-1 min-w-[180px]">
|
|
<label className="block text-xs font-medium text-zinc-500 mb-1">Search</label>
|
|
<input value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
|
|
placeholder="Invoice, customer, email..."
|
|
className="w-full rounded-lg border border-zinc-600 px-3 py-1.5 text-sm outline-none focus:border-green-600" />
|
|
</div>
|
|
{filtered.length !== orders.length && (
|
|
<div className="self-end pb-1">
|
|
<span className="text-xs text-zinc-500">{filtered.length} of {orders.length}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Bulk actions */}
|
|
{selected.size > 0 && (
|
|
<div className="flex items-center gap-3 rounded-2xl bg-green-900/30 border border-green-200 px-4 py-3">
|
|
<span className="text-sm font-medium text-green-800">{selected.size} selected</span>
|
|
<button onClick={handleBulkFulfill} disabled={bulkLoading}
|
|
className="rounded-lg bg-green-600 px-4 py-1.5 text-xs font-semibold text-white hover:bg-green-700 disabled:opacity-50">
|
|
{bulkLoading ? "..." : "Bulk Fulfill"}
|
|
</button>
|
|
<button onClick={() => setShowBulkDep(true)}
|
|
className="rounded-lg border border-green-300 bg-zinc-900 px-4 py-1.5 text-xs font-semibold text-green-400 hover:bg-green-100">
|
|
Bulk Record Deposit
|
|
</button>
|
|
<button onClick={() => setSelected(new Set())} className="ml-auto text-xs text-zinc-500 hover:text-zinc-300">Clear selection</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Manifest section */}
|
|
<div className="rounded-2xl bg-zinc-900 shadow-black/20 ring-1 ring-zinc-700 p-4 flex items-center gap-4">
|
|
<div>
|
|
<p className="text-sm font-medium text-zinc-300">Load Manifest</p>
|
|
<p className="text-xs text-zinc-500">Generate a printable manifest for pending/active orders.</p>
|
|
</div>
|
|
<button
|
|
onClick={async () => {
|
|
setManifestLoading(true);
|
|
const pending = filtered.filter(o => o.fulfillment_status !== "fulfilled");
|
|
if (pending.length === 0) { setManifestLoading(false); return; }
|
|
const html = await fetch("/api/wholesale/manifest", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ brandId, orders: pending }),
|
|
}).then(r => r.text());
|
|
const w = window.open("", "_blank");
|
|
if (w) { w.document.write(html); w.document.close(); }
|
|
setManifestLoading(false);
|
|
}}
|
|
disabled={manifestLoading}
|
|
className="rounded-xl bg-slate-800 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-700 disabled:opacity-50"
|
|
>
|
|
{manifestLoading ? "Generating..." : "Generate Manifest"}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="rounded-2xl bg-zinc-900 shadow-black/20 ring-1 ring-zinc-700 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-50 text-zinc-400">
|
|
<tr>
|
|
<th className="px-5 py-3 font-semibold text-left w-10">
|
|
<input type="checkbox" checked={selected.size === filtered.length && filtered.length > 0} onChange={toggleAll} className="rounded" />
|
|
</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Invoice</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Customer</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Pickup Date</th>
|
|
<th className="px-5 py-3 font-semibold text-right">Subtotal</th>
|
|
<th className="px-5 py-3 font-semibold text-right">Deposit</th>
|
|
<th className="px-5 py-3 font-semibold text-right">Balance</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Status</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Payment</th>
|
|
<th className="px-5 py-3 font-semibold text-left">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{filtered.length === 0 ? (
|
|
<tr><td colSpan={10} className="py-8 text-center text-slate-400">No orders match the current filters.</td></tr>
|
|
) : filtered.map(o => (
|
|
<tr key={o.id} className={`hover:bg-zinc-800 ${selected.has(o.id) ? "bg-green-900/30" : ""}`}>
|
|
<td className="px-5 py-3">
|
|
<input type="checkbox" checked={selected.has(o.id)} onChange={() => toggleSelect(o.id)} className="rounded" />
|
|
</td>
|
|
<td className="px-5 py-3 font-mono text-xs text-slate-400">{o.invoice_number ?? "—"}</td>
|
|
<td className="px-5 py-3 font-medium text-zinc-100">{o.company_name}</td>
|
|
<td className="px-5 py-3 text-zinc-400">{o.anticipated_pickup_date ?? "—"}</td>
|
|
<td className="px-5 py-3 text-right font-semibold text-zinc-100">${Number(o.subtotal).toFixed(2)}</td>
|
|
<td className="px-5 py-3 text-right text-zinc-400">${Number(o.deposit_paid).toFixed(2)} / ${Number(o.deposit_required).toFixed(2)}</td>
|
|
<td className="px-5 py-3 text-right">
|
|
<span className={Number(o.balance_due) > 0 ? "text-orange-600 font-medium" : "text-green-600"}>
|
|
${Number(o.balance_due).toFixed(2)}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-3"><StatusBadge status={o.status} /></td>
|
|
<td className="px-5 py-3">
|
|
<span className={`text-xs font-medium ${o.payment_status === "paid" ? "text-green-600" : "text-orange-600"}`}>
|
|
{o.payment_status}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-4 actions-cell relative">
|
|
<div className="flex items-center gap-2">
|
|
{/* Primary: Mark Fulfilled — only when order is not yet fulfilled */}
|
|
{o.fulfillment_status !== "fulfilled" && (
|
|
<button
|
|
onClick={() => !fulfilling && handleFulfill(o.id)}
|
|
disabled={fulfilling === o.id}
|
|
title="Mark as fulfilled"
|
|
className="inline-flex items-center gap-1.5 rounded-xl bg-green-600 px-3 py-2 text-xs font-bold text-white shadow-black/20 hover:bg-green-700 disabled:opacity-40 transition-colors"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
|
|
{fulfilling === o.id ? "..." : "Fulfill"}
|
|
</button>
|
|
)}
|
|
|
|
{/* Primary: Record Deposit — when there's a balance due */}
|
|
{Number(o.balance_due) > 0 && o.fulfillment_status !== "fulfilled" && (
|
|
<button
|
|
onClick={() => setShowDepForm(o.id)}
|
|
title="Record deposit payment"
|
|
className="inline-flex items-center gap-1.5 rounded-xl bg-purple-600 px-3 py-2 text-xs font-bold text-white shadow-black/20 hover:bg-purple-700 transition-colors"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m-9-9h18" /></svg>
|
|
Deposit
|
|
</button>
|
|
)}
|
|
|
|
{/* Invoice download — always visible as icon button */}
|
|
<a
|
|
href={`/api/wholesale/invoice/${o.id}/pdf`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title="Download Invoice"
|
|
className="inline-flex items-center justify-center rounded-xl w-9 h-9 text-zinc-500 hover:text-slate-800 hover:bg-zinc-950 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M9 12h9m-9-6h6m-3 12a9 9 0 110 12H15M6 2h9l4 4v14a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2z"/></svg>
|
|
</a>
|
|
|
|
{/* ⋮ Actions dropdown — opens upward to avoid table cutoff */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={(e) => toggleActions(o.id, e)}
|
|
title="More actions"
|
|
className="inline-flex items-center justify-center rounded-xl w-9 h-9 text-slate-400 hover:text-zinc-300 hover:bg-zinc-950 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="4" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="10" cy="16" r="1.5"/></svg>
|
|
</button>
|
|
|
|
{openActions === o.id && (
|
|
<div
|
|
className="absolute bottom-full right-0 mb-1 z-30 w-56 rounded-xl bg-zinc-900 shadow-xl ring-1 ring-zinc-700 py-1 text-sm"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<button
|
|
onClick={() => { setOpenActions(null); setShowViewOrder(o); }}
|
|
className="w-full text-left px-4 py-3 text-green-400 hover:bg-green-900/30 flex items-center gap-3 font-medium"
|
|
>
|
|
<svg className="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
View / Edit Order
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
setOpenActions(null);
|
|
const w = window.open("", "_blank");
|
|
if (w) {
|
|
fetch("/api/wholesale/manifest", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ brandId, orders: [o] }),
|
|
}).then(r => r.text()).then(html => { w.document.write(html); w.document.close(); });
|
|
}
|
|
}}
|
|
className="w-full text-left px-4 py-3 text-zinc-300 hover:bg-zinc-800 flex items-center gap-3"
|
|
>
|
|
<svg className="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M9 12h9m-9-6h6m-3 12a9 9 0 01-18 0 9 9 0 0118 0z"/></svg>
|
|
Generate Manifest
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
setOpenActions(null);
|
|
fetch("/api/wholesale/price-sheet", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ customerIds: [o.customer_id], brandId }),
|
|
}).then(r => r.json()).then(d => onMsg("success", `Price sheet sent to customer.`)).catch(() => onMsg("error", "Failed to send price sheet."));
|
|
}}
|
|
className="w-full text-left px-4 py-3 text-zinc-300 hover:bg-zinc-800 flex items-center gap-3"
|
|
>
|
|
<svg className="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
|
Send Price Sheet
|
|
</button>
|
|
|
|
<div className="my-1 border-t border-slate-100" />
|
|
|
|
{o.status !== "cancelled" && o.fulfillment_status !== "fulfilled" && (
|
|
<button
|
|
onClick={() => { setOpenActions(null); handleCancelOrder(o.id); }}
|
|
className="w-full text-left px-4 py-3 text-red-500 hover:bg-red-900/30 flex items-center gap-3"
|
|
>
|
|
<svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
|
|
Cancel Order
|
|
</button>
|
|
)}
|
|
|
|
{o.fulfillment_status !== "fulfilled" && (
|
|
<button
|
|
onClick={() => { setOpenActions(null); handleDeleteOrder(o.id); }}
|
|
className="w-full text-left px-4 py-3 text-red-500 hover:bg-red-900/30 flex items-center gap-3"
|
|
>
|
|
<svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}><path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
|
Delete Order
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Deposit modal */}
|
|
{showDepForm && (
|
|
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
|
|
<div className="bg-zinc-900 rounded-2xl p-6 w-96 shadow-xl">
|
|
<h3 className="font-semibold text-zinc-100 mb-4">Record Deposit</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Amount ($)</label>
|
|
<input type="number" value={depAmount} onChange={e => setDepAmount(e.target.value)}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" step="0.01" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Method</label>
|
|
<select value={depMethod} onChange={e => setDepMethod(e.target.value)}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900">
|
|
<option value="cash">Cash</option>
|
|
<option value="check">Check</option>
|
|
<option value="wire">Wire</option>
|
|
<option value="card">Card</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex gap-3">
|
|
<button onClick={() => handleRecordDeposit(showDepForm)}
|
|
className="rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700">
|
|
Record Deposit
|
|
</button>
|
|
<button onClick={() => setShowDepForm(null)}
|
|
className="rounded-xl border border-zinc-600 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Bulk Deposit modal */}
|
|
{showBulkDep && (
|
|
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
|
|
<div className="bg-zinc-900 rounded-2xl p-6 w-96 shadow-xl">
|
|
<h3 className="font-semibold text-zinc-100 mb-4">Bulk Record Deposit ({selected.size} orders)</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Amount per order ($)</label>
|
|
<input type="number" value={bulkDepAmount} onChange={e => setBulkDepAmount(e.target.value)}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" step="0.01" placeholder="0.00" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Method</label>
|
|
<select value={bulkDepMethod} onChange={e => setBulkDepMethod(e.target.value)}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900">
|
|
<option value="cash">Cash</option>
|
|
<option value="check">Check</option>
|
|
<option value="wire">Wire</option>
|
|
<option value="card">Card</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex gap-3">
|
|
<button onClick={handleBulkDeposit}
|
|
disabled={!bulkDepAmount || bulkLoading}
|
|
className="rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700 disabled:opacity-50">
|
|
{bulkLoading ? "Recording..." : "Record on All"}
|
|
</button>
|
|
<button onClick={() => setShowBulkDep(false)}
|
|
className="rounded-xl border border-zinc-600 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Order Details modal */}
|
|
{showViewOrder && (
|
|
<OrderDetailsModal
|
|
order={showViewOrder}
|
|
onClose={() => setShowViewOrder(null)}
|
|
onFulfill={handleFulfill}
|
|
onRecordDeposit={(id) => { setShowViewOrder(null); setShowDepForm(id); }}
|
|
fulfilling={fulfilling}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Settings Tab ─────────────────────────────────────────────────────────────
|
|
|
|
function SettingsTab({ settings, brandId, onMsg, onRefresh, canManageSettings }: {
|
|
settings: WholesaleSettings | null;
|
|
brandId: string;
|
|
onMsg: (kind: "success" | "error", text: string) => void;
|
|
onRefresh: () => void;
|
|
canManageSettings: boolean;
|
|
}) {
|
|
if (!canManageSettings) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<p className="text-slate-400">You do not have permission to manage settings.</p>
|
|
</div>
|
|
);
|
|
}
|
|
const [form, setForm] = useState({
|
|
requireApproval: settings?.require_approval ?? true,
|
|
minOrderAmount: settings?.min_order_amount ?? "",
|
|
onlinePaymentEnabled: settings?.online_payment_enabled ?? false,
|
|
wholesaleEnabled: settings?.wholesale_enabled ?? true,
|
|
squareSyncEnabled: settings?.square_sync_enabled ?? false,
|
|
pickupLocation: settings?.pickup_location ?? "",
|
|
fobLocation: settings?.fob_location ?? "",
|
|
fromEmail: settings?.from_email ?? "",
|
|
invoiceBusinessName: settings?.invoice_business_name ?? "",
|
|
invoiceBusinessAddress: settings?.invoice_business_address ?? "",
|
|
invoiceBusinessPhone: settings?.invoice_business_phone ?? "",
|
|
invoiceBusinessEmail: settings?.invoice_business_email ?? "",
|
|
invoiceBusinessWebsite: settings?.invoice_business_website ?? "",
|
|
notificationRecipients: settings?.notification_recipients ?? [],
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
async function handleSave() {
|
|
setSaving(true);
|
|
const result = await saveWholesaleSettings({
|
|
brandId,
|
|
requireApproval: form.requireApproval,
|
|
minOrderAmount: form.minOrderAmount ? Number(form.minOrderAmount) : undefined,
|
|
onlinePaymentEnabled: form.onlinePaymentEnabled,
|
|
wholesaleEnabled: form.wholesaleEnabled,
|
|
squareSyncEnabled: form.squareSyncEnabled,
|
|
pickupLocation: form.pickupLocation,
|
|
fobLocation: form.fobLocation,
|
|
fromEmail: form.fromEmail,
|
|
invoiceBusinessName: form.invoiceBusinessName,
|
|
invoiceBusinessAddress: form.invoiceBusinessAddress,
|
|
invoiceBusinessPhone: form.invoiceBusinessPhone,
|
|
invoiceBusinessWebsite: form.invoiceBusinessWebsite,
|
|
notificationRecipients: form.notificationRecipients,
|
|
});
|
|
setSaving(false);
|
|
if (result.success) {
|
|
onMsg("success", "Settings saved.");
|
|
onRefresh();
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to save settings.");
|
|
}
|
|
}
|
|
|
|
// ── Notification Recipients helpers ────────────────────────────────────────
|
|
function addRecipient(email: string, name: string = "") {
|
|
setForm(f => ({
|
|
...f,
|
|
notificationRecipients: [
|
|
...f.notificationRecipients,
|
|
{ email, name, active: true },
|
|
],
|
|
}));
|
|
}
|
|
|
|
function removeRecipient(idx: number) {
|
|
setForm(f => ({
|
|
...f,
|
|
notificationRecipients: f.notificationRecipients.filter((_: unknown, i: number) => i !== idx),
|
|
}));
|
|
}
|
|
|
|
function toggleRecipient(idx: number) {
|
|
setForm(f => ({
|
|
...f,
|
|
notificationRecipients: f.notificationRecipients.map((r: NotificationRecipient, i: number) =>
|
|
i === idx ? { ...r, active: !r.active } : r
|
|
),
|
|
}));
|
|
}
|
|
|
|
function updateRecipientName(idx: number, name: string) {
|
|
setForm(f => ({
|
|
...f,
|
|
notificationRecipients: f.notificationRecipients.map((r: NotificationRecipient, i: number) =>
|
|
i === idx ? { ...r, name } : r
|
|
),
|
|
}));
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-zinc-100">Wholesale Settings</h2>
|
|
|
|
<div className="rounded-2xl bg-zinc-900 p-6 shadow-black/20 ring-1 ring-zinc-700">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium text-zinc-100">Require Approval</p>
|
|
<p className="text-sm text-zinc-500">New registrations must be manually approved.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setForm(f => ({ ...f, requireApproval: !f.requireApproval }))}
|
|
className={`relative inline-flex h-7 w-12 items-center rounded-full transition-colors ${form.requireApproval ? "bg-green-600" : "bg-slate-300"}`}
|
|
>
|
|
<span className={`inline-block h-5 w-5 transform rounded-full bg-zinc-900 shadow transition-transform ${form.requireApproval ? "translate-x-6" : "translate-x-1"}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium text-zinc-100">Wholesale Portal</p>
|
|
<p className="text-sm text-zinc-500">Show the Wholesale Portal card on this brand's storefront page.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setForm(f => ({ ...f, wholesaleEnabled: !f.wholesaleEnabled }))}
|
|
className={`relative inline-flex h-7 w-12 items-center rounded-full transition-colors ${form.wholesaleEnabled ? "bg-green-600" : "bg-slate-300"}`}
|
|
>
|
|
<span className={`inline-block h-5 w-5 transform rounded-full bg-zinc-900 shadow transition-transform ${form.wholesaleEnabled ? "translate-x-6" : "translate-x-1"}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between rounded-xl border border-blue-200 bg-blue-50 px-4 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100">
|
|
<svg className="h-4 w-4 text-blue-600" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-zinc-100">Square Sync for Wholesale</p>
|
|
<p className="text-xs text-zinc-500">
|
|
When enabled, wholesale product changes are automatically pushed to Square.
|
|
{form.squareSyncEnabled
|
|
? " Auto-sync is active."
|
|
: " Auto-sync is disabled — changes will not be pushed to Square."}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setForm(f => ({ ...f, squareSyncEnabled: !f.squareSyncEnabled }))}
|
|
className={`relative inline-flex h-7 w-12 items-center rounded-full transition-colors ${form.squareSyncEnabled ? "bg-green-600" : "bg-slate-300"}`}
|
|
>
|
|
<span className={`inline-block h-5 w-5 transform rounded-full bg-zinc-900 shadow transition-transform ${form.squareSyncEnabled ? "translate-x-6" : "translate-x-1"}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Minimum Order Amount ($)</label>
|
|
<input type="number" value={form.minOrderAmount} onChange={e => setForm(f => ({ ...f, minOrderAmount: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" step="0.01" placeholder="No minimum" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">From Email</label>
|
|
<input type="email" value={form.fromEmail} onChange={e => setForm(f => ({ ...f, fromEmail: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Pickup Location</label>
|
|
<textarea value={form.pickupLocation} onChange={e => setForm(f => ({ ...f, pickupLocation: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900 font-mono" rows={3} />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">FOB Location</label>
|
|
<input value={form.fobLocation} onChange={e => setForm(f => ({ ...f, fobLocation: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Invoice Business Name</label>
|
|
<input value={form.invoiceBusinessName} onChange={e => setForm(f => ({ ...f, invoiceBusinessName: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Invoice Business Address</label>
|
|
<textarea value={form.invoiceBusinessAddress} onChange={e => setForm(f => ({ ...f, invoiceBusinessAddress: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" rows={2} />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Invoice Business Phone</label>
|
|
<input value={form.invoiceBusinessPhone} onChange={e => setForm(f => ({ ...f, invoiceBusinessPhone: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Invoice Business Email</label>
|
|
<input type="email" value={form.invoiceBusinessEmail} onChange={e => setForm(f => ({ ...f, invoiceBusinessEmail: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Invoice Business Website</label>
|
|
<input value={form.invoiceBusinessWebsite} onChange={e => setForm(f => ({ ...f, invoiceBusinessWebsite: e.target.value }))}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" placeholder="https://" />
|
|
</div>
|
|
|
|
{/* Team Notification Recipients */}
|
|
<div className="col-span-2 rounded-2xl bg-blue-50 p-5 ring-1 ring-blue-200">
|
|
<label className="block text-sm font-semibold text-slate-800 mb-1">Team Notification Recipients</label>
|
|
<p className="text-xs text-blue-600 mb-4 leading-relaxed">
|
|
These team members receive all wholesale notifications for this brand — new orders,
|
|
deposits, fulfillments, price sheets, and pickup reminders. If no recipients are
|
|
active, the system falls back to any configured notification email on file.
|
|
</p>
|
|
|
|
{/* Empty state */}
|
|
{form.notificationRecipients.length === 0 && (
|
|
<div className="text-center py-6 mb-4 rounded-xl bg-zinc-900 ring-1 ring-zinc-700">
|
|
<p className="text-sm text-slate-400 mb-1">No recipients added yet.</p>
|
|
<p className="text-xs text-slate-400">Add an email address below to get started.</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Recipients list */}
|
|
<div className="space-y-2 mb-4">
|
|
{form.notificationRecipients.map((r: NotificationRecipient, idx: number) => (
|
|
<div key={idx} className={`flex items-center gap-2 rounded-xl px-3 py-2.5 bg-zinc-900 ring-1 ${r.active ? "ring-zinc-700" : "ring-slate-300 opacity-70"}`}>
|
|
<input
|
|
type="checkbox" checked={r.active} onChange={() => toggleRecipient(idx)}
|
|
className="rounded border-slate-400 mt-0.5" title={r.active ? "Active — receives notifications" : "Inactive"} />
|
|
<div className="flex-1 min-w-0">
|
|
<p className={`text-sm font-medium ${r.active ? "text-zinc-100" : "text-slate-400"}`}>{r.email}</p>
|
|
{r.name && <p className="text-xs text-slate-400 truncate">{r.name}</p>}
|
|
{r.notification_types && r.notification_types.length > 0 && (
|
|
<p className="text-xs text-slate-300 mt-0.5" title="Per-type filtering coming soon">Types: {r.notification_types.join(", ")}</p>
|
|
)}
|
|
</div>
|
|
<input
|
|
type="text" placeholder="Name (optional)"
|
|
value={r.name ?? ""}
|
|
onChange={e => updateRecipientName(idx, e.target.value)}
|
|
className="rounded-xl border border-zinc-600 px-2.5 py-1.5 text-xs w-36 outline-none focus:border-slate-900" />
|
|
<button onClick={() => removeRecipient(idx)}
|
|
className="text-red-400 hover:text-red-400 text-xs font-medium px-2 py-1 rounded-lg hover:bg-red-900/30 transition-colors"
|
|
title="Remove recipient">✕</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add recipient */}
|
|
<AddRecipientForm onAdd={addRecipient} />
|
|
</div>
|
|
{/* Webhook Settings */}
|
|
<div className="col-span-2 rounded-2xl bg-purple-50 p-5 ring-1 ring-purple-200">
|
|
<label className="block text-sm font-semibold text-slate-800 mb-1">Webhook Integration</label>
|
|
<p className="text-xs text-purple-600 mb-4 leading-relaxed">
|
|
Send order events to external systems (Harvest Point, ERPs, etc.). Payload is signed
|
|
with HMAC-SHA256. Enable and configure the URL and secret below.
|
|
</p>
|
|
<WebhookSettingsSection brandId={brandId} onMsg={onMsg} />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button onClick={handleSave} disabled={saving}
|
|
className="rounded-xl bg-slate-900 px-6 py-2.5 text-sm font-bold text-white hover:bg-slate-800 disabled:opacity-50">
|
|
{saving ? "Saving..." : "Save Settings"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Webhook Settings Section (inline in SettingsTab) ───────────────────────────
|
|
function WebhookSettingsSection({ brandId, onMsg }: {
|
|
brandId: string;
|
|
onMsg: (kind: "success" | "error", text: string) => void;
|
|
}) {
|
|
const [settings, setSettings] = useState<{
|
|
url: string;
|
|
secret: string;
|
|
enabled: boolean;
|
|
}>({ url: "", secret: "", enabled: false });
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [testing, setTesting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
getWebhookSettings(brandId).then((s: { url: string; secret: string; enabled: boolean } | null) => {
|
|
if (s) {
|
|
setSettings({ url: s.url ?? "", secret: s.secret ?? "", enabled: s.enabled });
|
|
} else {
|
|
setSettings({ url: "", secret: "", enabled: false });
|
|
}
|
|
setLoading(false);
|
|
});
|
|
}, [brandId]);
|
|
|
|
async function handleSave() {
|
|
setSaving(true);
|
|
const result = await saveWebhookSettings({
|
|
brandId,
|
|
url: settings.url,
|
|
secret: settings.secret,
|
|
enabled: settings.enabled,
|
|
});
|
|
setSaving(false);
|
|
if (result.success) {
|
|
onMsg("success", "Webhook settings saved.");
|
|
} else {
|
|
onMsg("error", result.error ?? "Failed to save webhook settings.");
|
|
}
|
|
}
|
|
|
|
async function handleTestDispatch() {
|
|
if (!settings.url || !settings.secret) {
|
|
onMsg("error", "Enter both a webhook URL and signing secret before testing.");
|
|
return;
|
|
}
|
|
setTesting(true);
|
|
onMsg("success", "Sending test webhook...");
|
|
|
|
const testPayload = {
|
|
event: "order_created",
|
|
test: true,
|
|
brand_id: brandId,
|
|
message: "Test webhook from Route Commerce wholesale portal",
|
|
timestamp: new Date().toISOString(),
|
|
order_id: null,
|
|
};
|
|
const payloadString = JSON.stringify(testPayload);
|
|
const signature = crypto
|
|
.createHmac("sha256", settings.secret)
|
|
.update(payloadString)
|
|
.digest("hex");
|
|
|
|
try {
|
|
const res = await fetch(settings.url, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-Webhook-Signature": `sha256=${signature}`,
|
|
"X-Webhook-Event": "order_created",
|
|
},
|
|
body: payloadString,
|
|
});
|
|
const responseText = await res.text().catch(() => "");
|
|
if (res.ok) {
|
|
onMsg("success", `Test delivered — ${res.status} response from your endpoint. Check wholesale_sync_log for the logged entry.`);
|
|
} else {
|
|
onMsg("error", `Webhook endpoint returned ${res.status}: ${responseText.slice(0, 120)}`);
|
|
}
|
|
} catch (err) {
|
|
onMsg("error", `Connection failed: ${err instanceof Error ? err.message : "Network error"}`);
|
|
}
|
|
|
|
setTesting(false);
|
|
}
|
|
|
|
if (loading) {
|
|
return <p className="text-sm text-slate-400">Loading webhook settings...</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-zinc-300">Webhook Enabled</p>
|
|
<p className="text-xs text-zinc-500">When disabled, no events are queued or sent.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setSettings(s => ({ ...s, enabled: !s.enabled }))}
|
|
className={`relative inline-flex h-7 w-12 items-center rounded-full transition-colors ${settings.enabled ? "bg-purple-600" : "bg-slate-300"}`}
|
|
>
|
|
<span className={`inline-block h-5 w-5 transform rounded-full bg-zinc-900 shadow transition-transform ${settings.enabled ? "translate-x-6" : "translate-x-1"}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">Webhook URL</label>
|
|
<input
|
|
type="url"
|
|
value={settings.url}
|
|
onChange={e => setSettings(s => ({ ...s, url: e.target.value }))}
|
|
placeholder="https://your-system.com/webhooks/wholesale"
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-purple-600"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-300 mb-1">
|
|
Signing Secret (HMAC-SHA256)
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={settings.secret}
|
|
onChange={e => setSettings(s => ({ ...s, secret: e.target.value }))}
|
|
placeholder="Leave blank to keep current secret"
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-purple-600 font-mono"
|
|
/>
|
|
<p className="mt-1 text-xs text-slate-400">
|
|
The receiver should verify the <code className="bg-zinc-950 px-1">X-Webhook-Signature</code> header using this secret.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 pt-1">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="rounded-xl bg-purple-600 px-4 py-2 text-sm font-semibold text-white hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
{saving ? "Saving..." : "Save Webhook Settings"}
|
|
</button>
|
|
{settings.enabled && settings.url && (
|
|
<button
|
|
onClick={handleTestDispatch}
|
|
disabled={testing}
|
|
className="rounded-xl border border-purple-300 px-4 py-2 text-sm font-medium text-purple-700 hover:bg-purple-50 disabled:opacity-50"
|
|
>
|
|
{testing ? "Dispatching..." : "Send Test Webhook"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Add Recipient Form (inline in Settings) ───────────────────────────────────
|
|
function AddRecipientForm({ onAdd }: { onAdd: (email: string, name: string) => void }) {
|
|
const [email, setEmail] = useState("");
|
|
const [name, setName] = useState("");
|
|
const [error, setError] = useState("");
|
|
|
|
function isValidEmail(e: string) {
|
|
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
|
|
}
|
|
|
|
function handleAdd() {
|
|
if (!email.trim()) return;
|
|
if (!isValidEmail(email.trim())) {
|
|
setError("Enter a valid email address.");
|
|
return;
|
|
}
|
|
setError("");
|
|
onAdd(email.trim(), name.trim());
|
|
setEmail("");
|
|
setName("");
|
|
}
|
|
|
|
return (
|
|
<div className="flex gap-2 items-start">
|
|
<div className="flex-1">
|
|
<input
|
|
type="email" placeholder="Email address"
|
|
value={email} onChange={e => { setEmail(e.target.value); setError(""); }}
|
|
onKeyDown={e => e.key === "Enter" && handleAdd()}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<div className="w-36">
|
|
<input
|
|
type="text" placeholder="Name (optional)"
|
|
value={name} onChange={e => setName(e.target.value)}
|
|
onKeyDown={e => e.key === "Enter" && handleAdd()}
|
|
className="w-full rounded-xl border border-zinc-600 px-3 py-2 text-sm outline-none focus:border-slate-900" />
|
|
</div>
|
|
<button onClick={handleAdd}
|
|
className="rounded-xl bg-green-600 text-white px-3 py-2 text-sm font-medium hover:bg-green-700 whitespace-nowrap">
|
|
Add
|
|
</button>
|
|
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Shared Components ─────────────────────────────────────────────────────────
|
|
|
|
function StatusBadge({ status }: { status: string }) {
|
|
const map: Record<string, string> = {
|
|
pending: "bg-yellow-100 text-yellow-700",
|
|
awaiting_deposit: "bg-purple-100 text-purple-700",
|
|
confirmed: "bg-blue-100 text-blue-700",
|
|
fulfilled: "bg-green-100 text-green-400",
|
|
};
|
|
const label: Record<string, string> = {
|
|
pending: "Pending",
|
|
awaiting_deposit: "Awaiting Deposit",
|
|
confirmed: "Confirmed",
|
|
fulfilled: "Fulfilled",
|
|
};
|
|
return (
|
|
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${map[status] ?? "bg-zinc-950 text-zinc-400"}`}>
|
|
{label[status] ?? status}
|
|
</span>
|
|
);
|
|
} |