Merge pull request 'Catalogue Post Get Delete' (#76) from catalogue into main
Reviewed-on: Pozomind/pozo-retail-app#76
This commit is contained in:
commit
86e5011dbb
|
|
@ -21,6 +21,76 @@ export const getProdcataloguedata = createAsyncThunk(
|
|||
}
|
||||
}
|
||||
);
|
||||
// get /ProductCatalogue
|
||||
export const getProductCatalogueData = createAsyncThunk(
|
||||
'product/ProductCatalogue',
|
||||
async (data) => {
|
||||
if (
|
||||
data?.AppId != null &&
|
||||
data?.AppId != undefined &&
|
||||
data?.CompId != null &&
|
||||
data?.CompId != undefined &&
|
||||
data?.BranchId != null &&
|
||||
data?.BranchId != undefined
|
||||
) {
|
||||
return await axiosRetailInstanceData.get(
|
||||
// `/ProductCatalogue?compId=${data?.CompId}&branchId=${data?.BranchId}&appId=${data?.AppId}&pageNumber=${data?.PageNumber}`
|
||||
`/ProductCatalogue?compId=${data?.CompId}&branchId=${data?.BranchId}&appId=${data?.AppId}`
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
// post /ProductCatalogue
|
||||
export const postProductCatalogue = createAsyncThunk(
|
||||
'product/ProductCatalogue',
|
||||
async (data) => {
|
||||
return await axiosRetailInstanceData.post(`/ProductCatalogue`, data);
|
||||
}
|
||||
);
|
||||
// put /ProductCatalogue
|
||||
export const putProductCatalogue = createAsyncThunk(
|
||||
'put/ProductCatalogue',
|
||||
async (data) => {
|
||||
return await axiosRetailInstanceData.put(`/ProductCatalogue`, data);
|
||||
}
|
||||
);
|
||||
// get /GetProductCatalogueByType
|
||||
export const GetProductCatalogueByTypeData = createAsyncThunk(
|
||||
'product/ProductCatalogue',
|
||||
async (data) => {
|
||||
if (
|
||||
data?.AppId != null &&
|
||||
data?.AppId != undefined &&
|
||||
data?.CompId != null &&
|
||||
data?.CompId != undefined &&
|
||||
data?.BranchId != null &&
|
||||
data?.BranchId != undefined
|
||||
) {
|
||||
return await axiosRetailInstanceData.get(
|
||||
`/GetProductCatalogueByType?compId=${data?.CompId}&branchId=${data?.BranchId}&appId=${data?.AppId}&catalogType=${data?.CatalogType}`
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
// delete /ProductCatalogue
|
||||
export const deleteProductCatalogue = createAsyncThunk(
|
||||
'ProductCatalogue/deleteProductCatalogue',
|
||||
async (data) => {
|
||||
if (
|
||||
data?.AppId != null &&
|
||||
data?.AppId != undefined &&
|
||||
data?.CompId != null &&
|
||||
data?.CompId != undefined &&
|
||||
data?.BranchId != null &&
|
||||
data?.BranchId != undefined
|
||||
) {
|
||||
return await axiosRetailInstanceData.delete(
|
||||
`/ProductCatalogue?compId=${data?.CompId}&branchId=${data?.BranchId}&appId=${data?.AppId}&catalogType=${data?.CatalogType}&activeStatus=${data?.ActiveStatus}&updatedBy=${data?.UpdatedBy}`
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const onlineimages = createAsyncThunk(
|
||||
'image/onlineimages',
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ const CatalogueTemplate1 = () => {
|
|||
const BrId = getSession('BranchId');
|
||||
|
||||
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
||||
console.log(Globalcataloguedata1, 'Globalcataloguedata1eqee');
|
||||
|
||||
const [Branchdatas, setBranchdatas] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -46,121 +48,7 @@ const CatalogueTemplate1 = () => {
|
|||
}
|
||||
return (
|
||||
<>
|
||||
{/* <div className="CT1-MasterDiv">
|
||||
<div className="a">
|
||||
<div className='div'>
|
||||
|
||||
<div className="PrintA4Style" id="PrintStyleA4" style={{width:'100%'}}>
|
||||
<div className="page-header" style={{ textAlign: "center", backgroundColor: '#fff', borderBottom: '#fff',width:'100%' }}>
|
||||
{Branchdatas?.map((item) => (
|
||||
<>
|
||||
<div className="overlap" style={{ zIndex: '2' }}>
|
||||
|
||||
<div className="rectangle" />
|
||||
<div className="rectangle-2" />
|
||||
<img
|
||||
className="pngwing-com"
|
||||
alt=" "
|
||||
src={shopImg}
|
||||
/>
|
||||
|
||||
<div className="overlap-wrapper">
|
||||
<div className="overlap-3">
|
||||
<div className="group-5">
|
||||
<div className="group-6">
|
||||
|
||||
<div className="text-wrapper-10">{item.BrName}</div>
|
||||
|
||||
<div className="text-wrapper-11">{item.BrMobile}</div>
|
||||
<div className="text-wrapper-11New">
|
||||
{item.Address1 != null && item.Address1 + ','}{item.City != null && item.City + ','}{item.Dist != null && item.Dist + ','}{item.State != null && item.State}</div>
|
||||
</div>
|
||||
<img
|
||||
className="pngwing-com-2"
|
||||
alt="Pngwing com"
|
||||
src={shopico}
|
||||
/>
|
||||
</div>
|
||||
<div className="group-7">
|
||||
<div className="overlap-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</>
|
||||
|
||||
))}
|
||||
</div>
|
||||
|
||||
<table className="A4TablePrint" style={{width:'100%'}}>
|
||||
<thead>
|
||||
<tr>
|
||||
<td style={{width:'100%' }}>
|
||||
<div className="page-header-space"> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{width:'100%'}}>
|
||||
|
||||
<div className="page" style={{ lineHeight: "1.2" }}>
|
||||
<div className="CT1itemcardGroup">
|
||||
|
||||
{Globalcataloguedata1?.map((item) => (
|
||||
<>
|
||||
<div>
|
||||
|
||||
<div >
|
||||
|
||||
<img
|
||||
className="Cateimg"
|
||||
src={item?.ProdLogo}
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div >
|
||||
<div >₹ {item?.SellPrice}</div>
|
||||
{console.log("itemitem", item)}
|
||||
</div>
|
||||
<p >{item?.ProdName} {item?.UomName}</p>
|
||||
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<img className="image" alt="Image" src={ph} />
|
||||
<img className="group-14" alt="Group" src="group-703.png" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="page-footer-space"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div> */}
|
||||
|
||||
{' '}
|
||||
<div style={{ fontFamily: 'Montserrat,sans-serif' }}>
|
||||
{/* <button style={{position: 'absolute',zIndex:'2'}} onClick={handlePrint}>Print</button> */}
|
||||
|
||||
|
|
@ -169,14 +57,14 @@ const CatalogueTemplate1 = () => {
|
|||
style={{ width: '100%', display: 'flex', justifyContent: 'center' }}
|
||||
>
|
||||
<div
|
||||
className="page-header"
|
||||
className="page-header-1"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 1rem',
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#ff453a',
|
||||
width: '94%',
|
||||
width: '97%',
|
||||
borderRadius: '30px 30px 0 0',
|
||||
}}
|
||||
>
|
||||
|
|
@ -213,28 +101,7 @@ const CatalogueTemplate1 = () => {
|
|||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* <div className="page-footer">
|
||||
<div className=' '>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
<p style={{ marginLeft: '2rem', fontSize: '16px', fontWeight: '700' }}>{Branchdatas?.[0]?.BrName}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='CTemplate5Fotterinfo' >
|
||||
|
||||
<div className='CTemplate5Fotterphone'>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', fontSize: '9px' }}>
|
||||
<div>FREE HOME</div>
|
||||
<div>DELEVERY</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>{' '}
|
||||
<table className="" style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -271,11 +138,11 @@ const CatalogueTemplate1 = () => {
|
|||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat( 5, 1fr)',
|
||||
gridAutoRows: '140px',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
gap: '0.3rem',
|
||||
padding: '1rem 0',
|
||||
}}
|
||||
>
|
||||
{Globalcataloguedata1?.map((item) => (
|
||||
|
|
@ -285,10 +152,14 @@ const CatalogueTemplate1 = () => {
|
|||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
widht: '100px',
|
||||
height: 'auto',
|
||||
width: '100px',
|
||||
height: '140px',
|
||||
backgroundColor: '#ececec',
|
||||
justifyContent: 'space-around',
|
||||
pageBreakInside: 'avoid',
|
||||
breakInside: 'avoid',
|
||||
margin: '0.2rem',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
|
|||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { getSession } from '../../Services/Others';
|
||||
import Papercut from '../../Images/Assets/Papercut.svg';
|
||||
// import "../../Styles/ProductCatalogue/CatalogueTemplate2.scss";
|
||||
import "../../Styles/ProductCatalogue/CatalogueTemplate2.scss";
|
||||
import {
|
||||
GlobalCataloguedata,
|
||||
Branchname,
|
||||
|
|
@ -47,7 +47,7 @@ const Catalogues = () => {
|
|||
}}
|
||||
>
|
||||
<div
|
||||
className="page-header"
|
||||
className="page-header-1"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -106,7 +106,7 @@ const Catalogues = () => {
|
|||
<thead>
|
||||
<tr>
|
||||
<td style={{ width: '100%' }}>
|
||||
<div style={{ height: '100px', background: '#fff' }}> </div>
|
||||
<div style={{ height: '0px', background: '#fff' }}> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -127,11 +127,11 @@ const Catalogues = () => {
|
|||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat( 5, 1fr)',
|
||||
gridAutoRows: '140px',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
gap: '0.3rem',
|
||||
padding: '1rem 0',
|
||||
}}
|
||||
>
|
||||
{Globalcataloguedata1?.map((item) => (
|
||||
|
|
@ -141,10 +141,14 @@ const Catalogues = () => {
|
|||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
widht: '100px',
|
||||
height: 'auto',
|
||||
width: '100px',
|
||||
height: '140px',
|
||||
backgroundColor: '#eeeeee',
|
||||
justifyContent: 'space-around',
|
||||
pageBreakInside: 'avoid',
|
||||
breakInside: 'avoid',
|
||||
margin: '0.2rem',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,595 +1,88 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { printDiv, getSession } from '../../Services/Others';
|
||||
import shopico from '../../Images/Assets/shop.png';
|
||||
|
||||
import {
|
||||
GlobalCataloguedata,
|
||||
Branchname,
|
||||
} from '../../Features/ProductCatlog/ProductCatlogue';
|
||||
import Footerimg from '../../Images/cate-f.png';
|
||||
import { GlobalCataloguedata, Branchname } from '../../Features/ProductCatlog/ProductCatlogue';
|
||||
import best from '../../Images/Assets/Cateloge3HeaderImage.svg';
|
||||
import '../../Styles/ProductCatalogue/CatalogueTemplate3.scss';
|
||||
// import "../../Fonts/OtherFonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf"
|
||||
import { FaPhoneVolume } from 'react-icons/fa';
|
||||
import { FaLocationDot } from 'react-icons/fa6';
|
||||
import { getSession } from '../../Services/Others';
|
||||
|
||||
const CatelogueTemplate5 = () => {
|
||||
const CatelogueTemplate3 = () => {
|
||||
const dispatch = useDispatch();
|
||||
const BrId = getSession('BranchId');
|
||||
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
||||
const [Branchdatas, setBranchdatas] = useState();
|
||||
const [base64Image, setBase64Image] = useState(null);
|
||||
|
||||
const printDocument = () => {
|
||||
window.print();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const Branchdata = async () => {
|
||||
const response = await dispatch(Branchname({ BrId })).unwrap();
|
||||
if (response?.data?.statusCode === 1) {
|
||||
setBranchdatas(response?.data?.data);
|
||||
}
|
||||
};
|
||||
Branchdata();
|
||||
}, []);
|
||||
}, [BrId, dispatch]);
|
||||
|
||||
const Branchdata = async () => {
|
||||
let data = { BrId: BrId };
|
||||
|
||||
const response = await dispatch(Branchname(data)).unwrap();
|
||||
if (response?.data?.statusCode == 1) {
|
||||
setBranchdatas(response?.data?.data);
|
||||
}
|
||||
};
|
||||
|
||||
function safeRound(amountStr) {
|
||||
const safeRound = (amountStr) => {
|
||||
if (amountStr == null) return '0.00';
|
||||
|
||||
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
||||
const num = Number(cleaned);
|
||||
|
||||
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 isNaN(num) ? '0.00' : num.toFixed(2);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
id="CatLog3"
|
||||
style={{ display: 'flex', justifyContent: 'center', height: '100vh' }}
|
||||
>
|
||||
{/* <div
|
||||
className="CatelogueTemp3-MasterDiv1"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{Branchdatas?.map((item) => (
|
||||
<div
|
||||
className="page-header1"
|
||||
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 id="CatLog3" className="catlog3">
|
||||
<div className="catlog-container">
|
||||
{/* Branch Header */}
|
||||
<div className="branch-header">
|
||||
{Branchdatas?.map((item, index) => (
|
||||
<div className="branch-item" key={index}>
|
||||
<div className="branch-info">
|
||||
<div className="branch-name">{item.BrName}</div>
|
||||
{item.BrMobile && (
|
||||
<div className="branch-mobile">
|
||||
<FaPhoneVolume /> {item.BrMobile}
|
||||
</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>
|
||||
<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 className="page-footer" style={{backgroundColor:'#800000', color:'#fff'}}>
|
||||
<div className=' '>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
<p style={{ marginLeft: '2rem', fontSize: '16px', fontWeight: '700' }}>{Branchdatas?.[0]?.BrName}</p>
|
||||
{/* Catalogue Grid */}
|
||||
<div className="catalogue-grid-wrapper">
|
||||
{Globalcataloguedata1?.map((item, index) => (
|
||||
<div className="catalogue-item" key={index}>
|
||||
<div className="product-name">
|
||||
{item?.ProdName} {item?.UomName}
|
||||
</div>
|
||||
|
||||
{item?.ProdLogo && (
|
||||
<img className="product-logo" src={item?.ProdLogo} alt={item?.ProdName} />
|
||||
)}
|
||||
|
||||
<div className='CTemplate5Fotterinfo' >
|
||||
|
||||
<div className='CTemplate5Fotterphone'>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', fontSize: '9px' }}>
|
||||
<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 className="product-price">₹{safeRound(item?.SellPrice)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CatelogueTemplate5;
|
||||
export default CatelogueTemplate3;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@ import React, { useEffect, useState } from 'react';
|
|||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { getSession } from '../../Services/Others';
|
||||
import Headerimg from '../../Images/cate-h.png';
|
||||
import { FaLocationDot } from 'react-icons/fa6';
|
||||
import { FaWhatsapp } from 'react-icons/fa';
|
||||
import {
|
||||
GlobalCataloguedata,
|
||||
Branchname,
|
||||
|
|
@ -15,7 +13,9 @@ const CatalogueTemplate4 = (props) => {
|
|||
const BrId = getSession('BranchId');
|
||||
const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
|
||||
const [Branchdatas, setBranchdatas] = useState();
|
||||
const [base64Image, setBase64Image] = useState(null);
|
||||
console.log(Branchdatas, 'BranchdatasBranchdatas');
|
||||
|
||||
const ITEMS_PER_PAGE = 25; // 5x5 grid
|
||||
|
||||
useEffect(() => {
|
||||
Branchdata();
|
||||
|
|
@ -31,238 +31,122 @@ const CatalogueTemplate4 = (props) => {
|
|||
|
||||
function safeRound(amountStr) {
|
||||
if (amountStr == null) return '0.00';
|
||||
|
||||
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
||||
const num = Number(cleaned);
|
||||
|
||||
return isNaN(num) ? '0.00' : num.toFixed(2); // return as string with 2 decimals
|
||||
return isNaN(num) ? '0.00' : num.toFixed(2);
|
||||
}
|
||||
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;
|
||||
// Split products into pages of 25 items each
|
||||
const paginateProducts = (products) => {
|
||||
const pages = [];
|
||||
for (let i = 0; i < products.length; i += ITEMS_PER_PAGE) {
|
||||
pages.push(products.slice(i, i + ITEMS_PER_PAGE));
|
||||
}
|
||||
return pages;
|
||||
};
|
||||
const pages = paginateProducts(Globalcataloguedata1 || []);
|
||||
console.log(pages, 'pages574754783');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="CTemplate4MasterDiv" id="CatLog4">
|
||||
{/* Header Section */}
|
||||
<div
|
||||
className="page-header"
|
||||
style={{
|
||||
width: '100%',
|
||||
backgroundColor: '#1b2570',
|
||||
padding: '1rem',
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{Branchdatas?.map((item) => (
|
||||
<div
|
||||
key={item?.BrId}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '1rem',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={Headerimg}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
alt="Header"
|
||||
/>
|
||||
{props?.cat === 'Catalogue 4' && (
|
||||
<div
|
||||
className="CTemplate4HeaderText2"
|
||||
style={{
|
||||
color: '#fce400',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
FLAT <span className="CTemplate4persent">50%</span> OFF
|
||||
</div>
|
||||
)}
|
||||
// Header Component
|
||||
const PageHeader = () => (
|
||||
<div className="page-header">
|
||||
<img src={Headerimg} alt="Header" className="header-image" />
|
||||
{props?.cat === 'Catalogue 4' && (
|
||||
<div className="header-offer-text">
|
||||
{/* FLAT <span className="offer-percentage">SPECIAL SAVINGS</span> OFF */}
|
||||
<span className="offer-percentagea">SPECIAL SAVINGS</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Footer Component
|
||||
const PageFooter = () => (
|
||||
<div className="page-footer">
|
||||
<div className="footer-content">
|
||||
<p className="footer-branch-name">{Branchdatas?.[0]?.BrName}</p>
|
||||
<div className="footer-info-container">
|
||||
{Branchdatas?.[0]?.Address1 && (
|
||||
<div className="footer-address">
|
||||
{Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
|
||||
{Branchdatas?.[0]?.State}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<div
|
||||
className="content-section"
|
||||
style={{ padding: '2rem', minHeight: '75vh' }}
|
||||
>
|
||||
<div
|
||||
className="container-main"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(5, 1fr)',
|
||||
gridAutoRows: '140px',
|
||||
justifyContent: 'center',
|
||||
gap: '1.8rem',
|
||||
}}
|
||||
>
|
||||
{Globalcataloguedata1?.map((item) => (
|
||||
<div
|
||||
key={item?.ProdName}
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '100px',
|
||||
maxWidth: '100px',
|
||||
height: '140px',
|
||||
backgroundColor: '#fff',
|
||||
justifyContent: 'center',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={item?.ProdLogo}
|
||||
style={{ width: '50px', height: '40px', objectFit: 'cover' }}
|
||||
alt={item?.ProdName}
|
||||
/>
|
||||
<a
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{item?.ProdName} {item?.UomName}
|
||||
</a>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'yellow',
|
||||
width: '100%',
|
||||
height: '2rem',
|
||||
position: 'absolute',
|
||||
bottom: '0px',
|
||||
borderRadius: '0 0px 8px 8px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: '12px', fontWeight: '500' }}>
|
||||
{props?.cat === 'Catalogue 4' &&
|
||||
`MRP:₹${safeRound(item?.SellPrice)}`}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'red',
|
||||
padding: '3px',
|
||||
width: '3rem',
|
||||
height: '3rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
top: '-7px',
|
||||
right: '-7px',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontSize: props?.cat === 'Catalogue 6' ? '12px' : '10px',
|
||||
fontWeight: '600',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{props?.cat === 'Catalogue 6'
|
||||
? ` ₹${safeRound(item?.SellPrice)} only`
|
||||
: '15% off on MRP'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Section */}
|
||||
<div
|
||||
className="page-footer"
|
||||
style={{
|
||||
width: '100%',
|
||||
backgroundColor: '#fff',
|
||||
borderTop: '1px solid #1292EE',
|
||||
padding: '1rem',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: '16px', fontWeight: '700', color: '#fff' }}>
|
||||
{Branchdatas?.[0]?.BrName}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-end',
|
||||
width: '96%',
|
||||
}}
|
||||
>
|
||||
{Branchdatas?.[0]?.Address1 && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: '9px',
|
||||
backgroundColor: '#252a69',
|
||||
color: '#fff',
|
||||
padding: '0.5rem',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
|
||||
{Branchdatas?.[0]?.State}
|
||||
</div>
|
||||
)}
|
||||
{Branchdatas?.[0]?.BrMobile && (
|
||||
<div
|
||||
className="CTemplate5Fotterphone"
|
||||
style={{
|
||||
fontSize: '9px',
|
||||
backgroundColor: '#252a69',
|
||||
color: '#fff',
|
||||
padding: '0.5rem',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* {Branchdatas?.[0]?.BrMobile && (
|
||||
<div className="footer-phone">
|
||||
FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Product Card Component
|
||||
const getOfferText = (item, cat) => {
|
||||
if (cat === 'Catalogue 6') {
|
||||
return `₹${safeRound(item.SellPrice)} only`;
|
||||
}
|
||||
const offer = item?.OfferDtl?.[0];
|
||||
if (!offer) return null;
|
||||
|
||||
if (offer.OfferName === 'Product offer') {
|
||||
if (offer.ValueType === 'P') {
|
||||
return `${offer.OfferAmt}% OFF`;
|
||||
}
|
||||
if (offer.ValueType === 'F') {
|
||||
return `₹${offer.OfferAmt} OFF`;
|
||||
}
|
||||
}
|
||||
return offer.OfferName;
|
||||
};
|
||||
|
||||
const ProductCard = ({ item }) => (
|
||||
<div className="product-card">
|
||||
<img
|
||||
src={item?.ProdLogo}
|
||||
alt={item?.ProdName}
|
||||
className="product-image"
|
||||
/>
|
||||
<div className="product-name">
|
||||
{item?.ProdName} {item?.UomName}
|
||||
</div>
|
||||
<div className="product-price">
|
||||
{props?.cat === 'Catalogue 4'
|
||||
? `MRP: ₹${safeRound(item?.SellPrice)}`
|
||||
: item?.OfferDtl?.[0]?.OfferName ? (
|
||||
<div className="product-original-price">{item?.OfferDtl?.[0]?.OfferName}</div>) : 'No Offer'
|
||||
}
|
||||
</div>
|
||||
{(
|
||||
props?.cat === 'Catalogue 6' ||
|
||||
item?.OfferDtl?.length > 0
|
||||
) && (
|
||||
<div className="product-offer">
|
||||
{getOfferText(item, props?.cat)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="catalogue-template-4" id="CatLog4">
|
||||
{pages.map((pageProducts, pageIndex) => (
|
||||
<div key={pageIndex} className="catalogue-page">
|
||||
<PageHeader />
|
||||
<div className="content-section-4">
|
||||
<div className="product-grid">
|
||||
{pageProducts.map((item, index) => (
|
||||
<ProductCard key={index} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PageFooter />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,46 @@
|
|||
.pc-wrapper {
|
||||
padding: 10px;
|
||||
background-color: #f8f9fc;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pc-header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 24px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pc-generate-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
background-color: #901d77;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#901d77, 8%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.pc-wrapper {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.pc-header {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -606,9 +606,9 @@ tfoot.report-footer {
|
|||
height: 100px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
// height: 150px;
|
||||
}
|
||||
// .page-footer {
|
||||
// // height: 150px;
|
||||
// }
|
||||
|
||||
// .page-footer-space{
|
||||
// max-height: 100px;
|
||||
|
|
@ -624,10 +624,11 @@ tfoot.report-footer {
|
|||
background: #fff; /* for demo */
|
||||
}
|
||||
|
||||
.page-header {
|
||||
.page-header-1 {
|
||||
position: fixed;
|
||||
top: 0mm;
|
||||
width: inherit;
|
||||
height: 100px;
|
||||
border-bottom: #1292ee solid 1px;
|
||||
background-color: #1292ee;
|
||||
color: #000000;
|
||||
|
|
|
|||
|
|
@ -1,203 +1,149 @@
|
|||
.CatelogueTemp3-MasterDiv1 {
|
||||
font-family: 'Inconsolata', monospace;
|
||||
width: inherit;
|
||||
background: radial-gradient(circle at center, #1a0001, #320000);
|
||||
/* Main Container */
|
||||
.catlog3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background-color: #310000;
|
||||
}
|
||||
|
||||
page[size='A4'] {
|
||||
background: #f5f6f7;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 0.5cm;
|
||||
border: 1.25cm solid #f5f6f7;
|
||||
}
|
||||
@media print {
|
||||
body,
|
||||
page[size='A4'] {
|
||||
margin: 0;
|
||||
box-shadow: 0;
|
||||
}
|
||||
.catlog-container {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background-color: #310000;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1 .page-header1,
|
||||
.page-header-space1 {
|
||||
height: 100px;
|
||||
/* Branch Header */
|
||||
.branch-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #800000;
|
||||
color: #fff;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1 .page-footer1,
|
||||
.page-footer-space1 {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1.page-footer1 {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
border-top: #1292ee solid 1px;
|
||||
width: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1 .page-header1 {
|
||||
position: fixed;
|
||||
top: 0mm;
|
||||
width: inherit;
|
||||
border-bottom: #1292ee solid 1px;
|
||||
color: #ffffff;
|
||||
background-image: radial-gradient(circle);
|
||||
}
|
||||
.page-header1 {
|
||||
text-align: center;
|
||||
.branch-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: maroon;
|
||||
height: 150px;
|
||||
border: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1 .img1 {
|
||||
height: 51px;
|
||||
left: 10px;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 66px;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1 .img11 {
|
||||
height: 40px;
|
||||
left: 30px;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 71px;
|
||||
width: 47px;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1 .text-wrapper11 {
|
||||
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-MasterDiv1 .itemcardGroup1 {
|
||||
left: 1px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 210px;
|
||||
width: 570px;
|
||||
height: inherit;
|
||||
border-radius: 17px;
|
||||
background-color: maroon;
|
||||
padding: 0.5rem 1rem;
|
||||
page-break-inside: avoid; /* Prevent header from splitting */
|
||||
}
|
||||
|
||||
.itemcardGroup1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 0.5rem;
|
||||
padding: 1rem 0rem;
|
||||
.branch-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv .div11 {
|
||||
background-color: maroon;
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
width: 595px;
|
||||
.branch-name {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1 .overlap-group1 {
|
||||
background-color: #ececec;
|
||||
border-radius: 19.5px;
|
||||
height: 125px;
|
||||
position: relative;
|
||||
left: 7px;
|
||||
width: 105px;
|
||||
.branch-mobile {
|
||||
font-size: 16px;
|
||||
}
|
||||
.CatelogueTemp3-MasterDiv1 .text-wrapper1 {
|
||||
color: white;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
|
||||
.branch-address {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
left: 33px;
|
||||
letter-spacing: 0;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
border-radius: 60px;
|
||||
height: 40px;
|
||||
width: 41px;
|
||||
background: red;
|
||||
text-align: right;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
.textDesign1 {
|
||||
|
||||
.branch-logo {
|
||||
width: 170px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.fresh-deals {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
font-family: 'fantasy';
|
||||
font-size: 18px;
|
||||
width: 173px;
|
||||
transform: rotate(-15deg);
|
||||
right: 50px;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
transform: rotate(-10deg);
|
||||
text-transform: uppercase;
|
||||
text-shadow: 6px 6px 4px rgba(0, 0, 1, 0.5);
|
||||
}
|
||||
|
||||
.CatelogueTemp3-MasterDiv1 .text-wrapper-41 {
|
||||
color: #000000;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
left: 6px;
|
||||
letter-spacing: 0;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
width: 90px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
.text-wrapper-101 {
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.text-wrapper-121 {
|
||||
text-align: left;
|
||||
/* Catalogue Grid */
|
||||
.catalogue-grid-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.CatelogueTemp3tableBody1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 10px;
|
||||
row-gap: 20px;
|
||||
}
|
||||
.CatelogueTemp3Table1 {
|
||||
width: 580px;
|
||||
background-color: #8b181a;
|
||||
height: 100vh;
|
||||
border-radius: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.CatelogueTemp3Branchdetails1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
.catalogue-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0rem 0rem 0.5rem;
|
||||
font-weight: 400;
|
||||
font-size: clamp(0.1rem, 2.5vw, 0.7rem);
|
||||
align-items: self-start;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 5px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
height: 110px;
|
||||
width: 110px;
|
||||
|
||||
/* Prevent splitting across pages */
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Product Name */
|
||||
.product-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Product Logo */
|
||||
.product-logo {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
/* Product Price */
|
||||
.product-price {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
min-width: 35px;
|
||||
width: max-content;
|
||||
height: 35px;
|
||||
background-color: red;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.catlog-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.catalogue-item {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.catalogue-grid-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.branch-item {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,377 +1,227 @@
|
|||
// .CTemplate4MasterDiv {
|
||||
// background-image: linear-gradient(to right, #252a69, #016ab6);
|
||||
// height: 100vh;
|
||||
// overflow: auto;
|
||||
// }
|
||||
|
||||
// .CTemplate4Header {
|
||||
// width: inherit;
|
||||
// padding: 0rem 0rem 0rem 1rem;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
// .CTemplate4SubHeader {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
// gap: '0.5rem'
|
||||
// }
|
||||
|
||||
// .CTemplate4Line {
|
||||
// width: 100%;
|
||||
// background-color: #fce400;
|
||||
// }
|
||||
|
||||
// .CTemplate4HeaderText1 {
|
||||
// color: #fce400;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// gap: 0.2rem;
|
||||
// }
|
||||
|
||||
// .CTemplate4HeaderText1sub {
|
||||
// color: #fce400;
|
||||
// width: 27%;
|
||||
// font-size: 20px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
// .CTemplate4HeaderText2 {
|
||||
// color: #fce400;
|
||||
// margin: 0rem 0.5rem;
|
||||
// font-size: 25px;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
|
||||
// .CTemplate4persent {
|
||||
// padding: 0.5rem;
|
||||
// margin: 0rem 0.5rem;
|
||||
// background-color: #fce400;
|
||||
// border-radius: 10px;
|
||||
// color: #184d90;
|
||||
// }
|
||||
|
||||
// .CTemplate4CardMasterDiv {
|
||||
// width: 8rem;
|
||||
// height: 165px;
|
||||
// margin: 1rem 0rem;
|
||||
// border-radius: 10px;
|
||||
// gap: '0.2rem';
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// .CTemplate4CardContent {
|
||||
// background-color: #fff;
|
||||
// color: #000;
|
||||
// font-size: 14px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// flex-direction: column;
|
||||
// margin-bottom: 0.2rem;
|
||||
// border-radius: 10px;
|
||||
// padding: 5px;
|
||||
// }
|
||||
|
||||
// .CTemplate4Pricing {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// width: 30%;
|
||||
// background-color: #fce400;
|
||||
// border-radius: 0px 18px 0px 10px;
|
||||
// padding: 5px;
|
||||
// font-size: 14px;
|
||||
// font-weight: 700;
|
||||
// text-align: center;
|
||||
// padding-right: 6rem;
|
||||
// }
|
||||
|
||||
// .CTemplate4Offer {
|
||||
// background-color: #bf2523;
|
||||
// position: absolute;
|
||||
// width: 40px;
|
||||
// left: 4.5rem;
|
||||
// height: 40px;
|
||||
// text-align: center;
|
||||
// border-radius: 50%;
|
||||
// padding: 0.6rem;
|
||||
// font-weight: 700;
|
||||
// color: #fce400;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// bottom: -9px;
|
||||
// }
|
||||
|
||||
// .CTemplate4ProductImage {
|
||||
// width: 90px;
|
||||
// height: 90px;
|
||||
// }
|
||||
|
||||
// .CTemplate4CardContainer {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// gap: 1rem;
|
||||
// }
|
||||
|
||||
// .CTemplate4Fotter {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
// gap:0.5rem;
|
||||
// width: 100%;
|
||||
// height: 150px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
// .CTemplate4FotterAddress {
|
||||
// padding: 1rem;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// background-image: linear-gradient(to right, #252a69, #016ab6);
|
||||
// width: 14rem;
|
||||
// height: 2.5rem;
|
||||
// border-radius: 0.2rem;
|
||||
// }
|
||||
|
||||
// .CTemplate4Fotterphone {
|
||||
// background-color: #252a69;
|
||||
// width: 12rem;
|
||||
// height: 2rem;
|
||||
// border-radius: 0.2rem;
|
||||
// color: #fff;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// gap: 1rem;
|
||||
// }
|
||||
|
||||
// .CTemplate4Fotterinfo
|
||||
// {
|
||||
// display: flex;
|
||||
// gap: 1rem;
|
||||
// flex-direction: column;
|
||||
// padding: 0.5rem;
|
||||
// float: right;
|
||||
// }
|
||||
|
||||
// .CTemplate4MasterDiv .PrintA4Style{
|
||||
// font-family: 'Inconsolata', monospace;
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// .CTemplate4MasterDiv .page-footer{
|
||||
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// background: none !important;
|
||||
// }
|
||||
|
||||
.page-footer {
|
||||
// Main container
|
||||
.catalogue-template-4 {
|
||||
background-image: linear-gradient(to right, #252a69, #016ab6);
|
||||
}
|
||||
.CTemplate4Footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: inherit;
|
||||
background: rgb(223, 223, 223); /* for demo */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.CTemplate4MasterDiv {
|
||||
// Page structure
|
||||
// .catalogue-page {
|
||||
// // position: relative;
|
||||
// // min-height: 297mm; // A4 height
|
||||
// // width: 190mm; // A4 width
|
||||
// // page-break-after: always;
|
||||
// // display: flex;
|
||||
// // flex-direction: column;
|
||||
|
||||
// // &:last-child {
|
||||
// // page-break-after: auto;
|
||||
// // }
|
||||
// }
|
||||
|
||||
// Header Section
|
||||
.page-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// width: 85%;
|
||||
height: 150px;
|
||||
background-image: linear-gradient(to right, #252a69, #016ab6);
|
||||
// height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.CTemplate4Header {
|
||||
width: inherit;
|
||||
padding: 0rem 0rem 0rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.CTemplate4SubHeader {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: '0.5rem';
|
||||
}
|
||||
|
||||
.CTemplate4Line {
|
||||
width: 100%;
|
||||
background-color: #fce400;
|
||||
}
|
||||
|
||||
.CTemplate4HeaderText1 {
|
||||
color: #fce400;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.CTemplate4HeaderText1sub {
|
||||
color: #fce400;
|
||||
width: 27%;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.CTemplate4HeaderText2 {
|
||||
color: #fce400;
|
||||
margin: 0rem 0.5rem;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.CTemplate4persent {
|
||||
// padding: 0.5rem;
|
||||
// margin: 0rem 0.5rem;
|
||||
background-color: #fce400;
|
||||
border-radius: 5px;
|
||||
color: #184d90;
|
||||
}
|
||||
|
||||
.CTemplate4CardMasterDiv {
|
||||
width: 6rem;
|
||||
height: 165px;
|
||||
margin: 1rem 0rem;
|
||||
border-radius: 10px;
|
||||
gap: '0.2rem';
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.CTemplate4CardContent {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.2rem;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
// margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.CTemplate4Pricing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background-color: #fce400;
|
||||
border-radius: 0px 18px 0px 10px;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding-right: 6rem;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
.CTemplate4Offer {
|
||||
background-color: #bf2523;
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
left: 3rem;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
padding: 0.6rem;
|
||||
font-weight: 700;
|
||||
color: #fce400;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: -44px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.CTemplate4ProductImage {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.CTemplate4CardContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.CTemplate4Fotter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.CTemplate4FotterAddress {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.header-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-offer-text {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
color: #fce400;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
// width: 100%;
|
||||
|
||||
.offer-percentage {
|
||||
background-color: #fce400;
|
||||
color: #184d90;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 5px;
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content Section
|
||||
.content-section {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
background-image: linear-gradient(to right, #252a69, #016ab6);
|
||||
width: 14rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.2rem;
|
||||
min-height: calc(297mm - 250px); // Total height minus header and footer
|
||||
}
|
||||
|
||||
.CTemplate4Fotterphone {
|
||||
background-color: #252a69;
|
||||
width: 12rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.2rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
// Product Grid - 5x5
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
gap: 0.5rem;
|
||||
justify-items: center;
|
||||
align-items: start;
|
||||
// width: 84%;
|
||||
}
|
||||
|
||||
.CTemplate4Fotterinfo {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
// Product Card
|
||||
.product-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.CTemplate4MasterDiv .PrintA4Style {
|
||||
font-family: 'Inconsolata', monospace;
|
||||
width: 100%;
|
||||
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
height: 140px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: visible;
|
||||
|
||||
.product-image {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
padding: 0 5px;
|
||||
margin-top: 5px;
|
||||
color: #000;
|
||||
line-height: 1.2;
|
||||
max-height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-right: -5px;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
background-color: #fce400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 0 0 8px 8px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.product-offer {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: -7px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-color: #bf2523;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
padding: 3px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.container-main {
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
flex-wrap: wrap !important;
|
||||
// Footer Section
|
||||
.page-footer {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-image: linear-gradient(to right, #252a69, #016ab6);
|
||||
border-top: 1px solid #1292EE;
|
||||
padding: 1rem;
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer-branch-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-info-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-address,
|
||||
.footer-phone {
|
||||
font-size: 9px;
|
||||
background-color: #252a69;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-phone {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// Print Styles
|
||||
@media print {
|
||||
.catalogue-template-4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.catalogue-page {
|
||||
page-break-after: always;
|
||||
|
||||
&:last-child {
|
||||
page-break-after: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-top: 150px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Page setup for printing
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -203,6 +203,7 @@ import CreateTransfer from './Pages/StockTransfer/CreateTransfer.jsx';
|
|||
import Dispatch from './Pages/StockTransfer/Dispatch.jsx';
|
||||
import ComboLayout3 from './Pages/BookingScreen/Template/ComboLayout3/ComboLayout3.jsx';
|
||||
import StockTransferList from './Pages/StockTransfer/TransferList.jsx';
|
||||
import Productcatlogue from './Pages/ProductCatlogue/Productcatalogue.jsx';
|
||||
|
||||
const subDirectory = import.meta.env.BASE_URL;
|
||||
const apiCommonUrl = import.meta.env.ENV_API_URL_COMMON;
|
||||
|
|
@ -267,7 +268,7 @@ const fetchComponent = async () => {
|
|||
sessionStore('userName', 'Karthiga');
|
||||
sessionStorage.setItem(
|
||||
'auth',
|
||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiOTM2MDY0MjI0NCIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzY5Nzk3NjI0LCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.IDTmr2_hF_uiNn13QwgbKr0GGXPtOKyUrAV-XzqzMfA'
|
||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiOTM2MDY0MjI0NCIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzcwMjMzMDA3LCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.y6ZLDB3qz1nJk68XY13jXxHKd99LVX2GhzhtE5eGXqI'
|
||||
);
|
||||
|
||||
const AppId = getSession('AppId');
|
||||
|
|
@ -372,7 +373,7 @@ const fetchHomeComponent = async () => {
|
|||
sessionStore('userName', 'Karthiga');
|
||||
sessionStorage.setItem(
|
||||
'auth',
|
||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiOTM2MDY0MjI0NCIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzY5Nzk3NjI0LCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.IDTmr2_hF_uiNn13QwgbKr0GGXPtOKyUrAV-XzqzMfA'
|
||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiOTM2MDY0MjI0NCIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzcwMjMzMDA3LCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.y6ZLDB3qz1nJk68XY13jXxHKd99LVX2GhzhtE5eGXqI'
|
||||
);
|
||||
|
||||
const AppId = getSession('AppId');
|
||||
|
|
@ -690,10 +691,15 @@ export const routesConfig = [
|
|||
},
|
||||
|
||||
{
|
||||
path: 'product-catalogue',
|
||||
path: 'product-catalogue-list',
|
||||
component: ProductCatalogueList,
|
||||
empAccess: 'Product Catalogue',
|
||||
},
|
||||
{
|
||||
path: 'product-catalogue',
|
||||
component: Productcatlogue,
|
||||
empAccess: 'Product Catalogue',
|
||||
},
|
||||
{ path: 'admin-tax', component: AdminTax, empAccess: 'Tax' },
|
||||
{
|
||||
path: 'create-ticket',
|
||||
|
|
|
|||
Loading…
Reference in New Issue