update: Major Overhaul to all subsystems
This commit is contained in:
207
frontend/src/crm/orders/OrderList.jsx
Normal file
207
frontend/src/crm/orders/OrderList.jsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import api from "../../api/client";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
|
||||
const STATUS_COLORS = {
|
||||
draft: { bg: "var(--bg-card-hover)", color: "var(--text-secondary)" },
|
||||
confirmed: { bg: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" },
|
||||
in_production: { bg: "#fff7ed", color: "#9a3412" },
|
||||
shipped: { bg: "#f5f3ff", color: "#6d28d9" },
|
||||
delivered: { bg: "var(--success-bg)", color: "var(--success-text)" },
|
||||
cancelled: { bg: "var(--danger-bg)", color: "var(--danger-text)" },
|
||||
};
|
||||
|
||||
const PAYMENT_COLORS = {
|
||||
pending: { bg: "#fef9c3", color: "#854d0e" },
|
||||
partial: { bg: "#fff7ed", color: "#9a3412" },
|
||||
paid: { bg: "var(--success-bg)", color: "var(--success-text)" },
|
||||
};
|
||||
|
||||
const inputStyle = {
|
||||
backgroundColor: "var(--bg-input)",
|
||||
borderColor: "var(--border-primary)",
|
||||
color: "var(--text-primary)",
|
||||
};
|
||||
|
||||
const ORDER_STATUSES = ["draft", "confirmed", "in_production", "shipped", "delivered", "cancelled"];
|
||||
const PAYMENT_STATUSES = ["pending", "partial", "paid"];
|
||||
|
||||
export default function OrderList() {
|
||||
const [orders, setOrders] = useState([]);
|
||||
const [customerMap, setCustomerMap] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("");
|
||||
const [paymentFilter, setPaymentFilter] = useState("");
|
||||
const [hoveredRow, setHoveredRow] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const { hasPermission } = useAuth();
|
||||
const canEdit = hasPermission("crm", "edit");
|
||||
|
||||
useEffect(() => {
|
||||
api.get("/crm/customers")
|
||||
.then((data) => {
|
||||
const map = {};
|
||||
(data.customers || []).forEach((c) => { map[c.id] = c; });
|
||||
setCustomerMap(map);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const fetchOrders = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (statusFilter) params.set("status", statusFilter);
|
||||
if (paymentFilter) params.set("payment_status", paymentFilter);
|
||||
const qs = params.toString();
|
||||
const data = await api.get(`/crm/orders${qs ? `?${qs}` : ""}`);
|
||||
setOrders(data.orders || []);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchOrders();
|
||||
}, [statusFilter, paymentFilter]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Orders</h1>
|
||||
{canEdit && (
|
||||
<button
|
||||
onClick={() => navigate("/crm/orders/new")}
|
||||
className="px-4 py-2 text-sm rounded-md hover:opacity-90 transition-colors cursor-pointer"
|
||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
||||
>
|
||||
New Order
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mb-4">
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="px-3 py-2 text-sm rounded-md border"
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
{ORDER_STATUSES.map((s) => (
|
||||
<option key={s} value={s}>{s.replace("_", " ")}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={paymentFilter}
|
||||
onChange={(e) => setPaymentFilter(e.target.value)}
|
||||
className="px-3 py-2 text-sm rounded-md border"
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value="">All Payment Statuses</option>
|
||||
{PAYMENT_STATUSES.map((s) => (
|
||||
<option key={s} value={s}>{s}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="text-sm rounded-md p-3 mb-4 border"
|
||||
style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>
|
||||
) : orders.length === 0 ? (
|
||||
<div
|
||||
className="rounded-lg p-8 text-center text-sm border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)", color: "var(--text-muted)" }}
|
||||
>
|
||||
No orders found.
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="rounded-lg overflow-hidden border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Order #</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Customer</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Status</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Total</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Payment</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orders.map((o, index) => {
|
||||
const statusStyle = STATUS_COLORS[o.status] || STATUS_COLORS.draft;
|
||||
const payStyle = PAYMENT_COLORS[o.payment_status] || PAYMENT_COLORS.pending;
|
||||
const customer = customerMap[o.customer_id];
|
||||
const customerName = customer
|
||||
? customer.organization
|
||||
? `${customer.name} / ${customer.organization}`
|
||||
: customer.name
|
||||
: o.customer_id || "—";
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={o.id}
|
||||
onClick={() => navigate(`/crm/orders/${o.id}`)}
|
||||
className="cursor-pointer"
|
||||
style={{
|
||||
borderBottom: index < orders.length - 1 ? "1px solid var(--border-secondary)" : "none",
|
||||
backgroundColor: hoveredRow === o.id ? "var(--bg-card-hover)" : "transparent",
|
||||
}}
|
||||
onMouseEnter={() => setHoveredRow(o.id)}
|
||||
onMouseLeave={() => setHoveredRow(null)}
|
||||
>
|
||||
<td className="px-4 py-3 font-mono text-xs font-medium" style={{ color: "var(--text-heading)" }}>
|
||||
{o.order_number}
|
||||
</td>
|
||||
<td className="px-4 py-3" style={{ color: "var(--text-primary)" }}>{customerName}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className="px-2 py-0.5 text-xs rounded-full capitalize"
|
||||
style={{ backgroundColor: statusStyle.bg, color: statusStyle.color }}
|
||||
>
|
||||
{(o.status || "draft").replace("_", " ")}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3" style={{ color: "var(--text-primary)" }}>
|
||||
{o.currency || "EUR"} {Number(o.total_price || 0).toFixed(2)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className="px-2 py-0.5 text-xs rounded-full capitalize"
|
||||
style={{ backgroundColor: payStyle.bg, color: payStyle.color }}
|
||||
>
|
||||
{o.payment_status || "pending"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
{o.created_at ? new Date(o.created_at).toLocaleDateString() : "—"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user