@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.mjs
CHANGED
|
@@ -2666,8 +2666,102 @@ function SelectFieldTag({
|
|
|
2666
2666
|
);
|
|
2667
2667
|
}
|
|
2668
2668
|
|
|
2669
|
+
// src/Select/SelectCustom/SelectCustom.tsx
|
|
2670
|
+
import { IconTrash } from "@tabler/icons-react";
|
|
2671
|
+
import { Select as Select6, ConfigProvider as ConfigProvider15 } from "antd";
|
|
2672
|
+
import { useState as useState7 } from "react";
|
|
2673
|
+
import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2674
|
+
function SelectCustom({
|
|
2675
|
+
title = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
|
|
2676
|
+
placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01",
|
|
2677
|
+
options,
|
|
2678
|
+
require: require2 = false,
|
|
2679
|
+
onChange,
|
|
2680
|
+
bottomText,
|
|
2681
|
+
showError,
|
|
2682
|
+
errorMessage,
|
|
2683
|
+
onClear
|
|
2684
|
+
}) {
|
|
2685
|
+
const [value, setValue] = useState7([]);
|
|
2686
|
+
const [valueList, setValueList] = useState7([]);
|
|
2687
|
+
const handleChange = (selectedValues) => {
|
|
2688
|
+
const newValues = selectedValues.filter((v) => !valueList.includes(v));
|
|
2689
|
+
setValueList((prev) => {
|
|
2690
|
+
const updated = [...prev, ...newValues];
|
|
2691
|
+
onChange && onChange(updated);
|
|
2692
|
+
return updated;
|
|
2693
|
+
});
|
|
2694
|
+
setValue([]);
|
|
2695
|
+
};
|
|
2696
|
+
const handleDelete = (val) => {
|
|
2697
|
+
setValueList((prev) => {
|
|
2698
|
+
const updated = prev.filter((v) => v !== val);
|
|
2699
|
+
onChange && onChange(updated);
|
|
2700
|
+
return updated;
|
|
2701
|
+
});
|
|
2702
|
+
};
|
|
2703
|
+
const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
|
|
2704
|
+
return /* @__PURE__ */ jsx31(
|
|
2705
|
+
ConfigProvider15,
|
|
2706
|
+
{
|
|
2707
|
+
theme: {
|
|
2708
|
+
token: {
|
|
2709
|
+
fontFamily: "Kanit",
|
|
2710
|
+
fontSize: 16
|
|
2711
|
+
}
|
|
2712
|
+
},
|
|
2713
|
+
children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
|
|
2714
|
+
/* @__PURE__ */ jsxs27("div", { children: [
|
|
2715
|
+
/* @__PURE__ */ jsx31("span", { className: "body-1", children: title }),
|
|
2716
|
+
" ",
|
|
2717
|
+
require2 && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
|
|
2718
|
+
] }),
|
|
2719
|
+
/* @__PURE__ */ jsx31(
|
|
2720
|
+
Select6,
|
|
2721
|
+
{
|
|
2722
|
+
value,
|
|
2723
|
+
onChange: handleChange,
|
|
2724
|
+
placeholder,
|
|
2725
|
+
options: filteredOptions,
|
|
2726
|
+
mode: "tags",
|
|
2727
|
+
onClear
|
|
2728
|
+
}
|
|
2729
|
+
),
|
|
2730
|
+
/* @__PURE__ */ jsxs27("div", { children: [
|
|
2731
|
+
/* @__PURE__ */ jsx31("p", { className: "caption-1 text-gray-500", children: bottomText }),
|
|
2732
|
+
" ",
|
|
2733
|
+
showError && /* @__PURE__ */ jsx31("p", { className: "caption-1 text-red-500 ", children: errorMessage })
|
|
2734
|
+
] }),
|
|
2735
|
+
/* @__PURE__ */ jsx31("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs27(
|
|
2736
|
+
"div",
|
|
2737
|
+
{
|
|
2738
|
+
className: "flex justify-between items-center py-[2px] body-1",
|
|
2739
|
+
children: [
|
|
2740
|
+
/* @__PURE__ */ jsxs27("div", { className: "flex flex-row gap-[8px]", children: [
|
|
2741
|
+
/* @__PURE__ */ jsxs27("p", { children: [
|
|
2742
|
+
index + 1,
|
|
2743
|
+
"."
|
|
2744
|
+
] }),
|
|
2745
|
+
/* @__PURE__ */ jsx31("p", { children: v })
|
|
2746
|
+
] }),
|
|
2747
|
+
/* @__PURE__ */ jsx31(
|
|
2748
|
+
IconTrash,
|
|
2749
|
+
{
|
|
2750
|
+
className: "cursor-pointer",
|
|
2751
|
+
onClick: () => handleDelete(v)
|
|
2752
|
+
}
|
|
2753
|
+
)
|
|
2754
|
+
]
|
|
2755
|
+
},
|
|
2756
|
+
index
|
|
2757
|
+
)) })
|
|
2758
|
+
] })
|
|
2759
|
+
}
|
|
2760
|
+
);
|
|
2761
|
+
}
|
|
2762
|
+
|
|
2669
2763
|
// src/SortFilter/SortFilter.tsx
|
|
2670
|
-
import { ConfigProvider as
|
|
2764
|
+
import { ConfigProvider as ConfigProvider16 } from "antd";
|
|
2671
2765
|
import { CalendarOutlined } from "@ant-design/icons";
|
|
2672
2766
|
|
|
2673
2767
|
// src/SortFilter/DataMockSortFilter.ts
|
|
@@ -2698,9 +2792,9 @@ var quarters = [
|
|
|
2698
2792
|
];
|
|
2699
2793
|
|
|
2700
2794
|
// src/SortFilter/SortFilter.tsx
|
|
2701
|
-
import { useState as
|
|
2795
|
+
import { useState as useState8 } from "react";
|
|
2702
2796
|
import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
|
|
2703
|
-
import { jsx as
|
|
2797
|
+
import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2704
2798
|
function SortFilter({
|
|
2705
2799
|
showYear = true,
|
|
2706
2800
|
showQuarter = true,
|
|
@@ -2708,23 +2802,23 @@ function SortFilter({
|
|
|
2708
2802
|
onSortClick,
|
|
2709
2803
|
onFilterClick
|
|
2710
2804
|
}) {
|
|
2711
|
-
const [yearValue, setYearValue] =
|
|
2712
|
-
const [monthValue, setMonthValue] =
|
|
2713
|
-
const [quarterValue, setQuartersValue] =
|
|
2714
|
-
return /* @__PURE__ */
|
|
2715
|
-
|
|
2805
|
+
const [yearValue, setYearValue] = useState8();
|
|
2806
|
+
const [monthValue, setMonthValue] = useState8();
|
|
2807
|
+
const [quarterValue, setQuartersValue] = useState8();
|
|
2808
|
+
return /* @__PURE__ */ jsx32(
|
|
2809
|
+
ConfigProvider16,
|
|
2716
2810
|
{
|
|
2717
2811
|
theme: {
|
|
2718
2812
|
token: {
|
|
2719
2813
|
fontFamily: "Kanit"
|
|
2720
2814
|
}
|
|
2721
2815
|
},
|
|
2722
|
-
children: /* @__PURE__ */
|
|
2723
|
-
/* @__PURE__ */
|
|
2724
|
-
showYear && /* @__PURE__ */
|
|
2816
|
+
children: /* @__PURE__ */ jsxs28("div", { className: "w-full flex items-center justify-between", children: [
|
|
2817
|
+
/* @__PURE__ */ jsxs28("div", { className: "w-full flex gap-[10px]", children: [
|
|
2818
|
+
showYear && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
|
|
2725
2819
|
SelectField,
|
|
2726
2820
|
{
|
|
2727
|
-
prefix: /* @__PURE__ */
|
|
2821
|
+
prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
|
|
2728
2822
|
onChange: setYearValue,
|
|
2729
2823
|
options: years.map((s) => ({
|
|
2730
2824
|
value: s.value,
|
|
@@ -2734,10 +2828,10 @@ function SortFilter({
|
|
|
2734
2828
|
value: yearValue
|
|
2735
2829
|
}
|
|
2736
2830
|
) }),
|
|
2737
|
-
showMonth && /* @__PURE__ */
|
|
2831
|
+
showMonth && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
|
|
2738
2832
|
SelectField,
|
|
2739
2833
|
{
|
|
2740
|
-
prefix: /* @__PURE__ */
|
|
2834
|
+
prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
|
|
2741
2835
|
onChange: setMonthValue,
|
|
2742
2836
|
options: months.map((s) => ({
|
|
2743
2837
|
value: s.value,
|
|
@@ -2747,10 +2841,10 @@ function SortFilter({
|
|
|
2747
2841
|
placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
|
|
2748
2842
|
}
|
|
2749
2843
|
) }),
|
|
2750
|
-
showQuarter && /* @__PURE__ */
|
|
2844
|
+
showQuarter && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
|
|
2751
2845
|
SelectField,
|
|
2752
2846
|
{
|
|
2753
|
-
prefix: /* @__PURE__ */
|
|
2847
|
+
prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
|
|
2754
2848
|
onChange: setQuartersValue,
|
|
2755
2849
|
options: quarters.map((s) => ({
|
|
2756
2850
|
value: s.value,
|
|
@@ -2761,8 +2855,8 @@ function SortFilter({
|
|
|
2761
2855
|
}
|
|
2762
2856
|
) })
|
|
2763
2857
|
] }),
|
|
2764
|
-
/* @__PURE__ */
|
|
2765
|
-
/* @__PURE__ */
|
|
2858
|
+
/* @__PURE__ */ jsxs28("div", { className: "flex gap-[10px]", children: [
|
|
2859
|
+
/* @__PURE__ */ jsx32(
|
|
2766
2860
|
IconSortDescending2,
|
|
2767
2861
|
{
|
|
2768
2862
|
size: 24,
|
|
@@ -2770,7 +2864,7 @@ function SortFilter({
|
|
|
2770
2864
|
onClick: onSortClick
|
|
2771
2865
|
}
|
|
2772
2866
|
),
|
|
2773
|
-
/* @__PURE__ */
|
|
2867
|
+
/* @__PURE__ */ jsx32(
|
|
2774
2868
|
IconFilter,
|
|
2775
2869
|
{
|
|
2776
2870
|
size: 24,
|
|
@@ -2785,9 +2879,9 @@ function SortFilter({
|
|
|
2785
2879
|
}
|
|
2786
2880
|
|
|
2787
2881
|
// src/Upload/FileUploader/FileUploader.tsx
|
|
2788
|
-
import { IconPaperclip, IconUpload, IconTrash } from "@tabler/icons-react";
|
|
2789
|
-
import { useRef as useRef2, useState as
|
|
2790
|
-
import { Fragment as Fragment5, jsx as
|
|
2882
|
+
import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
|
|
2883
|
+
import { useRef as useRef2, useState as useState9 } from "react";
|
|
2884
|
+
import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2791
2885
|
function FileUploader({
|
|
2792
2886
|
onUpload,
|
|
2793
2887
|
onError,
|
|
@@ -2799,9 +2893,9 @@ function FileUploader({
|
|
|
2799
2893
|
description,
|
|
2800
2894
|
label
|
|
2801
2895
|
}) {
|
|
2802
|
-
const [fileList, setFileList] =
|
|
2803
|
-
const [uploading, setUploading] =
|
|
2804
|
-
const [dragActive, setDragActive] =
|
|
2896
|
+
const [fileList, setFileList] = useState9([]);
|
|
2897
|
+
const [uploading, setUploading] = useState9(false);
|
|
2898
|
+
const [dragActive, setDragActive] = useState9(false);
|
|
2805
2899
|
const inputRef = useRef2(null);
|
|
2806
2900
|
const validateFile = (file) => {
|
|
2807
2901
|
if (accept && !accept.includes(file.type)) {
|
|
@@ -2858,10 +2952,10 @@ function FileUploader({
|
|
|
2858
2952
|
}
|
|
2859
2953
|
if (inputRef.current) inputRef.current.value = "";
|
|
2860
2954
|
};
|
|
2861
|
-
return /* @__PURE__ */
|
|
2862
|
-
label && /* @__PURE__ */
|
|
2863
|
-
/* @__PURE__ */
|
|
2864
|
-
mode === "upload" ? /* @__PURE__ */
|
|
2955
|
+
return /* @__PURE__ */ jsxs29("div", { className: "w-full", children: [
|
|
2956
|
+
label && /* @__PURE__ */ jsx33("p", { className: "body-1", children: label }),
|
|
2957
|
+
/* @__PURE__ */ jsxs29("div", { children: [
|
|
2958
|
+
mode === "upload" ? /* @__PURE__ */ jsx33(
|
|
2865
2959
|
"button",
|
|
2866
2960
|
{
|
|
2867
2961
|
type: "button",
|
|
@@ -2869,15 +2963,15 @@ function FileUploader({
|
|
|
2869
2963
|
className: `h-[34px] flex justify-center items-center gap-2 w-full rounded-[2px] border border-gray-200 body-1
|
|
2870
2964
|
${disabled ? "cursor-not-allowed text-gray-400 bg-gray-100" : "cursor-pointer hover:text-primary-400 hover:border-primary-200 duration-300"}`,
|
|
2871
2965
|
disabled: disabled ? disabled : uploading,
|
|
2872
|
-
children: uploading ? /* @__PURE__ */
|
|
2873
|
-
/* @__PURE__ */
|
|
2966
|
+
children: uploading ? /* @__PURE__ */ jsxs29(Fragment5, { children: [
|
|
2967
|
+
/* @__PURE__ */ jsx33(Loader, { size: 15 }),
|
|
2874
2968
|
" \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
|
|
2875
|
-
] }) : /* @__PURE__ */
|
|
2876
|
-
/* @__PURE__ */
|
|
2969
|
+
] }) : /* @__PURE__ */ jsxs29(Fragment5, { children: [
|
|
2970
|
+
/* @__PURE__ */ jsx33(IconUpload, { size: 15, className: "text-gray-400" }),
|
|
2877
2971
|
" \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
|
|
2878
2972
|
] })
|
|
2879
2973
|
}
|
|
2880
|
-
) : /* @__PURE__ */
|
|
2974
|
+
) : /* @__PURE__ */ jsx33(
|
|
2881
2975
|
"div",
|
|
2882
2976
|
{
|
|
2883
2977
|
className: `min-w-[400px] min-h-[120px] flex justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
|
|
@@ -2891,17 +2985,17 @@ function FileUploader({
|
|
|
2891
2985
|
},
|
|
2892
2986
|
onDragLeave: () => setDragActive(false),
|
|
2893
2987
|
onDrop: handleDrop,
|
|
2894
|
-
children: uploading ? /* @__PURE__ */
|
|
2895
|
-
/* @__PURE__ */
|
|
2988
|
+
children: uploading ? /* @__PURE__ */ jsxs29("div", { className: "flex justify-center items-center gap-2", children: [
|
|
2989
|
+
/* @__PURE__ */ jsx33(Loader, { size: 15 }),
|
|
2896
2990
|
" \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
|
|
2897
|
-
] }) : /* @__PURE__ */
|
|
2898
|
-
/* @__PURE__ */
|
|
2899
|
-
/* @__PURE__ */
|
|
2900
|
-
/* @__PURE__ */
|
|
2991
|
+
] }) : /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2", children: [
|
|
2992
|
+
/* @__PURE__ */ jsx33(IconUpload, { size: 20 }),
|
|
2993
|
+
/* @__PURE__ */ jsx33("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" }),
|
|
2994
|
+
/* @__PURE__ */ jsx33("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" })
|
|
2901
2995
|
] })
|
|
2902
2996
|
}
|
|
2903
2997
|
),
|
|
2904
|
-
/* @__PURE__ */
|
|
2998
|
+
/* @__PURE__ */ jsx33(
|
|
2905
2999
|
"input",
|
|
2906
3000
|
{
|
|
2907
3001
|
type: "file",
|
|
@@ -2914,14 +3008,14 @@ function FileUploader({
|
|
|
2914
3008
|
}
|
|
2915
3009
|
)
|
|
2916
3010
|
] }),
|
|
2917
|
-
description && /* @__PURE__ */
|
|
2918
|
-
/* @__PURE__ */
|
|
2919
|
-
/* @__PURE__ */
|
|
2920
|
-
/* @__PURE__ */
|
|
2921
|
-
/* @__PURE__ */
|
|
3011
|
+
description && /* @__PURE__ */ jsx33("p", { className: "text-gray-400 body-4", children: description }),
|
|
3012
|
+
/* @__PURE__ */ jsx33("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
|
|
3013
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
|
|
3014
|
+
/* @__PURE__ */ jsx33("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx33(IconPaperclip, { size: 15 }) }),
|
|
3015
|
+
/* @__PURE__ */ jsx33("span", { className: "truncate", children: file.name })
|
|
2922
3016
|
] }),
|
|
2923
|
-
/* @__PURE__ */
|
|
2924
|
-
|
|
3017
|
+
/* @__PURE__ */ jsx33(
|
|
3018
|
+
IconTrash2,
|
|
2925
3019
|
{
|
|
2926
3020
|
size: 20,
|
|
2927
3021
|
className: "ml-auto hover:text-red-500 cursor-pointer",
|
|
@@ -2954,9 +3048,9 @@ function messageLoading(content, duration) {
|
|
|
2954
3048
|
}
|
|
2955
3049
|
|
|
2956
3050
|
// src/Breadcrumb/Breadcrumb.tsx
|
|
2957
|
-
import { ConfigProvider as
|
|
3051
|
+
import { ConfigProvider as ConfigProvider17 } from "antd";
|
|
2958
3052
|
import { Breadcrumb } from "antd";
|
|
2959
|
-
import { jsx as
|
|
3053
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
2960
3054
|
function Breadcrumbs({
|
|
2961
3055
|
items,
|
|
2962
3056
|
separator,
|
|
@@ -2964,15 +3058,15 @@ function Breadcrumbs({
|
|
|
2964
3058
|
classname,
|
|
2965
3059
|
params
|
|
2966
3060
|
}) {
|
|
2967
|
-
return /* @__PURE__ */
|
|
2968
|
-
|
|
3061
|
+
return /* @__PURE__ */ jsx34(
|
|
3062
|
+
ConfigProvider17,
|
|
2969
3063
|
{
|
|
2970
3064
|
theme: {
|
|
2971
3065
|
token: {
|
|
2972
3066
|
fontFamily: "Kanit"
|
|
2973
3067
|
}
|
|
2974
3068
|
},
|
|
2975
|
-
children: /* @__PURE__ */
|
|
3069
|
+
children: /* @__PURE__ */ jsx34(
|
|
2976
3070
|
Breadcrumb,
|
|
2977
3071
|
{
|
|
2978
3072
|
items,
|
|
@@ -2987,8 +3081,8 @@ function Breadcrumbs({
|
|
|
2987
3081
|
}
|
|
2988
3082
|
|
|
2989
3083
|
// src/HeadingPage/HeadingPage.tsx
|
|
2990
|
-
import { ConfigProvider as
|
|
2991
|
-
import { jsx as
|
|
3084
|
+
import { ConfigProvider as ConfigProvider18 } from "antd";
|
|
3085
|
+
import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2992
3086
|
function HeadingPage({ Heading }) {
|
|
2993
3087
|
const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
|
|
2994
3088
|
weekday: "long",
|
|
@@ -2996,17 +3090,17 @@ function HeadingPage({ Heading }) {
|
|
|
2996
3090
|
month: "long",
|
|
2997
3091
|
year: "numeric"
|
|
2998
3092
|
});
|
|
2999
|
-
return /* @__PURE__ */
|
|
3000
|
-
|
|
3093
|
+
return /* @__PURE__ */ jsx35(
|
|
3094
|
+
ConfigProvider18,
|
|
3001
3095
|
{
|
|
3002
3096
|
theme: {
|
|
3003
3097
|
token: {
|
|
3004
3098
|
fontFamily: "Kanit"
|
|
3005
3099
|
}
|
|
3006
3100
|
},
|
|
3007
|
-
children: /* @__PURE__ */
|
|
3008
|
-
/* @__PURE__ */
|
|
3009
|
-
/* @__PURE__ */
|
|
3101
|
+
children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
|
|
3102
|
+
/* @__PURE__ */ jsx35("p", { className: "headline-5", children: Heading }),
|
|
3103
|
+
/* @__PURE__ */ jsxs30("p", { className: "body-1", children: [
|
|
3010
3104
|
" \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
|
|
3011
3105
|
today
|
|
3012
3106
|
] })
|
|
@@ -3016,9 +3110,9 @@ function HeadingPage({ Heading }) {
|
|
|
3016
3110
|
}
|
|
3017
3111
|
|
|
3018
3112
|
// src/Progress/ProgressBar.tsx
|
|
3019
|
-
import { ConfigProvider as
|
|
3020
|
-
import { useEffect as useEffect2, useRef as useRef3, useState as
|
|
3021
|
-
import { jsx as
|
|
3113
|
+
import { ConfigProvider as ConfigProvider19, Progress } from "antd";
|
|
3114
|
+
import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
|
|
3115
|
+
import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3022
3116
|
function ProgressBar({
|
|
3023
3117
|
percent = 0,
|
|
3024
3118
|
size = "default",
|
|
@@ -3031,7 +3125,7 @@ function ProgressBar({
|
|
|
3031
3125
|
steps,
|
|
3032
3126
|
isCheckPoints
|
|
3033
3127
|
}) {
|
|
3034
|
-
const [barWidth, setBarWidth] =
|
|
3128
|
+
const [barWidth, setBarWidth] = useState10(0);
|
|
3035
3129
|
const progressRef = useRef3(null);
|
|
3036
3130
|
let strokeColor = "--color-green-500";
|
|
3037
3131
|
const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
|
|
@@ -3051,16 +3145,16 @@ function ProgressBar({
|
|
|
3051
3145
|
observer.observe(inner);
|
|
3052
3146
|
return () => observer.disconnect();
|
|
3053
3147
|
}, []);
|
|
3054
|
-
return /* @__PURE__ */
|
|
3055
|
-
|
|
3148
|
+
return /* @__PURE__ */ jsx36(
|
|
3149
|
+
ConfigProvider19,
|
|
3056
3150
|
{
|
|
3057
3151
|
theme: {
|
|
3058
3152
|
token: {
|
|
3059
3153
|
fontFamily: "Kanit"
|
|
3060
3154
|
}
|
|
3061
3155
|
},
|
|
3062
|
-
children: /* @__PURE__ */
|
|
3063
|
-
/* @__PURE__ */
|
|
3156
|
+
children: /* @__PURE__ */ jsxs31("div", { className: "relative w-full", ref: progressRef, children: [
|
|
3157
|
+
/* @__PURE__ */ jsx36(
|
|
3064
3158
|
Progress,
|
|
3065
3159
|
{
|
|
3066
3160
|
className: "w-full",
|
|
@@ -3076,7 +3170,7 @@ function ProgressBar({
|
|
|
3076
3170
|
strokeColor
|
|
3077
3171
|
}
|
|
3078
3172
|
),
|
|
3079
|
-
barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */
|
|
3173
|
+
barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx36(
|
|
3080
3174
|
"div",
|
|
3081
3175
|
{
|
|
3082
3176
|
className: "checkpoint absolute top-0",
|
|
@@ -3098,25 +3192,25 @@ function ProgressBar({
|
|
|
3098
3192
|
}
|
|
3099
3193
|
|
|
3100
3194
|
// src/KpiSection/KpiSection.tsx
|
|
3101
|
-
import { ConfigProvider as
|
|
3102
|
-
import { useEffect as useEffect3, useState as
|
|
3195
|
+
import { ConfigProvider as ConfigProvider20, message } from "antd";
|
|
3196
|
+
import { useEffect as useEffect3, useState as useState12 } from "react";
|
|
3103
3197
|
|
|
3104
3198
|
// src/KpiSection/hooks/useGetKpiSection.ts
|
|
3105
|
-
import { useState as
|
|
3199
|
+
import { useState as useState11 } from "react";
|
|
3106
3200
|
import cuid from "cuid";
|
|
3107
3201
|
function useGetKpiSection() {
|
|
3108
|
-
const [nameKpi, setNameKpi] =
|
|
3109
|
-
const [kpiValue, setKpiValue] =
|
|
3110
|
-
const [unitValue, setUnitValue] =
|
|
3111
|
-
const [kpiList, setKpiList] =
|
|
3112
|
-
const [editingBackup, setEditingBackup] =
|
|
3113
|
-
const [selected, setSelected] =
|
|
3114
|
-
const [errors, setErrors] =
|
|
3202
|
+
const [nameKpi, setNameKpi] = useState11("");
|
|
3203
|
+
const [kpiValue, setKpiValue] = useState11("");
|
|
3204
|
+
const [unitValue, setUnitValue] = useState11("");
|
|
3205
|
+
const [kpiList, setKpiList] = useState11([]);
|
|
3206
|
+
const [editingBackup, setEditingBackup] = useState11({});
|
|
3207
|
+
const [selected, setSelected] = useState11("2");
|
|
3208
|
+
const [errors, setErrors] = useState11({
|
|
3115
3209
|
nameKpi: "",
|
|
3116
3210
|
kpiValue: "",
|
|
3117
3211
|
unitValue: ""
|
|
3118
3212
|
});
|
|
3119
|
-
const [itemErrors, setItemErrors] =
|
|
3213
|
+
const [itemErrors, setItemErrors] = useState11({});
|
|
3120
3214
|
const options = [
|
|
3121
3215
|
{ value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
|
|
3122
3216
|
{ value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
|
|
@@ -3252,10 +3346,10 @@ import {
|
|
|
3252
3346
|
IconCheck as IconCheck2,
|
|
3253
3347
|
IconCirclePlus,
|
|
3254
3348
|
IconPencil,
|
|
3255
|
-
IconTrash as
|
|
3349
|
+
IconTrash as IconTrash3,
|
|
3256
3350
|
IconX as IconX2
|
|
3257
3351
|
} from "@tabler/icons-react";
|
|
3258
|
-
import { Fragment as Fragment6, jsx as
|
|
3352
|
+
import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3259
3353
|
function KpiSection({ type, onChangeKpiList }) {
|
|
3260
3354
|
const {
|
|
3261
3355
|
handleAddKpi,
|
|
@@ -3276,7 +3370,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3276
3370
|
setItemErrors
|
|
3277
3371
|
} = useGetKpiSection();
|
|
3278
3372
|
const [messageApi2, messageContainer] = message.useMessage();
|
|
3279
|
-
const [hasShownError, setHasShownError] =
|
|
3373
|
+
const [hasShownError, setHasShownError] = useState12(false);
|
|
3280
3374
|
useEffect3(() => {
|
|
3281
3375
|
setMessageApi(messageApi2);
|
|
3282
3376
|
}, [messageApi2]);
|
|
@@ -3285,8 +3379,8 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3285
3379
|
onChangeKpiList(kpiList);
|
|
3286
3380
|
}
|
|
3287
3381
|
}, [kpiList]);
|
|
3288
|
-
return /* @__PURE__ */
|
|
3289
|
-
|
|
3382
|
+
return /* @__PURE__ */ jsx37(
|
|
3383
|
+
ConfigProvider20,
|
|
3290
3384
|
{
|
|
3291
3385
|
theme: {
|
|
3292
3386
|
token: {
|
|
@@ -3294,11 +3388,11 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3294
3388
|
fontSize: 16
|
|
3295
3389
|
}
|
|
3296
3390
|
},
|
|
3297
|
-
children: /* @__PURE__ */
|
|
3391
|
+
children: /* @__PURE__ */ jsxs32("div", { className: "container-input", children: [
|
|
3298
3392
|
messageContainer,
|
|
3299
|
-
type === "number" && /* @__PURE__ */
|
|
3300
|
-
/* @__PURE__ */
|
|
3301
|
-
/* @__PURE__ */
|
|
3393
|
+
type === "number" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
|
|
3394
|
+
/* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
|
|
3395
|
+
/* @__PURE__ */ jsx37(
|
|
3302
3396
|
InputField,
|
|
3303
3397
|
{
|
|
3304
3398
|
value: nameKpi,
|
|
@@ -3311,7 +3405,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3311
3405
|
errorMessage: errors.nameKpi
|
|
3312
3406
|
}
|
|
3313
3407
|
),
|
|
3314
|
-
/* @__PURE__ */
|
|
3408
|
+
/* @__PURE__ */ jsx37(
|
|
3315
3409
|
InputField,
|
|
3316
3410
|
{
|
|
3317
3411
|
value: kpiValue,
|
|
@@ -3336,7 +3430,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3336
3430
|
errorMessage: errors.kpiValue
|
|
3337
3431
|
}
|
|
3338
3432
|
),
|
|
3339
|
-
/* @__PURE__ */
|
|
3433
|
+
/* @__PURE__ */ jsx37(
|
|
3340
3434
|
InputField,
|
|
3341
3435
|
{
|
|
3342
3436
|
value: unitValue,
|
|
@@ -3349,11 +3443,11 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3349
3443
|
errorMessage: errors.unitValue
|
|
3350
3444
|
}
|
|
3351
3445
|
),
|
|
3352
|
-
/* @__PURE__ */
|
|
3446
|
+
/* @__PURE__ */ jsx37(
|
|
3353
3447
|
"div",
|
|
3354
3448
|
{
|
|
3355
3449
|
className: `flex justify-end mt-[28px]`,
|
|
3356
|
-
children: /* @__PURE__ */
|
|
3450
|
+
children: /* @__PURE__ */ jsx37(
|
|
3357
3451
|
IconCirclePlus,
|
|
3358
3452
|
{
|
|
3359
3453
|
className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
|
|
@@ -3364,17 +3458,17 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3364
3458
|
}
|
|
3365
3459
|
)
|
|
3366
3460
|
] }),
|
|
3367
|
-
/* @__PURE__ */
|
|
3461
|
+
/* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32(
|
|
3368
3462
|
"div",
|
|
3369
3463
|
{
|
|
3370
3464
|
className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
|
|
3371
3465
|
children: [
|
|
3372
|
-
/* @__PURE__ */
|
|
3466
|
+
/* @__PURE__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
|
|
3373
3467
|
index + 1,
|
|
3374
3468
|
"."
|
|
3375
3469
|
] }),
|
|
3376
|
-
kpi.isEditing ? /* @__PURE__ */
|
|
3377
|
-
/* @__PURE__ */
|
|
3470
|
+
kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
|
|
3471
|
+
/* @__PURE__ */ jsx37(
|
|
3378
3472
|
InputField,
|
|
3379
3473
|
{
|
|
3380
3474
|
value: kpi.name,
|
|
@@ -3387,7 +3481,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3387
3481
|
errorMessage: itemErrors[kpi.id]?.name
|
|
3388
3482
|
}
|
|
3389
3483
|
),
|
|
3390
|
-
/* @__PURE__ */
|
|
3484
|
+
/* @__PURE__ */ jsx37(
|
|
3391
3485
|
InputField,
|
|
3392
3486
|
{
|
|
3393
3487
|
value: kpi.value?.toString(),
|
|
@@ -3417,7 +3511,7 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3417
3511
|
errorMessage: itemErrors[kpi.id]?.value
|
|
3418
3512
|
}
|
|
3419
3513
|
),
|
|
3420
|
-
/* @__PURE__ */
|
|
3514
|
+
/* @__PURE__ */ jsx37(
|
|
3421
3515
|
InputField,
|
|
3422
3516
|
{
|
|
3423
3517
|
value: kpi.unit,
|
|
@@ -3430,19 +3524,19 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3430
3524
|
errorMessage: itemErrors[kpi.id]?.unit
|
|
3431
3525
|
}
|
|
3432
3526
|
),
|
|
3433
|
-
/* @__PURE__ */
|
|
3527
|
+
/* @__PURE__ */ jsxs32(
|
|
3434
3528
|
"div",
|
|
3435
3529
|
{
|
|
3436
3530
|
className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
|
|
3437
3531
|
children: [
|
|
3438
|
-
/* @__PURE__ */
|
|
3532
|
+
/* @__PURE__ */ jsx37(
|
|
3439
3533
|
IconCheck2,
|
|
3440
3534
|
{
|
|
3441
3535
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3442
3536
|
onClick: () => handleSave(kpi.id, type)
|
|
3443
3537
|
}
|
|
3444
3538
|
),
|
|
3445
|
-
/* @__PURE__ */
|
|
3539
|
+
/* @__PURE__ */ jsx37(
|
|
3446
3540
|
IconX2,
|
|
3447
3541
|
{
|
|
3448
3542
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
@@ -3452,20 +3546,20 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3452
3546
|
]
|
|
3453
3547
|
}
|
|
3454
3548
|
)
|
|
3455
|
-
] }) : /* @__PURE__ */
|
|
3456
|
-
/* @__PURE__ */
|
|
3457
|
-
/* @__PURE__ */
|
|
3458
|
-
/* @__PURE__ */
|
|
3459
|
-
/* @__PURE__ */
|
|
3460
|
-
/* @__PURE__ */
|
|
3549
|
+
] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
|
|
3550
|
+
/* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
|
|
3551
|
+
/* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.value }),
|
|
3552
|
+
/* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.unit }),
|
|
3553
|
+
/* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
|
|
3554
|
+
/* @__PURE__ */ jsx37(
|
|
3461
3555
|
IconPencil,
|
|
3462
3556
|
{
|
|
3463
3557
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3464
3558
|
onClick: () => handleEdit(kpi.id)
|
|
3465
3559
|
}
|
|
3466
3560
|
),
|
|
3467
|
-
/* @__PURE__ */
|
|
3468
|
-
|
|
3561
|
+
/* @__PURE__ */ jsx37(
|
|
3562
|
+
IconTrash3,
|
|
3469
3563
|
{
|
|
3470
3564
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3471
3565
|
onClick: () => handleDelete(kpi.id)
|
|
@@ -3478,9 +3572,9 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3478
3572
|
kpi.id
|
|
3479
3573
|
)) })
|
|
3480
3574
|
] }),
|
|
3481
|
-
type === "text" && /* @__PURE__ */
|
|
3482
|
-
/* @__PURE__ */
|
|
3483
|
-
/* @__PURE__ */
|
|
3575
|
+
type === "text" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
|
|
3576
|
+
/* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
|
|
3577
|
+
/* @__PURE__ */ jsx37(
|
|
3484
3578
|
InputField,
|
|
3485
3579
|
{
|
|
3486
3580
|
value: nameKpi,
|
|
@@ -3493,11 +3587,11 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3493
3587
|
errorMessage: errors.nameKpi
|
|
3494
3588
|
}
|
|
3495
3589
|
),
|
|
3496
|
-
/* @__PURE__ */
|
|
3590
|
+
/* @__PURE__ */ jsx37(
|
|
3497
3591
|
"div",
|
|
3498
3592
|
{
|
|
3499
3593
|
className: `flex justify-end mt-[28px]`,
|
|
3500
|
-
children: /* @__PURE__ */
|
|
3594
|
+
children: /* @__PURE__ */ jsx37(
|
|
3501
3595
|
IconCirclePlus,
|
|
3502
3596
|
{
|
|
3503
3597
|
className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
|
|
@@ -3508,17 +3602,17 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3508
3602
|
}
|
|
3509
3603
|
)
|
|
3510
3604
|
] }),
|
|
3511
|
-
/* @__PURE__ */
|
|
3605
|
+
/* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32(
|
|
3512
3606
|
"div",
|
|
3513
3607
|
{
|
|
3514
3608
|
className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]",
|
|
3515
3609
|
children: [
|
|
3516
|
-
/* @__PURE__ */
|
|
3610
|
+
/* @__PURE__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
|
|
3517
3611
|
index + 1,
|
|
3518
3612
|
"."
|
|
3519
3613
|
] }),
|
|
3520
|
-
kpi.isEditing ? /* @__PURE__ */
|
|
3521
|
-
/* @__PURE__ */
|
|
3614
|
+
kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
|
|
3615
|
+
/* @__PURE__ */ jsx37(
|
|
3522
3616
|
InputField,
|
|
3523
3617
|
{
|
|
3524
3618
|
value: kpi.name,
|
|
@@ -3531,19 +3625,19 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3531
3625
|
errorMessage: itemErrors[kpi.id]?.name
|
|
3532
3626
|
}
|
|
3533
3627
|
),
|
|
3534
|
-
/* @__PURE__ */
|
|
3628
|
+
/* @__PURE__ */ jsxs32(
|
|
3535
3629
|
"div",
|
|
3536
3630
|
{
|
|
3537
3631
|
className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
|
|
3538
3632
|
children: [
|
|
3539
|
-
/* @__PURE__ */
|
|
3633
|
+
/* @__PURE__ */ jsx37(
|
|
3540
3634
|
IconCheck2,
|
|
3541
3635
|
{
|
|
3542
3636
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3543
3637
|
onClick: () => handleSave(kpi.id, type)
|
|
3544
3638
|
}
|
|
3545
3639
|
),
|
|
3546
|
-
/* @__PURE__ */
|
|
3640
|
+
/* @__PURE__ */ jsx37(
|
|
3547
3641
|
IconX2,
|
|
3548
3642
|
{
|
|
3549
3643
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
@@ -3553,18 +3647,18 @@ function KpiSection({ type, onChangeKpiList }) {
|
|
|
3553
3647
|
]
|
|
3554
3648
|
}
|
|
3555
3649
|
)
|
|
3556
|
-
] }) : /* @__PURE__ */
|
|
3557
|
-
/* @__PURE__ */
|
|
3558
|
-
/* @__PURE__ */
|
|
3559
|
-
/* @__PURE__ */
|
|
3650
|
+
] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
|
|
3651
|
+
/* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
|
|
3652
|
+
/* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
|
|
3653
|
+
/* @__PURE__ */ jsx37(
|
|
3560
3654
|
IconPencil,
|
|
3561
3655
|
{
|
|
3562
3656
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3563
3657
|
onClick: () => handleEdit(kpi.id)
|
|
3564
3658
|
}
|
|
3565
3659
|
),
|
|
3566
|
-
/* @__PURE__ */
|
|
3567
|
-
|
|
3660
|
+
/* @__PURE__ */ jsx37(
|
|
3661
|
+
IconTrash3,
|
|
3568
3662
|
{
|
|
3569
3663
|
className: "w-[30px] h-[30px] cursor-pointer",
|
|
3570
3664
|
onClick: () => handleDelete(kpi.id)
|
|
@@ -3604,6 +3698,7 @@ export {
|
|
|
3604
3698
|
Radio,
|
|
3605
3699
|
RadioGroup,
|
|
3606
3700
|
SecondaryButton,
|
|
3701
|
+
SelectCustom,
|
|
3607
3702
|
SelectField,
|
|
3608
3703
|
SelectFieldGroup,
|
|
3609
3704
|
SelectFieldStatus,
|