kediritechnopark/kedaimaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
everythingonblack
2025-05-15 15:49:40 +07:00
parent e51987443c
commit f6482d24d2
1 changed files with 123 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/pages/Transactions.js
View File

@@ -8,71 +8,38 @@ import {
declineTransaction, declineTransaction,
getTransactionsFromCafe, getTransactionsFromCafe,
} from "../helpers/transactionHelpers"; } from "../helpers/transactionHelpers";
import { getTables } from "../helpers/tableHelper"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import ButtonWithReplica from "../components/ButtonWithReplica"; import ButtonWithReplica from "../components/ButtonWithReplica";
import TableCanvas from "../components/TableCanvas";
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);
export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl }) { export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl }) {
const { shopIdentifier, tableId } = useParams(); const { shopIdentifier, tableId } = useParams();
if (sendParam) sendParam({ shopIdentifier, tableId }); if (sendParam) sendParam({ shopIdentifier, tableId });
dayjs.extend(utc);
dayjs.extend(timezone);
const [transactions, setTransactions] = useState([]); const [transactions, setTransactions] = useState([]);
const [isPaymentLoading, setIsPaymentLoading] = useState(false); const [isPaymentLoading, setIsPaymentLoading] = useState(false);
const [isPaymentOpen, setIsPaymentOpen] = useState(false); const [isPaymentOpen, setIsPaymentOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const [matchedItems, setMatchedItems] = useState([]);
useEffect(() => {
setMatchedItems(searchAndAggregateItems(transactions, searchTerm));
}, [searchTerm, transactions]);
useEffect(() => { useEffect(() => {
const fetchTransactions = async () => { const fetchTransactions = async () => {
if (deviceType == 'clerk') { try {
try { let response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
let response; console.log(response)
response = await getTransactionsFromCafe(shopId || propsShopId, 5, false); if (response) setTransactions(response);
console.log(response) } catch (error) {
if (response) { console.error("Error fetching transactions:", error);
setTransactions(response);
return;
}
} catch (error) {
console.error("Error fetching transactions:", error);
}
}
else {
try {
let response;
response = await getMyTransactions(shopId || propsShopId, 5);
console.log(response)
const combinedTransactions = [];
response.forEach(cafe => {
const { cafeId, name: cafeName, transactions } = cafe;
transactions.forEach(transaction => {
const newTransaction = {
...transaction,
cafeId,
cafeName,
DetailedTransactions: transaction.detailedTransactions // Rename here
};
delete newTransaction.detailedTransactions; // Remove the old key
combinedTransactions.push(newTransaction);
});
});
// combinedTransactions now contains all transactions with cafe info and renamed key
console.log(combinedTransactions)
// combinedTransactions now contains all transactions with cafe info
setTransactions(combinedTransactions);
} catch (error) {
console.error("Error fetching transactions:", error);
}
} }
}; };
@@ -90,18 +57,48 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
return grandTotal + calculateTotalPrice(transaction.DetailedTransactions); return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
}, 0); }, 0);
}; };
const searchAndAggregateItems = (transactions, searchTerm) => {
if (!searchTerm.trim()) return [];
const normalizedTerm = searchTerm.trim().toLowerCase();
const aggregatedItems = new Map();
transactions.forEach(transaction => {
transaction.DetailedTransactions.forEach(detail => {
const itemName = detail.Item.name;
const itemNameLower = itemName.toLowerCase();
if (itemNameLower.includes(normalizedTerm)) {
const key = detail.itemId;
if (!aggregatedItems.has(key)) {
aggregatedItems.set(key, {
itemId: detail.itemId,
name: itemName,
totalQty: 0,
totalPrice: 0,
});
}
const current = aggregatedItems.get(key);
current.totalQty += detail.qty;
current.totalPrice += detail.qty * (detail.promoPrice || detail.price);
}
});
});
return Array.from(aggregatedItems.values());
};
const handleConfirm = async (transactionId) => { const handleConfirm = async (transactionId) => {
setIsPaymentLoading(true); setIsPaymentLoading(true);
try { try {
const c = await confirmTransaction(transactionId); const result = await confirmTransaction(transactionId);
if (c) { if (result) {
// Update the confirmed status locally setTransactions(prev =>
setTransactions((prevTransactions) => prev.map(t =>
prevTransactions.map((transaction) => t.transactionId === transactionId ? { ...t, confirmed: 1 } : t
transaction.transactionId === transactionId
? { ...transaction, confirmed: 1 } // Set to confirmed
: transaction
) )
); );
} }
@@ -115,14 +112,11 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
const handleDecline = async (transactionId) => { const handleDecline = async (transactionId) => {
setIsPaymentLoading(true); setIsPaymentLoading(true);
try { try {
const c = await declineTransaction(transactionId); const result = await declineTransaction(transactionId);
if (c) { if (result) {
// Update the confirmed status locally setTransactions(prev =>
setTransactions((prevTransactions) => prev.map(t =>
prevTransactions.map((transaction) => t.transactionId === transactionId ? result : t
transaction.transactionId === transactionId
? c // Set to confirmed
: transaction
) )
); );
} }
@@ -135,12 +129,40 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
return ( return (
<div className={styles.Transactions}> <div className={styles.Transactions}>
<div style={{ marginTop: "30px" }}></div> <h2 className={styles["Transactions-title"]}>
<h2 className={styles["Transactions-title"]}>Daftar transaksi Daftar transaksi Rp {calculateAllTransactionsTotal(transactions)}
Rp {calculateAllTransactionsTotal(transactions)} </h2> </h2>
<div style={{ marginTop: "30px" }}></div>
{/* <TableCanvas tables={tables} selectedTable={selectedTable} /> */} <input
<div className={styles.TransactionListContainer} style={{ padding: '0 20px 0 20px' }}> type="text"
placeholder="Cari nama item..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
style={{ border:'0px',height: '42px',borderRadius: '15px', margin: '7px auto 10px', width: '88%', paddingLeft: '8px' }}
/>
{/* Existing Transactions List (keep all your JSX below unchanged) */}
<div className={styles.TransactionListContainer} style={{ padding: '0 8px' }}>
{matchedItems.length > 0 && matchedItems.map(item => (
<div
key={item.itemId}
className={styles.RoundedRectangle}
style={{ overflow: "hidden" }}
>
<ul>
<li>
<strong>{item.name}</strong> x {item.totalQty}
</li>
</ul>
<div className={styles.TotalContainer}>
<span>Total:</span>
<span>Rp {item.totalPrice}</span>
</div>
</div>
))}
{transactions && {transactions &&
transactions.map((transaction) => ( transactions.map((transaction) => (
<div <div
@@ -173,31 +195,31 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
<ColorRing className={styles['receipt-logo']} /> <ColorRing className={styles['receipt-logo']} />
) : transaction.confirmed === 3 ? ( ) : transaction.confirmed === 3 ? (
<div> <div>
<svg <svg
height="60px" height="60px"
width="60px" width="60px"
version="1.1" version="1.1"
id="Layer_1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 506.4 506.4" viewBox="0 0 506.4 506.4"
xmlSpace="preserve" xmlSpace="preserve"
fill="#000000" fill="#000000"
style={{marginTop: '12px', marginBottom: '12px'}} style={{ marginTop: '12px', marginBottom: '12px' }}
> >
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g> <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g> <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g id="SVGRepo_iconCarrier">
<circle style={{ fill: '#54B265' }} cx="253.2" cy="253.2" r="249.2" /> <circle style={{ fill: '#54B265' }} cx="253.2" cy="253.2" r="249.2" />
<path <path
style={{ fill: '#F4EFEF' }} style={{ fill: '#F4EFEF' }}
d="M372.8,200.4l-11.2-11.2c-4.4-4.4-12-4.4-16.4,0L232,302.4l-69.6-69.6c-4.4-4.4-12-4.4-16.4,0 L134.4,244c-4.4,4.4-4.4,12,0,16.4l89.2,89.2c4.4,4.4,12,4.4,16.4,0l0,0l0,0l10.4-10.4l0.8-0.8l121.6-121.6 C377.2,212.4,377.2,205.2,372.8,200.4z" d="M372.8,200.4l-11.2-11.2c-4.4-4.4-12-4.4-16.4,0L232,302.4l-69.6-69.6c-4.4-4.4-12-4.4-16.4,0 L134.4,244c-4.4,4.4-4.4,12,0,16.4l89.2,89.2c4.4,4.4,12,4.4,16.4,0l0,0l0,0l10.4-10.4l0.8-0.8l121.6-121.6 C377.2,212.4,377.2,205.2,372.8,200.4z"
></path> ></path>
<path d="M253.2,506.4C113.6,506.4,0,392.8,0,253.2S113.6,0,253.2,0s253.2,113.6,253.2,253.2S392.8,506.4,253.2,506.4z M253.2,8 C118,8,8,118,8,253.2s110,245.2,245.2,245.2s245.2-110,245.2-245.2S388.4,8,253.2,8z"></path> <path d="M253.2,506.4C113.6,506.4,0,392.8,0,253.2S113.6,0,253.2,0s253.2,113.6,253.2,253.2S392.8,506.4,253.2,506.4z M253.2,8 C118,8,8,118,8,253.2s110,245.2,245.2,245.2s245.2-110,245.2-245.2S388.4,8,253.2,8z"></path>
<path d="M231.6,357.2c-4,0-8-1.6-11.2-4.4l-89.2-89.2c-6-6-6-16,0-22l11.6-11.6c6-6,16.4-6,22,0l66.8,66.8L342,186.4 c2.8-2.8,6.8-4.4,11.2-4.4c4,0,8,1.6,11.2,4.4l11.2,11.2l0,0c6,6,6,16,0,22L242.8,352.4C239.6,355.6,235.6,357.2,231.6,357.2z M154,233.6c-2,0-4,0.8-5.6,2.4l-11.6,11.6c-2.8,2.8-2.8,8,0,10.8l89.2,89.2c2.8,2.8,8,2.8,10.8,0l132.8-132.8c2.8-2.8,2.8-8,0-10.8 l-11.2-11.2c-2.8-2.8-8-2.8-10.8,0L234.4,306c-1.6,1.6-4,1.6-5.6,0l-69.6-69.6C158,234.4,156,233.6,154,233.6z"></path> <path d="M231.6,357.2c-4,0-8-1.6-11.2-4.4l-89.2-89.2c-6-6-6-16,0-22l11.6-11.6c6-6,16.4-6,22,0l66.8,66.8L342,186.4 c2.8-2.8,6.8-4.4,11.2-4.4c4,0,8,1.6,11.2,4.4l11.2,11.2l0,0c6,6,6,16,0,22L242.8,352.4C239.6,355.6,235.6,357.2,231.6,357.2z M154,233.6c-2,0-4,0.8-5.6,2.4l-11.6,11.6c-2.8,2.8-2.8,8,0,10.8l89.2,89.2c2.8,2.8,8,2.8,10.8,0l132.8-132.8c2.8-2.8,2.8-8,0-10.8 l-11.2-11.2c-2.8-2.8-8-2.8-10.8,0L234.4,306c-1.6,1.6-4,1.6-5.6,0l-69.6-69.6C158,234.4,156,233.6,154,233.6z"></path>
</g> </g>
</svg> </svg>
</div> </div>
) : ( ) : (
<ColorRing className={styles['receipt-logo']} /> <ColorRing className={styles['receipt-logo']} />
@@ -316,7 +338,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
</button> </button>
} }
{deviceType == 'guestDevice' && transaction.confirmed < 2 && transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' && {deviceType == 'guestDevice' && transaction.confirmed < 2 && transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
<ButtonWithReplica <ButtonWithReplica
paymentUrl={paymentUrl} paymentUrl={paymentUrl}
price={ price={
@@ -344,7 +366,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
} }
</div> </div>
{deviceType == 'guestDevice' && transaction.confirmed >=0 && transaction.confirmed < 2 && transaction.payment_type == 'cash' ? {deviceType == 'guestDevice' && transaction.confirmed >= 0 && transaction.confirmed < 2 && transaction.payment_type == 'cash' ?
<button <button
className={styles.PayButton} className={styles.PayButton}
onClick={() => handleDecline(transaction.transactionId)} onClick={() => handleDecline(transaction.transactionId)}