create-bluecopa-react-app 1.0.41 → 1.0.42

package/templates/latest/app/components/ui/skeleton.tsx

@@ -1,13 +1,13 @@
-import { cn } from "~/lib/utils"
+import { cn } from "~/utils/utils";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
+      className={cn("copa:bg-accent copa:animate-pulse copa:rounded-md", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };

package/templates/latest/app/components/ui/sonner.tsx

@@ -1,13 +1,10 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      theme="light"
+      className="toaster copa:group"
       style={
         {
           "--normal-bg": "var(--popover)",
@@ -17,7 +14,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };

package/templates/latest/app/components/ui/tabs.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/utils/utils";
 
 function Tabs({
   className,
@@ -12,10 +12,10 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
+      className={cn("copa:flex copa:flex-col", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsList({
@@ -26,12 +26,12 @@ function TabsList({
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
+        "copa:flex copa:items-center copa:gap-6 copa:border-b copa:border-border",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({
@@ -42,12 +42,12 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "copa:relative copa:inline-flex copa:items-center copa:justify-center copa:pb-3 copa:text-sm copa:font-medium copa:text-muted-foreground copa:transition-colors copa:hover:text-foreground copa:focus-visible:outline-none copa:data-[state=active]:text-primary copa:data-[state=active]:font-semibold copa:data-[state=active]:after:absolute copa:data-[state=active]:after:bottom-0 copa:data-[state=active]:after:left-0 copa:data-[state=active]:after:right-0 copa:data-[state=active]:after:h-0.5 copa:data-[state=active]:after:bg-primary copa:data-[state=active]:after:rounded-full copa:data-[disabled]:pointer-events-none copa:data-[disabled]:opacity-50",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({
@@ -57,10 +57,10 @@ function TabsContent({
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn("copa:flex-1 copa:outline-none copa:pt-6", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/templates/latest/app/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/utils/utils";
 
 function TooltipProvider({
   delayDuration = 0,
@@ -13,7 +13,7 @@ function TooltipProvider({
       delayDuration={delayDuration}
       {...props}
     />
-  )
+  );
 }
 
 function Tooltip({
@@ -23,13 +23,13 @@ function Tooltip({
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  )
+  );
 }
 
 function TooltipTrigger({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
@@ -39,21 +39,27 @@ function TooltipContent({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal
+      container={
+        typeof document !== "undefined"
+          ? document.querySelector<HTMLElement>(".mfe-root") ?? undefined
+          : undefined
+      }
+    >
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
+          "copa:bg-primary copa:text-primary-foreground copa:animate-in copa:fade-in-0 copa:zoom-in-95 copa:data-[state=closed]:animate-out copa:data-[state=closed]:fade-out-0 copa:data-[state=closed]:zoom-out-95 copa:data-[side=bottom]:slide-in-from-top-2 copa:data-[side=left]:slide-in-from-right-2 copa:data-[side=right]:slide-in-from-left-2 copa:data-[side=top]:slide-in-from-bottom-2 copa:z-50 copa:w-fit copa:origin-(--radix-tooltip-content-transform-origin) copa:rounded-md copa:px-3 copa:py-1.5 copa:text-xs copa:text-balance",
+          className,
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="copa:bg-primary copa:fill-primary copa:z-50 copa:size-2.5 copa:translate-y-[calc(-50%_-_2px)] copa:rotate-45 copa:rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/templates/latest/app/constants/index.ts

@@ -0,0 +1,31 @@
+import type { WorkspaceDataSettings } from "~/types";
+
+// ─── Route Paths ────────────────────────────────────────────────────────────
+export const ROUTES = {
+  DASHBOARD: "/",
+  PAYMENTS: "/payments",
+  SETTINGS: "/settings",
+} as const;
+
+// ─── API Defaults ───────────────────────────────────────────────────────────
+export const DEFAULT_API_BASE_URL = "http://localhost:3000/api/v1";
+export const DEFAULT_WORKSPACE_ID = "prod";
+
+/** React Query defaults */
+export const QUERY_DEFAULTS = {
+  STALE_TIME: 5 * 60 * 1000, // 5 minutes
+  RETRY: 1,
+} as const;
+
+// ─── Workspace Defaults ─────────────────────────────────────────────────────
+export const DEFAULT_WORKSPACE_SETTINGS: WorkspaceDataSettings = {
+  currency: "USD",
+  timezone: "UTC",
+  dateFormat: "MM/DD/YYYY HH:mm:ss",
+  fiscalYear: { yearType: "calendar_year" },
+  numberSettings: { numberSystem: "intl", defaultPrecision: 2 },
+  weekStartDay: "SUNDAY",
+};
+
+// ─── Breakpoints ────────────────────────────────────────────────────────────
+export const MOBILE_BREAKPOINT = 768;

package/templates/latest/app/contexts/app-context.tsx

@@ -0,0 +1,201 @@
+import { createContext, useContext, useMemo, useState, type ReactNode } from "react";
+import { useUser, useGetAllUsers } from "@bluecopa/react";
+import type { AppUser, WorkspaceDataSettings } from "~/types";
+import { DEFAULT_WORKSPACE_SETTINGS } from "~/constants";
+
+interface AppContextValue {
+  user: AppUser;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+  workspaceIds: string[];
+  teams: unknown[];
+  isAdmin: boolean;
+  users: unknown[];
+  usersLoading: boolean;
+  usersError: Error | null;
+  /** Workspace data settings (currency, timezone, date format, fiscal year, number settings, week start day) */
+  currentWorkspaceSettings: WorkspaceDataSettings;
+  setCurrency: (currency: string) => void;
+}
+
+const AppContext = createContext<AppContextValue | undefined>(undefined);
+
+const fallbackUser = {
+  userId: "Not Logged In",
+  userExists: false,
+  settings: {},
+  workspaceIds: [] as string[],
+  currentWorkspace: null,
+  teams: [] as unknown[],
+  userTeamProperties: [] as unknown[],
+};
+
+const defaultWorkspaceDataSettings = DEFAULT_WORKSPACE_SETTINGS;
+
+function getWorkspaceDataSettings(workspace: unknown): WorkspaceDataSettings {
+  if (!workspace || typeof workspace !== "object") return defaultWorkspaceDataSettings;
+  const w = workspace as Record<string, unknown>;
+  const customProperties = w.customProperties as Record<string, unknown> | undefined;
+  const workspaceSettings = customProperties?.workspaceSettings as Record<string, unknown> | undefined;
+  const currencySettings = workspaceSettings?.currencySettings as Record<string, unknown> | undefined;
+  const defaultCurrency = currencySettings?.defaultCurrency as { value?: string } | undefined;
+  const calendarSettings = workspaceSettings?.calendarSettings as Record<string, unknown> | undefined;
+  const numberSettings = workspaceSettings?.numberSettings as Record<string, unknown> | undefined;
+  const fiscalYears = w.fiscalYears as Array<{ startMonth?: number; startDate?: number; workspaceDefault?: boolean }> | undefined;
+  const defaultFiscal = fiscalYears?.find((fy) => fy.workspaceDefault) ?? fiscalYears?.[0];
+
+  return {
+    currency: defaultCurrency?.value ?? defaultWorkspaceDataSettings.currency,
+    timezone: (workspaceSettings?.timezone as string) ?? defaultWorkspaceDataSettings.timezone,
+    dateFormat: (workspaceSettings?.dateFormat as string) ?? defaultWorkspaceDataSettings.dateFormat,
+    fiscalYear: {
+      yearType: (calendarSettings?.yearType as string) ?? defaultWorkspaceDataSettings.fiscalYear.yearType,
+      startMonth: defaultFiscal?.startMonth,
+      startDate: defaultFiscal?.startDate,
+    },
+    numberSettings: {
+      numberSystem: (numberSettings?.numberSystem as string) ?? defaultWorkspaceDataSettings.numberSettings.numberSystem,
+      defaultPrecision: (numberSettings?.defaultPrecision as number) ?? defaultWorkspaceDataSettings.numberSettings.defaultPrecision,
+      nullPlaceholder: numberSettings?.nullPlaceholder as string | undefined,
+    },
+    weekStartDay: (w.weekStartDay as string) ?? defaultWorkspaceDataSettings.weekStartDay,
+  };
+}
+
+export type AppProviderProps = {
+  children: ReactNode;
+};
+
+export function AppProvider({ children }: AppProviderProps) {
+  const [currencyOverride, setCurrencyOverride] = useState<string | null>(null);
+
+  const {
+    data: apiUsers,
+    isLoading: usersLoading,
+    error: usersError,
+  } = useGetAllUsers({
+    enabled: true,
+  });
+
+  const { data: user, isLoading, error, refetch } = useUser();
+
+  const userData = error || !user ? fallbackUser : user;
+  const userId = (userData as { userId?: string })?.userId ?? null;
+  const currentWorkspace =
+    (userData as { currentWorkspace?: unknown })?.currentWorkspace ?? null;
+  const workspaceIds =
+    (userData as { workspaceIds?: string[] })?.workspaceIds ?? [];
+  const teams = (userData as { teams?: unknown[] })?.teams ?? [];
+
+  const userRole = useMemo(() => {
+    if (!teams || teams.length === 0) return "";
+    return teams
+      .map((team: unknown) => {
+        if (typeof team === "string") return team;
+        const t = team as { name?: string; teamName?: string };
+        return t?.name ?? t?.teamName ?? "";
+      })
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+  }, [teams]);
+
+  const isAdmin = useMemo(() => {
+    if (!teams || teams.length === 0) return false;
+    return teams.some((team: unknown) => {
+      const t = team as { name?: string; teamName?: string };
+      const teamName =
+        typeof team === "string" ? team : t?.name ?? t?.teamName ?? "";
+      return String(teamName).toLowerCase().includes("admin");
+    });
+  }, [teams]);
+
+  const usersList = useMemo(() => {
+    if (!apiUsers) return [];
+    if (Array.isArray(apiUsers)) return apiUsers;
+    const obj = apiUsers as Record<string, unknown>;
+    if (typeof obj === "object" && "data" in obj) {
+      const data = obj.data;
+      if (Array.isArray(data)) return data;
+    }
+    if (typeof obj === "object" && "records" in obj) {
+      const records = obj.records;
+      if (Array.isArray(records)) return records;
+    }
+    return [];
+  }, [apiUsers]);
+
+  const foundUser = useMemo(
+    () =>
+      usersList.find(
+        (u: unknown) => (u as { id?: string })?.id === userId
+      ) as { email?: string; } | undefined,
+    [usersList, userId]
+  );
+  const userEmail = foundUser?.email ?? userId;
+
+  const userWithDetails = useMemo<AppUser>(
+    () => ({
+      ...(typeof userData === "object" && userData !== null
+        ? (userData as Record<string, unknown>)
+        : {}),
+      email: userEmail ?? "Not Logged In",
+      name: userEmail ?? "Not Logged In",
+      role: userRole || "",
+    }),
+    [userData, userEmail, userRole]
+  );
+
+  const currentWorkspaceSettings = useMemo<WorkspaceDataSettings>(() => {
+    const settings = getWorkspaceDataSettings(currentWorkspace);
+    if (currencyOverride) {
+      return { ...settings, currency: currencyOverride };
+    }
+    return settings;
+  }, [currentWorkspace, currencyOverride]);
+
+  const value = useMemo<AppContextValue>(
+    () => ({
+      user: userWithDetails,
+      isLoading,
+      error: error ?? null,
+      refetch: typeof refetch === "function" ? refetch : () => {},
+      workspaceIds,
+      teams,
+      isAdmin,
+      users: usersList,
+      usersLoading,
+      usersError: usersError ?? null,
+      currentWorkspaceSettings,
+      setCurrency: setCurrencyOverride,
+    }),
+    [
+      userWithDetails,
+      isLoading,
+      error,
+      refetch,
+      userId,
+      workspaceIds,
+      teams,
+      userRole,
+      isAdmin,
+      usersList,
+      usersLoading,
+      usersError,
+      currentWorkspaceSettings,
+    ]
+  );
+
+  return (
+    <AppContext.Provider value={value}>{children}</AppContext.Provider>
+  );
+}
+
+export function useAppContext(): AppContextValue {
+  const ctx = useContext(AppContext);
+  if (ctx === undefined) {
+    throw new Error("useAppContext must be used within an AppProvider");
+  }
+  return ctx;
+}

package/templates/latest/app/hooks/use-mobile.ts

@@ -1,19 +1,20 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
+import * as React from "react";
+import { MOBILE_BREAKPOINT } from "~/constants";
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
 
-  return !!isMobile
+  return !!isMobile;
 }

package/templates/latest/app/main.tsx

@@ -8,5 +8,5 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </React.StrictMode>
+  </React.StrictMode>,
 );