From 9c700c472986b247c3170bad0217d778edaa8ada Mon Sep 17 00:00:00 2001 From: zadit <75159257+insvrgent@users.noreply.github.com> Date: Tue, 19 Nov 2024 08:35:23 +0700 Subject: [PATCH] ok --- src/pages/Dashboard.js | 122 ++++++++++++++++++++++-------- src/pages/LinktreePage.module.css | 105 +++++++++++++++++++------ 2 files changed, 171 insertions(+), 56 deletions(-) diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 6fe87d4..290143b 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -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 }) => {
-

Total pemasukan

+

Total pemasukan {items?.totalIncomeFromAllTenant}

- -
- -
- +
@@ -176,44 +218,62 @@ const LinktreePage = ({ user, setModal }) => { {user.roleId < 1 &&
setSelectedItemId(selectedItemId == 0 ? -1 : 0)} + onClick={() => setSelectedItemId(selectedItemId == -1 ? 0 : -1)} > Tambah penyewa
} { - items && Array.isArray(items.tenants) && items.tenants.length > 0 ? ( - items.tenants.map((tenant, tenantIndex) => ( - <> -
setSelectedItemId(selectedItemId == tenant.userId ? 0 : tenant.userId)} style={{ backgroundColor: selectedItemId == tenant.userId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }} className={styles.rectangle}> -

{tenant.username}

-
- Total Pendapatan: {formatIncome(tenant.totalIncome)} {/* Total Income for the tenant */} -
+ 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; -
- - {selectedItemId == tenant.userId && tenant.cafes && tenant.cafes.length > 0 && tenant.cafes.map((cafe, cafeIndex) => ( -
-
↳
-
setSelectedItemId(selectedItemId === cafe.cafeId ? -1 : cafe.cafeId)} - style={{ - backgroundColor: selectedItemId === cafe.cafeId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' + return ( +
+
{ + setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : tenant.userId); + setSelectedSubItemId(0); // Reset subitem selection when changing tenant }} + style={{ backgroundColor: tenantBackgroundColor }} + className={isTenantSelected ? styles.rectangleNLine : styles.rectangle} > - {cafe.name} -  pendapatan {formatIncome(cafe.report?.totalIncome || 0)} +

{tenant.username}

+
+ Total Pendapatan: {formatIncome(tenant.totalIncome)} +
-
- ))} - - )) + + {/* 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 ( +
{ + setSelectedSubItemId(isCafeSelected ? 0 : cafe.cafeId); // Toggle subitem selection + setSelectedItemId(tenant.userId); // Ensure tenant stays selected + }} + style={{ backgroundColor: cafeBackgroundColor }} + > + {cafe.name} +  pendapatan {formatIncome(cafe.report?.totalIncome || 0)} +
+ ); + })} +
+ ); + }) ) : (
No tenants available
) } - +
{user.roleId > 0 &&