sprint-asia-custom-component 0.1.44 → 0.1.46
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.js +515 -6
- package/package.json +1 -1
- package/src/components/button/dangerbutton/index.js +1 -0
- package/src/components/button/outlinebutton/index.js +1 -0
- package/src/components/button/primarybutton/index.js +1 -0
- package/src/components/dropzone/uploadfile/index.js +37 -29
- package/src/components/table/listTable/cellmodefive/index.js +107 -0
- package/src/components/table/listTable/cellmodelseven/index.js +120 -0
- package/src/components/table/listTable/cellmodesix/index.js +139 -0
- package/src/components/table/listTable/report/detaildivision/index.js +174 -0
- package/src/index.js +17 -1
- package/src/templates/index.js +99 -0
|
@@ -1,40 +1,48 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { useDropzone } from
|
|
3
|
-
import { PiFileArrowUpDuotone } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useDropzone } from "react-dropzone";
|
|
3
|
+
import { PiFileArrowUpDuotone } from "react-icons/pi";
|
|
4
4
|
|
|
5
5
|
const DropzoneUploadFile = ({
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
title = "Title Dropzone",
|
|
7
|
+
subtitle = "Format File PDF, JPEG JPG, Maximal File 5 MB",
|
|
8
|
+
required = false,
|
|
8
9
|
}) => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
const { getRootProps, getInputProps } = useDropzone({
|
|
11
|
+
accept: {
|
|
12
|
+
"image/jpeg": [],
|
|
13
|
+
"image/png": [],
|
|
14
|
+
},
|
|
15
|
+
});
|
|
15
16
|
|
|
16
17
|
return (
|
|
17
|
-
<div className=
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
18
|
+
<div className="w-full">
|
|
19
|
+
<div className="flex items-center">
|
|
20
|
+
<p className="text-black text-sm mb-1">{title}</p>
|
|
21
|
+
{required && (
|
|
22
|
+
<p className="text-sm font-normal text-danger500 ml-1">*</p>
|
|
23
|
+
)}
|
|
24
|
+
</div>
|
|
25
|
+
<div className="cursor-pointer">
|
|
26
|
+
<div
|
|
27
|
+
{...getRootProps({ className: "dropzone" })}
|
|
28
|
+
className="bg-neutral20 w-full h-28 rounded-lg border-2 border-neutral50 border-dashed"
|
|
29
|
+
>
|
|
30
|
+
<input {...getInputProps()} required={required} />
|
|
31
|
+
<div className="flex w-full h-full justify-center items-center text-center">
|
|
32
|
+
<div>
|
|
33
|
+
<div className="flex justify-center">
|
|
34
|
+
<PiFileArrowUpDuotone size={16} className="text-neutral300" />
|
|
35
|
+
</div>
|
|
36
|
+
<p className="text-sm text-neutral300 mt-2">
|
|
37
|
+
Drag & Drop File Here or Chose File
|
|
38
|
+
</p>
|
|
33
39
|
</div>
|
|
40
|
+
</div>
|
|
34
41
|
</div>
|
|
35
|
-
|
|
42
|
+
</div>
|
|
43
|
+
<p className="text-xs text-neutral300 mt-1">{subtitle}</p>
|
|
36
44
|
</div>
|
|
37
45
|
);
|
|
38
46
|
};
|
|
39
47
|
|
|
40
|
-
export default DropzoneUploadFile;
|
|
48
|
+
export default DropzoneUploadFile;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Chip from '../../../chip'
|
|
3
|
+
|
|
4
|
+
const CellModelFive = ({
|
|
5
|
+
Column_One_A,
|
|
6
|
+
Column_One_B,
|
|
7
|
+
Column_One_C,
|
|
8
|
+
Column_Two_A,
|
|
9
|
+
Column_Two_B,
|
|
10
|
+
Column_Three_A,
|
|
11
|
+
Column_Three_B,
|
|
12
|
+
Column_Five_A = "Active",
|
|
13
|
+
onClickBody,
|
|
14
|
+
imageUrl,
|
|
15
|
+
}) => {
|
|
16
|
+
let chipType = "success";
|
|
17
|
+
let chipTitle = Column_Five_A;
|
|
18
|
+
|
|
19
|
+
switch (Column_Five_A.toLowerCase()) {
|
|
20
|
+
case "active":
|
|
21
|
+
chipType = "success";
|
|
22
|
+
chipTitle = "Active";
|
|
23
|
+
break;
|
|
24
|
+
case "waiting":
|
|
25
|
+
chipType = "primary";
|
|
26
|
+
chipTitle = "Waiting";
|
|
27
|
+
break;
|
|
28
|
+
case "inactive":
|
|
29
|
+
chipType = "neutral";
|
|
30
|
+
chipTitle = "Inactive";
|
|
31
|
+
break;
|
|
32
|
+
}
|
|
33
|
+
return (
|
|
34
|
+
<tr
|
|
35
|
+
className={`bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`}
|
|
36
|
+
>
|
|
37
|
+
<td className="align-top">
|
|
38
|
+
<div className='flex items-center'
|
|
39
|
+
onClick={
|
|
40
|
+
() => {
|
|
41
|
+
if (onClickBody != undefined) {
|
|
42
|
+
onClickBody()
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}>
|
|
46
|
+
<div className="flex items-center py-3.5 px-4">
|
|
47
|
+
<img src={imageUrl} alt="icon" className="w-10 h-10 mr-2 rounded-full self-start" />
|
|
48
|
+
<div>
|
|
49
|
+
<p className='font-semibold text-black text-sm'>{Column_One_A ? Column_One_A : "-"}</p>
|
|
50
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_B ? Column_One_B : "-"}</p>
|
|
51
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_C ? Column_One_C : "-"}</p>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</td>
|
|
56
|
+
<td className="align-top">
|
|
57
|
+
<div className='flex items-center'
|
|
58
|
+
onClick={
|
|
59
|
+
() => {
|
|
60
|
+
if (onClickBody != undefined) {
|
|
61
|
+
onClickBody()
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}>
|
|
65
|
+
<div className= "py-3.5 px-4">
|
|
66
|
+
<p className='font-semibold text-black text-sm'>{Column_Two_A ? Column_Two_A : "-"}</p>
|
|
67
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Two_B ? Column_Two_B : "-"}</p>
|
|
68
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Three_B ? Column_Three_B : "-"}</p>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</td>
|
|
72
|
+
<td className="align-top">
|
|
73
|
+
<div className='flex items-center'
|
|
74
|
+
onClick={
|
|
75
|
+
() => {
|
|
76
|
+
if (onClickBody != undefined) {
|
|
77
|
+
onClickBody()
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}>
|
|
81
|
+
<div className= "py-3.5 px-4">
|
|
82
|
+
<p className='font-normal text-black text-sm'>{Column_Three_A ? Column_Three_A : "-"}</p>
|
|
83
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Three_B ? Column_Three_B : "-"}</p>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</td>
|
|
87
|
+
<td className="align-top">
|
|
88
|
+
<div className='flex items-center'
|
|
89
|
+
onClick={
|
|
90
|
+
() => {
|
|
91
|
+
if (onClickBody != undefined) {
|
|
92
|
+
onClickBody()
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}>
|
|
96
|
+
<div className= "py-3.5 px-4">
|
|
97
|
+
<Chip
|
|
98
|
+
type={chipType}
|
|
99
|
+
title={chipTitle}/>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</td>
|
|
103
|
+
</tr>
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export default CellModelFive
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { PiTrash, PiNotePencil } from 'react-icons/pi'
|
|
3
|
+
|
|
4
|
+
const CellModelSeven = ({
|
|
5
|
+
Column_One_A,
|
|
6
|
+
Column_One_B,
|
|
7
|
+
Column_Two_A,
|
|
8
|
+
Column_Two_B,
|
|
9
|
+
Column_Three_A,
|
|
10
|
+
Column_Four_A,
|
|
11
|
+
onClickEdit,
|
|
12
|
+
onClickDelete,
|
|
13
|
+
Column_Six_A = "Active",
|
|
14
|
+
onClickBody,
|
|
15
|
+
}) => {
|
|
16
|
+
let chipType = "success";
|
|
17
|
+
let chipTitle = Column_Six_A;
|
|
18
|
+
|
|
19
|
+
switch (Column_Six_A.toLowerCase()) {
|
|
20
|
+
case "active":
|
|
21
|
+
chipType = "success";
|
|
22
|
+
chipTitle = "Active";
|
|
23
|
+
break;
|
|
24
|
+
case "waiting":
|
|
25
|
+
chipType = "primary";
|
|
26
|
+
chipTitle = "Waiting";
|
|
27
|
+
break;
|
|
28
|
+
case "inactive":
|
|
29
|
+
chipType = "neutral";
|
|
30
|
+
chipTitle = "Inactive";
|
|
31
|
+
break;
|
|
32
|
+
}
|
|
33
|
+
return (
|
|
34
|
+
<tr
|
|
35
|
+
className={`bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`}
|
|
36
|
+
>
|
|
37
|
+
<td className="align-top">
|
|
38
|
+
<div className='flex items-center'
|
|
39
|
+
onClick={
|
|
40
|
+
() => {
|
|
41
|
+
if (onClickBody != undefined) {
|
|
42
|
+
onClickBody()
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}>
|
|
46
|
+
<div className= "py-3.5 px-4">
|
|
47
|
+
<p className='font-semibold text-black text-sm'>{Column_One_A ? Column_One_A : "-"}</p>
|
|
48
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_B ? Column_One_B : "-"}</p>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</td>
|
|
52
|
+
<td className="align-top">
|
|
53
|
+
<div className='flex items-center'
|
|
54
|
+
onClick={
|
|
55
|
+
() => {
|
|
56
|
+
if (onClickBody != undefined) {
|
|
57
|
+
onClickBody()
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}>
|
|
61
|
+
<div className= "py-3.5 px-4">
|
|
62
|
+
<p className='font-semibold text-black text-sm'>{Column_Two_A ? Column_Two_A : "-"}</p>
|
|
63
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Two_B ? Column_Two_B : "-"}</p>
|
|
64
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Two_B ? Column_Two_B : "-"}</p>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</td>
|
|
68
|
+
<td className="align-top">
|
|
69
|
+
<div className='flex items-center'
|
|
70
|
+
onClick={
|
|
71
|
+
() => {
|
|
72
|
+
if (onClickBody != undefined) {
|
|
73
|
+
onClickBody()
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}>
|
|
77
|
+
<div className= "flex items-center py-3.5 px-4">
|
|
78
|
+
<p className='font-semibold text-black text-sm'>{Column_Three_A ? Column_Three_A : "-"}</p>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</td>
|
|
82
|
+
<td className="align-top">
|
|
83
|
+
<div className='flex items-center'
|
|
84
|
+
onClick={
|
|
85
|
+
() => {
|
|
86
|
+
if (onClickBody != undefined) {
|
|
87
|
+
onClickBody()
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}>
|
|
91
|
+
<div className= "py-3.5 px-4">
|
|
92
|
+
<p className='font-semibold text-black text-sm'>{Column_Four_A ? Column_Four_A : "-"}</p>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</td>
|
|
96
|
+
<td className='items-start flex h-full'>
|
|
97
|
+
<div className='flex items-start'>
|
|
98
|
+
<div className= "flex py-3.5 px-4">
|
|
99
|
+
<div onClick={onClickEdit}>
|
|
100
|
+
<PiNotePencil
|
|
101
|
+
size="24"
|
|
102
|
+
variant="Bold"
|
|
103
|
+
className="text-primary500 cursor-pointer mr-2"
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
106
|
+
<div onClick={onClickDelete}>
|
|
107
|
+
<PiTrash
|
|
108
|
+
size="24"
|
|
109
|
+
variant="Bold"
|
|
110
|
+
className="text-primary500 cursor-pointer"
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</td>
|
|
116
|
+
</tr>
|
|
117
|
+
)
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export default CellModelSeven
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Chip from '../../../chip'
|
|
3
|
+
import { PiTrash, PiNotePencil} from 'react-icons/pi'
|
|
4
|
+
|
|
5
|
+
const CellModelSix = ({
|
|
6
|
+
Column_One_A,
|
|
7
|
+
Column_One_B,
|
|
8
|
+
Column_One_C,
|
|
9
|
+
Column_Two_A,
|
|
10
|
+
Column_Two_B,
|
|
11
|
+
Column_Three_A,
|
|
12
|
+
Column_Three_B,
|
|
13
|
+
Column_Four_A,
|
|
14
|
+
Column_Four_B,
|
|
15
|
+
Column_Five_A = "Active",
|
|
16
|
+
onClickDelete,
|
|
17
|
+
onClickBody,
|
|
18
|
+
imageUrl,
|
|
19
|
+
}) => {
|
|
20
|
+
let chipType = "success";
|
|
21
|
+
let chipTitle = Column_Five_A;
|
|
22
|
+
|
|
23
|
+
switch (Column_Five_A.toLowerCase()) {
|
|
24
|
+
case "active":
|
|
25
|
+
chipType = "success";
|
|
26
|
+
chipTitle = "Active";
|
|
27
|
+
break;
|
|
28
|
+
case "waiting":
|
|
29
|
+
chipType = "primary";
|
|
30
|
+
chipTitle = "Waiting";
|
|
31
|
+
break;
|
|
32
|
+
case "inactive":
|
|
33
|
+
chipType = "neutral";
|
|
34
|
+
chipTitle = "Inactive";
|
|
35
|
+
break;
|
|
36
|
+
}
|
|
37
|
+
return (
|
|
38
|
+
<tr
|
|
39
|
+
className={`bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`}
|
|
40
|
+
>
|
|
41
|
+
<td className="align-top">
|
|
42
|
+
<div className='flex items-center'
|
|
43
|
+
onClick={
|
|
44
|
+
() => {
|
|
45
|
+
if (onClickBody != undefined) {
|
|
46
|
+
onClickBody()
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}>
|
|
50
|
+
<div className="flex items-center py-3.5 px-4">
|
|
51
|
+
<img src={imageUrl} alt="icon" className="w-10 h-10 mr-2 rounded-full self-start" />
|
|
52
|
+
<div>
|
|
53
|
+
<p className='font-semibold text-black text-sm'>{Column_One_A ? Column_One_A : "-"}</p>
|
|
54
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_B ? Column_One_B : "-"}</p>
|
|
55
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_C ? Column_One_C : "-"}</p>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</td>
|
|
60
|
+
<td className="align-top">
|
|
61
|
+
<div className='flex items-center'
|
|
62
|
+
onClick={
|
|
63
|
+
() => {
|
|
64
|
+
if (onClickBody != undefined) {
|
|
65
|
+
onClickBody()
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}>
|
|
69
|
+
<div className= "py-3.5 px-4">
|
|
70
|
+
<p className='font-semibold text-black text-sm'>{Column_Two_A ? Column_Two_A : "-"}</p>
|
|
71
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Two_B ? Column_Two_B : "-"}</p>
|
|
72
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Three_B ? Column_Three_B : "-"}</p>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</td>
|
|
76
|
+
<td className="align-top">
|
|
77
|
+
<div className='flex items-center'
|
|
78
|
+
onClick={
|
|
79
|
+
() => {
|
|
80
|
+
if (onClickBody != undefined) {
|
|
81
|
+
onClickBody()
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}>
|
|
85
|
+
<div className= "py-3.5 px-4">
|
|
86
|
+
<p className='font-normal text-black text-sm'>{Column_Three_A ? Column_Three_A : "-"}</p>
|
|
87
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Three_B ? Column_Three_B : "-"}</p>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</td>
|
|
91
|
+
<td className="align-top">
|
|
92
|
+
<div className='flex items-center'
|
|
93
|
+
onClick={
|
|
94
|
+
() => {
|
|
95
|
+
if (onClickBody != undefined) {
|
|
96
|
+
onClickBody()
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}>
|
|
100
|
+
<div className= "py-3.5 px-4">
|
|
101
|
+
<p className='font-normal text-black text-sm'>{Column_Four_A ? Column_Four_A : "-"}</p>
|
|
102
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Four_B ? Column_Four_B : "-"}</p>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</td>
|
|
106
|
+
<td className="align-top">
|
|
107
|
+
<div className='flex items-center'
|
|
108
|
+
onClick={
|
|
109
|
+
() => {
|
|
110
|
+
if (onClickBody != undefined) {
|
|
111
|
+
onClickBody()
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}>
|
|
115
|
+
<div className= "py-3.5 px-4">
|
|
116
|
+
<Chip
|
|
117
|
+
type={chipType}
|
|
118
|
+
title={chipTitle}/>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</td>
|
|
122
|
+
<td className='items-start flex h-full'>
|
|
123
|
+
<div className='flex items-start'>
|
|
124
|
+
<div className= "flex py-3.5 px-4">
|
|
125
|
+
<div onClick={onClickDelete}>
|
|
126
|
+
<PiTrash
|
|
127
|
+
size="24"
|
|
128
|
+
variant="Bold"
|
|
129
|
+
className="text-primary500 cursor-pointer"
|
|
130
|
+
/>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</td>
|
|
135
|
+
</tr>
|
|
136
|
+
)
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
export default CellModelSix
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Chip from '../../../../chip';
|
|
3
|
+
import { PiClock, PiUser, PiFileArrowDown } from 'react-icons/pi';
|
|
4
|
+
import DangerButton from '../../../../button/dangerbutton';
|
|
5
|
+
import OutlineButton from '../../../../button/outlinebutton';
|
|
6
|
+
import DescriptionFile from '../../../../description/file';
|
|
7
|
+
|
|
8
|
+
const DetailDivision = ({
|
|
9
|
+
statusTransaction = "Loading...",
|
|
10
|
+
orderId = "Loading...",
|
|
11
|
+
refId = "Loading...",
|
|
12
|
+
companyName = "Loading...",
|
|
13
|
+
divisionName = "Loading...",
|
|
14
|
+
dateTransaction = "Loading...",
|
|
15
|
+
productName = "Loading...",
|
|
16
|
+
productCode = "Loading...",
|
|
17
|
+
userNumber = "Loading...",
|
|
18
|
+
denom = "Loading...",
|
|
19
|
+
cogs = "Loading...",
|
|
20
|
+
price = "Loading...",
|
|
21
|
+
billerName = "Loading...",
|
|
22
|
+
trxId = "Loading..."
|
|
23
|
+
}) => {
|
|
24
|
+
const options = {
|
|
25
|
+
year: 'numeric',
|
|
26
|
+
month: 'short',
|
|
27
|
+
day: 'numeric',
|
|
28
|
+
hour: 'numeric',
|
|
29
|
+
minute: 'numeric',
|
|
30
|
+
hour12: false,
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
const headingStyle = {
|
|
36
|
+
fontFamily: 'Inter',
|
|
37
|
+
fontSize: '18px',
|
|
38
|
+
fontWeight: 600,
|
|
39
|
+
lineHeight: '25.2px',
|
|
40
|
+
textAlign: 'left',
|
|
41
|
+
};
|
|
42
|
+
return (
|
|
43
|
+
<div className='py-1 px-2 bg-neutral20'>
|
|
44
|
+
<div className='bg-white border border-neutral40 pl-6 pr-6'>
|
|
45
|
+
<div className='flex justify-between'>
|
|
46
|
+
<div>
|
|
47
|
+
<div>
|
|
48
|
+
<div className='pt-6 pb-2'>
|
|
49
|
+
<p style={headingStyle}>Division Information</p>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<hr className='w-full text-neutral40' />
|
|
55
|
+
<div className='pt-4 pb-4 pr-4'>
|
|
56
|
+
<div className="grid grid-cols-3 gap-3">
|
|
57
|
+
<div>
|
|
58
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
59
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
60
|
+
<p className='text-neutral500 font-normal text-sm mt-4'>Denom</p>
|
|
61
|
+
<p className='text-black font-semibold text-base'>{denom}</p>
|
|
62
|
+
</div>
|
|
63
|
+
<div className='ml-4'>
|
|
64
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
65
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
66
|
+
<p className='text-neutral500 font-normal text-sm mt-4'>Denom</p>
|
|
67
|
+
<p className='text-black font-semibold text-base'>{denom}</p>
|
|
68
|
+
</div>
|
|
69
|
+
<div className='ml-4'>
|
|
70
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
71
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
72
|
+
<p className='text-neutral500 font-normal text-sm mt-4'>Denom</p>
|
|
73
|
+
<p className='text-black font-semibold text-base'>{denom}</p>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div className='flex justify-between'>
|
|
79
|
+
<div>
|
|
80
|
+
<div>
|
|
81
|
+
<div className='pt-6 pb-2'>
|
|
82
|
+
<p style={headingStyle}>Address Information</p>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<hr className='w-full text-neutral40' />
|
|
88
|
+
<div className='pt-4 pb-4 pr-4'>
|
|
89
|
+
<div className="grid grid-cols-3 gap-3">
|
|
90
|
+
<div>
|
|
91
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
92
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
93
|
+
<p className='text-neutral500 font-normal text-sm mt-4'>Denom</p>
|
|
94
|
+
<p className='text-black font-semibold text-base'>{denom}</p>
|
|
95
|
+
</div>
|
|
96
|
+
<div className='ml-4'>
|
|
97
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
98
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
99
|
+
</div>
|
|
100
|
+
<div className='ml-4'>
|
|
101
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
102
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
103
|
+
<p className='text-neutral500 font-normal text-sm mt-4'>Denom</p>
|
|
104
|
+
<p className='text-black font-semibold text-base'>{denom}</p>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div className='flex justify-between'>
|
|
110
|
+
<div>
|
|
111
|
+
<div>
|
|
112
|
+
<div className='pt-6 pb-2'>
|
|
113
|
+
<p style={headingStyle}>Division Information</p>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
<hr className='w-full text-neutral40' />
|
|
119
|
+
<div className='pt-4 pb-4 pr-4'>
|
|
120
|
+
<div className="grid grid-cols-3 gap-3">
|
|
121
|
+
<div>
|
|
122
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
123
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
124
|
+
<p className='text-neutral500 font-normal text-sm mt-4'>Denom</p>
|
|
125
|
+
<p className='text-black font-semibold text-base'>{denom}</p>
|
|
126
|
+
</div>
|
|
127
|
+
<div className='ml-4'>
|
|
128
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
129
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
130
|
+
<p className='text-neutral500 font-normal text-sm mt-4'>Denom</p>
|
|
131
|
+
<p className='text-black font-semibold text-base'>{denom}</p>
|
|
132
|
+
</div>
|
|
133
|
+
<div className='ml-4'>
|
|
134
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Number</p>
|
|
135
|
+
<p className='text-black font-semibold text-base'>{userNumber}</p>
|
|
136
|
+
<p className='text-neutral500 font-normal text-sm mt-4'>Denom</p>
|
|
137
|
+
<p className='text-black font-semibold text-base'>{denom}</p>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div className='flex justify-between'>
|
|
143
|
+
<div>
|
|
144
|
+
<div>
|
|
145
|
+
<div className='pt-6 pb-2'>
|
|
146
|
+
<p style={headingStyle}>Document</p>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
<hr className='w-full text-neutral40' />
|
|
152
|
+
<div className='pt-4 pb-4 pr-4'>
|
|
153
|
+
<div className="grid grid-cols-3 gap-3">
|
|
154
|
+
<div>
|
|
155
|
+
<p className='text-neutral500 font-normal text-sm mt-1'>Project Brief</p>
|
|
156
|
+
<DescriptionFile title = ""></DescriptionFile>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div className='flex justify-end space-x-4 mt-10'>
|
|
161
|
+
<DangerButton title="Delete Division" size='detail division' />
|
|
162
|
+
<OutlineButton title="Edit" size='detail division' />
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
</div>
|
|
171
|
+
);
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
export default DetailDivision;
|
package/src/index.js
CHANGED
|
@@ -64,12 +64,28 @@ import CellModelOne from './components/table/listTable/cellmodelone';
|
|
|
64
64
|
import CellModelTwo from './components/table/listTable/cellmodeltwo';
|
|
65
65
|
import CellModelThree from './components/table/listTable/cellmodelthree';
|
|
66
66
|
import CellModelFour from './components/table/listTable/cellmodefour';
|
|
67
|
+
import CellModelFive from './components/table/listTable/cellmodefive';
|
|
68
|
+
import CellModelSix from './components/table/listTable/cellmodesix';
|
|
69
|
+
import CellModelSeven from './components/table/listTable/cellmodelseven';
|
|
70
|
+
import DetailDivision from './components/table/listTable/report/detaildivision';
|
|
67
71
|
import SearchDropdown from './components/searchdropdown';
|
|
68
72
|
import FilterDropdown from './components/filter/filterDropdown';
|
|
69
73
|
import Footer from './components/footer';
|
|
70
74
|
import Header from './components/header';
|
|
71
75
|
|
|
72
76
|
|
|
73
|
-
export {Header, Footer, CellModelOne, CellModelTwo, CellModelThree,CellModelFour, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
77
|
+
export {Header, Footer, CellModelOne, CellModelTwo, CellModelThree,CellModelFour,CellModelFive,CellModelSix,CellModelSeven,DetailDivision, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
74
78
|
SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
|
|
75
79
|
DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
// Dokumentasi Publishing NPM :
|
|
84
|
+
// 1. Pull code
|
|
85
|
+
// 2. Change code
|
|
86
|
+
// 3. Creating dummy component in template page
|
|
87
|
+
// 4. Change version of package.json
|
|
88
|
+
// 5. npm run build
|
|
89
|
+
// 6. push to gitlab
|
|
90
|
+
// 7. npm login
|
|
91
|
+
// 8. npm publish
|