@esic-lab/data-core-ui 0.0.22 → 0.0.24
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 +3 -6
- package/dist/index.d.mts +18 -1
- package/dist/index.d.ts +18 -1
- package/dist/index.js +261 -153
- package/dist/index.mjs +243 -136
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -483,6 +483,7 @@ __export(index_exports, {
|
|
|
483
483
|
Radio: () => Radio,
|
|
484
484
|
RadioGroup: () => RadioGroup,
|
|
485
485
|
SecondaryButton: () => SecondaryButton,
|
|
486
|
+
SelectCustom: () => SelectCustom,
|
|
486
487
|
SelectField: () => SelectField,
|
|
487
488
|
SelectFieldGroup: () => SelectFieldGroup,
|
|
488
489
|
SelectFieldStatus: () => SelectFieldStatus,
|
|
@@ -2719,8 +2720,102 @@ function SelectFieldTag({
|
|
|
2719
2720
|
);
|
|
2720
2721
|
}
|
|
2721
2722
|
|
|
2722
|
-
// src/
|
|
2723
|
+
// src/Select/SelectCustom/SelectCustom.tsx
|
|
2724
|
+
var import_icons_react8 = require("@tabler/icons-react");
|
|
2723
2725
|
var import_antd15 = require("antd");
|
|
2726
|
+
var import_react9 = require("react");
|
|
2727
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2728
|
+
function SelectCustom({
|
|
2729
|
+
title = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
|
|
2730
|
+
placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01",
|
|
2731
|
+
options,
|
|
2732
|
+
require: require2 = false,
|
|
2733
|
+
onChange,
|
|
2734
|
+
bottomText,
|
|
2735
|
+
showError,
|
|
2736
|
+
errorMessage,
|
|
2737
|
+
onClear
|
|
2738
|
+
}) {
|
|
2739
|
+
const [value, setValue] = (0, import_react9.useState)([]);
|
|
2740
|
+
const [valueList, setValueList] = (0, import_react9.useState)([]);
|
|
2741
|
+
const handleChange = (selectedValues) => {
|
|
2742
|
+
const newValues = selectedValues.filter((v) => !valueList.includes(v));
|
|
2743
|
+
setValueList((prev) => {
|
|
2744
|
+
const updated = [...prev, ...newValues];
|
|
2745
|
+
onChange && onChange(updated);
|
|
2746
|
+
return updated;
|
|
2747
|
+
});
|
|
2748
|
+
setValue([]);
|
|
2749
|
+
};
|
|
2750
|
+
const handleDelete = (val) => {
|
|
2751
|
+
setValueList((prev) => {
|
|
2752
|
+
const updated = prev.filter((v) => v !== val);
|
|
2753
|
+
onChange && onChange(updated);
|
|
2754
|
+
return updated;
|
|
2755
|
+
});
|
|
2756
|
+
};
|
|
2757
|
+
const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
|
|
2758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2759
|
+
import_antd15.ConfigProvider,
|
|
2760
|
+
{
|
|
2761
|
+
theme: {
|
|
2762
|
+
token: {
|
|
2763
|
+
fontFamily: "Kanit",
|
|
2764
|
+
fontSize: 16
|
|
2765
|
+
}
|
|
2766
|
+
},
|
|
2767
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "container-input", children: [
|
|
2768
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
|
|
2769
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "body-1", children: title }),
|
|
2770
|
+
" ",
|
|
2771
|
+
require2 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-red-500", children: "*" })
|
|
2772
|
+
] }),
|
|
2773
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2774
|
+
import_antd15.Select,
|
|
2775
|
+
{
|
|
2776
|
+
value,
|
|
2777
|
+
onChange: handleChange,
|
|
2778
|
+
placeholder,
|
|
2779
|
+
options: filteredOptions,
|
|
2780
|
+
mode: "tags",
|
|
2781
|
+
onClear
|
|
2782
|
+
}
|
|
2783
|
+
),
|
|
2784
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
|
|
2785
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "caption-1 text-gray-500", children: bottomText }),
|
|
2786
|
+
" ",
|
|
2787
|
+
showError && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "caption-1 text-red-500 ", children: errorMessage })
|
|
2788
|
+
] }),
|
|
2789
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-[500px] w-full p-[2px] overflow-y-auto mt-2", children: valueList.map((v, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2790
|
+
"div",
|
|
2791
|
+
{
|
|
2792
|
+
className: "flex justify-between items-center py-[2px] body-1",
|
|
2793
|
+
children: [
|
|
2794
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row gap-[8px]", children: [
|
|
2795
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { children: [
|
|
2796
|
+
index + 1,
|
|
2797
|
+
"."
|
|
2798
|
+
] }),
|
|
2799
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { children: v })
|
|
2800
|
+
] }),
|
|
2801
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2802
|
+
import_icons_react8.IconTrash,
|
|
2803
|
+
{
|
|
2804
|
+
className: "cursor-pointer text-red-500",
|
|
2805
|
+
onClick: () => handleDelete(v)
|
|
2806
|
+
}
|
|
2807
|
+
)
|
|
2808
|
+
]
|
|
2809
|
+
},
|
|
2810
|
+
index
|
|
2811
|
+
)) })
|
|
2812
|
+
] })
|
|
2813
|
+
}
|
|
2814
|
+
);
|
|
2815
|
+
}
|
|
2816
|
+
|
|
2817
|
+
// src/SortFilter/SortFilter.tsx
|
|
2818
|
+
var import_antd16 = require("antd");
|
|
2724
2819
|
var import_icons3 = require("@ant-design/icons");
|
|
2725
2820
|
|
|
2726
2821
|
// src/SortFilter/DataMockSortFilter.ts
|
|
@@ -2751,9 +2846,9 @@ var quarters = [
|
|
|
2751
2846
|
];
|
|
2752
2847
|
|
|
2753
2848
|
// src/SortFilter/SortFilter.tsx
|
|
2754
|
-
var
|
|
2755
|
-
var
|
|
2756
|
-
var
|
|
2849
|
+
var import_react10 = require("react");
|
|
2850
|
+
var import_icons_react9 = require("@tabler/icons-react");
|
|
2851
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2757
2852
|
function SortFilter({
|
|
2758
2853
|
showYear = true,
|
|
2759
2854
|
showQuarter = true,
|
|
@@ -2761,23 +2856,23 @@ function SortFilter({
|
|
|
2761
2856
|
onSortClick,
|
|
2762
2857
|
onFilterClick
|
|
2763
2858
|
}) {
|
|
2764
|
-
const [yearValue, setYearValue] = (0,
|
|
2765
|
-
const [monthValue, setMonthValue] = (0,
|
|
2766
|
-
const [quarterValue, setQuartersValue] = (0,
|
|
2767
|
-
return /* @__PURE__ */ (0,
|
|
2768
|
-
|
|
2859
|
+
const [yearValue, setYearValue] = (0, import_react10.useState)();
|
|
2860
|
+
const [monthValue, setMonthValue] = (0, import_react10.useState)();
|
|
2861
|
+
const [quarterValue, setQuartersValue] = (0, import_react10.useState)();
|
|
2862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2863
|
+
import_antd16.ConfigProvider,
|
|
2769
2864
|
{
|
|
2770
2865
|
theme: {
|
|
2771
2866
|
token: {
|
|
2772
2867
|
fontFamily: "Kanit"
|
|
2773
2868
|
}
|
|
2774
2869
|
},
|
|
2775
|
-
children: /* @__PURE__ */ (0,
|
|
2776
|
-
/* @__PURE__ */ (0,
|
|
2777
|
-
showYear && /* @__PURE__ */ (0,
|
|
2870
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full flex items-center justify-between", children: [
|
|
2871
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full flex gap-[10px]", children: [
|
|
2872
|
+
showYear && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2778
2873
|
SelectField,
|
|
2779
2874
|
{
|
|
2780
|
-
prefix: /* @__PURE__ */ (0,
|
|
2875
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
|
|
2781
2876
|
onChange: setYearValue,
|
|
2782
2877
|
options: years.map((s) => ({
|
|
2783
2878
|
value: s.value,
|
|
@@ -2787,10 +2882,10 @@ function SortFilter({
|
|
|
2787
2882
|
value: yearValue
|
|
2788
2883
|
}
|
|
2789
2884
|
) }),
|
|
2790
|
-
showMonth && /* @__PURE__ */ (0,
|
|
2885
|
+
showMonth && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2791
2886
|
SelectField,
|
|
2792
2887
|
{
|
|
2793
|
-
prefix: /* @__PURE__ */ (0,
|
|
2888
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
|
|
2794
2889
|
onChange: setMonthValue,
|
|
2795
2890
|
options: months.map((s) => ({
|
|
2796
2891
|
value: s.value,
|
|
@@ -2800,10 +2895,10 @@ function SortFilter({
|
|
|
2800
2895
|
placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
|
|
2801
2896
|
}
|
|
2802
2897
|
) }),
|
|
2803
|
-
showQuarter && /* @__PURE__ */ (0,
|
|
2898
|
+
showQuarter && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2804
2899
|
SelectField,
|
|
2805
2900
|
{
|
|
2806
|
-
prefix: /* @__PURE__ */ (0,
|
|
2901
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
|
|
2807
2902
|
onChange: setQuartersValue,
|
|
2808
2903
|
options: quarters.map((s) => ({
|
|
2809
2904
|
value: s.value,
|
|
@@ -2814,17 +2909,17 @@ function SortFilter({
|
|
|
2814
2909
|
}
|
|
2815
2910
|
) })
|
|
2816
2911
|
] }),
|
|
2817
|
-
/* @__PURE__ */ (0,
|
|
2818
|
-
/* @__PURE__ */ (0,
|
|
2819
|
-
|
|
2912
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex gap-[10px]", children: [
|
|
2913
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2914
|
+
import_icons_react9.IconSortDescending,
|
|
2820
2915
|
{
|
|
2821
2916
|
size: 24,
|
|
2822
2917
|
className: "cursor-pointer",
|
|
2823
2918
|
onClick: onSortClick
|
|
2824
2919
|
}
|
|
2825
2920
|
),
|
|
2826
|
-
/* @__PURE__ */ (0,
|
|
2827
|
-
|
|
2921
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2922
|
+
import_icons_react9.IconFilter,
|
|
2828
2923
|
{
|
|
2829
2924
|
size: 24,
|
|
2830
2925
|
className: "cursor-pointer",
|
|
@@ -2838,9 +2933,9 @@ function SortFilter({
|
|
|
2838
2933
|
}
|
|
2839
2934
|
|
|
2840
2935
|
// src/Upload/FileUploader/FileUploader.tsx
|
|
2841
|
-
var
|
|
2842
|
-
var
|
|
2843
|
-
var
|
|
2936
|
+
var import_icons_react10 = require("@tabler/icons-react");
|
|
2937
|
+
var import_react11 = require("react");
|
|
2938
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2844
2939
|
function FileUploader({
|
|
2845
2940
|
onUpload,
|
|
2846
2941
|
onError,
|
|
@@ -2852,10 +2947,10 @@ function FileUploader({
|
|
|
2852
2947
|
description,
|
|
2853
2948
|
label
|
|
2854
2949
|
}) {
|
|
2855
|
-
const [fileList, setFileList] = (0,
|
|
2856
|
-
const [uploading, setUploading] = (0,
|
|
2857
|
-
const [dragActive, setDragActive] = (0,
|
|
2858
|
-
const inputRef = (0,
|
|
2950
|
+
const [fileList, setFileList] = (0, import_react11.useState)([]);
|
|
2951
|
+
const [uploading, setUploading] = (0, import_react11.useState)(false);
|
|
2952
|
+
const [dragActive, setDragActive] = (0, import_react11.useState)(false);
|
|
2953
|
+
const inputRef = (0, import_react11.useRef)(null);
|
|
2859
2954
|
const validateFile = (file) => {
|
|
2860
2955
|
if (accept && !accept.includes(file.type)) {
|
|
2861
2956
|
onError?.(`Invalid file type. file: ${file.name}`);
|
|
@@ -2911,10 +3006,10 @@ function FileUploader({
|
|
|
2911
3006
|
}
|
|
2912
3007
|
if (inputRef.current) inputRef.current.value = "";
|
|
2913
3008
|
};
|
|
2914
|
-
return /* @__PURE__ */ (0,
|
|
2915
|
-
label && /* @__PURE__ */ (0,
|
|
2916
|
-
/* @__PURE__ */ (0,
|
|
2917
|
-
mode === "upload" ? /* @__PURE__ */ (0,
|
|
3009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-full", children: [
|
|
3010
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "body-1", children: label }),
|
|
3011
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
|
|
3012
|
+
mode === "upload" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2918
3013
|
"button",
|
|
2919
3014
|
{
|
|
2920
3015
|
type: "button",
|
|
@@ -2922,15 +3017,15 @@ function FileUploader({
|
|
|
2922
3017
|
className: `h-[34px] flex justify-center items-center gap-2 w-full rounded-[2px] border border-gray-200 body-1
|
|
2923
3018
|
${disabled ? "cursor-not-allowed text-gray-400 bg-gray-100" : "cursor-pointer hover:text-primary-400 hover:border-primary-200 duration-300"}`,
|
|
2924
3019
|
disabled: disabled ? disabled : uploading,
|
|
2925
|
-
children: uploading ? /* @__PURE__ */ (0,
|
|
2926
|
-
/* @__PURE__ */ (0,
|
|
3020
|
+
children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
|
|
3021
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { size: 15 }),
|
|
2927
3022
|
" \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
|
|
2928
|
-
] }) : /* @__PURE__ */ (0,
|
|
2929
|
-
/* @__PURE__ */ (0,
|
|
3023
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
|
|
3024
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconUpload, { size: 15, className: "text-gray-400" }),
|
|
2930
3025
|
" \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
|
|
2931
3026
|
] })
|
|
2932
3027
|
}
|
|
2933
|
-
) : /* @__PURE__ */ (0,
|
|
3028
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2934
3029
|
"div",
|
|
2935
3030
|
{
|
|
2936
3031
|
className: `min-w-[400px] min-h-[120px] flex justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
|
|
@@ -2944,17 +3039,17 @@ function FileUploader({
|
|
|
2944
3039
|
},
|
|
2945
3040
|
onDragLeave: () => setDragActive(false),
|
|
2946
3041
|
onDrop: handleDrop,
|
|
2947
|
-
children: uploading ? /* @__PURE__ */ (0,
|
|
2948
|
-
/* @__PURE__ */ (0,
|
|
3042
|
+
children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex justify-center items-center gap-2", children: [
|
|
3043
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { size: 15 }),
|
|
2949
3044
|
" \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
|
|
2950
|
-
] }) : /* @__PURE__ */ (0,
|
|
2951
|
-
/* @__PURE__ */ (0,
|
|
2952
|
-
/* @__PURE__ */ (0,
|
|
2953
|
-
/* @__PURE__ */ (0,
|
|
3045
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
|
|
3046
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconUpload, { size: 20 }),
|
|
3047
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "body-1", children: "\u0E04\u0E25\u0E34\u0E01\u0E2B\u0E23\u0E37\u0E2D\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E17\u0E35\u0E48\u0E1A\u0E23\u0E34\u0E40\u0E27\u0E13\u0E19\u0E35\u0E49\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14" }),
|
|
3048
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-gray-400 body-3", children: "\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E1A\u0E1A\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E32\u0E22\u0E44\u0E1F\u0E25\u0E4C" })
|
|
2954
3049
|
] })
|
|
2955
3050
|
}
|
|
2956
3051
|
),
|
|
2957
|
-
/* @__PURE__ */ (0,
|
|
3052
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2958
3053
|
"input",
|
|
2959
3054
|
{
|
|
2960
3055
|
type: "file",
|
|
@@ -2967,14 +3062,14 @@ function FileUploader({
|
|
|
2967
3062
|
}
|
|
2968
3063
|
)
|
|
2969
3064
|
] }),
|
|
2970
|
-
description && /* @__PURE__ */ (0,
|
|
2971
|
-
/* @__PURE__ */ (0,
|
|
2972
|
-
/* @__PURE__ */ (0,
|
|
2973
|
-
/* @__PURE__ */ (0,
|
|
2974
|
-
/* @__PURE__ */ (0,
|
|
3065
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-gray-400 body-4", children: description }),
|
|
3066
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
|
|
3067
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
|
|
3068
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconPaperclip, { size: 15 }) }),
|
|
3069
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: file.name })
|
|
2975
3070
|
] }),
|
|
2976
|
-
/* @__PURE__ */ (0,
|
|
2977
|
-
|
|
3071
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3072
|
+
import_icons_react10.IconTrash,
|
|
2978
3073
|
{
|
|
2979
3074
|
size: 20,
|
|
2980
3075
|
className: "ml-auto hover:text-red-500 cursor-pointer",
|
|
@@ -3007,9 +3102,9 @@ function messageLoading(content, duration) {
|
|
|
3007
3102
|
}
|
|
3008
3103
|
|
|
3009
3104
|
// src/Breadcrumb/Breadcrumb.tsx
|
|
3010
|
-
var import_antd16 = require("antd");
|
|
3011
3105
|
var import_antd17 = require("antd");
|
|
3012
|
-
var
|
|
3106
|
+
var import_antd18 = require("antd");
|
|
3107
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3013
3108
|
function Breadcrumbs({
|
|
3014
3109
|
items,
|
|
3015
3110
|
separator,
|
|
@@ -3017,16 +3112,16 @@ function Breadcrumbs({
|
|
|
3017
3112
|
classname,
|
|
3018
3113
|
params
|
|
3019
3114
|
}) {
|
|
3020
|
-
return /* @__PURE__ */ (0,
|
|
3021
|
-
|
|
3115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3116
|
+
import_antd17.ConfigProvider,
|
|
3022
3117
|
{
|
|
3023
3118
|
theme: {
|
|
3024
3119
|
token: {
|
|
3025
3120
|
fontFamily: "Kanit"
|
|
3026
3121
|
}
|
|
3027
3122
|
},
|
|
3028
|
-
children: /* @__PURE__ */ (0,
|
|
3029
|
-
|
|
3123
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3124
|
+
import_antd18.Breadcrumb,
|
|
3030
3125
|
{
|
|
3031
3126
|
items,
|
|
3032
3127
|
separator,
|
|
@@ -3040,8 +3135,8 @@ function Breadcrumbs({
|
|
|
3040
3135
|
}
|
|
3041
3136
|
|
|
3042
3137
|
// src/HeadingPage/HeadingPage.tsx
|
|
3043
|
-
var
|
|
3044
|
-
var
|
|
3138
|
+
var import_antd19 = require("antd");
|
|
3139
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3045
3140
|
function HeadingPage({ Heading }) {
|
|
3046
3141
|
const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
|
|
3047
3142
|
weekday: "long",
|
|
@@ -3049,17 +3144,17 @@ function HeadingPage({ Heading }) {
|
|
|
3049
3144
|
month: "long",
|
|
3050
3145
|
year: "numeric"
|
|
3051
3146
|
});
|
|
3052
|
-
return /* @__PURE__ */ (0,
|
|
3053
|
-
|
|
3147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3148
|
+
import_antd19.ConfigProvider,
|
|
3054
3149
|
{
|
|
3055
3150
|
theme: {
|
|
3056
3151
|
token: {
|
|
3057
3152
|
fontFamily: "Kanit"
|
|
3058
3153
|
}
|
|
3059
3154
|
},
|
|
3060
|
-
children: /* @__PURE__ */ (0,
|
|
3061
|
-
/* @__PURE__ */ (0,
|
|
3062
|
-
/* @__PURE__ */ (0,
|
|
3155
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
|
|
3156
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "headline-5", children: Heading }),
|
|
3157
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "body-1", children: [
|
|
3063
3158
|
" \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
|
|
3064
3159
|
today
|
|
3065
3160
|
] })
|
|
@@ -3069,9 +3164,9 @@ function HeadingPage({ Heading }) {
|
|
|
3069
3164
|
}
|
|
3070
3165
|
|
|
3071
3166
|
// src/Progress/ProgressBar.tsx
|
|
3072
|
-
var
|
|
3073
|
-
var
|
|
3074
|
-
var
|
|
3167
|
+
var import_antd20 = require("antd");
|
|
3168
|
+
var import_react12 = require("react");
|
|
3169
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3075
3170
|
function ProgressBar({
|
|
3076
3171
|
percent = 0,
|
|
3077
3172
|
size = "default",
|
|
@@ -3084,8 +3179,8 @@ function ProgressBar({
|
|
|
3084
3179
|
steps,
|
|
3085
3180
|
isCheckPoints
|
|
3086
3181
|
}) {
|
|
3087
|
-
const [barWidth, setBarWidth] = (0,
|
|
3088
|
-
const progressRef = (0,
|
|
3182
|
+
const [barWidth, setBarWidth] = (0, import_react12.useState)(0);
|
|
3183
|
+
const progressRef = (0, import_react12.useRef)(null);
|
|
3089
3184
|
let strokeColor = "--color-green-500";
|
|
3090
3185
|
const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
|
|
3091
3186
|
const defaultSize = type === "circle" ? 43 : size;
|
|
@@ -3093,7 +3188,7 @@ function ProgressBar({
|
|
|
3093
3188
|
const minCheckpoint = Math.min(...checkpoints);
|
|
3094
3189
|
strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
|
|
3095
3190
|
}
|
|
3096
|
-
(0,
|
|
3191
|
+
(0, import_react12.useEffect)(() => {
|
|
3097
3192
|
const inner = progressRef.current?.querySelector(
|
|
3098
3193
|
".ant-progress-inner"
|
|
3099
3194
|
);
|
|
@@ -3104,17 +3199,17 @@ function ProgressBar({
|
|
|
3104
3199
|
observer.observe(inner);
|
|
3105
3200
|
return () => observer.disconnect();
|
|
3106
3201
|
}, []);
|
|
3107
|
-
return /* @__PURE__ */ (0,
|
|
3108
|
-
|
|
3202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3203
|
+
import_antd20.ConfigProvider,
|
|
3109
3204
|
{
|
|
3110
3205
|
theme: {
|
|
3111
3206
|
token: {
|
|
3112
3207
|
fontFamily: "Kanit"
|
|
3113
3208
|
}
|
|
3114
3209
|
},
|
|
3115
|
-
children: /* @__PURE__ */ (0,
|
|
3116
|
-
/* @__PURE__ */ (0,
|
|
3117
|
-
|
|
3210
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full", ref: progressRef, children: [
|
|
3211
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3212
|
+
import_antd20.Progress,
|
|
3118
3213
|
{
|
|
3119
3214
|
className: "w-full",
|
|
3120
3215
|
percent,
|
|
@@ -3129,7 +3224,7 @@ function ProgressBar({
|
|
|
3129
3224
|
strokeColor
|
|
3130
3225
|
}
|
|
3131
3226
|
),
|
|
3132
|
-
barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ (0,
|
|
3227
|
+
barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3133
3228
|
"div",
|
|
3134
3229
|
{
|
|
3135
3230
|
className: "checkpoint absolute top-0",
|
|
@@ -3151,25 +3246,25 @@ function ProgressBar({
|
|
|
3151
3246
|
}
|
|
3152
3247
|
|
|
3153
3248
|
// src/KpiSection/KpiSection.tsx
|
|
3154
|
-
var
|
|
3155
|
-
var
|
|
3249
|
+
var import_antd21 = require("antd");
|
|
3250
|
+
var import_react14 = require("react");
|
|
3156
3251
|
|
|
3157
3252
|
// src/KpiSection/hooks/useGetKpiSection.ts
|
|
3158
|
-
var
|
|
3253
|
+
var import_react13 = require("react");
|
|
3159
3254
|
var import_cuid = __toESM(require("cuid"));
|
|
3160
3255
|
function useGetKpiSection() {
|
|
3161
|
-
const [nameKpi, setNameKpi] = (0,
|
|
3162
|
-
const [kpiValue, setKpiValue] = (0,
|
|
3163
|
-
const [unitValue, setUnitValue] = (0,
|
|
3164
|
-
const [kpiList, setKpiList] = (0,
|
|
3165
|
-
const [editingBackup, setEditingBackup] = (0,
|
|
3166
|
-
const [selected, setSelected] = (0,
|
|
3167
|
-
const [errors, setErrors] = (0,
|
|
3256
|
+
const [nameKpi, setNameKpi] = (0, import_react13.useState)("");
|
|
3257
|
+
const [kpiValue, setKpiValue] = (0, import_react13.useState)("");
|
|
3258
|
+
const [unitValue, setUnitValue] = (0, import_react13.useState)("");
|
|
3259
|
+
const [kpiList, setKpiList] = (0, import_react13.useState)([]);
|
|
3260
|
+
const [editingBackup, setEditingBackup] = (0, import_react13.useState)({});
|
|
3261
|
+
const [selected, setSelected] = (0, import_react13.useState)("2");
|
|
3262
|
+
const [errors, setErrors] = (0, import_react13.useState)({
|
|
3168
3263
|
nameKpi: "",
|
|
3169
3264
|
kpiValue: "",
|
|
3170
3265
|
unitValue: ""
|
|
3171
3266
|
});
|
|
3172
|
-
const [itemErrors, setItemErrors] = (0,
|
|
3267
|
+
const [itemErrors, setItemErrors] = (0, import_react13.useState)({});
|
|
3173
3268
|
const options = [
|
|
3174
3269
|
{ value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
|
|
3175
3270
|
{ value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
|
|
@@ -3301,8 +3396,8 @@ function useGetKpiSection() {
|
|
|
3301
3396
|
}
|
|
3302
3397
|
|
|
3303
3398
|
// src/KpiSection/KpiSection.tsx
|
|
3304
|
-
var
|
|
3305
|
-
var
|
|
3399
|
+
var import_icons_react11 = require("@tabler/icons-react");
|
|
3400
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3306
3401
|
function KpiSection({ type, onChangeKpiList }) {
|
|
3307
3402
|
const {
|
|
3308
3403
|
handleAddKpi,
|
|
@@ -3322,18 +3417,18 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3322
3417
|
itemErrors,
|
|
3323
3418
|
setItemErrors
|
|
3324
3419
|
} = useGetKpiSection();
|
|
3325
|
-
const [messageApi2, messageContainer] =
|
|
3326
|
-
const [hasShownError, setHasShownError] = (0,
|
|
3327
|
-
(0,
|
|
3420
|
+
const [messageApi2, messageContainer] = import_antd21.message.useMessage();
|
|
3421
|
+
const [hasShownError, setHasShownError] = (0, import_react14.useState)(false);
|
|
3422
|
+
(0, import_react14.useEffect)(() => {
|
|
3328
3423
|
setMessageApi(messageApi2);
|
|
3329
3424
|
}, [messageApi2]);
|
|
3330
|
-
(0,
|
|
3425
|
+
(0, import_react14.useEffect)(() => {
|
|
3331
3426
|
if (onChangeKpiList) {
|
|
3332
3427
|
onChangeKpiList(kpiList);
|
|
3333
3428
|
}
|
|
3334
3429
|
}, [kpiList]);
|
|
3335
|
-
return /* @__PURE__ */ (0,
|
|
3336
|
-
|
|
3430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3431
|
+
import_antd21.ConfigProvider,
|
|
3337
3432
|
{
|
|
3338
3433
|
theme: {
|
|
3339
3434
|
token: {
|
|
@@ -3341,11 +3436,11 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3341
3436
|
fontSize: 16
|
|
3342
3437
|
}
|
|
3343
3438
|
},
|
|
3344
|
-
children: /* @__PURE__ */ (0,
|
|
3439
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "container-input", children: [
|
|
3345
3440
|
messageContainer,
|
|
3346
|
-
type === "number" && /* @__PURE__ */ (0,
|
|
3347
|
-
/* @__PURE__ */ (0,
|
|
3348
|
-
/* @__PURE__ */ (0,
|
|
3441
|
+
type === "number" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "space-y-4", children: [
|
|
3442
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
|
|
3443
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3349
3444
|
InputField,
|
|
3350
3445
|
{
|
|
3351
3446
|
value: nameKpi,
|
|
@@ -3358,7 +3453,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3358
3453
|
errorMessage: errors.nameKpi
|
|
3359
3454
|
}
|
|
3360
3455
|
),
|
|
3361
|
-
/* @__PURE__ */ (0,
|
|
3456
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3362
3457
|
InputField,
|
|
3363
3458
|
{
|
|
3364
3459
|
value: kpiValue,
|
|
@@ -3383,7 +3478,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3383
3478
|
errorMessage: errors.kpiValue
|
|
3384
3479
|
}
|
|
3385
3480
|
),
|
|
3386
|
-
/* @__PURE__ */ (0,
|
|
3481
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3387
3482
|
InputField,
|
|
3388
3483
|
{
|
|
3389
3484
|
value: unitValue,
|
|
@@ -3396,26 +3491,32 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3396
3491
|
errorMessage: errors.unitValue
|
|
3397
3492
|
}
|
|
3398
3493
|
),
|
|
3399
|
-
/* @__PURE__ */ (0,
|
|
3400
|
-
|
|
3494
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3495
|
+
"div",
|
|
3401
3496
|
{
|
|
3402
|
-
className:
|
|
3403
|
-
|
|
3404
|
-
|
|
3497
|
+
className: `flex justify-end mt-[28px]`,
|
|
3498
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3499
|
+
import_icons_react11.IconCirclePlus,
|
|
3500
|
+
{
|
|
3501
|
+
className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
|
|
3502
|
+
stroke: 1,
|
|
3503
|
+
onClick: () => handleAddKpi(type)
|
|
3504
|
+
}
|
|
3505
|
+
)
|
|
3405
3506
|
}
|
|
3406
|
-
)
|
|
3507
|
+
)
|
|
3407
3508
|
] }),
|
|
3408
|
-
/* @__PURE__ */ (0,
|
|
3509
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3409
3510
|
"div",
|
|
3410
3511
|
{
|
|
3411
3512
|
className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
|
|
3412
3513
|
children: [
|
|
3413
|
-
/* @__PURE__ */ (0,
|
|
3514
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
|
|
3414
3515
|
index + 1,
|
|
3415
3516
|
"."
|
|
3416
3517
|
] }),
|
|
3417
|
-
kpi.isEditing ? /* @__PURE__ */ (0,
|
|
3418
|
-
/* @__PURE__ */ (0,
|
|
3518
|
+
kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3519
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3419
3520
|
InputField,
|
|
3420
3521
|
{
|
|
3421
3522
|
value: kpi.name,
|
|
@@ -3428,7 +3529,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3428
3529
|
errorMessage: itemErrors[kpi.id]?.name
|
|
3429
3530
|
}
|
|
3430
3531
|
),
|
|
3431
|
-
/* @__PURE__ */ (0,
|
|
3532
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3432
3533
|
InputField,
|
|
3433
3534
|
{
|
|
3434
3535
|
value: kpi.value?.toString(),
|
|
@@ -3458,7 +3559,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3458
3559
|
errorMessage: itemErrors[kpi.id]?.value
|
|
3459
3560
|
}
|
|
3460
3561
|
),
|
|
3461
|
-
/* @__PURE__ */ (0,
|
|
3562
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3462
3563
|
InputField,
|
|
3463
3564
|
{
|
|
3464
3565
|
value: kpi.unit,
|
|
@@ -3471,20 +3572,20 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3471
3572
|
errorMessage: itemErrors[kpi.id]?.unit
|
|
3472
3573
|
}
|
|
3473
3574
|
),
|
|
3474
|
-
/* @__PURE__ */ (0,
|
|
3575
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3475
3576
|
"div",
|
|
3476
3577
|
{
|
|
3477
3578
|
className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
|
|
3478
3579
|
children: [
|
|
3479
|
-
/* @__PURE__ */ (0,
|
|
3480
|
-
|
|
3580
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3581
|
+
import_icons_react11.IconCheck,
|
|
3481
3582
|
{
|
|
3482
3583
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3483
3584
|
onClick: () => handleSave(kpi.id, type)
|
|
3484
3585
|
}
|
|
3485
3586
|
),
|
|
3486
|
-
/* @__PURE__ */ (0,
|
|
3487
|
-
|
|
3587
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3588
|
+
import_icons_react11.IconX,
|
|
3488
3589
|
{
|
|
3489
3590
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3490
3591
|
onClick: () => handleCancel(kpi.id)
|
|
@@ -3493,20 +3594,20 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3493
3594
|
]
|
|
3494
3595
|
}
|
|
3495
3596
|
)
|
|
3496
|
-
] }) : /* @__PURE__ */ (0,
|
|
3497
|
-
/* @__PURE__ */ (0,
|
|
3498
|
-
/* @__PURE__ */ (0,
|
|
3499
|
-
/* @__PURE__ */ (0,
|
|
3500
|
-
/* @__PURE__ */ (0,
|
|
3501
|
-
/* @__PURE__ */ (0,
|
|
3502
|
-
|
|
3597
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3598
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.name }),
|
|
3599
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.value }),
|
|
3600
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.unit }),
|
|
3601
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-3 justify-end", children: [
|
|
3602
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3603
|
+
import_icons_react11.IconPencil,
|
|
3503
3604
|
{
|
|
3504
3605
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3505
3606
|
onClick: () => handleEdit(kpi.id)
|
|
3506
3607
|
}
|
|
3507
3608
|
),
|
|
3508
|
-
/* @__PURE__ */ (0,
|
|
3509
|
-
|
|
3609
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3610
|
+
import_icons_react11.IconTrash,
|
|
3510
3611
|
{
|
|
3511
3612
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3512
3613
|
onClick: () => handleDelete(kpi.id)
|
|
@@ -3519,9 +3620,9 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3519
3620
|
kpi.id
|
|
3520
3621
|
)) })
|
|
3521
3622
|
] }),
|
|
3522
|
-
type === "text" && /* @__PURE__ */ (0,
|
|
3523
|
-
/* @__PURE__ */ (0,
|
|
3524
|
-
/* @__PURE__ */ (0,
|
|
3623
|
+
type === "text" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "space-y-4", children: [
|
|
3624
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
|
|
3625
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3525
3626
|
InputField,
|
|
3526
3627
|
{
|
|
3527
3628
|
value: nameKpi,
|
|
@@ -3534,26 +3635,32 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3534
3635
|
errorMessage: errors.nameKpi
|
|
3535
3636
|
}
|
|
3536
3637
|
),
|
|
3537
|
-
/* @__PURE__ */ (0,
|
|
3538
|
-
|
|
3638
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3639
|
+
"div",
|
|
3539
3640
|
{
|
|
3540
|
-
className:
|
|
3541
|
-
|
|
3542
|
-
|
|
3641
|
+
className: `flex justify-end mt-[28px]`,
|
|
3642
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3643
|
+
import_icons_react11.IconCirclePlus,
|
|
3644
|
+
{
|
|
3645
|
+
className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
|
|
3646
|
+
stroke: 1,
|
|
3647
|
+
onClick: () => handleAddKpi(type)
|
|
3648
|
+
}
|
|
3649
|
+
)
|
|
3543
3650
|
}
|
|
3544
|
-
)
|
|
3651
|
+
)
|
|
3545
3652
|
] }),
|
|
3546
|
-
/* @__PURE__ */ (0,
|
|
3653
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3547
3654
|
"div",
|
|
3548
3655
|
{
|
|
3549
3656
|
className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]",
|
|
3550
3657
|
children: [
|
|
3551
|
-
/* @__PURE__ */ (0,
|
|
3658
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
|
|
3552
3659
|
index + 1,
|
|
3553
3660
|
"."
|
|
3554
3661
|
] }),
|
|
3555
|
-
kpi.isEditing ? /* @__PURE__ */ (0,
|
|
3556
|
-
/* @__PURE__ */ (0,
|
|
3662
|
+
kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3663
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3557
3664
|
InputField,
|
|
3558
3665
|
{
|
|
3559
3666
|
value: kpi.name,
|
|
@@ -3566,20 +3673,20 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3566
3673
|
errorMessage: itemErrors[kpi.id]?.name
|
|
3567
3674
|
}
|
|
3568
3675
|
),
|
|
3569
|
-
/* @__PURE__ */ (0,
|
|
3676
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3570
3677
|
"div",
|
|
3571
3678
|
{
|
|
3572
3679
|
className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
|
|
3573
3680
|
children: [
|
|
3574
|
-
/* @__PURE__ */ (0,
|
|
3575
|
-
|
|
3681
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3682
|
+
import_icons_react11.IconCheck,
|
|
3576
3683
|
{
|
|
3577
3684
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3578
3685
|
onClick: () => handleSave(kpi.id, type)
|
|
3579
3686
|
}
|
|
3580
3687
|
),
|
|
3581
|
-
/* @__PURE__ */ (0,
|
|
3582
|
-
|
|
3688
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3689
|
+
import_icons_react11.IconX,
|
|
3583
3690
|
{
|
|
3584
3691
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3585
3692
|
onClick: () => handleCancel(kpi.id)
|
|
@@ -3588,18 +3695,18 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3588
3695
|
]
|
|
3589
3696
|
}
|
|
3590
3697
|
)
|
|
3591
|
-
] }) : /* @__PURE__ */ (0,
|
|
3592
|
-
/* @__PURE__ */ (0,
|
|
3593
|
-
/* @__PURE__ */ (0,
|
|
3594
|
-
/* @__PURE__ */ (0,
|
|
3595
|
-
|
|
3698
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3699
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.name }),
|
|
3700
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-3 justify-end", children: [
|
|
3701
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3702
|
+
import_icons_react11.IconPencil,
|
|
3596
3703
|
{
|
|
3597
3704
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3598
3705
|
onClick: () => handleEdit(kpi.id)
|
|
3599
3706
|
}
|
|
3600
3707
|
),
|
|
3601
|
-
/* @__PURE__ */ (0,
|
|
3602
|
-
|
|
3708
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3709
|
+
import_icons_react11.IconTrash,
|
|
3603
3710
|
{
|
|
3604
3711
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3605
3712
|
onClick: () => handleDelete(kpi.id)
|
|
@@ -3640,6 +3747,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3640
3747
|
Radio,
|
|
3641
3748
|
RadioGroup,
|
|
3642
3749
|
SecondaryButton,
|
|
3750
|
+
SelectCustom,
|
|
3643
3751
|
SelectField,
|
|
3644
3752
|
SelectFieldGroup,
|
|
3645
3753
|
SelectFieldStatus,
|