basic logic for remote assessment live

src/app/portfolio/[slug]/remote-assessment/page.tsx

@@ -1,12 +1,132 @@
+"use client";
+
+import { useState } from "react";
+import { Input } from "@/app/shadcn_components/ui/input";
+import { Button } from "@/app/shadcn_components/ui/button";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from "@/app/shadcn_components/ui/select";
+import { Card } from "@/app/shadcn_components/ui/card";
+import { Pencil } from "lucide-react"; // ✅ already available from lucide-react
+
 export default function RemoteAssessmentPage() {
+  const [postcode, setPostcode] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [addresses, setAddresses] = useState<string[]>([]);
+  const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSearch() {
+    setError(null);
+    setAddresses([]);
+    setSelectedAddress(null);
+
+    if (!postcode.trim()) {
+      setError("Please enter a postcode");
+      return;
+    }
+
+    setIsLoading(true);
+    await new Promise((r) => setTimeout(r, 800)); // simulate delay
+
+    const fakeResults = [
+      "10 Downing Street, London, SW1A 2AA",
+      "11 Downing Street, London, SW1A 2AA",
+      "12 Downing Street, London, SW1A 2AA",
+    ];
+
+    setAddresses(fakeResults);
+    setIsLoading(false);
+  }
+
+  function handleChangeAddress() {
+    setSelectedAddress(null);
+  }
+
   return (
-    <div className="max-w-3xl mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">Remote Assessment</h1>
-      <p className="mb-6">
-        Welcome to the Remote Assessment page. Here you can start your remote
-        assessment process.
-      </p>
-      {/* Additional content and components for remote assessment can be added here */}
+    <div className="flex flex-col items-center justify-center min-h-[70vh] bg-gray-50">
+      <Card className="w-full max-w-xl bg-white shadow-lg border border-gray-200 rounded-2xl p-8 relative">
+        <h1 className="text-3xl font-bold text-brandblue mb-2">
+          Remote Assessment
+        </h1>
+        <p className="text-gray-600 mb-6">
+          Search for your property using its postcode to start your assessment.
+        </p>
+
+        {/* Step 1: Postcode input */}
+        {!selectedAddress && (
+          <>
+            <div className="flex space-x-2 mb-6">
+              <Input
+                type="text"
+                value={postcode}
+                onChange={(e) => setPostcode(e.target.value.toUpperCase())}
+                placeholder="Enter postcode (e.g. SW1A 2AA)"
+                className="text-lg"
+              />
+              <Button
+                onClick={handleSearch}
+                disabled={isLoading || !postcode}
+                className="bg-brandbrown hover:bg-hoverblue text-white font-medium px-6"
+              >
+                {isLoading ? "Searching..." : "Search"}
+              </Button>
+            </div>
+
+            {error && <p className="text-sm text-red-600 mb-4">{error}</p>}
+
+            {/* Step 2: Dropdown of addresses */}
+            {addresses.length > 0 && (
+              <div className="mb-6 animate-in fade-in duration-300">
+                <label className="text-gray-700 font-medium mb-2 block">
+                  Select your address
+                </label>
+                <Select
+                  onValueChange={(val) => setSelectedAddress(val)}
+                  value={selectedAddress ?? undefined}
+                >
+                  <SelectTrigger className="text-gray-800">
+                    <SelectValue placeholder="Choose an address" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {addresses.map((addr) => (
+                      <SelectItem key={addr} value={addr}>
+                        {addr}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Step 3: Confirmation card */}
+        {selectedAddress && (
+          <div className="relative bg-gradient-to-br from-gray-50 to-gray-100 border border-gray-300 rounded-xl p-6 mt-4 shadow-sm transition-all duration-300">
+            <div className="flex flex-col space-y-2">
+              <h2 className="text-lg font-semibold text-brandblue">
+                Selected Address
+              </h2>
+              <p className="text-gray-700 leading-snug">{selectedAddress}</p>
+            </div>
+
+            <Button
+              onClick={handleChangeAddress}
+              variant="outline"
+              size="sm"
+              className="absolute bottom-4 right-4 flex items-center gap-1 text-brandbrown border-brandbrown hover:bg-brandbrown hover:text-white transition-colors"
+            >
+              <Pencil className="w-4 h-4" />
+              Change address
+            </Button>
+          </div>
+        )}
+      </Card>
     </div>
   );
 }

src/middleware.ts

@@ -6,9 +6,6 @@ export async function middleware(req: NextRequest) {
   const token = await getToken({ req });
   const { pathname } = req.nextUrl;
 
-  console.log("token", token);
-  console.log("onboarded", token?.onboarded);
-
   // If no session, send user to sign-in page
   if (!token) {
     return NextResponse.redirect(new URL("/", req.url));