realtimex-crm 0.1.2

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

@@ -0,0 +1,207 @@
+import { Globe, Linkedin, Phone } from "lucide-react";
+import { useRecordContext } from "ra-core";
+import { EditButton } from "@/components/admin/edit-button";
+import { DeleteButton } from "@/components/admin/delete-button";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { ShowButton } from "@/components/admin/show-button";
+import { TextField } from "@/components/admin/text-field";
+import { DateField } from "@/components/admin/date-field";
+import { UrlField } from "@/components/admin/url-field";
+import { SelectField } from "@/components/admin/select-field";
+
+import { AsideSection } from "../misc/AsideSection";
+import { SaleName } from "../sales/SaleName";
+import type { Company } from "../types";
+import { sizes } from "./sizes";
+
+interface CompanyAsideProps {
+  link?: string;
+}
+
+export const CompanyAside = ({ link = "edit" }: CompanyAsideProps) => {
+  const record = useRecordContext<Company>();
+  if (!record) return null;
+
+  return (
+    <div className="hidden sm:block w-[250px] min-w-[250px] space-y-4">
+      <div className="flex flex-row space-x-1">
+        {link === "edit" ? (
+          <EditButton label="Edit Company" />
+        ) : (
+          <ShowButton label="Show Company" />
+        )}
+      </div>
+
+      <CompanyInfo record={record} />
+
+      <AddressInfo record={record} />
+
+      <ContextInfo record={record} />
+
+      <AdditionalInfo record={record} />
+
+      {link !== "edit" && (
+        <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 CompanyInfo = ({ record }: { record: Company }) => {
+  if (!record.website && !record.linkedin_url && !record.phone_number) {
+    return null;
+  }
+
+  return (
+    <AsideSection title="Company Info">
+      {record.website && (
+        <div className="flex flex-row items-center gap-1 min-h-[24px]">
+          <Globe className="w-4 h-4" />
+          <UrlField
+            source="website"
+            target="_blank"
+            rel="noopener"
+            content={record.website
+              .replace("http://", "")
+              .replace("https://", "")}
+          />
+        </div>
+      )}
+      {record.linkedin_url && (
+        <div className="flex flex-row items-center gap-1 min-h-[24px]">
+          <Linkedin className="w-4 h-4" />
+          <a
+            className="underline hover:no-underline"
+            href={record.linkedin_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={record.linkedin_url}
+          >
+            LinkedIn
+          </a>
+        </div>
+      )}
+      {record.phone_number && (
+        <div className="flex flex-row items-center gap-1 min-h-[24px]">
+          <Phone className="w-4 h-4" />
+          <TextField source="phone_number" />
+        </div>
+      )}
+    </AsideSection>
+  );
+};
+
+const ContextInfo = ({ record }: { record: Company }) => {
+  if (!record.revenue && !record.id) {
+    return null;
+  }
+
+  return (
+    <AsideSection title="Context">
+      {record.sector && (
+        <span>
+          Sector: <TextField source="sector" />
+        </span>
+      )}
+      {record.size && (
+        <span>
+          Size: <SelectField source="size" choices={sizes} />
+        </span>
+      )}
+      {record.revenue && (
+        <span>
+          Revenue: <TextField source="revenue" />
+        </span>
+      )}
+      {record.tax_identifier && (
+        <span>
+          Tax Identifier: <TextField source="tax_identifier" />
+        </span>
+      )}
+    </AsideSection>
+  );
+};
+
+const AddressInfo = ({ record }: { record: Company }) => {
+  if (!record.address && !record.city && !record.zipcode && !record.stateAbbr) {
+    return null;
+  }
+
+  return (
+    <AsideSection title="Main Address" noGap>
+      <TextField source="address" />
+      <TextField source="city" />
+      <TextField source="zipcode" />
+      <TextField source="stateAbbr" />
+      <TextField source="country" />
+    </AsideSection>
+  );
+};
+
+const AdditionalInfo = ({ record }: { record: Company }) => {
+  if (
+    !record.created_at &&
+    !record.sales_id &&
+    !record.description &&
+    !record.context_links
+  ) {
+    return null;
+  }
+  const getBaseURL = (url: string) => {
+    const urlObject = new URL(url.startsWith("http") ? url : `https://${url}`);
+    return urlObject.hostname;
+  };
+
+  return (
+    <AsideSection title="Additional Info">
+      {record.description && (
+        <p className="text-sm  mb-1">{record.description}</p>
+      )}
+      {record.context_links && (
+        <div className="flex flex-col">
+          {record.context_links.map((link, index) =>
+            link ? (
+              <a
+                key={index}
+                className="text-sm underline hover:no-underline mb-1"
+                href={link.startsWith("http") ? link : `https://${link}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={link}
+              >
+                {getBaseURL(link)}
+              </a>
+            ) : null,
+          )}
+        </div>
+      )}
+      {record.sales_id !== null && (
+        <div className="inline-flex text-sm text-muted-foreground mb-1">
+          Followed by&nbsp;
+          <ReferenceField source="sales_id" reference="sales" record={record}>
+            <SaleName />
+          </ReferenceField>
+        </div>
+      )}
+      {record.created_at && (
+        <p className="text-sm text-muted-foreground mb-1">
+          Added on{" "}
+          <DateField
+            source="created_at"
+            record={record}
+            options={{
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            }}
+          />
+        </p>
+      )}
+    </AsideSection>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { useRecordContext } from "ra-core";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+import type { Company } from "../types";
+
+export const CompanyAvatar = (props: {
+  record?: Company;
+  width?: 20 | 40;
+  height?: 20 | 40;
+}) => {
+  const { width = 40 } = props;
+  const record = useRecordContext<Company>(props);
+  if (!record) return null;
+
+  const sizeClass = width !== 40 ? `w-[20px] h-[20px]` : "w-10 h-10";
+
+  return (
+    <Avatar className={sizeClass}>
+      <AvatarImage
+        src={record.logo?.src}
+        alt={record.name}
+        className="object-contain"
+      />
+      <AvatarFallback className={width !== 40 ? "text-xs" : "text-sm"}>
+        {record.name.charAt(0)}
+      </AvatarFallback>
+    </Avatar>
+  );
+};

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

@@ -0,0 +1,88 @@
+import { DollarSign } from "lucide-react";
+import { Link } from "react-router";
+import { useCreatePath, useListContext, useRecordContext } from "ra-core";
+import { ReferenceManyField } from "@/components/admin/reference-many-field";
+import { Card } from "@/components/ui/card";
+
+import { Avatar as ContactAvatar } from "../contacts/Avatar";
+import type { Company } from "../types";
+import { CompanyAvatar } from "./CompanyAvatar";
+
+export const CompanyCard = (props: { record?: Company }) => {
+  const createPath = useCreatePath();
+  const record = useRecordContext<Company>(props);
+  if (!record) return null;
+
+  return (
+    <Link
+      to={createPath({
+        resource: "companies",
+        id: record.id,
+        type: "show",
+      })}
+      className="no-underline"
+    >
+      <Card className="h-[200px] flex flex-col justify-between p-4 hover:bg-muted">
+        <div className="flex flex-col items-center gap-1">
+          <CompanyAvatar />
+          <div className="text-center mt-1">
+            <h6 className="text-sm font-medium">{record.name}</h6>
+            <p className="text-xs text-muted-foreground">{record.sector}</p>
+          </div>
+        </div>
+        <div className="flex flex-row w-full justify-between gap-2">
+          <div className="flex items-center">
+            {record.nb_contacts ? (
+              <ReferenceManyField reference="contacts" target="company_id">
+                <AvatarGroupIterator />
+              </ReferenceManyField>
+            ) : null}
+          </div>
+          {record.nb_deals ? (
+            <div className="flex items-center ml-2 gap-0.5">
+              <DollarSign className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium">{record.nb_deals}</span>
+              <span className="text-xs text-muted-foreground">
+                {record.nb_deals
+                  ? record.nb_deals > 1
+                    ? "deals"
+                    : "deal"
+                  : "deal"}
+              </span>
+            </div>
+          ) : null}
+        </div>
+      </Card>
+    </Link>
+  );
+};
+
+const AvatarGroupIterator = () => {
+  const { data, total, error, isPending } = useListContext();
+  if (isPending || error) return null;
+
+  const MAX_AVATARS = 3;
+  return (
+    <div className="*:data-[slot=avatar]:ring-background flex -space-x-0.5 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale-50">
+      {data.slice(0, MAX_AVATARS).map((record: any) => (
+        <ContactAvatar
+          key={record.id}
+          record={record}
+          width={25}
+          height={25}
+          title={`${record.first_name} ${record.last_name}`}
+        />
+      ))}
+      {total > MAX_AVATARS && (
+        <span
+          className="relative flex size-8 shrink-0 overflow-hidden rounded-full w-[25px] h-[25px]"
+          data-slot="avatar"
+        >
+          <span className="bg-muted flex size-full items-center justify-center rounded-full text-[10px]">
+            +{total - MAX_AVATARS}
+          </span>
+        </span>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { CreateBase, Form, useGetIdentity } from "ra-core";
+import { Card, CardContent } from "@/components/ui/card";
+import { CancelButton } from "@/components/admin/cancel-button";
+import { SaveButton } from "@/components/admin/form";
+import { FormToolbar } from "@/components/admin/simple-form";
+
+import { CompanyInputs } from "./CompanyInputs";
+
+export const CompanyCreate = () => {
+  const { identity } = useGetIdentity();
+  return (
+    <CreateBase
+      redirect="show"
+      transform={(values) => {
+        // add https:// before website if not present
+        if (values.website && !values.website.startsWith("http")) {
+          values.website = `https://${values.website}`;
+        }
+        return values;
+      }}
+    >
+      <div className="mt-2 flex lg:mr-72">
+        <div className="flex-1">
+          <Form defaultValues={{ sales_id: identity?.id }}>
+            <Card>
+              <CardContent>
+                <CompanyInputs />
+                <FormToolbar>
+                  <div className="flex flex-row gap-2 justify-end">
+                    <CancelButton />
+                    <SaveButton label="Create Company" />
+                  </div>
+                </FormToolbar>
+              </CardContent>
+            </Card>
+          </Form>
+        </div>
+      </div>
+    </CreateBase>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { EditBase, Form } from "ra-core";
+import { Card, CardContent } from "@/components/ui/card";
+
+import { CompanyInputs } from "./CompanyInputs";
+import { CompanyAside } from "./CompanyAside";
+import { FormToolbar } from "../layout/FormToolbar";
+
+export const CompanyEdit = () => (
+  <EditBase
+    actions={false}
+    redirect="show"
+    transform={(values) => {
+      // add https:// before website if not present
+      if (values.website && !values.website.startsWith("http")) {
+        values.website = `https://${values.website}`;
+      }
+      return values;
+    }}
+  >
+    <div className="mt-2 flex gap-8">
+      <Form className="flex flex-1 flex-col gap-4 pb-2">
+        <Card>
+          <CardContent>
+            <CompanyInputs />
+            <FormToolbar />
+          </CardContent>
+        </Card>
+      </Form>
+
+      <CompanyAside link="show" />
+    </div>
+  </EditBase>
+);

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

@@ -0,0 +1,26 @@
+import { CreateButton } from "@/components/admin/create-button";
+
+import useAppBarHeight from "../misc/useAppBarHeight";
+
+export const CompanyEmpty = () => {
+  const appbarHeight = useAppBarHeight();
+  return (
+    <div
+      className="flex flex-col justify-center items-center gap-6"
+      style={{
+        height: `calc(100dvh - ${appbarHeight}px)`,
+      }}
+    >
+      <img src="./img/empty.svg" alt="No companies found" />
+      <div className="flex flex-col gap-0 items-center">
+        <h6 className="text-lg font-bold">No companies found</h6>
+        <p className="text-sm text-center text-muted-foreground mb-4">
+          It seems your company list is empty.
+        </p>
+      </div>
+      <div className="flex space-x-2">
+        <CreateButton label="Create Company" />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,160 @@
+import { required, useRecordContext } from "ra-core";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { TextInput } from "@/components/admin/text-input";
+import { SelectInput } from "@/components/admin/select-input";
+import { ArrayInput } from "@/components/admin/array-input";
+import { SimpleFormIterator } from "@/components/admin/simple-form-iterator";
+import { Separator } from "@/components/ui/separator";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+import ImageEditorField from "../misc/ImageEditorField";
+import { isLinkedinUrl } from "../misc/isLinkedInUrl";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import type { Company, Sale } from "../types";
+import { sizes } from "./sizes";
+
+const isUrl = (url: string) => {
+  if (!url) return;
+  const UrlRegex = new RegExp(
+    /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i,
+  );
+  if (!UrlRegex.test(url)) {
+    return "Must be a valid URL";
+  }
+};
+
+export const CompanyInputs = () => {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className="flex flex-col gap-4 p-1">
+      <CompanyDisplayInputs />
+      <div className={`flex gap-6 ${isMobile ? "flex-col" : "flex-row"}`}>
+        <div className="flex flex-col gap-10 flex-1">
+          <CompanyContactInputs />
+          <CompanyContextInputs />
+        </div>
+        <Separator orientation={isMobile ? "horizontal" : "vertical"} />
+        <div className="flex flex-col gap-8 flex-1">
+          <CompanyAddressInputs />
+          <CompanyAdditionalInformationInputs />
+          <CompanyAccountManagerInput />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const CompanyDisplayInputs = () => {
+  const record = useRecordContext<Company>();
+  return (
+    <div className="flex gap-4 flex-1 flex-row">
+      <ImageEditorField
+        source="logo"
+        type="avatar"
+        width={60}
+        height={60}
+        emptyText={record?.name.charAt(0)}
+        linkPosition="bottom"
+      />
+      <TextInput
+        source="name"
+        className="w-full h-fit"
+        validate={required()}
+        helperText={false}
+        placeholder="Company name"
+      />
+    </div>
+  );
+};
+
+const CompanyContactInputs = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Contact</h6>
+      <TextInput source="website" helperText={false} validate={isUrl} />
+      <TextInput
+        source="linkedin_url"
+        helperText={false}
+        validate={isLinkedinUrl}
+      />
+      <TextInput source="phone_number" helperText={false} />
+    </div>
+  );
+};
+
+const CompanyContextInputs = () => {
+  const { companySectors } = useConfigurationContext();
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Context</h6>
+      <SelectInput
+        source="sector"
+        choices={companySectors.map((sector) => ({
+          id: sector,
+          name: sector,
+        }))}
+        helperText={false}
+      />
+      <SelectInput source="size" choices={sizes} helperText={false} />
+      <TextInput source="revenue" helperText={false} />
+      <TextInput source="tax_identifier" helperText={false} />
+    </div>
+  );
+};
+
+const CompanyAddressInputs = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Address</h6>
+      <TextInput source="address" helperText={false} />
+      <TextInput source="city" helperText={false} />
+      <TextInput source="zipcode" helperText={false} />
+      <TextInput source="stateAbbr" helperText={false} />
+      <TextInput source="country" helperText={false} />
+    </div>
+  );
+};
+
+const CompanyAdditionalInformationInputs = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Additional information</h6>
+      <TextInput source="description" multiline helperText={false} />
+      <ArrayInput source="context_links" helperText={false}>
+        <SimpleFormIterator disableReordering fullWidth getItemLabel={false}>
+          <TextInput
+            source=""
+            label={false}
+            helperText={false}
+            validate={isUrl}
+          />
+        </SimpleFormIterator>
+      </ArrayInput>
+    </div>
+  );
+};
+
+const CompanyAccountManagerInput = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <h6 className="text-lg font-semibold">Account manager</h6>
+      <ReferenceInput
+        source="sales_id"
+        reference="sales"
+        filter={{
+          "disabled@neq": true,
+        }}
+      >
+        <SelectInput
+          label="Account manager"
+          helperText={false}
+          optionText={saleOptionRenderer}
+        />
+      </ReferenceInput>
+    </div>
+  );
+};
+
+const saleOptionRenderer = (choice: Sale) =>
+  `${choice.first_name} ${choice.last_name}`;

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

@@ -0,0 +1,54 @@
+import { useGetIdentity, useListContext } from "ra-core";
+import { CreateButton } from "@/components/admin/create-button";
+import { ExportButton } from "@/components/admin/export-button";
+import { List } from "@/components/admin/list";
+import { ListPagination } from "@/components/admin/list-pagination";
+import { SortButton } from "@/components/admin/sort-button";
+
+import { TopToolbar } from "../layout/TopToolbar";
+import { CompanyEmpty } from "./CompanyEmpty";
+import { CompanyListFilter } from "./CompanyListFilter";
+import { ImageList } from "./GridList";
+
+export const CompanyList = () => {
+  const { identity } = useGetIdentity();
+  if (!identity) return null;
+  return (
+    <List
+      title={false}
+      perPage={25}
+      sort={{ field: "name", order: "ASC" }}
+      actions={<CompanyListActions />}
+      pagination={<ListPagination rowsPerPageOptions={[10, 25, 50, 100]} />}
+    >
+      <CompanyListLayout />
+    </List>
+  );
+};
+
+const CompanyListLayout = () => {
+  const { data, isPending, filterValues } = useListContext();
+  const hasFilters = filterValues && Object.keys(filterValues).length > 0;
+
+  if (isPending) return null;
+  if (!data?.length && !hasFilters) return <CompanyEmpty />;
+
+  return (
+    <div className="w-full flex flex-row gap-8">
+      <CompanyListFilter />
+      <div className="flex flex-col flex-1 gap-4">
+        <ImageList />
+      </div>
+    </div>
+  );
+};
+
+const CompanyListActions = () => {
+  return (
+    <TopToolbar>
+      <SortButton fields={["name", "created_at", "nb_contacts"]} />
+      <ExportButton />
+      <CreateButton label="New Company" />
+    </TopToolbar>
+  );
+};