realtimex-crm 0.1.2

package/src/components/atomic-crm/types.ts

@@ -0,0 +1,226 @@
+import type { Identifier, RaRecord } from "ra-core";
+import type { ComponentType } from "react";
+
+import type {
+  COMPANY_CREATED,
+  CONTACT_CREATED,
+  CONTACT_NOTE_CREATED,
+  DEAL_CREATED,
+  DEAL_NOTE_CREATED,
+} from "./consts";
+
+export type SignUpData = {
+  email: string;
+  password: string;
+  first_name: string;
+  last_name: string;
+};
+
+export type SalesFormData = {
+  avatar: string;
+  email: string;
+  password: string;
+  first_name: string;
+  last_name: string;
+  administrator: boolean;
+  disabled: boolean;
+};
+
+export type Sale = {
+  first_name: string;
+  last_name: string;
+  administrator: boolean;
+  avatar?: RAFile;
+  disabled?: boolean;
+  user_id: string;
+
+  /**
+   * This is a copy of the user's email, to make it easier to handle by react admin
+   * DO NOT UPDATE this field directly, it should be updated by the backend
+   */
+  email: string;
+
+  /**
+   * This is used by the fake rest provider to store the password
+   * DO NOT USE this field in your code besides the fake rest provider
+   * @deprecated
+   */
+  password?: string;
+} & Pick<RaRecord, "id">;
+
+export type Company = {
+  name: string;
+  logo: RAFile;
+  sector: string;
+  size: 1 | 10 | 50 | 250 | 500;
+  linkedin_url: string;
+  website: string;
+  phone_number: string;
+  address: string;
+  zipcode: string;
+  city: string;
+  stateAbbr: string;
+  sales_id: Identifier;
+  created_at: string;
+  description: string;
+  revenue: string;
+  tax_identifier: string;
+  country: string;
+  context_links?: string[];
+  nb_contacts?: number;
+  nb_deals?: number;
+} & Pick<RaRecord, "id">;
+
+export type EmailAndType = {
+  email: string;
+  type: "Work" | "Home" | "Other";
+};
+
+export type PhoneNumberAndType = {
+  number: string;
+  type: "Work" | "Home" | "Other";
+};
+
+export type Contact = {
+  first_name: string;
+  last_name: string;
+  title: string;
+  company_id: Identifier;
+  email_jsonb: EmailAndType[];
+  avatar?: Partial<RAFile>;
+  linkedin_url?: string | null;
+  first_seen: string;
+  last_seen: string;
+  has_newsletter: boolean;
+  tags: Identifier[];
+  gender: string;
+  sales_id: Identifier;
+  status: string;
+  background: string;
+  phone_jsonb: PhoneNumberAndType[];
+  nb_tasks?: number;
+  company_name?: string;
+} & Pick<RaRecord, "id">;
+
+export type ContactNote = {
+  contact_id: Identifier;
+  text: string;
+  date: string;
+  sales_id: Identifier;
+  status: string;
+  attachments?: AttachmentNote[];
+} & Pick<RaRecord, "id">;
+
+export type Deal = {
+  name: string;
+  company_id: Identifier;
+  contact_ids: Identifier[];
+  category: string;
+  stage: string;
+  description: string;
+  amount: number;
+  created_at: string;
+  updated_at: string;
+  archived_at?: string;
+  expected_closing_date: string;
+  sales_id: Identifier;
+  index: number;
+} & Pick<RaRecord, "id">;
+
+export type DealNote = {
+  deal_id: Identifier;
+  text: string;
+  date: string;
+  sales_id: Identifier;
+  attachments?: AttachmentNote[];
+
+  // This is defined for compatibility with `ContactNote`
+  status?: undefined;
+} & Pick<RaRecord, "id">;
+
+export type Tag = {
+  name: string;
+  color: string;
+} & Pick<RaRecord, "id">;
+
+export type Task = {
+  contact_id: Identifier;
+  type: string;
+  text: string;
+  due_date: string;
+  done_date?: string | null;
+  sales_id?: Identifier;
+} & Pick<RaRecord, "id">;
+
+export type ActivityCompanyCreated = {
+  type: typeof COMPANY_CREATED;
+  company_id: Identifier;
+  company: Company;
+  sales_id: Identifier;
+  date: string;
+} & Pick<RaRecord, "id">;
+
+export type ActivityContactCreated = {
+  type: typeof CONTACT_CREATED;
+  company_id: Identifier;
+  sales_id?: Identifier;
+  contact: Contact;
+  date: string;
+} & Pick<RaRecord, "id">;
+
+export type ActivityContactNoteCreated = {
+  type: typeof CONTACT_NOTE_CREATED;
+  sales_id?: Identifier;
+  contactNote: ContactNote;
+  date: string;
+} & Pick<RaRecord, "id">;
+
+export type ActivityDealCreated = {
+  type: typeof DEAL_CREATED;
+  company_id: Identifier;
+  sales_id?: Identifier;
+  deal: Deal;
+  date: string;
+};
+
+export type ActivityDealNoteCreated = {
+  type: typeof DEAL_NOTE_CREATED;
+  sales_id?: Identifier;
+  dealNote: DealNote;
+  date: string;
+};
+
+export type Activity = RaRecord &
+  (
+    | ActivityCompanyCreated
+    | ActivityContactCreated
+    | ActivityContactNoteCreated
+    | ActivityDealCreated
+    | ActivityDealNoteCreated
+  );
+
+export interface RAFile {
+  src: string;
+  title: string;
+  path?: string;
+  rawFile: File;
+  type?: string;
+}
+
+export type AttachmentNote = RAFile;
+export interface DealStage {
+  value: string;
+  label: string;
+}
+
+export interface NoteStatus {
+  value: string;
+  label: string;
+  color: string;
+}
+
+export interface ContactGender {
+  value: string;
+  label: string;
+  icon: ComponentType<{ className?: string }>;
+}

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

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { useResetPassword } from "ra-supabase-core";
+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";
+
+interface FormData {
+  email: string;
+}
+
+export const ForgotPasswordPage = () => {
+  const [loading, setLoading] = useState(false);
+
+  const notify = useNotify();
+  const translate = useTranslate();
+  const [, { mutateAsync: resetPassword }] = useResetPassword();
+
+  const submit = async (values: FormData) => {
+    try {
+      setLoading(true);
+      await resetPassword({
+        email: values.email,
+      });
+    } catch (error: any) {
+      notify(
+        typeof error === "string"
+          ? error
+          : typeof error === "undefined" || !error.message
+            ? "ra.auth.sign_in_error"
+            : 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">
+          {translate("ra-supabase.reset_password.forgot_password", {
+            _: "Forgot password?",
+          })}
+        </h1>
+        <p>
+          {translate("ra-supabase.reset_password.forgot_password_details", {
+            _: "Enter your email to receive a reset password link.",
+          })}
+        </p>
+      </div>
+      <Form<FormData>
+        className="space-y-8"
+        onSubmit={submit as SubmitHandler<FieldValues>}
+      >
+        <TextInput
+          source="email"
+          label={translate("ra.auth.email", {
+            _: "Email",
+          })}
+          autoComplete="email"
+          validate={required()}
+        />
+        <Button type="submit" className="cursor-pointer" disabled={loading}>
+          {translate("ra.action.reset_password", {
+            _: "Reset password",
+          })}
+        </Button>
+      </Form>
+    </Layout>
+  );
+};
+
+ForgotPasswordPage.path = "forgot-password";

package/src/components/supabase/layout.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Notification } from "@/components/admin/notification";
+import { useConfigurationContext } from "@/components/atomic-crm/root/ConfigurationContext";
+
+export const Layout = ({ children }: React.PropsWithChildren) => {
+  const { darkModeLogo, title } = useConfigurationContext();
+
+  return (
+    <div className="min-h-screen flex">
+      <div className="container relative grid flex-col items-center justify-center sm:max-w-none lg:grid-cols-2 lg:px-0">
+        <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+          <div className="absolute inset-0 bg-zinc-900" />
+          <div className="relative z-20 flex items-center text-lg font-medium">
+            <img className="h-6 mr-2" src={darkModeLogo} alt={title} />
+            {title}
+          </div>
+        </div>
+        <div className="lg:p-8">
+          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            {children}
+          </div>
+        </div>
+      </div>
+      <Notification />
+    </div>
+  );
+};

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

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import type { ValidateForm } from "ra-core";
+import { Form, required, useNotify, useTranslate } from "ra-core";
+import { useSetPassword, useSupabaseAccessToken } from "ra-supabase-core";
+import type { FieldValues, SubmitHandler } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { TextInput } from "@/components/admin/text-input";
+import { Layout } from "@/components/supabase/layout";
+
+interface FormData {
+  password: string;
+  confirmPassword: string;
+}
+
+export const SetPasswordPage = () => {
+  const [loading, setLoading] = useState(false);
+
+  const access_token = useSupabaseAccessToken();
+  const refresh_token = useSupabaseAccessToken({
+    parameterName: "refresh_token",
+  });
+
+  const notify = useNotify();
+  const translate = useTranslate();
+  const [, { mutateAsync: setPassword }] = useSetPassword();
+
+  const validate = (values: FormData) => {
+    if (values.password !== values.confirmPassword) {
+      return {
+        password: "ra-supabase.validation.password_mismatch",
+        confirmPassword: "ra-supabase.validation.password_mismatch",
+      };
+    }
+    return {};
+  };
+
+  if (!access_token || !refresh_token) {
+    if (process.env.NODE_ENV === "development") {
+      console.error("Missing access_token or refresh_token for set password");
+    }
+    return (
+      <Layout>
+        <p>{translate("ra-supabase.auth.missing_tokens")}</p>
+      </Layout>
+    );
+  }
+
+  const submit = async (values: FormData) => {
+    try {
+      setLoading(true);
+      await setPassword({
+        access_token,
+        refresh_token,
+        password: values.password,
+      });
+    } catch (error: any) {
+      notify(
+        typeof error === "string"
+          ? error
+          : typeof error === "undefined" || !error.message
+            ? "ra.auth.sign_in_error"
+            : 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">
+          {translate("ra-supabase.set_password.new_password", {
+            _: "Choose your password",
+          })}
+        </h1>
+      </div>
+      <Form<FormData>
+        className="space-y-8"
+        onSubmit={submit as SubmitHandler<FieldValues>}
+        validate={validate as ValidateForm}
+      >
+        <TextInput
+          label={translate("ra.auth.password", {
+            _: "Password",
+          })}
+          autoComplete="new-password"
+          source="password"
+          type="password"
+          validate={required()}
+        />
+        <TextInput
+          label={translate("ra.auth.confirm_password", {
+            _: "Confirm password",
+          })}
+          source="confirmPassword"
+          type="password"
+          validate={required()}
+        />
+        <Button type="submit" className="cursor-pointer" disabled={loading}>
+          {translate("ra.action.save")}
+        </Button>
+      </Form>
+    </Layout>
+  );
+};
+
+SetPasswordPage.path = "set-password";

package/src/components/ui/README.md

@@ -0,0 +1,34 @@
+# UI Components
+
+The components in this directory come from [shadcn/ui](https://ui.shadcn.com/). They are low-level building blocks for creating user interfaces, including:
+
+- Badges
+- Buttons
+- Cards
+- Dialogs
+- Forms Inputs
+- Navigation MMenus
+- Tables
+- Tabs
+- Tooltips
+- And more...
+
+These components are built on top of [Radix UI](https://www.radix-ui.com/) and styled using [Tailwind CSS](https://tailwindcss.com/).
+
+## Documentation
+
+You can find the documentation for these components on the [shadcn/ui website](https://ui.shadcn.com/docs).
+
+## Customization
+
+In Atomic CRM, these components are sometimes slightly modified to fit the look and feel of the application. You can customize them further by editing the source files in this directory.
+
+## Updates
+
+Shadcn/ui components are actively maintained and updated. To add or update a UI component in Atomic CRM, type the following command:
+
+```
+npx shadcn@latest add [component-name]
+```
+
+The admin components have a dependency on some ui components, so if you update the admin components, this will also update the ui components. Check [the admin components readme](../admin/Readme.md) for the command to update them.

package/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }