laxmanhalaki/Dealer_Onboard_Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme color changed to red i multiple places

Browse Source
This commit is contained in:
laxman h 2026-04-28 20:42:15 +05:30
parent 2a289e433c
commit 352c656a9e
35 changed files with 182 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/admin/ApprovalPoliciesPage.tsx
View File

@ -175,7 +175,7 @@ export function ApprovalPoliciesPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2"> <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
<Settings2 className="w-6 h-6 text-amber-600" /> <Settings2 className="w-6 h-6 text-re-red" />
Approval Policies Approval Policies
</h1> </h1>
<p className="text-slate-500">Configure stage-level approvers, mode, and minimum approvals.</p> <p className="text-slate-500">Configure stage-level approvers, mode, and minimum approvals.</p>
@ -185,7 +185,7 @@ export function ApprovalPoliciesPage() {
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} /> <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
Refresh Refresh
</Button> </Button>
<Button className="bg-amber-600 hover:bg-amber-700" onClick={openCreateModal}> <Button className="bg-re-red hover:bg-re-red-hover" onClick={openCreateModal}>
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add New Policy Add New Policy
</Button> </Button>
@ -244,7 +244,7 @@ export function ApprovalPoliciesPage() {
<Button <Button
size="sm" size="sm"
variant="ghost" variant="ghost"
className="text-amber-600 hover:text-amber-700 hover:bg-amber-50 h-8 px-2" className="text-re-red hover:text-re-red-hover hover:bg-red-50 h-8 px-2"
onClick={() => openEditModal(policy)} onClick={() => openEditModal(policy)}
> >
<Edit2 className="w-4 h-4 mr-1.5" /> <Edit2 className="w-4 h-4 mr-1.5" />
@ -264,7 +264,7 @@ export function ApprovalPoliciesPage() {
<DialogContent className="sm:max-w-[480px] overflow-visible"> <DialogContent className="sm:max-w-[480px] overflow-visible">
<DialogHeader className="gap-1 pb-2 border-b"> <DialogHeader className="gap-1 pb-2 border-b">
<DialogTitle className="text-base flex items-center gap-2"> <DialogTitle className="text-base flex items-center gap-2">
{isEditMode ? <Edit2 className="w-4 h-4 text-amber-600" /> : <Plus className="w-4 h-4 text-amber-600" />} {isEditMode ? <Edit2 className="w-4 h-4 text-re-red" /> : <Plus className="w-4 h-4 text-re-red" />}
{isEditMode ? 'Edit Policy' : 'Create New Policy'} {isEditMode ? 'Edit Policy' : 'Create New Policy'}
</DialogTitle> </DialogTitle>
<DialogDescription className="text-[11px]"> <DialogDescription className="text-[11px]">
@ -307,7 +307,7 @@ export function ApprovalPoliciesPage() {
))} ))}
<SelectGroup> <SelectGroup>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<SelectItem value="CUSTOM" className="text-xs font-semibold text-amber-600 italic"> <SelectItem value="CUSTOM" className="text-xs font-semibold text-re-red italic">
+ Enter Custom Stage Code + Enter Custom Stage Code
</SelectItem> </SelectItem>
</SelectGroup> </SelectGroup>
@ -376,10 +376,10 @@ export function ApprovalPoliciesPage() {
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="w-full justify-between h-8 text-[11px] text-slate-500 font-normal border-slate-200"> <Button variant="outline" size="sm" className="w-full justify-between h-8 text-[11px] text-slate-500 font-normal border-slate-200">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<Plus className="w-3 h-3 text-amber-600" /> <Plus className="w-3 h-3 text-re-red" />
<span>Add Roles...</span> <span>Add Roles...</span>
</div> </div>
<Badge variant="secondary" className="bg-amber-50 text-amber-700 border-transparent text-[9px] px-1 h-4"> <Badge variant="secondary" className="bg-red-50 text-re-red-hover border-transparent text-[9px] px-1 h-4">
{draft.requiredRoles.length} {draft.requiredRoles.length}
</Badge> </Badge>
</Button> </Button>
@ -445,7 +445,7 @@ export function ApprovalPoliciesPage() {
<Button variant="outline" size="sm" className="text-xs h-8" onClick={() => setIsModalOpen(false)}> <Button variant="outline" size="sm" className="text-xs h-8" onClick={() => setIsModalOpen(false)}>
Cancel Cancel
</Button> </Button>
<Button className="bg-amber-600 hover:bg-amber-700 h-8 text-xs font-semibold" onClick={savePolicy}> <Button className="bg-re-red hover:bg-re-red-hover h-8 text-xs font-semibold" onClick={savePolicy}>
<Save className="w-3 h-3 mr-1.5" /> <Save className="w-3 h-3 mr-1.5" />
{isEditMode ? 'Save Changes' : 'Create Policy'} {isEditMode ? 'Save Changes' : 'Create Policy'}
</Button> </Button>

28
src/components/admin/QuestionnaireBuilder.tsx
View File

@ -204,7 +204,7 @@ const QuestionnaireBuilder: React.FC = () => {
if (fetching) { if (fetching) {
return ( return (
<div className="flex justify-center p-12"> <div className="flex justify-center p-12">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-600"></div> <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-re-red"></div>
</div> </div>
); );
} }
@ -230,7 +230,7 @@ const QuestionnaireBuilder: React.FC = () => {
</div> </div>
<div className="flex flex-wrap items-center gap-4 w-full md:w-auto"> <div className="flex flex-wrap items-center gap-4 w-full md:w-auto">
<div className={`flex items-center gap-2 px-3 py-2 rounded-lg border ${totalWeight === 100 ? 'bg-green-50 border-green-200 text-green-700' : 'bg-amber-50 border-amber-200 text-amber-700'}`}> <div className={`flex items-center gap-2 px-3 py-2 rounded-lg border ${totalWeight === 100 ? 'bg-green-50 border-green-200 text-green-700' : 'bg-red-50 border-red-200 text-re-red-hover'}`}>
{totalWeight !== 100 && <AlertCircle size={16} />} {totalWeight !== 100 && <AlertCircle size={16} />}
<span className="text-sm font-semibold">Total Score: {totalWeight}/100</span> <span className="text-sm font-semibold">Total Score: {totalWeight}/100</span>
</div> </div>
@ -240,13 +240,13 @@ const QuestionnaireBuilder: React.FC = () => {
type="text" type="text"
value={version} value={version}
onChange={(e) => setVersion(e.target.value)} onChange={(e) => setVersion(e.target.value)}
className="border border-slate-300 p-2 rounded-lg w-full md:w-48 text-sm focus:ring-2 focus:ring-amber-500 outline-none" className="border border-slate-300 p-2 rounded-lg w-full md:w-48 text-sm focus:ring-2 focus:ring-red-500 outline-none"
placeholder="Version Name (e.g. v2.0)" placeholder="Version Name (e.g. v2.0)"
/> />
<button <button
onClick={handleSave} onClick={handleSave}
disabled={loading} disabled={loading}
className="bg-amber-600 text-white px-6 py-2 rounded-lg flex items-center gap-2 hover:bg-amber-700 disabled:bg-slate-300 disabled:cursor-not-allowed transition shadow-sm font-medium whitespace-nowrap" className="bg-re-red text-white px-6 py-2 rounded-lg flex items-center gap-2 hover:bg-re-red-hover disabled:bg-slate-300 disabled:cursor-not-allowed transition shadow-sm font-medium whitespace-nowrap"
> >
<Save size={18} /> {loading ? 'Saving...' : 'Publish'} <Save size={18} /> {loading ? 'Saving...' : 'Publish'}
</button> </button>
@ -271,7 +271,7 @@ const QuestionnaireBuilder: React.FC = () => {
type="text" type="text"
value={q.questionText} value={q.questionText}
onChange={(e) => updateQuestion(index, 'questionText', e.target.value)} onChange={(e) => updateQuestion(index, 'questionText', e.target.value)}
className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none transition-shadow" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-red-500 outline-none transition-shadow"
placeholder="Enter your question here..." placeholder="Enter your question here..."
/> />
</div> </div>
@ -281,7 +281,7 @@ const QuestionnaireBuilder: React.FC = () => {
<select <select
value={q.sectionName} value={q.sectionName}
onChange={(e) => updateQuestion(index, 'sectionName', e.target.value)} onChange={(e) => updateQuestion(index, 'sectionName', e.target.value)}
className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none bg-white" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-red-500 outline-none bg-white"
> >
{SECTIONS.map(s => <option key={s} value={s}>{s}</option>)} {SECTIONS.map(s => <option key={s} value={s}>{s}</option>)}
</select> </select>
@ -292,7 +292,7 @@ const QuestionnaireBuilder: React.FC = () => {
<select <select
value={q.inputType} value={q.inputType}
onChange={(e) => updateQuestion(index, 'inputType', e.target.value as any)} onChange={(e) => updateQuestion(index, 'inputType', e.target.value as any)}
className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none bg-white" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-red-500 outline-none bg-white"
> >
<option value="text">Text Input</option> <option value="text">Text Input</option>
<option value="email">Email Address</option> <option value="email">Email Address</option>
@ -313,17 +313,17 @@ const QuestionnaireBuilder: React.FC = () => {
type="number" type="number"
value={isNaN(q.weight) ? 0 : q.weight} value={isNaN(q.weight) ? 0 : q.weight}
onChange={(e) => updateQuestion(index, 'weight', parseFloat(e.target.value) || 0)} onChange={(e) => updateQuestion(index, 'weight', parseFloat(e.target.value) || 0)}
className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none pl-3 pr-8" className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-red-500 outline-none pl-3 pr-8"
title="Weightage" title="Weightage"
/> />
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-bold">%</span> <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-bold">%</span>
</div> </div>
</div> </div>
{/* <div className="flex items-center gap-2 px-3 py-2.5 bg-white border border-slate-200 rounded-lg cursor-pointer hover:border-amber-300 transition-colors" {/* <div className="flex items-center gap-2 px-3 py-2.5 bg-white border border-slate-200 rounded-lg cursor-pointer hover:border-red-300 transition-colors"
onClick={() => updateQuestion(index, 'isMandatory', !q.isMandatory)} onClick={() => updateQuestion(index, 'isMandatory', !q.isMandatory)}
> >
<div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${q.isMandatory ? 'bg-amber-600 border-amber-600' : 'border-slate-300'}`}> <div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${q.isMandatory ? 'bg-re-red border-re-red' : 'border-slate-300'}`}>
{q.isMandatory && <div className="w-2 h-2 bg-white rounded-sm" />} {q.isMandatory && <div className="w-2 h-2 bg-white rounded-sm" />}
</div> </div>
<span className="text-xs font-medium text-slate-600 select-none">Req.</span> <span className="text-xs font-medium text-slate-600 select-none">Req.</span>
@ -345,7 +345,7 @@ const QuestionnaireBuilder: React.FC = () => {
type="text" type="text"
value={opt.text} value={opt.text}
onChange={(e) => updateOption(index, optIndex, 'text', e.target.value)} onChange={(e) => updateOption(index, optIndex, 'text', e.target.value)}
className="flex-1 border border-slate-300 p-2 rounded-md text-sm focus:ring-1 focus:ring-amber-500 outline-none" className="flex-1 border border-slate-300 p-2 rounded-md text-sm focus:ring-1 focus:ring-red-500 outline-none"
placeholder={`Option ${optIndex + 1}`} placeholder={`Option ${optIndex + 1}`}
/> />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -356,7 +356,7 @@ const QuestionnaireBuilder: React.FC = () => {
max={isNaN(q.weight) ? 0 : q.weight} max={isNaN(q.weight) ? 0 : q.weight}
min={0} min={0}
onChange={(e) => updateOption(index, optIndex, 'score', e.target.value)} onChange={(e) => updateOption(index, optIndex, 'score', e.target.value)}
className={`w-20 border ${(opt.score > q.weight) || isNaN(opt.score) ? 'border-red-500 text-red-600' : 'border-slate-300'} p-2 rounded-md text-sm focus:ring-1 focus:ring-amber-500 outline-none`} className={`w-20 border ${(opt.score > q.weight) || isNaN(opt.score) ? 'border-red-500 text-red-600' : 'border-slate-300'} p-2 rounded-md text-sm focus:ring-1 focus:ring-red-500 outline-none`}
/> />
</div> </div>
<button <button
@ -371,7 +371,7 @@ const QuestionnaireBuilder: React.FC = () => {
</div> </div>
<button <button
onClick={() => addOption(index)} onClick={() => addOption(index)}
className="mt-3 text-sm flex items-center gap-1 text-amber-600 hover:text-amber-700 font-medium" className="mt-3 text-sm flex items-center gap-1 text-re-red hover:text-re-red-hover font-medium"
> >
<Plus size={16} /> Add Option <Plus size={16} /> Add Option
</button> </button>
@ -392,7 +392,7 @@ const QuestionnaireBuilder: React.FC = () => {
<button <button
onClick={addQuestion} onClick={addQuestion}
className="mt-8 w-full border-2 border-dashed border-slate-300 p-4 rounded-xl text-slate-500 hover:border-amber-500 hover:text-amber-600 hover:bg-amber-50/30 flex justify-center items-center gap-2 transition-all font-medium" className="mt-8 w-full border-2 border-dashed border-slate-300 p-4 rounded-xl text-slate-500 hover:border-red-500 hover:text-re-red hover:bg-red-50/30 flex justify-center items-center gap-2 transition-all font-medium"
> >
<Plus size={20} /> Add Another Question <Plus size={20} /> Add Another Question
</button> </button>

8
src/components/admin/QuestionnaireList.tsx
View File

@ -47,7 +47,7 @@ const QuestionnaireList: React.FC = () => {
</div> </div>
<button <button
onClick={() => navigate('/questionnaire-builder')} onClick={() => navigate('/questionnaire-builder')}
className="bg-amber-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-amber-700 transition" className="bg-re-red text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-re-red-hover transition"
> >
<Plus size={20} /> Create New Version <Plus size={20} /> Create New Version
</button> </button>
@ -55,14 +55,14 @@ const QuestionnaireList: React.FC = () => {
{loading ? ( {loading ? (
<div className="flex justify-center p-12"> <div className="flex justify-center p-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div> <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-re-red"></div>
</div> </div>
) : versions.length === 0 ? ( ) : versions.length === 0 ? (
<div className="text-center p-12 bg-white rounded-lg shadow-sm border border-slate-200"> <div className="text-center p-12 bg-white rounded-lg shadow-sm border border-slate-200">
<p className="text-slate-500 mb-4">No questionnaire versions found.</p> <p className="text-slate-500 mb-4">No questionnaire versions found.</p>
<button <button
onClick={() => navigate('/questionnaire-builder')} onClick={() => navigate('/questionnaire-builder')}
className="text-amber-600 font-medium hover:underline" className="text-re-red font-medium hover:underline"
> >
Create your first version Create your first version
</button> </button>
@ -102,7 +102,7 @@ const QuestionnaireList: React.FC = () => {
<td className="p-4 text-right"> <td className="p-4 text-right">
<button <button
onClick={() => navigate(`/questionnaire-builder/${v.id}`)} onClick={() => navigate(`/questionnaire-builder/${v.id}`)}
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium text-slate-600 hover:text-amber-600 hover:bg-amber-50 transition border border-slate-200 hover:border-amber-200" className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium text-slate-600 hover:text-re-red hover:bg-red-50 transition border border-slate-200 hover:border-red-200"
> >
<Edit2 size={14} /> Edit / Clone <Edit2 size={14} /> Edit / Clone
</button> </button>

10
src/components/admin/UserManagementPage.tsx
View File

@ -219,7 +219,7 @@ export function UserManagementPage() {
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div> <div>
<h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2"> <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
<Users className="w-6 h-6 text-amber-600" /> <Users className="w-6 h-6 text-re-red" />
User Management User Management
</h1> </h1>
<p className="text-slate-500">Manage system users, roles, and access permissions.</p> <p className="text-slate-500">Manage system users, roles, and access permissions.</p>
@ -232,7 +232,7 @@ export function UserManagementPage() {
zoneId: '', regionId: '', stateId: '', districtId: '' zoneId: '', regionId: '', stateId: '', districtId: ''
}); setShowUserModal(true); }); setShowUserModal(true);
}} }}
className="bg-amber-600 hover:bg-amber-700 text-white shrink-0" className="bg-re-red hover:bg-re-red-hover text-white shrink-0"
> >
<UserPlus className="w-4 h-4 mr-2" /> <UserPlus className="w-4 h-4 mr-2" />
Add New User Add New User
@ -318,7 +318,7 @@ export function UserManagementPage() {
<TableRow key={user.id} className="hover:bg-slate-50/50"> <TableRow key={user.id} className="hover:bg-slate-50/50">
<TableCell> <TableCell>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center font-bold"> <div className="w-10 h-10 rounded-full bg-red-100 text-re-red-hover flex items-center justify-center font-bold">
{user.fullName?.charAt(0) || user.email?.charAt(0)} {user.fullName?.charAt(0) || user.email?.charAt(0)}
</div> </div>
<div> <div>
@ -384,7 +384,7 @@ export function UserManagementPage() {
<TableCell className="text-right"> <TableCell className="text-right">
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="ghost" size="icon" onClick={() => handleEditUser(user)}> <Button variant="ghost" size="icon" onClick={() => handleEditUser(user)}>
<Edit2 className="w-4 h-4 text-slate-400 hover:text-amber-600" /> <Edit2 className="w-4 h-4 text-slate-400 hover:text-re-red" />
</Button> </Button>
<Button variant="ghost" size="icon"> <Button variant="ghost" size="icon">
<Trash2 className="w-4 h-4 text-slate-400 hover:text-red-600" /> <Trash2 className="w-4 h-4 text-slate-400 hover:text-red-600" />
@ -569,7 +569,7 @@ export function UserManagementPage() {
<DialogFooter className="bg-slate-50 -mx-6 -mb-6 p-4 rounded-b-lg"> <DialogFooter className="bg-slate-50 -mx-6 -mb-6 p-4 rounded-b-lg">
<Button variant="outline" onClick={() => setShowUserModal(false)}>Cancel</Button> <Button variant="outline" onClick={() => setShowUserModal(false)}>Cancel</Button>
<Button className="bg-amber-600 hover:bg-amber-700 text-white" onClick={handleSubmit}> <Button className="bg-re-red hover:bg-re-red-hover text-white" onClick={handleSubmit}>
{editingUser ? 'Save Changes' : 'Create User'} {editingUser ? 'Save Changes' : 'Create User'}
</Button> </Button>
</DialogFooter> </DialogFooter>

4
src/features/master/components/ASMDialog.tsx
View File

@ -181,7 +181,7 @@ export const ASMDialog: React.FC<ASMDialogProps> = ({
return ( return (
<div key={state} className="mb-4 last:mb-0"> <div key={state} className="mb-4 last:mb-0">
<h4 className="text-sm text-amber-700 mb-2 pb-1 border-b border-slate-200">{state}</h4> <h4 className="text-sm text-re-red-hover mb-2 pb-1 border-b border-slate-200">{state}</h4>
<div className="space-y-2 ml-2"> <div className="space-y-2 ml-2">
{districts.map((district: any) => ( {districts.map((district: any) => (
<div key={district.id}> <div key={district.id}>
@ -280,7 +280,7 @@ export const ASMDialog: React.FC<ASMDialogProps> = ({
<div className="flex gap-3 pt-4"> <div className="flex gap-3 pt-4">
<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button> <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save DD-AM</Button> <Button className="flex-1 bg-re-red hover:bg-re-red-hover" onClick={onSave}>Save DD-AM</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>

6
src/features/master/components/ASMManagement.tsx
View File

@ -41,7 +41,7 @@ export const ASMManagement: React.FC<ASMManagementProps> = ({
<CardTitle>District Development Area Managers (DD-AM)</CardTitle> <CardTitle>District Development Area Managers (DD-AM)</CardTitle>
<CardDescription>Manage DD-AM users across districts (multi-district)</CardDescription> <CardDescription>Manage DD-AM users across districts (multi-district)</CardDescription>
</div> </div>
<Button onClick={onAddASM} className="bg-amber-600 hover:bg-amber-700"> <Button onClick={onAddASM} className="bg-re-red hover:bg-re-red-hover">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add DD-AM Add DD-AM
</Button> </Button>
@ -86,7 +86,7 @@ export const ASMManagement: React.FC<ASMManagementProps> = ({
<Badge <Badge
key={idx} key={idx}
variant={isShared ? "outline" : "secondary"} variant={isShared ? "outline" : "secondary"}
className={`text-xs ${isShared ? "border-amber-300 bg-amber-50 text-amber-700 font-medium" : ""}`} className={`text-xs ${isShared ? "border-red-300 bg-red-50 text-re-red-hover font-medium" : ""}`}
title={isShared ? `Also managed by: ${otherManagers.join(', ')}` : undefined} title={isShared ? `Also managed by: ${otherManagers.join(', ')}` : undefined}
> >
{areaName} {areaName}
@ -112,7 +112,7 @@ export const ASMManagement: React.FC<ASMManagementProps> = ({
<Button variant="ghost" size="sm" onClick={() => onEditASM(asm)}> <Button variant="ghost" size="sm" onClick={() => onEditASM(asm)}>
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
</Button> </Button>
<Button variant="ghost" size="sm" onClick={() => onDeleteASM(asm.id, asm.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50"> <Button variant="ghost" size="sm" onClick={() => onDeleteASM(asm.id, asm.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
</div> </div>

13
src/features/master/components/AutoAssignmentSettings.tsx
View File

@ -83,7 +83,7 @@ export const AutoAssignmentSettings: React.FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="flex flex-col items-center justify-center p-12 space-y-4"> <div className="flex flex-col items-center justify-center p-12 space-y-4">
<RefreshCcw className="w-8 h-8 animate-spin text-amber-600" /> <RefreshCcw className="w-8 h-8 animate-spin text-re-red" />
<p className="text-slate-500 font-medium">Loading governance controls...</p> <p className="text-slate-500 font-medium">Loading governance controls...</p>
</div> </div>
); );
@ -94,8 +94,8 @@ export const AutoAssignmentSettings: React.FC = () => {
<Card className="border-none shadow-md overflow-hidden bg-white/50 backdrop-blur-sm"> <Card className="border-none shadow-md overflow-hidden bg-white/50 backdrop-blur-sm">
<CardHeader className="bg-gradient-to-r from-slate-900 to-slate-800 text-white p-6"> <CardHeader className="bg-gradient-to-r from-slate-900 to-slate-800 text-white p-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-amber-500/20 rounded-lg"> <div className="p-2 bg-red-500/20 rounded-lg">
<Settings2 className="w-6 h-6 text-amber-400" /> <Settings2 className="w-6 h-6 text-red-400" />
</div> </div>
<div> <div>
<CardTitle className="text-xl font-bold">Auto-Assignment Governance</CardTitle> <CardTitle className="text-xl font-bold">Auto-Assignment Governance</CardTitle>
@ -148,6 +148,7 @@ export const AutoAssignmentSettings: React.FC = () => {
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Switch <Switch
className="data-[state=checked]:bg-re-red"
checked={isEnabled} checked={isEnabled}
onCheckedChange={(val) => { onCheckedChange={(val) => {
handleToggle(mod.key, val); handleToggle(mod.key, val);
@ -164,9 +165,9 @@ export const AutoAssignmentSettings: React.FC = () => {
})} })}
</div> </div>
<div className="mt-8 p-4 bg-amber-50 border border-amber-100 rounded-lg flex items-start gap-3"> <div className="mt-8 p-4 bg-red-50 border border-red-100 rounded-lg flex items-start gap-3">
<Info className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" /> <Info className="w-5 h-5 text-re-red shrink-0 mt-0.5" />
<div className="text-sm text-amber-800"> <div className="text-sm text-red-800">
<p className="font-semibold mb-1">Impact of Manual Mode:</p> <p className="font-semibold mb-1">Impact of Manual Mode:</p>
<p>Turning OFF auto-assignment will ONLY affect new requests. Existing requests will retain their current participant mappings. You will need to use the "Add Participant" button in the worknotes or application details to grant access to stakeholders.</p> <p>Turning OFF auto-assignment will ONLY affect new requests. Existing requests will retain their current participant mappings. You will need to use the "Add Participant" button in the worknotes or application details to grant access to stakeholders.</p>
</div> </div>

2
src/features/master/components/DDLeadDialog.tsx
View File

@ -127,7 +127,7 @@ export const DDLeadDialog: React.FC<DDLeadDialogProps> = ({
<div className="flex gap-3 pt-6"> <div className="flex gap-3 pt-6">
<Button variant="outline" className="flex-1 border-slate-200" onClick={() => onOpenChange(false)}>Cancel</Button> <Button variant="outline" className="flex-1 border-slate-200" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button className="flex-1 bg-amber-600 hover:bg-amber-700 shadow-sm" onClick={onSave}>Save DD Lead</Button> <Button className="flex-1 bg-re-red hover:bg-re-red-hover shadow-sm" onClick={onSave}>Save DD Lead</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>

6
src/features/master/components/DDLeadManagement.tsx
View File

@ -36,7 +36,7 @@ export const DDLeadManagement: React.FC<DDLeadManagementProps> = ({
<CardTitle>DD-Leads (Dealer Development Lead)</CardTitle> <CardTitle>DD-Leads (Dealer Development Lead)</CardTitle>
<CardDescription>Manage DD-Leads and their zonal assignments</CardDescription> <CardDescription>Manage DD-Leads and their zonal assignments</CardDescription>
</div> </div>
<Button onClick={onAddLead} className="bg-amber-600 hover:bg-amber-700"> <Button onClick={onAddLead} className="bg-re-red hover:bg-re-red-hover">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add DD-Lead Add DD-Lead
</Button> </Button>
@ -60,7 +60,7 @@ export const DDLeadManagement: React.FC<DDLeadManagementProps> = ({
<TableRow key={lead.id}> <TableRow key={lead.id}>
<TableCell> <TableCell>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Users className="w-4 h-4 text-amber-600" /> <Users className="w-4 h-4 text-re-red" />
<span className="font-medium">{lead.leadCode || 'N/A'}</span> <span className="font-medium">{lead.leadCode || 'N/A'}</span>
</div> </div>
</TableCell> </TableCell>
@ -95,7 +95,7 @@ export const DDLeadManagement: React.FC<DDLeadManagementProps> = ({
<Button variant="ghost" size="sm" onClick={() => onEditLead(lead)}> <Button variant="ghost" size="sm" onClick={() => onEditLead(lead)}>
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
</Button> </Button>
<Button variant="ghost" size="sm" onClick={() => onDeleteLead(lead.id, lead.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50"> <Button variant="ghost" size="sm" onClick={() => onDeleteLead(lead.id, lead.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
</div> </div>

7
src/features/master/components/DealerAsmAssignment.tsx
View File

@ -193,7 +193,10 @@ export const DealerAsmAssignment: React.FC = () => {
</TableCell> </TableCell>
<TableCell>{dealer.dealerCode || 'N/A'}</TableCell> <TableCell>{dealer.dealerCode || 'N/A'}</TableCell>
<TableCell> <TableCell>
<Badge variant={String(dealer.status || '').toLowerCase() === 'active' ? 'default' : 'secondary'}> <Badge
variant={String(dealer.status || '').toLowerCase() === 'active' ? 'default' : 'secondary'}
className={String(dealer.status || '').toLowerCase() === 'active' ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200' : ''}
>
{dealer.status || 'Unknown'} {dealer.status || 'Unknown'}
</Badge> </Badge>
</TableCell> </TableCell>
@ -215,7 +218,7 @@ export const DealerAsmAssignment: React.FC = () => {
onChange={(val) => setDraft((prev) => ({ ...prev, [dealer.dealerId]: val }))} onChange={(val) => setDraft((prev) => ({ ...prev, [dealer.dealerId]: val }))}
className="flex-1 min-w-[180px]" className="flex-1 min-w-[180px]"
/> />
<Button size="sm" className="shrink-0" onClick={() => saveMapping(dealer.dealerId)}> <Button size="sm" className="shrink-0 bg-re-red hover:bg-re-red-hover text-white" onClick={() => saveMapping(dealer.dealerId)}>
Assign Assign
</Button> </Button>
</div> </div>

46
src/features/master/components/DocumentConfigManagement.tsx
View File

@ -179,7 +179,7 @@ export const DocumentConfigManagement: React.FC = () => {
if (metadataLoading) { if (metadataLoading) {
return ( return (
<div className="h-96 flex flex-col items-center justify-center gap-4"> <div className="h-96 flex flex-col items-center justify-center gap-4">
<Database className="w-10 h-10 text-amber-600 animate-bounce" /> <Database className="w-10 h-10 text-re-red animate-bounce" />
<p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Connecting to Governance Engine...</p> <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Connecting to Governance Engine...</p>
</div> </div>
); );
@ -189,8 +189,8 @@ export const DocumentConfigManagement: React.FC = () => {
<Card className="border-slate-200 shadow-sm overflow-hidden bg-white"> <Card className="border-slate-200 shadow-sm overflow-hidden bg-white">
<CardHeader className="bg-slate-50/80 border-b border-slate-200 py-4 relative"> <CardHeader className="bg-slate-50/80 border-b border-slate-200 py-4 relative">
{backgroundLoading && ( {backgroundLoading && (
<div className="absolute top-0 left-0 right-0 h-1 bg-amber-100 overflow-hidden"> <div className="absolute top-0 left-0 right-0 h-1 bg-red-100 overflow-hidden">
<div className="h-full bg-amber-600 animate-[loading_1.5s_infinite_linear]" style={{width: '30%', transformOrigin: 'left'}} /> <div className="h-full bg-re-red animate-[loading_1.5s_infinite_linear]" style={{width: '30%', transformOrigin: 'left'}} />
<style>{` <style>{`
@keyframes loading { @keyframes loading {
0% { left: -30%; } 0% { left: -30%; }
@ -202,7 +202,7 @@ export const DocumentConfigManagement: React.FC = () => {
<div className="flex flex-row items-center justify-between mb-4"> <div className="flex flex-row items-center justify-between mb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-white rounded-xl shadow-sm ring-1 ring-slate-200 text-amber-600"> <div className="p-2 bg-white rounded-xl shadow-sm ring-1 ring-slate-200 text-re-red">
<Layers className="w-5 h-5" /> <Layers className="w-5 h-5" />
</div> </div>
<div> <div>
@ -218,7 +218,7 @@ export const DocumentConfigManagement: React.FC = () => {
<div className="flex gap-4"> <div className="flex gap-4">
<div className="w-64"> <div className="w-64">
<Select value={selectedModule} onValueChange={(val) => { setSelectedModule(val); setPage(1); }}> <Select value={selectedModule} onValueChange={(val) => { setSelectedModule(val); setPage(1); }}>
<SelectTrigger className="h-10 rounded-xl bg-white border-slate-200 focus:ring-amber-500 font-bold text-slate-700 shadow-sm"> <SelectTrigger className="h-10 rounded-xl bg-white border-slate-200 focus:ring-red-500 font-bold text-slate-700 shadow-sm">
<SelectValue placeholder="Target Module" /> <SelectValue placeholder="Target Module" />
</SelectTrigger> </SelectTrigger>
<SelectContent className="rounded-xl shadow-2xl border-none"> <SelectContent className="rounded-xl shadow-2xl border-none">
@ -236,7 +236,7 @@ export const DocumentConfigManagement: React.FC = () => {
placeholder="Search policies, stages or documents..." placeholder="Search policies, stages or documents..."
value={search} value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }} onChange={(e) => { setSearch(e.target.value); setPage(1); }}
className="pl-10 h-10 rounded-xl bg-white border-slate-200 focus:ring-amber-500 shadow-sm font-medium" className="pl-10 h-10 rounded-xl bg-white border-slate-200 focus:ring-red-500 shadow-sm font-medium"
/> />
</div> </div>
</div> </div>
@ -244,7 +244,7 @@ export const DocumentConfigManagement: React.FC = () => {
<CardContent className="p-0 min-h-[400px] relative"> <CardContent className="p-0 min-h-[400px] relative">
{loading ? ( {loading ? (
<div className="absolute inset-0 z-10 bg-white/60 backdrop-blur-[1px] flex flex-col items-center justify-center gap-3"> <div className="absolute inset-0 z-10 bg-white/60 backdrop-blur-[1px] flex flex-col items-center justify-center gap-3">
<Loader2 className="w-8 h-8 text-amber-600 animate-spin" /> <Loader2 className="w-8 h-8 text-re-red animate-spin" />
<span className="text-slate-500 text-sm font-bold animate-pulse">Syncing Policies...</span> <span className="text-slate-500 text-sm font-bold animate-pulse">Syncing Policies...</span>
</div> </div>
) : null} ) : null}
@ -274,7 +274,7 @@ export const DocumentConfigManagement: React.FC = () => {
) : configs.map((config) => ( ) : configs.map((config) => (
<TableRow key={config.id} className="hover:bg-slate-50/80 transition-colors group h-14"> <TableRow key={config.id} className="hover:bg-slate-50/80 transition-colors group h-14">
<TableCell> <TableCell>
<div className="font-bold text-slate-900 group-hover:text-amber-700 transition-colors uppercase text-[12px]">{config.documentType}</div> <div className="font-bold text-slate-900 group-hover:text-re-red-hover transition-colors uppercase text-[12px]">{config.documentType}</div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Badge variant="outline" className="bg-blue-50/50 border-blue-100 text-blue-700 font-bold px-2 py-0.5 whitespace-nowrap text-[10px] rounded-md uppercase"> <Badge variant="outline" className="bg-blue-50/50 border-blue-100 text-blue-700 font-bold px-2 py-0.5 whitespace-nowrap text-[10px] rounded-md uppercase">
@ -305,7 +305,7 @@ export const DocumentConfigManagement: React.FC = () => {
<TableCell> <TableCell>
<div className="flex gap-2"> <div className="flex gap-2">
{config.isMandatory && ( {config.isMandatory && (
<Badge className="bg-red-600 text-white border-transparent text-[10px] font-bold h-5 px-1.5 rounded-sm uppercase tracking-tighter">BLOCKING</Badge> <Badge className="bg-re-red text-white border-transparent text-[10px] font-bold h-5 px-1.5 rounded-sm uppercase tracking-tighter">BLOCKING</Badge>
)} )}
{!config.isActive && ( {!config.isActive && (
<Badge className="bg-slate-200 text-slate-500 border-transparent text-[10px] h-5 px-1.5 rounded-sm uppercase tracking-tighter">DORMANT</Badge> <Badge className="bg-slate-200 text-slate-500 border-transparent text-[10px] h-5 px-1.5 rounded-sm uppercase tracking-tighter">DORMANT</Badge>
@ -320,7 +320,7 @@ export const DocumentConfigManagement: React.FC = () => {
<Button variant="ghost" size="icon" onClick={() => openEdit(config)} className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-transform active:scale-90"> <Button variant="ghost" size="icon" onClick={() => openEdit(config)} className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-transform active:scale-90">
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
</Button> </Button>
<Button variant="ghost" size="icon" onClick={() => handleDelete(config.id)} className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-transform active:scale-90"> <Button variant="ghost" size="icon" onClick={() => handleDelete(config.id)} className="h-8 w-8 text-slate-400 hover:text-re-red hover:bg-red-50 rounded-lg transition-transform active:scale-90">
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
</div> </div>
@ -333,7 +333,7 @@ export const DocumentConfigManagement: React.FC = () => {
{/* Pagination Controls */} {/* Pagination Controls */}
<div className="flex items-center justify-between px-6 py-4 bg-slate-50/50 border-t border-slate-200 mt-auto"> <div className="flex items-center justify-between px-6 py-4 bg-slate-50/50 border-t border-slate-200 mt-auto">
<div className="text-[11px] text-slate-500 font-bold uppercase tracking-tight"> <div className="text-[11px] text-slate-500 font-bold uppercase tracking-tight">
Dataset Index <span className="text-slate-900 border-b border-slate-300 mx-1">{configs.length > 0 ? (page - 1) * limit + 1 : 0} - {Math.min(page * limit, pagination.total)}</span> Total Found <span className="text-amber-700 font-extrabold ml-1">{pagination.total}</span> Dataset Index <span className="text-slate-900 border-b border-slate-300 mx-1">{configs.length > 0 ? (page - 1) * limit + 1 : 0} - {Math.min(page * limit, pagination.total)}</span> Total Found <span className="text-re-red-hover font-extrabold ml-1">{pagination.total}</span>
</div> </div>
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
<Button <Button
@ -346,7 +346,7 @@ export const DocumentConfigManagement: React.FC = () => {
<ChevronLeft className="w-4 h-4 mr-1 text-slate-600" /> Prev <ChevronLeft className="w-4 h-4 mr-1 text-slate-600" /> Prev
</Button> </Button>
<div className="flex items-center px-4 h-9 bg-white border border-slate-200 rounded-xl text-xs font-extrabold text-slate-800 shadow-inner"> <div className="flex items-center px-4 h-9 bg-white border border-slate-200 rounded-xl text-xs font-extrabold text-slate-800 shadow-inner">
<span className="text-amber-600">{page}</span> <span className="mx-2 text-slate-300">/</span> {pagination.pages} <span className="text-re-red">{page}</span> <span className="mx-2 text-slate-300">/</span> {pagination.pages}
</div> </div>
<Button <Button
variant="outline" variant="outline"
@ -366,7 +366,7 @@ export const DocumentConfigManagement: React.FC = () => {
<DialogHeader className="bg-slate-900 text-white p-7"> <DialogHeader className="bg-slate-900 text-white p-7">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="p-3 bg-white/10 rounded-2xl backdrop-blur-md ring-1 ring-white/20"> <div className="p-3 bg-white/10 rounded-2xl backdrop-blur-md ring-1 ring-white/20">
<Settings2 className="w-7 h-7 text-amber-400" /> <Settings2 className="w-7 h-7 text-red-400" />
</div> </div>
<div> <div>
<DialogTitle className="text-2xl font-black tracking-tight uppercase"> <DialogTitle className="text-2xl font-black tracking-tight uppercase">
@ -385,12 +385,12 @@ export const DocumentConfigManagement: React.FC = () => {
value={formData.module} value={formData.module}
onValueChange={(val) => setFormData(prev => ({ ...prev, module: val, stageCode: 'General' }))} onValueChange={(val) => setFormData(prev => ({ ...prev, module: val, stageCode: 'General' }))}
> >
<SelectTrigger className="h-12 rounded-xl border-slate-200 focus:ring-amber-500 shadow-sm bg-slate-50 font-black text-xs uppercase"> <SelectTrigger className="h-12 rounded-xl border-slate-200 focus:ring-red-500 shadow-sm bg-slate-50 font-black text-xs uppercase">
<SelectValue placeholder="Module" /> <SelectValue placeholder="Module" />
</SelectTrigger> </SelectTrigger>
<SelectContent className="rounded-xl border-none shadow-2xl"> <SelectContent className="rounded-xl border-none shadow-2xl">
{modules.map(m => ( {modules.map(m => (
<SelectItem key={m} value={m} className="py-3 px-4 rounded-lg focus:bg-amber-50 font-black text-[10px] uppercase"> <SelectItem key={m} value={m} className="py-3 px-4 rounded-lg focus:bg-red-50 font-black text-[10px] uppercase">
{m.replace(/_/g, ' ')} {m.replace(/_/g, ' ')}
</SelectItem> </SelectItem>
))} ))}
@ -403,12 +403,12 @@ export const DocumentConfigManagement: React.FC = () => {
value={formData.stageCode} value={formData.stageCode}
onValueChange={(val) => setFormData(prev => ({ ...prev, stageCode: val }))} onValueChange={(val) => setFormData(prev => ({ ...prev, stageCode: val }))}
> >
<SelectTrigger className="h-12 rounded-xl border-slate-200 focus:ring-amber-500 shadow-sm bg-white font-black text-xs uppercase"> <SelectTrigger className="h-12 rounded-xl border-slate-200 focus:ring-red-500 shadow-sm bg-white font-black text-xs uppercase">
<SelectValue placeholder="Select Stage" /> <SelectValue placeholder="Select Stage" />
</SelectTrigger> </SelectTrigger>
<SelectContent className="rounded-xl border-none shadow-2xl"> <SelectContent className="rounded-xl border-none shadow-2xl">
{(stagesMap[formData.module] || ['General']).map(stage => ( {(stagesMap[formData.module] || ['General']).map(stage => (
<SelectItem key={stage} value={stage} className="py-3 px-4 rounded-lg focus:bg-amber-50 font-black text-[10px] uppercase">{stage}</SelectItem> <SelectItem key={stage} value={stage} className="py-3 px-4 rounded-lg focus:bg-red-50 font-black text-[10px] uppercase">{stage}</SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
@ -421,28 +421,28 @@ export const DocumentConfigManagement: React.FC = () => {
value={formData.documentType} value={formData.documentType}
onChange={(e) => setFormData(prev => ({ ...prev, documentType: e.target.value }))} onChange={(e) => setFormData(prev => ({ ...prev, documentType: e.target.value }))}
placeholder="e.g., PAN Card, Blueprint" placeholder="e.g., PAN Card, Blueprint"
className="h-12 rounded-xl border-slate-200 focus:ring-amber-500 shadow-sm font-black text-sm uppercase placeholder:font-bold placeholder:text-slate-300" className="h-12 rounded-xl border-slate-200 focus:ring-red-500 shadow-sm font-black text-sm uppercase placeholder:font-bold placeholder:text-slate-300"
/> />
</div> </div>
<div className="space-y-4 p-5 bg-slate-50 rounded-2xl border border-slate-100 shadow-inner"> <div className="space-y-4 p-5 bg-slate-50 rounded-2xl border border-slate-100 shadow-inner">
<Label className="text-slate-900 font-black flex items-center gap-2 mb-2 text-[11px] uppercase tracking-wider"> <Label className="text-slate-900 font-black flex items-center gap-2 mb-2 text-[11px] uppercase tracking-wider">
<ShieldCheck className="w-4 h-4 text-amber-600" /> Visibility Matrix <ShieldCheck className="w-4 h-4 text-re-red" /> Visibility Matrix
</Label> </Label>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
{ROLE_LIST.map((role: string) => ( {ROLE_LIST.map((role: string) => (
<div <div
key={role} key={role}
className={`flex items-center space-x-2 p-3 rounded-xl border transition-all cursor-pointer group active:scale-95 ${formData.allowedRoles.includes(role) ? 'bg-amber-50 border-amber-300 shadow-sm' : 'bg-white border-slate-200 hover:border-amber-200 hover:shadow-sm'}`} className={`flex items-center space-x-2 p-3 rounded-xl border transition-all cursor-pointer group active:scale-95 ${formData.allowedRoles.includes(role) ? 'bg-red-50 border-red-300 shadow-sm' : 'bg-white border-slate-200 hover:border-red-200 hover:shadow-sm'}`}
onClick={() => toggleRole(role)} onClick={() => toggleRole(role)}
> >
<Checkbox <Checkbox
id={`role-${role}`} id={`role-${role}`}
checked={formData.allowedRoles.includes(role)} checked={formData.allowedRoles.includes(role)}
onCheckedChange={() => toggleRole(role)} onCheckedChange={() => toggleRole(role)}
className="w-4 h-4 data-[state=checked]:bg-amber-600 data-[state=checked]:border-amber-600 rounded" className="w-4 h-4 data-[state=checked]:bg-re-red data-[state=checked]:border-re-red rounded"
/> />
<Label htmlFor={`role-${role}`} className={`text-[10px] font-black cursor-pointer uppercase truncate ${formData.allowedRoles.includes(role) ? 'text-amber-800' : 'text-slate-500 group-hover:text-amber-700'}`}>{role}</Label> <Label htmlFor={`role-${role}`} className={`text-[10px] font-black cursor-pointer uppercase truncate ${formData.allowedRoles.includes(role) ? 'text-red-800' : 'text-slate-500 group-hover:text-re-red-hover'}`}>{role}</Label>
</div> </div>
))} ))}
</div> </div>
@ -457,7 +457,7 @@ export const DocumentConfigManagement: React.FC = () => {
id="mandatory" id="mandatory"
checked={formData.isMandatory} checked={formData.isMandatory}
onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isMandatory: !!checked }))} onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isMandatory: !!checked }))}
className="w-5 h-5 border-slate-300 data-[state=checked]:bg-red-600 data-[state=checked]:border-red-600 rounded-md" className="w-5 h-5 border-slate-300 data-[state=checked]:bg-re-red data-[state=checked]:border-re-red rounded-md"
/> />
<div className="space-y-0.5"> <div className="space-y-0.5">
<Label htmlFor="mandatory" className="text-xs font-black text-slate-800 cursor-pointer group-hover:text-red-900 transition-colors uppercase tracking-tight">Mandatory Policy</Label> <Label htmlFor="mandatory" className="text-xs font-black text-slate-800 cursor-pointer group-hover:text-red-900 transition-colors uppercase tracking-tight">Mandatory Policy</Label>

6
src/features/master/components/EmailTemplateBodyEditor.tsx
View File

@ -89,9 +89,9 @@ export const EmailTemplateBodyEditor = React.forwardRef<EmailTemplateBodyEditorH
</TabsList> </TabsList>
{advanced && ( {advanced && (
<Alert className="border-amber-200 bg-amber-50 py-2"> <Alert className="border-red-200 bg-red-50 py-2">
<Info className="h-4 w-4 text-amber-700" /> <Info className="h-4 w-4 text-re-red-hover" />
<AlertDescription className="text-[11px] text-amber-900"> <AlertDescription className="text-[11px] text-red-900">
This template uses layout partials (<code className="font-mono">{'{{> ...}}'}</code>), block helpers, or a full HTML This template uses layout partials (<code className="font-mono">{'{{> ...}}'}</code>), block helpers, or a full HTML
document. Edit it in <strong>HTML source</strong> so nothing is stripped. Use placeholders on the left to insert document. Edit it in <strong>HTML source</strong> so nothing is stripped. Use placeholders on the left to insert
fields safely. fields safely.

6
src/features/master/components/EmailTemplates.tsx
View File

@ -45,8 +45,8 @@ export const EmailTemplates: React.FC<EmailTemplatesProps> = ({
<TableRow key={template.id}> <TableRow key={template.id}>
<TableCell> <TableCell>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-amber-50 rounded-lg flex items-center justify-center"> <div className="w-8 h-8 bg-red-50 rounded-lg flex items-center justify-center">
<Mail className="w-4 h-4 text-amber-600" /> <Mail className="w-4 h-4 text-re-red" />
</div> </div>
<span className="font-medium text-slate-900">{template.name || template.templateCode}</span> <span className="font-medium text-slate-900">{template.name || template.templateCode}</span>
</div> </div>
@ -68,7 +68,7 @@ export const EmailTemplates: React.FC<EmailTemplatesProps> = ({
<Button variant="ghost" size="sm" onClick={() => onEditTemplate(template)}> <Button variant="ghost" size="sm" onClick={() => onEditTemplate(template)}>
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
</Button> </Button>
<Button variant="ghost" size="sm" onClick={() => onDeleteTemplate(template.id)} className="text-red-500 hover:text-red-600 hover:bg-red-50"> <Button variant="ghost" size="sm" onClick={() => onDeleteTemplate(template.id)} className="text-red-500 hover:text-re-red hover:bg-red-50">
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
</div> </div>

8
src/features/master/components/InterviewConfigManagement.tsx
View File

@ -316,7 +316,7 @@ const InterviewConfigManagement: React.FC = () => {
</div> </div>
</div> </div>
) : ( ) : (
<div className="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800"> <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
No active configuration found. Click "Publish New Version" to create one, or "Reset to Defaults" to initialize system defaults. No active configuration found. Click "Publish New Version" to create one, or "Reset to Defaults" to initialize system defaults.
</div> </div>
)} )}
@ -338,7 +338,7 @@ const InterviewConfigManagement: React.FC = () => {
<Button variant="ghost" size="sm" onClick={() => cfg.id && handleEdit(cfg.id)}> <Button variant="ghost" size="sm" onClick={() => cfg.id && handleEdit(cfg.id)}>
<Edit3 size={14} /> <Edit3 size={14} />
</Button> </Button>
<Button variant="ghost" size="sm" className="text-red-600 hover:text-red-700" onClick={() => cfg.id && handleDelete(cfg.id)}> <Button variant="ghost" size="sm" className="text-re-red hover:text-re-red-hover" onClick={() => cfg.id && handleDelete(cfg.id)}>
<Trash2 size={14} /> <Trash2 size={14} />
</Button> </Button>
</div> </div>
@ -366,7 +366,7 @@ const InterviewConfigManagement: React.FC = () => {
</DialogDescription> </DialogDescription>
</div> </div>
{editingConfig?.configType === 'KT_MATRIX' && ( {editingConfig?.configType === 'KT_MATRIX' && (
<div className={`px-3 py-1.5 rounded-md text-[10px] font-black uppercase tracking-tight ${totalWeight === 100 ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : 'bg-amber-50 text-amber-700 border border-amber-100'}`}> <div className={`px-3 py-1.5 rounded-md text-[10px] font-black uppercase tracking-tight ${totalWeight === 100 ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : 'bg-red-50 text-re-red-hover border border-red-100'}`}>
Weight: {totalWeight}% / 100% Weight: {totalWeight}% / 100%
</div> </div>
)} )}
@ -535,7 +535,7 @@ const InterviewConfigManagement: React.FC = () => {
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex items-center justify-between border-b border-slate-200/50 pb-2 mb-2"> <div className="flex items-center justify-between border-b border-slate-200/50 pb-2 mb-2">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2"> <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
<div className="w-1 h-3 bg-amber-400 rounded-full" /> Selection Choices Profile <div className="w-1 h-3 bg-red-400 rounded-full" /> Selection Choices Profile
</p> </p>
<Button variant="ghost" size="sm" className="h-7 px-3 text-[10px] font-bold uppercase text-slate-600 hover:bg-white border border-transparent hover:border-slate-200" onClick={() => addOption(index)}> <Button variant="ghost" size="sm" className="h-7 px-3 text-[10px] font-bold uppercase text-slate-600 hover:bg-white border border-transparent hover:border-slate-200" onClick={() => addOption(index)}>
<Plus className="w-3 h-3 mr-1.5" /> Append Option <Plus className="w-3 h-3 mr-1.5" /> Append Option

10
src/features/master/components/LocationDialog.tsx
View File

@ -55,7 +55,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
setLocationDistrict(''); setLocationDistrict('');
}} }}
> >
<SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-amber-500/30 focus:border-amber-500"> <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
<SelectValue placeholder="Select state" /> <SelectValue placeholder="Select state" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -71,7 +71,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
<Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">City</Label> <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">City</Label>
<Input <Input
placeholder="Enter city name" placeholder="Enter city name"
className="mt-2 text-slate-900 border-slate-200 focus-visible:ring-amber-500/30 focus-visible:border-amber-500" className="mt-2 text-slate-900 border-slate-200 focus-visible:ring-red-500/30 focus-visible:border-red-500"
value={locationCity} value={locationCity}
onChange={(e) => setLocationCity(e.target.value)} onChange={(e) => setLocationCity(e.target.value)}
/> />
@ -79,7 +79,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
<div> <div>
<Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">District</Label> <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">District</Label>
<Select value={locationDistrict} onValueChange={setLocationDistrict} disabled={!locationState}> <Select value={locationDistrict} onValueChange={setLocationDistrict} disabled={!locationState}>
<SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-amber-500/30 focus:border-amber-500"> <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
<SelectValue placeholder={locationState ? 'Select district' : 'Select state first'} /> <SelectValue placeholder={locationState ? 'Select district' : 'Select state first'} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -120,7 +120,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
<div> <div>
<Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">Opportunity</Label> <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">Opportunity</Label>
<Select value={locationStatus} onValueChange={setLocationStatus}> <Select value={locationStatus} onValueChange={setLocationStatus}>
<SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-amber-500/30 focus:border-amber-500"> <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
<SelectValue placeholder="Is this an active Opportunity?" /> <SelectValue placeholder="Is this an active Opportunity?" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -132,7 +132,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
<div className="flex gap-3 pt-4"> <div className="flex gap-3 pt-4">
<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button> <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button className="flex-1 bg-amber-600 hover:bg-amber-700 text-white shadow-md hover:shadow-lg transition-all" onClick={onSave}>Save Location</Button> <Button className="flex-1 bg-re-red hover:bg-re-red-hover text-white shadow-md hover:shadow-lg transition-all" onClick={onSave}>Save Location</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>

10
src/features/master/components/LocationManagement.tsx
View File

@ -53,7 +53,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
placeholder="Search locations..." placeholder="Search locations..."
value={searchTerm} value={searchTerm}
onChange={(e) => onSearch(e.target.value)} onChange={(e) => onSearch(e.target.value)}
className="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-amber-500 w-64 transition-all" className="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-red-500 w-64 transition-all"
/> />
</div> </div>
@ -80,7 +80,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
</SelectContent> </SelectContent>
</Select> </Select>
<Button onClick={onAddLocation} className="bg-amber-600 hover:bg-amber-700 whitespace-nowrap"> <Button onClick={onAddLocation} className="bg-re-red hover:bg-re-red-hover whitespace-nowrap">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add Location Add Location
</Button> </Button>
@ -112,7 +112,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
<TableRow key={district.id}> <TableRow key={district.id}>
<TableCell> <TableCell>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<MapPin className="w-4 h-4 text-amber-600" /> <MapPin className="w-4 h-4 text-re-red" />
<span className="font-medium">{district.stateName || 'N/A'}</span> <span className="font-medium">{district.stateName || 'N/A'}</span>
</div> </div>
</TableCell> </TableCell>
@ -151,7 +151,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
<Button variant="outline" size="sm" onClick={() => onEditLocation(district)} className="h-8 w-8 p-0"> <Button variant="outline" size="sm" onClick={() => onEditLocation(district)} className="h-8 w-8 p-0">
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
</Button> </Button>
<Button variant="outline" size="sm" onClick={() => onDeleteLocation(district.id)} className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"> <Button variant="outline" size="sm" onClick={() => onDeleteLocation(district.id)} className="h-8 w-8 p-0 text-re-red hover:bg-red-50 hover:text-re-red-hover">
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
</div> </div>
@ -163,7 +163,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
</Table> </Table>
{isAreasLoading && ( {isAreasLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-white/10 backdrop-blur-[1px]"> <div className="absolute inset-0 flex items-center justify-center bg-white/10 backdrop-blur-[1px]">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div> <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-re-red"></div>
</div> </div>
)} )}
</div> </div>

6
src/features/master/components/RegionDialog.tsx
View File

@ -189,7 +189,7 @@ export const RegionDialog: React.FC<RegionDialogProps> = ({
<div> <div>
<Label>States Covered</Label> <Label>States Covered</Label>
{!selectedRegionZone && ( {!selectedRegionZone && (
<p className="text-xs text-amber-600 mt-1">Select a zone first to see available states</p> <p className="text-xs text-re-red mt-1">Select a zone first to see available states</p>
)} )}
<div className="mt-2 border rounded-lg p-3 max-h-40 overflow-y-auto bg-slate-50"> <div className="mt-2 border rounded-lg p-3 max-h-40 overflow-y-auto bg-slate-50">
{statesForZone.length === 0 ? ( {statesForZone.length === 0 ? (
@ -234,7 +234,7 @@ export const RegionDialog: React.FC<RegionDialogProps> = ({
<TooltipProvider> <TooltipProvider>
{districtsByState.map(({ stateName, districts }) => ( {districtsByState.map(({ stateName, districts }) => (
<div key={stateName} className="mb-4 last:mb-0"> <div key={stateName} className="mb-4 last:mb-0">
<h4 className="text-xs font-semibold text-amber-700 uppercase tracking-wide mb-2 pb-1 border-b border-slate-200"> <h4 className="text-xs font-semibold text-re-red-hover uppercase tracking-wide mb-2 pb-1 border-b border-slate-200">
{stateName} {stateName}
</h4> </h4>
<div className="space-y-2 ml-1"> <div className="space-y-2 ml-1">
@ -302,7 +302,7 @@ export const RegionDialog: React.FC<RegionDialogProps> = ({
{/* Actions */} {/* Actions */}
<div className="flex gap-3 pt-4"> <div className="flex gap-3 pt-4">
<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button> <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save Regional Office</Button> <Button className="flex-1 bg-re-red hover:bg-re-red-hover" onClick={onSave}>Save Regional Office</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>

4
src/features/master/components/RegionalManagement.tsx
View File

@ -29,7 +29,7 @@ export const RegionalManagement: React.FC<RegionalManagementProps> = ({
<CardTitle>Regional Offices</CardTitle> <CardTitle>Regional Offices</CardTitle>
<CardDescription>Manage regional offices within zones</CardDescription> <CardDescription>Manage regional offices within zones</CardDescription>
</div> </div>
<Button onClick={onAddRegion} className="bg-amber-600 hover:bg-amber-700"> <Button onClick={onAddRegion} className="bg-re-red hover:bg-re-red-hover">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add Regional Office Add Regional Office
</Button> </Button>
@ -114,7 +114,7 @@ export const RegionalManagement: React.FC<RegionalManagementProps> = ({
<Button variant="ghost" size="sm" onClick={() => onEditRegion(region)}> <Button variant="ghost" size="sm" onClick={() => onEditRegion(region)}>
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
</Button> </Button>
<Button variant="ghost" size="sm" onClick={() => onDeleteRegion(region.id, region.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50"> <Button variant="ghost" size="sm" onClick={() => onDeleteRegion(region.id, region.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
</div> </div>

6
src/features/master/components/RoleDialog.tsx
View File

@ -79,8 +79,8 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
}, },
{ {
title: "Application Stage Access", title: "Application Stage Access",
color: "from-amber-50 to-orange-50 border-amber-200", color: "from-red-50 to-orange-50 border-red-200",
textColor: "text-amber-900", textColor: "text-red-900",
permissions: [ permissions: [
{ id: "stage:initial_review", label: "Initial Review" }, { id: "stage:initial_review", label: "Initial Review" },
{ id: "stage:field_verification", label: "Field Verification" }, { id: "stage:field_verification", label: "Field Verification" },
@ -126,7 +126,7 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
<div className="space-y-5"> <div className="space-y-5">
<h4 className="text-sm font-bold text-slate-800 flex items-center gap-2"> <h4 className="text-sm font-bold text-slate-800 flex items-center gap-2">
<span className="w-1.5 h-1.5 bg-amber-500 rounded-full"></span> <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
Configure Default Permissions Configure Default Permissions
</h4> </h4>

4
src/features/master/components/RolePermissions.tsx
View File

@ -22,7 +22,7 @@ export const RolePermissions: React.FC<RolePermissionsProps> = ({ onAddRole, onE
<CardTitle className="leading-none text-xl font-bold">Role Definitions</CardTitle> <CardTitle className="leading-none text-xl font-bold">Role Definitions</CardTitle>
<CardDescription className="text-muted-foreground mt-1.5">Overview of available roles and their access levels</CardDescription> <CardDescription className="text-muted-foreground mt-1.5">Overview of available roles and their access levels</CardDescription>
</div> </div>
<Button onClick={onAddRole} className="bg-amber-600 hover:bg-amber-700 h-9"> <Button onClick={onAddRole} className="bg-re-red hover:bg-re-red-hover h-9">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add Role Add Role
</Button> </Button>
@ -34,7 +34,7 @@ export const RolePermissions: React.FC<RolePermissionsProps> = ({ onAddRole, onE
<div key={role.id} className="border rounded-lg p-4 space-y-3 bg-gradient-to-br from-white to-slate-50 hover:shadow-md transition-shadow"> <div key={role.id} className="border rounded-lg p-4 space-y-3 bg-gradient-to-br from-white to-slate-50 hover:shadow-md transition-shadow">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Shield className="w-5 h-5 text-amber-600" /> <Shield className="w-5 h-5 text-re-red" />
<h3 className="text-slate-900 font-bold">{role.name}</h3> <h3 className="text-slate-900 font-bold">{role.name}</h3>
</div> </div>
<Badge variant="secondary" className="border-transparent bg-secondary text-secondary-foreground text-xs font-medium"> <Badge variant="secondary" className="border-transparent bg-secondary text-secondary-foreground text-xs font-medium">

4
src/features/master/components/SLAConfiguration.tsx
View File

@ -29,7 +29,7 @@ export const SLAConfiguration: React.FC<SLAConfigurationProps> = ({ onConfigureS
<div key={sla.id} className="border rounded-lg p-4 bg-gradient-to-br from-white to-slate-50 hover:shadow-md transition-shadow"> <div key={sla.id} className="border rounded-lg p-4 bg-gradient-to-br from-white to-slate-50 hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-3"> <div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Clock className="w-5 h-5 text-amber-600" /> <Clock className="w-5 h-5 text-re-red" />
<div> <div>
<h4 className="text-slate-900 font-medium">{sla.activityName}</h4> <h4 className="text-slate-900 font-medium">{sla.activityName}</h4>
<p className="text-xs text-slate-600">TAT: {sla.tatHours} {sla.tatUnit}</p> <p className="text-xs text-slate-600">TAT: {sla.tatHours} {sla.tatUnit}</p>
@ -73,7 +73,7 @@ export const SLAConfiguration: React.FC<SLAConfigurationProps> = ({ onConfigureS
<div className="border-l-2 border-red-400 pl-3"> <div className="border-l-2 border-red-400 pl-3">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<AlertTriangle className="w-4 h-4 text-red-600" /> <AlertTriangle className="w-4 h-4 text-re-red" />
<span className="text-xs text-slate-700">Escalations ({sla.escalationConfigs?.length || 0})</span> <span className="text-xs text-slate-700">Escalations ({sla.escalationConfigs?.length || 0})</span>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">

7
src/features/master/components/SLADialog.tsx
View File

@ -184,6 +184,7 @@ export const SLADialog: React.FC<SLADialogProps> = ({ isOpen, onClose, sla, onSa
<div className="flex items-center space-x-2 pt-8"> <div className="flex items-center space-x-2 pt-8">
<Switch <Switch
id="isActive" id="isActive"
className="data-[state=checked]:bg-re-red"
checked={formData.isActive} checked={formData.isActive}
onCheckedChange={(checked) => setFormData({ ...formData, isActive: checked })} onCheckedChange={(checked) => setFormData({ ...formData, isActive: checked })}
/> />
@ -252,7 +253,7 @@ export const SLADialog: React.FC<SLADialogProps> = ({ isOpen, onClose, sla, onSa
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between border-b pb-2"> <div className="flex items-center justify-between border-b pb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<AlertTriangle className="w-4 h-4 text-red-600" /> <AlertTriangle className="w-4 h-4 text-re-red" />
<h4 className="font-medium text-sm">Escalation Levels</h4> <h4 className="font-medium text-sm">Escalation Levels</h4>
</div> </div>
<Button type="button" variant="outline" size="sm" onClick={handleAddEscalation} className="h-7 text-xs"> <Button type="button" variant="outline" size="sm" onClick={handleAddEscalation} className="h-7 text-xs">
@ -264,7 +265,7 @@ export const SLADialog: React.FC<SLADialogProps> = ({ isOpen, onClose, sla, onSa
{formData.escalationConfigs.map((esc: any, idx: number) => ( {formData.escalationConfigs.map((esc: any, idx: number) => (
<div key={idx} className="bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-3"> <div key={idx} className="bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Badge variant="outline" className="bg-red-50 text-red-700 border-red-100"> <Badge variant="outline" className="bg-red-50 text-re-red-hover border-red-100">
Level {esc.level} Level {esc.level}
</Badge> </Badge>
<Button <Button
@ -345,7 +346,7 @@ export const SLADialog: React.FC<SLADialogProps> = ({ isOpen, onClose, sla, onSa
<Button type="button" variant="outline" onClick={onClose} disabled={loading}> <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
Cancel Cancel
</Button> </Button>
<Button type="submit" disabled={loading}> <Button type="submit" disabled={loading} className="bg-re-red hover:bg-re-red-hover text-white">
{loading ? 'Saving...' : 'Save Configuration'} {loading ? 'Saving...' : 'Save Configuration'}
</Button> </Button>
</DialogFooter> </DialogFooter>

20
src/features/master/components/SecurityDepositMaster.tsx
View File

@ -54,7 +54,7 @@ export const SecurityDepositMaster: React.FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="flex flex-col items-center justify-center p-20 space-y-4"> <div className="flex flex-col items-center justify-center p-20 space-y-4">
<div className="w-10 h-10 border-4 border-amber-600 border-t-transparent rounded-full animate-spin"></div> <div className="w-10 h-10 border-4 border-re-red border-t-transparent rounded-full animate-spin"></div>
<p className="text-slate-600 animate-pulse">Loading settings...</p> <p className="text-slate-600 animate-pulse">Loading settings...</p>
</div> </div>
); );
@ -65,8 +65,8 @@ export const SecurityDepositMaster: React.FC = () => {
<Card className="border-none shadow-lg bg-white/80 backdrop-blur-md"> <Card className="border-none shadow-lg bg-white/80 backdrop-blur-md">
<CardHeader className="py-4 border-b bg-slate-50/50"> <CardHeader className="py-4 border-b bg-slate-50/50">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center"> <div className="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center">
<Settings className="w-5 h-5 text-amber-600" /> <Settings className="w-5 h-5 text-re-red" />
</div> </div>
<div> <div>
<CardTitle className="text-lg font-bold text-slate-900"> <CardTitle className="text-lg font-bold text-slate-900">
@ -98,7 +98,7 @@ export const SecurityDepositMaster: React.FC = () => {
<Input <Input
id={`amount-${config.id}`} id={`amount-${config.id}`}
type="number" type="number"
className="pl-8 h-9 text-base font-bold bg-slate-50/50 border-slate-200 focus:ring-amber-500 focus:border-amber-500 rounded-lg" className="pl-8 h-9 text-base font-bold bg-slate-50/50 border-slate-200 focus:ring-red-500 focus:border-red-500 rounded-lg"
value={config.value?.amount || ''} value={config.value?.amount || ''}
onChange={(e) => handleUpdateAmount(config.id, e.target.value)} onChange={(e) => handleUpdateAmount(config.id, e.target.value)}
/> />
@ -109,7 +109,7 @@ export const SecurityDepositMaster: React.FC = () => {
<Button <Button
onClick={() => handleSave(config)} onClick={() => handleSave(config)}
disabled={isSaving === config.id} disabled={isSaving === config.id}
className="h-9 px-4 bg-amber-600 hover:bg-amber-700 text-white rounded-lg shadow-md shadow-amber-600/10 active:scale-95 transition-all flex items-center gap-1.5 group" className="h-9 px-4 bg-re-red hover:bg-re-red-hover text-white rounded-lg shadow-md shadow-re-red/10 active:scale-95 transition-all flex items-center gap-1.5 group"
> >
{isSaving === config.id ? ( {isSaving === config.id ? (
<RefreshCw className="w-4 h-4 animate-spin" /> <RefreshCw className="w-4 h-4 animate-spin" />
@ -140,13 +140,13 @@ export const SecurityDepositMaster: React.FC = () => {
</CardContent> </CardContent>
</Card> </Card>
<div className="bg-amber-50/50 rounded-xl p-4 border border-amber-100/50 flex items-start gap-3"> <div className="bg-red-50/50 rounded-xl p-4 border border-red-100/50 flex items-start gap-3">
<div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0"> <div className="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
<Settings className="w-4 h-4 text-amber-700" /> <Settings className="w-4 h-4 text-re-red-hover" />
</div> </div>
<div> <div>
<h5 className="font-bold text-amber-900 text-sm">Super Admin Notice</h5> <h5 className="font-bold text-red-900 text-sm">Super Admin Notice</h5>
<p className="text-[11px] text-amber-800/80 leading-snug"> <p className="text-[11px] text-red-800/80 leading-snug">
Updates made here take immediate effect. These values define the default expected amounts for all current and future onboarding payments. Updates made here take immediate effect. These values define the default expected amounts for all current and future onboarding payments.
</p> </p>
</div> </div>

20
src/features/master/components/TemplateDialog.tsx
View File

@ -96,7 +96,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-slate-50 p-4 rounded-lg border border-slate-200 space-y-4"> <div className="bg-slate-50 p-4 rounded-lg border border-slate-200 space-y-4">
<h3 className="text-sm font-semibold text-slate-800 flex items-center gap-2"> <h3 className="text-sm font-semibold text-slate-800 flex items-center gap-2">
<Settings className="w-4 h-4 text-amber-600" /> <Settings className="w-4 h-4 text-re-red" />
General Settings General Settings
</h3> </h3>
<div> <div>
@ -149,12 +149,12 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
</div> </div>
</div> </div>
<div className="bg-amber-50 p-4 rounded-lg border border-amber-100"> <div className="bg-red-50 p-4 rounded-lg border border-red-100">
<h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2 mb-3"> <h3 className="text-sm font-semibold text-red-900 flex items-center gap-2 mb-3">
<Info className="w-4 h-4" /> <Info className="w-4 h-4" />
Available Placeholders Available Placeholders
</h3> </h3>
<p className="text-[10px] text-amber-700 mb-4 leading-relaxed"> <p className="text-[10px] text-re-red-hover mb-4 leading-relaxed">
Click a placeholder to insert it at the cursor. Click a placeholder to insert it at the cursor.
</p> </p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@ -164,14 +164,14 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
key={p} key={p}
type="button" type="button"
onClick={() => insertPlaceholder(p)} onClick={() => insertPlaceholder(p)}
className="px-2 py-1 bg-white border border-amber-200 rounded text-[11px] font-mono text-amber-800 hover:bg-amber-600 hover:text-white hover:border-amber-600 transition-all flex items-center gap-1 shadow-sm" className="px-2 py-1 bg-white border border-red-200 rounded text-[11px] font-mono text-red-800 hover:bg-re-red hover:text-white hover:border-re-red transition-all flex items-center gap-1 shadow-sm"
> >
{`{{${p}}}`} {`{{${p}}}`}
</button> </button>
)) ))
) : ( ) : (
<div className="w-full py-4 text-center border-2 border-dashed border-amber-200 rounded-lg"> <div className="w-full py-4 text-center border-2 border-dashed border-red-200 rounded-lg">
<p className="text-[10px] text-amber-600">No placeholders defined for this trigger</p> <p className="text-[10px] text-re-red">No placeholders defined for this trigger</p>
</div> </div>
)} )}
</div> </div>
@ -182,7 +182,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
<div className="lg:col-span-4 space-y-4 flex flex-col h-full min-h-[600px]"> <div className="lg:col-span-4 space-y-4 flex flex-col h-full min-h-[600px]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="font-semibold text-slate-900 flex items-center gap-2"> <h3 className="font-semibold text-slate-900 flex items-center gap-2">
<Edit2 className="w-4 h-4 text-amber-600" /> <Edit2 className="w-4 h-4 text-re-red" />
Template Designer Template Designer
</h3> </h3>
</div> </div>
@ -230,7 +230,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
'{"applicantName": "Rajesh Kumar", "location": "Mumbai South", "applicationId": "APP-2026-X12", "link": "https://example.com/app", "portalLink": "https://example.com/app"}' '{"applicantName": "Rajesh Kumar", "location": "Mumbai South", "applicationId": "APP-2026-X12", "link": "https://example.com/app", "portalLink": "https://example.com/app"}'
) )
} }
className="text-[10px] text-amber-600 hover:underline" className="text-[10px] text-re-red hover:underline"
> >
Reset to Sample Reset to Sample
</button> </button>
@ -302,7 +302,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
Cancel Cancel
</Button> </Button>
<Button <Button
className="flex-1 bg-amber-600 hover:bg-amber-700" className="flex-1 bg-re-red hover:bg-re-red-hover"
type="button" type="button"
onClick={() => handleSaveTemplate(composeFullBody())} onClick={() => handleSaveTemplate(composeFullBody())}
disabled={!editingTemplate?.id || !editingTemplate?.templateCode?.trim()} disabled={!editingTemplate?.id || !editingTemplate?.templateCode?.trim()}

2
src/features/master/components/UserManagementTable.tsx
View File

@ -44,7 +44,7 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({ userAs
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Shield className="w-3 h-3 text-amber-600" /> <Shield className="w-3 h-3 text-re-red" />
<span className="text-sm font-medium">{user.role}</span> <span className="text-sm font-medium">{user.role}</span>
</div> </div>
</TableCell> </TableCell>

2
src/features/master/components/ZMDialog.tsx
View File

@ -146,7 +146,7 @@ export const ZMDialog: React.FC<ZMDialogProps> = ({
<div className="flex gap-3 pt-6"> <div className="flex gap-3 pt-6">
<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button> <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save Zonal Manager</Button> <Button className="flex-1 bg-re-red hover:bg-re-red-hover" onClick={onSave}>Save Zonal Manager</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>

4
src/features/master/components/ZMManagement.tsx
View File

@ -33,7 +33,7 @@ export const ZMManagement: React.FC<ZMManagementProps> = ({
<CardTitle>Zonal Managers (DD-ZM)</CardTitle> <CardTitle>Zonal Managers (DD-ZM)</CardTitle>
<CardDescription>Manage Zonal Managers and their region assignments</CardDescription> <CardDescription>Manage Zonal Managers and their region assignments</CardDescription>
</div> </div>
<Button onClick={onAddZM} className="bg-amber-600 hover:bg-amber-700"> <Button onClick={onAddZM} className="bg-re-red hover:bg-re-red-hover">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add ZM Add ZM
</Button> </Button>
@ -99,7 +99,7 @@ export const ZMManagement: React.FC<ZMManagementProps> = ({
<Button variant="ghost" size="sm" onClick={() => onEditZM(zm)}> <Button variant="ghost" size="sm" onClick={() => onEditZM(zm)}>
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
</Button> </Button>
<Button variant="ghost" size="sm" onClick={() => onDeleteZM(zm.id, zm.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50"> <Button variant="ghost" size="sm" onClick={() => onDeleteZM(zm.id, zm.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
</div> </div>

10
src/features/master/components/ZoneDetails.tsx
View File

@ -27,7 +27,7 @@ export const ZoneDetails: React.FC<ZoneDetailsProps> = ({ selectedZone, onAddZon
<CardTitle>Zone Details</CardTitle> <CardTitle>Zone Details</CardTitle>
<CardDescription>Geographical coverage and state mappings for each zone</CardDescription> <CardDescription>Geographical coverage and state mappings for each zone</CardDescription>
</div> </div>
<Button onClick={onAddZone} className="bg-amber-600 hover:bg-amber-700"> <Button onClick={onAddZone} className="bg-re-red hover:bg-re-red-hover">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add Zone Add Zone
</Button> </Button>
@ -40,7 +40,7 @@ export const ZoneDetails: React.FC<ZoneDetailsProps> = ({ selectedZone, onAddZon
<div key={zone.id} className="border rounded-lg p-5 space-y-4 bg-gradient-to-br from-white to-slate-50"> <div key={zone.id} className="border rounded-lg p-5 space-y-4 bg-gradient-to-br from-white to-slate-50">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-lg flex items-center justify-center shadow-md"> <div className="w-12 h-12 bg-gradient-to-br from-red-500 to-re-red rounded-lg flex items-center justify-center shadow-md">
<Globe className="w-6 h-6 text-white" /> <Globe className="w-6 h-6 text-white" />
</div> </div>
<div> <div>
@ -86,11 +86,11 @@ export const ZoneDetails: React.FC<ZoneDetailsProps> = ({ selectedZone, onAddZon
<Label className="text-xs text-slate-600 mb-2 block"> <Label className="text-xs text-slate-600 mb-2 block">
Zonal Business Head (ZBH) Zonal Business Head (ZBH)
</Label> </Label>
<div className="bg-amber-50 border border-amber-100 rounded-lg p-3 space-y-2"> <div className="bg-red-50 border border-red-100 rounded-lg p-3 space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Shield className="w-4 h-4 text-amber-600" /> <Shield className="w-4 h-4 text-re-red" />
<span className="text-sm font-semibold text-slate-900">{zone.zonalBusinessHead.name}</span> <span className="text-sm font-semibold text-slate-900">{zone.zonalBusinessHead.name}</span>
<Badge className="bg-amber-600 text-white text-[10px] ml-auto">ZBH</Badge> <Badge className="bg-re-red text-white text-[10px] ml-auto">ZBH</Badge>
</div> </div>
<div className="flex items-center gap-2 ml-6 text-slate-600"> <div className="flex items-center gap-2 ml-6 text-slate-600">

2
src/features/master/components/ZoneDialog.tsx
View File

@ -106,7 +106,7 @@ export const ZoneDialog: React.FC<ZoneDialogProps> = ({
</div> </div>
<div className="flex gap-3 pt-4"> <div className="flex gap-3 pt-4">
<Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button> <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save Zone</Button> <Button className="flex-1 bg-re-red hover:bg-re-red-hover" onClick={onSave}>Save Zone</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>

4
src/features/master/components/ZonesOverview.tsx
View File

@ -19,14 +19,14 @@ export const ZonesOverview: React.FC<ZonesOverviewProps> = ({ selectedZone, onZo
return ( return (
<Card <Card
key={zone.id} key={zone.id}
className={`border-2 transition-all cursor-pointer ${selectedZone === zone.id ? 'border-amber-600 shadow-lg' : 'hover:border-amber-400' className={`border-2 transition-all cursor-pointer ${selectedZone === zone.id ? 'border-re-red shadow-lg' : 'hover:border-red-400'
}`} }`}
onClick={() => onZoneClick(zone.id)} onClick={() => onZoneClick(zone.id)}
> >
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Globe className="w-5 h-5 text-amber-600" /> <Globe className="w-5 h-5 text-re-red" />
<CardTitle className="text-lg">{zone.name.toUpperCase().endsWith('ZONE') ? zone.name : `${zone.name} Zone`}</CardTitle> <CardTitle className="text-lg">{zone.name.toUpperCase().endsWith('ZONE') ? zone.name : `${zone.name} Zone`}</CardTitle>
</div> </div>
<Badge variant="outline" className="text-xs">{zone.code}</Badge> <Badge variant="outline" className="text-xs">{zone.code}</Badge>

18
src/features/master/pages/MasterPage.tsx
View File

@ -443,34 +443,34 @@ export const MasterPage: React.FC = () => {
{loading ? ( {loading ? (
<div className="flex flex-col items-center justify-center p-20 space-y-4"> <div className="flex flex-col items-center justify-center p-20 space-y-4">
<div className="w-12 h-12 border-4 border-amber-600 border-t-transparent rounded-full animate-spin"></div> <div className="w-12 h-12 border-4 border-re-red border-t-transparent rounded-full animate-spin"></div>
<p className="text-slate-600 font-medium animate-pulse">Synchronizing Global Settings...</p> <p className="text-slate-600 font-medium animate-pulse">Synchronizing Global Settings...</p>
</div> </div>
) : ( ) : (
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6"> <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
<TabsList className="grid w-full grid-cols-8 h-auto sticky top-0 z-10 bg-white/80 backdrop-blur-sm border shadow-sm rounded-xl p-1"> <TabsList className="grid w-full grid-cols-8 h-auto sticky top-0 z-10 bg-white/80 backdrop-blur-sm border shadow-sm rounded-xl p-1">
<TabsTrigger value="hierarchy" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white"> <TabsTrigger value="hierarchy" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white">
<Globe className="w-4 h-4" /> Organisation <Globe className="w-4 h-4" /> Organisation
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="roles" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white"> <TabsTrigger value="roles" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white">
<Shield className="w-4 h-4" /> Roles <Shield className="w-4 h-4" /> Roles
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="templates" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white"> <TabsTrigger value="templates" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white">
<Mail className="w-4 h-4" /> Emails <Mail className="w-4 h-4" /> Emails
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="locations" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white"> <TabsTrigger value="locations" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white">
<MapPin className="w-4 h-4" /> Locations <MapPin className="w-4 h-4" /> Locations
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="approvals" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white transition-all transform hover:scale-[1.02]"> <TabsTrigger value="approvals" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
<SlidersHorizontal className="w-4 h-4" /> Approvals <SlidersHorizontal className="w-4 h-4" /> Approvals
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="documents" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white transition-all transform hover:scale-[1.02]"> <TabsTrigger value="documents" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
<FileText className="w-4 h-4" /> Docs Config <FileText className="w-4 h-4" /> Docs Config
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="governance" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white transition-all transform hover:scale-[1.02]"> <TabsTrigger value="governance" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
<Settings2 className="w-4 h-4" /> Governance <Settings2 className="w-4 h-4" /> Governance
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="settings" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white transition-all transform hover:scale-[1.02]"> <TabsTrigger value="settings" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
<Settings className="w-4 h-4" /> App Settings <Settings className="w-4 h-4" /> App Settings
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>

6
src/features/master/pages/SLAConfigPage.tsx
View File

@ -73,7 +73,7 @@ export const SLAConfigPage: React.FC = () => {
<RefreshCw className={`w-4 h-4 mr-2 ${loadingMore ? 'animate-spin' : ''}`} /> <RefreshCw className={`w-4 h-4 mr-2 ${loadingMore ? 'animate-spin' : ''}`} />
Initialize Defaults Initialize Defaults
</Button> </Button>
<Button onClick={handleAddSLA} disabled={loading}> <Button onClick={handleAddSLA} disabled={loading} className="bg-re-red hover:bg-re-red-hover text-white">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Add Manual SLA Add Manual SLA
</Button> </Button>
@ -136,14 +136,14 @@ export const SLAConfigPage: React.FC = () => {
<div className="border-l-2 border-red-400 pl-3"> <div className="border-l-2 border-red-400 pl-3">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<AlertTriangle className="w-4 h-4 text-red-600" /> <AlertTriangle className="w-4 h-4 text-re-red" />
<span className="text-xs font-bold text-slate-700 uppercase tracking-wider">Escalations ({sla.escalationConfigs?.length || 0})</span> <span className="text-xs font-bold text-slate-700 uppercase tracking-wider">Escalations ({sla.escalationConfigs?.length || 0})</span>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{(sla.escalationConfigs || []).map((esc: any, idx: number) => ( {(sla.escalationConfigs || []).map((esc: any, idx: number) => (
<div key={idx} className="text-[11px]"> <div key={idx} className="text-[11px]">
<div className="flex items-center gap-1.5 text-slate-900 font-medium"> <div className="flex items-center gap-1.5 text-slate-900 font-medium">
<Badge variant="outline" className="text-[9px] h-4 px-1 bg-red-50 border-red-200 text-red-700"> <Badge variant="outline" className="text-[9px] h-4 px-1 bg-red-50 border-red-200 text-re-red-hover">
L{esc.level} L{esc.level}
</Badge> </Badge>
<span>after {esc.timeValue} {esc.timeUnit}</span> <span>after {esc.timeValue} {esc.timeUnit}</span>

9
src/features/onboarding/components/application-details/ApplicationDetailsTabs.tsx
View File

@ -9,6 +9,7 @@ import {
Clock, Clock,
ClipboardList, ClipboardList,
Download, Download,
Eye,
FileText, FileText,
GitBranch, GitBranch,
Lock, Lock,
@ -556,11 +557,17 @@ export function ApplicationDetailsTabs(props: ApplicationDetailsTabsProps) {
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button size="sm" variant="outline" data-testid={`onboarding-document-preview-${idx}`} onClick={() => {
setPreviewDoc(doc);
setShowPreviewModal(true);
}}>
<Eye className="w-3 h-3 text-slate-500" />
</Button>
<Button size="sm" variant="outline" data-testid={`onboarding-document-download-${idx}`} onClick={() => { <Button size="sm" variant="outline" data-testid={`onboarding-document-download-${idx}`} onClick={() => {
const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000'; const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000';
window.open(`${baseUrl}/${doc.filePath}`, '_blank'); window.open(`${baseUrl}/${doc.filePath}`, '_blank');
}}> }}>
<Download className="w-3 h-3" /> <Download className="w-3 h-3 text-slate-500" />
</Button> </Button>
</div> </div>
</TableCell> </TableCell>

19
src/features/onboarding/hooks/useApplicationDetailsStageData.ts
View File

@ -6,6 +6,7 @@ interface UseApplicationDetailsStageDataParams {
interviews: any[]; interviews: any[];
eorData: any; eorData: any;
getDeposit: (type: string) => any; getDeposit: (type: string) => any;
documentConfigs?: any[];
} }
export function useApplicationDetailsStageData({ export function useApplicationDetailsStageData({
@ -14,6 +15,7 @@ export function useApplicationDetailsStageData({
interviews: _interviews, interviews: _interviews,
eorData, eorData,
getDeposit, getDeposit,
documentConfigs = [],
}: UseApplicationDetailsStageDataParams) { }: UseApplicationDetailsStageDataParams) {
const normalizeRole = (value: unknown): string => const normalizeRole = (value: unknown): string =>
String(value || '') String(value || '')
@ -116,7 +118,22 @@ export function useApplicationDetailsStageData({
}, },
{ {
id: 10, name: 'LOI Issue', status: getStageStatus('LOI Issue'), id: 10, name: 'LOI Issue', status: getStageStatus('LOI Issue'),
date: application.loiIssueDate, description: 'Letter of Intent issued', documentsUploaded: 1 date: application.loiIssueDate, description: 'Letter of Intent issued', isParallel: true,
branches: [
{ name: 'LOI Documents', color: 'blue', stages:
documentConfigs.some((c: any) => c.stageCode === 'LOI Issue')
? documentConfigs.filter((c: any) => c.stageCode === 'LOI Issue').map((c: any, i: number) => ({
id: `10a-${i}`,
name: c.documentType,
status: isDocumentUploaded(c.documentType) ? 'completed' : 'active',
description: c.isMandatory ? `Upload ${c.documentType} (Mandatory)` : `Upload ${c.documentType}`
}))
: [
{ id: '10a-1', name: 'Letter of Intent', status: isDocumentUploaded('Letter of Intent') || isDocumentUploaded('LOI') ? 'completed' : 'active', description: 'Letter of Intent document' },
{ id: '10a-2', name: 'Signed LOI', status: isDocumentUploaded('Signed LOI') || isDocumentUploaded('LOI Signed Copy') ? 'completed' : 'active', description: 'Signed Letter of Intent' },
]
}
]
}, },
{ {
id: 11, name: 'Dealer Code Generation', status: getStageStatus('Dealer Code Generation'), id: 11, name: 'Dealer Code Generation', status: getStageStatus('Dealer Code Generation'),

1
src/features/onboarding/pages/ApplicationDetails.tsx
View File

@ -359,6 +359,7 @@ export const ApplicationDetails = () => {
interviews, interviews,
eorData, eorData,
getDeposit, getDeposit,
documentConfigs,
}); });
const { const {