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

ok

Browse Source
This commit is contained in:
zadit
2024-11-24 13:21:42 +07:00
parent 89b12737b7
commit 529a7e505c
7 changed files with 700 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/BarChart.js
View File

@@ -98,33 +98,47 @@ const SimpleBarChart = ({ Data }) => {
const month = formattedDate.toLocaleString('en-US', { month: 'short' }); // Get the abbreviated month (e.g., "Nov")
const year = formattedDate.getFullYear().toString().slice(2); // Get the last two digits of the year (e.g., "24")
// Extract the month and year from the date
const currentMonth = formattedDate.toLocaleDateString('en-US', { month: 'short' });
const currentYear = formattedDate.getFullYear();
// Extract the year from the first data point
const firstYear = new Date(sortedData[0]?.date).getFullYear();
// Check if all dates have the same year
const allSameYear = sortedData.every((item) => new Date(item.date).getFullYear() === firstYear);
// If all dates are from the same year, show only "day month"
if (allSameYear && formattedDate.toLocaleString('en-US', { month: 'short' }) !== lastMonthRef.current) {
lastMonthRef.current = formattedDate.toLocaleString('en-US', { month: 'short' });
// Show just the day and month if all dates have the same year
return `${day} ${month}`;
}
// if (allSameYear) {
// // Show just the day and month if all dates have the same year
// return `${day} ${month}`;
// }
// Check if it's the oldest date (first entry)
if (date === oldestDate) {
lastMonthRef.current = currentMonth; // Update lastMonthRef for the first entry
lastYearRef.current = currentYear; // Update lastYearRef for the first entry
lastMonthRef.current = formattedDate.toLocaleDateString('en-US', { month: 'short' });
lastYearRef.current = formattedDate.getFullYear();
return `${day} ${month} ${year}`; // Format as "day month year" (e.g., "4 Nov 24")
}
// If the year changes, show the full date with year
if (currentYear !== lastYearRef.current) {
lastYearRef.current = currentYear; // Update year reference
if (formattedDate.getFullYear() !== lastYearRef.current) {
lastYearRef.current = formattedDate.getFullYear();
return `${day} ${month} ${year}`; // Show full date: day month year
}
// If the month changes, show the full date with month and year
if (currentMonth !== lastMonthRef.current) {
lastMonthRef.current = currentMonth; // Update month reference
return `${day} ${month} ${year}`; // Show full date: day month year
if (formattedDate.toLocaleString('en-US', { month: 'short' }) !== lastMonthRef.current) {
lastMonthRef.current = formattedDate.toLocaleString('en-US', { month: 'short' });
return `${day} ${month} `; // Show full date: day month year
}
// Only show the day if the month hasn't changed
return `${day}`; // Show just the day if the month remains the same
};
// Function to get the next available color from the palette, starting from a random index
const getNextColor = () => {
// Randomly pick a starting index from the color palette
@@ -158,8 +172,11 @@ const SimpleBarChart = ({ Data }) => {
interval={0} // Set interval to 0 to display all dates in data
ticks={uniqueDates} // Only use unique dates for the XAxis
/>
<Tooltip />
<Legend />
<Tooltip
itemStyle={{
color: '#3498db', // Set the tooltip text color to blue
}}
/>
<CartesianGrid strokeDasharray="3 3" />
{/* Dynamically create bars and labels for each unique material */}
@@ -168,7 +185,12 @@ const SimpleBarChart = ({ Data }) => {
<Bar dataKey={material} fill={getNextColor()}>
</Bar>
</React.Fragment>
))}
))}<Legend
wrapperStyle={{
color: '#3498db', // Set the legend text color to blue
backgroundColor: 'white'
}}
/>
</BarChart>
</ResponsiveContainer>
</div>

4
src/components/Modal.js
View File

@@ -1,6 +1,8 @@
import React from "react";
import styles from "./Modal.module.css";
import CreateClerk from "../pages/CreateClerk"
import CreateCafe from "../pages/CreateCafe"
import CreateTenant from "../pages/CreateTenant"
import TablesPage from "./TablesPage.js";
import PaymentOptions from "./PaymentOptions.js";
import TableMaps from "../components/TableMaps";
@@ -43,6 +45,8 @@ const Modal = ({ shop, isOpen, onClose, modalContent, setModal }) => {
{modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
{modalContent === "blocked_notification" && <NotificationBlocked />}
{modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
{modalContent === "create_kedai" && <CreateCafe shopId={shop.cafeId} />}
{modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
{modalContent === "edit_tables" && <TablesPage shop={shop} />}
{modalContent === "new_transaction" && (
<Transaction propsShopId={shop.cafeId} />

113
src/pages/CreateCafe.js Normal file
View File

@@ -0,0 +1,113 @@
import React, { useState } from 'react';
import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
const CreateClerk = ({ shopId }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState('');
const handleSubmit = async (event) => {
event.preventDefault();
setLoading(true);
setMessage('');
// Basic validation
if (!username || !password) {
setMessage('Username and password are required');
setLoading(false);
return;
}
try {
const create = await createClerks(shopId, username, password);
if (create) setMessage('Clerk created successfully');
else setMessage('Failed to create clerk');
} catch (error) {
setMessage('Error creating clerk');
} finally {
setLoading(false);
}
};
return (
<div style={styles.container}>
<h2 style={styles.header}>Tambah Kedai</h2>
<form onSubmit={handleSubmit} style={styles.form}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
style={styles.input}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
style={styles.input}
/>
<button type="submit" style={styles.button} disabled={loading}>
{loading ? 'Creating...' : 'Create Clerk'}
</button>
{message && (
<p style={{ ...styles.message, color: message.includes('success') ? 'green' : 'red' }}>
{message}
</p>
)}
</form>
</div>
);
};
// Basic styling to make it mobile-friendly with a white background
const styles = {
container: {
backgroundColor: '#fff',
width: '100%',
maxWidth: '350px',
margin: '0 auto',
padding: '20px',
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
borderRadius: '8px',
boxSizing: 'border-box',
},
header: {
textAlign: 'center',
marginBottom: '20px',
fontSize: '20px',
color: '#333',
},
form: {
display: 'flex',
flexDirection: 'column',
gap: '15px',
},
input: {
padding: '12px',
fontSize: '16px',
borderRadius: '8px',
border: '1px solid #ccc',
width: '100%',
boxSizing: 'border-box',
backgroundColor: '#f9f9f9',
},
button: {
padding: '12px',
fontSize: '16px',
borderRadius: '8px',
border: 'none',
backgroundColor: '#28a745',
color: 'white',
cursor: 'pointer',
width: '100%',
},
message: {
textAlign: 'center',
marginTop: '10px',
},
};
export default CreateClerk;

2
src/pages/CreateClerk.js
View File

@@ -33,7 +33,7 @@ const CreateClerk = ({ shopId }) => {
return (
<div style={styles.container}>
<h2 style={styles.header}>Create Clerk</h2>
<h2 style={styles.header}>Tambah Kasir</h2>
<form onSubmit={handleSubmit} style={styles.form}>
<input
type="text"

113
src/pages/CreateTenant.js Normal file
View File

@@ -0,0 +1,113 @@
import React, { useState } from 'react';
import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
const CreateClerk = ({ shopId }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState('');
const handleSubmit = async (event) => {
event.preventDefault();
setLoading(true);
setMessage('');
// Basic validation
if (!username || !password) {
setMessage('Username and password are required');
setLoading(false);
return;
}
try {
const create = await createClerks(shopId, username, password);
if (create) setMessage('Clerk created successfully');
else setMessage('Failed to create clerk');
} catch (error) {
setMessage('Error creating clerk');
} finally {
setLoading(false);
}
};
return (
<div style={styles.container}>
<h2 style={styles.header}>Tambah Kedai</h2>
<form onSubmit={handleSubmit} style={styles.form}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
style={styles.input}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
style={styles.input}
/>
<button type="submit" style={styles.button} disabled={loading}>
{loading ? 'Creating...' : 'Create Clerk'}
</button>
{message && (
<p style={{ ...styles.message, color: message.includes('success') ? 'green' : 'red' }}>
{message}
</p>
)}
</form>
</div>
);
};
// Basic styling to make it mobile-friendly with a white background
const styles = {
container: {
backgroundColor: '#fff',
width: '100%',
maxWidth: '350px',
margin: '0 auto',
padding: '20px',
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
borderRadius: '8px',
boxSizing: 'border-box',
},
header: {
textAlign: 'center',
marginBottom: '20px',
fontSize: '20px',
color: '#333',
},
form: {
display: 'flex',
flexDirection: 'column',
gap: '15px',
},
input: {
padding: '12px',
fontSize: '16px',
borderRadius: '8px',
border: '1px solid #ccc',
width: '100%',
boxSizing: 'border-box',
backgroundColor: '#f9f9f9',
},
button: {
padding: '12px',
fontSize: '16px',
borderRadius: '8px',
border: 'none',
backgroundColor: '#28a745',
color: 'white',
cursor: 'pointer',
width: '100%',
},
message: {
textAlign: 'center',
marginTop: '10px',
},
};
export default CreateClerk;

159
src/pages/Dashboard.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom";
import styles from './LinktreePage.module.css';
import { loginUser, getAnalytics, createCafeOwner } from "../helpers/userHelpers";
import { getOwnedCafes, createCafe, updateCafe } from "../helpers/cafeHelpers";
@@ -14,6 +14,9 @@ import BarChart from '../components/BarChart';
const LinktreePage = ({ user, setModal }) => {
const navigate = useNavigate();
const location = useLocation();
const [lastModal, setLastModal] = useState(false);
const [inputtingPassword, setInputtingPassword] = useState(false);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
@@ -23,15 +26,22 @@ const LinktreePage = ({ user, setModal }) => {
const [isCreating, setIsCreating] = useState(false);
const [newItem, setNewItem] = useState({ name: "", type: "" });
const [isModalOpen, setIsModalOpen] = useState(false);
const [expanded, setIsExpand] = useState(false);
const [expandedCafeId, setExpandedCafeId] = useState(null);
const [selectedItemId, setSelectedItemId] = useState(0);
const [selectedSubItemId, setSelectedSubItemId] = useState(0);
// Handle expand/collapse of cafe details
const handleToggleExpand = (cafeId) => {
setExpandedCafeId(expandedCafeId === cafeId ? null : cafeId);
};
useEffect(() => {
const urlParams = new URLSearchParams(location.search);
const modalParam = urlParams.get('modal');
if (lastModal && !modalParam) {
if (selectedItemId == -1) setSelectedItemId(0);
else if (selectedSubItemId == -1) setSelectedSubItemId(0);
}
if (modalParam) {
setLastModal(modalParam);
}
}, [location]);
// Handle user transactions
const handleMyTransactions = async () => {
@@ -136,6 +146,7 @@ const LinktreePage = ({ user, setModal }) => {
if (amount != null) return amount.toString();
}
};
const colors = [
// Complementary (for contrast with olive green)
"#FF6347", // Tomato red (complementary to olive green)
@@ -164,22 +175,33 @@ const LinktreePage = ({ user, setModal }) => {
const selectedSubItems = selectedItems?.subItems || [];
// 1. Optionally combine all report items from cafes of the selected tenant
const allSelectedSubItems = selectedSubItems.flatMap(cafe => cafe.report?.items || selectedItems.report.items || []);
let allSelectedSubItems = null;
if (user.roleId == 1)
allSelectedSubItems = selectedSubItems?.flatMap(cafe => cafe.report?.items || selectedItems.report.items || []);
// 2. Retrieve the specific cafe's report items if needed
const filteredItems = selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId) || { report: { items: [] } };
const filteredItems = selectedSubItems?.find(cafe => cafe.cafeId == selectedSubItemId) || { report: { items: [] } };
// 3. Decide whether to use combined items or individual cafe items
const segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedSubItems : selectedItemId != 0 && selectedItemId != -1 ? filteredItems.report?.items || [] : items?.items || []).map((item, index) => ({
let segments = [];
if (user.roleId == 1 || user.roleId == 0 && selectedItemId == 0)
segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedSubItems : selectedItemId != 0 && selectedItemId != -1 ? filteredItems.report?.items || [] : items?.items || []).map((item, index) => ({
percentage: item.percentage || (items.totalIncome / item.totalIncome || items.totalIncome / item.report.totalIncome) * 100,
value: item.username || item.name,
color: (colors && colors[index]) || "#cccccc", // Safe check for colors array
})) || []; // Ensure segments is an empty array if no items are availabled
// Function to combine items of all cafes for the selected tenant
console.log(selectedItems)
function combineSelectedTenantCafeReports(selectedItems) {
return selectedItems.cafes.flatMap(cafe => cafe.report?.items || []);
}
console.log(selectedItemId)
// Check if items and items.items are defined before proceeding
const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
// Sort the merged array by date if it's not empty
const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
return (
<>
@@ -339,7 +361,7 @@ const LinktreePage = ({ user, setModal }) => {
</g>
</svg>
<p>{selectedItems?.totalIncome}</p>
<p>pemasukan</p>
<p>pemasukann</p>
</div>
<div className={styles.cardItem}>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
@@ -382,8 +404,8 @@ const LinktreePage = ({ user, setModal }) => {
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
</g>
</svg>
<p>{selectedItems?.totalOutcome}</p>
<p>pengeluaran</p>
<p>{selectedItems?.totalIncome * 0.02}</p>
<p>tagihan</p>
</div>
<div className={styles.cardImg}>
<img
@@ -487,6 +509,50 @@ const LinktreePage = ({ user, setModal }) => {
<p>Total pengeluaran</p>
<p>{formatIncome(items?.totalOutcome)}</p>
</div>
<div className={styles.cardItem}>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
preserveAspectRatio="xMidYMid meet">
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
30 78 -20z"/>
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
-5 80 -22z"/>
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
</g>
</svg>
<p>Total tanggungan</p>
<p>{formatIncome(items?.totalIncome * 0.02)}</p>
</div>
</div>
) : (
<div className={styles.cardBody}>
@@ -585,7 +651,7 @@ const LinktreePage = ({ user, setModal }) => {
API_BASE_URL + "/" + (JSON.parse(selectedItems.welcomePageConfig)?.image || '') : 'https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg'
}
/>
<p>{selectedItems.name}</p>
<p>{selectedItems?.name}</p>
</div>
</div>
)
@@ -633,46 +699,30 @@ const LinktreePage = ({ user, setModal }) => {
))}
{segments.length < 1 &&
<>
{Array.from({ length: 5 }).map((_, index) => (
<div
key={index}
style={{
display: "flex",
alignItems: "center",
}}
>
<h5 style={{
width: '100%', margin: 0, textAlign: "left", backgroundColor: 'gray', color: 'gray'
}}>-</h5>
</div>
<div
<h5
style={{
display: "flex",
alignItems: "center",
width: '100%',
margin: 0,
textAlign: "left",
backgroundColor: 'gray',
color: 'gray',
borderRadius: '20px',
marginBottom: '2px',
}}
>
<h5 style={{
width: '100%', margin: 0, textAlign: "left", backgroundColor: 'gray', color: 'gray'
}}>-</h5>
</div>
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<h5 style={{
width: '100%', margin: 0, textAlign: "left", backgroundColor: 'gray', color: 'gray'
}}>-</h5>
</div>
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<h5 style={{
width: '100%', margin: 0, textAlign: "left", backgroundColor: 'gray', color: 'gray'
}}>-</h5>
-
</h5>
</div>
))}
</>
}
@@ -680,7 +730,7 @@ const LinktreePage = ({ user, setModal }) => {
</div>
<h3>penambahan stok</h3>
<BarChart Data={selectedItems?.report?.materialsPurchased} />
<BarChart Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
<div style={{ height: '24vh' }}></div>
</div>
@@ -695,7 +745,10 @@ const LinktreePage = ({ user, setModal }) => {
{user.roleId < 1 &&
<div className={styles.rectangle}
style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
onClick={() => { setSelectedItemId(selectedItemId == -1 ? 0 : -1); setModal('add-tenant') }}
onClick={() => {
setSelectedItemId(selectedItemId === -1 ? 0 : -1);
setModal('create_tenant');
}}
>
Tambah penyewa
</div>
@@ -746,9 +799,8 @@ const LinktreePage = ({ user, setModal }) => {
{selectedItemId == item.cafeId &&
<div
className={styles.subRectangle}
onClick={() => {
}}
style={{}}
onClick={() => { setSelectedSubItemId(selectedSubItemId == -1 ? 0 : -1); setModal('create_clerk') }}
style={{ backgroundColor: selectedItemId == item.cafeId && selectedSubItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
>
tambah kasir
</div>
@@ -762,9 +814,8 @@ const LinktreePage = ({ user, setModal }) => {
}
{user.roleId > 0 &&
<div className={styles.rectangle}
style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
onClick={() => setSelectedItemId(selectedItemId == -1 ? 0 : -1)}
onClick={() => { setSelectedItemId(selectedItemId == -1 ? 0 : -1); setModal('create_kedai') }}
>
Tambah kedai
</div>

4
src/pages/MaterialList.js
View File

@@ -422,6 +422,7 @@ const MaterialList = ({ cafeId, handleClose }) => {
</div>
)}
<div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
<div style={{marginTop:'58px'}} ></div>
</div>
);
};
@@ -433,7 +434,8 @@ const styles = {
width: '100vw',
top: 0,
right: 0,
backgroundColor: 'rgb(207, 207, 207)'
backgroundColor: 'rgb(207, 207, 207)',
overflowY: 'auto'
},
heading: {
textAlign: "center",