@nauticana/sail 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing.",
   "main": "src/index.ts",
   "files": [

package/src/component/table/table_report.html

@@ -0,0 +1,26 @@
+<h2>{{ reportTitle() }}</h2>
+
+@if (errorMessage()) {
+    <p class="empty-state">{{ errorMessage() }}</p>
+} @else if (records().length === 0) {
+    <p class="empty-state">No data available.</p>
+} @else {
+    <table>
+        <thead>
+            <tr>
+                @for (column of displayedColumns(); track column) {
+                    <th>{{ titleCase(column) }}</th>
+                }
+            </tr>
+        </thead>
+        <tbody>
+            @for (record of records(); track $index) {
+                <tr>
+                    @for (column of displayedColumns(); track column) {
+                        <td>{{ record[column] }}</td>
+                    }
+                </tr>
+            }
+        </tbody>
+    </table>
+}

package/src/component/table/table_report.ts

@@ -0,0 +1,67 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { BaseAuthService } from "../../service/auth.service";
+import { RestURL } from "../../service/rest_url";
+
+@Component({
+    selector: 'table-report',
+    templateUrl: './table_report.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatCheckboxModule],
+})
+export class TableReport {
+    readonly apiName = input('');
+    readonly tableName = input('');
+
+    private readonly http = inject(HttpClient);
+    private readonly auth = inject(BaseAuthService);
+
+    readonly records = signal<Record<string, unknown>[]>([]);
+    readonly displayedColumns = signal<string[]>([]);
+    readonly errorMessage = signal('');
+
+    /**
+     * Report header text — long-form description from rest_report_header.
+     * Falls back to the title-cased table name only if the lookup misses
+     * (e.g. a brand-new report whose row hasn't been seeded yet).
+     */
+    readonly reportTitle = computed(() => {
+        const reportId = this.apiName().split('/').pop() ?? '';
+        return this.auth.getReport(reportId)?.Description || this.titleCase(this.tableName());
+    });
+
+    constructor() {
+        effect(() => {
+            const api = this.apiName();
+            if (!api) return;
+
+            if (!this.auth.canReport(api)) {
+                this.errorMessage.set('You do not have permission to view this report.');
+                return;
+            }
+            this.fetchReport(api);
+        });
+    }
+
+    private fetchReport(api: string) {
+        const url = RestURL.httpHost + '/api/' + api;
+        this.http.get<Record<string, unknown>[]>(url).subscribe({
+            next: (rows) => {
+                this.records.set(rows ?? []);
+                if (rows?.length) {
+                    this.displayedColumns.set(Object.keys(rows[0]));
+                }
+            },
+            error: (err) => {
+                this.errorMessage.set(err?.error ?? 'Failed to load report data.');
+            },
+        });
+    }
+
+    titleCase(str: string): string {
+        return str.replaceAll('_', ' ').toLowerCase().split(' ')
+            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+}

package/src/index.ts

@@ -15,6 +15,7 @@ export * from './component/table/table_search';
 export * from './component/table/table_edit';
 export * from './component/table/table_detail';
 export * from './component/table/table_lookup';
+export * from './component/table/table_report';
 export * from './component/navigation/navigation';
 export * from './component/login/login_component';
 export * from './component/login/register_component';

package/src/model/appdata.ts

@@ -106,10 +106,13 @@ export interface ReportParam {
 }
 
 export interface RestReport {
-  Id:        string;
-  Version:   string;
-  QueryName: string;
-  Params:    ReportParam[];
+  Id:          string;
+  Version:     string;
+  QueryName:   string;
+  // Long-form text rendered as the report page header. The short nav-rail
+  // label is application_menu_item.caption — no duplication here.
+  Description: string;
+  Params:      ReportParam[];
 }
 
 // 2FA / Trusted device types

package/src/service/auth.service.ts

@@ -443,8 +443,24 @@ export abstract class BaseAuthService {
     return this.cache.Apis[dictionaryId];
   }
 
+  /**
+   * keel emits Reports as `map[string]*RestReport` which serializes to a
+   * JSON object keyed by report id, not an array. The previous cast to
+   * `RestReport[]` was a type lie that produced an empty iteration in
+   * practice. Object.values is the correct unwrap.
+   */
   getReports(): RestReport[] {
-    return (this.cache?.['Reports'] as RestReport[]) ?? [];
+    const reports = this.cache?.['Reports'] as Record<string, RestReport> | undefined;
+    return reports ? Object.values(reports) : [];
+  }
+
+  /**
+   * Look up a single report by its id (e.g. 'scorecard' for /api/v1/analytic/scorecard).
+   * Returns undefined if Reports cache is missing or the id isn't registered.
+   */
+  getReport(id: string): RestReport | undefined {
+    const reports = this.cache?.['Reports'] as Record<string, RestReport> | undefined;
+    return reports?.[id];
   }
 
   canRead(tableName: string)   { return this.checkPermission('TABLE', 'SELECT', tableName); }
@@ -494,6 +510,7 @@ export abstract class BaseAuthService {
     // auth.service → TableSearch/TableList → BaseTable → auth.service
     const { TableSearch } = await import('../component/table/table_search');
     const { TableList } = await import('../component/table/table_list');
+    const { TableReport } = await import('../component/table/table_report');
 
     this.getAppData().pipe(take(1)).subscribe({
         next: (data: ApplicationData) => {
@@ -534,6 +551,17 @@ export abstract class BaseAuthService {
                             canActivate: [this.canActivate],
                             data: { tableName, apiName },
                         });
+                    } else if (this.getReport(page.ItemId)) {
+                        // Menu item id matches a row in rest_report_header →
+                        // render with TableReport. Report endpoints don't go
+                        // through the metadata-driven CRUD layer (apis cache),
+                        // so apiName here is just restUri (e.g. analytic/scorecard).
+                        children.push({
+                            path: page.ItemId,
+                            component: TableReport,
+                            canActivate: [this.canActivate],
+                            data: { tableName, apiName },
+                        });
                     } else if (page.FilterOnList) {
                         children.push({
                             path: page.ItemId,