@djb25/digit-ui-module-ekyc 1.0.12 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{src/components/analytics/styles/Dashboard.css → dist/index.css} +6 -6
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +1468 -13
- package/dist/index.modern.js.map +1 -1
- package/package.json +34 -29
- package/src/Module.js +2 -2
- package/src/components/CeoDashboard.js +255 -196
- package/src/components/CeoDashboard.jsx +334 -0
- package/src/components/DesktopInbox.js +8 -0
- package/src/components/EKYCCard.js +5 -1
- package/src/components/VendorDetails.jsx +214 -0
- package/src/components/analytics/charts/ExecutiveBarChart.jsx +30 -0
- package/src/components/analytics/charts/ExecutiveLineChart.jsx +159 -0
- package/src/components/analytics/charts/ExecutivePieChart.jsx +24 -0
- package/src/components/analytics/charts/TaskStatusChart.js +1 -3
- package/src/components/analytics/components/DashboardLayout.js +26 -46
- package/src/components/mockData.js +772 -0
- package/src/hook/useInboxTableConfig.js +10 -2
- package/src/pages/employee/Mapping.js +162 -449
- package/src/pages/employee/index.js +28 -0
|
@@ -1,72 +1,22 @@
|
|
|
1
1
|
import React, { useState, useMemo } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Header,
|
|
4
|
+
Card,
|
|
5
|
+
CardHeader,
|
|
6
|
+
CardText,
|
|
7
|
+
CardLabel,
|
|
8
|
+
Dropdown,
|
|
9
|
+
SubmitBar,
|
|
10
|
+
ActionBar,
|
|
11
|
+
Table,
|
|
12
|
+
Toast,
|
|
13
|
+
LabelFieldPair,
|
|
14
|
+
Modal,
|
|
15
|
+
DeleteIcon,
|
|
16
|
+
EditIcon,
|
|
17
|
+
} from "@djb25/digit-ui-react-components";
|
|
3
18
|
import { useTranslation } from "react-i18next";
|
|
4
19
|
|
|
5
|
-
// ─── Icons ────────────────────────────────────────────────────────────────────
|
|
6
|
-
|
|
7
|
-
const UserIcon = ({ size = 18, color = "currentColor" }) => (
|
|
8
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
9
|
-
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
|
10
|
-
<circle cx="12" cy="7" r="4" />
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
const DiaryIcon = ({ size = 18, color = "currentColor" }) => (
|
|
15
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
16
|
-
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
|
|
17
|
-
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
|
|
18
|
-
</svg>
|
|
19
|
-
);
|
|
20
|
-
|
|
21
|
-
const TrashIcon = ({ size = 14 }) => (
|
|
22
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
23
|
-
<polyline points="3 6 5 6 21 6" />
|
|
24
|
-
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
25
|
-
</svg>
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
const EditIcon = ({ size = 14 }) => (
|
|
29
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
30
|
-
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
|
31
|
-
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
|
32
|
-
</svg>
|
|
33
|
-
);
|
|
34
|
-
|
|
35
|
-
const MapPinIcon = ({ size = 12 }) => (
|
|
36
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
37
|
-
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
|
38
|
-
<circle cx="12" cy="10" r="3" />
|
|
39
|
-
</svg>
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
const PlusIcon = ({ size = 16 }) => (
|
|
43
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
44
|
-
<line x1="12" y1="5" x2="12" y2="19" />
|
|
45
|
-
<line x1="5" y1="12" x2="19" y2="12" />
|
|
46
|
-
</svg>
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
const SaveIcon = ({ size = 16 }) => (
|
|
50
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
51
|
-
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
|
|
52
|
-
<polyline points="17 21 17 13 7 13 7 21" />
|
|
53
|
-
<polyline points="7 3 7 8 15 8" />
|
|
54
|
-
</svg>
|
|
55
|
-
);
|
|
56
|
-
|
|
57
|
-
const CheckIcon = ({ size = 16 }) => (
|
|
58
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
59
|
-
<polyline points="20 6 9 17 4 12" />
|
|
60
|
-
</svg>
|
|
61
|
-
);
|
|
62
|
-
|
|
63
|
-
const XIcon = ({ size = 16 }) => (
|
|
64
|
-
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
65
|
-
<line x1="18" y1="6" x2="6" y2="18" />
|
|
66
|
-
<line x1="6" y1="6" x2="18" y2="18" />
|
|
67
|
-
</svg>
|
|
68
|
-
);
|
|
69
|
-
|
|
70
20
|
// ─── Static Mock Data ─────────────────────────────────────────────────────────
|
|
71
21
|
|
|
72
22
|
const MOCK_SURVEYORS = [
|
|
@@ -86,52 +36,6 @@ const MOCK_MRDS = [
|
|
|
86
36
|
{ name: "MRD - 07 (Dwarka)", code: "MRD07", zone: "Dwarka" },
|
|
87
37
|
];
|
|
88
38
|
|
|
89
|
-
// ─── Confirm Delete Modal ─────────────────────────────────────────────────────
|
|
90
|
-
|
|
91
|
-
const ConfirmDeleteModal = ({ mapping, onConfirm, onCancel }) => (
|
|
92
|
-
<div style={{
|
|
93
|
-
position: "fixed", inset: 0, background: "rgba(0,0,0,0.35)",
|
|
94
|
-
display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000,
|
|
95
|
-
}}>
|
|
96
|
-
<div style={{
|
|
97
|
-
background: "#fff", borderRadius: "12px", padding: "28px 28px 24px",
|
|
98
|
-
width: "400px", boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
|
|
99
|
-
}}>
|
|
100
|
-
<div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "16px" }}>
|
|
101
|
-
<div style={{
|
|
102
|
-
width: "40px", height: "40px", borderRadius: "50%",
|
|
103
|
-
background: "#FEF3F2", display: "flex", alignItems: "center", justifyContent: "center",
|
|
104
|
-
}}>
|
|
105
|
-
<TrashIcon size={18} />
|
|
106
|
-
</div>
|
|
107
|
-
<div>
|
|
108
|
-
<div style={{ fontWeight: "700", fontSize: "16px", color: "#0D1B2A" }}>Remove Mapping</div>
|
|
109
|
-
<div style={{ fontSize: "12px", color: "#6B7B8E" }}>This action cannot be undone</div>
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
112
|
-
<p style={{ fontSize: "13px", color: "#344054", marginBottom: "24px", lineHeight: "1.6" }}>
|
|
113
|
-
Are you sure you want to remove the mapping between{" "}
|
|
114
|
-
<strong>{mapping?.surveyorName}</strong> and <strong>{mapping?.mrdName}</strong>?
|
|
115
|
-
</p>
|
|
116
|
-
<div style={{ display: "flex", gap: "10px", justifyContent: "flex-end" }}>
|
|
117
|
-
<button onClick={onCancel} style={{
|
|
118
|
-
background: "none", border: "1px solid #D0D5DD", borderRadius: "8px",
|
|
119
|
-
padding: "8px 20px", fontWeight: "600", fontSize: "13px",
|
|
120
|
-
color: "#344054", cursor: "pointer",
|
|
121
|
-
}}>Cancel</button>
|
|
122
|
-
<button onClick={onConfirm} style={{
|
|
123
|
-
background: "#B42318", border: "none", borderRadius: "8px",
|
|
124
|
-
padding: "8px 20px", fontWeight: "600", fontSize: "13px",
|
|
125
|
-
color: "#fff", cursor: "pointer",
|
|
126
|
-
display: "flex", alignItems: "center", gap: "6px",
|
|
127
|
-
}}>
|
|
128
|
-
<TrashIcon size={13} /> Remove
|
|
129
|
-
</button>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
);
|
|
134
|
-
|
|
135
39
|
// ─── Main Component ───────────────────────────────────────────────────────────
|
|
136
40
|
|
|
137
41
|
const Mapping = () => {
|
|
@@ -177,6 +81,7 @@ const Mapping = () => {
|
|
|
177
81
|
zone: selectedMRD.zone,
|
|
178
82
|
}]);
|
|
179
83
|
setSelectedMRD(null);
|
|
84
|
+
setSelectedSurveyor(null);
|
|
180
85
|
setToast({ type: "success", message: t("EKYC_MAPPING_ADDED") || "Mapping added successfully" });
|
|
181
86
|
};
|
|
182
87
|
|
|
@@ -188,7 +93,7 @@ const Mapping = () => {
|
|
|
188
93
|
|
|
189
94
|
const handleEditSave = (id) => {
|
|
190
95
|
if (!editSurveyor || !editMRD) {
|
|
191
|
-
setToast({ type: "error", message: "Please select both Surveyor and MRD to save" });
|
|
96
|
+
setToast({ type: "error", message: t("EKYC_SELECT_BOTH_ERROR") || "Please select both Surveyor and MRD to save" });
|
|
192
97
|
return;
|
|
193
98
|
}
|
|
194
99
|
// Check duplicate (excluding self)
|
|
@@ -196,7 +101,7 @@ const Mapping = () => {
|
|
|
196
101
|
m => m.id !== id && m.surveyorId === editSurveyor.id && m.mrdCode === editMRD.code
|
|
197
102
|
);
|
|
198
103
|
if (duplicate) {
|
|
199
|
-
setToast({ type: "warning", message: "This mapping already exists" });
|
|
104
|
+
setToast({ type: "warning", message: t("EKYC_MAPPING_EXISTS") || "This mapping already exists" });
|
|
200
105
|
return;
|
|
201
106
|
}
|
|
202
107
|
setMappings(prev => prev.map(m => m.id !== id ? m : {
|
|
@@ -208,7 +113,7 @@ const Mapping = () => {
|
|
|
208
113
|
zone: editMRD.zone,
|
|
209
114
|
}));
|
|
210
115
|
setEditingId(null);
|
|
211
|
-
setToast({ type: "success", message: "Mapping updated successfully" });
|
|
116
|
+
setToast({ type: "success", message: t("EKYC_MAPPING_UPDATED") || "Mapping updated successfully" });
|
|
212
117
|
};
|
|
213
118
|
|
|
214
119
|
const handleEditCancel = () => {
|
|
@@ -220,7 +125,7 @@ const Mapping = () => {
|
|
|
220
125
|
const handleDeleteConfirm = () => {
|
|
221
126
|
setMappings(prev => prev.filter(m => m.id !== deleteTarget.id));
|
|
222
127
|
setDeleteTarget(null);
|
|
223
|
-
setToast({ type: "
|
|
128
|
+
setToast({ type: "success", message: t("EKYC_MAPPING_REMOVED") || "Mapping removed" });
|
|
224
129
|
};
|
|
225
130
|
|
|
226
131
|
const handleSaveMappings = () => {
|
|
@@ -242,30 +147,20 @@ const Mapping = () => {
|
|
|
242
147
|
const isEditing = editingId === row.original.id;
|
|
243
148
|
if (isEditing) {
|
|
244
149
|
return (
|
|
245
|
-
<
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
/>
|
|
254
|
-
</div>
|
|
150
|
+
<Dropdown
|
|
151
|
+
selected={editSurveyor}
|
|
152
|
+
select={setEditSurveyor}
|
|
153
|
+
option={MOCK_SURVEYORS}
|
|
154
|
+
optionKey="name"
|
|
155
|
+
t={t}
|
|
156
|
+
placeholder={t("EKYC_SELECT_SURVEYOR_PLACEHOLDER") || "Choose surveyor..."}
|
|
157
|
+
/>
|
|
255
158
|
);
|
|
256
159
|
}
|
|
257
160
|
return (
|
|
258
|
-
<div
|
|
259
|
-
<
|
|
260
|
-
|
|
261
|
-
background: "#EEF4FB", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
|
|
262
|
-
}}>
|
|
263
|
-
<UserIcon size={15} color="#3A7BD5" />
|
|
264
|
-
</div>
|
|
265
|
-
<div>
|
|
266
|
-
<div style={{ fontWeight: "600", fontSize: "13px", color: "#0D1B2A" }}>{row.original.surveyorName}</div>
|
|
267
|
-
<div style={{ fontSize: "11px", color: "#6B7B8E" }}>ID: {row.original.surveyorId}</div>
|
|
268
|
-
</div>
|
|
161
|
+
<div>
|
|
162
|
+
<span className="link">{row.original.surveyorName}</span>
|
|
163
|
+
<div style={{ fontSize: "12px", color: "#666" }}>{row.original.surveyorId}</div>
|
|
269
164
|
</div>
|
|
270
165
|
);
|
|
271
166
|
},
|
|
@@ -277,32 +172,20 @@ const Mapping = () => {
|
|
|
277
172
|
const isEditing = editingId === row.original.id;
|
|
278
173
|
if (isEditing) {
|
|
279
174
|
return (
|
|
280
|
-
<
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
/>
|
|
289
|
-
</div>
|
|
175
|
+
<Dropdown
|
|
176
|
+
selected={editMRD}
|
|
177
|
+
select={setEditMRD}
|
|
178
|
+
option={MOCK_MRDS}
|
|
179
|
+
optionKey="name"
|
|
180
|
+
t={t}
|
|
181
|
+
placeholder={t("EKYC_SELECT_MRD_PLACEHOLDER") || "Choose MRD..."}
|
|
182
|
+
/>
|
|
290
183
|
);
|
|
291
184
|
}
|
|
292
185
|
return (
|
|
293
|
-
<div
|
|
294
|
-
<
|
|
295
|
-
|
|
296
|
-
background: "#EEF4FB", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
|
|
297
|
-
}}>
|
|
298
|
-
<DiaryIcon size={15} color="#3A7BD5" />
|
|
299
|
-
</div>
|
|
300
|
-
<div>
|
|
301
|
-
<div style={{ fontWeight: "600", fontSize: "13px", color: "#0D1B2A" }}>{row.original.mrdName}</div>
|
|
302
|
-
<div style={{ fontSize: "11px", color: "#3A7BD5", display: "flex", alignItems: "center", gap: "3px" }}>
|
|
303
|
-
<MapPinIcon size={10} /> {row.original.zone}
|
|
304
|
-
</div>
|
|
305
|
-
</div>
|
|
186
|
+
<div>
|
|
187
|
+
<span>{row.original.mrdName}</span>
|
|
188
|
+
<div style={{ fontSize: "12px", color: "#666" }}>{row.original.zone}</div>
|
|
306
189
|
</div>
|
|
307
190
|
);
|
|
308
191
|
},
|
|
@@ -313,60 +196,30 @@ const Mapping = () => {
|
|
|
313
196
|
const isEditing = editingId === row.original.id;
|
|
314
197
|
if (isEditing) {
|
|
315
198
|
return (
|
|
316
|
-
<div style={{ display: "flex", gap: "
|
|
317
|
-
<
|
|
199
|
+
<div style={{ display: "flex", gap: "10px" }}>
|
|
200
|
+
<span
|
|
201
|
+
style={{ cursor: "pointer", color: "#f47738", fontWeight: "bold" }}
|
|
318
202
|
onClick={() => handleEditSave(row.original.id)}
|
|
319
|
-
style={{
|
|
320
|
-
display: "flex", alignItems: "center", gap: "5px",
|
|
321
|
-
background: "#3A7BD5", color: "#fff",
|
|
322
|
-
border: "none", borderRadius: "6px",
|
|
323
|
-
padding: "6px 12px", fontWeight: "600",
|
|
324
|
-
fontSize: "12px", cursor: "pointer",
|
|
325
|
-
}}
|
|
326
203
|
>
|
|
327
|
-
|
|
328
|
-
</
|
|
329
|
-
<
|
|
204
|
+
{t("ES_COMMON_SAVE")}
|
|
205
|
+
</span>
|
|
206
|
+
<span
|
|
207
|
+
style={{ cursor: "pointer", color: "#505A5F", fontWeight: "bold" }}
|
|
330
208
|
onClick={handleEditCancel}
|
|
331
|
-
style={{
|
|
332
|
-
display: "flex", alignItems: "center", gap: "5px",
|
|
333
|
-
background: "none", border: "1px solid #D0D5DD",
|
|
334
|
-
borderRadius: "6px", padding: "6px 12px",
|
|
335
|
-
fontWeight: "600", fontSize: "12px",
|
|
336
|
-
color: "#344054", cursor: "pointer",
|
|
337
|
-
}}
|
|
338
209
|
>
|
|
339
|
-
|
|
340
|
-
</
|
|
210
|
+
{t("ES_COMMON_CANCEL")}
|
|
211
|
+
</span>
|
|
341
212
|
</div>
|
|
342
213
|
);
|
|
343
214
|
}
|
|
344
215
|
return (
|
|
345
|
-
<div style={{ display: "flex", gap: "
|
|
346
|
-
<
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
color: "#344054", fontSize: "12px",
|
|
353
|
-
fontWeight: "600", cursor: "pointer",
|
|
354
|
-
}}
|
|
355
|
-
>
|
|
356
|
-
<EditIcon size={13} /> Edit
|
|
357
|
-
</button>
|
|
358
|
-
<button
|
|
359
|
-
onClick={() => setDeleteTarget(row.original)}
|
|
360
|
-
style={{
|
|
361
|
-
display: "flex", alignItems: "center", gap: "5px",
|
|
362
|
-
background: "none", border: "1px solid #FECDCA",
|
|
363
|
-
borderRadius: "6px", padding: "6px 12px",
|
|
364
|
-
color: "#B42318", fontSize: "12px",
|
|
365
|
-
fontWeight: "600", cursor: "pointer",
|
|
366
|
-
}}
|
|
367
|
-
>
|
|
368
|
-
<TrashIcon size={13} /> Remove
|
|
369
|
-
</button>
|
|
216
|
+
<div style={{ display: "flex", gap: "16px" }}>
|
|
217
|
+
<span onClick={() => handleEditStart(row.original)} style={{ cursor: "pointer" }}>
|
|
218
|
+
<EditIcon className="icon" fill="#f47738" />
|
|
219
|
+
</span>
|
|
220
|
+
<span onClick={() => setDeleteTarget(row.original)} style={{ cursor: "pointer" }}>
|
|
221
|
+
<DeleteIcon className="icon" fill="#f47738" />
|
|
222
|
+
</span>
|
|
370
223
|
</div>
|
|
371
224
|
);
|
|
372
225
|
},
|
|
@@ -376,269 +229,129 @@ const Mapping = () => {
|
|
|
376
229
|
// ── Render ────────────────────────────────────────────────────────────────
|
|
377
230
|
|
|
378
231
|
return (
|
|
379
|
-
<
|
|
232
|
+
<React.Fragment>
|
|
233
|
+
<div className="side-panel-item">
|
|
234
|
+
<Card className="employeeCard filter inboxLinks" style={{ marginTop: "16px" }}>
|
|
235
|
+
<div className="complaint-links-container">
|
|
236
|
+
<div className="header" style={{ marginBottom: "0px" }}>
|
|
237
|
+
<span className="logo">
|
|
238
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
239
|
+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
240
|
+
<path d="M6.5 2H20V22H6.5A2.5 2.5 0 0 1 4 19.5V4.5A2.5 2.5 0 0 1 6.5 2Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
241
|
+
</svg>
|
|
242
|
+
</span>
|
|
243
|
+
<span className="text">{t("EKYC_SURVEYOR_MAPPING") || "Surveyor Mapping"}</span>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
</Card>
|
|
247
|
+
</div>
|
|
380
248
|
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
249
|
+
<Card>
|
|
250
|
+
<CardHeader>{t("EKYC_NEW_MAPPING") || "New Mapping"}</CardHeader>
|
|
251
|
+
<CardText>
|
|
252
|
+
{t("EKYC_MAPPING_SUBHEADER") || "Assign Meter Reading Dairies to surveyors to manage their data access."}
|
|
253
|
+
</CardText>
|
|
254
|
+
|
|
255
|
+
<LabelFieldPair>
|
|
256
|
+
<CardLabel>{t("EKYC_SELECT_SURVEYOR") || "Select Surveyor"} *</CardLabel>
|
|
257
|
+
<div className="">
|
|
258
|
+
<Dropdown
|
|
259
|
+
selected={selectedSurveyor}
|
|
260
|
+
select={setSelectedSurveyor}
|
|
261
|
+
option={MOCK_SURVEYORS}
|
|
262
|
+
optionKey="name"
|
|
263
|
+
t={t}
|
|
264
|
+
placeholder={t("EKYC_SELECT_SURVEYOR_PLACEHOLDER") || "Choose a surveyor..."}
|
|
265
|
+
/>
|
|
389
266
|
</div>
|
|
390
|
-
|
|
391
|
-
|
|
267
|
+
</LabelFieldPair>
|
|
268
|
+
|
|
269
|
+
<LabelFieldPair>
|
|
270
|
+
<CardLabel>{t("EKYC_SELECT_MRD") || "Select MRD"} *</CardLabel>
|
|
271
|
+
<div className="field">
|
|
272
|
+
<Dropdown
|
|
273
|
+
selected={selectedMRD}
|
|
274
|
+
select={setSelectedMRD}
|
|
275
|
+
option={MOCK_MRDS}
|
|
276
|
+
optionKey="name"
|
|
277
|
+
t={t}
|
|
278
|
+
placeholder={t("EKYC_SELECT_MRD_PLACEHOLDER") || "Choose an MRD..."}
|
|
279
|
+
/>
|
|
392
280
|
</div>
|
|
281
|
+
</LabelFieldPair>
|
|
282
|
+
|
|
283
|
+
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "24px" }}>
|
|
284
|
+
<SubmitBar
|
|
285
|
+
label={t("EKYC_ADD_TO_LIST") || "Add to Mapping List"}
|
|
286
|
+
onSubmit={handleAddMapping}
|
|
287
|
+
disabled={!selectedSurveyor || !selectedMRD}
|
|
288
|
+
/>
|
|
393
289
|
</div>
|
|
394
|
-
<button
|
|
395
|
-
onClick={handleSaveMappings}
|
|
396
|
-
disabled={mappings.length === 0}
|
|
397
|
-
style={{
|
|
398
|
-
display: "flex", alignItems: "center", gap: "8px",
|
|
399
|
-
background: mappings.length === 0 ? "#D0D5DD" : "#0F3460",
|
|
400
|
-
color: "#fff", border: "none", borderRadius: "8px",
|
|
401
|
-
padding: "10px 20px", fontWeight: "600", fontSize: "14px",
|
|
402
|
-
cursor: mappings.length === 0 ? "not-allowed" : "pointer",
|
|
403
|
-
transition: "background 0.2s",
|
|
404
|
-
}}
|
|
405
|
-
>
|
|
406
|
-
<SaveIcon size={15} />
|
|
407
|
-
{t("EKYC_SAVE_MAPPINGS") || "Save Mappings"}
|
|
408
|
-
</button>
|
|
409
290
|
</Card>
|
|
410
291
|
|
|
411
|
-
{
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
}}>
|
|
433
|
-
<DiaryIcon size={16} color="#3A7BD5" />
|
|
434
|
-
</div>
|
|
435
|
-
<span style={{ fontWeight: "700", fontSize: "15px", color: "#0D1B2A" }}>
|
|
436
|
-
{t("EKYC_NEW_MAPPING") || "New Mapping"}
|
|
437
|
-
</span>
|
|
438
|
-
</div>
|
|
439
|
-
|
|
440
|
-
{/* Body */}
|
|
441
|
-
<div style={{ padding: "20px" }}>
|
|
442
|
-
{/* Surveyor */}
|
|
443
|
-
<div style={{ marginBottom: "16px" }}>
|
|
444
|
-
<label style={{
|
|
445
|
-
display: "flex", alignItems: "center", gap: "6px",
|
|
446
|
-
fontSize: "11px", fontWeight: "700", letterSpacing: "0.06em",
|
|
447
|
-
color: "#3A7BD5", textTransform: "uppercase", marginBottom: "8px",
|
|
448
|
-
}}>
|
|
449
|
-
<UserIcon size={12} color="#3A7BD5" />
|
|
450
|
-
{t("EKYC_SELECT_SURVEYOR") || "Select Surveyor"}
|
|
451
|
-
</label>
|
|
452
|
-
<Dropdown
|
|
453
|
-
selected={selectedSurveyor}
|
|
454
|
-
select={setSelectedSurveyor}
|
|
455
|
-
option={MOCK_SURVEYORS}
|
|
456
|
-
optionKey="name"
|
|
457
|
-
t={t}
|
|
458
|
-
placeholder={t("EKYC_SELECT_SURVEYOR_PLACEHOLDER") || "Choose a surveyor..."}
|
|
459
|
-
/>
|
|
460
|
-
</div>
|
|
461
|
-
|
|
462
|
-
{/* MRD */}
|
|
463
|
-
<div style={{ marginBottom: "16px" }}>
|
|
464
|
-
<label style={{
|
|
465
|
-
display: "flex", alignItems: "center", gap: "6px",
|
|
466
|
-
fontSize: "11px", fontWeight: "700", letterSpacing: "0.06em",
|
|
467
|
-
color: "#3A7BD5", textTransform: "uppercase", marginBottom: "8px",
|
|
468
|
-
}}>
|
|
469
|
-
<DiaryIcon size={12} color="#3A7BD5" />
|
|
470
|
-
{t("EKYC_SELECT_MRD") || "Select MRD"}
|
|
471
|
-
</label>
|
|
472
|
-
<Dropdown
|
|
473
|
-
selected={selectedMRD}
|
|
474
|
-
select={setSelectedMRD}
|
|
475
|
-
option={MOCK_MRDS}
|
|
476
|
-
optionKey="name"
|
|
477
|
-
t={t}
|
|
478
|
-
placeholder={t("EKYC_SELECT_MRD_PLACEHOLDER") || "Choose an MRD..."}
|
|
479
|
-
/>
|
|
480
|
-
</div>
|
|
481
|
-
|
|
482
|
-
{/* MRD Info Preview */}
|
|
483
|
-
{selectedMRD && (
|
|
484
|
-
<div style={{
|
|
485
|
-
background: "#EEF4FB", borderLeft: "3px solid #3A7BD5",
|
|
486
|
-
borderRadius: "6px", padding: "10px 14px",
|
|
487
|
-
fontSize: "12px", color: "#0D1B2A", marginBottom: "16px",
|
|
488
|
-
display: "flex", alignItems: "center", gap: "8px",
|
|
489
|
-
}}>
|
|
490
|
-
<MapPinIcon size={13} />
|
|
491
|
-
<span><strong>{selectedMRD.name}</strong> — {selectedMRD.zone} Zone</span>
|
|
492
|
-
</div>
|
|
493
|
-
)}
|
|
494
|
-
|
|
495
|
-
{/* Surveyor Preview */}
|
|
496
|
-
{selectedSurveyor && (
|
|
497
|
-
<div style={{
|
|
498
|
-
background: "#F5F7FA", borderLeft: "3px solid #6B7B8E",
|
|
499
|
-
borderRadius: "6px", padding: "10px 14px",
|
|
500
|
-
fontSize: "12px", color: "#0D1B2A", marginBottom: "16px",
|
|
501
|
-
display: "flex", alignItems: "center", gap: "8px",
|
|
502
|
-
}}>
|
|
503
|
-
<UserIcon size={13} color="#6B7B8E" />
|
|
504
|
-
<span><strong>{selectedSurveyor.name}</strong> — {selectedSurveyor.id}</span>
|
|
505
|
-
</div>
|
|
506
|
-
)}
|
|
507
|
-
|
|
508
|
-
{/* Add Button */}
|
|
509
|
-
<button
|
|
510
|
-
onClick={handleAddMapping}
|
|
511
|
-
disabled={!selectedSurveyor || !selectedMRD}
|
|
512
|
-
style={{
|
|
513
|
-
width: "100%",
|
|
514
|
-
display: "flex", alignItems: "center", justifyContent: "center", gap: "8px",
|
|
515
|
-
background: (!selectedSurveyor || !selectedMRD) ? "#D0D5DD" : "#3A7BD5",
|
|
516
|
-
color: "#fff", border: "none", borderRadius: "8px",
|
|
517
|
-
padding: "12px", fontWeight: "600", fontSize: "14px",
|
|
518
|
-
cursor: (!selectedSurveyor || !selectedMRD) ? "not-allowed" : "pointer",
|
|
519
|
-
marginTop: "4px", transition: "background 0.2s",
|
|
520
|
-
}}
|
|
521
|
-
>
|
|
522
|
-
<PlusIcon size={16} />
|
|
523
|
-
{t("EKYC_ADD_TO_LIST") || "Add to Mapping List"}
|
|
524
|
-
</button>
|
|
525
|
-
</div>
|
|
526
|
-
|
|
527
|
-
{/* Stats Footer */}
|
|
528
|
-
{mappings.length > 0 && (
|
|
529
|
-
<div style={{
|
|
530
|
-
padding: "12px 20px", borderTop: "1px solid #F0F2F5",
|
|
531
|
-
background: "#FAFBFC", display: "flex", gap: "16px",
|
|
532
|
-
}}>
|
|
533
|
-
<div style={{ textAlign: "center", flex: 1 }}>
|
|
534
|
-
<div style={{ fontSize: "20px", fontWeight: "700", color: "#0F3460" }}>
|
|
535
|
-
{mappings.length}
|
|
536
|
-
</div>
|
|
537
|
-
<div style={{ fontSize: "11px", color: "#6B7B8E" }}>Total Mappings</div>
|
|
538
|
-
</div>
|
|
539
|
-
<div style={{ width: "1px", background: "#E5E9EF" }} />
|
|
540
|
-
<div style={{ textAlign: "center", flex: 1 }}>
|
|
541
|
-
<div style={{ fontSize: "20px", fontWeight: "700", color: "#0F3460" }}>
|
|
542
|
-
{[...new Set(mappings.map(m => m.surveyorId))].length}
|
|
543
|
-
</div>
|
|
544
|
-
<div style={{ fontSize: "11px", color: "#6B7B8E" }}>Surveyors</div>
|
|
545
|
-
</div>
|
|
546
|
-
<div style={{ width: "1px", background: "#E5E9EF" }} />
|
|
547
|
-
<div style={{ textAlign: "center", flex: 1 }}>
|
|
548
|
-
<div style={{ fontSize: "20px", fontWeight: "700", color: "#0F3460" }}>
|
|
549
|
-
{[...new Set(mappings.map(m => m.mrdCode))].length}
|
|
550
|
-
</div>
|
|
551
|
-
<div style={{ fontSize: "11px", color: "#6B7B8E" }}>MRDs</div>
|
|
552
|
-
</div>
|
|
553
|
-
</div>
|
|
554
|
-
)}
|
|
555
|
-
</div>
|
|
556
|
-
|
|
557
|
-
{/* ── Right: Summary Table Panel ── */}
|
|
558
|
-
<div style={{
|
|
559
|
-
background: "#fff", borderRadius: "12px",
|
|
560
|
-
border: "1px solid #E5E9EF", overflow: "hidden", minHeight: "420px",
|
|
561
|
-
}}>
|
|
562
|
-
{/* Header */}
|
|
563
|
-
<div style={{
|
|
564
|
-
display: "flex", alignItems: "center", justifyContent: "space-between",
|
|
565
|
-
padding: "16px 20px", borderBottom: "1px solid #F0F2F5", background: "#FAFBFC",
|
|
566
|
-
}}>
|
|
567
|
-
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
|
568
|
-
<div style={{
|
|
569
|
-
width: "32px", height: "32px", borderRadius: "8px",
|
|
570
|
-
background: "#EEF4FB", display: "flex", alignItems: "center", justifyContent: "center",
|
|
571
|
-
}}>
|
|
572
|
-
<UserIcon size={16} color="#3A7BD5" />
|
|
573
|
-
</div>
|
|
574
|
-
<span style={{ fontWeight: "700", fontSize: "15px", color: "#0D1B2A" }}>
|
|
575
|
-
{t("EKYC_MAPPING_SUMMARY") || "Mapping Summary"}
|
|
576
|
-
</span>
|
|
577
|
-
</div>
|
|
578
|
-
<span style={{
|
|
579
|
-
background: mappings.length > 0 ? "#0F3460" : "#E5E9EF",
|
|
580
|
-
color: mappings.length > 0 ? "#fff" : "#6B7B8E",
|
|
581
|
-
fontSize: "12px", fontWeight: "700",
|
|
582
|
-
padding: "3px 10px", borderRadius: "20px",
|
|
583
|
-
}}>
|
|
584
|
-
{mappings.length} {t("EKYC_ITEMS") || "items"}
|
|
585
|
-
</span>
|
|
586
|
-
</div>
|
|
292
|
+
{mappings.length > 0 && (
|
|
293
|
+
<Card>
|
|
294
|
+
<CardHeader>
|
|
295
|
+
{t("EKYC_MAPPING_SUMMARY") || "Mapping Summary"} ({mappings.length})
|
|
296
|
+
</CardHeader>
|
|
297
|
+
<Table
|
|
298
|
+
t={t}
|
|
299
|
+
data={mappings}
|
|
300
|
+
columns={columns}
|
|
301
|
+
getCellProps={(cellInfo) => {
|
|
302
|
+
return {
|
|
303
|
+
style: {
|
|
304
|
+
padding: "10px",
|
|
305
|
+
fontSize: "16px",
|
|
306
|
+
}
|
|
307
|
+
};
|
|
308
|
+
}}
|
|
309
|
+
tableClassName="table digit-table"
|
|
310
|
+
/>
|
|
311
|
+
</Card>
|
|
312
|
+
)}
|
|
587
313
|
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
getCellProps={() => ({})}
|
|
597
|
-
tableClassName="digit-table"
|
|
598
|
-
/>
|
|
599
|
-
</div>
|
|
600
|
-
) : (
|
|
601
|
-
<div style={{
|
|
602
|
-
display: "flex", flexDirection: "column",
|
|
603
|
-
alignItems: "center", justifyContent: "center",
|
|
604
|
-
minHeight: "320px", textAlign: "center",
|
|
605
|
-
}}>
|
|
606
|
-
<div style={{ marginBottom: "16px", opacity: 0.2 }}>
|
|
607
|
-
<DiaryIcon size={56} color="#0F3460" />
|
|
608
|
-
</div>
|
|
609
|
-
<div style={{ fontSize: "15px", fontWeight: "700", color: "#0D1B2A", marginBottom: "6px" }}>
|
|
610
|
-
{t("EKYC_NO_MAPPINGS") || "No Mappings Created Yet"}
|
|
611
|
-
</div>
|
|
612
|
-
<div style={{ fontSize: "13px", color: "#6B7B8E" }}>
|
|
613
|
-
{t("EKYC_NO_MAPPINGS_HINT") || "Select a surveyor and MRD on the left to get started."}
|
|
614
|
-
</div>
|
|
615
|
-
</div>
|
|
616
|
-
)}
|
|
617
|
-
</div>
|
|
618
|
-
</div>
|
|
619
|
-
</div>
|
|
620
|
-
</div>
|
|
314
|
+
{mappings.length > 0 && (
|
|
315
|
+
<ActionBar>
|
|
316
|
+
<SubmitBar
|
|
317
|
+
label={t("EKYC_SAVE_MAPPINGS") || "Save Mappings"}
|
|
318
|
+
onSubmit={handleSaveMappings}
|
|
319
|
+
/>
|
|
320
|
+
</ActionBar>
|
|
321
|
+
)}
|
|
621
322
|
|
|
622
|
-
{/* Delete Confirm Modal */}
|
|
623
323
|
{deleteTarget && (
|
|
624
|
-
<
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
324
|
+
<Modal
|
|
325
|
+
headerBarMain={t("EKYC_REMOVE_MAPPING") || "Remove Mapping"}
|
|
326
|
+
headerBarEnd={
|
|
327
|
+
<span onClick={() => setDeleteTarget(null)} style={{ cursor: "pointer", padding: "8px" }}>
|
|
328
|
+
X
|
|
329
|
+
</span>
|
|
330
|
+
}
|
|
331
|
+
actionSaveLabel={t("ES_COMMON_REMOVE")}
|
|
332
|
+
actionSaveOnSubmit={handleDeleteConfirm}
|
|
333
|
+
actionCancelLabel={t("ES_COMMON_CANCEL")}
|
|
334
|
+
actionCancelOnSubmit={() => setDeleteTarget(null)}
|
|
335
|
+
style={{ borderRadius: "12px" }}
|
|
336
|
+
>
|
|
337
|
+
<CardText style={{ marginTop: "16px", marginBottom: "16px" }}>
|
|
338
|
+
{t("EKYC_REMOVE_MAPPING_CONFIRM_MSG") || "Are you sure you want to remove the mapping between "}
|
|
339
|
+
<strong>{deleteTarget?.surveyorName}</strong> and <strong>{deleteTarget?.mrdName}</strong>?
|
|
340
|
+
</CardText>
|
|
341
|
+
</Modal>
|
|
629
342
|
)}
|
|
630
343
|
|
|
631
|
-
{/* Toast */}
|
|
632
344
|
{toast && (
|
|
633
345
|
<Toast
|
|
634
346
|
label={toast.message}
|
|
635
347
|
error={toast.type === "error"}
|
|
636
348
|
warning={toast.type === "warning"}
|
|
349
|
+
info={toast.type === "info"}
|
|
637
350
|
isDsc={true}
|
|
638
351
|
onClose={() => setToast(null)}
|
|
639
352
|
/>
|
|
640
353
|
)}
|
|
641
|
-
</
|
|
354
|
+
</React.Fragment>
|
|
642
355
|
);
|
|
643
356
|
};
|
|
644
357
|
|