import React, { useState, useMemo } from 'react'; import { Calculator, Plus, Edit2, Trash2, Building2, Sparkles, Search, Filter, DollarSign, PieChart, TrendingUp, TrendingDown, AlertTriangle, CheckCircle2, RefreshCw, Layers, FileSpreadsheet, ShieldCheck, Store, Hotel, Cpu, HardHat, Stethoscope, Utensils, Truck, GraduationCap, Info, X, Check, ArrowRight, Sliders } from 'lucide-react'; import { BudgetItem, Employee, AuditLog } from '../types'; export interface BusinessPreset { id: string; name: string; categoryName: string; icon: React.ElementType; description: string; recommendedBudgetItems: Omit[]; } export const BUSINESS_SECTOR_PRESETS: BusinessPreset[] = [ { id: 'saas_tech', name: 'SaaS & Enterprise Software Cloud', categoryName: 'Teknologi Informasi & SaaS', icon: Cpu, description: 'Sewa aplikasi cloud, infrastructure AWS/GCP, lisensi API, R&D Tech talent & digital ads.', recommendedBudgetItems: [ { code: '5101', name: 'Beban Infrastructure Cloud AWS/GCP & Server Rack', type: 'Beban', division: 'Developer & IT', category: 'OPEX Tech', annualBudget: 1500000000, glAccountDebit: '5101 Beban Server Cloud', glAccountCredit: '1103 Bank BCA Operasional', description: 'Penyediaan server, database cluster, & CDN global.' }, { code: '5102', name: 'Beban Lisensi API Third-Party, AI & Cybersecurity Audit', type: 'Beban', division: 'Developer & IT', category: 'OPEX Tech', annualBudget: 600000000, glAccountDebit: '5102 Beban Lisensi & API', glAccountCredit: '1103 Bank BCA Operasional', description: 'Langganan LLM AI, Payment Gateway, & Penetration Testing.' }, { code: '5103', name: 'Beban Gaji, Tunjangan & Bonus Dev Team & Product', type: 'Beban', division: 'Human Resources & Dev', category: 'OPEX SDM', annualBudget: 6500000000, glAccountDebit: '5103 Beban Gaji Software Dev', glAccountCredit: '1104 Bank Mandiri Payroll', description: 'Gaji pokok, BPJS, & insentif insinyur software.' }, { code: '5104', name: 'Beban Digital Marketing Ads, SEO & B2B Tech Event', type: 'Beban', division: 'Pemasaran & Sales', category: 'OPEX Sales', annualBudget: 1200000000, glAccountDebit: '5104 Beban Marketing SaaS', glAccountCredit: '1103 Bank BCA Operasional', description: 'Kampanye Google Ads, LinkedIn Ads, & B2B Conference.' }, { code: '4101', name: 'Pendapatan Sewa Aplikasi SaaS & Monthly Subscription', type: 'Pendapatan', division: 'Pemasaran & Sales', category: 'Revenue Core', annualBudget: 14000000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4101 Pendapatan SaaS Client', description: 'Recurring monthly & annual subscription plans dari klien.' }, { code: '4102', name: 'Pendapatan Custom System Development & Implementation', type: 'Pendapatan', division: 'Developer & IT', category: 'Revenue Service', annualBudget: 4500000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4102 Pendapatan Custom Dev', description: 'Jasa integrasi ERP, API custom, & onboarding klien.' } ] }, { id: 'retail_minimarket', name: 'Ritel, Supermarket & Minimarket Modern', categoryName: 'Ritel & Perdagangan', icon: Store, description: 'COGS/HPP persediaan barang dagangan, sewa ruko/store, kasir POS, & shrinkage loss.', recommendedBudgetItems: [ { code: '5201', name: 'HPP / Pembelian Persediaan Barang Dagangan Ritel', type: 'Beban', division: 'Merchandising & Procurement', category: 'COGS', annualBudget: 8500000000, glAccountDebit: '5201 HPP Persediaan Ritel', glAccountCredit: '1103 Bank BCA Operasional', description: 'Pengadaan stok FMCG, makanan, minuman & barang toko.' }, { code: '5202', name: 'Beban Sewa Outlet Ruko, Chiller & Utilitas Listrik Store', type: 'Beban', division: 'Operasional Store', category: 'OPEX Store', annualBudget: 1800000000, glAccountDebit: '5202 Beban Sewa & Utilitas Toko', glAccountCredit: '1103 Bank BCA Operasional', description: 'Sewa tempat lokasi toko & listrik freezer/chiller 24 jam.' }, { code: '5203', name: 'Beban Gaji Pramuniaga, Kasir & Crew Store', type: 'Beban', division: 'Operasional Store', category: 'OPEX SDM', annualBudget: 2400000000, glAccountDebit: '5203 Beban Gaji Staff Toko', glAccountCredit: '1104 Bank Mandiri Payroll', description: 'Upah shift pramuniaga, kepala toko & petugas kasir.' }, { code: '5204', name: 'Beban Shrinkage / Kerusakan & Kerugian Stok Toko', type: 'Beban', division: 'Audit & Inventory Control', category: 'OPEX Store Loss', annualBudget: 350000000, glAccountDebit: '5204 Beban Shrinkage Stok', glAccountCredit: '1101 Kas Utama Operasional', description: 'Kerugian barang expired, pecah, atau selisih stok opname.' }, { code: '4201', name: 'Pendapatan Penjualan Ritel Kasir (POS Cash & QRIS)', type: 'Pendapatan', division: 'Operasional Store', category: 'Revenue Retail', annualBudget: 16500000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4201 Pendapatan Penjualan Ritel', description: 'Penjualan langsung toko fisik & platform online ritel.' } ] }, { id: 'hospitality_hotel', name: 'Hospitality, Hotel & Resort', categoryName: 'Akomodasi & Pariwisata', icon: Hotel, description: 'Amenities kamar, laundry linen, F&B resto hotel, utilitas AC/boiler, & komisi OTA.', recommendedBudgetItems: [ { code: '5301', name: 'Beban Guest Amenities, Laundry Linen & Housekeeping', type: 'Beban', division: 'Housekeeping & Front Office', category: 'OPEX Room', annualBudget: 1200000000, glAccountDebit: '5301 Beban Amenities & Linen', glAccountCredit: '1103 Bank BCA Operasional', description: 'Perlengkapan mandi kamar, laundry sprei/handuk, & kebersihan.' }, { code: '5302', name: 'Beban Bahan Baku Dapur Resto & Sarapan Buffet Hotel', type: 'Beban', division: 'F&B Kitchen', category: 'COGS F&B', annualBudget: 2100000000, glAccountDebit: '5302 Beban Bahan Baku F&B', glAccountCredit: '1103 Bank BCA Operasional', description: 'Bahan makanan buffet sarapan pagi & menu resto hotel.' }, { code: '5303', name: 'Beban Utilitas Listrik Chiller, Genset & Air Boiler Hotel', type: 'Beban', division: 'Engineering & Maintenance', category: 'OPEX Utility', annualBudget: 1600000000, glAccountDebit: '5303 Beban Utilitas Hotel', glAccountCredit: '1103 Bank BCA Operasional', description: 'Listrik sentral AC, chiller, genset darurat, & air pendorong.' }, { code: '5304', name: 'Beban Komisi Booking Agent OTA (Traveloka, Agoda, Booking)', type: 'Beban', division: 'Sales & E-Commerce', category: 'OPEX Marketing', annualBudget: 950000000, glAccountDebit: '5304 Beban Komisi OTA', glAccountCredit: '1103 Bank BCA Operasional', description: 'Komisi reservasi online travel agent eksternal.' }, { code: '4301', name: 'Pendapatan Sewa Kamar & Suite Hotel', type: 'Pendapatan', division: 'Front Office & Sales', category: 'Revenue Rooms', annualBudget: 12500000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4301 Pendapatan Sewa Kamar', description: 'Hasil reservasi kamar hotel harian, mingguan & grup.' }, { code: '4302', name: 'Pendapatan Restaurant, Room Service & Ballroom Event', type: 'Pendapatan', division: 'F&B & Banquet', category: 'Revenue F&B', annualBudget: 4200000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4302 Pendapatan Resto & Ballroom', description: 'Penjualan resto hotel, catering, room service & sewa gedung.' } ] }, { id: 'construction_contractor', name: 'Konstruksi & Kontraktor Bangunan', categoryName: 'Jasa Konstruksi & Real Estate', icon: HardHat, description: 'Material semen & besi, sewa alat berat, K3 safety, biaya subkon, & retensi garansi.', recommendedBudgetItems: [ { code: '5401', name: 'Beban Material Proyek (Besi, Beton, ReadyMix, Semen)', type: 'Beban', division: 'Engineering & Site Ops', category: 'COGS Material', annualBudget: 12500000000, glAccountDebit: '5401 Beban Material Proyek', glAccountCredit: '1103 Bank BCA Operasional', description: 'Pengadaan bahan baku konstruksi sipil & arsitektur.' }, { code: '5402', name: 'Beban Subkontraktor Spesialis & Upah Tukang Borongan', type: 'Beban', division: 'Project Management', category: 'COGS Labor', annualBudget: 6800000000, glAccountDebit: '5402 Beban Subkontraktor & Upah', glAccountCredit: '1103 Bank BCA Operasional', description: 'Jasa pekerjaan spesialis ME, struktur, & tukang lapangan.' }, { code: '5403', name: 'Beban Sewa Alat Berat (Excavator, Crane) & Mobilisasi', type: 'Beban', division: 'Equipment & Heavy Machinery', category: 'OPEX Equipment', annualBudget: 2200000000, glAccountDebit: '5403 Beban Alat Berat & Solar', glAccountCredit: '1103 Bank BCA Operasional', description: 'Sewa excavator, tower crane, BBM solar & biaya pengiriman.' }, { code: '5404', name: 'Beban Sertifikasi K3, Alat Pelindung Diri & Safety Site', type: 'Beban', division: 'QSHE & Health Safety', category: 'OPEX Safety', annualBudget: 450000000, glAccountDebit: '5404 Beban Safety K3', glAccountCredit: '1101 Kas Utama Operasional', description: 'Helm safety, rompi rompi K3, spanduk K3 & sertifikat SMK3.' }, { code: '4401', name: 'Pendapatan Termijn Konstruksi & Pemborongan Pekerjaan', type: 'Pendapatan', division: 'Marketing & Commercial', category: 'Revenue Project', annualBudget: 28000000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4401 Pendapatan Termijn Proyek', description: 'Pencairan invoice progress termijn proyek gedung/infrastruktur.' } ] }, { id: 'healthcare_clinic', name: 'Rumah Sakit, Klinik & Farmasi', categoryName: 'Pelayanan Kesehatan', icon: Stethoscope, description: 'Obat-obatan, alkes medis, jasa medis dokter, penanganan limbah B3, & izin Dinkes.', recommendedBudgetItems: [ { code: '5501', name: 'Beban Obat-Obatan, Reagen Lab & Bahan Medis Habis Pakai', type: 'Beban', division: 'Farmasi & Laboratorium', category: 'COGS Pharma', annualBudget: 3800000000, glAccountDebit: '5501 Beban Obat & BMHP', glAccountCredit: '1103 Bank BCA Operasional', description: 'Pengadaan sediaan farmasi, jarum, jarum suntik, reagen lab.' }, { code: '5502', name: 'Beban Jasa Medis Dokter Spesialis, Dokter Umum & Perawat', type: 'Beban', division: 'Pelayanan Medis', category: 'OPEX Medical Staff', annualBudget: 4200000000, glAccountDebit: '5502 Beban Jasa Medis Dokter', glAccountCredit: '1104 Bank Mandiri Payroll', description: 'Honorarium jasa medis dokter, insentif tindakan & perawat.' }, { code: '5503', name: 'Beban Penanganan Limbah Medis B3 & Kalibrasi Alat Medis', type: 'Beban', division: 'Sanitasi & Maintenance Alkes', category: 'OPEX Compliance', annualBudget: 550000000, glAccountDebit: '5503 Beban Limbah B3 & Kalibrasi', glAccountCredit: '1103 Bank BCA Operasional', description: 'Vendor pengolah limbah B3 medis & tera ulang alat kesehatan.' }, { code: '4501', name: 'Pendapatan Rawat Jalan, Poliklinik & Layanan Farmasi', type: 'Pendapatan', division: 'Pelayanan Medis', category: 'Revenue Medical', annualBudget: 11000000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4501 Pendapatan Klinik & Farmasi', description: 'Pendapatan pendaftaran, konsultasi dokter, obat, & BPJS.' } ] }, { id: 'fnb_restaurant', name: 'Restoran, Cafe & F&B', categoryName: 'Makanan & Minuman', icon: Utensils, description: 'Bahan baku dapur, kemasan packaging takeaway, gas LPG, royalty franchise & waste.', recommendedBudgetItems: [ { code: '5601', name: 'HPP / Bahan Baku Dapur Utama (Daging, Sayur, Bumbu, Beras)', type: 'Beban', division: 'Dapur & Kitchen Head', category: 'COGS Food', annualBudget: 3200000000, glAccountDebit: '5601 HPP Bahan Baku Dapur', glAccountCredit: '1103 Bank BCA Operasional', description: 'Pembelian bahan makanan segar & bumbu dapur setiap hari.' }, { code: '5602', name: 'Beban Kemasan Box Takeaway, Cup & Stiker Branding', type: 'Beban', division: 'Operasional Resto', category: 'COGS Packaging', annualBudget: 480000000, glAccountDebit: '5602 Beban Kemasan Takeaway', glAccountCredit: '1103 Bank BCA Operasional', description: 'Kantong ramah lingkungan, cup plastik, paper box & kantong.' }, { code: '5603', name: 'Beban Gas LPG 50kg, Air Bersih & Utilitas Resto', type: 'Beban', division: 'Operasional Resto', category: 'OPEX Utility', annualBudget: 360000000, glAccountDebit: '5603 Beban Gas & Air Resto', glAccountCredit: '1101 Kas Utama Operasional', description: 'Tabung gas LPG industri kompor dapur & air PDAM.' }, { code: '4601', name: 'Pendapatan Penjualan Dine-In, Takeaway & Online Food Delivery', type: 'Pendapatan', division: 'Operasional Resto', category: 'Revenue F&B Sales', annualBudget: 7800000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4601 Pendapatan Penjualan Resto', description: 'Hasil kasir makan di tempat, GoFood, GrabFood, & ShopeeFood.' } ] }, { id: 'logistics_fleet', name: 'Logistik, Ekspedisi & Transportasi Fleet', categoryName: 'Transportasi & Logistik', icon: Truck, description: 'BBM Solar truk, servis sparepart, asuransi kargo, tol retribusi, KIR & STNK.', recommendedBudgetItems: [ { code: '5701', name: 'Beban Bahan Bakar Solar Armada Truk & Van Pengiriman', type: 'Beban', division: 'Fleet & Dispatcher', category: 'COGS Fleet Fuel', annualBudget: 4500000000, glAccountDebit: '5701 Beban BBM Solar Truk', glAccountCredit: '1103 Bank BCA Operasional', description: 'Pengisian bahan bakar minyak solar armada perjalanan antar kota.' }, { code: '5702', name: 'Beban Servis Bengkel, Oli, Ban & Sparepart Fleet', type: 'Beban', division: 'Maintenance Fleet', category: 'OPEX Repair', annualBudget: 1800000000, glAccountDebit: '5702 Beban Servis & Sparepart', glAccountCredit: '1103 Bank BCA Operasional', description: 'Ganti ban gundul, oli mesin rutin, & perbaikan karoseri.' }, { code: '5703', name: 'Beban E-Toll, Retribusi Pelabuhan & Timbangan Jalan', type: 'Beban', division: 'Fleet Operations', category: 'COGS Transport Toll', annualBudget: 1200000000, glAccountDebit: '5703 Beban Tol & Retribusi', glAccountCredit: '1101 Kas Utama Operasional', description: 'Uang jalan pengemudi untuk tol trans, kapal feri & timbangan.' }, { code: '4701', name: 'Pendapatan Jasa Pengiriman Kargo & Sewa Truk Kontrak', type: 'Pendapatan', division: 'Pemasaran & Sales Logistics', category: 'Revenue Freight', annualBudget: 14500000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4701 Pendapatan Jasa Kargo', description: 'Kontrak sewa angkutan barang tahunan dari manufaktur & ritel.' } ] }, { id: 'education_school', name: 'Pendidikan, Sekolah & Universitas', categoryName: 'Jasa Pendidikan & Pelatihan', icon: GraduationCap, description: 'Honor dosen/guru, laboratorium praktikum, beasiswa, pemeliharaan kampus, & akreditasi.', recommendedBudgetItems: [ { code: '5801', name: 'Beban Honorarium Dosen, Pengajar & Instruktur Laboratorium', type: 'Beban', division: 'Akademik & Fakultas', category: 'OPEX Faculty', annualBudget: 5200000000, glAccountDebit: '5801 Beban Honor Dosen', glAccountCredit: '1104 Bank Mandiri Payroll', description: 'Gaji pokok, SKS mengajar, & insentif bimbingan skripsi.' }, { code: '5802', name: 'Beban Bahan Praktikum, Modul Belajar & Perpustakaan Digital', type: 'Beban', division: 'Laboratorium & Library', category: 'OPEX Academic', annualBudget: 850000000, glAccountDebit: '5802 Beban Praktikum & Perpustakaan', glAccountCredit: '1103 Bank BCA Operasional', description: 'Bahan kimia lab, jurnal ilmiah terindeks, & e-book.' }, { code: '4801', name: 'Pendapatan Uang Kuliah Tunggal (UKT) & Sumbangan Pendidikan', type: 'Pendapatan', division: 'Keuangan Kampus', category: 'Revenue Tuition', annualBudget: 11500000000, glAccountDebit: '1103 Bank BCA Operasional', glAccountCredit: '4801 Pendapatan UKT Mahasiswa', description: 'Pembayaran SPP/UKT semesteran dari siswa & mahasiswa.' } ] } ]; interface BudgetDivisionModuleProps { currentUser: Employee; budgetItems: BudgetItem[]; onUpdateBudgetItems: React.Dispatch>; onAddAuditLog?: (employeeId: string, log: Omit) => void; } export const BudgetDivisionModule: React.FC = ({ currentUser, budgetItems, onUpdateBudgetItems, onAddAuditLog }) => { // State for Filters & Search const [searchQuery, setSearchQuery] = useState(''); const [selectedDivision, setSelectedDivision] = useState('ALL'); const [selectedType, setSelectedType] = useState('ALL'); // State for Preset Generator Modal const [isPresetModalOpen, setIsPresetModalOpen] = useState(false); const [selectedPresetId, setSelectedPresetId] = useState('saas_tech'); const [presetApplyMode, setPresetApplyMode] = useState<'reset' | 'append'>('reset'); // State for Create / Edit Budget Item Modal const [isItemModalOpen, setIsItemModalOpen] = useState(false); const [editingItem, setEditingItem] = useState(null); // Form State const [formCode, setFormCode] = useState(''); const [formName, setFormName] = useState(''); const [formType, setFormType] = useState<'Beban' | 'Pendapatan'>('Beban'); const [formDivision, setFormDivision] = useState(''); const [formCategory, setFormCategory] = useState('OPEX'); const [formAnnualBudget, setFormAnnualBudget] = useState(''); const [formGlDebit, setFormGlDebit] = useState(''); const [formGlCredit, setFormGlCredit] = useState(''); const [formDescription, setFormDescription] = useState(''); // State for Toast Notification const [toastMessage, setToastMessage] = useState(null); const triggerToast = (msg: string) => { setToastMessage(msg); setTimeout(() => setToastMessage(null), 4000); }; // Helper formatting IDR const formatIDR = (amount: number) => { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(amount); }; // Distinct Divisions list const divisionList = useMemo(() => { const setDivs = new Set(); budgetItems.forEach(b => { if (b.division) setDivs.add(b.division); }); return Array.from(setDivs); }, [budgetItems]); // Filtered Budget Items const filteredItems = useMemo(() => { return budgetItems.filter(item => { const q = searchQuery.toLowerCase(); const matchSearch = item.code.toLowerCase().includes(q) || item.name.toLowerCase().includes(q) || item.division.toLowerCase().includes(q) || (item.category && item.category.toLowerCase().includes(q)) || item.glAccountDebit.toLowerCase().includes(q); const matchDiv = selectedDivision === 'ALL' || item.division === selectedDivision; const matchType = selectedType === 'ALL' || item.type === selectedType; return matchSearch && matchDiv && matchType; }); }, [budgetItems, searchQuery, selectedDivision, selectedType]); // KPI Calculations const stats = useMemo(() => { const totalAllocatedBeban = budgetItems.filter(b => b.type === 'Beban').reduce((s, b) => s + b.annualBudget, 0); const totalRealizedBeban = budgetItems.filter(b => b.type === 'Beban').reduce((s, b) => s + b.realizedAmount, 0); const totalSisaBeban = totalAllocatedBeban - totalRealizedBeban; const totalAllocatedIncome = budgetItems.filter(b => b.type === 'Pendapatan').reduce((s, b) => s + b.annualBudget, 0); const totalRealizedIncome = budgetItems.filter(b => b.type === 'Pendapatan').reduce((s, b) => s + b.realizedAmount, 0); const globalRealizationPct = totalAllocatedBeban > 0 ? Math.round((totalRealizedBeban / totalAllocatedBeban) * 100) : 0; const overbudgetCount = budgetItems.filter(b => b.type === 'Beban' && b.realizedAmount > b.annualBudget).length; return { totalAllocatedBeban, totalRealizedBeban, totalSisaBeban, totalAllocatedIncome, totalRealizedIncome, globalRealizationPct, overbudgetCount, itemCount: budgetItems.length }; }, [budgetItems]); // Open Create Modal const handleOpenCreate = () => { setEditingItem(null); setFormCode(`5${Math.floor(100 + Math.random() * 899)}`); setFormName(''); setFormType('Beban'); setFormDivision(currentUser.division || 'Operasional'); setFormCategory('OPEX Operasional'); setFormAnnualBudget('500000000'); setFormGlDebit('5100 Beban Operasional'); setFormGlCredit('1103 Bank BCA Operasional'); setFormDescription('Mata anggaran operasional baru.'); setIsItemModalOpen(true); }; // Open Edit Modal const handleOpenEdit = (item: BudgetItem) => { setEditingItem(item); setFormCode(item.code); setFormName(item.name); setFormType(item.type); setFormDivision(item.division); setFormCategory(item.category || 'OPEX'); setFormAnnualBudget(String(item.annualBudget)); setFormGlDebit(item.glAccountDebit); setFormGlCredit(item.glAccountCredit); setFormDescription(item.description || ''); setIsItemModalOpen(true); }; // Handle Save (Create or Update) const handleSaveItem = (e: React.FormEvent) => { e.preventDefault(); if (!formCode.trim() || !formName.trim() || !formDivision.trim()) { alert('Mohon isi Kode, Nama Mata Anggaran, dan Divisi secara lengkap!'); return; } const budgetVal = parseFloat(formAnnualBudget.replace(/[^0-9]/g, '')) || 0; if (editingItem) { // Edit existing onUpdateBudgetItems(prev => prev.map(item => { if (item.code !== editingItem.code) return item; return { ...item, code: formCode.trim(), name: formName.trim(), type: formType, division: formDivision.trim(), category: formCategory.trim(), annualBudget: budgetVal, glAccountDebit: formGlDebit.trim() || '5101 Beban Operasional', glAccountCredit: formGlCredit.trim() || '1103 Bank BCA', description: formDescription.trim(), isCustom: true }; })); triggerToast(`Mata Anggaran ${formCode} - ${formName} berhasil diperbarui!`); if (onAddAuditLog) { onAddAuditLog(currentUser.id, { action: 'UPDATE', category: 'Biodata', actorName: currentUser.name, actorPosition: `${currentUser.position} (Divisi Anggaran)`, details: `Mengubah parameter Mata Anggaran [${formCode}] ${formName}. Pagu disesuaikan: ${formatIDR(budgetVal)}` }); } } else { // Check duplicate code if (budgetItems.some(b => b.code.toLowerCase() === formCode.trim().toLowerCase())) { alert(`Kode Mata Anggaran "${formCode}" sudah digunakan! Gunakan kode unik lain.`); return; } const newItem: BudgetItem = { code: formCode.trim(), name: formName.trim(), type: formType, division: formDivision.trim(), category: formCategory.trim(), annualBudget: budgetVal, realizedAmount: 0, glAccountDebit: formGlDebit.trim() || '5101 Beban Operasional', glAccountCredit: formGlCredit.trim() || '1103 Bank BCA', description: formDescription.trim(), isCustom: true }; onUpdateBudgetItems(prev => [newItem, ...prev]); triggerToast(`Mata Anggaran baru ${newItem.code} - ${newItem.name} berhasil ditambahkan!`); if (onAddAuditLog) { onAddAuditLog(currentUser.id, { action: 'CREATE', category: 'Biodata', actorName: currentUser.name, actorPosition: `${currentUser.position} (Divisi Anggaran)`, details: `Membuat Mata Anggaran Baru [${newItem.code}] ${newItem.name} untuk Divisi ${newItem.division} dengan pagu ${formatIDR(budgetVal)}` }); } } setIsItemModalOpen(false); }; // Handle Delete Budget Item const handleDeleteItem = (item: BudgetItem) => { if (item.realizedAmount > 0) { const confirmDelete = window.confirm( `PERINGATAN AUDIT: Mata Anggaran [${item.code}] ${item.name} memiliki realisasi sebesar ${formatIDR(item.realizedAmount)}.\n\nYakin tetap ingin menghapus mata anggaran ini?` ); if (!confirmDelete) return; } else { if (!window.confirm(`Yakin ingin menghapus Mata Anggaran [${item.code}] ${item.name}?`)) return; } onUpdateBudgetItems(prev => prev.filter(b => b.code !== item.code)); triggerToast(`Mata Anggaran [${item.code}] berhasil dihapus.`); if (onAddAuditLog) { onAddAuditLog(currentUser.id, { action: 'DELETE', category: 'Biodata', actorName: currentUser.name, actorPosition: `${currentUser.position} (Divisi Anggaran)`, details: `Menghapus Mata Anggaran [${item.code}] ${item.name} Divisi ${item.division}` }); } }; // Handle Apply Business Preset const handleApplyPreset = () => { const selectedPreset = BUSINESS_SECTOR_PRESETS.find(p => p.id === selectedPresetId); if (!selectedPreset) return; const formattedItems: BudgetItem[] = selectedPreset.recommendedBudgetItems.map(item => ({ ...item, realizedAmount: presetApplyMode === 'reset' ? 0 : (budgetItems.find(b => b.code === item.code)?.realizedAmount || 0) })); if (presetApplyMode === 'reset') { const confirmReset = window.confirm( `APLIKASI CLIENT RENTAL / WHITE-LABEL:\n\nApakah Anda yakin ingin RESET & PENYESUAIAN OTOMATIS seluruh Mata Anggaran ke Sektor Industri "${selectedPreset.name}"?\n\nLangkah ini akan mengganti susunan mata anggaran sesuai standar bisnis ${selectedPreset.categoryName}.` ); if (!confirmReset) return; onUpdateBudgetItems(formattedItems); triggerToast(`Berhasil Penyesuaian Otomatis Presets Bisnis Client: "${selectedPreset.name}" (${formattedItems.length} Mata Anggaran)!`); } else { // Append mode (merge non-duplicate) const existingCodes = new Set(budgetItems.map(b => b.code)); const itemsToAdd = formattedItems.filter(item => !existingCodes.has(item.code)); if (itemsToAdd.length === 0) { alert('Semua mata anggaran dari preset ini sudah ada di daftar Anda!'); return; } onUpdateBudgetItems(prev => [...itemsToAdd, ...prev]); triggerToast(`Berhasil menambahkan ${itemsToAdd.length} Mata Anggaran dari Preset "${selectedPreset.name}".`); } if (onAddAuditLog) { onAddAuditLog(currentUser.id, { action: 'UPDATE', category: 'Biodata', actorName: currentUser.name, actorPosition: `${currentUser.position} (Divisi Anggaran SaaS)`, details: `Menerapkan Penyesuaian Otomatis Presets Bisnis Client: [${selectedPreset.name}] Mode: ${presetApplyMode.toUpperCase()}` }); } setIsPresetModalOpen(false); }; const selectedPresetObj = BUSINESS_SECTOR_PRESETS.find(p => p.id === selectedPresetId) || BUSINESS_SECTOR_PRESETS[0]; return (
{/* Toast Notification */} {toastMessage && (
{toastMessage}
)} {/* Top Banner: Divisi Anggaran & Preset Client White-Label */}
DIVISI ANGGARAN & FINANCING MANAGEMENT SAAS MULTI-TENANT READY

Pengelolaan Mata Anggaran & Adaptasi Preset Bisnis

Portal Otorisasi Divisi Anggaran untuk membuat (create), memperbarui (update), dan menghapus (delete) kode mata anggaran perusahaan. Dilengkapi Generator Auto-Preset Bisnis Client yang menyesuaikan struktur COA & Pagu Anggaran secara otomatis saat aplikasi ini disewakan ke berbagai jenis industri client.

{/* Realtime KPI Overview */}
Total Pagu Beban Alokasi: {formatIDR(stats.totalAllocatedBeban)}
Total Realisasi Pengeluaran: {formatIDR(stats.totalRealizedBeban)}
Sisa Pagu Anggaran Beban: {formatIDR(stats.totalSisaBeban)}
Persentase Penyerapan Global: {stats.globalRealizationPct}% {stats.itemCount} Pos Anggaran
{/* Main Filter & Search Control Bar */}
{/* Search Input */}
setSearchQuery(e.target.value)} placeholder="Cari kode, nama, divisi, GL..." className="w-full bg-[#050608] border border-[#333] pl-9 pr-3 py-2 text-white placeholder-slate-500 text-xs focus:border-[#facc15] outline-none" />
{/* Division & Type Dropdown Filters */}
Divisi:
Jenis:
{/* Budget Items Table Grid */}
Daftar Pos Mata Anggaran ({filteredItems.length} Records)
{stats.overbudgetCount > 0 && ( {stats.overbudgetCount} Pos Overbudget! )}
{filteredItems.map(item => { const isBeban = item.type === 'Beban'; const pct = item.annualBudget > 0 ? Math.round((item.realizedAmount / item.annualBudget) * 100) : 0; const sisa = item.annualBudget - item.realizedAmount; let statusBadge = ( NORMAL ); if (pct >= 100) { statusBadge = ( OVERBUDGET ); } else if (pct >= 85) { statusBadge = ( PERHATIAN ({pct}%) ); } return ( {/* Kode */} {/* Nama & GL */} {/* Divisi */} {/* Alokasi Pagu */} {/* Realisasi */} {/* Progress % */} {/* Status Badge */} {/* Actions */} ); })} {filteredItems.length === 0 && ( )}
Kode Nama Mata Anggaran & Kategori Divisi Cost Center Alokasi Pagu (IDR) Realisasi (IDR) Penyerapan % Status Pagu Aksi (CRUD)
{item.code}
{item.name}
{item.type} {item.category || 'OPEX'} • GL: {item.glAccountDebit}
{item.division} {formatIDR(item.annualBudget)} {formatIDR(item.realizedAmount)}
Sisa: {formatIDR(sisa)}
{pct}%
= 100 ? 'bg-rose-500' : pct >= 80 ? 'bg-amber-400' : 'bg-emerald-400'}`} style={{ width: `${Math.min(pct, 100)}%` }} >
 {statusBadge}
Tidak ada data mata anggaran yang cocok dengan kriteria pencarian.
{/* MODAL 1: PRESET GENERATOR CLIENT WHITE-LABEL (AUTO-ADAPTATION) */} {isPresetModalOpen && (
{/* Modal Header */}
CLIENT RENTAL PRESET ADAPTOR Generasi Otomatis COA Bisnis

Penyesuaian Presets Jenis Bisnis Baru Client

{/* Modal Body */}

Saat aplikasi ERP disewakan ke tenant client baru, pilih jenis industri di bawah untuk mengatur ulang atau menyesuaikan secara otomatis seluruh struktur mata anggaran, divisi cost center, dan alokasi pagu standar industri tersebut.

{/* Grid of Sector Presets */}
{BUSINESS_SECTOR_PRESETS.map(preset => { const IconComp = preset.icon; const isSelected = preset.id === selectedPresetId; return ( ); })}
{/* Selected Preset Details Preview Box */}
Pratinjau Struktur Mata Anggaran Industri: {selectedPresetObj.name} Total Estimasi Pagu Presets: {formatIDR(selectedPresetObj.recommendedBudgetItems.reduce((s, i) => s + i.annualBudget, 0))}

"{selectedPresetObj.description}"

{/* List of recommended items */}
{selectedPresetObj.recommendedBudgetItems.map(item => (
[{item.code}] {item.name} ({item.division})
{formatIDR(item.annualBudget)}
))}
{/* Mode Selection */}
Pilih Mode Penerapan Preset:
{/* Modal Footer Actions */}
)} {/* MODAL 2: CREATE / EDIT MATA ANGGARAN (CRUD) */} {isItemModalOpen && (
{/* Modal Header */}

{editingItem ? 'Edit Parameter Mata Anggaran' : 'Tambah Mata Anggaran Baru'}

{editingItem ? `Mengubah parameter untuk kode [${editingItem.code}]` : 'Buat pos anggaran baru untuk divisi tertentu'}

{/* Form Form */}
{/* Kode Mata Anggaran */}
setFormCode(e.target.value)} required placeholder="misal: 5106" className="w-full bg-[#050608] border border-[#333] text-white font-mono font-bold text-xs p-2.5 focus:border-[#facc15] outline-none" />
{/* Jenis */}
{/* Nama Mata Anggaran */}
setFormName(e.target.value)} required placeholder="misal: Beban Sewa Cloud Server & API Integrasi" className="w-full bg-[#050608] border border-[#333] text-white font-semibold text-xs p-2.5 focus:border-[#facc15] outline-none" />
{/* Divisi */}
setFormDivision(e.target.value)} required placeholder="misal: Operasional, Developer, Pemasaran" className="w-full bg-[#050608] border border-[#333] text-white text-xs p-2.5 focus:border-[#facc15] outline-none" />
{/* Kategori */}
setFormCategory(e.target.value)} placeholder="misal: OPEX, CAPEX, COGS, Revenue" className="w-full bg-[#050608] border border-[#333] text-white text-xs p-2.5 focus:border-[#facc15] outline-none" />
{/* Alokasi Pagu Anggaran Tahunan */}
setFormAnnualBudget(e.target.value)} required placeholder="misal: 1200000000" className="w-full bg-[#050608] border border-[#333] text-[#facc15] font-mono font-black text-sm p-2.5 focus:border-[#facc15] outline-none" /> Format Angka: {formatIDR(parseFloat(formAnnualBudget.replace(/[^0-9]/g, '')) || 0)}
{/* GL Debit */}
setFormGlDebit(e.target.value)} placeholder="misal: 5101 Beban Operasional" className="w-full bg-[#050608] border border-[#333] text-white text-xs p-2.5 focus:border-[#facc15] outline-none font-mono" />
{/* GL Credit */}
setFormGlCredit(e.target.value)} placeholder="misal: 1103 Bank BCA Operasional" className="w-full bg-[#050608] border border-[#333] text-white text-xs p-2.5 focus:border-[#facc15] outline-none font-mono" />
{/* Deskripsi */}
{/* Submit Buttons */}
)}
); };