added Offer catelogue
This commit is contained in:
Srinath
parent
b592923f5f
commit
d94188656e
|
|
@ -1,595 +1,88 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { useSelector, useDispatch } from 'react-redux';
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
import { printDiv, getSession } from '../../Services/Others';
|
import { GlobalCataloguedata, Branchname } from '../../Features/ProductCatlog/ProductCatlogue';
|
||||||
import shopico from '../../Images/Assets/shop.png';
|
|
||||||
|
|
||||||
import {
|
|
||||||
GlobalCataloguedata,
|
|
||||||
Branchname,
|
|
||||||
} from '../../Features/ProductCatlog/ProductCatlogue';
|
|
||||||
import Footerimg from '../../Images/cate-f.png';
|
|
||||||
import best from '../../Images/Assets/Cateloge3HeaderImage.svg';
|
import best from '../../Images/Assets/Cateloge3HeaderImage.svg';
|
||||||
import '../../Styles/ProductCatalogue/CatalogueTemplate3.scss';
|
import '../../Styles/ProductCatalogue/CatalogueTemplate3.scss';
|
||||||
// import "../../Fonts/OtherFonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf"
|
|
||||||
import { FaPhoneVolume } from 'react-icons/fa';
|
import { FaPhoneVolume } from 'react-icons/fa';
|
||||||
import { FaLocationDot } from 'react-icons/fa6';
|
import { FaLocationDot } from 'react-icons/fa6';
|
||||||
|
import { getSession } from '../../Services/Others';
|
||||||
|
|
||||||
const CatelogueTemplate5 = () => {
|
const CatelogueTemplate3 = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const BrId = getSession('BranchId');
|
const BrId = getSession('BranchId');
|
||||||
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
||||||
const [Branchdatas, setBranchdatas] = useState();
|
const [Branchdatas, setBranchdatas] = useState();
|
||||||
const [base64Image, setBase64Image] = useState(null);
|
|
||||||
|
|
||||||
const printDocument = () => {
|
|
||||||
window.print();
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const Branchdata = async () => {
|
||||||
|
const response = await dispatch(Branchname({ BrId })).unwrap();
|
||||||
|
if (response?.data?.statusCode === 1) {
|
||||||
|
setBranchdatas(response?.data?.data);
|
||||||
|
}
|
||||||
|
};
|
||||||
Branchdata();
|
Branchdata();
|
||||||
}, []);
|
}, [BrId, dispatch]);
|
||||||
|
|
||||||
const Branchdata = async () => {
|
const safeRound = (amountStr) => {
|
||||||
let data = { BrId: BrId };
|
|
||||||
|
|
||||||
const response = await dispatch(Branchname(data)).unwrap();
|
|
||||||
if (response?.data?.statusCode == 1) {
|
|
||||||
setBranchdatas(response?.data?.data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function safeRound(amountStr) {
|
|
||||||
if (amountStr == null) return '0.00';
|
if (amountStr == null) return '0.00';
|
||||||
|
|
||||||
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
||||||
const num = Number(cleaned);
|
const num = Number(cleaned);
|
||||||
|
return isNaN(num) ? '0.00' : num.toFixed(2);
|
||||||
return isNaN(num) ? '0.00' : num.toFixed(2); // return as string with 2 decimals
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchImage() {
|
|
||||||
try {
|
|
||||||
const base64 = await imageUrlToBase64(Branchdatas?.[0]?.CompLogo);
|
|
||||||
setBase64Image(base64);
|
|
||||||
} catch (error) {
|
|
||||||
console.log('Error converting image', error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (Branchdatas?.[0]?.CompLogo) {
|
|
||||||
fetchImage();
|
|
||||||
}
|
|
||||||
}, [Branchdatas?.[0]?.CompLogo]);
|
|
||||||
|
|
||||||
const imageUrlToBase64 = async (url) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(url);
|
|
||||||
const blob = await response.blob();
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onloadend = () => resolve(reader.result);
|
|
||||||
reader.onerror = reject;
|
|
||||||
reader.readAsDataURL(blob);
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching or converting image:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const style = `<style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv {
|
|
||||||
font-family: 'Inconsolata', monospace;
|
|
||||||
width: inherit;
|
|
||||||
background: radial-gradient(circle at center, #1A0001, #320000);
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerFooterStyle {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
font-size: 14px;
|
|
||||||
};
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv .page-header, .page-header-space {
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv .page-footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 1;
|
|
||||||
border-top: #1292EE solid 1px;
|
|
||||||
width: inherit;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv .page-header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0mm;
|
|
||||||
width: inherit;
|
|
||||||
border-bottom: #1292EE solid 1px;
|
|
||||||
color: #ffffff;
|
|
||||||
background-image: radial-gradient(circle,);
|
|
||||||
}
|
|
||||||
.ItemCard{
|
|
||||||
width: inherit;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv .img {
|
|
||||||
height: 51px;
|
|
||||||
left: 6px;
|
|
||||||
object-fit: cover;
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
width: 76px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv .img1 {
|
|
||||||
height: 40px;
|
|
||||||
left: 30px;
|
|
||||||
object-fit: cover;
|
|
||||||
position: absolute;
|
|
||||||
top: 71px;
|
|
||||||
width: 47px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv .text-wrapper1 {
|
|
||||||
color: black;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
font-size: 7px;
|
|
||||||
font-weight: 800;
|
|
||||||
left: 42px;
|
|
||||||
letter-spacing: 0;
|
|
||||||
line-height: normal;
|
|
||||||
position: absolute;
|
|
||||||
top: 97px;
|
|
||||||
}
|
|
||||||
.CatelogueTemp3-MasterDiv .itemcardGroup {
|
|
||||||
left: 1px;
|
|
||||||
position: relative;
|
|
||||||
top: 210px;
|
|
||||||
width: 570px;
|
|
||||||
height: inherit;
|
|
||||||
border-radius: 17px;
|
|
||||||
background-color: maroon;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemcardGroup {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
column-gap: 0.5rem;
|
|
||||||
row-gap: 0.5rem;
|
|
||||||
padding: 1rem 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv .div1 {
|
|
||||||
background-color: maroon;
|
|
||||||
overflow: scroll;
|
|
||||||
position: relative;
|
|
||||||
width: 595px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CatelogueTemp3-MasterDiv .overlap-group {
|
|
||||||
background-color: #ececec;
|
|
||||||
border-radius: 19.5px;
|
|
||||||
height: 104px;
|
|
||||||
left: 7px;
|
|
||||||
// position:relative
|
|
||||||
width: 95px;
|
|
||||||
}
|
|
||||||
.CatelogueTemp3-MasterDiv .text-wrapper {
|
|
||||||
color: white;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 800;
|
|
||||||
left: 20px;
|
|
||||||
letter-spacing: 0;
|
|
||||||
line-height: normal;
|
|
||||||
top: 80px;
|
|
||||||
border-radius: 60px;
|
|
||||||
height: 51px;
|
|
||||||
width: 51px;
|
|
||||||
background: red;
|
|
||||||
text-align: right;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.textDesign {
|
|
||||||
position: absolute;
|
|
||||||
top: 52px;
|
|
||||||
font-family: "fantasy";
|
|
||||||
font-size: 18px;
|
|
||||||
width: 173px;
|
|
||||||
transform: rotate(-15deg);
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-shadow: 6px 6px 4px rgba(0, 0, 1, 0.5);
|
|
||||||
}
|
|
||||||
.CatelogueTemp3-MasterDiv .text-wrapper-4 {
|
|
||||||
color: #000000;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
font-size: 8.1px;
|
|
||||||
font-weight: 700;
|
|
||||||
left: 12px;
|
|
||||||
letter-spacing: 0;
|
|
||||||
line-height: normal;
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
width: 84px;
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
.text-wrapper-10{
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
.text-wrapper-12{
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tableContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
column-gap: 30px;
|
|
||||||
row-gap: 31px;
|
|
||||||
}
|
|
||||||
.Table {
|
|
||||||
width: 712px;
|
|
||||||
background-color: #8b181a;
|
|
||||||
height: 100vh;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
</style>`;
|
|
||||||
|
|
||||||
const PrintA4 = async () => {
|
|
||||||
await printDiv('CatelogueTemplate5', style);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div id="CatLog3" className="catlog3">
|
||||||
id="CatLog3"
|
<div className="catlog-container">
|
||||||
style={{ display: 'flex', justifyContent: 'center', height: '100vh' }}
|
{/* Branch Header */}
|
||||||
>
|
<div className="branch-header">
|
||||||
{/* <div
|
{Branchdatas?.map((item, index) => (
|
||||||
className="CatelogueTemp3-MasterDiv1"
|
<div className="branch-item" key={index}>
|
||||||
style={{ width: "100%" }}
|
<div className="branch-info">
|
||||||
>
|
<div className="branch-name">{item.BrName}</div>
|
||||||
{Branchdatas?.map((item) => (
|
{item.BrMobile && (
|
||||||
<div
|
<div className="branch-mobile">
|
||||||
className="page-header1"
|
<FaPhoneVolume /> {item.BrMobile}
|
||||||
style={{
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
backgroundColor: "maroon",
|
|
||||||
height: "150px",
|
|
||||||
border: "none",
|
|
||||||
position: "fixed",
|
|
||||||
top: "0",
|
|
||||||
width: "inherit",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="CatelogueTemp3Branchdetails1">
|
|
||||||
<div className="group-61">
|
|
||||||
<div
|
|
||||||
style={{ fontSize: "20px", textAlign: "left",fontWeight: '700' }}
|
|
||||||
>
|
|
||||||
{item.BrName}
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: "13.2px", fontWeight: '700' }}>
|
|
||||||
<div style={{textAlign:'left'}}>{item.BrMobile}</div>
|
|
||||||
<div style={{ textAlign: "left" }}>
|
|
||||||
{item.Address1 != null && item.Address1 + ','}{item.City != null && item.City + ','}{item.Dist != null && item.Dist + ','}{item.State != null && item.State}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
{(item.Address1 || item.City || item.Dist || item.State) && (
|
||||||
|
<div className="branch-address">
|
||||||
|
<FaLocationDot />
|
||||||
|
{item.Address1 && item.Address1 + ', '}
|
||||||
|
{item.City && item.City + ', '}
|
||||||
|
{item.Dist && item.Dist + ', '}
|
||||||
|
{item.State && item.State}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img className="branch-logo" src={best} alt="logo" />
|
||||||
|
|
||||||
|
<div className="fresh-deals">
|
||||||
|
FRESH <br /> DEALS
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
className="imgCentre1"
|
|
||||||
src={best}
|
|
||||||
style={{ width: "170px" }}
|
|
||||||
/>
|
|
||||||
<div style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '52px',
|
|
||||||
fontFamily: "fantasy",
|
|
||||||
fontSize: '18px',
|
|
||||||
width: '173px',
|
|
||||||
transform: 'rotate(-15deg)',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
textShadow: '6px 6px 4px rgba(0, 0, 1, 0.5)'
|
|
||||||
}}>BEST DEALS</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<table
|
|
||||||
className="CatelogueTemp3-MasterDiv1"
|
|
||||||
style={{ width: '100%', height: "100vh", backgroundColor: "maroon" }}
|
|
||||||
>
|
|
||||||
<thead style={{ width: '100%', height: "150px" }}>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div className="page-header-space1"> </div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody style={{ width: '100%', display: "flex" }}>
|
|
||||||
<tr>
|
|
||||||
<td style={{ width: "100%", padding: "0rem 1rem" }}>
|
|
||||||
<div
|
|
||||||
className="page1"
|
|
||||||
style={{ lineHeight: "1", width: "inherit", display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '1rem 0rem' }}
|
|
||||||
>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<table className="CatelogueTemp3Table1">
|
|
||||||
<tbody>
|
|
||||||
<div className="CatelogueTemp3tableBody1">
|
|
||||||
{Globalcataloguedata1?.map((item) => (
|
|
||||||
<div className="overlap-group1">
|
|
||||||
<div className="overlap-21">
|
|
||||||
<img
|
|
||||||
className="img1"
|
|
||||||
src={item?.ProdLogo}
|
|
||||||
alt=''
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="text-wrapper-41">
|
|
||||||
{item?.ProdName} {item?.UomName}
|
|
||||||
</div>
|
|
||||||
<div className="text-wrapper1" >
|
|
||||||
<span style={{ fontSize: '10px' }}>₹</span>
|
|
||||||
<span>{item?.SellPrice}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
<div
|
|
||||||
onClick={PrintA4}
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
backgroundColor: '#310000',
|
|
||||||
fontFamily: 'Montserrat,sans-serif',
|
|
||||||
height: 'auto',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
textAlign: 'center',
|
|
||||||
borderBottom: '#fff',
|
|
||||||
width: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
backgroundColor: '#800000',
|
|
||||||
color: '#fff',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Branchdatas?.map((item) => (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
zIndex: '2',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
padding: '0rem 1rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ textAlign: 'left' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontFamily: 'Montserrat,sans-serif',
|
|
||||||
fontSize: '22px',
|
|
||||||
fontWeight: '600',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item.BrName}
|
|
||||||
</div>
|
|
||||||
{/* <div style={{ fontSize: '16px' }}> <FaPhoneVolume /> {item.BrMobile}</div> */}
|
|
||||||
{item.BrMobile && (
|
|
||||||
<div style={{ fontSize: '16px' }}>
|
|
||||||
<FaPhoneVolume /> {item.BrMobile}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div style={{ fontSize: '12px' }}>
|
|
||||||
{/* <FaLocationDot /> {item.Address1 != null && item.Address1 + ','}{item.City != null && item.City + ','}{item.Dist != null && item.Dist + ','}{item.State != null && item.State} */}
|
|
||||||
{(item.Address1 ||
|
|
||||||
item.City ||
|
|
||||||
item.Dist ||
|
|
||||||
item.State) && (
|
|
||||||
<div>
|
|
||||||
<FaLocationDot />
|
|
||||||
{item.Address1 && item.Address1 + ', '}
|
|
||||||
{item.City && item.City + ', '}
|
|
||||||
{item.Dist && item.Dist + ', '}
|
|
||||||
{item.State && item.State}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<img
|
|
||||||
className=""
|
|
||||||
style={{ width: '170px', position: 'relative' }}
|
|
||||||
src={best}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<a
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
right: '10px',
|
|
||||||
fontFamily: 'Montserrat,sans-serif',
|
|
||||||
fontSize: '26px',
|
|
||||||
width: '173px',
|
|
||||||
fontWeight: '700',
|
|
||||||
transform: 'rotate(-10deg)',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
textShadow: '6px 6px 4px rgba(0, 0, 1, 0.5)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
FRESH <br /> DEALS
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* <div className="page-footer" style={{backgroundColor:'#800000', color:'#fff'}}>
|
{/* Catalogue Grid */}
|
||||||
<div className=' '>
|
<div className="catalogue-grid-wrapper">
|
||||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
{Globalcataloguedata1?.map((item, index) => (
|
||||||
|
<div className="catalogue-item" key={index}>
|
||||||
<p style={{ marginLeft: '2rem', fontSize: '16px', fontWeight: '700' }}>{Branchdatas?.[0]?.BrName}</p>
|
<div className="product-name">
|
||||||
|
{item?.ProdName} {item?.UomName}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{item?.ProdLogo && (
|
||||||
|
<img className="product-logo" src={item?.ProdLogo} alt={item?.ProdName} />
|
||||||
|
)}
|
||||||
|
|
||||||
<div className='CTemplate5Fotterinfo' >
|
<div className="product-price">₹{safeRound(item?.SellPrice)}</div>
|
||||||
|
</div>
|
||||||
<div className='CTemplate5Fotterphone'>
|
))}
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', fontSize: '9px' }}>
|
</div>
|
||||||
<div>FREE HOME</div>
|
|
||||||
<div>DELEVERY</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
<table className="" style={{ width: '100%' }}>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td style={{ width: '100%' }}>
|
|
||||||
<div
|
|
||||||
className=""
|
|
||||||
style={{ height: '20px', backgroundColor: '#310000' }}
|
|
||||||
>
|
|
||||||
{' '}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td style={{ width: '100%' }}>
|
|
||||||
<div style={{ lineHeight: '1.5', padding: '0rem 0.5rem' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns:
|
|
||||||
'repeat(auto-fit, minmax(100px, 1fr))',
|
|
||||||
gridAutoRows: '123px',
|
|
||||||
justifyContent: 'center',
|
|
||||||
gap: '0.3rem',
|
|
||||||
backgroundColor: '#800000',
|
|
||||||
padding: '0.1rem 0.1rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Globalcataloguedata1?.map((item) => (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100px',
|
|
||||||
maxWidth: '100px',
|
|
||||||
height: '110px',
|
|
||||||
padding: '5px',
|
|
||||||
maxHeight: '140px',
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
justifyContent: 'space-evenly',
|
|
||||||
borderRadius: '16px',
|
|
||||||
position: 'relative',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '600',
|
|
||||||
textAlign: 'center',
|
|
||||||
fontFamily: 'Montserrat,sans-serif',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item?.ProdName} {item?.UomName}{' '}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
// className="Cateimg"
|
|
||||||
style={{
|
|
||||||
width: '50px',
|
|
||||||
objectFit: 'cover',
|
|
||||||
height: '40px',
|
|
||||||
}}
|
|
||||||
src={item?.ProdLogo}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '600',
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: '5px',
|
|
||||||
right: '5px',
|
|
||||||
minWidth: '35px',
|
|
||||||
width: 'max-content',
|
|
||||||
height: '35px',
|
|
||||||
backgroundColor: 'red',
|
|
||||||
borderRadius: '20px',
|
|
||||||
color: '#fff',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '0rem 0.3rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
₹{safeRound(item?.SellPrice)}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div style={{ height: '80px' }}></div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CatelogueTemplate5;
|
export default CatelogueTemplate3;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue