create-bluecopa-react-app 1.0.40 → 1.0.42

package/templates/latest/app/components/charts/chart-utils.ts

@@ -0,0 +1,142 @@
+/**
+ * Composable Chart Option Builders
+ *
+ * Each function returns a partial ECharts option that can be spread
+ * into the final chart configuration.
+ */
+
+import type { EChartsOption } from "echarts";
+import { resolveChartTokens } from "./chart-theme";
+
+function tokens() {
+  return resolveChartTokens();
+}
+
+type DeepPartial<T> = { [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P] };
+
+function merge<T extends Record<string, any>>(base: T, overrides?: DeepPartial<T>): T {
+  if (!overrides) return base;
+  const result = { ...base };
+  for (const key of Object.keys(overrides) as (keyof T)[]) {
+    const val = overrides[key];
+    if (val && typeof val === "object" && !Array.isArray(val) && typeof base[key] === "object") {
+      result[key] = merge(base[key] as any, val as any);
+    } else if (val !== undefined) {
+      result[key] = val as any;
+    }
+  }
+  return result;
+}
+
+// Tooltip
+export function chartTooltip(overrides?: Record<string, any>): Pick<EChartsOption, "tooltip"> {
+  const t = tokens();
+  const base = {
+    trigger: "axis" as const,
+    confine: true,
+    backgroundColor: t.backgroundColor,
+    borderColor: t.borderColor,
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: [10, 14],
+    textStyle: { fontFamily: t.fontFamily, fontSize: 12, color: t.textColor },
+    extraCssText: "box-shadow: 0 4px 16px rgba(0,0,0,0.1); backdrop-filter: blur(8px);",
+    axisPointer: { type: "shadow" as const, shadowStyle: { color: "rgba(0,0,0,0.04)" } },
+  };
+  return { tooltip: merge(base, overrides as any) };
+}
+
+// Legend
+export function chartLegend(overrides?: Record<string, any>): Pick<EChartsOption, "legend"> {
+  const t = tokens();
+  const pos = overrides?.position ?? "bottom";
+  const positionMap: Record<string, any> = {
+    top: { top: 0, left: "center" },
+    bottom: { bottom: 0, left: "center" },
+    left: { left: 0, top: "middle", orient: "vertical" },
+    right: { right: 0, top: "middle", orient: "vertical" },
+  };
+  const base = {
+    show: true, icon: "roundRect", itemWidth: 12, itemHeight: 12, itemGap: 16,
+    textStyle: { fontFamily: t.fontFamily, fontSize: 12, color: t.textColorSecondary },
+    ...positionMap[pos],
+  };
+  const { position, ...rest } = overrides ?? {};
+  return { legend: merge(base, rest) };
+}
+
+// Category Axis
+export function chartCategoryAxis(data?: string[], overrides?: Record<string, any>): any {
+  const t = tokens();
+  const base: any = {
+    type: "category", data,
+    axisLine: { show: true, lineStyle: { color: t.borderColor } },
+    axisTick: { show: false },
+    axisLabel: { fontFamily: t.fontFamily, fontSize: 11, color: t.textColorSecondary, rotate: overrides?.rotate ?? 0 },
+    splitLine: { show: false },
+  };
+  return merge(base, overrides);
+}
+
+// Value Axis
+export function chartValueAxis(overrides?: Record<string, any>): any {
+  const t = tokens();
+  const base: any = {
+    type: "value",
+    axisLine: { show: false }, axisTick: { show: false },
+    axisLabel: { fontFamily: t.fontFamily, fontSize: 11, color: t.textColorSecondary },
+    splitLine: { show: true, lineStyle: { color: t.borderColor, type: "dashed", opacity: 0.6 } },
+  };
+  return merge(base, overrides);
+}
+
+// Title
+export function chartTitle(text: string, overrides?: { subtitle?: string; left?: string | number }): Pick<EChartsOption, "title"> {
+  const t = tokens();
+  const base = {
+    text, subtext: overrides?.subtitle ?? "", left: overrides?.left ?? 0, top: 0, padding: [0, 0, 8, 0],
+    textStyle: { fontFamily: t.fontFamily, fontSize: 16, fontWeight: 600 as const, color: t.textColor },
+    subtextStyle: { fontFamily: t.fontFamily, fontSize: 12, color: t.textColorSecondary },
+  };
+  return { title: base };
+}
+
+// Grid
+export function chartGrid(overrides?: Record<string, any>): Pick<EChartsOption, "grid"> {
+  const base = { top: 48, right: 16, bottom: 48, left: 16, containLabel: true };
+  return { grid: merge(base, overrides as any) };
+}
+
+// Animation
+export function chartAnimation(overrides?: Record<string, any>): Record<string, any> {
+  return {
+    animation: true,
+    animationDuration: overrides?.duration ?? 800,
+    animationEasing: overrides?.easing ?? "cubicInOut",
+    animationDelay: overrides?.delay ?? ((idx: number) => idx * 60),
+    animationDurationUpdate: 400,
+    animationEasingUpdate: "cubicInOut",
+  };
+}
+
+// Colors
+export function chartColors(): string[] {
+  return tokens().colors;
+}
+
+export function chartColor(index: number): string {
+  const colors = chartColors();
+  return colors[index % colors.length];
+}
+
+// Formatters
+export function formatChartValue(value: number, decimals = 1): string {
+  if (Math.abs(value) >= 1e9) return (value / 1e9).toFixed(decimals) + "B";
+  if (Math.abs(value) >= 1e6) return (value / 1e6).toFixed(decimals) + "M";
+  if (Math.abs(value) >= 1e3) return (value / 1e3).toFixed(decimals) + "K";
+  return value.toFixed(decimals);
+}
+
+export function formatChartCurrency(value: number, currency = "USD", decimals = 0): string {
+  return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(value);
+}

package/templates/latest/app/components/charts/donut-chart.tsx

@@ -0,0 +1,110 @@
+import React, { useMemo } from "react";
+import { BaseChart } from "./base-chart";
+import { chartTooltip, chartLegend, chartAnimation, chartColors } from "./chart-utils";
+import { resolveChartTokens } from "./chart-theme";
+
+export interface DonutChartData {
+  items: { name: string; value: number; color?: string }[];
+}
+
+export interface DonutChartProps {
+  data: DonutChartData;
+  title?: string;
+  subtitle?: string;
+  height?: string | number;
+  className?: string;
+  showLegend?: boolean;
+  showLabels?: boolean;
+  centerText?: string;
+  centerSubText?: string;
+  thickness?: number;
+  loading?: boolean;
+  empty?: boolean;
+  onSliceClick?: (params: any) => void;
+  ariaLabel?: string;
+}
+
+export function DonutChart({
+  data, title, subtitle, height = 300, className, showLegend = true, showLabels = false,
+  centerText, centerSubText, thickness = 60, loading = false, empty = false, onSliceClick, ariaLabel,
+}: DonutChartProps) {
+  const option = useMemo(() => {
+    const colors = chartColors();
+    const tokens = resolveChartTokens();
+    const innerRadius = `${Math.max(100 - thickness, 20)}%`;
+    const outerRadius = "70%";
+
+    const graphic: any[] = [];
+    if (centerText) {
+      graphic.push({
+        type: "text", left: "center", top: "42%",
+        style: { text: centerText, fontSize: 24, fontWeight: 700, fontFamily: tokens.fontFamily, fill: tokens.textColor, textAlign: "center" },
+      });
+    }
+    if (centerSubText) {
+      graphic.push({
+        type: "text", left: "center", top: "54%",
+        style: { text: centerSubText, fontSize: 12, fontFamily: tokens.fontFamily, fill: tokens.textColorSecondary, textAlign: "center" },
+      });
+    }
+
+    return {
+      ...(title ? {
+        title: {
+          text: title, subtext: subtitle || "", left: 0, top: 0,
+          textStyle: { fontSize: 16, fontWeight: 600, fontFamily: tokens.fontFamily, color: tokens.textColor },
+          subtextStyle: { fontSize: 12, fontFamily: tokens.fontFamily, color: tokens.textColorSecondary },
+        },
+      } : {}),
+      ...chartTooltip({ trigger: "item" }),
+      ...(showLegend ? chartLegend({ position: "bottom" }) : {}),
+      ...chartAnimation(),
+      graphic,
+      series: [{
+        type: "pie" as const,
+        radius: [innerRadius, outerRadius],
+        center: ["50%", "50%"],
+        avoidLabelOverlap: true,
+        padAngle: 2,
+        itemStyle: { borderColor: tokens.backgroundColor, borderWidth: 2, borderRadius: 4 },
+        label: { show: showLabels, formatter: "{b}: {d}%", fontSize: 12, fontFamily: tokens.fontFamily },
+        labelLine: { show: showLabels },
+        emphasis: {
+          focus: "self",
+          scale: false, scaleSize: 0,
+          itemStyle: { shadowBlur: 16, shadowOffsetY: 4, shadowColor: "rgba(0,0,0,0.25)", borderWidth: 3, borderColor: "rgba(255,255,255,0.6)" },
+        },
+        data: data.items.map((item, i) => ({
+          name: item.name, value: item.value,
+          itemStyle: item.color ? { color: item.color } : { color: colors[i % colors.length] },
+        })),
+        animationType: "expansion",
+        animationEasing: "cubicInOut",
+        animationDelay: (idx: number) => idx * 60,
+      }],
+    };
+  }, [data, title, subtitle, showLegend, showLabels, centerText, centerSubText, thickness]);
+
+  const dataSummary = useMemo(() => {
+    const total = data.items.reduce((sum, item) => sum + item.value, 0);
+    return data.items.map((item) => {
+      const pct = total > 0 ? ((item.value / total) * 100).toFixed(1) : "0";
+      return `${item.name}: ${item.value.toLocaleString()} (${pct}%)`;
+    }).join(", ");
+  }, [data]);
+
+  return (
+    <BaseChart
+      option={option}
+      height={height}
+      className={className}
+      loading={loading}
+      empty={empty || data.items.length === 0}
+      onEvents={onSliceClick ? { click: onSliceClick } : undefined}
+      ariaLabel={ariaLabel || `Donut chart${title ? `: ${title}` : ""}`}
+      dataSummary={dataSummary}
+    />
+  );
+}
+
+export default DonutChart;

package/templates/latest/app/components/charts/index.ts

@@ -0,0 +1,5 @@
+export { ChartProvider, useChartContext } from "./chart-provider";
+export { BaseChart, type BaseChartProps, type BaseChartRef } from "./base-chart";
+export { BarChart, type BarChartProps, type BarChartData, type BarChartSeries } from "./bar-chart";
+export { DonutChart, type DonutChartProps, type DonutChartData } from "./donut-chart";
+export { chartColors, chartColor, formatChartValue, formatChartCurrency } from "./chart-utils";

package/templates/latest/app/components/layouts/app-layout.tsx

@@ -0,0 +1,22 @@
+import { Outlet } from "react-router-dom";
+import { AppSidebar } from "~/components/layouts/app-sidebar";
+import { SiteHeader } from "~/components/layouts/site-header";
+import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
+
+export function AppLayout() {
+  return (
+    <SidebarProvider
+      style={
+        { "--sidebar-width": "16rem" } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="copa:flex copa:flex-1 copa:flex-col copa:gap-6 copa:px-6 copa:py-6">
+          <Outlet />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/templates/latest/app/components/layouts/app-sidebar.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import {
+  IconChartBar,
+  IconCreditCard,
+  IconDashboard,
+  IconFileText,
+  IconFolder,
+  IconLayoutList,
+  IconReceipt,
+  IconSettings,
+  IconTransfer,
+  IconUsers,
+} from "@tabler/icons-react";
+
+import { BluecopaLogo } from "~/components/bluecopa-logo";
+import { NavMain, type NavSection } from "~/components/layouts/nav-main";
+import { NavFooter } from "~/components/layouts/nav-user";
+import { ROUTES } from "~/constants";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "~/components/ui/sidebar";
+
+const navSections: NavSection[] = [
+  {
+    label: "Overview",
+    items: [
+      { title: "Dashboard", url: ROUTES.DASHBOARD, icon: IconDashboard },
+      { title: "Analytics", url: "/analytics", icon: IconChartBar },
+    ],
+  },
+  {
+    label: "Finance",
+    items: [
+      { title: "Transactions", url: "/transactions", icon: IconTransfer },
+      { title: "Invoices", url: "/invoices", icon: IconReceipt },
+      { title: "Payments", url: ROUTES.PAYMENTS, icon: IconCreditCard },
+    ],
+  },
+  {
+    label: "Workspace",
+    items: [
+      { title: "Reports", url: "/reports", icon: IconFileText },
+      { title: "Projects", url: "/projects", icon: IconFolder },
+      { title: "Workbooks", url: "/workbooks", icon: IconLayoutList },
+      { title: "Team", url: "/team", icon: IconUsers },
+    ],
+  },
+  {
+    items: [{ title: "Settings", url: ROUTES.SETTINGS, icon: IconSettings }],
+  },
+];
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="copa:data-[slot=sidebar-menu-button]:!p-1.5"
+            >
+              <a href="https://bluecopa.com">
+                <BluecopaLogo className="copa:size-8" />
+                <span className="copa:text-base copa:font-semibold">Bluecopa</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarSeparator className="copa:mx-0" />
+      <SidebarContent>
+        <NavMain sections={navSections} />
+      </SidebarContent>
+      <SidebarSeparator className="copa:mx-0" />
+      <SidebarFooter>
+        <NavFooter />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/templates/latest/app/components/layouts/nav-main.tsx

@@ -0,0 +1,50 @@
+import { type Icon } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "~/components/ui/sidebar";
+
+export type NavItem = {
+  title: string;
+  url: string;
+  icon?: Icon;
+};
+
+export type NavSection = {
+  label?: string;
+  items: NavItem[];
+};
+
+export function NavMain({ sections }: { sections: NavSection[] }) {
+  return (
+    <>
+      {sections.map((section, i) => (
+        <SidebarGroup key={section.label ?? i}>
+          {section.label && (
+            <SidebarGroupLabel>{section.label}</SidebarGroupLabel>
+          )}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {section.items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton tooltip={item.title} asChild>
+                    <Link to={item.url}>
+                      {item.icon && <item.icon />}
+                      <span>{item.title}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      ))}
+    </>
+  );
+}

package/templates/latest/app/components/layouts/nav-user.tsx

@@ -0,0 +1,38 @@
+import { IconHelpCircle, IconMessageCircle } from "@tabler/icons-react";
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "~/components/ui/sidebar";
+
+export function NavFooter() {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild>
+          <a
+            href="https://docs.bluecopa.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <IconHelpCircle className="copa:size-4" />
+            <span>Help & Docs</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild>
+          <a
+            href="https://bluecopa.com/support"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <IconMessageCircle className="copa:size-4" />
+            <span>Support</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/templates/latest/app/components/layouts/site-header.tsx

@@ -0,0 +1,93 @@
+import {
+  IconChevronDown,
+  IconLogout,
+  IconSettings,
+  IconUserCircle,
+} from "@tabler/icons-react";
+
+import { BluecopaLogo } from "~/components/bluecopa-logo";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Separator } from "~/components/ui/separator";
+import { SidebarTrigger } from "~/components/ui/sidebar";
+import { useAppContext } from "~/contexts/app-context";
+
+function UserInitials({ name }: { name?: string }) {
+  const initials = (name ?? "")
+    .split(" ")
+    .map((w) => w[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <span className="copa:flex copa:size-8 copa:shrink-0 copa:items-center copa:justify-center copa:rounded-full copa:bg-primary/10 copa:text-xs copa:font-semibold copa:text-primary">
+      {initials || "?"}
+    </span>
+  );
+}
+
+export function SiteHeader() {
+  const { user } = useAppContext();
+
+  return (
+    <header className="copa:flex copa:h-14 copa:shrink-0 copa:items-center copa:gap-2 copa:px-6 copa:bg-sidebar copa:border-b copa:border-sidebar-border">
+      <SidebarTrigger className="copa:-ml-1" />
+      <Separator
+        orientation="vertical"
+        className="copa:mx-2 copa:data-[orientation=vertical]:h-4"
+      />
+      <BluecopaLogo className="copa:size-7" />
+      <span className="copa:text-sm copa:font-semibold">Bluecopa</span>
+
+      <div className="copa:ml-auto">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="copa:flex copa:items-center copa:gap-2.5 copa:rounded-full copa:border copa:border-border copa:py-1 copa:pl-1 copa:pr-3 copa:text-sm copa:shadow-sm copa:transition-colors copa:hover:bg-accent copa:focus-visible:outline-none copa:focus-visible:ring-2 copa:focus-visible:ring-ring">
+              <UserInitials name={user?.name} />
+              <span className="copa:hidden copa:sm:inline copa:font-medium copa:text-foreground">
+                {user?.name}
+              </span>
+              <IconChevronDown className="copa:size-3.5 copa:text-muted-foreground" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" sideOffset={8} className="copa:w-60 copa:rounded-lg copa:p-1.5 copa:shadow-lg">
+            <DropdownMenuLabel className="copa:px-2 copa:py-2 copa:font-normal">
+              <div className="copa:flex copa:items-center copa:gap-2.5">
+                <UserInitials name={user?.name} />
+                <div className="copa:min-w-0 copa:flex copa:flex-col">
+                  <span className="copa:truncate copa:text-sm copa:font-medium">
+                    {user?.name}
+                  </span>
+                  <span className="copa:truncate copa:text-xs copa:text-muted-foreground">
+                    {user?.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator className="copa:my-1.5" />
+            <DropdownMenuItem className="copa:gap-2 copa:px-2 copa:py-1.5 copa:text-sm">
+              <IconUserCircle className="copa:size-4 copa:text-muted-foreground" />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem className="copa:gap-2 copa:px-2 copa:py-1.5 copa:text-sm">
+              <IconSettings className="copa:size-4 copa:text-muted-foreground" />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuSeparator className="copa:my-1.5" />
+            <DropdownMenuItem className="copa:gap-2 copa:px-2 copa:py-1.5 copa:text-sm copa:text-destructive">
+              <IconLogout className="copa:size-4" />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

package/templates/latest/app/components/loading-screen.tsx

@@ -0,0 +1,41 @@
+/**
+ * Full-screen loading indicator shown while the app is initializing
+ * (config, CSS, user data). Uses inline styles so it renders correctly
+ * even before Tailwind CSS is fully loaded.
+ */
+export function LoadingScreen({ message = "Loading..." }: { message?: string }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        width: "100%",
+        background: "#f8f8fa",
+        fontFamily: "'Satoshi', system-ui, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: "16px",
+        }}
+      >
+        <div
+          style={{
+            width: "40px",
+            height: "40px",
+            border: "3px solid #e5e7eb",
+            borderTopColor: "#3548ff",
+            borderRadius: "50%",
+            animation: "init-spin 0.7s linear infinite",
+          }}
+        />
+        <span style={{ color: "#6b7280", fontSize: "0.835rem" }}>{message}</span>
+      </div>
+    </div>
+  );
+}

package/templates/latest/app/components/ui/ag-grid-table.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+import { AgGridReact } from "ag-grid-react";
+import type { ColDef, GridOptions } from "ag-grid-community";
+import {
+  AllCommunityModule,
+  ClientSideRowModelModule,
+  ModuleRegistry,
+  NumberEditorModule,
+  NumberFilterModule,
+  TextFilterModule,
+  ValidationModule,
+} from "ag-grid-community";
+import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
+import {
+  MasterDetailModule,
+  ServerSideRowModelModule,
+  SetFilterModule,
+  SparklinesModule,
+  ContextMenuModule,
+} from "ag-grid-enterprise";
+import { gridTheme } from "~/utils/ag-grid-theme";
+
+ModuleRegistry.registerModules([
+  AllCommunityModule,
+  ClientSideRowModelModule,
+  MasterDetailModule,
+  SetFilterModule,
+  ServerSideRowModelModule,
+  SparklinesModule.with(AgChartsEnterpriseModule),
+  ContextMenuModule,
+  ValidationModule,
+  NumberFilterModule,
+  NumberEditorModule,
+  TextFilterModule,
+]);
+
+export interface AgGridTableProps<TData extends object = any> {
+  columnDefs: ColDef<TData>[];
+  rowData?: TData[];
+  gridOptions?: GridOptions<TData>;
+  height?: number | string;
+  className?: string;
+  header?: ReactNode;
+  quickFilterText?: string;
+}
+
+export function AgGridTable<TData extends object = any>({
+  columnDefs,
+  rowData,
+  gridOptions,
+  height = 500,
+  className = "",
+  header,
+  quickFilterText,
+}: AgGridTableProps<TData>) {
+  const isInfiniteOrServerSide =
+    gridOptions?.rowModelType === "infinite" ||
+    gridOptions?.rowModelType === "serverSide";
+
+  return (
+    <div className={`copa:flex copa:flex-col copa:gap-2 ${className}`}>
+      {header ? <div>{header}</div> : null}
+      <div
+        style={{
+          height: typeof height === "number" ? `${height}px` : height,
+        }}
+      >
+        <AgGridReact<TData>
+          theme={gridTheme}
+          columnDefs={columnDefs}
+          {...(!isInfiniteOrServerSide && rowData ? { rowData } : {})}
+          animateRows
+          quickFilterText={quickFilterText}
+          {...gridOptions}
+        />
+      </div>
+    </div>
+  );
+}