Update navigation links in admin dashboard

aelassas · Feb 4, 2025 · 0b0501e · 0b0501e
1 parent c91e1bc
commit 0b0501e
Show file tree

Hide file tree

Showing 39 changed files with 206 additions and 113 deletions.
diff --git a/backend/src/assets/css/common.css b/backend/src/assets/css/common.css
@@ -34,6 +34,20 @@
   margin-bottom: 10px !important;
 }
 
+.btn-lnk {
+  background-color: transparent !important;
+  color: #1a1a1a !important;
+  font-weight: 400 !important;
+  text-decoration: underline !important;
+  font-size: 16px !important;
+  text-transform: none !important;
+  padding: 0 !important;
+}
+
+.btn-lnk:hover {
+  opacity: 0.8;
+}
+
 .validate-email {
   position: absolute;
   top: 65px;

diff --git a/backend/src/assets/css/create-user.css b/backend/src/assets/css/create-user.css
@@ -23,7 +23,6 @@ div.create-user {
 @media only screen and (width <=960px) {
   .user-form {
     width: 360px;
-    height: 950px;
     padding: 30px;
   }
 }
@@ -33,7 +32,6 @@ div.create-user {
 @media only screen and (width >=960px) {
   .user-form {
     width: 600px;
-    height: 840px;
     padding: 30px;
   }
 }
diff --git a/backend/src/components/AgencyList.tsx b/backend/src/components/AgencyList.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   IconButton,
   Button,
@@ -41,6 +42,8 @@ const AgencyList = ({
   onDelete,
   onLoad
 }: AgencyListProps) => {
+  const navigate = useNavigate()
+
   const [keyword, setKeyword] = useState(agencyListKeyword)
   const [init, setInit] = useState(true)
   const [loading, setLoading] = useState(false)
@@ -211,13 +214,13 @@ const AgencyList = ({
                   )} */}
                   {edit && (
                     <Tooltip title={commonStrings.UPDATE}>
-                      <IconButton href={`/update-agency?c=${agency._id}`}>
+                      <IconButton onClick={() => navigate(`/update-agency?c=${agency._id}`)}>
                         <EditIcon />
                       </IconButton>
                     </Tooltip>
                   )}
                   <Tooltip title={strings.VIEW_AGENCY}>
-                    <IconButton href={`/agency?c=${agency._id}`}>
+                    <IconButton onClick={() => navigate(`/agency?c=${agency._id}`)}>
                       <ViewIcon />
                     </IconButton>
                   </Tooltip>

diff --git a/backend/src/components/BookingList.tsx b/backend/src/components/BookingList.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   DataGrid,
   GridPaginationModel,
@@ -74,6 +75,8 @@ const BookingList = ({
   checkboxSelection,
   onLoad,
 }: BookingListProps) => {
+  const navigate = useNavigate()
+
   const [loggedUser, setLoggedUser] = useState<movininTypes.User>()
   const [user, setUser] = useState<movininTypes.User>()
   const [columns, setColumns] = useState<GridColDef<movininTypes.Booking>[]>([])
@@ -270,7 +273,7 @@ const BookingList = ({
           return (
             <div>
               <Tooltip title={commonStrings.UPDATE}>
-                <IconButton href={`update-booking?b=${row._id}`}>
+                <IconButton onClick={() => navigate(`/update-booking?b=${row._id}`)}>
                   <EditIcon />
                 </IconButton>
               </Tooltip>
@@ -571,7 +574,7 @@ const BookingList = ({
                       variant="contained"
                       className="btn-primary"
                       size="small"
-                      href={`update-booking?b=${booking._id}`}
+                      onClick={() => navigate(`/update-booking?b=${booking._id}`)}
                     >
                       {commonStrings.UPDATE}
                     </Button>

diff --git a/backend/src/components/CountryList.tsx b/backend/src/components/CountryList.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   IconButton,
   Button,
@@ -43,6 +44,8 @@ const CountryList = ({
   onLoad,
   onDelete
 }: CountryListProps) => {
+  const navigate = useNavigate()
+
   const [keyword, setKeyword] = useState(countryKeyword)
   const [init, setInit] = useState(true)
   const [loading, setLoading] = useState(false)
@@ -218,7 +221,7 @@ const CountryList = ({
                 secondaryAction={(
                   <div>
                     <Tooltip title={commonStrings.UPDATE}>
-                      <IconButton edge="end" href={`/update-country?loc=${country._id}`}>
+                      <IconButton edge="end" onClick={() => navigate(`/update-country?loc=${country._id}`)}>
                         <EditIcon />
                       </IconButton>
                     </Tooltip>

diff --git a/backend/src/components/Error.tsx b/backend/src/components/Error.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Link } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { Button } from '@mui/material'
 import { strings as commonStrings } from '@/lang/common'
 
 import '@/assets/css/error.css'
@@ -10,17 +11,21 @@ interface ErrorProps {
   homeLink?: boolean
 }
 
-const Error = ({ message, style, homeLink }: ErrorProps) => (
-  <div style={style || {}}>
-    <div className="error">
-      <span className="message">{message}</span>
+const Error = ({ message, style, homeLink }: ErrorProps) => {
+  const navigate = useNavigate()
+
+  return (
+    <div style={style || {}}>
+      <div className="error">
+        <span className="message">{message}</span>
+      </div>
+      {homeLink && (
+        <p>
+          <Button variant="text" onClick={() => navigate('/')} className="btn-lnk">{commonStrings.GO_TO_HOME}</Button>
+        </p>
+      )}
     </div>
-    {homeLink && (
-      <p>
-        <Link href="/">{commonStrings.GO_TO_HOME}</Link>
-      </p>
-    )}
-  </div>
-)
+  )
+}
 
 export default Error
diff --git a/backend/src/components/Header.tsx b/backend/src/components/Header.tsx
@@ -160,10 +160,12 @@ const Header = ({
   }
 
   const handleSettingsClick = () => {
+    handleMenuClose()
     navigate('/settings')
   }
 
   const handleSignout = async () => {
+    handleMenuClose()
     await UserService.signout()
   }
 

diff --git a/backend/src/components/LocationList.tsx b/backend/src/components/LocationList.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   IconButton,
   Button,
@@ -42,6 +43,8 @@ const LocationList = ({
   onLoad,
   onDelete
 }: LocationListProps) => {
+  const navigate = useNavigate()
+
   const [keyword, setKeyword] = useState(locationKeyword)
   const [init, setInit] = useState(true)
   const [loading, setLoading] = useState(false)
@@ -217,7 +220,7 @@ const LocationList = ({
                 secondaryAction={(
                   <div>
                     <Tooltip title={commonStrings.UPDATE}>
-                      <IconButton edge="end" href={`/update-location?loc=${location._id}`}>
+                      <IconButton edge="end" onClick={() => navigate(`/update-location?loc=${location._id}`)}>
                         <EditIcon />
                       </IconButton>
                     </Tooltip>

diff --git a/backend/src/components/PropertyList.tsx b/backend/src/components/PropertyList.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   IconButton,
   Button,
@@ -69,6 +70,8 @@ const PropertyList = ({
   onLoad,
   onDelete
 }: PropertyListProps) => {
+  const navigate = useNavigate()
+
   const [user, setUser] = useState<movininTypes.User>()
   const [init, setInit] = useState(true)
   const [loading, setLoading] = useState(false)
@@ -303,7 +306,7 @@ const PropertyList = ({
                       booking={booking}
                       className="property-info"
                       language={language}
-                      // description
+                    // description
                     />
                   </div>
 
@@ -316,19 +319,19 @@ const PropertyList = ({
 
                     <div className="action">
                       <Tooltip title={strings.VIEW_PROPERTY}>
-                        <IconButton href={`/property?p=${property._id}`}>
+                        <IconButton onClick={() => navigate(`/property?p=${property._id}`)}>
                           <ViewIcon />
                         </IconButton>
                       </Tooltip>
                       {edit && (
                         <>
                           <Tooltip title={strings.VIEW_BOOKINGS}>
-                            <IconButton href={`/property-bookings?p=${property._id}`}>
+                            <IconButton onClick={() => navigate(`/property-bookings?p=${property._id}`)}>
                               <BookingsIcon />
                             </IconButton>
                           </Tooltip>
                           <Tooltip title={commonStrings.UPDATE}>
-                            <IconButton href={`/update-property?p=${property._id}`}>
+                            <IconButton onClick={() => navigate(`/update-property?p=${property._id}`)}>
                               <EditIcon />
                             </IconButton>
                           </Tooltip>

diff --git a/backend/src/components/Unauthorized.tsx b/backend/src/components/Unauthorized.tsx
@@ -1,19 +1,24 @@
 import React, { CSSProperties } from 'react'
-import { Link } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { Button } from '@mui/material'
 import { strings as commonStrings } from '@/lang/common'
 import { strings } from '@/lang/unauthorized'
 
 interface UnauthorizedProps {
   style?: CSSProperties
 }
 
-const Unauthorized = ({ style }: UnauthorizedProps) => (
-  <div className="msg" style={style || {}}>
-    <h2>{strings.UNAUTHORIZED}</h2>
-    <p>
-      <Link href="/">{commonStrings.GO_TO_HOME}</Link>
-    </p>
-  </div>
-)
+const Unauthorized = ({ style }: UnauthorizedProps) => {
+  const navigate = useNavigate()
+
+  return (
+    <div className="msg" style={style || {}}>
+      <h2>{strings.UNAUTHORIZED}</h2>
+      <p>
+        <Button variant="text" onClick={() => navigate('/')} className="btn-lnk">{commonStrings.GO_TO_HOME}</Button>
+      </p>
+    </div>
+  )
+}
 
 export default Unauthorized
diff --git a/backend/src/components/UserList.tsx b/backend/src/components/UserList.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   DataGrid,
   GridColDef,
@@ -49,6 +50,8 @@ const UserList = ({
   checkboxSelection,
   onLoad
 }: UserListProps) => {
+  const navigate = useNavigate()
+
   const [user, setUser] = useState<movininTypes.User>()
   const [page, setPage] = useState(0)
   const [pageSize, setPageSize] = useState(env.PAGE_SIZE)
@@ -252,7 +255,7 @@ const UserList = ({
           return _user.type === movininTypes.RecordType.Admin || __user.agency === _user._id ? (
             <div>
               <Tooltip title={commonStrings.UPDATE}>
-                <IconButton href={`update-user?u=${row._id}`}>
+                <IconButton onClick={() => navigate(`/update-user?u=${row._id}`)}>
                   <EditIcon />
                 </IconButton>
               </Tooltip>

diff --git a/backend/src/pages/Activate.tsx b/backend/src/pages/Activate.tsx
@@ -1,14 +1,13 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   Input,
   InputLabel,
   FormControl,
   FormHelperText,
   Button,
   Paper,
-  Link
 } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
 import * as movininTypes from ':movinin-types'
 import * as UserService from '@/services/UserService'
 import Layout from '@/components/Layout'
@@ -170,7 +169,7 @@ const Activate = () => {
                 {mStrings.RESEND}
               </Button>
               <p className="go-to-home">
-                <Link href="/">{commonStrings.GO_TO_HOME}</Link>
+                <Button variant="text" onClick={() => navigate('/')} className="btn-lnk">{commonStrings.GO_TO_HOME}</Button>
               </p>
             </div>
           </Paper>
@@ -209,7 +208,7 @@ const Activate = () => {
                 <Button type="submit" className="btn-primary btn-margin btn-margin-bottom" size="small" variant="contained">
                   {reset ? commonStrings.UPDATE : strings.ACTIVATE}
                 </Button>
-                <Button className="btn-secondary btn-margin-bottom" size="small" variant="contained" href="/">
+                <Button className="btn-secondary btn-margin-bottom" size="small" variant="contained" onClick={() => navigate('/')}>
                   {commonStrings.CANCEL}
                 </Button>
               </div>

diff --git a/backend/src/pages/Agencies.tsx b/backend/src/pages/Agencies.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Button } from '@mui/material'
 import * as movininTypes from ':movinin-types'
 import Layout from '@/components/Layout'
@@ -11,6 +12,8 @@ import * as helper from '@/common/helper'
 import '@/assets/css/agencies.css'
 
 const Agencies = () => {
+  const navigate = useNavigate()
+
   const [user, setUser] = useState<movininTypes.User>()
   const [keyword, setKeyword] = useState('')
   const [rowCount, setRowCount] = useState(-1)
@@ -49,18 +52,18 @@ const Agencies = () => {
                   variant="contained"
                   className="btn-primary new-agency"
                   size="small"
-                  href="/create-agency"
+                  onClick={() => navigate('/create-agency')}
                 >
                   {strings.NEW_AGENCY}
                 </Button>
               )}
 
               {rowCount > 0 && (
-              <InfoBox
-                value={`${rowCount} ${rowCount > 1 ? strings.AGENCIES : strings.AGENCY}`}
-                className="agency-count"
-              />
-)}
+                <InfoBox
+                  value={`${rowCount} ${rowCount > 1 ? strings.AGENCIES : strings.AGENCY}`}
+                  className="agency-count"
+                />
+              )}
             </div>
           </div>
           <div className="col-2">