From 000aacac597f056b7e1f2b14fdf8831b821d2977 Mon Sep 17 00:00:00 2001 From: ayush00git Date: Thu, 2 Jul 2026 17:23:16 +0530 Subject: [PATCH 1/5] fix: backend render profile.name --- app/src/pages/profile/Profile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/pages/profile/Profile.tsx b/app/src/pages/profile/Profile.tsx index b8ae5a7..65a8335 100644 --- a/app/src/pages/profile/Profile.tsx +++ b/app/src/pages/profile/Profile.tsx @@ -215,7 +215,7 @@ export function Profile() { {/* Identity row */}
-

{profile.name || profile.email?.split('@')[0] || ''}

+

{profile.name}

{profile.email}

From bc54683e729565db4cbb0d53d5c4e2e18c0c0b94 Mon Sep 17 00:00:00 2001 From: ayush00git Date: Thu, 2 Jul 2026 17:32:28 +0530 Subject: [PATCH 2/5] fix: comment box component --- app/src/components/CommentBox.tsx | 135 +++++++++++++++++++++++++++ app/src/components/ComplaintCard.tsx | 116 +++++++++++++---------- app/src/pages/post/PostView.tsx | 22 +---- app/src/pages/profile/Profile.tsx | 8 +- 4 files changed, 211 insertions(+), 70 deletions(-) create mode 100644 app/src/components/CommentBox.tsx diff --git a/app/src/components/CommentBox.tsx b/app/src/components/CommentBox.tsx new file mode 100644 index 0000000..7e9b836 --- /dev/null +++ b/app/src/components/CommentBox.tsx @@ -0,0 +1,135 @@ +import { Clock } from 'lucide-react'; + +interface CommentBoxProps { + comment: { + id: number; + comment_text: string; + email: string; + role: string; + created_at: string; + }; +} + +function formatDateTime(iso: string) { + return new Date(iso).toLocaleString('en-IN', { + day: '2-digit', + month: 'short', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }); +} + +function getRoleConfig(role: string) { + const norm = (role || '').toLowerCase(); + if (norm.includes('faculty')) { + return { + label: 'Faculty', + badgeClass: 'bg-violet-50/80 text-violet-700 border-violet-150', + avatarClass: 'bg-gradient-to-br from-violet-500 to-fuchsia-600 text-white shadow-violet-100', + initials: 'FC', + }; + } + if (norm.includes('warden')) { + return { + label: 'Warden', + badgeClass: 'bg-amber-50/80 text-amber-700 border-amber-150', + avatarClass: 'bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow-amber-100', + initials: 'WD', + }; + } + if (norm.includes('centrehead') || norm.includes('centre_head')) { + return { + label: 'Centre Head', + badgeClass: 'bg-sky-50/80 text-sky-700 border-sky-150', + avatarClass: 'bg-gradient-to-br from-sky-500 to-blue-600 text-white shadow-sky-100', + initials: 'CH', + }; + } + if (norm.includes('xen')) { + return { + label: 'XEN Admin', + badgeClass: 'bg-emerald-50/80 text-emerald-700 border-emerald-150', + avatarClass: 'bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-emerald-100', + initials: 'XN', + }; + } + if (norm.includes('ae')) { + return { + label: 'Assistant Engineer', + badgeClass: 'bg-indigo-50/80 text-indigo-700 border-indigo-150', + avatarClass: 'bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-indigo-100', + initials: 'AE', + }; + } + if (norm.includes('je')) { + return { + label: 'Junior Engineer', + badgeClass: 'bg-rose-50/80 text-rose-700 border-rose-150', + avatarClass: 'bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-rose-100', + initials: 'JE', + }; + } + return { + label: role ? role.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) : 'Staff', + badgeClass: 'bg-zinc-50 text-zinc-700 border-zinc-200', + avatarClass: 'bg-gradient-to-br from-zinc-500 to-slate-600 text-white shadow-zinc-100', + initials: role ? role.slice(0, 2).toUpperCase() : 'ST', + }; +} + +export function CommentBox({ comment }: CommentBoxProps) { + const config = getRoleConfig(comment.role); + + return ( +
+ {/* Precision-aligned Connector Dot */} +
+ + {/* Unified Professional Comment Box */} +
+ + {/* Avatar (Left Column) */} +
+
+ {config.initials} +
+
+ + {/* Info & Content (Right Column) */} +
+ + {/* Header metadata row */} +
+
+ + {config.label} + + + {comment.role || 'Staff'} + + {comment.email && ( + + ({comment.email}) + + )} +
+ + {/* Time label */} +
+ + {formatDateTime(comment.created_at)} +
+
+ + {/* Message Content */} +
+ {comment.comment_text} +
+ +
+ +
+
+ ); +} diff --git a/app/src/components/ComplaintCard.tsx b/app/src/components/ComplaintCard.tsx index b93bfe0..cbe7305 100644 --- a/app/src/components/ComplaintCard.tsx +++ b/app/src/components/ComplaintCard.tsx @@ -3,7 +3,6 @@ import { Zap, Hammer, Calendar, MapPin, BedDouble, MessageSquare, ChevronRight, } from 'lucide-react'; - // ── Types ───────────────────────────────────────────────────────────────────── export type Role = 'faculty' | 'warden' | 'centrehead'; @@ -49,8 +48,6 @@ interface ComplaintCardProps { onCancelEdit?: () => void; onSaveEdit?: (postId: number) => void; onDelete?: (postId: number) => void; - // Called after the author successfully posts a comment, so the parent can - // refetch and surface the new comment. onCommentPosted?: () => void; } @@ -59,22 +56,21 @@ interface ComplaintCardProps { interface StatusStyle { label: string; pill: string; dot: string } const STATUS_CONFIG: Record = { - pending_xen: { label: 'Pending · XEN', pill: 'bg-amber-100 text-amber-800 border-amber-300', dot: 'bg-amber-400' }, - pending_ae: { label: 'Pending · AE', pill: 'bg-sky-100 text-sky-800 border-sky-300', dot: 'bg-sky-400' }, - resolved_ae: { label: 'Resolved · AE', pill: 'bg-teal-100 text-teal-800 border-teal-300', dot: 'bg-teal-400' }, - pending_je: { label: 'Pending · JE', pill: 'bg-violet-100 text-violet-800 border-violet-300', dot: 'bg-violet-400' }, - resolved_je: { label: 'Resolved · JE', pill: 'bg-teal-100 text-teal-800 border-teal-300', dot: 'bg-teal-400' }, - resolved_all: { label: 'Resolved · All', pill: 'bg-emerald-100 text-emerald-800 border-emerald-300', dot: 'bg-emerald-500' }, + pending_xen: { label: 'Pending · XEN', pill: 'bg-amber-50 text-amber-700 border-amber-200', dot: 'bg-amber-500' }, + pending_ae: { label: 'Pending · AE', pill: 'bg-sky-50 text-sky-700 border-sky-200', dot: 'bg-sky-500' }, + resolved_ae: { label: 'Resolved · AE', pill: 'bg-teal-50 text-teal-700 border-teal-200', dot: 'bg-teal-500' }, + pending_je: { label: 'Pending · JE', pill: 'bg-violet-50 text-violet-700 border-violet-200', dot: 'bg-violet-500' }, + resolved_je: { label: 'Resolved · JE', pill: 'bg-teal-50 text-teal-700 border-teal-200', dot: 'bg-teal-500' }, + resolved_all: { label: 'Resolved · All', pill: 'bg-emerald-50 text-emerald-700 border-emerald-200', dot: 'bg-emerald-500' }, }; -const FALLBACK: StatusStyle = { label: 'Unknown', pill: 'bg-gray-100 text-gray-600 border-gray-300', dot: 'bg-gray-400' }; +const FALLBACK: StatusStyle = { label: 'Unknown', pill: 'bg-gray-50 text-gray-600 border-gray-200', dot: 'bg-gray-400' }; function statusStyle(s: string): StatusStyle { const norm = s.toLowerCase(); return STATUS_CONFIG[norm] ?? { ...FALLBACK, label: s.replace(/_/g, ' ') }; } - function formatDate(iso: string) { return new Date(iso).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' }); } @@ -83,11 +79,20 @@ function formatDate(iso: string) { function typeTheme(isElectrical: boolean) { return isElectrical - ? { cardBg: 'bg-amber-50', accentBar: 'bg-amber-400', headerBg: 'bg-amber-100/70', iconColor: 'text-amber-600', badge: 'bg-amber-200 text-amber-900 border-amber-400', stageDone: 'bg-amber-500 border-amber-500' } - : { cardBg: 'bg-sky-50', accentBar: 'bg-sky-500', headerBg: 'bg-sky-100/70', iconColor: 'text-sky-600', badge: 'bg-sky-200 text-sky-900 border-sky-400', stageDone: 'bg-sky-600 border-sky-600' }; + ? { + cardBg: 'bg-white hover:bg-amber-50/10', + accentBar: 'bg-gradient-to-b from-amber-400 to-amber-500', + iconColor: 'text-amber-500', + badge: 'bg-amber-50/80 text-amber-700 border-amber-200/60', + } + : { + cardBg: 'bg-white hover:bg-sky-50/10', + accentBar: 'bg-gradient-to-b from-sky-400 to-sky-500', + iconColor: 'text-sky-500', + badge: 'bg-sky-50/80 text-sky-700 border-sky-200/60', + }; } - // ── Card (compact preview) ───────────────────────────────────────────────────── export function ComplaintCard({ @@ -105,58 +110,71 @@ export function ComplaintCard({ return (
navigate(`/post/${role}/${post.id}`)} - className={`${theme.cardBg} border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-gray-300 transition-all cursor-pointer group`} + className={`${theme.cardBg} relative border border-gray-200/80 rounded-xl shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group flex min-h-[140px]`} > - {/* Top accent */} -
- -
- {/* Row 1: badges */} -
- #{post.id} - - - {isElectrical ? : } - {post.type_of_post} - - - - - {status.label} - -
+ {/* Left accent bar (Linear / Vercel style) */} +
+ + {/* Main card content */} +
+ + {/* Top line: Complaint ID, Category Badge, Status Badge */} +
+
+
+ #{post.id} + + + {isElectrical ? : } + {post.type_of_post} + +
+ + + + {status.label} + +
- {/* Title + description */} -

{post.title}

-

{post.description}

+ {/* Title & Description */} +

+ {post.title} +

+

+ {post.description} +

+
- {/* Footer row */} -
-
- - {formatDate(post.created_at)} + {/* Footer row: Date, Info fields, Comments and hover arrow */} +
+
+ + {formatDate(post.created_at)} + {isFaculty && post.place && ( - - {post.place} + + {post.place} )} + {isWarden && post.room_number && ( - - {post.room_number} + + Room {post.room_number} )}
-
+
{comments.length > 0 && ( - - {comments.length} + + {comments.length} )} - +
+
); diff --git a/app/src/pages/post/PostView.tsx b/app/src/pages/post/PostView.tsx index c6dd273..fa91cff 100644 --- a/app/src/pages/post/PostView.tsx +++ b/app/src/pages/post/PostView.tsx @@ -7,6 +7,7 @@ import { } from 'lucide-react'; import { MainLayout } from '../../components/layout/MainLayout'; import { POST_PLACES } from '../../constants/models'; +import { CommentBox } from '../../components/CommentBox'; type Role = 'faculty' | 'warden' | 'centrehead'; @@ -570,27 +571,8 @@ export function PostView() { ); } else { const c = item.data; - const author = c.role ? roleLabel(c.role) : 'Staff'; - return ( -
- {/* Comment Bubble in GitHub Style */} -
-
- - {author} - {c.email && {c.email}} - - - - {formatDateTime(c.created_at)} - -
-
- {c.comment_text} -
-
-
+ ); } }) diff --git a/app/src/pages/profile/Profile.tsx b/app/src/pages/profile/Profile.tsx index 65a8335..5f62f84 100644 --- a/app/src/pages/profile/Profile.tsx +++ b/app/src/pages/profile/Profile.tsx @@ -66,7 +66,13 @@ export function Profile() { if (!res.ok) throw new Error(`Server error (${res.status})`); return res.json(); }) - .then((data) => { setPosts(data.posts ?? []); setPostsLoading(false); }) + .then((data) => { + setPosts(data.posts ?? []); + setPostsLoading(false); + if (data.name) { + setProfile((prev) => prev ? { ...prev, name: data.name } : null); + } + }) .catch((err: Error) => { setPostsError(err.message); setPostsLoading(false); }); }, [profile]); From d96681988910652cc6cbc8c053cc724c70f31cd6 Mon Sep 17 00:00:00 2001 From: ayush00git Date: Thu, 2 Jul 2026 17:37:44 +0530 Subject: [PATCH 3/5] fix: update font --- app/index.html | 3 ++ app/src/components/CommentBox.tsx | 43 +++++++--------------------- app/src/components/ComplaintCard.tsx | 16 +++++------ app/src/index.css | 1 + app/src/pages/post/PostView.tsx | 2 +- 5 files changed, 24 insertions(+), 41 deletions(-) diff --git a/app/index.html b/app/index.html index 4eacf5a..b7a7578 100644 --- a/app/index.html +++ b/app/index.html @@ -3,6 +3,9 @@ + + + app diff --git a/app/src/components/CommentBox.tsx b/app/src/components/CommentBox.tsx index 7e9b836..bf649f9 100644 --- a/app/src/components/CommentBox.tsx +++ b/app/src/components/CommentBox.tsx @@ -25,56 +25,42 @@ function getRoleConfig(role: string) { if (norm.includes('faculty')) { return { label: 'Faculty', - badgeClass: 'bg-violet-50/80 text-violet-700 border-violet-150', - avatarClass: 'bg-gradient-to-br from-violet-500 to-fuchsia-600 text-white shadow-violet-100', - initials: 'FC', + badgeClass: 'bg-violet-50/80 text-violet-700 border-violet-100', }; } if (norm.includes('warden')) { return { label: 'Warden', - badgeClass: 'bg-amber-50/80 text-amber-700 border-amber-150', - avatarClass: 'bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow-amber-100', - initials: 'WD', + badgeClass: 'bg-amber-50/80 text-amber-700 border-amber-100', }; } if (norm.includes('centrehead') || norm.includes('centre_head')) { return { label: 'Centre Head', - badgeClass: 'bg-sky-50/80 text-sky-700 border-sky-150', - avatarClass: 'bg-gradient-to-br from-sky-500 to-blue-600 text-white shadow-sky-100', - initials: 'CH', + badgeClass: 'bg-sky-50/80 text-sky-700 border-sky-100', }; } if (norm.includes('xen')) { return { label: 'XEN Admin', - badgeClass: 'bg-emerald-50/80 text-emerald-700 border-emerald-150', - avatarClass: 'bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-emerald-100', - initials: 'XN', + badgeClass: 'bg-emerald-50/80 text-emerald-700 border-emerald-100', }; } if (norm.includes('ae')) { return { label: 'Assistant Engineer', - badgeClass: 'bg-indigo-50/80 text-indigo-700 border-indigo-150', - avatarClass: 'bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-indigo-100', - initials: 'AE', + badgeClass: 'bg-indigo-50/80 text-indigo-700 border-indigo-100', }; } if (norm.includes('je')) { return { label: 'Junior Engineer', - badgeClass: 'bg-rose-50/80 text-rose-700 border-rose-150', - avatarClass: 'bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-rose-100', - initials: 'JE', + badgeClass: 'bg-rose-50/80 text-rose-700 border-rose-100', }; } return { label: role ? role.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) : 'Staff', badgeClass: 'bg-zinc-50 text-zinc-700 border-zinc-200', - avatarClass: 'bg-gradient-to-br from-zinc-500 to-slate-600 text-white shadow-zinc-100', - initials: role ? role.slice(0, 2).toUpperCase() : 'ST', }; } @@ -87,17 +73,10 @@ export function CommentBox({ comment }: CommentBoxProps) {
{/* Unified Professional Comment Box */} -
+
- {/* Avatar (Left Column) */} -
-
- {config.initials} -
-
- - {/* Info & Content (Right Column) */} -
+ {/* Info & Content */} +
{/* Header metadata row */}
@@ -116,8 +95,8 @@ export function CommentBox({ comment }: CommentBoxProps) {
{/* Time label */} -
- +
+ {formatDateTime(comment.created_at)}
diff --git a/app/src/components/ComplaintCard.tsx b/app/src/components/ComplaintCard.tsx index cbe7305..cfffcbb 100644 --- a/app/src/components/ComplaintCard.tsx +++ b/app/src/components/ComplaintCard.tsx @@ -146,21 +146,21 @@ export function ComplaintCard({
{/* Footer row: Date, Info fields, Comments and hover arrow */} -
-
- - {formatDate(post.created_at)} +
+
+ + {formatDate(post.created_at)} {isFaculty && post.place && ( - - {post.place} + + {post.place} )} {isWarden && post.room_number && ( - - Room {post.room_number} + + Room {post.room_number} )}
diff --git a/app/src/index.css b/app/src/index.css index f7ae390..2add21e 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -1,6 +1,7 @@ @import "tailwindcss"; @theme { + --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --color-primary: #003366; /* Deep Blue typical of NITH */ --color-primary-light: #00509e; --color-secondary: #f0f4f8; /* Light gray for backgrounds */ diff --git a/app/src/pages/post/PostView.tsx b/app/src/pages/post/PostView.tsx index fa91cff..cfecc48 100644 --- a/app/src/pages/post/PostView.tsx +++ b/app/src/pages/post/PostView.tsx @@ -563,7 +563,7 @@ export function PostView() {
{eventText} - + {formatDateTime(audit.timestamp)}
From 875c17d4a1c2afa5772fadf0500b541fe9182e24 Mon Sep 17 00:00:00 2001 From: ayush00git Date: Thu, 2 Jul 2026 17:39:39 +0530 Subject: [PATCH 4/5] fix: reply box updated --- app/src/components/ComplaintCard.tsx | 1 - app/src/pages/post/PostView.tsx | 58 +++++++++++++++++----------- 2 files changed, 36 insertions(+), 23 deletions(-) diff --git a/app/src/components/ComplaintCard.tsx b/app/src/components/ComplaintCard.tsx index cfffcbb..27d940f 100644 --- a/app/src/components/ComplaintCard.tsx +++ b/app/src/components/ComplaintCard.tsx @@ -171,7 +171,6 @@ export function ComplaintCard({ {comments.length} )} -
diff --git a/app/src/pages/post/PostView.tsx b/app/src/pages/post/PostView.tsx index cfecc48..32b5006 100644 --- a/app/src/pages/post/PostView.tsx +++ b/app/src/pages/post/PostView.tsx @@ -580,35 +580,49 @@ export function PostView() { {/* Composer */}
-
-
-