jason/mrp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

crm2

Browse Source
This commit is contained in:
jason
2026-03-14 16:50:03 -05:00
parent a8d0533f4a
commit 70f55c98b5
12 changed files with 477 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/index.css
View File

@@ -9,7 +9,8 @@
--font-family: "Manrope";
--color-brand: 24 90 219;
--color-accent: 0 166 166;
--color-surface: 244 247 251;
--color-surface-brand: 244 247 251;
--color-surface: var(--color-surface-brand);
--color-page: 248 250 252;
--color-text: 15 23 42;
--color-muted: 90 106 133;

22
client/src/lib/api.ts
View File

@@ -9,6 +9,8 @@ import type {
LoginResponse,
} from "@mrp/shared";
import type {
CrmContactEntryDto,
CrmContactEntryInput,
CrmRecordDetailDto,
CrmRecordInput,
CrmRecordStatus,
@@ -140,6 +142,16 @@ export const api = {
token
);
},
createCustomerContactEntry(token: string, customerId: string, payload: CrmContactEntryInput) {
return request<CrmContactEntryDto>(
`/api/v1/crm/customers/${customerId}/contact-history`,
{
method: "POST",
body: JSON.stringify(payload),
},
token
);
},
getVendors(token: string, filters?: { q?: string; status?: CrmRecordStatus; state?: string }) {
return request<CrmRecordSummaryDto[]>(
`/api/v1/crm/vendors${buildQueryString({
@@ -174,6 +186,16 @@ export const api = {
token
);
},
createVendorContactEntry(token: string, vendorId: string, payload: CrmContactEntryInput) {
return request<CrmContactEntryDto>(
`/api/v1/crm/vendors/${vendorId}/contact-history`,
{
method: "POST",
body: JSON.stringify(payload),
},
token
);
},
getGanttDemo(token: string) {
return request<{ tasks: GanttTaskDto[]; links: GanttLinkDto[] }>("/api/v1/gantt/demo", undefined, token);
},

72
client/src/modules/crm/CrmContactEntryForm.tsx Normal file
View File

@@ -0,0 +1,72 @@
import type { CrmContactEntryInput } from "@mrp/shared/dist/crm/types.js";
import { crmContactTypeOptions } from "./config";
interface CrmContactEntryFormProps {
form: CrmContactEntryInput;
isSaving: boolean;
status: string;
onChange: <Key extends keyof CrmContactEntryInput>(key: Key, value: CrmContactEntryInput[Key]) => void;
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
}
export function CrmContactEntryForm({ form, isSaving, status, onChange, onSubmit }: CrmContactEntryFormProps) {
return (
<form className="space-y-5" onSubmit={onSubmit}>
<div className="grid gap-5 md:grid-cols-[0.9fr_1.1fr]">
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Interaction type</span>
<select
value={form.type}
onChange={(event) => onChange("type", event.target.value as CrmContactEntryInput["type"])}
className="w-full rounded-2xl border border-line/70 bg-page px-4 py-3 text-text outline-none transition focus:border-brand"
>
{crmContactTypeOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</label>
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Contact timestamp</span>
<input
type="datetime-local"
value={form.contactAt.slice(0, 16)}
onChange={(event) => onChange("contactAt", new Date(event.target.value).toISOString())}
className="w-full rounded-2xl border border-line/70 bg-page px-4 py-3 text-text outline-none transition focus:border-brand"
/>
</label>
</div>
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Summary</span>
<input
value={form.summary}
onChange={(event) => onChange("summary", event.target.value)}
className="w-full rounded-2xl border border-line/70 bg-page px-4 py-3 text-text outline-none transition focus:border-brand"
placeholder="Short headline for the interaction"
/>
</label>
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Details</span>
<textarea
value={form.body}
onChange={(event) => onChange("body", event.target.value)}
rows={5}
className="w-full rounded-2xl border border-line/70 bg-page px-4 py-3 text-text outline-none transition focus:border-brand"
placeholder="Capture what happened, follow-ups, and commitments."
/>
</label>
<div className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/70 px-4 py-4">
<span className="text-sm text-muted">{status}</span>
<button
type="submit"
disabled={isSaving}
className="rounded-2xl bg-brand px-5 py-3 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60"
>
{isSaving ? "Saving..." : "Add entry"}
</button>
</div>
</form>
);
}

13
client/src/modules/crm/CrmContactTypeBadge.tsx Normal file
View File

@@ -0,0 +1,13 @@
import type { CrmContactEntryType } from "@mrp/shared/dist/crm/types.js";
import { crmContactTypeOptions, crmContactTypePalette } from "./config";
export function CrmContactTypeBadge({ type }: { type: CrmContactEntryType }) {
const label = crmContactTypeOptions.find((option) => option.value === type)?.label ?? type;
return (
<span className={`inline-flex rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] ${crmContactTypePalette[type]}`}>
{label}
</span>
);
}

105
client/src/modules/crm/CrmDetailPage.tsx
View File

@@ -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>
);
}

32
client/src/modules/crm/config.ts
View File

@@ -1,4 +1,11 @@
import { crmRecordStatuses, type CrmRecordInput, type CrmRecordStatus } from "@mrp/shared/dist/crm/types.js";
import {
crmContactEntryTypes,
crmRecordStatuses,
type CrmContactEntryInput,
type CrmContactEntryType,
type CrmRecordInput,
type CrmRecordStatus,
} from "@mrp/shared/dist/crm/types.js";
export type CrmEntity = "customer" | "vendor";
@@ -60,4 +67,25 @@ export const crmStatusPalette: Record<CrmRecordStatus, string> = {
INACTIVE: "border border-slate-400/30 bg-slate-500/12 text-slate-700 dark:text-slate-300",
};
export { crmRecordStatuses };
export const emptyCrmContactEntryInput: CrmContactEntryInput = {
type: "NOTE",
summary: "",
body: "",
contactAt: new Date().toISOString(),
};
export const crmContactTypeOptions: Array<{ value: CrmContactEntryType; label: string }> = [
{ value: "NOTE", label: "Note" },
{ value: "CALL", label: "Call" },
{ value: "EMAIL", label: "Email" },
{ value: "MEETING", label: "Meeting" },
];
export const crmContactTypePalette: Record<CrmContactEntryType, string> = {
NOTE: "border border-slate-400/30 bg-slate-500/12 text-slate-700 dark:text-slate-300",
CALL: "border border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300",
EMAIL: "border border-violet-400/30 bg-violet-500/12 text-violet-700 dark:text-violet-300",
MEETING: "border border-rose-400/30 bg-rose-500/12 text-rose-700 dark:text-rose-300",
};
export { crmContactEntryTypes, crmRecordStatuses };

2
client/src/theme/ThemeProvider.tsx
View File

@@ -33,7 +33,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
document.documentElement.style.setProperty("--color-brand", hexToRgbTriplet(profile.theme.primaryColor));
document.documentElement.style.setProperty("--color-accent", hexToRgbTriplet(profile.theme.accentColor));
document.documentElement.style.setProperty("--color-surface", hexToRgbTriplet(profile.theme.surfaceColor));
document.documentElement.style.setProperty("--color-surface-brand", hexToRgbTriplet(profile.theme.surfaceColor));
document.documentElement.style.setProperty("--font-family", profile.theme.fontFamily);
};