kediritechnopark/kedaimaster
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-19 08:35:23 +07:00
parent 7daa8d6653
commit 9c700c4729
2 changed files with 171 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/pages/Dashboard.js
View File

@@ -24,6 +24,7 @@ const LinktreePage = ({ user, setModal }) => {
const [expanded, setIsExpand] = useState(false); const [expanded, setIsExpand] = useState(false);
const [expandedCafeId, setExpandedCafeId] = useState(null); const [expandedCafeId, setExpandedCafeId] = useState(null);
const [selectedItemId, setSelectedItemId] = useState(0); const [selectedItemId, setSelectedItemId] = useState(0);
const [selectedSubItemId, setSelectedSubItemId] = useState(0);
// Handle expand/collapse of cafe details // Handle expand/collapse of cafe details
const handleToggleExpand = (cafeId) => { const handleToggleExpand = (cafeId) => {
@@ -133,6 +134,51 @@ const LinktreePage = ({ user, setModal }) => {
if (amount != null) return amount.toString(); if (amount != null) return amount.toString();
} }
}; };
const colors = [
"#FF0000", // Red
"#FF6F00", // Dark Orange
"#FFD700", // Gold
"#32CD32", // Lime Green
"#00CED1", // Dark Turquoise
"#1E90FF", // Dodger Blue
"#8A2BE2", // BlueViolet
"#FF00FF", // Magenta
"#FF1493", // Deep Pink
"#FF4500", // OrangeRed
"#FFDAB9", // Peach Puff
"#4B0082", // Indigo
"#00FF7F", // Spring Green
"#C71585", // Medium Violet Red
"#F0E68C", // Khaki
"#FF6347", // Tomato
"#006400", // Dark Green
"#8B4513", // SaddleBrown
"#00BFFF", // Deep Sky Blue
"#FF69B4", // Hot Pink
];
const selectedTenant = items.tenants?.find(tenant => tenant.userId === selectedItemId);
// If the selected tenant is found, extract the cafes
const selectedTenantCafes = selectedTenant?.cafes || [];
// 1. Optionally combine all report items from cafes of the selected tenant
const allSelectedTenantCafeItems = selectedTenantCafes.flatMap(cafe => cafe.report?.items || []);
// 2. Retrieve the specific cafe's report items if needed
const filteredItems = selectedTenantCafes.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 ? allSelectedTenantCafeItems : filteredItems.report.items || []).map((item, index) => ({
percentage: item.percentage,
color: (colors && colors[index]) || "#cccccc", // Safe check for colors array
})) || []; // Ensure segments is an empty array if no items are available
// Function to combine items of all cafes for the selected tenant
function combineSelectedTenantCafeReports(selectedTenant) {
return selectedTenant.cafes.flatMap(cafe => cafe.report?.items || []);
}
return ( return (
<> <>
{user && user.roleId < 2 ? ( {user && user.roleId < 2 ? (
@@ -153,18 +199,14 @@ const LinktreePage = ({ user, setModal }) => {
</div> </div>
<div className={styles.headerCardWrapper}> <div className={styles.headerCardWrapper}>
<div className={styles.headerCard}> <div className={styles.headerCard}>
<h1>Total pemasukan</h1> <h1>Total pemasukan {items?.totalIncomeFromAllTenant}</h1>
</div> </div>
</div> </div>
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<CircularDiagram segments={[]} /> <CircularDiagram segments={segments} />
</div>
<div style={{ flex: 1 }}>
<CircularDiagram segments={[]} />
</div> </div>
<div className={styles.cafeListWrapper}> <div className={styles.cafeListWrapper}>
<div className={styles.cafeListHeader}> <div className={styles.cafeListHeader}>
@@ -176,44 +218,62 @@ const LinktreePage = ({ user, setModal }) => {
{user.roleId < 1 && {user.roleId < 1 &&
<div className={styles.rectangle} <div className={styles.rectangle}
style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }} style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
onClick={() => setSelectedItemId(selectedItemId == 0 ? -1 : 0)} onClick={() => setSelectedItemId(selectedItemId == -1 ? 0 : -1)}
> >
Tambah penyewa Tambah penyewa
</div> </div>
} }
{ {
items && Array.isArray(items.tenants) && items.tenants.length > 0 ? ( items?.tenants?.length > 0 ? (
items.tenants.map((tenant, tenantIndex) => ( items.tenants.map((tenant) => {
<> const isTenantSelected = selectedItemId === tenant.userId;
<div key={tenant.userId} onClick={() => setSelectedItemId(selectedItemId == tenant.userId ? 0 : tenant.userId)} style={{ backgroundColor: selectedItemId == tenant.userId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }} className={styles.rectangle}> const tenantBackgroundColor = isTenantSelected && !selectedSubItemId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
<h3>{tenant.username}</h3> const hasCafes = tenant?.cafes?.length > 0;
<div>
Total Pendapatan: {formatIncome(tenant.totalIncome)} {/* Total Income for the tenant */}
</div>
</div> return (
<div key={tenant.userId}>
{selectedItemId == tenant.userId && tenant.cafes && tenant.cafes.length > 0 && tenant.cafes.map((cafe, cafeIndex) => ( <div
<div> onClick={() => {
<h5 >↳</h5> setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : tenant.userId);
<div key={cafe.cafeId} className={styles.subRectangle} setSelectedSubItemId(0); // Reset subitem selection when changing tenant
onClick={() => setSelectedItemId(selectedItemId === cafe.cafeId ? -1 : cafe.cafeId)}
style={{
backgroundColor: selectedItemId === cafe.cafeId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)'
}} }}
style={{ backgroundColor: tenantBackgroundColor }}
className={isTenantSelected ? styles.rectangleNLine : styles.rectangle}
> >
{cafe.name} <h3>{tenant.username}</h3>
&nbsp;pendapatan {formatIncome(cafe.report?.totalIncome || 0)} <div>
Total Pendapatan: {formatIncome(tenant.totalIncome)}
</div>
</div> </div>
</div>
))} {/* Only show cafes if the tenant is selected */}
</> {selectedItemId === tenant.userId && hasCafes && tenant.cafes.map((cafe) => {
)) const isCafeSelected = selectedSubItemId === cafe.cafeId;
const cafeBackgroundColor = isCafeSelected ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
return (
<div
key={cafe.cafeId}
className={styles.subRectangle}
onClick={() => {
setSelectedSubItemId(isCafeSelected ? 0 : cafe.cafeId); // Toggle subitem selection
setSelectedItemId(tenant.userId); // Ensure tenant stays selected
}}
style={{ backgroundColor: cafeBackgroundColor }}
>
{cafe.name}
&nbsp;pendapatan {formatIncome(cafe.report?.totalIncome || 0)}
</div>
);
})}
</div>
);
})
) : ( ) : (
<div>No tenants available</div> <div>No tenants available</div>
) )
} }
<div style={{height:'2px'}}></div>
{user.roleId > 0 && {user.roleId > 0 &&
<div className={styles.rectangle} <div className={styles.rectangle}

105
src/pages/LinktreePage.module.css
View File

@@ -326,31 +326,86 @@
} }
.rectangle { .rectangle {
height: 50px; /* Height of each rectangle */ height: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; /* Rounded corners */ border-radius: 10px;
font-size: 20px; font-size: 20px;
background-color: rgb(114, 114, 114); background-color: rgb(114, 114, 114);
margin: 5%; margin: 5%;
position: relative; position: relative;
font-weight: 500; font-weight: 500;
} margin-bottom: 20px; /* Add some space below the rectangle */
.subRectangle { }
height: 50px; /* Height of each rectangle */ .rectangleNLine {
display: flex; height: 50px;
justify-content: center; display: flex;
align-items: center; justify-content: center;
border-radius: 10px; /* Rounded corners */ align-items: center;
font-size: 20px; border-radius: 10px;
background-color: rgb(114, 114, 114); font-size: 20px;
margin: 5%; background-color: rgb(114, 114, 114);
position: relative; margin: 5%;
font-weight: 500; position: relative;
margin-left: 60px; font-weight: 500;
} margin-bottom: 20px; /* Add some space below the rectangle */
}
.subRectangle {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-top: 10px; /* Move it down a little */
margin-left: 50px; /* Move it down a little */
}
/* Arrow + line connection */
.rectangleNLine::after {
content: "";
position: absolute;
left: -17px;
top: 50%;
width: 18px;
height: 2px; /* Line thickness */
background-color: rgb(114, 114, 114); /* Line color */
transform: translateY(-50%); /* Center the line vertically */
}
/* Arrow + line connection */
.subRectangle::after {
content: "";
position: absolute;
left: -45px; /* Position it to the left of the rectangle */
top: 50%; /* Center vertically */
width: 45px; /* Length of the horizontal line */
height: 2px; /* Line thickness */
background-color: rgb(114, 114, 114); /* Line color */
transform: translateY(-50%); /* Center the line vertically */
}
/* The arrow at the bottom */
.subRectangle::before {
content: "-";
position: absolute;
left: -45px;
top: -21%;
width: 2px;
height: 70px;
content: "";
position: absolute;
background-color: rgb(114, 114, 114);
transform: translateY(-50%);
}
.header { .header {