const { useState, useEffect, useCallback } = React;
const BRANCHES = [
{ id: "army", name: "القوات البرية", nameEn: "GROUND FORCES", code: "GF-01", color: "#2e7d32" },
{ id: "airforce", name: "القوات الجوية", nameEn: "AIR FORCES", code: "AF-02", color: "#1565c0" },
{ id: "navy", name: "القوات البحرية", nameEn: "NAVAL FORCES", code: "NF-03", color: "#00695c" },
];
const WAREHOUSES = [
{ id: "ammo", name: "الذخيرة", nameEn: "AMMUNITION", color: "#c62828", idealTemp: [15, 25], idealHumidity: [30, 50] },
{ id: "medical", name: "المواد الطبية", nameEn: "MEDICAL", color: "#2e7d32", idealTemp: [2, 8], idealHumidity: [35, 65] },
{ id: "general", name: "المواد العامة", nameEn: "GENERAL", color: "#e65100", idealTemp: [10, 30], idealHumidity: [30, 60] },
];
const ITEMS_DATA = {
ammo: [
{ id: 1, name: "طلقات 5.56mm NATO", unit: "صندوق", max: 1000, current: 850, category: "ذخيرة خفيفة" },
{ id: 2, name: "طلقات 7.62mm", unit: "صندوق", max: 800, current: 120, category: "ذخيرة خفيفة" },
{ id: 3, name: "قنابل يدوية M67", unit: "قطعة", max: 500, current: 420, category: "متفجرات" },
{ id: 4, name: "صواريخ TOW", unit: "قطعة", max: 200, current: 28, category: "صواريخ" },
{ id: 5, name: "قذائف هاون 81mm", unit: "صندوق", max: 300, current: 280, category: "قذائف" },
{ id: 6, name: "طلقات 9mm", unit: "صندوق", max: 600, current: 65, category: "ذخيرة خفيفة" },
{ id: 7, name: "قنابل دخانية", unit: "قطعة", max: 400, current: 350, category: "متفجرات" },
{ id: 8, name: "صواعق تفجير", unit: "قطعة", max: 250, current: 45, category: "متفجرات" },
],
medical: [
{ id: 1, name: "ضمادات ميدانية", unit: "عبوة", max: 2000, current: 1800, category: "إسعافات أولية" },
{ id: 2, name: "محاليل وريدية", unit: "كرتون", max: 500, current: 70, category: "سوائل" },
{ id: 3, name: "مورفين", unit: "أمبول", max: 1000, current: 750, category: "أدوية" },
{ id: 4, name: "أموكسيسيلين", unit: "عبوة", max: 800, current: 150, category: "مضادات حيوية" },
{ id: 5, name: "أطقم جراحية", unit: "طقم", max: 100, current: 85, category: "معدات" },
{ id: 6, name: "أكياس دم O-", unit: "وحدة", max: 300, current: 40, category: "بنك دم" },
{ id: 7, name: "جبائر طبية", unit: "قطعة", max: 600, current: 520, category: "إسعافات أولية" },
{ id: 8, name: "أقنعة أكسجين", unit: "قطعة", max: 200, current: 180, category: "معدات" },
],
general: [
{ id: 1, name: "وقود ديزل JP-8", unit: "برميل", max: 5000, current: 4200, category: "وقود" },
{ id: 2, name: "زيوت محركات", unit: "جالون", max: 1000, current: 160, category: "زيوت" },
{ id: 3, name: "قطع غيار MRAP", unit: "قطعة", max: 2000, current: 1500, category: "قطع غيار" },
{ id: 4, name: "بطاريات 24V", unit: "قطعة", max: 500, current: 55, category: "كهرباء" },
{ id: 5, name: "إطارات تكتيكية", unit: "قطعة", max: 300, current: 260, category: "قطع غيار" },
{ id: 6, name: "أجهزة اتصال", unit: "جهاز", max: 200, current: 170, category: "اتصالات" },
{ id: 7, name: "مولدات كهربائية", unit: "مولد", max: 50, current: 8, category: "كهرباء" },
{ id: 8, name: "خيام ميدانية", unit: "خيمة", max: 150, current: 130, category: "تجهيزات" },
],
};
function genEnv(wid) {
const w = WAREHOUSES.find(x => x.id === wid);
const [tMin, tMax] = w.idealTemp;
const [hMin, hMax] = w.idealHumidity;
return {
temp: +(tMin + Math.random() * (tMax - tMin) * 1.5 - (tMax - tMin) * 0.15).toFixed(1),
humidity: +Math.max(5, Math.min(95, hMin + Math.random() * (hMax - hMin) * 1.4 - (hMax - hMin) * 0.1)).toFixed(1),
};
}
const READINESS = ["جاهز", "متوسط", "حرج"];
const OPTEMPO = ["منخفض", "متوسط", "مرتفع"];
function initData() {
const d = {};
BRANCHES.forEach(b => {
d[b.id] = {};
WAREHOUSES.forEach(w => {
const env = genEnv(w.id);
d[b.id][w.id] = {
items: ITEMS_DATA[w.id].map(item => {
const v = Math.floor(Math.random() * item.max * 0.25);
return { ...item, current: Math.max(3, Math.min(item.max, Math.floor(item.current + (Math.random() > 0.5 ? v : -v)))) };
}),
temp: env.temp, humidity: env.humidity,
};
});
});
return d;
}
function initRequests() {
const types = ["وقود", "ذخيرة", "مواد طبية", "قطع غيار", "معدات اتصال"];
const priorities = ["عادي", "عاجل", "طوارئ"];
return BRANCHES.map((b, i) => ({
id: `ORD-${String(Math.floor(Math.random() * 90000 + 10000))}`,
branch: b,
type: types[i % types.length],
priority: priorities[i],
quantity: Math.floor(Math.random() * 500 + 50),
currentPct: Math.floor(Math.random() * 40 + 10),
distance: Math.floor(Math.random() * 700 + 100),
eta: (Math.random() * 3 + 0.5).toFixed(1),
status: "pending",
time: new Date().toLocaleTimeString("en-US", { hour12: false }),
}));
}
const TH = 0.25;
/* ──── SVG Icons ──── */
const I = {
shield: (s=18,c="#2e7d32") => ,
box: (s=18,c="#555") => ,
alert: (s=18,c="#c62828") => ,
temp: (s=18,c="#1565c0") => ,
drop: (s=18,c="#0097a7") => ,
chart: (s=18,c="#555") => ,
log: (s=18,c="#555") => ,
bell: (s=18,c="#555") => ,
user: (s=18,c="#555") => ,
lock: (s=18,c="#555") => ,
edit: (s=14,c="#2e7d32") => ,
trash: (s=14,c="#c62828") => ,
plus: (s=14,c="#fff") => ,
check: (s=14,c="#2e7d32") => ,
x: (s=14,c="#999") => ,
chevL: (s=14,c="#999") => ,
search: (s=14,c="#999") => ,
arrow: (s=14,c="#2e7d32") => ,
home: (s=18,c="#555") => ,
target: (s=18,c="#555") => ,
truck: (s=18,c="#555") => ,
clock: (s=18,c="#555") => ,
inbox: (s=18,c="#555") => ,
activity: (s=18,c="#555") => ,
menu: (s=18,c="#555") => ,
warehouse: (s=18,c="#555") => ,
};
function Bar({ pct, h = 7, color }) {
const c = color || (pct <= 10 ? "#c62828" : pct <= 25 ? "#e65100" : pct <= 50 ? "#f9a825" : "#2e7d32");
return ;
}
function Dot({ pct }) {
const c = pct <= 10 ? "#c62828" : pct <= 25 ? "#e65100" : pct <= 50 ? "#f9a825" : "#2e7d32";
return ;
}
function Badge({ children, color = "#c62828" }) {
return {children};
}
function MetricBox({ label, value, unit, color = "#2e7d32", warn }) {
return (
{value}
{unit || ""}
{label}
);
}
const css = `
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
* { box-sizing:border-box; margin:0; padding:0; }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:#f5f5f5 }
::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px }
.hov:hover { background: #f8faf8 !important; }
.hov-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; border-color: #c8e6c9 !important; }
input:focus, select:focus { border-color: #4CAF50 !important; outline: none; box-shadow: 0 0 0 3px rgba(76,175,80,0.08) !important; }
`;
const S = {
input: { padding: "9px 12px", borderRadius: 7, border: "1px solid #ddd", background: "#fff", color: "#333", fontSize: 13, fontFamily: "'Tajawal'", outline: "none", direction: "rtl", width: "100%" },
btnP: { padding: "8px 18px", borderRadius: 7, border: "none", background: "#2e7d32", color: "#fff", cursor: "pointer", fontSize: 12, fontWeight: 700, fontFamily: "'Tajawal'", display: "inline-flex", alignItems: "center", gap: 5 },
btnG: { padding: "7px 14px", borderRadius: 7, border: "1px solid #c8e6c9", background: "#fff", color: "#2e7d32", cursor: "pointer", fontSize: 11, fontWeight: 600, fontFamily: "'Tajawal'", display: "inline-flex", alignItems: "center", gap: 4 },
btnD: { padding: "5px 10px", borderRadius: 6, border: "1px solid #ffcdd2", background: "#fff", color: "#c62828", cursor: "pointer", fontSize: 10, fontFamily: "'Tajawal'", display: "inline-flex", alignItems: "center", gap: 3 },
card: { background: "#fff", border: "1px solid #e8e8e8", borderRadius: 10, padding: 16 },
th: { padding: "10px 12px", textAlign: "right", color: "#888", fontWeight: 600, borderBottom: "2px solid #eee", fontSize: 10, whiteSpace: "nowrap", letterSpacing: 0.3 },
td: { padding: "10px 12px", borderBottom: "1px solid #f3f3f3", fontSize: 12 },
};
function App() {
const [appState, setAppState] = useState("landing");
const [data, setData] = useState(initData);
const [requests, setRequests] = useState(initRequests);
const [page, setPage] = useState("home");
const [tab, setTab] = useState("dashboard");
const [branch, setBranch] = useState(null);
const [warehouse, setWarehouse] = useState(null);
const [search, setSearch] = useState("");
const [editId, setEditId] = useState(null);
const [editVal, setEditVal] = useState("");
const [showAdd, setShowAdd] = useState(false);
const [newItem, setNewItem] = useState({ name: "", unit: "", max: "", current: "", category: "" });
const [toast, setToast] = useState(null);
const [filterCat, setFilterCat] = useState("all");
const [sortBy, setSortBy] = useState("name");
const [logs, setLogs] = useState([]);
const [loginForm, setLoginForm] = useState({ username: "", password: "" });
const [loginError, setLoginError] = useState("");
const [sideOpen, setSideOpen] = useState(true);
const [time, setTime] = useState(new Date());
useEffect(() => { const t = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(t); }, []);
useEffect(() => {
const t = setInterval(() => {
setData(prev => {
const n = JSON.parse(JSON.stringify(prev));
BRANCHES.forEach(b => { WAREHOUSES.forEach(w => { const e = genEnv(w.id); n[b.id][w.id].temp = e.temp; n[b.id][w.id].humidity = e.humidity; }); });
return n;
});
}, 20000);
return () => clearInterval(t);
}, []);
const notify = (msg, type = "success") => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };
const addLog = (a) => setLogs(p => [{ action: a, time: new Date().toLocaleTimeString("en-US", { hour12: false }), date: new Date().toLocaleDateString("en-US") }, ...p].slice(0, 80));
const goTo = (p, b, w) => { setPage(p); setBranch(b); setWarehouse(w); setSearch(""); setFilterCat("all"); setShowAdd(false); setEditId(null); };
const getAlerts = useCallback(() => {
const a = [];
BRANCHES.forEach(b => {
WAREHOUSES.forEach(w => {
const wd = data[b.id]?.[w.id]; if (!wd) return;
wd.items.forEach(item => { const p = item.current / item.max; if (p <= TH) a.push({ branch: b, warehouse: w, item, pct: p }); });
const wi = WAREHOUSES.find(x => x.id === w.id);
if (wd.temp < wi.idealTemp[0] || wd.temp > wi.idealTemp[1]) a.push({ branch: b, warehouse: w, type: "temp", value: wd.temp, ideal: wi.idealTemp });
if (wd.humidity < wi.idealHumidity[0] || wd.humidity > wi.idealHumidity[1]) a.push({ branch: b, warehouse: w, type: "humidity", value: wd.humidity, ideal: wi.idealHumidity });
});
});
return a.sort((x, y) => (x.pct || 0) - (y.pct || 0));
}, [data]);
const alerts = getAlerts();
const itemAlerts = alerts.filter(a => a.item);
const envAlerts = alerts.filter(a => a.type);
const pendingReqs = requests.filter(r => r.status === "pending");
const branchAlertCount = (bid) => { let c = 0; WAREHOUSES.forEach(w => { (data[bid]?.[w.id]?.items || []).forEach(i => { if (i.current / i.max <= TH) c++; }); }); return c; };
const branchMCR = (bid) => {
let tot = 0, cur = 0;
WAREHOUSES.forEach(w => { (data[bid]?.[w.id]?.items || []).forEach(i => { tot += i.max; cur += i.current; }); });
return tot > 0 ? Math.round((cur / tot) * 100) : 0;
};
const totalStats = () => {
let items = 0, max = 0, cur = 0, low = 0, envW = 0;
BRANCHES.forEach(b => { WAREHOUSES.forEach(w => {
const wd = data[b.id]?.[w.id]; if (!wd) return;
wd.items.forEach(i => { items++; max += i.max; cur += i.current; if (i.current / i.max <= TH) low++; });
const wi = WAREHOUSES.find(x => x.id === w.id);
if (wd.temp < wi.idealTemp[0] || wd.temp > wi.idealTemp[1]) envW++;
if (wd.humidity < wi.idealHumidity[0] || wd.humidity > wi.idealHumidity[1]) envW++;
}); });
return { items, max, cur, low, envW, pct: max > 0 ? (cur / max) * 100 : 0 };
};
const stats = totalStats();
const updateItem = (bid, wid, itemId, val) => {
const v = parseInt(val); if (isNaN(v) || v < 0) return;
setData(prev => { const n = JSON.parse(JSON.stringify(prev)); const idx = n[bid][wid].items.findIndex(i => i.id === itemId); if (idx !== -1) { const old = n[bid][wid].items[idx].current; n[bid][wid].items[idx].current = Math.min(v, n[bid][wid].items[idx].max); addLog(`تحديث "${n[bid][wid].items[idx].name}" من ${old} إلى ${v}`); } return n; });
setEditId(null); notify("تم تحديث الكمية بنجاح");
};
const addNewItem = (bid, wid) => {
if (!newItem.name || !newItem.unit || !newItem.max || !newItem.current) return;
setData(prev => { const n = JSON.parse(JSON.stringify(prev)); const maxId = n[bid][wid].items.reduce((m, i) => Math.max(m, i.id), 0); n[bid][wid].items.push({ id: maxId + 1, name: newItem.name, unit: newItem.unit, max: +newItem.max, current: +newItem.current, category: newItem.category || "عام" }); addLog(`إضافة بند "${newItem.name}"`); return n; });
setNewItem({ name: "", unit: "", max: "", current: "", category: "" }); setShowAdd(false); notify("تم إضافة البند");
};
const deleteItem = (bid, wid, itemId) => {
const item = data[bid][wid].items.find(i => i.id === itemId);
setData(prev => { const n = JSON.parse(JSON.stringify(prev)); n[bid][wid].items = n[bid][wid].items.filter(i => i.id !== itemId); return n; });
addLog(`حذف بند "${item?.name}"`); notify("تم حذف البند", "warn");
};
const handleRequest = (id, action) => {
setRequests(prev => prev.map(r => r.id === id ? { ...r, status: action } : r));
addLog(`${action === "approved" ? "الموافقة على" : "رفض"} طلب الإمداد ${id}`);
notify(action === "approved" ? "تمت الموافقة على الطلب" : "تم رفض الطلب", action === "approved" ? "success" : "warn");
};
const handleLogin = () => { if (loginForm.username === "admin" && loginForm.password === "admin") { setAppState("app"); } else { setLoginError("بيانات الدخول غير صحيحة"); } };
/* ═══════ LANDING ═══════ */
if (appState === "landing") return (
Defensethon 2026
منصة إدارة ومراقبة
المستودعات العسكرية
نظام متكامل لإدارة مستودعات الذخيرة والمواد الطبية والعامة مع مراقبة بيئية وطلبات إمداد ذكية وتنبيهات لحظية
{[{ v: "9", l: "مستودع", s: "نشط", ic: I.warehouse(20, "#2e7d32") }, { v: "3", l: "أفرع", s: "عسكرية", ic: I.target(20, "#1565c0") }, { v: "72+", l: "بند", s: "مراقب", ic: I.box(20, "#e65100") }, { v: "24/7", l: "مراقبة", s: "مستمرة", ic: I.activity(20, "#c62828") }].map((s, i) => (
))}
مميزات المنصة
أدوات متقدمة لإدارة ومراقبة المستودعات العسكرية بكفاءة
{[
{ ic: I.chart(24, "#2e7d32"), t: "مراقبة المخزون", d: "تتبع لحظي لجميع البنود مع تنبيهات تلقائية عند انخفاض المخزون عن 25%" },
{ ic: I.temp(24, "#1565c0"), t: "المراقبة البيئية", d: "رصد درجة الحرارة والرطوبة بنطاقات مثالية مخصصة حسب نوع المواد" },
{ ic: I.inbox(24, "#e65100"), t: "طلبات الإمداد", d: "نظام طلبات إمداد ذكي مع إمكانية الموافقة والرفض وتتبع الحالة" },
{ ic: I.alert(24, "#c62828"), t: "نظام التنبيهات", d: "تنبيهات متعددة المستويات للمخزون والظروف البيئية" },
{ ic: I.log(24, "#00695c"), t: "سجل العمليات", d: "توثيق شامل لجميع العمليات مع الطوابع الزمنية" },
{ ic: I.shield(24, "#4a148c"), t: "أمان متقدم", d: "نظام تسجيل دخول آمن مع صلاحيات وصول محددة" },
].map((f, i) => (
))}
);
/* ═══════ LOGIN ═══════ */
if (appState === "login") return (
{I.shield(26, "#2e7d32")}
تسجيل الدخول
منصة إدارة المستودعات العسكرية
{loginError &&
{I.alert(14, "#c62828")} {loginError}
}
setLoginForm({ ...loginForm, username: e.target.value })} onKeyDown={e => e.key === "Enter" && handleLogin()} placeholder="admin" style={{ ...S.input, marginTop: 5 }} />
setLoginForm({ ...loginForm, password: e.target.value })} onKeyDown={e => e.key === "Enter" && handleLogin()} placeholder="admin" style={{ ...S.input, marginTop: 5 }} />
setAppState("landing")} style={{ fontSize: 11, color: "#2e7d32", cursor: "pointer" }}>العودة للرئيسية
للتجربة: admin / admin
);
/* ═══════ MAIN APP ═══════ */
const NavItem = ({ icon, label, active, onClick, count }) => (
{icon}
{sideOpen && {label}}
{sideOpen && count > 0 && {count}}
);
const Crumb = () => (
goTo("home")} style={{ cursor: "pointer", color: page === "home" ? "#2e7d32" : "#888", fontWeight: page === "home" ? 700 : 400, display: "flex", alignItems: "center", gap: 3 }}>{I.home(13, page === "home" ? "#2e7d32" : "#888")} الرئيسية
{branch && <>{I.chevL(11, "#ccc")} goTo("branch", branch)} style={{ cursor: "pointer", color: !warehouse ? "#2e7d32" : "#888", fontWeight: !warehouse ? 700 : 400 }}>{BRANCHES.find(b => b.id === branch)?.name}}
{warehouse && <>{I.chevL(11, "#ccc")}{WAREHOUSES.find(w => w.id === warehouse)?.name}}
);
/* ── UNIT STATUS CARD (ATLAS style) ── */
const UnitCard = ({ b }) => {
const mcr = branchMCR(b.id);
const ac = branchAlertCount(b.id);
const readiness = mcr >= 70 ? "جاهز" : mcr >= 40 ? "متوسط" : "حرج";
const rColor = mcr >= 70 ? "#2e7d32" : mcr >= 40 ? "#e65100" : "#c62828";
return (
goTo("branch", b.id)} style={{ ...S.card, cursor: "pointer", padding: 0, overflow: "hidden" }}>
{b.name}
{b.code} — {b.nameEn}
{readiness}
{WAREHOUSES.map(w => {
const wd = data[b.id]?.[w.id]; if (!wd) return null;
const tot = wd.items.reduce((s, i) => s + i.current, 0);
const mx = wd.items.reduce((s, i) => s + i.max, 0);
const p = mx > 0 ? (tot / mx) * 100 : 0;
return (
);
})}
{r.id}
{r.priority}
{r.branch.name}
طلب إمداد: {r.type} — الكمية: {r.quantity}
المستوى الحالي: {r.currentPct}% — المسافة: {r.distance} كم
وقت التسليم المتوقع: {r.eta} ساعة
{r.status === "pending" ? (
) : (
{r.status === "approved" ? "تمت الموافقة" : "مرفوض"}
)}
);
};
/* ── MAIN DASHBOARD ── */
const Dashboard = () => (
{/* Center content */}
{/* Top stats bar */}
{BRANCHES.map(b => {
const mcr = branchMCR(b.id);
return (
{b.code}
= 70 ? "#2e7d32" : mcr >= 40 ? "#e65100" : "#c62828", fontFamily: "'IBM Plex Sans'" }}>{mcr}%
MCR
);
})}
{I.alert(13, "#c62828")}
{stats.low}
تنبيهات
{I.inbox(13, "#e65100")}
{pendingReqs.length}
طلبات معلقة
{/* Unit cards grid */}
{BRANCHES.map(b => )}
{/* Alerts table */}
{itemAlerts.length > 0 && (
{I.alert(16, "#c62828")}
تنبيهات نقص المخزون
{itemAlerts.length}
{["الجهة", "المستودع", "البند", "الكمية", "النسبة"].map((h, i) => | 2 ? "center" : "right" }}>{h} | )}
{itemAlerts.slice(0, 10).map((a, i) => (
goTo("warehouse", a.branch.id, a.warehouse.id)} style={{ cursor: "pointer" }}>
| {a.branch.name} |
{a.warehouse.name} |
{a.item.name} |
{a.item.current} / {a.item.max} |
{(a.pct * 100).toFixed(0)}% |
))}
)}
{envAlerts.length > 0 && (
{I.temp(16, "#e65100")}
تنبيهات بيئية
{envAlerts.length}
{envAlerts.map((a, i) => (
goTo("warehouse", a.branch.id, a.warehouse.id)} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid #f5f5f5", cursor: "pointer", fontSize: 12 }}>
{a.branch.name} — {a.warehouse.name}
{a.type === "temp" ? `${a.value}° (${a.ideal[0]}°-${a.ideal[1]}°)` : `${a.value}% (${a.ideal[0]}%-${a.ideal[1]}%)`}
))}
)}
{/* Right sidebar - Supply Requests */}
{I.inbox(16, "#2e7d32")}
طلبات الإمداد
{pendingReqs.length > 0 && {pendingReqs.length}}
{requests.map(r =>
)}
{I.target(24, b.color)}
{b.name}
{b.code} — {b.nameEn}
الجاهزية: {readiness} ({mcr}%)
{WAREHOUSES.map(w => {
const wd = data[b.id]?.[w.id]; if (!wd) return null;
const tot = wd.items.reduce((s, i) => s + i.current, 0);
const mx = wd.items.reduce((s, i) => s + i.max, 0);
const p = mx > 0 ? (tot / mx) * 100 : 0;
const lowItems = wd.items.filter(i => i.current / i.max <= TH);
const wi = WAREHOUSES.find(x => x.id === w.id);
const tW = wd.temp < wi.idealTemp[0] || wd.temp > wi.idealTemp[1];
const hW = wd.humidity < wi.idealHumidity[0] || wd.humidity > wi.idealHumidity[1];
return (
goTo("warehouse", branch, w.id)} style={{ ...S.card, cursor: "pointer", padding: 0, overflow: "hidden" }}>
{I.warehouse(18, w.color)}
{w.name}
{w.nameEn} — {wd.items.length} ITEMS
{lowItems.length > 0 &&
{lowItems.length}}
نسبة الامتلاء{p.toFixed(1)}%
{I.temp(14, tW ? "#c62828" : "#1565c0")}{wd.temp}°
{wi.idealTemp[0]}°-{wi.idealTemp[1]}°
{I.drop(14, hW ? "#c62828" : "#0097a7")}{wd.humidity}%
{wi.idealHumidity[0]}%-{wi.idealHumidity[1]}%
{tot.toLocaleString()} / {mx.toLocaleString()}
);
})}
);
};
/* ── Warehouse Detail ── */
const WarehouseView = () => {
const b = BRANCHES.find(x => x.id === branch);
const w = WAREHOUSES.find(x => x.id === warehouse);
if (!b || !w) return null;
const wd = data[b.id]?.[w.id]; if (!wd) return null;
const wi = WAREHOUSES.find(x => x.id === w.id);
const tW = wd.temp < wi.idealTemp[0] || wd.temp > wi.idealTemp[1];
const hW = wd.humidity < wi.idealHumidity[0] || wd.humidity > wi.idealHumidity[1];
const categories = ["all", ...new Set(wd.items.map(i => i.category))];
let items = filterCat === "all" ? wd.items : wd.items.filter(i => i.category === filterCat);
if (search) items = items.filter(i => i.name.includes(search) || i.category.includes(search));
if (sortBy === "pct") items = [...items].sort((a, b) => (a.current / a.max) - (b.current / b.max));
else if (sortBy === "current") items = [...items].sort((a, b) => a.current - b.current);
else items = [...items].sort((a, b) => a.name.localeCompare(b.name, "ar"));
return (
{I.warehouse(20, w.color)}
{I.temp(16, tW ? "#c62828" : "#1565c0")}{wd.temp}°({wi.idealTemp[0]}°-{wi.idealTemp[1]}°)
{I.drop(16, hW ? "#c62828" : "#0097a7")}{wd.humidity}%({wi.idealHumidity[0]}%-{wi.idealHumidity[1]}%)
إجمالي المخزون
{wd.items.reduce((s, i) => s + i.current, 0).toLocaleString()}
من {wd.items.reduce((s, i) => s + i.max, 0).toLocaleString()}
{showAdd && (
)}
{["#", "", "البند", "الفئة", "الوحدة", "الحالي / الأقصى", "المخزون", "إجراءات"].map((h, i) => | 4 ? "center" : "right", width: i < 2 ? 35 : "auto" }}>{h} | )}
{items.map((item, idx) => {
const p = (item.current / item.max) * 100; const low = p <= 25; const crit = p <= 10;
return (
| {idx + 1} |
|
{item.name}{low && {crit ? "حرج" : "منخفض"}} |
{item.category} |
{item.unit} |
{editId === item.id ? (
setEditVal(e.target.value)} onKeyDown={e => { if (e.key === "Enter") updateItem(branch, warehouse, item.id, editVal); if (e.key === "Escape") setEditId(null); }} style={{ ...S.input, width: 70, padding: "5px 7px", textAlign: "center" }} autoFocus />
) : (
{item.current.toLocaleString()} / {item.max.toLocaleString()}
)}
|
{p.toFixed(0)}% |
|
);
})}
{items.length === 0 &&
لا توجد نتائج
}
);
};
const LogsView = () => (
{I.log(18, "#2e7d32")} سجل العمليات
{logs.length === 0 ?
لا توجد عمليات مسجلة
: (
{logs.map((l, i) => (
{l.action}
{l.time} — {l.date}
))}
)}
);
return (
{toast &&
{toast.msg}
}
{/* Sidebar */}
{I.shield(16, "#2e7d32")}
{sideOpen &&
}
goTo("home")} count={stats.low + stats.envW} />
{sideOpen && الجهات
}
{BRANCHES.map(b => goTo("branch", b.id)} count={branchAlertCount(b.id)} />)}
{sideOpen && النظام
}
{ setPage("requests"); setBranch(null); setWarehouse(null); }} count={pendingReqs.length} />
{ setPage("logs"); setBranch(null); setWarehouse(null); }} />
setSideOpen(!sideOpen)} style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: 8, cursor: "pointer" }}>{I.menu(16, "#888")}
{I.user(12, "#2e7d32")}
{sideOpen && <>
{ setAppState("landing"); setPage("home"); setBranch(null); setWarehouse(null); }} style={{ cursor: "pointer", fontSize: 9, color: "#c62828", fontWeight: 600 }}>خروج}
{/* Main */}
{time.toLocaleTimeString("en-US", { hour12: false })}
{I.bell(14, alerts.length > 0 ? "#c62828" : "#888")}{alerts.length > 0 && {alerts.length}}
{page === "home" &&
}
{page === "branch" &&
}
{page === "warehouse" &&
}
{page === "logs" &&
}
{page === "requests" && (
{I.inbox(18, "#2e7d32")} طلبات الإمداد
{requests.map(r => )}
)}