lytx 0.3.0

package/src/app/components/reports/DashboardWorkspaceShell.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { AuthContext } from "@/app/providers/AuthProvider";
+import { DashboardToolbar } from "@/app/components/reports/DashboardToolbar";
+import type { ToolbarSiteOption } from "@/app/components/reports/DashboardToolbar";
+import { useDashboardToolbarControls } from "@/app/components/reports/useDashboardToolbarControls";
+import { DashboardRouteFiltersContext } from "@/app/components/reports/DashboardRouteFiltersContext";
+import {
+  getBrowserTimeZone,
+  getDateStringInTimeZone,
+  isValidTimeZone,
+  type DashboardFilters,
+} from "@/app/components/charts/ChartComponents";
+import type { ReportBuilderMenuActiveId } from "@/app/components/ui/ReportBuilderMenu";
+
+type DashboardWorkspaceShellProps = {
+  activeReportBuilderItemId: ReportBuilderMenuActiveId;
+  reportBuilderEnabled: boolean;
+  askAiEnabled: boolean;
+  initialSites?: ToolbarSiteOption[];
+  initialSiteId?: number | null;
+  children: ReactNode;
+};
+
+export function DashboardWorkspaceShell({
+  activeReportBuilderItemId,
+  reportBuilderEnabled,
+  askAiEnabled,
+  initialSites = [],
+  initialSiteId = null,
+  children,
+}: DashboardWorkspaceShellProps) {
+  const { data: session, isPending: isSessionLoading, current_site } = useContext(AuthContext) || {
+    data: null,
+    isPending: true,
+    current_site: null,
+  };
+
+  const browserTimezone = useMemo(() => getBrowserTimeZone(), []);
+  const savedTimezone = session?.timezone;
+  const effectiveTimezone = isValidTimeZone(savedTimezone) ? savedTimezone : browserTimezone;
+  const today = useMemo(() => getDateStringInTimeZone(new Date(), effectiveTimezone), [effectiveTimezone]);
+
+  const [filters, setFilters] = useState<DashboardFilters>({
+    dateRange: {
+      start: today,
+      end: today,
+      preset: "Today",
+    },
+    deviceType: undefined,
+    country: undefined,
+    city: undefined,
+    region: undefined,
+    source: undefined,
+    pageUrl: undefined,
+    eventName: undefined,
+    siteId: undefined,
+  });
+
+  const hasInitializedDateRange = useRef(false);
+  useEffect(() => {
+    if (isSessionLoading || hasInitializedDateRange.current) return;
+
+    setFilters((prev) => ({
+      ...prev,
+      dateRange: {
+        start: today,
+        end: today,
+        preset: "Today",
+      },
+    }));
+
+    hasInitializedDateRange.current = true;
+  }, [today, isSessionLoading]);
+
+  useEffect(() => {
+    const nextSiteId =
+      current_site?.id?.toString()
+      ?? session?.userSites?.[0]?.site_id?.toString()
+      ?? initialSiteId?.toString();
+    if (!nextSiteId) return;
+
+    setFilters((prev) => ({
+      ...prev,
+      siteId: nextSiteId,
+    }));
+  }, [current_site?.id, initialSiteId, session?.userSites]);
+
+  const { controls, footer, modal } = useDashboardToolbarControls({
+    filters,
+    setFilters,
+    timezone: effectiveTimezone,
+  });
+
+  return (
+    <DashboardRouteFiltersContext.Provider value={{ filters, timezone: effectiveTimezone }}>
+      <DashboardToolbar
+        activeReportBuilderItemId={activeReportBuilderItemId}
+        reportBuilderEnabled={reportBuilderEnabled}
+        askAiEnabled={askAiEnabled}
+        controls={controls}
+        footer={footer}
+        initialSites={initialSites}
+        initialSiteId={initialSiteId}
+      />
+      <div className="p-4 sm:p-6 lg:p-8">{children}</div>
+      {modal}
+    </DashboardRouteFiltersContext.Provider>
+  );
+}

package/src/app/components/reports/ReportBuilderWorkspace.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useMemo } from "react";
+import { CreateReportStarter } from "@/app/components/reports/CreateReportStarter";
+import { AskAiWorkspace } from "@/app/components/reports/AskAiWorkspace";
+import type { ReportBuilderActionId } from "@/app/components/ui/ReportBuilderMenu";
+
+type ReportBuilderWorkspaceProps = {
+  activeReportBuilderItemId: ReportBuilderActionId;
+  initialAiConfigured?: boolean;
+  initialAiModel?: string;
+};
+
+const reportWorkspaceCopy: Partial<Record<Exclude<ReportBuilderActionId, "create-report">, { title: string; description: string }>> = {
+  "create-reference": {
+    title: "Create reference",
+    description: "Reference report setup is next. This route is now separated and ready for dedicated UI.",
+  },
+  "create-dashboard": {
+    title: "Create dashboard",
+    description: "Dashboard builder setup is next. This route is now separated and ready for dedicated UI.",
+  },
+  "create-notification": {
+    title: "Create notification rule",
+    description: "Notification rule setup is next. This route is now separated and ready for dedicated UI.",
+  },
+};
+
+export function ReportBuilderWorkspace({
+  activeReportBuilderItemId,
+  initialAiConfigured = false,
+  initialAiModel = "",
+}: ReportBuilderWorkspaceProps) {
+  const inactiveCopy = useMemo(
+    () =>
+      activeReportBuilderItemId === "create-report"
+        ? null
+        : reportWorkspaceCopy[activeReportBuilderItemId],
+    [activeReportBuilderItemId],
+  );
+
+  if (activeReportBuilderItemId === "create-report") {
+    return (
+      <>
+        <CreateReportStarter
+          onStartCustomReport={() => {
+            window.location.assign("/dashboard/reports/custom/new");
+          }}
+          onStartTemplate={(templateId) => {
+            const query = new URLSearchParams({ template: templateId });
+            window.location.assign(`/dashboard/reports/custom/new?${query.toString()}`);
+          }}
+        />
+      </>
+    );
+  }
+
+  if (activeReportBuilderItemId === "ask-ai") {
+    return (
+      <AskAiWorkspace initialAiConfigured={initialAiConfigured} initialAiModel={initialAiModel} />
+    );
+  }
+
+  return (
+    <section className="max-w-4xl mx-auto">
+      <div className="rounded-xl border border-(--theme-border-primary) bg-(--theme-card-bg) p-6 sm:p-8">
+        <h2 className="text-2xl font-semibold text-(--theme-text-primary)">
+          {inactiveCopy?.title}
+        </h2>
+        <p className="mt-2 text-(--theme-text-secondary)">
+          {inactiveCopy?.description}
+        </p>
+      </div>
+    </section>
+  );
+}