patient table done, patient form done
This commit is contained in:
@@ -7,7 +7,6 @@ import {
|
||||
} from "@repo/db/usedSchemas";
|
||||
import { z } from "zod";
|
||||
import { extractDobParts } from "../utils/DobParts";
|
||||
import { parseDobParts } from "../utils/DobPartsParsing";
|
||||
|
||||
const router = Router();
|
||||
|
||||
@@ -134,75 +133,18 @@ router.get("/search", async (req: Request, res: Response): Promise<any> => {
|
||||
}
|
||||
|
||||
if (dob) {
|
||||
const range = parseDobParts(dob);
|
||||
|
||||
if (range) {
|
||||
if (!filters.AND) filters.AND = [];
|
||||
|
||||
// Check what kind of match this was
|
||||
const fromYear = range.from.getUTCFullYear();
|
||||
const toYear = range.to.getUTCFullYear();
|
||||
const fromMonth = range.from.getUTCMonth() + 1; // Prisma months: 1-12
|
||||
const toMonth = range.to.getUTCMonth() + 1;
|
||||
const fromDay = range.from.getUTCDate();
|
||||
const toDay = range.to.getUTCDate();
|
||||
|
||||
const isFullDate =
|
||||
fromYear === toYear && fromMonth === toMonth && fromDay === toDay;
|
||||
|
||||
const isDayMonthOnly =
|
||||
fromYear === 1900 &&
|
||||
toYear === 2100 &&
|
||||
fromMonth === toMonth &&
|
||||
fromDay === toDay;
|
||||
|
||||
const isMonthOnly =
|
||||
fromYear === 1900 &&
|
||||
toYear === 2100 &&
|
||||
fromDay === 1 &&
|
||||
toDay >= 28 &&
|
||||
fromMonth === toMonth &&
|
||||
toMonth === toMonth;
|
||||
|
||||
const isYearOnly = fromMonth === 1 && toMonth === 12;
|
||||
|
||||
if (isFullDate) {
|
||||
filters.AND.push({
|
||||
dob_day: fromDay,
|
||||
dob_month: fromMonth,
|
||||
dob_year: fromYear,
|
||||
});
|
||||
} else if (isDayMonthOnly) {
|
||||
filters.AND.push({
|
||||
dob_day: fromDay,
|
||||
dob_month: fromMonth,
|
||||
});
|
||||
} else if (isMonthOnly) {
|
||||
filters.AND.push({
|
||||
dob_month: fromMonth,
|
||||
});
|
||||
} else if (isYearOnly) {
|
||||
filters.AND.push({
|
||||
dob_year: fromYear,
|
||||
});
|
||||
} else {
|
||||
// Fallback: search via dateOfBirth range
|
||||
filters.AND.push({
|
||||
dateOfBirth: {
|
||||
gte: range.from,
|
||||
lte: range.to,
|
||||
},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const parsed = new Date(dob);
|
||||
if (isNaN(parsed.getTime())) {
|
||||
return res.status(400).json({
|
||||
message: `Invalid date format for DOB. Try formats like "12 March", "March", "1980", "12/03/1980", etc.`,
|
||||
message: "Invalid date format for DOB. Use format: YYYY-MM-DD",
|
||||
});
|
||||
}
|
||||
// Match exact dateOfBirth (optional: adjust for timezone)
|
||||
filters.dateOfBirth = parsed;
|
||||
}
|
||||
|
||||
const [patients, totalCount] = await Promise.all([
|
||||
storage.searchPatients({
|
||||
storage.searchPatients({
|
||||
filters,
|
||||
limit: parseInt(limit),
|
||||
offset: parseInt(offset),
|
||||
@@ -259,13 +201,8 @@ router.post("/", async (req: Request, res: Response): Promise<any> => {
|
||||
userId: req.user!.id,
|
||||
});
|
||||
|
||||
// Extract dob_* from dateOfBirth
|
||||
const dobParts = extractDobParts(new Date(patientData.dateOfBirth));
|
||||
|
||||
const patient = await storage.createPatient({
|
||||
...patientData,
|
||||
...dobParts, // adds dob_day/month/year
|
||||
});
|
||||
const patient = await storage.createPatient(patientData);
|
||||
|
||||
res.status(201).json(patient);
|
||||
} catch (error) {
|
||||
@@ -307,15 +244,8 @@ router.put(
|
||||
// Validate request body
|
||||
const patientData = updatePatientSchema.parse(req.body);
|
||||
|
||||
let dobParts = {};
|
||||
if (patientData.dateOfBirth) {
|
||||
dobParts = extractDobParts(new Date(patientData.dateOfBirth));
|
||||
}
|
||||
// Update patient
|
||||
const updatedPatient = await storage.updatePatient(patientId, {
|
||||
...patientData,
|
||||
...dobParts,
|
||||
});
|
||||
const updatedPatient = await storage.updatePatient(patientId, patientData);
|
||||
res.json(updatedPatient);
|
||||
} catch (error) {
|
||||
if (error instanceof z.ZodError) {
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
export function parseDobParts(input: string): { from: Date; to: Date } | null {
|
||||
if (!input || typeof input !== "string") return null;
|
||||
|
||||
const parts = input.trim().split(/[\s/-]+/).filter(Boolean);
|
||||
|
||||
if (parts.length === 1) {
|
||||
const part = parts[0]?.toLowerCase();
|
||||
|
||||
// Year
|
||||
if (part && /^\d{4}$/.test(part)) {
|
||||
const year = parseInt(part);
|
||||
return {
|
||||
from: new Date(Date.UTC(year, 0, 1)),
|
||||
to: new Date(Date.UTC(year, 11, 31, 23, 59, 59)),
|
||||
};
|
||||
}
|
||||
|
||||
// Month
|
||||
const month = part ? parseMonth(part) : null;
|
||||
if (month !== null) {
|
||||
return {
|
||||
from: new Date(Date.UTC(1900, month, 1)),
|
||||
to: new Date(Date.UTC(2100, month + 1, 0, 23, 59, 59)),
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
if (parts.length === 2) {
|
||||
const [part1, part2] = parts;
|
||||
const day = tryParseInt(part1);
|
||||
const month = part2 ? parseMonth(part2) : null;
|
||||
|
||||
if (day !== null && month !== null) {
|
||||
return {
|
||||
from: new Date(Date.UTC(1900, month, day)),
|
||||
to: new Date(Date.UTC(2100, month, day, 23, 59, 59)),
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
if (parts.length === 3) {
|
||||
const [part1, part2, part3] = parts;
|
||||
const day = tryParseInt(part1);
|
||||
const month = part2 ? parseMonth(part2) : null;
|
||||
const year = tryParseInt(part3);
|
||||
|
||||
if (day !== null && month !== null && year !== null) {
|
||||
return {
|
||||
from: new Date(Date.UTC(year, month, day)),
|
||||
to: new Date(Date.UTC(year, month, day, 23, 59, 59)),
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function parseMonth(input: string): number | null {
|
||||
const normalized = input.toLowerCase();
|
||||
const months = [
|
||||
"january", "february", "march", "april", "may", "june",
|
||||
"july", "august", "september", "october", "november", "december",
|
||||
];
|
||||
|
||||
const index = months.findIndex(
|
||||
(m) => m === normalized || m.startsWith(normalized)
|
||||
);
|
||||
return index !== -1 ? index : null;
|
||||
}
|
||||
|
||||
function tryParseInt(value?: string): number | null {
|
||||
if (!value) return null;
|
||||
const parsed = parseInt(value);
|
||||
return isNaN(parsed) ? null : parsed;
|
||||
}
|
||||
@@ -21,6 +21,16 @@ import {
|
||||
} from "@/components/ui/select";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { forwardRef, useImperativeHandle } from "react";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Calendar } from "../ui/calendar";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { Button } from "../ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const PatientSchema = (
|
||||
PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
|
||||
@@ -116,7 +126,9 @@ export const PatientForm = forwardRef<PatientFormRef, PatientFormProps>(
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
submit() {
|
||||
(document.getElementById("patient-form") as HTMLFormElement | null)?.requestSubmit();
|
||||
(
|
||||
document.getElementById("patient-form") as HTMLFormElement | null
|
||||
)?.requestSubmit();
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -195,9 +207,41 @@ export const PatientForm = forwardRef<PatientFormRef, PatientFormProps>(
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Date of Birth *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(field.value, "PPP")
|
||||
) : (
|
||||
<span>Pick a date</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-4">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={(date) => {
|
||||
if (date) {
|
||||
const localDate = format(date, "yyyy-MM-dd");
|
||||
field.onChange(localDate);
|
||||
}
|
||||
}}
|
||||
disabled={
|
||||
(date) => date > new Date() // Prevent future dates
|
||||
}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
@@ -319,6 +363,32 @@ export const PatientForm = forwardRef<PatientFormRef, PatientFormProps>(
|
||||
Insurance Information
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="status"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Status *</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
defaultValue="active"
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select status" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="active">Active</SelectItem>
|
||||
<SelectItem value="inactive">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="insuranceProvider"
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Delete, Edit, Eye } from "lucide-react";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
@@ -38,6 +37,7 @@ import { useAuth } from "@/hooks/use-auth";
|
||||
import { PatientSearch, SearchCriteria } from "./patient-search";
|
||||
import { useDebounce } from "use-debounce";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Checkbox } from "../ui/checkbox";
|
||||
|
||||
const PatientSchema = (
|
||||
PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
|
||||
@@ -67,12 +67,16 @@ interface PatientTableProps {
|
||||
allowEdit?: boolean;
|
||||
allowView?: boolean;
|
||||
allowDelete?: boolean;
|
||||
allowCheckbox?: boolean;
|
||||
onSelectPatient?: (patient: Patient) => void;
|
||||
}
|
||||
|
||||
export function PatientTable({
|
||||
allowEdit,
|
||||
allowView,
|
||||
allowDelete,
|
||||
allowCheckbox,
|
||||
onSelectPatient,
|
||||
}: PatientTableProps) {
|
||||
const { toast } = useToast();
|
||||
const { user } = useAuth();
|
||||
@@ -94,12 +98,32 @@ export function PatientTable({
|
||||
);
|
||||
const [debouncedSearchCriteria] = useDebounce(searchCriteria, 500);
|
||||
|
||||
const [selectedPatientId, setSelectedPatientId] = useState<number | null>(
|
||||
null
|
||||
);
|
||||
|
||||
const handleSelectPatient = (patient: Patient) => {
|
||||
const isSelected = selectedPatientId === patient.id;
|
||||
const newSelectedId = isSelected ? null : patient.id;
|
||||
setSelectedPatientId(newSelectedId);
|
||||
|
||||
if (!isSelected && onSelectPatient) {
|
||||
onSelectPatient(patient);
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
data: patientsData,
|
||||
isLoading,
|
||||
isError,
|
||||
} = useQuery<PatientApiResponse, Error>({
|
||||
queryKey: ["patients", { page: currentPage, search: debouncedSearchCriteria?.searchTerm || "recent" }],
|
||||
queryKey: [
|
||||
"patients",
|
||||
{
|
||||
page: currentPage,
|
||||
search: debouncedSearchCriteria?.searchTerm || "recent",
|
||||
},
|
||||
],
|
||||
queryFn: async () => {
|
||||
const trimmedTerm = debouncedSearchCriteria?.searchTerm?.trim();
|
||||
const isSearch = trimmedTerm && trimmedTerm.length > 0;
|
||||
@@ -149,8 +173,7 @@ export function PatientTable({
|
||||
patients: [],
|
||||
totalCount: 0,
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Update patient mutation
|
||||
const updatePatientMutation = useMutation({
|
||||
@@ -166,7 +189,15 @@ export function PatientTable({
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsAddPatientOpen(false);
|
||||
queryClient.invalidateQueries({ queryKey: ["patients", currentPage] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [
|
||||
"patients",
|
||||
{
|
||||
page: currentPage,
|
||||
search: debouncedSearchCriteria?.searchTerm || "recent",
|
||||
},
|
||||
],
|
||||
});
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Patient updated successfully!",
|
||||
@@ -189,7 +220,15 @@ export function PatientTable({
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsDeletePatientOpen(false);
|
||||
queryClient.invalidateQueries({ queryKey: ["patients", currentPage] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [
|
||||
"patients",
|
||||
{
|
||||
page: currentPage,
|
||||
search: debouncedSearchCriteria?.searchTerm || "recent",
|
||||
},
|
||||
],
|
||||
});
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Patient deleted successfully!",
|
||||
@@ -305,6 +344,7 @@ export function PatientTable({
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{allowCheckbox && <TableHead>Select</TableHead>}
|
||||
<TableHead>Patient</TableHead>
|
||||
<TableHead>DOB / Gender</TableHead>
|
||||
<TableHead>Contact</TableHead>
|
||||
@@ -344,6 +384,15 @@ export function PatientTable({
|
||||
) : (
|
||||
patientsData?.patients.map((patient) => (
|
||||
<TableRow key={patient.id} className="hover:bg-gray-50">
|
||||
{allowCheckbox && (
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedPatientId === patient.id}
|
||||
onCheckedChange={() => handleSelectPatient(patient)}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
<Avatar
|
||||
@@ -393,7 +442,7 @@ export function PatientTable({
|
||||
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
|
||||
patient.status === "active"
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
)}
|
||||
>
|
||||
{patient.status === "active" ? "Active" : "Inactive"}
|
||||
@@ -498,7 +547,7 @@ export function PatientTable({
|
||||
className={`${
|
||||
currentPatient.status === "active"
|
||||
? "text-green-600"
|
||||
: "text-amber-600"
|
||||
: "text-red-600"
|
||||
} font-medium`}
|
||||
>
|
||||
{currentPatient.status.charAt(0).toUpperCase() +
|
||||
|
||||
@@ -3,21 +3,24 @@ import { DayPicker } from "react-day-picker";
|
||||
import type { DateRange } from "react-day-picker";
|
||||
import "react-day-picker/style.css";
|
||||
|
||||
type BaseProps = Omit<React.ComponentProps<typeof DayPicker>, 'mode' | 'selected' | 'onSelect'>;
|
||||
type BaseProps = Omit<
|
||||
React.ComponentProps<typeof DayPicker>,
|
||||
"mode" | "selected" | "onSelect"
|
||||
>;
|
||||
|
||||
type CalendarProps =
|
||||
| (BaseProps & {
|
||||
mode: 'single';
|
||||
mode: "single";
|
||||
selected?: Date;
|
||||
onSelect?: (date: Date | undefined) => void;
|
||||
})
|
||||
| (BaseProps & {
|
||||
mode: 'range';
|
||||
mode: "range";
|
||||
selected?: DateRange;
|
||||
onSelect?: (range: DateRange | undefined) => void;
|
||||
})
|
||||
| (BaseProps & {
|
||||
mode: 'multiple';
|
||||
mode: "multiple";
|
||||
selected?: Date[];
|
||||
onSelect?: (dates: Date[] | undefined) => void;
|
||||
});
|
||||
@@ -25,7 +28,8 @@ type CalendarProps =
|
||||
export function Calendar(props: CalendarProps) {
|
||||
const { mode, selected, onSelect, className, ...rest } = props;
|
||||
|
||||
const [internalSelected, setInternalSelected] = useState<typeof selected>(selected);
|
||||
const [internalSelected, setInternalSelected] =
|
||||
useState<typeof selected>(selected);
|
||||
|
||||
useEffect(() => {
|
||||
setInternalSelected(selected);
|
||||
@@ -38,23 +42,24 @@ export function Calendar(props: CalendarProps) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${className || ''} day-picker-small-scale`}
|
||||
className={`${className || ""} day-picker-small-scale`}
|
||||
style={{
|
||||
transform: 'scale(0.9)',
|
||||
transformOrigin: 'top left',
|
||||
width: 'fit-content',
|
||||
height: 'fit-content',
|
||||
transform: "scale(0.9)",
|
||||
transformOrigin: "top left",
|
||||
width: "fit-content",
|
||||
height: "fit-content",
|
||||
}}
|
||||
>
|
||||
{mode === 'single' && (
|
||||
{mode === "single" && (
|
||||
<DayPicker
|
||||
mode="single"
|
||||
selected={internalSelected as Date | undefined}
|
||||
onSelect={handleSelect as (date: Date | undefined) => void}
|
||||
captionLayout="dropdown" // ✅ Enables month/year dropdown
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
{mode === 'range' && (
|
||||
{mode === "range" && (
|
||||
<DayPicker
|
||||
mode="range"
|
||||
selected={internalSelected as DateRange | undefined}
|
||||
@@ -62,7 +67,7 @@ export function Calendar(props: CalendarProps) {
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
{mode === 'multiple' && (
|
||||
{mode === "multiple" && (
|
||||
<DayPicker
|
||||
mode="multiple"
|
||||
selected={internalSelected as Date[] | undefined}
|
||||
|
||||
@@ -64,4 +64,12 @@
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
.day-picker-small-scale select {
|
||||
@apply text-sm text-gray-900 bg-white border border-gray-300 rounded-md focus:outline-none focus:border-blue-600 focus:ring-1 focus:ring-blue-600;
|
||||
height: 32px; /* Fixed height: ~h-8 */
|
||||
line-height: 1.25rem; /* To align text nicely */
|
||||
padding: 0 0.5rem; /* Override padding */
|
||||
min-width: 6rem; /* Prevent shrinking */
|
||||
appearance: none; /* Removes native styling */
|
||||
}
|
||||
|
||||
@@ -1,35 +1,23 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { TopAppBar } from "@/components/layout/top-app-bar";
|
||||
import { Sidebar } from "@/components/layout/sidebar";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Search,
|
||||
Edit,
|
||||
Eye,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Settings,
|
||||
CheckCircle
|
||||
} from "lucide-react";
|
||||
import { CheckCircle } from "lucide-react";
|
||||
import { PatientUncheckedCreateInputObjectSchema } from "@repo/db/usedSchemas";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { CredentialsModal } from "@/components/insurance/credentials-modal";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {z} from 'zod';
|
||||
import { z } from "zod";
|
||||
import { PatientTable } from "@/components/patients/patient-table";
|
||||
|
||||
const PatientSchema = (
|
||||
PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
|
||||
@@ -40,53 +28,59 @@ type Patient = z.infer<typeof PatientSchema>;
|
||||
|
||||
export default function InsuranceEligibilityPage() {
|
||||
const { user } = useAuth();
|
||||
const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
|
||||
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [searchField, setSearchField] = useState("all");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 5;
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
};
|
||||
|
||||
// Insurance eligibility check form fields
|
||||
const [memberId, setMemberId] = useState("");
|
||||
const [dateOfBirth, setDateOfBirth] = useState("");
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
|
||||
|
||||
// Selected patient for insurance check
|
||||
const [selectedPatientId, setSelectedPatientId] = useState<number | null>(null);
|
||||
|
||||
const [selectedPatientId, setSelectedPatientId] = useState<number | null>(
|
||||
null
|
||||
);
|
||||
|
||||
// Insurance automation states
|
||||
const [isCredentialsModalOpen, setIsCredentialsModalOpen] = useState(false);
|
||||
const [selectedProvider, setSelectedProvider] = useState("");
|
||||
const { toast } = useToast();
|
||||
|
||||
// Insurance eligibility check mutation
|
||||
const checkInsuranceMutation = useMutation({
|
||||
mutationFn: async ({ provider, patientId, credentials }: {
|
||||
mutationFn: async ({
|
||||
provider,
|
||||
patientId,
|
||||
credentials,
|
||||
}: {
|
||||
provider: string;
|
||||
patientId: number;
|
||||
credentials: { username: string; password: string };
|
||||
}) => {
|
||||
const response = await fetch('/api/insurance/check', {
|
||||
method: 'POST',
|
||||
const response = await fetch("/api/insurance/check", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ provider, patientId, credentials }),
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to check insurance');
|
||||
throw new Error("Failed to check insurance");
|
||||
}
|
||||
|
||||
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: (result) => {
|
||||
toast({
|
||||
title: "Insurance Check Complete",
|
||||
description: result.isEligible ?
|
||||
`Patient is eligible. Plan: ${result.planName}` :
|
||||
"Patient eligibility could not be verified",
|
||||
description: result.isEligible
|
||||
? `Patient is eligible. Plan: ${result.planName}`
|
||||
: "Patient eligibility could not be verified",
|
||||
});
|
||||
},
|
||||
onError: (error: any) => {
|
||||
@@ -98,150 +92,41 @@ export default function InsuranceEligibilityPage() {
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch patients
|
||||
const {
|
||||
data: patients = [],
|
||||
isLoading: isLoadingPatients,
|
||||
} = useQuery<Patient[]>({
|
||||
queryKey: ["/api/patients"],
|
||||
enabled: !!user,
|
||||
});
|
||||
|
||||
// Filter patients based on search
|
||||
const filteredPatients = patients.filter(patient => {
|
||||
if (!searchTerm) return true;
|
||||
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const fullName = `${patient.firstName} ${patient.lastName}`.toLowerCase();
|
||||
const patientId = `PID-${patient.id.toString().padStart(4, '0')}`;
|
||||
|
||||
switch (searchField) {
|
||||
case "name":
|
||||
return fullName.includes(searchLower);
|
||||
case "id":
|
||||
return patientId.toLowerCase().includes(searchLower);
|
||||
case "phone":
|
||||
return patient.phone?.toLowerCase().includes(searchLower) || false;
|
||||
case "all":
|
||||
default:
|
||||
return (
|
||||
fullName.includes(searchLower) ||
|
||||
patientId.toLowerCase().includes(searchLower) ||
|
||||
patient.phone?.toLowerCase().includes(searchLower) ||
|
||||
patient.email?.toLowerCase().includes(searchLower) ||
|
||||
false
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Pagination
|
||||
const totalPages = Math.ceil(filteredPatients.length / itemsPerPage);
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
const currentPatients = filteredPatients.slice(startIndex, endIndex);
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
const getPatientInitials = (firstName: string, lastName: string) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
};
|
||||
|
||||
// Toggle patient selection
|
||||
const togglePatientSelection = (patientId: number) => {
|
||||
setSelectedPatientId(selectedPatientId === patientId ? null : patientId);
|
||||
};
|
||||
|
||||
// Handle insurance provider button clicks
|
||||
const handleProviderClick = (providerName: string) => {
|
||||
if (!selectedPatientId) {
|
||||
toast({
|
||||
title: "No Patient Selected",
|
||||
description: "Please select a patient first by checking the box next to their name.",
|
||||
description:
|
||||
"Please select a patient first by checking the box next to their name.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setSelectedProvider(providerName);
|
||||
setIsCredentialsModalOpen(true);
|
||||
};
|
||||
|
||||
// Handle credentials submission and start automation
|
||||
const handleCredentialsSubmit = (credentials: { username: string; password: string }) => {
|
||||
if (selectedPatientId && selectedProvider) {
|
||||
// Use the provided MH credentials for MH provider
|
||||
const finalCredentials = selectedProvider.toLowerCase() === 'mh' ? {
|
||||
username: 'kqkgaox@yahoo.com',
|
||||
password: 'Lex123456'
|
||||
} : credentials;
|
||||
|
||||
checkInsuranceMutation.mutate({
|
||||
provider: selectedProvider,
|
||||
patientId: selectedPatientId,
|
||||
credentials: finalCredentials,
|
||||
});
|
||||
}
|
||||
setIsCredentialsModalOpen(false);
|
||||
};
|
||||
|
||||
const handleEligibilityCheck = () => {
|
||||
// TODO: Implement insurance eligibility check
|
||||
console.log("Checking MH eligibility:", { memberId, dateOfBirth, firstName, lastName });
|
||||
};
|
||||
|
||||
const handleDeltaMACheck = () => {
|
||||
// TODO: Implement Delta MA eligibility check
|
||||
console.log("Checking Delta MA eligibility:", { memberId, dateOfBirth, firstName, lastName });
|
||||
};
|
||||
|
||||
const handleMetlifeDentalCheck = () => {
|
||||
// TODO: Implement Metlife Dental eligibility check
|
||||
console.log("Checking Metlife Dental eligibility:", { memberId, dateOfBirth, firstName, lastName });
|
||||
};
|
||||
|
||||
const handlePatientSelect = (patientId: number) => {
|
||||
const patient = patients.find(p => p.id === patientId);
|
||||
if (patient) {
|
||||
setSelectedPatientId(patientId);
|
||||
// Auto-fill form fields with selected patient data
|
||||
setMemberId(patient.insuranceId || "");
|
||||
setDateOfBirth(patient.dateOfBirth || "");
|
||||
setFirstName(patient.firstName || "");
|
||||
setLastName(patient.lastName || "");
|
||||
} else {
|
||||
setSelectedPatientId(null);
|
||||
// Clear form fields
|
||||
setMemberId("");
|
||||
setDateOfBirth("");
|
||||
setFirstName("");
|
||||
setLastName("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-50">
|
||||
<Sidebar isMobileOpen={isMobileMenuOpen} setIsMobileOpen={setIsMobileMenuOpen} />
|
||||
|
||||
<Sidebar
|
||||
isMobileOpen={isMobileMenuOpen}
|
||||
setIsMobileOpen={setIsMobileMenuOpen}
|
||||
/>
|
||||
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<TopAppBar toggleMobileMenu={toggleMobileMenu} />
|
||||
|
||||
|
||||
<main className="flex-1 overflow-auto p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-semibold text-gray-900 mb-2">Insurance Eligibility</h1>
|
||||
<p className="text-gray-600">Check insurance eligibility and view patient information</p>
|
||||
<h1 className="text-2xl font-semibold text-gray-900 mb-2">
|
||||
Insurance Eligibility
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Check insurance eligibility and view patient information
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Insurance Eligibility Check Form */}
|
||||
@@ -288,236 +173,43 @@ export default function InsuranceEligibilityPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Button
|
||||
onClick={() => handleProviderClick('MH')}
|
||||
className="w-full"
|
||||
disabled={checkInsuranceMutation.isPending}
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 mr-2" />
|
||||
{checkInsuranceMutation.isPending && selectedProvider === 'MH' ? 'Checking...' : 'MH'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
onClick={() => handleProviderClick("MH")}
|
||||
className="w-full"
|
||||
disabled={checkInsuranceMutation.isPending}
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 mr-2" />
|
||||
{checkInsuranceMutation.isPending &&
|
||||
selectedProvider === "MH"
|
||||
? "Checking..."
|
||||
: "MH"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<Card className="mb-6">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Search patients..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Select value={searchField} onValueChange={setSearchField}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Fields</SelectItem>
|
||||
<SelectItem value="name">Name</SelectItem>
|
||||
<SelectItem value="id">Patient ID</SelectItem>
|
||||
<SelectItem value="phone">Phone</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" size="sm">
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Advanced
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Patient List */}
|
||||
{/* Patients Table */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{isLoadingPatients ? (
|
||||
<div className="text-center py-8">Loading patients...</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Table Header */}
|
||||
<div className="grid grid-cols-12 gap-4 p-4 bg-gray-50 border-b text-sm font-medium text-gray-600">
|
||||
<div className="col-span-1">Select</div>
|
||||
<div className="col-span-3">Patient</div>
|
||||
<div className="col-span-2">DOB / Gender</div>
|
||||
<div className="col-span-2">Contact</div>
|
||||
<div className="col-span-2">Insurance</div>
|
||||
<div className="col-span-1">Status</div>
|
||||
<div className="col-span-1">Actions</div>
|
||||
</div>
|
||||
|
||||
{/* Table Rows */}
|
||||
{currentPatients.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
{searchTerm ? "No patients found matching your search." : "No patients available."}
|
||||
</div>
|
||||
) : (
|
||||
currentPatients.map((patient) => (
|
||||
<div
|
||||
key={patient.id}
|
||||
className={cn(
|
||||
"grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50 transition-colors",
|
||||
selectedPatientId === patient.id && "bg-blue-50 border-blue-200"
|
||||
)}
|
||||
>
|
||||
{/* Select Checkbox */}
|
||||
<div className="col-span-1 flex items-center">
|
||||
<Checkbox
|
||||
checked={selectedPatientId === patient.id}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
handlePatientSelect(patient.id);
|
||||
} else {
|
||||
handlePatientSelect(0); // This will clear the selection
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Patient Info */}
|
||||
<div className="col-span-3 flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-sm font-medium text-gray-600">
|
||||
{getPatientInitials(patient.firstName, patient.lastName)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">
|
||||
{patient.firstName} {patient.lastName}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
PID-{patient.id.toString().padStart(4, '0')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DOB / Gender */}
|
||||
<div className="col-span-2">
|
||||
<div className="text-sm text-gray-900">
|
||||
{formatDate(patient.dateOfBirth)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 capitalize">
|
||||
{patient.gender}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="col-span-2">
|
||||
<div className="text-sm text-gray-900">
|
||||
{patient.phone || 'Not provided'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{patient.email || 'No email'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Insurance */}
|
||||
<div className="col-span-2">
|
||||
<div className="text-sm text-gray-900">
|
||||
{patient.insuranceProvider ?
|
||||
`${patient.insuranceProvider.charAt(0).toUpperCase()}${patient.insuranceProvider.slice(1)}` :
|
||||
'Not specified'
|
||||
}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
ID: {patient.insuranceId || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="col-span-1">
|
||||
<span className={cn(
|
||||
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
|
||||
patient.status === 'active'
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
)}>
|
||||
{patient.status === 'active' ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="col-span-1">
|
||||
<div className="flex space-x-1">
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||
<Edit className="h-4 w-4 text-blue-600" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||
<Eye className="h-4 w-4 text-gray-600" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between p-4 border-t bg-gray-50">
|
||||
<div className="text-sm text-gray-700">
|
||||
Showing {startIndex + 1} to {Math.min(endIndex, filteredPatients.length)} of {filteredPatients.length} results
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 mr-1" />
|
||||
Previous
|
||||
</Button>
|
||||
|
||||
{/* Page Numbers */}
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
variant={currentPage === page ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className="w-8 h-8 p-0"
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
Next
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<CardHeader>
|
||||
<CardTitle>Patient Records</CardTitle>
|
||||
<CardDescription>
|
||||
Select Patients and Check Their Eligibility
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PatientTable
|
||||
allowView={true}
|
||||
allowDelete={true}
|
||||
allowCheckbox={true}
|
||||
allowEdit={true}
|
||||
onSelectPatient={setSelectedPatient}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Credentials Modal */}
|
||||
<CredentialsModal
|
||||
isOpen={isCredentialsModalOpen}
|
||||
onClose={() => setIsCredentialsModalOpen(false)}
|
||||
onSubmit={handleCredentialsSubmit}
|
||||
providerName={selectedProvider}
|
||||
isLoading={checkInsuranceMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user