realtimex-crm 0.13.8 → 0.14.0

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

@@ -0,0 +1,122 @@
+import { Calendar, Building2, UserCircle, UserCheck, Pencil } from "lucide-react";
+import { useRecordContext } from "ra-core";
+import { useState, type ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { DeleteButton } from "@/components/admin/delete-button";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { TextField } from "@/components/admin/text-field";
+import { DateField } from "@/components/admin/date-field";
+
+import { AsideSection } from "../misc/AsideSection";
+import type { Task } from "../types";
+import { TaskEdit } from "./TaskEdit";
+
+export const TaskAside = () => {
+  const record = useRecordContext<Task>();
+  const [editOpen, setEditOpen] = useState(false);
+
+  if (!record) return null;
+  return (
+    <div className="hidden sm:block w-64 min-w-64 text-sm">
+      <div className="mb-4 -ml-1">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setEditOpen(true)}
+          className="flex items-center gap-2"
+        >
+          <Pencil className="h-4 w-4" />
+          Edit Task
+        </Button>
+      </div>
+
+      <TaskEdit
+        open={editOpen}
+        close={() => setEditOpen(false)}
+        taskId={record.id}
+      />
+
+      <AsideSection title="Task Info">
+        <InfoRow
+          icon={<Calendar className="w-4 h-4 text-muted-foreground" />}
+          label="Due Date"
+          value={<DateField source="due_date" />}
+        />
+        {record.done_date && (
+          <InfoRow
+            icon={<Calendar className="w-4 h-4 text-muted-foreground" />}
+            label="Completed"
+            value={<DateField source="done_date" />}
+          />
+        )}
+      </AsideSection>
+
+      <AsideSection title="Related">
+        <InfoRow
+          icon={<UserCircle className="w-4 h-4 text-muted-foreground" />}
+          label="Contact"
+          value={
+            <ReferenceField
+              source="contact_id"
+              reference="contacts"
+              link="show"
+            />
+          }
+        />
+        <InfoRow
+          icon={<Building2 className="w-4 h-4 text-muted-foreground" />}
+          label="Company"
+          value={
+            <ReferenceField source="contact_id" reference="contacts" link={false}>
+              <ReferenceField source="company_id" reference="companies" link="show">
+                <TextField source="name" />
+              </ReferenceField>
+            </ReferenceField>
+          }
+        />
+      </AsideSection>
+
+      <AsideSection title="Assignment">
+        <InfoRow
+          icon={<UserCheck className="w-4 h-4 text-muted-foreground" />}
+          label="Assigned To"
+          value={
+            <ReferenceField source="assigned_to" reference="sales" link={false} />
+          }
+        />
+        <InfoRow
+          icon={<UserCircle className="w-4 h-4 text-muted-foreground" />}
+          label="Created By"
+          value={
+            <ReferenceField source="sales_id" reference="sales" link={false} />
+          }
+        />
+      </AsideSection>
+
+      <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 InfoRow = ({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: ReactNode;
+}) => (
+  <div className="flex flex-col gap-1 mb-3">
+    <div className="flex items-center gap-2">
+      {icon}
+      <span className="text-xs text-muted-foreground">{label}</span>
+    </div>
+    <div className="pl-6 text-sm">{value}</div>
+  </div>
+);

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

@@ -0,0 +1,112 @@
+import { AutocompleteInput } from "@/components/admin/autocomplete-input";
+import { DateInput } from "@/components/admin/date-input";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { SelectInput } from "@/components/admin/select-input";
+import { TextInput } from "@/components/admin/text-input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Create } from "@/components/admin/create";
+import {
+  Form,
+  required,
+  useGetIdentity,
+  useNotify,
+  useRedirect,
+} from "ra-core";
+
+import { FormToolbar } from "../layout/FormToolbar";
+import { contactOptionText } from "../misc/ContactOption";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+
+export const TaskCreate = () => {
+  const { identity } = useGetIdentity();
+  const { taskTypes, taskPriorities, taskStatuses } = useConfigurationContext();
+  const notify = useNotify();
+  const redirect = useRedirect();
+
+  const handleSuccess = () => {
+    notify("Task created");
+    redirect("list", "tasks");
+  };
+
+  return (
+    <div className="mt-4 max-w-2xl mx-auto">
+      <Card>
+        <CardHeader>
+          <CardTitle>Create Task</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Create
+            resource="tasks"
+            redirect="list"
+            mutationOptions={{ onSuccess: handleSuccess }}
+            transform={(data) => ({
+              ...data,
+              sales_id: identity?.id,
+              created_at: new Date().toISOString(),
+              updated_at: new Date().toISOString(),
+            })}
+          >
+            <Form
+              defaultValues={{
+                due_date: new Date().toISOString().slice(0, 10),
+                priority: "medium",
+                status: "todo",
+                assigned_to: identity?.id,
+              }}
+            >
+              <TextInput
+                autoFocus
+                source="text"
+                label="Description"
+                validate={required()}
+                multiline
+                className="w-full"
+              />
+              <div className="grid grid-cols-2 gap-4 mt-4">
+                <ReferenceInput
+                  source="contact_id"
+                  reference="contacts_summary"
+                >
+                  <AutocompleteInput
+                    label="Contact"
+                    optionText={contactOptionText}
+                    validate={required()}
+                  />
+                </ReferenceInput>
+                <DateInput
+                  source="due_date"
+                  validate={required()}
+                />
+                <SelectInput
+                  source="type"
+                  validate={required()}
+                  choices={taskTypes.map((type) => ({
+                    id: type,
+                    name: type,
+                  }))}
+                />
+                <SelectInput
+                  source="priority"
+                  choices={taskPriorities}
+                />
+                <SelectInput
+                  source="status"
+                  choices={taskStatuses}
+                />
+                <ReferenceInput source="assigned_to" reference="sales">
+                  <SelectInput
+                    optionText={(record) =>
+                      `${record.first_name} ${record.last_name}`
+                    }
+                    label="Assigned To"
+                  />
+                </ReferenceInput>
+              </div>
+              <FormToolbar />
+            </Form>
+          </Create>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

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

@@ -3,6 +3,7 @@ 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 { ReferenceInput } from "@/components/admin/reference-input";
 import { SaveButton } from "@/components/admin/form";
 import {
   Dialog,
@@ -23,7 +24,7 @@ export const TaskEdit = ({
   open: boolean;
   close: () => void;
 }) => {
-  const { taskTypes } = useConfigurationContext();
+  const { taskTypes, taskPriorities, taskStatuses } = useConfigurationContext();
   const notify = useNotify();
   return (
     <Dialog open={open} onOpenChange={close}>
@@ -71,6 +72,24 @@ export const TaskEdit = ({
                   helperText={false}
                   validate={required()}
                 />
+                <SelectInput
+                  source="priority"
+                  choices={taskPriorities}
+                  helperText={false}
+                />
+                <SelectInput
+                  source="status"
+                  choices={taskStatuses}
+                  helperText={false}
+                />
+                <ReferenceInput source="assigned_to" reference="sales">
+                  <SelectInput
+                    optionText={(record) =>
+                      `${record.first_name} ${record.last_name}`
+                    }
+                    label="Assigned To"
+                  />
+                </ReferenceInput>
               </div>
               <DialogFooter className="w-full sm:justify-between gap-4">
                 <DeleteButton

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

@@ -0,0 +1,52 @@
+import { AutocompleteInput } from "@/components/admin/autocomplete-input";
+import { BooleanInput } from "@/components/admin/boolean-input";
+import { CreateButton } from "@/components/admin/create-button";
+import { ExportButton } from "@/components/admin/export-button";
+import { FilterButton } from "@/components/admin/filter-form";
+import { List } from "@/components/admin/list";
+import { ReferenceInput } from "@/components/admin/reference-input";
+import { SearchInput } from "@/components/admin/search-input";
+import { SelectInput } from "@/components/admin/select-input";
+
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import { TopToolbar } from "../layout/TopToolbar";
+import { MyTasksInput } from "./MyTasksInput";
+import { TaskListTable } from "./TaskListTable";
+
+const TaskList = () => {
+  const { taskStatuses, taskPriorities } = useConfigurationContext();
+
+  const taskFilters = [
+    <SearchInput source="q" alwaysOn />,
+    <SelectInput source="status" choices={taskStatuses} alwaysOn />,
+    <ReferenceInput source="contact_id" reference="contacts">
+      <AutocompleteInput label={false} placeholder="Contact" />
+    </ReferenceInput>,
+    <SelectInput source="priority" choices={taskPriorities} />,
+    <MyTasksInput source="assigned_to" label="My Tasks" alwaysOn />,
+    <BooleanInput source="archived" label="Archived" />,
+  ];
+
+  return (
+    <List
+      perPage={25}
+      sort={{ field: "due_date", order: "ASC" }}
+      filters={taskFilters}
+      filterDefaultValues={{ archived: false }}
+      actions={<TaskActions />}
+      title="Tasks"
+    >
+      <TaskListTable />
+    </List>
+  );
+};
+
+const TaskActions = () => (
+  <TopToolbar>
+    <FilterButton />
+    <ExportButton />
+    <CreateButton label="New Task" />
+  </TopToolbar>
+);
+
+export default TaskList;

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

@@ -0,0 +1,60 @@
+import { DataTable } from "@/components/admin/data-table";
+import { DateField } from "@/components/admin/date-field";
+import { ReferenceField } from "@/components/admin/reference-field";
+import { TextField } from "@/components/admin/text-field";
+
+import type { Task } from "../types";
+import { TaskPriorityBadge } from "./TaskPriorityBadge";
+import { TaskStatusBadge } from "./TaskStatusBadge";
+
+export const TaskListTable = () => {
+  return (
+    <DataTable rowClick="show">
+      <DataTable.Col
+        source="text"
+        label="Task"
+        className="w-[35%]"
+        cellClassName="max-w-md"
+        render={(record: Task) => (
+          <div className="truncate" title={record.text}>
+            {record.type && record.type !== "None" && (
+              <span className="font-semibold">{record.type}: </span>
+            )}
+            {record.text}
+          </div>
+        )}
+      />
+      <DataTable.Col label="Contact" className="w-[15%]">
+        <ReferenceField source="contact_id" reference="contacts" link="show" />
+      </DataTable.Col>
+      <DataTable.Col label="Company" className="w-[15%]">
+        <ReferenceField
+          source="company_id"
+          reference="companies"
+          link="show"
+          sortable={false}
+        >
+          <TextField source="name" />
+        </ReferenceField>
+      </DataTable.Col>
+      <DataTable.Col label="Due Date" className="w-[12%]">
+        <DateField source="due_date" />
+      </DataTable.Col>
+      <DataTable.Col
+        label="Priority"
+        className="w-[10%]"
+        render={(record: Task) => (
+          <TaskPriorityBadge priority={record.priority} />
+        )}
+      />
+      <DataTable.Col
+        label="Status"
+        className="w-[10%]"
+        render={(record: Task) => <TaskStatusBadge status={record.status} />}
+      />
+      <DataTable.Col label="Assigned To" className="w-[13%]">
+        <ReferenceField source="assigned_to" reference="sales" link={false} />
+      </DataTable.Col>
+    </DataTable>
+  );
+};

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

@@ -0,0 +1,20 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const priorityColors = {
+  low: "bg-slate-500 hover:bg-slate-600",
+  medium: "bg-blue-500 hover:bg-blue-600",
+  high: "bg-orange-500 hover:bg-orange-600",
+  urgent: "bg-red-500 hover:bg-red-600",
+};
+
+export const TaskPriorityBadge = ({ priority }: { priority?: string }) => {
+  if (!priority) return null;
+  const colorClass = priorityColors[priority as keyof typeof priorityColors] || "bg-slate-500";
+  
+  return (
+    <Badge className={cn("capitalize", colorClass)}>
+      {priority}
+    </Badge>
+  );
+};

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

@@ -0,0 +1,71 @@
+import { ShowBase, useShowContext } from "ra-core";
+import { Card, CardContent } from "@/components/ui/card";
+import { ReferenceManyField } from "@/components/admin/reference-many-field";
+
+import { NoteCreate, NotesIterator } from "../notes";
+import type { Task } from "../types";
+import { TaskAside } from "./TaskAside";
+import { TaskPriorityBadge } from "./TaskPriorityBadge";
+import { TaskStatusBadge } from "./TaskStatusBadge";
+import { TaskActivityTimeline } from "./TaskActivityTimeline";
+
+export const TaskShow = () => (
+  <ShowBase>
+    <TaskShowContent />
+  </ShowBase>
+);
+
+const TaskShowContent = () => {
+  const { record, isPending } = useShowContext<Task>();
+  if (isPending || !record) return null;
+
+  return (
+    <div className="mt-2 mb-2 flex gap-8">
+      <div className="flex-1">
+        <Card>
+          <CardContent>
+            {/* Task Header */}
+            <div className="mb-6">
+              <h5 className="text-xl font-semibold mb-3">{record.type}</h5>
+              <div className="flex gap-3 mb-4">
+                <TaskStatusBadge status={record.status} />
+                <TaskPriorityBadge priority={record.priority} />
+              </div>
+              {record.text && (
+                <p className="text-sm text-muted-foreground whitespace-pre-line">
+                  {record.text}
+                </p>
+              )}
+            </div>
+
+            {/* Activity Timeline */}
+            <div className="mt-8">
+              <h3 className="text-lg font-semibold mb-4">Activity Timeline</h3>
+              <p className="text-sm text-muted-foreground mb-3">
+                Track all status changes and updates for this task
+              </p>
+              <TaskActivityTimeline taskId={record.id} />
+            </div>
+
+            {/* Notes */}
+            <div className="mt-8">
+              <h3 className="text-lg font-semibold mb-4">Notes</h3>
+              <p className="text-sm text-muted-foreground mb-3">
+                Add notes and updates to this task
+              </p>
+              <ReferenceManyField
+                reference="taskNotes"
+                target="task_id"
+                sort={{ field: "date", order: "DESC" }}
+                empty={<NoteCreate reference="tasks" showStatus className="mt-4" />}
+              >
+                <NotesIterator reference="tasks" showStatus />
+              </ReferenceManyField>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      <TaskAside />
+    </div>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const statusColors = {
+  todo: "bg-slate-500 hover:bg-slate-600",
+  in_progress: "bg-blue-500 hover:bg-blue-600",
+  blocked: "bg-red-500 hover:bg-red-600",
+  done: "bg-green-500 hover:bg-green-600",
+  cancelled: "bg-gray-400 hover:bg-gray-500",
+};
+
+export const TaskStatusBadge = ({ status }: { status?: string }) => {
+    if (!status) return null;
+    const colorClass = statusColors[status as keyof typeof statusColors] || "bg-slate-500";
+    
+    return (
+        <Badge className={cn("capitalize", colorClass)}>
+            {status.replace("_", " ")}
+        </Badge>
+    );
+};

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

@@ -0,0 +1,9 @@
+import { TaskCreate } from "./TaskCreate";
+import TaskList from "./TaskList";
+import { TaskShow } from "./TaskShow";
+
+export default {
+    list: TaskList,
+    show: TaskShow,
+    create: TaskCreate,
+};

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

@@ -216,6 +216,15 @@ export type Tag = {
   color: string;
 } & Pick<RaRecord, "id">;
 
+export type TaskPriority = "low" | "medium" | "high" | "urgent";
+
+export type TaskStatus =
+  | "todo"
+  | "in_progress"
+  | "blocked"
+  | "done"
+  | "cancelled";
+
 export type Task = {
   contact_id: Identifier;
   type: string;
@@ -223,6 +232,47 @@ export type Task = {
   due_date: string;
   done_date?: string | null;
   sales_id?: Identifier;
+  priority?: TaskPriority;
+  assigned_to?: Identifier;
+  status?: TaskStatus;
+  created_at?: string;
+  updated_at?: string;
+  archived?: boolean;
+  archived_at?: string;
+} & Pick<RaRecord, "id">;
+
+export type TaskSummary = Task & {
+  contact_first_name?: string;
+  contact_last_name?: string;
+  contact_email?: string;
+  company_id?: Identifier;
+  company_name?: string;
+  assigned_first_name?: string;
+  assigned_last_name?: string;
+  creator_first_name?: string;
+  creator_last_name?: string;
+  nb_notes?: number;
+  last_note_date?: string;
+};
+
+export type TaskNote = {
+  task_id: Identifier;
+  text: string;
+  date: string;
+  sales_id: Identifier;
+  status?: string;
+  created_at?: string;
+  updated_at?: string;
+} & Pick<RaRecord, "id">;
+
+export type TaskActivity = {
+  task_id: Identifier;
+  sales_id: Identifier;
+  action: string;
+  field_name?: string;
+  old_value?: string;
+  new_value?: string;
+  created_at: string;
 } & Pick<RaRecord, "id">;
 
 export type ActivityCompanyCreated = {

package/src/components/ui/visually-hidden.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden"
+
+function VisuallyHidden({
+  ...props
+}: React.ComponentProps<typeof VisuallyHiddenPrimitive.Root>) {
+  return <VisuallyHiddenPrimitive.Root data-slot="visually-hidden" {...props} />
+}
+
+export { VisuallyHidden }