{"id":1597,"date":"2026-08-13T19:44:40","date_gmt":"2026-08-13T19:44:40","guid":{"rendered":"https:\/\/midnightblue-weasel-516787.hostingersite.com\/?page_id=1597"},"modified":"2026-09-20T06:37:24","modified_gmt":"2026-09-20T06:37:24","slug":"invoice-processing","status":"publish","type":"page","link":"https:\/\/aixworkspace.net\/ar\/invoice-processing\/","title":{"rendered":"Invoice Processing"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nInvoice to Excel<\/title>\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\r\n\r\n:root {\r\n --primary: #18BBF4;\r\n --primary-dark: #079DD5;\r\n --primary-light: #5FD0FE;\r\n --orange: #FE8826;\r\n --yellow: #FFE552;\r\n\r\n --navy: #082B40;\r\n --text: #173642;\r\n --muted: #6C858F;\r\n\r\n --bg: #F4FBFE;\r\n --card: #FFFFFF;\r\n --border: #DCEEF5;\r\n\r\n --success: #159A72;\r\n --danger: #E74C3C;\r\n\r\n --shadow:\r\n 0 20px 60px rgba(8, 43, 64, 0.10),\r\n 0 4px 16px rgba(8, 43, 64, 0.05);\r\n\r\n --shadow-mock:\r\n 0 18px 40px rgba(8, 43, 64, 0.14),\r\n 0 4px 12px rgba(8, 43, 64, 0.06);\r\n}\r\n\r\n\/* =========================\r\n RESET\r\n========================= *\/\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n background:\r\n radial-gradient(circle at 10% 10%, rgba(24,187,244,0.10), transparent 28%),\r\n radial-gradient(circle at 90% 85%, rgba(254,136,38,0.08), transparent 28%),\r\n var(--bg);\r\n color: var(--text);\r\n min-height: 100vh;\r\n}\r\n\r\n\/* =========================\r\n MAIN SECTION\r\n========================= *\/\r\n\r\n.i2xls-invoice-section {\r\n width: 100%;\r\n padding: 70px 20px 90px;\r\n position: relative;\r\n overflow: hidden;\r\n container-type: inline-size;\r\n container-name: i2xls;\r\n}\r\n\r\n.i2xls-invoice-container {\r\n max-width: 720px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n\/* =========================\r\n TOP INTRO\r\n========================= *\/\r\n\r\n.i2xls-invoice-intro {\r\n text-align: center;\r\n max-width: 720px;\r\n margin: 0 auto 48px;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n.i2xls-invoice-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 8px 15px;\r\n border-radius: 999px;\r\n\r\n background: rgba(24,187,244,0.09);\r\n border: 1px solid rgba(24,187,244,0.20);\r\n\r\n color: var(--primary-dark);\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 0.3px;\r\n\r\n margin-bottom: 20px;\r\n}\r\n\r\n.i2xls-badge-icon {\r\n width: 7px;\r\n height: 7px;\r\n background: var(--primary);\r\n border-radius: 50%;\r\n box-shadow: 0 0 0 4px rgba(24,187,244,0.12);\r\n}\r\n\r\n.i2xls-invoice-heading {\r\n font-size: 42px;\r\n line-height: 1.2;\r\n font-weight: 800;\r\n color: var(--navy);\r\n letter-spacing: -1px;\r\n margin-bottom: 15px;\r\n}\r\n\r\n.i2xls-invoice-heading span {\r\n background: linear-gradient(\r\n 90deg,\r\n var(--primary),\r\n var(--primary-dark)\r\n );\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.i2xls-invoice-subtitle {\r\n max-width: 610px;\r\n margin: 0 auto;\r\n font-size: 15px;\r\n line-height: 1.8;\r\n color: var(--muted);\r\n}\r\n\r\n\/* =========================\r\n LAYOUT \u2014 mockups flanking the card\r\n 5-column grid: [PDF mock] [arrow] [FORM] [arrow] [Excel mock]\r\n Both mocks share the same width and both arrows share the same\r\n width, so the form is always exactly centered.\r\n========================= *\/\r\n\r\n.i2xls-layout {\r\n display: grid;\r\n grid-template-columns: minmax(0, 290px) 60px minmax(480px, 560px) 60px minmax(0, 290px);\r\n align-items: center;\r\n justify-content: center;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n.i2xls-layout .i2xls-invoice-container {\r\n margin: 0;\r\n width: 100%;\r\n max-width: none;\r\n}\r\n\r\n\/* connectors *\/\r\n\r\n.i2xls-connector {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #AFD4E3;\r\n}\r\n\r\n.i2xls-connector svg {\r\n width: 100%;\r\n height: auto;\r\n}\r\n\r\n\/* =========================\r\n MOCK CARDS (left invoice \/ right excel)\r\n========================= *\/\r\n\r\n.i2xls-mock {\r\n position: relative;\r\n width: 100%;\r\n}\r\n\r\n\/* stacked-sheet depth effect, shared by both mocks *\/\r\n.i2xls-mock::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: #EEF6FA;\r\n border-radius: 16px;\r\n transform: translate(9px, 12px);\r\n z-index: 0;\r\n}\r\n\r\n.i2xls-mock-card {\r\n background: var(--card);\r\n border-radius: 16px;\r\n box-shadow: var(--shadow-mock);\r\n position: relative;\r\n z-index: 2;\r\n overflow: hidden;\r\n}\r\n\r\n.i2xls-mock-badge {\r\n position: absolute;\r\n top: -16px;\r\n left: -14px;\r\n z-index: 3;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 7px;\r\n padding: 9px 14px;\r\n border-radius: 12px;\r\n background: #fff;\r\n box-shadow: 0 10px 24px rgba(8,43,64,0.16);\r\n font-size: 12px;\r\n font-weight: 800;\r\n letter-spacing: 0.2px;\r\n}\r\n\r\n.i2xls-mock-badge svg {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.i2xls-mock-badge-pdf {\r\n color: #C0392B;\r\n}\r\n.i2xls-mock-badge-pdf svg {\r\n color: #E8483A;\r\n}\r\n\r\n.i2xls-mock-badge-excel {\r\n color: #117858;\r\n}\r\n.i2xls-mock-badge-excel svg {\r\n color: var(--success);\r\n}\r\n\r\n\/* ===== invoice mock (professional letterhead) ===== *\/\r\n\r\n.i2xls-invoice-mock-card {\r\n padding: 0 0 18px;\r\n}\r\n\r\n.i2xls-mock-doc-accent {\r\n height: 6px;\r\n background: linear-gradient(90deg, var(--primary), var(--primary-dark));\r\n}\r\n\r\n.i2xls-mock-invoice-header {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n padding: 16px 18px 14px;\r\n border-bottom: 1px solid #EDF4F7;\r\n}\r\n\r\n.i2xls-mock-brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.i2xls-mock-brand-mark {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n border-radius: 7px;\r\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 11px;\r\n font-weight: 800;\r\n}\r\n\r\n.i2xls-mock-brand-text {\r\n line-height: 1.35;\r\n}\r\n\r\n.i2xls-mock-company-name {\r\n font-weight: 700;\r\n color: var(--navy);\r\n font-size: 10px;\r\n}\r\n\r\n.i2xls-mock-company-line {\r\n color: var(--muted);\r\n font-size: 8px;\r\n}\r\n\r\n.i2xls-mock-invoice-title-wrap {\r\n text-align: right;\r\n}\r\n\r\n.i2xls-mock-invoice-title {\r\n font-size: 15px;\r\n font-weight: 800;\r\n color: var(--navy);\r\n letter-spacing: 1.5px;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.i2xls-mock-invoice-number {\r\n font-size: 8.5px;\r\n color: var(--primary-dark);\r\n font-weight: 700;\r\n}\r\n\r\n.i2xls-mock-invoice-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 12px 18px;\r\n font-size: 8px;\r\n color: var(--muted);\r\n}\r\n\r\n.i2xls-mock-invoice-meta div {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n}\r\n\r\n.i2xls-mock-invoice-meta div:last-child {\r\n align-items: flex-end;\r\n}\r\n\r\n.i2xls-mock-invoice-meta b {\r\n font-size: 9px;\r\n color: var(--navy);\r\n font-weight: 700;\r\n}\r\n\r\n.i2xls-mock-table {\r\n margin: 2px 18px 10px;\r\n border-top: 1px solid #EDF4F7;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n}\r\n\r\n.i2xls-mock-row {\r\n display: grid;\r\n grid-template-columns: 2.1fr 0.6fr 1fr 1fr;\r\n gap: 4px;\r\n font-size: 9px;\r\n color: var(--text);\r\n padding: 6px 4px;\r\n}\r\n\r\n.i2xls-mock-row:nth-child(even) {\r\n background: #F8FCFE;\r\n}\r\n\r\n.i2xls-mock-row span:not(:first-child) {\r\n text-align: right;\r\n}\r\n\r\n.i2xls-mock-row-head {\r\n color: var(--muted);\r\n font-weight: 700;\r\n font-size: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.3px;\r\n background: #F1F8FB !important;\r\n border-bottom: 1px solid #E3F0F5;\r\n}\r\n\r\n.i2xls-mock-totals {\r\n margin: 0 18px;\r\n font-size: 9.5px;\r\n padding-top: 8px;\r\n border-top: 1px dashed #E3F0F5;\r\n}\r\n\r\n.i2xls-mock-totals div {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 3px 0;\r\n color: var(--muted);\r\n}\r\n\r\n.i2xls-mock-totals b {\r\n color: var(--navy);\r\n font-weight: 700;\r\n}\r\n\r\n.i2xls-mock-total-final {\r\n margin-top: 4px;\r\n padding-top: 8px !important;\r\n border-top: 1px solid #EDF4F7;\r\n font-size: 11px;\r\n}\r\n\r\n.i2xls-mock-total-final span {\r\n color: var(--navy);\r\n font-weight: 700;\r\n}\r\n\r\n.i2xls-mock-total-final b {\r\n color: var(--primary-dark);\r\n font-size: 13px;\r\n}\r\n\r\n\/* ===== excel mock (spreadsheet look) ===== *\/\r\n\r\n.i2xls-mock-excel {\r\n width: 100%;\r\n}\r\n\r\n.i2xls-mock-excel .i2xls-mock-card {\r\n padding: 0;\r\n}\r\n\r\n.i2xls-mock-excel-ribbon {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 14px;\r\n background: linear-gradient(135deg, var(--success), #0E7A5C);\r\n color: #fff;\r\n}\r\n\r\n.i2xls-mock-excel-ribbon-icon {\r\n width: 18px;\r\n height: 18px;\r\n min-width: 18px;\r\n border-radius: 4px;\r\n background: rgba(255,255,255,0.22);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 9px;\r\n font-weight: 800;\r\n}\r\n\r\n.i2xls-mock-excel-ribbon span {\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 0.2px;\r\n}\r\n\r\n.i2xls-mock-excel-grid-wrap {\r\n padding: 8px 8px 10px;\r\n overflow: hidden;\r\n}\r\n\r\n.i2xls-mock-excel-table {\r\n font-size: 7.3px;\r\n width: 100%;\r\n border-collapse: collapse;\r\n table-layout: fixed;\r\n}\r\n\r\n.i2xls-mock-excel-table th,\r\n.i2xls-mock-excel-table td {\r\n padding: 5px 3px;\r\n text-align: left;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n border: 1px solid #EAF3F7;\r\n}\r\n\r\n\/* column widths so the text fits the narrower mock *\/\r\n.i2xls-mock-excel-table th:nth-child(1) { width: 14px; }\r\n.i2xls-mock-excel-table th:nth-child(2) { width: 21%; }\r\n.i2xls-mock-excel-table th:nth-child(3) { width: 13%; }\r\n.i2xls-mock-excel-table th:nth-child(4) { width: 15%; }\r\n.i2xls-mock-excel-table th:nth-child(5) { width: 14%; }\r\n.i2xls-mock-excel-table th:nth-child(6) { width: 7%; }\r\n.i2xls-mock-excel-table th:nth-child(7) { width: 15%; }\r\n.i2xls-mock-excel-table th:nth-child(8) { width: 15%; }\r\n\r\n.i2xls-excel-colrow th {\r\n background: #F3F8FA;\r\n color: #9DB2BA;\r\n font-weight: 700;\r\n text-align: center;\r\n font-size: 7px;\r\n padding: 3px;\r\n}\r\n\r\n.i2xls-excel-corner {\r\n background: #EEF5F8 !important;\r\n width: 14px;\r\n}\r\n\r\n.i2xls-excel-rownum {\r\n background: #F3F8FA;\r\n color: #9DB2BA;\r\n font-weight: 700;\r\n text-align: center !important;\r\n width: 14px;\r\n}\r\n\r\n.i2xls-excel-header-row td {\r\n color: var(--navy);\r\n font-weight: 700;\r\n background: #E9F7F1;\r\n}\r\n\r\n.i2xls-mock-excel-table tbody tr:not(.i2xls-excel-header-row):nth-child(odd) td:not(.i2xls-excel-rownum) {\r\n background: #FBFEFF;\r\n}\r\n\r\n.i2xls-mock-excel-table td {\r\n color: var(--text);\r\n}\r\n\r\n.i2xls-excel-cell-active {\r\n outline: 1.4px solid var(--primary-dark);\r\n outline-offset: -1.4px;\r\n position: relative;\r\n}\r\n\r\n\/* Mockups shrink to fit. Only when the available width (of the section,\r\n not the screen) drops below ~1140px are they hidden and the form\r\n stays centered on its own. *\/\r\n@container i2xls (max-width: 1140px) {\r\n .i2xls-mock,\r\n .i2xls-connector {\r\n display: none;\r\n }\r\n\r\n .i2xls-layout {\r\n display: block;\r\n }\r\n\r\n .i2xls-layout .i2xls-invoice-container {\r\n max-width: 620px;\r\n margin: 0 auto;\r\n }\r\n}\r\n\r\n\/* =========================\r\n CARD\r\n========================= *\/\r\n\r\n.i2xls-invoice-card {\r\n background: var(--card);\r\n border: 1px solid rgba(220,238,245,0.95);\r\n border-radius: 22px;\r\n padding: 38px;\r\n box-shadow: var(--shadow);\r\n}\r\n\r\n\/* =========================\r\n CARD HEADER\r\n========================= *\/\r\n\r\n.i2xls-card-top {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n margin-bottom: 30px;\r\n padding-bottom: 26px;\r\n border-bottom: 1px solid #EDF4F7;\r\n}\r\n\r\n.i2xls-card-icon {\r\n width: 50px;\r\n height: 50px;\r\n min-width: 50px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 14px;\r\n\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(24,187,244,0.14),\r\n rgba(95,208,254,0.07)\r\n );\r\n\r\n color: var(--primary-dark);\r\n}\r\n\r\n.i2xls-card-icon svg {\r\n width: 24px;\r\n height: 24px;\r\n}\r\n\r\n.i2xls-card-title {\r\n font-size: 19px;\r\n line-height: 1.35;\r\n font-weight: 800;\r\n color: var(--navy);\r\n}\r\n\r\n.i2xls-card-description {\r\n margin-top: 4px;\r\n font-size: 12.5px;\r\n line-height: 1.6;\r\n color: var(--muted);\r\n}\r\n\r\n\/* =========================\r\n FORM\r\n========================= *\/\r\n\r\n.i2xls-form-group {\r\n margin-bottom: 25px;\r\n}\r\n\r\n.i2xls-form-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: var(--navy);\r\n\r\n margin-bottom: 10px;\r\n}\r\n\r\n.i2xls-required {\r\n color: var(--orange);\r\n}\r\n\r\n\/* =========================\r\n UPLOAD AREA\r\n========================= *\/\r\n\r\n.i2xls-upload-zone {\r\n position: relative;\r\n display: block;\r\n\r\n width: 100%;\r\n min-height: 190px;\r\n\r\n border: 1.5px dashed #BFDCE8;\r\n border-radius: 15px;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n #FCFEFF 0%,\r\n #F7FCFE 100%\r\n );\r\n\r\n cursor: pointer;\r\n transition:\r\n border-color 0.25s ease,\r\n background 0.25s ease,\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease;\r\n\r\n overflow: hidden;\r\n}\r\n\r\n.i2xls-upload-zone:hover {\r\n border-color: var(--primary);\r\n background: #F4FCFF;\r\n box-shadow: 0 8px 25px rgba(24,187,244,0.08);\r\n}\r\n\r\n.i2xls-upload-zone.i2xls-drag-active {\r\n border-color: var(--primary);\r\n background: rgba(24,187,244,0.07);\r\n transform: scale(1.005);\r\n box-shadow: 0 10px 30px rgba(24,187,244,0.12);\r\n}\r\n\r\n.i2xls-upload-content {\r\n min-height: 190px;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n padding: 25px 20px;\r\n text-align: center;\r\n}\r\n\r\n.i2xls-upload-icon {\r\n width: 62px;\r\n height: 62px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 50%;\r\n\r\n background: rgba(24,187,244,0.10);\r\n\r\n color: var(--primary-dark);\r\n\r\n margin-bottom: 15px;\r\n\r\n transition: transform 0.25s ease;\r\n}\r\n\r\n.i2xls-upload-zone:hover .i2xls-upload-icon {\r\n transform: translateY(-3px);\r\n}\r\n\r\n.i2xls-upload-icon svg {\r\n width: 28px;\r\n height: 28px;\r\n}\r\n\r\n.i2xls-upload-title {\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: var(--navy);\r\n margin-bottom: 15px;\r\n}\r\n\r\n.i2xls-upload-title span.i2xls-browse {\r\n color: var(--primary-dark);\r\n text-decoration: underline;\r\n text-underline-offset: 2px;\r\n}\r\n\r\n.i2xls-upload-formats {\r\n display: flex;\r\n gap: 8px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n}\r\n\r\n.i2xls-format-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n\r\n padding: 5px 10px 5px 5px;\r\n border-radius: 8px;\r\n\r\n background: #fff;\r\n border: 1px solid var(--border);\r\n box-shadow: 0 2px 6px rgba(8,43,64,0.05);\r\n\r\n color: #5B7580;\r\n\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 0.2px;\r\n}\r\n\r\n.i2xls-format-tag .i2xls-tag-icon {\r\n width: 18px;\r\n height: 18px;\r\n min-width: 18px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 5px;\r\n color: #fff;\r\n}\r\n\r\n.i2xls-format-tag .i2xls-tag-icon svg {\r\n width: 10px;\r\n height: 10px;\r\n}\r\n\r\n.i2xls-format-tag.i2xls-pdf .i2xls-tag-icon { background: linear-gradient(135deg, #FF7A6E, #E8483A); }\r\n.i2xls-format-tag.i2xls-png .i2xls-tag-icon { background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); }\r\n.i2xls-format-tag.i2xls-jpg .i2xls-tag-icon { background: linear-gradient(135deg, #A78BFA, #7C4FE0); }\r\n.i2xls-format-tag.i2xls-jpeg .i2xls-tag-icon { background: linear-gradient(135deg, var(--yellow), var(--orange)); }\r\n\r\n.i2xls-upload-maxsize {\r\n margin-top: 12px;\r\n font-size: 11px;\r\n color: #96AAB2;\r\n}\r\n\r\n#i2xls-file-input {\r\n display: none;\r\n}\r\n\r\n\/* =========================\r\n FILE LIST\r\n========================= *\/\r\n\r\n.i2xls-file-list {\r\n display: none;\r\n margin-top: 12px;\r\n}\r\n\r\n.i2xls-file-list.i2xls-active {\r\n display: block;\r\n}\r\n\r\n.i2xls-file-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 11px;\r\n\r\n padding: 11px 13px;\r\n\r\n background: #F8FCFE;\r\n border: 1px solid #E1F0F5;\r\n border-radius: 10px;\r\n\r\n margin-bottom: 7px;\r\n}\r\n\r\n.i2xls-file-item-icon {\r\n width: 34px;\r\n height: 34px;\r\n min-width: 34px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 8px;\r\n\r\n background: rgba(24,187,244,0.10);\r\n color: var(--primary-dark);\r\n}\r\n\r\n.i2xls-file-item-icon svg {\r\n width: 17px;\r\n height: 17px;\r\n}\r\n\r\n.i2xls-file-info {\r\n min-width: 0;\r\n flex: 1;\r\n}\r\n\r\n.i2xls-file-name {\r\n font-size: 11.5px;\r\n font-weight: 700;\r\n color: var(--navy);\r\n\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.i2xls-file-size {\r\n font-size: 10px;\r\n color: #8BA1AA;\r\n margin-top: 2px;\r\n}\r\n\r\n.i2xls-remove-file {\r\n border: none;\r\n background: transparent;\r\n\r\n width: 28px;\r\n height: 28px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n border-radius: 7px;\r\n\r\n color: #8CA2AA;\r\n cursor: pointer;\r\n\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.i2xls-remove-file:hover {\r\n background: #FFF0ED;\r\n color: var(--orange);\r\n}\r\n\r\n\/* =========================\r\n EMAIL INPUT\r\n========================= *\/\r\n\r\n.i2xls-input-wrapper {\r\n position: relative;\r\n}\r\n\r\n.i2xls-input-icon {\r\n position: absolute;\r\n left: 15px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n\r\n color: #91AAB4;\r\n\r\n pointer-events: none;\r\n}\r\n\r\n.i2xls-input-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n}\r\n\r\n.i2xls-form-input {\r\n width: 100%;\r\n\r\n padding: 14px 15px 14px 45px;\r\n\r\n border: 1px solid #CFE3EB;\r\n border-radius: 11px;\r\n\r\n outline: none;\r\n\r\n font-family: inherit;\r\n font-size: 13px;\r\n color: var(--navy);\r\n\r\n background: #fff;\r\n\r\n transition:\r\n border-color 0.2s ease,\r\n box-shadow 0.2s ease;\r\n}\r\n\r\n.i2xls-form-input::placeholder {\r\n color: #A9BBC2;\r\n}\r\n\r\n.i2xls-form-input:hover {\r\n border-color: #A9CBD8;\r\n}\r\n\r\n.i2xls-form-input:focus {\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 4px rgba(24,187,244,0.10);\r\n}\r\n\r\n.i2xls-form-input.i2xls-error {\r\n border-color: var(--danger);\r\n box-shadow: 0 0 0 4px rgba(231,76,60,0.08);\r\n}\r\n\r\n\/* =========================\r\n HELPER TEXT\r\n========================= *\/\r\n\r\n.i2xls-field-helper {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n\r\n margin-top: 8px;\r\n\r\n font-size: 10.5px;\r\n color: #8AA0A9;\r\n}\r\n\r\n.i2xls-field-helper svg {\r\n width: 13px;\r\n height: 13px;\r\n color: var(--primary-dark);\r\n}\r\n\r\n\/* =========================\r\n BUTTONS\r\n========================= *\/\r\n\r\n.i2xls-btn-row {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-top: 18px;\r\n}\r\n\r\n.i2xls-btn {\r\n height: 48px;\r\n padding: 0 16px;\r\n border-radius: 10px;\r\n\r\n font-family: inherit;\r\n font-size: 14px;\r\n font-weight: 700;\r\n\r\n cursor: pointer;\r\n\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n\r\n transition:\r\n transform 0.2s ease,\r\n box-shadow 0.2s ease,\r\n background 0.2s ease;\r\n\r\n text-decoration: none;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.i2xls-btn-back {\r\n flex: none;\r\n height: 38px;\r\n font-size: 12px;\r\n background: #fff;\r\n color: var(--navy);\r\n border: 1px solid #D3E5EC;\r\n}\r\n\r\n.i2xls-btn-back:hover {\r\n background: #F7FCFE;\r\n border-color: #AFCEDB;\r\n transform: translateY(-1px);\r\n}\r\n\r\n.i2xls-btn-primary {\r\n flex: none;\r\n border: none;\r\n color: #fff;\r\n\r\n background: linear-gradient(\r\n 135deg,\r\n var(--primary),\r\n var(--primary-dark)\r\n );\r\n\r\n box-shadow: 0 8px 20px rgba(24,187,244,0.28);\r\n}\r\n\r\n.i2xls-btn-primary:hover:not(:disabled) {\r\n transform: translateY(-1px);\r\n\r\n background: linear-gradient(\r\n 135deg,\r\n var(--orange),\r\n #F56F0B\r\n );\r\n\r\n box-shadow: 0 10px 24px rgba(254,136,38,0.25);\r\n}\r\n\r\n.i2xls-btn-primary:active:not(:disabled) {\r\n transform: translateY(0);\r\n}\r\n\r\n.i2xls-btn-primary:disabled {\r\n opacity: 0.65;\r\n cursor: not-allowed;\r\n box-shadow: none;\r\n}\r\n\r\n.i2xls-btn-text {\r\n display: inline-flex;\r\n align-items: center;\r\n line-height: 1;\r\n}\r\n\r\n.i2xls-btn-arrow {\r\n font-size: 15px;\r\n line-height: 1;\r\n}\r\n\r\n\/* =========================\r\n MESSAGES\r\n========================= *\/\r\n\r\n.i2xls-msg {\r\n display: none;\r\n\r\n margin-top: 17px;\r\n padding: 13px 15px;\r\n\r\n border-radius: 10px;\r\n\r\n font-size: 11.5px;\r\n line-height: 1.6;\r\n\r\n text-align: center;\r\n}\r\n\r\n.i2xls-msg.i2xls-success {\r\n color: #117858;\r\n background: #EDFBF6;\r\n border: 1px solid #C8EFE1;\r\n}\r\n\r\n.i2xls-msg.i2xls-error {\r\n color: #C0392B;\r\n background: #FFF2F0;\r\n border: 1px solid #F4CFCA;\r\n}\r\n\r\n\/* =========================\r\n SECURITY NOTE\r\n========================= *\/\r\n\r\n.i2xls-security-note {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 7px;\r\n\r\n margin-top: 21px;\r\n\r\n color: #8199A3;\r\n\r\n font-size: 10.5px;\r\n text-align: center;\r\n}\r\n\r\n.i2xls-security-note svg {\r\n width: 14px;\r\n height: 14px;\r\n color: var(--primary-dark);\r\n}\r\n\r\n\/* =========================\r\n LOADING SPINNER\r\n========================= *\/\r\n\r\n.i2xls-spinner {\r\n width: 15px;\r\n height: 15px;\r\n\r\n border: 2px solid rgba(255,255,255,0.4);\r\n border-top-color: #fff;\r\n\r\n border-radius: 50%;\r\n\r\n animation: spin 0.7s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n\/* =========================\r\n RESPONSIVE\r\n========================= *\/\r\n\r\n@media (max-width: 768px) {\r\n\r\n .i2xls-invoice-section {\r\n padding: 55px 18px 70px;\r\n }\r\n\r\n .i2xls-invoice-heading {\r\n font-size: 30px;\r\n }\r\n\r\n .i2xls-invoice-card {\r\n padding: 30px 25px;\r\n border-radius: 19px;\r\n }\r\n\r\n}\r\n\r\n@media (max-width: 560px) {\r\n\r\n .i2xls-invoice-section {\r\n padding: 42px 14px 55px;\r\n }\r\n\r\n .i2xls-invoice-intro {\r\n margin-bottom: 30px;\r\n }\r\n\r\n .i2xls-invoice-heading {\r\n font-size: 26px;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .i2xls-invoice-subtitle {\r\n font-size: 12.5px;\r\n line-height: 1.7;\r\n }\r\n\r\n .i2xls-invoice-card {\r\n padding: 24px 18px;\r\n border-radius: 17px;\r\n }\r\n\r\n .i2xls-card-top {\r\n gap: 12px;\r\n margin-bottom: 24px;\r\n padding-bottom: 21px;\r\n }\r\n\r\n .i2xls-card-icon {\r\n width: 44px;\r\n height: 44px;\r\n min-width: 44px;\r\n border-radius: 12px;\r\n }\r\n\r\n .i2xls-card-title {\r\n font-size: 16px;\r\n }\r\n\r\n .i2xls-card-description {\r\n font-size: 11px;\r\n }\r\n\r\n .i2xls-upload-zone {\r\n min-height: 175px;\r\n }\r\n\r\n .i2xls-upload-content {\r\n min-height: 175px;\r\n padding: 20px 14px;\r\n }\r\n\r\n .i2xls-btn-row {\r\n gap: 8px;\r\n }\r\n}\r\n\r\n@media (max-width: 380px) {\r\n\r\n .i2xls-invoice-heading {\r\n font-size: 23px;\r\n }\r\n\r\n .i2xls-invoice-card {\r\n padding: 21px 15px;\r\n }\r\n\r\n .i2xls-upload-zone {\r\n min-height: 165px;\r\n }\r\n\r\n .i2xls-upload-content {\r\n min-height: 165px;\r\n }\r\n\r\n .i2xls-upload-title {\r\n font-size: 13px;\r\n }\r\n\r\n .i2xls-format-tag {\r\n font-size: 9px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"i2xls-invoice-section\">\r\n\r\n <div class=\"i2xls-invoice-intro\">\r\n\r\n <div class=\"i2xls-invoice-badge\">\r\n <span class=\"i2xls-badge-icon\"><\/span>\r\n AI-POWERED DOCUMENT PROCESSING\r\n <\/div>\r\n\r\n <h1 class=\"i2xls-invoice-heading\">\r\n Turn Invoices Into <span>Excel<\/span>\r\n <\/h1>\r\n\r\n <p class=\"i2xls-invoice-subtitle\">\r\n Upload your invoice PDFs or images and let AI extract,\r\n organize and structure the data into a clean Excel file.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <div class=\"i2xls-layout\">\r\n\r\n <!-- LEFT: invoice document mockup -->\r\n <div class=\"i2xls-mock i2xls-mock-invoice\" aria-hidden=\"true\">\r\n\r\n <div class=\"i2xls-mock-badge i2xls-mock-badge-pdf\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\r\n <polyline points=\"14 2 14 8 20 8\"\/>\r\n <\/svg>\r\n <span>PDF<\/span>\r\n <\/div>\r\n\r\n <div class=\"i2xls-mock-card i2xls-invoice-mock-card\">\r\n\r\n <div class=\"i2xls-mock-doc-accent\"><\/div>\r\n\r\n <div class=\"i2xls-mock-invoice-header\">\r\n <div class=\"i2xls-mock-brand\">\r\n <div class=\"i2xls-mock-brand-mark\">A<\/div>\r\n <div class=\"i2xls-mock-brand-text\">\r\n <div class=\"i2xls-mock-company-name\">ABC Trading Co.<\/div>\r\n <div class=\"i2xls-mock-company-line\">Riyadh, Saudi Arabia<\/div>\r\n <div class=\"i2xls-mock-company-line\">VAT 300123456700003<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"i2xls-mock-invoice-title-wrap\">\r\n <div class=\"i2xls-mock-invoice-title\">INVOICE<\/div>\r\n <div class=\"i2xls-mock-invoice-number\">INV-1045<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"i2xls-mock-invoice-meta\">\r\n <div><span>Date<\/span><b>18 Sep 2026<\/b><\/div>\r\n <div><span>Due Date<\/span><b>18 Oct 2026<\/b><\/div>\r\n <\/div>\r\n\r\n <div class=\"i2xls-mock-table\">\r\n <div class=\"i2xls-mock-row i2xls-mock-row-head\">\r\n <span>Description<\/span><span>Qty<\/span><span>Unit Price<\/span><span>Total<\/span>\r\n <\/div>\r\n <div class=\"i2xls-mock-row\">\r\n <span>Laptop<\/span><span>5<\/span><span>2,500<\/span><span>12,500<\/span>\r\n <\/div>\r\n <div class=\"i2xls-mock-row\">\r\n <span>Monitor<\/span><span>10<\/span><span>800<\/span><span>8,000<\/span>\r\n <\/div>\r\n <div class=\"i2xls-mock-row\">\r\n <span>Keyboard<\/span><span>10<\/span><span>150<\/span><span>1,500<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"i2xls-mock-totals\">\r\n <div><span>Subtotal<\/span><b>22,000<\/b><\/div>\r\n <div><span>VAT (15%)<\/span><b>3,300<\/b><\/div>\r\n <div class=\"i2xls-mock-total-final\"><span>Total<\/span><b>SAR 25,300<\/b><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- ARROW: invoice -> upload -->\r\n <div class=\"i2xls-connector\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 100 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-dasharray=\"1 8\">\r\n <path d=\"M2 6c34 4 60 16 94 28\"\/>\r\n <path d=\"M86 30l10 4-4-10\" stroke-dasharray=\"0\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <!-- CENTER: upload card -->\r\n <div class=\"i2xls-invoice-container\">\r\n\r\n <div class=\"i2xls-invoice-card\">\r\n\r\n <div class=\"i2xls-card-top\">\r\n\r\n <div class=\"i2xls-card-icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.8\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n\r\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\r\n <polyline points=\"14 2 14 8 20 8\"\/>\r\n <path d=\"M8 13h8\"\/>\r\n <path d=\"M8 17h6\"\/>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n <div>\r\n\r\n <h2 class=\"i2xls-card-title\">\r\n Upload Invoice Files\r\n <\/h2>\r\n\r\n <p class=\"i2xls-card-description\">\r\n Drag & drop your files or browse to upload.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <form id=\"i2xls-invoice-form\">\r\n\r\n <div class=\"i2xls-form-group\">\r\n\r\n <label class=\"i2xls-upload-zone\" id=\"i2xls-upload-zone\" for=\"i2xls-file-input\">\r\n\r\n <input\r\n type=\"file\"\r\n id=\"i2xls-file-input\"\r\n accept=\".pdf,.png,.jpg,.jpeg\"\r\n multiple\r\n >\r\n\r\n <div class=\"i2xls-upload-content\">\r\n\r\n <div class=\"i2xls-upload-icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.8\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n\r\n <path d=\"M12 16V4\"\/>\r\n <path d=\"M8 8l4-4 4 4\"\/>\r\n <path d=\"M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4\"\/>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n <div class=\"i2xls-upload-title\">\r\n Drag & drop files here<br>\r\n or <span class=\"i2xls-browse\">browse<\/span>\r\n <\/div>\r\n\r\n <div class=\"i2xls-upload-formats\">\r\n\r\n <span class=\"i2xls-format-tag i2xls-pdf\">\r\n <span class=\"i2xls-tag-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><\/svg>\r\n <\/span>\r\n PDF\r\n <\/span>\r\n\r\n <span class=\"i2xls-format-tag i2xls-png\">\r\n <span class=\"i2xls-tag-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><path d=\"M21 15l-5-5L5 21\"\/><\/svg>\r\n <\/span>\r\n PNG\r\n <\/span>\r\n\r\n <span class=\"i2xls-format-tag i2xls-jpg\">\r\n <span class=\"i2xls-tag-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><path d=\"M21 15l-5-5L5 21\"\/><\/svg>\r\n <\/span>\r\n JPG\r\n <\/span>\r\n\r\n <span class=\"i2xls-format-tag i2xls-jpeg\">\r\n <span class=\"i2xls-tag-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><path d=\"M21 15l-5-5L5 21\"\/><\/svg>\r\n <\/span>\r\n JPEG\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n <div class=\"i2xls-upload-maxsize\">\r\n Max file size: 10 MB per file\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/label>\r\n\r\n <div id=\"i2xls-file-list\" class=\"i2xls-file-list\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"i2xls-form-group\">\r\n\r\n <label class=\"i2xls-form-label\">\r\n Recipient Email Address\r\n <span class=\"i2xls-required\">*<\/span>\r\n <\/label>\r\n\r\n <div class=\"i2xls-input-wrapper\">\r\n\r\n <span class=\"i2xls-input-icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.8\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n\r\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"\/>\r\n <polyline points=\"3 7 12 13 21 7\"\/>\r\n\r\n <\/svg>\r\n\r\n <\/span>\r\n\r\n <input\r\n type=\"email\"\r\n id=\"i2xls-email-input\"\r\n class=\"i2xls-form-input\"\r\n placeholder=\"you@company.com\"\r\n autocomplete=\"email\"\r\n >\r\n\r\n <\/div>\r\n\r\n <div class=\"i2xls-field-helper\">\r\n\r\n <svg viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n <path d=\"M9 12l2 2 4-4\"\/>\r\n\r\n <\/svg>\r\n\r\n Your processed Excel file will be sent to this address.\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"i2xls-btn-row\">\r\n\r\n <button\r\n type=\"submit\"\r\n class=\"i2xls-btn i2xls-btn-primary\"\r\n id=\"i2xls-submit-btn\"\r\n >\r\n <span class=\"i2xls-btn-text\">Extract Invoice Data<\/span>\r\n <span class=\"i2xls-btn-arrow\">\u2192<\/span>\r\n <\/button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"i2xls-btn i2xls-btn-back\"\r\n onclick=\"window.location.href='https:\/\/aixworkspace.net\/usecases\/'\"\r\n >\r\n \u2190 Back\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n\r\n <div id=\"i2xls-success-msg\" class=\"i2xls-msg i2xls-success\">\r\n \u2713 Request submitted successfully. Your Excel file will be\r\n sent to your email shortly.\r\n <\/div>\r\n\r\n <div id=\"i2xls-error-msg\" class=\"i2xls-msg i2xls-error\"><\/div>\r\n\r\n\r\n <div class=\"i2xls-security-note\">\r\n\r\n <svg viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n\r\n <rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\"\/>\r\n <path d=\"M8 11V7a4 4 0 0 1 8 0v4\"\/>\r\n\r\n <\/svg>\r\n\r\n Secure document processing \u2022 Your files are handled automatically\r\n\r\n <\/div>\r\n\r\n <\/form>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- ARROW: upload -> excel -->\r\n <div class=\"i2xls-connector\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 100 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-dasharray=\"1 8\">\r\n <path d=\"M2 30c34-12 60-24 94-28\"\/>\r\n <path d=\"M86 6l10-4-4 10\" stroke-dasharray=\"0\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <!-- RIGHT: excel table mockup -->\r\n <div class=\"i2xls-mock i2xls-mock-excel\" aria-hidden=\"true\">\r\n\r\n <div class=\"i2xls-mock-badge i2xls-mock-badge-excel\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/>\r\n <path d=\"M8 8l8 8\"\/>\r\n <path d=\"M16 8l-8 8\"\/>\r\n <\/svg>\r\n <span>Excel<\/span>\r\n <\/div>\r\n\r\n <div class=\"i2xls-mock-card\">\r\n\r\n <div class=\"i2xls-mock-excel-ribbon\">\r\n <div class=\"i2xls-mock-excel-ribbon-icon\">X<\/div>\r\n <span>Invoice_Data.xlsx<\/span>\r\n <\/div>\r\n\r\n <div class=\"i2xls-mock-excel-grid-wrap\">\r\n\r\n <table class=\"i2xls-mock-excel-table\">\r\n <thead>\r\n <tr class=\"i2xls-excel-colrow\">\r\n <th class=\"i2xls-excel-corner\"><\/th>\r\n <th>A<\/th>\r\n <th>B<\/th>\r\n <th>C<\/th>\r\n <th>D<\/th>\r\n <th>E<\/th>\r\n <th>F<\/th>\r\n <th>G<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"i2xls-excel-header-row\">\r\n <td class=\"i2xls-excel-rownum\">1<\/td>\r\n <td>Supplier<\/td>\r\n <td>Invoice #<\/td>\r\n <td>Date<\/td>\r\n <td>Item<\/td>\r\n <td>Qty<\/td>\r\n <td>Unit Price<\/td>\r\n <td>Total<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"i2xls-excel-rownum\">2<\/td>\r\n <td>ABC Trading Co.<\/td>\r\n <td>INV-1045<\/td>\r\n <td>18 Sep 26<\/td>\r\n <td>Laptop<\/td>\r\n <td>5<\/td>\r\n <td>2,500<\/td>\r\n <td class=\"i2xls-excel-cell-active\">12,500<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"i2xls-excel-rownum\">3<\/td>\r\n <td>ABC Trading Co.<\/td>\r\n <td>INV-1045<\/td>\r\n <td>18 Sep 26<\/td>\r\n <td>Monitor<\/td>\r\n <td>10<\/td>\r\n <td>800<\/td>\r\n <td>8,000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"i2xls-excel-rownum\">4<\/td>\r\n <td>ABC Trading Co.<\/td>\r\n <td>INV-1045<\/td>\r\n <td>18 Sep 26<\/td>\r\n <td>Keyboard<\/td>\r\n <td>10<\/td>\r\n <td>150<\/td>\r\n <td>1,500<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\nconst WEBHOOK =\r\n 'https:\/\/n8n.aixworkspace.net\/webhook\/invoice-pdf-image-to-excel';\r\n\r\nconst fileInput =\r\n document.getElementById('i2xls-file-input');\r\n\r\nconst emailInput =\r\n document.getElementById('i2xls-email-input');\r\n\r\nconst form =\r\n document.getElementById('i2xls-invoice-form');\r\n\r\nconst submitBtn =\r\n document.getElementById('i2xls-submit-btn');\r\n\r\nconst fileList =\r\n document.getElementById('i2xls-file-list');\r\n\r\nconst uploadZone =\r\n document.getElementById('i2xls-upload-zone');\r\n\r\nconst successMsg =\r\n document.getElementById('i2xls-success-msg');\r\n\r\nconst errorMsg =\r\n document.getElementById('i2xls-error-msg');\r\n\r\n\r\nlet selectedFiles = [];\r\n\r\n\r\nfunction updateFileInput() {\r\n\r\n const transfer = new DataTransfer();\r\n\r\n selectedFiles.forEach(file => {\r\n transfer.items.add(file);\r\n });\r\n\r\n fileInput.files = transfer.files;\r\n\r\n}\r\n\r\n\r\nfunction formatFileSize(bytes) {\r\n\r\n if (bytes < 1024)\r\n return bytes + ' B';\r\n\r\n if (bytes < 1024 * 1024)\r\n return (bytes \/ 1024).toFixed(1) + ' KB';\r\n\r\n return (bytes \/ (1024 * 1024)).toFixed(1) + ' MB';\r\n\r\n}\r\n\r\n\r\nfunction renderFiles() {\r\n\r\n if (!selectedFiles.length) {\r\n\r\n fileList.innerHTML = '';\r\n fileList.classList.remove('i2xls-active');\r\n\r\n return;\r\n }\r\n\r\n fileList.classList.add('i2xls-active');\r\n\r\n fileList.innerHTML = selectedFiles.map((file, index) => {\r\n\r\n return `\r\n <div class=\"i2xls-file-item\">\r\n\r\n <div class=\"i2xls-file-item-icon\">\r\n\r\n <svg viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.8\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n\r\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\r\n <polyline points=\"14 2 14 8 20 8\"\/>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n <div class=\"i2xls-file-info\">\r\n\r\n <div class=\"i2xls-file-name\">\r\n ${escapeHtml(file.name)}\r\n <\/div>\r\n\r\n <div class=\"i2xls-file-size\">\r\n ${formatFileSize(file.size)}\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"i2xls-remove-file\"\r\n onclick=\"removeFile(${index})\"\r\n aria-label=\"Remove file\"\r\n >\r\n \u00d7\r\n <\/button>\r\n\r\n <\/div>\r\n `;\r\n\r\n }).join('');\r\n\r\n}\r\n\r\n\r\nfunction escapeHtml(text) {\r\n\r\n const div = document.createElement('div');\r\n\r\n div.textContent = text;\r\n\r\n return div.innerHTML;\r\n\r\n}\r\n\r\n\r\nfunction addFiles(files) {\r\n\r\n const allowedTypes = [\r\n 'application\/pdf',\r\n 'image\/png',\r\n 'image\/jpeg'\r\n ];\r\n\r\n Array.from(files).forEach(file => {\r\n\r\n if (!allowedTypes.includes(file.type)) {\r\n return;\r\n }\r\n\r\n const alreadyExists = selectedFiles.some(existing =>\r\n existing.name === file.name &&\r\n existing.size === file.size\r\n );\r\n\r\n if (!alreadyExists) {\r\n selectedFiles.push(file);\r\n }\r\n\r\n });\r\n\r\n updateFileInput();\r\n renderFiles();\r\n\r\n}\r\n\r\n\r\nfunction removeFile(index) {\r\n\r\n selectedFiles.splice(index, 1);\r\n\r\n updateFileInput();\r\n renderFiles();\r\n\r\n}\r\n\r\n\r\nfileInput.addEventListener('change', () => {\r\n\r\n addFiles(fileInput.files);\r\n\r\n});\r\n\r\n\r\n['dragenter', 'dragover'].forEach(eventName => {\r\n\r\n uploadZone.addEventListener(eventName, event => {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n uploadZone.classList.add('i2xls-drag-active');\r\n\r\n });\r\n\r\n});\r\n\r\n\r\n['dragleave', 'drop'].forEach(eventName => {\r\n\r\n uploadZone.addEventListener(eventName, event => {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n uploadZone.classList.remove('i2xls-drag-active');\r\n\r\n });\r\n\r\n});\r\n\r\n\r\nuploadZone.addEventListener('drop', event => {\r\n\r\n addFiles(event.dataTransfer.files);\r\n\r\n});\r\n\r\n\r\nfunction showError(message) {\r\n\r\n errorMsg.textContent = message;\r\n\r\n errorMsg.style.display = 'block';\r\n\r\n successMsg.style.display = 'none';\r\n\r\n}\r\n\r\n\r\nfunction hideMessages() {\r\n\r\n errorMsg.style.display = 'none';\r\n successMsg.style.display = 'none';\r\n\r\n}\r\n\r\n\r\nemailInput.addEventListener('input', () => {\r\n\r\n emailInput.classList.remove('i2xls-error');\r\n\r\n});\r\n\r\n\r\nform.addEventListener('submit', async event => {\r\n\r\n event.preventDefault();\r\n\r\n hideMessages();\r\n\r\n if (!selectedFiles.length) {\r\n\r\n showError(\r\n 'Please upload at least one invoice file.'\r\n );\r\n\r\n return;\r\n }\r\n\r\n\r\n const email =\r\n emailInput.value.trim();\r\n\r\n if (!email) {\r\n\r\n emailInput.classList.add('i2xls-error');\r\n\r\n showError(\r\n 'Please enter your email address.'\r\n );\r\n\r\n return;\r\n }\r\n\r\n\r\n if (!emailInput.checkValidity()) {\r\n\r\n emailInput.classList.add('i2xls-error');\r\n\r\n showError(\r\n 'Please enter a valid email address.'\r\n );\r\n\r\n return;\r\n }\r\n\r\n\r\n submitBtn.disabled = true;\r\n\r\n submitBtn.innerHTML = `\r\n <span class=\"i2xls-spinner\"><\/span>\r\n Processing...\r\n `;\r\n\r\n\r\n try {\r\n\r\n const formData = new FormData();\r\n\r\n selectedFiles.forEach(file => {\r\n\r\n formData.append(\r\n 'Invoice_File',\r\n file,\r\n file.name\r\n );\r\n\r\n });\r\n\r\n\r\n formData.append(\r\n 'email',\r\n email\r\n );\r\n\r\n\r\n const response = await fetch(\r\n WEBHOOK,\r\n {\r\n method: 'POST',\r\n body: formData\r\n }\r\n );\r\n\r\n\r\n if (!response.ok) {\r\n\r\n throw new Error(\r\n 'Server error: ' + response.status\r\n );\r\n\r\n }\r\n\r\n\r\n successMsg.style.display = 'block';\r\n\r\n errorMsg.style.display = 'none';\r\n\r\n selectedFiles = [];\r\n\r\n updateFileInput();\r\n\r\n renderFiles();\r\n\r\n emailInput.value = '';\r\n\r\n\r\n successMsg.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'nearest'\r\n });\r\n\r\n\r\n } catch (error) {\r\n\r\n console.error(error);\r\n\r\n showError(\r\n 'Something went wrong while sending your request. Please try again.'\r\n );\r\n\r\n\r\n } finally {\r\n\r\n submitBtn.disabled = false;\r\n\r\n submitBtn.innerHTML = `\r\n <span class=\"i2xls-btn-text\">\r\n Extract Invoice Data\r\n <\/span>\r\n\r\n <span class=\"i2xls-btn-arrow\">\r\n \u2192\r\n <\/span>\r\n `;\r\n\r\n }\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Invoice to Excel AI-POWERED DOCUMENT PROCESSING Turn Invoices Into Excel Upload your invoice PDFs or images and let AI extract, organize and structure the data into a clean Excel file. PDF A ABC Trading Co. Riyadh, Saudi Arabia VAT 300123456700003 INVOICE INV-1045 Date18 Sep 2026 Due Date18 Oct 2026 DescriptionQtyUnit PriceTotal Laptop52,50012,500 Monitor108008,000 Keyboard101501,500 Subtotal22,000 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1597","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/pages\/1597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/comments?post=1597"}],"version-history":[{"count":47,"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/pages\/1597\/revisions"}],"predecessor-version":[{"id":2224,"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/pages\/1597\/revisions\/2224"}],"wp:attachment":[{"href":"https:\/\/aixworkspace.net\/ar\/wp-json\/wp\/v2\/media?parent=1597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}