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
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

108
src/pages/Dashboard.js
View File

@@ -24,6 +24,7 @@ const LinktreePage = ({ user, setModal }) => {
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) => {
@@ -133,6 +134,51 @@ const LinktreePage = ({ user, setModal }) => {
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 (
<>
{user && user.roleId < 2 ? (
@@ -153,18 +199,14 @@ const LinktreePage = ({ user, setModal }) => {
</div>
<div className={styles.headerCardWrapper}>
<div className={styles.headerCard}>
<h1>Total pemasukan</h1>
<h1>Total pemasukan {items?.totalIncomeFromAllTenant}</h1>
</div>
</div>
</div>
<div style={{ flex: 1 }}>
<CircularDiagram segments={[]} />
</div>
<div style={{ flex: 1 }}>
<CircularDiagram segments={[]} />
<CircularDiagram segments={segments} />
</div>
<div className={styles.cafeListWrapper}>
<div className={styles.cafeListHeader}>
@@ -176,44 +218,62 @@ 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 == 0 ? -1 : 0)}
onClick={() => setSelectedItemId(selectedItemId == -1 ? 0 : -1)}
>
Tambah penyewa
</div>
}
{
items && Array.isArray(items.tenants) && items.tenants.length > 0 ? (
items.tenants.map((tenant, tenantIndex) => (
<>
<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}>
items?.tenants?.length > 0 ? (
items.tenants.map((tenant) => {
const isTenantSelected = selectedItemId === tenant.userId;
const tenantBackgroundColor = isTenantSelected && !selectedSubItemId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
const hasCafes = tenant?.cafes?.length > 0;
return (
<div key={tenant.userId}>
<div
onClick={() => {
setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : tenant.userId);
setSelectedSubItemId(0); // Reset subitem selection when changing tenant
}}
style={{ backgroundColor: tenantBackgroundColor }}
className={isTenantSelected ? styles.rectangleNLine : styles.rectangle}
>
<h3>{tenant.username}</h3>
<div>
Total Pendapatan: {formatIncome(tenant.totalIncome)} {/* Total Income for the tenant */}
Total Pendapatan: {formatIncome(tenant.totalIncome)}
</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)';
{selectedItemId == tenant.userId && tenant.cafes && tenant.cafes.length > 0 && tenant.cafes.map((cafe, cafeIndex) => (
<div>
<h5 >↳</h5>
<div key={cafe.cafeId} className={styles.subRectangle}
onClick={() => setSelectedItemId(selectedItemId === cafe.cafeId ? -1 : cafe.cafeId)}
style={{
backgroundColor: selectedItemId === cafe.cafeId ? '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 style={{height:'2px'}}></div>
{user.roleId > 0 &&
<div className={styles.rectangle}

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

@@ -327,31 +327,86 @@
.rectangle {
height: 50px; /* Height of each rectangle */
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px; /* Rounded corners */
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-bottom: 20px; /* Add some space below the rectangle */
}
.rectangleNLine {
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-bottom: 20px; /* Add some space below the rectangle */
}
.subRectangle {
height: 50px; /* Height of each rectangle */
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px; /* Rounded corners */
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-left: 60px;
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 {
background-color: white;