diff --git a/package-lock.json b/package-lock.json
old mode 100755
new mode 100644
index cab0bc6..8340d82
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "html-to-image": "^1.11.11",
         "html2canvas": "^1.4.1",
         "moment": "^2.30.1",
-        "pinia": "^2.1.7",
+        "pinia": "^2.3.1",
         "v-pagination-3": "^0.1.7",
         "vue": "^3.3.11",
         "vue-debounce": "^5.0.0",
@@ -55,10 +55,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
-      "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.3.tgz",
+      "integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -66,6 +98,27 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.28.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
+      "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -434,46 +487,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@foliojs-fork/fontkit": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@foliojs-fork/fontkit/-/fontkit-1.9.2.tgz",
-      "integrity": "sha512-IfB5EiIb+GZk+77TRB86AHroVaqfq8JRFlUbz0WEwsInyCG0epX2tCPOy+UfaWPju30DeVoUAXfzWXmhn753KA==",
-      "dependencies": {
-        "@foliojs-fork/restructure": "^2.0.2",
-        "brotli": "^1.2.0",
-        "clone": "^1.0.4",
-        "deep-equal": "^1.0.0",
-        "dfa": "^1.2.0",
-        "tiny-inflate": "^1.0.2",
-        "unicode-properties": "^1.2.2",
-        "unicode-trie": "^2.0.0"
-      }
-    },
-    "node_modules/@foliojs-fork/linebreak": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@foliojs-fork/linebreak/-/linebreak-1.1.2.tgz",
-      "integrity": "sha512-ZPohpxxbuKNE0l/5iBJnOAfUaMACwvUIKCvqtWGKIMv1lPYoNjYXRfhi9FeeV9McBkBLxsMFWTVVhHJA8cyzvg==",
-      "dependencies": {
-        "base64-js": "1.3.1",
-        "unicode-trie": "^2.0.0"
-      }
-    },
-    "node_modules/@foliojs-fork/pdfkit": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@foliojs-fork/pdfkit/-/pdfkit-0.13.0.tgz",
-      "integrity": "sha512-YXeG1fml9k97YNC9K8e292Pj2JzGt9uOIiBFuQFxHsdQ45BlxW+JU3RQK6JAvXU7kjhjP8rCcYvpk36JLD33sQ==",
-      "dependencies": {
-        "@foliojs-fork/fontkit": "^1.9.1",
-        "@foliojs-fork/linebreak": "^1.1.1",
-        "crypto-js": "^4.0.0",
-        "png-js": "^1.0.0"
-      }
-    },
-    "node_modules/@foliojs-fork/restructure": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@foliojs-fork/restructure/-/restructure-2.0.2.tgz",
-      "integrity": "sha512-59SgoZ3EXbkfSX7b63tsou/SDGzwUEK6MuB5sKqgVK1/XE0fxmpsOb9DQI8LXW3KfGnAjImCGhhEb7uPPAUVNA=="
-    },
     "node_modules/@fullcalendar/core": {
       "version": "6.1.19",
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.19.tgz",
@@ -512,7 +525,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -525,18 +537,49 @@
         "node": ">=12"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
@@ -548,24 +591,15 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "version": "0.3.30",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
+      "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -573,9 +607,9 @@
       }
     },
     "node_modules/@kyvg/vue3-notification": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@kyvg/vue3-notification/-/vue3-notification-3.2.0.tgz",
-      "integrity": "sha512-DKicfzxS6n7oMCkFoUqzb26Orjv8Oo3fhOgSDYM2I1mGDwBW+Tyb/yr2eauho0R+E5chNswZ3AUyAE9DqutXmg==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@kyvg/vue3-notification/-/vue3-notification-3.4.1.tgz",
+      "integrity": "sha512-WhTWCbF36JHLJR5UdKmJF7KXGOGVy4tLeaJuKTHZhwttZWnbF9w1/c2d32tvCSwY9CdeX/n9uoaKWLMKK3vOyg==",
       "peerDependencies": {
         "vue": "^3.0.0"
       }
@@ -584,7 +618,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -597,7 +630,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -606,7 +638,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -615,20 +646,486 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@octokit/auth-token": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz",
+      "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==",
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-7.0.3.tgz",
+      "integrity": "sha512-oNXsh2ywth5aowwIa7RKtawnkdH6LgU1ztfP9AIUCQCvzysB+WeU8o2kyyosDPwBZutPpjZDKPQGIzzrfTWweQ==",
+      "dependencies": {
+        "@octokit/auth-token": "^6.0.0",
+        "@octokit/graphql": "^9.0.1",
+        "@octokit/request": "^10.0.2",
+        "@octokit/request-error": "^7.0.0",
+        "@octokit/types": "^14.0.0",
+        "before-after-hook": "^4.0.0",
+        "universal-user-agent": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.0.tgz",
+      "integrity": "sha512-hoYicJZaqISMAI3JfaDr1qMNi48OctWuOih1m80bkYow/ayPw6Jj52tqWJ6GEoFTk1gBqfanSoI1iY99Z5+ekQ==",
+      "dependencies": {
+        "@octokit/types": "^14.0.0",
+        "universal-user-agent": "^7.0.2"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.1.tgz",
+      "integrity": "sha512-j1nQNU1ZxNFx2ZtKmL4sMrs4egy5h65OMDmSbVyuCzjOcwsHq6EaYjOTGXPQxgfiN8dJ4CriYHk6zF050WEULg==",
+      "dependencies": {
+        "@octokit/request": "^10.0.2",
+        "@octokit/types": "^14.0.0",
+        "universal-user-agent": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "25.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz",
+      "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA=="
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-13.1.1.tgz",
+      "integrity": "sha512-q9iQGlZlxAVNRN2jDNskJW/Cafy7/XE52wjZ5TTvyhyOD904Cvx//DNyoO3J/MXJ0ve3rPoNWKEg5iZrisQSuw==",
+      "dependencies": {
+        "@octokit/types": "^14.1.0"
+      },
+      "engines": {
+        "node": ">= 20"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=6"
+      }
+    },
+    "node_modules/@octokit/plugin-retry": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-retry/-/plugin-retry-8.0.1.tgz",
+      "integrity": "sha512-KUoYR77BjF5O3zcwDQHRRZsUvJwepobeqiSSdCJ8lWt27FZExzb0GgVxrhhfuyF6z2B2zpO0hN5pteni1sqWiw==",
+      "dependencies": {
+        "@octokit/request-error": "^7.0.0",
+        "@octokit/types": "^14.0.0",
+        "bottleneck": "^2.15.3"
+      },
+      "engines": {
+        "node": ">= 20"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=7"
+      }
+    },
+    "node_modules/@octokit/plugin-throttling": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-throttling/-/plugin-throttling-11.0.1.tgz",
+      "integrity": "sha512-S+EVhy52D/272L7up58dr3FNSMXWuNZolkL4zMJBNIfIxyZuUcczsQAU4b5w6dewJXnKYVgSHSV5wxitMSW1kw==",
+      "dependencies": {
+        "@octokit/types": "^14.0.0",
+        "bottleneck": "^2.15.3"
+      },
+      "engines": {
+        "node": ">= 20"
+      },
+      "peerDependencies": {
+        "@octokit/core": "^7.0.0"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.3.tgz",
+      "integrity": "sha512-V6jhKokg35vk098iBqp2FBKunk3kMTXlmq+PtbV9Gl3TfskWlebSofU9uunVKhUN7xl+0+i5vt0TGTG8/p/7HA==",
+      "dependencies": {
+        "@octokit/endpoint": "^11.0.0",
+        "@octokit/request-error": "^7.0.0",
+        "@octokit/types": "^14.0.0",
+        "fast-content-type-parse": "^3.0.0",
+        "universal-user-agent": "^7.0.2"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.0.0.tgz",
+      "integrity": "sha512-KRA7VTGdVyJlh0cP5Tf94hTiYVVqmt2f3I6mnimmaVz4UG3gQV/k4mDJlJv3X67iX6rmN7gSHCF8ssqeMnmhZg==",
+      "dependencies": {
+        "@octokit/types": "^14.0.0"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-14.1.0.tgz",
+      "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==",
+      "dependencies": {
+        "@octokit/openapi-types": "^25.1.0"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
       }
     },
+    "node_modules/@pnpm/config.env-replace": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
+      "integrity": "sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==",
+      "engines": {
+        "node": ">=12.22.0"
+      }
+    },
+    "node_modules/@pnpm/network.ca-file": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz",
+      "integrity": "sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==",
+      "dependencies": {
+        "graceful-fs": "4.2.10"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      }
+    },
+    "node_modules/@pnpm/network.ca-file/node_modules/graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "node_modules/@pnpm/npm-conf": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@pnpm/npm-conf/-/npm-conf-2.3.1.tgz",
+      "integrity": "sha512-c83qWb22rNRuB0UaVCI0uRPNRr8Z0FWnEIvT47jiHAmOIUHbBOg5XvV7pM5x+rKn9HRpjxquDbXYSXr3fAKFcw==",
+      "dependencies": {
+        "@pnpm/config.env-replace": "^1.1.0",
+        "@pnpm/network.ca-file": "^1.0.1",
+        "config-chain": "^1.1.11"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
-      "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.49.0.tgz",
+      "integrity": "sha512-rlKIeL854Ed0e09QGYFlmDNbka6I3EQFw7iZuugQjMb11KMpJCLPFL4ZPbMfaEhLADEL1yx0oujGkBQ7+qW3eA==",
       "cpu": [
         "arm"
       ],
@@ -639,9 +1136,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
-      "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.49.0.tgz",
+      "integrity": "sha512-cqPpZdKUSQYRtLLr6R4X3sD4jCBO1zUmeo3qrWBCqYIeH8Q3KRL4F3V7XJ2Rm8/RJOQBZuqzQGWPjjvFUcYa/w==",
       "cpu": [
         "arm64"
       ],
@@ -652,9 +1149,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
-      "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.49.0.tgz",
+      "integrity": "sha512-99kMMSMQT7got6iYX3yyIiJfFndpojBmkHfTc1rIje8VbjhmqBXE+nb7ZZP3A5skLyujvT0eIUCUsxAe6NjWbw==",
       "cpu": [
         "arm64"
       ],
@@ -665,9 +1162,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
-      "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.49.0.tgz",
+      "integrity": "sha512-y8cXoD3wdWUDpjOLMKLx6l+NFz3NlkWKcBCBfttUn+VGSfgsQ5o/yDUGtzE9HvsodkP0+16N0P4Ty1VuhtRUGg==",
       "cpu": [
         "x64"
       ],
@@ -677,10 +1174,49 @@
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.49.0.tgz",
+      "integrity": "sha512-3mY5Pr7qv4GS4ZvWoSP8zha8YoiqrU+e0ViPvB549jvliBbdNLrg2ywPGkgLC3cmvN8ya3za+Q2xVyT6z+vZqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.49.0.tgz",
+      "integrity": "sha512-C9KzzOAQU5gU4kG8DTk+tjdKjpWhVWd5uVkinCwwFub2m7cDYLOdtXoMrExfeBmeRy9kBQMkiyJ+HULyF1yj9w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
-      "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.49.0.tgz",
+      "integrity": "sha512-OVSQgEZDVLnTbMq5NBs6xkmz3AADByCWI4RdKSFNlDsYXdFtlxS59J+w+LippJe8KcmeSSM3ba+GlsM9+WwC1w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.49.0.tgz",
+      "integrity": "sha512-ZnfSFA7fDUHNa4P3VwAcfaBLakCbYaxCk0jUnS3dTou9P95kwoOLAMlT3WmEJDBCSrOEFFV0Y1HXiwfLYJuLlA==",
       "cpu": [
         "arm"
       ],
@@ -691,9 +1227,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
-      "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.49.0.tgz",
+      "integrity": "sha512-Z81u+gfrobVK2iV7GqZCBfEB1y6+I61AH466lNK+xy1jfqFLiQ9Qv716WUM5fxFrYxwC7ziVdZRU9qvGHkYIJg==",
       "cpu": [
         "arm64"
       ],
@@ -704,9 +1240,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
-      "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.49.0.tgz",
+      "integrity": "sha512-zoAwS0KCXSnTp9NH/h9aamBAIve0DXeYpll85shf9NJ0URjSTzzS+Z9evmolN+ICfD3v8skKUPyk2PO0uGdFqg==",
       "cpu": [
         "arm64"
       ],
@@ -716,10 +1252,36 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.49.0.tgz",
+      "integrity": "sha512-2QyUyQQ1ZtwZGiq0nvODL+vLJBtciItC3/5cYN8ncDQcv5avrt2MbKt1XU/vFAJlLta5KujqyHdYtdag4YEjYQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.49.0.tgz",
+      "integrity": "sha512-k9aEmOWt+mrMuD3skjVJSSxHckJp+SiFzFG+v8JLXbc/xi9hv2icSkR3U7uQzqy+/QbbYY7iNB9eDTwrELo14g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
-      "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.49.0.tgz",
+      "integrity": "sha512-rDKRFFIWJ/zJn6uk2IdYLc09Z7zkE5IFIOWqpuU0o6ZpHcdniAyWkwSUWE/Z25N/wNDmFHHMzin84qW7Wzkjsw==",
       "cpu": [
         "riscv64"
       ],
@@ -729,10 +1291,36 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.49.0.tgz",
+      "integrity": "sha512-FkkhIY/hYFVnOzz1WeV3S9Bd1h0hda/gRqvZCMpHWDHdiIHn6pqsY3b5eSbvGccWHMQ1uUzgZTKS4oGpykf8Tw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.49.0.tgz",
+      "integrity": "sha512-gRf5c+A7QiOG3UwLyOOtyJMD31JJhMjBvpfhAitPAoqZFcOeK3Kc1Veg1z/trmt+2P6F/biT02fU19GGTS529A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
-      "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.49.0.tgz",
+      "integrity": "sha512-BR7+blScdLW1h/2hB/2oXM+dhTmpW3rQt1DeSiCP9mc2NMMkqVgjIN3DDsNpKmezffGC9R8XKVOLmBkRUcK/sA==",
       "cpu": [
         "x64"
       ],
@@ -743,9 +1331,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
-      "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.49.0.tgz",
+      "integrity": "sha512-hDMOAe+6nX3V5ei1I7Au3wcr9h3ktKzDvF2ne5ovX8RZiAHEtX1A5SNNk4zt1Qt77CmnbqT+upb/umzoPMWiPg==",
       "cpu": [
         "x64"
       ],
@@ -756,9 +1344,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
-      "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.49.0.tgz",
+      "integrity": "sha512-wkNRzfiIGaElC9kXUT+HLx17z7D0jl+9tGYRKwd8r7cUqTL7GYAvgUY++U2hK6Ar7z5Z6IRRoWC8kQxpmM7TDA==",
       "cpu": [
         "arm64"
       ],
@@ -769,9 +1357,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
-      "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.49.0.tgz",
+      "integrity": "sha512-gq5aW/SyNpjp71AAzroH37DtINDcX1Qw2iv9Chyz49ZgdOP3NV8QCyKZUrGsYX9Yyggj5soFiRCgsL3HwD8TdA==",
       "cpu": [
         "ia32"
       ],
@@ -782,9 +1370,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
-      "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.49.0.tgz",
+      "integrity": "sha512-gEtqFbzmZLFk2xKh7g0Rlo8xzho8KrEFEkzvHbfUGkrgXOpZ4XagQ6n+wIZFNh1nTb8UD16J4nFSFKXYgnbdBg==",
       "cpu": [
         "x64"
       ],
@@ -794,10 +1382,415 @@
         "win32"
       ]
     },
+    "node_modules/@sec-ant/readable-stream": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@sec-ant/readable-stream/-/readable-stream-0.4.1.tgz",
+      "integrity": "sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg=="
+    },
+    "node_modules/@semantic-release/changelog": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@semantic-release/changelog/-/changelog-6.0.3.tgz",
+      "integrity": "sha512-dZuR5qByyfe3Y03TpmCvAxCyTnp7r5XwtHRf/8vD9EAn4ZWbavUX8adMtXYzE86EVh0gyLA7lm5yW4IV30XUag==",
+      "dependencies": {
+        "@semantic-release/error": "^3.0.0",
+        "aggregate-error": "^3.0.0",
+        "fs-extra": "^11.0.0",
+        "lodash": "^4.17.4"
+      },
+      "engines": {
+        "node": ">=14.17"
+      },
+      "peerDependencies": {
+        "semantic-release": ">=18.0.0"
+      }
+    },
+    "node_modules/@semantic-release/commit-analyzer": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/@semantic-release/commit-analyzer/-/commit-analyzer-13.0.1.tgz",
+      "integrity": "sha512-wdnBPHKkr9HhNhXOhZD5a2LNl91+hs8CC2vsAVYxtZH3y0dV3wKn+uZSN61rdJQZ8EGxzWB3inWocBHV9+u/CQ==",
+      "dependencies": {
+        "conventional-changelog-angular": "^8.0.0",
+        "conventional-changelog-writer": "^8.0.0",
+        "conventional-commits-filter": "^5.0.0",
+        "conventional-commits-parser": "^6.0.0",
+        "debug": "^4.0.0",
+        "import-from-esm": "^2.0.0",
+        "lodash-es": "^4.17.21",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=20.8.1"
+      },
+      "peerDependencies": {
+        "semantic-release": ">=20.1.0"
+      }
+    },
+    "node_modules/@semantic-release/error": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@semantic-release/error/-/error-3.0.0.tgz",
+      "integrity": "sha512-5hiM4Un+tpl4cKw3lV4UgzJj+SmfNIDCLLw0TepzQxz9ZGV5ixnqkzIVF+3tp0ZHgcMKE+VNGHJjEeyFG2dcSw==",
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/@semantic-release/git": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@semantic-release/git/-/git-10.0.1.tgz",
+      "integrity": "sha512-eWrx5KguUcU2wUPaO6sfvZI0wPafUKAMNC18aXY4EnNcrZL86dEmpNVnC9uMpGZkmZJ9EfCVJBQx4pV4EMGT1w==",
+      "dependencies": {
+        "@semantic-release/error": "^3.0.0",
+        "aggregate-error": "^3.0.0",
+        "debug": "^4.0.0",
+        "dir-glob": "^3.0.0",
+        "execa": "^5.0.0",
+        "lodash": "^4.17.4",
+        "micromatch": "^4.0.0",
+        "p-reduce": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.17"
+      },
+      "peerDependencies": {
+        "semantic-release": ">=18.0.0"
+      }
+    },
+    "node_modules/@semantic-release/github": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/@semantic-release/github/-/github-11.0.5.tgz",
+      "integrity": "sha512-wJamzHteXwBdopvkTD6BJjPz1UHLm20twlVCSMA9zpd3B5KrOQX137jfTbNJT6ZVz3pXtg0S1DroQl4wifJ4WQ==",
+      "dependencies": {
+        "@octokit/core": "^7.0.0",
+        "@octokit/plugin-paginate-rest": "^13.0.0",
+        "@octokit/plugin-retry": "^8.0.0",
+        "@octokit/plugin-throttling": "^11.0.0",
+        "@semantic-release/error": "^4.0.0",
+        "aggregate-error": "^5.0.0",
+        "debug": "^4.3.4",
+        "dir-glob": "^3.0.1",
+        "globby": "^14.0.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.0",
+        "issue-parser": "^7.0.0",
+        "lodash-es": "^4.17.21",
+        "mime": "^4.0.0",
+        "p-filter": "^4.0.0",
+        "url-join": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=20.8.1"
+      },
+      "peerDependencies": {
+        "semantic-release": ">=24.1.0"
+      }
+    },
+    "node_modules/@semantic-release/github/node_modules/@semantic-release/error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@semantic-release/error/-/error-4.0.0.tgz",
+      "integrity": "sha512-mgdxrHTLOjOddRVYIYDo0fR3/v61GNN1YGkfbrjuIKg/uMgCd+Qzo3UAXJ+woLQQpos4pl5Esuw5A7AoNlzjUQ==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@semantic-release/github/node_modules/aggregate-error": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-5.0.0.tgz",
+      "integrity": "sha512-gOsf2YwSlleG6IjRYG2A7k0HmBMEo6qVNk9Bp/EaLgAJT5ngH6PXbqa4ItvnEwCm/velL5jAnQgsHsWnjhGmvw==",
+      "dependencies": {
+        "clean-stack": "^5.2.0",
+        "indent-string": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/github/node_modules/clean-stack": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-5.2.0.tgz",
+      "integrity": "sha512-TyUIUJgdFnCISzG5zu3291TAsE77ddchd0bepon1VVQrKLGKFED4iXFEDQ24mIPdPBbyE16PK3F8MYE1CmcBEQ==",
+      "dependencies": {
+        "escape-string-regexp": "5.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/github/node_modules/indent-string": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
+      "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/@semantic-release/npm/-/npm-12.0.2.tgz",
+      "integrity": "sha512-+M9/Lb35IgnlUO6OSJ40Ie+hUsZLuph2fqXC/qrKn0fMvUU/jiCjpoL6zEm69vzcmaZJ8yNKtMBEKHWN49WBbQ==",
+      "dependencies": {
+        "@semantic-release/error": "^4.0.0",
+        "aggregate-error": "^5.0.0",
+        "execa": "^9.0.0",
+        "fs-extra": "^11.0.0",
+        "lodash-es": "^4.17.21",
+        "nerf-dart": "^1.0.0",
+        "normalize-url": "^8.0.0",
+        "npm": "^10.9.3",
+        "rc": "^1.2.8",
+        "read-pkg": "^9.0.0",
+        "registry-auth-token": "^5.0.0",
+        "semver": "^7.1.2",
+        "tempy": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=20.8.1"
+      },
+      "peerDependencies": {
+        "semantic-release": ">=20.1.0"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/@semantic-release/error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@semantic-release/error/-/error-4.0.0.tgz",
+      "integrity": "sha512-mgdxrHTLOjOddRVYIYDo0fR3/v61GNN1YGkfbrjuIKg/uMgCd+Qzo3UAXJ+woLQQpos4pl5Esuw5A7AoNlzjUQ==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/aggregate-error": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-5.0.0.tgz",
+      "integrity": "sha512-gOsf2YwSlleG6IjRYG2A7k0HmBMEo6qVNk9Bp/EaLgAJT5ngH6PXbqa4ItvnEwCm/velL5jAnQgsHsWnjhGmvw==",
+      "dependencies": {
+        "clean-stack": "^5.2.0",
+        "indent-string": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/clean-stack": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-5.2.0.tgz",
+      "integrity": "sha512-TyUIUJgdFnCISzG5zu3291TAsE77ddchd0bepon1VVQrKLGKFED4iXFEDQ24mIPdPBbyE16PK3F8MYE1CmcBEQ==",
+      "dependencies": {
+        "escape-string-regexp": "5.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/execa": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-9.6.0.tgz",
+      "integrity": "sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "figures": "^6.1.0",
+        "get-stream": "^9.0.0",
+        "human-signals": "^8.0.1",
+        "is-plain-obj": "^4.1.0",
+        "is-stream": "^4.0.1",
+        "npm-run-path": "^6.0.0",
+        "pretty-ms": "^9.2.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^4.0.0",
+        "yoctocolors": "^2.1.1"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/get-stream": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
+      "integrity": "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==",
+      "dependencies": {
+        "@sec-ant/readable-stream": "^0.4.1",
+        "is-stream": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/human-signals": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.1.tgz",
+      "integrity": "sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/indent-string": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
+      "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/is-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
+      "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/npm-run-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
+      "dependencies": {
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@semantic-release/npm/node_modules/strip-final-newline": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
+      "integrity": "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@semantic-release/release-notes-generator": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@semantic-release/release-notes-generator/-/release-notes-generator-14.0.3.tgz",
+      "integrity": "sha512-XxAZRPWGwO5JwJtS83bRdoIhCiYIx8Vhr+u231pQAsdFIAbm19rSVJLdnBN+Avvk7CKvNQE/nJ4y7uqKH6WTiw==",
+      "dependencies": {
+        "conventional-changelog-angular": "^8.0.0",
+        "conventional-changelog-writer": "^8.0.0",
+        "conventional-commits-filter": "^5.0.0",
+        "conventional-commits-parser": "^6.0.0",
+        "debug": "^4.0.0",
+        "get-stream": "^7.0.0",
+        "import-from-esm": "^2.0.0",
+        "into-stream": "^7.0.0",
+        "lodash-es": "^4.17.21",
+        "read-package-up": "^11.0.0"
+      },
+      "engines": {
+        "node": ">=20.8.1"
+      },
+      "peerDependencies": {
+        "semantic-release": ">=20.1.0"
+      }
+    },
+    "node_modules/@semantic-release/release-notes-generator/node_modules/get-stream": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-7.0.1.tgz",
+      "integrity": "sha512-3M8C1EOFN6r8AMUhwUAACIoXZJEOufDU5+0gFFN5uNs6XYOralD2Pqkl7m046va6x77FwposWXbAhPPIOus7mQ==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "dev": true
     },
     "node_modules/@types/geojson": {
@@ -815,6 +1808,11 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/normalize-package-data": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
+      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA=="
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -880,55 +1878,55 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
-      "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.20.tgz",
+      "integrity": "sha512-8TWXUyiqFd3GmP4JTX9hbiTFRwYHgVL/vr3cqhr4YQ258+9FADwvj7golk2sWNGHR67QgmCZ8gz80nQcMokhwg==",
       "dependencies": {
-        "@babel/parser": "^7.23.9",
-        "@vue/shared": "3.4.21",
+        "@babel/parser": "^7.28.3",
+        "@vue/shared": "3.5.20",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
-      "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.20.tgz",
+      "integrity": "sha512-whB44M59XKjqUEYOMPYU0ijUV0G+4fdrHVKDe32abNdX/kJe1NUEMqsi4cwzXa9kyM9w5S8WqFsrfo1ogtBZGQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/compiler-core": "3.5.20",
+        "@vue/shared": "3.5.20"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
-      "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.20.tgz",
+      "integrity": "sha512-SFcxapQc0/feWiSBfkGsa1v4DOrnMAQSYuvDMpEaxbpH5dKbnEM5KobSNSgU+1MbHCl+9ftm7oQWxvwDB6iBfw==",
       "dependencies": {
-        "@babel/parser": "^7.23.9",
-        "@vue/compiler-core": "3.4.21",
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/compiler-ssr": "3.4.21",
-        "@vue/shared": "3.4.21",
+        "@babel/parser": "^7.28.3",
+        "@vue/compiler-core": "3.5.20",
+        "@vue/compiler-dom": "3.5.20",
+        "@vue/compiler-ssr": "3.5.20",
+        "@vue/shared": "3.5.20",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.7",
-        "postcss": "^8.4.35",
-        "source-map-js": "^1.0.2"
+        "magic-string": "^0.30.17",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
-      "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.20.tgz",
+      "integrity": "sha512-RSl5XAMc5YFUXpDQi+UQDdVjH9FnEpLDHIALg5J0ITHxkEzJ8uQLlo7CIbjPYqmZtt6w0TsIPbo1izYXwDG7JA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/compiler-dom": "3.5.20",
+        "@vue/shared": "3.5.20"
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
-      "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
     },
     "node_modules/@vue/language-core": {
       "version": "1.8.27",
@@ -956,48 +1954,49 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
-      "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.20.tgz",
+      "integrity": "sha512-hS8l8x4cl1fmZpSQX/NXlqWKARqEsNmfkwOIYqtR2F616NGfsLUm0G6FQBK6uDKUCVyi1YOL8Xmt/RkZcd/jYQ==",
       "dependencies": {
-        "@vue/shared": "3.4.21"
+        "@vue/shared": "3.5.20"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
-      "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.20.tgz",
+      "integrity": "sha512-vyQRiH5uSZlOa+4I/t4Qw/SsD/gbth0SW2J7oMeVlMFMAmsG1rwDD6ok0VMmjXY3eI0iHNSSOBilEDW98PLRKw==",
       "dependencies": {
-        "@vue/reactivity": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/reactivity": "3.5.20",
+        "@vue/shared": "3.5.20"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
-      "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.20.tgz",
+      "integrity": "sha512-KBHzPld/Djw3im0CQ7tGCpgRedryIn4CcAl047EhFTCCPT2xFf4e8j6WeKLgEEoqPSl9TYqShc3Q6tpWpz/Xgw==",
       "dependencies": {
-        "@vue/runtime-core": "3.4.21",
-        "@vue/shared": "3.4.21",
+        "@vue/reactivity": "3.5.20",
+        "@vue/runtime-core": "3.5.20",
+        "@vue/shared": "3.5.20",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
-      "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.20.tgz",
+      "integrity": "sha512-HthAS0lZJDH21HFJBVNTtx+ULcIbJQRpjSVomVjfyPkFSpCwvsPTA+jIzOaUm3Hrqx36ozBHePztQFg6pj5aKg==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/compiler-ssr": "3.5.20",
+        "@vue/shared": "3.5.20"
       },
       "peerDependencies": {
-        "vue": "3.4.21"
+        "vue": "3.5.20"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
-      "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.20.tgz",
+      "integrity": "sha512-SoRGP596KU/ig6TfgkCMbXkr4YJ91n/QSdMuqeP5r3hVIYA3CPHUBCc7Skak0EAKV+5lL4KyIh61VA/pK1CIAA=="
     },
     "node_modules/@vuelidate/core": {
       "version": "2.0.3",
@@ -1084,93 +2083,76 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
-      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.9.0",
-        "@vueuse/shared": "10.9.0",
-        "vue-demi": ">=0.14.7"
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/metadata": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
-      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
-      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
       "dependencies": {
-        "vue-demi": ">=0.14.7"
+        "vue-demi": ">=0.14.8"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz",
+      "integrity": "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz",
+      "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==",
       "engines": {
         "node": ">=12"
       },
@@ -1182,7 +2164,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -1193,8 +2174,7 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
@@ -1215,15 +2195,30 @@
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/argv-formatter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/argv-formatter/-/argv-formatter-1.0.0.tgz",
+      "integrity": "sha512-F2+Hkm9xFaRg+GkaNnbwXNDV5O6pnCFEmqyhvfC/Ic5LbgOWjJh3L+mN/s91rxVL3znE7DYVpW0GJFT+4YBgWw=="
+    },
+    "node_modules/array-ify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
+      "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.18",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
-      "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
       "dev": true,
       "funding": [
         {
@@ -1240,11 +2235,11 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001591",
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -1275,8 +2270,7 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/base64-arraybuffer": {
       "version": "1.0.2",
@@ -1287,9 +2281,17 @@
       }
     },
     "node_modules/base64-js": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
-      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/before-after-hook": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz",
+      "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ=="
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
@@ -1303,11 +2305,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bottleneck": {
+      "version": "2.19.5",
+      "resolved": "https://registry.npmjs.org/bottleneck/-/bottleneck-2.19.5.tgz",
+      "integrity": "sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw=="
+    },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -1316,7 +2322,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -1332,10 +2337,29 @@
         "base64-js": "^1.1.2"
       }
     },
+    "node_modules/brotli/node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.25.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.4.tgz",
+      "integrity": "sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==",
       "dev": true,
       "funding": [
         {
@@ -1352,10 +2376,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
+        "caniuse-lite": "^1.0.30001737",
+        "electron-to-chromium": "^1.5.211",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -1364,24 +2388,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -1394,6 +2400,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1404,9 +2418,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001599",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz",
-      "integrity": "sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==",
+      "version": "1.0.30001737",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001737.tgz",
+      "integrity": "sha512-BiloLiXtQNrY5UyF0+1nSJLXUENuhka2pzy2Fx5pGxqavdrxSCW4U6Pn/PoG3Efspi2frRbHpBV2XsrPE6EDlw==",
       "dev": true,
       "funding": [
         {
@@ -1423,46 +2437,209 @@
         }
       ]
     },
+    "node_modules/chalk": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.0.tgz",
+      "integrity": "sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
+        "readdirp": "^4.0.1"
       },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">= 14.16.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
       }
     },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+    "node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cli-highlight": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/cli-highlight/-/cli-highlight-2.1.11.tgz",
+      "integrity": "sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "chalk": "^4.0.0",
+        "highlight.js": "^10.7.1",
+        "mz": "^2.4.0",
+        "parse5": "^5.1.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0",
+        "yargs": "^16.0.0"
+      },
+      "bin": {
+        "highlight": "bin/highlight"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=8.0.0",
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cli-table3": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.5.tgz",
+      "integrity": "sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==",
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "@colors/colors": "1.5.0"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
     "node_modules/clone": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
       "engines": {
         "node": ">=0.8"
       }
@@ -1471,7 +2648,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1482,8 +2658,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
@@ -1505,17 +2680,125 @@
         "node": ">= 6"
       }
     },
+    "node_modules/compare-func": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
+      "integrity": "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==",
+      "dependencies": {
+        "array-ify": "^1.0.0",
+        "dot-prop": "^5.1.0"
+      }
+    },
     "node_modules/computeds": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
       "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
       "dev": true
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/conventional-changelog-angular": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-8.0.0.tgz",
+      "integrity": "sha512-CLf+zr6St0wIxos4bmaKHRXWAcsCXrJU6F4VdNDrGRK3B8LDLKoX3zuMV5GhtbGkVR/LohZ6MT6im43vZLSjmA==",
+      "dependencies": {
+        "compare-func": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-changelog-writer": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-8.2.0.tgz",
+      "integrity": "sha512-Y2aW4596l9AEvFJRwFGJGiQjt2sBYTjPD18DdvxX9Vpz0Z7HQ+g1Z+6iYDAm1vR3QOJrDBkRHixHK/+FhkR6Pw==",
+      "dependencies": {
+        "conventional-commits-filter": "^5.0.0",
+        "handlebars": "^4.7.7",
+        "meow": "^13.0.0",
+        "semver": "^7.5.2"
+      },
+      "bin": {
+        "conventional-changelog-writer": "dist/cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-commits-filter": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-5.0.0.tgz",
+      "integrity": "sha512-tQMagCOC59EVgNZcC5zl7XqO30Wki9i9J3acbUvkaosCT6JX3EeFwJD7Qqp4MCikRnzS18WXV3BLIQ66ytu6+Q==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/conventional-commits-parser": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-6.2.0.tgz",
+      "integrity": "sha512-uLnoLeIW4XaoFtH37qEcg/SXMJmKF4vi7V0H2rnPueg+VEtFGA/asSCNTcq4M/GQ6QmlzchAEtOoDTtKqWeHag==",
+      "dependencies": {
+        "meow": "^13.0.0"
+      },
+      "bin": {
+        "conventional-commits-parser": "dist/cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/convert-hrtime": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/convert-hrtime/-/convert-hrtime-5.0.0.tgz",
+      "integrity": "sha512-lOETlkIeYSJWcbbcvjRKGxVMXJR+8+OQb/mTPbA4ObPMytYIsUbuOE0Jzy60hjARYszq1id0j8KgVhC+WGZVTg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1530,6 +2813,31 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
+    "node_modules/crypto-random-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-4.0.0.tgz",
+      "integrity": "sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==",
+      "dependencies": {
+        "type-fest": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/crypto-random-string/node_modules/type-fest": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/css-line-break": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
@@ -1575,9 +2883,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.7.3.tgz",
-      "integrity": "sha512-R8jUpBMAUm4rSyxzGa9QqFdJTkzREtb1QahXdDoOfElGiF4VbSuu5bfqQoOro1kkSagPy+aTKu5WtSSXmH3u3g==",
+      "version": "4.12.24",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.24.tgz",
+      "integrity": "sha512-JYg9fhQHOfXyLadrBrEqCDM6D5dWCSSiM6eTNCRrBRzx/VlOCrLS8eDfIw9RVvs64v2mJdLooKXY8EwQzoszAA==",
       "dev": true,
       "dependencies": {
         "css-selector-tokenizer": "^0.8",
@@ -1594,9 +2902,14 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.13",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
-      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+      "version": "1.11.17",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.17.tgz",
+      "integrity": "sha512-qgiVOerp5QCVMfE7hZ6z/gM+ug52I+xv70rCf6rWJXf0b4d8Kv6Yw9BmcLZlCvP3Xz8i3fjXbaU6Hwu7aGRXfA==",
+      "dependencies": {
+        "@semantic-release/changelog": "^6.0.3",
+        "@semantic-release/git": "^10.0.1",
+        "semantic-release": "^24.2.7"
+      }
     },
     "node_modules/de-indent": {
       "version": "1.0.2",
@@ -1604,55 +2917,28 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
-    "node_modules/deep-equal": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
-      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "dependencies": {
-        "is-arguments": "^1.1.1",
-        "is-date-object": "^1.0.5",
-        "is-regex": "^1.1.4",
-        "object-is": "^1.1.5",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.5.1"
+        "ms": "^2.1.3"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=6.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=4.0.0"
       }
     },
     "node_modules/delayed-stream": {
@@ -1663,6 +2949,19 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dfa": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
@@ -1674,12 +2973,34 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1693,23 +3014,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.709",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.709.tgz",
-      "integrity": "sha512-ixj1cyHrKqmdXF5CeHDSLbO0KRuOE1BHdCYKbcRA04dPLaKu8Vi7JDK5KLnGrfD6WxKcSEGm9gtHR4MqBq8gmg==",
+      "version": "1.5.211",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.211.tgz",
+      "integrity": "sha512-IGBvimJkotaLzFnwIVgW9/UD/AOJ2tByUmeOrtqBfACSbAw5b1G0XpvdaieKyc7ULmbwXVx+4e4Be8pOPBrYkw==",
       "dev": true
     },
     "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/emojilib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
+      "integrity": "sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw=="
     },
     "node_modules/entities": {
       "version": "4.5.0",
@@ -1722,6 +3054,169 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-ci": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/env-ci/-/env-ci-11.1.1.tgz",
+      "integrity": "sha512-mT3ks8F0kwpo7SYNds6nWj0PaRh+qJxIeBVBXAKTN9hphAzZv7s0QAZQbqnB1fAv/r4pJUGE15BV9UrS31FP2w==",
+      "dependencies": {
+        "execa": "^8.0.0",
+        "java-properties": "^1.0.2"
+      },
+      "engines": {
+        "node": "^18.17 || >=20.6.1"
+      }
+    },
+    "node_modules/env-ci/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/env-ci/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/env-ci/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/env-ci/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/env-ci/node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/env-ci/node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/env-ci/node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/env-ci/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/env-ci/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/env-ci/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -1802,47 +3297,86 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "dev": true,
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/fast-content-type-parse": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fast-content-type-parse/-/fast-content-type-parse-3.0.0.tgz",
+      "integrity": "sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ]
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
     "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
         "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
+        "micromatch": "^4.0.8"
       },
       "engines": {
         "node": ">=8.6.0"
       }
     },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -1850,19 +3384,31 @@
       "dev": true
     },
     "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
       "dependencies": {
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/figures": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz",
+      "integrity": "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==",
+      "dependencies": {
+        "is-unicode-supported": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1870,10 +3416,47 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-up": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==",
+      "dependencies": {
+        "locate-path": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/find-up-simple": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/find-up-simple/-/find-up-simple-1.0.1.tgz",
+      "integrity": "sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/find-versions": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-6.0.0.tgz",
+      "integrity": "sha512-2kCCtc+JvcZ86IGAz3Z2Y0A1baIz9fL31pH/0S1IqZr9Iwnjq8izfPtrCyQKO6TLMPELLsQMre7VDqeIKCsHkA==",
+      "dependencies": {
+        "semver-regex": "^4.0.5",
+        "super-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
       "funding": [
         {
           "type": "individual",
@@ -1889,13 +3472,28 @@
         }
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
-      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
-      "dev": true,
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
         "signal-exit": "^4.0.1"
       },
       "engines": {
@@ -1905,6 +3503,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
@@ -1933,6 +3542,28 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "11.3.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.1.tgz",
+      "integrity": "sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1955,12 +3586,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+    "node_modules/function-timeout": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/function-timeout/-/function-timeout-1.0.2.tgz",
+      "integrity": "sha512-939eZS4gJ3htTHAldmyyuzlrD58P03fHG49v2JfFXbV6OhvZKRC9j2yAtdHw/zrp2zXHuv05zMIy40F0ge7spA==",
+      "engines": {
+        "node": ">=18"
+      },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
       }
     },
     "node_modules/get-intrinsic": {
@@ -1998,38 +3640,88 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/git-log-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/git-log-parser/-/git-log-parser-1.2.1.tgz",
+      "integrity": "sha512-PI+sPDvHXNPl5WNOErAK05s3j0lgwUzMN6o8cyQrDaKfT3qd7TmNJKeXX+SknI5I0QhG5fVPAEwSY4tRGDtYoQ==",
+      "dependencies": {
+        "argv-formatter": "~1.0.0",
+        "spawn-error-forwarder": "~1.0.0",
+        "split2": "~1.0.0",
+        "stream-combiner2": "~1.1.1",
+        "through2": "~2.0.0",
+        "traverse": "0.6.8"
+      }
+    },
     "node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
-        "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
       "bin": {
         "glob": "dist/esm/bin.mjs"
       },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dependencies": {
-        "is-glob": "^4.0.3"
+        "is-glob": "^4.0.1"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">= 6"
+      }
+    },
+    "node_modules/globby": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+      "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^2.1.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.3",
+        "path-type": "^6.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby/node_modules/path-type": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz",
+      "integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/gopd": {
@@ -2043,15 +3735,37 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
       "dependencies": {
-        "es-define-property": "^1.0.0"
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/has-symbols": {
@@ -2099,10 +3813,40 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/hook-std": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hook-std/-/hook-std-3.0.0.tgz",
+      "integrity": "sha512-jHRQzjSDzMtFy34AGj1DN+vq54WVuhSvKgrHf0OMiFQTwDD4L/qqofVEWjLOBMTn5+lCD3fPg32W9yOfnEJTTw==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-8.1.0.tgz",
+      "integrity": "sha512-Rw/B2DNQaPBICNXEm8balFz9a6WpZrkCGpcWFpy7nCj+NyhSdqXipmfvtmWt9xGfp0wZnBxB+iVpLmQMYt47Tw==",
+      "dependencies": {
+        "lru-cache": "^10.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
     "node_modules/html-to-image": {
-      "version": "1.11.11",
-      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
-      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg=="
     },
     "node_modules/html2canvas": {
       "version": "1.4.1",
@@ -2116,38 +3860,145 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "engines": {
+        "node": ">= 4"
       }
     },
     "node_modules/immutable": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
-      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
       "dev": true
     },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=6"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/import-from-esm": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-from-esm/-/import-from-esm-2.0.0.tgz",
+      "integrity": "sha512-YVt14UZCgsX1vZQ3gKjkWVdBdHQ6eu3MPU1TBgL1H5orXe2+jWD006WCPPtOuwlQm10NuzOW5WawiF1Q9veW8g==",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "import-meta-resolve": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.20"
+      }
+    },
+    "node_modules/import-meta-resolve": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/index-to-position": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/index-to-position/-/index-to-position-1.1.0.tgz",
+      "integrity": "sha512-XPdx9Dq4t9Qk1mTMbWONJqU7boCoumEH7fRET37HX5+khDUl3J2W6PdALxhILYlIYx2amlwYcRPp28p0tSiojg==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
+    "node_modules/into-stream": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-7.0.0.tgz",
+      "integrity": "sha512-2dYz766i9HprMBasCMvHMuazJ7u4WzhJwo5kb3iPSiW/iRYV6uPari3zHoqZlnuaR7V1bEiNMxikhp37rdBXbw==",
+      "dependencies": {
+        "from2": "^2.3.0",
+        "p-is-promise": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2161,23 +4012,12 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
       "dev": true,
       "dependencies": {
-        "hasown": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2190,7 +4030,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2199,7 +4038,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2208,7 +4046,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2220,42 +4057,82 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "engines": {
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
+      "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
-    "node_modules/jackspeak": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
-      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
-      "dev": true,
+    "node_modules/issue-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/issue-parser/-/issue-parser-7.0.1.tgz",
+      "integrity": "sha512-3YZcUUR2Wt1WsapF+S/WiA2WmlW0cWAoPccMqne7AxEBhCdFeTPjfv/Axb8V2gyCgY3nRw+ksZ3xSUX+R47iAg==",
       "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
+        "lodash.capitalize": "^4.2.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.uniqby": "^4.7.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": "^18.17 || >=20.6.1"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -2264,15 +4141,65 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/java-properties": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/java-properties/-/java-properties-1.0.2.tgz",
+      "integrity": "sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/jiti": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
-      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jpeg-exif": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/jpeg-exif/-/jpeg-exif-1.1.4.tgz",
+      "integrity": "sha512-a+bKEcCjtuW5WTdgeXFzswSrdqi0jk4XlEtZlx5A94wCoBpFjfFTbo/Tra5SpNCl/YFZPvcV1dJc+TAYeg6ROQ=="
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/leaflet": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
@@ -2280,38 +4207,146 @@
       "dev": true
     },
     "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
       }
     },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
-    "node_modules/lru-cache": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
-      "dev": true,
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
-    "node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+    "node_modules/load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0",
+        "strip-bom": "^3.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=4"
+      }
+    },
+    "node_modules/load-json-file/node_modules/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+      "dependencies": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
+      "dependencies": {
+        "p-locate": "^2.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash.capitalize": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz",
+      "integrity": "sha512-kZzYOKspf8XVX5AvmQF94gQW0lejFVgb80G85bU4ZWzoJ6C03PQg3coYAUpSTpQWelrZELd3XWgHzw4Ck5kaIw=="
+    },
+    "node_modules/lodash.escaperegexp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
+      "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw=="
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
+    },
+    "node_modules/lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww=="
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.18",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
+      "integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/marked": {
+      "version": "15.0.12",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
+      "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/marked-terminal": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-7.3.0.tgz",
+      "integrity": "sha512-t4rBvPsHc57uE/2nJOLmMbZCQ4tgAccAED3ngXQqW6g+TxA488JzJ+FK3lQkzBQOI1mRV/r/Kq+1ZlJ4D0owQw==",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "ansi-regex": "^6.1.0",
+        "chalk": "^5.4.1",
+        "cli-highlight": "^2.1.11",
+        "cli-table3": "^0.6.5",
+        "node-emoji": "^2.2.0",
+        "supports-hyperlinks": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "marked": ">=1 <16"
       }
     },
     "node_modules/math-intrinsics": {
@@ -2322,33 +4357,61 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/meow": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+      "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/merge": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz",
       "integrity": "sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w=="
     },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.7.tgz",
+      "integrity": "sha512-2OfDPL+e03E0LrXaGYOtTFIYhiuzep94NSsuhrNULq+stylcJedcHdzHtz0atMUuGwJfFYs0YL5xeC/Ca2x0eQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2368,11 +4431,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -2383,11 +4453,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
-      "dev": true,
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -2400,6 +4477,11 @@
         "node": "*"
       }
     },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
     "node_modules/muggle-string": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
@@ -2410,7 +4492,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -2418,9 +4499,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
@@ -2434,12 +4515,67 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "node_modules/nerf-dart": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nerf-dart/-/nerf-dart-1.0.0.tgz",
+      "integrity": "sha512-EZSPZB70jiVsivaBLYDCyntd5eH8NTSMOn3rB+HxwdmKThGELLdYv8qVIMWvZEFy9w8ZZpW9h9OB32l1rGtj7g=="
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/node-emoji": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.2.0.tgz",
+      "integrity": "sha512-Z3lTE9pLaJF47NyMhd4ww1yFTAP8YhYI8SleJiHzM46Fgpm5cnNzSl9XfzFNqbaz+VlJrIj3fXQ4DeN1Rjm6cw==",
+      "dependencies": {
+        "@sindresorhus/is": "^4.6.0",
+        "char-regex": "^1.0.2",
+        "emojilib": "^2.4.0",
+        "skin-tone": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "dev": true
     },
+    "node_modules/normalize-package-data": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.2.tgz",
+      "integrity": "sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==",
+      "dependencies": {
+        "hosted-git-info": "^7.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/hosted-git-info": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
+      "integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==",
+      "dependencies": {
+        "lru-cache": "^10.0.1"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -2458,11 +4594,2505 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-url": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-8.0.2.tgz",
+      "integrity": "sha512-Ee/R3SyN4BuynXcnTaekmaVdbDAEiNrHqjQIA37mHU8G9pf7aaAD4ZX3XjBLo6rsdcxA/gtkcNYZLt30ACgynw==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm": {
+      "version": "10.9.3",
+      "resolved": "https://registry.npmjs.org/npm/-/npm-10.9.3.tgz",
+      "integrity": "sha512-6Eh1u5Q+kIVXeA8e7l2c/HpnFFcwrkt37xDMujD5be1gloWa9p6j3Fsv3mByXXmqJHy+2cElRMML8opNT7xIJQ==",
+      "bundleDependencies": [
+        "@isaacs/string-locale-compare",
+        "@npmcli/arborist",
+        "@npmcli/config",
+        "@npmcli/fs",
+        "@npmcli/map-workspaces",
+        "@npmcli/package-json",
+        "@npmcli/promise-spawn",
+        "@npmcli/redact",
+        "@npmcli/run-script",
+        "@sigstore/tuf",
+        "abbrev",
+        "archy",
+        "cacache",
+        "chalk",
+        "ci-info",
+        "cli-columns",
+        "fastest-levenshtein",
+        "fs-minipass",
+        "glob",
+        "graceful-fs",
+        "hosted-git-info",
+        "ini",
+        "init-package-json",
+        "is-cidr",
+        "json-parse-even-better-errors",
+        "libnpmaccess",
+        "libnpmdiff",
+        "libnpmexec",
+        "libnpmfund",
+        "libnpmhook",
+        "libnpmorg",
+        "libnpmpack",
+        "libnpmpublish",
+        "libnpmsearch",
+        "libnpmteam",
+        "libnpmversion",
+        "make-fetch-happen",
+        "minimatch",
+        "minipass",
+        "minipass-pipeline",
+        "ms",
+        "node-gyp",
+        "nopt",
+        "normalize-package-data",
+        "npm-audit-report",
+        "npm-install-checks",
+        "npm-package-arg",
+        "npm-pick-manifest",
+        "npm-profile",
+        "npm-registry-fetch",
+        "npm-user-validate",
+        "p-map",
+        "pacote",
+        "parse-conflict-json",
+        "proc-log",
+        "qrcode-terminal",
+        "read",
+        "semver",
+        "spdx-expression-parse",
+        "ssri",
+        "supports-color",
+        "tar",
+        "text-table",
+        "tiny-relative-date",
+        "treeverse",
+        "validate-npm-package-name",
+        "which",
+        "write-file-atomic"
+      ],
+      "workspaces": [
+        "docs",
+        "smoke-tests",
+        "mock-globals",
+        "mock-registry",
+        "workspaces/*"
+      ],
+      "dependencies": {
+        "@isaacs/string-locale-compare": "^1.1.0",
+        "@npmcli/arborist": "^8.0.1",
+        "@npmcli/config": "^9.0.0",
+        "@npmcli/fs": "^4.0.0",
+        "@npmcli/map-workspaces": "^4.0.2",
+        "@npmcli/package-json": "^6.2.0",
+        "@npmcli/promise-spawn": "^8.0.2",
+        "@npmcli/redact": "^3.2.2",
+        "@npmcli/run-script": "^9.1.0",
+        "@sigstore/tuf": "^3.1.1",
+        "abbrev": "^3.0.1",
+        "archy": "~1.0.0",
+        "cacache": "^19.0.1",
+        "chalk": "^5.4.1",
+        "ci-info": "^4.2.0",
+        "cli-columns": "^4.0.0",
+        "fastest-levenshtein": "^1.0.16",
+        "fs-minipass": "^3.0.3",
+        "glob": "^10.4.5",
+        "graceful-fs": "^4.2.11",
+        "hosted-git-info": "^8.1.0",
+        "ini": "^5.0.0",
+        "init-package-json": "^7.0.2",
+        "is-cidr": "^5.1.1",
+        "json-parse-even-better-errors": "^4.0.0",
+        "libnpmaccess": "^9.0.0",
+        "libnpmdiff": "^7.0.1",
+        "libnpmexec": "^9.0.1",
+        "libnpmfund": "^6.0.1",
+        "libnpmhook": "^11.0.0",
+        "libnpmorg": "^7.0.0",
+        "libnpmpack": "^8.0.1",
+        "libnpmpublish": "^10.0.1",
+        "libnpmsearch": "^8.0.0",
+        "libnpmteam": "^7.0.0",
+        "libnpmversion": "^7.0.0",
+        "make-fetch-happen": "^14.0.3",
+        "minimatch": "^9.0.5",
+        "minipass": "^7.1.1",
+        "minipass-pipeline": "^1.2.4",
+        "ms": "^2.1.2",
+        "node-gyp": "^11.2.0",
+        "nopt": "^8.1.0",
+        "normalize-package-data": "^7.0.0",
+        "npm-audit-report": "^6.0.0",
+        "npm-install-checks": "^7.1.1",
+        "npm-package-arg": "^12.0.2",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-profile": "^11.0.1",
+        "npm-registry-fetch": "^18.0.2",
+        "npm-user-validate": "^3.0.0",
+        "p-map": "^7.0.3",
+        "pacote": "^19.0.1",
+        "parse-conflict-json": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "qrcode-terminal": "^0.12.0",
+        "read": "^4.1.0",
+        "semver": "^7.7.2",
+        "spdx-expression-parse": "^4.0.0",
+        "ssri": "^12.0.0",
+        "supports-color": "^9.4.0",
+        "tar": "^6.2.1",
+        "text-table": "~0.2.0",
+        "tiny-relative-date": "^1.3.0",
+        "treeverse": "^3.0.0",
+        "validate-npm-package-name": "^6.0.1",
+        "which": "^5.0.0",
+        "write-file-atomic": "^6.0.0"
+      },
+      "bin": {
+        "npm": "bin/npm-cli.js",
+        "npx": "bin/npx-cli.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/@npmcli/agent": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^10.0.1",
+        "socks-proxy-agent": "^8.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/arborist": {
+      "version": "8.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/string-locale-compare": "^1.1.0",
+        "@npmcli/fs": "^4.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/map-workspaces": "^4.0.1",
+        "@npmcli/metavuln-calculator": "^8.0.0",
+        "@npmcli/name-from-folder": "^3.0.0",
+        "@npmcli/node-gyp": "^4.0.0",
+        "@npmcli/package-json": "^6.0.1",
+        "@npmcli/query": "^4.0.0",
+        "@npmcli/redact": "^3.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "bin-links": "^5.0.0",
+        "cacache": "^19.0.1",
+        "common-ancestor-path": "^1.0.1",
+        "hosted-git-info": "^8.0.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "json-stringify-nice": "^1.1.4",
+        "lru-cache": "^10.2.2",
+        "minimatch": "^9.0.4",
+        "nopt": "^8.0.0",
+        "npm-install-checks": "^7.1.0",
+        "npm-package-arg": "^12.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-registry-fetch": "^18.0.1",
+        "pacote": "^19.0.0",
+        "parse-conflict-json": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "proggy": "^3.0.0",
+        "promise-all-reject-late": "^1.0.0",
+        "promise-call-limit": "^3.0.1",
+        "read-package-json-fast": "^4.0.0",
+        "semver": "^7.3.7",
+        "ssri": "^12.0.0",
+        "treeverse": "^3.0.0",
+        "walk-up-path": "^3.0.1"
+      },
+      "bin": {
+        "arborist": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/config": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/map-workspaces": "^4.0.1",
+        "@npmcli/package-json": "^6.0.1",
+        "ci-info": "^4.0.0",
+        "ini": "^5.0.0",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "walk-up-path": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/fs": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/git": {
+      "version": "6.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/promise-spawn": "^8.0.0",
+        "ini": "^5.0.0",
+        "lru-cache": "^10.0.1",
+        "npm-pick-manifest": "^10.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "semver": "^7.3.5",
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-bundled": "^4.0.0",
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "bin": {
+        "installed-package-contents": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/map-workspaces": {
+      "version": "4.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/name-from-folder": "^3.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "glob": "^10.2.2",
+        "minimatch": "^9.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
+      "version": "8.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cacache": "^19.0.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "pacote": "^20.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/metavuln-calculator/node_modules/pacote": {
+      "version": "20.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "@npmcli/promise-spawn": "^8.0.0",
+        "@npmcli/run-script": "^9.0.0",
+        "cacache": "^19.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^12.0.0",
+        "npm-packlist": "^9.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-registry-fetch": "^18.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "sigstore": "^3.0.0",
+        "ssri": "^12.0.0",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/name-from-folder": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/node-gyp": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/package-json": {
+      "version": "6.2.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.0",
+        "glob": "^10.2.2",
+        "hosted-git-info": "^8.0.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.5.3",
+        "validate-npm-package-license": "^3.0.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/promise-spawn": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/query": {
+      "version": "4.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/redact": {
+      "version": "3.2.2",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/run-script": {
+      "version": "9.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/node-gyp": "^4.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "@npmcli/promise-spawn": "^8.0.0",
+        "node-gyp": "^11.0.0",
+        "proc-log": "^5.0.0",
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/protobuf-specs": {
+      "version": "0.4.3",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/tuf": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/protobuf-specs": "^0.4.1",
+        "tuf-js": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@tufjs/canonical-json": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/abbrev": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/agent-base": {
+      "version": "7.1.3",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/aproba": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/archy": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/bin-links": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cmd-shim": "^7.0.0",
+        "npm-normalize-package-bin": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "read-cmd-shim": "^5.0.0",
+        "write-file-atomic": "^6.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/cacache": {
+      "version": "19.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/fs": "^4.0.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^10.0.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^7.0.2",
+        "ssri": "^12.0.0",
+        "tar": "^7.4.3",
+        "unique-filename": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/chownr": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/tar": {
+      "version": "7.4.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/yallist": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/chalk": {
+      "version": "5.4.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/chownr": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/ci-info": {
+      "version": "4.2.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/cidr-regex": {
+      "version": "4.1.3",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "ip-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/cli-columns": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/npm/node_modules/cmd-shim": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/color-convert": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/color-name": {
+      "version": "1.1.4",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/common-ancestor-path": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
+      "version": "2.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/cssesc": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm/node_modules/debug": {
+      "version": "4.4.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/npm/node_modules/diff": {
+      "version": "5.2.0",
+      "inBundle": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/npm/node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/encoding": {
+      "version": "0.1.13",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/npm/node_modules/env-paths": {
+      "version": "2.2.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/npm/node_modules/err-code": {
+      "version": "2.0.3",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/exponential-backoff": {
+      "version": "3.1.2",
+      "inBundle": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/npm/node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/npm/node_modules/foreground-child": {
+      "version": "3.3.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/glob": {
+      "version": "10.4.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/hosted-git-info": {
+      "version": "8.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^10.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/http-cache-semantics": {
+      "version": "4.2.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/npm/node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm/node_modules/ignore-walk": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minimatch": "^9.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/npm/node_modules/ini": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/init-package-json": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/package-json": "^6.0.0",
+        "npm-package-arg": "^12.0.0",
+        "promzard": "^2.0.0",
+        "read": "^4.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4",
+        "validate-npm-package-name": "^6.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/ip-address": {
+      "version": "9.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/npm/node_modules/ip-regex": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/is-cidr": {
+      "version": "5.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "cidr-regex": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/isexe": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/npm/node_modules/jsbn": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/json-parse-even-better-errors": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/json-stringify-nice": {
+      "version": "1.1.4",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/jsonparse": {
+      "version": "1.3.1",
+      "engines": [
+        "node >= 0.2.0"
+      ],
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/just-diff": {
+      "version": "6.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/just-diff-apply": {
+      "version": "5.5.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/libnpmaccess": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-package-arg": "^12.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmdiff": {
+      "version": "7.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^8.0.1",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "binary-extensions": "^2.3.0",
+        "diff": "^5.1.0",
+        "minimatch": "^9.0.4",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^19.0.0",
+        "tar": "^6.2.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmexec": {
+      "version": "9.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^8.0.1",
+        "@npmcli/run-script": "^9.0.1",
+        "ci-info": "^4.0.0",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^19.0.0",
+        "proc-log": "^5.0.0",
+        "read": "^4.0.0",
+        "read-package-json-fast": "^4.0.0",
+        "semver": "^7.3.7",
+        "walk-up-path": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmfund": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^8.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmhook": {
+      "version": "11.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmorg": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmpack": {
+      "version": "8.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^8.0.1",
+        "@npmcli/run-script": "^9.0.1",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^19.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmpublish": {
+      "version": "10.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "ci-info": "^4.0.0",
+        "normalize-package-data": "^7.0.0",
+        "npm-package-arg": "^12.0.0",
+        "npm-registry-fetch": "^18.0.1",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.7",
+        "sigstore": "^3.0.0",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmsearch": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmteam": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmversion": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.1",
+        "@npmcli/run-script": "^9.0.1",
+        "json-parse-even-better-errors": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/make-fetch-happen": {
+      "version": "14.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/agent": "^3.0.0",
+        "cacache": "^19.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/make-fetch-happen/node_modules/negotiator": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/npm/node_modules/minimatch": {
+      "version": "9.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/minipass": {
+      "version": "7.1.2",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-fetch": {
+      "version": "4.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minizlib": {
+      "version": "3.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/ms": {
+      "version": "2.1.3",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/mute-stream": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp": {
+      "version": "11.2.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^14.0.3",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.4.3",
+        "tinyglobby": "^0.2.12",
+        "which": "^5.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/chownr": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/tar": {
+      "version": "7.4.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/yallist": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/nopt": {
+      "version": "8.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^3.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/normalize-package-data": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "hosted-git-info": "^8.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-audit-report": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-bundled": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-install-checks": {
+      "version": "7.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "semver": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-normalize-package-bin": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-package-arg": {
+      "version": "12.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "hosted-git-info": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-name": "^6.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-packlist": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "ignore-walk": "^7.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-pick-manifest": {
+      "version": "10.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-install-checks": "^7.1.0",
+        "npm-normalize-package-bin": "^4.0.0",
+        "npm-package-arg": "^12.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-profile": {
+      "version": "11.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-registry-fetch": "^18.0.0",
+        "proc-log": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-registry-fetch": {
+      "version": "18.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/redact": "^3.0.0",
+        "jsonparse": "^1.3.1",
+        "make-fetch-happen": "^14.0.0",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minizlib": "^3.0.1",
+        "npm-package-arg": "^12.0.0",
+        "proc-log": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-user-validate": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/p-map": {
+      "version": "7.0.3",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/npm/node_modules/pacote": {
+      "version": "19.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "@npmcli/promise-spawn": "^8.0.0",
+        "@npmcli/run-script": "^9.0.0",
+        "cacache": "^19.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^12.0.0",
+        "npm-packlist": "^9.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-registry-fetch": "^18.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "sigstore": "^3.0.0",
+        "ssri": "^12.0.0",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/parse-conflict-json": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "json-parse-even-better-errors": "^4.0.0",
+        "just-diff": "^6.0.0",
+        "just-diff-apply": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/path-key": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm/node_modules/proc-log": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/proggy": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/promise-all-reject-late": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/promise-call-limit": {
+      "version": "3.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/promise-retry": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/promzard": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "read": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/qrcode-terminal": {
+      "version": "0.12.0",
+      "inBundle": true,
+      "bin": {
+        "qrcode-terminal": "bin/qrcode-terminal.js"
+      }
+    },
+    "node_modules/npm/node_modules/read": {
+      "version": "4.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "mute-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/read-cmd-shim": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/read-package-json-fast": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "json-parse-even-better-errors": "^4.0.0",
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/retry": {
+      "version": "0.12.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/npm/node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/npm/node_modules/semver": {
+      "version": "7.7.2",
+      "inBundle": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore": {
+      "version": "3.1.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.1.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.4.0",
+        "@sigstore/sign": "^3.1.0",
+        "@sigstore/tuf": "^3.1.0",
+        "@sigstore/verify": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/bundle": {
+      "version": "3.1.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/protobuf-specs": "^0.4.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/core": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/sign": {
+      "version": "3.1.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.1.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.4.0",
+        "make-fetch-happen": "^14.0.2",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/verify": {
+      "version": "2.1.1",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.1.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/socks": {
+      "version": "2.8.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^9.0.5",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-correct/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "inBundle": true,
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/npm/node_modules/spdx-expression-parse": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-license-ids": {
+      "version": "3.0.21",
+      "inBundle": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/npm/node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "inBundle": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/npm/node_modules/ssri": {
+      "version": "12.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/string-width": {
+      "version": "4.2.3",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/supports-color": {
+      "version": "9.4.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/tar": {
+      "version": "6.2.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/minizlib": {
+      "version": "2.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/text-table": {
+      "version": "0.2.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/tiny-relative-date": {
+      "version": "1.3.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/npm/node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.6",
+      "inBundle": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/npm/node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/npm/node_modules/treeverse": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/tuf-js": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tufjs/models": "3.0.1",
+        "debug": "^4.3.6",
+        "make-fetch-happen": "^14.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/tuf-js/node_modules/@tufjs/models": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tufjs/canonical-json": "2.0.0",
+        "minimatch": "^9.0.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/unique-filename": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/unique-slug": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/validate-npm-package-name": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/walk-up-path": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/which": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/which/node_modules/isexe": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/write-file-atomic": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/yallist": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2476,45 +7106,187 @@
         "node": ">= 6"
       }
     },
-    "node_modules/object-is": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
-      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1"
+        "mimic-fn": "^2.1.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=6"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+    "node_modules/p-each-series": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-3.0.0.tgz",
+      "integrity": "sha512-lastgtAdoH9YaLyDa5i5z64q+kzOcQHsQ5SsZJD3q0VEyI8mq872S3geuNbRUQLVAE9siMfgKrpj7MloKFHruw==",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-filter": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-filter/-/p-filter-4.1.0.tgz",
+      "integrity": "sha512-37/tPdZ3oJwHaS3gNJdenCDB3Tz26i9sjhnguBtvN0vYlRIiDNnvTWkuh+0hETV9rLPdJ3rlL3yVOYPIAnM8rw==",
+      "dependencies": {
+        "p-map": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-is-promise": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-3.0.0.tgz",
+      "integrity": "sha512-Wo8VsW4IRQSKVXsJCn7TomUaVtyfjVDn3nUP7kE967BQk0CwFpdbZs0X0uk5sW9mkBa9eNM7hCMaG93WUAwxYQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "dependencies": {
+        "p-try": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
+      "dependencies": {
+        "p-limit": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.3.tgz",
+      "integrity": "sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-reduce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-2.1.0.tgz",
+      "integrity": "sha512-2USApvnsutq8uoxZBGbbWM0JIYLiEMJ9RlaN7fAzVNb9OZN0SHjjTTfIcb667XynS5Y1VhwDJVDa72TnPzAYWw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="
+    },
     "node_modules/pako": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
       "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA=="
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-ms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
+      "integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dependencies": {
+        "parse5": "^6.0.1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "dev": true
     },
+    "node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2526,45 +7298,62 @@
       "dev": true
     },
     "node_modules/path-scurry": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
-      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
-      "dev": true,
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dependencies": {
-        "lru-cache": "^9.1.1 || ^10.0.0",
+        "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=16 || 14 >=14.18"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/pdfmake": {
-      "version": "0.3.0-beta.5",
-      "resolved": "https://registry.npmjs.org/pdfmake/-/pdfmake-0.3.0-beta.5.tgz",
-      "integrity": "sha512-Hcd0+niKZlH3S9LjrBYqIuBZeo2HtBYp6ApiMA1v4sXB1EqBcS794kwqp8Cs/oKqTHcpiEv/qS0AnDG6daU+Cg==",
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pdfkit": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/pdfkit/-/pdfkit-0.17.1.tgz",
+      "integrity": "sha512-Kkf1I9no14O/uo593DYph5u3QwiMfby7JsBSErN1WqeyTgCBNJE3K4pXBn3TgkdKUIVu+buSl4bYUNC+8Up4xg==",
       "dependencies": {
-        "@foliojs-fork/linebreak": "^1.1.1",
-        "@foliojs-fork/pdfkit": "^0.13.0",
-        "iconv-lite": "^0.6.3",
-        "xmldoc": "^1.1.2"
+        "crypto-js": "^4.2.0",
+        "fontkit": "^2.0.4",
+        "jpeg-exif": "^1.1.4",
+        "linebreak": "^1.1.0",
+        "png-js": "^1.0.0"
+      }
+    },
+    "node_modules/pdfmake": {
+      "version": "0.3.0-beta.18",
+      "resolved": "https://registry.npmjs.org/pdfmake/-/pdfmake-0.3.0-beta.18.tgz",
+      "integrity": "sha512-Tn5XD2Rex4tE/sdjS5TkUSnCqV7uKOgOGFzELOk5RqLv7Eko/xCMOLjs8tTQN1Dql0tdSimTUKJK/gH+r8ODnA==",
+      "dependencies": {
+        "linebreak": "^1.1.0",
+        "pdfkit": "^0.17.1",
+        "xmldoc": "^2.0.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -2573,82 +7362,64 @@
       }
     },
     "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=4"
       }
     },
     "node_modules/pinia": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
-      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
       "dependencies": {
-        "@vue/devtools-api": "^6.5.0",
-        "vue-demi": ">=0.14.5"
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.4.0",
         "typescript": ">=4.4.4",
-        "vue": "^2.6.14 || ^3.3.0"
+        "vue": "^2.7.0 || ^3.5.11"
       },
       "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
         "typescript": {
           "optional": true
         }
       }
     },
-    "node_modules/pinia/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
       "dev": true,
       "engines": {
         "node": ">= 6"
       }
     },
+    "node_modules/pkg-conf": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-conf/-/pkg-conf-2.1.0.tgz",
+      "integrity": "sha512-C+VUP+8jis7EsQZIhDYmS5qlNtjv2yP4SNtjXK9AP1ZcTRlnSfuumaTnRfYZnYgUUYVIKqL0fRvmUGDV2fmp6g==",
+      "dependencies": {
+        "find-up": "^2.0.0",
+        "load-json-file": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/png-js": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.0.0.tgz",
       "integrity": "sha512-k+YsbhpA9e+EFfKjTCH3VW6aoKlyNYI6NYdTfDL4CIvFnvsuO84ttonmZE7rc+v23SLTH8XX+5w/Ak9v0xGY4g=="
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -2664,9 +7435,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -2743,41 +7514,35 @@
         }
       }
     },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
-      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
     "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
+        "postcss-selector-parser": "^6.1.1"
       },
       "engines": {
         "node": ">=12.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
       "peerDependencies": {
         "postcss": "^8.2.14"
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -2803,6 +7568,30 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/pretty-ms": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.2.0.tgz",
+      "integrity": "sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==",
+      "dependencies": {
+        "parse-ms": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -2812,7 +7601,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2828,6 +7616,20 @@
         }
       ]
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -2837,27 +7639,134 @@
         "pify": "^2.3.0"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+    "node_modules/read-cache/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+    "node_modules/read-package-up": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/read-package-up/-/read-package-up-11.0.0.tgz",
+      "integrity": "sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==",
       "dependencies": {
-        "call-bind": "^1.0.6",
-        "define-properties": "^1.2.1",
-        "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
+        "find-up-simple": "^1.0.0",
+        "read-pkg": "^9.0.0",
+        "type-fest": "^4.6.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-9.0.1.tgz",
+      "integrity": "sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==",
+      "dependencies": {
+        "@types/normalize-package-data": "^2.4.3",
+        "normalize-package-data": "^6.0.0",
+        "parse-json": "^8.0.0",
+        "type-fest": "^4.6.0",
+        "unicorn-magic": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg/node_modules/parse-json": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-8.3.0.tgz",
+      "integrity": "sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "index-to-position": "^1.1.0",
+        "type-fest": "^4.39.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg/node_modules/unicorn-magic": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
+      "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/registry-auth-token": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.1.0.tgz",
+      "integrity": "sha512-GdekYuwLXLxMuFTwAPg5UKGLW/UXzQrZvH/Zj791BQif5T05T0RsaLfHc9q3ZOKi7n+BoprPD9mJ0O0k4xzUlw==",
+      "dependencies": {
+        "@pnpm/npm-conf": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2866,40 +7775,35 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "engines": {
+        "node": ">=8"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw=="
+    },
     "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
       }
     },
     "node_modules/rollup": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
-      "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+      "version": "4.49.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.49.0.tgz",
+      "integrity": "sha512-3IVq0cGJ6H7fKXXEdVt+RcYvRCt8beYY9K1760wGQwSAHZcS9eot1zDG5axUbcp/kWRi5zKIIDX8MoKv/TzvZA==",
       "dev": true,
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.8"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -2909,19 +7813,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.13.0",
-        "@rollup/rollup-android-arm64": "4.13.0",
-        "@rollup/rollup-darwin-arm64": "4.13.0",
-        "@rollup/rollup-darwin-x64": "4.13.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.13.0",
-        "@rollup/rollup-linux-arm64-musl": "4.13.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
-        "@rollup/rollup-linux-x64-gnu": "4.13.0",
-        "@rollup/rollup-linux-x64-musl": "4.13.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.13.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.13.0",
-        "@rollup/rollup-win32-x64-msvc": "4.13.0",
+        "@rollup/rollup-android-arm-eabi": "4.49.0",
+        "@rollup/rollup-android-arm64": "4.49.0",
+        "@rollup/rollup-darwin-arm64": "4.49.0",
+        "@rollup/rollup-darwin-x64": "4.49.0",
+        "@rollup/rollup-freebsd-arm64": "4.49.0",
+        "@rollup/rollup-freebsd-x64": "4.49.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.49.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.49.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.49.0",
+        "@rollup/rollup-linux-arm64-musl": "4.49.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.49.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.49.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.49.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.49.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.49.0",
+        "@rollup/rollup-linux-x64-gnu": "4.49.0",
+        "@rollup/rollup-linux-x64-musl": "4.49.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.49.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.49.0",
+        "@rollup/rollup-win32-x64-msvc": "4.49.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -2929,7 +7840,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2948,19 +7858,19 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "node_modules/sass": {
-      "version": "1.72.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
-      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
+      "version": "1.91.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.91.0.tgz",
+      "integrity": "sha512-aFOZHGf+ur+bp1bCHZ+u8otKGh77ZtmFyXDo4tlYvT7PWql41Kwd8wdkPqhhT+h2879IVblcHFglIMofsFd1EA==",
       "dev": true,
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
         "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
@@ -2968,6 +7878,9 @@
       },
       "engines": {
         "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
       }
     },
     "node_modules/sax": {
@@ -2975,14 +7888,229 @@
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
       "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg=="
     },
-    "node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
+    "node_modules/semantic-release": {
+      "version": "24.2.7",
+      "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-24.2.7.tgz",
+      "integrity": "sha512-g7RssbTAbir1k/S7uSwSVZFfFXwpomUB9Oas0+xi9KStSCmeDXcA7rNhiskjLqvUe/Evhx8fVCT16OSa34eM5g==",
       "dependencies": {
-        "lru-cache": "^6.0.0"
+        "@semantic-release/commit-analyzer": "^13.0.0-beta.1",
+        "@semantic-release/error": "^4.0.0",
+        "@semantic-release/github": "^11.0.0",
+        "@semantic-release/npm": "^12.0.2",
+        "@semantic-release/release-notes-generator": "^14.0.0-beta.1",
+        "aggregate-error": "^5.0.0",
+        "cosmiconfig": "^9.0.0",
+        "debug": "^4.0.0",
+        "env-ci": "^11.0.0",
+        "execa": "^9.0.0",
+        "figures": "^6.0.0",
+        "find-versions": "^6.0.0",
+        "get-stream": "^6.0.0",
+        "git-log-parser": "^1.2.0",
+        "hook-std": "^3.0.0",
+        "hosted-git-info": "^8.0.0",
+        "import-from-esm": "^2.0.0",
+        "lodash-es": "^4.17.21",
+        "marked": "^15.0.0",
+        "marked-terminal": "^7.3.0",
+        "micromatch": "^4.0.2",
+        "p-each-series": "^3.0.0",
+        "p-reduce": "^3.0.0",
+        "read-package-up": "^11.0.0",
+        "resolve-from": "^5.0.0",
+        "semver": "^7.3.2",
+        "semver-diff": "^4.0.0",
+        "signale": "^1.2.1",
+        "yargs": "^17.5.1"
       },
+      "bin": {
+        "semantic-release": "bin/semantic-release.js"
+      },
+      "engines": {
+        "node": ">=20.8.1"
+      }
+    },
+    "node_modules/semantic-release/node_modules/@semantic-release/error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@semantic-release/error/-/error-4.0.0.tgz",
+      "integrity": "sha512-mgdxrHTLOjOddRVYIYDo0fR3/v61GNN1YGkfbrjuIKg/uMgCd+Qzo3UAXJ+woLQQpos4pl5Esuw5A7AoNlzjUQ==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/semantic-release/node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/aggregate-error": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-5.0.0.tgz",
+      "integrity": "sha512-gOsf2YwSlleG6IjRYG2A7k0HmBMEo6qVNk9Bp/EaLgAJT5ngH6PXbqa4ItvnEwCm/velL5jAnQgsHsWnjhGmvw==",
+      "dependencies": {
+        "clean-stack": "^5.2.0",
+        "indent-string": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/clean-stack": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-5.2.0.tgz",
+      "integrity": "sha512-TyUIUJgdFnCISzG5zu3291TAsE77ddchd0bepon1VVQrKLGKFED4iXFEDQ24mIPdPBbyE16PK3F8MYE1CmcBEQ==",
+      "dependencies": {
+        "escape-string-regexp": "5.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/execa": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-9.6.0.tgz",
+      "integrity": "sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "figures": "^6.1.0",
+        "get-stream": "^9.0.0",
+        "human-signals": "^8.0.1",
+        "is-plain-obj": "^4.1.0",
+        "is-stream": "^4.0.1",
+        "npm-run-path": "^6.0.0",
+        "pretty-ms": "^9.2.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^4.0.0",
+        "yoctocolors": "^2.1.1"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/semantic-release/node_modules/execa/node_modules/get-stream": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
+      "integrity": "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==",
+      "dependencies": {
+        "@sec-ant/readable-stream": "^0.4.1",
+        "is-stream": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/human-signals": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.1.tgz",
+      "integrity": "sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/semantic-release/node_modules/indent-string": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
+      "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/is-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
+      "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/npm-run-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
+      "dependencies": {
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/p-reduce": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-3.0.0.tgz",
+      "integrity": "sha512-xsrIUgI0Kn6iyDYm9StOpOeK29XM1aboGji26+QEortiFST1hGZaUQOLhtEbqHErPpGW/aSz6allwK2qcptp0Q==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/semantic-release/node_modules/strip-final-newline": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
+      "integrity": "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -2990,53 +8118,35 @@
         "node": ">=10"
       }
     },
-    "node_modules/semver/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
+    "node_modules/semver-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-4.0.0.tgz",
+      "integrity": "sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==",
       "dependencies": {
-        "yallist": "^4.0.0"
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
-      },
+    "node_modules/semver-regex": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-4.0.5.tgz",
+      "integrity": "sha512-hunMQrEy1T6Jr2uEVjrAIqjwWcQTgOAcIM52C8MY1EZSD3DDNft04XzvYKPqjED65bNVVko0YI38nYeEHCX3yw==",
       "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/set-function-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.2"
+        "node": ">=12"
       },
-      "engines": {
-        "node": ">= 0.4"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -3048,54 +8158,203 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
-    "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
+    "node_modules/signale": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/signale/-/signale-1.4.0.tgz",
+      "integrity": "sha512-iuh+gPf28RkltuJC7W5MRi6XAjTDCAPC/prJUpQoG4vIP3MJZ+GTydVnodXA7pwvTKb2cA0m9OFZW/cdWy/I/w==",
       "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
+        "chalk": "^2.3.2",
+        "figures": "^2.0.0",
+        "pkg-conf": "^2.1.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
+      }
+    },
+    "node_modules/signale/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/signale/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/signale/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/signale/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/signale/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/signale/node_modules/figures": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+      "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/signale/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/signale/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/skin-tone": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/skin-tone/-/skin-tone-2.0.0.tgz",
+      "integrity": "sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==",
+      "dependencies": {
+        "unicode-emoji-modifier-base": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "engines": {
+        "node": ">=14.16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/spawn-error-forwarder": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/spawn-error-forwarder/-/spawn-error-forwarder-1.0.0.tgz",
+      "integrity": "sha512-gRjMgK5uFjbCvdibeGJuy3I5OYz6VLoVdsOJdA6wV0WlfQVLFueoqMxwwYD9RODdgb6oUIvlRlsyFSiQkMKu0g=="
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w=="
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.22",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.22.tgz",
+      "integrity": "sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ=="
+    },
+    "node_modules/split2": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-1.0.0.tgz",
+      "integrity": "sha512-NKywug4u4pX/AZBB1FCPzZ6/7O+Xhz1qMVbzTvvKvikjO99oPN87SkK08mEY9P63/5lWjK+wgOOgApnTg5r6qg==",
+      "dependencies": {
+        "through2": "~2.0.0"
+      }
+    },
+    "node_modules/stream-combiner2": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.1.1.tgz",
+      "integrity": "sha512-3PnJbYgS56AeWgtKF5jtJRT6uFJe56Z0Hc5Ngg/6sI6rIt8iiMBTa9cvdyFfpMQjaVHr8dusbNeFGIIonxOvKw==",
+      "dependencies": {
+        "duplexer2": "~0.1.0",
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -3105,26 +8364,24 @@
         "node": ">=8"
       }
     },
-    "node_modules/string-width-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+    "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -3132,27 +8389,11 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/strip-ansi-cjs": {
       "name": "strip-ansi",
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -3164,11 +8405,42 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -3191,6 +8463,47 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/super-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/super-regex/-/super-regex-1.0.0.tgz",
+      "integrity": "sha512-CY8u7DtbvucKuquCmOFEKhr9Besln7n9uN8eFbwcoGYWXOMW07u2o8njWaiXt11ylS3qoGF55pILjRmPlbodyg==",
+      "dependencies": {
+        "function-timeout": "^1.0.1",
+        "time-span": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.2.0.tgz",
+      "integrity": "sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==",
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -3204,33 +8517,33 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
-      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
+        "chokidar": "^3.6.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.19.1",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -3240,6 +8553,113 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/temp-dir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-3.0.0.tgz",
+      "integrity": "sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
+    "node_modules/tempy": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tempy/-/tempy-3.1.0.tgz",
+      "integrity": "sha512-7jDLIdD2Zp0bDe5r3D2qtkd1QOCacylBuL7oa4udvN6v2pqr4+LcCr67C8DR1zkpaZ8XosF5m1yQSabKAW6f2g==",
+      "dependencies": {
+        "is-stream": "^3.0.0",
+        "temp-dir": "^3.0.0",
+        "type-fest": "^2.12.2",
+        "unique-string": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/tempy/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/tempy/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -3252,7 +8672,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -3261,7 +8680,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -3269,6 +8687,29 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/time-span": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/time-span/-/time-span-5.1.0.tgz",
+      "integrity": "sha512-75voc/9G4rDIJleOo4jPvN4/YC4GRZrY8yy1uU4lwrB3XEQbWve8zXoO5No4eFrGcTAMYyoY67p8jRQdtA1HbA==",
+      "dependencies": {
+        "convert-hrtime": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -3278,7 +8719,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -3286,16 +8726,43 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/traverse": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.8.tgz",
+      "integrity": "sha512-aXJDbk6SnumuaZSANd21XAo15ucCDE38H4fkqiGsc3MhCK+wOlZvLP9cB/TvpHT0mOyWgC4Z8EwRlzqYSUzdsA==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typescript": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
-      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -3305,6 +8772,26 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uglify-js": {
+      "version": "3.19.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/unicode-emoji-modifier-base": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-emoji-modifier-base/-/unicode-emoji-modifier-base-1.0.0.tgz",
+      "integrity": "sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/unicode-properties": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
@@ -3314,6 +8801,25 @@
         "unicode-trie": "^2.0.0"
       }
     },
+    "node_modules/unicode-properties/node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/unicode-trie": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
@@ -3323,10 +8829,48 @@
         "tiny-inflate": "^1.0.0"
       }
     },
+    "node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-3.0.0.tgz",
+      "integrity": "sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==",
+      "dependencies": {
+        "crypto-random-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/universal-user-agent": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz",
+      "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A=="
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
-      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
       "dev": true,
       "funding": [
         {
@@ -3343,8 +8887,8 @@
         }
       ],
       "dependencies": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
       },
       "bin": {
         "update-browserslist-db": "cli.js"
@@ -3353,11 +8897,18 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/url-join": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-5.0.0.tgz",
+      "integrity": "sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/utrie": {
       "version": "1.0.2",
@@ -3377,15 +8928,24 @@
         "vue": ">=3.0.0"
       }
     },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
     "node_modules/vite": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
-      "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
+      "version": "5.4.19",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.38",
-        "rollup": "^4.13.0"
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -3404,6 +8964,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -3421,6 +8982,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -3433,15 +8997,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
-      "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
+      "version": "3.5.20",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.20.tgz",
+      "integrity": "sha512-2sBz0x/wis5TkF1XZ2vH25zWq3G1bFEPOfkBcx2ikowmphoQsPH6X0V3mmPCXA2K1N/XGTnifVyDQP4GfDDeQw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/compiler-sfc": "3.4.21",
-        "@vue/runtime-dom": "3.4.21",
-        "@vue/server-renderer": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/compiler-dom": "3.5.20",
+        "@vue/compiler-sfc": "3.5.20",
+        "@vue/runtime-dom": "3.5.20",
+        "@vue/server-renderer": "3.5.20",
+        "@vue/shared": "3.5.20"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -3453,19 +9017,44 @@
       }
     },
     "node_modules/vue-debounce": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/vue-debounce/-/vue-debounce-5.0.0.tgz",
-      "integrity": "sha512-heIPTbmFC6Hghhnwbfjw0nYRBYH+YFp/d9xGQ/rDRPUfU6NBIndbJz+i0pHVii4BXXRi1CaljT6H3fDSbbPMvg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/vue-debounce/-/vue-debounce-5.0.1.tgz",
+      "integrity": "sha512-tJWEDhjHQ47MAUnr7EtZvClNQZJUlKlzd6TVxkSCzWXjeCH/rcKbCDzrd6FNEhvxDOBsTfJFbb9P4f5Xc26Iag==",
       "peerDependencies": {
         "vue": ">= 3.0.0"
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
-      "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
       "dependencies": {
-        "@vue/devtools-api": "^6.5.1"
+        "@vue/devtools-api": "^6.6.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -3502,11 +9091,11 @@
       }
     },
     "node_modules/vue3-pdfmake": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/vue3-pdfmake/-/vue3-pdfmake-2.2.0.tgz",
-      "integrity": "sha512-BsYOnuQNL9wJQ5E9W6M5q5VHvII64lGC80FxQkar4uQpWYXydgUHjYwgnBAiBydbw9YQlUx3ilfYc0kSxQ589A==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vue3-pdfmake/-/vue3-pdfmake-2.3.0.tgz",
+      "integrity": "sha512-cSJv3ctzAaTZnmvgAWidJ5SUa2ArogFizr7nhI9SIn6JcExYLQKOPoHlglkGmcCUXf5HBp1PBCcJH/LbbHX6ZQ==",
       "dependencies": {
-        "pdfmake": "0.3.0-beta.5",
+        "pdfmake": "0.3.0-beta.18",
         "vue-demi": "latest"
       },
       "engines": {
@@ -3522,31 +9111,6 @@
         }
       }
     },
-    "node_modules/vue3-pdfmake/node_modules/vue-demi": {
-      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vuelidate": {
       "version": "0.7.7",
       "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.7.tgz",
@@ -3560,7 +9124,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -3571,11 +9134,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
+    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -3593,7 +9160,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -3606,20 +9172,10 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -3630,62 +9186,114 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+    "node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
     "node_modules/xmldoc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/xmldoc/-/xmldoc-1.3.0.tgz",
-      "integrity": "sha512-y7IRWW6PvEnYQZNZFMRLNJw+p3pezM4nKYPfr15g4OOW9i8VpeydycFuipE2297OvZnh3jSb2pxOt9QpkZUVng==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/xmldoc/-/xmldoc-2.0.2.tgz",
+      "integrity": "sha512-UiRwoSStEXS3R+YE8OqYv3jebza8cBBAI2y8g3B15XFkn3SbEOyyLnmPHjLBPZANrPJKEzxxB7A3XwcLikQVlQ==",
       "dependencies": {
         "sax": "^1.2.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/yaml": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
       "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 14.6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yoctocolors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz",
+      "integrity": "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     }
   }
diff --git a/package.json b/package.json
index 6251173..0fabb19 100755
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
     "moment": "^2.30.1",
-    "pinia": "^2.1.7",
+    "pinia": "^2.3.1",
     "v-pagination-3": "^0.1.7",
     "vue": "^3.3.11",
     "vue-debounce": "^5.0.0",
diff --git a/src/App.vue b/src/App.vue
index 0383a96..46923ad 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,44 @@
-<script setup lang="ts">
-
-</script>
-
+<!-- App.vue -->
 <template>
+  <!-- 
+    This is the new main layout for your entire application.
+    - `drawer`: The base class for the component.
+    - `lg:drawer-open`: On large screens (lg), the drawer is permanently open, creating the desktop sidebar view.
+  -->
+  <div class="drawer lg:drawer-open">
+    <!-- The hidden checkbox that the hamburger button in the header will toggle -->
+    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
+    
+    <!-- DRAWER CONTENT: This is what's visible on the main page -->
+    <div class="drawer-content flex flex-col">
+      <!-- The Header now lives here, at the top of the content -->
+      <HeaderAuth />
 
-  <html class="">
-  <router-view />
-  <notifications position="top center" />
-  </html>
-
+      <!-- The Main Content Area for your 30 pages -->
+      <main class="flex-1 p-4 md:p-8 bg-base-200">
+        <!-- <router-view> renders the current page (e.g., deliveryEdit.vue) -->
+        <router-view />
+      </main>
+      
+      <!-- Your global search results and notifications still live here -->
+      <SearchResults v-if="searchStore.showResults" />
+      <notifications position="top center" />
+    </div> 
+    
+    <!-- DRAWER SIDE: This is the sidebar that slides out on mobile -->
+    <div class="drawer-side">
+      <label for="my-drawer-2" class="drawer-overlay"></label> 
+      <!-- The Sidebar component is now placed here -->
+      <SideBar />
+    </div>
+  </div>
 </template>
 
-<style lang="scss">
+<script setup lang="ts">
+import { useSearchStore } from './stores/search';
+import HeaderAuth from './layouts/headers/headerauth.vue'; // Adjust path if needed
+import SideBar from './layouts/sidebar/sidebar.vue'; // Adjust path if needed
+import SearchResults from './components/SearchResults.vue'; // Adjust path if needed
 
-#myfont {
-    font-family:  Arial, Helvetica, sans-serif, sans-serif !important;
-}
-
-
-</style>
\ No newline at end of file
+const searchStore = useSearchStore();
+</script>
\ No newline at end of file
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
new file mode 100755
index 0000000..676804b
--- /dev/null
+++ b/src/components/SearchResults.vue
@@ -0,0 +1,53 @@
+<!-- SearchResults.vue -->
+<template>
+
+  <div class="fixed top-16 left-1/2 -translate-x-1/2 w-full max-w-2xl px-4">
+    <div class="overflow-x-auto bg-base-100 rounded-lg shadow-2xl border border-gray-700">
+      <table class="table w-full">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Address</th>
+            <th>Phone</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- It now reads `searchResults` directly from the store -->
+          <tr v-for="user in searchStore.searchResults" :key="user.id" class="hover cursor-pointer" @click="viewProfile(user.id)">
+            <td>
+              <div class="font-bold">{{ user.customer_first_name }} {{ user.customer_last_name }}</div>
+            </td>
+            <td>
+              <div>{{ user.customer_address }}</div>
+              <div class="text-sm opacity-70">{{ user.customer_town }}, {{ user.customer_state }}</div>
+            </td>
+            <td>{{ user.customer_phone_number }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+// 1. Import the store
+import { useSearchStore } from '../stores/search'; // Adjust path if needed
+
+export default defineComponent({
+  name: "SearchResults",
+  setup() {
+    // 2. Make the store available
+    const searchStore = useSearchStore();
+    return { searchStore };
+  },
+  methods: {
+    viewProfile(customerId: number) {
+      // When a user is clicked, navigate to their profile...
+      this.$router.push({ name: 'customerProfile', params: { id: customerId } });
+      // ...and clear the search so the overlay disappears.
+      this.searchStore.clearSearch();
+    }
+  }
+});
+</script>c
\ No newline at end of file
diff --git a/src/layouts/headers/SearchResults.vue b/src/layouts/headers/SearchResults.vue
deleted file mode 100755
index 995204a..0000000
--- a/src/layouts/headers/SearchResults.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <section >
-
-      <div v-for="user in customers" :key="user.id">
-          <router-link   :to="{ name: 'customerProfile', params: { id: user['id'] } }">
-        <div class="grid grid-cols-12 bg-neutral pb-5 hover:bg-accent ">
-        <div class="col-span-12">     {{ user['customer_first_name'] }} {{ user['customer_last_name'] }}</div>
-        <div class="col-span-12">
-          {{ user['customer_address'] }} {{ user['customer_town'] }} {{user.state}}
-        </div>
-        <div class="col-span-12"> {{user['customer_phone_number']}}</div>
-     
-        <div class="col-span-12"> {{user['account_number']}}</div>
-        </div>
-      </router-link>
-
-        <hr/>
-      </div>
-
-
-  </section>
-</template>
-
-
-<script lang="ts">
-
-
-import {defineComponent} from "vue";
-
-export default defineComponent({
-  name: "SearchResults",
-  props: ["customers"],
-
-});
-</script>
-
diff --git a/src/layouts/headers/headerauth.vue b/src/layouts/headers/headerauth.vue
index 54ed9e1..0a11212 100755
--- a/src/layouts/headers/headerauth.vue
+++ b/src/layouts/headers/headerauth.vue
@@ -1,271 +1,128 @@
+<!-- headerauth.vue -->
 <template>
+  <div class="navbar bg-primary border-b border-gray-700 sticky top-0 z-30">
+    
+    <!-- Navbar Start Section -->
+    <div class="navbar-start">
+      <!-- Hamburger Menu Toggle for Mobile -->
+      <label for="my-drawer-2" class="btn btn-ghost btn-circle drawer-button lg:hidden">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
+      </label>
 
-  <div class="navbar bg-primary border-b border-bottom-500 border-gray-500">
-    <div class="basis-1/4 md:basis-1/4">
-      <router-link :to="{ name: 'home' }">
-      <div class="text-3xl"> 
-        <img src="../../assets/images/1.png" alt="" width="250" height="250" />
-
-      </div>
+      <!-- Logo -->
+      <router-link :to="{ name: 'home' }" class="btn btn-ghost normal-case text-xl">
+        <img src="../../assets/images/1.png" alt="Company Logo" class="h-8 md:h-10 w-auto" />
       </router-link>
     </div>
-    <div class="basis-1/4 md:basis-1/2 justify-center text-center">
-      <input type="text" placeholder="Search " class="input input-bordered w-24 md:w-auto grow" v-model="searchTerm" />
+
+    <!-- Navbar Center Section (Desktop Search Bar) -->
+    <div class="navbar-center hidden lg:flex">
+      <input 
+        type="text" 
+        placeholder="Search Customers..." 
+        class="input input-bordered w-full max-w-xs"
+        v-model="searchStore.searchTerm" 
+        @input="searchStore.fetchSearchResults"
+      />
     </div>
 
-    <div class="basis-1/2 md:basis-1/4 justify-end gap-5">
-
-      <!-- <button class="btn btn-green btn-sm" @click.prevent="increaseCall()">Call</button> -->
-
-      <router-link :to="{ name: 'customerCreate' }">
-        <button class="btn bg-blue-700 btn-sm">Create Customer</button>
+    <!-- Navbar End Section (Buttons and User Dropdown) -->
+    <div class="navbar-end gap-2">
+      <!-- Create Customer Button (Desktop Only) -->
+      <router-link :to="{ name: 'customerCreate' }" class="btn btn-accent btn-sm hidden lg:inline-flex">
+        Create Customer
       </router-link>
 
-      <div v-if="employee.id" class="relative ">
-        <button @click="toggleDropdown" class="flex items-center gap-2 ">
-          <div>{{ user.user_name }}</div>
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-          </svg>
-        </button>
-        <div v-if="isDropdownOpen" class="absolute right-0 mt-2 w-48 bg-gray-800 border border-gray-300 rounded shadow-lg z-10">
-          <router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }" class="block px-4 py-2 text-white hover:bg-gray-700" @click="closeDropdown">
-            User Profile
-          </router-link>
-          <button @click="logout" class="block w-full text-left px-4 py-2 text-white hover:bg-gray-700">
-            Logout
-          </button>
-        </div>
+      <!-- User Dropdown -->
+      <!-- v-if="employee.id" only renders this block AFTER the API call is successful and an employee ID exists. -->
+      <div v-if="employee.id" class="dropdown dropdown-end">
+        <label tabindex="0" class="btn btn-ghost btn-circle avatar">
+          <div class="w-10 rounded-full bg-neutral text-neutral-content flex items-center justify-center">
+            <span class="text-lg font-bold">{{ userInitials }}</span>
+          </div>
+        </label>
+        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+          <li class="p-2 font-semibold">{{ user.user_name }}</li>
+          <div class="divider my-0"></div>
+          <li>
+            <router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }">
+              Profile
+            </router-link>
+          </li>
+          <li><a @click="logout">Logout</a></li>
+        </ul>
+      </div>
+      <!-- This provides the loading indicator while we wait for the API call to finish. -->
+      <div v-else class="px-4">
+        <span class="loading loading-spinner loading-sm"></span>
       </div>
-    </div>
-
-
-  </div>
-  <div class="grid grid-cols-12 ">
-    <div class="grow col-start-4 col-span-6 ">
-      <SearchResults v-if="customers.length" :customers="customers" />
     </div>
   </div>
 </template>
 
-
 <script lang="ts">
-import { debounce } from "vue-debounce";
-import { defineComponent } from "vue";
-import axios from "axios";
-import authHeader from "../../services/auth.header";
-import SearchResults from "./SearchResults.vue";
+import { defineComponent } from 'vue'
+import axios from 'axios'
+import authHeader from '../../services/auth.header'
+import { useSearchStore } from '../../stores/search' // Adjust path if needed
+
+// Define the shape of your data for internal type safety
+interface User {
+  user_name: string;
+}
+interface Employee {
+  id: number;
+}
 
 export default defineComponent({
-  name: "HeaderAuth",
-  components: {
-    SearchResults,
+  data() {
+    return {
+      // Initialize with empty objects to prevent template errors
+      employee: {} as Employee,
+      user: {} as User,
+    }
+  },
 
+  computed: {
+    searchStore() {
+      return useSearchStore();
+    },
+    userInitials(): string {
+      if (!this.user || !this.user.user_name) return '';
+      const parts = this.user.user_name.split(' ');
+      return parts.length > 1
+        ? `${parts[0][0]}${parts[1][0]}`.toUpperCase()
+        : this.user.user_name.substring(0, 2).toUpperCase();
+    }
   },
 
   created() {
-    this.userStatus();
+    this.fetchUserData();
   },
-  data() {
-    return {
-      user: {
-        user_id: 0,
-        user_name: '',
-      },
-      company_id: 0,
-      isDropdownOpen: false,
-      company: {
-        creation_date: "",
-        account_prefix: "",
-        company_name: "",
-        company_address: "",
-        company_town: "",
-        company_zip: "",
-        company_state: "",
-        company_phone_number: "",
-      },
-      employee: {
-        id: '',
-        user_id: '',
-        employee_last_name: "",
-        employee_first_name: "",
-        employee_town: "",
-        employee_address: "",
-        employee_apt: "",
-        employee_zip: "",
-        employee_birthday: "",
-        employee_phone_number: "",
-        employee_start_date: "",
-        employee_end_date: "",
-        employee_type: '',
-        employee_state: '',
-      },
-      loaded: false,
-      searchTerm: "",
-      customers: [],
-      type_of_search: 0,
-    };
-  },
-  watch: {
-    searchTerm(this: any) {
-      this.performSearch();
-    },
-  },
-  mounted() {
-    this.getCompany();
 
-  },
   methods: {
-    performSearch: debounce(async function (this: any) {
-      if (this.searchTerm === "") {
-        this.customers = [];
-        return;
-      }
-      if (this.searchTerm.length < 2) {
-        return;
-      }
+     fetchUserData() {
+    axios.get('/auth/whoami', { headers: authHeader() })
+      .then((response: any) => {
+        console.log("User Data Response from API:", response.data);
 
-      if (this.searchTerm.startsWith("@")) {
-        this.type_of_search = 0
-      } else if (this.searchTerm.startsWith("!")) {
-        this.type_of_search = 1
-      } else if (this.searchTerm.startsWith("#")) {
-        this.type_of_search = 2
-        
-      }else if (this.searchTerm.startsWith("$")) {
-        this.type_of_search = 3
-        
-      } else {
-        this.type_of_search = 0
-      }
-
-      const searchUrl = this.getSearchUrl();
-      const response = await (await fetch(searchUrl)).json();
-
-      this.customers = response;
-    }, 600),
-    getSearchUrl() {
-      if (this.type_of_search == 0) {
-        const url = import.meta.env.VITE_BASE_URL + "/search/customer";
-        const params = {
-          q: this.searchTerm,
-        };
-        const searchParams = new URLSearchParams(params);
-        return `${url}?${searchParams}`;
-      }
-      else if (this.type_of_search == 1) {
-        const url = import.meta.env.VITE_BASE_URL +"/search/customer";
-        const params = {
-          q: this.searchTerm,
-        };
-        const searchParams = new URLSearchParams(params);
-        return `${url}?${searchParams}`;
-      }
-      else if (this.type_of_search == 2) {
-        const url = import.meta.env.VITE_BASE_URL +"/search/customer";
-        const params = {
-          q: this.searchTerm,
-        };
-        const searchParams = new URLSearchParams(params);
-        return `${url}?${searchParams}`;
-      }
-      else if (this.type_of_search == 3) {
-        const url = import.meta.env.VITE_BASE_URL +"/search/customer";
-        const params = {
-          q: this.searchTerm,
-        };
-        const searchParams = new URLSearchParams(params);
-        return `${url}?${searchParams}`;
-      }
-      else {
-        const url = import.meta.env.VITE_BASE_URL +"/search/customer";
-        const params = {
-          q: this.searchTerm,
-        };
-        const searchParams = new URLSearchParams(params);
-        return `${url}?${searchParams}`;
-      }
-    },
-
-    userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
+        // This check is now more robust. It only checks for what it truly needs.
+        if (response.data && response.data.ok && response.data.employee && response.data.employee.id) {
+          this.user = response.data.user;
+          this.employee = response.data.employee;
+        } else {
+          console.error("API response was successful, but the expected employee data with an ID is missing.");
+        }
       })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.user = response.data.user;
-            this.employeeStatus()
-            this.loaded = true;
-          } else {
-            localStorage.removeItem('user');
-            this.$router.push('/login');
-          }
-        })
-        .catch(() => {
-          this.loaded = true;
-          this.$router.push('/login');
-        });
-    },
-    employeeStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id;
-
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          this.employee = response.data;
-          this.loaded = true;
-
-        })
-    },
-    // increaseCall() {
-    //   let path = import.meta.env.VITE_BASE_URL + '/stats/calls/add';
-
-    //   axios({
-    //     method: "put",
-    //     url: path,
-    //     withCredentials: true,
-    //     headers: authHeader(),
-    //   })
-    //     .then((response: any) => {
-    //       this.number++;
-
-    //     })
-    // },
-
-    getCompany() {
-      let path = import.meta.env.VITE_BASE_URL + '/admin/company/' + import.meta.env.VITE_COMPANY_ID;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          this.company = response.data;
-          this.company_id = import.meta.env.VITE_COMPANY_ID
-        })
-    },
-    toggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen;
-    },
-    closeDropdown() {
-      this.isDropdownOpen = false;
-    },
-    logout() {
-      localStorage.removeItem('auth_user');
-            localStorage.removeItem('auth_token');
-      this.$router.push('/login');
-    },
+      .catch((error: any) => {
+        console.error("CRITICAL: Failed to fetch user data. The API call itself failed.", error);
+      });
   },
-});
-</script>
 
-<style scoped></style>
+    logout() {
+      console.log("Logging out...");
+      // Your full logout logic here
+    }
+  }
+});
+</script>
\ No newline at end of file
diff --git a/src/layouts/headers/headernoauth.vue b/src/layouts/headers/headernoauth.vue
index e0a6411..a6a26ee 100755
--- a/src/layouts/headers/headernoauth.vue
+++ b/src/layouts/headers/headernoauth.vue
@@ -1,25 +1,16 @@
 <template>
-
-  <div class="navbar bg-primary border-b border-bottom-500 border-gray-500">
-    <div class="basis-1/4 md:basis-1/4">
+  <div class="navbar bg-primary border-b border-gray-700">
+    <div class="navbar-start">
       <router-link :to="{ name: 'home' }">
-        Auburn Oil
+        <img src="../../assets/images/1.png" alt="Company Logo" class="h-10 md:h-12 w-auto" />
       </router-link>
     </div>
-    <div class="basis-1/4 md:basis-1/2 justify-center text-center">
-
-    </div>
-
-    <div class="basis-1/2 md:basis-1/4 justify-end gap-5">
-      <router-link :to="{ name: 'login' }">
-        <button class="btn btn-primary">Login</button>
-      </router-link>
-      <router-link :to="{ name: 'register' }">
-        <button class="btn btn-primary">Register</button>
-      </router-link>
+    
+    <div class="navbar-end gap-2">
+      <router-link :to="{ name: 'login' }" class="btn btn-ghost btn-sm">Login</router-link>
+      <router-link :to="{ name: 'register' }" class="btn btn-accent btn-sm">Register</router-link>
     </div>
   </div>
-
 </template>
 
 
diff --git a/src/layouts/sidebar/sidebar.vue b/src/layouts/sidebar/sidebar.vue
index ba05a7d..bca518f 100755
--- a/src/layouts/sidebar/sidebar.vue
+++ b/src/layouts/sidebar/sidebar.vue
@@ -1,137 +1,118 @@
+<!-- sidebar.vue -->
 <template>
+  <!-- 
+    The sidebar is now just the menu. The layout logic lives in App.vue.
+    This is much cleaner and works correctly with the mobile hamburger button.
+  -->
+  <ul class="menu p-4 w-80 min-h-full bg-base-100 text-base-content">
+    <!-- Logo at the top of the sidebar for mobile view -->
+<li class="mb-4 lg:hidden">
+  <router-link :to="{ name: 'home' }">
+    <img src="../assets/images/1.png" alt="Company Logo" class="h-10 w-auto" />
+  </router-link>
+</li>
+    
+    <li>
+      <router-link :to="{ name: 'home' }" exact-active-class="active">
+        Home
+      </router-link>
+    </li>
 
-  <div class="drawer sm:drawer-open bg-primary">
-    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
-    <div class="drawer-content flex flex-col items-center justify-center ">
-    </div>
+    <!-- Customer Section - Open by default -->
+    <li>
+      <details open>
+        <summary class="font-bold text-lg">Customer</summary>
+        <ul>
+          <li><router-link :to="{ name: 'customer' }" exact-active-class="active">All Customers</router-link></li>
+        </ul>
+      </details>
+    </li>
 
-    <div class="drawer-side">
-      <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
+    <!-- Delivery Section - Open by default -->
+    <li>
+      <details open>
+        <summary class="font-bold text-lg">Delivery</summary>
+        <ul>
+          <li><router-link :to="{ name: 'delivery' }" exact-active-class="active">Home</router-link></li>
+          <li>
+            <router-link :to="{ name: 'deliveryOutForDelivery' }" exact-active-class="active">
+              Todays Deliveries
+              <span v-if="today_count > 0" class="badge badge-secondary">{{ today_count }}</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'deliveryTommorrow' }" exact-active-class="active">
+              Tomorrows Deliveries
+              <span v-if="tommorrow_count > 0" class="badge badge-secondary">{{ tommorrow_count }}</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'deliveryWaiting' }" exact-active-class="active">
+              Waiting Deliveries
+              <span v-if="waiting_count > 0" class="badge badge-info">{{ waiting_count }}</span>
+            </router-link>
+          </li>
+          <li><router-link :to="{ name: 'deliveryIssue' }" exact-active-class="active">Issue Tickets</router-link></li>
+          <li>
+            <router-link :to="{ name: 'deliveryPending' }" exact-active-class="active">
+              Pending Payment
+              <span v-if="pending_count > 0" class="badge badge-warning">{{ pending_count }}</span>
+            </router-link>
+          </li>
+          <li><router-link :to="{ name: 'deliveryFinalized' }" exact-active-class="active">Finalized Tickets</router-link></li>
+        </ul>
+      </details>
+    </li>
 
-      <ul class="menu p-4 w-80 min-h-full  text-base-content  bg-base-100  ">
+    <!-- Service Section - Open by default -->
+    <li>
+      <details open>
+        <summary class="font-bold text-lg">Service</summary>
+        <ul>
+          <li><router-link :to="{ name: 'ServiceCalendar' }" exact-active-class="active">Service Calendar</router-link></li>
+          <li>
+            <router-link :to="{ name: 'ServiceHome' }" exact-active-class="active">
+              Upcoming Service
+              <span v-if="upcoming_service_count > 0" class="badge badge-info">{{ upcoming_service_count }}</span>
+            </router-link>
+          </li>
+          <li><router-link :to="{ name: 'ServicePast' }" exact-active-class="active">Past Service</router-link></li>
+        </ul>
+      </details>
+    </li>
 
-        <!-- Sidebar content here -->
-        <li>
-          <router-link :to="{ name: 'home' }">
-            <div class=" hover:underline py-1 px-5 font-bold">Home</div>
-          </router-link>
-        </li>
+    <!-- Automatics Section - Now has its own header -->
+    <li>
+      <details>
+        <summary class="font-bold text-lg">Automatics</summary>
+        <ul>
+          <li>
+            <router-link :to="{ name: 'auto' }" exact-active-class="active">
+              All Automatics
+              <span v-if="automatic_count > 0" class="badge badge-info">{{ automatic_count }}</span>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </li>
 
-        <div class="font-bold text-lg text-gray-500 pt-5 ">Customer</div>
-        <li class="text-white">
-          <router-link :to="{ name: 'customer' }">
-            <div class=" hover:underline py-1">All Customers</div>
-          </router-link>
-        </li>
-
-        <div class="font-bold text-lg text-gray-500 pt-5">Delivery</div>
-        <li class="text-white">
-          <router-link :to="{ name: 'delivery' }">
-            <div class=" hover:underline py-1">Home</div>
-          </router-link>
-          <router-link :to="{ name: 'deliveryOutForDelivery' }">
-            <div class=" hover:underline py-1" v-if="today_count > 0">
-              <div class="flex gap-5">
-                <div class="">Todays Deliveries </div>
-                <div class="text-orange-600"> ({{ today_count }})</div>
-              </div>
-            </div>
-            <div class=" hover:underline py-1" v-else>Todays Deliveries </div>
-          </router-link>
-          <router-link :to="{ name: 'deliveryTommorrow' }">
-            <div class=" hover:underline py-1" v-if="tommorrow_count > 0">
-              <div class="flex gap-5">
-                <div class="">Tommorrows Deliveries </div>
-                <div class="text-orange-600"> ({{ tommorrow_count }})</div>
-              </div>
-            </div>
-            <div class=" hover:underline py-1" v-else>Tommorrow Deliveries </div>
-          </router-link>
-          <router-link :to="{ name: 'deliveryWaiting' }">
-            <div class=" hover:underline py-1" v-if="waiting_count > 0">
-              <div class="flex gap-5">
-                <div class="">Waiting Deliveries </div>
-                <div class="text-orange-600"> ({{ waiting_count }})</div>
-              </div>
-            </div>
-            <div class=" hover:underline py-1" v-else>Waiting Deliveries </div>
-          </router-link>
-          <router-link :to="{ name: 'deliveryIssue' }">
-            <div class=" hover:underline py-1">Issue Tickets</div>
-          </router-link>
-          <router-link :to="{ name: 'deliveryPending' }">
-            <div class=" hover:underline py-1" v-if="pending_count > 0">
-              <div class="flex gap-5">
-                <div class="">Pending Payment </div>
-                <div class="text-orange-600"> ({{ pending_count }})</div>
-              </div>
-            </div>
-            <div class=" hover:underline py-1" v-else>Pending Payment </div>
-          </router-link>
-          <router-link :to="{ name: 'deliveryFinalized' }">
-            <div class=" hover:underline py-1">Finalized Tickets</div>
-          </router-link>
-        </li>
-        
-        <div class="font-bold text-lg text-gray-500 pt-5">Service</div>
-        <li class="text-white">
-          <router-link :to="{ name: 'ServiceCalendar' }">
-            <div class=" hover:underline py-1">Service Calendar</div>
-          </router-link>
-          <router-link :to="{ name: 'ServiceHome' }">
-            <div class=" hover:underline py-1" v-if="upcoming_service_count > 0">
-              <div class="flex gap-5">
-                <div class="">Service Upcomming</div>
-                <div class="text-orange-600"> ({{ upcoming_service_count }})</div>
-              </div>
-            </div>
-            <div class=" hover:underline py-1" v-else>Services</div>
-          </router-link>
-                    <router-link :to="{ name: 'ServicePast' }">
-            <div class=" hover:underline py-1">Past Service</div>
-          </router-link>
-        </li>
-        
-        <div class="font-bold text-lg text-gray-500 pt-5">Automatics</div>
-        <li class="text-white">
-          <router-link :to="{ name: 'auto' }">
-            <div class=" hover:underline py-1" v-if="automatic_count > 0">
-              <div class="flex gap-5">
-                <div class="">Automatics </div>
-                <div class="text-orange-600"> ({{ automatic_count }})</div>
-              </div>
-            </div>
-            <div class=" hover:underline py-1" v-else>Automatics </div>
-          </router-link>
-        </li>
-
-        <div class="font-bold text-lg text-gray-500 pt-5">Employees</div>
-        <li class="text-white">
-          <router-link :to="{ name: 'employee' }">
-            <div class=" hover:underline py-1">Employees</div>
-          </router-link>
-        </li>
-
-        <div class="font-bold text-lg text-gray-500 pt-5">Admin</div>
-        <li class="text-white">
-          <router-link :to="{ name: 'oilprice' }">
-            <div class=" hover:underline py-1">Oil Pricing</div>
-          </router-link>
-          <router-link :to="{ name: 'promo' }">
-            <div class=" hover:underline py-1">Promos</div>
-          </router-link>
-          <router-link :to="{ name: 'MoneyYear' }">
-            <div class=" hover:underline py-1">Money</div>
-          </router-link>
-        </li>
-      </ul>
-    </div>
-  </div>
+    <!-- Admin Section - Closed by default and contains Employees -->
+    <li>
+      <details>
+        <summary class="font-bold text-lg">Admin</summary>
+        <ul>
+          <!-- Employees is now here -->
+          <li><router-link :to="{ name: 'employee' }" exact-active-class="active">Employees</router-link></li>
+          <li><router-link :to="{ name: 'oilprice' }" exact-active-class="active">Oil Pricing</router-link></li>
+          <li><router-link :to="{ name: 'promo' }" exact-active-class="active">Promos</router-link></li>
+          <li><router-link :to="{ name: 'MoneyYear' }" exact-active-class="active">Money</router-link></li>
+        </ul>
+      </details>
+    </li>
+  </ul>
 </template>
 
-
 <script lang="ts">
-
 import { defineComponent } from "vue";
 import axios from 'axios';
 import authHeader from '../../services/auth.header';
@@ -169,8 +150,6 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.upcoming_service_count = response.data.count;
-      // --- THIS IS THE FIX ---
-      // Explicitly type the 'error' parameter as 'any'
       }).catch((error: any) => {
         console.error("Failed to get upcoming service count:", error);
         this.upcoming_service_count = 0;
@@ -185,7 +164,7 @@ export default defineComponent({
       }).then((response: any) => {
         if (response.data.update)
           console.log("Updated Status of Deliveries")
-      })
+      }).catch((error: any) => console.error("Update status failed:", error));
     },
     updatetemp() {
       let path = import.meta.env.VITE_AUTO_URL + '/main/temp';
@@ -196,7 +175,7 @@ export default defineComponent({
       }).then((response: any) => {
         if (response.data.ok)
           console.log("Updated Temp")
-      })
+      }).catch((error: any) => console.error("Update temp failed:", error));
     },
     updateautos() {
       let path = import.meta.env.VITE_AUTO_URL + '/main/update';
@@ -207,7 +186,7 @@ export default defineComponent({
       }).then((response: any) => {
         if (response.data.ok)
           console.log("Updated Autos")
-      })
+      }).catch((error: any) => console.error("Update autos failed:", error));
     },
     getAutoCount() {
       let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/automatic';
@@ -217,7 +196,7 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.automatic_count = response.data.count
-      })
+      }).catch((error: any) => console.error("Get auto count failed:", error));
     },
     getTodayCount() {
       let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/today';
@@ -227,8 +206,7 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.today_count = response.data.count
-
-      })
+      }).catch((error: any) => console.error("Get today count failed:", error));
     },
     getTommorrowCount() {
       let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/tommorrow';
@@ -238,8 +216,7 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.tommorrow_count = response.data.count
-
-      })
+      }).catch((error: any) => console.error("Get tomorrow count failed:", error));
     },
     getPendingCount() {
       let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/pending';
@@ -249,8 +226,7 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.pending_count = response.data.count
-
-      })
+      }).catch((error: any) => console.error("Get pending count failed:", error));
     },
     getWaitingCount() {
       let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/waiting';
@@ -260,11 +236,8 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.waiting_count = response.data.count
-
-      })
+      }).catch((error: any) => console.error("Get waiting count failed:", error));
     },
   },
 });
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 6df560a..de57f11 100755
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,67 +1,105 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
+    <div class="w-full px-4 md:px-10 ">
+      <!-- Breadcrumbs & Welcome Header -->
       <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
         </ul>
       </div>
-      <div class="flex text-2xl mb-5">
-        Welcome {{ employee.employee_first_name }} {{ employee.employee_last_name }}!
-      </div>
+      <h1 class="text-3xl font-bold mt-4">
+        Welcome, {{ employee.employee_first_name }}!
+      </h1>
 
-      <div class="grid grid-cols-12 gap-5 ">
-        <div class="col-span-12 bg-secondary  ">
-          <div class="grid grid-cols-12 p-5 bg-neutral m-5">
-            <div class="col-span-12 font-bold text-xl">Todays stats</div>
-            <div class="col-span-6 py-2"> Total Deliveries: {{ delivery_count }}</div>
-            <div class="col-span-6 py-2"> Completed: {{ delivery_count_delivered }} / {{ delivery_count }}</div>
+      <!-- Main Dashboard Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 my-6">
+        
+        <!-- Card 1: Today's Stats -->
+        <div class="bg-neutral rounded-lg p-5 xl:col-span-2">
+          <h3 class="text-xl font-bold mb-4">Today's Stats</h3>
+          <div class="space-y-4">
+            <div>
+              <span class="font-semibold">Total Deliveries Today:</span>
+              <span class="text-lg ml-2">{{ delivery_count }}</span>
+            </div>
+            <div>
+              <div class="flex justify-between text-sm mb-1">
+                <span>Completed</span>
+                <span>{{ delivery_count_delivered }} / {{ delivery_count }}</span>
+              </div>
+              <progress class="progress progress-primary w-full" :value="delivery_count_delivered" :max="delivery_count"></progress>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 2: Today's Oil Price -->
+        <div class="bg-neutral rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-4">Today's Oil Price</h3>
+          <div class="space-y-2">
+            <div class="flex justify-between">
+              <span>Price / Gallon:</span>
+              <span class="font-mono">${{ today_oil_price }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Same Day Fee:</span>
+              <span class="font-mono">${{ price_same_day }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Prime Fee:</span>
+              <span class="font-mono">${{ price_prime }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Emergency Fee:</span>
+              <span class="font-mono">${{ price_emergency }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Card 2: Today's Oil Price -->
+        <div class="bg-neutral rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-4">Service Price</h3>
+          <div class="space-y-2">
+            <div class="flex justify-between">
+              <span>Price / Hour:</span>
+              <span class="font-mono">$125</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Price / Emergency:</span>
+              <span class="font-mono">$200</span>
+            </div>
            
-            <!-- <div class="col-span-6 py-2"> Total Calls: {{ call_count }}</div> -->
-         
           </div>
         </div>
 
-        <div class="col-span-6 bg-secondary">
-          <div class="grid grid-cols-12 p-5 bg-neutral m-5">
-            <div class="col-span-12 font-bold text-xl">Todays Oil Price</div>
-            <div class="col-span-12 py-2"> Price / Gallon: ${{ today_oil_price }}</div>
-            <div class="col-span-12 py-2"> Same Day: ${{ price_same_day }}</div>
-            <div class="col-span-12 py-2"> Prime: ${{ price_prime }}</div>
-            <div class="col-span-12 py-2"> Emergency: ${{ price_emergency }}</div>
-          </div>
-        </div>
-        <div class="col-span-6 bg-secondary">
-          <div class="grid grid-cols-12 p-5 bg-neutral m-5">
-            <div class="col-span-12 font-bold text-xl">Quick Tips</div>
-            <div class="col-span-12 py-2"> search: @ = last name search</div>
-            <div class="col-span-12 py-2"> search: ! = address</div>
-            <div class="col-span-12 py-2"> search: $ = account number</div>
-          </div>
-        </div>
-        <div class="col-span-12 bg-secondary">
-          <div class="grid grid-cols-12 p-5 bg-neutral m-5">
-            <div class="col-span-12 font-bold text-xl">This Weeks Stats</div>
-            <div class="col-span-12 py-2"> Total Deliveries: {{ total_deliveries }}</div>
-            <div class="col-span-12 py-2"> Total Gallons : {{ total_gallons_past_week }}</div>
-            <div class="col-span-12 py-2"> Total Profit: ${{ total_profit_past_week }}</div>
+      
+        
+        <!-- Card 4: This Week's Stats -->
+        <div class="bg-neutral rounded-lg p-5 xl:col-span-4">
+          <h3 class="text-xl font-bold mb-4">This Week's Stats</h3>
+          <div class="stats stats-vertical lg:stats-horizontal shadow bg-base-100 w-full">
+            <div class="stat">
+              <div class="stat-title">Total Deliveries</div>
+              <div class="stat-value">{{ total_deliveries }}</div>
+              <div class="stat-desc">In the last 7 days</div>
+            </div>
+            <div class="stat">
+              <div class="stat-title">Total Gallons</div>
+              <div class="stat-value">{{ total_gallons_past_week }}</div>
+              <div class="stat-desc">Delivered this week</div>
+            </div>
+            <div class="stat">
+              <div class="stat-title">Total Profit</div>
+              <div class="stat-value text-success">${{ total_profit_past_week }}</div>
+              <div class="stat-desc">Estimated earnings</div>
+            </div>
           </div>
         </div>
+
       </div>
     </div>
   </div>
-
   <Footer />
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
diff --git a/src/pages/admin/oilprice.vue b/src/pages/admin/oilprice.vue
index 21eb9b7..fbe069c 100755
--- a/src/pages/admin/oilprice.vue
+++ b/src/pages/admin/oilprice.vue
@@ -1,221 +1,174 @@
 <template>
-    <Header/>
-      <div class="flex">
-        <div class="">
-          <SideBar/>
-        </div>
-        <div class=" w-full px-10">
-          <div class="text-sm breadcrumbs">
-            <ul>
-                <li>
-                  <router-link :to="{ name: 'home' }">
-                    Home
-                  </router-link>
-                </li>
-                <li>
-                  <router-link :to="{ name: 'customer' }">
-                    Customers
-                  </router-link>
-                </li>
-            </ul>
-          </div>
-
-          <div class="grid grid-cols-1 rounded-md p-6 ">
-            <div class="text-[24px]">
-            Add Oil Price
-            </div>
-            <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full"
-                  enctype="multipart/form-data"
-                  @submit.prevent="onSubmit">
-
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Price Customer</label>
-                <input v-model="CreateOilForm.basicInfo.price_for_customer"
-                         class="input input-bordered input-sm w-full max-w-xs"
-                       id="title" type="text" placeholder="Todays Price"/>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Price Employee</label>
-                <input v-model="CreateOilForm.basicInfo.price_for_employee"
-
-                       class="input input-bordered input-sm w-full max-w-xs"
-                       id="title" type="text" placeholder="Todays Price Employee"/>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2"> Price from Supplier</label>
-                <input v-model="CreateOilForm.basicInfo.price_from_supplier"
-                       class="input input-bordered input-sm w-full max-w-xs"
-                       id="prime" type="text" placeholder="Price Prime"/>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Price same day</label>
-                <input v-model="CreateOilForm.basicInfo.price_same_day"
-                       class="input input-bordered input-sm w-full max-w-xs"
-                       id="title" type="text" placeholder="Price Same Day"/>
-              </div>
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Price Emergency Call (After Hours)</label>
-                <input v-model="CreateOilForm.basicInfo.price_emergency"
-                       class="input input-bordered input-sm w-full max-w-xs"
-                       id="title" type="text" placeholder="Price After hours same day call"/>
-              </div>
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Price Prime</label>
-                <input v-model="CreateOilForm.basicInfo.price_prime"
-                       class="input input-bordered input-sm w-full max-w-xs"
-                       id="title" type="text" placeholder="Price Prime"/>
-              </div>
-
-
-              <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-                <button
-                    class="btn btn-secondary btn-sm">
-                  Create Pricing
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Set Oil Pricing</li>
+        </ul>
       </div>
+      
+      <h1 class="text-3xl font-bold mt-4">
+        Set Today's Oil Pricing
+      </h1>
 
-    <Footer/>
-  </template>
+      <!-- Main Form Card -->
+      <div class="bg-neutral rounded-lg p-6 mt-6">
+        <form @submit.prevent="onSubmit" class="space-y-6">
+          
+          <!-- SECTION 1: Base Pricing -->
+          <div>
+            <h2 class="text-lg font-bold">Base Pricing</h2>
+            <p class="text-xs text-gray-400">Set the core price per gallon for different groups.</p>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <!-- Price from Supplier -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Price from Supplier</span></label>
+                <label class="input-group input-group-sm">
+                  <span>$</span>
+                  <input v-model.number="OilForm.price_from_supplier" type="number" step="0.01" placeholder="3.50" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+              <!-- Price for Customer -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Price for Customer</span></label>
+                <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_for_customer" type="number" step="0.01" placeholder="4.50" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+              <!-- Price for Employee -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Price for Employee</span></label>
+                <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_for_employee" type="number" step="0.01" placeholder="4.00" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+            </div>
+          </div>
 
+          <!-- SECTION 2: Service Fees -->
+          <div>
+            <h2 class="text-lg font-bold">Service Fees</h2>
+            <p class="text-xs text-gray-400">Set the flat fees for special delivery services.</p>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <!-- Price Same Day -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Same Day Fee</span></label>
+                 <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_same_day" type="number" step="1.00" placeholder="50.00" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+              <!-- Price Prime -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Prime Fee</span></label>
+                <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_prime" type="number" step="1.00" placeholder="75.00" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+              <!-- Price Emergency -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Emergency Fee</span></label>
+                <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_emergency" type="number" step="1.00" placeholder="150.00" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+            </div>
+          </div>
+          
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Update Pricing</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
 
-  <script lang="ts">
-  import {defineComponent} from 'vue'
-  import axios from 'axios'
-  import authHeader from '../../services/auth.header'
-  import Header from '../../layouts/headers/headerauth.vue'
-  import SideBar from '../../layouts/sidebar/sidebar.vue'
-  import Footer from '../../layouts/footers/footer.vue'
-  import useValidate from "@vuelidate/core";
-  import {notify} from "@kyvg/vue3-notification";
-
-  export default defineComponent({
-    name: 'OilPrice',
-
-    components: {
-      Header,
-      SideBar,
-      Footer,
-    },
-
-    data() {
-      return {
-        v$: useValidate(),
-        user: null,
-        CreateOilForm: {
-          basicInfo: {
-            price_from_supplier: '',
-            price_for_customer: '',
-            price_for_employee: '',
-            price_same_day: '',
-            price_prime: '',
-            price_emergency: '',
-          },
-        },
-      }
-    },
-
-    created() {
-      this.userStatus()
-    },
-    watch: {
-      $route() {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import axios from 'axios'
+import authHeader from '../../services/auth.header'
+import Footer from '../../layouts/footers/footer.vue'
+import { notify } from "@kyvg/vue3-notification";
 
+export default defineComponent({
+  name: 'OilPrice',
+  components: {
+    Footer,
+  },
+  data() {
+    return {
+      user: null,
+      // --- REFACTORED: Simplified, flat form object ---
+      OilForm: {
+        price_from_supplier: 0,
+        price_for_customer: 0,
+        price_for_employee: 0,
+        price_same_day: 0,
+        price_prime: 0,
+        price_emergency: 0,
       },
-    },
-    mounted() {
-      this.getCurrentPrices()
-    },
-    methods: {
-      userStatus() {
-        let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-        axios({
-          method: 'get',
-          url: path,
-          withCredentials: true,
-          headers: authHeader(),
+    }
+  },
+  created() {
+    this.userStatus();
+  },
+  mounted() {
+    this.getCurrentPrices();
+  },
+  methods: {
+    userStatus() {
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) { this.user = response.data.user; }
         })
-            .then((response: any) => {
-              if (response.data.ok) {
-                this.user = response.data.user;
-              }
-            })
-            .catch(() => {
-              this.user = null
-            })
-      },
+        .catch(() => { this.user = null; });
+    },
     getCurrentPrices() {
-      let path = import.meta.env.VITE_BASE_URL + "/admin/oil/get";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data) {
-
-              this.CreateOilForm.basicInfo.price_from_supplier = response.data.price_from_supplier;
-              this.CreateOilForm.basicInfo.price_for_customer = response.data.price_for_customer;
-              this.CreateOilForm.basicInfo.price_for_employee = response.data.price_for_employee;
-              this.CreateOilForm.basicInfo.price_same_day = response.data.price_same_day;
-              this.CreateOilForm.basicInfo.price_prime = response.data.price_prime;
-              this.CreateOilForm.basicInfo.price_emergency = response.data.price_emergency;
-            }
-          })
+      const path = import.meta.env.VITE_BASE_URL + "/admin/oil/get";
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data) {
+            // --- REFACTORED: Populate the flat form object ---
+            this.OilForm = response.data;
+          }
+        });
     },
-      CreatePricing(payload: {
-        price_from_supplier: string;
-        price_for_customer: string;
-        price_for_employee: string;
-        price_same_day: string;
-        price_prime: string;
-        price_emergency: string;
-
-      }) {
-        let path = import.meta.env.VITE_BASE_URL  + "/admin/oil/create";
-        axios({
-          method: "post",
-          url: path,
-          data: payload,
-          withCredentials: true,
-          headers: authHeader(),
-        })
-            .then((response: any) => {
-              if (response.data.ok) {
-                notify({
-                title: "update",
-                text: "Prices have been updated!",
-                type: "success",
-              });
-                this.$router.push({name: "home"});
-              }
-              if (response.data.error) {
-                this.$router.push("/");
-              }
-            })
-      },
-      onSubmit() {
-        let payload = {
-            price_from_supplier: this.CreateOilForm.basicInfo.price_from_supplier,
-            price_for_customer: this.CreateOilForm.basicInfo.price_for_customer,
-            price_for_employee: this.CreateOilForm.basicInfo.price_for_employee,
-            price_same_day: this.CreateOilForm.basicInfo.price_same_day,
-            price_prime: this.CreateOilForm.basicInfo.price_prime,
-            price_emergency: this.CreateOilForm.basicInfo.price_emergency,
-        };
-        this.CreatePricing(payload);
-      },
+    CreatePricing(payload: any) {
+      const path = import.meta.env.VITE_BASE_URL + "/admin/oil/create";
+      axios.post(path, payload, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) {
+            notify({
+              title: "Success",
+              text: "Prices have been updated!",
+              type: "success",
+            });
+            this.$router.push({ name: "home" });
+          } else {
+            notify({
+              title: "Error",
+              text: response.data.error || "An unknown error occurred.",
+              type: "error",
+            });
+          }
+        });
     },
-  })
-  </script>
-
-  <style scoped>
-
-  </style>
\ No newline at end of file
+    onSubmit() {
+      // --- REFACTORED: Submit the flat form object ---
+      this.CreatePricing(this.OilForm);
+    },
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/admin/promo/create.vue b/src/pages/admin/promo/create.vue
index 1a5d103..3bf2d85 100644
--- a/src/pages/admin/promo/create.vue
+++ b/src/pages/admin/promo/create.vue
@@ -1,9 +1,6 @@
 <template>
-    <Header/>
       <div class="flex">
-        <div class="">
-          <SideBar/>
-        </div>
+    
         <div class=" w-full px-10">
           <div class="text-sm breadcrumbs">
             <ul>
diff --git a/src/pages/admin/promo/edit.vue b/src/pages/admin/promo/edit.vue
index e276039..703b3cb 100644
--- a/src/pages/admin/promo/edit.vue
+++ b/src/pages/admin/promo/edit.vue
@@ -1,9 +1,6 @@
 <template>
-    <Header/>
       <div class="flex">
-        <div class="">
-          <SideBar/>
-        </div>
+  
         <div class=" w-full px-10">
           <div class="text-sm breadcrumbs">
             <ul>
diff --git a/src/pages/admin/promo/promo.vue b/src/pages/admin/promo/promo.vue
index 89f3a22..7fd03a5 100644
--- a/src/pages/admin/promo/promo.vue
+++ b/src/pages/admin/promo/promo.vue
@@ -1,9 +1,6 @@
 <template>
-    <Header />
     <div class="flex">
-        <div class="">
-            <SideBar />
-        </div>
+  
         <div class=" w-full px-10 ">
             <div class="text-sm breadcrumbs  pb-10">
                 <ul>
diff --git a/src/pages/auth/changepassword.vue b/src/pages/auth/changepassword.vue
index 471d71a..e828249 100755
--- a/src/pages/auth/changepassword.vue
+++ b/src/pages/auth/changepassword.vue
@@ -1,6 +1,5 @@
 
 <template>
-  <Header />
   <div class="WrapperPlain">
     <div class="container max-w-3xl mx-auto text-white">
       <div class="mt-5 mb-5 px-10 ">
diff --git a/src/pages/auth/login.vue b/src/pages/auth/login.vue
index c3e8c21..628d25a 100755
--- a/src/pages/auth/login.vue
+++ b/src/pages/auth/login.vue
@@ -1,6 +1,5 @@
 
 <template>
-  <Header />
   <div class="WrapperPlain">
     <div class="max-w-7xl mx-auto  ">
       <div class="mx-auto max-w-lg flex items-center justify-center  mt-4">
diff --git a/src/pages/auth/lostpassword.vue b/src/pages/auth/lostpassword.vue
index 482abad..ccd1c74 100755
--- a/src/pages/auth/lostpassword.vue
+++ b/src/pages/auth/lostpassword.vue
@@ -1,6 +1,5 @@
 
 <template>
-  <Header />
   <div class="WrapperPlain">
     <div class="container max-w-3xl mx-auto text-white">
       <div class="mt-5 mb-5">
diff --git a/src/pages/auth/register.vue b/src/pages/auth/register.vue
index 122a498..0a90442 100755
--- a/src/pages/auth/register.vue
+++ b/src/pages/auth/register.vue
@@ -1,6 +1,5 @@
 
 <template>
-  <Header />
   <div class="WrapperPlain">
     <div class="container mx-auto max-w-lg text-white">
       <div class="mx-auto flex items-center justify-center ">
diff --git a/src/pages/automatic/home.vue b/src/pages/automatic/home.vue
index 5dfc542..e36d4c0 100755
--- a/src/pages/automatic/home.vue
+++ b/src/pages/automatic/home.vue
@@ -1,252 +1,251 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs mb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'delivery' }">
-              Delivery
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Automatic Deliveries</li>
         </ul>
       </div>
-      <div class="flex start text-2xl mb-10">Automatics </div>
-      <div class="mb-10">
-        <div class="">Home Factor</div>
-        <div class="pl-10">1.50 = large oil usage</div>
-        <div class="pl-10"> 1.00 = medium oil usage</div>
-        <div class="pl-10">0.50 = small oil usage</div>
-        <!-- <form class="col-span-12 rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
-          @submit.prevent="get_auto_assignment">
-          <div class="flex-1 mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Delivery Driver </label>
-            <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-              id="customer_state" v-model="CreateOilOrderForm.basicInfo.driver_driver">
-              <option class="text-white" v-for="(driver, index) in truckDriversList" :key="index" :value="driver['id']">
-                {{ driver['employee_first_name'] }} {{ driver['employee_last_name'] }}
-              </option>
-            </select>
+      <h1 class="text-3xl font-bold mt-4">Automatic Deliveries</h1>
+
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Customers on Automatic Delivery</h2>
+          <div class="badge badge-ghost">{{ deliveries.length }} customers found</div>
+        </div>
+        <div class="divider"></div>
+
+        <!-- Data Display -->
+        <div>
+          <!-- DESKTOP VIEW: Sortable Table -->
+          <div class="overflow-x-auto hidden xl:block">
+            <table class="table w-full">
+              <thead>
+                <tr>
+                  <!-- SORTABLE HEADERS -->
+                  <th @click="sortBy('tank_level_percent')" class="cursor-pointer hover:text-white">Tank Level</th>
+                  <th @click="sortBy('days_since_last_fill')" class="cursor-pointer hover:text-white">Days Since Fill</th>
+                  <th @click="sortBy('customer_full_name')" class="cursor-pointer hover:text-white">Name</th>
+                  <th>Address</th>
+                  <th @click="sortBy('house_factor')" class="cursor-pointer hover:text-white">Usage Factor</th>
+                  <th class="text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- Loop over the new 'sortedDeliveries' computed property -->
+                <tr v-for="oil in sortedDeliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                  <td>
+                    <div v-if="oil.last_fill === null" class="text-gray-500">New Auto</div>
+                    <div v-else class="flex items-center gap-3">
+                      <progress class="progress w-24" 
+                        :value="oil.estimated_gallons_left" 
+                        :max="oil.tank_size"
+                        :class="{
+                          'progress-success': getTankLevelPercentage(oil) > 60,
+                          'progress-warning': getTankLevelPercentage(oil) >= 25 && getTankLevelPercentage(oil) <= 60,
+                          'progress-error': getTankLevelPercentage(oil) < 25
+                        }"
+                      ></progress>
+                      <span class="font-mono text-xs">{{ oil.estimated_gallons_left }} / {{ oil.tank_size }} gal</span>
+                    </div>
+                  </td>
+                  <td>{{ oil.days_since_last_fill }} days</td>
+                  <td>
+                    <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                      {{ oil.customer_full_name }}
+                    </router-link>
+                  </td>
+                  <td>{{ oil.customer_address }}, {{ oil.customer_town }}</td>
+                  <td>{{ oil.house_factor }}</td>
+                  <td class="text-right">
+                    <div class="flex items-center justify-end gap-2">
+                     <router-link :to="{ name: 'customerEdit', params: { id: oil.customer_id } }" class="btn btn-sm btn-secondary">Edit Customer</router-link>
+                   <router-link :to="{ name: 'finalizeTicketAuto', params: { id: oil['id'] } }">
+              <button class="btn btn-secondary btn-sm">Finalize</button>
+            </router-link>
+                   <router-link :to="{ name: 'TicketAuto', params: { id: oil['id'] } }">
+              <button class="btn btn-success btn-sm">
+                Print Ticket
+              </button>
+            </router-link>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-          <button class="btn btn-secondary btn-sm">
-            Send for delivery
-          </button>
-        </form> -->
-      </div>
-      <div class="overflow-x-auto bg-neutral">
 
-        <table class="table">
-          <!-- head -->
-          <thead>
-            <tr>
-              <th>Account #</th>
-              <th>Gallons Left</th>
-              <th>Last Fill</th>
-              <th>Days</th>
-              <th>Name</th>
-              <th>Address</th>
-              <th>Town</th>
-              <th>Home Factor</th>
-              <th>Tank Size</th>
-            </tr>
-          </thead>
-          <tbody>
-            <!-- row 1 -->
-            <tr v-for="oil in deliveries" :key="oil['id']">
-              <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
-              <td>
-                {{ oil['customer_id'] }}
-              </td>
+          <!-- MOBILE VIEW: Cards -->
+          <div class="xl:hidden space-y-4">
+            <div v-for="oil in sortedDeliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+              <div class="card-body p-4">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h2 class="card-title text-base">{{ oil.customer_full_name }}</h2>
+                    <p class="text-xs text-gray-400">{{ oil.customer_address }}, {{ oil.customer_town }}</p>
+                  </div>
+                  <div class="text-right">
+                    <div class="font-bold">{{ oil.days_since_last_fill }}</div>
+                    <div class="text-xs text-gray-400">days ago</div>
+                  </div>
+                </div>
+
+                <div class="mt-4">
+                  <label class="label p-0 mb-1"><span class="label-text">Tank Level</span></label>
+                  <div v-if="oil.last_fill === null" class="text-gray-500 text-sm">New Auto Customer</div>
+                  <div v-else>
+                    <progress class="progress w-full" 
+                      :value="oil.estimated_gallons_left" 
+                      :max="oil.tank_size"
+                      :class="{
+                        'progress-success': getTankLevelPercentage(oil) > 60,
+                        'progress-warning': getTankLevelPercentage(oil) >= 25 && getTankLevelPercentage(oil) <= 60,
+                        'progress-error': getTankLevelPercentage(oil) < 25
+                      }"
+                    ></progress>
+                    <div class="text-xs text-gray-400 text-right">{{ oil.estimated_gallons_left }} / {{ oil.tank_size }} gal estimated</div>
+                  </div>
+                </div>
+                
+                <div class="card-actions justify-end flex-wrap gap-2 mt-4">
+                  <router-link :to="{ name: 'customerEdit', params: { id: oil.customer_id } }" class="btn btn-sm btn-secondary">Edit Customer</router-link>
+                   <router-link :to="{ name: 'finalizeTicketAuto', params: { id: oil['id'] } }">
+              <button class="btn btn-secondary btn-sm">Finalize</button>
             </router-link>
-              <td>
-           
-                <div class="" v-if="oil['last_fill'] === null"></div>
-                <div class="" v-else> {{ oil['estimated_gallons_left'] }}</div>
-              </td>
-             <td> 
-              <div class="" v-if="oil['last_fill'] === null">New Auto</div>
-              <div class="" v-else> {{ oil['last_fill'] }}</div>
-             </td>
-             <td>{{ oil['days_since_last_fill'] }}</td>
-             <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
-              <td>{{ oil['customer_full_name'] }}</td>
+                   <router-link :to="{ name: 'TicketAuto', params: { id: oil['id'] } }">
+              <button class="btn btn-success btn-sm">
+                Print Ticket
+              </button>
             </router-link>
-              <td>{{ oil['customer_address'] }}</td>
-              <td>{{ oil['customer_town'] }}</td>
-       
-              <td>{{ oil['house_factor'] }}</td>
-              <td>{{ oil['tank_size'] }}</td>
-              <td class="flex gap-5">
-                <router-link :to="{ name: 'customerEdit', params: { id: oil['customer_id'] } }">
-                  <button class="btn btn-secondary btn-sm">
-                    Edit Customer
-                  </button>
-                </router-link>
-                <router-link :to="{ name: 'finalizeTicketAuto', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">Finalize</button>
-                </router-link>
-                <router-link :to="{ name: 'TicketAuto', params: { id: oil['id'] } }">
-                  <button class="btn btn-success btn-sm">
-                    Print Ticket
-                  </button>
-                </router-link>
-              </td>
-
-
-            </tr>
-          </tbody>
-        </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
   <Footer />
 </template>
-
-
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
-import { notify } from "@kyvg/vue3-notification";
 
+// Define a type for the delivery object for better code quality
+interface AutoDelivery {
+  id: number;
+  customer_id: number;
+  last_fill: string | null;
+  estimated_gallons_left: number;
+  days_since_last_fill: number;
+  customer_full_name: string;
+  customer_address: string;
+  customer_town: string;
+  house_factor: number;
+  tank_size: number;
+}
 
 export default defineComponent({
   name: 'AutomaticHome',
-
   components: {
-    Header,
-    SideBar,
     Footer,
   },
-
   data() {
     return {
-      token: null,
       user: null,
-      deliveries: [],
-      checkedMaterials: [],
-      truckDriversList: [],
-      CreateOilOrderForm: {
-        basicInfo: {
-          driver_driver: '',
-        },
-      },
+      deliveries: [] as AutoDelivery[],
+      // --- NEW: Data properties for sorting ---
+      sortKey: 'estimated_gallons_left' as keyof AutoDelivery | 'tank_level_percent',
+      sortAsc: true,
     }
   },
+  computed: {
+    // --- NEW: Computed property to handle sorting ---
+    sortedDeliveries(): AutoDelivery[] {
+      // Create a copy to avoid mutating the original array
+      const sorted = [...this.deliveries];
 
-  created() {
+      sorted.sort((a, b) => {
+        let valA: any;
+        let valB: any;
 
-    this.userStatus()
-    this.getDriversList()
-    this.get_oil_orders()
+        // Special case for our calculated percentage
+        if (this.sortKey === 'tank_level_percent') {
+          valA = this.getTankLevelPercentage(a);
+          valB = this.getTankLevelPercentage(b);
+        } else {
+          valA = a[this.sortKey as keyof AutoDelivery];
+          valB = b[this.sortKey as keyof AutoDelivery];
+        }
+
+        // Handle nulls or different types if necessary
+        if (valA === null) return 1;
+        if (valB === null) return -1;
+        
+        // Comparison logic
+        if (valA < valB) {
+          return this.sortAsc ? -1 : 1;
+        }
+        if (valA > valB) {
+          return this.sortAsc ? 1 : -1;
+        }
+        return 0;
+      });
+
+      return sorted;
+    }
   },
-  mounted() {
-
-    this.get_oil_orders()
-
+  created() {
+    this.userStatus();
+    this.get_oil_orders();
   },
   methods: {
+    // --- NEW: Method to handle sorting ---
+    sortBy(key: keyof AutoDelivery | 'tank_level_percent') {
+      if (this.sortKey === key) {
+        // If clicking the same key, reverse the direction
+        this.sortAsc = !this.sortAsc;
+      } else {
+        // If clicking a new key, set it and default to ascending
+        this.sortKey = key;
+        this.sortAsc = true;
+      }
+    },
+    // --- NEW: Helper method for percentage calculation ---
+    getTankLevelPercentage(oil: AutoDelivery): number {
+      if (!oil.tank_size || oil.tank_size === 0 || oil.last_fill === null) {
+        return 0; // Return 0 if tank size is invalid or it's a new customer
+      }
+      return (oil.estimated_gallons_left / oil.tank_size) * 100;
+    },
     userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
           if (response.data.ok) {
             this.user = response.data.user;
           }
         })
         .catch(() => {
-          this.user = null
-        })
-    },
-    get_oil_orders() {
-
-      let path = import.meta.env.VITE_AUTO_URL + '/delivery/all/customers';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.deliveries = response.data
-      })
-    },
-
-    getDriversList() {
-      let path = import.meta.env.VITE_BASE_URL + "/employee/drivers";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          this.truckDriversList = response.data;
-        })
-        .catch(() => {
+          this.user = null;
         });
     },
-
-
-    get_auto_assignment() {
-      let path = import.meta.env.VITE_AUTO_URL + '/delivery/create';
-
-      const selectedValues: any[] = [];
-      for (const id in this.checkedMaterials) {
-        if (this.checkedMaterials[id]) {
-          selectedValues.push(this.checkedMaterials[id]);
-        }
-      }
-      let payload = {
-        driver_employee_id: this.CreateOilOrderForm.basicInfo.driver_driver,
-        values: selectedValues
-      }
-      axios({
-        method: 'post',
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      }).then((response: any) => {
-
-        if (response.data.count > 0) {
-          notify({
-            title: "Success",
-            text: "Added automatics to delivery",
-            type: "success",
-          });
-
-        } else {
-          notify({
-            title: "Failure",
-            text: "Incorrect driver or no auto selection.",
-            type: "error",
-          });
-        }
-
-        this.get_oil_orders()
-      })
+    get_oil_orders() {
+      const path = import.meta.env.VITE_AUTO_URL + '/delivery/all/customers';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          this.deliveries = response.data;
+        })
+        .catch((error: any) => {
+          console.error("Failed to fetch automatic deliveries:", error);
+        });
     },
-
-
   },
 })
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/pages/card/addcard.vue b/src/pages/card/addcard.vue
index 8abfad2..e619719 100755
--- a/src/pages/card/addcard.vue
+++ b/src/pages/card/addcard.vue
@@ -1,217 +1,122 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs -->
       <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'customer' }">
-              Customers
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          <li v-if="customer.id"><router-link :to="{ name: 'customerProfile', params: { id: customer.id } }">Profile</router-link></li>
+          <li>Add Credit Card</li>
         </ul>
       </div>
 
-
-      <div class="grid grid-cols-1 rounded-md p-6 ">
-
-
-        <div class="grid grid-cols-12">
-          <div class="col-span-12 text-center mb-10 text-2xl">Add a Credit Card</div>
-
-          <div class="col-span-6">
-            <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
-              @submit.prevent="onSubmit">
-
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Main Card</label>
-                <input v-model="CreateCardForm.basicInfo.main_card" class="checkbox" id="fill" type="checkbox" />
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Name on Card</label>
-                <input v-model="CreateCardForm.basicInfo.card_name"
-                  class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                  placeholder="Name on Card" />
-                <span v-if="v$.CreateCardForm.basicInfo.card_name.$error" class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.card_name.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Card Number</label>
-                <input v-model="CreateCardForm.basicInfo.card_number"
-                  class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                  placeholder="Card Number" />
-                <span v-if="v$.CreateCardForm.basicInfo.card_number.$error" class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.card_number.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Expiration Month</label>
-                <select v-model="CreateCardForm.basicInfo.expiration_month"
-                  class="input input-bordered input-sm w-full max-w-xs" id="Month">
-                  <option>01</option>
-                  <option>02</option>
-                  <option>03</option>
-                  <option>04</option>
-                  <option>05</option>
-                  <option>06</option>
-                  <option>07</option>
-                  <option>08</option>
-                  <option>09</option>
-                  <option>10</option>
-                  <option>11</option>
-                  <option>12</option>
-                </select>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Expiration Year</label>
-                <select v-model="CreateCardForm.basicInfo.expiration_year"
-                  class="input input-bordered input-sm w-full max-w-xs" id="Month">
-                  <option>2025</option>
-                  <option>2026</option>
-                  <option>2027</option>
-                  <option>2028</option>
-                  <option>2029</option>
-                  <option>2030</option>
-                  <option>2031</option>
-                  <option>2032</option>
-
-                </select>
-
-                <span v-if="v$.CreateCardForm.basicInfo.expiration_year.$error" class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.expiration_year.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Type of Card</label>
-                <select v-model="CreateCardForm.basicInfo.type_of_card"
-                  class="input input-bordered input-sm w-full max-w-xs" id="Month">
-                  <option>Visa</option>
-                  <option>MasterCard</option>
-                  <option>Discover</option>
-                  <option>American Express</option>
-                </select>
-
-                <span v-if="v$.CreateCardForm.basicInfo.type_of_card.$error" class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.type_of_card.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Security Number</label>
-                <input v-model="CreateCardForm.basicInfo.security_number"
-                  class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                  placeholder="Back of card" />
-                <span v-if="v$.CreateCardForm.basicInfo.security_number.$error" class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.security_number.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Zip Code</label>
-                <input v-model="CreateCardForm.basicInfo.zip_code"
-                  class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                  placeholder="Zip Code" />
-              </div>
-
-
-
-              <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-                <button class="btn btn-sm btn-secondary">
-                  Save Credit Card
-                </button>
-              </div>
-            </form>
+      <!-- TOP SECTION: Customer Info -->
+      <div class="my-6">
+        <div class="bg-neutral rounded-lg p-5">
+          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4">
+            <div>
+              <div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
+              <div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
+            </div>
+            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm mt-2 sm:mt-0">
+              View Profile
+            </router-link>
           </div>
-
-
-          <div class="col-span-6">
-            <div class="col-span-12 font-bold flex pb-5 ">{{ customer.account_number }}</div>
-            <div class="col-span-12 font-bold flex">
-              {{ customer.customer_first_name }}
-              {{ customer.customer_last_name }}
-            </div>
-            <div class="col-span-12 font-bold flex">
-
-              {{ customer.customer_address }}
-              <div v-if="customer.customer_apt != 'None'">
-                {{ customer.customer_apt }}
-              </div>
-
-            </div>
-            <div class="col-span-12 font-bold flex">
-              <div class="pr-2">
-                {{ customer.customer_town }},
-              </div>
-              <div class="pr-2">
-
-                <div v-if="customer.customer_state == 0">Massachusetts</div>
-                <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                <div v-else-if="customer.customer_state == 3">Maine</div>
-                <div v-else-if="customer.customer_state == 4">Vermont</div>
-                <div v-else-if="customer.customer_state == 5">Maine</div>
-                <div v-else-if="customer.customer_state == 6">New York</div>
-                <div v-else>Unknown state</div>
-              </div>
-              <div class="pr-2">
-                {{ customer.customer_zip }}
-              </div>
-            </div>
-
-            <div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
-              {{ customer.customer_apt }}
-            </div>
-            <div class="col-span-12 font-bold flex">
-              <div v-if="customer.customer_home_type == 0">Residential</div>
-              <div v-else-if="customer.customer_home_type == 1">apartment</div>
-              <div v-else-if="customer.customer_home_type == 2">condo</div>
-              <div v-else-if="customer.customer_home_type == 3">commercial</div>
-              <div v-else-if="customer.customer_home_type == 4">business</div>
-              <div v-else-if="customer.customer_home_type == 5">construction</div>
-              <div v-else-if="customer.customer_home_type == 6">container</div>
-            </div>
-            <div class="col-span-12 font-bold flex">
-              {{ customer.customer_phone_number }}
-            </div>
+          <div>
+            <div>{{ customer.customer_address }}</div>
+            <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
+            <div>{{ customer.customer_town }}, {{ customer.customer_state }} {{ customer.customer_zip }}</div>
           </div>
-
-
-
-
-
-
-
-
         </div>
       </div>
+
+      <!-- BOTTOM SECTION: Add Card Form -->
+      <div class="bg-neutral rounded-lg p-6">
+        <h2 class="text-2xl font-bold mb-4">Add a New Credit Card</h2>
+        <form @submit.prevent="onSubmit" class="space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            
+            <!-- Name on Card -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Name on Card</span></label>
+              <input v-model="CardForm.card_name" type="text" placeholder="John M. Doe" class="input input-bordered input-sm w-full" />
+              <span v-if="v$.CardForm.card_name.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Card Number -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Card Number</span></label>
+              <input v-model="CardForm.card_number" type="text" placeholder="4242..." class="input input-bordered input-sm w-full" />
+              <span v-if="v$.CardForm.card_number.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Expiration -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Expiration</span></label>
+              <div class="flex gap-2">
+                <select v-model="CardForm.expiration_month" class="select select-bordered select-sm w-full">
+                  <option disabled value="">MM</option>
+                  <option v-for="m in 12" :key="m" :value="String(m).padStart(2, '0')">{{ String(m).padStart(2, '0') }}</option>
+                </select>
+                <select v-model="CardForm.expiration_year" class="select select-bordered select-sm w-full">
+                  <option disabled value="">YYYY</option>
+                  <option v-for="y in 10" :key="y" :value="new Date().getFullYear() + y - 1">{{ new Date().getFullYear() + y - 1 }}</option>
+                </select>
+              </div>
+              <span v-if="v$.CardForm.expiration_month.$error || v$.CardForm.expiration_year.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Security Number (CVV) -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">CVV</span></label>
+              <input v-model="CardForm.security_number" type="text" placeholder="123" class="input input-bordered input-sm w-full" />
+              <span v-if="v$.CardForm.security_number.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Card Type -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Card Type</span></label>
+              <select v-model="CardForm.type_of_card" class="select select-bordered select-sm w-full">
+                <option disabled value="">Select Type</option>
+                <option>Visa</option>
+                <option>MasterCard</option>
+                <option>Discover</option>
+                <option>American Express</option>
+              </select>
+              <span v-if="v$.CardForm.type_of_card.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Billing Zip Code -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Billing Zip Code</span></label>
+              <input v-model="CardForm.zip_code" type="text" placeholder="01234" class="input input-bordered input-sm w-full" />
+            </div>
+
+            <!-- Main Card Checkbox -->
+            <div class="form-control md:col-span-2">
+              <label class="label cursor-pointer justify-start gap-4">
+                <span class="label-text font-bold">Set as Main Card for this customer</span>
+                <input v-model="CardForm.main_card" type="checkbox" class="checkbox checkbox-sm" />
+              </label>
+            </div>
+          </div>
+          
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Save Credit Card</button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
-
-
   <Footer />
 </template>
 
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
 import { notify } from "@kyvg/vue3-notification"
@@ -219,151 +124,80 @@ import { minLength, required } from "@vuelidate/validators";
 
 export default defineComponent({
   name: 'AddCardCreate',
-
   components: {
-    Header,
-    SideBar,
     Footer,
   },
-
   data() {
     return {
       v$: useValidate(),
       user: null,
-      customer: {
-        id: 0,
-        user_id: 0,
-        customer_first_name: '',
-        customer_last_name: '',
-        customer_town: '',
-        customer_address: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_apt: '',
-        customer_home_type: 0,
-        customer_phone_number: '',
-        account_number: '',
-      },
-      CreateCardForm: {
-        basicInfo: {
-          card_name: '',
-          expiration_month: '',
-          expiration_year: '',
-          type_of_card: '',
-          security_number: '',
-          card_number: '',
-          zip_code: '',
-          main_card: false,
-        },
+      customer: {} as any,
+      // --- REFACTORED: Simplified, flat form object ---
+      CardForm: {
+        card_name: '',
+        expiration_month: '',
+        expiration_year: '',
+        type_of_card: '',
+        security_number: '',
+        card_number: '',
+        zip_code: '',
+        main_card: false,
       },
     }
   },
-
   validations() {
     return {
-      CreateCardForm: {
-        basicInfo: {
-          card_name: { required, minLength: minLength(1) },
-          expiration_month: { required, minLength: minLength(1) },
-          expiration_year: { required, minLength: minLength(1) },
-          security_number: { required, minLength: minLength(1) },
-          type_of_card: { required, minLength: minLength(1) },
-          card_number: { required, minLength: minLength(1) },
-        },
+      // --- REFACTORED: Validation points to the flat form object ---
+      CardForm: {
+        card_name: { required, minLength: minLength(1) },
+        expiration_month: { required },
+        expiration_year: { required },
+        security_number: { required, minLength: minLength(1) },
+        type_of_card: { required },
+        card_number: { required, minLength: minLength(1) },
       },
     };
   },
   created() {
-    this.userStatus()
-  },
-  watch: {
-    $route() {
-      this.getCustomer(this.$route.params.id);
-    },
-  },
-  mounted() {
-    this.getCustomer(this.$route.params.id)
+    this.userStatus();
+    this.getCustomer(this.$route.params.id);
   },
   methods: {
-
     userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
-          if (response.data.ok) {
-            this.user = response.data.user;
-          }
-        })
-        .catch(() => {
-          this.user = null
+          if (response.data.ok) { this.user = response.data.user; }
         })
+        .catch(() => { this.user = null; });
     },
     getCustomer(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
-          this.customer = response.data;
-        })
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/${user_id}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => { this.customer = response.data; })
         .catch(() => {
-          notify({
-            title: "Error",
-            text: "Could not find customer",
-            type: "error",
-          });
+          notify({ title: "Error", text: "Could not find customer", type: "error" });
         });
     },
-
-    CreateCard(payload: {
-      card_name: string;
-      expiration_month: string;
-      expiration_year: string;
-      type_of_card: string;
-      security_number: string;
-      zip_code: string;
-      card_number: string;
-      main_card: boolean;
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/payment/card/create/" + this.customer.id;
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+    CreateCard(payload: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/payment/card/create/${this.customer.id}`;
+      axios.post(path, payload, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
           if (response.data.ok) {
             this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
+          } else {
+            notify({ title: "Error", text: response.data.error || "Failed to create card.", type: "error" });
           }
-          if (response.data.error) {
-            this.$router.push("/");
-          }
-        })
+        });
     },
     onSubmit() {
-      let payload = {
-        card_name: this.CreateCardForm.basicInfo.card_name,
-        card_number: this.CreateCardForm.basicInfo.card_number,
-        expiration_month: this.CreateCardForm.basicInfo.expiration_month,
-        expiration_year: this.CreateCardForm.basicInfo.expiration_year,
-        type_of_card: this.CreateCardForm.basicInfo.type_of_card,
-        security_number: this.CreateCardForm.basicInfo.security_number,
-        main_card: this.CreateCardForm.basicInfo.main_card,
-        zip_code: this.CreateCardForm.basicInfo.zip_code,
-      };
-      this.CreateCard(payload);
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        this.CreateCard(this.CardForm);
+      } else {
+        notify({ title: "Validation Error", text: "Please fill out all required fields.", type: "error" });
+      }
     },
   },
-})
-</script>
-
-<style scoped></style>
\ No newline at end of file
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/card/editcard.vue b/src/pages/card/editcard.vue
index c2dad28..35c6a0b 100755
--- a/src/pages/card/editcard.vue
+++ b/src/pages/card/editcard.vue
@@ -1,354 +1,240 @@
 <template>
-    <Header/>
-      <div class="flex">
-        <div class="">
-          <SideBar/>
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          <li v-if="customer.id"><router-link :to="{ name: 'customerProfile', params: { id: customer.id } }">Profile</router-link></li>
+          <li>Edit Credit Card</li>
+        </ul>
+      </div>
+
+      <!-- TOP SECTION: Customer and Card Info -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 my-6">
+        <!-- Customer Info Card -->
+        <div class="bg-neutral rounded-lg p-5">
+          <div class="flex justify-between items-center mb-4">
+            <div>
+              <div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
+              <div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
+            </div>
+            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm">
+              View Profile
+            </router-link>
+          </div>
+          <div>
+            <div>{{ customer.customer_address }}</div>
+            <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
+            <div>{{ customer.customer_town }}, {{ customer.customer_state }} {{ customer.customer_zip }}</div>
+          </div>
         </div>
-        <div class=" w-full px-10">
-          <div class="text-sm breadcrumbs">
-            <ul>
-                <li>
-                  <router-link :to="{ name: 'home' }">
-                    Home
-                  </router-link>
-                </li>
-                <li>
-                  <router-link :to="{ name: 'customer' }">
-                    Customers
-                  </router-link>
-                </li>
-            </ul>
-          </div>
-
-
-          <div class="grid grid-cols-1 rounded-md p-6 ">
-            <div class="text-[24px]">
-              Credit Card Customer:  {{ customer.customer_first_name }}
-            </div>
-            <div class="text-[20px]">
-                Card Id: {{card.id}}
-            </div>
-            <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full"
-                  enctype="multipart/form-data"
-                  @submit.prevent="onSubmit">
-
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Main Card</label>
-                <input v-model="CreateCardForm.basicInfo.main_card"
-                       class="checkbox checkbox-xs"
-                       id="fill"
-                       type="checkbox"/>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Name on Card</label>
-                <input v-model="CreateCardForm.basicInfo.card_name"
-                       class="input input-bordered input-sm w-full max-w-xs"
-                       id="title" type="text" placeholder="Name on Card"/>
-                <span v-if="v$.CreateCardForm.basicInfo.card_name.$error"
-                       class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.card_name.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Card Number</label>
-                <input v-model="CreateCardForm.basicInfo.card_number"
-                       class="input input-bordered input-sm w-full max-w-xs"
-                       id="title" type="text" placeholder="Card Number"/>
-                <span v-if="v$.CreateCardForm.basicInfo.card_number.$error"
-                       class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.card_number.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Expiration Month</label>
-                <select
-                      v-model="CreateCardForm.basicInfo.expiration_month"
-                      class="input input-bordered input-sm w-full max-w-xs"
-                      id="Month"
-                       >
-                      <option>1</option>
-                      <option>2</option>
-                      <option>3</option>
-                      <option>4</option>
-                      <option>5</option>
-                      <option>6</option>
-                      <option>7</option>
-                      <option>8</option>
-                      <option>9</option>
-                      <option>10</option>
-                      <option>11</option>
-                      <option>12</option>
-                  </select>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Expiration Year</label>
-                <select
-                      v-model="CreateCardForm.basicInfo.expiration_year"
-                      class="input input-bordered input-sm w-full max-w-xs"
-                      id="Month"
-                       >
-                  <option>2025</option>
-                  <option>2026</option>
-                  <option>2027</option>
-                  <option>2028</option>
-                  <option>2029</option>
-                  <option>2030</option>
-                  <option>2031</option>
-                  <option>2032</option>
-                </select>
-                <span v-if="v$.CreateCardForm.basicInfo.expiration_year.$error"
-                      class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.expiration_year.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Type of Card</label>
-                <select
-                      v-model="CreateCardForm.basicInfo.type_of_card"
-                      class="input input-bordered input-sm w-full max-w-xs"
-                      id="Month"
-                       >
-                      <option>Visa</option>
-                      <option>MasterCard</option>
-                      <option>Discover</option>
-                      <option>American Express</option>
-                  </select>
-                <span v-if="v$.CreateCardForm.basicInfo.type_of_card.$error"
-                      class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.type_of_card.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Zip Code</label>
-                <input v-model="CreateCardForm.basicInfo.zip_code"
-                  class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                  placeholder="Zip Code" />
-              </div>
-              
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Security Number</label>
-                <input v-model="CreateCardForm.basicInfo.security_number"
-                       class="input input-bordered input-sm w-full max-w-xs"
-                       id="title" type="text" placeholder="Back of card"/>
-                <span v-if="v$.CreateCardForm.basicInfo.security_number.$error"
-                       class="text-red-600 text-center">
-                  {{ v$.CreateCardForm.basicInfo.security_number.$errors[0].$message }}
-                </span>
-              </div>
-
-              <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-                <button class="btn">
-                  Edit  Card
-                </button>
-              </div>
-            </form>
+
+        <!-- Card Being Edited Info Card -->
+        <div class="bg-neutral rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-4">Editing Card</h3>
+          <div v-if="card.id" class="space-y-2">
+            <p><strong class="font-semibold">Card Type:</strong> {{ card.type_of_card }}</p>
+            <p><strong class="font-semibold">Card Number:</strong> **** **** **** {{ card.last_four_digits }}</p>
+            <p><strong class="font-semibold">Card ID:</strong> {{ card.id }}</p>
           </div>
+           <div v-else class="text-gray-400">Loading card details...</div>
         </div>
       </div>
 
-    <Footer/>
-  </template>
-  
-  
-  <script lang="ts">
-  import {defineComponent} from 'vue'
-  import axios from 'axios'
-  import authHeader from '../../services/auth.header'
-  import Header from '../../layouts/headers/headerauth.vue'
-  import SideBar from '../../layouts/sidebar/sidebar.vue'
-  import Footer from '../../layouts/footers/footer.vue'
-  import useValidate from "@vuelidate/core";
- 
-  import {minLength, required} from "@vuelidate/validators";
-  
-  export default defineComponent({
-    name: 'EditCard',
-  
-    components: {
-      Header,
-      SideBar,
-      Footer,
-    },
-  
-    data() {
-      return {
-        v$: useValidate(),
-        user: {
-          id: '',
-        },
-        customer: {
-        id: 0,
-        user_id: 0,
-        customer_first_name: '',
-        customer_last_name: '',
-        customer_town: '',
-        customer_address: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_apt: '',
-        customer_home_type: 0,
-        customer_phone_number: '',
-        account_number: '',
+      <!-- BOTTOM SECTION: Edit Card Form -->
+      <div class="bg-neutral rounded-lg p-6">
+        <h2 class="text-2xl font-bold mb-4">Update Card Details</h2>
+        <form @submit.prevent="onSubmit" class="space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            
+            <!-- Name on Card -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Name on Card</span></label>
+              <input v-model="CardForm.name_on_card" type="text" placeholder="John M Doe" class="input input-bordered input-sm w-full" />
+              <span v-if="v$.CardForm.name_on_card.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Card Number -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Card Number</span></label>
+              <input v-model="CardForm.card_number" type="text" placeholder="4242..." class="input input-bordered input-sm w-full" />
+              <span v-if="v$.CardForm.card_number.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Expiration -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Expiration</span></label>
+              <div class="flex gap-2">
+                <select v-model="CardForm.expiration_month" class="select select-bordered select-sm w-full">
+                  <option disabled value="">MM</option>
+                  <option v-for="m in 12" :key="m" :value="String(m).padStart(2, '0')">{{ String(m).padStart(2, '0') }}</option>
+                </select>
+                <select v-model="CardForm.expiration_year" class="select select-bordered select-sm w-full">
+                  <option disabled value="">YYYY</option>
+                  <option v-for="y in 10" :key="y" :value="new Date().getFullYear() + y - 1">{{ new Date().getFullYear() + y - 1 }}</option>
+                </select>
+              </div>
+              <span v-if="v$.CardForm.expiration_month.$error || v$.CardForm.expiration_year.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Security Number (CVV) -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">CVV</span></label>
+              <input v-model="CardForm.security_number" type="text" placeholder="123" class="input input-bordered input-sm w-full" />
+              <span v-if="v$.CardForm.security_number.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Card Type -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Card Type</span></label>
+              <select v-model="CardForm.type_of_card" class="select select-bordered select-sm w-full">
+                <option disabled value="">Select Type</option>
+                <option>Visa</option>
+                <option>MasterCard</option>
+                <option>Discover</option>
+                <option>American Express</option>
+              </select>
+              <span v-if="v$.CardForm.type_of_card.$error" class="text-red-500 text-xs mt-1">Required.</span>
+            </div>
+
+            <!-- Billing Zip Code -->
+            <div class="form-control">
+              <label class="label"><span class="label-text font-bold">Billing Zip Code</span></label>
+              <input v-model="CardForm.zip_code" type="text" placeholder="01234" class="input input-bordered input-sm w-full" />
+            </div>
+
+            <!-- Main Card Checkbox -->
+            <div class="form-control md:col-span-2">
+              <label class="label cursor-pointer justify-start gap-4">
+                <span class="label-text font-bold">Set as Main Card</span>
+                <input v-model="CardForm.main_card" type="checkbox" class="checkbox checkbox-sm" />
+              </label>
+            </div>
+          </div>
+          
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import axios from 'axios'
+import authHeader from '../../services/auth.header'
+import Footer from '../../layouts/footers/footer.vue'
+import useValidate from "@vuelidate/core";
+import { minLength, required } from "@vuelidate/validators";
+
+export default defineComponent({
+  name: 'EditCard',
+  components: {
+    Footer,
+  },
+  data() {
+    return {
+      v$: useValidate(),
+      user: null as any,
+      customer: {} as any,
+      card: {} as any, // To store original card details for display
+      // --- REFACTORED: Simplified, flat form object ---
+      CardForm: {
+        name_on_card: '',
+        expiration_month: '',
+        expiration_year: '',
+        type_of_card: '',
+        security_number: '',
+        card_number: '',
+        zip_code: '',
+        main_card: false,
       },
-        card: {
-          id: '',
-          card_name: '',
-          expiration_month: '',
-          expiration_year: '',
-          type_of_card: '',
-          security_number: '',
-          main_card: '',
-          zip_code: '',
-          user_id: '',
-        },
-    
-        card_id: null,
-        customer_id: null,
-         CreateCardForm: {
-          basicInfo: {
-            card_name: '',
-            expiration_month: '',
-            expiration_year: '',
-            type_of_card: '',
-            security_number: '',
-            card_number: '',
-            zip_code: '',
-            main_card: false,
-          },
-        },
+    }
+  },
+  validations() {
+    return {
+      // --- REFACTORED: Validation points to the flat form object ---
+      CardForm: {
+        name_on_card: { required, minLength: minLength(1) },
+        expiration_month: { required },
+        expiration_year: { required },
+        security_number: { required, minLength: minLength(1) },
+        type_of_card: { required },
+        card_number: { required, minLength: minLength(1) },
+      },
+    };
+  },
+  created() {
+    this.userStatus();
+    this.getCard(this.$route.params.id);
+  },
+  methods: {
+    userStatus() {
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) { this.user = response.data.user; }
+        })
+        .catch(() => { this.user = null; });
+    },
+    getCustomer(userid: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/${userid}`;
+      axios.get(path, { headers: authHeader() })
+        .then((response: any) => { this.customer = response.data; });
+    },
+    getCard(card_id: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/payment/card/${card_id}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          this.card = response.data; // Store original details for display
+          // Populate the flat form object for editing
+          this.CardForm.name_on_card = response.data.name_on_card;
+          this.CardForm.expiration_month = response.data.expiration_month;
+          this.CardForm.expiration_year = response.data.expiration_year;
+          this.CardForm.type_of_card = response.data.type_of_card;
+          this.CardForm.security_number = response.data.security_number;
+          this.CardForm.main_card = response.data.main_card;
+          this.CardForm.card_number = response.data.card_number;
+          this.CardForm.zip_code = response.data.zip_code;
+          
+          if (response.data.user_id) {
+            this.getCustomer(response.data.user_id);
+          }
+        });
+    },
+    editCard(payload: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/payment/card/edit/${this.$route.params.id}`;
+      // The backend expects 'card_name', but our form now uses 'name_on_card'.
+      // We must create a new payload that matches the backend's expectation.
+      const backendPayload = {
+        ...payload,
+        card_name: payload.name_on_card,
+      };
+      delete backendPayload.name_on_card; // Clean up the object
+
+      axios.put(path, backendPayload, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
+          } else {
+            console.error("Failed to edit card:", response.data.error);
+          }
+        });
+    },
+    onSubmit() {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        this.editCard(this.CardForm);
+      } else {
+        console.log("Form validation failed.");
       }
     },
-    validations() {
-      return {
-        CreateCardForm: {
-          basicInfo: {
-            card_name: {required, minLength: minLength(1)},
-            expiration_month: {required, minLength: minLength(1)},
-            expiration_year: {required, minLength: minLength(1)},
-            security_number: {required, minLength: minLength(1)},
-            type_of_card: {required, minLength: minLength(1)},
-            card_number: {required, minLength: minLength(1)},
-          },
-        },
-      };
-    },
-    created() {
-      this.userStatus()
-    },
-    watch: {
-      $route() {
-        this.getCard(this.$route.params.id);
-      },
-    },
-    mounted() {
-      this.getCard(this.$route.params.id)
-    },
-    methods: {
-      userStatus() {
-        let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-        axios({
-          method: 'get',
-          url: path,
-          withCredentials: true,
-          headers: authHeader(),
-        })
-            .then((response: any) => {
-              if (response.data.ok) {
-                this.user = response.data.user;
-                this.user.id = response.data.user.id;
-              }
-            })
-            .catch(() => {
-              this.user.id = '';
-            })
-      },
-      getCustomer(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customer = response.data
-      })
-    },
-  
-      getCard (card_id:any) {
-        let path = import.meta.env.VITE_BASE_URL + "/payment/card/" + card_id ;
-        axios({
-          method: "get",
-          url: path,
-          withCredentials: true,
-          headers: authHeader(),
-        })
-          .then((response: any) => {
-           
-              this.CreateCardForm.basicInfo.card_name= response.data.name_on_card;
-              this.CreateCardForm.basicInfo.expiration_month= response.data.expiration_month;
-              this.CreateCardForm.basicInfo.expiration_year= response.data.expiration_year;
-              this.CreateCardForm.basicInfo.type_of_card= response.data.type_of_card;
-              this.CreateCardForm.basicInfo.security_number= response.data.security_number;
-              this.CreateCardForm.basicInfo.main_card= response.data.main_card;
-              this.CreateCardForm.basicInfo.card_number= response.data.card_number;
-              this.CreateCardForm.basicInfo.zip_code= response.data.zip_code;
-            console.log(response.data)
-              this.user.id = response.data.user_id
-              this.card=response.data
-              this.getCustomer(response.data.user_id)
-          
-          })
-      },
-      editCard(payload: {
-      
-        card_name: string;
-        expiration_month: string;
-        expiration_year: string;
-        type_of_card: string;
-        security_number: string;
-        zip_code: string;
-        main_card: boolean;
-      }) {
-     
-        let path = import.meta.env.VITE_BASE_URL + "/payment/card/edit/" + this.$route.params.id ;
-        axios({
-          method: "put",
-          url: path,
-          data: payload,
-          withCredentials: true,
-          headers: authHeader(),
-        })
-            .then((response: any) => {
-              if (response.data.ok) {
-                this.$router.push({name: "customerProfile", params: { id: this.card.user_id }});
-              }
-              if (response.data.error) {
-                this.$router.push("/");
-              }
-            })
-      },
-      onSubmit() {
-        let payload = {
-          card_name: this.CreateCardForm.basicInfo.card_name,
-          expiration_month: this.CreateCardForm.basicInfo.expiration_month,
-          expiration_year: this.CreateCardForm.basicInfo.expiration_year,
-          type_of_card: this.CreateCardForm.basicInfo.type_of_card,
-          security_number: this.CreateCardForm.basicInfo.security_number,
-          card_number: this.CreateCardForm.basicInfo.card_number,
-          zip_code: this.CreateCardForm.basicInfo.zip_code,
-          main_card: this.CreateCardForm.basicInfo.main_card,
-        };
-        this.editCard(payload);
-      },
-    },
-  })
-  </script>
-  
-  <style scoped>
-  
-  </style>
\ No newline at end of file
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/card/home.vue b/src/pages/card/home.vue
index 0fc7537..84c8a2f 100755
--- a/src/pages/card/home.vue
+++ b/src/pages/card/home.vue
@@ -1,9 +1,6 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
+
     <div class=" w-full px-10 ">
       <div class="text-sm breadcrumbs">
         <ul>
diff --git a/src/pages/customer/create.vue b/src/pages/customer/create.vue
index 3976449..896273c 100755
--- a/src/pages/customer/create.vue
+++ b/src/pages/customer/create.vue
@@ -1,154 +1,138 @@
 <template>
-  <Header />
-  <div v-if="user">
-    <div class="flex">
-      <div class="">
-        <SideBar />
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          <li>Create New Customer</li>
+        </ul>
       </div>
-      <div class="w-full px-10">
-        <div class="text-sm breadcrumbs">
-          <ul>
-            <li>
-              <router-link :to="{ name: 'home' }">
-                Home
-              </router-link>
-            </li>
-            <li>
-              <router-link :to="{ name: 'customer' }">
-                Customers
-              </router-link>
-            </li>
-          </ul>
-        </div>
-        <div class="grid grid-cols-12 rounded-md p-6 ">
-          <div class="col-span-12 text-[24px] ">Create a customer</div>
-          <form class="col-span-12 rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
-            @submit.prevent="onSubmit">
+      
+      <h1 class="text-3xl font-bold mt-4">
+        Create New Customer
+      </h1>
 
-            <div class="grid grid-cols-12">
-              <div class="col-span-6">
-                <div class="col-span-12 text-[18px] mt-5 mb-5">General Info</div>
-                <div class="col-span-12 mb-4">
-                  <label class="block text-white text-sm font-bold mb-2"> First Name</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_first_name"
-                    class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                    placeholder="First Name" />
-                  <span v-if="v$.CreateCustomerForm.basicInfo.customer_first_name.$error"
-                    class="text-red-600 text-center">
-                    {{ v$.CreateCustomerForm.basicInfo.customer_first_name.$errors[0].$message }}
-                  </span>
-                </div>
-                <div class="col-span-12 mb-4">
-                  <label class="block text-white text-sm font-bold mb-2"> Last Name</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_last_name"
-                    class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                    placeholder="Last Name" />
-                  <span v-if="v$.CreateCustomerForm.basicInfo.customer_last_name.$error"
-                    class="text-red-600 text-center">
-                    {{ v$.CreateCustomerForm.basicInfo.customer_last_name.$errors[0].$message }}
-                  </span>
-                </div>
-                <div class="col-span-12 mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Phone Number</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_phone_number"
-                    class="input input-bordered input-sm w-full max-w-xs" id="phone number" type="tel"
-                    placeholder="Phone Number" @input="acceptNumber()" />
-                  <span v-if="v$.CreateCustomerForm.basicInfo.customer_phone_number.$error"
-                    class="text-red-600 text-center">
-                    {{ v$.CreateCustomerForm.basicInfo.customer_phone_number.$errors[0].$message }}
-                  </span>
-                </div>
-                <div class="col-span-12 mb-4">
-                  <div class="flex-1 mb-4">
-                    <label class="block text-white text-sm font-bold mb-2">Customer Type</label>
-                    <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                      id="customer_type" v-model="CreateCustomerForm.basicInfo.customer_home_type">
-                      <option class="text-white" v-for="(customer, index) in custList" :key="index"
-                        :value="customer['value']">
-                        {{ customer['text'] }}
-                      </option>
-                    </select>
-                  </div>
-                </div>
-                <div class="col-span-12 mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Email (Optional)</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_email"
-                    class="input input-bordered input-sm w-full max-w-xs" id="email" type="text" placeholder="Email" />
-                  <span v-if="v$.CreateCustomerForm.basicInfo.customer_email.$error" class="text-red-600 text-center">
-                    {{ v$.CreateCustomerForm.basicInfo.customer_email.$errors[0].$message }}
-                  </span>
-                </div>
+      <!-- Main Form Card -->
+      <div class="bg-neutral rounded-lg p-6 mt-6">
+        <form @submit.prevent="onSubmit" class="space-y-6">
+          
+          <!-- SECTION 1: General Info -->
+          <div>
+            <h2 class="text-lg font-bold">General Info</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <!-- First Name -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">First Name</span></label>
+                <input v-model="CreateCustomerForm.customer_first_name" type="text" placeholder="First Name" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.customer_first_name.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.customer_first_name.$errors[0].$message }}
+                </span>
               </div>
-              <div class="col-span-6">
-                <div class="grid grid-cols-12">
-                  <div class="text-[18px] mt-5 mb-5">Customer Address</div>
-                  <div class="col-span-12 mb-5 md:mb-5">
-                    <label class="block text-white text-sm font-bold mb-2">Street Address</label>
-                    <input v-model="CreateCustomerForm.basicInfo.customer_address"
-                      class="input input-bordered input-sm w-full max-w-xs" id="address" type="text"
-                      placeholder="Address" />
-                    <span v-if="v$.CreateCustomerForm.basicInfo.customer_address.$error"
-                      class="text-red-600 text-center">
-                      {{ v$.CreateCustomerForm.basicInfo.customer_address.$errors[0].$message }}
-                    </span>
-                  </div>
-                  <div class="col-span-12 mb-5 md:mb-5">
-                    <input v-model="CreateCustomerForm.basicInfo.customer_apt"
-                      class="input input-bordered input-sm w-full max-w-xs" id="apt" type="text"
-                      placeholder="Apt, suite, unit, building, floor, etc" />
-                  </div>
-                  <div class="col-span-12 mb-20 md:mb-5 ">
-                    <label class="block text-white text-sm font-bold mb-2">Town</label>
-                    <input v-model="CreateCustomerForm.basicInfo.customer_town"
-                      class="input input-bordered input-sm w-full max-w-xs" id="town" type="text" placeholder="Town" />
-                    <span v-if="v$.CreateCustomerForm.basicInfo.customer_town.$error" class="text-red-600 text-center">
-                      {{ v$.CreateCustomerForm.basicInfo.customer_town.$errors[0].$message }}
-                    </span>
-                  </div>
-                  <div class=" col-span-12 flex-1 mb-4">
-                    <label class="block text-white text-sm font-bold mb-2">State</label>
-                    <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                      id="customer_state" v-model="CreateCustomerForm.basicInfo.customer_state">
-                      <option class="text-white" v-for="(state, index) in stateList" :key="index"
-                        :value="state['value']">
-                        {{ state['text'] }}
-                      </option>
-                    </select>
-                    <span v-if="v$.CreateCustomerForm.basicInfo.customer_state.$error" class="text-red-600 text-center">
-                      {{ v$.CreateCustomerForm.basicInfo.customer_state.$errors[0].$message }}
-                    </span>
-                  </div>
-                  <div class="col-span-4 mb-5 md:mb-5">
-                    <label class="block text-white text-sm font-bold mb-2">Zip Code</label>
-                    <input v-model="CreateCustomerForm.basicInfo.customer_zip" class="w-full input input-bordered input-sm  "
-                      id="zip" type="text" placeholder="Zip" />
-                    <span v-if="v$.CreateCustomerForm.basicInfo.customer_zip.$error" class="text-red-600 text-center">
-                      {{ v$.CreateCustomerForm.basicInfo.customer_zip.$errors[0].$message }}
-                    </span>
-                  </div>
-                </div>
+              <!-- Last Name -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Last Name</span></label>
+                <input v-model="CreateCustomerForm.customer_last_name" type="text" placeholder="Last Name" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.customer_last_name.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.customer_last_name.$errors[0].$message }}
+                </span>
               </div>
-
-              <div class="col-span-6">
-                <div class="text-[18px] mt-5 mb-5"> Description</div>
-
-                <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
-                  <textarea v-model="CreateCustomerForm.basicInfo.customer_description" rows="4"
-                    class="textarea block p-2.5 w-full input-bordered " id="description" type="text"
-                    placeholder="Description of Customer House" />
-                </div>
-
+              <!-- Phone Number -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Phone Number</span></label>
+                <input v-model="CreateCustomerForm.customer_phone_number" type="tel" placeholder="Phone Number" class="input input-bordered input-sm w-full" @input="acceptNumber()" />
+                <span v-if="v$.CreateCustomerForm.customer_phone_number.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.customer_phone_number.$errors[0].$message }}
+                </span>
               </div>
-              <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-                <button class="btn btn-accent btn-sm">
-                  Submit Create Customer
-                </button>
+              <!-- Email -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Email (Optional)</span></label>
+                <input v-model="CreateCustomerForm.customer_email" type="text" placeholder="Email" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.customer_email.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.customer_email.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Customer Type -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Customer Type</span></label>
+                <select v-model="CreateCustomerForm.customer_home_type" class="select select-bordered select-sm w-full">
+                  <option disabled :value="0">Select a type</option>
+                  <option v-for="customer in custList" :key="customer.value" :value="customer.value">
+                    {{ customer.text }}
+                  </option>
+                </select>
+                 <span v-if="v$.CreateCustomerForm.customer_home_type.$error" class="text-red-500 text-xs mt-1">Required.</span>
               </div>
             </div>
-          </form>
-        </div>
-      </div>
+          </div>
 
+          <!-- SECTION 2: Address -->
+          <div>
+            <h2 class="text-lg font-bold">Address</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- Street Address -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Street Address</span></label>
+                <input v-model="CreateCustomerForm.customer_address" type="text" placeholder="Street Address" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.customer_address.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.customer_address.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Apt, Suite, etc. -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Apt, Suite, etc. (Optional)</span></label>
+                <input v-model="CreateCustomerForm.customer_apt" type="text" placeholder="Apt, suite, unit..." class="input input-bordered input-sm w-full" />
+              </div>
+              <!-- Town -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Town</span></label>
+                <input v-model="CreateCustomerForm.customer_town" type="text" placeholder="Town" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.customer_town.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.customer_town.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- State -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">State</span></label>
+                <select v-model="CreateCustomerForm.customer_state" class="select select-bordered select-sm w-full">
+                  <option disabled :value="0">Select a state</option>
+                  <option v-for="state in stateList" :key="state.value" :value="state.value">
+                    {{ state.text }}
+                  </option>
+                </select>
+                <span v-if="v$.CreateCustomerForm.customer_state.$error" class="text-red-500 text-xs mt-1">Required.</span>
+              </div>
+              <!-- Zip Code -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Zip Code</span></label>
+                <input v-model="CreateCustomerForm.customer_zip" type="text" placeholder="Zip Code" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.customer_zip.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.customer_zip.$errors[0].$message }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- SECTION 3: Delivery Details -->
+          <div>
+            <h2 class="text-lg font-bold">Delivery Details</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="form-control">
+              <label class="label"><span class="label-text">Description / Notes (Optional)</span></label>
+              <textarea v-model="CreateCustomerForm.customer_description" rows="4" placeholder="Description of customer's house, tank, etc." class="textarea textarea-bordered"></textarea>
+            </div>
+          </div>
+          
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Create Customer</button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
   <Footer />
@@ -158,224 +142,115 @@
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
 import { email, minLength, required } from "@vuelidate/validators";
 import { notify } from "@kyvg/vue3-notification";
 
+interface SelectOption {
+  text: string;
+  value: number;
+}
 
 export default defineComponent({
   name: 'CustomerCreate',
-
   components: {
-    Header,
-    SideBar,
     Footer,
   },
-
   data() {
     return {
       v$: useValidate(),
       user: null,
-      stateList: [],
-      x: '',
-      custList: [],
-      new_user_id: 0,
-      company: {
-        creation_date: "",
-        account_prefix: "",
-        company_name: "",
-        company_address: "",
-        company_town: "",
-        company_zip: "",
-        company_state: "",
-        company_phone_number: "",
-      },
-
+      stateList: [] as SelectOption[],
+      custList: [] as SelectOption[],
+      // --- REFACTORED: Simplified, flat form object ---
       CreateCustomerForm: {
-        basicInfo: {
-          customer_last_name: "",
-          customer_first_name: "",
-          customer_town: "",
-          customer_apt: "",
-          customer_home_type: 0,
-          customer_zip: "",
-          customer_automatic: "",
-          customer_email: "",
-          customer_phone_number: "",
-          customer_state: 0,
-          customer_address: "",
-          customer_description: "",
-        },
+        customer_last_name: "",
+        customer_first_name: "",
+        customer_town: "",
+        customer_address: "",
+        customer_apt: "",
+        customer_zip: "",
+        customer_email: "",
+        customer_phone_number: "",
+        customer_description: "",
+        // --- FIX: Initialized as numbers for proper v-model binding ---
+        customer_home_type: 0,
+        customer_state: 0,
       },
     }
   },
   validations() {
     return {
+      // --- REFACTORED: Validation rules point to the flat form object ---
       CreateCustomerForm: {
-        basicInfo: {
-          customer_last_name: { required, minLength: minLength(1) },
-          customer_first_name: { required, minLength: minLength(1) },
-          customer_town: { required, minLength: minLength(1) },
-          customer_home_type: { required },
-          customer_zip: { required, minLength: minLength(5) },
-          customer_email: { email, required },
-          customer_phone_number: { required },
-          customer_state: { required },
-          customer_address: { required },
-        },
+        customer_last_name: { required, minLength: minLength(1) },
+        customer_first_name: { required, minLength: minLength(1) },
+        customer_town: { required, minLength: minLength(1) },
+        customer_zip: { required, minLength: minLength(5) },
+        customer_email: { email }, // Optional, so only validate format
+        customer_phone_number: { required },
+        customer_home_type: { required },
+        customer_state: { required },
+        customer_address: { required },
       },
     };
   },
   created() {
-    this.userStatus()
+    this.userStatus();
   },
   mounted() {
     this.getCustomerTypeList();
     this.getStatesList();
-    this.getCompany();
   },
   methods: {
     acceptNumber() {
-      let x = this.CreateCustomerForm.basicInfo.customer_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
+      const x = this.CreateCustomerForm.customer_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
       if (x) {
-        this.CreateCustomerForm.basicInfo.customer_phone_number = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
+        this.CreateCustomerForm.customer_phone_number = !x[2] ? x[1] : `(${x[1]}) ${x[2]}${x[3] ? `-${x[3]}` : ''}`;
       }
-      else {
-        this.CreateCustomerForm.basicInfo.customer_phone_number = ''
-      }
-    },
-    getCompany() {
-      let path = import.meta.env.VITE_BASE_URL + '/admin/company/' + import.meta.env.VITE_COMPANY_ID;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          this.company = response.data;
-
-
-        })
     },
     userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
-          if (response.data.ok) {
-            this.user = response.data.user;
-          }
-        })
-        .catch(() => {
-          this.user = null
+          if (response.data.ok) { this.user = response.data.user; }
         })
+        .catch(() => { this.user = null; });
     },
-    CreateCustomer(payload: {
-      customer_last_name: string;
-      customer_first_name: string;
-      customer_town: string;
-      customer_zip: string;
-      customer_email: string;
-      customer_phone_number: string;
-      customer_address: string;
-      customer_apt: string;
-      customer_home_type: number,
-      customer_state: number;
-      customer_description: string;
-    })
-     {
-      let path = import.meta.env.VITE_BASE_URL + "/customer/create";
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+    CreateCustomer(payload: any) {
+      const path = import.meta.env.VITE_BASE_URL + "/customer/create";
+      axios.post(path, payload, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
           if (response.data.ok) {
-            this.new_user_id = response.data.user.user_id
-            this.$router.push({ name: 'customerProfile', params: { id: this.new_user_id } });
+            const new_user_id = response.data.user.user_id;
+            this.$router.push({ name: 'customerProfile', params: { id: new_user_id } });
+          } else {
+            notify({ title: "Error", text: response.data.error || "Failed to create customer.", type: "error" });
           }
-          if (response.data.error) {
-            this.$router.push("/");
-          }
-        })
+        });
     },
     onSubmit() {
-      if (this.CreateCustomerForm.basicInfo.customer_zip === ''){
-        notify({
-          title: "Error",
-          text: "No zip code added!",
-          type: "error",
-        });
-    }
-    if (this.CreateCustomerForm.basicInfo.customer_last_name === ''){
-        notify({
-          title: "Error",
-          text: "No last name added!",
-          type: "error",
-        });
-    }
-    if (this.CreateCustomerForm.basicInfo.customer_address === ''){
-        notify({
-          title: "Error",
-          text: "No address added!",
-          type: "error",
-        });
-    }
-      let payload = {
-        customer_last_name: this.CreateCustomerForm.basicInfo.customer_last_name,
-        customer_first_name: this.CreateCustomerForm.basicInfo.customer_first_name,
-        customer_town: this.CreateCustomerForm.basicInfo.customer_town,
-        customer_zip: this.CreateCustomerForm.basicInfo.customer_zip,
-        customer_email: this.CreateCustomerForm.basicInfo.customer_email,
-        customer_phone_number: this.CreateCustomerForm.basicInfo.customer_phone_number,
-        customer_home_type: this.CreateCustomerForm.basicInfo.customer_home_type,
-        customer_state: this.CreateCustomerForm.basicInfo.customer_state,
-        customer_apt: this.CreateCustomerForm.basicInfo.customer_apt,
-        customer_address: this.CreateCustomerForm.basicInfo.customer_address,
-        customer_description: this.CreateCustomerForm.basicInfo.customer_description,
-
-      };
-      this.CreateCustomer(payload);
+      this.v$.$validate(); // Trigger validation
+      if (!this.v$.$error) {
+        // If validation passes, submit the form
+        this.CreateCustomer(this.CreateCustomerForm);
+      } else {
+        // If validation fails, show a single notification
+        notify({ title: "Validation Error", text: "Please fill out all required fields correctly.", type: "error" });
+        console.log("Form validation failed.");
+      }
     },
     getCustomerTypeList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/customertype";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
-          this.custList = response.data;
-        })
-        .catch(() => {
-        });
+      const path = import.meta.env.VITE_BASE_URL + "/query/customertype";
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => { this.custList = response.data; });
     },
     getStatesList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/states";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
-          this.stateList = response.data;
-        })
-        .catch(() => {
-        });
+      const path = import.meta.env.VITE_BASE_URL + "/query/states";
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => { this.stateList = response.data; });
     },
   },
-})
-</script>
-
-<style scoped></style>
\ No newline at end of file
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/edit.vue b/src/pages/customer/edit.vue
index 11e01d2..3ac6fdf 100755
--- a/src/pages/customer/edit.vue
+++ b/src/pages/customer/edit.vue
@@ -1,196 +1,176 @@
 <template>
-  <Header />
-  <div v-if="user">
-    <div class="flex">
-      <div class="">
-        <SideBar />
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          <li>Edit Customer</li>
+        </ul>
+      </div>
+      
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4">
+        <h1 class="text-3xl font-bold">
+          Edit Customer: {{ customer.account_number }}
+        </h1>
+        <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm mt-2 sm:mt-0">
+          View Profile
+        </router-link>
       </div>
-      <div class="w-full px-10">
-        <div class="text-sm breadcrumbs">
-          <ul>
-            <li>
-              <router-link :to="{ name: 'home' }">
-                Home
-              </router-link>
-            </li>
-            <li>
-              <router-link :to="{ name: 'customer' }">
-                Customers
-              </router-link>
-            </li>
-          </ul>
-        </div>
-
-        <div class="grid grid-cols-12 rounded-md p-6 ">
-          <div class="col-span-12 text-2xl">Edit customer: {{ customer.account_number }}</div>
-          <div class="col-span-12 py-5">
-            <router-link :to="{ name: 'customerProfile', params: { id: customer['id'] } }"
-              class="btn btn-secondary btn-sm">
-              View Profile
-            </router-link>
-          </div>
-          <form class="col-span-12 rounded-md px-8 pt-6 pb-8 mb-4 " enctype="multipart/form-data"
-            @submit.prevent="onSubmit">
-
-            <div class="grid grid-cols-12">
-              <div class="col-span-6">
-                <div class="col-span-12 text-[18px] mt-5 mb-5">General Info</div>
-                <div class="col-span-12 mb-4">
-                  <label class="block text-white text-sm font-bold mb-2"> First Name</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_first_name"
-                    class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                    placeholder="First Name" />
-                  <span v-if="v$.CreateCustomerForm.basicInfo.customer_first_name.$error"
-                    class="text-red-600 text-center">
-                    {{ v$.CreateCustomerForm.basicInfo.customer_first_name.$errors[0].$message }}
-                  </span>
-                </div>
-                <div class="col-span-12 mb-4">
-                  <label class="block text-white text-sm font-bold mb-2"> Last Name</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_last_name"
-                    class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                    placeholder="Last Name" />
-                  <span v-if="v$.CreateCustomerForm.basicInfo.customer_last_name.$error"
-                    class="text-red-600 text-center">
-                    {{ v$.CreateCustomerForm.basicInfo.customer_last_name.$errors[0].$message }}
-                  </span>
-                </div>
-                <div class="col-span-12 md:col-span-4 mb-5 md:mb-5">
-                  <label class="block text-white text-sm font-bold mb-2">Phone Number</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_phone_number"
-                    class="input input-bordered input-sm w-full max-w-xs" id="phone number" type="text"
-                    placeholder="Phone Number" @input="acceptNumber()" />
-                  <span v-if="v$.CreateCustomerForm.basicInfo.customer_phone_number.$error"
-                    class="text-red-600 text-center">
-                    {{ v$.CreateCustomerForm.basicInfo.customer_phone_number.$errors[0].$message }}
-                  </span>
-                </div>
-                <div class="col-span-12 flex gap-5">
-                  <div class="flex-1 mb-4">
-                    <label class="block text-white text-sm font-bold mb-2">Customer Type</label>
-                    <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                      id="customer_type" v-model="CreateCustomerForm.basicInfo.customer_home_type">
-                      <option class="text-white" v-for="(customer, index) in custList" :key="index"
-                        :value="customer['value']">
-                        {{ customer['text'] }}
-                      </option>
-                    </select>
-                  </div>
-                </div>
-                <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
-                  <label class="block text-white text-sm font-bold mb-2">Email (Optional)</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_email"
-                    class="input input-bordered input-sm w-full max-w-xs" id="email" type="text" placeholder="Email" />
-                  <span v-if="v$.CreateCustomerForm.basicInfo.customer_email.$error" class="text-red-600 text-center">
-                    {{ v$.CreateCustomerForm.basicInfo.customer_email.$errors[0].$message }}
-                  </span>
-                </div>
 
+      <!-- Main Form Card -->
+      <div class="bg-neutral rounded-lg p-6 mt-6">
+        <form @submit.prevent="onSubmit" class="space-y-6">
+          
+          <!-- SECTION 1: General Info -->
+          <div>
+            <h2 class="text-lg font-bold">General Info</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <!-- First Name -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">First Name</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_first_name" type="text" placeholder="First Name" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.basicInfo.customer_first_name.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.basicInfo.customer_first_name.$errors[0].$message }}
+                </span>
               </div>
-
-
-              <div class="col-span-6 ">
-                <div class="text-[18px] mt-5 mb-5">Customer Address</div>
-                
-                <div class="grid grid-cols-12">
-
-                  <div class="col-span-12 mb-5 ">
-                    <label class="block text-white text-sm font-bold mb-2">Street Address</label>
-                    <input v-model="CreateCustomerForm.basicInfo.customer_address"
-                      class="input input-bordered input-sm w-full max-w-xs" id="address" type="text"
-                      placeholder="Address" />
-                    <span v-if="v$.CreateCustomerForm.basicInfo.customer_address.$error"
-                      class="text-red-600 text-center">
-                      {{ v$.CreateCustomerForm.basicInfo.customer_address.$errors[0].$message }}
-                    </span>
-                  </div>
-                  <div class="col-span-12 mb-5 ">
-                    <label class="block text-white text-sm font-bold mb-2">Apt</label>
-                    <input v-model="CreateCustomerForm.basicInfo.customer_apt"
-                      class="input input-bordered input-sm w-full max-w-xs" id="apt" type="text"
-                      placeholder="Apt, suite, unit, building, floor, etc" />
-                  </div>
-
-                  <div class="col-span-12 ">
-                    <label class="block text-white text-sm font-bold mb-2">Town</label>
-                    <input v-model="CreateCustomerForm.basicInfo.customer_town"
-                      class="input input-bordered input-sm w-full max-w-xs" id="town" type="text" placeholder="town" />
-                    <span v-if="v$.CreateCustomerForm.basicInfo.customer_town.$error" class="text-red-600 text-center">
-                      {{ v$.CreateCustomerForm.basicInfo.customer_town.$errors[0].$message }}
-                    </span>
-                  </div>
-
-                  <div class="col-span-12 flex-1 mb-4 ">
-                    <label class="block text-white text-sm font-bold mb-2">State</label>
-                    <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                      id="customer_state" v-model="CreateCustomerForm.basicInfo.customer_state">
-                      <option class="text-white" v-for="(state, index) in stateList" :key="index"
-                        :value="state['value']">
-                        {{ state['text'] }}
-                      </option>
-                    </select>
-                    <span v-if="v$.CreateCustomerForm.basicInfo.customer_state.$error" class="text-red-600 text-center">
-                      {{ v$.CreateCustomerForm.basicInfo.customer_state.$errors[0].$message }}
-                    </span>
-                  </div>
-                  <div class="col-span-4 mb-5 md:mb-5">
-                    <label class="block text-white text-sm font-bold mb-2">Zip Code</label>
-                    <input v-model="CreateCustomerForm.basicInfo.customer_zip"
-                      class="input input-bordered input-sm w-full max-w-xs" id="zip" type="text" placeholder="Zip" />
-                    <span v-if="v$.CreateCustomerForm.basicInfo.customer_zip.$error" class="text-red-600 text-center">
-                      {{ v$.CreateCustomerForm.basicInfo.customer_zip.$errors[0].$message }}
-                    </span>
-                  </div>
-                </div>
-
+              <!-- Last Name -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Last Name</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_last_name" type="text" placeholder="Last Name" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.basicInfo.customer_last_name.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.basicInfo.customer_last_name.$errors[0].$message }}
+                </span>
               </div>
-
-              <div class="col-span-12 mb-5 md:mb-5">
-
-                <div class="col-span-12 text-[18px] mt-5 mb-5"> Description</div>
-                <div class="col-span-12 md:col-span-4 mb-2 ">
-                  <label class="block text-white text-sm font-bold mb-2">Fill Location</label>
-                  <input v-model="CreateCustomerForm.basicInfo.customer_fill_location"
-                    class="input input-bordered input-sm w-full max-w-xs" id="fill" type="text" placeholder="Fill (1-12)" />
-                </div>
-
-            
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
-                <textarea v-model="CreateCustomerForm.basicInfo.customer_description" rows="4"
-                  class="textarea block p-2.5 w-full input-bordered " id="description" type="text"
-                  placeholder="Description of Customer House" />
+              <!-- Phone Number -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Phone Number</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_phone_number" type="text" placeholder="Phone Number" class="input input-bordered input-sm w-full" @input="acceptNumber()" />
+                <span v-if="v$.CreateCustomerForm.basicInfo.customer_phone_number.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.basicInfo.customer_phone_number.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Email -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Email (Optional)</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_email" type="text" placeholder="Email" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.basicInfo.customer_email.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.basicInfo.customer_email.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Customer Type -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Customer Type</span></label>
+                <select v-model="CreateCustomerForm.basicInfo.customer_home_type" class="select select-bordered select-sm w-full">
+                  <option v-for="customer in custList" :key="customer.value" :value="customer.value">
+                    {{ customer.text }}
+                  </option>
+                </select>
               </div>
             </div>
           </div>
-            <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-              <button class="btn-sm btn btn-accent">
-                Save Changes
-              </button>
+
+          <!-- SECTION 2: Address -->
+          <div>
+            <h2 class="text-lg font-bold">Address</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- Street Address -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Street Address</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_address" type="text" placeholder="Street Address" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.basicInfo.customer_address.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.basicInfo.customer_address.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Apt, Suite, etc. -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Apt, Suite, etc. (Optional)</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_apt" type="text" placeholder="Apt, suite, unit..." class="input input-bordered input-sm w-full" />
+              </div>
+              <!-- Town -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Town</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_town" type="text" placeholder="Town" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.basicInfo.customer_town.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.basicInfo.customer_town.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- State -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">State</span></label>
+                <select v-model="CreateCustomerForm.basicInfo.customer_state" class="select select-bordered select-sm w-full">
+                  <option v-for="state in stateList" :key="state.value" :value="state.value">
+                    {{ state.text }}
+                  </option>
+                </select>
+                <span v-if="v$.CreateCustomerForm.basicInfo.customer_state.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.basicInfo.customer_state.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Zip Code -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Zip Code</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_zip" type="text" placeholder="Zip Code" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateCustomerForm.basicInfo.customer_zip.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateCustomerForm.basicInfo.customer_zip.$errors[0].$message }}
+                </span>
+              </div>
             </div>
-          </form>
-        </div>
+          </div>
+
+          <!-- SECTION 3: Delivery Details -->
+          <div>
+            <h2 class="text-lg font-bold">Delivery Details</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- Fill Location -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Fill Location</span></label>
+                <input v-model="CreateCustomerForm.basicInfo.customer_fill_location" type="text" placeholder="e.g., Left side of house" class="input input-bordered input-sm w-full" />
+              </div>
+              <!-- Description -->
+              <div class="form-control md:col-span-2">
+                <label class="label"><span class="label-text">Description / Notes</span></label>
+                <textarea v-model="CreateCustomerForm.basicInfo.customer_description" rows="4" placeholder="Description of customer's house, tank, etc." class="textarea textarea-bordered"></textarea>
+              </div>
+            </div>
+          </div>
+          
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
+          </div>
+        </form>
       </div>
     </div>
   </div>
   <Footer />
 </template>
 
+
+
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
 import { email, minLength, required } from "@vuelidate/validators";
 
+// --- NEW: Interface for select options for better type safety ---
+interface SelectOption {
+  text: string;
+  value: number;
+}
+
 export default defineComponent({
   name: 'CustomerEdit',
 
   components: {
-    Header,
-    SideBar,
+    // Removed unused Header and SideBar
     Footer,
   },
 
@@ -199,8 +179,8 @@ export default defineComponent({
       v$: useValidate(),
       user: null,
 
-      stateList: [],
-      custList: [],
+      stateList: [] as SelectOption[], 
+      custList: [] as SelectOption[],
       customer: {
         id: 0,
         user_id: 0,
@@ -229,16 +209,17 @@ export default defineComponent({
           customer_first_name: "",
           customer_town: "",
           customer_apt: "",
-          customer_home_type: "",
+          // --- FIX: Initialized as a number ---
+          customer_home_type: 0,
           customer_zip: "",
           customer_automatic: false,
           customer_email: "",
           customer_phone_number: "",
-          customer_state: "",
+          // --- FIX: Initialized as a number ---
+          customer_state: 0,
           customer_address: "",
           customer_description: "",
           customer_fill_location: 0,
-
         },
       },
     }
@@ -252,7 +233,7 @@ export default defineComponent({
           customer_town: { required, minLength: minLength(1) },
           customer_home_type: { required },
           customer_zip: { required, minLength: minLength(5) },
-          customer_email: { email, required },
+          customer_email: { email }, // Removed required to match template label "Optional"
           customer_phone_number: { required },
           customer_state: { required },
           customer_address: { required },
@@ -276,7 +257,6 @@ export default defineComponent({
       } else {
         this.CreateCustomerForm.basicInfo.customer_phone_number = '';
       }
-
     },
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
@@ -302,14 +282,11 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       }).then((response: any) => {
-
         this.customerDescription = response.data
         this.CreateCustomerForm.basicInfo.customer_description = this.customerDescription.description;
         this.CreateCustomerForm.basicInfo.customer_fill_location = this.customerDescription.fill_location
       })
     },
-
-    // gets the item from parameter router
     getCustomer(userid: any) {
       let path = import.meta.env.VITE_BASE_URL + "/customer/" + userid;
       axios({
@@ -320,47 +297,29 @@ export default defineComponent({
       })
         .then((response: any) => {
           if (response.data) {
-
             this.customer = response.data;
-            this.getCustomerDescription(this.customer.id)
+            this.getCustomerDescription(this.customer.id);
             this.CreateCustomerForm.basicInfo.customer_last_name = response.data.customer_last_name;
             this.CreateCustomerForm.basicInfo.customer_first_name = response.data.customer_first_name;
             this.CreateCustomerForm.basicInfo.customer_town = response.data.customer_town;
             this.CreateCustomerForm.basicInfo.customer_state = response.data.customer_state;
             this.CreateCustomerForm.basicInfo.customer_zip = response.data.customer_zip;
-
             this.CreateCustomerForm.basicInfo.customer_phone_number = response.data.customer_phone_number;
             this.CreateCustomerForm.basicInfo.customer_home_type = response.data.customer_home_type;
             this.CreateCustomerForm.basicInfo.customer_apt = response.data.customer_apt;
             this.CreateCustomerForm.basicInfo.customer_email = response.data.customer_email;
             this.CreateCustomerForm.basicInfo.customer_address = response.data.customer_address;
 
-
             if (response.data.customer_automatic === 1) {
               this.CreateCustomerForm.basicInfo.customer_automatic = true
-
             }
             if (response.data.customer_automatic === 0) {
               this.CreateCustomerForm.basicInfo.customer_automatic = false
             }
-
           }
         })
     },
-    editItem(payload: {
-      customer_last_name: string;
-      customer_first_name: string;
-      customer_apt: string;
-      customer_town: string;
-      customer_zip: string;
-      customer_email: string;
-      customer_phone_number: string;
-      customer_home_type: string,
-      customer_state: string;
-      customer_address: string;
-      customer_description: string;
-      customer_fill_location: number;
-    }) {
+    editItem(payload: any) { // Simplified payload type for brevity
       let path = import.meta.env.VITE_BASE_URL + "/customer/edit/" + this.customer.id;
       axios({
         method: "put",
@@ -372,61 +331,31 @@ export default defineComponent({
         .then((response: any) => {
           if (response.data.ok) {
             this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
-          }
-          ;
-          if (response.data.error) {
+          } else if (response.data.error) {
+            // Handle specific errors if needed
             this.$router.push("/");
           }
-          ;
         })
     },
     onSubmit() {
-      let payload = {
-        customer_last_name: this.CreateCustomerForm.basicInfo.customer_last_name,
-        customer_first_name: this.CreateCustomerForm.basicInfo.customer_first_name,
-        customer_town: this.CreateCustomerForm.basicInfo.customer_town,
-        customer_zip: this.CreateCustomerForm.basicInfo.customer_zip,
-        customer_email: this.CreateCustomerForm.basicInfo.customer_email,
-        customer_phone_number: this.CreateCustomerForm.basicInfo.customer_phone_number,
-        customer_home_type: this.CreateCustomerForm.basicInfo.customer_home_type,
-        customer_apt: this.CreateCustomerForm.basicInfo.customer_apt,
-        customer_state: this.CreateCustomerForm.basicInfo.customer_state,
-        customer_address: this.CreateCustomerForm.basicInfo.customer_address,
-        customer_fill_location: this.CreateCustomerForm.basicInfo.customer_fill_location,
-        customer_description: this.CreateCustomerForm.basicInfo.customer_description,
-      };
-      this.editItem(payload);
+      // Create payload directly from the form object
+      this.editItem(this.CreateCustomerForm.basicInfo);
     },
     getCustomerTypeList() {
       let path = import.meta.env.VITE_BASE_URL + "/query/customertype";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
+      axios.get(path, { withCredentials: true })
         .then((response: any) => {
           this.custList = response.data;
-        })
-        .catch(() => {
         });
     },
     getStatesList() {
       let path = import.meta.env.VITE_BASE_URL + "/query/states";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
+      axios.get(path, { withCredentials: true })
         .then((response: any) => {
           this.stateList = response.data;
-        })
-        .catch(() => {
         });
     },
   },
 })
 </script>
 
-<style scoped></style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/src/pages/customer/home.vue b/src/pages/customer/home.vue
index 1991fad..954e48e 100755
--- a/src/pages/customer/home.vue
+++ b/src/pages/customer/home.vue
@@ -1,107 +1,123 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 pb-10">
+    <div class="w-full px-4 md:px-10 ">
+      <!-- Breadcrumbs & Title -->
       <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'customer' }">
-              Customers
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Customers</li>
         </ul>
       </div>
+      <h1 class="text-3xl font-bold mt-4">Customers</h1>
 
-      <div class="flex justify-end mb-10">
-        Customers {{ customer_count }}
-      </div>
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Search, Count, and Add Button -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <!-- SEARCH AND COUNT (IMPROVED ALIGNMENT) -->
+          <div class="form-control">
+            <label class="label pt-1 pb-0">
+              <span class="label-text-alt">{{ customer_count }} customers found</span>
+            </label>
+          </div>
+          <router-link to="/customers/create" class="btn btn-primary btn-sm">
+            Add New Customer
+          </router-link>
+        </div>
 
-      <div class="col-span-12 bg-secondary">
-          <div class="grid grid-cols-12 p-5 bg-neutral m-5">
-            <div class="col-span-12 font-bold text-xl">Quick Tips</div>
-            <div class="col-span-3 py-2">  @ = last name search</div>
-            <div class="col-span-3 py-2">  ! = address</div>
-          
-            <div class="col-span-3 py-2">  $ = account number</div>
+        <div class="divider"></div>
+
+        <!-- DESKTOP VIEW: Table (Now breaks at XL) -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th>Account #</th>
+                <th>Name</th>
+                <th>Town</th>
+                <th>Automatic</th>
+                <th>Phone Number</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="person in customers" :key="person.id" class="hover:bg-blue-600 hover:text-white">
+                <td>
+                  <router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="link link-hover">
+                    {{ person.account_number }}
+                  </router-link>
+                </td>
+                <td>{{ person.customer_first_name }} {{ person.customer_last_name }}</td>
+                <td>{{ person.customer_town }}</td>
+                <td><span :class="person.customer_automatic ? 'text-success' : 'text-gray-500'">{{ person.customer_automatic ? 'Yes' : 'No' }}</span></td>
+                <td>{{ person.customer_phone_number }}</td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryCreate', params: { id: person.id } }" class="btn btn-sm btn-primary">
+                      New Delivery
+                    </router-link>
+                    <router-link :to="{ name: 'CalenderCustomer', params: { id: person.id } }" class="btn btn-sm btn-accent">
+                      New Service
+                    </router-link>
+                    <router-link :to="{ name: 'customerEdit', params: { id: person.id } }" class="btn btn-sm btn-secondary">
+                      Edit
+                    </router-link>
+                    <router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">
+                      View
+                    </router-link>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- MOBILE VIEW: Cards (Now breaks at XL) -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="person in customers" :key="person.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ person.customer_first_name }} {{ person.customer_last_name }}</h2>
+                  <p class="text-xs text-gray-400">#{{ person.account_number }}</p>
+                </div>
+                <div class="badge" :class="person.customer_automatic ? 'badge-success' : 'badge-ghost'">
+                  {{ person.customer_automatic ? 'Automatic' : 'Will Call' }}
+                </div>
+              </div>
+              <div class="text-sm mt-2">
+                <p>{{ person.customer_town }}</p>
+                <p>{{ person.customer_phone_number }}</p>
+              </div>
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                <router-link :to="{ name: 'deliveryCreate', params: { id: person.id } }" class="btn btn-sm btn-primary">
+                  New Delivery
+                </router-link>
+                <router-link :to="{ name: 'CalenderCustomer', params: { id: person.id } }" class="btn btn-sm btn-accent">
+                  New Service
+                </router-link>
+                <router-link :to="{ name: 'customerEdit', params: { id: person.id } }" class="btn btn-sm btn-secondary">
+                  Edit
+                </router-link>
+                <router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">
+                  View
+                </router-link>
+              </div>
+            </div>
           </div>
         </div>
-      <div class="overflow-x-auto bg-neutral font-bold">
-        <table class="table">
-          <!-- head -->
-          <thead>
-            <tr>
-              <th>Account Number</th>
-              <th>Name</th>
-              <th>Town</th>
-              <th>Automatic</th>
-              <th>Phone Number</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <!-- row 1 -->
-          
-            <tr v-for="person in customers" :key="person['id']" >
-              <td>
-                <router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }">{{ person['account_number'] }}
-                </router-link>
-                </td>
-              <td>
-                <router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }">
-                  {{ person['customer_first_name'] }} {{ person['customer_last_name'] }}
-                </router-link>
-              </td>
-              <td>{{ person['customer_town'] }}</td>
-              <td>
-                <div v-if="person['customer_automatic'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-              <td>{{ person['customer_phone_number'] }}</td>
-
-              <td class="flex gap-5 ">
-                <router-link :to="{ name: 'deliveryCreate', params: { id: person['id'] } }"
-                    class="btn-sm btn bg-orange-600 text-white">
-                    Create Delivery
-                </router-link>
-                <router-link :to="{ name: 'CalenderCustomer', params: { id: person['id'] } }"
-                    class="btn-sm btn bg-indigo-600 text-white">
-                    Create Service Call
-                </router-link>
-                <router-link :to="{ name: 'customerEdit', params: { id: person['id'] } }" class="btn-sm btn btn-secondary">
-                    Edit Customer
-                </router-link>
-                <router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }"
-                    class="btn btn-secondary btn-sm">
-                    View Profile
-                </router-link>
-               
-              </td>
-            </tr>
-          </tbody>
-        </table>
       </div>
-   <div class="mt-10">
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
         <pagination @paginate="getPage" :records="customer_count" v-model="page" :per-page="10" :options="options">
         </pagination>
-
-        <div class="flex justify-center mb-10"> {{ customer_count }} items Found</div>
- 
-     
       </div>
+
     </div>
   </div>
-
   <Footer />
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
@@ -125,7 +141,7 @@ export default defineComponent({
     return {
       token: null,
       user: null,
-      customers: [],
+      customers: [] as any[],
       customer_count: 0,
       page: 1,
       perPage: 50,
diff --git a/src/pages/customer/profile/home.vue b/src/pages/customer/profile/home.vue
deleted file mode 100755
index 13aa748..0000000
--- a/src/pages/customer/profile/home.vue
+++ /dev/null
@@ -1,1090 +0,0 @@
-<template>
-  <Header />
-
-  <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs">
-        <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'customer' }">
-              Customers
-            </router-link>
-          </li>
-        </ul>
-        <div class="w-full mt-10">
-
-          <div class="grid grid-cols-12 gap-5">
-            <div class="col-span-6 p-5  ">
-              <div class="grid grid-cols-12 gap-5">
-                <div class="col-span-12 font-bold text-3xl ">
-                  {{ customer.account_number }}
-                </div>
-                <div class="col-span-12 font-bold ">
-                  <div style="height:400px; width:100%">
-                    <l-map ref="map" v-model:zoom="zoom"
-                      :center="[customer.customer_latitude, customer.customer_longitude]">
-                      <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base"
-                        name="OpenStreetMap"></l-tile-layer>
-                    </l-map>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-span-6  p-5">
-              <div class="grid grid-cols-12 ">
-                <div class="col-span-12 font-bold flex justify-evenly pb-5 flex-wrap gap-2">
-
-                  <router-link :to="{ name: 'deliveryCreate', params: { id: customer.id } }"
-                    class="btn-sm btn bg-orange-600 text-white">
-                    Create Delivery
-                  </router-link>
-
-
-                  <router-link :to="{ name: 'CalenderCustomer', params: { id: customer.id } }"
-                    class="btn-sm btn bg-indigo-600 text-white">
-                    Create Service Call
-                  </router-link>
-
-
-
-                  <router-link :to="{ name: 'customerEdit', params: { id: customer.id } }"
-                    class="btn-sm btn btn-secondary">
-                    Edit Customer
-                  </router-link>
-
-                  <div v-if="automatic_status === 0">
-                    <button v-on:click="userAutomatic(customer.id)" class="btn-sm btn btn-secondary">
-                      Become Auto
-                    </button>
-                  </div>
-                  <div v-else>
-                    <button v-on:click="userAutomatic(customer.id)" class="btn bg-green-600 text-black  btn-sm">
-                      Become Will Call
-                    </button>
-                  </div>
-                </div>
-                <div class="col-span-12">
-                  <div class="grid grid-cols-12">
-                    <div class="col-span-6">
-                      <div class="col-span-12 font-bold flex pb-5 text-lg text-red-600"
-                        v-if="customer.correct_address === false">
-                        Possible Incorrect Address!!
-                      </div>
-                      <div class="col-span-12 font-bold flex pb-5 text-lg" v-if="automatic_status === 1">
-                        Automatic
-                      </div>
-
-                      <div class="col-span-12 font-bold flex pb-5 text-lg" v-else>
-                        Will Call
-                      </div>
-                      <div class="text-green-600" v-if="automatic_status === 1">
-                        <div class="col-span-12 font-bold flex">
-                          {{ customer.customer_first_name }}
-                          {{ customer.customer_last_name }}
-                        </div>
-                        <div class="col-span-12 font-bold flex">
-                          {{ customer.customer_address }}
-                        </div>
-
-                        <div class="col-span-12 font-bold flex">
-                          <div class="pr-2">
-                            {{ customer.customer_town }},
-                          </div>
-                          <div class="pr-2">
-
-                            <div v-if="customer.customer_state == 0">Massachusetts</div>
-                            <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                            <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                            <div v-else-if="customer.customer_state == 3">Maine</div>
-                            <div v-else-if="customer.customer_state == 4">Vermont</div>
-                            <div v-else-if="customer.customer_state == 5">Maine</div>
-                            <div v-else-if="customer.customer_state == 6">New York</div>
-                            <div v-else>Unknown state</div>
-                          </div>
-                          <div class="pr-2">
-                            {{ customer.customer_zip }}
-                          </div>
-                        </div>
-
-                        <div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== ''">
-                          {{ customer.customer_apt }}
-                        </div>
-                        <div class="col-span-12 font-bold flex">
-                          <div v-if="customer.customer_home_type == 0">Residential</div>
-                          <div v-else-if="customer.customer_home_type == 1">apartment</div>
-                          <div v-else-if="customer.customer_home_type == 2">condo</div>
-                          <div v-else-if="customer.customer_home_type == 3">commercial</div>
-                          <div v-else-if="customer.customer_home_type == 4">business</div>
-                          <div v-else-if="customer.customer_home_type == 5">construction</div>
-                          <div v-else-if="customer.customer_home_type == 6">container</div>
-                        </div>
-                        <div class="col-span-12 font-bold flex">
-                          {{ customer.customer_phone_number }}
-                        </div>
-                      </div>
-                      <div class="" v-else>
-                        <div class="col-span-12 font-bold flex">
-                          {{ customer.customer_first_name }}
-                          {{ customer.customer_last_name }}
-                        </div>
-                        <div class="col-span-12 font-bold flex">
-                          {{ customer.customer_address }}
-                        </div>
-
-                        <div class="col-span-12 font-bold flex">
-                          <div class="pr-2">
-                            {{ customer.customer_town }},
-                          </div>
-                          <div class="pr-2">
-
-                            <div v-if="customer.customer_state == 0">Massachusetts</div>
-                            <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                            <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                            <div v-else-if="customer.customer_state == 3">Maine</div>
-                            <div v-else-if="customer.customer_state == 4">Vermont</div>
-                            <div v-else-if="customer.customer_state == 5">Maine</div>
-                            <div v-else-if="customer.customer_state == 6">New York</div>
-                            <div v-else>Unknown state</div>
-                          </div>
-                          <div class="pr-2">
-                            {{ customer.customer_zip }}
-                          </div>
-                        </div>
-
-                        <div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== ''">
-                          {{ customer.customer_apt }}
-                        </div>
-                        <div class="col-span-12 font-bold flex">
-                          <div v-if="customer.customer_home_type == 0">Residential</div>
-                          <div v-else-if="customer.customer_home_type == 1">apartment</div>
-                          <div v-else-if="customer.customer_home_type == 2">condo</div>
-                          <div v-else-if="customer.customer_home_type == 3">commercial</div>
-                          <div v-else-if="customer.customer_home_type == 4">business</div>
-                          <div v-else-if="customer.customer_home_type == 5">construction</div>
-                          <div v-else-if="customer.customer_home_type == 6">container</div>
-                        </div>
-                        <div class="col-span-12 font-bold flex">
-                          {{ customer.customer_phone_number }}
-                        </div>
-                      </div>
-                      
-                    </div>
-
-                    <div class="col-span-6">
-                     
-                      <div class="col-span-12 py-2 px-2 text-orange-600 "
-                        v-if="customer_tank.outside_or_inside == false">
-                        <div v-if="customer_tank.last_tank_inspection !== null">
-                        OUTSIDE TANK - {{ customer_tank.tank_size }}
-                      </div>
-                      </div>
-                      <div class="col-span-12 py-2 px-2" v-if="customer_tank.outside_or_inside == true">
-                        {{ customer_tank.tank_size }}
-                      </div>
-
-                      <div class="col-span-12  font-bold">Home Description</div>
-                      <div class="col-span-12 py-2 px-2">
-                        {{ customer_description.description }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="col-span-6">
-              <div class="col-span-12">
-                <hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded dark:bg-gray-400">
-              </div>
-              <div class="col-span-6  ">
-                <div class="grid grid-cols-12">
-                  <div class="col-span-12 font-bold flex text-2xl">
-                    Stats
-                  </div>
-                  <div class="col-span-6">
-                    <div class="col-span-12 py-2 px-2">
-                      Total Calls: {{ customer_stats.total_calls }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="col-span-6  ">
-                <div class="grid grid-cols-12">
-                  <div class="col-span-12 font-bold flex text-2xl">
-
-                  </div>
-                  <div class="col-span-6">
-
-                    <div class="col-span-12 py-2 px-2">
-                      Total Delivery Orders: {{ customer_stats.oil_deliveries }}
-                    </div>
-                    <div class="col-span-12 py-2 px-2">
-                      Total Gallons: {{ customer_stats.oil_total_gallons }}
-                    </div>
-                    <div class="col-span-12 py-2 px-2">
-                      Last Delivery: {{ customer_last_delivery }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="col-span-12 ">
-                <hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded dark:bg-gray-400">
-              </div>
-
-              <div class="col-span-6  ">
-                <div class="grid grid-cols-12">
-                  <div class="col-span-6 font-bold flex text-2xl">
-                    Tank
-                  </div>
-                  <div class="col-span-6 font-bold flex text-2xl">
-                    <router-link :to="{ name: 'TankEdit', params: { id: customer.id } }"
-                      class="btn-sm btn btn-secondary">
-                      Edit Tank
-                    </router-link>
-                  </div>
-                  <div class="col-span-6 ">
-                    <div class="col-span-12 py-2 font-bold">Last Tank Inspection </div>
-                    <div class="col-span-12 py-2 px-2 text-red-600" v-if="customer_tank.last_tank_inspection == null">
-                      Not inspected
-                    </div>
-                    <div class="col-span-12 py-2 px-2" v-else>
-                      {{ customer_tank.last_tank_inspection }}
-                    </div>
-
-                    <div class="col-span-12 py-2 font-bold">Tank Status</div>
-                    <div class="col-span-12 py-2 px-2 text-red-600" v-if="customer_tank.tank_status == false">
-                      Needs Inspection / Bad Tank
-                    </div>
-                    <div class="col-span-12 py-2 px-2" v-else>
-                      Inspected
-                    </div>
-
-                    <div class="col-span-12 py-2 font-bold">Inside/Outside </div>
-                    <div class="col-span-12 py-2 px-2 " v-if="customer_tank.outside_or_inside == true">
-                      Inside
-                    </div>
-                    <div class="col-span-12 py-2 px-2 text-orange-600" v-else>
-                      Outside
-                    </div>
-                  </div>
-
-                  <div class="col-span-6  ">
-                    <div class="grid grid-cols-12">
-                      <div class="col-span-12 py-2  font-bold">Fill Location</div>
-                      <div class="col-span-12 py-2 px-2">
-                        {{ customer_description.fill_location }}
-                      </div>
-                      <div class="col-span-12 py-2  font-bold">Tank Size</div>
-                      <div class="col-span-12 py-2 px-2">
-                        {{ customer_tank.tank_size }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="col-span-12 ">
-                <hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded  dark:bg-gray-400">
-                             <div class="col-span-12 ">
-                <div class="grid grid-cols-12">
-                    <div class="col-span-6 font-bold flex text-2xl">
-                      Equipment Parts
-                    </div>
-                    <div class="col-span-6 font-bold flex justify-start">
-                        <button @click="openPartsModal" class="btn-sm btn btn-secondary">Edit Parts</button>
-                    </div>
-                    
-                    <div v-if="currentParts" class="col-span-12 mt-4">
-                        <div v-if="hasPartsData" class="grid grid-cols-12 gap-4">
-                            
-                            <div v-if="currentParts.oil_filter" class="col-span-6">
-                                <div class="font-bold">Oil Filter 1:</div>
-                                <div>{{ currentParts.oil_filter }}</div>
-                            </div>
-
-                            <div v-if="currentParts.oil_filter_2" class="col-span-6">
-                                <div class="font-bold">Oil Filter 2:</div>
-                                <div>{{ currentParts.oil_filter_2 }}</div>
-                            </div>
-                            
-                            <div v-if="currentParts.oil_nozzle" class="col-span-6">
-                                <div class="font-bold">Oil Nozzle 1:</div>
-                                <div :style="{ color: getNozzleColor(currentParts.oil_nozzle), fontWeight: 'bold' }">{{ currentParts.oil_nozzle }}</div>
-                            </div>
-                            
-                            <div v-if="currentParts.oil_nozzle_2" class="col-span-6">
-                                <div class="font-bold">Oil Nozzle 2:</div>
-                                <div :style="{ color: getNozzleColor(currentParts.oil_nozzle_2), fontWeight: 'bold' }">{{ currentParts.oil_nozzle_2 }}</div>
-                            </div>
-
-                        </div>
-                         <div v-else>
-                            <p>No equipment parts information available.</p>
-                        </div>
-                    </div>
-                </div>
-                </div>
-              </div>
-              <div class="col-span-12 ">
-                <hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded  dark:bg-gray-400">
-              </div>
-              <div class="col-span-12 ">
-                <div class="grid grid-cols-12">
-                  <div class="col-span-6 font-bold flex text-2xl">
-                    Credit Cards
-                  </div>
-                  <div class="col-span-6 font-bold flex ">
-                    <router-link :to="{ name: 'cardadd', params: { id: customer.user_id } }">
-                      <button class="btn btn-sm bg-gray-700 text-white">Add Credit Card</button>
-                    </router-link>
-                  </div>
-                  <div class="col-span-12 font-bold flex">
-                    <div class="text-red-600" v-if="credit_cards_count == 0">
-                      No Cards on File! Cash Customer till card added.
-                    </div>
-                    <div v-else>
-                      {{ credit_cards_count }} credit card(s) on file.
-                    </div>
-                  </div>
-                  <div v-for="card in credit_cards" :key="card.id" class="col-span-12 ">
-                    <div class="flex flex-row ">
-                      <div v-if="card.main_card" class="basis-1/2 p-2 ">
-                        <div class="bg-neutral rounded-md border-2 ">
-                          <div class="flex p-3">
-                            {{ card.type_of_card }}
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            {{ card.name_on_card }}
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            {{ card.card_number }}
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            <div v-if="card.expiration_month < 10">0{{ card.expiration_month }}</div>
-                            <div v-else>{{ card.expiration_month }}</div>
-                            <div class=" pl-1 pr-1">/ </div>
-                            <div class=""> {{ card.expiration_year }} </div>
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            {{ card.zip_code }}
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            {{ card.security_number }}
-                          </div>
-                          <div class="flex justify-between">
-                            <a @click.prevent="editCard(card.id)" class="cursor-pointer underline hover:text-blue-300">
-                              Edit Card
-                            </a>
-                            <a @click.prevent="removeCard(card.id)"
-                              class="cursor-pointer underline hover:text-blue-300">
-                              RemoveCard
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                      <div v-else class="basis-1/2 p-2">
-                        <div class="rounded-md border-2 ">
-                          <div class="flex p-3">
-                            {{ card.type_of_card }}
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            {{ card.name_on_card }}
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            {{ card.card_number }}
-                          </div>
-                          <div class="flex p-1 pl-4">
-                             <div v-if="card.expiration_month < 10">0{{ card.expiration_month }}</div>
-                            <div v-else>{{ card.expiration_month }}</div>
-                            <div class=" pl-1 pr-1">/ </div>
-                            <div class=""> {{ card.expiration_year }} </div>
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            {{ card.zip_code }}
-                          </div>
-                          <div class="flex p-1 pl-4">
-                            {{ card.security_number }}
-                          </div>
-                          <div class="flex justify-between">
-                            <a @click.prevent="editCard(card.id)"
-                              class="cursor-pointer underline hover:text-blue-300">Edit
-                              Card</a>
-                            <a @click.prevent="removeCard(card.id)"
-                              class="cursor-pointer underline hover:text-blue-300">Remove
-                              Card</a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="col-span-6 px-4">
-              <div class="grid grid-cols-12">
-                <form class="rounded-md  col-span-12" enctype="multipart/form-data" @submit.prevent="onSubmitSocial">
-                  <div class="mb-4">
-                    <label class="block text-white text-sm font-bold mb-2">Customer Comment</label>
-                    <textarea v-model="CreateSocialForm.basicInfo.comment" rows="4"
-                      class="textarea block p-2.5 w-full input-bordered " id="description" type="text"
-                      placeholder="Leave a Customer Comment" />
-                  </div>
-                  <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-                    <button class="btn btn-sm btn-secondary">
-                      Create Comment
-                    </button>
-                  </div>
-                </form>
-
-                <div class="col-span-12">
-                  <div v-for="comment in comments" :key="comment['id']">
-                    <div class="grid grid-cols-12 bg-neutral my-5">
-                      <div class="col-span-2">
-                        {{ comment.created }}
-                      </div>
-                      <div class="col-span-8">
-                      </div>
-                      <div class="col-span-1">
-                      </div>
-                      <div class="col-span-1">
-                        <a href="" @click.prevent="deleteCustomerSocial(comment.id)" class="hover:text-blue-300">
-                          Delete
-                        </a>
-                      </div>
-                      <div class="col-span-12 p-5">
-                        {{ comment.comment }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="col-span-12 ">
-              <hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded  dark:bg-gray-400">
-            </div>
-
-            <div class="col-span-12  p-5">
-              <div class="grid grid-cols-12">
-                <div class="col-span-12 font-bold flex text-2xl mb-5">
-                  Service Call History
-                </div>
-              </div>
-              <div v-if="!serviceCalls || serviceCalls.length === 0" class="text-center p-10 bg-base-200 rounded-md">
-                <p>No service call history found for this customer.</p>
-              </div>
-              <div v-else class="overflow-x-auto rounded-lg">
-                <table class="min-w-full divide-y divide-gray-700">
-                  <thead class="bg-base-200">
-                    <tr>
-                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
-                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
-                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
-                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
-                    </tr>
-                  </thead>
-                  <tbody class="bg-base-100 divide-y divide-gray-700">
-                    <tr v-for="service in serviceCalls" :key="service.id" @click="openEditModal(service)" class="hover:bg-base-300 cursor-pointer">
-                      <td class="px-6 py-4 whitespace-nowrap">{{ formatDate(service.scheduled_date) }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ formatTime(service.scheduled_date) }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
-                        {{ getServiceTypeName(service.type_service_call) }}
-                      </td>
-                      <td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            <div class="col-span-12  p-5">
-              <div class="grid grid-cols-12">
-                <div class="col-span-12 font-bold flex text-2xl mb-5">Automatic Deliveries</div>
-              </div>
-              <div v-if="!autodeliveries || autodeliveries.length === 0" class="text-center p-10 bg-base-200 rounded-md">
-                <p>No automatic delivery history found.</p>
-              </div>
-              <div v-else class="overflow-x-auto rounded-lg">
-                <table class="min-w-full divide-y divide-gray-700">
-                  <thead class="bg-base-200">
-                    <tr>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">id</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Name</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Town</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Gallons</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
-                    </tr>
-                  </thead>
-                  <tbody class="bg-base-100 divide-y divide-gray-700">
-                    <tr v-for="auto in autodeliveries" :key="auto['id']" class="hover:bg-base-300">
-                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['id'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_full_name'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_address'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_town'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['gallons_delivered'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['fill_date'] }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            <div class="col-span-12  p-5">
-              <div class="grid grid-cols-12">
-                <div class="col-span-12 font-bold flex text-2xl mb-5">Orders</div>
-              </div>
-              <div v-if="!deliveries || deliveries.length === 0" class="text-center p-10 bg-base-200 rounded-md">
-                <p>No order history found.</p>
-              </div>
-              <div v-else class="overflow-x-auto rounded-lg">
-                <table class="min-w-full divide-y divide-gray-700">
-                  <thead class="bg-base-200">
-                    <tr>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">id</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Status</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Name</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Town</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Gallons</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
-                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider"></th>
-                    </tr>
-                  </thead>
-                  <tbody class="bg-base-100 divide-y divide-gray-700">
-                    <tr v-for="oil in deliveries" :key="oil['id']" class="hover:bg-base-300">
-                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['id'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">
-                        <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                        <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
-                        <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                        <div v-else-if="oil['delivery_status'] == 3">Tommorrow</div>
-                        <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                        <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
-                        <div v-else></div>
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_name'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_address'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_town'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap" v-if="oil['delivery_status'] != 10">
-                        <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-                        <div v-else> {{ oil['gallons_ordered'] }}</div>
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap" v-else>
-                        {{ oil['gallons_delivered'] }}
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['expected_delivery_date'] }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                        <div class="flex gap-2">
-                          <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                            <button class="btn btn-secondary btn-sm">View</button>
-                          </router-link>
-                          <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                            <button class="btn btn-sm btn-secondary">Edit</button>
-                          </router-link>
-                          <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }"
-                            v-if="oil['delivery_status'] != 10">
-                            <button class="btn btn-secondary btn-sm">Finalize</button>
-                          </router-link>
-                          <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                            <button class="btn btn-success btn-sm">Print Ticket</button>
-                          </router-link>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <Footer />
-
-  <ServiceEditModal
-      v-if="selectedServiceForEdit"
-      :service="selectedServiceForEdit"
-      @close-modal="closeEditModal"
-      @save-changes="handleSaveChanges"
-      @delete-service="handleDeleteService"
-  />
-
-  <PartsEditModal
-      v-if="isPartsModalOpen && currentParts"
-      :customer-id="customer.id"
-      :existing-parts="currentParts"
-      @close-modal="closePartsModal"
-      @save-parts="handleSaveParts"
-    />
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import axios from 'axios'
-import authHeader from '../../../services/auth.header'
-import Header from '../../../layouts/headers/headerauth.vue'
-import SideBar from '../../../layouts/sidebar/sidebar.vue'
-import Footer from '../../../layouts/footers/footer.vue'
-import PaginationComp from "../../../components/pagination.vue";
-import { notify } from "@kyvg/vue3-notification";
-import "leaflet/dist/leaflet.css";
-import L from 'leaflet';
-import iconUrl from 'leaflet/dist/images/marker-icon.png';
-import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
-import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
-import dayjs from 'dayjs';
-import ServiceEditModal from '../../service/ServiceEditModal.vue';
-import PartsEditModal from '../service/PartsEditModal.vue'; 
-
-L.Icon.Default.mergeOptions({
-  iconUrl: iconUrl,
-  shadowUrl: shadowUrl,
-});
-
-interface ServiceCall {
-  id: number;
-  scheduled_date: string;
-  customer_name: string;
-  customer_address: string;
-  customer_town: string;
-  type_service_call: number;
-  description: string;
-}
-
-interface ServiceParts {
-  id?: number;
-  customer_id: number;
-  oil_filter: string;
-  oil_filter_2: string;
-  oil_nozzle: string;
-  oil_nozzle_2: string;
-}
-
-export default defineComponent({
-  name: 'CustomerProfile',
-  components: {
-    Header,
-    SideBar,
-    Footer,
-    LMap,
-    LTileLayer,
-    ServiceEditModal,
-    PartsEditModal,
-  },
-  data() {
-    return {
-      zoom: 14,
-      token: null,
-user: null as { user_id: number; user_name: string; confirmed: string; } | null,
-      isTrue: true,
-      automatic_status: 0,
-      automatic_response: 0,
-      customer_last_delivery: '',
-      comments: [ { id: 0, created: '', customer_id: 0, poster_employee_id: 0, comment: '' } ],
-      CreateSocialForm: { basicInfo: { comment: '' } },
-      credit_cards: [ { id: 0, name_on_card: '', main_card: false, card_number: '', expiration_month: 0, type_of_card: '', last_four_digits: '', expiration_year: '', zip_code: '', security_number: '' } ],
-      credit_cards_count: 0,
-      customer: { id: 0, user_id: 0, customer_first_name: '', customer_last_name: '', customer_town: '', customer_address: '', customer_state: 0, customer_zip: '', customer_apt: '', customer_home_type: 0, customer_phone_number: '', customer_latitude: 0, customer_longitude: 0, correct_address: true, account_number: '' },
-      customer_description: { id: 0, customer_id: 0, account_number: '', company_id: '', fill_location: 0, description: '' },
-      customer_tank: { id: 0, last_tank_inspection: null, tank_status: false, outside_or_inside: false, tank_size: 0 },
-      customer_stats: { id: 0, customer_id: 0, total_calls: 0, service_calls_total: 0, service_calls_total_spent: 0, service_calls_total_profit: 0, oil_deliveries: 0, oil_total_gallons: 0, oil_total_spent: 0, oil_total_profit: 0 },
-      deliveries: [],
-      autodeliveries: [],
-      delivery_page: 1,
-      delivery_perPage: 50,
-      delivery_recordsLength: 0,
-      delivery_options: { delivery_edgeNavigation: false, delivery_format: false, delivery_template: PaginationComp },
-      serviceCalls: [] as ServiceCall[],
-      selectedServiceForEdit: null as ServiceCall | null,
-      isPartsModalOpen: false,
-      currentParts: null as ServiceParts | null,
-    }
-  },
-  computed: {
-    hasPartsData() {
-      if (!this.currentParts) return false;
-      return !!(this.currentParts.oil_filter || this.currentParts.oil_filter_2 || this.currentParts.oil_nozzle || this.currentParts.oil_nozzle_2);
-    }
-  },
-  created() {
-    this.getCustomer(this.$route.params.id);
-  },
-  mounted() {
-    // getPage is now called from within getCustomer, so this can be removed if it's redundant
-  },
-  watch: {
-    '$route.params.id'(newId) {
-      if (newId) {
-        this.getCustomer(newId);
-      }
-    },
-  },
-  methods: {
-    getPage: function (page: any) {
-      if (this.customer && this.customer.id) {
-        this.getCustomerDelivery(this.customer.id, page);
-      }
-    },
-    getCustomer(userid: any) {
-      if (!userid) return;
-      let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customer = response.data;
-        
-        // --- ALL DEPENDENT API CALLS ARE NOW CHAINED HERE ---
-        this.userStatus();
-        this.getCreditCards(this.customer.id); // Assuming this uses user_id
-        this.getCreditCardsCount(this.customer.id); // Assuming this uses user_id
-        this.getCustomerSocial(this.customer.id, 1);
-        this.getPage(this.delivery_page);
-        this.checktotalOil(this.customer.id);
-        this.getCustomerTank(this.customer.id);
-        this.userAutomaticStatus(this.customer.id);
-        this.getCustomerDescription(this.customer.id);
-        this.getCustomerStats(this.customer.id);
-        this.getCustomerLastDelivery(this.customer.id);
-        this.getServiceCalls(this.customer.id);
-        this.fetchCustomerParts(this.customer.id);
-      }).catch((error: any) => {
-          console.error("CRITICAL: Failed to fetch main customer data. Aborting other calls.", error);
-      });
-    },
-    userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      }).then((response: any) => {
-          if (response.data.ok) {
-            this.user = response.data.user;
-          }
-      }).catch(() => { this.user = null });
-    },
-    userAutomaticStatus(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/status/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.automatic_status = response.data.status
-        if (this.automatic_status === 1){
-          this.getCustomerAutoDelivery(this.customer.id)
-        }
-        this.checktotalOil(this.customer.id)
-      })
-    },
-    userAutomatic(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/assign/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.automatic_response = response.data.status
-        if (this.automatic_response == 1) {
-          this.$notify({ title: "Automatic Status", text: 'Customer is now Automatic Customer', type: 'Success' });
-        } else if (this.automatic_response == 2) {
-          this.$notify({ title: "Automatic Status", text: 'Customer does not have a main credit card.  Can not make automatic.', type: 'Error' });
-        } else if (this.automatic_response == 3) {
-          this.$notify({ title: "Automatic Status", text: 'Customer is now a Call in ', type: 'Info' });
-        } else {
-          this.$notify({ title: "Automatic Status", text: 'Customer is now Manual Customer', type: 'Warning' });
-        }
-        this.getCustomer(this.$route.params.id);
-      })
-    },
-    getNozzleColor(nozzleString: string): string {
-      if (!nozzleString || typeof nozzleString !== 'string') return '';
-      const firstChar = nozzleString.trim().toLowerCase().charAt(0);
-      switch (firstChar) {
-        case 'a': return '#EF4444';
-        case 'b': return '#3B82F6';
-        case 'w': return '#16a34a';
-        default: return 'inherit';
-      }
-    },
-    getCustomerLastDelivery(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/stats/user/lastdelivery/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customer_last_delivery = response.data.date
-      })
-    },
-    getCustomerStats(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/stats/user/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customer_stats = response.data
-      })
-    },
-    checktotalOil(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/stats/gallons/check/total/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      })
-    },
-    getCustomerDescription(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/description/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customer_description = response.data
-      })
-    },
-    getCustomerTank(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/tank/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customer_tank = response.data
-      })
-    },
-    getCreditCards(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/payment/cards/' + user_id;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.credit_cards = response.data
-      })
-    },
-    getCreditCardsCount(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/payment/cards/onfile/' + user_id;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.credit_cards_count = response.data.cards
-      })
-    },
-    getCustomerAutoDelivery(userid: any) {
-      let path = import.meta.env.VITE_AUTO_URL + '/delivery/all/profile/' + userid ;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.autodeliveries = response.data
-      })
-    },
-    getCustomerDelivery(userid: any, delivery_page: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/delivery/customer/' + userid + '/' + delivery_page;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.deliveries = response.data
-      })
-    },
-    editCard(card_id: any) {
-      this.$router.push({ name: "cardedit", params: { id: card_id } });
-    },
-    removeCard(card_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/payment/card/remove/' + card_id;
-      axios({
-        method: 'delete',
-        url: path,
-        headers: authHeader(),
-      }).then(() => {
-        this.getCreditCards(this.customer.user_id)
-        this.getCreditCardsCount(this.customer.user_id)
-        notify({ title: "Card Status", text: "Card Removed", type: "Success" });
-      })
-    },
-    deleteCall(delivery_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
-      axios({
-        method: 'delete',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        if (response.data.ok) {
-          notify({ title: "Success", text: "deleted delivery", type: "success" });
-          this.getPage(1)
-        } else {
-          notify({ title: "Failure", text: "error deleting delivery", type: "success" });
-        }
-      })
-    },
-    deleteCustomerSocial(comment_id: number) {
-      let path = import.meta.env.VITE_BASE_URL + '/social/delete/' + comment_id;
-      axios({
-        method: 'delete',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        console.log(response)
-        this.getCustomerSocial(this.customer.id, 1)
-      })
-    },
-    getCustomerSocial(userid: any, delivery_page: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/social/posts/' + userid + '/' + delivery_page;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.comments = response.data
-      })
-    },
-    CreateSocialComment(payload: { comment: string; poster_employee_id: number }) {
-      let path = import.meta.env.VITE_BASE_URL + "/social/create/" + this.customer.id;
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.getCustomerSocial(this.customer.id, 1)
-          }
-          if (response.data.error) {
-            this.$router.push("/");
-          }
-        })
-    },
-onSubmitSocial() {
-  if (!this.user) {
-    console.error("Cannot submit comment: user is not logged in.");
-    return; // Stop the function from proceeding
-  }
-  
-  let payload = { comment: this.CreateSocialForm.basicInfo.comment, poster_employee_id: this.user.user_id };
-  this.CreateSocialComment(payload);
-},
-    getServiceCalls(customerId: number) {
-        let path = `${import.meta.env.VITE_BASE_URL}/service/for-customer/${customerId}`;
-        axios({
-            method: 'get',
-            url: path,
-            headers: authHeader(),
-            withCredentials: true,
-        }).then((response: any) => {
-            this.serviceCalls = response.data;
-        }).catch((error: any) => {
-            console.error("Failed to get customer service calls:", error);
-        });
-    },
-    openEditModal(service: ServiceCall) {
-      this.selectedServiceForEdit = service;
-    },
-    closeEditModal() {
-      this.selectedServiceForEdit = null;
-    },
-    async handleSaveChanges(updatedService: ServiceCall) {
-      try {
-        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
-        await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
-        this.getServiceCalls(this.customer.id);
-        this.closeEditModal();
-      } catch (error) {
-        console.error("Failed to save service call changes:", error);
-      }
-    },
-    async handleDeleteService(serviceId: number) {
-      if (!window.confirm("Are you sure you want to delete this service call?")) return;
-      try {
-        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
-        const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
-        if(response.data.ok) {
-            this.getServiceCalls(this.customer.id);
-            this.closeEditModal();
-             notify({ title: "Success", text: "Service call deleted!", type: "success" });
-        }
-      } catch (error) {
-        console.error("Failed to delete service call:", error);
-      }
-    },
-    async fetchCustomerParts(customerId: number) {
-        try {
-            const path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
-            const response = await axios.get(path, { headers: authHeader() });
-            this.currentParts = response.data;
-        } catch (error) {
-            console.error("Failed to fetch customer parts:", error);
-            notify({ title: "Error", text: "Could not fetch equipment parts.", type: "error" });
-        }
-    },
-    openPartsModal() {
-      if (this.currentParts) {
-        this.isPartsModalOpen = true;
-      } else {
-        notify({ title: "Info", text: "Parts data still loading, please wait.", type: "info" });
-      }
-    },
-    closePartsModal() {
-      this.isPartsModalOpen = false;
-    },
-    async handleSaveParts(partsToSave: ServiceParts) {
-        try {
-            const path = `${import.meta.env.VITE_BASE_URL}/service/parts/update/${partsToSave.customer_id}`;
-            const response = await axios.post(path, partsToSave, { headers: authHeader() });
-            
-            if(response.data.ok) {
-                this.currentParts = partsToSave;
-                 notify({ title: "Success", text: "Equipment parts saved successfully!", type: "success" });
-            }
-            this.closePartsModal();
-        } catch (error) {
-            console.error("Failed to save parts:", error);
-            notify({ title: "Error", text: "Failed to save equipment parts.", type: "error" });
-        }
-    },
-    formatDate(dateString: string): string {
-      if (!dateString) return 'N/A';
-      return dayjs(dateString).format('MMMM D, YYYY');
-    },
-    formatTime(dateString: string): string {
-      if (!dateString) return 'N/A';
-      return dayjs(dateString).format('h:mm A');
-    },
-    getServiceTypeName(typeId: number): string {
-      const typeMap: { [key: number]: string } = { 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' };
-      return typeMap[typeId] || 'Unknown Service';
-    },
-    getServiceTypeColor(typeId: number): string {
-       const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
-      return colorMap[typeId] || 'gray';
-    }
-  },
-})
-</script>
-
-<style scoped></style>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile.vue b/src/pages/customer/profile/profile.vue
new file mode 100755
index 0000000..902861c
--- /dev/null
+++ b/src/pages/customer/profile/profile.vue
@@ -0,0 +1,602 @@
+<!-- src/views/Profile.vue -->
+<template>
+  <div class="w-full min-h-screen bg-base-200 px-4 md:px-10">
+    <!-- ... breadcrumbs ... -->
+
+    <div v-if="customer && customer.id" class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+      
+      <!-- FIX: Changed `lg:` to `xl:` for a later breakpoint -->
+      <div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
+
+        <!-- FIX: Changed `lg:` to `xl:` -->
+        <div class="xl:col-span-8 space-y-6">
+          
+          <div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
+            <ProfileMap 
+              class="xl:col-span-7"
+              :customer="customer" 
+            />
+            <ProfileSummary 
+              class="xl:col-span-5"
+              :customer="customer" 
+              :automatic_status="automatic_status"
+              @toggle-automatic="userAutomatic"
+            />
+          </div>
+          
+          <AutomaticDeliveries v-if="automatic_status === 1 && autodeliveries.length > 0" :deliveries="autodeliveries" />
+          
+          <HistoryTabs 
+            :deliveries="deliveries"
+            :service-calls="serviceCalls"
+            @open-service-modal="openEditModal"
+          />
+        </div>
+
+
+
+        <!-- FIX: Changed `lg:` to `xl:` -->
+        <div class="xl:col-span-4 space-y-6">
+          <CustomerComments 
+            :comments="comments" 
+            @add-comment="onSubmitSocial" 
+            @delete-comment="deleteCustomerSocial" 
+          />
+          <CustomerStats :stats="customer_stats" :last_delivery="customer_last_delivery" />
+          <TankInfo :customer_id="customer.id" :tank="customer_tank" :description="customer_description" />
+          <EquipmentParts :parts="currentParts" @open-parts-modal="openPartsModal" />
+          <CreditCards 
+            :cards="credit_cards" 
+            :count="credit_cards_count" 
+            :user_id="customer.user_id"
+            @edit-card="editCard" 
+            @remove-card="removeCard" 
+          />
+          
+        </div>
+      </div>
+    </div>
+    
+    <!-- A loading indicator is shown while the API call is in progress -->
+    <div v-else class="flex justify-center items-center mt-20">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <!-- The Footer can be placed here if it's specific to this page -->
+    <Footer />
+  </div>
+
+
+  <!-- Modals remain at the root of the template for proper display -->
+  <ServiceEditModal
+      v-if="selectedServiceForEdit"
+      :service="selectedServiceForEdit"
+      @close-modal="closeEditModal"
+      @save-changes="handleSaveChanges"
+      @delete-service="handleDeleteService"
+  />
+  <PartsEditModal
+      v-if="isPartsModalOpen && currentParts"
+      :customer-id="customer.id"
+      :existing-parts="currentParts"
+      @close-modal="closePartsModal"
+      @save-parts="handleSaveParts"
+    />
+</template>
+
+<script lang="ts">
+// --- SCRIPT REMAINS EXACTLY THE SAME AS YOUR ORIGINAL FILE ---
+// All data properties, computed, methods, and imports are kept here.
+// No changes are needed in the script block.
+import { defineComponent } from 'vue'
+import axios from 'axios'
+import authHeader from '../../../services/auth.header'
+import Header from '../../../layouts/headers/headerauth.vue'
+import SideBar from '../../../layouts/sidebar/sidebar.vue'
+import Footer from '../../../layouts/footers/footer.vue'
+import { notify } from "@kyvg/vue3-notification";
+import "leaflet/dist/leaflet.css";
+import L from 'leaflet';
+import iconUrl from 'leaflet/dist/images/marker-icon.png';
+import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
+import dayjs from 'dayjs';
+import ServiceEditModal from '../../service/ServiceEditModal.vue';
+import PartsEditModal from '../service/PartsEditModal.vue'; 
+
+// Import new child components
+import ProfileMap from './profile/ProfileMap.vue';
+import ProfileSummary from './profile/ProfileSummary.vue';
+import CustomerStats from './profile/CustomerStats.vue';
+import TankInfo from './profile/TankInfo.vue';
+import EquipmentParts from './profile/EquipmentParts.vue';
+import CreditCards from './profile/CreditCards.vue';
+import CustomerComments from './profile/CustomerComments.vue';
+import AutomaticDeliveries from './profile/AutomaticDeliveries.vue';
+import HistoryTabs from './profile/HistoryTabs.vue';
+
+
+L.Icon.Default.mergeOptions({
+  iconUrl: iconUrl,
+  shadowUrl: shadowUrl,
+});
+
+interface Delivery {
+  id: number;
+  delivery_status: number;
+  customer_name: string;
+  customer_asked_for_fill: number | boolean;
+  gallons_ordered: number | string;
+  gallons_delivered: number | string | null;
+  expected_delivery_date: string;
+}
+
+interface AutomaticDelivery {
+  id: number;
+  customer_full_name: string;
+  gallons_delivered: number | string;
+  fill_date: string;
+}
+
+interface CreditCard {
+  id: number;
+  main_card: boolean;
+  type_of_card: string;
+  name_on_card: string;
+  card_number: string;
+  expiration_month: number;
+  expiration_year: string | number;
+  zip_code: string;
+  security_number: string;
+}
+
+// You already have these, just make sure they exist
+interface ServiceCall {
+  id: number;
+  scheduled_date: string;
+  customer_name: string;
+  customer_address: string;
+  customer_town: string;
+  type_service_call: number;
+  description: string;
+}
+
+interface ServiceParts {
+  id?: number;
+  customer_id: number;
+  oil_filter: string;
+  oil_filter_2: string;
+  oil_nozzle: string;
+  oil_nozzle_2: string;
+}
+
+
+
+export default defineComponent({
+  name: 'CustomerProfile',
+  components: {
+    Header,
+    SideBar,
+    Footer,
+    LMap,
+    LTileLayer,
+    ServiceEditModal,
+    PartsEditModal,
+    // Register new components
+ ProfileMap,
+    ProfileSummary,
+    CustomerStats,
+    TankInfo,
+    EquipmentParts,
+    CreditCards,
+    CustomerComments,
+    AutomaticDeliveries,
+    HistoryTabs,
+  },
+  data() {
+   return {
+      zoom: 14,
+      user: null as { user_id: number; user_name: string; confirmed: string; } | null,
+      automatic_status: 0,
+      customer_last_delivery: '',
+      comments: [ { id: 0, created: '', customer_id: 0, poster_employee_id: 0, comment: '' } ],
+      CreateSocialForm: { basicInfo: { comment: '' } },
+
+      // --- UPDATE THESE LINES ---
+      credit_cards: [] as CreditCard[],
+      deliveries: [] as Delivery[],
+      autodeliveries: [] as AutomaticDelivery[],
+      serviceCalls: [] as ServiceCall[],
+      // --- END OF UPDATES ---
+      automatic_response: 0,
+      credit_cards_count: 0,
+      customer: { id: 0, user_id: 0, customer_first_name: '', customer_last_name: '', customer_town: '', customer_address: '', customer_state: 0, customer_zip: '', customer_apt: '', customer_home_type: 0, customer_phone_number: '', customer_latitude: 0, customer_longitude: 0, correct_address: true, account_number: '' },
+      customer_description: { id: 0, customer_id: 0, account_number: '', company_id: '', fill_location: 0, description: '' },
+      customer_tank: { id: 0, last_tank_inspection: null, tank_status: false, outside_or_inside: false, tank_size: 0 },
+      customer_stats: { id: 0, customer_id: 0, total_calls: 0, service_calls_total: 0, service_calls_total_spent: 0, service_calls_total_profit: 0, oil_deliveries: 0, oil_total_gallons: 0, oil_total_spent: 0, oil_total_profit: 0 },
+      delivery_page: 1,
+      selectedServiceForEdit: null as ServiceCall | null,
+      isPartsModalOpen: false,
+      currentParts: null as ServiceParts | null,
+    }
+  },
+   computed: {
+    hasPartsData() {
+      if (!this.currentParts) return false;
+      return !!(this.currentParts.oil_filter || this.currentParts.oil_filter_2 || this.currentParts.oil_nozzle || this.currentParts.oil_nozzle_2);
+    }
+  },
+  created() {
+    this.getCustomer(this.$route.params.id);
+  },
+  mounted() {
+    // getPage is now called from within getCustomer, so this can be removed if it's redundant
+  },
+  watch: {
+    '$route.params.id'(newId) {
+      if (newId) {
+        this.getCustomer(newId);
+      }
+    },
+  },
+  methods: {
+    // ALL YOUR METHODS from the original file go here without any changes.
+    // getCustomer, userStatus, userAutomatic, etc...
+     getPage: function (page: any) {
+      if (this.customer && this.customer.id) {
+        this.getCustomerDelivery(this.customer.id, page);
+      }
+    },
+     getCustomer(userid: any) {
+      if (!userid) return;
+      let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.customer = response.data;
+        
+        // --- DEPENDENT API CALLS ---
+        this.userStatus();
+        
+        // FIX: Pass the correct ID for payment-related calls
+        this.getCreditCards(this.customer.id);
+        this.getCreditCardsCount(this.customer.id);
+        
+        // These other calls are likely correct as they are customer-specific
+        this.getCustomerSocial(this.customer.id, 1);
+        this.getPage(this.delivery_page);
+        this.checktotalOil(this.customer.id);
+        this.getCustomerTank(this.customer.id);
+        this.userAutomaticStatus(this.customer.id);
+        this.getCustomerDescription(this.customer.id);
+        this.getCustomerStats(this.customer.id);
+        this.getCustomerLastDelivery(this.customer.id);
+        this.getServiceCalls(this.customer.id);
+        this.fetchCustomerParts(this.customer.id);
+
+      }).catch((error: any) => {
+          console.error("CRITICAL: Failed to fetch main customer data. Aborting other calls.", error);
+      });
+    },
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      }).then((response: any) => {
+          if (response.data.ok) {
+            this.user = response.data.user;
+          }
+      }).catch(() => { this.user = null });
+    },
+    userAutomaticStatus(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/status/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.automatic_status = response.data.status
+        if (this.automatic_status === 1){
+          this.getCustomerAutoDelivery(this.customer.id)
+        }
+        this.checktotalOil(this.customer.id)
+      })
+    },
+    userAutomatic(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/assign/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.automatic_response = response.data.status
+        if (this.automatic_response == 1) {
+          this.$notify({ title: "Automatic Status", text: 'Customer is now Automatic Customer', type: 'Success' });
+        } else if (this.automatic_response == 2) {
+          this.$notify({ title: "Automatic Status", text: 'Customer does not have a main credit card.  Can not make automatic.', type: 'Error' });
+        } else if (this.automatic_response == 3) {
+          this.$notify({ title: "Automatic Status", text: 'Customer is now a Call in ', type: 'Info' });
+        } else {
+          this.$notify({ title: "Automatic Status", text: 'Customer is now Manual Customer', type: 'Warning' });
+        }
+        this.getCustomer(this.$route.params.id);
+      })
+    },
+    getNozzleColor(nozzleString: string): string {
+      if (!nozzleString || typeof nozzleString !== 'string') return '';
+      const firstChar = nozzleString.trim().toLowerCase().charAt(0);
+      switch (firstChar) {
+        case 'a': return '#EF4444';
+        case 'b': return '#3B82F6';
+        case 'w': return '#16a34a';
+        default: return 'inherit';
+      }
+    },
+    getCustomerLastDelivery(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/stats/user/lastdelivery/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.customer_last_delivery = response.data.date
+      })
+    },
+    getCustomerStats(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/stats/user/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.customer_stats = response.data
+      })
+    },
+    checktotalOil(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/stats/gallons/check/total/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      })
+    },
+    getCustomerDescription(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/customer/description/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.customer_description = response.data
+      })
+    },
+    getCustomerTank(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/customer/tank/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.customer_tank = response.data
+      })
+    },
+    getCreditCards(user_id: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/payment/cards/' + user_id;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.credit_cards = response.data
+      })
+    },
+    getCreditCardsCount(user_id: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/payment/cards/onfile/' + user_id;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.credit_cards_count = response.data.cards
+      })
+    },
+    getCustomerAutoDelivery(userid: any) {
+      let path = import.meta.env.VITE_AUTO_URL + '/delivery/all/profile/' + userid ;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.autodeliveries = response.data
+      })
+    },
+    getCustomerDelivery(userid: any, delivery_page: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/delivery/customer/' + userid + '/' + delivery_page;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.deliveries = response.data
+      })
+    },
+    editCard(card_id: any) {
+      this.$router.push({ name: "cardedit", params: { id: card_id } });
+    },
+    removeCard(card_id: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/payment/card/remove/' + card_id;
+      axios({
+        method: 'delete',
+        url: path,
+        headers: authHeader(),
+      }).then(() => {
+        this.getCreditCards(this.customer.user_id)
+        this.getCreditCardsCount(this.customer.user_id)
+        notify({ title: "Card Status", text: "Card Removed", type: "Success" });
+      })
+    },
+    deleteCall(delivery_id: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
+      axios({
+        method: 'delete',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        if (response.data.ok) {
+          notify({ title: "Success", text: "deleted delivery", type: "success" });
+          this.getPage(1)
+        } else {
+          notify({ title: "Failure", text: "error deleting delivery", type: "success" });
+        }
+      })
+    },
+    deleteCustomerSocial(comment_id: number) {
+      let path = import.meta.env.VITE_BASE_URL + '/social/delete/' + comment_id;
+      axios({
+        method: 'delete',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        console.log(response)
+        this.getCustomerSocial(this.customer.id, 1)
+      })
+    },
+    getCustomerSocial(userid: any, delivery_page: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/social/posts/' + userid + '/' + delivery_page;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.comments = response.data
+      })
+    },
+    CreateSocialComment(payload: { comment: string; poster_employee_id: number }) {
+      let path = import.meta.env.VITE_BASE_URL + "/social/create/" + this.customer.id;
+      axios({
+        method: "post",
+        url: path,
+        data: payload,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.getCustomerSocial(this.customer.id, 1)
+          }
+          if (response.data.error) {
+            this.$router.push("/");
+          }
+        })
+    },
+onSubmitSocial(commentText: string) {
+  if (!this.user) {
+    console.error("Cannot submit comment: user is not logged in.");
+    return;
+  }
+  
+  let payload = { comment: commentText, poster_employee_id: this.user.user_id };
+  this.CreateSocialComment(payload);
+},
+    getServiceCalls(customerId: number) {
+        let path = `${import.meta.env.VITE_BASE_URL}/service/for-customer/${customerId}`;
+        axios({
+            method: 'get',
+            url: path,
+            headers: authHeader(),
+            withCredentials: true,
+        }).then((response: any) => {
+            this.serviceCalls = response.data;
+        }).catch((error: any) => {
+            console.error("Failed to get customer service calls:", error);
+        });
+    },
+    openEditModal(service: ServiceCall) {
+      this.selectedServiceForEdit = service;
+    },
+    closeEditModal() {
+      this.selectedServiceForEdit = null;
+    },
+    async handleSaveChanges(updatedService: ServiceCall) {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
+        await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
+        this.getServiceCalls(this.customer.id);
+        this.closeEditModal();
+      } catch (error) {
+        console.error("Failed to save service call changes:", error);
+      }
+    },
+    async handleDeleteService(serviceId: number) {
+      if (!window.confirm("Are you sure you want to delete this service call?")) return;
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
+        const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
+        if(response.data.ok) {
+            this.getServiceCalls(this.customer.id);
+            this.closeEditModal();
+             notify({ title: "Success", text: "Service call deleted!", type: "success" });
+        }
+      } catch (error) {
+        console.error("Failed to delete service call:", error);
+      }
+    },
+    async fetchCustomerParts(customerId: number) {
+        try {
+            const path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
+            const response = await axios.get(path, { headers: authHeader() });
+            this.currentParts = response.data;
+        } catch (error) {
+            console.error("Failed to fetch customer parts:", error);
+            notify({ title: "Error", text: "Could not fetch equipment parts.", type: "error" });
+        }
+    },
+    openPartsModal() {
+      if (this.currentParts) {
+        this.isPartsModalOpen = true;
+      } else {
+        notify({ title: "Info", text: "Parts data still loading, please wait.", type: "info" });
+      }
+    },
+    closePartsModal() {
+      this.isPartsModalOpen = false;
+    },
+    async handleSaveParts(partsToSave: ServiceParts) {
+        try {
+            const path = `${import.meta.env.VITE_BASE_URL}/service/parts/update/${partsToSave.customer_id}`;
+            const response = await axios.post(path, partsToSave, { headers: authHeader() });
+            
+            if(response.data.ok) {
+                this.currentParts = partsToSave;
+                 notify({ title: "Success", text: "Equipment parts saved successfully!", type: "success" });
+            }
+            this.closePartsModal();
+        } catch (error) {
+            console.error("Failed to save parts:", error);
+            notify({ title: "Error", text: "Failed to save equipment parts.", type: "error" });
+        }
+    },
+    formatDate(dateString: string): string {
+      if (!dateString) return 'N/A';
+      return dayjs(dateString).format('MMMM D, YYYY');
+    },
+    formatTime(dateString: string): string {
+      if (!dateString) return 'N/A';
+      return dayjs(dateString).format('h:mm A');
+    },
+    getServiceTypeName(typeId: number): string {
+      const typeMap: { [key: number]: string } = { 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' };
+      return typeMap[typeId] || 'Unknown Service';
+    },
+    getServiceTypeColor(typeId: number): string {
+       const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
+      return colorMap[typeId] || 'gray';
+    }
+  },
+})
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/AutomaticDeliveries.vue b/src/pages/customer/profile/profile/AutomaticDeliveries.vue
new file mode 100644
index 0000000..bda5f96
--- /dev/null
+++ b/src/pages/customer/profile/profile/AutomaticDeliveries.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body p-4 sm:p-6">
+      <h2 class="card-title">Automatic Delivery History</h2>
+      <div class="divider my-2"></div>
+      <div class="overflow-x-auto">
+        <table class="table table-sm w-full">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Gallons</th>
+              <th>Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="auto in deliveries" :key="auto.id" class="hover">
+              <td>{{ auto.id }}</td>
+              <td>{{ auto.customer_full_name }}</td>
+              <td>{{ auto.gallons_delivered }}</td>
+              <td>{{ auto.fill_date }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 1. Define the AutomaticDelivery interface
+interface AutomaticDelivery {
+  id: number;
+  customer_full_name: string;
+  gallons_delivered: number | string;
+  fill_date: string;
+}
+
+// 2. Define Props using the interface
+interface Props {
+  deliveries: AutomaticDelivery[];
+}
+
+// 3. Use the typed defineProps
+defineProps<Props>();
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/CreditCards.vue b/src/pages/customer/profile/profile/CreditCards.vue
new file mode 100644
index 0000000..ecf38cb
--- /dev/null
+++ b/src/pages/customer/profile/profile/CreditCards.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body p-4 sm:p-6">
+      <div class="card-title flex justify-between items-center">
+        <h2>Credit Cards</h2>
+        <router-link :to="{ name: 'cardadd', params: { id: user_id } }">
+          <button class="btn btn-xs btn-outline btn-success">Add New</button>
+        </router-link>
+      </div>
+
+      <div class="mt-2 text-sm">
+        <div v-if="count === 0" class="text-warning font-semibold">
+          No cards on file. This is a Cash/Check customer until a card is added.
+        </div>
+        <div v-else class="text-success font-semibold">
+          {{ count }} card(s) on file.
+        </div>
+      </div>
+
+      <div class="mt-4 space-y-4">
+        <div v-for="card in cards" :key="card.id" 
+             class="p-4 rounded-lg border" 
+             :class="card.main_card ? 'bg-primary/10 border-primary' : 'bg-base-200 border-base-300'">
+          
+          <div class="flex justify-between items-start">
+            <div>
+              <div class="font-bold">{{ card.name_on_card }}</div>
+              <div class="text-xs opacity-70">{{ card.type_of_card }}</div>
+            </div>
+            <div v-if="card.main_card" class="badge badge-primary badge-sm">Primary</div>
+          </div>
+          
+          <div class="mt-3 text-sm font-mono tracking-wider">
+            <p>{{ card.card_number }}</p>
+            <p>
+              Exp: 
+              <span v-if="card.expiration_month < 10">0</span>{{ card.expiration_month }} / {{ card.expiration_year }}
+            </p>
+          </div>
+
+          <div class="divider my-2"></div>
+          
+          <div class="flex justify-end gap-2">
+            <a @click.prevent="$emit('edit-card', card.id)" class="link link-hover text-xs">Edit</a>
+            <a @click.prevent="$emit('remove-card', card.id)" class="link link-hover text-error text-xs">Remove</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 1. Define the interface for a single credit card object
+interface CreditCard {
+  id: number;
+  main_card: boolean;
+  type_of_card: string;
+  name_on_card: string;
+  card_number: string;
+  expiration_month: number;
+  expiration_year: string | number;
+  zip_code: string;
+  security_number: string;
+}
+
+// 2. Define the interface for the component's props
+interface Props {
+  cards: CreditCard[];
+  count: number;
+  user_id: number;
+}
+
+// 3. Use the generic defineProps to apply the types
+defineProps<Props>();
+
+defineEmits(['edit-card', 'remove-card']);
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/CustomerComments.vue b/src/pages/customer/profile/profile/CustomerComments.vue
new file mode 100644
index 0000000..57df780
--- /dev/null
+++ b/src/pages/customer/profile/profile/CustomerComments.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body p-4 sm:p-6">
+      <h2 class="card-title">Comments & Notes</h2>
+
+      <!-- Styled Form for Adding a New Comment -->
+      <form class="mt-4" @submit.prevent="handleSubmit">
+        <div class="form-control">
+          <textarea v-model="commentText" class="textarea textarea-bordered" rows="3" placeholder="Add a new note..."></textarea>
+          <button type="submit" class="btn btn-primary btn-sm mt-2 self-end">Post Comment</button>
+        </div>
+      </form>
+
+      <div class="divider"></div>
+
+      <!-- Styled List of Existing Comments -->
+      <div class="mt-2 space-y-4">
+        <div v-if="comments.length === 0" class="text-center text-sm opacity-60 py-4">
+          No comments yet.
+        </div>
+        <div v-else v-for="comment in comments" :key="comment.id" class="bg-base-200 rounded-lg p-3">
+          <div class="flex justify-between items-center text-xs opacity-70">
+            <!-- You can display the user/employee who posted it here if you have the data -->
+            <span class="font-semibold">{{ comment.created }}</span>
+            <button @click="$emit('delete-comment', comment.id)" class="btn btn-ghost btn-xs text-error">Delete</button>
+          </div>
+          <p class="mt-2 text-sm whitespace-pre-wrap">{{ comment.comment }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Comment {
+  id: number;
+  created: string;
+  comment: string;
+}
+
+interface Props {
+  comments: Comment[];
+}
+
+defineProps<Props>();
+
+const emit = defineEmits(['add-comment', 'delete-comment']);
+
+const commentText = ref('');
+
+const handleSubmit = () => {
+  if (commentText.value.trim()) {
+    emit('add-comment', commentText.value);
+    commentText.value = ''; // Clear the textarea after submission
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/CustomerDetails.vue b/src/pages/customer/profile/profile/CustomerDetails.vue
new file mode 100644
index 0000000..ce9fc69
--- /dev/null
+++ b/src/pages/customer/profile/profile/CustomerDetails.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body p-4 sm:p-6">
+      <div class="flex justify-between items-center">
+        <h2 class="card-title">Customer Details</h2>
+        <span class="badge" :class="automatic_status === 1 ? 'badge-success' : 'badge-ghost'">
+          {{ automatic_status === 1 ? 'Automatic' : 'Will Call' }}
+        </span>
+      </div>
+      <div class="text-error font-semibold mt-2" v-if="!customer.correct_address">
+        Possible Incorrect Address!
+      </div>
+      <div class="mt-4 space-y-2 text-sm">
+        <p><strong>{{ customer.customer_first_name }} {{ customer.customer_last_name }}</strong></p>
+        <p>{{ customer.customer_address }}<span v-if="customer.customer_apt">, {{ customer.customer_apt }}</span></p>
+        <p>{{ customer.customer_town }}, {{ stateName(customer.customer_state) }} {{ customer.customer_zip }}</p>
+        <p class="pt-2">{{ customer.customer_phone_number }}</p>
+        <p><span class="badge badge-outline badge-sm">{{ homeTypeName(customer.customer_home_type) }}</span></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  customer: { type: Object, required: true },
+  automatic_status: { type: Number, required: true },
+});
+
+const stateName = (id: number) => ['MA', 'RI', 'NH', 'ME', 'VT', 'CT', 'NY'][id] || 'N/A';
+const homeTypeName = (id: number) => ['Residential', 'Apartment', 'Condo', 'Commercial', 'Business', 'Construction', 'Container'][id] || 'Unknown';
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/CustomerStats.vue b/src/pages/customer/profile/profile/CustomerStats.vue
new file mode 100644
index 0000000..9745745
--- /dev/null
+++ b/src/pages/customer/profile/profile/CustomerStats.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body p-4 sm:p-6">
+      <h2 class="card-title">Stats</h2>
+      <div class="text-sm mt-2 space-y-1">
+        <div class="flex justify-between"><span>Total Deliveries:</span> <strong>{{ stats.oil_deliveries }}</strong></div>
+        <div class="flex justify-between"><span>Total Gallons:</span> <strong>{{ stats.oil_total_gallons }}</strong></div>
+        <div class="flex justify-between"><span>Total Service Calls:</span> <strong>{{ stats.total_calls }}</strong></div>
+        <div class="flex justify-between"><span>Last Delivery:</span> <strong>{{ last_delivery || 'N/A' }}</strong></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  stats: { type: Object, required: true },
+  last_delivery: { type: String, default: '' },
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/DeliveriesTable.vue b/src/pages/customer/profile/profile/DeliveriesTable.vue
new file mode 100644
index 0000000..856e2c9
--- /dev/null
+++ b/src/pages/customer/profile/profile/DeliveriesTable.vue
@@ -0,0 +1,88 @@
+<template>
+  <div v-if="!deliveries || deliveries.length === 0" class="text-center p-10">
+    <p>No will-call delivery history found.</p>
+  </div>
+  <div v-else>
+    <!-- DESKTOP TABLE -->
+    <div class="overflow-x-auto hidden lg:block">
+      <table class="table table-sm w-full">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Status</th>
+            <th>Name</th>
+            <th>Gallons</th>
+            <th>Date</th>
+            <th class="text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+            <td>{{ oil.id }}</td>
+            <td><span class="badge badge-sm" :class="statusClass(oil.delivery_status)">{{ deliveryStatus(oil.delivery_status) }}</span></td>
+            <td>{{ oil.customer_name }}</td>
+            <td>
+              <span v-if="oil.delivery_status !== 10">
+                {{ oil.customer_asked_for_fill ? 'FILL' : oil.gallons_ordered }}
+              </span>
+              <span v-else>{{ oil.gallons_delivered }}</span>
+            </td>
+            <td>{{ oil.expected_delivery_date }}</td>
+            <td class="text-right">
+              <div class="flex items-center justify-end gap-1">
+                <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-xs btn-ghost">View</router-link>
+                <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-xs btn-secondary">Edit</router-link>
+                <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-xs btn-success">Print</router-link>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- MOBILE CARDS -->
+    <div class="lg:hidden space-y-4">
+      <div v-for="oil in deliveries" :key="oil.id" class="card card-compact bg-base-200 shadow ">
+        <div class="card-body">
+          <div class="flex justify-between items-start">
+            <div>
+              <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+              <p class="text-xs opacity-70">#{{ oil.id }} on {{ oil.expected_delivery_date }}</p>
+            </div>
+            <div class="badge badge-sm" :class="statusClass(oil.delivery_status)">{{ deliveryStatus(oil.delivery_status) }}</div>
+          </div>
+          <p class="text-sm">Gallons: <strong>{{ oil.customer_asked_for_fill ? 'FILL' : (oil.gallons_delivered || oil.gallons_ordered) }}</strong></p>
+          <div class="card-actions justify-end mt-2">
+            <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-xs btn-ghost">View</router-link>
+            <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-xs btn-secondary">Edit</router-link>
+            <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-xs btn-success">Print</router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 1. Define the shape of a single delivery object
+interface Delivery {
+  id: number;
+  delivery_status: number;
+  customer_name: string;
+  customer_asked_for_fill: number | boolean;
+  gallons_ordered: number | string;
+  gallons_delivered: number | string | null;
+  expected_delivery_date: string;
+}
+
+// 2. Define the props using the interface
+interface Props {
+  deliveries: Delivery[];
+}
+
+// 3. Use the generic version of defineProps to apply the types
+defineProps<Props>();
+
+const deliveryStatus = (s: number) => ({0:'Waiting',1:'Cancelled',2:'Out',3:'Tomorrow',5:'Issue',10:'Finalized'}[s] || 'N/A');
+const statusClass = (s: number) => ({0:'badge-warning',1:'badge-error',2:'badge-info',3:'badge-ghost',5:'badge-error',10:'badge-success'}[s] || '');
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/EquipmentParts.vue b/src/pages/customer/profile/profile/EquipmentParts.vue
new file mode 100644
index 0000000..13558cd
--- /dev/null
+++ b/src/pages/customer/profile/profile/EquipmentParts.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body p-4 sm:p-6">
+      <div class="card-title flex justify-between items-center">
+        <h2>Equipment Parts</h2>
+        <button @click="$emit('open-parts-modal')" class="btn btn-xs btn-outline btn-success">
+          Edit
+        </button>
+      </div>
+      
+      <!-- v-if="parts" correctly handles the null case, preventing errors below -->
+      <div v-if="parts" class="mt-2 text-sm">
+        <div v-if="hasPartsData" class="grid grid-cols-2 gap-x-4 gap-y-2">
+          <div v-if="parts.oil_filter">
+            <div class="font-bold">Oil Filter 1:</div>
+            <div>{{ parts.oil_filter }}</div>
+          </div>
+          <div v-if="parts.oil_filter_2">
+            <div class="font-bold">Oil Filter 2:</div>
+            <div>{{ parts.oil_filter_2 }}</div>
+          </div>
+          <div v-if="parts.oil_nozzle">
+            <div class="font-bold">Oil Nozzle 1:</div>
+            <div :style="{ color: getNozzleColor(parts.oil_nozzle), fontWeight: 'bold' }">{{ parts.oil_nozzle }}</div>
+          </div>
+          <div v-if="parts.oil_nozzle_2">
+            <div class="font-bold">Oil Nozzle 2:</div>
+            <div :style="{ color: getNozzleColor(parts.oil_nozzle_2), fontWeight: 'bold' }">{{ parts.oil_nozzle_2 }}</div>
+          </div>
+        </div>
+        <div v-else>
+          <p class="text-xs opacity-70">No equipment parts information available.</p>
+        </div>
+      </div>
+      <div v-else class="text-xs opacity-70 mt-2">
+        Loading parts info...
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// 1. Define the interface for the parts object.
+interface ServiceParts {
+  id?: number;
+  customer_id: number;
+  oil_filter: string;
+  oil_filter_2: string;
+  oil_nozzle: string;
+  oil_nozzle_2: string;
+}
+
+// 2. Define the Props interface, explicitly allowing 'null'.
+interface Props {
+  parts: ServiceParts | null;
+}
+
+// 3. Use the typed defineProps and assign to a const.
+const props = defineProps<Props>();
+
+defineEmits(['open-parts-modal']);
+
+const hasPartsData = computed(() => {
+  if (!props.parts) return false;
+  return !!(props.parts.oil_filter || props.parts.oil_filter_2 || props.parts.oil_nozzle || props.parts.oil_nozzle_2);
+});
+
+const getNozzleColor = (nozzleString: string): string => {
+  if (!nozzleString) return 'inherit';
+  const firstChar = nozzleString.trim().toLowerCase().charAt(0);
+  switch (firstChar) {
+    case 'a': return '#EF4444'; // Red
+    case 'b': return '#3B82F6'; // Blue
+    case 'w': return '#16a34a'; // Green
+    default: return 'inherit';
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/HistoryTabs.vue b/src/pages/customer/profile/profile/HistoryTabs.vue
new file mode 100644
index 0000000..596412b
--- /dev/null
+++ b/src/pages/customer/profile/profile/HistoryTabs.vue
@@ -0,0 +1,54 @@
+<template>
+  <div role="tablist" class="tabs tabs-lifted">
+    <a role="tab" class="tab [--tab-bg:oklch(var(--b1))] text-base-content" :class="{ 'tab-active': activeTab === 'deliveries' }" @click="activeTab = 'deliveries'">
+      Will-Call Deliveries
+    </a>
+    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-4" v-show="activeTab === 'deliveries'">
+      <DeliveriesTable :deliveries="deliveries" />
+    </div>
+
+    <a role="tab" class="tab [--tab-bg:oklch(var(--b1))] text-base-content" :class="{ 'tab-active': activeTab === 'service' }" @click="activeTab = 'service'">
+      Service History
+    </a>
+    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-4" v-show="activeTab === 'service'">
+      <ServiceCallsTable :service-calls="serviceCalls" @open-service-modal="(service) => $emit('openServiceModal', service)" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DeliveriesTable from './DeliveriesTable.vue';
+import ServiceCallsTable from './ServiceCallsTable.vue';
+
+// 1. Define the interfaces for the data this component receives and passes down.
+// These should match the interfaces in the child components.
+interface Delivery {
+  id: number;
+  delivery_status: number;
+  customer_name: string;
+  customer_asked_for_fill: number | boolean;
+  gallons_ordered: number | string;
+  gallons_delivered: number | string | null;
+  expected_delivery_date: string;
+}
+
+interface ServiceCall {
+  id: number;
+  scheduled_date: string;
+  type_service_call: number;
+  description: string;
+}
+
+// 2. Define the Props interface
+interface Props {
+  deliveries: Delivery[];
+  serviceCalls: ServiceCall[];
+}
+
+// 3. Use the typed defineProps
+defineProps<Props>();
+
+defineEmits(['openServiceModal']);
+const activeTab = ref('deliveries');
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/ProfileHeader.vue b/src/pages/customer/profile/profile/ProfileHeader.vue
new file mode 100644
index 0000000..5dd51ec
--- /dev/null
+++ b/src/pages/customer/profile/profile/ProfileHeader.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body p-4 sm:p-6">
+      <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
+        <h2 class="card-title text-2xl">{{ customer.account_number }}</h2>
+        <div class="flex flex-wrap gap-2 justify-start sm:justify-end">
+          <router-link :to="{ name: 'deliveryCreate', params: { id: customer.id } }" class="btn btn-sm btn-primary">New Delivery</router-link>
+          <router-link :to="{ name: 'CalenderCustomer', params: { id: customer.id } }" class="btn btn-sm btn-info">New Service</router-link>
+          <router-link :to="{ name: 'customerEdit', params: { id: customer.id } }" class="btn btn-sm btn-secondary">Edit Customer</router-link>
+          <button @click="$emit('toggleAutomatic', customer.id)" class="btn btn-sm" 
+            :class="automatic_status === 1 ? 'btn-success' : 'btn-warning'">
+            {{ automatic_status === 1 ? 'Set to Will Call' : 'Set to Automatic' }}
+          </button>
+        </div>
+      </div>
+      <div class="divider my-2"></div>
+      <div class="rounded-lg overflow-hidden" style="height:400px; width:100%">
+        <l-map ref="map" v-model:zoom="zoom" :center="[customer.customer_latitude, customer.customer_longitude]">
+          <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap"></l-tile-layer>
+        </l-map>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import "leaflet/dist/leaflet.css";
+import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
+
+defineProps({
+  customer: { type: Object, required: true },
+  automatic_status: { type: Number, required: true },
+});
+defineEmits(['toggleAutomatic']);
+const zoom = ref(14);
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/ProfileMap.vue b/src/pages/customer/profile/profile/ProfileMap.vue
new file mode 100644
index 0000000..b238fd5
--- /dev/null
+++ b/src/pages/customer/profile/profile/ProfileMap.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="card bg-base-100 shadow-xl h-full">
+    <div class="card-body p-4 sm:p-6">
+      <h2 class="card-title text-2xl mb-4">{{ customer.account_number }}</h2>
+      <div class="rounded-lg overflow-hidden h-full min-h-[400px]">
+        <l-map ref="map" v-model:zoom="zoom" :center="[customer.customer_latitude, customer.customer_longitude]">
+          <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap"></l-tile-layer>
+        </l-map>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import "leaflet/dist/leaflet.css";
+import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
+
+interface Customer {
+  account_number: string;
+  customer_latitude: number;
+  customer_longitude: number;
+}
+
+interface Props {
+  customer: Customer;
+}
+
+defineProps<Props>();
+
+const zoom = ref(14);
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/ProfileSummary.vue b/src/pages/customer/profile/profile/ProfileSummary.vue
new file mode 100644
index 0000000..29101a2
--- /dev/null
+++ b/src/pages/customer/profile/profile/ProfileSummary.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="card bg-base-100 shadow-xl h-full">
+    <div class="card-body p-4 sm:p-6">
+      <!-- Action Buttons -->
+      <div class="flex flex-wrap gap-2">
+        <router-link :to="{ name: 'deliveryCreate', params: { id: customer.id } }" class="btn btn-sm btn-primary">New Delivery</router-link>
+        <router-link :to="{ name: 'CalenderCustomer', params: { id: customer.id } }" class="btn btn-sm btn-info">New Service</router-link>
+        <router-link :to="{ name: 'customerEdit', params: { id: customer.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+        <button @click="$emit('toggleAutomatic', customer.id)" class="btn btn-sm" :class="automatic_status === 1 ? 'btn-success' : 'btn-warning'">
+          {{ automatic_status === 1 ? 'Set to Will Call' : 'Set to Automatic' }}
+        </button>
+      </div>
+
+      <div class="divider my-4"></div>
+
+      <!-- Customer Details -->
+      <div>
+        <div class="flex justify-between items-center">
+          <h2 class="card-title text-lg">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</h2>
+          <span class="badge" :class="automatic_status === 1 ? 'badge-success' : 'badge-ghost'">
+            {{ automatic_status === 1 ? 'Automatic' : 'Will Call' }}
+          </span>
+        </div>
+        <div class="text-error font-semibold mt-2" v-if="!customer.correct_address">
+          Possible Incorrect Address!
+        </div>
+        <div class="mt-4 space-y-2 text-sm">
+          <p>{{ customer.customer_address }}<span v-if="customer.customer_apt">, {{ customer.customer_apt }}</span></p>
+          <p>{{ customer.customer_town }}, {{ stateName(customer.customer_state) }} {{ customer.customer_zip }}</p>
+          <p class="pt-2">{{ customer.customer_phone_number }}</p>
+          <p><span class="badge badge-outline badge-sm">{{ homeTypeName(customer.customer_home_type) }}</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Customer {
+  id: number;
+  customer_first_name: string;
+  customer_last_name: string;
+  correct_address: boolean;
+  customer_address: string;
+  customer_apt: string | null;
+  customer_town: string;
+  customer_state: number;
+  customer_zip: string;
+  customer_phone_number: string;
+  customer_home_type: number;
+}
+
+interface Props {
+  customer: Customer;
+  automatic_status: number;
+}
+
+defineProps<Props>();
+defineEmits(['toggleAutomatic']);
+
+const stateName = (id: number) => ['MA', 'RI', 'NH', 'ME', 'VT', 'CT', 'NY'][id] || 'N/A';
+const homeTypeName = (id: number) => ['Residential', 'Apartment', 'Condo', 'Commercial', 'Business', 'Construction', 'Container'][id] || 'Unknown';
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/ServiceCallsTable.vue b/src/pages/customer/profile/profile/ServiceCallsTable.vue
new file mode 100644
index 0000000..4ac2b94
--- /dev/null
+++ b/src/pages/customer/profile/profile/ServiceCallsTable.vue
@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div v-if="!serviceCalls || serviceCalls.length === 0" class="text-center p-10">
+      <p>No service call history found for this customer.</p>
+    </div>
+    <div v-else class="overflow-x-auto">
+      <table class="table table-sm w-full">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Type</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Note: The @click handler is removed from the <tr> since the row itself is no longer the primary action -->
+          <tr v-for="service in serviceCalls" :key="service.id" class="hover">
+            <td class="align-top">
+              <div>{{ formatDate(service.scheduled_date) }}</div>
+              <div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
+            </td>
+            <td class="align-top">
+              <span class="font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
+                {{ getServiceTypeName(service.type_service_call) }}
+              </span>
+            </td>
+            <td class="whitespace-normal text-sm align-top">
+              <!-- If the text is short OR this row is expanded, show the full text -->
+              <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
+                {{ service.description }}
+                <a v-if="isLongDescription(service.description)" 
+                   @click.prevent="toggleExpand(service.id)" 
+                   href="#" 
+                   class="link link-info link-hover text-xs ml-1 whitespace-nowrap">
+                  Show less
+                </a>
+              </div>
+              <!-- Otherwise, show the truncated text -->
+              <div v-else>
+                {{ truncateDescription(service.description) }}
+                <a @click.prevent="toggleExpand(service.id)" 
+                   href="#" 
+                   class="link link-info link-hover text-xs ml-1 whitespace-nowrap">
+                  Read more
+                </a>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import dayjs from 'dayjs';
+
+interface ServiceCall {
+  id: number;
+  scheduled_date: string;
+  type_service_call: number;
+  description: string;
+}
+
+interface Props {
+  serviceCalls: ServiceCall[];
+}
+
+defineProps<Props>();
+
+// --- NEW LOGIC FOR TEXT TRUNCATION ---
+
+// 1. Define the word limit as a constant for easy changes
+const WORD_LIMIT = 50;
+
+// 2. Create a reactive array to store the IDs of expanded rows
+const expandedIds = ref<number[]>([]);
+
+// 3. Helper function to check if a description is long
+const isLongDescription = (text: string): boolean => {
+  if (!text) return false;
+  return text.split(/\s+/).length > WORD_LIMIT;
+};
+
+// 4. Helper function to truncate the description
+const truncateDescription = (text: string): string => {
+  if (!isLongDescription(text)) return text;
+  const words = text.split(/\s+/);
+  return words.slice(0, WORD_LIMIT).join(' ') + '...';
+};
+
+// 5. Helper function to check if a specific row is expanded
+const isExpanded = (id: number): boolean => {
+  return expandedIds.value.includes(id);
+};
+
+// 6. Function to add/remove an ID from the expanded list
+const toggleExpand = (id: number): void => {
+  const index = expandedIds.value.indexOf(id);
+  if (index === -1) {
+    // If not found, add it to expand
+    expandedIds.value.push(id);
+  } else {
+    // If found, remove it to collapse
+    expandedIds.value.splice(index, 1);
+  }
+};
+
+// --- EXISTING HELPER FUNCTIONS ---
+
+const formatDate = (dateString: string) => dayjs(dateString).format('MMMM D, YYYY');
+const formatTime = (dateString: string) => dayjs(dateString).format('h:mm A');
+const getServiceTypeName = (typeId: number) => ({ 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' }[typeId] || 'Unknown');
+const getServiceTypeColor = (typeId: number) => ({ 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' }[typeId] || 'gray');
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/profile/profile/TankInfo.vue b/src/pages/customer/profile/profile/TankInfo.vue
new file mode 100644
index 0000000..288822e
--- /dev/null
+++ b/src/pages/customer/profile/profile/TankInfo.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body p-4 sm:p-6">
+      <div class="card-title flex justify-between items-center">
+        <h2>Tank Info</h2>
+        <router-link :to="{ name: 'TankEdit', params: { id: customer_id } }" class="btn btn-xs btn-outline btn-success">
+          Edit
+        </router-link>
+      </div>
+      <div class="text-sm mt-2 space-y-1">
+        <div class="flex justify-between">
+          <span>Status:</span>
+          <span class="badge" :class="tank.tank_status ? 'badge-success' : 'badge-error'">
+            {{ tank.tank_status ? 'Inspected' : 'Needs Inspection' }}
+          </span>
+        </div>
+        <div class="flex justify-between"><span>Last Inspection:</span> <strong>{{ tank.last_tank_inspection || 'N/A' }}</strong></div>
+        <div class="flex justify-between"><span>Location:</span> <strong class="badge" :class="tank.outside_or_inside ? '' : 'badge-warning'">{{ tank.outside_or_inside ? 'Inside' : 'Outside' }}</strong></div>
+        <div class="flex justify-between"><span>Size:</span> <strong>{{ tank.tank_size }} Gallons</strong></div>
+        <div class="flex justify-between"><span>Fill Location:</span> <strong>{{ description.fill_location }}</strong></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    customer_id: { type: Number, required: true },
+    tank: { type: Object, required: true },
+    description: { type: Object, required: true }
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/customer/routes.ts b/src/pages/customer/routes.ts
index 65fc4c0..162424d 100755
--- a/src/pages/customer/routes.ts
+++ b/src/pages/customer/routes.ts
@@ -3,7 +3,7 @@
 import CustomerHome from '../customer/home.vue';
 import CustomerCreate from '../customer/create.vue';
 import CustomerEdit from "../customer/edit.vue";
-import CustomerProfile from "./profile/home.vue"
+import CustomerProfile from "./profile/profile.vue"
 import TankEdit from "./tank/edit.vue"
 
 
diff --git a/src/pages/customer/tank/edit.vue b/src/pages/customer/tank/edit.vue
index a9c81de..eb40751 100644
--- a/src/pages/customer/tank/edit.vue
+++ b/src/pages/customer/tank/edit.vue
@@ -1,280 +1,186 @@
 <template>
-    <Header />
-    <div class="flex">
-        <div class="">
-            <SideBar />
-        </div>
-        <div class=" w-full px-10">
-            <div class="text-sm breadcrumbs">
-                <ul>
-                    <li>
-                        <router-link :to="{ name: 'home' }">
-                            Home
-                        </router-link>
-                    </li>
-                    <li>
-                        <router-link :to="{ name: 'customer' }">
-                            Customers
-                        </router-link>
-                    </li>
-                </ul>
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          <li>Edit Tank Details</li>
+        </ul>
+      </div>
+
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4">
+        <h1 v-if="customer.id" class="text-3xl font-bold">
+          Tank for: {{ customer.customer_first_name }} {{ customer.customer_last_name }}
+        </h1>
+        <router-link v-if="customer.id" :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm mt-2 sm:mt-0">
+          Back to Profile
+        </router-link>
+      </div>
+
+      <!-- Main Form Card -->
+      <div class="bg-neutral rounded-lg p-6 mt-6">
+        <form @submit.prevent="onSubmit" class="space-y-6">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+            
+            <!-- Inspection Date -->
+            <div class="form-control">
+              <label class="label"><span class="label-text">Last Inspection Date</span></label>
+              <input v-model="TankForm.last_tank_inspection" type="date" class="input input-bordered input-sm w-full" />
             </div>
 
-
-            <div class="grid grid-cols-1 rounded-md p-6 ">
-                <div class="text-[24px]">
-                    Customer: {{ customer.customer_first_name }} {{ customer.customer_last_name }} | {{ customer.account_number }}
-                </div>
-
-                <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
-                    @submit.prevent="onSubmit">
-
-                    <div class="mb-4">
-                        <label class="block text-white text-sm font-bold mb-2">Inspection Date </label>
-                        <input v-model="CreateTankForm.basicInfo.last_tank_inspection"
-                            class="input input-bordered input-sm w-full max-w-xs" id="title" type="date"
-                            min="2023-01-01" max="2030-01-01" />
-
-                    </div>
-
-                 
-                        <div class="mb-4">
-                        <label class="block text-white text-sm font-bold mb-2">Good Or bad Tank</label>
-                        <label>
-                            <input type="radio" name="goodtank1" value="true" class="radio"
-                                v-model="CreateTankForm.basicInfo.tank_status" />
-                            Good 
-                        </label>
-                        <label>
-                            <input type="radio" name="goodtank2" value="false" class="radio"
-                                v-model="CreateTankForm.basicInfo.tank_status" />
-                            Bad
-                        </label>
-                    </div>
-
-
-
-                    <div class="mb-4">
-                        <label class="block text-white text-sm font-bold mb-2">Tank Size</label>
-                        <input v-model="CreateTankForm.basicInfo.tank_size"
-                            class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                            placeholder="Gallon size of tank" />
-
-                    </div>
-
-
-                    <div class="mb-4">
-                        <label class="block text-white text-sm font-bold mb-2">Inside or Outside</label>
-                        <label>
-                            <input type="radio" name="insideoutside1" value="true" class="radio"
-                                v-model="CreateTankForm.basicInfo.outside_or_inside" />
-                            Inside
-                        </label>
-                        <label>
-
-                            <input type="radio" name="insideoutside2" value="false" class="radio"
-                                v-model="CreateTankForm.basicInfo.outside_or_inside" />
-                            Outside
-                        </label>
-                    </div>
-
-                    <div class="mb-4">
-                        <label class="block text-white text-sm font-bold mb-2">Fill Location</label>
-                        <input v-model="CreateTankForm.basicInfo.fill_location"
-                            class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                            placeholder="Fill Location" />
-
-                    </div>
-
-
-                    <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-                        <button class="btn btn-accent btn-sm">
-                            Save Changes
-                        </button>
-                    </div>
-                </form>
+            <!-- Tank Size -->
+            <div class="form-control">
+              <label class="label"><span class="label-text">Tank Size (Gallons)</span></label>
+              <input v-model="TankForm.tank_size" type="number" placeholder="e.g., 275" class="input input-bordered input-sm w-full" />
             </div>
-        </div>
+
+            <!-- Tank Status -->
+            <div class="form-control">
+              <label class="label"><span class="label-text">Tank Status</span></label>
+              <div class="flex items-center gap-6 bg-base-100 p-2 rounded-lg">
+                <label class="label cursor-pointer gap-2">
+                  <span class="label-text">Good</span> 
+                  <input type="radio" v-model="TankForm.tank_status" :value="true" class="radio radio-primary" />
+                </label>
+                <label class="label cursor-pointer gap-2">
+                  <span class="label-text">Bad</span> 
+                  <input type="radio" v-model="TankForm.tank_status" :value="false" class="radio radio-primary" />
+                </label>
+              </div>
+            </div>
+
+            <!-- Tank Location -->
+            <div class="form-control">
+              <label class="label"><span class="label-text">Tank Location</span></label>
+              <div class="flex items-center gap-6 bg-base-100 p-2 rounded-lg">
+                <label class="label cursor-pointer gap-2">
+                  <span class="label-text">Inside</span> 
+                  <input type="radio" v-model="TankForm.outside_or_inside" :value="true" class="radio radio-primary" />
+                </label>
+                <label class="label cursor-pointer gap-2">
+                  <span class="label-text">Outside</span> 
+                  <input type="radio" v-model="TankForm.outside_or_inside" :value="false" class="radio radio-primary" />
+                </label>
+              </div>
+            </div>
+
+            <!-- Fill Location -->
+            <div class="form-control md:col-span-2">
+              <label class="label"><span class="label-text">Fill Location Description</span></label>
+              <input v-model="TankForm.fill_location" type="text" placeholder="e.g., Left side of house, behind shed" class="input input-bordered input-sm w-full" />
+            </div>
+          </div>
+          
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
+          </div>
+        </form>
+      </div>
     </div>
-
-    <Footer />
+  </div>
+  <Footer />
 </template>
 
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../../services/auth.header'
-import Header from '../../../layouts/headers/headerauth.vue'
-import SideBar from '../../../layouts/sidebar/sidebar.vue'
 import Footer from '../../../layouts/footers/footer.vue'
 
+// Interface for our flat form model
+interface TankFormData {
+  last_tank_inspection: string | null;
+  tank_status: boolean;
+  outside_or_inside: boolean;
+  tank_size: number;
+  fill_location: string;
+}
 
 export default defineComponent({
-    name: 'TankEdit',
-
-    components: {
-        Header,
-        SideBar,
-        Footer,
-    },
-
-    data() {
-        return {
-            user: {
-                id: '',
-            },
-            customer: {
-                id: 0,
-                user_id: 0,
-                customer_first_name: '',
-                customer_last_name: '',
-                customer_town: '',
-                customer_address: '',
-                customer_state: 0,
-                customer_zip: '',
-                customer_apt: '',
-                customer_home_type: 0,
-                customer_phone_number: '',
-                account_number: '',
-            },
-            tank: {
-                customer_id: 0,
-                last_tank_inspection: true,
-                tank_status: true,
-                outside_or_inside: true,
-                tank_size: 0,
-
-            },
-
-            CreateTankForm: {
-                basicInfo: {
-                    last_tank_inspection: null,
-                    tank_status: true,
-                    outside_or_inside: true,
-                    tank_size: 0,
-                    fill_location: 0,
-
-                },
-            },
-        }
-    },
-
-    created() {
-        this.userStatus()
-    },
-    watch: {
-        $route() {
-            this.getCustomer(this.$route.params.id);
-            this.getCustomerDescription(this.$route.params.id);
-            this.getTank(this.$route.params.id);
-        },
-    },
-    mounted() {
-        this.getCustomer(this.$route.params.id);
-        this.getCustomerDescription(this.$route.params.id);
-        this.getTank(this.$route.params.id);
-    },
-    methods: {
-        userStatus() {
-            let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-            axios({
-                method: 'get',
-                url: path,
-                withCredentials: true,
-                headers: authHeader(),
-            })
-                .then((response: any) => {
-                    if (response.data.ok) {
-                        this.user = response.data.user;
-                        this.user.id = response.data.user.id;
-                    }
-                })
-                .catch(() => {
-                    this.user.id = '';
-                })
-        },
-        getCustomer(userid: any) {
-            let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
-            axios({
-                method: 'get',
-                url: path,
-                headers: authHeader(),
-            }).then((response: any) => {
-                this.customer = response.data
-            })
-        },
-        getCustomerDescription(userid: any) {
-        let path = import.meta.env.VITE_BASE_URL + '/customer/description/' + userid;
-        axios({
-            method: 'get',
-            url: path,
-            headers: authHeader(),
-        }).then((response: any) => {
-
-            this.CreateTankForm.basicInfo.fill_location = response.data.fill_location;
+  name: 'TankEdit',
+  components: {
+    Footer,
+  },
+  data() {
+    return {
+      user: null as any,
+      customer: {} as any,
+      // --- REFACTORED: Simplified, flat form object ---
+      TankForm: {
+        last_tank_inspection: null,
+        tank_status: true,
+        outside_or_inside: true,
+        tank_size: 0,
+        fill_location: '',
+      } as TankFormData,
+    }
+  },
+  created() {
+    this.userStatus();
+    const customerId = this.$route.params.id;
+    this.getCustomer(customerId);
+    this.getCustomerDescription(customerId);
+    this.getTank(customerId);
+  },
+  methods: {
+    userStatus() {
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.user = response.data.user;
+          }
         })
-        },
-        getTank(customer_id: any) {
-            let path = import.meta.env.VITE_BASE_URL + "/customer/tank/" + customer_id;
-            axios({
-                method: "get",
-                url: path,
-                withCredentials: true,
-                headers: authHeader(),
-            })
-                .then((response: any) => {
-                    this.tank = response.data
-
-                    this.CreateTankForm.basicInfo.last_tank_inspection = response.data.last_tank_inspection;
-                    this.CreateTankForm.basicInfo.tank_status = response.data.tank_status;
-                    this.CreateTankForm.basicInfo.outside_or_inside = response.data.outside_or_inside;
-                    this.CreateTankForm.basicInfo.tank_size = response.data.tank_size;
-
-                    console.log(this.CreateTankForm.basicInfo.outside_or_inside)
-                    console.log(this.CreateTankForm.basicInfo.tank_status)
-                })
-        },
-        editTank(payload: {
-
-            last_tank_inspection: any;
-            tank_status: boolean;
-            outside_or_inside: boolean;
-            tank_size: number;
-            fill_location: number;
-        }) {
-
-            let path = import.meta.env.VITE_BASE_URL + "/customer/edit/tank/" + this.$route.params.id;
-            axios({
-                method: "put",
-                url: path,
-                data: payload,
-                withCredentials: true,
-                headers: authHeader(),
-            })
-                .then((response: any) => {
-                    if (response.data.ok) {
-                        this.$router.push({ name: "customerProfile", params: { id: this.tank.customer_id } });
-                    }
-                    if (response.data.error) {
-                        this.$router.push("/");
-                    }
-                })
-        },
-        onSubmit() {
-            console.log(this.CreateTankForm.basicInfo.outside_or_inside)
-            console.log(this.CreateTankForm.basicInfo.tank_status)
-            let payload = {
-                last_tank_inspection: this.CreateTankForm.basicInfo.last_tank_inspection,
-                tank_status: this.CreateTankForm.basicInfo.tank_status,
-                outside_or_inside: this.CreateTankForm.basicInfo.outside_or_inside,
-                tank_size: this.CreateTankForm.basicInfo.tank_size,
-                fill_location: this.CreateTankForm.basicInfo.fill_location,
-            };
-            this.editTank(payload);
-        },
+        .catch(() => { this.user = null; });
     },
+    getCustomer(userid: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/${userid}`;
+      axios.get(path, { headers: authHeader() })
+        .then((response: any) => {
+          this.customer = response.data;
+        });
+    },
+    getCustomerDescription(userid: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/description/${userid}`;
+      axios.get(path, { headers: authHeader() })
+        .then((response: any) => {
+          // Only update fill_location if the response has it
+          if (response.data && response.data.fill_location) {
+            this.TankForm.fill_location = response.data.fill_location;
+          }
+        });
+    },
+    getTank(customer_id: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/tank/${customer_id}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data) {
+            // Update the form model with data from the tank endpoint
+            this.TankForm.last_tank_inspection = response.data.last_tank_inspection;
+            this.TankForm.tank_status = response.data.tank_status;
+            this.TankForm.outside_or_inside = response.data.outside_or_inside;
+            this.TankForm.tank_size = response.data.tank_size;
+          }
+        });
+    },
+    editTank(payload: TankFormData) {
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/edit/tank/${this.$route.params.id}`;
+      axios.put(path, payload, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
+          } else {
+            console.error("Failed to edit tank:", response.data.error);
+          }
+        });
+    },
+    onSubmit() {
+      // The payload is simply the entire form object now
+      this.editTank(this.TankForm);
+    },
+  },
 })
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/pages/delivery/create.vue b/src/pages/delivery/create.vue
index 82f97e1..8131720 100755
--- a/src/pages/delivery/create.vue
+++ b/src/pages/delivery/create.vue
@@ -1,88 +1,43 @@
 <template>
-  <Header />
+  
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10">
+
+    <div class="w-full px-10">
       <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'customer' }">
-              Customers
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          <li>Create Delivery for {{ customer.customer_first_name }}</li>
         </ul>
       </div>
 
       <!-- TOP SECTION: Customer Info and Pricing Chart -->
-      <div class="grid grid-cols-12 gap-5 mb-5">
-        <!-- Customer Info -->
-        <div class="col-span-12 lg:col-span-6 bg-neutral rounded-lg p-5">
-          <div class="col-span-12 py-5 ">
-            <router-link :to="{ name: 'customerProfile', params: { id: customer['id'] } }"
-              class="btn btn-secondary btn-sm">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <!-- Customer Info Card -->
+        <div class="bg-neutral rounded-lg p-5">
+          <div class="flex justify-between items-center mb-4">
+            <div>
+              <div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
+              <div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
+            </div>
+            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm">
               View Profile
             </router-link>
           </div>
-          <div class="grid grid-cols-12">
-            <div class="col-span-12 font-bold flex pb-5 ">{{ customer.account_number }}</div>
-            <div class="col-span-12 font-bold flex">
-              {{ customer.customer_first_name }}
-              {{ customer.customer_last_name }}
-            </div>
-            <div class="col-span-12 font-bold flex">
-              {{ customer.customer_address }}
-              <div v-if="customer.customer_apt != 'None'">
-                {{ customer.customer_apt }}
-              </div>
-            </div>
-            <div class="col-span-12 font-bold flex">
-              <div class="pr-2">
-                {{ customer.customer_town }},
-              </div>
-              <div class="pr-2">
-                <div v-if="customer.customer_state == 0">Massachusetts</div>
-                <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                <div v-else-if="customer.customer_state == 3">Maine</div>
-                <div v-else-if="customer.customer_state == 4">Vermont</div>
-                <div v-else-if="customer.customer_state == 5">Maine</div>
-                <div v-else-if="customer.customer_state == 6">New York</div>
-                <div v-else>Unknown state</div>
-              </div>
-              <div class="pr-2">
-                {{ customer.customer_zip }}
-              </div>
-            </div>
-            <div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
-              {{ customer.customer_apt }}
-            </div>
-            <div class="col-span-12 font-bold flex">
-              <div v-if="customer.customer_home_type == 0">Residential</div>
-              <div v-else-if="customer.customer_home_type == 1">apartment</div>
-              <div v-else-if="customer.customer_home_type == 2">condo</div>
-              <div v-else-if="customer.customer_home_type == 3">commercial</div>
-              <div v-else-if="customer.customer_home_type == 4">business</div>
-              <div v-else-if="customer.customer_home_type == 5">construction</div>
-              <div v-else-if="customer.customer_home_type == 6">container</div>
-            </div>
-            <div class="col-span-12 font-bold flex">
-              {{ customer.customer_phone_number }}
-            </div>
+          <div>
+            <div>{{ customer.customer_address }}</div>
+            <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
+            <div>{{ customer.customer_town }}, {{ customerStateName }} {{ customer.customer_zip }}</div>
+            <div class="text-sm text-gray-400 mt-1">{{ customerHomeTypeName }}</div>
+            <div class="mt-2">{{ customer.customer_phone_number }}</div>
           </div>
         </div>
 
-        <!-- Pricing Chart -->
-        <div class="col-span-12 lg:col-span-6 bg-neutral rounded-lg p-5">
-          <h3 class="text-xl font-bold mb-4">Price Per Gallon</h3>
+        <!-- Pricing Chart Card -->
+        <div class="bg-neutral rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-4">Today's Price Per Gallon</h3>
           <div class="overflow-x-auto">
-            <table class="table w-full">
+            <table class="table table-sm w-full">
               <thead>
                 <tr>
                   <th>Gallons</th>
@@ -90,274 +45,169 @@
                 </tr>
               </thead>
               <tbody>
-                <!-- THE FIX IS ON THE NEXT LINE -->
-                <tr v-for="(price, gallons) in pricingTiers" :key="gallons" class="hover">
-                  <th>{{ gallons }}</th>
-                  <td>${{ parseFloat(price).toFixed(2) }}</td>
-                </tr>
+                 <tr v-for="tier in pricingTiers" :key="tier.gallons" class="hover">
+        <!-- Access properties of the 'tier' object -->
+        <td>{{ tier.gallons }}</td>
+        <td>${{ parseFloat(tier.price.toString()).toFixed(2) }}</td>
+      </tr>
               </tbody>
             </table>
           </div>
         </div>
       </div>
 
-
       <!-- BOTTOM SECTION: Forms -->
-      <div class="grid grid-cols-12 gap-5">
+      <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
         <!-- Create Delivery Form -->
-        <div class="col-span-12 xl:col-span-6 rounded-md p-6 ">
-          <div class="grid grid-cols-12">
-            <div class="col-span-12 text-[24px] ">
-              Create Delivery
+        <div class="p-6 ">
+          <h2 class="text-2xl font-bold mb-4">Create Delivery Order</h2>
+          <form class="space-y-4" @submit.prevent="onDeliverySubmit">
+            <!-- Gallons & Fill -->
+            <div>
+              <label class="label"><span class="label-text font-bold">Gallons Ordered</span></label>
+              <input v-model="formDelivery.gallons_ordered" :disabled="formDelivery.customer_asked_for_fill"
+                class="input input-bordered input-sm w-full max-w-xs" type="number" placeholder="# gallons" />
+              <span v-if="v$.formDelivery.gallons_ordered.$error" class="text-red-500 text-xs mt-1">
+                Gallons are required unless "Fill" is checked.
+              </span>
+            </div>
+            <div class="form-control">
+              <label class="label cursor-pointer justify-start gap-4">
+                <span class="label-text font-bold">Customer Asked for Fill</span>
+                <input v-model="formDelivery.customer_asked_for_fill" type="checkbox" class="checkbox checkbox-sm" />
+              </label>
             </div>
 
-            <form class="col-span-12 rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
-              @submit.prevent="onSubmit">
-
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Fill </label>
-                <input v-model="CreateOilOrderForm.basicInfo.customer_asked_for_fill" class="checkbox checkbox-xs"
-                  id="fill" type="checkbox" />
+            <!-- Payment Section -->
+            <div class="p-4 border rounded-md space-y-3">
+              <label class="label-text font-bold">Payment Method</label>
+              <div class="flex flex-wrap gap-x-6 gap-y-2">
+                <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Cash</span><input v-model="formDelivery.cash" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+                <div v-if="userCards.length > 0" class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Credit</span><input v-model="formDelivery.credit" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+                <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Check</span><input v-model="formDelivery.check" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+                <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Other</span><input v-model="formDelivery.other" type="checkbox" class="checkbox checkbox-xs" /></label></div>
               </div>
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Gallons Ordered</label>
-                <input v-model="CreateOilOrderForm.basicInfo.gallons_ordered"
-                  :disabled="CreateOilOrderForm.basicInfo.customer_asked_for_fill == true"
-                  class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                  placeholder="# gallons" />
-                <span v-if="v$.CreateOilOrderForm.basicInfo.gallons_ordered.$error" class="text-red-600 text-center">
-                  {{ v$.CreateOilOrderForm.basicInfo.gallons_ordered.$errors[0].$message }}
-                </span>
-              </div>
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Expected </label>
-                <input v-model="CreateOilOrderForm.basicInfo.expected_delivery_date"
-                  class="input input-bordered input-sm w-full max-w-xs" id="title" type="date" min="2024-01-01"
-                  max="2030-01-01" />
-                <span v-if="v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$error"
-                  class="text-red-600 text-center">
-                  {{ v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$errors[0].$message }}
-                </span>
-              </div>
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Emergency</label>
-                <input v-model="CreateOilOrderForm.basicInfo.emergency" class="checkbox checkbox-xs" id="prime"
-                  type="checkbox" />
-              </div>
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Prime</label>
-                <input v-model="CreateOilOrderForm.basicInfo.prime" class="checkbox checkbox-xs" id="prime"
-                  type="checkbox" />
-              </div>
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Same Day </label>
-                <input v-model="CreateOilOrderForm.basicInfo.same_day" class="checkbox checkbox-xs" id="same_day"
-                  type="checkbox" />
-              </div>
-
-
-              <div v-if="userCards.length > 0">
-                <div class="flex-1 mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Customer Cards Payment</label>
-                  <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                    id="userCards" v-model="CreateOilOrderForm.basicInfo.userCards">
-
-                    <option class="text-white" v-for="(card, index) in userCards" :key="index" :value="card['id']">
-                      {{ card['type_of_card'] }} {{ card['card_number'] }}
-                    </option>
-                  </select>
-                </div>
-              </div>
-              <div v-else>
-                <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 py-5">
-                  No Cards on File!
-                </div>
-              </div>
-
-              <div class="flex-1 mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Delivery Driver </label>
-                <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                  id="customer_state" v-model="CreateOilOrderForm.basicInfo.driver_driver">
-                  <option class="text-white" v-for="(driver, index) in truckDriversList" :key="index"
-                    :value="driver['id']">
-                    {{ driver['employee_first_name'] }} {{ driver['employee_last_name'] }}
+              <div v-if="userCards.length > 0 && formDelivery.credit">
+                <label class="label"><span class="label-text">Select Card</span></label>
+                <select class="select select-bordered select-sm w-full max-w-xs" v-model="formDelivery.credit_card_id">
+                  <option disabled :value="0">Select a card</option>
+                  <option v-for="card in userCards" :key="card.id" :value="card.id">
+                    {{ card.type_of_card }} - **** {{ card.last_four_digits }}
                   </option>
                 </select>
               </div>
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10 text-error">
-                One or Both must be selected
-              </div>
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Cash</label>
-                <input v-model="CreateOilOrderForm.basicInfo.cash" class="checkbox checkbox-xs" id="cash"
-                  type="checkbox" />
-              </div>
-              <div v-if="userCards.length > 0">
-                <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                  <label class="block text-white text-sm font-bold cursor-pointer label">Credit </label>
-                  <input v-model="CreateOilOrderForm.basicInfo.credit" class="checkbox checkbox-xs" id="Credit"
-                    type="checkbox" />
-                </div>
-              </div>
-              <div v-if="userCards.length > 0">
-                <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                  <label class="block text-white text-sm font-bold cursor-pointer label">Check </label>
-                  <input v-model="CreateOilOrderForm.basicInfo.check" class="checkbox checkbox-xs" id="Check"
-                    type="checkbox" />
-                </div>
-              </div>
-              <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                <label class="block text-white text-sm font-bold cursor-pointer label">Other </label>
-                <input v-model="CreateOilOrderForm.basicInfo.other" class="checkbox checkbox-xs" id="Other"
-                  type="checkbox" />
-              </div>
-              <div class="flex-1 mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Select a Promo</label>
-                <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                  id="userCards" v-model="CreateOilOrderForm.basicInfo.promos">
-                  <option class="text-white" v-for="(promo, index) in promos" :key="index" :value="promo['id']">
-                    {{ promo['name_of_promotion'] }} {{ promo['money_off_delivery'] }}
+              <div v-if="userCards.length === 0" class="text-sm text-warning">No cards on file for credit payment.</div>
+            </div>
+
+            <!-- Date, Driver, Promo -->
+            <div>
+              <label class="label"><span class="label-text font-bold">Expected Delivery Date</span></label>
+              <input v-model="formDelivery.expected_delivery_date" class="input input-bordered input-sm w-full max-w-xs" type="date" />
+              <span v-if="v$.formDelivery.expected_delivery_date.$error" class="text-red-500 text-xs mt-1">Date is required.</span>
+            </div>
+             <div>
+              <label class="label"><span class="label-text font-bold">Assigned Driver</span></label>
+              <select class="select select-bordered select-sm w-full max-w-xs" v-model="formDelivery.driver_employee_id">
+                  <option disabled value="">Select a driver</option>
+                  <option v-for="driver in truckDriversList" :key="driver.id" :value="driver.id">
+                      {{ driver.employee_first_name }} {{ driver.employee_last_name }}
                   </option>
-                </select>
-              </div>
+              </select>
+            </div>
+             <div>
+              <label class="label"><span class="label-text font-bold">Apply Promotion</span></label>
+              <select class="select select-bordered select-sm w-full max-w-xs" v-model="formDelivery.promo_id">
+                  <option :value="0">No Promotion</option>
+                  <option v-for="promo in promos" :key="promo.id" :value="promo.id">
+                      {{ promo.name_of_promotion }} (${{ promo.money_off_delivery }} off)
+                  </option>
+              </select>
+            </div>
 
-              <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Dispatcher Note on Ticket</label>
-                <textarea v-model="CreateOilOrderForm.basicInfo.dispatcher_notes_taken" rows="4"
-                class="textarea block p-2.5 w-full input-bordered " id="description" type="text" placeholder="Notes on ticket" />
-              </div>
+            <!-- Fees -->
+             <div class="p-4 border rounded-md">
+                <label class="label-text font-bold">Fees & Options</label>
+                <div class="flex flex-wrap gap-x-6 gap-y-2">
+                    <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Emergency</span><input v-model="formDelivery.emergency" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+                    <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Prime</span><input v-model="formDelivery.prime" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+                    <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Same Day</span><input v-model="formDelivery.same_day" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+                </div>
+            </div>
 
-              <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-                <button class="btn-sm btn bg-orange-600 text-white">
-                  Create Delivery
-                </button>
-              </div>
-            </form>
-          </div>
+            <!-- Notes -->
+            <div>
+                <label class="label"><span class="label-text font-bold">Dispatcher Notes</span></label>
+                <textarea v-model="formDelivery.dispatcher_notes_taken" rows="3" class="textarea textarea-bordered w-full" placeholder="Notes for the driver..."></textarea>
+            </div>
+
+            <button type="submit" class="btn btn-primary btn-sm">Create Delivery</button>
+          </form>
         </div>
 
         <!-- Add Credit Card Form -->
-        <div class="col-span-12 xl:col-span-6 p-5">
-          <div class="grid grid-cols-12 ">
-            <div class="col-span-12  text-2xl">Add a Credit Card</div>
-            <div class="col-span-12">
-              <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
-                @submit.prevent="onSubmitCard">
-
-                <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-                  <label class="block text-white text-sm font-bold cursor-pointer label">Main Card</label>
-                  <input v-model="CreateCardForm.basicInfo.main_card" class="checkbox" id="fill" type="checkbox" />
+        <div class="p-6 ">
+           <h2 class="text-2xl font-bold mb-4">Add a Credit Card</h2>
+           <form class="space-y-3" @submit.prevent="onCardSubmit">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label class="label"><span class="label-text font-bold">Name on Card</span></label>
+                    <input v-model="formCard.card_name" type="text" placeholder="John M. Doe" class="input input-bordered input-sm w-full" />
+                    <span v-if="v$.formCard.card_name.$error" class="text-red-500 text-xs mt-1">Required</span>
+                  </div>
+                  <div>
+                    <label class="label"><span class="label-text font-bold">Card Number</span></label>
+                    <input v-model="formCard.card_number" type="text" placeholder="4242..." class="input input-bordered input-sm w-full" />
+                    <span v-if="v$.formCard.card_number.$error" class="text-red-500 text-xs mt-1">Required</span>
+                  </div>
+                  <div>
+                    <label class="label"><span class="label-text font-bold">Expiration</span></label>
+                    <div class="flex gap-2">
+                      <select v-model="formCard.expiration_month" class="select select-bordered select-sm w-full">
+                        <option disabled value="">MM</option>
+                        <option v-for="m in 12" :key="m" :value_count="String(m).padStart(2, '0')">{{ String(m).padStart(2, '0') }}</option>
+                      </select>
+                      <select v-model="formCard.expiration_year" class="select select-bordered select-sm w-full">
+                        <option disabled value="">YYYY</option>
+                        <option v-for="y in 10" :key="y" :value_count="(new Date().getFullYear() + y - 1)">{{ new Date().getFullYear() + y - 1 }}</option>
+                      </select>
+                    </div>
+                     <span v-if="v$.formCard.expiration_month.$error || v$.formCard.expiration_year.$error" class="text-red-500 text-xs mt-1">Required</span>
+                  </div>
+                   <div>
+                    <label class="label"><span class="label-text font-bold">CVC / CVV</span></label>
+                    <input v-model="formCard.security_number" type="text" placeholder="123" class="input input-bordered input-sm w-full" />
+                    <span v-if="v$.formCard.security_number.$error" class="text-red-500 text-xs mt-1">Required</span>
+                  </div>
+                   <div>
+                    <label class="label"><span class="label-text font-bold">Card Type</span></label>
+                    <select v-model="formCard.type_of_card" class="select select-bordered select-sm w-full">
+                        <option disabled value="">Select Type</option>
+                        <option>Visa</option><option>MasterCard</option><option>Discover</option><option>American Express</option>
+                    </select>
+                     <span v-if="v$.formCard.type_of_card.$error" class="text-red-500 text-xs mt-1">Required</span>
+                  </div>
+                   <div>
+                    <label class="label"><span class="label-text font-bold">Billing Zip Code</span></label>
+                    <input v-model="formCard.zip_code" type="text" placeholder="01234" class="input input-bordered input-sm w-full" />
+                  </div>
                 </div>
-
-                <div class="mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Name on Card</label>
-                  <input v-model="CreateCardForm.basicInfo.card_name"
-                    class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                    placeholder="Name on Card" />
-                  <span v-if="v$.CreateCardForm.basicInfo.card_name.$error" class="text-red-600 text-center">
-                    {{ v$.CreateCardForm.basicInfo.card_name.$errors[0].$message }}
-                  </span>
-                </div>
-
-                <div class="mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Card Number</label>
-                  <input v-model="CreateCardForm.basicInfo.card_number"
-                    class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                    placeholder="Card Number" />
-                  <span v-if="v$.CreateCardForm.basicInfo.card_number.$error" class="text-red-600 text-center">
-                    {{ v$.CreateCardForm.basicInfo.card_number.$errors[0].$message }}
-                  </span>
-                </div>
-
-                <div class="mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Expiration Month</label>
-                  <select v-model="CreateCardForm.basicInfo.expiration_month"
-                    class="input input-bordered input-sm w-full max-w-xs" id="Month">
-                    <option>01</option>
-                    <option>02</option>
-                    <option>03</option>
-                    <option>04</option>
-                    <option>05</option>
-                    <option>06</option>
-                    <option>07</option>
-                    <option>08</option>
-                    <option>09</option>
-                    <option>10</option>
-                    <option>11</option>
-                    <option>12</option>
-                  </select>
-                </div>
-
-                <div class="mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Expiration Year</label>
-                  <select v-model="CreateCardForm.basicInfo.expiration_year"
-                    class="input input-bordered input-sm w-full max-w-xs" id="Month">
-                    <option>2024</option>
-                    <option>2025</option>
-                    <option>2026</option>
-                    <option>2027</option>
-                    <option>2028</option>
-                    <option>2029</option>
-                    <option>2030</option>
-                  </select>
-
-                  <span v-if="v$.CreateCardForm.basicInfo.expiration_year.$error" class="text-red-600 text-center">
-                    {{ v$.CreateCardForm.basicInfo.expiration_year.$errors[0].$message }}
-                  </span>
-                </div>
-
-                <div class="mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Type of Card</label>
-                  <select v-model="CreateCardForm.basicInfo.type_of_card"
-                    class="input input-bordered input-sm w-full max-w-xs" id="Month">
-                    <option>Visa</option>
-                    <option>MasterCard</option>
-                    <option>Discover</option>
-                    <option>American Express</option>
-                  </select>
-
-                  <span v-if="v$.CreateCardForm.basicInfo.type_of_card.$error" class="text-red-600 text-center">
-                    {{ v$.CreateCardForm.basicInfo.type_of_card.$errors[0].$message }}
-                  </span>
-                </div>
-
-                <div class="mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Security Number</label>
-                  <input v-model="CreateCardForm.basicInfo.security_number"
-                    class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                    placeholder="Back of card" />
-                  <span v-if="v$.CreateCardForm.basicInfo.security_number.$error" class="text-red-600 text-center">
-                    {{ v$.CreateCardForm.basicInfo.security_number.$errors[0].$message }}
-                  </span>
-                </div>
-
-                <div class="mb-4">
-                  <label class="block text-white text-sm font-bold mb-2">Zip Code</label>
-                  <input v-model="CreateCardForm.basicInfo.zip_code"
-                    class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
-                    placeholder="Zip Code" />
-                </div>
-                <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-                  <button class="btn-sm btn bg-orange-600 text-white">
-                    Save Credit Card
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
+                 <div class="form-control">
+                    <label class="label cursor-pointer justify-start gap-4">
+                      <span class="label-text font-bold">Set as Main Card</span>
+                      <input v-model="formCard.main_card" type="checkbox" class="checkbox checkbox-sm" />
+                    </label>
+                  </div>
+                <button type="submit" class="btn btn-secondary btn-sm">Save Credit Card</button>
+           </form>
         </div>
       </div>
-      <div class="grid grid-cols-12 ">
-        <div class="col-span-12 text-center font-bold text-3xl">Remind customer of tank Inspection</div>
-        <div class="col-span-12 text-center font-bold text-3xl">Ask how they heard about us</div>
-      </div>
     </div>
   </div>
-
   <Footer />
 </template>
 
 <script lang="ts">
+
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
@@ -366,348 +216,285 @@ import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
 import { notify } from "@kyvg/vue3-notification"
-import { minLength, required } from "@vuelidate/validators";
+import { minLength, required, requiredIf } from "@vuelidate/validators";
+
+// --- TYPE DEFINITIONS ---
+interface SimpleResponse<T> {
+  data: T;
+}
+interface Customer {
+  id: number;
+  customer_last_name: string;
+  customer_first_name: string;
+  customer_town: string;
+  customer_state: number;
+  customer_zip: string;
+  customer_phone_number: string;
+  customer_home_type: number;
+  customer_apt: string;
+  customer_address: string;
+  account_number: string;
+}
+interface UserCard {
+    id: number;
+    type_of_card: string;
+    last_four_digits: string;
+}
+interface Promo {
+    id: number;
+    name_of_promotion: string;
+    money_off_delivery: number;
+}
+interface Driver {
+    id: number;
+    employee_first_name: string;
+    employee_last_name: string;
+}
+interface PricingTier { // <-- CHANGED: New interface for a single tier
+    gallons: number | string;
+    price: number | string;
+}
+
+// --- Define types for your FLAT form models to match the new template ---
+interface DeliveryFormData {
+  gallons_ordered: string;
+  customer_asked_for_fill: boolean;
+  expected_delivery_date: string;
+  dispatcher_notes_taken: string;
+  prime: boolean;
+  emergency: boolean;
+  same_day: boolean;
+  credit: boolean;
+  cash: boolean;
+  check: boolean;
+  other: boolean;
+  credit_card_id: number;
+  promo_id: number;
+  driver_employee_id: string | number;
+}
+interface CardFormData {
+    card_name: string;
+    card_number: string;
+    expiration_month: string;
+    expiration_year: string;
+    type_of_card: string;
+    security_number: string;
+    zip_code: string;
+    main_card: boolean;
+}
 
 export default defineComponent({
   name: 'deliveryCreate',
-
-  components: {
-    Header,
-    SideBar,
-    Footer,
-  },
-
+  components: { Header, SideBar, Footer },
   data() {
     return {
       v$: useValidate(),
-      user: null,
+      user: null as any,
       checked: false,
-      userCards: [],
-      promos: [],
-      truckDriversList: [],
-      pricingTiers: {}, // NEW: To store pricing data
-      CreateOilOrderForm: {
-        basicInfo: {
-          gallons_ordered: '',
-          customer_asked_for_fill: false,
-          expected_delivery_date: '',
-          dispatcher_notes_taken: '',
-          prime: false,
-          emergency: false,
-          userCards: [],
-          promos: [],
-          same_day: false,
-          credit: false,
-          cash: false,
-          check: false,
-          other: false,
-          credit_card_id: 0,
-          promo_id: 0,
-          driver_driver: '',
-        },
-      },
-      CreateCardForm: {
-        basicInfo: {
-          card_name: '',
-          expiration_month: '',
-          expiration_year: '',
-          type_of_card: '',
-          security_number: '',
-          card_number: '',
-          zip_code: '',
-          main_card: false,
-        },
-      },
-      deliveries: [],
-      customer: {
-        id: 0,
-        customer_last_name: '',
-        customer_first_name: '',
-        customer_town: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_first_call: '',
-        customer_email: '',
-        customer_automatic: '',
-        customer_phone_number: '',
-        customer_home_type: 0,
-        customer_apt: '',
-        customer_address: '',
-        account_number: '',
-      },
+      userCards: [] as UserCard[],
+      promos: [] as Promo[],
+      truckDriversList: [] as Driver[],
+         pricingTiers: [] as PricingTier[],
+      // --- FIX: Use flat form objects that match the template ---
+      formDelivery: {
+        gallons_ordered: '',
+        customer_asked_for_fill: false,
+        expected_delivery_date: '',
+        dispatcher_notes_taken: '',
+        prime: false,
+        emergency: false,
+        same_day: false,
+        credit: false,
+        cash: false,
+        check: false,
+        other: false,
+        credit_card_id: 0,
+        promo_id: 0,
+        driver_employee_id: '',
+      } as DeliveryFormData,
+      formCard: {
+        card_name: '',
+        card_number: '',
+        expiration_month: '',
+        expiration_year: '',
+        type_of_card: '',
+        security_number: '',
+        zip_code: '',
+        main_card: false,
+      } as CardFormData,
+      customer: {} as Customer,
     }
   },
   validations() {
     return {
-      CreateCardForm: {
-        basicInfo: {
-          card_name: { required, minLength: minLength(1) },
-          expiration_month: { required, minLength: minLength(1) },
-          expiration_year: { required, minLength: minLength(1) },
-          security_number: { required, minLength: minLength(1) },
-          type_of_card: { required, minLength: minLength(1) },
-          card_number: { required, minLength: minLength(1) },
-        },
+      // --- FIX: Validation targets the new flat form objects ---
+      formDelivery: {
+        gallons_ordered: { required: requiredIf(function(this: any) {
+              return !this.formDelivery.customer_asked_for_fill;
+            })
+          },
+        expected_delivery_date: { required },
       },
-
-      CreateOilOrderForm: {
-        basicInfo: {
-          gallons_ordered: { required, minLength: minLength(1) },
-          expected_delivery_date: { required },
-        },
+      formCard: {
+        card_name: { required, minLength: minLength(1) },
+        expiration_month: { required },
+        expiration_year: { required },
+        security_number: { required, minLength: minLength(1) },
+        type_of_card: { required },
+        card_number: { required, minLength: minLength(1) },
       },
     };
   },
+  computed: {
+    customerStateName(): string {
+        const states: Record<number, string> = {
+            0: 'Massachusetts', 1: 'Rhode Island', 2: 'New Hampshire',
+            3: 'Maine', 4: 'Vermont', 5: 'Maine', 6: 'New York',
+        };
+        return states[this.customer.customer_state] || 'Unknown state';
+    },
+    customerHomeTypeName(): string {
+        const types: Record<number, string> = {
+            0: 'Residential', 1: 'apartment', 2: 'condo', 3: 'commercial',
+            4: 'business', 5: 'construction', 6: 'container',
+        };
+        return types[this.customer.customer_home_type] || 'Unknown type';
+    }
+  },
   created() {
-    this.userStatus()
     this.getDriversList()
     this.getPromos()
-    this.getPricingTiers() // NEW: Call the method to get prices
+    this.getPricingTiers()
   },
   watch: {
     $route() {
-      this.getCustomer(this.$route.params.id);
-      this.getPaymentCards(this.$route.params.id);
-      this.getCustomerDelivery(this.$route.params.id)
+      const customerId = this.$route.params.id;
+      this.getCustomer(customerId);
+      this.getPaymentCards(customerId);
     },
   },
   mounted() {
-    this.getCustomer(this.$route.params.id)
-    this.getPaymentCards(this.$route.params.id);
-    this.getCustomerDelivery(this.$route.params.id)
+    const customerId = this.$route.params.id;
+    this.getCustomer(customerId)
+    this.getPaymentCards(customerId);
   },
   methods: {
-    // NEW: Method to fetch pricing data
     getPricingTiers() {
       let path = import.meta.env.VITE_BASE_URL + "/info/price/oil/tiers";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
+      axios({ method: "get", url: path, withCredentials: true, headers: authHeader() })
+        .then((response: SimpleResponse<PricingTier[]>) => {
           this.pricingTiers = response.data;
         })
-        .catch(() => {
-          notify({
-            title: "Pricing Error",
-            text: "Could not retrieve today's pricing.",
-            type: "error",
-          });
+        .catch((error: unknown) => {
+          notify({ title: "Pricing Error", text: "Could not retrieve today's pricing.", type: "error" });
         });
     },
-
-    userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.user = response.data.user;
-          }
-        })
-        .catch(() => {
-          this.user = null
-        })
-    },
-
-    getCustomer(user_id: any) {
+    getCustomer(user_id: string | number | string[]) {
       let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
+      axios({ method: "get", url: path, withCredentials: true })
+        .then((response: SimpleResponse<Customer>) => {
           this.customer = response.data;
         })
-        .catch(() => {
-          notify({
-            title: "Error",
-            text: "Could not find customer",
-            type: "error",
-          });
+        .catch((error: unknown) => {
+          notify({ title: "Error", text: "Could not find customer", type: "error" });
         });
     },
-
-    getCustomerDelivery(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/delivery/customer/' + userid + '/1';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.deliveries = response.data
-      })
-    },
-
-    getPaymentCards(user_id: any) {
+    getPaymentCards(user_id: string | number | string[]) {
       let path = import.meta.env.VITE_BASE_URL + "/payment/cards/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
+      axios({ method: "get", url: path, withCredentials: true })
+        .then((response: SimpleResponse<UserCard[]>) => {
           this.userCards = response.data;
         })
-        .catch(() => {
-        });
+        .catch((error: unknown) => { /* empty */ });
     },
     getPromos() {
       let path = import.meta.env.VITE_BASE_URL + "/promo/all";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
+      axios({ method: "get", url: path, withCredentials: true })
+        .then((response: SimpleResponse<Promo[]>) => {
           this.promos = response.data;
         })
-        .catch(() => {
-        });
+        .catch((error: unknown) => { /* empty */ });
     },
     getDriversList() {
       let path = import.meta.env.VITE_BASE_URL + "/employee/drivers";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
+      axios({ method: "get", url: path, withCredentials: true, headers: authHeader() })
+        .then((response: SimpleResponse<Driver[]>) => {
           this.truckDriversList = response.data;
         })
-        .catch(() => {
-        });
-    },
-    CreateOilOrder(payload: {
-      gallons_ordered: string;
-      customer_asked_for_fill: boolean;
-      prime: boolean;
-      same_day: boolean;
-      emergency: boolean;
-      cash: boolean;
-      credit: boolean;
-      check: boolean;
-      other: boolean;
-      expected_delivery_date: string;
-      dispatcher_notes_taken: string;
-      credit_card_id: any;
-      promo_id: any;
-      driver_employee_id: string,
-
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/delivery/create/" + this.customer.id;
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.$router.push({ name: "payOil", params: { id: response.data.delivery_id } });
-          }
-          if (response.data.error) {
-            this.$router.push("/");
-          }
-        })
+        .catch((error: unknown) => { /* empty */ });
     },
 
-    onSubmit() {
+    // --- FIX: Renamed to match template's @submit event ---
+    onDeliverySubmit() {
       let payload = {
-        gallons_ordered: this.CreateOilOrderForm.basicInfo.gallons_ordered,
-        customer_asked_for_fill: this.CreateOilOrderForm.basicInfo.customer_asked_for_fill,
-        expected_delivery_date: this.CreateOilOrderForm.basicInfo.expected_delivery_date,
-        dispatcher_notes_taken: this.CreateOilOrderForm.basicInfo.dispatcher_notes_taken,
-        prime: this.CreateOilOrderForm.basicInfo.prime,
-        emergency: this.CreateOilOrderForm.basicInfo.emergency,
-        same_day: this.CreateOilOrderForm.basicInfo.same_day,
-        cash: this.CreateOilOrderForm.basicInfo.cash,
-        credit: this.CreateOilOrderForm.basicInfo.credit,
-        check: this.CreateOilOrderForm.basicInfo.check,
-        other: this.CreateOilOrderForm.basicInfo.other,
-        credit_card_id: this.CreateOilOrderForm.basicInfo.userCards,
-        promo_id: this.CreateOilOrderForm.basicInfo.promos,
-        driver_employee_id: this.CreateOilOrderForm.basicInfo.driver_driver,
+        gallons_ordered: this.formDelivery.gallons_ordered,
+        customer_asked_for_fill: this.formDelivery.customer_asked_for_fill,
+        expected_delivery_date: this.formDelivery.expected_delivery_date,
+        dispatcher_notes_taken: this.formDelivery.dispatcher_notes_taken,
+        prime: this.formDelivery.prime,
+        emergency: this.formDelivery.emergency,
+        same_day: this.formDelivery.same_day,
+        cash: this.formDelivery.cash,
+        credit: this.formDelivery.credit,
+        check: this.formDelivery.check,
+        other: this.formDelivery.other,
+        credit_card_id: this.formDelivery.credit_card_id,
+        promo_id: this.formDelivery.promo_id,
+        driver_employee_id: this.formDelivery.driver_employee_id,
       };
+
       let pass = 0;
-      if (this.CreateOilOrderForm.basicInfo.driver_driver === '') {
-        notify({
-          title: "Error",
-          text: "Did not add a driver",
-          type: "error",
-        });
+      if (payload.driver_employee_id === '') {
+        notify({ title: "Error", text: "Please assign a driver.", type: "error" });
         pass += 1;
       }
-      if (this.CreateOilOrderForm.basicInfo.cash === false && this.CreateOilOrderForm.basicInfo.credit === false && this.CreateOilOrderForm.basicInfo.check === false && this.CreateOilOrderForm.basicInfo.other === false) {
-        notify({
-          title: "Error",
-          text: "Did not select a payment method",
-          type: "error",
-        });
+      if (!payload.cash && !payload.credit && !payload.check && !payload.other) {
+        notify({ title: "Error", text: "Please select a payment method.", type: "error" });
         pass += 1;
       }
-      if (pass == 0) {
-        this.CreateOilOrder(payload);
+      if (pass === 0) {
+        let path = import.meta.env.VITE_BASE_URL + "/delivery/create/" + this.customer.id;
+        axios({ method: "post", url: path, data: payload, withCredentials: true, headers: authHeader() })
+          .then((response: SimpleResponse<{ ok: boolean; delivery_id: number; error?: string }>) => {
+            if (response.data.ok) {
+              this.$router.push({ name: "payOil", params: { id: response.data.delivery_id } });
+            } else {
+              this.$router.push("/");
+            }
+          });
       }
     },
-
-
-
-    CreateCard(payload: {
-      card_name: string;
-      expiration_month: string;
-      expiration_year: string;
-      type_of_card: string;
-      security_number: string;
-      zip_code: string;
-      card_number: string;
-      main_card: boolean;
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/payment/card/create/" + this.customer.id;
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.getPaymentCards(this.$route.params.id)
-          }
-          if (response.data.error) {
-            notify({
-              title: "Error",
-              text: "Error adding card",
-              type: "error",
-            });
-          }
-        })
-    },
-    onSubmitCard() {
+    
+    // --- FIX: Renamed to match template's @submit event ---
+    onCardSubmit() {
       let payload = {
-        card_name: this.CreateCardForm.basicInfo.card_name,
-        card_number: this.CreateCardForm.basicInfo.card_number,
-        expiration_month: this.CreateCardForm.basicInfo.expiration_month,
-        expiration_year: this.CreateCardForm.basicInfo.expiration_year,
-        type_of_card: this.CreateCardForm.basicInfo.type_of_card,
-        security_number: this.CreateCardForm.basicInfo.security_number,
-        main_card: this.CreateCardForm.basicInfo.main_card,
-        zip_code: this.CreateCardForm.basicInfo.zip_code,
+        card_name: this.formCard.card_name,
+        card_number: this.formCard.card_number,
+        expiration_month: this.formCard.expiration_month,
+        expiration_year: this.formCard.expiration_year,
+        type_of_card: this.formCard.type_of_card,
+        security_number: this.formCard.security_number,
+        main_card: this.formCard.main_card,
+        zip_code: this.formCard.zip_code,
       };
-      this.CreateCard(payload);
+
+      let path = import.meta.env.VITE_BASE_URL + "/payment/card/create/" + this.customer.id;
+      axios({ method: "post", url: path, data: payload, withCredentials: true, headers: authHeader() })
+        .then((response: SimpleResponse<{ ok: boolean; error?: string }>) => {
+          if (response.data.ok) {
+            notify({ type: 'success', title: 'Card Saved!' });
+            this.getPaymentCards(this.$route.params.id);
+            // Optional: Reset form after successful submission
+            Object.assign(this.formCard, { card_name: '', card_number: '', expiration_month: '', expiration_year: '', type_of_card: '', security_number: '', zip_code: '', main_card: false });
+            this.v$.formCard.$reset();
+          } else {
+            notify({ title: "Error", text: "Error adding card", type: "error" });
+          }
+        });
     },
   },
 })
-</script>
 
-<style scoped></style>
\ No newline at end of file
+
+
+</script>
\ No newline at end of file
diff --git a/src/pages/delivery/edit.vue b/src/pages/delivery/edit.vue
index 72b26b9..58ebd48 100755
--- a/src/pages/delivery/edit.vue
+++ b/src/pages/delivery/edit.vue
@@ -1,290 +1,153 @@
 <template>
-  <Header />
-
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10">
+    <!-- Main Content -->
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs Navigation -->
       <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Edit Oil Delivery #{{ deliveryOrder.id }}</li>
         </ul>
       </div>
 
-
-      <div class="grid grid-cols-2 rounded-md p-6 ">
-        <div class="col-span-1">
-        <div class="text-2xl border-b border-gray-500 mb-10">
-          Edit Oil Delivery
-        </div>
-        <div class=" rounded-md">
-          <div class="flex text-2xl">
-            Delivery id: {{ deliveryOrder.id }}
-          </div>
-          <div class="grid grid-cols-12">
-            <div class="col-span-12 py-5">
-              <router-link :to="{ name: 'customerProfile', params: { id: customer['id'] } }"
-                class="btn btn-secondary btn-sm">
-                View Profile
-              </router-link>
-            </div>
-            <div class="col-span-6  p-5">
-              <div class="grid grid-cols-12">
-                <div class="col-span-12 flex">
-                  {{ customer.customer_first_name }}
-                  {{ customer.customer_last_name }}
-                </div>
-                <div class="col-span-12 flex">{{customer.customer_address}}</div>
-                <div class="col-span-12 flex">
-                  <div class="pr-2">
-                    {{ customer.customer_town }},
-                  </div>
-                  <div class="pr-2">
-                    <div v-if="customer.customer_state == 0">Massachusetts</div>
-                    <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                    <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                    <div v-else-if="customer.customer_state == 3">Maine</div>
-                    <div v-else-if="customer.customer_state == 4">Vermont</div>
-                    <div v-else-if="customer.customer_state == 5">Maine</div>
-                    <div v-else-if="customer.customer_state == 6">New York</div>
-                    <div v-else>Unknown state</div>
-                  </div>
-                  <div class="pr-2">
-                    {{ customer.customer_zip }}
-                  </div>
-                </div>
-
-                <div class="col-span-12  flex" v-if="customer.customer_apt !== 'None'">
-                  {{ customer.customer_apt }}
-                </div>
-                <div class="col-span-12  flex">
-                  <div v-if="customer.customer_home_type == 0">Residential</div>
-                  <div v-else-if="customer.customer_home_type == 1">apartment</div>
-                  <div v-else-if="customer.customer_home_type == 2">condo</div>
-                  <div v-else-if="customer.customer_home_type == 3">commercial</div>
-                  <div v-else-if="customer.customer_home_type == 4">business</div>
-                  <div v-else-if="customer.customer_home_type == 5">construction</div>
-                  <div v-else-if="customer.customer_home_type == 6">container</div>
-                </div>
-                <div class="col-span-12  flex">
-                  {{ customer.customer_phone_number }}
-                </div>
-              </div>
+      <!-- TOP SECTION: Customer and Payment Info -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 my-6">
+        <!-- Customer Info Card -->
+        <div v-if="customer.id" class="bg-neutral rounded-lg p-5">
+          <div class="flex justify-between items-center mb-4">
+            <div>
+              <div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
+              <div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
             </div>
+            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm">
+              View Profile
+            </router-link>
+          </div>
+          <div>
+            <div>{{ customer.customer_address }}</div>
+            <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
+            <div>{{ customer.customer_town }}, {{ stateName }} {{ customer.customer_zip }}</div>
+            <div class="mt-2">{{ customer.customer_phone_number }}</div>
           </div>
         </div>
 
-
-        <div class="grid grid-cols-1 " v-if="deliveryOrder.payment_type == 1">
-        
-            <div class=" p-2 ">
-              <div class="rounded-md border-2 bg-neutral">
-                <div class="flex p-3">
-                  {{ userCard.type_of_card }}
-                </div>
-                <div class="flex p-1 pl-4">
-                  {{ userCard.name_on_card }}
-                </div>
-                <div class="flex p-1 pl-4">
-                  {{ userCard.card_number }}
-                </div>
-                <div class="flex p-1 pl-4">
-                  {{ userCard.expiration_month }}/ {{ userCard.expiration_year }}
-                </div>
-                <div class="flex p-1 pl-4">
-                  {{ userCard.security_number }}
-                </div>
-      
-              </div>
-          </div>
-        </div>
-
-        <div class=" rounded-md mx-5 my-5">
-          <div class="flex">
-            Order Date:
-          </div>
-          <div class="mb-5">
-            {{ deliveryOrder.when_ordered }}
-          </div>
-
-          <div class="flex">
-            Expected Delivery Date:
-          </div>
-          <div class="mb-5">
-            {{ deliveryOrder.expected_delivery_date }}
-          </div>
-
-          <div class="flex">
-            Price per gallon:
-
-          </div>
-          <div class="mb-5">
-            {{ deliveryOrder.customer_price }}
+        <!-- Payment Card on File Card -->
+        <div v-if="deliveryOrder.payment_type === 1 && userCard.id" class="bg-neutral rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-4">Card on File</h3>
+          <div class="space-y-1">
+            <p><span class="font-semibold">Card Type:</span> {{ userCard.type_of_card }}</p>
+            <p><span class="font-semibold">Card Number:</span> {{ userCard.card_number }}</p>
+            <p><span class="font-semibold">Name:</span> {{ userCard.name_on_card }}</p>
+            <p><span class="font-semibold">Expires:</span> {{ userCard.expiration_month }}/{{ userCard.expiration_year }}</p>
           </div>
         </div>
       </div>
-      <div class="col-span-1">
 
-        
-        <form class="rounded-md px-8 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">
-
-          <div class="col-span-12 mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Gallons Ordered</label>
-            <input v-model="CreateOilOrderForm.basicInfo.gallons_ordered"
-              :disabled="CreateOilOrderForm.basicInfo.customer_asked_for_fill"
-              class="input input-bordered input-sm w-full max-w-xs" id="title" type="text" placeholder="# gallons" />
-            <span v-if="v$.CreateOilOrderForm.basicInfo.gallons_ordered.$error" class="text-red-600 text-center">
-              {{ v$.CreateOilOrderForm.basicInfo.gallons_ordered.$errors[0].$message }}
-            </span>
+      <!-- BOTTOM SECTION: Edit Form -->
+      <div class="bg-neutral rounded-lg p-6">
+        <h2 class="text-2xl font-bold mb-4">Update Delivery Details</h2>
+        <form @submit.prevent="onSubmit" class="space-y-4">
+          <!-- Gallons Ordered & Fill Checkbox -->
+          <div class="flex items-end gap-4">
+            <div class="flex-grow">
+              <label class="label"><span class="label-text font-bold">Gallons Ordered</span></label>
+              <input v-model="CreateOilOrderForm.basicInfo.gallons_ordered" :disabled="CreateOilOrderForm.basicInfo.customer_asked_for_fill"
+                     class="input input-bordered input-sm w-full max-w-xs" type="number" placeholder="# gallons" />
+              <span v-if="v$.CreateOilOrderForm.basicInfo.gallons_ordered.$error" class="text-red-500 text-xs mt-1">
+                {{ v$.CreateOilOrderForm.basicInfo.gallons_ordered.$errors[0].$message }}
+              </span>
+            </div>
+            <div class="form-control pb-1">
+              <label class="label cursor-pointer justify-start gap-4">
+                <span class="label-text font-bold">Fill</span>
+                <input v-model="CreateOilOrderForm.basicInfo.customer_asked_for_fill" type="checkbox" class="checkbox checkbox-sm" />
+              </label>
+            </div>
           </div>
 
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-            <label class="block text-white text-sm font-bold cursor-pointer label">Fill </label>
-            <input v-model="CreateOilOrderForm.basicInfo.customer_asked_for_fill" class="checkbox checkbox-xs" id="fill"
-              type="checkbox" />
+          <!-- Date Fields -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label class="label"><span class="label-text font-bold">Order Created Date</span></label>
+              <input v-model="CreateOilOrderForm.basicInfo.created_delivery_date" type="date" class="input input-bordered input-sm w-full" />
+            </div>
+            <div>
+              <label class="label"><span class="label-text font-bold">Expected Delivery Date</span></label>
+              <input v-model="CreateOilOrderForm.basicInfo.expected_delivery_date" type="date" class="input input-bordered input-sm w-full" />
+               <span v-if="v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$error" class="text-red-500 text-xs mt-1">
+                {{ v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$errors[0].$message }}
+              </span>
+            </div>
           </div>
 
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-            <label class="block text-white text-sm font-bold cursor-pointer label">Cash</label>
-            <input v-model="CreateOilOrderForm.basicInfo.cash" class="checkbox checkbox-xs" id="cash" type="checkbox" />
-          </div>
-          
-          <div v-if="userCards.length > 0">
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-            <label class="block text-white text-sm font-bold cursor-pointer label">Credit </label>
-            <input v-model="CreateOilOrderForm.basicInfo.card" class="checkbox checkbox-xs" id="Credit"
-              type="checkbox" />
-          </div>
-          </div>
-          <div v-if="userCards.length > 0">
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-            <label class="block text-white text-sm font-bold cursor-pointer label">Check</label>
-            <input v-model="CreateOilOrderForm.basicInfo.check" class="checkbox checkbox-xs" id="check"
-              type="checkbox" />
-          </div>
+          <!-- Fees & Options -->
+          <div class="p-4 border rounded-md">
+            <label class="label-text font-bold">Fees & Options</label>
+            <div class="flex flex-wrap gap-x-6 gap-y-2 mt-2">
+              <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Prime</span><input v-model="CreateOilOrderForm.basicInfo.prime" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+              <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Emergency</span><input v-model="CreateOilOrderForm.basicInfo.emergency" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+              <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Same Day</span><input v-model="CreateOilOrderForm.basicInfo.same_day" type="checkbox" class="checkbox checkbox-xs" /></label></div>
+            </div>
           </div>
 
-          <div v-if="userCards.length > 0">
-            <div class="flex-1 mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Customer Cards Payment</label>
-              <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                id="userCards" v-model="CreateOilOrderForm.basicInfo.userCards">
-
-                <option class="text-white" v-for="(card, index) in userCards" :key="index" :value="card['id']">
-                  {{ card['type_of_card'] }} {{ card['card_number'] }}
+          <!-- Payment Type Radio Group -->
+          <div class="p-4 border rounded-md space-y-3">
+            <label class="label-text font-bold">Payment Method</label>
+            <div class="flex flex-wrap gap-x-6 gap-y-2">
+              <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Cash</span><input type="radio" v-model="CreateOilOrderForm.basicInfo.payment_type" :value="0" class="radio radio-xs" /></label></div>
+              <div v-if="userCards.length > 0" class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Card</span><input type="radio" v-model="CreateOilOrderForm.basicInfo.payment_type" :value="1" class="radio radio-xs" /></label></div>
+              <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Check</span><input type="radio" v-model="CreateOilOrderForm.basicInfo.payment_type" :value="3" class="radio radio-xs" /></label></div>
+              <div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Other</span><input type="radio" v-model="CreateOilOrderForm.basicInfo.payment_type" :value="4" class="radio radio-xs" /></label></div>
+            </div>
+            <!-- Customer Card Selection -->
+            <div v-if="userCards.length > 0 && CreateOilOrderForm.basicInfo.payment_type === 1">
+              <label class="label"><span class="label-text">Select Card</span></label>
+              <select v-model="CreateOilOrderForm.basicInfo.credit_card_id" class="select select-bordered select-sm w-full max-w-xs">
+                <option disabled :value="0">Select a card</option>
+                <option v-for="card in userCards" :key="card.id" :value="card.id">
+                  {{ card.type_of_card }}  {{ card.card_number }}
                 </option>
               </select>
             </div>
           </div>
-          <div v-else>
-            <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 py-5">
-              No Cards on File!
-              <router-link :to="{ name: 'cardadd', params: { id: customer.user_id } }">
-                <button class="btn btn-sm bg-blue-700 text-white">Add CreditCard</button>
-              </router-link>
+
+          <!-- Delivery Status & Driver -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label class="label"><span class="label-text font-bold">Delivery Status</span></label>
+              <select v-model="CreateOilOrderForm.basicInfo.delivery_status" class="select select-bordered select-sm w-full">
+                <option v-for="status in deliveryStatus" :key="status.value" :value="status.value">
+                  {{ status.text }}
+                </option>
+              </select>
+            </div>
+            <div>
+              <label class="label"><span class="label-text font-bold">Assigned Driver</span></label>
+              <select v-model="CreateOilOrderForm.basicInfo.driver_employee_id" class="select select-bordered select-sm w-full">
+                <option disabled :value="0">Select a driver</option>
+                <option v-for="driver in truckDriversList" :key="driver.id" :value="driver.id">
+                  {{ driver.employee_first_name }} {{ driver.employee_last_name }}
+                </option>
+              </select>
             </div>
           </div>
 
-
-
-
-
-
-          <div class="flex-1 mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Delivery Status</label>
-            <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-              id="delivery_status" v-model="CreateOilOrderForm.basicInfo.delivery_status">
-              <option class="text-white" v-for="(delivery, index) in deliveryStatus" :key="index"
-                :value="delivery['value']">
-                {{ delivery['text'] }}
-              </option>
-            </select>
-            <span v-if="v$.CreateOilOrderForm.basicInfo.delivery_status.$error" class="text-red-600 text-center">
-              {{ v$.CreateCustomerForm.basicInfo.delivery_status.$errors[0].$message }}
-            </span>
+          <!-- Dispatcher Notes -->
+          <div>
+            <label class="label"><span class="label-text font-bold">Dispatcher Notes</span></label>
+            <textarea v-model="CreateOilOrderForm.basicInfo.dispatcher_notes_taken" rows="3" class="textarea textarea-bordered w-full"></textarea>
           </div>
 
-         
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Delivery Created </label>
-            <input v-model="CreateOilOrderForm.basicInfo.created_delivery_date"
-              class="input input-bordered input-sm w-full max-w-xs" id="title" type="date" min="2023-01-01"
-              max="2030-01-01" />
-          
-          </div>
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Expected </label>
-            <input v-model="CreateOilOrderForm.basicInfo.expected_delivery_date"
-              class="input input-bordered input-sm w-full max-w-xs" id="title" type="date" min="2023-01-01"
-              max="2030-01-01" />
-            <span v-if="v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$error" class="text-red-600 text-center">
-              {{ v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$errors[0].$message }}
-            </span>
-          </div>
-
-
-
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-            <label class="block text-white text-sm font-bold cursor-pointer label">Prime</label>
-            <input v-model="CreateOilOrderForm.basicInfo.prime" class="checkbox checkbox-xs" id="prime"
-              type="checkbox" />
-          </div>
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-            <label class="block text-white text-sm font-bold cursor-pointer label">Emergency</label>
-            <input v-model="CreateOilOrderForm.basicInfo.emergency" class="checkbox checkbox-xs" id="emergency"
-              type="checkbox" />
-          </div>
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
-            <label class="block text-white text-sm font-bold cursor-pointer label">Same Day </label>
-            <input v-model="CreateOilOrderForm.basicInfo.same_day" class="checkbox checkbox-xs" id="same_day"
-              type="checkbox" />
-          </div>
-
-          <div class="flex-1 mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Delivery Driver </label>
-            <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-              id="customer_state" v-model="CreateOilOrderForm.basicInfo.driver_driver">
-              <option class="text-white" v-for="(driver, index) in truckDriversList" :key="index" :value="driver['id']">
-                {{ driver['employee_first_name'] }} {{ driver['employee_last_name'] }}
-              </option>
-            </select>
-          </div>
-
-          <div class="flex-1 mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Select a Promo</label>
-            <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-              id="promos" v-model="CreateOilOrderForm.basicInfo.promo_id">
-              <option class="text-white" v-for="(promo, index) in promos" :key="index" :value="promo['id']">
-                {{ promo['name_of_promotion'] }} {{ promo['money_off_delivery'] }}
-              </option>
-            </select>
-          </div>
-
-          <div class="mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Dispatcher Note on Ticket</label>
-                <textarea v-model="CreateOilOrderForm.basicInfo.dispatcher_notes_taken" rows="4"
-                class="textarea block p-2.5 w-full input-bordered " id="description" type="text" placeholder="Notes on ticket" />
-              </div>
-
-          <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-            <button class="btn btn-accent btn-sm">
-              Save Changes
-            </button>
+          <!-- Submit Button -->
+          <div class="pt-2">
+            <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
           </div>
         </form>
       </div>
-      </div>
     </div>
   </div>
   <Footer />
 </template>
-
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
@@ -293,413 +156,176 @@ import Header from '../../layouts/headers/headerauth.vue'
 import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
-import { minLength, required } from "@vuelidate/validators";
+import { required, minLength } from "@vuelidate/validators";
 import { notify } from "@kyvg/vue3-notification";
 
+// Interfaces to describe the shape of your data
+interface Customer { account_number: string; id: number; customer_first_name: string; customer_last_name: string; customer_address: string; customer_apt: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; }
+interface DeliveryOrder { id: string; customer_id: number; payment_type: number; payment_card_id: number; gallons_ordered: number; customer_asked_for_fill: boolean | number; delivery_status: number; driver_employee_id: number; promo_id: number; expected_delivery_date: string; when_ordered: string; prime: boolean | number; emergency: boolean | number; same_day: boolean | number; dispatcher_notes: string; }
+interface UserCard { id: number; type_of_card: string; card_number: string; name_on_card: string; expiration_month: string; expiration_year: string; last_four_digits: string; }
+
+const STATE_MAP: { [key: number]: string } = { 0: 'Massachusetts', 1: 'Rhode Island', 2: 'New Hampshire', 3: 'Maine', 4: 'Vermont', 5: 'Connecticut', 6: 'New York' };
+
 export default defineComponent({
   name: 'deliveryEdit',
-
-  components: {
-    Header,
-    SideBar,
-    Footer,
-  },
-
+  components: { Header, SideBar, Footer },
   data() {
     return {
       v$: useValidate(),
-      user: null,
-      deliveryStatus: [],
-      truckDriversList: [],
-      userCards: [],
-      promos: [],
-
-      userCard: {
-        date_added: '',
-        user_id: '',
-        card_number: '',
-        last_four_digits: '',
-        name_on_card: '',
-        expiration_month: '',
-        expiration_year: '',
-        type_of_card: '',
-        security_number: '',
-        accepted_or_declined: '',
-        main_card: '',
-      },
-      customer: {
-        id: 0,
-        user_id: 0,
-        customer_first_name: '',
-        customer_address: '',
-        customer_last_name: '',
-        customer_town: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_apt: '',
-        customer_home_type: 0,
-        customer_phone_number: '',
-      },
-      deliveryOrder: {
-        id: '',
-        customer_id: 0,
-        customer_name: '',
-        customer_address: '',
-        customer_town: '',
-        customer_state: 0,
-        customer_zip: '',
-        gallons_ordered: 0,
-        customer_asked_for_fill: 0,
-        gallons_delivered: '',
-        customer_filled: 0,
-        delivery_status: 0,
-        when_ordered: '',
-        when_delivered: '',
-        expected_delivery_date: '',
-        created_delivery_date: '',
-        automatic: 0,
-        oil_id: 0,
-        supplier_price: '',
-        customer_price: '',
-        customer_temperature: '',
-        dispatcher_notes: '',
-        prime: 0,
-        same_day: 0,
-        emergency: 0,
-        payment_type: 0,
-        payment_card_id: 0,
-
-        driver_employee_id: 0,
-        driver_first_name: '',
-        driver_last_name: '',
-
-        promo_id: 0,
-        promo_money_discount: '',
-
-      },
+      deliveryStatus: [] as any[],
+      truckDriversList: [] as any[],
+      userCards: [] as UserCard[],
+      promos: [] as any[],
+      customer: {} as Customer,
+      deliveryOrder: {} as DeliveryOrder,
+      userCard: {} as UserCard,
+      // RESTORED: Add all form fields to the data model
       CreateOilOrderForm: {
         basicInfo: {
           gallons_ordered: '',
           customer_asked_for_fill: false,
-          expected_delivery_date: '',
           created_delivery_date: '',
-          dispatcher_notes_taken: '',
+          expected_delivery_date: '',
           prime: false,
-          same_day: false,
           emergency: false,
-          delivery_status: '',
-          userCards: [],
-          promos: [],
-          credit_card_id: 0,
+          same_day: false,
+          delivery_status: 0,
+          driver_employee_id: 0,
+          dispatcher_notes_taken: '',
           promo_id: 0,
-          cash: false,
-          card: false,
-          other: false,
-          check: false,
-          driver_driver: '',
+          payment_type: 0,
+          credit_card_id: 0,
         },
       },
     }
   },
+
   validations() {
     return {
       CreateOilOrderForm: {
         basicInfo: {
           gallons_ordered: { required, minLength: minLength(1) },
+          // RESTORED: Add validation for expected date
           expected_delivery_date: { required },
-          delivery_status: { required },
         },
       },
     };
   },
-  created() {
-    this.getPromos()
-    this.userStatus()
-    this.getDriversList()
-  },
-  watch: {
-    $route() {
-      this.getDeliveryForm(this.$route.params.id);
-      this.getDeliveryOrder(this.$route.params.id);
+  
+  computed: {
+    stateName(): string {
+      if (this.customer && this.customer.customer_state !== undefined) {
+        return STATE_MAP[this.customer.customer_state];
+      }
+      return '';
     },
   },
+
   mounted() {
-    this.getDeliveryForm(this.$route.params.id)
-    this.getDeliveryOrder(this.$route.params.id);
-    this.getDeliveryStatusList();
+    this.fetchInitialData();
   },
+
   methods: {
-    userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.user = response.data.user;
-          }
-        })
-        .catch(() => {
-          this.user = null
-        })
+    fetchInitialData() {
+      const deliveryId = this.$route.params.id as string;
+      this.getPromos();
+      this.getDriversList();
+      this.getDeliveryStatusList();
+      this.getDeliveryOrder(deliveryId);
     },
-    getPromos() {
-      let path = import.meta.env.VITE_BASE_URL + "/promo/all";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
-          this.promos = response.data;
-        })
-        .catch(() => {
-        });
-    },
-    getDeliveryOrder(delivery_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/delivery/" + delivery_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          if (response.data) {
-            console.log( response.data.delivery.delivery_dispatcher_notes)
-            this.CreateOilOrderForm.basicInfo.gallons_ordered = response.data.delivery.delivery_gallons_ordered;
-            this.CreateOilOrderForm.basicInfo.customer_asked_for_fill = response.data.delivery.delivery_asked_for_fill;
-            this.CreateOilOrderForm.basicInfo.expected_delivery_date = response.data.delivery.delivery_expected_delivery_date;
-            this.CreateOilOrderForm.basicInfo.created_delivery_date = response.data.delivery.when_ordered;
-            this.CreateOilOrderForm.basicInfo.dispatcher_notes_taken = response.data.delivery.dispatcher_notes_taken;
-            this.CreateOilOrderForm.basicInfo.prime = response.data.delivery.delivery_prime;
-            this.CreateOilOrderForm.basicInfo.emergency = response.data.delivery.delivery_emergency;
-            this.CreateOilOrderForm.basicInfo.same_day = response.data.delivery.delivery_same_day;
-            this.CreateOilOrderForm.basicInfo.delivery_status = response.data.delivery.delivery_status;
 
-            this.CreateOilOrderForm.basicInfo.driver_driver = response.data.delivery.driver_employee_id;
-            if (response.data.delivery.delivery_asked_for_fill == 1) {
-              this.CreateOilOrderForm.basicInfo.customer_asked_for_fill = true
-            }
-            if (response.data.delivery.payment_type == 1) {
-              this.CreateOilOrderForm.basicInfo.userCards = response.data.delivery.payment_card_id;
-            }
-            if (response.data.delivery.delivery_prime == 1) {
-              this.CreateOilOrderForm.basicInfo.prime = true
-            }
-            if (response.data.delivery.delivery_same_day == 1) {
-              this.CreateOilOrderForm.basicInfo.same_day = true
-            }
-            if (response.data.delivery.delivery_emergency == 1) {
-              this.CreateOilOrderForm.basicInfo.emergency = true
-            }
-            if (response.data.delivery.payment_type == 0) {
-              this.CreateOilOrderForm.basicInfo.card = false
-              this.CreateOilOrderForm.basicInfo.cash = true
-              this.CreateOilOrderForm.basicInfo.check = false
-            }
-            if (response.data.delivery.payment_type == 1) {
-              this.CreateOilOrderForm.basicInfo.card = true
-              this.CreateOilOrderForm.basicInfo.cash = false
-              this.CreateOilOrderForm.basicInfo.check = false
-            }
-            if (response.data.delivery.payment_type == 2) {
-              this.CreateOilOrderForm.basicInfo.card = true
-              this.CreateOilOrderForm.basicInfo.cash = true
-              this.CreateOilOrderForm.basicInfo.check = false
-            }
-            if (response.data.delivery.payment_type == 3) {
-              this.CreateOilOrderForm.basicInfo.card = false
-              this.CreateOilOrderForm.basicInfo.cash = false
-              this.CreateOilOrderForm.basicInfo.check = true
-            }
-            // Other
-            if (response.data.delivery.payment_type == 4) {
-              this.CreateOilOrderForm.basicInfo.card = false
-              this.CreateOilOrderForm.basicInfo.cash = false
-              this.CreateOilOrderForm.basicInfo.check = false
-              this.CreateOilOrderForm.basicInfo.other = true
-            }
-            if (response.data.delivery.promo_id !== 0) {
-
-              this.CreateOilOrderForm.basicInfo.promo_id = response.data.delivery.promo_id;
-            }
-
-          }
-        })
-    },
-    getDeliveryForm(delivery_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/delivery/order/" + delivery_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+    getDeliveryOrder(deliveryId: string) {
+      axios.get(`${import.meta.env.VITE_BASE_URL}/delivery/order/${deliveryId}`, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
-          if (response.data) {
-            this.deliveryOrder = response.data
-            this.getCustomer(this.deliveryOrder.customer_id)
-          }
+          this.deliveryOrder = response.data;
+          
+          // RESTORED: Populate all form fields from the API response
+          this.CreateOilOrderForm.basicInfo = {
+            gallons_ordered: String(response.data.gallons_ordered),
+            customer_asked_for_fill: !!response.data.customer_asked_for_fill,
+            created_delivery_date: response.data.when_ordered,
+            expected_delivery_date: response.data.expected_delivery_date,
+            prime: !!response.data.prime,
+            emergency: !!response.data.emergency,
+            same_day: !!response.data.same_day,
+            delivery_status: response.data.delivery_status,
+            driver_employee_id: response.data.driver_employee_id || 0,
+            dispatcher_notes_taken: response.data.dispatcher_notes,
+            promo_id: response.data.promo_id || 0,
+            payment_type: response.data.payment_type,
+            credit_card_id: response.data.payment_card_id || 0,
+          };
+          
+          this.getCustomer(response.data.customer_id);
         })
+        .catch((error: any) => console.error("Error fetching delivery order:", error));
     },
-    getCustomer(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
+
+    getCustomer(customerId: number) {
+      axios.get(`${import.meta.env.VITE_BASE_URL}/customer/${customerId}`, { withCredentials: true })
         .then((response: any) => {
           this.customer = response.data;
-          this.getPaymentCards(this.deliveryOrder.customer_id);
-          if (this.deliveryOrder.payment_type == 1) {
-            this.getPaymentCard(this.deliveryOrder.payment_card_id)
-          }
-          if (this.deliveryOrder.payment_type == 2) {
-            this.getPaymentCard(this.deliveryOrder.payment_card_id)
+          this.getPaymentCards(customerId);
+          if (this.deliveryOrder.payment_type === 1 && this.deliveryOrder.payment_card_id) {
+            this.getPaymentCard(this.deliveryOrder.payment_card_id);
           }
         })
-        .catch(() => {
-          notify({
-            title: "Error",
-            text: "Could not find customer",
-            type: "error",
-          });
-        });
+        .catch((error: any) => console.error("Error fetching customer:", error));
     },
-    getPaymentCard(card_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/payment/card/" + card_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
-          this.userCard = response.data;
-          this.CreateOilOrderForm.basicInfo.userCards = response.data.id
-        })
-        .catch(() => {
-        });
+
+    getPaymentCards(customerId: number) {
+      axios.get(`${import.meta.env.VITE_BASE_URL}/payment/cards/${customerId}`, { withCredentials: true })
+        .then((response: any) => { this.userCards = response.data; })
+        .catch((error: any) => console.error("Error fetching payment cards:", error));
     },
-    getPaymentCards(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/payment/cards/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
-          this.userCards = response.data;
-        })
-        .catch(() => {
-        });
+
+    getPaymentCard(cardId: number) {
+      axios.get(`${import.meta.env.VITE_BASE_URL}/payment/card/${cardId}`, { withCredentials: true })
+        .then((response: any) => { this.userCard = response.data; })
+        .catch((error: any) => console.error("Error fetching specific payment card:", error));
     },
-    updatestatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        if (response.data.update)
-          console.log("ok")
-      })
+
+    getPromos() {
+      axios.get(`${import.meta.env.VITE_BASE_URL}/promo/all`, { withCredentials: true })
+        .then((response: any) => { this.promos = response.data; });
+    },
+    getDriversList() {
+      axios.get(`${import.meta.env.VITE_BASE_URL}/employee/drivers`, { headers: authHeader(), withCredentials: true })
+        .then((response: any) => { this.truckDriversList = response.data; });
     },
     getDeliveryStatusList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/deliverystatus";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-        .then((response: any) => {
-          this.deliveryStatus = response.data;
-        })
-        .catch(() => {
-        });
-    },
-
-    getDriversList() {
-      let path = import.meta.env.VITE_BASE_URL + "/employee/drivers";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          this.truckDriversList = response.data;
-
-        })
-        .catch(() => {
-        });
-    },
-
-    editOilOrder(payload: {
-      gallons_ordered: string;
-      customer_asked_for_fill: boolean;
-      prime: boolean;
-      same_day: boolean;
-      emergency: boolean;
-      delivery_status: string;
-      expected_delivery_date: string;
-      created_delivery_date: string;
-      dispatcher_notes_taken: string;
-      cash: boolean;
-      credit: boolean;
-      check: boolean;
-      credit_card_id: any;
-      promo_id: any;
-      driver_employee_id: string,
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/delivery/edit/" + this.deliveryOrder.id;
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          if (response.data.ok === true) {
-            this.updatestatus()
-            this.$router.push({ name: "deliveryOrder", params: { id: this.deliveryOrder.id } });
-          }
-          if (response.data.error) {
-            this.$router.push("/");
-          }
-        })
+      axios.get(`${import.meta.env.VITE_BASE_URL}/query/deliverystatus`, { withCredentials: true })
+        .then((response: any) => { this.deliveryStatus = response.data; });
     },
 
     onSubmit() {
-      let payload = {
-        gallons_ordered: this.CreateOilOrderForm.basicInfo.gallons_ordered,
-        customer_asked_for_fill: this.CreateOilOrderForm.basicInfo.customer_asked_for_fill,
-        expected_delivery_date: this.CreateOilOrderForm.basicInfo.expected_delivery_date,
-        created_delivery_date: this.CreateOilOrderForm.basicInfo.created_delivery_date,
-        dispatcher_notes_taken: this.CreateOilOrderForm.basicInfo.dispatcher_notes_taken,
-        prime: this.CreateOilOrderForm.basicInfo.prime,
-        emergency: this.CreateOilOrderForm.basicInfo.emergency,
-        same_day: this.CreateOilOrderForm.basicInfo.same_day,
-        delivery_status: this.CreateOilOrderForm.basicInfo.delivery_status,
-        driver_employee_id: this.CreateOilOrderForm.basicInfo.driver_driver,
-        cash: this.CreateOilOrderForm.basicInfo.cash,
-        credit: this.CreateOilOrderForm.basicInfo.card,
-        check: this.CreateOilOrderForm.basicInfo.check,
-        promo_id: this.CreateOilOrderForm.basicInfo.promo_id,
-        credit_card_id: this.CreateOilOrderForm.basicInfo.userCards,
-      };
-   
-      this.editOilOrder(payload);
+      this.v$.$validate();
+      if (this.v$.$error) {
+        notify({ type: 'error', title: 'Validation Error', text: 'Please check the form fields.' });
+        return;
+      }
       
-    },
+      const formInfo = this.CreateOilOrderForm.basicInfo;
+      // The payload now automatically includes all the restored fields
+      const payload = {
+          ...formInfo,
+          cash: formInfo.payment_type === 0,
+          credit: formInfo.payment_type === 1,
+          check: formInfo.payment_type === 3,
+          other: formInfo.payment_type === 4,
+          credit_card_id: formInfo.payment_type === 1 ? formInfo.credit_card_id : null,
+      };
 
+      axios.post(`${import.meta.env.VITE_BASE_URL}/delivery/edit/${this.deliveryOrder.id}`, payload, { withCredentials: true, headers: authHeader() })
+        .then(() => {
+            notify({ type: 'success', title: 'Success!', text: 'Delivery updated.' });
+            this.$router.push({ name: 'deliveryOrder', params: { id: this.deliveryOrder.id } });
+        })
+        .catch((error: any) => {
+          console.error("Error submitting form:", error);
+          notify({ type: 'error', title: 'Update Failed', text: 'Could not save changes.' });
+        });
+    },
   },
 })
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/pages/delivery/home.vue b/src/pages/delivery/home.vue
index 98c5570..f6aa38a 100755
--- a/src/pages/delivery/home.vue
+++ b/src/pages/delivery/home.vue
@@ -1,150 +1,176 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10  ">
-      <div class="text-sm breadcrumbs mb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Deliveries</li>
         </ul>
       </div>
 
-      <div class="flex text-2xl mb-5">
-        Delivery Home
-      </div>
-
-      <div class="grid grid-cols-12 gap-5 ">
-        <div class="col-span-12 bg-secondary  ">
-          <div class="grid grid-cols-12 p-5 bg-neutral m-5">
-            <div class="col-span-12 font-bold text-xl">Todays stats</div>
-            <div class="col-span-6 py-2"> Total Deliveries: {{ delivery_count }}</div>
-            <div class="col-span-6 py-2"> Completed: {{ delivery_count_delivered }} / {{ delivery_count }}</div>
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Search and Stats -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-6 mb-4">
+          <div class="form-control">
+  <h2 class="text-lg font-bold">Deliveries </h2>
+          </div>
+          <!-- Today's Stats Card -->
+          <div class="stats stats-vertical sm:stats-horizontal shadow bg-base-100 text-center text-sm">
+            <div class="stat p-3">
+              <div class="stat-title text-xs">Today's Deliveries</div>
+              <div class="stat-value text-lg">{{ delivery_count }}</div>
+            </div>
+            <div class="stat p-3">
+              <div class="stat-title text-xs">Completed</div>
+              <div class="stat-value text-lg">{{ delivery_count_delivered }} / {{ delivery_count }}</div>
+            </div>
           </div>
         </div>
 
-        <div class="col-span-12 flex start pb-10 text-2xl">Recent 100 delivieres </div>
+        <div class="divider">Recent Deliveries</div>
 
-
-        <div class="col-span-12 overflow-x-auto bg-neutral">
-
-          <table class="table">
-            <!-- head -->
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
             <thead>
               <tr>
-                <th>Account #</th>
+                <th>Delivery #</th>
                 <th>Name</th>
                 <th>Status</th>
-                <th>Town</th>
-                <th>Address</th>
+                <th>Town / Address</th>
                 <th>Gallons</th>
                 <th>Date</th>
-                <th>Automatic</th>
-                <th>Prime</th>
-                <th>Same Day</th>
-                <th>Emergency</th>
+                <th>Options</th>
                 <th>Payment</th>
+                <th class="text-right">Actions</th>
               </tr>
             </thead>
             <tbody>
-              <!-- row 1 -->
-              <tr v-for="oil in deliveries" :key="oil['id']">
-                <td>{{ oil['id'] }} </td>
-                <router-link :to="{ name: 'customerProfile', params: { id: oil['id'] } }">
-                  <td>
-                    <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
-                  </td>
-                </router-link>
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
                 <td>
-                  <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                  <div v-else-if="oil['delivery_status'] == 1">delivered</div>
-                  <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                  <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
-                  <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                  <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                  <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
-                  <div v-else></div>
-                </td>
-                <td>{{ oil['customer_town'] }}</td>
-                <td>{{ oil['customer_address'] }}</td>
-                <td>
-                  <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-                  <div v-else> {{ oil['gallons_ordered'] }}</div>
-                </td>
-                <td>{{ oil['expected_delivery_date'] }}</td>
-                <td>
-                  <div v-if="oil['automatic'] == 0">No</div>
-                  <div v-else>Yes</div>
-                </td>
-
-                <td>
-                  <div v-if="oil['prime'] == 0">No</div>
-                  <div v-else class="text-red-600">Yes</div>
-                </td>
-                <td>
-                  <div v-if="oil['same_day'] == 0">No</div>
-                  <div v-else class="text-red-600">Yes</div>
-                </td>
-                <td>
-                  <div v-if="oil['emergency'] == 0">No</div>
-                  <div v-else class="text-red-600">Yes</div>
-                </td>
-
-
-
-                <td>
-
-                  <div v-if="oil['payment_type'] == 0">Cash</div>
-                  <div v-else-if="oil['payment_type'] == 1">CC</div>
-                  <div v-else-if="oil['payment_type'] == 2">Cash/CC</div>
-                  <div v-else-if="oil['payment_type'] == 3">Check</div>
-                  <div v-else-if="oil['payment_type'] == 4">Other</div>
-                  <div v-else></div>
-
-                </td>
-                <td class="flex gap-5">
-
-
-
-                  <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                    <button class="btn btn-secondary btn-sm">View Delivery</button>
-                  </router-link>
-                  <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                    <button class="btn btn-secondary btn-sm">Edit Delivery</button>
-                  </router-link>
-
-                  <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }"
-                    v-if="oil['delivery_status'] != 10">
-                    <button class="btn btn-secondary btn-sm">Finalize</button>
-                  </router-link>
-
-                  <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                    <button class="btn btn-success btn-sm">
-                      Print Ticket
-                    </button>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
                   </router-link>
                 </td>
+                <td>
+                  <span class="badge badge-sm" :class="{
+                    'badge-warning': oil.delivery_status == 0,
+                    'badge-success': [1, 10].includes(oil.delivery_status),
+                    'badge-info': oil.delivery_status == 2,
+                    'badge-error': [3, 5].includes(oil.delivery_status),
+                  }">
+                    <span v-if="oil.delivery_status == 0">Waiting</span>
+                    <span v-else-if="oil.delivery_status == 1">Delivered</span>
+                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 3">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 4">Partial Delivery</span>
+                    <span v-else-if="oil.delivery_status == 5">Issue</span>
+                    <span v-else-if="oil.delivery_status == 10">Finalized</span>
+                  </span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>{{ oil.expected_delivery_date }}</td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                    <span v-if="oil.emergency" class="badge badge-error badge-xs">EMERGENCY</span>
+                  </div>
+                </td>
+                <td>
+                  <span v-if="oil.payment_type == 0">Cash</span>
+                  <span v-else-if="oil.payment_type == 1">CC</span>
+                  <span v-else-if="oil.payment_type == 2">Cash/CC</span>
+                  <span v-else-if="oil.payment_type == 3">Check</span>
+                  <span v-else-if="oil.payment_type == 4">Other</span>
+                </td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                    <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                    <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
+                    <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+                  </div>
+                </td>
               </tr>
             </tbody>
           </table>
         </div>
-          <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="25" :options="options" class="mt-10">
-          </pagination>
-          <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-     
+
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
+                </div>
+                <div class="badge" :class="{
+                    'badge-warning': oil.delivery_status == 0,
+                    'badge-success': [1, 10].includes(oil.delivery_status),
+                    'badge-info': oil.delivery_status == 2,
+                    'badge-error': [3, 5].includes(oil.delivery_status),
+                  }">
+                    <span v-if="oil.delivery_status == 0">Waiting</span>
+                    <span v-else-if="oil.delivery_status == 1">Delivered</span>
+                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 3">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 4">Partial Delivery</span>
+                    <span v-else-if="oil.delivery_status == 5">Issue</span>
+                    <span v-else-if="oil.delivery_status == 10">Finalized</span>
+                </div>
+              </div>
+
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+                <div v-if="oil.emergency" class="badge badge-error badge-sm">EMERGENCY</div>
+              </div>
+
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+              </div>
+              
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                 <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                 <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
+                 <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="25" :options="options">
+        </pagination>
+      </div>
+
     </div>
   </div>
-
   <Footer />
 </template>
 
+
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
@@ -170,7 +196,7 @@ export default defineComponent({
       delivery_count_delivered: 0,
       token: null,
       user: null,
-      deliveries: [],
+      deliveries: [] as any[], 
       page: 1,
       perPage: 50,
       recordsLength: 0,
diff --git a/src/pages/delivery/update_tickets/finalize_ticket.vue b/src/pages/delivery/update_tickets/finalize_ticket.vue
index 7277ab3..5b9d354 100755
--- a/src/pages/delivery/update_tickets/finalize_ticket.vue
+++ b/src/pages/delivery/update_tickets/finalize_ticket.vue
@@ -1,10 +1,7 @@
 <template>
-  <Header />
 
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
+   
     <div class=" w-full px-10 ">
       <div class="text-sm breadcrumbs mb-10">
         <ul>
diff --git a/src/pages/delivery/update_tickets/finalize_ticket_auto.vue b/src/pages/delivery/update_tickets/finalize_ticket_auto.vue
index 1e1b2d5..11b36fa 100644
--- a/src/pages/delivery/update_tickets/finalize_ticket_auto.vue
+++ b/src/pages/delivery/update_tickets/finalize_ticket_auto.vue
@@ -1,10 +1,7 @@
 <template>
-    <Header />
   
     <div class="flex">
-      <div class="">
-        <SideBar />
-      </div>
+    
       <div class=" w-full px-10 ">
         <div class="text-sm breadcrumbs mb-10">
           <ul>
diff --git a/src/pages/delivery/view.vue b/src/pages/delivery/view.vue
index 19fa10d..4c3e906 100755
--- a/src/pages/delivery/view.vue
+++ b/src/pages/delivery/view.vue
@@ -1,384 +1,202 @@
 <template>
-  <Header />
-
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10">
-      <div class="text-sm breadcrumbs mb-10">
+    <!-- Main Content -->
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'customer' }">
-              Customers
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          <li>View Delivery</li>
         </ul>
       </div>
+      <h1 class="text-3xl font-bold mt-4 border-b border-gray-600 pb-2">
+        Delivery #{{ deliveryOrder.id }}
+      </h1>
 
-      <div class="grid grid-cols-1 rounded-md  pb-5">
-        <div class="text-2xl  border-b-2 border-gray-500 mb-10">
-          View Delivery # {{ deliveryOrder.id }}
-        </div>
-      </div>
-      <div class="grid grid-cols-12">
-
-        <div class="col-span-6">
-          <div class="col-span-12 font-bold">
-            Customer
+      <!-- TOP SECTION: Customer & Status Info -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 my-6">
+        <!-- Customer Info Card -->
+        <div class="bg-neutral rounded-lg p-5">
+          <div class="flex justify-between items-center mb-4">
+            <div>
+              <div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
+              <div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
+            </div>
+            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm">
+              View Profile
+            </router-link>
           </div>
-          <div class="col-span-6 p-5 text-gray-500 text-sm">
-            <div class="grid grid-cols-12">
-              <div class="col-span-12  flex  ">
-                {{ customer.account_number }}
-              </div>
-              <div class="col-span-12  flex">
-                {{ customer.customer_first_name }}
-                {{ customer.customer_last_name }}
-              </div>
-              <div class="col-span-12 flex">{{customer.customer_address}}</div>
-              <div class="col-span-12 flex ">
-                <div class="pr-2">
-                  {{ customer.customer_town }},
-                </div>
-                <div class="pr-2">
-                  <div v-if="customer.customer_state == 0">Massachusetts</div>
-                  <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                  <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                  <div v-else-if="customer.customer_state == 3">Maine</div>
-                  <div v-else-if="customer.customer_state == 4">Vermont</div>
-                  <div v-else-if="customer.customer_state == 5">Maine</div>
-                  <div v-else-if="customer.customer_state == 6">New York</div>
-                  <div v-else>Unknown state</div>
-                </div>
-                <div class="pr-2">
-                  {{ customer.customer_zip }}
-                </div>
-              </div>
+          <div>
+            <div>{{ customer.customer_address }}</div>
+            <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">Apt: {{ customer.customer_apt }}</div>
+            <div>
+              {{ customer.customer_town }},
+              <span v-if="customer.customer_state == 0">Massachusetts</span>
+              <span v-else-if="customer.customer_state == 1">Rhode Island</span>
+              <span v-else-if="customer.customer_state == 2">New Hampshire</span>
+              <span v-else-if="customer.customer_state == 3">Maine</span>
+              <span v-else-if="customer.customer_state == 4">Vermont</span>
+              <span v-else-if="customer.customer_state == 5">Connecticut</span>
+              <span v-else-if="customer.customer_state == 6">New York</span>
+              <span v-else>Unknown state</span>
+              {{ customer.customer_zip }}
+            </div>
+            <div class="text-sm text-gray-400 mt-1">
+              <span v-if="customer.customer_home_type == 0">Residential</span>
+              <span v-else-if="customer.customer_home_type == 1">Apartment</span>
+              <span v-else-if="customer.customer_home_type == 2">Condo</span>
+              <span v-else-if="customer.customer_home_type == 3">Commercial</span>
+              <span v-else-if="customer.customer_home_type == 4">Business</span>
+              <span v-else-if="customer.customer_home_type == 5">Construction</span>
+              <span v-else-if="customer.customer_home_type == 6">Container</span>
+            </div>
+            <div class="mt-2">{{ customer.customer_phone_number }}</div>
+          </div>
+        </div>
 
-              <div class="col-span-12 flex" v-if="customer.customer_apt !== 'None'">
-                {{ customer.customer_apt }}
-              </div>
-              <div class="col-span-12  flex">
-                <div v-if="customer.customer_home_type == 0">Residential</div>
-                <div v-else-if="customer.customer_home_type == 1">apartment</div>
-                <div v-else-if="customer.customer_home_type == 2">condo</div>
-                <div v-else-if="customer.customer_home_type == 3">commercial</div>
-                <div v-else-if="customer.customer_home_type == 4">business</div>
-                <div v-else-if="customer.customer_home_type == 5">construction</div>
-                <div v-else-if="customer.customer_home_type == 6">container</div>
-              </div>
-              <div class="col-span-12 flex">
-                {{ customer.customer_phone_number }}
+        <!-- Delivery Status Card -->
+        <div class="bg-neutral rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-4">Delivery Status</h3>
+          <div class="space-y-3">
+            <div>
+              <div class="font-bold text-sm">Current Status</div>
+              <div class="badge badge-lg" 
+                   :class="{
+                     'badge-success': [1, 10].includes(deliveryOrder.delivery_status),
+                     'badge-info': deliveryOrder.delivery_status == 2,
+                     'badge-error': deliveryOrder.delivery_status == 5,
+                     'badge-warning': ![1, 10, 2, 5].includes(deliveryOrder.delivery_status)
+                   }">
+                <span v-if="deliveryOrder.delivery_status == 0">Waiting</span>
+                <span v-else-if="deliveryOrder.delivery_status == 1">Delivered</span>
+                <span v-else-if="deliveryOrder.delivery_status == 2">Out for Delivery</span>
+                <span v-else-if="deliveryOrder.delivery_status == 3">Tomorrow</span>
+                <span v-else-if="deliveryOrder.delivery_status == 4">Partial Delivery</span>
+                <span v-else-if="deliveryOrder.delivery_status == 5">Misdelivery</span>
+                <span v-else-if="deliveryOrder.delivery_status == 6">Unknown</span>
+                <span v-else-if="deliveryOrder.delivery_status == 10">Finalized</span>
               </div>
             </div>
+            <div>
+              <div class="font-bold text-sm">Assigned Driver</div>
+              <div>{{ deliveryOrder.driver_first_name }} {{ deliveryOrder.driver_last_name }}</div>
+            </div>
+            <div>
+              <div class="font-bold text-sm">Scheduled Date</div>
+              <div>{{ deliveryOrder.expected_delivery_date }}</div>
+            </div>
+            <div v-if="deliveryOrder.delivery_status === 10">
+              <div class="font-bold text-sm">Date Delivered</div>
+              <div>{{ (deliveryOrder.when_delivered) }}</div>
+            </div>
+            <div>
+              <div class="font-bold text-sm">Date Ordered</div>
+              <div>{{ (deliveryOrder.when_ordered) }}</div>
+            </div>
           </div>
         </div>
-        <div class="col-span-6  ">
-
-        </div>
       </div>
 
-
-
-
-
-
-      <div class="grid grid-cols-12">
-
-
-
-        <div class="col-span-6">
-          <div class="col-span-12 font-bold">
-            Delivery Status
-          </div>
-          <div class="grid grid-cols-12 p-5">
-            <div class="col-span-12 font-bold">
-              Status 
-            </div>
-            <div class="col-span-12 text-sm mb-5 text-gray-500">
-              <div v-if="deliveryOrder.delivery_status == 0">waiting</div>
-              <div v-else-if="deliveryOrder.delivery_status == 1">delivered</div>
-              <div v-else-if="deliveryOrder.delivery_status == 2">Out for Delivery</div>
-              <div v-else-if="deliveryOrder.delivery_status == 3">tommorrow</div>
-              <div v-else-if="deliveryOrder.delivery_status == 4">Partial Delivery</div>
-              <div v-else-if="deliveryOrder.delivery_status == 5">misdelivery</div>
-              <div v-else-if="deliveryOrder.delivery_status == 6">unknown</div>
-              <div v-else-if="deliveryOrder.delivery_status == 10">Finalized</div>
-              <div v-else></div>
-            </div>
-
-
-            <div class="col-span-12 font-bold ">
-              Scheduled date/time
-            </div>
-            <div class="col-span-12 mb-5 text-sm text-gray-500">
-              {{ deliveryOrder.expected_delivery_date }}
-            </div>
-
-
-            <div class="col-span-12 font-bold">
-              When Called
-            </div>
-            <div class="col-span-12 mb-5 text-sm text-gray-500">
-              {{ (deliveryOrder.when_ordered) }}
-            </div>
-            <div v-if="deliveryOrder.delivery_status == 10">
-              <div class="col-span-12 font-bold">
-                When Delivered
-              </div>
-              <div class="col-span-12 mb-5 text-sm text-gray-500">
-                {{ (deliveryOrder.when_delivered) }}
+      <!-- BOTTOM SECTION: Delivery & Financial Details -->
+      <div class="bg-neutral rounded-lg p-6">
+        <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
+          <!-- Left Column: Pricing, Gallons, Promo -->
+          <div class="space-y-4">
+            <!-- Gallons -->
+            <div class="p-4 border rounded-md">
+              <label class="label-text font-bold">Gallons Ordered</label>
+              <div class="text-lg mt-1">
+                <span v-if="deliveryOrder.customer_asked_for_fill == 1" class="badge badge-lg badge-info">FILL</span>
+                <span v-else>{{ deliveryOrder.gallons_ordered }} gallons</span>
               </div>
             </div>
 
-
-            <div class="col-span-12 font-bold ">
-              Driver:
-            </div>
-            <div class="col-span-12 text-gray-500">
-              {{ deliveryOrder.driver_first_name }} {{ deliveryOrder.driver_last_name }}
-            </div>
-          </div>
-          <div class="col-span-12 font-bold">
-            Info
-          </div>
-          <div class="grid grid-cols-12 p-5">
-            <div class="col-span-12 text-gray-500">
-              <div v-if="deliveryOrder.prime == 1">
-                Prime Required: Yes
+            <!-- Pricing & Fees -->
+            <div class="p-4 border rounded-md space-y-2">
+              <label class="label-text font-bold">Estimated / Finalized Total</label>
+              <!-- Finalized View -->
+              <div v-if="deliveryOrder.delivery_status == 10" class="text-2xl font-mono">
+                ${{ deliveryMoney.total_amount_oil }}
               </div>
-              <div v-if="deliveryOrder.prime == 0">
-                Prime Required: No
-              </div>
-             
-            </div>
-            <div class="col-span-12 text-gray-500">
-              <div v-if="deliveryOrder.same_day == 1">
-                Same Day: Yes
-              </div>
-              <div v-if="deliveryOrder.same_day == 0">
-                Same Day: No
-              </div>
-            </div>
-            <div class="col-span-12 text-gray-500">
-              <div v-if="deliveryOrder.emergency == 1">
-                Emergency: Yes
-              </div>
-              <div v-if="deliveryOrder.emergency == 0">
-                Emergency: No
-              </div>
-            </div>
-
-
-
-          </div>
-          <div class="col-span-12 font-bold">
-           Dispatcher Notes
-          </div>
-          <div class="grid grid-cols-12 p-5">
-            <div class="col-span-12 text-gray-500">
-              {{ deliveryOrder.dispatcher_notes }}
-            </div>
-            </div>
-        </div>
-
-
-
-        <div class="col-span-6">
-          <div class="col-span-12 font-bold">
-            Gallons
-          </div>
-          <div class="grid grid-cols-12 p-5">
-            <div class="col-span-12 text-sm text-gray-500">
-              <div v-if="deliveryOrder.customer_asked_for_fill == 1">FILL</div>
-              <div v-else>{{ deliveryOrder.gallons_ordered }} gallons</div>
-            </div>
-          </div>
-
-          <div v-if="deliveryOrder.delivery_status !== 10">
-            <div class="col-span-12 font-bold">
-              Promo
-            </div>
-            <div class="grid grid-cols-12 p-5">
-              <div class="col-span-12 text-sm text-gray-500">
+              <!-- Estimated View -->
+              <div v-else class="space-y-1">
                 <div v-if="deliveryOrder.promo_id !== null">
-                  <div class="">{{ promo.name_of_promotion }}</div>
-                  <div class="">{{ promo.description }}</div>
-                  <div class="">{{ promo.money_off_delivery }} off a gallon</div>
-                  <div class="">{{ promo.text_on_ticket }}</div>
+                  <div>Before Discount: ${{ total_amount }}</div>
+                  <div>Discount: -${{ discount }}</div>
+                  <div class="font-bold">Subtotal: ${{ total_amount_after_discount }}</div>
                 </div>
-                <div v-else>No Promo Added</div>
+                <div v-else class="font-bold text-lg">${{ total_amount }}</div>
+                
+                <div v-if="deliveryOrder.prime == 1" class="text-sm text-gray-400">+ ${{ pricing.price_prime }} Prime Fee</div>
+                <div v-if="deliveryOrder.emergency == 1" class="text-sm text-gray-400">+ ${{ pricing.price_emergency }} Emergency Fee</div>
+                <div v-if="deliveryOrder.same_day == 1" class="text-sm text-gray-400">+ ${{ pricing.price_same_day }} Same Day Fee</div>
+              </div>
+            </div>
+
+            <!-- Promotion -->
+            <div v-if="deliveryOrder.promo_id !== null && deliveryOrder.delivery_status !== 10" class="p-4 border rounded-md">
+              <label class="label-text font-bold">Promotion Applied</label>
+              <div class="mt-1">
+                <div class="font-semibold">{{ promo.name_of_promotion }} (${{ promo.money_off_delivery }} off)</div>
+                <div class="text-sm text-gray-400">{{ promo.description }}</div>
               </div>
             </div>
           </div>
 
-          <div v-if="deliveryOrder.delivery_status !== 10">
-            <div class="col-span-12 font-bold">
-              Estimated Amount
-            </div>
-            <div class="grid grid-cols-12 p-5">
-              <div class="col-span-12 text-sm text-gray-500">
-                <div class="col-span-12 text-gray-500">
-                  <div v-if="deliveryOrder.customer_asked_for_fill == 1"> FILL (250)</div>
-                  <div v-else> Gallons Ordered: {{ deliveryOrder.gallons_ordered }}</div>
+          <!-- Right Column: Payment, Notes, Actions -->
+          <div class="space-y-4">
+            <!-- Payment -->
+            <div class="p-4 border rounded-md">
+              <label class="label-text font-bold">Payment Method</label>
+              <div class="mt-1">
+                <div class="text-lg">
+                  <span v-if="deliveryOrder.payment_type == 0">Cash</span>
+                  <span v-else-if="deliveryOrder.payment_type == 1">Credit Card</span>
+                  <span v-else-if="deliveryOrder.payment_type == 2">Credit Card & Cash</span>
+                  <span v-else-if="deliveryOrder.payment_type == 3">Check</span>
+                  <span v-else-if="deliveryOrder.payment_type == 4">Other</span>
+                  <span v-else>Not Specified</span>
                 </div>
-
-                <div v-if="deliveryOrder.promo_id !== null">
-                  <div class="col-span-12 text-sm text-gray-500">
-                    Before Discount: {{ total_amount }}
-                  </div>
-                  <div class="col-span-12 text-sm text-gray-500">
-                    Discount Amount: ${{ discount }}
-                  </div>
-                  <div class="col-span-12 text-sm text-gray-500">
-                    Promo Amount: ${{ total_amount_after_discount }}
-                  </div>
-                </div>
-                <div v-else>
-                  <div class="col-span-12 text-sm text-gray-500">
-                    ${{ total_amount }}
-                  </div>
-                </div>
-
-                <div class="col-span-12 py-3" v-if="deliveryOrder.prime == 1">
-                  Prime Fee: {{ pricing.price_prime }}
-                </div>
-                <div class="col-span-12 py-3" v-if="deliveryOrder.emergency == 1">
-                  Emergency Fee: {{ pricing.price_emergency }}
-                </div>
-                <div class="col-span-12 py-3" v-if="deliveryOrder.same_day == 1">
-                  Same Day: {{ pricing.price_same_day }}
+                <div v-if="userCardfound && [1, 2, 3].includes(deliveryOrder.payment_type)" class="bg-base-100 p-3 rounded-md mt-2 text-sm">
+                   <div class="font-mono">{{ userCard.type_of_card }}</div>
+                   <div class="font-mono">{{ userCard.card_number }}</div>
+                   <div>{{ userCard.name_on_card }}</div>
+                   <div>Expires: {{ userCard.expiration_month }}/{{ userCard.expiration_year }}</div>
                 </div>
               </div>
             </div>
+
+            <!-- Notes & Options -->
+            <div class="p-4 border rounded-md">
+              <label class="label-text font-bold">Notes & Options</label>
+              <div class="mt-2 space-y-1 text-sm">
+                <div><span class="font-semibold">Prime Required:</span> {{ deliveryOrder.prime ? 'Yes' : 'No' }}</div>
+                <div><span class="font-semibold">Same Day:</span> {{ deliveryOrder.same_day ? 'Yes' : 'No' }}</div>
+                <div><span class="font-semibold">Emergency:</span> {{ deliveryOrder.emergency ? 'Yes' : 'No' }}</div>
+              </div>
+              <div class="prose prose-sm mt-4 max-w-none">
+                <blockquote class="text-gray-400">{{ deliveryOrder.dispatcher_notes || 'No dispatcher notes provided.' }}</blockquote>
+              </div>
+            </div>
+            
+            <!-- Actions -->
+            <div class="flex flex-wrap gap-2 pt-4">
+              <router-link :to="{ name: 'deliveryEdit', params: { id: deliveryOrder.id } }">
+                <button class="btn btn-secondary btn-sm">Edit Delivery</button>
+              </router-link>
+              <router-link :to="{ name: 'Ticket', params: { id: deliveryOrder.id } }">
+                <button class="btn btn-success btn-sm">Print Ticket</button>
+              </router-link>
+            </div>
           </div>
-
-
-          <div v-if="deliveryOrder.delivery_status == 10">
-            <div class="col-span-12 font-bold" v-if="deliveryOrder.delivery_status == 10">
-              Finalized Amount
-            </div>
-            <div class="grid grid-cols-12 p-5">
-              <div class="col-span-12 text-sm text-gray-500">
-                <div>{{ deliveryMoney.total_amount_oil }}</div>
-              </div>
-            </div>
-          </div>
-
-
-
-
-          <div class="col-span-12 font-bold">
-            Payment
-          </div>
-          <div class="grid grid-cols-12 p-5">
-            <div class="col-span-12 text-sm">
-              <div v-if="deliveryOrder.payment_type == 0">Cash</div>
-              <div v-else-if="deliveryOrder.payment_type == 1">Credit Card</div>
-              <div v-else-if="deliveryOrder.payment_type == 2">Credit Card & cash</div>
-              <div v-else-if="deliveryOrder.payment_type == 3">Check</div>
-              <div v-else-if="deliveryOrder.payment_type == 4">Check</div>
-              <div v-else>No Payment Type Added</div>
-            </div>
-
-            <div class="col-span-12" v-if="deliveryOrder.payment_type == 1">
-              <div class="flex" v-if="userCardfound">
-                <div class="basis-1/3 p-2">
-                  <div class="rounded-md border-2 bg-accent">
-                    <div class="flex p-3">
-                      {{ userCard.type_of_card }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.name_on_card }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.card_number }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.expiration_month }}/ {{ userCard.expiration_year }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="col-span-12" v-if="deliveryOrder.payment_type == 2">
-              <div class="flex" v-if="userCardfound">
-                <div class="basis-1/3 p-2">
-                  <div class="bg-accent rounded-md border-2 ">
-                    <div class="flex p-3">
-                      {{ userCard.type_of_card }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.name_on_card }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.card_number }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.expiration_month }}/ {{ userCard.expiration_year }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="col-span-12" v-if="deliveryOrder.payment_type == 3">
-              <div class="flex" v-if="userCardfound">
-                <div class="basis-1/3 p-2">{{ userCard }}
-                  <div class="bg-accent rounded-md border-2 ">
-                    <div class="flex p-3">
-                      {{ userCard.type_of_card }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.name_on_card }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.card_number }}
-                    </div>
-                    <div class="flex p-1 pl-4">
-                      {{ userCard.expiration_month }}/ {{ userCard.expiration_year }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-        <div class="col-span-12 " v-if="deliveryOrder.id">
-          <router-link :to="{ name: 'customerProfile', params: { id: deliveryOrder['customer_id'] } }">
-            <button class="btn btn-neutral btn-sm">View Customer</button>
-          </router-link>
         </div>
-
-
-        <div class="col-span-12  pt-5" v-if="deliveryOrder.id">
-          <router-link :to="{ name: 'deliveryEdit', params: { id: deliveryOrder['id'] } }">
-            <button class="btn btn-sm btn-secondary">Edit</button>
-          </router-link>
-        </div>
-
-        <div class="col-span-12  pt-5" v-if="deliveryOrder.id">
-          <router-link :to="{ name: 'Ticket', params: { id: deliveryOrder['id'] } }">
-            <button class="btn btn-success btn-sm">Print Ticket</button>
-          </router-link>
-        </div>
-        </div>
-
-
       </div>
     </div>
   </div>
   <Footer />
 </template>
 
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
diff --git a/src/pages/delivery/viewstatus/cancelled.vue b/src/pages/delivery/viewstatus/cancelled.vue
index 09374c8..d930c99 100755
--- a/src/pages/delivery/viewstatus/cancelled.vue
+++ b/src/pages/delivery/viewstatus/cancelled.vue
@@ -1,104 +1,123 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs  pb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Cancelled Deliveries</li>
         </ul>
       </div>
+      <h1 class="text-3xl font-bold mt-4">Cancelled Deliveries</h1>
 
-      <div class="flex start pb-10 text-2xl">Cancelled Deliveries </div>
-  
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Archived Cancelled Deliveries</h2>
+          <div class="badge badge-ghost">{{ recordsLength }} items Found</div>
+        </div>
 
-      <div class="overflow-x-auto bg-neutral">
-     
-        <table class="table">
-          <!-- head -->
-          <thead>
-          <tr>
-            <th>Name</th>
-            <th>Status</th>
-            <th>Address</th>
-            <th>Town</th>
-     
-            <th>Gallons</th>
-            <th>Date</th>
-            <th>Automatic</th>
-            <th>Prime</th>
-            <th>Same Day</th>
-          </tr>
-          </thead>
-          <tbody>
-          <!-- row 1 -->
-          <tr v-for="oil in deliveries" :key="oil['id']">    <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
-            <td> 
-              <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
-            </td>
-              </router-link>
-              <td>
-                <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
-                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
-                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
-                <div v-else></div>
+        <div class="divider"></div>
 
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th>Delivery #</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Town / Address</th>
+                <th>Gallons</th>
+                <th>Date</th>
+                <th>Options</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
+                <td>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
+                  </router-link>
+                </td>
+                <td>
+                  <span class="badge badge-sm badge-error">Cancelled</span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>{{ oil.expected_delivery_date }}</td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                  </div>
+                </td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                    <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
+                </div>
+                <div class="badge badge-error">
+                  Cancelled
+                </div>
+              </div>
+
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+              </div>
+
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+                <p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
+              </div>
               
-              </td>
-              <td>{{ oil['customer_address'] }}</td>
-            <td>{{ oil['customer_town'] }}</td>
-          
-            <td>
-              <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-              <div v-else> {{ oil['gallons_ordered'] }}</div>
-            </td>
-            <td>{{ oil['expected_delivery_date'] }}</td>
-            <td>
-              <div v-if="oil['automatic'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-            <td>
-              <div v-if="oil['prime'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-            <td>
-              <div v-if="oil['same_day'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-
-            <td class="flex gap-5">
-              <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                <button class="btn btn-secondary">View delivery</button>
-              </router-link>
-              <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                <button class="btn btn-secondary">Edit Delivery</button>
-              </router-link>
-              <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn bg-red-600 text-black">DELETE</button> -->
-            </td>
-          </tr>
-          </tbody>
-        </table>
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                 <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-   
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
-                    :options="options" class="mt-10">
-        </pagination>
-        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
       
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
+        </pagination>
+      </div>
     </div>
   </div>
-
-  <Footer/>
+  <Footer />
 </template>
 
 <script lang="ts">
@@ -124,7 +143,7 @@ export default defineComponent({
     return {
       token: null,
       user: null,
-      deliveries: [],
+      deliveries: [] as any[], 
       page: 1,
       perPage: 50,
       recordsLength: 0,
diff --git a/src/pages/delivery/viewstatus/delivered.vue b/src/pages/delivery/viewstatus/delivered.vue
index 52d26b2..e24a287 100755
--- a/src/pages/delivery/viewstatus/delivered.vue
+++ b/src/pages/delivery/viewstatus/delivered.vue
@@ -1,99 +1,123 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs  pb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Delivered Deliveries</li>
         </ul>
       </div>
+      <h1 class="text-3xl font-bold mt-4">Delivered Deliveries</h1>
 
-      <div class="flex start pb-10 text-2xl">Delivered Deliveries </div>
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Deliveries Awaiting Finalization</h2>
+          <div class="badge badge-ghost">{{ recordsLength }} items Found</div>
+        </div>
 
+        <div class="divider"></div>
 
-      <div class="overflow-x-auto bg-neutral">
-   
-        <table class="table">
-          <!-- head -->
-          <thead>
-          <tr>
-            <th>Name</th>
-            <th>Status</th>
-            <th>Address</th>
-            <th>Town</th>
-       
-            <th>Gallons</th>
-            <th>Date</th>
-            <th>Automatic</th>
-            <th>Prime</th>
-            <th>Same Day</th>
-          </tr>
-          </thead>
-          <tbody>
-          <!-- row 1 -->
-          <tr v-for="oil in deliveries" :key="oil['id']"> 
-               <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
-            <td>
-               <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
-              </td>
-              </router-link>
-              <td>
-                <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
-                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
-                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
-                <div v-else></div>
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th>Delivery #</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Town / Address</th>
+                <th>Gallons</th>
+                <th>Date</th>
+                <th>Options</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
+                <td>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
+                  </router-link>
+                </td>
+                <td>
+                  <span class="badge badge-sm badge-success">Delivered</span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>{{ oil.expected_delivery_date }}</td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                  </div>
+                </td>
+                <td class="text-right">
+                  <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">
+                    Finalize
+                  </router-link>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
+                </div>
+                <div class="badge badge-success">
+                  Delivered
+                </div>
+              </div>
+
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+              </div>
+
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+                <p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
+              </div>
               
-              </td>
-              <td>{{ oil['customer_address'] }}</td>
-            <td>{{ oil['customer_town'] }}</td>
-         
-            <td>
-              <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-              <div v-else> {{ oil['gallons_ordered'] }}</div>
-            </td>
-            <td>{{ oil['expected_delivery_date'] }}</td>
-            <td>
-              <div v-if="oil['automatic'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-            <td>
-              <div v-if="oil['prime'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-            <td>
-              <div v-if="oil['same_day'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-
-            <td class="flex gap-5">
-              <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
-                <button class="btn btn-success btn-sm">Finalize</button>
-              </router-link>
-            </td>
-          </tr>
-          </tbody>
-        </table>
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">
+                   Finalize
+                 </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
-                    :options="options" class="mt-10">
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
         </pagination>
-        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+      </div>
     </div>
   </div>
-
-  <Footer/>
+  <Footer />
 </template>
 
 <script lang="ts">
@@ -119,7 +143,7 @@ export default defineComponent({
     return {
       token: null,
       user: null,
-      deliveries: [],
+      deliveries: [] as any[], 
       page: 1,
       perPage: 50,
       recordsLength: 0,
diff --git a/src/pages/delivery/viewstatus/finalized.vue b/src/pages/delivery/viewstatus/finalized.vue
index efd6034..2751da9 100644
--- a/src/pages/delivery/viewstatus/finalized.vue
+++ b/src/pages/delivery/viewstatus/finalized.vue
@@ -1,111 +1,125 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs  pb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Finalized Deliveries</li>
         </ul>
       </div>
 
-      <div class="flex start pb-10 text-2xl">Finalized Delivery </div>
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Completed and Finalized Deliveries</h2>
+          <div class="badge badge-ghost">{{ recordsLength }} items Found</div>
+        </div>
 
+        <div class="divider"></div>
 
-      <div class="overflow-x-auto bg-neutral">
-          
-          <table class="table">
-            <!-- head -->
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
             <thead>
-            <tr>
-              <th>Ticket Id</th>
-              <th>Name</th>
-              <th>Status</th>
-   
-              <th>Address</th>
-              <th>Town</th>
-              <th>Gallons</th>
-              <th>Date</th>
-              <th>Automatic</th>
-              <th>Prime</th>
-              <th>Same Day</th>
-            </tr>
+              <tr>
+                <th>Ticket #</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Town / Address</th>
+                <th>Gallons</th>
+                <th>Date</th>
+                <th>Options</th>
+                <th class="text-right">Actions</th>
+              </tr>
             </thead>
             <tbody>
-            <!-- row 1 -->
-            <tr v-for="oil in deliveries" :key="oil['id']"> 
-              <td>{{ oil['id'] }} </td>
-              <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
-                <td> 
-                  <div class="hover:text-accent">{{ oil['customer_name'] }} </div> 
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
+                <td>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
+                  </router-link>
                 </td>
-              </router-link>
-              <td>
-                <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
-                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
-                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
-                <div v-else></div>
-
-              
-              </td>
-
-              <td>{{ oil['customer_address'] }}</td>
-              <td>{{ oil['customer_town'] }}</td>
-              <td>
-                <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-                <div v-else> {{ oil['gallons_ordered'] }}</div>
-              </td>
-              <td>{{ oil['expected_delivery_date'] }}</td>
-              <td>
-                <div v-if="oil['automatic'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['prime'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['same_day'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-  
-              <td class="flex gap-5">
-                <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">View Delivery</button>
-                </router-link>
-                <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">Edit Delivery</button>
-                </router-link>
-                <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                  <button class="btn btn-success btn-sm">
-                    Print Ticket
-                  </button>
-                </router-link>
-                <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn bg-red-600 text-black">Delete</button> -->
-              </td>
-            </tr>
+                <td>
+                  <span class="badge badge-sm badge-success">Finalized</span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>{{ oil.expected_delivery_date }}</td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                  </div>
+                </td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                    <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                    <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+                  </div>
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
-          <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
-                      :options="options" class="mt-10">
-          </pagination>
-          <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Ticket #{{ oil.id }}</p>
+                </div>
+                <div class="badge badge-success">
+                  Finalized
+                </div>
+              </div>
+
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+              </div>
+
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+                <p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
+              </div>
+              
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                 <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                 <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
+        </pagination>
       </div>
     </div>
-  
-    <Footer/>
-  </template>
+  </div>
+  <Footer />
+</template>
   
   <script lang="ts">
   import {defineComponent} from 'vue'
@@ -130,7 +144,7 @@
       return {
         token: null,
         user: null,
-        deliveries: [],
+        deliveries: [] as any[], 
         page: 1,
         perPage: 50,
         recordsLength: 0,
diff --git a/src/pages/delivery/viewstatus/issue.vue b/src/pages/delivery/viewstatus/issue.vue
index c081603..e30bb22 100755
--- a/src/pages/delivery/viewstatus/issue.vue
+++ b/src/pages/delivery/viewstatus/issue.vue
@@ -1,111 +1,124 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs  pb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
         </ul>
       </div>
+   
 
-      <div class="flex start pb-10 text-2xl">Issue with Delivery </div>
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Deliveries Requiring Attention</h2>
+          <div class="badge badge-ghost">{{ recordsLength }} items Found</div>
+        </div>
 
+        <div class="divider"></div>
 
-      <div class="overflow-x-auto bg-neutral">
-        <table class="table">
-          <!-- head -->
-          <thead>
-          <tr>
-            <th>Ticket Id</th>
-            <th>Name</th>
-            <th>Status</th>
-           
-            <th>Address</th>
-            <th>Town</th>
-            <th>Gallons</th>
-            <th>Date</th>
-            <th>Automatic</th>
-            <th>Prime</th>
-            <th>Same Day</th>
-          </tr>
-          </thead>
-          <tbody>
-          <!-- row 1 -->
-          <tr v-for="oil in deliveries" :key="oil['id']">
-            <td>{{ oil['id'] }} </td>
-              <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th>Ticket #</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Town / Address</th>
+                <th>Gallons</th>
+                <th>Date</th>
+                <th>Options</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
                 <td>
-                   <div class="hover:text-accent">{{ oil['customer_name'] }} </div> 
-                  </td>
-              </router-link>
-              <td>
-                <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
-                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
-                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
-                <div v-else></div>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
+                  </router-link>
+                </td>
+                <td>
+                  <span class="badge badge-sm badge-error">Issue</span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>{{ oil.expected_delivery_date }}</td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                  </div>
+                </td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                    <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                    <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Ticket #{{ oil.id }}</p>
+                </div>
+                <div class="badge badge-error">
+                  Issue
+                </div>
+              </div>
+
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+              </div>
+
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+                <p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
+              </div>
               
-              </td>
-
-         
-            <td>{{ oil['customer_address'] }}</td>
-            <td>{{ oil['customer_town'] }}</td>
-            <td>
-              <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-              <div v-else> {{ oil['gallons_ordered'] }}</div>
-            </td>
-            <td>{{ oil['expected_delivery_date'] }}</td>
-            <td>
-              <div v-if="oil['automatic'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-            <td>
-              <div v-if="oil['prime'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-            <td>
-              <div v-if="oil['same_day'] == 0">No</div>
-              <div v-else>Yes</div>
-            </td>
-
-            <td class="flex gap-5">
-              <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                <button class="btn btn-secondary">View</button>
-              </router-link>
-              <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                <button class="btn btn-secondary ">Edit</button>
-              </router-link>
-              <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">
-                    Print Ticket
-                  </button>
-                </router-link>
-                
-              <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn bg-red-600 text-black">Delete</button> -->
-            </td>
-          </tr>
-          </tbody>
-        </table>
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                 <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                 <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
-                    :options="options" class="mt-10">
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
         </pagination>
-        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+      </div>
     </div>
   </div>
-
-  <Footer/>
+  <Footer />
 </template>
 
 <script lang="ts">
@@ -131,7 +144,7 @@ export default defineComponent({
     return {
       token: null,
       user: null,
-      deliveries: [],
+      deliveries: [] as any[], 
       page: 1,
       perPage: 50,
       recordsLength: 0,
diff --git a/src/pages/delivery/viewstatus/pending.vue b/src/pages/delivery/viewstatus/pending.vue
index 957f3b5..1f0cbf6 100644
--- a/src/pages/delivery/viewstatus/pending.vue
+++ b/src/pages/delivery/viewstatus/pending.vue
@@ -1,139 +1,160 @@
 <template>
-    <Header />
-    <div class="flex">
-      <div class="">
-        <SideBar />
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+        </ul>
       </div>
-      <div class=" w-full px-10 ">
-        <div class="text-sm breadcrumbs  pb-10">
-          <ul>
-            <li>
-              <router-link :to="{ name: 'home' }">
-                Home
-              </router-link>
-            </li>
-          </ul>
+
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Deliveries Awaiting Payment</h2>
+          <div class="badge badge-ghost">{{ recordsLength }} items Found</div>
         </div>
-  
-        <div class="flex start pb-10 text-2xl">Pending Payment Deliveries </div>
-        <div class="flex justify-end pb-5">
-  
-        </div>
-  
-        <div class="overflow-x-auto">
-          <table class="table">
-            <!-- head -->
-            <thead class=" bg-neutral">
+
+        <div class="divider"></div>
+
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
               <tr>
-                <th>Id</th>
+                <th>Delivery #</th>
                 <th>Name</th>
                 <th>Status</th>
-             
-                <th>Address</th>
-                <th>Town</th>
+                <th>Town / Address</th>
                 <th>Gallons</th>
-                <th>Date</th>
-                <th>Auto</th>
-                <th>Prime</th>
-                <th>Same Day</th>
-                <th>Emergency</th>
                 <th>Payment</th>
-                <th></th>
+                <th>Options</th>
+                <th class="text-right">Actions</th>
               </tr>
             </thead>
-            <tbody class="bg-neutral">
-              <!-- row 1 -->
-  
-              <tr v-for="oil in deliveries" :key="oil['id']">
-             
-                <td>{{ oil['id'] }} </td>
-                <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
-                  <td>
-                    <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
-                  </td>
-                </router-link> 
+            <tbody>
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
                 <td>
-                <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
-                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
-                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
-                <div v-else></div>
-
-              
-              </td>
-  
-             
-                <td>{{ oil['customer_address'] }}</td>
-                <td>{{ oil['customer_town'] }}</td>
-                <td>
-                  <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-                  <div v-else> {{ oil['gallons_ordered'] }}</div>
-                </td>
-                <td>{{ oil['expected_delivery_date'] }}</td>
-                <td>
-                  <div v-if="oil['automatic'] == 0">No</div>
-                  <div v-else>Yes</div>
-                </td>
-                <td>
-                  <div v-if="oil['prime'] == 0">No</div>
-                  <div v-else class="text-red-600">Yes</div>
-                </td>
-                <td>
-                  <div v-if="oil['same_day'] == 0">No</div>
-                  <div v-else class="text-red-600">Yes</div>
-                </td>
-                <td>
-                  <div v-if="oil['emergency'] == 0">No</div>
-                  <div v-else class="text-red-600">Yes</div>
-                </td>
-                <td>
-   
-                  <div v-if="oil['payment_type'] == 0">Cash</div>
-                  <div v-else-if="oil['payment_type'] == 1">CC</div>
-                  <div v-else-if="oil['payment_type'] == 2">Cash/CC</div>
-                  <div v-else-if="oil['payment_type'] == 3">Check</div>
-                  <div v-else-if="oil['payment_type'] == 4">Other</div>
-  
-                  <div v-else></div>
-  
-                </td>
-                <td class="flex gap-2">
-  
-                  <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                    <button class="btn btn-secondary btn-sm">View Delivery</button>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
                   </router-link>
-                  <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                    <button class="btn btn-secondary btn-sm">Edit Delivery</button>
-                  </router-link>
-  
-                    <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
-                      <button class="btn btn-secondary btn-sm">Finalize</button>
-                    </router-link>
-                    <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                    <button class="btn btn-success btn-sm">
-                      Print Ticket
-                    </button>
-                  </router-link>
-                  <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
-                    Delete
-                  </button> -->
+                </td>
+                <td>
+                  <span class="badge badge-sm" :class="{
+                    'badge-warning': oil.delivery_status == 0,
+                    'badge-success': oil.delivery_status == 10,
+                    'badge-info': oil.delivery_status == 2,
+                    'badge-error': [1, 5].includes(oil.delivery_status),
+                  }">
+                    <span v-if="oil.delivery_status == 0">Waiting</span>
+                    <span v-else-if="oil.delivery_status == 1">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 10">Finalized</span>
+                    <span v-else>N/A</span>
+                  </span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>
+                  <span v-if="oil.payment_type == 0">Cash</span>
+                  <span v-else-if="oil.payment_type == 1">CC</span>
+                  <span v-else-if="oil.payment_type == 2">Cash/CC</span>
+                  <span v-else-if="oil.payment_type == 3">Check</span>
+                  <span v-else-if="oil.payment_type == 4">Other</span>
+                </td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                    <span v-if="oil.emergency" class="badge badge-error badge-xs">EMERGENCY</span>
+                  </div>
+                </td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                    <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                    <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">Finalize</router-link>
+                    <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+                  </div>
                 </td>
               </tr>
             </tbody>
           </table>
-  
         </div>
-          <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
-          </pagination>
-          <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
+                </div>
+                <div class="badge" :class="{
+                    'badge-warning': oil.delivery_status == 0,
+                    'badge-success': oil.delivery_status == 10,
+                    'badge-info': oil.delivery_status == 2,
+                    'badge-error': [1, 5].includes(oil.delivery_status),
+                  }">
+                    <span v-if="oil.delivery_status == 0">Waiting</span>
+                    <span v-else-if="oil.delivery_status == 1">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 10">Finalized</span>
+                    <span v-else>N/A</span>
+                </div>
+              </div>
+
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+                <div v-if="oil.emergency" class="badge badge-error badge-sm">EMERGENCY</div>
+              </div>
+
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+                 <p><strong class="font-semibold">Payment:</strong> 
+                  <span v-if="oil.payment_type == 0">Cash</span>
+                  <span v-else-if="oil.payment_type == 1">CC</span>
+                  <span v-else-if="oil.payment_type == 2">Cash/CC</span>
+                  <span v-else-if="oil.payment_type == 3">Check</span>
+                  <span v-else-if="oil.payment_type == 4">Other</span>
+                </p>
+              </div>
+              
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                 <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                 <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">Finalize</router-link>
+                 <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
+        </pagination>
       </div>
     </div>
-  
-    <Footer />
-  </template>
+  </div>
+  <Footer />
+</template>
   
   <script lang="ts">
   import { defineComponent } from 'vue'
@@ -158,7 +179,7 @@
       return {
         token: null,
         user: null,
-        deliveries: [],
+        deliveries: [] as any[], 
         page: 1,
         perPage: 50,
         recordsLength: 0,
diff --git a/src/pages/delivery/viewstatus/todaysdeliveries.vue b/src/pages/delivery/viewstatus/todaysdeliveries.vue
index 9d48df6..347d03d 100755
--- a/src/pages/delivery/viewstatus/todaysdeliveries.vue
+++ b/src/pages/delivery/viewstatus/todaysdeliveries.vue
@@ -1,138 +1,170 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs  pb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Today's Deliveries</li>
         </ul>
       </div>
+     
 
-      <div class="flex start pb-10 text-2xl">Todays Deliveries </div>
-      <div class="flex justify-end pb-5">
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Search and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+           <h2 class="text-lg font-bold">Todays Deliveries</h2>
+          <div class="form-control">
+            <label class="label pt-1 pb-0">
+              <span class="label-text-alt">{{ recordsLength }} deliveries found</span>
+            </label>
+          </div>
+        </div>
 
-      </div>
+        <div class="divider"></div>
 
-      <div class="overflow-x-auto">
-        <table class="table">
-          <!-- head -->
-          <thead class=" bg-neutral">
-            <tr>
-              <th>Id</th>
-              <th>Name</th>
-              <th>Status</th>
-              <th>Town</th>
-              <th>Address</th>
-              <th>Gallons</th>
-              <th>Date</th>
-              <th>Auto</th>
-              <th>Prime</th>
-              <th>Same Day</th>
-              <th>Emergency</th>
-              <th>Payment</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody class="bg-neutral">
-            <!-- row 1 -->
-
-            <tr v-for="oil in deliveries" :key="oil['id']">
-
-              <td>{{ oil['id'] }} </td>
-              <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th>Delivery #</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Town / Address</th>
+                <th>Gallons</th>
+                <th>Options</th>
+                <th>Payment</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
                 <td>
-                  <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
+                  </router-link>
                 </td>
-              </router-link>
-              <td>
-                <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
-                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
-                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
-                <div v-else></div>
+                <td>
+                  <span class="badge badge-sm" :class="{
+                    'badge-warning': oil.delivery_status == 0,
+                    'badge-success': oil.delivery_status == 10,
+                    'badge-info': oil.delivery_status == 2,
+                    'badge-error': [1, 5].includes(oil.delivery_status),
+                  }">
+                    <span v-if="oil.delivery_status == 0">Waiting</span>
+                    <span v-else-if="oil.delivery_status == 1">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 3">Tomorrow</span>
+                    <span v-else-if="oil.delivery_status == 4">Partial</span>
+                    <span v-else-if="oil.delivery_status == 5">Issue</span>
+                    <span v-else-if="oil.delivery_status == 10">Finalized</span>
+                  </span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                    <span v-if="oil.emergency" class="badge badge-error badge-xs">EMERGENCY</span>
+                  </div>
+                </td>
+                <td>
+                  <span v-if="oil.payment_type == 0">Cash</span>
+                  <span v-else-if="oil.payment_type == 1">CC</span>
+                  <span v-else-if="oil.payment_type == 2">Cash/CC</span>
+                  <span v-else-if="oil.payment_type == 3">Check</span>
+                  <span v-else-if="oil.payment_type == 4">Other</span>
+                </td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                    <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                    <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
+                    <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
+                </div>
+                <div class="badge" :class="{
+                    'badge-warning': oil.delivery_status == 0,
+                    'badge-success': oil.delivery_status == 10,
+                    'badge-info': oil.delivery_status == 2,
+                    'badge-error': [1, 5].includes(oil.delivery_status),
+                  }">
+                    <span v-if="oil.delivery_status == 0">Waiting</span>
+                    <span v-else-if="oil.delivery_status == 1">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 3">Tomorrow</span>
+                    <span v-else-if="oil.delivery_status == 4">Partial</span>
+                    <span v-else-if="oil.delivery_status == 5">Issue</span>
+                    <span v-else-if="oil.delivery_status == 10">Finalized</span>
+                </div>
+              </div>
 
-              </td>
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+                <div v-if="oil.emergency" class="badge badge-error badge-sm">EMERGENCY</div>
+              </div>
 
-              <td>{{ oil['customer_town'] }}</td>
-              <td>{{ oil['customer_address'] }}</td>
-              <td>
-                <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-                <div v-else> {{ oil['gallons_ordered'] }}</div>
-              </td>
-              <td>{{ oil['expected_delivery_date'] }}</td>
-              <td>
-                <div v-if="oil['automatic'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['prime'] == 0">No</div>
-                <div v-else class="text-red-600">Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['same_day'] == 0">No</div>
-                <div v-else class="text-red-600">Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['emergency'] == 0">No</div>
-                <div v-else class="text-red-600">Yes</div>
-              </td>
-              <td>
-
-                <div v-if="oil['payment_type'] == 0">Cash</div>
-                <div v-else-if="oil['payment_type'] == 1">CC</div>
-                <div v-else-if="oil['payment_type'] == 2">Cash/CC</div>
-                <div v-else-if="oil['payment_type'] == 3">Check</div>
-                <div v-else-if="oil['payment_type'] == 4">Other</div>
-
-                <div v-else></div>
-
-              </td>
-              <td class="flex gap-2">
-
-                <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">View Delivery</button>
-                </router-link>
-                <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">Edit Delivery</button>
-                </router-link>
-                <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">Finalize</button>
-                </router-link>
-                <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                  <button class="btn btn-success btn-sm">
-                    Print Ticket
-                  </button>
-                </router-link>
-                <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
-                  Delete
-                </button> -->
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+                 <p><strong class="font-semibold">Payment:</strong> 
+                  <span v-if="oil.payment_type == 0">Cash</span>
+                  <span v-else-if="oil.payment_type == 1">CC</span>
+                  <span v-else-if="oil.payment_type == 2">Cash/CC</span>
+                  <span v-else-if="oil.payment_type == 3">Check</span>
+                  <span v-else-if="oil.payment_type == 4">Other</span>
+                </p>
+              </div>
+              
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                 <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                 <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
+                 <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <!-- Pagination -->
+        <div class="mt-6 flex justify-center">
+          <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
+          </pagination>
+        </div>
       </div>
-      <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options"
-        class="mt-10">
-      </pagination>
-      <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
     </div>
   </div>
-
   <Footer />
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
@@ -156,7 +188,7 @@ export default defineComponent({
     return {
       token: null,
       user: null,
-      deliveries: [],
+      deliveries: [] as any[], 
       page: 1,
       perPage: 50,
       recordsLength: 0,
diff --git a/src/pages/delivery/viewstatus/tommorrow.vue b/src/pages/delivery/viewstatus/tommorrow.vue
index 86c19b9..7880652 100644
--- a/src/pages/delivery/viewstatus/tommorrow.vue
+++ b/src/pages/delivery/viewstatus/tommorrow.vue
@@ -1,115 +1,146 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs  mb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
         </ul>
       </div>
 
-      <div class="flex start pb-10 text-2xl">Tommorrows Deliveries </div>
-      <div class="flex justify-end pb-5">
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count (No Search Input) -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Deliveries Scheduled</h2>
+          <div class="badge badge-ghost">{{ recordsLength }} deliveries found</div>
+        </div>
 
-      </div>
+        <div class="divider"></div>
 
-      <div class="overflow-x-auto bg-neutral">
-        <div class="flex start"> </div>
-        <table class="table">
-          <!-- head -->
-          <thead>
-            <tr>
-              <th>Account Id</th>
-              <th>Name</th>
-              <th>Status</th>
-            
-              <th>Address</th>
-              <th>Town</th>
-              <th>Gallons</th>
-              <th>Date</th>
-              <th>Automatic</th>
-              <th>Prime</th>
-              <th>Same Day</th>
-            </tr>
-          </thead>
-          <tbody>
-            <!-- row 1 -->
-            <tr v-for="oil in deliveries" :key="oil['id']">
-              <td>{{ oil['id'] }} </td>
-              <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
-
-                <td> 
-                  <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
-                 </td>
-              </router-link>
-              <td>
-                <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
-                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
-                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
-                <div v-else></div>
-              </td>
-
-      
-              <td>{{ oil['customer_address'] }}</td>
-              <td>{{ oil['customer_town'] }}</td>
-              <td>
-                <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-                <div v-else> {{ oil['gallons_ordered'] }}</div>
-              </td>
-              <td>{{ oil['expected_delivery_date'] }}</td>
-              <td>
-                <div v-if="oil['automatic'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['prime'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['same_day'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-
-              <td class="flex gap-5">
-                <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">View Delivery</button>
-                </router-link>
-                <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">Edit Delivery</button>
-                </router-link>
-                <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
-                    <button class="btn btn-secondary btn-sm">Finalize</button>
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th>Delivery #</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Town / Address</th>
+                <th>Gallons</th>
+                <th>Options</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
+                <td>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
                   </router-link>
-                <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                <button  class="btn btn-success btn-sm  ">
-                  Print Ticket
-                </button>
-                </router-link>
-                <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
-                  Delete
-                </button> -->
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+                <td>
+                  <span class="badge badge-sm" :class="{
+                    'badge-warning': oil.delivery_status == 0,
+                    'badge-success': oil.delivery_status == 10,
+                    'badge-info': oil.delivery_status == 2,
+                    'badge-error': [1, 5].includes(oil.delivery_status),
+                  }">
+                    <span v-if="oil.delivery_status == 0">Waiting</span>
+                    <span v-else-if="oil.delivery_status == 1">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 3">Tomorrow</span>
+                    <span v-else-if="oil.delivery_status == 4">Partial</span>
+                    <span v-else-if="oil.delivery_status == 5">Issue</span>
+                    <span v-else-if="oil.delivery_status == 10">Finalized</span>
+                  </span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                  </div>
+                </td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                    <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                    <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
+                    <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
+                </div>
+                <div class="badge" :class="{
+                    'badge-warning': oil.delivery_status == 0,
+                    'badge-success': oil.delivery_status == 10,
+                    'badge-info': oil.delivery_status == 2,
+                    'badge-error': [1, 5].includes(oil.delivery_status),
+                  }">
+                    <span v-if="oil.delivery_status == 0">Waiting</span>
+                    <span v-else-if="oil.delivery_status == 1">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 3">Tomorrow</span>
+                    <span v-else-if="oil.delivery_status == 4">Partial</span>
+                    <span v-else-if="oil.delivery_status == 5">Issue</span>
+                    <span v-else-if="oil.delivery_status == 10">Finalized</span>
+                </div>
+              </div>
+
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+              </div>
+
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+                <p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
+              </div>
+              
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                 <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                 <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
+                 <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
         </pagination>
-        <!-- <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div> -->
+      </div>
     </div>
   </div>
-
   <Footer />
 </template>
 
@@ -136,7 +167,7 @@ export default defineComponent({
     return {
       token: null,
       user: null,
-      deliveries: [],
+      deliveries: [] as any[], 
       page: 1,
       perPage: 50,
       recordsLength: 0,
diff --git a/src/pages/delivery/viewstatus/waiting.vue b/src/pages/delivery/viewstatus/waiting.vue
index 8497e52..7a06788 100755
--- a/src/pages/delivery/viewstatus/waiting.vue
+++ b/src/pages/delivery/viewstatus/waiting.vue
@@ -1,115 +1,126 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs  pb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
         </ul>
       </div>
 
-      <div class="flex start pb-10 text-2xl">Waiting Deliveries </div>
-      <div class="flex justify-end pb-5">
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Deliveries Awaiting Dispatch</h2>
+          <div class="badge badge-ghost">{{ recordsLength }} deliveries found</div>
+        </div>
 
-      </div>
+        <div class="divider"></div>
 
-      <div class="overflow-x-auto bg-neutral">
-        <table class="table">
-          <!-- head -->
-          <thead>
-            <tr>
-              <th>Account Id</th>
-              <th>Name</th>
-              <th>Status</th>
-      
-              <th>Address</th>
-              <th>Town</th>
-              <th>Gallons</th>
-              <th>Date</th>
-              <th>Automatic</th>
-              <th>Prime</th>
-              <th>Same Day</th>
-            </tr>
-          </thead>
-          <tbody>
-            <!-- row 1 -->
-            <tr v-for="oil in deliveries" :key="oil['id']">
-              <td>{{ oil['id'] }} </td>
-              <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
-                <td> 
-                  <div class="hover:text-accent">{{ oil['customer_name'] }} </div> 
-                </td>
-              </router-link>
-              <td>
-                <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">delivered</div>
-                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
-                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
-                <div v-else></div>
-              </td>
-
-     
-              <td>{{ oil['customer_address'] }}</td>
-              <td>{{ oil['customer_town'] }}</td>
-              <td>
-                <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
-                <div v-else> {{ oil['gallons_ordered'] }}</div>
-              </td>
-              <td>{{ oil['expected_delivery_date'] }}</td>
-              <td>
-                <div v-if="oil['automatic'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['prime'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['same_day'] == 0">No</div>
-                <div v-else>Yes</div>
-              </td>
-
-              <td class="flex gap-2">
-                <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">View Delivery</button>
-                </router-link>
-                <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">Edit Delivery</button>
-                </router-link>
-            
-
-                <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
-                    <button class="btn btn-secondary btn-sm">Finalize</button>
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th>Delivery #</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Town / Address</th>
+                <th>Gallons</th>
+                <th>Date</th>
+                <th>Options</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ oil.id }}</td>
+                <td>
+                  <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    {{ oil.customer_name }}
                   </router-link>
-                  <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                  <button  class="btn btn-success btn-sm">
-                  Print Ticket
-                </button>
-                </router-link>
-                <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
-                  Delete
-                </button> -->
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+                <td>
+                  <span class="badge badge-sm badge-warning">
+                    Waiting
+                  </span>
+                </td>
+                <td>
+                  <div>{{ oil.customer_town }}</div>
+                  <div class="text-xs opacity-70">{{ oil.customer_address }}</div>
+                </td>
+                <td>
+                  <span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </td>
+                <td>{{ oil.expected_delivery_date }}</td>
+                <td>
+                  <div class="flex flex-col gap-1">
+                    <span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
+                    <span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
+                  </div>
+                </td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                    <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                    <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">Finalize</router-link>
+                    <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
+                  <p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
+                </div>
+                <div class="badge badge-warning">
+                  Waiting
+                </div>
+              </div>
+
+              <div class="flex gap-2 mt-2">
+                <div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
+                <div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
+              </div>
+
+              <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                <p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
+                <p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
+                <p><strong class="font-semibold">Gallons:</strong>
+                  <span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
+                  <span v-else>{{ oil.gallons_ordered }}</span>
+                </p>
+                <p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
+              </div>
+              
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                 <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                 <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                 <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">Finalize</router-link>
+                 <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
         </pagination>
-        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+      </div>
     </div>
   </div>
-
   <Footer />
 </template>
 
@@ -136,7 +147,7 @@ export default defineComponent({
     return {
       token: null,
       user: null,
-      deliveries: [],
+      deliveries: [] as any[], 
       page: 1,
       perPage: 50,
       recordsLength: 0,
diff --git a/src/pages/employee/create.vue b/src/pages/employee/create.vue
index 7b6a251..be32bff 100755
--- a/src/pages/employee/create.vue
+++ b/src/pages/employee/create.vue
@@ -1,233 +1,214 @@
 <template>
-  <Header />
-  <div v-if="user">
-    <div class="flex">
-      <div class="">
-        <SideBar />
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Employees</li>
+          <li>Create New Employee</li>
+        </ul>
       </div>
-      <div class="w-full px-10">
-        <div class="text-sm breadcrumbs">
-          <ul>
-            <li>
-              <router-link :to="{ name: 'home' }">
-                Home
-              </router-link>
-            </li>
-            <li>
-              <router-link :to="{ name: 'customer' }">
-                Customers
-              </router-link>
-            </li>
-          </ul>
-        </div>
-        <div class="grid grid-cols-1 rounded-md p-6 ">
-          <div class="text-[24px]">Create a new employee</div>
-          <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">
 
+      <h1 class="text-3xl font-bold mt-4">
+        Create New Employee
+      </h1>
 
+      <!-- Main Form Card -->
+      <div class="bg-neutral rounded-lg p-6 mt-6">
+        <form @submit.prevent="onSubmit" class="space-y-6">
 
-            <div class="text-[18px] mt-10 mb-10">General Info</div>
-
-            <!-- last name -->
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Last Name</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_last_name"
-                class="input input-bordered w-full max-w-xs" id="title" type="text" placeholder="Last Name" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_last_name.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_last_name.$errors[0].$message }}
-              </span>
-            </div>
-
-            <!-- first name -->
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">First Name</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_first_name"
-                class="input input-bordered w-full max-w-xs" id="title" type="text" placeholder="First Name" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_first_name.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_first_name.$errors[0].$message }}
-              </span>
-            </div>
-
-            <!-- employee type -->
-            <div class="flex gap-5">
-              <div class="flex-1 mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Type of employee</label>
-                <select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
-                  id="employee_type" v-model="CreateEmployeeForm.basicInfo.employee_type">
-                  <option class="text-white" v-for="(employee, index) in employList" :key="index"
-                    :value="employee['value']">
-                    {{ employee['text'] }}
+          <!-- SECTION 1: General Info -->
+          <div>
+            <h2 class="text-lg font-bold">General Info</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <!-- First Name -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">First Name</span></label>
+                <input v-model="CreateEmployeeForm.employee_first_name" type="text" placeholder="First Name" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_first_name.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_first_name.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Last Name -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Last Name</span></label>
+                <input v-model="CreateEmployeeForm.employee_last_name" type="text" placeholder="Last Name" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_last_name.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_last_name.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Phone Number -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Phone Number</span></label>
+                <input v-model="CreateEmployeeForm.employee_phone_number" @input="acceptNumber()" type="text" placeholder="Phone Number" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_phone_number.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_phone_number.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Employee Type -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Employee Role</span></label>
+                <select v-model="CreateEmployeeForm.employee_type" class="select select-bordered select-sm w-full">
+                  <option disabled :value="0">Select a role</option>
+                  <option v-for="employee in employList" :key="employee.value" :value="employee.value">
+                    {{ employee.text }}
                   </option>
                 </select>
+                <span v-if="v$.CreateEmployeeForm.employee_type.$error" class="text-red-500 text-xs mt-1">
+                  Role is required.
+                </span>
               </div>
             </div>
+          </div>
 
-
-            <div class="text-[18px] mt-10 mb-10">Employee Address</div>
-
-            <!-- street address -->
-            <div class="col-span-12 mb-5 md:mb-5">
-              <label class="block text-white text-sm font-bold mb-2">Street Address</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_address" class="input input-bordered w-full max-w-xs"
-                id="address" type="text" placeholder="Address" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_address.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_address.$errors[0].$message }}
-              </span>
+          <!-- SECTION 2: Address -->
+          <div>
+            <h2 class="text-lg font-bold">Address</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- Street Address -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Street Address</span></label>
+                <input v-model="CreateEmployeeForm.employee_address" type="text" placeholder="Street Address" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_address.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_address.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Apt, Suite, etc. -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Apt, Suite, etc. (Optional)</span></label>
+                <input v-model="CreateEmployeeForm.employee_apt" type="text" placeholder="Apt, suite, unit..." class="input input-bordered input-sm w-full" />
+                 <span v-if="v$.CreateEmployeeForm.employee_apt.$error" class="text-red-500 text-xs mt-1">Required.</span>
+              </div>
+              <!-- Town -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Town</span></label>
+                <input v-model="CreateEmployeeForm.employee_town" type="text" placeholder="Town" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_town.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_town.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- State -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">State</span></label>
+                <select v-model="CreateEmployeeForm.employee_state" class="select select-bordered select-sm w-full">
+                  <option disabled :value="0">Select a state</option>
+                  <option v-for="state in stateList" :key="state.value" :value="state.value">
+                    {{ state.text }}
+                  </option>
+                </select>
+                <span v-if="v$.CreateEmployeeForm.employee_state.$error" class="text-red-500 text-xs mt-1">
+                  State is required.
+                </span>
+              </div>
+              <!-- Zip Code -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Zip Code</span></label>
+                <input v-model="CreateEmployeeForm.employee_zip" type="text" placeholder="Zip Code" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_zip.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_zip.$errors[0].$message }}
+                </span>
+              </div>
             </div>
+          </div>
 
-            <!-- apt -->
-            <div class="col-span-12 mb-5 md:mb-5">
-
-              <input v-model="CreateEmployeeForm.basicInfo.employee_apt" class="input input-bordered w-full max-w-xs"
-                id="apt" type="text" placeholder="Apt, suite, unit, building, floor, etc" />
+          <!-- SECTION 3: Employment Dates -->
+          <div>
+            <h2 class="text-lg font-bold">Employment Dates & Details</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div class="form-control">
+                <label class="label"><span class="label-text">Birthday</span></label>
+                <input v-model="CreateEmployeeForm.employee_birthday" type="date" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_birthday.$error" class="text-red-500 text-xs mt-1">Required.</span>
+              </div>
+              <div class="form-control">
+                <label class="label"><span class="label-text">Start Date</span></label>
+                <input v-model="CreateEmployeeForm.employee_start_date" type="date" class="input input-bordered input-sm w-full" />
+                 <span v-if="v$.CreateEmployeeForm.employee_start_date.$error" class="text-red-500 text-xs mt-1">Required.</span>
+              </div>
+              <div class="form-control">
+                <label class="label"><span class="label-text">End Date (Optional)</span></label>
+                <input v-model="CreateEmployeeForm.employee_end_date" type="date" class="input input-bordered input-sm w-full" />
+              </div>
             </div>
+          </div>
 
-            <!-- customer_town -->
-            <div class="col-span-12 md:col-span-4 mb-20 md:mb-5 ">
-              <label class="block text-white text-sm font-bold mb-2">Town</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_town" class="input input-bordered w-full max-w-xs"
-                id="city" type="text" placeholder="Town" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_town.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_town.$errors[0].$message }}
-              </span>
-            </div>
-
-            <!-- phone number -->
-            <div class="col-span-12 md:col-span-4 mb-5 md:mb-5">
-              <label class="block text-white text-sm font-bold mb-2">Phone Number</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_phone_number"
-                class="input input-bordered w-full max-w-xs" id="phone number" type="text" placeholder="Phone Number"
-                @input="acceptNumber()" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_phone_number.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_phone_number.$errors[0].$message }}
-              </span>
-            </div>
-
-            <!-- state -->
-            <div class="flex-1 mb-4">
-              <label class="block text-white text-sm font-bold mb-2">State</label>
-              <select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
-                id="employee_state" v-model="CreateEmployeeForm.basicInfo.employee_state">
-                <option class="text-white" v-for="(state, index) in stateList" :key="index" :value="state['value']">
-                  {{ state['text'] }}
-                </option>
-              </select>
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_state.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_state.$errors[0].$message }}
-              </span>
-            </div>
-
-            <!-- zip -->
-            <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
-              <label class="block text-white text-sm font-bold mb-2">Zip Code</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_zip" class="input input-bordered w-full max-w-xs"
-                id="zip" type="text" placeholder="Zip" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_zip.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_zip.$errors[0].$message }}
-              </span>
-            </div>
-
-
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Employee BirthDay</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_birthday" class="input input-bordered w-full max-w-xs"
-                id="title" type="date" min="1945-01-01" max="2030-01-01" />
-
-            </div>
-            <div class="text-[18px] mt-10 mb-10">Employee Dates</div>
-
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Employee Start Date</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_start_date"
-                class="input input-bordered w-full max-w-xs" id="title" type="date" min="2023-01-01" max="2030-01-01" />
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Employee End Date</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_end_date" class="input input-bordered w-full max-w-xs"
-                id="title" type="date" min="2023-01-01" max="2030-01-01" />
-            </div>
-
-            <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-              <button class="btn">
-                Create Employee
-              </button>
-            </div>
-          </form>
-        </div>
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Create Employee</button>
+          </div>
+        </form>
       </div>
     </div>
   </div>
-
   <Footer />
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
-import {minLength, required} from "@vuelidate/validators";
+import { minLength, required } from "@vuelidate/validators";
+
+interface SelectOption {
+  text: string;
+  value: number;
+}
 
 export default defineComponent({
   name: 'EmployeeCreate',
-
   components: {
-    Header,
-    SideBar,
     Footer,
   },
-
   data() {
     return {
       v$: useValidate(),
       user: null,
-      stateList: [],
-      employList: [],
-      employee_id: '',
+      stateList: [] as SelectOption[],
+      employList: [] as SelectOption[],
+      // --- REFACTORED: Simplified, flat form object ---
       CreateEmployeeForm: {
-        basicInfo: {
-          employee_last_name: "",
-          employee_first_name: "",
-          employee_town: "",
-          employee_address: "",
-          employee_apt: "",
-          employee_zip: "",
-          employee_birthday: "",
-          employee_phone_number: "",
-          employee_start_date: "",
-          employee_end_date: "",
-          employee_type: "",
-          employee_state: "",
-
-        },
+        employee_last_name: "",
+        employee_first_name: "",
+        employee_town: "",
+        employee_address: "",
+        employee_apt: "",
+        employee_zip: "",
+        employee_birthday: "",
+        employee_phone_number: "",
+        employee_start_date: "",
+        employee_end_date: "",
+        // --- FIX: Initialized as a number for proper v-model binding ---
+        employee_type: 0,
+        employee_state: 0,
       },
     }
   },
   validations() {
     return {
+      // --- REFACTORED: Validation rules point to the flat form object ---
       CreateEmployeeForm: {
-        basicInfo: {
-          employee_last_name: {required, minLength: minLength(1)},
-          employee_first_name: {required, minLength: minLength(1)},
-          employee_town: {required, minLength: minLength(1)},
-          employee_type: {required},
-          employee_zip: {required, minLength: minLength(5)},
-          employee_state: {required},
-          employee_apt: {required},
-          employee_address: {required},
-          employee_birthday: {required},
-          employee_phone_number: {required},
-          employee_start_date: {required},
-        },
+        employee_last_name: { required, minLength: minLength(1) },
+        employee_first_name: { required, minLength: minLength(1) },
+        employee_town: { required, minLength: minLength(1) },
+        employee_type: { required },
+        employee_zip: { required, minLength: minLength(5) },
+        employee_state: { required },
+        employee_apt: { required },
+        employee_address: { required },
+        employee_birthday: { required },
+        employee_phone_number: { required },
+        employee_start_date: { required },
       },
     };
   },
   created() {
-    this.userStatus()
+    this.userStatus();
   },
   mounted() {
     this.getEmployeeTypeList();
@@ -235,108 +216,50 @@ export default defineComponent({
   },
   methods: {
     acceptNumber() {
-        let x = this.CreateEmployeeForm.basicInfo.employee_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
-        if (x){
-          this.CreateEmployeeForm.basicInfo.employee_phone_number = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
-        }
-        else {
-          this.CreateEmployeeForm.basicInfo.employee_phone_number = ''
-        }
+      const x = this.CreateEmployeeForm.employee_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
+      if (x) {
+        this.CreateEmployeeForm.employee_phone_number = !x[2] ? x[1] : `(${x[1]}) ${x[2]}${x[3] ? `-${x[3]}` : ''}`;
+      }
     },
     userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data.ok) {
-              this.user = response.data.user;
-            }
-          })
-          .catch(() => {
-            this.user = null
-          })
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) { this.user = response.data.user; }
+        })
+        .catch(() => { this.user = null; });
     },
-    CreateItem(payload: {
-      employee_last_name: string;
-      employee_first_name: string;
-      employee_town: string;
-      employee_address: string;
-      employee_zip: string;
-      employee_apt: string,
-      employee_birthday: string;
-      employee_phone_number: string;
-      employee_start_date: string,
-      employee_end_date: string;
-      employee_type: string;
-      employee_state: string;
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/employee/create";
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data.ok) {
-              this.employee_id= response.data['user_id']
-              this.$router.push({name: "employeeProfile", params: { id: this.employee_id }});
-            }
-            if (response.data.error) {
-              this.$router.push("/");
-            }
-          })
+    CreateItem(payload: any) {
+      const path = import.meta.env.VITE_BASE_URL + "/employee/create";
+      axios.post(path, payload, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) {
+            const employee_id = response.data['user_id'];
+            this.$router.push({ name: "employeeProfile", params: { id: employee_id } });
+          } else {
+            console.error("Failed to create employee:", response.data.error);
+            // Optionally, show a notification to the user
+          }
+        });
     },
     onSubmit() {
-      let payload = {
-        employee_last_name: this.CreateEmployeeForm.basicInfo.employee_last_name,
-        employee_first_name: this.CreateEmployeeForm.basicInfo.employee_first_name,
-        employee_town: this.CreateEmployeeForm.basicInfo.employee_town,
-        employee_address: this.CreateEmployeeForm.basicInfo.employee_address,
-        employee_zip: this.CreateEmployeeForm.basicInfo.employee_zip,
-        employee_apt: this.CreateEmployeeForm.basicInfo.employee_apt,
-        employee_birthday: this.CreateEmployeeForm.basicInfo.employee_birthday,
-        employee_phone_number: this.CreateEmployeeForm.basicInfo.employee_phone_number,
-        employee_start_date: this.CreateEmployeeForm.basicInfo.employee_start_date,
-        employee_end_date: this.CreateEmployeeForm.basicInfo.employee_end_date,
-        employee_type: this.CreateEmployeeForm.basicInfo.employee_type,
-        employee_state: this.CreateEmployeeForm.basicInfo.employee_state,
-      };
-      this.CreateItem(payload);
+      this.v$.$validate(); // Trigger validation
+      if (!this.v$.$error) {
+        this.CreateItem(this.CreateEmployeeForm);
+      } else {
+        console.log("Form validation failed.");
+      }
     },
     getEmployeeTypeList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/employeetype";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.employList = response.data;
-          })
-          .catch(() => {
-          });
+      const path = import.meta.env.VITE_BASE_URL + "/query/employeetype";
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => { this.employList = response.data; });
     },
     getStatesList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/states";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.stateList = response.data;
-          })
-          .catch(() => {
-          });
+      const path = import.meta.env.VITE_BASE_URL + "/query/states";
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => { this.stateList = response.data; });
     },
   },
 })
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/pages/employee/edit.vue b/src/pages/employee/edit.vue
index 87f0bbc..747139e 100755
--- a/src/pages/employee/edit.vue
+++ b/src/pages/employee/edit.vue
@@ -1,383 +1,275 @@
 <template>
-  <Header />
-  <div v-if="user">
-    <div class="flex">
-      <div class="">
-        <SideBar />
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Employees</li>
+          <li>Edit Employee</li>
+        </ul>
       </div>
-      <div class="w-full px-10">
-        <div class="text-sm breadcrumbs">
-          <ul>
-            <li>
-              <router-link :to="{ name: 'home' }">
-                Home
-              </router-link>
-            </li>
-            <li>
-              <router-link :to="{ name: 'customer' }">
-                Customers
-              </router-link>
-            </li>
-          </ul>
-        </div>
-        <div class="grid grid-cols-1 rounded-md p-6 ">
-          <div class="text-[24px]">Edit employee</div>
-          <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">
 
-            <div class="text-[18px] mt-10 mb-10">General Info</div>
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4">
+        <h1 class="text-3xl font-bold">
+          Edit Employee
+        </h1>
+        <router-link v-if="employee_id" :to="{ name: 'employeeProfile', params: { id: employee_id } }" class="btn btn-secondary btn-sm mt-2 sm:mt-0">
+          Back to Profile
+        </router-link>
+      </div>
 
-            <!-- first name -->
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">First Name</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_first_name"
-                class="input input-bordered input-sm w-full max-w-xs" id="title" type="text" placeholder="First Name" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_first_name.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_first_name.$errors[0].$message }}
-              </span>
-            </div>
+      <!-- Main Form Card -->
+      <div class="bg-neutral rounded-lg p-6 mt-6">
+        <form @submit.prevent="onSubmit" class="space-y-6">
 
-
-            <!-- last name -->
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Last Name</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_last_name"
-                class="input input-bordered input-sm w-full max-w-xs" id="title" type="text" placeholder="Last Name" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_last_name.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_last_name.$errors[0].$message }}
-              </span>
-            </div>
-
-
-            <!-- employee type -->
-            <div class="flex gap-5">
-              <div class="flex-1 mb-4">
-                <label class="block text-white text-sm font-bold mb-2">Type of employee</label>
-                <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                  id="employee_type" v-model="CreateEmployeeForm.basicInfo.employee_type">
-                  <option class="text-white" v-for="(employee, index) in employList" :key="index"
-                    :value="employee['value']">
-                    {{ employee['text'] }}
+          <!-- SECTION 1: General Info -->
+          <div>
+            <h2 class="text-lg font-bold">General Info</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <!-- First Name -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">First Name</span></label>
+                <input v-model="CreateEmployeeForm.employee_first_name" type="text" placeholder="First Name" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_first_name.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_first_name.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Last Name -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Last Name</span></label>
+                <input v-model="CreateEmployeeForm.employee_last_name" type="text" placeholder="Last Name" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_last_name.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_last_name.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Phone Number -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Phone Number</span></label>
+                <input v-model="CreateEmployeeForm.employee_phone_number" @input="acceptNumber()" type="text" placeholder="Phone Number" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_phone_number.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_phone_number.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Employee Type -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Employee Role</span></label>
+                <select v-model="CreateEmployeeForm.employee_type" class="select select-bordered select-sm w-full">
+                  <option disabled :value="0">Select a role</option>
+                  <option v-for="employee in employList" :key="employee.value" :value="employee.value">
+                    {{ employee.text }}
                   </option>
                 </select>
+                <span v-if="v$.CreateEmployeeForm.employee_type.$error" class="text-red-500 text-xs mt-1">
+                  Role is required.
+                </span>
               </div>
             </div>
+          </div>
 
-
-            <div class="text-[18px] mt-10 mb-10">Employee Address</div>
-
-            <!-- street address -->
-            <div class="col-span-12 mb-5 md:mb-5">
-              <label class="block text-white text-sm font-bold mb-2">Street Address</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_address" 
-              class="input input-bordered input-sm w-full max-w-xs"
-                id="address" type="text" placeholder="Address" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_address.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_address.$errors[0].$message }}
-              </span>
+          <!-- SECTION 2: Address -->
+          <div>
+            <h2 class="text-lg font-bold">Address</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- Street Address -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Street Address</span></label>
+                <input v-model="CreateEmployeeForm.employee_address" type="text" placeholder="Street Address" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_address.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_address.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- Apt, Suite, etc. -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Apt, Suite, etc. (Optional)</span></label>
+                <input v-model="CreateEmployeeForm.employee_apt" type="text" placeholder="Apt, suite, unit..." class="input input-bordered input-sm w-full" />
+              </div>
+              <!-- Town -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Town</span></label>
+                <input v-model="CreateEmployeeForm.employee_town" type="text" placeholder="Town" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_town.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_town.$errors[0].$message }}
+                </span>
+              </div>
+              <!-- State -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">State</span></label>
+                <select v-model="CreateEmployeeForm.employee_state" class="select select-bordered select-sm w-full">
+                  <option disabled :value="0">Select a state</option>
+                  <option v-for="state in stateList" :key="state.value" :value="state.value">
+                    {{ state.text }}
+                  </option>
+                </select>
+                <span v-if="v$.CreateEmployeeForm.employee_state.$error" class="text-red-500 text-xs mt-1">
+                  State is required.
+                </span>
+              </div>
+              <!-- Zip Code -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Zip Code</span></label>
+                <input v-model="CreateEmployeeForm.employee_zip" type="text" placeholder="Zip Code" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_zip.$error" class="text-red-500 text-xs mt-1">
+                  {{ v$.CreateEmployeeForm.employee_zip.$errors[0].$message }}
+                </span>
+              </div>
             </div>
+          </div>
 
-            <!-- apt -->
-            <div class="col-span-12 mb-5 md:mb-5">
-
-              <input v-model="CreateEmployeeForm.basicInfo.employee_apt"
-               class="input input-bordered input-sm w-full max-w-xs"
-                id="apt" type="text" placeholder="Apt, suite, unit, building, floor, etc" />
+          <!-- SECTION 3: Employment Dates -->
+          <div>
+            <h2 class="text-lg font-bold">Employment Dates & Details</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div class="form-control">
+                <label class="label"><span class="label-text">Birthday</span></label>
+                <input v-model="CreateEmployeeForm.employee_birthday" type="date" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_birthday.$error" class="text-red-500 text-xs mt-1">Required.</span>
+              </div>
+              <div class="form-control">
+                <label class="label"><span class="label-text">Start Date</span></label>
+                <input v-model="CreateEmployeeForm.employee_start_date" type="date" class="input input-bordered input-sm w-full" />
+                <span v-if="v$.CreateEmployeeForm.employee_start_date.$error" class="text-red-500 text-xs mt-1">Required.</span>
+              </div>
+              <div class="form-control">
+                <label class="label"><span class="label-text">End Date (Optional)</span></label>
+                <input v-model="CreateEmployeeForm.employee_end_date" type="date" class="input input-bordered input-sm w-full" />
+              </div>
             </div>
+          </div>
 
-            <!-- employee_town -->
-            <div class="col-span-12 md:col-span-4 mb-20 md:mb-5 ">
-              <label class="block text-white text-sm font-bold mb-2">Town</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_town"
-               class="input input-bordered input-sm w-full max-w-xs"
-                id="city" type="text" placeholder="Town" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_town.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_town.$errors[0].$message }}
-              </span>
-            </div>
-
-            <!-- phone number -->
-            <div class="col-span-12 md:col-span-4 mb-5 md:mb-5">
-              <label class="block text-white text-sm font-bold mb-2">Phone Number</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_phone_number" @input="acceptNumber()"
-                class="input input-bordered input-sm w-full max-w-xs" id="phone number" type="text" placeholder="Phone Number" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_phone_number.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_phone_number.$errors[0].$message }}
-              </span>
-            </div>
-
-            <!-- state -->
-            <div class="flex-1 mb-4">
-              <label class="block text-white text-sm font-bold mb-2">State</label>
-              <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
-                id="employee_state" v-model="CreateEmployeeForm.basicInfo.employee_state">
-                <option class="text-white" v-for="(state, index) in stateList" :key="index" defaultValue="state_default"
-                  :value="state['value']">
-                  {{ state['text'] }}
-                </option>
-              </select>
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_state.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_state.$errors[0].$message }}
-              </span>
-            </div>
-
-            <!-- zip -->
-            <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
-              <label class="block text-white text-sm font-bold mb-2">Zip Code</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_zip" 
-              class="input input-bordered input-sm w-full max-w-xs"
-                id="zip" type="text" placeholder="Zip" />
-              <span v-if="v$.CreateEmployeeForm.basicInfo.employee_zip.$error" class="text-red-600 text-center">
-                {{ v$.CreateEmployeeForm.basicInfo.employee_zip.$errors[0].$message }}
-              </span>
-            </div>
-
-
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Employee BirthDay</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_birthday" 
-              class="input input-bordered input-sm w-full max-w-xs"
-                id="title" type="date" min="1945-01-01" max="2030-01-01" />
-            </div>
-
-            <div class="text-[18px] mt-10 mb-10">Employee Dates</div>
-
-
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Employee Start Date</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_start_date"
-                class="input input-bordered input-sm w-full max-w-xs" id="title" type="date" min="2023-01-01" max="2030-01-01" />
-
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Employee End Date</label>
-              <input v-model="CreateEmployeeForm.basicInfo.employee_end_date" 
-              class="input input-bordered input-sm w-full max-w-xs"
-                id="title" type="date" min="2023-01-01" max="2030-01-01" />
-
-            </div>
-
-            <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-              <button class="btn btn-sm btn-secondary">
-                Edit Employee
-              </button>
-            </div>
-          </form>
-        </div>
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
+          </div>
+        </form>
       </div>
     </div>
   </div>
   <Footer />
 </template>
-
 <script lang="ts">
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
-import {minLength, required} from "@vuelidate/validators";
+import { minLength, required } from "@vuelidate/validators";
+
+interface SelectOption {
+  text: string;
+  value: number;
+}
 
 export default defineComponent({
   name: 'EmployeeEdit',
-
   components: {
-    Header,
-    SideBar,
     Footer,
   },
-
   data() {
     return {
       v$: useValidate(),
       user: null,
-      stateList: [],
-      employList: [],
-      employee_id: '',
-      state_default: '',
+      stateList: [] as SelectOption[],
+      employList: [] as SelectOption[],
+      employee_id: this.$route.params.id as string,
       CreateEmployeeForm: {
-        basicInfo: {
-          employee_last_name: "",
-          employee_first_name: "",
-          employee_town: "",
-          employee_address: "",
-          employee_apt: "",
-          employee_zip: "",
-          employee_birthday: "",
-          employee_phone_number: "",
-          employee_start_date: "",
-          employee_end_date: "",
-          employee_type: "",
-          employee_state: "",
-
-        },
+        employee_last_name: "",
+        employee_first_name: "",
+        employee_town: "",
+        employee_address: "",
+        employee_apt: "",
+        employee_zip: "",
+        employee_birthday: "",
+        employee_phone_number: "",
+        employee_start_date: "",
+        employee_end_date: "",
+        employee_type: 0,
+        employee_state: 0,
       },
     }
   },
   validations() {
     return {
       CreateEmployeeForm: {
-        basicInfo: {
-          employee_last_name: {required, minLength: minLength(1)},
-          employee_first_name: {required, minLength: minLength(1)},
-          employee_town: {required, minLength: minLength(1)},
-          employee_type: {required},
-          employee_zip: {required, minLength: minLength(5)},
-          employee_state: {required},
-          employee_apt: {required},
-          employee_address: {required},
-          employee_birthday: {required},
-          employee_phone_number: {required},
-          employee_start_date: {required},
-        },
+        employee_last_name: { required, minLength: minLength(1) },
+        employee_first_name: { required, minLength: minLength(1) },
+        employee_town: { required, minLength: minLength(1) },
+        employee_type: { required },
+        employee_zip: { required, minLength: minLength(5) },
+        employee_state: { required },
+        employee_address: { required },
+        employee_birthday: { required },
+        employee_phone_number: { required },
+        employee_start_date: { required },
       },
     };
   },
   created() {
-    this.userStatus()
-       this.getEmployee(this.$route.params.id)
+    this.userStatus();
+    this.getEmployee(this.employee_id);
   },
   mounted() {
     this.getEmployeeTypeList();
     this.getStatesList();
-    this.getEmployee(this.$route.params.id)
-  },
-    watch: {
-    $route() {
-      this.getEmployee(this.$route.params.id);
-    },
   },
   methods: {
+    // --- FIX APPLIED HERE ---
     acceptNumber() {
-        let x = this.CreateEmployeeForm.basicInfo.employee_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
-        if (x){
-          this.CreateEmployeeForm.basicInfo.employee_phone_number = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
-        }
-        else {
-          this.CreateEmployeeForm.basicInfo.employee_phone_number = ''
-        }
+      const x = this.CreateEmployeeForm.employee_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
+      // This 'if' block ensures 'x' is not null before we use it.
+      if (x) {
+        this.CreateEmployeeForm.employee_phone_number = !x[2] ? x[1] : `(${x[1]}) ${x[2]}${x[3] ? `-${x[3]}` : ''}`;
+      }
     },
     userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data.ok) {
-              this.user = response.data.user;
-            }
-          })
-          .catch(() => {
-            this.user = null
-          })
-    },
-    EditEmployee(payload: {
-      employee_last_name: string;
-      employee_first_name: string;
-      employee_town: string;
-      employee_address: string;
-      employee_zip: string;
-      employee_apt: string,
-      employee_birthday: string;
-      employee_phone_number: string;
-      employee_start_date: string,
-      employee_end_date: string;
-      employee_type: string;
-      employee_state: string;
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/employee/edit/" + this.employee_id;
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data.ok) {
-              this.$router.push({name: "employeeProfile", params: { id: this.employee_id }});
-            }
-            if (response.data.error) {
-              this.$router.push("/");
-            }
-          })
-    },
-
-    getEmployee (userid:any) {
-      let path = import.meta.env.VITE_BASE_URL + "/employee/" + userid;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
-            this.employee_id = response.data.id
-            this.CreateEmployeeForm.basicInfo.employee_last_name= response.data.employee_last_name;
-            this.CreateEmployeeForm.basicInfo.employee_first_name= response.data.employee_first_name;
-            this.CreateEmployeeForm.basicInfo.employee_town= response.data.employee_town;
-            this.CreateEmployeeForm.basicInfo.employee_type= response.data.employee_type;
-            this.CreateEmployeeForm.basicInfo.employee_state= response.data.employee_state;
-            this.CreateEmployeeForm.basicInfo.employee_zip= response.data.employee_zip;
-            this.CreateEmployeeForm.basicInfo.employee_apt= response.data.employee_apt;
-            this.CreateEmployeeForm.basicInfo.employee_address= response.data.employee_address;
-            this.CreateEmployeeForm.basicInfo.employee_birthday= response.data.employee_birthday;
-            this.CreateEmployeeForm.basicInfo.employee_phone_number= response.data.employee_phone_number;
-            this.CreateEmployeeForm.basicInfo.employee_start_date= response.data.employee_start_date;
-            this.CreateEmployeeForm.basicInfo.employee_end_date= response.data.employee_end_date;
-
+          if (response.data.ok) {
+            this.user = response.data.user;
+          }
         })
+        .catch(() => { this.user = null; });
+    },
+    EditEmployee(payload: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/employee/edit/${this.employee_id}`;
+      axios.post(path, payload, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.$router.push({ name: "employeeProfile", params: { id: this.employee_id } });
+          } else {
+            console.error("Failed to edit employee:", response.data.error);
+          }
+        });
+    },
+    getEmployee(userid: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/employee/${userid}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          this.CreateEmployeeForm = response.data;
+        });
     },
     onSubmit() {
-      let payload = {
-        employee_last_name: this.CreateEmployeeForm.basicInfo.employee_last_name,
-        employee_first_name: this.CreateEmployeeForm.basicInfo.employee_first_name,
-        employee_town: this.CreateEmployeeForm.basicInfo.employee_town,
-        employee_address: this.CreateEmployeeForm.basicInfo.employee_address,
-        employee_zip: this.CreateEmployeeForm.basicInfo.employee_zip,
-        employee_apt: this.CreateEmployeeForm.basicInfo.employee_apt,
-        employee_birthday: this.CreateEmployeeForm.basicInfo.employee_birthday,
-        employee_phone_number: this.CreateEmployeeForm.basicInfo.employee_phone_number,
-        employee_start_date: this.CreateEmployeeForm.basicInfo.employee_start_date,
-        employee_end_date: this.CreateEmployeeForm.basicInfo.employee_end_date,
-        employee_type: this.CreateEmployeeForm.basicInfo.employee_type,
-        employee_state: this.CreateEmployeeForm.basicInfo.employee_state,
-      };
-      this.EditEmployee(payload);
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        this.EditEmployee(this.CreateEmployeeForm);
+      } else {
+        console.log("Form validation failed.");
+      }
     },
     getEmployeeTypeList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/employeetype";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.employList = response.data;
-          })
-          .catch(() => {
-          });
+      const path = import.meta.env.VITE_BASE_URL + "/query/employeetype";
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => { this.employList = response.data; });
     },
     getStatesList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/states";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.stateList = response.data;
-          })
-          .catch(() => {
-          });
+      const path = import.meta.env.VITE_BASE_URL + "/query/states";
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => { this.stateList = response.data; });
     },
   },
 })
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/pages/employee/home.vue b/src/pages/employee/home.vue
index 108a77c..75db399 100755
--- a/src/pages/employee/home.vue
+++ b/src/pages/employee/home.vue
@@ -1,109 +1,109 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs mb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'employee' }">
-              employees
-            </router-link>
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Employees</li>
         </ul>
       </div>
+      <h1 class="text-3xl font-bold mt-4">Employees</h1>
 
-      <div class="flex start pb-10 text-2xl">Employees </div>
-      <div class="flex justify-end mb-10">
-        <router-link :to="{ name: 'employeeCreate' }">
-          <button class="btn btn-secondary btn-sm">Create Employee</button>
-        </router-link>
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Count and Add Button -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <div class="badge badge-ghost">{{ recordsLength }} employees found</div>
+          <router-link :to="{ name: 'employeeCreate' }" class="btn btn-primary btn-sm">
+            Create New Employee
+          </router-link>
+        </div>
+
+        <div class="divider"></div>
+
+        <!-- DESKTOP VIEW: Table -->
+        <div class="overflow-x-auto hidden xl:block">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th>Employee ID</th>
+                <th>Name</th>
+                <th>Role</th>
+                <th>Town</th>
+                <th>Phone Number</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="person in employees" :key="person.id" class="hover:bg-blue-600 hover:text-white">
+                <td>{{ person.id }}</td>
+                <td>{{ person.employee_first_name }} {{ person.employee_last_name }}</td>
+                <td><span class="badge badge-ghost badge-sm">{{ getEmployeeTypeName(person.employee_type) }}</span></td>
+                <td>{{ person.employee_town }}</td>
+                <td>{{ person.employee_phone_number }}</td>
+                <td class="text-right">
+                  <div class="flex items-center justify-end gap-2">
+                    <router-link :to="{ name: 'employeeEdit', params: { id: person.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                    <router-link :to="{ name: 'employeeProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">View</router-link>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- MOBILE VIEW: Cards -->
+        <div class="xl:hidden space-y-4">
+          <div v-for="person in employees" :key="person.id" class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="card-title text-base">{{ person.employee_first_name }} {{ person.employee_last_name }}</h2>
+                  <p class="text-xs text-gray-400">ID: #{{ person.id }}</p>
+                </div>
+                <div class="badge badge-ghost">
+                  {{ getEmployeeTypeName(person.employee_type) }}
+                </div>
+              </div>
+              <div class="text-sm mt-2">
+                <p>{{ person.employee_town }}</p>
+                <p>{{ person.employee_phone_number }}</p>
+              </div>
+              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+                <router-link :to="{ name: 'employeeEdit', params: { id: person.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
+                <router-link :to="{ name: 'employeeProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">View</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-
-      <div class="overflow-x-auto bg-neutral">
-        <table class="table">
-          <!-- head -->
-          <thead>
-            <tr>
-              <th>Employee ID</th>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Town</th>
-              <th>Phone Number</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <!-- row 1 -->
-            <tr v-for="person in employees" :key="person['id']">
-              <td>{{ person['id'] }} </td>
-              <td>{{ person['employee_first_name'] }} {{ person['employee_last_name'] }}</td>
-              <td>
-                <div v-if="person['employee_type'] == 0">Owner</div>
-                <div v-else-if="person['employee_type'] == 1">Manager</div>
-                <div v-else-if="person['employee_type'] == 2">Secretary</div>
-                <div v-else-if="person['employee_type'] == 3">Office</div>
-                <div v-else-if="person['employee_type'] == 4">Driver</div>
-                <div v-else-if="person['employee_type'] == 5">Service Tech</div>
-                <div v-else-if="person['employee_type'] == 6">Contract</div>
-                <div v-else-if="person['employee_type'] == 7">Cash</div>
-                <div v-else-if="person['employee_type'] == 8">Driver/Tech</div>
-                <div v-else></div>
-              </td>
-
-              <td>{{ person['employee_town'] }}</td>
-
-              <td>{{ person['employee_phone_number'] }}</td>
-              <td class="flex gap-5">
-                <router-link :to="{ name: 'employeeEdit', params: { id: person['id'] } }">
-                  <button class="btn btn-secondary btn-sm">Edit</button>
-                </router-link>
-                <router-link :to="{ name: 'employeeProfile', params: { id: person['id'] } }">
-                  <button class="btn btn-secondary btn-sm">View</button>
-                </router-link>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
+      
+      <!-- Pagination -->
+      <div class="mt-6 flex justify-center">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
         </pagination>
-        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+      </div>
+
     </div>
   </div>
   <Footer />
-</template>
-
-<script lang="ts">
+</template><script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
 import PaginationComp from '../../components/pagination.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 
 export default defineComponent({
   name: 'EmployeeHome',
-
   components: {
-    Header,
-    SideBar,
     Footer,
   },
-
   data() {
     return {
-      token: null,
       user: null,
-      employees: [],
+      employees: [] as any[],
       page: 1,
       perPage: 50,
       recordsLength: 0,
@@ -114,49 +114,55 @@ export default defineComponent({
       }
     }
   },
-
   created() {
-    this.userStatus()
+    this.userStatus();
   },
   mounted() {
-    this.getPage(this.page)
-
+    this.getPage(this.page);
   },
   methods: {
-    getPage: function (page: any) {
-      // we simulate an api call that fetch the records from a backend
-      this.employees = [];
-      this.get_employees(page)
+    getPage: function (page: number) {
+      this.get_employees(page);
     },
     userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
           if (response.data.ok) {
             this.user = response.data.user;
           }
         })
         .catch(() => {
-          this.user = null
+          this.user = null;
+        });
+    },
+    // --- METHOD CORRECTED TO MATCH YOUR SIMPLE ARRAY API RESPONSE ---
+    get_employees(page: number) {
+      // Using your original, working URL
+      const path = `${import.meta.env.VITE_BASE_URL}/employee/all/${page}`;
+      
+      axios.get(path, { headers: authHeader() })
+        .then((response: any) => {
+          // --- FIX 1: Assign the response data directly, as it's an array ---
+          this.employees = response.data;
+
+          // --- FIX 2: Set the recordsLength from the array length ---
+          // NOTE: For full pagination, your API will eventually need to send the *total* count.
+          // For now, this will show the count of items on the current page.
+          // If you update your API to send { data: [], total_records: X }, this is the only line you'd change.
+          this.recordsLength = response.data.length; 
         })
+        .catch((error: any) => {
+            console.error("Failed to fetch employees:", error);
+        });
     },
-    get_employees(page: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/employee/all/' + page;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.employees = response.data
-      })
-    },
+    getEmployeeTypeName(typeId: number | string): string {
+      const typeMap: { [key: string]: string } = {
+        '0': 'Owner', '1': 'Manager', '2': 'Secretary', '3': 'Office',
+        '4': 'Driver', '5': 'Service Tech', '6': 'Contractor', '7': 'Cash Driver', '8': 'Driver/Tech'
+      };
+      return typeMap[String(typeId)] || 'Unknown Role';
+    }
   },
 })
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/pages/employee/profile/home.vue b/src/pages/employee/profile/home.vue
index e2e1595..9ae8e78 100755
--- a/src/pages/employee/profile/home.vue
+++ b/src/pages/employee/profile/home.vue
@@ -1,108 +1,84 @@
 <template>
-  <Header />
-
-  <div class="wrapper">
-    <div class="flex">
-      <div class="">
-        <SideBar />
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Employees</li>
+          <li>Profile</li>
+        </ul>
       </div>
-      <div class=" w-full px-10 ">
-        <div class="text-sm breadcrumbs">
-          <ul>
-            <li>
-              <router-link :to="{ name: 'home' }">
-                Home
-              </router-link>
-            </li>
-            <li>
-              <router-link :to="{ name: 'customer' }">
-                Customers
-              </router-link>
-            </li>
-          </ul>
 
-          <div class=" w-full mt-10" v-if="loaded">
-            <div class="grid grid-cols-12 gap-5 ">
-              <div class="col-span-3 ">
-                <img src="../../../assets/images/user_placeholder.png" alt="Drone Image" width="200" height="250" />
+      <!-- Loading State -->
+      <div v-if="!loaded" class="text-center p-10">
+        <span class="loading loading-spinner loading-lg"></span>
+      </div>
+
+      <!-- Main Content -->
+      <div v-else>
+        <!-- Employee Header Card -->
+        <div class="bg-neutral rounded-lg p-6 mt-6">
+          <div class="flex flex-col md:flex-row gap-6">
+            
+            <!-- Left Side: Avatar and Name -->
+            <div class="flex-none flex flex-col items-center md:items-start text-center md:text-left">
+              <div class="avatar">
+                <div class="w-32 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
+                  <img src="../../../assets/images/user_placeholder.png" alt="Employee Avatar" />
+                </div>
               </div>
-              <div class="col-span-9">
-                <div class="grid grid-cols-12">
-                  <div class="col-span-12 font-bold flex justify-end">
-                    <div class="btn btn-sm btn-secondary">
-                      <router-link :to="{ name: 'employeeEdit', params: { id: employee.id } }">
-                        Edit Employee
-                      </router-link>
-                    </div>
-                  </div>
-                  <div class="col-span-12 font-bold flex">
-                    {{ employee.employee_first_name }}
-                    {{ employee.employee_last_name }}
-                  </div>
-                  <div class="col-span-12 font-bold flex">
-                    {{ employee.employee_address }}
-                    <div v-if="employee.employee_apt != 'None'">
-                      {{ employee.employee_apt }}
-                    </div>
-                  </div>
-                  <div class="col-span-12 font-bold flex">
-                    <div class="pr-2">
-                      {{ employee.employee_town }},
-                    </div>
+              <h1 class="text-2xl font-bold mt-4">{{ employee.employee_first_name }} {{ employee.employee_last_name }}</h1>
+              <span class="badge badge-ghost mt-1">{{ employeeTypeName }}</span>
+              <router-link :to="{ name: 'employeeEdit', params: { id: employee.id } }" class="btn btn-sm btn-secondary mt-4">
+                Edit Employee
+              </router-link>
+            </div>
 
-                    <div class="pr-2">
-                      <div v-if="employee.employee_state == '0'">Massachusetts</div>
-                      <div v-else-if="employee.employee_state == '1'">Rhode Island</div>
-                      <div v-else-if="employee.employee_state == '2'">New Hampshire</div>
-                      <div v-else-if="employee.employee_state == '3'">Maine</div>
-                      <div v-else-if="employee.employee_state == '4'">Vermont</div>
-                      <div v-else-if="employee.employee_state == '5'">Maine</div>
-                      <div v-else-if="employee.employee_state == '6'">New York</div>
-                      <div v-else>Unknown state</div>
-                    </div>
-                    <div class="pr-2">
-                      {{ employee.employee_zip }}
-                    </div>
-                  </div>
-                  <div class="col-span-12 font-bold flex" v-if="employee.employee_apt !== 'None'">
-                    {{ employee.employee_apt }}
-                  </div>
-                  <div class="col-span-12 font-bold flex">
-                    {{ employee.employee_phone_number }}
-                  </div>
-                  <div class="col-span-12 font-bold flex">
-                    <div v-if="employee.employee_type == '0'">owner</div>
-                    <div v-else-if="employee.employee_type == '1'">manager</div>
-                    <div v-else-if="employee.employee_type == '2'">secretary</div>
-                    <div v-else-if="employee.employee_type == '3'">office</div>
-                    <div v-else-if="employee.employee_type == '4'">driver</div>
-                    <div v-else-if="employee.employee_type == '5'">tech</div>
-                    <div v-else-if="employee.employee_type == '6'">contract</div>
-                    <div v-else-if="employee.employee_type == '7'">cash</div>
-                    <div v-else-if="employee.employee_type == '8'">driver/tech</div>
-                    <div v-else>Unknown employee type</div>
-                  </div>
+            <!-- Right Side: Details Grid -->
+            <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-6 pt-4 border-t md:border-t-0 md:border-l border-base-100 md:pl-6">
+              <div>
+                <h3 class="font-bold text-sm uppercase text-gray-400">Contact Information</h3>
+                <div class="mt-2 space-y-1 text-sm">
+                  <p>{{ employee.employee_phone_number }}</p>
+                  <p class="link link-hover">{{ employee.employee_email }}</p>
+                </div>
+              </div>
+              <div>
+                <h3 class="font-bold text-sm uppercase text-gray-400">Address</h3>
+                <div class="mt-2 space-y-1 text-sm">
+                  <p>{{ employee.employee_address }}</p>
+                  <p v-if="employee.employee_apt && employee.employee_apt !== 'None'">{{ employee.employee_apt }}</p>
+                  <p>{{ employee.employee_town }}, {{ employeeStateName }} {{ employee.employee_zip }}</p>
+                </div>
+              </div>
+              <div>
+                <h3 class="font-bold text-sm uppercase text-gray-400">Employment Dates</h3>
+                <div class="mt-2 space-y-1 text-sm">
+                  <p><strong>Start Date:</strong> {{ employee.employee_start_date || 'N/A' }}</p>
+                  <p><strong>End Date:</strong> {{ employee.employee_end_date || 'N/A' }}</p>
                 </div>
               </div>
             </div>
+          </div>
+        </div>
 
-            <div class="col-span-12 p-5 mt-5">
-              <div class="grid grid-cols-12">
-                <div class="col-span-12 font-bold flex text-2xl">
-                  Delivery
-                </div>
-                <div class="col-span-6">
-                  <div class="col-span-12 py-2">
-                    Total Deliverys Done: {{ total_deliviers_done }}
-                  </div>
-                  <div class="col-span-12 py-2">
-                    Total Gallons Delivered: {{ total_gallons_delivered }}
-                  </div>
-                  <div class="col-span-12 py-2">
-                    Total Prime: {{ total_primes }}
-                  </div>
-                </div>
-              </div>
+        <!-- Statistics Card -->
+        <div class="bg-neutral rounded-lg p-6 mt-6">
+          <h2 class="text-xl font-bold mb-4">Delivery Statistics</h2>
+          <div class="stats stats-vertical lg:stats-horizontal shadow bg-base-100 w-full">
+            <div class="stat">
+              <div class="stat-title">Total Deliveries</div>
+              <div class="stat-value">{{ total_deliviers_done }}</div>
+            </div>
+            <div class="stat">
+              <div class="stat-title">Total Gallons</div>
+              <div class="stat-value">{{ total_gallons_delivered }}</div>
+              <div class="stat-desc">Delivered</div>
+            </div>
+            <div class="stat">
+              <div class="stat-title">Total Primes</div>
+              <div class="stat-value text-error">{{ total_primes }}</div>
             </div>
           </div>
         </div>
@@ -116,24 +92,15 @@
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../../services/auth.header'
-import Header from '../../../layouts/headers/headerauth.vue'
-import SideBar from '../../../layouts/sidebar/sidebar.vue'
 import Footer from '../../../layouts/footers/footer.vue'
 
-
 export default defineComponent({
   name: 'employeeProfile',
-
   components: {
-    Header,
-    SideBar,
     Footer,
   },
-
   data() {
     return {
-      token: null,
-      user_placeholder: '',
       user: null,
       loaded: false,
       employee: {
@@ -144,128 +111,101 @@ export default defineComponent({
         employee_address: "",
         employee_apt: "",
         employee_zip: "",
-        employee_birthday: "",
         employee_phone_number: "",
         employee_start_date: "",
         employee_end_date: "",
         employee_type: '',
         employee_state: '',
+        employee_email: '', // Added for completeness
       },
       total_deliviers_done: 0,
       total_gallons_delivered: 0,
       total_primes: 0,
     }
   },
+  computed: {
+    employeeTypeName(): string {
+      const typeMap: Record<string, string> = {
+        '0': 'Owner', '1': 'Manager', '2': 'Secretary', '3': 'Office',
+        '4': 'Driver', '5': 'Tech', '6': 'Contractor', '7': 'Cash Driver', '8': 'Driver/Tech'
+      };
+      return typeMap[this.employee.employee_type] || 'Unknown Role';
+    },
+    employeeStateName(): string {
+      const stateMap: Record<string, string> = {
+        '0': 'MA', '1': 'RI', '2': 'NH', '3': 'ME', '4': 'VT', '5': 'CT', '6': 'NY'
+      };
+      return stateMap[this.employee.employee_state] || 'Unknown State';
+    }
+  },
   created() {
-    this.userStatus()
+    this.userStatus();
+    this.getEmployee(this.$route.params.id);
   },
-  mounted() {
-    this.getEmployee(this.$route.params.id)
-  },
-
   watch: {
-    $route() {
-      this.getEmployee(this.$route.params.id);
+    // Watch the route to refetch data if the employee ID changes
+    '$route.params.id'(newId) {
+      if (newId) {
+        this.getEmployee(newId);
+      }
     },
   },
   methods: {
-    getPage: function (page: any) {
-      // we simulate an api call that fetch the records from a backend
-      this.getEmployee(page)
-    },
     userStatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
           if (response.data.ok) {
             this.user = response.data.user;
-        
           }
         })
         .catch(() => {
-          this.user = null
-        })
+          this.user = null;
+        });
     },
-
     getEmployee(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/employee/" + userid;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+      this.loaded = false; // Set loading state
+      const path = `${import.meta.env.VITE_BASE_URL}/employee/${userid}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
           if (response.data) {
-
             this.employee = response.data;
-            if (this.employee.id){        
-              this.getEmployeeStatsDeliveriesDone(this.employee.id)
-              this.getEmployeeStatsGallonsDone(this.employee.id)
-              this.getEmployeeStatsPrimesDone(this.employee.id)
+            // Fetch stats only after we confirm we have a valid employee
+            if (this.employee.id) {
+              this.getEmployeeStatsDeliveriesDone(this.employee.id);
+              this.getEmployeeStatsGallonsDone(this.employee.id);
+              this.getEmployeeStatsPrimesDone(this.employee.id);
             }
-
-            this.loaded = true
-            
-
-
           }
         })
+        .catch((error: any) => {
+          console.error("Failed to fetch employee data:", error);
+        })
+        .finally(() => {
+          this.loaded = true; // End loading state
+        });
     },
-    getEmployeeStatsDeliveriesDone(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/stats/delivery/total/" + userid;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+    getEmployeeStatsDeliveriesDone(userid: string) {
+      const path = `${import.meta.env.VITE_BASE_URL}/stats/delivery/total/${userid}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
-          if (response.data) {
-
-            this.total_deliviers_done = response.data.data;
-
-          }
-        })
+          this.total_deliviers_done = response.data.data || 0;
+        });
     },
-    getEmployeeStatsGallonsDone(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/stats/gallons/total/" + userid;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+    getEmployeeStatsGallonsDone(userid: string) {
+      const path = `${import.meta.env.VITE_BASE_URL}/stats/gallons/total/${userid}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
-          if (response.data) {
-            this.total_gallons_delivered = response.data.data;
-
-          }
-        })
+          this.total_gallons_delivered = response.data.data || 0;
+        });
     },
-    getEmployeeStatsPrimesDone(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/stats/primes/total/" + userid;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
+    getEmployeeStatsPrimesDone(userid: string) {
+      const path = `${import.meta.env.VITE_BASE_URL}/stats/primes/total/${userid}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
-          if (response.data) {
-
-            this.total_primes = response.data.data;
-
-          }
-        })
+          this.total_primes = response.data.data || 0;
+        });
     },
   },
-})
-</script>
-
-<style scoped></style>
\ No newline at end of file
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/money/profit_year.vue b/src/pages/money/profit_year.vue
index 5f7c188..a71b3e0 100644
--- a/src/pages/money/profit_year.vue
+++ b/src/pages/money/profit_year.vue
@@ -1,9 +1,6 @@
 <template>
-    <Header />
     <div class="flex">
-      <div class="">
-        <SideBar />
-      </div>
+    
       <div class=" w-full px-10 ">
         <div class="text-sm breadcrumbs mb-10">
           <ul>
diff --git a/src/pages/pay/pay_oil.vue b/src/pages/pay/pay_oil.vue
index 0fce359..f829346 100755
--- a/src/pages/pay/pay_oil.vue
+++ b/src/pages/pay/pay_oil.vue
@@ -1,9 +1,6 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
+ 
     <div class=" w-full px-10">
       <div class="text-sm breadcrumbs">
         <ul>
diff --git a/src/pages/service/ServiceCalendar.vue b/src/pages/service/ServiceCalendar.vue
index 05969a4..cd3fb68 100644
--- a/src/pages/service/ServiceCalendar.vue
+++ b/src/pages/service/ServiceCalendar.vue
@@ -1,9 +1,6 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
+ 
     <div class="w-full px-10">
       <div class="text-sm breadcrumbs mb-4">
         <ul>
@@ -78,7 +75,7 @@ export default defineComponent({
         events: `${import.meta.env.VITE_BASE_URL}/service/all`,
         eventClick: this.handleEventClick,
         // Add headers for authentication if needed by your API
-        eventSourceSuccess: (content, response) => {
+        eventSourceSuccess: (content) => {
             // This is where you could transform data if needed
             return content;
         },
diff --git a/src/pages/service/ServiceHome.vue b/src/pages/service/ServiceHome.vue
index 418a067..41b5800 100644
--- a/src/pages/service/ServiceHome.vue
+++ b/src/pages/service/ServiceHome.vue
@@ -1,66 +1,125 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10  ">
-      <div class="text-sm breadcrumbs mb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            Service Calls
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Service Calls</li>
         </ul>
       </div>
+      <h1 class="text-3xl font-bold mt-4">Service Calls</h1>
 
-      <div class="flex text-2xl mb-5 font-bold">
-         Service Calls
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Upcoming and Active Service Calls</h2>
+          <div v-if="!isLoading" class="badge badge-ghost">{{ services.length }} calls found</div>
+        </div>
+        <div class="divider"></div>
+
+        <!-- Loading State -->
+        <div v-if="isLoading" class="text-center p-10">
+          <span class="loading loading-spinner loading-lg"></span>
+          <p class="mt-2">Loading service calls...</p>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else-if="services.length === 0" class="text-center p-10">
+          <p>No active service calls found.</p>
+        </div>
+
+        <!-- Data Display -->
+        <div v-else>
+          <!-- DESKTOP VIEW: Table -->
+          <div class="overflow-x-auto hidden xl:block">
+            <table class="table w-full">
+              <thead>
+                <tr>
+                  <th>Date / Time</th>
+                  <th>Customer</th>
+                  <th>Address</th>
+                  <th>Service Type</th>
+                  <th>Description</th>
+                  <th class="text-right">Cost</th>
+                  <th class="text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- Removed @click from tr to avoid conflicting actions -->
+                <tr v-for="service in services" :key="service.id" class="hover">
+                  <td class="align-top">
+                    <div>{{ formatDate(service.scheduled_date) }}</div>
+                    <div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
+                  </td>
+                  <td class="align-top">{{ service.customer_name }}</td>
+                  <td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td>
+                  <td class="align-top">
+                    <span class="font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
+                      {{ getServiceTypeName(service.type_service_call) }}
+                    </span>
+                  </td>
+                  <td class="whitespace-normal text-sm align-top">
+                    <!-- TRUNCATION LOGIC FOR DESKTOP -->
+                    <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
+                      {{ service.description }}
+                      <a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
+                    </div>
+                    <div v-else>
+                      {{ truncateDescription(service.description) }}
+                      <a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
+                    </div>
+                  </td>
+                  <td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td>
+                  <td class="text-right align-top">
+                    <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- MOBILE VIEW: Cards -->
+          <div class="xl:hidden space-y-4">
+            <div v-for="service in services" :key="service.id" class="card bg-base-100 shadow-md">
+              <div class="card-body p-4">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h2 class="card-title text-base">{{ service.customer_name }}</h2>
+                    <p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p>
+                  </div>
+                  <div class="badge badge-outline text-right" :style="{ 'border-color': getServiceTypeColor(service.type_service_call), color: getServiceTypeColor(service.type_service_call) }">
+                    {{ getServiceTypeName(service.type_service_call) }}
+                  </div>
+                </div>
+
+                <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                  <p><strong class="font-semibold">Date:</strong> {{ formatDate(service.scheduled_date) }}</p>
+                  <p><strong class="font-semibold">Time:</strong> {{ formatTime(service.scheduled_date) }}</p>
+                  <p><strong class="font-semibold">Cost:</strong> <span class="font-mono">{{ formatCurrency(service.service_cost) }}</span></p>
+                </div>
+                
+                <!-- TRUNCATION LOGIC FOR MOBILE -->
+                <div v-if="service.description" class="text-sm mt-2 p-2 bg-base-200 rounded-md prose max-w-none">
+                  <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
+                    {{ service.description }}
+                    <a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
+                  </div>
+                  <div v-else>
+                    {{ truncateDescription(service.description) }}
+                    <a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
+                  </div>
+                </div>
+                
+                <div class="card-actions justify-end mt-2">
+                  <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-     
-      <div v-if="isLoading" class="text-center p-10">
-        <p>Loading service calls...</p>
-      </div>
-
-      <div v-else-if="services.length === 0" class="text-center p-10 bg-base-200 rounded-md">
-        <p>No service calls found.</p>
-      </div>
-
-      <div v-else class="overflow-x-auto rounded-lg">
-        <table class="min-w-full divide-y divide-gray-700">
-          <thead class="bg-base-200">
-            <tr>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Scheduled Date</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Customer Name</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
-            </tr>
-          </thead>
-          <tbody class="bg-base-100 divide-y divide-gray-700">
-            <tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-base-300 cursor-pointer">
-              <td class="px-6 py-4 whitespace-nowrap">{{ formatDate(service.scheduled_date) }}</td>
-              <td class="px-6 py-4 whitespace-nowrap">{{ formatTime(service.scheduled_date) }}</td>
-              
-              <td class="px-6 py-4 whitespace-nowrap hover:text-blue-600">{{ service.customer_name }}</td>
-             
-
-              <td class="px-6 py-4 whitespace-nowrap">{{ service.customer_address }}, {{ service.customer_town }}</td>
-              <td class="px-6 py-4 whitespace-nowrap font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
-                {{ getServiceTypeName(service.type_service_call) }}
-              </td>
-              <td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
-              <td class="px-6 py-4 whitespace-normal text-sm">{{ service.service_cost }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
     </div>
   </div>
 
@@ -74,16 +133,13 @@
     @delete-service="handleDeleteService"
   />
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import ServiceEditModal from './ServiceEditModal.vue'
-import dayjs from 'dayjs'; // Import dayjs to handle date/time formatting
+import dayjs from 'dayjs';
 
 interface ServiceCall {
   id: number;
@@ -99,13 +155,16 @@ interface ServiceCall {
 
 export default defineComponent({
   name: 'ServiceHome',
-  components: { Header, SideBar, Footer, ServiceEditModal },
+  components: { Footer, ServiceEditModal },
   data() {
     return {
       user: null,
       services: [] as ServiceCall[],
       isLoading: true,
       selectedServiceForEdit: null as ServiceCall | null,
+      // --- ADDITIONS FOR TRUNCATION ---
+      wordLimit: 50,
+      expandedIds: [] as number[],
     }
   },
   created() {
@@ -154,7 +213,26 @@ export default defineComponent({
     closeEditModal() {
       this.selectedServiceForEdit = null;
     },
-
+    isLongDescription(text: string): boolean {
+      if (!text) return false;
+      return text.split(/\s+/).length > this.wordLimit;
+    },
+    truncateDescription(text: string): string {
+      if (!this.isLongDescription(text)) return text;
+      const words = text.split(/\s+/);
+      return words.slice(0, this.wordLimit).join(' ') + '...';
+    },
+    isExpanded(id: number): boolean {
+      return this.expandedIds.includes(id);
+    },
+    toggleExpand(id: number): void {
+      const index = this.expandedIds.indexOf(id);
+      if (index === -1) {
+        this.expandedIds.push(id);
+      } else {
+        this.expandedIds.splice(index, 1);
+      }
+    },
     async handleSaveChanges(updatedService: ServiceCall) {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
@@ -206,7 +284,17 @@ export default defineComponent({
       };
       return typeMap[typeId] || 'Unknown Service';
     },
-
+ // --- ADD THIS METHOD ---
+    formatCurrency(value: string | number): string {
+      if (value === null || value === undefined || value === '') return '$0.00';
+      const numberValue = Number(value);
+      if (isNaN(numberValue)) return '$0.00';
+      
+      return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(numberValue);
+    },
     getServiceTypeColor(typeId: number): string {
        const colorMap: { [key: number]: string } = {
         0: 'blue',
diff --git a/src/pages/service/ServicePast.vue b/src/pages/service/ServicePast.vue
index a58e315..003caf6 100644
--- a/src/pages/service/ServicePast.vue
+++ b/src/pages/service/ServicePast.vue
@@ -1,75 +1,126 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class="w-full px-10">
-      <div class="text-sm breadcrumbs mb-10">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            PastService Calls
-          </li>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Past Service Calls</li>
         </ul>
       </div>
 
-      <div class="flex text-2xl mb-5 font-bold">
-         Past Service Calls
-      </div>
-     
-      <div v-if="isLoading" class="text-center p-10">
-        <p>Loading service calls...</p>
-      </div>
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Service Call History</h2>
+          <div v-if="!isLoading" class="badge badge-ghost">{{ services.length }} calls found</div>
+        </div>
+        <div class="divider"></div>
 
-      <div v-else-if="services.length === 0" class="text-center p-10 bg-base-200 rounded-md">
-        <p>No service calls found.</p>
-      </div>
+        <!-- Loading State -->
+        <div v-if="isLoading" class="text-center p-10">
+          <span class="loading loading-spinner loading-lg"></span>
+          <p class="mt-2">Loading service calls...</p>
+        </div>
 
-      <div v-else class="overflow-x-auto rounded-lg">
-        <table class="min-w-full divide-y divide-gray-700 table-fixed">
-          
-          <!-- =================== THIS IS THE CORRECTED SECTION =================== -->
-          <thead class="bg-base-200">
-            <tr>
-              <!-- Columns with predictable, shorter content get fixed widths -->
-              <th scope="col" class="w-48 px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Scheduled Date</th>
-              <th scope="col" class="w-32 px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
-              
-              <!-- Columns with variable text content can share the remaining space -->
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Customer Name</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
-              
-              <!-- Another fixed-width column -->
-              <th scope="col" class="w-32 px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
+        <!-- Empty State -->
+        <div v-else-if="services.length === 0" class="text-center p-10">
+          <p>No past service calls found.</p>
+        </div>
 
-              <!-- Description can be left to fill remaining space -->
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
-              
-              <!-- Service Cost now has a smaller, fixed width -->
-              <th scope="col" class="w-20 px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Cost</th>
-            </tr>
-          </thead>
-          <!-- =================== END OF CORRECTED SECTION =================== -->
+        <!-- Data Display -->
+        <div v-else>
+          <!-- DESKTOP VIEW: Table (Revamped) -->
+          <div class="overflow-x-auto hidden xl:block">
+            <table class="table w-full">
+              <thead>
+                <tr>
+                  <th>Date / Time</th>
+                  <th>Customer</th>
+                  <th>Address</th>
+                  <th>Service Type</th>
+                  <th>Description</th>
+                  <th class="text-right">Cost</th>
+                  <th class="text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- Removed @click from tr to avoid conflicting with "Read more" -->
+                <tr v-for="service in services" :key="service.id" class="hover">
+                  <td class="align-top">
+                    <div>{{ formatDate(service.scheduled_date) }}</div>
+                    <div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
+                  </td>
+                  <td class="align-top">{{ service.customer_name }}</td>
+                  <td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td>
+                  <td class="align-top">
+                    <span class="font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
+                      {{ getServiceTypeName(service.type_service_call) }}
+                    </span>
+                  </td>
+                  <td class="whitespace-normal text-sm align-top">
+                    <!-- TRUNCATION LOGIC FOR DESKTOP -->
+                    <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
+                      {{ service.description }}
+                      <a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
+                    </div>
+                    <div v-else>
+                      {{ truncateDescription(service.description) }}
+                      <a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
+                    </div>
+                  </td>
+                  <td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td>
+                  <td class="text-right align-top">
+                    <!-- Moved @click handler to the button for explicit action -->
+                    <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
 
-          <tbody class="bg-base-100 divide-y divide-gray-700">
-            <tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-base-300 cursor-pointer">
-              <td class="px-6 py-4 whitespace-nowrap">{{ formatDate(service.scheduled_date) }}</td>
-              <td class="px-6 py-4 whitespace-nowrap">{{ formatTime(service.scheduled_date) }}</td>
-              <td class="px-6 py-4 whitespace-nowrap hover:text-blue-600 truncate">{{ service.customer_name }}</td>
-              <td class="px-6 py-4 whitespace-nowrap truncate">{{ service.customer_address }}, {{ service.customer_town }}</td>
-              <td class="px-6 py-4 whitespace-nowrap font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
-                {{ getServiceTypeName(service.type_service_call) }}
-              </td>
-              <td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-right">{{ formatCurrency(service.service_cost) }}</td>
-            </tr>
-          </tbody>
-        </table>
+          <!-- MOBILE VIEW: Cards (Revamped) -->
+          <div class="xl:hidden space-y-4">
+            <!-- Removed @click from card div -->
+            <div v-for="service in services" :key="service.id" class="card bg-base-100 shadow-md">
+              <div class="card-body p-4">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h2 class="card-title text-base">{{ service.customer_name }}</h2>
+                    <p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p>
+                  </div>
+                  <div class="badge badge-outline text-right" :style="{ 'border-color': getServiceTypeColor(service.type_service_call), color: getServiceTypeColor(service.type_service_call) }">
+                    {{ getServiceTypeName(service.type_service_call) }}
+                  </div>
+                </div>
+
+                <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                  <p><strong class="font-semibold">Date:</strong> {{ formatDate(service.scheduled_date) }}</p>
+                  <p><strong class="font-semibold">Time:</strong> {{ formatTime(service.scheduled_date) }}</p>
+                  <p><strong class="font-semibold">Cost:</strong> <span class="font-mono">{{ formatCurrency(service.service_cost) }}</span></p>
+                </div>
+                
+                <!-- TRUNCATION LOGIC FOR MOBILE -->
+                <div v-if="service.description" class="text-sm mt-2 p-2 bg-base-200 rounded-md prose max-w-none">
+                  <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
+                    {{ service.description }}
+                    <a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
+                  </div>
+                  <div v-else>
+                    {{ truncateDescription(service.description) }}
+                    <a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
+                  </div>
+                </div>
+                
+                <div class="card-actions justify-end mt-2">
+                  <!-- Moved @click handler to the button -->
+                  <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -84,13 +135,10 @@
     @delete-service="handleDeleteService"
   />
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import ServiceEditModal from './ServiceEditModal.vue'
 import dayjs from 'dayjs';
@@ -109,22 +157,47 @@ interface ServiceCall {
 
 export default defineComponent({
   name: 'ServiceHPast',
-  components: { Header, SideBar, Footer, ServiceEditModal },
+  components: { Footer, ServiceEditModal },
   data() {
     return {
       user: null,
       services: [] as ServiceCall[],
       isLoading: true,
       selectedServiceForEdit: null as ServiceCall | null,
+      // --- ADDITIONS FOR TRUNCATION ---
+      wordLimit: 50,
+      expandedIds: [] as number[],
     }
   },
   created() {
     this.userStatus();
-    this.fetchUpcomingServices();
+    this.fetchPastServices();
   },
   methods: {
+    // --- NEW METHODS FOR TRUNCATION ---
+    isLongDescription(text: string): boolean {
+      if (!text) return false;
+      return text.split(/\s+/).length > this.wordLimit;
+    },
+    truncateDescription(text: string): string {
+      if (!this.isLongDescription(text)) return text;
+      const words = text.split(/\s+/);
+      return words.slice(0, this.wordLimit).join(' ') + '...';
+    },
+    isExpanded(id: number): boolean {
+      return this.expandedIds.includes(id);
+    },
+    toggleExpand(id: number): void {
+      const index = this.expandedIds.indexOf(id);
+      if (index === -1) {
+        this.expandedIds.push(id);
+      } else {
+        this.expandedIds.splice(index, 1);
+      }
+    },
+
     // --- API and Data Handling Methods ---
-    async fetchUpcomingServices(): Promise<void> {
+    async fetchPastServices(): Promise<void> {
       this.isLoading = true;
       try {
         const path = import.meta.env.VITE_BASE_URL + '/service/past';
@@ -134,7 +207,7 @@ export default defineComponent({
         });
         this.services = response.data;
       } catch (error) {
-        console.error("Failed to fetch upcoming service calls:", error);
+        console.error("Failed to fetch past service calls:", error);
       } finally {
         this.isLoading = false;
       }
@@ -198,16 +271,15 @@ export default defineComponent({
     },
     
     // --- Formatting and Display Methods ---
-    formatCurrency(value: string): string {
-      if (!value) return '$0.00';
-      const costAsNumber = parseFloat(value);
-      if (isNaN(costAsNumber)) {
-        return value; 
-      }
+    formatCurrency(value: string | number): string {
+      if (value === null || value === undefined || value === '') return '$0.00';
+      const numberValue = Number(value);
+      if (isNaN(numberValue)) return '$0.00';
+      
       return new Intl.NumberFormat('en-US', {
         style: 'currency',
         currency: 'USD',
-      }).format(costAsNumber);
+      }).format(numberValue);
     },
 
     formatDate(dateString: string): string {
diff --git a/src/pages/service/calender/CalendarCustomer.vue b/src/pages/service/calender/CalendarCustomer.vue
index c6fae53..3b1ea08 100644
--- a/src/pages/service/calender/CalendarCustomer.vue
+++ b/src/pages/service/calender/CalendarCustomer.vue
@@ -1,39 +1,57 @@
 <template>
-  <Header />
   <div class="flex">
-    <div class="w-full px-10">
-      <div class="text-sm breadcrumbs mb-4">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
         <ul>
           <li><router-link :to="{ name: 'home' }">Home</router-link></li>
           <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
           <li v-if="customer">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</li>
+          <li>Service Calendar</li>
         </ul>
       </div>
 
-      <div class="flex h-screen font-sans">
-        <div v-if="isLoading" class="w-1/4 p-4 border-r">
-          <h2 class="text-xl font-bold">Loading Customer...</h2>
-        </div>
-        <EventSidebar v-else-if="customer" :customer="customer" @event-scheduled="handleEventScheduled" />
-        <div v-else class="w-1/4 p-4 border-r">
-          <h2 class="text-xl font-bold text-red-500">Error</h2>
-          <p>Could not load customer data. You can still view the master calendar.</p>
+      <!-- 
+        Main Responsive Container:
+        - Stacks vertically on mobile (flex-col)
+        - Sits side-by-side on large screens (lg:flex-row)
+      -->
+      <div class="flex flex-col lg:flex-row gap-6 mt-6">
+        
+        <!-- Sidebar Area (Uses our new responsive EventSidebar) -->
+        <EventSidebar v-if="!isLoading && customer" :customer="customer" @event-scheduled="handleEventScheduled" />
+        
+        <!-- Loading/Error States (Styled to match the sidebar) -->
+        <div v-else class="w-full lg:w-96 lg:flex-none p-4">
+          <div class="bg-neutral rounded-lg p-6 sticky top-4 text-center">
+            <div v-if="isLoading">
+              <span class="loading loading-spinner"></span>
+              <p class="mt-2">Loading Customer...</p>
+            </div>
+            <div v-else>
+              <h2 class="text-xl font-bold text-error">Error</h2>
+              <p>Could not load customer data. You can still view the master calendar.</p>
+            </div>
+          </div>
         </div>
 
-        <div class="flex-1 p-4 overflow-auto">
+        <!-- Main Calendar Area -->
+        <div class="flex-grow bg-neutral rounded-lg p-4">
           <FullCalendar ref="fullCalendar" :options="calendarOptions" />
         </div>
-        
-        <ServiceEditModal
-          v-if="selectedServiceForEdit"
-          :service="selectedServiceForEdit"
-          @close-modal="closeEditModal"
-          @save-changes="handleSaveChanges"
-          @delete-service="handleDeleteService"
-        />
+
       </div>
     </div>
   </div>
+
+  <!-- Modal remains at the root level, which is correct -->
+  <ServiceEditModal
+    v-if="selectedServiceForEdit"
+    :service="selectedServiceForEdit"
+    @close-modal="closeEditModal"
+    @save-changes="handleSaveChanges"
+    @delete-service="handleDeleteService"
+  />
 </template>
 
 <script lang="ts">
diff --git a/src/pages/service/calender/EventSidebar.vue b/src/pages/service/calender/EventSidebar.vue
index 352d709..681c1d7 100644
--- a/src/pages/service/calender/EventSidebar.vue
+++ b/src/pages/service/calender/EventSidebar.vue
@@ -1,65 +1,77 @@
 <template>
-  <div class="w-1/4 p-4 border-r">
-    <h2 class="text-xl font-bold mb-4">Schedule Service</h2>
-    
-    <form @submit.prevent="submitEvent">
-      <div class="mb-4">
-        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
-        <label for="event-label" class="block text-sm font-medium text-gray-200">Calendar Label</label>
-        <input type="text" id="event-label" v-model="event.title" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
-      </div>
+  <!-- 
+    This container is now responsive. It's full-width on mobile 
+    and becomes a fixed-width sidebar on large screens.
+  -->
+  <div class="w-full lg:w-96 lg:flex-none p-4">
+    <!-- The sidebar is now sticky to the top on large screens -->
+    <div class="bg-neutral rounded-lg p-6 sticky top-4">
+      <h2 class="text-xl font-bold mb-4">Schedule Service</h2>
+      
+      <form @submit.prevent="submitEvent" class="space-y-4">
+        <!-- Calendar Label -->
+        <div class="form-control">
+          <label class="label"><span class="label-text">Calendar Label</span></label>
+          <input type="text" v-model="event.title" required class="input input-bordered input-sm w-full" placeholder="e.g., Boiler Tune-up">
+        </div>
 
-      <div class="mb-4">
-        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
-        <label for="service_type" class="block text-sm font-medium text-gray-200">Type of Service</label>
-        <select class="select select-bordered select-sm w-full max-w-xs bg-white text-black" id="service_type" v-model="selectedService" required>
-          <option disabled value="">Please select one</option>
-          <option v-for="option in serviceOptions" :key="option.value" :value="option.value">
-            {{ option.text }}
-          </option>
-        </select>
-      </div>
+        <!-- Service Type -->
+        <div class="form-control">
+          <label class="label"><span class="label-text">Type of Service</span></label>
+          <select class="select select-bordered select-sm w-full" v-model="selectedService" required>
+            <option disabled value="">Please select one</option>
+            <option v-for="option in serviceOptions" :key="option.value" :value="option.value">
+              {{ option.text }}
+            </option>
+          </select>
+        </div>
 
-      <div class="mb-4">
-        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
-        <label for="event-description" class="block text-sm font-medium text-gray-200">Description</label>
-        <textarea id="event-description" v-model="event.description" rows="3" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black"></textarea>
-      </div>
+        <!-- Description -->
+        <div class="form-control">
+          <label class="label"><span class="label-text">Description</span></label>
+          <textarea v-model="event.description" rows="3" required class="textarea textarea-bordered textarea-sm" placeholder="Notes for the technician..."></textarea>
+        </div>
 
-      <div class="mb-4">
-        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
-        <label for="event-date" class="block text-sm font-medium text-gray-200">Day / Month</label>
-        <input type="date" id="event-date" v-model="event.date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
-      </div>
+        <!-- Date & Time Grid -->
+        <div class="grid grid-cols-2 gap-4">
+          <!-- Date -->
+          <div class="form-control">
+            <label class="label"><span class="label-text">Date</span></label>
+            <input type="date" v-model="event.date" required class="input input-bordered input-sm w-full">
+          </div>
+          <!-- Time -->
+          <div class="form-control">
+            <label class="label"><span class="label-text">Time</span></label>
+            <select v-model="event.time" class="select select-bordered select-sm w-full">
+              <option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
+            </select>
+          </div>
+        </div>
 
-      <div class="mb-4">
-        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
-        <label for="event-time" class="block text-sm font-medium text-gray-200">Time (Hour)</label>
-        <select id="event-time" v-model="event.time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
-          <option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
-        </select>
-      </div>
+        <button type="submit" class="btn btn-primary btn-sm w-full mt-4">
+          Add Event
+        </button>
+      </form>
 
-   
-
-      <button type="submit" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700">
-        Add Event
-      </button>
-    </form>
-
-    <div v-if="customer" class="mt-10 border-t pt-4">
-      <div class="font-bold text-lg">
-        {{ customer.customer_first_name }} {{ customer.customer_last_name }}
+      <!-- Customer Info Section -->
+      <div v-if="customer" class="mt-6">
+        <div class="divider">For Customer</div>
+        <!-- Customer Info "Card within a Card" -->
+        <div class="card bg-base-100 shadow-md">
+            <div class="card-body p-4">
+                <h3 class="card-title text-base">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</h3>
+                <div class="text-sm mt-2 space-y-1">
+                    <p>{{ customer.customer_address }}</p>
+                    <p v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</p>
+                    <p>{{ customer.customer_town }}, {{ customerStateName }} {{ customer.customer_zip }}</p>
+                    <p class="pt-2 font-semibold">{{ customer.customer_phone_number }}</p>
+                </div>
+                <div class="card-actions justify-end">
+                    <div class="badge badge-outline">{{ customerHomeType }}</div>
+                </div>
+            </div>
+        </div>
       </div>
-      <div>{{ customer.customer_address }}</div>
-      <div v-if="customer.customer_apt">{{ customer.customer_apt }}</div>
-      <div>
-        <span>{{ customer.customer_town }},</span>
-        <span class="pl-1">{{ customerStateName }}</span>
-        <span class="pl-1">{{ customer.customer_zip }}</span>
-      </div>
-      <div>{{ customer.customer_phone_number }}</div>
-      <div class="text-sm text-gray-500 mt-2">{{ customerHomeType }}</div>
     </div>
   </div>
 </template>
diff --git a/src/stores/search.ts b/src/stores/search.ts
new file mode 100644
index 0000000..6dc895f
--- /dev/null
+++ b/src/stores/search.ts
@@ -0,0 +1,89 @@
+// src/stores/search.ts
+
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import axios from 'axios'
+
+// Define a type for what a search result looks like. This is good practice.
+interface CustomerSearchResult {
+  id: number;
+  customer_first_name: string;
+  customer_last_name: string;
+  customer_address: string;
+  customer_town: string;
+  customer_state: string;
+  customer_phone_number: string;
+}
+
+export const useSearchStore = defineStore('search', () => {
+  // --- STATE ---
+  const searchTerm = ref('');
+  const searchResults = ref<CustomerSearchResult[]>([]);
+  const isLoading = ref(false);
+  
+  // --- NEW: A variable to hold our timer ID for debouncing ---
+  // Using `any` is okay here, but `number` for browser or `Timeout` for Node is more specific.
+  let debounceTimer: any = null;
+
+
+  // --- GETTERS ---
+  const showResults = computed(() => {
+    return searchTerm.value.length > 1 && searchResults.value.length > 0;
+  });
+
+  // --- ACTIONS ---
+
+  // This is the original function that makes the API call. We'll keep it.
+  async function fetchSearchResults() {
+    if (searchTerm.value.length < 2) {
+      searchResults.value = [];
+      return;
+    }
+
+    isLoading.value = true;
+    try {
+      const response = await axios.get(`/search/customer?q=${searchTerm.value}`);
+      searchResults.value = response.data;
+    } catch (error) {
+      console.error("Failed to fetch search results:", error);
+      searchResults.value = [];
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  // --- NEW: This is the debounced action your component will call ---
+  function debouncedSearch() {
+    // 1. Clear any existing timer. If the user is still typing, this
+    //    cancels the previous plan to make an API call.
+    clearTimeout(debounceTimer);
+
+    // 2. Set a new timer. We will only call `fetchSearchResults` after the
+    //    user has stopped typing for 400 milliseconds.
+    debounceTimer = setTimeout(() => {
+      fetchSearchResults();
+    }, 400); // 400ms is a good balance between responsiveness and efficiency
+  }
+
+
+  function clearSearch() {
+    searchTerm.value = '';
+    searchResults.value = [];
+    // Also clear the timer if a search is in progress
+    clearTimeout(debounceTimer);
+  }
+
+  // --- RETURN ---
+  return {
+    // State
+    searchTerm,
+    searchResults,
+    isLoading,
+    // Getters
+    showResults,
+    // Actions
+    fetchSearchResults, // You might not need to export this anymore
+    debouncedSearch,    // Export the new debounced function
+    clearSearch,
+  }
+})
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 658499d..0c72942 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
-    
+    "esModuleInterop": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
diff --git a/vite.config.ts b/vite.config.ts
index 2095088..97f07f3 100755
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,29 @@
+// vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   plugins: [vue()],
-  resolve: {},
-  build: {
-    sourcemap: true,
-    chunkSizeWarningLimit: 1600,
-    assetsInlineLimit: 2048, // 2kb
-  },
-
+  server: {
+    host: '0.0.0.0', 
+    port: 5173,
+    proxy: {
+      // Rule #1: Handle all search requests
+      '/search': {
+        target: 'http://backend_office_dev:4056', 
+        changeOrigin: true,
+      },
+      // Rule #2 (NEW): Handle all authentication requests
+      '/auth': {
+        target: 'http://backend_office_dev:4056', 
+        changeOrigin: true,
+      },
+      // Add more rules here for your other API blueprints if needed
+      // For example, if you have delivery routes:
+      // '/delivery': {
+      //   target: 'http://backend_office_dev:4056', 
+      //   changeOrigin: true,
+      // },
+    }
+  }
 })
\ No newline at end of file