realtimex-crm 0.1.2

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

@@ -0,0 +1,202 @@
+import { ResponsiveBar } from "@nivo/bar";
+import { format, startOfMonth } from "date-fns";
+import { DollarSign } from "lucide-react";
+import { useGetList } from "ra-core";
+import { memo, useMemo } from "react";
+
+import type { Deal } from "../types";
+
+const multiplier = {
+  opportunity: 0.2,
+  "proposal-sent": 0.5,
+  "in-negociation": 0.8,
+  delayed: 0.3,
+};
+
+const threeMonthsAgo = new Date(
+  new Date().setMonth(new Date().getMonth() - 6),
+).toISOString();
+
+const DEFAULT_LOCALE = "en-US";
+const CURRENCY = "USD";
+
+export const DealsChart = memo(() => {
+  const acceptedLanguages = navigator
+    ? navigator.languages || [navigator.language]
+    : [DEFAULT_LOCALE];
+
+  const { data, isPending } = useGetList<Deal>("deals", {
+    pagination: { perPage: 100, page: 1 },
+    sort: {
+      field: "created_at",
+      order: "ASC",
+    },
+    filter: {
+      "created_at@gte": threeMonthsAgo,
+    },
+  });
+  const months = useMemo(() => {
+    if (!data) return [];
+    const dealsByMonth = data.reduce((acc, deal) => {
+      const month = startOfMonth(deal.created_at ?? new Date()).toISOString();
+      if (!acc[month]) {
+        acc[month] = [];
+      }
+      acc[month].push(deal);
+      return acc;
+    }, {} as any);
+
+    const amountByMonth = Object.keys(dealsByMonth).map((month) => {
+      return {
+        date: format(month, "MMM"),
+        won: dealsByMonth[month]
+          .filter((deal: Deal) => deal.stage === "won")
+          .reduce((acc: number, deal: Deal) => {
+            acc += deal.amount;
+            return acc;
+          }, 0),
+        pending: dealsByMonth[month]
+          .filter((deal: Deal) => !["won", "lost"].includes(deal.stage))
+          .reduce((acc: number, deal: Deal) => {
+            // @ts-expect-error - multiplier type issue
+            acc += deal.amount * multiplier[deal.stage];
+            return acc;
+          }, 0),
+        lost: dealsByMonth[month]
+          .filter((deal: Deal) => deal.stage === "lost")
+          .reduce((acc: number, deal: Deal) => {
+            acc -= deal.amount;
+            return acc;
+          }, 0),
+      };
+    });
+
+    return amountByMonth;
+  }, [data]);
+
+  if (isPending) return null; // FIXME return skeleton instead
+  const range = months.reduce(
+    (acc, month) => {
+      acc.min = Math.min(acc.min, month.lost);
+      acc.max = Math.max(acc.max, month.won + month.pending);
+      return acc;
+    },
+    { min: 0, max: 0 },
+  );
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center mb-4">
+        <div className="mr-3 flex">
+          <DollarSign className="text-muted-foreground w-6 h-6" />
+        </div>
+        <h2 className="text-xl font-semibold text-muted-foreground">
+          Upcoming Deal Revenue
+        </h2>
+      </div>
+      <div className="h-[400px]">
+        <ResponsiveBar
+          data={months}
+          indexBy="date"
+          keys={["won", "pending", "lost"]}
+          colors={["#61cdbb", "#97e3d5", "#e25c3b"]}
+          margin={{ top: 30, right: 50, bottom: 30, left: 0 }}
+          padding={0.3}
+          valueScale={{
+            type: "linear",
+            min: range.min * 1.2,
+            max: range.max * 1.2,
+          }}
+          indexScale={{ type: "band", round: true }}
+          enableGridX={true}
+          enableGridY={false}
+          enableLabel={false}
+          tooltip={({ value, indexValue }) => (
+            <div className="p-2 bg-secondary rounded shadow inline-flex items-center gap-1 text-secondary-foreground">
+              <strong>{indexValue}: </strong>&nbsp;{value > 0 ? "+" : ""}
+              {value.toLocaleString(acceptedLanguages.at(0) ?? DEFAULT_LOCALE, {
+                style: "currency",
+                currency: CURRENCY,
+              })}
+            </div>
+          )}
+          axisTop={{
+            tickSize: 0,
+            tickPadding: 12,
+            style: {
+              ticks: {
+                text: {
+                  fill: "var(--color-muted-foreground)",
+                },
+              },
+              legend: {
+                text: {
+                  fill: "var(--color-muted-foreground)",
+                },
+              },
+            },
+          }}
+          axisBottom={{
+            legendPosition: "middle",
+            legendOffset: 50,
+            tickSize: 0,
+            tickPadding: 12,
+            style: {
+              ticks: {
+                text: {
+                  fill: "var(--color-muted-foreground)",
+                },
+              },
+              legend: {
+                text: {
+                  fill: "var(--color-muted-foreground)",
+                },
+              },
+            },
+          }}
+          axisLeft={null}
+          axisRight={{
+            format: (v: any) => `${Math.abs(v / 1000)}k`,
+            tickValues: 8,
+            style: {
+              ticks: {
+                text: {
+                  fill: "var(--color-muted-foreground)",
+                },
+              },
+              legend: {
+                text: {
+                  fill: "var(--color-muted-foreground)",
+                },
+              },
+            },
+          }}
+          markers={
+            [
+              {
+                axis: "y",
+                value: 0,
+                lineStyle: { strokeOpacity: 0 },
+                textStyle: { fill: "#2ebca6" },
+                legend: "Won",
+                legendPosition: "top-left",
+                legendOrientation: "vertical",
+              },
+              {
+                axis: "y",
+                value: 0,
+                lineStyle: {
+                  stroke: "#f47560",
+                  strokeWidth: 1,
+                },
+                textStyle: { fill: "#e25c3b" },
+                legend: "Lost",
+                legendPosition: "bottom-left",
+                legendOrientation: "vertical",
+              },
+            ] as any
+          }
+        />
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,90 @@
+import { DollarSign } from "lucide-react";
+import { useGetIdentity, useGetList } from "ra-core";
+import { Link } from "react-router";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { Card } from "@/components/ui/card";
+
+import { SimpleList } from "../simple-list/SimpleList";
+import { CompanyAvatar } from "../companies/CompanyAvatar";
+import { findDealLabel } from "../deals/deal";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import type { Deal } from "../types";
+
+/**
+ * This component displays the deals pipeline for the current user.
+ * It's currently not used in the application but can be added to the dashboard.
+ */
+export const DealsPipeline = () => {
+  const { identity } = useGetIdentity();
+  const { dealStages, dealPipelineStatuses } = useConfigurationContext();
+  const { data, total, isPending } = useGetList<Deal>(
+    "deals",
+    {
+      pagination: { page: 1, perPage: 10 },
+      sort: { field: "last_seen", order: "DESC" },
+      filter: { "stage@neq": "lost", sales_id: identity?.id },
+    },
+    { enabled: Number.isInteger(identity?.id) },
+  );
+
+  const getOrderedDeals = (data?: Deal[]): Deal[] | undefined => {
+    if (!data) {
+      return;
+    }
+    const deals: Deal[] = [];
+    dealStages
+      .filter((stage) => !dealPipelineStatuses.includes(stage.value))
+      .forEach((stage) =>
+        data
+          .filter((deal) => deal.stage === stage.value)
+          .forEach((deal) => deals.push(deal)),
+      );
+    return deals;
+  };
+
+  return (
+    <>
+      <div className="flex items-center mb-4">
+        <div className="ml-8 mr-8 flex">
+          <DollarSign className="text-muted-foreground w-6 h-6" />
+        </div>
+        <Link
+          className="text-xl font-semibold text-muted-foreground hover:underline"
+          to="/deals"
+        >
+          Deals Pipeline
+        </Link>
+      </div>
+      <Card>
+        <SimpleList<Deal>
+          resource="deals"
+          linkType="show"
+          data={getOrderedDeals(data)}
+          total={total}
+          isPending={isPending}
+          primaryText={(deal) => deal.name}
+          secondaryText={(deal) =>
+            `${deal.amount.toLocaleString("en-US", {
+              notation: "compact",
+              style: "currency",
+              currency: "USD",
+              currencyDisplay: "narrowSymbol",
+              minimumSignificantDigits: 3,
+            })} , ${findDealLabel(dealStages, deal.stage)}`
+          }
+          leftAvatar={(deal) => (
+            <ReferenceField
+              source="company_id"
+              record={deal}
+              reference="companies"
+              resource="deals"
+              link={false}
+            >
+              <CompanyAvatar width={20} height={20} />
+            </ReferenceField>
+          )}
+        />
+      </Card>
+    </>
+  );
+};

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

@@ -0,0 +1,92 @@
+import { Plus, Users } from "lucide-react";
+import { useGetIdentity, useGetList } from "ra-core";
+import { Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { SimpleList } from "../simple-list/SimpleList";
+import { Avatar } from "../contacts/Avatar";
+import type { Contact } from "../types";
+
+export const HotContacts = () => {
+  const { identity } = useGetIdentity();
+  const {
+    data: contactData,
+    total: contactTotal,
+    isPending: contactsLoading,
+  } = useGetList<Contact>(
+    "contacts",
+    {
+      pagination: { page: 1, perPage: 10 },
+      sort: { field: "last_seen", order: "DESC" },
+      filter: { status: "hot", sales_id: identity?.id },
+    },
+    { enabled: Number.isInteger(identity?.id) },
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center">
+        <div className="mr-3 flex">
+          <Users className="text-muted-foreground w-6 h-6" />
+        </div>
+        <h2 className="text-xl font-semibold text-muted-foreground">
+          Hot Contacts
+        </h2>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="ml-auto text-muted-foreground"
+                asChild
+              >
+                <Link to="/contacts/create">
+                  <Plus className="w-4 h-4 text-primary" />
+                </Link>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Create contact</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <Card className="py-0">
+        <SimpleList<Contact>
+          linkType="show"
+          data={contactData}
+          total={contactTotal}
+          isPending={contactsLoading}
+          resource="contacts"
+          className="[&>li:first-child>a]:rounded-t-xl [&>li:last-child>a]:rounded-b-xl"
+          primaryText={(contact) =>
+            `${contact.first_name} ${contact.last_name}`
+          }
+          secondaryText={(contact) => (
+            <>
+              {contact.title} at {contact.company_name}
+            </>
+          )}
+          leftAvatar={(contact) => <Avatar record={contact} />}
+          empty={
+            <div className="p-4">
+              <p className="text-sm mb-4">
+                Contacts with a "hot" status will appear here.
+              </p>
+              <p className="text-sm">
+                Change the status of a contact by adding a note to that contact
+                and clicking on "show options".
+              </p>
+            </div>
+          }
+        />
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,116 @@
+import { formatDistance } from "date-fns";
+import { FileText } from "lucide-react";
+import { useGetIdentity, useGetList } from "ra-core";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { TextField } from "@/components/admin/text-field";
+import { Card, CardContent } from "@/components/ui/card";
+
+import type { Contact, ContactNote } from "../types";
+
+export const LatestNotes = () => {
+  const { identity } = useGetIdentity();
+  const { data: contactNotesData, isPending: contactNotesLoading } = useGetList(
+    "contactNotes",
+    {
+      pagination: { page: 1, perPage: 5 },
+      sort: { field: "date", order: "DESC" },
+      filter: { sales_id: identity?.id },
+    },
+    { enabled: Number.isInteger(identity?.id) },
+  );
+  const { data: dealNotesData, isPending: dealNotesLoading } = useGetList(
+    "dealNotes",
+    {
+      pagination: { page: 1, perPage: 5 },
+      sort: { field: "date", order: "DESC" },
+      filter: { sales_id: identity?.id },
+    },
+    { enabled: Number.isInteger(identity?.id) },
+  );
+  if (contactNotesLoading || dealNotesLoading) {
+    return null;
+  }
+  // TypeScript guards
+  if (!contactNotesData || !dealNotesData) {
+    return null;
+  }
+
+  const allNotes = ([] as any[])
+    .concat(
+      contactNotesData.map((note) => ({
+        ...note,
+        type: "contactNote",
+      })),
+      dealNotesData.map((note) => ({ ...note, type: "dealNote" })),
+    )
+    .sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf())
+    .slice(0, 5);
+
+  return (
+    <div>
+      <div className="flex items-center mb-4">
+        <div className="ml-8 mr-8 flex">
+          <FileText className="text-muted-foreground w-6 h-6" />
+        </div>
+        <h2 className="text-xl font-semibold text-muted-foreground">
+          My Latest Notes
+        </h2>
+      </div>
+      <Card>
+        <CardContent>
+          {allNotes.map((note) => (
+            <div
+              id={`${note.type}_${note.id}`}
+              key={`${note.type}_${note.id}`}
+              className="mb-8"
+            >
+              <div className="text-sm text-muted-foreground">
+                on{" "}
+                {note.type === "dealNote" ? (
+                  <Deal note={note} />
+                ) : (
+                  <Contact note={note} />
+                )}
+                , added{" "}
+                {formatDistance(note.date, new Date(), {
+                  addSuffix: true,
+                })}
+              </div>
+              <div>
+                <p className="text-sm line-clamp-3 overflow-hidden">
+                  {note.text}
+                </p>
+              </div>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const Deal = ({ note }: any) => (
+  <>
+    Deal{" "}
+    <ReferenceField
+      record={note}
+      source="deal_id"
+      reference="deals"
+      link="show"
+    >
+      <TextField source="name" />
+    </ReferenceField>
+  </>
+);
+
+const Contact = ({ note }: any) => (
+  <>
+    Contact{" "}
+    <ReferenceField<ContactNote, Contact>
+      record={note}
+      source="contact_id"
+      reference="contacts"
+      link="show"
+    />
+  </>
+);

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

@@ -0,0 +1,69 @@
+import {
+  endOfToday,
+  endOfTomorrow,
+  endOfWeek,
+  getDay,
+  startOfToday,
+} from "date-fns";
+import { CheckSquare } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+import { AddTask } from "../tasks/AddTask";
+import { TasksListEmpty } from "./TasksListEmpty";
+import { TasksListFilter } from "./TasksListFilter";
+
+const today = new Date();
+const todayDayOfWeek = getDay(today);
+const isBeforeFriday = todayDayOfWeek < 5; // Friday is represented by 5
+const startOfTodayDateISO = startOfToday().toISOString();
+const endOfTodayDateISO = endOfToday().toISOString();
+const endOfTomorrowDateISO = endOfTomorrow().toISOString();
+const endOfWeekDateISO = endOfWeek(today, { weekStartsOn: 0 }).toISOString();
+
+const taskFilters = {
+  overdue: { "done_date@is": null, "due_date@lt": startOfTodayDateISO },
+  today: {
+    "done_date@is": null,
+    "due_date@gte": startOfTodayDateISO,
+    "due_date@lte": endOfTodayDateISO,
+  },
+  tomorrow: {
+    "done_date@is": null,
+    "due_date@gt": endOfTodayDateISO,
+    "due_date@lt": endOfTomorrowDateISO,
+  },
+  thisWeek: {
+    "done_date@is": null,
+    "due_date@gte": endOfTomorrowDateISO,
+    "due_date@lte": endOfWeekDateISO,
+  },
+  later: { "done_date@is": null, "due_date@gt": endOfWeekDateISO },
+};
+
+export const TasksList = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center">
+        <div className="mr-3 flex">
+          <CheckSquare className="text-muted-foreground w-6 h-6" />
+        </div>
+        <h2 className="text-xl font-semibold text-muted-foreground flex-1">
+          Upcoming Tasks
+        </h2>
+        <AddTask display="icon" selectContact />
+      </div>
+      <Card className="p-4 mb-2">
+        <div className="flex flex-col gap-4">
+          <TasksListEmpty />
+          <TasksListFilter title="Overdue" filter={taskFilters.overdue} />
+          <TasksListFilter title="Today" filter={taskFilters.today} />
+          <TasksListFilter title="Tomorrow" filter={taskFilters.tomorrow} />
+          {isBeforeFriday && (
+            <TasksListFilter title="This week" filter={taskFilters.thisWeek} />
+          )}
+          <TasksListFilter title="Later" filter={taskFilters.later} />
+        </div>
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { useGetIdentity, useGetList } from "ra-core";
+
+export const TasksListEmpty = () => {
+  const { identity } = useGetIdentity();
+
+  const { total } = useGetList(
+    "tasks",
+    {
+      pagination: { page: 1, perPage: 1 },
+      filter: {
+        sales_id: identity?.id,
+      },
+    },
+    { enabled: !!identity },
+  );
+
+  if (total) return null;
+
+  return (
+    <p className="text-sm">Tasks added to your contacts will appear here.</p>
+  );
+};

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

@@ -0,0 +1,72 @@
+import {
+  ListContextProvider,
+  ResourceContextProvider,
+  useGetIdentity,
+  useGetList,
+  useList,
+} from "ra-core";
+
+import { TasksIterator } from "../tasks/TasksIterator";
+
+export const TasksListFilter = ({
+  title,
+  filter,
+}: {
+  title: string;
+  filter: any;
+}) => {
+  const { identity } = useGetIdentity();
+
+  const {
+    data: tasks,
+    total,
+    isPending,
+  } = useGetList(
+    "tasks",
+    {
+      pagination: { page: 1, perPage: 100 },
+      sort: { field: "due_date", order: "ASC" },
+      filter: {
+        ...filter,
+        sales_id: identity?.id,
+      },
+    },
+    { enabled: !!identity },
+  );
+
+  const listContext = useList({
+    data: tasks,
+    isPending,
+    resource: "tasks",
+    perPage: 5,
+  });
+
+  if (isPending || !tasks || !total) return null;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-xs uppercase tracking-wider text-muted-foreground font-medium mb-2">
+        {title}
+      </p>
+      <ResourceContextProvider value="tasks">
+        <ListContextProvider value={listContext}>
+          <TasksIterator showContact />
+        </ListContextProvider>
+      </ResourceContextProvider>
+      {total > listContext.perPage && (
+        <div className="flex justify-center">
+          <a
+            href="#"
+            onClick={(e) => {
+              listContext.setPerPage(listContext.perPage + 10);
+              e.preventDefault();
+            }}
+            className="text-sm underline hover:no-underline"
+          >
+            Load more
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};