ketatlas 0.1.0

package/templates/web/screens/demo.css

@@ -0,0 +1,255 @@
+/* Example product styles, separate from KetAtlas's viewer. */
+@import url("../styles/design-system.css");
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  height: 100%;
+  font-family: var(--kv-font-sans);
+  font-size: 15px;
+  color: var(--kv-text-main);
+  background: var(--kv-panel-bg);
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+button,
+input {
+  font: inherit;
+}
+button,
+a {
+  cursor: pointer;
+}
+button {
+  border-radius: var(--kv-radius-md);
+}
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+p {
+  line-height: 1.65;
+  color: var(--kv-text-secondary);
+}
+small {
+  color: var(--kv-text-muted);
+}
+.status {
+  height: 32px;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  font-size: 12px;
+  flex: none;
+}
+.mobile-header {
+  padding: 20px;
+  border-bottom: 1px solid var(--kv-panel-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.wordmark {
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  font-size: 20px;
+}
+.logo {
+  background: var(--kv-accent);
+  color: var(--kv-on-accent);
+  width: 42px;
+  height: 42px;
+  border-radius: var(--kv-radius-lg);
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 22px;
+}
+.mobile-body {
+  padding: 48px 28px;
+  flex: 1;
+  overflow: auto;
+}
+.eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  color: var(--kv-accent);
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+.mobile-body h1 {
+  font-size: 32px;
+  letter-spacing: -0.045em;
+  line-height: 1.15;
+  margin: 28px 0 16px;
+}
+.mobile-body label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  margin: 30px 0 10px;
+}
+.mobile-body input {
+  width: 100%;
+  height: 48px;
+  border: 1px solid var(--kv-input-border);
+  background: var(--kv-input-bg);
+  color: var(--kv-text-main);
+  border-radius: var(--kv-radius-md);
+  padding: 12px;
+}
+.mobile-footer {
+  border-top: 1px solid var(--kv-panel-border);
+  padding: 16px 20px 26px;
+}
+.mobile-footer button {
+  width: 100%;
+  height: 48px;
+}
+.alert {
+  padding: 16px;
+  border: 1px solid var(--kv-warning-border);
+  background: var(--kv-warning-bg);
+  color: var(--kv-warning);
+  border-radius: var(--kv-radius-md);
+  margin-top: 24px;
+  font-size: 13px;
+}
+.row-card {
+  padding: 20px 0;
+  border-bottom: 1px solid var(--kv-panel-border);
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+.row-card strong {
+  display: block;
+  margin-bottom: 6px;
+}
+.stat {
+  background: var(--kv-page-bg);
+  padding: 24px;
+  border-radius: var(--kv-radius-lg);
+  margin: 24px 0;
+}
+.stat strong {
+  font-size: 40px;
+  display: block;
+  letter-spacing: -0.05em;
+}
+.portal {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  height: 100%;
+  background: var(--kv-page-bg);
+}
+.portal aside {
+  padding: 30px 24px;
+  background: var(--kv-panel-bg);
+  border-right: 1px solid var(--kv-panel-border);
+}
+.portal nav {
+  margin-top: 56px;
+  display: grid;
+  gap: 12px;
+}
+.portal nav span {
+  padding: 12px;
+  border-radius: var(--kv-radius-md);
+  color: var(--kv-text-secondary);
+}
+.portal nav .active {
+  color: var(--kv-accent);
+  background: var(--kv-accent-subtle);
+}
+.portal main {
+  padding: 32px 48px;
+  overflow: auto;
+}
+.portal header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--kv-panel-border);
+  padding-bottom: 26px;
+  margin-bottom: 36px;
+}
+.portal h1 {
+  font-size: 30px;
+  letter-spacing: -0.04em;
+  margin-bottom: 12px;
+}
+.portal .content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 28px;
+}
+.panel {
+  border: 1px solid var(--kv-panel-border);
+  background: var(--kv-panel-bg);
+  border-radius: var(--kv-radius-lg);
+  padding: 28px;
+}
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+th,
+td {
+  text-align: left;
+  padding: 19px 12px;
+  border-bottom: 1px solid var(--kv-panel-border);
+  font-size: 14px;
+}
+th {
+  font-size: 12px;
+  color: var(--kv-text-muted);
+  font-weight: 500;
+}
+tr:last-child td {
+  border: 0;
+}
+.pill {
+  background: var(--kv-warning-bg);
+  color: var(--kv-warning);
+  padding: 6px 10px;
+  border-radius: var(--kv-radius-full);
+  font-size: 12px;
+}
+.pill.success {
+  color: var(--kv-positive);
+  background: var(--kv-positive-bg);
+}
+.summary {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 30px;
+}
+.summary small {
+  display: block;
+  margin-bottom: 8px;
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+}
+.success-block {
+  padding: 50px 30px;
+  text-align: center;
+}
+.success-block .logo {
+  margin: 0 auto 24px;
+  background: var(--kv-positive-bg);
+  color: var(--kv-positive);
+}

package/templates/web/screens/portal.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Northstar purchasing</title>
+    <link rel="stylesheet" href="demo.css" />
+  </head>
+  <body data-kv-design-system>
+    <div class="portal">
+      <aside>
+        <div class="wordmark">northstar</div>
+        <nav>
+          <span>Overview</span><span class="active">Purchasing</span><span>Inventory</span
+          ><span>Suppliers</span><span>Reports</span>
+        </nav>
+      </aside>
+      <main>
+        <header><small>Operations / Purchasing</small><span>Alex Morgan · AM</span></header>
+        <div id="content"></div>
+      </main>
+    </div>
+    <script>
+      const screen = new URLSearchParams(location.search).get("screen") || "list";
+      const content = document.getElementById("content");
+      const go = (id) => (location.href = "?screen=" + id);
+      if (screen === "list")
+        content.innerHTML =
+          '<div class="content-header"><div><div class="eyebrow">Your approval queue</div><h1>Purchase requests</h1><p>Review requests before they reach your suppliers.</p></div><span class="pill">3 waiting for review</span></div><div class="panel"><table><thead><tr><th>Request</th><th>Requested by</th><th>Supplier</th><th>Amount</th><th>Status</th><th></th></tr></thead><tbody><tr><td><strong>PR-1042</strong><br><small>Office equipment</small></td><td>Jamie Chen</td><td>Paper & Co.</td><td>$1,240.00</td><td><span class="pill">Pending</span></td><td><button data-ui="action" data-variant="secondary" id="open">Review</button></td></tr><tr><td>PR-1041<br><small>Packaging supplies</small></td><td>Robin Lee</td><td>Packworks</td><td>$860.00</td><td><span class="pill">Pending</span></td><td></td></tr><tr><td>PR-1040<br><small>Warehouse shelving</small></td><td>Sam Taylor</td><td>Storage Lab</td><td>$2,180.00</td><td><span class="pill">Pending</span></td><td></td></tr></tbody></table></div>';
+      else if (screen === "review")
+        content.innerHTML =
+          '<div class="content-header"><div><div class="eyebrow">PR-1042</div><h1>Office equipment</h1><p>Requested by Jamie Chen · September 7, 2026</p></div><span class="pill">Pending review</span></div><div class="panel"><div class="summary"><div><small>Supplier</small><strong>Paper & Co.</strong></div><div><small>Delivery location</small><strong>Northstar · Main office</strong></div></div><table><thead><tr><th>Item</th><th>Quantity</th><th>Unit price</th><th>Amount</th></tr></thead><tbody><tr><td>Ergonomic desk chair</td><td>4</td><td>$260.00</td><td>$1,040.00</td></tr><tr><td>Adjustable monitor stand</td><td>4</td><td>$50.00</td><td>$200.00</td></tr></tbody></table><div class="actions"><strong>Total · $1,240.00</strong></div></div><div class="actions"><button id="back" data-ui="action" data-variant="secondary">Back to requests</button><button id="approve" data-ui="action" data-variant="primary">Approve request</button></div>';
+      else
+        content.innerHTML =
+          '<div class="panel success-block"><div class="logo">✓</div><div class="eyebrow">Approval recorded</div><h1>Ready for purchasing.</h1><p>PR-1042 has been approved for $1,240.00.<br>The purchasing team can now issue the order.</p><div class="actions" style="justify-content:center"><button id="back" data-ui="action" data-variant="primary">Back to requests</button></div></div>';
+      document.getElementById("open")?.addEventListener("click", () => go("review"));
+      document.getElementById("back")?.addEventListener("click", () => go("list"));
+      document.getElementById("approve")?.addEventListener("click", () => go("approved"));
+    </script>
+  </body>
+</html>

package/templates/web/styles/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KETVIET JSC, Vietnam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.