realtimex-crm 0.5.5 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.5.5",
+  "version": "0.6.1",
   "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/admin/login-page.tsx

@@ -89,12 +89,20 @@ export const LoginPage = (props: { redirectTo?: string }) => {
               </Button>
             </Form>
 
-            <Link
-              to={"/forgot-password"}
-              className="text-sm text-center hover:underline"
-            >
-              Forgot your password?
-            </Link>
+            <div className="flex flex-col gap-2 text-sm text-center">
+              <Link
+                to={"/forgot-password"}
+                className="hover:underline"
+              >
+                Forgot your password?
+              </Link>
+              <Link
+                to={"/otp-login"}
+                className="hover:underline"
+              >
+                Login with email code (OTP)
+              </Link>
+            </div>
           </div>
         </div>
       </div>

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

@@ -59,6 +59,20 @@ export const authProvider: AuthProvider = {
     ) {
       return;
     }
+    // Users are on the change-password page, nothing to do
+    if (
+      window.location.pathname === "/change-password" ||
+      window.location.hash.includes("#/change-password")
+    ) {
+      return;
+    }
+    // Users are on the otp-login page, nothing to do
+    if (
+      window.location.pathname === "/otp-login" ||
+      window.location.hash.includes("#/otp-login")
+    ) {
+      return;
+    }
     // Users are on the sign-up page, nothing to do
     if (
       window.location.pathname === "/sign-up" ||

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

@@ -105,19 +105,15 @@ const dataProviderWithCustomMethods = {
   },
 
   async signUp({ email, password, first_name, last_name }: SignUpData) {
-    const response = await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        data: {
-          first_name,
-          last_name,
-        },
-      },
+    // Use admin API via edge function to create first user
+    // This bypasses the signup restriction (enable_signup = false)
+    const { data, error } = await supabase.functions.invoke("setup", {
+      method: "POST",
+      body: { email, password, first_name, last_name },
     });
 
-    if (!response.data?.user || response.error) {
-      console.error("signUp.error", response.error);
+    if (!data || error) {
+      console.error("signUp.error", error);
       throw new Error("Failed to create account");
     }
 
@@ -125,7 +121,7 @@ const dataProviderWithCustomMethods = {
     getIsInitialized._is_initialized_cache = true;
 
     return {
-      id: response.data.user.id,
+      id: data.data.id,
       email,
       password,
     };
@@ -173,6 +169,44 @@ const dataProviderWithCustomMethods = {
 
     return data;
   },
+  async resendInvite(id: Identifier) {
+    const { data: sale, error } = await supabase.functions.invoke<Sale>(
+      "users",
+      {
+        method: "PUT",
+        body: {
+          sales_id: id,
+          action: "invite",
+        },
+      },
+    );
+
+    if (!sale || error) {
+      console.error("resendInvite.error", error);
+      throw new Error("Failed to resend invitation");
+    }
+
+    return sale;
+  },
+  async resetPassword(id: Identifier) {
+    const { data: sale, error } = await supabase.functions.invoke<Sale>(
+      "users",
+      {
+        method: "PUT",
+        body: {
+          sales_id: id,
+          action: "reset",
+        },
+      },
+    );
+
+    if (!sale || error) {
+      console.error("resetPassword.error", error);
+      throw new Error("Failed to send password reset");
+    }
+
+    return sale;
+  },
   async updatePassword(id: Identifier) {
     const { data: passwordUpdated, error } =
       await supabase.functions.invoke<boolean>("updatePassword", {

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

@@ -10,6 +10,8 @@ import { Route } from "react-router";
 import { Admin } from "@/components/admin/admin";
 import { ForgotPasswordPage } from "@/components/supabase/forgot-password-page";
 import { SetPasswordPage } from "@/components/supabase/set-password-page";
+import { ChangePasswordPage } from "@/components/supabase/change-password-page";
+import { OtpLoginPage } from "@/components/supabase/otp-login-page";
 
 import companies from "../companies";
 import contacts from "../contacts";
@@ -151,6 +153,11 @@ export const CRM = ({
               path={ForgotPasswordPage.path}
               element={<ForgotPasswordPage />}
             />
+            <Route
+              path={ChangePasswordPage.path}
+              element={<ChangePasswordPage />}
+            />
+            <Route path={OtpLoginPage.path} element={<OtpLoginPage />} />
           </CustomRoutes>
 
           <CustomRoutes>

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

@@ -1,15 +1,43 @@
-import { useGetIdentity, useListContext, useRecordContext } from "ra-core";
+import { useMutation } from "@tanstack/react-query";
+import { KeyRound, MoreHorizontal, RefreshCw } from "lucide-react";
+import * as React from "react";
+import {
+  useDataProvider,
+  useGetIdentity,
+  useListContext,
+  useNotify,
+  useRecordContext,
+  useRefresh,
+} 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 { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 
 import { TopToolbar } from "../layout/TopToolbar";
 import useAppBarHeight from "../misc/useAppBarHeight";
+import type { CrmDataProvider } from "../providers/types";
 
 const SalesListActions = () => (
   <TopToolbar>
@@ -45,6 +73,174 @@ const OptionsField = (_props: { label?: string | boolean }) => {
   );
 };
 
+const RowActions = () => {
+  const record = useRecordContext();
+  const dataProvider = useDataProvider<CrmDataProvider>();
+  const notify = useNotify();
+  const refresh = useRefresh();
+  const [inviteDialogOpen, setInviteDialogOpen] = React.useState(false);
+  const [resetDialogOpen, setResetDialogOpen] = React.useState(false);
+
+  const { mutate: resendInvite, isPending: isInvitePending } = useMutation({
+    mutationFn: async () => {
+      return dataProvider.resendInvite(record.id);
+    },
+    onSuccess: () => {
+      notify("Invitation email resent successfully");
+      setInviteDialogOpen(false);
+      refresh();
+    },
+    onError: () => {
+      notify("Failed to resend invitation email", { type: "error" });
+      setInviteDialogOpen(false);
+    },
+  });
+
+  const { mutate: resetPassword, isPending: isResetPending } = useMutation({
+    mutationFn: async () => {
+      return dataProvider.resetPassword(record.id);
+    },
+    onSuccess: () => {
+      notify("Password reset email sent successfully");
+      setResetDialogOpen(false);
+      refresh();
+    },
+    onError: () => {
+      notify("Failed to send password reset email", { type: "error" });
+      setResetDialogOpen(false);
+    },
+  });
+
+  if (!record) return null;
+
+  // Determine which action to show based on confirmation status
+  const isConfirmed = record.email_confirmed_at !== null;
+  const isDisabled = record.disabled === true;
+
+  console.log("[RowActions] Record:", {
+    email: record.email,
+    email_confirmed_at: record.email_confirmed_at,
+    isConfirmed,
+    isDisabled,
+    inviteDialogOpen,
+    resetDialogOpen,
+  });
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>Email Actions</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {!isConfirmed && (
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log("[Menu] Clicked Resend Invite");
+                setInviteDialogOpen(true);
+              }}
+            >
+              <RefreshCw className="mr-2 h-4 w-4" />
+              Resend Invite
+            </DropdownMenuItem>
+          )}
+          {isConfirmed && !isDisabled && (
+            <DropdownMenuItem onClick={() => setResetDialogOpen(true)}>
+              <KeyRound className="mr-2 h-4 w-4" />
+              Send Password Reset
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Resend Invite Dialog */}
+      <Dialog open={inviteDialogOpen} onOpenChange={setInviteDialogOpen}>
+        <DialogContent
+          onClick={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <DialogHeader>
+            <DialogTitle>Resend Invitation</DialogTitle>
+            <DialogDescription>
+              Send a new invitation email to <strong>{record.email}</strong>?
+              <br />
+              <br />
+              This will send them a fresh invitation link to set up their account.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={(e) => {
+                e.stopPropagation();
+                setInviteDialogOpen(false);
+              }}
+              disabled={isInvitePending}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                resendInvite();
+              }}
+              disabled={isInvitePending}
+            >
+              {isInvitePending ? "Sending..." : "Send Invitation"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Password Reset Dialog */}
+      <Dialog open={resetDialogOpen} onOpenChange={setResetDialogOpen}>
+        <DialogContent
+          onClick={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <DialogHeader>
+            <DialogTitle>Send Password Reset</DialogTitle>
+            <DialogDescription>
+              Send a password reset email to <strong>{record.email}</strong>?
+              <br />
+              <br />
+              This will send them a link to reset their password.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={(e) => {
+                e.stopPropagation();
+                setResetDialogOpen(false);
+              }}
+              disabled={isResetPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                resetPassword();
+              }}
+              disabled={isResetPending}
+            >
+              {isResetPending ? "Sending..." : "Send Reset Link"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
 export function SalesList() {
   return (
     <List
@@ -91,6 +287,9 @@ const SalesListLayout = () => {
       <DataTable.Col label={false}>
         <OptionsField />
       </DataTable.Col>
+      <DataTable.Col label={false}>
+        <RowActions />
+      </DataTable.Col>
     </DataTable>
   );
 };

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

@@ -10,6 +10,7 @@ import {
 } from "ra-core";
 import { useState } from "react";
 import { useFormState } from "react-hook-form";
+import { useNavigate } from "react-router";
 import { RecordField } from "@/components/admin/record-field";
 import { TextInput } from "@/components/admin/text-input";
 import { Button } from "@/components/ui/button";
@@ -78,28 +79,14 @@ const SettingsForm = ({
   setEditMode: (value: boolean) => void;
 }) => {
   const notify = useNotify();
+  const navigate = useNavigate();
   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",
-      });
-    },
-  });
+  // Removed old updatePassword mutation - now uses OTP flow
+  // Users will be redirected to forgot-password page which sends OTP
 
   const { mutate: mutateSale } = useMutation({
     mutationKey: ["signup"],
@@ -120,7 +107,8 @@ const SettingsForm = ({
   if (!identity) return null;
 
   const handleClickOpenPasswordChange = () => {
-    updatePassword();
+    // Redirect to forgot-password page which uses OTP flow
+    navigate('/forgot-password');
   };
 
   const handleAvatarUpdate = async (values: any) => {

package/src/components/supabase/change-password-page.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { Form, required, useNotify, useTranslate } from "ra-core";
+import { Layout } from "@/components/supabase/layout";
+import type { FieldValues, SubmitHandler } from "react-hook-form";
+import { TextInput } from "@/components/admin/text-input";
+import { Button } from "@/components/ui/button";
+import { supabase } from "@/components/atomic-crm/providers/supabase/supabase";
+import { useNavigate } from "react-router";
+
+interface FormData {
+  password: string;
+  confirm: string;
+}
+
+export const ChangePasswordPage = () => {
+  const [loading, setLoading] = useState(false);
+
+  const notify = useNotify();
+  const translate = useTranslate();
+  const navigate = useNavigate();
+
+  const validate = (values: FormData) => {
+    const errors: Record<string, string> = {};
+
+    if (!values.password) {
+      errors.password = translate("ra.validation.required");
+    } else if (values.password.length < 6) {
+      errors.password = "Password must be at least 6 characters";
+    }
+
+    if (!values.confirm) {
+      errors.confirm = translate("ra.validation.required");
+    } else if (values.password !== values.confirm) {
+      errors.confirm = "Passwords do not match";
+    }
+
+    return errors;
+  };
+
+  const submit = async (values: FormData) => {
+    try {
+      setLoading(true);
+
+      const { error } = await supabase.auth.updateUser({
+        password: values.password,
+      });
+
+      if (error) {
+        throw error;
+      }
+
+      notify("Password updated successfully", { type: "success" });
+      navigate("/");
+    } catch (error: any) {
+      notify(
+        typeof error === "string"
+          ? error
+          : typeof error === "undefined" || !error.message
+            ? "Failed to update password"
+            : error.message,
+        {
+          type: "warning",
+          messageArgs: {
+            _:
+              typeof error === "string"
+                ? error
+                : error && error.message
+                  ? error.message
+                  : undefined,
+          },
+        },
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Layout>
+      <div className="flex flex-col space-y-2 text-center">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Set new password
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Choose a secure password for your account
+        </p>
+      </div>
+      <Form<FormData>
+        className="space-y-6"
+        onSubmit={submit as SubmitHandler<FieldValues>}
+        validate={validate}
+      >
+        <TextInput
+          source="password"
+          type="password"
+          label={translate("ra.auth.password", {
+            _: "New password",
+          })}
+          autoComplete="new-password"
+          validate={required()}
+        />
+        <TextInput
+          source="confirm"
+          type="password"
+          label={translate("ra.auth.confirm_password", {
+            _: "Confirm password",
+          })}
+          autoComplete="new-password"
+          validate={required()}
+        />
+        <Button type="submit" className="cursor-pointer w-full" disabled={loading}>
+          {loading ? "Updating..." : "Update password"}
+        </Button>
+      </Form>
+    </Layout>
+  );
+};
+
+ChangePasswordPage.path = "change-password";