realtimex-crm 0.1.2

package/src/components/atomic-crm/contacts/ContactEmpty.tsx

@@ -0,0 +1,28 @@
+import { CreateButton } from "@/components/admin/create-button";
+
+import useAppBarHeight from "../misc/useAppBarHeight";
+import { ContactImportButton } from "./ContactImportButton";
+
+export const ContactEmpty = () => {
+  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 contacts found" />
+      <div className="flex flex-col gap-0 items-center">
+        <h6 className="text-lg font-bold">No contacts found</h6>
+        <p className="text-sm text-muted-foreground text-center mb-4">
+          It seems your contact list is empty.
+        </p>
+      </div>
+      <div className="flex flex-row gap-2">
+        <CreateButton label="New Contact" />
+        <ContactImportButton />
+      </div>
+    </div>
+  );
+};

package/src/components/atomic-crm/contacts/ContactImportButton.tsx

@@ -0,0 +1,213 @@
+import { useEffect, useState } from "react";
+import type { MouseEvent } from "react";
+import { Upload, Loader2 } from "lucide-react";
+import { Form, useRefresh } from "ra-core";
+import { Link } from "react-router";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { FormToolbar } from "@/components/admin/simple-form";
+import { FileInput } from "@/components/admin/file-input";
+import { FileField } from "@/components/admin/file-field";
+
+import { usePapaParse } from "../misc/usePapaParse";
+import type { ContactImportSchema } from "./useContactImport";
+import { useContactImport } from "./useContactImport";
+import * as sampleCsv from "./contacts_export.csv?raw";
+
+export const ContactImportButton = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+  };
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        onClick={handleOpenModal}
+        className="flex items-center gap-2 cursor-pointer"
+      >
+        <Upload /> Import
+      </Button>
+      <ContactImportDialog open={modalOpen} onClose={handleCloseModal} />
+    </>
+  );
+};
+
+const SAMPLE_URL = `data:text/csv;name=crm_contacts_sample.csv;charset=utf-8,${encodeURIComponent(
+  sampleCsv.default,
+)}`;
+
+type ContactImportModalProps = {
+  open: boolean;
+  onClose(): void;
+};
+
+export function ContactImportDialog({
+  open,
+  onClose,
+}: ContactImportModalProps) {
+  const refresh = useRefresh();
+  const processBatch = useContactImport();
+  const { importer, parseCsv, reset } = usePapaParse<ContactImportSchema>({
+    batchSize: 10,
+    processBatch,
+  });
+
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    if (importer.state === "complete") {
+      refresh();
+    }
+  }, [importer.state, refresh]);
+
+  const handleFileChange = (file: File | null) => {
+    setFile(file);
+  };
+
+  const startImport = () => {
+    if (!file) return;
+    parseCsv(file);
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const handleReset = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    reset();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-2xl">
+        <Form className="flex flex-col gap-4">
+          <DialogHeader>
+            <DialogTitle>Import</DialogTitle>
+          </DialogHeader>
+
+          <div className="flex flex-col space-y-2">
+            {importer.state === "running" && (
+              <div className="flex flex-col gap-2">
+                <Alert>
+                  <AlertDescription className="flex flex-row gap-4">
+                    <Loader2 className="h-5 w-5 animate-spin" />
+                    The import is running, please do not close this tab.
+                  </AlertDescription>
+                </Alert>
+
+                <div className="text-sm">
+                  Imported{" "}
+                  <strong>
+                    {importer.importCount} / {importer.rowCount}
+                  </strong>{" "}
+                  contacts, with <strong>{importer.errorCount}</strong> errors.
+                  {importer.remainingTime !== null && (
+                    <>
+                      {" "}
+                      Estimated remaining time:{" "}
+                      <strong>
+                        {millisecondsToTime(importer.remainingTime)}
+                      </strong>
+                      .{" "}
+                      <button
+                        onClick={handleReset}
+                        className="text-red-600 underline hover:text-red-800"
+                      >
+                        Stop import
+                      </button>
+                    </>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {importer.state === "error" && (
+              <Alert variant="destructive">
+                <AlertDescription>
+                  Failed to import this file, please make sure your provided a
+                  valid CSV file.
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {importer.state === "complete" && (
+              <Alert>
+                <AlertDescription>
+                  Contacts import complete. Imported {importer.importCount}{" "}
+                  contacts, with {importer.errorCount} errors
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {importer.state === "idle" && (
+              <>
+                <Alert>
+                  <AlertDescription className="flex flex-col gap-4">
+                    Here is a sample CSV file you can use as a template
+                    <Button asChild variant="outline" size="sm">
+                      <Link
+                        to={SAMPLE_URL}
+                        download={"crm_contacts_sample.csv"}
+                      >
+                        Download CSV sample
+                      </Link>
+                    </Button>{" "}
+                  </AlertDescription>
+                </Alert>
+
+                <FileInput
+                  source="csv"
+                  label="CSV File"
+                  accept={{ "text/csv": [".csv"] }}
+                  onChange={handleFileChange}
+                >
+                  <FileField source="src" title="title" target="_blank" />
+                </FileInput>
+              </>
+            )}
+          </div>
+        </Form>
+
+        <div className="flex justify-start pt-6">
+          <FormToolbar>
+            {importer.state === "idle" ? (
+              <Button onClick={startImport} disabled={!file}>
+                Import
+              </Button>
+            ) : (
+              <Button
+                variant="outline"
+                onClick={handleClose}
+                disabled={importer.state === "running"}
+              >
+                Close
+              </Button>
+            )}
+          </FormToolbar>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function millisecondsToTime(ms: number) {
+  const seconds = Math.floor((ms / 1000) % 60);
+  const minutes = Math.floor((ms / (60 * 1000)) % 60);
+
+  return `${minutes}m ${seconds}s`;
+}

package/src/components/atomic-crm/contacts/ContactInputs.tsx

@@ -0,0 +1,209 @@
+import { email, required } from "ra-core";
+import type { FocusEvent, ClipboardEventHandler } from "react";
+import { useFormContext } from "react-hook-form";
+import { Separator } from "@/components/ui/separator";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { BooleanInput } from "@/components/admin/boolean-input";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { TextInput } from "@/components/admin/text-input";
+import { RadioButtonGroupInput } from "@/components/admin/radio-button-group-input";
+import { SelectInput } from "@/components/admin/select-input";
+import { ArrayInput } from "@/components/admin/array-input";
+import { SimpleFormIterator } from "@/components/admin/simple-form-iterator";
+
+import { isLinkedinUrl } from "../misc/isLinkedInUrl";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import type { Sale } from "../types";
+import { Avatar } from "./Avatar";
+import { AutocompleteCompanyInput } from "../companies/AutocompleteCompanyInput.tsx";
+
+export const ContactInputs = () => {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className="flex flex-col gap-2 p-1">
+      <Avatar />
+      <div className={`flex gap-6 ${isMobile ? "flex-col" : "flex-row"}`}>
+        <div className="flex flex-col gap-10 flex-1">
+          <ContactIdentityInputs />
+          <ContactPositionInputs />
+        </div>
+        <Separator
+          orientation={isMobile ? "horizontal" : "vertical"}
+          className="flex-shrink-0"
+        />
+        <div className="flex flex-col gap-10 flex-1">
+          <ContactPersonalInformationInputs />
+          <ContactMiscInputs />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ContactIdentityInputs = () => {
+  const { contactGender } = useConfigurationContext();
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Identity</h6>
+      <RadioButtonGroupInput
+        label={false}
+        row
+        source="gender"
+        choices={contactGender}
+        helperText={false}
+        optionText="label"
+        optionValue="value"
+        defaultValue={contactGender[0].value}
+      />
+      <TextInput source="first_name" validate={required()} helperText={false} />
+      <TextInput source="last_name" validate={required()} helperText={false} />
+    </div>
+  );
+};
+
+const ContactPositionInputs = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Position</h6>
+      <TextInput source="title" helperText={false} />
+      <ReferenceInput source="company_id" reference="companies" perPage={10}>
+        <AutocompleteCompanyInput />
+      </ReferenceInput>
+    </div>
+  );
+};
+
+const ContactPersonalInformationInputs = () => {
+  const { getValues, setValue } = useFormContext();
+
+  // set first and last name based on email
+  const handleEmailChange = (email: string) => {
+    const { first_name, last_name } = getValues();
+    if (first_name || last_name || !email) return;
+    const [first, last] = email.split("@")[0].split(".");
+    setValue("first_name", first.charAt(0).toUpperCase() + first.slice(1));
+    setValue(
+      "last_name",
+      last ? last.charAt(0).toUpperCase() + last.slice(1) : "",
+    );
+  };
+
+  const handleEmailPaste: ClipboardEventHandler<
+    HTMLTextAreaElement | HTMLInputElement
+  > = (e) => {
+    const email = e.clipboardData?.getData("text/plain");
+    handleEmailChange(email);
+  };
+
+  const handleEmailBlur = (
+    e: FocusEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
+    const email = e.target.value;
+    handleEmailChange(email);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Personal info</h6>
+      <ArrayInput
+        source="email_jsonb"
+        label="Email addresses"
+        helperText={false}
+      >
+        <SimpleFormIterator
+          inline
+          disableReordering
+          disableClear
+          className="[&>ul>li]:border-b-0 [&>ul>li]:pb-0"
+        >
+          <TextInput
+            source="email"
+            className="w-full"
+            helperText={false}
+            label={false}
+            placeholder="Email"
+            validate={email()}
+            onPaste={handleEmailPaste}
+            onBlur={handleEmailBlur}
+          />
+          <SelectInput
+            source="type"
+            helperText={false}
+            label={false}
+            optionText="id"
+            choices={personalInfoTypes}
+            defaultValue="Work"
+            className="w-24 min-w-24"
+          />
+        </SimpleFormIterator>
+      </ArrayInput>
+      <ArrayInput source="phone_jsonb" label="Phone numbers" helperText={false}>
+        <SimpleFormIterator
+          inline
+          disableReordering
+          disableClear
+          className="[&>ul>li]:border-b-0 [&>ul>li]:pb-0"
+        >
+          <TextInput
+            source="number"
+            className="w-full"
+            helperText={false}
+            label={false}
+            placeholder="Phone number"
+          />
+          <SelectInput
+            source="type"
+            helperText={false}
+            label={false}
+            optionText="id"
+            choices={personalInfoTypes}
+            defaultValue="Work"
+            className="w-24 min-w-24"
+          />
+        </SimpleFormIterator>
+      </ArrayInput>
+      <TextInput
+        source="linkedin_url"
+        label="Linkedin URL"
+        helperText={false}
+        validate={isLinkedinUrl}
+      />
+    </div>
+  );
+};
+
+const personalInfoTypes = [{ id: "Work" }, { id: "Home" }, { id: "Other" }];
+
+const ContactMiscInputs = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Misc</h6>
+      <TextInput
+        source="background"
+        label="Background info (bio, how you met, etc)"
+        multiline
+        helperText={false}
+      />
+      <BooleanInput source="has_newsletter" helperText={false} />
+      <ReferenceInput
+        reference="sales"
+        source="sales_id"
+        sort={{ field: "last_name", order: "ASC" }}
+        filter={{
+          "disabled@neq": true,
+        }}
+      >
+        <SelectInput
+          helperText={false}
+          label="Account manager"
+          optionText={saleOptionRenderer}
+          validate={required()}
+        />
+      </ReferenceInput>
+    </div>
+  );
+};
+
+const saleOptionRenderer = (choice: Sale) =>
+  `${choice.first_name} ${choice.last_name}`;

package/src/components/atomic-crm/contacts/ContactList.tsx

@@ -0,0 +1,116 @@
+import jsonExport from "jsonexport/dist";
+import {
+  downloadCSV,
+  useGetIdentity,
+  useListContext,
+  type Exporter,
+} from "ra-core";
+import { BulkActionsToolbar } from "@/components/admin/bulk-actions-toolbar";
+import { CreateButton } from "@/components/admin/create-button";
+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 type { Company, Contact, Sale, Tag } from "../types";
+import { ContactEmpty } from "./ContactEmpty";
+import { ContactImportButton } from "./ContactImportButton";
+import { ContactListContent } from "./ContactListContent";
+import { ContactListFilter } from "./ContactListFilter";
+import { TopToolbar } from "../layout/TopToolbar";
+
+export const ContactList = () => {
+  const { identity } = useGetIdentity();
+
+  if (!identity) return null;
+
+  return (
+    <List
+      title={false}
+      actions={<ContactListActions />}
+      perPage={25}
+      sort={{ field: "last_seen", order: "DESC" }}
+      exporter={exporter}
+    >
+      <ContactListLayout />
+    </List>
+  );
+};
+
+const ContactListLayout = () => {
+  const { data, isPending, filterValues } = useListContext();
+  const { identity } = useGetIdentity();
+
+  const hasFilters = filterValues && Object.keys(filterValues).length > 0;
+
+  if (!identity || isPending) return null;
+
+  if (!data?.length && !hasFilters) return <ContactEmpty />;
+
+  return (
+    <div className="flex flex-row gap-8">
+      <ContactListFilter />
+      <div className="w-full flex flex-col gap-4">
+        <Card className="py-0">
+          <ContactListContent />
+        </Card>
+      </div>
+      <BulkActionsToolbar />
+    </div>
+  );
+};
+
+const ContactListActions = () => (
+  <TopToolbar>
+    <SortButton fields={["first_name", "last_name", "last_seen"]} />
+    <ContactImportButton />
+    <ExportButton exporter={exporter} />
+    <CreateButton />
+  </TopToolbar>
+);
+
+const exporter: Exporter<Contact> = async (records, fetchRelatedRecords) => {
+  const companies = await fetchRelatedRecords<Company>(
+    records,
+    "company_id",
+    "companies",
+  );
+  const sales = await fetchRelatedRecords<Sale>(records, "sales_id", "sales");
+  const tags = await fetchRelatedRecords<Tag>(records, "tags", "tags");
+
+  const contacts = records.map((contact) => {
+    const exportedContact = {
+      ...contact,
+      company:
+        contact.company_id != null
+          ? companies[contact.company_id].name
+          : undefined,
+      sales: `${sales[contact.sales_id].first_name} ${
+        sales[contact.sales_id].last_name
+      }`,
+      tags: contact.tags.map((tagId) => tags[tagId].name).join(", "),
+      email_work: contact.email_jsonb?.find((email) => email.type === "Work")
+        ?.email,
+      email_home: contact.email_jsonb?.find((email) => email.type === "Home")
+        ?.email,
+      email_other: contact.email_jsonb?.find((email) => email.type === "Other")
+        ?.email,
+      email_jsonb: JSON.stringify(contact.email_jsonb),
+      email_fts: undefined,
+      phone_work: contact.phone_jsonb?.find((phone) => phone.type === "Work")
+        ?.number,
+      phone_home: contact.phone_jsonb?.find((phone) => phone.type === "Home")
+        ?.number,
+      phone_other: contact.phone_jsonb?.find((phone) => phone.type === "Other")
+        ?.number,
+      phone_jsonb: JSON.stringify(contact.phone_jsonb),
+      phone_fts: undefined,
+    };
+    delete exportedContact.email_fts;
+    delete exportedContact.phone_fts;
+    return exportedContact;
+  });
+  return jsonExport(contacts, {}, (_err: any, csv: string) => {
+    downloadCSV(csv, "contacts");
+  });
+};

package/src/components/atomic-crm/contacts/ContactListContent.tsx

@@ -0,0 +1,107 @@
+import { formatRelative } from "date-fns";
+import { RecordContextProvider, useListContext } from "ra-core";
+import { type MouseEvent, useCallback } from "react";
+import { Link } from "react-router";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { TextField } from "@/components/admin/text-field";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+import { Status } from "../misc/Status";
+import type { Contact } from "../types";
+import { Avatar } from "./Avatar";
+import { TagsList } from "./TagsList";
+
+export const ContactListContent = () => {
+  const {
+    data: contacts,
+    error,
+    isPending,
+    onToggleItem,
+    selectedIds,
+  } = useListContext<Contact>();
+  const isSmall = useIsMobile();
+
+  // StopPropagation does not work for some reason on Checkbox, this handler is a workaround
+  const handleLinkClick = useCallback(function handleLinkClick(
+    e: MouseEvent<HTMLAnchorElement>,
+  ) {
+    if (e.target instanceof HTMLButtonElement) {
+      e.preventDefault();
+    }
+  }, []);
+
+  if (isPending) {
+    return <Skeleton className="w-full h-9" />;
+  }
+
+  if (error) {
+    return null;
+  }
+  const now = Date.now();
+
+  return (
+    <div className="divide-y">
+      {contacts.map((contact) => (
+        <RecordContextProvider key={contact.id} value={contact}>
+          <Link
+            to={`/contacts/${contact.id}/show`}
+            className="flex flex-row gap-4 items-center px-4 py-2 hover:bg-muted transition-colors first:rounded-t-xl last:rounded-b-xl"
+            onClick={handleLinkClick}
+          >
+            <Checkbox
+              className="cursor-pointer"
+              checked={selectedIds.includes(contact.id)}
+              onCheckedChange={() => onToggleItem(contact.id)}
+            />
+            <Avatar />
+            <div className="flex-1 min-w-0">
+              <div className="font-medium">
+                {`${contact.first_name} ${contact.last_name ?? ""}`}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                {contact.title}
+                {contact.title && contact.company_id != null && " at "}
+                {contact.company_id != null && (
+                  <ReferenceField
+                    source="company_id"
+                    reference="companies"
+                    link={false}
+                  >
+                    <TextField source="name" />
+                  </ReferenceField>
+                )}
+                {contact.nb_tasks
+                  ? ` - ${contact.nb_tasks} task${
+                      contact.nb_tasks > 1 ? "s" : ""
+                    }`
+                  : ""}
+                &nbsp;&nbsp;
+                <TagsList />
+              </div>
+            </div>
+            {contact.last_seen && (
+              <div className="text-right ml-4">
+                <div
+                  className="text-sm text-muted-foreground"
+                  title={contact.last_seen}
+                >
+                  {!isSmall && "last activity "}
+                  {formatRelative(contact.last_seen, now)}{" "}
+                  <Status status={contact.status} />
+                </div>
+              </div>
+            )}
+          </Link>
+        </RecordContextProvider>
+      ))}
+
+      {contacts.length === 0 && (
+        <div className="p-4">
+          <div className="text-muted-foreground">No contacts found</div>
+        </div>
+      )}
+    </div>
+  );
+};