-
- {props?.cat === 'Catalogue 4' && (
-
- FLAT 50% OFF
-
- )}
+ // Header Component
+ const PageHeader = () => (
+
+
+ {props?.cat === 'Catalogue 4' && (
+
+ {/* FLAT SPECIAL SAVINGS OFF */}
+ SPECIAL SAVINGS
+
+ )}
+
+ );
+
+ // Footer Component
+ const PageFooter = () => (
+
+
+
{Branchdatas?.[0]?.BrName}
+
+ {Branchdatas?.[0]?.Address1 && (
+
+ {Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
+ {Branchdatas?.[0]?.State}
- ))}
-
-
- {/* Content Section */}
-
-
- {Globalcataloguedata1?.map((item) => (
-
-
-
- {item?.ProdName} {item?.UomName}
-
-
-
- {props?.cat === 'Catalogue 4' &&
- `MRP:₹${safeRound(item?.SellPrice)}`}
-
-
-
-
- {props?.cat === 'Catalogue 6'
- ? ` ₹${safeRound(item?.SellPrice)} only`
- : '15% off on MRP'}
-
-
-
- ))}
-
-
-
- {/* Footer Section */}
-
-
- {Branchdatas?.[0]?.BrName}
-
-
- {Branchdatas?.[0]?.Address1 && (
-
- {Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
- {Branchdatas?.[0]?.State}
-
- )}
- {Branchdatas?.[0]?.BrMobile && (
-
- FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
-
- )}
-
+ )}
+ {/* {Branchdatas?.[0]?.BrMobile && (
+
+ FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
+
+ )} */}
-
+
+ );
+
+ // 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 }) => (
+
+
+
+ {item?.ProdName} {item?.UomName}
+
+
+ {props?.cat === 'Catalogue 4'
+ ? `MRP: ₹${safeRound(item?.SellPrice)}`
+ : item?.OfferDtl?.[0]?.OfferName ? (
+
{item?.OfferDtl?.[0]?.OfferName}
) : 'No Offer'
+ }
+
+ {(
+ props?.cat === 'Catalogue 6' ||
+ item?.OfferDtl?.length > 0
+ ) && (
+
+ {getOfferText(item, props?.cat)}
+
+ )}
+
+
+ );
+
+ return (
+
+ {pages.map((pageProducts, pageIndex) => (
+
+
+
+
+ {pageProducts.map((item, index) => (
+
+ ))}
+
+
+
+
+
+ ))}
+
);
};
-export default CatalogueTemplate4;
+export default CatalogueTemplate4;
\ No newline at end of file
diff --git a/src/Pages/ProductCatlogue/Productcatalogue.jsx b/src/Pages/ProductCatlogue/Productcatalogue.jsx
new file mode 100644
index 0000000..f22ae87
--- /dev/null
+++ b/src/Pages/ProductCatlogue/Productcatalogue.jsx
@@ -0,0 +1,3046 @@
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import Buttons from '../../Components/Forms/Buttons';
+import {
+ ArrowRightOutlined,
+ DownloadOutlined,
+ EditOutlined,
+ MailOutlined,
+ MessageOutlined,
+ WhatsAppOutlined,
+} from '@ant-design/icons';
+import { changeBreadCrumb } from '../../Features/AppPage/CenterPage';
+import { useEffect, useState } from 'react';
+import { Skeleton, Form, Input, Button } from 'antd';
+import './Productcatalogue.scss';
+import FormHeader from '../PageComponents/FormHeader';
+import CatalogueTemplate1 from './CatalogueTemplate1';
+import CatalogueTemplate2 from './CatalogueTemplate2';
+import CatalogueTemplate3 from './CatalogueTemplate3';
+import CatalogueTemplate4 from './CatalogueTemplate4';
+import CatalogueTemplate5 from './CatalogueTemplate5';
+import { DropDowns } from '../../Components/Forms/DropDown';
+import { getSession, pdfDiv, printDiv } from '../../Services/Others';
+import { Emailsend } from '../../Features/PurchaseOrder/PurchaseOrder';
+import { DefaultModal } from '../../Components/Modal/DefaultModal';
+import {
+ changeCataloguecheckboxdata,
+ changeCataloguedata,
+ deleteProductCatalogue,
+ GetProductCatalogueByTypeData,
+ ProductCatalogue,
+} from '../../Features/ProductCatlog/ProductCatlogue';
+const subDirectory = import.meta.env.ENV_BASE_URL;
+
+const Productcatlogue = () => {
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const [form] = Form.useForm();
+ const CompId = getSession('CompId');
+ const BranchId = getSession('BranchId');
+ const AppId = getSession('AppId');
+ const UserId = getSession('UserId');
+ const [iSEmail, setiSEmail] = useState(false);
+ const [template, setTemplate] = useState();
+ const [selectedTemplateData, setSelectedTemplateData] = useState();
+ const [catelogueData, setCatelogueData] = useState('');
+
+ const items = [
+ {
+ name: 'Home',
+ link: `${subDirectory}app-page/home`,
+ },
+ {
+ name: 'Catalogue',
+ link: `${subDirectory}setting/product-catalogue`,
+ },
+ ];
+
+ useEffect(() => {
+ dispatch(changeBreadCrumb({ items: items }));
+ Configdata();
+ }, []);
+
+ const Configdata = async () => {
+ let response = await dispatch(ProductCatalogue()).unwrap();
+ if (response?.data?.statusCode == 1) {
+ setTemplate(response?.data?.data);
+ }
+ };
+ const handleDropDownChange = (value) => {
+ dispatch(changeCataloguedata([]));
+ if (value) {
+ const selectedOption = template?.find((item) => item?.ConfigId === value);
+ if (selectedOption) {
+ getProductCataloguedata(value);
+ setSelectedTemplateData({
+ ConfigId: selectedOption.ConfigId,
+ ConfigName: selectedOption.ConfigName,
+ });
+ }
+ } else {
+ setSelectedTemplateData('');
+ }
+ };
+
+ const handleEditCatalogue = (editData) => {
+ navigate(`${subDirectory}setting/product-catalogue-list`, {
+ state: { editMode: true, catalogueData: editData },
+ });
+ };
+
+ const getProductCataloguedata = async (config) => {
+ const data = {
+ AppId,
+ BranchId,
+ CompId,
+ CatalogType: config,
+ };
+ const response = await dispatch(
+ GetProductCatalogueByTypeData(data)
+ ).unwrap();
+ if (response?.data?.statusCode == 1) {
+ const catalogueData = response?.data?.data?.map((item, index) => ({
+ key: index,
+ selectedRowKeys: index,
+ ProdId: item.ProdId,
+ templateName: item.templateName,
+ ProdName: item.ProdName,
+ Price: item.MRP,
+ UomName: `${item.Size} ${item.UomName}`,
+ ProdLogo: item.ProdLogo,
+ OfferDtl: item.OfferDtl,
+ ...item,
+ }));
+ console.log(catalogueData, 'catalogueDataswdsads');
+
+ dispatch(changeCataloguedata(catalogueData));
+ setCatelogueData(catalogueData);
+ // setCatelogueData(catalogueData)
+ } else {
+ setCatelogueData('');
+ }
+ };
+
+ const deleteCatelogue = async () => {
+ const data = {
+ AppId,
+ BranchId,
+ CompId,
+ CatalogType: selectedTemplateData?.ConfigId,
+ ActiveStatus: 'D',
+ UpdatedBy: UserId,
+ };
+ const response = await dispatch(deleteProductCatalogue(data)).unwrap();
+ if (response?.data?.statusCode == 1) {
+ setCatelogueData('');
+ dispatch(changeCataloguedata());
+ }
+ };
+ const currentSelectedTemplate = selectedTemplateData?.ConfigName;
+
+ const CatLog1 = ``;
+
+ const CatLog2 = ``;
+
+ const CatLog3 = ``;
+
+ const CatLog4 = ``;
+
+ const CatLog5 = ``;
+
+ const CatLog6 = ``;
+
+ const handleDownload = async () => {
+ const StyleName = {
+ 'Catalogue 1': CatLog1,
+ 'Catalogue 2': CatLog2,
+ 'Catalogue 3': CatLog3,
+ 'Catalogue 4': CatLog4,
+ 'Catalogue 5': CatLog5,
+ 'Catalogue 6': CatLog6,
+ };
+
+ const StyleIDs = {
+ 'Catalogue 1': 'CatLog1',
+ 'Catalogue 2': 'CatLog2',
+ 'Catalogue 3': 'CatLog3',
+ 'Catalogue 4': 'CatLog4',
+ 'Catalogue 5': 'CatLog5',
+ 'Catalogue 6': 'CatLog6',
+ };
+
+ const StyleId = StyleIDs[selectedTemplateData?.ConfigName];
+ const Style = StyleName[selectedTemplateData?.ConfigName];
+
+ await printDiv(StyleId, Style);
+ };
+ const handleEmailClick = async (ProductDetails, record) => {
+ const toEmail = record?.custEmail;
+ const StyleName = {
+ 'Catalogue 1': CatLog1,
+ 'Catalogue 2': CatLog2,
+ 'Catalogue 3': CatLog3,
+ 'Catalogue 4': CatLog4,
+ 'Catalogue 5': CatLog5,
+ 'Catalogue 6': CatLog6,
+ };
+
+ const StyleIDs = {
+ 'Catalogue 1': 'CatLog1',
+ 'Catalogue 2': 'CatLog2',
+ 'Catalogue 3': 'CatLog3',
+ 'Catalogue 4': 'CatLog4',
+ 'Catalogue 5': 'CatLog5',
+ 'Catalogue 6': 'CatLog6',
+ };
+
+ const StyleId = StyleIDs[selectedTemplateData?.ConfigName];
+ const Style = StyleName[selectedTemplateData?.ConfigName];
+ if (toEmail) {
+ try {
+ const blob = await pdfDiv(StyleId, Style);
+ console.log(blob, 'blobblob');
+
+ const payload = {
+ fileBlob: blob,
+ toEmail: toEmail,
+ type: 'Catalogue',
+ messageTemplatesList: [],
+ };
+
+ const res = await dispatch(Emailsend(payload))?.unwrap();
+
+ console.log('✅ API Response:', res?.data || res);
+ setMessage({ type: 'success', data: 'Email sent successfully' });
+ } catch (error) {
+ setMessage({ type: 'error', data: 'Email failed to send' });
+ console.error('❌ Email send failed:', error);
+ }
+ } else {
+ setiSEmail(true);
+ }
+ };
+
+ const handleSendEmailWithEnteredEmail = async (values) => {
+ const recordWithEmail = { custEmail: values.email };
+ setiSEmail(false);
+ await handleEmailClick(catelogueData, recordWithEmail);
+ setPendingRecord(null);
+ form.resetFields();
+ };
+ // const handleWhatsApp = () => {
+ // const message = `Check out our catalogue: ${currentSelectedTemplate} with ${combinedData.length} products`;
+ // const url = `https://wa.me/?text=${encodeURIComponent(message)}`;
+ // window.open(url, '_blank');
+ // };
+
+ // const handleMessage = () => {
+ // const message = `Check out our catalogue: ${currentSelectedTemplate} with ${combinedData.length} products`;
+ // if (navigator.share) {
+ // navigator.share({ text: message });
+ // } else {
+ // navigator.clipboard.writeText(message);
+ // alert('Message copied to clipboard!');
+ // }
+ // };
+
+ return (
+
+
+
+
+
+
+ ({
+ value: option?.ConfigId,
+ label: option?.ConfigName,
+ }))}
+ label="Catalogue"
+ className="field-DropDown"
+ onChangeFunction={(e) => {
+ handleDropDownChange(e);
+ }}
+ valueData={currentSelectedTemplate}
+ />
+
+ {/* Selected Catalogue Edit Section */}
+ {catelogueData && (
+
+ }
+ size="small"
+ handleSubmit={() => handleEditCatalogue(catelogueData)}
+ />
+
+ )}
+
+ {/* Selected Catalogue Delete Section */}
+ {catelogueData && (
+
+ }
+ size="small"
+ handleSubmit={() => deleteCatelogue()}
+ />
+
+ )}
+
+ }
+ htmlType={true}
+ handleSubmit={() => {
+ dispatch(changeCataloguedata(''));
+ dispatch(changeCataloguecheckboxdata(''));
+ navigate(`${subDirectory}setting/product-catalogue-list`);
+ }}
+ />
+
+
+ {catelogueData && (
+
+ )}
+ {/*
+ */}
+ {catelogueData && (
+
+ )}
+
+
+
+
+ {(() => {
+ switch (currentSelectedTemplate) {
+ case 'Catalogue 1':
+ return
;
+ case 'Catalogue 2':
+ return
;
+ case 'Catalogue 3':
+ return
;
+ case 'Catalogue 4':
+ return (
+
+ );
+ case 'Catalogue 5':
+ return
;
+ case 'Catalogue 6':
+ return (
+
+ );
+ default:
+ return (
+
+
+
+ Please select a catalogue template from history
+
+
+ );
+ }
+ })()}
+
+
+
setiSEmail(false)}
+ footer={false}
+ children={
+
+
+
+ }
+ />
+
+ );
+};
+
+export default Productcatlogue;
diff --git a/src/Pages/ProductCatlogue/Productcatalogue.scss b/src/Pages/ProductCatlogue/Productcatalogue.scss
new file mode 100644
index 0000000..da807ba
--- /dev/null
+++ b/src/Pages/ProductCatlogue/Productcatalogue.scss
@@ -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;
+ }
+}
diff --git a/src/Pages/ProductCatlogue/ProductcatlogueList.jsx b/src/Pages/ProductCatlogue/ProductcatlogueList.jsx
index 935ccf1..620cc76 100644
--- a/src/Pages/ProductCatlogue/ProductcatlogueList.jsx
+++ b/src/Pages/ProductCatlogue/ProductcatlogueList.jsx
@@ -1,29 +1,20 @@
import { useEffect, useState, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { getSession, handleGeneratePDF } from '../../Services/Others';
+import { getSession } from '../../Services/Others.js';
import {
changeBreadCrumb,
getEmpAccess,
} from '../../Features/AppPage/CenterPage.js';
-import { Radio, Table, Form, Tooltip, Skeleton } from 'antd';
+import { Radio, Table, Form, Tooltip, Skeleton, message } from 'antd';
import FormHeader from '../PageComponents/FormHeader.jsx';
-import { Search } from '../../Components/Forms/Search';
-import {
- WhatsAppOutlined,
- MessageOutlined,
- MailOutlined,
- ArrowRightOutlined,
-} from '@ant-design/icons';
+import { Search } from '../../Components/Forms/Search.jsx';
+import { ArrowRightOutlined } from '@ant-design/icons';
import { DropDowns } from '../../Components/Forms/DropDown.jsx';
import Buttons from '../../Components/Forms/Buttons.jsx';
import Imageupload from '../../Components/Forms/Upload.jsx';
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
-import { uploadImage } from '../../Features/upload/upload';
-import wp from '../../Images/Assets/wp.svg';
-import sms from '../../Images/Assets/sms.png';
-import mail from '../../Images/Assets/gmail 1.png';
-import printer from '../../Images/Assets/printer.png';
-import CatalogueTemplate1 from '../ProductCatlogue/CatalogueTemplate1.jsx';
+import { uploadImage } from '../../Features/upload/upload.js';
+import CatalogueTemplate1 from './CatalogueTemplate1.jsx';
import {
getProdcataloguedata,
onlineimages,
@@ -31,7 +22,10 @@ import {
changeCataloguecheckboxdata,
GlobalCataloguecheckboxdata,
ProductCatalogue,
-} from '../../Features/ProductCatlog/ProductCatlogue';
+ getProductCatalogueData,
+ postProductCatalogue,
+ putProductCatalogue,
+} from '../../Features/ProductCatlog/ProductCatlogue.js';
import '../../Styles/ProductCatalogue/ProductCatalogue.scss';
import CatalogueTemplate2 from './CatalogueTemplate2.jsx';
import CatalogueTemplate3 from './CatalogueTemplate3.jsx';
@@ -41,16 +35,20 @@ import _ from 'lodash';
import { TbWorldSearch } from 'react-icons/tb';
import { useAuth } from '../../AuthContext.jsx';
import { printDiv } from '../../Services/WSOthers.js';
+import { useLocation, useNavigate } from 'react-router-dom';
const subDirectory = import.meta.env.ENV_BASE_URL;
function ProductcatalogueList() {
const dispatch = useDispatch();
+ const location = useLocation();
+ const editstate = location?.state;
const formRef = useRef(null);
const CompId = getSession('CompId');
const BranchId = getSession('BranchId');
const AppId = getSession('AppId');
const UserId = getSession('UserId');
const UserType = getSession('UserType');
+ const navigate = useNavigate();
const { SadminuserAccess } = useAuth();
let SAAccessCommonMaster = SadminuserAccess?.find(
@@ -58,43 +56,54 @@ function ProductcatalogueList() {
);
const checkboxdata = useSelector(GlobalCataloguecheckboxdata);
-
// const [sortedInfo, setSortedInfo] = useState({});
const [searchedText, setSearchedText] = useState('');
+ const [selectionType, setSelectionType] = useState('checkbox');
+ const [selectedProductCatalogue, setselectedProductCatalogue] = useState();
const [selectedRowKeys, setSelectedRowKeys] = useState(
checkboxdata?.length > 0 ? checkboxdata : []
);
- const [selectionType, setSelectionType] = useState('checkbox');
- const [Cataloguetable, setCataloguetable] = useState();
- const [selectedProductCatalogue, setselectedProductCatalogue] = useState();
+
+ const [data, setdata] = useState([]);
const [page, setpage] = useState(1);
const [imageopen, setimageOpen] = useState();
- const [onlineImage, setOnlineImage] = useState(null);
const [imagedata, setimagedata] = useState();
const [selectedImageIndex, setSelectedImageIndex] = useState(null);
const [selectedImages, setSelectedImages] = useState({});
const [selectedProductName, setSelectedProductName] = useState(null);
const [selectedImage, setSelectedImage] = useState(null);
- const [selectedRowData, setSelectedRowData] = useState();
- const [data, setdata] = useState([]);
const [Template, setTemplate] = useState();
- const [imageUrl, setImageUrl] = useState('');
const [FilteredInfo, setFilteredInfo] = useState();
const [empData, setEmpData] = useState();
const [addnewAccess, setaddnewAccess] = useState(true);
const [filteredTableData, setfilteredTableData] = useState(data);
+ const [cataloguedata, setCataloguedata] = useState([]);
+ const [productCount, setProductCount] = useState([]);
+ const pageSize = 10;
+
const tableDisplayData = (
filteredTableData?.length > 0 ? filteredTableData : data
)?.map((e, index) => ({
...e,
index: index + 1,
}));
- console.log(filteredTableData, 'filteredTableData');
const items = [
{
name: 'Home',
link: `${subDirectory}app-page/home`,
},
+
+ {
+ name: 'Catlogue',
+ link: `${subDirectory}setting/product-catalogue`,
+ },
+ {
+ name: editstate ? 'Edit' : 'New',
+ link: null,
+ link: editstate
+ ? `${subDirectory}setting/product-catalogue/update`
+ : `${subDirectory}setting/product-catalogue/new`,
+ },
];
function safeRound(amountStr) {
@@ -206,15 +215,23 @@ function ProductcatalogueList() {
// render: (text) =>
{text},
// },
];
-
useEffect(() => {
- dispatch(changeBreadCrumb({ items: items }));
+ dispatch(changeBreadCrumb({ items }));
Catlogdata();
Configdata();
- // if (UserType === "Employee") {
- // fetchApi()
- // }
+
+ if (editstate?.editMode && Array.isArray(editstate?.catalogueData)) {
+ const catalogueToEdit = editstate.catalogueData;
+
+ setselectedProductCatalogue({
+ ConfigId: catalogueToEdit[0]?.CatalogType,
+ ConfigName: catalogueToEdit[0]?.CatalogTypeName,
+ });
+
+ setSelectedRowKeys(catalogueToEdit.map((item) => item.key));
+ }
}, []);
+
useEffect(() => {
if (UserType === 'Employee') {
fetchApi();
@@ -260,42 +277,22 @@ function ProductcatalogueList() {
e?.map((item, index) =>
data?.push({
key: index,
+ ProdId: item?.ProdId,
ProdName: item?.ProdName,
- SellPrice:
- item?.ProductDetail?.[0]?.ProdVariantDetails?.[0]?.StockDetails?.[0]
- ?.SellPrice,
- UomName:
- '(' +
- item?.ProductDetail?.[0]?.Size +
- ' ' +
- item?.ProductDetail?.[0]?.UomName +
- ')',
- ProdLogo: item?.ProductDetail?.[0]?.ProdLogo,
+ SellPrice: item?.MRP,
+ UomName: '(' + item?.Size + ' ' + item?.UomName + ')',
+ ProdLogo: item?.ProdLogo,
+ OfferDtl: item?.OfferDtl,
})
);
setdata(data);
};
- // const dataPushFun=async(e)=>{
- // let data=[]
- // e?.map((item, index) =>
- // data?.push({
- // key: index,
- // ProdName: item?.ProdName,
- // SellPrice:item?.ProductDetail[0]?.StockDetails?.[0]?.SellPrice,
- // UomName: item?.ProductDetail[0]?.Size +" "+"("+item?.ProductDetail[0]?.UomName+")",
- // ProdLogo: item?.ProductDetail[0]?.ProdLogo,
- // })
- // );
- // setdata(data)
- // }
-
const onSelectChange = (newSelectedRowKeys) => {
let Filteredrowdata = data?.filter((a) =>
newSelectedRowKeys?.includes(a.key)
);
-
+ setCataloguedata(Filteredrowdata);
setSelectedRowKeys(newSelectedRowKeys);
- setSelectedRowData(Filteredrowdata);
dispatch(changeCataloguedata(Filteredrowdata));
dispatch(changeCataloguecheckboxdata(newSelectedRowKeys));
};
@@ -304,7 +301,7 @@ function ProductcatalogueList() {
let Filteredrowdata = data?.filter((a) =>
selectedRowKeys?.includes(a.key)
);
- setSelectedRowData(Filteredrowdata);
+ setCataloguedata(Filteredrowdata);
dispatch(changeCataloguedata(Filteredrowdata));
}
}, [data]);
@@ -320,7 +317,7 @@ function ProductcatalogueList() {
setSearchedText(e?.target?.value);
};
const filterData = (data, searchText) => {
- // setpage(1)
+ setpage(1);
return data.filter(
(record) =>
@@ -383,12 +380,16 @@ function ProductcatalogueList() {
}, [imageopen]);
const Catlogdata = async () => {
- let data = { CompId: CompId, BranchId: BranchId, AppId: AppId };
-
- const response = await dispatch(getProdcataloguedata(data)).unwrap();
+ let data = {
+ CompId: CompId,
+ BranchId: BranchId,
+ AppId: AppId,
+ PageNumber: page,
+ };
+ const response = await dispatch(getProductCatalogueData(data)).unwrap();
if (response?.data?.statusCode == 1) {
- setCataloguetable(response?.data?.data);
dataPushFun(response?.data?.data);
+ setProductCount(response?.data?.TotalCount);
}
};
@@ -448,9 +449,6 @@ function ProductcatalogueList() {
...prevSelectedImages,
[selectedImageIndex]: uploadImgData?.data?.image,
}));
-
- setOnlineImage(uploadImgData?.data?.image);
- setImageUrl(uploadImgData?.data?.image);
formRef?.current?.setFieldsValue({ OnlineImage: file });
let updatedData = _.cloneDeep([...data]);
if (selectedImageIndex >= 0) {
@@ -466,795 +464,570 @@ function ProductcatalogueList() {
};
const CatLog1 = ``;
const CatLog2 = ``;
const CatLog3 = ``;
-
- const CatLog4 = ``;
+
+ const CatLog4 = ``;
+ .catalogue-template-4 {
+ background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ }
+
+ .catalogue-page {
+ page-break-after: always;
+ min-height: 297mm;
+ background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ }
+
+ .catalogue-page:last-child {
+ page-break-after: auto;
+ }
+
+ .page-header,
+ .page-footer,
+ .content-section-4 {
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ }
+
+ .content-section-4 {
+ background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+ }
+}
+`;
const CatLog5 = ``;
const CatLog6 = ``;
+ // post Api call
+ const postCatalogueData = async () => {
+ if (!selectedProductCatalogue?.ConfigId) {
+ message.error('Please select a template');
+ return;
}
- .CTemplate4Header {
- width: inherit;
- padding: 0rem 0rem 0rem 1rem;
- display: flex;
- flex-direction: row;
- align-items: center;
- position:relative;
+ const baseData = {
+ AppId,
+ CompId,
+ BranchId,
+ CatalogType: selectedProductCatalogue?.ConfigId,
+ Products: cataloguedata?.map((prod) => ({
+ ProdId: prod.ProdId,
+ OfferId: prod.OfferDtl?.[0]?.OfferId || '',
+ })),
+ };
+
+ const data = editstate?.editMode
+ ? { ...baseData, UpdatedBy: UserId }
+ : { ...baseData, CreatedBy: UserId };
+
+ try {
+ const response = editstate?.editMode
+ ? await dispatch(putProductCatalogue(data)).unwrap()
+ : await dispatch(postProductCatalogue(data)).unwrap();
+
+ if (response?.data?.statusCode === 1) {
+ message.success(response?.data?.response);
+ await Print();
+ dispatch(changeCataloguedata());
+ navigate(`${subDirectory}setting/product-catalogue`);
+ } else {
+ message.error(response?.data?.response);
+ }
+ } catch (err) {
+ message.error('Something went wrong. Please try again.');
}
-
- .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: 6rem;
- height: 165px;
- margin: 1rem 0rem;
- border-radius: 10px;
- gap: '0.2rem';
- position: relative;
- }
-
- .CTemplate4CardContent {
- width: 7rem;
- 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: 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: -45px;
- font-family: 'Montserrat', sans-serif;
- font-size: 15px;
- }
-
- .CTemplate4ProductImage {
- width: 90px;
- height: 90px;
- }
-
- .CTemplate4CardContainer {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- gap: 2.7rem;
- padding: 0rem 0rem 4rem 0rem;
- }
- .table-header
- {
- width:100%;
- height:125px;
- }
-
- .CTemplate4Fotter {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- gap: 0.5rem;
- width: 100%;
- height: 100px;
- background-color: #fff;
- background-image: linear-gradient(to right, #252a69, #016ab6) !important;
- }
-
-
- .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 {
- font-family: 'Montserrat', sans-serif;
- display: flex;
- gap: 1rem;
- flex-direction: column;
- padding: 0.5rem;
- float: right;
- }
-
-
- .CTemplate4MasterDiv .PrintA4Style {
- font-family: 'Inconsolata', monospace;
- width: 100%;
- background-color: #fff;
- }
- `;
+ };
const Print = async () => {
const StyleName = {
@@ -3758,14 +2913,25 @@ font-weight:600;
'Catalogue 6': 'CatLog4',
};
- const StyleId = StyleIDs?.[selectedProductCatalogue];
- const Style = StyleName?.[selectedProductCatalogue];
-
+ const StyleId = StyleIDs?.[selectedProductCatalogue?.ConfigName];
+ const Style = StyleName?.[selectedProductCatalogue?.ConfigName];
await printDiv(StyleId, Style);
};
- const handleProductTypeDropDownChange = (e) => {
- setselectedProductCatalogue(e);
+ const handleProductTypeDropDownChange = (selectedValue) => {
+ if (selectedValue) {
+ const selectedOption = Template.find(
+ (item) => item.ConfigId === selectedValue
+ );
+ if (selectedOption) {
+ setselectedProductCatalogue({
+ ConfigId: selectedOption.ConfigId,
+ ConfigName: selectedOption.ConfigName,
+ });
+ }
+ } else {
+ setselectedProductCatalogue(null);
+ }
};
return (
@@ -3800,14 +2966,14 @@ font-weight:600;
>
({
- value: option?.ConfigName,
+ value: option?.ConfigId,
label: option?.ConfigName,
}))}
label="Templates"
className="field-DropDown"
// isOnchanges={(editstate?.ProdType || SelectedProductType)?true:false}
onChangeFunction={(e) => handleProductTypeDropDownChange(e)}
- valueData={selectedProductCatalogue}
+ valueData={selectedProductCatalogue?.ConfigName}
// disabled={(formType == "edit" && !editstate?.ProdTypeName=="Others" )? true : false}
/>
@@ -3826,12 +2992,16 @@ font-weight:600;
columns={columns}
dataSource={tableDisplayData}
pagination={{
- onChange: handlePageChange,
- defaultPageSize: 10,
+ // current: page,
+ // pageSize: pageSize,
+ // total: productCount,
showSizeChanger: false,
- hideOnSinglePage: true,
+ onChange: handlePageChange,
}}
onChange={handleChange}
+ // defaultPageSize: 10,
+
+ // hideOnSinglePage: true,
/>
);
diff --git a/src/Styles/ProductCatalogue/CatalogueTemplate1.scss b/src/Styles/ProductCatalogue/CatalogueTemplate1.scss
index 9e62e22..98e3559 100644
--- a/src/Styles/ProductCatalogue/CatalogueTemplate1.scss
+++ b/src/Styles/ProductCatalogue/CatalogueTemplate1.scss
@@ -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;
diff --git a/src/Styles/ProductCatalogue/CatalogueTemplate3.scss b/src/Styles/ProductCatalogue/CatalogueTemplate3.scss
index e3faa65..55b2762 100644
--- a/src/Styles/ProductCatalogue/CatalogueTemplate3.scss
+++ b/src/Styles/ProductCatalogue/CatalogueTemplate3.scss
@@ -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;
+ }
}
diff --git a/src/Styles/ProductCatalogue/CatalogueTemplate4.scss b/src/Styles/ProductCatalogue/CatalogueTemplate4.scss
index 82a9a6f..e79920d 100644
--- a/src/Styles/ProductCatalogue/CatalogueTemplate4.scss
+++ b/src/Styles/ProductCatalogue/CatalogueTemplate4.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/routesConfig.jsx b/src/routesConfig.jsx
index 8cda4e6..d9b5148 100644
--- a/src/routesConfig.jsx
+++ b/src/routesConfig.jsx
@@ -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',
-
- 
- 
-