jett.admin.npmpackage 1.0.69 → 1.0.71
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/dist/index.css +1262 -1260
- package/dist/index.js +1213 -1213
- package/dist/index.mjs +1177 -1177
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,1177 +1,1177 @@
|
|
|
1
|
-
// src/utils/cn.ts
|
|
2
|
-
import { clsx } from "clsx";
|
|
3
|
-
import { twMerge } from "tailwind-merge";
|
|
4
|
-
function cn(...inputs) {
|
|
5
|
-
return twMerge(clsx(inputs));
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
// src/Button.jsx
|
|
9
|
-
import React from "react";
|
|
10
|
-
var variantStyles = {
|
|
11
|
-
PRIMARY: "bg-white dark:bg-[#18181b] dark:text-white",
|
|
12
|
-
SECONDARY: "bg-primary text-white dark:text-white",
|
|
13
|
-
DEFAULT: "bg-white text-black dark:text-white",
|
|
14
|
-
DANGER: "bg-[#ef4444] text-white dark:text-white"
|
|
15
|
-
};
|
|
16
|
-
var CustomButton = ({
|
|
17
|
-
variant = "DEFAULT",
|
|
18
|
-
children,
|
|
19
|
-
className,
|
|
20
|
-
onClick,
|
|
21
|
-
disabled = false,
|
|
22
|
-
icon
|
|
23
|
-
}) => {
|
|
24
|
-
return /* @__PURE__ */ React.createElement(
|
|
25
|
-
"div",
|
|
26
|
-
{
|
|
27
|
-
className: cn(
|
|
28
|
-
`cursor-pointer flex items-center py-2 px-3 min-h-10 justify-center border rounded-[6px] border-[#e5e5e5] dark:border-[#303036] ${variant == "DANGER" ? "bg-[#ef4444]" : "dark:bg-[#1d1d20]"} gap-2`,
|
|
29
|
-
variantStyles[variant],
|
|
30
|
-
className
|
|
31
|
-
),
|
|
32
|
-
onClick
|
|
33
|
-
},
|
|
34
|
-
icon && /* @__PURE__ */ React.createElement("div", null, icon),
|
|
35
|
-
children
|
|
36
|
-
);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
// src/inputs/Autocomplete.jsx
|
|
40
|
-
import React2, { useState, useRef } from "react";
|
|
41
|
-
import { ChevronDown, Check, Search } from "lucide-react";
|
|
42
|
-
var CustomAutocomplete = ({
|
|
43
|
-
label,
|
|
44
|
-
value,
|
|
45
|
-
onChange,
|
|
46
|
-
options,
|
|
47
|
-
placeholder = "Search & select...",
|
|
48
|
-
isRequired = false,
|
|
49
|
-
error,
|
|
50
|
-
heading,
|
|
51
|
-
disabled = false
|
|
52
|
-
}) => {
|
|
53
|
-
const [open, setOpen] = useState(false);
|
|
54
|
-
const [search, setSearch] = useState("");
|
|
55
|
-
const wrapperRef = useRef(null);
|
|
56
|
-
const selectedOptions = options.filter((opt) => value.includes(opt.value));
|
|
57
|
-
const handleBlur = (e) => {
|
|
58
|
-
var _a;
|
|
59
|
-
if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(e.relatedTarget))) {
|
|
60
|
-
setOpen(false);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
const filteredOptions = options.filter(
|
|
64
|
-
(opt) => opt.label.toLowerCase().includes(search.toLowerCase())
|
|
65
|
-
);
|
|
66
|
-
const toggleValue = (val) => {
|
|
67
|
-
if (value.includes(val)) {
|
|
68
|
-
onChange(value.filter((v) => v !== val));
|
|
69
|
-
} else {
|
|
70
|
-
onChange([...value, val]);
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
return /* @__PURE__ */ React2.createElement(
|
|
74
|
-
"div",
|
|
75
|
-
{
|
|
76
|
-
className: "flex flex-col w-full relative dark:bg-[#18181b] dark:text-white",
|
|
77
|
-
ref: wrapperRef,
|
|
78
|
-
tabIndex: disabled ? -1 : 0,
|
|
79
|
-
onBlur: handleBlur
|
|
80
|
-
},
|
|
81
|
-
heading && /* @__PURE__ */ React2.createElement("h3", { className: "text-lg font-semibold leading-6 mb-1" }, heading),
|
|
82
|
-
label && /* @__PURE__ */ React2.createElement(
|
|
83
|
-
"label",
|
|
84
|
-
{
|
|
85
|
-
className: `font-[500] text-sm leading-5 mb-1 ${heading ? "text-[#737373]" : "text-black dark:text-white"}`
|
|
86
|
-
},
|
|
87
|
-
label,
|
|
88
|
-
" ",
|
|
89
|
-
isRequired && /* @__PURE__ */ React2.createElement("span", { className: "text-red-500" }, "*")
|
|
90
|
-
),
|
|
91
|
-
/* @__PURE__ */ React2.createElement(
|
|
92
|
-
"div",
|
|
93
|
-
{
|
|
94
|
-
onClick: () => {
|
|
95
|
-
if (!disabled) setOpen((prev) => !prev);
|
|
96
|
-
},
|
|
97
|
-
className: `flex justify-between items-center flex-wrap gap-1 rounded-md px-3 py-2 text-sm transition border dark:border-[#303036] h-auto min-h-10 dark:bg-[#18181b] dark:text-white
|
|
98
|
-
${disabled ? "bg-gray-100 cursor-not-allowed text-gray-400" : "cursor-text"}
|
|
99
|
-
${error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)] hover:border-gray-400 dark:bg-[#18181b] dark:text-white"}
|
|
100
|
-
`
|
|
101
|
-
},
|
|
102
|
-
/* @__PURE__ */ React2.createElement("div", { className: "flex flex-wrap gap-1 flex-1" }, selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ React2.createElement(
|
|
103
|
-
"span",
|
|
104
|
-
{
|
|
105
|
-
key: opt.value,
|
|
106
|
-
className: "bg-gray-100 border border-gray-300 px-2 dark:bg-gray-800 dark:text-white py-0.5 rounded text-xs flex items-center gap-1"
|
|
107
|
-
},
|
|
108
|
-
opt.label,
|
|
109
|
-
/* @__PURE__ */ React2.createElement(
|
|
110
|
-
"button",
|
|
111
|
-
{
|
|
112
|
-
onClick: (e) => {
|
|
113
|
-
e.stopPropagation();
|
|
114
|
-
toggleValue(opt.value);
|
|
115
|
-
},
|
|
116
|
-
className: "text-gray-500 hover:text-gray-700 dark:text-white"
|
|
117
|
-
},
|
|
118
|
-
"\u2715"
|
|
119
|
-
)
|
|
120
|
-
)) : /* @__PURE__ */ React2.createElement("span", { className: "text-gray-400" }, placeholder)),
|
|
121
|
-
/* @__PURE__ */ React2.createElement(
|
|
122
|
-
ChevronDown,
|
|
123
|
-
{
|
|
124
|
-
className: `w-4 h-4 text-gray-500 transition-transform ${open ? "rotate-180" : ""}`
|
|
125
|
-
}
|
|
126
|
-
)
|
|
127
|
-
),
|
|
128
|
-
!disabled && open && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React2.createElement(Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React2.createElement(
|
|
129
|
-
"input",
|
|
130
|
-
{
|
|
131
|
-
type: "text",
|
|
132
|
-
value: search,
|
|
133
|
-
onChange: (e) => setSearch(e.target.value),
|
|
134
|
-
placeholder: "Search...",
|
|
135
|
-
className: "flex-1 text-sm focus:outline-none"
|
|
136
|
-
}
|
|
137
|
-
)), /* @__PURE__ */ React2.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => {
|
|
138
|
-
const selected = value.includes(opt.value);
|
|
139
|
-
return /* @__PURE__ */ React2.createElement(
|
|
140
|
-
"li",
|
|
141
|
-
{
|
|
142
|
-
key: opt.value,
|
|
143
|
-
onClick: () => toggleValue(opt.value),
|
|
144
|
-
className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 ${selected ? "bg-gray-50 font-medium" : ""}`
|
|
145
|
-
},
|
|
146
|
-
/* @__PURE__ */ React2.createElement(
|
|
147
|
-
"span",
|
|
148
|
-
{
|
|
149
|
-
className: `w-4 h-4 flex items-center justify-center border rounded-sm ${selected ? "bg-blue-600 border-blue-600 text-white" : "border-gray-300"}`
|
|
150
|
-
},
|
|
151
|
-
selected && /* @__PURE__ */ React2.createElement(Check, { size: 14 })
|
|
152
|
-
),
|
|
153
|
-
opt.label
|
|
154
|
-
);
|
|
155
|
-
}) : /* @__PURE__ */ React2.createElement("li", { className: "px-3 py-2 text-sm text-gray-400" }, "No results found")))
|
|
156
|
-
);
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
// src/inputs/Checkbox.jsx
|
|
160
|
-
import React3 from "react";
|
|
161
|
-
var CustomCheckbox = ({ onChange, checked }) => {
|
|
162
|
-
const handleChange = (e) => {
|
|
163
|
-
onChange(e.target.checked);
|
|
164
|
-
};
|
|
165
|
-
return /* @__PURE__ */ React3.createElement("label", { className: "inline-flex items-center cursor-pointer select-none" }, /* @__PURE__ */ React3.createElement(
|
|
166
|
-
"input",
|
|
167
|
-
{
|
|
168
|
-
type: "checkbox",
|
|
169
|
-
checked,
|
|
170
|
-
onChange: handleChange,
|
|
171
|
-
className: "peer hidden"
|
|
172
|
-
}
|
|
173
|
-
), /* @__PURE__ */ React3.createElement(
|
|
174
|
-
"span",
|
|
175
|
-
{
|
|
176
|
-
className: "\r\n w-4 h-4 flex items-center justify-center border-2 border-gray-400 rounded \r\n peer-checked:bg-primary peer-checked:border-primary\r\n transition-colors\r\n "
|
|
177
|
-
},
|
|
178
|
-
checked && /* @__PURE__ */ React3.createElement(
|
|
179
|
-
"svg",
|
|
180
|
-
{
|
|
181
|
-
className: "w-4 h-4 text-white",
|
|
182
|
-
fill: "none",
|
|
183
|
-
stroke: "currentColor",
|
|
184
|
-
strokeWidth: "3",
|
|
185
|
-
viewBox: "0 0 24 24"
|
|
186
|
-
},
|
|
187
|
-
/* @__PURE__ */ React3.createElement("path", { d: "M5 13l4 4L19 7" })
|
|
188
|
-
)
|
|
189
|
-
));
|
|
190
|
-
};
|
|
191
|
-
|
|
192
|
-
// src/inputs/Chip.jsx
|
|
193
|
-
import React4 from "react";
|
|
194
|
-
var VARIANTS = {
|
|
195
|
-
PRIMARY: "bg-gray-100 text-black dark:bg-gray-800 dark:text-white",
|
|
196
|
-
GREEN: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100",
|
|
197
|
-
RED: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100",
|
|
198
|
-
YELLOW: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"
|
|
199
|
-
};
|
|
200
|
-
var Chip = ({ label, variant }) => {
|
|
201
|
-
return /* @__PURE__ */ React4.createElement(
|
|
202
|
-
"div",
|
|
203
|
-
{
|
|
204
|
-
className: `inline-flex text-[12px] items-center px-3 py-1 rounded-full ${VARIANTS[variant] || VARIANTS.PRIMARY} text-sm font-[600]`
|
|
205
|
-
},
|
|
206
|
-
label
|
|
207
|
-
);
|
|
208
|
-
};
|
|
209
|
-
|
|
210
|
-
// src/inputs/CustomSwitch.jsx
|
|
211
|
-
import React5 from "react";
|
|
212
|
-
var CustomSwitch = ({ checked, onChange, label, description }) => {
|
|
213
|
-
return /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement(
|
|
214
|
-
"button",
|
|
215
|
-
{
|
|
216
|
-
type: "button",
|
|
217
|
-
role: "switch",
|
|
218
|
-
"aria-checked": checked,
|
|
219
|
-
onClick: () => onChange(!checked),
|
|
220
|
-
className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors ${checked ? "bg-black" : "bg-gray-300"}`
|
|
221
|
-
},
|
|
222
|
-
/* @__PURE__ */ React5.createElement(
|
|
223
|
-
"span",
|
|
224
|
-
{
|
|
225
|
-
className: `inline-block h-4 w-4 transform rounded-full bg-white shadow transition ${checked ? "translate-x-6" : "translate-x-1"}`
|
|
226
|
-
}
|
|
227
|
-
)
|
|
228
|
-
), /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col" }, label && /* @__PURE__ */ React5.createElement("h3", { className: "font-[500] text-sm text-black mb-2" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "font-[500] text-sm text-[#737373]" }, description)));
|
|
229
|
-
};
|
|
230
|
-
|
|
231
|
-
// src/inputs/Input.jsx
|
|
232
|
-
import React6 from "react";
|
|
233
|
-
var CustomInput = ({
|
|
234
|
-
label,
|
|
235
|
-
isRequired,
|
|
236
|
-
value,
|
|
237
|
-
onChange,
|
|
238
|
-
placeholder,
|
|
239
|
-
disabled = false,
|
|
240
|
-
error,
|
|
241
|
-
heading
|
|
242
|
-
}) => {
|
|
243
|
-
return /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React6.createElement(
|
|
244
|
-
"label",
|
|
245
|
-
{
|
|
246
|
-
className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"} dark:text-white`
|
|
247
|
-
},
|
|
248
|
-
label,
|
|
249
|
-
" ",
|
|
250
|
-
isRequired && /* @__PURE__ */ React6.createElement("span", { className: "text-red-500" }, "*")
|
|
251
|
-
), /* @__PURE__ */ React6.createElement(
|
|
252
|
-
"input",
|
|
253
|
-
{
|
|
254
|
-
className: `border border-gray-200 rounded-md h-10 px-4 py-2 w-full text-[14px]
|
|
255
|
-
focus:outline-2 outline-black dark:outline-white outline-offset-2
|
|
256
|
-
dark:bg-transparent dark:text-white dark:border-[#303036]
|
|
257
|
-
${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500 border-gray-300" : error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)]"}
|
|
258
|
-
`,
|
|
259
|
-
value,
|
|
260
|
-
onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
|
|
261
|
-
placeholder,
|
|
262
|
-
disabled,
|
|
263
|
-
readOnly: disabled
|
|
264
|
-
}
|
|
265
|
-
));
|
|
266
|
-
};
|
|
267
|
-
|
|
268
|
-
// src/inputs/ProgressBar.jsx
|
|
269
|
-
import React7 from "react";
|
|
270
|
-
var ProgressBar = ({ step, totalSteps }) => {
|
|
271
|
-
const progress = step / totalSteps * 100;
|
|
272
|
-
return /* @__PURE__ */ React7.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React7.createElement("p", { className: "text-gray-600 text-sm mb-2" }, "Step ", step, " of ", totalSteps), /* @__PURE__ */ React7.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React7.createElement(
|
|
273
|
-
"div",
|
|
274
|
-
{
|
|
275
|
-
className: "bg-black h-2 rounded-full transition-all duration-300",
|
|
276
|
-
style: { width: `${progress}%` }
|
|
277
|
-
}
|
|
278
|
-
)));
|
|
279
|
-
};
|
|
280
|
-
|
|
281
|
-
// src/inputs/Search.jsx
|
|
282
|
-
import React8 from "react";
|
|
283
|
-
import { Search as Search2 } from "lucide-react";
|
|
284
|
-
var CustomSearch = ({
|
|
285
|
-
value,
|
|
286
|
-
onChange,
|
|
287
|
-
placeholder = "Search Markets..."
|
|
288
|
-
}) => {
|
|
289
|
-
return /* @__PURE__ */ React8.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] dark:border-[#303036] \r\n rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2 dark:text-white" }, /* @__PURE__ */ React8.createElement(Search2, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ React8.createElement(
|
|
290
|
-
"input",
|
|
291
|
-
{
|
|
292
|
-
type: "text",
|
|
293
|
-
value,
|
|
294
|
-
onChange,
|
|
295
|
-
placeholder,
|
|
296
|
-
className: "bg-transparent w-full h-full focus:outline-none"
|
|
297
|
-
}
|
|
298
|
-
));
|
|
299
|
-
};
|
|
300
|
-
|
|
301
|
-
// src/inputs/TextArea.jsx
|
|
302
|
-
import React9 from "react";
|
|
303
|
-
var CustomTextarea = ({
|
|
304
|
-
label,
|
|
305
|
-
isRequired,
|
|
306
|
-
value,
|
|
307
|
-
onChange,
|
|
308
|
-
placeholder,
|
|
309
|
-
disabled = false,
|
|
310
|
-
error,
|
|
311
|
-
heading,
|
|
312
|
-
rows = 4
|
|
313
|
-
}) => {
|
|
314
|
-
return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React9.createElement(
|
|
315
|
-
"label",
|
|
316
|
-
{
|
|
317
|
-
className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"}`
|
|
318
|
-
},
|
|
319
|
-
label,
|
|
320
|
-
" ",
|
|
321
|
-
isRequired && /* @__PURE__ */ React9.createElement("span", { className: "text-red-500" }, "*")
|
|
322
|
-
), /* @__PURE__ */ React9.createElement(
|
|
323
|
-
"textarea",
|
|
324
|
-
{
|
|
325
|
-
rows,
|
|
326
|
-
className: `border rounded-md px-4 py-2 w-full text-[14px]
|
|
327
|
-
focus:outline-2 focus:outline-black focus:outline-offset-2
|
|
328
|
-
focus:ring-0 focus:shadow-none focus:border-black
|
|
329
|
-
${disabled ? "bg-gray-100 text-gray-500 border-gray-300" : error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)]"}
|
|
330
|
-
`,
|
|
331
|
-
value,
|
|
332
|
-
onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
|
|
333
|
-
placeholder,
|
|
334
|
-
disabled,
|
|
335
|
-
readOnly: disabled
|
|
336
|
-
}
|
|
337
|
-
));
|
|
338
|
-
};
|
|
339
|
-
|
|
340
|
-
// src/inputs/Upload.jsx
|
|
341
|
-
import React10, { useRef as useRef2 } from "react";
|
|
342
|
-
import { Upload } from "lucide-react";
|
|
343
|
-
var CustomUpload = ({
|
|
344
|
-
label = "Supporting documents",
|
|
345
|
-
description = "Drop items here or Browse Files",
|
|
346
|
-
accept = ".pdf,.jpg,.jpeg,.png",
|
|
347
|
-
maxSizeMB = 5,
|
|
348
|
-
onChange,
|
|
349
|
-
error,
|
|
350
|
-
value
|
|
351
|
-
}) => {
|
|
352
|
-
const inputRef = useRef2(null);
|
|
353
|
-
const handleFileSelect = (files) => {
|
|
354
|
-
if (!files || files.length === 0) return;
|
|
355
|
-
const selectedFile = files[0];
|
|
356
|
-
if (selectedFile.size > maxSizeMB * 1024 * 1024) {
|
|
357
|
-
alert(`File size must be less than ${maxSizeMB} MB`);
|
|
358
|
-
return;
|
|
359
|
-
}
|
|
360
|
-
onChange == null ? void 0 : onChange(selectedFile);
|
|
361
|
-
};
|
|
362
|
-
return /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-2 w-full" }, label && /* @__PURE__ */ React10.createElement("label", { className: "text-sm font-medium" }, label), /* @__PURE__ */ React10.createElement(
|
|
363
|
-
"div",
|
|
364
|
-
{
|
|
365
|
-
className: `border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center cursor-pointer transition
|
|
366
|
-
${error ? "border-red-500 bg-red-50" : "border-gray-300 hover:border-gray-400 bg-gray-50"}`,
|
|
367
|
-
onClick: () => {
|
|
368
|
-
var _a;
|
|
369
|
-
return (_a = inputRef.current) == null ? void 0 : _a.click();
|
|
370
|
-
},
|
|
371
|
-
onDragOver: (e) => e.preventDefault(),
|
|
372
|
-
onDrop: (e) => {
|
|
373
|
-
e.preventDefault();
|
|
374
|
-
handleFileSelect(e.dataTransfer.files);
|
|
375
|
-
}
|
|
376
|
-
},
|
|
377
|
-
/* @__PURE__ */ React10.createElement(Upload, { className: "w-6 h-6 text-gray-500 mb-2" }),
|
|
378
|
-
/* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-700" }, description),
|
|
379
|
-
/* @__PURE__ */ React10.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "File Supported: PDF/JPG/PNG, up to ", maxSizeMB, " MB"),
|
|
380
|
-
/* @__PURE__ */ React10.createElement(
|
|
381
|
-
"input",
|
|
382
|
-
{
|
|
383
|
-
ref: inputRef,
|
|
384
|
-
type: "file",
|
|
385
|
-
accept,
|
|
386
|
-
className: "hidden",
|
|
387
|
-
onChange: (e) => handleFileSelect(e.target.files)
|
|
388
|
-
}
|
|
389
|
-
)
|
|
390
|
-
), value && /* @__PURE__ */ React10.createElement("span", { className: "text-sm truncate text-gray-500" }, "Selected: ", value.name), error && /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-red-500" }, error));
|
|
391
|
-
};
|
|
392
|
-
|
|
393
|
-
// src/sideBar/SideBar.jsx
|
|
394
|
-
import { ChevronDown as ChevronDown3, Globe as Globe2, LogOut, Menu, X } from "lucide-react";
|
|
395
|
-
import React12, { useEffect, useState as useState3 } from "react";
|
|
396
|
-
|
|
397
|
-
// ConstantUI.js
|
|
398
|
-
import {
|
|
399
|
-
Home,
|
|
400
|
-
BaggageClaim,
|
|
401
|
-
Users,
|
|
402
|
-
Banknote,
|
|
403
|
-
Globe,
|
|
404
|
-
TrendingUp,
|
|
405
|
-
FileText,
|
|
406
|
-
FileKey2,
|
|
407
|
-
LifeBuoy,
|
|
408
|
-
Cog,
|
|
409
|
-
Building,
|
|
410
|
-
Handshake,
|
|
411
|
-
DollarSign
|
|
412
|
-
} from "lucide-react";
|
|
413
|
-
var encodedAuthData = localStorage.getItem("encodedAuthData");
|
|
414
|
-
var navItemsConstant = [
|
|
415
|
-
{
|
|
416
|
-
Icon: Home,
|
|
417
|
-
label: "Home",
|
|
418
|
-
onClick: () => {
|
|
419
|
-
window.location.href = "/";
|
|
420
|
-
},
|
|
421
|
-
isDropDown: false
|
|
422
|
-
},
|
|
423
|
-
{
|
|
424
|
-
Icon: Handshake,
|
|
425
|
-
label: "Supplier Ecosystem",
|
|
426
|
-
onClick: () => {
|
|
427
|
-
},
|
|
428
|
-
isDropDown: true,
|
|
429
|
-
options: [
|
|
430
|
-
{
|
|
431
|
-
label: "Suppliers",
|
|
432
|
-
onClick: () => {
|
|
433
|
-
window.location.href = "/supplier/";
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
]
|
|
437
|
-
},
|
|
438
|
-
{
|
|
439
|
-
Icon: Building,
|
|
440
|
-
label: "Consumer Ecosystem",
|
|
441
|
-
onClick: () => {
|
|
442
|
-
},
|
|
443
|
-
options: [
|
|
444
|
-
{
|
|
445
|
-
label: "Corporate",
|
|
446
|
-
onClick: () => {
|
|
447
|
-
window.location.href = "/corporate/";
|
|
448
|
-
}
|
|
449
|
-
},
|
|
450
|
-
{
|
|
451
|
-
label: "Trips",
|
|
452
|
-
onClick: () => {
|
|
453
|
-
window.location.href = "/trips/";
|
|
454
|
-
}
|
|
455
|
-
},
|
|
456
|
-
{
|
|
457
|
-
label: "Reports",
|
|
458
|
-
onClick: () => {
|
|
459
|
-
window.open("https://viz.jett.travel", "_blank");
|
|
460
|
-
}
|
|
461
|
-
},
|
|
462
|
-
{
|
|
463
|
-
label: "Tags",
|
|
464
|
-
onClick: () => {
|
|
465
|
-
window.location.href = "/orgselector/?path=tag";
|
|
466
|
-
}
|
|
467
|
-
},
|
|
468
|
-
{
|
|
469
|
-
label: "Users",
|
|
470
|
-
onClick: () => {
|
|
471
|
-
window.location.href = "/orgselector/?path=users";
|
|
472
|
-
}
|
|
473
|
-
}
|
|
474
|
-
],
|
|
475
|
-
isDropDown: true
|
|
476
|
-
},
|
|
477
|
-
{
|
|
478
|
-
Icon: Banknote,
|
|
479
|
-
label: "Finance",
|
|
480
|
-
onClick: () => {
|
|
481
|
-
},
|
|
482
|
-
isDropDown: true,
|
|
483
|
-
options: [
|
|
484
|
-
{
|
|
485
|
-
label: "Invoices",
|
|
486
|
-
onClick: () => {
|
|
487
|
-
window.location.href = "/finance/invoices/";
|
|
488
|
-
}
|
|
489
|
-
},
|
|
490
|
-
{
|
|
491
|
-
label: "Booking History",
|
|
492
|
-
onClick: () => {
|
|
493
|
-
window.location.href = "/finance/bookingHistory/";
|
|
494
|
-
}
|
|
495
|
-
},
|
|
496
|
-
{
|
|
497
|
-
label: "Payments Ledger",
|
|
498
|
-
onClick: () => {
|
|
499
|
-
window.location.href = "/finance/paymentsLedger/";
|
|
500
|
-
}
|
|
501
|
-
}
|
|
502
|
-
]
|
|
503
|
-
},
|
|
504
|
-
{
|
|
505
|
-
Icon: DollarSign,
|
|
506
|
-
label: "Revenue Management",
|
|
507
|
-
onClick: () => {
|
|
508
|
-
},
|
|
509
|
-
isDropDown: true,
|
|
510
|
-
options: [
|
|
511
|
-
{
|
|
512
|
-
label: "Pricing Policy",
|
|
513
|
-
onClick: () => {
|
|
514
|
-
window.location.href = "/orgselector/?path=pricing-policy";
|
|
515
|
-
}
|
|
516
|
-
},
|
|
517
|
-
{
|
|
518
|
-
label: "Offers",
|
|
519
|
-
onClick: () => {
|
|
520
|
-
window.location.href = "/orgselector/?path=offer";
|
|
521
|
-
}
|
|
522
|
-
},
|
|
523
|
-
{
|
|
524
|
-
label: "Vouchers",
|
|
525
|
-
onClick: () => {
|
|
526
|
-
window.location.href = "/orgselector/?path=voucher";
|
|
527
|
-
}
|
|
528
|
-
},
|
|
529
|
-
{
|
|
530
|
-
label: "Supplier Deals",
|
|
531
|
-
onClick: () => {
|
|
532
|
-
window.location.href = "/supplierdeals/";
|
|
533
|
-
}
|
|
534
|
-
},
|
|
535
|
-
{
|
|
536
|
-
label: "Subscription Plans",
|
|
537
|
-
onClick: () => {
|
|
538
|
-
window.location.href = "/subscription/";
|
|
539
|
-
}
|
|
540
|
-
}
|
|
541
|
-
]
|
|
542
|
-
},
|
|
543
|
-
{
|
|
544
|
-
Icon: Cog,
|
|
545
|
-
label: "Settings",
|
|
546
|
-
onClick: () => {
|
|
547
|
-
},
|
|
548
|
-
isDropDown: true,
|
|
549
|
-
options: [
|
|
550
|
-
{
|
|
551
|
-
label: "Admin user Management",
|
|
552
|
-
isDropDown: true,
|
|
553
|
-
onClick: () => {
|
|
554
|
-
},
|
|
555
|
-
options: [
|
|
556
|
-
{
|
|
557
|
-
label: "Admin Users",
|
|
558
|
-
onClick: () => {
|
|
559
|
-
window.location.href = "/users/";
|
|
560
|
-
}
|
|
561
|
-
},
|
|
562
|
-
{ label: "Admin User Attributes", onClick: () => {
|
|
563
|
-
} }
|
|
564
|
-
]
|
|
565
|
-
},
|
|
566
|
-
{
|
|
567
|
-
label: "TMC Markets",
|
|
568
|
-
onClick: () => {
|
|
569
|
-
window.location.href = "/market/";
|
|
570
|
-
}
|
|
571
|
-
},
|
|
572
|
-
{
|
|
573
|
-
label: "Report Configurations",
|
|
574
|
-
onClick: () => {
|
|
575
|
-
window.location.href = "/reports/";
|
|
576
|
-
}
|
|
577
|
-
},
|
|
578
|
-
{
|
|
579
|
-
label: "Whitelabelling",
|
|
580
|
-
onClick: () => {
|
|
581
|
-
window.location.href = "/whitelabel/";
|
|
582
|
-
}
|
|
583
|
-
}
|
|
584
|
-
]
|
|
585
|
-
}
|
|
586
|
-
];
|
|
587
|
-
var additionalItemsConstant = [
|
|
588
|
-
{
|
|
589
|
-
Icon: LifeBuoy,
|
|
590
|
-
label: "Help",
|
|
591
|
-
onClick: () => {
|
|
592
|
-
window.location.href = "/help";
|
|
593
|
-
}
|
|
594
|
-
}
|
|
595
|
-
];
|
|
596
|
-
|
|
597
|
-
// src/assests/logo/logo-white.svg
|
|
598
|
-
var logo_white_default = "./logo-white-RYMEJOWI.svg";
|
|
599
|
-
|
|
600
|
-
// src/sideBar/SideBar.jsx
|
|
601
|
-
import Cookies from "js-cookie";
|
|
602
|
-
|
|
603
|
-
// src/inputs/CustomSelect.jsx
|
|
604
|
-
import React11, { useState as useState2, useRef as useRef3 } from "react";
|
|
605
|
-
import { ChevronDown as ChevronDown2, Search as Search3 } from "lucide-react";
|
|
606
|
-
var CustomSelect = ({
|
|
607
|
-
label,
|
|
608
|
-
value,
|
|
609
|
-
onChange,
|
|
610
|
-
options,
|
|
611
|
-
placeholder = "Select...",
|
|
612
|
-
isRequired = false,
|
|
613
|
-
error,
|
|
614
|
-
heading,
|
|
615
|
-
disabled = false
|
|
616
|
-
}) => {
|
|
617
|
-
const [open, setOpen] = useState2(false);
|
|
618
|
-
const [search, setSearch] = useState2("");
|
|
619
|
-
const wrapperRef = useRef3(null);
|
|
620
|
-
const handleBlur = (e) => {
|
|
621
|
-
var _a;
|
|
622
|
-
if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(e.relatedTarget))) {
|
|
623
|
-
setOpen(false);
|
|
624
|
-
}
|
|
625
|
-
};
|
|
626
|
-
const filteredOptions = options.filter(
|
|
627
|
-
(opt) => opt.label.toLowerCase().includes(search.toLowerCase())
|
|
628
|
-
);
|
|
629
|
-
const handleSelect = (val) => {
|
|
630
|
-
onChange(val);
|
|
631
|
-
setOpen(false);
|
|
632
|
-
};
|
|
633
|
-
const selectedOption = options.find((opt) => opt.value === value);
|
|
634
|
-
return /* @__PURE__ */ React11.createElement(
|
|
635
|
-
"div",
|
|
636
|
-
{
|
|
637
|
-
className: "flex flex-col w-full relative",
|
|
638
|
-
ref: wrapperRef,
|
|
639
|
-
tabIndex: disabled ? -1 : 0,
|
|
640
|
-
onBlur: handleBlur
|
|
641
|
-
},
|
|
642
|
-
heading && /* @__PURE__ */ React11.createElement("h3", { className: "text-lg font-semibold mb-1" }, heading),
|
|
643
|
-
label && /* @__PURE__ */ React11.createElement(
|
|
644
|
-
"label",
|
|
645
|
-
{
|
|
646
|
-
className: `font-medium text-sm mb-1 ${heading ? "text-[#737373] dark:text-white" : "text-black dark:text-white"}`
|
|
647
|
-
},
|
|
648
|
-
label,
|
|
649
|
-
" ",
|
|
650
|
-
isRequired && /* @__PURE__ */ React11.createElement("span", { className: "text-red-500" }, "*")
|
|
651
|
-
),
|
|
652
|
-
/* @__PURE__ */ React11.createElement(
|
|
653
|
-
"div",
|
|
654
|
-
{
|
|
655
|
-
onClick: () => !disabled && setOpen((prev) => !prev),
|
|
656
|
-
className: `flex justify-between items-center rounded-md px-3 py-2 text-sm border h-10 cursor-pointer dark:border-[#303036] dark:bg-[#18181b] dark:text-white
|
|
657
|
-
${disabled ? "bg-gray-100 text-gray-400" : "bg-white dark:bg-[#18181b] dark:text-white"}
|
|
658
|
-
${error ? "border-red-500" : "border-gray-300"}
|
|
659
|
-
`
|
|
660
|
-
},
|
|
661
|
-
/* @__PURE__ */ React11.createElement("span", { className: `${selectedOption ? "text-black dark:text-white" : "text-gray-400 dark:text-white"}` }, selectedOption ? selectedOption.label : placeholder),
|
|
662
|
-
/* @__PURE__ */ React11.createElement(
|
|
663
|
-
ChevronDown2,
|
|
664
|
-
{
|
|
665
|
-
className: `w-4 h-4 text-gray-500 transition-transform dark:text-white ${open ? "rotate-180" : ""}`
|
|
666
|
-
}
|
|
667
|
-
)
|
|
668
|
-
),
|
|
669
|
-
open && !disabled && /* @__PURE__ */ React11.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React11.createElement(Search3, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React11.createElement(
|
|
670
|
-
"input",
|
|
671
|
-
{
|
|
672
|
-
type: "text",
|
|
673
|
-
value: search,
|
|
674
|
-
onChange: (e) => setSearch(e.target.value),
|
|
675
|
-
placeholder: "Search...",
|
|
676
|
-
className: "flex-1 text-sm focus:outline-none"
|
|
677
|
-
}
|
|
678
|
-
)), /* @__PURE__ */ React11.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ React11.createElement(
|
|
679
|
-
"li",
|
|
680
|
-
{
|
|
681
|
-
key: opt.value,
|
|
682
|
-
onClick: () => handleSelect(opt.value),
|
|
683
|
-
className: `px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-[#27272a] ${value === opt.value ? "bg-gray-100 font-medium dark:bg-[#27272a] dark:text-white" : ""}`
|
|
684
|
-
},
|
|
685
|
-
opt.label
|
|
686
|
-
)) : /* @__PURE__ */ React11.createElement("li", { className: "px-3 py-2 text-sm text-gray-400 dark:text-white" }, "No results found")))
|
|
687
|
-
);
|
|
688
|
-
};
|
|
689
|
-
|
|
690
|
-
// src/sideBar/SideBar.jsx
|
|
691
|
-
var AppSideBar = ({
|
|
692
|
-
username,
|
|
693
|
-
role,
|
|
694
|
-
navItems,
|
|
695
|
-
additionalItems,
|
|
696
|
-
sideBarLogo
|
|
697
|
-
}) => {
|
|
698
|
-
var _a, _b;
|
|
699
|
-
const [authData, setAuthData] = useState3(null);
|
|
700
|
-
const [selectedCountry, setSelectedCountry] = useState3("dubai");
|
|
701
|
-
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState3(false);
|
|
702
|
-
const countryOptions = [
|
|
703
|
-
{ label: "India", value: "india" },
|
|
704
|
-
{ label: "Dubai", value: "dubai" },
|
|
705
|
-
{ label: "Singapore", value: "singapore" },
|
|
706
|
-
{ label: "Qatar", value: "qatar" }
|
|
707
|
-
];
|
|
708
|
-
const handleIconRotate = (e, index, additionalKey, parentIndex) => {
|
|
709
|
-
let dropDownIcon = e.currentTarget.children[2];
|
|
710
|
-
if (!dropDownIcon) return;
|
|
711
|
-
if (dropDownIcon.classList.contains("rotate-180")) {
|
|
712
|
-
dropDownIcon.classList.remove("rotate-180");
|
|
713
|
-
} else {
|
|
714
|
-
dropDownIcon.classList.add("transition-all");
|
|
715
|
-
dropDownIcon.classList.add("rotate-180");
|
|
716
|
-
}
|
|
717
|
-
const optionsContainer = document.getElementById(
|
|
718
|
-
`dropDownOptions-${index}${additionalKey ? `-${additionalKey}` : ""}${parentIndex ? `-${parentIndex}` : ""}`
|
|
719
|
-
);
|
|
720
|
-
if (!optionsContainer) return;
|
|
721
|
-
optionsContainer.classList.add("transition-all");
|
|
722
|
-
if (optionsContainer.classList.contains("max-h-0")) {
|
|
723
|
-
optionsContainer.classList.remove("max-h-0");
|
|
724
|
-
optionsContainer.classList.add("min-h-[50px]");
|
|
725
|
-
} else {
|
|
726
|
-
optionsContainer.classList.remove("min-h-[50px]");
|
|
727
|
-
optionsContainer.classList.add("max-h-0");
|
|
728
|
-
}
|
|
729
|
-
};
|
|
730
|
-
useEffect(() => {
|
|
731
|
-
const storedAuthData = localStorage.getItem("authData");
|
|
732
|
-
if (storedAuthData) {
|
|
733
|
-
let parseData = JSON.parse(storedAuthData);
|
|
734
|
-
setAuthData(parseData);
|
|
735
|
-
}
|
|
736
|
-
}, [localStorage.getItem("authData")]);
|
|
737
|
-
const navItemsLocal = navItems ?? navItemsConstant;
|
|
738
|
-
const additionalItemsLocal = additionalItems ?? additionalItemsConstant;
|
|
739
|
-
const sideBarLogoLocal = sideBarLogo ?? logo_white_default;
|
|
740
|
-
const toggleMobileMenu = () => {
|
|
741
|
-
setIsMobileMenuOpen(!isMobileMenuOpen);
|
|
742
|
-
};
|
|
743
|
-
const closeMobileMenu = () => {
|
|
744
|
-
setIsMobileMenuOpen(false);
|
|
745
|
-
};
|
|
746
|
-
return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { className: "fixed top-0 left-0 w-full z-50 flex items-center justify-between px-4 py-3 bg-white dark:bg-[#18181b] border-b border-gray-200 dark:border-[#303036] shadow-lg md:hidden" }, /* @__PURE__ */ React12.createElement(
|
|
747
|
-
"button",
|
|
748
|
-
{
|
|
749
|
-
onClick: toggleMobileMenu,
|
|
750
|
-
className: "p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-[#27272a] transition-colors",
|
|
751
|
-
"aria-label": "Toggle menu"
|
|
752
|
-
},
|
|
753
|
-
isMobileMenuOpen ? /* @__PURE__ */ React12.createElement(X, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" }) : /* @__PURE__ */ React12.createElement(Menu, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" })
|
|
754
|
-
), /* @__PURE__ */ React12.createElement("div", { className: "flex-1 flex justify-center" }, /* @__PURE__ */ React12.createElement(
|
|
755
|
-
"img",
|
|
756
|
-
{
|
|
757
|
-
src: sideBarLogoLocal,
|
|
758
|
-
alt: "sidebarLogo",
|
|
759
|
-
width: 108,
|
|
760
|
-
height: 40,
|
|
761
|
-
className: "object-contain"
|
|
762
|
-
}
|
|
763
|
-
)), /* @__PURE__ */ React12.createElement("div", { className: "w-10" })), isMobileMenuOpen && /* @__PURE__ */ React12.createElement(
|
|
764
|
-
"div",
|
|
765
|
-
{
|
|
766
|
-
className: "fixed inset-0 bg-black/80 bg-opacity-50 z-40 md:hidden",
|
|
767
|
-
onClick: closeMobileMenu
|
|
768
|
-
}
|
|
769
|
-
), /* @__PURE__ */ React12.createElement(
|
|
770
|
-
"div",
|
|
771
|
-
{
|
|
772
|
-
className: `fixed top-0 left-0 md:relative w-[320px] transition-all ease-in-out delay-100 bg-white dark:bg-[#18181b] border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 pt-20 md:pt-4 h-full max-h-[100vh] z-40 md:max-lg:w-[280px] ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`
|
|
773
|
-
},
|
|
774
|
-
/* @__PURE__ */ React12.createElement("div", { className: "p-2 mb-2 hidden md:block" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-center w-full h-[60px] mb-2" }, /* @__PURE__ */ React12.createElement(
|
|
775
|
-
"img",
|
|
776
|
-
{
|
|
777
|
-
src: sideBarLogoLocal,
|
|
778
|
-
alt: "sidebarLogo",
|
|
779
|
-
width: 108,
|
|
780
|
-
height: 40,
|
|
781
|
-
className: "object-contain"
|
|
782
|
-
}
|
|
783
|
-
))),
|
|
784
|
-
/* @__PURE__ */ React12.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React12.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React12.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React12.createElement(Globe2, { width: 20, height: 20 })), /* @__PURE__ */ React12.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(
|
|
785
|
-
CustomSelect,
|
|
786
|
-
{
|
|
787
|
-
heading: "",
|
|
788
|
-
label: "",
|
|
789
|
-
value: selectedCountry,
|
|
790
|
-
onChange: setSelectedCountry,
|
|
791
|
-
options: countryOptions,
|
|
792
|
-
placeholder: "Select country..."
|
|
793
|
-
}
|
|
794
|
-
))),
|
|
795
|
-
/* @__PURE__ */ React12.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ React12.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
|
|
796
|
-
return /* @__PURE__ */ React12.createElement("div", { key: index, className: "" }, /* @__PURE__ */ React12.createElement(
|
|
797
|
-
"div",
|
|
798
|
-
{
|
|
799
|
-
className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2",
|
|
800
|
-
onClick: (e) => {
|
|
801
|
-
item.onClick && item.onClick(e);
|
|
802
|
-
handleIconRotate(e, index);
|
|
803
|
-
if (!item.isDropDown) {
|
|
804
|
-
closeMobileMenu();
|
|
805
|
-
}
|
|
806
|
-
}
|
|
807
|
-
},
|
|
808
|
-
/* @__PURE__ */ React12.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React12.createElement(item.Icon, { width: 20, height: 20 })),
|
|
809
|
-
/* @__PURE__ */ React12.createElement("span", { className: "font-medium dark:text-[#f4f4f5cc]" }, item.label),
|
|
810
|
-
item.isDropDown && /* @__PURE__ */ React12.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ React12.createElement(ChevronDown3, { width: 20, height: 20 }))
|
|
811
|
-
), item.options && item.options.length > 0 && /* @__PURE__ */ React12.createElement(
|
|
812
|
-
"div",
|
|
813
|
-
{
|
|
814
|
-
className: "ml-[20px] max-h-0 overflow-hidden flex flex-col",
|
|
815
|
-
id: `dropDownOptions-${index}`
|
|
816
|
-
},
|
|
817
|
-
item.options.map((options, optionsIndex) => {
|
|
818
|
-
return /* @__PURE__ */ React12.createElement("div", { className: "" }, /* @__PURE__ */ React12.createElement(
|
|
819
|
-
"div",
|
|
820
|
-
{
|
|
821
|
-
className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-[#27272a] cursor-pointer",
|
|
822
|
-
onClick: (e) => {
|
|
823
|
-
options.onClick && options.onClick();
|
|
824
|
-
options.isDropDown && handleIconRotate(
|
|
825
|
-
e,
|
|
826
|
-
optionsIndex,
|
|
827
|
-
"subOption",
|
|
828
|
-
index
|
|
829
|
-
);
|
|
830
|
-
if (!options.isDropDown) {
|
|
831
|
-
closeMobileMenu();
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
|
-
},
|
|
835
|
-
/* @__PURE__ */ React12.createElement("div", null),
|
|
836
|
-
/* @__PURE__ */ React12.createElement("span", { className: "font-medium text-sm dark:text-[#f4f4f5cc] ml-[8px]" }, options.label),
|
|
837
|
-
options.isDropDown && /* @__PURE__ */ React12.createElement(
|
|
838
|
-
"div",
|
|
839
|
-
{
|
|
840
|
-
className: `ml-auto transition-all delay-75`
|
|
841
|
-
},
|
|
842
|
-
/* @__PURE__ */ React12.createElement(ChevronDown3, { width: 20, height: 20 })
|
|
843
|
-
)
|
|
844
|
-
), options.options && options.options.length > 1 && /* @__PURE__ */ React12.createElement(
|
|
845
|
-
"div",
|
|
846
|
-
{
|
|
847
|
-
className: "ml-[20px] max-h-0 overflow-hidden flex flex-col",
|
|
848
|
-
id: `dropDownOptions-${optionsIndex}-subOption-${index}`
|
|
849
|
-
},
|
|
850
|
-
options.options.map((subOption) => {
|
|
851
|
-
return /* @__PURE__ */ React12.createElement(
|
|
852
|
-
"div",
|
|
853
|
-
{
|
|
854
|
-
className: "p-2 rounded-lg hover:bg-accent dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] font-medium text-sm cursor-pointer",
|
|
855
|
-
onClick: (e) => {
|
|
856
|
-
subOption.onClick && subOption.onClick();
|
|
857
|
-
closeMobileMenu();
|
|
858
|
-
}
|
|
859
|
-
},
|
|
860
|
-
subOption.label
|
|
861
|
-
);
|
|
862
|
-
})
|
|
863
|
-
));
|
|
864
|
-
})
|
|
865
|
-
));
|
|
866
|
-
}))),
|
|
867
|
-
/* @__PURE__ */ React12.createElement("div", { className: "mt-auto bg-[#fafafa] dark:bg-[#18181b] sticky bottom-0 pt-2" }, /* @__PURE__ */ React12.createElement(
|
|
868
|
-
"div",
|
|
869
|
-
{
|
|
870
|
-
className: "flex items-center justify-between p-2 rounded-lg hover:bg-accent dark:hover:bg-[#27272a] cursor-pointer",
|
|
871
|
-
onClick: () => {
|
|
872
|
-
window.location.href = "/profile";
|
|
873
|
-
}
|
|
874
|
-
},
|
|
875
|
-
/* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React12.createElement("span", { className: "relative flex shrink-0 overflow-hidden dark:bg-[#27272a] rounded-full h-10 w-10" }, /* @__PURE__ */ React12.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted dark:text-white" }, ((_a = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _a.UserName) ? authData.userInfo.UserName.split("")[0] : "A")), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", { className: "font-semibold dark:text-white" }, ((_b = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _b.UserName) ? authData.userInfo.UserName : "Admin User"), /* @__PURE__ */ React12.createElement("p", { className: "text-sm dark:text-[#f4f4f5cc]" }, role))),
|
|
876
|
-
/* @__PURE__ */ React12.createElement("div", { className: "dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React12.createElement(LogOut, null))
|
|
877
|
-
))
|
|
878
|
-
));
|
|
879
|
-
};
|
|
880
|
-
|
|
881
|
-
// src/RightSheet/RightSheet.jsx
|
|
882
|
-
import React13, { useEffect as useEffect2, useState as useState4 } from "react";
|
|
883
|
-
var RightSheet = ({
|
|
884
|
-
open,
|
|
885
|
-
setOpen,
|
|
886
|
-
children,
|
|
887
|
-
callBack,
|
|
888
|
-
actionLabel = "Save",
|
|
889
|
-
onAction = () => {
|
|
890
|
-
}
|
|
891
|
-
}) => {
|
|
892
|
-
const [visible, setVisible] = useState4(open);
|
|
893
|
-
useEffect2(() => {
|
|
894
|
-
if (open) {
|
|
895
|
-
document.body.style.overflow = "hidden";
|
|
896
|
-
setVisible(true);
|
|
897
|
-
}
|
|
898
|
-
return () => {
|
|
899
|
-
document.body.style.overflow = "auto";
|
|
900
|
-
};
|
|
901
|
-
}, [open]);
|
|
902
|
-
const handleClose = () => {
|
|
903
|
-
setVisible(false);
|
|
904
|
-
setTimeout(() => {
|
|
905
|
-
setOpen(false);
|
|
906
|
-
callBack();
|
|
907
|
-
}, 200);
|
|
908
|
-
};
|
|
909
|
-
const handleAction = () => {
|
|
910
|
-
onAction();
|
|
911
|
-
handleClose();
|
|
912
|
-
};
|
|
913
|
-
if (!visible) return null;
|
|
914
|
-
return /* @__PURE__ */ React13.createElement(
|
|
915
|
-
"div",
|
|
916
|
-
{
|
|
917
|
-
className: "fixed inset-0 overflow-x-hidden bg-black/80 sheetPopIn h-full overflow-auto ",
|
|
918
|
-
onClick: handleClose
|
|
919
|
-
},
|
|
920
|
-
/* @__PURE__ */ React13.createElement(
|
|
921
|
-
"div",
|
|
922
|
-
{
|
|
923
|
-
className: `absolute flex flex-col right-0 top-0 min-h-full min-w-[100%] md:min-w-[576px]
|
|
924
|
-
${visible ? "sheetRightSlide" : "transition-all duration-200 translate-x-[100%]"} justify-between bg-[#fff] dark:bg-[#18181b] dark:text-white`,
|
|
925
|
-
onClick: (e) => e.stopPropagation()
|
|
926
|
-
},
|
|
927
|
-
/* @__PURE__ */ React13.createElement("div", { className: " min-h-full " }, children),
|
|
928
|
-
/* @__PURE__ */ React13.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t sticky bottom-0 bg-white border-[#e6e6e6] dark:border-[#303036] dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React13.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose() }, "Cancel"), /* @__PURE__ */ React13.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
|
|
929
|
-
)
|
|
930
|
-
);
|
|
931
|
-
};
|
|
932
|
-
|
|
933
|
-
// src/Table/CustomTable.jsx
|
|
934
|
-
import React14 from "react";
|
|
935
|
-
var CustomTable = ({
|
|
936
|
-
tableHeader,
|
|
937
|
-
setIsAllChecked,
|
|
938
|
-
isAllChecked,
|
|
939
|
-
children,
|
|
940
|
-
isHideCheckbox = "false"
|
|
941
|
-
}) => {
|
|
942
|
-
return /* @__PURE__ */ React14.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto flex flex-col" }, /* @__PURE__ */ React14.createElement("div", { className: "w-full relative overflow-x-auto flex-1" }, /* @__PURE__ */ React14.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-[#18181b] border-collapse" }, /* @__PURE__ */ React14.createElement("thead", { className: "border-b border-[#e5e5e5] dark:bg-[#18181b]" }, /* @__PURE__ */ React14.createElement(
|
|
943
|
-
"tr",
|
|
944
|
-
{
|
|
945
|
-
className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n data-[state=selected]:bg-muted"
|
|
946
|
-
},
|
|
947
|
-
!isHideCheckbox && /* @__PURE__ */ React14.createElement("th", { className: "px-4 py-3 text-left w-[50px]" }, /* @__PURE__ */ React14.createElement(
|
|
948
|
-
CustomCheckbox,
|
|
949
|
-
{
|
|
950
|
-
checked: isAllChecked,
|
|
951
|
-
onChange: () => {
|
|
952
|
-
setIsAllChecked(!isAllChecked);
|
|
953
|
-
}
|
|
954
|
-
}
|
|
955
|
-
)),
|
|
956
|
-
tableHeader.map((header, index) => {
|
|
957
|
-
return /* @__PURE__ */ React14.createElement(
|
|
958
|
-
"th",
|
|
959
|
-
{
|
|
960
|
-
className: `px-4 py-3 text-sm dark:bg-[#18181b] font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`,
|
|
961
|
-
key: header + index
|
|
962
|
-
},
|
|
963
|
-
header
|
|
964
|
-
);
|
|
965
|
-
})
|
|
966
|
-
)), /* @__PURE__ */ React14.createElement("tbody", null, children))));
|
|
967
|
-
};
|
|
968
|
-
|
|
969
|
-
// src/Pagination/Pagination.jsx
|
|
970
|
-
import React15, { useMemo, useState as useState5, useEffect as useEffect3 } from "react";
|
|
971
|
-
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
|
|
972
|
-
var Pagination = ({
|
|
973
|
-
data = [],
|
|
974
|
-
component: Component,
|
|
975
|
-
itemsPerPage = 6,
|
|
976
|
-
itemsPerPageOptions = [5, 10, 20, 50, 100],
|
|
977
|
-
// Controlled props (optional)
|
|
978
|
-
currentPage: controlledCurrentPage,
|
|
979
|
-
onPageChange: controlledOnPageChange,
|
|
980
|
-
onItemsPerPageChange: controlledOnItemsPerPageChange,
|
|
981
|
-
// Legacy props for backward compatibility
|
|
982
|
-
totalPages,
|
|
983
|
-
totalItems: legacyTotalItems,
|
|
984
|
-
onPageChange: legacyOnPageChange,
|
|
985
|
-
onItemsPerPageChange: legacyOnItemsPerPageChange,
|
|
986
|
-
tableHeader,
|
|
987
|
-
isHideCheckbox,
|
|
988
|
-
callback,
|
|
989
|
-
isTable = false,
|
|
990
|
-
// Component props - any additional props to pass to the component
|
|
991
|
-
componentProps = {},
|
|
992
|
-
...restProps
|
|
993
|
-
}) => {
|
|
994
|
-
const [internalCurrentPage, setInternalCurrentPage] = useState5(1);
|
|
995
|
-
const [internalItemsPerPage, setInternalItemsPerPage] = useState5(itemsPerPage);
|
|
996
|
-
const isControlled = controlledCurrentPage !== void 0;
|
|
997
|
-
const isItemsPerPageControlled = controlledOnItemsPerPageChange !== void 0;
|
|
998
|
-
const currentPage = isControlled ? controlledCurrentPage : internalCurrentPage;
|
|
999
|
-
const activeItemsPerPage = isItemsPerPageControlled ? itemsPerPage : internalItemsPerPage;
|
|
1000
|
-
const totalItems = legacyTotalItems !== void 0 ? legacyTotalItems : data.length;
|
|
1001
|
-
const calculatedTotalPages = useMemo(() => {
|
|
1002
|
-
if (totalItems > 0 && activeItemsPerPage > 0) {
|
|
1003
|
-
return Math.ceil(totalItems / activeItemsPerPage);
|
|
1004
|
-
}
|
|
1005
|
-
return 1;
|
|
1006
|
-
}, [totalItems, activeItemsPerPage]);
|
|
1007
|
-
const paginatedData = useMemo(() => {
|
|
1008
|
-
if (!data || data.length === 0) return [];
|
|
1009
|
-
const startIndex = (currentPage - 1) * activeItemsPerPage;
|
|
1010
|
-
const endIndex = startIndex + activeItemsPerPage;
|
|
1011
|
-
return data.slice(startIndex, endIndex);
|
|
1012
|
-
}, [data, currentPage, activeItemsPerPage]);
|
|
1013
|
-
useEffect3(() => {
|
|
1014
|
-
if (!isControlled && currentPage > calculatedTotalPages && calculatedTotalPages > 0) {
|
|
1015
|
-
setInternalCurrentPage(1);
|
|
1016
|
-
}
|
|
1017
|
-
}, [calculatedTotalPages, isControlled, currentPage]);
|
|
1018
|
-
const getPageNumbers = () => {
|
|
1019
|
-
const pages = [];
|
|
1020
|
-
const maxVisible = 5;
|
|
1021
|
-
let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
|
|
1022
|
-
let endPage = Math.min(calculatedTotalPages, startPage + maxVisible - 1);
|
|
1023
|
-
if (endPage - startPage < maxVisible - 1) {
|
|
1024
|
-
startPage = Math.max(1, endPage - maxVisible + 1);
|
|
1025
|
-
}
|
|
1026
|
-
for (let i = startPage; i <= endPage; i++) {
|
|
1027
|
-
pages.push(i);
|
|
1028
|
-
}
|
|
1029
|
-
return pages;
|
|
1030
|
-
};
|
|
1031
|
-
const handlePageChange = (page) => {
|
|
1032
|
-
if (page >= 1 && page <= calculatedTotalPages) {
|
|
1033
|
-
if (isControlled && controlledOnPageChange) {
|
|
1034
|
-
controlledOnPageChange(page);
|
|
1035
|
-
} else if (legacyOnPageChange) {
|
|
1036
|
-
legacyOnPageChange(page);
|
|
1037
|
-
} else {
|
|
1038
|
-
setInternalCurrentPage(page);
|
|
1039
|
-
}
|
|
1040
|
-
}
|
|
1041
|
-
};
|
|
1042
|
-
const startItem = totalItems !== void 0 ? (currentPage - 1) * activeItemsPerPage + 1 : null;
|
|
1043
|
-
const endItem = totalItems !== void 0 ? Math.min(currentPage * activeItemsPerPage, totalItems) : null;
|
|
1044
|
-
const renderContent = () => {
|
|
1045
|
-
if (Component) {
|
|
1046
|
-
if (React15.isValidElement(Component)) {
|
|
1047
|
-
const ComponentType = Component.type;
|
|
1048
|
-
const elementProps = Component.props;
|
|
1049
|
-
if (isTable) {
|
|
1050
|
-
/* @__PURE__ */ React15.createElement(
|
|
1051
|
-
CustomTable,
|
|
1052
|
-
{
|
|
1053
|
-
tableHeader,
|
|
1054
|
-
isHideCheckbox
|
|
1055
|
-
},
|
|
1056
|
-
paginatedData.map((item, index) => {
|
|
1057
|
-
return /* @__PURE__ */ React15.createElement(
|
|
1058
|
-
ComponentType,
|
|
1059
|
-
{
|
|
1060
|
-
key: item.id || item._id || index,
|
|
1061
|
-
data: item,
|
|
1062
|
-
...elementProps,
|
|
1063
|
-
...componentProps,
|
|
1064
|
-
...restProps
|
|
1065
|
-
}
|
|
1066
|
-
);
|
|
1067
|
-
})
|
|
1068
|
-
);
|
|
1069
|
-
} else {
|
|
1070
|
-
if (isTable) {
|
|
1071
|
-
/* @__PURE__ */ React15.createElement(
|
|
1072
|
-
CustomTable,
|
|
1073
|
-
{
|
|
1074
|
-
tableHeader,
|
|
1075
|
-
isHideCheckbox
|
|
1076
|
-
},
|
|
1077
|
-
paginatedData.map((item, index) => {
|
|
1078
|
-
return /* @__PURE__ */ React15.createElement(
|
|
1079
|
-
ComponentType,
|
|
1080
|
-
{
|
|
1081
|
-
key: item.id || item._id || index,
|
|
1082
|
-
data: item,
|
|
1083
|
-
...elementProps,
|
|
1084
|
-
...componentProps,
|
|
1085
|
-
...restProps
|
|
1086
|
-
}
|
|
1087
|
-
);
|
|
1088
|
-
})
|
|
1089
|
-
);
|
|
1090
|
-
}
|
|
1091
|
-
}
|
|
1092
|
-
} else {
|
|
1093
|
-
return /* @__PURE__ */ React15.createElement(
|
|
1094
|
-
CustomTable,
|
|
1095
|
-
{
|
|
1096
|
-
tableHeader,
|
|
1097
|
-
isHideCheckbox
|
|
1098
|
-
},
|
|
1099
|
-
paginatedData.map((item, index) => {
|
|
1100
|
-
return /* @__PURE__ */ React15.createElement(
|
|
1101
|
-
Component,
|
|
1102
|
-
{
|
|
1103
|
-
key: item.id || item._id || index,
|
|
1104
|
-
data: item,
|
|
1105
|
-
...componentProps,
|
|
1106
|
-
...restProps
|
|
1107
|
-
}
|
|
1108
|
-
);
|
|
1109
|
-
})
|
|
1110
|
-
);
|
|
1111
|
-
}
|
|
1112
|
-
}
|
|
1113
|
-
return null;
|
|
1114
|
-
};
|
|
1115
|
-
return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(React15.Fragment, null, renderContent()), /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10" }, totalItems !== void 0 && /* @__PURE__ */ React15.createElement("div", { className: "text-sm text-[#737373] dark:text-white" }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
|
|
1116
|
-
"button",
|
|
1117
|
-
{
|
|
1118
|
-
onClick: () => handlePageChange(1),
|
|
1119
|
-
disabled: currentPage === 1,
|
|
1120
|
-
className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
|
|
1121
|
-
title: "First page"
|
|
1122
|
-
},
|
|
1123
|
-
/* @__PURE__ */ React15.createElement(ChevronsLeft, { size: 16 })
|
|
1124
|
-
), /* @__PURE__ */ React15.createElement(
|
|
1125
|
-
"button",
|
|
1126
|
-
{
|
|
1127
|
-
onClick: () => handlePageChange(currentPage - 1),
|
|
1128
|
-
disabled: currentPage === 1,
|
|
1129
|
-
className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
|
|
1130
|
-
title: "Previous page"
|
|
1131
|
-
},
|
|
1132
|
-
/* @__PURE__ */ React15.createElement(ChevronLeft, { size: 16 })
|
|
1133
|
-
), getPageNumbers().map((pageNum) => /* @__PURE__ */ React15.createElement(
|
|
1134
|
-
"button",
|
|
1135
|
-
{
|
|
1136
|
-
key: pageNum,
|
|
1137
|
-
onClick: () => handlePageChange(pageNum),
|
|
1138
|
-
className: `flex items-center justify-center min-w-9 h-9 px-3 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === pageNum ? "bg-primary text-white border-primary dark:bg-primary" : "bg-white text-black hover:bg-gray-50 dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`
|
|
1139
|
-
},
|
|
1140
|
-
pageNum
|
|
1141
|
-
)), /* @__PURE__ */ React15.createElement(
|
|
1142
|
-
"button",
|
|
1143
|
-
{
|
|
1144
|
-
onClick: () => handlePageChange(currentPage + 1),
|
|
1145
|
-
disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
|
|
1146
|
-
className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
|
|
1147
|
-
title: "Next page"
|
|
1148
|
-
},
|
|
1149
|
-
/* @__PURE__ */ React15.createElement(ChevronRight, { size: 16 })
|
|
1150
|
-
), /* @__PURE__ */ React15.createElement(
|
|
1151
|
-
"button",
|
|
1152
|
-
{
|
|
1153
|
-
onClick: () => handlePageChange(calculatedTotalPages),
|
|
1154
|
-
disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
|
|
1155
|
-
className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
|
|
1156
|
-
title: "Last page"
|
|
1157
|
-
},
|
|
1158
|
-
/* @__PURE__ */ React15.createElement(ChevronsRight, { size: 16 })
|
|
1159
|
-
))));
|
|
1160
|
-
};
|
|
1161
|
-
export {
|
|
1162
|
-
AppSideBar,
|
|
1163
|
-
Chip,
|
|
1164
|
-
CustomAutocomplete,
|
|
1165
|
-
CustomButton,
|
|
1166
|
-
CustomCheckbox,
|
|
1167
|
-
CustomInput,
|
|
1168
|
-
CustomSearch,
|
|
1169
|
-
CustomSelect,
|
|
1170
|
-
CustomSwitch,
|
|
1171
|
-
CustomTable,
|
|
1172
|
-
CustomTextarea,
|
|
1173
|
-
CustomUpload,
|
|
1174
|
-
Pagination,
|
|
1175
|
-
ProgressBar,
|
|
1176
|
-
RightSheet
|
|
1177
|
-
};
|
|
1
|
+
// src/utils/cn.ts
|
|
2
|
+
import { clsx } from "clsx";
|
|
3
|
+
import { twMerge } from "tailwind-merge";
|
|
4
|
+
function cn(...inputs) {
|
|
5
|
+
return twMerge(clsx(inputs));
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
// src/Button.jsx
|
|
9
|
+
import React from "react";
|
|
10
|
+
var variantStyles = {
|
|
11
|
+
PRIMARY: "bg-white dark:bg-[#18181b] dark:text-white",
|
|
12
|
+
SECONDARY: "bg-primary text-white dark:text-white",
|
|
13
|
+
DEFAULT: "bg-white text-black dark:text-white",
|
|
14
|
+
DANGER: "bg-[#ef4444] text-white dark:text-white"
|
|
15
|
+
};
|
|
16
|
+
var CustomButton = ({
|
|
17
|
+
variant = "DEFAULT",
|
|
18
|
+
children,
|
|
19
|
+
className,
|
|
20
|
+
onClick,
|
|
21
|
+
disabled = false,
|
|
22
|
+
icon
|
|
23
|
+
}) => {
|
|
24
|
+
return /* @__PURE__ */ React.createElement(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
className: cn(
|
|
28
|
+
`cursor-pointer flex items-center py-2 px-3 min-h-10 justify-center border rounded-[6px] border-[#e5e5e5] dark:border-[#303036] ${variant == "DANGER" ? "bg-[#ef4444]" : "dark:bg-[#1d1d20]"} gap-2`,
|
|
29
|
+
variantStyles[variant],
|
|
30
|
+
className
|
|
31
|
+
),
|
|
32
|
+
onClick
|
|
33
|
+
},
|
|
34
|
+
icon && /* @__PURE__ */ React.createElement("div", null, icon),
|
|
35
|
+
children
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
// src/inputs/Autocomplete.jsx
|
|
40
|
+
import React2, { useState, useRef } from "react";
|
|
41
|
+
import { ChevronDown, Check, Search } from "lucide-react";
|
|
42
|
+
var CustomAutocomplete = ({
|
|
43
|
+
label,
|
|
44
|
+
value,
|
|
45
|
+
onChange,
|
|
46
|
+
options,
|
|
47
|
+
placeholder = "Search & select...",
|
|
48
|
+
isRequired = false,
|
|
49
|
+
error,
|
|
50
|
+
heading,
|
|
51
|
+
disabled = false
|
|
52
|
+
}) => {
|
|
53
|
+
const [open, setOpen] = useState(false);
|
|
54
|
+
const [search, setSearch] = useState("");
|
|
55
|
+
const wrapperRef = useRef(null);
|
|
56
|
+
const selectedOptions = options.filter((opt) => value.includes(opt.value));
|
|
57
|
+
const handleBlur = (e) => {
|
|
58
|
+
var _a;
|
|
59
|
+
if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(e.relatedTarget))) {
|
|
60
|
+
setOpen(false);
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
const filteredOptions = options.filter(
|
|
64
|
+
(opt) => opt.label.toLowerCase().includes(search.toLowerCase())
|
|
65
|
+
);
|
|
66
|
+
const toggleValue = (val) => {
|
|
67
|
+
if (value.includes(val)) {
|
|
68
|
+
onChange(value.filter((v) => v !== val));
|
|
69
|
+
} else {
|
|
70
|
+
onChange([...value, val]);
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
return /* @__PURE__ */ React2.createElement(
|
|
74
|
+
"div",
|
|
75
|
+
{
|
|
76
|
+
className: "flex flex-col w-full relative dark:bg-[#18181b] dark:text-white",
|
|
77
|
+
ref: wrapperRef,
|
|
78
|
+
tabIndex: disabled ? -1 : 0,
|
|
79
|
+
onBlur: handleBlur
|
|
80
|
+
},
|
|
81
|
+
heading && /* @__PURE__ */ React2.createElement("h3", { className: "text-lg font-semibold leading-6 mb-1" }, heading),
|
|
82
|
+
label && /* @__PURE__ */ React2.createElement(
|
|
83
|
+
"label",
|
|
84
|
+
{
|
|
85
|
+
className: `font-[500] text-sm leading-5 mb-1 ${heading ? "text-[#737373]" : "text-black dark:text-white"}`
|
|
86
|
+
},
|
|
87
|
+
label,
|
|
88
|
+
" ",
|
|
89
|
+
isRequired && /* @__PURE__ */ React2.createElement("span", { className: "text-red-500" }, "*")
|
|
90
|
+
),
|
|
91
|
+
/* @__PURE__ */ React2.createElement(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
onClick: () => {
|
|
95
|
+
if (!disabled) setOpen((prev) => !prev);
|
|
96
|
+
},
|
|
97
|
+
className: `flex justify-between items-center flex-wrap gap-1 rounded-md px-3 py-2 text-sm transition border dark:border-[#303036] h-auto min-h-10 dark:bg-[#18181b] dark:text-white
|
|
98
|
+
${disabled ? "bg-gray-100 cursor-not-allowed text-gray-400" : "cursor-text"}
|
|
99
|
+
${error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)] hover:border-gray-400 dark:bg-[#18181b] dark:text-white"}
|
|
100
|
+
`
|
|
101
|
+
},
|
|
102
|
+
/* @__PURE__ */ React2.createElement("div", { className: "flex flex-wrap gap-1 flex-1" }, selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ React2.createElement(
|
|
103
|
+
"span",
|
|
104
|
+
{
|
|
105
|
+
key: opt.value,
|
|
106
|
+
className: "bg-gray-100 border border-gray-300 px-2 dark:bg-gray-800 dark:text-white py-0.5 rounded text-xs flex items-center gap-1"
|
|
107
|
+
},
|
|
108
|
+
opt.label,
|
|
109
|
+
/* @__PURE__ */ React2.createElement(
|
|
110
|
+
"button",
|
|
111
|
+
{
|
|
112
|
+
onClick: (e) => {
|
|
113
|
+
e.stopPropagation();
|
|
114
|
+
toggleValue(opt.value);
|
|
115
|
+
},
|
|
116
|
+
className: "text-gray-500 hover:text-gray-700 dark:text-white"
|
|
117
|
+
},
|
|
118
|
+
"\u2715"
|
|
119
|
+
)
|
|
120
|
+
)) : /* @__PURE__ */ React2.createElement("span", { className: "text-gray-400" }, placeholder)),
|
|
121
|
+
/* @__PURE__ */ React2.createElement(
|
|
122
|
+
ChevronDown,
|
|
123
|
+
{
|
|
124
|
+
className: `w-4 h-4 text-gray-500 transition-transform ${open ? "rotate-180" : ""}`
|
|
125
|
+
}
|
|
126
|
+
)
|
|
127
|
+
),
|
|
128
|
+
!disabled && open && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React2.createElement(Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React2.createElement(
|
|
129
|
+
"input",
|
|
130
|
+
{
|
|
131
|
+
type: "text",
|
|
132
|
+
value: search,
|
|
133
|
+
onChange: (e) => setSearch(e.target.value),
|
|
134
|
+
placeholder: "Search...",
|
|
135
|
+
className: "flex-1 text-sm focus:outline-none"
|
|
136
|
+
}
|
|
137
|
+
)), /* @__PURE__ */ React2.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => {
|
|
138
|
+
const selected = value.includes(opt.value);
|
|
139
|
+
return /* @__PURE__ */ React2.createElement(
|
|
140
|
+
"li",
|
|
141
|
+
{
|
|
142
|
+
key: opt.value,
|
|
143
|
+
onClick: () => toggleValue(opt.value),
|
|
144
|
+
className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 ${selected ? "bg-gray-50 font-medium" : ""}`
|
|
145
|
+
},
|
|
146
|
+
/* @__PURE__ */ React2.createElement(
|
|
147
|
+
"span",
|
|
148
|
+
{
|
|
149
|
+
className: `w-4 h-4 flex items-center justify-center border rounded-sm ${selected ? "bg-blue-600 border-blue-600 text-white" : "border-gray-300"}`
|
|
150
|
+
},
|
|
151
|
+
selected && /* @__PURE__ */ React2.createElement(Check, { size: 14 })
|
|
152
|
+
),
|
|
153
|
+
opt.label
|
|
154
|
+
);
|
|
155
|
+
}) : /* @__PURE__ */ React2.createElement("li", { className: "px-3 py-2 text-sm text-gray-400" }, "No results found")))
|
|
156
|
+
);
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
// src/inputs/Checkbox.jsx
|
|
160
|
+
import React3 from "react";
|
|
161
|
+
var CustomCheckbox = ({ onChange, checked }) => {
|
|
162
|
+
const handleChange = (e) => {
|
|
163
|
+
onChange(e.target.checked);
|
|
164
|
+
};
|
|
165
|
+
return /* @__PURE__ */ React3.createElement("label", { className: "inline-flex items-center cursor-pointer select-none" }, /* @__PURE__ */ React3.createElement(
|
|
166
|
+
"input",
|
|
167
|
+
{
|
|
168
|
+
type: "checkbox",
|
|
169
|
+
checked,
|
|
170
|
+
onChange: handleChange,
|
|
171
|
+
className: "peer hidden"
|
|
172
|
+
}
|
|
173
|
+
), /* @__PURE__ */ React3.createElement(
|
|
174
|
+
"span",
|
|
175
|
+
{
|
|
176
|
+
className: "\r\n w-4 h-4 flex items-center justify-center border-2 border-gray-400 rounded \r\n peer-checked:bg-primary peer-checked:border-primary\r\n transition-colors\r\n "
|
|
177
|
+
},
|
|
178
|
+
checked && /* @__PURE__ */ React3.createElement(
|
|
179
|
+
"svg",
|
|
180
|
+
{
|
|
181
|
+
className: "w-4 h-4 text-white",
|
|
182
|
+
fill: "none",
|
|
183
|
+
stroke: "currentColor",
|
|
184
|
+
strokeWidth: "3",
|
|
185
|
+
viewBox: "0 0 24 24"
|
|
186
|
+
},
|
|
187
|
+
/* @__PURE__ */ React3.createElement("path", { d: "M5 13l4 4L19 7" })
|
|
188
|
+
)
|
|
189
|
+
));
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
// src/inputs/Chip.jsx
|
|
193
|
+
import React4 from "react";
|
|
194
|
+
var VARIANTS = {
|
|
195
|
+
PRIMARY: "bg-gray-100 text-black dark:bg-gray-800 dark:text-white",
|
|
196
|
+
GREEN: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100",
|
|
197
|
+
RED: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100",
|
|
198
|
+
YELLOW: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"
|
|
199
|
+
};
|
|
200
|
+
var Chip = ({ label, variant }) => {
|
|
201
|
+
return /* @__PURE__ */ React4.createElement(
|
|
202
|
+
"div",
|
|
203
|
+
{
|
|
204
|
+
className: `inline-flex text-[12px] items-center px-3 py-1 rounded-full ${VARIANTS[variant] || VARIANTS.PRIMARY} text-sm font-[600]`
|
|
205
|
+
},
|
|
206
|
+
label
|
|
207
|
+
);
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
// src/inputs/CustomSwitch.jsx
|
|
211
|
+
import React5 from "react";
|
|
212
|
+
var CustomSwitch = ({ checked, onChange, label, description }) => {
|
|
213
|
+
return /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement(
|
|
214
|
+
"button",
|
|
215
|
+
{
|
|
216
|
+
type: "button",
|
|
217
|
+
role: "switch",
|
|
218
|
+
"aria-checked": checked,
|
|
219
|
+
onClick: () => onChange(!checked),
|
|
220
|
+
className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors ${checked ? "bg-black" : "bg-gray-300"}`
|
|
221
|
+
},
|
|
222
|
+
/* @__PURE__ */ React5.createElement(
|
|
223
|
+
"span",
|
|
224
|
+
{
|
|
225
|
+
className: `inline-block h-4 w-4 transform rounded-full bg-white shadow transition ${checked ? "translate-x-6" : "translate-x-1"}`
|
|
226
|
+
}
|
|
227
|
+
)
|
|
228
|
+
), /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col" }, label && /* @__PURE__ */ React5.createElement("h3", { className: "font-[500] text-sm text-black mb-2" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "font-[500] text-sm text-[#737373]" }, description)));
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
// src/inputs/Input.jsx
|
|
232
|
+
import React6 from "react";
|
|
233
|
+
var CustomInput = ({
|
|
234
|
+
label,
|
|
235
|
+
isRequired,
|
|
236
|
+
value,
|
|
237
|
+
onChange,
|
|
238
|
+
placeholder,
|
|
239
|
+
disabled = false,
|
|
240
|
+
error,
|
|
241
|
+
heading
|
|
242
|
+
}) => {
|
|
243
|
+
return /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React6.createElement(
|
|
244
|
+
"label",
|
|
245
|
+
{
|
|
246
|
+
className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"} dark:text-white`
|
|
247
|
+
},
|
|
248
|
+
label,
|
|
249
|
+
" ",
|
|
250
|
+
isRequired && /* @__PURE__ */ React6.createElement("span", { className: "text-red-500" }, "*")
|
|
251
|
+
), /* @__PURE__ */ React6.createElement(
|
|
252
|
+
"input",
|
|
253
|
+
{
|
|
254
|
+
className: `border border-gray-200 rounded-md h-10 px-4 py-2 w-full text-[14px]
|
|
255
|
+
focus:outline-2 outline-black dark:outline-white outline-offset-2
|
|
256
|
+
dark:bg-transparent dark:text-white dark:border-[#303036]
|
|
257
|
+
${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500 border-gray-300" : error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)]"}
|
|
258
|
+
`,
|
|
259
|
+
value,
|
|
260
|
+
onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
|
|
261
|
+
placeholder,
|
|
262
|
+
disabled,
|
|
263
|
+
readOnly: disabled
|
|
264
|
+
}
|
|
265
|
+
));
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
// src/inputs/ProgressBar.jsx
|
|
269
|
+
import React7 from "react";
|
|
270
|
+
var ProgressBar = ({ step, totalSteps }) => {
|
|
271
|
+
const progress = step / totalSteps * 100;
|
|
272
|
+
return /* @__PURE__ */ React7.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React7.createElement("p", { className: "text-gray-600 text-sm mb-2" }, "Step ", step, " of ", totalSteps), /* @__PURE__ */ React7.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React7.createElement(
|
|
273
|
+
"div",
|
|
274
|
+
{
|
|
275
|
+
className: "bg-black h-2 rounded-full transition-all duration-300",
|
|
276
|
+
style: { width: `${progress}%` }
|
|
277
|
+
}
|
|
278
|
+
)));
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
// src/inputs/Search.jsx
|
|
282
|
+
import React8 from "react";
|
|
283
|
+
import { Search as Search2 } from "lucide-react";
|
|
284
|
+
var CustomSearch = ({
|
|
285
|
+
value,
|
|
286
|
+
onChange,
|
|
287
|
+
placeholder = "Search Markets..."
|
|
288
|
+
}) => {
|
|
289
|
+
return /* @__PURE__ */ React8.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] dark:border-[#303036] \r\n rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2 dark:text-white" }, /* @__PURE__ */ React8.createElement(Search2, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ React8.createElement(
|
|
290
|
+
"input",
|
|
291
|
+
{
|
|
292
|
+
type: "text",
|
|
293
|
+
value,
|
|
294
|
+
onChange,
|
|
295
|
+
placeholder,
|
|
296
|
+
className: "bg-transparent w-full h-full focus:outline-none"
|
|
297
|
+
}
|
|
298
|
+
));
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
// src/inputs/TextArea.jsx
|
|
302
|
+
import React9 from "react";
|
|
303
|
+
var CustomTextarea = ({
|
|
304
|
+
label,
|
|
305
|
+
isRequired,
|
|
306
|
+
value,
|
|
307
|
+
onChange,
|
|
308
|
+
placeholder,
|
|
309
|
+
disabled = false,
|
|
310
|
+
error,
|
|
311
|
+
heading,
|
|
312
|
+
rows = 4
|
|
313
|
+
}) => {
|
|
314
|
+
return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React9.createElement(
|
|
315
|
+
"label",
|
|
316
|
+
{
|
|
317
|
+
className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"}`
|
|
318
|
+
},
|
|
319
|
+
label,
|
|
320
|
+
" ",
|
|
321
|
+
isRequired && /* @__PURE__ */ React9.createElement("span", { className: "text-red-500" }, "*")
|
|
322
|
+
), /* @__PURE__ */ React9.createElement(
|
|
323
|
+
"textarea",
|
|
324
|
+
{
|
|
325
|
+
rows,
|
|
326
|
+
className: `border rounded-md px-4 py-2 w-full text-[14px]
|
|
327
|
+
focus:outline-2 focus:outline-black focus:outline-offset-2
|
|
328
|
+
focus:ring-0 focus:shadow-none focus:border-black
|
|
329
|
+
${disabled ? "bg-gray-100 text-gray-500 border-gray-300" : error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)]"}
|
|
330
|
+
`,
|
|
331
|
+
value,
|
|
332
|
+
onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
|
|
333
|
+
placeholder,
|
|
334
|
+
disabled,
|
|
335
|
+
readOnly: disabled
|
|
336
|
+
}
|
|
337
|
+
));
|
|
338
|
+
};
|
|
339
|
+
|
|
340
|
+
// src/inputs/Upload.jsx
|
|
341
|
+
import React10, { useRef as useRef2 } from "react";
|
|
342
|
+
import { Upload } from "lucide-react";
|
|
343
|
+
var CustomUpload = ({
|
|
344
|
+
label = "Supporting documents",
|
|
345
|
+
description = "Drop items here or Browse Files",
|
|
346
|
+
accept = ".pdf,.jpg,.jpeg,.png",
|
|
347
|
+
maxSizeMB = 5,
|
|
348
|
+
onChange,
|
|
349
|
+
error,
|
|
350
|
+
value
|
|
351
|
+
}) => {
|
|
352
|
+
const inputRef = useRef2(null);
|
|
353
|
+
const handleFileSelect = (files) => {
|
|
354
|
+
if (!files || files.length === 0) return;
|
|
355
|
+
const selectedFile = files[0];
|
|
356
|
+
if (selectedFile.size > maxSizeMB * 1024 * 1024) {
|
|
357
|
+
alert(`File size must be less than ${maxSizeMB} MB`);
|
|
358
|
+
return;
|
|
359
|
+
}
|
|
360
|
+
onChange == null ? void 0 : onChange(selectedFile);
|
|
361
|
+
};
|
|
362
|
+
return /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-2 w-full" }, label && /* @__PURE__ */ React10.createElement("label", { className: "text-sm font-medium" }, label), /* @__PURE__ */ React10.createElement(
|
|
363
|
+
"div",
|
|
364
|
+
{
|
|
365
|
+
className: `border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center cursor-pointer transition
|
|
366
|
+
${error ? "border-red-500 bg-red-50" : "border-gray-300 hover:border-gray-400 bg-gray-50"}`,
|
|
367
|
+
onClick: () => {
|
|
368
|
+
var _a;
|
|
369
|
+
return (_a = inputRef.current) == null ? void 0 : _a.click();
|
|
370
|
+
},
|
|
371
|
+
onDragOver: (e) => e.preventDefault(),
|
|
372
|
+
onDrop: (e) => {
|
|
373
|
+
e.preventDefault();
|
|
374
|
+
handleFileSelect(e.dataTransfer.files);
|
|
375
|
+
}
|
|
376
|
+
},
|
|
377
|
+
/* @__PURE__ */ React10.createElement(Upload, { className: "w-6 h-6 text-gray-500 mb-2" }),
|
|
378
|
+
/* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-700" }, description),
|
|
379
|
+
/* @__PURE__ */ React10.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "File Supported: PDF/JPG/PNG, up to ", maxSizeMB, " MB"),
|
|
380
|
+
/* @__PURE__ */ React10.createElement(
|
|
381
|
+
"input",
|
|
382
|
+
{
|
|
383
|
+
ref: inputRef,
|
|
384
|
+
type: "file",
|
|
385
|
+
accept,
|
|
386
|
+
className: "hidden",
|
|
387
|
+
onChange: (e) => handleFileSelect(e.target.files)
|
|
388
|
+
}
|
|
389
|
+
)
|
|
390
|
+
), value && /* @__PURE__ */ React10.createElement("span", { className: "text-sm truncate text-gray-500" }, "Selected: ", value.name), error && /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-red-500" }, error));
|
|
391
|
+
};
|
|
392
|
+
|
|
393
|
+
// src/sideBar/SideBar.jsx
|
|
394
|
+
import { ChevronDown as ChevronDown3, Globe as Globe2, LogOut, Menu, X } from "lucide-react";
|
|
395
|
+
import React12, { useEffect, useState as useState3 } from "react";
|
|
396
|
+
|
|
397
|
+
// ConstantUI.js
|
|
398
|
+
import {
|
|
399
|
+
Home,
|
|
400
|
+
BaggageClaim,
|
|
401
|
+
Users,
|
|
402
|
+
Banknote,
|
|
403
|
+
Globe,
|
|
404
|
+
TrendingUp,
|
|
405
|
+
FileText,
|
|
406
|
+
FileKey2,
|
|
407
|
+
LifeBuoy,
|
|
408
|
+
Cog,
|
|
409
|
+
Building,
|
|
410
|
+
Handshake,
|
|
411
|
+
DollarSign
|
|
412
|
+
} from "lucide-react";
|
|
413
|
+
var encodedAuthData = localStorage.getItem("encodedAuthData");
|
|
414
|
+
var navItemsConstant = [
|
|
415
|
+
{
|
|
416
|
+
Icon: Home,
|
|
417
|
+
label: "Home",
|
|
418
|
+
onClick: () => {
|
|
419
|
+
window.location.href = "/";
|
|
420
|
+
},
|
|
421
|
+
isDropDown: false
|
|
422
|
+
},
|
|
423
|
+
{
|
|
424
|
+
Icon: Handshake,
|
|
425
|
+
label: "Supplier Ecosystem",
|
|
426
|
+
onClick: () => {
|
|
427
|
+
},
|
|
428
|
+
isDropDown: true,
|
|
429
|
+
options: [
|
|
430
|
+
{
|
|
431
|
+
label: "Suppliers",
|
|
432
|
+
onClick: () => {
|
|
433
|
+
window.location.href = "/supplier/";
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
]
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
Icon: Building,
|
|
440
|
+
label: "Consumer Ecosystem",
|
|
441
|
+
onClick: () => {
|
|
442
|
+
},
|
|
443
|
+
options: [
|
|
444
|
+
{
|
|
445
|
+
label: "Corporate",
|
|
446
|
+
onClick: () => {
|
|
447
|
+
window.location.href = "/corporate/";
|
|
448
|
+
}
|
|
449
|
+
},
|
|
450
|
+
{
|
|
451
|
+
label: "Trips",
|
|
452
|
+
onClick: () => {
|
|
453
|
+
window.location.href = "/trips/";
|
|
454
|
+
}
|
|
455
|
+
},
|
|
456
|
+
{
|
|
457
|
+
label: "Reports",
|
|
458
|
+
onClick: () => {
|
|
459
|
+
window.open("https://viz.jett.travel", "_blank");
|
|
460
|
+
}
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
label: "Tags",
|
|
464
|
+
onClick: () => {
|
|
465
|
+
window.location.href = "/orgselector/?path=tag";
|
|
466
|
+
}
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
label: "Users",
|
|
470
|
+
onClick: () => {
|
|
471
|
+
window.location.href = "/orgselector/?path=users";
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
],
|
|
475
|
+
isDropDown: true
|
|
476
|
+
},
|
|
477
|
+
{
|
|
478
|
+
Icon: Banknote,
|
|
479
|
+
label: "Finance",
|
|
480
|
+
onClick: () => {
|
|
481
|
+
},
|
|
482
|
+
isDropDown: true,
|
|
483
|
+
options: [
|
|
484
|
+
{
|
|
485
|
+
label: "Invoices",
|
|
486
|
+
onClick: () => {
|
|
487
|
+
window.location.href = "/finance/invoices/";
|
|
488
|
+
}
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
label: "Booking History",
|
|
492
|
+
onClick: () => {
|
|
493
|
+
window.location.href = "/finance/bookingHistory/";
|
|
494
|
+
}
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
label: "Payments Ledger",
|
|
498
|
+
onClick: () => {
|
|
499
|
+
window.location.href = "/finance/paymentsLedger/";
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
]
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
Icon: DollarSign,
|
|
506
|
+
label: "Revenue Management",
|
|
507
|
+
onClick: () => {
|
|
508
|
+
},
|
|
509
|
+
isDropDown: true,
|
|
510
|
+
options: [
|
|
511
|
+
{
|
|
512
|
+
label: "Pricing Policy",
|
|
513
|
+
onClick: () => {
|
|
514
|
+
window.location.href = "/orgselector/?path=pricing-policy";
|
|
515
|
+
}
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
label: "Offers",
|
|
519
|
+
onClick: () => {
|
|
520
|
+
window.location.href = "/orgselector/?path=offer";
|
|
521
|
+
}
|
|
522
|
+
},
|
|
523
|
+
{
|
|
524
|
+
label: "Vouchers",
|
|
525
|
+
onClick: () => {
|
|
526
|
+
window.location.href = "/orgselector/?path=voucher";
|
|
527
|
+
}
|
|
528
|
+
},
|
|
529
|
+
{
|
|
530
|
+
label: "Supplier Deals",
|
|
531
|
+
onClick: () => {
|
|
532
|
+
window.location.href = "/supplierdeals/";
|
|
533
|
+
}
|
|
534
|
+
},
|
|
535
|
+
{
|
|
536
|
+
label: "Subscription Plans",
|
|
537
|
+
onClick: () => {
|
|
538
|
+
window.location.href = "/subscription/";
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
]
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
Icon: Cog,
|
|
545
|
+
label: "Settings",
|
|
546
|
+
onClick: () => {
|
|
547
|
+
},
|
|
548
|
+
isDropDown: true,
|
|
549
|
+
options: [
|
|
550
|
+
{
|
|
551
|
+
label: "Admin user Management",
|
|
552
|
+
isDropDown: true,
|
|
553
|
+
onClick: () => {
|
|
554
|
+
},
|
|
555
|
+
options: [
|
|
556
|
+
{
|
|
557
|
+
label: "Admin Users",
|
|
558
|
+
onClick: () => {
|
|
559
|
+
window.location.href = "/users/";
|
|
560
|
+
}
|
|
561
|
+
},
|
|
562
|
+
{ label: "Admin User Attributes", onClick: () => {
|
|
563
|
+
} }
|
|
564
|
+
]
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
label: "TMC Markets",
|
|
568
|
+
onClick: () => {
|
|
569
|
+
window.location.href = "/market/";
|
|
570
|
+
}
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
label: "Report Configurations",
|
|
574
|
+
onClick: () => {
|
|
575
|
+
window.location.href = "/reports/";
|
|
576
|
+
}
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
label: "Whitelabelling",
|
|
580
|
+
onClick: () => {
|
|
581
|
+
window.location.href = "/whitelabel/";
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
]
|
|
585
|
+
}
|
|
586
|
+
];
|
|
587
|
+
var additionalItemsConstant = [
|
|
588
|
+
{
|
|
589
|
+
Icon: LifeBuoy,
|
|
590
|
+
label: "Help",
|
|
591
|
+
onClick: () => {
|
|
592
|
+
window.location.href = "/help";
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
];
|
|
596
|
+
|
|
597
|
+
// src/assests/logo/logo-white.svg
|
|
598
|
+
var logo_white_default = "./logo-white-RYMEJOWI.svg";
|
|
599
|
+
|
|
600
|
+
// src/sideBar/SideBar.jsx
|
|
601
|
+
import Cookies from "js-cookie";
|
|
602
|
+
|
|
603
|
+
// src/inputs/CustomSelect.jsx
|
|
604
|
+
import React11, { useState as useState2, useRef as useRef3 } from "react";
|
|
605
|
+
import { ChevronDown as ChevronDown2, Search as Search3 } from "lucide-react";
|
|
606
|
+
var CustomSelect = ({
|
|
607
|
+
label,
|
|
608
|
+
value,
|
|
609
|
+
onChange,
|
|
610
|
+
options,
|
|
611
|
+
placeholder = "Select...",
|
|
612
|
+
isRequired = false,
|
|
613
|
+
error,
|
|
614
|
+
heading,
|
|
615
|
+
disabled = false
|
|
616
|
+
}) => {
|
|
617
|
+
const [open, setOpen] = useState2(false);
|
|
618
|
+
const [search, setSearch] = useState2("");
|
|
619
|
+
const wrapperRef = useRef3(null);
|
|
620
|
+
const handleBlur = (e) => {
|
|
621
|
+
var _a;
|
|
622
|
+
if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(e.relatedTarget))) {
|
|
623
|
+
setOpen(false);
|
|
624
|
+
}
|
|
625
|
+
};
|
|
626
|
+
const filteredOptions = options.filter(
|
|
627
|
+
(opt) => opt.label.toLowerCase().includes(search.toLowerCase())
|
|
628
|
+
);
|
|
629
|
+
const handleSelect = (val) => {
|
|
630
|
+
onChange(val);
|
|
631
|
+
setOpen(false);
|
|
632
|
+
};
|
|
633
|
+
const selectedOption = options.find((opt) => opt.value === value);
|
|
634
|
+
return /* @__PURE__ */ React11.createElement(
|
|
635
|
+
"div",
|
|
636
|
+
{
|
|
637
|
+
className: "flex flex-col w-full relative",
|
|
638
|
+
ref: wrapperRef,
|
|
639
|
+
tabIndex: disabled ? -1 : 0,
|
|
640
|
+
onBlur: handleBlur
|
|
641
|
+
},
|
|
642
|
+
heading && /* @__PURE__ */ React11.createElement("h3", { className: "text-lg font-semibold mb-1" }, heading),
|
|
643
|
+
label && /* @__PURE__ */ React11.createElement(
|
|
644
|
+
"label",
|
|
645
|
+
{
|
|
646
|
+
className: `font-medium text-sm mb-1 ${heading ? "text-[#737373] dark:text-white" : "text-black dark:text-white"}`
|
|
647
|
+
},
|
|
648
|
+
label,
|
|
649
|
+
" ",
|
|
650
|
+
isRequired && /* @__PURE__ */ React11.createElement("span", { className: "text-red-500" }, "*")
|
|
651
|
+
),
|
|
652
|
+
/* @__PURE__ */ React11.createElement(
|
|
653
|
+
"div",
|
|
654
|
+
{
|
|
655
|
+
onClick: () => !disabled && setOpen((prev) => !prev),
|
|
656
|
+
className: `flex justify-between items-center rounded-md px-3 py-2 text-sm border h-10 cursor-pointer dark:border-[#303036] dark:bg-[#18181b] dark:text-white
|
|
657
|
+
${disabled ? "bg-gray-100 text-gray-400" : "bg-white dark:bg-[#18181b] dark:text-white"}
|
|
658
|
+
${error ? "border-red-500" : "border-gray-300"}
|
|
659
|
+
`
|
|
660
|
+
},
|
|
661
|
+
/* @__PURE__ */ React11.createElement("span", { className: `${selectedOption ? "text-black dark:text-white" : "text-gray-400 dark:text-white"}` }, selectedOption ? selectedOption.label : placeholder),
|
|
662
|
+
/* @__PURE__ */ React11.createElement(
|
|
663
|
+
ChevronDown2,
|
|
664
|
+
{
|
|
665
|
+
className: `w-4 h-4 text-gray-500 transition-transform dark:text-white ${open ? "rotate-180" : ""}`
|
|
666
|
+
}
|
|
667
|
+
)
|
|
668
|
+
),
|
|
669
|
+
open && !disabled && /* @__PURE__ */ React11.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React11.createElement(Search3, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React11.createElement(
|
|
670
|
+
"input",
|
|
671
|
+
{
|
|
672
|
+
type: "text",
|
|
673
|
+
value: search,
|
|
674
|
+
onChange: (e) => setSearch(e.target.value),
|
|
675
|
+
placeholder: "Search...",
|
|
676
|
+
className: "flex-1 text-sm focus:outline-none"
|
|
677
|
+
}
|
|
678
|
+
)), /* @__PURE__ */ React11.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ React11.createElement(
|
|
679
|
+
"li",
|
|
680
|
+
{
|
|
681
|
+
key: opt.value,
|
|
682
|
+
onClick: () => handleSelect(opt.value),
|
|
683
|
+
className: `px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-[#27272a] ${value === opt.value ? "bg-gray-100 font-medium dark:bg-[#27272a] dark:text-white" : ""}`
|
|
684
|
+
},
|
|
685
|
+
opt.label
|
|
686
|
+
)) : /* @__PURE__ */ React11.createElement("li", { className: "px-3 py-2 text-sm text-gray-400 dark:text-white" }, "No results found")))
|
|
687
|
+
);
|
|
688
|
+
};
|
|
689
|
+
|
|
690
|
+
// src/sideBar/SideBar.jsx
|
|
691
|
+
var AppSideBar = ({
|
|
692
|
+
username,
|
|
693
|
+
role,
|
|
694
|
+
navItems,
|
|
695
|
+
additionalItems,
|
|
696
|
+
sideBarLogo
|
|
697
|
+
}) => {
|
|
698
|
+
var _a, _b;
|
|
699
|
+
const [authData, setAuthData] = useState3(null);
|
|
700
|
+
const [selectedCountry, setSelectedCountry] = useState3("dubai");
|
|
701
|
+
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState3(false);
|
|
702
|
+
const countryOptions = [
|
|
703
|
+
{ label: "India", value: "india" },
|
|
704
|
+
{ label: "Dubai", value: "dubai" },
|
|
705
|
+
{ label: "Singapore", value: "singapore" },
|
|
706
|
+
{ label: "Qatar", value: "qatar" }
|
|
707
|
+
];
|
|
708
|
+
const handleIconRotate = (e, index, additionalKey, parentIndex) => {
|
|
709
|
+
let dropDownIcon = e.currentTarget.children[2];
|
|
710
|
+
if (!dropDownIcon) return;
|
|
711
|
+
if (dropDownIcon.classList.contains("rotate-180")) {
|
|
712
|
+
dropDownIcon.classList.remove("rotate-180");
|
|
713
|
+
} else {
|
|
714
|
+
dropDownIcon.classList.add("transition-all");
|
|
715
|
+
dropDownIcon.classList.add("rotate-180");
|
|
716
|
+
}
|
|
717
|
+
const optionsContainer = document.getElementById(
|
|
718
|
+
`dropDownOptions-${index}${additionalKey ? `-${additionalKey}` : ""}${parentIndex ? `-${parentIndex}` : ""}`
|
|
719
|
+
);
|
|
720
|
+
if (!optionsContainer) return;
|
|
721
|
+
optionsContainer.classList.add("transition-all");
|
|
722
|
+
if (optionsContainer.classList.contains("max-h-0")) {
|
|
723
|
+
optionsContainer.classList.remove("max-h-0");
|
|
724
|
+
optionsContainer.classList.add("min-h-[50px]");
|
|
725
|
+
} else {
|
|
726
|
+
optionsContainer.classList.remove("min-h-[50px]");
|
|
727
|
+
optionsContainer.classList.add("max-h-0");
|
|
728
|
+
}
|
|
729
|
+
};
|
|
730
|
+
useEffect(() => {
|
|
731
|
+
const storedAuthData = localStorage.getItem("authData");
|
|
732
|
+
if (storedAuthData) {
|
|
733
|
+
let parseData = JSON.parse(storedAuthData);
|
|
734
|
+
setAuthData(parseData);
|
|
735
|
+
}
|
|
736
|
+
}, [localStorage.getItem("authData")]);
|
|
737
|
+
const navItemsLocal = navItems ?? navItemsConstant;
|
|
738
|
+
const additionalItemsLocal = additionalItems ?? additionalItemsConstant;
|
|
739
|
+
const sideBarLogoLocal = sideBarLogo ?? logo_white_default;
|
|
740
|
+
const toggleMobileMenu = () => {
|
|
741
|
+
setIsMobileMenuOpen(!isMobileMenuOpen);
|
|
742
|
+
};
|
|
743
|
+
const closeMobileMenu = () => {
|
|
744
|
+
setIsMobileMenuOpen(false);
|
|
745
|
+
};
|
|
746
|
+
return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { className: "fixed top-0 left-0 w-full z-50 flex items-center justify-between px-4 py-3 bg-white dark:bg-[#18181b] border-b border-gray-200 dark:border-[#303036] shadow-lg md:hidden" }, /* @__PURE__ */ React12.createElement(
|
|
747
|
+
"button",
|
|
748
|
+
{
|
|
749
|
+
onClick: toggleMobileMenu,
|
|
750
|
+
className: "p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-[#27272a] transition-colors",
|
|
751
|
+
"aria-label": "Toggle menu"
|
|
752
|
+
},
|
|
753
|
+
isMobileMenuOpen ? /* @__PURE__ */ React12.createElement(X, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" }) : /* @__PURE__ */ React12.createElement(Menu, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" })
|
|
754
|
+
), /* @__PURE__ */ React12.createElement("div", { className: "flex-1 flex justify-center" }, /* @__PURE__ */ React12.createElement(
|
|
755
|
+
"img",
|
|
756
|
+
{
|
|
757
|
+
src: sideBarLogoLocal,
|
|
758
|
+
alt: "sidebarLogo",
|
|
759
|
+
width: 108,
|
|
760
|
+
height: 40,
|
|
761
|
+
className: "object-contain"
|
|
762
|
+
}
|
|
763
|
+
)), /* @__PURE__ */ React12.createElement("div", { className: "w-10" })), isMobileMenuOpen && /* @__PURE__ */ React12.createElement(
|
|
764
|
+
"div",
|
|
765
|
+
{
|
|
766
|
+
className: "fixed inset-0 bg-black/80 bg-opacity-50 z-40 md:hidden",
|
|
767
|
+
onClick: closeMobileMenu
|
|
768
|
+
}
|
|
769
|
+
), /* @__PURE__ */ React12.createElement(
|
|
770
|
+
"div",
|
|
771
|
+
{
|
|
772
|
+
className: `fixed top-0 left-0 md:relative w-[320px] transition-all ease-in-out delay-100 bg-white dark:bg-[#18181b] border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 pt-20 md:pt-4 h-full max-h-[100vh] xs:max-md:z-40 md:max-lg:w-[280px] ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`
|
|
773
|
+
},
|
|
774
|
+
/* @__PURE__ */ React12.createElement("div", { className: "p-2 mb-2 hidden md:block" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-center w-full h-[60px] mb-2" }, /* @__PURE__ */ React12.createElement(
|
|
775
|
+
"img",
|
|
776
|
+
{
|
|
777
|
+
src: sideBarLogoLocal,
|
|
778
|
+
alt: "sidebarLogo",
|
|
779
|
+
width: 108,
|
|
780
|
+
height: 40,
|
|
781
|
+
className: "object-contain"
|
|
782
|
+
}
|
|
783
|
+
))),
|
|
784
|
+
/* @__PURE__ */ React12.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React12.createElement("div", { className: "flex ml-[20px] items-center gap-2 mb-2 dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React12.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React12.createElement(Globe2, { width: 20, height: 20 })), /* @__PURE__ */ React12.createElement("h3", { className: "text-[#3f3f46cc] dark:text-[#f4f4f5cc] font-medium" }, "Data Centers")), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(
|
|
785
|
+
CustomSelect,
|
|
786
|
+
{
|
|
787
|
+
heading: "",
|
|
788
|
+
label: "",
|
|
789
|
+
value: selectedCountry,
|
|
790
|
+
onChange: setSelectedCountry,
|
|
791
|
+
options: countryOptions,
|
|
792
|
+
placeholder: "Select country..."
|
|
793
|
+
}
|
|
794
|
+
))),
|
|
795
|
+
/* @__PURE__ */ React12.createElement("div", { className: "overflow-y-auto" }, /* @__PURE__ */ React12.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
|
|
796
|
+
return /* @__PURE__ */ React12.createElement("div", { key: index, className: "" }, /* @__PURE__ */ React12.createElement(
|
|
797
|
+
"div",
|
|
798
|
+
{
|
|
799
|
+
className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2",
|
|
800
|
+
onClick: (e) => {
|
|
801
|
+
item.onClick && item.onClick(e);
|
|
802
|
+
handleIconRotate(e, index);
|
|
803
|
+
if (!item.isDropDown) {
|
|
804
|
+
closeMobileMenu();
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
},
|
|
808
|
+
/* @__PURE__ */ React12.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React12.createElement(item.Icon, { width: 20, height: 20 })),
|
|
809
|
+
/* @__PURE__ */ React12.createElement("span", { className: "font-medium dark:text-[#f4f4f5cc]" }, item.label),
|
|
810
|
+
item.isDropDown && /* @__PURE__ */ React12.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ React12.createElement(ChevronDown3, { width: 20, height: 20 }))
|
|
811
|
+
), item.options && item.options.length > 0 && /* @__PURE__ */ React12.createElement(
|
|
812
|
+
"div",
|
|
813
|
+
{
|
|
814
|
+
className: "ml-[20px] max-h-0 overflow-hidden flex flex-col",
|
|
815
|
+
id: `dropDownOptions-${index}`
|
|
816
|
+
},
|
|
817
|
+
item.options.map((options, optionsIndex) => {
|
|
818
|
+
return /* @__PURE__ */ React12.createElement("div", { className: "" }, /* @__PURE__ */ React12.createElement(
|
|
819
|
+
"div",
|
|
820
|
+
{
|
|
821
|
+
className: "flex items-center gap-3 p-2 hover:bg-accent dark:hover:bg-[#27272a] cursor-pointer",
|
|
822
|
+
onClick: (e) => {
|
|
823
|
+
options.onClick && options.onClick();
|
|
824
|
+
options.isDropDown && handleIconRotate(
|
|
825
|
+
e,
|
|
826
|
+
optionsIndex,
|
|
827
|
+
"subOption",
|
|
828
|
+
index
|
|
829
|
+
);
|
|
830
|
+
if (!options.isDropDown) {
|
|
831
|
+
closeMobileMenu();
|
|
832
|
+
}
|
|
833
|
+
}
|
|
834
|
+
},
|
|
835
|
+
/* @__PURE__ */ React12.createElement("div", null),
|
|
836
|
+
/* @__PURE__ */ React12.createElement("span", { className: "font-medium text-sm dark:text-[#f4f4f5cc] ml-[8px]" }, options.label),
|
|
837
|
+
options.isDropDown && /* @__PURE__ */ React12.createElement(
|
|
838
|
+
"div",
|
|
839
|
+
{
|
|
840
|
+
className: `ml-auto transition-all delay-75`
|
|
841
|
+
},
|
|
842
|
+
/* @__PURE__ */ React12.createElement(ChevronDown3, { width: 20, height: 20 })
|
|
843
|
+
)
|
|
844
|
+
), options.options && options.options.length > 1 && /* @__PURE__ */ React12.createElement(
|
|
845
|
+
"div",
|
|
846
|
+
{
|
|
847
|
+
className: "ml-[20px] max-h-0 overflow-hidden flex flex-col",
|
|
848
|
+
id: `dropDownOptions-${optionsIndex}-subOption-${index}`
|
|
849
|
+
},
|
|
850
|
+
options.options.map((subOption) => {
|
|
851
|
+
return /* @__PURE__ */ React12.createElement(
|
|
852
|
+
"div",
|
|
853
|
+
{
|
|
854
|
+
className: "p-2 rounded-lg hover:bg-accent dark:hover:bg-[#27272a] dark:text-[#f4f4f5cc] font-medium text-sm cursor-pointer",
|
|
855
|
+
onClick: (e) => {
|
|
856
|
+
subOption.onClick && subOption.onClick();
|
|
857
|
+
closeMobileMenu();
|
|
858
|
+
}
|
|
859
|
+
},
|
|
860
|
+
subOption.label
|
|
861
|
+
);
|
|
862
|
+
})
|
|
863
|
+
));
|
|
864
|
+
})
|
|
865
|
+
));
|
|
866
|
+
}))),
|
|
867
|
+
/* @__PURE__ */ React12.createElement("div", { className: "mt-auto bg-[#fafafa] dark:bg-[#18181b] sticky bottom-0 pt-2" }, /* @__PURE__ */ React12.createElement(
|
|
868
|
+
"div",
|
|
869
|
+
{
|
|
870
|
+
className: "flex items-center justify-between p-2 rounded-lg hover:bg-accent dark:hover:bg-[#27272a] cursor-pointer",
|
|
871
|
+
onClick: () => {
|
|
872
|
+
window.location.href = "/profile";
|
|
873
|
+
}
|
|
874
|
+
},
|
|
875
|
+
/* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React12.createElement("span", { className: "relative flex shrink-0 overflow-hidden dark:bg-[#27272a] rounded-full h-10 w-10" }, /* @__PURE__ */ React12.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted dark:text-white" }, ((_a = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _a.UserName) ? authData.userInfo.UserName.split("")[0] : "A")), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", { className: "font-semibold dark:text-white" }, ((_b = authData == null ? void 0 : authData.userInfo) == null ? void 0 : _b.UserName) ? authData.userInfo.UserName : "Admin User"), /* @__PURE__ */ React12.createElement("p", { className: "text-sm dark:text-[#f4f4f5cc]" }, role))),
|
|
876
|
+
/* @__PURE__ */ React12.createElement("div", { className: "dark:text-[#f4f4f5cc]" }, /* @__PURE__ */ React12.createElement(LogOut, null))
|
|
877
|
+
))
|
|
878
|
+
));
|
|
879
|
+
};
|
|
880
|
+
|
|
881
|
+
// src/RightSheet/RightSheet.jsx
|
|
882
|
+
import React13, { useEffect as useEffect2, useState as useState4 } from "react";
|
|
883
|
+
var RightSheet = ({
|
|
884
|
+
open,
|
|
885
|
+
setOpen,
|
|
886
|
+
children,
|
|
887
|
+
callBack,
|
|
888
|
+
actionLabel = "Save",
|
|
889
|
+
onAction = () => {
|
|
890
|
+
}
|
|
891
|
+
}) => {
|
|
892
|
+
const [visible, setVisible] = useState4(open);
|
|
893
|
+
useEffect2(() => {
|
|
894
|
+
if (open) {
|
|
895
|
+
document.body.style.overflow = "hidden";
|
|
896
|
+
setVisible(true);
|
|
897
|
+
}
|
|
898
|
+
return () => {
|
|
899
|
+
document.body.style.overflow = "auto";
|
|
900
|
+
};
|
|
901
|
+
}, [open]);
|
|
902
|
+
const handleClose = () => {
|
|
903
|
+
setVisible(false);
|
|
904
|
+
setTimeout(() => {
|
|
905
|
+
setOpen(false);
|
|
906
|
+
callBack();
|
|
907
|
+
}, 200);
|
|
908
|
+
};
|
|
909
|
+
const handleAction = () => {
|
|
910
|
+
onAction();
|
|
911
|
+
handleClose();
|
|
912
|
+
};
|
|
913
|
+
if (!visible) return null;
|
|
914
|
+
return /* @__PURE__ */ React13.createElement(
|
|
915
|
+
"div",
|
|
916
|
+
{
|
|
917
|
+
className: "fixed inset-0 overflow-x-hidden bg-black/80 sheetPopIn h-full overflow-auto ",
|
|
918
|
+
onClick: handleClose
|
|
919
|
+
},
|
|
920
|
+
/* @__PURE__ */ React13.createElement(
|
|
921
|
+
"div",
|
|
922
|
+
{
|
|
923
|
+
className: `absolute flex flex-col right-0 top-0 min-h-full min-w-[100%] md:min-w-[576px]
|
|
924
|
+
${visible ? "sheetRightSlide" : "transition-all duration-200 translate-x-[100%]"} justify-between bg-[#fff] dark:bg-[#18181b] dark:text-white`,
|
|
925
|
+
onClick: (e) => e.stopPropagation()
|
|
926
|
+
},
|
|
927
|
+
/* @__PURE__ */ React13.createElement("div", { className: " min-h-full " }, children),
|
|
928
|
+
/* @__PURE__ */ React13.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t sticky bottom-0 bg-white border-[#e6e6e6] dark:border-[#303036] dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React13.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose() }, "Cancel"), /* @__PURE__ */ React13.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
|
|
929
|
+
)
|
|
930
|
+
);
|
|
931
|
+
};
|
|
932
|
+
|
|
933
|
+
// src/Table/CustomTable.jsx
|
|
934
|
+
import React14 from "react";
|
|
935
|
+
var CustomTable = ({
|
|
936
|
+
tableHeader,
|
|
937
|
+
setIsAllChecked,
|
|
938
|
+
isAllChecked,
|
|
939
|
+
children,
|
|
940
|
+
isHideCheckbox = "false"
|
|
941
|
+
}) => {
|
|
942
|
+
return /* @__PURE__ */ React14.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto flex flex-col" }, /* @__PURE__ */ React14.createElement("div", { className: "w-full relative overflow-x-auto flex-1" }, /* @__PURE__ */ React14.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-[#18181b] border-collapse" }, /* @__PURE__ */ React14.createElement("thead", { className: "border-b border-[#e5e5e5] dark:bg-[#18181b]" }, /* @__PURE__ */ React14.createElement(
|
|
943
|
+
"tr",
|
|
944
|
+
{
|
|
945
|
+
className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n data-[state=selected]:bg-muted"
|
|
946
|
+
},
|
|
947
|
+
!isHideCheckbox && /* @__PURE__ */ React14.createElement("th", { className: "px-4 py-3 text-left w-[50px]" }, /* @__PURE__ */ React14.createElement(
|
|
948
|
+
CustomCheckbox,
|
|
949
|
+
{
|
|
950
|
+
checked: isAllChecked,
|
|
951
|
+
onChange: () => {
|
|
952
|
+
setIsAllChecked(!isAllChecked);
|
|
953
|
+
}
|
|
954
|
+
}
|
|
955
|
+
)),
|
|
956
|
+
tableHeader.map((header, index) => {
|
|
957
|
+
return /* @__PURE__ */ React14.createElement(
|
|
958
|
+
"th",
|
|
959
|
+
{
|
|
960
|
+
className: `px-4 py-3 text-sm dark:bg-[#18181b] font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`,
|
|
961
|
+
key: header + index
|
|
962
|
+
},
|
|
963
|
+
header
|
|
964
|
+
);
|
|
965
|
+
})
|
|
966
|
+
)), /* @__PURE__ */ React14.createElement("tbody", null, children))));
|
|
967
|
+
};
|
|
968
|
+
|
|
969
|
+
// src/Pagination/Pagination.jsx
|
|
970
|
+
import React15, { useMemo, useState as useState5, useEffect as useEffect3 } from "react";
|
|
971
|
+
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
|
|
972
|
+
var Pagination = ({
|
|
973
|
+
data = [],
|
|
974
|
+
component: Component,
|
|
975
|
+
itemsPerPage = 6,
|
|
976
|
+
itemsPerPageOptions = [5, 10, 20, 50, 100],
|
|
977
|
+
// Controlled props (optional)
|
|
978
|
+
currentPage: controlledCurrentPage,
|
|
979
|
+
onPageChange: controlledOnPageChange,
|
|
980
|
+
onItemsPerPageChange: controlledOnItemsPerPageChange,
|
|
981
|
+
// Legacy props for backward compatibility
|
|
982
|
+
totalPages,
|
|
983
|
+
totalItems: legacyTotalItems,
|
|
984
|
+
onPageChange: legacyOnPageChange,
|
|
985
|
+
onItemsPerPageChange: legacyOnItemsPerPageChange,
|
|
986
|
+
tableHeader,
|
|
987
|
+
isHideCheckbox,
|
|
988
|
+
callback,
|
|
989
|
+
isTable = false,
|
|
990
|
+
// Component props - any additional props to pass to the component
|
|
991
|
+
componentProps = {},
|
|
992
|
+
...restProps
|
|
993
|
+
}) => {
|
|
994
|
+
const [internalCurrentPage, setInternalCurrentPage] = useState5(1);
|
|
995
|
+
const [internalItemsPerPage, setInternalItemsPerPage] = useState5(itemsPerPage);
|
|
996
|
+
const isControlled = controlledCurrentPage !== void 0;
|
|
997
|
+
const isItemsPerPageControlled = controlledOnItemsPerPageChange !== void 0;
|
|
998
|
+
const currentPage = isControlled ? controlledCurrentPage : internalCurrentPage;
|
|
999
|
+
const activeItemsPerPage = isItemsPerPageControlled ? itemsPerPage : internalItemsPerPage;
|
|
1000
|
+
const totalItems = legacyTotalItems !== void 0 ? legacyTotalItems : data.length;
|
|
1001
|
+
const calculatedTotalPages = useMemo(() => {
|
|
1002
|
+
if (totalItems > 0 && activeItemsPerPage > 0) {
|
|
1003
|
+
return Math.ceil(totalItems / activeItemsPerPage);
|
|
1004
|
+
}
|
|
1005
|
+
return 1;
|
|
1006
|
+
}, [totalItems, activeItemsPerPage]);
|
|
1007
|
+
const paginatedData = useMemo(() => {
|
|
1008
|
+
if (!data || data.length === 0) return [];
|
|
1009
|
+
const startIndex = (currentPage - 1) * activeItemsPerPage;
|
|
1010
|
+
const endIndex = startIndex + activeItemsPerPage;
|
|
1011
|
+
return data.slice(startIndex, endIndex);
|
|
1012
|
+
}, [data, currentPage, activeItemsPerPage]);
|
|
1013
|
+
useEffect3(() => {
|
|
1014
|
+
if (!isControlled && currentPage > calculatedTotalPages && calculatedTotalPages > 0) {
|
|
1015
|
+
setInternalCurrentPage(1);
|
|
1016
|
+
}
|
|
1017
|
+
}, [calculatedTotalPages, isControlled, currentPage]);
|
|
1018
|
+
const getPageNumbers = () => {
|
|
1019
|
+
const pages = [];
|
|
1020
|
+
const maxVisible = 5;
|
|
1021
|
+
let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
|
|
1022
|
+
let endPage = Math.min(calculatedTotalPages, startPage + maxVisible - 1);
|
|
1023
|
+
if (endPage - startPage < maxVisible - 1) {
|
|
1024
|
+
startPage = Math.max(1, endPage - maxVisible + 1);
|
|
1025
|
+
}
|
|
1026
|
+
for (let i = startPage; i <= endPage; i++) {
|
|
1027
|
+
pages.push(i);
|
|
1028
|
+
}
|
|
1029
|
+
return pages;
|
|
1030
|
+
};
|
|
1031
|
+
const handlePageChange = (page) => {
|
|
1032
|
+
if (page >= 1 && page <= calculatedTotalPages) {
|
|
1033
|
+
if (isControlled && controlledOnPageChange) {
|
|
1034
|
+
controlledOnPageChange(page);
|
|
1035
|
+
} else if (legacyOnPageChange) {
|
|
1036
|
+
legacyOnPageChange(page);
|
|
1037
|
+
} else {
|
|
1038
|
+
setInternalCurrentPage(page);
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
};
|
|
1042
|
+
const startItem = totalItems !== void 0 ? (currentPage - 1) * activeItemsPerPage + 1 : null;
|
|
1043
|
+
const endItem = totalItems !== void 0 ? Math.min(currentPage * activeItemsPerPage, totalItems) : null;
|
|
1044
|
+
const renderContent = () => {
|
|
1045
|
+
if (Component) {
|
|
1046
|
+
if (React15.isValidElement(Component)) {
|
|
1047
|
+
const ComponentType = Component.type;
|
|
1048
|
+
const elementProps = Component.props;
|
|
1049
|
+
if (isTable) {
|
|
1050
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1051
|
+
CustomTable,
|
|
1052
|
+
{
|
|
1053
|
+
tableHeader,
|
|
1054
|
+
isHideCheckbox
|
|
1055
|
+
},
|
|
1056
|
+
paginatedData.map((item, index) => {
|
|
1057
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1058
|
+
ComponentType,
|
|
1059
|
+
{
|
|
1060
|
+
key: item.id || item._id || index,
|
|
1061
|
+
data: item,
|
|
1062
|
+
...elementProps,
|
|
1063
|
+
...componentProps,
|
|
1064
|
+
...restProps
|
|
1065
|
+
}
|
|
1066
|
+
);
|
|
1067
|
+
})
|
|
1068
|
+
);
|
|
1069
|
+
} else {
|
|
1070
|
+
if (isTable) {
|
|
1071
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1072
|
+
CustomTable,
|
|
1073
|
+
{
|
|
1074
|
+
tableHeader,
|
|
1075
|
+
isHideCheckbox
|
|
1076
|
+
},
|
|
1077
|
+
paginatedData.map((item, index) => {
|
|
1078
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1079
|
+
ComponentType,
|
|
1080
|
+
{
|
|
1081
|
+
key: item.id || item._id || index,
|
|
1082
|
+
data: item,
|
|
1083
|
+
...elementProps,
|
|
1084
|
+
...componentProps,
|
|
1085
|
+
...restProps
|
|
1086
|
+
}
|
|
1087
|
+
);
|
|
1088
|
+
})
|
|
1089
|
+
);
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
} else {
|
|
1093
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1094
|
+
CustomTable,
|
|
1095
|
+
{
|
|
1096
|
+
tableHeader,
|
|
1097
|
+
isHideCheckbox
|
|
1098
|
+
},
|
|
1099
|
+
paginatedData.map((item, index) => {
|
|
1100
|
+
return /* @__PURE__ */ React15.createElement(
|
|
1101
|
+
Component,
|
|
1102
|
+
{
|
|
1103
|
+
key: item.id || item._id || index,
|
|
1104
|
+
data: item,
|
|
1105
|
+
...componentProps,
|
|
1106
|
+
...restProps
|
|
1107
|
+
}
|
|
1108
|
+
);
|
|
1109
|
+
})
|
|
1110
|
+
);
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
return null;
|
|
1114
|
+
};
|
|
1115
|
+
return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(React15.Fragment, null, renderContent()), /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10" }, totalItems !== void 0 && /* @__PURE__ */ React15.createElement("div", { className: "text-sm text-[#737373] dark:text-white" }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
|
|
1116
|
+
"button",
|
|
1117
|
+
{
|
|
1118
|
+
onClick: () => handlePageChange(1),
|
|
1119
|
+
disabled: currentPage === 1,
|
|
1120
|
+
className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
|
|
1121
|
+
title: "First page"
|
|
1122
|
+
},
|
|
1123
|
+
/* @__PURE__ */ React15.createElement(ChevronsLeft, { size: 16 })
|
|
1124
|
+
), /* @__PURE__ */ React15.createElement(
|
|
1125
|
+
"button",
|
|
1126
|
+
{
|
|
1127
|
+
onClick: () => handlePageChange(currentPage - 1),
|
|
1128
|
+
disabled: currentPage === 1,
|
|
1129
|
+
className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
|
|
1130
|
+
title: "Previous page"
|
|
1131
|
+
},
|
|
1132
|
+
/* @__PURE__ */ React15.createElement(ChevronLeft, { size: 16 })
|
|
1133
|
+
), getPageNumbers().map((pageNum) => /* @__PURE__ */ React15.createElement(
|
|
1134
|
+
"button",
|
|
1135
|
+
{
|
|
1136
|
+
key: pageNum,
|
|
1137
|
+
onClick: () => handlePageChange(pageNum),
|
|
1138
|
+
className: `flex items-center justify-center min-w-9 h-9 px-3 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === pageNum ? "bg-primary text-white border-primary dark:bg-primary" : "bg-white text-black hover:bg-gray-50 dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`
|
|
1139
|
+
},
|
|
1140
|
+
pageNum
|
|
1141
|
+
)), /* @__PURE__ */ React15.createElement(
|
|
1142
|
+
"button",
|
|
1143
|
+
{
|
|
1144
|
+
onClick: () => handlePageChange(currentPage + 1),
|
|
1145
|
+
disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
|
|
1146
|
+
className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
|
|
1147
|
+
title: "Next page"
|
|
1148
|
+
},
|
|
1149
|
+
/* @__PURE__ */ React15.createElement(ChevronRight, { size: 16 })
|
|
1150
|
+
), /* @__PURE__ */ React15.createElement(
|
|
1151
|
+
"button",
|
|
1152
|
+
{
|
|
1153
|
+
onClick: () => handlePageChange(calculatedTotalPages),
|
|
1154
|
+
disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
|
|
1155
|
+
className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
|
|
1156
|
+
title: "Last page"
|
|
1157
|
+
},
|
|
1158
|
+
/* @__PURE__ */ React15.createElement(ChevronsRight, { size: 16 })
|
|
1159
|
+
))));
|
|
1160
|
+
};
|
|
1161
|
+
export {
|
|
1162
|
+
AppSideBar,
|
|
1163
|
+
Chip,
|
|
1164
|
+
CustomAutocomplete,
|
|
1165
|
+
CustomButton,
|
|
1166
|
+
CustomCheckbox,
|
|
1167
|
+
CustomInput,
|
|
1168
|
+
CustomSearch,
|
|
1169
|
+
CustomSelect,
|
|
1170
|
+
CustomSwitch,
|
|
1171
|
+
CustomTable,
|
|
1172
|
+
CustomTextarea,
|
|
1173
|
+
CustomUpload,
|
|
1174
|
+
Pagination,
|
|
1175
|
+
ProgressBar,
|
|
1176
|
+
RightSheet
|
|
1177
|
+
};
|