realtimex-crm 0.5.1 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.5.1",
+  "version": "0.5.5",
   "description": "RealTimeX CRM - A full-featured CRM built with React, shadcn-admin-kit, and Supabase. Fork of Atomic CRM with RealTimeX App SDK integration.",
   "type": "module",
   "main": "./dist/index.js",
@@ -65,8 +65,6 @@
     "prettier": "prettier --config ./.prettierrc.json --check \"**/*.{js,json,ts,tsx,css,md,html}\"",
     "registry:build": "npx shadcn build",
     "registry:gen": "node ./scripts/generate-registry.mjs",
-    "setup:gen": "cat supabase/migrations/*.sql > public/setup.sql && echo 'Generated public/setup.sql from migrations'",
-    "db:migrate": "node ./scripts/auto-migrate.mjs",
     "ghpages:deploy": "node ./scripts/ghpages-deploy.mjs",
     "supabase:remote:init": "node ./scripts/supabase-remote-init.mjs",
     "prepare": "husky"

package/src/App.tsx

@@ -32,7 +32,6 @@ const App = () => {
   const [needsSetup, setNeedsSetup] = useState<boolean>(() => {
     // Check immediately on mount
     const configured = isSupabaseConfigured();
-    console.log("[App] Supabase configured:", configured);
     return !configured;
   });
 

package/src/components/atomic-crm/companies/CompanyList.tsx

@@ -4,6 +4,8 @@ import { ExportButton } from "@/components/admin/export-button";
 import { List } from "@/components/admin/list";
 import { ListPagination } from "@/components/admin/list-pagination";
 import { SortButton } from "@/components/admin/sort-button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card } from "@/components/ui/card";
 
 import { TopToolbar } from "../layout/TopToolbar";
 import { CompanyEmpty } from "./CompanyEmpty";
@@ -11,8 +13,6 @@ import { CompanyListFilter } from "./CompanyListFilter";
 import { ImageList } from "./GridList";
 
 export const CompanyList = () => {
-  const { identity } = useGetIdentity();
-  if (!identity) return null;
   return (
     <List
       title={false}
@@ -28,9 +28,32 @@ export const CompanyList = () => {
 
 const CompanyListLayout = () => {
   const { data, isPending, filterValues } = useListContext();
+  const { identity } = useGetIdentity();
   const hasFilters = filterValues && Object.keys(filterValues).length > 0;
 
-  if (isPending) return null;
+  // Show loading skeleton while identity or data is loading
+  if (!identity || isPending) {
+    return (
+      <div className="w-full flex flex-row gap-8">
+        <div className="w-64">
+          <Skeleton className="h-96 w-full" />
+        </div>
+        <div className="flex flex-col flex-1 gap-4">
+          <Card className="p-4">
+            <div className="grid grid-cols-3 gap-4">
+              <Skeleton className="h-48 w-full" />
+              <Skeleton className="h-48 w-full" />
+              <Skeleton className="h-48 w-full" />
+              <Skeleton className="h-48 w-full" />
+              <Skeleton className="h-48 w-full" />
+              <Skeleton className="h-48 w-full" />
+            </div>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
   if (!data?.length && !hasFilters) return <CompanyEmpty />;
 
   return (

package/src/components/atomic-crm/contacts/ContactList.tsx

@@ -11,6 +11,7 @@ import { ExportButton } from "@/components/admin/export-button";
 import { List } from "@/components/admin/list";
 import { SortButton } from "@/components/admin/sort-button";
 import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import type { Company, Contact, Sale, Tag } from "../types";
 import { ContactEmpty } from "./ContactEmpty";
@@ -20,10 +21,6 @@ import { ContactListFilter } from "./ContactListFilter";
 import { TopToolbar } from "../layout/TopToolbar";
 
 export const ContactList = () => {
-  const { identity } = useGetIdentity();
-
-  if (!identity) return null;
-
   return (
     <List
       title={false}
@@ -43,7 +40,27 @@ const ContactListLayout = () => {
 
   const hasFilters = filterValues && Object.keys(filterValues).length > 0;
 
-  if (!identity || isPending) return null;
+  // Show loading skeleton while identity or data is loading
+  if (!identity || isPending) {
+    return (
+      <div className="flex flex-row gap-8">
+        <div className="w-64">
+          <Skeleton className="h-96 w-full" />
+        </div>
+        <div className="w-full flex flex-col gap-4">
+          <Card className="p-4">
+            <div className="space-y-3">
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+            </div>
+          </Card>
+        </div>
+      </div>
+    );
+  }
 
   if (!data?.length && !hasFilters) return <ContactEmpty />;
 

package/src/components/atomic-crm/deals/DealList.tsx

@@ -8,6 +8,8 @@ import { ReferenceInput } from "@/components/admin/reference-input";
 import { FilterButton } from "@/components/admin/filter-form";
 import { SearchInput } from "@/components/admin/search-input";
 import { SelectInput } from "@/components/admin/select-input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card } from "@/components/ui/card";
 
 import { useConfigurationContext } from "../root/ConfigurationContext";
 import { TopToolbar } from "../layout/TopToolbar";
@@ -20,11 +22,8 @@ import { DealShow } from "./DealShow";
 import { OnlyMineInput } from "./OnlyMineInput";
 
 const DealList = () => {
-  const { identity } = useGetIdentity();
   const { dealCategories } = useConfigurationContext();
 
-  if (!identity) return null;
-
   const dealFilters = [
     <SearchInput source="q" alwaysOn />,
     <ReferenceInput source="company_id" reference="companies">
@@ -60,9 +59,25 @@ const DealLayout = () => {
   const matchEdit = matchPath("/deals/:id", location.pathname);
 
   const { data, isPending, filterValues } = useListContext();
+  const { identity } = useGetIdentity();
   const hasFilters = filterValues && Object.keys(filterValues).length > 0;
 
-  if (isPending) return null;
+  // Show loading skeleton while identity or data is loading
+  if (!identity || isPending) {
+    return (
+      <div className="w-full">
+        <Card className="p-4">
+          <div className="flex gap-4">
+            <Skeleton className="h-96 w-1/4" />
+            <Skeleton className="h-96 w-1/4" />
+            <Skeleton className="h-96 w-1/4" />
+            <Skeleton className="h-96 w-1/4" />
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   if (!data?.length && !hasFilters)
     return (
       <>

package/src/components/atomic-crm/login/StartPage.tsx

@@ -2,130 +2,26 @@ import { useQuery } from "@tanstack/react-query";
 import { useDataProvider } from "ra-core";
 import { Navigate } from "react-router-dom";
 import { LoginPage } from "@/components/admin/login-page";
-import { checkDatabaseHealth } from "@/lib/database-health-check";
 
 import type { CrmDataProvider } from "../providers/types";
 import { LoginSkeleton } from "./LoginSkeleton";
 
 export const StartPage = () => {
   const dataProvider = useDataProvider<CrmDataProvider>();
-
-  // First check database health
-  const {
-    data: healthStatus,
-    error: healthError,
-    isPending: isCheckingHealth,
-  } = useQuery({
-    queryKey: ["database-health"],
-    queryFn: checkDatabaseHealth,
-  });
-
-  // Then check if initialized (only if database is healthy)
   const {
     data: isInitialized,
-    error: initError,
-    isPending: isCheckingInit,
+    error,
+    isPending,
   } = useQuery({
     queryKey: ["init"],
     queryFn: async () => {
       return dataProvider.isInitialized();
     },
-    enabled: healthStatus?.isHealthy === true,
   });
 
-  // Show loading state
-  if (isCheckingHealth || isCheckingInit) return <LoginSkeleton />;
-
-  // Show error if schema is missing
-  if (healthStatus && !healthStatus.isHealthy) {
-    return (
-      <div className="flex items-center justify-center min-h-screen p-4">
-        <div className="max-w-md w-full space-y-4">
-          <div className="text-center space-y-2">
-            <div className="flex justify-center">
-              <div className="rounded-full bg-destructive/10 p-3">
-                <svg
-                  className="h-6 w-6 text-destructive"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                  />
-                </svg>
-              </div>
-            </div>
-            <h1 className="text-2xl font-bold">Database Not Configured</h1>
-            <p className="text-muted-foreground">
-              Your Supabase database is missing required tables and functions.
-            </p>
-          </div>
-
-          <div className="bg-muted p-4 rounded-lg space-y-2">
-            <p className="text-sm font-semibold">Missing tables:</p>
-            <div className="flex flex-wrap gap-2">
-              {healthStatus.missingTables.map((table) => (
-                <span
-                  key={table}
-                  className="px-2 py-1 bg-background text-xs rounded border"
-                >
-                  {table}
-                </span>
-              ))}
-            </div>
-          </div>
-
-          <div className="space-y-3 text-sm">
-            <p className="font-semibold">To fix this:</p>
-            <ol className="list-decimal list-inside space-y-2 text-muted-foreground ml-2">
-              <li>
-                Download{" "}
-                <a
-                  href="https://raw.githubusercontent.com/therealtimex/realtimex-crm/main/public/setup.sql"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary hover:underline font-semibold"
-                  download="setup.sql"
-                >
-                  setup.sql
-                </a>
-              </li>
-              <li>Open your Supabase project's SQL Editor</li>
-              <li>Copy all contents from setup.sql and paste into the editor</li>
-              <li>Click "Run" to execute the setup</li>
-              <li>Return here and reload the page</li>
-            </ol>
-          </div>
-
-          <button
-            onClick={() => window.location.reload()}
-            className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
-          >
-            Reload Page
-          </button>
-
-          <div className="pt-4 border-t text-center">
-            <a
-              href="https://github.com/therealtimex/realtimex-crm#database-setup"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm text-primary hover:underline"
-            >
-              View detailed setup guide →
-            </a>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Show login page if there's an error or already initialized
-  if (healthError || initError || isInitialized) return <LoginPage />;
+  if (isPending) return <LoginSkeleton />;
+  if (error) return <LoginPage />;
+  if (isInitialized) return <LoginPage />;
 
-  // Not initialized yet, go to signup
   return <Navigate to="/sign-up" />;
 };

package/src/components/atomic-crm/providers/supabase/supabase.ts

@@ -1,34 +1,31 @@
 import { createClient, type SupabaseClient } from "@supabase/supabase-js";
 import { getSupabaseConfig } from "@/lib/supabase-config";
 
-// Lazy initialization - create client on first access
-let supabaseInstance: SupabaseClient | null = null;
+// Create client immediately to ensure session restoration happens early
+// This is critical for auth session persistence across page refreshes
+function createSupabaseClient(): SupabaseClient {
+  const config = getSupabaseConfig();
 
-function getSupabaseClient(): SupabaseClient {
-  if (!supabaseInstance) {
-    const config = getSupabaseConfig();
-
-    if (!config) {
-      // Return a placeholder client that will never be used
-      // (App.tsx will show setup wizard before this is accessed)
-      console.warn("[Supabase] No configuration found, using placeholder");
-      supabaseInstance = createClient(
-        "https://placeholder.supabase.co",
-        "placeholder-key",
-      );
-    } else {
-      supabaseInstance = createClient(config.url, config.anonKey);
-    }
+  if (!config) {
+    // Return a placeholder client that will never be used
+    // (App.tsx will show setup wizard before this is accessed)
+    console.warn("[Supabase] No configuration found, using placeholder");
+    return createClient(
+      "https://placeholder.supabase.co",
+      "placeholder-key",
+    );
   }
 
-  return supabaseInstance;
+  return createClient(config.url, config.anonKey, {
+    auth: {
+      // Ensure session is persisted and restored from localStorage
+      persistSession: true,
+      autoRefreshToken: true,
+      detectSessionInUrl: true,
+    },
+  });
 }
 
-// Export as a getter proxy to support lazy initialization
-export const supabase = new Proxy({} as SupabaseClient, {
-  get(_target, prop) {
-    const client = getSupabaseClient();
-    const value = client[prop as keyof SupabaseClient];
-    return typeof value === "function" ? value.bind(client) : value;
-  },
-});
+// Create client immediately on module load (not lazy!)
+// This ensures session restoration from localStorage happens before any auth checks
+export const supabase = createSupabaseClient();

package/src/components/atomic-crm/root/CRM.tsx

@@ -131,32 +131,32 @@ export const CRM = ({
       taskTypes={taskTypes}
       title={title}
     >
-      <Admin
-        dataProvider={dataProvider}
-        authProvider={authProvider}
-        store={localStorageStore(undefined, "CRM")}
-        layout={Layout}
-        loginPage={StartPage}
-        i18nProvider={i18nProvider}
-        dashboard={Dashboard}
-        requireAuth
-        disableTelemetry
-        {...rest}
-      >
-        <CustomRoutes noLayout>
-          <Route path={SignupPage.path} element={<SignupPage />} />
-          <Route path={SetPasswordPage.path} element={<SetPasswordPage />} />
-          <Route
-            path={ForgotPasswordPage.path}
-            element={<ForgotPasswordPage />}
-          />
-        </CustomRoutes>
+      <DatabaseHealthCheck dataProvider={dataProvider}>
+        <Admin
+          dataProvider={dataProvider}
+          authProvider={authProvider}
+          store={localStorageStore(undefined, "CRM")}
+          layout={Layout}
+          loginPage={StartPage}
+          i18nProvider={i18nProvider}
+          dashboard={Dashboard}
+          requireAuth
+          disableTelemetry
+          {...rest}
+        >
+          <CustomRoutes noLayout>
+            <Route path={SignupPage.path} element={<SignupPage />} />
+            <Route path={SetPasswordPage.path} element={<SetPasswordPage />} />
+            <Route
+              path={ForgotPasswordPage.path}
+              element={<ForgotPasswordPage />}
+            />
+          </CustomRoutes>
 
-        <CustomRoutes>
-          <Route path={SettingsPage.path} element={<SettingsPage />} />
-          <Route path={DatabasePage.path} element={<DatabasePage />} />
-        </CustomRoutes>
-        <DatabaseHealthCheck>
+          <CustomRoutes>
+            <Route path={SettingsPage.path} element={<SettingsPage />} />
+            <Route path={DatabasePage.path} element={<DatabasePage />} />
+          </CustomRoutes>
           <Resource name="deals" {...deals} />
           <Resource name="contacts" {...contacts} />
           <Resource name="companies" {...companies} />
@@ -165,8 +165,8 @@ export const CRM = ({
           <Resource name="tasks" />
           <Resource name="sales" {...sales} />
           <Resource name="tags" />
-        </DatabaseHealthCheck>
-      </Admin>
+        </Admin>
+      </DatabaseHealthCheck>
     </ConfigurationProvider>
   );
 };

package/src/components/atomic-crm/root/DatabaseHealthCheck.tsx

@@ -1,13 +1,15 @@
 import { useEffect, useState } from "react";
+import type { DataProvider } from "ra-core";
 import { checkDatabaseHealth, DatabaseHealthStatus } from "@/lib/database-health-check";
 import { getSupabaseConfig } from "@/lib/supabase-config";
 import { DatabaseSetupGuide } from "../setup/DatabaseSetupGuide";
 
 interface DatabaseHealthCheckProps {
   children: React.ReactNode;
+  dataProvider: DataProvider;
 }
 
-export function DatabaseHealthCheck({ children }: DatabaseHealthCheckProps) {
+export function DatabaseHealthCheck({ children, dataProvider }: DatabaseHealthCheckProps) {
   const [healthStatus, setHealthStatus] = useState<DatabaseHealthStatus | null>(null);
   const [isChecking, setIsChecking] = useState(true);
 
@@ -16,13 +18,13 @@ export function DatabaseHealthCheck({ children }: DatabaseHealthCheckProps) {
 
     async function checkHealth() {
       try {
-        const status = await checkDatabaseHealth();
+        const status = await checkDatabaseHealth(dataProvider);
         if (!cancelled) {
           setHealthStatus(status);
           setIsChecking(false);
         }
       } catch (error) {
-        console.error("Failed to check database health:", error);
+        console.error("[DatabaseHealthCheck] Failed to check database health:", error);
         if (!cancelled) {
           setIsChecking(false);
         }
@@ -34,7 +36,7 @@ export function DatabaseHealthCheck({ children }: DatabaseHealthCheckProps) {
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [dataProvider]);
 
   // Show loading state
   if (isChecking) {

package/src/components/atomic-crm/sales/SalesList.tsx

@@ -1,12 +1,15 @@
-import { useRecordContext } from "ra-core";
+import { useGetIdentity, useListContext, useRecordContext } from "ra-core";
 import { CreateButton } from "@/components/admin/create-button";
 import { DataTable } from "@/components/admin/data-table";
 import { ExportButton } from "@/components/admin/export-button";
 import { List } from "@/components/admin/list";
 import { SearchInput } from "@/components/admin/search-input";
 import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import { TopToolbar } from "../layout/TopToolbar";
+import useAppBarHeight from "../misc/useAppBarHeight";
 
 const SalesListActions = () => (
   <TopToolbar>
@@ -49,14 +52,68 @@ export function SalesList() {
       actions={<SalesListActions />}
       sort={{ field: "first_name", order: "ASC" }}
     >
-      <DataTable>
-        <DataTable.Col source="first_name" />
-        <DataTable.Col source="last_name" />
-        <DataTable.Col source="email" />
-        <DataTable.Col label={false}>
-          <OptionsField />
-        </DataTable.Col>
-      </DataTable>
+      <SalesListLayout />
     </List>
   );
 }
+
+const SalesListLayout = () => {
+  const { data, isPending, filterValues } = useListContext();
+  const { identity } = useGetIdentity();
+
+  const hasFilters = filterValues && Object.keys(filterValues).length > 0;
+
+  // Show loading skeleton while identity or data is loading
+  if (!identity || isPending) {
+    return (
+      <Card className="p-4">
+        <div className="space-y-3">
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-full" />
+        </div>
+      </Card>
+    );
+  }
+
+  // Show empty state when no data
+  if (!data?.length && !hasFilters) {
+    return <SalesEmpty />;
+  }
+
+  return (
+    <DataTable>
+      <DataTable.Col source="first_name" />
+      <DataTable.Col source="last_name" />
+      <DataTable.Col source="email" />
+      <DataTable.Col label={false}>
+        <OptionsField />
+      </DataTable.Col>
+    </DataTable>
+  );
+};
+
+const SalesEmpty = () => {
+  const appbarHeight = useAppBarHeight();
+  return (
+    <div
+      className="flex flex-col justify-center items-center gap-3"
+      style={{
+        height: `calc(100dvh - ${appbarHeight}px)`,
+      }}
+    >
+      <img src="./img/empty.svg" alt="No users found" />
+      <div className="flex flex-col gap-0 items-center">
+        <h6 className="text-lg font-bold">No users found</h6>
+        <p className="text-sm text-muted-foreground text-center mb-4">
+          It seems your user list is empty.
+        </p>
+      </div>
+      <div className="flex flex-row gap-2">
+        <CreateButton label="New user" />
+      </div>
+    </div>
+  );
+};