sprint-asia-custom-component 0.1.43 → 0.1.45
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 +503 -2
- 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/table/listTable/cellmodefive/index.js +107 -0
- package/src/components/table/listTable/cellmodelseven/index.js +120 -0
- package/src/components/table/listTable/cellmodelthree/index.js +2 -2
- 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 +98 -0
package/dist/index.js
CHANGED
|
@@ -128,6 +128,7 @@
|
|
|
128
128
|
${size === "large" && "text-lg h-10"}
|
|
129
129
|
${size === "very large" && "text-xl h-12"}
|
|
130
130
|
${size === "extra very large" && "text-2xl h-14"}
|
|
131
|
+
${size === "detail division" && "text-sm h-10 w-24"}
|
|
131
132
|
rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`,
|
|
132
133
|
disabled: !isActive,
|
|
133
134
|
onClick: handleClick,
|
|
@@ -230,6 +231,7 @@
|
|
|
230
231
|
${size === "large" && "text-lg h-10"}
|
|
231
232
|
${size === "very large" && "text-xl h-12"}
|
|
232
233
|
${size === "extra very large" && "text-2xl h-14"}
|
|
234
|
+
${size === "detail division" && "text-sm h-10"}
|
|
233
235
|
rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`,
|
|
234
236
|
disabled: !isActive,
|
|
235
237
|
onClick: handleClick,
|
|
@@ -46892,13 +46894,13 @@
|
|
|
46892
46894
|
}, /*#__PURE__*/React__default["default"].createElement(PiNotePencil, {
|
|
46893
46895
|
size: "24",
|
|
46894
46896
|
variant: "Bold",
|
|
46895
|
-
className: "text-
|
|
46897
|
+
className: "text-primary500 cursor-pointer mr-2"
|
|
46896
46898
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46897
46899
|
onClick: onClickDelete
|
|
46898
46900
|
}, /*#__PURE__*/React__default["default"].createElement(PiTrash, {
|
|
46899
46901
|
size: "24",
|
|
46900
46902
|
variant: "Bold",
|
|
46901
|
-
className: "text-
|
|
46903
|
+
className: "text-primary500 cursor-pointer"
|
|
46902
46904
|
}))))));
|
|
46903
46905
|
};
|
|
46904
46906
|
|
|
@@ -47039,6 +47041,501 @@
|
|
|
47039
47041
|
}))))));
|
|
47040
47042
|
};
|
|
47041
47043
|
|
|
47044
|
+
const CellModelFive = ({
|
|
47045
|
+
Column_One_A,
|
|
47046
|
+
Column_One_B,
|
|
47047
|
+
Column_One_C,
|
|
47048
|
+
Column_Two_A,
|
|
47049
|
+
Column_Two_B,
|
|
47050
|
+
Column_Three_A,
|
|
47051
|
+
Column_Three_B,
|
|
47052
|
+
Column_Five_A = "Active",
|
|
47053
|
+
onClickBody,
|
|
47054
|
+
imageUrl
|
|
47055
|
+
}) => {
|
|
47056
|
+
let chipType = "success";
|
|
47057
|
+
let chipTitle = Column_Five_A;
|
|
47058
|
+
switch (Column_Five_A.toLowerCase()) {
|
|
47059
|
+
case "active":
|
|
47060
|
+
chipType = "success";
|
|
47061
|
+
chipTitle = "Active";
|
|
47062
|
+
break;
|
|
47063
|
+
case "waiting":
|
|
47064
|
+
chipType = "primary";
|
|
47065
|
+
chipTitle = "Waiting";
|
|
47066
|
+
break;
|
|
47067
|
+
case "inactive":
|
|
47068
|
+
chipType = "neutral";
|
|
47069
|
+
chipTitle = "Inactive";
|
|
47070
|
+
break;
|
|
47071
|
+
}
|
|
47072
|
+
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
47073
|
+
className: `bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`
|
|
47074
|
+
}, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47075
|
+
className: "align-top"
|
|
47076
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47077
|
+
className: "flex items-center",
|
|
47078
|
+
onClick: () => {
|
|
47079
|
+
if (onClickBody != undefined) {
|
|
47080
|
+
onClickBody();
|
|
47081
|
+
}
|
|
47082
|
+
}
|
|
47083
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47084
|
+
className: "flex items-center py-3.5 px-4"
|
|
47085
|
+
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
47086
|
+
src: imageUrl,
|
|
47087
|
+
alt: "icon",
|
|
47088
|
+
className: "w-10 h-10 mr-2 rounded-full self-start"
|
|
47089
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47090
|
+
className: "font-semibold text-black text-sm"
|
|
47091
|
+
}, Column_One_A ? Column_One_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47092
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47093
|
+
}, Column_One_B ? Column_One_B : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47094
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47095
|
+
}, Column_One_C ? Column_One_C : "-"))))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47096
|
+
className: "align-top"
|
|
47097
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47098
|
+
className: "flex items-center",
|
|
47099
|
+
onClick: () => {
|
|
47100
|
+
if (onClickBody != undefined) {
|
|
47101
|
+
onClickBody();
|
|
47102
|
+
}
|
|
47103
|
+
}
|
|
47104
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47105
|
+
className: "py-3.5 px-4"
|
|
47106
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47107
|
+
className: "font-semibold text-black text-sm"
|
|
47108
|
+
}, Column_Two_A ? Column_Two_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47109
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47110
|
+
}, Column_Two_B ? Column_Two_B : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47111
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47112
|
+
}, Column_Three_B ? Column_Three_B : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47113
|
+
className: "align-top"
|
|
47114
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47115
|
+
className: "flex items-center",
|
|
47116
|
+
onClick: () => {
|
|
47117
|
+
if (onClickBody != undefined) {
|
|
47118
|
+
onClickBody();
|
|
47119
|
+
}
|
|
47120
|
+
}
|
|
47121
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47122
|
+
className: "py-3.5 px-4"
|
|
47123
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47124
|
+
className: "font-normal text-black text-sm"
|
|
47125
|
+
}, Column_Three_A ? Column_Three_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47126
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47127
|
+
}, Column_Three_B ? Column_Three_B : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47128
|
+
className: "align-top"
|
|
47129
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47130
|
+
className: "flex items-center",
|
|
47131
|
+
onClick: () => {
|
|
47132
|
+
if (onClickBody != undefined) {
|
|
47133
|
+
onClickBody();
|
|
47134
|
+
}
|
|
47135
|
+
}
|
|
47136
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47137
|
+
className: "py-3.5 px-4"
|
|
47138
|
+
}, /*#__PURE__*/React__default["default"].createElement(Chip, {
|
|
47139
|
+
type: chipType,
|
|
47140
|
+
title: chipTitle
|
|
47141
|
+
})))));
|
|
47142
|
+
};
|
|
47143
|
+
|
|
47144
|
+
const CellModelSix = ({
|
|
47145
|
+
Column_One_A,
|
|
47146
|
+
Column_One_B,
|
|
47147
|
+
Column_One_C,
|
|
47148
|
+
Column_Two_A,
|
|
47149
|
+
Column_Two_B,
|
|
47150
|
+
Column_Three_A,
|
|
47151
|
+
Column_Three_B,
|
|
47152
|
+
Column_Four_A,
|
|
47153
|
+
Column_Four_B,
|
|
47154
|
+
Column_Five_A = "Active",
|
|
47155
|
+
onClickDelete,
|
|
47156
|
+
onClickBody,
|
|
47157
|
+
imageUrl
|
|
47158
|
+
}) => {
|
|
47159
|
+
let chipType = "success";
|
|
47160
|
+
let chipTitle = Column_Five_A;
|
|
47161
|
+
switch (Column_Five_A.toLowerCase()) {
|
|
47162
|
+
case "active":
|
|
47163
|
+
chipType = "success";
|
|
47164
|
+
chipTitle = "Active";
|
|
47165
|
+
break;
|
|
47166
|
+
case "waiting":
|
|
47167
|
+
chipType = "primary";
|
|
47168
|
+
chipTitle = "Waiting";
|
|
47169
|
+
break;
|
|
47170
|
+
case "inactive":
|
|
47171
|
+
chipType = "neutral";
|
|
47172
|
+
chipTitle = "Inactive";
|
|
47173
|
+
break;
|
|
47174
|
+
}
|
|
47175
|
+
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
47176
|
+
className: `bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`
|
|
47177
|
+
}, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47178
|
+
className: "align-top"
|
|
47179
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47180
|
+
className: "flex items-center",
|
|
47181
|
+
onClick: () => {
|
|
47182
|
+
if (onClickBody != undefined) {
|
|
47183
|
+
onClickBody();
|
|
47184
|
+
}
|
|
47185
|
+
}
|
|
47186
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47187
|
+
className: "flex items-center py-3.5 px-4"
|
|
47188
|
+
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
47189
|
+
src: imageUrl,
|
|
47190
|
+
alt: "icon",
|
|
47191
|
+
className: "w-10 h-10 mr-2 rounded-full self-start"
|
|
47192
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47193
|
+
className: "font-semibold text-black text-sm"
|
|
47194
|
+
}, Column_One_A ? Column_One_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47195
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47196
|
+
}, Column_One_B ? Column_One_B : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47197
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47198
|
+
}, Column_One_C ? Column_One_C : "-"))))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47199
|
+
className: "align-top"
|
|
47200
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47201
|
+
className: "flex items-center",
|
|
47202
|
+
onClick: () => {
|
|
47203
|
+
if (onClickBody != undefined) {
|
|
47204
|
+
onClickBody();
|
|
47205
|
+
}
|
|
47206
|
+
}
|
|
47207
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47208
|
+
className: "py-3.5 px-4"
|
|
47209
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47210
|
+
className: "font-semibold text-black text-sm"
|
|
47211
|
+
}, Column_Two_A ? Column_Two_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47212
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47213
|
+
}, Column_Two_B ? Column_Two_B : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47214
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47215
|
+
}, Column_Three_B ? Column_Three_B : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47216
|
+
className: "align-top"
|
|
47217
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47218
|
+
className: "flex items-center",
|
|
47219
|
+
onClick: () => {
|
|
47220
|
+
if (onClickBody != undefined) {
|
|
47221
|
+
onClickBody();
|
|
47222
|
+
}
|
|
47223
|
+
}
|
|
47224
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47225
|
+
className: "py-3.5 px-4"
|
|
47226
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47227
|
+
className: "font-normal text-black text-sm"
|
|
47228
|
+
}, Column_Three_A ? Column_Three_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47229
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47230
|
+
}, Column_Three_B ? Column_Three_B : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47231
|
+
className: "align-top"
|
|
47232
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47233
|
+
className: "flex items-center",
|
|
47234
|
+
onClick: () => {
|
|
47235
|
+
if (onClickBody != undefined) {
|
|
47236
|
+
onClickBody();
|
|
47237
|
+
}
|
|
47238
|
+
}
|
|
47239
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47240
|
+
className: "py-3.5 px-4"
|
|
47241
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47242
|
+
className: "font-normal text-black text-sm"
|
|
47243
|
+
}, Column_Four_A ? Column_Four_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47244
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47245
|
+
}, Column_Four_B ? Column_Four_B : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47246
|
+
className: "align-top"
|
|
47247
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47248
|
+
className: "flex items-center",
|
|
47249
|
+
onClick: () => {
|
|
47250
|
+
if (onClickBody != undefined) {
|
|
47251
|
+
onClickBody();
|
|
47252
|
+
}
|
|
47253
|
+
}
|
|
47254
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47255
|
+
className: "py-3.5 px-4"
|
|
47256
|
+
}, /*#__PURE__*/React__default["default"].createElement(Chip, {
|
|
47257
|
+
type: chipType,
|
|
47258
|
+
title: chipTitle
|
|
47259
|
+
})))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47260
|
+
className: "items-start flex h-full"
|
|
47261
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47262
|
+
className: "flex items-start"
|
|
47263
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47264
|
+
className: "flex py-3.5 px-4"
|
|
47265
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47266
|
+
onClick: onClickDelete
|
|
47267
|
+
}, /*#__PURE__*/React__default["default"].createElement(PiTrash, {
|
|
47268
|
+
size: "24",
|
|
47269
|
+
variant: "Bold",
|
|
47270
|
+
className: "text-primary500 cursor-pointer"
|
|
47271
|
+
}))))));
|
|
47272
|
+
};
|
|
47273
|
+
|
|
47274
|
+
const CellModelSeven = ({
|
|
47275
|
+
Column_One_A,
|
|
47276
|
+
Column_One_B,
|
|
47277
|
+
Column_Two_A,
|
|
47278
|
+
Column_Two_B,
|
|
47279
|
+
Column_Three_A,
|
|
47280
|
+
Column_Four_A,
|
|
47281
|
+
onClickEdit,
|
|
47282
|
+
onClickDelete,
|
|
47283
|
+
Column_Six_A = "Active",
|
|
47284
|
+
onClickBody
|
|
47285
|
+
}) => {
|
|
47286
|
+
switch (Column_Six_A.toLowerCase()) {
|
|
47287
|
+
}
|
|
47288
|
+
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
47289
|
+
className: `bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`
|
|
47290
|
+
}, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47291
|
+
className: "align-top"
|
|
47292
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47293
|
+
className: "flex items-center",
|
|
47294
|
+
onClick: () => {
|
|
47295
|
+
if (onClickBody != undefined) {
|
|
47296
|
+
onClickBody();
|
|
47297
|
+
}
|
|
47298
|
+
}
|
|
47299
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47300
|
+
className: "py-3.5 px-4"
|
|
47301
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47302
|
+
className: "font-semibold text-black text-sm"
|
|
47303
|
+
}, Column_One_A ? Column_One_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47304
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47305
|
+
}, Column_One_B ? Column_One_B : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47306
|
+
className: "align-top"
|
|
47307
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47308
|
+
className: "flex items-center",
|
|
47309
|
+
onClick: () => {
|
|
47310
|
+
if (onClickBody != undefined) {
|
|
47311
|
+
onClickBody();
|
|
47312
|
+
}
|
|
47313
|
+
}
|
|
47314
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47315
|
+
className: "py-3.5 px-4"
|
|
47316
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47317
|
+
className: "font-semibold text-black text-sm"
|
|
47318
|
+
}, Column_Two_A ? Column_Two_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47319
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47320
|
+
}, Column_Two_B ? Column_Two_B : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47321
|
+
className: "font-normal text-neutral300 text-sm"
|
|
47322
|
+
}, Column_Two_B ? Column_Two_B : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47323
|
+
className: "align-top"
|
|
47324
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47325
|
+
className: "flex items-center",
|
|
47326
|
+
onClick: () => {
|
|
47327
|
+
if (onClickBody != undefined) {
|
|
47328
|
+
onClickBody();
|
|
47329
|
+
}
|
|
47330
|
+
}
|
|
47331
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47332
|
+
className: "flex items-center py-3.5 px-4"
|
|
47333
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47334
|
+
className: "font-semibold text-black text-sm"
|
|
47335
|
+
}, Column_Three_A ? Column_Three_A : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47336
|
+
className: "align-top"
|
|
47337
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47338
|
+
className: "flex items-center",
|
|
47339
|
+
onClick: () => {
|
|
47340
|
+
if (onClickBody != undefined) {
|
|
47341
|
+
onClickBody();
|
|
47342
|
+
}
|
|
47343
|
+
}
|
|
47344
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47345
|
+
className: "py-3.5 px-4"
|
|
47346
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47347
|
+
className: "font-semibold text-black text-sm"
|
|
47348
|
+
}, Column_Four_A ? Column_Four_A : "-")))), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
47349
|
+
className: "items-start flex h-full"
|
|
47350
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47351
|
+
className: "flex items-start"
|
|
47352
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47353
|
+
className: "flex py-3.5 px-4"
|
|
47354
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47355
|
+
onClick: onClickEdit
|
|
47356
|
+
}, /*#__PURE__*/React__default["default"].createElement(PiNotePencil, {
|
|
47357
|
+
size: "24",
|
|
47358
|
+
variant: "Bold",
|
|
47359
|
+
className: "text-primary500 cursor-pointer mr-2"
|
|
47360
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47361
|
+
onClick: onClickDelete
|
|
47362
|
+
}, /*#__PURE__*/React__default["default"].createElement(PiTrash, {
|
|
47363
|
+
size: "24",
|
|
47364
|
+
variant: "Bold",
|
|
47365
|
+
className: "text-primary500 cursor-pointer"
|
|
47366
|
+
}))))));
|
|
47367
|
+
};
|
|
47368
|
+
|
|
47369
|
+
const DetailDivision = ({
|
|
47370
|
+
statusTransaction = "Loading...",
|
|
47371
|
+
orderId = "Loading...",
|
|
47372
|
+
refId = "Loading...",
|
|
47373
|
+
companyName = "Loading...",
|
|
47374
|
+
divisionName = "Loading...",
|
|
47375
|
+
dateTransaction = "Loading...",
|
|
47376
|
+
productName = "Loading...",
|
|
47377
|
+
productCode = "Loading...",
|
|
47378
|
+
userNumber = "Loading...",
|
|
47379
|
+
denom = "Loading...",
|
|
47380
|
+
cogs = "Loading...",
|
|
47381
|
+
price = "Loading...",
|
|
47382
|
+
billerName = "Loading...",
|
|
47383
|
+
trxId = "Loading..."
|
|
47384
|
+
}) => {
|
|
47385
|
+
const headingStyle = {
|
|
47386
|
+
fontFamily: 'Inter',
|
|
47387
|
+
fontSize: '18px',
|
|
47388
|
+
fontWeight: 600,
|
|
47389
|
+
lineHeight: '25.2px',
|
|
47390
|
+
textAlign: 'left'
|
|
47391
|
+
};
|
|
47392
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47393
|
+
className: "py-1 px-2 bg-neutral20"
|
|
47394
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47395
|
+
className: "bg-white border border-neutral40 pl-6 pr-6"
|
|
47396
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47397
|
+
className: "flex justify-between"
|
|
47398
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47399
|
+
className: "pt-6 pb-2"
|
|
47400
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47401
|
+
style: headingStyle
|
|
47402
|
+
}, "Division Information"))))), /*#__PURE__*/React__default["default"].createElement("hr", {
|
|
47403
|
+
className: "w-full text-neutral40"
|
|
47404
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47405
|
+
className: "pt-4 pb-4 pr-4"
|
|
47406
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47407
|
+
className: "grid grid-cols-3 gap-3"
|
|
47408
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47409
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47410
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47411
|
+
className: "text-black font-semibold text-base"
|
|
47412
|
+
}, userNumber), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47413
|
+
className: "text-neutral500 font-normal text-sm mt-4"
|
|
47414
|
+
}, "Denom"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47415
|
+
className: "text-black font-semibold text-base"
|
|
47416
|
+
}, denom)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47417
|
+
className: "ml-4"
|
|
47418
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47419
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47420
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47421
|
+
className: "text-black font-semibold text-base"
|
|
47422
|
+
}, userNumber), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47423
|
+
className: "text-neutral500 font-normal text-sm mt-4"
|
|
47424
|
+
}, "Denom"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47425
|
+
className: "text-black font-semibold text-base"
|
|
47426
|
+
}, denom)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47427
|
+
className: "ml-4"
|
|
47428
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47429
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47430
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47431
|
+
className: "text-black font-semibold text-base"
|
|
47432
|
+
}, userNumber), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47433
|
+
className: "text-neutral500 font-normal text-sm mt-4"
|
|
47434
|
+
}, "Denom"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47435
|
+
className: "text-black font-semibold text-base"
|
|
47436
|
+
}, denom)))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47437
|
+
className: "flex justify-between"
|
|
47438
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47439
|
+
className: "pt-6 pb-2"
|
|
47440
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47441
|
+
style: headingStyle
|
|
47442
|
+
}, "Address Information"))))), /*#__PURE__*/React__default["default"].createElement("hr", {
|
|
47443
|
+
className: "w-full text-neutral40"
|
|
47444
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47445
|
+
className: "pt-4 pb-4 pr-4"
|
|
47446
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47447
|
+
className: "grid grid-cols-3 gap-3"
|
|
47448
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47449
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47450
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47451
|
+
className: "text-black font-semibold text-base"
|
|
47452
|
+
}, userNumber), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47453
|
+
className: "text-neutral500 font-normal text-sm mt-4"
|
|
47454
|
+
}, "Denom"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47455
|
+
className: "text-black font-semibold text-base"
|
|
47456
|
+
}, denom)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47457
|
+
className: "ml-4"
|
|
47458
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47459
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47460
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47461
|
+
className: "text-black font-semibold text-base"
|
|
47462
|
+
}, userNumber)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47463
|
+
className: "ml-4"
|
|
47464
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47465
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47466
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47467
|
+
className: "text-black font-semibold text-base"
|
|
47468
|
+
}, userNumber), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47469
|
+
className: "text-neutral500 font-normal text-sm mt-4"
|
|
47470
|
+
}, "Denom"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47471
|
+
className: "text-black font-semibold text-base"
|
|
47472
|
+
}, denom)))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47473
|
+
className: "flex justify-between"
|
|
47474
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47475
|
+
className: "pt-6 pb-2"
|
|
47476
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47477
|
+
style: headingStyle
|
|
47478
|
+
}, "Division Information"))))), /*#__PURE__*/React__default["default"].createElement("hr", {
|
|
47479
|
+
className: "w-full text-neutral40"
|
|
47480
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47481
|
+
className: "pt-4 pb-4 pr-4"
|
|
47482
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47483
|
+
className: "grid grid-cols-3 gap-3"
|
|
47484
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47485
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47486
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47487
|
+
className: "text-black font-semibold text-base"
|
|
47488
|
+
}, userNumber), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47489
|
+
className: "text-neutral500 font-normal text-sm mt-4"
|
|
47490
|
+
}, "Denom"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47491
|
+
className: "text-black font-semibold text-base"
|
|
47492
|
+
}, denom)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47493
|
+
className: "ml-4"
|
|
47494
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47495
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47496
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47497
|
+
className: "text-black font-semibold text-base"
|
|
47498
|
+
}, userNumber), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47499
|
+
className: "text-neutral500 font-normal text-sm mt-4"
|
|
47500
|
+
}, "Denom"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47501
|
+
className: "text-black font-semibold text-base"
|
|
47502
|
+
}, denom)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47503
|
+
className: "ml-4"
|
|
47504
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47505
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47506
|
+
}, "Number"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47507
|
+
className: "text-black font-semibold text-base"
|
|
47508
|
+
}, userNumber), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47509
|
+
className: "text-neutral500 font-normal text-sm mt-4"
|
|
47510
|
+
}, "Denom"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47511
|
+
className: "text-black font-semibold text-base"
|
|
47512
|
+
}, denom)))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47513
|
+
className: "flex justify-between"
|
|
47514
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47515
|
+
className: "pt-6 pb-2"
|
|
47516
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47517
|
+
style: headingStyle
|
|
47518
|
+
}, "Document"))))), /*#__PURE__*/React__default["default"].createElement("hr", {
|
|
47519
|
+
className: "w-full text-neutral40"
|
|
47520
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47521
|
+
className: "pt-4 pb-4 pr-4"
|
|
47522
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47523
|
+
className: "grid grid-cols-3 gap-3"
|
|
47524
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
47525
|
+
className: "text-neutral500 font-normal text-sm mt-1"
|
|
47526
|
+
}, "Project Brief"), /*#__PURE__*/React__default["default"].createElement(DescriptionFile, {
|
|
47527
|
+
title: ""
|
|
47528
|
+
}))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47529
|
+
className: "flex justify-end space-x-4 mt-10"
|
|
47530
|
+
}, /*#__PURE__*/React__default["default"].createElement(DangerButton, {
|
|
47531
|
+
title: "Delete Division",
|
|
47532
|
+
size: "detail division"
|
|
47533
|
+
}), /*#__PURE__*/React__default["default"].createElement(OutlineButton, {
|
|
47534
|
+
title: "Edit",
|
|
47535
|
+
size: "detail division"
|
|
47536
|
+
})))));
|
|
47537
|
+
};
|
|
47538
|
+
|
|
47042
47539
|
const SearchDropdown = ({
|
|
47043
47540
|
options = [{
|
|
47044
47541
|
option: "Name 1",
|
|
@@ -47408,8 +47905,11 @@
|
|
|
47408
47905
|
exports.BillerProductList = BillerProductList;
|
|
47409
47906
|
exports.BillingList = BillingList;
|
|
47410
47907
|
exports.CardInternalProduct = CardInternalProduct;
|
|
47908
|
+
exports.CellModelFive = CellModelFive;
|
|
47411
47909
|
exports.CellModelFour = CellModelFour;
|
|
47412
47910
|
exports.CellModelOne = CellModelOne;
|
|
47911
|
+
exports.CellModelSeven = CellModelSeven;
|
|
47912
|
+
exports.CellModelSix = CellModelSix;
|
|
47413
47913
|
exports.CellModelThree = CellModelThree;
|
|
47414
47914
|
exports.CellModelTwo = CellModelTwo;
|
|
47415
47915
|
exports.Chip = Chip;
|
|
@@ -47418,6 +47918,7 @@
|
|
|
47418
47918
|
exports.DangerButton = DangerButton;
|
|
47419
47919
|
exports.DepositList = DepositList;
|
|
47420
47920
|
exports.Description = Description;
|
|
47921
|
+
exports.DetailDivision = DetailDivision;
|
|
47421
47922
|
exports.DropdownCard = DropdownCard;
|
|
47422
47923
|
exports.DropdownChip = DropdownChip;
|
|
47423
47924
|
exports.DropdownText = DropdownText;
|
package/package.json
CHANGED
|
@@ -31,6 +31,7 @@ const DangerButton = ({
|
|
|
31
31
|
${size === "large" && "text-lg h-10"}
|
|
32
32
|
${size === "very large" && "text-xl h-12"}
|
|
33
33
|
${size === "extra very large" && "text-2xl h-14"}
|
|
34
|
+
${size === "detail division" && "text-sm h-10"}
|
|
34
35
|
rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
|
|
35
36
|
}
|
|
36
37
|
disabled={!isActive}
|
|
@@ -33,6 +33,7 @@ const OutlineButton = ({
|
|
|
33
33
|
${size === "large" && "text-lg h-10"}
|
|
34
34
|
${size === "very large" && "text-xl h-12"}
|
|
35
35
|
${size === "extra very large" && "text-2xl h-14"}
|
|
36
|
+
${size === "detail division" && "text-sm h-10 w-24"}
|
|
36
37
|
rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
|
|
37
38
|
}
|
|
38
39
|
disabled={!isActive}
|
|
@@ -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
|
|
@@ -151,14 +151,14 @@ const CellModelThree = ({
|
|
|
151
151
|
<PiNotePencil
|
|
152
152
|
size="24"
|
|
153
153
|
variant="Bold"
|
|
154
|
-
className="text-
|
|
154
|
+
className="text-primary500 cursor-pointer mr-2"
|
|
155
155
|
/>
|
|
156
156
|
</div>
|
|
157
157
|
<div onClick={onClickDelete}>
|
|
158
158
|
<PiTrash
|
|
159
159
|
size="24"
|
|
160
160
|
variant="Bold"
|
|
161
|
-
className="text-
|
|
161
|
+
className="text-primary500 cursor-pointer"
|
|
162
162
|
/>
|
|
163
163
|
</div>
|
|
164
164
|
</div>
|
|
@@ -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
|
package/src/templates/index.js
CHANGED
|
@@ -55,6 +55,10 @@ import Header from '../components/header';
|
|
|
55
55
|
import CellModelTwo from '../components/table/listTable/cellmodeltwo';
|
|
56
56
|
import CellModelThree from '../components/table/listTable/cellmodelthree';
|
|
57
57
|
import CellModelFour from '../components/table/listTable/cellmodefour';
|
|
58
|
+
import DetailDivision from '../components/table/listTable/report/detaildivision';
|
|
59
|
+
import CellModelFive from '../components/table/listTable/cellmodefive';
|
|
60
|
+
import CellModelSix from '../components/table/listTable/cellmodesix';
|
|
61
|
+
import CellModelSeven from '../components/table/listTable/cellmodelseven';
|
|
58
62
|
|
|
59
63
|
|
|
60
64
|
const Templates = () => {
|
|
@@ -1396,6 +1400,12 @@ const Templates = () => {
|
|
|
1396
1400
|
<div className='m-9'></div>
|
|
1397
1401
|
<ReportListClient {...transactionData} />
|
|
1398
1402
|
|
|
1403
|
+
<div className='m-9'></div>
|
|
1404
|
+
<div className='m-10'>
|
|
1405
|
+
<DetailDivision {...reportData} />
|
|
1406
|
+
</div>
|
|
1407
|
+
|
|
1408
|
+
|
|
1399
1409
|
<div className='m-9'></div>
|
|
1400
1410
|
<p className='text-black font-bold text-2xl text-center py-2'>Pagination</p>
|
|
1401
1411
|
<ul>
|
|
@@ -1749,6 +1759,62 @@ const Templates = () => {
|
|
|
1749
1759
|
</table>
|
|
1750
1760
|
|
|
1751
1761
|
|
|
1762
|
+
<div className='m-9'></div>
|
|
1763
|
+
<table className='w-full text-left'>
|
|
1764
|
+
<HeaderTable dataHeader={["Cient Data", "PIC", "Data Created", "Last Updated", "State", "Action"]} />
|
|
1765
|
+
<tbody>
|
|
1766
|
+
{
|
|
1767
|
+
client.map((product, index) => (
|
|
1768
|
+
<CellModelSix
|
|
1769
|
+
key={index}
|
|
1770
|
+
Column_One_A={product.Column_One_A}
|
|
1771
|
+
Column_One_B={product.Column_One_B}
|
|
1772
|
+
Column_One_C={product.Column_One_C}
|
|
1773
|
+
Column_Two_A={product.Column_Two_A}
|
|
1774
|
+
Column_Two_B={product.Column_Two_B}
|
|
1775
|
+
Column_Two_C={product.Column_Two_C}
|
|
1776
|
+
Column_Three_A={product.Column_Three_A}
|
|
1777
|
+
Column_Three_B={product.Column_Three_B}
|
|
1778
|
+
Column_Four_A={product.Column_Four_A}
|
|
1779
|
+
Column_Four_B={product.Column_Four_B}
|
|
1780
|
+
Column_Five_A={product.Column_Five_A}
|
|
1781
|
+
imageUrl={product.imageUrl}
|
|
1782
|
+
onClickDelete={() => console.log('Delete', product)}
|
|
1783
|
+
onClickBody={() => console.log('Body', product)}
|
|
1784
|
+
/>
|
|
1785
|
+
))
|
|
1786
|
+
}
|
|
1787
|
+
</tbody>
|
|
1788
|
+
</table>
|
|
1789
|
+
|
|
1790
|
+
<div className='m-9'></div>
|
|
1791
|
+
<table className='w-full text-left'>
|
|
1792
|
+
<HeaderTable dataHeader={["Cient Data", "PIC", "Data Created", "State"]} />
|
|
1793
|
+
<tbody>
|
|
1794
|
+
{
|
|
1795
|
+
client.map((product, index) => (
|
|
1796
|
+
<CellModelFive
|
|
1797
|
+
key={index}
|
|
1798
|
+
Column_One_A={product.Column_One_A}
|
|
1799
|
+
Column_One_B={product.Column_One_B}
|
|
1800
|
+
Column_One_C={product.Column_One_C}
|
|
1801
|
+
Column_Two_A={product.Column_Two_A}
|
|
1802
|
+
Column_Two_B={product.Column_Two_B}
|
|
1803
|
+
Column_Two_C={product.Column_Two_C}
|
|
1804
|
+
Column_Three_A={product.Column_Three_A}
|
|
1805
|
+
Column_Three_B={product.Column_Three_B}
|
|
1806
|
+
Column_Four_A={product.Column_Four_A}
|
|
1807
|
+
Column_Four_B={product.Column_Four_B}
|
|
1808
|
+
Column_Five_A={product.Column_Five_A}
|
|
1809
|
+
imageUrl={product.imageUrl}
|
|
1810
|
+
onClickBody={() => console.log('Body', product)}
|
|
1811
|
+
/>
|
|
1812
|
+
))
|
|
1813
|
+
}
|
|
1814
|
+
</tbody>
|
|
1815
|
+
</table>
|
|
1816
|
+
|
|
1817
|
+
|
|
1752
1818
|
<div className='m-9'></div>
|
|
1753
1819
|
<table className='w-full text-left'>
|
|
1754
1820
|
<HeaderTable dataHeader={["Division DATA", "PIC DATA", "TYPE", "DATA CREATED", "LAST UPDATE", "STATUS", "Action"]} />
|
|
@@ -1780,6 +1846,38 @@ const Templates = () => {
|
|
|
1780
1846
|
</tbody>
|
|
1781
1847
|
</table>
|
|
1782
1848
|
|
|
1849
|
+
|
|
1850
|
+
<div className='m-9'></div>
|
|
1851
|
+
<table className='w-full text-left'>
|
|
1852
|
+
<HeaderTable dataHeader={["Division DATA", "PIC DATA", "BILLER","TYPE", "ACTION"]} />
|
|
1853
|
+
<tbody>
|
|
1854
|
+
{
|
|
1855
|
+
division.map((division, index) => (
|
|
1856
|
+
<CellModelSeven
|
|
1857
|
+
key={index}
|
|
1858
|
+
Column_One_A={division.Column_One_A}
|
|
1859
|
+
Column_One_B={division.Column_One_B}
|
|
1860
|
+
Column_Two_A={division.Column_Two_A}
|
|
1861
|
+
Column_Two_B={division.Column_Two_B}
|
|
1862
|
+
Column_Two_C={division.Column_Two_C}
|
|
1863
|
+
Column_Three_A={division.Column_Three_A}
|
|
1864
|
+
Column_Four_A={division.Column_Four_A}
|
|
1865
|
+
Column_Four_B={division.Column_Four_B}
|
|
1866
|
+
Column_Four_C={division.Column_Four_C}
|
|
1867
|
+
Column_Five_A={division.Column_Five_A}
|
|
1868
|
+
Column_Five_B={division.Column_Five_B}
|
|
1869
|
+
Column_Five_C={division.Column_Five_C}
|
|
1870
|
+
Column_Six_A={division.Column_Six_A}
|
|
1871
|
+
imageUrl={division.imageUrl}
|
|
1872
|
+
onClickEdit={() => console.log('Edit', division)}
|
|
1873
|
+
onClickDelete={() => console.log('Delete', division)}
|
|
1874
|
+
onClickBody={() => console.log('Body', division)}
|
|
1875
|
+
/>
|
|
1876
|
+
))
|
|
1877
|
+
}
|
|
1878
|
+
</tbody>
|
|
1879
|
+
</table>
|
|
1880
|
+
|
|
1783
1881
|
</div>
|
|
1784
1882
|
|
|
1785
1883
|
|