Fix navbar overlap and documents dates, add translations for payment order, remove overview tab

src/components/ApplicationTab.tsx

@@ -27,7 +27,7 @@ export const ApplicationTab = ({ building, selectedUnit }: { building: any, sele
     return (
         <Box sx={classes.wrapper}>
             <Routes>
-                <Route path='overview' element={<div>Hello from overview</div>} />
+                {/* <Route path='overview' element={<div>Hello from overview</div>} /> */}
                 <Route path='notifications' element={<Notifications notifications={building.notifications} />} />
                 <Route path='issues' element={<Issues issues={building.issues} />} />
                 <Route path='voting' element={<Voting />} />

src/components/Documents/DocumentsList.tsx

@@ -57,7 +57,7 @@ export const DocumentsList = ({ documents }: { documents: any }) => {
                         {documents.map((payable: any) => (
                             <TableRow key={payable._id} sx={classes.tableBody}>
                                 <TableCell align="left">{payable.name} </TableCell>
-                                <TableCell align="center">{t("formatDate", { date: new Date(payable.created) })}</TableCell>
+                                <TableCell align="center">{!!payable.created ? t("formatDate", { date: new Date(payable.created) }) : 'Nepoznat datum'}</TableCell>
                                 <TableCell align="center"><a href={payable.link}>{(payable.link.includes('dropboxusercontent')) ? <DownloadIcon /> : <LinkIcon />} </a></TableCell>
                             </TableRow>
                         ))}

src/components/LoginForm.tsx

@@ -85,7 +85,7 @@ export const LoginForm = () => {
         }
         localStorage.setItem(JWT_TENANT, res);
 
-        navigate('../tenant/overview');
+        navigate('../tenant/notifications');
     }
 
     const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>): void => {

src/components/NavBar/NavBar.css

@@ -9,4 +9,5 @@
     padding: 0.5vh;
     display: flex;
     align-items: center;
+    z-index: 1;
 }
\ No newline at end of file

src/components/SideMenu/SideMenuData.tsx

@@ -2,7 +2,7 @@ import { SubMenu } from "../../internal-types";
 import { ActivityIcon } from "../icons/ActivityIcon";
 import { BuidlingInvoicesIcon } from "../icons/BuildingInvoicesIcon";
 import { DocumentIcon } from "../icons/DocumentIcon";
-import { HomeIcon } from "../icons/HomeIcon";
+// import { HomeIcon } from "../icons/HomeIcon";
 import { InvoicesIcon } from "../icons/InvoicesIcon";
 import { LanguageIcon } from "../icons/LanguageIcon";
 import { NotificationIcon } from "../icons/NotificationIcon";
@@ -14,7 +14,7 @@ export const subMenu: SubMenu[] = [
     {
         title: 'Main menu',
         items: [
-            { title: 'Overview', icon: <HomeIcon />, path: 'overview' },
+            // { title: 'Overview', icon: <HomeIcon />, path: 'overview' },
             { title: 'Notifications', icon: <NotificationIcon />, path: 'notifications' },
             { title: 'Issues', icon: <ActivityIcon />, path: 'issues' },
             { title: 'Voting', icon: <VotingIcon />, path: 'voting' }

src/components/TenantInvoices/PaymentOrder.tsx

@@ -42,24 +42,24 @@ export const PaymentOrder = ({ recipient, debit, bankAccount, payReference }: {
 
     return (
         <Card>
-            <Typography sx={classes.title}>Nalog za uplatu</Typography>
+            <Typography sx={classes.title}>{t('Payment order')}</Typography>
             <Box sx={classes.mainContainer}>
                 <Box sx={classes.itemsContainer}>
-                    <PaymentOrderItem flex={1} label="Uplatilac" size="large" value={`${tenantInfo.firstName} ${tenantInfo.lastName}`} />
-                    <PaymentOrderItem flex={1} label="Svrha uplate" size="large" />
-                    <PaymentOrderItem flex={1} label="Primalac" size="large" value={recipient} />
+                    <PaymentOrderItem flex={1} label="Payer" size="large" value={`${tenantInfo.firstName} ${tenantInfo.lastName}`} />
+                    <PaymentOrderItem flex={1} label="Purpose of payment" size="large" />
+                    <PaymentOrderItem flex={1} label="Recipient" size="large" value={recipient} />
                 </Box>
                 <Divider sx={classes.divider} orientation="vertical" variant="middle" flexItem />
                 <Box sx={classes.itemsContainer}>
                     <Box sx={classes.itemsGroup}>
-                        <PaymentOrderItem flex={1} label='sifra placanja' size="small" value='221' />
-                        <PaymentOrderItem flex={1} label='valuta' size="small" value="RSD" />
-                        <PaymentOrderItem flex={4} label='iznos' size="small" value={t("nalog", { num: (debit > 0 ? debit : 0) })} />
+                        <PaymentOrderItem flex={1} label='payment code' size="small" value='221' />
+                        <PaymentOrderItem flex={1} label='currency' size="small" value="RSD" />
+                        <PaymentOrderItem flex={4} label='amount' size="small" value={t("nalog", { num: (debit > 0 ? debit : 0) })} />
                     </Box>
-                    <PaymentOrderItem flex={1} label='Racun primaoca' size="small" value={bankAccount} />
+                    <PaymentOrderItem flex={1} label="Recipient's account" size="small" value={bankAccount} />
                     <Box sx={classes.itemsGroup}>
                         <PaymentOrderItem flex={1} label='model' size="small" value='00' />
-                        <PaymentOrderItem flex={4} label='poziv na broj' size="small" value={payReference.replaceAll('-', '')} />
+                        <PaymentOrderItem flex={4} label='Invoice Id' size="small" value={payReference.replaceAll('-', '')} />
                     </Box>
                     <div style={{ marginLeft: "auto", maxWidth: 80 }}>
                         <QRCode

src/components/TenantInvoices/PaymentOrderItem.tsx

 import { Box, Button, Typography } from "@mui/material";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { CopyIcon } from "../icons/CopyIcon";
 
 const classes = {
@@ -34,10 +35,11 @@ const classes = {
 export const PaymentOrderItem = ({ flex, label, value, size }: { flex: number, label: string, value?: string, size: string }) => {
 
     const [hovered, setHovered] = useState(false);
+    const { t } = useTranslation();
 
     return (
         <Box sx={{ flex, ...classes.mainContainer }}>
-            <Typography variant={size === 'large' ? 'body2' : 'caption'}>{label}</Typography>
+            <Typography variant={size === 'large' ? 'body2' : 'caption'}>{t(label)}</Typography>
             <Box
                 sx={{ minHeight: size === 'large' ? '40px' : '25px', ...classes.valueContainer }}
                 onMouseEnter={() => { setHovered(true); }}

src/components/TenantInvoices/TenantInvoices.tsx

@@ -58,7 +58,7 @@ export const TenantInvoices = ({ building, unit }: { building: any, unit: any })
         return { invoices, bankAccount, lastUnpaid, payReference };
     }, [building.finance, unit.invoices]);
 
-    const { t, i18n } = useTranslation();
+    const { t } = useTranslation();
     const [info, setInfo] = useState<Test>(getInfo());
 
 
@@ -93,13 +93,11 @@ export const TenantInvoices = ({ building, unit }: { building: any, unit: any })
                     {info.invoices.length === 0 && <Typography sx={classes.noRecords} >{t('No records')}</Typography>}
                 </TableContainer>
             </Card>
-            {i18n.language === 'sr' &&
             <PaymentOrder
                 recipient={building.name}
                 debit={unit.debit}
                 bankAccount={info.bankAccount}
                 payReference={info.payReference} />
-            }
         </TabWrapper>
     );
 }
\ No newline at end of file

src/locale/en.json

@@ -43,6 +43,15 @@
         "per group/per unit":"per group",
         "per unit/per unit": "per unit",
         "per unit/per area": "per area",
+        "Payment order": "Payment order",
+        "Payer": "Payer",
+        "Purpose of payment": "Purpose of payment",
+        "Recipient": "Recipient",
+        "payment code": "payment code",
+        "currency": "currency",
+        "amount": "amount",
+        "Recipient's account": "Recipient's account",
+        "model": "model",
 
         "Name": "Name",
         "Action": "Action",

src/locale/sr.json

@@ -46,6 +46,15 @@
         "per group/per unit":"ukupno", 
         "per unit/per unit": "po stanu", 
         "per unit/per area": "po kvadraturi",
+        "Payment order": "Nalog za uplatu",
+        "Payer": "Uplatilac",
+        "Purpose of payment": "Svrha uplate",
+        "Recipient": "Primalac",
+        "payment code": "sifra plaćanja",
+        "currency": "valuta",
+        "amount": "iznos",
+        "Recipient's account": "Račun primaoca",
+        "model": "model",
         
         "Name": "Naziv",
         "Action": "Akcija",

src/services/i18n.ts

@@ -13,7 +13,7 @@ i18next
   .use(LanguageDetector)
   .init({
     resources,
-    debug: true,
+    debug: false,
     fallbackLng: 'sr',
     detection: {
       order: ['localStorage', 'navigator'],