@@ -110,4 +111,4 @@
{/if}
-
\ No newline at end of file
+
diff --git a/frontend/src/lib/api/reports.js b/frontend/src/lib/api/reports.js
new file mode 100644
index 00000000..328f91c5
--- /dev/null
+++ b/frontend/src/lib/api/reports.js
@@ -0,0 +1,83 @@
+// [DEF:frontend.src.lib.api.reports:Module]
+// @TIER: CRITICAL
+// @SEMANTICS: frontend, api_client, reports, wrapper
+// @PURPOSE: Wrapper-based reports API client for list/detail retrieval without direct native fetch usage.
+// @LAYER: Infra
+// @RELATION: DEPENDS_ON -> [DEF:api_module]
+// @INVARIANT: Uses existing api wrapper methods and returns structured errors for UI-state mapping.
+
+import { api } from '../api.js';
+
+// [DEF:buildReportQueryString:Function]
+// @PURPOSE: Build query string for reports list endpoint from filter options.
+// @PRE: options is an object with optional report query fields.
+// @POST: Returns URL query string without leading '?'.
+export function buildReportQueryString(options = {}) {
+ const params = new URLSearchParams();
+
+ if (options.page != null) params.append('page', String(options.page));
+ if (options.page_size != null) params.append('page_size', String(options.page_size));
+
+ if (Array.isArray(options.task_types) && options.task_types.length > 0) {
+ params.append('task_types', options.task_types.join(','));
+ }
+ if (Array.isArray(options.statuses) && options.statuses.length > 0) {
+ params.append('statuses', options.statuses.join(','));
+ }
+
+ if (options.time_from) params.append('time_from', options.time_from);
+ if (options.time_to) params.append('time_to', options.time_to);
+ if (options.search) params.append('search', options.search);
+ if (options.sort_by) params.append('sort_by', options.sort_by);
+ if (options.sort_order) params.append('sort_order', options.sort_order);
+
+ return params.toString();
+}
+// [/DEF:buildReportQueryString:Function]
+
+// [DEF:normalizeApiError:Function]
+// @PURPOSE: Convert unknown API exceptions into deterministic UI-consumable error objects.
+// @PRE: error may be Error/string/object.
+// @POST: Returns structured error object.
+export function normalizeApiError(error) {
+ const message =
+ (error && typeof error.message === 'string' && error.message) ||
+ (typeof error === 'string' && error) ||
+ 'Failed to load reports';
+
+ return {
+ message,
+ code: 'REPORTS_API_ERROR',
+ retryable: true
+ };
+}
+// [/DEF:normalizeApiError:Function]
+
+// [DEF:getReports:Function]
+// @PURPOSE: Fetch unified report list using existing request wrapper.
+// @PRE: valid auth context for protected endpoint.
+// @POST: Returns parsed payload or structured error for UI-state mapping.
+export async function getReports(options = {}) {
+ try {
+ const query = buildReportQueryString(options);
+ return await api.fetchApi(`/reports${query ? `?${query}` : ''}`);
+ } catch (error) {
+ throw normalizeApiError(error);
+ }
+}
+// [/DEF:getReports:Function]
+
+// [DEF:getReportDetail:Function]
+// @PURPOSE: Fetch one report detail by report_id.
+// @PRE: reportId is non-empty string; valid auth context.
+// @POST: Returns parsed detail payload or structured error object.
+export async function getReportDetail(reportId) {
+ try {
+ return await api.fetchApi(`/reports/${reportId}`);
+ } catch (error) {
+ throw normalizeApiError(error);
+ }
+}
+// [/DEF:getReportDetail:Function]
+
+// [/DEF:frontend.src.lib.api.reports:Module]
\ No newline at end of file
diff --git a/frontend/src/lib/components/layout/Breadcrumbs.svelte b/frontend/src/lib/components/layout/Breadcrumbs.svelte
index c224c48a..79eb7e27 100644
--- a/frontend/src/lib/components/layout/Breadcrumbs.svelte
+++ b/frontend/src/lib/components/layout/Breadcrumbs.svelte
@@ -14,6 +14,7 @@
import { page } from "$app/stores";
import { t, _ } from "$lib/i18n";
+ import Icon from "$lib/ui/Icon.svelte";
let { maxVisible = 3 } = $props();
@@ -82,30 +83,103 @@
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ");
}
+
+ function getCrumbMeta(item) {
+ if (item.path === "/") {
+ return {
+ icon: "home",
+ tone: "from-sky-100 to-cyan-100 text-sky-700 ring-sky-200",
+ };
+ }
+
+ const segment = item.path.split("/").filter(Boolean).at(-1) || "";
+
+ const map = {
+ dashboards: {
+ icon: "dashboard",
+ tone: "from-sky-100 to-sky-200 text-sky-700 ring-sky-200",
+ },
+ datasets: {
+ icon: "database",
+ tone: "from-emerald-100 to-emerald-200 text-emerald-700 ring-emerald-200",
+ },
+ storage: {
+ icon: "storage",
+ tone: "from-amber-100 to-amber-200 text-amber-800 ring-amber-200",
+ },
+ reports: {
+ icon: "reports",
+ tone: "from-violet-100 to-fuchsia-100 text-violet-700 ring-violet-200",
+ },
+ admin: {
+ icon: "admin",
+ tone: "from-rose-100 to-rose-200 text-rose-700 ring-rose-200",
+ },
+ settings: {
+ icon: "settings",
+ tone: "from-slate-100 to-slate-200 text-slate-700 ring-slate-200",
+ },
+ git: {
+ icon: "storage",
+ tone: "from-orange-100 to-orange-200 text-orange-700 ring-orange-200",
+ },
+ };
+
+ return (
+ map[segment] || {
+ icon: "layers",
+ tone: "from-slate-100 to-slate-200 text-slate-600 ring-slate-200",
+ }
+ );
+ }
diff --git a/frontend/src/lib/components/layout/Sidebar.svelte b/frontend/src/lib/components/layout/Sidebar.svelte
index 24fa170b..e2e27eba 100644
--- a/frontend/src/lib/components/layout/Sidebar.svelte
+++ b/frontend/src/lib/components/layout/Sidebar.svelte
@@ -24,52 +24,68 @@
} from "$lib/stores/sidebar.js";
import { t } from "$lib/i18n";
import { browser } from "$app/environment";
+ import Icon from "$lib/ui/Icon.svelte";
- // Sidebar categories with sub-items matching Superset-style navigation
- let categories = [
- {
- id: "dashboards",
- label: $t.nav?.dashboards || "DASHBOARDS",
- icon: "M3 3h18v18H3V3zm16 16V5H5v14h14z",
- path: "/dashboards",
- subItems: [
- { label: $t.nav?.overview || "Overview", path: "/dashboards" },
- ],
- },
- {
- id: "datasets",
- label: $t.nav?.datasets || "DATASETS",
- icon: "M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h6v2H7v-2z",
- path: "/datasets",
- subItems: [
- { label: $t.nav?.all_datasets || "All Datasets", path: "/datasets" },
- ],
- },
- {
- id: "storage",
- label: $t.nav?.storage || "STORAGE",
- icon: "M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h8v2H8V8zm0 4h8v2H8v-2zm0 4h5v2H8v-2z",
- path: "/storage",
- subItems: [
- { label: $t.nav?.backups || "Backups", path: "/storage/backups" },
- {
- label: $t.nav?.repositories || "Repositories",
- path: "/storage/repos",
- },
- ],
- },
- {
- id: "admin",
- label: $t.nav?.admin || "ADMIN",
- icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z",
- path: "/admin",
- subItems: [
- { label: $t.nav?.admin_users || "Users", path: "/admin/users" },
- { label: $t.nav?.admin_roles || "Roles", path: "/admin/roles" },
- { label: $t.nav?.settings || "Settings", path: "/settings" },
- ],
- },
- ];
+ function buildCategories() {
+ return [
+ {
+ id: "dashboards",
+ label: $t.nav?.dashboards || "DASHBOARDS",
+ icon: "dashboard",
+ tone: "from-sky-100 to-sky-200 text-sky-700 ring-sky-200",
+ path: "/dashboards",
+ subItems: [
+ { label: $t.nav?.overview || "Overview", path: "/dashboards" },
+ ],
+ },
+ {
+ id: "datasets",
+ label: $t.nav?.datasets || "DATASETS",
+ icon: "database",
+ tone: "from-emerald-100 to-emerald-200 text-emerald-700 ring-emerald-200",
+ path: "/datasets",
+ subItems: [
+ { label: $t.nav?.all_datasets || "All Datasets", path: "/datasets" },
+ ],
+ },
+ {
+ id: "storage",
+ label: $t.nav?.storage || "STORAGE",
+ icon: "storage",
+ tone: "from-amber-100 to-amber-200 text-amber-800 ring-amber-200",
+ path: "/storage",
+ subItems: [
+ { label: $t.nav?.backups || "Backups", path: "/storage/backups" },
+ {
+ label: $t.nav?.repositories || "Repositories",
+ path: "/storage/repos",
+ },
+ ],
+ },
+ {
+ id: "reports",
+ label: $t.nav?.reports || "REPORTS",
+ icon: "reports",
+ tone: "from-violet-100 to-fuchsia-100 text-violet-700 ring-violet-200",
+ path: "/reports",
+ subItems: [{ label: $t.nav?.reports || "Reports", path: "/reports" }],
+ },
+ {
+ id: "admin",
+ label: $t.nav?.admin || "ADMIN",
+ icon: "admin",
+ tone: "from-rose-100 to-rose-200 text-rose-700 ring-rose-200",
+ path: "/admin",
+ subItems: [
+ { label: $t.nav?.admin_users || "Users", path: "/admin/users" },
+ { label: $t.nav?.admin_roles || "Roles", path: "/admin/roles" },
+ { label: $t.nav?.settings || "Settings", path: "/settings" },
+ ],
+ },
+ ];
+ }
+
+ let categories = buildCategories();
let isExpanded = true;
let activeCategory = "dashboards";
@@ -86,50 +102,7 @@
}
// Reactive categories to update translations
- $: categories = [
- {
- id: "dashboards",
- label: $t.nav?.dashboards || "DASHBOARDS",
- icon: "M3 3h18v18H3V3zm16 16V5H5v14h14z",
- path: "/dashboards",
- subItems: [
- { label: $t.nav?.overview || "Overview", path: "/dashboards" },
- ],
- },
- {
- id: "datasets",
- label: $t.nav?.datasets || "DATASETS",
- icon: "M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h6v2H7v-2z",
- path: "/datasets",
- subItems: [
- { label: $t.nav?.all_datasets || "All Datasets", path: "/datasets" },
- ],
- },
- {
- id: "storage",
- label: $t.nav?.storage || "STORAGE",
- icon: "M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h8v2H8V8zm0 4h8v2H8v-2zm0 4h5v2H8v-2z",
- path: "/storage",
- subItems: [
- { label: $t.nav?.backups || "Backups", path: "/storage/backups" },
- {
- label: $t.nav?.repositories || "Repositories",
- path: "/storage/repos",
- },
- ],
- },
- {
- id: "admin",
- label: $t.nav?.admin || "ADMIN",
- icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z",
- path: "/admin",
- subItems: [
- { label: $t.nav?.admin_users || "Users", path: "/admin/users" },
- { label: $t.nav?.admin_roles || "Roles", path: "/admin/roles" },
- { label: $t.nav?.settings || "Settings", path: "/settings" },
- ],
- },
- ];
+ $: categories = buildCategories();
// Update active item when page changes
$: if ($page && $page.url.pathname !== activeItem) {
@@ -224,7 +197,12 @@
: 'justify-center'}"
>
{#if isExpanded}
-
Menu
+
+
+
+
+ Menu
+
{:else}
M
{/if}
@@ -250,16 +228,9 @@
aria-expanded={expandedCategories.has(category.id)}
>
-
+
+
+
{#if isExpanded}
{category.label}
{#if isExpanded}
-
+ />
{/if}
@@ -318,18 +282,9 @@
class="flex items-center justify-center w-full px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
on:click={handleToggleClick}
>
-
+
+
+
Collapse
@@ -340,17 +295,7 @@
on:click={handleToggleClick}
aria-label="Expand sidebar"
>
-