wip

client/admin/src/app/app.component.html

@@ -1,21 +1,83 @@
 <!-- ========== HEADER ========== -->
-    @if (auth.loggedIn) {
-<header
-  class="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 lg:ps-[260px] dark:bg-neutral-800 dark:border-neutral-700"
->
-  <nav class="px-4 sm:px-6 flex basis-full items-center w-full mx-auto">
-    <div
-      class="w-full flex items-center justify-end ms-auto md:justify-between gap-x-1 md:gap-x-3"
-    >
+@if (auth.loggedIn) {
+  <header
+    class="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 lg:ps-[260px] dark:bg-neutral-800 dark:border-neutral-700"
+  >
+    <nav class="px-4 sm:px-6 flex basis-full items-center w-full mx-auto">
+      <div
+        class="w-full flex items-center justify-end ms-auto md:justify-between gap-x-1 md:gap-x-3"
+      >
+        <div class="hidden md:block">
+          <!-- Search Input -->
+          <div class="relative">
+            <div
+              class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-3.5"
+            >
+              <svg
+                class="shrink-0 size-4 text-gray-400 dark:text-white/60"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="11" cy="11" r="8" />
+                <path d="m21 21-4.3-4.3" />
+              </svg>
+            </div>
+            <input
+              type="text"
+              class="py-2 ps-10 pe-16 block w-full bg-white border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-600"
+              placeholder="Search"
+            />
+            <div
+              class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-1"
+            >
+              <button
+                type="button"
+                class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:text-neutral-500 dark:hover:text-blue-500 dark:focus:text-blue-500"
+                aria-label="Close"
+              >
+                <span class="sr-only">Close</span>
+                <svg
+                  class="shrink-0 size-4"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="m15 9-6 6" />
+                  <path d="m9 9 6 6" />
+                </svg>
+              </button>
+            </div>
+            <div
+              class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-3 text-gray-400"
+            >
+              <span class="mx-1"> </span>
+              <span class="text-xs">/</span>
+            </div>
+          </div>
+          <!-- End Search Input -->
+        </div>
 
-      <div class="hidden md:block">
-        <!-- Search Input -->
-        <div class="relative">
-          <div
-            class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-3.5"
+        <div class="flex flex-row items-center justify-end gap-1">
+          <button
+            type="button"
+            class="md:hidden size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
           >
             <svg
-              class="shrink-0 size-4 text-gray-400 dark:text-white/60"
+              class="shrink-0 size-4"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
@@ -29,21 +91,14 @@
               <circle cx="11" cy="11" r="8" />
               <path d="m21 21-4.3-4.3" />
             </svg>
-          </div>
-          <input
-            type="text"
-            class="py-2 ps-10 pe-16 block w-full bg-white border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-600"
-            placeholder="Search"
-          />
-          <div
-            class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-1"
-          >
+            <span class="sr-only">Search</span>
+          </button>
+
+          <div class="dropdown">
             <button
               type="button"
-              class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:text-neutral-500 dark:hover:text-blue-500 dark:focus:text-blue-500"
-              aria-label="Close"
+              class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
             >
-              <span class="sr-only">Close</span>
               <svg
                 class="shrink-0 size-4"
                 xmlns="http://www.w3.org/2000/svg"
@@ -56,145 +111,26 @@
                 stroke-linecap="round"
                 stroke-linejoin="round"
               >
-                <circle cx="12" cy="12" r="10" />
-                <path d="m15 9-6 6" />
-                <path d="m9 9 6 6" />
+                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
               </svg>
+              <span class="sr-only">Notifications</span>
             </button>
-          </div>
-          <div
-            class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-3 text-gray-400"
-          >
-
-            <span class="mx-1">
-
-            </span>
-            <span class="text-xs">/</span>
-          </div>
-        </div>
-        <!-- End Search Input -->
-      </div>
-
-      <div class="flex flex-row items-center justify-end gap-1">
-        <button
-          type="button"
-          class="md:hidden size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
-        >
-          <svg
-            class="shrink-0 size-4"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="11" cy="11" r="8" />
-            <path d="m21 21-4.3-4.3" />
-          </svg>
-          <span class="sr-only">Search</span>
-        </button>
-
-        <button
-          type="button"
-          class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
-        >
-          <svg
-            class="shrink-0 size-4"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-          </svg>
-          <span class="sr-only">Notifications</span>
-        </button>
-
-        <button
-          type="button"
-          class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
-        >
-          <svg
-            class="shrink-0 size-4"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
-          </svg>
-          <span class="sr-only">Activity</span>
-        </button>
-
-        <!-- Dropdown -->
-        <div
-          class="hs-dropdown [--placement:bottom-right] relative inline-flex"
-        >
-          <button
-            id="hs-dropdown-account"
-            type="button"
-            class="size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white"
-            aria-haspopup="menu"
-            aria-expanded="false"
-            aria-label="Dropdown"
-          >
-            <img
-              class="shrink-0 size-[38px] rounded-full"
-              src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
-              alt="Avatar"
-            />
-          </button>
-
-            <div
-              class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-700 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full"
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="hs-dropdown-account"
+            <ul
+              tabindex="0"
+              class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
             >
-              <div
-                class="py-3 px-5 bg-gray-100 rounded-t-lg dark:bg-neutral-700"
-              >
-                <p class="text-sm text-gray-500 dark:text-neutral-500">
-                  Signed in as
-                </p>
-                <p
-                  class="text-sm font-medium text-gray-800 dark:text-neutral-200"
-                >
-                  jamessite.com
-                </p>
-              </div>
-              <div class="p-1.5 space-y-0.5">
-                <a
-                  class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300"
-                  (click)="logout()"
-                >
-                  Logout
-                </a>
-              </div>
-            </div>
+              <li><a>Item 1</a></li>
+              <li><a>Item 2</a></li>
+            </ul>
+          </div>
+
+          <a (click)="logout()" class="btn btn-sm btn-primary">Logout</a>
         </div>
-        <!-- End Dropdown -->
       </div>
-    </div>
-  </nav>
-</header>
-    }
-@else {
+    </nav>
+  </header>
+} @else {
   <div class="relative flex flex-col h-full max-h-full">
     <div class="px-6 pt-4">
       <!-- Logo -->
@@ -212,105 +148,104 @@
 <!-- ========== END HEADER ========== -->
 
 <!-- Sidebar -->
-    @if (auth.loggedIn) {
-<div
-  id="hs-application-sidebar"
-  class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-[260px] h-full hidden fixed inset-y-0 start-0 z-[60] bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700"
-  role="dialog"
-  tabindex="-1"
-  aria-label="Sidebar"
->
-  <div class="relative flex flex-col h-full max-h-full">
-    <div class="px-6 pt-4">
-      <!-- Logo -->
-      <a
-        class="stillboxLogo flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80"
-        href="#"
-        aria-label="Stillbox"
-      >
-        Stillbox
-      </a>
-      <!-- End Logo -->
-    </div>
+@if (auth.loggedIn) {
+  <div
+    id="hs-application-sidebar"
+    class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-[260px] h-full hidden fixed inset-y-0 start-0 z-[60] bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700"
+    role="dialog"
+    tabindex="-1"
+    aria-label="Sidebar"
+  >
+    <div class="relative flex flex-col h-full max-h-full">
+      <div class="px-6 pt-4">
+        <!-- Logo -->
+        <a
+          class="stillboxLogo flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80"
+          href="#"
+          aria-label="Stillbox"
+        >
+          Stillbox
+        </a>
+        <!-- End Logo -->
+      </div>
 
-    <!-- Content -->
-    <div
-      class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"
-    >
-      <nav
-        class="hs-accordion-group p-3 w-full flex flex-col flex-wrap"
-        data-hs-accordion-always-open
+      <!-- Content -->
+      <div
+        class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"
       >
-        <ul class="flex flex-col space-y-1">
-          <li>
-            <a
-              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
-              routerLink="/home"
-              routerLinkActive="btn-active"
-            >
-              <ng-icon name="ionHome"></ng-icon>Home
-            </a>
-          </li>
-          <li>
-            <a
-              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
-              routerLink="/talkgroups"
-              routerLinkActive="btn-active"
-              href="#"
-            >
-              <ng-icon name="ionChatbubbles"></ng-icon>Talkgroups
-            </a>
-          </li>
-          <li>
-            <a
-              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
-              routerLink="/calls"
-              routerLinkActive="btn-active"
-              href="#"
-            >
-              <ng-icon name="ionMegaphoneOutline"></ng-icon>Calls
-            </a>
-          </li>
-          <li>
-            <a
-              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-900 dark:text-neutral-200 dark:hover:text-neutral-300"
-              routerLink="/incidents"
-              routerLinkActive="btn-active"
-              href="#"
-            >
-              <ng-icon name="ionNewspaperOutline"></ng-icon>Incidents
-            </a>
-          </li>
-          <li>
-            <a
-              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-900 dark:text-neutral-200 dark:hover:text-neutral-300"
-              routerLink="/alerts"
-              routerLinkActive="btn-active"
-            >
-              <ng-icon name="ionAlertCircleOutline"></ng-icon>Alerts
-            </a>
-          </li>
-        </ul>
-      </nav>
+        <nav
+          class="hs-accordion-group p-3 w-full flex flex-col flex-wrap"
+          data-hs-accordion-always-open
+        >
+          <ul class="flex flex-col space-y-1">
+            <li>
+              <a
+                class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
+                routerLink="/home"
+                routerLinkActive="btn-active"
+              >
+                <ng-icon name="ionHome"></ng-icon>Home
+              </a>
+            </li>
+            <li>
+              <a
+                class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
+                routerLink="/talkgroups"
+                routerLinkActive="btn-active"
+                href="#"
+              >
+                <ng-icon name="ionChatbubbles"></ng-icon>Talkgroups
+              </a>
+            </li>
+            <li>
+              <a
+                class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
+                routerLink="/calls"
+                routerLinkActive="btn-active"
+                href="#"
+              >
+                <ng-icon name="ionMegaphoneOutline"></ng-icon>Calls
+              </a>
+            </li>
+            <li>
+              <a
+                class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-900 dark:text-neutral-200 dark:hover:text-neutral-300"
+                routerLink="/incidents"
+                routerLinkActive="btn-active"
+                href="#"
+              >
+                <ng-icon name="ionNewspaperOutline"></ng-icon>Incidents
+              </a>
+            </li>
+            <li>
+              <a
+                class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-900 dark:text-neutral-200 dark:hover:text-neutral-300"
+                routerLink="/alerts"
+                routerLinkActive="btn-active"
+              >
+                <ng-icon name="ionAlertCircleOutline"></ng-icon>Alerts
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <!-- End Content -->
     </div>
-    <!-- End Content -->
   </div>
-</div>
 }
 <!-- End Sidebar -->
 
 <!-- Content -->
 @if (auth.loggedIn) {
-<div class="w-full lg:ps-64">
-  <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
-    <router-outlet />
+  <div class="w-full lg:ps-64">
+    <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
+      <router-outlet />
+    </div>
   </div>
-</div>
-}
-@else {
-<div class="w-full">
-  <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
-    <router-outlet />
+} @else {
+  <div class="w-full">
+    <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
+      <router-outlet />
+    </div>
   </div>
-</div>
 }