realtimex-crm 0.5.3 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.5.3",
+  "version": "0.5.7",
   "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",

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/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,15 +1,15 @@
 import { useEffect, useState } from "react";
-import { useDataProvider } from "ra-core";
+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) {
-  const dataProvider = useDataProvider();
+export function DatabaseHealthCheck({ children, dataProvider }: DatabaseHealthCheckProps) {
   const [healthStatus, setHealthStatus] = useState<DatabaseHealthStatus | null>(null);
   const [isChecking, setIsChecking] = useState(true);
 
@@ -24,7 +24,7 @@ export function DatabaseHealthCheck({ children }: DatabaseHealthCheckProps) {
           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);
         }

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>
+  );
+};