From 967660caf3e8f2423295e97d4cf544f727d1aa87 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Mon, 2 Jun 2025 17:15:46 +0500
Subject: [PATCH] links to unit pages from floors plan

---
 .env                                          |   4 +-
 src/components/FloorPlanDubaiMarina.tsx       |   8 +-
 src/components/FloorPlanMarasiDriveEast.tsx   |  20 +++
 .../FloorPlanMarasiDriveWestLower.tsx         |  20 +++
 .../FloorPlanMarasiDriveWestUpper.tsx         |  18 +++
 src/components/UnitCard.tsx                   |   6 +-
 src/components/ui/Select.tsx                  |   2 +-
 src/pages/FloorsPage.tsx                      | 116 ++++++++++++++++--
 src/pages/UnitPage.tsx                        |  68 ++++++++--
 src/utils/complexNameToSlug.ts                |   7 ++
 src/utils/slugToComplexName.ts                |   6 +
 11 files changed, 243 insertions(+), 32 deletions(-)
 create mode 100644 src/utils/complexNameToSlug.ts
 create mode 100644 src/utils/slugToComplexName.ts

diff --git a/.env b/.env
index 47b1f29..0b988dc 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-# VITE_API_URL=http://localhost:4002
-VITE_API_URL=http://194.26.138.94:4002
\ No newline at end of file
+VITE_API_URL=http://localhost:4002
+# VITE_API_URL=http://194.26.138.94:4002
\ No newline at end of file
diff --git a/src/components/FloorPlanDubaiMarina.tsx b/src/components/FloorPlanDubaiMarina.tsx
index 8d68a6b..112d738 100644
--- a/src/components/FloorPlanDubaiMarina.tsx
+++ b/src/components/FloorPlanDubaiMarina.tsx
@@ -28,7 +28,13 @@ function FloorPlanDubaiMarina({
           data-name={mask.id}
           className="fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors"
           onClick={() => {
-            console.log(mask.text.unitNumber);
+            window.open(
+              `/complex/dubai-marina/${selectedFloor}${mask.text.unitNumber.padStart(
+                2,
+                "0"
+              )}`,
+              "_blank"
+            );
           }}
         >
           <path d={mask.path} />
diff --git a/src/components/FloorPlanMarasiDriveEast.tsx b/src/components/FloorPlanMarasiDriveEast.tsx
index 894dd63..664c34f 100644
--- a/src/components/FloorPlanMarasiDriveEast.tsx
+++ b/src/components/FloorPlanMarasiDriveEast.tsx
@@ -7,6 +7,10 @@ interface FloorPlanMarasiDriveEastProps {
 function FloorPlanMarasiDriveEast({
   selectedFloor,
 }: FloorPlanMarasiDriveEastProps & React.SVGProps<SVGSVGElement>) {
+  function handleClick(unitNumber: string) {
+    window.open(`/complex/marasi-drive/${unitNumber}`, "_blank");
+  }
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -1164,6 +1168,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}16`)}
             data-number={16}
             data-type="1br-type-c"
             d="M474.57,66.81c.12.12,2.82-2.72,4.16-4.16l-47.12-47.12-3.51,3.51-15.49-15.49-36.67,36.67,15.49,15.49-2.36,2.36,34.26,34.26-1.1,1.1,10.16,10.16,21.28-21.28,5.6,5.6,1.66-1.66,7.72-7.72c.08.08,5.91-5.85,8.82-8.82l-2.9-2.9Z"
@@ -1188,6 +1193,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}15`)}
             data-number={15}
             data-type="1br-type-c"
             d="M415.38,131.84l-1.85,1.85-7.69,7.69-8.75,8.75-2.92-2.92-4.06,4.06-47.12-47.12,3.55-3.56-15.49-15.49,36.48-36.49,15.49,15.49,2.58-2.58,34.26,34.26,1.1-1.1,10.16,10.16-21.36,21.36,5.61,5.61Z"
@@ -1212,6 +1218,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}14`)}
             data-number={14}
             data-type="studio-2"
             d="M321.78,225.44l-1.45,1.45-7.76,7.76-9,9-4.56-4.56-4.63,4.64-45.43-45.43-15.52-15.52,22.49-22.49,15.52,15.52,3.45-3.45,47.08,47.08-3.1,3.1,2.91,2.91Z"
@@ -1236,6 +1243,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}13`)}
             data-number={13}
             data-type="studio-2"
             d="M292.55,254.67l-8.94,8.94-7.77,7.77-1.38,1.38-2.91-2.91-3.07,3.07-47.08-47.08,3.45-3.45-15.52-15.52,22.67-22.67,15.52,15.52,45.43,45.43-4.95,4.96,4.56,4.56Z"
@@ -1260,6 +1268,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}12`)}
             data-number={12}
             data-type="studio-2"
             d="M266.85,280.36l-1.47,1.47-7.54,7.54-9.17,9.17-4.62-4.62-5.9,5.9-11.15-11.15.88-.88-34.22-34.22-.88.88-15.52-15.52,23.6-23.6,15.52,15.52,3.55-3.55,47.08,47.08-3.06,3.06,2.91,2.91Z"
@@ -1284,6 +1293,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}11`)}
             data-number={11}
             data-type="studio-2"
             d="M235.49,311.73l-9.17,9.17-7.67,7.67-1.35,1.35-2.91-2.91-3.09,3.09-47.09-47.09,3.37-3.37-15.52-15.52,23.73-23.73,15.55,15.5-1.05,1.05,34.22,34.22,1.05-1.05,11.15,11.15-5.84,5.84,4.62,4.62Z"
@@ -1308,6 +1318,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}10`)}
             data-number={10}
             data-type="1br-type-c"
             d="M208.62,338.6l-8.72,8.72-7.68,7.68-1.9,1.9-5.63-5.63-21.2,21.2-15.4-15.4,1.2-1.2-28.96-28.96,2.34-2.34-15.11-15.11,36.08-36.9,15.52,15.52,3.65-3.65,47.09,47.09-4.18,4.18,2.91,2.91Z"
@@ -1332,6 +1343,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}09`)}
             data-number={9}
             data-type="1br-type-b"
             d="M116.69,430.53l-7.3,7.3-7.69,7.69-18.05,18.05-2.57-2.57-6.8,6.8-11.42-11.42-1.95,1.95-3.17-3.17-4.37,4.37L0,416.28l51.9-51.9,19.55,19.55,3.23-3.23,43.01,43.01-3.92,3.91,2.91,2.91Z"
@@ -1356,6 +1368,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}08`)}
             data-number={8}
             data-type="1br-type-b"
             d="M131.89,445.71l-7.35,7.35-7.66,7.66-18.05,18.05,2.49,2.49-6.78,6.78,11.47,11.47-1.52,1.52,3.36,3.36-4.88,4.88,43.05,53.14,51.96-51.96-19.57-19.57-.27-.27,3.31-3.31-29.8-29.8,1.16-1.16-12.96-12.96-5.14,5.14-2.82-2.82Z"
@@ -1380,6 +1393,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}07`)}
             data-number={7}
             data-type="1br-type-c"
             d="M161.65,415.95l-1.68,1.68-7.63,7.63-8.78,8.78,2.82,2.82-5.12,5.12,12.96,12.96.91-.91,34.31,34.31,3.43-3.43,15.33,15.33,36.7-36.7-15.33-15.32,2.41-2.41-34.31-34.31,1.13-1.13-10.21-10.21-21.37,21.37-5.56-5.56Z"
@@ -1405,6 +1419,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}06`)}
             data-number={6}
             data-type="1br-type-c"
             d="M223.81,353.83l-8.71,8.71-7.64,7.64-1.76,1.75,5.56,5.56-21.42,21.42,10.21,10.21,1.24-1.24,34.31,34.31,2.38-2.33,15.3,15.3,36.59-36.59-15.33-15.33,3.53-3.53-47.31-47.31-4.18,4.18-2.78-2.78Z"
@@ -1429,6 +1444,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}05`)}
             data-number={5}
             data-type="studio-2"
             d="M250.61,326.99l-9.11,9.11-7.63,7.62-1.41,1.41,2.78,2.78-3.03,3.02,47.31,47.31,3.32-3.32,15.33,15.33,23.7-23.7-15.33-15.33-1.02,1.02-34.32-34.32,1.1-1.1-11.13-11.13-5.93,5.93-4.64-4.64Z"
@@ -1453,6 +1469,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}04`)}
             data-number={4}
             data-type="studio-2"
             d="M282.06,295.54l-1.44,1.44-7.66,7.66-8.99,8.99,4.64,4.64-6.05,6.05,11.13,11.13.93-.93,34.32,34.32-.94.94,15.33,15.33,23.68-23.68-15.33-15.33,3.54-3.54-47.32-47.32-3.07,3.07-2.77-2.77Z"
@@ -1477,6 +1494,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}03`)}
             data-number={3}
             data-type="1br-type-d"
             d="M310.29,267.31l-1.78,1.78-7.78,7.78-10.03,10.03,2.77,2.77-4.11,4.12,45.49,45.49,8.38-8.38,17.15,17.15,32.49-32.49-17.15-17.15,7.45-7.45-26.1-26.1-3.68,3.68-10.91-10.91-20.95,20.95-11.26-11.26Z"
@@ -1501,6 +1519,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}02`)}
             data-number={2}
             data-type="studio-2"
             d="M414.41,263.32l15.35,15.35-22.48,22.48-15.35-15.35-3.7,3.7-34.29-34.29-.86.86-12.93-12.93,4.14-4.14-2.85-2.84,1.41-1.41,7.61-7.61,9.14-9.14,4.65,4.65,4.73-4.73,45.42,45.42Z"
@@ -1525,6 +1544,7 @@ function FloorPlanMarasiDriveEast({
             </tspan>
           </text>
           <path
+            onClick={() => handleClick(`E-${selectedFloor}01`)}
             data-number={1}
             data-type="2br-type-a"
             d="M483.21,195.47l9.32-.1.04,50.46-11.7-.37-.08,18.74-22.25.21c-9.39.09-18.38,3.86-25.02,10.5l-2.35,2.36-58.78-58.78,2.19-2.19-1.99-1.99,16.28-16.28-4.55-4.55,9.75-9.75,4.88,4.89h84.13s.14,6.83.14,6.83Z"
diff --git a/src/components/FloorPlanMarasiDriveWestLower.tsx b/src/components/FloorPlanMarasiDriveWestLower.tsx
index 485e28a..41d7ace 100644
--- a/src/components/FloorPlanMarasiDriveWestLower.tsx
+++ b/src/components/FloorPlanMarasiDriveWestLower.tsx
@@ -7,6 +7,9 @@ interface FloorPlanMarasiDriveEastProps {
 function FloorPlanMarasiDriveEast({
   selectedFloor,
 }: FloorPlanMarasiDriveEastProps & React.SVGProps<SVGSVGElement>) {
+  function handleClick(unitNumber: string) {
+    window.open(`/complex/marasi-drive/${unitNumber}`, "_blank");
+  }
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 619.96 585.99">
       <g>
@@ -1200,6 +1203,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}17`)}
           data-number={17}
           data-type="2br-type-b"
           d="M169.41,2.98l33.1,33.11.67,1,32.88,32.88-14.03,14.03,3.29,3.29-43.59,43.59-3.84-3.84-2.69,2.69-10.9-10.9-9.67,9.67-46.6-46.6,2.99-2.99-13.72-13.72,20.87-20.87.65-.66L159.51,2.98c2.73-2.73,7.17-2.73,9.9,0Z"
@@ -1222,6 +1226,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}16`)}
           data-number={16}
           data-type="1br-type-c"
           d="M200.89,155.43l-1.67-1.67-7.02-7.15-8.01-8.01,2.63-2.63-3.88-3.89,43.59-43.59,3.26,3.26,14.06-14.06,33.69,33.69-14.06,14.06,2.22,2.23-25.32,25.32.97.97-15.69,15.69-19.49-19.49-5.28,5.28Z"
@@ -1244,6 +1249,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}15`)}
           data-number={15}
           data-type="1br-type-c"
           d="M264.5,213.65l43.59-43.59-3.15-3.15,14.06-14.06-33.83-33.83-14.06,14.06-2.31-2.31-25.32,25.32-.88-.88-15.69,15.69,19.63,19.63-5.28,5.28,1.61,1.61,7.13,7.13,7.89,7.88,2.7-2.69,3.91,3.91Z"
@@ -1266,6 +1272,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}14`)}
           data-number={14}
           data-type="studio-flex"
           d="M327.42,281.91l1.18,1.17,6.96,7.01,8.35,8.35,4.17-4.17,2.83,2.84,39.15-39.15,13.53-13.53-19.01-19.01-13.53,13.53-3.16-3.16-40.62,40.62,2.82,2.82-2.68,2.68Z"
@@ -1288,6 +1295,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}13`)}
           data-number={13}
           data-type="studio-flex"
           d="M424.28,265.11l-13.53,13.53,3.16,3.16-40.6,40.6-2.85-2.85-2.72,2.72-1.26-1.26-7.16-7.16-8.52-8.52,4.17-4.17-2.77-2.77,39.15-39.15,13.53-13.53,19.39,19.39Z"
@@ -1310,6 +1318,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}12`)}
           data-number={12}
           data-type="studio-flex"
           d="M452.09,292.93l-13.58,13.47-.72-.72-25.23,25.23.83.83-13.92,13.92-2.85-2.85-4.17,4.17-9.42-9.42-7.11-7.11-1.24-1.23,2.72-2.72-2.91-2.91,40.6-40.6,3.13,3.13,13.53-13.53,20.34,20.34Z"
@@ -1332,6 +1341,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}11`)}
           data-number={11}
           data-type="studio-flex"
           d="M473.6,314.43l-13.53,13.53,3.19,3.19-40.6,40.6-2.83-2.83-2.72,2.72-1.45-1.45-6.87-6.87-9.47-9.46,4.17-4.17-2.82-2.82,13.92-13.92.98.98,25.23-25.23-1-1,13.53-13.53,20.27,20.27Z"
@@ -1354,6 +1364,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}10`)}
           data-number={10}
           data-type="studio-flex"
           d="M500.52,341.36l-13.53,13.53-39.15,39.15-3.07-3.07-4.17,4.17-8.29-8.29-7.13-7.13-1.27-1.27,2.72-2.72-2.71-2.71,40.6-40.6,3.22,3.22,13.44-13.61,19.34,19.34Z"
@@ -1376,6 +1387,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}09`)}
           data-number={9}
           data-type="studio-flex"
           d="M470.14,419.23l40.6-40.6-3.18-3.18,13.53-13.53-19.47-19.47-13.61,13.44-39.15,39.15,3.04,3.04-4.17,4.17,8.43,8.43,7.07,7.07,1.35,1.35,2.72-2.72,2.84,2.84Z"
@@ -1398,6 +1410,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}08`)}
           data-number={8}
           data-type="1br-type-a"
           d="M500.78,455.79l16.51-5.61,1.39,4.2,35.35-11.92,7.77,22.96,1.28-.38,1.24,3.65,3.61-1.22c1.76-.59,3.67.35,4.28,2.11l9.99,28.94c.65,1.89-.47,3.94-2.42,4.4l-54.82,12.98c-1.69.4-3.42-.55-3.98-2.19l-2.17-6.31-9.95,3.41-11.22-33.56-1.47.43-6.36-17.98,1.8-.63,9.17-3.26Z"
@@ -1420,6 +1433,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}07`)}
           data-number={7}
           data-type="1br-type-a"
           d="M486.5,460.74l1.79-.56,6.3,17.99-1.27.39,11.45,33.8-10.01,3.49c0,.15.92,2.97,2.01,6.22.55,1.63-.21,3.42-1.77,4.16l-50.88,24.06c-1.82.86-3.98-.04-4.64-1.94l-10.31-29.31c-.62-1.78.32-3.72,2.1-4.33l3.91-1.33-1.26-3.6,1.29-.44-8.1-23.26,35.14-12.1-1.4-4.43,16.15-5.52,9.52-3.29Z"
@@ -1442,6 +1456,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}06`)}
           data-number={6}
           data-type="1br-type-d"
           d="M430.61,412.89l-1.57-1.56-7.08-7.08-9.33-9.33-2.56,2.56-3.86-3.86-42.07,42.07,7.64,7.64-15.69,15.69,30.49,30.49,15.69-15.69,6.63,6.63,24.46-24.46-3.18-3.18,9.93-9.93-19.74-19.74,10.23-10.23Z"
@@ -1464,6 +1479,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}05`)}
           data-number={5}
           data-type="studio-2"
           d="M404.68,386.96l-1.16-1.16-7.09-7.09-8.35-8.35-4.15,4.15-5.41-5.42-10.33,10.33.99.99-31.72,31.72-.99-.99-14.13,14.13,21.71,21.71,14.13-14.13,3.23,3.23,43.64-43.64-2.93-2.93,2.56-2.56Z"
@@ -1486,6 +1502,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}04`)}
           data-number={4}
           data-type="studio-2"
           d="M376.01,358.29l-8.41-8.41-7.05-7.05-1.36-1.36-2.56,2.56-2.75-2.75-43.64,43.64,3.14,3.14-14.13,14.13,21.82,21.82,14.13-14.13-.87-.87,31.72-31.72.85.85,10.33-10.33-5.37-5.37,4.15-4.15Z"
@@ -1508,6 +1525,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}03`)}
           data-number={3}
           data-type="1br-type-d"
           d="M351.18,333.52l-9.25-9.25-7.07-7.07-1.77-1.77-10.17,10.17-19.33-19.33-9.92,9.92-3.17-3.17-24.45,24.45,6.83,6.83-15.75,15.75,30.05,30.05,15.75-15.75,7.58,7.59,42.01-42.01-3.87-3.87,2.53-2.53Z"
@@ -1530,6 +1548,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}02`)}
           data-number={2}
           data-type="studio-2"
           d="M304.47,286.8l-1.14-1.14-7.04-7.04-8.46-8.46-4.12,4.12-4.36-4.36-42.07,42.07-14.11,14.11,20.7,20.7,14.11-14.11,3.22,3.22,31.77-31.77.92.92,11.88-11.88-3.83-3.83,2.53-2.53Z"
@@ -1552,6 +1571,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}01`)}
           data-number={1}
           data-type="2br-type-a"
           d="M264.39,246.73l1.02,1.02-4.12,4.12,14.85,14.85-1.91,1.91,1.9,1.9-36.21,36.21-18.05,18.05-1.97-1.97c-6.35-6.35-14.97-9.92-23.95-9.92h-19.67l.03-17.38-10.88-.03v-46.12h8.58v-6.29h77.87l4.43-4.43.95.94,7.13,7.13Z"
diff --git a/src/components/FloorPlanMarasiDriveWestUpper.tsx b/src/components/FloorPlanMarasiDriveWestUpper.tsx
index faeaac3..844b507 100644
--- a/src/components/FloorPlanMarasiDriveWestUpper.tsx
+++ b/src/components/FloorPlanMarasiDriveWestUpper.tsx
@@ -7,6 +7,9 @@ interface FloorPlanMarasiDriveEastProps {
 function FloorPlanMarasiDriveEast({
   selectedFloor,
 }: FloorPlanMarasiDriveEastProps & React.SVGProps<SVGSVGElement>) {
+  function handleClick(unitNumber: string) {
+    window.open(`/complex/marasi-drive/${unitNumber}`);
+  }
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 619.96 586.04">
       <g>
@@ -1179,6 +1182,7 @@ function FloorPlanMarasiDriveEast({
         </text>
         <path
           data-number={15}
+          onClick={() => handleClick(`W-${selectedFloor}15`)}
           data-type="2br-type-b"
           d="M222.75,83.92l13.84-13.84-33.29-33.29c-.12-.18-.39-.56-.45-.61L169.58,2.91c-2.73-2.73-7.17-2.73-9.9,0l-40.71,40.71-.69.69-21.08,21.09,13.65,13.65.21.21-2.89,2.89,46.6,46.6,9.79-9.79,11.02,11.02,2.57-2.57,3.84,3.84,43.69-43.69-3.28-3.28.35-.35Z"
           className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
@@ -1200,6 +1204,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}14`)}
           data-number={14}
           data-type="1br-type-c"
           d="M240.46,153.11l25.4-25.4-2.22-2.22,14.18-14.17-33.59-33.59-14.17,14.17-3.25-3.25-43.69,43.69,3.89,3.89-2.57,2.58,8.06,8.06,7.1,7.1,1.5,1.5,5.17-5.17,19.54,19.54,15.69-15.69-1.03-1.03Z"
@@ -1222,6 +1227,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}13`)}
           data-number={13}
           data-type="1br-type-c"
           d="M260.81,210.14l3.89,3.89,43.73-43.73-3.36-3.36,14.18-14.18-33.66-33.66-14.18,14.18-2.24-2.24-25.4,25.4-.98-.98-15.69,15.69,19.65,19.66-5.17,5.17,1.53,1.54,7.24,7.24,7.91,7.91,2.54-2.54Z"
@@ -1244,6 +1250,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}12`)}
           data-number={12}
           data-type="1br-type-d"
           d="M365.82,320.22l-9.26-9.26-7.07-7.07-1.72-1.72,10.25-10.25-19.53-19.53,10.08-10.08-3.13-3.13,24.46-24.46,3.16,3.16,12.16-12.16,38.3,38.3-12.16,12.16,3.13,3.13-42.25,42.25-3.88-3.88-2.54,2.54Z"
@@ -1266,6 +1273,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}11`)}
           data-number={11}
           data-type="studio-2"
           d="M376.48,325.78l-3.03-3.03,43.79-43.8,3.3,3.3,14.1-14.1,22.12,22.12-14.1,14.1-2.69,2.7-1.14-1.14-25.55,25.55,1.12,1.12-13.88,13.88-5.58-5.58-4.21,4.21-8.75-8.75-6.72-6.72-1.33-1.33,2.54-2.54Z"
@@ -1288,6 +1296,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}10`)}
           data-number={10}
           data-type="studio-2"
           d="M419.72,374.11l-1.39-1.39-6.73-6.73-8.63-8.63,4.21-4.21-5.51-5.51,13.88-13.88,1.02,1.02,25.55-25.55-1.01-1.01,2.69-2.69,14.1-14.1,21.79,21.79-14.1,14.1,3.14,3.14-43.76,43.76-2.67-2.67-2.57,2.57Z"
@@ -1310,6 +1319,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}09`)}
           data-number={9}
           data-type="1br-type-d"
           d="M511.97,378.73l.92-.92-2.98-2.98,12.22-12.22-38.3-38.3-12.22,12.22-3.19-3.19-42.16,42.16,3.9,3.9-2.57,2.57,9.43,9.43,6.9,6.9h0s1.69,1.68,1.69,1.68l10.29-10.29,19.42,19.42,10.09-10.09,3.13,3.13,23.43-23.43Z"
@@ -1332,6 +1342,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}08`)}
           data-number={8}
           data-type="1br-type-a"
           d="M518.29,451l-27.67,9.51,6.34,17.89,1.46-.42,11.67,34.18,10.32-3.68,1.85,6.1c.52,1.71,2.28,2.73,4.02,2.32l55.19-12.9c1.96-.46,3.09-2.51,2.43-4.42l-10.11-29.13c-.6-1.74-2.49-2.68-4.24-2.12l-4.15,1.33-1.33-3.56-1.14.43-8.12-23.31-35.19,12.02-1.32-4.26Z"
@@ -1354,6 +1365,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}07`)}
           data-number={7}
           data-type="1br-type-a"
           d="M461.65,470.47l1.31,4.54-35.04,12.13,7.97,23.33-1.3.43,1.22,3.71-3.73,1.17c-1.82.57-2.81,2.54-2.19,4.34l10.11,29.25c.66,1.9,2.82,2.82,4.64,1.97l51.46-23.96c1.57-.73,2.34-2.52,1.78-4.16l-2-5.93,10.04-3.56-11.78-34.3,1.19-.41-6.14-18.02-27.53,9.46Z"
@@ -1376,6 +1388,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}06`)}
           data-number={6}
           data-type="1br-type-d"
           d="M413.66,395.92l9.27,9.27,7.05,7.05,1.75,1.75-10.26,10.26,19.35,19.35-10.14,10.14,3.16,3.16-24.37,24.37-6.56-6.55-15.79,15.79-30.15-30.15,15.79-15.79-7.74-7.75,42.12-42.12,3.88,3.88,2.66-2.66Z"
@@ -1398,6 +1411,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}05`)}
           data-number={5}
           data-type="studio-2"
           d="M389.02,371.28l8.29,8.29,7.16,7.16,1.29,1.28-2.66,2.66,2.74,2.74-43.83,43.83-3.08-3.07-14.08,14.09-21.98-21.98,14.08-14.09,1.06,1.06,31.99-31.98-1.06-1.06,10.42-10.42,5.58,5.58,4.08-4.08Z"
@@ -1420,6 +1434,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}04`)}
           data-number={4}
           data-type="studio-2"
           d="M357.37,345.08l-3.16-3.16-43.76,43.76,3.26,3.26-14.09,14.09,22.17,22.17,14.09-14.09-1.14-1.14,31.98-31.99,1.11,1.1,10.42-10.42-5.47-5.47,4.08-4.08-8.5-8.5-7.05-7.05-1.21-1.21-2.73,2.73Z"
@@ -1442,6 +1457,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}03`)}
           data-number={3}
           data-type="1br-type-d"
           d="M333.82,316.09l1.65,1.65,7.18,7.18,9.19,9.19-2.73,2.73,3.93,3.93-42.04,42.04-7.69-7.69-15.68,15.68-30.28-30.29,15.68-15.68-6.64-6.64,24.39-24.39,3.12,3.12,10.05-10.05,19.54,19.54,10.32-10.33Z"
@@ -1464,6 +1480,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}02`)}
           data-number={2}
           data-type="studio-2"
           d="M244.15,347.32l-20.93-20.93,13.95-13.95,42.36-42.36,4.44,4.44,4.18-4.18,8.51,8.51,7.16,7.16,1.2,1.2-2.67,2.67,3.84,3.84-11.86,11.86-.98-.98-32.02,32.02-3.24-3.24-13.95,13.95Z"
@@ -1486,6 +1503,7 @@ function FloorPlanMarasiDriveEast({
           </tspan>
         </text>
         <path
+          onClick={() => handleClick(`W-${selectedFloor}01`)}
           data-number={1}
           data-type="2br-type-a"
           d="M256.62,238.83l-4.55,4.56-77.95.04.08,6.33-8.57.23-.21,46.2,10.98-.02-.12,17.36,19.04-.1c9.51-.05,18.65,3.71,25.38,10.43l1.21,1.21,54.24-54.24-1.98-1.98,2.06-2.06-14.74-14.74,4.18-4.18-9.04-9.04Z"
diff --git a/src/components/UnitCard.tsx b/src/components/UnitCard.tsx
index 6b1ebe1..c1195f9 100644
--- a/src/components/UnitCard.tsx
+++ b/src/components/UnitCard.tsx
@@ -7,7 +7,7 @@ import "react-loading-skeleton/dist/skeleton.css";
 import Skeleton from "react-loading-skeleton";
 import { formattedUnitTypes } from "../data/formattedUnitTypes";
 import { Link } from "react-router";
-import { complexNamesSlugs } from "../data/complexNamesSlugs";
+import complexNameToSlug from "../utils/complexNameToSlug";
 
 function UnitCard({ unit }: { unit: IUnit }) {
   const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
@@ -25,9 +25,7 @@ function UnitCard({ unit }: { unit: IUnit }) {
 
   return (
     <Link
-      to={`/complex/${
-        complexNamesSlugs[unit.project as keyof typeof complexNamesSlugs]
-      }/${unit.unitNo}`}
+      to={`/complex/${complexNameToSlug(unit.project)}/${unit.unitNo}`}
       className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl flex flex-col justify-between 2xl:gap-[1.111vw] gap-4 bg-white 2xl:aspect-[332/396] md:max-2xl:aspect-[352/396] aspect-[328/396]"
     >
       <div className="flex items-center justify-between">
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index f9e114b..c1c0a0b 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -88,7 +88,7 @@ function Select({
               >
                 <p
                   className={clsx(
-                    "text-s group-hover:text-[#0D1922] transition-colors",
+                    "text-s group-hover:text-[#0D1922] transition-colors text-nowrap",
                     selectedOption !== option && "text-[#0D1922]/70"
                   )}
                 >
diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx
index db47e1d..c6c340e 100644
--- a/src/pages/FloorsPage.tsx
+++ b/src/pages/FloorsPage.tsx
@@ -2,7 +2,7 @@ import FloorSelect, { FloorsData } from "../components/FloorSelect";
 import { useParams } from "react-router";
 import FloorSidebar from "../components/FloorSidebar";
 import FloorPlanDubaiMarina from "../components/FloorPlanDubaiMarina";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Select from "../components/ui/Select";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../api/ky";
@@ -23,10 +23,6 @@ function FloorsPage() {
   const { complexName } = useParams();
   const [selectedFloor, setSelectedFloor] = useState<string | null>(null);
 
-  useEffect(() => {
-    console.log("selectedFloor", selectedFloor?.split(" ")[0]);
-  }, [selectedFloor]);
-
   const { data: floorsData } = useQuery({
     queryKey: ["floors-data", complexName],
     queryFn: () =>
@@ -76,12 +72,40 @@ function FloorsPage() {
                       onSelect={(floor) => setSelectedFloor(floor)}
                       className="2xl:w-[8.333vw]"
                     />
-                    <div className="divider bg-[#E2E2DC] w-px h-[1.667vw]"></div>
+                    <div className="bg-[#E2E2DC] w-px h-[1.667vw]"></div>
                     <div className="flex items-center gap-[1.667vw]">
-                      <UnitTypeBadge type="Studio Flex" count={1} />
-                      <UnitTypeBadge type="Studio" count={7} />
-                      <UnitTypeBadge type="1 Bedroom" count={3} />
-                      <UnitTypeBadge type="2 Bedroom" count={7} />
+                      <UnitTypeBadge
+                        type="Studio Flex"
+                        count={
+                          floorsData?.find(
+                            (item) => item.floor === parseInt(selectedFloor!)
+                          )?.West.types.StudioFlex || 0
+                        }
+                      />
+                      <UnitTypeBadge
+                        type="Studio"
+                        count={
+                          floorsData?.find(
+                            (item) => item.floor === parseInt(selectedFloor!)
+                          )?.West.types.Studio || 0
+                        }
+                      />
+                      <UnitTypeBadge
+                        type="1 Bedroom"
+                        count={
+                          floorsData?.find(
+                            (item) => item.floor === parseInt(selectedFloor!)
+                          )?.West.types["1 Bedroom"] || 0
+                        }
+                      />
+                      <UnitTypeBadge
+                        type="2 Bedroom"
+                        count={
+                          floorsData?.find(
+                            (item) => item.floor === parseInt(selectedFloor!)
+                          )?.West.types["2 Bedroom"] || 0
+                        }
+                      />
                     </div>
                   </div>
                   <div className="p-[4.444vw] bg-[#F3F3F2] rounded-[0.833vw]">
@@ -101,7 +125,77 @@ function FloorsPage() {
             {selectedFloor && !!parseInt(selectedFloor.split(" ").at(-1)!) && (
               <div className="space-y-[1.111vw]">
                 <div className="space-y-[0.556vw] border-b border-[#E2E2DC] pb-[1.667vw]">
-                  <p className="text-h4 font-medium">{selectedFloor} floor</p>
+                  <p className="text-h4 font-medium">
+                    {selectedFloor.split(" ").at(-1)} floor
+                  </p>
+                  <div className="flex items-center gap-[0.278vw]">
+                    <Badge
+                      variant="secondary"
+                      text={`${
+                        (floorsData?.find(
+                          (item) =>
+                            item.floor ===
+                            parseInt(selectedFloor.split(" ").at(-1)!)
+                        )?.East?.totalUnits || 0) +
+                        (floorsData?.find(
+                          (item) =>
+                            item.floor ===
+                            parseInt(selectedFloor.split(" ").at(-1)!)
+                        )?.West?.totalUnits || 0)
+                      } Apartments`}
+                    />
+                    <Badge variant="primary" text="Combinable" />
+                  </div>
+                </div>
+                <div className="space-y-[0.833vw]">
+                  <div className="flex items-center gap-[1.111vw]">
+                    <Select
+                      options={
+                        floorsData?.flatMap((item) => [
+                          `East ${item.floor}`,
+                          `West ${item.floor}`,
+                        ]) || []
+                      }
+                      defaultOption={selectedFloor?.toString() || ""}
+                      onSelect={(floor) => setSelectedFloor(floor)}
+                      className="2xl:w-[8.333vw]"
+                    />
+                    <div className="bg-[#E2E2DC] w-px h-[1.667vw]"></div>
+                    <div className="flex items-center gap-[1.667vw]">
+                      <UnitTypeBadge
+                        type="Studio Flex"
+                        count={
+                          floorsData?.find(
+                            (item) => item.floor === parseInt(selectedFloor!)
+                          )?.West.types.StudioFlex || 0
+                        }
+                      />
+                      <UnitTypeBadge
+                        type="Studio"
+                        count={
+                          floorsData?.find(
+                            (item) => item.floor === parseInt(selectedFloor!)
+                          )?.West.types.Studio || 0
+                        }
+                      />
+                      <UnitTypeBadge
+                        type="1 Bedroom"
+                        count={
+                          floorsData?.find(
+                            (item) => item.floor === parseInt(selectedFloor!)
+                          )?.West.types["1 BR"] || 0
+                        }
+                      />
+                      <UnitTypeBadge
+                        type="2 Bedroom"
+                        count={
+                          floorsData?.find(
+                            (item) => item.floor === parseInt(selectedFloor!)
+                          )?.West.types["2 BR"] || 0
+                        }
+                      />
+                    </div>
+                  </div>
                 </div>
                 <div className="p-[4.444vw] bg-[#F3F3F2] rounded-[0.833vw]">
                   {selectedFloor.split(" ")[0] === "East" && (
diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx
index 570b104..24fdc24 100644
--- a/src/pages/UnitPage.tsx
+++ b/src/pages/UnitPage.tsx
@@ -8,20 +8,21 @@ import FilledHeartIcon from "../components/icons/FilledHeartIcon";
 import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
 import HeartIcon from "../components/icons/HeartIcon";
 import PlayIcon from "../components/icons/PlayIcon";
-import { useEffect } from "react";
+import slugToComplexName from "../utils/slugToComplexName";
+import { useRef } from "react";
 
 function UnitPage() {
   const params = useParams<{ complexName: string; unitNumber: string }>();
 
-  useEffect(() => {
-    console.log(params);
-  }, [params]);
-
   const { data: unit } = useQuery({
     queryKey: ["unit", params.complexName, params.unitNumber],
     queryFn: () =>
       api
-        .get(`units/${params.unitNumber}?project=${params.complexName}`)
+        .get(
+          `units/${params.unitNumber}?project=${slugToComplexName(
+            params.complexName!
+          )}`
+        )
         .json<IUnit>(),
   });
 
@@ -36,6 +37,8 @@ function UnitPage() {
     else setFavoriteUnits([...favoriteUnits, unit]);
   }
 
+  const videoButtonRef = useRef<HTMLButtonElement>(null);
+
   if (!unit) return null;
 
   return (
@@ -81,20 +84,59 @@ function UnitPage() {
             </div>
           </div>
           <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
-          <div className="2xl:p-[1.111vw] p-4 2xl:rounded-[0.883vw] rounded-xl flex items-center justify-between 2xl:gap-[0.556vw] gap-2 2xl:ring-[0.069vw] ring ring-[#E2E2DC]">
+          <div
+            className="2xl:p-[1.111vw] p-4 2xl:rounded-[0.883vw] rounded-xl flex items-center justify-between 2xl:gap-[0.556vw] gap-2 2xl:ring-[0.069vw] ring ring-[#E2E2DC] cursor-pointer"
+            onClick={() => videoButtonRef && videoButtonRef.current?.click()}
+          >
             <div className="2xl:space-y-[0.278vw] space-y-1">
               <h5 className="text-h5 font-medium">ORI Cloud Bed</h5>
               <p className="text-s text-[#00BED7]">Live in the future, today</p>
             </div>
-            <Button
-              variant="secondary"
-              className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5"
-            >
-              <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
+            <Button ref={videoButtonRef} variant="secondary">
+              <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                 <PlayIcon />
-              </span>
+              </div>
             </Button>
           </div>
+          <div className="flex flex-col 2xl:gap-y-[0.556vw]">
+            <div className="flex justify-between">
+              <p className="text-s opacity-70">Total Area</p>
+              <p className="text-s">{unit.squareFt} Sqft</p>
+            </div>
+            <div className="flex justify-between">
+              <p className="text-s opacity-70">Suite Area</p>
+              <p className="text-s">{unit.suitsArea} Sqft</p>
+            </div>
+            <div className="flex justify-between">
+              <p className="text-s opacity-70">Balcony Area</p>
+              <p className="text-s">{unit.balconyArea} Sqft</p>
+            </div>
+            <div className="flex justify-between">
+              <p className="text-s opacity-70">Status</p>
+              <p className="text-s">{unit.state}</p>
+            </div>
+            <div className="flex justify-between">
+              <p className="text-s opacity-70">Pasking Space</p>
+              <p className="text-s">{unit.noOfParkingSpace}</p>
+            </div>
+          </div>
+          <p className="text-h4 font-medium text-[#00BED7]">{`AED ${Intl.NumberFormat(
+            "ar-AE",
+            {
+              currency: "AED",
+              minimumFractionDigits: 0,
+            }
+          ).format(unit.salesPrice)}`}</p>
+        </div>
+        <div className="flex flex-col 2xl:gap-[0.556vw] gap-2 sticky 2xl:bottom-[2.222vw] bottom-0">
+          <Button
+            variant="primary"
+            className="!bg-[#F3F3F2] !text-[#0D1922]"
+            size="large"
+          >
+            Virtual tour
+          </Button>
+          <Button size="large">Book</Button>
         </div>
       </div>
     </div>
diff --git a/src/utils/complexNameToSlug.ts b/src/utils/complexNameToSlug.ts
new file mode 100644
index 0000000..0b84289
--- /dev/null
+++ b/src/utils/complexNameToSlug.ts
@@ -0,0 +1,7 @@
+export default function complexNameToSlug(complexName: string) {
+  return complexName
+    .split(" ")
+    .slice(2)
+    .map((w) => w.toLowerCase())
+    .join("-");
+}
diff --git a/src/utils/slugToComplexName.ts b/src/utils/slugToComplexName.ts
new file mode 100644
index 0000000..bf873a8
--- /dev/null
+++ b/src/utils/slugToComplexName.ts
@@ -0,0 +1,6 @@
+export default function slugToComplexName(slug: string) {
+  return `Rove Home ${slug
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ")}`;
+}