sprint-asia-custom-component 0.1.74 → 0.1.75

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.
Files changed (4) hide show
  1. package/dist/index.js +11 -9
  2. package/package.json +1 -1
  3. package/src/components/texteditor/index.js +33 -47
  4. package/src/templates/index.js +990 -1060
package/src/templates/index.js CHANGED
@@ -1,65 +1,64 @@
1
- import React from 'react'
2
- import { useState, useEffect } from 'react';
3
- import Alert from '../components/alert'
4
- import DangerButton from '../components/button/dangerbutton'
5
- import OutlineButton from '../components/button/outlinebutton'
6
- import PrimaryButton from '../components/button/primarybutton'
7
- import CardInternalProduct from '../components/card'
8
- import Chip from '../components/chip'
9
- import CustomDatePicker from '../components/datepicker'
10
- import Description from '../components/description';
11
- import DropdownCard from '../components/dropdown/dropdownCard';
12
- import DropdownChip from '../components/dropdown/dropdownChip';
13
- import DropdownText from '../components/dropdown/dropdownText';
14
- import DropzoneUploadFile from '../components/dropzone/uploadfile';
15
- import DropzoneUploadPhoto from '../components/dropzone/uploadphoto';
16
- import EmptyData from '../components/emptystate/table/emptydata';
17
- import NotFound from '../components/emptystate/table/notfound';
18
- import ExportToExcel from '../components/export/excel';
19
- import FilterCheckbox from '../components/filter/filterCheckbox';
20
- import FilterText from '../components/filter/filterText';
21
- import Menu from '../components/menu';
22
- import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
23
- import ModalLoading from '../components/modal/modalLoading';
24
- import ModalResult from '../components/modal/modalResult';
25
- import ModalState from '../components/modal/modalState';
26
- import Notification from '../components/notification';
27
- import SearchInput from '../components/searchinput';
28
- import Stepper from '../components/stepper';
29
- import Switch from '../components/switch';
30
- import ChipBar from '../components/tabLayout/chipBar';
31
- import TabBar from '../components/tabLayout/tabBar';
32
- import BillerList from '../components/table/listTable/biller';
33
- import BillerProductList from '../components/table/listTable/product/billerproduct';
34
- import InternalProductList from '../components/table/listTable/product/internalproduct';
35
- import ReportList from '../components/table/listTable/report/businessadmin';
36
- import ReportListClient from '../components/table/listTable/report/clientadmin';
37
- import Pagination from '../components/table/pagination';
38
- import TextInput from '../components/textinput';
39
- import HeaderTable from '../components/table/headerTable';
40
-
41
- import BillingList from '../components/table/listTable/billing';
42
-
43
- import ModalBilling from '../components/modal/modalBilling';
44
- import ModalDeclineBilling from '../components/modal/modalDeclineBilling';
45
- import TextEditor from '../components/texteditor';
46
- import SearchDropdown from '../components/searchdropdown';
47
- import LimitList from '../components/table/listTable/limit';
48
- import ModalLimit from '../components/modal/modalLimit';
49
- import VerticalStepBar from '../components/verticalstepbar';
50
- import DepositList from '../components/table/listTable/deposit';
51
- import ModalDeposit from '../components/modal/modalDeposit';
52
- import CellModelOne from '../components/table/listTable/cellmodelone';
53
- import FilterDropdown from '../components/filter/filterDropdown';
54
- import Header from '../components/header';
55
- import CellModelTwo from '../components/table/listTable/cellmodeltwo';
56
- import CellModelThree from '../components/table/listTable/cellmodelthree';
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';
62
-
1
+ import React from "react";
2
+ import { useState, useEffect } from "react";
3
+ import Alert from "../components/alert";
4
+ import DangerButton from "../components/button/dangerbutton";
5
+ import OutlineButton from "../components/button/outlinebutton";
6
+ import PrimaryButton from "../components/button/primarybutton";
7
+ import CardInternalProduct from "../components/card";
8
+ import Chip from "../components/chip";
9
+ import CustomDatePicker from "../components/datepicker";
10
+ import Description from "../components/description";
11
+ import DropdownCard from "../components/dropdown/dropdownCard";
12
+ import DropdownChip from "../components/dropdown/dropdownChip";
13
+ import DropdownText from "../components/dropdown/dropdownText";
14
+ import DropzoneUploadFile from "../components/dropzone/uploadfile";
15
+ import DropzoneUploadPhoto from "../components/dropzone/uploadphoto";
16
+ import EmptyData from "../components/emptystate/table/emptydata";
17
+ import NotFound from "../components/emptystate/table/notfound";
18
+ import ExportToExcel from "../components/export/excel";
19
+ import FilterCheckbox from "../components/filter/filterCheckbox";
20
+ import FilterText from "../components/filter/filterText";
21
+ import Menu from "../components/menu";
22
+ import { PiCaretDown, PiCaretUp } from "react-icons/pi";
23
+ import ModalLoading from "../components/modal/modalLoading";
24
+ import ModalResult from "../components/modal/modalResult";
25
+ import ModalState from "../components/modal/modalState";
26
+ import Notification from "../components/notification";
27
+ import SearchInput from "../components/searchinput";
28
+ import Stepper from "../components/stepper";
29
+ import Switch from "../components/switch";
30
+ import ChipBar from "../components/tabLayout/chipBar";
31
+ import TabBar from "../components/tabLayout/tabBar";
32
+ import BillerList from "../components/table/listTable/biller";
33
+ import BillerProductList from "../components/table/listTable/product/billerproduct";
34
+ import InternalProductList from "../components/table/listTable/product/internalproduct";
35
+ import ReportList from "../components/table/listTable/report/businessadmin";
36
+ import ReportListClient from "../components/table/listTable/report/clientadmin";
37
+ import Pagination from "../components/table/pagination";
38
+ import TextInput from "../components/textinput";
39
+ import HeaderTable from "../components/table/headerTable";
40
+
41
+ import BillingList from "../components/table/listTable/billing";
42
+
43
+ import ModalBilling from "../components/modal/modalBilling";
44
+ import ModalDeclineBilling from "../components/modal/modalDeclineBilling";
45
+ import TextEditor from "../components/texteditor";
46
+ import SearchDropdown from "../components/searchdropdown";
47
+ import LimitList from "../components/table/listTable/limit";
48
+ import ModalLimit from "../components/modal/modalLimit";
49
+ import VerticalStepBar from "../components/verticalstepbar";
50
+ import DepositList from "../components/table/listTable/deposit";
51
+ import ModalDeposit from "../components/modal/modalDeposit";
52
+ import CellModelOne from "../components/table/listTable/cellmodelone";
53
+ import FilterDropdown from "../components/filter/filterDropdown";
54
+ import Header from "../components/header";
55
+ import CellModelTwo from "../components/table/listTable/cellmodeltwo";
56
+ import CellModelThree from "../components/table/listTable/cellmodelthree";
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";
63
62
 
64
63
  const Templates = () => {
65
64
  const [startDate, setStartDate] = useState(null);
@@ -81,7 +80,7 @@ const Templates = () => {
81
80
  };
82
81
 
83
82
  const handleRemoveOption = (optionToRemove) => {
84
- setSelectedOptions(selectedOptions.filter(option => option !== optionToRemove));
83
+ setSelectedOptions(selectedOptions.filter((option) => option !== optionToRemove));
85
84
  };
86
85
 
87
86
  const [currentOption, setCurrentOption] = useState("");
@@ -107,8 +106,8 @@ const Templates = () => {
107
106
  };
108
107
 
109
108
  const [data, setData] = useState([
110
- { id: 1, name: 'John Doe', email: 'john@example.com' },
111
- { id: 2, name: 'Jane Doe', email: 'jane@example.com' },
109
+ { id: 1, name: "John Doe", email: "john@example.com" },
110
+ { id: 2, name: "Jane Doe", email: "jane@example.com" },
112
111
  ]);
113
112
 
114
113
  const [isOpen, setIsOpen] = useState(false);
@@ -129,8 +128,8 @@ const Templates = () => {
129
128
 
130
129
  const [isLoadingModalOpen, setIsLoadingModalOpen] = useState(false);
131
130
  const [isResultModalOpen, setIsResultModalOpen] = useState(false);
132
- const [resultType, setResultType] = useState('success');
133
- const [subtitle, setSubtitle] = useState('');
131
+ const [resultType, setResultType] = useState("success");
132
+ const [subtitle, setSubtitle] = useState("");
134
133
 
135
134
  const handleModalClick = () => {
136
135
  setIsLoadingModalOpen(true);
@@ -140,8 +139,8 @@ const Templates = () => {
140
139
  };
141
140
 
142
141
  const handleOpenSuccessModal = () => {
143
- setResultType('success');
144
- setSubtitle('Your operation was successful!');
142
+ setResultType("success");
143
+ setSubtitle("Your operation was successful!");
145
144
  setIsResultModalOpen(true);
146
145
  setTimeout(() => {
147
146
  setIsResultModalOpen(false);
@@ -149,17 +148,14 @@ const Templates = () => {
149
148
  };
150
149
 
151
150
  const handleOpenFailedModal = () => {
152
- setResultType('failed');
153
- setSubtitle('Something went wrong, please try again.');
151
+ setResultType("failed");
152
+ setSubtitle("Something went wrong, please try again.");
154
153
  setIsResultModalOpen(true);
155
154
  setTimeout(() => {
156
155
  setIsResultModalOpen(false);
157
156
  }, 3000);
158
157
  };
159
158
 
160
-
161
-
162
-
163
159
  const handleModalChange = (e) => {
164
160
  setModalContent(e.target.value);
165
161
  };
@@ -177,11 +173,11 @@ const Templates = () => {
177
173
  },
178
174
  ];
179
175
 
180
- const [searchValue, setSearchValue] = useState('');
176
+ const [searchValue, setSearchValue] = useState("");
181
177
 
182
178
  const handleSearchChange = (event) => {
183
179
  setSearchValue(event.target.value);
184
- console.log("Search value is " + searchValue)
180
+ console.log("Search value is " + searchValue);
185
181
  };
186
182
 
187
183
  const onEnterPress = () => {
@@ -202,7 +198,7 @@ const Templates = () => {
202
198
  currentStep: 1,
203
199
  },
204
200
  ];
205
-
201
+
206
202
  const [switchState, setSwitchState] = useState({
207
203
  switch1: true,
208
204
  switch2: false,
@@ -239,21 +235,20 @@ const Templates = () => {
239
235
  subtitlePartnerName: "10001",
240
236
  email: "billerone@example.com",
241
237
  phoneNumber: "123-456-7890",
242
- titleStatus: "Prepaid"
238
+ titleStatus: "Prepaid",
243
239
  },
244
240
  {
245
241
  titlePartnerName: "Biller Two",
246
242
  subtitlePartnerName: "10002",
247
243
  email: "billertwo@example.com",
248
244
  phoneNumber: "098-765-4321",
249
- titleStatus: "Postpaid"
250
- }
245
+ titleStatus: "Postpaid",
246
+ },
251
247
  ];
252
248
  const handleClickBiller = () => {
253
249
  console.log("Biller item clicked");
254
250
  };
255
251
 
256
-
257
252
  const products = [
258
253
  {
259
254
  titleProductName: "Product One",
@@ -264,7 +259,7 @@ const Templates = () => {
264
259
  price: "100,000",
265
260
  billerImage: "https://picsum.photos/50",
266
261
  billerName: "Biller One",
267
- productCategory: "Internet Data"
262
+ productCategory: "Internet Data",
268
263
  },
269
264
  {
270
265
  titleProductName: "Product Two",
@@ -275,8 +270,8 @@ const Templates = () => {
275
270
  price: "50,000",
276
271
  billerImage: "https://picsum.photos/50",
277
272
  billerName: "Biller Two",
278
- productCategory: "Pulsa"
279
- }
273
+ productCategory: "Pulsa",
274
+ },
280
275
  ];
281
276
 
282
277
  const billing = [
@@ -455,7 +450,6 @@ const Templates = () => {
455
450
  stepperData: [],
456
451
  },
457
452
  ];
458
-
459
453
 
460
454
  limit.forEach((item, index) => {
461
455
  item.id = index + 1; // Assuming a simple numeric ID
@@ -522,44 +516,43 @@ const Templates = () => {
522
516
 
523
517
  const deposits = [
524
518
  {
525
- "id": "1",
526
- "depositDetails": "Balance Top Up",
527
- "amount": "Rp70.000.000",
528
- "transactionId": "TRX-1001",
529
- "divisionName": "BCA Finance Ltd",
530
- "date": "29 Nov 2023, 15:27",
531
- "paymentMethod": "BCA Virtual Account",
532
- "titleStatus": "Pending",
519
+ id: "1",
520
+ depositDetails: "Balance Top Up",
521
+ amount: "Rp70.000.000",
522
+ transactionId: "TRX-1001",
523
+ divisionName: "BCA Finance Ltd",
524
+ date: "29 Nov 2023, 15:27",
525
+ paymentMethod: "BCA Virtual Account",
526
+ titleStatus: "Pending",
533
527
  divisionId: "DIV-006",
534
528
  subtitleDivisionName: "Subdivision F",
535
529
  },
536
530
  {
537
- "id": "2",
538
- "depositDetails": "Campaign Name",
539
- "amount": "Rp1.000.000",
540
- "transactionId": "TRX-1002",
541
- "divisionName": "BCA Multi Finance",
542
- "date": "29 Nov 2023, 15:27",
543
- "paymentMethod": "Prezent Balance",
544
- "titleStatus": "Deducted",
531
+ id: "2",
532
+ depositDetails: "Campaign Name",
533
+ amount: "Rp1.000.000",
534
+ transactionId: "TRX-1002",
535
+ divisionName: "BCA Multi Finance",
536
+ date: "29 Nov 2023, 15:27",
537
+ paymentMethod: "Prezent Balance",
538
+ titleStatus: "Deducted",
545
539
  divisionId: "DIV-006",
546
540
  subtitleDivisionName: "Subdivision F",
547
541
  },
548
542
  {
549
- "id": "3",
550
- "depositDetails": "Campaign Name",
551
- "amount": "Rp1.000.000",
552
- "transactionId": "TRX-1002",
553
- "divisionName": "BCA Multi Finance",
554
- "date": "29 Nov 2023, 15:27",
555
- "paymentMethod": "Prezent Balance",
556
- "titleStatus": "Failed",
543
+ id: "3",
544
+ depositDetails: "Campaign Name",
545
+ amount: "Rp1.000.000",
546
+ transactionId: "TRX-1002",
547
+ divisionName: "BCA Multi Finance",
548
+ date: "29 Nov 2023, 15:27",
549
+ paymentMethod: "Prezent Balance",
550
+ titleStatus: "Failed",
557
551
  divisionId: "DIV-006",
558
552
  subtitleDivisionName: "Subdivision F",
559
553
  },
560
554
  ];
561
555
 
562
-
563
556
  const initialProducts = [
564
557
  {
565
558
  titleProductName: "Product One",
@@ -569,7 +562,7 @@ const Templates = () => {
569
562
  activePeriod: "30 Days",
570
563
  price: "100,000",
571
564
  isChecked: true,
572
- productCategory: "Internet Data"
565
+ productCategory: "Internet Data",
573
566
  },
574
567
  {
575
568
  titleProductName: "Product Two",
@@ -579,8 +572,8 @@ const Templates = () => {
579
572
  activePeriod: "15 Days",
580
573
  price: "50,000",
581
574
  isChecked: false,
582
- productCategory: "Pulsa"
583
- }
575
+ productCategory: "Pulsa",
576
+ },
584
577
  ];
585
578
 
586
579
  const billingData = {
@@ -637,7 +630,7 @@ const Templates = () => {
637
630
  Column_Four_A: "13 Mar 2024, 10.05",
638
631
  Column_Four_B: "By Agus Yulianto Carolus",
639
632
  Column_Five_A: "Active",
640
- imageUrl: "https://source.unsplash.com/random/50x50"
633
+ imageUrl: "https://source.unsplash.com/random/50x50",
641
634
  },
642
635
  // Add more data objects following the same structure
643
636
  {
@@ -652,7 +645,7 @@ const Templates = () => {
652
645
  Column_Four_A: "13 Mar 2024, 10.05",
653
646
  Column_Four_B: "By Agus Yulianto Carolus",
654
647
  Column_Five_A: "Inactive",
655
- imageUrl: "https://source.unsplash.com/random/50x50"
648
+ imageUrl: "https://source.unsplash.com/random/50x50",
656
649
  },
657
650
  {
658
651
  Column_One_A: "CV Jaya Inovasi Berkah",
@@ -666,7 +659,7 @@ const Templates = () => {
666
659
  Column_Four_A: "13 Mar 2024, 10.05",
667
660
  Column_Four_B: "By Agus Yulianto Carolus",
668
661
  Column_Five_A: "Active",
669
- imageUrl: "https://source.unsplash.com/random/50x50"
662
+ imageUrl: "https://source.unsplash.com/random/50x50",
670
663
  },
671
664
  {
672
665
  Column_One_A: "PT Cipta Inovasi Terkini",
@@ -680,11 +673,10 @@ const Templates = () => {
680
673
  Column_Four_A: "13 Mar 2024, 10.05",
681
674
  Column_Four_B: "By Agus Yulianto Carolus",
682
675
  Column_Five_A: "Active",
683
- imageUrl: "https://source.unsplash.com/random/50x50"
676
+ imageUrl: "https://source.unsplash.com/random/50x50",
684
677
  },
685
678
  // Add additional entries as needed to match the screenshot
686
679
  ];
687
-
688
680
 
689
681
  const handleClickInternalProduct = (productName) => {
690
682
  console.log(`Product ${productName} clicked`);
@@ -714,7 +706,7 @@ const Templates = () => {
714
706
  cogs: "500",
715
707
  price: "1000",
716
708
  billerName: "Example Biller",
717
- trxId: "TRX789"
709
+ trxId: "TRX789",
718
710
  });
719
711
 
720
712
  const [transactionData, setTransactionData] = useState({
@@ -726,11 +718,11 @@ const Templates = () => {
726
718
  productCode: "SP123",
727
719
  userNumber: "9876543210",
728
720
  denom: "10000",
729
- price: "10500"
721
+ price: "10500",
730
722
  });
731
723
 
732
724
  const fetchTemplates = async (page) => {
733
- const pageSize = 10
725
+ const pageSize = 10;
734
726
  const totalCount = 100;
735
727
  const totalPage = Math.ceil(totalCount / pageSize);
736
728
 
@@ -758,18 +750,17 @@ const Templates = () => {
758
750
  loadData();
759
751
  }, [currentPage]);
760
752
 
761
- const [inputValue, setInputValue] = useState('');
762
- const [passwordValue, setPasswordValue] = useState('');
753
+ const [inputValue, setInputValue] = useState("");
754
+ const [passwordValue, setPasswordValue] = useState("");
763
755
 
764
756
  const handleDeclineClick = () => {
765
- if (modalContent.trim() === '') {
766
- console.log('No input provided.');
757
+ if (modalContent.trim() === "") {
758
+ console.log("No input provided.");
767
759
  } else {
768
760
  console.log(modalContent);
769
761
  closeModal();
770
762
  }
771
763
  };
772
-
773
764
 
774
765
  const [isModalOpen, setIsModalOpen] = useState(false);
775
766
  const [isModalLimitOpen, setIsModalLimitOpen] = useState(false);
@@ -777,7 +768,7 @@ const Templates = () => {
777
768
  const [modalContent, setModalContent] = useState("");
778
769
  const [price, setPrice] = useState("");
779
770
 
780
- const openModal = (type = 'billing') => {
771
+ const openModal = (type = "billing") => {
781
772
  setModalType(type);
782
773
  setIsModalOpen(true);
783
774
  };
@@ -785,7 +776,7 @@ const Templates = () => {
785
776
  const onChangeTextInput = (e) => {
786
777
  setModalContent(e.target.value);
787
778
  };
788
-
779
+
789
780
  const closeModal = () => {
790
781
  setIsModalOpen(false);
791
782
  setIsModalLimitOpen(false);
@@ -797,9 +788,9 @@ const Templates = () => {
797
788
  const [currentLimitItem, setCurrentLimitItem] = useState(null);
798
789
  const [currentDepositItem, setCurrentDepositItem] = useState(null);
799
790
 
800
- const [description, setDescription] = useState("")
791
+ const [description, setDescription] = useState("");
801
792
 
802
- const [resultModalType, setResultModalType] = useState("success");
793
+ const [resultModalType, setResultModalType] = useState("success");
803
794
 
804
795
  useEffect(() => {
805
796
  let timer;
@@ -820,528 +811,522 @@ const Templates = () => {
820
811
  };
821
812
 
822
813
  const [dataFilterResult, setDataFilterResult] = useState({
823
- type:[],
824
- status:[],
825
- payment:[]
826
- })
814
+ type: [],
815
+ status: [],
816
+ payment: [],
817
+ });
827
818
  const [dataFilterResult2, setDataFilterResult2] = useState({
828
- type:[],
829
- status:[],
830
- payment:[]
831
- })
819
+ type: [],
820
+ status: [],
821
+ payment: [],
822
+ });
832
823
 
833
- const [searchFilter, setSearchFilter] = useState()
824
+ const [searchFilter, setSearchFilter] = useState();
834
825
  const [filterDropdown, setFilterDropdown] = useState({
835
- option : "duar",
836
- value : "dfdsf"
837
- })
826
+ option: "duar",
827
+ value: "dfdsf",
828
+ });
838
829
 
839
830
  const onHandleEnter = () => {
840
- console.log(searchFilter, filterDropdown)
841
- }
831
+ console.log(searchFilter, filterDropdown);
832
+ };
842
833
 
843
834
  return (
844
835
  <div>
845
- <div>
846
- <Header title='Navbar'/>
847
- </div>
836
+ <div>
837
+ <Header title="Navbar" />
838
+ </div>
848
839
 
849
- <div className='m-9'></div>
850
- <p className='text-black font-bold text-2xl text-center py-2'>Alert</p>
851
- <div className='w-full py-3'>
852
- <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.'/>
853
- </div>
854
- <div className='w-full py-3'>
855
- <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' type='warning'/>
856
- </div>
857
- <div className='w-full py-3'>
858
- <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' type='danger'/>
859
- </div>
860
- <div className='w-full py-3'>
861
- <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButton="Add Client" onClickLeftButton={() => console.log("left button clicked")}/>
862
- </div>
863
- <div className='w-full py-3'>
864
- <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButton="Add Client" titleRightButton="Add Division" onClickLeftButton={() => console.log("left button clicked")} onClickRightButton={() => console.log("right button clicked")}/>
865
- </div>
866
- <div className='w-full py-3'>
867
- <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButtonClient="Reject" titleRightButtonClient="Approve" onClickLeftButton={() => console.log("left button clicked")} onClickRightButton={() => console.log("right button clicked")}/>
840
+ <div>
841
+ <TextEditor title="Description" />
842
+ </div>
843
+
844
+ <div className="m-9"></div>
845
+ <p className="text-black font-bold text-2xl text-center py-2">Alert</p>
846
+ <div className="w-full py-3">
847
+ <Alert
848
+ title="Client & Division Reminder"
849
+ subtitle="Please ensure you have created the appropriate Client and division for the user before proceeding."
850
+ />
851
+ </div>
852
+ <div className="w-full py-3">
853
+ <Alert
854
+ title="Client & Division Reminder"
855
+ subtitle="Please ensure you have created the appropriate Client and division for the user before proceeding."
856
+ type="warning"
857
+ />
858
+ </div>
859
+ <div className="w-full py-3">
860
+ <Alert
861
+ title="Client & Division Reminder"
862
+ subtitle="Please ensure you have created the appropriate Client and division for the user before proceeding."
863
+ type="danger"
864
+ />
865
+ </div>
866
+ <div className="w-full py-3">
867
+ <Alert
868
+ title="Client & Division Reminder"
869
+ subtitle="Please ensure you have created the appropriate Client and division for the user before proceeding."
870
+ titleLeftButton="Add Client"
871
+ onClickLeftButton={() => console.log("left button clicked")}
872
+ />
873
+ </div>
874
+ <div className="w-full py-3">
875
+ <Alert
876
+ title="Client & Division Reminder"
877
+ subtitle="Please ensure you have created the appropriate Client and division for the user before proceeding."
878
+ titleLeftButton="Add Client"
879
+ titleRightButton="Add Division"
880
+ onClickLeftButton={() => console.log("left button clicked")}
881
+ onClickRightButton={() => console.log("right button clicked")}
882
+ />
883
+ </div>
884
+ <div className="w-full py-3">
885
+ <Alert
886
+ title="Client & Division Reminder"
887
+ subtitle="Please ensure you have created the appropriate Client and division for the user before proceeding."
888
+ titleLeftButtonClient="Reject"
889
+ titleRightButtonClient="Approve"
890
+ onClickLeftButton={() => console.log("left button clicked")}
891
+ onClickRightButton={() => console.log("right button clicked")}
892
+ />
893
+ </div>
894
+ {isOpenAlert && (
895
+ <div className="w-full py-3">
896
+ <Alert
897
+ title="Client & Division Reminder"
898
+ subtitle="Please ensure you have created the appropriate Client and division for the user before proceeding."
899
+ onCloseButton={() => setIsOpenAlert(false)}
900
+ />
868
901
  </div>
869
- {
870
- isOpenAlert &&
871
- <div className='w-full py-3'>
872
- <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' onCloseButton={() => setIsOpenAlert(false)}/>
873
- </div>
874
- }
875
-
876
-
877
- <div className='m-9'></div>
878
- <p className='text-black font-bold text-2xl text-center py-2'>Primary Button</p>
879
- <p className='text-black font-semibold text-xl text-left py-1'>Full Width</p>
880
- <p className='text-black font-normal text-lg text-left py-3'>1. Small</p>
881
- <PrimaryButton type='full' size='small'/>
882
- <p className='text-black font-normal text-lg text-left py-3'>2. Medium</p>
883
- <PrimaryButton type='full' size='medium'/>
884
- <p className='text-black font-normal text-lg text-left py-3'>3. Large</p>
885
- <PrimaryButton type='full' size='large'/>
886
- <p className='text-black font-normal text-lg text-left py-3'>4. Very Large</p>
887
- <PrimaryButton type='full' size='very large'/>
888
- <p className='text-black font-normal text-lg text-left py-3'>5. Extra Very Large</p>
889
- <PrimaryButton type='full' size='extra very large'/>
890
- <p className='text-black font-normal text-lg text-left py-3'>6. Disable</p>
891
- <PrimaryButton type='full' size='medium' isActive={false}/>
892
- <p className='text-black font-normal text-lg text-left py-3'>7. Clickable</p>
893
- <PrimaryButton type='full' size='medium' onClick={() => alert('Button clicked!')}/>
894
-
895
- <div className='m-9'></div>
896
- <p className='text-black font-semibold text-xl text-left py-1'>Wrap Width</p>
897
- <p className='text-black font-normal text-lg text-left py-3'>1. Small</p>
898
- <PrimaryButton type='wrap' size='small'/>
899
- <p className='text-black font-normal text-lg text-left py-3'>2. Medium</p>
900
- <PrimaryButton type='wrap' size='medium'/>
901
- <p className='text-black font-normal text-lg text-left py-3'>3. Large</p>
902
- <PrimaryButton type='wrap' size='large'/>
903
- <p className='text-black font-normal text-lg text-left py-3'>4. Very Large</p>
904
- <PrimaryButton type='wrap' size='very large'/>
905
- <p className='text-black font-normal text-lg text-left py-3'>5. Extra Very Large</p>
906
- <PrimaryButton type='wrap' size='extra very large'/>
907
- <p className='text-black font-normal text-lg text-left py-3'>6. Disable</p>
908
- <PrimaryButton type='wrap' size='medium' isActive={false}/>
909
- <p className='text-black font-normal text-lg text-left py-3'>7. Clickable</p>
910
- <PrimaryButton type='wrap' size='medium' onClick={() => alert('Button clicked!')}/>
911
-
912
- <div className='m-9'></div>
913
- <p className='text-black font-bold text-2xl text-center py-2'>Outline Button</p>
914
- <p className='text-black font-semibold text-xl text-left py-1'>Full Width</p>
915
- <p className='text-black font-normal text-lg text-left py-3'>1. Small</p>
916
- <OutlineButton type='full' size='small'/>
917
- <p className='text-black font-normal text-lg text-left py-3'>2. Medium</p>
918
- <OutlineButton type='full' size='medium'/>
919
- <p className='text-black font-normal text-lg text-left py-3'>3. Large</p>
920
- <OutlineButton type='full' size='large'/>
921
- <p className='text-black font-normal text-lg text-left py-3'>4. Very Large</p>
922
- <OutlineButton type='full' size='very large'/>
923
- <p className='text-black font-normal text-lg text-left py-3'>5. Extra Very Large</p>
924
- <OutlineButton type='full' size='extra very large'/>
925
- <p className='text-black font-normal text-lg text-left py-3'>6. Disable</p>
926
- <OutlineButton type='full' size='medium' isActive={false}/>
927
- <p className='text-black font-normal text-lg text-left py-3'>7. Clickable</p>
928
- <OutlineButton type='full' size='medium' onClick={() => alert('Button clicked!')}/>
929
-
930
- <div className='m-9'></div>
931
- <p className='text-black font-semibold text-xl text-left py-1'>Wrap Width</p>
932
- <p className='text-black font-normal text-lg text-left py-3'>1. Small</p>
933
- <OutlineButton type='wrap' size='small'/>
934
- <p className='text-black font-normal text-lg text-left py-3'>2. Medium</p>
935
- <OutlineButton type='wrap' size='medium'/>
936
- <p className='text-black font-normal text-lg text-left py-3'>3. Large</p>
937
- <OutlineButton type='wrap' size='large'/>
938
- <p className='text-black font-normal text-lg text-left py-3'>4. Very Large</p>
939
- <OutlineButton type='wrap' size='very large'/>
940
- <p className='text-black font-normal text-lg text-left py-3'>5. Extra Very Large</p>
941
- <OutlineButton type='wrap' size='extra very large'/>
942
- <p className='text-black font-normal text-lg text-left py-3'>6. Disable</p>
943
- <OutlineButton type='wrap' size='medium' isActive={false}/>
944
- <p className='text-black font-normal text-lg text-left py-3'>7. Clickable</p>
945
- <OutlineButton type='wrap' size='medium' onClick={() => alert('Button clicked!')}/>
946
-
947
- <div className='m-9'></div>
948
- <p className='text-black font-bold text-2xl text-center py-2'>Danger Button</p>
949
- <p className='text-black font-semibold text-xl text-left py-1'>Full Width</p>
950
- <p className='text-black font-normal text-lg text-left py-3'>1. Small</p>
951
- <DangerButton type='full' size='small'/>
952
- <p className='text-black font-normal text-lg text-left py-3'>2. Medium</p>
953
- <DangerButton type='full' size='medium'/>
954
- <p className='text-black font-normal text-lg text-left py-3'>3. Large</p>
955
- <DangerButton type='full' size='large'/>
956
- <p className='text-black font-normal text-lg text-left py-3'>4. Very Large</p>
957
- <DangerButton type='full' size='very large'/>
958
- <p className='text-black font-normal text-lg text-left py-3'>5. Extra Very Large</p>
959
- <DangerButton type='full' size='extra very large'/>
960
- <p className='text-black font-normal text-lg text-left py-3'>6. Disable</p>
961
- <DangerButton type='full' size='medium' isActive={false}/>
962
- <p className='text-black font-normal text-lg text-left py-3'>7. Clickable</p>
963
- <DangerButton type='full' size='medium' onClick={() => alert('Button clicked!')}/>
964
-
965
- <div className='m-9'></div>
966
- <p className='text-black font-semibold text-xl text-left py-1'>Wrap Width</p>
967
- <p className='text-black font-normal text-lg text-left py-3'>1. Small</p>
968
- <DangerButton type='wrap' size='small'/>
969
- <p className='text-black font-normal text-lg text-left py-3'>2. Medium</p>
970
- <DangerButton type='wrap' size='medium'/>
971
- <p className='text-black font-normal text-lg text-left py-3'>3. Large</p>
972
- <DangerButton type='wrap' size='large'/>
973
- <p className='text-black font-normal text-lg text-left py-3'>4. Very Large</p>
974
- <DangerButton type='wrap' size='very large'/>
975
- <p className='text-black font-normal text-lg text-left py-3'>5. Extra Very Large</p>
976
- <DangerButton type='wrap' size='extra very large'/>
977
- <p className='text-black font-normal text-lg text-left py-3'>6. Disable</p>
978
- <DangerButton type='wrap' size='medium' isActive={false}/>
979
- <p className='text-black font-normal text-lg text-left py-3'>7. Clickable</p>
980
- <DangerButton type='wrap' size='medium' onClick={() => alert('Button clicked!')}/>
981
-
982
- <div className='m-9'></div>
983
- <p className='text-black font-bold text-2xl text-center py-2'>Card</p>
984
- <div className='w-full'>
985
- <CardInternalProduct
986
- title="Sample Product"
987
- productCode="SP123"
988
- company="Example Corp"
989
- image="https://picsum.photos/id/237/200/300"
990
- isCloseButton={true}
991
- mode="detail"
992
- onClick={() => alert('Button clicked!')}
993
- />
994
- </div>
995
-
996
- <div className='m-9'></div>
997
- <p className='text-black font-bold text-2xl text-center py-2'>Chip</p>
998
- <p className='text-black font-semibold text-xl text-left py-3'>Chip Success</p>
999
- <Chip title='Approve' type='success' onClick={() => alert('Approved')} />
1000
-
1001
- <p className='text-black font-semibold text-xl text-left py-3'>Chip Warning</p>
1002
- <Chip title='Prepaid' type='warning' onClick={() => alert('Prepaid')} />
1003
-
1004
- <p className='text-black font-semibold text-xl text-left py-3'>Chip Danger</p>
1005
- <Chip title='Decline' type='danger' onClick={() => alert('Declined')} />
1006
-
1007
- <div className='m-9'></div>
1008
- <p className='text-black font-bold text-2xl text-center py-2'>Date Picker</p>
1009
- <CustomDatePicker
1010
- startDate={startDate}
1011
- onChangeStartDate={setStartDate}
1012
- endDate={endDate}
1013
- onChangeEndDate={setEndDate}
902
+ )}
903
+
904
+ <div className="m-9"></div>
905
+ <p className="text-black font-bold text-2xl text-center py-2">Primary Button</p>
906
+ <p className="text-black font-semibold text-xl text-left py-1">Full Width</p>
907
+ <p className="text-black font-normal text-lg text-left py-3">1. Small</p>
908
+ <PrimaryButton type="full" size="small" />
909
+ <p className="text-black font-normal text-lg text-left py-3">2. Medium</p>
910
+ <PrimaryButton type="full" size="medium" />
911
+ <p className="text-black font-normal text-lg text-left py-3">3. Large</p>
912
+ <PrimaryButton type="full" size="large" />
913
+ <p className="text-black font-normal text-lg text-left py-3">4. Very Large</p>
914
+ <PrimaryButton type="full" size="very large" />
915
+ <p className="text-black font-normal text-lg text-left py-3">5. Extra Very Large</p>
916
+ <PrimaryButton type="full" size="extra very large" />
917
+ <p className="text-black font-normal text-lg text-left py-3">6. Disable</p>
918
+ <PrimaryButton type="full" size="medium" isActive={false} />
919
+ <p className="text-black font-normal text-lg text-left py-3">7. Clickable</p>
920
+ <PrimaryButton type="full" size="medium" onClick={() => alert("Button clicked!")} />
921
+
922
+ <div className="m-9"></div>
923
+ <p className="text-black font-semibold text-xl text-left py-1">Wrap Width</p>
924
+ <p className="text-black font-normal text-lg text-left py-3">1. Small</p>
925
+ <PrimaryButton type="wrap" size="small" />
926
+ <p className="text-black font-normal text-lg text-left py-3">2. Medium</p>
927
+ <PrimaryButton type="wrap" size="medium" />
928
+ <p className="text-black font-normal text-lg text-left py-3">3. Large</p>
929
+ <PrimaryButton type="wrap" size="large" />
930
+ <p className="text-black font-normal text-lg text-left py-3">4. Very Large</p>
931
+ <PrimaryButton type="wrap" size="very large" />
932
+ <p className="text-black font-normal text-lg text-left py-3">5. Extra Very Large</p>
933
+ <PrimaryButton type="wrap" size="extra very large" />
934
+ <p className="text-black font-normal text-lg text-left py-3">6. Disable</p>
935
+ <PrimaryButton type="wrap" size="medium" isActive={false} />
936
+ <p className="text-black font-normal text-lg text-left py-3">7. Clickable</p>
937
+ <PrimaryButton type="wrap" size="medium" onClick={() => alert("Button clicked!")} />
938
+
939
+ <div className="m-9"></div>
940
+ <p className="text-black font-bold text-2xl text-center py-2">Outline Button</p>
941
+ <p className="text-black font-semibold text-xl text-left py-1">Full Width</p>
942
+ <p className="text-black font-normal text-lg text-left py-3">1. Small</p>
943
+ <OutlineButton type="full" size="small" />
944
+ <p className="text-black font-normal text-lg text-left py-3">2. Medium</p>
945
+ <OutlineButton type="full" size="medium" />
946
+ <p className="text-black font-normal text-lg text-left py-3">3. Large</p>
947
+ <OutlineButton type="full" size="large" />
948
+ <p className="text-black font-normal text-lg text-left py-3">4. Very Large</p>
949
+ <OutlineButton type="full" size="very large" />
950
+ <p className="text-black font-normal text-lg text-left py-3">5. Extra Very Large</p>
951
+ <OutlineButton type="full" size="extra very large" />
952
+ <p className="text-black font-normal text-lg text-left py-3">6. Disable</p>
953
+ <OutlineButton type="full" size="medium" isActive={false} />
954
+ <p className="text-black font-normal text-lg text-left py-3">7. Clickable</p>
955
+ <OutlineButton type="full" size="medium" onClick={() => alert("Button clicked!")} />
956
+
957
+ <div className="m-9"></div>
958
+ <p className="text-black font-semibold text-xl text-left py-1">Wrap Width</p>
959
+ <p className="text-black font-normal text-lg text-left py-3">1. Small</p>
960
+ <OutlineButton type="wrap" size="small" />
961
+ <p className="text-black font-normal text-lg text-left py-3">2. Medium</p>
962
+ <OutlineButton type="wrap" size="medium" />
963
+ <p className="text-black font-normal text-lg text-left py-3">3. Large</p>
964
+ <OutlineButton type="wrap" size="large" />
965
+ <p className="text-black font-normal text-lg text-left py-3">4. Very Large</p>
966
+ <OutlineButton type="wrap" size="very large" />
967
+ <p className="text-black font-normal text-lg text-left py-3">5. Extra Very Large</p>
968
+ <OutlineButton type="wrap" size="extra very large" />
969
+ <p className="text-black font-normal text-lg text-left py-3">6. Disable</p>
970
+ <OutlineButton type="wrap" size="medium" isActive={false} />
971
+ <p className="text-black font-normal text-lg text-left py-3">7. Clickable</p>
972
+ <OutlineButton type="wrap" size="medium" onClick={() => alert("Button clicked!")} />
973
+
974
+ <div className="m-9"></div>
975
+ <p className="text-black font-bold text-2xl text-center py-2">Danger Button</p>
976
+ <p className="text-black font-semibold text-xl text-left py-1">Full Width</p>
977
+ <p className="text-black font-normal text-lg text-left py-3">1. Small</p>
978
+ <DangerButton type="full" size="small" />
979
+ <p className="text-black font-normal text-lg text-left py-3">2. Medium</p>
980
+ <DangerButton type="full" size="medium" />
981
+ <p className="text-black font-normal text-lg text-left py-3">3. Large</p>
982
+ <DangerButton type="full" size="large" />
983
+ <p className="text-black font-normal text-lg text-left py-3">4. Very Large</p>
984
+ <DangerButton type="full" size="very large" />
985
+ <p className="text-black font-normal text-lg text-left py-3">5. Extra Very Large</p>
986
+ <DangerButton type="full" size="extra very large" />
987
+ <p className="text-black font-normal text-lg text-left py-3">6. Disable</p>
988
+ <DangerButton type="full" size="medium" isActive={false} />
989
+ <p className="text-black font-normal text-lg text-left py-3">7. Clickable</p>
990
+ <DangerButton type="full" size="medium" onClick={() => alert("Button clicked!")} />
991
+
992
+ <div className="m-9"></div>
993
+ <p className="text-black font-semibold text-xl text-left py-1">Wrap Width</p>
994
+ <p className="text-black font-normal text-lg text-left py-3">1. Small</p>
995
+ <DangerButton type="wrap" size="small" />
996
+ <p className="text-black font-normal text-lg text-left py-3">2. Medium</p>
997
+ <DangerButton type="wrap" size="medium" />
998
+ <p className="text-black font-normal text-lg text-left py-3">3. Large</p>
999
+ <DangerButton type="wrap" size="large" />
1000
+ <p className="text-black font-normal text-lg text-left py-3">4. Very Large</p>
1001
+ <DangerButton type="wrap" size="very large" />
1002
+ <p className="text-black font-normal text-lg text-left py-3">5. Extra Very Large</p>
1003
+ <DangerButton type="wrap" size="extra very large" />
1004
+ <p className="text-black font-normal text-lg text-left py-3">6. Disable</p>
1005
+ <DangerButton type="wrap" size="medium" isActive={false} />
1006
+ <p className="text-black font-normal text-lg text-left py-3">7. Clickable</p>
1007
+ <DangerButton type="wrap" size="medium" onClick={() => alert("Button clicked!")} />
1008
+
1009
+ <div className="m-9"></div>
1010
+ <p className="text-black font-bold text-2xl text-center py-2">Card</p>
1011
+ <div className="w-full">
1012
+ <CardInternalProduct
1013
+ title="Sample Product"
1014
+ productCode="SP123"
1015
+ company="Example Corp"
1016
+ image="https://picsum.photos/id/237/200/300"
1017
+ isCloseButton={true}
1018
+ mode="detail"
1019
+ onClick={() => alert("Button clicked!")}
1014
1020
  />
1021
+ </div>
1015
1022
 
1016
- <div className='m-9'></div>
1017
- <p className='text-black font-bold text-2xl text-center py-2'>Description</p>
1018
- <Description title="Sample Title" value="This is a sample description." />
1023
+ <div className="m-9"></div>
1024
+ <p className="text-black font-bold text-2xl text-center py-2">Chip</p>
1025
+ <p className="text-black font-semibold text-xl text-left py-3">Chip Success</p>
1026
+ <Chip title="Approve" type="success" onClick={() => alert("Approved")} />
1019
1027
 
1020
- <div className='m-9'></div>
1021
- <p className='text-black font-bold text-2xl text-center py-2'>Dropdown</p>
1022
- <DropdownCard
1023
- options={sampleOptions}
1024
- onSelect={handleSelect}
1025
- title="Select an Option"
1026
- />
1028
+ <p className="text-black font-semibold text-xl text-left py-3">Chip Warning</p>
1029
+ <Chip title="Prepaid" type="warning" onClick={() => alert("Prepaid")} />
1027
1030
 
1028
- <div className='m-9'></div>
1029
- <DropdownChip
1030
- onSelect={handleSelectOption}
1031
- selectedOptions={selectedOptions}
1032
- onRemoveOption={handleRemoveOption}
1033
- title="Custom Title Dropdown"
1034
- />
1031
+ <p className="text-black font-semibold text-xl text-left py-3">Chip Danger</p>
1032
+ <Chip title="Decline" type="danger" onClick={() => alert("Declined")} />
1035
1033
 
1036
- <div className='m-9'></div>
1037
- <DropdownText
1038
- options={options}
1039
- currentOption={currentOption}
1040
- onSelectName={handleSelectName}
1041
- onSelectValue={handleSelectValue}
1042
- title="Select an Option"
1043
- />
1034
+ <div className="m-9"></div>
1035
+ <p className="text-black font-bold text-2xl text-center py-2">Date Picker</p>
1036
+ <CustomDatePicker
1037
+ startDate={startDate}
1038
+ onChangeStartDate={setStartDate}
1039
+ endDate={endDate}
1040
+ onChangeEndDate={setEndDate}
1041
+ />
1044
1042
 
1045
- <div className='m-9'></div>
1046
- <DropdownText
1047
- options={options}
1048
- currentOption={currentOption}
1049
- onSelectName={handleSelectName}
1050
- onSelectValue={handleSelectValue}
1051
- isEdited={false}
1052
- title="Cannot Edit"
1053
- />
1043
+ <div className="m-9"></div>
1044
+ <p className="text-black font-bold text-2xl text-center py-2">Description</p>
1045
+ <Description title="Sample Title" value="This is a sample description." />
1054
1046
 
1055
- <div className='m-9'></div>
1056
- <p className='text-black font-bold text-2xl text-center py-2'>Dropzone</p>
1057
- <DropzoneUploadFile
1058
- title="Upload Your File"
1059
- subtitle="Accepts PDF, JPEG, JPG. Max size 5 MB"
1060
- required={true}
1061
- />
1047
+ <div className="m-9"></div>
1048
+ <p className="text-black font-bold text-2xl text-center py-2">Dropdown</p>
1049
+ <DropdownCard options={sampleOptions} onSelect={handleSelect} title="Select an Option" />
1062
1050
 
1063
- <div className='m-9'></div>
1064
- <DropzoneUploadPhoto
1065
- onFileChange={handleFileChange}
1066
- currentImage={currentImage}
1067
- />
1051
+ <div className="m-9"></div>
1052
+ <DropdownChip
1053
+ onSelect={handleSelectOption}
1054
+ selectedOptions={selectedOptions}
1055
+ onRemoveOption={handleRemoveOption}
1056
+ title="Custom Title Dropdown"
1057
+ />
1068
1058
 
1069
- <div className='m-9'></div>
1070
- <p className='text-black font-bold text-2xl text-center py-2'>Empty Data</p>
1071
- <EmptyData/>
1059
+ <div className="m-9"></div>
1060
+ <DropdownText
1061
+ options={options}
1062
+ currentOption={currentOption}
1063
+ onSelectName={handleSelectName}
1064
+ onSelectValue={handleSelectValue}
1065
+ title="Select an Option"
1066
+ />
1072
1067
 
1073
- <div className='m-9'></div>
1074
- <p className='text-black font-bold text-2xl text-center py-2'>Not Found</p>
1075
- <NotFound/>
1068
+ <div className="m-9"></div>
1069
+ <DropdownText
1070
+ options={options}
1071
+ currentOption={currentOption}
1072
+ onSelectName={handleSelectName}
1073
+ onSelectValue={handleSelectValue}
1074
+ isEdited={false}
1075
+ title="Cannot Edit"
1076
+ />
1076
1077
 
1077
- <div className='m-9'></div>
1078
- <p className='text-black font-bold text-2xl text-center py-2'>Import to Excel</p>
1079
- <ExportToExcel dataExport={data} fileName="SampleData" title="Export to Excel" />
1078
+ <div className="m-9"></div>
1079
+ <p className="text-black font-bold text-2xl text-center py-2">Dropzone</p>
1080
+ <DropzoneUploadFile title="Upload Your File" subtitle="Accepts PDF, JPEG, JPG. Max size 5 MB" required={true} />
1080
1081
 
1081
- <div className='m-9'></div>
1082
- <p className='text-black font-bold text-2xl text-center py-2'>Filter</p>
1083
- <FilterCheckbox
1084
- options={["Option 1", "Option 2", "Option 3"]}
1085
- onSelect={handleSelect}
1086
- />
1082
+ <div className="m-9"></div>
1083
+ <DropzoneUploadPhoto onFileChange={handleFileChange} currentImage={currentImage} />
1087
1084
 
1088
- <div className='m-9'></div>
1089
- <FilterText
1090
- options={["Option 1", "Option 2", "Option 3"]}
1091
- onSelect={handleSelect}
1092
- />
1085
+ <div className="m-9"></div>
1086
+ <p className="text-black font-bold text-2xl text-center py-2">Empty Data</p>
1087
+ <EmptyData />
1093
1088
 
1094
- <div className='m-9'></div>
1095
- <FilterDropdown
1096
- options = {[
1097
- {
1098
- menu:"Type",
1099
- parameter : "type",
1100
- submenu:[
1101
- {
1102
- option:"Type 1",
1103
- value : "type1"
1104
- },
1105
- {
1106
- option:"Type 2",
1107
- value : "type2"
1108
- },
1109
- {
1110
- option:"Type 3",
1111
- value : "type3"
1112
- },
1113
- ],
1114
- type:"checkbox"
1115
- },
1116
- {
1117
- menu:"Status",
1118
- parameter : "status",
1119
- submenu:[
1120
- {
1121
- option : "Status 1",
1122
- value : "status1"
1123
- },
1124
- {
1125
- option : "Status 2",
1126
- value : "status2"
1127
- },
1128
- {
1129
- option : "Status 3",
1130
- value : "status3"
1131
- },
1132
- ],
1133
- type:"radiobutton"
1134
- },
1135
- {
1136
- menu:"Payment",
1137
- parameter : "payment",
1138
- submenu:[{
1139
- option : "Payment 1",
1140
- value : "payment1"
1141
- }],
1142
- type:"radiobutton"
1143
- },
1144
- ]}
1145
- dataFilterResult={dataFilterResult2}
1146
- setDataFilterResult={setDataFilterResult2}
1147
- />
1089
+ <div className="m-9"></div>
1090
+ <p className="text-black font-bold text-2xl text-center py-2">Not Found</p>
1091
+ <NotFound />
1148
1092
 
1149
- <div className='m-9'></div>
1150
- <p className='text-black font-bold text-2xl text-center py-2'>Menu</p>
1151
- <div>
1152
- <OutlineButton onClick={toggleIsActive} title="Toggle Active State" />
1153
- <div className='m-3'></div>
1154
- <OutlineButton onClick={toggleIsOpen} title="Toggle Open State" />
1155
- <div className='m-3'></div>
1156
- <OutlineButton onClick={toggleType} title="Toggle Type" />
1157
- <div className='m-3'></div>
1158
- <OutlineButton onClick={toggleIsHaveChild} title="Toggle Child Presence" />
1159
- <div className='m-3'></div>
1160
- <OutlineButton onClick={toggleIsExpand} title="Toggle Expand" />
1161
- </div>
1162
- <div className='m-3'></div>
1163
- <Menu
1164
- isActive={isActive}
1165
- title={type === "parent" ? "Parent Menu" : "Child Menu"}
1166
- iconMenuActive={PiCaretUp}
1167
- iconMenuPassive={PiCaretDown}
1168
- isOpen={isOpen}
1169
- type={type}
1170
- isHaveChild={isHaveChild}
1171
- isExpand={isExpand}
1172
- />
1093
+ <div className="m-9"></div>
1094
+ <p className="text-black font-bold text-2xl text-center py-2">Import to Excel</p>
1095
+ <ExportToExcel dataExport={data} fileName="SampleData" title="Export to Excel" />
1173
1096
 
1174
- <div className='m-9'></div>
1175
- <p className='text-black font-bold text-2xl text-center py-2'>Notification</p>
1176
- <Notification dataNotification={notifications} />
1097
+ <div className="m-9"></div>
1098
+ <p className="text-black font-bold text-2xl text-center py-2">Filter</p>
1099
+ <FilterCheckbox options={["Option 1", "Option 2", "Option 3"]} onSelect={handleSelect} />
1177
1100
 
1178
- <div className='m-9'></div>
1179
- <p className='text-black font-bold text-2xl text-center py-2'>Search Input</p>
1101
+ <div className="m-9"></div>
1102
+ <FilterText options={["Option 1", "Option 2", "Option 3"]} onSelect={handleSelect} />
1180
1103
 
1181
- <SearchInput
1182
- placeholder="Search something..."
1183
- value={searchValue}
1184
- onChange={handleSearchChange}
1185
- onEnterPress={onEnterPress}
1186
- />
1104
+ <div className="m-9"></div>
1105
+ <FilterDropdown
1106
+ options={[
1107
+ {
1108
+ menu: "Type",
1109
+ parameter: "type",
1110
+ submenu: [
1111
+ {
1112
+ option: "Type 1",
1113
+ value: "type1",
1114
+ },
1115
+ {
1116
+ option: "Type 2",
1117
+ value: "type2",
1118
+ },
1119
+ {
1120
+ option: "Type 3",
1121
+ value: "type3",
1122
+ },
1123
+ ],
1124
+ type: "checkbox",
1125
+ },
1126
+ {
1127
+ menu: "Status",
1128
+ parameter: "status",
1129
+ submenu: [
1130
+ {
1131
+ option: "Status 1",
1132
+ value: "status1",
1133
+ },
1134
+ {
1135
+ option: "Status 2",
1136
+ value: "status2",
1137
+ },
1138
+ {
1139
+ option: "Status 3",
1140
+ value: "status3",
1141
+ },
1142
+ ],
1143
+ type: "radiobutton",
1144
+ },
1145
+ {
1146
+ menu: "Payment",
1147
+ parameter: "payment",
1148
+ submenu: [
1149
+ {
1150
+ option: "Payment 1",
1151
+ value: "payment1",
1152
+ },
1153
+ ],
1154
+ type: "radiobutton",
1155
+ },
1156
+ ]}
1157
+ dataFilterResult={dataFilterResult2}
1158
+ setDataFilterResult={setDataFilterResult2}
1159
+ />
1187
1160
 
1188
- <div className='m-9'></div>
1189
- <SearchInput
1190
- placeholder="Medium Width Search"
1191
- value={searchValue}
1192
- onChange={handleSearchChange}
1193
- onEnterPress={onEnterPress}
1194
- width="medium"
1195
- />
1161
+ <div className="m-9"></div>
1162
+ <p className="text-black font-bold text-2xl text-center py-2">Menu</p>
1163
+ <div>
1164
+ <OutlineButton onClick={toggleIsActive} title="Toggle Active State" />
1165
+ <div className="m-3"></div>
1166
+ <OutlineButton onClick={toggleIsOpen} title="Toggle Open State" />
1167
+ <div className="m-3"></div>
1168
+ <OutlineButton onClick={toggleType} title="Toggle Type" />
1169
+ <div className="m-3"></div>
1170
+ <OutlineButton onClick={toggleIsHaveChild} title="Toggle Child Presence" />
1171
+ <div className="m-3"></div>
1172
+ <OutlineButton onClick={toggleIsExpand} title="Toggle Expand" />
1173
+ </div>
1174
+ <div className="m-3"></div>
1175
+ <Menu
1176
+ isActive={isActive}
1177
+ title={type === "parent" ? "Parent Menu" : "Child Menu"}
1178
+ iconMenuActive={PiCaretUp}
1179
+ iconMenuPassive={PiCaretDown}
1180
+ isOpen={isOpen}
1181
+ type={type}
1182
+ isHaveChild={isHaveChild}
1183
+ isExpand={isExpand}
1184
+ />
1196
1185
 
1197
- <div className='m-9'></div>
1198
- <SearchInput
1199
- placeholder="Large Width Search"
1200
- value={searchValue}
1201
- onChange={handleSearchChange}
1202
- onEnterPress={onEnterPress}
1203
- width="large"
1204
- />
1186
+ <div className="m-9"></div>
1187
+ <p className="text-black font-bold text-2xl text-center py-2">Notification</p>
1188
+ <Notification dataNotification={notifications} />
1205
1189
 
1206
- <div className='m-9'></div>
1207
- <SearchInput
1208
- placeholder="Full Width Search"
1209
- value={searchValue}
1210
- onChange={handleSearchChange}
1211
- onEnterPress={onEnterPress}
1212
- width="full"
1213
- />
1190
+ <div className="m-9"></div>
1191
+ <p className="text-black font-bold text-2xl text-center py-2">Search Input</p>
1214
1192
 
1215
- <div className='m-9'></div>
1216
- <SearchDropdown
1217
- options={[
1218
- {
1219
- option: "Name 1",
1220
- value : "Value 1"
1221
- },
1222
- {
1223
- option: "Name 2",
1224
- value : "Value 2"
1225
- },
1226
- ]}
1227
- placeholderSearch='Search Here...'
1228
- filterDropdown={filterDropdown}
1229
- setFilterDropdown={setFilterDropdown}
1230
- filterSearch={searchFilter}
1231
- setFilterSearch={setSearchFilter}
1232
- onEnterPress={onHandleEnter}
1233
- />
1193
+ <SearchInput
1194
+ placeholder="Search something..."
1195
+ value={searchValue}
1196
+ onChange={handleSearchChange}
1197
+ onEnterPress={onEnterPress}
1198
+ />
1234
1199
 
1235
- <div className='m-9'></div>
1236
- <p className='text-black font-bold text-2xl text-center py-2'>Stepper</p>
1237
- {
1238
- scenarios.map((scenario, index) => (
1239
- <div key={index} className='mb-10'>
1240
- <Stepper data={scenario.data} currentStep={scenario.currentStep} />
1241
- </div>
1242
- ))
1243
- }
1244
-
1245
- <div className='m-9'></div>
1246
- <p className='text-black font-bold text-2xl text-center py-2'>Switch</p>
1247
- <div className="mb-4">
1248
- <p>Editable and Checked</p>
1249
- <Switch
1250
- onChange={() => handleToggleSwitch('switch1')}
1251
- checked={switchState.switch1}
1252
- isEdit={true}
1253
- />
1200
+ <div className="m-9"></div>
1201
+ <SearchInput
1202
+ placeholder="Medium Width Search"
1203
+ value={searchValue}
1204
+ onChange={handleSearchChange}
1205
+ onEnterPress={onEnterPress}
1206
+ width="medium"
1207
+ />
1208
+
1209
+ <div className="m-9"></div>
1210
+ <SearchInput
1211
+ placeholder="Large Width Search"
1212
+ value={searchValue}
1213
+ onChange={handleSearchChange}
1214
+ onEnterPress={onEnterPress}
1215
+ width="large"
1216
+ />
1217
+
1218
+ <div className="m-9"></div>
1219
+ <SearchInput
1220
+ placeholder="Full Width Search"
1221
+ value={searchValue}
1222
+ onChange={handleSearchChange}
1223
+ onEnterPress={onEnterPress}
1224
+ width="full"
1225
+ />
1226
+
1227
+ <div className="m-9"></div>
1228
+ <SearchDropdown
1229
+ options={[
1230
+ {
1231
+ option: "Name 1",
1232
+ value: "Value 1",
1233
+ },
1234
+ {
1235
+ option: "Name 2",
1236
+ value: "Value 2",
1237
+ },
1238
+ ]}
1239
+ placeholderSearch="Search Here..."
1240
+ filterDropdown={filterDropdown}
1241
+ setFilterDropdown={setFilterDropdown}
1242
+ filterSearch={searchFilter}
1243
+ setFilterSearch={setSearchFilter}
1244
+ onEnterPress={onHandleEnter}
1245
+ />
1246
+
1247
+ <div className="m-9"></div>
1248
+ <p className="text-black font-bold text-2xl text-center py-2">Stepper</p>
1249
+ {scenarios.map((scenario, index) => (
1250
+ <div key={index} className="mb-10">
1251
+ <Stepper data={scenario.data} currentStep={scenario.currentStep} />
1254
1252
  </div>
1255
- <div className="mb-4">
1253
+ ))}
1254
+
1255
+ <div className="m-9"></div>
1256
+ <p className="text-black font-bold text-2xl text-center py-2">Switch</p>
1257
+ <div className="mb-4">
1258
+ <p>Editable and Checked</p>
1259
+ <Switch onChange={() => handleToggleSwitch("switch1")} checked={switchState.switch1} isEdit={true} />
1260
+ </div>
1261
+ <div className="mb-4">
1256
1262
  <p>Editable and Unchecked</p>
1257
- <Switch
1258
- onChange={() => handleToggleSwitch('switch2')}
1259
- checked={switchState.switch2}
1260
- isEdit={true}
1261
- />
1262
- </div>
1263
- <div className="mb-4">
1264
- <p>Non-Editable and Checked</p>
1265
- <Switch
1266
- checked={switchState.switch3}
1267
- isEdit={false}
1268
- />
1269
- </div>
1263
+ <Switch onChange={() => handleToggleSwitch("switch2")} checked={switchState.switch2} isEdit={true} />
1264
+ </div>
1265
+ <div className="mb-4">
1266
+ <p>Non-Editable and Checked</p>
1267
+ <Switch checked={switchState.switch3} isEdit={false} />
1268
+ </div>
1270
1269
 
1271
- <p className='text-black font-bold text-2xl text-center py-2'>Chip Bar</p>
1272
- <div className='m-9'></div>
1273
- <ChipBar
1274
- currentTab={currentTab}
1275
- dataBar={dataBar}
1276
- dataValue={dataValue}
1277
- onChangeChipBar={handleChangeChipBar}
1278
- />
1279
- <div className="mt-4">
1280
- <p>Current Tab: {currentTab}</p>
1281
- </div>
1270
+ <p className="text-black font-bold text-2xl text-center py-2">Chip Bar</p>
1271
+ <div className="m-9"></div>
1272
+ <ChipBar currentTab={currentTab} dataBar={dataBar} dataValue={dataValue} onChangeChipBar={handleChangeChipBar} />
1273
+ <div className="mt-4">
1274
+ <p>Current Tab: {currentTab}</p>
1275
+ </div>
1282
1276
 
1283
- <div className='m-9'></div>
1284
- <p className='text-black font-bold text-2xl text-center py-2'>Tab Bar</p>
1285
- <TabBar
1286
- currentTab={currentTabBar}
1287
- dataBar={dataTabBar}
1288
- onChangeTabBar={handleChangeTabBar}
1289
- />
1290
- <div className="mt-4">
1291
- <p>Current Tab: {dataBar[currentTabBar]}</p>
1292
- </div>
1277
+ <div className="m-9"></div>
1278
+ <p className="text-black font-bold text-2xl text-center py-2">Tab Bar</p>
1279
+ <TabBar currentTab={currentTabBar} dataBar={dataTabBar} onChangeTabBar={handleChangeTabBar} />
1280
+ <div className="mt-4">
1281
+ <p>Current Tab: {dataBar[currentTabBar]}</p>
1282
+ </div>
1293
1283
 
1294
- <div className='m-9'></div>
1295
- <p className='text-black font-bold text-2xl text-center py-2'>Table</p>
1296
- <table className='w-full text-left'>
1284
+ <div className="m-9"></div>
1285
+ <p className="text-black font-bold text-2xl text-center py-2">Table</p>
1286
+ <table className="w-full text-left">
1297
1287
  <HeaderTable dataHeader={["Partner", "Email", "Phone", "Status"]} />
1298
- <tbody>
1299
- {
1300
- billers.map((biller, index) => (
1301
- <BillerList
1302
- key={index}
1303
- onClick={handleClickBiller}
1304
- titlePartnerName={biller.titlePartnerName}
1305
- subtitlePartnerName={biller.subtitlePartnerName}
1306
- email={biller.email}
1307
- phoneNumber={biller.phoneNumber}
1308
- titleStatus={biller.titleStatus}
1309
- />
1310
- ))
1311
- }
1312
- </tbody>
1313
- </table>
1288
+ <tbody>
1289
+ {billers.map((biller, index) => (
1290
+ <BillerList
1291
+ key={index}
1292
+ onClick={handleClickBiller}
1293
+ titlePartnerName={biller.titlePartnerName}
1294
+ subtitlePartnerName={biller.subtitlePartnerName}
1295
+ email={biller.email}
1296
+ phoneNumber={biller.phoneNumber}
1297
+ titleStatus={biller.titleStatus}
1298
+ />
1299
+ ))}
1300
+ </tbody>
1301
+ </table>
1314
1302
 
1315
- <div className='m-9'></div>
1316
- <table className='w-full text-left'>
1303
+ <div className="m-9"></div>
1304
+ <table className="w-full text-left">
1317
1305
  <HeaderTable dataHeader={["Product Name", "Provider", "Denom", "Active Period", "Price", "Biller"]} />
1318
- <tbody>
1319
- {
1320
- products.map((product, index) => (
1321
- <BillerProductList
1322
- key={index}
1323
- onClick={handleClick}
1324
- titleProductName={product.titleProductName}
1325
- subtitleProductName={product.subtitleProductName}
1326
- provider={product.provider}
1327
- denom={product.denom}
1328
- activePeriod={product.activePeriod}
1329
- price={product.price}
1330
- billerImage={product.billerImage}
1331
- billerName={product.billerName}
1332
- productCategory={product.productCategory}
1333
- />
1334
- ))
1335
- }
1336
- </tbody>
1337
- </table>
1306
+ <tbody>
1307
+ {products.map((product, index) => (
1308
+ <BillerProductList
1309
+ key={index}
1310
+ onClick={handleClick}
1311
+ titleProductName={product.titleProductName}
1312
+ subtitleProductName={product.subtitleProductName}
1313
+ provider={product.provider}
1314
+ denom={product.denom}
1315
+ activePeriod={product.activePeriod}
1316
+ price={product.price}
1317
+ billerImage={product.billerImage}
1318
+ billerName={product.billerName}
1319
+ productCategory={product.productCategory}
1320
+ />
1321
+ ))}
1322
+ </tbody>
1323
+ </table>
1338
1324
 
1339
- <div className='m-9'></div>
1340
- <table className='w-full text-left'>
1325
+ <div className="m-9"></div>
1326
+ <table className="w-full text-left">
1341
1327
  <HeaderTable dataHeader={["Product Name", "Provider", "Denom", "Active Period", "Price", "Status"]} />
1342
1328
  <tbody>
1343
- {
1344
- internalProducts.map((product, index) => (
1329
+ {internalProducts.map((product, index) => (
1345
1330
  <InternalProductList
1346
1331
  key={index}
1347
1332
  onClick={() => handleClickInternalProduct(product.titleProductName)}
@@ -1355,69 +1340,60 @@ const Templates = () => {
1355
1340
  onChangeSwitch={() => handleSwitchChange(index, product.isChecked)}
1356
1341
  productCategory={product.productCategory}
1357
1342
  />
1358
- ))
1359
- }
1343
+ ))}
1360
1344
  </tbody>
1361
1345
  </table>
1362
1346
 
1363
- <div className='m-9'></div>
1364
- <table className='w-full text-left'>
1365
- <HeaderTable dataHeader={["Column One", "Column Two", "Column Three", "Column Four", "Column Five", "Colum Six"]} />
1347
+ <div className="m-9"></div>
1348
+ <table className="w-full text-left">
1349
+ <HeaderTable
1350
+ dataHeader={["Column One", "Column Two", "Column Three", "Column Four", "Column Five", "Colum Six"]}
1351
+ />
1366
1352
  <tbody>
1367
- {
1368
- internalProducts.map((product, index) => (
1369
- <CellModelOne />
1370
- ))
1371
- }
1353
+ {internalProducts.map((product, index) => (
1354
+ <CellModelOne />
1355
+ ))}
1372
1356
  </tbody>
1373
1357
  </table>
1374
1358
 
1375
- <div className='m-9'></div>
1376
- <table className='w-full text-left'>
1359
+ <div className="m-9"></div>
1360
+ <table className="w-full text-left">
1377
1361
  <HeaderTable dataHeader={["Column One", "Column Two", "Column Three", "Column Four", "Column Five"]} />
1378
1362
  <tbody>
1379
- {
1380
- internalProducts.map((product, index) => (
1381
- <CellModelTwo />
1382
- ))
1383
- }
1363
+ {internalProducts.map((product, index) => (
1364
+ <CellModelTwo />
1365
+ ))}
1384
1366
  </tbody>
1385
1367
  </table>
1386
1368
 
1387
-
1388
- <table className='w-full text-left'>
1369
+ <table className="w-full text-left">
1389
1370
  <HeaderTable dataHeader={["Column One", "Column Two", "Column Three", "Column Four", "Column Five"]} />
1390
1371
  <tbody>
1391
1372
  asdasdas
1392
- {
1393
- internalProducts.map((product, index) => (
1394
- <CellModelThree />
1395
- ))
1396
- }
1373
+ {internalProducts.map((product, index) => (
1374
+ <CellModelThree />
1375
+ ))}
1397
1376
  </tbody>
1398
1377
  </table>
1399
1378
 
1400
- <div className='m-9'></div>
1401
- <p className='text-black font-bold text-2xl text-center py-2'>Report</p>
1379
+ <div className="m-9"></div>
1380
+ <p className="text-black font-bold text-2xl text-center py-2">Report</p>
1402
1381
  <ReportList {...reportData} />
1403
1382
 
1404
- <div className='m-9'></div>
1383
+ <div className="m-9"></div>
1405
1384
  <ReportListClient {...transactionData} />
1406
1385
 
1407
- <div className='m-9'></div>
1408
- <div className='m-10'>
1409
- <DetailDivision {...reportData} />
1386
+ <div className="m-9"></div>
1387
+ <div className="m-10">
1388
+ <DetailDivision {...reportData} />
1410
1389
  </div>
1411
1390
 
1412
-
1413
- <div className='m-9'></div>
1414
- <p className='text-black font-bold text-2xl text-center py-2'>Pagination</p>
1391
+ <div className="m-9"></div>
1392
+ <p className="text-black font-bold text-2xl text-center py-2">Pagination</p>
1415
1393
  <ul>
1416
- {
1417
- templates.map(template => (
1394
+ {templates.map((template) => (
1418
1395
  <li key={template.id}>{template.name}</li>
1419
- ))
1420
- }
1396
+ ))}
1421
1397
  </ul>
1422
1398
  <Pagination
1423
1399
  firstData={(currentPage - 1) * 10 + 1}
@@ -1428,14 +1404,9 @@ const Templates = () => {
1428
1404
  onChangePages={(page) => setCurrentPage(page)}
1429
1405
  />
1430
1406
 
1431
- <div className='m-9'></div>
1432
- <p className='text-black font-bold text-2xl text-center py-2'>Text Input</p>
1433
- <TextInput
1434
- title="Default Input"
1435
- placeholder="Type something..."
1436
- value={inputValue}
1437
- onChange={setInputValue}
1438
- />
1407
+ <div className="m-9"></div>
1408
+ <p className="text-black font-bold text-2xl text-center py-2">Text Input</p>
1409
+ <TextInput title="Default Input" placeholder="Type something..." value={inputValue} onChange={setInputValue} />
1439
1410
 
1440
1411
  <TextInput
1441
1412
  title="Input with Icons"
@@ -1454,12 +1425,7 @@ const Templates = () => {
1454
1425
  onChange={setPasswordValue}
1455
1426
  />
1456
1427
 
1457
- <TextInput
1458
- title="Disabled Input"
1459
- mode="disable"
1460
- placeholder="Disabled..."
1461
- value=""
1462
- />
1428
+ <TextInput title="Disabled Input" mode="disable" placeholder="Disabled..." value="" />
1463
1429
 
1464
1430
  <TextInput
1465
1431
  title="Danger Input"
@@ -1470,422 +1436,386 @@ const Templates = () => {
1470
1436
  onChange={setInputValue}
1471
1437
  />
1472
1438
 
1473
-
1474
- <div className='m-9'></div>
1475
- <table className='w-full text-left'>
1476
- <HeaderTable dataHeader={["Billing Data", "Division", "Created", "Due Date", "Payment", "Status"]} />
1477
- <tbody>
1478
- {
1479
- billing.map((billingItem, index) => (
1480
- <BillingList
1481
- key={index}
1482
- onClick={() => {
1483
- setCurrentBillingItem(billingItem);
1484
- openModal('billing');
1485
- }}
1486
- divisionName={billingItem.divisionName}
1487
- subtitleDivisionName={billingItem.clientName}
1488
- billingId={billingItem.billingId}
1489
- date={billingItem.date}
1490
- amount={billingItem.amount}
1491
- paymentMethod={billingItem.paymentMethod}
1492
- paymentMethodSubtitle={billingItem.paymentMethodSubtitle}
1493
- titleStatus={billingItem.titleStatus}
1494
- divisionId={billingItem.divisionId}
1495
- createdDate={billingItem.createdDate}
1496
- dueDate={billingItem.dueDate}
1497
- />
1498
- ))
1499
- }
1500
- </tbody>
1501
- </table>
1502
-
1503
-
1504
-
1505
- <div className='m-9'></div>
1506
- <div className='m-3'>
1507
- <OutlineButton title="Open Billing Modal" onClick={openModal} />
1508
- </div>
1509
- <ModalBilling
1510
- isOpen={isModalOpen && modalType === "billing"}
1511
- onClose={closeModal}
1512
- title="Billing Details"
1513
- subtitle="Review the billing information below"
1514
- clientName={currentBillingItem?.clientName}
1515
- divisionName={currentBillingItem?.divisionName}
1516
- divisisonId={currentBillingItem?.divisionId}
1517
- billingID={currentBillingItem?.billingId}
1518
- titleStatus={currentBillingItem?.titleStatus}
1519
- totalAmount={currentBillingItem?.amount}
1520
- fileName={currentBillingItem?.paymentMethodSubtitle}
1521
- paymentMethod={currentBillingItem?.paymentMethod}
1522
- dateAndTime={currentBillingItem?.dateAndTime}
1523
- declineReason={currentBillingItem?.declineReason}
1524
- titleButtonLeft="Decline"
1525
- titleButtonRight="Approve"
1526
- leftAction={() => {
1527
- closeModal();
1528
- openModal("custom");
1529
- }}
1530
- rightAction={() => {
1531
- setResultModalType("success");
1532
- setIsResultModalOpen(true);
1533
- closeModal();
1534
- }}
1535
- />
1536
-
1537
-
1538
- <div className='m-9'></div>
1539
- {
1540
- modalType === "custom" && (
1541
- <ModalState
1542
- isOpen={isModalOpen}
1543
- onClose={closeModal}
1544
- title="Decline Payment"
1545
- subtitle="What caused you to reject the verification for this Payment?"
1546
- type={modalType}
1547
- addition="textarea"
1548
- valueTextArea={modalContent}
1549
- onChangeTextArea={(e) => setModalContent(e.target.value)}
1550
- titleButtonLeft="Cancel"
1551
- titleButtonRight="Decline"
1552
- leftAction={() => {
1553
- closeModal();
1439
+ <div className="m-9"></div>
1440
+ <table className="w-full text-left">
1441
+ <HeaderTable dataHeader={["Billing Data", "Division", "Created", "Due Date", "Payment", "Status"]} />
1442
+ <tbody>
1443
+ {billing.map((billingItem, index) => (
1444
+ <BillingList
1445
+ key={index}
1446
+ onClick={() => {
1447
+ setCurrentBillingItem(billingItem);
1554
1448
  openModal("billing");
1555
1449
  }}
1556
- rightAction={() => {
1557
- if (typeof modalContent === 'string' && modalContent.trim()) {
1558
- console.log(modalContent);
1559
- setResultModalType("success");
1560
- setIsResultModalOpen(true);
1561
- closeModal();
1562
- }
1563
- }}
1564
- />
1565
- )
1566
- }
1567
-
1568
-
1569
- <div className='m-9'></div>
1570
- <table className='w-full text-left'>
1571
- <HeaderTable dataHeader={["Request Data", "Division", "Date", "State"]} />
1572
- <tbody>
1573
- {
1574
- limit.map((limitItem, index) => (
1575
- <LimitList
1576
- key={index}
1577
- onClick={() => {
1578
- setCurrentLimitItem(limitItem);
1579
- openModal('limit');
1580
- }}
1581
- divisionName={limitItem.divisionName}
1582
- subtitleDivisionName={limitItem.clientName}
1583
- date={limitItem.date}
1584
- amount={limitItem.amount}
1585
- paymentMethod={limitItem.paymentMethod}
1586
- paymentMethodSubtitle={limitItem.paymentMethodSubtitle}
1587
- titleStatus={limitItem.titleStatus}
1588
- divisionId={limitItem.divisionId}
1589
- createdDate={limitItem.createdDate}
1590
- dueDate={limitItem.dueDate}
1591
- limitId={limitItem.billingId}
1592
- requestId={limitItem.billingId}
1593
- dateAndTime={limitItem.dateAndTime}
1594
- />
1595
- ))
1596
- }
1597
- </tbody>
1598
- </table>
1599
-
1600
-
1601
- <div className='m-9'></div>
1602
- <div className='m-3'>
1603
- <OutlineButton title="Open Limit Modal" onClick={openModal} />
1604
- </div>
1605
- <ModalLimit
1606
- isOpen={isModalOpen && modalType === "limit"}
1607
- onClose={closeModalAndReset}
1608
- title="Limit Details"
1609
- subtitle="Review the billing information below"
1610
- clientName={currentLimitItem?.clientName}
1611
- divisionName={currentLimitItem?.divisionName}
1612
- divisisonId={currentLimitItem?.divisionId}
1613
- billingID={currentLimitItem?.billingId}
1614
- titleStatus={currentLimitItem?.titleStatus}
1615
- totalAmount={currentLimitItem?.amount}
1616
- fileName={currentLimitItem?.paymentMethodSubtitle}
1617
- paymentMethod={currentLimitItem?.paymentMethod}
1618
- dateAndTime={currentLimitItem?.dateAndTime}
1619
- declineReason={currentLimitItem?.declineReason}
1620
- addition="input"
1621
- valueTextInput={price}
1622
- onChangeTextInput={(newValue) => setPrice(newValue)}
1623
- titleButtonLeft="Decline"
1624
- titleButtonRight="Approve"
1625
- leftAction={() => {
1626
- closeModal();
1627
- openModal("custom");
1628
- }}
1629
- rightAction={() => {
1630
- setResultModalType("success");
1631
- setIsResultModalOpen(true);
1632
- setPrice("");
1633
- closeModal();
1634
- }}
1635
- steps={currentLimitItem?.stepperData}
1636
- />
1450
+ divisionName={billingItem.divisionName}
1451
+ subtitleDivisionName={billingItem.clientName}
1452
+ billingId={billingItem.billingId}
1453
+ date={billingItem.date}
1454
+ amount={billingItem.amount}
1455
+ paymentMethod={billingItem.paymentMethod}
1456
+ paymentMethodSubtitle={billingItem.paymentMethodSubtitle}
1457
+ titleStatus={billingItem.titleStatus}
1458
+ divisionId={billingItem.divisionId}
1459
+ createdDate={billingItem.createdDate}
1460
+ dueDate={billingItem.dueDate}
1461
+ />
1462
+ ))}
1463
+ </tbody>
1464
+ </table>
1465
+
1466
+ <div className="m-9"></div>
1467
+ <div className="m-3">
1468
+ <OutlineButton title="Open Billing Modal" onClick={openModal} />
1469
+ </div>
1470
+ <ModalBilling
1471
+ isOpen={isModalOpen && modalType === "billing"}
1472
+ onClose={closeModal}
1473
+ title="Billing Details"
1474
+ subtitle="Review the billing information below"
1475
+ clientName={currentBillingItem?.clientName}
1476
+ divisionName={currentBillingItem?.divisionName}
1477
+ divisisonId={currentBillingItem?.divisionId}
1478
+ billingID={currentBillingItem?.billingId}
1479
+ titleStatus={currentBillingItem?.titleStatus}
1480
+ totalAmount={currentBillingItem?.amount}
1481
+ fileName={currentBillingItem?.paymentMethodSubtitle}
1482
+ paymentMethod={currentBillingItem?.paymentMethod}
1483
+ dateAndTime={currentBillingItem?.dateAndTime}
1484
+ declineReason={currentBillingItem?.declineReason}
1485
+ titleButtonLeft="Decline"
1486
+ titleButtonRight="Approve"
1487
+ leftAction={() => {
1488
+ closeModal();
1489
+ openModal("custom");
1490
+ }}
1491
+ rightAction={() => {
1492
+ setResultModalType("success");
1493
+ setIsResultModalOpen(true);
1494
+ closeModal();
1495
+ }}
1496
+ />
1637
1497
 
1638
- <div className='m-9'></div>
1639
- {
1640
- modalType === "custom" && (
1641
- <ModalState
1642
- isOpen={isModalOpen}
1643
- onClose={closeModal}
1644
- title="Decline Payment"
1645
- subtitle="What caused you to reject the verification for this Payment?"
1646
- type={modalType}
1647
- addition="textarea"
1648
- valueTextArea={modalContent}
1649
- onChangeTextArea={(e) => setModalContent(e.target.value)}
1650
- titleButtonLeft="Cancel"
1651
- titleButtonRight="Decline"
1652
- leftAction={() => {
1653
- closeModal();
1498
+ <div className="m-9"></div>
1499
+ {modalType === "custom" && (
1500
+ <ModalState
1501
+ isOpen={isModalOpen}
1502
+ onClose={closeModal}
1503
+ title="Decline Payment"
1504
+ subtitle="What caused you to reject the verification for this Payment?"
1505
+ type={modalType}
1506
+ addition="textarea"
1507
+ valueTextArea={modalContent}
1508
+ onChangeTextArea={(e) => setModalContent(e.target.value)}
1509
+ titleButtonLeft="Cancel"
1510
+ titleButtonRight="Decline"
1511
+ leftAction={() => {
1512
+ closeModal();
1513
+ openModal("billing");
1514
+ }}
1515
+ rightAction={() => {
1516
+ if (typeof modalContent === "string" && modalContent.trim()) {
1517
+ console.log(modalContent);
1518
+ setResultModalType("success");
1519
+ setIsResultModalOpen(true);
1520
+ closeModal();
1521
+ }
1522
+ }}
1523
+ />
1524
+ )}
1525
+
1526
+ <div className="m-9"></div>
1527
+ <table className="w-full text-left">
1528
+ <HeaderTable dataHeader={["Request Data", "Division", "Date", "State"]} />
1529
+ <tbody>
1530
+ {limit.map((limitItem, index) => (
1531
+ <LimitList
1532
+ key={index}
1533
+ onClick={() => {
1534
+ setCurrentLimitItem(limitItem);
1654
1535
  openModal("limit");
1655
1536
  }}
1656
- rightAction={() => {
1657
- if (typeof modalContent === 'string' && modalContent.trim()) {
1658
- console.log(modalContent);
1659
- setResultModalType("success");
1660
- setIsResultModalOpen(true);
1661
- closeModal();
1662
- }
1663
- }}
1664
- />
1665
- )
1666
- }
1537
+ divisionName={limitItem.divisionName}
1538
+ subtitleDivisionName={limitItem.clientName}
1539
+ date={limitItem.date}
1540
+ amount={limitItem.amount}
1541
+ paymentMethod={limitItem.paymentMethod}
1542
+ paymentMethodSubtitle={limitItem.paymentMethodSubtitle}
1543
+ titleStatus={limitItem.titleStatus}
1544
+ divisionId={limitItem.divisionId}
1545
+ createdDate={limitItem.createdDate}
1546
+ dueDate={limitItem.dueDate}
1547
+ limitId={limitItem.billingId}
1548
+ requestId={limitItem.billingId}
1549
+ dateAndTime={limitItem.dateAndTime}
1550
+ />
1551
+ ))}
1552
+ </tbody>
1553
+ </table>
1667
1554
 
1555
+ <div className="m-9"></div>
1556
+ <div className="m-3">
1557
+ <OutlineButton title="Open Limit Modal" onClick={openModal} />
1558
+ </div>
1559
+ <ModalLimit
1560
+ isOpen={isModalOpen && modalType === "limit"}
1561
+ onClose={closeModalAndReset}
1562
+ title="Limit Details"
1563
+ subtitle="Review the billing information below"
1564
+ clientName={currentLimitItem?.clientName}
1565
+ divisionName={currentLimitItem?.divisionName}
1566
+ divisisonId={currentLimitItem?.divisionId}
1567
+ billingID={currentLimitItem?.billingId}
1568
+ titleStatus={currentLimitItem?.titleStatus}
1569
+ totalAmount={currentLimitItem?.amount}
1570
+ fileName={currentLimitItem?.paymentMethodSubtitle}
1571
+ paymentMethod={currentLimitItem?.paymentMethod}
1572
+ dateAndTime={currentLimitItem?.dateAndTime}
1573
+ declineReason={currentLimitItem?.declineReason}
1574
+ addition="input"
1575
+ valueTextInput={price}
1576
+ onChangeTextInput={(newValue) => setPrice(newValue)}
1577
+ titleButtonLeft="Decline"
1578
+ titleButtonRight="Approve"
1579
+ leftAction={() => {
1580
+ closeModal();
1581
+ openModal("custom");
1582
+ }}
1583
+ rightAction={() => {
1584
+ setResultModalType("success");
1585
+ setIsResultModalOpen(true);
1586
+ setPrice("");
1587
+ closeModal();
1588
+ }}
1589
+ steps={currentLimitItem?.stepperData}
1590
+ />
1668
1591
 
1669
-
1670
- <ModalResult
1671
- isOpen={isResultModalOpen}
1672
- type={resultModalType}
1673
- subtitle="Your operation was successful."
1674
- onClose={() => setIsResultModalOpen(false)}
1675
- />
1592
+ <div className="m-9"></div>
1593
+ {modalType === "custom" && (
1594
+ <ModalState
1595
+ isOpen={isModalOpen}
1596
+ onClose={closeModal}
1597
+ title="Decline Payment"
1598
+ subtitle="What caused you to reject the verification for this Payment?"
1599
+ type={modalType}
1600
+ addition="textarea"
1601
+ valueTextArea={modalContent}
1602
+ onChangeTextArea={(e) => setModalContent(e.target.value)}
1603
+ titleButtonLeft="Cancel"
1604
+ titleButtonRight="Decline"
1605
+ leftAction={() => {
1606
+ closeModal();
1607
+ openModal("limit");
1608
+ }}
1609
+ rightAction={() => {
1610
+ if (typeof modalContent === "string" && modalContent.trim()) {
1611
+ console.log(modalContent);
1612
+ setResultModalType("success");
1613
+ setIsResultModalOpen(true);
1614
+ closeModal();
1615
+ }
1616
+ }}
1617
+ />
1618
+ )}
1619
+
1620
+ <ModalResult
1621
+ isOpen={isResultModalOpen}
1622
+ type={resultModalType}
1623
+ subtitle="Your operation was successful."
1624
+ onClose={() => setIsResultModalOpen(false)}
1625
+ />
1676
1626
 
1627
+ <div className="m-9"></div>
1628
+ <div className="m-3"></div>
1629
+ <VerticalStepBar steps={stepsData} />
1677
1630
 
1678
- <div className='m-9'></div>
1679
- <div className='m-3'></div>
1680
- <VerticalStepBar steps={stepsData} />
1681
-
1682
-
1683
-
1684
- <div className='m-9'>
1685
- <table className='w-full text-left'>
1686
- <HeaderTable dataHeader={["Activity Data", "Division", "Date", "Payment", "State"]} />
1687
- <tbody>
1688
- {
1689
- deposits.map((depositItem, index) => (
1690
- <DepositList
1691
- key={index}
1692
- onClick={() => {
1693
- setCurrentDepositItem(depositItem)
1694
- openModal('deposit');
1695
- }}
1696
- divisionName={depositItem.divisionName}
1697
- subtitleDivisionName={depositItem.subtitleDivisionName}
1698
- divisionId={depositItem.divisionId}
1699
- date={depositItem.date}
1700
- amount={depositItem.amount}
1701
- paymentMethod={depositItem.paymentMethod}
1702
- titleStatus={depositItem.titleStatus}
1703
- depositDetails={depositItem.depositDetails}
1704
- transactionId={depositItem.transactionId}
1705
- />
1706
- ))
1707
- }
1708
- </tbody>
1709
- </table>
1710
- </div>
1711
-
1712
-
1713
- <div className='m-9'></div>
1714
- <div className='m-3'>
1715
- <OutlineButton title="Open Billing Modal" onClick={openModal} />
1716
- </div>
1717
- <ModalDeposit
1718
- isOpen={isModalOpen && modalType === "deposit"}
1719
- onClose={closeModal}
1720
- title="Detail Deposit"
1721
- subtitle="Review the billing information below"
1722
- clientName={currentDepositItem?.subtitleDivisionName}
1723
- depositType={currentDepositItem?.depositDetails}
1724
- divisionName={currentDepositItem?.divisionName}
1725
- divisisonId={currentDepositItem?.divisionId}
1726
- billingID={currentDepositItem?.billingId}
1727
- titleStatus={currentDepositItem?.titleStatus}
1728
- totalAmount={currentDepositItem?.amount}
1729
- fileName={currentDepositItem?.paymentMethodSubtitle}
1730
- paymentMethod={currentDepositItem?.paymentMethod}
1731
- dateAndTime={currentDepositItem?.date}
1732
- declineReason={currentDepositItem?.declineReason}
1631
+ <div className="m-9">
1632
+ <table className="w-full text-left">
1633
+ <HeaderTable dataHeader={["Activity Data", "Division", "Date", "Payment", "State"]} />
1634
+ <tbody>
1635
+ {deposits.map((depositItem, index) => (
1636
+ <DepositList
1637
+ key={index}
1638
+ onClick={() => {
1639
+ setCurrentDepositItem(depositItem);
1640
+ openModal("deposit");
1641
+ }}
1642
+ divisionName={depositItem.divisionName}
1643
+ subtitleDivisionName={depositItem.subtitleDivisionName}
1644
+ divisionId={depositItem.divisionId}
1645
+ date={depositItem.date}
1646
+ amount={depositItem.amount}
1647
+ paymentMethod={depositItem.paymentMethod}
1648
+ titleStatus={depositItem.titleStatus}
1649
+ depositDetails={depositItem.depositDetails}
1650
+ transactionId={depositItem.transactionId}
1733
1651
  />
1652
+ ))}
1653
+ </tbody>
1654
+ </table>
1655
+ </div>
1734
1656
 
1735
- <div className='m-9'></div>
1736
- <table className='w-full text-left'>
1737
- <HeaderTable dataHeader={["Cient Data", "PIC", "Data Created", "Last Updated", "State", "Action"]} />
1738
- <tbody>
1739
- {
1740
- client.map((product, index) => (
1741
- <CellModelFour
1742
- key={index}
1743
- Column_One_A={product.Column_One_A}
1744
- Column_One_B={product.Column_One_B}
1745
- Column_One_C={product.Column_One_C}
1746
- Column_One_D={product.Column_One_D}
1747
- Column_Two_A={product.Column_Two_A}
1748
- Column_Two_B={product.Column_Two_B}
1749
- Column_Two_C={product.Column_Two_C}
1750
- Column_Three_A={product.Column_Three_A}
1751
- Column_Three_B={product.Column_Three_B}
1752
- Column_Four_A={product.Column_Four_A}
1753
- Column_Four_B={product.Column_Four_B}
1754
- Column_Five_A={product.Column_Five_A}
1755
- imageUrl={product.imageUrl}
1756
- onClickEdit={() => console.log('Edit', product)}
1757
- onClickDelete={() => console.log('Delete', product)}
1758
- onClickBody={() => console.log('Body', product)}
1759
- />
1760
- ))
1761
- }
1762
- </tbody>
1763
- </table>
1764
-
1765
-
1766
- <div className='m-9'></div>
1767
- <table className='w-full text-left'>
1768
- <HeaderTable dataHeader={["Cient Data", "PIC", "Data Created", "Last Updated", "State", "Action"]} />
1769
- <tbody>
1770
- {
1771
- client.map((product, index) => (
1772
- <CellModelSix
1773
- key={index}
1774
- Column_One_A={product.Column_One_A}
1775
- Column_One_B={product.Column_One_B}
1776
- Column_One_C={product.Column_One_C}
1777
- Column_Two_A={product.Column_Two_A}
1778
- Column_Two_B={product.Column_Two_B}
1779
- Column_Two_C={product.Column_Two_C}
1780
- Column_Three_A={product.Column_Three_A}
1781
- Column_Three_B={product.Column_Three_B}
1782
- Column_Four_A={product.Column_Four_A}
1783
- Column_Four_B={product.Column_Four_B}
1784
- Column_Five_A={product.Column_Five_A}
1785
- imageUrl={product.imageUrl}
1786
- onClickDelete={() => console.log('Delete', product)}
1787
- onClickBody={() => console.log('Body', product)}
1788
- />
1789
- ))
1790
- }
1657
+ <div className="m-9"></div>
1658
+ <div className="m-3">
1659
+ <OutlineButton title="Open Billing Modal" onClick={openModal} />
1660
+ </div>
1661
+ <ModalDeposit
1662
+ isOpen={isModalOpen && modalType === "deposit"}
1663
+ onClose={closeModal}
1664
+ title="Detail Deposit"
1665
+ subtitle="Review the billing information below"
1666
+ clientName={currentDepositItem?.subtitleDivisionName}
1667
+ depositType={currentDepositItem?.depositDetails}
1668
+ divisionName={currentDepositItem?.divisionName}
1669
+ divisisonId={currentDepositItem?.divisionId}
1670
+ billingID={currentDepositItem?.billingId}
1671
+ titleStatus={currentDepositItem?.titleStatus}
1672
+ totalAmount={currentDepositItem?.amount}
1673
+ fileName={currentDepositItem?.paymentMethodSubtitle}
1674
+ paymentMethod={currentDepositItem?.paymentMethod}
1675
+ dateAndTime={currentDepositItem?.date}
1676
+ declineReason={currentDepositItem?.declineReason}
1677
+ />
1678
+
1679
+ <div className="m-9"></div>
1680
+ <table className="w-full text-left">
1681
+ <HeaderTable dataHeader={["Cient Data", "PIC", "Data Created", "Last Updated", "State", "Action"]} />
1682
+ <tbody>
1683
+ {client.map((product, index) => (
1684
+ <CellModelFour
1685
+ key={index}
1686
+ Column_One_A={product.Column_One_A}
1687
+ Column_One_B={product.Column_One_B}
1688
+ Column_One_C={product.Column_One_C}
1689
+ Column_One_D={product.Column_One_D}
1690
+ Column_Two_A={product.Column_Two_A}
1691
+ Column_Two_B={product.Column_Two_B}
1692
+ Column_Two_C={product.Column_Two_C}
1693
+ Column_Three_A={product.Column_Three_A}
1694
+ Column_Three_B={product.Column_Three_B}
1695
+ Column_Four_A={product.Column_Four_A}
1696
+ Column_Four_B={product.Column_Four_B}
1697
+ Column_Five_A={product.Column_Five_A}
1698
+ imageUrl={product.imageUrl}
1699
+ onClickEdit={() => console.log("Edit", product)}
1700
+ onClickDelete={() => console.log("Delete", product)}
1701
+ onClickBody={() => console.log("Body", product)}
1702
+ />
1703
+ ))}
1791
1704
  </tbody>
1792
- </table>
1793
-
1794
- <div className='m-9'></div>
1795
- <table className='w-full text-left'>
1796
- <HeaderTable dataHeader={["Cient Data", "PIC", "Data Created", "State"]} />
1797
- <tbody>
1798
- {
1799
- client.map((product, index) => (
1800
- <CellModelFive
1801
- key={index}
1802
- Column_One_A={product.Column_One_A}
1803
- Column_One_B={product.Column_One_B}
1804
- Column_One_C={product.Column_One_C}
1805
- Column_Two_A={product.Column_Two_A}
1806
- Column_Two_B={product.Column_Two_B}
1807
- Column_Two_C={product.Column_Two_C}
1808
- Column_Three_A={product.Column_Three_A}
1809
- Column_Three_B={product.Column_Three_B}
1810
- Column_Four_A={product.Column_Four_A}
1811
- Column_Four_B={product.Column_Four_B}
1812
- Column_Five_A={product.Column_Five_A}
1813
- imageUrl={product.imageUrl}
1814
- onClickBody={() => console.log('Body', product)}
1815
- />
1816
- ))
1817
- }
1705
+ </table>
1706
+
1707
+ <div className="m-9"></div>
1708
+ <table className="w-full text-left">
1709
+ <HeaderTable dataHeader={["Cient Data", "PIC", "Data Created", "Last Updated", "State", "Action"]} />
1710
+ <tbody>
1711
+ {client.map((product, index) => (
1712
+ <CellModelSix
1713
+ key={index}
1714
+ Column_One_A={product.Column_One_A}
1715
+ Column_One_B={product.Column_One_B}
1716
+ Column_One_C={product.Column_One_C}
1717
+ Column_Two_A={product.Column_Two_A}
1718
+ Column_Two_B={product.Column_Two_B}
1719
+ Column_Two_C={product.Column_Two_C}
1720
+ Column_Three_A={product.Column_Three_A}
1721
+ Column_Three_B={product.Column_Three_B}
1722
+ Column_Four_A={product.Column_Four_A}
1723
+ Column_Four_B={product.Column_Four_B}
1724
+ Column_Five_A={product.Column_Five_A}
1725
+ imageUrl={product.imageUrl}
1726
+ onClickDelete={() => console.log("Delete", product)}
1727
+ onClickBody={() => console.log("Body", product)}
1728
+ />
1729
+ ))}
1818
1730
  </tbody>
1819
- </table>
1820
-
1821
-
1822
- <div className='m-9'></div>
1823
- <table className='w-full text-left'>
1824
- <HeaderTable dataHeader={["Division DATA", "PIC DATA", "TYPE", "DATA CREATED", "LAST UPDATE", "STATUS", "Action"]} />
1825
- <tbody>
1826
- {
1827
- division.map((division, index) => (
1828
- <CellModelThree
1829
- key={index}
1830
- Column_One_A={division.Column_One_A}
1831
- Column_One_B={division.Column_One_B}
1832
- Column_Two_A={division.Column_Two_A}
1833
- Column_Two_B={division.Column_Two_B}
1834
- Column_Two_C={division.Column_Two_C}
1835
- Column_Three_A={division.Column_Three_A}
1836
- Column_Four_A={division.Column_Four_A}
1837
- Column_Four_B={division.Column_Four_B}
1838
- Column_Four_C={division.Column_Four_C}
1839
- Column_Five_A={division.Column_Five_A}
1840
- Column_Five_B={division.Column_Five_B}
1841
- Column_Five_C={division.Column_Five_C}
1842
- Column_Six_A={division.Column_Six_A}
1843
- imageUrl={division.imageUrl}
1844
- onClickEdit={() => console.log('Edit', division)}
1845
- onClickDelete={() => console.log('Delete', division)}
1846
- onClickBody={() => console.log('Body', division)}
1847
- />
1848
- ))
1849
- }
1731
+ </table>
1732
+
1733
+ <div className="m-9"></div>
1734
+ <table className="w-full text-left">
1735
+ <HeaderTable dataHeader={["Cient Data", "PIC", "Data Created", "State"]} />
1736
+ <tbody>
1737
+ {client.map((product, index) => (
1738
+ <CellModelFive
1739
+ key={index}
1740
+ Column_One_A={product.Column_One_A}
1741
+ Column_One_B={product.Column_One_B}
1742
+ Column_One_C={product.Column_One_C}
1743
+ Column_Two_A={product.Column_Two_A}
1744
+ Column_Two_B={product.Column_Two_B}
1745
+ Column_Two_C={product.Column_Two_C}
1746
+ Column_Three_A={product.Column_Three_A}
1747
+ Column_Three_B={product.Column_Three_B}
1748
+ Column_Four_A={product.Column_Four_A}
1749
+ Column_Four_B={product.Column_Four_B}
1750
+ Column_Five_A={product.Column_Five_A}
1751
+ imageUrl={product.imageUrl}
1752
+ onClickBody={() => console.log("Body", product)}
1753
+ />
1754
+ ))}
1850
1755
  </tbody>
1851
- </table>
1852
-
1853
-
1854
- <div className='m-9'></div>
1855
- <table className='w-full text-left'>
1856
- <HeaderTable dataHeader={["Division DATA", "PIC DATA", "BILLER","TYPE", "ACTION"]} />
1857
- <tbody>
1858
- {
1859
- division.map((division, index) => (
1860
- <CellModelSeven
1861
- key={index}
1862
- Column_One_A={division.Column_One_A}
1863
- Column_One_B={division.Column_One_B}
1864
- Column_Two_A={division.Column_Two_A}
1865
- Column_Two_B={division.Column_Two_B}
1866
- Column_Two_C={division.Column_Two_C}
1867
- Column_Three_A={division.Column_Three_A}
1868
- Column_Four_A={division.Column_Four_A}
1869
- Column_Four_B={division.Column_Four_B}
1870
- Column_Four_C={division.Column_Four_C}
1871
- Column_Five_A={division.Column_Five_A}
1872
- Column_Five_B={division.Column_Five_B}
1873
- Column_Five_C={division.Column_Five_C}
1874
- Column_Six_A={division.Column_Six_A}
1875
- imageUrl={division.imageUrl}
1876
- onClickEdit={() => console.log('Edit', division)}
1877
- onClickDelete={() => console.log('Delete', division)}
1878
- onClickBody={() => console.log('Body', division)}
1879
- />
1880
- ))
1881
- }
1756
+ </table>
1757
+
1758
+ <div className="m-9"></div>
1759
+ <table className="w-full text-left">
1760
+ <HeaderTable
1761
+ dataHeader={["Division DATA", "PIC DATA", "TYPE", "DATA CREATED", "LAST UPDATE", "STATUS", "Action"]}
1762
+ />
1763
+ <tbody>
1764
+ {division.map((division, index) => (
1765
+ <CellModelThree
1766
+ key={index}
1767
+ Column_One_A={division.Column_One_A}
1768
+ Column_One_B={division.Column_One_B}
1769
+ Column_Two_A={division.Column_Two_A}
1770
+ Column_Two_B={division.Column_Two_B}
1771
+ Column_Two_C={division.Column_Two_C}
1772
+ Column_Three_A={division.Column_Three_A}
1773
+ Column_Four_A={division.Column_Four_A}
1774
+ Column_Four_B={division.Column_Four_B}
1775
+ Column_Four_C={division.Column_Four_C}
1776
+ Column_Five_A={division.Column_Five_A}
1777
+ Column_Five_B={division.Column_Five_B}
1778
+ Column_Five_C={division.Column_Five_C}
1779
+ Column_Six_A={division.Column_Six_A}
1780
+ imageUrl={division.imageUrl}
1781
+ onClickEdit={() => console.log("Edit", division)}
1782
+ onClickDelete={() => console.log("Delete", division)}
1783
+ onClickBody={() => console.log("Body", division)}
1784
+ />
1785
+ ))}
1882
1786
  </tbody>
1883
- </table>
1787
+ </table>
1884
1788
 
1789
+ <div className="m-9"></div>
1790
+ <table className="w-full text-left">
1791
+ <HeaderTable dataHeader={["Division DATA", "PIC DATA", "BILLER", "TYPE", "ACTION"]} />
1792
+ <tbody>
1793
+ {division.map((division, index) => (
1794
+ <CellModelSeven
1795
+ key={index}
1796
+ Column_One_A={division.Column_One_A}
1797
+ Column_One_B={division.Column_One_B}
1798
+ Column_Two_A={division.Column_Two_A}
1799
+ Column_Two_B={division.Column_Two_B}
1800
+ Column_Two_C={division.Column_Two_C}
1801
+ Column_Three_A={division.Column_Three_A}
1802
+ Column_Four_A={division.Column_Four_A}
1803
+ Column_Four_B={division.Column_Four_B}
1804
+ Column_Four_C={division.Column_Four_C}
1805
+ Column_Five_A={division.Column_Five_A}
1806
+ Column_Five_B={division.Column_Five_B}
1807
+ Column_Five_C={division.Column_Five_C}
1808
+ Column_Six_A={division.Column_Six_A}
1809
+ imageUrl={division.imageUrl}
1810
+ onClickEdit={() => console.log("Edit", division)}
1811
+ onClickDelete={() => console.log("Delete", division)}
1812
+ onClickBody={() => console.log("Body", division)}
1813
+ />
1814
+ ))}
1815
+ </tbody>
1816
+ </table>
1885
1817
  </div>
1818
+ );
1819
+ };
1886
1820
 
1887
-
1888
- )
1889
- }
1890
-
1891
- export default Templates
1821
+ export default Templates;