@lobb-js/lobb-ext-reports 0.11.0 → 0.12.0

package/dist/lib/components/pages/shared_report/index.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponentTyped<IndexProps, IndexEvents, IndexSlots> {
+}
+export {};

package/dist/lib/components/reportBody.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import GridStackComponent from "./gridStack.svelte";
+	import Chart from "./pages/reports/components/chart.svelte";
+
+	interface Props extends ExtensionProps {
+		reportId: string | number;
+		editable?: boolean;
+		allowEdit?: boolean;
+		showChartHeaders?: boolean;
+		onLayoutChange?: (changes: any[]) => void;
+		onChartClick?: (event: any, elements: any[], chart: any) => void;
+		onReportLoaded?: (report: any) => void;
+		onReady?: (api: { reload: () => Promise<void> }) => void;
+	}
+
+	const {
+		reportId,
+		editable = false,
+		allowEdit = false,
+		showChartHeaders = true,
+		onLayoutChange,
+		onChartClick,
+		onReportLoaded,
+		onReady,
+		...props
+	}: Props = $props();
+
+	const utils = props.utils;
+
+	const { Icons } = utils.components;
+
+	let report: any = $state(null);
+	let charts: any[] = $state([]);
+	let loading = $state(true);
+
+	async function loadCharts({ showLoading = true } = {}) {
+		if (showLoading) loading = true;
+		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
+			sort: "id",
+			filter: { id: reportId },
+		});
+		report = (await reportsRes.json()).data[0];
+		if (onReportLoaded) onReportLoaded(report);
+		if (!report) {
+			if (showLoading) loading = false;
+			return;
+		}
+
+		const chartsRes = await utils.lobb.findAll("reports_charts", {
+			filter: { report_id: report.id },
+		});
+		charts = (await chartsRes.json()).data;
+		if (showLoading) loading = false;
+	}
+
+	function getChartGridSize(chart: any): Record<string, unknown> {
+		return {
+			"gs-w": chart.col_span ?? 6,
+			"gs-h": chart.row_span ?? 2,
+			"gs-auto-position": "true",
+		};
+	}
+
+	onMount(async () => {
+		await loadCharts();
+		if (onReady) onReady({ reload: () => loadCharts() });
+	});
+</script>
+
+{#if loading}
+	<div class="flex h-full w-full flex-col items-center justify-center gap-4">
+		<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div class="text-muted-foreground">Loading the dashboard...</div>
+			<div class="text-xs text-muted-foreground">Loading all the charts of the selected dashboard</div>
+		</div>
+	</div>
+{:else if !report}
+	<div class="flex h-full w-full flex-col items-center justify-center gap-4">
+		<Icons.CircleSlash2 class="opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div class="text-muted-foreground">Report not found</div>
+			<div class="text-xs text-muted-foreground">The report you're looking for doesn't exist or couldn't be loaded</div>
+		</div>
+	</div>
+{:else if charts.length === 0}
+	<div class="flex w-full flex-col items-center justify-center gap-4 p-10 text-muted-foreground">
+		<Icons.CircleSlash2 class="opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div>No charts available</div>
+			<div class="text-xs">Create a new chart to fill this report page</div>
+		</div>
+	</div>
+{:else}
+	{#key charts}
+		<GridStackComponent {editable} {allowEdit} {onLayoutChange}>
+			{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
+				<div
+					class="grid-stack-item"
+					data-gs-id={chart.id}
+					{...getChartGridSize(chart)}
+				>
+					<div class="grid-stack-item-content">
+						<Chart
+							chartRecord={chart}
+							showHeader={showChartHeaders}
+							onChartDeleted={async () => await loadCharts()}
+							onChartEdited={async () => await loadCharts()}
+							{onChartClick}
+							{utils}
+						/>
+					</div>
+				</div>
+			{/each}
+		</GridStackComponent>
+	{/key}
+{/if}

package/dist/lib/components/reportBody.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ReportBodyProps = typeof __propDef.props;
+export type ReportBodyEvents = typeof __propDef.events;
+export type ReportBodySlots = typeof __propDef.slots;
+export default class ReportBody extends SvelteComponentTyped<ReportBodyProps, ReportBodyEvents, ReportBodySlots> {
+}
+export {};

package/extensions/reports/index.ts

@@ -3,21 +3,49 @@ import type { Extension } from "@lobb-js/core";
 import packageJson from "../../package.json" with { type: "json" };
 import { collections } from "./collections/index.ts";
 import { migrations } from "./migrations.ts";
-import { meta } from "./meta.ts";
-import { collectionRoutes } from "./collectionRoutes.ts";
+import { meta as buildMeta } from "./meta.ts";
+import { workflows } from "./workflows.ts";
 import { openapi } from "./openapi.ts";
 import { relations } from "./relations.ts";
 
-export default function extension(): Extension {
+type ShareReadPermission =
+  | true
+  | { filter?: Record<string, unknown>; fields?: Record<string, true> };
+
+export interface ReportsExtensionConfig {
+  /**
+   * Domain-specific collections a share recipient needs read access to in
+   * addition to `reports_dashboards` + `reports_charts`. Reports often
+   * drill down into other collections (e.g. risk charts opening the
+   * `risks` table on click) — those collections have to be readable by
+   * the share token or the drill-down requests will 403.
+   *
+   * @example
+   * reports({
+   *   shareReadAccess: {
+   *     risks: true,
+   *     risk_config: true,
+   *   },
+   * })
+   */
+  shareReadAccess?: Record<string, ShareReadPermission>;
+}
+
+export default function extension(config: ReportsExtensionConfig = {}): Extension {
   return {
     version: packageJson.version,
     name: "reports",
     icon: "ChartNoAxesCombined",
-    collectionRoutes: collectionRoutes,
+    workflows: workflows,
     collections: collections,
     relations: relations,
     migrations: migrations,
-    meta: meta,
+    // Surface the config to the studio via meta so the Share button can
+    // include it in the per-report share permissions snapshot.
+    meta: async (lobb) => ({
+      ...(await buildMeta(lobb)),
+      shareReadAccess: config.shareReadAccess ?? {},
+    }),
     openapi: openapi,
   };
 }

package/extensions/reports/studio/index.ts

@@ -1,20 +1,27 @@
 import type { Extension, ExtensionUtils } from "@lobb-js/studio";
 import Reports from "./lib/components/pages/reports/index.svelte";
+import SharedReport from "./lib/components/pages/shared_report/index.svelte";
 import QueryAiButton from "./lib/components/dv_fields_buttons/query_ai_button/index.svelte";
 
+export { default as ReportBody } from "./lib/components/reportBody.svelte";
+
 export default function extension(utils: ExtensionUtils): Extension {
   return {
     name: "reports",
     components: {
       "dvFields.topRight.reports_charts.query": QueryAiButton,
-      "pages.analytics": Reports,
+      "pages.dashboards": Reports,
+      // Lives at /studio/public/reports/shared_report — no auth required, the
+      // page itself swaps the LobbClient bearer to the share_token in the URL.
+      "publicPages.shared_report": SharedReport,
     },
     dashboardNavs: {
       middle: [
         {
-          href: "/studio/extensions/reports/analytics",
+          href: "/studio/extensions/reports/dashboards",
           icon: utils.components.Icons.ChartNoAxesCombined,
-          label: "Analytics",
+          label: "Dashboards",
+          represents: "reports_dashboards",
         },
       ],
     },

package/extensions/reports/studio/lib/components/gridStack.svelte

@@ -9,6 +9,7 @@
 		column?: number;
 		cellHeight?: string;
 		editable?: boolean;
+		allowEdit?: boolean;
 		onLayoutChange?: (layout: LayoutItem[]) => void;
 		children: Snippet;
 	}
@@ -17,6 +18,7 @@
 		column = 12,
 		cellHeight = "150px",
 		editable = $bindable(false),
+		allowEdit = false,
 		onLayoutChange,
 		children,
 	}: Props = $props();
@@ -29,7 +31,10 @@
 	let containerWidth = $state(0);
 	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	let editMode = $derived(containerWidth >= 1200);
+	// Edit mode only ever turns on when the parent explicitly opts in.
+	// Without allowEdit, container width is irrelevant — the grid stays
+	// disabled forever.
+	let editMode = $derived(allowEdit && containerWidth >= 1200);
 
 	// Keep editable in sync so parent can read it
 	$effect(() => { editable = editMode; });
@@ -112,8 +117,10 @@
 	});
 </script>
 
-<div class="grid-stack" bind:this={gridEl}>
-	{@render children()}
+<div class="grid-stack-wrap">
+	<div class="grid-stack" bind:this={gridEl}>
+		{@render children()}
+	</div>
 </div>
 
 <style>
@@ -122,9 +129,14 @@
 		position: absolute;
 	}
 
+	.grid-stack-wrap {
+		overflow-x: hidden;
+		width: 100%;
+	}
+
 	:global(.grid-stack) {
 		background: transparent;
-		padding: 0.5rem;
+		margin: 0 -0.5rem;
 	}
 
 	:global(.grid-stack-placeholder > .placeholder-content) {

package/extensions/reports/studio/lib/components/pages/reports/components/chart.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from "svelte";
 	import type { ExtensionProps } from "@lobb-js/studio";
 	import Table from "./charts/table.svelte";
 	import ChartJs from "./charts/chartJs.svelte";
@@ -13,6 +14,7 @@
 
 	interface Props extends ExtensionProps {
 		chartRecord: any;
+		showHeader?: boolean;
 		onChartDeleted?: () => Promise<void>;
 		onChartEdited?: () => Promise<void>;
 		onChartClick?: (event: ChartClickEvent) => void;
@@ -20,6 +22,7 @@
 
 	const {
 		chartRecord,
+		showHeader = true,
 		onChartDeleted,
 		onChartEdited,
 		onChartClick,
@@ -30,6 +33,27 @@
 	const { UpdateDetailViewButton, Button, Tooltip } = utils.components;
 	const icons = utils.components.Icons;
 
+	// Button visibility comes from the caller's actual permissions on
+	// reports_charts. A logged-in admin sees edit + delete; a viewer without
+	// those grants (including a share-token recipient) doesn't see either.
+	let canUpdate = $state(false);
+	let canDelete = $state(false);
+
+	onMount(async () => {
+		const [updateAllowed, deleteAllowed] = await Promise.all([
+			utils.emitEvent("auth.canAccess", {
+				collection: "reports_charts",
+				action: "update",
+			}),
+			utils.emitEvent("auth.canAccess", {
+				collection: "reports_charts",
+				action: "delete",
+			}),
+		]);
+		canUpdate = updateAllowed === true;
+		canDelete = deleteAllowed === true;
+	});
+
 	function findCustomChartComponent(type: string): any {
 		const extensions = utils.ctx?.extensions ?? {};
 		for (const ext of Object.values(extensions) as any[]) {
@@ -73,39 +97,47 @@
 	}
 </script>
 
-<div class="gridContainer h-full rounded-md border bg-background">
-	<div class="flex items-center justify-between border-b p-2 text-sm">
-		<div class="flex items-center gap-1.5">
-			<span>{chartRecord.title}</span>
-			{#if chartRecord.description}
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<icons.CircleHelp class="text-muted-foreground" size={14} />
-					</Tooltip.Trigger>
-					<Tooltip.Content class="max-w-64 text-xs">
-						{chartRecord.description}
-					</Tooltip.Content>
-				</Tooltip.Root>
-			{/if}
-		</div>
-		<div class="flex">
-			<UpdateDetailViewButton
-				collectionName="reports_charts"
-				recordId={chartRecord.id}
-				variant="ghost"
-				class="h-7 w-7 text-muted-foreground hover:bg-transparent"
-				Icon={icons.Pencil}
-				onSuccessfullSave={handleEditOnSuccessfull}
-			></UpdateDetailViewButton>
-			<Button
-				class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-				variant="ghost"
-				size="icon"
-				Icon={icons.Trash}
-				onclick={handleChartDelete}
-			></Button>
+<div
+	class="grid h-full rounded-md border bg-background {showHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]'}"
+>
+	{#if showHeader}
+		<div class="flex items-center justify-between border-b p-2 text-sm">
+			<div class="flex items-center gap-1.5">
+				<span>{chartRecord.title}</span>
+				{#if chartRecord.description}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<icons.CircleHelp class="text-muted-foreground" size={14} />
+						</Tooltip.Trigger>
+						<Tooltip.Content class="max-w-64 text-xs">
+							{chartRecord.description}
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+			</div>
+			<div class="flex">
+				{#if canUpdate}
+					<UpdateDetailViewButton
+						collectionName="reports_charts"
+						recordId={chartRecord.id}
+						variant="ghost"
+						class="h-7 w-7 text-muted-foreground hover:bg-transparent"
+						Icon={icons.Pencil}
+						onSuccessfullSave={handleEditOnSuccessfull}
+					></UpdateDetailViewButton>
+				{/if}
+				{#if canDelete}
+					<Button
+						class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+						variant="ghost"
+						size="icon"
+						Icon={icons.Trash}
+						onclick={handleChartDelete}
+					></Button>
+				{/if}
+			</div>
 		</div>
-	</div>
+	{/if}
 	<div class="flex min-h-0 items-center justify-center overflow-hidden">
 		<svelte:boundary>
 			{#snippet failed(error, reset)}
@@ -157,10 +189,3 @@
 		</svelte:boundary>
 	</div>
 </div>
-
-<style>
-	.gridContainer {
-		display: grid;
-		grid-template-rows: auto 1fr;
-	}
-</style>

package/extensions/reports/studio/lib/components/pages/reports/components/charts/table.svelte

@@ -28,7 +28,6 @@
 			localSorting={true}
 			showLastRowBorder={true}
 			showLastColumnBorder={true}
-			unifiedBgColor="bg-background"
 		></Table>
 	{:else}
 		<div class="flex justify-center items-center h-full">No Results</div>