crm2

client/src/modules/crm/CrmDetailPage.tsx

@@ -1,12 +1,14 @@
 import { permissions } from "@mrp/shared";
-import type { CrmRecordDetailDto } from "@mrp/shared/dist/crm/types.js";
+import type { CrmContactEntryInput, CrmRecordDetailDto } from "@mrp/shared/dist/crm/types.js";
 import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 
 import { useAuth } from "../../auth/AuthProvider";
 import { api, ApiError } from "../../lib/api";
+import { CrmContactEntryForm } from "./CrmContactEntryForm";
+import { CrmContactTypeBadge } from "./CrmContactTypeBadge";
 import { CrmStatusBadge } from "./CrmStatusBadge";
-import { type CrmEntity, crmConfigs } from "./config";
+import { type CrmEntity, crmConfigs, emptyCrmContactEntryInput } from "./config";
 
 interface CrmDetailPageProps {
   entity: CrmEntity;
@@ -19,6 +21,9 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
   const config = crmConfigs[entity];
   const [record, setRecord] = useState<CrmRecordDetailDto | null>(null);
   const [status, setStatus] = useState(`Loading ${config.singularLabel.toLowerCase()}...`);
+  const [contactEntryForm, setContactEntryForm] = useState<CrmContactEntryInput>(emptyCrmContactEntryInput);
+  const [contactEntryStatus, setContactEntryStatus] = useState("Add a timeline entry for this account.");
+  const [isSavingContactEntry, setIsSavingContactEntry] = useState(false);
 
   const canManage = user?.permissions.includes(permissions.crmWrite) ?? false;
 
@@ -33,6 +38,7 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
       .then((nextRecord) => {
         setRecord(nextRecord);
         setStatus(`${config.singularLabel} record loaded.`);
+        setContactEntryStatus("Add a timeline entry for this account.");
       })
       .catch((error: unknown) => {
         const message = error instanceof ApiError ? error.message : `Unable to load ${config.singularLabel.toLowerCase()}.`;
@@ -44,6 +50,48 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
     return <div className="rounded-[28px] border border-line/70 bg-surface/90 p-8 text-sm text-muted shadow-panel">{status}</div>;
   }
 
+  function updateContactEntryField<Key extends keyof CrmContactEntryInput>(key: Key, value: CrmContactEntryInput[Key]) {
+    setContactEntryForm((current) => ({ ...current, [key]: value }));
+  }
+
+  async function handleContactEntrySubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!token || !recordId) {
+      return;
+    }
+
+    setIsSavingContactEntry(true);
+    setContactEntryStatus("Saving timeline entry...");
+
+    try {
+      const nextEntry =
+        entity === "customer"
+          ? await api.createCustomerContactEntry(token, recordId, contactEntryForm)
+          : await api.createVendorContactEntry(token, recordId, contactEntryForm);
+
+      setRecord((current) =>
+        current
+          ? {
+              ...current,
+              contactHistory: [nextEntry, ...current.contactHistory].sort(
+                (left, right) => new Date(right.contactAt).getTime() - new Date(left.contactAt).getTime()
+              ),
+            }
+          : current
+      );
+      setContactEntryForm({
+        ...emptyCrmContactEntryInput,
+        contactAt: new Date().toISOString(),
+      });
+      setContactEntryStatus("Timeline entry added.");
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to save timeline entry.";
+      setContactEntryStatus(message);
+    } finally {
+      setIsSavingContactEntry(false);
+    }
+  }
+
   return (
     <section className="space-y-6">
       <div className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
@@ -76,7 +124,7 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
           </div>
         </div>
       </div>
-      <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
+      <div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
         <article className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact</p>
           <dl className="mt-6 grid gap-5 md:grid-cols-2">
@@ -99,7 +147,7 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
           </dl>
         </article>
         <article className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Notes</p>
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Internal Notes</p>
           <p className="mt-4 whitespace-pre-line text-sm leading-7 text-text">
             {record.notes || "No internal notes recorded for this account yet."}
           </p>
@@ -108,6 +156,55 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
           </div>
         </article>
       </div>
+      <section className="grid gap-6 xl:grid-cols-[0.85fr_1.15fr]">
+        {canManage ? (
+          <article className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact History</p>
+            <h4 className="mt-3 text-xl font-bold text-text">Add timeline entry</h4>
+            <p className="mt-2 text-sm text-muted">
+              Record calls, emails, meetings, and follow-up notes directly against this account.
+            </p>
+            <div className="mt-6">
+              <CrmContactEntryForm
+                form={contactEntryForm}
+                isSaving={isSavingContactEntry}
+                status={contactEntryStatus}
+                onChange={updateContactEntryField}
+                onSubmit={handleContactEntrySubmit}
+              />
+            </div>
+          </article>
+        ) : null}
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Timeline</p>
+          <h4 className="mt-3 text-xl font-bold text-text">Recent interactions</h4>
+          {record.contactHistory.length === 0 ? (
+            <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-6 py-12 text-center text-sm text-muted">
+              No contact history has been recorded for this account yet.
+            </div>
+          ) : (
+            <div className="mt-6 space-y-4">
+              {record.contactHistory.map((entry) => (
+                <article key={entry.id} className="rounded-3xl border border-line/70 bg-page/60 p-5">
+                  <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+                    <div>
+                      <div className="flex flex-wrap items-center gap-3">
+                        <CrmContactTypeBadge type={entry.type} />
+                        <h5 className="text-base font-semibold text-text">{entry.summary}</h5>
+                      </div>
+                      <p className="mt-3 whitespace-pre-line text-sm leading-7 text-text">{entry.body}</p>
+                    </div>
+                    <div className="text-sm text-muted lg:text-right">
+                      <div>{new Date(entry.contactAt).toLocaleString()}</div>
+                      <div className="mt-1">{entry.createdBy.name}</div>
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
+        </article>
+      </section>
     </section>
   );
 }