HoangLaoTa
/
gk_se_web_agency
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix bug 1807

Browse Source
master
HOANGLAOTA 1 year ago
parent 8fc72f55ad
commit b602b94575
9 changed files with 226 additions and 101 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      src/_components/Auth/InputDate/index.js
  2. 15
      src/_components/Auth/InputDate/index.scss
  3. 4
      src/_components/Auth/InputText/index.scss
  4. 2
      src/_components/Header/HeaderMain/HeaderMain.style.scss
  5. 4
      src/_containers/HomePage/HomePage.style.scss
  6. 6
      src/_containers/ListCustomer/ListCustomer.style.scss
  7. 35
      src/_containers/ListCustomer/index.js
  8. 15
      src/_containers/ListGrantPage/ListGrantPage.style.scss
  9. 113
      src/_containers/ListGrantPage/index.js

27
src/_components/Auth/InputDate/index.js
Unescape View File

@ -24,8 +24,14 @@ const InputDate = (props) => {
return ( return (
<div className={"input_date_base_container " + props?.classNameContainer}> <div className={"input_date_base_container " + props?.classNameContainer}>
{props.errorText ? ( {props.errorText && props?.typeErrText != "underAbsolute" ? (
<div className={props.errorAbsolute ? "error_text_absolute error_input" : "error_text error_input"}> <div
className={
props.errorAbsolute
? "error_text_absolute error_input"
: "error_text error_input"
}
>
<span>{props.errorText}</span> <span>{props.errorText}</span>
</div> </div>
) : null} ) : null}
@ -63,11 +69,28 @@ const InputDate = (props) => {
}, },
}, },
]} ]}
disabledKeyboardNavigation
onKeyDown={(e) => { onKeyDown={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
onBeforeInput={(e) => {
e.preventDefault();
}}
onFocus={e => e.target.blur()}
/> />
</div> </div>
{/* Err Text Under */}
{props.errorText && props?.typeErrText == "underAbsolute" ? (
<div
className={
props.errorAbsolute
? "error_text_absolute_new error_input"
: "error_text error_input"
}
>
<span>{props.errorText}</span>
</div>
) : null}
</div> </div>
); );
}; };

15
src/_components/Auth/InputDate/index.scss
Unescape View File

@ -9,7 +9,11 @@ $border-color: #4a4848;
.error_input { .error_input {
span { span {
color: $red; color: $red;
font-size: 18px; font-size: 16px;
@include screen_mobile {
font-size: 12px
}
} }
} }
@ -22,6 +26,11 @@ $border-color: #4a4848;
bottom: calc(100% + 2px); bottom: calc(100% + 2px);
} }
.error_text_absolute_new {
position: absolute;
top: calc(100% + 2px);
}
.input_date_base { .input_date_base {
display: flex; display: flex;
align-items: center; align-items: center;
@ -101,3 +110,7 @@ $border-color: #4a4848;
} }
} }
} }
.input_date_base_container:has(.error_text_absolute_new) .input_date_base {
margin-bottom: 38px;
}

4
src/_components/Auth/InputText/index.scss
Unescape View File

@ -10,6 +10,10 @@ $border-color: #4a4848;
span { span {
color: $red; color: $red;
font-size: 16px; font-size: 16px;
@include screen_mobile {
font-size: 12px
}
} }
} }

2
src/_components/Header/HeaderMain/HeaderMain.style.scss
Unescape View File

@ -37,7 +37,7 @@
.header-item { .header-item {
font-size: 18px; font-size: 18px;
text-transform: uppercase; text-transform: uppercase;
text-wrap: nowrap; white-space: nowrap;
} }
.header-item.header-item-selected { .header-item.header-item-selected {

4
src/_containers/HomePage/HomePage.style.scss
Unescape View File

@ -63,6 +63,10 @@
.info-agency-item { .info-agency-item {
display: flex; display: flex;
gap: 8px; gap: 8px;
span {
// text-decoration: underline;
}
} }
} }

6
src/_containers/ListCustomer/ListCustomer.style.scss
Unescape View File

@ -154,9 +154,15 @@
span { span {
flex: 1; flex: 1;
text-align: justify; text-align: justify;
white-space: pre-line;
word-break: break-word;
} }
} }
} }
} }
} }
} }
.input_date_base_container:has(.error_text_absolute_new) .input_date_base {
margin-bottom: 56px;
}

35
src/_containers/ListCustomer/index.js
Unescape View File

@ -51,7 +51,7 @@ export default function ListCustomer() {
} }
const validateFilter = () => { const validateFilter = () => {
return !!filter.keyword || !!filter.start_date || !!filter.end_date return !!filter.keyword.trim() || !!filter.start_date || !!filter.end_date
} }
const handleCancelFilter = () => { const handleCancelFilter = () => {
@ -70,13 +70,23 @@ export default function ListCustomer() {
} }
const handleFilter = () => { const handleFilter = () => {
if(!!filter.keyword && filter.keyword.length < 3) { if(!validateFilter()) return;
let isCanFilter = true
if(!!filter.keyword.trim() && filter.keyword.trim().length < 3) {
setErrFilter(prev => ({ setErrFilter(prev => ({
...prev, ...prev,
keyword: 'Nhập tối thiểu 3 kí tự' keyword: 'Nhập tối thiểu 3 kí tự'
})) }))
return; isCanFilter = false;
}
if(!!filter.start_date && !!filter.end_date && new Date(filter.start_date).getTime() > new Date(filter.end_date).getTime()) {
setErrFilter(prev => ({
...prev,
end_date: 'Ngày kết thúc không được nhỏ hơn ngày bắt đầu'
}))
isCanFilter = false;
} }
if(!isCanFilter) return;
setIsFilter(true) setIsFilter(true)
getData(filter) getData(filter)
} }
@ -114,14 +124,17 @@ export default function ListCustomer() {
type="text" type="text"
name="keyword" name="keyword"
placeholder="Nhập tên / số điện thoại / email" placeholder="Nhập tên / số điện thoại / email"
autoFocus={true}
renderLabelIcon={renderIconKeyWord} renderLabelIcon={renderIconKeyWord}
errorText={errFilter.keyword} errorText={errFilter.keyword}
typeErrText='underAbsolute' typeErrText='underAbsolute'
errorAbsolute={true} errorAbsolute={true}
onKeyDown={(e) => {
if(e?.which === 13) handleFilter()
}}
/> />
</div> </div>
<div className="date-filter-form"> <div className="date-filter-form">
<div>
<InputDate <InputDate
classNameContainer='input-container' classNameContainer='input-container'
className='input-base-filter' className='input-base-filter'
@ -132,6 +145,8 @@ export default function ListCustomer() {
placeholder={"Từ ngày"} placeholder={"Từ ngày"}
maxDate={new Date()} maxDate={new Date()}
/> />
</div>
<div>
<InputDate <InputDate
classNameContainer='input-container' classNameContainer='input-container'
className='input-base-filter' className='input-base-filter'
@ -141,9 +156,13 @@ export default function ListCustomer() {
renderLabelIcon={renderIconDate} renderLabelIcon={renderIconDate}
placeholder={"Đến ngày"} placeholder={"Đến ngày"}
maxDate={new Date()} maxDate={new Date()}
errorText={errFilter.end_date}
typeErrText='underAbsolute'
errorAbsolute={true}
/> />
</div> </div>
</div> </div>
</div>
<div className="filter-action"> <div className="filter-action">
<button className="btn-cancel-filter btn-filter" onClick={handleCancelFilter}> <button className="btn-cancel-filter btn-filter" onClick={handleCancelFilter}>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="#4b4a4a" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m3.59-13L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="#4b4a4a" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m3.59-13L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z"/></svg>
@ -157,7 +176,7 @@ export default function ListCustomer() {
</div> </div>
<div className="list-customer-container"> <div className="list-customer-container">
{!!listCustomer.length && <p className="total-customer">{`Tổng số khách hàng: ${listCustomer.length}`}</p>} {!!listCustomer.length && <p className="total-customer">{`Danh sách khách hàng: ${listCustomer.length}`}</p>}
<div className="list-customer"> <div className="list-customer">
{listCustomer?.map(item => ( {listCustomer?.map(item => (
<div className="customer-item" key={item?.id}> <div className="customer-item" key={item?.id}>
@ -167,10 +186,10 @@ export default function ListCustomer() {
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256"><path fill="#00B9B7" d="m224 154.8l-47.09-21.11l-.18-.08a19.94 19.94 0 0 0-19 1.75a13 13 0 0 0-1.12.84l-22.31 19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a12 12 0 0 0 .85-1.15a20 20 0 0 0 1.66-18.83a1.4 1.4 0 0 1-.08-.18L101.2 32a20.06 20.06 0 0 0-20.78-11.85A60.27 60.27 0 0 0 28 80c0 81.61 66.39 148 148 148a60.27 60.27 0 0 0 59.85-52.42A20.06 20.06 0 0 0 224 154.8M176 204A124.15 124.15 0 0 1 52 80a36.29 36.29 0 0 1 28.48-35.54l18.82 42l-19.16 22.82a12 12 0 0 0-.86 1.16A20 20 0 0 0 78 130.08c9.42 19.28 28.83 38.56 48.31 48a20 20 0 0 0 19.69-1.45a12 12 0 0 0 1.11-.85l22.43-19.07l42 18.81A36.29 36.29 0 0 1 176 204"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256"><path fill="#00B9B7" d="m224 154.8l-47.09-21.11l-.18-.08a19.94 19.94 0 0 0-19 1.75a13 13 0 0 0-1.12.84l-22.31 19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a12 12 0 0 0 .85-1.15a20 20 0 0 0 1.66-18.83a1.4 1.4 0 0 1-.08-.18L101.2 32a20.06 20.06 0 0 0-20.78-11.85A60.27 60.27 0 0 0 28 80c0 81.61 66.39 148 148 148a60.27 60.27 0 0 0 59.85-52.42A20.06 20.06 0 0 0 224 154.8M176 204A124.15 124.15 0 0 1 52 80a36.29 36.29 0 0 1 28.48-35.54l18.82 42l-19.16 22.82a12 12 0 0 0-.86 1.16A20 20 0 0 0 78 130.08c9.42 19.28 28.83 38.56 48.31 48a20 20 0 0 0 19.69-1.45a12 12 0 0 0 1.11-.85l22.43-19.07l42 18.81A36.29 36.29 0 0 1 176 204"/></svg>
<span>{item?.phone}</span> <span>{item?.phone}</span>
</div> </div>
<div className="customer-info"> {!!item?.email && <div className="customer-info">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z"/></svg>
<span>{item?.email}</span> <span>{item?.email}</span>
</div> </div>}
</div> </div>
<div className="customer-row"> <div className="customer-row">
<div className="customer-info"> <div className="customer-info">
@ -182,7 +201,7 @@ export default function ListCustomer() {
<span>{`Lớp ${item?.grade}`}</span> <span>{`Lớp ${item?.grade}`}</span>
</div>} </div>}
</div> </div>
{item?.message && <div className="customer-row customer-row-mobile message"> {!!item?.message && <div className="customer-row customer-row-mobile message">
<div className="customer-info"> <div className="customer-info">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h12v2H6zm0-3h12v2H6zm0-3h12v2H6z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h12v2H6zm0-3h12v2H6zm0-3h12v2H6z"/></svg>
<span>{item?.message}</span> <span>{item?.message}</span>

15
src/_containers/ListGrantPage/ListGrantPage.style.scss
Unescape View File

@ -55,10 +55,6 @@
@include screen_mobile { @include screen_mobile {
gap: 16px; gap: 16px;
} }
.input_date_base {
margin-bottom: 0;
}
} }
.input-container { .input-container {
@ -72,7 +68,6 @@
.filter-action { .filter-action {
display: flex; display: flex;
align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 24px; gap: 24px;
@ -109,10 +104,10 @@
.filter-form-row-second { .filter-form-row-second {
display: flex; display: flex;
gap: 24px; gap: 24px;
align-items: center;
@include screen_mobile { @include screen_mobile {
flex-direction: column; flex-direction: column;
gap: 0;
} }
} }
} }
@ -184,11 +179,17 @@
} }
span { span {
flex: 1; // flex: 1;
text-align: justify; text-align: justify;
white-space: pre-line;
word-break: break-word;
} }
} }
} }
} }
} }
} }
.input_date_base_container:has(.error_text_absolute_new) .input_date_base {
margin-bottom: 56px;
}

113
src/_containers/ListGrantPage/index.js
Unescape View File

@ -13,7 +13,9 @@ export default function ListGrantPage() {
const authentication = useSelector((state) => state.authentication); const authentication = useSelector((state) => state.authentication);
const [listLevel] = useState(Array(authentication?.role === 'agents' ? 2 : 9).fill(0).map((_, i) => ({ const [listLevel] = useState(Array(authentication?.role === 'agents' ? 2 : 9).fill(0).map((_, i) => ({
title: `Cấp ${i + 1}`, title: `Cấp ${i + 1}`,
value: (i + 1).toString(), value: authentication?.role === 'agents' && Number(authentication?.grant) >= 0
? (Number(authentication?.grant) + (i + 1)).toString()
: (i + 1).toString(),
}))) })))
const [filter, setFilter] = useState({ const [filter, setFilter] = useState({
keyword: '', keyword: '',
@ -21,6 +23,7 @@ export default function ListGrantPage() {
grant: null, grant: null,
start_date: '', start_date: '',
end_date: '', end_date: '',
agents_code: ''
}) })
const [errFilter, setErrFilter] = useState({ const [errFilter, setErrFilter] = useState({
keyword: '', keyword: '',
@ -28,6 +31,7 @@ export default function ListGrantPage() {
grant: null, grant: null,
start_date: '', start_date: '',
end_date: '', end_date: '',
agents_code: ''
}) })
const [listGrant, setListGrant] = useState([]) const [listGrant, setListGrant] = useState([])
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
@ -40,7 +44,8 @@ export default function ListGrantPage() {
(!!dataFilter?.start_date ? `start_date=${dayjs(dataFilter.start_date).format('YYYY-MM-DD')}&` : '') + (!!dataFilter?.start_date ? `start_date=${dayjs(dataFilter.start_date).format('YYYY-MM-DD')}&` : '') +
(!!dataFilter?.end_date ? `end_date=${dayjs(dataFilter.end_date).format('YYYY-MM-DD')}&` : '') + (!!dataFilter?.end_date ? `end_date=${dayjs(dataFilter.end_date).format('YYYY-MM-DD')}&` : '') +
(!!dataFilter?.grant ? `grant=${dataFilter.grant?.value}&` : '') + (!!dataFilter?.grant ? `grant=${dataFilter.grant?.value}&` : '') +
(!!dataFilter?.up_grant ? `up_grant=${dataFilter.up_grant}` : ''); (!!dataFilter?.up_grant ? `up_grant=${dataFilter.up_grant}` : '') +
(!!dataFilter?.agents_code ? `agents_code=${dataFilter.agents_code}` : '');
try { try {
const res = await apiCaller(endPoint, 'GET', {}, null, false, configConstants.API_URL_SETEST, true, true) const res = await apiCaller(endPoint, 'GET', {}, null, false, configConstants.API_URL_SETEST, true, true)
@ -65,7 +70,7 @@ export default function ListGrantPage() {
} }
const validateFilter = () => { const validateFilter = () => {
return Object.values(filter).some(item => !!item) return Object.values(filter).some(item => typeof item === 'object' ? !!item : !!item?.trim())
} }
const handleCancelFilter = () => { const handleCancelFilter = () => {
@ -75,6 +80,7 @@ export default function ListGrantPage() {
grant: null, grant: null,
start_date: '', start_date: '',
end_date: '', end_date: '',
agents_code: ''
} }
setErrFilter(iniFilter) setErrFilter(iniFilter)
setFilter(iniFilter) setFilter(iniFilter)
@ -86,20 +92,38 @@ export default function ListGrantPage() {
} }
const handleFilter = () => { const handleFilter = () => {
if(!!filter.keyword && filter.keyword.length < 3) { if(!validateFilter()) return;
let isCanFilter = true;
if(!!filter.keyword.trim() && filter.keyword.trim().length < 3) {
setErrFilter(prev => ({ setErrFilter(prev => ({
...prev, ...prev,
keyword: 'Nhập tối thiểu 3 kí tự' keyword: 'Nhập tối thiểu 3 kí tự'
})) }))
return; isCanFilter = false
} }
if(!!filter.up_grant && filter.up_grant.length < 3) { if(!!filter.up_grant.trim() && filter.up_grant.trim().length < 3) {
setErrFilter(prev => ({ setErrFilter(prev => ({
...prev, ...prev,
up_grant: 'Nhập tối thiểu 3 kí tự' up_grant: 'Nhập tối thiểu 3 kí tự'
})) }))
return; isCanFilter = false
}
if(!!filter.agents_code.trim() && filter.agents_code.trim().length < 3) {
setErrFilter(prev => ({
...prev,
agents_code: 'Nhập tối thiểu 3 kí tự'
}))
isCanFilter = false
} }
if(!!filter.start_date && !!filter.end_date && new Date(filter.start_date).getTime() > new Date(filter.end_date).getTime()) {
setErrFilter(prev => ({
...prev,
end_date: 'Ngày kết thúc không được nhỏ hơn ngày bắt đầu'
}))
isCanFilter = false;
}
if(!isCanFilter) return;
setIsFilter(true) setIsFilter(true)
getData(filter) getData(filter)
} }
@ -132,6 +156,12 @@ export default function ListGrantPage() {
) )
} }
const renderIconAgency = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 50 50"><path fill="#404041" d="M46 14H34v-3.976C34 7.173 32.159 4 29.311 4h-9.592C16.868 4 15 7.173 15 10.024V14H4c-1.1 0-2 .9-2 2v29c0 1.1.9 2 2 2h42c1.1 0 2-.9 2-2V16c0-1.1-.9-2-2-2M30 44H19v-1.067c0-.023.613-.053.906-.088s.55-.094.761-.176c.375-.141.795-.343.948-.606S22 41.45 22 41.017v-10.23c0-.41-.248-.771-.436-1.081s-.499-.56-.78-.747c-.211-.141-.359-.275-.787-.404S19 28.343 19 28.308v-1.283l8.175-.457l-.175.263v13.957c0 .41.316.759.492 1.046s.542.501.87.642c.234.105.485.199.767.281s.871.14.871.176zm-9.381-23.761c0-.891.343-1.652 1.028-2.285s1.503-.949 2.452-.949s1.764.316 2.443.949s1.02 1.395 1.02 2.285s-.343 1.649-1.028 2.276s-1.497.94-2.435.94c-.949 0-1.767-.313-2.452-.94s-1.028-1.385-1.028-2.276M31 14H18v-3.976C18 8.957 19.08 7 20.147 7h8.052C29.264 7 31 8.957 31 10.024z"/></svg>
)
}
return ( return (
<div className="bg-main rel"> <div className="bg-main rel">
<HeaderMain /> <HeaderMain />
@ -149,12 +179,14 @@ export default function ListGrantPage() {
setValue={(text) => changeFilter('keyword', text)} setValue={(text) => changeFilter('keyword', text)}
type="text" type="text"
name="keyword" name="keyword"
placeholder="Nhập tên / số điện thoại / email / mã đại lý" placeholder="Nhập tên / số điện thoại / email"
autoFocus={true}
renderLabelIcon={renderIconKeyWord} renderLabelIcon={renderIconKeyWord}
errorText={errFilter.keyword} errorText={errFilter.keyword}
typeErrText='underAbsolute' typeErrText='underAbsolute'
errorAbsolute={true} errorAbsolute={true}
onKeyDown={(e) => {
if(e?.which === 13) handleFilter()
}}
/> />
</div> </div>
<div className="grant-level-filter-form"> <div className="grant-level-filter-form">
@ -171,8 +203,33 @@ export default function ListGrantPage() {
errorText={errFilter.up_grant} errorText={errFilter.up_grant}
typeErrText='underAbsolute' typeErrText='underAbsolute'
errorAbsolute={true} errorAbsolute={true}
onKeyDown={(e) => {
if(e?.which === 13) handleFilter()
}}
/>
</div>
<div>
<InputText
classNameContainer='input-container'
className='input-base-filter'
value={filter.agents_code}
setValue={(text) => changeFilter('agents_code', text)}
type="text"
name="agents_code"
placeholder="Nhập mã đại lý"
renderLabelIcon={renderIconAgency}
errorText={errFilter.agents_code}
typeErrText='underAbsolute'
errorAbsolute={true}
onKeyDown={(e) => {
if(e?.which === 13) handleFilter()
}}
/> />
</div> </div>
</div>
</div>
<div className="filter-form-row-second">
<div className="date-filter-form">
<InputRadio <InputRadio
classNameContainer='input-container' classNameContainer='input-container'
className='input-base-filter' className='input-base-filter'
@ -183,10 +240,7 @@ export default function ListGrantPage() {
renderLabelIcon={renderIconLevel} renderLabelIcon={renderIconLevel}
placeholder={"Chọn cấp đại lý"} placeholder={"Chọn cấp đại lý"}
/> />
</div> <div style={{flex: 1}}>
</div>
<div className="filter-form-row-second">
<div className="date-filter-form">
<InputDate <InputDate
classNameContainer='input-container' classNameContainer='input-container'
className='input-base-filter' className='input-base-filter'
@ -197,6 +251,8 @@ export default function ListGrantPage() {
placeholder={"Từ ngày"} placeholder={"Từ ngày"}
maxDate={new Date()} maxDate={new Date()}
/> />
</div>
<div style={{flex: 1}}>
<InputDate <InputDate
classNameContainer='input-container' classNameContainer='input-container'
className='input-base-filter' className='input-base-filter'
@ -206,8 +262,12 @@ export default function ListGrantPage() {
renderLabelIcon={renderIconDate} renderLabelIcon={renderIconDate}
placeholder={"Đến ngày"} placeholder={"Đến ngày"}
maxDate={new Date()} maxDate={new Date()}
errorText={errFilter.end_date}
typeErrText='underAbsolute'
errorAbsolute={true}
/> />
</div> </div>
</div>
<div className="filter-action"> <div className="filter-action">
<button className="btn-cancel-filter btn-filter" onClick={handleCancelFilter}> <button className="btn-cancel-filter btn-filter" onClick={handleCancelFilter}>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="#4b4a4a" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m3.59-13L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="#4b4a4a" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m3.59-13L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z"/></svg>
@ -223,42 +283,37 @@ export default function ListGrantPage() {
</div> </div>
<div className="list-grant-container"> <div className="list-grant-container">
{!!listGrant.length && <p className="total-grant">{`Tổng số tuyến dưới: ${listGrant.length}`}</p>} {!!listGrant.length && <p className="total-grant">{`Danh sách tuyến dưới: ${listGrant.length}`}</p>}
<div className="list-grant"> <div className="list-grant">
{listGrant?.map(item => ( {listGrant?.map(item => (
<div className="grant-item" key={item?.id}> <div className="grant-item" key={item?.id}>
<p className="grant-name">{item?.name}</p> <p className="grant-name">{item?.name + ` (${item?.agents_code})`}</p>
<div className="grant-row"> <div className="grant-row">
<div className="grant-info"> <div className="grant-info">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M19 14V7.5L14 4L9 7.5V9H7V6.5l7-5l7 5V14zm-4.5-6h1V7h-1zm-2 0h1V7h-1zm2 2h1V9h-1zm-2 0h1V9h-1zM7 18.5l6.95 1.9l5.95-1.85q-.125-.225-.363-.388T19 18h-5.05q-.675 0-1.075-.05t-.825-.2l-2.325-.775l.55-1.95l2.025.675q.425.125 1 .2t1.7.1q0-.275-.162-.525t-.388-.325L8.6 13H7zM1 22V11h7.6q.175 0 .35.038t.325.087L15.15 13.3q.825.3 1.338 1.05T17 16h2q1.25 0 2.125.825T22 19v1l-8 2.5l-7-1.95V22zm2-2h2v-7H3z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1a6.887 6.887 0 0 0 0 9.8c2.73 2.7 7.15 2.7 9.88 0c1.36-1.35 2.04-2.92 2.04-4.9h2c0 1.98-.88 4.55-2.64 6.29c-3.51 3.48-9.21 3.48-12.72 0c-3.5-3.47-3.53-9.11-.02-12.58a8.987 8.987 0 0 1 12.65 0L21 3zM12.5 8v4.25l3.5 2.08l-.72 1.21L11 13V8z"/></svg>
<span>{item?.agents_code}</span> <span>{dayjs(item?.created_date).format('DD/MM/YYYY')}</span>
</div> </div>
<div className="grant-info"> <div className="grant-info">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 48 48"><g fill="none" stroke="#00B9B7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M24 42L4 18.5L9.695 6h28.61L44 18.5z"/><path d="m32 18l-8 9l-8-9"/></g></svg> <span>Cấp đại lý:</span>
<span>{item?.grant}</span> <span style={{fontWeight: 700}}>{item?.grant}</span>
</div> </div>
</div> </div>
<div className="grant-row"> <div className="grant-row">
<div className="grant-info">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 50 50"><path fill="#00B9B7" d="M14.237 39.5H44.72V13.419H14.237zm15.489-23.485l10.99 9.598h-2.769v11.516h-6.436V29h-4.065v8.129H21.35V25.613h-2.84zM10.85 6.984V1.018H4.076V50h6.774V10.033h35.226V6.984z"/></svg>
<span>{item?.up_grant}</span>
</div>
<div className="grant-info"> <div className="grant-info">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256"><path fill="#00B9B7" d="m224 154.8l-47.09-21.11l-.18-.08a19.94 19.94 0 0 0-19 1.75a13 13 0 0 0-1.12.84l-22.31 19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a12 12 0 0 0 .85-1.15a20 20 0 0 0 1.66-18.83a1.4 1.4 0 0 1-.08-.18L101.2 32a20.06 20.06 0 0 0-20.78-11.85A60.27 60.27 0 0 0 28 80c0 81.61 66.39 148 148 148a60.27 60.27 0 0 0 59.85-52.42A20.06 20.06 0 0 0 224 154.8M176 204A124.15 124.15 0 0 1 52 80a36.29 36.29 0 0 1 28.48-35.54l18.82 42l-19.16 22.82a12 12 0 0 0-.86 1.16A20 20 0 0 0 78 130.08c9.42 19.28 28.83 38.56 48.31 48a20 20 0 0 0 19.69-1.45a12 12 0 0 0 1.11-.85l22.43-19.07l42 18.81A36.29 36.29 0 0 1 176 204"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256"><path fill="#00B9B7" d="m224 154.8l-47.09-21.11l-.18-.08a19.94 19.94 0 0 0-19 1.75a13 13 0 0 0-1.12.84l-22.31 19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a12 12 0 0 0 .85-1.15a20 20 0 0 0 1.66-18.83a1.4 1.4 0 0 1-.08-.18L101.2 32a20.06 20.06 0 0 0-20.78-11.85A60.27 60.27 0 0 0 28 80c0 81.61 66.39 148 148 148a60.27 60.27 0 0 0 59.85-52.42A20.06 20.06 0 0 0 224 154.8M176 204A124.15 124.15 0 0 1 52 80a36.29 36.29 0 0 1 28.48-35.54l18.82 42l-19.16 22.82a12 12 0 0 0-.86 1.16A20 20 0 0 0 78 130.08c9.42 19.28 28.83 38.56 48.31 48a20 20 0 0 0 19.69-1.45a12 12 0 0 0 1.11-.85l22.43-19.07l42 18.81A36.29 36.29 0 0 1 176 204"/></svg>
<span>{item?.phone}</span> <span>{item?.phone}</span>
</div> </div>
<div className="grant-info">
{/* <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 50 50"><path fill="#00B9B7" d="M14.237 39.5H44.72V13.419H14.237zm15.489-23.485l10.99 9.598h-2.769v11.516h-6.436V29h-4.065v8.129H21.35V25.613h-2.84zM10.85 6.984V1.018H4.076V50h6.774V10.033h35.226V6.984z"/></svg> */}
<span>Mã tuyến trên:</span>
<span style={{fontWeight: 700}}>{item?.up_grant}</span>
</div>
</div> </div>
<div className="grant-row grant-row-mobile"> <div className="grant-row grant-row-mobile">
<div className="grant-info"> <div className="grant-info">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z"/></svg>
<span>{item?.email}</span> <span>{item?.email}</span>
</div> </div>
<div className="grant-info">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#00B9B7" d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1a6.887 6.887 0 0 0 0 9.8c2.73 2.7 7.15 2.7 9.88 0c1.36-1.35 2.04-2.92 2.04-4.9h2c0 1.98-.88 4.55-2.64 6.29c-3.51 3.48-9.21 3.48-12.72 0c-3.5-3.47-3.53-9.11-.02-12.58a8.987 8.987 0 0 1 12.65 0L21 3zM12.5 8v4.25l3.5 2.08l-.72 1.21L11 13V8z"/></svg>
<span>{dayjs(item?.created_date).format('DD/MM/YYYY')}</span>
</div>
</div> </div>
</div> </div>
))} ))}

Write Preview
Loading…
Cancel
Save