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

122
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}>
<h3>{tenant.username}</h3>
<div>
Total Pendapatan: {formatIncome(tenant.totalIncome)} {/* Total Income for the tenant */}
</div>
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;
</div>
{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={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}
>
{cafe.name}
&nbsp;pendapatan {formatIncome(cafe.report?.totalIncome || 0)}
<h3>{tenant.username}</h3>
<div>
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)';
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}