@lobb-js/lobb-ext-reports 0.1.33 → 0.3.1

package/extensions/reports/relations.ts

@@ -0,0 +1,17 @@
+import type { Lobb, RelationsConfig } from "@lobb-js/core";
+
+export function relations(lobb: Lobb): RelationsConfig {
+  const relations: RelationsConfig = [
+    {
+      from: {
+        collection: "reports_charts",
+        field: "report_id",
+      },
+      to: {
+        collection: "reports_dashboards",
+        field: "id",
+      },
+    },
+  ];
+  return relations;
+}

package/extensions/reports/studio/tests/analytics.spec.ts

@@ -0,0 +1,26 @@
+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/extensions/reports/studio/tests/package.json

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

package/extensions/reports/studio/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/extensions/reports/studioExtension.json

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

package/extensions/reports/tests/configs/simple.ts

@@ -0,0 +1,55 @@
+import type { Config } from "@lobb-js/core";
+import extension from "../../index.ts";
+
+export const simpleConfig: Config = {
+  project: {
+    name: "Lobb",
+    force_sync: true,
+  },
+  database: {
+    host: "localhost",
+    port: 5432,
+    username: "test",
+    password: "test",
+    database: "*",
+  },
+  web_server: {
+    host: "0.0.0.0",
+    port: 0,
+    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/extensions/reports/tests/reports.test.ts

@@ -0,0 +1,105 @@
+import { Lobb } from "@lobb-js/core";
+import { afterAll, beforeAll, describe, expect, it } from "bun:test";
+import { faker } from "@faker-js/faker";
+import { simpleConfig } from "./configs/simple.ts";
+
+describe("Reports operations", () => {
+  let lobb: Lobb;
+  let baseUrl: string;
+
+  beforeAll(async () => {
+    lobb = await Lobb.init(simpleConfig);
+    baseUrl = `http://127.0.0.1:${lobb.webServer.port}`;
+  });
+
+  afterAll(async () => {
+    await lobb.close();
+  });
+
+  it("should execute the query of the Report successfully", async () => {
+    const response1 = await fetch(
+      `${baseUrl}/api/collections/reports_dashboards`,
+      {
+        method: "POST",
+        body: JSON.stringify({
+          data: {
+            name: "test report",
+            description: "test description",
+          },
+        }),
+      },
+    );
+    const result2 = await response1.json();
+    const reportId = result2.data.id;
+
+    // creating a chart
+    const response = await fetch(
+      `${baseUrl}/api/collections/reports_charts`,
+      {
+        method: "POST",
+        body: JSON.stringify({
+          data: {
+            report_id: reportId,
+            title: "test report",
+            description: "test description",
+            chart: `async function chart(query: QueryFn) {
+              const entries = await query("SELECT EXTRACT(MONTH FROM created_at) AS month, CAST(SUM(amount) AS DECIMAL) AS totalDonations FROM donations GROUP BY EXTRACT(MONTH FROM created_at) ORDER BY month ASC");
+              return {
+                type: 'table',
+                input: {
+                  data: entries
+                }
+              };
+            }`,
+          },
+        }),
+      },
+    );
+    const result1 = await response.json();
+    const chartId = result1.data.id;
+
+    // create donations
+    faker.seed(1);
+    const donations = Array.from({ length: 50 }, () => ({
+      donor_name: faker.person.fullName(),
+      amount: faker.finance.amount({
+        min: 10,
+        max: 1000,
+      }),
+      created_at: faker.date.between({
+        from: "2023-01-01",
+        to: "2023-12-31",
+      }).toISOString(),
+    }));
+    await lobb.collectionService.createMany({
+      collectionName: "donations",
+      data: donations,
+    });
+
+    // execute the query and get the results
+    const response2 = await fetch(
+      `${baseUrl}/api/collections/reports_charts/${chartId}?action=run_query`,
+    );
+    const result = await response2.json();
+
+    expect(result).toEqual({
+      type: "table",
+      input: {
+        data: [
+          { month: "1", totaldonations: "755.23" },
+          { month: "2", totaldonations: "1629.79" },
+          { month: "3", totaldonations: "3286.90" },
+          { month: "4", totaldonations: "2506.34" },
+          { month: "5", totaldonations: "471.05" },
+          { month: "6", totaldonations: "396.11" },
+          { month: "7", totaldonations: "3451.62" },
+          { month: "8", totaldonations: "3245.77" },
+          { month: "9", totaldonations: "1641.96" },
+          { month: "10", totaldonations: "703.91" },
+          { month: "11", totaldonations: "4452.67" },
+          { month: "12", totaldonations: "2028.52" },
+        ],
+      },
+    });
+  });
+});

package/lobb.ts

@@ -0,0 +1,55 @@
+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/package.json

@@ -1,31 +1,55 @@
 {
   "name": "@lobb-js/lobb-ext-reports",
-  "version": "0.1.33",
+  "version": "0.3.1",
+  "license": "AGPL-3.0-only",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./extensions/reports/index.ts",
+    "./studio": {
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
   },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "test": "bun run test:lobb && bun run test:studio",
+    "test:lobb": "bun test extensions/reports/tests",
+    "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",
+    "prepare": "svelte-kit sync || echo ''",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "prepublishOnly": "./scripts/prepublish.sh",
+    "postpublish": "./scripts/postpublish.sh",
+    "package": "svelte-package --input extensions/reports/studio",
+    "dev:studio": "vite dev",
+    "build:studio": "vite build"
   },
   "dependencies": {
+    "@lobb-js/core": "0.13.1",
     "chart.js": "^4.4.8",
-    "lodash-es": "^4.17.21"
+    "hono": "^4.7.0",
+    "lodash-es": "^4.17.21",
+    "openapi-types": "^12.1.3"
   },
   "devDependencies": {
-    "@lobb-js/studio": "0.3.3",
+    "@faker-js/faker": "^9.6.0",
+    "@playwright/test": "^1.58.2",
+    "@lobb-js/studio": "0.7.1",
     "@lucide/svelte": "^0.563.1",
+    "@sveltejs/adapter-node": "^5.5.4",
+    "@sveltejs/kit": "^2.55.0",
     "@sveltejs/vite-plugin-svelte": "6.2.1",
+    "@sveltejs/package": "^2.5.7",
     "@tailwindcss/vite": "^4.1.18",
     "@tsconfig/svelte": "^5.0.6",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.1",
+    "bun-types": "latest",
     "clsx": "^2.1.1",
     "svelte": "^5.49.1",
     "svelte-check": "^4.3.4",

package/scripts/postpublish.sh

@@ -0,0 +1,12 @@
+#!/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

@@ -0,0 +1,17 @@
+#!/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

@@ -0,0 +1,12 @@
+<!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

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

package/studio/routes/+layout.ts

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

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

@@ -0,0 +1,6 @@
+<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,8 +1,24 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import adapter from '@sveltejs/adapter-node';
 
-/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
-export default {
-  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
-}
+/** @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

@@ -0,0 +1,11 @@
+# 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

@@ -19,9 +19,9 @@
     "moduleDetection": "force",
     "baseUrl": ".",
     "paths": {
-      "$lib": ["./src/lib"],
-      "$lib/*": ["./src/lib/*"]
+      "$lib": ["./studio/lib"],
+      "$lib/*": ["./studio/lib/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+  "include": ["studio/**/*.ts", "studio/**/*.js", "studio/**/*.svelte"]
 }

package/tsconfig.json

@@ -1,7 +1,13 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
 }

package/vite.config.ts

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

package/Dockerfile

@@ -1,29 +0,0 @@
-# Build stage
-FROM node:22-alpine AS build
-
-WORKDIR /app
-
-# Copy package files.
-COPY package*.json ./
-
-# Install dependencies
-RUN npm install
-
-# Copy source code
-COPY . .
-
-# Build the application
-RUN npm run build
-
-# Production stage
-FROM nginx:alpine
-
-# Copy built assets
-COPY --from=build /app/dist /usr/share/nginx/html
-
-# Copy nginx config
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]

package/components.json

@@ -1,16 +0,0 @@
-{
-	"$schema": "https://shadcn-svelte.com/schema.json",
-	"tailwind": {
-		"css": "src/app.css",
-		"baseColor": "slate"
-	},
-	"aliases": {
-		"components": "$lib/components",
-		"utils": "$lib/utils",
-		"ui": "$lib/components/ui",
-		"hooks": "$lib/hooks",
-		"lib": "$lib"
-	},
-	"typescript": true,
-	"registry": "https://shadcn-svelte.com/registry"
-}

package/extension.types.ts

@@ -1,28 +0,0 @@
-// TODO: Import these types from @lobb-js/studio once available
-export interface Extension {
-  name: string;
-  onStartup?: (utils: ExtensionUtils) => void;
-  components?: Record<string, any>;
-  dashboardNavs?: {
-    top?: NavItem[];
-    middle?: NavItem[];
-    bottom?: NavItem[];
-  };
-}
-
-export interface NavItem {
-  label: string;
-  icon?: any;
-  href?: string;
-  onclick?: () => void;
-  navs?: NavItem[];
-}
-
-export interface ExtensionUtils {
-  components: {
-    Icons: Record<string, any>;
-  };
-  location: {
-    navigate: (path: string) => void;
-  };
-}

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lobb Studio</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

package/nginx.conf

@@ -1,17 +0,0 @@
-server {
-    listen 80;
-    server_name localhost;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # Strip /studio prefix (Traefik forwards full path without stripping)
-    location /studio {
-        rewrite ^/studio/?(.*)$ /$1 break;
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Fallback for direct/local access
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-}