From 1c5da0e2013dec9ca97828ac6a6900c0c5a848b4 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:30:51 +0530 Subject: [PATCH] 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' ? (