crm finish

client/src/modules/crm/CrmDetailPage.tsx

@@ -8,6 +8,7 @@ import { api, ApiError } from "../../lib/api";
 import { CrmAttachmentsPanel } from "./CrmAttachmentsPanel";
 import { CrmContactsPanel } from "./CrmContactsPanel";
 import { CrmContactEntryForm } from "./CrmContactEntryForm";
+import { CrmLifecycleBadge } from "./CrmLifecycleBadge";
 import { CrmContactTypeBadge } from "./CrmContactTypeBadge";
 import { CrmStatusBadge } from "./CrmStatusBadge";
 import { type CrmEntity, crmConfigs, emptyCrmContactEntryInput } from "./config";
@@ -78,6 +79,13 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
               contactHistory: [nextEntry, ...current.contactHistory].sort(
                 (left, right) => new Date(right.contactAt).getTime() - new Date(left.contactAt).getTime()
               ),
+              rollups: {
+                lastContactAt: nextEntry.contactAt,
+                contactHistoryCount: (current.rollups?.contactHistoryCount ?? current.contactHistory.length) + 1,
+                contactCount: current.rollups?.contactCount ?? current.contacts?.length ?? 0,
+                attachmentCount: current.rollups?.attachmentCount ?? 0,
+                childCustomerCount: current.rollups?.childCustomerCount,
+              },
             }
           : current
       );
@@ -102,7 +110,10 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">CRM Detail</p>
             <h3 className="mt-3 text-3xl font-bold text-text">{record.name}</h3>
             <div className="mt-4">
-              <CrmStatusBadge status={record.status} />
+              <div className="flex flex-wrap gap-3">
+                <CrmStatusBadge status={record.status} />
+                {record.lifecycleStage ? <CrmLifecycleBadge stage={record.lifecycleStage} /> : null}
+              </div>
             </div>
             <p className="mt-2 text-sm text-muted">
               {config.singularLabel} record last updated {new Date(record.updatedAt).toLocaleString()}.
@@ -165,6 +176,18 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
           <div className="mt-8 rounded-2xl border border-line/70 bg-page/70 px-4 py-4 text-sm text-muted">
             Created {new Date(record.createdAt).toLocaleDateString()}
           </div>
+          <div className="mt-4 rounded-2xl border border-line/70 bg-page/70 px-4 py-4">
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Operational Flags</p>
+            <div className="mt-3 flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-[0.12em]">
+              {record.preferredAccount ? <span className="rounded-full border border-line/70 px-3 py-1 text-text">Preferred</span> : null}
+              {record.strategicAccount ? <span className="rounded-full border border-line/70 px-3 py-1 text-text">Strategic</span> : null}
+              {record.requiresApproval ? <span className="rounded-full border border-amber-400/40 px-3 py-1 text-amber-700 dark:text-amber-300">Requires Approval</span> : null}
+              {record.blockedAccount ? <span className="rounded-full border border-rose-400/40 px-3 py-1 text-rose-700 dark:text-rose-300">Blocked</span> : null}
+              {!record.preferredAccount && !record.strategicAccount && !record.requiresApproval && !record.blockedAccount ? (
+                <span className="rounded-full border border-line/70 px-3 py-1 text-muted">Standard</span>
+              ) : null}
+            </div>
+          </div>
           {entity === "customer" ? (
             <div className="mt-4 rounded-2xl border border-line/70 bg-page/70 px-4 py-4">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Reseller Profile</p>
@@ -187,6 +210,26 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
           ) : null}
         </article>
       </div>
+      <section className="grid gap-4 xl:grid-cols-4">
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-5 py-5 shadow-panel">
+          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Last Contact</p>
+          <div className="mt-3 text-lg font-bold text-text">
+            {record.rollups?.lastContactAt ? new Date(record.rollups.lastContactAt).toLocaleDateString() : "None"}
+          </div>
+        </article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-5 py-5 shadow-panel">
+          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Timeline Entries</p>
+          <div className="mt-3 text-lg font-bold text-text">{record.rollups?.contactHistoryCount ?? record.contactHistory.length}</div>
+        </article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-5 py-5 shadow-panel">
+          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account Contacts</p>
+          <div className="mt-3 text-lg font-bold text-text">{record.rollups?.contactCount ?? record.contacts?.length ?? 0}</div>
+        </article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-5 py-5 shadow-panel">
+          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Attachments</p>
+          <div className="mt-3 text-lg font-bold text-text">{record.rollups?.attachmentCount ?? 0}</div>
+        </article>
+      </section>
       {entity === "customer" && (record.childCustomers?.length ?? 0) > 0 ? (
         <section className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Hierarchy</p>
@@ -212,7 +255,21 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
         ownerId={record.id}
         contacts={record.contacts ?? []}
         onContactsChange={(contacts: CrmContactDto[]) =>
-          setRecord((current) => (current ? { ...current, contacts } : current))
+          setRecord((current) =>
+            current
+              ? {
+                  ...current,
+                  contacts,
+                  rollups: {
+                    lastContactAt: current.rollups?.lastContactAt ?? null,
+                    contactHistoryCount: current.rollups?.contactHistoryCount ?? current.contactHistory.length,
+                    contactCount: contacts.length,
+                    attachmentCount: current.rollups?.attachmentCount ?? 0,
+                    childCustomerCount: current.rollups?.childCustomerCount,
+                  },
+                }
+              : current
+          )
         }
       />
       <section className="grid gap-4 2xl:grid-cols-[minmax(360px,0.88fr)_minmax(0,1.12fr)]">
@@ -264,7 +321,26 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
           )}
         </article>
       </section>
-      <CrmAttachmentsPanel ownerType={config.fileOwnerType} ownerId={record.id} />
+      <CrmAttachmentsPanel
+        ownerType={config.fileOwnerType}
+        ownerId={record.id}
+        onAttachmentCountChange={(attachmentCount) =>
+          setRecord((current) =>
+            current
+              ? {
+                  ...current,
+                  rollups: {
+                    lastContactAt: current.rollups?.lastContactAt ?? null,
+                    contactHistoryCount: current.rollups?.contactHistoryCount ?? current.contactHistory.length,
+                    contactCount: current.rollups?.contactCount ?? current.contacts?.length ?? 0,
+                    attachmentCount,
+                    childCustomerCount: current.rollups?.childCustomerCount,
+                  },
+                }
+              : current
+          )
+        }
+      />
     </section>
   );
 }