karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Android_Retail/src/Pages/BookingScreen/Components/UtillComponents/SalesDetailsNetAmountModal.jsx

450 lines
21 KiB
React
Raw Normal View History

added sorting in product receipt name
2026-02-26 12:54:08 +05:30
import { DefaultModal } from "../../../../Components/Modal/DefaultModal"
import { extractLastNumberOrderId } from "../../../../Services/Others"
import '../../../../Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss';
const SalesDetailsModal = ({ isModalOpen = false,
setIsModalOpen = () => { },
currentData = [],
currentPage,
totalPages,
setCurrentPage = () => { },
startIndex
}) => {
return (
<DefaultModal
open={isModalOpen}
title="Sales Details"
handleCancel={() => setIsModalOpen(false)}
handleSubmit={() => setIsModalOpen(false)}
width={700}
footer={false}
>
<div style={{ overflowX: 'auto' }}>
<table
style={{
width: '100%',
borderCollapse: 'collapse',
fontFamily: "'Segoe UI', Roboto, sans-serif",
fontSize: '14px',
borderRadius: '8px',
overflow: 'hidden',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
}}
className='SCTableInPageSales'
>
<thead>
<tr style={{ backgroundColor: '#2c88ee', color: '#fff' }}>
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
S.No
</th>
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
Order ID
</th>
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
Customer
</th>
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
Mobile
</th>
{/* <th style={{ border: "1px solid #ddd", padding: "10px" }}>Booked By</th> */}
<th style={{ border: '1px solid #ddd', padding: '10px' }}>
Payment Type
</th>
<th style={{ border: '1px solid #ddd', padding: '10px', backgroundColor: '#055ec0' }}>
Amount (₹)
</th>
</tr>
</thead>
<tbody>
{currentData?.length > 0 ? (
currentData?.map((item, index) => (
<tr
key={item.OrderId}
style={{
backgroundColor: index % 2 === 0 ? '#f7faff' : '#e9f1ff',
textAlign: 'center',
transition: 'background 0.3s',
}}
onMouseEnter={(e) =>
(e.currentTarget.style.backgroundColor = '#d6e4ff')
}
onMouseLeave={(e) =>
(e.currentTarget.style.backgroundColor =
index % 2 === 0 ? '#f7faff' : '#e9f1ff')
}
>
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
{startIndex + index + 1}
</td>
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
{extractLastNumberOrderId(item.OrderId)}
</td>
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
{item.CustName || '—'}
</td>
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
{item.CustMobile || '—'}
</td>
{/* <td style={{ border: "1px solid #ddd", padding: "8px" }}>
{item.BookedBy || "—"}
</td> */}
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
{item.PaymentTypeName || '—'}
</td>
<td
style={{
border: '1px solid #ddd',
padding: '8px',
fontWeight: '600',
color: '#2e7d32',
backgroundColor: '#eaf6ea',
}}
>
₹{item.Amount?.toLocaleString()}
</td>
</tr>
))
) : (
<tr>
<td
colSpan="7"
style={{
textAlign: 'center',
padding: '12px',
border: '1px solid #ddd',
color: '#888',
}}
>
No booking data available
</td>
</tr>
)}
</tbody>
</table>
{/* Pagination */}
{totalPages > 1 && (
<div
style={{
marginTop: '12px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '8px',
}}
>
{currentPage == 1 ? (
''
) : (
<button
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
disabled={currentPage === 1}
style={{
padding: '5px 10px',
backgroundColor: '#003366',
color: '#fff',
border: 'none',
borderRadius: '4px',
cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
opacity: currentPage === 1 ? 0.5 : 1,
}}
>
Prev
</button>
)}
<span style={{ fontWeight: '600' }}>
Page {currentPage} of {totalPages}
</span>
<button
onClick={() =>
setCurrentPage((p) => Math.min(p + 1, totalPages))
}
disabled={currentPage === totalPages}
style={{
padding: '5px 10px',
backgroundColor: '#003366',
color: '#fff',
border: 'none',
borderRadius: '4px',
cursor:
currentPage === totalPages ? 'not-allowed' : 'pointer',
opacity: currentPage === totalPages ? 0.5 : 1,
}}
>
Next
</button>
</div>
)}
</div>
</DefaultModal>
)
}
const SalesNetAmountModal = ({
isNetAmtModalOpen = false,
setIsNetAmtModalOpen = () => { },
Added Refund Amt
2026-03-25 09:33:55 +05:30
orderDetails = [],
RefundAmt
added sorting in product receipt name
2026-02-26 12:54:08 +05:30
}) => {
return (
<DefaultModal
open={isNetAmtModalOpen}
title="Sales Net Amount"
handleCancel={() => setIsNetAmtModalOpen(false)}
handleSubmit={() => setIsNetAmtModalOpen(false)}
width={800}
footer={false}
>
<div style={{ overflowX: 'auto' }}>
<table
style={{
width: '100%',
borderCollapse: 'collapse',
textAlign: 'center',
fontFamily: "'Segoe UI', Roboto, sans-serif",
fontSize: '14px',
borderRadius: '8px',
overflow: 'hidden',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
}}
className='SCTableInPageSales'
>
<thead>
<tr style={{ backgroundColor: '#2c88ee', color: '#fff' }}>
<th
colSpan="2"
style={{ border: '1px solid #ddd', padding: '10px' }}
>
Cash
</th>
<th
colSpan="2"
style={{ border: '1px solid #ddd', padding: '10px' }}
>
UPI
</th>
<th
colSpan="2"
style={{ border: '1px solid #ddd', padding: '10px' }}
>
Card
</th>
<th
colSpan="2"
style={{ border: '1px solid #ddd', padding: '10px' }}
>
Credit
</th>
<th
colSpan="2"
style={{ border: '1px solid #ddd', padding: '10px' }}
>
Business UPI
</th>
Added Refund Amt
2026-03-25 09:33:55 +05:30
<th
rowSpan="2"
style={{
border: '1px solid #ddd',
padding: '10px',
backgroundColor: '#055ec0',
color: '#fff',
}}
>
Refund Amt
</th>
added sorting in product receipt name
2026-02-26 12:54:08 +05:30
<th
rowSpan="2"
style={{
border: '1px solid #ddd',
padding: '10px',
backgroundColor: '#055ec0',
color: '#fff',
}}
>
Total
</th>
</tr>
<tr style={{ backgroundColor: '#2c88ee', color: '#fff' }}>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Count
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Amt
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Count
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Amt
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Count
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Amt
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Count
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Amt
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Count
</th>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Amt
</th>
</tr>
</thead>
<tbody>
{orderDetails?.map((item, index) => {
const total =
(item.CashAmount || 0) +
(item.UpiAmount || 0) +
(item.CardAmount || 0) +
Added Refund Amt
2026-03-25 09:33:55 +05:30
(item.CreditAmount || 0) ;
added sorting in product receipt name
2026-02-26 12:54:08 +05:30
return (
<tr
key={index}
style={{
backgroundColor: index % 2 === 0 ? '#f7faff' : '#ffffff',
transition: 'background 0.3s',
}}
onMouseEnter={(e) =>
(e.currentTarget.style.backgroundColor = '#e6f2ff')
}
onMouseLeave={(e) =>
(e.currentTarget.style.backgroundColor =
index % 2 === 0 ? '#f7faff' : '#ffffff')
}
>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.CashCount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.CashAmount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.UpiCount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.UpiAmount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.CardCount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.CardAmount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.CreditCount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.CreditAmount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.BusinessUpiCount}
</td>
<td
style={{
border: '1px solid #ddd',
fontWeight: '700',
padding: '8px',
}}
>
{item.BusinessUpiAmount}
</td>
Added Refund Amt
2026-03-25 09:33:55 +05:30
<td
style={{
border: '1px solid #ddd',
padding: '8px',
fontWeight: '700',
// backgroundColor: '#eaf6ea',
// color: '#2e7d32',
}}
>
{RefundAmt}
</td>
added sorting in product receipt name
2026-02-26 12:54:08 +05:30
<td
style={{
border: '1px solid #ddd',
padding: '8px',
fontWeight: '700',
backgroundColor: '#eaf6ea',
color: '#2e7d32',
}}
>
Added Refund Amt
2026-03-25 09:33:55 +05:30
{total-RefundAmt}
added sorting in product receipt name
2026-02-26 12:54:08 +05:30
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</DefaultModal>
)
}
export { SalesDetailsModal, SalesNetAmountModal };