npm - @adminkit/core - Versions diffs - 3.4.0 → 4.0.0 - Mend

@adminkit/core 3.4.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/LICENSE +21 -21
package/README.md +216 -148
package/dist/charts-chartjs.html +666 -0
package/dist/css/app.css +5 -5
package/dist/css/app.d.css.ts +3 -0
package/dist/fonts/inter-cyrillic-300-normal-BnqRxXuy.woff2 +0 -0
package/dist/fonts/inter-cyrillic-400-normal-obahsSVq.woff2 +0 -0
package/dist/fonts/inter-cyrillic-600-normal-CWCymEST.woff2 +0 -0
package/dist/fonts/inter-cyrillic-ext-300-normal-CgCALhwJ.woff2 +0 -0
package/dist/fonts/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2 +0 -0
package/dist/fonts/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2 +0 -0
package/dist/fonts/inter-greek-300-normal-DmGD3g_f.woff2 +0 -0
package/dist/fonts/inter-greek-400-normal-B4URO6DV.woff2 +0 -0
package/dist/fonts/inter-greek-600-normal-plRanbMR.woff2 +0 -0
package/dist/fonts/inter-greek-ext-300-normal-l2DDyC6M.woff2 +0 -0
package/dist/fonts/inter-greek-ext-400-normal-DGGRlc-M.woff2 +0 -0
package/dist/fonts/inter-greek-ext-600-normal-DRtmH8MT.woff2 +0 -0
package/dist/fonts/inter-latin-300-normal-BVlfKGgI.woff2 +0 -0
package/dist/fonts/inter-latin-400-normal-C38fXH4l.woff2 +0 -0
package/dist/fonts/inter-latin-600-normal-LgqL8muc.woff2 +0 -0
package/dist/fonts/inter-latin-ext-300-normal-CPgO9Ksf.woff2 +0 -0
package/dist/fonts/inter-latin-ext-400-normal-C1nco2VV.woff2 +0 -0
package/dist/fonts/inter-latin-ext-600-normal-D2bJ5OIk.woff2 +0 -0
package/dist/fonts/inter-vietnamese-300-normal-Bdr24Bqb.woff2 +0 -0
package/dist/fonts/inter-vietnamese-400-normal-DMkecbls.woff2 +0 -0
package/dist/fonts/inter-vietnamese-600-normal-Cc8MFFhd.woff2 +0 -0
package/dist/icons-lucide.html +7249 -0
package/dist/img/screenshots/pro/ai-chat-dark-800.webp +0 -0
package/dist/img/screenshots/pro/ai-chat-dark.webp +0 -0
package/dist/img/screenshots/pro/ai-chat-light-800.webp +0 -0
package/dist/img/screenshots/pro/ai-chat-light.webp +0 -0
package/dist/img/screenshots/pro/ai-usage-dark-800.webp +0 -0
package/dist/img/screenshots/pro/ai-usage-dark.webp +0 -0
package/dist/img/screenshots/pro/ai-usage-light-800.webp +0 -0
package/dist/img/screenshots/pro/ai-usage-light.webp +0 -0
package/dist/img/screenshots/pro/analytics-dark-800.webp +0 -0
package/dist/img/screenshots/pro/analytics-dark.webp +0 -0
package/dist/img/screenshots/pro/analytics-light-800.webp +0 -0
package/dist/img/screenshots/pro/analytics-light.webp +0 -0
package/dist/img/screenshots/pro/calendar-dark-800.webp +0 -0
package/dist/img/screenshots/pro/calendar-dark.webp +0 -0
package/dist/img/screenshots/pro/calendar-light-800.webp +0 -0
package/dist/img/screenshots/pro/calendar-light.webp +0 -0
package/dist/img/screenshots/pro/crm-dark-800.webp +0 -0
package/dist/img/screenshots/pro/crm-dark.webp +0 -0
package/dist/img/screenshots/pro/crm-light-800.webp +0 -0
package/dist/img/screenshots/pro/crm-light.webp +0 -0
package/dist/img/screenshots/pro/crypto-dark-800.webp +0 -0
package/dist/img/screenshots/pro/crypto-dark.webp +0 -0
package/dist/img/screenshots/pro/crypto-light-800.webp +0 -0
package/dist/img/screenshots/pro/crypto-light.webp +0 -0
package/dist/img/screenshots/pro/datatables-dark-800.webp +0 -0
package/dist/img/screenshots/pro/datatables-dark.webp +0 -0
package/dist/img/screenshots/pro/datatables-light-800.webp +0 -0
package/dist/img/screenshots/pro/datatables-light.webp +0 -0
package/dist/img/screenshots/pro/ecommerce-dark-800.webp +0 -0
package/dist/img/screenshots/pro/ecommerce-dark.webp +0 -0
package/dist/img/screenshots/pro/ecommerce-light-800.webp +0 -0
package/dist/img/screenshots/pro/ecommerce-light.webp +0 -0
package/dist/img/screenshots/pro/settings-dark-800.webp +0 -0
package/dist/img/screenshots/pro/settings-dark.webp +0 -0
package/dist/img/screenshots/pro/settings-light-800.webp +0 -0
package/dist/img/screenshots/pro/settings-light.webp +0 -0
package/dist/index.html +918 -0
package/dist/js/app.d.ts +78 -0
package/dist/js/app.js +4 -3
package/dist/js/head.js +1 -0
package/dist/js/icons-all.js +1 -0
package/dist/maps-google.html +469 -0
package/dist/pages-404.html +46 -0
package/dist/pages-500.html +46 -0
package/dist/pages-blank.html +423 -0
package/dist/pages-invoice.html +715 -0
package/dist/pages-pricing.html +730 -0
package/dist/pages-profile.html +787 -0
package/dist/pages-sign-in.html +76 -0
package/dist/pages-sign-up.html +73 -0
package/dist/tables-bootstrap.html +856 -0
package/dist/ui-alerts.html +745 -0
package/dist/ui-buttons.html +529 -0
package/dist/ui-cards.html +469 -0
package/dist/ui-forms.html +584 -0
package/dist/ui-modals.html +800 -0
package/dist/ui-typography.html +560 -0
package/dist/upgrade-to-pro.html +788 -0
package/package.json +114 -88
package/dist/css/app.css.map +0 -1
package/dist/fonts/.gitkeep +0 -0
package/dist/img/photos/unsplash-3.jpg +0 -0
package/dist/js/app.js.LICENSE.txt +0 -514
package/dist/js/app.js.map +0 -1

package/dist/pages-invoice.html ADDED Viewed

@@ -0,0 +1,715 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="description"
+		content="Invoice page demo for the free AdminKit Bootstrap 5 template. An invoice with status, billing details, line items, totals and payment details that prints without the sidebar and navbar.">
+	<meta name="author" content="AdminKit">
+	<meta name="keywords" content="adminkit, bootstrap, bootstrap 5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
+	<link rel="shortcut icon" href="./img/icons/icon-48x48.png" />
+	<link rel="canonical" href="https://demo-basic.adminkit.io/pages-invoice" />
+	<title>Invoice | AdminKit Demo</title>
+	<!-- Color mode before the first paint (src/js/head.js). Vite leaves vite-ignore tags as they are; vite.config.js builds the file. -->
+	<script src="js/head.js"></script>
+	<script type="module" crossorigin src="./js/app.js"></script>
+	<link rel="stylesheet" crossorigin href="./css/app.css">
+  <link rel="preload" href="./fonts/inter-latin-400-normal-C38fXH4l.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="./fonts/inter-latin-600-normal-LgqL8muc.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+<body>
+	<div class="wrapper">
+		<nav id="sidebar" class="sidebar js-sidebar offcanvas-lg offcanvas-start" tabindex="-1" aria-label="Sidebar">
+			<div class="sidebar-content js-simplebar">
+				<a class="sidebar-brand" href="index.html">
+					<span class="align-middle">AdminKit</span>
+				</a>
+				<ul class="sidebar-nav">
+					<li class="sidebar-header">
+						Pages
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="index.html">
+							<i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Analytics</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="pages-profile.html">
+							<i class="align-middle" data-lucide="user"></i> <span class="align-middle">Profile</span>
+						</a>
+					</li>
+					<li class="sidebar-item active">
+						<a class="sidebar-link" href="pages-invoice.html">
+							<i class="align-middle" data-lucide="credit-card"></i> <span class="align-middle">Invoice</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="pages-sign-in.html">
+							<i class="align-middle" data-lucide="log-in"></i> <span class="align-middle">Sign In</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="pages-sign-up.html">
+							<i class="align-middle" data-lucide="user-plus"></i> <span class="align-middle">Sign Up</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="pages-404.html">
+							<i class="align-middle" data-lucide="search-x"></i> <span class="align-middle">404 Page</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="pages-500.html">
+							<i class="align-middle" data-lucide="server-crash"></i> <span class="align-middle">500 Page</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="pages-pricing.html">
+							<i class="align-middle" data-lucide="tag"></i> <span class="align-middle">Pricing</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="pages-blank.html">
+							<i class="align-middle" data-lucide="book"></i> <span class="align-middle">Blank</span>
+						</a>
+					</li>
+					<li class="sidebar-header">
+						Tools & Components
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="ui-alerts.html">
+							<i class="align-middle" data-lucide="bell"></i> <span class="align-middle">Alerts</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="ui-buttons.html">
+							<i class="align-middle" data-lucide="square"></i> <span class="align-middle">Buttons</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="ui-forms.html">
+							<i class="align-middle" data-lucide="square-check-big"></i> <span class="align-middle">Forms</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="ui-cards.html">
+							<i class="align-middle" data-lucide="layout-grid"></i> <span class="align-middle">Cards</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="ui-modals.html">
+							<i class="align-middle" data-lucide="app-window"></i> <span class="align-middle">Modals</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="ui-typography.html">
+							<i class="align-middle" data-lucide="text-align-start"></i> <span class="align-middle">Typography</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="icons-lucide.html">
+							<i class="align-middle" data-lucide="coffee"></i> <span class="align-middle">Icons</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="tables-bootstrap.html">
+							<i class="align-middle" data-lucide="list"></i> <span class="align-middle">Tables</span>
+						</a>
+					</li>
+					<li class="sidebar-header">
+						Plugins & Addons
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="charts-chartjs.html">
+							<i class="align-middle" data-lucide="chart-no-axes-column"></i> <span class="align-middle">Charts</span>
+						</a>
+					</li>
+					<li class="sidebar-item">
+						<a class="sidebar-link" href="maps-google.html">
+							<i class="align-middle" data-lucide="map"></i> <span class="align-middle">Maps</span>
+						</a>
+					</li>
+				</ul>
+				<div class="sidebar-cta">
+					<div class="sidebar-cta-content">
+						<strong class="d-inline-block mb-2">Upgrade to Pro</strong>
+						<div class="mb-3 text-sm">
+							AdminKit PRO, the premium version, has more components.
+						</div>
+						<div class="d-grid">
+							<a href="upgrade-to-pro.html" class="btn btn-primary">Upgrade to Pro</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</nav>
+		<div class="main">
+			<nav class="navbar navbar-expand navbar-light navbar-bg" aria-label="Top bar">
+				<button type="button" class="sidebar-toggle js-sidebar-toggle" aria-controls="sidebar" aria-expanded="true" aria-label="Collapse sidebar">
+					<i class="hamburger align-self-center"></i>
+				</button>
+				<div class="navbar-collapse collapse">
+					<ul class="navbar-nav navbar-align">
+						<li class="nav-item dropdown">
+							<a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+								<div class="position-relative">
+									<span class="visually-hidden">Notifications</span>
+									<i class="align-middle" data-lucide="bell"></i>
+									<span class="indicator">4</span>
+								</div>
+							</a>
+							<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown">
+								<div class="dropdown-menu-header">
+									4 New Notifications
+								</div>
+								<div class="list-group">
+									<a href="#" class="list-group-item">
+										<div class="row g-0 align-items-center">
+											<div class="col-2">
+												<i class="text-danger" data-lucide="circle-alert"></i>
+											</div>
+											<div class="col-10">
+												<div class="text-dark">Update completed</div>
+												<div class="text-body-secondary small mt-1">Restart server 12 to complete the update.</div>
+												<div class="text-body-secondary small mt-1">30m ago</div>
+											</div>
+										</div>
+									</a>
+									<a href="#" class="list-group-item">
+										<div class="row g-0 align-items-center">
+											<div class="col-2">
+												<i class="text-warning" data-lucide="bell"></i>
+											</div>
+											<div class="col-10">
+												<div class="text-dark">Lorem ipsum</div>
+												<div class="text-body-secondary small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>
+												<div class="text-body-secondary small mt-1">2h ago</div>
+											</div>
+										</div>
+									</a>
+									<a href="#" class="list-group-item">
+										<div class="row g-0 align-items-center">
+											<div class="col-2">
+												<i class="text-primary" data-lucide="house"></i>
+											</div>
+											<div class="col-10">
+												<div class="text-dark">Login from 192.186.1.8</div>
+												<div class="text-body-secondary small mt-1">5h ago</div>
+											</div>
+										</div>
+									</a>
+									<a href="#" class="list-group-item">
+										<div class="row g-0 align-items-center">
+											<div class="col-2">
+												<i class="text-success" data-lucide="user-plus"></i>
+											</div>
+											<div class="col-10">
+												<div class="text-dark">New connection</div>
+												<div class="text-body-secondary small mt-1">Christina accepted your request.</div>
+												<div class="text-body-secondary small mt-1">14h ago</div>
+											</div>
+										</div>
+									</a>
+								</div>
+								<div class="dropdown-menu-footer">
+									<a href="#" class="text-body-secondary">Show all notifications</a>
+								</div>
+							</div>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
+								aria-label="Messages">
+								<div class="position-relative">
+									<i class="align-middle" data-lucide="message-square"></i>
+								</div>
+							</a>
+							<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown">
+								<div class="dropdown-menu-header">
+									<div class="position-relative">
+										4 New Messages
+									</div>
+								</div>
+								<div class="list-group">
+									<a href="#" class="list-group-item">
+										<div class="row g-0 align-items-center">
+											<div class="col-2">
+												<img src="./img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker" width="40"
+													height="40">
+											</div>
+											<div class="col-10 ps-2">
+												<div class="text-dark">Vanessa Tucker</div>
+												<div class="text-body-secondary small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>
+												<div class="text-body-secondary small mt-1">15m ago</div>
+											</div>
+										</div>
+									</a>
+									<a href="#" class="list-group-item">
+										<div class="row g-0 align-items-center">
+											<div class="col-2">
+												<img src="./img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris" width="40"
+													height="40">
+											</div>
+											<div class="col-10 ps-2">
+												<div class="text-dark">William Harris</div>
+												<div class="text-body-secondary small mt-1">Curabitur ligula sapien euismod vitae.</div>
+												<div class="text-body-secondary small mt-1">2h ago</div>
+											</div>
+										</div>
+									</a>
+									<a href="#" class="list-group-item">
+										<div class="row g-0 align-items-center">
+											<div class="col-2">
+												<img src="./img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason" width="40"
+													height="40">
+											</div>
+											<div class="col-10 ps-2">
+												<div class="text-dark">Christina Mason</div>
+												<div class="text-body-secondary small mt-1">Pellentesque auctor neque nec urna.</div>
+												<div class="text-body-secondary small mt-1">4h ago</div>
+											</div>
+										</div>
+									</a>
+									<a href="#" class="list-group-item">
+										<div class="row g-0 align-items-center">
+											<div class="col-2">
+												<img src="./img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman" width="40"
+													height="40">
+											</div>
+											<div class="col-10 ps-2">
+												<div class="text-dark">Sharon Lessman</div>
+												<div class="text-body-secondary small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div>
+												<div class="text-body-secondary small mt-1">5h ago</div>
+											</div>
+										</div>
+									</a>
+								</div>
+								<div class="dropdown-menu-footer">
+									<a href="#" class="text-body-secondary">Show all messages</a>
+								</div>
+							</div>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-icon dropdown-toggle" href="#" id="colorModeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
+								aria-label="Color mode" data-color-mode-toggle>
+								<span data-color-mode-icon="light" hidden><i class="align-middle" data-lucide="sun"></i></span>
+								<span data-color-mode-icon="dark" hidden><i class="align-middle" data-lucide="moon"></i></span>
+								<span data-color-mode-icon="auto"><i class="align-middle" data-lucide="sun-moon"></i></span>
+							</a>
+							<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="colorModeDropdown">
+								<li>
+									<button type="button" class="dropdown-item" data-color-mode-value="light" aria-pressed="false">
+										<i class="align-middle me-1" data-lucide="sun"></i> Light
+									</button>
+								</li>
+								<li>
+									<button type="button" class="dropdown-item" data-color-mode-value="dark" aria-pressed="false">
+										<i class="align-middle me-1" data-lucide="moon"></i> Dark
+									</button>
+								</li>
+								<li>
+									<button type="button" class="dropdown-item" data-color-mode-value="auto" aria-pressed="false">
+										<i class="align-middle me-1" data-lucide="sun-moon"></i> Auto
+									</button>
+								</li>
+							</ul>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
+								aria-label="Account">
+								<i class="align-middle" data-lucide="settings"></i>
+							</a>
+							<a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+								<img src="./img/avatars/avatar.jpg" class="avatar img-fluid rounded me-1" alt="Charles Hall" width="40" height="40" /> <span
+									class="text-dark">Charles Hall</span>
+							</a>
+							<div class="dropdown-menu dropdown-menu-end">
+								<a class="dropdown-item" href="pages-profile.html"><i class="align-middle me-1" data-lucide="user"></i> Profile</a>
+								<a class="dropdown-item" href="#"><i class="align-middle me-1" data-lucide="chart-pie"></i> Analytics</a>
+								<div class="dropdown-divider"></div>
+								<a class="dropdown-item" href="index.html"><i class="align-middle me-1" data-lucide="settings"></i> Settings & Privacy</a>
+								<a class="dropdown-item" href="#"><i class="align-middle me-1" data-lucide="circle-question-mark"></i> Help Center</a>
+								<div class="dropdown-divider"></div>
+								<a class="dropdown-item" href="#">Log out</a>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</nav>
+			<main class="content ak-reveal-cards">
+				<div class="container-fluid p-0">
+					<div class="row align-items-center g-2 mb-3 d-print-none">
+						<div class="col-12 col-sm">
+							<h1 class="h3 d-inline align-middle">Invoice</h1>
+							<a class="badge bg-dark text-light ms-2" href="upgrade-to-pro.html">Get more page examples</a>
+						</div>
+						<div class="col-12 col-sm-auto d-flex flex-wrap gap-2">
+							<button type="button" class="btn btn-outline-primary" data-invoice-print>
+								<i class="align-middle me-1" data-lucide="printer"></i> Print
+							</button>
+							<button type="button" class="btn btn-outline-primary" data-invoice-print>
+								<i class="align-middle me-1" data-lucide="download"></i> Download PDF
+							</button>
+							<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#invoice-send">
+								<i class="align-middle me-1" data-lucide="send"></i> Send invoice
+							</button>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-12 col-xl-8 col-xxl-9">
+							<article class="card invoice" aria-labelledby="invoice-title">
+								<div class="card-body p-4 p-md-5">
+									<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
+										<div class="d-flex align-items-center text-primary">
+											<svg class="me-2" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+												stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true">
+												<path d="M12 4L20 8.00004L12 12L4 8.00004L12 4Z"></path>
+												<path d="M20 12L12 16L4 12"></path>
+												<path d="M20 16L12 20L4 16"></path>
+											</svg>
+											<span class="fs-3 fw-bold text-body-emphasis">AdminKit</span>
+										</div>
+										<div class="text-sm-end">
+											<h2 class="h3 mb-1" id="invoice-title">Invoice</h2>
+											<div class="text-body-secondary mb-2">INV-2026-0148</div>
+											<span class="badge bg-warning">Unpaid</span>
+										</div>
+									</div>
+									<dl class="row invoice-meta g-3 mb-0">
+										<div class="col-6 col-md-3">
+											<dt>Issued</dt>
+											<dd><time datetime="2026-10-14">October 14, 2026</time></dd>
+										</div>
+										<div class="col-6 col-md-3">
+											<dt>Due date</dt>
+											<dd><time datetime="2026-11-13">November 13, 2026</time></dd>
+										</div>
+										<div class="col-6 col-md-3">
+											<dt>Purchase order</dt>
+											<dd>PO-7731</dd>
+										</div>
+										<div class="col-6 col-md-3">
+											<dt>Amount due</dt>
+											<dd class="fw-bold text-body-emphasis">$9,579.60</dd>
+										</div>
+									</dl>
+									<hr class="my-4" />
+									<div class="row g-4 mb-4">
+										<div class="col-sm-6">
+											<div class="h6 text-body-secondary mb-2">From</div>
+											<strong class="d-block text-body-emphasis">AdminKit LLC</strong>
+											<address class="text-body-secondary mb-0">
+												354 Roy Alley<br />
+												Denver, CO 80202<br />
+												USA<br />
+												<a href="mailto:billing@example.com">billing@example.com</a>
+											</address>
+										</div>
+										<div class="col-sm-6">
+											<div class="h6 text-body-secondary mb-2">Billed to</div>
+											<strong class="d-block text-body-emphasis">Ashton Cox</strong>
+											<address class="text-body-secondary mb-0">
+												Levitz Furniture<br />
+												4183 Forest Avenue<br />
+												New York, NY 10011<br />
+												USA<br />
+												<a href="mailto:ashton.cox@example.com">ashton.cox@example.com</a>
+											</address>
+										</div>
+									</div>
+									<table class="table invoice-items mb-0">
+										<caption class="visually-hidden">Items on invoice INV-2026-0148</caption>
+										<thead>
+											<tr>
+												<th scope="col">Description</th>
+												<th scope="col" class="text-end d-none d-sm-table-cell">Qty</th>
+												<th scope="col" class="text-end d-none d-sm-table-cell">Unit price</th>
+												<th scope="col" class="text-end">Amount</th>
+											</tr>
+										</thead>
+										<tbody>
+											<tr>
+												<td>
+													<div class="fw-medium text-body-emphasis">Website redesign, design phase</div>
+													<div class="text-body-secondary small">Homepage, product and checkout templates</div>
+												</td>
+												<td class="text-end d-none d-sm-table-cell">1</td>
+												<td class="text-end text-nowrap d-none d-sm-table-cell">$4,800.00</td>
+												<td class="text-end text-nowrap">$4,800.00</td>
+											</tr>
+											<tr>
+												<td>
+													<div class="fw-medium text-body-emphasis">Front-end development</div>
+													<div class="text-body-secondary small">Bootstrap 5 build, hours<span class="d-sm-none"> &middot; 32 &times;
+															$95.00</span></div>
+												</td>
+												<td class="text-end d-none d-sm-table-cell">32</td>
+												<td class="text-end text-nowrap d-none d-sm-table-cell">$95.00</td>
+												<td class="text-end text-nowrap">$3,040.00</td>
+											</tr>
+											<tr>
+												<td>
+													<div class="fw-medium text-body-emphasis">Content migration</div>
+													<div class="text-body-secondary small">Product pages moved from the old store<span class="d-sm-none">
+															&middot; 120 &times; $6.50</span></div>
+												</td>
+												<td class="text-end d-none d-sm-table-cell">120</td>
+												<td class="text-end text-nowrap d-none d-sm-table-cell">$6.50</td>
+												<td class="text-end text-nowrap">$780.00</td>
+											</tr>
+											<tr>
+												<td>
+													<div class="fw-medium text-body-emphasis">Hosting and maintenance</div>
+													<div class="text-body-secondary small">October 2026</div>
+												</td>
+												<td class="text-end d-none d-sm-table-cell">1</td>
+												<td class="text-end text-nowrap d-none d-sm-table-cell">$250.00</td>
+												<td class="text-end text-nowrap">$250.00</td>
+											</tr>
+										</tbody>
+									</table>
+									<div class="row">
+										<div class="col-sm-8 col-md-6 col-lg-5 ms-auto">
+											<table class="table table-sm table-borderless invoice-totals mb-0">
+												<caption class="visually-hidden">Totals</caption>
+												<tbody>
+													<tr>
+														<th scope="row" class="fw-normal text-body-secondary">Subtotal</th>
+														<td class="text-end">$8,870.00</td>
+													</tr>
+													<tr>
+														<th scope="row" class="fw-normal text-body-secondary">Sales tax (8%)</th>
+														<td class="text-end">$709.60</td>
+													</tr>
+													<tr>
+														<th scope="row" class="fw-normal text-body-secondary">Total</th>
+														<td class="text-end">$9,579.60</td>
+													</tr>
+													<tr>
+														<th scope="row" class="fw-normal text-body-secondary">Amount paid</th>
+														<td class="text-end">$0.00</td>
+													</tr>
+													<tr class="invoice-due">
+														<th scope="row">Amount due (USD)</th>
+														<td class="text-end">$9,579.60</td>
+													</tr>
+												</tbody>
+											</table>
+										</div>
+									</div>
+									<hr class="my-4" />
+									<div class="row g-4">
+										<div class="col-md-6">
+											<h3 class="h6 text-body-secondary mb-2">Payment details</h3>
+											<dl class="row invoice-payment mb-0">
+												<dt class="col-5">Bank</dt>
+												<dd class="col-7">Front Range Bank</dd>
+												<dt class="col-5">Account name</dt>
+												<dd class="col-7">AdminKit LLC</dd>
+												<dt class="col-5">Account</dt>
+												<dd class="col-7">Ending in 4821</dd>
+												<dt class="col-5">Reference</dt>
+												<dd class="col-7">INV-2026-0148</dd>
+											</dl>
+										</div>
+										<div class="col-md-6">
+											<h3 class="h6 text-body-secondary mb-2">Notes</h3>
+											<p class="text-body-secondary mb-2">
+												Thank you for your business. Please include the invoice number with your payment. Payment is due within 30 days.
+											</p>
+											<p class="text-body-secondary mb-0">
+												Questions about this invoice? Email <a href="mailto:billing@example.com">billing@example.com</a> or call +1
+												(303) 555-0142.
+											</p>
+										</div>
+									</div>
+								</div>
+							</article>
+						</div>
+						<div class="col-12 col-xl-4 col-xxl-3 d-print-none">
+							<div class="card">
+								<div class="card-header">
+									<h2 class="card-title mb-0">Activity</h2>
+								</div>
+								<ul class="list-group list-group-flush invoice-activity" data-invoice-activity>
+									<li class="list-group-item d-flex gap-3">
+										<i class="text-body-secondary flex-shrink-0" data-lucide="bell"></i>
+										<div>
+											<div>Reminder scheduled</div>
+											<div class="text-body-secondary small"><time datetime="2026-11-10">Nov 10, 2026</time></div>
+										</div>
+									</li>
+									<li class="list-group-item d-flex gap-3">
+										<i class="text-body-secondary flex-shrink-0" data-lucide="eye"></i>
+										<div>
+											<div>Viewed by Ashton Cox</div>
+											<div class="text-body-secondary small"><time datetime="2026-10-15T14:40">Oct 15, 2026, 2:40 PM</time></div>
+										</div>
+									</li>
+									<li class="list-group-item d-flex gap-3">
+										<i class="text-body-secondary flex-shrink-0" data-lucide="send"></i>
+										<div>
+											<div>Sent to ashton.cox@example.com</div>
+											<div class="text-body-secondary small"><time datetime="2026-10-14T09:15">Oct 14, 2026, 9:15 AM</time></div>
+										</div>
+									</li>
+									<li class="list-group-item d-flex gap-3">
+										<i class="text-body-secondary flex-shrink-0" data-lucide="file"></i>
+										<div>
+											<div>Created by Charles Hall</div>
+											<div class="text-body-secondary small"><time datetime="2026-10-14T09:12">Oct 14, 2026, 9:12 AM</time></div>
+										</div>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+					<div class="modal fade" id="invoice-send" tabindex="-1" aria-labelledby="invoice-send-title" aria-hidden="true">
+						<div class="modal-dialog modal-dialog-centered">
+							<form class="modal-content" data-invoice-send>
+								<div class="modal-header">
+									<h2 class="modal-title h5" id="invoice-send-title">Send invoice</h2>
+									<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+								</div>
+								<div class="modal-body">
+									<div class="mb-3">
+										<label class="form-label" for="invoice-send-to">To</label>
+										<input type="email" class="form-control" id="invoice-send-to" value="ashton.cox@example.com" required />
+									</div>
+									<div class="mb-3">
+										<label class="form-label" for="invoice-send-subject">Subject</label>
+										<input type="text" class="form-control" id="invoice-send-subject" value="Invoice INV-2026-0148 from AdminKit"
+											required />
+									</div>
+									<div class="mb-3">
+										<label class="form-label" for="invoice-send-message">Message</label>
+										<textarea class="form-control" id="invoice-send-message" rows="6">Hi Ashton,
+Please find attached invoice INV-2026-0148 for $9,579.60, due November 13, 2026.
+Thanks,
+Charles</textarea>
+									</div>
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" id="invoice-send-pdf" checked />
+										<label class="form-check-label" for="invoice-send-pdf">Attach the invoice as a PDF</label>
+									</div>
+								</div>
+								<div class="modal-footer">
+									<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
+									<button type="submit" class="btn btn-primary">Send</button>
+								</div>
+							</form>
+						</div>
+					</div>
+				</div>
+			</main>
+			<footer class="footer ak-reveal">
+				<div class="container-fluid">
+					<div class="row text-body-secondary">
+						<div class="col-6 text-start">
+							<p class="mb-0">
+								<a class="text-body-secondary" href="https://adminkit.io/" target="_blank"><strong>AdminKit</strong></a> - <a
+									class="text-body-secondary" href="https://adminkit.io/" target="_blank"><strong>Bootstrap Admin Template</strong></a> &copy;
+								2026
+							</p>
+						</div>
+						<div class="col-6 text-end">
+							<ul class="list-inline">
+								<li class="list-inline-item">
+									<a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Support</a>
+								</li>
+								<li class="list-inline-item">
+									<a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Help Center</a>
+								</li>
+								<li class="list-inline-item">
+									<a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Privacy</a>
+								</li>
+								<li class="list-inline-item">
+									<a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Terms</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</footer>
+		</div>
+	</div>
+	<script>
+		document.addEventListener("DOMContentLoaded", function() {
+			// Print and Download PDF open the print dialog, which can also save the invoice as a PDF;
+			// the print styles leave out the sidebar, navbar, actions and activity
+			document.querySelectorAll("[data-invoice-print]").forEach(function(button) {
+				button.addEventListener("click", function() {
+					window.print();
+				});
+			});
+			// Demo only: "sending" closes the dialog and adds the event to the activity list
+			var form = document.querySelector("[data-invoice-send]");
+			var activity = document.querySelector("[data-invoice-activity]");
+			form.addEventListener("submit", function(event) {
+				event.preventDefault();
+				if (!form.checkValidity()) {
+					form.reportValidity();
+					return;
+				}
+				var item = document.createElement("li");
+				item.className = "list-group-item d-flex gap-3";
+				item.innerHTML =
+					'<i class="text-body-secondary flex-shrink-0" data-lucide="send"></i><div><div></div><div class="text-body-secondary small">Just now</div></div>';
+				item.querySelector("div > div").textContent = "Sent to " + form.querySelector("#invoice-send-to").value;
+				activity.prepend(item);
+				bootstrap.Modal.getOrCreateInstance(form.closest(".modal")).hide();
+			});
+		});
+	</script>
+</body>
+</html>