inicontent 1.0.0

package/app/composables/useDashboardData.ts

@@ -0,0 +1,310 @@
+import { flattenSchema } from "inibase/utils";
+import Inison from "inison";
+import renderLabel from "~/composables/renderLabel";
+import { generateSearchString } from "~/composables/search";
+
+type WidgetDataResult = {
+	value: Ref<number | null>;
+	data: Ref<Item[]>;
+	total: Ref<number>;
+	groups: Ref<{ name: string; value: number }[]>;
+	timeSeries: Ref<{ date: string; value: number }[]>;
+	loading: Ref<boolean>;
+	refresh: () => Promise<void>;
+};
+
+export function useDashboardData(
+	widget: Widget,
+	databaseSlug: string,
+	dateRangeOverride?: Ref<WidgetDateRange | undefined>,
+): WidgetDataResult {
+	const config = useRuntimeConfig();
+	const database = useState<Database>("database");
+	const sessionID = useScopedCookie<string>("sid", database.value?.slug);
+	const Language = useScopedCookie<LanguagesType>(
+		"language",
+		database.value?.slug,
+	);
+
+	const value = ref<number | null>(null);
+	const data = ref<Item[]>([]);
+	const total = ref(0);
+	const groups = ref<{ name: string; value: number }[]>([]);
+	const timeSeries = ref<{ date: string; value: number }[]>([]);
+	const loading = ref(false);
+
+	function getDateRangeMs(range?: WidgetDateRange): number | null {
+		const day = 86400000;
+		switch (range) {
+			case "7d":
+				return 7 * day;
+			case "30d":
+				return 30 * day;
+			case "90d":
+				return 90 * day;
+			case "1y":
+				return 365 * day;
+			default:
+				return null;
+		}
+	}
+
+	function groupByDate(
+		items: Item[],
+		dateField: string,
+		range?: WidgetDateRange,
+	) {
+		const map = new Map<string, number>();
+		for (const item of items) {
+			const raw = item[dateField];
+			if (!raw) continue;
+			const d = new Date(raw as number);
+			const rangeMs = getDateRangeMs(range);
+			let key: string;
+			if (!rangeMs || rangeMs <= 30 * 86400000) {
+				key = d.toISOString().slice(0, 10);
+			} else if (rangeMs <= 90 * 86400000) {
+				const weekStart = new Date(d);
+				weekStart.setDate(d.getDate() - d.getDay());
+				key = weekStart.toISOString().slice(0, 10);
+			} else {
+				key = d.toISOString().slice(0, 7);
+			}
+			map.set(key, (map.get(key) ?? 0) + 1);
+		}
+		return Array.from(map.entries())
+			.sort(([a], [b]) => a.localeCompare(b))
+			.map(([date, value]) => ({ date, value }));
+	}
+
+	function getFieldLabel(item: Item, field: string): string {
+		const raw = item[field];
+		if (raw == null) return "unknown";
+		if (typeof raw === "object") {
+			const sourceTable = database.value?.tables?.find(
+				(t) => t.slug === widget.table,
+			);
+			const schema = sourceTable?.schema
+				? flattenSchema(sourceTable.schema as any)
+				: [];
+			const fieldDef = schema.find((f: Field) => f.key === field);
+			if (fieldDef?.table) {
+				const refTable = database.value?.tables?.find(
+					(t) => t.slug === fieldDef.table,
+				);
+				return renderLabel(refTable, raw as Item) || String(raw);
+			}
+			return String(raw);
+		}
+		return String(raw);
+	}
+
+	function groupByField(items: Item[], field: string) {
+		const map = new Map<string, number>();
+		for (const item of items) {
+			const val = getFieldLabel(item, field);
+			map.set(val, (map.get(val) ?? 0) + 1);
+		}
+		return Array.from(map.entries())
+			.sort(([, a], [, b]) => b - a)
+			.map(([name, value]) => ({ name, value }));
+	}
+
+	function getColumnsForField(field: string): string[] {
+		const sourceTable = database.value?.tables?.find(
+			(t) => t.slug === widget.table,
+		);
+		if (!sourceTable?.columns) return [field];
+		// Find dot-path columns that start with this field (e.g. "المساحة.name")
+		const nested = sourceTable.columns.filter(
+			(col) => col.startsWith(`${field}.`) || col === `${field}.*`,
+		);
+		// Always include the field itself + any nested sub-columns for label rendering
+		return nested.length ? [field, ...nested] : [field];
+	}
+
+	function isRecord(value: unknown): value is Record<string, unknown> {
+		return typeof value === "object" && value !== null && !Array.isArray(value);
+	}
+
+	function combineSameFieldValues(
+		existing: unknown,
+		incoming: unknown,
+	): unknown {
+		if (existing === undefined) return incoming;
+		if (existing === incoming) return existing;
+		// Reuse the backend-supported grouped shape:
+		// { field: { and: { 0: "...", 1: "..." } } }
+		const existingGroup =
+			isRecord(existing) && isRecord(existing.and)
+				? { ...(existing.and as Record<string, unknown>) }
+				: null;
+		if (existingGroup) {
+			existingGroup[Object.keys(existingGroup).length.toString()] =
+				String(incoming);
+			return { and: existingGroup };
+		}
+		return { and: { "0": String(existing), "1": String(incoming) } };
+	}
+
+	function mergeWhere(
+		a?: Record<string, any>,
+		b?: Record<string, any>,
+	): Record<string, any> | undefined {
+		if (!a) return b;
+		if (!b) return a;
+		// Both are { and: {...}, or: {...} } — merge each group, keeping
+		// both values when date-range and search target the same field.
+		const and: Record<string, unknown> = { ...(a.and ?? {}) };
+		for (const [key, value] of Object.entries(b.and ?? {})) {
+			and[key] = combineSameFieldValues(and[key], value);
+		}
+		const merged: Record<string, any> = { and };
+		const or = { ...(a.or ?? {}), ...(b.or ?? {}) };
+		if (Object.keys(or).length) merged.or = or;
+		if (!Object.keys(and).length) delete merged.and;
+		return Object.keys(merged).length ? merged : undefined;
+	}
+
+	async function fetchItems(opts: {
+		perPage?: number;
+		sort?: Record<string, number>;
+		where?: Record<string, any>;
+		columns?: string[];
+	}): Promise<apiResponse<Item[]>> {
+		const slug =
+			database.value?.slug === "inicontent" && !databaseSlug
+				? ""
+				: `${databaseSlug}/`;
+		return $fetch<apiResponse<Item[]>>(
+			`${config.public.apiBase}${slug}${widget.table}`,
+			{
+				params: {
+					locale: Language.value,
+					[`${databaseSlug}_sid`]: sessionID.value,
+					options: Inison.stringify({
+						perPage: opts.perPage ?? 1000,
+						page: 1,
+						...(opts.sort ? { sort: opts.sort } : {}),
+						...(opts.columns ? { columns: opts.columns } : {}),
+					}),
+					...(opts.where ? { where: Inison.stringify(opts.where) } : {}),
+				},
+				credentials: "include",
+			},
+		);
+	}
+
+	async function refresh() {
+		loading.value = true;
+		try {
+			const activeDateRange = dateRangeOverride?.value ?? widget.dateRange;
+			const rangeMs = getDateRangeMs(activeDateRange);
+			const dateField = widget.dateField ?? "createdAt";
+			const whereDateFlat = rangeMs
+				? { [dateField]: `>${Date.now() - rangeMs}` }
+				: undefined;
+			// Use "display" mode so relative operators (r>=, etc.) stay as
+			// strings for the backend to resolve — same as Table view.
+			const whereSearch = widget.searchArray
+				? generateSearchString(widget.searchArray, "display")
+				: undefined;
+			// No saved filters → keep the exact legacy shape (flat) so
+			// existing dashboards send byte-identical queries. With filters,
+			// normalize the date into an `and` group and merge.
+			const where = whereSearch
+				? mergeWhere(
+						whereDateFlat ? { and: { ...whereDateFlat } } : undefined,
+						whereSearch as Record<string, any> | undefined,
+					)
+				: whereDateFlat;
+
+			switch (widget.type) {
+				case "counter": {
+					if (
+						widget.operation === "count" ||
+						!widget.operation ||
+						!widget.field
+					) {
+						const res = await fetchItems({
+							perPage: 1,
+							columns: ["id"],
+							where,
+						});
+						value.value = res.options?.total ?? 0;
+					} else {
+						const res = await fetchItems({
+							perPage: 1000,
+							columns: [widget.field],
+							where,
+						});
+						const items = res.result ?? [];
+						const nums = items
+							.map((i) => Number(i[widget.field!]))
+							.filter((n) => !Number.isNaN(n));
+						if (widget.operation === "sum")
+							value.value = nums.reduce((a, b) => a + b, 0);
+						else if (widget.operation === "max")
+							value.value = nums.length ? Math.max(...nums) : 0;
+						else if (widget.operation === "min")
+							value.value = nums.length ? Math.min(...nums) : 0;
+					}
+					break;
+				}
+				case "line": {
+					const res = await fetchItems({
+						perPage: 1000,
+						columns: [dateField],
+						sort: { [dateField]: 1 },
+						where,
+					});
+					data.value = res.result ?? [];
+					timeSeries.value = groupByDate(
+						data.value,
+						dateField,
+						activeDateRange,
+					);
+					break;
+				}
+				case "bar":
+				case "pie": {
+					const field = widget.groupBy ?? widget.field;
+					if (!field) break;
+					const res = await fetchItems({
+						perPage: 1000,
+						columns: getColumnsForField(field),
+						where,
+					});
+					data.value = res.result ?? [];
+					groups.value = groupByField(data.value, field);
+					break;
+				}
+				case "table": {
+					const res = await fetchItems({
+						perPage: widget.limit ?? 10,
+						sort: widget.sortField
+							? {
+									[widget.sortField]: widget.sortOrder === "desc" ? -1 : 1,
+								}
+							: undefined,
+						columns: widget.columns?.length ? widget.columns : undefined,
+						where,
+					});
+					data.value = res.result ?? [];
+					total.value = res.options?.total ?? 0;
+					break;
+				}
+			}
+		} catch (e) {
+			console.error(`[Dashboard] Widget "${widget.title}" fetch error:`, e);
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	if (dateRangeOverride) {
+		watch(dateRangeOverride, () => refresh());
+	}
+
+	return { value, data, total, groups, timeSeries, loading, refresh };
+}

package/app/composables/useDocumentThumbnail.ts

@@ -0,0 +1,351 @@
+import {
+	getCachedThumbnail,
+	cacheThumbnail,
+} from "~/composables/useThumbnailCache";
+import {
+	wordExtensions,
+	spreadsheetExtensions,
+	officeExtensions,
+} from "~/composables";
+
+const MAX_FILE_SIZE_RENDER = 10 * 1024 * 1024; // 10MB limit for Tier 2 rendering
+const THUMBNAIL_SIZE = 200;
+const TIMEOUT_MS = 30000;
+
+/**
+ * Tier 1: Extract embedded thumbnail from OOXML ZIP archive.
+ * Office files (docx, xlsx, pptx) are ZIP archives that often contain
+ * a pre-generated thumbnail at `docProps/thumbnail.jpeg` (or .png).
+ */
+async function extractEmbeddedThumbnail(
+	data: ArrayBuffer,
+): Promise<string | undefined> {
+	try {
+		const JSZip = (await import("jszip")).default;
+		const zip = await JSZip.loadAsync(data);
+
+		// Look for thumbnail in docProps/
+		const candidates = [
+			"docProps/thumbnail.jpeg",
+			"docProps/thumbnail.jpg",
+			"docProps/thumbnail.png",
+			"docProps/thumbnail.gif",
+		];
+
+		for (const path of candidates) {
+			const file = zip.file(path);
+			if (file) {
+				const blob = await file.async("blob");
+				const mimeType = path.endsWith(".png") ? "image/png" : "image/jpeg";
+
+				// Convert to data URL via canvas for consistent sizing
+				return await blobToThumbnailDataUrl(blob, mimeType);
+			}
+		}
+
+		// Also check case-insensitive and alternative paths
+		const allFiles = Object.keys(zip.files);
+		for (const filePath of allFiles) {
+			const lower = filePath.toLowerCase();
+			if (
+				lower.startsWith("docprops/thumbnail") &&
+				(lower.endsWith(".jpeg") ||
+					lower.endsWith(".jpg") ||
+					lower.endsWith(".png"))
+			) {
+				const file = zip.file(filePath);
+				if (file) {
+					const blob = await file.async("blob");
+					const mimeType = lower.endsWith(".png")
+						? "image/png"
+						: "image/jpeg";
+					return await blobToThumbnailDataUrl(blob, mimeType);
+				}
+			}
+		}
+	} catch (error) {
+		console.warn("Failed to extract embedded thumbnail:", error);
+	}
+	return undefined;
+}
+
+/**
+ * Convert a Blob to a square thumbnail data URL.
+ */
+async function blobToThumbnailDataUrl(
+	blob: Blob,
+	mimeType: string,
+): Promise<string | undefined> {
+	return new Promise((resolve) => {
+		const img = new Image();
+		const url = URL.createObjectURL(new Blob([blob], { type: mimeType }));
+
+		img.onload = () => {
+			try {
+				const canvas = document.createElement("canvas");
+				canvas.width = THUMBNAIL_SIZE;
+				canvas.height = THUMBNAIL_SIZE;
+				const ctx = canvas.getContext("2d");
+				if (!ctx) {
+					resolve(undefined);
+					return;
+				}
+
+				// Cover-crop: scale to fill the square, center the content
+				const scale = Math.max(
+					THUMBNAIL_SIZE / img.width,
+					THUMBNAIL_SIZE / img.height,
+				);
+				const scaledW = img.width * scale;
+				const scaledH = img.height * scale;
+				const offsetX = (THUMBNAIL_SIZE - scaledW) / 2;
+				const offsetY = (THUMBNAIL_SIZE - scaledH) / 2;
+
+				ctx.drawImage(img, offsetX, offsetY, scaledW, scaledH);
+				resolve(canvas.toDataURL("image/jpeg", 0.7));
+			} catch {
+				resolve(undefined);
+			} finally {
+				URL.revokeObjectURL(url);
+			}
+		};
+
+		img.onerror = () => {
+			URL.revokeObjectURL(url);
+			resolve(undefined);
+		};
+
+		img.src = url;
+	});
+}
+
+/**
+ * Tier 2a: Render first page of DOCX and capture as thumbnail.
+ */
+async function renderDocxFirstPage(
+	data: ArrayBuffer,
+): Promise<string | undefined> {
+	const container = document.createElement("div");
+	try {
+		// Offscreen container sized to A4 aspect ratio — clips to first page
+		Object.assign(container.style, {
+			position: "fixed",
+			left: "-9999px",
+			top: "0",
+			width: "800px",
+			height: "1100px",
+			overflow: "hidden",
+			background: "white",
+			zIndex: "-1",
+		});
+		document.body.appendChild(container);
+
+		const { renderAsync } = await import("docx-preview");
+		await renderAsync(data, container, undefined, {
+			breakPages: true,
+			ignoreLastRenderedPageBreak: false,
+			ignoreWidth: false,
+			ignoreHeight: false,
+			ignoreFonts: false,
+			inWrapper: true,
+			renderHeaders: false,
+			renderFooters: false,
+			renderFootnotes: false,
+			renderEndnotes: false,
+		});
+
+		const html2canvas = (await import("html2canvas")).default;
+		const canvas = await html2canvas(container, {
+			width: 800,
+			height: 1100,
+			scale: 0.5, // render at half-res for speed
+			useCORS: true,
+			logging: false,
+			backgroundColor: "#ffffff",
+		});
+
+		// Crop to square thumbnail
+		const thumbCanvas = document.createElement("canvas");
+		thumbCanvas.width = THUMBNAIL_SIZE;
+		thumbCanvas.height = THUMBNAIL_SIZE;
+		const ctx = thumbCanvas.getContext("2d");
+		if (!ctx) return undefined;
+
+		const scale = Math.max(
+			THUMBNAIL_SIZE / canvas.width,
+			THUMBNAIL_SIZE / canvas.height,
+		);
+		const scaledW = canvas.width * scale;
+		const scaledH = canvas.height * scale;
+		const offsetX = (THUMBNAIL_SIZE - scaledW) / 2;
+		const offsetY = (THUMBNAIL_SIZE - scaledH) / 2;
+
+		ctx.drawImage(canvas, offsetX, offsetY, scaledW, scaledH);
+		return thumbCanvas.toDataURL("image/jpeg", 0.7);
+	} catch (error) {
+		console.warn("Failed to render DOCX first page:", error);
+		return undefined;
+	} finally {
+		container.remove();
+	}
+}
+
+/**
+ * Tier 2b: Parse first rows of XLSX and capture as thumbnail.
+ */
+async function renderXlsxFirstPage(
+	data: ArrayBuffer,
+): Promise<string | undefined> {
+	const container = document.createElement("div");
+	try {
+		const XLSX = await import("xlsx");
+		const workbook = XLSX.read(data, {
+			type: "array",
+			sheetRows: 15, // only first 15 rows
+		});
+
+		const firstSheetName = workbook.SheetNames[0];
+		if (!firstSheetName) return undefined;
+
+		const sheet = workbook.Sheets[firstSheetName];
+		if (!sheet) return undefined;
+
+		const html = XLSX.utils.sheet_to_html(sheet);
+
+		// Offscreen container with spreadsheet styling
+		Object.assign(container.style, {
+			position: "fixed",
+			left: "-9999px",
+			top: "0",
+			width: "800px",
+			height: "600px",
+			overflow: "hidden",
+			background: "white",
+			zIndex: "-1",
+			fontFamily: "monospace, sans-serif",
+			fontSize: "12px",
+		});
+		document.body.appendChild(container);
+
+		container.innerHTML = `<style>
+			table { border-collapse: collapse; width: 100%; }
+			td, th {
+				border: 1px solid #d0d0d0;
+				padding: 4px 8px;
+				text-align: left;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				max-width: 150px;
+				font-size: 11px;
+			}
+			th { background: #f5f5f5; font-weight: 600; }
+			tr:nth-child(even) { background: #fafafa; }
+		</style>${html}`;
+
+		const html2canvas = (await import("html2canvas")).default;
+		const canvas = await html2canvas(container, {
+			width: 800,
+			height: 600,
+			scale: 0.5,
+			useCORS: true,
+			logging: false,
+			backgroundColor: "#ffffff",
+		});
+
+		// Crop to square thumbnail
+		const thumbCanvas = document.createElement("canvas");
+		thumbCanvas.width = THUMBNAIL_SIZE;
+		thumbCanvas.height = THUMBNAIL_SIZE;
+		const ctx = thumbCanvas.getContext("2d");
+		if (!ctx) return undefined;
+
+		const scale = Math.max(
+			THUMBNAIL_SIZE / canvas.width,
+			THUMBNAIL_SIZE / canvas.height,
+		);
+		const scaledW = canvas.width * scale;
+		const scaledH = canvas.height * scale;
+		const offsetX = (THUMBNAIL_SIZE - scaledW) / 2;
+		const offsetY = (THUMBNAIL_SIZE - scaledH) / 2;
+
+		ctx.drawImage(canvas, offsetX, offsetY, scaledW, scaledH);
+		return thumbCanvas.toDataURL("image/jpeg", 0.7);
+	} catch (error) {
+		console.warn("Failed to render XLSX first page:", error);
+		return undefined;
+	} finally {
+		container.remove();
+	}
+}
+
+/**
+ * Main entry point: generate a thumbnail for an Office document.
+ * Uses a tiered strategy:
+ *   Tier 1: Extract embedded thumbnail from OOXML ZIP (fast, any size)
+ *   Tier 2: Render first page client-side (DOCX/XLSX only, ≤10MB)
+ *   Tier 3: Return undefined → caller falls back to file-type icon
+ */
+export async function generateDocumentThumbnail(
+	asset: Asset,
+): Promise<string | undefined> {
+	if (!officeExtensions.includes(asset.extension)) return undefined;
+
+	const key = String(asset.id ?? asset.publicURL ?? asset.name);
+	const cacheKey = `doc-${key}`;
+
+	// Check cache first
+	const cached = await getCachedThumbnail(cacheKey);
+	if (cached) return cached;
+
+	// Fetch file as ArrayBuffer with timeout
+	let data: ArrayBuffer;
+	try {
+		const controller = new AbortController();
+		const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);
+		const response = await fetch(asset.publicURL, {
+			signal: controller.signal,
+		});
+		clearTimeout(timeoutId);
+
+		if (!response.ok) return undefined;
+		data = await response.arrayBuffer();
+	} catch (error) {
+		console.warn("Failed to fetch document for thumbnail:", error);
+		return undefined;
+	}
+
+	// Tier 1: Try embedded thumbnail extraction (works for all OOXML, any size)
+	const embedded = await extractEmbeddedThumbnail(data);
+	if (embedded) {
+		await cacheThumbnail(cacheKey, embedded);
+		return embedded;
+	}
+
+	// Tier 2: Render first page (only for small files)
+	if (asset.size && asset.size > MAX_FILE_SIZE_RENDER) {
+		console.warn(
+			`Document too large (${Math.round(asset.size / 1024 / 1024)}MB) for first-page rendering. Skipping.`,
+		);
+		return undefined;
+	}
+
+	let rendered: string | undefined;
+
+	if (wordExtensions.includes(asset.extension) && asset.extension !== "doc") {
+		rendered = await renderDocxFirstPage(data);
+	} else if (
+		spreadsheetExtensions.includes(asset.extension) &&
+		asset.extension !== "xls"
+	) {
+		rendered = await renderXlsxFirstPage(data);
+	}
+	// Legacy formats (doc, xls) and presentations (ppt, pptx without embedded thumb)
+	// → return undefined, caller shows icon
+
+	if (rendered) {
+		await cacheThumbnail(cacheKey, rendered);
+	}
+
+	return rendered;
+}

package/app/composables/useEcharts.ts

@@ -0,0 +1,33 @@
+let registered = false;
+
+export const VChart = defineAsyncComponent(async () => {
+	const [
+		{ use },
+		{ CanvasRenderer },
+		{ LineChart, BarChart, PieChart },
+		components,
+		{ default: VChartImpl },
+	] = await Promise.all([
+		import("echarts/core"),
+		import("echarts/renderers"),
+		import("echarts/charts"),
+		import("echarts/components"),
+		import("vue-echarts"),
+	]);
+
+	if (!registered) {
+		use([
+			CanvasRenderer,
+			LineChart,
+			BarChart,
+			PieChart,
+			components.TitleComponent,
+			components.TooltipComponent,
+			components.LegendComponent,
+			components.GridComponent,
+		]);
+		registered = true;
+	}
+
+	return VChartImpl;
+});