From bcf68bd22508ad1b491f9afcc6b2571cc040fc64 Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Thu, 22 Feb 2024 20:35:48 +1300
Subject: [PATCH 01/10] hub map setup

---
 config-demo/modules.json                      |   4 +
 package.json                                  |   1 +
 src/client/components/OfficeFloorMap.tsx      | 238 +++++++++++++-----
 src/client/components/ui/Avatar.tsx           |   2 +-
 src/client/components/ui/Button.tsx           |  18 +-
 src/client/components/ui/DaySlider.tsx        |  90 +++++++
 src/client/components/ui/ImageWithPanZoom.tsx |  55 ++++
 src/client/index.css                          |  15 ++
 src/client/utils/hooks.ts                     |   9 +-
 .../events/client/components/EventBadge.tsx   |  31 ++-
 .../events/client/components/EventPage.tsx    |   6 +-
 .../events/client/components/EventsPage.tsx   | 115 +++++++++
 .../events/client/components/GlobalEvents.tsx |   2 +-
 .../client/components/UpcomingEvents.tsx      |  20 +-
 src/modules/events/client/components/index.ts |   1 +
 src/modules/events/client/queries.ts          |  14 +-
 src/modules/events/manifest.json              |  10 +-
 .../events/server/models/event-application.ts |   1 +
 src/modules/events/server/models/event.ts     |   1 +
 src/modules/events/server/models/index.ts     |  13 +
 src/modules/events/server/router.ts           | 194 ++++++++++----
 src/modules/events/types.ts                   |  15 ++
 .../client/components/AdminGuestInvite.tsx    |  14 +-
 .../client/components/GuestInviteDetail.tsx   |  17 +-
 .../hub-map/client/components/HubMap.tsx      | 217 ++++++++++++++++
 .../client/components/ScheduledItem.tsx       | 144 +++++++++++
 .../client/components/ScheduledItemsList.tsx  | 149 +++++++++++
 .../hub-map/client/components/index.ts        |   1 +
 src/modules/hub-map/client/helpers/index.ts   |  49 ++++
 src/modules/hub-map/client/queries.ts         |  19 ++
 src/modules/hub-map/manifest.json             |  19 ++
 src/modules/hub-map/metadata-schema.ts        |   5 +
 src/modules/hub-map/permissions.ts            |   3 +
 src/modules/hub-map/server/helpers/index.ts   | 138 ++++++++++
 src/modules/hub-map/server/jobs/index.ts      |  13 +
 src/modules/hub-map/server/models/index.ts    |   1 +
 src/modules/hub-map/server/router.ts          | 192 ++++++++++++++
 src/modules/hub-map/types.ts                  |   0
 .../news/client/components/LatestNews.tsx     |  54 ++--
 .../news/client/components/NewsListPage.tsx   |  76 ++++++
 src/modules/news/client/components/index.ts   |   1 +
 src/modules/news/manifest.json                |   7 +
 .../office-visits/server/helpers/index.ts     |  52 +++-
 src/modules/office-visits/server/router.ts    |  73 +++---
 src/modules/office-visits/types.ts            |  15 ++
 .../client/components/RoomListing.tsx         |   2 +-
 .../components/RoomReservationRequest.tsx     |  43 +++-
 src/modules/room-reservation/server/router.ts |  39 +--
 .../room-reservation/shared-helpers/index.ts  |  11 +
 .../client/components/DateDeskPicker.tsx      |  20 +-
 .../visits/client/components/DeskPicker.tsx   |  14 +-
 .../visits/client/components/VisitDetail.tsx  |  15 +-
 .../client/components/VisitRequestForm.tsx    |  17 ++
 src/modules/visits/server/router.ts           |   2 +
 src/modules/visits/types.ts                   |   2 +
 src/server/app-config/schemas.ts              |  44 ++--
 src/server/constants.ts                       |   2 +
 yarn.lock                                     |  16 +-
 58 files changed, 2068 insertions(+), 273 deletions(-)
 create mode 100644 src/client/components/ui/DaySlider.tsx
 create mode 100644 src/client/components/ui/ImageWithPanZoom.tsx
 create mode 100644 src/modules/events/client/components/EventsPage.tsx
 create mode 100644 src/modules/hub-map/client/components/HubMap.tsx
 create mode 100644 src/modules/hub-map/client/components/ScheduledItem.tsx
 create mode 100644 src/modules/hub-map/client/components/ScheduledItemsList.tsx
 create mode 100644 src/modules/hub-map/client/components/index.ts
 create mode 100644 src/modules/hub-map/client/helpers/index.ts
 create mode 100644 src/modules/hub-map/client/queries.ts
 create mode 100644 src/modules/hub-map/manifest.json
 create mode 100644 src/modules/hub-map/metadata-schema.ts
 create mode 100644 src/modules/hub-map/permissions.ts
 create mode 100644 src/modules/hub-map/server/helpers/index.ts
 create mode 100644 src/modules/hub-map/server/jobs/index.ts
 create mode 100644 src/modules/hub-map/server/models/index.ts
 create mode 100644 src/modules/hub-map/server/router.ts
 create mode 100644 src/modules/hub-map/types.ts
 create mode 100644 src/modules/news/client/components/NewsListPage.tsx

diff --git a/config-demo/modules.json b/config-demo/modules.json
index 2ac1b89f..52f56c24 100644
--- a/config-demo/modules.json
+++ b/config-demo/modules.json
@@ -80,6 +80,10 @@
       "id": "news",
       "enabled": true
     },
+    {
+      "id": "hub-map",
+      "enabled": true
+    },
     {
       "id": "profile-questions",
       "enabled": true,
diff --git a/package.json b/package.json
index 36d4608f..9a0384ec 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "pino-pretty": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-easy-panzoom": "^0.4.4",
     "react-query": "^3.39.1",
     "react-table": "^7.8.0",
     "sequelize": "^6.29.0",
diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx
index e78addfd..23b3d6ac 100644
--- a/src/client/components/OfficeFloorMap.tsx
+++ b/src/client/components/OfficeFloorMap.tsx
@@ -1,73 +1,199 @@
-import React from 'react'
-import { Button } from '#client/components/ui'
-import { OfficeArea } from '#shared/types'
+import React, { MouseEventHandler } from 'react'
+import { Avatar, Button, P } from '#client/components/ui'
+import {
+  ScheduledItemType,
+  OfficeArea,
+  OfficeAreaDesk,
+  OfficeRoom,
+  VisitType,
+} from '#shared/types'
 import { cn } from '#client/utils'
+import { useStore } from '@nanostores/react'
+import * as stores from '#client/stores'
+import { ImageWithPanZoom } from './ui/ImageWithPanZoom'
+
+type PointComponentFunctionProps = (
+  item: OfficeAreaDesk | OfficeRoom,
+  isSelected: boolean,
+  isAvailable: boolean,
+  onClick: (id: string, kind: string) => MouseEventHandler<HTMLAnchorElement>
+) => Element | JSX.Element
+
+const pointCommonStyle =
+  'rounded-sm border-2 -translate-y-1/2 -translate-x-1/2 hover:scale-105 transition-all delay-100 '
+
+const PointComponent: Record<
+  VisitType.Visit | VisitType.RoomReservation,
+  PointComponentFunctionProps
+> = {
+  [VisitType.Visit]: (item, isSelected, isAvailable, onClick) => (
+    <Button
+      size="small"
+      kind={isSelected ? 'primary' : 'secondary'}
+      disabled={!isAvailable}
+      color={isSelected ? 'purple' : 'default'}
+      className={cn(
+        isSelected ? 'border-pink-600 bg-accents-pink' : 'bg-gray-100',
+        'min-h-[32px] min-w-[32px]',
+        pointCommonStyle
+      )}
+      onClick={onClick(item.id, VisitType.Visit)}
+    >
+      {item?.name}
+    </Button>
+  ),
+  [VisitType.RoomReservation]: (item, isSelected, isAvailable, onClick) => (
+    <Button
+      size="small"
+      kind={isSelected ? 'primary' : 'secondary'}
+      disabled={!isAvailable}
+      className={cn(
+        isSelected && 'border-pink-600 hover:text-white hover:bg-accents-pink',
+        'text-black bg-gray-100',
+        'sm:p-4',
+        pointCommonStyle
+      )}
+      onClick={onClick(item.id, VisitType.RoomReservation)}
+    >
+      <p className="font-bold">{item.name}</p>
+    </Button>
+  ),
+}
 
 type OfficeFloorMapProps = {
   area: OfficeArea
-  availableDeskIds: string[]
-  selectedDeskId: string | null
-  onToggleDesk: (deskId: string) => void
+  mappablePoints?: Array<any>
+  panZoom?: boolean
+  officeVisits?: Record<string, Array<ScheduledItemType>>
+  showUsers?: boolean
+  selectedPointId: string | null
+  clickablePoints?: string[]
+  onToggle: (id: string, kind: string) => void
 }
+
 export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
   area,
-  availableDeskIds,
-  selectedDeskId,
-  onToggleDesk,
+  mappablePoints,
+  panZoom = false,
+  officeVisits,
+  showUsers = false,
+  selectedPointId,
+  clickablePoints,
+  onToggle,
 }) => {
+  const me = useStore(stores.me)
+  const initialStartingPosition = selectedPointId
+    ? mappablePoints?.find(
+        (point: ScheduledItemType) => point.id === selectedPointId
+      )
+    : null
+
   const onClick = React.useCallback(
-    (deskId: string) => (ev: React.MouseEvent<HTMLButtonElement>) => {
+    (id: string, kind: string) => (ev: React.MouseEvent<HTMLButtonElement>) => {
       ev.preventDefault()
-      onToggleDesk(deskId)
+      onToggle(id, kind)
     },
-    [onToggleDesk]
+    [onToggle]
   )
+
+  // @todo fix types here
+  const mapObjects = (scale: number) =>
+    !mappablePoints
+      ? []
+      : mappablePoints
+          .filter((x) => x.position)
+          .map((x) => {
+            let isSelected = selectedPointId === x.id
+            let isAvailable = false
+            let user = null
+
+            if (!!officeVisits && me && showUsers) {
+              const bookedVisit: ScheduledItemType | undefined =
+                officeVisits.visit?.find(
+                  (v) => v.areaId === area.id && v.objectId === x.id
+                )
+              if (!!bookedVisit) {
+                if (bookedVisit?.user?.id === me?.id) {
+                  user = me
+                } else {
+                  user = bookedVisit.user
+                }
+              }
+            }
+            isSelected = selectedPointId === x.id
+            isAvailable = !!clickablePoints?.includes(x.id)
+
+            const style = {
+              left: `${x.position?.x}%`,
+              top: `${x.position?.y}%`,
+              transform: `scale(${1 / scale})`,
+              transformOrigin: 'top left',
+            }
+
+            if (!!user && !!me) {
+              return (
+                <a
+                  href={`/profile/${user.id}`}
+                  className="absolute -translate-y-1/2 -translate-x-1/2"
+                  style={style}
+                  key={user.id + x.position.x + x.position.y}
+                >
+                  <Avatar
+                    src={user?.avatar}
+                    userId={user?.id}
+                    size="medium"
+                    className={cn(
+                      '-translate-y-1/2 -translate-x-1/2 ',
+                      'border-2 border-transparent',
+                      `${
+                        me?.id === user?.id
+                          ? 'border-purple-500 rounded-full'
+                          : isSelected
+                          ? 'border-blue-500 rounded-full'
+                          : ''
+                      }`
+                    )}
+                  />
+                </a>
+              )
+            }
+            return (
+              <div
+                className={
+                  'absolute border-2 border-transparent -translate-y-1/2 -translate-x-1/2'
+                }
+                style={style}
+                key={x.kind + x.position.x + x.position.y}
+              >
+                {/* @ts-ignore */}
+                {PointComponent[x.kind](x, isSelected, isAvailable, onClick)}
+              </div>
+            )
+          })
+
   return (
     <div className="relative">
-      <img
-        src={area.map}
-        alt={`${area.name} floor plan`}
-        className="block w-full opacity-60"
-      />
-      {area.desks
-        .filter((x) => x.position)
-        .map((x) => {
-          const isSelected = selectedDeskId === x.id
-          const isAvailable = availableDeskIds.includes(x.id)
-          return (
-            <div
-              key={x.id}
-              className="absolute w-[1px] h-[1px]"
-              style={{ left: `${x.position?.x}%`, top: `${x.position?.y}%` }}
-            >
-              <Button
-                size="small"
-                kind={isSelected ? 'primary' : 'secondary'}
-                disabled={!isAvailable}
-                color={isSelected ? 'purple' : 'default'}
-                className={cn(
-                  '2xl:hidden absolute -translate-y-2/4 -translate-x-2/4 whitespace-nowrap',
-                  !isSelected && 'bg-gray-100'
-                )}
-                onClick={onClick(x.id)}
-              >
-                {x.name}
-              </Button>
-              <Button
-                kind={isSelected ? 'primary' : 'secondary'}
-                disabled={!isAvailable}
-                color={isSelected ? 'purple' : 'default'}
-                className={cn(
-                  'hidden 2xl:inline absolute -translate-y-2/4 -translate-x-2/4 whitespace-nowrap',
-                  !isSelected && 'bg-gray-100'
-                )}
-                onClick={onClick(x.id)}
-              >
-                {x.name}
-              </Button>
-            </div>
-          )
-        })}
+      <div className={cn(!!panZoom ? 'hidden' : 'block')}>
+        <img
+          src={area.map}
+          alt={`${area.name} floor plan`}
+          className="block w-full opacity-60"
+        />
+        {mapObjects(1)}
+      </div>
+      <div
+        className={cn(
+          !!panZoom ? 'block' : 'hidden',
+          'border border-gray-300 rounded-sm'
+        )}
+      >
+        <ImageWithPanZoom
+          src={area.map}
+          alt={`${area.name} floor plan`}
+          className="block w-full opacity-60 object-contain overflow-hidden rounded-sm"
+          imageOverlayMappingFn={(scale: number) => mapObjects(scale)}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/client/components/ui/Avatar.tsx b/src/client/components/ui/Avatar.tsx
index 35f53271..e28deed8 100644
--- a/src/client/components/ui/Avatar.tsx
+++ b/src/client/components/ui/Avatar.tsx
@@ -57,7 +57,7 @@ export const Avatar: React.FC<Props> = ({
   const [hasError, setHasError] = React.useState(false)
   const setError = () => setHasError(true)
   const resultClassName = cn(
-    'rounded-full bg-gray-200',
+    'block rounded-full bg-gray-200',
     SIZE_CLASSNAME[size],
     className
   )
diff --git a/src/client/components/ui/Button.tsx b/src/client/components/ui/Button.tsx
index 837917a4..5ebdb737 100644
--- a/src/client/components/ui/Button.tsx
+++ b/src/client/components/ui/Button.tsx
@@ -153,11 +153,13 @@ export const RoundButton = ({
   icon,
   className,
   disabled = false,
+  size = 'small',
 }: {
   onClick: (ev: React.MouseEvent) => void
   icon: Icon
   className?: string
   disabled?: boolean
+  size?: ButtonSize
 }) => {
   let IconComponent = Icons[icon]
   if (!IconComponent) {
@@ -166,11 +168,13 @@ export const RoundButton = ({
   }
   return (
     <Button
-      size="small"
+      size={size}
       kind="secondary"
       onClick={onClick}
       className={cn(
-        'rounded-full h-9 w-9 flex justify-center items-center',
+        'rounded-full flex justify-center items-center',
+        size === 'small' && ' h-9 w-9',
+        size === 'normal' && ' h-14 w-14',
         className
       )}
       disabled={disabled}
@@ -215,12 +219,16 @@ export const MoreButton: React.FC<MoreButtonProps> = ({
   )
 }
 
-export const BackButton: React.FC<{ className?: string }> = ({ className }) => (
+export const BackButton: React.FC<{
+  className?: string
+  onClick?: () => void
+  text?: string
+}> = ({ className, onClick, text = 'Back' }) => (
   <FButton
     kind="link"
-    onClick={() => window.history.back()}
+    onClick={() => (!!onClick ? onClick() : window.history.back())}
     className={cn('mb-4 ml-[-8px] text-text-tertiary', className)}
   >
-    Back
+    {text}
   </FButton>
 )
diff --git a/src/client/components/ui/DaySlider.tsx b/src/client/components/ui/DaySlider.tsx
new file mode 100644
index 00000000..cd8c1ddb
--- /dev/null
+++ b/src/client/components/ui/DaySlider.tsx
@@ -0,0 +1,90 @@
+import dayjs, { Dayjs } from 'dayjs'
+import React, { useEffect } from 'react'
+import { P, RoundButton } from '.'
+import { cn } from '#client/utils'
+
+export const DaySlider = ({
+  reverse = false,
+  slideDate,
+  onChange,
+  className,
+}: {
+  reverse?: boolean
+  slideDate?: string
+  onChange: (v: Dayjs) => void
+  className?: string
+}) => {
+  const [dayOffset, setDayOffset] = React.useState<number>(0)
+  const date = React.useMemo(
+    () => dayjs().startOf('day').add(dayOffset, 'day'),
+    [dayOffset]
+  )
+  const dateLabel = React.useMemo(() => {
+    if (dayOffset === 0) {
+      return 'Today'
+    }
+    if (dayOffset === 1) {
+      return 'Tomorrow'
+    }
+    return dayjs(date).format('dddd')
+  }, [dayOffset])
+
+  useEffect(() => {
+    onChange(date)
+  }, [date])
+
+  useEffect(() => {
+    setDayOffset(dayjs(slideDate).diff(dayjs().startOf('day'), 'day'))
+  }, [slideDate])
+
+  const onChangeDayOffset = React.useCallback(
+    (direction: -1 | 1) => (ev: React.MouseEvent) => {
+      ev.preventDefault()
+      setDayOffset((value) => {
+        if (!value && direction === -1) return value
+        return direction === -1 ? value - 1 : value + 1
+      })
+    },
+    []
+  )
+
+  return (
+    <div
+      className={cn(
+        'w-full sm:w-auto flex items-center justify-between gap-4',
+        reverse && 'flex-row-reverse',
+        className
+      )}
+    >
+      <div className="block sm:hidden ">
+        <RoundButton
+          size="normal"
+          onClick={onChangeDayOffset(1)}
+          icon={'ArrowForward'}
+        />
+      </div>
+      <div>
+        <P className="flex-1 mb-0">
+          {!!dateLabel && <span>{dateLabel}, </span>}
+          <span className="text-text-tertiary">
+            {date.format('D MMMM')}
+          </span>{' '}
+          <br />
+        </P>
+      </div>
+
+      <div className="hidden sm:flex gap-2">
+        <RoundButton onClick={onChangeDayOffset(-1)} icon={'ArrowBack'} />
+        <RoundButton onClick={onChangeDayOffset(1)} icon={'ArrowForward'} />
+      </div>
+
+      <div className="block sm:hidden ">
+        <RoundButton
+          size="normal"
+          onClick={onChangeDayOffset(-1)}
+          icon={'ArrowBack'}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/client/components/ui/ImageWithPanZoom.tsx b/src/client/components/ui/ImageWithPanZoom.tsx
new file mode 100644
index 00000000..3ed5c151
--- /dev/null
+++ b/src/client/components/ui/ImageWithPanZoom.tsx
@@ -0,0 +1,55 @@
+import React, { useRef, useState } from 'react'
+import { cn } from '#client/utils'
+//@ts-ignore
+import { PanZoom, OnStateChangeData } from 'react-easy-panzoom'
+
+type ImageWithPanZoomProps = {
+  src: string
+  alt: string
+  className?: string
+  imageOverlayMappingFn: (scale: number) => Array<React.ReactNode>
+  containerClassName?: string
+}
+
+export const ImageWithPanZoom = ({
+  src,
+  alt,
+  imageOverlayMappingFn,
+  className,
+  containerClassName,
+}: ImageWithPanZoomProps) => {
+  const [imgScale, setImgScale] = useState(1)
+  const containerRef = useRef(null)
+  const imageRef = useRef(null)
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'overflow-hidden relative w-full h-full sm:h-auto rounded-sm',
+        containerClassName
+      )}
+    >
+      <PanZoom
+        enableBoundingBox
+        maxZoom={2}
+        minZoom={1}
+        autoCenterZoomLevel={2}
+        onStateChange={(data: OnStateChangeData) => setImgScale(data.scale)}
+      >
+        <div className="transition-transform touch-none relative">
+          <img
+            ref={imageRef}
+            src={src}
+            alt={alt}
+            className={cn('max-w-none h-auto', className)}
+          />
+          <div className="absolute top-0 left-0 w-full h-full">
+            {/*  passing scale so we can do reverse scaling on the mapped points */}
+            {imageOverlayMappingFn(imgScale)}
+          </div>
+        </div>
+      </PanZoom>
+    </div>
+  )
+}
diff --git a/src/client/index.css b/src/client/index.css
index 381b60c5..e5717795 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -286,3 +286,18 @@ button.mapboxgl-popup-close-button {
     );
   }
 }
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-in-left {
+  @apply animate-[fadeInLeft_1s_ease-in-out];
+}
diff --git a/src/client/utils/hooks.ts b/src/client/utils/hooks.ts
index d206223f..11b7413c 100644
--- a/src/client/utils/hooks.ts
+++ b/src/client/utils/hooks.ts
@@ -1,4 +1,11 @@
-import React, { MutableRefObject, useEffect, useMemo, useState } from 'react'
+import React, {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import config from '#client/config'
 
 export function useDebounce(value: any, delay: number = 1e3) {
diff --git a/src/modules/events/client/components/EventBadge.tsx b/src/modules/events/client/components/EventBadge.tsx
index d4e5d737..74e9dd69 100644
--- a/src/modules/events/client/components/EventBadge.tsx
+++ b/src/modules/events/client/components/EventBadge.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import dayjs from 'dayjs'
-import { FButton } from '#client/components/ui'
+import { FButton, Tag, Warning } from '#client/components/ui'
 import { Event } from '#shared/types'
 import { cn } from '#client/utils'
 
@@ -10,9 +10,15 @@ type Props = {
   event: Event
   className?: string
   withApplyButton?: boolean
+  requiresAction?: boolean
 }
-export const EventBadge: React.FC<Props> = ({ event, className = '', withApplyButton = false }) => {
-  const url = React.useMemo(() => `/event/${event.id}`, [event])
+export const EventBadge: React.FC<Props> = ({
+  event,
+  className = '',
+  withApplyButton = false,
+  requiresAction = false,
+}) => {
+  const url = React.useMemo(() => `/events/${event.id}`, [event])
   const now = dayjs()
   const [startDate, endDate] = [event.startDate, event.endDate].map(dayjs)
   const isToday = now >= startDate && now <= endDate
@@ -32,15 +38,28 @@ export const EventBadge: React.FC<Props> = ({ event, className = '', withApplyBu
       </a>
       <a href={url} className="flex-1 block">
         <div className="text-accents-red mb-1 text-sm">
-          {isToday ? 'Today' : isSingleDay ? startDate.format(DATE_FORMAT) : `${startDate.format(DATE_FORMAT)} - ${endDate.format(DATE_FORMAT)}`}
+          {isToday
+            ? 'Today'
+            : isSingleDay
+            ? startDate.format(DATE_FORMAT)
+            : `${startDate.format(DATE_FORMAT)} - ${endDate.format(
+                DATE_FORMAT
+              )}`}
         </div>
         <div>{event.title}</div>
       </a>
+      {requiresAction && (
+        <Tag color="red" className="h-fit">
+          <p className="text-accents-pink">incomplete checklist</p>
+        </Tag>
+      )}
       {withApplyButton && (
         <div className="flex items-center ml-4">
-          <FButton size="small" kind="secondary" href={url}>Apply</FButton>
+          <FButton size="small" kind="secondary" href={url}>
+            Apply
+          </FButton>
         </div>
       )}
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/src/modules/events/client/components/EventPage.tsx b/src/modules/events/client/components/EventPage.tsx
index c4dde7ee..a0b334b6 100644
--- a/src/modules/events/client/components/EventPage.tsx
+++ b/src/modules/events/client/components/EventPage.tsx
@@ -185,7 +185,7 @@ export const EventPage = () => {
             <LoginButton
               size="small"
               label="Sign in"
-              callbackPath={`/event/${eventId}`}
+              callbackPath={`/events/${eventId}`}
             />
           </>
         ) : null}
@@ -386,7 +386,7 @@ export const EventPage = () => {
                     size="small"
                     label="Sign in to apply for the event"
                     className="w-full h-full"
-                    callbackPath={`/event/${eventId}`}
+                    callbackPath={`/events/${eventId}`}
                   />
                 )}
                 {providers.includes('polkadot') && (
@@ -398,7 +398,7 @@ export const EventPage = () => {
                       className="bg-black hover:opacity-80 hover:bg-black w-full"
                       provider="polkadot"
                       currentState={'Login'}
-                      callbackPath={`/event/${eventId}`}
+                      callbackPath={`/events/${eventId}`}
                     />
                   </div>
                 )}
diff --git a/src/modules/events/client/components/EventsPage.tsx b/src/modules/events/client/components/EventsPage.tsx
new file mode 100644
index 00000000..de29a7c0
--- /dev/null
+++ b/src/modules/events/client/components/EventsPage.tsx
@@ -0,0 +1,115 @@
+import { useStore } from '@nanostores/react'
+import * as React from 'react'
+import { Header } from '#client/components/Header'
+import {
+  BackButton,
+  Background,
+  ComponentWrapper,
+  H1,
+  H2,
+  HR,
+} from '#client/components/ui'
+import * as stores from '#client/stores'
+import { useMyEvents, useUpcomingEvents } from '../queries'
+import { EventApplicationStatus } from '#shared/types'
+import { EventBadge } from './EventBadge'
+import { cn } from '#client/utils'
+
+const Sections = {
+  waiting: 'waiting for approval',
+  confirmed: 'confirmed',
+  past: 'past',
+  rejected: 'rejected',
+  optedOut: 'opted out',
+  upcoming: 'upcoming',
+}
+const TitleStatus = {
+  [Sections.waiting]: EventApplicationStatus.Pending,
+  [Sections.confirmed]: EventApplicationStatus.Confirmed,
+  [Sections.rejected]: EventApplicationStatus.CancelledAdmin,
+  [Sections.optedOut]: EventApplicationStatus.CancelledUser,
+}
+const EventsBg = {
+  [Sections.waiting]: 'bg-yellow-50 border-yellow-100',
+  [Sections.confirmed]: 'bg-green-50 border-green-100',
+  [Sections.past]: 'bg-gray-100',
+}
+
+const EventsList = ({
+  events,
+  title,
+}: {
+  title: string
+  events: Array<Event>
+}) => (
+  <div>
+    <H2 className="mt-10 mb-4 capitalize">{title}</H2>
+    <div className="flex flex-col gap-2">
+      {events?.map((x: any, i) => {
+        if (title === Sections.upcoming && !!x.applications?.length) {
+          return
+        }
+        return (
+          <div key={x.id}>
+            <EventBadge
+              className={cn(
+                'border border-gray-100 hover:scale-[102%] transition-all delay-50',
+                EventsBg[title]
+              )}
+              event={x}
+              withApplyButton={!x.applicationId && !x.metadata?.global}
+              requiresAction={
+                title === Sections.confirmed && !x.applicationComplete
+              }
+            />
+          </div>
+        )
+      })}
+    </div>
+  </div>
+)
+
+export const EventsPage = () => {
+  const officeId = useStore(stores.officeId)
+  const { data: events, isFetched } = useUpcomingEvents(officeId, 'time')
+  const { data: myEvents, isFetched: isMineFetched } = useMyEvents(
+    officeId,
+    'status'
+  )
+  if (!isFetched && !isMineFetched) {
+    return null
+  }
+
+  if (!events || !(Sections.past in events && Sections.upcoming in events)) {
+    return (
+      <div className="text-gray-400 text-center">No upcoming events yet</div>
+    )
+  }
+
+  return (
+    <Background>
+      <Header />
+      <ComponentWrapper>
+        <BackButton />
+        <H1 className="my-10 text-center">Events</H1>
+        {!!myEvents && (
+          <div>
+            {Object.values(Sections).map((title) => {
+              // @ts-ignore
+              const evs = myEvents[TitleStatus[title] as EventApplicationStatus]
+              if (!!evs?.length) {
+                return <EventsList title={title} events={evs} />
+              }
+            })}
+          </div>
+        )}
+        {[Sections.upcoming, Sections.past].map((timeTitle) => {
+          const evs = events[timeTitle]
+          if (evs?.length) {
+            return <EventsList title={timeTitle} events={evs} />
+          }
+        })}
+      </ComponentWrapper>
+    </Background>
+  )
+}
diff --git a/src/modules/events/client/components/GlobalEvents.tsx b/src/modules/events/client/components/GlobalEvents.tsx
index 704dcbbd..6ea95422 100644
--- a/src/modules/events/client/components/GlobalEvents.tsx
+++ b/src/modules/events/client/components/GlobalEvents.tsx
@@ -80,7 +80,7 @@ const _GlobalEvents: React.FC = () => {
               <FButton
                 className="text-sm col-span-5 sm:col-span-6 text-left"
                 kind="link"
-                href={`/event/${event.id}`}
+                href={`/events/${event.id}`}
               >
                 {event.title}{' '}
                 <span className="text-text-tertiary text-sm">
diff --git a/src/modules/events/client/components/UpcomingEvents.tsx b/src/modules/events/client/components/UpcomingEvents.tsx
index 0f23afac..2e00abe6 100644
--- a/src/modules/events/client/components/UpcomingEvents.tsx
+++ b/src/modules/events/client/components/UpcomingEvents.tsx
@@ -12,16 +12,14 @@ const pageSize = 3
 export const UpcomingEvents: React.FC = () => {
   const officeId = useStore(stores.officeId)
   const { data: events, isFetched } = useUpcomingEvents(officeId)
-  const [noMoreData, setNoMoreData] = useState(false)
   const [page, setPage] = useState(1)
   const [eventData, setEventData] = useState<Array<EventPublicResponse>>([])
 
   useEffect(() => {
-    if (events?.length && isFetched) {
+    if (!!events?.length && isFetched) {
       let limit = page === 1 ? pageSize : page * pageSize
       const result = paginateArray(events, 1, limit)
       setEventData(result)
-      setNoMoreData(events.length <= limit)
     }
   }, [events, officeId, page])
 
@@ -46,15 +44,13 @@ export const UpcomingEvents: React.FC = () => {
           ))}
         </div>
       )}
-      {!noMoreData && (
-        <FButton
-          kind="link"
-          className="w-auto mt-6"
-          onClick={() => setPage(page + 1)}
-        >
-          Show more
-        </FButton>
-      )}
+      <FButton
+        kind="link"
+        className="w-auto mt-6"
+        onClick={() => stores.goTo('events')}
+      >
+        Show more
+      </FButton>
     </WidgetWrapper>
   ) : null
 }
diff --git a/src/modules/events/client/components/index.ts b/src/modules/events/client/components/index.ts
index e80dd878..3a3f4a7a 100644
--- a/src/modules/events/client/components/index.ts
+++ b/src/modules/events/client/components/index.ts
@@ -11,3 +11,4 @@ export { GlobalEvents } from './GlobalEvents'
 export { MyEvents } from './MyEvents'
 export { UncompletedActions } from './UncompletedActions'
 export { UpcomingEvents } from './UpcomingEvents'
+export { EventsPage } from './EventsPage'
diff --git a/src/modules/events/client/queries.ts b/src/modules/events/client/queries.ts
index 57074351..5e8b8306 100644
--- a/src/modules/events/client/queries.ts
+++ b/src/modules/events/client/queries.ts
@@ -12,9 +12,11 @@ import {
   EventParticipant,
   EventPreview,
   EventPublicResponse,
+  EventTimeMap,
   EventToogleCheckboxRequest,
   FormSubmissionRequest,
   GlobalEvent,
+  MyEventsStatusMap,
   PublicForm,
   User,
 } from '#shared/types'
@@ -39,10 +41,10 @@ export const useEventsAdmin = (
   )
 }
 
-export const useUpcomingEvents = (officeId: string | null) => {
+export const useUpcomingEvents = (officeId: string | null, sortBy?: string) => {
   const path = '/user-api/events/event'
-  return useQuery<EventPublicResponse[], AxiosError>(
-    [path, { office: officeId }],
+  return useQuery<EventPublicResponse[] | EventTimeMap, AxiosError>(
+    [path, { office: officeId, sortBy }],
     async ({ queryKey }) =>
       (await api.get<EventPublicResponse[]>(path, { params: queryKey[1] }))
         .data,
@@ -50,10 +52,10 @@ export const useUpcomingEvents = (officeId: string | null) => {
   )
 }
 
-export const useMyEvents = (officeId: string | null) => {
+export const useMyEvents = (officeId: string | null, sortBy?: string) => {
   const path = '/user-api/events/event/me'
-  return useQuery<Event[], AxiosError>(
-    [path, { office: officeId }],
+  return useQuery<Event[] | MyEventsStatusMap, AxiosError>(
+    [path, { office: officeId, sortBy }],
     async ({ queryKey }) =>
       (await api.get<Event[]>(path, { params: queryKey[1] })).data,
     { enabled: !!officeId }
diff --git a/src/modules/events/manifest.json b/src/modules/events/manifest.json
index fb15573d..65b2cb12 100644
--- a/src/modules/events/manifest.json
+++ b/src/modules/events/manifest.json
@@ -18,7 +18,7 @@
   "clientRouter": {
     "public": {
       "eventPage": {
-        "path": "/event/:eventId",
+        "path": "/events/:eventId",
         "componentId": "EventPage",
         "fullScreen": true
       },
@@ -28,7 +28,13 @@
         "fullScreen": true
       }
     },
-    "user": {},
+    "user": {
+      "events": {
+        "path": "/events",
+        "componentId": "EventsPage",
+        "fullScreen": true
+      }
+    },
     "admin": {
       "adminEvents": {
         "path": "/admin/events",
diff --git a/src/modules/events/server/models/event-application.ts b/src/modules/events/server/models/event-application.ts
index fbd8994b..ba4f0428 100644
--- a/src/modules/events/server/models/event-application.ts
+++ b/src/modules/events/server/models/event-application.ts
@@ -32,6 +32,7 @@ export class EventApplication
   declare creatorUserId: string
   declare formId: string | null
   declare formSubmissionId: string | null
+  declare event: Event
 
   static async countByEventId(): Promise<Record<string, number>> {
     const entries = (await this.findAll({
diff --git a/src/modules/events/server/models/event.ts b/src/modules/events/server/models/event.ts
index 584ec79f..0b59d31a 100644
--- a/src/modules/events/server/models/event.ts
+++ b/src/modules/events/server/models/event.ts
@@ -63,6 +63,7 @@ export class Event
   declare notificationRule: EventModel['notificationRule']
   declare metadata: EventModel['metadata']
   declare responsibleUserIds: EventModel['responsibleUserIds']
+  declare applications?: EventModel['applications']
 
   usePublicView(
     application: EventApplication | null,
diff --git a/src/modules/events/server/models/index.ts b/src/modules/events/server/models/index.ts
index fe2d8e96..913db8ed 100644
--- a/src/modules/events/server/models/index.ts
+++ b/src/modules/events/server/models/index.ts
@@ -1,4 +1,17 @@
+import { Event } from './event'
+import { EventApplication } from './event-application'
+
 export { Event } from './event'
 export { EventApplication } from './event-application'
 export { EventCheckmark } from './event-checkmark'
 export { EventChecklistReminderJob } from './event-checklist-reminder-job'
+
+Event.hasMany(EventApplication, {
+  foreignKey: 'eventId',
+  as: 'applications',
+})
+
+EventApplication.belongsTo(Event, {
+  foreignKey: 'eventId',
+  as: 'event',
+})
diff --git a/src/modules/events/server/router.ts b/src/modules/events/server/router.ts
index 450fe872..09fde506 100644
--- a/src/modules/events/server/router.ts
+++ b/src/modules/events/server/router.ts
@@ -27,6 +27,8 @@ import {
 import { getApplicationMessage, getApplicationUpdateMessage } from './helpers'
 import { isEventApplicationUncompleted } from './helpers/checklists'
 import { Metadata } from '../metadata-schema'
+import { boolean } from 'zod'
+import { EventCheckmark } from './models'
 
 const mId = 'events'
 
@@ -437,70 +439,152 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
     }
   )
 
-  fastify.get('/event', async (req, reply) => {
-    if (!req.office) {
-      return reply.throw.badParams('Invalid office ID')
-    }
-    const events = await fastify.db.Event.findAll({
-      where: {
-        endDate: {
-          [Op.gte]: new Date(),
+  fastify.get(
+    '/event',
+    async (
+      req: FastifyRequest<{
+        Querystring: { sortBy?: string }
+      }>,
+      reply
+    ) => {
+      if (!req.office) {
+        return reply.throw.badParams('Invalid office ID')
+      }
+      const events = await fastify.db.Event.findAll({
+        include: {
+          model: fastify.db.EventApplication,
+          as: 'applications',
+          where: {
+            userId: req.user.id,
+          },
+          required: false,
         },
-        visibility: EntityVisibility.Visible,
-        allowedRoles: { [Op.overlap]: req.user.roles },
-        offices: { [Op.contains]: [req.office.id] },
-      },
-      order: ['startDate'],
-    })
-
-    const applications = await fastify.db.EventApplication.findAll({
-      where: {
-        userId: req.user.id,
-        eventId: {
-          [Op.in]: events.map((x: Event) => x.id),
+        where: {
+          endDate: {
+            [Op.gte]: new Date(),
+          },
+          visibility: EntityVisibility.Visible,
+          allowedRoles: { [Op.overlap]: req.user.roles },
+          offices: { [Op.contains]: [req.office.id] },
         },
-      },
-    })
+        order: ['startDate'],
+      })
 
-    return events.map((e) => {
-      const application = applications.find((a) => a.eventId === e.id)
-      return e.usePublicView(application || null, [], null)
-    })
-  })
+      if (!!req.query.sortBy && req.query.sortBy === 'time') {
+        const pastEvents = await fastify.db.Event.findAll({
+          where: {
+            endDate: {
+              [Op.lt]: new Date(),
+            },
+            visibility: EntityVisibility.Visible,
+            allowedRoles: { [Op.contains]: [req.user.role] },
+            offices: { [Op.contains]: [req.office.id] },
+          },
+          order: ['startDate'],
+        })
+        return {
+          upcoming: events,
+          past: pastEvents,
+        }
+      }
 
-  fastify.get('/event/me', async (req, reply) => {
-    if (!req.office) {
-      return reply.throw.badParams('Invalid office ID')
+      return events.map((e) => {
+        const application = !!e?.applications?.length ? e.applications[0] : null
+        return e.usePublicView(application, [], null)
+      })
     }
+  )
 
-    const applicationEventIds = await fastify.db.EventApplication.findAll({
-      where: {
-        status: {
-          [Op.in]: [
-            EventApplicationStatus.Opened,
-            EventApplicationStatus.Pending,
-            EventApplicationStatus.Confirmed,
-          ],
-        },
-        userId: req.user.id,
-      },
-      attributes: ['eventId'],
-    }).then((xs) => xs.map((x) => x.eventId))
+  fastify.get(
+    '/event/me',
+    async (
+      req: FastifyRequest<{
+        Querystring: { sortBy?: string }
+      }>,
+      reply
+    ) => {
+      if (!req.office) {
+        return reply.throw.badParams('Invalid office ID')
+      }
 
-    const events = await fastify.db.Event.findAll({
-      where: {
-        id: { [Op.in]: applicationEventIds },
-        endDate: {
-          [Op.gte]: new Date(),
+      const eventApplications = await fastify.db.EventApplication.findAll({
+        include: {
+          model: fastify.db.Event,
+          as: 'event',
+          where: {
+            endDate: {
+              [Op.gte]: new Date(),
+            },
+            visibility: {
+              [Op.in]: [EntityVisibility.Visible, EntityVisibility.Url],
+            },
+          },
+          attributes: [
+            'id',
+            'title',
+            'startDate',
+            'endDate',
+            'coverImageUrl',
+            'metadata',
+            'checklist',
+          ],
+          required: true,
+          order: [['startDate', 'ASC']],
         },
-        visibility: {
-          [Op.in]: [EntityVisibility.Visible, EntityVisibility.Url],
+        where: {
+          status: {
+            [Op.in]: [
+              EventApplicationStatus.Opened,
+              EventApplicationStatus.Pending,
+              EventApplicationStatus.Confirmed,
+            ],
+          },
+          userId: req.user.id,
         },
-      },
-      order: [['startDate', 'ASC']],
-    })
-    return events
-  })
+        attributes: ['eventId', 'status', 'id'],
+      })
+
+      if (!!req.query.sortBy && req.query.sortBy === 'status') {
+        const result: Record<
+          EventApplicationStatus,
+          Array<Event & { applicationId: string }>
+        > = {
+          [EventApplicationStatus.Confirmed]: [],
+          [EventApplicationStatus.Pending]: [],
+          [EventApplicationStatus.Opened]: [],
+        }
+
+        for (const app of eventApplications) {
+          const event = app.event?.get({ plain: true })
+          const checklistLength = app?.event?.checklist?.length
+          let checkmarks = []
+
+          if (checklistLength) {
+            checkmarks = await EventCheckmark.findAll({
+              where: {
+                userId: req.user.id,
+                eventId: app.eventId,
+              },
+            })
+          }
+
+          const objectToAdd = {
+            ...event,
+            applicationId: app.id,
+            applicationComplete: checkmarks?.length == checklistLength,
+          }
+          if (app.status == EventApplicationStatus.Opened) {
+            result[EventApplicationStatus.Pending].push(objectToAdd)
+          } else {
+            result[app.status].push(objectToAdd)
+          }
+        }
+        return result
+      }
+
+      return eventApplications.map((e) => e.event)
+    }
+  )
 
   fastify.get('/event/uncompleted', async (req, reply) => {
     if (!req.office) {
diff --git a/src/modules/events/types.ts b/src/modules/events/types.ts
index 3546045e..7c574874 100644
--- a/src/modules/events/types.ts
+++ b/src/modules/events/types.ts
@@ -29,6 +29,7 @@ export interface Event {
   notificationRule: EventNotificationRule
   metadata: Record<string, any>
   responsibleUserIds: string[]
+  applications?: EventApplication[]
 }
 
 export type EventMetadata = {
@@ -73,6 +74,7 @@ export interface EventApplication {
   creatorUserId: string
   formId: string | null
   formSubmissionId: string | null
+  event?: Event
 }
 
 export enum EventApplicationStatus {
@@ -127,3 +129,16 @@ export interface GlobalEvent {
 export type EventParticipant = Pick<User, 'id' | 'fullName' | 'avatar' | 'team'>
 
 export type EventPreview = Pick<Event, 'id' | 'title' | 'formId'>
+
+export interface MyEventsStatusMap {
+  [EventApplicationStatus.Confirmed]: Array<Event>
+  [EventApplicationStatus.Pending]: Array<Event>
+  [EventApplicationStatus.Opened]: Array<Event>
+  [EventApplicationStatus.CancelledAdmin]: Array<Event>
+  [EventApplicationStatus.CancelledUser]: Array<Event>
+}
+
+export interface EventTimeMap {
+  past: Array<Event>
+  upcoming: Array<Event>
+}
diff --git a/src/modules/guest-invites/client/components/AdminGuestInvite.tsx b/src/modules/guest-invites/client/components/AdminGuestInvite.tsx
index 2b4329c3..9d08fe8c 100644
--- a/src/modules/guest-invites/client/components/AdminGuestInvite.tsx
+++ b/src/modules/guest-invites/client/components/AdminGuestInvite.tsx
@@ -24,6 +24,7 @@ import { OfficeFloorMap } from '#client/components/OfficeFloorMap'
 import { propEq } from '#shared/utils/fp'
 import { DATE_FORMAT } from '#client/constants'
 import { useGuestInviteAdmin, useUpdateGuestInvite } from '../queries'
+import { VisitType } from '#shared/types'
 
 export const AdminGuestInvite: React.FC = () => {
   const page = useStore(stores.router)
@@ -170,9 +171,16 @@ export const AdminGuestInvite: React.FC = () => {
                 {!!area && (
                   <OfficeFloorMap
                     area={area}
-                    availableDeskIds={availableAreaDeskIds}
-                    selectedDeskId={selectedDeskId}
-                    onToggleDesk={onToggleDesk}
+                    mappablePoints={[
+                      ...area?.desks.map((desk) => ({
+                        ...desk,
+                        areaId: area.id,
+                        kind: VisitType.Visit,
+                      })),
+                    ]}
+                    clickablePoints={availableAreaDeskIds}
+                    selectedPointId={selectedDeskId}
+                    onToggle={onToggleDesk}
                   />
                 )}
               </div>
diff --git a/src/modules/guest-invites/client/components/GuestInviteDetail.tsx b/src/modules/guest-invites/client/components/GuestInviteDetail.tsx
index c75c4b51..04f88913 100644
--- a/src/modules/guest-invites/client/components/GuestInviteDetail.tsx
+++ b/src/modules/guest-invites/client/components/GuestInviteDetail.tsx
@@ -17,11 +17,13 @@ import { propEq } from '#shared/utils'
 import React from 'react'
 import dayjs from 'dayjs'
 import { GuestInviteStatusTag } from './GuestInviteStatusTag'
-import { GuestInviteStatus } from '#shared/types'
+import { GuestInviteStatus, VisitType } from '#shared/types'
 import { DATE_FORMAT_DAY_NAME_FULL } from '#client/constants'
 import { useVisitsAreas } from '#modules/visits/client/queries'
 import { OfficeFloorMap } from '#client/components/OfficeFloorMap'
 import { useUserCompact } from '#modules/users/client/queries'
+//@todo better place for this function
+import { addParams } from '#modules/hub-map/client/helpers'
 
 export const GuestInviteDetail = () => (
   <PermissionsValidator
@@ -139,9 +141,16 @@ export const _GuestInviteDetail = () => {
               <div className="mt-6">
                 <OfficeFloorMap
                   area={area}
-                  availableDeskIds={[]}
-                  selectedDeskId={guestInivite.deskId}
-                  onToggleDesk={() => null}
+                  mappablePoints={[
+                    ...area?.desks.map((desk) => ({
+                      ...desk,
+                      areaId: area.id,
+                      kind: VisitType.Visit,
+                    })),
+                  ]}
+                  clickablePoints={[]}
+                  selectedPointId={guestInivite.deskId}
+                  onToggle={() => null}
                 />
               </div>
             )}
diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
new file mode 100644
index 00000000..022b0820
--- /dev/null
+++ b/src/modules/hub-map/client/components/HubMap.tsx
@@ -0,0 +1,217 @@
+import * as React from 'react'
+import { Avatar, Input, Select, WidgetWrapper } from '#client/components/ui'
+import { useStore } from '@nanostores/react'
+import * as stores from '#client/stores'
+import { useOffice } from '#client/utils/hooks'
+import dayjs from 'dayjs'
+import { DaySlider } from '#client/components/ui/DaySlider'
+import { DATE_FORMAT } from '#client/constants'
+import { OfficeFloorMap } from '#client/components/OfficeFloorMap'
+import { ScheduledItemsList } from './ScheduledItemsList'
+import {
+  useAvailableDesks,
+  useOfficeVisitors,
+  useVisitsAreas,
+} from '#modules/visits/client/queries'
+import { propEq } from '#shared/utils'
+import { getPoints, goToMeetings, goToVisits } from '../helpers'
+import { VisitType } from '#shared/types'
+import { useUpcoming } from '../queries'
+
+export const HubMap = () => {
+  const officeId = useStore(stores.officeId)
+  const office = useOffice(officeId)
+  const me = useStore(stores.me)
+
+  const { data: areas = [] } = useVisitsAreas(office?.id || '')
+  const [areaId, setAreaId] = React.useState<string | null>(null)
+  const area = React.useMemo(() => areas.find((x) => areaId === x.id), [areaId])
+  const [mappablePoints, setMappablePoints] = React.useState<any[]>([])
+
+  const [date, setDate] = React.useState(dayjs())
+  const [selectedDailyEvent, setSelectedDailyEvent] = React.useState<
+    string | null
+  >(null)
+
+  const { data: upcomingVisitsAll, refetch: refetchVisits } = useUpcoming(
+    officeId,
+    dayjs().toString()
+  )
+
+  React.useEffect(() => {
+    setOfficeVisits(upcomingVisitsAll?.byDate[date.format(DATE_FORMAT)])
+  }, [upcomingVisitsAll?.byDate, date])
+
+  const [officeVisits, setOfficeVisits] = React.useState([])
+  React.useEffect(() => {
+    if (!!areas.length) {
+      setAreaId(areas[0].id)
+      setMappablePoints(getPoints(areas[0]))
+    }
+  }, [areas])
+
+  React.useEffect(() => {
+    if (!!area) {
+      setMappablePoints(getPoints(area))
+    }
+  }, [area])
+
+  const onAreaChange = React.useCallback(
+    (areaId: string) => setAreaId(areaId),
+    []
+  )
+
+  const { data: visitors } = useOfficeVisitors(
+    officeId,
+    dayjs(date).format(DATE_FORMAT)
+  )
+
+  const userIsInOffce = React.useMemo(
+    () => me && visitors?.some(propEq('userId', me.id)),
+    [visitors, me]
+  )
+  const visitorsNumber = React.useMemo(() => visitors?.length || 0, [visitors])
+  const [width, setWidth] = React.useState<number>(window.innerWidth)
+
+  function handleWindowSizeChange() {
+    setWidth(window.innerWidth)
+  }
+  React.useEffect(() => {
+    window.addEventListener('resize', handleWindowSizeChange)
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange)
+    }
+  }, [])
+
+  const { data: availableDesks = [] } = useAvailableDesks(
+    office?.id || '',
+    [date.format(DATE_FORMAT)] || []
+  )
+
+  const resetOfficeVisits = React.useCallback(() => {
+    setOfficeVisits(upcomingVisitsAll.byDate[dayjs().format(DATE_FORMAT)] ?? [])
+  }, [upcomingVisitsAll?.byDate])
+
+  const availableAreaDeskIds = React.useMemo(() => {
+    let available = []
+    const desks = availableDesks
+      .filter((x) => x.areaId === area?.id)
+      .map((x) => x.deskId)
+
+    available = [...desks]
+    if (!!area?.meetingRooms) {
+      available = [...available, ...area?.meetingRooms.map((x) => x.id)]
+    }
+    return available
+  }, [availableDesks, area])
+
+  const isMobile = width <= 480
+
+  if (!office?.allowDeskReservation) {
+    return <></>
+  }
+  return (
+    <WidgetWrapper className="transition-all delay-100" title={`Hub Map`}>
+      <div className="overflow-none">
+        <ScheduledItemsList
+          onChooseCard={(id, areaId, chosenDate) => {
+            setSelectedDailyEvent(id)
+            setAreaId(areaId)
+            setDate(chosenDate)
+            resetOfficeVisits()
+          }}
+          setDate={setDate}
+          date={date}
+          className={'mb-6'}
+        />
+
+        {area && (
+          <div className="">
+            <div>
+              <div className="flex flex-col gap-4 sm:flex-row items-start sm:items-baseline justify-between mx-auto">
+                <div className="w-full sm:w-auto flex flex-col  gap-4 items-start sm:items-baseline justify-center">
+                  <DaySlider
+                    onChange={(d) => {
+                      setDate(d)
+                    }}
+                    reverse={true}
+                    slideDate={date.format(DATE_FORMAT)}
+                    className="mx-auto sm:mx-0"
+                  />
+                </div>
+                <Select
+                  label=""
+                  options={areas.map((x) => ({
+                    label: x.name,
+                    value: x.id,
+                  }))}
+                  value={area?.id}
+                  onChange={onAreaChange}
+                  placeholder={'Select area'}
+                  containerClassName="w-full sm:w-auto  mb-2 hidden sm:block"
+                />
+              </div>
+            </div>
+            <div className="flex flex-row gap-3 sm:gap-2 overflow-hidden mt-6 sm:mt-2 items-center flex-wrap">
+              {!!visitors?.length &&
+                visitors.map((v) => {
+                  return (
+                    <button
+                      key={v.userId}
+                      className="hover:opacity-80 transition-all delay-100"
+                      onClick={() => {
+                        setSelectedDailyEvent(v.deskId)
+                        setAreaId(v.areaId)
+                        resetOfficeVisits()
+                      }}
+                    >
+                      <Avatar size="medium" src={v.avatar} userId={v.userId} />
+                    </button>
+                  )
+                })}
+              <div className="text-text-tertiary mb-4 sm:mb-0">
+                {userIsInOffce
+                  ? `You and ${visitorsNumber - 1}`
+                  : visitorsNumber}{' '}
+                people in the {office?.name} hub
+              </div>
+            </div>
+            <Select
+              label=""
+              options={areas.map((x) => ({
+                label: x.name,
+                value: x.id,
+              }))}
+              value={area?.id}
+              onChange={onAreaChange}
+              placeholder={'Select area'}
+              containerClassName="w-full sm:w-auto  mb-2 block sm:hidden"
+            />
+            <div className="sm:max-w-[780px] h-[500px] sm:h-auto m-auto my-2 sm:my-10">
+              <OfficeFloorMap
+                area={area}
+                mappablePoints={mappablePoints}
+                officeVisits={officeVisits}
+                showUsers={true}
+                selectedPointId={selectedDailyEvent}
+                selectedAreaId={areaId}
+                clickablePoints={availableAreaDeskIds}
+                panZoom={isMobile}
+                onToggle={(id, kind) => {
+                  switch (kind) {
+                    case VisitType.Visit:
+                      return goToVisits(id, String(areaId), date)
+                    case VisitType.RoomReservation:
+                      return goToMeetings(id, date)
+                    default:
+                      return
+                  }
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+}
diff --git a/src/modules/hub-map/client/components/ScheduledItem.tsx b/src/modules/hub-map/client/components/ScheduledItem.tsx
new file mode 100644
index 00000000..94e671ed
--- /dev/null
+++ b/src/modules/hub-map/client/components/ScheduledItem.tsx
@@ -0,0 +1,144 @@
+import React from 'react'
+import { cn } from '#client/utils'
+import { ScheduledItemType, VisitType } from '#shared/types'
+import dayjs from 'dayjs'
+import { FButton, P } from '#client/components/ui'
+
+export const PageUrls: Record<string, string> = {
+  event: '/events',
+}
+
+const ColorsBg: Record<string, string> = {
+  [VisitType.RoomReservation]: 'bg-cta-hover-jade',
+  [VisitType.Visit]: 'bg-cta-hover-purple',
+  [VisitType.Guest]: 'bg-cta-hover-cerullean',
+  event: 'bg-gray-50',
+}
+
+const ColorsBorder: Record<string, string> = {
+  [VisitType.RoomReservation]: 'border-cta-jade',
+  [VisitType.Visit]: 'border-cta-purple',
+  [VisitType.Guest]: 'border-cta-hover-cerullean',
+  event: 'border-gray-300',
+}
+
+const ColorsHover: Record<string, string> = {
+  [VisitType.RoomReservation]: `hover:border-cta-jade`,
+  [VisitType.Visit]: `hover:border-cta-purple`,
+  [VisitType.Guest]: `hover:border-cta-hover-cerullean'`,
+  event: 'hover:border-gray-300',
+}
+
+const StatusColor: Record<string, string> = {
+  confirmed: 'bg-green-500',
+  pending: 'bg-yellow-500',
+  opened: 'bg-yellow-500',
+  cancelled: 'bg-red-500',
+}
+
+const DateHeader = ({ dateValue }: { dateValue: string | Date }) => {
+  const date = dayjs(dateValue).isToday()
+    ? `Today`
+    : dayjs(dateValue).format('dddd')
+  return (
+    <P textType="additional" className="mt-0 mb-0">
+      <span
+        className={cn(
+          date === 'Today' ? 'text-accents-red' : 'text-text-secondary'
+        )}
+      >
+        {date}
+        {' · '}
+      </span>
+      <span className="text-text-secondary">
+        {dayjs(dateValue).format('D MMMM')}
+      </span>
+    </P>
+  )
+}
+
+const Status = ({ status }: { status: string }) => (
+  <div className={cn('h-2 w-2 rounded-full ', StatusColor[status])}> </div>
+)
+
+export const ScheduledItem = ({
+  sheduledItem,
+  selected,
+  onClick,
+  onEntityCancel,
+}: {
+  sheduledItem: ScheduledItemType
+  selected: string | null
+  onClick: (item: ScheduledItemType) => void
+  onEntityCancel: (
+    id: string,
+    type: string,
+    value: string,
+    date: string
+  ) => void
+}) => {
+  const iAmSelected = selected == sheduledItem.id
+  return (
+    <div className="animate-fade-in-left" title={sheduledItem.status}>
+      <div
+        onClick={() => {
+          if (!!PageUrls[sheduledItem.type]) {
+            window.location.href = PageUrls[sheduledItem.type]
+          } else {
+            onClick(sheduledItem)
+          }
+        }}
+        className={cn(
+          'transition-all',
+          ' w-full sm:w-[224px] sm:h-[192px]  flex flex-col justify-between rounded-sm px-4 py-4 sm:px-6 cursor-pointer',
+          ColorsBg[sheduledItem.type],
+          'border border-transparent',
+          iAmSelected && ColorsBorder[sheduledItem.type],
+          ColorsHover[sheduledItem.type] && `${ColorsHover[sheduledItem.type]}`
+        )}
+      >
+        <div className="flex flex-col gap-2">
+          <div className="overflow-hidden">
+            <div className="flex justify-between items-center">
+              <DateHeader dateValue={sheduledItem.date} />
+              {sheduledItem.status && <Status status={sheduledItem.status} />}
+            </div>
+            <div className="flex justify-between items-center mt-2">
+              <p className={cn('capitalize', iAmSelected && 'font-bold')}>
+                {sheduledItem.value.slice(0, 16)}
+                {sheduledItem.value.length > 16 && '...'}
+                <span className="sm:hidden text-text-tertiary text-sm break-all">
+                  {' '}
+                  {sheduledItem.description}
+                </span>
+              </p>
+            </div>
+            <p className="text-text-secondary text-sm">
+              {sheduledItem.dateTime ? sheduledItem.dateTime : ''}
+            </p>
+            <p className="hidden sm:block text-text-tertiary text-sm break-all">
+              {sheduledItem.description}
+            </p>
+          </div>
+        </div>
+        {!!selected && (
+          <FButton
+            kind="secondary"
+            size="small"
+            className="w-full mt-2"
+            onClick={() =>
+              onEntityCancel(
+                sheduledItem.id,
+                sheduledItem.type,
+                sheduledItem.value,
+                sheduledItem.date
+              )
+            }
+          >
+            Cancel
+          </FButton>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/modules/hub-map/client/components/ScheduledItemsList.tsx b/src/modules/hub-map/client/components/ScheduledItemsList.tsx
new file mode 100644
index 00000000..fe52c90d
--- /dev/null
+++ b/src/modules/hub-map/client/components/ScheduledItemsList.tsx
@@ -0,0 +1,149 @@
+import { BackButton, showNotification } from '#client/components/ui'
+import { useOffice } from '#client/utils/hooks'
+import { useUpdateVisit } from '#modules/visits/client/queries'
+import { useStore } from '@nanostores/react'
+import dayjs, { Dayjs } from 'dayjs'
+import React from 'react'
+import * as stores from '#client/stores'
+import { useUpdateRoomReservationByUser } from '#modules/room-reservation/client/queries'
+import { useUpdateGuestInviteByUser } from '#modules/guest-invites/client/queries'
+import {
+  ScheduledItemType,
+  GuestInviteStatus,
+  RoomReservationStatus,
+  VisitStatus,
+  VisitType,
+} from '#shared/types'
+import { FRIENDLY_DATE_FORMAT } from '#client/constants'
+import { ScheduledItem } from './ScheduledItem'
+import { useUpcoming } from '../queries'
+
+export const ScheduledItemsList: React.FC<{
+  onChooseCard: (id: string | null, areaId: string | null, date: Dayjs) => void
+  setDate: (d: Dayjs) => void
+  date: Dayjs
+  className?: string
+}> = ({ onChooseCard, setDate, date, className }) => {
+  const officeId = useStore(stores.officeId)
+  const office = useOffice(officeId)
+  const [scheduledItems, setScheduledItems] = React.useState([])
+  const [selected, setSelected] = React.useState<ScheduledItemType | null>(null)
+
+  const cancellationCallback = () => {
+    showNotification(`Successfully cancelled.`, 'success')
+    refetchUpcoming()
+  }
+
+  const me = useStore(stores.me)
+  const { mutate: updateVisit } = useUpdateVisit(cancellationCallback)
+  const { mutate: updateRoomReservation } =
+    useUpdateRoomReservationByUser(cancellationCallback)
+  const { mutate: updateGuestInvite } =
+    useUpdateGuestInviteByUser(cancellationCallback)
+
+  type updateData = {
+    id: string
+    status: VisitStatus | RoomReservationStatus | GuestInviteStatus
+  }
+
+  const { data: myUpcomingScheduledItems, refetch: refetchUpcoming } =
+    useUpcoming(officeId, dayjs().toString(), me?.id)
+
+  React.useEffect(() => {
+    if (!!myUpcomingScheduledItems?.upcoming) {
+      setScheduledItems(myUpcomingScheduledItems.upcoming)
+    }
+  }, [myUpcomingScheduledItems])
+
+  React.useEffect(() => {
+    if (selected) {
+      // if you removed the last item of this type
+      if (myUpcomingScheduledItems?.byType[selected?.type].length === 0) {
+        resetView()
+      } else {
+        setScheduledItems(myUpcomingScheduledItems?.byType[selected?.type])
+      }
+    }
+  }, [myUpcomingScheduledItems?.byType, date])
+
+  const resetView = () => {
+    setSelected(null)
+    setScheduledItems(myUpcomingScheduledItems.upcoming)
+    onChooseCard(null, selected?.areaId ?? '', dayjs())
+  }
+
+  const processOnClick = (scheduledItem: ScheduledItemType) => {
+    if (!scheduledItem) {
+      return
+    }
+    setScheduledItems(myUpcomingScheduledItems.byType[scheduledItem.type])
+    setSelected(scheduledItem)
+    setDate(dayjs(scheduledItem.date))
+    onChooseCard(
+      scheduledItem.objectId ?? '',
+      scheduledItem.areaId ?? '',
+      dayjs(scheduledItem.date)
+    )
+  }
+
+  const updateFns: Record<string, (data: any) => void> = {
+    [VisitType.Visit]: (data: updateData & { status: VisitStatus }) =>
+      updateVisit(data),
+    [VisitType.Guest]: (data: updateData & { status: GuestInviteStatus }) =>
+      updateGuestInvite(data),
+    [VisitType.RoomReservation]: (
+      data: updateData & { status: RoomReservationStatus }
+    ) => updateRoomReservation(data),
+  }
+
+  const onEntityCancel = (
+    id: string,
+    type: string,
+    value: string,
+    date: string
+  ) => {
+    const confirmMessage = `Are you sure you want to cancel this ${type}: ${value} on ${dayjs(
+      date
+    ).format(FRIENDLY_DATE_FORMAT)}?`
+    if (window.confirm(confirmMessage)) {
+      const data: updateData = {
+        id,
+        status: 'cancelled',
+      }
+      updateFns[type](data)
+      setSelected(null)
+      refetchUpcoming()
+    }
+  }
+
+  return (
+    <div className={className}>
+      {!!selected ? (
+        <div className="">
+          <BackButton
+            text="Back to List"
+            className="mt-[-8px]"
+            onClick={() => resetView()}
+          />
+        </div>
+      ) : (
+        <p className="mb-4 pb-2">
+          <span className="text-text-tertiary">Location: </span>
+          {office?.name}
+        </p>
+      )}
+      <div className="flex justify-start flex-col sm:flex-row gap-2 sm:gap-4 overflow-x-auto max-w-[980px]">
+        {!!scheduledItems?.length &&
+          scheduledItems.map((item: ScheduledItemType, index) => (
+            <ScheduledItem
+              key={item?.id}
+              sheduledItem={item}
+              onClick={processOnClick}
+              selected={selected?.id ?? null}
+              onEntityCancel={onEntityCancel}
+            />
+          ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/modules/hub-map/client/components/index.ts b/src/modules/hub-map/client/components/index.ts
new file mode 100644
index 00000000..d3bd6869
--- /dev/null
+++ b/src/modules/hub-map/client/components/index.ts
@@ -0,0 +1 @@
+export { HubMap } from './HubMap'
diff --git a/src/modules/hub-map/client/helpers/index.ts b/src/modules/hub-map/client/helpers/index.ts
new file mode 100644
index 00000000..1c3d2404
--- /dev/null
+++ b/src/modules/hub-map/client/helpers/index.ts
@@ -0,0 +1,49 @@
+import config from '#client/config'
+import { DATE_FORMAT } from '#client/constants'
+import {
+  OfficeArea,
+  OfficeAreaDesk,
+  OfficeRoom,
+  VisitType,
+} from '#shared/types'
+import { Dayjs } from 'dayjs'
+
+export const getPoints = (area: OfficeArea) => {
+  const points: Array<OfficeAreaDesk | OfficeRoom> = [
+    ...area?.desks.map((desk) => ({
+      ...desk,
+      areaId: area.id,
+      kind: VisitType.Visit,
+    })),
+  ]
+  if (!!area?.meetingRooms?.length) {
+    points.push(
+      ...area?.meetingRooms.map((room) => ({
+        ...room,
+        areaId: area.id,
+        kind: VisitType.RoomReservation,
+      }))
+    )
+  }
+  return points
+}
+
+export const goToVisits = (
+  selectedDesk: string,
+  areaId: string,
+  date: Dayjs
+) => {
+  const url = new URL(config.appHost + '/visits/request')
+  url.searchParams.set('deskId', String(selectedDesk))
+  url.searchParams.set('areaId', String(areaId))
+  url.searchParams.set('date', date.format(DATE_FORMAT))
+  window.location.href = url.toString()
+}
+
+export const goToMeetings = (roomId: string, date: Dayjs) => {
+  const url = new URL(config.appHost + '/room-reservation/request')
+  url.searchParams.set('roomId', String(roomId))
+  url.searchParams.set('date', date.format(DATE_FORMAT))
+  url.hash = String(roomId)
+  window.location.href = url.toString()
+}
diff --git a/src/modules/hub-map/client/queries.ts b/src/modules/hub-map/client/queries.ts
new file mode 100644
index 00000000..2c1241a4
--- /dev/null
+++ b/src/modules/hub-map/client/queries.ts
@@ -0,0 +1,19 @@
+import { useQuery } from 'react-query'
+import { AxiosError } from 'axios'
+import { api } from '#client/utils/api'
+import dayjs from 'dayjs'
+import { DATE_FORMAT } from '#server/constants'
+
+export const useUpcoming = (
+  officeId: string,
+  date: string,
+  userId?: string
+) => {
+  const path = '/user-api/hub-map/upcoming'
+  return useQuery<any, AxiosError>(
+    [path, { officeId, date: dayjs(date).format(DATE_FORMAT), userId }],
+    async ({ queryKey }) =>
+      (await api.get<any>(path, { params: queryKey[1] })).data,
+    { enabled: !!officeId }
+  )
+}
diff --git a/src/modules/hub-map/manifest.json b/src/modules/hub-map/manifest.json
new file mode 100644
index 00000000..909f6c48
--- /dev/null
+++ b/src/modules/hub-map/manifest.json
@@ -0,0 +1,19 @@
+{
+  "id": "hub-map",
+  "name": "HubMap",
+  "dependencies": [
+    "visits",
+    "guest-invites",
+    "room-reservation",
+    "users",
+    "events"
+  ],
+  "requiredIntegrations": [],
+  "recommendedIntegrations": [],
+  "models": [],
+  "clientRouter": {
+    "public": {},
+    "user": {},
+    "admin": {}
+  }
+}
diff --git a/src/modules/hub-map/metadata-schema.ts b/src/modules/hub-map/metadata-schema.ts
new file mode 100644
index 00000000..897c0b0c
--- /dev/null
+++ b/src/modules/hub-map/metadata-schema.ts
@@ -0,0 +1,5 @@
+import { z } from 'zod'
+
+export const schema = z.object({}).strict().optional()
+
+export type Metadata = z.infer<typeof schema>
diff --git a/src/modules/hub-map/permissions.ts b/src/modules/hub-map/permissions.ts
new file mode 100644
index 00000000..c09358aa
--- /dev/null
+++ b/src/modules/hub-map/permissions.ts
@@ -0,0 +1,3 @@
+export const Permissions = {
+  // __Admin: '{MODULE_ID}.__admin',
+}
diff --git a/src/modules/hub-map/server/helpers/index.ts b/src/modules/hub-map/server/helpers/index.ts
new file mode 100644
index 00000000..ced6f797
--- /dev/null
+++ b/src/modules/hub-map/server/helpers/index.ts
@@ -0,0 +1,138 @@
+import { appConfig } from '#server/app-config'
+import { DATE_FORMAT, FRIENDLY_DATE_FORMAT_SHORT } from '#server/constants'
+import {
+  Event,
+  EventApplicationStatus,
+  RoomReservation,
+  User,
+  Visit,
+  VisitType,
+} from '#shared/types'
+import dayjs from 'dayjs'
+import { FastifyInstance } from 'fastify'
+import { Op } from 'sequelize'
+
+export const getTime = (date: string | Date) => dayjs(date).format('LT')
+
+export const formatRoomReservationsResult = (
+  reservation: RoomReservation,
+  officeId: string,
+  areaId: string | undefined
+): any => {
+  // @todo put this somewhere central
+  const office = appConfig.offices.find((o) => o.id === officeId)
+  const area = office?.areas?.find((a) => a.id === areaId)
+  const officeRoom = area?.meetingRooms?.find(
+    (m) => m.id === reservation.roomId
+  )
+  return {
+    id: reservation.id,
+    dateTime: `${getTime(reservation.startDate)} - ${getTime(
+      reservation.endDate
+    )}`,
+    objectId: reservation.roomId,
+    areaId,
+    date: dayjs(reservation.startDate).format('YYYY-MM-DD'),
+    value: 'Room ' + officeRoom?.name ?? '',
+    description: officeRoom?.description ?? '',
+    type: VisitType.RoomReservation,
+    status: reservation.status,
+  }
+}
+
+export const formatVisit = (v: Visit, user?: User | null): any => {
+  return {
+    id: v.id,
+    value: `Desk ${v.deskName}`,
+    type: VisitType.Visit,
+    deskId: v.deskId,
+    objectId: v.deskId,
+    description: v.areaName,
+    areaId: v.areaId,
+    date: v.date,
+    status: v.status,
+    userId: v.userId,
+    user: user
+      ? {
+          id: user?.id,
+          avatar: user?.avatar,
+        }
+      : null,
+  }
+}
+
+export const formatEvent = (
+  event: Event,
+  applicationStatus: EventApplicationStatus,
+  complete: boolean
+) => {
+  const url = `/events/${event.id}`
+  const now = dayjs()
+  const start = dayjs(event.startDate)
+  const end = dayjs(event.endDate)
+  const isToday = now >= start && now <= end
+  const isSingleDay = start.isSame(end, 'day')
+
+  return {
+    id: event.id,
+    value: event.title,
+    url: url,
+    // @todo add different types
+    type: 'event',
+    status: applicationStatus,
+    date: start.format(DATE_FORMAT),
+    complete: complete,
+    description: isToday
+      ? 'Today'
+      : isSingleDay
+      ? event.startDate
+      : `${start.format(FRIENDLY_DATE_FORMAT_SHORT)} - ${end.format(
+          FRIENDLY_DATE_FORMAT_SHORT
+        )}`,
+  }
+}
+
+export const getVisits = async (
+  fastify: FastifyInstance,
+  officeId: string,
+  date: string,
+  userId: string
+) => {
+  const q = {
+    officeId,
+    status: {
+      [Op.in]: ['confirmed', 'pending'],
+    },
+    date: {
+      [Op.gte]: dayjs(date).toDate(),
+    },
+  }
+  if (userId) {
+    q['userId'] = userId
+  }
+  return fastify.db.Visit.findAll({
+    where: q,
+    order: ['date'],
+  })
+}
+
+export const getRoomReservations = async (
+  fastify: FastifyInstance,
+  officeId: string,
+  creatorUserId: string,
+  date: string
+) => {
+  return fastify.db.RoomReservation.findAll({
+    where: {
+      office: officeId,
+      creatorUserId,
+      status: {
+        [Op.in]: ['confirmed', 'pending'],
+      },
+      startDate: {
+        [Op.gte]: dayjs(date).toDate(),
+      },
+    },
+    order: ['startDate'],
+  })
+}
diff --git a/src/modules/hub-map/server/jobs/index.ts b/src/modules/hub-map/server/jobs/index.ts
new file mode 100644
index 00000000..fdefa265
--- /dev/null
+++ b/src/modules/hub-map/server/jobs/index.ts
@@ -0,0 +1,13 @@
+import { CronJob, CronJobContext } from '#server/types'
+// import * as someCronJob from './someCronJob'
+
+// exported as a function for dynamic cron/name generation based on passed argument
+module.exports.moduleCronJobsFactory = (ctx: CronJobContext): CronJob[] => {
+  return [
+    // {
+    //   cron: someCronJob.cron,
+    //   name: someCronJob.name,
+    //   fn: someCronJob.fn,
+    // },
+  ]
+}
diff --git a/src/modules/hub-map/server/models/index.ts b/src/modules/hub-map/server/models/index.ts
new file mode 100644
index 00000000..336ce12b
--- /dev/null
+++ b/src/modules/hub-map/server/models/index.ts
@@ -0,0 +1 @@
+export {}
diff --git a/src/modules/hub-map/server/router.ts b/src/modules/hub-map/server/router.ts
new file mode 100644
index 00000000..baeb680d
--- /dev/null
+++ b/src/modules/hub-map/server/router.ts
@@ -0,0 +1,192 @@
+import { User } from '#modules/users/server/models'
+import { appConfig } from '#server/app-config'
+import {
+  ScheduledItemType,
+  EntityVisibility,
+  EventApplicationStatus,
+  GenericVisit,
+  VisitType,
+} from '#shared/types'
+import dayjs from 'dayjs'
+import { FastifyPluginCallback, FastifyRequest } from 'fastify'
+import {
+  formatEvent,
+  formatRoomReservationsResult,
+  formatVisit,
+  getRoomReservations,
+  getVisits,
+} from './helpers'
+import { getDate } from '#modules/office-visits/server/helpers'
+import { Op } from 'sequelize'
+import { Event, EventCheckmark } from '#modules/events/server/models'
+
+const publicRouter: FastifyPluginCallback = async function (fastify, opts) {}
+
+const addToUpcomingByDate = (
+  upcomingByDate: Record<string, any>,
+  value: GenericVisit,
+  date: string,
+  type: string
+) => {
+  const dateKey = getDate(date)
+  upcomingByDate[dateKey] = upcomingByDate[dateKey] || {}
+  upcomingByDate[dateKey][type] = upcomingByDate[dateKey][type] || []
+  upcomingByDate[dateKey][type].push(value)
+}
+
+const userRouter: FastifyPluginCallback = async function (fastify, opts) {
+  fastify.get(
+    '/upcoming',
+    async (
+      req: FastifyRequest<{
+        Querystring: {
+          date: string
+          limit: number
+          officeId: string
+          userId: string
+        }
+      }>,
+      reply
+    ) => {
+      const { date, officeId } = req.query
+      if (!officeId) {
+        return reply.throw.badParams('Missing office ID')
+      }
+      const office = appConfig.getOfficeById(officeId)
+
+      let visits = await getVisits(fastify, officeId, date, req.query.userId)
+      let roomReservations = await getRoomReservations(
+        fastify,
+        officeId,
+        req.user.id,
+        date
+      )
+
+      const upcomingItems: Array<ScheduledItemType> = []
+      const upcomingByDate: Record<string, any> = {}
+
+      const dailyEventsReservations = roomReservations.map(
+        (reservation, idx) => {
+          const area = office?.areas?.find((area) =>
+            area.meetingRooms?.find((room) => room.id === reservation.roomId)
+          )
+          const item = formatRoomReservationsResult(
+            reservation,
+            officeId,
+            area?.id
+          )
+          // add the first item in array to show at the top of the map in a list
+          if (!idx) {
+            upcomingItems.push(item)
+          }
+          addToUpcomingByDate(
+            upcomingByDate,
+            item,
+            dayjs(reservation.startDate).toString(),
+            VisitType.RoomReservation
+          )
+          return item
+        }
+      )
+
+      let dailyEventsVisits = []
+      for (const [idx, v] of visits.entries()) {
+        const item = formatVisit(v)
+        if (!idx) {
+          upcomingItems.push(item)
+        }
+        const user = await User.findByPk(v.userId)
+        addToUpcomingByDate(
+          upcomingByDate,
+          formatVisit(v, user),
+          v.date,
+          VisitType.Visit
+        )
+        dailyEventsVisits.push(item)
+      }
+
+      const eventApplications = await fastify.db.EventApplication.findAll({
+        include: {
+          model: Event,
+          as: 'event',
+          where: {
+            startDate: {
+              [Op.between]: [
+                dayjs().startOf('day').toDate(),
+                dayjs().startOf('day').add(14, 'days').toDate(),
+              ],
+            },
+
+            visibility: {
+              [Op.in]: [EntityVisibility.Visible, EntityVisibility.Url],
+            },
+          },
+          attributes: ['id', 'title', 'startDate', 'endDate', 'checklist'],
+          required: true,
+          order: [['startDate', 'ASC']],
+        },
+        where: {
+          status: {
+            [Op.in]: [
+              EventApplicationStatus.Opened,
+              EventApplicationStatus.Pending,
+              EventApplicationStatus.Confirmed,
+            ],
+          },
+          userId: req.user.id,
+        },
+        attributes: ['eventId', 'status'],
+      })
+
+      let myEvents = []
+      if (!!eventApplications.length) {
+        for (const application of eventApplications) {
+          const checklistLength = application?.event?.checklist.length
+          let checkmarks = []
+
+          if (checklistLength) {
+            checkmarks = await EventCheckmark.findAll({
+              where: {
+                userId: req.user.id,
+                eventId: application.eventId,
+              },
+            })
+          }
+
+          const eventFormatted = formatEvent(
+            application?.event,
+            application.status,
+            checkmarks.length === checklistLength
+          )
+
+          myEvents.push(eventFormatted)
+        }
+
+        if (!!myEvents.length) {
+          upcomingItems.push(myEvents[0])
+        }
+      }
+
+      return {
+        upcoming: upcomingItems.sort(
+          (a: ScheduledItemType, b: ScheduledItemType) =>
+            dayjs(a.date).isAfter(dayjs(b.date)) ? 1 : -1
+        ),
+        byType: {
+          [VisitType.Visit]: dailyEventsVisits,
+          [VisitType.RoomReservation]: dailyEventsReservations,
+          event: myEvents,
+        },
+        byDate: upcomingByDate,
+      }
+    }
+  )
+}
+
+const adminRouter: FastifyPluginCallback = async function (fastify, opts) {}
+
+module.exports = {
+  publicRouter,
+  userRouter,
+  adminRouter,
+}
diff --git a/src/modules/hub-map/types.ts b/src/modules/hub-map/types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/modules/news/client/components/LatestNews.tsx b/src/modules/news/client/components/LatestNews.tsx
index 23a20112..3cbd1cdb 100644
--- a/src/modules/news/client/components/LatestNews.tsx
+++ b/src/modules/news/client/components/LatestNews.tsx
@@ -45,38 +45,40 @@ export const LatestNews = () => {
           <Placeholder />
         </div>
       ) : (
-        <div>
-          {filteredNews.map((x, i) => (
-            <div
-              key={x.id}
-              onClick={() => stores.goTo('newsPage', { newsId: x.id })}
-              className={
-                'flex flex-col gap-4 pl-4 pr-4 hover:bg-applied-hover hover:rounded-tiny cursor-pointer'
-              }
-            >
-              <div>
-                <P textType="additional" className="text-text-tertiary mb-1">
-                  {dayjs(x.publishedAt).format('D MMM')}
-                </P>
-                <div className="mb-2">{x.title}</div>
+        <div className="flex flex-col justify-between h-full pb-10">
+          <div>
+            {filteredNews.map((x, i) => (
+              <div
+                key={x.id}
+                onClick={() => stores.goTo('newsPage', { newsId: x.id })}
+                className={
+                  'flex flex-col gap-4 pl-4 pr-4 hover:bg-applied-hover hover:rounded-tiny cursor-pointer'
+                }
+              >
+                <div>
+                  <P textType="additional" className="text-text-tertiary mb-1">
+                    {dayjs(x.publishedAt).format('D MMM')}
+                  </P>
+                  <div className="mb-2">{x.title}</div>
+                </div>
+                {i + 1 === filteredNews.length &&
+                filteredNews.length <= MAX_NEWS_TO_SHOW ? (
+                  ''
+                ) : (
+                  <hr className="bg-applied-separator" />
+                )}
               </div>
-              {i + 1 === filteredNews.length &&
-              filteredNews.length <= MAX_NEWS_TO_SHOW ? (
-                ''
-              ) : (
-                <hr className="bg-applied-separator" />
-              )}
-            </div>
-          ))}
-          {!showAll && news.length > MAX_NEWS_TO_SHOW ? (
+            ))}
+          </div>
+          {filteredNews.length >= 3 && (
             <FButton
               kind="link"
-              className="mt-4 ml-2"
-              onClick={() => setShowAll(true)}
+              className="w-auto self-start"
+              onClick={() => stores.goTo('newsList')}
             >
               Show more
             </FButton>
-          ) : null}
+          )}
         </div>
       )}
     </WidgetWrapper>
diff --git a/src/modules/news/client/components/NewsListPage.tsx b/src/modules/news/client/components/NewsListPage.tsx
new file mode 100644
index 00000000..c1ee99a8
--- /dev/null
+++ b/src/modules/news/client/components/NewsListPage.tsx
@@ -0,0 +1,76 @@
+import { useStore } from '@nanostores/react'
+import * as React from 'react'
+import { Header } from '#client/components/Header'
+import {
+  BackButton,
+  Background,
+  ComponentWrapper,
+  FButton,
+  H1,
+  P,
+} from '#client/components/ui'
+import * as stores from '#client/stores'
+import { useNews } from '../queries'
+import { NewsItem } from '#shared/types'
+import dayjs from 'dayjs'
+import { paginateArray } from '#modules/events/client/helpers'
+
+const pageSize = 10
+
+export const NewsListPage = () => {
+  const officeId = useStore(stores.officeId)
+  const { data: news, isFetched } = useNews(officeId)
+  const [newsData, setNewsData] = React.useState<Array<NewsItem>>([])
+  const [page, setPage] = React.useState(1)
+
+  React.useEffect(() => {
+    if (news?.length && isFetched) {
+      let limit = page === 1 ? pageSize : page * pageSize
+      const result = paginateArray(news, 1, limit)
+      setNewsData(result)
+    }
+  }, [news, officeId, page])
+
+  return (
+    <Background>
+      <Header />
+      <ComponentWrapper>
+        <BackButton />
+        <H1 className="my-10 text-center">News</H1>
+        <div>
+          {!!newsData &&
+            newsData.map((x, i) => (
+              <div
+                key={x.id}
+                onClick={() => stores.goTo('newsPage', { newsId: x.id })}
+                className={
+                  'flex flex-col gap-4 pl-4 pr-4 hover:bg-applied-hover hover:rounded-tiny cursor-pointer'
+                }
+              >
+                <div>
+                  <P textType="additional" className="text-text-tertiary mb-1">
+                    {dayjs(x.publishedAt).format('D MMM')}
+                  </P>
+                  <div className="mb-2">{x.title}</div>
+                </div>
+                {i + 1 === news?.length && news?.length <= pageSize ? (
+                  ''
+                ) : (
+                  <hr className="bg-applied-separator" />
+                )}
+              </div>
+            ))}
+          {!!news && news.length !== newsData.length ? (
+            <FButton
+              kind="link"
+              className="mt-4 ml-2"
+              onClick={() => setPage((p) => p + 1)}
+            >
+              Show more
+            </FButton>
+          ) : null}
+        </div>
+      </ComponentWrapper>
+    </Background>
+  )
+}
diff --git a/src/modules/news/client/components/index.ts b/src/modules/news/client/components/index.ts
index 78601202..abcfe576 100644
--- a/src/modules/news/client/components/index.ts
+++ b/src/modules/news/client/components/index.ts
@@ -2,3 +2,4 @@ export { AdminNews } from './AdminNews'
 export { AdminNewsEditor } from './AdminNewsEditor'
 export { LatestNews } from './LatestNews'
 export { NewsPage } from './NewsPage'
+export { NewsListPage } from './NewsListPage'
diff --git a/src/modules/news/manifest.json b/src/modules/news/manifest.json
index 0030c0f5..79a1a6e0 100644
--- a/src/modules/news/manifest.json
+++ b/src/modules/news/manifest.json
@@ -13,6 +13,13 @@
         "fullScreen": true
       }
     },
+    "user": {
+      "newsList": {
+        "path": "/news",
+        "componentId": "NewsListPage",
+        "fullScreen": true
+      }
+    },
     "admin": {
       "adminNews": {
         "path": "/admin/news",
diff --git a/src/modules/office-visits/server/helpers/index.ts b/src/modules/office-visits/server/helpers/index.ts
index bd6c3929..d3568fec 100644
--- a/src/modules/office-visits/server/helpers/index.ts
+++ b/src/modules/office-visits/server/helpers/index.ts
@@ -1,10 +1,13 @@
 import dayjs from 'dayjs'
 import { DATE_FORMAT } from '#server/constants'
+import { RoomReservation } from '#modules/room-reservation/server/models'
+import { User, Visit, VisitType } from '#shared/types'
+import { appConfig } from '#server/app-config'
 
 export const BUSINESS_DAYS_LIMIT: number = 40
 
 // FIXME: temporary fix
-export const getDate = (d: string, timezone: string) =>
+export const getDate = (d: string, timezone?: string) =>
   dayjs(d).format(DATE_FORMAT)
 
 // export const getDate = (d: string, timezone: string) =>
@@ -34,3 +37,50 @@ export const getBusinessDaysFromDate = (
 
   return dates
 }
+
+export const formatRoomReservationsResult = (
+  reservation: RoomReservation,
+  officeId: string,
+  areaId: string
+): any => {
+  // @todo put this somewhere central
+  const office = appConfig.offices.find((o) => o.id === officeId)
+  const area = office?.areas?.find((a) => a.id === areaId)
+  const officeRoom = area?.meetingRooms?.find(
+    (m) => m.id === reservation.roomId
+  )
+  return {
+    id: reservation.id,
+    dateTime: `${getTime(reservation.startDate)} - ${getTime(
+      reservation.endDate
+    )}`,
+    objectId: reservation.roomId,
+    areaId,
+    date: dayjs(reservation.startDate).format('YYYY-MM-DD'),
+    value: 'Room ' + officeRoom?.name ?? '',
+    description: officeRoom?.description ?? '',
+    type: VisitType.RoomReservation,
+    status: reservation.status,
+  }
+}
+
+export const formatVisit = (v: Visit, user?: User | null): any => {
+  return {
+    id: v.id,
+    value: `Desk ${v.deskName}`,
+    type: VisitType.Visit,
+    deskId: v.deskId,
+    objectId: v.deskId,
+    description: v.areaName,
+    areaId: v.areaId,
+    date: v.date,
+    status: v.status,
+    userId: v.userId,
+    user: user
+      ? {
+          id: user?.id,
+          avatar: user?.avatar,
+        }
+      : null,
+  }
+}
diff --git a/src/modules/office-visits/server/router.ts b/src/modules/office-visits/server/router.ts
index cc3ac4f0..fc2fb377 100644
--- a/src/modules/office-visits/server/router.ts
+++ b/src/modules/office-visits/server/router.ts
@@ -3,23 +3,36 @@ import dayjs, { Dayjs } from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import { FastifyPluginCallback, FastifyRequest } from 'fastify'
 import { Op } from 'sequelize'
-import { appConfig } from '#server/app-config'
 import { DATE_FORMAT } from '#server/constants'
 import {
   BUSINESS_DAYS_LIMIT,
+  formatRoomReservationsResult,
+  formatVisit,
   getBusinessDaysFromDate,
   getDate,
 } from './helpers'
-import { Visit, GenericVisit, VisitType, VisitsDailyStats } from '#shared/types'
-import * as fp from '#shared/utils'
 import { Permissions } from '../permissions'
 import { Metadata } from '../metadata-schema'
+import { Visit, GenericVisit, VisitType, VisitsDailyStats } from '#shared/types'
+import * as fp from '#shared/utils'
+import { appConfig } from '#server/app-config'
 
 dayjs.extend(localizedFormat)
 
-// @todo fix types
 const publicRouter: FastifyPluginCallback = async function (fastify, opts) {}
 
+const addToUpcomingByDate = (
+  upcomingByDate: Record<string, any>,
+  value: GenericVisit,
+  date: string,
+  type: string
+) => {
+  const dateKey = getDate(date)
+  upcomingByDate[dateKey] = upcomingByDate[dateKey] || {}
+  upcomingByDate[dateKey][type] = upcomingByDate[dateKey][type] || []
+  upcomingByDate[dateKey][type].push(value)
+}
+
 const userRouter: FastifyPluginCallback = async function (fastify, opts) {
   fastify.get(
     '/',
@@ -33,27 +46,14 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       if (!officeId) {
         return reply.throw.badParams('Missing office ID')
       }
-      const office = appConfig.getOfficeById(officeId)
-
       const nextBusinessDays = getBusinessDaysFromDate(
         date,
         BUSINESS_DAYS_LIMIT
       )
       // @todo REwrite this using native SQL query using JOIN on dates
-      // or rewrite by mergin all the tables into one
+      // or rewrite by merging all the tables into one
       let result: Record<string, any> = {}
 
-      const addToResult = (value: GenericVisit, date: string, type: string) => {
-        if (!result[getDate(date, office.timezone)]) {
-          result[getDate(date, office.timezone)] = {}
-        }
-        if (!result[getDate(date, office.timezone)][type]) {
-          result[getDate(date, office.timezone)][type] = [value]
-        } else {
-          result[getDate(date, office.timezone)][type].push(value)
-        }
-      }
-
       const visits = await fastify.db.Visit.findAll({
         where: {
           officeId: officeId,
@@ -105,25 +105,14 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
         },
       })
 
-      const getTime = (date: string | Date) =>
-        dayjs(date).tz(office.timezone).format('LT')
-
       // adding all the dates together
       visits.forEach((v) =>
-        addToResult(
-          {
-            id: v.id,
-            value: `Desk ${v.deskName}`,
-            description: v.areaName,
-            type: VisitType.Visit,
-          },
-          v.date,
-          VisitType.Visit
-        )
+        addToUpcomingByDate(result, formatVisit(v), v.date, VisitType.Visit)
       )
       guests.forEach((guest) => {
         guest.dates.forEach((date) =>
-          addToResult(
+          addToUpcomingByDate(
+            result,
             {
               value: guest.fullName,
               id: guest.id,
@@ -134,21 +123,15 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
           )
         )
       })
+      const office = appConfig.getOfficeById(officeId)
       roomReservations.forEach((reservation) => {
-        const office = appConfig.offices.find((o) => o.id === officeId)
-        const officeRoom = (office?.rooms || []).find(
-          (r) => r.id === reservation.roomId
+        const area = office?.areas?.find((area) =>
+          area.meetingRooms?.find((room) => room.id === reservation.roomId)
         )
-        return addToResult(
-          {
-            id: reservation.id,
-            dateTime: `${getTime(reservation.startDate)} - ${getTime(
-              reservation.endDate
-            )}`,
-            value: officeRoom?.name ?? '',
-            description: officeRoom?.description,
-            type: VisitType.RoomReservation,
-          },
+
+        return addToUpcomingByDate(
+          result,
+          formatRoomReservationsResult(reservation, officeId, area?.id ?? ''),
           dayjs(reservation.startDate).toString(),
           VisitType.RoomReservation
         )
diff --git a/src/modules/office-visits/types.ts b/src/modules/office-visits/types.ts
index b12340bf..9820c3f4 100644
--- a/src/modules/office-visits/types.ts
+++ b/src/modules/office-visits/types.ts
@@ -1,3 +1,5 @@
+import { User } from '#shared/types'
+
 export enum VisitType {
   Visit = 'visit',
   RoomReservation = 'room-reservation',
@@ -10,6 +12,19 @@ export const OfficeVisitsHeaders = {
   [VisitType.RoomReservation]: 'Meeting Room Bookings',
 } as const
 
+export type ScheduledItemType = {
+  id: string
+  value: string
+  type: string
+  date: string
+  dateTime: string
+  description: string
+  areaId?: string
+  objectId?: string
+  user?: User
+  status: string
+}
+
 export type GenericVisit = {
   id: string
   value: string
diff --git a/src/modules/room-reservation/client/components/RoomListing.tsx b/src/modules/room-reservation/client/components/RoomListing.tsx
index 905535c7..02e8906f 100644
--- a/src/modules/room-reservation/client/components/RoomListing.tsx
+++ b/src/modules/room-reservation/client/components/RoomListing.tsx
@@ -39,7 +39,7 @@ export const RoomListing: React.FC<{
         rooms.map((room: OfficeRoom) => {
           const iAmChosen = chosenRoom === room.id
           return (
-            <div key={room.id}>
+            <div key={room.id} id={room.id}>
               <div
                 className={cn(
                   !iAmChosen && 'hover:bg-fill-6',
diff --git a/src/modules/room-reservation/client/components/RoomReservationRequest.tsx b/src/modules/room-reservation/client/components/RoomReservationRequest.tsx
index 4e118fed..553a36ee 100644
--- a/src/modules/room-reservation/client/components/RoomReservationRequest.tsx
+++ b/src/modules/room-reservation/client/components/RoomReservationRequest.tsx
@@ -52,6 +52,7 @@ export const RoomReservationRequest = () => {
 const _RoomReservationRequest: React.FC = () => {
   const officeId = useStore(stores.officeId)
   const [showModal, setShowModal] = useState(false)
+  const roomRefs = React.useRef<Record<string, HTMLDivElement>>({})
   const [timeDuration, setTimeDuration] = useState(
     dayjs.duration(30, 'minutes')
   )
@@ -62,6 +63,38 @@ const _RoomReservationRequest: React.FC = () => {
     timeSlot: '',
   })
 
+  React.useEffect(() => {
+    const url = new URL(document.location.href)
+    const room = url.searchParams.get('roomId')
+    const date = url.searchParams.get('date')
+    if (!!room && !!date) {
+      setMode(RoomBookingModes.SpecificRoom)
+      setRequest({
+        ...request,
+        roomId: room,
+        date: date,
+      })
+      if (room) {
+        history.pushState(
+          '',
+          document.title,
+          window.location.pathname + window.location.search
+        )
+        setTimeout(scrollToRoom, 500, room)
+      }
+    }
+  }, [])
+
+  const scrollToRoom = React.useCallback((roomId: string) => {
+    const selected = roomRefs.current[roomId]
+    if (selected) {
+      window.scrollTo({
+        top: selected.offsetTop - 200,
+        behavior: 'smooth',
+      })
+    }
+  }, [])
+
   const [mode, setMode] = useState(RoomBookingModes.AnyRoom)
   const [timeSlots, setTimeSlots] = useState<Array<string>>([])
   const { data: placeholderMessage } = usePlaceholderMessage(officeId)
@@ -154,6 +187,7 @@ const _RoomReservationRequest: React.FC = () => {
         </div>
       </>
     ),
+
     [RoomBookingModes.SpecificRoom]: (
       <RoomListing
         chosenRoom={request.roomId}
@@ -161,7 +195,14 @@ const _RoomReservationRequest: React.FC = () => {
         buttonTitle="Select room"
         onRoomSelect={(roomId: string) => updateRequest('roomId', roomId)}
       >
-        <div className="mt-4">
+        <div
+          className="mt-4"
+          ref={(el) => {
+            if (el && roomRefs?.current) {
+              roomRefs.current[request.roomId] = el
+            }
+          }}
+        >
           <SelectSlot
             timeDuration={timeDuration}
             areAvailableSlots={!!timeSlots?.length}
diff --git a/src/modules/room-reservation/server/router.ts b/src/modules/room-reservation/server/router.ts
index 4c1828c4..40401c3a 100644
--- a/src/modules/room-reservation/server/router.ts
+++ b/src/modules/room-reservation/server/router.ts
@@ -20,7 +20,7 @@ import {
   parseTimeSlot,
   timezoneDateToUTC,
 } from './helpers'
-import { isWithinWorkingHours } from '../shared-helpers'
+import { getRoom, getRooms, isWithinWorkingHours } from '../shared-helpers'
 import { Permissions } from '../permissions'
 import {
   OfficeRoomCompact,
@@ -72,7 +72,7 @@ const publicRouter: FastifyPluginCallback = async function (fastify, opts) {
       }
 
       const office = appConfig.getOfficeById(device.office) || {}
-      const room = office.rooms!.find((x) => x.id === device?.roomId)
+      const room = getRoom(office, device?.roomId)
       if (!room) {
         reply.clearCookie(RoomDisplayDeviceCookie)
         return emptyResponse
@@ -198,7 +198,7 @@ const publicRouter: FastifyPluginCallback = async function (fastify, opts) {
       const data = req.body
       const officeId = req.query?.office
       const office = appConfig.getOfficeById(officeId)
-      const room = (office.rooms || []).find((x) => x.id === data.roomId)
+      const room = getRoom(office, data.roomId)
       if (!room) {
         return reply.throw.badParams('Invalid room ID')
       }
@@ -317,7 +317,10 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       })
       const reservedRooms = reservations.map((room) => room.roomId)
 
-      return (req.office?.rooms || []).filter((room) => {
+      return getRooms(req.office).filter((room) => {
+        if (!room) {
+          return false
+        }
         return (
           room.available &&
           !reservedRooms.includes(room.id) &&
@@ -352,7 +355,9 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       }
       const requestedDuration = req.query.duration ?? 30
       const office = req.office
-      const room = office.rooms!.find((room) => room.id === req.params.roomId)
+      const room = getRooms(office).find(
+        (room) => room?.id === req.params.roomId
+      )
       if (!room || !room.available) {
         return reply.throw.badParams('Invalid room ID')
       }
@@ -460,7 +465,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       const office = req.office
       let earliestStart: Array<string> = []
       let latestEnd: Array<string> = []
-      const rooms = (office.rooms || []).filter((room) => room.available)
+      const rooms = getRooms(office).filter((room) => room?.available)
       rooms.forEach((room) => {
         const [workingHoursStart, workingHoursEnd] = room.workingHours.map(
           (time) => time.split(':')
@@ -571,11 +576,11 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
     ) => {
       req.check(Permissions.Create)
       if (req.office) {
-        const rooms = req.office.rooms || []
+        const rooms = getRooms(req.office)
         return req.query.allRooms ? rooms : rooms.filter((x) => x.available)
       }
       const rooms = appConfig.offices
-        .map((x) => x.rooms)
+        .map((x) => getRooms(x))
         .flat()
         .filter(Boolean)
       return req.query.allRooms ? rooms : rooms.filter((x) => x?.available)
@@ -596,7 +601,9 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
         return reply.throw.badParams('Invalid office ID')
       }
       req.check(Permissions.Create, req.office.id)
-      const room = req.office.rooms!.find((x) => x.id === req.params.roomId)
+      const room = getRooms(req.office)!.find(
+        (x) => x?.id === req.params.roomId
+      )
       if (!room || !room.available) {
         return reply.throw.badParams('Invalid room ID')
       }
@@ -632,7 +639,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       }
       req.check(Permissions.Create, req.office.id)
       const data = req.body
-      const room = (req.office.rooms || []).find((x) => x.id === data.roomId)
+      const room = getRooms(req.office).find((x) => x?.id === data.roomId)
       if (!room || !room.available) {
         return reply.throw.badParams('Invalid room ID')
       }
@@ -767,7 +774,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       // Send user notification to the user via Matrix
       if (fastify.integrations.Matrix) {
         const office = appConfig.getOfficeById(reservation.office)
-        const room = office.rooms!.find((x) => x.id === reservation.roomId)
+        const room = getRoom(office, reservation.roomId)
         const data = {
           status,
           user: req.user.usePublicProfileView(),
@@ -830,9 +837,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       }
 
       const office = appConfig.getOfficeById(reservation.office) || {}
-      const roomDetail = office?.rooms!.find(
-        (room) => room.id == reservation?.roomId
-      )
+      const roomDetail = getRoom(office, reservation.roomId)
       return {
         id: reservation.id,
         status: reservation.status,
@@ -870,7 +875,7 @@ const adminRouter: FastifyPluginCallback = async function (fastify, opts) {
       }
       const roomId = req.body.roomId
       const office = appConfig.offices.find((o) =>
-        (o.rooms || []).some((r) => r.id === roomId)
+        (getRooms(o) || []).some((r) => r.id === roomId)
       )
       if (!office) {
         return reply.throw.rejected("Can't resolve a submitted room ID")
@@ -928,7 +933,7 @@ const adminRouter: FastifyPluginCallback = async function (fastify, opts) {
         process.nextTick(async () => {
           try {
             const office = appConfig.getOfficeById(reservation.office)
-            const room = office.rooms!.find((x) => x.id === reservation.roomId)
+            const room = getRoom(office, reservation.roomId)
             const data = {
               room: room ? room.name : reservation.roomId,
               date: getDateTimeString(reservation, office.timezone),
@@ -979,7 +984,7 @@ const adminRouter: FastifyPluginCallback = async function (fastify, opts) {
     return appConfig.offices
       .filter((x) => (officeIds.length ? officeIds.includes(x.id) : true))
       .reduce<OfficeRoomCompact[]>((acc, x) => {
-        const rooms = (x.rooms || []).map((r) => ({
+        const rooms = getRooms(x).map((r) => ({
           id: r.id,
           name: r.name,
           officeId: x.id,
diff --git a/src/modules/room-reservation/shared-helpers/index.ts b/src/modules/room-reservation/shared-helpers/index.ts
index f8595653..7076828e 100644
--- a/src/modules/room-reservation/shared-helpers/index.ts
+++ b/src/modules/room-reservation/shared-helpers/index.ts
@@ -1,4 +1,6 @@
+import { Office, OfficeArea, OfficeRoom } from '#shared/types'
 import dayjs from 'dayjs'
+import { boolean } from 'zod'
 
 export function isWithinWorkingHours(
   timeSlot: string,
@@ -9,3 +11,12 @@ export function isWithinWorkingHours(
   const checkTime = dayjs(timeSlot, 'HH:mm')
   return checkTime.isSameOrAfter(startTime) && checkTime.isBefore(endTime)
 }
+
+export const getRooms = (office: Office) =>
+  office?.areas?.flatMap((area) => area.meetingRooms).filter((a) => !!a) || []
+
+export const getRoom = (
+  office: Office,
+  roomId: string
+): OfficeRoom | undefined =>
+  getRooms(office).find((room) => room?.id === roomId)
diff --git a/src/modules/visits/client/components/DateDeskPicker.tsx b/src/modules/visits/client/components/DateDeskPicker.tsx
index 3c7fc498..b782740a 100644
--- a/src/modules/visits/client/components/DateDeskPicker.tsx
+++ b/src/modules/visits/client/components/DateDeskPicker.tsx
@@ -41,10 +41,19 @@ type Result = {
 
 type Props = {
   officeId: string
+  deskId?: string
+  areaIdProp?: string
   onSubmit: (request: VisitRequest[]) => void
+  date: string
 }
 
-export const DateDeskPicker: React.FC<Props> = ({ officeId, onSubmit }) => {
+export const DateDeskPicker: React.FC<Props> = ({
+  officeId,
+  onSubmit,
+  deskId,
+  areaIdProp,
+  date,
+}) => {
   const permissions = useStore(stores.permissions)
   const [selectedDates, setSelectedDates] = React.useState<string[]>([])
   const onToggleDate = React.useCallback(
@@ -66,15 +75,20 @@ export const DateDeskPicker: React.FC<Props> = ({ officeId, onSubmit }) => {
   }, [upcomingVisits, permissions])
 
   const [selectedDeskId, setSelectedDeskId] = React.useState<string | null>(
-    null
+    deskId ?? null
   )
   const onToggleDesk = React.useCallback((desk: string) => {
     setSelectedDeskId((value) => (value === desk ? null : desk))
   }, [])
 
-  const [areaId, setAreaId] = React.useState<string | null>(null)
+  const [areaId, setAreaId] = React.useState<string | null>(areaIdProp ?? null)
 
   const [pendingResult, setPendingResult] = React.useState<Result | null>(null)
+  React.useEffect(() => {
+    if (!!date) {
+      selectedDates.push(date)
+    }
+  }, [])
   React.useEffect(() => {
     if (areaId && selectedDates.length && selectedDeskId) {
       setPendingResult({
diff --git a/src/modules/visits/client/components/DeskPicker.tsx b/src/modules/visits/client/components/DeskPicker.tsx
index e2bd0990..a91b472b 100644
--- a/src/modules/visits/client/components/DeskPicker.tsx
+++ b/src/modules/visits/client/components/DeskPicker.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { useAvailableDesks, useVisitsAreas } from '../queries'
 import { OfficeFloorMap } from '#client/components/OfficeFloorMap'
 import { prop, propNotIn } from '#shared/utils/fp'
+import { VisitType } from '#shared/types'
 
 type Props = {
   officeId: string
@@ -144,9 +145,16 @@ export const DeskPicker: React.FC<Props> = ({
         <div className="mt-4">
           <OfficeFloorMap
             area={area}
-            availableDeskIds={availableAreaDeskIds}
-            selectedDeskId={selectedDeskId}
-            onToggleDesk={onToggleDesk}
+            mappablePoints={[
+              ...area?.desks.map((desk) => ({
+                ...desk,
+                areaId: area.id,
+                kind: VisitType.Visit,
+              })),
+            ]}
+            clickablePoints={availableAreaDeskIds}
+            selectedPointId={selectedDeskId}
+            onToggle={onToggleDesk}
           />
         </div>
       )}
diff --git a/src/modules/visits/client/components/VisitDetail.tsx b/src/modules/visits/client/components/VisitDetail.tsx
index ab18f58c..128f7d2d 100644
--- a/src/modules/visits/client/components/VisitDetail.tsx
+++ b/src/modules/visits/client/components/VisitDetail.tsx
@@ -11,7 +11,7 @@ import { showNotification } from '#client/components/ui/Notifications'
 import { PermissionsValidator } from '#client/components/PermissionsValidator'
 import config from '#client/config'
 import * as stores from '#client/stores'
-import { VisitStatus } from '#shared/types'
+import { VisitStatus, VisitType } from '#shared/types'
 import { propEq } from '#shared/utils/fp'
 import { useStore } from '@nanostores/react'
 import dayjs from 'dayjs'
@@ -124,9 +124,16 @@ export const _VisitDetail = () => {
                 <div className="">
                   <OfficeFloorMap
                     area={area}
-                    availableDeskIds={[]}
-                    selectedDeskId={visit.deskId}
-                    onToggleDesk={() => null}
+                    mappablePoints={[
+                      ...area?.desks.map((desk) => ({
+                        ...desk,
+                        areaId: area.id,
+                        kind: VisitType.Visit,
+                      })),
+                    ]}
+                    clickablePoints={[]}
+                    selectedPointId={visit.deskId}
+                    onToggle={() => null}
                   />
                 </div>
               )}
diff --git a/src/modules/visits/client/components/VisitRequestForm.tsx b/src/modules/visits/client/components/VisitRequestForm.tsx
index 605162d5..baeb4e54 100644
--- a/src/modules/visits/client/components/VisitRequestForm.tsx
+++ b/src/modules/visits/client/components/VisitRequestForm.tsx
@@ -49,6 +49,11 @@ export const _VisitRequestForm: React.FC = () => {
 
   const { data: visitNotice } = useVisitNotice(officeId)
   const [step, setStep] = React.useState<VisitRequestStep>()
+  const [preselected, setPreselected] = React.useState({
+    deskId: '',
+    areaId: '',
+    date: '',
+  })
 
   const { mutate: createVisit, error } = useCreateVisit(() => {
     setStep(
@@ -76,6 +81,15 @@ export const _VisitRequestForm: React.FC = () => {
     createVisit(request.current)
   }, [])
 
+  React.useEffect(() => {
+    const url = new URL(document.location.href)
+    setPreselected({
+      deskId: url.searchParams.get('deskId') || '',
+      areaId: url.searchParams.get('areaId') || '',
+      date: url.searchParams.get('date') || '',
+    })
+  }, [])
+
   React.useEffect(() => {
     if (!!visitNotice) {
       setStep('health_check')
@@ -120,6 +134,9 @@ export const _VisitRequestForm: React.FC = () => {
       <DateDeskPicker
         officeId={request.current.officeId}
         onSubmit={onDateDeskSubmit}
+        deskId={preselected.deskId}
+        areaIdProp={preselected.areaId}
+        date={preselected.date}
       />
     )
   }
diff --git a/src/modules/visits/server/router.ts b/src/modules/visits/server/router.ts
index 32fd4c9f..b13d7c09 100644
--- a/src/modules/visits/server/router.ts
+++ b/src/modules/visits/server/router.ts
@@ -596,6 +596,8 @@ const userRouter: FastifyPluginCallback = async (fastify, opts) => {
           avatar: !isRobot ? u.avatar || '' : '',
           fullName: visit?.metadata.guestFullName || u?.fullName,
           areaName: visit?.areaName || 'UNKNOWN',
+          deskId: visit?.deskId,
+          areaId: visit?.areaId,
         }
         return result
       })
diff --git a/src/modules/visits/types.ts b/src/modules/visits/types.ts
index 621b3c40..0e187089 100644
--- a/src/modules/visits/types.ts
+++ b/src/modules/visits/types.ts
@@ -51,6 +51,8 @@ export type OfficeVisitor = {
   fullName: string
   avatar: string
   areaName: string
+  areaId: string
+  deskId: string
 }
 
 export type VisitReminderJob = {
diff --git a/src/server/app-config/schemas.ts b/src/server/app-config/schemas.ts
index 83484871..4294ba38 100644
--- a/src/server/app-config/schemas.ts
+++ b/src/server/app-config/schemas.ts
@@ -1,4 +1,4 @@
-import { any, z } from 'zod'
+import { z } from 'zod'
 
 const componentRef: z.ZodTypeAny = z.lazy(() =>
   z.union([
@@ -70,17 +70,6 @@ export const officeAreaDesk = z
     ])
   )
 
-export const officeArea = z.object({
-  id: z.string(),
-  available: z.boolean().default(true),
-  name: z.string(),
-  capacity: z.number().min(1),
-  map: z.string(),
-  // @todo remove type: "desks"
-  bookable: z.boolean().default(false),
-  desks: z.array(officeAreaDesk).min(1),
-})
-
 export const officeRoom = z.object({
   id: z.string(),
   name: z.string(),
@@ -89,6 +78,10 @@ export const officeRoom = z.object({
   photo: z.string(),
   equipment: z.string(),
   capacity: z.number().min(1),
+  position: z.object({
+    x: z.number().min(0).max(100),
+    y: z.number().min(0).max(100),
+  }),
   workingHours: z.tuple([
     z.string().regex(/^([01][0-9]|2[0-4]):[0-5][0-9]$/),
     z.string().regex(/^([01][0-9]|2[0-4]):[0-5][0-9]$/),
@@ -96,6 +89,18 @@ export const officeRoom = z.object({
   autoConfirm: z.boolean(),
 })
 
+export const officeArea = z
+  .object({
+    id: z.string(),
+    available: z.boolean().default(true),
+    name: z.string(),
+    capacity: z.number().min(1),
+    map: z.string(),
+    bookable: z.boolean().default(false),
+    desks: z.array(officeAreaDesk).min(1),
+    meetingRooms: z.array(officeRoom).min(1).optional(),
+  })
+  .superRefine((office, ctx) => {})
 export const office = z
   .object({
     id: z.string(),
@@ -111,7 +116,6 @@ export const office = z
     address: z.string().optional(),
     visitsConfig: officeVisitsConfig.optional(),
     areas: z.array(officeArea).min(1).optional(),
-    rooms: z.array(officeRoom).min(1).optional(),
   })
   .superRefine((office, ctx) => {
     if (office.allowDeskReservation) {
@@ -133,15 +137,23 @@ export const office = z
       }
     }
     if (office.allowRoomReservation) {
-      const roomsParsed = z.array(officeRoom).min(1).safeParse(office.rooms)
+      let hasMeetingRooms = false
+      if (office.areas) {
+        for (const area of office.areas) {
+          if (area.meetingRooms && area.meetingRooms.length > 0) {
+            hasMeetingRooms = true
+            break
+          }
+        }
+      }
       const roomsPlaceholderMessageParsed = z
         .string()
         .nonempty()
         .safeParse(office.roomsPlaceholderMessage)
-      if (!roomsParsed.success && !roomsPlaceholderMessageParsed.success) {
+      if (!hasMeetingRooms && !roomsPlaceholderMessageParsed.success) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
-          message: `Property 'allowRoomReservation' is set but 'rooms' or 'roomsPlaceholderMessageParsed' is missing`,
+          message: `Property 'allowRoomReservation' is set but 'meetingRooms' or 'roomsPlaceholderMessageParsed' is missing in your office areas configuration`,
         })
       }
     }
diff --git a/src/server/constants.ts b/src/server/constants.ts
index d0c80593..9c797e9d 100644
--- a/src/server/constants.ts
+++ b/src/server/constants.ts
@@ -7,6 +7,8 @@ export const DATE_FORMAT = 'YYYY-MM-DD'
 
 export const FRIENDLY_DATE_FORMAT = 'MMMM D YYYY'
 
+export const FRIENDLY_DATE_FORMAT_SHORT = 'MMM D'
+
 export const DATE_FORMAT_DAY_NAME = 'ddd, MMMM D'
 
 // TODO: implement shared constants and move it there
diff --git a/yarn.lock b/yarn.lock
index c76373f7..7f5c0228 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2177,7 +2177,7 @@ lodash@^4.17.21:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -2865,6 +2865,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-easy-panzoom@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/react-easy-panzoom/-/react-easy-panzoom-0.4.4.tgz#b153951e270f579449af837aac5d215244b21e4a"
+  integrity sha512-1zgT6boDVPcrR3Egcz8KEVpM3fs50o22iIWPRlAqvev0/4nw5RnUNFsvmOJ/b5M2nd8MDGknLmyfBdhjoLB6+g==
+  dependencies:
+    warning "4.0.3"
+
 react-query@^3.39.1:
   version "3.39.3"
   resolved "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz"
@@ -3533,6 +3540,13 @@ validator@^13.9.0:
   resolved "https://registry.npmjs.org/validator/-/validator-13.9.0.tgz"
   integrity sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==
 
+warning@4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 web-streams-polyfill@^3.0.3:
   version "3.2.1"
   resolved "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz"

From 77ff9a7e3d51c81978cba97c1a9be5e4867c97dc Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Fri, 23 Feb 2024 13:25:51 +1300
Subject: [PATCH 02/10] autocenter when a person is chosen from the list of
 people in the office

---
 src/client/components/OfficeFloorMap.tsx      |  5 ++-
 src/client/components/ui/ImageWithPanZoom.tsx | 41 +++++++++++++------
 .../hub-map/client/components/HubMap.tsx      |  2 +-
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx
index 23b3d6ac..a5e81a81 100644
--- a/src/client/components/OfficeFloorMap.tsx
+++ b/src/client/components/OfficeFloorMap.tsx
@@ -82,7 +82,7 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
   onToggle,
 }) => {
   const me = useStore(stores.me)
-  const initialStartingPosition = selectedPointId
+  const initialStartPosition = selectedPointId
     ? mappablePoints?.find(
         (point: ScheduledItemType) => point.id === selectedPointId
       )
@@ -192,6 +192,9 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
           alt={`${area.name} floor plan`}
           className="block w-full opacity-60 object-contain overflow-hidden rounded-sm"
           imageOverlayMappingFn={(scale: number) => mapObjects(scale)}
+          initialStartPosition={
+            initialStartPosition ? initialStartPosition.position : undefined
+          }
         />
       </div>
     </div>
diff --git a/src/client/components/ui/ImageWithPanZoom.tsx b/src/client/components/ui/ImageWithPanZoom.tsx
index 3ed5c151..08ca5e55 100644
--- a/src/client/components/ui/ImageWithPanZoom.tsx
+++ b/src/client/components/ui/ImageWithPanZoom.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { cn } from '#client/utils'
 //@ts-ignore
 import { PanZoom, OnStateChangeData } from 'react-easy-panzoom'
@@ -7,6 +7,7 @@ type ImageWithPanZoomProps = {
   src: string
   alt: string
   className?: string
+  initialStartPosition?: { x: number; y: number }
   imageOverlayMappingFn: (scale: number) => Array<React.ReactNode>
   containerClassName?: string
 }
@@ -14,6 +15,7 @@ type ImageWithPanZoomProps = {
 export const ImageWithPanZoom = ({
   src,
   alt,
+  initialStartPosition = { x: 0, y: 0 },
   imageOverlayMappingFn,
   className,
   containerClassName,
@@ -21,6 +23,22 @@ export const ImageWithPanZoom = ({
   const [imgScale, setImgScale] = useState(1)
   const containerRef = useRef(null)
   const imageRef = useRef(null)
+  const panZoomRef = useRef(null)
+
+  const [point, setPoint] = useState(initialStartPosition)
+
+  useEffect(() => {
+    if (
+      point.x !== initialStartPosition.x * imgScale &&
+      point.y !== initialStartPosition.y * imgScale
+    ) {
+      setPoint({
+        x: initialStartPosition.x * imgScale,
+        y: initialStartPosition.y * imgScale,
+      })
+      panZoomRef?.current?.autoCenter()
+    }
+  }, [initialStartPosition])
 
   return (
     <div
@@ -36,18 +54,17 @@ export const ImageWithPanZoom = ({
         minZoom={1}
         autoCenterZoomLevel={2}
         onStateChange={(data: OnStateChangeData) => setImgScale(data.scale)}
+        ref={panZoomRef}
       >
-        <div className="transition-transform touch-none relative">
-          <img
-            ref={imageRef}
-            src={src}
-            alt={alt}
-            className={cn('max-w-none h-auto', className)}
-          />
-          <div className="absolute top-0 left-0 w-full h-full">
-            {/*  passing scale so we can do reverse scaling on the mapped points */}
-            {imageOverlayMappingFn(imgScale)}
-          </div>
+        <img
+          ref={imageRef}
+          src={src}
+          alt={alt}
+          className={cn('max-w-none h-auto', className)}
+        />
+        <div className="absolute top-0 left-0 w-full h-full">
+          {/*  passing scale so we can do reverse scaling on the mapped points */}
+          {imageOverlayMappingFn(imgScale)}
         </div>
       </PanZoom>
     </div>
diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
index 022b0820..fe453528 100644
--- a/src/modules/hub-map/client/components/HubMap.tsx
+++ b/src/modules/hub-map/client/components/HubMap.tsx
@@ -187,7 +187,7 @@ export const HubMap = () => {
               placeholder={'Select area'}
               containerClassName="w-full sm:w-auto  mb-2 block sm:hidden"
             />
-            <div className="sm:max-w-[780px] h-[500px] sm:h-auto m-auto my-2 sm:my-10">
+            <div className="sm:max-w-[780px] h-[400px] sm:h-auto m-auto my-auto sm:my-10">
               <OfficeFloorMap
                 area={area}
                 mappablePoints={mappablePoints}

From 0725e517deaa0266ea8c7fcea517263bc1f6407d Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Fri, 23 Feb 2024 13:52:37 +1300
Subject: [PATCH 03/10] applying touch-none for the image with pan zoom wrapper

---
 src/client/components/ui/ImageWithPanZoom.tsx | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/client/components/ui/ImageWithPanZoom.tsx b/src/client/components/ui/ImageWithPanZoom.tsx
index 08ca5e55..c06c40bc 100644
--- a/src/client/components/ui/ImageWithPanZoom.tsx
+++ b/src/client/components/ui/ImageWithPanZoom.tsx
@@ -56,15 +56,17 @@ export const ImageWithPanZoom = ({
         onStateChange={(data: OnStateChangeData) => setImgScale(data.scale)}
         ref={panZoomRef}
       >
-        <img
-          ref={imageRef}
-          src={src}
-          alt={alt}
-          className={cn('max-w-none h-auto', className)}
-        />
-        <div className="absolute top-0 left-0 w-full h-full">
-          {/*  passing scale so we can do reverse scaling on the mapped points */}
-          {imageOverlayMappingFn(imgScale)}
+        <div className="relative touch-none">
+          <img
+            ref={imageRef}
+            src={src}
+            alt={alt}
+            className={cn('max-w-none h-auto', className)}
+          />
+          <div className="absolute top-0 left-0 w-full h-full">
+            {/*  passing scale so we can do reverse scaling on the mapped points */}
+            {imageOverlayMappingFn(imgScale)}
+          </div>
         </div>
       </PanZoom>
     </div>

From 8162bbc7a3da8a9dc87ffc9a18b170aaad5d7c9a Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Fri, 1 Mar 2024 16:19:24 +1300
Subject: [PATCH 04/10] More granular types, events view routes, updates to
 config, permission validator for hub map

---
 src/client/components/ui/Icons.tsx            |   2 +-
 .../events/client/components/EventsPage.tsx   | 102 ++++++------
 src/modules/events/client/queries.ts          |  33 +++-
 src/modules/events/manifest.json              |   4 +-
 src/modules/events/server/helpers/index.ts    |  70 +++++++-
 .../events/server/models/event-application.ts |   2 +-
 src/modules/events/server/router.ts           | 153 ++++++++++--------
 src/modules/events/types.ts                   |  24 +--
 .../hub-map/client/components/HubMap.tsx      |  11 +-
 .../client/components/ScheduledItemsList.tsx  |  18 ++-
 src/modules/hub-map/server/helpers/index.ts   |  13 +-
 src/modules/hub-map/server/jobs/index.ts      |  13 --
 src/modules/hub-map/server/router.ts          |  15 +-
 .../news/client/components/NewsListPage.tsx   |  75 +++++----
 src/modules/news/manifest.json                |   2 +-
 .../office-visits/server/helpers/index.ts     |   7 +-
 src/server/app-config/schemas.ts              |  30 ++--
 17 files changed, 350 insertions(+), 224 deletions(-)
 delete mode 100644 src/modules/hub-map/server/jobs/index.ts

diff --git a/src/client/components/ui/Icons.tsx b/src/client/components/ui/Icons.tsx
index 36d58307..1c9b1e39 100644
--- a/src/client/components/ui/Icons.tsx
+++ b/src/client/components/ui/Icons.tsx
@@ -301,8 +301,8 @@ const ArrowForward = ({ fillClassName = 'fill-text-tertiary', ...props }) => (
 const ArrowBack = ({ fillClassName = 'fill-text-tertiary', ...props }) => (
   <ArrowForward
     fillClassName={fillClassName}
-    props={props}
     className={'rotate-180'}
+    {...props}
   />
 )
 
diff --git a/src/modules/events/client/components/EventsPage.tsx b/src/modules/events/client/components/EventsPage.tsx
index de29a7c0..8edef3e5 100644
--- a/src/modules/events/client/components/EventsPage.tsx
+++ b/src/modules/events/client/components/EventsPage.tsx
@@ -1,16 +1,8 @@
 import { useStore } from '@nanostores/react'
 import * as React from 'react'
-import { Header } from '#client/components/Header'
-import {
-  BackButton,
-  Background,
-  ComponentWrapper,
-  H1,
-  H2,
-  HR,
-} from '#client/components/ui'
+import { BackButton, ComponentWrapper, H1, H2 } from '#client/components/ui'
 import * as stores from '#client/stores'
-import { useMyEvents, useUpcomingEvents } from '../queries'
+import { useMyEventsView, useEventsView } from '../queries'
 import { EventApplicationStatus } from '#shared/types'
 import { EventBadge } from './EventBadge'
 import { cn } from '#client/utils'
@@ -23,6 +15,9 @@ const Sections = {
   optedOut: 'opted out',
   upcoming: 'upcoming',
 }
+
+import { EventTimeCategory, Event } from '#shared/types'
+
 const TitleStatus = {
   [Sections.waiting]: EventApplicationStatus.Pending,
   [Sections.confirmed]: EventApplicationStatus.Confirmed,
@@ -35,13 +30,7 @@ const EventsBg = {
   [Sections.past]: 'bg-gray-100',
 }
 
-const EventsList = ({
-  events,
-  title,
-}: {
-  title: string
-  events: Array<Event>
-}) => (
+const EventsList = ({ events, title }: { title: string; events: Event[] }) => (
   <div>
     <H2 className="mt-10 mb-4 capitalize">{title}</H2>
     <div className="flex flex-col gap-2">
@@ -71,45 +60,68 @@ const EventsList = ({
 
 export const EventsPage = () => {
   const officeId = useStore(stores.officeId)
-  const { data: events, isFetched } = useUpcomingEvents(officeId, 'time')
-  const { data: myEvents, isFetched: isMineFetched } = useMyEvents(
+  const { data: events, isFetched } = useEventsView(officeId, 'time')
+  const { data: myEvents, isFetched: isMineFetched } = useMyEventsView(
     officeId,
     'status'
   )
+  const [uniqueUpcoming, setUniqueUpcoming] = React.useState<Event[]>([])
+
+  React.useEffect(() => {
+    if (!!events && !!myEvents && !myEvents.pending.length) {
+      return
+    } else if (!!events && !!myEvents) {
+      const upcomingEventIds = new Set(myEvents.pending.map((e) => e.id))
+      const uniqueEvents = events[EventTimeCategory.upcoming].filter(
+        (e) => !upcomingEventIds.has(e.id)
+      )
+      if (!!uniqueEvents.length) {
+        setUniqueUpcoming(uniqueEvents)
+      }
+    }
+  }, [myEvents, events])
   if (!isFetched && !isMineFetched) {
     return null
   }
 
-  if (!events || !(Sections.past in events && Sections.upcoming in events)) {
+  if (!events || !Object.keys(events).length) {
     return (
-      <div className="text-gray-400 text-center">No upcoming events yet</div>
+      <ComponentWrapper>
+        <H1 className="my-10 text-center">Events</H1>
+        <div className="text-gray-400 text-center">No events to show yet</div>
+      </ComponentWrapper>
     )
   }
 
   return (
-    <Background>
-      <Header />
-      <ComponentWrapper>
-        <BackButton />
-        <H1 className="my-10 text-center">Events</H1>
-        {!!myEvents && (
-          <div>
-            {Object.values(Sections).map((title) => {
-              // @ts-ignore
-              const evs = myEvents[TitleStatus[title] as EventApplicationStatus]
-              if (!!evs?.length) {
-                return <EventsList title={title} events={evs} />
-              }
-            })}
-          </div>
-        )}
-        {[Sections.upcoming, Sections.past].map((timeTitle) => {
-          const evs = events[timeTitle]
-          if (evs?.length) {
-            return <EventsList title={timeTitle} events={evs} />
-          }
-        })}
-      </ComponentWrapper>
-    </Background>
+    <ComponentWrapper>
+      <BackButton />
+      <H1 className="my-10 text-center">Events</H1>
+      {!!myEvents && (
+        <div>
+          {Object.values(Sections).map((title) => {
+            // @ts-ignore
+            const evs = myEvents[TitleStatus[title] as EventApplicationStatus]
+            if (!!evs?.length) {
+              return <EventsList key={title} title={title} events={evs} />
+            }
+          })}
+        </div>
+      )}
+      {!!uniqueUpcoming?.length && (
+        <EventsList
+          key={Sections.upcoming}
+          title={Sections.upcoming}
+          events={uniqueUpcoming}
+        />
+      )}
+      {!!events?.past && (
+        <EventsList
+          key={Sections.past}
+          title={Sections.past}
+          events={events[EventTimeCategory.past]}
+        />
+      )}
+    </ComponentWrapper>
   )
 }
diff --git a/src/modules/events/client/queries.ts b/src/modules/events/client/queries.ts
index 5e8b8306..3f39292d 100644
--- a/src/modules/events/client/queries.ts
+++ b/src/modules/events/client/queries.ts
@@ -12,11 +12,11 @@ import {
   EventParticipant,
   EventPreview,
   EventPublicResponse,
-  EventTimeMap,
   EventToogleCheckboxRequest,
+  EventsByStatusCategory,
+  EventsByTimeCategory,
   FormSubmissionRequest,
   GlobalEvent,
-  MyEventsStatusMap,
   PublicForm,
   User,
 } from '#shared/types'
@@ -41,10 +41,10 @@ export const useEventsAdmin = (
   )
 }
 
-export const useUpcomingEvents = (officeId: string | null, sortBy?: string) => {
+export const useUpcomingEvents = (officeId: string | null) => {
   const path = '/user-api/events/event'
-  return useQuery<EventPublicResponse[] | EventTimeMap, AxiosError>(
-    [path, { office: officeId, sortBy }],
+  return useQuery<EventPublicResponse[], AxiosError>(
+    [path, { office: officeId }],
     async ({ queryKey }) =>
       (await api.get<EventPublicResponse[]>(path, { params: queryKey[1] }))
         .data,
@@ -52,9 +52,19 @@ export const useUpcomingEvents = (officeId: string | null, sortBy?: string) => {
   )
 }
 
+export const useEventsView = (officeId: string | null, sortBy?: string) => {
+  const path = '/user-api/events/event/view'
+  return useQuery<EventsByTimeCategory, AxiosError>(
+    [path, { office: officeId, sortBy }],
+    async ({ queryKey }) =>
+      (await api.get<EventsByTimeCategory>(path, { params: queryKey[1] })).data,
+    { enabled: !!officeId }
+  )
+}
+
 export const useMyEvents = (officeId: string | null, sortBy?: string) => {
   const path = '/user-api/events/event/me'
-  return useQuery<Event[] | MyEventsStatusMap, AxiosError>(
+  return useQuery<Event[], AxiosError>(
     [path, { office: officeId, sortBy }],
     async ({ queryKey }) =>
       (await api.get<Event[]>(path, { params: queryKey[1] })).data,
@@ -62,6 +72,17 @@ export const useMyEvents = (officeId: string | null, sortBy?: string) => {
   )
 }
 
+export const useMyEventsView = (officeId: string | null, sortBy?: string) => {
+  const path = '/user-api/events/event/me/view'
+  return useQuery<EventsByStatusCategory, AxiosError>(
+    [path, { office: officeId, sortBy }],
+    async ({ queryKey }) =>
+      (await api.get<EventsByStatusCategory>(path, { params: queryKey[1] }))
+        .data,
+    { enabled: !!officeId }
+  )
+}
+
 export const useUncompletedActions = (officeId: string | null) => {
   const path = '/user-api/events/event/uncompleted'
   return useQuery<Event[], AxiosError>(
diff --git a/src/modules/events/manifest.json b/src/modules/events/manifest.json
index 65b2cb12..559b3884 100644
--- a/src/modules/events/manifest.json
+++ b/src/modules/events/manifest.json
@@ -18,7 +18,7 @@
   "clientRouter": {
     "public": {
       "eventPage": {
-        "path": "/events/:eventId",
+        "path": "/event/:eventId",
         "componentId": "EventPage",
         "fullScreen": true
       },
@@ -32,7 +32,7 @@
       "events": {
         "path": "/events",
         "componentId": "EventsPage",
-        "fullScreen": true
+        "fullScreen": false
       }
     },
     "admin": {
diff --git a/src/modules/events/server/helpers/index.ts b/src/modules/events/server/helpers/index.ts
index 2d8fdd8e..e2ce7d2c 100644
--- a/src/modules/events/server/helpers/index.ts
+++ b/src/modules/events/server/helpers/index.ts
@@ -3,7 +3,9 @@ import { User } from '#modules/users/server/models'
 import config from '#server/config'
 import { appConfig } from '#server/app-config'
 import * as fp from '#shared/utils/fp'
-import { Event } from '#shared/types'
+import { EntityVisibility, Event, EventApplicationStatus } from '#shared/types'
+import { Op } from 'sequelize'
+import { FastifyInstance } from 'fastify'
 
 export * as checklists from './checklists'
 export * as globalEventTemplates from './global-event-templates'
@@ -44,3 +46,69 @@ export const getApplicationUpdateMessage = (
     user: user.usePublicProfileView(),
     status,
   })
+
+export const getUpcomingEventsForUser = async (
+  fastify: FastifyInstance,
+  user: User,
+  officeId: string
+) =>
+  fastify.db.Event.findAll({
+    include: {
+      model: fastify.db.EventApplication,
+      as: 'applications',
+      where: {
+        userId: user.id,
+      },
+      required: false,
+    },
+    where: {
+      endDate: {
+        [Op.gte]: new Date(),
+      },
+      visibility: EntityVisibility.Visible,
+      allowedRoles: { [Op.overlap]: user.roles },
+      offices: { [Op.contains]: [officeId] },
+    },
+    order: ['startDate'],
+  })
+
+export const getUpcomingEventApplicationsForUser = (
+  fastify: FastifyInstance,
+  userId: string
+) =>
+  fastify.db.EventApplication.findAll({
+    include: {
+      model: fastify.db.Event,
+      as: 'event',
+      where: {
+        endDate: {
+          [Op.gte]: new Date(),
+        },
+        visibility: {
+          [Op.in]: [EntityVisibility.Visible, EntityVisibility.Url],
+        },
+      },
+      attributes: [
+        'id',
+        'title',
+        'startDate',
+        'endDate',
+        'coverImageUrl',
+        'metadata',
+        'checklist',
+      ],
+      required: true,
+      order: [['startDate', 'ASC']],
+    },
+    where: {
+      status: {
+        [Op.in]: [
+          EventApplicationStatus.Opened,
+          EventApplicationStatus.Pending,
+          EventApplicationStatus.Confirmed,
+        ],
+      },
+      userId: userId,
+    },
+    attributes: ['eventId', 'status', 'id'],
+  })
diff --git a/src/modules/events/server/models/event-application.ts b/src/modules/events/server/models/event-application.ts
index ba4f0428..814bfc9f 100644
--- a/src/modules/events/server/models/event-application.ts
+++ b/src/modules/events/server/models/event-application.ts
@@ -32,7 +32,7 @@ export class EventApplication
   declare creatorUserId: string
   declare formId: string | null
   declare formSubmissionId: string | null
-  declare event: Event
+  declare event?: Event
 
   static async countByEventId(): Promise<Record<string, number>> {
     const entries = (await this.findAll({
diff --git a/src/modules/events/server/router.ts b/src/modules/events/server/router.ts
index 09fde506..8cd0c159 100644
--- a/src/modules/events/server/router.ts
+++ b/src/modules/events/server/router.ts
@@ -11,7 +11,7 @@ import {
   FormSubmissionRequest,
   PublicForm,
 } from '#modules/forms/types'
-import { EntityVisibility } from '#shared/types'
+import { EntityVisibility, EventStatusCategory } from '#shared/types'
 import * as fp from '#shared/utils/fp'
 import { Permissions } from '../permissions'
 import {
@@ -23,12 +23,16 @@ import {
   EventParticipant,
   EventPublicResponse,
   EventToogleCheckboxRequest,
+  EventWithApplications,
 } from '../types'
-import { getApplicationMessage, getApplicationUpdateMessage } from './helpers'
+import {
+  getApplicationMessage,
+  getApplicationUpdateMessage,
+  getUpcomingEventApplicationsForUser,
+  getUpcomingEventsForUser,
+} from './helpers'
 import { isEventApplicationUncompleted } from './helpers/checklists'
 import { Metadata } from '../metadata-schema'
-import { boolean } from 'zod'
-import { EventCheckmark } from './models'
 
 const mId = 'events'
 
@@ -450,53 +454,64 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       if (!req.office) {
         return reply.throw.badParams('Invalid office ID')
       }
-      const events = await fastify.db.Event.findAll({
-        include: {
-          model: fastify.db.EventApplication,
-          as: 'applications',
-          where: {
-            userId: req.user.id,
-          },
-          required: false,
-        },
-        where: {
-          endDate: {
-            [Op.gte]: new Date(),
-          },
-          visibility: EntityVisibility.Visible,
-          allowedRoles: { [Op.overlap]: req.user.roles },
-          offices: { [Op.contains]: [req.office.id] },
-        },
-        order: ['startDate'],
+      const events = await getUpcomingEventsForUser(
+        fastify,
+        req.user,
+        req.office.id
+      )
+
+      return events.map((e) => {
+        const application = !!e?.applications?.length ? e.applications[0] : null
+        return e.usePublicView(application, [], null)
       })
+    }
+  )
 
-      if (!!req.query.sortBy && req.query.sortBy === 'time') {
+  fastify.get(
+    '/event/view',
+    async (
+      req: FastifyRequest<{
+        Querystring: { sortBy?: string }
+      }>,
+      reply
+    ) => {
+      if (!req.office) {
+        return reply.throw.badParams('Invalid office ID')
+      }
+      const sort = ['time']
+      if (!req.query.sortBy || !sort.includes(req.query.sortBy)) {
+        return reply.throw.badParams('Invalid sortBy parameter')
+      }
+
+      if (req.query.sortBy === 'time') {
+        const upcomingEvents = await getUpcomingEventsForUser(
+          fastify,
+          req.user,
+          req.office.id
+        )
         const pastEvents = await fastify.db.Event.findAll({
           where: {
             endDate: {
               [Op.lt]: new Date(),
             },
             visibility: EntityVisibility.Visible,
-            allowedRoles: { [Op.contains]: [req.user.role] },
+            allowedRoles: { [Op.overlap]: req.user.roles },
             offices: { [Op.contains]: [req.office.id] },
           },
           order: ['startDate'],
         })
         return {
-          upcoming: events,
+          upcoming: upcomingEvents,
           past: pastEvents,
         }
       }
 
-      return events.map((e) => {
-        const application = !!e?.applications?.length ? e.applications[0] : null
-        return e.usePublicView(application, [], null)
-      })
+      return []
     }
   )
 
   fastify.get(
-    '/event/me',
+    '/event/me/view',
     async (
       req: FastifyRequest<{
         Querystring: { sortBy?: string }
@@ -507,46 +522,18 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
         return reply.throw.badParams('Invalid office ID')
       }
 
-      const eventApplications = await fastify.db.EventApplication.findAll({
-        include: {
-          model: fastify.db.Event,
-          as: 'event',
-          where: {
-            endDate: {
-              [Op.gte]: new Date(),
-            },
-            visibility: {
-              [Op.in]: [EntityVisibility.Visible, EntityVisibility.Url],
-            },
-          },
-          attributes: [
-            'id',
-            'title',
-            'startDate',
-            'endDate',
-            'coverImageUrl',
-            'metadata',
-            'checklist',
-          ],
-          required: true,
-          order: [['startDate', 'ASC']],
-        },
-        where: {
-          status: {
-            [Op.in]: [
-              EventApplicationStatus.Opened,
-              EventApplicationStatus.Pending,
-              EventApplicationStatus.Confirmed,
-            ],
-          },
-          userId: req.user.id,
-        },
-        attributes: ['eventId', 'status', 'id'],
-      })
+      const sort = ['status']
+      if (!req.query.sortBy || !sort.includes(req.query.sortBy)) {
+        return reply.throw.badParams('Invalid sortBy parameter')
+      }
+      const eventApplications = await getUpcomingEventApplicationsForUser(
+        fastify,
+        req.user.id
+      )
 
-      if (!!req.query.sortBy && req.query.sortBy === 'status') {
+      if (req.query.sortBy === 'status') {
         const result: Record<
-          EventApplicationStatus,
+          EventStatusCategory,
           Array<Event & { applicationId: string }>
         > = {
           [EventApplicationStatus.Confirmed]: [],
@@ -560,7 +547,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
           let checkmarks = []
 
           if (checklistLength) {
-            checkmarks = await EventCheckmark.findAll({
+            checkmarks = await fastify.db.EventCheckmark.findAll({
               where: {
                 userId: req.user.id,
                 eventId: app.eventId,
@@ -568,7 +555,10 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
             })
           }
 
-          const objectToAdd = {
+          const objectToAdd: EventWithApplications & {
+            applicationId: string
+            applicationComplete: boolean
+          } = {
             ...event,
             applicationId: app.id,
             applicationComplete: checkmarks?.length == checklistLength,
@@ -576,7 +566,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
           if (app.status == EventApplicationStatus.Opened) {
             result[EventApplicationStatus.Pending].push(objectToAdd)
           } else {
-            result[app.status].push(objectToAdd)
+            result[app.status as EventStatusCategory].push(objectToAdd)
           }
         }
         return result
@@ -586,6 +576,27 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
     }
   )
 
+  fastify.get(
+    '/event/me',
+    async (
+      req: FastifyRequest<{
+        Querystring: { sortBy?: string }
+      }>,
+      reply
+    ) => {
+      if (!req.office) {
+        return reply.throw.badParams('Invalid office ID')
+      }
+
+      const eventApplications = await getUpcomingEventApplicationsForUser(
+        fastify,
+        req.user.id
+      )
+
+      return eventApplications.map((e) => e.event)
+    }
+  )
+
   fastify.get('/event/uncompleted', async (req, reply) => {
     if (!req.office) {
       return reply.throw.badParams('Invalid office ID')
diff --git a/src/modules/events/types.ts b/src/modules/events/types.ts
index 7c574874..b2ef1bb8 100644
--- a/src/modules/events/types.ts
+++ b/src/modules/events/types.ts
@@ -130,15 +130,19 @@ export type EventParticipant = Pick<User, 'id' | 'fullName' | 'avatar' | 'team'>
 
 export type EventPreview = Pick<Event, 'id' | 'title' | 'formId'>
 
-export interface MyEventsStatusMap {
-  [EventApplicationStatus.Confirmed]: Array<Event>
-  [EventApplicationStatus.Pending]: Array<Event>
-  [EventApplicationStatus.Opened]: Array<Event>
-  [EventApplicationStatus.CancelledAdmin]: Array<Event>
-  [EventApplicationStatus.CancelledUser]: Array<Event>
+export enum EventTimeCategory {
+  past = 'past',
+  upcoming = 'upcoming',
 }
+export type EventsByTimeCategory = Record<EventTimeCategory, Event[]>
 
-export interface EventTimeMap {
-  past: Array<Event>
-  upcoming: Array<Event>
-}
+export type EventStatusCategory =
+  | EventApplicationStatus.Opened
+  | EventApplicationStatus.Pending
+  | EventApplicationStatus.Confirmed
+
+export type EventsByStatusCategory = Record<EventStatusCategory, Event[]>
+
+export type EventWithApplications = Event & { applications: EventApplication[] }
+
+export type EventApplicationWithEvent = EventApplication & { event: Event }
diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
index fe453528..3463953a 100644
--- a/src/modules/hub-map/client/components/HubMap.tsx
+++ b/src/modules/hub-map/client/components/HubMap.tsx
@@ -17,8 +17,15 @@ import { propEq } from '#shared/utils'
 import { getPoints, goToMeetings, goToVisits } from '../helpers'
 import { VisitType } from '#shared/types'
 import { useUpcoming } from '../queries'
+import { PermissionsValidator } from '#client/components/PermissionsValidator'
 
-export const HubMap = () => {
+export const HubMap = () => (
+  <PermissionsValidator required={['visits.create', 'room-reservation.create']}>
+    <_HubMap />
+  </PermissionsValidator>
+)
+
+export const _HubMap = () => {
   const officeId = useStore(stores.officeId)
   const office = useOffice(officeId)
   const me = useStore(stores.me)
@@ -111,7 +118,7 @@ export const HubMap = () => {
     return <></>
   }
   return (
-    <WidgetWrapper className="transition-all delay-100" title={`Hub Map`}>
+    <WidgetWrapper className="transition-all delay-100">
       <div className="overflow-none">
         <ScheduledItemsList
           onChooseCard={(id, areaId, chosenDate) => {
diff --git a/src/modules/hub-map/client/components/ScheduledItemsList.tsx b/src/modules/hub-map/client/components/ScheduledItemsList.tsx
index fe52c90d..3b38464e 100644
--- a/src/modules/hub-map/client/components/ScheduledItemsList.tsx
+++ b/src/modules/hub-map/client/components/ScheduledItemsList.tsx
@@ -1,4 +1,4 @@
-import { BackButton, showNotification } from '#client/components/ui'
+import { BackButton, Icons, showNotification } from '#client/components/ui'
 import { useOffice } from '#client/utils/hooks'
 import { useUpdateVisit } from '#modules/visits/client/queries'
 import { useStore } from '@nanostores/react'
@@ -118,21 +118,23 @@ export const ScheduledItemsList: React.FC<{
 
   return (
     <div className={className}>
-      {!!selected ? (
+      {!!selected && (
         <div className="">
           <BackButton
             text="Back to List"
-            className="mt-[-8px]"
+            className="block sm:hidden mt-[-8px]"
             onClick={() => resetView()}
           />
         </div>
-      ) : (
-        <p className="mb-4 pb-2">
-          <span className="text-text-tertiary">Location: </span>
-          {office?.name}
-        </p>
       )}
       <div className="flex justify-start flex-col sm:flex-row gap-2 sm:gap-4 overflow-x-auto max-w-[980px]">
+        {!!selected && (
+          <div onClick={() => resetView()}>
+            <div className="hidden sm:block">
+              <Icons.ArrowBack height="24" width="24" />
+            </div>
+          </div>
+        )}
         {!!scheduledItems?.length &&
           scheduledItems.map((item: ScheduledItemType, index) => (
             <ScheduledItem
diff --git a/src/modules/hub-map/server/helpers/index.ts b/src/modules/hub-map/server/helpers/index.ts
index ced6f797..c1caaff3 100644
--- a/src/modules/hub-map/server/helpers/index.ts
+++ b/src/modules/hub-map/server/helpers/index.ts
@@ -4,6 +4,7 @@ import {
   Event,
   EventApplicationStatus,
   RoomReservation,
+  ScheduledItemType,
   User,
   Visit,
   VisitType,
@@ -11,6 +12,7 @@ import {
 import dayjs from 'dayjs'
 import { FastifyInstance } from 'fastify'
 import { Op } from 'sequelize'
+import { Filterable } from 'sequelize'
 
 export const getTime = (date: string | Date) => dayjs(date).format('LT')
 
@@ -40,7 +42,10 @@ export const formatRoomReservationsResult = (
   }
 }
 
-export const formatVisit = (v: Visit, user?: User | null): any => {
+export const formatVisit = (
+  v: Visit,
+  user?: User | null
+): ScheduledItemType & (User | { id: string; avatar: string | null }) => {
   return {
     id: v.id,
     value: `Desk ${v.deskName}`,
@@ -98,7 +103,7 @@ export const getVisits = async (
   date: string,
   userId: string
 ) => {
-  const q = {
+  const where: Filterable<Visit>['where'] = {
     officeId,
     status: {
       [Op.in]: ['confirmed', 'pending'],
@@ -108,10 +113,10 @@ export const getVisits = async (
     },
   }
   if (userId) {
-    q['userId'] = userId
+    where['userId'] = userId
   }
   return fastify.db.Visit.findAll({
-    where: q,
+    where,
     order: ['date'],
   })
 }
diff --git a/src/modules/hub-map/server/jobs/index.ts b/src/modules/hub-map/server/jobs/index.ts
deleted file mode 100644
index fdefa265..00000000
--- a/src/modules/hub-map/server/jobs/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CronJob, CronJobContext } from '#server/types'
-// import * as someCronJob from './someCronJob'
-
-// exported as a function for dynamic cron/name generation based on passed argument
-module.exports.moduleCronJobsFactory = (ctx: CronJobContext): CronJob[] => {
-  return [
-    // {
-    //   cron: someCronJob.cron,
-    //   name: someCronJob.name,
-    //   fn: someCronJob.fn,
-    // },
-  ]
-}
diff --git a/src/modules/hub-map/server/router.ts b/src/modules/hub-map/server/router.ts
index baeb680d..be45bc06 100644
--- a/src/modules/hub-map/server/router.ts
+++ b/src/modules/hub-map/server/router.ts
@@ -18,7 +18,8 @@ import {
 } from './helpers'
 import { getDate } from '#modules/office-visits/server/helpers'
 import { Op } from 'sequelize'
-import { Event, EventCheckmark } from '#modules/events/server/models'
+import { Event } from '#modules/events/server/models'
+import * as fp from '#shared/utils/fp'
 
 const publicRouter: FastifyPluginCallback = async function (fastify, opts) {}
 
@@ -90,15 +91,21 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       )
 
       let dailyEventsVisits = []
+      const userIds = Array.from(new Set(visits.map(fp.prop('userId'))))
+      const users = await fastify.db.User.findAll({
+        where: { id: { [Op.in]: userIds } },
+        raw: true,
+      })
+      const usersById = users.reduce(fp.by('id'), {})
+
       for (const [idx, v] of visits.entries()) {
         const item = formatVisit(v)
         if (!idx) {
           upcomingItems.push(item)
         }
-        const user = await User.findByPk(v.userId)
         addToUpcomingByDate(
           upcomingByDate,
-          formatVisit(v, user),
+          formatVisit(v, usersById[v.userId]),
           v.date,
           VisitType.Visit
         )
@@ -145,7 +152,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
           let checkmarks = []
 
           if (checklistLength) {
-            checkmarks = await EventCheckmark.findAll({
+            checkmarks = await fastify.db.EventCheckmark.findAll({
               where: {
                 userId: req.user.id,
                 eventId: application.eventId,
diff --git a/src/modules/news/client/components/NewsListPage.tsx b/src/modules/news/client/components/NewsListPage.tsx
index c1ee99a8..c8ba4fb5 100644
--- a/src/modules/news/client/components/NewsListPage.tsx
+++ b/src/modules/news/client/components/NewsListPage.tsx
@@ -32,45 +32,42 @@ export const NewsListPage = () => {
   }, [news, officeId, page])
 
   return (
-    <Background>
-      <Header />
-      <ComponentWrapper>
-        <BackButton />
-        <H1 className="my-10 text-center">News</H1>
-        <div>
-          {!!newsData &&
-            newsData.map((x, i) => (
-              <div
-                key={x.id}
-                onClick={() => stores.goTo('newsPage', { newsId: x.id })}
-                className={
-                  'flex flex-col gap-4 pl-4 pr-4 hover:bg-applied-hover hover:rounded-tiny cursor-pointer'
-                }
-              >
-                <div>
-                  <P textType="additional" className="text-text-tertiary mb-1">
-                    {dayjs(x.publishedAt).format('D MMM')}
-                  </P>
-                  <div className="mb-2">{x.title}</div>
-                </div>
-                {i + 1 === news?.length && news?.length <= pageSize ? (
-                  ''
-                ) : (
-                  <hr className="bg-applied-separator" />
-                )}
-              </div>
-            ))}
-          {!!news && news.length !== newsData.length ? (
-            <FButton
-              kind="link"
-              className="mt-4 ml-2"
-              onClick={() => setPage((p) => p + 1)}
+    <ComponentWrapper>
+      <BackButton />
+      <H1 className="my-10 text-center">News</H1>
+      <div>
+        {!!newsData &&
+          newsData.map((x, i) => (
+            <div
+              key={x.id}
+              onClick={() => stores.goTo('newsPage', { newsId: x.id })}
+              className={
+                'flex flex-col gap-4 pl-4 pr-4 hover:bg-applied-hover hover:rounded-tiny cursor-pointer'
+              }
             >
-              Show more
-            </FButton>
-          ) : null}
-        </div>
-      </ComponentWrapper>
-    </Background>
+              <div>
+                <P textType="additional" className="text-text-tertiary mb-1">
+                  {dayjs(x.publishedAt).format('D MMM')}
+                </P>
+                <div className="mb-2">{x.title}</div>
+              </div>
+              {i + 1 === news?.length && news?.length <= pageSize ? (
+                ''
+              ) : (
+                <hr className="bg-applied-separator" />
+              )}
+            </div>
+          ))}
+        {!!news && news.length !== newsData.length ? (
+          <FButton
+            kind="link"
+            className="mt-4 ml-2"
+            onClick={() => setPage((p) => p + 1)}
+          >
+            Show more
+          </FButton>
+        ) : null}
+      </div>
+    </ComponentWrapper>
   )
 }
diff --git a/src/modules/news/manifest.json b/src/modules/news/manifest.json
index 79a1a6e0..bc052349 100644
--- a/src/modules/news/manifest.json
+++ b/src/modules/news/manifest.json
@@ -17,7 +17,7 @@
       "newsList": {
         "path": "/news",
         "componentId": "NewsListPage",
-        "fullScreen": true
+        "fullScreen": false
       }
     },
     "admin": {
diff --git a/src/modules/office-visits/server/helpers/index.ts b/src/modules/office-visits/server/helpers/index.ts
index d3568fec..8fc4a3b7 100644
--- a/src/modules/office-visits/server/helpers/index.ts
+++ b/src/modules/office-visits/server/helpers/index.ts
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { DATE_FORMAT } from '#server/constants'
 import { RoomReservation } from '#modules/room-reservation/server/models'
-import { User, Visit, VisitType } from '#shared/types'
+import { ScheduledItemType, User, Visit, VisitType } from '#shared/types'
 import { appConfig } from '#server/app-config'
 
 export const BUSINESS_DAYS_LIMIT: number = 40
@@ -64,7 +64,10 @@ export const formatRoomReservationsResult = (
   }
 }
 
-export const formatVisit = (v: Visit, user?: User | null): any => {
+export const formatVisit = (
+  v: Visit,
+  user?: User | null
+): ScheduledItemType => {
   return {
     id: v.id,
     value: `Desk ${v.deskName}`,
diff --git a/src/server/app-config/schemas.ts b/src/server/app-config/schemas.ts
index 4294ba38..42bd3d30 100644
--- a/src/server/app-config/schemas.ts
+++ b/src/server/app-config/schemas.ts
@@ -8,7 +8,6 @@ const componentRef: z.ZodTypeAny = z.lazy(() =>
       z.string(),
       z.object({ offices: z.array(z.string()).optional() }),
     ]),
-    z.array(componentRef),
   ])
 )
 
@@ -21,7 +20,12 @@ export const layout = z.object({
   }),
   desktop: z.object({
     sidebar: z.array(componentRef),
-    main: z.array(z.array(componentRef)),
+    main: z.array(
+      z.union([
+        z.array(componentRef).length(1),
+        z.array(componentRef).length(2),
+      ])
+    ),
   }),
 })
 
@@ -89,18 +93,16 @@ export const officeRoom = z.object({
   autoConfirm: z.boolean(),
 })
 
-export const officeArea = z
-  .object({
-    id: z.string(),
-    available: z.boolean().default(true),
-    name: z.string(),
-    capacity: z.number().min(1),
-    map: z.string(),
-    bookable: z.boolean().default(false),
-    desks: z.array(officeAreaDesk).min(1),
-    meetingRooms: z.array(officeRoom).min(1).optional(),
-  })
-  .superRefine((office, ctx) => {})
+export const officeArea = z.object({
+  id: z.string(),
+  available: z.boolean().default(true),
+  name: z.string(),
+  capacity: z.number().min(1),
+  map: z.string(),
+  bookable: z.boolean().default(false),
+  desks: z.array(officeAreaDesk).min(1),
+  meetingRooms: z.array(officeRoom).min(1).optional(),
+})
 export const office = z
   .object({
     id: z.string(),

From 22e3e258e427303e27ef3129a877bf85d5907463 Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Fri, 1 Mar 2024 17:16:17 +1300
Subject: [PATCH 05/10] reverting changes on office-visits, moving
 ScheduledItem type to hub-map

---
 src/modules/hub-map/server/helpers/index.ts   |  2 +
 src/modules/hub-map/server/router.ts          |  2 +-
 src/modules/hub-map/types.ts                  | 14 +++++
 .../office-visits/server/helpers/index.ts     | 53 ----------------
 src/modules/office-visits/server/router.ts    | 62 ++++++++++++-------
 src/modules/office-visits/types.ts            | 15 -----
 6 files changed, 55 insertions(+), 93 deletions(-)

diff --git a/src/modules/hub-map/server/helpers/index.ts b/src/modules/hub-map/server/helpers/index.ts
index c1caaff3..14775deb 100644
--- a/src/modules/hub-map/server/helpers/index.ts
+++ b/src/modules/hub-map/server/helpers/index.ts
@@ -16,6 +16,8 @@ import { Filterable } from 'sequelize'
 
 export const getTime = (date: string | Date) => dayjs(date).format('LT')
 
+export const getDate = (d: string) => dayjs(d).format(DATE_FORMAT)
+
 export const formatRoomReservationsResult = (
   reservation: RoomReservation,
   officeId: string,
diff --git a/src/modules/hub-map/server/router.ts b/src/modules/hub-map/server/router.ts
index be45bc06..353931e0 100644
--- a/src/modules/hub-map/server/router.ts
+++ b/src/modules/hub-map/server/router.ts
@@ -13,10 +13,10 @@ import {
   formatEvent,
   formatRoomReservationsResult,
   formatVisit,
+  getDate,
   getRoomReservations,
   getVisits,
 } from './helpers'
-import { getDate } from '#modules/office-visits/server/helpers'
 import { Op } from 'sequelize'
 import { Event } from '#modules/events/server/models'
 import * as fp from '#shared/utils/fp'
diff --git a/src/modules/hub-map/types.ts b/src/modules/hub-map/types.ts
index e69de29b..9184d282 100644
--- a/src/modules/hub-map/types.ts
+++ b/src/modules/hub-map/types.ts
@@ -0,0 +1,14 @@
+import { User } from '#shared/types'
+
+export type ScheduledItemType = {
+  id: string
+  value: string
+  type: string
+  date: string
+  dateTime: string
+  description: string
+  areaId?: string
+  objectId?: string
+  user?: User
+  status: string
+}
diff --git a/src/modules/office-visits/server/helpers/index.ts b/src/modules/office-visits/server/helpers/index.ts
index 8fc4a3b7..9be5ae9d 100644
--- a/src/modules/office-visits/server/helpers/index.ts
+++ b/src/modules/office-visits/server/helpers/index.ts
@@ -1,8 +1,5 @@
 import dayjs from 'dayjs'
 import { DATE_FORMAT } from '#server/constants'
-import { RoomReservation } from '#modules/room-reservation/server/models'
-import { ScheduledItemType, User, Visit, VisitType } from '#shared/types'
-import { appConfig } from '#server/app-config'
 
 export const BUSINESS_DAYS_LIMIT: number = 40
 
@@ -37,53 +34,3 @@ export const getBusinessDaysFromDate = (
 
   return dates
 }
-
-export const formatRoomReservationsResult = (
-  reservation: RoomReservation,
-  officeId: string,
-  areaId: string
-): any => {
-  // @todo put this somewhere central
-  const office = appConfig.offices.find((o) => o.id === officeId)
-  const area = office?.areas?.find((a) => a.id === areaId)
-  const officeRoom = area?.meetingRooms?.find(
-    (m) => m.id === reservation.roomId
-  )
-  return {
-    id: reservation.id,
-    dateTime: `${getTime(reservation.startDate)} - ${getTime(
-      reservation.endDate
-    )}`,
-    objectId: reservation.roomId,
-    areaId,
-    date: dayjs(reservation.startDate).format('YYYY-MM-DD'),
-    value: 'Room ' + officeRoom?.name ?? '',
-    description: officeRoom?.description ?? '',
-    type: VisitType.RoomReservation,
-    status: reservation.status,
-  }
-}
-
-export const formatVisit = (
-  v: Visit,
-  user?: User | null
-): ScheduledItemType => {
-  return {
-    id: v.id,
-    value: `Desk ${v.deskName}`,
-    type: VisitType.Visit,
-    deskId: v.deskId,
-    objectId: v.deskId,
-    description: v.areaName,
-    areaId: v.areaId,
-    date: v.date,
-    status: v.status,
-    userId: v.userId,
-    user: user
-      ? {
-          id: user?.id,
-          avatar: user?.avatar,
-        }
-      : null,
-  }
-}
diff --git a/src/modules/office-visits/server/router.ts b/src/modules/office-visits/server/router.ts
index fc2fb377..125c5c75 100644
--- a/src/modules/office-visits/server/router.ts
+++ b/src/modules/office-visits/server/router.ts
@@ -6,8 +6,6 @@ import { Op } from 'sequelize'
 import { DATE_FORMAT } from '#server/constants'
 import {
   BUSINESS_DAYS_LIMIT,
-  formatRoomReservationsResult,
-  formatVisit,
   getBusinessDaysFromDate,
   getDate,
 } from './helpers'
@@ -16,23 +14,12 @@ import { Metadata } from '../metadata-schema'
 import { Visit, GenericVisit, VisitType, VisitsDailyStats } from '#shared/types'
 import * as fp from '#shared/utils'
 import { appConfig } from '#server/app-config'
+import { getRoom } from '#modules/room-reservation/shared-helpers'
 
 dayjs.extend(localizedFormat)
 
 const publicRouter: FastifyPluginCallback = async function (fastify, opts) {}
 
-const addToUpcomingByDate = (
-  upcomingByDate: Record<string, any>,
-  value: GenericVisit,
-  date: string,
-  type: string
-) => {
-  const dateKey = getDate(date)
-  upcomingByDate[dateKey] = upcomingByDate[dateKey] || {}
-  upcomingByDate[dateKey][type] = upcomingByDate[dateKey][type] || []
-  upcomingByDate[dateKey][type].push(value)
-}
-
 const userRouter: FastifyPluginCallback = async function (fastify, opts) {
   fastify.get(
     '/',
@@ -46,6 +33,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       if (!officeId) {
         return reply.throw.badParams('Missing office ID')
       }
+      const office = appConfig.getOfficeById(officeId)
       const nextBusinessDays = getBusinessDaysFromDate(
         date,
         BUSINESS_DAYS_LIMIT
@@ -54,6 +42,17 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       // or rewrite by merging all the tables into one
       let result: Record<string, any> = {}
 
+      const addToResult = (value: GenericVisit, date: string, type: string) => {
+        if (!result[getDate(date, office.timezone)]) {
+          result[getDate(date, office.timezone)] = {}
+        }
+        if (!result[getDate(date, office.timezone)][type]) {
+          result[getDate(date, office.timezone)][type] = [value]
+        } else {
+          result[getDate(date, office.timezone)][type].push(value)
+        }
+      }
+
       const visits = await fastify.db.Visit.findAll({
         where: {
           officeId: officeId,
@@ -105,14 +104,25 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
         },
       })
 
+      const getTime = (date: string | Date) =>
+        dayjs(date).tz(office.timezone).format('LT')
+
       // adding all the dates together
       visits.forEach((v) =>
-        addToUpcomingByDate(result, formatVisit(v), v.date, VisitType.Visit)
+        addToResult(
+          {
+            id: v.id,
+            value: `Desk ${v.deskName}`,
+            description: v.areaName,
+            type: VisitType.Visit,
+          },
+          v.date,
+          VisitType.Visit
+        )
       )
       guests.forEach((guest) => {
         guest.dates.forEach((date) =>
-          addToUpcomingByDate(
-            result,
+          addToResult(
             {
               value: guest.fullName,
               id: guest.id,
@@ -123,15 +133,19 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
           )
         )
       })
-      const office = appConfig.getOfficeById(officeId)
       roomReservations.forEach((reservation) => {
-        const area = office?.areas?.find((area) =>
-          area.meetingRooms?.find((room) => room.id === reservation.roomId)
-        )
+        let officeRoom = getRoom(office, reservation.roomId)
 
-        return addToUpcomingByDate(
-          result,
-          formatRoomReservationsResult(reservation, officeId, area?.id ?? ''),
+        return addToResult(
+          {
+            id: reservation.id,
+            dateTime: `${getTime(reservation.startDate)} - ${getTime(
+              reservation.endDate
+            )}`,
+            value: officeRoom?.name ?? '',
+            description: officeRoom?.description,
+            type: VisitType.RoomReservation,
+          },
           dayjs(reservation.startDate).toString(),
           VisitType.RoomReservation
         )
diff --git a/src/modules/office-visits/types.ts b/src/modules/office-visits/types.ts
index 9820c3f4..b12340bf 100644
--- a/src/modules/office-visits/types.ts
+++ b/src/modules/office-visits/types.ts
@@ -1,5 +1,3 @@
-import { User } from '#shared/types'
-
 export enum VisitType {
   Visit = 'visit',
   RoomReservation = 'room-reservation',
@@ -12,19 +10,6 @@ export const OfficeVisitsHeaders = {
   [VisitType.RoomReservation]: 'Meeting Room Bookings',
 } as const
 
-export type ScheduledItemType = {
-  id: string
-  value: string
-  type: string
-  date: string
-  dateTime: string
-  description: string
-  areaId?: string
-  objectId?: string
-  user?: User
-  status: string
-}
-
 export type GenericVisit = {
   id: string
   value: string

From 9114313392fa5cb39a40b0766690d63c73b6dfca Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Mon, 4 Mar 2024 12:35:24 +1300
Subject: [PATCH 06/10] removed margin from DeskPicker, rounded mobile border
 for actions, correct import for permissions

---
 src/client/components/Home.tsx                      | 2 +-
 src/modules/hub-map/client/components/HubMap.tsx    | 8 +++++++-
 src/modules/visits/client/components/DeskPicker.tsx | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/client/components/Home.tsx b/src/client/components/Home.tsx
index bd2a1b5f..d2c99ac7 100644
--- a/src/client/components/Home.tsx
+++ b/src/client/components/Home.tsx
@@ -98,7 +98,7 @@ const Tabs: React.FC<{
     []
   )
   return (
-    <div className="bg-bg-primary flex rounded-b-sm px-4 mb-1 md:mb-2">
+    <div className="bg-bg-primary flex rounded-sm px-4 mb-1 md:mb-2">
       {TABS.map((tab) => {
         const IconComponent = Icons[tab.icon as Icon]
         return (
diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
index 3463953a..2c62b13b 100644
--- a/src/modules/hub-map/client/components/HubMap.tsx
+++ b/src/modules/hub-map/client/components/HubMap.tsx
@@ -18,9 +18,15 @@ import { getPoints, goToMeetings, goToVisits } from '../helpers'
 import { VisitType } from '#shared/types'
 import { useUpcoming } from '../queries'
 import { PermissionsValidator } from '#client/components/PermissionsValidator'
+import Permissions from '#shared/permissions'
 
 export const HubMap = () => (
-  <PermissionsValidator required={['visits.create', 'room-reservation.create']}>
+  <PermissionsValidator
+    required={[
+      Permissions.visits.Create,
+      Permissions['room-reservation'].Create,
+    ]}
+  >
     <_HubMap />
   </PermissionsValidator>
 )
diff --git a/src/modules/visits/client/components/DeskPicker.tsx b/src/modules/visits/client/components/DeskPicker.tsx
index a91b472b..7d21e6d9 100644
--- a/src/modules/visits/client/components/DeskPicker.tsx
+++ b/src/modules/visits/client/components/DeskPicker.tsx
@@ -82,7 +82,7 @@ export const DeskPicker: React.FC<Props> = ({
   )
 
   return (
-    <WidgetWrapper>
+    <div>
       {unavailableDeskNames.length ? (
         <>
           <p className="mb-5">
@@ -158,6 +158,6 @@ export const DeskPicker: React.FC<Props> = ({
           />
         </div>
       )}
-    </WidgetWrapper>
+    </div>
   )
 }

From 52d63a406e0d4cd366fea1b13e24be862da76cd9 Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Mon, 4 Mar 2024 13:08:09 +1300
Subject: [PATCH 07/10] added colours for on-map booking points

---
 src/client/components/OfficeFloorMap.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx
index a5e81a81..eb11300f 100644
--- a/src/client/components/OfficeFloorMap.tsx
+++ b/src/client/components/OfficeFloorMap.tsx
@@ -33,7 +33,10 @@ const PointComponent: Record<
       disabled={!isAvailable}
       color={isSelected ? 'purple' : 'default'}
       className={cn(
-        isSelected ? 'border-pink-600 bg-accents-pink' : 'bg-gray-100',
+        isSelected
+          ? 'border-pink-600 bg-accents-pink'
+          : 'bg-violet-300 border-violet-300',
+        'hover:bg-cta-purple hover:border-cta-hover-purpleNoOpacity hover:text-white',
         'min-h-[32px] min-w-[32px]',
         pointCommonStyle
       )}
@@ -49,7 +52,8 @@ const PointComponent: Record<
       disabled={!isAvailable}
       className={cn(
         isSelected && 'border-pink-600 hover:text-white hover:bg-accents-pink',
-        'text-black bg-gray-100',
+        'text-black bg-green-200 border-green-200',
+        'hover:bg-cta-jade hover:border-cta-hover-jadeNoOpacity hover:text-white',
         'sm:p-4',
         pointCommonStyle
       )}

From 12451e104734b32ef061799609df964c7f2fe5e3 Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Mon, 4 Mar 2024 13:27:02 +1300
Subject: [PATCH 08/10] people in office are scrollable horizontally

---
 .../hub-map/client/components/HubMap.tsx      | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
index 2c62b13b..2119bf2b 100644
--- a/src/modules/hub-map/client/components/HubMap.tsx
+++ b/src/modules/hub-map/client/components/HubMap.tsx
@@ -165,30 +165,34 @@ export const _HubMap = () => {
                 />
               </div>
             </div>
-            <div className="flex flex-row gap-3 sm:gap-2 overflow-hidden mt-6 sm:mt-2 items-center flex-wrap">
-              {!!visitors?.length &&
-                visitors.map((v) => {
-                  return (
-                    <button
-                      key={v.userId}
-                      className="hover:opacity-80 transition-all delay-100"
-                      onClick={() => {
-                        setSelectedDailyEvent(v.deskId)
-                        setAreaId(v.areaId)
-                        resetOfficeVisits()
-                      }}
-                    >
-                      <Avatar size="medium" src={v.avatar} userId={v.userId} />
-                    </button>
-                  )
-                })}
-              <div className="text-text-tertiary mb-4 sm:mb-0">
-                {userIsInOffce
-                  ? `You and ${visitorsNumber - 1}`
-                  : visitorsNumber}{' '}
-                people in the {office?.name} hub
+            <div className="flex flex-col sm:flex-row gap-3 sm:gap-2 mt-6 sm:mt-2 items-start sm:items-center overflow-x-auto">
+              <div className="flex flex-nowrap gap-4 overflow-x-auto">
+                {!!visitors?.length &&
+                  visitors.map((v) => {
+                    return (
+                      <button
+                        key={v.userId}
+                        className="hover:opacity-80 transition-all delay-100 w-8 h-8 shrink-0"
+                        onClick={() => {
+                          setSelectedDailyEvent(v.deskId)
+                          setAreaId(v.areaId)
+                          resetOfficeVisits()
+                        }}
+                      >
+                        <Avatar
+                          size="medium"
+                          src={v.avatar}
+                          userId={v.userId}
+                        />
+                      </button>
+                    )
+                  })}
               </div>
             </div>
+            <div className="mt-2 text-text-tertiary mb-4 sm:mb-0">
+              {userIsInOffce ? `You and ${visitorsNumber - 1}` : visitorsNumber}{' '}
+              people in the {office?.name} hub
+            </div>
             <Select
               label=""
               options={areas.map((x) => ({

From 15764af11e66a6ed5457717dd76406b844f1954c Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Mon, 4 Mar 2024 13:32:19 +1300
Subject: [PATCH 09/10] hover change for meeting rooms on map

---
 src/client/components/OfficeFloorMap.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx
index eb11300f..4f6827f5 100644
--- a/src/client/components/OfficeFloorMap.tsx
+++ b/src/client/components/OfficeFloorMap.tsx
@@ -51,9 +51,9 @@ const PointComponent: Record<
       kind={isSelected ? 'primary' : 'secondary'}
       disabled={!isAvailable}
       className={cn(
-        isSelected && 'border-pink-600 hover:text-white hover:bg-accents-pink',
-        'text-black bg-green-200 border-green-200',
-        'hover:bg-cta-jade hover:border-cta-hover-jadeNoOpacity hover:text-white',
+        isSelected
+          ? 'border-pink-600 hover:text-white bg-accents-pink hover:bg-accents-pinkDark'
+          : 'text-black bg-green-200 border-green-200 hover:bg-cta-jade hover:border-cta-hover-jadeNoOpacity hover:text-white',
         'sm:p-4',
         pointCommonStyle
       )}

From 07364326a6c99ebe398299271eca738e6bcc7acc Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Mon, 4 Mar 2024 14:09:43 +1300
Subject: [PATCH 10/10] stealth mode

---
 src/client/components/OfficeFloorMap.tsx      |  8 +++---
 .../hub-map/client/components/HubMap.tsx      | 26 +++++++++++++++++--
 src/modules/hub-map/server/router.ts          |  2 +-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx
index 4f6827f5..2a49368f 100644
--- a/src/client/components/OfficeFloorMap.tsx
+++ b/src/client/components/OfficeFloorMap.tsx
@@ -33,12 +33,14 @@ const PointComponent: Record<
       disabled={!isAvailable}
       color={isSelected ? 'purple' : 'default'}
       className={cn(
+        pointCommonStyle,
         isSelected
           ? 'border-pink-600 bg-accents-pink'
           : 'bg-violet-300 border-violet-300',
-        'hover:bg-cta-purple hover:border-cta-hover-purpleNoOpacity hover:text-white',
-        'min-h-[32px] min-w-[32px]',
-        pointCommonStyle
+        isAvailable
+          ? 'hover:bg-cta-purple hover:border-cta-hover-purpleNoOpacity hover:text-white'
+          : 'hover:scale-100 hover:bg-violet-300',
+        'min-h-[32px] min-w-[32px]'
       )}
       onClick={onClick(item.id, VisitType.Visit)}
     >
diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
index 2119bf2b..20cfc42e 100644
--- a/src/modules/hub-map/client/components/HubMap.tsx
+++ b/src/modules/hub-map/client/components/HubMap.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react'
-import { Avatar, Input, Select, WidgetWrapper } from '#client/components/ui'
+import {
+  Avatar,
+  Input,
+  Select,
+  StealthMode,
+  WidgetWrapper,
+} from '#client/components/ui'
 import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { useOffice } from '#client/utils/hooks'
@@ -11,6 +17,7 @@ import { ScheduledItemsList } from './ScheduledItemsList'
 import {
   useAvailableDesks,
   useOfficeVisitors,
+  useToggleStealthMode,
   useVisitsAreas,
 } from '#modules/visits/client/queries'
 import { propEq } from '#shared/utils'
@@ -51,6 +58,14 @@ export const _HubMap = () => {
     dayjs().toString()
   )
 
+  const { mutate: toggleStealthMode } = useToggleStealthMode(() => {
+    refetchVisits()
+    refetchVisitors()
+  })
+  const onToggleStealthMode = React.useCallback((value: boolean) => {
+    toggleStealthMode({ stealthMode: value })
+  }, [])
+
   React.useEffect(() => {
     setOfficeVisits(upcomingVisitsAll?.byDate[date.format(DATE_FORMAT)])
   }, [upcomingVisitsAll?.byDate, date])
@@ -74,7 +89,7 @@ export const _HubMap = () => {
     []
   )
 
-  const { data: visitors } = useOfficeVisitors(
+  const { data: visitors, refetch: refetchVisitors } = useOfficeVisitors(
     officeId,
     dayjs(date).format(DATE_FORMAT)
   )
@@ -226,6 +241,13 @@ export const _HubMap = () => {
                 }}
               />
             </div>
+            <div className="mt-10">
+              <StealthMode
+                originalValue={me?.stealthMode || false}
+                onToggle={onToggleStealthMode}
+                subtitle="Do not show me on this map"
+              />
+            </div>
           </div>
         )}
       </div>
diff --git a/src/modules/hub-map/server/router.ts b/src/modules/hub-map/server/router.ts
index 353931e0..3349fad7 100644
--- a/src/modules/hub-map/server/router.ts
+++ b/src/modules/hub-map/server/router.ts
@@ -93,7 +93,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       let dailyEventsVisits = []
       const userIds = Array.from(new Set(visits.map(fp.prop('userId'))))
       const users = await fastify.db.User.findAll({
-        where: { id: { [Op.in]: userIds } },
+        where: { id: { [Op.in]: userIds }, stealthMode: false },
         raw: true,
       })
       const usersById = users.reduce(fp.by('id'), {})