inicontent 1.0.0

package/app/components/Dashboard/Widget/BarChart.vue

@@ -0,0 +1,73 @@
+<template>
+	<NSpin :show="loading">
+		<div style="height: 250px">
+			<VChart v-if="groups.length" :option="chartOption" autoresize />
+			<NEmpty v-else :description="t('noData')" />
+		</div>
+	</NSpin>
+</template>
+
+<script lang="ts" setup>
+import { useDashboardData } from "~/composables/useDashboardData";
+import { VChart } from "~/composables/useEcharts";
+
+const props = defineProps<{
+	widget: Widget;
+	databaseSlug: string;
+	dateRangeOverride?: WidgetDateRange;
+}>();
+
+const dateRangeRef = toRef(props, "dateRangeOverride");
+
+const { groups, loading, refresh } = useDashboardData(
+	props.widget,
+	props.databaseSlug,
+	dateRangeRef,
+);
+
+const Theme = useCookie<"light" | "dark">("theme", { sameSite: true });
+
+const chartOption = computed(() => ({
+	tooltip: {
+		trigger: "axis",
+		axisPointer: { type: "shadow" },
+	},
+	grid: {
+		left: "3%",
+		right: "4%",
+		bottom: "3%",
+		containLabel: true,
+	},
+	xAxis: {
+		type: "category",
+		data: groups.value.map((g) => g.name),
+		axisLabel: {
+			color: Theme.value === "dark" ? "#aaa" : "#666",
+			rotate: groups.value.length > 6 ? 30 : 0,
+		},
+	},
+	yAxis: {
+		type: "value",
+		axisLabel: {
+			color: Theme.value === "dark" ? "#aaa" : "#666",
+		},
+		splitLine: {
+			lineStyle: {
+				color: Theme.value === "dark" ? "#333" : "#eee",
+			},
+		},
+	},
+	series: [
+		{
+			type: "bar",
+			itemStyle: {
+				color: props.widget.color || "#2080f0",
+				borderRadius: [4, 4, 0, 0],
+			},
+			data: groups.value.map((g) => g.value),
+		},
+	],
+}));
+
+onMounted(refresh);
+</script>

package/app/components/Dashboard/Widget/Counter.vue

@@ -0,0 +1,51 @@
+<template>
+	<NSpin :show="loading">
+		<NTooltip :delay="1500">
+			<template #trigger>
+				<NStatistic :value="displayValue">
+					<template #prefix>
+						<NIcon size="20" v-if="widget.icon">
+							<Icon :name="widget.icon" />
+						</NIcon>
+					</template>
+					<template #suffix>
+						<NText v-if="widget.operation && widget.operation !== 'count'" depth="3" style="font-size: 14px">
+							({{ t(widget.operation) }})
+						</NText>
+					</template>
+					<template v-if="widget.color" #default>
+						<span :style="{ color: widget.color, fontSize: '24px', fontWeight: 500 }">
+							{{ displayValue }}
+						</span>
+					</template>
+				</NStatistic>
+			</template>
+			{{ widget.table }}
+		</NTooltip>
+	</NSpin>
+</template>
+
+<script lang="ts" setup>
+import { useDashboardData } from "~/composables/useDashboardData";
+
+const props = defineProps<{
+	widget: Widget;
+	databaseSlug: string;
+	dateRangeOverride?: WidgetDateRange;
+}>();
+
+const dateRangeRef = toRef(props, "dateRangeOverride");
+
+const { value, loading, refresh } = useDashboardData(
+	props.widget,
+	props.databaseSlug,
+	dateRangeRef,
+);
+
+const displayValue = computed(() => {
+	if (value.value === null) return 0;
+	return value.value;
+});
+
+onMounted(refresh);
+</script>

package/app/components/Dashboard/Widget/LineChart.vue

@@ -0,0 +1,76 @@
+<template>
+	<NSpin :show="loading">
+		<div style="height: 250px">
+			<VChart v-if="timeSeries.length" :option="chartOption" autoresize />
+			<NEmpty v-else :description="t('noData')" />
+		</div>
+	</NSpin>
+</template>
+
+<script lang="ts" setup>
+import { useDashboardData } from "~/composables/useDashboardData";
+import { VChart } from "~/composables/useEcharts";
+
+const props = defineProps<{
+	widget: Widget;
+	databaseSlug: string;
+	dateRangeOverride?: WidgetDateRange;
+}>();
+
+const dateRangeRef = toRef(props, "dateRangeOverride");
+
+const { timeSeries, loading, refresh } = useDashboardData(
+	props.widget,
+	props.databaseSlug,
+	dateRangeRef,
+);
+
+const Theme = useCookie<"light" | "dark">("theme", { sameSite: true });
+
+const chartOption = computed(() => ({
+	tooltip: {
+		trigger: "axis",
+	},
+	grid: {
+		left: "3%",
+		right: "4%",
+		bottom: "3%",
+		containLabel: true,
+	},
+	xAxis: {
+		type: "category",
+		boundaryGap: false,
+		data: timeSeries.value.map((d) => d.date),
+		axisLabel: {
+			color: Theme.value === "dark" ? "#aaa" : "#666",
+		},
+	},
+	yAxis: {
+		type: "value",
+		axisLabel: {
+			color: Theme.value === "dark" ? "#aaa" : "#666",
+		},
+		splitLine: {
+			lineStyle: {
+				color: Theme.value === "dark" ? "#333" : "#eee",
+			},
+		},
+	},
+	series: [
+		{
+			name: props.widget.title,
+			type: "line",
+			smooth: true,
+			areaStyle: {
+				opacity: 0.3,
+			},
+			itemStyle: {
+				color: props.widget.color || "#18a058",
+			},
+			data: timeSeries.value.map((d) => d.value),
+		},
+	],
+}));
+
+onMounted(refresh);
+</script>

package/app/components/Dashboard/Widget/PieChart.vue

@@ -0,0 +1,75 @@
+<template>
+	<NSpin :show="loading">
+		<div style="height: 250px">
+			<VChart v-if="groups.length" :option="chartOption" autoresize />
+			<NEmpty v-else :description="t('noData')" />
+		</div>
+	</NSpin>
+</template>
+
+<script lang="ts" setup>
+import { useDashboardData } from "~/composables/useDashboardData";
+import { VChart } from "~/composables/useEcharts";
+
+const props = defineProps<{
+	widget: Widget;
+	databaseSlug: string;
+	dateRangeOverride?: WidgetDateRange;
+}>();
+
+const dateRangeRef = toRef(props, "dateRangeOverride");
+
+const { groups, loading, refresh } = useDashboardData(
+	props.widget,
+	props.databaseSlug,
+	dateRangeRef,
+);
+
+const Theme = useCookie<"light" | "dark">("theme", { sameSite: true });
+
+const chartOption = computed(() => ({
+	tooltip: {
+		trigger: "item",
+		formatter: "{b}: {c} ({d}%)",
+	},
+	legend: {
+		orient: "vertical",
+		right: 10,
+		top: "center",
+		textStyle: {
+			color: Theme.value === "dark" ? "#aaa" : "#666",
+		},
+	},
+	series: [
+		{
+			type: "pie",
+			radius: ["40%", "70%"],
+			avoidLabelOverlap: false,
+			itemStyle: {
+				borderRadius: 6,
+				borderColor: Theme.value === "dark" ? "#1e1e1e" : "#fff",
+				borderWidth: 2,
+			},
+			label: {
+				show: false,
+			},
+			emphasis: {
+				label: {
+					show: true,
+					fontSize: 14,
+					fontWeight: "bold",
+				},
+			},
+			data: groups.value.map((g, i) => ({
+				value: g.value,
+				name: g.name,
+				...(props.widget.color && i === 0
+					? { itemStyle: { color: props.widget.color } }
+					: {}),
+			})),
+		},
+	],
+}));
+
+onMounted(refresh);
+</script>

package/app/components/Dashboard/Widget/Table.vue

@@ -0,0 +1,94 @@
+<template>
+	<NSpin :show="loading">
+		<NDataTable
+			size="small"
+			:bordered="false"
+			:columns="columns"
+			:data="data"
+			:loading="loading"
+			:scroll-x="tableWidth"
+			:max-height="480"
+			:row-key="(row: Item) => row.id"
+		/>
+	</NSpin>
+</template>
+
+<script lang="ts" setup>
+import type { DataTableColumns } from "naive-ui";
+import { h } from "vue";
+import { LazyColumn, NFlex, NPerformantEllipsis } from "#components";
+import { getField } from "~/composables/fieldsList";
+import renderLabel from "~/composables/renderLabel";
+import { useDashboardData } from "~/composables/useDashboardData";
+
+const props = defineProps<{
+	widget: Widget;
+	databaseSlug: string;
+	dateRangeOverride?: WidgetDateRange;
+}>();
+
+const dateRangeRef = toRef(props, "dateRangeOverride");
+
+const { data, loading, refresh } = useDashboardData(
+	props.widget,
+	props.databaseSlug,
+	dateRangeRef,
+);
+
+const database = useState<Database>("database");
+
+const sourceTable = computed(() =>
+	database.value?.tables?.find((t) => t.slug === props.widget.table),
+);
+
+// Preferred columns: widget.columns (keys) → table.defaultTableColumns (ids)
+// → first 8 schema fields.
+const displayedFields = computed<Field[]>(() => {
+	const schema = sourceTable.value?.schema ?? [];
+	if (!schema.length) return [];
+
+	if (props.widget.columns?.length) {
+		const byKey = schema.filter((f) => props.widget.columns?.includes(f.key));
+		if (byKey.length) return byKey;
+	}
+
+	const defaultIds = sourceTable.value?.defaultTableColumns;
+	if (defaultIds?.length) {
+		const byId = defaultIds
+			.map((id) => schema.find((f) => f.id === id))
+			.filter((f): f is Field => !!f);
+		if (byId.length) return byId;
+	}
+
+	return schema.slice(0, 8);
+});
+
+const columns = computed<DataTableColumns>(() =>
+	displayedFields.value.map((field) => ({
+		title: () =>
+			h(NFlex, { wrap: false, align: "center", justify: "start" }, () => [
+				getField(field).icon(),
+				h(NPerformantEllipsis, () => t(field.key)),
+			]),
+		key: field.key,
+		minWidth: 150,
+		width: 150,
+		ellipsis: field.table !== undefined ? false : { tooltip: true },
+		render: (row: Item) =>
+			h(LazyColumn, {
+				field,
+				value: row[field.key],
+				itemLabel: renderLabel(sourceTable.value, row),
+			}),
+	})),
+);
+
+const tableWidth = computed(() =>
+	columns.value.reduce(
+		(acc, column) => acc + ((column.width as number) ?? 0),
+		100,
+	),
+);
+
+onMounted(refresh);
+</script>

package/app/components/Dashboard/WidgetEditor.vue

@@ -0,0 +1,274 @@
+<template>
+	<NForm ref="formRef" :model="model" label-placement="left" label-width="120">
+		<NFormItem :label="t('widgetTitle')" path="title">
+			<NInput v-model:value="model.title" :placeholder="t('widgetTitle')" />
+		</NFormItem>
+
+		<NFormItem :label="t('type')" path="type">
+			<NSelect
+				v-model:value="model.type"
+				:options="typeOptions"
+				:placeholder="t('selectType')"
+			/>
+		</NFormItem>
+
+		<NFormItem :label="t('sourceTable')" path="table">
+			<NSelect
+				v-model:value="model.table"
+				:options="tableOptions"
+				:placeholder="t('selectTable')"
+				filterable
+			/>
+		</NFormItem>
+
+		<NFormItem
+			v-if="model.type === 'counter'"
+			:label="t('operation')"
+			path="operation"
+		>
+			<NSelect
+				v-model:value="model.operation"
+				:options="operationOptions"
+				:placeholder="t('operation')"
+			/>
+		</NFormItem>
+
+		<NFormItem
+			v-if="showFieldPicker"
+			:label="t('field')"
+			path="field"
+		>
+			<NSelect
+				v-model:value="model.field"
+				:options="fieldOptions"
+				:placeholder="t('selectField')"
+				filterable
+				clearable
+			/>
+		</NFormItem>
+
+		<NFormItem
+			v-if="model.type === 'bar' || model.type === 'pie'"
+			:label="t('groupBy')"
+			path="groupBy"
+		>
+			<NSelect
+				v-model:value="model.groupBy"
+				:options="fieldOptions"
+				:placeholder="t('groupBy')"
+				filterable
+			/>
+		</NFormItem>
+
+		<NFormItem
+			v-if="model.type === 'line'"
+			:label="t('dateField')"
+			path="dateField"
+		>
+			<NSelect
+				v-model:value="model.dateField"
+				:options="dateFieldOptions"
+				:placeholder="t('dateField')"
+				clearable
+			/>
+		</NFormItem>
+
+		<NFormItem :label="t('dateRange')" path="dateRange">
+			<NSelect
+				v-model:value="model.dateRange"
+				:options="dateRangeOptions"
+				:placeholder="t('dateRange')"
+				clearable
+			/>
+		</NFormItem>
+
+		<NFormItem
+			v-if="model.type === 'table'"
+			:label="t('columnsToDisplay')"
+			path="columns"
+		>
+			<NSelect
+				v-model:value="model.columns"
+				:options="fieldOptions"
+				:placeholder="t('columnsToDisplay')"
+				filterable
+				multiple
+				clearable
+			/>
+		</NFormItem>
+
+		<NFormItem
+			v-if="model.type === 'table'"
+			:label="t('sortField')"
+			path="sortField"
+		>
+			<NSelect
+				v-model:value="model.sortField"
+				:options="fieldOptions"
+				:placeholder="t('sortField')"
+				filterable
+				clearable
+			/>
+		</NFormItem>
+
+		<NFormItem
+			v-if="model.type === 'table' && model.sortField"
+			:label="t('sortOrder')"
+			path="sortOrder"
+		>
+			<NSelect
+				v-model:value="model.sortOrder"
+				:options="sortOrderOptions"
+				:placeholder="t('sortOrder')"
+			/>
+		</NFormItem>
+
+		<NFormItem
+			v-if="model.type === 'table'"
+			:label="t('limit')"
+			path="limit"
+		>
+			<NInputNumber
+				v-model:value="model.limit"
+				:min="1"
+				:max="100"
+				:placeholder="t('limit')"
+			/>
+		</NFormItem>
+
+		<NFormItem v-if="model.table" :label="t('filter')" path="searchArray">
+			<LazyTableSearch v-model="model.searchArray" v-model:schema="widgetSchema" />
+		</NFormItem>
+
+		<NFormItem :label="t('size')" path="size">
+			<NSelect
+				v-model:value="model.size"
+				:options="sizeOptions"
+				:placeholder="t('size')"
+			/>
+		</NFormItem>
+
+		<NFormItem :label="t('color')" path="color">
+			<NColorPicker v-model:value="model.color" :modes="['hex']" clearable />
+		</NFormItem>
+	</NForm>
+</template>
+
+<script lang="ts" setup>
+import { LazyTableSearch } from "#components";
+
+const props = defineProps<{
+	modelValue: Widget;
+}>();
+
+const emit = defineEmits<{
+	"update:modelValue": [value: Widget];
+}>();
+
+const database = useState<Database>("database");
+
+const model = computed({
+	get: () => props.modelValue,
+	set: (v) => emit("update:modelValue", v),
+});
+
+// Schema for the search builder, synced from the selected source table.
+// LazyTableSearch writes to its schema model only when empty, so a local
+// ref synced via watcher is safe.
+const widgetSchema = ref<Schema | undefined>(
+	database.value?.tables?.find((t) => t.slug === model.value.table)?.schema,
+);
+
+watch(
+	() => model.value.table,
+	(newTable, oldTable) => {
+		widgetSchema.value = database.value?.tables?.find(
+			(t) => t.slug === newTable,
+		)?.schema;
+		// Source table changed → previously picked fields are invalid
+		if (newTable !== oldTable && oldTable !== undefined) {
+			model.value.searchArray = { and: [[null, "=", null]] };
+			model.value.columns = undefined;
+			model.value.sortField = undefined;
+			model.value.sortOrder = undefined;
+		}
+		if (!model.value.searchArray) {
+			model.value.searchArray = { and: [[null, "=", null]] };
+		}
+	},
+);
+
+if (!model.value.searchArray) {
+	model.value.searchArray = { and: [[null, "=", null]] };
+}
+
+const typeOptions = [
+	{ label: t("counter"), value: "counter" },
+	{ label: t("lineChart"), value: "line" },
+	{ label: t("barChart"), value: "bar" },
+	{ label: t("pieChart"), value: "pie" },
+	{ label: t("table"), value: "table" },
+];
+
+const operationOptions = [
+	{ label: t("count"), value: "count" },
+	{ label: t("sum"), value: "sum" },
+	{ label: t("max"), value: "max" },
+	{ label: t("min"), value: "min" },
+];
+
+const sortOrderOptions = [
+	{ label: t("asc"), value: "asc" },
+	{ label: t("desc"), value: "desc" },
+];
+
+const sizeOptions = [
+	{ label: t("small"), value: "small" },
+	{ label: t("medium"), value: "medium" },
+	{ label: t("large"), value: "large" },
+];
+
+const dateRangeOptions = [
+	{ label: t("last7Days"), value: "7d" },
+	{ label: t("last30Days"), value: "30d" },
+	{ label: t("last90Days"), value: "90d" },
+	{ label: t("lastYear"), value: "1y" },
+	{ label: t("allTime"), value: "all" },
+];
+
+const tableOptions = computed(
+	() =>
+		database.value?.tables
+			?.filter(
+				({ slug, allowedMethods }) =>
+					allowedMethods?.includes("r") && slug !== "dashboards",
+			)
+			.map((table) => ({ label: t(table.slug), value: table.slug })) ?? [],
+);
+
+const selectedTable = computed(() =>
+	database.value?.tables?.find((t) => t.slug === model.value.table),
+);
+
+const fieldOptions = computed(
+	() =>
+		selectedTable.value?.schema?.map((f) => ({
+			label: f.label || f.key,
+			value: f.key,
+		})) ?? [],
+);
+
+const dateFieldOptions = computed(() => [
+	{ label: "createdAt", value: "createdAt" },
+	{ label: "updatedAt", value: "updatedAt" },
+	...(selectedTable.value?.schema
+		?.filter((f) => f.type === "date" || f.date)
+		.map((f) => ({ label: f.label || f.key, value: f.key })) ?? []),
+]);
+
+const showFieldPicker = computed(() => {
+	if (model.value.type === "counter")
+		return model.value.operation && model.value.operation !== "count";
+	return false;
+});
+</script>