Gitead/DentalManagementE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

patient table done, patient form done

Browse Source
This commit is contained in:
Potenz
2025-07-12 22:54:57 +05:30
parent 27dc669aae
commit 324623f02b
9 changed files with 356 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
apps/Frontend/src/components/patients/patient-search.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from "react";
import { Search, X } from "lucide-react";
import { CalendarIcon, Search, X } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
@@ -18,6 +18,14 @@ import {
DialogTrigger,
DialogClose,
} from "@/components/ui/dialog";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import { Calendar } from "@/components/ui/calendar";
export type SearchCriteria = {
searchTerm: string;
@@ -75,17 +83,54 @@ export function PatientSearch({
<div className="w-full pt-8 pb-4 px-4">
<div className="flex gap-2 mb-4">
<div className="relative flex-1">
<Input
placeholder="Search patients..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pr-10"
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSearch();
}
}}
/>
{searchBy === "dob" ? (
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
onKeyDown={(e) => {
if (e.key === "Enter") handleSearch();
}}
className={cn(
"w-full pl-3 pr-20 text-left font-normal",
!searchTerm && "text-muted-foreground"
)}
>
{searchTerm ? (
format(new Date(searchTerm), "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-4">
<Calendar
mode="single"
selected={searchTerm ? new Date(searchTerm) : undefined}
onSelect={(date: Date | undefined) => {
if (date) {
const formattedDate = format(date, "yyyy-MM-dd");
setSearchTerm(String(formattedDate));
}
}}
disabled={(date) => date > new Date()}
/>
</PopoverContent>
</Popover>
) : (
<Input
placeholder="Search patients..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pr-10"
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSearch();
}
}}
/>
)}
{searchTerm && (
<button
className="absolute right-10 top-3 text-gray-400 hover:text-gray-600"
@@ -97,6 +142,7 @@ export function PatientSearch({
<X size={16} />
</button>
)}
<button
className="absolute right-3 top-3 text-gray-400 hover:text-gray-600"
onClick={handleSearch}
@@ -168,14 +214,59 @@ export function PatientSearch({
<label className="text-right text-sm font-medium">
Search term
</label>
<Input
className="col-span-3"
value={advancedCriteria.searchTerm}
onChange={(e) =>
updateAdvancedCriteria("searchTerm", e.target.value)
}
placeholder="Enter search term..."
/>
{advancedCriteria.searchBy === "dob" ? (
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
onKeyDown={(e) => {
if (e.key === "Enter") handleSearch();
}}
className={cn(
"col-span-3 text-left font-normal",
!advancedCriteria.searchTerm &&
"text-muted-foreground"
)}
>
{advancedCriteria.searchTerm ? (
format(new Date(advancedCriteria.searchTerm), "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-4">
<Calendar
mode="single"
selected={
advancedCriteria.searchTerm
? new Date(advancedCriteria.searchTerm)
: undefined
}
onSelect={(date) => {
if (date) {
const formattedDate = format(date, "yyyy-MM-dd");
updateAdvancedCriteria(
"searchTerm",
String(formattedDate)
);
}
}}
disabled={(date) => date > new Date()}
/>
</PopoverContent>
</Popover>
) : (
<Input
className="col-span-3"
value={advancedCriteria.searchTerm}
onChange={(e) =>
updateAdvancedCriteria("searchTerm", e.target.value)
}
placeholder="Enter search term..."
/>
)}
</div>
</div>