FEAT: add ability to remove referrals (#105)

Author: michelle-hadfield-nava

frontend/src/app/[locale]/generate-referrals/page.tsx

@@ -27,9 +27,11 @@ import {
   ClientDetailsInput,
   resourceCategories,
 } from "@/components/ClientDetailsInput";
+import { RemoveResourceNotification } from "@/components/RemoveResourceNotification";
 
 export default function Page() {
   const [clientDescription, setClientDescription] = useState("");
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [result, setResult] = useState<Resource[] | null>(null);
   const [resultId, setResultId] = useState("");
   const [loading, setLoading] = useState(false);
@@ -54,6 +56,13 @@ export default function Page() {
   const [userEmail, setUserEmail] = useState("");
   const [isCheckingUser, setIsCheckingUser] = useState(true);
 
+  // Remove functionality state
+  const [retainedResources, setRetainedResources] = useState<Resource[]>();
+  const [recentlyRemoved, setRecentlyRemoved] = useState<Resource | null>(null);
+  const [removedResourceIndex, setRemovedResourceIndex] = useState<
+    number | null
+  >(null);
+
   // Check if user has provided info on first load
   useEffect(() => {
     const storedUserName = localStorage.getItem("userName");
@@ -88,6 +97,7 @@ export default function Page() {
 
   const onResources = (resources: Resource[]) => {
     setResult(resources);
+    setRetainedResources(resources); // this creates a copy of the original list of resources, may be edited by the user
     setReadyToPrint(true);
   };
 
@@ -145,11 +155,11 @@ export default function Page() {
   }
 
   function handleSelectAllResources() {
-    if (!result) return;
-    if (selectedResources.length === result.length) {
+    if (!retainedResources) return;
+    if (selectedResources.length === retainedResources.length) {
       setSelectedResources([]);
     } else {
-      setSelectedResources(result);
+      setSelectedResources(retainedResources);
     }
   }
 
@@ -211,6 +221,67 @@ export default function Page() {
     return null;
   }
 
+  // Remove resource handler
+  const handleRemoveResource = (resourceToRemove: Resource) => {
+    // Find and store the index before removing
+    const index = retainedResources?.findIndex(
+      (r) => r.name === resourceToRemove.name,
+    );
+    if (index !== undefined && index !== -1) {
+      setRemovedResourceIndex(index);
+    }
+
+    setRecentlyRemoved(resourceToRemove);
+
+    // Immediately remove from retainedResources
+    setRetainedResources((current) =>
+      current?.filter((r) => r.name !== resourceToRemove.name),
+    );
+
+    // Remove from selectedResources as well
+    setSelectedResources((current) =>
+      current.filter((r) => r.name !== resourceToRemove.name),
+    );
+
+    // Auto-clear the undo notification after 7.5 seconds
+    setTimeout(() => {
+      setRecentlyRemoved((current) => {
+        // If the resource is still marked as recently removed, clear it
+        if (current === resourceToRemove) {
+          return null;
+        }
+        return current;
+      });
+      setRemovedResourceIndex(null);
+    }, 7500);
+  };
+
+  // Undo remove handler
+  const handleUndoRemove = () => {
+    if (recentlyRemoved) {
+      // Add the resource back to retainedResources at its original index
+      setRetainedResources((current) => {
+        if (!current) {
+          return [recentlyRemoved];
+        }
+
+        // If we have a stored index, insert at that position
+        if (removedResourceIndex !== null && removedResourceIndex >= 0) {
+          const newArray = [...current];
+          newArray.splice(removedResourceIndex, 0, recentlyRemoved);
+          return newArray;
+        }
+
+        // Fallback: append to the end
+        return [...current, recentlyRemoved];
+      });
+
+      // Clear the recently removed state
+      setRecentlyRemoved(null);
+      setRemovedResourceIndex(null);
+    }
+  };
+
   return (
     <>
       {!userName || !userEmail ? (
@@ -306,12 +377,13 @@ export default function Page() {
                   clientDescription={clientDescription}
                 />
                 <ResourcesList
-                  resources={result ?? []}
+                  resources={retainedResources ?? []}
                   errorMessage={errorMessage}
+                  handleRemoveResource={handleRemoveResource}
                 />
-                {result && result.length > 0 && (
+                {retainedResources && retainedResources.length > 0 && (
                   <ActionPlanSection
-                    resources={result}
+                    resources={retainedResources}
                     selectedResources={selectedResources}
                     actionPlan={actionPlan}
                     isGeneratingActionPlan={isGeneratingActionPlan}
@@ -326,10 +398,14 @@ export default function Page() {
         </div>
       )}
 
+      {recentlyRemoved && (
+        <RemoveResourceNotification handleUndoRemove={handleUndoRemove} />
+      )}
+
       {/* ----- Print-only section ----- */}
       <div className="hidden print:block">
         <PrintableReferralsReport
-          resources={result ?? []}
+          resources={retainedResources ?? []}
           clientDescription={clientDescription}
           actionPlan={actionPlan}
         />

frontend/src/components/RemoveResourceNotification.tsx

@@ -0,0 +1,29 @@
+import { RotateCcw } from "lucide-react";
+
+type RemoveResourceNotificationProps = {
+  handleUndoRemove: () => void;
+};
+export function RemoveResourceNotification({
+  handleUndoRemove,
+}: RemoveResourceNotificationProps) {
+  return (
+    <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 animate-in slide-in-from-bottom-5 duration-300">
+      <div className="bg-gray-900 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          <div className="w-5 h-5 rounded-full bg-gray-700 flex items-center justify-center">
+            <span className="text-xs">ℹ️</span>
+          </div>
+          <span className="text-sm font-medium">Resource removed</span>
+        </div>
+        <button
+          onClick={handleUndoRemove}
+          aria-label="Undo resource removal"
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-white text-gray-900 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium"
+        >
+          <RotateCcw className="w-3.5 h-3.5" />
+          Undo
+        </button>
+      </div>
+    </div>
+  );
+}