@esic-lab/data-core-ui 0.0.23 → 0.0.25
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.d.mts +18 -1
- package/dist/index.d.ts +18 -1
- package/dist/index.js +243 -147
- package/dist/index.mjs +223 -128
- 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: "w-full p-[2px] overflow-y-auto", 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",
|
|
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,12 +3491,12 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3396
3491
|
errorMessage: errors.unitValue
|
|
3397
3492
|
}
|
|
3398
3493
|
),
|
|
3399
|
-
/* @__PURE__ */ (0,
|
|
3494
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3400
3495
|
"div",
|
|
3401
3496
|
{
|
|
3402
3497
|
className: `flex justify-end mt-[28px]`,
|
|
3403
|
-
children: /* @__PURE__ */ (0,
|
|
3404
|
-
|
|
3498
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3499
|
+
import_icons_react11.IconCirclePlus,
|
|
3405
3500
|
{
|
|
3406
3501
|
className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
|
|
3407
3502
|
stroke: 1,
|
|
@@ -3411,17 +3506,17 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3411
3506
|
}
|
|
3412
3507
|
)
|
|
3413
3508
|
] }),
|
|
3414
|
-
/* @__PURE__ */ (0,
|
|
3509
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3415
3510
|
"div",
|
|
3416
3511
|
{
|
|
3417
3512
|
className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
|
|
3418
3513
|
children: [
|
|
3419
|
-
/* @__PURE__ */ (0,
|
|
3514
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
|
|
3420
3515
|
index + 1,
|
|
3421
3516
|
"."
|
|
3422
3517
|
] }),
|
|
3423
|
-
kpi.isEditing ? /* @__PURE__ */ (0,
|
|
3424
|
-
/* @__PURE__ */ (0,
|
|
3518
|
+
kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3519
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3425
3520
|
InputField,
|
|
3426
3521
|
{
|
|
3427
3522
|
value: kpi.name,
|
|
@@ -3434,7 +3529,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3434
3529
|
errorMessage: itemErrors[kpi.id]?.name
|
|
3435
3530
|
}
|
|
3436
3531
|
),
|
|
3437
|
-
/* @__PURE__ */ (0,
|
|
3532
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3438
3533
|
InputField,
|
|
3439
3534
|
{
|
|
3440
3535
|
value: kpi.value?.toString(),
|
|
@@ -3464,7 +3559,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3464
3559
|
errorMessage: itemErrors[kpi.id]?.value
|
|
3465
3560
|
}
|
|
3466
3561
|
),
|
|
3467
|
-
/* @__PURE__ */ (0,
|
|
3562
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3468
3563
|
InputField,
|
|
3469
3564
|
{
|
|
3470
3565
|
value: kpi.unit,
|
|
@@ -3477,20 +3572,20 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3477
3572
|
errorMessage: itemErrors[kpi.id]?.unit
|
|
3478
3573
|
}
|
|
3479
3574
|
),
|
|
3480
|
-
/* @__PURE__ */ (0,
|
|
3575
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3481
3576
|
"div",
|
|
3482
3577
|
{
|
|
3483
3578
|
className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
|
|
3484
3579
|
children: [
|
|
3485
|
-
/* @__PURE__ */ (0,
|
|
3486
|
-
|
|
3580
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3581
|
+
import_icons_react11.IconCheck,
|
|
3487
3582
|
{
|
|
3488
3583
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3489
3584
|
onClick: () => handleSave(kpi.id, type)
|
|
3490
3585
|
}
|
|
3491
3586
|
),
|
|
3492
|
-
/* @__PURE__ */ (0,
|
|
3493
|
-
|
|
3587
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3588
|
+
import_icons_react11.IconX,
|
|
3494
3589
|
{
|
|
3495
3590
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3496
3591
|
onClick: () => handleCancel(kpi.id)
|
|
@@ -3499,20 +3594,20 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3499
3594
|
]
|
|
3500
3595
|
}
|
|
3501
3596
|
)
|
|
3502
|
-
] }) : /* @__PURE__ */ (0,
|
|
3503
|
-
/* @__PURE__ */ (0,
|
|
3504
|
-
/* @__PURE__ */ (0,
|
|
3505
|
-
/* @__PURE__ */ (0,
|
|
3506
|
-
/* @__PURE__ */ (0,
|
|
3507
|
-
/* @__PURE__ */ (0,
|
|
3508
|
-
|
|
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,
|
|
3509
3604
|
{
|
|
3510
3605
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3511
3606
|
onClick: () => handleEdit(kpi.id)
|
|
3512
3607
|
}
|
|
3513
3608
|
),
|
|
3514
|
-
/* @__PURE__ */ (0,
|
|
3515
|
-
|
|
3609
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3610
|
+
import_icons_react11.IconTrash,
|
|
3516
3611
|
{
|
|
3517
3612
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3518
3613
|
onClick: () => handleDelete(kpi.id)
|
|
@@ -3525,9 +3620,9 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3525
3620
|
kpi.id
|
|
3526
3621
|
)) })
|
|
3527
3622
|
] }),
|
|
3528
|
-
type === "text" && /* @__PURE__ */ (0,
|
|
3529
|
-
/* @__PURE__ */ (0,
|
|
3530
|
-
/* @__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)(
|
|
3531
3626
|
InputField,
|
|
3532
3627
|
{
|
|
3533
3628
|
value: nameKpi,
|
|
@@ -3540,12 +3635,12 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3540
3635
|
errorMessage: errors.nameKpi
|
|
3541
3636
|
}
|
|
3542
3637
|
),
|
|
3543
|
-
/* @__PURE__ */ (0,
|
|
3638
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3544
3639
|
"div",
|
|
3545
3640
|
{
|
|
3546
3641
|
className: `flex justify-end mt-[28px]`,
|
|
3547
|
-
children: /* @__PURE__ */ (0,
|
|
3548
|
-
|
|
3642
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3643
|
+
import_icons_react11.IconCirclePlus,
|
|
3549
3644
|
{
|
|
3550
3645
|
className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
|
|
3551
3646
|
stroke: 1,
|
|
@@ -3555,17 +3650,17 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3555
3650
|
}
|
|
3556
3651
|
)
|
|
3557
3652
|
] }),
|
|
3558
|
-
/* @__PURE__ */ (0,
|
|
3653
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3559
3654
|
"div",
|
|
3560
3655
|
{
|
|
3561
3656
|
className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]",
|
|
3562
3657
|
children: [
|
|
3563
|
-
/* @__PURE__ */ (0,
|
|
3658
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
|
|
3564
3659
|
index + 1,
|
|
3565
3660
|
"."
|
|
3566
3661
|
] }),
|
|
3567
|
-
kpi.isEditing ? /* @__PURE__ */ (0,
|
|
3568
|
-
/* @__PURE__ */ (0,
|
|
3662
|
+
kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3663
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3569
3664
|
InputField,
|
|
3570
3665
|
{
|
|
3571
3666
|
value: kpi.name,
|
|
@@ -3578,20 +3673,20 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3578
3673
|
errorMessage: itemErrors[kpi.id]?.name
|
|
3579
3674
|
}
|
|
3580
3675
|
),
|
|
3581
|
-
/* @__PURE__ */ (0,
|
|
3676
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3582
3677
|
"div",
|
|
3583
3678
|
{
|
|
3584
3679
|
className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
|
|
3585
3680
|
children: [
|
|
3586
|
-
/* @__PURE__ */ (0,
|
|
3587
|
-
|
|
3681
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3682
|
+
import_icons_react11.IconCheck,
|
|
3588
3683
|
{
|
|
3589
3684
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3590
3685
|
onClick: () => handleSave(kpi.id, type)
|
|
3591
3686
|
}
|
|
3592
3687
|
),
|
|
3593
|
-
/* @__PURE__ */ (0,
|
|
3594
|
-
|
|
3688
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3689
|
+
import_icons_react11.IconX,
|
|
3595
3690
|
{
|
|
3596
3691
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3597
3692
|
onClick: () => handleCancel(kpi.id)
|
|
@@ -3600,18 +3695,18 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3600
3695
|
]
|
|
3601
3696
|
}
|
|
3602
3697
|
)
|
|
3603
|
-
] }) : /* @__PURE__ */ (0,
|
|
3604
|
-
/* @__PURE__ */ (0,
|
|
3605
|
-
/* @__PURE__ */ (0,
|
|
3606
|
-
/* @__PURE__ */ (0,
|
|
3607
|
-
|
|
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,
|
|
3608
3703
|
{
|
|
3609
3704
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3610
3705
|
onClick: () => handleEdit(kpi.id)
|
|
3611
3706
|
}
|
|
3612
3707
|
),
|
|
3613
|
-
/* @__PURE__ */ (0,
|
|
3614
|
-
|
|
3708
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3709
|
+
import_icons_react11.IconTrash,
|
|
3615
3710
|
{
|
|
3616
3711
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3617
3712
|
onClick: () => handleDelete(kpi.id)
|
|
@@ -3652,6 +3747,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3652
3747
|
Radio,
|
|
3653
3748
|
RadioGroup,
|
|
3654
3749
|
SecondaryButton,
|
|
3750
|
+
SelectCustom,
|
|
3655
3751
|
SelectField,
|
|
3656
3752
|
SelectFieldGroup,
|
|
3657
3753
|
SelectFieldStatus,
|