realtimex-crm 0.1.2

package/src/components/atomic-crm/tags/colors.ts

@@ -0,0 +1,12 @@
+export const colors = [
+  "#eddcd2",
+  "#fff1e6",
+  "#fde2e4",
+  "#fad2e1",
+  "#c5dedd",
+  "#dbe7e4",
+  "#f0efeb",
+  "#d6e2e9",
+  "#bcd4e6",
+  "#99c1de",
+];

package/src/components/atomic-crm/tasks/AddTask.tsx

@@ -0,0 +1,191 @@
+import { Plus } from "lucide-react";
+import {
+  CreateBase,
+  Form,
+  RecordRepresentation,
+  required,
+  useDataProvider,
+  useGetIdentity,
+  useNotify,
+  useRecordContext,
+  useUpdate,
+} from "ra-core";
+import { useState } from "react";
+import { AutocompleteInput } from "@/components/admin/autocomplete-input";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { TextInput } from "@/components/admin/text-input";
+import { DateInput } from "@/components/admin/date-input";
+import { SelectInput } from "@/components/admin/select-input";
+import { SaveButton } from "@/components/admin/form";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { contactOptionText } from "../misc/ContactOption";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+
+export const AddTask = ({
+  selectContact,
+  display = "chip",
+}: {
+  selectContact?: boolean;
+  display?: "chip" | "icon";
+}) => {
+  const { identity } = useGetIdentity();
+  const dataProvider = useDataProvider();
+  const [update] = useUpdate();
+  const notify = useNotify();
+  const { taskTypes } = useConfigurationContext();
+  const contact = useRecordContext();
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleSuccess = async (data: any) => {
+    setOpen(false);
+    const contact = await dataProvider.getOne("contacts", {
+      id: data.contact_id,
+    });
+    if (!contact.data) return;
+
+    await update("contacts", {
+      id: contact.data.id,
+      data: { last_seen: new Date().toISOString() },
+      previousData: contact.data,
+    });
+
+    notify("Task added");
+  };
+
+  if (!identity) return null;
+
+  return (
+    <>
+      {display === "icon" ? (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="p-2 cursor-pointer"
+                onClick={handleOpen}
+              >
+                <Plus className="w-4 h-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Create task</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        <div className="my-2">
+          <Button
+            variant="outline"
+            className="h-6 cursor-pointer"
+            onClick={handleOpen}
+            size="sm"
+          >
+            <Plus className="w-4 h-4" />
+            Add task
+          </Button>
+        </div>
+      )}
+
+      <CreateBase
+        resource="tasks"
+        record={{
+          type: "None",
+          contact_id: contact?.id,
+          due_date: new Date().toISOString().slice(0, 10),
+          sales_id: identity.id,
+        }}
+        transform={(data) => {
+          const dueDate = new Date(data.due_date);
+          dueDate.setHours(0, 0, 0, 0);
+          data.due_date = dueDate.toISOString();
+          return {
+            ...data,
+            due_date: new Date(data.due_date).toISOString(),
+          };
+        }}
+        mutationOptions={{ onSuccess: handleSuccess }}
+      >
+        <Dialog open={open} onOpenChange={() => setOpen(false)}>
+          <DialogContent className="lg:max-w-xl overflow-y-auto max-h-9/10 top-1/20 translate-y-0">
+            <Form className="flex flex-col gap-4">
+              <DialogHeader>
+                <DialogTitle>
+                  {!selectContact
+                    ? "Create a new task for "
+                    : "Create a new task"}
+                  {!selectContact && (
+                    <RecordRepresentation
+                      record={contact}
+                      resource="contacts"
+                    />
+                  )}
+                </DialogTitle>
+              </DialogHeader>
+              <div className="flex flex-col gap-4">
+                <TextInput
+                  autoFocus
+                  source="text"
+                  label="Description"
+                  validate={required()}
+                  multiline
+                  className="m-0"
+                  helperText={false}
+                />
+                {selectContact && (
+                  <ReferenceInput
+                    source="contact_id"
+                    reference="contacts_summary"
+                  >
+                    <AutocompleteInput
+                      label="Contact"
+                      optionText={contactOptionText}
+                      helperText={false}
+                      validate={required()}
+                    />
+                  </ReferenceInput>
+                )}
+
+                <div className="grid grid-cols-2 gap-4">
+                  <DateInput
+                    source="due_date"
+                    helperText={false}
+                    validate={required()}
+                  />
+                  <SelectInput
+                    source="type"
+                    validate={required()}
+                    choices={taskTypes.map((type) => ({
+                      id: type,
+                      name: type,
+                    }))}
+                    helperText={false}
+                  />
+                </div>
+              </div>
+              <DialogFooter className="w-full justify-end">
+                <SaveButton />
+              </DialogFooter>
+            </Form>
+          </DialogContent>
+        </Dialog>
+      </CreateBase>
+    </>
+  );
+};

package/src/components/atomic-crm/tasks/Task.tsx

@@ -0,0 +1,184 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { MoreVertical } from "lucide-react";
+import { useDeleteWithUndoController, useNotify, useUpdate } from "ra-core";
+import { useEffect, useState } from "react";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { DateField } from "@/components/admin/date-field";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import type { Contact, Task as TData } from "../types";
+import { TaskEdit } from "./TaskEdit";
+
+export const Task = ({
+  task,
+  showContact,
+}: {
+  task: TData;
+  showContact?: boolean;
+}) => {
+  const notify = useNotify();
+  const queryClient = useQueryClient();
+
+  const [openEdit, setOpenEdit] = useState(false);
+
+  const handleCloseEdit = () => {
+    setOpenEdit(false);
+  };
+
+  const [update, { isPending: isUpdatePending, isSuccess, variables }] =
+    useUpdate();
+  const { handleDelete } = useDeleteWithUndoController({
+    record: task,
+    redirect: false,
+    mutationOptions: {
+      onSuccess() {
+        notify("Task deleted successfully", { undoable: true });
+      },
+    },
+  });
+
+  const handleEdit = () => {
+    setOpenEdit(true);
+  };
+
+  const handleCheck = () => () => {
+    update("tasks", {
+      id: task.id,
+      data: {
+        done_date: task.done_date ? null : new Date().toISOString(),
+      },
+      previousData: task,
+    });
+  };
+
+  useEffect(() => {
+    // We do not want to invalidate the query when a tack is checked or unchecked
+    if (
+      isUpdatePending ||
+      !isSuccess ||
+      variables?.data?.done_date != undefined
+    ) {
+      return;
+    }
+
+    queryClient.invalidateQueries({ queryKey: ["tasks", "getList"] });
+  }, [queryClient, isUpdatePending, isSuccess, variables]);
+
+  const labelId = `checkbox-list-label-${task.id}`;
+
+  return (
+    <>
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-2 flex-1">
+          <Checkbox
+            id={labelId}
+            checked={!!task.done_date}
+            onCheckedChange={handleCheck()}
+            disabled={isUpdatePending}
+            className="mt-1"
+          />
+          <div className={`flex-grow ${task.done_date ? "line-through" : ""}`}>
+            <div className="text-sm">
+              {task.type && task.type !== "None" && (
+                <>
+                  <span className="font-semibold text-sm">{task.type}</span>
+                  &nbsp;
+                </>
+              )}
+              {task.text}
+            </div>
+            <div className="text-sm text-muted-foreground">
+              due&nbsp;
+              <DateField source="due_date" record={task} />
+              {showContact && (
+                <ReferenceField<TData, Contact>
+                  source="contact_id"
+                  reference="contacts"
+                  record={task}
+                  link="show"
+                  className="inline text-sm text-muted-foreground"
+                  render={({ referenceRecord }) => {
+                    if (!referenceRecord) return null;
+                    return (
+                      <>
+                        {" "}
+                        (Re:&nbsp;
+                        {referenceRecord?.first_name}{" "}
+                        {referenceRecord?.last_name})
+                      </>
+                    );
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-5 pr-0! size-8 cursor-pointer"
+              aria-label="task actions"
+            >
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                update("tasks", {
+                  id: task.id,
+                  data: {
+                    due_date: new Date(Date.now() + 24 * 60 * 60 * 1000)
+                      .toISOString()
+                      .slice(0, 10),
+                  },
+                  previousData: task,
+                });
+              }}
+            >
+              Postpone to tomorrow
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                update("tasks", {
+                  id: task.id,
+                  data: {
+                    due_date: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+                      .toISOString()
+                      .slice(0, 10),
+                  },
+                  previousData: task,
+                });
+              }}
+            >
+              Postpone to next week
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer" onClick={handleEdit}>
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer" onClick={handleDelete}>
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* This part is for editing the Task directly via a Dialog */}
+      {openEdit && (
+        <TaskEdit taskId={task.id} open={openEdit} close={handleCloseEdit} />
+      )}
+    </>
+  );
+};

package/src/components/atomic-crm/tasks/TaskEdit.tsx

@@ -0,0 +1,96 @@
+import { EditBase, Form, required, useNotify, type Identifier } from "ra-core";
+import { DeleteButton } from "@/components/admin/delete-button";
+import { TextInput } from "@/components/admin/text-input";
+import { DateInput } from "@/components/admin/date-input";
+import { SelectInput } from "@/components/admin/select-input";
+import { SaveButton } from "@/components/admin/form";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import { useConfigurationContext } from "../root/ConfigurationContext";
+
+export const TaskEdit = ({
+  open,
+  close,
+  taskId,
+}: {
+  taskId: Identifier;
+  open: boolean;
+  close: () => void;
+}) => {
+  const { taskTypes } = useConfigurationContext();
+  const notify = useNotify();
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      {taskId && (
+        <EditBase
+          id={taskId}
+          resource="tasks"
+          className="mt-0"
+          mutationOptions={{
+            onSuccess: () => {
+              close();
+              notify("Task updated", {
+                type: "info",
+                undoable: true,
+              });
+            },
+          }}
+          redirect={false}
+        >
+          <DialogContent className="lg:max-w-xl overflow-y-auto max-h-9/10 top-1/20 translate-y-0">
+            <Form className="flex flex-col gap-4">
+              <DialogHeader>
+                <DialogTitle>Edit task</DialogTitle>
+              </DialogHeader>
+              <TextInput
+                autoFocus
+                source="text"
+                label="Description"
+                validate={required()}
+                multiline
+                helperText={false}
+              />
+              <div className="grid grid-cols-2 gap-4">
+                <DateInput
+                  source="due_date"
+                  helperText={false}
+                  validate={required()}
+                />
+                <SelectInput
+                  source="type"
+                  choices={taskTypes.map((type) => ({
+                    id: type,
+                    name: type,
+                  }))}
+                  helperText={false}
+                  validate={required()}
+                />
+              </div>
+              <DialogFooter className="w-full sm:justify-between gap-4">
+                <DeleteButton
+                  mutationOptions={{
+                    onSuccess: () => {
+                      close();
+                      notify("Task deleted", {
+                        type: "info",
+                        undoable: true,
+                      });
+                    },
+                  }}
+                  redirect={false}
+                />
+                <SaveButton label="Save" />
+              </DialogFooter>
+            </Form>
+          </DialogContent>
+        </EditBase>
+      )}
+    </Dialog>
+  );
+};

package/src/components/atomic-crm/tasks/TasksIterator.tsx

@@ -0,0 +1,30 @@
+import { isAfter } from "date-fns";
+import { useListContext } from "ra-core";
+
+import { Task } from "./Task";
+
+export const TasksIterator = ({
+  showContact,
+  className,
+}: {
+  showContact?: boolean;
+  className?: string;
+}) => {
+  const { data, error, isPending } = useListContext();
+  if (isPending || error || data.length === 0) return null;
+
+  // Keep only tasks that are not done or done less than 5 minutes ago
+  const tasks = data.filter(
+    (task) =>
+      !task.done_date ||
+      isAfter(new Date(task.done_date), new Date(Date.now() - 5 * 60 * 1000)),
+  );
+
+  return (
+    <div className={`space-y-2 ${className || ""}`}>
+      {tasks.map((task) => (
+        <Task task={task} showContact={showContact} key={task.id} />
+      ))}
+    </div>
+  );
+};