realtimex-crm 0.1.2

package/src/components/admin/user-menu.tsx

@@ -0,0 +1,84 @@
+import { Children, useCallback, useState } from "react";
+import {
+  Translate,
+  useAuthProvider,
+  useGetIdentity,
+  useLogout,
+  UserMenuContext,
+} from "ra-core";
+import { LogOut } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+
+export type UserMenuProps = {
+  children?: React.ReactNode;
+};
+
+/**
+ * A user menu component displayed in the top right corner of the admin layout.
+ *
+ * Provides access to user-related actions such as profile, settings, and logout.
+ * Displays the user's avatar and name from the identity provider, and includes a logout option.
+ * Only displays in applications using authentication.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/usermenu UserMenu documentation}
+ */
+export function UserMenu({ children }: UserMenuProps) {
+  const authProvider = useAuthProvider();
+  const { data: identity } = useGetIdentity();
+  const logout = useLogout();
+
+  const [open, setOpen] = useState(false);
+
+  const handleToggleOpen = useCallback(() => {
+    setOpen((prevOpen) => !prevOpen);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  if (!authProvider) return null;
+
+  return (
+    <UserMenuContext.Provider value={{ onClose: handleClose }}>
+      <DropdownMenu open={open} onOpenChange={handleToggleOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="relative h-8 w-8 ml-2 rounded-full"
+          >
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={identity?.avatar} role="presentation" />
+              <AvatarFallback>{identity?.fullName?.charAt(0)}</AvatarFallback>
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="end" forceMount>
+          <DropdownMenuLabel className="font-normal">
+            <div className="flex flex-col space-y-1">
+              <p className="text-sm font-medium leading-none">
+                {identity?.fullName}
+              </p>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {children}
+          {Children.count(children) > 0 && <DropdownMenuSeparator />}
+          <DropdownMenuItem onClick={() => logout()} className="cursor-pointer">
+            <LogOut />
+            <Translate i18nKey="ra.auth.logout">Log out</Translate>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </UserMenuContext.Provider>
+  );
+}

package/src/components/atomic-crm/activity/ActivityLog.tsx

@@ -0,0 +1,54 @@
+import { Alert } from "@/components/ui/alert";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useQuery } from "@tanstack/react-query";
+import { type Identifier, useDataProvider } from "ra-core";
+
+import type { CrmDataProvider } from "../providers/types";
+import { ActivityLogContext } from "./ActivityLogContext";
+import { ActivityLogIterator } from "./ActivityLogIterator";
+
+type ActivityLogProps = {
+  companyId?: Identifier;
+  pageSize?: number;
+  context?: "company" | "contact" | "deal" | "all";
+};
+
+export function ActivityLog({
+  companyId,
+  pageSize = 20,
+  context = "all",
+}: ActivityLogProps) {
+  const dataProvider = useDataProvider<CrmDataProvider>();
+  const { data, isPending, error } = useQuery({
+    queryKey: ["activityLog", companyId],
+    queryFn: () => dataProvider.getActivityLog(companyId),
+  });
+
+  if (isPending) {
+    return (
+      <div className="mt-1">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <div className="space-y-2 mt-1" key={index}>
+            <div className="flex flex-row space-x-2 items-center">
+              <Skeleton className="w-5 h-5 rounded-full" />
+              <Skeleton className="w-full h-4" />
+            </div>
+            <Skeleton className="w-full h-12" />
+            <Separator />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return <Alert>Failed to load activity log</Alert>;
+  }
+
+  return (
+    <ActivityLogContext.Provider value={context}>
+      <ActivityLogIterator activities={data} pageSize={pageSize} />
+    </ActivityLogContext.Provider>
+  );
+}

package/src/components/atomic-crm/activity/ActivityLogCompanyCreated.tsx

@@ -0,0 +1,50 @@
+import { Link } from "react-router";
+
+import { ReferenceField } from "@/components/admin/reference-field";
+import { CompanyAvatar } from "../companies/CompanyAvatar";
+import { RelativeDate } from "../misc/RelativeDate";
+import { SaleName } from "../sales/SaleName";
+import type { ActivityCompanyCreated } from "../types";
+import { useActivityLogContext } from "./ActivityLogContext";
+
+type ActivityLogCompanyCreatedProps = {
+  activity: ActivityCompanyCreated;
+};
+
+export function ActivityLogCompanyCreated({
+  activity,
+}: ActivityLogCompanyCreatedProps) {
+  const context = useActivityLogContext();
+  const { company } = activity;
+  return (
+    <div className="p-0">
+      <div className="flex flex-row space-x-1 items-center w-full">
+        <CompanyAvatar width={20} height={20} record={company} />
+
+        <div className="text-sm text-muted-foreground flex-grow">
+          <span className="text-muted-foreground text-sm inline-flex">
+            <ReferenceField
+              source="sales_id"
+              reference="sales"
+              record={activity}
+            >
+              <SaleName />
+            </ReferenceField>
+          </span>
+          &nbsp;added company &nbsp;
+          <Link to={`/companies/${company.id}/show`}>{company.name}</Link>
+          {context === "all" && (
+            <>
+              <RelativeDate date={activity.date} />
+            </>
+          )}
+        </div>
+        {context === "company" && (
+          <span className="text-muted-foreground text-sm">
+            <RelativeDate date={activity.date} />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/atomic-crm/activity/ActivityLogContactCreated.tsx

@@ -0,0 +1,42 @@
+import { Link } from "react-router";
+
+import { ReferenceField } from "@/components/admin/reference-field";
+import { Avatar } from "../contacts/Avatar";
+import { RelativeDate } from "../misc/RelativeDate";
+import { SaleName } from "../sales/SaleName";
+import type { ActivityContactCreated } from "../types";
+import { useActivityLogContext } from "./ActivityLogContext";
+
+type ActivityLogContactCreatedProps = {
+  activity: ActivityContactCreated;
+};
+
+export function ActivityLogContactCreated({
+  activity,
+}: ActivityLogContactCreatedProps) {
+  const context = useActivityLogContext();
+  const { contact } = activity;
+  return (
+    <div className="p-0">
+      <div className="flex flex-row gap-2 items-center w-full">
+        <Avatar width={20} height={20} record={contact} />
+        <span className="text-muted-foreground text-sm inline-flex  flex-grow">
+          <ReferenceField source="sales_id" reference="sales" record={activity}>
+            <SaleName />
+          </ReferenceField>
+          &nbsp;added&nbsp;
+          <Link to={`/contacts/${contact.id}/show`}>
+            {contact.first_name}&nbsp;{contact.last_name}
+          </Link>
+          &nbsp;
+          {context !== "company" && <>to company {activity.company_id}</>}
+        </span>
+        {context === "company" && (
+          <span className="text-muted-foreground text-sm">
+            <RelativeDate date={activity.date} />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/atomic-crm/activity/ActivityLogContactNoteCreated.tsx

@@ -0,0 +1,71 @@
+import { useRecordContext } from "ra-core";
+
+import { ReferenceField } from "@/components/admin/reference-field";
+import { TextField } from "@/components/admin/text-field";
+import { Avatar } from "../contacts/Avatar";
+import { RelativeDate } from "../misc/RelativeDate";
+import { SaleName } from "../sales/SaleName";
+import type { ActivityContactNoteCreated, Contact } from "../types";
+import { useActivityLogContext } from "./ActivityLogContext";
+import { ActivityLogNote } from "./ActivityLogNote";
+
+type ActivityLogContactNoteCreatedProps = {
+  activity: ActivityContactNoteCreated;
+};
+
+function ContactAvatar() {
+  const record = useRecordContext<Contact>();
+  return <Avatar width={20} height={20} record={record} />;
+}
+
+export function ActivityLogContactNoteCreated({
+  activity,
+}: ActivityLogContactNoteCreatedProps) {
+  const context = useActivityLogContext();
+  const { contactNote } = activity;
+  return (
+    <ActivityLogNote
+      header={
+        <div className="flex items-center gap-2 w-full">
+          <ReferenceField
+            source="contact_id"
+            reference="contacts"
+            record={activity.contactNote}
+          >
+            <ContactAvatar />
+          </ReferenceField>
+
+          <div className="flex flex-row flex-grow">
+            <div className="text-sm text-muted-foreground flex-grow">
+              <span className="text-muted-foreground text-sm inline-flex">
+                <ReferenceField
+                  source="sales_id"
+                  reference="sales"
+                  record={activity}
+                >
+                  <SaleName />
+                </ReferenceField>
+                <ReferenceField
+                  source="contact_id"
+                  reference="contacts"
+                  record={activity.contactNote}
+                >
+                  &nbsp;added a note about <TextField source="first_name" />
+                  &nbsp;
+                  <TextField source="last_name" />
+                </ReferenceField>
+              </span>
+            </div>
+
+            {context === "company" && (
+              <span className="text-muted-foreground text-sm">
+                <RelativeDate date={activity.date} />
+              </span>
+            )}
+          </div>
+        </div>
+      }
+      text={contactNote.text}
+    />
+  );
+}

package/src/components/atomic-crm/activity/ActivityLogContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+export type activityLogContextValue = "company" | "contact" | "deal" | "all";
+
+export const ActivityLogContext = createContext<activityLogContextValue>("all");
+
+export const useActivityLogContext = () => {
+  const context = useContext(ActivityLogContext);
+
+  return context;
+};

package/src/components/atomic-crm/activity/ActivityLogDealCreated.tsx

@@ -0,0 +1,41 @@
+import { Link } from "react-router";
+import type { RaRecord } from "ra-core";
+
+import { RelativeDate } from "../misc/RelativeDate";
+import type { ActivityDealCreated } from "../types";
+import { useActivityLogContext } from "./ActivityLogContext";
+
+type ActivityLogDealCreatedProps = {
+  activity: RaRecord & ActivityDealCreated;
+};
+
+export function ActivityLogDealCreated({
+  activity,
+}: ActivityLogDealCreatedProps) {
+  const context = useActivityLogContext();
+  const { deal } = activity;
+  return (
+    <div className="p-0">
+      <div className="flex flex-row space-x-1 items-center w-full">
+        <div className="w-5 h-5 bg-gray-300 rounded-full" />
+        <div className="text-sm text-muted-foreground flex-grow">
+          <span className="text-muted-foreground text-sm">
+            Sales ID: {activity.sales_id}
+          </span>{" "}
+          added deal <Link to={`/deals/${deal.id}/show`}>{deal.name}</Link>{" "}
+          {context !== "company" && (
+            <>
+              to company {activity.company_id}{" "}
+              <RelativeDate date={activity.date} />
+            </>
+          )}
+        </div>
+        {context === "company" && (
+          <span className="text-muted-foreground text-sm">
+            <RelativeDate date={activity.date} />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/atomic-crm/activity/ActivityLogDealNoteCreated.tsx

@@ -0,0 +1,84 @@
+import type { RaRecord } from "ra-core";
+
+import { ReferenceField } from "@/components/admin/reference-field";
+import { CompanyAvatar } from "../companies/CompanyAvatar";
+import { RelativeDate } from "../misc/RelativeDate";
+import { SaleName } from "../sales/SaleName";
+import type { ActivityDealNoteCreated } from "../types";
+import { useActivityLogContext } from "./ActivityLogContext";
+import { ActivityLogNote } from "./ActivityLogNote";
+
+type ActivityLogDealNoteCreatedProps = {
+  activity: RaRecord & ActivityDealNoteCreated;
+};
+
+export function ActivityLogDealNoteCreated({
+  activity,
+}: ActivityLogDealNoteCreatedProps) {
+  const context = useActivityLogContext();
+  const { dealNote } = activity;
+  return (
+    <ActivityLogNote
+      header={
+        <div className="flex flex-row items-center gap-2 flex-grow">
+          <ReferenceField
+            source="deal_id"
+            reference="deals"
+            record={dealNote}
+            link={false}
+          >
+            <ReferenceField
+              source="company_id"
+              reference="companies"
+              link={false}
+            >
+              <CompanyAvatar width={20} height={20} />
+            </ReferenceField>
+          </ReferenceField>
+
+          <span className="text-sm text-muted-foreground flex-grow inline-flex">
+            <ReferenceField
+              source="sales_id"
+              reference="sales"
+              record={activity}
+              link={false}
+            >
+              <SaleName />
+            </ReferenceField>
+            &nbsp;added a note about deal&nbsp;
+            <ReferenceField
+              source="deal_id"
+              reference="deals"
+              record={dealNote}
+              link="show"
+            />
+            {context !== "company" && (
+              <>
+                {" at "}
+                <ReferenceField
+                  source="deal_id"
+                  reference="deals"
+                  record={dealNote}
+                  link={false}
+                >
+                  <ReferenceField
+                    source="company_id"
+                    reference="companies"
+                    link="show"
+                  />
+                </ReferenceField>{" "}
+              </>
+            )}
+          </span>
+
+          {context === "company" && (
+            <span className="text-muted-foreground text-sm">
+              <RelativeDate date={activity.date} />
+            </span>
+          )}
+        </div>
+      }
+      text={dealNote.text}
+    />
+  );
+}

package/src/components/atomic-crm/activity/ActivityLogIterator.tsx

@@ -0,0 +1,80 @@
+import { Fragment, useState } from "react";
+
+import { Separator } from "@/components/ui/separator";
+import {
+  COMPANY_CREATED,
+  CONTACT_CREATED,
+  CONTACT_NOTE_CREATED,
+  DEAL_CREATED,
+  DEAL_NOTE_CREATED,
+} from "../consts";
+import type { Activity } from "../types";
+import { ActivityLogCompanyCreated } from "./ActivityLogCompanyCreated";
+import { ActivityLogContactCreated } from "./ActivityLogContactCreated";
+import { ActivityLogContactNoteCreated } from "./ActivityLogContactNoteCreated";
+import { ActivityLogDealCreated } from "./ActivityLogDealCreated";
+import { ActivityLogDealNoteCreated } from "./ActivityLogDealNoteCreated";
+
+type ActivityLogIteratorProps = {
+  activities: Activity[];
+  pageSize: number;
+};
+
+export function ActivityLogIterator({
+  activities,
+  pageSize,
+}: ActivityLogIteratorProps) {
+  const [activitiesDisplayed, setActivityDisplayed] = useState(pageSize);
+
+  const filteredActivities = activities.slice(0, activitiesDisplayed);
+
+  return (
+    <div className="space-y-4">
+      {filteredActivities.map((activity, index) => (
+        <Fragment key={index}>
+          <ActivityItem key={activity.id} activity={activity} />
+          <Separator />
+        </Fragment>
+      ))}
+
+      {activitiesDisplayed < activities.length && (
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            setActivityDisplayed(
+              (activitiesDisplayed) => activitiesDisplayed + pageSize,
+            );
+          }}
+          className="flex w-full justify-center text-sm underline hover:no-underline"
+        >
+          Load more activity
+        </a>
+      )}
+    </div>
+  );
+}
+
+function ActivityItem({ activity }: { activity: Activity }) {
+  if (activity.type === COMPANY_CREATED) {
+    return <ActivityLogCompanyCreated activity={activity} />;
+  }
+
+  if (activity.type === CONTACT_CREATED) {
+    return <ActivityLogContactCreated activity={activity} />;
+  }
+
+  if (activity.type === CONTACT_NOTE_CREATED) {
+    return <ActivityLogContactNoteCreated activity={activity} />;
+  }
+
+  if (activity.type === DEAL_CREATED) {
+    return <ActivityLogDealCreated activity={activity} />;
+  }
+
+  if (activity.type === DEAL_NOTE_CREATED) {
+    return <ActivityLogDealNoteCreated activity={activity} />;
+  }
+
+  return null;
+}

package/src/components/atomic-crm/activity/ActivityLogNote.tsx

@@ -0,0 +1,36 @@
+import { Fragment, type ReactNode } from "react";
+
+type ActivityLogContactNoteCreatedProps = {
+  header: ReactNode;
+  text: string;
+};
+
+export function ActivityLogNote({
+  header,
+  text,
+}: ActivityLogContactNoteCreatedProps) {
+  if (!text) {
+    return null;
+  }
+  const paragraphs = text.split("\n");
+
+  return (
+    <div className="p-0">
+      <div className="flex flex-col space-y-2 w-full">
+        <div className="flex flex-row space-x-1 items-center w-full">
+          {header}
+        </div>
+        <div>
+          <div className="text-sm line-clamp-3 overflow-hidden">
+            {paragraphs.map((paragraph: string, index: number) => (
+              <Fragment key={index}>
+                {paragraph}
+                {index < paragraphs.length - 1 && <br />}
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { useCreate, useGetIdentity, useNotify } from "ra-core";
+import { AutocompleteInput } from "@/components/admin/autocomplete-input";
+import type { InputProps } from "ra-core";
+
+export const AutocompleteCompanyInput = ({
+  validate,
+}: Pick<InputProps, "validate">) => {
+  const [create] = useCreate();
+  const { identity } = useGetIdentity();
+  const notify = useNotify();
+  const handleCreateCompany = async (name?: string) => {
+    if (!name) return;
+    try {
+      const newCompany = await create(
+        "companies",
+        {
+          data: {
+            name,
+            sales_id: identity?.id,
+            created_at: new Date().toISOString(),
+          },
+        },
+        { returnPromise: true },
+      );
+      return newCompany;
+    } catch {
+      notify("An error occurred while creating the company", {
+        type: "error",
+      });
+    }
+  };
+
+  return (
+    <AutocompleteInput
+      optionText="name"
+      helperText={false}
+      onCreate={handleCreateCompany}
+      createItemLabel="Create %{item}"
+      createLabel="Start typing to create a new company"
+      validate={validate}
+    />
+  );
+};