Admin import

2024-11-19 12:04:03 -05:00 · 2024-11-19 12:04:03 -05:00 · f5ffd54bdf
commit f5ffd54bdf
parent e7d59ed78c
68 changed files with 16392 additions and 0 deletions
--- a/client/admin/.editorconfig
+++ b/client/admin/.editorconfig
@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/client/admin/.gitignore
+++ b/client/admin/.gitignore
@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/client/admin/.prettierignore
+++ b/client/admin/.prettierignore
@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
--- a/client/admin/.prettierrc
+++ b/client/admin/.prettierrc
@ -0,0 +1 @@
+{}
--- a/client/admin/.vscode/extensions.json
+++ b/client/admin/.vscode/extensions.json
@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
--- a/client/admin/.vscode/launch.json
+++ b/client/admin/.vscode/launch.json
@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
--- a/client/admin/.vscode/tasks.json
+++ b/client/admin/.vscode/tasks.json
@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/client/admin/README.md
+++ b/client/admin/README.md
@ -0,0 +1,27 @@
+# Admin
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
--- a/client/admin/angular.json
+++ b/client/admin/angular.json
@ -0,0 +1,90 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "admin": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/admin",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "admin:build:production"
+            },
+            "development": {
+              "buildTarget": "admin:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
--- a/client/admin/package-lock.json
+++ b/client/admin/package-lock.json
--- a/client/admin/package.json
+++ b/client/admin/package.json
@ -0,0 +1,43 @@
+{
+  "name": "admin",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^18.2.0",
+    "@angular/common": "^18.2.0",
+    "@angular/compiler": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@angular/forms": "^18.2.0",
+    "@angular/platform-browser": "^18.2.0",
+    "@angular/platform-browser-dynamic": "^18.2.0",
+    "@angular/router": "^18.2.0",
+    "@ng-icons/core": "^29.6.1",
+    "@ng-icons/ionicons": "^29.6.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.10"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^18.2.10",
+    "@angular/cli": "^18.2.10",
+    "@angular/compiler-cli": "^18.2.0",
+    "@types/jasmine": "~5.1.0",
+    "daisyui": "^4.12.13",
+    "jasmine-core": "~5.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "prettier": "3.3.3",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.5.2"
+  }
+}
--- a/client/admin/src/app/alerts/alerts.component.css
+++ b/client/admin/src/app/alerts/alerts.component.css
--- a/client/admin/src/app/alerts/alerts.component.html
+++ b/client/admin/src/app/alerts/alerts.component.html
@ -0,0 +1 @@
+<p>alerts works!</p>
--- a/client/admin/src/app/alerts/alerts.component.spec.ts
+++ b/client/admin/src/app/alerts/alerts.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertsComponent } from './alerts.component';
+
+describe('AlertsComponent', () => {
+  let component: AlertsComponent;
+  let fixture: ComponentFixture<AlertsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlertsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlertsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/alerts/alerts.component.ts
+++ b/client/admin/src/app/alerts/alerts.component.ts
@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-alerts',
+  standalone: true,
+  imports: [],
+  templateUrl: './alerts.component.html',
+  styleUrl: './alerts.component.css',
+})
+export class AlertsComponent {}
--- a/client/admin/src/app/app.component.css
+++ b/client/admin/src/app/app.component.css
@ -0,0 +1,3 @@
+.stillboxLogo {
+  font-family: "Warnes";
+}
--- a/client/admin/src/app/app.component.html
+++ b/client/admin/src/app/app.component.html
@ -0,0 +1,302 @@
+<!-- ========== 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="me-5 lg:me-0 lg:hidden">
+        <!-- Logo -->
+        <a
+          class="flex-none rounded-md text-xl inline-block stillboxLogo focus:outline-none focus:opacity-80"
+          href="#"
+          aria-label="Stillbox"
+        >
+          Stillbox
+        </a>
+        <!-- End Logo -->
+      </div>
+      <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="input 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 input-bordered"
+              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="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>
+
+          <a (click)="logout()" class="btn btn-sm btn-primary">Logout</a>
+        </div>
+      </div>
+    </nav>
+  </header>
+} @else {
+  <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>
+  </div>
+}
+<!-- ========== END HEADER ========== -->
+
+@if (auth.loggedIn) {
+  <div class="-mt-px">
+    <!-- Breadcrumb -->
+    <div
+      class="sticky top-0 inset-x-0 z-20 bg-white border-y px-4 sm:px-6 lg:px-8 lg:hidden dark:bg-neutral-800 dark:border-neutral-700"
+    >
+      <div class="flex items-center py-2">
+        <!-- Navigation Toggle -->
+        <button
+          type="button"
+          class="size-8 flex justify-center items-center gap-x-2 border border-gray-200 text-gray-800 hover:text-gray-500 rounded-lg focus:outline-none focus:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-500 dark:focus:text-neutral-500"
+          aria-haspopup="dialog"
+          aria-expanded="false"
+          aria-controls="hs-application-sidebar"
+          aria-label="Toggle navigation"
+          data-hs-overlay="#hs-application-sidebar"
+        >
+          <span class="sr-only">Toggle Navigation</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"
+          >
+            <rect width="18" height="18" x="3" y="3" rx="2" />
+            <path d="M15 3v18" />
+            <path d="m8 9 3 3-3 3" />
+          </svg>
+        </button>
+        <!-- End Navigation Toggle -->
+
+        <!-- Breadcrumb -->
+        <ol class="ms-3 flex items-center whitespace-nowrap">
+          <li
+            class="flex items-center text-sm text-gray-800 dark:text-neutral-400"
+          >
+            Application Layout
+            <svg
+              class="shrink-0 mx-3 overflow-visible size-2.5 text-gray-400 dark:text-neutral-500"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </li>
+          <li
+            class="text-sm font-semibold text-gray-800 truncate dark:text-neutral-400"
+            aria-current="page"
+          >
+            Dashboard
+          </li>
+        </ol>
+        <!-- End Breadcrumb -->
+      </div>
+    </div>
+    <!-- End Breadcrumb -->
+  </div>
+
+  <!-- Sidebar -->
+  <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
+        >
+          <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>
+  </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>
+  </div>
+} @else {
+  <div class="w-full">
+    <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
+      <router-outlet />
+    </div>
+  </div>
+}
--- a/client/admin/src/app/app.component.spec.ts
+++ b/client/admin/src/app/app.component.spec.ts
@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'admin' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('admin');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, admin');
+  });
+});
--- a/client/admin/src/app/app.component.ts
+++ b/client/admin/src/app/app.component.ts
@ -0,0 +1,49 @@
+import { Component, inject } from '@angular/core';
+import { RouterModule, RouterOutlet, RouterLink } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { AuthService } from './login/auth.service';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  ionMenuOutline,
+  ionChatbubbles,
+  ionNewspaperOutline,
+  ionAlertCircleOutline,
+  ionRadioOutline,
+  ionHome,
+  ionMegaphoneOutline,
+  ionCreateOutline,
+} from '@ng-icons/ionicons';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterOutlet,
+    RouterModule,
+    RouterLink,
+    NgIconComponent,
+  ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+  providers: [
+    provideIcons({
+      ionMenuOutline,
+      ionChatbubbles,
+      ionNewspaperOutline,
+      ionAlertCircleOutline,
+      ionRadioOutline,
+      ionHome,
+      ionMegaphoneOutline,
+      ionCreateOutline,
+    }),
+  ],
+})
+export class AppComponent {
+  auth: AuthService = inject(AuthService);
+  title = 'admin';
+
+  logout() {
+    this.auth.logout();
+  }
+}
--- a/client/admin/src/app/app.config.ts
+++ b/client/admin/src/app/app.config.ts
@ -0,0 +1,54 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import {
+  HttpRequest,
+  HttpHandlerFn,
+  HttpEvent,
+  withInterceptors,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { isDevMode, inject } from '@angular/core';
+import { AuthService } from './login/auth.service';
+
+import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+
+export function apiBaseInterceptor(
+  req: HttpRequest<unknown>,
+  next: HttpHandlerFn,
+): Observable<HttpEvent<unknown>> {
+  let baseUrl: string;
+  if (isDevMode()) {
+    baseUrl = 'http://xenon:3050';
+  } else {
+    baseUrl = '';
+  }
+  const apiReq = req.clone({ url: `${baseUrl}${req.url}` });
+  return next(apiReq);
+}
+
+export function authIntercept(
+  req: HttpRequest<unknown>,
+  next: HttpHandlerFn,
+): Observable<HttpEvent<unknown>> {
+  let authSvc: AuthService = inject(AuthService);
+  if (authSvc.loggedIn) {
+    req = req.clone({
+      setHeaders: {
+        'Content-Type': 'application/json; charset=utf-8',
+        Accept: 'application/json',
+        Authorization: `Bearer ${authSvc.getToken()}`,
+      },
+    });
+  }
+
+  return next(req);
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(withInterceptors([apiBaseInterceptor, authIntercept])),
+  ],
+};
--- a/client/admin/src/app/app.routes.ts
+++ b/client/admin/src/app/app.routes.ts
@ -0,0 +1,23 @@
+import { Routes } from '@angular/router';
+
+import { HomeComponent } from './home/home.component';
+import { LoginComponent } from './login/login.component';
+import { TalkgroupsComponent } from './talkgroups/talkgroups.component';
+import { TalkgroupRecordComponent } from './talkgroups/talkgroup-record/talkgroup-record.component';
+import { CallsComponent } from './calls/calls.component';
+import { IncidentsComponent } from './incidents/incidents.component';
+import { AlertsComponent } from './alerts/alerts.component';
+import { ImportComponent } from './talkgroups/import/import.component';
+import { AuthGuard } from './auth.guard';
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
+  { path: 'login', component: LoginComponent },
+  { path: 'talkgroups', component: TalkgroupsComponent },
+  { path: 'talkgroups/import', component: ImportComponent },
+  { path: 'talkgroups/:sys/:tg', component: TalkgroupRecordComponent },
+  { path: 'calls', component: CallsComponent },
+  { path: 'incidents', component: IncidentsComponent },
+  { path: 'alerts', component: AlertsComponent },
+];
--- a/client/admin/src/app/auth.guard.spec.ts
+++ b/client/admin/src/app/auth.guard.spec.ts
@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth.guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+    TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/auth.guard.ts
+++ b/client/admin/src/app/auth.guard.ts
@ -0,0 +1,9 @@
+import { CanActivateFn } from '@angular/router';
+
+export const AuthGuard: CanActivateFn = (route, state) => {
+  if (sessionStorage.getItem('jwt') == null) {
+    return false;
+  } else {
+    return true;
+  }
+};
--- a/client/admin/src/app/calls/calls.component.css
+++ b/client/admin/src/app/calls/calls.component.css
--- a/client/admin/src/app/calls/calls.component.html
+++ b/client/admin/src/app/calls/calls.component.html
@ -0,0 +1 @@
+<p>calls works!</p>
--- a/client/admin/src/app/calls/calls.component.spec.ts
+++ b/client/admin/src/app/calls/calls.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CallsComponent } from './calls.component';
+
+describe('CallsComponent', () => {
+  let component: CallsComponent;
+  let fixture: ComponentFixture<CallsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CallsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CallsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/calls/calls.component.ts
+++ b/client/admin/src/app/calls/calls.component.ts
@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-calls',
+  standalone: true,
+  imports: [],
+  templateUrl: './calls.component.html',
+  styleUrl: './calls.component.css',
+})
+export class CallsComponent {}
--- a/client/admin/src/app/home/home.component.css
+++ b/client/admin/src/app/home/home.component.css
--- a/client/admin/src/app/home/home.component.html
+++ b/client/admin/src/app/home/home.component.html
@ -0,0 +1 @@
+<p>This will be a dashboard someday.</p>
--- a/client/admin/src/app/home/home.component.spec.ts
+++ b/client/admin/src/app/home/home.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/home/home.component.ts
+++ b/client/admin/src/app/home/home.component.ts
@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.css',
+})
+export class HomeComponent {}
--- a/client/admin/src/app/incidents/incidents.component.css
+++ b/client/admin/src/app/incidents/incidents.component.css
--- a/client/admin/src/app/incidents/incidents.component.html
+++ b/client/admin/src/app/incidents/incidents.component.html
@ -0,0 +1 @@
+<p>incidents works!</p>
--- a/client/admin/src/app/incidents/incidents.component.spec.ts
+++ b/client/admin/src/app/incidents/incidents.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IncidentsComponent } from './incidents.component';
+
+describe('IncidentsComponent', () => {
+  let component: IncidentsComponent;
+  let fixture: ComponentFixture<IncidentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IncidentsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IncidentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/incidents/incidents.component.ts
+++ b/client/admin/src/app/incidents/incidents.component.ts
@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-incidents',
+  standalone: true,
+  imports: [],
+  templateUrl: './incidents.component.html',
+  styleUrl: './incidents.component.css',
+})
+export class IncidentsComponent {}
--- a/client/admin/src/app/login/auth.service.spec.ts
+++ b/client/admin/src/app/login/auth.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { APIService } from './api.service';
+
+describe('APIService', () => {
+  let service: APIService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(APIService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/login/auth.service.ts
+++ b/client/admin/src/app/login/auth.service.ts
@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+export class Jwt {
+  constructor(public jwt: string) {}
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  loggedIn: boolean = false;
+  constructor(
+    private http: HttpClient,
+    private _router: Router,
+  ) {
+    let ssJWT = sessionStorage.getItem('jwt');
+    if (ssJWT) {
+      this.loggedIn = true;
+      this._router.navigateByUrl('/home');
+    }
+  }
+
+  login(username: string, password: string): Observable<HttpResponse<Jwt>> {
+    return this.http
+      .post<Jwt>(
+        '/api/login',
+        { username: username, password: password },
+        { observe: 'response' },
+      )
+      .pipe(
+        tap((event) => {
+          if (event.status == 200) {
+            sessionStorage.setItem('jwt', event.body?.jwt.toString() ?? '');
+            this.loggedIn = true;
+            this._router.navigateByUrl('/home');
+          }
+        }),
+      );
+  }
+
+  getToken(): string | null {
+    return sessionStorage.getItem('jwt');
+  }
+
+  logout() {
+    sessionStorage.removeItem('jwt');
+    this.loggedIn = false;
+    this._router.navigateByUrl('/login');
+  }
+}
--- a/client/admin/src/app/login/login.component.css
+++ b/client/admin/src/app/login/login.component.css
--- a/client/admin/src/app/login/login.component.html
+++ b/client/admin/src/app/login/login.component.html
@ -0,0 +1,36 @@
+<div class="flex justify-center">
+  <div class="card w-96 bg-base-100 shadow-xl mt-20 mb-20">
+    <div class="card-body">
+      <div class="items-center mt-2">
+        <label class="input input-bordered flex items-center gap-2 mb-2">
+          <input
+            type="text"
+            [(ngModel)]="username"
+            class="grow"
+            placeholder="login"
+            (keyup.enter)="onSubmit()"
+          />
+        </label>
+        <label class="input input-bordered flex items-center gap-2 mb-2">
+          <input
+            type="password"
+            [(ngModel)]="password"
+            class="grow"
+            placeholder="password"
+            (keyup.enter)="onSubmit()"
+          />
+        </label>
+      </div>
+      <div class="card-actions justify-end">
+        <button (click)="onSubmit()" class="btn btn-primary w-full">
+          Login
+        </button>
+      </div>
+    </div>
+    @if (failed) {
+      <div role="alert" class="alert alert-error">
+        <span>Login Failed!</span>
+      </div>
+    }
+  </div>
+</div>
--- a/client/admin/src/app/login/login.component.spec.ts
+++ b/client/admin/src/app/login/login.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/login/login.component.ts
+++ b/client/admin/src/app/login/login.component.ts
@ -0,0 +1,39 @@
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AuthService } from '../login/auth.service';
+import { catchError, of } from 'rxjs';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css',
+})
+export class LoginComponent {
+  apiService: AuthService = inject(AuthService);
+  router: Router = inject(Router);
+  username: string = '';
+  password: string = '';
+  failed: boolean = false;
+
+  onSubmit() {
+    this.failed = false;
+    this.apiService
+      .login(this.username, this.password)
+      .pipe(
+        catchError(() => {
+          this.failed = true;
+          return of(null);
+        }),
+      )
+      .subscribe((event) => {
+        if (event?.status == 200) {
+          this.router.navigateByUrl('/home');
+        } else {
+          this.failed = true;
+        }
+      });
+  }
+}
--- a/client/admin/src/app/talkgroup.ts
+++ b/client/admin/src/app/talkgroup.ts
@ -0,0 +1,67 @@
+export interface TGID {
+  sys: number;
+  tg: number;
+}
+
+export class AlertTime {
+  time: string;
+  duration: string;
+
+  constructor(at: string) {
+    let s = at.split('+');
+    this.time = s[0];
+    this.duration = s[1];
+  }
+}
+
+export class AlertRule {
+  times: AlertTime[];
+  mult: number;
+
+  constructor(times: AlertTime[], mult: number) {
+    this.times = times;
+    this.mult = mult;
+  }
+}
+
+export interface System {
+  id: number;
+  name: string;
+}
+
+export interface Metadata {
+  encrypted: boolean|null;
+}
+
+export interface Talkgroup {
+  id: number;
+  system_id: number;
+  tgid: number;
+  name: string;
+  alpha_tag: string;
+  tg_group: string;
+  frequency: number;
+  metadata: Metadata|null;
+  tags: string[];
+  alert: boolean;
+  alert_config: AlertRule[];
+  system: System;
+  weight: number;
+  learned?: boolean;
+  selected?: boolean;
+}
+
+export interface TalkgroupUpdate {
+  id: number;
+  system_id: number;
+  tgid: number;
+  name: string | null;
+  alpha_tag: string | null;
+  tg_group: string | null;
+  frequency: number | null;
+  metadata: Object | null;
+  tags: string[] | null;
+  alert: boolean | null;
+  alert_config: AlertRule[] | null;
+  weight: number | null;
+}
--- a/client/admin/src/app/talkgroups/import/import.component.css
+++ b/client/admin/src/app/talkgroups/import/import.component.css
--- a/client/admin/src/app/talkgroups/import/import.component.html
+++ b/client/admin/src/app/talkgroups/import/import.component.html
@ -0,0 +1,45 @@
+<div class="flex">
+  <form [formGroup]="form" (ngSubmit)="submit()">
+<textarea
+        id="contents"
+        class="w-full textarea textarea-bordered"
+        placeholder="Paste RadioReference page here"
+        formControlName="contents"
+        cols="40" rows="15"
+        ></textarea>
+    <input type="number" class="input input-bordered" formControlName="systemID" id="systemID" />
+    <input type="submit" class="btn btn-primary" value="Preview" />
+    <button class="btn btn-secondary" (click)="save()">Save</button>
+  </form>
+</div>
+<div class="w-100 justify-center overflow-x-auto">
+  <table class="table">
+    <thead>
+      <tr>
+        <th><input type="checkbox" class="checkbox" [(ngModel)]="selectAll" name="selectAll" /></th>
+        <th>Sys</th>
+        <th>Sys ID</th>
+        <th>Group</th>
+        <th>Alpha</th>
+        <th>Name</th>
+        <th>TG ID</th>
+        <th>Enc</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (tg of tgs; track tg.id) {
+        <tr>
+          <td><input type="checkbox" class="checkbox" [(ngModel)]="tg.selected" value="{{tg.name}}" (change)="isAllSelected()">
+          </td>
+          <td>{{ tg.system.name }}</td>
+          <td>{{ tg.system.id }}</td>
+          <td>{{ tg.tg_group }}</td>
+          <td>{{ tg.alpha_tag }}</td>
+          <td>{{ tg.name }}</td>
+          <td>{{ tg.tgid }}</td>
+          <td>{{ tg?.metadata?.encrypted ? 'E' : '' }}</td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>
--- a/client/admin/src/app/talkgroups/import/import.component.spec.ts
+++ b/client/admin/src/app/talkgroups/import/import.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImportComponent } from './import.component';
+
+describe('ImportComponent', () => {
+  let component: ImportComponent;
+  let fixture: ComponentFixture<ImportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ImportComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ImportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/talkgroups/import/import.component.ts
+++ b/client/admin/src/app/talkgroups/import/import.component.ts
@ -0,0 +1,53 @@
+import { Component, inject } from '@angular/core';
+import { TalkgroupService } from '../talkgroups.service';
+import { Talkgroup } from '../../talkgroup';
+import { FormGroup, FormControl, ReactiveFormsModule, FormsModule  } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { Router, ActivatedRoute } from '@angular/router';
+import { catchError, of } from 'rxjs';
+
+@Component({
+  selector: 'app-import',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule ],
+  templateUrl: './import.component.html',
+  styleUrl: './import.component.css',
+})
+export class ImportComponent {
+  tgService: TalkgroupService = inject(TalkgroupService);
+  form!: FormGroup;
+  tgs!: Talkgroup[];
+  selectAll: boolean = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {}
+
+  ngOnInit() {
+    this.form = new FormGroup({
+      contents: new FormControl(''),
+      systemID: new FormControl(0),
+    });
+  }
+  submit() {
+    let content = this.form.controls['contents'].value;
+    let sysID = Number(this.form.controls['systemID'].value);
+    this.tgService.importRR(sysID, content)
+      .pipe(
+        catchError(() => {
+          return of(null);
+        }),
+      )
+      .subscribe((event) => {
+        this.tgs = event!;
+        //this.router.navigate(['/talkgroups/']);
+      });
+  }
+
+  isAllSelected() {
+  }
+
+  save() {
+  }
+}
--- a/client/admin/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.css
+++ b/client/admin/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.css
--- a/client/admin/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.html
+++ b/client/admin/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.html
@ -0,0 +1,33 @@
+<div class="container flex">
+  @for (rule of rules; track $index) {
+    <div class="">
+      <table class="table">
+        <thead>
+          <tr>
+            <td>Start</td>
+            <td>Duration</td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          @for (time of rule.times; track $index) {
+            <tr>
+              <td>
+                {{ time.time }}
+              </td>
+              <td>
+                {{ time.duration }}
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td><em>No times</em></td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  } @empty {
+    No rules
+  }
+</div>
--- a/client/admin/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.spec.ts
+++ b/client/admin/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertRuleBuilderComponent } from './alert-rule-builder.component';
+
+describe('AlertRuleBuilderComponent', () => {
+  let component: AlertRuleBuilderComponent;
+  let fixture: ComponentFixture<AlertRuleBuilderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlertRuleBuilderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlertRuleBuilderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.ts
+++ b/client/admin/src/app/talkgroups/talkgroup-record/alert-rule-builder/alert-rule-builder.component.ts
@ -0,0 +1,20 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { AlertRule } from '../../../talkgroup';
+
+@Component({
+  selector: 'alert-rule-builder',
+  standalone: true,
+  imports: [],
+  templateUrl: './alert-rule-builder.component.html',
+  styleUrl: './alert-rule-builder.component.css',
+})
+export class AlertRuleBuilderComponent {
+  @Input() rules: AlertRule[] = [];
+  @Output() rulesChange: EventEmitter<AlertRule[]> = new EventEmitter<
+    AlertRule[]
+  >();
+
+  emit() {
+    this.rulesChange.emit(this.rules);
+  }
+}
--- a/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.css
+++ b/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.css
--- a/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.html
+++ b/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.html
@ -0,0 +1,68 @@
+<div class="flex">
+  <form [formGroup]="form" (ngSubmit)="submit()">
+    <div class="p-1 columns-2">
+      <label class="w-full" for="name">Name: </label
+      ><input
+        id="name"
+        type="text"
+        class="w-full input input-bordered"
+        formControlName="name"
+        [(ngModel)]="tg.name"
+      />
+    </div>
+    <div class="p-1 columns-2">
+      <label class="w-full" for="alpha_tag">Alpha Tag: </label
+      ><input
+        id="alpha_tag"
+        type="text"
+        class="w-full input input-bordered"
+        formControlName="alpha_tag"
+        [(ngModel)]="tg.alpha_tag"
+      />
+    </div>
+    <div class="p-1 columns-2">
+      <label class="w-full" for="tg_group">Group: </label
+      ><input
+        id="tg_group"
+        type="text"
+        class="w-full input input-bordered"
+        formControlName="tg_group"
+        [(ngModel)]="tg.tg_group"
+      />
+    </div>
+    <div class="p-1 columns-2">
+      <label class="w-full" for="frequency">Frequency: </label
+      ><input
+        id="frequency"
+        type="text"
+        class="w-full input input-bordered"
+        formControlName="frequency"
+        [(ngModel)]="tg.frequency"
+      />
+    </div>
+    <div class="p-1 columns-2">
+      <label class="w-full" for="alert">Alert: </label>
+      <div class="w-full">
+        <input
+          id="alert"
+          type="checkbox"
+          formControlName="alert"
+          [(ngModel)]="tg.alert"
+          class="checkbox"
+        />
+      </div>
+    </div>
+    <div class="p-1 columns-2">
+      <label class="w-full" for="weight">Weight: </label
+      ><input
+        id="weight"
+        type="text"
+        class="w-full input input-bordered"
+        formControlName="weight"
+        [(ngModel)]="tg.weight"
+      />
+    </div>
+    <alert-rule-builder [rules]="tg.alert_config" />
+    <input type="submit" class="btn btn-secondary" value="Save" />
+  </form>
+</div>
--- a/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.spec.ts
+++ b/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TalkgroupRecordComponent } from './talkgroup-record.component';
+
+describe('TalkgroupRecordComponent', () => {
+  let component: TalkgroupRecordComponent;
+  let fixture: ComponentFixture<TalkgroupRecordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TalkgroupRecordComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TalkgroupRecordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts
+++ b/client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts
@ -0,0 +1,89 @@
+import { Component, inject } from '@angular/core';
+import { Talkgroup, TalkgroupUpdate } from '../../talkgroup';
+import { TalkgroupService } from '../talkgroups.service';
+import { AlertRuleBuilderComponent } from './alert-rule-builder/alert-rule-builder.component';
+import { CommonModule } from '@angular/common';
+import { catchError, of } from 'rxjs';
+import {
+  ReactiveFormsModule,
+  FormGroup,
+  FormControl,
+  Validators,
+} from '@angular/forms';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'talkgroup-record',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, AlertRuleBuilderComponent],
+  templateUrl: './talkgroup-record.component.html',
+  styleUrl: './talkgroup-record.component.css',
+})
+export class TalkgroupRecordComponent {
+  tg!: Talkgroup;
+  tgService: TalkgroupService = inject(TalkgroupService);
+
+  form!: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {}
+
+  ngOnInit() {
+    const sysId = this.route.snapshot.paramMap.get('sys');
+    const tgId = this.route.snapshot.paramMap.get('tg');
+
+    this.tgService
+      .getTalkgroup(Number(sysId), Number(tgId))
+      .subscribe((data: Talkgroup) => {
+        this.tg = data;
+      });
+
+    this.form = new FormGroup({
+      name: new FormControl(''),
+      alpha_tag: new FormControl(''),
+      tg_group: new FormControl(''),
+      frequency: new FormControl(0),
+      alert: new FormControl(true),
+      weight: new FormControl(1.0),
+    });
+  }
+
+  submit() {
+    let tgu: TalkgroupUpdate = <TalkgroupUpdate>{
+      system_id: this.tg.system_id,
+      tgid: this.tg.tgid,
+      id: this.tg.id,
+    };
+    if (this.form.controls['name'].dirty) {
+      tgu.name = this.tg.name;
+    }
+    if (this.form.controls['alpha_tag'].dirty) {
+      tgu.alpha_tag = this.tg.alpha_tag;
+    }
+    if (this.form.controls['tg_group'].dirty) {
+      tgu.tg_group = this.tg.tg_group;
+    }
+    if (this.form.controls['frequency'].dirty) {
+      tgu.frequency = this.tg.frequency;
+    }
+    if (this.form.controls['alert'].dirty) {
+      tgu.alert = this.tg.alert;
+    }
+    if (this.form.controls['weight'].dirty) {
+      tgu.weight = Number(this.tg.weight);
+    }
+    this.tgService
+      .putTalkgroup(tgu)
+      .pipe(
+        catchError(() => {
+          return of(null);
+        }),
+      )
+      .subscribe((event) => {
+        this.router.navigate(['/talkgroups/']);
+      });
+  }
+}
--- a/client/admin/src/app/talkgroups/talkgroups.component.css
+++ b/client/admin/src/app/talkgroups/talkgroups.component.css
--- a/client/admin/src/app/talkgroups/talkgroups.component.html
+++ b/client/admin/src/app/talkgroups/talkgroups.component.html
@ -0,0 +1,31 @@
+<a href="#" class="btn btn-primary" routerLink="/talkgroups/import">Import</a>
+<div class="w-100 justify-center overflow-x-auto">
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Sys</th>
+        <th>Sys ID</th>
+        <th>Name</th>
+        <th>TG ID</th>
+          <th>Learned</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (tg of talkgroups$ | async; track tg.id) {
+        <tr>
+          <td>{{ tg.system.name }}</td>
+          <td>{{ tg.system.id }}</td>
+          <td>{{ tg.name }}</td>
+          <td>{{ tg.tgid }}</td>
+          <td>{{ tg?.learned ? 'Y' : '' }}</td>
+          <td>
+            <a routerLink="/talkgroups/{{ tg.system.id }}/{{ tg.tgid }}"
+              ><ng-icon name="ionCreateOutline"></ng-icon
+            ></a>
+          </td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>
--- a/client/admin/src/app/talkgroups/talkgroups.component.spec.ts
+++ b/client/admin/src/app/talkgroups/talkgroups.component.spec.ts
@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TalkgroupsComponent } from './talkgroups.component';
+
+describe('TalkgroupsComponent', () => {
+  let component: TalkgroupsComponent;
+  let fixture: ComponentFixture<TalkgroupsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TalkgroupsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TalkgroupsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/talkgroups/talkgroups.component.ts
+++ b/client/admin/src/app/talkgroups/talkgroups.component.ts
@ -0,0 +1,43 @@
+import { Component, inject } from '@angular/core';
+import { TalkgroupService } from './talkgroups.service';
+import { Talkgroup } from '../talkgroup';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { ionCreateOutline } from '@ng-icons/ionicons';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { RouterModule, RouterOutlet, RouterLink } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'talkgroups',
+  standalone: true,
+  imports: [
+    NgIconComponent,
+    RouterOutlet,
+    RouterModule,
+    RouterLink,
+    CommonModule,
+  ],
+  templateUrl: './talkgroups.component.html',
+  styleUrl: './talkgroups.component.css',
+  providers: [provideIcons({ ionCreateOutline })],
+})
+export class TalkgroupsComponent {
+  selectedSys: number = 0;
+  selectedId: number = 0;
+  talkgroups$!: Observable<Talkgroup[]>;
+  tgService: TalkgroupService = inject(TalkgroupService);
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.talkgroups$ = this.route.paramMap.pipe(
+      switchMap((params) => {
+        this.selectedSys = Number(params.get('sys'));
+        this.selectedId = Number(params.get('tg'));
+        return this.tgService.getTalkgroups();
+      }),
+    );
+  }
+}
--- a/client/admin/src/app/talkgroups/talkgroups.service.spec.ts
+++ b/client/admin/src/app/talkgroups/talkgroups.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { APIService } from './api.service';
+
+describe('APIService', () => {
+  let service: APIService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(APIService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/client/admin/src/app/talkgroups/talkgroups.service.ts
+++ b/client/admin/src/app/talkgroups/talkgroups.service.ts
@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Talkgroup, TalkgroupUpdate } from '../talkgroup';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TalkgroupService {
+  loggedIn: boolean = false;
+  constructor(private http: HttpClient) {}
+
+  getTalkgroups(): Observable<Talkgroup[]> {
+    return this.http.get<Talkgroup[]>('/api/talkgroup/');
+  }
+
+  getTalkgroup(sys: number, tg: number): Observable<Talkgroup> {
+    return this.http.get<Talkgroup>(`/api/talkgroup/${sys}/${tg}`);
+  }
+
+  importRR(sysID: number, content: string): Observable<Talkgroup[]> {
+    return this.http.post<Talkgroup[]>('/api/talkgroup/import',
+                                      {systemID: sysID, type: 'radioreference', body: content});
+  }
+
+  putTalkgroup(tu: TalkgroupUpdate): Observable<Talkgroup> {
+    return this.http.put<Talkgroup>(
+      `/api/talkgroup/${tu.system_id}/${tu.tgid}`,
+      tu,
+    );
+  }
+}
--- a/client/admin/src/assets/Warnes.ttf
+++ b/client/admin/src/assets/Warnes.ttf
--- a/client/admin/src/index.html
+++ b/client/admin/src/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <title>Admin</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
--- a/client/admin/src/main.ts
+++ b/client/admin/src/main.ts
@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);
--- a/client/admin/src/styles.css
+++ b/client/admin/src/styles.css
@ -0,0 +1,9 @@
+/* You can add global styles to this file, and also import other style files */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Warnes";
+  src: url("./assets/Warnes.ttf");
+}
--- a/client/admin/tailwind.config.js
+++ b/client/admin/tailwind.config.js
@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: ["./src/**/*.{html,ts}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: true,
+    styled: true,
+    themes: true,
+    base: true,
+    utils: true,
+    logs: true,
+    rtl: false,
+  },
+};
--- a/client/admin/tsconfig.app.json
+++ b/client/admin/tsconfig.app.json
@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}
--- a/client/admin/tsconfig.json
+++ b/client/admin/tsconfig.json
@ -0,0 +1,30 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/client/admin/tsconfig.spec.json
+++ b/client/admin/tsconfig.spec.json
@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}