diff --git a/src/components/LabTest/ProcessSpecimen.tsx b/src/components/LabTest/ProcessSpecimen.tsx index 767e4875027..1e8810dca17 100644 --- a/src/components/LabTest/ProcessSpecimen.tsx +++ b/src/components/LabTest/ProcessSpecimen.tsx @@ -1,10 +1,18 @@ import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons"; -import { FC, useState } from "react"; +import { FC, useRef, useState } from "react"; import { FaDroplet } from "react-icons/fa6"; import { v4 as uuid } from "uuid"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { @@ -25,6 +33,7 @@ import { import { Textarea } from "@/components/ui/textarea"; import useAuthUser from "@/hooks/useAuthUser"; +import useOnClickOutside from "@/hooks/useOnClickOutside"; import routes from "@/Utils/request/api"; import request from "@/Utils/request/request"; @@ -37,6 +46,8 @@ export const ProcessSpecimen: FC = () => { const [specimen, setSpecimen] = useState(); const [diagnosticReport, setDiagnosticReport] = useState(); + const [query, setQuery] = useState(""); + const [selectedAnalyzer, setSelectedAnalyzer] = useState(null); const [observations, setObservations] = useState< { @@ -47,6 +58,20 @@ export const ProcessSpecimen: FC = () => { }[] >([]); + const commandRef = useRef(null); + + const [showOptions, setShowOptions] = useState(false); + + useOnClickOutside(commandRef, () => { + setShowOptions(false); + }); + + const analyzers = [ + { id: "1", name: "Analyzer 1", description: "Description for Analyzer 1" }, + { id: "2", name: "Analyzer 2", description: "Description for Analyzer 2" }, + { id: "3", name: "Analyzer 3", description: "Description for Analyzer 3" }, + ]; + return (
)} - {!!specimen?.processing.length && !diagnosticReport && ( <> + {/* Todo: Extra this into a separate component if not done already at some where else*/} + +
+ {/* Label */} +
+ +
+ setShowOptions(true)} + className={`border ${!showOptions && "divide-y-0"}`} + > + + {showOptions && ( + + No results found. + + {analyzers.map((analyzer) => ( + { + setSelectedAnalyzer(analyzer.name); + setQuery(analyzer.name); + setShowOptions(false); + }} + className="cursor-pointer" + > +
+

+ + {analyzer.name} + +
+ + {analyzer.description} + +

+
+
+ ))} +
+
+ )} +
+
+
+ + {/* Buttons */} +
+ + +
+

@@ -586,7 +673,6 @@ export const ProcessSpecimen: FC = () => {

)} - {diagnosticReport && (