Add Notification tab

src/components/ApplicationTab.tsx

@@ -6,6 +6,7 @@ import { getBuilding } from "../actions/data-manager";
 import { JWT_TENANT } from "../actions/network-manager";
 import { BuildingInvoices } from "./BuildingInvoices/BuildingInvoices";
 import { Issues } from "./Issues/Issues";
+import { Notifications } from "./Notifications/Notifications";
 import { Settings } from "./Settings/Settings";
 import { Voting } from "./Voting/Voting";
 
@@ -42,7 +43,7 @@ export const ApplicationTab = () => {
             { building &&
                 <Routes>
                     <Route path='overview' element={<div>Hello from overview</div>} />
-                    <Route path='notifications' element={<div>Hello from notifications</div>} />
+                    <Route path='notifications' element={<Notifications notifications={building.notifications}/>} />
                     <Route path='issues' element={<Issues issues={building.issues}/>} />
                     <Route path='voting' element={<Voting buildingId={buildingId} />} />
                     <Route path='invoices' element={<div>Hello from invoices</div>} />

src/components/Issues/Issue.tsx

@@ -6,44 +6,44 @@ import { Card } from "../Card/Card";
 import { ExpandIcon } from "../icons/ExpandIcon";
 
 const classes = {
-    wrapper: {
+    header: {
         display: 'flex',
-        flexDirection: 'column',
-        gap: '50px',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '20px'
     },
-    header: {
-        fontWeight: 600,
-        fontSize: '1.6em',
+    expandWrapper: {
+        marginLeft: 'auto',
+        transition: 'transform .25s',
+    },
+    description: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '5px'
     },
     subheader: {
         color: 'gray',
         fontSize: '0.9rem'
     },
-    subject: {
+    title: {
         fontSize: '1.2rem'
     },
-    button: {
-        marginLeft: 'auto',
-        borderRadius: '50px'
-    }
 } as const;
 
 export const Issue = ({ issue }: { issue: any }) => {
 
     const [expand, setExpand] = useState(false);
-    const {t} = useTranslation();
+    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) }}>
+            <Box sx={classes.header}>
+                <Typography sx={classes.title}>{issue.title}</Typography>
+                <Box sx={{ ...classes.expandWrapper, 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' }}>
+            <Box sx={classes.description}>
                 <Typography sx={classes.subheader}>Opis</Typography>
                 <Typography>{issue.description}</Typography>
             </Box>
@@ -54,7 +54,10 @@ export const Issue = ({ issue }: { issue: any }) => {
                         <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>
+                                <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+                                    <Typography >{`${ind + 1}. ${solution.name}`}</Typography>
+                                    <Typography sx={{ marginLeft: 'auto', fontWeight: 'bold' }}>{`${t("priceFormat", { num: (solution.price) })}`}</Typography>
+                                </Box>
                                 <Typography sx={{ paddingLeft: '10px', fontSize: '15px' }}>{solution.description || 'Opis resenja nije unet.'}</Typography>
                             </Box>
                         ))}

src/components/Notifications/Notification.tsx

+import { Box, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { Card } from "../Card/Card";
+
+const classes = {
+    header: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '20px'
+    },
+    expandWrapper: {
+        marginLeft: 'auto',
+        transition: 'transform .25s',
+    },
+    description: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '5px'
+    },
+    subheader: {
+        color: 'gray',
+        fontSize: '0.9rem'
+    },
+    title: {
+        fontSize: '1.2rem'
+    },
+} as const;
+
+export const Notification = ({ title, description }: { title: string, description: string }) => {
+
+    return (
+        <Card>
+            <Typography sx={classes.title}>{title}</Typography>
+            <Box sx={classes.description}>
+                <Typography sx={classes.subheader}>Opis</Typography>
+                <Typography>{description}</Typography>
+            </Box>
+        </Card>
+    );
+}
\ No newline at end of file

src/components/Notifications/Notifications.tsx

+import { TabWrapper } from "../TabWrapper/TabWrapper";
+import { Notification } from "./Notification";
+
+export const Notifications = ({ notifications }: { notifications: any }) => {
+
+    return (
+        <TabWrapper header="Obaveštenja">
+            {
+                notifications.map((notification: any, index: number) => (
+                    <Notification title={notification.title} description={notification.description} />
+                ))
+            }
+        </TabWrapper>);
+}
\ No newline at end of file

src/components/Voting/Voting.tsx

@@ -94,7 +94,7 @@ export const Voting = ({ buildingId }: { buildingId: string }): JSX.Element => {
                                             <FormControl>
                                                 <FormLabel>Opcije</FormLabel>
                                                 <RadioGroup value={selectedCandidateId} onChange={(event) => { setSelectedCandidateId(event.target.value) }}>
-                                                {voting.candidates.map((candidate, ind: number) => (<FormControlLabel value={candidate._id} control={<Radio />} label={candidate.name} key={ind} />))}
+                                                    {voting.candidates.map((candidate, ind: number) => (<FormControlLabel value={candidate._id} control={<Radio size="small"/>} label={candidate.name} key={ind} />))}
                                                 </RadioGroup>
                                             </FormControl>
                                         <Button variant='contained' sx={classes.button} disabled={selectedCandidateId === ''} onClick={handleVote}>Glasaj</Button>