realtimex-crm 0.1.2

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

@@ -0,0 +1,259 @@
+import { useMutation } from "@tanstack/react-query";
+import { CircleX, Copy, Pencil, Save } from "lucide-react";
+import {
+  Form,
+  useDataProvider,
+  useGetIdentity,
+  useGetOne,
+  useNotify,
+  useRecordContext,
+} from "ra-core";
+import { useState } from "react";
+import { useFormState } from "react-hook-form";
+import { RecordField } from "@/components/admin/record-field";
+import { TextInput } from "@/components/admin/text-input";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+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);
+  const { identity, refetch: refetchIdentity } = useGetIdentity();
+  const { data, refetch: refetchUser } = useGetOne("sales", {
+    id: identity?.id,
+  });
+  const notify = useNotify();
+  const dataProvider = useDataProvider<CrmDataProvider>();
+
+  const { mutate } = useMutation({
+    mutationKey: ["signup"],
+    mutationFn: async (data: SalesFormData) => {
+      if (!identity) {
+        throw new Error("Record not found");
+      }
+      return dataProvider.salesUpdate(identity.id, data);
+    },
+    onSuccess: () => {
+      refetchIdentity();
+      refetchUser();
+      setEditMode(false);
+      notify("Your profile has been updated");
+    },
+    onError: (_) => {
+      notify("An error occurred. Please try again", {
+        type: "error",
+      });
+    },
+  });
+
+  if (!identity) return null;
+
+  const handleOnSubmit = async (values: any) => {
+    mutate(values);
+  };
+
+  return (
+    <div className="max-w-lg mx-auto mt-8">
+      <Form onSubmit={handleOnSubmit} record={data}>
+        <SettingsForm isEditMode={isEditMode} setEditMode={setEditMode} />
+      </Form>
+    </div>
+  );
+};
+
+const SettingsForm = ({
+  isEditMode,
+  setEditMode,
+}: {
+  isEditMode: boolean;
+  setEditMode: (value: boolean) => void;
+}) => {
+  const notify = useNotify();
+  const record = useRecordContext<Sale>();
+  const { identity, refetch } = useGetIdentity();
+  const { isDirty } = useFormState();
+  const dataProvider = useDataProvider<CrmDataProvider>();
+
+  const { mutate: updatePassword } = useMutation({
+    mutationKey: ["updatePassword"],
+    mutationFn: async () => {
+      if (!identity) {
+        throw new Error("Record not found");
+      }
+      return dataProvider.updatePassword(identity.id);
+    },
+    onSuccess: () => {
+      notify("A reset password email has been sent to your email address");
+    },
+    onError: (e) => {
+      notify(`${e}`, {
+        type: "error",
+      });
+    },
+  });
+
+  const { mutate: mutateSale } = useMutation({
+    mutationKey: ["signup"],
+    mutationFn: async (data: SalesFormData) => {
+      if (!record) {
+        throw new Error("Record not found");
+      }
+      return dataProvider.salesUpdate(record.id, data);
+    },
+    onSuccess: () => {
+      refetch();
+      notify("Your profile has been updated");
+    },
+    onError: () => {
+      notify("An error occurred. Please try again.");
+    },
+  });
+  if (!identity) return null;
+
+  const handleClickOpenPasswordChange = () => {
+    updatePassword();
+  };
+
+  const handleAvatarUpdate = async (values: any) => {
+    mutateSale(values);
+  };
+
+  return (
+    <div className="space-y-4">
+      <DatabaseSettings />
+
+      <Card>
+        <CardContent>
+          <div className="mb-4 flex flex-row justify-between">
+            <h2 className="text-xl font-semibold text-muted-foreground">
+              My info
+            </h2>
+          </div>
+
+          <div className="space-y-4 mb-4">
+            <ImageEditorField
+              source="avatar"
+              type="avatar"
+              onSave={handleAvatarUpdate}
+              linkPosition="right"
+            />
+            <TextRender source="first_name" isEditMode={isEditMode} />
+            <TextRender source="last_name" isEditMode={isEditMode} />
+            <TextRender source="email" isEditMode={isEditMode} />
+          </div>
+
+          <div className="flex flex-row justify-end gap-2">
+            {!isEditMode && (
+              <>
+                <Button
+                  variant="outline"
+                  type="button"
+                  onClick={handleClickOpenPasswordChange}
+                >
+                  Change password
+                </Button>
+              </>
+            )}
+
+            <Button
+              type="button"
+              variant={isEditMode ? "ghost" : "outline"}
+              onClick={() => setEditMode(!isEditMode)}
+              className="flex items-center"
+            >
+              {isEditMode ? <CircleX /> : <Pencil />}
+              {isEditMode ? "Cancel" : "Edit"}
+            </Button>
+
+            {isEditMode && (
+              <Button type="submit" disabled={!isDirty} variant="outline">
+                <Save />
+                Save
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+      {import.meta.env.VITE_INBOUND_EMAIL && (
+        <Card>
+          <CardContent>
+            <div className="space-y-4 justify-between">
+              <h2 className="text-xl font-semibold text-muted-foreground">
+                Inbound email
+              </h2>
+              <p className="text-sm text-muted-foreground">
+                You can start sending emails to your server's inbound email
+                address, e.g. by adding it to the
+                <b> Cc: </b> field. Atomic CRM will process the emails and add
+                notes to the corresponding contacts.
+              </p>
+              <CopyPaste />
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+const TextRender = ({
+  source,
+  isEditMode,
+}: {
+  source: string;
+  isEditMode: boolean;
+}) => {
+  if (isEditMode) {
+    return <TextInput source={source} helperText={false} />;
+  }
+  return (
+    <div className="m-2">
+      <RecordField source={source} />
+    </div>
+  );
+};
+
+const CopyPaste = () => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    setCopied(true);
+    navigator.clipboard.writeText(import.meta.env.VITE_INBOUND_EMAIL);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+  };
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            onClick={handleCopy}
+            variant="ghost"
+            className="normal-case justify-between w-full"
+          >
+            <span className="overflow-hidden text-ellipsis">
+              {import.meta.env.VITE_INBOUND_EMAIL}
+            </span>
+            <Copy className="h-4 w-4 ml-2" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{copied ? "Copied!" : "Copy"}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+SettingsPage.path = "/settings";

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

@@ -0,0 +1,215 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Loader2, Database, CheckCircle, AlertCircle } from "lucide-react";
+import {
+  saveSupabaseConfig,
+  validateSupabaseConnection,
+} from "@/lib/supabase-config";
+
+type WizardStep = "welcome" | "credentials" | "validating" | "success";
+
+interface SupabaseSetupWizardProps {
+  open: boolean;
+  onComplete: () => void;
+  canClose?: boolean;
+}
+
+export function SupabaseSetupWizard({
+  open,
+  onComplete,
+  canClose = false,
+}: SupabaseSetupWizardProps) {
+  const [step, setStep] = useState<WizardStep>("welcome");
+  const [url, setUrl] = useState("");
+  const [anonKey, setAnonKey] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const handleValidateAndSave = async () => {
+    setError(null);
+    setStep("validating");
+
+    const result = await validateSupabaseConnection(url, anonKey);
+
+    if (result.valid) {
+      saveSupabaseConfig({ url, anonKey });
+      setStep("success");
+
+      // Reload after short delay to apply new config
+      setTimeout(() => {
+        // Force reload to ensure new config is loaded
+        window.location.href = window.location.origin;
+      }, 1500);
+    } else {
+      setError(result.error || "Connection failed");
+      setStep("credentials");
+    }
+  };
+
+  const handleClose = () => {
+    if (canClose) {
+      onComplete();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={canClose ? handleClose : undefined}>
+      <DialogContent
+        className="sm:max-w-md"
+        onPointerDownOutside={(e) => !canClose && e.preventDefault()}
+        onEscapeKeyDown={(e) => !canClose && e.preventDefault()}
+      >
+        {step === "welcome" && (
+          <>
+            <DialogHeader>
+              <div className="flex items-center gap-2 mb-2">
+                <Database className="h-6 w-6 text-primary" />
+                <DialogTitle>Welcome to Atomic CRM</DialogTitle>
+              </div>
+              <DialogDescription>
+                To get started, you'll need to connect to a Supabase database.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4 py-4">
+              <Alert>
+                <AlertDescription>
+                  <strong>Don't have a Supabase project?</strong>
+                  <br />
+                  Create one for free at{" "}
+                  <a
+                    href="https://supabase.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline text-primary"
+                  >
+                    supabase.com
+                  </a>
+                </AlertDescription>
+              </Alert>
+
+              <div className="space-y-2">
+                <h4 className="font-medium text-sm">What you'll need:</h4>
+                <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
+                  <li>Your Supabase project URL</li>
+                  <li>Your anonymous (anon) API key</li>
+                </ul>
+              </div>
+
+              <Button onClick={() => setStep("credentials")} className="w-full">
+                Continue
+              </Button>
+            </div>
+          </>
+        )}
+
+        {step === "credentials" && (
+          <>
+            <DialogHeader>
+              <DialogTitle>Connect to Supabase</DialogTitle>
+              <DialogDescription>
+                Enter your Supabase project credentials
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4 py-4">
+              {error && (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="supabase-url">Supabase URL</Label>
+                <Input
+                  id="supabase-url"
+                  placeholder="https://xxxxx.supabase.co"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Found in Project Settings → API
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="anon-key">Anonymous Key</Label>
+                <Input
+                  id="anon-key"
+                  type="password"
+                  placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+                  value={anonKey}
+                  onChange={(e) => setAnonKey(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Found in Project Settings → API → Project API keys
+                </p>
+              </div>
+
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setStep("welcome")}
+                  className="flex-1"
+                >
+                  Back
+                </Button>
+                <Button
+                  onClick={handleValidateAndSave}
+                  disabled={!url || !anonKey}
+                  className="flex-1"
+                >
+                  Connect
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+
+        {step === "validating" && (
+          <>
+            <DialogHeader>
+              <DialogTitle>Validating Connection</DialogTitle>
+              <DialogDescription>
+                Testing your Supabase credentials...
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex flex-col items-center justify-center py-8">
+              <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
+              <p className="text-sm text-muted-foreground">Please wait...</p>
+            </div>
+          </>
+        )}
+
+        {step === "success" && (
+          <>
+            <DialogHeader>
+              <DialogTitle>Connection Successful!</DialogTitle>
+              <DialogDescription>
+                Your Supabase database is now connected
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex flex-col items-center justify-center py-8">
+              <CheckCircle className="h-12 w-12 text-green-500 mb-4" />
+              <p className="text-sm text-muted-foreground">
+                Reloading application...
+              </p>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/atomic-crm/simple-list/ListNoResults.tsx

@@ -0,0 +1,53 @@
+import {
+  useGetResourceLabel,
+  useListContextWithProps,
+  useResourceContext,
+  useTranslate,
+} from "ra-core";
+import { Button } from "@/components/ui/button";
+
+export const ListNoResults = (props: ListNoResultsProps) => {
+  const translate = useTranslate();
+  const resource = useResourceContext(props);
+  const { filterValues, setFilters } = useListContextWithProps(props);
+  const getResourceLabel = useGetResourceLabel();
+  if (!resource) {
+    throw new Error("<ListNoResults> must be used inside a <List> component");
+  }
+  return (
+    <div className="p-6">
+      <p className="text-sm text-muted-foreground">
+        {filterValues && setFilters && Object.keys(filterValues).length > 0 ? (
+          <>
+            {translate("ra.navigation.no_filtered_results", {
+              resource,
+              name: getResourceLabel(resource, 0),
+              _: "No results found with the current filters.",
+            })}{" "}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setFilters({}, [])}
+            >
+              {translate("ra.navigation.clear_filters", {
+                _: "Clear filters",
+              })}
+            </Button>
+          </>
+        ) : (
+          translate("ra.navigation.no_results", {
+            resource,
+            name: getResourceLabel(resource, 0),
+            _: "No results found.",
+          })
+        )}
+      </p>
+    </div>
+  );
+};
+
+export interface ListNoResultsProps {
+  resource?: string;
+  filterValues?: any;
+  setFilters?: (filters: any, filterTypes?: string[]) => void;
+}

package/src/components/atomic-crm/simple-list/ListPlaceholder.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@/lib/utils";
+
+interface ListPlaceholderProps {
+  className?: string;
+}
+
+export const ListPlaceholder = ({ className }: ListPlaceholderProps) => {
+  return <span className={cn("bg-gray-300 flex", className)}>&nbsp;</span>;
+};