Add Issues tab

src/components/ApplicationTab.tsx

 import { Box } from "@mui/material"
 import jwtDecode from "jwt-decode";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
+import { getBuilding } from "../actions/data-manager";
 import { JWT_TENANT } from "../actions/network-manager";
 import { BuildingInvoices } from "./BuildingInvoices/BuildingInvoices";
+import { Issues } from "./Issues/Issues";
 import { Settings } from "./Settings/Settings";
 import { Voting } from "./Voting/Voting";
 
@@ -19,7 +21,7 @@ const classes = {
             paddingInline: '5%',
         }
     }
-} as const ;
+} as const;
 
 export const ApplicationTab = () => {
 
@@ -29,20 +31,27 @@ export const ApplicationTab = () => {
     }
 
     const [buildingId, setBuildingId] = useState(getBuildingId());
+    const [building, setBuilding] = useState<any>();
+
+    useEffect(() => {
+        getBuilding(buildingId, (err: any, data: any) => { setBuilding(data) });
+    }, []);
 
     return (
         <Box sx={classes.wrapper}>
+            { building &&
                 <Routes>
                     <Route path='overview' element={<div>Hello from overview</div>} />
                     <Route path='notifications' element={<div>Hello from notifications</div>} />
-                    <Route path='issues' element={<div>Hello from issues</div>} />
-                    <Route path='voting' element={<Voting buildingId={buildingId}/>} />
+                    <Route path='issues' element={<Issues issues={building.issues}/>} />
+                    <Route path='voting' element={<Voting buildingId={buildingId} />} />
                     <Route path='invoices' element={<div>Hello from invoices</div>} />
-                    <Route path='building-invoices' element={<BuildingInvoices buildingId={buildingId}/>} />
+                    <Route path='building-invoices' element={<BuildingInvoices buildingFinance={building.finance} />} />
                     <Route path='documents' element={<div>Hello from documents</div>} />
                     <Route path='settings' element={<Settings />} />
                     <Route path='*' element={<Navigate replace to="overview" />} />
                 </Routes>
+            }
         </Box>
     )
 }
\ No newline at end of file

src/components/BuildingInvoices/BuildingInvoices.tsx

-import { useEffect, useState } from "react";
-import { getBuilding } from "../../actions/data-manager";
 import { TabWrapper } from "../TabWrapper/TabWrapper";
 import { BuildingInvoicesList } from "./BuildingInvoicesList";
 
-export const BuildingInvoices = ({ buildingId }: { buildingId: string }) => {
-
-    const [building, setBuilding] = useState<any>();
-
-    useEffect(() => {
-        getBuilding(buildingId, (err: any, data: any) => { setBuilding(data) });
-    }, []);
-
+export const BuildingInvoices = ({ buildingFinance }: { buildingFinance: any }) => {
 
     return (
-        <>
-            {building &&
-                <TabWrapper header='Finansije Zgrade'>
-                    <BuildingInvoicesList building={building} />
-                </TabWrapper>
-            }
-        </>
+        <TabWrapper header='Finansije Zgrade'>
+            <BuildingInvoicesList buildingFinance={buildingFinance} />
+        </TabWrapper>
     );
 }
\ No newline at end of file

src/components/BuildingInvoices/BuildingInvoicesList.tsx

@@ -28,29 +28,29 @@ const classes = {
 
 } as const;
 
-export const BuildingInvoicesList = ({ building }: { building: any }) => {
+export const BuildingInvoicesList = ({ buildingFinance }: { buildingFinance: any }) => {
 
     const { t } = useTranslation();
 
-    let finance = building.finance || {}
+    let finance = buildingFinance || {}
 
-    let buildingPayable = building.finance && building.finance.payable && building.finance.payable.reduce((acc: any, x: any) => acc + x.price, 0)
-    let inflowSum = building.finance && building.finance.inflow && building.finance.inflow.reduce((acc: any, x: any) => acc + x.amount, 0)
-    let outflowSum = building.finance && building.finance.outflow && building.finance.outflow.reduce((acc: any, x: any) => acc + x.amount, 0)
-    let sumFundsPayables = (building.finance && building.finance.fund && building.finance.fund.reduce((acc: any, x: any) => acc + (x.receivable || 0), 0) || 0)
+    let buildingPayable = buildingFinance && buildingFinance.payable && buildingFinance.payable.reduce((acc: any, x: any) => acc + x.price, 0)
+    let inflowSum = buildingFinance && buildingFinance.inflow && buildingFinance.inflow.reduce((acc: any, x: any) => acc + x.amount, 0)
+    let outflowSum = buildingFinance && buildingFinance.outflow && buildingFinance.outflow.reduce((acc: any, x: any) => acc + x.amount, 0)
+    let sumFundsPayables = (buildingFinance && buildingFinance.fund && buildingFinance.fund.reduce((acc: any, x: any) => acc + (x.receivable || 0), 0) || 0)
 
 
-    let fullBalance = building.finance && inflowSum && buildingPayable && (inflowSum - buildingPayable - sumFundsPayables)
-    let cashBalance = building.finance && building.finance.balance
-    let calculatedCashBalance = building.finance && (inflowSum - outflowSum)
+    let fullBalance = buildingFinance && inflowSum && buildingPayable && (inflowSum - buildingPayable - sumFundsPayables)
+    let cashBalance = buildingFinance && buildingFinance.balance
+    let calculatedCashBalance = buildingFinance && (inflowSum - outflowSum)
 
-    let outflows = building.finance ? building.finance.outflow : []
+    let outflows = buildingFinance ? buildingFinance.outflow : []
 
     let fundMap = (finance.fund || []).reduce((a: any, x: any) => ({ ...a, [x._id]: x.name }), {})
     let fundOutflows = (outflows || []).filter((x: any) => !!x.fundId)
     fundOutflows = fundOutflows.map((x: any) => ({ name: x.reason, price: x.amount, accounting: fundMap[x.fundId], created: x.date, type: "fund" }))
 
-    let payables = building.finance ? building.finance.payable : []
+    let payables = buildingFinance ? buildingFinance.payable : []
 
     payables.push(...fundOutflows)
 

src/components/Issues/Issue.tsx

+import { Box, Collapse, Divider, Typography } from "@mui/material";
+import { display } from "@mui/system";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Card } from "../Card/Card";
+import { ExpandIcon } from "../icons/ExpandIcon";
+
+const classes = {
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '50px',
+    },
+    header: {
+        fontWeight: 600,
+        fontSize: '1.6em',
+    },
+    subheader: {
+        color: 'gray',
+        fontSize: '0.9rem'
+    },
+    subject: {
+        fontSize: '1.2rem'
+    },
+    button: {
+        marginLeft: 'auto',
+        borderRadius: '50px'
+    }
+} as const;
+
+export const Issue = ({ issue }: { issue: any }) => {
+
+    const [expand, setExpand] = useState(false);
+    const {t} = useTranslation();
+
+    return (
+        <Card>
+            <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '20px' }}>
+                <Typography sx={classes.subject}>{issue.title}</Typography>
+                <Box sx={{ marginLeft: 'auto', transition: 'transform .25s', transform: `rotate(${expand ? 180 : 0}deg)`, width: '20px'}} onClick={() => { setExpand(!expand) }}>
+                    <ExpandIcon />
+                </Box>
+                {/* <Typography sx={{ marginLeft: 'auto', transition: 'transform .5s', transform: `rotate(${expand ? 180 : 0}deg)` }} onClick={() => { setExpand(!expand) }}>V</Typography> */}
+
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
+                <Typography sx={classes.subheader}>Opis</Typography>
+                <Typography>{issue.description}</Typography>
+            </Box>
+            <Collapse in={expand} timeout={250}>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
+                    <Divider />
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
+                        <Typography sx={classes.subheader}>Rešenja</Typography>
+                        {issue.solutions.map((solution: any, ind: number) => (
+                            <Box key={ind}>
+                                <Typography >{`${ind + 1}. ${solution.name} - ${t("priceFormat", { num: (solution.price) })}`}</Typography>
+                                <Typography sx={{ paddingLeft: '10px', fontSize: '15px' }}>{solution.description || 'Opis resenja nije unet.'}</Typography>
+                            </Box>
+                        ))}
+                    </Box>
+                </Box>
+            </Collapse>
+        </Card>
+    );
+}
\ No newline at end of file

src/components/Issues/Issues.tsx

+import { Box, Divider, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Card } from "../Card/Card";
+import { TabWrapper } from "../TabWrapper/TabWrapper";
+import { Issue } from "./Issue";
+
+export const Issues = ({ issues }: { issues: any }) => {
+
+
+    const [open, setOpen] = useState(new Array(issues.length).fill(false));
+
+    useEffect(() => {
+        console.log(issues);
+    }, []);
+
+    return (
+        <TabWrapper header="Aktivnosti">
+            {
+                issues.map((issue: any, index: number) => (
+                    <Issue issue={issue} key={index}/>
+                ))
+            }
+        </TabWrapper>
+    );
+}
\ No newline at end of file

src/components/Voting/Voting.tsx

@@ -44,7 +44,6 @@ export const Voting = ({ buildingId }: { buildingId: string }): JSX.Element => {
 
     useEffect(() => {
         getTenentVoting(buildingId, (err: any, res: any, disp: any) => {
-            console.log(res);
             setStatus(res.status || "not allowed");
             setVoting(res);
         })

src/components/icons/ExpandIcon.tsx

+import './Icons.css';
+
+export const ExpandIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="expand-icon">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+    );
+}
+

src/components/icons/Icons.css

@@ -25,6 +25,12 @@
     width: 25%;
 }
 
+.expand-icon {
+    width: '100%';
+    stroke: rgb(86, 107, 130);
+    cursor: pointer;
+}
+
 @media (max-width: 800px) {
     .alert {
         width: 100px;