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 new file mode 100644 index 0000000..7cfaeee --- /dev/null +++ b/app/src/components/CommentBox.tsx @@ -0,0 +1,189 @@ +import { Clock, Pencil, Trash2 } from 'lucide-react'; + +interface CommentBoxProps { + comment: { + id: number; + comment_text: string; + email: string; + role: string; + created_at: string; + }; + isMyComment?: boolean; + isEditing?: boolean; + isBusy?: boolean; + editExpired?: boolean; + editingText?: string; + onStartEdit?: () => void; + onCancelEdit?: () => void; + onSaveEdit?: () => void; + onDeleteComment?: () => void; + onEditingTextChange?: (text: string) => void; +} + +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-100', + }; + } + if (norm.includes('warden')) { + return { + label: 'Warden', + 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-100', + }; + } + if (norm.includes('xen')) { + return { + label: 'XEN Admin', + 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-100', + }; + } + if (norm.includes('je')) { + return { + label: 'Junior Engineer', + 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', + }; +} + +export function CommentBox({ + comment, + isMyComment = false, + isEditing = false, + isBusy = false, + editExpired = true, + editingText = '', + onStartEdit, + onCancelEdit, + onSaveEdit, + onDeleteComment, + onEditingTextChange, +}: CommentBoxProps) { + const config = getRoleConfig(comment.role); + + return ( +
+ {/* Precision-aligned Connector Dot */} +
+ + {/* Unified Professional Comment Box */} +
+ + {/* Info & Content */} +
+ + {/* Header metadata row */} +
+
+ + {config.label} + + + {comment.role || 'Staff'} + + {comment.email && ( + + ({comment.email}) + + )} +
+ + {/* Time label & Action Buttons */} +
+
+ + {formatDateTime(comment.created_at)} +
+ + {/* Action Buttons (Edit/Delete) */} + {isMyComment && !isEditing && !editExpired && ( + + + + + )} +
+
+ + {/* Message Content */} +
+ {isEditing ? ( +
+