realtimex-crm 0.1.2

package/src/components/atomic-crm/companies/CompanyListFilter.tsx

@@ -0,0 +1,55 @@
+import { Building, Truck, Users } from "lucide-react";
+import { FilterLiveForm, useGetIdentity } from "ra-core";
+import { ToggleFilterButton } from "@/components/admin/toggle-filter-button";
+import { SearchInput } from "@/components/admin/search-input";
+
+import { FilterCategory } from "../filters/FilterCategory";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import { sizes } from "./sizes";
+
+export const CompanyListFilter = () => {
+  const { identity } = useGetIdentity();
+  const { companySectors } = useConfigurationContext();
+  const sectors = companySectors.map((sector) => ({
+    id: sector,
+    name: sector,
+  }));
+  return (
+    <div className="w-52 min-w-52 flex flex-col gap-8">
+      <FilterLiveForm>
+        <SearchInput source="q" />
+      </FilterLiveForm>
+
+      <FilterCategory icon={<Building className="h-4 w-4" />} label="Size">
+        {sizes.map((size) => (
+          <ToggleFilterButton
+            className="w-full justify-between"
+            label={size.name}
+            value={{ size: size.id }}
+          />
+        ))}
+      </FilterCategory>
+
+      <FilterCategory icon={<Truck className="h-4 w-4" />} label="Sector">
+        {sectors.map((sector) => (
+          <ToggleFilterButton
+            className="w-full justify-between"
+            label={sector.name}
+            value={{ sector: sector.id }}
+          />
+        ))}
+      </FilterCategory>
+
+      <FilterCategory
+        icon={<Users className="h-4 w-4" />}
+        label="Account Manager"
+      >
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label={"Me"}
+          value={{ sales_id: identity?.id }}
+        />
+      </FilterCategory>
+    </div>
+  );
+};

package/src/components/atomic-crm/companies/CompanyShow.tsx

@@ -0,0 +1,241 @@
+import { formatDistance } from "date-fns";
+import { UserPlus } from "lucide-react";
+import {
+  RecordContextProvider,
+  ShowBase,
+  useListContext,
+  useRecordContext,
+  useShowContext,
+} from "ra-core";
+import {
+  Link as RouterLink,
+  useLocation,
+  useMatch,
+  useNavigate,
+} from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { ReferenceManyField } from "@/components/admin/reference-many-field";
+import { SortButton } from "@/components/admin/sort-button";
+
+import { ActivityLog } from "../activity/ActivityLog";
+import { Avatar } from "../contacts/Avatar";
+import { TagsList } from "../contacts/TagsList";
+import { findDealLabel } from "../deals/deal";
+import { Status } from "../misc/Status";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import type { Company, Contact, Deal } from "../types";
+import { CompanyAside } from "./CompanyAside";
+import { CompanyAvatar } from "./CompanyAvatar";
+
+export const CompanyShow = () => (
+  <ShowBase>
+    <CompanyShowContent />
+  </ShowBase>
+);
+
+const CompanyShowContent = () => {
+  const { record, isPending } = useShowContext<Company>();
+  const navigate = useNavigate();
+
+  // Get tab from URL or default to "activity"
+  const tabMatch = useMatch("/companies/:id/show/:tab");
+  const currentTab = tabMatch?.params?.tab || "activity";
+
+  const handleTabChange = (value: string) => {
+    if (value === currentTab) return;
+    if (value === "activity") {
+      navigate(`/companies/${record?.id}/show`);
+      return;
+    }
+    navigate(`/companies/${record?.id}/show/${value}`);
+  };
+
+  if (isPending || !record) return null;
+
+  return (
+    <div className="mt-2 flex pb-2 gap-8">
+      <div className="flex-1">
+        <Card>
+          <CardContent>
+            <div className="flex mb-3">
+              <CompanyAvatar />
+              <h5 className="text-xl ml-2 flex-1">{record.name}</h5>
+            </div>
+            <Tabs defaultValue={currentTab} onValueChange={handleTabChange}>
+              <TabsList className="grid w-full grid-cols-3">
+                <TabsTrigger value="activity">Activity</TabsTrigger>
+                <TabsTrigger value="contacts">
+                  {record.nb_contacts
+                    ? record.nb_contacts === 1
+                      ? "1 Contact"
+                      : `${record.nb_contacts} Contacts`
+                    : "No Contacts"}
+                </TabsTrigger>
+                {record.nb_deals ? (
+                  <TabsTrigger value="deals">
+                    {record.nb_deals === 1
+                      ? "1 deal"
+                      : `${record.nb_deals} deals`}
+                  </TabsTrigger>
+                ) : null}
+              </TabsList>
+              <TabsContent value="activity" className="pt-2">
+                <ActivityLog companyId={record.id} context="company" />
+              </TabsContent>
+              <TabsContent value="contacts">
+                {record.nb_contacts ? (
+                  <ReferenceManyField
+                    reference="contacts_summary"
+                    target="company_id"
+                    sort={{ field: "last_name", order: "ASC" }}
+                  >
+                    <div className="flex flex-col gap-4">
+                      <div className="flex flex-row justify-end space-x-2 mt-1">
+                        {!!record.nb_contacts && (
+                          <SortButton
+                            fields={["last_name", "first_name", "last_seen"]}
+                          />
+                        )}
+                        <CreateRelatedContactButton />
+                      </div>
+                      <ContactsIterator />
+                    </div>
+                  </ReferenceManyField>
+                ) : (
+                  <div className="flex flex-col gap-4">
+                    <div className="flex flex-row justify-end space-x-2 mt-1">
+                      <CreateRelatedContactButton />
+                    </div>
+                  </div>
+                )}
+              </TabsContent>
+              <TabsContent value="deals">
+                {record.nb_deals ? (
+                  <ReferenceManyField
+                    reference="deals"
+                    target="company_id"
+                    sort={{ field: "name", order: "ASC" }}
+                  >
+                    <DealsIterator />
+                  </ReferenceManyField>
+                ) : null}
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+      </div>
+      <CompanyAside />
+    </div>
+  );
+};
+
+const ContactsIterator = () => {
+  const location = useLocation();
+  const { data: contacts, error, isPending } = useListContext<Contact>();
+
+  if (isPending || error) return null;
+
+  const now = Date.now();
+  return (
+    <div className="pt-0">
+      {contacts.map((contact) => (
+        <RecordContextProvider key={contact.id} value={contact}>
+          <div className="p-0 text-sm">
+            <RouterLink
+              to={`/contacts/${contact.id}/show`}
+              state={{ from: location.pathname }}
+              className="flex items-center justify-between hover:bg-muted py-2 transition-colors"
+            >
+              <div className="mr-4">
+                <Avatar />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="font-medium">
+                  {`${contact.first_name} ${contact.last_name}`}
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {contact.title}
+                  {contact.nb_tasks
+                    ? ` - ${contact.nb_tasks} task${
+                        contact.nb_tasks > 1 ? "s" : ""
+                      }`
+                    : ""}
+                  &nbsp; &nbsp;
+                  <TagsList />
+                </div>
+              </div>
+              {contact.last_seen && (
+                <div className="text-right">
+                  <div className="text-sm text-muted-foreground">
+                    last activity {formatDistance(contact.last_seen, now)} ago{" "}
+                    <Status status={contact.status} />
+                  </div>
+                </div>
+              )}
+            </RouterLink>
+          </div>
+        </RecordContextProvider>
+      ))}
+    </div>
+  );
+};
+
+const CreateRelatedContactButton = () => {
+  const company = useRecordContext<Company>();
+  return (
+    <Button variant="outline" asChild size="sm" className="h-9">
+      <RouterLink
+        to="/contacts/create"
+        state={company ? { record: { company_id: company.id } } : undefined}
+        className="flex items-center gap-2"
+      >
+        <UserPlus className="h-4 w-4" />
+        Add contact
+      </RouterLink>
+    </Button>
+  );
+};
+
+const DealsIterator = () => {
+  const { data: deals, error, isPending } = useListContext<Deal>();
+  const { dealStages } = useConfigurationContext();
+  if (isPending || error) return null;
+
+  const now = Date.now();
+  return (
+    <div>
+      <div>
+        {deals.map((deal) => (
+          <div key={deal.id} className="p-0 text-sm">
+            <RouterLink
+              to={`/deals/${deal.id}/show`}
+              className="flex items-center justify-between hover:bg-muted py-2 px-4 transition-colors"
+            >
+              <div className="flex-1 min-w-0">
+                <div className="font-medium">{deal.name}</div>
+                <div className="text-sm text-muted-foreground">
+                  {findDealLabel(dealStages, deal.stage)},{" "}
+                  {deal.amount.toLocaleString("en-US", {
+                    notation: "compact",
+                    style: "currency",
+                    currency: "USD",
+                    currencyDisplay: "narrowSymbol",
+                    minimumSignificantDigits: 3,
+                  })}
+                  {deal.category ? `, ${deal.category}` : ""}
+                </div>
+              </div>
+              <div className="text-right">
+                <div className="text-sm text-muted-foreground">
+                  last activity {formatDistance(deal.updated_at, now)} ago{" "}
+                </div>
+              </div>
+            </RouterLink>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/atomic-crm/companies/GridList.tsx

@@ -0,0 +1,46 @@
+import { RecordContextProvider, useListContext } from "ra-core";
+
+import type { Company } from "../types";
+import { CompanyCard } from "./CompanyCard";
+
+const times = (nbChildren: number, fn: (key: number) => any) =>
+  Array.from({ length: nbChildren }, (_, key) => fn(key));
+
+const LoadingGridList = () => (
+  <div className="flex flex-wrap w-[1008px] gap-1">
+    {times(15, (key) => (
+      <div
+        className="h-[200px] w-[194px] flex flex-col bg-gray-200"
+        key={key}
+      />
+    ))}
+  </div>
+);
+
+const LoadedGridList = () => {
+  const { data, error, isPending } = useListContext<Company>();
+
+  if (isPending || error) return null;
+
+  return (
+    <div
+      className="w-full gap-2 grid"
+      style={{
+        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+      }}
+    >
+      {data.map((record) => (
+        <RecordContextProvider key={record.id} value={record}>
+          <CompanyCard />
+        </RecordContextProvider>
+      ))}
+
+      {data.length === 0 && <div className="p-2">No companies found</div>}
+    </div>
+  );
+};
+
+export const ImageList = () => {
+  const { isPending } = useListContext();
+  return isPending ? <LoadingGridList /> : <LoadedGridList />;
+};

package/src/components/atomic-crm/companies/index.ts

@@ -0,0 +1,11 @@
+import { CompanyList } from "./CompanyList";
+import { CompanyCreate } from "./CompanyCreate";
+import { CompanyShow } from "./CompanyShow";
+import { CompanyEdit } from "./CompanyEdit";
+
+export default {
+  list: CompanyList,
+  create: CompanyCreate,
+  edit: CompanyEdit,
+  show: CompanyShow,
+};

package/src/components/atomic-crm/companies/sizes.ts

@@ -0,0 +1,7 @@
+export const sizes = [
+  { id: 1, name: "1 employee" },
+  { id: 10, name: "2-9 employees" },
+  { id: 50, name: "10-49 employees" },
+  { id: 250, name: "50-249 employees" },
+  { id: 500, name: "250 or more employees" },
+];

package/src/components/atomic-crm/consts.ts

@@ -0,0 +1,5 @@
+export const COMPANY_CREATED = "company.created" as const;
+export const CONTACT_CREATED = "contact.created" as const;
+export const CONTACT_NOTE_CREATED = "contactNote.created" as const;
+export const DEAL_CREATED = "deal.created" as const;
+export const DEAL_NOTE_CREATED = "dealNote.created" as const;

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

@@ -0,0 +1,40 @@
+import {
+  AvatarFallback,
+  AvatarImage,
+  Avatar as ShadcnAvatar,
+} from "@/components/ui/avatar";
+import { useRecordContext } from "ra-core";
+
+import type { Contact } from "../types";
+
+export const Avatar = (props: {
+  record?: Contact;
+  width?: 20 | 25 | 40;
+  height?: 20 | 25 | 40;
+  title?: string;
+}) => {
+  const record = useRecordContext<Contact>(props);
+  // If we come from company page, the record is defined (to pass the company as a prop),
+  // but neither of those fields are and this lead to an error when creating contact.
+  if (!record?.avatar && !record?.first_name && !record?.last_name) {
+    return null;
+  }
+
+  const size = props.width || props.height;
+  const sizeClass =
+    props.width === 20
+      ? `w-[20px] h-[20px]`
+      : props.width === 25
+        ? "w-[25px] h-[25px]"
+        : "w-10 h-10";
+
+  return (
+    <ShadcnAvatar className={sizeClass} title={props.title}>
+      <AvatarImage src={record.avatar?.src ?? undefined} />
+      <AvatarFallback className={size && size < 40 ? "text-[10px]" : "text-sm"}>
+        {record.first_name?.charAt(0).toUpperCase()}
+        {record.last_name?.charAt(0).toUpperCase()}
+      </AvatarFallback>
+    </ShadcnAvatar>
+  );
+};

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

@@ -0,0 +1,187 @@
+import { Linkedin, Mail, Phone } from "lucide-react";
+import { useRecordContext, WithRecord } from "ra-core";
+import type { ReactNode } from "react";
+import { ArrayField } from "@/components/admin/array-field";
+import { EditButton } from "@/components/admin/edit-button";
+import { DeleteButton } from "@/components/admin";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { ReferenceManyField } from "@/components/admin/reference-many-field";
+import { ShowButton } from "@/components/admin/show-button";
+import { SingleFieldList } from "@/components/admin/single-field-list";
+import { TextField } from "@/components/admin/text-field";
+import { DateField } from "@/components/admin/date-field";
+import { EmailField } from "@/components/admin/email-field";
+
+import { AddTask } from "../tasks/AddTask";
+import { TasksIterator } from "../tasks/TasksIterator";
+import { TagsListEdit } from "./TagsListEdit";
+import { AsideSection } from "../misc/AsideSection";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import { SaleName } from "../sales/SaleName";
+import type { Contact } from "../types";
+import { ContactMergeButton } from "./ContactMergeButton";
+import { ExportVCardButton } from "./ExportVCardButton";
+
+export const ContactAside = ({ link = "edit" }: { link?: "edit" | "show" }) => {
+  const { contactGender } = useConfigurationContext();
+  const record = useRecordContext<Contact>();
+
+  if (!record) return null;
+  return (
+    <div className="hidden sm:block w-64 min-w-64 text-sm">
+      <div className="mb-4 -ml-1">
+        {link === "edit" ? (
+          <EditButton label="Edit Contact" />
+        ) : (
+          <ShowButton label="Show Contact" />
+        )}
+      </div>
+
+      <AsideSection title="Personal info">
+        <ArrayField source="email_jsonb">
+          <SingleFieldList className="flex-col">
+            <PersonalInfoRow
+              icon={<Mail className="w-4 h-4 text-muted-foreground" />}
+              primary={<EmailField source="email" />}
+            />
+          </SingleFieldList>
+        </ArrayField>
+
+        {record.has_newsletter && (
+          <p className="pl-6 text-sm text-muted-foreground">
+            Subscribed to newsletter
+          </p>
+        )}
+
+        {record.linkedin_url && (
+          <PersonalInfoRow
+            icon={<Linkedin className="w-4 h-4 text-muted-foreground" />}
+            primary={
+              <a
+                className="underline hover:no-underline text-sm text-muted-foreground"
+                href={record.linkedin_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={record.linkedin_url}
+              >
+                LinkedIn
+              </a>
+            }
+          />
+        )}
+        <ArrayField source="phone_jsonb">
+          <SingleFieldList className="flex-col">
+            <PersonalInfoRow
+              icon={<Phone className="w-4 h-4 text-muted-foreground" />}
+              primary={<TextField source="number" />}
+              showType
+            />
+          </SingleFieldList>
+        </ArrayField>
+        {contactGender
+          .map((genderOption) => {
+            if (record.gender === genderOption.value) {
+              return (
+                <PersonalInfoRow
+                  key={genderOption.value}
+                  icon={
+                    <genderOption.icon className="w-4 h-4 text-muted-foreground" />
+                  }
+                  primary={<span>{genderOption.label}</span>}
+                />
+              );
+            }
+            return null;
+          })
+          .filter(Boolean)}
+      </AsideSection>
+      <AsideSection title="Background info">
+        <WithRecord<Contact>
+          render={(record) =>
+            record?.background ? (
+              <TextField source="background" record={record} className="pb-2" />
+            ) : null
+          }
+        />
+        <div className="text-muted-foreground">
+          <span className="text-sm">Added on</span>{" "}
+          <DateField
+            source="first_seen"
+            options={{ year: "numeric", month: "long", day: "numeric" }}
+          />
+        </div>
+
+        <div className="text-muted-foreground">
+          <span className="text-sm">Last activity on</span>{" "}
+          <DateField
+            source="last_seen"
+            options={{ year: "numeric", month: "long", day: "numeric" }}
+          />
+        </div>
+
+        <div className="inline-flex text-muted-foreground">
+          Followed by&nbsp;
+          <ReferenceField source="sales_id" reference="sales">
+            <SaleName />
+          </ReferenceField>
+        </div>
+      </AsideSection>
+
+      <AsideSection title="Tags">
+        <TagsListEdit />
+      </AsideSection>
+
+      <AsideSection title="Tasks">
+        <ReferenceManyField
+          target="contact_id"
+          reference="tasks"
+          sort={{ field: "due_date", order: "ASC" }}
+        >
+          <TasksIterator />
+        </ReferenceManyField>
+        <AddTask />
+      </AsideSection>
+
+      {link !== "edit" && (
+        <>
+          <div className="mt-6 pt-6 border-t hidden sm:flex flex-col gap-2 items-start">
+            <ExportVCardButton />
+            <ContactMergeButton />
+          </div>
+          <div className="mt-6 pt-6 border-t hidden sm:flex flex-col gap-2 items-start">
+            <DeleteButton
+              className="h-6 cursor-pointer hover:bg-destructive/10! text-destructive! border-destructive! focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40"
+              size="sm"
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+const PersonalInfoRow = ({
+  icon,
+  primary,
+  showType,
+}: {
+  icon: ReactNode;
+  primary: ReactNode;
+  showType?: boolean;
+}) => (
+  <div className="flex flex-row items-center gap-2 min-h-6">
+    {icon}
+    <div className="flex flex-wrap gap-x-2 gap-y-0">
+      {primary}
+      {showType ? (
+        <WithRecord
+          render={(row) =>
+            row.type !== "Other" && (
+              <TextField source="type" className="text-muted-foreground" />
+            )
+          }
+        />
+      ) : null}
+    </div>
+  </div>
+);

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

@@ -0,0 +1,34 @@
+import { CreateBase, Form, useGetIdentity } from "ra-core";
+import { FormToolbar } from "@/components/admin/simple-form";
+import { Card, CardContent } from "@/components/ui/card";
+
+import type { Contact } from "../types";
+import { ContactInputs } from "./ContactInputs";
+
+export const ContactCreate = () => {
+  const { identity } = useGetIdentity();
+  return (
+    <CreateBase
+      redirect="show"
+      transform={(data: Contact) => ({
+        ...data,
+        first_seen: new Date().toISOString(),
+        last_seen: new Date().toISOString(),
+        tags: [],
+      })}
+    >
+      <div className="mt-2 flex lg:mr-72">
+        <div className="flex-1">
+          <Form defaultValues={{ sales_id: identity?.id }}>
+            <Card>
+              <CardContent>
+                <ContactInputs />
+                <FormToolbar />
+              </CardContent>
+            </Card>
+          </Form>
+        </div>
+      </div>
+    </CreateBase>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { EditBase, Form, useEditContext } from "ra-core";
+
+import type { Contact } from "../types";
+import { ContactAside } from "./ContactAside";
+import { ContactInputs } from "./ContactInputs";
+import { FormToolbar } from "../layout/FormToolbar";
+
+export const ContactEdit = () => (
+  <EditBase redirect="show">
+    <ContactEditContent />
+  </EditBase>
+);
+
+const ContactEditContent = () => {
+  const { isPending, record } = useEditContext<Contact>();
+  if (isPending || !record) return null;
+  return (
+    <div className="mt-2 flex gap-8">
+      <Form className="flex flex-1 flex-col gap-4">
+        <Card>
+          <CardContent>
+            <ContactInputs />
+            <FormToolbar />
+          </CardContent>
+        </Card>
+      </Form>
+
+      <ContactAside link="show" />
+    </div>
+  );
+};