realtimex-crm 0.1.2

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

@@ -0,0 +1,126 @@
+import { endOfYesterday, startOfMonth, startOfWeek, subMonths } from "date-fns";
+import { CheckSquare, Clock, Tag, TrendingUp, Users } from "lucide-react";
+import { FilterLiveForm, useGetIdentity, useGetList } from "ra-core";
+import { ToggleFilterButton } from "@/components/admin/toggle-filter-button";
+import { SearchInput } from "@/components/admin/search-input";
+import { Badge } from "@/components/ui/badge";
+
+import { FilterCategory } from "../filters/FilterCategory";
+import { Status } from "../misc/Status";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+
+export const ContactListFilter = () => {
+  const { noteStatuses } = useConfigurationContext();
+  const { identity } = useGetIdentity();
+  const { data } = useGetList("tags", {
+    pagination: { page: 1, perPage: 10 },
+    sort: { field: "name", order: "ASC" },
+  });
+
+  return (
+    <div className="w-52 min-w-52 order-first pt-0.75 flex flex-col gap-4">
+      <FilterLiveForm>
+        <SearchInput source="q" placeholder="Search name, company..." />
+      </FilterLiveForm>
+
+      <FilterCategory label="Last activity" icon={<Clock />}>
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Today"
+          value={{
+            "last_seen@gte": endOfYesterday().toISOString(),
+            "last_seen@lte": undefined,
+          }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="This week"
+          value={{
+            "last_seen@gte": startOfWeek(new Date()).toISOString(),
+            "last_seen@lte": undefined,
+          }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Before this week"
+          value={{
+            "last_seen@gte": undefined,
+            "last_seen@lte": startOfWeek(new Date()).toISOString(),
+          }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Before this month"
+          value={{
+            "last_seen@gte": undefined,
+            "last_seen@lte": startOfMonth(new Date()).toISOString(),
+          }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Before last month"
+          value={{
+            "last_seen@gte": undefined,
+            "last_seen@lte": subMonths(
+              startOfMonth(new Date()),
+              1,
+            ).toISOString(),
+          }}
+        />
+      </FilterCategory>
+
+      <FilterCategory label="Status" icon={<TrendingUp />}>
+        {noteStatuses.map((status) => (
+          <ToggleFilterButton
+            key={status.value}
+            className="w-full justify-between"
+            label={
+              <span>
+                {status.label} <Status status={status.value} />
+              </span>
+            }
+            value={{ status: status.value }}
+          />
+        ))}
+      </FilterCategory>
+
+      <FilterCategory label="Tags" icon={<Tag />}>
+        {data &&
+          data.map((record) => (
+            <ToggleFilterButton
+              className="w-full justify-between"
+              key={record.id}
+              label={
+                <Badge
+                  variant="secondary"
+                  className="text-black text-xs font-normal cursor-pointer"
+                  style={{
+                    backgroundColor: record?.color,
+                  }}
+                >
+                  {record?.name}
+                </Badge>
+              }
+              value={{ "tags@cs": `{${record.id}}` }}
+            />
+          ))}
+      </FilterCategory>
+
+      <FilterCategory icon={<CheckSquare />} label="Tasks">
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label={"With pending tasks"}
+          value={{ "nb_tasks@gt": 0 }}
+        />
+      </FilterCategory>
+
+      <FilterCategory icon={<Users />} label="Account Manager">
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label={"Me"}
+          value={{ sales_id: identity?.id }}
+        />
+      </FilterCategory>
+    </div>
+  );
+};

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

@@ -0,0 +1,263 @@
+import { useState, useEffect } from "react";
+import { Merge, CircleX, AlertTriangle, ArrowDown } from "lucide-react";
+import {
+  useDataProvider,
+  useRecordContext,
+  useGetList,
+  useGetManyReference,
+  required,
+  Form,
+  useNotify,
+  useRedirect,
+} from "ra-core";
+import type { Identifier } from "ra-core";
+import { useMutation } from "@tanstack/react-query";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { AutocompleteInput } from "@/components/admin/autocomplete-input";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import type { Contact } from "../types";
+import { contactOptionText } from "../misc/ContactOption";
+
+export const ContactMergeButton = () => {
+  const [mergeDialogOpen, setMergeDialogOpen] = useState(false);
+  return (
+    <>
+      <Button
+        variant="outline"
+        className="h-6 cursor-pointer"
+        size="sm"
+        onClick={() => setMergeDialogOpen(true)}
+      >
+        <Merge className="w-4 h-4" />
+        Merge with another contact
+      </Button>
+      <ContactMergeDialog
+        open={mergeDialogOpen}
+        onClose={() => setMergeDialogOpen(false)}
+      />
+    </>
+  );
+};
+
+interface ContactMergeDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const ContactMergeDialog = ({ open, onClose }: ContactMergeDialogProps) => {
+  const loserContact = useRecordContext<Contact>();
+  const notify = useNotify();
+  const redirect = useRedirect();
+  const dataProvider = useDataProvider();
+  const [winnerId, setWinnerId] = useState<Identifier | null>(null);
+  const [suggestedWinnerId, setSuggestedWinnerId] = useState<Identifier | null>(
+    null,
+  );
+  const [isMerging, setIsMerging] = useState(false);
+  const { mutateAsync } = useMutation({
+    mutationKey: ["contacts", "merge", { loserId: loserContact?.id, winnerId }],
+    mutationFn: async () => {
+      return dataProvider.mergeContacts(loserContact?.id, winnerId);
+    },
+  });
+
+  // Find potential contacts with matching first and last name
+  const { data: matchingContacts } = useGetList(
+    "contacts",
+    {
+      filter: {
+        first_name: loserContact?.first_name,
+        last_name: loserContact?.last_name,
+        "id@neq": `${loserContact?.id}`, // Exclude current contact
+      },
+      pagination: { page: 1, perPage: 10 },
+    },
+    { enabled: open && !!loserContact },
+  );
+
+  // Get counts of items to be merged
+  const canFetchCounts = open && !!loserContact && !!winnerId;
+  const { total: tasksCount } = useGetManyReference(
+    "tasks",
+    {
+      target: "contact_id",
+      id: loserContact?.id,
+      pagination: { page: 1, perPage: 1 },
+    },
+    { enabled: canFetchCounts },
+  );
+
+  const { total: notesCount } = useGetManyReference(
+    "contactNotes",
+    {
+      target: "contact_id",
+      id: loserContact?.id,
+      pagination: { page: 1, perPage: 1 },
+    },
+    { enabled: canFetchCounts },
+  );
+
+  const { total: dealsCount } = useGetList(
+    "deals",
+    {
+      filter: { "contact_ids@cs": `{${loserContact?.id}}` },
+      pagination: { page: 1, perPage: 1 },
+    },
+    { enabled: canFetchCounts },
+  );
+
+  useEffect(() => {
+    if (matchingContacts && matchingContacts.length > 0) {
+      const suggestedWinnerId = matchingContacts[0].id;
+      setSuggestedWinnerId(suggestedWinnerId);
+      setWinnerId(suggestedWinnerId);
+    }
+  }, [matchingContacts]);
+
+  const handleMerge = async () => {
+    if (!winnerId || !loserContact) {
+      notify("Please select a contact to merge with", { type: "warning" });
+      return;
+    }
+
+    try {
+      setIsMerging(true);
+      await mutateAsync();
+      setIsMerging(false);
+      notify("Contacts merged successfully", { type: "success" });
+      redirect(`/contacts/${winnerId}/show`);
+      onClose();
+    } catch (error) {
+      setIsMerging(false);
+      notify("Failed to merge contacts", { type: "error" });
+      console.error("Merge failed:", error);
+    }
+  };
+
+  if (!loserContact) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="md:min-w-lg max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Merge Contact</DialogTitle>
+          <DialogDescription>
+            Merge this contact with another one.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="p-4 bg-primary/5 rounded-lg border border-primary/20">
+            <p className="font-medium text-sm">
+              Current Contact (will be deleted)
+            </p>
+            <div className="font-medium text-sm mt-4">{contactOptionText}</div>
+
+            <div className="flex justify-center my-4">
+              <ArrowDown className="h-5 w-5 text-muted-foreground" />
+            </div>
+
+            <p className="font-medium text-sm mb-2">
+              Target Contact (will be kept)
+            </p>
+            <Form>
+              <ReferenceInput
+                source="winner_id"
+                reference="contacts"
+                filter={{ "id@neq": loserContact.id }}
+              >
+                <AutocompleteInput
+                  label=""
+                  optionText={contactOptionText}
+                  validate={required()}
+                  onChange={setWinnerId}
+                  defaultValue={suggestedWinnerId}
+                  helperText={false}
+                />
+              </ReferenceInput>
+            </Form>
+          </div>
+
+          {winnerId && (
+            <>
+              <div className="space-y-2">
+                <p className="font-medium text-sm">What will be merged:</p>
+                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
+                  {notesCount != null && notesCount > 0 && (
+                    <li>
+                      • {notesCount} note
+                      {notesCount !== 1 ? "s" : ""} will be reassigned
+                    </li>
+                  )}
+                  {tasksCount != null && tasksCount > 0 && (
+                    <li>
+                      • {tasksCount} task
+                      {tasksCount !== 1 ? "s" : ""} will be reassigned
+                    </li>
+                  )}
+                  {dealsCount != null && dealsCount > 0 && (
+                    <li>
+                      • {dealsCount} deal
+                      {dealsCount !== 1 ? "s" : ""} will be updated
+                    </li>
+                  )}
+                  {loserContact.email_jsonb?.length > 0 && (
+                    <li>
+                      • {loserContact.email_jsonb.length} email address
+                      {loserContact.email_jsonb.length !== 1 ? "es" : ""} will
+                      be added
+                    </li>
+                  )}
+                  {loserContact.phone_jsonb?.length > 0 && (
+                    <li>
+                      • {loserContact.phone_jsonb.length} phone number
+                      {loserContact.phone_jsonb.length !== 1 ? "s" : ""} will be
+                      added
+                    </li>
+                  )}
+                  {!notesCount &&
+                    !tasksCount &&
+                    !dealsCount &&
+                    !loserContact.email_jsonb?.length &&
+                    !loserContact.phone_jsonb?.length && (
+                      <li className="text-muted-foreground/60">
+                        No additional data to merge
+                      </li>
+                    )}
+                </ul>
+              </div>
+              <Alert variant="destructive">
+                <AlertTriangle className="h-4 w-4" />
+                <AlertTitle>Warning: Destructive Operation</AlertTitle>
+                <AlertDescription>
+                  All data will be transferred to the second contact. This
+                  action cannot be undone.
+                </AlertDescription>
+              </Alert>
+            </>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose} disabled={isMerging}>
+            <CircleX />
+            Cancel
+          </Button>
+          <Button onClick={handleMerge} disabled={!winnerId || isMerging}>
+            <Merge />
+            {isMerging ? "Merging..." : "Merge Contacts"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,76 @@
+import { ShowBase, useShowContext } from "ra-core";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { ReferenceManyField } from "@/components/admin/reference-many-field";
+import { TextField } from "@/components/admin/text-field";
+import { Card, CardContent } from "@/components/ui/card";
+
+import { CompanyAvatar } from "../companies/CompanyAvatar";
+import { NoteCreate, NotesIterator } from "../notes";
+import type { Contact } from "../types";
+import { Avatar } from "./Avatar";
+import { ContactAside } from "./ContactAside";
+
+export const ContactShow = () => (
+  <ShowBase>
+    <ContactShowContent />
+  </ShowBase>
+);
+
+const ContactShowContent = () => {
+  const { record, isPending } = useShowContext<Contact>();
+  if (isPending || !record) return null;
+
+  return (
+    <div className="mt-2 mb-2 flex gap-8">
+      <div className="flex-1">
+        <Card>
+          <CardContent>
+            <div className="flex">
+              <Avatar />
+              <div className="ml-2 flex-1">
+                <h5 className="text-xl font-semibold">
+                  {record.first_name} {record.last_name}
+                </h5>
+                <div className="inline-flex text-sm text-muted-foreground">
+                  {record.title}
+                  {record.title && record.company_id != null && " at "}
+                  {record.company_id != null && (
+                    <ReferenceField
+                      source="company_id"
+                      reference="companies"
+                      link="show"
+                    >
+                      &nbsp;
+                      <TextField source="name" />
+                    </ReferenceField>
+                  )}
+                </div>
+              </div>
+              <div>
+                <ReferenceField
+                  source="company_id"
+                  reference="companies"
+                  link="show"
+                  className="no-underline"
+                >
+                  <CompanyAvatar />
+                </ReferenceField>
+              </div>
+            </div>
+            <ReferenceManyField
+              target="contact_id"
+              reference="contactNotes"
+              sort={{ field: "date", order: "DESC" }}
+              empty={
+                <NoteCreate reference="contacts" showStatus className="mt-4" />
+              }
+            >
+              <NotesIterator reference="contacts" showStatus />
+            </ReferenceManyField>
+          </CardContent>
+        </Card>
+      </div>
+      <ContactAside />
+    </div>
+  );
+};

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

@@ -0,0 +1,79 @@
+import { Download } from "lucide-react";
+import { useGetOne, useRecordContext } from "ra-core";
+import { Button } from "@/components/ui/button";
+import type { Contact, Company } from "../types";
+import { exportToVCard } from "./exportToVCard";
+
+export const ExportVCardButton = () => {
+  const contact = useRecordContext<Contact>();
+
+  // Fetch the company data on mount
+  const { data: company } = useGetOne<Company>(
+    "companies",
+    { id: contact?.company_id },
+    { enabled: !!contact?.company_id },
+  );
+
+  const handleExport = async () => {
+    if (!contact) return;
+
+    // Fetch and convert avatar to base64 if it exists
+    let photoData: { base64: string; mimeType: string } | undefined = undefined;
+
+    if (contact.avatar?.src) {
+      try {
+        const response = await fetch(contact.avatar.src);
+        const blob = await response.blob();
+        const mimeType = blob.type || "image/png";
+
+        // Convert blob to base64
+        const base64 = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const result = reader.result as string;
+            // Remove the data URL prefix (data:image/png;base64,)
+            const base64Data = result.split(",")[1];
+            resolve(base64Data);
+          };
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+        });
+
+        photoData = { base64, mimeType };
+      } catch (error) {
+        console.error("Failed to fetch avatar image:", error);
+        // Continue without the photo
+      }
+    }
+
+    // Generate vCard content
+    const vCardContent = exportToVCard(contact, company, photoData);
+
+    // Create blob and download
+    const blob = new Blob([vCardContent], {
+      type: "text/vcard;charset=utf-8",
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${contact.first_name}_${contact.last_name}.vcf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  if (!contact) return null;
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleExport}
+      className="h-6 cursor-pointer"
+    >
+      <Download className="w-4 h-4" />
+      Export to vCard
+    </Button>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { useRecordContext } from "ra-core";
+import { ReferenceArrayField } from "@/components/admin/reference-array-field";
+import { SingleFieldList } from "@/components/admin/single-field-list";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const ColoredBadge = (props: any) => {
+  const record = useRecordContext();
+  if (!record) return null;
+  return (
+    <Badge
+      {...props}
+      style={{ backgroundColor: record.color, border: 0 }}
+      variant="outline"
+      className={cn("text-black font-normal", props.className)}
+    >
+      {record.name}
+    </Badge>
+  );
+};
+
+export const TagsList = () => (
+  <ReferenceArrayField
+    className="inline-block"
+    resource="contacts"
+    source="tags"
+    reference="tags"
+  >
+    <SingleFieldList>
+      <ColoredBadge source="name" />
+    </SingleFieldList>
+  </ReferenceArrayField>
+);