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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      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. 77
      src/_containers/ListCustomer/index.js
  8. 15
      src/_containers/ListGrantPage/ListGrantPage.style.scss
  9. 175
      src/_containers/ListGrantPage/index.js

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

@ -24,9 +24,15 @@ const InputDate = (props) => {
return (
<div className={"input_date_base_container " + props?.classNameContainer}>
{props.errorText ? (
<div className={props.errorAbsolute ? "error_text_absolute error_input" : "error_text error_input"}>
<span>{props.errorText}</span>
{props.errorText && props?.typeErrText != "underAbsolute" ? (
<div
className={
props.errorAbsolute
? "error_text_absolute error_input"
: "error_text error_input"
}
>
<span>{props.errorText}</span>
</div>
) : null}
<div
@ -63,11 +69,28 @@ const InputDate = (props) => {
},
},
]}
disabledKeyboardNavigation
onKeyDown={(e) => {
e.preventDefault();
}}
onBeforeInput={(e) => {
e.preventDefault();
}}
onFocus={e => e.target.blur()}
/>
</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>
);
};

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

@ -9,7 +9,11 @@ $border-color: #4a4848;
.error_input {
span {
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);
}
.error_text_absolute_new {
position: absolute;
top: calc(100% + 2px);
}
.input_date_base {
display: flex;
align-items: center;
@ -100,4 +109,8 @@ $border-color: #4a4848;
color: #8e9298;
}
}
}
.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 {
color: $red;
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 {
font-size: 18px;
text-transform: uppercase;
text-wrap: nowrap;
white-space: nowrap;
}
.header-item.header-item-selected {

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

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

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

@ -154,9 +154,15 @@
span {
flex: 1;
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;
}

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

@ -51,7 +51,7 @@ export default function ListCustomer() {
}
const validateFilter = () => {
return !!filter.keyword || !!filter.start_date || !!filter.end_date
return !!filter.keyword.trim() || !!filter.start_date || !!filter.end_date
}
const handleCancelFilter = () => {
@ -68,15 +68,25 @@ export default function ListCustomer() {
setIsFilter(false)
getData(iniFilter)
}
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 => ({
...prev,
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)
getData(filter)
}
@ -114,34 +124,43 @@ export default function ListCustomer() {
type="text"
name="keyword"
placeholder="Nhập tên / số điện thoại / email"
autoFocus={true}
renderLabelIcon={renderIconKeyWord}
errorText={errFilter.keyword}
typeErrText='underAbsolute'
errorAbsolute={true}
onKeyDown={(e) => {
if(e?.which === 13) handleFilter()
}}
/>
</div>
<div className="date-filter-form">
<InputDate
classNameContainer='input-container'
className='input-base-filter'
value={filter.start_date}
setValue={(date) => changeFilter('start_date', date)}
name="start_date"
renderLabelIcon={renderIconDate}
placeholder={"Từ ngày"}
maxDate={new Date()}
/>
<InputDate
classNameContainer='input-container'
className='input-base-filter'
value={filter.end_date}
setValue={(date) => changeFilter('end_date', date)}
name="end_date"
renderLabelIcon={renderIconDate}
placeholder={"Đến ngày"}
maxDate={new Date()}
/>
<div>
<InputDate
classNameContainer='input-container'
className='input-base-filter'
value={filter.start_date}
setValue={(date) => changeFilter('start_date', date)}
name="start_date"
renderLabelIcon={renderIconDate}
placeholder={"Từ ngày"}
maxDate={new Date()}
/>
</div>
<div>
<InputDate
classNameContainer='input-container'
className='input-base-filter'
value={filter.end_date}
setValue={(date) => changeFilter('end_date', date)}
name="end_date"
renderLabelIcon={renderIconDate}
placeholder={"Đến ngày"}
maxDate={new Date()}
errorText={errFilter.end_date}
typeErrText='underAbsolute'
errorAbsolute={true}
/>
</div>
</div>
</div>
<div className="filter-action">
@ -157,7 +176,7 @@ export default function ListCustomer() {
</div>
<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">
{listCustomer?.map(item => (
<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>
<span>{item?.phone}</span>
</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>
<span>{item?.email}</span>
</div>
</div>}
</div>
<div className="customer-row">
<div className="customer-info">
@ -182,7 +201,7 @@ export default function ListCustomer() {
<span>{`Lớp ${item?.grade}`}</span>
</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">
<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>

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

@ -55,10 +55,6 @@
@include screen_mobile {
gap: 16px;
}
.input_date_base {
margin-bottom: 0;
}
}
.input-container {
@ -72,7 +68,6 @@
.filter-action {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
@ -109,10 +104,10 @@
.filter-form-row-second {
display: flex;
gap: 24px;
align-items: center;
@include screen_mobile {
flex-direction: column;
gap: 0;
}
}
}
@ -184,11 +179,17 @@
}
span {
flex: 1;
// flex: 1;
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;
}

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

@ -13,7 +13,9 @@ export default function ListGrantPage() {
const authentication = useSelector((state) => state.authentication);
const [listLevel] = useState(Array(authentication?.role === 'agents' ? 2 : 9).fill(0).map((_, i) => ({
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({
keyword: '',
@ -21,6 +23,7 @@ export default function ListGrantPage() {
grant: null,
start_date: '',
end_date: '',
agents_code: ''
})
const [errFilter, setErrFilter] = useState({
keyword: '',
@ -28,6 +31,7 @@ export default function ListGrantPage() {
grant: null,
start_date: '',
end_date: '',
agents_code: ''
})
const [listGrant, setListGrant] = useState([])
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?.end_date ? `end_date=${dayjs(dataFilter.end_date).format('YYYY-MM-DD')}&` : '') +
(!!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 {
const res = await apiCaller(endPoint, 'GET', {}, null, false, configConstants.API_URL_SETEST, true, true)
@ -65,7 +70,7 @@ export default function ListGrantPage() {
}
const validateFilter = () => {
return Object.values(filter).some(item => !!item)
return Object.values(filter).some(item => typeof item === 'object' ? !!item : !!item?.trim())
}
const handleCancelFilter = () => {
@ -75,6 +80,7 @@ export default function ListGrantPage() {
grant: null,
start_date: '',
end_date: '',
agents_code: ''
}
setErrFilter(iniFilter)
setFilter(iniFilter)
@ -86,20 +92,38 @@ export default function ListGrantPage() {
}
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 => ({
...prev,
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 => ({
...prev,
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)
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 (
<div className="bg-main rel">
<HeaderMain />
@ -143,18 +173,20 @@ export default function ListGrantPage() {
<div className="filter-form-row">
<div className="keyword-filter-form">
<InputText
classNameContainer='input-container'
className='input-base-filter'
value={filter.keyword}
setValue={(text) => changeFilter('keyword', text)}
type="text"
name="keyword"
placeholder="Nhập tên / số điện thoại / email / mã đại lý"
autoFocus={true}
renderLabelIcon={renderIconKeyWord}
errorText={errFilter.keyword}
typeErrText='underAbsolute'
errorAbsolute={true}
classNameContainer='input-container'
className='input-base-filter'
value={filter.keyword}
setValue={(text) => changeFilter('keyword', text)}
type="text"
name="keyword"
placeholder="Nhập tên / số điện thoại / email"
renderLabelIcon={renderIconKeyWord}
errorText={errFilter.keyword}
typeErrText='underAbsolute'
errorAbsolute={true}
onKeyDown={(e) => {
if(e?.which === 13) handleFilter()
}}
/>
</div>
<div className="grant-level-filter-form">
@ -171,9 +203,34 @@ export default function ListGrantPage() {
errorText={errFilter.up_grant}
typeErrText='underAbsolute'
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>
<InputRadio
</div>
</div>
<div className="filter-form-row-second">
<div className="date-filter-form">
<InputRadio
classNameContainer='input-container'
className='input-base-filter'
options={listLevel}
@ -183,30 +240,33 @@ export default function ListGrantPage() {
renderLabelIcon={renderIconLevel}
placeholder={"Chọn cấp đại lý"}
/>
</div>
</div>
<div className="filter-form-row-second">
<div className="date-filter-form">
<InputDate
classNameContainer='input-container'
className='input-base-filter'
value={filter.start_date}
setValue={(date) => changeFilter('start_date', date)}
name="start_date"
renderLabelIcon={renderIconDate}
placeholder={"Từ ngày"}
maxDate={new Date()}
/>
<InputDate
classNameContainer='input-container'
className='input-base-filter'
value={filter.end_date}
setValue={(date) => changeFilter('end_date', date)}
name="end_date"
renderLabelIcon={renderIconDate}
placeholder={"Đến ngày"}
maxDate={new Date()}
/>
<div style={{flex: 1}}>
<InputDate
classNameContainer='input-container'
className='input-base-filter'
value={filter.start_date}
setValue={(date) => changeFilter('start_date', date)}
name="start_date"
renderLabelIcon={renderIconDate}
placeholder={"Từ ngày"}
maxDate={new Date()}
/>
</div>
<div style={{flex: 1}}>
<InputDate
classNameContainer='input-container'
className='input-base-filter'
value={filter.end_date}
setValue={(date) => changeFilter('end_date', date)}
name="end_date"
renderLabelIcon={renderIconDate}
placeholder={"Đến ngày"}
maxDate={new Date()}
errorText={errFilter.end_date}
typeErrText='underAbsolute'
errorAbsolute={true}
/>
</div>
</div>
<div className="filter-action">
<button className="btn-cancel-filter btn-filter" onClick={handleCancelFilter}>
@ -223,42 +283,37 @@ export default function ListGrantPage() {
</div>
<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">
{listGrant?.map(item => (
<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-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>
<span>{item?.agents_code}</span>
<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 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>{item?.grant}</span>
<span>Cấp đại lý:</span>
<span style={{fontWeight: 700}}>{item?.grant}</span>
</div>
</div>
<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">
<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>
</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 className="grant-row grant-row-mobile">
<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>
<span>{item?.email}</span>
</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>
))}

Write Preview
Loading…
Cancel
Save