// Sub-sidebar (right side panel) — contextual content per active main section
// Provides quick actions, stats, recent items, and helpers relevant to each module.
function SubSidebar({ active, lang, onJumpTo, collapsed, onToggleCollapse }) {
const T = (th, en) => lang === "th" ? th : en;
// Find active nav item for title
const navItem = (typeof NAV !== 'undefined') ? NAV.find(n => n.id === active) : null;
const sectionTitle = navItem ? (lang === 'th' ? navItem.th : navItem.en) : '';
// Map each active main section to its sub-content component
const Content = {
architecture: ArchSub,
dashboard: DashboardSub,
boq: BOQSub,
contracts: ContractsSub,
procurement: ProcurementSub,
billing: BillingSub,
progress: ProgressSub,
inventory: InventorySub,
subcontractor: SubconSub,
drawings: DrawingsSub,
}[active] || ArchSub;
if (collapsed) {
// Collapsed: thin vertical strip with expand button
return (
);
}
return (
{/* Header with collapse button */}
{T("รายละเอียด", "Details")}
{sectionTitle}
);
}
// ── Reusable sub-sidebar primitives ──────────────────────────
function SubSection({ title, children, action }) {
return (
);
}
function SubItem({ icon, label, value, color, onClick, sub }) {
return (
onClick && (e.currentTarget.style.background = "var(--glass-3)")}
onMouseLeave={(e) => onClick && (e.currentTarget.style.background = "var(--glass-2)")}>
{icon &&
{icon} }
{value != null && (
{value}
)}
{label}
{value}
{hint &&
{hint}
}
);
}
function SubButton({ icon, label, onClick, primary }) {
return (
{icon}
{label}
);
}
// ───────────────────────────────────────────────────────────────
// ARCHITECTURE — System docs & status
// ───────────────────────────────────────────────────────────────
function ArchSub({ lang, T }) {
const [stats, setStats] = useState(null);
useEffect(() => {
(async () => {
if (!window.electron) return;
const [projects, drawings, boqs, contracts] = await Promise.all([
window.electron.getProjects?.() || [],
window.electron.getDrawings?.() || [],
window.electron.getBOQs?.() || [],
window.electron.getContracts?.() || [],
]);
setStats({ projects: projects.length, drawings: drawings.length, boqs: boqs.length, contracts: contracts.length });
})();
}, []);
return (
<>
{stats && (
<>
{ await window.electron?.backupDatabase?.('manual'); alert(T("Backup สำเร็จ", "Backup done")); }} />
window.electron?.backupOpenFolder?.()} />
{ await window.loadRealData?.(); window.__triggerReload?.(); }} />
);
}
// ───────────────────────────────────────────────────────────────
// DASHBOARD — Quick stats + notifications
// ───────────────────────────────────────────────────────────────
function DashboardSub({ lang, T }) {
const [stats, setStats] = useState({ active: 0, total: 0 });
useEffect(() => {
(async () => {
const projects = await window.electron?.getProjects?.() || [];
setStats({
active: projects.filter(p => p.status === 'active').length,
total: projects.length,
});
})();
}, []);
return (
<>
);
}
// ───────────────────────────────────────────────────────────────
// BOQ — Most useful sub-sidebar ⭐
// ───────────────────────────────────────────────────────────────
function BOQSub({ lang, T }) {
const [recent, setRecent] = useState([]);
const [priceStats, setPriceStats] = useState({ total: 0, learned: 0 });
useEffect(() => {
(async () => {
if (!window.electron) return;
const drafts = await window.electron.boqDraftList?.() || [];
setRecent(drafts.slice(0, 5));
// Get price DB stats
const allPrices = await window.electron.boqPriceSearch?.('') || [];
// Use a simple query via search
})();
}, []);
return (
<>
alert(T("จะเปิดในเร็วๆนี้", "Coming soon"))} />
{recent.length === 0
?
💡 {T(
"พิมพ์ในช่อง 'รายการ' จะมี dropdown ขึ้นพร้อมราคา/หน่วย, ค่าวัสดุ, ค่าแรง จากไฟล์ Excel ต้นฉบับ",
"Type in description for dropdown with unit prices from Excel master file"
)}
);
}
// ───────────────────────────────────────────────────────────────
// CONTRACTS — Status overview
// ───────────────────────────────────────────────────────────────
function ContractsSub({ lang, T }) {
const [contracts, setContracts] = useState([]);
useEffect(() => {
(async () => {
const r = await window.electron?.getContracts?.() || [];
setContracts(r);
})();
}, []);
const active = contracts.filter(c => c.status === 'active').length;
const expiringSoon = contracts.filter(c => {
if (!c.end_date) return false;
const days = (new Date(c.end_date) - new Date()) / 86400000;
return days > 0 && days < 30;
}).length;
const totalValue = contracts.reduce((a, c) => a + (c.contract_value_thb || 0), 0);
return (
<>
{contracts.slice(0, 4).map(c => (
);
}
// ───────────────────────────────────────────────────────────────
// PROCUREMENT — PR/PO
// ───────────────────────────────────────────────────────────────
function ProcurementSub({ lang, T }) {
return (
<>
);
}
// ───────────────────────────────────────────────────────────────
// BILLING & TAX
// ───────────────────────────────────────────────────────────────
function BillingSub({ lang, T }) {
return (
<>
VAT 7% · WHT 3% · Retention 5%
);
}
// ───────────────────────────────────────────────────────────────
// PROGRESS — milestones + retention
// ───────────────────────────────────────────────────────────────
function ProgressSub({ lang, T }) {
return (
<>
);
}
// ───────────────────────────────────────────────────────────────
// INVENTORY — stock alerts
// ───────────────────────────────────────────────────────────────
function InventorySub({ lang, T }) {
return (
<>
);
}
// ───────────────────────────────────────────────────────────────
// SUBCONTRACTOR
// ───────────────────────────────────────────────────────────────
function SubconSub({ lang, T }) {
const [subs, setSubs] = useState([]);
useEffect(() => {
(async () => {
const r = await window.electron?.getSubcontractors?.() || [];
setSubs(r);
})();
}, []);
return (
<>
(s.completion_pct || 0) > 0 && (s.completion_pct || 0) < 100).length} accent="rgba(74,222,128,0.12)" />
{subs.slice(0, 5).sort((a, b) => (b.rating_stars || 0) - (a.rating_stars || 0)).map(s => (
);
}
// ───────────────────────────────────────────────────────────────
// DRAWINGS — folders + recent
// ───────────────────────────────────────────────────────────────
function DrawingsSub({ lang, T }) {
const [folders, setFolders] = useState([]);
const [drawings, setDrawings] = useState([]);
useEffect(() => {
(async () => {
const [fl, dl] = await Promise.all([
window.electron?.drawingFolderList?.() || [],
window.electron?.getDrawings?.() || [],
]);
setFolders(fl);
setDrawings(dl);
})();
}, []);
const byDiscipline = drawings.reduce((acc, d) => {
const k = d.discipline || 'Other';
acc[k] = (acc[k] || 0) + 1;
return acc;
}, {});
return (
<>
{Object.entries(byDiscipline).slice(0, 6).map(([disc, count]) => (
💡 {T("คลิกชื่อไฟล์เพื่อเปิด PDF ในโปรแกรม + เพิ่ม comment ได้", "Click filename to open PDF in-app")}
);
}
window.SubSidebar = SubSidebar;