add new table view

project/assets/controllers/app_controller.js

@@ -51,6 +51,7 @@ export default class extends Controller {
         this.resultTarget.innerHTML = '';
         this.hideError();
         this.stepValue = 1;
+        // window.history.pushState(null, null, "/");
     }
 
     // ---- pliki ----
@@ -93,7 +94,8 @@ export default class extends Controller {
 
             const res = await fetch(this.endpointUrl, { method: 'POST', body: fd });
             if (!res.ok) throw new Error('Błąd serwera (' + res.status + ')');
-
+            // const hashSummary = res.url.replace(/^https?:\/\/[^/]+\//, "/").replace(this.endpointUrl, "");
+            // window.history.pushState(null, null, hashSummary);
             this.resultTarget.innerHTML = await res.text();
             this.stepValue = 3;
         } catch (err) {

project/assets/styles/main.less

@@ -1,3 +1,4 @@
+@import "table";
 .main-container {
   font-family: 'Public Sans', system-ui, sans-serif;
   color: #1C1C1A;
@@ -12,7 +13,7 @@
 .card {
   position: relative;
   width: 100%;
-  max-width: 660px;
+  max-width: 750px;
   background: #FBFBF9;
   border: 1px solid #E6E5E0;
   border-radius: 18px;

project/assets/styles/table.less

@@ -0,0 +1,38 @@
+.summaryTable {
+  .table-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+  .table-title { font-size: 13px; font-weight: 600; }
+
+
+  .table-wrap {
+    border: 1px solid #E6E5E0; border-radius: 10px; overflow-x: auto; background: #FFFFFF;
+
+    table { width: 100%; border-collapse: collapse; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; }
+    th {
+      padding: 9px; font-weight: 600; color: #6B6A64; font-size: 10px;
+      text-transform: uppercase; letter-spacing: .03em;
+      border-bottom: 1px solid #E6E5E0; white-space: nowrap; background: #FAFAF7;
+    }
+    td { padding: 9px; border-bottom: 1px solid #F0EFEB; white-space: nowrap; }
+    tfoot tr { background: #FAFAF7; }
+
+
+    .foot-label {
+      font-family: 'Public Sans', sans-serif; font-size: 12px; font-weight: 600;
+      color: #6B6A64; text-transform: uppercase; letter-spacing: .04em;
+    }
+    .foot-value { text-align: right; font-weight: 700; color: #1C1C1A; font-size: 14px; }
+
+  }
+
+  .note { margin-top: 10px; font-size: 12px; color: #6B6A64; }
+  .actions { display: flex; gap: 10px; margin-top: 22px; }
+  .btn-accent {
+    color: #FFFFFF; border: none; border-radius: 9px; padding: 11px 18px;
+    font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
+  }
+  .btn-ghost {
+    background: none; border: 1px solid #E6E5E0; border-radius: 9px; padding: 11px 18px;
+    font-size: 13.5px; font-weight: 600; color: #3B3A36; cursor: pointer; font-family: inherit;
+  }
+
+}