From 74e7def89bb8c96b94a3ee1211f805a8d416a5b9 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:29:10 +0530 Subject: [PATCH 01/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle1.jsx | 382 ++++++++++++------ 1 file changed, 263 insertions(+), 119 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.jsx index 3f2f410..64d3dab 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.jsx @@ -31,6 +31,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalRowType, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss'; import QRCode from 'react-qr-code'; @@ -67,7 +77,6 @@ const PrintStyle1 = ({ const FieldDetails = useSelector(GloabalFieldDetails); const SLNO = FieldDetails?.['Sl.No']; const Item = FieldDetails?.['Item']; - console.log(Item, 'PrintStyle1PrintStyle1'); const MRP = FieldDetails?.['MRP']; const Discount = FieldDetails?.['Discount']; const Tax = FieldDetails?.['Tax']; @@ -80,6 +89,12 @@ const PrintStyle1 = ({ const LogoField = FieldDetails?.['Logo']; const CreditDetails = FieldDetails?.['Credit details']; const WeightasKg = FieldDetails?.['Weight']; + const HeaderColor = FieldDetails?.['Header Colour']; + const NetAmountColor = FieldDetails?.['Net Amount']; + const TableHeaderColour = FieldDetails?.['Table Header Colour']; + const TableBodyColour = FieldDetails?.['Table Body Colour']; + const FooterColor = FieldDetails?.['Footer Colour']; + console.log(FieldDetails, 'FieldDetailsFieldDetails', printDatas); const GlobalSlNo = useSelector(GlobalprintSlNo); const GlobalItem = useSelector(GlobalprintItem); const GlobalMRP = useSelector(GlobalprintMRP); @@ -96,7 +111,16 @@ const PrintStyle1 = ({ const GlobalLogo = useSelector(GlobalprintLogo); const GlobalCredit = useSelector(GlobalprintCredit); const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); - + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); const GlobalSignatureImages = useSelector(GlobalSignatureImage); const GlobalIsnotes = useSelector(Globalnotes); @@ -128,10 +152,10 @@ const PrintStyle1 = ({ (setting) => setting?.SettingIdName?.toLowerCase() === 'estimatetitle' )?.SettingValue === 'Y'; - const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( - (i) => i.SettingIdName === 'PrintUom' - )?.[0]; - + const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( + (i) => i.SettingIdName === 'PrintUom' + )?.[0]; + const keysLength = Object.keys(table2Data ?? {}).length; const paymentTypeUPI = PaymentStatus?.find( @@ -145,6 +169,12 @@ const PrintStyle1 = ({ let BillName = printDatas?.PrintHdrName; let FormatTheme = printDatas?.PrintType == 'S' ? true : false; let PageSize = printDatas?.PageSize; + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; const Signature = FieldDetails?.['signature']; const TermsnAdCondition = FieldDetails?.['terms&conditions']; const isEditedBill = PaymentStatus?.some(payment => { @@ -372,10 +402,42 @@ const PrintStyle1 = ({ : 0; const shouldFooterBeOnNewPage = lastChunkRows > (isMobile ? 11 : PageSize == 'A5' ? 5 : 10); - console.log( - PageSize == 'A5' ? '210mm' : '297mm', - 'aggregatedPaymentsaggregatedPayments' - ); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -432,7 +494,15 @@ const PrintStyle1 = ({ width: '100%', }} > -
+
{GlobaldummyData ? ( GlobalLogo && ( -
+ color: GlobaldummyData ? SelectedHeaderFontColor : headerColor?.font, + backgroundColor: GlobaldummyData ? SelectedHeaderColor : headerColor?.background, + }}> +
{' '} {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -664,58 +734,58 @@ const PrintStyle1 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) : SLNO == true && ( - S.No + S.No )} {GlobaldummyData - ? GlobalItem && Item - : Item == true && Item} + ? GlobalItem && Item + : Item == true && Item} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode == true && ( - HSN + HSN )} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity == true && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - MRP + MRP ) : MRP == true && ( - MRP + MRP )} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) : Rate == true && ( - Rate + Rate )} {GlobaldummyData ? GlobalDiscount && ( - Dis + Dis ) : Discount == true && ( - Dis + Dis )} {GlobaldummyData ? GlobalTax && ( - Tax % + Tax % ) : Tax == true && table2Data?.OrderType !== 'E' && ( - Tax % + Tax % )} {GlobaldummyData ? GlobalAmount && ( @@ -723,6 +793,7 @@ const PrintStyle1 = ({ style={{ width: '10px', textAlign: 'right', + ...headerStyle, }} > Amt @@ -733,6 +804,7 @@ const PrintStyle1 = ({ style={{ width: '10px', textAlign: 'right', + ...headerStyle, }} > Amt @@ -742,7 +814,18 @@ const PrintStyle1 = ({ {dataChunk?.map((item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -758,7 +841,7 @@ const PrintStyle1 = ({ ? GlobalItem && {item?.ProdName} : Item == true && (
{item?.ProdName}
{PackageDetails?.filter( @@ -798,7 +881,7 @@ const PrintStyle1 = ({  {' '} {item?.BrandName !== null ?
{item?.BrandName}
- : ''} + : ''}  
{item?.ProductIdentifierDtls?.length > 0 @@ -953,58 +1036,58 @@ const PrintStyle1 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) : SLNO == true && ( - S.No + S.No )} {GlobaldummyData - ? GlobalItem && Item - : Item == true && Item} + ? GlobalItem && Item + : Item == true && Item} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode == true && ( - HSN + HSN )} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity == true && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - MRP + MRP ) : MRP == true && ( - MRP + MRP )} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) : Rate == true && ( - Rate + Rate )} {GlobaldummyData ? GlobalDiscount && ( - Dis + Dis ) : Discount == true && ( - Dis + Dis )} {GlobaldummyData ? GlobalTax && ( - Tax % + Tax % ) : Tax == true && table2Data?.OrderType !== 'E' && ( - Tax % + Tax % )} {GlobaldummyData ? GlobalAmount && ( @@ -1012,6 +1095,7 @@ const PrintStyle1 = ({ style={{ width: '10px', textAlign: 'right', + ...headerStyle, }} > Amt @@ -1022,6 +1106,7 @@ const PrintStyle1 = ({ style={{ width: '10px', textAlign: 'right', + ...headerStyle, }} > Amt @@ -1031,7 +1116,18 @@ const PrintStyle1 = ({ {dataChunk?.map((item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -1047,20 +1143,20 @@ const PrintStyle1 = ({ ? GlobalItem && {item?.ProdName} : Item == true && (
{item?.ProdName}
{UomPrint?.SettingValue === 'Y' && -
- ({item?.Size ? item?.Size : '1'}{' '} - {item?.SinglePc == 'Y' - ? 'PCS' - : item?.Type != 'C' - ? item?.UomName - : 'COMBO'} - ) -
-} +
+ ({item?.Size ? item?.Size : '1'}{' '} + {item?.SinglePc == 'Y' + ? 'PCS' + : item?.Type != 'C' + ? item?.UomName + : 'COMBO'} + ) +
+ } {sportsAppPreference && `${item?.BookingDate?.trim() ? `(${dateFormatChange(item.BookingDate)})` @@ -1225,6 +1321,7 @@ const PrintStyle1 = ({ padding: 0, fontSize: '10px', fontWeight: '600', + ...netAmountStyle }} > Amount :₹ @@ -1815,6 +1912,7 @@ const PrintStyle1 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -2091,6 +2189,7 @@ const PrintStyle1 = ({ padding: 0, fontSize: '10px', fontWeight: '600', + ...netAmountStyle }} > Amount :₹ @@ -2667,6 +2766,7 @@ const PrintStyle1 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -2922,6 +3022,7 @@ const PrintStyle1 = ({ padding: 0, fontSize: '10px', fontWeight: '600', + ...netAmountStyle }} > Amount :₹ @@ -3491,6 +3592,7 @@ const PrintStyle1 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -3696,7 +3798,21 @@ const PrintStyle1 = ({ id={`PrintStyle1-${index}`} style={{ fontFamily: "'Courier New', Courier, monospace" }} > -
+
{GlobaldummyData ? ( GlobalLogo && ( +
{' '} @@ -3900,60 +4021,60 @@ const PrintStyle1 = ({ {GlobaldummyData - ? GlobalSlNo && S.No + ? GlobalSlNo && S.No : SLNO == true && ( - S.No + S.No )} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item == true && Item} + : Item == true && Item} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode == true && ( - HSN + HSN )} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity == true && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData - ? GlobalMRP && MRP - : MRP == true && MRP} + ? GlobalMRP && MRP + : MRP == true && MRP} {GlobaldummyData - ? GlobalRate && Rate + ? GlobalRate && Rate : Rate == true && ( - Rate + Rate )} {GlobaldummyData ? GlobalDiscount && ( - Dis + Dis ) : Discount == true && ( - Dis + Dis )} {GlobaldummyData - ? GlobalTax && Tax % + ? GlobalTax && Tax % : Tax == true && table2Data?.OrderType !== 'E' && ( - Tax % + Tax % )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount == true && ( - + Amt )} @@ -3962,7 +4083,18 @@ const PrintStyle1 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -3978,7 +4110,7 @@ const PrintStyle1 = ({ ? GlobalItem && {item?.ProdName} : Item == true && (
{item?.ProdName}
{PackageDetails?.filter( @@ -3999,7 +4131,7 @@ const PrintStyle1 = ({ ))}
) : ( - UomPrint?.SettingValue === 'Y' && + UomPrint?.SettingValue === 'Y' &&
({item?.Size ? item?.Size : '1'}{' '} {item?.SinglePc == 'Y' @@ -4019,7 +4151,7 @@ const PrintStyle1 = ({ {item?.BrandName !== null ? item?.BrandName : ''} -   +  
{item?.ProductIdentifierDtls?.length > 0 ? item?.ProductIdentifierDtls.filter( @@ -4167,58 +4299,58 @@ const PrintStyle1 = ({ {GlobaldummyData - ? GlobalSlNo && S.No + ? GlobalSlNo && S.No : SLNO == true && ( - S.No + S.No )} {GlobaldummyData - ? GlobalItem && Item - : Item == true && Item} + ? GlobalItem && Item + : Item == true && Item} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode == true && ( - HSN + HSN )} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity == true && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData - ? GlobalMRP && MRP - : MRP == true && MRP} + ? GlobalMRP && MRP + : MRP == true && MRP} {GlobaldummyData - ? GlobalRate && Rate + ? GlobalRate && Rate : Rate == true && ( - Rate + Rate )} {GlobaldummyData ? GlobalDiscount && ( - Dis + Dis ) : Discount == true && ( - Dis + Dis )} {GlobaldummyData - ? GlobalTax && Tax % + ? GlobalTax && Tax % : Tax == true && table2Data?.OrderType !== 'E' && ( - Tax % + Tax % )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount == true && ( - + Amt )} @@ -4227,7 +4359,18 @@ const PrintStyle1 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -4243,20 +4386,20 @@ const PrintStyle1 = ({ ? GlobalItem && {item?.ProdName} : Item == true && (
{item?.ProdName}
{UomPrint?.SettingValue === 'Y' && -
- ({item?.Size ? item?.Size : '1'}{' '} - {item?.SinglePc == 'Y' - ? 'PCS' - : item?.Type != 'C' - ? item?.UomName - : 'COMBO'} - ) -
- } +
+ ({item?.Size ? item?.Size : '1'}{' '} + {item?.SinglePc == 'Y' + ? 'PCS' + : item?.Type != 'C' + ? item?.UomName + : 'COMBO'} + ) +
+ } {sportsAppPreference && `${item?.BookingDate?.trim() ? `(${dateFormatChange(item.BookingDate)})` @@ -4414,6 +4557,7 @@ const PrintStyle1 = ({ padding: 0, fontSize: '10px', fontWeight: '600', + ...netAmountStyle }} > Amount :₹ @@ -4954,7 +5098,6 @@ const PrintStyle1 = ({ )}
-
{GlobaldummyData From 71a37dfd4164354ee2a7ab994b6e80c8363d95ed Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:29:52 +0530 Subject: [PATCH 02/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle2.jsx | 290 ++++++++++++------ 1 file changed, 202 insertions(+), 88 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.jsx index dba6669..ab4f60f 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.jsx @@ -29,6 +29,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalRowType, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import Logo from '../../../../Images/Logo.jpg'; import QRCode from 'react-qr-code'; @@ -95,7 +105,16 @@ const Printstyle2 = ({ (ps) => ps.PaymentTypeName === 'UPI' ); const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); - console.log(Qrcodet, 'Qrcodet', paymentTypeUPI); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const GlobalSignature = useSelector(GlobalprintSignature); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); const GlobalSignatureImages = useSelector(GlobalSignatureImage); @@ -140,6 +159,12 @@ const Printstyle2 = ({ let BillName = printDatas?.PrintHdrName; let FormatTheme = printDatas?.PrintType == 'S' ? true : false; let PageSize = printDatas?.PageSize; + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; const Signature = FieldDetails?.['signature']; const TermsnAdCondition = FieldDetails?.['terms&conditions']; @@ -339,7 +364,51 @@ const Printstyle2 = ({ : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 5 : 13); + const headerStyle ={ + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle ={ + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle ={ + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData? SelectedRowType: tableBodyColor?.rowType; + const footerColorStyle ={ + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle ={ + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -392,7 +461,7 @@ const Printstyle2 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{GlobaldummyData ? ( GlobalLogo && ( @@ -425,7 +494,7 @@ const Printstyle2 = ({ style={{ fontSize: '18px', fontWeight: '600', - color: SelectedHeaderColor, + // color: SelectedHeaderColor, }} > {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName} @@ -546,23 +615,23 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) - : SLNO && S.No} + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -570,14 +639,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -585,14 +654,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -600,14 +669,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -615,14 +684,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -633,6 +702,7 @@ const Printstyle2 = ({ style={{ width: '10px', textAlign: 'center', + ...tableHeaderStyle, }} > Tax % @@ -644,6 +714,7 @@ const Printstyle2 = ({ style={{ width: '10px', textAlign: 'center', + ...tableHeaderStyle, }} > Tax % @@ -652,14 +723,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -669,7 +740,18 @@ const Printstyle2 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -918,23 +1000,23 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) - : SLNO && S.No} + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -942,14 +1024,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -957,14 +1039,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -972,14 +1054,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -987,14 +1069,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -1002,9 +1084,7 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalTax && ( Tax % @@ -1013,10 +1093,7 @@ const Printstyle2 = ({ : Tax == true && table2Data?.OrderType !== 'E' && ( Tax % @@ -1024,14 +1101,14 @@ const Printstyle2 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -1041,7 +1118,18 @@ const Printstyle2 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -1305,7 +1393,7 @@ const Printstyle2 = ({ !shouldFooterBeOnNewPage && FormatTheme && ( <> -
+
@@ -1973,6 +2061,7 @@ const Printstyle2 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -2185,10 +2274,11 @@ const Printstyle2 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > <> -
+
@@ -2842,6 +2932,7 @@ const Printstyle2 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -3039,8 +3130,8 @@ const Printstyle2 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
-
+
+
{GlobaldummyData ? ( GlobalLogo && ( {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName} @@ -3183,86 +3274,86 @@ const Printstyle2 = ({ {GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax % ) : Tax == true && table2Data?.OrderType !== 'E' && ( - + Tax % )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} @@ -3272,7 +3363,18 @@ const Printstyle2 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -3509,86 +3611,86 @@ const Printstyle2 = ({ {GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax % ) : Tax == true && table2Data?.OrderType !== 'E' && ( - + Tax % )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} @@ -3598,7 +3700,18 @@ const Printstyle2 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -3772,7 +3885,7 @@ const Printstyle2 = ({
)} -
+
Qty
@@ -4386,6 +4499,7 @@ const Printstyle2 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData From 6af7833a6d78e26d2604450dc7e804be31a8724f Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:30:19 +0530 Subject: [PATCH 03/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle3.jsx | 145 +++++++++++++++--- 1 file changed, 123 insertions(+), 22 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.jsx index 5076585..5b0199a 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.jsx @@ -25,6 +25,17 @@ import { GlobalprintLogo, GlobalprintCredit, GlobalprintTax, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import Logo from '../../../../Images/Logo.jpg' import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.scss' @@ -68,7 +79,6 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan const GlobalHsnCode = useSelector(GlobalprintHsnCode); const GlobalQrcodet = useSelector(GlobalprintQrcodet); const GlobaldummyData = useSelector(GlobalPritdummyData); - console.log(GlobaldummyData, "GlobaldummyData print3"); const GlobalSignature = useSelector(GlobalprintSignature); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); const GlobalSignatureImages = useSelector(GlobalSignatureImage); @@ -79,10 +89,21 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan const GlobalCashierName = useSelector(GlobalprintCashierName); const GlobalLogo = useSelector(GlobalprintLogo); const GlobalCredit = useSelector(GlobalprintCredit); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const SettingData = useSelector(PreferenceData); - const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( + const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( (i) => i.SettingIdName === 'PrintUom' - )?.[0]; + )?.[0]; const estimatePrintHeader = SettingData?.[0]?.SettingDtlDetails?.find(setting => setting?.SettingIdName?.toLowerCase() === 'estimateprintheader')?.SettingValue === 'Y'; const estimateTitle = SettingData?.[0]?.SettingDtlDetails?.find( @@ -106,7 +127,12 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan const PackageDetails = table2Data?.PackageDtl - console.log(PackageDetails, 'PackageDetailsPackageDetails',); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; let PaymentStatusSuccess = PaymentStatus?.filter(ps => ps.PaymentStatus === "S") const keysLength = Object.keys(table2Data ?? {}).length; @@ -208,7 +234,51 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> @@ -219,7 +289,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan {/*
*/}
- {((!estimatePrintHeader && table2Data?.OrderType === "E") ? '' :
+ {((!estimatePrintHeader && table2Data?.OrderType === "E") ? '' :
{GlobaldummyData && GlobalLogo ? image : null} {(base64Image && (PrintLogo?.SettingValue === "Y" || LogoField)) ? image : null} @@ -265,7 +335,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan {(TakeawayData?.length > 0 || GlobaldummyData) &&
{takeAwayPreference &&
TakeAway
} -
+
{GlobaldummyData ? GlobalSlNo &&
S.No
: SLNO &&
S.No
} {GlobaldummyData ? GlobalItem &&
ITEM
: Item &&
ITEM
} {GlobaldummyData ? GlobalHsnCode &&
HSN
: HsnCode &&
HSN
} @@ -279,7 +349,14 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
{dataChunk?.map((item, index) => ( -
+
{GlobaldummyData ? GlobalSlNo &&
{index + 1}
: SLNO &&
{chunkIndex * chunkSize + index + 1}
} {GlobaldummyData ? GlobalItem &&
{item?.ProdName}
: Item &&
@@ -292,7 +369,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan ))}
- : UomPrint?.SettingValue === 'Y' &&
+ : UomPrint?.SettingValue === 'Y' &&
({item?.Size ? item?.Size : "1"}{" "} {item?.SinglePc == "Y" ? "PCS" @@ -302,7 +379,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan )
)}   {item?.BrandName !== null ? item?.BrandName : ""}  -
+
{item?.ProductIdentifierDtls?.length > 0 ? item?.ProductIdentifierDtls.filter( (items) => @@ -355,7 +432,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan {(DineInData?.length > 0 && dinePreference) &&
Dine In
-
+
{GlobaldummyData ? GlobalSlNo &&
S.No
: SLNO &&
S.No
} {GlobaldummyData ? GlobalItem &&
ITEM
: Item &&
ITEM
} {GlobaldummyData ? GlobalHsnCode &&
HSN
: HsnCode &&
HSN
} @@ -369,12 +446,19 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
{dataChunk?.map((item, index) => ( -
+
{GlobaldummyData ? GlobalSlNo &&
{index + 1}
: SLNO &&
{chunkIndex * chunkSize + index + 1}
} {GlobaldummyData ? GlobalItem &&
{item?.ProdName}
: Item &&
{item?.ProdName}
- {UomPrint?.SettingValue === 'Y' &&
({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})
} + {UomPrint?.SettingValue === 'Y' &&
({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})
}
} {GlobaldummyData ? GlobalHsnCode &&
{item?.HSN}
: HsnCode &&
{item?.HSN}
} {GlobaldummyData ? GlobalMRP &&
{item?.MRP}
: MRP &&
{item?.SinglePc === 'Y' ? item?.Rate : item?.MRP}
} @@ -404,7 +488,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme && <> -
+
Items :
Qty :
@@ -719,6 +803,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > {(!estimatePrintHeader && table2Data?.OrderType === "E") ? '' :
@@ -804,7 +889,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan }} > <> -
+
Items :
Qty :
@@ -1114,6 +1199,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > {(!estimatePrintHeader && table2Data?.OrderType === "E") ? '' :
@@ -1183,7 +1269,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan :
- {((!estimatePrintHeader && table2Data?.OrderType === "E") ? '' :
+ {((!estimatePrintHeader && table2Data?.OrderType === "E") ? '' :
{GlobaldummyData && GlobalLogo ? image : null} {(base64Image && (PrintLogo?.SettingValue === "Y" || LogoField)) ? image : null} @@ -1225,7 +1311,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan {(TakeawayData?.length > 0 || GlobaldummyData) &&
{takeAwayPreference &&
TakeAway
} -
+
{GlobaldummyData ? GlobalSlNo &&
S.No
: SLNO &&
S.No
} {GlobaldummyData ? GlobalItem &&
ITEM
: Item &&
ITEM
} {GlobaldummyData ? GlobalHsnCode &&
HSN
: HsnCode &&
HSN
} @@ -1239,7 +1325,14 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
{(GlobaldummyData ? products : TakeawayData)?.map((item, index) => ( -
+
{GlobaldummyData ? GlobalSlNo &&
{index + 1}
: SLNO &&
{index + 1}
} {GlobaldummyData ? GlobalItem &&
{item?.ProdName}
: Item &&
@@ -1262,7 +1355,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan )
)}   {item?.BrandName !== null ? item?.BrandName : ""}  -
+
{item?.ProductIdentifierDtls?.length > 0 ? item?.ProductIdentifierDtls.filter( (items) => @@ -1315,7 +1408,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan {(DineInData?.length > 0 && dinePreference) &&
Dine In
-
+
{GlobaldummyData ? GlobalSlNo &&
S.No
: SLNO &&
S.No
} {GlobaldummyData ? GlobalItem &&
ITEM
: Item &&
ITEM
} {GlobaldummyData ? GlobalHsnCode &&
HSN
: HsnCode &&
HSN
} @@ -1329,12 +1422,19 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
{(GlobaldummyData ? products : DineInData)?.map((item, index) => ( -
+
{GlobaldummyData ? GlobalSlNo &&
{index + 1}
: SLNO &&
{index + 1}
} {GlobaldummyData ? GlobalItem &&
{item?.ProdName}
: Item &&
{item?.ProdName}
- { UomPrint?.SettingValue === 'Y' &&
({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})
} + {UomPrint?.SettingValue === 'Y' &&
({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})
}
} {GlobaldummyData ? GlobalHsnCode &&
{item?.HSN}
: HsnCode &&
{item?.HSN}
} {GlobaldummyData ? GlobalMRP &&
{item?.MRP}
: MRP &&
{item?.SinglePc === 'Y' ? item?.Rate : item?.MRP}
} @@ -1359,7 +1459,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
} {/*
*/} -
+
Items :
Qty :
@@ -1670,6 +1770,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > {(!estimatePrintHeader && table2Data?.OrderType === "E") ? '' :
From ec26930ac776f7ed00aa48c74ff9fae63037387d Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:30:34 +0530 Subject: [PATCH 04/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle4.jsx | 221 ++++++++++++++---- 1 file changed, 181 insertions(+), 40 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.jsx index 94f9589..39d75d9 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.jsx @@ -28,7 +28,17 @@ import { GlobalprintLogo, GlobalprintCredit, GlobalprintTax, - GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.scss'; import { @@ -101,6 +111,17 @@ const Printstyle4 = ({ const GlobalCashierName = useSelector(GlobalprintCashierName); const GlobalLogo = useSelector(GlobalprintLogo); const GlobalCredit = useSelector(GlobalprintCredit); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const SettingData = useSelector(PreferenceData); const totalGSTData = [ (OrderDetailGST || []).reduce( @@ -144,9 +165,13 @@ const Printstyle4 = ({ const paymentTypeUPI = PaymentStatus?.find( (ps) => ps.PaymentTypeName === 'UPI' ); - const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); - console.log(GlobalDiscount, Discount, 'Discount'); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; let TermsAndConditions = printDatas?.TermsandConditions; let SignatureImg = printDatas?.Signature; @@ -348,7 +373,51 @@ const Printstyle4 = ({ : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 5 : 10); - console.log(paginatedChunks, 'paginatedChunks') + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -409,7 +478,7 @@ const Printstyle4 = ({ ) : (
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}{' '} @@ -573,16 +641,17 @@ const Printstyle4 = ({ {GlobaldummyData ? GlobalSlNo && ( - # + # ) - : SLNO && #} + : SLNO && #} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( + {/* SL NO */} {GlobaldummyData @@ -864,16 +955,16 @@ const Printstyle4 = ({ {GlobaldummyData ? GlobalSlNo && ( - # + # ) - : SLNO && #} + : SLNO && #} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -1157,6 +1270,7 @@ const Printstyle4 = ({ borderBottom: '1px dashed #000', borderTop: '1px dashed #000', padding: '5px 0', + ...netAmountStyle }} > {' '} @@ -1894,6 +2008,7 @@ const Printstyle4 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -2134,6 +2249,7 @@ const Printstyle4 = ({ borderBottom: '1px dashed #000', borderTop: '1px dashed #000', padding: '5px 0', + ...netAmountStyle }} >
Sub Total
@@ -2848,6 +2964,7 @@ const Printstyle4 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -3057,7 +3174,7 @@ const Printstyle4 = ({ ) : (
- {/* {GlobaldummyData && GlobalLogo ? ( + {GlobaldummyData && GlobalLogo ? ( image - ) : null} */} - {/* {base64Image && + ) : null} + {base64Image && (PrintLogo?.SettingValue === 'Y' || LogoField) ? ( image - ) : null} */} + ) : null}
{GlobaldummyData - ? GlobalSlNo && # - : SLNO && #} + ? GlobalSlNo && # + : SLNO && #} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + Qty )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} @@ -3296,23 +3413,23 @@ const Printstyle4 = ({ )} */} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3322,7 +3439,18 @@ const Printstyle4 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3661,7 +3789,18 @@ const Printstyle4 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3854,6 +3993,7 @@ const Printstyle4 = ({ borderBottom: '1px dashed #000', borderTop: '1px dashed #000', padding: '5px 0', + ...netAmountStyle }} >
Sub Total
@@ -4588,6 +4728,7 @@ const Printstyle4 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( From 1c5da0e2013dec9ca97828ac6a6900c0c5a848b4 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:30:51 +0530 Subject: [PATCH 05/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle5.jsx | 137 +++++++++++++++--- 1 file changed, 115 insertions(+), 22 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.jsx index b66cb58..e893aa8 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.jsx @@ -29,6 +29,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import { GlobalUpiIDprint, @@ -102,6 +112,16 @@ const PrintStyle5 = ({ const SettingData = useSelector(PreferenceData); const GlobalCashierName = useSelector(GlobalprintCashierName); const GlobalLogo = useSelector(GlobalprintLogo); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const GlobalCredit = useSelector(GlobalprintCredit); const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( (i) => i.SettingIdName === 'PrintUom' @@ -134,8 +154,12 @@ const PrintStyle5 = ({ ); const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); - - console.log(GlobalDiscount, Discount, 'Discount'); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; let TermsAndConditions = printDatas?.TermsandConditions; let SignatureImg = printDatas?.Signature; @@ -319,7 +343,51 @@ const PrintStyle5 = ({ ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 2 : 7); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -377,7 +445,7 @@ const PrintStyle5 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName} @@ -532,6 +599,7 @@ const PrintStyle5 = ({ fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem', + ...tableHeaderStyle }} > {GlobaldummyData @@ -652,6 +720,11 @@ const PrintStyle5 = ({ fontWeight: '600', width: '100%', gap: '0.5rem', + ...(index % 2 === 0 && rowtypeStyle === "even" + ? tableBodyStyle + : index % 2 === 1 && rowtypeStyle === "odd" + ? tableBodyStyle + : {}) }} > {GlobaldummyData @@ -940,6 +1013,7 @@ const PrintStyle5 = ({ fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem', + ...tableHeaderStyle }} > {GlobaldummyData @@ -1060,6 +1134,11 @@ const PrintStyle5 = ({ fontWeight: '600', width: '100%', gap: '0.5rem', + ...(index % 2 === 0 && rowtypeStyle === "even" + ? tableBodyStyle + : index % 2 === 1 && rowtypeStyle === "odd" + ? tableBodyStyle + : {}) }} > {GlobaldummyData @@ -1444,7 +1523,7 @@ const PrintStyle5 = ({
{' '}
Amount
:
{' '} @@ -1777,6 +1856,7 @@ const PrintStyle5 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -2191,7 +2271,7 @@ const PrintStyle5 = ({
{' '}
Amount
:
{' '} @@ -2505,6 +2585,7 @@ const PrintStyle5 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -2711,7 +2792,7 @@ const PrintStyle5 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName} @@ -2857,6 +2937,7 @@ const PrintStyle5 = ({ fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem', + ...tableHeaderStyle }} > {GlobaldummyData @@ -2976,6 +3057,11 @@ const PrintStyle5 = ({ fontWeight: '600', width: '100%', gap: '0.5rem', + ...(index % 2 === 0 && rowtypeStyle === "even" + ? tableBodyStyle + : index % 2 === 1 && rowtypeStyle === "odd" + ? tableBodyStyle + : {}) }} > {GlobaldummyData @@ -3087,19 +3173,19 @@ const PrintStyle5 = ({
{/* 📏 Size + UOM */}
- - {UomPrint?.SettingValue === 'Y' && ( - <> - {item?.Size || "1"}{" "} - {item?.SinglePc === "Y" - ? "PCS" - : item?.Type !== "C" - ? item?.UomName - : "COMBO"} - - )} -
- + + {UomPrint?.SettingValue === 'Y' && ( + <> + {item?.Size || "1"}{" "} + {item?.SinglePc === "Y" + ? "PCS" + : item?.Type !== "C" + ? item?.UomName + : "COMBO"} + + )} +
+ {/* 🏷 Brand */} {item?.BrandName &&
{item.BrandName}
} @@ -3241,6 +3327,7 @@ const PrintStyle5 = ({ fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem', + ...tableHeaderStyle }} > {GlobaldummyData @@ -3360,6 +3447,11 @@ const PrintStyle5 = ({ fontWeight: '600', width: '100%', gap: '0.5rem', + ...(index % 2 === 0 && rowtypeStyle === "even" + ? tableBodyStyle + : index % 2 === 1 && rowtypeStyle === "odd" + ? tableBodyStyle + : {}) }} > {GlobaldummyData @@ -3683,7 +3775,7 @@ const PrintStyle5 = ({
{' '}
Amount
:
{' '} @@ -3992,6 +4084,7 @@ const PrintStyle5 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( From d9b2fbcbf94007feef3a0164a69c0c3c6046a70a Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:31:11 +0530 Subject: [PATCH 06/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle6.jsx | 248 ++++++++++++++---- 1 file changed, 194 insertions(+), 54 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.jsx index 9cc53e0..c14c2e5 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.jsx @@ -29,7 +29,17 @@ import { GlobalprintLogo, GlobalprintCredit, GlobalprintTax, - GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import { GlobalUpiIDprint, @@ -103,7 +113,17 @@ const Printstyle6 = ({ const GlobalLogo = useSelector(GlobalprintLogo); const GlobalCredit = useSelector(GlobalprintCredit); const SettingData = useSelector(PreferenceData); - const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); console.log(CashierNameField, "GlobaldummyData") const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( (i) => i.SettingIdName === 'PrintUom' @@ -146,7 +166,12 @@ const Printstyle6 = ({ (ps) => ps.PaymentStatus === 'S' && ps?.LastOrderTran === 'Y' ) - console.log(GlobalDiscount, Discount, 'Discount'); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; let TermsAndConditions = printDatas?.TermsandConditions; let SignatureImg = printDatas?.Signature; @@ -331,7 +356,51 @@ const Printstyle6 = ({ ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 5 : 13); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -389,7 +458,7 @@ const Printstyle6 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
) : null}
-
+
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -551,12 +620,12 @@ const Printstyle6 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) - : SLNO && S.No} + : SLNO && S.No} {GlobaldummyData ? ( (GlobalItem || GlobalQuantity) && ( - + {GlobaldummyData ? GlobalItem && 'ITEM /DES/' : 'ITEM /DES/'}{' '} @@ -566,7 +635,7 @@ const Printstyle6 = ({ ) ) : ( - + {GlobaldummyData ? GlobalItem && 'ITEM /DES/' : Item && 'ITEM /DES/'}{' '} @@ -579,6 +648,7 @@ const Printstyle6 = ({ ? GlobalHsnCode && ( {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -946,12 +1038,12 @@ const Printstyle6 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) - : SLNO && S.No} + : SLNO && S.No} {GlobaldummyData ? ( (GlobalItem || GlobalQuantity) && ( - + {GlobaldummyData ? GlobalItem && 'ITEM /DES/' : 'ITEM /DES/'}{' '} @@ -961,7 +1053,7 @@ const Printstyle6 = ({ ) ) : ( - + {GlobaldummyData ? GlobalItem && 'ITEM /DES/' : Item && 'ITEM /DES/'}{' '} @@ -974,6 +1066,7 @@ const Printstyle6 = ({ ? GlobalHsnCode && ( {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -1682,7 +1797,7 @@ const Printstyle6 = ({
)} -
+
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -2683,7 +2799,7 @@ const Printstyle6 = ({
)} -
+
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -3283,7 +3400,7 @@ const Printstyle6 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
) : null}
-
+
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -3436,11 +3553,11 @@ const Printstyle6 = ({ {GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData ? ( (GlobalItem || GlobalQuantity) && ( - + {GlobaldummyData ? GlobalItem && 'ITEM /DES/' : 'ITEM /DES/'}{' '} @@ -3448,7 +3565,7 @@ const Printstyle6 = ({ ) ) : ( - + {GlobaldummyData ? GlobalItem && 'ITEM /DES/' : Item && 'ITEM /DES/'}{' '} @@ -3459,68 +3576,68 @@ const Printstyle6 = ({ )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax % )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + AMt ) : Amount && ( - + Amt )} @@ -3530,7 +3647,18 @@ const Printstyle6 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3727,11 +3855,11 @@ const Printstyle6 = ({ {GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData ? ( (GlobalItem || GlobalQuantity) && ( - + {GlobaldummyData ? GlobalItem && 'ITEM /DES/' : 'ITEM /DES/'}{' '} @@ -3739,7 +3867,7 @@ const Printstyle6 = ({ ) ) : ( - + {GlobaldummyData ? GlobalItem && 'ITEM /DES/' : Item && 'ITEM /DES/'}{' '} @@ -3750,68 +3878,68 @@ const Printstyle6 = ({ )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax % )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + AMt ) : Amount && ( - + Amt )} @@ -3821,7 +3949,18 @@ const Printstyle6 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -4380,7 +4519,7 @@ const Printstyle6 = ({
)} -
+
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( From 4a27698a59fb97df691ae85e4534499a8e9b33ec Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:31:29 +0530 Subject: [PATCH 07/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle7.jsx | 298 ++++++++++++------ 1 file changed, 210 insertions(+), 88 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.jsx index e31ad52..5300bb6 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.jsx @@ -26,6 +26,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import Logo from '../../../../Images/Logo.jpg'; import { @@ -99,7 +109,23 @@ const PrintStyle7 = ({ const GlobalLogo = useSelector(GlobalprintLogo); const GlobalCredit = useSelector(GlobalprintCredit); const SettingData = useSelector(PreferenceData); - const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( (i) => i.SettingIdName === 'PrintUom' )?.[0]; @@ -349,7 +375,51 @@ const PrintStyle7 = ({ ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 5 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -408,7 +478,7 @@ const PrintStyle7 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{/*
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
*/}
{' '} @@ -575,63 +644,64 @@ const PrintStyle7 = ({ {GlobaldummyData ? GlobalSlNo && ( - S + S ) : SLNO == true && ( - S + S )} {GlobaldummyData - ? GlobalItem && Item - : Item == true && Item} + ? GlobalItem && Item + : Item == true && Item} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode == true && ( - HSN + HSN )} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity == true && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - MRP + MRP ) : MRP == true && ( - MRP + MRP )} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) : Rate == true && ( - Rate + Rate )} {GlobaldummyData ? GlobalDiscount && ( - Dis + Dis ) : Discount == true && ( - Dis + Dis )} {GlobaldummyData ? GlobalTax && ( - Tax % + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - Tax % + Tax % )} {GlobaldummyData ? GlobalAmount && ( {dataChunk?.map((item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -719,11 +801,11 @@ const PrintStyle7 = ({ {(item?.ProductIdentifierDtls ?? []) .find(items => items.SerialNumber || items.IMEI1 || items.IMEI2)?.Description && ( -
- {(item?.ProductIdentifierDtls ?? []) - .find(items => items.SerialNumber || items.IMEI1 || items.IMEI2).Description} -
- )} +
+ {(item?.ProductIdentifierDtls ?? []) + .find(items => items.SerialNumber || items.IMEI1 || items.IMEI2).Description} +
+ )}
)} @@ -836,63 +918,64 @@ const PrintStyle7 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) : SLNO == true && ( - S.NO + S.NO )} {GlobaldummyData - ? GlobalItem && Item - : Item == true && Item} + ? GlobalItem && Item + : Item == true && Item} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode == true && ( - HSN + HSN )} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity == true && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - MRP + MRP ) : MRP == true && ( - MRP + MRP )} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) : Rate == true && ( - Rate + Rate )} {GlobaldummyData ? GlobalDiscount && ( - Dis + Dis ) : Discount == true && ( - Dis + Dis )} {GlobaldummyData ? GlobalTax && ( - Tax % + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - Tax % + Tax % )} {GlobaldummyData ? GlobalAmount && ( {dataChunk?.map((item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -1436,6 +1531,7 @@ const PrintStyle7 = ({ justifyContent: 'center', fontSize: '16px', fontWeight: '600', + ...netAmountStyle }} > Amount : ₹ @@ -1771,6 +1867,7 @@ const PrintStyle7 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -2343,6 +2440,7 @@ const PrintStyle7 = ({ justifyContent: 'center', fontSize: '16px', fontWeight: '600', + ...netAmountStyle }} > Amount : ₹ @@ -2676,6 +2774,7 @@ const PrintStyle7 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -2885,7 +2984,7 @@ const PrintStyle7 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{' '} @@ -3052,58 +3150,58 @@ const PrintStyle7 = ({ {GlobaldummyData - ? GlobalSlNo && S.No + ? GlobalSlNo && S.No : SLNO == true && ( - S.No + S.No )} {GlobaldummyData ? GlobalItem && ( - + Item ) - : Item == true && Item} + : Item == true && Item} {GlobaldummyData - ? GlobalHsnCode && HSN + ? GlobalHsnCode && HSN : HsnCode == true && ( - HSN + HSN )} {GlobaldummyData - ? GlobalQuantity && Qty + ? GlobalQuantity && Qty : Quantity == true && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData - ? GlobalMRP && MRP + ? GlobalMRP && MRP : MRP == true && ( - MRP + MRP )} {GlobaldummyData - ? GlobalRate && Rate + ? GlobalRate && Rate : Rate == true && ( - Rate + Rate )} {GlobaldummyData - ? GlobalDiscount && Dis + ? GlobalDiscount && Dis : Discount == true && ( - Dis + Dis )} {GlobaldummyData ? GlobalTax && ( - Tax % + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - Tax % + Tax % )} {GlobaldummyData ? GlobalAmount && ( - Amt + Amt ) : Amount == true && ( - + Amt )} @@ -3112,7 +3210,18 @@ const PrintStyle7 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -3176,12 +3285,12 @@ const PrintStyle7 = ({ {(item?.ProductIdentifierDtls ?? []).find( items => items.SerialNumber || items.IMEI1 || items.IMEI2 )?.Description && ( -
- {(item?.ProductIdentifierDtls ?? []).find( - items => items.SerialNumber || items.IMEI1 || items.IMEI2 - ).Description} -
- )} +
+ {(item?.ProductIdentifierDtls ?? []).find( + items => items.SerialNumber || items.IMEI1 || items.IMEI2 + ).Description} +
+ )}
)} @@ -3293,64 +3402,64 @@ const PrintStyle7 = ({ {GlobaldummyData - ? GlobalSlNo && S + ? GlobalSlNo && S : SLNO == true && ( - S + S )} {GlobaldummyData - ? GlobalItem && Item - : Item == true && Item} + ? GlobalItem && Item + : Item == true && Item} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode == true && ( - HSN + HSN )} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity == true && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData - ? GlobalMRP && MRP + ? GlobalMRP && MRP : MRP == true && ( - MRP + MRP )} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) : Rate == true && ( - Rate + Rate )} {GlobaldummyData ? GlobalDiscount && ( - Dis + Dis ) : Discount == true && ( - Dis + Dis )} {GlobaldummyData ? GlobalTax && ( - Tax % + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - Tax % + Tax % )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount == true && ( - + Amt )} @@ -3359,7 +3468,18 @@ const PrintStyle7 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -3848,6 +3968,7 @@ const PrintStyle7 = ({ justifyContent: 'center', fontSize: '16px', fontWeight: '600', + ...netAmountStyle }} > Amount : ₹ @@ -4162,6 +4283,7 @@ const PrintStyle7 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( From d4a94da9129f56ef14c65e45382f789dcfa74ae4 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:31:47 +0530 Subject: [PATCH 08/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle8.jsx | 249 ++++++++++++++---- 1 file changed, 198 insertions(+), 51 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.jsx index 63a4ce3..37887f5 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.jsx @@ -29,6 +29,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import Logo from '../../../../Images/Logo.jpg'; import { @@ -150,6 +160,22 @@ const Printstyle8 = ({ ); const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; console.log(GlobalDiscount, Discount, 'Discount'); @@ -361,7 +387,51 @@ const Printstyle8 = ({ ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 5 : 13); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -419,7 +489,7 @@ const Printstyle8 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{/*

{table2Data?.BrName}

*/}
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName} @@ -562,6 +631,7 @@ const Printstyle8 = ({ ? GlobalSlNo && ( )} {GlobaldummyData - ? GlobalItem && Dis - : Item && Des} + ? GlobalItem && Dis + : Item && Des} {GlobaldummyData ? GlobalHsnCode && ( {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -931,6 +1027,7 @@ const Printstyle8 = ({ ? GlobalSlNo && ( )} {GlobaldummyData - ? GlobalItem && Dis - : Item && Des} + ? GlobalItem && Dis + : Item && Des} {GlobaldummyData ? GlobalHsnCode && ( {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -1256,7 +1379,7 @@ const Printstyle8 = ({ FormatTheme && ( <>
-
+
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -2262,7 +2386,7 @@ const Printstyle8 = ({ > <>
-
+
{!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -3234,7 +3359,7 @@ const Printstyle8 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{/*

{table2Data?.BrName}

*/}
{GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName} @@ -3370,95 +3494,95 @@ const Printstyle8 = ({ {GlobaldummyData ? GlobalSlNo && ( - + S.No ) : SLNO && ( - + S.No )} {GlobaldummyData ? GlobalItem && ( - Dis + Dis ) - : Item && Des} + : Item && Des} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rt )} {GlobaldummyData ? GlobalDiscount && ( - + (%) ) : Discount && ( - + (%) )} {GlobaldummyData ? GlobalTax && ( - + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax % )} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3468,7 +3592,18 @@ const Printstyle8 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -3632,93 +3767,93 @@ const Printstyle8 = ({ {GlobaldummyData ? GlobalSlNo && ( - + S.No ) : SLNO && ( - + S.No )} {GlobaldummyData - ? GlobalItem && Dis - : Item && Des} + ? GlobalItem && Dis + : Item && Des} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rt )} {GlobaldummyData ? GlobalDiscount && ( - + (%) ) : Discount && ( - + (%) )} {GlobaldummyData ? GlobalTax && ( - + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax % )} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3728,7 +3863,18 @@ const Printstyle8 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -3878,7 +4024,7 @@ const Printstyle8 = ({ )}
-
+
Items
:
@@ -4590,6 +4736,7 @@ const Printstyle8 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( From 5470f019f3215856a044e09bfe2777066b2ae405 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:32:06 +0530 Subject: [PATCH 09/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle9.jsx | 282 ++++++++++++------ 1 file changed, 199 insertions(+), 83 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.jsx index aa95551..076051a 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.jsx @@ -29,6 +29,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import Logo from '../../../../Images/Logo.jpg'; import { @@ -144,7 +154,23 @@ const PrintStyle9 = ({ (ps) => ps.PaymentStatus === 'S' && ps?.LastOrderTran === 'Y' ); - const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; let TermsAndConditions = printDatas?.TermsandConditions; let SignatureImg = printDatas?.Signature; let Notestext = printDatas?.Notes; @@ -351,7 +377,51 @@ const PrintStyle9 = ({ ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 5 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -409,7 +479,7 @@ const PrintStyle9 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
@@ -582,25 +651,25 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) - : SLNO && S.No} + : SLNO && S.No} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -608,14 +677,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -623,14 +692,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -638,14 +707,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -653,7 +722,7 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalTax && ( Tax % @@ -661,7 +730,7 @@ const PrintStyle9 = ({ : Tax && table2Data?.OrderType !== 'E' && ( Tax % @@ -669,14 +738,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -684,14 +753,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -701,7 +770,18 @@ const PrintStyle9 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -895,25 +975,25 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.No + S.No ) - : SLNO && S.No} + : SLNO && S.No} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -921,14 +1001,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -936,14 +1016,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -951,14 +1031,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -966,7 +1046,7 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalTax && ( Tax % @@ -974,7 +1054,7 @@ const PrintStyle9 = ({ : Tax && table2Data?.OrderType !== 'E' && ( Tax % @@ -982,14 +1062,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -997,14 +1077,14 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -1014,7 +1094,18 @@ const PrintStyle9 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -1242,6 +1333,7 @@ const PrintStyle9 = ({ style={{ display: 'flex', justifyContent: 'space-between', + ...netAmountStyle }} >
Net Amount:
@@ -1922,6 +2014,7 @@ const PrintStyle9 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -2245,7 +2338,7 @@ const PrintStyle9 = ({
Net Amount:
@@ -2903,6 +2996,7 @@ const PrintStyle9 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( @@ -3118,7 +3212,7 @@ const PrintStyle9 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
@@ -3296,89 +3389,89 @@ const PrintStyle9 = ({ {GlobaldummyData ? GlobalSlNo && ( - + S.No ) - : SLNO && S.No} + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax % )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3388,7 +3481,18 @@ const PrintStyle9 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3546,86 +3650,86 @@ const PrintStyle9 = ({ {GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax % ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax % )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3635,7 +3739,18 @@ const PrintStyle9 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3846,7 +3961,7 @@ const PrintStyle9 = ({
-
+
Net Amount:
{GlobaldummyData @@ -4483,6 +4598,7 @@ const PrintStyle9 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( From 47745687eed37592a6166ddd98e1cbad582f8eb2 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:32:27 +0530 Subject: [PATCH 10/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle10.jsx | 280 +++++++++++++----- 1 file changed, 198 insertions(+), 82 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx index cf0ae0d..6e26caf 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx @@ -28,6 +28,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import { GlobalUpiIDprint, @@ -131,6 +141,22 @@ const PrintStyle10 = ({ (ps) => ps.PaymentTypeName === 'UPI' ); const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; const isEditedBill = PaymentStatus?.some((payment) => { const type = payment?.AdjustmentType?.toLowerCase(); @@ -349,7 +375,51 @@ const PrintStyle10 = ({ ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 5 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -407,7 +477,7 @@ const PrintStyle10 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{GlobalLogo && GlobaldummyData ? ( @@ -433,7 +503,6 @@ const PrintStyle10 = ({ className="ShopName" style={{ fontWeight: '600', - color: SelectedHeaderColor, }} > {GlobaldummyData @@ -541,25 +610,25 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.N + S.N ) - : SLNO && S.N} + : SLNO && S.N} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -567,14 +636,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -582,14 +651,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -597,14 +666,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -612,7 +681,7 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalTax && ( Tax %{' '} @@ -620,7 +689,7 @@ const PrintStyle10 = ({ : Tax && table2Data?.OrderType !== 'E' && ( Tax %{' '} @@ -628,14 +697,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -643,14 +712,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -660,7 +729,18 @@ const PrintStyle10 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( {GlobaldummyData ? GlobalSlNo && ( - S.N + S.N ) - : SLNO && S.N} + : SLNO && S.N} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -898,14 +978,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -913,14 +993,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -928,14 +1008,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -943,7 +1023,7 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalTax && ( Tax %{' '} @@ -951,7 +1031,7 @@ const PrintStyle10 = ({ : Tax && table2Data?.OrderType !== 'E' && ( Tax %{' '} @@ -959,14 +1039,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -974,14 +1054,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -991,7 +1071,18 @@ const PrintStyle10 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -1898,6 +1989,7 @@ const PrintStyle10 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -2118,7 +2210,7 @@ const PrintStyle10 = ({ flexDirection: 'column', rowGap: '0.1rem', fontSize: 'clamp(0.7rem, 2.5vw, 1rem)', - + ...netAmountStyle, fontWeight: '600', }} > @@ -2840,6 +2932,7 @@ const PrintStyle10 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -3036,7 +3129,7 @@ const PrintStyle10 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{GlobalLogo && GlobaldummyData ? ( @@ -3060,7 +3153,7 @@ const PrintStyle10 = ({
{GlobaldummyData ? 'ABC Shop' : table2Data?.BrName}{' '}
@@ -3152,86 +3245,86 @@ const PrintStyle10 = ({ {GlobaldummyData - ? GlobalSlNo && S.N - : SLNO && S.N} + ? GlobalSlNo && S.N + : SLNO && S.N} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax %{' '} ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax %{' '} )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3241,7 +3334,18 @@ const PrintStyle10 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( {GlobaldummyData - ? GlobalSlNo && S.N - : SLNO && S.N} + ? GlobalSlNo && S.N + : SLNO && S.N} {GlobaldummyData ? GlobalItem && Item - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) @@ -3511,35 +3615,35 @@ const PrintStyle10 = ({ )} {GlobaldummyData ? GlobalTax && ( - + Tax %{' '} ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax %{' '} )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3549,7 +3653,18 @@ const PrintStyle10 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && (
@@ -3739,7 +3854,7 @@ const PrintStyle10 = ({
{Number(DineInTotal).toFixed(2)}
)} -
+
Amount :
{GlobaldummyData @@ -4381,6 +4496,7 @@ const PrintStyle10 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData From 7245aa95b4fc31867da2e06ba43157345c6cdc27 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:32:45 +0530 Subject: [PATCH 11/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle11.jsx | 280 +++++++++++++----- 1 file changed, 200 insertions(+), 80 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.jsx index 00f92e9..3de57a1 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.jsx @@ -30,6 +30,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import { GlobalUpiIDprint, @@ -105,6 +115,22 @@ const PrintStyle11 = ({ const GlobalLogo = useSelector(GlobalprintLogo); const GlobalCredit = useSelector(GlobalprintCredit); const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( (i) => i.SettingIdName === 'PrintUom' )?.[0]; @@ -333,7 +359,51 @@ const PrintStyle11 = ({ ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 5 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -391,8 +461,8 @@ const PrintStyle11 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
-
+
+
{GlobalLogo && GlobaldummyData ? ( {GlobaldummyData ? GlobalSlNo && ( - S.N + S.N ) - : SLNO && S.N} + : SLNO && S.N} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {' '} {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -558,14 +628,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -573,14 +643,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -588,14 +658,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -603,7 +673,7 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalTax && ( Tax %{' '} @@ -611,7 +681,7 @@ const PrintStyle11 = ({ : Tax && table2Data?.OrderType !== 'E' && ( Tax %{' '} @@ -619,14 +689,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -634,14 +704,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -651,7 +721,18 @@ const PrintStyle11 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -856,25 +937,25 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.N + S.N ) - : SLNO && S.N} + : SLNO && S.N} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {' '} {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -883,14 +964,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -898,14 +979,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -913,14 +994,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -928,7 +1009,7 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalTax && ( Tax %{' '} @@ -936,7 +1017,7 @@ const PrintStyle11 = ({ : Tax && table2Data?.OrderType !== 'E' && ( Tax %{' '} @@ -944,14 +1025,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -959,14 +1040,14 @@ const PrintStyle11 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -976,7 +1057,18 @@ const PrintStyle11 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -1191,6 +1283,7 @@ const PrintStyle11 = ({ textAlign: 'right', fontWeight: '600', fontSize: '18px', + ...netAmountStyle }} > Amount : @@ -1859,6 +1952,7 @@ const PrintStyle11 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -2161,6 +2255,7 @@ const PrintStyle11 = ({ textAlign: 'right', fontWeight: '600', fontSize: '18px', + ...netAmountStyle }} > Amount : @@ -2812,6 +2907,7 @@ const PrintStyle11 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -3016,8 +3112,8 @@ const PrintStyle11 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
-
+
+
{GlobalLogo && GlobaldummyData ? ( {GlobaldummyData - ? GlobalSlNo && S.N - : SLNO && S.N} + ? GlobalSlNo && S.N + : SLNO && S.N} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {' '} {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax %{' '} ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax %{' '} )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3245,7 +3341,18 @@ const PrintStyle11 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3466,87 +3573,87 @@ const PrintStyle11 = ({ {GlobaldummyData - ? GlobalSlNo && S.N - : SLNO && S.N} + ? GlobalSlNo && S.N + : SLNO && S.N} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {' '} {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax %{' '} ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax %{' '} )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3556,7 +3663,18 @@ const PrintStyle11 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3752,6 +3870,7 @@ const PrintStyle11 = ({ textAlign: 'right', fontWeight: '600', fontSize: '18px', + ...netAmountStyle }} > Amount : @@ -4323,6 +4442,7 @@ const PrintStyle11 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData From d5c5365a098bc21b5013240ced107e5093a0e9a8 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:33:05 +0530 Subject: [PATCH 12/16] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle12.jsx | 279 +++++++++++++----- 1 file changed, 201 insertions(+), 78 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.jsx index e85dfcf..b065b7e 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.jsx @@ -31,6 +31,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import { GlobalUpiIDprint, @@ -104,6 +114,25 @@ const Printstyle12 = ({ const GlobalCredit = useSelector(GlobalprintCredit); const SettingData = useSelector(PreferenceData); const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; + const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( + (i) => i.SettingIdName === 'PrintUom' + )?.[0]; const estimatePrintHeader = SettingData?.[0]?.SettingDtlDetails?.find( (setting) => @@ -475,6 +504,51 @@ const Printstyle12 = ({ await printDiv('PrintStyle12', style12, 'FontApply'); }; + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? ( @@ -736,74 +810,85 @@ const Printstyle12 = ({ {GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Description - : Item && Des} + ? GlobalItem && Description + : Item && Des} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity && ( - + {' '} {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - MRP + MRP ) : MRP && ( - MRP + MRP )} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) : Rate && ( - Rate + Rate )} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode && ( - HSN + HSN )} {GlobaldummyData ? GlobalDiscount && ( - (%) + (%) ) : Discount && ( - (%) + (%) )} {GlobaldummyData ? GlobalTax && ( - + Tax (%) ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax (%) )} {GlobaldummyData ? GlobalAmount && ( - Amt + Amt ) : Amount && ( - Amt + Amt )} {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -1022,74 +1107,85 @@ const Printstyle12 = ({ {GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Description - : Item && Des} + ? GlobalItem && Description + : Item && Des} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity && ( - + {' '} {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - MRP + MRP ) : MRP && ( - MRP + MRP )} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) : Rate && ( - Rate + Rate )} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode && ( - HSN + HSN )} {GlobaldummyData ? GlobalDiscount && ( - (%) + (%) ) : Discount && ( - (%) + (%) )} {GlobaldummyData ? GlobalTax && ( - + Tax (%) ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax (%) )} {GlobaldummyData ? GlobalAmount && ( - Amt + Amt ) : Amount && ( - Amt + Amt )} {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && ( @@ -1374,6 +1470,7 @@ const Printstyle12 = ({ style={{ display: 'flex', justifyContent: 'space-between', + ...netAmountStyle }} >
@@ -2008,6 +2105,7 @@ const Printstyle12 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -2366,6 +2464,7 @@ const Printstyle12 = ({ style={{ display: 'flex', justifyContent: 'space-between', + ...netAmountStyle }} >
@@ -2995,6 +3094,7 @@ const Printstyle12 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -3190,7 +3290,7 @@ const Printstyle12 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{/*

{table2Data?.BrName}

*/}
{GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Description - : Item && Des} + ? GlobalItem && Description + : Item && Des} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity && ( - + {' '} {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - MRP + MRP ) - : MRP && MRP} + : MRP && MRP} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) - : Rate && Rate} + : Rate && Rate} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode && ( - HSN + HSN )} {GlobaldummyData ? GlobalDiscount && ( - (%) + (%) ) : Discount && ( - (%) + (%) )} {GlobaldummyData ? GlobalTax && ( - Tax (%) + Tax (%) ) : Tax && table2Data?.OrderType !== 'E' && ( - Tax (%) + Tax (%) )} {GlobaldummyData ? GlobalAmount && ( - Amt + Amt ) - : Amount && Amt} + : Amount && Amt} {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3663,65 +3774,76 @@ const Printstyle12 = ({ {GlobaldummyData - ? GlobalSlNo && S.No - : SLNO && S.No} + ? GlobalSlNo && S.No + : SLNO && S.No} {GlobaldummyData - ? GlobalItem && Description - : Item && Des} + ? GlobalItem && Description + : Item && Des} {GlobaldummyData ? GlobalQuantity && ( - Qty + Qty ) : Quantity && ( - + {' '} {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalMRP && ( - MRP + MRP ) - : MRP && MRP} + : MRP && MRP} {GlobaldummyData ? GlobalRate && ( - Rate + Rate ) - : Rate && Rate} + : Rate && Rate} {GlobaldummyData ? GlobalHsnCode && ( - HSN + HSN ) : HsnCode && ( - HSN + HSN )} {GlobaldummyData ? GlobalDiscount && ( - (%) + (%) ) : Discount && ( - (%) + (%) )} {GlobaldummyData ? GlobalTax && ( - Tax (%) + Tax (%) ) : Tax && table2Data?.OrderType !== 'E' && ( - Tax (%) + Tax (%) )} {GlobaldummyData ? GlobalAmount && ( - Amt + Amt ) - : Amount && Amt} + : Amount && Amt} {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && {index + 1} : SLNO && {index + 1}} @@ -3972,7 +4094,7 @@ const Printstyle12 = ({ )} )} -
+
Amount
:
{GlobaldummyData From ec1781112294ef04cf985f45321f984ef67af0b7 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:33:23 +0530 Subject: [PATCH 13/16] Implement dynamic header and table color functionality --- .../PrintTemplates/A4/PrintA4Style11.jsx | 167 ++++++++++++++++-- 1 file changed, 153 insertions(+), 14 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/A4/PrintA4Style11.jsx b/src/Pages/BookingScreen/PrintTemplates/A4/PrintA4Style11.jsx index ac6ec06..524e9cf 100644 --- a/src/Pages/BookingScreen/PrintTemplates/A4/PrintA4Style11.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/A4/PrintA4Style11.jsx @@ -32,6 +32,17 @@ import { GlobalPritdummyData, GlobalSignatureImage, GlobalthemeFormat, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import signature from '../../../../Images/signatureimage.jpg'; import QRCode from 'react-qr-code'; @@ -102,6 +113,23 @@ const PrintA4Style11 = ({ const GlobalLogo = useSelector(GlobalprintLogo); const GlobalCredit = useSelector(GlobalprintCredit); const SettingData = useSelector(PreferenceData); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter( (i) => i.SettingIdName === 'PrintUom' )?.[0]; @@ -279,6 +307,51 @@ const PrintA4Style11 = ({ : 0; const shouldFooterBeOnNewPage = lastChunkRows > 6; + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return (
- + {/* Placeholder for the fixed-position header */}
@@ -520,6 +594,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > S.No @@ -530,20 +605,22 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > S.No )} {GlobaldummyData - ? GlobalItem && Item - : Item == true && Item} + ? GlobalItem && Item + : Item == true && Item} {GlobaldummyData ? GlobalHsnCode && ( HSN @@ -554,6 +631,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > HSN @@ -565,6 +643,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > Qty @@ -575,6 +654,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -586,6 +666,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > MRP @@ -596,6 +677,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > MRP @@ -607,6 +689,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > Rate @@ -617,6 +700,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > Rate @@ -628,6 +712,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > Dis{' '} @@ -638,6 +723,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > Dis{' '} @@ -649,6 +735,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > Tax % @@ -660,6 +747,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle, }} > Tax % @@ -671,6 +759,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'right', + ...tableHeaderStyle, }} > Amt @@ -681,6 +770,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'right', + ...tableHeaderStyle, }} > Amt @@ -691,7 +781,18 @@ const PrintA4Style11 = ({ {dataChunk?.map((item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -944,7 +1045,8 @@ const PrintA4Style11 = ({ fontSize: '25px', fontWeight: '600', padding: '10px', - backgroundColor: '#fdc716', + // backgroundColor: '#fdc716', + ...netAmountStyle, textAlign: 'center', }} > @@ -1323,7 +1425,8 @@ const PrintA4Style11 = ({ >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}
)} - {GlobaldummyData +
+ {GlobaldummyData ? GlobalIsnotes && (

@@ -1505,6 +1608,7 @@ const PrintA4Style11 = ({

)}
+
)} @@ -1576,6 +1680,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > S.No @@ -1586,6 +1691,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > S.No @@ -1600,6 +1706,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > HSN @@ -1610,6 +1717,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > HSN @@ -1621,6 +1729,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > Qty @@ -1631,6 +1740,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -1642,6 +1752,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > MRP @@ -1652,6 +1763,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > MRP @@ -1663,6 +1775,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > Rate @@ -1673,6 +1786,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > Rate @@ -1684,6 +1798,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > Dis{' '} @@ -1694,6 +1809,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > Dis{' '} @@ -1705,6 +1821,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > Tax % @@ -1716,6 +1833,7 @@ const PrintA4Style11 = ({ style={{ width: '8%', textAlign: 'center', + ...tableHeaderStyle }} > Tax % @@ -1728,6 +1846,7 @@ const PrintA4Style11 = ({ width: '8%', textAlign: 'center', textAlign: 'right', + ...tableHeaderStyle }} > Amt @@ -1739,6 +1858,7 @@ const PrintA4Style11 = ({ width: '8%', textAlign: 'center', textAlign: 'right', + ...tableHeaderStyle }} > Amt @@ -1749,7 +1869,18 @@ const PrintA4Style11 = ({ {dataChunk?.map((item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -1975,7 +2106,8 @@ const PrintA4Style11 = ({ fontSize: '25px', fontWeight: '600', padding: '10px', - backgroundColor: '#fdc716', + // backgroundColor: '#fdc716', + ...netAmountStyle, textAlign: 'center', }} > @@ -2352,7 +2484,8 @@ const PrintA4Style11 = ({ >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}
)} - {GlobaldummyData +
+ {GlobaldummyData ? GlobalIsnotes && (

@@ -2534,6 +2667,7 @@ const PrintA4Style11 = ({

)}
+
)}
@@ -2631,7 +2765,8 @@ const PrintA4Style11 = ({ fontSize: '25px', fontWeight: '600', padding: '10px', - backgroundColor: '#fdc716', + // backgroundColor: '#fdc716', + ...netAmountStyle, textAlign: 'center', }} > @@ -2945,7 +3080,8 @@ const PrintA4Style11 = ({ >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}
)} - {GlobaldummyData +
+ {GlobaldummyData ? GlobalIsnotes && (

@@ -3116,6 +3252,7 @@ const PrintA4Style11 = ({ )}

+
)}
))} @@ -3198,7 +3335,8 @@ const PrintA4Style11 = ({ fontSize: '25px', fontWeight: '600', padding: '10px', - backgroundColor: '#fdc716', + // backgroundColor: '#fdc716', + ...netAmountStyle, textAlign: 'center', }} > @@ -3494,7 +3632,8 @@ const PrintA4Style11 = ({ >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}
)} - {GlobaldummyData +
+ {GlobaldummyData ? GlobalIsnotes && (

@@ -3513,7 +3652,6 @@ const PrintA4Style11 = ({

)} -
+
)}
From 122260c95bf86d57c68e2d21b68ba446c8209404 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:33:38 +0530 Subject: [PATCH 14/16] Implement dynamic header and table color functionality --- .../PrintTemplates/A4/PrintStyleA5.jsx | 772 ++++++++++-------- 1 file changed, 441 insertions(+), 331 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/A4/PrintStyleA5.jsx b/src/Pages/BookingScreen/PrintTemplates/A4/PrintStyleA5.jsx index 9a13a93..b0b2e73 100644 --- a/src/Pages/BookingScreen/PrintTemplates/A4/PrintStyleA5.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/A4/PrintStyleA5.jsx @@ -32,6 +32,17 @@ import { GlobalPritdummyData, GlobalSignatureImage, GlobalthemeFormat, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import signature from '../../../../Images/signatureimage.jpg'; import Logo from '../../../../Images/Logo.jpg'; @@ -102,6 +113,23 @@ const PrintA5Style11 = ({ const GlobalLogo = useSelector(GlobalprintLogo); const GlobalCredit = useSelector(GlobalprintCredit); const SettingData = useSelector(PreferenceData); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; const estimatePrintHeader = SettingData?.[0]?.SettingDtlDetails?.find( (setting) => @@ -276,6 +304,51 @@ const PrintA5Style11 = ({ : 0; const shouldFooterBeOnNewPage = lastChunkRows > 6; + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return (
{' '} @@ -508,6 +582,7 @@ const PrintA5Style11 = ({ style={{ background: '#373B44', color: '#fff', + ...tableHeaderStyle, }} > {GlobaldummyData @@ -688,7 +763,18 @@ const PrintA5Style11 = ({ {dataChunk?.map((item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -931,7 +1017,8 @@ const PrintA5Style11 = ({ fontSize: '25px', fontWeight: '600', padding: '10px', - backgroundColor: '#fdc716', + // backgroundColor: '#fdc716', + ...netAmountStyle, textAlign: 'center', }} > @@ -1249,187 +1336,189 @@ const PrintA5Style11 = ({ >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}
)} - {GlobaldummyData - ? GlobalIsnotes && ( -
-

- Notes : 10 days Return policy -

- -
-
- ) - : Notestext && ( -
-

- {Notestext} -

- -
-
- )} - -
+
{GlobaldummyData - ? GlobaltermsAndConditions && ( -
-

- Terms & Conditions + ? GlobalIsnotes && ( +

+

+ Notes : 10 days Return policy

-
    -
  1. - Once goods are sold, they are - not exchangeable or refundable. -
    2. -
  2. - Please check the product before - leaving the counter. -
    3. -
+ +
) - : TermsnAdCondition == true && - TermsAndConditions?.length > 0 && ( -
+ : Notestext && ( +

- Terms & Conditions + {Notestext}

-
    - {TermsAndConditions?.map( - (item) => ( -
  1. - {item?.TermsandConditions} -
    2. - ) - )} - {/*
  2. Please check the product before leaving the counter.
    3. */} -
+ +
)} - {GlobaldummyData - ? GlobalSignature && ( -
-

+ {GlobaldummyData + ? GlobaltermsAndConditions && ( +

- Signature -

- + Terms & Conditions +

+
    +
  1. + Once goods are sold, they are + not exchangeable or refundable. +
    2. +
  2. + Please check the product before + leaving the counter. +
    3. +
+
+ ) + : TermsnAdCondition == true && + TermsAndConditions?.length > 0 && ( +
-
- ) - : Signature == true && ( -
-

- Signature -

- + Terms & Conditions +

+
    + {TermsAndConditions?.map( + (item) => ( +
  1. + {item?.TermsandConditions} +
    2. + ) + )} + {/*
  2. Please check the product before leaving the counter.
    3. */} +
+
+ )} + + {GlobaldummyData + ? GlobalSignature && ( +
-
- )} + > +

+ Signature +

+ +
+ ) + : Signature == true && ( +
+

+ Signature +

+ +
+ )} +
)} @@ -1494,6 +1583,7 @@ const PrintA5Style11 = ({ style={{ background: '#373B44', color: '#fff', + ...tableHeaderStyle }} > {GlobaldummyData @@ -1674,7 +1764,18 @@ const PrintA5Style11 = ({ {dataChunk?.map((item, index) => ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -1893,7 +1994,8 @@ const PrintA5Style11 = ({ fontSize: '25px', fontWeight: '600', padding: '10px', - backgroundColor: '#fdc716', + // backgroundColor: '#fdc716', + ...netAmountStyle, textAlign: 'center', }} > @@ -2209,187 +2311,189 @@ const PrintA5Style11 = ({ >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}
)} - {GlobaldummyData - ? GlobalIsnotes && ( -
-

- Notes : 10 days Return policy -

- -
-
- ) - : Notestext && ( -
-

- {Notestext} -

- -
-
- )} - -
+
{GlobaldummyData - ? GlobaltermsAndConditions && ( -
-

- Terms & Conditions + ? GlobalIsnotes && ( +

+

+ Notes : 10 days Return policy

-
    -
  1. - Once goods are sold, they are - not exchangeable or refundable. -
    2. -
  2. - Please check the product before - leaving the counter. -
    3. -
+ +
) - : TermsnAdCondition == true && - TermsAndConditions?.length > 0 && ( -
+ : Notestext && ( +

- Terms & Conditions + {Notestext}

-
    - {TermsAndConditions?.map( - (item) => ( -
  1. - {item?.TermsandConditions} -
    2. - ) - )} - {/*
  2. Please check the product before leaving the counter.
    3. */} -
+ +
)} - {GlobaldummyData - ? GlobalSignature && ( -
-

+ {GlobaldummyData + ? GlobaltermsAndConditions && ( +

- Signature -

- + Terms & Conditions +

+
    +
  1. + Once goods are sold, they are + not exchangeable or refundable. +
    2. +
  2. + Please check the product before + leaving the counter. +
    3. +
+
+ ) + : TermsnAdCondition == true && + TermsAndConditions?.length > 0 && ( +
-
- ) - : Signature == true && ( -
-

- Signature -

- + Terms & Conditions +

+
    + {TermsAndConditions?.map( + (item) => ( +
  1. + {item?.TermsandConditions} +
    2. + ) + )} + {/*
  2. Please check the product before leaving the counter.
    3. */} +
+
+ )} + + {GlobaldummyData + ? GlobalSignature && ( +
-
- )} + > +

+ Signature +

+ +
+ ) + : Signature == true && ( +
+

+ Signature +

+ +
+ )} +
)} @@ -2488,7 +2592,8 @@ const PrintA5Style11 = ({ fontSize: '25px', fontWeight: '600', padding: '10px', - backgroundColor: '#fdc716', + // backgroundColor: '#fdc716', + ...netAmountStyle, textAlign: 'center', }} > @@ -2824,7 +2929,8 @@ const PrintA5Style11 = ({ >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}
)} - {GlobaldummyData +
+ {GlobaldummyData ? GlobalIsnotes && (

@@ -2995,6 +3101,7 @@ const PrintA5Style11 = ({ )}

+
)}
))} @@ -3077,7 +3184,8 @@ const PrintA5Style11 = ({ fontSize: '25px', fontWeight: '600', padding: '10px', - backgroundColor: '#fdc716', + // backgroundColor: '#fdc716', + ...netAmountStyle, textAlign: 'center', }} > @@ -3407,7 +3515,8 @@ const PrintA5Style11 = ({ >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}
)} - {GlobaldummyData +
+ {GlobaldummyData ? GlobalIsnotes && (

@@ -3572,6 +3681,7 @@ const PrintA5Style11 = ({ )}

+
)}
From d5d23e837f5943525c4addc0b625312e0ce95038 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:33:57 +0530 Subject: [PATCH 15/16] Implement dynamic header and table color functionality --- .../PrintTemplates/A4/A4Standard.jsx | 133 +++++++++++++++--- 1 file changed, 114 insertions(+), 19 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/A4/A4Standard.jsx b/src/Pages/BookingScreen/PrintTemplates/A4/A4Standard.jsx index 43bca37..0bc51d6 100644 --- a/src/Pages/BookingScreen/PrintTemplates/A4/A4Standard.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/A4/A4Standard.jsx @@ -27,7 +27,17 @@ import { GlobalprintCashierName, GlobalprintLogo, GlobalprintTax, - GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss'; import QRCode from 'react-qr-code'; @@ -110,8 +120,23 @@ const InvoiceTemplate = ({ )?.SettingValue === 'Y'; const keysLength = Object.keys(table2Data ?? {}).length; console.log(GlobalDiscount, Discount, 'Discount'); - - const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); +const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; let BankDetails = table2Data?.BankDetails; let TermsAndConditions = printDatas?.TermsandConditions; @@ -491,6 +516,51 @@ const InvoiceTemplate = ({ }, ]; + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <>