realtimex-crm 0.1.2

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

@@ -0,0 +1,41 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export const Welcome = () => (
+  <Card>
+    <CardHeader className="px-4">
+      <CardTitle>Your CRM Starter Kit</CardTitle>
+    </CardHeader>
+    <CardContent className="px-4">
+      <p className="text-sm mb-4">
+        <a
+          href="https://marmelab.com/atomic-crm"
+          className="underline hover:no-underline"
+        >
+          Atomic CRM
+        </a>{" "}
+        is a template designed to help you quickly build your own CRM.
+      </p>
+      <p className="text-sm mb-4">
+        This demo runs on a mock API, so you can explore and modify the data. It
+        resets on reload. The full version uses Supabase for the backend.
+      </p>
+      <p className="text-sm">
+        Powered by{" "}
+        <a
+          href="https://marmelab.com/shadcn-admin-kit"
+          className="underline hover:no-underline"
+        >
+          shadcn-admin-kit
+        </a>
+        , Atomic CRM is fully open-source. You can find the code at{" "}
+        <a
+          href="https://github.com/marmelab/atomic-crm"
+          className="underline hover:no-underline"
+        >
+          marmelab/atomic-crm
+        </a>
+        .
+      </p>
+    </CardContent>
+  </Card>
+);

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

@@ -0,0 +1,31 @@
+import { useListContext } from "ra-core";
+import { Link as RouterLink } from "react-router";
+
+import { Avatar } from "../contacts/Avatar";
+
+export const ContactList = () => {
+  const { data, error, isPending } = useListContext();
+  if (isPending || error) return <div className="h-8" />;
+  return (
+    <div className="flex flex-row flex-wrap gap-4 mt-4">
+      {data.map((contact) => (
+        <div className="flex flex-row gap-4 items-center" key={contact.id}>
+          <Avatar record={contact} />
+          <div className="flex flex-col">
+            <RouterLink
+              to={`/contacts/${contact.id}/show`}
+              className="text-sm hover:underline"
+            >
+              {contact.first_name} {contact.last_name}
+            </RouterLink>
+            <span className="text-xs text-muted-foreground">
+              {contact.title}
+              {contact.title && contact.company_name && " at "}
+              {contact.company_name}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/atomic-crm/deals/DealArchivedList.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable react-refresh/only-export-components */
+import { useGetIdentity, useGetList } from "ra-core";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+
+import type { Deal } from "../types";
+import { DealCardContent } from "./DealCard";
+
+export const DealArchivedList = () => {
+  const { identity } = useGetIdentity();
+  const {
+    data: archivedLists,
+    total,
+    isPending,
+  } = useGetList("deals", {
+    pagination: { page: 1, perPage: 1000 },
+    sort: { field: "archived_at", order: "DESC" },
+    filter: { "archived_at@not.is": null },
+  });
+  const [openDialog, setOpenDialog] = useState(false);
+
+  useEffect(() => {
+    if (!isPending && total === 0) {
+      setOpenDialog(false);
+    }
+  }, [isPending, total]);
+
+  useEffect(() => {
+    setOpenDialog(false);
+  }, [archivedLists]);
+
+  if (!identity || isPending || !total || !archivedLists) return null;
+
+  // Group archived lists by date
+  const archivedListsByDate: { [date: string]: Deal[] } = archivedLists.reduce(
+    (acc, deal) => {
+      const date = new Date(deal.archived_at).toDateString();
+      if (!acc[date]) {
+        acc[date] = [];
+      }
+      acc[date].push(deal);
+      return acc;
+    },
+    {} as { [date: string]: Deal[] },
+  );
+
+  return (
+    <div className="w-full flex flex-row items-center justify-center">
+      <Button
+        variant="ghost"
+        onClick={() => setOpenDialog(true)}
+        className="my-4"
+      >
+        View archived deals
+      </Button>
+      <Dialog open={openDialog} onOpenChange={() => setOpenDialog(false)}>
+        <DialogContent className="lg:max-w-4xl overflow-y-auto max-h-9/10 top-1/20 translate-y-0">
+          <DialogTitle>Archived Deals</DialogTitle>
+          <div className="flex flex-col gap-8">
+            {Object.entries(archivedListsByDate).map(([date, deals]) => (
+              <div key={date} className="flex flex-col gap-4">
+                <h4 className="font-bold">{getRelativeTimeString(date)}</h4>
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+                  {deals.map((deal: Deal) => (
+                    <div key={deal.id}>
+                      <DealCardContent deal={deal} />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export function getRelativeTimeString(dateString: string): string {
+  const date = new Date(dateString);
+  date.setHours(0, 0, 0, 0);
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const diff = date.getTime() - today.getTime();
+  const unitDiff = Math.round(diff / (1000 * 60 * 60 * 24));
+
+  // Check if the date is more than one week old
+  if (Math.abs(unitDiff) > 7) {
+    return new Intl.DateTimeFormat(undefined, {
+      day: "numeric",
+      month: "long",
+    }).format(date);
+  }
+
+  // Intl.RelativeTimeFormat for dates within the last week
+  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+  return ucFirst(rtf.format(unitDiff, "day"));
+}
+
+function ucFirst(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/src/components/atomic-crm/deals/DealCard.tsx

@@ -0,0 +1,78 @@
+import { Draggable } from "@hello-pangea/dnd";
+import { useRedirect } from "ra-core";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { Card, CardContent } from "@/components/ui/card";
+
+import { CompanyAvatar } from "../companies/CompanyAvatar";
+import type { Deal } from "../types";
+
+export const DealCard = ({ deal, index }: { deal: Deal; index: number }) => {
+  if (!deal) return null;
+
+  return (
+    <Draggable draggableId={String(deal.id)} index={index}>
+      {(provided, snapshot) => (
+        <DealCardContent provided={provided} snapshot={snapshot} deal={deal} />
+      )}
+    </Draggable>
+  );
+};
+
+export const DealCardContent = ({
+  provided,
+  snapshot,
+  deal,
+}: {
+  provided?: any;
+  snapshot?: any;
+  deal: Deal;
+}) => {
+  const redirect = useRedirect();
+  const handleClick = () => {
+    redirect(`/deals/${deal.id}/show`, undefined, undefined, undefined, {
+      _scrollToTop: false,
+    });
+  };
+
+  return (
+    <div
+      className="cursor-pointer"
+      {...provided?.draggableProps}
+      {...provided?.dragHandleProps}
+      ref={provided?.innerRef}
+      onClick={handleClick}
+    >
+      <Card
+        className={`py-4 transition-all duration-200 ${
+          snapshot?.isDragging
+            ? "opacity-90 transform rotate-1 shadow-lg"
+            : "shadow-sm hover:shadow-md"
+        }`}
+      >
+        <CardContent className="px-4 flex">
+          <ReferenceField
+            source="company_id"
+            record={deal}
+            reference="companies"
+            link={false}
+          >
+            <CompanyAvatar width={20} height={20} />
+          </ReferenceField>
+          <div className="ml-3">
+            <p className="text-sm font-medium mb-2">{deal.name}</p>
+            <p className="text-xs text-muted-foreground">
+              {deal.amount.toLocaleString("en-US", {
+                notation: "compact",
+                style: "currency",
+                currency: "USD",
+                currencyDisplay: "narrowSymbol",
+                minimumSignificantDigits: 3,
+              })}
+              {deal.category ? `, ${deal.category}` : ""}
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/components/atomic-crm/deals/DealColumn.tsx

@@ -0,0 +1,52 @@
+import { Droppable } from "@hello-pangea/dnd";
+
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import type { Deal } from "../types";
+import { findDealLabel } from "./deal";
+import { DealCard } from "./DealCard";
+
+export const DealColumn = ({
+  stage,
+  deals,
+}: {
+  stage: string;
+  deals: Deal[];
+}) => {
+  const totalAmount = deals.reduce((sum, deal) => sum + deal.amount, 0);
+
+  const { dealStages } = useConfigurationContext();
+  return (
+    <div className="flex-1 pb-8">
+      <div className="flex flex-col items-center">
+        <h3 className="text-base font-medium">
+          {findDealLabel(dealStages, stage)}
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          {totalAmount.toLocaleString("en-US", {
+            notation: "compact",
+            style: "currency",
+            currency: "USD",
+            currencyDisplay: "narrowSymbol",
+            minimumSignificantDigits: 3,
+          })}
+        </p>
+      </div>
+      <Droppable droppableId={stage}>
+        {(droppableProvided, snapshot) => (
+          <div
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+            className={`flex flex-col rounded-2xl mt-2 gap-2 ${
+              snapshot.isDraggingOver ? "bg-muted" : ""
+            }`}
+          >
+            {deals.map((deal, index) => (
+              <DealCard key={deal.id} deal={deal} index={index} />
+            ))}
+            {droppableProvided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </div>
+  );
+};

package/src/components/atomic-crm/deals/DealCreate.tsx

@@ -0,0 +1,95 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Form,
+  useDataProvider,
+  useGetIdentity,
+  useListContext,
+  useRedirect,
+  type GetListResult,
+} from "ra-core";
+import { Create } from "@/components/admin/create";
+import { SaveButton } from "@/components/admin/form";
+import { FormToolbar } from "@/components/admin/simple-form";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+import type { Deal } from "../types";
+import { DealInputs } from "./DealInputs";
+
+export const DealCreate = ({ open }: { open: boolean }) => {
+  const redirect = useRedirect();
+  const dataProvider = useDataProvider();
+  const { data: allDeals } = useListContext<Deal>();
+
+  const handleClose = () => {
+    redirect("/deals");
+  };
+
+  const queryClient = useQueryClient();
+
+  const onSuccess = async (deal: Deal) => {
+    if (!allDeals) {
+      redirect("/deals");
+      return;
+    }
+    // increase the index of all deals in the same stage as the new deal
+    // first, get the list of deals in the same stage
+    const deals = allDeals.filter(
+      (d: Deal) => d.stage === deal.stage && d.id !== deal.id,
+    );
+    // update the actual deals in the database
+    await Promise.all(
+      deals.map(async (oldDeal) =>
+        dataProvider.update("deals", {
+          id: oldDeal.id,
+          data: { index: oldDeal.index + 1 },
+          previousData: oldDeal,
+        }),
+      ),
+    );
+    // refresh the list of deals in the cache as we used dataProvider.update(),
+    // which does not update the cache
+    const dealsById = deals.reduce(
+      (acc, d) => ({
+        ...acc,
+        [d.id]: { ...d, index: d.index + 1 },
+      }),
+      {} as { [key: string]: Deal },
+    );
+    const now = Date.now();
+    queryClient.setQueriesData<GetListResult | undefined>(
+      { queryKey: ["deals", "getList"] },
+      (res) => {
+        if (!res) return res;
+        return {
+          ...res,
+          data: res.data.map((d: Deal) => dealsById[d.id] || d),
+        };
+      },
+      { updatedAt: now },
+    );
+    redirect("/deals");
+  };
+
+  const { identity } = useGetIdentity();
+
+  return (
+    <Dialog open={open} onOpenChange={() => handleClose()}>
+      <DialogContent className="lg:max-w-4xl overflow-y-auto max-h-9/10 top-1/20 translate-y-0">
+        <Create resource="deals" mutationOptions={{ onSuccess }}>
+          <Form
+            defaultValues={{
+              sales_id: identity?.id,
+              contact_ids: [],
+              index: 0,
+            }}
+          >
+            <DealInputs />
+            <FormToolbar>
+              <SaveButton />
+            </FormToolbar>
+          </Form>
+        </Create>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/atomic-crm/deals/DealEdit.tsx

@@ -0,0 +1,81 @@
+import {
+  EditBase,
+  Form,
+  useNotify,
+  useRecordContext,
+  useRedirect,
+} from "ra-core";
+import { Link } from "react-router";
+import { DeleteButton } from "@/components/admin/delete-button";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+
+import { FormToolbar } from "../layout/FormToolbar";
+import { CompanyAvatar } from "../companies/CompanyAvatar";
+import type { Deal } from "../types";
+import { DealInputs } from "./DealInputs";
+
+export const DealEdit = ({ open, id }: { open: boolean; id?: string }) => {
+  const redirect = useRedirect();
+  const notify = useNotify();
+
+  const handleClose = () => {
+    redirect("/deals", undefined, undefined, undefined, {
+      _scrollToTop: false,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={() => handleClose()}>
+      <DialogContent className="lg:max-w-4xl p-4 overflow-y-auto max-h-9/10 top-1/20 translate-y-0">
+        {id ? (
+          <EditBase
+            id={id}
+            mutationMode="pessimistic"
+            mutationOptions={{
+              onSuccess: () => {
+                notify("Deal updated");
+                redirect(`/deals/${id}/show`, undefined, undefined, undefined, {
+                  _scrollToTop: false,
+                });
+              },
+            }}
+          >
+            <EditHeader />
+            <Form>
+              <DealInputs />
+              <FormToolbar />
+            </Form>
+          </EditBase>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+function EditHeader() {
+  const deal = useRecordContext<Deal>();
+  if (!deal) {
+    return null;
+  }
+
+  return (
+    <DialogTitle className="pb-0">
+      <div className="flex justify-between items-start mb-8">
+        <div className="flex items-center gap-4">
+          <ReferenceField source="company_id" reference="companies" link="show">
+            <CompanyAvatar />
+          </ReferenceField>
+          <h2 className="text-2xl font-semibold">Edit {deal.name} deal</h2>
+        </div>
+        <div className="flex gap-2 pr-12">
+          <DeleteButton />
+          <Button asChild variant="outline" className="h-9">
+            <Link to={`/deals/${deal.id}/show`}>Back to deal</Link>
+          </Button>
+        </div>
+      </div>
+    </DialogTitle>
+  );
+}

package/src/components/atomic-crm/deals/DealEmpty.tsx

@@ -0,0 +1,63 @@
+import { useGetList } from "ra-core";
+import { matchPath, useLocation, Link } from "react-router";
+import type { ReactNode } from "react";
+import { CreateButton } from "@/components/admin/create-button";
+import { Progress } from "@/components/ui/progress";
+
+import useAppBarHeight from "../misc/useAppBarHeight";
+import type { Contact } from "../types";
+import { DealCreate } from "./DealCreate";
+
+export const DealEmpty = ({ children }: { children?: ReactNode }) => {
+  const location = useLocation();
+  const matchCreate = matchPath("/deals/create", location.pathname);
+  const appbarHeight = useAppBarHeight();
+
+  // get Contact data
+  const { data: contacts, isPending: contactsLoading } = useGetList<Contact>(
+    "contacts",
+    {
+      pagination: { page: 1, perPage: 1 },
+    },
+  );
+
+  if (contactsLoading) return <Progress value={50} />;
+
+  return (
+    <div
+      className="flex flex-col justify-center items-center gap-12"
+      style={{
+        height: `calc(100dvh - ${appbarHeight}px)`,
+      }}
+    >
+      <img src="./img/empty.svg" alt="No deals found" />
+      {contacts && contacts.length > 0 ? (
+        <>
+          <div className="flex flex-col items-center gap-0">
+            <h3 className="text-lg font-bold">No deals found</h3>
+            <p className="text-sm text-center text-muted-foreground mb-4">
+              It seems your deal list is empty.
+            </p>
+          </div>
+          <div className="flex space-x-8">
+            <CreateButton label="Create deal" />
+          </div>
+          <DealCreate open={!!matchCreate} />
+          {children}
+        </>
+      ) : (
+        <div className="flex flex-col items-center gap-0">
+          <h3 className="text-lg font-bold">No deals found</h3>
+          <p className="text-sm text-center text-muted-foreground mb-4">
+            It seems your contact list is empty.
+            <br />
+            <Link to="/contacts/create" className="hover:underline">
+              Add your first contact
+            </Link>{" "}
+            before creating a deal.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/atomic-crm/deals/DealInputs.tsx

@@ -0,0 +1,103 @@
+import { required } from "ra-core";
+import { AutocompleteArrayInput } from "@/components/admin/autocomplete-array-input";
+import { ReferenceArrayInput } from "@/components/admin/reference-array-input";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { TextInput } from "@/components/admin/text-input";
+import { NumberInput } from "@/components/admin/number-input";
+import { DateInput } from "@/components/admin/date-input";
+import { SelectInput } from "@/components/admin/select-input";
+import { Separator } from "@/components/ui/separator";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+import { contactOptionText } from "../misc/ContactOption";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import { AutocompleteCompanyInput } from "../companies/AutocompleteCompanyInput.tsx";
+
+export const DealInputs = () => {
+  const isMobile = useIsMobile();
+  return (
+    <div className="flex flex-col gap-8">
+      <DealInfoInputs />
+
+      <div className={`flex gap-6 ${isMobile ? "flex-col" : "flex-row"}`}>
+        <DealLinkedToInputs />
+        <Separator orientation={isMobile ? "horizontal" : "vertical"} />
+        <DealMiscInputs />
+      </div>
+    </div>
+  );
+};
+
+const DealInfoInputs = () => {
+  return (
+    <div className="flex flex-col gap-4 flex-1">
+      <TextInput
+        source="name"
+        label="Deal name"
+        validate={required()}
+        helperText={false}
+      />
+      <TextInput source="description" multiline rows={3} helperText={false} />
+    </div>
+  );
+};
+
+const DealLinkedToInputs = () => {
+  return (
+    <div className="flex flex-col gap-4 flex-1">
+      <h3 className="text-base font-medium">Linked to</h3>
+      <ReferenceInput source="company_id" reference="companies">
+        <AutocompleteCompanyInput validate={required()} />
+      </ReferenceInput>
+
+      <ReferenceArrayInput source="contact_ids" reference="contacts_summary">
+        <AutocompleteArrayInput
+          label="Contacts"
+          optionText={contactOptionText}
+          helperText={false}
+        />
+      </ReferenceArrayInput>
+    </div>
+  );
+};
+
+const DealMiscInputs = () => {
+  const { dealStages, dealCategories } = useConfigurationContext();
+  return (
+    <div className="flex flex-col gap-4 flex-1">
+      <h3 className="text-base font-medium">Misc</h3>
+
+      <SelectInput
+        source="category"
+        label="Category"
+        choices={dealCategories.map((type) => ({
+          id: type,
+          name: type,
+        }))}
+        helperText={false}
+      />
+      <NumberInput
+        source="amount"
+        defaultValue={0}
+        helperText={false}
+        validate={required()}
+      />
+      <DateInput
+        validate={required()}
+        source="expected_closing_date"
+        helperText={false}
+        defaultValue={new Date().toISOString().split("T")[0]}
+      />
+      <SelectInput
+        source="stage"
+        choices={dealStages.map((stage) => ({
+          id: stage.value,
+          name: stage.label,
+        }))}
+        defaultValue="opportunity"
+        helperText={false}
+        validate={required()}
+      />
+    </div>
+  );
+};