realtimex-crm 0.1.2

package/src/components/atomic-crm/notes/Note.tsx

@@ -0,0 +1,187 @@
+import { CircleX, Edit, Save, Trash2 } from "lucide-react";
+import {
+  Form,
+  useDelete,
+  useNotify,
+  useResourceContext,
+  useUpdate,
+  WithRecord,
+} from "ra-core";
+import { useState } from "react";
+import type { FieldValues, SubmitHandler } from "react-hook-form";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { CompanyAvatar } from "../companies/CompanyAvatar";
+import { Avatar } from "../contacts/Avatar";
+import { RelativeDate } from "../misc/RelativeDate";
+import { Status } from "../misc/Status";
+import { SaleName } from "../sales/SaleName";
+import type { ContactNote, DealNote } from "../types";
+import { NoteAttachments } from "./NoteAttachments";
+import { NoteInputs } from "./NoteInputs";
+
+export const Note = ({
+  showStatus,
+  note,
+}: {
+  showStatus?: boolean;
+  note: DealNote | ContactNote;
+  isLast: boolean;
+}) => {
+  const [isHover, setHover] = useState(false);
+  const [isEditing, setEditing] = useState(false);
+  const resource = useResourceContext();
+  const notify = useNotify();
+
+  const [update, { isPending }] = useUpdate();
+
+  const [deleteNote] = useDelete(
+    resource,
+    { id: note.id, previousData: note },
+    {
+      mutationMode: "undoable",
+      onSuccess: () => {
+        notify("Note deleted", { type: "info", undoable: true });
+      },
+    },
+  );
+
+  const handleDelete = () => {
+    deleteNote();
+  };
+
+  const handleEnterEditMode = () => {
+    setEditing(!isEditing);
+  };
+
+  const handleCancelEdit = () => {
+    setEditing(false);
+    setHover(false);
+  };
+
+  const handleNoteUpdate: SubmitHandler<FieldValues> = (values) => {
+    update(
+      resource,
+      { id: note.id, data: values, previousData: note },
+      {
+        onSuccess: () => {
+          setEditing(false);
+          setHover(false);
+        },
+      },
+    );
+  };
+
+  return (
+    <div
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      <div className="flex items-center space-x-4 w-full">
+        {resource === "contactNote" ? (
+          <Avatar width={20} height={20} />
+        ) : (
+          <ReferenceField source="company_id" reference="companies" link="show">
+            <CompanyAvatar width={20} height={20} />
+          </ReferenceField>
+        )}
+        <div className="inline-flex h-full items-center text-sm text-muted-foreground">
+          <ReferenceField
+            record={note}
+            resource={resource}
+            source="sales_id"
+            reference="sales"
+            link={false}
+          >
+            <WithRecord render={(record) => <SaleName sale={record} />} />
+          </ReferenceField>{" "}
+          added a note{" "}
+          {showStatus && note.status && (
+            <Status className="ml-2" status={note.status} />
+          )}
+        </div>
+        <span className={`${isHover ? "visible" : "invisible"}`}>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleEnterEditMode}
+                  className="p-1 h-auto cursor-pointer"
+                >
+                  <Edit className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Edit note</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleDelete}
+                  className="p-1 h-auto cursor-pointer"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Delete note</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </span>
+        <div className="flex-1"></div>
+        <span className="text-sm text-muted-foreground">
+          <RelativeDate date={note.date} />
+        </span>
+      </div>
+      {isEditing ? (
+        <Form onSubmit={handleNoteUpdate} record={note} className="mt-1">
+          <NoteInputs showStatus={showStatus} />
+          <div className="flex justify-end mt-2 space-x-4">
+            <Button
+              variant="ghost"
+              onClick={handleCancelEdit}
+              type="button"
+              className="cursor-pointer"
+            >
+              <CircleX className="w-4 h-4" />
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={isPending}
+              className="flex items-center gap-2 cursor-pointer"
+            >
+              <Save className="w-4 h-4" />
+              Update note
+            </Button>
+          </div>
+        </Form>
+      ) : (
+        <div className="pt-2 [&_p:empty]:min-h-[0.75em]">
+          {note.text?.split("\n").map((paragraph: string, index: number) => (
+            <p className="text-sm leading-6 m-0" key={index}>
+              {paragraph}
+            </p>
+          ))}
+
+          {note.attachments && <NoteAttachments note={note} />}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/atomic-crm/notes/NoteAttachments.tsx

@@ -0,0 +1,56 @@
+import { Paperclip } from "lucide-react";
+
+import type { AttachmentNote, ContactNote, DealNote } from "../types";
+
+export const NoteAttachments = ({ note }: { note: ContactNote | DealNote }) => {
+  if (!note.attachments || note.attachments.length === 0) {
+    return null;
+  }
+
+  const imageAttachments = note.attachments.filter(
+    (attachment: AttachmentNote) => isImageMimeType(attachment.type),
+  );
+  const otherAttachments = note.attachments.filter(
+    (attachment: AttachmentNote) => !isImageMimeType(attachment.type),
+  );
+
+  return (
+    <div className="flex flex-col">
+      {imageAttachments.length > 0 && (
+        <div className="grid grid-cols-4 gap-8">
+          {imageAttachments.map((attachment: AttachmentNote, index: number) => (
+            <div key={index}>
+              <img
+                src={attachment.src}
+                alt={attachment.title}
+                className="w-[200px] h-[100px] object-cover cursor-pointer object-left border border-border"
+                onClick={() => window.open(attachment.src, "_blank")}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+      {otherAttachments.length > 0 &&
+        otherAttachments.map((attachment: AttachmentNote, index: number) => (
+          <div key={index} className="flex items-center gap-2">
+            <Paperclip className="w-4 h-4" />
+            <a
+              href={attachment.src}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:no-underline"
+            >
+              {attachment.title}
+            </a>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+const isImageMimeType = (mimeType?: string): boolean => {
+  if (!mimeType) {
+    return false;
+  }
+  return mimeType.startsWith("image/");
+};

package/src/components/atomic-crm/notes/NoteCreate.tsx

@@ -0,0 +1,112 @@
+import {
+  CreateBase,
+  Form,
+  useGetIdentity,
+  useListContext,
+  useNotify,
+  useRecordContext,
+  useResourceContext,
+  useUpdate,
+  type Identifier,
+  type RaRecord,
+} from "ra-core";
+import { useFormContext } from "react-hook-form";
+import { SaveButton } from "@/components/admin/form";
+import { cn } from "@/lib/utils";
+
+import { NoteInputs } from "./NoteInputs";
+import { getCurrentDate } from "./utils";
+
+const foreignKeyMapping = {
+  contacts: "contact_id",
+  deals: "deal_id",
+};
+
+export const NoteCreate = ({
+  reference,
+  showStatus,
+  className,
+}: {
+  reference: "contacts" | "deals";
+  showStatus?: boolean;
+  className?: string;
+}) => {
+  const resource = useResourceContext();
+  const record = useRecordContext();
+  const { identity } = useGetIdentity();
+
+  if (!record || !identity) return null;
+
+  return (
+    <CreateBase resource={resource} redirect={false}>
+      <Form>
+        <div className={cn("space-y-3", className)}>
+          <NoteInputs showStatus={showStatus} />
+          <NoteCreateButton reference={reference} record={record} />
+        </div>
+      </Form>
+    </CreateBase>
+  );
+};
+
+const NoteCreateButton = ({
+  reference,
+  record,
+}: {
+  reference: "contacts" | "deals";
+  record: RaRecord<Identifier>;
+}) => {
+  const [update] = useUpdate();
+  const notify = useNotify();
+  const { identity } = useGetIdentity();
+  const { reset } = useFormContext();
+  const { refetch } = useListContext();
+
+  if (!record || !identity) return null;
+
+  const resetValues: {
+    date: string;
+    text: null;
+    attachments: null;
+    status?: string;
+  } = {
+    date: getCurrentDate(),
+    text: null,
+    attachments: null,
+  };
+
+  if (reference === "contacts") {
+    resetValues.status = "warm";
+  }
+
+  const handleSuccess = (data: any) => {
+    reset(resetValues, { keepValues: false });
+    refetch();
+    update(reference, {
+      id: (record && record.id) as unknown as Identifier,
+      data: { last_seen: new Date().toISOString(), status: data.status },
+      previousData: record,
+    });
+    notify("Note added");
+  };
+
+  return (
+    <div className="flex justify-end">
+      <SaveButton
+        type="button"
+        label="Add this note"
+        transform={(data) => ({
+          ...data,
+          [foreignKeyMapping[reference]]: record.id,
+          sales_id: identity.id,
+          date: data.date || getCurrentDate(),
+        })}
+        mutationOptions={{
+          onSuccess: handleSuccess,
+        }}
+      >
+        Add this note
+      </SaveButton>
+    </div>
+  );
+};

package/src/components/atomic-crm/notes/NoteInputs.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { TextInput } from "@/components/admin/text-input";
+import { FileInput } from "@/components/admin/file-input";
+import { FileField } from "@/components/admin/file-field";
+import { SelectInput } from "@/components/admin/select-input";
+import { DateTimeInput } from "@/components/admin/date-time-input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+import { Status } from "../misc/Status";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import { getCurrentDate } from "./utils";
+
+export const NoteInputs = ({ showStatus }: { showStatus?: boolean }) => {
+  const { noteStatuses } = useConfigurationContext();
+  const { setValue } = useFormContext();
+  const [displayMore, setDisplayMore] = useState(false);
+
+  return (
+    <div className="space-y-2">
+      <TextInput
+        source="text"
+        label={false}
+        multiline
+        helperText={false}
+        placeholder="Add a note"
+        rows={6}
+      />
+
+      {!displayMore && (
+        <div className="flex justify-end items-center gap-2">
+          <Button
+            variant="link"
+            size="sm"
+            onClick={() => {
+              setDisplayMore(!displayMore);
+              setValue("date", getCurrentDate());
+            }}
+            className="text-sm text-muted-foreground underline hover:no-underline p-0 h-auto cursor-pointer"
+          >
+            Show options
+          </Button>
+          <span className="text-sm text-muted-foreground">
+            (attach files, or change details)
+          </span>
+        </div>
+      )}
+
+      <div
+        className={cn(
+          "space-y-3 mt-3 overflow-hidden transition-transform ease-in-out duration-300 origin-top",
+          !displayMore ? "scale-y-0 max-h-0 h-0" : "scale-y-100",
+        )}
+      >
+        <div className="grid grid-cols-2 gap-4">
+          {showStatus && (
+            <SelectInput
+              source="status"
+              choices={noteStatuses.map((status) => ({
+                id: status.value,
+                name: status.label,
+                value: status.value,
+              }))}
+              optionText={optionRenderer}
+              defaultValue={"warm"}
+              helperText={false}
+            />
+          )}
+          <DateTimeInput
+            source="date"
+            label="Date"
+            helperText={false}
+            className="text-primary"
+            defaultValue={getCurrentDate()}
+          />
+        </div>
+        <FileInput source="attachments" multiple>
+          <FileField source="src" title="title" target="_blank" />
+        </FileInput>
+      </div>
+    </div>
+  );
+};
+
+const optionRenderer = (choice: any) => {
+  return (
+    <div>
+      <Status status={choice.value} /> {choice.name}
+    </div>
+  );
+};

package/src/components/atomic-crm/notes/NotesIterator.tsx

@@ -0,0 +1,37 @@
+import { useListContext } from "ra-core";
+import { Fragment } from "react";
+import { Separator } from "@/components/ui/separator";
+
+import { Note } from "./Note";
+import { NoteCreate } from "./NoteCreate";
+
+export const NotesIterator = ({
+  reference,
+  showStatus,
+}: {
+  reference: "contacts" | "deals";
+  showStatus?: boolean;
+}) => {
+  const { data, error, isPending } = useListContext();
+  if (isPending || error) return null;
+  return (
+    <div className="mt-4">
+      <NoteCreate reference={reference} showStatus={showStatus} />
+      {data && (
+        <div className="mt-4 space-y-4">
+          {data.map((note, index) => (
+            <Fragment key={index}>
+              <Note
+                note={note}
+                isLast={index === data.length - 1}
+                key={index}
+                showStatus={showStatus}
+              />
+              {index < data.length - 1 && <Separator />}
+            </Fragment>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/atomic-crm/notes/StatusSelector.tsx

@@ -0,0 +1,39 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { Status } from "../misc/Status";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+
+export const StatusSelector = ({ status, setStatus }: any) => {
+  const { noteStatuses } = useConfigurationContext();
+
+  const currentStatus = noteStatuses.find((s) => s.value === status);
+
+  return (
+    <Select value={status} onValueChange={setStatus}>
+      <SelectTrigger className="w-32">
+        <SelectValue>
+          {currentStatus && (
+            <div className="flex items-center gap-2">
+              {currentStatus.label} <Status status={currentStatus.value} />
+            </div>
+          )}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {noteStatuses.map((statusOption) => (
+          <SelectItem key={statusOption.value} value={statusOption.value}>
+            <div className="flex items-center gap-2">
+              {statusOption.label} <Status status={statusOption.value} />
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from "./NoteCreate";
+export * from "./NotesIterator";
+export * from "./StatusSelector";

package/src/components/atomic-crm/notes/utils.ts

@@ -0,0 +1,13 @@
+export const getCurrentDate = () => {
+  const now = new Date();
+  const offset = now.getTimezoneOffset();
+  const localDate = new Date(now.getTime() - offset * 60 * 1000);
+  return localDate.toISOString().slice(0, 16);
+};
+
+export const formatNoteDate = (dateString: string) => {
+  const date = new Date(dateString);
+  date.setSeconds(0);
+  date.setMilliseconds(0);
+  return date.toISOString();
+};