sprint-asia-custom-component 0.1.36 → 0.1.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.js +146 -3
- package/package.json +1 -1
- package/src/components/filter/filterDropdown/index.js +1 -1
- package/src/components/header/index.js +99 -44
- package/src/components/table/listTable/cellmodeltwo/index.js +151 -0
- package/src/index.css +6 -1
- package/src/index.js +2 -1
- package/src/templates/index.js +19 -1
package/dist/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@charset "UTF-8";@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:normal;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{line-height:0;z-index:1}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 15px}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.3rem;display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.3rem;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.3rem;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:initial;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:initial;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__week-number--keyboard-selected{background-color:#2a87d0;border-radius:.3rem;color:#fff}.react-datepicker__week-number--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day-names{margin-bottom:-8px;white-space:nowrap}.react-datepicker__week{white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{background-color:#ff6803;border-radius:.3rem;color:#fff;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{background-color:#333;border-radius:4px;bottom:100%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__day--holidays:hover,.react-datepicker__month-text--holidays:hover,.react-datepicker__quarter-text--holidays:hover,.react-datepicker__year-text--holidays:hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{opacity:1;visibility:visible}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__year-text--in-range:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--selected:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#bad9f1;border-radius:.3rem;color:#000}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:#216ba580}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:initial}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{background-color:#333;border-radius:4px;bottom:70%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:initial;padding:.5rem;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid #0000;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:initial;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:"×";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{background-color:#ccc;cursor:default}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:#000c;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (max-height:550px),(max-width:400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:1.44rem}.react-datepicker__children-container{height:auto;margin:.4rem;padding-left:.2rem;padding-right:.2rem;width:13.8rem}.react-datepicker__aria-live{border:0;clip-path:circle(0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__calendar-icon{height:1em;vertical-align:-.125em;width:1em}
|
|
1
|
+
@charset "UTF-8";@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");*{font-family:Inter,sans-serif}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:normal;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{line-height:0;z-index:1}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 15px}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.3rem;display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.3rem;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.3rem;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:initial;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:initial;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__week-number--keyboard-selected{background-color:#2a87d0;border-radius:.3rem;color:#fff}.react-datepicker__week-number--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day-names{margin-bottom:-8px;white-space:nowrap}.react-datepicker__week{white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{background-color:#ff6803;border-radius:.3rem;color:#fff;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{background-color:#333;border-radius:4px;bottom:100%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__day--holidays:hover,.react-datepicker__month-text--holidays:hover,.react-datepicker__quarter-text--holidays:hover,.react-datepicker__year-text--holidays:hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{opacity:1;visibility:visible}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__year-text--in-range:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--selected:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#bad9f1;border-radius:.3rem;color:#000}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:#216ba580}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:initial}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{background-color:#333;border-radius:4px;bottom:70%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:initial;padding:.5rem;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid #0000;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:initial;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:"×";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{background-color:#ccc;cursor:default}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:#000c;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (max-height:550px),(max-width:400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:1.44rem}.react-datepicker__children-container{height:auto;margin:.4rem;padding-left:.2rem;padding-right:.2rem;width:13.8rem}.react-datepicker__aria-live{border:0;clip-path:circle(0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__calendar-icon{height:1em;vertical-align:-.125em;width:1em}
|
|
2
2
|
|
|
3
3
|
/*!
|
|
4
4
|
* Quill Editor v1.3.7
|
package/dist/index.js
CHANGED
|
@@ -46597,6 +46597,148 @@
|
|
|
46597
46597
|
}))))));
|
|
46598
46598
|
};
|
|
46599
46599
|
|
|
46600
|
+
const CellModelTwo = ({
|
|
46601
|
+
Column_One_A,
|
|
46602
|
+
Column_One_B,
|
|
46603
|
+
Column_One_C,
|
|
46604
|
+
Column_One_D,
|
|
46605
|
+
Column_Two_A,
|
|
46606
|
+
Column_Three_A,
|
|
46607
|
+
Column_Four_A,
|
|
46608
|
+
Column_Five_A = "Active",
|
|
46609
|
+
onClickBody
|
|
46610
|
+
}) => {
|
|
46611
|
+
let chipType = "success";
|
|
46612
|
+
let chipTitle = Column_Five_A;
|
|
46613
|
+
switch (Column_Five_A.toLowerCase()) {
|
|
46614
|
+
case "active":
|
|
46615
|
+
chipType = "success";
|
|
46616
|
+
chipTitle = "Active";
|
|
46617
|
+
break;
|
|
46618
|
+
case "waiting":
|
|
46619
|
+
chipType = "primary";
|
|
46620
|
+
chipTitle = "Waiting";
|
|
46621
|
+
break;
|
|
46622
|
+
case "inactive":
|
|
46623
|
+
chipType = "neutral";
|
|
46624
|
+
chipTitle = "Inactive";
|
|
46625
|
+
break;
|
|
46626
|
+
}
|
|
46627
|
+
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
46628
|
+
className: `bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`
|
|
46629
|
+
}, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46630
|
+
className: "flex items-center",
|
|
46631
|
+
onClick: () => {
|
|
46632
|
+
if (onClickBody != undefined) {
|
|
46633
|
+
onClickBody();
|
|
46634
|
+
}
|
|
46635
|
+
}
|
|
46636
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46637
|
+
className: "py-3.5 px-4"
|
|
46638
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46639
|
+
className: "font-semibold text-black text-sm"
|
|
46640
|
+
}, Column_One_A ? Column_One_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46641
|
+
className: "font-normal text-neutral300 text-sm"
|
|
46642
|
+
}, Column_One_B ? Column_One_B : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46643
|
+
className: "font-normal text-neutral300 text-sm"
|
|
46644
|
+
}, Column_One_C ? Column_One_C : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46645
|
+
className: "font-normal text-neutral300 text-sm"
|
|
46646
|
+
}, Column_One_D ? Column_One_D : "-")))), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46647
|
+
className: "flex items-center",
|
|
46648
|
+
onClick: () => {
|
|
46649
|
+
if (onClickBody != undefined) {
|
|
46650
|
+
onClickBody();
|
|
46651
|
+
}
|
|
46652
|
+
}
|
|
46653
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46654
|
+
className: "py-3.5 px-4"
|
|
46655
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46656
|
+
className: "font-semibold text-black text-sm"
|
|
46657
|
+
}, Column_Two_A ? Column_Two_A : "-"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46658
|
+
className: "flex items-center pt-1"
|
|
46659
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46660
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46661
|
+
}, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46662
|
+
className: "flex items-center pt-1"
|
|
46663
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46664
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46665
|
+
}, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46666
|
+
className: "flex items-center pt-1"
|
|
46667
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46668
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46669
|
+
}, "\xA0"))))), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46670
|
+
className: "flex items-center",
|
|
46671
|
+
onClick: () => {
|
|
46672
|
+
if (onClickBody != undefined) {
|
|
46673
|
+
onClickBody();
|
|
46674
|
+
}
|
|
46675
|
+
}
|
|
46676
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46677
|
+
className: "py-3.5 px-4"
|
|
46678
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46679
|
+
className: "font-normal text-black text-sm"
|
|
46680
|
+
}, Column_Three_A ? Column_Three_A : "-"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46681
|
+
className: "flex items-center pt-1"
|
|
46682
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46683
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46684
|
+
}, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46685
|
+
className: "flex items-center pt-1"
|
|
46686
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46687
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46688
|
+
}, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46689
|
+
className: "flex items-center pt-1"
|
|
46690
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46691
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46692
|
+
}, "\xA0"))))), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46693
|
+
className: "flex items-center",
|
|
46694
|
+
onClick: () => {
|
|
46695
|
+
if (onClickBody != undefined) {
|
|
46696
|
+
onClickBody();
|
|
46697
|
+
}
|
|
46698
|
+
}
|
|
46699
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46700
|
+
className: "py-3.5 px-4"
|
|
46701
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46702
|
+
className: "font-normal text-black text-sm"
|
|
46703
|
+
}, Column_Four_A ? Column_Four_A : "-"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46704
|
+
className: "flex items-center pt-1"
|
|
46705
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46706
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46707
|
+
}, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46708
|
+
className: "flex items-center pt-1"
|
|
46709
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46710
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46711
|
+
}, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46712
|
+
className: "flex items-center pt-1"
|
|
46713
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46714
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46715
|
+
}, "\xA0"))))), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46716
|
+
className: "flex items-center",
|
|
46717
|
+
onClick: () => {
|
|
46718
|
+
if (onClickBody != undefined) {
|
|
46719
|
+
onClickBody();
|
|
46720
|
+
}
|
|
46721
|
+
}
|
|
46722
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46723
|
+
className: "py-3.5 px-4"
|
|
46724
|
+
}, /*#__PURE__*/React__default["default"].createElement(Chip, {
|
|
46725
|
+
type: chipType,
|
|
46726
|
+
title: chipTitle
|
|
46727
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46728
|
+
className: "flex items-center pt-1"
|
|
46729
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46730
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46731
|
+
}, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46732
|
+
className: "flex items-center pt-1"
|
|
46733
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46734
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46735
|
+
}, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46736
|
+
className: "flex items-center pt-1"
|
|
46737
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46738
|
+
className: "font-normal text-neutral500 text-sm"
|
|
46739
|
+
}, "\xA0"))))));
|
|
46740
|
+
};
|
|
46741
|
+
|
|
46600
46742
|
const SearchDropdown = ({
|
|
46601
46743
|
options = [{
|
|
46602
46744
|
option: "Name 1",
|
|
@@ -46702,8 +46844,8 @@
|
|
|
46702
46844
|
const [showFilterMenu, setShowFilterMenu] = React.useState(false);
|
|
46703
46845
|
const [showFilterSubmenu, setShowFilterSubmenu] = React.useState(false);
|
|
46704
46846
|
const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = React.useState();
|
|
46705
|
-
|
|
46706
|
-
|
|
46847
|
+
React.useState([]);
|
|
46848
|
+
React.useState([]);
|
|
46707
46849
|
const dropdownRef = React.useRef(null);
|
|
46708
46850
|
React.useEffect(() => {
|
|
46709
46851
|
const handleOutsideClick = event => {
|
|
@@ -46760,7 +46902,7 @@
|
|
|
46760
46902
|
className: "flex"
|
|
46761
46903
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
46762
46904
|
type: "button",
|
|
46763
|
-
className: `${
|
|
46905
|
+
className: `${Object.values(dataFilterResult).flat().length ? "border-black text-black" : "border-neutral50 text-neutral300"} flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`
|
|
46764
46906
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
46765
46907
|
className: "flex-grow py-2.5",
|
|
46766
46908
|
onClick: () => setShowFilterMenu(!showFilterMenu)
|
|
@@ -46859,6 +47001,7 @@
|
|
|
46859
47001
|
exports.BillingList = BillingList;
|
|
46860
47002
|
exports.CardInternalProduct = CardInternalProduct;
|
|
46861
47003
|
exports.CellModelOne = CellModelOne;
|
|
47004
|
+
exports.CellModelTwo = CellModelTwo;
|
|
46862
47005
|
exports.Chip = Chip;
|
|
46863
47006
|
exports.ChipBar = ChipBar;
|
|
46864
47007
|
exports.CustomDatePicker = CustomDatePicker;
|
package/package.json
CHANGED
|
@@ -111,7 +111,7 @@ const FilterDropdown = ({
|
|
|
111
111
|
<div className='flex'>
|
|
112
112
|
<button
|
|
113
113
|
type='button'
|
|
114
|
-
className={`${
|
|
114
|
+
className={`${Object.values(dataFilterResult).flat().length ? "border-black text-black" : "border-neutral50 text-neutral300"} flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`}
|
|
115
115
|
>
|
|
116
116
|
<span className='flex-grow py-2.5' onClick={() => setShowFilterMenu(!showFilterMenu)}>{buttonText}</span>
|
|
117
117
|
{
|
|
@@ -1,46 +1,35 @@
|
|
|
1
1
|
import React, {useState, useEffect, useRef} from 'react'
|
|
2
2
|
import Profile from '../../assets/images/profile.png';
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
3
|
+
import { PiDoorOpenDuotone, PiUserCircleDuotone, PiBellDuotone,PiWalletDuotone } from 'react-icons/pi';
|
|
4
|
+
import { useNavigate } from 'react-router-dom';
|
|
5
5
|
|
|
6
6
|
const Header = ({
|
|
7
7
|
title = "Label",
|
|
8
|
-
|
|
8
|
+
fullName = "Undefined Name",
|
|
9
|
+
roleName = "Undefined Role",
|
|
10
|
+
dataProfile = [
|
|
11
|
+
{ title: "Change Password", navigate: "/change-password", logo: PiUserCircleDuotone},
|
|
12
|
+
{ title: "Logout", navigate: "/logout", logo: PiDoorOpenDuotone},
|
|
13
|
+
],
|
|
14
|
+
isNotificationActive = false,
|
|
15
|
+
dataNotification = ["Notification 1", "Notification 2"],
|
|
16
|
+
dataBalance = "0"
|
|
9
17
|
}) => {
|
|
10
18
|
|
|
11
19
|
const [isProfileContentVisible, setProfileContentVisible] = useState(false);
|
|
12
|
-
const [
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
handleNavigateHeader()
|
|
18
|
-
const handleClickOutside = (event) => {
|
|
19
|
-
if (modalRef.current && !modalRef.current.contains(event.target)) {
|
|
20
|
-
setProfileContentVisible(false);
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
24
|
-
return () => {
|
|
25
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
26
|
-
};
|
|
27
|
-
}, [isProfileContentVisible]);
|
|
20
|
+
const [isNotificationContentVisible, setNotificationContentVisible] = useState(false);
|
|
21
|
+
const modalRefProfile = useRef(null);
|
|
22
|
+
const modalRefNotification = useRef(null);
|
|
23
|
+
const navigateTo = useNavigate()
|
|
28
24
|
|
|
29
25
|
function toggleProfileContent() {
|
|
30
26
|
setProfileContentVisible(!isProfileContentVisible)
|
|
27
|
+
setNotificationContentVisible(false)
|
|
31
28
|
}
|
|
32
29
|
|
|
33
|
-
function
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
setUserLink("/business-admin/change-password")
|
|
37
|
-
} else if (userInfo.roleName === "Client Administrator") {
|
|
38
|
-
setUserLink("/client-admin/change-password")
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
setUserLink("/logout")
|
|
43
|
-
}
|
|
30
|
+
function toggleNotificationContent() {
|
|
31
|
+
setNotificationContentVisible(!isNotificationContentVisible)
|
|
32
|
+
setProfileContentVisible(false)
|
|
44
33
|
}
|
|
45
34
|
|
|
46
35
|
return (
|
|
@@ -48,26 +37,92 @@ const Header = ({
|
|
|
48
37
|
<div className='flex w-full justify-between items-center'>
|
|
49
38
|
<p className='text-2xl font-semibold'>{title}</p>
|
|
50
39
|
<div className='flex'>
|
|
51
|
-
<div className=
|
|
52
|
-
|
|
40
|
+
<div className='flex items-center'>
|
|
41
|
+
<div className='w-10 h-10 rounded-full border border-neutral40 mr-2 flex items-center justify-center'>
|
|
42
|
+
<PiWalletDuotone size={24} />
|
|
43
|
+
</div>
|
|
44
|
+
<div>
|
|
45
|
+
<p className='text-neutral300 text-xs'>Balance:</p>
|
|
46
|
+
<p className='font-semibold text-black'>Rp {dataBalance}</p>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div className="w-px bg-neutral40 h-16 mx-3"></div>
|
|
50
|
+
<div className='flex items-center cursor-pointer' onClick={toggleNotificationContent} ref={modalRefNotification}>
|
|
51
|
+
<div className='w-10 h-10 rounded-full border border-neutral40 flex items-center justify-center'>
|
|
52
|
+
<div className='relative'>
|
|
53
|
+
<PiBellDuotone size={24} />
|
|
54
|
+
{
|
|
55
|
+
isNotificationActive &&
|
|
56
|
+
<div className='absolute top-0 right-0 border border-white w-2 h-2 rounded-full bg-danger500'></div>
|
|
57
|
+
}
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
{isNotificationContentVisible && (
|
|
61
|
+
<div
|
|
62
|
+
className='absolute right-20 top-16 z-50'
|
|
63
|
+
>
|
|
64
|
+
{dataNotification.length !== 0 && (
|
|
65
|
+
<div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
|
|
66
|
+
{dataNotification.map((value, index) => (
|
|
67
|
+
<div
|
|
68
|
+
key={index}
|
|
69
|
+
className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
|
|
70
|
+
${dataProfile.length == 1 ?
|
|
71
|
+
"rounded-md"
|
|
72
|
+
:
|
|
73
|
+
index === 0 ?
|
|
74
|
+
"rounded-t-md"
|
|
75
|
+
:
|
|
76
|
+
index === dataProfile.length - 1 ?
|
|
77
|
+
'rounded-b-md'
|
|
78
|
+
: ""
|
|
79
|
+
}
|
|
80
|
+
`}
|
|
81
|
+
onClick={() => navigateTo(value.navigate)}
|
|
82
|
+
>
|
|
83
|
+
<p className='text-sm'>{value}</p>
|
|
84
|
+
</div>
|
|
85
|
+
))}
|
|
86
|
+
</div>
|
|
87
|
+
)}
|
|
88
|
+
</div>
|
|
89
|
+
)}
|
|
90
|
+
</div>
|
|
91
|
+
<div className="w-px bg-neutral40 h-16 mx-3"></div>
|
|
92
|
+
<div className='flex items-center cursor-pointer' onClick={toggleProfileContent} ref={modalRefProfile}>
|
|
53
93
|
<img src={Profile} className='w-10 h-10 mr-2' />
|
|
54
94
|
<div className='flex-1'>
|
|
55
|
-
<p className='text-sm text-black font-semibold whitespace-nowrap'>{
|
|
56
|
-
<p className='text-xs text-neutral300 font-normal whitespace-nowrap'>{
|
|
95
|
+
<p className='text-sm text-black font-semibold whitespace-nowrap'>{fullName}</p>
|
|
96
|
+
<p className='text-xs text-neutral300 font-normal whitespace-nowrap'>{roleName}</p>
|
|
57
97
|
</div>
|
|
58
98
|
{isProfileContentVisible && (
|
|
59
99
|
<div
|
|
60
|
-
className='absolute right-
|
|
100
|
+
className='absolute right-0 top-16 z-50'
|
|
61
101
|
>
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
102
|
+
{dataProfile.length !== 0 && (
|
|
103
|
+
<div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
|
|
104
|
+
{dataProfile.map((value, index) => (
|
|
105
|
+
<div
|
|
106
|
+
key={index}
|
|
107
|
+
className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
|
|
108
|
+
${dataProfile.length == 1 ?
|
|
109
|
+
"rounded-md"
|
|
110
|
+
:
|
|
111
|
+
index === 0 ?
|
|
112
|
+
"rounded-t-md"
|
|
113
|
+
:
|
|
114
|
+
index === dataProfile.length - 1 ?
|
|
115
|
+
'rounded-b-md'
|
|
116
|
+
: ""
|
|
117
|
+
}
|
|
118
|
+
`}
|
|
119
|
+
onClick={() => navigateTo(value.navigate)}
|
|
120
|
+
>
|
|
121
|
+
<value.logo size={16} className='text-neutral300 mr-2' />
|
|
122
|
+
<p className='text-sm'>{value.title}</p>
|
|
123
|
+
</div>
|
|
124
|
+
))}
|
|
125
|
+
</div>
|
|
71
126
|
)}
|
|
72
127
|
</div>
|
|
73
128
|
)}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Chip from '../../../chip'
|
|
3
|
+
|
|
4
|
+
const CellModelTwo = ({
|
|
5
|
+
Column_One_A,
|
|
6
|
+
Column_One_B,
|
|
7
|
+
Column_One_C,
|
|
8
|
+
Column_One_D,
|
|
9
|
+
Column_Two_A,
|
|
10
|
+
Column_Three_A,
|
|
11
|
+
Column_Four_A,
|
|
12
|
+
Column_Five_A = "Active",
|
|
13
|
+
onClickBody,
|
|
14
|
+
}) => {
|
|
15
|
+
let chipType = "success";
|
|
16
|
+
let chipTitle = Column_Five_A;
|
|
17
|
+
|
|
18
|
+
switch (Column_Five_A.toLowerCase()) {
|
|
19
|
+
case "active":
|
|
20
|
+
chipType = "success";
|
|
21
|
+
chipTitle = "Active";
|
|
22
|
+
break;
|
|
23
|
+
case "waiting":
|
|
24
|
+
chipType = "primary";
|
|
25
|
+
chipTitle = "Waiting";
|
|
26
|
+
break;
|
|
27
|
+
case "inactive":
|
|
28
|
+
chipType = "neutral";
|
|
29
|
+
chipTitle = "Inactive";
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
return (
|
|
33
|
+
<tr
|
|
34
|
+
className={`bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`}
|
|
35
|
+
>
|
|
36
|
+
<td>
|
|
37
|
+
<div className='flex items-center'
|
|
38
|
+
onClick={
|
|
39
|
+
() => {
|
|
40
|
+
if (onClickBody != undefined) {
|
|
41
|
+
onClickBody()
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}>
|
|
45
|
+
<div className= "py-3.5 px-4">
|
|
46
|
+
<p className='font-semibold text-black text-sm'>{Column_One_A ? Column_One_A : "-"}</p>
|
|
47
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_B ? Column_One_B : "-"}</p>
|
|
48
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_C ? Column_One_C : "-"}</p>
|
|
49
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_D ? Column_One_D : "-"}</p>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</td>
|
|
53
|
+
<td>
|
|
54
|
+
<div className='flex items-center'
|
|
55
|
+
onClick={
|
|
56
|
+
() => {
|
|
57
|
+
if (onClickBody != undefined) {
|
|
58
|
+
onClickBody()
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}>
|
|
62
|
+
<div className= "py-3.5 px-4">
|
|
63
|
+
<p className='font-semibold text-black text-sm'>{Column_Two_A ? Column_Two_A : "-"}</p>
|
|
64
|
+
<div className='flex items-center pt-1'>
|
|
65
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
66
|
+
</div>
|
|
67
|
+
<div className='flex items-center pt-1'>
|
|
68
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
69
|
+
</div>
|
|
70
|
+
<div className='flex items-center pt-1'>
|
|
71
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</td>
|
|
76
|
+
<td>
|
|
77
|
+
<div className='flex items-center'
|
|
78
|
+
onClick={
|
|
79
|
+
() => {
|
|
80
|
+
if (onClickBody != undefined) {
|
|
81
|
+
onClickBody()
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}>
|
|
85
|
+
<div className= "py-3.5 px-4">
|
|
86
|
+
<p className='font-normal text-black text-sm'>{Column_Three_A ? Column_Three_A : "-"}</p>
|
|
87
|
+
<div className='flex items-center pt-1'>
|
|
88
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
89
|
+
</div>
|
|
90
|
+
<div className='flex items-center pt-1'>
|
|
91
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
92
|
+
</div>
|
|
93
|
+
<div className='flex items-center pt-1'>
|
|
94
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</td>
|
|
99
|
+
<td>
|
|
100
|
+
<div className='flex items-center'
|
|
101
|
+
onClick={
|
|
102
|
+
() => {
|
|
103
|
+
if (onClickBody != undefined) {
|
|
104
|
+
onClickBody()
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}>
|
|
108
|
+
<div className= "py-3.5 px-4">
|
|
109
|
+
<p className='font-normal text-black text-sm'>{Column_Four_A ? Column_Four_A : "-"}</p>
|
|
110
|
+
<div className='flex items-center pt-1'>
|
|
111
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
112
|
+
</div>
|
|
113
|
+
<div className='flex items-center pt-1'>
|
|
114
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
115
|
+
</div>
|
|
116
|
+
<div className='flex items-center pt-1'>
|
|
117
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</td>
|
|
122
|
+
<td>
|
|
123
|
+
<div className='flex items-center'
|
|
124
|
+
onClick={
|
|
125
|
+
() => {
|
|
126
|
+
if (onClickBody != undefined) {
|
|
127
|
+
onClickBody()
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}>
|
|
131
|
+
<div className= "py-3.5 px-4">
|
|
132
|
+
<Chip
|
|
133
|
+
type={chipType}
|
|
134
|
+
title={chipTitle}/>
|
|
135
|
+
<div className='flex items-center pt-1'>
|
|
136
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
137
|
+
</div>
|
|
138
|
+
<div className='flex items-center pt-1'>
|
|
139
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
140
|
+
</div>
|
|
141
|
+
<div className='flex items-center pt-1'>
|
|
142
|
+
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</td>
|
|
147
|
+
</tr>
|
|
148
|
+
)
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
export default CellModelTwo
|
package/src/index.css
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
@import 'tailwindcss/base';
|
|
2
2
|
@import 'tailwindcss/components';
|
|
3
|
-
@import 'tailwindcss/utilities';
|
|
3
|
+
@import 'tailwindcss/utilities';
|
|
4
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
|
5
|
+
|
|
6
|
+
* {
|
|
7
|
+
font-family: "Inter", sans-serif;
|
|
8
|
+
}
|
package/src/index.js
CHANGED
|
@@ -61,11 +61,12 @@ import VerticalStepBar from './components/verticalstepbar';
|
|
|
61
61
|
import DepositList from './components/table/listTable/deposit';
|
|
62
62
|
import ModalDeposit from './components/modal/modalDeposit';
|
|
63
63
|
import CellModelOne from './components/table/listTable/cellmodelone';
|
|
64
|
+
import CellModelTwo from './components/table/listTable/cellmodeltwo';
|
|
64
65
|
import SearchDropdown from './components/searchdropdown';
|
|
65
66
|
import FilterDropdown from './components/filter/filterDropdown';
|
|
66
67
|
import Footer from './components/footer';
|
|
67
68
|
|
|
68
69
|
|
|
69
|
-
export {Footer, CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
70
|
+
export {Footer, CellModelOne, CellModelTwo, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
70
71
|
SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
|
|
71
72
|
DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
|
package/src/templates/index.js
CHANGED
|
@@ -51,6 +51,8 @@ import DepositList from '../components/table/listTable/deposit';
|
|
|
51
51
|
import ModalDeposit from '../components/modal/modalDeposit';
|
|
52
52
|
import CellModelOne from '../components/table/listTable/cellmodelone';
|
|
53
53
|
import FilterDropdown from '../components/filter/filterDropdown';
|
|
54
|
+
import Header from '../components/header';
|
|
55
|
+
import CellModelTwo from '../components/table/listTable/cellmodeltwo';
|
|
54
56
|
|
|
55
57
|
|
|
56
58
|
const Templates = () => {
|
|
@@ -740,8 +742,12 @@ const Templates = () => {
|
|
|
740
742
|
|
|
741
743
|
return (
|
|
742
744
|
<div>
|
|
745
|
+
<div>
|
|
746
|
+
<Header title='Navbar'/>
|
|
747
|
+
</div>
|
|
748
|
+
|
|
743
749
|
<div className='m-9'></div>
|
|
744
|
-
<p className='text-black font-
|
|
750
|
+
<p className='text-black font-bold text-2xl text-center py-2'>Alert</p>
|
|
745
751
|
<div className='w-full py-3'>
|
|
746
752
|
<Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.'/>
|
|
747
753
|
</div>
|
|
@@ -1262,6 +1268,18 @@ const Templates = () => {
|
|
|
1262
1268
|
</tbody>
|
|
1263
1269
|
</table>
|
|
1264
1270
|
|
|
1271
|
+
<div className='m-9'></div>
|
|
1272
|
+
<table className='w-full text-left'>
|
|
1273
|
+
<HeaderTable dataHeader={["Column One", "Column Two", "Column Three", "Column Four", "Column Five"]} />
|
|
1274
|
+
<tbody>
|
|
1275
|
+
{
|
|
1276
|
+
internalProducts.map((product, index) => (
|
|
1277
|
+
<CellModelTwo />
|
|
1278
|
+
))
|
|
1279
|
+
}
|
|
1280
|
+
</tbody>
|
|
1281
|
+
</table>
|
|
1282
|
+
|
|
1265
1283
|
<div className='m-9'></div>
|
|
1266
1284
|
<p className='text-black font-bold text-2xl text-center py-2'>Report</p>
|
|
1267
1285
|
<ReportList {...reportData} />
|