Redesign Support as bento hub, restore full sidebar, Western names
- 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>
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
// fully clickable without a backend. Ready-to-paste shapes.
|
||||
//
|
||||
// Anchored to the same demo identity used by the auth portal:
|
||||
// Rajesh Kumar Sharma · Allotment YEA-654321 · Plot 181.
|
||||
// James Carter · Allotment YEA-654321 · House 181.
|
||||
// ============================================================
|
||||
|
||||
/* ---------------------------------------------------------- */
|
||||
@@ -38,7 +38,7 @@ export type User = {
|
||||
avatarGradient: string;
|
||||
// property / allotment
|
||||
allotmentNo: string;
|
||||
plot: string; // verify-to-reveal key
|
||||
plot: string; // house number — verify-to-reveal key
|
||||
sector: string;
|
||||
pocket: string;
|
||||
category: string;
|
||||
@@ -59,10 +59,10 @@ export type User = {
|
||||
|
||||
export const user: User = {
|
||||
id: "usr_LUP_00181",
|
||||
name: "Rajesh Kumar Sharma",
|
||||
firstName: "Rajesh",
|
||||
lastName: "Sharma",
|
||||
initials: "RS",
|
||||
name: "James Carter",
|
||||
firstName: "James",
|
||||
lastName: "Carter",
|
||||
initials: "JC",
|
||||
role: "Property Owner",
|
||||
avatarGradient: "linear-gradient(135deg,#fda913,#fd6d13)",
|
||||
allotmentNo: "YEA-654321",
|
||||
@@ -73,8 +73,8 @@ export const user: User = {
|
||||
size: "300 sq.m",
|
||||
isAllottee: true,
|
||||
relationship: "Self",
|
||||
allotteeName: "Rajesh Kumar Sharma",
|
||||
email: { label: "Email", masked: maskEmail("rajesh.sharma@example.com"), full: "rajesh.sharma@example.com" },
|
||||
allotteeName: "James Carter",
|
||||
email: { label: "Email", masked: maskEmail("james.carter@example.com"), full: "james.carter@example.com" },
|
||||
mobile: { label: "Mobile", masked: "+91 ••••• ••012", full: "+91 98765 43012" },
|
||||
whatsapp: { label: "WhatsApp", masked: "+91 ••••• ••012", full: "+91 98765 43012" },
|
||||
pan: { label: "PAN", masked: "•••••••• 12F", full: "ABCPS1234F" },
|
||||
@@ -170,8 +170,8 @@ export const contactPrefs: NotifCategory[] = [
|
||||
|
||||
export type ContactDestination = { id: string; channel: "email" | "sms" | "whatsapp"; label: string; value: string; verified: boolean; primary: boolean };
|
||||
export const contactDestinations: ContactDestination[] = [
|
||||
{ id: "e1", channel: "email", label: "Personal email", value: "rajesh.sharma@example.com", verified: true, primary: true },
|
||||
{ id: "e2", channel: "email", label: "Work email", value: "r.sharma@acme.co.in", verified: false, primary: false },
|
||||
{ id: "e1", channel: "email", label: "Personal email", value: "james.carter@example.com", verified: true, primary: true },
|
||||
{ id: "e2", channel: "email", label: "Work email", value: "j.carter@acme.co", verified: false, primary: false },
|
||||
{ id: "s1", channel: "sms", label: "Registered mobile", value: "+91 98765 43012", verified: true, primary: true },
|
||||
{ id: "w1", channel: "whatsapp", label: "WhatsApp", value: "+91 98765 43012", verified: true, primary: true },
|
||||
];
|
||||
@@ -290,10 +290,10 @@ export type SupportAgent = {
|
||||
};
|
||||
|
||||
export const supportTeam: SupportAgent[] = [
|
||||
{ id: "a1", name: "Priya Nair", initials: "PN", role: "Senior Support Lead", team: "Accounts & KYC", gradient: "linear-gradient(135deg,#fda913,#fd6d13)", status: "online", rating: 4.9 },
|
||||
{ id: "a2", name: "Arjun Mehta", initials: "AM", role: "Support Specialist", team: "Billing", gradient: "linear-gradient(135deg,#285ef0,#09b9c6)", status: "online", rating: 4.8 },
|
||||
{ id: "a3", name: "Sara Khan", initials: "SK", role: "Technical Support", team: "Portal & Login", gradient: "linear-gradient(135deg,#9036e9,#285ef0)", status: "away", rating: 4.7 },
|
||||
{ id: "a4", name: "Vikram Rao", initials: "VR", role: "Field Coordinator", team: "Inspections", gradient: "linear-gradient(135deg,#14bc83,#09b9c6)", status: "offline", rating: 4.9 },
|
||||
{ id: "a1", name: "Emma Wilson", initials: "EW", role: "Senior Support Lead", team: "Accounts & KYC", gradient: "linear-gradient(135deg,#fda913,#fd6d13)", status: "online", rating: 4.9 },
|
||||
{ id: "a2", name: "Liam Foster", initials: "LF", role: "Support Specialist", team: "Billing", gradient: "linear-gradient(135deg,#285ef0,#09b9c6)", status: "online", rating: 4.8 },
|
||||
{ id: "a3", name: "Sophie Turner", initials: "ST", role: "Technical Support", team: "Portal & Login", gradient: "linear-gradient(135deg,#9036e9,#285ef0)", status: "away", rating: 4.7 },
|
||||
{ id: "a4", name: "Noah Mitchell", initials: "NM", role: "Field Coordinator", team: "Inspections", gradient: "linear-gradient(135deg,#14bc83,#09b9c6)", status: "offline", rating: 4.9 },
|
||||
];
|
||||
|
||||
// Category → department routing + attachment rules for the New Ticket form.
|
||||
@@ -345,8 +345,8 @@ export const tickets: Ticket[] = [
|
||||
timeline: [
|
||||
{ status: "created", label: "Ticket created", at: "24 Jun, 10:12 AM", by: "You" },
|
||||
{ status: "open", label: "Routed to Accounts & KYC", at: "24 Jun, 10:13 AM", by: "System" },
|
||||
{ status: "in-progress", label: "Priya Nair picked up the ticket", at: "24 Jun, 11:40 AM", by: "Priya Nair" },
|
||||
{ status: "awaiting-customer", label: "Requested a clearer scan", at: "25 Jun, 09:05 AM", by: "Priya Nair" },
|
||||
{ status: "in-progress", label: "Emma Wilson picked up the ticket", at: "24 Jun, 11:40 AM", by: "Emma Wilson" },
|
||||
{ status: "awaiting-customer", label: "Requested a clearer scan", at: "25 Jun, 09:05 AM", by: "Emma Wilson" },
|
||||
{ status: "in-progress", label: "You re-uploaded the document", at: "28 Jun, 04:22 PM", by: "You" },
|
||||
],
|
||||
},
|
||||
@@ -362,8 +362,8 @@ export const tickets: Ticket[] = [
|
||||
agentId: "a3",
|
||||
timeline: [
|
||||
{ status: "created", label: "Ticket created", at: "18 Jun, 08:40 PM", by: "You" },
|
||||
{ status: "in-progress", label: "Sara Khan investigating SMS gateway", at: "18 Jun, 09:02 PM", by: "Sara Khan" },
|
||||
{ status: "resolved", label: "OTP delivery restored", at: "19 Jun, 10:15 AM", by: "Sara Khan" },
|
||||
{ status: "in-progress", label: "Sophie Turner investigating SMS gateway", at: "18 Jun, 09:02 PM", by: "Sophie Turner" },
|
||||
{ status: "resolved", label: "OTP delivery restored", at: "19 Jun, 10:15 AM", by: "Sophie Turner" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -378,8 +378,8 @@ export const tickets: Ticket[] = [
|
||||
agentId: "a2",
|
||||
timeline: [
|
||||
{ status: "created", label: "Ticket created", at: "12 Jun, 02:10 PM", by: "You" },
|
||||
{ status: "in-progress", label: "Arjun Mehta reviewing billing run", at: "12 Jun, 03:30 PM", by: "Arjun Mehta" },
|
||||
{ status: "awaiting-customer", label: "Need bank reference for the second debit", at: "26 Jun, 11:00 AM", by: "Arjun Mehta" },
|
||||
{ status: "in-progress", label: "Liam Foster reviewing billing run", at: "12 Jun, 03:30 PM", by: "Liam Foster" },
|
||||
{ status: "awaiting-customer", label: "Need bank reference for the second debit", at: "26 Jun, 11:00 AM", by: "Liam Foster" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -394,8 +394,8 @@ export const tickets: Ticket[] = [
|
||||
agentId: "a4",
|
||||
timeline: [
|
||||
{ status: "created", label: "Ticket created", at: "02 Jun, 06:20 PM", by: "You" },
|
||||
{ status: "in-progress", label: "Vikram Rao coordinating slot", at: "03 Jun, 10:00 AM", by: "Vikram Rao" },
|
||||
{ status: "resolved", label: "Visit moved to 09 Jun, 11 AM", at: "04 Jun, 04:45 PM", by: "Vikram Rao" },
|
||||
{ status: "in-progress", label: "Noah Mitchell coordinating slot", at: "03 Jun, 10:00 AM", by: "Noah Mitchell" },
|
||||
{ status: "resolved", label: "Visit moved to 09 Jun, 11 AM", at: "04 Jun, 04:45 PM", by: "Noah Mitchell" },
|
||||
{ status: "closed", label: "Inspection completed", at: "06 Jun, 01:30 PM", by: "System" },
|
||||
],
|
||||
},
|
||||
@@ -426,8 +426,8 @@ export const supportThreads: SupportThread[] = [
|
||||
typing: true,
|
||||
updatedAt: "2 min ago",
|
||||
messages: [
|
||||
{ id: "m1", from: "agent", text: "Hi Rajesh, this is Priya from Accounts & KYC. I'm looking into ticket LUP-48217.", at: "11:40 AM" },
|
||||
{ id: "m2", from: "me", text: "Thanks Priya. The earlier scan was blurry so I uploaded a sharper one.", at: "11:42 AM" },
|
||||
{ id: "m1", from: "agent", text: "Hi James, this is Emma from Accounts & KYC. I'm looking into ticket LUP-48217.", at: "11:40 AM" },
|
||||
{ id: "m2", from: "me", text: "Thanks Emma. The earlier scan was blurry so I uploaded a sharper one.", at: "11:42 AM" },
|
||||
{ id: "m3", from: "agent", text: "Thanks, I can see the new scan now. Reviewing it with the verification team.", at: "11:43 AM" },
|
||||
],
|
||||
},
|
||||
@@ -478,7 +478,7 @@ export const helpTopics: HelpTopic[] = [
|
||||
accent: "var(--orange)",
|
||||
count: 3,
|
||||
articles: [
|
||||
{ q: "How do I verify my property details?", a: "Open Profile → Personal Info and click ‘Verify to reveal’. Enter your plot number (e.g. 181) to unmask and confirm your records." },
|
||||
{ q: "How do I verify my property details?", a: "Open Profile → Personal Info and click ‘Verify to reveal’. Enter your house number (e.g. 181) to unmask and confirm your records." },
|
||||
{ q: "What does ‘allottee’ mean if I'm a representative?", a: "If you manage the property on someone's behalf, the account holder and the allottee differ. Your relationship is shown on the Personal Info tab." },
|
||||
{ q: "How do I update my profile photo?", a: "Use the camera button on your profile header card. JPG or PNG up to 5 MB." },
|
||||
],
|
||||
@@ -530,7 +530,7 @@ export const helpTopics: HelpTopic[] = [
|
||||
export type Rule = { n: number; title: string; detail: string; tag: string; tagColor: string };
|
||||
|
||||
export const rules: Rule[] = [
|
||||
{ n: 1, title: "Verify-to-reveal", detail: "Masked personal details (email, mobile, PAN, Aadhaar) stay hidden until the account holder confirms their plot number. For this account the plot is 181.", tag: "Profile", tagColor: "var(--orange)" },
|
||||
{ n: 1, title: "Verify-to-reveal", detail: "Masked personal details (email, mobile, PAN, Aadhaar) stay hidden until the account holder confirms their house number. For this account the house number is 181.", tag: "Profile", tagColor: "var(--orange)" },
|
||||
{ n: 2, title: "OTP goes to the registered mobile", detail: "Any sensitive change — email, mobile or password — sends a one-time code to the registered mobile number, never to the new/unverified destination.", tag: "Security", tagColor: "var(--blue)" },
|
||||
{ n: 3, title: "Allottee ≠ account holder", detail: "When the relationship is not ‘Self’, the account holder is a representative and the allottee's name is shown separately. Actions are logged against the account holder.", tag: "Profile", tagColor: "var(--orange)" },
|
||||
{ n: 4, title: "KYC needs two different documents", detail: "Identity proof and address proof must be two different document types. A single document (e.g. Aadhaar) cannot satisfy both slots at once.", tag: "KYC", tagColor: "var(--purple)" },
|
||||
|
||||
Reference in New Issue
Block a user