update home ui

Author: thaihv

prototype/lvis-ui/public/notify_bell.png

@@ -79,7 +79,7 @@ const ValuationMap = () => {
     );
   };
   return (
-    <div style={{ position: 'relative', height: '100vh' }}>
+    <div style={{ position: 'relative', height: '75vh' }}>
       <MapContainer
         zoomControl={false}
         bounds={extent}

prototype/lvis-ui/src/components/map/ValuationMap.jsx

@@ -260,7 +260,7 @@ const Toolbar = ({ baseLayers, overlays, onBaseLayerChange, onOverlayToggle, ext
     { name: 'Measure', content: <MeasureIcon />, impl: <MeasurementControl /> },
     { name: 'Divider', content: null, impl: null },
     { name: 'Extend', content: <ExtendIcon />, impl: <ExtendControl /> },
-    { name: 'Scale', content: <AspectRatioOutlinedIcon />, impl: <ScaleTableControl /> },
+//    { name: 'Scale', content: <AspectRatioOutlinedIcon />, impl: <ScaleTableControl /> },
     { name: 'ZoomIn', content: <ZoomInButton />, impl: null },
     { name: 'Level', content: <ZoomDisplayButton />, impl: null },
     { name: 'ZoomOut', content: <ZoomOutButton />, impl: null },
@@ -278,7 +278,7 @@ const Toolbar = ({ baseLayers, overlays, onBaseLayerChange, onOverlayToggle, ext
         const isExtendControl = tool.name === 'Extend' ? true : false;
         if (!content && !implement) { // is Divider
           return (
-            <Box m="1.25vh 0 1.25vh 0" key={index}>
+            <Box m="1vh 0 1vh 0" key={index}>
             </Box>
           );
         }

prototype/lvis-ui/src/components/map/toolbar/Toolbar.jsx

@@ -59,14 +59,14 @@ export default function LeftBar() {
         display: "flex",
         position: "absolute",
         justifyContent: "flex-start",
-        height: "100vh",
+        height: "75vh",
         zIndex: "drawer",
       }}
     >
       <div {...getCollapseProps()}>
         <div
           style={{
-            height: "100vh",
+            height: "75vh",
             background: theme.palette.background.alt,
           }}
         >

prototype/lvis-ui/src/components/toolbars/LeftBar.jsx

@@ -1,16 +1,67 @@
 import {
   Box,
   Typography,
-  IconButton,
-  InputBase,
   useTheme,
 } from "@mui/material";
-import {Search} from "@mui/icons-material";
 import TopBox from "../../components/TopBox";
-import FlexBetween from "../../components/FlexBetween";
 import ChooserWidget from "../widgets/ChooserWidget";
 import { useTranslation } from "react-i18next";
 
+
+const notifications = [
+  { title: '2024 Land Price Valuation Standards Update for Lao PDR', date: '2024-01-02' },
+  { title: 'Land Price Information System Maintenance Notice', date: '2024-01-02' },
+  { title: 'New Land Registration Feature Now Available', date: '2024-01-02' },
+];
+
+const NotificationBox = () => {
+  return (
+    <Box
+      sx={{
+        mt: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        backgroundColor: '#f5f5f5',
+        borderRadius: '10px',
+        padding: '16px',
+        gap: '50px',
+      }}
+    >
+      {/* Icon on the left side */}
+      <img
+        src="/notify_bell.png"
+        alt="Notification Icon"
+        style={{ width: '40px', height: '40px' }}
+      />
+
+      {/* Notifications list */}
+      <Box sx={{ flex: 1 }}>
+        {notifications.map((item, index) => (
+          <Box
+            key={index}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '5px 0',
+              //borderBottom: index !== notifications.length - 1 ? '1px solid #e0e0e0' : 'none',
+              gap: '100px',
+            }}
+          >
+            {/* Notification title */}
+            <Typography variant="body1">{item.title}</Typography>
+
+            {/* Notification date */}
+            <Typography variant="body2" sx={{ color: '#757575' }}>
+              {item.date}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
 const Middle = () => {
   const theme = useTheme();
   const { t } = useTranslation();  
@@ -25,43 +76,42 @@ const Middle = () => {
       <Box 
         display="flex" 
         flexDirection="column"
-        alignItems="flex-start"
+        justifyContent="center"
+        alignItems="center"
+        gap="30px"
         sx={{
           "& .MuiTypography-root ": {
             lineHeight: '1.25',           
           },
         }} 
       >
-        <Typography fontSize="18px" fontWeight="bold" color={theme.palette.neutral.medium}>          
-          LVIS(Land Valuation Information System)
+        <Typography fontSize="28px" fontWeight="bold" color={theme.palette.neutral.medium}>          
+        ລະບົບຂໍ້ມູນລາຄາທີ່ດິນໃນ ສປປ ລາວ
         </Typography>     
         <Typography 
               sx={{
                 color: theme.palette.neutral.medium,
-                fontSize: "72px",
+                fontSize: "45px",
                 fontWeight: "bold",
+                position: 'relative',
+                paddingBottom: '15px', // Adjust padding to create space for the ::after text
+                '::after': {
+                  content: '"in Lao PDR"',
+                  position: 'absolute',
+                  right: -25,
+                  bottom: 0,
+                  backgroundColor: 'yellow',
+                  color: 'red',
+                  fontSize: '12px',
+                  padding: '2px 4px',
+                  borderRadius: '4px',
+                },
               }} 
             >            
-              {t("Land Value Information System")}
+              {t("Land Price Information System")}
         </Typography>
       </Box>      
-      <FlexBetween
-          backgroundColor={theme.palette.background.alt}
-          borderRadius="30px"
-          gap="3rem"
-          p="0.1rem 1.5rem"
-          width="38%" 
-          height="50px"
-          border="1px solid #999999"
-          mt="3rem"
-        >
-        <InputBase       
-          fullWidth 
-          placeholder={t("Please enter a search term (region name, town name, code, etc.).")} />
-        <IconButton>
-          <Search />
-        </IconButton>
-      </FlexBetween>
+      <NotificationBox />
       <Box
         sx={{
           width: "100%",
@@ -77,6 +127,8 @@ const Middle = () => {
   );
 };
 
+
+
 const HomePage = () => {
   const { t } = useTranslation();
   return (

prototype/lvis-ui/src/scenes/home/index.jsx

@@ -8,7 +8,7 @@ const BaseInside = () => {
     <Box display="flex" width="100%" height="100%">
       <Box flexGrow={1}>
         <Box
-          height="100vh"
+          height="100%"
           position= "relative"
           sx={{
             display: "grid",

prototype/lvis-ui/src/scenes/maps/base/BaseInside.jsx

@@ -11,7 +11,7 @@ const Valuation = () => {
       <Header title="LAND VALUATION DOCUMENTATION" subtitle="Find your land valuation materials." />
       <Box
         mt="40px"
-        height="75vh"
+        height="75.25vh"
         border={`1px solid ${theme.palette.secondary[200]}`}
         borderRadius="4px"
       >

prototype/lvis-ui/src/scenes/maps/valuation/index.jsx

@@ -15,6 +15,7 @@ const ChooserWidget = ({ image, title, description, link, width="260px", height=
       height = {height} 
       display="flex" 
       flexDirection="column" 
+      bgcolor="#f5f5f5"
       alignItems="center"
       sx={{ 
         minWidth: 260,