Added different ui when a measure has been installed already

src/app/components/building-passport/RecommendationCard.tsx

@@ -12,6 +12,8 @@ const selectionStyling =
   "shadow active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-900 bg-gray-100 hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start";
 const noSelectionStyling =
   "shadow active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-300 bg-white hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start";
+const alreadyInstalledStyling =
+  "shadow active:shadow w-full border rounded p-4 cursor-pointer text-gray-900 bg-gray-100transition-colors rounded-md flex flex-col justify-start";
 
 const TitleMap = {
   mechanical_ventilation: "Mechanical Ventilation",
@@ -98,6 +100,11 @@ export default function RecommendationCard({
     (rec: Recommendation) => rec.default
   ) as Recommendation;
 
+  // A recommendation type could have no default recommendation, so we need to check if it exists
+  const alreadyInstalled = defaultComponent
+    ? defaultComponent.alreadyInstalled
+    : false;
+
   const [cardComponent, setCardComponent] =
     useState<Recommendation>(defaultComponent);
 
@@ -113,14 +120,39 @@ export default function RecommendationCard({
     return TitleMap[recommendationType];
   };
 
+  // Determine the className based on alreadyInstalled or cardComponent existence
+  const cardClassName = alreadyInstalled
+    ? alreadyInstalledStyling
+    : cardComponent
+    ? selectionStyling
+    : noSelectionStyling;
+
+  const optionTextClassName = alreadyInstalled
+    ? "text-brandgold"
+    : "text-blue-500 hover:text-blue-300";
+
+  const optionsText = alreadyInstalled
+    ? "Already installed"
+    : cardComponent
+    ? "Click for more options"
+    : "Click to select";
+
+  const openModal = () => {
+    // If the card is already installed, we don't want to open the modal
+    if (alreadyInstalled) {
+      return;
+    }
+    setModalIsOpen(true);
+  };
+
+  // If the measure is already installed, we change the font colour to gold
+  const titleClassName = alreadyInstalled
+    ? "text-brandgold font-bold mb-4 text-lg"
+    : "font-bold mb-4 text-lg";
+
   return (
-    <div
-      className={cardComponent ? selectionStyling : noSelectionStyling}
-      onClick={() => {
-        setModalIsOpen(true);
-      }}
-    >
-      <h2 className="font-bold mb-4 text-lg">{getTitle()}</h2>
+    <div className={cardClassName} onClick={openModal}>
+      <h2 className={titleClassName}>{getTitle()}</h2>
       <div className="mb-3">
         {cardComponent ? (
           cardComponent.description
@@ -128,9 +160,7 @@ export default function RecommendationCard({
           <div className="text-red-500">No measure selected</div>
         )}
       </div>
-      <div className="text-blue-500 hover:text-blue-300">
-        {cardComponent ? "Click for more options" : "Click to select"}
-      </div>
+      <div className={optionTextClassName}>{optionsText}</div>
       {cardComponent ? (
         <table className="w-full text-left">
           <tbody>

src/app/db/migrations/0063_elite_black_tarantula.sql

@@ -0,0 +1,20 @@
+CREATE TABLE IF NOT EXISTS "non_intrusive_survey" (
+	"id" bigserial PRIMARY KEY NOT NULL,
+	"uprn" bigint,
+	"survey_date" timestamp,
+	"surveyor" text
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "non_intrusive_survey_notes" (
+	"id" bigserial PRIMARY KEY NOT NULL,
+	"survey_id" bigint NOT NULL,
+	"title" text,
+	"note" text
+);
+--> statement-breakpoint
+ALTER TABLE "recommendation" ADD COLUMN "is_override" boolean DEFAULT false;--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "non_intrusive_survey_notes" ADD CONSTRAINT "non_intrusive_survey_notes_survey_id_non_intrusive_survey_id_fk" FOREIGN KEY ("survey_id") REFERENCES "non_intrusive_survey"("id") ON DELETE no action ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;

src/app/db/migrations/0064_icy_blue_shield.sql

@@ -0,0 +1,3 @@
+ALTER TABLE "non_intrusive_survey" ALTER COLUMN "uprn" SET NOT NULL;--> statement-breakpoint
+ALTER TABLE "non_intrusive_survey" ALTER COLUMN "survey_date" SET NOT NULL;--> statement-breakpoint
+ALTER TABLE "non_intrusive_survey" ALTER COLUMN "surveyor" SET NOT NULL;

src/app/db/migrations/0065_watery_korvac.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "non_intrusive_survey_notes" ALTER COLUMN "title" SET NOT NULL;--> statement-breakpoint
+ALTER TABLE "non_intrusive_survey_notes" ALTER COLUMN "note" SET NOT NULL;

src/app/db/migrations/0066_eager_cerise.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "recommendation" ADD COLUMN "already_installed" boolean DEFAULT false;--> statement-breakpoint
+ALTER TABLE "recommendation" DROP COLUMN IF EXISTS "is_override";

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
-    // "target": "es5",
-    "target": "ESNext",
+    "target": "es5",
+    // "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,