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

ok

Browse Source
This commit is contained in:
zadit
2025-01-19 15:47:49 +07:00
parent 6b95656c4d
commit 9cd0508d4a
5 changed files with 354 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&ital,wght@0,200..800;1,200..800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&ital,wght@0,200..800;1,200..800&display=swap");
html, html,
body { body {

2
src/components/Header.js
View File

@@ -378,7 +378,7 @@ const Header = ({
Desain kafe Desain kafe
</Child> </Child>
<Child onClick={() => setModal("edit_tables")}> <Child onClick={() => setModal("edit_tables")}>
QR kedai Identifikasi kedai
</Child> </Child>
<Child onClick={() => setModal("payment_option")}> <Child onClick={() => setModal("payment_option")}>
Metode pembayaran Metode pembayaran

660
src/components/TablesPage.js
View File

@@ -28,7 +28,14 @@ const SetPaymentQr = ({ shop }) => {
const [initialSize, setInitialSize] = useState(shop.scale); const [initialSize, setInitialSize] = useState(shop.scale);
const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground)); const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
const qrBackgroundInputRef = useRef(null); const qrBackgroundInputRef = useRef(null);
const shopUrl = window.location.hostname + "/" + shop.cafeId;
const [cafeIdentifyNameUpdate, setCafeIdentifyNameUpdate] = useState(shop.cafeIdentifyName);
const shopUrl = window.location.hostname + "/" + cafeIdentifyNameUpdate;
const cafeIdentifyNameRef = useRef(null);
const [isconfigcafeidentityname, setIsConfigCafeIdentityName] = useState(false);
const generateQRCodeUrl = (tableCode) => { const generateQRCodeUrl = (tableCode) => {
if (tableCode != null) { if (tableCode != null) {
@@ -124,16 +131,16 @@ const SetPaymentQr = ({ shop }) => {
const handleCreate = async () => { const handleCreate = async () => {
// if (newTable) { // if (newTable) {
try { try {
const createdTable = await createTable(shop.cafeId, { const createdTable = await createTable(shop.cafeId, {
// ...newTable, // ...newTable,
tableNo, tableNo,
}); });
setTables([...tables, createdTable]); setTables([...tables, createdTable]);
setTableNo(""); setTableNo("");
} catch (error) { } catch (error) {
console.error("Error creating table:", error); console.error("Error creating table:", error);
} }
}; };
function downloadQrCodeContainer({ selectedTable, shop }) { function downloadQrCodeContainer({ selectedTable, shop }) {
@@ -174,9 +181,8 @@ const SetPaymentQr = ({ shop }) => {
return ( return (
<div style={styles.container}> <div style={styles.container}>
<h3 style={styles.title}>QR kedai</h3> <h3 style={styles.title}>Identifikasi kedai</h3>
<div style={{ height: 80, position: 'relative', scale: '80%', transformOrigin: 'left', left: 0, width: '125%' }}>
<div style={{ height: 80, position: 'relative', scale: '80%' }}>
<div <div
style={{ style={{
width: '100%', width: '100%',
@@ -251,22 +257,22 @@ const SetPaymentQr = ({ shop }) => {
</div> </div>
<div <div
style={{ style={{
width: '100%',
height: 28, height: 28,
left: 134, left: isconfigcafeidentityname ? 0:69,
right: 0,
top: 5, top: 5,
position: 'absolute', position: 'absolute',
zIndex: 3
}} }}
> >
<div <div
style={{ style={{
width: '100%', width: '100%',
height: 28, height: 28,
left: 0,
top: 0, top: 0,
position: 'absolute', position: 'absolute',
background: '#202124', background: '#202124',
borderRadius: 14, borderRadius: isconfigcafeidentityname ? 0 : '14px 0 0 14px',
}} }}
/> />
<div <div
@@ -291,16 +297,17 @@ const SetPaymentQr = ({ shop }) => {
</div> </div>
<div <div
style={{ style={{
width: 165,
height: 16, height: 16,
left: 33, left: 33,
top: 6, right: 0,
top: 4,
position: 'absolute', position: 'absolute',
}} }}
> >
<div <div
style={{ style={{
left: 0, left: 0,
right: 0,
top: 0, top: 0,
position: 'absolute', position: 'absolute',
justifyContent: 'flex-start', justifyContent: 'flex-start',
@@ -318,20 +325,34 @@ const SetPaymentQr = ({ shop }) => {
wordWrap: 'break-word', wordWrap: 'break-word',
}} }}
> >
kedaimaster.com/ {window.location.hostname}/
</div> </div>
<div
<input
ref={cafeIdentifyNameRef}
style={{ style={{
width: '100%',
color: '#86888A', color: '#86888A',
fontSize: 14, fontSize: 14,
fontFamily: 'Roboto', fontFamily: 'Roboto',
fontWeight: '400', fontWeight: '400',
letterSpacing: 0.25, letterSpacing: 0.25,
wordWrap: 'break-word', wordWrap: 'break-word',
backgroundColor: 'transparent',
borderColor: 'transparent',
paddingLeft: isconfigcafeidentityname ? '10px' : '0', // Adjust padding when focused
borderLeft: isconfigcafeidentityname ? '1px solid #ccc' : '0', // Adjust border when focused
}} }}
> onChange={(e)=>setCafeIdentifyNameUpdate(e.target.value)}
galauers value={cafeIdentifyNameUpdate}
</div> onFocus={() => {
setIsConfigCafeIdentityName(true); // Set the state to true when input is focused
}}
onBlur={() => {
setIsConfigCafeIdentityName(false); // Set the state to false when input loses focus
setCafeIdentifyNameUpdate(shop.cafeIdentifyName)
}} // Handle blur event to reset the state
/>
</div> </div>
</div> </div>
<div <div
@@ -343,16 +364,13 @@ const SetPaymentQr = ({ shop }) => {
position: 'absolute', position: 'absolute',
}} }}
> >
<img <svg style={{
style={{ left: 2,
width: 8, top: 0.5,
height: 10.5, position: 'absolute',
left: 2, }} xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
top: 0.5, <path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8.5V3C8.5 1.62 7.38 0.5 6 0.5C4.62 0.5 3.5 1.62 3.5 3V4H3C2.45 4 2 4.45 2 5V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V5C10 4.45 9.55 4 9 4ZM4.5 4V3C4.5 2.17 5.17 1.5 6 1.5C6.83 1.5 7.5 2.17 7.5 3V4H4.5Z" fill="#EAEAEA" />
position: 'absolute', </svg>
}}
src='https://via.placeholder.com/8x10'
/>
</div> </div>
</div> </div>
<div <div
@@ -364,46 +382,6 @@ const SetPaymentQr = ({ shop }) => {
position: 'absolute', position: 'absolute',
}} }}
> >
<div
style={{
width: 16,
height: 16,
left: 93,
top: 0,
position: 'absolute',
}}
>
<img
style={{
width: 12,
height: 12,
left: 2,
top: 2,
position: 'absolute',
}}
src='https://via.placeholder.com/12x12'
/>
</div>
<div
style={{
width: 16,
height: 16,
left: 62,
top: 0,
position: 'absolute',
}}
>
<div
style={{
width: 12,
height: 12,
left: 2,
top: 2,
position: 'absolute',
background: 'white',
}}
></div>
</div>
<div <div
style={{ style={{
width: 16, width: 16,
@@ -412,17 +390,9 @@ const SetPaymentQr = ({ shop }) => {
top: 0, top: 0,
position: 'absolute', position: 'absolute',
}} }}
> ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<div <path fill-rule="evenodd" clip-rule="evenodd" d="M13.9979 6.33122V2.80455C13.9979 2.50455 13.6379 2.35788 13.4312 2.57122L12.2446 3.75788C11.0379 2.55122 9.31789 1.85788 7.43789 2.02455C4.64456 2.27788 2.34456 4.52455 2.03789 7.31788C1.63789 10.9312 4.45789 13.9979 7.99789 13.9979C11.0579 13.9979 13.5846 11.7046 13.9512 8.74455C13.9979 8.34455 13.6846 7.99788 13.2846 7.99788C12.9512 7.99788 12.6712 8.24455 12.6312 8.57122C12.3446 10.8979 10.3379 12.6979 7.93122 12.6645C5.45789 12.6312 3.37122 10.5445 3.33122 8.06455C3.29122 5.46455 5.40456 3.33122 7.99789 3.33122C9.28456 3.33122 10.4512 3.85788 11.2979 4.69788L9.90456 6.09122C9.69122 6.30455 9.83789 6.66455 10.1379 6.66455H13.6646C13.8512 6.66455 13.9979 6.51788 13.9979 6.33122Z" fill="white" />
style={{ </svg>
width: 12,
height: 11.69,
left: 2,
top: 2,
position: 'absolute',
background: '#86888A',
}}
></div>
</div> </div>
<div <div
style={{ style={{
@@ -433,16 +403,9 @@ const SetPaymentQr = ({ shop }) => {
position: 'absolute', position: 'absolute',
}} }}
> >
<div <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
style={{ <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2299 7.07685H4.62795L8.38601 3.31879C8.68635 3.01845 8.68635 2.52559 8.38601 2.22525C8.08567 1.92492 7.60051 1.92492 7.30018 2.22525L2.22525 7.30018C1.92492 7.60051 1.92492 8.08567 2.22525 8.38601L7.30018 13.4609C7.60051 13.7613 8.08567 13.7613 8.38601 13.4609C8.68635 13.1606 8.68635 12.6754 8.38601 12.3751L4.62795 8.61704H13.2299C13.6535 8.61704 14 8.2705 14 7.84694C14 7.42339 13.6535 7.07685 13.2299 7.07685Z" fill="#86888A" />
width: 12, </svg>
height: 11.69,
left: 2,
top: 2,
position: 'absolute',
background: 'white',
}}
></div>
</div> </div>
</div> </div>
</div> </div>
@@ -532,7 +495,7 @@ const SetPaymentQr = ({ shop }) => {
> >
<img <img
style={{ width: 16, height: 16 }} style={{ width: 16, height: 16 }}
src='https://via.placeholder.com/16x16' src='./kedaimaster150.png'
/> />
<div> <div>
<span <span
@@ -563,17 +526,9 @@ const SetPaymentQr = ({ shop }) => {
<div <div
style={{ width: 18, height: 18, position: 'relative' }} style={{ width: 18, height: 18, position: 'relative' }}
> ><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<div <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5836 5.42207C12.3618 5.20023 12.0034 5.20023 11.7816 5.42207L9 8.19795L6.21843 5.41638C5.99659 5.19454 5.63823 5.19454 5.41638 5.41638C5.19454 5.63823 5.19454 5.99659 5.41638 6.21843L8.19795 9L5.41638 11.7816C5.19454 12.0034 5.19454 12.3618 5.41638 12.5836C5.63823 12.8055 5.99659 12.8055 6.21843 12.5836L9 9.80205L11.7816 12.5836C12.0034 12.8055 12.3618 12.8055 12.5836 12.5836C12.8055 12.3618 12.8055 12.0034 12.5836 11.7816L9.80205 9L12.5836 6.21843C12.7998 6.00228 12.7998 5.63823 12.5836 5.42207Z" fill="white" />
style={{ </svg>
width: 7.5,
height: 7.5,
left: 5.25,
top: 5.25,
position: 'absolute',
background: 'white',
}}
></div>
</div> </div>
</div> </div>
<div <div
@@ -587,16 +542,9 @@ const SetPaymentQr = ({ shop }) => {
></div> ></div>
</div> </div>
<div style={{ width: 20, height: 20, position: 'relative' }}> <div style={{ width: 20, height: 20, position: 'relative' }}>
<div <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
style={{ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7142 10.9524H10.9523V15.7143C10.9523 16.2381 10.5237 16.6667 9.99992 16.6667C9.47611 16.6667 9.04754 16.2381 9.04754 15.7143V10.9524H4.28563C3.76182 10.9524 3.33325 10.5238 3.33325 10C3.33325 9.47623 3.76182 9.04766 4.28563 9.04766H9.04754V4.28575C9.04754 3.76195 9.47611 3.33337 9.99992 3.33337C10.5237 3.33337 10.9523 3.76195 10.9523 4.28575V9.04766H15.7142C16.238 9.04766 16.6666 9.47623 16.6666 10C16.6666 10.5238 16.238 10.9524 15.7142 10.9524Z" fill="#BDC1C6" />
width: 13.33, </svg>
height: 13.33,
left: 3.33,
top: 3.33,
position: 'absolute',
background: '#BDC1C6',
}}
></div>
</div> </div>
</div> </div>
</div> </div>
@@ -650,6 +598,62 @@ const SetPaymentQr = ({ shop }) => {
</div> </div>
</div> </div>
</div> </div>
{!isconfigcafeidentityname ? <div
onClick={() => {setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus()}} // Open the config modal
style={{
backgroundColor: '#303034',
right: 0,
color: 'white',
borderRadius: '0 0 6px 6px',
fontFamily: 'Roboto',
fontSize: '13px',
padding: 3,
cursor: 'pointer',
marginBottom: '10px'
}}
>
Ganti alamat kedai
</div> : (
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
<div
onClick={() => setIsConfigCafeIdentityName(false)} // Close the config modal
style={{
backgroundColor: '#303034',
width: '47%',
color: 'white',
borderRadius: '0 0 0px 6px',
fontFamily: 'Roboto',
fontSize: '13px',
padding: 3,
cursor: 'pointer',
}}
>
Batalkan
</div>
<div
onClick={() => {
// Handle save functionality here
setIsConfigCafeIdentityName(false); // Close after saving
}}
style={{
backgroundColor: '#303034',
width: '47%',
color: 'white',
borderRadius: '0 0 6px 0px',
fontFamily: 'Roboto',
fontSize: '13px',
padding: 3,
cursor: 'pointer',
}}
>
Simpan
</div>
</div>
)}
<div <div
id="qr-code-container" id="qr-code-container"
style={{ style={{
@@ -657,16 +661,16 @@ const SetPaymentQr = ({ shop }) => {
backgroundColor: '#cdcdcd' backgroundColor: '#cdcdcd'
}} }}
> >
<img <img
src={bgImageUrl} src={bgImageUrl}
alt="QR Code" alt="QR Code"
style={{ style={{
position: "absolute", position: "absolute",
width: '100%', width: '100%',
height: '100%', height: '100%',
objectFit: 'contain', objectFit: 'contain',
transform: "translate(-50%, 0%)", transform: "translate(-50%, 0%)",
}} /> }} />
<img <img
src={generateQRCodeUrl(selectedTable?.tableCode || null)} src={generateQRCodeUrl(selectedTable?.tableCode || null)}
alt="QR Code" alt="QR Code"
@@ -704,225 +708,225 @@ const SetPaymentQr = ({ shop }) => {
/> />
</div> </div>
{!isViewingQR ? {!isViewingQR ?
<> <>
<div style={styles.uploadMessage}> <div style={styles.uploadMessage}>
<p>Klik untuk ganti background</p> <p>Klik untuk ganti background</p>
</div> </div>
<div style={styles.resultMessage}> <div style={styles.resultMessage}>
<p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(!isConfigQR); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi QR</p> <p onClick={() => { setIsConfig(!isConfig); setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}> {isConfig ? '˅' : '˃'} Konfigurasi QR</p>
<div <div
onClick={() => qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti</div> onClick={() => qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti</div>
</div> </div>
<div style={styles.switchContainer}> <div style={styles.switchContainer}>
{isConfig && {isConfig &&
<div style={{ marginLeft: '15px' }}> <div style={{ marginLeft: '15px' }}>
{/* <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}> {/* <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
{isConfigQR ? '˅' : '˃'} Konfigurasi QR {isConfigQR ? '˅' : '˃'} Konfigurasi QR
</p> */} </p> */}
{isConfigQR && <> {isConfigQR && <>
<div style={styles.sliderContainer}> <div style={styles.sliderContainer}>
<label style={styles.label}> <label style={styles.label}>
QR Code Size: QR Code Size:
<div style={styles.sliderWrapper}> <div style={styles.sliderWrapper}>
<span style={styles.labelStart}>10%</span> <span style={styles.labelStart}>10%</span>
<input <input
type="range" type="range"
step="0.25" step="0.25"
min="10" min="10"
max="100" max="100"
value={initialSize} value={initialSize}
onChange={handleSizeChange} onChange={handleSizeChange}
style={styles.input} style={styles.input}
/> />
<span style={styles.value}>{initialSize}%</span> <span style={styles.value}>{initialSize}%</span>
</div>
</label>
</div> </div>
</label> <div style={styles.sliderContainer}>
</div> <label style={styles.label}>
<div style={styles.sliderContainer}> QR Code Position X:
<label style={styles.label}> <div style={styles.sliderWrapper}>
QR Code Position X: <span style={styles.labelStart}>0%</span>
<div style={styles.sliderWrapper}> <input
<span style={styles.labelStart}>0%</span> type="range"
<input step="0.25"
type="range" name="left"
step="0.25" min="0"
name="left" max="100"
min="0" value={initialPos.left}
max="100" onChange={handlePositionChange}
value={initialPos.left} style={styles.input}
onChange={handlePositionChange} />
style={styles.input} <span style={styles.value}>{initialPos.left}%</span>
/> </div>
<span style={styles.value}>{initialPos.left}%</span> </label>
</div> </div>
</label> <div style={styles.sliderContainer}>
</div> <label style={styles.label}>
<div style={styles.sliderContainer}> QR Code Position Y:
<label style={styles.label}> <div style={styles.sliderWrapper}>
QR Code Position Y: <span style={styles.labelStart}>0%</span>
<div style={styles.sliderWrapper}> <input
<span style={styles.labelStart}>0%</span> type="range"
<input step="0.25"
type="range" name="top"
step="0.25" min="0"
name="top" max="100"
min="0" value={initialPos.top}
max="100" onChange={handlePositionChange}
value={initialPos.top} style={styles.input}
onChange={handlePositionChange} />
style={styles.input} <span style={styles.value}>{initialPos.top}%</span>
/> </div>
<span style={styles.value}>{initialPos.top}%</span> </label>
</div> </div>
</label> </>}
</div>
</>}
{/* <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}> {/* <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
{isConfigFont ? '˅' : '˃'} Konfigurasi nomor {isConfigFont ? '˅' : '˃'} Konfigurasi nomor
</p> */} </p> */}
{isConfigFont && ( {isConfigFont && (
<> <>
<div style={styles.sliderContainer}> <div style={styles.sliderContainer}>
<label style={styles.label}> <label style={styles.label}>
Ukuran nomor meja: Ukuran nomor meja:
<div style={styles.sliderWrapper}> <div style={styles.sliderWrapper}>
<span style={styles.labelStart}>10%</span> <span style={styles.labelStart}>10%</span>
<input <input
type="range" type="range"
step="0.25" step="0.25"
min="10" min="10"
max="100" max="100"
value={fontsize} value={fontsize}
onChange={handleFontSizeChange} onChange={handleFontSizeChange}
style={styles.input} style={styles.input}
/> />
<span style={styles.value}>{fontsize}%</span> <span style={styles.value}>{fontsize}%</span>
</div>
</label>
</div> </div>
</label> <div style={styles.sliderContainer}>
</div> <label style={styles.label}>
<div style={styles.sliderContainer}> Posisi nomor meja - horizontal:
<label style={styles.label}> <div style={styles.sliderWrapper}>
Posisi nomor meja - horizontal: <span style={styles.labelStart}>0%</span>
<div style={styles.sliderWrapper}> <input
<span style={styles.labelStart}>0%</span> type="range"
<input step="0.25"
type="range" name="left"
step="0.25" min="0"
name="left" max="100"
min="0" value={initialFontPos.left}
max="100" onChange={handleFontPositionChange}
value={initialFontPos.left} style={styles.input}
onChange={handleFontPositionChange} />
style={styles.input} <span style={styles.value}>{initialFontPos.left}%</span>
/> </div>
<span style={styles.value}>{initialFontPos.left}%</span> </label>
</div> </div>
</label> <div style={styles.sliderContainer}>
</div> <label style={styles.label}>
<div style={styles.sliderContainer}> Posisi nomor meja - vertikal:
<label style={styles.label}> <div style={styles.sliderWrapper}>
Posisi nomor meja - vertikal: <span style={styles.labelStart}>0%</span>
<div style={styles.sliderWrapper}> <input
<span style={styles.labelStart}>0%</span> type="range"
<input step="0.25"
type="range" name="top"
step="0.25" min="0"
name="top" max="100"
min="0" value={initialFontPos.top}
max="100" onChange={handleFontPositionChange}
value={initialFontPos.top} style={styles.input}
onChange={handleFontPositionChange} />
style={styles.input} <span style={styles.value}>{initialFontPos.top}%</span>
/> </div>
<span style={styles.value}>{initialFontPos.top}%</span> </label>
</div> </div>
</label> <div style={styles.sliderContainer}>
</div> <label style={styles.label}>
<div style={styles.sliderContainer}> Warna nomor meja:
<label style={styles.label}> <div style={styles.sliderWrapper}>
Warna nomor meja: <input
<div style={styles.sliderWrapper}> type="color"
<input value='#FFFFFF' // This should be the state holding the selected font color
type="color" onChange={(e) => setfontcolor(e.target.value)} // Update the font color state
value='#FFFFFF' // This should be the state holding the selected font color style={styles.colorInput} // Add your styles for the color input if needed
onChange={(e) => setfontcolor(e.target.value)} // Update the font color state />
style={styles.colorInput} // Add your styles for the color input if needed <span style={styles.value}>{fontcolor}</span> {/* Display the selected color value */}
/> </div>
<span style={styles.value}>{fontcolor}</span> {/* Display the selected color value */} </label>
</div> </div>
</label> </>
</div> )}
</>
)}
</div> </div>
} }
{/* <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}> {/* <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
{isViewTables ? '˅' : '˃'} Daftar meja {isViewTables ? '˅' : '˃'} Daftar meja
</p> */} </p> */}
{isViewTables && {isViewTables &&
<div style={{marginTop: '34px', marginLeft: '15px'}}> <div style={{ marginTop: '34px', marginLeft: '15px' }}>
<div style={styles.resultMessage}> <div style={styles.resultMessage}>
<input style={{borderRadius: '12px', paddingLeft: '13px', marginRight: '10px', width: '48%'}} placeholder="Meja A1" onChange={(e) => setTableNo(e.target.value)} value={tableNo}/> <input style={{ borderRadius: '12px', paddingLeft: '13px', marginRight: '10px', width: '48%' }} placeholder="Meja A1" onChange={(e) => setTableNo(e.target.value)} value={tableNo} />
<div <div
onClick={handleCreate} style={styles.uploadButton}>Buat meja</div> onClick={handleCreate} style={styles.uploadButton}>Buat meja</div>
</div> </div>
{tables && tables {tables && tables
.filter((table) => table.tableNo !== 0) .filter((table) => table.tableNo !== 0)
.map((table) => ( .map((table) => (
<li <li
key={table.tableId} key={table.tableId}
style={{ style={{
backgroundColor: backgroundColor:
table.tableId === selectedTable?.tableId table.tableId === selectedTable?.tableId
? "lightblue" ? "lightblue"
: "white", : "white",
marginBottom: "10px", marginBottom: "10px",
padding: "10px", padding: "10px",
borderRadius: "4px", borderRadius: "4px",
boxShadow: "0 2px 4px rgba(0,0,0,0.1)", boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
cursor: "pointer", cursor: "pointer",
listStyle: 'square' listStyle: 'square'
}} }}
onClick={() => setSelectedTable(selectedTable == table ? null : table)} onClick={() => setSelectedTable(selectedTable == table ? null : table)}
> >
<div style={{ marginBottom: "10px" }}> <div style={{ marginBottom: "10px" }}>
{table.tableNo} {table.tableNo}
</div> </div>
</li> </li>
)) ))
}
</div>
} }
</div> </div>
} <div style={styles.buttonContainer}>
</div> <button onClick={handleSave} style={styles.saveButton}>
<div style={styles.buttonContainer}> Simpan
<button onClick={handleSave} style={styles.saveButton}> </button>
Simpan <button onClick={() => setIsViewingQR(true)} style={styles.saveButton}>
</button> Download QR {selectedTable ? 'meja' : 'kedai'}
<button onClick={()=>setIsViewingQR(true)} style={styles.saveButton}> </button>
Download QR {selectedTable? 'meja' : 'kedai'} </div>
</button> </> :
</div> <>
</> : <div style={styles.uploadMessage}>
<> <p>Ini adalah QR yang dapat di scan oleh tamu untuk memesan </p>
<div style={styles.uploadMessage}> {/* <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p> */}
<p>Ini adalah QR yang dapat di scan oleh tamu untuk memesan </p> </div>
{/* <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p> */} <div style={styles.buttonContainer}>
</div> <button onClick={() => downloadQrCodeContainer({ selectedTable, shop })} style={styles.saveButton}>
<div style={styles.buttonContainer}> Download QR {selectedTable ? 'meja' : 'kedai'}
<button onClick={()=>downloadQrCodeContainer({selectedTable, shop})} style={styles.saveButton}> </button>
Download QR {selectedTable? 'meja' : 'kedai'} </div>
</button> <div style={styles.backButtonContainer}>
</div> <p onClick={() => setIsViewingQR(false)} >
<div style={styles.backButtonContainer}> Kembali
<p onClick={()=>setIsViewingQR(false)} > </p>
Kembali </div>
</p> </>
</div>
</>
} }
</div> </div>
); );

2
src/pages/Dashboard.js
View File

@@ -678,7 +678,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
</div> </div>
<div className={styles.dashboardBody}> <div className={styles.dashboardBody}>
<button className={styles.goCafeButton} style={{ visibility: (selectedItems?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId) == null ? 'hidden' : 'visible' }} onClick={() => window.location.href = window.location.origin + '/' + (selectedItems?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId)}>Kunjungi kedai</button> <button className={styles.goCafeButton} style={{ visibility: (selectedItems?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId) == null ? 'hidden' : 'visible' }} onClick={() => window.location.href = window.location.origin + '/' + (selectedItems?.cafeIdentifyName || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeIdentifyName)}>Kunjungi kedai</button>
<h3 style={{color: 'black'}}>terlaku</h3> <h3 style={{color: 'black'}}>terlaku</h3>
<div <div

11
src/pages/NotificationRequest.js
View File

@@ -26,15 +26,16 @@ export default function Transaction_pending({ setModal }) {
return ( return (
<div className={styles.Transaction}> <div className={styles.Transaction}>
<div style={{ marginTop: "30px", textAlign: "center" }}> <div style={{ marginTop: "30px", textAlign: "center", padding: '10px' }}>
<h2>Aktifkan Notifikasi</h2>
<img <img
className={styles.expression} className={styles.expression}
src="https://i.imgur.com/sgvMI02.png" src="https://i.imgur.com/sgvMI02.png"
alt="Success" alt="Success"
/> />
<h2>Notifikasi tidak aktif</h2>
<p style={{ marginTop: "20px", color: "black" }}> <p style={{ marginTop: "20px", color: "black" }}>
Sepertinya notifikasi untuk situs ini tidak aktif. Aktifkan notifikasi supaya kamu tetap dapat info pesanan, meski sedang buka aplikasi lain. Aktifkan notifikasi supaya kamu tetap dapat info pesanan, meski sedang buka aplikasi lain.
</p> </p>
<button <button
onClick={handleNotificationClick} onClick={handleNotificationClick}
@@ -46,7 +47,7 @@ export default function Transaction_pending({ setModal }) {
backgroundColor: "#4CAF50", backgroundColor: "#4CAF50",
color: "#fff", color: "#fff",
border: "none", border: "none",
borderRadius: "5px", borderRadius: "20px",
}} }}
> >
Aktifkan Aktifkan