updates

app/components/molecules/vehicle-preview/index.tsx

@@ -22,7 +22,7 @@ function VehiclePreview(props: IProps) {
         }) : (
             <>
                 {
-                    props?.vehicles?.map((vehicle, i)=>{
+                    props?.vehicles?.slice(0, 4)?.map((vehicle, i)=>{
                     return (
                         <div key={i} className="flex flex-row items-center h-[200px] w-full justify-center relative rounded-xl overflow-hidden cursor-pointer " role="button" >
                             <Image

app/components/organism/Maps/LiveMapComponent/LiveMapComponent.tsx

@@ -1,112 +1,48 @@
-import React, { useMemo } from "react";
-import { Wrapper } from "@googlemaps/react-wrapper";
-import { IStation, IVehicle } from "../../../../globaltypes";
-import CarMarkerComponent from "../CarMarkerComponent/CarMarkerComponent";
-import { Flex } from "@chakra-ui/react";
-import { FlexRowCenterCenter } from "../../../../utils/theme/FlexConfigs";
-import getConfig from "next/config";
-
-interface IProps {
-  vehicles?: Partial<IVehicle & {
-    station?: Partial<IStation>
-  }>[];
-  marketId?: string;
-  loading?: boolean;
-}
-
-const LiveMapComponent = (props: IProps) => {
-  const { vehicles, loading } = props;
-
-  const initialCenter = useMemo(()=>{
-    const firstStation = vehicles?.[0]?.station
-
-    return {
-      lat: firstStation?.latitude ?? 0,
-      lng: firstStation?.longitude ?? 0
-    }
-  }, [vehicles?.length])
-
-  /**
-   * @todo add logic to fetch the location of the market id
-   */
-  return (
-    <Flex
-      w="full"
-      h="full"
-      {...FlexRowCenterCenter}
-      borderRadius="20px"
-      overflow="hidden"
-      border="1px solid"
-      borderColor="gray.200"
-      data-testid="map-component"
-    >
-      {
-        loading ? (
-          <div className="grid w-full bg-slate-200 h-[400px] animate-pulse "></div>
-        ) : (
-          <Wrapper apiKey={getConfig().publicRuntimeConfig.GOOGLE_MAPS_API_KEY}>
-            <Map
-              latitude={
-                initialCenter?.lat ?? 0
-              }
-              longitude={initialCenter?.lng ?? 0}
-              zoom={
-                // for now, the zoom will be fixed
-                5
-              }
-              mapTypeId="roadmap"
-            >
-              {vehicles?.map((vehicle, i) => (
-                <CarMarkerComponent key={i} {...vehicle} />
-              ))}
-            </Map>
-          </Wrapper>
-        )
-      }
-    </Flex>
-  );
-};
-
-interface IMapProps extends google.maps.MapOptions {
-  longitude?: number;
-  latitude?: number;
-  children?: React.ReactNode;
-}
-
-const Map = (props: IMapProps) => {
-  const { latitude, longitude, children, zoom } = props;
-  const ref = React.useRef(null);
-  const [map, setMap] = React.useState<google.maps.Map | null>(null);
-
-  React.useEffect(() => {
-    if (ref.current && !map) {
-      setMap(
-        new google.maps.Map(ref.current, {
-          zoomControl: true,
-          mapTypeControl: false,
-          streetViewControl: false,
-          center: {
-            lat: latitude ?? 0,
-            lng: longitude ?? 0,
-          },
-          zoom: zoom ?? 0,
-        })
-      );
-    }
-  }, [ref, map, latitude, longitude, zoom]);
-
-  return (
-    <>
-      <div ref={ref} style={{ height: "100%", width: "100%" }}  data-cy={'live-map'}/>
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          // set the map prop on the child component
-          // @ts-ignore
-          return React.cloneElement(child, { map });
-        }
-      })}
-    </>
-  );
-};
-
-export default LiveMapComponent;
+  import React, { useMemo } from "react";
+  import { Wrapper } from "@googlemaps/react-wrapper";
+  import { IStation, IVehicle } from "../../../../globaltypes";
+  import CarMarkerComponent from "../CarMarkerComponent/CarMarkerComponent";
+  import { Flex } from "@chakra-ui/react";
+  import { MapContainer, Marker, TileLayer, Tooltip, Popup } from "react-leaflet"
+  import "leaflet/dist/leaflet.css"
+  import "leaflet-defaulticon-compatibility"
+  import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"
+
+
+  const LiveMapComponent = (props: any) => {
+    const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json"
+
+    const position = [51.505, -0.09]
+
+    return (
+      <Flex
+      w="100%" // Set the width to 100%
+      h="100%" // Set the height to 100%
+      align="center" // Align the content to the center vertically
+      justify="center"
+        borderRadius="20px"
+        overflow="hidden"
+        border="1px solid"
+        borderColor="gray.200"
+        data-testid="map-component"
+      >
+
+<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+  <TileLayer
+    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  />
+  <Marker position={[51.505, -0.09]}>
+    <Popup>
+      A pretty CSS3 popup. <br /> Easily customizable.
+    </Popup>
+  </Marker>
+</MapContainer>
+      </Flex>
+    );
+  };
+
+
+
+
+  export default LiveMapComponent;

app/components/organism/Table/BaseTable/BaseTable.tsx

@@ -22,6 +22,8 @@ function BaseTable(props: IProps<any>) {
     const [tableData, setTableData] = React.useState<any[]>([])
     const { columns, data, dataFetchFunction, handlePageChange, primitiveProps } = props
 
+    console.log('columnsss', tableData)
+
     useEffect(() => {
         if (!isUndefined(data)) {
             setTableData(data)

app/mock/generate.ts

@@ -324,11 +324,46 @@ const withdrawals_schema = (host_ids: [string], payout_method_ids: [string], pay
     payout_method_id: z.enum(payout_method_ids),
 })
 
+
+
+
 const payout_method_ids = payout_methods.map(p => p.id)
 const payouts = generateMock(payouts_schema(host_ids as [string], payout_method_ids as [string]).array().length(30))
 const payout_ids = payouts.map(payout=>payout.id)
 const withdrawals = generateMock(withdrawals_schema(host_ids as [string], payout_method_ids as [string], payout_ids as [string]).array().length(30))
 
+const generateUpcomingReservations = (customer_ids, vehicle_ids, count) => {
+    return generateMock(
+        reservations_schema(customer_ids as [string], vehicle_ids as [string]).array().length(count),
+        {
+            dateMap: {
+                start_date_time: () => faker.date.future(),
+                end_date_time: (start_date_time) => faker.date.future(undefined, start_date_time),
+                created_at: () => faker.date.past(),
+            },
+        }
+    );
+};
+
+// Generate additional upcoming reservations for non-admin users
+const nonAdminUsers = users.filter((user) => user.user_type === 'CUSTOMER' && !user.is_admin);
+const additionalNonAdminReservations = generateUpcomingReservations(
+    nonAdminUsers.map((user) => user.id),
+    vehicle_ids,
+    5 // You can adjust the count as needed
+);
+
+// Generate additional upcoming reservations for admin users
+const adminUsers = users.filter((user) => user.is_admin);
+const additionalAdminReservations = generateUpcomingReservations(
+    adminUsers.map((user) => user.id),
+    vehicle_ids,
+    5 // You can adjust the count as needed
+);
+
+const updatedReservations = [...reservations, ...additionalNonAdminReservations, ...additionalAdminReservations];
+
+
 const all_data = {
     markets,
     submarkets,
@@ -390,7 +425,7 @@ const all_data = {
             },
         }
     }),
-    reservations: reservations.map((reservation)=>{
+    reservations: updatedReservations.map((reservation)=>{
         return {
             ...reservation,
             vehicle: {