From 440381265c8c54cca49ea148466c67f635a85d91 Mon Sep 17 00:00:00 2001
From: Casey <casey@shilohcode.com>
Date: Fri, 12 Dec 2025 08:03:48 -0600
Subject: [PATCH] updated calendar to be tabular, moved bid schedule there,
 started client view refactoring

---
 frontend/package-lock.json                    |  800 +++++++++++
 frontend/package.json                         |    1 +
 frontend/src/api.js                           |    1 +
 frontend/src/components/DashboardModule.vue   |    0
 frontend/src/components/SideBar.vue           |    4 +-
 .../calendar/CalendarNavigation.vue           |   63 +
 .../{pages => calendar/bids}/ScheduleBid.vue  |   10 +-
 .../components/calendar/jobs/JobsCalendar.vue | 1175 +++++++++++++++++
 .../clientView/AdditionalInfoBar.vue          |   29 +
 frontend/src/components/clientView/TopBar.vue |  180 +++
 frontend/src/components/common/DataTable.vue  |    2 +
 frontend/src/components/pages/Calendar.vue    | 1169 +---------------
 frontend/src/components/pages/Client.vue      |  100 +-
 frontend/src/components/pages/Clients.vue     |   23 +-
 frontend/src/components/pages/Create.vue      |    9 -
 .../components/pages/ErrorHandlingDemo.vue    |  664 ----------
 .../src/components/pages/TestDateForm.vue     |  204 ---
 frontend/src/router.js                        |    8 -
 18 files changed, 2283 insertions(+), 2159 deletions(-)
 delete mode 100644 frontend/src/components/DashboardModule.vue
 create mode 100644 frontend/src/components/calendar/CalendarNavigation.vue
 rename frontend/src/components/{pages => calendar/bids}/ScheduleBid.vue (99%)
 create mode 100644 frontend/src/components/calendar/jobs/JobsCalendar.vue
 create mode 100644 frontend/src/components/clientView/AdditionalInfoBar.vue
 create mode 100644 frontend/src/components/clientView/TopBar.vue
 delete mode 100644 frontend/src/components/pages/Create.vue
 delete mode 100644 frontend/src/components/pages/ErrorHandlingDemo.vue
 delete mode 100644 frontend/src/components/pages/TestDateForm.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d36ac0c..eb04082 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
         "pinia": "^3.0.3",
         "primeicons": "^7.0.0",
         "primevue": "^4.4.1",
+        "sass-embedded": "^1.96.0",
         "vue": "^3.5.22",
         "vue-chartjs": "^5.3.3",
         "vue-leaflet": "^0.1.0",
@@ -97,6 +98,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.10.1.tgz",
+      "integrity": "sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg==",
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.11",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.11.tgz",
@@ -755,6 +762,302 @@
       "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
       "license": "Apache-2.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==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "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"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -2333,6 +2636,12 @@
         "ieee754": "^1.1.13"
       }
     },
+    "node_modules/buffer-builder": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
+      "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+      "license": "MIT/X11"
+    },
     "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",
@@ -2455,6 +2764,12 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/colorjs.io": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2582,6 +2897,19 @@
         "node": ">=6"
       }
     },
+    "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==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -3115,6 +3443,12 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/immutable": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "license": "MIT"
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -3345,6 +3679,33 @@
       "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
       "license": "MIT"
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -3443,6 +3804,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "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==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4091,6 +4459,15 @@
       "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
       "license": "MIT"
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -4111,6 +4488,402 @@
       ],
       "license": "MIT"
     },
+    "node_modules/sass": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.96.0.tgz",
+      "integrity": "sha512-8u4xqqUeugGNCYwr9ARNtQKTOj4KmYiJAVKXf2CTIivTCR51j96htbMKWDru8H5SaQWpyVgTfOF8Ylyf5pun1Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass-embedded": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.96.0.tgz",
+      "integrity": "sha512-z9PQ7owvdhn7UuZGrpPccdkcH9xJd9iCv+UQhcPqppBslYEp0R9LRQVyyPTZg7jfA77bGxz/I8V48LXJR5LjXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@bufbuild/protobuf": "^2.5.0",
+        "buffer-builder": "^0.2.0",
+        "colorjs.io": "^0.5.0",
+        "immutable": "^5.0.2",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "sync-child-process": "^1.0.2",
+        "varint": "^6.0.0"
+      },
+      "bin": {
+        "sass": "dist/bin/sass.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-all-unknown": "1.96.0",
+        "sass-embedded-android-arm": "1.96.0",
+        "sass-embedded-android-arm64": "1.96.0",
+        "sass-embedded-android-riscv64": "1.96.0",
+        "sass-embedded-android-x64": "1.96.0",
+        "sass-embedded-darwin-arm64": "1.96.0",
+        "sass-embedded-darwin-x64": "1.96.0",
+        "sass-embedded-linux-arm": "1.96.0",
+        "sass-embedded-linux-arm64": "1.96.0",
+        "sass-embedded-linux-musl-arm": "1.96.0",
+        "sass-embedded-linux-musl-arm64": "1.96.0",
+        "sass-embedded-linux-musl-riscv64": "1.96.0",
+        "sass-embedded-linux-musl-x64": "1.96.0",
+        "sass-embedded-linux-riscv64": "1.96.0",
+        "sass-embedded-linux-x64": "1.96.0",
+        "sass-embedded-unknown-all": "1.96.0",
+        "sass-embedded-win32-arm64": "1.96.0",
+        "sass-embedded-win32-x64": "1.96.0"
+      }
+    },
+    "node_modules/sass-embedded-all-unknown": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.96.0.tgz",
+      "integrity": "sha512-UfUHoWZtxmsDjDfK+fKCy0aJe6zThu7oaIQx0c/vnHgvprcddEPIay01qTXhiUa3cFcsMmvlBvPTVw0gjKVtVQ==",
+      "cpu": [
+        "!arm",
+        "!arm64",
+        "!riscv64",
+        "!x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "sass": "1.96.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.96.0.tgz",
+      "integrity": "sha512-0mwVRBFig9hH8vFcRExBuBoR+CfUOcWdwarZwbxIFGI1IyH4BLBGiX85vVn6ssSCVNydpE6lFGm45CN8O0tQig==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.96.0.tgz",
+      "integrity": "sha512-TJiebTo4TBF5Wrn+lFkUfSN3wazvl8kkFm9a1nA9ZtRdaE0nsJLGnMM6KLQLP2Vl+IOf6ovetZseISkClRoGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-riscv64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.96.0.tgz",
+      "integrity": "sha512-7AVu/EeJqKN3BGNhm+tc1XzmoqbOtCwHG2VgN6j6Lyqh1JZlx0dglRtyQuKDZ7odTKiWmotEIuYZ6OxLmr2Ejg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.96.0.tgz",
+      "integrity": "sha512-ei/UsT0q8rF5JzWhn1A7B0M1y/IiWVY3l4zibQrXk5MGaOXHlCM6ffZD+2j7C613Jm9/KAQ7yX1NIIu72LPgDQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.96.0.tgz",
+      "integrity": "sha512-OMvN5NWcrrisC24ZR3GyaWJ1uFxw25qLnUkpEso9TSlaMWiomjU82/uQ/AkQvIMl+EMlJqeYLxZWvq/byLH5Xg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.96.0.tgz",
+      "integrity": "sha512-J/R5sv0eW+/DU98rccHPO1f3lsTFjVTpdkU9d3P1yB7BFmQjw5PYde9BVRlXeOawPwfgT3p/hvY4RELScICdww==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.96.0.tgz",
+      "integrity": "sha512-XuQvV6gNld5Bz3rX0SFLtKPGMu4UQdXNp//9A+bDmtVGZ6yu8REIqphQBxOMpgkAKsA4JZLKKk1N97woeVsIlA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.96.0.tgz",
+      "integrity": "sha512-VcbVjK0/O/mru0h0FC1WSUWIzMqRrzuJ8eZNMXTs4vApfkh28pxNaUodwU81f1L1nngJ3vpFDBniUKpW6NwJhw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.96.0.tgz",
+      "integrity": "sha512-qK7FrnczCVECZXtyYOoI3azFlMDZn70GI1yJPPuZLpWvwIPYoZOLv3u6JSec5o3wT6KeKyWG3ZpGIpigLUjPig==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.96.0.tgz",
+      "integrity": "sha512-lVyLObEeu8Wgw8riC6dSMlkF7jVNAjdZ1jIBhvX1yDsrQwwaI60pM21YXmnZSFyCE6KVFkKAgwRQNO/IkoCwMA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.96.0.tgz",
+      "integrity": "sha512-Y+DuGVRsM2zGl268QN5aF/Y6OFYTILb3f+6huEXKlGL6FK2MXadsmeoVbmKVrTamQHzyA2bWWMU1C0jhVFtlzg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.96.0.tgz",
+      "integrity": "sha512-sAQtUQ8fFNxnxSf3fncOh892Hfxa4PW4e5qrnSE0Y1IGV/wsTzk7m5Z6IeT7sa3BsvXh5TFN6+JGbUoOJ5RigA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.96.0.tgz",
+      "integrity": "sha512-Bf6bAjuUm6sfGHo0XoZEstjVkEWwmmtOSomGoPuAwXFS9GQnFcqDz9EXKNkZEOsQi2D+aDeDxs8HcU9/OLMT9g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.96.0.tgz",
+      "integrity": "sha512-U4GROkS0XM6ekqs/ubroWwFAGY9N35wqrt5q6Y+MJCpTK5bHPHlgFo7J75ZUSaEObL+UrDqvMDQkCdYEFiiQbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-unknown-all": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.96.0.tgz",
+      "integrity": "sha512-OHzGEr2VElK2SaQdkkTX0O0KwTbiv1N/EhnHgzXYaZWOTvv0gxEfR7q7x/oScCBIZc2x8dSfvThfBnohIClo/w==",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "!android",
+        "!darwin",
+        "!linux",
+        "!win32"
+      ],
+      "dependencies": {
+        "sass": "1.96.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.96.0.tgz",
+      "integrity": "sha512-KKz1h5pr45fwrKcxrxHsujo3f/HgVkX64YNJ9PRPuOuX7lU8g18IEgDxoTGQ64PPBQ5RXOt6jxpT+x2OLPVnCw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.96.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.96.0.tgz",
+      "integrity": "sha512-MDreKaWcgiyKD5YPShaRvUBoe5dC2y8IPJK49G7iQjoMfw9INDCBkDdLcz00Mn0eJq4nJJp5UEE98M6ljIrBRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/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==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@@ -4226,6 +4999,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/sync-child-process": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
+      "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+      "license": "MIT",
+      "dependencies": {
+        "sync-message-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/sync-message-port": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz",
+      "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
@@ -4535,6 +5329,12 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.1.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.10.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 96a7bec..b90ba8e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "pinia": "^3.0.3",
     "primeicons": "^7.0.0",
     "primevue": "^4.4.1",
+    "sass-embedded": "^1.96.0",
     "vue": "^3.5.22",
     "vue-chartjs": "^5.3.3",
     "vue-leaflet": "^0.1.0",
diff --git a/frontend/src/api.js b/frontend/src/api.js
index aa2988c..2641421 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -1,4 +1,5 @@
 import ApiUtils from "./apiUtils";
+import DataUtils from "./utils";
 import { useErrorStore } from "./stores/errors";
 
 const ZIPPOPOTAMUS_BASE_URL = "https://api.zippopotam.us/us";
diff --git a/frontend/src/components/DashboardModule.vue b/frontend/src/components/DashboardModule.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index fc218c9..c60d906 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -84,7 +84,7 @@ const createButtons = ref([
 	{
 		label: "Bid",
 		command: () => {
-			router.push("/schedule-bid?new=true");
+			router.push("/calendar?tab=bids&new=true");
 		},
 	},
 	{
@@ -132,7 +132,7 @@ const categories = ref([
 		icon: Community,
 		buttons: clientButtons,
 	},
-	{ name: "Bids", icon: Neighbourhood, url: "/schedule-bid" },
+	// { name: "Bids", icon: Neighbourhood, url: "/schedule-bid" },
 	{ name: "Estimates", icon: Calculator, url: "/estimates" },
 	{ name: "Jobs", icon: Hammer, url: "/jobs" },
 	{ name: "Payments/Invoices", icon: ReceiveDollars, url: "/invoices" },
diff --git a/frontend/src/components/calendar/CalendarNavigation.vue b/frontend/src/components/calendar/CalendarNavigation.vue
new file mode 100644
index 0000000..1c4bb1e
--- /dev/null
+++ b/frontend/src/components/calendar/CalendarNavigation.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="calendar-navigation">
+        <TabView v-model:activeIndex="activeIndex" @tab-change="onTabChange">
+            <TabPanel header="Bids">
+                <ScheduleBid />
+            </TabPanel>
+            <TabPanel header="Installs">
+                <div class="coming-soon">
+                    <p>Installs feature coming soon!</p>
+                </div>
+            </TabPanel>
+            <TabPanel header="Jobs">
+                <JobsCalendar />
+            </TabPanel>
+            <TabPanel header="Maintenance">
+                <div class="coming-soon">
+                    <p>Maintenance feature coming soon!</p>
+                </div>
+            </TabPanel>
+            <TabPanel header="Service">
+                <div class="coming-soon">
+                    <p>Service feature coming soon!</p>
+                </div>
+            </TabPanel>
+        </TabView>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TabView from 'primevue/tabview'
+import TabPanel from 'primevue/tabpanel'
+import ScheduleBid from '../calendar/bids/ScheduleBid.vue'
+import JobsCalendar from '../calendar/jobs/JobsCalendar.vue'
+import { useNotificationStore } from '../../stores/notifications-primevue'
+
+const notifications = useNotificationStore()
+
+const activeIndex = ref(0)
+
+const onTabChange = (event) => {
+    const tabHeaders = ['Bids', 'Installs', 'Jobs', 'Maintenance', 'Service']
+    const selectedTab = tabHeaders[event.index]
+    if (selectedTab !== 'Bids' && selectedTab !== 'Jobs') {
+        notifications.addWarning(`${selectedTab} feature coming soon!`)
+    }
+}
+</script>
+
+<style scoped>
+.calendar-navigation {
+    width: 100%;
+}
+
+.coming-soon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 400px;
+    color: #6c757d;
+    font-size: 1.2rem;
+}
+</style>
diff --git a/frontend/src/components/pages/ScheduleBid.vue b/frontend/src/components/calendar/bids/ScheduleBid.vue
similarity index 99%
rename from frontend/src/components/pages/ScheduleBid.vue
rename to frontend/src/components/calendar/bids/ScheduleBid.vue
index b5c4fac..d4e9891 100644
--- a/frontend/src/components/pages/ScheduleBid.vue
+++ b/frontend/src/components/calendar/bids/ScheduleBid.vue
@@ -214,11 +214,11 @@
 <script setup>
 import { ref, computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import BidMeetingModal from "../modals/BidMeetingModal.vue";
-import MeetingDetailsModal from "../modals/MeetingDetailsModal.vue";
-import { useLoadingStore } from "../../stores/loading";
-import { useNotificationStore } from "../../stores/notifications-primevue";
-import Api from "../../api";
+import BidMeetingModal from "../../modals/BidMeetingModal.vue";
+import MeetingDetailsModal from "../../modals/MeetingDetailsModal.vue";
+import { useLoadingStore } from "../../../stores/loading";
+import { useNotificationStore } from "../../../stores/notifications-primevue";
+import Api from "../../../api";
 
 const route = useRoute();
 const router = useRouter();
diff --git a/frontend/src/components/calendar/jobs/JobsCalendar.vue b/frontend/src/components/calendar/jobs/JobsCalendar.vue
new file mode 100644
index 0000000..4a8abf6
--- /dev/null
+++ b/frontend/src/components/calendar/jobs/JobsCalendar.vue
@@ -0,0 +1,1175 @@
+<template>
+	<div class="calendar-container">
+		<div class="calendar-header">
+			<h2>Daily Schedule - Sprinkler Service</h2>
+			<div class="header-controls">
+				<v-btn
+					@click="previousDay"
+					icon="mdi-chevron-left"
+					variant="outlined"
+					size="small"
+				></v-btn>
+				<v-btn
+					@click="showDatePicker = true"
+					variant="text"
+					class="day-display-btn"
+				>
+					<span class="date-text">{{ dayDisplayText }}</span>
+					<v-icon right size="small">mdi-calendar</v-icon>
+				</v-btn>
+				<v-btn
+					@click="nextDay"
+					icon="mdi-chevron-right"
+					variant="outlined"
+					size="small"
+				></v-btn>
+				<v-btn @click="goToToday" variant="outlined" size="small" class="ml-4"
+					>Today</v-btn
+				>
+				<v-menu
+					v-model="showForemenMenu"
+					:close-on-content-click="false"
+					location="bottom"
+				>
+					<template v-slot:activator="{ props }">
+						<v-btn
+							v-bind="props"
+							variant="outlined"
+							size="small"
+							class="ml-4"
+						>
+							<v-icon left size="small">mdi-account-group</v-icon>
+							Foremen ({{ selectedForemen.length }})
+							<v-icon right size="small">mdi-chevron-down</v-icon>
+						</v-btn>
+					</template>
+					<v-card min-width="250" max-width="300">
+						<v-card-title class="text-subtitle-1 py-2">
+							Select Foremen
+						</v-card-title>
+						<v-divider></v-divider>
+						<v-card-text class="pa-2">
+							<v-list density="compact">
+								<v-list-item @click="toggleAllForemen">
+									<template v-slot:prepend>
+										<v-checkbox-btn
+											:model-value="selectedForemen.length === foremen.length"
+											:indeterminate="selectedForemen.length > 0 && selectedForemen.length < foremen.length"
+										></v-checkbox-btn>
+									</template>
+									<v-list-item-title>Select All</v-list-item-title>
+								</v-list-item>
+								<v-divider></v-divider>
+								<v-list-item
+									v-for="foreman in foremen"
+									:key="foreman.id"
+									@click="toggleForeman(foreman.id)"
+								>
+									<template v-slot:prepend>
+										<v-checkbox-btn
+											:model-value="selectedForemen.includes(foreman.id)"
+										></v-checkbox-btn>
+									</template>
+									<v-list-item-title>{{ foreman.name }}</v-list-item-title>
+								</v-list-item>
+							</v-list>
+						</v-card-text>
+					</v-card>
+				</v-menu>
+			</div>
+		</div>
+
+		<!-- Date Picker Dialog -->
+		<v-dialog v-model="showDatePicker" max-width="400px">
+			<v-card>
+				<v-card-title>Select Date</v-card-title>
+				<v-card-text>
+					<v-date-picker
+						v-model="selectedDate"
+						@update:model-value="onDateSelected"
+						full-width
+					></v-date-picker>
+				</v-card-text>
+				<v-card-actions>
+					<v-spacer></v-spacer>
+					<v-btn @click="showDatePicker = false">Cancel</v-btn>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
+		<div class="calendar-main">
+			<!-- Daily Calendar Grid -->
+			<div class="calendar-section">
+				<div class="daily-calendar">
+					<!-- Foremen Header -->
+					<div class="calendar-header-row" :style="{ gridTemplateColumns: `80px repeat(${visibleForemen.length}, 1fr)` }">
+						<div class="time-column-header">Time</div>
+						<div
+							v-for="foreman in visibleForemen"
+							:key="foreman.id"
+							class="foreman-header"
+						>
+							<div class="foreman-name">{{ foreman.name }}</div>
+							<div class="foreman-jobs">{{ getJobsCountForForeman(foreman.name) }} jobs</div>
+						</div>
+					</div>
+
+					<!-- Time Grid -->
+					<div class="calendar-grid">
+						<div v-for="timeSlot in timeSlots" :key="timeSlot.time" class="time-row" :style="{ gridTemplateColumns: `80px repeat(${visibleForemen.length}, 1fr)` }">
+							<!-- Time Column -->
+							<div class="time-column">
+								<span class="time-label">{{ timeSlot.display }}</span>
+							</div>
+
+							<!-- Foreman Columns -->
+							<div
+								v-for="foreman in visibleForemen"
+								:key="`${foreman.id}-${timeSlot.time}`"
+								class="foreman-column"
+								:class="{
+									'current-time': isCurrentTimeSlot(currentDate, timeSlot.time),
+									'drag-over': isDragOver && dragOverSlot?.foremanId === foreman.id && dragOverSlot?.time === timeSlot.time && !dragOverSlot?.isOccupied,
+									'drag-over-occupied': isDragOver && dragOverSlot?.foremanId === foreman.id && dragOverSlot?.time === timeSlot.time && dragOverSlot?.isOccupied,
+									'drag-preview': isDragOver && isInPreviewSlots(foreman.id, timeSlot.time),
+								}"
+								@click="selectTimeSlot(foreman.id, timeSlot.time)"
+								@dragover="handleDragOver($event, foreman.id, timeSlot.time)"
+								@dragleave="handleDragLeave"
+								@drop="handleDrop($event, foreman.id, timeSlot.time)"
+							>
+								<!-- Events in this time slot -->
+								<div
+									v-for="event in getEventsForTimeSlot(foreman.name, timeSlot.time, currentDate)"
+									:key="event.id"
+									class="calendar-event"
+									:class="getPriorityClass(event.priority)"
+									:style="getEventStyle(event)"
+									draggable="true"
+									@click.stop="showEventDetails({ event })"
+									@dragstart="handleDragStart(event, $event)"
+									@dragend="handleDragEnd"
+									@dragover.stop.prevent
+									@dragenter.stop.prevent
+								>
+									<div class="event-title">{{ event.serviceType }}</div>
+									<div class="event-customer">{{ event.customer }}</div>
+									<div class="event-time-display">{{ formatTimeDisplay(event.scheduledTime) }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Unscheduled Services Column -->
+			<div class="unscheduled-section">
+				<div class="unscheduled-header">
+					<h4>Unscheduled Services</h4>
+					<v-chip
+						:color="getUnscheduledCount() > 0 ? 'warning' : 'success'"
+						size="small"
+					>
+						{{ getUnscheduledCount() }} pending
+					</v-chip>
+				</div>
+
+				<div 
+					class="unscheduled-list"
+					:class="{ 'unscheduled-drop-zone': isDragOver && draggedService?.status === 'scheduled' }"
+					@dragover="handleUnscheduledDragOver"
+					@dragleave="handleUnscheduledDragLeave"
+					@drop="handleUnscheduledDrop"
+				>
+					<v-card
+						v-for="service in unscheduledServices"
+						:key="service.id"
+						class="unscheduled-item mb-2"
+						:class="getPriorityClass(service.priority)"
+						elevation="1"
+						hover
+						density="compact"
+						draggable="true"
+						@dragstart="handleDragStart(service, $event)"
+						@dragend="handleDragEnd"
+					>
+						<v-card-text class="pa-3">
+							<div class="d-flex justify-space-between align-center mb-2">
+								<v-chip :color="getPriorityColor(service.priority)" size="x-small">
+									{{ service.priority.toUpperCase() }}
+								</v-chip>
+								<span class="text-caption text-medium-emphasis"
+									>${{ service.estimatedCost.toLocaleString() }}</span
+								>
+							</div>
+
+							<div class="service-title-compact">{{ service.serviceType }}</div>
+							<div class="service-customer">{{ service.customer }}</div>
+
+							<div class="service-compact-details mt-1">
+								<div class="text-caption">
+									<v-icon size="x-small" class="mr-1">mdi-clock</v-icon>
+									{{ formatDuration(service.duration) }}
+								</div>
+							</div>
+
+							<div v-if="service.notes" class="service-notes-compact mt-2">
+								<span class="text-caption">{{ service.notes }}</span>
+							</div>
+
+							<v-btn
+								color="primary"
+								size="x-small"
+								variant="outlined"
+								class="mt-2"
+								block
+								@click="scheduleService(service)"
+							>
+								<v-icon left size="x-small">mdi-calendar-plus</v-icon>
+								Schedule
+							</v-btn>
+						</v-card-text>
+					</v-card>
+				</div>
+
+				<div v-if="unscheduledServices.length === 0" class="no-unscheduled">
+					<v-icon size="large" color="success">mdi-check-circle</v-icon>
+					<p class="text-body-2">All services scheduled!</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Event Details Dialog -->
+		<v-dialog v-model="eventDialog" max-width="600px">
+			<v-card v-if="selectedEvent">
+				<v-card-title class="d-flex justify-space-between align-center">
+					<span>{{ selectedEvent.title }}</span>
+					<v-chip :color="getPriorityColor(selectedEvent.priority)" small>
+						{{ selectedEvent.priority.toUpperCase() }}
+					</v-chip>
+				</v-card-title>
+
+				<v-card-text>
+					<div class="event-details">
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-account</v-icon>
+							<strong>Customer:</strong> {{ selectedEvent.customer }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-map-marker</v-icon>
+							<strong>Address:</strong> {{ selectedEvent.address }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-wrench</v-icon>
+							<strong>Service Type:</strong> {{ selectedEvent.serviceType }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-calendar</v-icon>
+							<strong>Date:</strong> {{ selectedEvent.scheduledDate }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-clock</v-icon>
+							<strong>Time:</strong> {{ selectedEvent.scheduledTime }} ({{
+								formatDuration(selectedEvent.duration)
+							}})
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-account-hard-hat</v-icon>
+							<strong>Foreman:</strong> {{ selectedEvent.foreman || "Not assigned" }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-account-group</v-icon>
+							<strong>Crew:</strong>
+							{{ selectedEvent.crew?.join(", ") || "Not assigned" }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-currency-usd</v-icon>
+							<strong>Estimated Cost:</strong> ${{
+								selectedEvent.estimatedCost.toLocaleString()
+							}}
+						</div>
+						<div v-if="selectedEvent.notes" class="detail-row">
+							<v-icon class="mr-2">mdi-note-text</v-icon>
+							<strong>Notes:</strong> {{ selectedEvent.notes }}
+						</div>
+					</div>
+				</v-card-text>
+
+				<v-card-actions>
+					<v-spacer></v-spacer>
+					<v-btn color="primary" @click="eventDialog = false">Close</v-btn>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import Api from "../../../api";
+import { useNotificationStore } from "../../../stores/notifications-primevue";
+
+const notifications = useNotificationStore();
+
+// Reactive data
+const services = ref([]);
+const currentDate = ref("2025-10-25");
+const eventDialog = ref(false);
+const selectedEvent = ref(null);
+
+// Drag and drop state
+const draggedService = ref(null);
+const isDragOver = ref(false);
+const dragOverSlot = ref(null);
+const previewSlots = ref([]);
+
+// Foremen data
+const foremen = ref([
+	{ id: 1, name: "Mike Thompson" },
+	{ id: 2, name: "Sarah Johnson" },
+	{ id: 3, name: "David Martinez" },
+	{ id: 4, name: "Chris Wilson" },
+	{ id: 5, name: "Lisa Anderson" },
+	{ id: 6, name: "Robert Thomas" },
+	{ id: 7, name: "Maria White" },
+	{ id: 8, name: "James Clark" },
+	{ id: 9, name: "Patricia Lewis" },
+	{ id: 10, name: "Kevin Walker" },
+]);
+
+// Foremen selection
+const selectedForemen = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // Default to all selected
+const showForemenMenu = ref(false);
+
+// Date picker
+const showDatePicker = ref(false);
+const selectedDate = ref(null);
+
+// Computed properties
+const scheduledServices = computed(() =>
+	services.value.filter((service) => service.status === "scheduled"),
+);
+
+const unscheduledServices = computed(() =>
+	services.value.filter((service) => service.status === "unscheduled"),
+);
+
+// Daily calendar computed properties
+const dayDisplayText = computed(() => {
+	const date = new Date(currentDate.value);
+	return date.toLocaleDateString("en-US", { 
+		weekday: "long", 
+		year: "numeric", 
+		month: "long", 
+		day: "numeric" 
+	});
+});
+
+// Foremen computed properties
+const foremenOptions = computed(() => {
+	return foremen.value.map(foreman => ({
+		id: foreman.id,
+		name: foreman.name
+	}));
+});
+
+const visibleForemen = computed(() => {
+	return foremen.value.filter(foreman => selectedForemen.value.includes(foreman.id));
+});
+
+const timeSlots = computed(() => {
+	const slots = [];
+	for (let hour = 7; hour < 19; hour++) {
+		// 7 AM to 7 PM
+		for (let minute = 0; minute < 60; minute += 30) {
+			// 30-minute intervals
+			const time = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+			const displayHour = hour > 12 ? hour - 12 : hour === 0 ? 12 : hour;
+			const ampm = hour >= 12 ? "PM" : "AM";
+			const display =
+				minute === 0 ? `${displayHour}:00 ${ampm}` : `${displayHour}:30 ${ampm}`;
+
+			slots.push({
+				time,
+				display: minute === 0 ? display : "", // Only show hour labels on the hour
+				isHour: minute === 0,
+			});
+		}
+	}
+	return slots;
+});
+
+// Methods
+const getUnscheduledCount = () => unscheduledServices.value.length;
+
+const getPriorityClass = (priority) => {
+	switch (priority) {
+		case "urgent":
+			return "priority-urgent";
+		case "high":
+			return "priority-high";
+		case "medium":
+			return "priority-medium";
+		case "low":
+			return "priority-low";
+		default:
+			return "";
+	}
+};
+
+const getPriorityColor = (priority) => {
+	switch (priority) {
+		case "urgent":
+			return "red";
+		case "high":
+			return "orange";
+		case "medium":
+			return "yellow";
+		case "low":
+			return "green";
+		default:
+			return "grey";
+	}
+};
+
+const formatDuration = (minutes) => {
+	const hours = Math.floor(minutes / 60);
+	const mins = minutes % 60;
+	if (hours === 0) return `${mins}m`;
+	if (mins === 0) return `${hours}h`;
+	return `${hours}h ${mins}m`;
+};
+
+const getEndTime = (startTime, durationMinutes) => {
+	const [hours, minutes] = startTime.split(":").map(Number);
+	const startDate = new Date();
+	startDate.setHours(hours, minutes, 0, 0);
+	const endDate = new Date(startDate.getTime() + durationMinutes * 60000);
+	return endDate.toTimeString().slice(0, 5);
+};
+
+// Check if a time slot has any conflicts with existing events for a specific foreman
+const isTimeSlotOccupied = (foremanName, startTime, durationMinutes, excludeServiceId = null) => {
+	const endTime = getEndTime(startTime, durationMinutes);
+	
+	return scheduledServices.value.some((service) => {
+		// Exclude the service being moved
+		if (excludeServiceId && service.id === excludeServiceId) return false;
+		
+		// Check if this service is for the same foreman and date
+		if (service.foreman !== foremanName || service.scheduledDate !== currentDate.value) return false;
+		
+		const serviceEndTime = getEndTime(service.scheduledTime, service.duration);
+		
+		// Check for time overlap
+		return (
+			(startTime >= service.scheduledTime && startTime < serviceEndTime) ||
+			(endTime > service.scheduledTime && endTime <= serviceEndTime) ||
+			(startTime <= service.scheduledTime && endTime >= serviceEndTime)
+		);
+	});
+};
+
+// Get all time slots that would be occupied by an event for a specific foreman
+const getOccupiedSlots = (foremanId, startTime, durationMinutes) => {
+	const slots = [];
+	const endTime = getEndTime(startTime, durationMinutes);
+	
+	// Generate all 30-minute slots between start and end time
+	let currentTime = startTime;
+	while (currentTime < endTime) {
+		slots.push({ foremanId, time: currentTime });
+		
+		// Add 30 minutes
+		const [hours, minutes] = currentTime.split(':').map(Number);
+		const nextMinutes = minutes + 30;
+		const nextHours = hours + Math.floor(nextMinutes / 60);
+		const finalMinutes = nextMinutes % 60;
+		
+		currentTime = `${nextHours.toString().padStart(2, '0')}:${finalMinutes.toString().padStart(2, '0')}`;
+		
+		// Safety check to prevent infinite loop
+		if (nextHours >= 24) break;
+	}
+	
+	return slots;
+};
+
+// Calendar navigation methods
+const previousDay = () => {
+	const date = new Date(currentDate.value);
+	date.setDate(date.getDate() - 1);
+	currentDate.value = date.toISOString().split("T")[0];
+};
+
+const nextDay = () => {
+	const date = new Date(currentDate.value);
+	date.setDate(date.getDate() + 1);
+	currentDate.value = date.toISOString().split("T")[0];
+};
+
+const goToToday = () => {
+	const today = new Date();
+	currentDate.value = today.toISOString().split("T")[0];
+};
+
+// Event positioning and display methods
+const getEventsForTimeSlot = (foremanName, time, date) => {
+	return scheduledServices.value.filter((service) => {
+		if (service.scheduledDate !== date || service.foreman !== foremanName) return false;
+
+		// Only show the event in its starting time slot to prevent duplication
+		return service.scheduledTime === time;
+	});
+};
+
+const getJobsCountForForeman = (foremanName) => {
+	return scheduledServices.value.filter((service) => 
+		service.foreman === foremanName && service.scheduledDate === currentDate.value
+	).length;
+};
+
+const formatTimeDisplay = (time) => {
+	const [hours, minutes] = time.split(':').map(Number);
+	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+	const ampm = hours >= 12 ? 'PM' : 'AM';
+	return `${displayHour}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+};
+
+// Foremen selection methods
+const toggleAllForemen = () => {
+	if (selectedForemen.value.length === foremen.value.length) {
+		// Deselect all
+		selectedForemen.value = [];
+	} else {
+		// Select all
+		selectedForemen.value = foremen.value.map(f => f.id);
+	}
+};
+
+const toggleForeman = (foremanId) => {
+	const index = selectedForemen.value.indexOf(foremanId);
+	if (index > -1) {
+		selectedForemen.value.splice(index, 1);
+	} else {
+		selectedForemen.value.push(foremanId);
+	}
+};
+
+// Date picker methods
+const onDateSelected = (date) => {
+	if (date) {
+		const dateObj = Array.isArray(date) ? date[0] : date;
+		currentDate.value = dateObj.toISOString().split('T')[0];
+		showDatePicker.value = false;
+	}
+};
+
+const getEventStyle = (event) => {
+	const duration = event.duration;
+	const slots = Math.ceil(duration / 30); // 30-minute slots
+	const height = Math.min(slots * 40 - 4, 200); // Max height to prevent overflow
+
+	return {
+		height: `${height}px`,
+		minHeight: "36px",
+	};
+};
+
+const isCurrentTimeSlot = (date, time) => {
+	const now = new Date();
+	const today = now.toISOString().split("T")[0];
+	const currentTime = `${now.getHours().toString().padStart(2, "0")}:${Math.floor(now.getMinutes() / 30) * 30}`;
+
+	return date === today && time === currentTime;
+};
+
+const selectTimeSlot = (foremanId, time) => {
+	console.log("Selected time slot:", foremanId, time);
+	// This will be used for drag-and-drop functionality
+};
+
+const isInPreviewSlots = (foremanId, time) => {
+	return previewSlots.value.some(slot => slot.foremanId === foremanId && slot.time === time);
+};
+
+const showEventDetails = (event) => {
+	selectedEvent.value = event.event;
+	eventDialog.value = true;
+};
+
+const scheduleService = (service) => {
+	// Placeholder for future drag-and-drop functionality
+	console.log("Scheduling service:", service);
+	// This will be implemented when drag-and-drop is added
+	alert(
+		`Scheduling functionality will be implemented in the future.\nService: ${service.title}`,
+	);
+};
+
+// Drag and Drop methods
+const handleDragStart = (service, event) => {
+	draggedService.value = service;
+	event.dataTransfer.effectAllowed = "move";
+	event.dataTransfer.setData("text/plain", service.id);
+	
+	// Get the dimensions of the dragged element
+	const dragElement = event.target;
+	const rect = dragElement.getBoundingClientRect();
+	
+	// Set the drag image offset to center the element horizontally and position cursor at top
+	const offsetX = rect.width / 2;
+	const offsetY = 10; // Position cursor near the top of the element
+	
+	try {
+		event.dataTransfer.setDragImage(dragElement, offsetX, offsetY);
+	} catch (e) {
+		// Fallback if setDragImage fails
+		console.log("Could not set custom drag image");
+	}
+	
+	// Add visual feedback
+	event.target.style.opacity = '0.5';
+	console.log("Drag started for service:", service.serviceType);
+};
+
+const handleDragEnd = (event) => {
+	// Reset visual feedback
+	event.target.style.opacity = '1';
+	draggedService.value = null;
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+	previewSlots.value = [];
+};
+
+const handleDragOver = (event, foremanId, time) => {
+	event.preventDefault();
+	event.stopPropagation(); // Prevent event bubbling to avoid conflicts with nested elements
+	
+	if (!draggedService.value) return;
+	
+	// Get foreman name from ID - check both all foremen and visible foremen
+	const foreman = foremen.value.find(f => f.id === foremanId);
+	if (!foreman) return;
+	
+	// Check if the slot would be occupied (excluding the current service)
+	const isOccupied = isTimeSlotOccupied(foreman.name, time, draggedService.value.duration, draggedService.value.id);
+	
+	// Calculate which slots would be occupied by this event
+	const wouldOccupySlots = getOccupiedSlots(foremanId, time, draggedService.value.duration);
+	
+	event.dataTransfer.dropEffect = isOccupied ? "none" : "move";
+	
+	// Only update state if it's actually different to prevent flickering
+	const currentSlotKey = `${foremanId}-${time}`;
+	const previousSlotKey = dragOverSlot.value ? `${dragOverSlot.value.foremanId}-${dragOverSlot.value.time}` : null;
+	
+	if (currentSlotKey !== previousSlotKey || dragOverSlot.value?.isOccupied !== isOccupied) {
+		isDragOver.value = true;
+		dragOverSlot.value = { foremanId, time, isOccupied };
+		previewSlots.value = wouldOccupySlots;
+	}
+};
+
+const handleDragLeave = (event) => {
+	// Use a small delay to prevent flickering when moving between child elements
+	setTimeout(() => {
+		// Check if we're still dragging and if the mouse has actually left the calendar area
+		if (!draggedService.value) return;
+		
+		const calendarGrid = document.querySelector('.calendar-grid');
+		if (!calendarGrid) return;
+		
+		const rect = calendarGrid.getBoundingClientRect();
+		const x = event.clientX;
+		const y = event.clientY;
+		
+		// Only clear if mouse is outside the entire calendar grid
+		if (
+			x < rect.left ||
+			x > rect.right ||
+			y < rect.top ||
+			y > rect.bottom
+		) {
+			isDragOver.value = false;
+			dragOverSlot.value = null;
+			previewSlots.value = [];
+		}
+	}, 10);
+};
+
+const handleDrop = (event, foremanId, time) => {
+	event.preventDefault();
+	event.stopPropagation();
+	
+	if (!draggedService.value) return;
+	
+	// Get foreman name from ID
+	const foreman = foremen.value.find(f => f.id === foremanId);
+	if (!foreman) return;
+	
+	// Check if the slot is occupied (excluding the service being moved)
+	const isOccupied = isTimeSlotOccupied(foreman.name, time, draggedService.value.duration, draggedService.value.id);
+	
+	if (isOccupied) {
+		console.log("Cannot drop here - time slot is occupied");
+		// Reset drag state
+		isDragOver.value = false;
+		dragOverSlot.value = null;
+		previewSlots.value = [];
+		draggedService.value = null;
+		return;
+	}
+	
+	// Convert time to 12-hour format for display
+	const [hours, minutes] = time.split(':').map(Number);
+	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+	const ampm = hours >= 12 ? 'PM' : 'AM';
+	const formattedTime = `${displayHour}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+	
+	// Update the service with scheduling information
+	const serviceIndex = services.value.findIndex(s => s.id === draggedService.value.id);
+	if (serviceIndex !== -1) {
+		const wasScheduled = services.value[serviceIndex].status === 'scheduled';
+		services.value[serviceIndex] = {
+			...services.value[serviceIndex],
+			status: 'scheduled',
+			scheduledDate: currentDate.value,
+			scheduledTime: time,
+			scheduledTimeDisplay: formattedTime,
+			foreman: foreman.name
+		};
+		
+		const action = wasScheduled ? 'Moved' : 'Scheduled';
+		console.log(`${action} ${draggedService.value.serviceType} for ${foreman.name} on ${currentDate.value} at ${formattedTime}`);
+	}
+	
+	// Reset drag state
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+	previewSlots.value = [];
+	draggedService.value = null;
+};
+
+// Handle dropping scheduled items back to unscheduled
+const handleUnscheduledDragOver = (event) => {
+	if (draggedService.value?.status === 'scheduled') {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "move";
+	}
+};
+
+const handleUnscheduledDragLeave = (event) => {
+	// Visual feedback will be handled by CSS
+};
+
+const handleUnscheduledDrop = (event) => {
+	event.preventDefault();
+	
+	if (!draggedService.value || draggedService.value.status !== 'scheduled') return;
+	
+	// Update the service to unscheduled status
+	const serviceIndex = services.value.findIndex(s => s.id === draggedService.value.id);
+	if (serviceIndex !== -1) {
+		services.value[serviceIndex] = {
+			...services.value[serviceIndex],
+			status: 'unscheduled',
+			scheduledDate: null,
+			scheduledTime: null,
+			scheduledTimeDisplay: null
+		};
+		
+		console.log(`Unscheduled ${draggedService.value.serviceType}`);
+	}
+	
+	// Reset drag state
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+	previewSlots.value = [];
+	draggedService.value = null;
+};
+
+// Lifecycle
+onMounted(async () => {
+	notifications.addWarning("Calendar is currently in development. Many features are placeholders. UPDATES COMING SOON!");
+	try {
+		const data = await Api.getServiceData();
+		services.value = data;
+		console.log("Loaded services:", data);
+	} catch (error) {
+		console.error("Error loading services:", error);
+	}
+});
+</script>
+
+<style scoped>
+.calendar-container {
+	padding: 20px;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+.calendar-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+	padding-bottom: 15px;
+	border-bottom: 1px solid #e0e0e0;
+}
+
+.header-controls {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+}
+
+.day-display-btn {
+	font-weight: 600;
+	font-size: 1.1em;
+	color: #1976d2 !important;
+	text-transform: none;
+	letter-spacing: normal;
+	min-width: 320px;
+	max-width: 320px;
+}
+
+.day-display-btn:hover {
+	background-color: rgba(25, 118, 210, 0.08);
+}
+
+.date-text {
+	display: inline-block;
+	text-align: center;
+	width: 100%;
+}
+
+.calendar-main {
+	display: flex;
+	gap: 20px;
+	flex: 1;
+	overflow: hidden;
+}
+
+.calendar-section {
+	flex: 1;
+	overflow: auto;
+}
+
+.daily-calendar {
+	min-width: 800px;
+	background: white;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	overflow-x: auto;
+}
+
+.calendar-header-row {
+	display: grid;
+	border-bottom: 2px solid #e0e0e0;
+	background-color: #f8f9fa;
+}
+
+.time-column-header {
+	padding: 16px 8px;
+	font-weight: 600;
+	text-align: center;
+	border-right: 1px solid #e0e0e0;
+	color: #666;
+}
+
+.foreman-header {
+	padding: 12px 8px;
+	text-align: center;
+	border-right: 1px solid #e0e0e0;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.foreman-header:hover {
+	background-color: #f0f0f0;
+}
+
+.foreman-name {
+	font-weight: 600;
+	font-size: 0.9em;
+	margin-bottom: 4px;
+	color: #1976d2;
+}
+
+.foreman-jobs {
+	font-size: 0.75em;
+	color: #666;
+	font-weight: 500;
+}
+
+.calendar-grid {
+	display: flex;
+	flex-direction: column;
+}
+
+.time-row {
+	display: grid;
+	min-height: 40px;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.time-row:nth-child(odd) {
+	background-color: #fafafa;
+}
+
+.time-column {
+	padding: 8px;
+	border-right: 1px solid #e0e0e0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #f8f9fa;
+}
+
+.time-label {
+	font-size: 0.75em;
+	color: #666;
+	font-weight: 500;
+}
+
+.foreman-column {
+	border-right: 1px solid #e0e0e0;
+	position: relative;
+	cursor: pointer;
+	transition: background-color 0.2s;
+	min-height: 40px;
+}
+
+.foreman-column:hover {
+	background-color: #f0f8ff;
+}
+
+.foreman-column.current-time {
+	background-color: #fff3e0;
+}
+
+.foreman-column.drag-over {
+	background-color: #e8f5e8;
+	border: 2px dashed #4caf50;
+	box-sizing: border-box;
+}
+
+.foreman-column.drag-over-occupied {
+	background-color: #ffebee;
+	border: 2px dashed #f44336;
+	box-sizing: border-box;
+}
+
+.foreman-column.drag-preview {
+	background-color: #e3f2fd;
+	border: 1px solid #2196f3;
+	box-sizing: border-box;
+	opacity: 0.7;
+}
+
+.calendar-event {
+	position: absolute;
+	left: 2px;
+	right: 2px;
+	top: 2px;
+	background: linear-gradient(135deg, #2196f3, #1976d2);
+	color: white;
+	border-radius: 4px;
+	padding: 4px 6px;
+	font-size: 0.75em;
+	cursor: pointer;
+	overflow: hidden;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	transition: all 0.2s;
+	z-index: 10;
+}
+
+.calendar-event:hover {
+	transform: scale(1.02);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.calendar-event[draggable="true"] {
+	cursor: grab;
+}
+
+.calendar-event[draggable="true"]:active {
+	cursor: grabbing;
+}
+
+.calendar-event .event-title {
+	font-weight: 600;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-bottom: 1px;
+}
+
+.calendar-event .event-customer {
+	font-size: 0.65em;
+	opacity: 0.9;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.calendar-event .event-time-display {
+	font-size: 0.6em;
+	opacity: 0.8;
+}
+
+.calendar-event.priority-urgent {
+	background: linear-gradient(135deg, #f44336, #d32f2f);
+}
+
+.calendar-event.priority-high {
+	background: linear-gradient(135deg, #ff9800, #f57c00);
+}
+
+.calendar-event.priority-medium {
+	background: linear-gradient(135deg, #2196f3, #1976d2);
+}
+
+.calendar-event.priority-low {
+	background: linear-gradient(135deg, #4caf50, #388e3c);
+}
+
+.unscheduled-section {
+	width: 280px;
+	border-left: 1px solid #e0e0e0;
+	padding-left: 16px;
+	display: flex;
+	flex-direction: column;
+}
+
+.unscheduled-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 12px;
+}
+
+.unscheduled-header h4 {
+	font-size: 1.1em;
+	margin: 0;
+}
+
+.unscheduled-list {
+	flex: 1;
+	overflow-y: auto;
+	max-height: calc(100vh - 200px);
+	transition: all 0.3s ease;
+	border-radius: 8px;
+}
+
+.unscheduled-list.unscheduled-drop-zone {
+	background-color: #e8f5e8;
+	border: 2px dashed #4caf50;
+	box-sizing: border-box;
+}
+
+.unscheduled-item {
+	border-left: 3px solid transparent;
+	transition: all 0.3s ease;
+}
+
+.unscheduled-item:hover {
+	transform: translateX(3px);
+}
+
+.unscheduled-item[draggable="true"] {
+	cursor: grab;
+}
+
+.unscheduled-item[draggable="true"]:active {
+	cursor: grabbing;
+}
+
+.priority-urgent {
+	border-left-color: #f44336 !important;
+}
+
+.priority-high {
+	border-left-color: #ff9800 !important;
+}
+
+.priority-medium {
+	border-left-color: #ffeb3b !important;
+}
+
+.priority-low {
+	border-left-color: #4caf50 !important;
+}
+
+.service-title-compact {
+	font-weight: 600;
+	font-size: 0.9em;
+	color: #1976d2;
+	line-height: 1.2;
+}
+
+.service-customer {
+	font-size: 0.8em;
+	color: #666;
+	margin-top: 2px;
+}
+
+.service-compact-details {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.service-notes-compact {
+	background-color: #f8f9fa;
+	padding: 4px 6px;
+	border-radius: 3px;
+	border-left: 2px solid #2196f3;
+}
+
+.service-notes-compact .text-caption {
+	font-style: italic;
+	color: #666;
+	line-height: 1.3;
+}
+
+.no-unscheduled {
+	text-align: center;
+	padding: 40px 20px;
+	color: #666;
+}
+
+.event-details {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.detail-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+
+
+
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.calendar-main {
+		flex-direction: column;
+	}
+
+	.unscheduled-section {
+		width: 100%;
+		border-left: none;
+		border-top: 1px solid #e0e0e0;
+		padding-left: 0;
+		padding-top: 20px;
+		max-height: 400px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/clientView/AdditionalInfoBar.vue b/frontend/src/components/clientView/AdditionalInfoBar.vue
new file mode 100644
index 0000000..653b7ad
--- /dev/null
+++ b/frontend/src/components/clientView/AdditionalInfoBar.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="additional-info-bar">
+        <span>additional address information. coming soon</span>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    address: {
+        type: Object,
+        default: null
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.additional-info-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 1rem;
+    background: linear-gradient(135deg, #f0f9f0 0%, #e8f5e8 100%);
+    color: #2d5a47;
+    border-bottom: 1px solid #c8e6c9;
+    font-size: 0.75rem;
+    font-weight: 500;
+    min-height: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/clientView/TopBar.vue b/frontend/src/components/clientView/TopBar.vue
new file mode 100644
index 0000000..fc980c7
--- /dev/null
+++ b/frontend/src/components/clientView/TopBar.vue
@@ -0,0 +1,180 @@
+<template>
+    <div class="top-bar">
+        <div class="address-section">
+            <label class="section-label">Address:</label>
+            <Dropdown
+                v-model="selectedAddressIdx"
+                :options="addressOptions"
+                option-label="label"
+                option-value="value"
+                placeholder="Select Address"
+                class="address-dropdown"
+            />
+        </div>
+        <div class="contact-section">
+            <div class="contact-info">
+                <div class="contact-item">
+                    <strong>{{ primaryContact.name }}</strong>
+                </div>
+                <div class="contact-item">
+                    <i class="pi pi-phone"></i> {{ primaryContact.phone }}
+                </div>
+                <div class="contact-item">
+                    <i class="pi pi-envelope"></i> {{ primaryContact.email }}
+                </div>
+            </div>
+            <div v-if="client.customerName !== primaryContact.fullName" class="customer-name">
+                <span class="customer-label">Customer:</span> {{ client.customerName }}
+            </div>
+        </div>
+        <div class="visit-section">
+            <i class="pi pi-calendar"></i>
+            <span>Next Visit: {{ nextVisitDate ? formatDate(nextVisitDate) : 'None' }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import Dropdown from 'primevue/dropdown'
+
+const props = defineProps({
+    client: {
+        type: Object,
+        required: true
+    },
+    nextVisitDate: {
+        type: [String, Date],
+        default: null
+    }
+})
+
+const selectedAddressIdx = defineModel('selectedAddressIdx')
+
+const addressOptions = computed(() => {
+    return props.client.addresses.map((addr, index) => ({
+        label: addr.fullAddress,
+        value: index
+    }))
+})
+
+const primaryContact = computed(() => {
+    const contactName = props.client.addresses[selectedAddressIdx.value]?.customContactName
+    return props.client.contacts.find(contact => contact.name === contactName) || {}
+})
+
+const formatDate = (date) => {
+    // Assuming date is a string or Date object, format as needed
+    return new Date(date).toLocaleDateString()
+}
+</script>
+
+<style lang="scss" scoped>
+.top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    background: linear-gradient(135deg, #0d4f3c 0%, #1a5f4a 100%);
+    color: #fff;
+    border-bottom: 1px solid #2d5a47;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    min-height: 50px;
+}
+
+.address-section {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 200px;
+}
+
+.section-label {
+    font-weight: 500;
+    color: #adb5bd;
+    white-space: nowrap;
+    font-size: 0.85rem;
+}
+
+.address-dropdown {
+    flex: 1;
+    min-width: 150px;
+}
+
+.contact-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 1;
+    text-align: center;
+}
+
+.contact-info {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-size: 0.8rem;
+    color: #fff;
+}
+
+.customer-name {
+    font-size: 0.75rem;
+    color: #adb5bd;
+    font-weight: 500;
+}
+
+.customer-label {
+    font-weight: 600;
+    color: #fff;
+}
+
+.visit-section {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 500;
+    font-size: 0.8rem;
+    background: #495057;
+    padding: 0.25rem 0.5rem;
+    border-radius: 10px;
+    white-space: nowrap;
+    color: #fff;
+}
+
+@media (max-width: 768px) {
+    .top-bar {
+        flex-direction: column;
+        align-items: stretch;
+        padding: 0.5rem;
+        min-height: auto;
+    }
+
+    .address-section {
+        justify-content: center;
+    }
+
+    .contact-section {
+        align-items: center;
+    }
+
+    .contact-info {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .visit-section {
+        justify-content: center;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 4b7b151..216c7a6 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -237,6 +237,7 @@
 		dataKey="id"
 		:loading="loading"
 		:loadingIcon="loadingIcon"
+		@row-click="$emit('row-click', $event)"
 	>
 		<template #empty>
 			<div class="text-center py-6">
@@ -475,6 +476,7 @@ const props = defineProps({
 
 const emit = defineEmits([
 	"rowClick",
+	"row-click",
 	"lazy-load",
 	"page-change",
 	"sort-change",
diff --git a/frontend/src/components/pages/Calendar.vue b/frontend/src/components/pages/Calendar.vue
index 4970158..f9371c8 100644
--- a/frontend/src/components/pages/Calendar.vue
+++ b/frontend/src/components/pages/Calendar.vue
@@ -1,1175 +1,10 @@
 <template>
-	<div class="calendar-container">
-		<div class="calendar-header">
-			<h2>Daily Schedule - Sprinkler Service</h2>
-			<div class="header-controls">
-				<v-btn
-					@click="previousDay"
-					icon="mdi-chevron-left"
-					variant="outlined"
-					size="small"
-				></v-btn>
-				<v-btn
-					@click="showDatePicker = true"
-					variant="text"
-					class="day-display-btn"
-				>
-					<span class="date-text">{{ dayDisplayText }}</span>
-					<v-icon right size="small">mdi-calendar</v-icon>
-				</v-btn>
-				<v-btn
-					@click="nextDay"
-					icon="mdi-chevron-right"
-					variant="outlined"
-					size="small"
-				></v-btn>
-				<v-btn @click="goToToday" variant="outlined" size="small" class="ml-4"
-					>Today</v-btn
-				>
-				<v-menu
-					v-model="showForemenMenu"
-					:close-on-content-click="false"
-					location="bottom"
-				>
-					<template v-slot:activator="{ props }">
-						<v-btn
-							v-bind="props"
-							variant="outlined"
-							size="small"
-							class="ml-4"
-						>
-							<v-icon left size="small">mdi-account-group</v-icon>
-							Foremen ({{ selectedForemen.length }})
-							<v-icon right size="small">mdi-chevron-down</v-icon>
-						</v-btn>
-					</template>
-					<v-card min-width="250" max-width="300">
-						<v-card-title class="text-subtitle-1 py-2">
-							Select Foremen
-						</v-card-title>
-						<v-divider></v-divider>
-						<v-card-text class="pa-2">
-							<v-list density="compact">
-								<v-list-item @click="toggleAllForemen">
-									<template v-slot:prepend>
-										<v-checkbox-btn
-											:model-value="selectedForemen.length === foremen.length"
-											:indeterminate="selectedForemen.length > 0 && selectedForemen.length < foremen.length"
-										></v-checkbox-btn>
-									</template>
-									<v-list-item-title>Select All</v-list-item-title>
-								</v-list-item>
-								<v-divider></v-divider>
-								<v-list-item
-									v-for="foreman in foremen"
-									:key="foreman.id"
-									@click="toggleForeman(foreman.id)"
-								>
-									<template v-slot:prepend>
-										<v-checkbox-btn
-											:model-value="selectedForemen.includes(foreman.id)"
-										></v-checkbox-btn>
-									</template>
-									<v-list-item-title>{{ foreman.name }}</v-list-item-title>
-								</v-list-item>
-							</v-list>
-						</v-card-text>
-					</v-card>
-				</v-menu>
-			</div>
-		</div>
-
-		<!-- Date Picker Dialog -->
-		<v-dialog v-model="showDatePicker" max-width="400px">
-			<v-card>
-				<v-card-title>Select Date</v-card-title>
-				<v-card-text>
-					<v-date-picker
-						v-model="selectedDate"
-						@update:model-value="onDateSelected"
-						full-width
-					></v-date-picker>
-				</v-card-text>
-				<v-card-actions>
-					<v-spacer></v-spacer>
-					<v-btn @click="showDatePicker = false">Cancel</v-btn>
-				</v-card-actions>
-			</v-card>
-		</v-dialog>
-
-		<div class="calendar-main">
-			<!-- Daily Calendar Grid -->
-			<div class="calendar-section">
-				<div class="daily-calendar">
-					<!-- Foremen Header -->
-					<div class="calendar-header-row" :style="{ gridTemplateColumns: `80px repeat(${visibleForemen.length}, 1fr)` }">
-						<div class="time-column-header">Time</div>
-						<div
-							v-for="foreman in visibleForemen"
-							:key="foreman.id"
-							class="foreman-header"
-						>
-							<div class="foreman-name">{{ foreman.name }}</div>
-							<div class="foreman-jobs">{{ getJobsCountForForeman(foreman.name) }} jobs</div>
-						</div>
-					</div>
-
-					<!-- Time Grid -->
-					<div class="calendar-grid">
-						<div v-for="timeSlot in timeSlots" :key="timeSlot.time" class="time-row" :style="{ gridTemplateColumns: `80px repeat(${visibleForemen.length}, 1fr)` }">
-							<!-- Time Column -->
-							<div class="time-column">
-								<span class="time-label">{{ timeSlot.display }}</span>
-							</div>
-
-							<!-- Foreman Columns -->
-							<div
-								v-for="foreman in visibleForemen"
-								:key="`${foreman.id}-${timeSlot.time}`"
-								class="foreman-column"
-								:class="{
-									'current-time': isCurrentTimeSlot(currentDate, timeSlot.time),
-									'drag-over': isDragOver && dragOverSlot?.foremanId === foreman.id && dragOverSlot?.time === timeSlot.time && !dragOverSlot?.isOccupied,
-									'drag-over-occupied': isDragOver && dragOverSlot?.foremanId === foreman.id && dragOverSlot?.time === timeSlot.time && dragOverSlot?.isOccupied,
-									'drag-preview': isDragOver && isInPreviewSlots(foreman.id, timeSlot.time),
-								}"
-								@click="selectTimeSlot(foreman.id, timeSlot.time)"
-								@dragover="handleDragOver($event, foreman.id, timeSlot.time)"
-								@dragleave="handleDragLeave"
-								@drop="handleDrop($event, foreman.id, timeSlot.time)"
-							>
-								<!-- Events in this time slot -->
-								<div
-									v-for="event in getEventsForTimeSlot(foreman.name, timeSlot.time, currentDate)"
-									:key="event.id"
-									class="calendar-event"
-									:class="getPriorityClass(event.priority)"
-									:style="getEventStyle(event)"
-									draggable="true"
-									@click.stop="showEventDetails({ event })"
-									@dragstart="handleDragStart(event, $event)"
-									@dragend="handleDragEnd"
-									@dragover.stop.prevent
-									@dragenter.stop.prevent
-								>
-									<div class="event-title">{{ event.serviceType }}</div>
-									<div class="event-customer">{{ event.customer }}</div>
-									<div class="event-time-display">{{ formatTimeDisplay(event.scheduledTime) }}</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Unscheduled Services Column -->
-			<div class="unscheduled-section">
-				<div class="unscheduled-header">
-					<h4>Unscheduled Services</h4>
-					<v-chip
-						:color="getUnscheduledCount() > 0 ? 'warning' : 'success'"
-						size="small"
-					>
-						{{ getUnscheduledCount() }} pending
-					</v-chip>
-				</div>
-
-				<div 
-					class="unscheduled-list"
-					:class="{ 'unscheduled-drop-zone': isDragOver && draggedService?.status === 'scheduled' }"
-					@dragover="handleUnscheduledDragOver"
-					@dragleave="handleUnscheduledDragLeave"
-					@drop="handleUnscheduledDrop"
-				>
-					<v-card
-						v-for="service in unscheduledServices"
-						:key="service.id"
-						class="unscheduled-item mb-2"
-						:class="getPriorityClass(service.priority)"
-						elevation="1"
-						hover
-						density="compact"
-						draggable="true"
-						@dragstart="handleDragStart(service, $event)"
-						@dragend="handleDragEnd"
-					>
-						<v-card-text class="pa-3">
-							<div class="d-flex justify-space-between align-center mb-2">
-								<v-chip :color="getPriorityColor(service.priority)" size="x-small">
-									{{ service.priority.toUpperCase() }}
-								</v-chip>
-								<span class="text-caption text-medium-emphasis"
-									>${{ service.estimatedCost.toLocaleString() }}</span
-								>
-							</div>
-
-							<div class="service-title-compact">{{ service.serviceType }}</div>
-							<div class="service-customer">{{ service.customer }}</div>
-
-							<div class="service-compact-details mt-1">
-								<div class="text-caption">
-									<v-icon size="x-small" class="mr-1">mdi-clock</v-icon>
-									{{ formatDuration(service.duration) }}
-								</div>
-							</div>
-
-							<div v-if="service.notes" class="service-notes-compact mt-2">
-								<span class="text-caption">{{ service.notes }}</span>
-							</div>
-
-							<v-btn
-								color="primary"
-								size="x-small"
-								variant="outlined"
-								class="mt-2"
-								block
-								@click="scheduleService(service)"
-							>
-								<v-icon left size="x-small">mdi-calendar-plus</v-icon>
-								Schedule
-							</v-btn>
-						</v-card-text>
-					</v-card>
-				</div>
-
-				<div v-if="unscheduledServices.length === 0" class="no-unscheduled">
-					<v-icon size="large" color="success">mdi-check-circle</v-icon>
-					<p class="text-body-2">All services scheduled!</p>
-				</div>
-			</div>
-		</div>
-
-		<!-- Event Details Dialog -->
-		<v-dialog v-model="eventDialog" max-width="600px">
-			<v-card v-if="selectedEvent">
-				<v-card-title class="d-flex justify-space-between align-center">
-					<span>{{ selectedEvent.title }}</span>
-					<v-chip :color="getPriorityColor(selectedEvent.priority)" small>
-						{{ selectedEvent.priority.toUpperCase() }}
-					</v-chip>
-				</v-card-title>
-
-				<v-card-text>
-					<div class="event-details">
-						<div class="detail-row">
-							<v-icon class="mr-2">mdi-account</v-icon>
-							<strong>Customer:</strong> {{ selectedEvent.customer }}
-						</div>
-						<div class="detail-row">
-							<v-icon class="mr-2">mdi-map-marker</v-icon>
-							<strong>Address:</strong> {{ selectedEvent.address }}
-						</div>
-						<div class="detail-row">
-							<v-icon class="mr-2">mdi-wrench</v-icon>
-							<strong>Service Type:</strong> {{ selectedEvent.serviceType }}
-						</div>
-						<div class="detail-row">
-							<v-icon class="mr-2">mdi-calendar</v-icon>
-							<strong>Date:</strong> {{ selectedEvent.scheduledDate }}
-						</div>
-						<div class="detail-row">
-							<v-icon class="mr-2">mdi-clock</v-icon>
-							<strong>Time:</strong> {{ selectedEvent.scheduledTime }} ({{
-								formatDuration(selectedEvent.duration)
-							}})
-						</div>
-						<div class="detail-row">
-							<v-icon class="mr-2">mdi-account-hard-hat</v-icon>
-							<strong>Foreman:</strong> {{ selectedEvent.foreman || "Not assigned" }}
-						</div>
-						<div class="detail-row">
-							<v-icon class="mr-2">mdi-account-group</v-icon>
-							<strong>Crew:</strong>
-							{{ selectedEvent.crew?.join(", ") || "Not assigned" }}
-						</div>
-						<div class="detail-row">
-							<v-icon class="mr-2">mdi-currency-usd</v-icon>
-							<strong>Estimated Cost:</strong> ${{
-								selectedEvent.estimatedCost.toLocaleString()
-							}}
-						</div>
-						<div v-if="selectedEvent.notes" class="detail-row">
-							<v-icon class="mr-2">mdi-note-text</v-icon>
-							<strong>Notes:</strong> {{ selectedEvent.notes }}
-						</div>
-					</div>
-				</v-card-text>
-
-				<v-card-actions>
-					<v-spacer></v-spacer>
-					<v-btn color="primary" @click="eventDialog = false">Close</v-btn>
-				</v-card-actions>
-			</v-card>
-		</v-dialog>
-	</div>
+	<CalendarNavigation />
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from "vue";
-import Api from "../../api";
-import { useNotificationStore } from "../../stores/notifications-primevue";
-
-const notifications = useNotificationStore();
-
-// Reactive data
-const services = ref([]);
-const currentDate = ref("2025-10-25");
-const eventDialog = ref(false);
-const selectedEvent = ref(null);
-
-// Drag and drop state
-const draggedService = ref(null);
-const isDragOver = ref(false);
-const dragOverSlot = ref(null);
-const previewSlots = ref([]);
-
-// Foremen data
-const foremen = ref([
-	{ id: 1, name: "Mike Thompson" },
-	{ id: 2, name: "Sarah Johnson" },
-	{ id: 3, name: "David Martinez" },
-	{ id: 4, name: "Chris Wilson" },
-	{ id: 5, name: "Lisa Anderson" },
-	{ id: 6, name: "Robert Thomas" },
-	{ id: 7, name: "Maria White" },
-	{ id: 8, name: "James Clark" },
-	{ id: 9, name: "Patricia Lewis" },
-	{ id: 10, name: "Kevin Walker" },
-]);
-
-// Foremen selection
-const selectedForemen = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // Default to all selected
-const showForemenMenu = ref(false);
-
-// Date picker
-const showDatePicker = ref(false);
-const selectedDate = ref(null);
-
-// Computed properties
-const scheduledServices = computed(() =>
-	services.value.filter((service) => service.status === "scheduled"),
-);
-
-const unscheduledServices = computed(() =>
-	services.value.filter((service) => service.status === "unscheduled"),
-);
-
-// Daily calendar computed properties
-const dayDisplayText = computed(() => {
-	const date = new Date(currentDate.value);
-	return date.toLocaleDateString("en-US", { 
-		weekday: "long", 
-		year: "numeric", 
-		month: "long", 
-		day: "numeric" 
-	});
-});
-
-// Foremen computed properties
-const foremenOptions = computed(() => {
-	return foremen.value.map(foreman => ({
-		id: foreman.id,
-		name: foreman.name
-	}));
-});
-
-const visibleForemen = computed(() => {
-	return foremen.value.filter(foreman => selectedForemen.value.includes(foreman.id));
-});
-
-const timeSlots = computed(() => {
-	const slots = [];
-	for (let hour = 7; hour < 19; hour++) {
-		// 7 AM to 7 PM
-		for (let minute = 0; minute < 60; minute += 30) {
-			// 30-minute intervals
-			const time = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
-			const displayHour = hour > 12 ? hour - 12 : hour === 0 ? 12 : hour;
-			const ampm = hour >= 12 ? "PM" : "AM";
-			const display =
-				minute === 0 ? `${displayHour}:00 ${ampm}` : `${displayHour}:30 ${ampm}`;
-
-			slots.push({
-				time,
-				display: minute === 0 ? display : "", // Only show hour labels on the hour
-				isHour: minute === 0,
-			});
-		}
-	}
-	return slots;
-});
-
-// Methods
-const getUnscheduledCount = () => unscheduledServices.value.length;
-
-const getPriorityClass = (priority) => {
-	switch (priority) {
-		case "urgent":
-			return "priority-urgent";
-		case "high":
-			return "priority-high";
-		case "medium":
-			return "priority-medium";
-		case "low":
-			return "priority-low";
-		default:
-			return "";
-	}
-};
-
-const getPriorityColor = (priority) => {
-	switch (priority) {
-		case "urgent":
-			return "red";
-		case "high":
-			return "orange";
-		case "medium":
-			return "yellow";
-		case "low":
-			return "green";
-		default:
-			return "grey";
-	}
-};
-
-const formatDuration = (minutes) => {
-	const hours = Math.floor(minutes / 60);
-	const mins = minutes % 60;
-	if (hours === 0) return `${mins}m`;
-	if (mins === 0) return `${hours}h`;
-	return `${hours}h ${mins}m`;
-};
-
-const getEndTime = (startTime, durationMinutes) => {
-	const [hours, minutes] = startTime.split(":").map(Number);
-	const startDate = new Date();
-	startDate.setHours(hours, minutes, 0, 0);
-	const endDate = new Date(startDate.getTime() + durationMinutes * 60000);
-	return endDate.toTimeString().slice(0, 5);
-};
-
-// Check if a time slot has any conflicts with existing events for a specific foreman
-const isTimeSlotOccupied = (foremanName, startTime, durationMinutes, excludeServiceId = null) => {
-	const endTime = getEndTime(startTime, durationMinutes);
-	
-	return scheduledServices.value.some((service) => {
-		// Exclude the service being moved
-		if (excludeServiceId && service.id === excludeServiceId) return false;
-		
-		// Check if this service is for the same foreman and date
-		if (service.foreman !== foremanName || service.scheduledDate !== currentDate.value) return false;
-		
-		const serviceEndTime = getEndTime(service.scheduledTime, service.duration);
-		
-		// Check for time overlap
-		return (
-			(startTime >= service.scheduledTime && startTime < serviceEndTime) ||
-			(endTime > service.scheduledTime && endTime <= serviceEndTime) ||
-			(startTime <= service.scheduledTime && endTime >= serviceEndTime)
-		);
-	});
-};
-
-// Get all time slots that would be occupied by an event for a specific foreman
-const getOccupiedSlots = (foremanId, startTime, durationMinutes) => {
-	const slots = [];
-	const endTime = getEndTime(startTime, durationMinutes);
-	
-	// Generate all 30-minute slots between start and end time
-	let currentTime = startTime;
-	while (currentTime < endTime) {
-		slots.push({ foremanId, time: currentTime });
-		
-		// Add 30 minutes
-		const [hours, minutes] = currentTime.split(':').map(Number);
-		const nextMinutes = minutes + 30;
-		const nextHours = hours + Math.floor(nextMinutes / 60);
-		const finalMinutes = nextMinutes % 60;
-		
-		currentTime = `${nextHours.toString().padStart(2, '0')}:${finalMinutes.toString().padStart(2, '0')}`;
-		
-		// Safety check to prevent infinite loop
-		if (nextHours >= 24) break;
-	}
-	
-	return slots;
-};
-
-// Calendar navigation methods
-const previousDay = () => {
-	const date = new Date(currentDate.value);
-	date.setDate(date.getDate() - 1);
-	currentDate.value = date.toISOString().split("T")[0];
-};
-
-const nextDay = () => {
-	const date = new Date(currentDate.value);
-	date.setDate(date.getDate() + 1);
-	currentDate.value = date.toISOString().split("T")[0];
-};
-
-const goToToday = () => {
-	const today = new Date();
-	currentDate.value = today.toISOString().split("T")[0];
-};
-
-// Event positioning and display methods
-const getEventsForTimeSlot = (foremanName, time, date) => {
-	return scheduledServices.value.filter((service) => {
-		if (service.scheduledDate !== date || service.foreman !== foremanName) return false;
-
-		// Only show the event in its starting time slot to prevent duplication
-		return service.scheduledTime === time;
-	});
-};
-
-const getJobsCountForForeman = (foremanName) => {
-	return scheduledServices.value.filter((service) => 
-		service.foreman === foremanName && service.scheduledDate === currentDate.value
-	).length;
-};
-
-const formatTimeDisplay = (time) => {
-	const [hours, minutes] = time.split(':').map(Number);
-	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
-	const ampm = hours >= 12 ? 'PM' : 'AM';
-	return `${displayHour}:${minutes.toString().padStart(2, '0')} ${ampm}`;
-};
-
-// Foremen selection methods
-const toggleAllForemen = () => {
-	if (selectedForemen.value.length === foremen.value.length) {
-		// Deselect all
-		selectedForemen.value = [];
-	} else {
-		// Select all
-		selectedForemen.value = foremen.value.map(f => f.id);
-	}
-};
-
-const toggleForeman = (foremanId) => {
-	const index = selectedForemen.value.indexOf(foremanId);
-	if (index > -1) {
-		selectedForemen.value.splice(index, 1);
-	} else {
-		selectedForemen.value.push(foremanId);
-	}
-};
-
-// Date picker methods
-const onDateSelected = (date) => {
-	if (date) {
-		const dateObj = Array.isArray(date) ? date[0] : date;
-		currentDate.value = dateObj.toISOString().split('T')[0];
-		showDatePicker.value = false;
-	}
-};
-
-const getEventStyle = (event) => {
-	const duration = event.duration;
-	const slots = Math.ceil(duration / 30); // 30-minute slots
-	const height = Math.min(slots * 40 - 4, 200); // Max height to prevent overflow
-
-	return {
-		height: `${height}px`,
-		minHeight: "36px",
-	};
-};
-
-const isCurrentTimeSlot = (date, time) => {
-	const now = new Date();
-	const today = now.toISOString().split("T")[0];
-	const currentTime = `${now.getHours().toString().padStart(2, "0")}:${Math.floor(now.getMinutes() / 30) * 30}`;
-
-	return date === today && time === currentTime;
-};
-
-const selectTimeSlot = (foremanId, time) => {
-	console.log("Selected time slot:", foremanId, time);
-	// This will be used for drag-and-drop functionality
-};
-
-const isInPreviewSlots = (foremanId, time) => {
-	return previewSlots.value.some(slot => slot.foremanId === foremanId && slot.time === time);
-};
-
-const showEventDetails = (event) => {
-	selectedEvent.value = event.event;
-	eventDialog.value = true;
-};
-
-const scheduleService = (service) => {
-	// Placeholder for future drag-and-drop functionality
-	console.log("Scheduling service:", service);
-	// This will be implemented when drag-and-drop is added
-	alert(
-		`Scheduling functionality will be implemented in the future.\nService: ${service.title}`,
-	);
-};
-
-// Drag and Drop methods
-const handleDragStart = (service, event) => {
-	draggedService.value = service;
-	event.dataTransfer.effectAllowed = "move";
-	event.dataTransfer.setData("text/plain", service.id);
-	
-	// Get the dimensions of the dragged element
-	const dragElement = event.target;
-	const rect = dragElement.getBoundingClientRect();
-	
-	// Set the drag image offset to center the element horizontally and position cursor at top
-	const offsetX = rect.width / 2;
-	const offsetY = 10; // Position cursor near the top of the element
-	
-	try {
-		event.dataTransfer.setDragImage(dragElement, offsetX, offsetY);
-	} catch (e) {
-		// Fallback if setDragImage fails
-		console.log("Could not set custom drag image");
-	}
-	
-	// Add visual feedback
-	event.target.style.opacity = '0.5';
-	console.log("Drag started for service:", service.serviceType);
-};
-
-const handleDragEnd = (event) => {
-	// Reset visual feedback
-	event.target.style.opacity = '1';
-	draggedService.value = null;
-	isDragOver.value = false;
-	dragOverSlot.value = null;
-	previewSlots.value = [];
-};
-
-const handleDragOver = (event, foremanId, time) => {
-	event.preventDefault();
-	event.stopPropagation(); // Prevent event bubbling to avoid conflicts with nested elements
-	
-	if (!draggedService.value) return;
-	
-	// Get foreman name from ID - check both all foremen and visible foremen
-	const foreman = foremen.value.find(f => f.id === foremanId);
-	if (!foreman) return;
-	
-	// Check if the slot would be occupied (excluding the current service)
-	const isOccupied = isTimeSlotOccupied(foreman.name, time, draggedService.value.duration, draggedService.value.id);
-	
-	// Calculate which slots would be occupied by this event
-	const wouldOccupySlots = getOccupiedSlots(foremanId, time, draggedService.value.duration);
-	
-	event.dataTransfer.dropEffect = isOccupied ? "none" : "move";
-	
-	// Only update state if it's actually different to prevent flickering
-	const currentSlotKey = `${foremanId}-${time}`;
-	const previousSlotKey = dragOverSlot.value ? `${dragOverSlot.value.foremanId}-${dragOverSlot.value.time}` : null;
-	
-	if (currentSlotKey !== previousSlotKey || dragOverSlot.value?.isOccupied !== isOccupied) {
-		isDragOver.value = true;
-		dragOverSlot.value = { foremanId, time, isOccupied };
-		previewSlots.value = wouldOccupySlots;
-	}
-};
-
-const handleDragLeave = (event) => {
-	// Use a small delay to prevent flickering when moving between child elements
-	setTimeout(() => {
-		// Check if we're still dragging and if the mouse has actually left the calendar area
-		if (!draggedService.value) return;
-		
-		const calendarGrid = document.querySelector('.calendar-grid');
-		if (!calendarGrid) return;
-		
-		const rect = calendarGrid.getBoundingClientRect();
-		const x = event.clientX;
-		const y = event.clientY;
-		
-		// Only clear if mouse is outside the entire calendar grid
-		if (
-			x < rect.left ||
-			x > rect.right ||
-			y < rect.top ||
-			y > rect.bottom
-		) {
-			isDragOver.value = false;
-			dragOverSlot.value = null;
-			previewSlots.value = [];
-		}
-	}, 10);
-};
-
-const handleDrop = (event, foremanId, time) => {
-	event.preventDefault();
-	event.stopPropagation();
-	
-	if (!draggedService.value) return;
-	
-	// Get foreman name from ID
-	const foreman = foremen.value.find(f => f.id === foremanId);
-	if (!foreman) return;
-	
-	// Check if the slot is occupied (excluding the service being moved)
-	const isOccupied = isTimeSlotOccupied(foreman.name, time, draggedService.value.duration, draggedService.value.id);
-	
-	if (isOccupied) {
-		console.log("Cannot drop here - time slot is occupied");
-		// Reset drag state
-		isDragOver.value = false;
-		dragOverSlot.value = null;
-		previewSlots.value = [];
-		draggedService.value = null;
-		return;
-	}
-	
-	// Convert time to 12-hour format for display
-	const [hours, minutes] = time.split(':').map(Number);
-	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
-	const ampm = hours >= 12 ? 'PM' : 'AM';
-	const formattedTime = `${displayHour}:${minutes.toString().padStart(2, '0')} ${ampm}`;
-	
-	// Update the service with scheduling information
-	const serviceIndex = services.value.findIndex(s => s.id === draggedService.value.id);
-	if (serviceIndex !== -1) {
-		const wasScheduled = services.value[serviceIndex].status === 'scheduled';
-		services.value[serviceIndex] = {
-			...services.value[serviceIndex],
-			status: 'scheduled',
-			scheduledDate: currentDate.value,
-			scheduledTime: time,
-			scheduledTimeDisplay: formattedTime,
-			foreman: foreman.name
-		};
-		
-		const action = wasScheduled ? 'Moved' : 'Scheduled';
-		console.log(`${action} ${draggedService.value.serviceType} for ${foreman.name} on ${currentDate.value} at ${formattedTime}`);
-	}
-	
-	// Reset drag state
-	isDragOver.value = false;
-	dragOverSlot.value = null;
-	previewSlots.value = [];
-	draggedService.value = null;
-};
-
-// Handle dropping scheduled items back to unscheduled
-const handleUnscheduledDragOver = (event) => {
-	if (draggedService.value?.status === 'scheduled') {
-		event.preventDefault();
-		event.dataTransfer.dropEffect = "move";
-	}
-};
-
-const handleUnscheduledDragLeave = (event) => {
-	// Visual feedback will be handled by CSS
-};
-
-const handleUnscheduledDrop = (event) => {
-	event.preventDefault();
-	
-	if (!draggedService.value || draggedService.value.status !== 'scheduled') return;
-	
-	// Update the service to unscheduled status
-	const serviceIndex = services.value.findIndex(s => s.id === draggedService.value.id);
-	if (serviceIndex !== -1) {
-		services.value[serviceIndex] = {
-			...services.value[serviceIndex],
-			status: 'unscheduled',
-			scheduledDate: null,
-			scheduledTime: null,
-			scheduledTimeDisplay: null
-		};
-		
-		console.log(`Unscheduled ${draggedService.value.serviceType}`);
-	}
-	
-	// Reset drag state
-	isDragOver.value = false;
-	dragOverSlot.value = null;
-	previewSlots.value = [];
-	draggedService.value = null;
-};
-
-// Lifecycle
-onMounted(async () => {
-	notifications.addWarning("Calendar is currently in development. Many features are placeholders. UPDATES COMING SOON!");
-	try {
-		const data = await Api.getServiceData();
-		services.value = data;
-		console.log("Loaded services:", data);
-	} catch (error) {
-		console.error("Error loading services:", error);
-	}
-});
+import CalendarNavigation from '@/components/calendar/CalendarNavigation.vue'
 </script>
 
 <style scoped>
-.calendar-container {
-	padding: 20px;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-}
-
-.calendar-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 20px;
-	padding-bottom: 15px;
-	border-bottom: 1px solid #e0e0e0;
-}
-
-.header-controls {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-}
-
-.day-display-btn {
-	font-weight: 600;
-	font-size: 1.1em;
-	color: #1976d2 !important;
-	text-transform: none;
-	letter-spacing: normal;
-	min-width: 320px;
-	max-width: 320px;
-}
-
-.day-display-btn:hover {
-	background-color: rgba(25, 118, 210, 0.08);
-}
-
-.date-text {
-	display: inline-block;
-	text-align: center;
-	width: 100%;
-}
-
-.calendar-main {
-	display: flex;
-	gap: 20px;
-	flex: 1;
-	overflow: hidden;
-}
-
-.calendar-section {
-	flex: 1;
-	overflow: auto;
-}
-
-.daily-calendar {
-	min-width: 800px;
-	background: white;
-	border-radius: 8px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-	overflow-x: auto;
-}
-
-.calendar-header-row {
-	display: grid;
-	border-bottom: 2px solid #e0e0e0;
-	background-color: #f8f9fa;
-}
-
-.time-column-header {
-	padding: 16px 8px;
-	font-weight: 600;
-	text-align: center;
-	border-right: 1px solid #e0e0e0;
-	color: #666;
-}
-
-.foreman-header {
-	padding: 12px 8px;
-	text-align: center;
-	border-right: 1px solid #e0e0e0;
-	cursor: pointer;
-	transition: background-color 0.2s;
-}
-
-.foreman-header:hover {
-	background-color: #f0f0f0;
-}
-
-.foreman-name {
-	font-weight: 600;
-	font-size: 0.9em;
-	margin-bottom: 4px;
-	color: #1976d2;
-}
-
-.foreman-jobs {
-	font-size: 0.75em;
-	color: #666;
-	font-weight: 500;
-}
-
-.calendar-grid {
-	display: flex;
-	flex-direction: column;
-}
-
-.time-row {
-	display: grid;
-	min-height: 40px;
-	border-bottom: 1px solid #f0f0f0;
-}
-
-.time-row:nth-child(odd) {
-	background-color: #fafafa;
-}
-
-.time-column {
-	padding: 8px;
-	border-right: 1px solid #e0e0e0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: #f8f9fa;
-}
-
-.time-label {
-	font-size: 0.75em;
-	color: #666;
-	font-weight: 500;
-}
-
-.foreman-column {
-	border-right: 1px solid #e0e0e0;
-	position: relative;
-	cursor: pointer;
-	transition: background-color 0.2s;
-	min-height: 40px;
-}
-
-.foreman-column:hover {
-	background-color: #f0f8ff;
-}
-
-.foreman-column.current-time {
-	background-color: #fff3e0;
-}
-
-.foreman-column.drag-over {
-	background-color: #e8f5e8;
-	border: 2px dashed #4caf50;
-	box-sizing: border-box;
-}
-
-.foreman-column.drag-over-occupied {
-	background-color: #ffebee;
-	border: 2px dashed #f44336;
-	box-sizing: border-box;
-}
-
-.foreman-column.drag-preview {
-	background-color: #e3f2fd;
-	border: 1px solid #2196f3;
-	box-sizing: border-box;
-	opacity: 0.7;
-}
-
-.calendar-event {
-	position: absolute;
-	left: 2px;
-	right: 2px;
-	top: 2px;
-	background: linear-gradient(135deg, #2196f3, #1976d2);
-	color: white;
-	border-radius: 4px;
-	padding: 4px 6px;
-	font-size: 0.75em;
-	cursor: pointer;
-	overflow: hidden;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-	transition: all 0.2s;
-	z-index: 10;
-}
-
-.calendar-event:hover {
-	transform: scale(1.02);
-	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.calendar-event[draggable="true"] {
-	cursor: grab;
-}
-
-.calendar-event[draggable="true"]:active {
-	cursor: grabbing;
-}
-
-.calendar-event .event-title {
-	font-weight: 600;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	margin-bottom: 1px;
-}
-
-.calendar-event .event-customer {
-	font-size: 0.65em;
-	opacity: 0.9;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.calendar-event .event-time-display {
-	font-size: 0.6em;
-	opacity: 0.8;
-}
-
-.calendar-event.priority-urgent {
-	background: linear-gradient(135deg, #f44336, #d32f2f);
-}
-
-.calendar-event.priority-high {
-	background: linear-gradient(135deg, #ff9800, #f57c00);
-}
-
-.calendar-event.priority-medium {
-	background: linear-gradient(135deg, #2196f3, #1976d2);
-}
-
-.calendar-event.priority-low {
-	background: linear-gradient(135deg, #4caf50, #388e3c);
-}
-
-.unscheduled-section {
-	width: 280px;
-	border-left: 1px solid #e0e0e0;
-	padding-left: 16px;
-	display: flex;
-	flex-direction: column;
-}
-
-.unscheduled-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 12px;
-}
-
-.unscheduled-header h4 {
-	font-size: 1.1em;
-	margin: 0;
-}
-
-.unscheduled-list {
-	flex: 1;
-	overflow-y: auto;
-	max-height: calc(100vh - 200px);
-	transition: all 0.3s ease;
-	border-radius: 8px;
-}
-
-.unscheduled-list.unscheduled-drop-zone {
-	background-color: #e8f5e8;
-	border: 2px dashed #4caf50;
-	box-sizing: border-box;
-}
-
-.unscheduled-item {
-	border-left: 3px solid transparent;
-	transition: all 0.3s ease;
-}
-
-.unscheduled-item:hover {
-	transform: translateX(3px);
-}
-
-.unscheduled-item[draggable="true"] {
-	cursor: grab;
-}
-
-.unscheduled-item[draggable="true"]:active {
-	cursor: grabbing;
-}
-
-.priority-urgent {
-	border-left-color: #f44336 !important;
-}
-
-.priority-high {
-	border-left-color: #ff9800 !important;
-}
-
-.priority-medium {
-	border-left-color: #ffeb3b !important;
-}
-
-.priority-low {
-	border-left-color: #4caf50 !important;
-}
-
-.service-title-compact {
-	font-weight: 600;
-	font-size: 0.9em;
-	color: #1976d2;
-	line-height: 1.2;
-}
-
-.service-customer {
-	font-size: 0.8em;
-	color: #666;
-	margin-top: 2px;
-}
-
-.service-compact-details {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.service-notes-compact {
-	background-color: #f8f9fa;
-	padding: 4px 6px;
-	border-radius: 3px;
-	border-left: 2px solid #2196f3;
-}
-
-.service-notes-compact .text-caption {
-	font-style: italic;
-	color: #666;
-	line-height: 1.3;
-}
-
-.no-unscheduled {
-	text-align: center;
-	padding: 40px 20px;
-	color: #666;
-}
-
-.event-details {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-}
-
-.detail-row {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-
-
-
-
-/* Responsive design */
-@media (max-width: 768px) {
-	.calendar-main {
-		flex-direction: column;
-	}
-
-	.unscheduled-section {
-		width: 100%;
-		border-left: none;
-		border-top: 1px solid #e0e0e0;
-		padding-left: 0;
-		padding-top: 20px;
-		max-height: 400px;
-	}
-}
 </style>
diff --git a/frontend/src/components/pages/Client.vue b/frontend/src/components/pages/Client.vue
index 3e5ae71..1a30421 100644
--- a/frontend/src/components/pages/Client.vue
+++ b/frontend/src/components/pages/Client.vue
@@ -1,22 +1,8 @@
 <template>
 	<div class="client-page">
 		<!-- Client Header -->
-		<div class="client-header" v-if="client.customerName">
-			<div class="client-info">
-				<h2 class="client-name">{{ client.customerName }}</h2>
-				<div class="address-section" v-if="addresses.length > 0">
-					<label class="address-label">Address:</label>
-					<Select
-						v-if="addresses.length > 1"
-						v-model="selectedAddress"
-						:options="addresses"
-						class="address-dropdown"
-						placeholder="Select an address"
-					/>
-					<span v-else class="single-address">{{ addresses[0] }}</span>
-				</div>
-			</div>
-		</div>
+		<TopBar :selectedAddressIdx="selectedAddressIdx" :client="client" :nextVisitDate="nextVisitDate" v-if="client.customerName" @update:selectedAddressIdx="selectedAddressIdx = $event" />
+		<AdditionalInfoBar :address="client.addresses[selectedAddressIdx]" v-if="client.customerName" />
 
 		<Tabs value="0">
 			<TabList>
@@ -53,7 +39,6 @@ import TabList from "primevue/tablist";
 import Tab from "primevue/tab";
 import TabPanels from "primevue/tabpanels";
 import TabPanel from "primevue/tabpanel";
-import Select from "primevue/select";
 import Api from "../../api";
 import { useRoute } from "vue-router";
 import { useLoadingStore } from "../../stores/loading";
@@ -61,6 +46,8 @@ import { useNotificationStore } from "../../stores/notifications-primevue";
 import DataUtils from "../../utils";
 import Overview from "../clientSubPages/Overview.vue";
 import ProjectStatus from "../clientSubPages/ProjectStatus.vue";
+import TopBar from "../clientView/TopBar.vue";
+import AdditionalInfoBar from "../clientView/AdditionalInfoBar.vue";
 
 const route = useRoute();
 const loadingStore = useLoadingStore();
@@ -88,6 +75,17 @@ const addresses = computed(() => {
 	return [];
 });
 
+const nextVisitDate = ref(null); // Placeholder, update as needed
+
+const selectedAddressIdx = computed({
+	get: () => addresses.value.indexOf(selectedAddress.value),
+	set: (idx) => {
+		if (idx >= 0 && idx < addresses.value.length) {
+			selectedAddress.value = addresses.value[idx];
+		}
+	}
+});
+
 const getClientNames = async (type) => {
 	loadingStore.setLoading(true);
 	try {
@@ -181,53 +179,6 @@ watch(
 );
 </script>
 <style lang="css">
-.client-header {
-	background: var(--surface-card);
-	border-radius: 8px;
-	padding: 1.5rem;
-	margin-bottom: 1.5rem;
-	border: 1px solid var(--surface-border);
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.client-info {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-.client-name {
-	margin: 0;
-	color: var(--text-color);
-	font-size: 1.75rem;
-	font-weight: 600;
-}
-
-.address-section {
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	flex-wrap: wrap;
-}
-
-.address-label {
-	font-weight: 500;
-	color: var(--text-color-secondary);
-	min-width: 70px;
-}
-
-.address-dropdown {
-	min-width: 300px;
-	flex: 1;
-	max-width: 500px;
-}
-
-.single-address {
-	color: var(--text-color);
-	font-size: 0.95rem;
-	padding: 0.5rem 0;
-}
-
 .tab-info-alert {
 	background-color: #a95e46;
 	border-radius: 10px;
@@ -237,25 +188,4 @@ watch(
 	padding-top: 2px;
 	padding-bottom: 2px;
 }
-
-@media (max-width: 768px) {
-	.client-info {
-		gap: 0.75rem;
-	}
-
-	.client-name {
-		font-size: 1.5rem;
-	}
-
-	.address-section {
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 0.5rem;
-	}
-
-	.address-dropdown {
-		min-width: 100%;
-		max-width: 100%;
-	}
-}
 </style>
diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
index 0da91c0..653e842 100644
--- a/frontend/src/components/pages/Clients.vue
+++ b/frontend/src/components/pages/Clients.vue
@@ -21,6 +21,7 @@
 			:totalRecords="totalRecords"
 			:loading="isLoading"
 			@lazy-load="handleLazyLoad"
+			@row-click="handleRowClick"
 		/>
 	</div>
 </template>
@@ -121,7 +122,7 @@ const columns = [
 		filterInputId: "customerSearchInput",
 	},
 	{
-		label: "Address",
+		label: "Property",
 		fieldName: "address",
 		type: "text",
 		sortable: true,
@@ -181,20 +182,6 @@ const tableActions = [
 		},
 		// Global action - always available
 	},
-	{
-		label: "View Details",
-		action: (rowData) => {
-			router.push(`/client?client=${rowData.customerName}&address=${rowData.address}`);
-		},
-		type: "button",
-		style: "info",
-		icon: "pi pi-eye",
-		requiresSelection: true, // Single selection action - appears above table, enabled when exactly one row selected
-		layout: {
-			position: "center",
-			variant: "outlined",
-		},
-	},
 	// {
 	// 	label: "Export Selected",
 	// 	action: (selectedRows) => {
@@ -338,6 +325,12 @@ watch(
 	{ deep: true },
 );
 
+// Handle row click to navigate to client details
+const handleRowClick = (event) => {
+	const rowData = event.data;
+	router.push(`/client?client=${rowData.customerName}&address=${rowData.address}`);
+};
+
 onMounted(async () => {
 	// if lookup has a value (it will either be "customer" or "property", put focus onto the appropriate search input)
 	if (lookup) {
diff --git a/frontend/src/components/pages/Create.vue b/frontend/src/components/pages/Create.vue
deleted file mode 100644
index 86a5a1a..0000000
--- a/frontend/src/components/pages/Create.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-	<div>
-		<h2>Create Page</h2>
-	</div>
-</template>
-<script>
-export default {};
-</script>
-<style lang=""></style>
diff --git a/frontend/src/components/pages/ErrorHandlingDemo.vue b/frontend/src/components/pages/ErrorHandlingDemo.vue
deleted file mode 100644
index 33acc3f..0000000
--- a/frontend/src/components/pages/ErrorHandlingDemo.vue
+++ /dev/null
@@ -1,664 +0,0 @@
-<template>
-	<div class="error-handling-example">
-		<h3>PrimeVue Toast Error Handling Demo</h3>
-
-		<!-- Error Display Section -->
-		<div class="error-section" v-if="errorStore.hasAnyError">
-			<h4>Current Component Errors (for debugging):</h4>
-			<div class="error-list">
-				<div v-if="errorStore.lastError" class="error-item global-error">
-					<strong>Global Error:</strong> {{ errorStore.lastError.message }}
-					<button @click="errorStore.clearGlobalError()" class="clear-btn">Clear</button>
-				</div>
-
-				<div
-					v-for="(error, component) in errorStore.componentErrors"
-					:key="component"
-					v-if="error"
-					class="error-item component-error"
-				>
-					<strong>{{ component }} Error:</strong> {{ error.message }}
-					<button @click="errorStore.clearComponentError(component)" class="clear-btn">
-						Clear
-					</button>
-				</div>
-			</div>
-		</div>
-
-		<!-- Demo Buttons -->
-		<div class="demo-section">
-			<h4>Test PrimeVue Toast Notifications:</h4>
-			<div class="button-group">
-				<Button
-					@click="testSuccessfulApiCall"
-					label="Successful API Call"
-					class="p-button-success"
-					:loading="loadingStore.getComponentLoading('demo-success')"
-				/>
-
-				<Button
-					@click="testFailingApiCall"
-					label="Failing API Call"
-					class="p-button-danger"
-					:loading="loadingStore.getComponentLoading('demo-fail')"
-				/>
-
-				<Button
-					@click="testRetryApiCall"
-					label="API Call with Retry"
-					class="p-button-warning"
-					:loading="loadingStore.getComponentLoading('demo-retry')"
-				/>
-
-				<Button
-					@click="testDirectToasts"
-					label="Direct Toast Messages"
-					class="p-button-info"
-				/>
-			</div>
-
-			<div class="button-group">
-				<Button @click="testComponentError" label="Component Error" severity="secondary" />
-
-				<Button @click="testGlobalError" label="Global Error" severity="secondary" />
-
-				<Button @click="clearAllErrors" label="Clear All Errors" severity="secondary" />
-			</div>
-		</div>
-
-		<!-- Real API Demo with ApiWithToast -->
-		<div class="api-demo-section">
-			<h4>Real API Integration with ApiWithToast:</h4>
-			<div class="button-group">
-				<Button
-					@click="loadClientData"
-					label="Load Client Data"
-					class="p-button-primary"
-					:loading="loadingStore.getComponentLoading('clients')"
-				/>
-
-				<Button
-					@click="loadJobData"
-					label="Load Job Data"
-					class="p-button-primary"
-					:loading="loadingStore.getComponentLoading('jobs')"
-				/>
-
-				<Button
-					@click="createTestClient"
-					label="Create Test Client"
-					class="p-button-success"
-					:loading="loadingStore.getComponentLoading('form')"
-				/>
-			</div>
-
-			<div v-if="clientData.length > 0" class="data-preview">
-				<h5>Client Data ({{ clientData.length }} items):</h5>
-				<pre>{{ JSON.stringify(clientData.slice(0, 2), null, 2) }}</pre>
-			</div>
-
-			<div v-if="clientStatusData" class="data-preview">
-				<h5>Client Status Counts:</h5>
-				<div class="status-grid">
-					<div
-						v-for="(count, status) in clientStatusData"
-						:key="status"
-						class="status-item"
-					>
-						<strong>{{ status }}:</strong> {{ count }}
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Error History -->
-		<div class="history-section">
-			<h4>Error History:</h4>
-			<Button
-				@click="showHistory = !showHistory"
-				:label="`${showHistory ? 'Hide' : 'Show'} History (${errorStore.errorHistory.length})`"
-				severity="secondary"
-			/>
-
-			<div v-if="errorStore.errorHistory.length === 0 && showHistory" class="no-history">
-				<p>
-					No errors in history yet. Try clicking the error buttons above to generate some
-					errors!
-				</p>
-			</div>
-
-			<!-- Debug info -->
-			<div v-if="showHistory" class="debug-info">
-				<p><strong>Debug Info:</strong></p>
-				<p>History array length: {{ errorStore.errorHistory.length }}</p>
-				<p>
-					Recent errors method returns: {{ errorStore.getRecentErrors(5).length }} items
-				</p>
-			</div>
-
-			<div v-if="showHistory && errorStore.errorHistory.length > 0" class="history-list">
-				<div
-					v-for="error in errorStore.getRecentErrors(5)"
-					:key="error.id"
-					class="history-item"
-				>
-					<div class="history-header">
-						<span class="error-type">{{ error.type }}</span>
-						<span class="error-source">{{ error.source }}</span>
-						<span class="error-time">{{ formatTime(error.timestamp) }}</span>
-					</div>
-					<div class="error-message">{{ error.message }}</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import Button from "primevue/button";
-import { useErrorStore } from "@/stores/errors";
-import { useLoadingStore } from "@/stores/loading";
-import ApiWithToast from "@/api-toast";
-
-const errorStore = useErrorStore();
-const loadingStore = useLoadingStore();
-
-const clientData = ref([]);
-const clientStatusData = ref(null);
-const showHistory = ref(false);
-
-// Test functions using ApiWithToast
-const testSuccessfulApiCall = async () => {
-	try {
-		await ApiWithToast.makeApiCall(
-			async () => {
-				await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
-				return { success: true };
-			},
-			{
-				componentName: "demo-success",
-				showSuccessToast: true,
-				successMessage: "API call completed successfully!",
-				loadingMessage: "Processing request...",
-			},
-		);
-	} catch (error) {
-		// Error toast shown automatically
-		console.log("Error was handled automatically");
-	}
-};
-
-const testFailingApiCall = async () => {
-	try {
-		await ApiWithToast.makeApiCall(
-			async () => {
-				await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
-				throw new Error("This is a simulated API failure for demo purposes");
-			},
-			{
-				componentName: "demo-fail",
-				showErrorToast: true,
-				customErrorMessage: "Demo API call failed as expected",
-				loadingMessage: "Attempting to fail...",
-			},
-		);
-	} catch (error) {
-		console.log("Error was handled by ApiWithToast");
-	}
-};
-
-const testRetryApiCall = async () => {
-	let attempts = 0;
-
-	try {
-		await ApiWithToast.makeApiCall(
-			async () => {
-				attempts++;
-				await new Promise((resolve) => setTimeout(resolve, 500));
-
-				if (attempts < 3) {
-					throw new Error(`Attempt ${attempts} failed - will retry`);
-				}
-
-				return { success: true, attempts };
-			},
-			{
-				componentName: "demo-retry",
-				retryCount: 2,
-				retryDelay: 1000,
-				showSuccessToast: true,
-				successMessage: `Success after ${attempts} attempts!`,
-				customErrorMessage: "All retry attempts failed",
-				loadingMessage: "Retrying operation...",
-			},
-		);
-	} catch (error) {
-		console.log("Retry test completed");
-	}
-};
-
-const testDirectToasts = () => {
-	// Test different toast types directly through error store
-	errorStore.setSuccess("This is a success message!");
-
-	setTimeout(() => {
-		errorStore.setInfo("This is an info message!");
-	}, 500);
-
-	setTimeout(() => {
-		errorStore.setWarning("This is a warning message!");
-	}, 1000);
-
-	setTimeout(() => {
-		errorStore.setGlobalError(new Error("This is an error message!"));
-	}, 1500);
-};
-
-const testComponentError = () => {
-	errorStore.setComponentError(
-		"demo-component",
-		new Error("This is a component-specific error"),
-	);
-	// Error notification will be shown automatically!
-};
-
-const testGlobalError = () => {
-	errorStore.setGlobalError(
-		new Error("This is a global error that affects the entire application"),
-	);
-	// Error notification will be shown automatically!
-};
-
-const clearAllErrors = () => {
-	errorStore.clearAllErrors();
-	errorStore.setSuccess("All errors cleared!");
-};
-
-// Real API integration using ApiWithToast
-const loadClientData = async () => {
-	try {
-		const result = await ApiWithToast.getPaginatedClientDetails(
-			{ page: 0, pageSize: 5 },
-			{},
-			[],
-			{
-				showSuccessToast: true,
-				successMessage: "Client data loaded successfully!",
-			},
-		);
-
-		clientData.value = result?.data || [];
-
-		// Also load client status counts
-		const statusResult = await ApiWithToast.getClientStatusCounts();
-		clientStatusData.value = statusResult;
-	} catch (error) {
-		console.log("Client data loading failed, but error was handled automatically");
-	}
-};
-
-const loadJobData = async () => {
-	try {
-		const result = await ApiWithToast.getPaginatedJobDetails(
-			{ page: 0, pageSize: 5 },
-			{},
-			[],
-			{
-				showSuccessToast: true,
-				successMessage: "Job data loaded successfully!",
-			},
-		);
-		console.log("Job data loaded:", result);
-	} catch (error) {
-		console.log("Job data loading failed, but error was handled automatically");
-	}
-};
-
-const createTestClient = async () => {
-	const testClient = {
-		customer_name: `Demo Client ${Date.now()}`,
-		mobile_no: "555-0199",
-		email: `demo${Date.now()}@example.com`,
-		status: "Active",
-	};
-
-	try {
-		await ApiWithToast.createClient(testClient);
-		// Success toast shown automatically
-		// Reload client data to show the change
-		await loadClientData();
-	} catch (error) {
-		console.log("Client creation failed, but error was handled automatically");
-	}
-};
-
-// Utility functions
-const formatTime = (timestamp) => {
-	return new Date(timestamp).toLocaleTimeString();
-};
-
-onMounted(() => {
-	// Show a welcome notification using the integrated error store
-	errorStore.setInfo(
-		"🎉 Error Store now automatically creates PrimeVue Toast notifications! No need to import both stores anymore.",
-		"Welcome",
-	);
-
-	// Add some sample errors to history for demonstration (without showing notifications)
-	setTimeout(() => {
-		errorStore.setComponentError(
-			"demo-component",
-			new Error("Sample component error from page load"),
-			false,
-		);
-		errorStore.setApiError(
-			"demo-api",
-			new Error("Sample API error from initialization"),
-			false,
-		);
-
-		// Clear the component errors so they don't show in the error section, but keep them in history
-		setTimeout(() => {
-			errorStore.clearComponentError("demo-component");
-			errorStore.clearApiError("demo-api");
-		}, 100);
-	}, 1000);
-});
-</script>
-
-<style scoped>
-.error-handling-example {
-	padding: 2rem;
-	max-width: 1200px;
-	margin: 0 auto;
-}
-
-.info-banner {
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	color: white;
-	border-radius: 12px;
-	padding: 2rem;
-	margin-bottom: 2rem;
-	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-}
-
-.info-banner h4 {
-	color: white;
-	margin-bottom: 1rem;
-	font-size: 1.5rem;
-}
-
-.info-banner p {
-	margin-bottom: 0.5rem;
-	font-size: 1rem;
-	line-height: 1.6;
-}
-
-.info-banner strong {
-	color: #ffd700;
-}
-
-.error-section {
-	background: var(--surface-card);
-	border: 1px solid var(--surface-border);
-	border-radius: 8px;
-	padding: 1rem;
-	margin-bottom: 2rem;
-	border-left: 4px solid var(--orange-500);
-}
-
-.error-list {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.error-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0.5rem;
-	border-radius: 4px;
-}
-
-.global-error {
-	background: #fee2e2;
-	border-left: 4px solid #ef4444;
-}
-
-.component-error {
-	background: #fef3c7;
-	border-left: 4px solid #f59e0b;
-}
-
-.demo-section,
-.api-demo-section,
-.history-section {
-	margin-bottom: 2rem;
-	background: var(--surface-card);
-	padding: 1.5rem;
-	border-radius: 8px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.button-group {
-	display: flex;
-	gap: 0.75rem;
-	flex-wrap: wrap;
-	margin-bottom: 1rem;
-}
-
-.btn {
-	padding: 0.5rem 1rem;
-	border: none;
-	border-radius: 6px;
-	cursor: pointer;
-	font-weight: 500;
-	transition: all 0.2s;
-}
-
-.btn:disabled {
-	opacity: 0.6;
-	cursor: not-allowed;
-}
-
-.btn.success {
-	background: #10b981;
-	color: white;
-}
-
-.btn.success:hover:not(:disabled) {
-	background: #059669;
-}
-
-.btn.error {
-	background: #ef4444;
-	color: white;
-}
-
-.btn.error:hover:not(:disabled) {
-	background: #dc2626;
-}
-
-.btn.warning {
-	background: #f59e0b;
-	color: white;
-}
-
-.btn.warning:hover:not(:disabled) {
-	background: #d97706;
-}
-
-.btn.info {
-	background: #3b82f6;
-	color: white;
-}
-
-.btn.info:hover:not(:disabled) {
-	background: #2563eb;
-}
-
-.btn.primary {
-	background: #6366f1;
-	color: white;
-}
-
-.btn.primary:hover:not(:disabled) {
-	background: #4f46e5;
-}
-
-.btn.secondary {
-	background: #6b7280;
-	color: white;
-}
-
-.btn.secondary:hover:not(:disabled) {
-	background: #4b5563;
-}
-
-.clear-btn {
-	background: #f3f4f6;
-	border: 1px solid #d1d5db;
-	padding: 0.25rem 0.5rem;
-	border-radius: 4px;
-	cursor: pointer;
-	font-size: 0.75rem;
-}
-
-.clear-btn:hover {
-	background: #e5e7eb;
-}
-
-.data-preview {
-	margin-top: 1rem;
-	padding: 1rem;
-	background: var(--surface-ground);
-	border-radius: 6px;
-	border: 1px solid var(--surface-border);
-}
-
-.data-preview pre {
-	margin: 0;
-	font-size: 0.75rem;
-	color: var(--text-color);
-	white-space: pre-wrap;
-}
-
-.status-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-	gap: 1rem;
-	margin-top: 1rem;
-}
-
-.status-item {
-	padding: 0.75rem;
-	background: var(--surface-card);
-	border: 1px solid var(--surface-border);
-	border-radius: 6px;
-	text-align: center;
-}
-
-.history-list {
-	margin-top: 1rem;
-}
-
-.history-item {
-	padding: 0.75rem;
-	border: 1px solid #e5e7eb;
-	border-radius: 6px;
-	margin-bottom: 0.5rem;
-	background: white;
-}
-
-.history-header {
-	display: flex;
-	gap: 1rem;
-	margin-bottom: 0.25rem;
-	font-size: 0.75rem;
-	color: #6b7280;
-}
-
-.error-type {
-	font-weight: 600;
-	text-transform: capitalize;
-}
-
-.error-source {
-	color: #3b82f6;
-}
-
-.error-message {
-	font-size: 0.875rem;
-	color: #374151;
-}
-
-h3,
-h4,
-h5 {
-	color: var(--text-color);
-	margin-bottom: 1rem;
-}
-
-h3 {
-	font-size: 1.75rem;
-	font-weight: 700;
-	text-align: center;
-	margin-bottom: 2rem;
-}
-
-h4 {
-	font-size: 1.25rem;
-	font-weight: 600;
-	color: var(--primary-color);
-}
-
-h5 {
-	font-size: 1rem;
-	font-weight: 500;
-	color: var(--text-color-secondary);
-}
-
-/* Keep some button styles for legacy buttons like clear-btn */
-.btn {
-	padding: 0.5rem 1rem;
-	border: none;
-	border-radius: 6px;
-	cursor: pointer;
-	font-weight: 500;
-	transition: all 0.2s;
-}
-
-.btn.secondary {
-	background: #6b7280;
-	color: white;
-}
-
-.btn.secondary:hover:not(:disabled) {
-	background: #4b5563;
-}
-
-.no-history {
-	margin-top: 1rem;
-	padding: 1rem;
-	background: var(--surface-ground);
-	border-radius: 6px;
-	color: var(--text-color-secondary);
-	text-align: center;
-	font-style: italic;
-}
-
-.debug-info {
-	margin-top: 1rem;
-	padding: 0.75rem;
-	background: var(--yellow-50);
-	border: 1px solid var(--yellow-200);
-	border-radius: 6px;
-	font-size: 0.875rem;
-}
-
-.debug-info p {
-	margin: 0.25rem 0;
-}
-</style>
diff --git a/frontend/src/components/pages/TestDateForm.vue b/frontend/src/components/pages/TestDateForm.vue
deleted file mode 100644
index 1865e34..0000000
--- a/frontend/src/components/pages/TestDateForm.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-	<div class="test-date-form">
-		<h2>Enhanced Date Picker Test</h2>
-		<p>This page demonstrates the enhanced date picker functionality in the Form component.</p>
-
-		<Form
-			:fields="dateFields"
-			:form-data="formData"
-			@submit="handleSubmit"
-			@change="handleFieldChange"
-			submit-button-text="Save Dates"
-		/>
-
-		<div v-if="Object.keys(formData).length" class="results mt-6">
-			<h3>Current Form Values:</h3>
-			<div class="results-grid">
-				<div v-for="(value, key) in formData" :key="key" class="result-item">
-					<strong>{{ formatFieldLabel(key) }}:</strong>
-					<span v-if="value instanceof Date" class="date-value">
-						{{ formatDateValue(key, value) }}
-					</span>
-					<span v-else-if="value" class="value">{{ value }}</span>
-					<span v-else class="empty">Not set</span>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import Form from "../common/Form.vue";
-
-const formData = ref({});
-
-const dateFields = [
-	// Basic date picker with US format
-	{
-		name: "birthDate",
-		label: "Birth Date",
-		type: "date",
-		format: "mm/dd/yyyy",
-		required: true,
-		maxDate: "today",
-		yearNavigator: true,
-		yearRange: "1920:2010",
-		cols: 12,
-		md: 6,
-		helpText: "Your date of birth",
-	},
-
-	// Date with default to today
-	{
-		name: "startDate",
-		label: "Project Start Date",
-		type: "date",
-		format: "YYYY-MM-DD",
-		defaultToToday: true,
-		minDate: "today",
-		cols: 12,
-		md: 6,
-		helpText: "When should this project start?",
-	},
-
-	// Date and time picker
-	{
-		name: "appointmentDateTime",
-		label: "Appointment Date & Time",
-		type: "date",
-		showTime: true,
-		hourFormat: "12",
-		stepMinute: 15,
-		defaultToNow: true,
-		minDate: "today",
-		cols: 12,
-		md: 6,
-		helpText: "Select appointment date and time",
-	},
-
-	// Time-only picker
-	{
-		name: "preferredTime",
-		label: "Preferred Contact Time",
-		type: "date",
-		timeOnly: true,
-		hourFormat: "12",
-		stepMinute: 30,
-		defaultValue: "09:00",
-		cols: 12,
-		md: 6,
-		helpText: "Best time to contact you",
-	},
-
-	// European date format with week numbers
-	{
-		name: "eventDate",
-		label: "Event Date",
-		type: "date",
-		format: "dd/mm/yyyy",
-		showWeek: true,
-		monthNavigator: true,
-		yearNavigator: true,
-		yearRange: "2024:2026",
-		cols: 12,
-		md: 6,
-	},
-
-	// Date with seconds
-	{
-		name: "preciseTime",
-		label: "Precise Timestamp",
-		type: "date",
-		showTime: true,
-		showSeconds: true,
-		hourFormat: "24",
-		stepSecond: 1,
-		cols: 12,
-		md: 6,
-		helpText: "Precise time with seconds",
-	},
-];
-
-const handleSubmit = (data) => {
-	console.log("Date form submitted:", data);
-	alert("Form submitted! Check console for details.");
-};
-
-const handleFieldChange = (event) => {
-	console.log("Field changed:", event.fieldName, "->", event.value);
-};
-
-const formatFieldLabel = (fieldName) => {
-	const field = dateFields.find((f) => f.name === fieldName);
-	return field ? field.label : fieldName;
-};
-
-const formatDateValue = (fieldName, dateValue) => {
-	if (!dateValue) return "Not set";
-
-	const field = dateFields.find((f) => f.name === fieldName);
-
-	if (field?.timeOnly) {
-		return dateValue.toLocaleTimeString();
-	} else if (field?.showTime) {
-		return dateValue.toLocaleString();
-	} else {
-		return dateValue.toLocaleDateString();
-	}
-};
-</script>
-
-<style scoped>
-.test-date-form {
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 2rem;
-}
-
-.results {
-	background: #f8f9fa;
-	border-radius: 8px;
-	padding: 1.5rem;
-	border: 1px solid #e9ecef;
-}
-
-.results-grid {
-	display: grid;
-	gap: 1rem;
-	margin-top: 1rem;
-}
-
-.result-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0.5rem;
-	background: white;
-	border-radius: 4px;
-	border: 1px solid #dee2e6;
-}
-
-.date-value {
-	color: #0066cc;
-	font-weight: 500;
-}
-
-.value {
-	color: #28a745;
-	font-weight: 500;
-}
-
-.empty {
-	color: #6c757d;
-	font-style: italic;
-}
-
-@media (max-width: 768px) {
-	.result-item {
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 0.25rem;
-	}
-}
-</style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 5275466..f811ef8 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -5,15 +5,11 @@ import Clients from "./components/pages/Clients.vue";
 import Jobs from "./components/pages/Jobs.vue";
 import Invoices from "./components/pages/Invoices.vue";
 import Estimates from "./components/pages/Estimates.vue";
-import Create from "./components/pages/Create.vue";
 import Routes from "./components/pages/Routes.vue";
 import TimeSheets from "./components/pages/TimeSheets.vue";
 import Warranties from "./components/pages/Warranties.vue";
 import Home from "./components/pages/Home.vue";
-import TestDateForm from "./components/pages/TestDateForm.vue";
 import Client from "./components/pages/Client.vue";
-import ErrorHandlingDemo from "./components/pages/ErrorHandlingDemo.vue";
-import ScheduleBid from "./components/pages/ScheduleBid.vue";
 import Estimate from "./components/pages/Estimate.vue";
 
 const routes = [
@@ -24,17 +20,13 @@ const routes = [
 	{ path: "/calendar", component: Calendar },
 	{ path: "/clients", component: Clients },
 	{ path: "/client", component: Client },
-	{ path: "/schedule-bid", component: ScheduleBid },
 	{ path: "/jobs", component: Jobs },
 	{ path: "/invoices", component: Invoices },
 	{ path: "/estimates", component: Estimates },
 	{ path: "/estimate", component: Estimate },
 	{ path: "/routes", component: Routes },
-	{ path: "/create", component: Create },
 	{ path: "/timesheets", component: TimeSheets },
 	{ path: "/warranties", component: Warranties },
-	{ path: "/test-dates", component: TestDateForm },
-	{ path: "/dev/error-handling-demo", component: ErrorHandlingDemo },
 	{ path: "/:pathMatch(.*)*", component: Home }, // Fallback to Home for unknown routes
 ];