@lobb-js/lobb-ext-reports 0.3.2 → 0.4.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import type { Extension, ExtensionUtils } from "@lobb-js/studio";
+export default function extension(utils: ExtensionUtils): Extension;

package/dist/index.js

@@ -0,0 +1,20 @@
+import Reports from "./lib/components/pages/reports/index.svelte";
+import QueryAiButton from "./lib/components/dv_fields_buttons/query_ai_button/index.svelte";
+export default function extension(utils) {
+    return {
+        name: "reports",
+        components: {
+            "dvFields.topRight.reports_charts.query": QueryAiButton,
+            "pages.analytics": Reports,
+        },
+        dashboardNavs: {
+            middle: [
+                {
+                    href: "/studio/extensions/reports/analytics",
+                    icon: utils.components.Icons.ChartNoAxesCombined,
+                    label: "Analytics",
+                },
+            ],
+        },
+    };
+}

package/dist/lib/components/dv_fields_buttons/query_ai_button/index.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+
+	let { utils, value = $bindable() }: ExtensionProps = $props();
+
+	let systemMessage = `You are an expert assistant specialized in generating PostgreSQL read-only queries for analytics and reporting purposes. Your job is to translate user requests written in natural language into accurate, efficient, and well-structured SQL SELECT queries. Only respond with a raw PostgreSQL SELECT query — do not include any markdown formatting, code blocks, or explanations.. This is the schema of the database: (${JSON.stringify(utils.ctx.meta.collections)})`;
+
+	const componentProps: any = {
+		title: "Generate the query with AI",
+		description: "Describe to the AI the query you want to generate",
+		class: "h-7 px-3 text-xs font-normal",
+		variant: "outline",
+		// format: {
+		// 	type: 'json_object'
+		// },
+		messages: [
+			{
+				role: "system",
+				content: systemMessage,
+			},
+		],
+	};
+</script>
+
+<utils.components.LlmButton bind:value {...componentProps}>
+	Generate with AI
+</utils.components.LlmButton>

package/dist/lib/components/dv_fields_buttons/query_ai_button/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/pages/reports/components/chart.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import Table from "./charts/table.svelte";
+	import ChartJs from "./charts/chartJs.svelte";
+
+	interface Props extends ExtensionProps {
+		chartRecord: any;
+		onChartDeleted?: () => Promise<void>;
+		onChartEdited?: () => Promise<void>;
+		context?: Record<string, any>;
+	}
+
+	const {
+		chartRecord,
+		onChartDeleted,
+		onChartEdited,
+		context,
+		...props
+	}: Props = $props();
+
+	const utils = props.utils;
+	const { UpdateDetailViewButton, Button } = utils.components;
+	const icons = utils.components.Icons;
+	let dataPromise = $state(getChartData());
+
+	async function getChartData() {
+		const response = await utils.lobb.findOne(
+			"reports_charts",
+			chartRecord.id,
+			{
+				action: "run_query",
+				context: JSON.stringify(context),
+			},
+		);
+
+		const result = await response.json();
+		return result;
+	}
+
+	async function handleChartDelete() {
+		const result = await utils.showDialog(
+			"Are you sure?",
+			"This will delete that chart you selected.",
+		);
+		if (result) {
+			await utils.lobb.deleteOne("reports_charts", chartRecord.id);
+			if (onChartDeleted) {
+				await onChartDeleted();
+			}
+		}
+	}
+
+	async function handleEditOnSuccessfull() {
+		if (onChartEdited) {
+			await onChartEdited();
+		}
+	}
+</script>
+
+<div class="gridContainer h-96 rounded-md border bg-background">
+	<div class="flex items-center justify-between border-b p-2 text-sm">
+		<div>{chartRecord.title}</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>
+	</div>
+	<div class="flex items-center justify-center overflow-auto">
+		<svelte:boundary>
+			{#snippet failed(error, reset)}
+				<div
+					class="flex flex-col gap-2 p-2 bg-red-100 border border-red-500 h-full"
+				>
+					<div>{error}</div>
+					<button
+						class="border border-red-500 w-fit px-4 rounded-md hover:bg-red-500"
+						onclick={reset}>Reset</button
+					>
+				</div>
+			{/snippet}
+			{#await dataPromise}
+				<div
+					class="flex flex-col gap-4 h-full w-full absolute justify-center items-center"
+				>
+					<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 chart...
+						</div>
+						<div class="text-muted-foreground text-xs">
+							Loading chart's data
+						</div>
+					</div>
+				</div>
+			{:then data}
+				{#if data.type === "table"}
+					<Table input={data.input} {...props} />
+				{:else if data.type === "chartjs"}
+					<ChartJs input={data.input} {...props} />
+				{:else}
+					<div class="text-muted-foreground">
+						The ({data.type}) chart type is unsupported
+					</div>
+				{/if}
+			{/await}
+		</svelte:boundary>
+	</div>
+</div>
+
+<style>
+	.gridContainer {
+		display: grid;
+		grid-template-rows: auto 1fr;
+	}
+</style>

package/dist/lib/components/pages/reports/components/chart.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 ChartProps = typeof __propDef.props;
+export type ChartEvents = typeof __propDef.events;
+export type ChartSlots = typeof __propDef.slots;
+export default class Chart extends SvelteComponentTyped<ChartProps, ChartEvents, ChartSlots> {
+}
+export {};

package/dist/lib/components/pages/reports/components/charts/chartJs.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+
+	import { onMount } from 'svelte';
+	import { Chart } from 'chart.js/auto';
+	import { merge } from 'lodash-es';
+
+	interface Props extends ExtensionProps {
+		input: any;
+	}
+
+	const { input }: Props = $props();
+
+	let canvas: HTMLCanvasElement;
+	let chart: Chart;
+
+	onMount(() => {
+		if (canvas) {
+			const ctx = canvas.getContext('2d');
+			if (ctx) {
+				chart = new Chart(
+					ctx,
+					merge(
+						{
+							options: {
+								responsive: true,
+								maintainAspectRatio: false
+							}
+						},
+						$state.snapshot(input)
+					)
+				);
+			}
+		}
+
+		return () => {
+			chart?.destroy();
+		};
+	});
+</script>
+
+<canvas bind:this={canvas}></canvas>

package/dist/lib/components/pages/reports/components/charts/chartJs.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 ChartJsProps = typeof __propDef.props;
+export type ChartJsEvents = typeof __propDef.events;
+export type ChartJsSlots = typeof __propDef.slots;
+export default class ChartJs extends SvelteComponentTyped<ChartJsProps, ChartJsEvents, ChartJsSlots> {
+}
+export {};

package/dist/lib/components/pages/reports/components/charts/table.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+
+	interface Props extends ExtensionProps {
+		input: any;
+	}
+
+	const { input, utils }: Props = $props();
+
+	const { data } = input;
+	const { Table } = utils.components;
+
+	const columns = data.length
+		? Object.keys(data[0]).map((column) => {
+				return {
+					id: column,
+				};
+			})
+		: null;
+</script>
+
+<div class="relative h-full w-full">
+	{#if columns}
+		<Table
+			{data}
+			{columns}
+			selectByColumn={null}
+			localSorting={true}
+			showLastRowBorder={true}
+			showLastColumnBorder={true}
+			unifiedBgColor="bg-background"
+		></Table>
+	{:else}
+		<div class="flex justify-center items-center h-full">No Results</div>
+	{/if}
+</div>

package/dist/lib/components/pages/reports/components/charts/table.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 TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
+export {};

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

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import type { DateRange } from "bits-ui";
+	import Chart from "./chart.svelte";
+
+	interface Props extends ExtensionProps {
+		reportId: string;
+	}
+
+	const props: Props = $props();
+	const { intlDate } = props.utils;
+	const {
+		SidebarTrigger,
+		CreateDetailViewButton,
+		Icons,
+		RangeCalendarButton,
+	} = props.utils.components;
+
+	let dateRangeValue: DateRange = $state({
+		start: intlDate
+			.today(intlDate.getLocalTimeZone())
+			.subtract({ days: 30 }),
+		end: intlDate.today(intlDate.getLocalTimeZone()),
+	});
+	let context = $derived({
+		dateRange: {
+			start: dateRangeValue.start?.toString(),
+			end: dateRangeValue.end?.toString(),
+		},
+	});
+
+	let report: any = $state(null);
+	let chartsPromise = $state(getCharts());
+
+	async function getCharts() {
+		const reportsResponse = await props.utils.lobb.findAll(
+			"reports_dashboards",
+			{
+				sort: "id",
+				filter: {
+					id: props.reportId,
+				},
+			},
+		);
+		report = (await reportsResponse.json()).data[0];
+		const chartsResponse = await props.utils.lobb.findAll(
+			"reports_charts",
+			{
+				filter: {
+					report_id: report.id,
+				},
+			},
+		);
+		return (await chartsResponse.json()).data;
+	}
+
+	async function reloadChart() {
+		chartsPromise = new Promise(() => {});
+		chartsPromise = Promise.resolve(await getCharts());
+	}
+</script>
+
+<div class="gridContainer relative h-full w-full flex-col overflow-auto">
+	{#await chartsPromise}
+		<div
+			class="flex flex-col gap-4 h-full w-full absolute justify-center items-center"
+		>
+			<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-muted-foreground text-xs">
+					Loading all the charts of the selected dashboard
+				</div>
+			</div>
+		</div>
+	{:then charts}
+		<div
+			class="flex justify-between gap-2 overflow-auto 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>
+			<div class="flex gap-2 self-end">
+				<RangeCalendarButton bind:value={dateRangeValue} />
+				<CreateDetailViewButton
+					collectionName="reports_charts"
+					values={{
+						report_id: {
+							id: props.reportId,
+							name: report.name,
+						},
+					}}
+					variant="default"
+					class="h-7 px-3 text-xs font-normal"
+					Icon={Icons.Plus}
+					onSuccessfullSave={async () => await reloadChart()}
+				>
+					Create chart
+				</CreateDetailViewButton>
+			</div>
+		</div>
+		<div class="overflow-auto">
+			<div class="chartsGridContainer w-full flex-wrap gap-4 p-4">
+				{#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}
+					{#each charts as chart}
+						{#key context}
+							<Chart
+								chartRecord={chart}
+								onChartDeleted={async () => await reloadChart()}
+								onChartEdited={async () => await reloadChart()}
+								{context}
+								{...props}
+							/>
+						{/key}
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/await}
+</div>
+
+<style>
+	.gridContainer {
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: auto 1fr;
+	}
+
+	.chartsGridContainer {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+		grid-gap: 10px;
+	}
+</style>

package/dist/lib/components/pages/reports/components/report.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 ReportProps = typeof __propDef.props;
+export type ReportEvents = typeof __propDef.events;
+export type ReportSlots = typeof __propDef.slots;
+export default class Report extends SvelteComponentTyped<ReportProps, ReportEvents, ReportSlots> {
+}
+export {};

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

@@ -0,0 +1,141 @@
+<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 sideBarData: any = $state(null);
+	const {
+		CreateDetailViewButton,
+		UpdateDetailViewButton,
+		Sidebar,
+		SidebarTrigger,
+		Button,
+	} = utils.components;
+	const icons = utils.components.Icons;
+
+	getSideBarData();
+
+	async function getSideBarData(): Promise<void> {
+		const response = await utils.lobb.findAll("reports_dashboards", {
+			sort: "id",
+			filter: {},
+		});
+		const allReports = (await response.json()).data;
+
+		const localSideBarData: any = [];
+		for (let index = 0; index < allReports.length; index++) {
+			const report = allReports[index];
+			localSideBarData.push({
+				name: report.name,
+				icon: icons.FileChartColumn,
+				onclick: () => {
+					utils.location.navigate(
+						`${extensionPagePath}/${report.id}`,
+					);
+				},
+				meta: {
+					reportId: report.id,
+				},
+			});
+		}
+
+		sideBarData = localSideBarData;
+	}
+
+	async function handleReportDelete(recordId: any) {
+		const result = await utils.showDialog(
+			"Are you sure?",
+			"This will delete the report you selected.",
+		);
+		if (result) {
+			await utils.lobb.deleteOne("reports_dashboards", recordId);
+		}
+	}
+
+	function getReportID(location: Location) {
+		return location.url.pathname.split("/")[5];
+	}
+</script>
+
+<Sidebar title="Reports" data={sideBarData}>
+	{#snippet belowSearch()}
+		<div class="p-2 pb-0">
+			<CreateDetailViewButton
+				collectionName="reports_dashboards"
+				variant="outline"
+				class="h-7 w-full px-3 text-xs font-normal"
+				Icon={icons.Plus}
+				onSuccessfullSave={async (record: any) => {
+					await getSideBarData();
+					reportId = record.id;
+				}}
+			>
+				Create a report
+			</CreateDetailViewButton>
+		</div>
+	{/snippet}
+	{#snippet elementRightSide(item: any)}
+		{#if item.meta}
+			{@const reportId = item.meta.reportId}
+			<div>
+				<UpdateDetailViewButton
+					collectionName="reports_dashboards"
+					recordId={reportId}
+					variant="ghost"
+					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+					Icon={icons.Pencil}
+					onSuccessfullSave={async () => {
+						await getSideBarData();
+					}}
+				></UpdateDetailViewButton>
+				<Button
+					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+					variant="ghost"
+					size="icon"
+					Icon={icons.Trash}
+					onclick={async () => {
+						await handleReportDelete(reportId);
+						await getSideBarData();
+					}}
+				></Button>
+			</div>
+		{/if}
+	{/snippet}
+	<div class="relative h-full w-full bg-muted">
+		{#if reportId}
+			{#key reportId}
+				<Report {utils} {reportId} {...props} />
+			{/key}
+		{:else}
+			<div
+				class="flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+			>
+				<icons.CircleSlash2 class="opacity-50" size="50" />
+				<div class="flex flex-col items-center justify-center">
+					<div>No report selected</div>
+					<div class="text-xs">
+						Please select a report to view the details or create a
+						new one
+					</div>
+				</div>
+				<CreateDetailViewButton
+					collectionName="reports_dashboards"
+					variant="default"
+					class="h-7 px-3 text-xs font-normal"
+					Icon={icons.Plus}
+					onSuccessfullSave={async (record: any) =>
+						utils.location.navigate(`?report=${record.id}`)}
+				>
+					Create a report
+				</CreateDetailViewButton>
+			</div>
+			<div class="absolute top-0 left-0 p-2.5">
+				<SidebarTrigger />
+			</div>
+		{/if}
+	</div>
+</Sidebar>

package/dist/lib/components/pages/reports/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/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// place files you want to import through the `$lib` alias in this folder.

package/dist/lib/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/tests/analytics.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/analytics.spec.js

@@ -0,0 +1,17 @@
+import { test, expect } from "@playwright/test";
+const ANALYTICS_URL = "/studio/extensions/reports/analytics";
+test.describe("Analytics page", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto(ANALYTICS_URL);
+    });
+    test("shows the analytics page", async ({ page }) => {
+        await expect(page).toHaveURL(new RegExp(ANALYTICS_URL));
+    });
+    test("shows empty state when no report is selected", async ({ page }) => {
+        await expect(page.getByText("No report selected")).toBeVisible();
+        await expect(page.getByText("Please select a report to view the details or create a new one")).toBeVisible();
+    });
+    test("shows create a report button in empty state", async ({ page }) => {
+        await expect(page.getByRole("button", { name: "Create a report" }).first()).toBeVisible();
+    });
+});

package/dist/tests/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/dist/tests/playwright.config.cjs

@@ -0,0 +1,27 @@
+const { defineConfig, devices } = require("@playwright/test");
+
+module.exports = defineConfig({
+  testDir: __dirname,
+  testMatch: "**/*.spec.ts",
+  fullyParallel: true,
+  retries: 0,
+  expect: { timeout: 15000 },
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+    headless: true,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  // Automatically start the dev server before running tests
+  webServer: {
+    command: "bun run dev",
+    url: "http://localhost:3000/studio",
+    reuseExistingServer: true,
+    cwd: "../../../../", // packages/reports-ext root
+  },
+});

package/dist/tests/playwright.config.d.cts

@@ -0,0 +1,2 @@
+declare const _exports: import("@playwright/test").Config<import("@playwright/test").PlaywrightTestOptions & {}, import("@playwright/test").PlaywrightWorkerOptions & {}>;
+export = _exports;

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@lobb-js/lobb-ext-reports",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "AGPL-3.0-only",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "extensions",
+    "dist"
+  ],
   "exports": {
     ".": "./extensions/reports/index.ts",
     "./studio": {
@@ -19,7 +23,7 @@
     "test:studio": "bun --bun playwright test --config extensions/reports/studio/tests/playwright.config.cjs",
     "postinstall": "bun --bun playwright install chromium",
     "dev": "bun run lobb.ts",
-    "start": "LOBB_MODE=prod bun run lobb.ts",
+    "start": "bun run lobb.ts",
     "prepare": "svelte-kit sync || echo ''",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -30,7 +34,7 @@
     "build:studio": "vite build"
   },
   "dependencies": {
-    "@lobb-js/core": "^0.13.3",
+    "@lobb-js/core": "^0.14.0",
     "chart.js": "^4.4.8",
     "hono": "^4.7.0",
     "lodash-es": "^4.17.21",
@@ -39,7 +43,7 @@
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
     "@playwright/test": "^1.58.2",
-    "@lobb-js/studio": "^0.7.2",
+    "@lobb-js/studio": "^0.8.0",
     "@lucide/svelte": "^0.563.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/kit": "^2.55.0",

package/.dockerignore

@@ -1,7 +0,0 @@
-node_modules
-.git
-.gitignore
-*.md
-.vscode
-studio/node_modules
-studio/dist

package/.env.example

@@ -1,10 +0,0 @@
-# Database
-DATABASE_HOST=localhost
-DATABASE_PORT=5432
-DATABASE_USER=test
-DATABASE_PASSWORD=test
-DATABASE_NAME=reports-ext
-
-# Web Server
-WEB_SERVER_HOST=0.0.0.0
-WEB_SERVER_PORT=3000

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "deno.disablePaths": [
-    "studio"
-  ]
-}

package/CHANGELOG.md

@@ -1,141 +0,0 @@
-# Changelog
-All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
-
-- - -
-## reports-ext@0.3.2 - 2026-03-28
-#### Bug Fixes
-- update readme to trigger publish - (cf1e896) - malik ben
-- update READMEs to trigger republish of all packages - (2bd145d) - malik ben
-#### Miscellaneous Chores
-- (**version**) 0.26.2 - (1907933) - Cocogitto Bot
-
-- - -
-
-## reports-ext@0.3.1 - 2026-03-28
-#### Bug Fixes
-- adding readme to all packages - (3a9264a) - malik ben
-#### Miscellaneous Chores
-- add publishConfig and fix ext packages for npm publishing - (49747e9) - malik ben
-
-- - -
-
-## reports-ext@0.3.0 - 2026-03-28
-#### Features
-- (**reports-ext**) migrate to Bun - (3d9f927) - malik ben
-- (**reports-ext,storage-ext**) convert studio from Svelte SPA to SvelteKit - (3cd7f63) - malik ben
-- replace hasDashboardExtension with virtual:lobb-studio-extensions module - (437cb2e) - malik ben
-#### Bug Fixes
-- add /studio subpath exports to ext packages, update studio pages to use them - (c0b9a82) - malik ben
-- untrack .svelte-kit from mindhar, fix process leak and $lib imports, update ai sdk versions - (017f784) - malik ben
-- chaning $lib to relative path - (c6d9e8f) - malik ben
-#### Miscellaneous Chores
-- (**reports-ext**) move extension logic and tests to extensions/reports, flatten studio, add Playwright tests - (f814cbf) - malik ben
-- (**version**) 0.25.2 - (a62acb9) - Cocogitto Bot
-- (**version**) 0.25.1 - (afe7e69) - Cocogitto Bot
-- (**version**) 0.25.0 - (77a383c) - Cocogitto Bot
-- (**version**) 0.24.0 - (a8cb605) - Cocogitto Bot
-- (**version**) 0.23.0 - (60f357e) - Cocogitto Bot
-- (**version**) 0.22.0 - (6510e32) - Cocogitto Bot
-- (**version**) 0.21.0 - (c973aa9) - Cocogitto Bot
-- (**version**) 0.20.0 - (06cc303) - Cocogitto Bot
-- add dev:studio/build:studio scripts, fix Dockerfiles, remove --build flag - (1595975) - malik ben
-- add prepublish/postpublish scripts to extension packages for standalone compatibility - (4d6108f) - malik ben
-- centralize studio app.css in @lobb-js/studio package, remove local copies - (05192dc) - malik ben
-- rename @lobb/ scope to @lobb-js/ across all packages and apps - (cce4ce0) - malik ben
-- add start/build scripts and gitignore build dir across all projects - (58f539d) - malik ben
-- update CLAUDE.md to enforce no-commit-without-explicit-instruction rule - (6d63a42) - malik ben
-- remove all deno.json and deno.lock files from the monorepo - (84ca5d4) - malik ben
-- replace workspace:* with exact versions in all package.json files - (74fbdb7) - malik ben
-- rename __studio to studio and remove unused studio dirs - (77fb932) - malik ben
-- rename studio directory to __studio for faker-ext, llm-ext, mail-ext, reports-ext, storage-ext - (47e754a) - malik ben
-- bump deno docker image to 2.6.6 across all Dockerfiles - (a2865b4) - malik ben
-
-- - -
-
-## reports-ext@0.2.0 - 2026-03-01
-#### Features
-- (**mindhar**) add storage extension integration - (bca6368) - malik ben
-#### Miscellaneous Chores
-- (**version**) 0.18.0 - (efc553f) - Cocogitto Bot
-- (**version**) 0.17.0 - (4174f0c) - Cocogitto Bot
-- (**version**) 0.16.0 - (9508655) - Cocogitto Bot
-- (**version**) 0.14.11 - (ad92b61) - Cocogitto Bot
-- (**version**) 0.14.8 - (0e6c1cb) - Cocogitto Bot
-
-- - -
-
-## reports-ext@0.1.34 - 2026-02-22
-#### Bug Fixes
-- coggito publishing packages order fix - (573c75e) - malik ben
-#### Miscellaneous Chores
-- (**version**) 0.14.3 - (76abe92) - Cocogitto Bot
-
-- - -
-
-## reports-ext@0.1.33 - 2026-02-22
-#### Bug Fixes
-- made the collectionService become an property in the main lobb object - (146e4cb) - malik ben
-
-- - -
-
-## reports-ext@0.1.32 - 2026-02-21
-#### Bug Fixes
-- using default export instead of named export for extensions - (37dd485) - malik ben
-#### Refactoring
-- moving ui_input into the ui property of the field - (8a9edf0) - Malik Najjar
-
-- - -
-
-## reports-ext@0.1.31 - 2026-02-20
-#### Bug Fixes
-- fix reports extension race condition - (6dd72ba) - Malik Najjar
-#### Miscellaneous Chores
-- (**version**) 0.13.2 - (39b0145) - Cocogitto Bot
-
-- - -
-
-## reports-ext@0.1.30 - 2026-02-19
-#### Bug Fixes
-- concurent racing fix - (0eeda5f) - malik ben
-
-- - -
-
-## reports-ext@0.1.29 - 2026-02-19
-#### Bug Fixes
-- adding testing logs - (69ab047) - malik ben
-#### Miscellaneous Chores
-- (**version**) 0.12.3 - (cd06fc0) - Cocogitto Bot
-- (**version**) 0.12.2 - (35b2ff3) - Cocogitto Bot
-- (**version**) 0.12.1 - (c548105) - Cocogitto Bot
-- adding testing logs - (ef42d92) - malik ben
-
-- - -
-
-## reports-ext@0.1.28 - 2026-02-19
-#### Bug Fixes
-- making the reports work - (1b87561) - Malik Najjar
-#### Miscellaneous Chores
-- (**version**) 0.11.1 - (659ebd3) - Cocogitto Bot
-- (**version**) 0.11.0 - (3f4f47e) - Cocogitto Bot
-- (**version**) 0.10.0 - (5d79b6e) - Cocogitto Bot
-- (**version**) 0.8.0 - (fdee7ca) - Cocogitto Bot
-
-- - -
-
-## reports-ext@0.1.27 - 2026-02-15
-#### Bug Fixes
-- fix deno publish issue - (e8dcc4f) - malik ben
-- issue fix - (63d66d3) - malik ben
-#### Miscellaneous Chores
-- (**version**) 0.5.5 - (d4dedeb) - Cocogitto Bot
-- (**version**) 0.5.4 - (1ca3970) - Cocogitto Bot
-- (**version**) 0.5.3 - (dcdb9cb) - Cocogitto Bot
-- (**version**) 0.5.2 - (aa66e29) - Cocogitto Bot
-- (**version**) 0.5.1 - (41b7c35) - Cocogitto Bot
-- (**version**) 0.5.0 - (af63147) - Cocogitto Bot
-- (**version**) 0.4.4 - (eaed3b4) - Cocogitto Bot
-- (**version**) 0.4.3 - (ea9ec49) - Cocogitto Bot
-
-- - -
-
-Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto).

package/lobb.ts

@@ -1,55 +0,0 @@
-import { Lobb } from "@lobb-js/core";
-import { extension } from "./extensions/reports/index.ts";
-
-Lobb.init({
-  project: {
-    name: "Reports Extension Test",
-    force_sync: true,
-  },
-  database: {
-    host: "localhost",
-    port: 5432,
-    username: "test",
-    password: "test",
-    database: "reports_ext_dev",
-  },
-  web_server: {
-    host: "0.0.0.0",
-    port: 3000,
-    cors: {
-      origin: "*",
-    },
-  },
-  extensions: [
-    extension(),
-  ],
-  collections: {
-    donations: {
-      indexes: {},
-      fields: {
-        id: {
-          type: "integer",
-        },
-        donor_name: {
-          type: "string",
-          length: 255,
-          validators: {
-            required: true,
-          },
-        },
-        amount: {
-          type: "decimal",
-          validators: {
-            required: true,
-          },
-        },
-        created_at: {
-          type: "date",
-          pre_processors: {
-            default: "{{ now }}",
-          },
-        },
-      },
-    },
-  },
-});

package/scripts/postpublish.sh

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-# Postpublish script for @lobb-js/lobb-ext-reports
-# Reverts package.json exports and cleans dist to avoid uncommitted changes
-
-echo "📝 Reverting package.json exports to development mode..."
-jq '."exports"["./studio"] = "./extensions/reports/studio/index.ts"' package.json > package.json.tmp && mv package.json.tmp package.json
-
-echo "🧹 Cleaning dist directory..."
-rm -rf dist
-
-echo "✅ Postpublish complete"

package/scripts/prepublish.sh

@@ -1,17 +0,0 @@
-#!/bin/bash
-
-# Prepublish script for @lobb-js/lobb-ext-reports
-# Builds the studio package and updates exports for publishing
-
-echo "📦 Building studio package..."
-bun run package
-
-if [ $? -ne 0 ]; then
-    echo "❌ Build failed"
-    exit 1
-fi
-
-echo "📝 Updating package.json exports for publishing..."
-jq '."exports"["./studio"] = {"svelte": "./dist/index.js", "types": "./dist/index.d.ts"}' package.json > package.json.tmp && mv package.json.tmp package.json
-
-echo "✅ Prepublish complete"

package/studio/app.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/vite.svg" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>

package/studio/routes/+layout.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import "@lobb-js/studio/app.css";
-
-	let { children } = $props();
-</script>
-
-{@render children()}

package/studio/routes/+layout.ts

@@ -1 +0,0 @@
-export const ssr = false;

package/studio/routes/[...path]/+page.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-	import { Studio } from "@lobb-js/studio";
-	import { env } from "$env/dynamic/public";
-</script>
-
-<Studio lobbUrl={env.PUBLIC_LOBB_URL} />

package/svelte.config.js

@@ -1,24 +0,0 @@
-import adapter from '@sveltejs/adapter-node';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	kit: {
-		adapter: adapter(),
-		paths: {
-			base: '/studio'
-		},
-		files: {
-			lib: 'studio/lib',
-			routes: 'studio/routes',
-			appTemplate: 'studio/app.html',
-			assets: 'public',
-			hooks: {
-				server: 'studio/hooks.server',
-				client: 'studio/hooks.client',
-			},
-			params: 'studio/params',
-		}
-	}
-};
-
-export default config;

package/todo.md

@@ -1,11 +0,0 @@
-# high priority
-
-- make it have two collections. `reports` and `charts`
-- create the endpoint that runs the query of the report
-- you would have global configuration that can effect all reports. or local
-  configuration that effects a single report
-- there will be a sidebar with created reports. reports is a page that contains
-  multiple widgets of reports
-- some widgets can be expanded to see more details and control over it
-- support realtime by specifying a script that implements it efficienlty instead
-  of executing the hole query each time

package/tsconfig.app.json

@@ -1,27 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "types": ["svelte", "vite/client"],
-    "noEmit": true,
-    "allowArbitraryExtensions": true,
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
-     */
-    "allowJs": true,
-    "checkJs": true,
-    "moduleDetection": "force",
-    "baseUrl": ".",
-    "paths": {
-      "$lib": ["./studio/lib"],
-      "$lib/*": ["./studio/lib/*"]
-    }
-  },
-  "include": ["studio/**/*.ts", "studio/**/*.js", "studio/**/*.svelte"]
-}

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true
-  }
-}

package/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,8 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-import tailwindcss from "@tailwindcss/vite";
-import { lobbStudioPlugins } from '@lobb-js/studio/vite-plugins';
-
-export default defineConfig({
-	plugins: [tailwindcss(), sveltekit(), ...lobbStudioPlugins()],
-});