Skip to content

Commit

Permalink
Re-wire the sendspecimen
Browse files Browse the repository at this point in the history
  • Loading branch information
@yash-learner
yash-learner committed Jan 6, 2025
1 parent c32e659 commit 4c3a8a6
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 102 deletions.
66 changes: 66 additions & 0 deletions src/components/Lab/SendSpecimenForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,22 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";

import routes from "@/Utils/request/api";
import mutate from "@/Utils/request/mutate";
import { Specimen } from "@/types/emr/specimen";

import { Button } from "../ui/button";
import { Label } from "../ui/label";
import { BarcodeInput } from "./BarcodeInput";

type SendSpecimenFormProps = {
Expand All @@ -28,11 +39,24 @@ const formSchema = z.object({
lab: z.string().uuid(),
});

// Mock Labs Data
const labs = [
{ id: "b5d3c589-79ad-4c28-a070-bb795ca75ce4", name: "Central Lab" },
{ id: "e9be65c3-70e7-406c-909d-dffd84501460", name: "Northside Lab" },
{ id: "20f6958a-d0b4-4fdb-bd3c-1a3bedc728a8", name: "Southside Lab" },
{ id: "c0b60fd1-cb5e-4265-aab4-03b08f8c69f6", name: "Eastside Lab" },
{ id: "c713add3-e558-4fb6-a311-dd0c1c3558d5", name: "Westside Lab" },
];

export const SendSpecimenForm: React.FC<SendSpecimenFormProps> = ({
onSuccess,
}) => {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
barcode: "",
lab: "",
},
});

const { mutate: sendSpecimen } = useMutation({
Expand Down Expand Up @@ -70,6 +94,48 @@ export const SendSpecimenForm: React.FC<SendSpecimenFormProps> = ({
</FormItem>
)}
/>
<div className="space-y-2">
<Label className="text-sm font-normal text-gray-900">
Select Lab
</Label>
<FormField
control={form.control}
name="lab"
render={({ field }) => (
<FormItem>
<FormControl>
<Select
value={field.value}
onValueChange={field.onChange}
>
<SelectTrigger>
<SelectValue placeholder="Select a Lab" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Labs</SelectLabel>
{labs.map((lab) => (
<SelectItem key={lab.id} value={lab.id}>
{lab.name}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<Button
type="submit"
variant={"primary"}
size={"lg"}
className="self-end"
>
Save
</Button>
</form>
</Form>
</div>
Expand Down
165 changes: 63 additions & 102 deletions src/components/Lab/pages/SendSpecimen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Label } from "@/components/ui/label";

import { Specimen } from "@/types/emr/specimen";

import { SendSpecimenForm } from "../SendSpecimenForm";
import { ServiceRequestCard } from "../ServiceRequestCard";

export default function SendSpecimen() {
const [specimen, setSpecimen] = useState<Specimen[]>([]);
const [specimens, setSpecimen] = useState<Specimen[]>([]);

return (
<div className="mx-auto max-w-5xl flex flex-col gap-5">
Expand All @@ -25,7 +32,7 @@ export default function SendSpecimen() {
<div className="flex flex-col bg-white shadow-sm rounded-sm p-4 gap-5">
<SendSpecimenForm
onSuccess={(createdSpecimen) =>
setSpecimen([createdSpecimen, ...specimen])
setSpecimen([createdSpecimen, ...specimens])
}
/>
</div>
Expand All @@ -34,110 +41,64 @@ export default function SendSpecimen() {
Ready for Dispatch
</Label>

<div className="flex flex-col gap-4 mt-6"></div>
<div className="flex flex-col gap-4 mt-6">
{specimens.map((specimen) => (
<SpecimenCollapsible key={specimen.id} specimen={specimen} />
))}
</div>
</div>
</div>
);
}

// {specimens.map((specimen) => (
// <Collapsible>
// <div className="relative before:content-[''] before:absolute before:top-0 before:left-0 before:h-7 before:w-1 before:bg-gray-400 before:mt-3.5 before:rounded-r-sm">
// <div
// className={`items-center px-4 py-3 border rounded-lg shadow-sm max-w-5xl mx-auto space-y-4`}
// >
// <div className="flex items-center gap-4 justify-between">
// <div>
// <span className="text-sm font-medium text-gray-600">
// Specimen id
// </span>
// <div className="flex items-center gap-2">
// <span className="text-lg font-semibold text-gray-900">
// {specimen.identifier ?? specimen.id.slice(0, 8)}
// </span>
// <span className="px-2 py-1 text-xs font-medium bg-green-100 text-green-900 rounded">
// Ready for Dispatch
// </span>
// </div>
// </div>
// <div className="flex items-center">
// <div className="flex items-center gap-4">
// <CollapsibleTrigger asChild>
// <Button variant="ghost" size="sm">
// <div className="">
// {/* {openOrders[order.orderId] ? (
// <ChevronUpIcon className="h-6 w-8" />
// ) : ( */}
// <ChevronDownIcon className="h-6 w-8" />
// {/* )} */}
// </div>
// </Button>
// </CollapsibleTrigger>
// </div>
// </div>
// </div>
const SpecimenCollapsible = ({ specimen }: { specimen: Specimen }) => {
const [isOpen, setIsOpen] = useState(false);

// {/* Expanded Content */}
// <CollapsibleContent>
// <div className="space-y-4">
// <div className="max-w-5xl bg-white shadow rounded-lg p-6">
// <div className="flex flex-col md:flex-row gap-4">
// {/* Left Section */}
// <div className="w-full md:w-1/2 pl-2">
// <h3 className="text-sm font-semibold text-gray-600">
// Test
// </h3>
// <p className="font-semibold">
// {specimen.request.code.display ??
// specimen.request.code.code}
// </p>
// </div>

// {/* Right Section */}
// <div className="w-full md:w-1/2 md:border-l border-gray-300 sm:pl-4 sm:pb-4">
// <h3 className="text-sm font-semibold text-gray-600">
// Order Placed by
// </h3>
// <div className="flex gap-2">
// <p className="text-lg font-semibold text-gray-900 mb-4">
// {specimen.request.requester?.first_name}{" "}
// {specimen.request.requester?.last_name}
// </p>
// <p className="text-lg font-normal text-gray-900 mb-4">
// ({specimen.request.requester?.user_type})
// </p>
// </div>

// <h3 className="text-sm font-semibold text-gray-600">
// Order Date/Time
// </h3>
// <p className="text-lg font-semibold text-gray-900 mb-4">
// {specimen.request.authored_on}
// </p>
return (
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<div className="relative before:content-[''] before:absolute before:top-0 before:left-0 before:h-7 before:w-1 before:bg-gray-400 before:mt-3.5 before:rounded-r-sm">
<div
className={`items-center px-4 py-3 border rounded-lg shadow-sm max-w-5xl mx-auto space-y-4 ${
isOpen ? "bg-gray-100" : " "
} `}
>
<div className="flex items-center gap-4 justify-between">
<div>
<span className="text-sm font-medium text-gray-600">
Specimen id
</span>
<div className="flex items-center gap-2">
<span className="text-lg font-semibold text-gray-900">
{specimen.identifier ?? specimen.id.slice(0, 8)}
</span>
<span className="px-2 py-1 text-xs font-medium bg-green-100 text-green-900 rounded">
Ready for Dispatch
</span>
</div>
</div>
<div className="flex items-center">
<div className="flex items-center gap-4">
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm">
<div>
{isOpen ? (
<ChevronUpIcon className="h-6 w-8" />
) : (
<ChevronDownIcon className="h-6 w-8" />
)}
</div>
</Button>
</CollapsibleTrigger>
</div>
</div>
</div>

// <h3 className="text-sm font-semibold text-gray-600">
// Priority
// </h3>
// <span className="px-3 py-1 inline-block text-sm font-semibold text-red-600 bg-red-100 rounded-lg">
// {specimen.request.priority ?? "Routine"}
// </span>
// </div>
// </div>
// {/* Note Section */}
// <div className="border-t border-gray-300 px-2 py-4 max-w-4xl">
// <h3 className="text-sm font-semibold text-gray-600">
// Note:
// </h3>
// <p className="text-gray-700">
// {specimen.request.note
// .map((note) => note.text)
// .join("\n") || "No note provided"}
// </p>
// </div>
// </div>
// </div>
// </CollapsibleContent>
// </div>
// </div>
// </Collapsible>
// ))}
{/* Expanded Content */}
<CollapsibleContent>
<ServiceRequestCard serviceRequest={specimen.request} />
</CollapsibleContent>
</div>
</div>
</Collapsible>
);
};

0 comments on commit 4c3a8a6

Please sign in to comment.