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

package/README.md

@@ -1 +1,2 @@
 # @lobb-js/lobb-ext-reports
+

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import type { Extension, ExtensionUtils } from "@lobb-js/studio";
+export { default as ReportBody } from "./lib/components/reportBody.svelte";
 export default function extension(utils: ExtensionUtils): Extension;

package/dist/index.js

@@ -1,18 +1,24 @@
 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) {
     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/dist/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/dist/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/dist/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>

package/dist/lib/components/pages/reports/components/report.svelte

@@ -1,38 +1,31 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import GridStackComponent from "../../../gridStack.svelte";
-	import Chart from "./chart.svelte";
+	import ReportBody from "../../../reportBody.svelte";
 
-	const { reportId, utils, ...props }: { reportId: string; utils: any; [key: string]: any } = $props();
+	const { reportId, utils }: { reportId: string; utils: any } = $props();
 	const {
 		SidebarTrigger,
 		CreateDetailViewButton,
+		Button,
 		Icons,
 	} = utils.components;
 
 	let report: any = $state(null);
-	let charts: any[] = $state([]);
-	let loading = $state(true);
 	let saving = $state(false);
 	let editable = $state(false);
+	let canShare = $state(false);
+	let sharing = $state(false);
+	// Handle captured from ReportBody via its onReady callback — lets us
+	// trigger a reload of charts after creating a new one without duplicating
+	// the fetch logic here.
+	let body: { reload: () => Promise<void> } | undefined = $state();
 
-	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 (!report) {
-			if (showLoading) loading = false;
-			return;
-		}
+	function handleReportLoaded(r: any) {
+		report = r;
+	}
 
-		const chartsRes = await utils.lobb.findAll("reports_charts", {
-			filter: { report_id: report.id },
-		});
-		charts = (await chartsRes.json()).data;
-		if (showLoading) loading = false;
+	function handleReady(api: { reload: () => Promise<void> }) {
+		body = api;
 	}
 
 	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
@@ -47,10 +40,6 @@
 		saving = 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" };
-	}
-
 	function handleChartClick(_event: any, elements: any[], chart: any) {
 		if (!elements.length) return;
 		const { index, datasetIndex } = elements[0];
@@ -62,100 +51,124 @@
 		});
 	}
 
-	onMount(() => loadCharts());
+	async function checkSharePermission() {
+		const allowed = await utils.emitEvent("auth.canAccess", {
+			collection: "auth_shares",
+			action: "create",
+		});
+		canShare = allowed === true;
+	}
+
+	async function handleShare() {
+		sharing = true;
+		try {
+			const event = {
+				reportId: String(reportId),
+				report,
+				handled: false,
+			};
+			await utils.emitEvent("reports.share", event);
+			if (event.handled) return;
+
+			const basePermissions: Record<string, any> = {
+				reports_dashboards: { read: { filter: { id: Number(reportId) } } },
+				reports_charts: { read: { filter: { report_id: Number(reportId) } } },
+			};
+			const shareReadAccess = (utils.ctx.meta?.extensions?.reports?.shareReadAccess ?? {}) as Record<string, any>;
+			const extraPermissions: Record<string, any> = {};
+			for (const [collectionName, readGrant] of Object.entries(shareReadAccess)) {
+				extraPermissions[collectionName] = { read: readGrant };
+			}
+			const permissions = { ...basePermissions, ...extraPermissions };
+			const response = await utils.lobb.createOne("auth_shares", {
+				label: `Share for: ${report?.name ?? "report"}`,
+				permissions: JSON.stringify(permissions),
+				expires_in_seconds: 7 * 24 * 60 * 60,
+			});
+			if (!response.ok) {
+				const body = await response.json().catch(() => null);
+				utils.toast.error(body?.message ?? "Failed to create share");
+				return;
+			}
+			const body = await response.json();
+			const url = `${window.location.origin}/studio/public/reports/shared_report?report_id=${reportId}&share_token=${body.data.token}`;
+			await navigator.clipboard.writeText(url);
+			utils.toast.success("Share link copied to clipboard");
+		} catch (err) {
+			utils.toast.error(err instanceof Error ? err.message : "Failed to create share");
+		} finally {
+			sharing = false;
+		}
+	}
+
+	onMount(() => {
+		checkSharePermission();
+	});
 </script>
 
 <div class="report-layout">
-	{#if loading}
-		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
-			<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" style="grid-row: 1 / -1">
-			<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 class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
+		<div class="flex gap-2">
+			<div class="mt-1"><SidebarTrigger /></div>
+			<div class="flex flex-col justify-center">
+				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
 			</div>
 		</div>
-	{:else}
-		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
-			<div class="flex gap-2">
-				<div class="mt-1"><SidebarTrigger /></div>
-				<div class="flex flex-col justify-center">
-					<h2 class="font-medium text-primary">{report?.name}</h2>
-					<div class="text-xs text-muted-foreground">{report?.description}</div>
+		<div class="flex items-center gap-2 self-end">
+			{#if saving}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<Icons.LoaderCircle class="animate-spin" size={12} />
+					Saving...
 				</div>
-			</div>
-			<div class="flex items-center gap-2 self-end">
-				{#if saving}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<Icons.LoaderCircle class="animate-spin" size={12} />
-						Saving...
-					</div>
-				{:else if editable}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
-						Layout editable
-					</div>
-				{:else}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<div class="h-1.5 w-1.5 rounded-full bg-muted-foreground/40"></div>
-						Expand window to rearrange
-					</div>
-				{/if}
+			{:else if editable}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
+					Layout editable
+				</div>
+			{:else}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<div class="h-1.5 w-1.5 rounded-full bg-muted-foreground/40"></div>
+					Expand window to rearrange
+				</div>
+			{/if}
+			{#if canShare}
+				<Button
+					variant="outline"
+					class="h-7 px-3 text-xs font-normal"
+					Icon={sharing ? Icons.LoaderCircle : Icons.Share2}
+					disabled={sharing}
+					onclick={handleShare}
+				>
+					{sharing ? "Sharing..." : "Share"}
+				</Button>
+			{/if}
+			{#if report}
 				<CreateDetailViewButton
 					collectionName="reports_charts"
 					values={{ report_id: { id: reportId, name: report.name } }}
 					variant="default"
 					class="h-7 px-3 text-xs font-normal"
 					Icon={Icons.Plus}
-					onSuccessfullSave={async () => await loadCharts()}
+					onSuccessfullSave={async () => await body?.reload()}
 				>
 					Create chart
 				</CreateDetailViewButton>
-			</div>
-		</div>
-
-		<div class="charts-export-container overflow-auto p-2">
-			{#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 bind:editable onLayoutChange={handleLayoutChange}>
-						{#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}
-										onChartDeleted={async () => await loadCharts()}
-										onChartEdited={async () => await loadCharts()}
-										onChartClick={handleChartClick}
-										{utils}
-										{...props}
-									/>
-								</div>
-							</div>
-						{/each}
-					</GridStackComponent>
-				{/key}
 			{/if}
 		</div>
-	{/if}
+	</div>
+
+	<div class="charts-export-container overflow-auto p-2">
+		<ReportBody
+			{reportId}
+			{utils}
+			allowEdit
+			onLayoutChange={handleLayoutChange}
+			onChartClick={handleChartClick}
+			onReportLoaded={handleReportLoaded}
+			onReady={handleReady}
+		/>
+	</div>
 </div>
 
 <style>

package/dist/lib/components/pages/reports/index.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { ExtensionProps } from "@lobb-js/studio";
-	import type { Location } from "@wjfe/n-savant";
 	import Report from "./components/report.svelte";
 
 	const { utils, ...props }: ExtensionProps = $props();
 
-	let extensionPagePath = "/studio/extensions/reports/analytics";
-	let reportId: string | null = $derived(getReportID(utils.location));
+	let extensionPagePath = "/studio/extensions/reports/dashboards";
+	let reportId: string | null = $derived(utils.page.url.pathname.split("/")[5] ?? null);
 	let sideBarData: any = $state(null);
 	const {
 		CreateDetailViewButton,
@@ -34,9 +33,7 @@
 				name: report.name,
 				icon: icons.FileChartColumn,
 				onclick: () => {
-					utils.location.navigate(
-						`${extensionPagePath}/${report.id}`,
-					);
+					utils.goto(`${extensionPagePath}/${report.id}`);
 				},
 				meta: {
 					reportId: report.id,
@@ -57,12 +54,9 @@
 		}
 	}
 
-	function getReportID(location: Location) {
-		return location.url.pathname.split("/")[5];
-	}
 </script>
 
-<Sidebar title="Reports" data={sideBarData}>
+<Sidebar title="Dashboards" data={sideBarData}>
 	{#snippet belowSearch()}
 		<div class="p-2">
 			<CreateDetailViewButton
@@ -129,7 +123,7 @@
 					class="h-7 px-3 text-xs font-normal"
 					Icon={icons.Plus}
 					onSuccessfullSave={async (record: any) =>
-						utils.location.navigate(`?report=${record.id}`)}
+						utils.goto(`?report=${record.id}`)}
 				>
 					Create a report
 				</CreateDetailViewButton>

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import ReportBody from "../../reportBody.svelte";
+
+	const { utils }: { utils: any } = $props();
+	const { Icons } = utils.components;
+
+	// Pull share_token and report_id from the URL. The token is what
+	// authorises every request below — we install it as the LobbClient's
+	// Authorization header so the existing CRUD helpers work transparently.
+	// The report_id is what we render. Both come from the link minted by
+	// the "Share" button on the gated report view.
+	const params = new URLSearchParams(window.location.search);
+	const shareToken = params.get("share_token");
+	const reportId = params.get("report_id");
+
+	let ready = $state(false);
+	let report: any = $state(null);
+	let error: string | null = $state(null);
+
+	function handleReportLoaded(r: any) {
+		report = r;
+		if (!r) error = "The shared report could not be found.";
+	}
+
+	onMount(async () => {
+		if (!shareToken || !reportId) {
+			error = "This share link is missing required parameters.";
+			ready = true;
+			return;
+		}
+
+		// Swap the LobbClient's bearer to the share token for the duration
+		// of this page. The studio shell already short-circuited the auth
+		// gate for /studio/public/*, so there's no session header to clobber.
+		utils.lobb.setHeaders({ Authorization: `Bearer ${shareToken}` });
+
+		// Populate ctx.extensions.auth.permissions from the share's snapshot
+		// so client-side gates (auth.canAccess) match the server's enforcement.
+		// Reuses the same /me endpoint logged-in users hit — for a share
+		// bearer, meAlias short-circuits with { data: null, permissions }.
+		try {
+			const meRes = await utils.lobb.findOne("auth_users", "me");
+			if (meRes.ok) {
+				const meBody = await meRes.json();
+				if (!utils.ctx.extensions.auth) utils.ctx.extensions.auth = {};
+				utils.ctx.extensions.auth.permissions = meBody.permissions;
+				utils.ctx.extensions.auth.user = meBody.data;
+			}
+		} catch {
+			// Soft-fail — the page will still render, UI gates just default to
+			// hidden, and the server-side enforcement is the real safety net.
+		}
+
+		ready = true;
+	});
+</script>
+
+<div class="shared-report-layout">
+	{#if !ready}
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
+			<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 shared report...</div>
+			</div>
+		</div>
+	{:else if error}
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
+			<Icons.CircleSlash2 class="opacity-50" size="50" />
+			<div class="flex flex-col items-center justify-center">
+				<div class="text-muted-foreground">Unavailable</div>
+				<div class="text-xs text-muted-foreground">{error}</div>
+			</div>
+		</div>
+	{:else}
+		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
+			<div class="flex flex-col justify-center">
+				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
+			</div>
+			<div class="text-xs text-muted-foreground">Shared view</div>
+		</div>
+
+		<div class="bg-muted overflow-auto p-2">
+			<ReportBody reportId={reportId ?? ""} {utils} onReportLoaded={handleReportLoaded} />
+		</div>
+	{/if}
+
+	<!-- Subtle attribution on shared / public pages only. Sits over the
+		 charts area in the bottom-right; the gated dashboard never renders
+		 this component so customers' main UI stays unbranded. -->
+	<a
+		href="https://lobb.app"
+		target="_blank"
+		rel="noopener"
+		class="fixed bottom-2 right-6 text-[10px] text-muted-foreground/60 hover:text-muted-foreground"
+	>
+		Made with Lobb
+	</a>
+</div>
+
+<style>
+	.shared-report-layout {
+		display: grid;
+		grid-template-rows: auto 1fr;
+		width: 100%;
+		height: 100%;
+	}
+</style>