// =============================================================
// Shared utilities — formatters, icons, primitives
// =============================================================
const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ---------- Formatters ----------
const fmtEUR = (n, opts = {}) => {
if (n === null || n === undefined || !isFinite(n)) return "—";
const { decimals = 2, showSign = false } = opts;
const sign = showSign && n > 0 ? "+" : "";
return sign + n.toLocaleString("fr-FR", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
};
const fmtJPY = (n) => {
if (n === null || n === undefined) return "—";
return Math.round(n).toLocaleString("fr-FR");
};
const fmtInt = (n) => (n === null || n === undefined ? "—" : Math.round(n).toLocaleString("fr-FR"));
const fmtDate = (s) => {
if (!s) return "—";
const d = new Date(s);
return d.toLocaleDateString("fr-FR", { day: "2-digit", month: "short", year: "2-digit" });
};
const fmtDateShort = (s) => {
if (!s) return "—";
const d = new Date(s);
return d.toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit" });
};
// ---------- Money components ----------
const Money = ({ eur, jpy, neg, pos, decimals = 2, showJpy = true, rate }) => {
const cls = ["money"];
if (neg || (eur !== undefined && eur < 0)) cls.push("neg");
if (pos) cls.push("pos");
return (
€
{fmtEUR(eur, { decimals })}
);
};
const MoneyPair = ({ eur, jpy, decimals = 2 }) => (
{jpy !== undefined && jpy !== null && (
¥{fmtJPY(jpy)}
)}
);
// ---------- Icons (inline SVG, 14×14) ----------
const Icon = ({ name, size = 14 }) => {
const s = size;
const common = { width: s, height: s, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
const map = {
home: ,
box: ,
cart: ,
layers: ,
tag: ,
wallet: ,
plus: ,
arrow: ,
chev: ,
close: ,
search: ,
chart: ,
download: ,
edit: ,
trash: ,
refresh: ,
check: ,
minus: ,
external: ,
filter: ,
dots: ,
yen: ,
truck: ,
package: ,
gauge: ,
undo: ,
settings: ,
};
return map[name] || null;
};
// ---------- Status helpers ----------
const STATUS_LABELS = {
delivered: "Livré",
in_transit: "En transit",
ordered: "Commandé",
created: "Créé",
sold: "Vendu",
finalized: "Finalisé",
available: "Dispo",
};
const StatusPill = ({ status }) => (
{STATUS_LABELS[status] || status}
);
// ---------- Rechargement colis : couverture & statut (partage PC + mobile) ----------
// Total JPY a recharger sur ZenMarket pour un colis (hors douane EUR).
function shipRechargeTotalJpy(shipment, purchases) {
if (!shipment || (shipment.currency || "JPY") !== "JPY") return 0;
var items = (purchases || []).filter(function (p) { return p.ship === shipment.id; });
var itemsJpy = items.reduce(function (a, p) { return a + (p.jpy || 0) + (p.port_jp || 0); }, 0);
var portJpy = shipment.port_jpy || shipment.intl_shipping_jpy || 0;
var zm = items.reduce(function (a, p) { return a + (p.zm_fee || 0); }, 0);
return itemsJpy + portJpy + zm;
}
// Couverture en % (topups lies / total du). null si total inconnu (pas JPY / pas d'achats).
function shipRechargePct(shipment, topups, purchases) {
var totalJpy = shipRechargeTotalJpy(shipment, purchases);
if (totalJpy <= 0) return null;
var topupsJpy = (topups || [])
.filter(function (t) { return t.shipment === shipment.id; })
.reduce(function (a, t) { return a + (t.jpy || 0); }, 0);
return Math.round(topupsJpy / totalJpy * 100);
}
// Statut rechargement -> {type, label, color, pct}. Validation manuelle prioritaire.
// Confirme seulement si couverture 95-100% ; <95 = manque ; >100 = surplus.
function shipRechargeStatus(shipment, topups, purchases) {
if (shipment && shipment.recharge_confirmed) {
var _tot = shipRechargeTotalJpy(shipment, purchases);
var _tj = (topups || []).filter(function (t) { return t.shipment === shipment.id; }).reduce(function (a, t) { return a + (t.jpy || 0); }, 0);
return { type: "manual", label: "✓ Validé", color: "pos", pct: shipRechargePct(shipment, topups, purchases), deltaJpy: _tot > 0 ? (_tj - _tot) : null };
}
var linked = (topups || []).filter(function (t) { return t.shipment === shipment.id; });
var pct = shipRechargePct(shipment, topups, purchases);
if (linked.length === 0) {
if (shipment && shipment.rate) return { type: "estimation", label: "Estimation", color: "ghost", pct: pct };
return { type: "none", label: "À recharger", color: "warn", pct: 0 };
}
var allHaveEur = linked.every(function (t) { return !!t.eur; });
if (!allHaveEur) return { type: "pending", label: "€ à compléter", color: "warn", pct: pct };
if (pct === null) return { type: "confirmed", label: "✓ Confirmé", color: "pos", pct: null };
var totalJpy = shipRechargeTotalJpy(shipment, purchases);
var topupsJpy = linked.reduce(function (a, t) { return a + (t.jpy || 0); }, 0);
var deltaJpy = topupsJpy - totalJpy;
if (pct < 95) return { type: "under", label: "Manque " + fmtJPY(totalJpy - topupsJpy) + "¥ (" + pct + "%)", color: "warn", pct: pct, deltaJpy: deltaJpy };
if (pct > 100) return { type: "surplus", label: "Surplus +" + fmtJPY(topupsJpy - totalJpy) + "¥ (" + pct + "%)", color: "neg", pct: pct, deltaJpy: deltaJpy };
return { type: "confirmed", label: "✓ Confirmé " + pct + "%", color: "pos", pct: pct, deltaJpy: deltaJpy };
}
// "Assez rechargé" -> exclure du selecteur de colis (couverture >=95% OU validation manuelle).
function shipIsRecharged(shipment, topups, purchases) {
if (!shipment) return false;
if (shipment.recharge_confirmed) return true;
var pct = shipRechargePct(shipment, topups, purchases);
return pct !== null && pct >= 95;
}
// Numero d'affichage d'un colis, COHERENT partout (commandes + rechargements).
// Utilise le displayNum du backend si present, sinon le recalcule (tri date ASC puis id ASC)
// pour ne pas retomber sur l'id brut sur un colis fraichement cree (optimistic, avant resync).
function shipNum(shipment, allShipments) {
if (!shipment) return "?";
if (shipment.displayNum) return shipment.displayNum;
// fallback : recalculer sur la LISTE COMPLETE des colis. On privilegie la reference
// globale (toujours la liste complete) car la liste passee peut etre filtree/partielle
// (ex: selecteur qui masque les colis recharges) -> l'index repartirait a 1.
var globalList = (typeof window !== "undefined" && window.__allShipments) || null;
var list = (globalList && globalList.length) ? globalList : (allShipments || []);
var sorted = list.slice().sort(function (a, b) {
var da = a.date || "", db = b.date || "";
if (da < db) return -1;
if (da > db) return 1;
return (a.id || 0) - (b.id || 0);
});
for (var i = 0; i < sorted.length; i++) {
if (sorted[i].id === shipment.id) return i + 1;
}
return shipment.displayNum || shipment.id;
}
// ---------- Toast ----------
let toastTimer = null;
const useToast = () => {
const [toast, setToast] = useState(null);
const show = useCallback((msg, onUndo) => {
setToast({ msg, onUndo });
clearTimeout(toastTimer);
toastTimer = setTimeout(() => setToast(null), 4500);
}, []);
const hide = useCallback(() => { clearTimeout(toastTimer); setToast(null); }, []);
const node = toast ? (
{toast.msg}
{toast.onUndo && (
)}
) : null;
return { show, hide, node };
};
// ---------- Drawer ----------
const Drawer = ({ open, onClose, title, sub, footer, wide, children }) => {
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (
);
};
// ---------- Sparkline ----------
const Sparkline = ({ data, height = 38 }) => {
const W = 220;
const H = height;
if (!data || data.length === 0) return null;
const max = Math.max(...data);
const min = Math.min(...data);
const range = Math.max(1, max - min);
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * W;
const y = H - 4 - ((v - min) / range) * (H - 8);
return [x, y];
});
const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(" ");
const area = path + ` L${W},${H} L0,${H} Z`;
return (
);
};
// ---------- Toolbar / Tabs ----------
const Tabs = ({ value, onChange, options }) => (
{options.map(opt => (
))}
);
// ---------- NewCatInline ----------
// Affiche un select avec option "+ Nouvelle collection...".
// Quand selectionne, bascule sur un input inline + bouton Creer.
// Props :
// categories : tableau { id, name }
// value : id selectionne (number | string)
// onChange : fn(id) appelee apres selection ou creation
// actions : { createCategory(name) => Promise }
// selectStyle : styles supplementaires pour le