realtimex-crm 0.1.2

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

@@ -0,0 +1,155 @@
+import { Edit, Plus } from "lucide-react";
+import {
+  useGetList,
+  useGetMany,
+  useRecordContext,
+  useUpdate,
+  type Identifier,
+} from "ra-core";
+import { useCallback, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { TagChip } from "../tags/TagChip";
+import { TagCreateModal } from "../tags/TagCreateModal";
+import type { Contact, Tag } from "../types";
+
+export const TagsListEdit = () => {
+  const record = useRecordContext<Contact>();
+  const [open, setOpen] = useState(false);
+
+  const { data: allTags, isPending: isPendingAllTags } = useGetList<Tag>(
+    "tags",
+    {
+      pagination: { page: 1, perPage: 10 },
+      sort: { field: "name", order: "ASC" },
+    },
+  );
+  const { data: tags, isPending: isPendingRecordTags } = useGetMany<Tag>(
+    "tags",
+    { ids: record?.tags },
+    { enabled: record && record.tags && record.tags.length > 0 },
+  );
+  const [update] = useUpdate<Contact>();
+
+  const unselectedTags =
+    allTags && record && allTags.filter((tag) => !record.tags.includes(tag.id));
+
+  const handleTagAdd = (id: Identifier) => {
+    if (!record) {
+      throw new Error("No contact record found");
+    }
+    const tags = [...record.tags, id];
+    update("contacts", {
+      id: record.id,
+      data: { tags },
+      previousData: record,
+    });
+  };
+
+  const handleTagDelete = async (id: Identifier) => {
+    if (!record) {
+      throw new Error("No contact record found");
+    }
+    const tags = record.tags.filter((tagId) => tagId !== id);
+    await update("contacts", {
+      id: record.id,
+      data: { tags },
+      previousData: record,
+    });
+  };
+
+  const openTagCreateDialog = () => {
+    setOpen(true);
+  };
+
+  const handleTagCreateClose = () => {
+    setOpen(false);
+  };
+
+  const handleTagCreated = useCallback(
+    async (tag: Tag) => {
+      if (!record) {
+        throw new Error("No contact record found");
+      }
+
+      await update(
+        "contacts",
+        {
+          id: record.id,
+          data: { tags: [...record.tags, tag.id] },
+          previousData: record,
+        },
+        {
+          onSuccess: () => {
+            setOpen(false);
+          },
+        },
+      );
+    },
+    [update, record],
+  );
+
+  if (isPendingRecordTags || isPendingAllTags) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {tags?.map((tag) => (
+        <div key={tag.id}>
+          <TagChip tag={tag} onUnlink={() => handleTagDelete(tag.id)} />
+        </div>
+      ))}
+
+      <div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="h-6 cursor-pointer">
+              <Plus className="h-3 w-3 mr-1" />
+              Add tag
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            {unselectedTags?.map((tag) => (
+              <DropdownMenuItem
+                key={tag.id}
+                onClick={() => handleTagAdd(tag.id)}
+              >
+                <Badge
+                  variant="secondary"
+                  className="text-xs font-normal text-black"
+                  style={{
+                    backgroundColor: tag.color,
+                  }}
+                >
+                  {tag.name}
+                </Badge>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuItem onClick={openTagCreateDialog}>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="w-full justify-start p-0 cursor-pointer"
+              >
+                <Edit className="h-3 w-3 mr-2" />
+                Create new tag
+              </Button>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <TagCreateModal
+        open={open}
+        onClose={handleTagCreateClose}
+        onSuccess={handleTagCreated}
+      />
+    </div>
+  );
+};

package/src/components/atomic-crm/contacts/contacts_export.csv

@@ -0,0 +1,3 @@
+first_name,last_name,gender,title,background,first_seen,last_seen,has_newsletter,status,tags,linkedin_url,company,email_work,email_home,email_other,phone_work,phone_home,phone_other
+John,Doe,male,Sales Executive,,2024-07-01T00:00:00+00:00,2024-07-01T11:54:49.95+00:00,false,in-contract,"influencer, developer",https://www.linkedin.com/in/johndoe,Acme,john@doe.example,john.doe@gmail.com,jdoe@caramail.com,659-980-2015,740.645.3807,(446) 758-2122
+Jane,Doe,female,Designer,,2024-07-01T00:00:00+00:00,2024-07-01T11:54:49.95+00:00,false,in-contract,"UI, design",https://www.linkedin.com/in/janedoe,Acme,,,jane@doe.example,659-980-2020,740.647.3802,

package/src/components/atomic-crm/contacts/exportToVCard.ts

@@ -0,0 +1,104 @@
+import type { Contact, Company } from "../types";
+
+/**
+ * Folds a long line according to vCard specification (max 75 chars per line)
+ * Continuation lines start with a space
+ */
+function foldLine(line: string): string {
+  const maxLength = 75;
+  if (line.length <= maxLength) return line;
+
+  const result: string[] = [];
+  let currentLine = line.substring(0, maxLength);
+  let remaining = line.substring(maxLength);
+
+  result.push(currentLine);
+
+  while (remaining.length > 0) {
+    // Continuation lines start with a space and can have 74 more chars
+    const chunkSize = maxLength - 1;
+    currentLine = " " + remaining.substring(0, chunkSize);
+    remaining = remaining.substring(chunkSize);
+    result.push(currentLine);
+  }
+
+  return result.join("\r\n");
+}
+
+/**
+ * Converts a contact and their company to vCard 3.0 format
+ */
+export function exportToVCard(
+  contact: Contact,
+  company?: Company,
+  photoData?: { base64: string; mimeType: string },
+): string {
+  const lines: string[] = [];
+
+  // vCard header
+  lines.push("BEGIN:VCARD");
+  lines.push("VERSION:3.0");
+
+  // Name (N: Family Name;Given Name;Additional Names;Honorific Prefixes;Honorific Suffixes)
+  lines.push(`N:${contact.last_name};${contact.first_name};;;`);
+
+  // Formatted name
+  lines.push(`FN:${contact.first_name} ${contact.last_name}`);
+
+  // Title/Job position
+  if (contact.title) {
+    lines.push(`TITLE:${contact.title}`);
+  }
+
+  // Organization
+  if (company?.name) {
+    lines.push(`ORG:${company.name}`);
+  }
+
+  // Emails
+  if (contact.email_jsonb && contact.email_jsonb.length > 0) {
+    contact.email_jsonb.forEach((emailObj) => {
+      const type = emailObj.type.toUpperCase();
+      lines.push(`EMAIL;TYPE=${type}:${emailObj.email}`);
+    });
+  }
+
+  // Phone numbers
+  if (contact.phone_jsonb && contact.phone_jsonb.length > 0) {
+    contact.phone_jsonb.forEach((phoneObj) => {
+      const type = phoneObj.type.toUpperCase();
+      lines.push(`TEL;TYPE=${type}:${phoneObj.number}`);
+    });
+  }
+
+  // LinkedIn URL
+  if (contact.linkedin_url) {
+    lines.push(`URL:${contact.linkedin_url}`);
+  }
+
+  // Background/Note
+  if (contact.background) {
+    // Escape newlines and special characters in notes
+    const escapedNote = contact.background
+      .replace(/\\/g, "\\\\")
+      .replace(/\n/g, "\\n")
+      .replace(/,/g, "\\,")
+      .replace(/;/g, "\\;");
+    lines.push(`NOTE:${escapedNote}`);
+  }
+
+  // Photo/Avatar - vCard 3.0 format with base64 encoding
+  if (photoData) {
+    // Extract image type from MIME type (e.g., "image/png" -> "PNG")
+    const imageType = photoData.mimeType.split("/")[1]?.toUpperCase() || "PNG";
+
+    // vCard 3.0 format: PHOTO;ENCODING=b;TYPE=PNG:
+    const photoLine = `PHOTO;ENCODING=b;TYPE=${imageType}:${photoData.base64}`;
+    lines.push(foldLine(photoLine));
+  }
+
+  // vCard footer
+  lines.push("END:VCARD");
+
+  return lines.join("\r\n");
+}

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

@@ -0,0 +1,14 @@
+import type { Contact } from "../types";
+import { ContactCreate } from "./ContactCreate";
+import { ContactEdit } from "./ContactEdit";
+import { ContactList } from "./ContactList";
+import { ContactShow } from "./ContactShow";
+
+export default {
+  list: ContactList,
+  show: ContactShow,
+  edit: ContactEdit,
+  create: ContactCreate,
+  recordRepresentation: (record: Contact) =>
+    record?.first_name + " " + record?.last_name,
+};

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

@@ -0,0 +1,206 @@
+import { useDataProvider, useGetIdentity, type DataProvider } from "ra-core";
+import { useCallback, useMemo } from "react";
+
+import type { Company, Tag } from "../types";
+
+export type ContactImportSchema = {
+  first_name: string;
+  last_name: string;
+  gender: string;
+  title: string;
+  company: string;
+  email_work: string;
+  email_home: string;
+  email_other: string;
+  phone_work: string;
+  phone_home: string;
+  phone_other: string;
+  background: string;
+  avatar: string;
+  first_seen: string;
+  last_seen: string;
+  has_newsletter: string;
+  status: string;
+  tags: string;
+  linkedin_url: string;
+};
+
+export function useContactImport() {
+  const today = new Date().toISOString();
+  const user = useGetIdentity();
+  const dataProvider = useDataProvider();
+
+  // company cache to avoid creating the same company multiple times and costly roundtrips
+  // Cache is dependent of dataProvider, so it's safe to use it as a dependency
+  const companiesCache = useMemo(
+    () => new Map<string, Company>(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dataProvider],
+  );
+  const getCompanies = useCallback(
+    async (names: string[]) =>
+      fetchRecordsWithCache<Company>(
+        "companies",
+        companiesCache,
+        names,
+        (name) => ({
+          name,
+          created_at: new Date().toISOString(),
+          sales_id: user?.identity?.id,
+        }),
+        dataProvider,
+      ),
+    [companiesCache, user?.identity?.id, dataProvider],
+  );
+
+  // Tags cache to avoid creating the same tag multiple times and costly roundtrips
+  // Cache is dependent of dataProvider, so it's safe to use it as a dependency
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const tagsCache = useMemo(() => new Map<string, Tag>(), [dataProvider]);
+  const getTags = useCallback(
+    async (names: string[]) =>
+      fetchRecordsWithCache<Tag>(
+        "tags",
+        tagsCache,
+        names,
+        (name) => ({
+          name,
+          color: "#f9f9f9",
+        }),
+        dataProvider,
+      ),
+    [tagsCache, dataProvider],
+  );
+
+  const processBatch = useCallback(
+    async (batch: ContactImportSchema[]) => {
+      const [companies, tags] = await Promise.all([
+        getCompanies(
+          batch
+            .map((contact) => contact.company?.trim())
+            .filter((name) => name),
+        ),
+        getTags(batch.flatMap((batch) => parseTags(batch.tags))),
+      ]);
+
+      await Promise.all(
+        batch.map(
+          async ({
+            first_name,
+            last_name,
+            gender,
+            title,
+            email_work,
+            email_home,
+            email_other,
+            phone_work,
+            phone_home,
+            phone_other,
+            background,
+            first_seen,
+            last_seen,
+            has_newsletter,
+            status,
+            company: companyName,
+            tags: tagNames,
+            linkedin_url,
+          }) => {
+            const email_jsonb = [
+              { email: email_work, type: "Work" },
+              { email: email_home, type: "Home" },
+              { email: email_other, type: "Other" },
+            ].filter(({ email }) => email);
+            const phone_jsonb = [
+              { number: phone_work, type: "Work" },
+              { number: phone_home, type: "Home" },
+              { number: phone_other, type: "Other" },
+            ].filter(({ number }) => number);
+            const company = companyName?.trim()
+              ? companies.get(companyName.trim())
+              : undefined;
+            const tagList = parseTags(tagNames)
+              .map((name) => tags.get(name))
+              .filter((tag): tag is Tag => !!tag);
+
+            return dataProvider.create("contacts", {
+              data: {
+                first_name,
+                last_name,
+                gender,
+                title,
+                email_jsonb,
+                phone_jsonb,
+                background,
+                first_seen: first_seen
+                  ? new Date(first_seen).toISOString()
+                  : today,
+                last_seen: last_seen
+                  ? new Date(last_seen).toISOString()
+                  : today,
+                has_newsletter,
+                status,
+                company_id: company?.id,
+                tags: tagList.map((tag) => tag.id),
+                sales_id: user?.identity?.id,
+                linkedin_url,
+              },
+            });
+          },
+        ),
+      );
+    },
+    [dataProvider, getCompanies, getTags, user?.identity?.id, today],
+  );
+
+  return processBatch;
+}
+
+const fetchRecordsWithCache = async function <T>(
+  resource: string,
+  cache: Map<string, T>,
+  names: string[],
+  getCreateData: (name: string) => Partial<T>,
+  dataProvider: DataProvider,
+) {
+  const trimmedNames = [...new Set(names.map((name) => name.trim()))];
+  const uncachedRecordNames = trimmedNames.filter((name) => !cache.has(name));
+
+  // check the backend for existing records
+  if (uncachedRecordNames.length > 0) {
+    const response = await dataProvider.getList(resource, {
+      filter: {
+        "name@in": `(${uncachedRecordNames
+          .map((name) => `"${name}"`)
+          .join(",")})`,
+      },
+      pagination: { page: 1, perPage: trimmedNames.length },
+      sort: { field: "id", order: "ASC" },
+    });
+    for (const record of response.data) {
+      cache.set(record.name.trim(), record);
+    }
+  }
+
+  // create missing records in parallel
+  await Promise.all(
+    uncachedRecordNames.map(async (name) => {
+      if (cache.has(name)) return;
+      const response = await dataProvider.create(resource, {
+        data: getCreateData(name),
+      });
+      cache.set(name, response.data);
+    }),
+  );
+
+  // now all records are in cache, return a map of all records
+  return trimmedNames.reduce((acc, name) => {
+    acc.set(name, cache.get(name) as T);
+    return acc;
+  }, new Map<string, T>());
+};
+
+const parseTags = (tags: string) =>
+  tags
+    ?.split(",")
+    ?.map((tag: string) => tag.trim())
+    ?.filter((tag: string) => tag) ?? [];

package/src/components/atomic-crm/dashboard/Dashboard.tsx

@@ -0,0 +1,66 @@
+import { useGetList } from "ra-core";
+
+import type { Contact, ContactNote } from "../types";
+import { DashboardActivityLog } from "./DashboardActivityLog";
+import { DashboardStepper } from "./DashboardStepper";
+import { DealsChart } from "./DealsChart";
+import { HotContacts } from "./HotContacts";
+import { TasksList } from "./TasksList";
+import { Welcome } from "./Welcome";
+
+export const Dashboard = () => {
+  const {
+    data: dataContact,
+    total: totalContact,
+    isPending: isPendingContact,
+  } = useGetList<Contact>("contacts", {
+    pagination: { page: 1, perPage: 1 },
+  });
+
+  const { total: totalContactNotes, isPending: isPendingContactNotes } =
+    useGetList<ContactNote>("contactNotes", {
+      pagination: { page: 1, perPage: 1 },
+    });
+
+  const { total: totalDeal, isPending: isPendingDeal } = useGetList<Contact>(
+    "deals",
+    {
+      pagination: { page: 1, perPage: 1 },
+    },
+  );
+
+  const isPending = isPendingContact || isPendingContactNotes || isPendingDeal;
+
+  if (isPending) {
+    return null;
+  }
+
+  if (!totalContact) {
+    return <DashboardStepper step={1} />;
+  }
+
+  if (!totalContactNotes) {
+    return <DashboardStepper step={2} contactId={dataContact?.[0]?.id} />;
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-12 gap-6 mt-1">
+      <div className="md:col-span-3">
+        <div className="flex flex-col gap-4">
+          {import.meta.env.VITE_IS_DEMO === "true" ? <Welcome /> : null}
+          <HotContacts />
+        </div>
+      </div>
+      <div className="md:col-span-6">
+        <div className="flex flex-col gap-6">
+          {totalDeal ? <DealsChart /> : null}
+          <DashboardActivityLog />
+        </div>
+      </div>
+
+      <div className="md:col-span-3">
+        <TasksList />
+      </div>
+    </div>
+  );
+};

package/src/components/atomic-crm/dashboard/DashboardActivityLog.tsx

@@ -0,0 +1,22 @@
+import { Clock } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+import { ActivityLog } from "../activity/ActivityLog";
+
+export function DashboardActivityLog() {
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center mb-2">
+        <div className="mr-3 flex">
+          <Clock className="text-muted-foreground w-6 h-6" />
+        </div>
+        <h2 className="text-xl font-semibold text-muted-foreground">
+          Latest Activity
+        </h2>
+      </div>
+      <Card className="mb-2 p-6">
+        <ActivityLog pageSize={10} />
+      </Card>
+    </div>
+  );
+}

package/src/components/atomic-crm/dashboard/DashboardStepper.tsx

@@ -0,0 +1,72 @@
+import { CheckCircle, Circle } from "lucide-react";
+import type { Identifier } from "ra-core";
+import { Link } from "react-router";
+import { CreateButton } from "@/components/admin/create-button";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+import { ContactImportButton } from "../contacts/ContactImportButton";
+import useAppBarHeight from "../misc/useAppBarHeight";
+
+export const DashboardStepper = ({
+  step,
+  contactId,
+}: {
+  step: number;
+  contactId?: Identifier;
+}) => {
+  const appbarHeight = useAppBarHeight();
+  return (
+    <div
+      className="flex justify-center items-center"
+      style={{
+        height: `calc(100dvh - ${appbarHeight}px)`,
+      }}
+    >
+      <Card className="w-full max-w-[600px]">
+        <CardContent className="px-6">
+          <div className="flex items-center justify-between mb-8">
+            <h3 className="text-lg font-bold">What's next?</h3>
+            <div className="w-[150px]">
+              <Progress value={(step / 3) * 100} className="mb-2" />
+              <div className="text-right text-sm">{step}/3 done</div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-12">
+            <div className="flex gap-8 items-center">
+              <CheckCircle className="text-green-600 w-5 h-5" />
+              <h4 className="font-bold">Install Atomic CRM</h4>
+            </div>
+            <div className="flex gap-8 items-start">
+              {step > 1 ? (
+                <CheckCircle className="text-green-600 w-5 h-5 mt-1" />
+              ) : (
+                <Circle className="text-muted-foreground w-5 h-5 mt-1" />
+              )}
+
+              <div className="flex flex-col gap-4">
+                <h4 className="font-bold">Add your first contact</h4>
+
+                <div className="flex gap-8">
+                  <CreateButton label="New Contact" resource="contacts" />
+                  <ContactImportButton />
+                </div>
+              </div>
+            </div>
+            <div className="flex gap-8 items-start">
+              <Circle className="text-muted-foreground w-5 h-5 mt-1" />
+              <div className="flex flex-col gap-4">
+                <h4 className="font-bold">Add your first note</h4>
+                <p>Go to a contact page and add a note</p>
+                <Button asChild disabled={step < 2} className="w-[100px]">
+                  <Link to={`/contacts/${contactId}/show`}>Add note</Link>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};