realtimex-crm 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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/components/atomic-crm/dashboard/DashboardStepper.tsx

@@ -36,7 +36,7 @@ export const DashboardStepper = ({
           <div className="flex flex-col gap-12">
             <div className="flex gap-8 items-center">
               <CheckCircle className="text-green-600 w-5 h-5" />
-              <h4 className="font-bold">Install Atomic CRM</h4>
+              <h4 className="font-bold">Install RealTimeX CRM</h4>
             </div>
             <div className="flex gap-8 items-start">
               {step > 1 ? (

package/src/components/atomic-crm/dashboard/Welcome.tsx

@@ -13,7 +13,8 @@ export const Welcome = () => (
         >
           RealTimeX CRM
         </a>{" "}
-        is a full-featured CRM designed to help you manage contacts, deals, and tasks.
+        is a full-featured CRM designed to help you manage contacts, deals, and
+        tasks.
       </p>
       <p className="text-sm mb-4">
         This demo runs on a mock API, so you can explore and modify the data. It

package/src/components/atomic-crm/layout/Header.tsx

@@ -1,5 +1,5 @@
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { Settings, User } from "lucide-react";
+import { Database, User } from "lucide-react";
 import { CanAccess } from "ra-core";
 import { Link, matchPath, useLocation } from "react-router";
 import { RefreshButton } from "@/components/admin/refresh-button";
@@ -76,6 +76,7 @@ const Header = () => {
               <RefreshButton />
               <UserMenu>
                 <ConfigurationMenu />
+                <DatabaseMenu />
                 <CanAccess resource="sales" action="list">
                   <UsersMenu />
                 </CanAccess>
@@ -125,10 +126,23 @@ const ConfigurationMenu = () => {
   return (
     <DropdownMenuItem asChild onClick={onClose}>
       <Link to="/settings" className="flex items-center gap-2">
-        <Settings />
+        <User />
         My info
       </Link>
     </DropdownMenuItem>
   );
 };
+
+const DatabaseMenu = () => {
+  const { onClose } = useUserMenu() ?? {};
+  return (
+    <DropdownMenuItem asChild onClick={onClose}>
+      <Link to="/database" className="flex items-center gap-2">
+        <Database />
+        Database
+      </Link>
+    </DropdownMenuItem>
+  );
+};
+
 export default Header;

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

@@ -22,6 +22,7 @@ import {
   dataProvider as defaultDataProvider,
 } from "../providers/supabase";
 import sales from "../sales";
+import { DatabasePage } from "../settings/DatabasePage";
 import { SettingsPage } from "../settings/SettingsPage";
 import type { ConfigurationContextValue } from "./ConfigurationContext";
 import { ConfigurationProvider } from "./ConfigurationContext";
@@ -39,6 +40,7 @@ import {
 } from "./defaultConfiguration";
 import { i18nProvider } from "./i18nProvider";
 import { StartPage } from "../login/StartPage.tsx";
+import { DatabaseHealthCheck } from "./DatabaseHealthCheck";
 
 export type CRMProps = {
   dataProvider?: DataProvider;
@@ -152,15 +154,18 @@ export const CRM = ({
 
         <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} />
-        <Resource name="contactNotes" />
-        <Resource name="dealNotes" />
-        <Resource name="tasks" />
-        <Resource name="sales" {...sales} />
-        <Resource name="tags" />
+        <DatabaseHealthCheck>
+          <Resource name="deals" {...deals} />
+          <Resource name="contacts" {...contacts} />
+          <Resource name="companies" {...companies} />
+          <Resource name="contactNotes" />
+          <Resource name="dealNotes" />
+          <Resource name="tasks" />
+          <Resource name="sales" {...sales} />
+          <Resource name="tags" />
+        </DatabaseHealthCheck>
       </Admin>
     </ConfigurationProvider>
   );

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

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { useDataProvider } 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;
+}
+
+export function DatabaseHealthCheck({ children }: DatabaseHealthCheckProps) {
+  const dataProvider = useDataProvider();
+  const [healthStatus, setHealthStatus] = useState<DatabaseHealthStatus | null>(null);
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function checkHealth() {
+      try {
+        const status = await checkDatabaseHealth(dataProvider);
+        if (!cancelled) {
+          setHealthStatus(status);
+          setIsChecking(false);
+        }
+      } catch (error) {
+        console.error("Failed to check database health:", error);
+        if (!cancelled) {
+          setIsChecking(false);
+        }
+      }
+    }
+
+    checkHealth();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [dataProvider]);
+
+  // Show loading state
+  if (isChecking) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center space-y-4">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+          <p className="text-muted-foreground">Checking database connection...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show setup guide if database is not healthy
+  if (healthStatus && !healthStatus.isHealthy) {
+    const config = getSupabaseConfig();
+    if (config) {
+      return (
+        <DatabaseSetupGuide
+          missingTables={healthStatus.missingTables}
+          supabaseUrl={config.url}
+        />
+      );
+    }
+  }
+
+  // Database is healthy, render children
+  return <>{children}</>;
+}

package/src/components/atomic-crm/settings/DatabasePage.tsx

@@ -0,0 +1,11 @@
+import { DatabaseSettings } from "./DatabaseSettings";
+
+export const DatabasePage = () => {
+  return (
+    <div className="max-w-lg mx-auto mt-8">
+      <DatabaseSettings />
+    </div>
+  );
+};
+
+DatabasePage.path = "/database";

package/src/components/atomic-crm/settings/DatabaseSettings.tsx

@@ -7,7 +7,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Database, CheckCircle, XCircle, Settings, Trash2 } from "lucide-react";
 import {
@@ -37,16 +36,9 @@ export function DatabaseSettings() {
     <>
       <Card>
         <CardHeader>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Database className="h-5 w-5" />
-              <CardTitle>Database Connection</CardTitle>
-            </div>
-            {config && (
-              <Badge variant={source === "ui" ? "default" : "secondary"}>
-                {source === "ui" ? "UI Configured" : "Environment Variables"}
-              </Badge>
-            )}
+          <div className="flex items-center gap-2">
+            <Database className="h-5 w-5" />
+            <CardTitle>Database Connection</CardTitle>
           </div>
           <CardDescription>
             Manage your Supabase database connection settings

package/src/components/atomic-crm/settings/SettingsPage.tsx

@@ -24,7 +24,6 @@ import {
 import ImageEditorField from "../misc/ImageEditorField";
 import type { CrmDataProvider } from "../providers/types";
 import type { Sale, SalesFormData } from "../types";
-import { DatabaseSettings } from "./DatabaseSettings";
 
 export const SettingsPage = () => {
   const [isEditMode, setEditMode] = useState(false);
@@ -130,8 +129,6 @@ const SettingsForm = ({
 
   return (
     <div className="space-y-4">
-      <DatabaseSettings />
-
       <Card>
         <CardContent>
           <div className="mb-4 flex flex-row justify-between">

package/src/components/atomic-crm/setup/DatabaseSetupGuide.tsx

@@ -0,0 +1,247 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { AlertCircle, CheckCircle, Database, ExternalLink } from "lucide-react";
+
+interface DatabaseSetupGuideProps {
+  missingTables: string[];
+  supabaseUrl: string;
+}
+
+export function DatabaseSetupGuide({
+  missingTables,
+  supabaseUrl,
+}: DatabaseSetupGuideProps) {
+  const projectRef = supabaseUrl.match(/https:\/\/([^.]+)\.supabase\.co/)?.[1];
+
+  return (
+    <div className="max-w-2xl mx-auto mt-8 space-y-4">
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Database Schema Not Configured</AlertTitle>
+        <AlertDescription>
+          Your Supabase database is connected, but the CRM schema hasn't been
+          set up yet.
+        </AlertDescription>
+      </Alert>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Database className="h-5 w-5" />
+            <CardTitle>Setup Instructions</CardTitle>
+          </div>
+          <CardDescription>
+            Follow these steps to set up your database schema
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Missing Tables */}
+          <div>
+            <h3 className="font-semibold mb-2">Missing Tables:</h3>
+            <div className="flex flex-wrap gap-2">
+              {missingTables.map((table) => (
+                <span
+                  key={table}
+                  className="px-2 py-1 bg-destructive/10 text-destructive text-sm rounded"
+                >
+                  {table}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Option 1: Supabase CLI */}
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm font-bold">
+                1
+              </div>
+              <h3 className="font-semibold">Using Supabase CLI (Recommended)</h3>
+            </div>
+            <div className="ml-8 space-y-3">
+              <div>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Install Supabase CLI:
+                </p>
+                <pre className="bg-muted p-3 rounded text-sm overflow-x-auto">
+                  npm install -g supabase
+                </pre>
+              </div>
+
+              <div>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Clone the RealTimeX CRM repository to get migrations:
+                </p>
+                <pre className="bg-muted p-3 rounded text-sm overflow-x-auto">
+                  git clone https://github.com/therealtimex/realtimex-crm.git
+                  {"\n"}cd realtimex-crm
+                </pre>
+              </div>
+
+              <div>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Link to your Supabase project:
+                </p>
+                <pre className="bg-muted p-3 rounded text-sm overflow-x-auto">
+                  supabase link --project-ref {projectRef || "YOUR_PROJECT_REF"}
+                </pre>
+              </div>
+
+              <div>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Push the migrations:
+                </p>
+                <pre className="bg-muted p-3 rounded text-sm overflow-x-auto">
+                  supabase db push
+                </pre>
+              </div>
+
+              <div>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Reload this page after migrations are complete.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Option 2: SQL Editor */}
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm font-bold">
+                2
+              </div>
+              <h3 className="font-semibold">Using Supabase SQL Editor</h3>
+            </div>
+            <div className="ml-8 space-y-3">
+              <p className="text-sm text-muted-foreground">
+                Manually run the SQL migrations in your Supabase SQL Editor:
+              </p>
+
+              <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
+                <li>
+                  Download migrations from{" "}
+                  <a
+                    href="https://github.com/therealtimex/realtimex-crm/tree/main/supabase/migrations"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline inline-flex items-center gap-1"
+                  >
+                    GitHub
+                    <ExternalLink className="h-3 w-3" />
+                  </a>
+                </li>
+                <li>
+                  Open your{" "}
+                  <a
+                    href={`https://supabase.com/dashboard/project/${projectRef}/sql/new`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline inline-flex items-center gap-1"
+                  >
+                    Supabase SQL Editor
+                    <ExternalLink className="h-3 w-3" />
+                  </a>
+                </li>
+                <li>
+                  Run each migration file in order (by date in filename)
+                </li>
+                <li>
+                  Reload this page after all migrations are complete
+                </li>
+              </ol>
+
+              {projectRef && (
+                <Button asChild variant="outline" className="w-full">
+                  <a
+                    href={`https://supabase.com/dashboard/project/${projectRef}/sql/new`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    Open SQL Editor
+                  </a>
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* Verification */}
+          <div className="space-y-3 pt-4 border-t">
+            <h3 className="font-semibold">After Setup</h3>
+            <div className="space-y-2 text-sm text-muted-foreground">
+              <div className="flex items-start gap-2">
+                <CheckCircle className="h-4 w-4 mt-0.5 text-green-500" />
+                <span>
+                  All tables will be created with proper schemas and
+                  relationships
+                </span>
+              </div>
+              <div className="flex items-start gap-2">
+                <CheckCircle className="h-4 w-4 mt-0.5 text-green-500" />
+                <span>Row Level Security (RLS) policies will be configured</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <CheckCircle className="h-4 w-4 mt-0.5 text-green-500" />
+                <span>Database triggers and functions will be set up</span>
+              </div>
+            </div>
+
+            <Button
+              onClick={() => window.location.reload()}
+              className="w-full mt-4"
+            >
+              Reload Page
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Additional Resources */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Need Help?</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm">
+          <a
+            href="https://github.com/therealtimex/realtimex-crm#installation"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 text-primary hover:underline"
+          >
+            <ExternalLink className="h-4 w-4" />
+            View Full Setup Guide
+          </a>
+          <a
+            href="https://github.com/therealtimex/realtimex-crm/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 text-primary hover:underline"
+          >
+            <ExternalLink className="h-4 w-4" />
+            Report an Issue
+          </a>
+          <a
+            href="https://supabase.com/docs/guides/cli"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 text-primary hover:underline"
+          >
+            <ExternalLink className="h-4 w-4" />
+            Supabase CLI Documentation
+          </a>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/lib/database-health-check.ts

@@ -0,0 +1,60 @@
+import { DataProvider } from "ra-core";
+
+export interface DatabaseHealthStatus {
+  isHealthy: boolean;
+  missingTables: string[];
+  error?: string;
+}
+
+/**
+ * Check if the database has the required schema
+ */
+export async function checkDatabaseHealth(
+  dataProvider: DataProvider,
+): Promise<DatabaseHealthStatus> {
+  const requiredTables = [
+    "contacts",
+    "companies",
+    "deals",
+    "contactNotes",
+    "dealNotes",
+    "tasks",
+    "sales",
+    "tags",
+  ];
+
+  const missingTables: string[] = [];
+
+  try {
+    // Try to query each table
+    for (const table of requiredTables) {
+      try {
+        await dataProvider.getList(table, {
+          pagination: { page: 1, perPage: 1 },
+          sort: { field: "id", order: "ASC" },
+          filter: {},
+        });
+      } catch (error: any) {
+        // Check if it's a "table not found" error
+        if (
+          error?.message?.includes("Could not find the table") ||
+          error?.message?.includes("relation") ||
+          error?.message?.includes("does not exist")
+        ) {
+          missingTables.push(table);
+        }
+      }
+    }
+
+    return {
+      isHealthy: missingTables.length === 0,
+      missingTables,
+    };
+  } catch (error: any) {
+    return {
+      isHealthy: false,
+      missingTables: requiredTables,
+      error: error?.message || "Unknown error",
+    };
+  }
+}