// ============================================================ // Enba Üretim Planlama Modülü // localStorage key: enba_uretim_planlar // Depends on: enba_uretim_kayitlari (actuals), enba_makinalar_v2 // ============================================================ const UretimPlanlamaModulu = () => { // ── State ────────────────────────────────────────────────── const [planlar, setPlanlar] = React.useState([]); const [aktifPlanId, setAktifPlanId] = React.useState(null); const [aktifTab, setAktifTab] = React.useState(0); const [formAcik, setFormAcik] = React.useState(false); const [duzenlenenId, setDuzenlenenId] = React.useState(null); const [kayitlar, setKayitlar] = React.useState([]); const [ozelGunForm, setOzelGunForm] = React.useState(null); // { tarih } const bosForm = { baslik: "", baslangicTarihi: "", bitisTarihi: "", hedefCikanTon: "", verimOrani: 85, vardiyaSayisi: 2, vardiyaSaati: 8, calismaGunleri: [1, 2, 3, 4, 5, 6], urunTuru: "", notlar: "", ozelGunler: [], }; const [form, setForm] = React.useState(bosForm); const [ozelFormData, setOzelFormData] = React.useState({ tur: "tatil", not: "" }); const [loading, setLoading] = React.useState(true); // ── Load from DataService ──────────────────────────────────── const loadData = async () => { if (!window.DataService) return; setLoading(true); try { const [plans, recs] = await Promise.all([ window.DataService.getProductionPlans(), window.DataService.getProductionRecords() ]); // Map snake_case to camelCase for plans const mappedPlans = plans.map(p => ({ id: p.id, baslik: p.title, baslangicTarihi: p.start_date, bitisTarihi: p.end_date, hedefCikanTon: p.target_output, verimOrani: p.efficiency_rate, vardiyaSayisi: p.shift_count, vardiyaSaati: p.shift_hours, calismaGunleri: p.working_days, urunTuru: p.product_type, ozelGunler: p.special_days || [], notlar: p.notlar })); // Map snake_case to camelCase for actual records const mappedRecs = recs.map(r => ({ tarih: r.tarih, girenHammadde: r.giren_hammadde, cikanUrun: r.cikan_urun })); setPlanlar(mappedPlans); setKayitlar(mappedRecs); } catch (e) { console.error("Üretim planlama verileri yüklenemedi:", e); } finally { setLoading(false); } }; React.useEffect(() => { loadData(); }, []); // Persist logic removed, now using direct DB calls // ── Helpers ────────────────────────────────────────────────── const bugun = new Date().toISOString().slice(0, 10); const gunAdi = ["Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cmt"]; const gunAdiTam = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"]; // Returns array of YYYY-MM-DD strings in [start, end] const tarihAraligi = (baslangic, bitis) => { const gunler = []; const cur = new Date(baslangic + "T00:00:00"); const son = new Date(bitis + "T00:00:00"); while (cur <= son) { gunler.push(cur.toISOString().slice(0, 10)); cur.setDate(cur.getDate() + 1); } return gunler; }; // Working days for a plan const calismaDaysHesapla = (plan) => { if (!plan.baslangicTarihi || !plan.bitisTarihi) return []; const tatilTarihler = new Set((plan.ozelGunler || []).map((g) => g.tarih)); return tarihAraligi(plan.baslangicTarihi, plan.bitisTarihi).filter((t) => { const dow = new Date(t + "T00:00:00").getDay(); return plan.calismaGunleri.includes(dow) && !tatilTarihler.has(t); }); }; // Group actuals by date const aktuellerByTarih = React.useMemo(() => { const map = {}; kayitlar.forEach((k) => { if (!map[k.tarih]) map[k.tarih] = { giren: 0, cikan: 0 }; map[k.tarih].giren += Number(k.girenHammadde || 0) / 1000; map[k.tarih].cikan += Number(k.cikanUrun || 0) / 1000; }); return map; }, [kayitlar]); // Active plan (today falls in range) const guncelPlan = React.useMemo(() => planlar.find((p) => p.baslangicTarihi <= bugun && p.bitisTarihi >= bugun), [planlar, bugun] ); const seciliPlan = planlar.find((p) => p.id === aktifPlanId) || null; // ── Form helpers ────────────────────────────────────────────── const formDegistir = (alan, deger) => setForm((prev) => ({ ...prev, [alan]: deger })); const gunToggle = (dow) => { setForm((prev) => { const mevcut = prev.calismaGunleri; return { ...prev, calismaGunleri: mevcut.includes(dow) ? mevcut.filter((d) => d !== dow) : [...mevcut, dow].sort(), }; }); }; // Live preview for the form const formCalismaDays = React.useMemo(() => { if (!form.baslangicTarihi || !form.bitisTarihi || form.calismaGunleri.length === 0) return 0; const tatil = new Set((form.ozelGunler || []).map((g) => g.tarih)); return tarihAraligi(form.baslangicTarihi, form.bitisTarihi).filter((t) => { const dow = new Date(t + "T00:00:00").getDay(); return form.calismaGunleri.includes(dow) && !tatil.has(t); }).length; }, [form.baslangicTarihi, form.bitisTarihi, form.calismaGunleri, form.ozelGunler]); const gunlukHedefPreview = formCalismaDays > 0 && form.hedefCikanTon ? (Number(form.hedefCikanTon) / formCalismaDays).toFixed(1) : null; // ── CRUD ────────────────────────────────────────────────────── const planKaydet = async () => { if (!form.baslik || !form.baslangicTarihi || !form.bitisTarihi || !form.hedefCikanTon) return; try { await window.DataService.saveProductionPlan({ ...form, id: duzenlenenId }); await loadData(); setForm(bosForm); setFormAcik(false); setDuzenlenenId(null); } catch (e) { alert("Plan kaydedilemedi."); } }; const planSil = async (id) => { try { await window.DataService.deleteData('production_plans', id); await loadData(); if (aktifPlanId === id) setAktifPlanId(null); } catch (e) { alert("Plan silinemedi."); } }; const ozelGunEkle = async (planId, tarih, tur, not) => { const plan = planlar.find(p => p.id === planId); if (!plan) return; const mevcutOzel = (plan.ozelGunler || []).filter(g => g.tarih !== tarih); const yeniPlan = { ...plan, ozelGunler: [...mevcutOzel, { tarih, tur, not }] }; try { await window.DataService.saveProductionPlan(yeniPlan); await loadData(); setOzelGunForm(null); } catch (e) { alert("Özel gün kaydedilemedi."); } }; const ozelGunSil = async (planId, tarih) => { const plan = planlar.find(p => p.id === planId); if (!plan) return; const yeniPlan = { ...plan, ozelGunler: (plan.ozelGunler || []).filter(g => g.tarih !== tarih) }; try { await window.DataService.saveProductionPlan(yeniPlan); await loadData(); } catch (e) { alert("Özel gün silinemedi."); } }; // ── Styles ──────────────────────────────────────────────────── const S = { kart: { background: "var(--surface-container-lowest)", borderRadius: "1.2rem", border: "1px solid var(--surface-container-highest)", boxShadow: "var(--shadow-sm)", padding: "1.25rem 1.5rem", }, tab: (aktif) => ({ padding: "0.45rem 1.2rem", borderRadius: "2rem", border: "none", cursor: "pointer", fontFamily: "'Manrope', sans-serif", fontWeight: 600, fontSize: "0.88rem", background: aktif ? "var(--enba-dark)" : "transparent", color: aktif ? "#fff" : "var(--on-surface-variant)", transition: "all 0.2s", }), btn: (renk = "navy") => ({ padding: "0.4rem 1rem", borderRadius: "0.6rem", border: "none", cursor: "pointer", fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: "0.82rem", background: renk === "navy" ? "var(--enba-dark)" : renk === "green" ? "var(--enba-orange)" : renk === "red" ? "#e53935" : "#e0e0e0", color: renk === "gray" ? "var(--on-surface)" : "#fff", }), input: { padding: "0.5rem 0.75rem", borderRadius: "0.6rem", border: "1px solid var(--surface-container-highest)", background: "var(--surface-container-low)", color: "var(--on-surface)", fontFamily: "'Inter', sans-serif", fontSize: "0.88rem", width: "100%", boxSizing: "border-box", }, label: { display: "block", fontSize: "0.78rem", fontWeight: 600, color: "var(--on-surface-variant)", marginBottom: "0.3rem", fontFamily: "'Inter', sans-serif", }, thStyle: { background: "var(--enba-dark)", color: "#fff", padding: "0.6rem 0.75rem", textAlign: "left", fontSize: "0.78rem", fontFamily: "'Manrope', sans-serif", fontWeight: 700, whiteSpace: "nowrap", }, tdStyle: (i) => ({ padding: "0.5rem 0.75rem", fontSize: "0.8rem", fontFamily: "'Inter', sans-serif", background: i % 2 === 0 ? "var(--surface-container-lowest)" : "var(--surface-container-low)", color: "var(--on-surface)", borderBottom: "1px solid var(--surface-container-highest)", }), }; // ── KPI card component ──────────────────────────────────────── const KPIKart = ({ baslik, deger, alt, renk }) => (
{baslik}
{deger}
{alt &&
{alt}
}
); // ── Progress bar ────────────────────────────────────────────── const ProgressBar = ({ oran, renk }) => { const pct = Math.min(100, Math.max(0, oran || 0)); const bg = renk || (pct >= 95 ? "#2e7d32" : pct >= 80 ? "#f57c00" : "#c62828"); return (
); }; // ── Durum badge ─────────────────────────────────────────────── const DurumBadge = ({ durum }) => { const renkler = { "Hedefte": { bg: "rgba(46,125,50,0.15)", text: "#1b5e20" }, "Yakın": { bg: "rgba(230,81,0,0.14)", text: "#bf360c" }, "Hedef Altı": { bg: "rgba(198,40,40,0.14)", text: "#b71c1c" }, "Veri Yok": { bg: "rgba(97,97,97,0.14)", text: "#424242" }, "Tatil": { bg: "rgba(230,81,0,0.14)", text: "#bf360c" }, "Bakım": { bg: "rgba(57,73,171,0.14)", text: "#283593" }, "Planlandı": { bg: "rgba(21,101,192,0.14)", text: "#0d47a1" }, "Çalışma Dışı": { bg: "rgba(97,97,97,0.12)", text: "#616161" }, "Bugün": { bg: "rgba(21,34,46,0.12)", text: "var(--enba-dark)" }, }; const r = renkler[durum] || { bg: "rgba(97,97,97,0.12)", text: "#424242" }; return ( {durum} ); }; // ── "Plan seç" uyarısı ──────────────────────────────────────── const PlanSecUyarisi = () => (
⚡
Önce bir plan seçin
Planlar sekmesinden bir planı seçerek bu sekmeyi görüntüleyebilirsiniz.
); // ════════════════════════════════════════════════════════════ // TAB 1 — PLANLAR // ════════════════════════════════════════════════════════════ const Tab1Planlar = () => { const toplamHedef = planlar.reduce((s, p) => s + Number(p.hedefCikanTon || 0), 0); return (
{/* KPI Summary */}
{/* New plan button */} {!formAcik && ( )} {/* Inline form */} {formAcik && (
{duzenlenenId ? "Planı Düzenle" : "Yeni Plan"}
{/* baslik */}
formDegistir("baslik", e.target.value)} placeholder="Örn: Nisan 2024 Üretim Planı" />
formDegistir("baslangicTarihi", e.target.value)} />
formDegistir("bitisTarihi", e.target.value)} />
formDegistir("hedefCikanTon", e.target.value)} placeholder="500" onFocus={window.selectOnFocus} />
formDegistir("verimOrani", e.target.value)} min={1} max={100} onFocus={window.selectOnFocus} />
formDegistir("vardiyaSayisi", e.target.value)} min={1} max={3} onFocus={window.selectOnFocus} />
formDegistir("vardiyaSaati", e.target.value)} min={1} max={24} onFocus={window.selectOnFocus} />
formDegistir("urunTuru", e.target.value)} placeholder="Granül PE" />
{/* Çalışma günleri */}
{gunAdi.map((g, i) => ( ))}
{/* Notlar */}