{"id":1648,"date":"2026-06-06T16:36:07","date_gmt":"2026-06-06T16:36:07","guid":{"rendered":"https:\/\/3rbinvesting.com\/?page_id=1648"},"modified":"2026-06-06T16:36:09","modified_gmt":"2026-06-06T16:36:09","slug":"acm","status":"publish","type":"page","link":"https:\/\/3rbinvesting.com\/ar\/acm\/","title":{"rendered":"ACM"},"content":{"rendered":"<iframe title=\"AC Business Manager\" style=\"width:100%;height:1100px;border:0;border-radius:12px;overflow:hidden;background:#f4f6fa\" srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;\n&lt;head&gt;\n&lt;meta charset=&quot;UTF-8&quot;&gt;\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n&lt;title&gt;AC Business Manager&lt;\/title&gt;\n&lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.googleapis.com&quot;&gt;\n&lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.gstatic.com&quot; crossorigin&gt;\n&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700;800&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;style&gt;\n:root{\n  --bg:#f4f6fa;--panel:#fff;--ink:#10233f;--ink-soft:#5b6b82;--line:#e6eaf1;\n  --brand:#0f3d5e;--brand-2:#13759c;--accent:#19a7a0;--blue:#2563eb;--green:#15a05a;\n  --amber:#d98314;--slate:#64748b;--red:#dc2f3a;\n  --shadow:0 1px 2px rgba(16,35,63,.06),0 8px 24px rgba(16,35,63,.06);--radius:14px;\n}\n*{box-sizing:border-box}html,body{margin:0;padding:0}\nbody{font-family:&#039;Cairo&#039;,system-ui,sans-serif;background:var(--bg);color:var(--ink);display:flex;min-height:100vh;-webkit-font-smoothing:antialiased}\n.sidebar{width:248px;flex-shrink:0;background:linear-gradient(180deg,#0f3d5e,#0a2c45);color:#cfe0ec;padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}\n.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px}\n.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--brand-2));display:grid;place-items:center;font-size:22px;color:#fff;box-shadow:0 6px 16px rgba(25,167,160,.35)}\n.brand-text{display:flex;flex-direction:column;line-height:1.2}\n.brand-title{font-weight:800;font-size:17px;color:#fff}.brand-sub{font-size:12px;color:#7fa6c0}\n.nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}\n.nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:#bcd2e2;text-decoration:none;font-weight:600;font-size:15px;cursor:pointer;transition:background .15s,color .15s;border:none;background:none;font-family:inherit;text-align:start;width:100%}\n.nav-link:hover{background:rgba(255,255,255,.07);color:#fff}\n.nav-link.active{background:rgba(25,167,160,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(25,167,160,.4)}\n.nav-ico{font-size:16px;width:20px;text-align:center}\n.lang-toggle{margin-top:auto;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15);padding:10px;border-radius:10px;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;transition:background .15s}\n.lang-toggle:hover{background:rgba(255,255,255,.16)}\n.content{flex:1;padding:28px 34px;min-width:0}\n.view{display:none}.view.active{display:block}\n.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}\n.page-head h1{margin:0;font-size:26px;font-weight:800}.muted{color:var(--ink-soft)}\n.page-head .muted{margin:4px 0 0;font-size:14px}.head-actions{display:flex;gap:10px;flex-wrap:wrap}\n.btn{font-family:inherit;font-weight:700;font-size:14px;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}\n.btn:hover{border-color:#c9d3e2;background:#fbfcfe}\n.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{background:#0c4f78}\n.icon-btn{background:none;border:none;cursor:pointer;font-size:15px;padding:6px 8px;border-radius:8px;color:var(--ink-soft);transition:all .15s}\n.icon-btn:hover{background:var(--line);color:var(--ink)}.icon-btn.danger:hover{background:#fde8ea;color:var(--red)}\n.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}\n.kpi{background:var(--panel);border-radius:var(--radius);padding:18px 18px 18px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px}\n.kpi::before{content:&quot;&quot;;position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--slate)}\n.kpi.accent-blue::before{background:var(--blue)}.kpi.accent-green::before{background:var(--green)}\n.kpi.accent-amber::before{background:var(--amber)}.kpi.accent-slate::before{background:var(--slate)}.kpi.accent-red::before{background:var(--red)}\n.kpi-label{font-size:13px;color:var(--ink-soft);font-weight:600}\n.kpi-value{font-size:25px;font-weight:800;letter-spacing:-.3px}.kpi-value small{font-size:13px;color:var(--ink-soft);font-weight:600}\n.kpi-value.neg{color:var(--red)}.kpi-value.pos{color:var(--green)}\n.panel-row{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:20px}\n.panel{background:var(--panel);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:20px}\n.panel h2{margin:0 0 16px;font-size:17px;font-weight:800}\n.panel .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}\n.panel .panel-head h2{margin:0}\n.pnl-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}\n.pnl-line b{font-variant-numeric:tabular-nums}.pnl-line.minus b{color:var(--red)}.pnl-line.subtotal{font-weight:700}\n.pnl-line.total{border-bottom:none;border-top:2px solid var(--ink);margin-top:6px;padding-top:14px;font-size:17px;font-weight:800}\n.pnl-line.total b{color:var(--green)}.pnl-line.total.neg b{color:var(--red)}\n.status-bars{display:flex;flex-direction:column;gap:14px}\n.status-bar{display:flex;align-items:center;gap:12px;font-size:15px}\n.dot{width:12px;height:12px;border-radius:50%}.dot.s-completed{background:var(--green)}.dot.s-pending{background:var(--amber)}.dot.s-not_started{background:var(--slate)}\n.sb-label{flex:1;font-weight:600}.sb-count{font-weight:800;font-size:18px}\n.mini-table{width:100%;border-collapse:collapse}.mini-table td{padding:8px 0;font-size:14px}\n.mini-table .cat{font-weight:600;width:34%}.mini-table .barcell{width:46%}\n.mini-table .amt{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}\n.bar{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--brand-2),var(--accent));min-width:4px}\n.filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}\n.filters input,.filters select{font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}\n.filters input[type=search]{flex:1;min-width:200px}\n.period-tabs{display:inline-flex;gap:4px;background:#e9edf4;padding:4px;border-radius:11px}\n.period-tabs.left{margin-bottom:16px;align-items:center;display:flex}\n.period-tabs button{padding:7px 14px;border-radius:8px;border:none;background:none;cursor:pointer;color:var(--ink-soft);font-weight:700;font-size:13px;font-family:inherit;transition:all .15s}\n.period-tabs button.on{background:#fff;color:var(--brand);box-shadow:var(--shadow)}\n.total-badge{margin-inline-start:auto;font-weight:700;font-size:14px;color:var(--ink)}\n.table-wrap{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;margin-bottom:20px}\n.data-table{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}\n.data-table th{text-align:start;padding:13px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);background:#fafbfd;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700}\n.data-table th.num{text-align:end}\n.data-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}\n.data-table tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:#f8fafc}\n.data-table .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}\n.data-table tfoot td{padding:13px 14px;font-weight:800;border-top:2px solid var(--ink);background:#fafbfd}\n.cell-strong{font-weight:700}.cell-sub{font-size:12px;color:var(--ink-soft)}.nowrap{white-space:nowrap}\n.num.pos{color:var(--green);font-weight:700}.num.neg{color:var(--red);font-weight:700}.num.warn{color:var(--amber);font-weight:700}\n.actions{white-space:nowrap;text-align:end}.dim{opacity:.55}\n.empty{text-align:center;color:var(--ink-soft);padding:30px!important}\n.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}\n.pill.s-completed{background:#dcf3e6;color:#0e7a42}.pill.s-pending{background:#fdeecd;color:#9a5f08}.pill.s-not_started{background:#e8ecf2;color:#5b6b82}\n.pill.p-paid{background:#dcf3e6;color:#0e7a42}.pill.p-partial{background:#fdeecd;color:#9a5f08}.pill.p-unpaid{background:#fde8ea;color:#b21f2a}\n.chips{display:flex;flex-wrap:wrap;gap:8px}\n.chip{display:inline-flex;align-items:center;gap:8px;background:#eef2f8;border:1px solid var(--line);padding:7px 8px 7px 14px;border-radius:999px;font-weight:600;font-size:14px}\n.chip-x{background:none;border:none;cursor:pointer;color:var(--ink-soft);font-size:12px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center}\n.chip-x:hover{background:#fde8ea;color:var(--red)}\n.scroll-box{max-height:300px;overflow:auto;padding-inline-end:4px}\n.list-rows{display:flex;flex-direction:column;gap:8px}\n.list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px}\n.list-row .lr-main{font-weight:600}.list-row .lr-sub{font-size:12px;color:var(--ink-soft)}\n.modal-backdrop{position:fixed;inset:0;background:rgba(16,35,63,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;backdrop-filter:blur(2px);overflow-y:auto}\n.modal-backdrop.open{display:flex}\n.modal{background:#fff;border-radius:16px;width:100%;max-width:640px;box-shadow:0 24px 60px rgba(16,35,63,.3);animation:pop .18s ease}\n.modal.sm{max-width:460px}\n@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}\n.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}\n.modal-head h3{margin:0;font-size:18px;font-weight:800}\n.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px}\n.field{display:flex;flex-direction:column;gap:6px}.field.span2{grid-column:1\/-1}\n.field&gt;span{font-size:13px;font-weight:700;color:var(--ink-soft)}\n.field input,.field select,.field textarea{font-family:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}\n.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(19,117,156,.12)}\n.field.checkbox{flex-direction:row;align-items:center;gap:10px}.field.checkbox input{width:auto}.field.checkbox span{font-size:15px;color:var(--ink)}\n.calc-strip{display:flex;gap:10px;background:#f1f5fa;border-radius:12px;padding:14px}\n.calc-strip&gt;div{flex:1;display:flex;flex-direction:column;gap:3px;text-align:center}\n.calc-strip span{font-size:12px;color:var(--ink-soft);font-weight:600}.calc-strip b{font-size:18px;font-variant-numeric:tabular-nums}\n.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}\n[dir=&quot;rtl&quot;]{direction:rtl}[dir=&quot;rtl&quot;] .kpi-value{direction:ltr;text-align:start}\n.test-ribbon{background:#fff6e5;border:1px solid #f3d99b;color:#8a5a00;font-size:12px;font-weight:600;padding:8px 12px;border-radius:10px;margin-bottom:16px}\n@media(max-width:900px){\n  body{flex-direction:column}\n  .sidebar{width:100%;height:auto;flex-direction:row;align-items:center;position:relative;padding:12px 16px;flex-wrap:wrap}\n  .brand{padding:0;flex:1}.nav{flex-direction:row;margin:0;flex-wrap:wrap}.nav-link{padding:8px 12px;width:auto}\n  .lang-toggle{margin:0}.content{padding:20px 16px}\n  .kpi-grid{grid-template-columns:1fr 1fr}.panel-row{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;aside class=&quot;sidebar&quot;&gt;\n  &lt;div class=&quot;brand&quot;&gt;\n    &lt;div class=&quot;brand-mark&quot;&gt;\u2744&lt;\/div&gt;\n    &lt;div class=&quot;brand-text&quot;&gt;\n      &lt;span class=&quot;brand-title&quot; data-en=&quot;AC Manager&quot; data-ar=&quot;\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0643\u064a\u064a\u0641&quot;&gt;AC Manager&lt;\/span&gt;\n      &lt;span class=&quot;brand-sub&quot; data-en=&quot;Business Console&quot; data-ar=&quot;\u0644\u0648\u062d\u0629 \u0627\u0644\u0623\u0639\u0645\u0627\u0644&quot;&gt;Business Console&lt;\/span&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;nav class=&quot;nav&quot;&gt;\n    &lt;button class=&quot;nav-link active&quot; data-view=&quot;dashboard&quot;&gt;&lt;span class=&quot;nav-ico&quot;&gt;\u25a6&lt;\/span&gt;&lt;span data-en=&quot;Dashboard&quot; data-ar=&quot;\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629&quot;&gt;Dashboard&lt;\/span&gt;&lt;\/button&gt;\n    &lt;button class=&quot;nav-link&quot; data-view=&quot;jobs&quot;&gt;&lt;span class=&quot;nav-ico&quot;&gt;\ud83e\uddfe&lt;\/span&gt;&lt;span data-en=&quot;Jobs&quot; data-ar=&quot;\u0627\u0644\u0623\u0639\u0645\u0627\u0644&quot;&gt;Jobs&lt;\/span&gt;&lt;\/button&gt;\n    &lt;button class=&quot;nav-link&quot; data-view=&quot;income&quot;&gt;&lt;span class=&quot;nav-ico&quot;&gt;\ud83d\udcb0&lt;\/span&gt;&lt;span data-en=&quot;Income (Sales)&quot; data-ar=&quot;\u0627\u0644\u062f\u062e\u0644 (\u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a)&quot;&gt;Income&lt;\/span&gt;&lt;\/button&gt;\n    &lt;button class=&quot;nav-link&quot; data-view=&quot;costs&quot;&gt;&lt;span class=&quot;nav-ico&quot;&gt;\ud83d\udcb8&lt;\/span&gt;&lt;span data-en=&quot;Costs&quot; data-ar=&quot;\u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641&quot;&gt;Costs&lt;\/span&gt;&lt;\/button&gt;\n    &lt;button class=&quot;nav-link&quot; data-view=&quot;employees&quot;&gt;&lt;span class=&quot;nav-ico&quot;&gt;\ud83d\udc77&lt;\/span&gt;&lt;span data-en=&quot;Employees&quot; data-ar=&quot;\u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646&quot;&gt;Employees&lt;\/span&gt;&lt;\/button&gt;\n    &lt;button class=&quot;nav-link&quot; data-view=&quot;settings&quot;&gt;&lt;span class=&quot;nav-ico&quot;&gt;\u2699&lt;\/span&gt;&lt;span data-en=&quot;Lists &amp;amp; Settings&quot; data-ar=&quot;\u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0648\u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a&quot;&gt;Lists&lt;\/span&gt;&lt;\/button&gt;\n  &lt;\/nav&gt;\n  &lt;button id=&quot;lang-toggle&quot; class=&quot;lang-toggle&quot; type=&quot;button&quot;&gt;&lt;span data-en=&quot;\u0639\u0631\u0628\u064a&quot; data-ar=&quot;English&quot;&gt;\u0639\u0631\u0628\u064a&lt;\/span&gt;&lt;\/button&gt;\n&lt;\/aside&gt;\n\n&lt;main class=&quot;content&quot;&gt;\n  &lt;div class=&quot;test-ribbon&quot; data-en=&quot;Data is saved in this browser only (single user). For shared multi-user use, deploy the Flask app.&quot; data-ar=&quot;\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u062d\u0641\u0648\u0638\u0629 \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0641\u0642\u0637 (\u0645\u0633\u062a\u062e\u062f\u0645 \u0648\u0627\u062d\u062f). \u0644\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0645\u0634\u062a\u0631\u0643 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646\u060c \u0627\u0646\u0634\u0631 \u062a\u0637\u0628\u064a\u0642 Flask.&quot;&gt;notice&lt;\/div&gt;\n  &lt;div id=&quot;view-dashboard&quot; class=&quot;view active&quot;&gt;&lt;\/div&gt;\n  &lt;div id=&quot;view-jobs&quot; class=&quot;view&quot;&gt;&lt;\/div&gt;\n  &lt;div id=&quot;view-income&quot; class=&quot;view&quot;&gt;&lt;\/div&gt;\n  &lt;div id=&quot;view-costs&quot; class=&quot;view&quot;&gt;&lt;\/div&gt;\n  &lt;div id=&quot;view-employees&quot; class=&quot;view&quot;&gt;&lt;\/div&gt;\n  &lt;div id=&quot;view-settings&quot; class=&quot;view&quot;&gt;&lt;\/div&gt;\n&lt;\/main&gt;\n\n&lt;!-- Job modal --&gt;\n&lt;div class=&quot;modal-backdrop&quot; id=&quot;job-modal&quot;&gt;&lt;div class=&quot;modal&quot;&gt;&lt;div class=&quot;modal-head&quot;&gt;&lt;h3 id=&quot;job-title&quot; data-en=&quot;Add Job&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629 \u0639\u0645\u0644&quot;&gt;Add Job&lt;\/h3&gt;&lt;button class=&quot;icon-btn&quot; data-close&gt;\u2715&lt;\/button&gt;&lt;\/div&gt;\n&lt;div class=&quot;form-grid&quot;&gt;\n  &lt;input type=&quot;hidden&quot; id=&quot;f-id&quot;&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Client name&quot; data-ar=&quot;\u0627\u0633\u0645 \u0627\u0644\u0639\u0645\u064a\u0644&quot;&gt;Client name&lt;\/span&gt;&lt;input id=&quot;f-name&quot; required&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Job&quot; data-ar=&quot;\u0627\u0644\u0627\u0639\u0645\u0627\u0644&quot;&gt;Job&lt;\/span&gt;&lt;select id=&quot;f-service&quot; onchange=&quot;toggleMaint()&quot;&gt;&lt;\/select&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field span2&quot; id=&quot;maint-field&quot; style=&quot;display:none&quot;&gt;&lt;span data-en=&quot;Maintenance type&quot; data-ar=&quot;\u0646\u0648\u0639 \u0627\u0644\u0635\u064a\u0627\u0646\u0629&quot;&gt;Maintenance type&lt;\/span&gt;&lt;select id=&quot;f-maint&quot;&gt;&lt;\/select&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Area&quot; data-ar=&quot;\u0627\u0644\u0645\u0646\u0637\u0642\u0629&quot;&gt;Area&lt;\/span&gt;&lt;input id=&quot;f-area&quot; list=&quot;area-list&quot; autocomplete=&quot;off&quot;&gt;&lt;datalist id=&quot;area-list&quot;&gt;&lt;\/datalist&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Company (optional)&quot; data-ar=&quot;\u0627\u0644\u0634\u0631\u0643\u0629 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)&quot;&gt;Company (optional)&lt;\/span&gt;&lt;input id=&quot;f-company&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Date&quot; data-ar=&quot;\u0627\u0644\u062a\u0627\u0631\u064a\u062e&quot;&gt;Date&lt;\/span&gt;&lt;input type=&quot;date&quot; id=&quot;f-date&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Employee&quot; data-ar=&quot;\u0627\u0644\u0645\u0648\u0638\u0641&quot;&gt;Employee&lt;\/span&gt;&lt;select id=&quot;f-employee&quot;&gt;&lt;\/select&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Sale price (KWD)&quot; data-ar=&quot;\u0633\u0639\u0631 \u0627\u0644\u0628\u064a\u0639 (\u062f.\u0643)&quot;&gt;Sale price (KWD)&lt;\/span&gt;&lt;input type=&quot;number&quot; step=&quot;0.001&quot; min=&quot;0&quot; id=&quot;f-sale&quot; value=&quot;0&quot; oninput=&quot;recalc()&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Cost (KWD)&quot; data-ar=&quot;\u0627\u0644\u062a\u0643\u0644\u0641\u0629 (\u062f.\u0643)&quot;&gt;Cost (KWD)&lt;\/span&gt;&lt;input type=&quot;number&quot; step=&quot;0.001&quot; min=&quot;0&quot; id=&quot;f-cost&quot; value=&quot;0&quot; oninput=&quot;recalc()&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Paid (KWD)&quot; data-ar=&quot;\u0627\u0644\u0645\u062f\u0641\u0648\u0639 (\u062f.\u0643)&quot;&gt;Paid (KWD)&lt;\/span&gt;&lt;input type=&quot;number&quot; step=&quot;0.001&quot; min=&quot;0&quot; id=&quot;f-paid&quot; value=&quot;0&quot; oninput=&quot;recalc()&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Work status&quot; data-ar=&quot;\u062d\u0627\u0644\u0629 \u0627\u0644\u0639\u0645\u0644&quot;&gt;Work status&lt;\/span&gt;&lt;select id=&quot;f-status&quot;&gt;\n    &lt;option value=&quot;not_started&quot; data-en=&quot;Not started&quot; data-ar=&quot;\u0644\u0645 \u064a\u0628\u062f\u0623&quot;&gt;Not started&lt;\/option&gt;\n    &lt;option value=&quot;pending&quot; data-en=&quot;Pending&quot; data-ar=&quot;\u0642\u064a\u062f \u0627\u0644\u062a\u0646\u0641\u064a\u0630&quot;&gt;Pending&lt;\/option&gt;\n    &lt;option value=&quot;completed&quot; data-en=&quot;Completed&quot; data-ar=&quot;\u0645\u0646\u062c\u0632&quot;&gt;Completed&lt;\/option&gt;&lt;\/select&gt;&lt;\/label&gt;\n  &lt;div class=&quot;calc-strip span2&quot;&gt;\n    &lt;div&gt;&lt;span data-en=&quot;Remaining&quot; data-ar=&quot;\u0627\u0644\u0645\u062a\u0628\u0642\u064a&quot;&gt;Remaining&lt;\/span&gt;&lt;b id=&quot;c-remaining&quot;&gt;0.000&lt;\/b&gt;&lt;\/div&gt;\n    &lt;div&gt;&lt;span data-en=&quot;Profit&quot; data-ar=&quot;\u0627\u0644\u0631\u0628\u062d&quot;&gt;Profit&lt;\/span&gt;&lt;b id=&quot;c-profit&quot;&gt;0.000&lt;\/b&gt;&lt;\/div&gt;\n    &lt;div&gt;&lt;span data-en=&quot;Payment&quot; data-ar=&quot;\u0627\u0644\u062f\u0641\u0639&quot;&gt;Payment&lt;\/span&gt;&lt;b id=&quot;c-payment&quot;&gt;\u2014&lt;\/b&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Notes \/ service details&quot; data-ar=&quot;\u0645\u0644\u0627\u062d\u0638\u0627\u062a \/ \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u062e\u062f\u0645\u0629&quot;&gt;Notes \/ service details&lt;\/span&gt;&lt;textarea id=&quot;f-notes&quot; rows=&quot;3&quot;&gt;&lt;\/textarea&gt;&lt;\/label&gt;\n  &lt;div class=&quot;form-actions span2&quot;&gt;&lt;button class=&quot;btn&quot; data-close data-en=&quot;Cancel&quot; data-ar=&quot;\u0625\u0644\u063a\u0627\u0621&quot;&gt;Cancel&lt;\/button&gt;&lt;button class=&quot;btn primary&quot; onclick=&quot;saveJob()&quot; data-en=&quot;Save&quot; data-ar=&quot;\u062d\u0641\u0638&quot;&gt;Save&lt;\/button&gt;&lt;\/div&gt;\n&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n\n&lt;!-- Cost modal --&gt;\n&lt;div class=&quot;modal-backdrop&quot; id=&quot;cost-modal&quot;&gt;&lt;div class=&quot;modal sm&quot;&gt;&lt;div class=&quot;modal-head&quot;&gt;&lt;h3 data-en=&quot;Expense&quot; data-ar=&quot;\u0645\u0635\u0631\u0648\u0641&quot;&gt;Expense&lt;\/h3&gt;&lt;button class=&quot;icon-btn&quot; data-close&gt;\u2715&lt;\/button&gt;&lt;\/div&gt;\n&lt;div class=&quot;form-grid&quot;&gt;\n  &lt;input type=&quot;hidden&quot; id=&quot;cf-id&quot;&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Category&quot; data-ar=&quot;\u0627\u0644\u0628\u0646\u062f&quot;&gt;Category&lt;\/span&gt;&lt;select id=&quot;cf-cat&quot;&gt;&lt;\/select&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Amount (KWD)&quot; data-ar=&quot;\u0627\u0644\u0645\u0628\u0644\u063a (\u062f.\u0643)&quot;&gt;Amount (KWD)&lt;\/span&gt;&lt;input type=&quot;number&quot; step=&quot;0.001&quot; min=&quot;0&quot; id=&quot;cf-amount&quot; value=&quot;0&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Date&quot; data-ar=&quot;\u0627\u0644\u062a\u0627\u0631\u064a\u062e&quot;&gt;Date&lt;\/span&gt;&lt;input type=&quot;date&quot; id=&quot;cf-date&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Notes&quot; data-ar=&quot;\u0645\u0644\u0627\u062d\u0638\u0627\u062a&quot;&gt;Notes&lt;\/span&gt;&lt;input id=&quot;cf-notes&quot;&gt;&lt;\/label&gt;\n  &lt;div class=&quot;form-actions span2&quot;&gt;&lt;button class=&quot;btn&quot; data-close data-en=&quot;Cancel&quot; data-ar=&quot;\u0625\u0644\u063a\u0627\u0621&quot;&gt;Cancel&lt;\/button&gt;&lt;button class=&quot;btn primary&quot; onclick=&quot;saveCost()&quot; data-en=&quot;Save&quot; data-ar=&quot;\u062d\u0641\u0638&quot;&gt;Save&lt;\/button&gt;&lt;\/div&gt;\n&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n\n&lt;!-- Category modal --&gt;\n&lt;div class=&quot;modal-backdrop&quot; id=&quot;cat-modal&quot;&gt;&lt;div class=&quot;modal sm&quot;&gt;&lt;div class=&quot;modal-head&quot;&gt;&lt;h3 data-en=&quot;New Category&quot; data-ar=&quot;\u0628\u0646\u062f \u062c\u062f\u064a\u062f&quot;&gt;New Category&lt;\/h3&gt;&lt;button class=&quot;icon-btn&quot; data-close&gt;\u2715&lt;\/button&gt;&lt;\/div&gt;\n&lt;div class=&quot;form-grid&quot;&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Name (English)&quot; data-ar=&quot;\u0627\u0644\u0627\u0633\u0645 (\u0625\u0646\u062c\u0644\u064a\u0632\u064a)&quot;&gt;Name (English)&lt;\/span&gt;&lt;input id=&quot;catf-en&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Name (Arabic)&quot; data-ar=&quot;\u0627\u0644\u0627\u0633\u0645 (\u0639\u0631\u0628\u064a)&quot;&gt;Name (Arabic)&lt;\/span&gt;&lt;input id=&quot;catf-ar&quot; dir=&quot;rtl&quot;&gt;&lt;\/label&gt;\n  &lt;div class=&quot;form-actions span2&quot;&gt;&lt;button class=&quot;btn&quot; data-close data-en=&quot;Cancel&quot; data-ar=&quot;\u0625\u0644\u063a\u0627\u0621&quot;&gt;Cancel&lt;\/button&gt;&lt;button class=&quot;btn primary&quot; onclick=&quot;saveCat()&quot; data-en=&quot;Add&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629&quot;&gt;Add&lt;\/button&gt;&lt;\/div&gt;\n&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n\n&lt;!-- Service modal --&gt;\n&lt;div class=&quot;modal-backdrop&quot; id=&quot;svc-modal&quot;&gt;&lt;div class=&quot;modal sm&quot;&gt;&lt;div class=&quot;modal-head&quot;&gt;&lt;h3 data-en=&quot;New Service&quot; data-ar=&quot;\u062e\u062f\u0645\u0629 \u062c\u062f\u064a\u062f\u0629&quot;&gt;New Service&lt;\/h3&gt;&lt;button class=&quot;icon-btn&quot; data-close&gt;\u2715&lt;\/button&gt;&lt;\/div&gt;\n&lt;div class=&quot;form-grid&quot;&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Name (Arabic)&quot; data-ar=&quot;\u0627\u0644\u0627\u0633\u0645 (\u0639\u0631\u0628\u064a)&quot;&gt;Name (Arabic)&lt;\/span&gt;&lt;input id=&quot;svcf-ar&quot; dir=&quot;rtl&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Name (English)&quot; data-ar=&quot;\u0627\u0644\u0627\u0633\u0645 (\u0625\u0646\u062c\u0644\u064a\u0632\u064a)&quot;&gt;Name (English)&lt;\/span&gt;&lt;input id=&quot;svcf-en&quot;&gt;&lt;\/label&gt;\n  &lt;div class=&quot;form-actions span2&quot;&gt;&lt;button class=&quot;btn&quot; data-close data-en=&quot;Cancel&quot; data-ar=&quot;\u0625\u0644\u063a\u0627\u0621&quot;&gt;Cancel&lt;\/button&gt;&lt;button class=&quot;btn primary&quot; onclick=&quot;saveSvc()&quot; data-en=&quot;Add&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629&quot;&gt;Add&lt;\/button&gt;&lt;\/div&gt;\n&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n\n&lt;!-- Area modal --&gt;\n&lt;div class=&quot;modal-backdrop&quot; id=&quot;area-modal&quot;&gt;&lt;div class=&quot;modal sm&quot;&gt;&lt;div class=&quot;modal-head&quot;&gt;&lt;h3 data-en=&quot;New Area&quot; data-ar=&quot;\u0645\u0646\u0637\u0642\u0629 \u062c\u062f\u064a\u062f\u0629&quot;&gt;New Area&lt;\/h3&gt;&lt;button class=&quot;icon-btn&quot; data-close&gt;\u2715&lt;\/button&gt;&lt;\/div&gt;\n&lt;div class=&quot;form-grid&quot;&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Area name&quot; data-ar=&quot;\u0627\u0633\u0645 \u0627\u0644\u0645\u0646\u0637\u0642\u0629&quot;&gt;Area name&lt;\/span&gt;&lt;input id=&quot;areaf-name&quot;&gt;&lt;\/label&gt;\n  &lt;div class=&quot;form-actions span2&quot;&gt;&lt;button class=&quot;btn&quot; data-close data-en=&quot;Cancel&quot; data-ar=&quot;\u0625\u0644\u063a\u0627\u0621&quot;&gt;Cancel&lt;\/button&gt;&lt;button class=&quot;btn primary&quot; onclick=&quot;saveArea()&quot; data-en=&quot;Add&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629&quot;&gt;Add&lt;\/button&gt;&lt;\/div&gt;\n&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n\n&lt;!-- Employee modal --&gt;\n&lt;div class=&quot;modal-backdrop&quot; id=&quot;emp-modal&quot;&gt;&lt;div class=&quot;modal sm&quot;&gt;&lt;div class=&quot;modal-head&quot;&gt;&lt;h3 data-en=&quot;Employee&quot; data-ar=&quot;\u0645\u0648\u0638\u0641&quot;&gt;Employee&lt;\/h3&gt;&lt;button class=&quot;icon-btn&quot; data-close&gt;\u2715&lt;\/button&gt;&lt;\/div&gt;\n&lt;div class=&quot;form-grid&quot;&gt;\n  &lt;input type=&quot;hidden&quot; id=&quot;ef-id&quot;&gt;\n  &lt;label class=&quot;field span2&quot;&gt;&lt;span data-en=&quot;Name&quot; data-ar=&quot;\u0627\u0644\u0627\u0633\u0645&quot;&gt;Name&lt;\/span&gt;&lt;input id=&quot;ef-name&quot; required&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Role&quot; data-ar=&quot;\u0627\u0644\u0648\u0638\u064a\u0641\u0629&quot;&gt;Role&lt;\/span&gt;&lt;input id=&quot;ef-role&quot; data-en-ph=&quot;e.g. Technician&quot; data-ar-ph=&quot;\u0645\u062b\u0627\u0644: \u0641\u0646\u064a&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field&quot;&gt;&lt;span data-en=&quot;Phone&quot; data-ar=&quot;\u0627\u0644\u0647\u0627\u062a\u0641&quot;&gt;Phone&lt;\/span&gt;&lt;input id=&quot;ef-phone&quot;&gt;&lt;\/label&gt;\n  &lt;label class=&quot;field span2 checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;ef-active&quot; checked&gt;&lt;span data-en=&quot;Active employee&quot; data-ar=&quot;\u0645\u0648\u0638\u0641 \u0646\u0634\u0637&quot;&gt;Active employee&lt;\/span&gt;&lt;\/label&gt;\n  &lt;div class=&quot;form-actions span2&quot;&gt;&lt;button class=&quot;btn&quot; data-close data-en=&quot;Cancel&quot; data-ar=&quot;\u0625\u0644\u063a\u0627\u0621&quot;&gt;Cancel&lt;\/button&gt;&lt;button class=&quot;btn primary&quot; onclick=&quot;saveEmp()&quot; data-en=&quot;Save&quot; data-ar=&quot;\u062d\u0641\u0638&quot;&gt;Save&lt;\/button&gt;&lt;\/div&gt;\n&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n\n&lt;script&gt;\n\/* ---- seed data ---- *\/\nconst DEFAULT_CATEGORIES=[[&quot;Rent&quot;,&quot;\u0627\u0644\u0625\u064a\u062c\u0627\u0631&quot;],[&quot;Salaries&quot;,&quot;\u0627\u0644\u0631\u0648\u0627\u062a\u0628&quot;],[&quot;Bills&quot;,&quot;\u0627\u0644\u0641\u0648\u0627\u062a\u064a\u0631&quot;],[&quot;Tax&quot;,&quot;\u0627\u0644\u0636\u0631\u0627\u0626\u0628&quot;],[&quot;Cost of Goods&quot;,&quot;\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0628\u0636\u0627\u0639\u0629&quot;],[&quot;Residencies&quot;,&quot;\u0627\u0644\u0625\u0642\u0627\u0645\u0627\u062a&quot;],[&quot;Uniform&quot;,&quot;\u0627\u0644\u0632\u064a \u0627\u0644\u0631\u0633\u0645\u064a&quot;],[&quot;Car Service&quot;,&quot;\u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a&quot;],[&quot;Maintenance&quot;,&quot;\u0627\u0644\u0635\u064a\u0627\u0646\u0629&quot;],[&quot;Fuel&quot;,&quot;\u0627\u0644\u0648\u0642\u0648\u062f&quot;]];\nconst JOB_TYPES=[[&quot;\u0627\u0633\u062a\u0634\u0627\u0631\u0629&quot;,&quot;Consultation&quot;],[&quot;\u062a\u0631\u0643\u064a\u0628\u0627\u062a&quot;,&quot;Installations&quot;],[&quot;\u0643\u0644\u0627\u062f\u0646\u0642&quot;,&quot;Cladding&quot;],[&quot;\u0635\u064a\u0627\u0646\u0629&quot;,&quot;Maintenance&quot;],[&quot;\u0645\u0635\u0627\u0631\u064a\u0641&quot;,&quot;Expenses&quot;],[&quot;\u0645\u062e\u0637\u0637&quot;,&quot;Blueprint&quot;],[&quot;\u0645\u0639\u0627\u0634&quot;,&quot;Salary&quot;],[&quot;\u0641\u0648\u0645 \u0627\u0645\u0631\u064a\u0643\u064a&quot;,&quot;American Foam&quot;]];\nconst MAINT_TYPES=[&quot;GAS&quot;,&quot;BELT&quot;,&quot;WELDING + GAS&quot;,&quot;ROUTIN SERVICE&quot;,&quot;\u062a\u0635\u0644\u064a\u062d \u0643\u0646\u062a\u0631\u0648\u0644&quot;,&quot;TRANSFORMER&quot;,&quot;H.P&quot;,&quot;L.P&quot;,&quot;CONTACTOR&quot;,&quot;REPAIR MOTOR&quot;,&quot;REPAIR COMPRESSOR&quot;,&quot;REPLACE COMPRESSOR&quot;];\nconst AREAS=[&quot;\u0627\u0645 \u0627\u0644\u0647\u064a\u0645\u0627\u0646&quot;,&quot;\u0627\u0644\u062c\u0647\u0631\u0627\u0621&quot;,&quot;\u0635\u0628\u0627\u062d \u0627\u0644\u0633\u0627\u0644\u0645&quot;,&quot;\u0635\u0628\u0627\u062d \u0627\u0644\u0627\u062d\u0645\u062f&quot;,&quot;\u0627\u0644\u0645\u0637\u0644\u0627\u0639&quot;,&quot;\u0627\u0644\u062e\u064a\u0631\u0627\u0646&quot;,&quot;\u0627\u0644\u0645\u0646\u0642\u0641&quot;,&quot;\u0627\u0644\u0639\u0627\u0631\u0636\u064a\u0629&quot;,&quot;\u0627\u0644\u0642\u064a\u0631\u0648\u0627\u0646&quot;,&quot;\u0647\u062f\u064a\u0629&quot;,&quot;\u0627\u0644\u0633\u0644\u0627\u0645&quot;,&quot;\u0627\u0644\u0632\u0647\u0631\u0627\u0621&quot;,&quot;\u0639\u0628\u062f\u0627\u0644\u0644\u0647 \u0627\u0644\u0645\u0628\u0627\u0631\u0643&quot;,&quot;\u0627\u0644\u0641\u0646\u0637\u0627\u0633&quot;,&quot;\u0627\u0644\u062f\u0639\u064a\u0629&quot;,&quot;\u063a\u0631\u0628 \u0645\u0634\u0631\u0641&quot;,&quot;\u062e\u064a\u0637\u0627\u0646&quot;,&quot;\u0627\u0644\u062e\u0627\u0644\u062f\u064a\u0629&quot;,&quot;\u0627\u0644\u0635\u0628\u0627\u062d\u064a\u0629&quot;,&quot;\u063a\u0631\u0628 \u0639 \u0645&quot;,&quot;\u0627\u0644\u0633\u0631\u0629&quot;,&quot;\u0627\u0644\u0631\u0648\u0636\u0629&quot;,&quot;\u0627\u0644\u064a\u0631\u0645\u0648\u0643&quot;,&quot;\u0642\u0631\u0637\u0628\u0629&quot;,&quot;\u0643\u064a\u0641\u0627\u0646&quot;,&quot;\u0627\u0644\u0634\u0648\u064a\u062e&quot;,&quot;\u0634\u0648\u064a\u062e \u0627\u0644\u0633\u0643\u0646\u064a\u0629&quot;,&quot;\u0627\u0644\u0639\u062f\u064a\u0644\u064a\u0647&quot;,&quot;\u0645\u0634\u0631\u0641&quot;,&quot;\u0639\u0628\u062f\u0627\u0644\u0644\u0647 \u0627\u0644\u0633\u0627\u0644\u0645&quot;,&quot;\u0627\u0644\u0633\u0627\u0644\u0645\u064a\u0629&quot;,&quot;\u0627\u0644\u0642\u0627\u062f\u0633\u064a\u0629&quot;,&quot;\u0627\u0644\u0634\u0647\u062f\u0627\u0621&quot;,&quot;\u062d\u0637\u064a\u0646&quot;,&quot;\u0627\u0644\u0635\u062f\u064a\u0642&quot;,&quot;\u0627\u0644\u062c\u0627\u0628\u0631\u064a\u0629&quot;,&quot;\u0628\u064a\u0627\u0646&quot;,&quot;\u0627\u0644\u0631\u0645\u064a\u062b\u064a\u0629&quot;,&quot;\u0627\u0644\u0641\u0646\u064a\u0637\u064a\u0633&quot;,&quot;\u0633\u0639\u062f \u0627\u0644\u0639\u0628\u062f\u0627\u0644\u0644\u0647&quot;,&quot;\u062c\u0627\u0628\u0631 \u0627\u0644\u0623\u062d\u0645\u062f&quot;,&quot;\u0627\u0644\u0631\u0642\u0639\u064a&quot;,&quot;\u0635\u0628\u0627\u062d \u0627\u0644\u0646\u0627\u0635\u0631&quot;,&quot;\u0627\u0644\u0631\u062d\u0627\u0628&quot;,&quot;\u0627\u0644\u0639\u0645\u0631\u064a\u0629&quot;,&quot;\u0627\u0644\u0641\u0631\u062f\u0648\u0633&quot;,&quot;\u062c\u0646\u0648\u0628 \u0639 \u0645\u0628\u0627\u0631\u0643&quot;,&quot;\u063a \u0639 \u0645\u0628\u0627\u0631\u0643&quot;,&quot;\u0627\u0634\u0628\u064a\u0644\u064a\u0629&quot;,&quot;\u0627\u0644\u0645\u0633\u0627\u064a\u0644&quot;,&quot;\u0627\u0644\u0642\u0631\u064a\u0646&quot;,&quot;\u0623\u0633\u0648\u0627\u0642 \u0627\u0644\u0642\u0631\u064a\u0646&quot;,&quot;\u0645\u0628\u0627\u0631\u0643 \u0627\u0644\u0643\u0628\u064a\u0631&quot;,&quot;\u0627\u0644\u0642\u0635\u0648\u0631&quot;,&quot;\u0627\u0644\u0639\u062f\u0627\u0646&quot;,&quot;\u0627\u0644\u0645\u0647\u0628\u0648\u0644\u0629&quot;,&quot;\u0623\u0628\u0648 \u0627\u0644\u062d\u0635\u0627\u0646\u064a\u0629&quot;,&quot;\u0623\u0628\u0648 \u0641\u0637\u064a\u0631\u0629&quot;,&quot;\u0627\u0644\u0639\u0642\u064a\u0644\u0647&quot;,&quot;\u0627\u0644\u0631\u0642\u0629&quot;,&quot;\u062c\u0627\u0628\u0631 \u0627\u0644\u0639\u0644\u064a&quot;,&quot;\u0627\u0644\u0627\u062d\u0645\u062f\u064a&quot;,&quot;\u0627\u0644\u0641\u062d\u064a\u062d\u064a\u0644&quot;,&quot;\u0645\u062f\u0631\u0633\u0647 \u0639\u0628\u062f\u0627\u0644\u0643\u0631\u064a\u0645 \u0627\u0644\u0623\u062d\u0645\u062f&quot;,&quot;\u0627\u0644\u0648\u0641\u0631\u0629&quot;,&quot;\u0628\u0631\u062c \u0634\u064a\u062e\u0629&quot;,&quot;\u0627\u0644\u0631\u064a&quot;];\nconst SEED_EMPLOYEES=[&quot;\u0645. \u0641\u0648\u0627\u0632&quot;,&quot;\u0628\u0627\u0628\u0648&quot;,&quot;\u0645\u062d\u0645\u062f&quot;,&quot;\u0623\u0628\u0648 \u0627\u062f\u0645&quot;,&quot;\u0639\u0627\u0645\u0631&quot;];\nconst MAINT_JOB=&quot;\u0635\u064a\u0627\u0646\u0629&quot;;\nconst STATUS_LABELS={not_started:[&quot;Not started&quot;,&quot;\u0644\u0645 \u064a\u0628\u062f\u0623&quot;],pending:[&quot;Pending&quot;,&quot;\u0642\u064a\u062f \u0627\u0644\u062a\u0646\u0641\u064a\u0630&quot;],completed:[&quot;Completed&quot;,&quot;\u0645\u0646\u062c\u0632&quot;]};\nconst PAY_LABELS={paid:[&quot;Paid&quot;,&quot;\u0645\u062f\u0641\u0648\u0639&quot;],partial:[&quot;Partial&quot;,&quot;\u062c\u0632\u0626\u064a&quot;],unpaid:[&quot;Unpaid&quot;,&quot;\u063a\u064a\u0631 \u0645\u062f\u0641\u0648\u0639&quot;]};\n\nlet state={jobs:[],employees:[],categories:[],costs:[],services:[],areas:[],\n  counters:{job:0,emp:0,cat:0,cost:0,svc:0},\n  lang:&quot;en&quot;,dashPeriod:&quot;all&quot;,costPeriod:&quot;all&quot;,incomePeriod:&quot;all&quot;,\n  jobFilters:{q:&quot;&quot;,status:&quot;&quot;,payment:&quot;&quot;}};\n\n\/* ---- helpers ---- *\/\nconst kwd=n=&gt;(Number(n)||0).toLocaleString(&quot;en-US&quot;,{minimumFractionDigits:3,maximumFractionDigits:3});\nconst today=()=&gt;new Date().toISOString().slice(0,10);\nconst esc=s=&gt;(s==null?&quot;&quot;:String(s)).replace(\/[&amp;&lt;&gt;&quot;&#039;]\/g,c=&gt;({&quot;&amp;&quot;:&quot;&amp;amp;&quot;,&quot;&lt;&quot;:&quot;&amp;lt;&quot;,&quot;&gt;&quot;:&quot;&amp;gt;&quot;,&#039;&quot;&#039;:&quot;&amp;quot;&quot;,&quot;&#039;&quot;:&quot;&amp;#39;&quot;}[c]));\nconst L=(en,ar)=&gt;state.lang===&quot;ar&quot;?ar:en;\n\n\/* ---- storage: works in-chat (window.storage) and on a website (localStorage) ---- *\/\nconst HAS_WS=(typeof window!==&quot;undefined&quot;&amp;&amp;window.storage&amp;&amp;typeof window.storage.get===&quot;function&quot;);\nasync function sget(k){\n  if(HAS_WS){try{const r=await window.storage.get(k);return r?JSON.parse(r.value):null;}catch(e){return null;}}\n  try{const v=localStorage.getItem(k);return v?JSON.parse(v):null;}catch(e){return null;}\n}\nasync function sset(k,v){\n  if(HAS_WS){try{await window.storage.set(k,JSON.stringify(v));}catch(e){}return;}\n  try{localStorage.setItem(k,JSON.stringify(v));}catch(e){}\n}\nasync function save(){await sset(&quot;ac:state&quot;,state);}\nasync function loadState(){\n  const saved=await sget(&quot;ac:state&quot;);\n  if(saved){Object.assign(state,saved);}\n  if(!state.categories||!state.categories.length){state.categories=DEFAULT_CATEGORIES.map((c,i)=&gt;({id:i+1,en:c[0],ar:c[1]}));state.counters.cat=state.categories.length;}\n  if(!state.services||!state.services.length){state.services=JOB_TYPES.map((j,i)=&gt;({id:i+1,ar:j[0],en:j[1]}));state.counters.svc=state.services.length;}\n  if(!state.areas||!state.areas.length){state.areas=AREAS.slice();}\n  if(!state.employees||!state.employees.length){state.employees=SEED_EMPLOYEES.map((n,i)=&gt;({id:i+1,name:n,role:&quot;&quot;,phone:&quot;&quot;,active:1}));state.counters.emp=state.employees.length;}\n}\n\nfunction inPeriod(dateStr,period){\n  if(period===&quot;all&quot;)return true;\n  if(!dateStr)return false;\n  const d=new Date();\n  if(period===&quot;month&quot;){const s=new Date(d.getFullYear(),d.getMonth(),1).toISOString().slice(0,10);return dateStr&gt;=s;}\n  if(period===&quot;year&quot;){const s=new Date(d.getFullYear(),0,1).toISOString().slice(0,10);return dateStr&gt;=s;}\n  return true;\n}\nfunction payStatus(j){const p=+j.paid||0,s=+j.sale||0;return p&lt;=0?&quot;unpaid&quot;:(p&gt;=s?&quot;paid&quot;:&quot;partial&quot;);}\nfunction empName(id){const e=state.employees.find(e=&gt;e.id==id);return e?e.name:&quot;&quot;;}\nfunction svcLabel(v){const m=state.services.find(s=&gt;s.ar===v);return m?[m.ar,m.en]:[v,v];}\nfunction jobLabelHtml(v){if(!v)return &quot;\u2014&quot;;const m=state.services.find(s=&gt;s.ar===v);return m?`&lt;span data-en=&quot;${esc(m.en)}&quot; data-ar=&quot;${esc(m.ar)}&quot;&gt;${esc(m.en)}&lt;\/span&gt;`:esc(v);}\n\n\/* ---- CSV export ---- *\/\nfunction toCSV(rows){return &quot;\\uFEFF&quot;+rows.map(r=&gt;r.map(c=&gt;{let s=c==null?&quot;&quot;:String(c);if(\/[&quot;,\\n\\r]\/.test(s))s=&#039;&quot;&#039;+s.replace(\/&quot;\/g,&#039;&quot;&quot;&#039;)+&#039;&quot;&#039;;return s;}).join(&quot;,&quot;)).join(&quot;\\r\\n&quot;);}\nfunction download(name,text){const b=new Blob([text],{type:&quot;text\/csv;charset=utf-8;&quot;});const a=document.createElement(&quot;a&quot;);a.href=URL.createObjectURL(b);a.download=name;document.body.appendChild(a);a.click();setTimeout(()=&gt;{URL.revokeObjectURL(a.href);a.remove();},800);}\nfunction exportJobs(){\n  const h=L([&quot;ID&quot;,&quot;Name&quot;,&quot;Job&quot;,&quot;Maintenance&quot;,&quot;Area&quot;,&quot;Company&quot;,&quot;Employee&quot;,&quot;Date&quot;,&quot;Sale&quot;,&quot;Paid&quot;,&quot;Remaining&quot;,&quot;Cost&quot;,&quot;Profit&quot;,&quot;Status&quot;,&quot;Payment&quot;,&quot;Notes&quot;],\n            [&quot;\u0631\u0642\u0645&quot;,&quot;\u0627\u0644\u0627\u0633\u0645&quot;,&quot;\u0627\u0644\u0639\u0645\u0644&quot;,&quot;\u0627\u0644\u0635\u064a\u0627\u0646\u0629&quot;,&quot;\u0627\u0644\u0645\u0646\u0637\u0642\u0629&quot;,&quot;\u0627\u0644\u0634\u0631\u0643\u0629&quot;,&quot;\u0627\u0644\u0645\u0648\u0638\u0641&quot;,&quot;\u0627\u0644\u062a\u0627\u0631\u064a\u062e&quot;,&quot;\u0627\u0644\u0628\u064a\u0639&quot;,&quot;\u0627\u0644\u0645\u062f\u0641\u0648\u0639&quot;,&quot;\u0627\u0644\u0645\u062a\u0628\u0642\u064a&quot;,&quot;\u0627\u0644\u062a\u0643\u0644\u0641\u0629&quot;,&quot;\u0627\u0644\u0631\u0628\u062d&quot;,&quot;\u0627\u0644\u062d\u0627\u0644\u0629&quot;,&quot;\u0627\u0644\u062f\u0641\u0639&quot;,&quot;\u0645\u0644\u0627\u062d\u0638\u0627\u062a&quot;]);\n  const rows=[h];\n  state.jobs.forEach(j=&gt;{const rem=(+j.sale||0)-(+j.paid||0),prof=(+j.sale||0)-(+j.cost||0),ps=payStatus(j);\n    rows.push([j.id,j.name,svcLabel(j.service)[state.lang===&quot;ar&quot;?0:1],j.maint||&quot;&quot;,j.area||&quot;&quot;,j.company||&quot;&quot;,empName(j.employeeId),j.date||&quot;&quot;,(+j.sale||0).toFixed(3),(+j.paid||0).toFixed(3),rem.toFixed(3),(+j.cost||0).toFixed(3),prof.toFixed(3),L(STATUS_LABELS[j.status][0],STATUS_LABELS[j.status][1]),L(PAY_LABELS[ps][0],PAY_LABELS[ps][1]),j.notes||&quot;&quot;]);});\n  download(&quot;jobs_&quot;+today()+&quot;.csv&quot;,toCSV(rows));\n}\nfunction exportCosts(){\n  const h=L([&quot;Date&quot;,&quot;Category&quot;,&quot;Amount&quot;,&quot;Notes&quot;],[&quot;\u0627\u0644\u062a\u0627\u0631\u064a\u062e&quot;,&quot;\u0627\u0644\u0628\u0646\u062f&quot;,&quot;\u0627\u0644\u0645\u0628\u0644\u063a&quot;,&quot;\u0645\u0644\u0627\u062d\u0638\u0627\u062a&quot;]);\n  const rows=[h];\n  state.costs.forEach(c=&gt;{const cat=state.categories.find(x=&gt;x.id==c.categoryId);rows.push([c.date||&quot;&quot;,cat?(state.lang===&quot;ar&quot;?cat.ar:cat.en):&quot;&quot;,(+c.amount||0).toFixed(3),c.notes||&quot;&quot;]);});\n  download(&quot;costs_&quot;+today()+&quot;.csv&quot;,toCSV(rows));\n}\nfunction exportIncome(){\n  const h=L([&quot;Date&quot;,&quot;Client&quot;,&quot;Job&quot;,&quot;Sale&quot;,&quot;Paid&quot;,&quot;Remaining&quot;],[&quot;\u0627\u0644\u062a\u0627\u0631\u064a\u062e&quot;,&quot;\u0627\u0644\u0639\u0645\u064a\u0644&quot;,&quot;\u0627\u0644\u0639\u0645\u0644&quot;,&quot;\u0627\u0644\u0628\u064a\u0639&quot;,&quot;\u0627\u0644\u0645\u062f\u0641\u0648\u0639&quot;,&quot;\u0627\u0644\u0645\u062a\u0628\u0642\u064a&quot;]);\n  const rows=[h];\n  state.jobs.forEach(j=&gt;{const rem=(+j.sale||0)-(+j.paid||0);rows.push([j.date||&quot;&quot;,j.name,svcLabel(j.service)[state.lang===&quot;ar&quot;?0:1],(+j.sale||0).toFixed(3),(+j.paid||0).toFixed(3),rem.toFixed(3)]);});\n  download(&quot;income_&quot;+today()+&quot;.csv&quot;,toCSV(rows));\n}\n\n\/* ---- language ---- *\/\nfunction applyLang(){\n  const isAr=state.lang===&quot;ar&quot;;\n  document.documentElement.lang=isAr?&quot;ar&quot;:&quot;en&quot;;\n  document.documentElement.dir=isAr?&quot;rtl&quot;:&quot;ltr&quot;;\n  document.querySelectorAll(&quot;[data-en]&quot;).forEach(el=&gt;{const v=isAr?el.dataset.ar:el.dataset.en;if(v!=null)el.textContent=v;});\n  document.querySelectorAll(&quot;[data-en-ph]&quot;).forEach(el=&gt;{const v=isAr?el.dataset.arPh:el.dataset.enPh;if(v!=null)el.placeholder=v;});\n}\n\n\/* ---- routing ---- *\/\nfunction go(view){\n  document.querySelectorAll(&quot;.nav-link&quot;).forEach(b=&gt;b.classList.toggle(&quot;active&quot;,b.dataset.view===view));\n  document.querySelectorAll(&quot;.view&quot;).forEach(v=&gt;v.classList.remove(&quot;active&quot;));\n  document.getElementById(&quot;view-&quot;+view).classList.add(&quot;active&quot;);\n  render(view);\n}\nfunction render(view){\n  ({dashboard:renderDashboard,jobs:renderJobs,income:renderIncome,costs:renderCosts,employees:renderEmployees,settings:renderSettings}[view]||renderDashboard)();\n  applyLang();\n}\n\n\/* ---- dashboard ---- *\/\nfunction renderDashboard(){\n  const p=state.dashPeriod;\n  const jobs=state.jobs.filter(j=&gt;inPeriod(j.date,p));\n  const sales=jobs.reduce((a,j)=&gt;a+(+j.sale||0),0);\n  const collected=jobs.reduce((a,j)=&gt;a+(+j.paid||0),0);\n  const outstanding=jobs.reduce((a,j)=&gt;a+((+j.sale||0)-(+j.paid||0)),0);\n  const jobCosts=jobs.reduce((a,j)=&gt;a+(+j.cost||0),0);\n  const overhead=state.costs.filter(c=&gt;inPeriod(c.date,p)).reduce((a,c)=&gt;a+(+c.amount||0),0);\n  const totalCosts=jobCosts+overhead;\n  const net=sales-totalCosts;\n  const sc={completed:0,pending:0,not_started:0};\n  jobs.forEach(j=&gt;sc[j.status]=(sc[j.status]||0)+1);\n  const byCat={};\n  state.costs.filter(c=&gt;inPeriod(c.date,p)).forEach(c=&gt;{byCat[c.categoryId]=(byCat[c.categoryId]||0)+(+c.amount||0);});\n  const breakdown=Object.entries(byCat).map(([id,total])=&gt;{const cat=state.categories.find(c=&gt;c.id==id);return{en:cat?cat.en:&quot;Uncategorized&quot;,ar:cat?cat.ar:&quot;\u063a\u064a\u0631 \u0645\u0635\u0646\u0651\u0641&quot;,total};}).filter(b=&gt;b.total&gt;0).sort((a,b)=&gt;b.total-a.total);\n  const maxv=breakdown.length?breakdown[0].total:0;\n  const tab=(key,en,ar)=&gt;`&lt;button class=&quot;${p===key?&#039;on&#039;:&#039;&#039;}&quot; onclick=&quot;state.dashPeriod=&#039;${key}&#039;;save();render(&#039;dashboard&#039;)&quot; data-en=&quot;${en}&quot; data-ar=&quot;${ar}&quot;&gt;${en}&lt;\/button&gt;`;\n  document.getElementById(&quot;view-dashboard&quot;).innerHTML=`\n  &lt;header class=&quot;page-head&quot;&gt;\n    &lt;div&gt;&lt;h1 data-en=&quot;Dashboard&quot; data-ar=&quot;\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629&quot;&gt;Dashboard&lt;\/h1&gt;&lt;p class=&quot;muted&quot; data-en=&quot;Sales, costs and net income&quot; data-ar=&quot;\u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a \u0648\u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641 \u0648\u0635\u0627\u0641\u064a \u0627\u0644\u062f\u062e\u0644&quot;&gt;overview&lt;\/p&gt;&lt;\/div&gt;\n    &lt;div class=&quot;period-tabs&quot;&gt;${tab(&quot;month&quot;,&quot;This Month&quot;,&quot;\u0647\u0630\u0627 \u0627\u0644\u0634\u0647\u0631&quot;)}${tab(&quot;year&quot;,&quot;This Year&quot;,&quot;\u0647\u0630\u0647 \u0627\u0644\u0633\u0646\u0629&quot;)}${tab(&quot;all&quot;,&quot;All Time&quot;,&quot;\u0643\u0644 \u0627\u0644\u0648\u0642\u062a&quot;)}&lt;\/div&gt;\n  &lt;\/header&gt;\n  &lt;section class=&quot;kpi-grid&quot;&gt;\n    &lt;div class=&quot;kpi accent-blue&quot;&gt;&lt;span class=&quot;kpi-label&quot; data-en=&quot;Sales&quot; data-ar=&quot;\u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a&quot;&gt;Sales&lt;\/span&gt;&lt;span class=&quot;kpi-value&quot;&gt;${kwd(sales)} &lt;small&gt;KWD&lt;\/small&gt;&lt;\/span&gt;&lt;\/div&gt;\n    &lt;div class=&quot;kpi accent-red&quot;&gt;&lt;span class=&quot;kpi-label&quot; data-en=&quot;Total Costs&quot; data-ar=&quot;\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641&quot;&gt;Total Costs&lt;\/span&gt;&lt;span class=&quot;kpi-value&quot;&gt;${kwd(totalCosts)} &lt;small&gt;KWD&lt;\/small&gt;&lt;\/span&gt;&lt;\/div&gt;\n    &lt;div class=&quot;kpi ${net&lt;0?&#039;accent-amber&#039;:&#039;accent-green&#039;}&quot;&gt;&lt;span class=&quot;kpi-label&quot; data-en=&quot;Net Income&quot; data-ar=&quot;\u0635\u0627\u0641\u064a \u0627\u0644\u062f\u062e\u0644&quot;&gt;Net Income&lt;\/span&gt;&lt;span class=&quot;kpi-value ${net&lt;0?&#039;neg&#039;:&#039;pos&#039;}&quot;&gt;${kwd(net)} &lt;small&gt;KWD&lt;\/small&gt;&lt;\/span&gt;&lt;\/div&gt;\n    &lt;div class=&quot;kpi accent-slate&quot;&gt;&lt;span class=&quot;kpi-label&quot; data-en=&quot;Jobs&quot; data-ar=&quot;\u0639\u062f\u062f \u0627\u0644\u0623\u0639\u0645\u0627\u0644&quot;&gt;Jobs&lt;\/span&gt;&lt;span class=&quot;kpi-value&quot;&gt;${jobs.length}&lt;\/span&gt;&lt;\/div&gt;\n  &lt;\/section&gt;\n  &lt;section class=&quot;panel-row&quot;&gt;\n    &lt;div class=&quot;panel&quot;&gt;\n      &lt;h2 data-en=&quot;Income Statement&quot; data-ar=&quot;\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062f\u062e\u0644&quot;&gt;Income Statement&lt;\/h2&gt;\n      &lt;div class=&quot;pnl-line&quot;&gt;&lt;span data-en=&quot;Sales&quot; data-ar=&quot;\u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a&quot;&gt;Sales&lt;\/span&gt;&lt;b&gt;${kwd(sales)}&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;pnl-line minus&quot;&gt;&lt;span data-en=&quot;Job costs&quot; data-ar=&quot;\u062a\u0643\u0627\u0644\u064a\u0641 \u0627\u0644\u0623\u0639\u0645\u0627\u0644&quot;&gt;Job costs&lt;\/span&gt;&lt;b&gt;\u2212 ${kwd(jobCosts)}&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;pnl-line minus&quot;&gt;&lt;span data-en=&quot;Overhead \/ expenses&quot; data-ar=&quot;\u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641 \u0627\u0644\u0639\u0627\u0645\u0629&quot;&gt;Overhead&lt;\/span&gt;&lt;b&gt;\u2212 ${kwd(overhead)}&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;pnl-line total ${net&lt;0?&#039;neg&#039;:&#039;&#039;}&quot;&gt;&lt;span data-en=&quot;Net income&quot; data-ar=&quot;\u0635\u0627\u0641\u064a \u0627\u0644\u062f\u062e\u0644&quot;&gt;Net income&lt;\/span&gt;&lt;b&gt;${kwd(net)} &lt;small&gt;KWD&lt;\/small&gt;&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;pnl-line&quot; style=&quot;border:none;padding-top:14px&quot;&gt;&lt;span class=&quot;muted&quot; data-en=&quot;Collected&quot; data-ar=&quot;\u0627\u0644\u0645\u062d\u0635\u0651\u0644&quot;&gt;Collected&lt;\/span&gt;&lt;b&gt;${kwd(collected)}&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;pnl-line&quot; style=&quot;border:none;padding-top:0&quot;&gt;&lt;span class=&quot;muted&quot; data-en=&quot;Outstanding (unpaid)&quot; data-ar=&quot;\u0627\u0644\u0645\u062a\u0628\u0642\u064a (\u063a\u064a\u0631 \u0645\u062d\u0635\u0651\u0644)&quot;&gt;Outstanding&lt;\/span&gt;&lt;b class=&quot;${outstanding&gt;0?&#039;&#039;:&#039;&#039;}&quot;&gt;${kwd(outstanding)}&lt;\/b&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;panel&quot;&gt;\n      &lt;h2 data-en=&quot;Work Status&quot; data-ar=&quot;\u062d\u0627\u0644\u0629 \u0627\u0644\u0639\u0645\u0644&quot;&gt;Status&lt;\/h2&gt;\n      &lt;div class=&quot;status-bars&quot;&gt;\n        &lt;div class=&quot;status-bar&quot;&gt;&lt;span class=&quot;dot s-completed&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;sb-label&quot; data-en=&quot;Completed&quot; data-ar=&quot;\u0645\u0646\u062c\u0632&quot;&gt;Completed&lt;\/span&gt;&lt;span class=&quot;sb-count&quot;&gt;${sc.completed}&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;status-bar&quot;&gt;&lt;span class=&quot;dot s-pending&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;sb-label&quot; data-en=&quot;Pending&quot; data-ar=&quot;\u0642\u064a\u062f \u0627\u0644\u062a\u0646\u0641\u064a\u0630&quot;&gt;Pending&lt;\/span&gt;&lt;span class=&quot;sb-count&quot;&gt;${sc.pending}&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;status-bar&quot;&gt;&lt;span class=&quot;dot s-not_started&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;sb-label&quot; data-en=&quot;Not started&quot; data-ar=&quot;\u0644\u0645 \u064a\u0628\u062f\u0623&quot;&gt;Not started&lt;\/span&gt;&lt;span class=&quot;sb-count&quot;&gt;${sc.not_started}&lt;\/span&gt;&lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/section&gt;\n  &lt;section class=&quot;panel&quot;&gt;\n    &lt;h2 data-en=&quot;Expense Breakdown&quot; data-ar=&quot;\u062a\u0641\u0635\u064a\u0644 \u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641&quot;&gt;Expense Breakdown&lt;\/h2&gt;\n    ${breakdown.length?`&lt;table class=&quot;mini-table&quot;&gt;&lt;tbody&gt;${breakdown.map(b=&gt;`\n      &lt;tr&gt;&lt;td class=&quot;cat&quot;&gt;&lt;span data-en=&quot;${esc(b.en)}&quot; data-ar=&quot;${esc(b.ar)}&quot;&gt;${esc(b.en)}&lt;\/span&gt;&lt;\/td&gt;\n      &lt;td class=&quot;barcell&quot;&gt;&lt;span class=&quot;bar&quot; style=&quot;width:${maxv?b.total\/maxv*100:0}%&quot;&gt;&lt;\/span&gt;&lt;\/td&gt;\n      &lt;td class=&quot;amt&quot;&gt;${kwd(b.total)}&lt;\/td&gt;&lt;\/tr&gt;`).join(&quot;&quot;)}&lt;\/tbody&gt;&lt;\/table&gt;`\n    :`&lt;p class=&quot;empty&quot; data-en=&quot;No expenses recorded for this period.&quot; data-ar=&quot;\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0635\u0627\u0631\u064a\u0641 \u0645\u0633\u062c\u0644\u0629 \u0644\u0647\u0630\u0647 \u0627\u0644\u0641\u062a\u0631\u0629.&quot;&gt;none&lt;\/p&gt;`}\n  &lt;\/section&gt;`;\n}\n\n\/* ---- jobs ---- *\/\nfunction renderJobs(){\n  const f=state.jobFilters;\n  let rows=state.jobs.slice().sort((a,b)=&gt;(b.date||&quot;&quot;).localeCompare(a.date||&quot;&quot;)||b.id-a.id);\n  if(f.status)rows=rows.filter(j=&gt;j.status===f.status);\n  if(f.payment)rows=rows.filter(j=&gt;payStatus(j)===f.payment);\n  if(f.q){const q=f.q.toLowerCase();rows=rows.filter(j=&gt;[j.name,j.service,j.area,j.company,j.notes].some(v=&gt;(v||&quot;&quot;).toLowerCase().includes(q)));}\n  document.getElementById(&quot;view-jobs&quot;).innerHTML=`\n  &lt;header class=&quot;page-head&quot;&gt;\n    &lt;div&gt;&lt;h1 data-en=&quot;Jobs&quot; data-ar=&quot;\u0627\u0644\u0623\u0639\u0645\u0627\u0644&quot;&gt;Jobs&lt;\/h1&gt;&lt;p class=&quot;muted&quot; data-en=&quot;Record every job, payment and profit&quot; data-ar=&quot;\u0633\u062c\u0651\u0644 \u0643\u0644 \u0639\u0645\u0644 \u0648\u062f\u0641\u0639\u0629 \u0648\u0631\u0628\u062d&quot;&gt;jobs&lt;\/p&gt;&lt;\/div&gt;\n    &lt;div class=&quot;head-actions&quot;&gt;\n      &lt;button class=&quot;btn&quot; onclick=&quot;exportJobs()&quot;&gt;\u2b07 &lt;span data-en=&quot;Export CSV&quot; data-ar=&quot;\u062a\u0635\u062f\u064a\u0631 CSV&quot;&gt;Export CSV&lt;\/span&gt;&lt;\/button&gt;\n      &lt;button class=&quot;btn primary&quot; onclick=&quot;openJob()&quot;&gt;+ &lt;span data-en=&quot;Add Job&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629 \u0639\u0645\u0644&quot;&gt;Add Job&lt;\/span&gt;&lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/header&gt;\n  &lt;div class=&quot;filters&quot;&gt;\n    &lt;input type=&quot;search&quot; id=&quot;job-q&quot; value=&quot;${esc(f.q)}&quot; data-en-ph=&quot;Search name, job, area, notes\u2026&quot; data-ar-ph=&quot;\u0627\u0628\u062d\u062b \u0628\u0627\u0644\u0627\u0633\u0645 \u0623\u0648 \u0627\u0644\u0639\u0645\u0644 \u0623\u0648 \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0623\u0648 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a\u2026&quot; oninput=&quot;state.jobFilters.q=this.value;renderJobs();applyLang();document.getElementById(&#039;job-q&#039;).focus();&quot;&gt;\n    &lt;select id=&quot;job-status&quot; onchange=&quot;state.jobFilters.status=this.value;renderJobs();applyLang()&quot;&gt;\n      &lt;option value=&quot;&quot; data-en=&quot;All statuses&quot; data-ar=&quot;\u0643\u0644 \u0627\u0644\u062d\u0627\u0644\u0627\u062a&quot;&gt;All&lt;\/option&gt;\n      &lt;option value=&quot;not_started&quot; ${f.status===&quot;not_started&quot;?&quot;selected&quot;:&quot;&quot;} data-en=&quot;Not started&quot; data-ar=&quot;\u0644\u0645 \u064a\u0628\u062f\u0623&quot;&gt;Not started&lt;\/option&gt;\n      &lt;option value=&quot;pending&quot; ${f.status===&quot;pending&quot;?&quot;selected&quot;:&quot;&quot;} data-en=&quot;Pending&quot; data-ar=&quot;\u0642\u064a\u062f \u0627\u0644\u062a\u0646\u0641\u064a\u0630&quot;&gt;Pending&lt;\/option&gt;\n      &lt;option value=&quot;completed&quot; ${f.status===&quot;completed&quot;?&quot;selected&quot;:&quot;&quot;} data-en=&quot;Completed&quot; data-ar=&quot;\u0645\u0646\u062c\u0632&quot;&gt;Completed&lt;\/option&gt;\n    &lt;\/select&gt;\n    &lt;select id=&quot;job-pay&quot; onchange=&quot;state.jobFilters.payment=this.value;renderJobs();applyLang()&quot;&gt;\n      &lt;option value=&quot;&quot; data-en=&quot;All payments&quot; data-ar=&quot;\u0643\u0644 \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0627\u062a&quot;&gt;All&lt;\/option&gt;\n      &lt;option value=&quot;paid&quot; ${f.payment===&quot;paid&quot;?&quot;selected&quot;:&quot;&quot;} data-en=&quot;Fully paid&quot; data-ar=&quot;\u0645\u062f\u0641\u0648\u0639 \u0628\u0627\u0644\u0643\u0627\u0645\u0644&quot;&gt;Paid&lt;\/option&gt;\n      &lt;option value=&quot;partial&quot; ${f.payment===&quot;partial&quot;?&quot;selected&quot;:&quot;&quot;} data-en=&quot;Partial&quot; data-ar=&quot;\u0645\u062f\u0641\u0648\u0639 \u062c\u0632\u0626\u064a\u0627\u064b&quot;&gt;Partial&lt;\/option&gt;\n      &lt;option value=&quot;unpaid&quot; ${f.payment===&quot;unpaid&quot;?&quot;selected&quot;:&quot;&quot;} data-en=&quot;Unpaid&quot; data-ar=&quot;\u063a\u064a\u0631 \u0645\u062f\u0641\u0648\u0639&quot;&gt;Unpaid&lt;\/option&gt;\n    &lt;\/select&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;table-wrap&quot;&gt;&lt;table class=&quot;data-table&quot;&gt;&lt;thead&gt;&lt;tr&gt;\n    &lt;th data-en=&quot;ID&quot; data-ar=&quot;\u0631\u0642\u0645&quot;&gt;ID&lt;\/th&gt;&lt;th data-en=&quot;Name&quot; data-ar=&quot;\u0627\u0644\u0627\u0633\u0645&quot;&gt;Name&lt;\/th&gt;&lt;th data-en=&quot;Job&quot; data-ar=&quot;\u0627\u0644\u0639\u0645\u0644&quot;&gt;Job&lt;\/th&gt;\n    &lt;th data-en=&quot;Area&quot; data-ar=&quot;\u0627\u0644\u0645\u0646\u0637\u0642\u0629&quot;&gt;Area&lt;\/th&gt;&lt;th data-en=&quot;Employee&quot; data-ar=&quot;\u0627\u0644\u0645\u0648\u0638\u0641&quot;&gt;Employee&lt;\/th&gt;&lt;th data-en=&quot;Date&quot; data-ar=&quot;\u0627\u0644\u062a\u0627\u0631\u064a\u062e&quot;&gt;Date&lt;\/th&gt;\n    &lt;th class=&quot;num&quot; data-en=&quot;Sale&quot; data-ar=&quot;\u0627\u0644\u0628\u064a\u0639&quot;&gt;Sale&lt;\/th&gt;&lt;th class=&quot;num&quot; data-en=&quot;Paid&quot; data-ar=&quot;\u0627\u0644\u0645\u062f\u0641\u0648\u0639&quot;&gt;Paid&lt;\/th&gt;\n    &lt;th class=&quot;num&quot; data-en=&quot;Remaining&quot; data-ar=&quot;\u0627\u0644\u0645\u062a\u0628\u0642\u064a&quot;&gt;Remaining&lt;\/th&gt;&lt;th class=&quot;num&quot; data-en=&quot;Cost&quot; data-ar=&quot;\u0627\u0644\u062a\u0643\u0644\u0641\u0629&quot;&gt;Cost&lt;\/th&gt;\n    &lt;th class=&quot;num&quot; data-en=&quot;Profit&quot; data-ar=&quot;\u0627\u0644\u0631\u0628\u062d&quot;&gt;Profit&lt;\/th&gt;&lt;th data-en=&quot;Status&quot; data-ar=&quot;\u0627\u0644\u062d\u0627\u0644\u0629&quot;&gt;Status&lt;\/th&gt;\n    &lt;th data-en=&quot;Payment&quot; data-ar=&quot;\u0627\u0644\u062f\u0641\u0639&quot;&gt;Payment&lt;\/th&gt;&lt;th&gt;&lt;\/th&gt;&lt;\/tr&gt;&lt;\/thead&gt;&lt;tbody&gt;\n    ${rows.length?rows.map(j=&gt;{const rem=(+j.sale||0)-(+j.paid||0),prof=(+j.sale||0)-(+j.cost||0),ps=payStatus(j);return `\n    &lt;tr&gt;&lt;td class=&quot;muted&quot;&gt;#${j.id}&lt;\/td&gt;\n    &lt;td&gt;&lt;div class=&quot;cell-strong&quot;&gt;${esc(j.name)}&lt;\/div&gt;${j.company?`&lt;div class=&quot;cell-sub&quot;&gt;${esc(j.company)}&lt;\/div&gt;`:&quot;&quot;}${j.notes?`&lt;div class=&quot;cell-sub&quot; title=&quot;${esc(j.notes)}&quot;&gt;\ud83d\udcdd ${esc(j.notes.length&gt;40?j.notes.slice(0,40)+&#039;\u2026&#039;:j.notes)}&lt;\/div&gt;`:&quot;&quot;}&lt;\/td&gt;\n    &lt;td&gt;${jobLabelHtml(j.service)}${j.maint?`&lt;div class=&quot;cell-sub&quot;&gt;${esc(j.maint)}&lt;\/div&gt;`:&quot;&quot;}&lt;\/td&gt;&lt;td&gt;${esc(j.area)||&quot;\u2014&quot;}&lt;\/td&gt;&lt;td&gt;${esc(empName(j.employeeId))||&quot;\u2014&quot;}&lt;\/td&gt;&lt;td class=&quot;nowrap&quot;&gt;${j.date||&quot;\u2014&quot;}&lt;\/td&gt;\n    &lt;td class=&quot;num&quot;&gt;${kwd(j.sale)}&lt;\/td&gt;&lt;td class=&quot;num&quot;&gt;${kwd(j.paid)}&lt;\/td&gt;\n    &lt;td class=&quot;num ${rem&gt;0?&#039;warn&#039;:&#039;&#039;}&quot;&gt;${kwd(rem)}&lt;\/td&gt;&lt;td class=&quot;num&quot;&gt;${kwd(j.cost)}&lt;\/td&gt;\n    &lt;td class=&quot;num ${prof&gt;=0?&#039;pos&#039;:&#039;neg&#039;}&quot;&gt;${kwd(prof)}&lt;\/td&gt;\n    &lt;td&gt;&lt;span class=&quot;pill s-${j.status}&quot; data-en=&quot;${STATUS_LABELS[j.status][0]}&quot; data-ar=&quot;${STATUS_LABELS[j.status][1]}&quot;&gt;${STATUS_LABELS[j.status][0]}&lt;\/span&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;span class=&quot;pill p-${ps}&quot; data-en=&quot;${PAY_LABELS[ps][0]}&quot; data-ar=&quot;${PAY_LABELS[ps][1]}&quot;&gt;${PAY_LABELS[ps][0]}&lt;\/span&gt;&lt;\/td&gt;\n    &lt;td class=&quot;actions&quot;&gt;&lt;button class=&quot;icon-btn&quot; onclick=&quot;openJob(${j.id})&quot;&gt;\u270e&lt;\/button&gt;&lt;button class=&quot;icon-btn danger&quot; onclick=&quot;delJob(${j.id})&quot;&gt;\ud83d\uddd1&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;`;}).join(&quot;&quot;)\n    :`&lt;tr&gt;&lt;td colspan=&quot;14&quot; class=&quot;empty&quot; data-en=&quot;No jobs yet. Add your first one.&quot; data-ar=&quot;\u0644\u0627 \u062a\u0648\u062c\u062f \u0623\u0639\u0645\u0627\u0644 \u0628\u0639\u062f. \u0623\u0636\u0641 \u0623\u0648\u0644 \u0639\u0645\u0644.&quot;&gt;empty&lt;\/td&gt;&lt;\/tr&gt;`}\n  &lt;\/tbody&gt;&lt;\/table&gt;&lt;\/div&gt;`;\n}\n\n\/* ---- income (sales) ---- *\/\nfunction renderIncome(){\n  const p=state.incomePeriod;\n  const rows=state.jobs.filter(j=&gt;inPeriod(j.date,p)).sort((a,b)=&gt;(b.date||&quot;&quot;).localeCompare(a.date||&quot;&quot;)||b.id-a.id);\n  const sales=rows.reduce((a,j)=&gt;a+(+j.sale||0),0);\n  const collected=rows.reduce((a,j)=&gt;a+(+j.paid||0),0);\n  const outstanding=sales-collected;\n  const tab=(key,en,ar)=&gt;`&lt;button class=&quot;${p===key?&#039;on&#039;:&#039;&#039;}&quot; onclick=&quot;state.incomePeriod=&#039;${key}&#039;;save();render(&#039;income&#039;)&quot; data-en=&quot;${en}&quot; data-ar=&quot;${ar}&quot;&gt;${en}&lt;\/button&gt;`;\n  document.getElementById(&quot;view-income&quot;).innerHTML=`\n  &lt;header class=&quot;page-head&quot;&gt;\n    &lt;div&gt;&lt;h1 data-en=&quot;Income (Sales)&quot; data-ar=&quot;\u0627\u0644\u062f\u062e\u0644 (\u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a)&quot;&gt;Income&lt;\/h1&gt;&lt;p class=&quot;muted&quot; data-en=&quot;Money earned from jobs&quot; data-ar=&quot;\u0627\u0644\u0623\u0645\u0648\u0627\u0644 \u0627\u0644\u0645\u0643\u062a\u0633\u0628\u0629 \u0645\u0646 \u0627\u0644\u0623\u0639\u0645\u0627\u0644&quot;&gt;sales ledger&lt;\/p&gt;&lt;\/div&gt;\n    &lt;button class=&quot;btn&quot; onclick=&quot;exportIncome()&quot;&gt;\u2b07 &lt;span data-en=&quot;Export CSV&quot; data-ar=&quot;\u062a\u0635\u062f\u064a\u0631 CSV&quot;&gt;Export CSV&lt;\/span&gt;&lt;\/button&gt;\n  &lt;\/header&gt;\n  &lt;section class=&quot;kpi-grid&quot;&gt;\n    &lt;div class=&quot;kpi accent-blue&quot;&gt;&lt;span class=&quot;kpi-label&quot; data-en=&quot;Total Sales&quot; data-ar=&quot;\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a&quot;&gt;Total Sales&lt;\/span&gt;&lt;span class=&quot;kpi-value&quot;&gt;${kwd(sales)} &lt;small&gt;KWD&lt;\/small&gt;&lt;\/span&gt;&lt;\/div&gt;\n    &lt;div class=&quot;kpi accent-green&quot;&gt;&lt;span class=&quot;kpi-label&quot; data-en=&quot;Collected&quot; data-ar=&quot;\u0627\u0644\u0645\u062d\u0635\u0651\u0644&quot;&gt;Collected&lt;\/span&gt;&lt;span class=&quot;kpi-value&quot;&gt;${kwd(collected)} &lt;small&gt;KWD&lt;\/small&gt;&lt;\/span&gt;&lt;\/div&gt;\n    &lt;div class=&quot;kpi accent-amber&quot;&gt;&lt;span class=&quot;kpi-label&quot; data-en=&quot;Outstanding&quot; data-ar=&quot;\u0627\u0644\u0645\u062a\u0628\u0642\u064a&quot;&gt;Outstanding&lt;\/span&gt;&lt;span class=&quot;kpi-value&quot;&gt;${kwd(outstanding)} &lt;small&gt;KWD&lt;\/small&gt;&lt;\/span&gt;&lt;\/div&gt;\n    &lt;div class=&quot;kpi accent-slate&quot;&gt;&lt;span class=&quot;kpi-label&quot; data-en=&quot;Entries&quot; data-ar=&quot;\u0639\u062f\u062f \u0627\u0644\u0633\u062c\u0644\u0627\u062a&quot;&gt;Entries&lt;\/span&gt;&lt;span class=&quot;kpi-value&quot;&gt;${rows.length}&lt;\/span&gt;&lt;\/div&gt;\n  &lt;\/section&gt;\n  &lt;div class=&quot;period-tabs left&quot;&gt;${tab(&quot;month&quot;,&quot;This Month&quot;,&quot;\u0647\u0630\u0627 \u0627\u0644\u0634\u0647\u0631&quot;)}${tab(&quot;year&quot;,&quot;This Year&quot;,&quot;\u0647\u0630\u0647 \u0627\u0644\u0633\u0646\u0629&quot;)}${tab(&quot;all&quot;,&quot;All Time&quot;,&quot;\u0643\u0644 \u0627\u0644\u0648\u0642\u062a&quot;)}&lt;\/div&gt;\n  &lt;div class=&quot;table-wrap&quot;&gt;&lt;table class=&quot;data-table&quot;&gt;&lt;thead&gt;&lt;tr&gt;\n    &lt;th data-en=&quot;Date&quot; data-ar=&quot;\u0627\u0644\u062a\u0627\u0631\u064a\u062e&quot;&gt;Date&lt;\/th&gt;&lt;th data-en=&quot;Client&quot; data-ar=&quot;\u0627\u0644\u0639\u0645\u064a\u0644&quot;&gt;Client&lt;\/th&gt;&lt;th data-en=&quot;Job&quot; data-ar=&quot;\u0627\u0644\u0639\u0645\u0644&quot;&gt;Job&lt;\/th&gt;\n    &lt;th class=&quot;num&quot; data-en=&quot;Sale&quot; data-ar=&quot;\u0627\u0644\u0628\u064a\u0639&quot;&gt;Sale&lt;\/th&gt;&lt;th class=&quot;num&quot; data-en=&quot;Paid&quot; data-ar=&quot;\u0627\u0644\u0645\u062f\u0641\u0648\u0639&quot;&gt;Paid&lt;\/th&gt;&lt;th class=&quot;num&quot; data-en=&quot;Remaining&quot; data-ar=&quot;\u0627\u0644\u0645\u062a\u0628\u0642\u064a&quot;&gt;Remaining&lt;\/th&gt;&lt;\/tr&gt;&lt;\/thead&gt;&lt;tbody&gt;\n    ${rows.length?rows.map(j=&gt;{const rem=(+j.sale||0)-(+j.paid||0);return `&lt;tr&gt;&lt;td class=&quot;nowrap&quot;&gt;${j.date||&quot;\u2014&quot;}&lt;\/td&gt;&lt;td class=&quot;cell-strong&quot;&gt;${esc(j.name)}&lt;\/td&gt;&lt;td&gt;${jobLabelHtml(j.service)}&lt;\/td&gt;\n    &lt;td class=&quot;num&quot;&gt;${kwd(j.sale)}&lt;\/td&gt;&lt;td class=&quot;num&quot;&gt;${kwd(j.paid)}&lt;\/td&gt;&lt;td class=&quot;num ${rem&gt;0?&#039;warn&#039;:&#039;&#039;}&quot;&gt;${kwd(rem)}&lt;\/td&gt;&lt;\/tr&gt;`;}).join(&quot;&quot;)\n    :`&lt;tr&gt;&lt;td colspan=&quot;6&quot; class=&quot;empty&quot; data-en=&quot;No sales in this period.&quot; data-ar=&quot;\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0628\u064a\u0639\u0627\u062a \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0641\u062a\u0631\u0629.&quot;&gt;empty&lt;\/td&gt;&lt;\/tr&gt;`}\n  &lt;\/tbody&gt;${rows.length?`&lt;tfoot&gt;&lt;tr&gt;&lt;td colspan=&quot;3&quot; data-en=&quot;Total&quot; data-ar=&quot;\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a&quot;&gt;Total&lt;\/td&gt;&lt;td class=&quot;num&quot;&gt;${kwd(sales)}&lt;\/td&gt;&lt;td class=&quot;num&quot;&gt;${kwd(collected)}&lt;\/td&gt;&lt;td class=&quot;num&quot;&gt;${kwd(outstanding)}&lt;\/td&gt;&lt;\/tr&gt;&lt;\/tfoot&gt;`:&quot;&quot;}&lt;\/table&gt;&lt;\/div&gt;`;\n}\n\n\/* ---- costs ---- *\/\nfunction renderCosts(){\n  const p=state.costPeriod;\n  const rows=state.costs.filter(c=&gt;inPeriod(c.date,p)).sort((a,b)=&gt;(b.date||&quot;&quot;).localeCompare(a.date||&quot;&quot;)||b.id-a.id);\n  const total=rows.reduce((a,c)=&gt;a+(+c.amount||0),0);\n  const catName=id=&gt;{const c=state.categories.find(c=&gt;c.id==id);return c?[c.en,c.ar]:[&quot;Uncategorized&quot;,&quot;\u063a\u064a\u0631 \u0645\u0635\u0646\u0651\u0641&quot;];};\n  const tab=(key,en,ar)=&gt;`&lt;button class=&quot;${p===key?&#039;on&#039;:&#039;&#039;}&quot; onclick=&quot;state.costPeriod=&#039;${key}&#039;;save();render(&#039;costs&#039;)&quot; data-en=&quot;${en}&quot; data-ar=&quot;${ar}&quot;&gt;${en}&lt;\/button&gt;`;\n  document.getElementById(&quot;view-costs&quot;).innerHTML=`\n  &lt;header class=&quot;page-head&quot;&gt;\n    &lt;div&gt;&lt;h1 data-en=&quot;Costs &amp;amp; Expenses&quot; data-ar=&quot;\u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641 \u0648\u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641&quot;&gt;Costs&lt;\/h1&gt;&lt;p class=&quot;muted&quot; data-en=&quot;Overhead: rent, salaries, fuel, and anything you add&quot; data-ar=&quot;\u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641 \u0627\u0644\u0639\u0627\u0645\u0629: \u0627\u0644\u0625\u064a\u062c\u0627\u0631\u060c \u0627\u0644\u0631\u0648\u0627\u062a\u0628\u060c \u0627\u0644\u0648\u0642\u0648\u062f\u060c \u0648\u0623\u064a \u0628\u0646\u062f \u062a\u0636\u064a\u0641\u0647&quot;&gt;overhead&lt;\/p&gt;&lt;\/div&gt;\n    &lt;div class=&quot;head-actions&quot;&gt;\n      &lt;button class=&quot;btn&quot; onclick=&quot;exportCosts()&quot;&gt;\u2b07 &lt;span data-en=&quot;Export CSV&quot; data-ar=&quot;\u062a\u0635\u062f\u064a\u0631 CSV&quot;&gt;Export CSV&lt;\/span&gt;&lt;\/button&gt;\n      &lt;button class=&quot;btn primary&quot; onclick=&quot;openCost()&quot;&gt;+ &lt;span data-en=&quot;Add Expense&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629 \u0645\u0635\u0631\u0648\u0641&quot;&gt;Add Expense&lt;\/span&gt;&lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/header&gt;\n  &lt;div class=&quot;period-tabs left&quot;&gt;${tab(&quot;month&quot;,&quot;This Month&quot;,&quot;\u0647\u0630\u0627 \u0627\u0644\u0634\u0647\u0631&quot;)}${tab(&quot;year&quot;,&quot;This Year&quot;,&quot;\u0647\u0630\u0647 \u0627\u0644\u0633\u0646\u0629&quot;)}${tab(&quot;all&quot;,&quot;All Time&quot;,&quot;\u0643\u0644 \u0627\u0644\u0648\u0642\u062a&quot;)}&lt;span class=&quot;total-badge&quot;&gt;&lt;span data-en=&quot;Total&quot; data-ar=&quot;\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a&quot;&gt;Total&lt;\/span&gt;: ${kwd(total)} KWD&lt;\/span&gt;&lt;\/div&gt;\n  &lt;div class=&quot;table-wrap&quot;&gt;&lt;table class=&quot;data-table&quot;&gt;&lt;thead&gt;&lt;tr&gt;\n    &lt;th data-en=&quot;Date&quot; data-ar=&quot;\u0627\u0644\u062a\u0627\u0631\u064a\u062e&quot;&gt;Date&lt;\/th&gt;&lt;th data-en=&quot;Category&quot; data-ar=&quot;\u0627\u0644\u0628\u0646\u062f&quot;&gt;Category&lt;\/th&gt;&lt;th class=&quot;num&quot; data-en=&quot;Amount&quot; data-ar=&quot;\u0627\u0644\u0645\u0628\u0644\u063a&quot;&gt;Amount&lt;\/th&gt;&lt;th data-en=&quot;Notes&quot; data-ar=&quot;\u0645\u0644\u0627\u062d\u0638\u0627\u062a&quot;&gt;Notes&lt;\/th&gt;&lt;th&gt;&lt;\/th&gt;&lt;\/tr&gt;&lt;\/thead&gt;&lt;tbody&gt;\n    ${rows.length?rows.map(c=&gt;{const cn=catName(c.categoryId);return `&lt;tr&gt;&lt;td class=&quot;nowrap&quot;&gt;${c.date}&lt;\/td&gt;\n    &lt;td&gt;&lt;span data-en=&quot;${esc(cn[0])}&quot; data-ar=&quot;${esc(cn[1])}&quot;&gt;${esc(cn[0])}&lt;\/span&gt;&lt;\/td&gt;\n    &lt;td class=&quot;num&quot;&gt;${kwd(c.amount)}&lt;\/td&gt;&lt;td class=&quot;muted&quot;&gt;${esc(c.notes)||&quot;\u2014&quot;}&lt;\/td&gt;\n    &lt;td class=&quot;actions&quot;&gt;&lt;button class=&quot;icon-btn&quot; onclick=&quot;openCost(${c.id})&quot;&gt;\u270e&lt;\/button&gt;&lt;button class=&quot;icon-btn danger&quot; onclick=&quot;delCost(${c.id})&quot;&gt;\ud83d\uddd1&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;`;}).join(&quot;&quot;)\n    :`&lt;tr&gt;&lt;td colspan=&quot;5&quot; class=&quot;empty&quot; data-en=&quot;No expenses recorded.&quot; data-ar=&quot;\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0635\u0627\u0631\u064a\u0641 \u0645\u0633\u062c\u0644\u0629.&quot;&gt;empty&lt;\/td&gt;&lt;\/tr&gt;`}\n  &lt;\/tbody&gt;&lt;\/table&gt;&lt;\/div&gt;`;\n}\n\n\/* ---- employees ---- *\/\nfunction renderEmployees(){\n  const rows=state.employees.slice().sort((a,b)=&gt;(b.active-a.active)||a.name.localeCompare(b.name));\n  const count=id=&gt;state.jobs.filter(j=&gt;j.employeeId==id).length;\n  document.getElementById(&quot;view-employees&quot;).innerHTML=`\n  &lt;header class=&quot;page-head&quot;&gt;&lt;div&gt;&lt;h1 data-en=&quot;Employees&quot; data-ar=&quot;\u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646&quot;&gt;Employees&lt;\/h1&gt;&lt;p class=&quot;muted&quot; data-en=&quot;The team that does the jobs&quot; data-ar=&quot;\u0627\u0644\u0641\u0631\u064a\u0642 \u0627\u0644\u0630\u064a \u064a\u0646\u0641\u0651\u0630 \u0627\u0644\u0623\u0639\u0645\u0627\u0644&quot;&gt;team&lt;\/p&gt;&lt;\/div&gt;\n  &lt;button class=&quot;btn primary&quot; onclick=&quot;openEmp()&quot;&gt;+ &lt;span data-en=&quot;Add Employee&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629 \u0645\u0648\u0638\u0641&quot;&gt;Add Employee&lt;\/span&gt;&lt;\/button&gt;&lt;\/header&gt;\n  &lt;div class=&quot;table-wrap&quot;&gt;&lt;table class=&quot;data-table&quot;&gt;&lt;thead&gt;&lt;tr&gt;\n    &lt;th data-en=&quot;Name&quot; data-ar=&quot;\u0627\u0644\u0627\u0633\u0645&quot;&gt;Name&lt;\/th&gt;&lt;th data-en=&quot;Role&quot; data-ar=&quot;\u0627\u0644\u0648\u0638\u064a\u0641\u0629&quot;&gt;Role&lt;\/th&gt;&lt;th data-en=&quot;Phone&quot; data-ar=&quot;\u0627\u0644\u0647\u0627\u062a\u0641&quot;&gt;Phone&lt;\/th&gt;\n    &lt;th class=&quot;num&quot; data-en=&quot;Jobs done&quot; data-ar=&quot;\u0627\u0644\u0623\u0639\u0645\u0627\u0644&quot;&gt;Jobs done&lt;\/th&gt;&lt;th data-en=&quot;Active&quot; data-ar=&quot;\u0646\u0634\u0637&quot;&gt;Active&lt;\/th&gt;&lt;th&gt;&lt;\/th&gt;&lt;\/tr&gt;&lt;\/thead&gt;&lt;tbody&gt;\n    ${rows.length?rows.map(e=&gt;`&lt;tr class=&quot;${e.active?&#039;&#039;:&#039;dim&#039;}&quot;&gt;&lt;td class=&quot;cell-strong&quot;&gt;${esc(e.name)}&lt;\/td&gt;&lt;td&gt;${esc(e.role)||&quot;\u2014&quot;}&lt;\/td&gt;&lt;td class=&quot;nowrap&quot;&gt;${esc(e.phone)||&quot;\u2014&quot;}&lt;\/td&gt;\n    &lt;td class=&quot;num&quot;&gt;${count(e.id)}&lt;\/td&gt;\n    &lt;td&gt;${e.active?`&lt;span class=&quot;pill p-paid&quot; data-en=&quot;Active&quot; data-ar=&quot;\u0646\u0634\u0637&quot;&gt;Active&lt;\/span&gt;`:`&lt;span class=&quot;pill p-unpaid&quot; data-en=&quot;Inactive&quot; data-ar=&quot;\u063a\u064a\u0631 \u0646\u0634\u0637&quot;&gt;Inactive&lt;\/span&gt;`}&lt;\/td&gt;\n    &lt;td class=&quot;actions&quot;&gt;&lt;button class=&quot;icon-btn&quot; onclick=&quot;openEmp(${e.id})&quot;&gt;\u270e&lt;\/button&gt;&lt;button class=&quot;icon-btn danger&quot; onclick=&quot;delEmp(${e.id})&quot;&gt;\ud83d\uddd1&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;`).join(&quot;&quot;)\n    :`&lt;tr&gt;&lt;td colspan=&quot;6&quot; class=&quot;empty&quot; data-en=&quot;No employees yet.&quot; data-ar=&quot;\u0644\u0627 \u064a\u0648\u062c\u062f \u0645\u0648\u0638\u0641\u0648\u0646 \u0628\u0639\u062f.&quot;&gt;empty&lt;\/td&gt;&lt;\/tr&gt;`}\n  &lt;\/tbody&gt;&lt;\/table&gt;&lt;\/div&gt;`;\n}\n\n\/* ---- settings (manage services, areas, categories) ---- *\/\nfunction renderSettings(){\n  document.getElementById(&quot;view-settings&quot;).innerHTML=`\n  &lt;header class=&quot;page-head&quot;&gt;&lt;div&gt;&lt;h1 data-en=&quot;Lists &amp;amp; Settings&quot; data-ar=&quot;\u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0648\u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a&quot;&gt;Lists&lt;\/h1&gt;&lt;p class=&quot;muted&quot; data-en=&quot;Manage the dropdown options used across the app&quot; data-ar=&quot;\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629 \u0641\u064a \u0627\u0644\u062a\u0637\u0628\u064a\u0642&quot;&gt;manage lists&lt;\/p&gt;&lt;\/div&gt;&lt;\/header&gt;\n  &lt;section class=&quot;panel&quot;&gt;\n    &lt;div class=&quot;panel-head&quot;&gt;&lt;h2 data-en=&quot;Services (\u0627\u0644\u0627\u0639\u0645\u0627\u0644)&quot; data-ar=&quot;\u0627\u0644\u062e\u062f\u0645\u0627\u062a (\u0627\u0644\u0627\u0639\u0645\u0627\u0644)&quot;&gt;Services&lt;\/h2&gt;&lt;button class=&quot;btn&quot; onclick=&quot;openSvc()&quot;&gt;+ &lt;span data-en=&quot;Add Service&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629 \u062e\u062f\u0645\u0629&quot;&gt;Add Service&lt;\/span&gt;&lt;\/button&gt;&lt;\/div&gt;\n    &lt;div class=&quot;list-rows&quot;&gt;\n      ${state.services.map(s=&gt;`&lt;div class=&quot;list-row&quot;&gt;&lt;div&gt;&lt;span class=&quot;lr-main&quot; data-en=&quot;${esc(s.en)}&quot; data-ar=&quot;${esc(s.ar)}&quot;&gt;${esc(s.en)}&lt;\/span&gt; &lt;span class=&quot;lr-sub&quot;&gt;${esc(s.ar)} \u00b7 ${esc(s.en)}&lt;\/span&gt;&lt;\/div&gt;&lt;button class=&quot;icon-btn danger&quot; onclick=&quot;delSvc(${s.id})&quot;&gt;\ud83d\uddd1&lt;\/button&gt;&lt;\/div&gt;`).join(&quot;&quot;)}\n    &lt;\/div&gt;\n  &lt;\/section&gt;\n  &lt;section class=&quot;panel&quot;&gt;\n    &lt;div class=&quot;panel-head&quot;&gt;&lt;h2 data-en=&quot;Areas (\u0627\u0644\u0645\u0646\u0627\u0637\u0642)&quot; data-ar=&quot;\u0627\u0644\u0645\u0646\u0627\u0637\u0642&quot;&gt;Areas&lt;\/h2&gt;&lt;button class=&quot;btn&quot; onclick=&quot;openArea()&quot;&gt;+ &lt;span data-en=&quot;Add Area&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629 \u0645\u0646\u0637\u0642\u0629&quot;&gt;Add Area&lt;\/span&gt;&lt;\/button&gt;&lt;\/div&gt;\n    &lt;div class=&quot;scroll-box&quot;&gt;&lt;div class=&quot;chips&quot;&gt;\n      ${state.areas.map((a,i)=&gt;`&lt;span class=&quot;chip&quot;&gt;&lt;span&gt;${esc(a)}&lt;\/span&gt;&lt;button class=&quot;chip-x&quot; onclick=&quot;delArea(${i})&quot;&gt;\u2715&lt;\/button&gt;&lt;\/span&gt;`).join(&quot;&quot;)}\n    &lt;\/div&gt;&lt;\/div&gt;\n  &lt;\/section&gt;\n  &lt;section class=&quot;panel&quot;&gt;\n    &lt;div class=&quot;panel-head&quot;&gt;&lt;h2 data-en=&quot;Cost Categories (\u0628\u0646\u0648\u062f \u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641)&quot; data-ar=&quot;\u0628\u0646\u0648\u062f \u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641&quot;&gt;Cost Categories&lt;\/h2&gt;&lt;button class=&quot;btn&quot; onclick=&quot;openCat()&quot;&gt;+ &lt;span data-en=&quot;Add Category&quot; data-ar=&quot;\u0625\u0636\u0627\u0641\u0629 \u0628\u0646\u062f&quot;&gt;Add Category&lt;\/span&gt;&lt;\/button&gt;&lt;\/div&gt;\n    &lt;div class=&quot;chips&quot;&gt;\n      ${state.categories.map(c=&gt;`&lt;span class=&quot;chip&quot;&gt;&lt;span data-en=&quot;${esc(c.en)}&quot; data-ar=&quot;${esc(c.ar)}&quot;&gt;${esc(c.en)}&lt;\/span&gt;&lt;button class=&quot;chip-x&quot; onclick=&quot;delCat(${c.id})&quot;&gt;\u2715&lt;\/button&gt;&lt;\/span&gt;`).join(&quot;&quot;)}\n    &lt;\/div&gt;\n  &lt;\/section&gt;`;\n}\n\n\/* ---- modal infra ---- *\/\nconst show=id=&gt;document.getElementById(id).classList.add(&quot;open&quot;);\nconst hide=id=&gt;document.getElementById(id).classList.remove(&quot;open&quot;);\ndocument.addEventListener(&quot;click&quot;,e=&gt;{if(e.target.classList.contains(&quot;modal-backdrop&quot;))e.target.classList.remove(&quot;open&quot;);if(e.target.hasAttribute(&quot;data-close&quot;))e.target.closest(&quot;.modal-backdrop&quot;).classList.remove(&quot;open&quot;);});\ndocument.addEventListener(&quot;keydown&quot;,e=&gt;{if(e.key===&quot;Escape&quot;)document.querySelectorAll(&quot;.modal-backdrop.open&quot;).forEach(m=&gt;m.classList.remove(&quot;open&quot;));});\n\nfunction fillEmployees(sel,val){sel.innerHTML=`&lt;option value=&quot;&quot; data-en=&quot;\u2014 none \u2014&quot; data-ar=&quot;\u2014 \u0644\u0627 \u0623\u062d\u062f \u2014&quot;&gt;\u2014 none \u2014&lt;\/option&gt;`+state.employees.filter(e=&gt;e.active||e.id==val).map(e=&gt;`&lt;option value=&quot;${e.id}&quot; ${e.id==val?&quot;selected&quot;:&quot;&quot;}&gt;${esc(e.name)}&lt;\/option&gt;`).join(&quot;&quot;);}\nfunction fillCats(sel,val){sel.innerHTML=state.categories.map(c=&gt;`&lt;option value=&quot;${c.id}&quot; ${c.id==val?&quot;selected&quot;:&quot;&quot;} data-en=&quot;${esc(c.en)}&quot; data-ar=&quot;${esc(c.ar)}&quot;&gt;${esc(c.en)}&lt;\/option&gt;`).join(&quot;&quot;);}\nfunction fillJobs(sel,val){sel.innerHTML=`&lt;option value=&quot;&quot; data-en=&quot;\u2014 select \u2014&quot; data-ar=&quot;\u2014 \u0627\u062e\u062a\u0631 \u2014&quot;&gt;\u2014 select \u2014&lt;\/option&gt;`+state.services.map(s=&gt;`&lt;option value=&quot;${esc(s.ar)}&quot; ${val===s.ar?&quot;selected&quot;:&quot;&quot;} data-en=&quot;${esc(s.en)}&quot; data-ar=&quot;${esc(s.ar)}&quot;&gt;${esc(s.en)}&lt;\/option&gt;`).join(&quot;&quot;);}\nfunction fillMaint(sel,val){sel.innerHTML=`&lt;option value=&quot;&quot; data-en=&quot;\u2014 none \u2014&quot; data-ar=&quot;\u2014 \u0644\u0627 \u0634\u064a\u0621 \u2014&quot;&gt;\u2014 none \u2014&lt;\/option&gt;`+MAINT_TYPES.map(m=&gt;{const en=m===&quot;\u062a\u0635\u0644\u064a\u062d \u0643\u0646\u062a\u0631\u0648\u0644&quot;?&quot;Control repair&quot;:m;return `&lt;option value=&quot;${esc(m)}&quot; ${val===m?&quot;selected&quot;:&quot;&quot;} data-en=&quot;${esc(en)}&quot; data-ar=&quot;${esc(m)}&quot;&gt;${esc(en)}&lt;\/option&gt;`;}).join(&quot;&quot;);}\nfunction fillAreas(){const dl=document.getElementById(&quot;area-list&quot;);if(dl)dl.innerHTML=state.areas.map(a=&gt;`&lt;option value=&quot;${esc(a)}&quot;&gt;&lt;\/option&gt;`).join(&quot;&quot;);}\nfunction toggleMaint(){document.getElementById(&quot;maint-field&quot;).style.display=document.getElementById(&quot;f-service&quot;).value===MAINT_JOB?&quot;&quot;:&quot;none&quot;;}\n\n\/* ---- jobs CRUD ---- *\/\nfunction openJob(id){\n  const j=id?state.jobs.find(x=&gt;x.id===id):null;\n  fillEmployees(document.getElementById(&quot;f-employee&quot;),j?j.employeeId:&quot;&quot;);\n  fillJobs(document.getElementById(&quot;f-service&quot;),j?j.service||&quot;&quot;:&quot;&quot;);\n  fillMaint(document.getElementById(&quot;f-maint&quot;),j?j.maint||&quot;&quot;:&quot;&quot;);\n  fillAreas();\n  document.getElementById(&quot;f-id&quot;).value=j?j.id:&quot;&quot;;\n  document.getElementById(&quot;f-name&quot;).value=j?j.name:&quot;&quot;;\n  document.getElementById(&quot;f-area&quot;).value=j?j.area||&quot;&quot;:&quot;&quot;;\n  document.getElementById(&quot;f-company&quot;).value=j?j.company||&quot;&quot;:&quot;&quot;;\n  document.getElementById(&quot;f-date&quot;).value=j?j.date||today():today();\n  document.getElementById(&quot;f-sale&quot;).value=j?j.sale:0;\n  document.getElementById(&quot;f-cost&quot;).value=j?j.cost:0;\n  document.getElementById(&quot;f-paid&quot;).value=j?j.paid:0;\n  document.getElementById(&quot;f-status&quot;).value=j?j.status:&quot;not_started&quot;;\n  document.getElementById(&quot;f-notes&quot;).value=j?j.notes||&quot;&quot;:&quot;&quot;;\n  document.getElementById(&quot;job-title&quot;).textContent=L(j?&quot;Edit Job&quot;:&quot;Add Job&quot;,j?&quot;\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0639\u0645\u0644&quot;:&quot;\u0625\u0636\u0627\u0641\u0629 \u0639\u0645\u0644&quot;);\n  toggleMaint();recalc();show(&quot;job-modal&quot;);applyLang();\n}\nfunction recalc(){\n  const sale=+document.getElementById(&quot;f-sale&quot;).value||0,cost=+document.getElementById(&quot;f-cost&quot;).value||0,paid=+document.getElementById(&quot;f-paid&quot;).value||0;\n  document.getElementById(&quot;c-remaining&quot;).textContent=(sale-paid).toFixed(3);\n  document.getElementById(&quot;c-profit&quot;).textContent=(sale-cost).toFixed(3);\n  const ps=paid&lt;=0?&quot;unpaid&quot;:(paid&gt;=sale?&quot;paid&quot;:&quot;partial&quot;);\n  document.getElementById(&quot;c-payment&quot;).textContent=L(PAY_LABELS[ps][0],PAY_LABELS[ps][1]);\n}\nfunction saveJob(){\n  const name=document.getElementById(&quot;f-name&quot;).value.trim();if(!name){alert(L(&quot;Please enter a client name.&quot;,&quot;\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0627\u0633\u0645 \u0627\u0644\u0639\u0645\u064a\u0644.&quot;));return;}\n  const id=document.getElementById(&quot;f-id&quot;).value;\n  const svc=document.getElementById(&quot;f-service&quot;).value;\n  const obj={name,service:svc,maint:(svc===MAINT_JOB?document.getElementById(&quot;f-maint&quot;).value:&quot;&quot;),area:document.getElementById(&quot;f-area&quot;).value.trim(),\n    company:document.getElementById(&quot;f-company&quot;).value.trim(),date:document.getElementById(&quot;f-date&quot;).value,\n    sale:+document.getElementById(&quot;f-sale&quot;).value||0,cost:+document.getElementById(&quot;f-cost&quot;).value||0,paid:+document.getElementById(&quot;f-paid&quot;).value||0,\n    status:document.getElementById(&quot;f-status&quot;).value,employeeId:document.getElementById(&quot;f-employee&quot;).value||null,\n    notes:document.getElementById(&quot;f-notes&quot;).value.trim()};\n  if(id){Object.assign(state.jobs.find(x=&gt;x.id==id),obj);}else{obj.id=++state.counters.job;state.jobs.push(obj);}\n  save();hide(&quot;job-modal&quot;);renderJobs();applyLang();\n}\nfunction delJob(id){if(confirm(L(&quot;Delete this job?&quot;,&quot;\u0647\u0644 \u062a\u0631\u064a\u062f \u062d\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0639\u0645\u0644\u061f&quot;))){state.jobs=state.jobs.filter(j=&gt;j.id!==id);save();renderJobs();applyLang();}}\n\n\/* ---- costs CRUD ---- *\/\nfunction openCost(id){\n  const c=id?state.costs.find(x=&gt;x.id===id):null;\n  fillCats(document.getElementById(&quot;cf-cat&quot;),c?c.categoryId:(state.categories[0]&amp;&amp;state.categories[0].id));\n  document.getElementById(&quot;cf-id&quot;).value=c?c.id:&quot;&quot;;\n  document.getElementById(&quot;cf-amount&quot;).value=c?c.amount:0;\n  document.getElementById(&quot;cf-date&quot;).value=c?c.date||today():today();\n  document.getElementById(&quot;cf-notes&quot;).value=c?c.notes||&quot;&quot;:&quot;&quot;;\n  show(&quot;cost-modal&quot;);applyLang();\n}\nfunction saveCost(){\n  const id=document.getElementById(&quot;cf-id&quot;).value;\n  const obj={categoryId:+document.getElementById(&quot;cf-cat&quot;).value||null,amount:+document.getElementById(&quot;cf-amount&quot;).value||0,\n    date:document.getElementById(&quot;cf-date&quot;).value||today(),notes:document.getElementById(&quot;cf-notes&quot;).value.trim()};\n  if(id){Object.assign(state.costs.find(x=&gt;x.id==id),obj);}else{obj.id=++state.counters.cost;state.costs.push(obj);}\n  save();hide(&quot;cost-modal&quot;);renderCosts();applyLang();\n}\nfunction delCost(id){if(confirm(L(&quot;Delete this expense?&quot;,&quot;\u0647\u0644 \u062a\u0631\u064a\u062f \u062d\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u061f&quot;))){state.costs=state.costs.filter(c=&gt;c.id!==id);save();renderCosts();applyLang();}}\n\n\/* ---- categories ---- *\/\nfunction openCat(){document.getElementById(&quot;catf-en&quot;).value=&quot;&quot;;document.getElementById(&quot;catf-ar&quot;).value=&quot;&quot;;show(&quot;cat-modal&quot;);applyLang();}\nfunction saveCat(){let en=document.getElementById(&quot;catf-en&quot;).value.trim(),ar=document.getElementById(&quot;catf-ar&quot;).value.trim();if(!en&amp;&amp;!ar)return;en=en||ar;ar=ar||en;state.categories.push({id:++state.counters.cat,en,ar});save();hide(&quot;cat-modal&quot;);if(document.getElementById(&quot;view-settings&quot;).classList.contains(&quot;active&quot;))renderSettings();applyLang();}\nfunction delCat(id){if(confirm(L(&quot;Delete this category?&quot;,&quot;\u062d\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0628\u0646\u062f\u061f&quot;))){state.categories=state.categories.filter(c=&gt;c.id!==id);save();renderSettings();applyLang();}}\n\n\/* ---- services ---- *\/\nfunction openSvc(){document.getElementById(&quot;svcf-ar&quot;).value=&quot;&quot;;document.getElementById(&quot;svcf-en&quot;).value=&quot;&quot;;show(&quot;svc-modal&quot;);applyLang();}\nfunction saveSvc(){let ar=document.getElementById(&quot;svcf-ar&quot;).value.trim(),en=document.getElementById(&quot;svcf-en&quot;).value.trim();if(!ar&amp;&amp;!en)return;ar=ar||en;en=en||ar;state.services.push({id:++state.counters.svc,ar,en});save();hide(&quot;svc-modal&quot;);renderSettings();applyLang();}\nfunction delSvc(id){if(confirm(L(&quot;Delete this service? Existing jobs keep their text.&quot;,&quot;\u062d\u0630\u0641 \u0647\u0630\u0647 \u0627\u0644\u062e\u062f\u0645\u0629\u061f \u0633\u062a\u0628\u0642\u0649 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0628\u0646\u0635\u0651\u0647\u0627.&quot;))){state.services=state.services.filter(s=&gt;s.id!==id);save();renderSettings();applyLang();}}\n\n\/* ---- areas ---- *\/\nfunction openArea(){document.getElementById(&quot;areaf-name&quot;).value=&quot;&quot;;show(&quot;area-modal&quot;);applyLang();}\nfunction saveArea(){const a=document.getElementById(&quot;areaf-name&quot;).value.trim();if(!a)return;if(!state.areas.includes(a))state.areas.push(a);save();hide(&quot;area-modal&quot;);fillAreas();renderSettings();applyLang();}\nfunction delArea(i){if(confirm(L(&quot;Delete this area?&quot;,&quot;\u062d\u0630\u0641 \u0647\u0630\u0647 \u0627\u0644\u0645\u0646\u0637\u0642\u0629\u061f&quot;))){state.areas.splice(i,1);save();fillAreas();renderSettings();applyLang();}}\n\n\/* ---- employees CRUD ---- *\/\nfunction openEmp(id){\n  const e=id?state.employees.find(x=&gt;x.id===id):null;\n  document.getElementById(&quot;ef-id&quot;).value=e?e.id:&quot;&quot;;\n  document.getElementById(&quot;ef-name&quot;).value=e?e.name:&quot;&quot;;\n  document.getElementById(&quot;ef-role&quot;).value=e?e.role||&quot;&quot;:&quot;&quot;;\n  document.getElementById(&quot;ef-phone&quot;).value=e?e.phone||&quot;&quot;:&quot;&quot;;\n  document.getElementById(&quot;ef-active&quot;).checked=e?!!e.active:true;\n  show(&quot;emp-modal&quot;);applyLang();\n}\nfunction saveEmp(){\n  const name=document.getElementById(&quot;ef-name&quot;).value.trim();if(!name)return;\n  const id=document.getElementById(&quot;ef-id&quot;).value;\n  const obj={name,role:document.getElementById(&quot;ef-role&quot;).value.trim(),phone:document.getElementById(&quot;ef-phone&quot;).value.trim(),active:document.getElementById(&quot;ef-active&quot;).checked?1:0};\n  if(id){Object.assign(state.employees.find(x=&gt;x.id==id),obj);}else{obj.id=++state.counters.emp;state.employees.push(obj);}\n  save();hide(&quot;emp-modal&quot;);renderEmployees();applyLang();\n}\nfunction delEmp(id){if(confirm(L(&quot;Delete this employee?&quot;,&quot;\u0647\u0644 \u062a\u0631\u064a\u062f \u062d\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0645\u0648\u0638\u0641\u061f&quot;))){state.employees=state.employees.filter(e=&gt;e.id!==id);save();renderEmployees();applyLang();}}\n\n\/* ---- boot ---- *\/\ndocument.querySelectorAll(&quot;.nav-link&quot;).forEach(b=&gt;b.addEventListener(&quot;click&quot;,()=&gt;go(b.dataset.view)));\ndocument.getElementById(&quot;lang-toggle&quot;).addEventListener(&quot;click&quot;,()=&gt;{state.lang=state.lang===&quot;ar&quot;?&quot;en&quot;:&quot;ar&quot;;save();applyLang();});\n(async()=&gt;{await loadState();fillAreas();render(&quot;dashboard&quot;);applyLang();})();\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\"><\/iframe>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","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":"var(--ast-global-color-4)","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":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-1648","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/3rbinvesting.com\/ar\/wp-json\/wp\/v2\/pages\/1648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3rbinvesting.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3rbinvesting.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3rbinvesting.com\/ar\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/3rbinvesting.com\/ar\/wp-json\/wp\/v2\/comments?post=1648"}],"version-history":[{"count":0,"href":"https:\/\/3rbinvesting.com\/ar\/wp-json\/wp\/v2\/pages\/1648\/revisions"}],"wp:attachment":[{"href":"https:\/\/3rbinvesting.com\/ar\/wp-json\/wp\/v2\/media?parent=1648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}