Merge pull request #17 from baasith6/azure-mvp-deploy

ui poliahed

Author: baasith6

backend/Contracts/Dtos.cs

@@ -131,6 +131,10 @@ public record AnalyticsSummaryResponse(
     int AnalyzedClips,
     Dictionary<string, int> AlertsByType);
 
+public record AnalyticsTrendPoint(string Date, int Count);
+
+public record AnalyticsTrendsResponse(int Days, List<AnalyticsTrendPoint> Points);
+
 public record ConnectorLogEntry(
     Guid Id,
     Guid StoreId,

backend/Controllers/AnalyticsController.cs

@@ -55,4 +55,35 @@ join cam in _db.Cameras on c.CameraId equals cam.Id
                 .ToDictionary(g => g.Key, g => g.Count())
         ));
     }
+
+    [HttpGet("trends")]
+    public async Task<ActionResult<AnalyticsTrendsResponse>> Trends([FromQuery] Guid? storeId, [FromQuery] int days = 7)
+    {
+        if (storeId is not null && !TenantAccess.CanAccessStore(User, storeId.Value))
+            return Forbid();
+
+        days = Math.Clamp(days, 1, 90);
+        var since = DateTimeOffset.UtcNow.Date.AddDays(1 - days);
+
+        var alerts = TenantAccess.ScopeAlerts(_db.Alerts, User).AsNoTracking();
+        if (storeId is not null)
+            alerts = alerts.Where(a => a.StoreId == storeId);
+
+        var rows = await alerts
+            .Where(a => a.CreatedAt >= since)
+            .GroupBy(a => a.CreatedAt.Date)
+            .Select(g => new { Date = g.Key, Count = g.Count() })
+            .ToListAsync();
+
+        var map = rows.ToDictionary(r => DateOnly.FromDateTime(r.Date), r => r.Count);
+        var points = new List<AnalyticsTrendPoint>();
+        for (var i = 0; i < days; i++)
+        {
+            var d = DateOnly.FromDateTime(since.AddDays(i));
+            map.TryGetValue(d, out var count);
+            points.Add(new AnalyticsTrendPoint(d.ToString("MM-dd"), count));
+        }
+
+        return Ok(new AnalyticsTrendsResponse(days, points));
+    }
 }

dashboard/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.includePackageJsonAutoImports": "auto"
+}

dashboard/angular.json

@@ -52,7 +52,10 @@
               }
             ],
             "styles": [
-              "src/styles.css"
+              "src/app/shared/styles/_tokens.css",
+              "src/styles.css",
+              "src/app/shared/styles/_utilities.css",
+              "src/app/shared/styles/_components.css"
             ],
             "scripts": []
           },
@@ -82,6 +85,9 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "proxyConfig": "proxy.conf.json"
+          },
           "configurations": {
             "production": {
               "buildTarget": "dashboard:build:production"
@@ -110,7 +116,10 @@
               }
             ],
             "styles": [
-              "src/styles.css"
+              "src/app/shared/styles/_tokens.css",
+              "src/styles.css",
+              "src/app/shared/styles/_utilities.css",
+              "src/app/shared/styles/_components.css"
             ],
             "scripts": []
           }

dashboard/e2e/smoke.spec.ts

@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test';
+
+const email = process.env.E2E_EMAIL || 'admin@onevo.local';
+const password = process.env.E2E_PASSWORD || 'Admin123!';
+
+async function login(page: import('@playwright/test').Page): Promise<void> {
+  await page.goto('/login');
+  await page.getByLabel('Email').fill(email);
+  await page.getByLabel('Password').fill(password);
+  await page.getByRole('button', { name: 'Sign in' }).click();
+  await expect(page).toHaveURL(/\/app\/alerts/);
+  await expect(page.getByRole('heading', { name: 'Alerts' })).toBeVisible();
+}
+
+test.describe('onetix dashboard smoke', () => {
+  test('login lands on alerts', async ({ page }) => {
+    await login(page);
+  });
+
+  test('alerts list loads and opens alert review', async ({ page }) => {
+    await login(page);
+    const reviewBtn = page.getByRole('button', { name: 'Review' }).first();
+    const hasAlerts = await reviewBtn.isVisible().catch(() => false);
+    test.skip(!hasAlerts, 'No alerts in seeded data');
+
+    await reviewBtn.click();
+    await expect(page).toHaveURL(/\/app\/alerts\/.+/);
+    await expect(page.getByRole('heading', { name: 'Review' })).toBeVisible();
+    await page.getByRole('button', { name: 'Submit review' }).click();
+    await expect(page.getByText('Review saved.')).toBeVisible({ timeout: 15_000 });
+  });
+
+  test('store filter updates query param', async ({ page }) => {
+    await login(page);
+    const storeSelect = page.getByLabel('Store filter');
+    const optionCount = await storeSelect.locator('option').count();
+    test.skip(optionCount < 2, 'Need at least one store besides All stores');
+
+    const firstStoreValue = await storeSelect.locator('option').nth(1).getAttribute('value');
+    const firstStoreLabel = await storeSelect.locator('option').nth(1).textContent();
+    test.skip(!firstStoreValue, 'No store option value');
+
+    await storeSelect.selectOption(firstStoreValue!);
+    await expect(page).toHaveURL(new RegExp(`storeId=${firstStoreValue}`));
+    await expect(storeSelect).toHaveValue(firstStoreValue!);
+    if (firstStoreLabel) {
+      await expect(storeSelect.locator('option:checked')).toHaveText(firstStoreLabel.trim());
+    }
+  });
+});
+
+test.describe('mobile shell', () => {
+  test.use({ viewport: { width: 390, height: 844 } });
+
+  test('drawer opens and closes', async ({ page }) => {
+    await login(page);
+    const menuBtn = page.getByRole('button', { name: 'Toggle menu' });
+    await menuBtn.click();
+    await expect(page.locator('.sidebar.open')).toBeVisible();
+    await expect(menuBtn).toHaveAttribute('aria-expanded', 'true');
+
+    await page.locator('.sidebar-backdrop.open').click();
+    await expect(page.locator('.sidebar.open')).toHaveCount(0);
+    await expect(menuBtn).toHaveAttribute('aria-expanded', 'false');
+  });
+});

dashboard/package-lock.json

@@ -6,7 +6,9 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui"
   },
   "private": true,
   "dependencies": {
@@ -17,6 +19,7 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "chart.js": "^4.5.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -25,7 +28,9 @@
     "@angular-devkit/build-angular": "^19.2.27",
     "@angular/cli": "^19.2.27",
     "@angular/compiler-cli": "^19.2.0",
+    "@playwright/test": "^1.52.0",
     "@types/jasmine": "~5.1.0",
+    "@types/node": "^26.1.2",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

dashboard/package.json

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: 'list',
+  timeout: 60_000,
+  use: {
+    baseURL: process.env.E2E_BASE_URL || 'http://localhost:4200',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'mobile',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+  webServer: process.env.E2E_SKIP_WEBSERVER
+    ? undefined
+    : {
+        command: 'npm run start',
+        url: 'http://localhost:4200',
+        reuseExistingServer: !process.env.CI,
+        timeout: 120_000,
+      },
+});

dashboard/playwright.config.ts

@@ -0,0 +1,7 @@
+{
+  "/api": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "changeOrigin": true
+  }
+}

dashboard/proxy.conf.json

@@ -1,10 +1,31 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { filter, Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet],
   template: `<router-outlet></router-outlet>`,
 })
-export class AppComponent {}
+export class AppComponent implements OnInit, OnDestroy {
+  private sub?: Subscription;
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.applyBodyClass(this.router.url);
+    this.sub = this.router.events
+      .pipe(filter((e) => e instanceof NavigationEnd))
+      .subscribe((e) => this.applyBodyClass((e as NavigationEnd).urlAfterRedirects));
+  }
+
+  ngOnDestroy(): void {
+    this.sub?.unsubscribe();
+  }
+
+  private applyBodyClass(url: string): void {
+    const locked = url.startsWith('/app');
+    document.body.classList.toggle('shell-locked', locked);
+  }
+}