{"id":2646,"date":"2026-01-25T19:26:49","date_gmt":"2026-01-25T19:26:49","guid":{"rendered":"https:\/\/malikskitchen.in\/?page_id=2646"},"modified":"2026-02-24T11:21:55","modified_gmt":"2026-02-24T11:21:55","slug":"order-management","status":"publish","type":"page","link":"https:\/\/malikskitchen.in\/index.php\/order-management\/","title":{"rendered":"Order Management"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nOrder Manager<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\r\n * { margin:0; padding:0; box-sizing:border-box; }\r\n\r\n :root {\r\n --purple: #6C63FF;\r\n --purple-light: #EDE9FF;\r\n --purple-dark: #5A52D5;\r\n --pink: #F5576C;\r\n --pink-light: #FEE8EB;\r\n --green: #25D366;\r\n --green-light: #E9F7EF;\r\n --blue: #2196F3;\r\n --blue-light: #E3F2FD;\r\n --orange: #FF9800;\r\n --orange-light: #FFF3E0;\r\n --red: #F44336;\r\n --red-light: #FFEBEE;\r\n --bg: #F3F4F8;\r\n --card: #FFFFFF;\r\n --text: #2D3748;\r\n --text-light: #718096;\r\n --border: #E2E8F0;\r\n --shadow: 0 1px 3px rgba(0,0,0,0.08);\r\n --shadow-md: 0 4px 12px rgba(0,0,0,0.1);\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .app { max-width: 960px; margin: 0 auto; }\r\n\r\n \/* ===== HEADER ===== *\/\r\n .header {\r\n background: linear-gradient(135deg, #6C63FF 0%, #9B59B6 100%);\r\n border-radius: 16px;\r\n padding: 24px 28px 20px;\r\n color: white;\r\n box-shadow: 0 6px 20px rgba(108,99,255,0.3);\r\n margin-bottom: 20px;\r\n transition: background 0.4s;\r\n }\r\n\r\n .header.sell-mode {\r\n background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);\r\n box-shadow: 0 6px 20px rgba(37,211,102,0.3);\r\n }\r\n\r\n .header.items-mode {\r\n background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);\r\n box-shadow: 0 6px 20px rgba(255,152,0,0.3);\r\n }\r\n\r\n .header.dashboard-mode {\r\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);\r\n box-shadow: 0 6px 20px rgba(15,52,96,0.4);\r\n }\r\n\r\n .header.dashboard-mode .tab.active { color: #0f3460; }\r\n\r\n .header-top {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .header-top h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }\r\n .header-top .subtitle { font-size: 13px; opacity: 0.8; margin-top: 3px; }\r\n\r\n .tabs {\r\n display: flex;\r\n gap: 8px;\r\n }\r\n\r\n .tab {\r\n padding: 8px 16px;\r\n border-radius: 30px;\r\n border: 2px solid rgba(255,255,255,0.3);\r\n background: rgba(255,255,255,0.1);\r\n color: white;\r\n font-size: 13px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.25s;\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n .tab:hover { background: rgba(255,255,255,0.2); }\r\n .tab.active { background: white; color: var(--purple); border-color: white; }\r\n .header.sell-mode .tab.active { color: var(--green); }\r\n .header.items-mode .tab.active { color: var(--orange); }\r\n\r\n \/* ===== COLLAPSIBLE SECTION ===== *\/\r\n .collapsible-section {\r\n background: var(--card);\r\n border-radius: 14px;\r\n box-shadow: var(--shadow);\r\n margin-bottom: 16px;\r\n overflow: hidden;\r\n }\r\n\r\n .collapsible-header {\r\n padding: 16px 20px;\r\n background: var(--purple-light);\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n user-select: none;\r\n transition: background 0.2s;\r\n }\r\n\r\n .collapsible-header:hover { background: #E0DCFF; }\r\n\r\n .collapsible-header.green-header {\r\n background: var(--green-light);\r\n }\r\n .collapsible-header.green-header:hover { background: #d0f0de; }\r\n\r\n .collapsible-title {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--purple);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .collapsible-title.green-title { color: #128C7E; }\r\n\r\n .collapsible-icon {\r\n width: 20px;\r\n height: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--purple);\r\n transition: transform 0.25s;\r\n }\r\n\r\n .collapsible-icon.green-icon { color: #128C7E; }\r\n\r\n .collapsible-icon.open { transform: rotate(180deg); }\r\n\r\n .collapsible-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.35s ease;\r\n }\r\n\r\n .collapsible-content.open { max-height: 2000px; }\r\n\r\n .collapsible-body { padding: 20px; }\r\n\r\n \/* ===== TOOLBAR ===== *\/\r\n .toolbar {\r\n background: var(--card);\r\n border-radius: 14px;\r\n padding: 20px 22px;\r\n box-shadow: var(--shadow);\r\n margin-bottom: 16px;\r\n }\r\n\r\n .toolbar-label {\r\n font-size: 11px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.8px;\r\n color: var(--text-light);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .row {\r\n display: flex;\r\n gap: 10px;\r\n align-items: flex-end;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .row + .divider { margin: 16px 0; border: none; border-top: 1px solid var(--border); }\r\n\r\n .field { display: flex; flex-direction: column; flex: 1; min-width: 140px; }\r\n .field label { font-size: 11px; font-weight: 600; color: var(--text-light); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.6px; }\r\n\r\n .field input,\r\n .field select {\r\n padding: 10px 13px;\r\n border: 1.5px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--text);\r\n background: var(--card);\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n }\r\n\r\n .field input:focus,\r\n .field select:focus {\r\n outline: none;\r\n border-color: var(--purple);\r\n box-shadow: 0 0 0 3px var(--purple-light);\r\n }\r\n\r\n .field.rate { flex: 0 0 110px; }\r\n .field.rate input { text-align: right; }\r\n\r\n \/* ===== AUTOCOMPLETE ===== *\/\r\n .autocomplete-wrapper {\r\n position: relative;\r\n flex: 1;\r\n min-width: 140px;\r\n }\r\n\r\n .autocomplete-list {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n border: 1.5px solid var(--purple);\r\n border-top: none;\r\n border-radius: 0 0 8px 8px;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n z-index: 1000;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n display: none;\r\n }\r\n\r\n .autocomplete-list.show { display: block; }\r\n\r\n .autocomplete-item {\r\n padding: 10px 13px;\r\n cursor: pointer;\r\n transition: background 0.15s;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .autocomplete-item:last-child { border-bottom: none; }\r\n .autocomplete-item:hover { background: var(--purple-light); }\r\n .autocomplete-item-name { font-weight: 500; color: var(--text); font-size: 14px; }\r\n .autocomplete-item-rate { font-size: 12px; color: var(--text-light); margin-top: 2px; }\r\n\r\n \/* ===== BUTTONS ===== *\/\r\n .btn {\r\n padding: 10px 18px;\r\n border: none;\r\n border-radius: 8px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n font-family: inherit;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: all 0.2s;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n }\r\n\r\n .btn-purple { background: var(--purple); color: white; }\r\n .btn-purple:hover { background: var(--purple-dark); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(108,99,255,0.35); }\r\n\r\n .btn-blue { background: var(--blue-light); color: var(--blue); }\r\n .btn-blue:hover { background: #BBDEFB; }\r\n\r\n .btn-orange { background: var(--orange-light); color: var(--orange); }\r\n .btn-orange:hover { background: #FFE0B2; }\r\n\r\n .btn-green { background: var(--green); color: white; }\r\n .btn-green:hover { background: #1EB85C; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(37,211,102,0.35); }\r\n\r\n .btn-red-light { background: var(--red-light); color: var(--red); }\r\n .btn-red-light:hover { background: #FFCDD2; }\r\n\r\n .btn-blue-light { background: var(--blue-light); color: var(--blue); }\r\n .btn-blue-light:hover { background: #BBDEFB; }\r\n\r\n .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }\r\n\r\n .file-input { display: none; }\r\n\r\n \/* ===== SEARCH BAR ===== *\/\r\n .search-bar {\r\n background: var(--card);\r\n border-radius: 14px;\r\n padding: 14px 20px;\r\n box-shadow: var(--shadow);\r\n margin-bottom: 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .search-bar svg { flex-shrink: 0; color: var(--text-light); }\r\n\r\n .search-bar input {\r\n flex: 1;\r\n border: none;\r\n outline: none;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--text);\r\n background: transparent;\r\n }\r\n\r\n .search-bar input::placeholder { color: var(--text-light); }\r\n\r\n \/* ===== CATEGORY LIST (Purchase) ===== *\/\r\n .categories { display: flex; flex-direction: column; gap: 12px; }\r\n\r\n .cat-card {\r\n background: var(--card);\r\n border-radius: 12px;\r\n box-shadow: var(--shadow);\r\n overflow: hidden;\r\n transition: box-shadow 0.2s;\r\n }\r\n\r\n .cat-card:hover { box-shadow: var(--shadow-md); }\r\n\r\n .cat-head {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 14px 18px;\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n\r\n .cat-head-left { display: flex; align-items: center; gap: 10px; }\r\n\r\n .cat-icon {\r\n width: 34px; height: 34px;\r\n border-radius: 9px;\r\n background: var(--purple-light);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 16px;\r\n }\r\n\r\n .cat-name { font-weight: 600; font-size: 15px; color: var(--text); }\r\n .cat-count { font-size: 12px; color: var(--text-light); margin-top: 1px; }\r\n\r\n .cat-head-right { display: flex; align-items: center; gap: 8px; }\r\n\r\n .chevron {\r\n width: 20px; height: 20px;\r\n display: flex; align-items: center; justify-content: center;\r\n color: var(--text-light);\r\n transition: transform 0.25s;\r\n }\r\n\r\n .chevron.open { transform: rotate(180deg); }\r\n\r\n \/* ===== ITEM LIST ===== *\/\r\n .item-list { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }\r\n .item-list.open { max-height: 2000px; }\r\n\r\n .item-divider { height: 1px; background: var(--border); margin: 0 18px; }\r\n\r\n .item-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 11px 18px;\r\n transition: background 0.15s;\r\n }\r\n\r\n .item-row:hover { background: #FAFBFD; }\r\n\r\n .item-info { flex: 1; min-width: 0; }\r\n .item-name { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n .item-price { font-size: 12px; color: var(--text-light); margin-top: 1px; }\r\n\r\n \/* ===== STOCK BADGE ===== *\/\r\n .stock-badge {\r\n font-size: 11px;\r\n font-weight: 600;\r\n padding: 2px 8px;\r\n border-radius: 10px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .stock-ok { background: var(--green-light); color: #128C7E; }\r\n .stock-low { background: var(--orange-light); color: #E65100; }\r\n .stock-out { background: var(--red-light); color: var(--red); }\r\n .stock-negative { background: #4a0010; color: #ff6b8a; font-weight: 700; }\r\n\r\n \/* ===== QTY CONTROL ===== *\/\r\n .qty-wrap {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n background: var(--bg);\r\n padding: 4px;\r\n border-radius: 8px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .qty-btn {\r\n width: 26px; height: 26px;\r\n border: none;\r\n border-radius: 6px;\r\n background: white;\r\n color: var(--purple);\r\n font-size: 16px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 1px 2px rgba(0,0,0,0.06);\r\n transition: all 0.15s;\r\n flex-shrink: 0;\r\n }\r\n\r\n .qty-btn:hover { background: var(--purple); color: white; }\r\n\r\n .qty-input {\r\n width: 36px; height: 26px;\r\n border: 1px solid var(--border);\r\n border-radius: 6px;\r\n text-align: center;\r\n font-size: 13px;\r\n font-weight: 600;\r\n font-family: inherit;\r\n color: var(--text);\r\n background: white;\r\n transition: border-color 0.2s;\r\n }\r\n\r\n .qty-input:focus { outline: none; border-color: var(--purple); }\r\n .qty-input::-webkit-outer-spin-button,\r\n .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }\r\n .qty-input[type=number] { -moz-appearance: textfield; }\r\n\r\n .item-total {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--purple);\r\n min-width: 70px;\r\n text-align: right;\r\n flex-shrink: 0;\r\n }\r\n\r\n .item-actions { display: flex; gap: 5px; flex-shrink: 0; }\r\n\r\n \/* ===== EDIT MODE ===== *\/\r\n .edit-row { background: #F9F7FF !important; }\r\n\r\n .edit-fields {\r\n flex: 1;\r\n display: flex;\r\n gap: 8px;\r\n min-width: 0;\r\n }\r\n\r\n .edit-fields input {\r\n padding: 7px 10px;\r\n border: 1.5px solid var(--purple);\r\n border-radius: 7px;\r\n font-size: 13px;\r\n font-family: inherit;\r\n color: var(--text);\r\n }\r\n\r\n .edit-fields input:focus { outline: none; box-shadow: 0 0 0 3px var(--purple-light); }\r\n .edit-fields input:first-child { flex: 2; }\r\n .edit-fields input:last-child { flex: 1; min-width: 75px; text-align: right; }\r\n\r\n \/* ===== ITEM TABLE (Items Tab) ===== *\/\r\n .items-table {\r\n background: var(--card);\r\n border-radius: 14px;\r\n box-shadow: var(--shadow);\r\n overflow: hidden;\r\n }\r\n\r\n .table-header {\r\n background: var(--orange-light);\r\n padding: 12px 20px;\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 130px;\r\n gap: 12px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n color: var(--text-light);\r\n border-bottom: 2px solid var(--orange);\r\n }\r\n\r\n .table-row {\r\n padding: 14px 20px;\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 130px;\r\n gap: 12px;\r\n align-items: center;\r\n border-bottom: 1px solid var(--border);\r\n transition: background 0.15s;\r\n }\r\n\r\n .table-row:hover { background: #FAFBFD; }\r\n .table-row:last-child { border-bottom: none; }\r\n\r\n .item-name-cell { font-size: 14px; font-weight: 500; color: var(--text); }\r\n .item-rate-cell { font-size: 14px; color: var(--text-light); }\r\n .item-stock-cell { font-size: 14px; font-weight: 600; }\r\n\r\n .item-actions-cell {\r\n display: flex;\r\n gap: 6px;\r\n justify-content: flex-end;\r\n }\r\n\r\n .edit-row-table {\r\n background: #FFF3E0 !important;\r\n padding: 12px 20px;\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 130px;\r\n gap: 12px;\r\n align-items: center;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .edit-row-table input {\r\n padding: 7px 10px;\r\n border: 1.5px solid var(--orange);\r\n border-radius: 7px;\r\n font-size: 13px;\r\n font-family: inherit;\r\n color: var(--text);\r\n }\r\n\r\n .edit-row-table input:focus {\r\n outline: none;\r\n box-shadow: 0 0 0 3px var(--orange-light);\r\n }\r\n\r\n \/* ===== SELL\/PARTY ORDERS ===== *\/\r\n .order-card {\r\n background: var(--card);\r\n border-radius: 12px;\r\n box-shadow: var(--shadow);\r\n padding: 16px 20px;\r\n margin-bottom: 12px;\r\n transition: box-shadow 0.2s, border 0.2s;\r\n border: 2px solid transparent;\r\n position: relative;\r\n }\r\n\r\n .order-card.sent {\r\n border-color: var(--green);\r\n background: linear-gradient(to right, rgba(37, 211, 102, 0.05) 0%, var(--card) 50%);\r\n }\r\n\r\n .order-card:hover { box-shadow: var(--shadow-md); }\r\n\r\n .sent-indicator {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n width: 12px;\r\n height: 12px;\r\n background: var(--green);\r\n border-radius: 50%;\r\n box-shadow: 0 0 0 3px var(--green-light);\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { box-shadow: 0 0 0 3px var(--green-light); }\r\n 50% { box-shadow: 0 0 0 6px var(--green-light); }\r\n }\r\n\r\n .sent-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 4px;\r\n padding: 3px 8px;\r\n background: var(--green-light);\r\n color: var(--green);\r\n border-radius: 12px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n margin-left: 8px;\r\n }\r\n\r\n .order-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 12px;\r\n padding-bottom: 12px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .order-info h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }\r\n\r\n .order-meta {\r\n font-size: 12px;\r\n color: var(--text-light);\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .order-items-compact {\r\n background: var(--bg);\r\n padding: 10px 12px;\r\n border-radius: 8px;\r\n margin: 8px 0;\r\n }\r\n\r\n .order-items-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n padding: 4px 0;\r\n }\r\n\r\n .order-items-summary { font-size: 13px; color: var(--text-light); display: flex; gap: 12px; }\r\n .order-items-toggle { font-size: 12px; color: var(--purple); font-weight: 600; }\r\n\r\n .order-items-list {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease;\r\n }\r\n\r\n .order-items-list.open { max-height: 500px; margin-top: 8px; }\r\n\r\n .order-item {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 6px 0;\r\n font-size: 13px;\r\n }\r\n\r\n .order-item-left { display: flex; gap: 8px; flex: 1; }\r\n .order-item-name { color: var(--text); }\r\n .order-item-calc { color: var(--text-light); }\r\n .order-item-total { font-weight: 600; color: var(--purple); }\r\n\r\n .order-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding-top: 12px;\r\n border-top: 1px solid var(--border);\r\n margin-top: 8px;\r\n }\r\n\r\n .order-grand-total { font-size: 16px; font-weight: 700; color: var(--green); }\r\n .order-actions { display: flex; gap: 6px; }\r\n\r\n \/* ===== PARTY LIST ===== *\/\r\n .party-list-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n background: var(--bg);\r\n border-radius: 8px;\r\n margin-bottom: 8px;\r\n transition: background 0.2s;\r\n }\r\n\r\n .party-list-item:hover { background: #E8EAF0; }\r\n\r\n .party-list-item.editing {\r\n background: var(--green-light);\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n }\r\n\r\n .party-info { flex: 1; }\r\n .party-info h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 3px; }\r\n .party-info p { font-size: 13px; color: var(--text-light); }\r\n\r\n .party-edit-fields { display: flex; gap: 10px; flex: 1; width: 100%; }\r\n\r\n .party-edit-fields input {\r\n flex: 1;\r\n padding: 8px 12px;\r\n border: 1.5px solid var(--green);\r\n border-radius: 7px;\r\n font-size: 13px;\r\n font-family: inherit;\r\n color: var(--text);\r\n }\r\n\r\n .party-edit-fields input:focus { outline: none; box-shadow: 0 0 0 3px var(--green-light); }\r\n .party-actions { display: flex; gap: 6px; }\r\n\r\n \/* ===== FOOTER ===== *\/\r\n .footer {\r\n background: var(--card);\r\n border-radius: 14px;\r\n padding: 18px 22px;\r\n box-shadow: var(--shadow);\r\n margin-top: 20px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 14px;\r\n }\r\n\r\n .footer-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }\r\n\r\n .toggle-group { display: flex; align-items: center; gap: 8px; }\r\n .toggle-label { font-size: 13px; font-weight: 500; color: var(--text-light); }\r\n\r\n .toggle { position: relative; width: 44px; height: 24px; }\r\n .toggle input { opacity: 0; width: 0; height: 0; }\r\n .slider {\r\n position: absolute;\r\n cursor: pointer;\r\n inset: 0;\r\n background: #CBD5E0;\r\n border-radius: 24px;\r\n transition: 0.3s;\r\n }\r\n\r\n .slider:before {\r\n content: \"\";\r\n position: absolute;\r\n width: 18px; height: 18px;\r\n left: 3px; bottom: 3px;\r\n background: white;\r\n border-radius: 50%;\r\n transition: 0.3s;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.15);\r\n }\r\n\r\n .toggle input:checked + .slider { background: var(--purple); }\r\n .toggle input:checked + .slider:before { transform: translateX(20px); }\r\n\r\n .grand-total { font-size: 18px; font-weight: 700; color: var(--purple); }\r\n\r\n .footer-right { display: flex; gap: 10px; }\r\n\r\n \/* ===== EMPTY STATE ===== *\/\r\n .empty {\r\n text-align: center;\r\n padding: 50px 20px;\r\n background: var(--card);\r\n border-radius: 14px;\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .empty-icon { font-size: 42px; margin-bottom: 12px; }\r\n .empty p { color: var(--text-light); font-size: 14px; }\r\n\r\n \/* ===== TOAST ===== *\/\r\n .toast {\r\n position: fixed;\r\n bottom: 24px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(80px);\r\n background: var(--text);\r\n color: white;\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.2);\r\n transition: transform 0.3s ease;\r\n pointer-events: none;\r\n z-index: 100;\r\n white-space: nowrap;\r\n }\r\n\r\n .toast.show { transform: translateX(-50%) translateY(0); }\r\n\r\n \/* ===== DASHBOARD ===== *\/\r\n .dash-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 14px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .dash-kpi {\r\n background: var(--card);\r\n border-radius: 14px;\r\n padding: 18px 16px;\r\n box-shadow: var(--shadow);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n position: relative;\r\n overflow: hidden;\r\n transition: box-shadow 0.2s, transform 0.2s;\r\n }\r\n\r\n .dash-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }\r\n\r\n .dash-kpi-accent {\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 3px;\r\n border-radius: 14px 14px 0 0;\r\n }\r\n\r\n .dash-kpi-icon {\r\n font-size: 22px;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .dash-kpi-value {\r\n font-size: 26px;\r\n font-weight: 700;\r\n line-height: 1;\r\n letter-spacing: -1px;\r\n }\r\n\r\n .dash-kpi-label {\r\n font-size: 11px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.7px;\r\n color: var(--text-light);\r\n }\r\n\r\n .dash-kpi-sub {\r\n font-size: 11px;\r\n color: var(--text-light);\r\n margin-top: 2px;\r\n }\r\n\r\n .dash-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .dash-card {\r\n background: var(--card);\r\n border-radius: 14px;\r\n box-shadow: var(--shadow);\r\n overflow: hidden;\r\n }\r\n\r\n .dash-card-header {\r\n padding: 14px 18px 10px;\r\n border-bottom: 1px solid var(--border);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .dash-card-title {\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: var(--text);\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n\r\n .dash-card-badge {\r\n font-size: 11px;\r\n font-weight: 600;\r\n padding: 2px 8px;\r\n border-radius: 10px;\r\n background: var(--bg);\r\n color: var(--text-light);\r\n }\r\n\r\n .dash-card-body { padding: 10px 0; }\r\n\r\n .dash-list-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 9px 18px;\r\n border-bottom: 1px solid var(--border);\r\n transition: background 0.15s;\r\n gap: 10px;\r\n }\r\n\r\n .dash-list-row:last-child { border-bottom: none; }\r\n .dash-list-row:hover { background: var(--bg); }\r\n\r\n .dash-list-rank {\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: var(--text-light);\r\n min-width: 22px;\r\n }\r\n\r\n .dash-list-name {\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: var(--text);\r\n flex: 1;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .dash-list-right {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n gap: 2px;\r\n }\r\n\r\n .dash-list-val {\r\n font-size: 13px;\r\n font-weight: 700;\r\n }\r\n\r\n .dash-list-sub {\r\n font-size: 11px;\r\n color: var(--text-light);\r\n }\r\n\r\n .dash-bar-wrap {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 8px 18px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .dash-bar-wrap:last-child { border-bottom: none; }\r\n\r\n .dash-bar-name {\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--text);\r\n min-width: 80px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .dash-bar-outer {\r\n flex: 1;\r\n background: var(--bg);\r\n border-radius: 4px;\r\n height: 8px;\r\n overflow: hidden;\r\n }\r\n\r\n .dash-bar-inner {\r\n height: 100%;\r\n border-radius: 4px;\r\n transition: width 0.6s ease;\r\n }\r\n\r\n .dash-bar-val {\r\n font-size: 12px;\r\n font-weight: 600;\r\n min-width: 36px;\r\n text-align: right;\r\n }\r\n\r\n .dash-alert-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 9px 18px;\r\n border-bottom: 1px solid var(--border);\r\n gap: 10px;\r\n transition: background 0.15s;\r\n }\r\n\r\n .dash-alert-row:last-child { border-bottom: none; }\r\n .dash-alert-row:hover { background: var(--bg); }\r\n\r\n .dash-alert-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n }\r\n\r\n .dash-alert-name {\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: var(--text);\r\n flex: 1;\r\n }\r\n\r\n .dash-alert-stock {\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 2px 8px;\r\n border-radius: 8px;\r\n }\r\n\r\n .dash-full {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .dash-refresh {\r\n font-size: 12px;\r\n color: var(--text-light);\r\n padding: 10px 18px;\r\n text-align: right;\r\n border-top: 1px solid var(--border);\r\n }\r\n\r\n \/* Settings panel in dashboard *\/\r\n .settings-panel {\r\n background: var(--card);\r\n border-radius: 14px;\r\n box-shadow: var(--shadow);\r\n margin-bottom: 16px;\r\n overflow: hidden;\r\n }\r\n\r\n .settings-header {\r\n padding: 14px 20px;\r\n background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);\r\n color: white;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .settings-header-title {\r\n font-size: 14px;\r\n font-weight: 700;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .settings-body { padding: 20px; }\r\n\r\n .settings-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .settings-btn-card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 20px 16px;\r\n background: var(--bg);\r\n border-radius: 12px;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n transition: all 0.2s;\r\n text-align: center;\r\n }\r\n\r\n .settings-btn-card:hover {\r\n border-color: var(--purple);\r\n background: var(--purple-light);\r\n }\r\n\r\n .settings-btn-icon { font-size: 28px; }\r\n .settings-btn-label { font-size: 13px; font-weight: 600; color: var(--text); }\r\n .settings-btn-desc { font-size: 11px; color: var(--text-light); }\r\n\r\n @media (max-width: 600px) {\r\n .dash-grid { grid-template-columns: repeat(2, 1fr); }\r\n .dash-row { grid-template-columns: 1fr; }\r\n .settings-grid { grid-template-columns: 1fr; }\r\n }\r\n\r\n \/* ===== STOCK SUMMARY CARD ===== *\/\r\n .stock-summary-card {\r\n background: var(--card);\r\n border-radius: 14px;\r\n padding: 16px 20px;\r\n box-shadow: var(--shadow);\r\n margin-bottom: 16px;\r\n display: flex;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .stock-stat {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n flex: 1;\r\n min-width: 80px;\r\n }\r\n\r\n .stock-stat-value { font-size: 22px; font-weight: 700; }\r\n .stock-stat-label { font-size: 11px; color: var(--text-light); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }\r\n\r\n \/* ===== MOBILE ===== *\/\r\n @media (max-width: 600px) {\r\n body { padding: 10px; }\r\n .header { padding: 18px 16px 16px; border-radius: 12px; }\r\n .header-top h1 { font-size: 19px; }\r\n .header-top { flex-direction: column; align-items: flex-start; gap: 12px; }\r\n .tabs { width: 100%; }\r\n .tab { flex: 1; text-align: center; padding: 8px 10px; font-size: 11px; }\r\n .toolbar { padding: 16px; border-radius: 12px; }\r\n .row { flex-direction: column; gap: 8px; }\r\n .field, .field.rate, .autocomplete-wrapper { flex: 1; width: 100%; min-width: 0; }\r\n .field.rate input { text-align: left; }\r\n .row .btn { width: 100%; justify-content: center; }\r\n .search-bar { padding: 12px 14px; border-radius: 12px; }\r\n .cat-head { padding: 12px 14px; }\r\n .item-row { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }\r\n .qty-btn { width: 24px; height: 24px; font-size: 15px; }\r\n .qty-input { width: 32px; height: 24px; font-size: 12px; }\r\n .item-total { min-width: 58px; font-size: 13px; }\r\n .btn-sm { padding: 5px 9px; font-size: 11px; }\r\n .table-header, .table-row, .edit-row-table {\r\n grid-template-columns: 1fr;\r\n gap: 8px;\r\n }\r\n .table-header { display: none; }\r\n .item-actions-cell { justify-content: flex-start; }\r\n .footer { padding: 14px 16px; border-radius: 12px; flex-direction: column; align-items: stretch; }\r\n .footer-left { justify-content: space-between; flex-direction: column; gap: 10px; }\r\n .footer-right { flex-direction: column; gap: 8px; }\r\n .footer-right .btn { justify-content: center; }\r\n .order-header { flex-direction: column; gap: 8px; }\r\n .order-actions { flex-direction: column; width: 100%; }\r\n .order-actions .btn { width: 100%; justify-content: center; }\r\n .party-list-item { flex-direction: column; align-items: flex-start; gap: 10px; }\r\n .party-actions { width: 100%; }\r\n .party-actions .btn { flex: 1; justify-content: center; }\r\n .party-edit-fields { flex-direction: column; }\r\n .stock-summary-card { gap: 10px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"header\" id=\"appHeader\">\r\n <div class=\"header-top\">\r\n <div>\r\n <h1>\ud83d\udccb Order Manager<\/h1>\r\n <div class=\"subtitle\" id=\"headerSubtitle\">Manage your purchase orders<\/div>\r\n <\/div>\r\n <div class=\"tabs\">\r\n <div class=\"tab active\" onclick=\"switchTab('purchase',this)\">\ud83d\uded2 Purchase<\/div>\r\n <div class=\"tab\" onclick=\"switchTab('items',this)\">\ud83d\udce6 Items<\/div>\r\n <div class=\"tab\" onclick=\"switchTab('sell',this)\">\ud83d\udcb0 Sell<\/div>\r\n <div class=\"tab\" onclick=\"switchTab('dashboard',this)\">\ud83d\udcca Dashboard<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ==================== PURCHASE TAB ==================== -->\r\n <div id=\"purchaseTab\">\r\n\r\n <!-- MANAGE PARTIES COLLAPSIBLE (same as sell tab) -->\r\n <div class=\"collapsible-section\">\r\n <div class=\"collapsible-header green-header\" onclick=\"toggleCollapsible('purchaseParty')\">\r\n <div class=\"collapsible-title green-title\">\r\n <span>\ud83d\udc65<\/span>\r\n <span>Manage Parties<\/span>\r\n <\/div>\r\n <div class=\"collapsible-icon green-icon\" id=\"purchasePartyIcon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"collapsible-content\" id=\"purchasePartyContent\">\r\n <div class=\"collapsible-body\">\r\n <div class=\"toolbar-label\">Add New Party<\/div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label>Party Name<\/label>\r\n <input type=\"text\" id=\"purchasePartyNameInput\" placeholder=\"e.g. ABC Supplier\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label>WhatsApp Number<\/label>\r\n <input type=\"tel\" id=\"purchasePartyPhoneInput\" placeholder=\"e.g. 9876543210\">\r\n <\/div>\r\n <button class=\"btn btn-green\" onclick=\"createParty()\">+ Create Party<\/button>\r\n <\/div>\r\n <hr class=\"divider\">\r\n <div class=\"toolbar-label\">Import\/Export Parties<\/div>\r\n <div class=\"row\">\r\n <button class=\"btn btn-blue\" onclick=\"exportParties()\">\ud83d\udce5 Export<\/button>\r\n <button class=\"btn btn-orange\" onclick=\"document.getElementById('importPartiesFile').click()\">\ud83d\udce4 Import<\/button>\r\n <input type=\"file\" id=\"importPartiesFile\" class=\"file-input\" accept=\".csv\" onchange=\"importParties(event)\">\r\n <\/div>\r\n <div id=\"purchasePartiesListWrap\" style=\"margin-top: 20px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ADD ORDER TOOLBAR -->\r\n <div class=\"toolbar\">\r\n <div class=\"toolbar-label\">Add Purchase Order<\/div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label>Select Party (Supplier)<\/label>\r\n <select id=\"purchaseOrderPartySelect\"><option value=\"\">Select Party<\/option><\/select>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Date<\/label>\r\n <input type=\"date\" id=\"purchaseOrderDate\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Note \/ Attender<\/label>\r\n <input type=\"text\" id=\"purchaseAttenderName\" placeholder=\"e.g. Ramesh\">\r\n <\/div>\r\n <\/div>\r\n\r\n <hr class=\"divider\">\r\n\r\n <div class=\"toolbar-label\">Add Items to Order<\/div>\r\n <div class=\"row\">\r\n <div class=\"autocomplete-wrapper\">\r\n <label style=\"font-size: 11px; font-weight: 600; color: var(--text-light); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.6px; display: block;\">Item Name<\/label>\r\n <input type=\"text\" id=\"purchaseOrderItemName\" placeholder=\"Type item name...\"\r\n oninput=\"showAutocomplete(this.value,'purchaseAC')\"\r\n onfocus=\"showAutocomplete(this.value,'purchaseAC')\"\r\n onkeydown=\"handleAutocompleteKey(event,'purchaseAC')\"\r\n style=\"padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; width: 100%; font-family: inherit; color: var(--text); background: var(--card);\">\r\n <div id=\"purchaseAC\" class=\"autocomplete-list\"><\/div>\r\n <\/div>\r\n <div class=\"field rate\">\r\n <label>Quantity<\/label>\r\n <input type=\"number\" id=\"purchaseOrderItemQty\" placeholder=\"0\" min=\"0.01\" step=\"0.01\" onkeydown=\"if(event.key==='Enter')addPurchaseOrderItem()\">\r\n <\/div>\r\n <div class=\"field rate\">\r\n <label>Rate (\u20b9)<\/label>\r\n <input type=\"number\" id=\"purchaseOrderItemRate\" placeholder=\"0.00\" step=\"0.01\" onkeydown=\"if(event.key==='Enter')addPurchaseOrderItem()\">\r\n <\/div>\r\n <button class=\"btn btn-purple\" onclick=\"addPurchaseOrderItem()\">+ Add Item<\/button>\r\n <\/div>\r\n\r\n <div id=\"currentPurchaseOrderItems\" style=\"margin-top: 16px;\"><\/div>\r\n\r\n <div class=\"row\" style=\"margin-top: 12px;\">\r\n <button class=\"btn btn-green\" onclick=\"savePurchaseOrder()\" style=\"margin-left: auto;\">\ud83d\udcbe Save Purchase Order<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FILTER COLLAPSIBLE -->\r\n <div class=\"collapsible-section\">\r\n <div class=\"collapsible-header\" onclick=\"toggleCollapsible('purchaseFilter')\">\r\n <div class=\"collapsible-title\">\r\n <span>\ud83d\udd0d<\/span>\r\n <span>Filter Purchase Orders<\/span>\r\n <\/div>\r\n <div class=\"collapsible-icon\" id=\"purchaseFilterIcon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"collapsible-content\" id=\"purchaseFilterContent\">\r\n <div class=\"collapsible-body\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label>From Date<\/label>\r\n <input type=\"date\" id=\"pFilterFromDate\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label>To Date<\/label>\r\n <input type=\"date\" id=\"pFilterToDate\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Party Name<\/label>\r\n <select id=\"pFilterParty\"><option value=\"\">All Parties<\/option><\/select>\r\n <\/div>\r\n <button class=\"btn btn-purple\" onclick=\"applyPurchaseFilters()\">\ud83d\udd0d Apply<\/button>\r\n <button class=\"btn btn-orange\" onclick=\"clearPurchaseFilters()\">\u2716 Clear<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PAGINATION -->\r\n <div style=\"background: var(--card); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <label style=\"font-size: 13px; font-weight: 500; color: var(--text-light);\">Show:<\/label>\r\n <select id=\"pEntriesPerPage\" onchange=\"changePurchaseEntriesPerPage()\" style=\"padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--text);\">\r\n <option value=\"5\">5 entries<\/option>\r\n <option value=\"10\" selected>10 entries<\/option>\r\n <option value=\"20\">20 entries<\/option>\r\n <option value=\"all\">All entries<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"pPaginationInfo\" style=\"font-size: 13px; color: var(--text-light);\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"purchaseOrdersWrap\"><\/div>\r\n <div id=\"pPaginationControls\" style=\"background: var(--card); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow); margin-top: 12px; display: none; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;\"><\/div>\r\n\r\n <div class=\"footer\" id=\"purchaseOrderSummary\" style=\"display:none;\">\r\n <div class=\"footer-left\">\r\n <div id=\"purchaseSummaryText\"><\/div>\r\n <\/div>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <button class=\"btn btn-blue\" onclick=\"exportPurchaseOrders()\">\ud83d\udce5 Export CSV<\/button>\r\n <button class=\"btn btn-green\" onclick=\"sendPurchaseFilteredWhatsApp()\">\ud83d\udcf1 Send Summary<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ==================== ITEM LIST TAB ==================== -->\r\n <div id=\"itemsTab\" style=\"display:none;\">\r\n <div class=\"toolbar\">\r\n <div class=\"toolbar-label\">Add New Item<\/div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label>Item Name<\/label>\r\n <input type=\"text\" id=\"itemNameInput\" placeholder=\"e.g. Burger\" onkeydown=\"if(event.key==='Enter')addItemToList()\">\r\n <\/div>\r\n <div class=\"field rate\">\r\n <label>Rate (\u20b9)<\/label>\r\n <input type=\"number\" id=\"itemRateInput\" placeholder=\"0.00\" step=\"0.01\" onkeydown=\"if(event.key==='Enter')addItemToList()\">\r\n <\/div>\r\n <div class=\"field rate\">\r\n <label>Initial Stock<\/label>\r\n <input type=\"number\" id=\"itemStockInput\" placeholder=\"0\" min=\"0\" onkeydown=\"if(event.key==='Enter')addItemToList()\">\r\n <\/div>\r\n <button class=\"btn btn-purple\" onclick=\"addItemToList()\">+ Add Item<\/button>\r\n <button class=\"btn btn-blue\" onclick=\"document.getElementById('importFile').click()\">\ud83d\udce4 Import<\/button>\r\n <button class=\"btn btn-blue\" onclick=\"exportData()\">\ud83d\udce5 Export<\/button>\r\n <input type=\"file\" id=\"importFile\" class=\"file-input\" accept=\".csv\" onchange=\"importCSV(event)\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Stock Summary -->\r\n <div class=\"stock-summary-card\" id=\"stockSummaryCard\">\r\n <div class=\"stock-stat\">\r\n <div class=\"stock-stat-value\" id=\"totalItemsCount\" style=\"color: var(--purple);\">0<\/div>\r\n <div class=\"stock-stat-label\">Total Items<\/div>\r\n <\/div>\r\n <div class=\"stock-stat\">\r\n <div class=\"stock-stat-value\" id=\"inStockCount\" style=\"color: var(--green);\">0<\/div>\r\n <div class=\"stock-stat-label\">In Stock<\/div>\r\n <\/div>\r\n <div class=\"stock-stat\">\r\n <div class=\"stock-stat-value\" id=\"lowStockCount\" style=\"color: var(--orange);\">0<\/div>\r\n <div class=\"stock-stat-label\">Low Stock (\u22645)<\/div>\r\n <\/div>\r\n <div class=\"stock-stat\">\r\n <div class=\"stock-stat-value\" id=\"outStockCount\" style=\"color: var(--red);\">0<\/div>\r\n <div class=\"stock-stat-label\">Zero \/ Negative Stock<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"search-bar\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search items...\" oninput=\"filterItems()\">\r\n <\/div>\r\n\r\n <div class=\"items-table\">\r\n <div class=\"table-header\">\r\n <div>Item Name<\/div>\r\n <div>Rate (\u20b9)<\/div>\r\n <div>Stock<\/div>\r\n <div style=\"text-align: right;\">Actions<\/div>\r\n <\/div>\r\n <div id=\"itemsTableBody\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ==================== SELL TAB ==================== -->\r\n <div id=\"sellTab\" style=\"display:none;\">\r\n\r\n <!-- SETTINGS COLLAPSIBLE -->\r\n <div class=\"collapsible-section\">\r\n <div class=\"collapsible-header\" onclick=\"toggleCollapsible('settings')\">\r\n <div class=\"collapsible-title\">\r\n <span>\u2699\ufe0f<\/span>\r\n <span>Settings & Data Management<\/span>\r\n <\/div>\r\n <div class=\"collapsible-icon\" id=\"settingsIcon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"collapsible-content\" id=\"settingsContent\">\r\n <div class=\"collapsible-body\">\r\n <div class=\"toolbar-label\">Export All Data<\/div>\r\n <div class=\"row\">\r\n <button class=\"btn btn-blue\" onclick=\"exportAllData()\">\ud83d\udce5 Export Complete Database<\/button>\r\n <\/div>\r\n <hr class=\"divider\">\r\n <div class=\"toolbar-label\">Import All Data<\/div>\r\n <div class=\"row\">\r\n <button class=\"btn btn-orange\" onclick=\"document.getElementById('importAllDataFile').click()\">\ud83d\udce4 Import Complete Database<\/button>\r\n <input type=\"file\" id=\"importAllDataFile\" class=\"file-input\" accept=\".json\" onchange=\"importAllData(event)\">\r\n <\/div>\r\n <div style=\"margin-top: 12px; padding: 12px; background: var(--blue-light); border-radius: 8px; font-size: 12px; color: var(--text-light);\">\r\n <strong>Note:<\/strong> Complete database includes Items, Parties, Purchase Orders, and Sell Orders.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MANAGE PARTIES COLLAPSIBLE -->\r\n <div class=\"collapsible-section\">\r\n <div class=\"collapsible-header green-header\" onclick=\"toggleCollapsible('manageParty')\">\r\n <div class=\"collapsible-title green-title\">\r\n <span>\ud83d\udc65<\/span>\r\n <span>Manage Parties<\/span>\r\n <\/div>\r\n <div class=\"collapsible-icon green-icon\" id=\"managePartyIcon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"collapsible-content\" id=\"managePartyContent\">\r\n <div class=\"collapsible-body\">\r\n <div class=\"toolbar-label\">Add New Party<\/div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label>Party Name<\/label>\r\n <input type=\"text\" id=\"partyNameInput\" placeholder=\"e.g. Raj Restaurant\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label>WhatsApp Number<\/label>\r\n <input type=\"tel\" id=\"partyPhoneInput\" placeholder=\"e.g. 9876543210\">\r\n <\/div>\r\n <button class=\"btn btn-green\" onclick=\"createParty()\">+ Create Party<\/button>\r\n <\/div>\r\n <hr class=\"divider\">\r\n <div class=\"toolbar-label\">Import\/Export Parties<\/div>\r\n <div class=\"row\">\r\n <button class=\"btn btn-blue\" onclick=\"exportParties()\">\ud83d\udce5 Export Parties<\/button>\r\n <button class=\"btn btn-orange\" onclick=\"document.getElementById('importPartiesFile2').click()\">\ud83d\udce4 Import Parties<\/button>\r\n <input type=\"file\" id=\"importPartiesFile2\" class=\"file-input\" accept=\".csv\" onchange=\"importParties(event)\">\r\n <\/div>\r\n <div id=\"partiesListWrap\" style=\"margin-top: 20px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ADD SELL ORDER TOOLBAR -->\r\n <div class=\"toolbar\">\r\n <div class=\"toolbar-label\">Add Sell Order<\/div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label>Select Party (Customer)<\/label>\r\n <select id=\"orderPartySelect\"><option value=\"\">Select Party<\/option><\/select>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Date<\/label>\r\n <input type=\"date\" id=\"orderDate\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Attender Name<\/label>\r\n <input type=\"text\" id=\"attenderName\" placeholder=\"e.g. Ramesh\">\r\n <\/div>\r\n <\/div>\r\n\r\n <hr class=\"divider\">\r\n\r\n <div class=\"toolbar-label\">Add Items to Sell Order<\/div>\r\n <div class=\"row\">\r\n <div class=\"autocomplete-wrapper\">\r\n <label style=\"font-size: 11px; font-weight: 600; color: var(--text-light); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.6px; display: block;\">Item Name<\/label>\r\n <input type=\"text\" id=\"orderItemName\" placeholder=\"Type item name...\"\r\n oninput=\"showAutocomplete(this.value,'sellAC')\"\r\n onfocus=\"showAutocomplete(this.value,'sellAC')\"\r\n onkeydown=\"handleAutocompleteKey(event,'sellAC')\"\r\n style=\"padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; width: 100%; font-family: inherit; color: var(--text); background: var(--card);\">\r\n <div id=\"sellAC\" class=\"autocomplete-list\"><\/div>\r\n <\/div>\r\n <div class=\"field rate\">\r\n <label>Quantity<\/label>\r\n <input type=\"number\" id=\"orderItemQty\" placeholder=\"0\" min=\"0.01\" step=\"0.01\" onkeydown=\"if(event.key==='Enter')addOrderItem()\">\r\n <\/div>\r\n <div class=\"field rate\">\r\n <label>Rate (\u20b9)<\/label>\r\n <input type=\"number\" id=\"orderItemRate\" placeholder=\"0.00\" step=\"0.01\" onkeydown=\"if(event.key==='Enter')addOrderItem()\">\r\n <\/div>\r\n <button class=\"btn btn-purple\" onclick=\"addOrderItem()\">+ Add Item<\/button>\r\n <\/div>\r\n\r\n <div id=\"currentOrderItems\" style=\"margin-top: 16px;\"><\/div>\r\n\r\n <div class=\"row\" style=\"margin-top: 12px;\">\r\n <button class=\"btn btn-green\" onclick=\"saveOrder()\" style=\"margin-left: auto;\">\ud83d\udcbe Save Sell Order<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FILTER ORDERS COLLAPSIBLE -->\r\n <div class=\"collapsible-section\">\r\n <div class=\"collapsible-header\" onclick=\"toggleCollapsible('filterOrders')\">\r\n <div class=\"collapsible-title\">\r\n <span>\ud83d\udd0d<\/span>\r\n <span>Filter Orders<\/span>\r\n <\/div>\r\n <div class=\"collapsible-icon\" id=\"filterOrdersIcon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"collapsible-content\" id=\"filterOrdersContent\">\r\n <div class=\"collapsible-body\">\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <label>From Date<\/label>\r\n <input type=\"date\" id=\"filterFromDate\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label>To Date<\/label>\r\n <input type=\"date\" id=\"filterToDate\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Party Name<\/label>\r\n <select id=\"filterParty\"><option value=\"\">All Parties<\/option><\/select>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Attender<\/label>\r\n <input type=\"text\" id=\"filterAttender\" placeholder=\"Filter by attender\">\r\n <\/div>\r\n <button class=\"btn btn-purple\" onclick=\"applyFilters()\">\ud83d\udd0d Apply<\/button>\r\n <button class=\"btn btn-orange\" onclick=\"clearFilters()\">\u2716 Clear<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PAGINATION CONTROLS -->\r\n <div style=\"background: var(--card); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <label style=\"font-size: 13px; font-weight: 500; color: var(--text-light);\">Show:<\/label>\r\n <select id=\"entriesPerPage\" onchange=\"changeEntriesPerPage()\" style=\"padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--text);\">\r\n <option value=\"5\">5 entries<\/option>\r\n <option value=\"10\" selected>10 entries<\/option>\r\n <option value=\"20\">20 entries<\/option>\r\n <option value=\"50\">50 entries<\/option>\r\n <option value=\"all\">All entries<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"paginationInfo\" style=\"font-size: 13px; color: var(--text-light);\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"ordersWrap\"><\/div>\r\n\r\n <div id=\"paginationControls\" style=\"background: var(--card); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow); margin-top: 12px; display: none; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;\"><\/div>\r\n\r\n <div class=\"footer\" id=\"orderSummary\" style=\"display:none;\">\r\n <div class=\"footer-left\">\r\n <div id=\"summaryText\"><\/div>\r\n <\/div>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <button class=\"btn btn-green\" onclick=\"sendFilteredOrdersWhatsApp()\">\ud83d\udcf1 Send Summary<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ==================== DASHBOARD TAB ==================== -->\r\n <div id=\"dashboardTab\" style=\"display:none;\">\r\n\r\n <!-- KPI CARDS -->\r\n <div class=\"dash-grid\" id=\"dashKpiGrid\">\r\n <!-- rendered by JS -->\r\n <\/div>\r\n\r\n <!-- TOP SELLING + LOW STOCK -->\r\n <div class=\"dash-row\">\r\n <div class=\"dash-card\">\r\n <div class=\"dash-card-header\">\r\n <div class=\"dash-card-title\">\ud83d\udd25 Top Selling Items<\/div>\r\n <div class=\"dash-card-badge\" id=\"dashTopSellBadge\">All time<\/div>\r\n <\/div>\r\n <div class=\"dash-card-body\" id=\"dashTopSell\"><\/div>\r\n <\/div>\r\n <div class=\"dash-card\">\r\n <div class=\"dash-card-header\">\r\n <div class=\"dash-card-title\">\u26a0\ufe0f Stock Alerts<\/div>\r\n <div class=\"dash-card-badge\" id=\"dashAlertBadge\">0 alerts<\/div>\r\n <\/div>\r\n <div class=\"dash-card-body\" id=\"dashStockAlerts\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- TOP PARTIES + PURCHASE TREND -->\r\n <div class=\"dash-row\">\r\n <div class=\"dash-card\">\r\n <div class=\"dash-card-header\">\r\n <div class=\"dash-card-title\">\ud83d\udc51 Top Parties (Sell)<\/div>\r\n <div class=\"dash-card-badge\" id=\"dashPartyBadge\">By revenue<\/div>\r\n <\/div>\r\n <div class=\"dash-card-body\" id=\"dashTopParties\"><\/div>\r\n <\/div>\r\n <div class=\"dash-card\">\r\n <div class=\"dash-card-header\">\r\n <div class=\"dash-card-title\">\ud83d\udce6 Top Purchased Items<\/div>\r\n <div class=\"dash-card-badge\" id=\"dashPurchaseBadge\">By qty<\/div>\r\n <\/div>\r\n <div class=\"dash-card-body\" id=\"dashTopPurchased\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MONTHLY CHART FULL WIDTH -->\r\n <div class=\"dash-card\" style=\"margin-bottom: 16px;\">\r\n <div class=\"dash-card-header\">\r\n <div class=\"dash-card-title\">\ud83d\udcc8 Monthly Revenue (Last 6 Months)<\/div>\r\n <div class=\"dash-card-badge\" id=\"dashMonthBadge\">Sell vs Purchase<\/div>\r\n <\/div>\r\n <div style=\"padding: 16px 18px;\" id=\"dashMonthChart\"><\/div>\r\n <\/div>\r\n\r\n <!-- OUT OF STOCK FULL WIDTH -->\r\n <div class=\"dash-card\" style=\"margin-bottom: 16px;\">\r\n <div class=\"dash-card-header\">\r\n <div class=\"dash-card-title\">\ud83d\udeab Out of Stock Items<\/div>\r\n <div class=\"dash-card-badge\" id=\"dashOutBadge\">0 items<\/div>\r\n <\/div>\r\n <div class=\"dash-card-body\" id=\"dashOutOfStock\"><\/div>\r\n <\/div>\r\n\r\n <!-- RECENT ACTIVITY -->\r\n <div class=\"dash-card\" style=\"margin-bottom: 16px;\">\r\n <div class=\"dash-card-header\">\r\n <div class=\"dash-card-title\">\ud83d\udd50 Recent Orders<\/div>\r\n <div class=\"dash-card-badge\">Last 5<\/div>\r\n <\/div>\r\n <div class=\"dash-card-body\" id=\"dashRecentOrders\"><\/div>\r\n <\/div>\r\n\r\n <!-- SETTINGS PANEL -->\r\n <div class=\"settings-panel\">\r\n <div class=\"settings-header\">\r\n <div class=\"settings-header-title\">\u2699\ufe0f Data Management<\/div>\r\n <\/div>\r\n <div class=\"settings-body\">\r\n <div class=\"settings-grid\">\r\n <div class=\"settings-btn-card\" onclick=\"exportAllData()\">\r\n <div class=\"settings-btn-icon\">\ud83d\udce5<\/div>\r\n <div class=\"settings-btn-label\">Export Complete Database<\/div>\r\n <div class=\"settings-btn-desc\">Backup all items, parties, orders as JSON<\/div>\r\n <\/div>\r\n <div class=\"settings-btn-card\" onclick=\"document.getElementById('importAllDataFile').click()\">\r\n <div class=\"settings-btn-icon\">\ud83d\udce4<\/div>\r\n <div class=\"settings-btn-label\">Import Complete Database<\/div>\r\n <div class=\"settings-btn-desc\">Restore from a JSON backup file<\/div>\r\n <\/div>\r\n <div class=\"settings-btn-card\" onclick=\"exportItemsCSV()\">\r\n <div class=\"settings-btn-icon\">\ud83d\udcca<\/div>\r\n <div class=\"settings-btn-label\">Export Items List<\/div>\r\n <div class=\"settings-btn-desc\">Export all items with stock as CSV<\/div>\r\n <\/div>\r\n <div class=\"settings-btn-card\" onclick=\"exportPartiesCSV()\">\r\n <div class=\"settings-btn-icon\">\ud83d\udc65<\/div>\r\n <div class=\"settings-btn-label\">Export Parties List<\/div>\r\n <div class=\"settings-btn-desc\">Export all parties as CSV<\/div>\r\n <\/div>\r\n <div class=\"settings-btn-card\" onclick=\"exportSellOrdersCSV()\">\r\n <div class=\"settings-btn-icon\">\ud83d\udcb0<\/div>\r\n <div class=\"settings-btn-label\">Export Sell Orders<\/div>\r\n <div class=\"settings-btn-desc\">Export all sell orders as CSV<\/div>\r\n <\/div>\r\n <div class=\"settings-btn-card\" onclick=\"exportPurchaseOrders()\">\r\n <div class=\"settings-btn-icon\">\ud83d\uded2<\/div>\r\n <div class=\"settings-btn-label\">Export Purchase Orders<\/div>\r\n <div class=\"settings-btn-desc\">Export all purchase orders as CSV<\/div>\r\n <\/div>\r\n <\/div>\r\n <input type=\"file\" id=\"importAllDataFile\" class=\"file-input\" accept=\".json\" onchange=\"importAllData(event)\">\r\n <div style=\"padding: 12px; background: var(--blue-light); border-radius: 8px; font-size: 12px; color: var(--text-light);\">\r\n <strong>\ud83d\udca1 Tip:<\/strong> Export database regularly to keep a backup. Import will replace all current data.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n<script>\r\n let data = {\r\n items: [], \/\/ common item list with stock\r\n parties: [], \/\/ common parties\r\n purchaseOrders: [],\r\n sellOrders: []\r\n };\r\n\r\n let mode = 'purchase';\r\n let currentOrderItems = []; \/\/ sell order temp\r\n let currentPurchaseOrderItems = []; \/\/ purchase order temp\r\n let autocompleteIndex = { purchaseAC: -1, sellAC: -1 };\r\n let currentPage = 1;\r\n let entriesPerPage = 10;\r\n let purchaseCurrentPage = 1;\r\n let purchaseEntriesPerPage = 10;\r\n\r\n \/\/ ===== INIT =====\r\n (function init() {\r\n try {\r\n const s = localStorage.getItem('orderMgr_v2');\r\n if (s) {\r\n const d = JSON.parse(s);\r\n if (d.items) data.items = d.items;\r\n if (d.parties) data.parties = d.parties;\r\n if (d.purchaseOrders) data.purchaseOrders = d.purchaseOrders;\r\n if (d.sellOrders) data.sellOrders = d.sellOrders;\r\n \/\/ Migrate old data\r\n if (d.orders) data.sellOrders = d.orders; \/\/ backward compat\r\n }\r\n } catch(e) {}\r\n\r\n const today = new Date().toISOString().split('T')[0];\r\n document.getElementById('orderDate').value = today;\r\n document.getElementById('purchaseOrderDate').value = today;\r\n\r\n syncPartyDropdowns();\r\n renderPurchaseOrders();\r\n\r\n document.addEventListener('click', function(e) {\r\n if (!e.target.closest('.autocomplete-wrapper')) {\r\n hideAutocomplete('purchaseAC');\r\n hideAutocomplete('sellAC');\r\n }\r\n });\r\n })();\r\n\r\n function save() {\r\n try { localStorage.setItem('orderMgr_v2', JSON.stringify(data)); } catch(e) {}\r\n }\r\n\r\n function toast(msg) {\r\n const el = document.getElementById('toast');\r\n el.textContent = msg;\r\n el.classList.add('show');\r\n setTimeout(() => el.classList.remove('show'), 1800);\r\n }\r\n\r\n function uid() { return Date.now() + Math.random(); }\r\n\r\n \/\/ ===== TAB SWITCH =====\r\n function switchTab(type, el) {\r\n mode = type;\r\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\r\n el.classList.add('active');\r\n const h = document.getElementById('appHeader');\r\n const sub = document.getElementById('headerSubtitle');\r\n\r\n document.getElementById('purchaseTab').style.display = 'none';\r\n document.getElementById('itemsTab').style.display = 'none';\r\n document.getElementById('sellTab').style.display = 'none';\r\n document.getElementById('dashboardTab').style.display = 'none';\r\n\r\n h.classList.remove('sell-mode', 'items-mode', 'dashboard-mode');\r\n\r\n if (type === 'purchase') {\r\n sub.textContent = 'Manage your purchase orders';\r\n document.getElementById('purchaseTab').style.display = 'block';\r\n renderPurchaseOrders();\r\n renderPurchasePartiesList();\r\n } else if (type === 'items') {\r\n h.classList.add('items-mode');\r\n sub.textContent = 'Manage your item list & stock';\r\n document.getElementById('itemsTab').style.display = 'block';\r\n renderItems();\r\n } else if (type === 'sell') {\r\n h.classList.add('sell-mode');\r\n sub.textContent = 'Manage sell orders';\r\n document.getElementById('sellTab').style.display = 'block';\r\n renderPartiesList();\r\n renderOrders();\r\n } else if (type === 'dashboard') {\r\n h.classList.add('dashboard-mode');\r\n sub.textContent = 'Business overview & analytics';\r\n document.getElementById('dashboardTab').style.display = 'block';\r\n renderDashboard();\r\n }\r\n }\r\n\r\n \/\/ ===== COLLAPSIBLE =====\r\n function toggleCollapsible(id) {\r\n const content = document.getElementById(id + 'Content');\r\n const icon = document.getElementById(id + 'Icon');\r\n content.classList.toggle('open');\r\n icon.classList.toggle('open');\r\n }\r\n\r\n \/\/ ===== PARTY MANAGEMENT =====\r\n function syncPartyDropdowns() {\r\n const selectors = [\r\n 'orderPartySelect', 'filterParty',\r\n 'purchaseOrderPartySelect', 'pFilterParty'\r\n ];\r\n selectors.forEach(id => {\r\n const el = document.getElementById(id);\r\n if (!el) return;\r\n const isFilter = id.includes('Filter') || id.includes('filter');\r\n el.innerHTML = isFilter ? '<option value=\"\">All Parties<\/option>' : '<option value=\"\">Select Party<\/option>';\r\n data.parties.forEach(p => {\r\n const o = document.createElement('option');\r\n o.value = p.id;\r\n o.textContent = p.name;\r\n el.appendChild(o);\r\n });\r\n });\r\n }\r\n\r\n function createParty() {\r\n \/\/ Check which input is visible (purchase tab or sell tab)\r\n let nameEl = document.getElementById('partyNameInput');\r\n let phoneEl = document.getElementById('partyPhoneInput');\r\n\r\n \/\/ If on purchase tab, use purchase party inputs\r\n if (mode === 'purchase') {\r\n nameEl = document.getElementById('purchasePartyNameInput');\r\n phoneEl = document.getElementById('purchasePartyPhoneInput');\r\n }\r\n\r\n const name = nameEl.value.trim();\r\n const phone = phoneEl.value.trim();\r\n\r\n if (!name) { toast('Enter party name'); return; }\r\n if (!phone) { toast('Enter WhatsApp number'); return; }\r\n\r\n if (data.parties.find(p => p.name.toLowerCase() === name.toLowerCase())) {\r\n toast('Party already exists'); return;\r\n }\r\n\r\n data.parties.push({ id: uid(), name, phone, editing: false });\r\n nameEl.value = '';\r\n phoneEl.value = '';\r\n\r\n syncPartyDropdowns();\r\n save();\r\n renderPartiesList();\r\n renderPurchasePartiesList();\r\n toast('Party created \u2713');\r\n }\r\n\r\n function deleteParty(id) {\r\n if (!confirm('Delete this party?')) return;\r\n data.parties = data.parties.filter(p => p.id !== id);\r\n syncPartyDropdowns();\r\n save();\r\n renderPartiesList();\r\n renderPurchasePartiesList();\r\n toast('Party deleted');\r\n }\r\n\r\n function toggleEditParty(id) {\r\n const party = data.parties.find(p => p.id === id);\r\n party.editing = !party.editing;\r\n renderPartiesList();\r\n renderPurchasePartiesList();\r\n }\r\n\r\n function saveEditParty(id) {\r\n const name = document.getElementById('partyEditName-' + id) ?\r\n document.getElementById('partyEditName-' + id).value.trim() :\r\n document.getElementById('partyEditName2-' + id).value.trim();\r\n const phone = document.getElementById('partyEditPhone-' + id) ?\r\n document.getElementById('partyEditPhone-' + id).value.trim() :\r\n document.getElementById('partyEditPhone2-' + id).value.trim();\r\n\r\n if (!name) { toast('Enter party name'); return; }\r\n if (!phone) { toast('Enter WhatsApp number'); return; }\r\n\r\n const dup = data.parties.find(p => p.id !== id && p.name.toLowerCase() === name.toLowerCase());\r\n if (dup) { toast('Another party with this name exists'); return; }\r\n\r\n const party = data.parties.find(p => p.id === id);\r\n const oldName = party.name;\r\n party.name = name;\r\n party.phone = phone;\r\n party.editing = false;\r\n\r\n \/\/ Update orders\r\n data.sellOrders.forEach(o => { if (o.partyName === oldName) { o.partyName = name; o.partyPhone = phone; } });\r\n data.purchaseOrders.forEach(o => { if (o.partyName === oldName) { o.partyName = name; o.partyPhone = phone; } });\r\n\r\n syncPartyDropdowns();\r\n save();\r\n renderPartiesList();\r\n renderPurchasePartiesList();\r\n renderOrders();\r\n renderPurchaseOrders();\r\n toast('Party updated \u2713');\r\n }\r\n\r\n function buildPartyListHTML(prefix) {\r\n if (data.parties.length === 0) {\r\n return '<div style=\"text-align: center; padding: 20px; color: var(--text-light); font-size: 14px;\">No parties yet. Add your first party above!<\/div>';\r\n }\r\n\r\n let html = '<div style=\"margin-top: 8px;\"><div class=\"toolbar-label\">Existing Parties<\/div>';\r\n data.parties.forEach(party => {\r\n if (party.editing) {\r\n html += `<div class=\"party-list-item editing\">\r\n <div class=\"party-edit-fields\">\r\n <input type=\"text\" id=\"${prefix}partyEditName-${party.id}\" value=\"${escHtml(party.name)}\" placeholder=\"Party name\">\r\n <input type=\"tel\" id=\"${prefix}partyEditPhone-${party.id}\" value=\"${party.phone}\" placeholder=\"WhatsApp number\">\r\n <\/div>\r\n <div class=\"party-actions\">\r\n <button class=\"btn btn-green btn-sm\" onclick=\"saveEditPartyFromEl('${party.id}','${prefix}')\">Save<\/button>\r\n <button class=\"btn btn-sm\" style=\"background:var(--border);color:var(--text);\" onclick=\"toggleEditParty(${party.id})\">Cancel<\/button>\r\n <\/div>\r\n <\/div>`;\r\n } else {\r\n html += `<div class=\"party-list-item\">\r\n <div class=\"party-info\">\r\n <h4>${escHtml(party.name)}<\/h4>\r\n <p>\ud83d\udcf1 ${party.phone}<\/p>\r\n <\/div>\r\n <div class=\"party-actions\">\r\n <button class=\"btn btn-blue-light btn-sm\" onclick=\"toggleEditParty(${party.id})\">Edit<\/button>\r\n <button class=\"btn btn-red-light btn-sm\" onclick=\"deleteParty(${party.id})\">Delete<\/button>\r\n <\/div>\r\n <\/div>`;\r\n }\r\n });\r\n html += '<\/div>';\r\n return html;\r\n }\r\n\r\n function saveEditPartyFromEl(id, prefix) {\r\n const nameEl = document.getElementById(prefix + 'partyEditName-' + id);\r\n const phoneEl = document.getElementById(prefix + 'partyEditPhone-' + id);\r\n if (!nameEl || !phoneEl) return;\r\n\r\n const name = nameEl.value.trim();\r\n const phone = phoneEl.value.trim();\r\n\r\n if (!name) { toast('Enter party name'); return; }\r\n if (!phone) { toast('Enter WhatsApp number'); return; }\r\n\r\n const dup = data.parties.find(p => p.id != id && p.name.toLowerCase() === name.toLowerCase());\r\n if (dup) { toast('Another party with this name exists'); return; }\r\n\r\n const party = data.parties.find(p => p.id == id);\r\n const oldName = party.name;\r\n party.name = name;\r\n party.phone = phone;\r\n party.editing = false;\r\n\r\n data.sellOrders.forEach(o => { if (o.partyName === oldName) { o.partyName = name; o.partyPhone = phone; } });\r\n data.purchaseOrders.forEach(o => { if (o.partyName === oldName) { o.partyName = name; o.partyPhone = phone; } });\r\n\r\n syncPartyDropdowns();\r\n save();\r\n renderPartiesList();\r\n renderPurchasePartiesList();\r\n renderOrders();\r\n renderPurchaseOrders();\r\n toast('Party updated \u2713');\r\n }\r\n\r\n function renderPartiesList() {\r\n const wrap = document.getElementById('partiesListWrap');\r\n if (wrap) wrap.innerHTML = buildPartyListHTML('');\r\n }\r\n\r\n function renderPurchasePartiesList() {\r\n const wrap = document.getElementById('purchasePartiesListWrap');\r\n if (wrap) wrap.innerHTML = buildPartyListHTML('p');\r\n }\r\n\r\n function toggleEditPartyFromPurchase(id) {\r\n toggleEditParty(id);\r\n }\r\n\r\n \/\/ ===== ITEM LIST (with stock) =====\r\n function addItemToList() {\r\n const name = document.getElementById('itemNameInput').value.trim();\r\n const rate = parseFloat(document.getElementById('itemRateInput').value);\r\n const stock = parseInt(document.getElementById('itemStockInput').value) || 0;\r\n\r\n if (!name) { toast('Enter item name'); return; }\r\n if (!rate || rate <= 0) { toast('Enter a valid rate'); return; }\r\n\r\n if (data.items.find(i => i.name.toLowerCase() === name.toLowerCase())) {\r\n toast('Item already exists'); return;\r\n }\r\n\r\n data.items.push({ id: uid(), name, rate, stock: stock, editing: false });\r\n data.items.sort((a, b) => a.name.localeCompare(b.name));\r\n\r\n document.getElementById('itemNameInput').value = '';\r\n document.getElementById('itemRateInput').value = '';\r\n document.getElementById('itemStockInput').value = '';\r\n\r\n save();\r\n renderItems();\r\n toast('Item added \u2713');\r\n }\r\n\r\n function deleteItemFromList(id) {\r\n if (!confirm('Delete this item?')) return;\r\n data.items = data.items.filter(i => i.id !== id);\r\n save();\r\n renderItems();\r\n toast('Item deleted');\r\n }\r\n\r\n function toggleEditItem(id) {\r\n const item = data.items.find(i => i.id === id);\r\n item.editing = !item.editing;\r\n renderItems();\r\n }\r\n\r\n function saveEditItem(id) {\r\n const name = document.getElementById('eName-' + id).value.trim();\r\n const rate = parseFloat(document.getElementById('eRate-' + id).value);\r\n const stock = parseInt(document.getElementById('eStock-' + id).value) || 0;\r\n\r\n if (!name) { toast('Enter item name'); return; }\r\n if (!rate || rate <= 0) { toast('Enter a valid rate'); return; }\r\n\r\n const item = data.items.find(i => i.id === id);\r\n item.name = name;\r\n item.rate = rate;\r\n item.stock = stock;\r\n item.editing = false;\r\n\r\n data.items.sort((a, b) => a.name.localeCompare(b.name));\r\n save();\r\n renderItems();\r\n toast('Item updated \u2713');\r\n }\r\n\r\n function filterItems() {\r\n const q = document.getElementById('searchInput').value.toLowerCase();\r\n document.querySelectorAll('.table-row, .edit-row-table').forEach(row => {\r\n const searchText = row.getAttribute('data-searchtext') || '';\r\n row.style.display = searchText.includes(q) ? 'grid' : 'none';\r\n });\r\n }\r\n\r\n function renderItems() {\r\n const tbody = document.getElementById('itemsTableBody');\r\n\r\n \/\/ Update stock summary\r\n const total = data.items.length;\r\n const outStock = data.items.filter(i => (i.stock || 0) <= 0).length;\r\n const lowStock = data.items.filter(i => (i.stock || 0) > 0 && (i.stock || 0) <= 5).length;\r\n const inStock = data.items.filter(i => (i.stock || 0) > 5).length;\r\n\r\n document.getElementById('totalItemsCount').textContent = total;\r\n document.getElementById('inStockCount').textContent = inStock;\r\n document.getElementById('lowStockCount').textContent = lowStock;\r\n document.getElementById('outStockCount').textContent = outStock;\r\n\r\n if (data.items.length === 0) {\r\n tbody.innerHTML = `<div class=\"empty\"><div class=\"empty-icon\">\ud83d\udce6<\/div><p>No items yet. Add your first item!<\/p><\/div>`;\r\n return;\r\n }\r\n\r\n let html = '';\r\n data.items.forEach(item => {\r\n const stock = (item.stock !== undefined && item.stock !== null) ? item.stock : 0;\r\n const stockClass = stock < 0 ? 'stock-negative' : stock === 0 ? 'stock-out' : stock <= 5 ? 'stock-low' : 'stock-ok';\r\n const stockLabel = stock < 0 ? `\u26a0 ${stock}` : stock === 0 ? 'Out of Stock' : stock <= 5 ? `Low: ${stock}` : `${stock}`;\r\n\r\n if (item.editing) {\r\n html += `<div class=\"edit-row-table\" data-searchtext=\"${item.name.toLowerCase()}\">\r\n <input type=\"text\" id=\"eName-${item.id}\" value=\"${escHtml(item.name)}\">\r\n <input type=\"number\" id=\"eRate-${item.id}\" value=\"${item.rate}\" step=\"0.01\" placeholder=\"Rate\">\r\n <input type=\"number\" id=\"eStock-${item.id}\" value=\"${stock}\" min=\"0\" placeholder=\"Stock\">\r\n <div style=\"display: flex; gap: 6px; justify-content: flex-end;\">\r\n <button class=\"btn btn-purple btn-sm\" onclick=\"saveEditItem(${item.id})\">Save<\/button>\r\n <button class=\"btn btn-sm\" style=\"background:var(--border);color:var(--text);\" onclick=\"toggleEditItem(${item.id})\">Cancel<\/button>\r\n <\/div>\r\n <\/div>`;\r\n } else {\r\n html += `<div class=\"table-row\" data-searchtext=\"${item.name.toLowerCase()}\">\r\n <div class=\"item-name-cell\">${escHtml(item.name)}<\/div>\r\n <div class=\"item-rate-cell\">\u20b9${item.rate.toFixed(2)}<\/div>\r\n <div class=\"item-stock-cell\">\r\n <span class=\"stock-badge ${stockClass}\">${stockLabel}<\/span>\r\n <\/div>\r\n <div class=\"item-actions-cell\">\r\n <button class=\"btn btn-blue-light btn-sm\" onclick=\"toggleEditItem(${item.id})\">Edit<\/button>\r\n <button class=\"btn btn-red-light btn-sm\" onclick=\"deleteItemFromList(${item.id})\">Delete<\/button>\r\n <\/div>\r\n <\/div>`;\r\n }\r\n });\r\n tbody.innerHTML = html;\r\n }\r\n\r\n function exportData() {\r\n let csv = 'Item Name,Rate,Stock\\n';\r\n data.items.forEach(i => {\r\n csv += `\"${i.name}\",${i.rate},${i.stock !== undefined ? i.stock : 0}\\n`;\r\n });\r\n download(csv, `Item_List_${today()}.csv`, 'text\/csv');\r\n }\r\n\r\n function importCSV(ev) {\r\n const file = ev.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n try {\r\n const lines = e.target.result.split('\\n');\r\n let count = 0;\r\n for (let i = 1; i < lines.length; i++) {\r\n const line = lines[i].trim();\r\n if (!line) continue;\r\n const m = line.match(\/^\"([^\"]*)\",([^,]+),?(.*)$\/);\r\n if (!m) continue;\r\n const [, itemName, rateStr, stockStr] = m;\r\n const rate = parseFloat(rateStr);\r\n const stock = parseInt(stockStr) || 0;\r\n if (!itemName || isNaN(rate)) continue;\r\n if (!data.items.find(i => i.name.toLowerCase() === itemName.toLowerCase())) {\r\n data.items.push({ id: uid(), name: itemName, rate, stock, editing: false });\r\n count++;\r\n }\r\n }\r\n data.items.sort((a, b) => a.name.localeCompare(b.name));\r\n save();\r\n renderItems();\r\n toast(`Imported ${count} item(s) \u2713`);\r\n } catch(err) { toast('Import failed'); }\r\n };\r\n reader.readAsText(file);\r\n ev.target.value = '';\r\n }\r\n\r\n \/\/ ===== AUTOCOMPLETE =====\r\n function showAutocomplete(value, listId) {\r\n const list = document.getElementById(listId);\r\n const query = value.toLowerCase().trim();\r\n\r\n if (!query) { hideAutocomplete(listId); return; }\r\n\r\n const matches = data.items.filter(item =>\r\n item.name.toLowerCase().includes(query)\r\n ).slice(0, 6);\r\n\r\n if (matches.length === 0) { hideAutocomplete(listId); return; }\r\n\r\n let html = '';\r\n matches.forEach((item, index) => {\r\n const stock = (item.stock !== undefined && item.stock !== null) ? item.stock : 0;\r\n const stockTxt = stock < 0 ? `<span style=\"color:#ff6b8a;font-size:11px;font-weight:700;\">\u26a0 ${stock}<\/span>` :\r\n stock <= 0 ? '<span style=\"color:var(--red);font-size:11px;\">Out of Stock<\/span>' :\r\n stock <= 5 ? `<span style=\"color:var(--orange);font-size:11px;\">Stock: ${stock}<\/span>` :\r\n `<span style=\"color:var(--green);font-size:11px;\">Stock: ${stock}<\/span>`;\r\n html += `<div class=\"autocomplete-item\" data-index=\"${index}\" onclick=\"selectAutocompleteItem('${listId}','${escJs(item.name)}',${item.rate})\">\r\n <div class=\"autocomplete-item-name\">${escHtml(item.name)}<\/div>\r\n <div class=\"autocomplete-item-rate\">\u20b9${item.rate.toFixed(2)} | ${stockTxt}<\/div>\r\n <\/div>`;\r\n });\r\n\r\n list.innerHTML = html;\r\n list.classList.add('show');\r\n autocompleteIndex[listId] = -1;\r\n }\r\n\r\n function hideAutocomplete(listId) {\r\n const list = document.getElementById(listId);\r\n if (list) list.classList.remove('show');\r\n if (autocompleteIndex[listId] !== undefined) autocompleteIndex[listId] = -1;\r\n }\r\n\r\n function selectAutocompleteItem(listId, name, rate) {\r\n if (listId === 'sellAC') {\r\n document.getElementById('orderItemName').value = name;\r\n document.getElementById('orderItemRate').value = rate;\r\n hideAutocomplete(listId);\r\n document.getElementById('orderItemQty').focus();\r\n } else {\r\n document.getElementById('purchaseOrderItemName').value = name;\r\n document.getElementById('purchaseOrderItemRate').value = rate;\r\n hideAutocomplete(listId);\r\n document.getElementById('purchaseOrderItemQty').focus();\r\n }\r\n }\r\n\r\n function handleAutocompleteKey(event, listId) {\r\n const list = document.getElementById(listId);\r\n const items = list.querySelectorAll('.autocomplete-item');\r\n\r\n if (!list.classList.contains('show') || items.length === 0) return;\r\n\r\n if (event.key === 'ArrowDown') {\r\n event.preventDefault();\r\n autocompleteIndex[listId] = Math.min(autocompleteIndex[listId] + 1, items.length - 1);\r\n updateAutocompleteHighlight(items, autocompleteIndex[listId]);\r\n } else if (event.key === 'ArrowUp') {\r\n event.preventDefault();\r\n autocompleteIndex[listId] = Math.max(autocompleteIndex[listId] - 1, -1);\r\n updateAutocompleteHighlight(items, autocompleteIndex[listId]);\r\n } else if (event.key === 'Enter') {\r\n event.preventDefault();\r\n if (autocompleteIndex[listId] >= 0) items[autocompleteIndex[listId]].click();\r\n } else if (event.key === 'Escape') {\r\n hideAutocomplete(listId);\r\n }\r\n }\r\n\r\n function updateAutocompleteHighlight(items, idx) {\r\n items.forEach((item, i) => {\r\n item.style.background = i === idx ? 'var(--purple-light)' : '';\r\n });\r\n }\r\n\r\n \/\/ ===== PURCHASE ORDER =====\r\n function addPurchaseOrderItem() {\r\n const name = document.getElementById('purchaseOrderItemName').value.trim();\r\n const qty = parseFloat(document.getElementById('purchaseOrderItemQty').value);\r\n const rate = parseFloat(document.getElementById('purchaseOrderItemRate').value);\r\n\r\n if (!name) { toast('Enter item name'); return; }\r\n if (!qty || qty <= 0) { toast('Enter valid quantity'); return; }\r\n if (!rate || rate <= 0) { toast('Enter valid rate'); return; }\r\n\r\n \/\/ Auto add item to item list if not exists\r\n let existingItem = data.items.find(i => i.name.toLowerCase() === name.toLowerCase());\r\n if (!existingItem) {\r\n data.items.push({ id: uid(), name, rate, stock: 0, editing: false });\r\n data.items.sort((a, b) => a.name.localeCompare(b.name));\r\n } else {\r\n \/\/ Update rate if changed\r\n existingItem.rate = rate;\r\n }\r\n\r\n currentPurchaseOrderItems.push({ id: uid(), name, qty, rate });\r\n\r\n document.getElementById('purchaseOrderItemName').value = '';\r\n document.getElementById('purchaseOrderItemQty').value = '';\r\n document.getElementById('purchaseOrderItemRate').value = '';\r\n\r\n hideAutocomplete('purchaseAC');\r\n save();\r\n renderCurrentPurchaseOrderItems();\r\n document.getElementById('purchaseOrderItemName').focus();\r\n }\r\n\r\n function removePurchaseOrderItem(id) {\r\n currentPurchaseOrderItems = currentPurchaseOrderItems.filter(i => i.id !== id);\r\n renderCurrentPurchaseOrderItems();\r\n }\r\n\r\n function renderCurrentPurchaseOrderItems() {\r\n const wrap = document.getElementById('currentPurchaseOrderItems');\r\n if (currentPurchaseOrderItems.length === 0) { wrap.innerHTML = ''; return; }\r\n\r\n let total = 0;\r\n let html = '<div style=\"background: var(--purple-light); padding: 14px; border-radius: 10px;\">';\r\n html += '<div style=\"font-size: 11px; font-weight: 600; color: var(--text-light); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.6px;\">Current Purchase Items<\/div>';\r\n\r\n currentPurchaseOrderItems.forEach(item => {\r\n const itemTotal = item.qty * item.rate;\r\n total += itemTotal;\r\n html += `<div style=\"display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(108,99,255,0.2);\">\r\n <div style=\"flex: 1;\">\r\n <div style=\"font-weight: 500; color: var(--text);\">${escHtml(item.name)}<\/div>\r\n <div style=\"font-size: 12px; color: var(--text-light);\">${item.qty} \u00d7 \u20b9${item.rate.toFixed(2)}<\/div>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <div style=\"font-weight: 600; color: var(--purple);\">\u20b9${itemTotal.toFixed(2)}<\/div>\r\n <button class=\"btn btn-red-light btn-sm\" onclick=\"removePurchaseOrderItem(${item.id})\">\u2715<\/button>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n\r\n html += `<div style=\"margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--purple); display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"font-weight: 600; color: var(--text);\">Total Amount:<\/div>\r\n <div style=\"font-size: 18px; font-weight: 700; color: var(--purple);\">\u20b9${total.toFixed(2)}<\/div>\r\n <\/div><\/div>`;\r\n\r\n wrap.innerHTML = html;\r\n }\r\n\r\n function savePurchaseOrder() {\r\n const partyId = document.getElementById('purchaseOrderPartySelect').value;\r\n const date = document.getElementById('purchaseOrderDate').value;\r\n const attender = document.getElementById('purchaseAttenderName').value.trim();\r\n\r\n if (!partyId) { toast('Select a party'); return; }\r\n if (!date) { toast('Select a date'); return; }\r\n if (currentPurchaseOrderItems.length === 0) { toast('Add at least one item'); return; }\r\n\r\n const party = data.parties.find(p => p.id == partyId);\r\n\r\n const order = {\r\n id: uid(),\r\n partyId: party.id,\r\n partyName: party.name,\r\n partyPhone: party.phone,\r\n date: date,\r\n attender: attender,\r\n items: [...currentPurchaseOrderItems],\r\n timestamp: new Date().toISOString()\r\n };\r\n\r\n data.purchaseOrders.push(order);\r\n\r\n \/\/ \u2705 ADD STOCK: Purchase increases stock\r\n currentPurchaseOrderItems.forEach(orderItem => {\r\n const item = data.items.find(i => i.name.toLowerCase() === orderItem.name.toLowerCase());\r\n if (item) {\r\n item.stock = (item.stock || 0) + orderItem.qty;\r\n }\r\n });\r\n\r\n currentPurchaseOrderItems = [];\r\n document.getElementById('purchaseOrderPartySelect').value = '';\r\n document.getElementById('purchaseOrderDate').value = new Date().toISOString().split('T')[0];\r\n document.getElementById('purchaseAttenderName').value = '';\r\n renderCurrentPurchaseOrderItems();\r\n\r\n save();\r\n renderPurchaseOrders();\r\n toast('Purchase order saved! Stock updated \u2713');\r\n }\r\n\r\n function deletePurchaseOrder(id) {\r\n const order = data.purchaseOrders.find(o => o.id === id);\r\n if (!order) return;\r\n if (!confirm('Delete this purchase order? Stock will be reversed.')) return;\r\n\r\n \/\/ Reverse stock\r\n order.items.forEach(orderItem => {\r\n const item = data.items.find(i => i.name.toLowerCase() === orderItem.name.toLowerCase());\r\n if (item) {\r\n item.stock = (item.stock || 0) - orderItem.qty;\r\n }\r\n });\r\n\r\n data.purchaseOrders = data.purchaseOrders.filter(o => o.id !== id);\r\n save();\r\n renderPurchaseOrders();\r\n toast('Purchase order deleted');\r\n }\r\n\r\n function editPurchaseOrder(id) {\r\n const order = data.purchaseOrders.find(o => o.id === id);\r\n if (!order) return;\r\n\r\n \/\/ Reverse stock first\r\n order.items.forEach(orderItem => {\r\n const item = data.items.find(i => i.name.toLowerCase() === orderItem.name.toLowerCase());\r\n if (item) item.stock = (item.stock || 0) - orderItem.qty;\r\n });\r\n\r\n document.getElementById('purchaseOrderPartySelect').value = order.partyId;\r\n document.getElementById('purchaseOrderDate').value = order.date;\r\n document.getElementById('purchaseAttenderName').value = order.attender || '';\r\n currentPurchaseOrderItems = [...order.items];\r\n\r\n renderCurrentPurchaseOrderItems();\r\n data.purchaseOrders = data.purchaseOrders.filter(o => o.id !== id);\r\n save();\r\n renderPurchaseOrders();\r\n toast('Purchase order loaded for editing');\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n function getPurchaseFiltered() {\r\n const fromDate = document.getElementById('pFilterFromDate').value;\r\n const toDate = document.getElementById('pFilterToDate').value;\r\n const partyId = document.getElementById('pFilterParty').value;\r\n\r\n return data.purchaseOrders.filter(order => {\r\n if (fromDate && order.date < fromDate) return false;\r\n if (toDate && order.date > toDate) return false;\r\n if (partyId && order.partyId != partyId) return false;\r\n return true;\r\n });\r\n }\r\n\r\n function applyPurchaseFilters() { purchaseCurrentPage = 1; renderPurchaseOrders(); }\r\n function clearPurchaseFilters() {\r\n document.getElementById('pFilterFromDate').value = '';\r\n document.getElementById('pFilterToDate').value = '';\r\n document.getElementById('pFilterParty').value = '';\r\n purchaseCurrentPage = 1;\r\n renderPurchaseOrders();\r\n }\r\n\r\n function changePurchaseEntriesPerPage() {\r\n const value = document.getElementById('pEntriesPerPage').value;\r\n purchaseEntriesPerPage = value === 'all' ? 'all' : parseInt(value);\r\n purchaseCurrentPage = 1;\r\n renderPurchaseOrders();\r\n }\r\n\r\n function changePurchasePage(page) {\r\n purchaseCurrentPage = page;\r\n renderPurchaseOrders();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n function togglePurchaseOrderItems(orderId) {\r\n const list = document.getElementById('po-items-' + orderId);\r\n const toggle = document.getElementById('po-toggle-' + orderId);\r\n if (list.classList.contains('open')) {\r\n list.classList.remove('open');\r\n toggle.textContent = 'Show Items \u25bc';\r\n } else {\r\n list.classList.add('open');\r\n toggle.textContent = 'Hide Items \u25b2';\r\n }\r\n }\r\n\r\n function renderPurchaseOrders() {\r\n const wrap = document.getElementById('purchaseOrdersWrap');\r\n const filtered = getPurchaseFiltered();\r\n\r\n if (filtered.length === 0) {\r\n wrap.innerHTML = `<div class=\"empty\"><div class=\"empty-icon\">\ud83d\uded2<\/div><p>No purchase orders yet. Create your first purchase order!<\/p><\/div>`;\r\n document.getElementById('purchaseOrderSummary').style.display = 'none';\r\n document.getElementById('pPaginationControls').style.display = 'none';\r\n document.getElementById('pPaginationInfo').textContent = '';\r\n return;\r\n }\r\n\r\n filtered.sort((a, b) => new Date(b.date) - new Date(a.date));\r\n\r\n const total = filtered.length;\r\n let startIndex = 0, endIndex = total, totalPages = 1;\r\n\r\n if (purchaseEntriesPerPage !== 'all') {\r\n totalPages = Math.ceil(total \/ purchaseEntriesPerPage);\r\n if (purchaseCurrentPage > totalPages) purchaseCurrentPage = totalPages;\r\n startIndex = (purchaseCurrentPage - 1) * purchaseEntriesPerPage;\r\n endIndex = Math.min(startIndex + purchaseEntriesPerPage, total);\r\n }\r\n\r\n const paginated = filtered.slice(startIndex, endIndex);\r\n\r\n document.getElementById('pPaginationInfo').textContent =\r\n purchaseEntriesPerPage === 'all' ? `Showing all ${total} entries` :\r\n `Showing ${startIndex + 1} to ${endIndex} of ${total} entries`;\r\n\r\n let html = '';\r\n paginated.forEach(order => {\r\n let orderTotal = 0;\r\n order.items.forEach(item => orderTotal += item.qty * item.rate);\r\n\r\n const dateObj = new Date(order.date + 'T00:00:00');\r\n const dateStr = dateObj.toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' });\r\n\r\n html += `<div class=\"order-card\" style=\"border-color: var(--purple); border-width: 1px;\">\r\n <div class=\"order-header\">\r\n <div class=\"order-info\">\r\n <h3 style=\"color: var(--purple);\">\ud83d\uded2 ${escHtml(order.partyName)}<\/h3>\r\n <div class=\"order-meta\">\r\n <span>\ud83d\udcc5 ${dateStr}<\/span>\r\n ${order.attender ? `<span>\ud83d\udc64 ${order.attender}<\/span>` : ''}\r\n <span>\ud83d\udcf1 ${order.partyPhone}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"order-actions\">\r\n <button class=\"btn btn-blue-light btn-sm\" onclick=\"editPurchaseOrder(${order.id})\">Edit<\/button>\r\n <button class=\"btn btn-red-light btn-sm\" onclick=\"deletePurchaseOrder(${order.id})\">Delete<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"order-items-compact\">\r\n <div class=\"order-items-header\" onclick=\"togglePurchaseOrderItems(${order.id})\">\r\n <div class=\"order-items-summary\">\r\n <span><strong>${order.items.length}<\/strong> item${order.items.length > 1 ? 's' : ''}<\/span>\r\n <\/div>\r\n <div class=\"order-items-toggle\" id=\"po-toggle-${order.id}\">Show Items \u25bc<\/div>\r\n <\/div>\r\n <div class=\"order-items-list\" id=\"po-items-${order.id}\">`;\r\n\r\n order.items.forEach(item => {\r\n const itemTotal = item.qty * item.rate;\r\n html += `<div class=\"order-item\">\r\n <div class=\"order-item-left\">\r\n <span class=\"order-item-name\">${escHtml(item.name)}<\/span>\r\n <span class=\"order-item-calc\">${item.qty} \u00d7 \u20b9${item.rate.toFixed(2)}<\/span>\r\n <\/div>\r\n <span class=\"order-item-total\">\u20b9${itemTotal.toFixed(2)}<\/span>\r\n <\/div>`;\r\n });\r\n\r\n html += `<\/div><\/div>\r\n <div class=\"order-footer\">\r\n <div class=\"order-grand-total\" style=\"color: var(--purple);\">Total: \u20b9${orderTotal.toFixed(2)}<\/div>\r\n <button class=\"btn btn-green btn-sm\" onclick=\"sendPurchaseOrderWhatsApp(${order.id})\">\ud83d\udcf1 Send<\/button>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n\r\n wrap.innerHTML = html;\r\n\r\n \/\/ Pagination controls\r\n if (purchaseEntriesPerPage !== 'all' && totalPages > 1) {\r\n let pHtml = '';\r\n if (purchaseCurrentPage > 1) pHtml += `<button class=\"btn btn-sm\" style=\"background:var(--purple);color:white;\" onclick=\"changePurchasePage(${purchaseCurrentPage - 1})\">\u25c0 Prev<\/button>`;\r\n for (let i = 1; i <= totalPages; i++) {\r\n if (i === purchaseCurrentPage) pHtml += `<button class=\"btn btn-sm\" style=\"background:var(--purple);color:white;\">${i}<\/button>`;\r\n else if (i === 1 || i === totalPages || Math.abs(i - purchaseCurrentPage) <= 1) pHtml += `<button class=\"btn btn-sm\" style=\"background:var(--border);color:var(--text);\" onclick=\"changePurchasePage(${i})\">${i}<\/button>`;\r\n else if (Math.abs(i - purchaseCurrentPage) === 2) pHtml += `<span style=\"padding:0 8px;color:var(--text-light);\">...<\/span>`;\r\n }\r\n if (purchaseCurrentPage < totalPages) pHtml += `<button class=\"btn btn-sm\" style=\"background:var(--purple);color:white;\" onclick=\"changePurchasePage(${purchaseCurrentPage + 1})\">Next \u25b6<\/button>`;\r\n document.getElementById('pPaginationControls').innerHTML = pHtml;\r\n document.getElementById('pPaginationControls').style.display = 'flex';\r\n } else {\r\n document.getElementById('pPaginationControls').style.display = 'none';\r\n }\r\n\r\n updatePurchaseSummary(filtered);\r\n }\r\n\r\n function updatePurchaseSummary(orders) {\r\n const summary = document.getElementById('purchaseOrderSummary');\r\n const summaryText = document.getElementById('purchaseSummaryText');\r\n if (orders.length === 0) { summary.style.display = 'none'; return; }\r\n\r\n let grandTotal = 0;\r\n orders.forEach(order => order.items.forEach(item => grandTotal += item.qty * item.rate));\r\n\r\n let text = `<div style=\"font-size: 14px; color: var(--text);\">`;\r\n text += `<strong>${orders.length}<\/strong> purchase order${orders.length > 1 ? 's' : ''}<\/div>`;\r\n text += `<div style=\"font-size: 18px; font-weight: 700; color: var(--purple); margin-top: 4px;\">Total: \u20b9${grandTotal.toFixed(2)}<\/div>`;\r\n\r\n summaryText.innerHTML = text;\r\n summary.style.display = 'flex';\r\n }\r\n\r\n function sendPurchaseOrderWhatsApp(orderId) {\r\n const order = data.purchaseOrders.find(o => o.id === orderId);\r\n if (!order) return;\r\n\r\n const dateStr = new Date(order.date + 'T00:00:00').toLocaleDateString('en-IN', { day: 'numeric', month: 'long', year: 'numeric' });\r\n\r\n let msg = `\ud83d\udcc5 *${dateStr}*\\n\ud83d\uded2 *Purchase from: ${order.partyName}*\\n\\n`;\r\n let orderTotal = 0;\r\n order.items.forEach(item => {\r\n const t = item.qty * item.rate;\r\n orderTotal += t;\r\n msg += `\u2022 ${item.name} - ${item.qty} x Rs${item.rate.toFixed(2)} = Rs${t.toFixed(2)}\\n\\n`;\r\n });\r\n msg += `\ud83d\udcb0 *Total: Rs${orderTotal.toFixed(2)}*`;\r\n\r\n window.open(`https:\/\/wa.me\/${order.partyPhone}?text=${encodeURIComponent(msg)}`, '_blank');\r\n }\r\n\r\n function sendPurchaseFilteredWhatsApp() {\r\n const filtered = getPurchaseFiltered();\r\n if (filtered.length === 0) { toast('No orders to send'); return; }\r\n\r\n let msg = `\ud83d\udcca *PURCHASE SUMMARY*\\n\\n`;\r\n const itemMap = {};\r\n let grandTotal = 0;\r\n\r\n filtered.forEach(order => {\r\n order.items.forEach(item => {\r\n if (!itemMap[item.name]) itemMap[item.name] = { qty: 0, total: 0 };\r\n itemMap[item.name].qty += item.qty;\r\n itemMap[item.name].total += item.qty * item.rate;\r\n grandTotal += item.qty * item.rate;\r\n });\r\n });\r\n\r\n Object.keys(itemMap).sort().forEach(n => {\r\n msg += `\u2022 ${n} - Qty: ${itemMap[n].qty} | Rs${itemMap[n].total.toFixed(2)}\\n\\n`;\r\n });\r\n\r\n msg += `\ud83d\udce6 ${filtered.length} Orders | \ud83d\udcb0 *Total: Rs${grandTotal.toFixed(2)}*`;\r\n window.open('https:\/\/wa.me\/?text=' + encodeURIComponent(msg), '_blank');\r\n }\r\n\r\n function exportPurchaseOrders() {\r\n let csv = 'Date,Party,Attender,Item,Qty,Rate,Total\\n';\r\n data.purchaseOrders.forEach(o => {\r\n o.items.forEach(item => {\r\n csv += `\"${o.date}\",\"${o.partyName}\",\"${o.attender || ''}\",\"${item.name}\",${item.qty},${item.rate},${item.qty * item.rate}\\n`;\r\n });\r\n });\r\n download(csv, `Purchase_Orders_${today()}.csv`, 'text\/csv');\r\n }\r\n\r\n \/\/ ===== SELL ORDER =====\r\n function addOrderItem() {\r\n const name = document.getElementById('orderItemName').value.trim();\r\n const qty = parseFloat(document.getElementById('orderItemQty').value);\r\n const rate = parseFloat(document.getElementById('orderItemRate').value);\r\n\r\n if (!name) { toast('Enter item name'); return; }\r\n if (!qty || qty <= 0) { toast('Enter valid quantity'); return; }\r\n if (!rate || rate <= 0) { toast('Enter valid rate'); return; }\r\n\r\n \/\/ Auto add item if not exists\r\n const existingItem = data.items.find(i => i.name.toLowerCase() === name.toLowerCase());\r\n if (!existingItem) {\r\n data.items.push({ id: uid(), name, rate, stock: 0, editing: false });\r\n data.items.sort((a, b) => a.name.localeCompare(b.name));\r\n }\r\n\r\n currentOrderItems.push({ id: uid(), name, qty, rate });\r\n\r\n document.getElementById('orderItemName').value = '';\r\n document.getElementById('orderItemQty').value = '';\r\n document.getElementById('orderItemRate').value = '';\r\n\r\n hideAutocomplete('sellAC');\r\n save();\r\n renderCurrentOrderItems();\r\n document.getElementById('orderItemName').focus();\r\n }\r\n\r\n function removeOrderItem(id) {\r\n currentOrderItems = currentOrderItems.filter(i => i.id !== id);\r\n renderCurrentOrderItems();\r\n }\r\n\r\n function renderCurrentOrderItems() {\r\n const wrap = document.getElementById('currentOrderItems');\r\n if (currentOrderItems.length === 0) { wrap.innerHTML = ''; return; }\r\n\r\n let total = 0;\r\n let html = '<div style=\"background: var(--green-light); padding: 14px; border-radius: 10px;\">';\r\n html += '<div style=\"font-size: 11px; font-weight: 600; color: #128C7E; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.6px;\">Current Sell Items<\/div>';\r\n\r\n currentOrderItems.forEach(item => {\r\n const itemTotal = item.qty * item.rate;\r\n total += itemTotal;\r\n html += `<div style=\"display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(37,211,102,0.3);\">\r\n <div style=\"flex: 1;\">\r\n <div style=\"font-weight: 500; color: var(--text);\">${escHtml(item.name)}<\/div>\r\n <div style=\"font-size: 12px; color: var(--text-light);\">${item.qty} \u00d7 \u20b9${item.rate.toFixed(2)}<\/div>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <div style=\"font-weight: 600; color: var(--green);\">\u20b9${itemTotal.toFixed(2)}<\/div>\r\n <button class=\"btn btn-red-light btn-sm\" onclick=\"removeOrderItem(${item.id})\">\u2715<\/button>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n\r\n html += `<div style=\"margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--green); display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"font-weight: 600; color: var(--text);\">Total Amount:<\/div>\r\n <div style=\"font-size: 18px; font-weight: 700; color: var(--green);\">\u20b9${total.toFixed(2)}<\/div>\r\n <\/div><\/div>`;\r\n\r\n wrap.innerHTML = html;\r\n }\r\n\r\n function saveOrder() {\r\n const partyId = document.getElementById('orderPartySelect').value;\r\n const date = document.getElementById('orderDate').value;\r\n const attender = document.getElementById('attenderName').value.trim();\r\n\r\n if (!partyId) { toast('Select a party'); return; }\r\n if (!date) { toast('Select a date'); return; }\r\n if (currentOrderItems.length === 0) { toast('Add at least one item'); return; }\r\n\r\n const party = data.parties.find(p => p.id == partyId);\r\n\r\n const order = {\r\n id: uid(),\r\n partyId: party.id,\r\n partyName: party.name,\r\n partyPhone: party.phone,\r\n date,\r\n attender,\r\n items: [...currentOrderItems],\r\n timestamp: new Date().toISOString()\r\n };\r\n\r\n data.sellOrders.push(order);\r\n\r\n \/\/ \u2705 DEDUCT STOCK: Selling decreases stock\r\n currentOrderItems.forEach(orderItem => {\r\n const item = data.items.find(i => i.name.toLowerCase() === orderItem.name.toLowerCase());\r\n if (item) {\r\n item.stock = (item.stock || 0) - orderItem.qty;\r\n }\r\n });\r\n\r\n currentOrderItems = [];\r\n document.getElementById('orderPartySelect').value = '';\r\n document.getElementById('orderDate').value = new Date().toISOString().split('T')[0];\r\n document.getElementById('attenderName').value = '';\r\n renderCurrentOrderItems();\r\n\r\n save();\r\n renderOrders();\r\n toast('Sell order saved! Stock updated \u2713');\r\n }\r\n\r\n function deleteOrder(id) {\r\n const order = data.sellOrders.find(o => o.id === id);\r\n if (!order) return;\r\n if (!confirm('Delete this sell order? Stock will be reversed.')) return;\r\n\r\n \/\/ Reverse stock deduction\r\n order.items.forEach(orderItem => {\r\n const item = data.items.find(i => i.name.toLowerCase() === orderItem.name.toLowerCase());\r\n if (item) item.stock = (item.stock || 0) + orderItem.qty;\r\n });\r\n\r\n data.sellOrders = data.sellOrders.filter(o => o.id !== id);\r\n save();\r\n renderOrders();\r\n toast('Sell order deleted');\r\n }\r\n\r\n function editOrder(id) {\r\n const order = data.sellOrders.find(o => o.id === id);\r\n if (!order) return;\r\n\r\n \/\/ Reverse stock\r\n order.items.forEach(orderItem => {\r\n const item = data.items.find(i => i.name.toLowerCase() === orderItem.name.toLowerCase());\r\n if (item) item.stock = (item.stock || 0) + orderItem.qty;\r\n });\r\n\r\n document.getElementById('orderPartySelect').value = order.partyId;\r\n document.getElementById('orderDate').value = order.date;\r\n document.getElementById('attenderName').value = order.attender || '';\r\n currentOrderItems = [...order.items];\r\n\r\n renderCurrentOrderItems();\r\n data.sellOrders = data.sellOrders.filter(o => o.id !== id);\r\n save();\r\n renderOrders();\r\n toast('Order loaded for editing');\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n function applyFilters() { currentPage = 1; renderOrders(); }\r\n\r\n function clearFilters() {\r\n document.getElementById('filterFromDate').value = '';\r\n document.getElementById('filterToDate').value = '';\r\n document.getElementById('filterParty').value = '';\r\n document.getElementById('filterAttender').value = '';\r\n currentPage = 1;\r\n renderOrders();\r\n }\r\n\r\n function changeEntriesPerPage() {\r\n const value = document.getElementById('entriesPerPage').value;\r\n entriesPerPage = value === 'all' ? 'all' : parseInt(value);\r\n currentPage = 1;\r\n renderOrders();\r\n }\r\n\r\n function changePage(page) {\r\n currentPage = page;\r\n renderOrders();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n function toggleOrderItems(orderId) {\r\n const list = document.getElementById('items-' + orderId);\r\n const toggle = document.getElementById('toggle-' + orderId);\r\n if (list.classList.contains('open')) {\r\n list.classList.remove('open');\r\n toggle.textContent = 'Show Items \u25bc';\r\n } else {\r\n list.classList.add('open');\r\n toggle.textContent = 'Hide Items \u25b2';\r\n }\r\n }\r\n\r\n function getFilteredOrders() {\r\n const fromDate = document.getElementById('filterFromDate').value;\r\n const toDate = document.getElementById('filterToDate').value;\r\n const partyId = document.getElementById('filterParty').value;\r\n const attender = document.getElementById('filterAttender').value.toLowerCase().trim();\r\n\r\n return data.sellOrders.filter(order => {\r\n if (fromDate && order.date < fromDate) return false;\r\n if (toDate && order.date > toDate) return false;\r\n if (partyId && order.partyId != partyId) return false;\r\n if (attender && (!order.attender || !order.attender.toLowerCase().includes(attender))) return false;\r\n return true;\r\n });\r\n }\r\n\r\n function renderOrders() {\r\n const wrap = document.getElementById('ordersWrap');\r\n const filtered = getFilteredOrders();\r\n\r\n if (filtered.length === 0) {\r\n wrap.innerHTML = `<div class=\"empty\"><div class=\"empty-icon\">\ud83d\udcb0<\/div><p>No sell orders found. Create your first sell order!<\/p><\/div>`;\r\n document.getElementById('orderSummary').style.display = 'none';\r\n document.getElementById('paginationControls').style.display = 'none';\r\n document.getElementById('paginationInfo').textContent = '';\r\n return;\r\n }\r\n\r\n filtered.sort((a, b) => new Date(b.date) - new Date(a.date));\r\n\r\n const total = filtered.length;\r\n let startIndex = 0, endIndex = total, totalPages = 1;\r\n\r\n if (entriesPerPage !== 'all') {\r\n totalPages = Math.ceil(total \/ entriesPerPage);\r\n if (currentPage > totalPages) currentPage = totalPages;\r\n startIndex = (currentPage - 1) * entriesPerPage;\r\n endIndex = Math.min(startIndex + entriesPerPage, total);\r\n }\r\n\r\n const paginated = filtered.slice(startIndex, endIndex);\r\n\r\n document.getElementById('paginationInfo').textContent =\r\n entriesPerPage === 'all' ? `Showing all ${total} entries` :\r\n `Showing ${startIndex + 1} to ${endIndex} of ${total} entries`;\r\n\r\n let html = '';\r\n paginated.forEach(order => {\r\n let orderTotal = 0;\r\n order.items.forEach(item => orderTotal += item.qty * item.rate);\r\n\r\n const dateStr = new Date(order.date + 'T00:00:00').toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' });\r\n const sentClass = order.sent ? 'sent' : '';\r\n const sentIndicator = order.sent ? '<div class=\"sent-indicator\"><\/div>' : '';\r\n const sentBadge = order.sent ? '<span class=\"sent-badge\">\u2713 Sent<\/span>' : '';\r\n\r\n html += `<div class=\"order-card ${sentClass}\">\r\n ${sentIndicator}\r\n <div class=\"order-header\">\r\n <div class=\"order-info\">\r\n <h3>${escHtml(order.partyName)}${sentBadge}<\/h3>\r\n <div class=\"order-meta\">\r\n <span>\ud83d\udcc5 ${dateStr}<\/span>\r\n ${order.attender ? `<span>\ud83d\udc64 ${order.attender}<\/span>` : ''}\r\n <span>\ud83d\udcf1 ${order.partyPhone}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"order-actions\">\r\n <button class=\"btn btn-blue-light btn-sm\" onclick=\"editOrder(${order.id})\">Edit<\/button>\r\n <button class=\"btn btn-red-light btn-sm\" onclick=\"deleteOrder(${order.id})\">Delete<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"order-items-compact\">\r\n <div class=\"order-items-header\" onclick=\"toggleOrderItems(${order.id})\">\r\n <div class=\"order-items-summary\">\r\n <span><strong>${order.items.length}<\/strong> item${order.items.length > 1 ? 's' : ''}<\/span>\r\n <\/div>\r\n <div class=\"order-items-toggle\" id=\"toggle-${order.id}\">Show Items \u25bc<\/div>\r\n <\/div>\r\n <div class=\"order-items-list\" id=\"items-${order.id}\">`;\r\n\r\n order.items.forEach(item => {\r\n const itemTotal = item.qty * item.rate;\r\n html += `<div class=\"order-item\">\r\n <div class=\"order-item-left\">\r\n <span class=\"order-item-name\">${escHtml(item.name)}<\/span>\r\n <span class=\"order-item-calc\">${item.qty} \u00d7 \u20b9${item.rate.toFixed(2)}<\/span>\r\n <\/div>\r\n <span class=\"order-item-total\">\u20b9${itemTotal.toFixed(2)}<\/span>\r\n <\/div>`;\r\n });\r\n\r\n html += `<\/div><\/div>\r\n <div class=\"order-footer\">\r\n <div class=\"order-grand-total\">Total: \u20b9${orderTotal.toFixed(2)}<\/div>\r\n <button class=\"btn btn-green btn-sm\" onclick=\"sendOrderWhatsApp(${order.id})\">\ud83d\udcf1 Send<\/button>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n\r\n wrap.innerHTML = html;\r\n\r\n \/\/ Pagination\r\n if (entriesPerPage !== 'all' && totalPages > 1) {\r\n let pHtml = '';\r\n if (currentPage > 1) pHtml += `<button class=\"btn btn-sm\" style=\"background:var(--purple);color:white;\" onclick=\"changePage(${currentPage - 1})\">\u25c0 Prev<\/button>`;\r\n for (let i = 1; i <= totalPages; i++) {\r\n if (i === currentPage) pHtml += `<button class=\"btn btn-sm\" style=\"background:var(--purple);color:white;\">${i}<\/button>`;\r\n else if (i === 1 || i === totalPages || Math.abs(i - currentPage) <= 1) pHtml += `<button class=\"btn btn-sm\" style=\"background:var(--border);color:var(--text);\" onclick=\"changePage(${i})\">${i}<\/button>`;\r\n else if (Math.abs(i - currentPage) === 2) pHtml += `<span style=\"padding:0 8px;color:var(--text-light);\">...<\/span>`;\r\n }\r\n if (currentPage < totalPages) pHtml += `<button class=\"btn btn-sm\" style=\"background:var(--purple);color:white;\" onclick=\"changePage(${currentPage + 1})\">Next \u25b6<\/button>`;\r\n document.getElementById('paginationControls').innerHTML = pHtml;\r\n document.getElementById('paginationControls').style.display = 'flex';\r\n } else {\r\n document.getElementById('paginationControls').style.display = 'none';\r\n }\r\n\r\n updateFilterSummary(filtered);\r\n }\r\n\r\n function updateFilterSummary(orders) {\r\n const summary = document.getElementById('orderSummary');\r\n const summaryText = document.getElementById('summaryText');\r\n if (orders.length === 0) { summary.style.display = 'none'; return; }\r\n\r\n const itemMap = {};\r\n let grandTotal = 0;\r\n\r\n orders.forEach(order => {\r\n order.items.forEach(item => {\r\n if (!itemMap[item.name]) itemMap[item.name] = { qty: 0, total: 0 };\r\n itemMap[item.name].qty += item.qty;\r\n itemMap[item.name].total += item.qty * item.rate;\r\n grandTotal += item.qty * item.rate;\r\n });\r\n });\r\n\r\n const itemCount = Object.keys(itemMap).length;\r\n let text = `<div style=\"font-size: 14px; color: var(--text);\">`;\r\n text += `<strong>${orders.length}<\/strong> sell order${orders.length > 1 ? 's' : ''} | `;\r\n text += `<strong>${itemCount}<\/strong> unique item${itemCount > 1 ? 's' : ''}<\/div>`;\r\n text += `<div style=\"font-size: 18px; font-weight: 700; color: var(--green); margin-top: 4px;\">Total: \u20b9${grandTotal.toFixed(2)}<\/div>`;\r\n\r\n summaryText.innerHTML = text;\r\n summary.style.display = 'flex';\r\n }\r\n\r\n function sendOrderWhatsApp(orderId) {\r\n const order = data.sellOrders.find(o => o.id === orderId);\r\n if (!order) return;\r\n\r\n const dateStr = new Date(order.date + 'T00:00:00').toLocaleDateString('en-IN', { day: 'numeric', month: 'long', year: 'numeric' });\r\n\r\n let msg = `\ud83d\udcc5 *${dateStr}*\\n\ud83c\udfea *${order.partyName}*\\n\\n`;\r\n let orderTotal = 0;\r\n order.items.forEach(item => {\r\n const t = item.qty * item.rate;\r\n orderTotal += t;\r\n msg += `\u2022 ${item.name} - ${item.qty} x Rs${item.rate.toFixed(2)} = Rs${t.toFixed(2)}\\n\\n`;\r\n });\r\n msg += `\ud83d\udcb0 *Total: Rs${orderTotal.toFixed(2)}*`;\r\n\r\n order.sent = true;\r\n order.sentAt = new Date().toISOString();\r\n save();\r\n renderOrders();\r\n\r\n window.open(`https:\/\/wa.me\/${order.partyPhone}?text=${encodeURIComponent(msg)}`, '_blank');\r\n }\r\n\r\n function sendFilteredOrdersWhatsApp() {\r\n const filtered = getFilteredOrders();\r\n if (filtered.length === 0) { toast('No orders to send'); return; }\r\n\r\n const fromDate = document.getElementById('filterFromDate').value;\r\n const toDate = document.getElementById('filterToDate').value;\r\n\r\n let msg = `\ud83d\udcca *SELL SUMMARY*\\n`;\r\n if (fromDate || toDate) {\r\n msg += `\ud83d\udcc5 `;\r\n if (fromDate) msg += new Date(fromDate + 'T00:00:00').toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' });\r\n msg += ` to `;\r\n if (toDate) msg += new Date(toDate + 'T00:00:00').toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' });\r\n else msg += `Today`;\r\n msg += `\\n`;\r\n }\r\n msg += `\\n`;\r\n\r\n const itemMap = {};\r\n let grandTotal = 0;\r\n\r\n filtered.forEach(order => {\r\n order.items.forEach(item => {\r\n if (!itemMap[item.name]) itemMap[item.name] = { qty: 0, total: 0 };\r\n itemMap[item.name].qty += item.qty;\r\n itemMap[item.name].total += item.qty * item.rate;\r\n grandTotal += item.qty * item.rate;\r\n });\r\n });\r\n\r\n Object.keys(itemMap).sort().forEach(n => {\r\n msg += `\u2022 ${n} - Qty: ${itemMap[n].qty} | Rs${itemMap[n].total.toFixed(2)}\\n\\n`;\r\n });\r\n\r\n msg += `\ud83d\udce6 ${filtered.length} Orders | \ud83d\udcb0 *Total: Rs${grandTotal.toFixed(2)}*`;\r\n window.open('https:\/\/wa.me\/?text=' + encodeURIComponent(msg), '_blank');\r\n }\r\n\r\n \/\/ ===== EXPORT PARTIES =====\r\n function exportParties() {\r\n let csv = 'Party Name,WhatsApp Number\\n';\r\n data.parties.forEach(p => { csv += `\"${p.name}\",\"${p.phone}\"\\n`; });\r\n download(csv, `Parties_${today()}.csv`, 'text\/csv');\r\n toast('Parties exported \u2713');\r\n }\r\n\r\n function importParties(ev) {\r\n const file = ev.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n try {\r\n const lines = e.target.result.split('\\n');\r\n let count = 0;\r\n for (let i = 1; i < lines.length; i++) {\r\n const line = lines[i].trim();\r\n if (!line) continue;\r\n const m = line.match(\/^\"([^\"]*)\",\"([^\"]*)\"$\/);\r\n if (!m) continue;\r\n const [, partyName, phone] = m;\r\n if (!partyName || !phone) continue;\r\n if (!data.parties.find(p => p.name.toLowerCase() === partyName.toLowerCase())) {\r\n data.parties.push({ id: uid(), name: partyName, phone, editing: false });\r\n count++;\r\n }\r\n }\r\n syncPartyDropdowns();\r\n save();\r\n renderPartiesList();\r\n renderPurchasePartiesList();\r\n toast(`Imported ${count} partie(s) \u2713`);\r\n } catch(err) { toast('Import failed'); }\r\n };\r\n reader.readAsText(file);\r\n ev.target.value = '';\r\n }\r\n\r\n \/\/ ===== EXPORT\/IMPORT ALL DATA =====\r\n function exportAllData() {\r\n const allData = {\r\n items: data.items,\r\n parties: data.parties,\r\n purchaseOrders: data.purchaseOrders,\r\n sellOrders: data.sellOrders,\r\n exportDate: new Date().toISOString(),\r\n version: '2.0'\r\n };\r\n download(JSON.stringify(allData, null, 2), `OrderManager_Backup_${today()}.json`, 'application\/json');\r\n toast('Complete database exported \u2713');\r\n }\r\n\r\n function importAllData(ev) {\r\n const file = ev.target.files[0];\r\n if (!file) return;\r\n\r\n if (!confirm('\u26a0\ufe0f WARNING: This will replace ALL current data. Continue?')) {\r\n ev.target.value = ''; return;\r\n }\r\n\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n try {\r\n const imported = JSON.parse(e.target.result);\r\n if (imported.items) data.items = imported.items;\r\n if (imported.parties) data.parties = imported.parties;\r\n if (imported.purchaseOrders) data.purchaseOrders = imported.purchaseOrders;\r\n if (imported.sellOrders) data.sellOrders = imported.sellOrders;\r\n \/\/ Migrate v1\r\n if (imported.orders) data.sellOrders = imported.orders;\r\n\r\n syncPartyDropdowns();\r\n save();\r\n\r\n if (mode === 'purchase') renderPurchaseOrders();\r\n else if (mode === 'items') renderItems();\r\n else { renderPartiesList(); renderOrders(); }\r\n\r\n toast('Complete database imported \u2713');\r\n } catch(err) { toast('Import failed - Invalid file format'); }\r\n };\r\n reader.readAsText(file);\r\n ev.target.value = '';\r\n }\r\n\r\n \/\/ ===== UTILS =====\r\n function download(content, filename, type) {\r\n const a = document.createElement('a');\r\n a.href = URL.createObjectURL(new Blob([content], { type }));\r\n a.download = filename;\r\n a.click();\r\n }\r\n\r\n function today() { return new Date().toISOString().split('T')[0]; }\r\n\r\n function escHtml(str) {\r\n return String(str).replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'"');\r\n }\r\n\r\n function escJs(str) {\r\n return String(str).replace(\/'\/g,\"\\\\'\").replace(\/\\\\\/g,'\\\\\\\\');\r\n }\r\n\r\n \/\/ ===== EXPORT CSV HELPERS =====\r\n function exportItemsCSV() {\r\n let csv = 'Item Name,Rate,Stock\\n';\r\n data.items.forEach(i => { csv += `\"${i.name}\",${i.rate},${i.stock !== undefined ? i.stock : 0}\\n`; });\r\n download(csv, `Items_${today()}.csv`, 'text\/csv');\r\n toast('Items exported \u2713');\r\n }\r\n\r\n function exportPartiesCSV() {\r\n exportParties();\r\n }\r\n\r\n function exportSellOrdersCSV() {\r\n let csv = 'Date,Party,Attender,Item,Qty,Rate,Total\\n';\r\n data.sellOrders.forEach(o => {\r\n o.items.forEach(item => {\r\n csv += `\"${o.date}\",\"${o.partyName}\",\"${o.attender || ''}\",\"${item.name}\",${item.qty},${item.rate},${(item.qty * item.rate).toFixed(2)}\\n`;\r\n });\r\n });\r\n download(csv, `Sell_Orders_${today()}.csv`, 'text\/csv');\r\n toast('Sell orders exported \u2713');\r\n }\r\n\r\n \/\/ ===== DASHBOARD =====\r\n function renderDashboard() {\r\n \/\/ === Compute stats ===\r\n const totalItems = data.items.length;\r\n const outOfStock = data.items.filter(i => (i.stock || 0) <= 0);\r\n const lowStock = data.items.filter(i => (i.stock || 0) > 0 && (i.stock || 0) <= 5);\r\n const inStock = data.items.filter(i => (i.stock || 0) > 5);\r\n\r\n \/\/ Sell totals\r\n let totalSellRevenue = 0;\r\n const sellItemMap = {};\r\n const sellPartyMap = {};\r\n data.sellOrders.forEach(o => {\r\n o.items.forEach(item => {\r\n const t = item.qty * item.rate;\r\n totalSellRevenue += t;\r\n if (!sellItemMap[item.name]) sellItemMap[item.name] = { qty: 0, revenue: 0 };\r\n sellItemMap[item.name].qty += item.qty;\r\n sellItemMap[item.name].revenue += t;\r\n });\r\n if (!sellPartyMap[o.partyName]) sellPartyMap[o.partyName] = { orders: 0, revenue: 0 };\r\n sellPartyMap[o.partyName].orders++;\r\n o.items.forEach(it => { sellPartyMap[o.partyName].revenue += it.qty * it.rate; });\r\n });\r\n\r\n \/\/ Purchase totals\r\n let totalPurchaseCost = 0;\r\n const purchaseItemMap = {};\r\n data.purchaseOrders.forEach(o => {\r\n o.items.forEach(item => {\r\n const t = item.qty * item.rate;\r\n totalPurchaseCost += t;\r\n if (!purchaseItemMap[item.name]) purchaseItemMap[item.name] = { qty: 0, cost: 0 };\r\n purchaseItemMap[item.name].qty += item.qty;\r\n purchaseItemMap[item.name].cost += t;\r\n });\r\n });\r\n\r\n const profit = totalSellRevenue - totalPurchaseCost;\r\n const todayStr = today();\r\n const todaySell = data.sellOrders.filter(o => o.date === todayStr).reduce((s, o) => s + o.items.reduce((ss, i) => ss + i.qty * i.rate, 0), 0);\r\n\r\n \/\/ === KPI Cards ===\r\n const kpis = [\r\n { icon: '\ud83d\udcb0', value: '\u20b9' + fmtNum(totalSellRevenue), label: 'Total Sell Revenue', sub: `${data.sellOrders.length} orders`, color: '#25D366', bg: '#E9F7EF' },\r\n { icon: '\ud83d\uded2', value: '\u20b9' + fmtNum(totalPurchaseCost), label: 'Total Purchase Cost', sub: `${data.purchaseOrders.length} orders`, color: '#6C63FF', bg: '#EDE9FF' },\r\n { icon: profit >= 0 ? '\ud83d\udcc8' : '\ud83d\udcc9', value: '\u20b9' + fmtNum(Math.abs(profit)), label: profit >= 0 ? 'Gross Profit' : 'Gross Loss', sub: profit >= 0 ? 'Revenue - Cost' : 'Loss!', color: profit >= 0 ? '#25D366' : '#F44336', bg: profit >= 0 ? '#E9F7EF' : '#FFEBEE' },\r\n { icon: '\ud83d\udce6', value: totalItems, label: 'Total Items', sub: `${inStock.length} in stock`, color: '#2196F3', bg: '#E3F2FD' },\r\n { icon: '\ud83d\udeab', value: outOfStock.length, label: 'Out of Stock', sub: 'Need restock', color: '#F44336', bg: '#FFEBEE' },\r\n { icon: '\u26a0\ufe0f', value: lowStock.length, label: 'Low Stock (\u22645)', sub: 'Monitor these', color: '#FF9800', bg: '#FFF3E0' },\r\n { icon: '\ud83d\udc65', value: data.parties.length, label: 'Total Parties', sub: 'Active parties', color: '#9B59B6', bg: '#F3E5F5' },\r\n { icon: '\ud83d\udcc5', value: '\u20b9' + fmtNum(todaySell), label: \"Today's Sell\", sub: new Date().toLocaleDateString('en-IN', { day:'numeric', month:'short' }), color: '#FF9800', bg: '#FFF3E0' },\r\n ];\r\n\r\n let kpiHtml = '';\r\n kpis.forEach(k => {\r\n kpiHtml += `<div class=\"dash-kpi\" style=\"border-top: 3px solid ${k.color};\">\r\n <div class=\"dash-kpi-icon\">${k.icon}<\/div>\r\n <div class=\"dash-kpi-value\" style=\"color:${k.color};\">${k.value}<\/div>\r\n <div class=\"dash-kpi-label\">${k.label}<\/div>\r\n <div class=\"dash-kpi-sub\">${k.sub}<\/div>\r\n <\/div>`;\r\n });\r\n document.getElementById('dashKpiGrid').innerHTML = kpiHtml;\r\n\r\n \/\/ === Top Selling Items ===\r\n const topSell = Object.entries(sellItemMap)\r\n .sort((a, b) => b[1].revenue - a[1].revenue)\r\n .slice(0, 6);\r\n const maxSellRev = topSell.length > 0 ? topSell[0][1].revenue : 1;\r\n\r\n document.getElementById('dashTopSellBadge').textContent = `${topSell.length} items`;\r\n if (topSell.length === 0) {\r\n document.getElementById('dashTopSell').innerHTML = emptyDash('No sell data yet');\r\n } else {\r\n let html = '';\r\n topSell.forEach(([name, d], i) => {\r\n const pct = Math.round((d.revenue \/ maxSellRev) * 100);\r\n const colors = ['#25D366','#6C63FF','#2196F3','#FF9800','#F44336','#9B59B6'];\r\n html += `<div class=\"dash-bar-wrap\">\r\n <div class=\"dash-bar-name\" title=\"${escHtml(name)}\">${escHtml(name)}<\/div>\r\n <div class=\"dash-bar-outer\">\r\n <div class=\"dash-bar-inner\" style=\"width:${pct}%;background:${colors[i % colors.length]};\"><\/div>\r\n <\/div>\r\n <div class=\"dash-bar-val\" style=\"color:${colors[i % colors.length]};\">${d.qty}<\/div>\r\n <\/div>`;\r\n });\r\n document.getElementById('dashTopSell').innerHTML = html;\r\n }\r\n\r\n \/\/ === Stock Alerts ===\r\n const alerts = [...outOfStock.map(i => ({ ...i, type: 'out' })), ...lowStock.map(i => ({ ...i, type: 'low' }))]\r\n .slice(0, 8);\r\n\r\n document.getElementById('dashAlertBadge').textContent = `${alerts.length} alerts`;\r\n if (alerts.length === 0) {\r\n document.getElementById('dashStockAlerts').innerHTML = '<div style=\"padding: 20px; text-align: center; color: var(--green); font-size: 13px; font-weight: 600;\">\u2705 All items are well stocked!<\/div>';\r\n } else {\r\n let html = '';\r\n alerts.forEach(item => {\r\n const isOut = item.type === 'out';\r\n const isNeg = (item.stock || 0) < 0;\r\n const stockLabel = isNeg ? `\u26a0 ${item.stock}` : isOut ? 'OUT' : 'Low: ' + item.stock;\r\n const dotColor = isNeg ? '#ff1744' : isOut ? '#F44336' : '#FF9800';\r\n const bgColor = isNeg ? '#4a0010' : isOut ? '#FFEBEE' : '#FFF3E0';\r\n const textColor = isNeg ? '#ff6b8a' : isOut ? '#F44336' : '#E65100';\r\n html += `<div class=\"dash-alert-row\">\r\n <div class=\"dash-alert-dot\" style=\"background:${dotColor};\"><\/div>\r\n <div class=\"dash-alert-name\">${escHtml(item.name)}<\/div>\r\n <div class=\"dash-alert-stock\" style=\"background:${bgColor};color:${textColor};font-weight:700;\">\r\n ${stockLabel}\r\n <\/div>\r\n <\/div>`;\r\n });\r\n document.getElementById('dashStockAlerts').innerHTML = html;\r\n }\r\n\r\n \/\/ === Top Parties ===\r\n const topParties = Object.entries(sellPartyMap)\r\n .sort((a, b) => b[1].revenue - a[1].revenue)\r\n .slice(0, 6);\r\n const maxPartyRev = topParties.length > 0 ? topParties[0][1].revenue : 1;\r\n\r\n document.getElementById('dashPartyBadge').textContent = `${topParties.length} parties`;\r\n if (topParties.length === 0) {\r\n document.getElementById('dashTopParties').innerHTML = emptyDash('No sell orders yet');\r\n } else {\r\n let html = '';\r\n topParties.forEach(([name, d], i) => {\r\n const pct = Math.round((d.revenue \/ maxPartyRev) * 100);\r\n html += `<div class=\"dash-list-row\">\r\n <div class=\"dash-list-rank\">#${i + 1}<\/div>\r\n <div class=\"dash-list-name\">${escHtml(name)}<\/div>\r\n <div class=\"dash-bar-outer\" style=\"margin: 0 8px;\">\r\n <div class=\"dash-bar-inner\" style=\"width:${pct}%;background:var(--green);\"><\/div>\r\n <\/div>\r\n <div class=\"dash-list-right\">\r\n <div class=\"dash-list-val\" style=\"color:var(--green);\">\u20b9${fmtNum(d.revenue)}<\/div>\r\n <div class=\"dash-list-sub\">${d.orders} order${d.orders > 1 ? 's' : ''}<\/div>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n document.getElementById('dashTopParties').innerHTML = html;\r\n }\r\n\r\n \/\/ === Top Purchased ===\r\n const topPurch = Object.entries(purchaseItemMap)\r\n .sort((a, b) => b[1].qty - a[1].qty)\r\n .slice(0, 6);\r\n const maxPurchQty = topPurch.length > 0 ? topPurch[0][1].qty : 1;\r\n\r\n document.getElementById('dashPurchaseBadge').textContent = `${topPurch.length} items`;\r\n if (topPurch.length === 0) {\r\n document.getElementById('dashTopPurchased').innerHTML = emptyDash('No purchase data yet');\r\n } else {\r\n let html = '';\r\n topPurch.forEach(([name, d], i) => {\r\n const pct = Math.round((d.qty \/ maxPurchQty) * 100);\r\n html += `<div class=\"dash-list-row\">\r\n <div class=\"dash-list-rank\">#${i + 1}<\/div>\r\n <div class=\"dash-list-name\">${escHtml(name)}<\/div>\r\n <div class=\"dash-bar-outer\" style=\"margin: 0 8px;\">\r\n <div class=\"dash-bar-inner\" style=\"width:${pct}%;background:var(--purple);\"><\/div>\r\n <\/div>\r\n <div class=\"dash-list-right\">\r\n <div class=\"dash-list-val\" style=\"color:var(--purple);\">${d.qty} pcs<\/div>\r\n <div class=\"dash-list-sub\">\u20b9${fmtNum(d.cost)}<\/div>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n document.getElementById('dashTopPurchased').innerHTML = html;\r\n }\r\n\r\n \/\/ === Monthly Chart (last 6 months) ===\r\n const months = [];\r\n for (let i = 5; i >= 0; i--) {\r\n const d = new Date();\r\n d.setMonth(d.getMonth() - i);\r\n months.push({ year: d.getFullYear(), month: d.getMonth(), label: d.toLocaleString('en-IN', { month: 'short', year: '2-digit' }) });\r\n }\r\n\r\n const monthSell = months.map(m => {\r\n return data.sellOrders.filter(o => {\r\n const od = new Date(o.date + 'T00:00:00');\r\n return od.getFullYear() === m.year && od.getMonth() === m.month;\r\n }).reduce((s, o) => s + o.items.reduce((ss, i) => ss + i.qty * i.rate, 0), 0);\r\n });\r\n\r\n const monthPurchase = months.map(m => {\r\n return data.purchaseOrders.filter(o => {\r\n const od = new Date(o.date + 'T00:00:00');\r\n return od.getFullYear() === m.year && od.getMonth() === m.month;\r\n }).reduce((s, o) => s + o.items.reduce((ss, i) => ss + i.qty * i.rate, 0), 0);\r\n });\r\n\r\n const maxMonthVal = Math.max(...monthSell, ...monthPurchase, 1);\r\n const chartHeight = 120;\r\n\r\n let chartHtml = '<div style=\"display:flex;align-items:flex-end;gap:12px;height:' + (chartHeight + 30) + 'px;padding-bottom:4px;\">';\r\n months.forEach((m, i) => {\r\n const sellH = Math.round((monthSell[i] \/ maxMonthVal) * chartHeight);\r\n const purchH = Math.round((monthPurchase[i] \/ maxMonthVal) * chartHeight);\r\n chartHtml += `<div style=\"flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;\">\r\n <div style=\"display:flex;align-items:flex-end;gap:3px;height:${chartHeight}px;\">\r\n <div title=\"Sell: \u20b9${fmtNum(monthSell[i])}\" style=\"width:14px;height:${sellH || 2}px;background:var(--green);border-radius:3px 3px 0 0;transition:height 0.5s;cursor:pointer;\" onclick=\"\"><\/div>\r\n <div title=\"Purchase: \u20b9${fmtNum(monthPurchase[i])}\" style=\"width:14px;height:${purchH || 2}px;background:var(--purple);border-radius:3px 3px 0 0;transition:height 0.5s;cursor:pointer;\" onclick=\"\"><\/div>\r\n <\/div>\r\n <div style=\"font-size:10px;color:var(--text-light);text-align:center;\">${m.label}<\/div>\r\n <\/div>`;\r\n });\r\n chartHtml += '<\/div>';\r\n chartHtml += '<div style=\"display:flex;gap:16px;margin-top:8px;justify-content:center;\">';\r\n chartHtml += '<div style=\"display:flex;align-items:center;gap:6px;font-size:12px;\"><div style=\"width:12px;height:12px;background:var(--green);border-radius:2px;\"><\/div>Sell Revenue<\/div>';\r\n chartHtml += '<div style=\"display:flex;align-items:center;gap:6px;font-size:12px;\"><div style=\"width:12px;height:12px;background:var(--purple);border-radius:2px;\"><\/div>Purchase Cost<\/div>';\r\n chartHtml += '<\/div>';\r\n document.getElementById('dashMonthChart').innerHTML = chartHtml;\r\n\r\n \/\/ === Out of Stock ===\r\n document.getElementById('dashOutBadge').textContent = `${outOfStock.length} items`;\r\n if (outOfStock.length === 0) {\r\n document.getElementById('dashOutOfStock').innerHTML = '<div style=\"padding: 20px; text-align: center; color: var(--green); font-size: 13px; font-weight: 600;\">\u2705 No items are out of stock!<\/div>';\r\n } else {\r\n let html = '';\r\n outOfStock.slice(0, 10).forEach(item => {\r\n const isNeg = (item.stock || 0) < 0;\r\n html += `<div class=\"dash-list-row\">\r\n <div class=\"dash-alert-dot\" style=\"background:${isNeg ? '#ff1744' : '#F44336'};\"><\/div>\r\n <div class=\"dash-list-name\" style=\"margin-left:8px;\">${escHtml(item.name)}<\/div>\r\n <div style=\"font-size:12px;font-weight:700;padding:2px 8px;background:${isNeg ? '#4a0010' : '#FFEBEE'};color:${isNeg ? '#ff6b8a' : '#F44336'};border-radius:8px;\">${isNeg ? '\u26a0 ' + item.stock : 'OUT'}<\/div>\r\n <\/div>`;\r\n });\r\n if (outOfStock.length > 10) html += `<div style=\"text-align:center;padding:10px;font-size:12px;color:var(--text-light);\">... and ${outOfStock.length - 10} more<\/div>`;\r\n document.getElementById('dashOutOfStock').innerHTML = html;\r\n }\r\n\r\n \/\/ === Recent Orders ===\r\n const allOrders = [\r\n ...data.sellOrders.map(o => ({ ...o, _type: 'sell' })),\r\n ...data.purchaseOrders.map(o => ({ ...o, _type: 'purchase' }))\r\n ].sort((a, b) => new Date(b.timestamp || b.date) - new Date(a.timestamp || a.date)).slice(0, 5);\r\n\r\n if (allOrders.length === 0) {\r\n document.getElementById('dashRecentOrders').innerHTML = emptyDash('No orders yet');\r\n } else {\r\n let html = '';\r\n allOrders.forEach(order => {\r\n const orderTotal = order.items.reduce((s, i) => s + i.qty * i.rate, 0);\r\n const dateStr = new Date(order.date + 'T00:00:00').toLocaleDateString('en-IN', { day: 'numeric', month: 'short' });\r\n const isSell = order._type === 'sell';\r\n html += `<div class=\"dash-list-row\">\r\n <div style=\"font-size:16px;\">${isSell ? '\ud83d\udcb0' : '\ud83d\uded2'}<\/div>\r\n <div style=\"flex:1;min-width:0;margin-left:8px;\">\r\n <div class=\"dash-list-name\">${escHtml(order.partyName)}<\/div>\r\n <div style=\"font-size:11px;color:var(--text-light);\">${dateStr} \u2022 ${isSell ? 'Sell' : 'Purchase'} \u2022 ${order.items.length} items<\/div>\r\n <\/div>\r\n <div style=\"font-weight:700;color:${isSell ? 'var(--green)' : 'var(--purple)'};\">\u20b9${fmtNum(orderTotal)}<\/div>\r\n <\/div>`;\r\n });\r\n document.getElementById('dashRecentOrders').innerHTML = html;\r\n }\r\n }\r\n\r\n function fmtNum(n) {\r\n if (n >= 100000) return (n \/ 100000).toFixed(1) + 'L';\r\n if (n >= 1000) return (n \/ 1000).toFixed(1) + 'K';\r\n return Math.round(n).toLocaleString('en-IN');\r\n }\r\n\r\n function emptyDash(msg) {\r\n return `<div style=\"padding:24px;text-align:center;color:var(--text-light);font-size:13px;\">${msg}<\/div>`;\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Order Manager \ud83d\udccb Order Manager Manage your purchase orders \ud83d\uded2 Purchase \ud83d\udce6 Items \ud83d\udcb0 Sell \ud83d\udcca Dashboard \ud83d\udc65 Manage Parties Add New Party Party Name WhatsApp Number + Create Party Import\/Export Parties \ud83d\udce5 Export \ud83d\udce4 Import Add Purchase Order Select Party (Supplier) Select Party Date Note \/ Attender Add Items to Order Item Name Quantity […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2646","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=2646"}],"version-history":[{"count":51,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2646\/revisions"}],"predecessor-version":[{"id":3189,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2646\/revisions\/3189"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}