realtimex-crm 0.1.2

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

@@ -0,0 +1,95 @@
+import { useGetIdentity, useListContext } from "ra-core";
+import { matchPath, useLocation } from "react-router";
+import { AutocompleteInput } from "@/components/admin/autocomplete-input";
+import { CreateButton } from "@/components/admin/create-button";
+import { ExportButton } from "@/components/admin/export-button";
+import { List } from "@/components/admin/list";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { FilterButton } from "@/components/admin/filter-form";
+import { SearchInput } from "@/components/admin/search-input";
+import { SelectInput } from "@/components/admin/select-input";
+
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import { TopToolbar } from "../layout/TopToolbar";
+import { DealArchivedList } from "./DealArchivedList";
+import { DealCreate } from "./DealCreate";
+import { DealEdit } from "./DealEdit";
+import { DealEmpty } from "./DealEmpty";
+import { DealListContent } from "./DealListContent";
+import { DealShow } from "./DealShow";
+import { OnlyMineInput } from "./OnlyMineInput";
+
+const DealList = () => {
+  const { identity } = useGetIdentity();
+  const { dealCategories } = useConfigurationContext();
+
+  if (!identity) return null;
+
+  const dealFilters = [
+    <SearchInput source="q" alwaysOn />,
+    <ReferenceInput source="company_id" reference="companies">
+      <AutocompleteInput label={false} placeholder="Company" />
+    </ReferenceInput>,
+    <SelectInput
+      source="category"
+      emptyText="Category"
+      choices={dealCategories.map((type) => ({ id: type, name: type }))}
+    />,
+    <OnlyMineInput source="sales_id" alwaysOn />,
+  ];
+
+  return (
+    <List
+      perPage={100}
+      filter={{ "archived_at@is": null }}
+      title={false}
+      sort={{ field: "index", order: "DESC" }}
+      filters={dealFilters}
+      actions={<DealActions />}
+      pagination={null}
+    >
+      <DealLayout />
+    </List>
+  );
+};
+
+const DealLayout = () => {
+  const location = useLocation();
+  const matchCreate = matchPath("/deals/create", location.pathname);
+  const matchShow = matchPath("/deals/:id/show", location.pathname);
+  const matchEdit = matchPath("/deals/:id", location.pathname);
+
+  const { data, isPending, filterValues } = useListContext();
+  const hasFilters = filterValues && Object.keys(filterValues).length > 0;
+
+  if (isPending) return null;
+  if (!data?.length && !hasFilters)
+    return (
+      <>
+        <DealEmpty>
+          <DealShow open={!!matchShow} id={matchShow?.params.id} />
+          <DealArchivedList />
+        </DealEmpty>
+      </>
+    );
+
+  return (
+    <div className="w-full">
+      <DealListContent />
+      <DealArchivedList />
+      <DealCreate open={!!matchCreate} />
+      <DealEdit open={!!matchEdit && !matchCreate} id={matchEdit?.params.id} />
+      <DealShow open={!!matchShow} id={matchShow?.params.id} />
+    </div>
+  );
+};
+
+const DealActions = () => (
+  <TopToolbar>
+    <FilterButton />
+    <ExportButton />
+    <CreateButton label="New Deal" />
+  </TopToolbar>
+);
+
+export default DealList;

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

@@ -0,0 +1,245 @@
+import { DragDropContext, type OnDragEndResponder } from "@hello-pangea/dnd";
+import isEqual from "lodash/isEqual";
+import { useDataProvider, useListContext, type DataProvider } from "ra-core";
+import { useEffect, useState } from "react";
+
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import type { Deal } from "../types";
+import { DealColumn } from "./DealColumn";
+import type { DealsByStage } from "./stages";
+import { getDealsByStage } from "./stages";
+
+export const DealListContent = () => {
+  const { dealStages } = useConfigurationContext();
+  const { data: unorderedDeals, isPending, refetch } = useListContext<Deal>();
+  const dataProvider = useDataProvider();
+
+  const [dealsByStage, setDealsByStage] = useState<DealsByStage>(
+    getDealsByStage([], dealStages),
+  );
+
+  useEffect(() => {
+    if (unorderedDeals) {
+      const newDealsByStage = getDealsByStage(unorderedDeals, dealStages);
+      if (!isEqual(newDealsByStage, dealsByStage)) {
+        setDealsByStage(newDealsByStage);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unorderedDeals]);
+
+  if (isPending) return null;
+
+  const onDragEnd: OnDragEndResponder = (result) => {
+    const { destination, source } = result;
+
+    if (!destination) {
+      return;
+    }
+
+    if (
+      destination.droppableId === source.droppableId &&
+      destination.index === source.index
+    ) {
+      return;
+    }
+
+    const sourceStage = source.droppableId;
+    const destinationStage = destination.droppableId;
+    const sourceDeal = dealsByStage[sourceStage][source.index]!;
+    const destinationDeal = dealsByStage[destinationStage][
+      destination.index
+    ] ?? {
+      stage: destinationStage,
+      index: undefined, // undefined if dropped after the last item
+    };
+
+    // compute local state change synchronously
+    setDealsByStage(
+      updateDealStageLocal(
+        sourceDeal,
+        { stage: sourceStage, index: source.index },
+        { stage: destinationStage, index: destination.index },
+        dealsByStage,
+      ),
+    );
+
+    // persist the changes
+    updateDealStage(sourceDeal, destinationDeal, dataProvider).then(() => {
+      refetch();
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <div className="flex gap-4">
+        {dealStages.map((stage) => (
+          <DealColumn
+            stage={stage.value}
+            deals={dealsByStage[stage.value]}
+            key={stage.value}
+          />
+        ))}
+      </div>
+    </DragDropContext>
+  );
+};
+
+const updateDealStageLocal = (
+  sourceDeal: Deal,
+  source: { stage: string; index: number },
+  destination: {
+    stage: string;
+    index?: number; // undefined if dropped after the last item
+  },
+  dealsByStage: DealsByStage,
+) => {
+  if (source.stage === destination.stage) {
+    // moving deal inside the same column
+    const column = dealsByStage[source.stage];
+    column.splice(source.index, 1);
+    column.splice(destination.index ?? column.length + 1, 0, sourceDeal);
+    return {
+      ...dealsByStage,
+      [destination.stage]: column,
+    };
+  } else {
+    // moving deal across columns
+    const sourceColumn = dealsByStage[source.stage];
+    const destinationColumn = dealsByStage[destination.stage];
+    sourceColumn.splice(source.index, 1);
+    destinationColumn.splice(
+      destination.index ?? destinationColumn.length + 1,
+      0,
+      sourceDeal,
+    );
+    return {
+      ...dealsByStage,
+      [source.stage]: sourceColumn,
+      [destination.stage]: destinationColumn,
+    };
+  }
+};
+
+const updateDealStage = async (
+  source: Deal,
+  destination: {
+    stage: string;
+    index?: number; // undefined if dropped after the last item
+  },
+  dataProvider: DataProvider,
+) => {
+  if (source.stage === destination.stage) {
+    // moving deal inside the same column
+    // Fetch all the deals in this stage (because the list may be filtered, but we need to update even non-filtered deals)
+    const { data: columnDeals } = await dataProvider.getList("deals", {
+      sort: { field: "index", order: "ASC" },
+      pagination: { page: 1, perPage: 100 },
+      filter: { stage: source.stage },
+    });
+    const destinationIndex = destination.index ?? columnDeals.length + 1;
+
+    if (source.index > destinationIndex) {
+      // deal moved up, eg
+      // dest   src
+      //  <------
+      // [4, 7, 23, 5]
+      await Promise.all([
+        // for all deals between destinationIndex and source.index, increase the index
+        ...columnDeals
+          .filter(
+            (deal) =>
+              deal.index >= destinationIndex && deal.index < source.index,
+          )
+          .map((deal) =>
+            dataProvider.update("deals", {
+              id: deal.id,
+              data: { index: deal.index + 1 },
+              previousData: deal,
+            }),
+          ),
+        // for the deal that was moved, update its index
+        dataProvider.update("deals", {
+          id: source.id,
+          data: { index: destinationIndex },
+          previousData: source,
+        }),
+      ]);
+    } else {
+      // deal moved down, e.g
+      // src   dest
+      //  ------>
+      // [4, 7, 23, 5]
+      await Promise.all([
+        // for all deals between source.index and destinationIndex, decrease the index
+        ...columnDeals
+          .filter(
+            (deal) =>
+              deal.index <= destinationIndex && deal.index > source.index,
+          )
+          .map((deal) =>
+            dataProvider.update("deals", {
+              id: deal.id,
+              data: { index: deal.index - 1 },
+              previousData: deal,
+            }),
+          ),
+        // for the deal that was moved, update its index
+        dataProvider.update("deals", {
+          id: source.id,
+          data: { index: destinationIndex },
+          previousData: source,
+        }),
+      ]);
+    }
+  } else {
+    // moving deal across columns
+    // Fetch all the deals in both stages (because the list may be filtered, but we need to update even non-filtered deals)
+    const [{ data: sourceDeals }, { data: destinationDeals }] =
+      await Promise.all([
+        dataProvider.getList("deals", {
+          sort: { field: "index", order: "ASC" },
+          pagination: { page: 1, perPage: 100 },
+          filter: { stage: source.stage },
+        }),
+        dataProvider.getList("deals", {
+          sort: { field: "index", order: "ASC" },
+          pagination: { page: 1, perPage: 100 },
+          filter: { stage: destination.stage },
+        }),
+      ]);
+    const destinationIndex = destination.index ?? destinationDeals.length + 1;
+
+    await Promise.all([
+      // decrease index on the deals after the source index in the source columns
+      ...sourceDeals
+        .filter((deal) => deal.index > source.index)
+        .map((deal) =>
+          dataProvider.update("deals", {
+            id: deal.id,
+            data: { index: deal.index - 1 },
+            previousData: deal,
+          }),
+        ),
+      // increase index on the deals after the destination index in the destination columns
+      ...destinationDeals
+        .filter((deal) => deal.index >= destinationIndex)
+        .map((deal) =>
+          dataProvider.update("deals", {
+            id: deal.id,
+            data: { index: deal.index + 1 },
+            previousData: deal,
+          }),
+        ),
+      // change the dragged deal to take the destination index and column
+      dataProvider.update("deals", {
+        id: source.id,
+        data: {
+          index: destinationIndex,
+          stage: destination.stage,
+        },
+        previousData: source,
+      }),
+    ]);
+  }
+};

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

@@ -0,0 +1,260 @@
+import { useMutation } from "@tanstack/react-query";
+import { format, isValid } from "date-fns";
+import { Archive, ArchiveRestore } from "lucide-react";
+import {
+  ShowBase,
+  useDataProvider,
+  useNotify,
+  useRecordContext,
+  useRedirect,
+  useRefresh,
+  useUpdate,
+} from "ra-core";
+import { DeleteButton } from "@/components/admin/delete-button";
+import { EditButton } from "@/components/admin/edit-button";
+import { ReferenceArrayField } from "@/components/admin/reference-array-field";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { ReferenceManyField } from "@/components/admin/reference-many-field";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+
+import { CompanyAvatar } from "../companies/CompanyAvatar";
+import { NoteCreate } from "../notes/NoteCreate";
+import { NotesIterator } from "../notes/NotesIterator";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import type { Deal } from "../types";
+import { ContactList } from "./ContactList";
+import { findDealLabel } from "./deal";
+
+export const DealShow = ({ open, id }: { open: boolean; id?: string }) => {
+  const redirect = useRedirect();
+  const handleClose = () => {
+    redirect("list", "deals");
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent className="lg:max-w-4xl p-4 overflow-y-auto max-h-9/10 top-1/20 translate-y-0">
+        {id ? (
+          <ShowBase id={id}>
+            <DealShowContent />
+          </ShowBase>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const DealShowContent = () => {
+  const { dealStages } = useConfigurationContext();
+  const record = useRecordContext<Deal>();
+  if (!record) return null;
+
+  return (
+    <>
+      <div className="space-y-2">
+        {record.archived_at ? <ArchivedTitle /> : null}
+        <div className="flex-1">
+          <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">{record.name}</h2>
+            </div>
+            <div className={`flex gap-2 ${record.archived_at ? "" : "pr-12"}`}>
+              {record.archived_at ? (
+                <>
+                  <UnarchiveButton record={record} />
+                  <DeleteButton />
+                </>
+              ) : (
+                <>
+                  <ArchiveButton record={record} />
+                  <EditButton />
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className="flex gap-8 m-4">
+            <div className="flex flex-col mr-10">
+              <span className="text-xs text-muted-foreground tracking-wide">
+                Expected closing date
+              </span>
+              <div className="flex items-center gap-2">
+                <span className="text-sm">
+                  {isValid(new Date(record.expected_closing_date))
+                    ? format(new Date(record.expected_closing_date), "PP")
+                    : "Invalid date"}
+                </span>
+                {new Date(record.expected_closing_date) < new Date() ? (
+                  <Badge variant="destructive">Past</Badge>
+                ) : null}
+              </div>
+            </div>
+
+            <div className="flex flex-col mr-10">
+              <span className="text-xs text-muted-foreground tracking-wide">
+                Budget
+              </span>
+              <span className="text-sm">
+                {record.amount.toLocaleString("en-US", {
+                  notation: "compact",
+                  style: "currency",
+                  currency: "USD",
+                  currencyDisplay: "narrowSymbol",
+                  minimumSignificantDigits: 3,
+                })}
+              </span>
+            </div>
+
+            {record.category && (
+              <div className="flex flex-col mr-10">
+                <span className="text-xs text-muted-foreground tracking-wide">
+                  Category
+                </span>
+                <span className="text-sm">{record.category}</span>
+              </div>
+            )}
+
+            <div className="flex flex-col mr-10">
+              <span className="text-xs text-muted-foreground tracking-wide">
+                Stage
+              </span>
+              <span className="text-sm">
+                {findDealLabel(dealStages, record.stage)}
+              </span>
+            </div>
+          </div>
+
+          {!!record.contact_ids?.length && (
+            <div className="m-4">
+              <div className="flex flex-col min-h-12 mr-10">
+                <span className="text-xs text-muted-foreground tracking-wide">
+                  Contacts
+                </span>
+                <ReferenceArrayField
+                  source="contact_ids"
+                  reference="contacts_summary"
+                >
+                  <ContactList />
+                </ReferenceArrayField>
+              </div>
+            </div>
+          )}
+
+          {record.description && (
+            <div className="m-4 whitespace-pre-line">
+              <span className="text-xs text-muted-foreground tracking-wide">
+                Description
+              </span>
+              <p className="text-sm leading-6">{record.description}</p>
+            </div>
+          )}
+
+          <div className="m-4">
+            <Separator className="mb-4" />
+            <ReferenceManyField
+              target="deal_id"
+              reference="dealNotes"
+              sort={{ field: "date", order: "DESC" }}
+              empty={<NoteCreate reference={"deals"} />}
+            >
+              <NotesIterator reference="deals" />
+            </ReferenceManyField>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const ArchivedTitle = () => (
+  <div className="bg-orange-500 px-6 py-4">
+    <h3 className="text-lg font-bold text-white">Archived Deal</h3>
+  </div>
+);
+
+const ArchiveButton = ({ record }: { record: Deal }) => {
+  const [update] = useUpdate();
+  const redirect = useRedirect();
+  const notify = useNotify();
+  const refresh = useRefresh();
+  const handleClick = () => {
+    update(
+      "deals",
+      {
+        id: record.id,
+        data: { archived_at: new Date().toISOString() },
+        previousData: record,
+      },
+      {
+        onSuccess: () => {
+          redirect("list", "deals");
+          notify("Deal archived", { type: "info", undoable: false });
+          refresh();
+        },
+        onError: () => {
+          notify("Error: deal not archived", { type: "error" });
+        },
+      },
+    );
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      size="sm"
+      variant="outline"
+      className="flex items-center gap-2 h-9"
+    >
+      <Archive className="w-4 h-4" />
+      Archive
+    </Button>
+  );
+};
+
+const UnarchiveButton = ({ record }: { record: Deal }) => {
+  const dataProvider = useDataProvider();
+  const redirect = useRedirect();
+  const notify = useNotify();
+  const refresh = useRefresh();
+
+  const { mutate } = useMutation({
+    mutationFn: () => dataProvider.unarchiveDeal(record),
+    onSuccess: () => {
+      redirect("list", "deals");
+      notify("Deal unarchived", {
+        type: "info",
+        undoable: false,
+      });
+      refresh();
+    },
+    onError: () => {
+      notify("Error: deal not unarchived", { type: "error" });
+    },
+  });
+
+  const handleClick = () => {
+    mutate();
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      size="sm"
+      variant="outline"
+      className="flex items-center gap-2 h-9"
+    >
+      <ArchiveRestore className="w-4 h-4" />
+      Send back to the board
+    </Button>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { useGetIdentity, useListFilterContext } from "ra-core";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+export const OnlyMineInput = (_: { alwaysOn: boolean; source: string }) => {
+  const { filterValues, displayedFilters, setFilters } = useListFilterContext();
+  const { identity } = useGetIdentity();
+
+  const handleChange = () => {
+    const newFilterValues = { ...filterValues };
+    if (typeof filterValues.sales_id !== "undefined") {
+      delete newFilterValues.sales_id;
+    } else {
+      newFilterValues.sales_id = identity && identity?.id;
+    }
+    setFilters(newFilterValues, displayedFilters);
+  };
+  return (
+    <div className="mt-auto pb-2.25">
+      <div className="flex items-center space-x-2">
+        <Switch
+          id="only-mine"
+          checked={typeof filterValues.sales_id !== "undefined"}
+          onCheckedChange={handleChange}
+        />
+        <Label htmlFor="only-mine">Only companies I manage</Label>
+      </div>
+    </div>
+  );
+};

package/src/components/atomic-crm/deals/deal.ts

@@ -0,0 +1,5 @@
+import type { DealStage } from "../types";
+
+export const findDealLabel = (dealStages: DealStage[], dealValue: string) => {
+  return dealStages.find((dealStage) => dealStage.value === dealValue)?.label;
+};

package/src/components/atomic-crm/deals/dealUtils.ts

@@ -0,0 +1,26 @@
+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/index.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+const DealList = React.lazy(() => import("./DealList"));
+
+export default {
+  list: DealList,
+};