forked from Goutam/lynkeduppro-crm
Goutam
d7eb82f182
- Support Center overview rebuilt as a bento grid: large live-chat hero tile, support team tile, mini channel tiles and a recent-tickets strip. - Restore full workspace sidebar (Workspace/Team/Profile groups) with a premium golden active state; unbuilt modules show a Coming Soon view. - Use Western names across the UI (James Carter; Emma Wilson, Liam Foster, Sophie Turner, Noah Mitchell) incl. tickets, threads, portal demo user. - Remove the Allottee card from Profile; add a clean Account & identity card and live-editable contacts. - Relabel "Plot" -> "House number" everywhere; drop the allotment chip in favour of the property category. - Premium visual pass: brand gradients, depth, glow accents, pill tabs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
"use client";
|
||
|
||
// ============================================================
|
||
// Rules Checklist — the 1–13 business rules in one place.
|
||
// (house 181 · OTP to registered mobile · KYC two-docs ·
|
||
// password policy · ticket lifecycle · …)
|
||
// ============================================================
|
||
|
||
import { useMemo, useState } from "react";
|
||
import { rules } from "./account-data";
|
||
import { Icon, PageHead, Pill, Segmented } from "./ui";
|
||
|
||
export function Rules() {
|
||
const tags = useMemo(() => ["All", ...Array.from(new Set(rules.map((r) => r.tag)))], []);
|
||
const [tag, setTag] = useState("All");
|
||
const list = tag === "All" ? rules : rules.filter((r) => r.tag === tag);
|
||
|
||
return (
|
||
<div className="view">
|
||
<PageHead
|
||
eyebrow="Reference"
|
||
title="Rules Checklist"
|
||
subtitle="The 13 business rules that govern Profile & Support — one source of truth."
|
||
icon="check-circle"
|
||
actions={<Pill tone="blue">{rules.length} rules</Pill>}
|
||
/>
|
||
|
||
<Segmented value={tag} onChange={setTag} options={tags.map((t) => ({ value: t, label: t }))} />
|
||
|
||
<div className="rules-grid view-body">
|
||
{list.map((r) => (
|
||
<div className="card rule-card" key={r.n} style={{ ["--accent" as string]: r.tagColor }}>
|
||
<div className="rule-top">
|
||
<span className="rule-n">{String(r.n).padStart(2, "0")}</span>
|
||
<Pill tone="custom" style={{ color: r.tagColor, background: `color-mix(in srgb, ${r.tagColor} 16%, transparent)` }}>{r.tag}</Pill>
|
||
</div>
|
||
<div className="rule-title"><Icon name="check-circle" size={16} /> {r.title}</div>
|
||
<p className="rule-detail">{r.detail}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|