basic wiring for the page

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

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { Input } from "@/app/shadcn_components/ui/input";
+import { Card } from "@/app/shadcn_components/ui/card";
+import { Pencil } from "lucide-react";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from "@/app/shadcn_components/ui/select";
+
+export default function AddressSearch({
+  onAddressSelect,
+}: {
+  onAddressSelect?: (address: string | null) => void;
+}) {
+  const [postcode, setPostcode] = useState("");
+  const [addresses, setAddresses] = useState<string[]>([]);
+  const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  async function handleSearch() {
+    setError(null);
+    setAddresses([]);
+    if (!postcode.trim()) {
+      setError("Please enter a postcode");
+      return;
+    }
+
+    setLoading(true);
+    await new Promise((r) => setTimeout(r, 800));
+
+    // ✅ Replace with OS Places or postcode.io lookup later
+    setAddresses([
+      "10 Downing Street, London, SW1A 2AA",
+      "11 Downing Street, London, SW1A 2AA",
+      "12 Downing Street, London, SW1A 2AA",
+    ]);
+
+    setLoading(false);
+    setShowDropdown(true);
+  }
+
+  function handleSelectAddress(value: string) {
+    setSelectedAddress(value);
+    setShowDropdown(false);
+    if (onAddressSelect) onAddressSelect(value);
+  }
+
+  function handleChangeAddress() {
+    setSelectedAddress(null);
+    setShowDropdown(true);
+    if (onAddressSelect) onAddressSelect(null);
+  }
+
+  return (
+    <Card className="p-6">
+      <h2 className="text-xl font-semibold text-brandbrown mb-4">
+        Step 1: Search for Address
+      </h2>
+
+      {/* Hide postcode/search once address is selected */}
+      {!selectedAddress && (
+        <div className="flex gap-2 mb-4">
+          <Input
+            placeholder="Enter postcode"
+            value={postcode}
+            onChange={(e) => setPostcode(e.target.value.toUpperCase())}
+            className="text-lg"
+          />
+          <Button
+            onClick={handleSearch}
+            disabled={loading || !postcode}
+            className="bg-brandbrown text-white"
+          >
+            {loading ? "Searching..." : "Search"}
+          </Button>
+        </div>
+      )}
+
+      {error && <p className="text-sm text-red-600 mb-3">{error}</p>}
+
+      {/* Address Dropdown */}
+      {showDropdown && addresses.length > 0 && (
+        <div className="mt-2">
+          <label className="block text-sm text-gray-700 mb-2">
+            Select your address
+          </label>
+          <Select
+            onValueChange={handleSelectAddress}
+            value={selectedAddress || undefined}
+          >
+            <SelectTrigger className="w-full border-gray-300">
+              <SelectValue placeholder="Choose an address" />
+            </SelectTrigger>
+            <SelectContent>
+              {addresses.map((a) => (
+                <SelectItem key={a} value={a}>
+                  {a}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* Selected Address */}
+      {selectedAddress && !showDropdown && (
+        <div className="relative bg-gray-100 border rounded-xl p-6 mt-4">
+          <h3 className="text-lg font-semibold text-brandblue mb-2">
+            Selected Address
+          </h3>
+          <p className="text-gray-700">{selectedAddress}</p>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={handleChangeAddress}
+            className="absolute bottom-4 right-4 flex gap-1 text-brandbrown border-brandbrown"
+          >
+            <Pencil className="w-4 h-4" />
+            Change
+          </Button>
+        </div>
+      )}
+    </Card>
+  );
+}

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import AddressSearch from "./AddressSearch";
+import ScenarioSetup from "./ScenarioSetup";
+import RunAssessment from "./RunAssessment";
+
+export default function RemoteAssessmentClient({
+  portfolioId,
+  scenarios,
+}: {
+  portfolioId: string;
+  scenarios: {
+    id: string;
+    name: string;
+    housingType: string;
+    goal: string;
+    goalValue: string | null;
+  }[];
+}) {
+  const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
+
+  return (
+    <div className="max-w-4xl mx-auto p-8 space-y-12">
+      <h1 className="text-3xl font-bold text-brandblue mb-8">
+        Remote Assessment
+      </h1>
+
+      <AddressSearch onAddressSelect={setSelectedAddress} />
+
+      <div
+        className={`transition-all duration-300 ${
+          selectedAddress
+            ? "opacity-100 pointer-events-auto cursor-default"
+            : "opacity-50 pointer-events-none cursor-not-allowed"
+        }`}
+      >
+        <ScenarioSetup
+          portfolioId={portfolioId}
+          scenarios={scenarios}
+          disabled={!selectedAddress}
+        />
+      </div>
+
+      <div
+        className={`transition-all duration-300 ${
+          selectedAddress
+            ? "opacity-100 pointer-events-auto cursor-default"
+            : "opacity-50 pointer-events-none cursor-not-allowed"
+        }`}
+      >
+        <RunAssessment />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+import { Card } from "@/app/shadcn_components/ui/card";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { Play } from "lucide-react";
+
+export default function RunAssessment() {
+  return (
+    <Card className="p-6 opacity-50 pointer-events-none">
+      <h2 className="text-xl font-semibold text-brandbrown mb-4">
+        Step 3: Run Assessment
+      </h2>
+      <Button className="flex items-center gap-2 bg-brandblue text-white">
+        <Play className="w-4 h-4" /> Run Assessment
+      </Button>
+    </Card>
+  );
+}

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

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState } from "react";
+import { Card } from "@/app/shadcn_components/ui/card";
+import { Input } from "@/app/shadcn_components/ui/input";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { SelectDropdown } from "@/app/portfolio/[slug]/components/RemoteAssessmentDropdowns";
+
+export default function ScenarioSetup({
+  portfolioId,
+  scenarios,
+  disabled = false,
+}: {
+  portfolioId: string;
+  scenarios: {
+    id: string;
+    name: string;
+    housingType: string;
+    goal: string;
+    goalValue: string | null;
+  }[];
+  disabled?: boolean;
+}) {
+  const [selectedScenario, setSelectedScenario] = useState<string | null>(null);
+
+  return (
+    <Card
+      className={`p-6 transition-all ${
+        disabled
+          ? "opacity-50 pointer-events-none cursor-not-allowed"
+          : "opacity-100 cursor-default"
+      }`}
+    >
+      <h2 className="text-xl font-semibold text-brandbrown mb-4">
+        Step 2: Select or Create Scenario
+      </h2>
+
+      <SelectDropdown
+        options={[
+          { label: "Create new scenario", value: "__new__" },
+          ...scenarios.map((s) => ({
+            label: s.name,
+            value: s.id,
+          })),
+        ]}
+        selectedOption={selectedScenario || ""}
+        onSelectOption={(opt) => setSelectedScenario(opt.value)}
+      />
+
+      <div className="mt-6 space-y-3">
+        <Input
+          placeholder="Scenario name"
+          disabled={disabled}
+          className="border-brandbrown focus-visible:ring-brandbrown"
+        />
+        <Input
+          placeholder="Budget (£)"
+          disabled={disabled}
+          className="border-brandbrown focus-visible:ring-brandbrown"
+        />
+        <Input
+          placeholder="Valuation (optional)"
+          disabled={disabled}
+          className="border-brandbrown focus-visible:ring-brandbrown"
+        />
+      </div>
+
+      <Button
+        className="mt-4 bg-brandbrown hover:bg-hoverblue"
+        disabled={disabled}
+      >
+        Save Scenario
+      </Button>
+    </Card>
+  );
+}

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

@@ -1,132 +1,22 @@
-"use client";
-
-import { useState } from "react";
-import { Input } from "@/app/shadcn_components/ui/input";
-import { Button } from "@/app/shadcn_components/ui/button";
+import RemoteAssessmentClient from "./RemoteAssessmentClient";
 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
+  getPortfolio,
+  getPortfolioScenarios,
+} from "@/app/portfolio/[slug]/utils";
 
-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);
+export default async function RemoteAssessmentPage(props: {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{
+    [key: string]: string | string[] | undefined | number;
+  }>;
+}) {
+  const params = await props.params;
+  const portfolioId = params.slug;
 
-  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);
-  }
+  // 🔹 Replace this with your real Drizzle query
+  const scenarios = await getPortfolioScenarios(portfolioId);
 
   return (
-    <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>
+    <RemoteAssessmentClient portfolioId={portfolioId} scenarios={scenarios} />
   );
 }