feat: fallback listing state + offloaded nav placeholders

src/components/Layouts/Navbars/Base.tsx

@@ -22,19 +22,13 @@ import { signOut, useSession } from "next-auth/react";
 import { Fragment, useRef, useState } from "react";
 import { IconType } from "react-icons";
 import {
-  TbBook,
   TbBookmarks,
   TbBuildingWarehouse,
-  TbChartPie3,
   TbChevronDown,
   TbChevronLeft,
   TbChevronRight,
   TbChevronUp,
-  TbCoin,
-  TbFingerprint,
   TbLogout,
-  TbMessage,
-  TbNotification,
   TbSettings,
 } from "react-icons/tb";
 
@@ -83,42 +77,6 @@ const NavRoutes: (Route & {
         href: "/explore/neighbourhoods",
         description: "This Pokémon’s cry is very loud and distracting",
       },
-      {
-        icon: TbCoin,
-        label: "Free for everyone",
-        href: "",
-        description: "The fluid of Smeargle’s tail secretions changes",
-      },
-      {
-        icon: TbBook,
-        label: "Documentation",
-        href: "",
-        description: "Yanma is capable of seeing 360 degrees without",
-      },
-    ],
-  },
-  {
-    label: "Feature 2",
-    href: `#`,
-    nodes: [
-      {
-        icon: TbFingerprint,
-        label: "Security",
-        href: "",
-        description: "The shell’s rounded shape and the grooves on its.",
-      },
-      {
-        icon: TbChartPie3,
-        label: "Analytics",
-        href: "",
-        description: "This Pokémon uses its flying ability to quickly chase",
-      },
-      {
-        icon: TbNotification,
-        label: "Notifications",
-        href: "",
-        description: "Combusken battles with the intensely hot flames it spews",
-      },
     ],
   },
 ];
@@ -132,10 +90,6 @@ export const AccountMenulist: (Omit<Route, "href"> & {
     icon: TbBookmarks,
     href: `/account/saved`,
   },
-  {
-    label: "Your comments",
-    icon: TbMessage,
-  },
   {
     label: "Account settings",
     icon: TbSettings,

src/components/Layouts/UnknownState.tsx

@@ -1,5 +1,14 @@
-import { Box, BoxProps, Text, Title } from "@mantine/core";
+import {
+  Box,
+  BoxProps,
+  Button,
+  Text,
+  Title,
+  useMantineTheme,
+} from "@mantine/core";
+import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
+import { TbArrowNarrowLeft } from "react-icons/tb";
 
 interface Props extends BoxProps {
   svgNode: ReactNode;
@@ -14,9 +23,19 @@ const UnknownState = ({
   children,
   ...rest
 }: Props) => {
+  const router = useRouter();
+  const theme = useMantineTheme();
+
   return (
     <Box
       component="article"
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing.xs,
+        placeContent: "center",
+        placeItems: "center",
+      }}
       {...rest}
     >
       <Box
@@ -38,7 +57,6 @@ const UnknownState = ({
       <Title
         order={2}
         size="h5"
-        pt="md"
         tt="capitalize"
         align="center"
       >
@@ -48,13 +66,22 @@ const UnknownState = ({
       <Text
         component="p"
         size="sm"
+        m={0}
         color="dimmed"
         align="center"
         fw={500}
       >
         {subtitle}
       </Text>
 
+      <Button
+        variant="light"
+        onClick={() => router.back()}
+        leftIcon={<TbArrowNarrowLeft />}
+        mt={8}
+      >
+        Go back
+      </Button>
       {children}
     </Box>
   );

src/pages/account/update.tsx

@@ -1,11 +1,45 @@
-import React from "react";
+import { Title } from "@mantine/core";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
 
-import { Layout } from "@/components";
+import { useAccountStore } from "@/data/stores";
+
+import { Layout, Provider } from "@/components";
+import BetaWarning from "@/components/Layouts/BetaWarning";
 
 const AccountUpdatePage = () => {
+  const router = useRouter();
+  const { data: sessionData } = useSession();
+  const isAuth = !!sessionData;
+
+  const currentUser = useAccountStore.use.currentUser();
+
+  //#endregion  //*======== Pre-Render Checks ===========
+  useEffect(() => {
+    if (!isAuth) {
+      router.replace("/account/signIn");
+      return;
+    }
+  }, [isAuth, router]);
+
+  //#endregion  //*======== Pre-Render Checks ===========
+
   return (
     <Layout.Base>
-      <div>AccountUpdatePage</div>
+      <Provider.RenderGuard renderIf={isAuth || !!currentUser}>
+        <BetaWarning />
+
+        <Title
+          order={1}
+          size="h3"
+          sx={{
+            wordBreak: "break-word",
+          }}
+        >
+          Account Details
+        </Title>
+      </Provider.RenderGuard>
     </Layout.Base>
   );
 };

src/pages/property/[type]/[id].tsx

@@ -24,6 +24,7 @@ import { Listing, ListingTypes } from "@/data/clients/ninetyNine";
 import { useNinetyNineStore } from "@/data/stores";
 
 import { Layout, Provider } from "@/components";
+import UnknownState from "@/components/Layouts/UnknownState";
 import {
   EnquiryButtonGroup,
   PriceListingTypes,
@@ -40,6 +41,8 @@ import { logger } from "@/utils/debug";
 import { useIsMobile } from "@/utils/dom";
 import { getLimitedArray } from "@/utils/helpers";
 
+import EmptyListing from "~/assets/images/empty-listing.svg";
+
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const { id, type, clusterId } = context.query;
 
@@ -167,6 +170,13 @@ const PropertyPage = ({ id, type, clusterId, isValidProperty }: Props) => {
     >
       <Provider.RenderGuard
         renderIf={isValidProperty && isMounted && !!listing}
+        fallbackComponent={
+          <UnknownState
+            svgNode={<EmptyListing />}
+            title="Listing not found"
+            subtitle="Woops, the listing has vanished"
+          />
+        }
       >
         <Carousel
           withIndicators