dates utils used
This commit is contained in:
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
|
|||||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||||
import { format, addDays, startOfToday, addMinutes } from "date-fns";
|
import { format, addDays, startOfToday, addMinutes } from "date-fns";
|
||||||
import {
|
import {
|
||||||
parseLocalDateString,
|
parseLocalDate,
|
||||||
formatLocalDate,
|
formatLocalDate,
|
||||||
normalizeToISOString,
|
normalizeToISOString,
|
||||||
} from "@/utils/dateUtils";
|
} from "@/utils/dateUtils";
|
||||||
@@ -200,7 +200,7 @@ export default function AppointmentsPage() {
|
|||||||
// Calculate end time (30 minutes after start time)
|
// Calculate end time (30 minutes after start time)
|
||||||
const startHour = parseInt(timeSlot.time.split(":")[0] as string);
|
const startHour = parseInt(timeSlot.time.split(":")[0] as string);
|
||||||
const startMinute = parseInt(timeSlot.time.split(":")[1] as string);
|
const startMinute = parseInt(timeSlot.time.split(":")[1] as string);
|
||||||
const startDate = new Date(selectedDate);
|
const startDate = parseLocalDate(selectedDate);
|
||||||
startDate.setHours(startHour, startMinute, 0);
|
startDate.setHours(startHour, startMinute, 0);
|
||||||
|
|
||||||
const endDate = addMinutes(startDate, 30);
|
const endDate = addMinutes(startDate, 30);
|
||||||
@@ -377,7 +377,7 @@ export default function AppointmentsPage() {
|
|||||||
) => {
|
) => {
|
||||||
// Converts local date to exact UTC date with no offset issues
|
// Converts local date to exact UTC date with no offset issues
|
||||||
|
|
||||||
const rawDate = parseLocalDateString(appointmentData.date);
|
const rawDate = parseLocalDate(appointmentData.date);
|
||||||
|
|
||||||
const updatedData = {
|
const updatedData = {
|
||||||
...appointmentData,
|
...appointmentData,
|
||||||
@@ -439,12 +439,8 @@ export default function AppointmentsPage() {
|
|||||||
const formattedDate = format(selectedDate, "yyyy-MM-dd");
|
const formattedDate = format(selectedDate, "yyyy-MM-dd");
|
||||||
|
|
||||||
const selectedDateAppointments = appointments.filter((appointment) => {
|
const selectedDateAppointments = appointments.filter((appointment) => {
|
||||||
const dateObj =
|
const dateObj = parseLocalDate(appointment.date)
|
||||||
typeof appointment.date === "string"
|
return formatLocalDate(dateObj) === formatLocalDate(selectedDate);
|
||||||
? parseLocalDateString(appointment.date)
|
|
||||||
: appointment.date;
|
|
||||||
|
|
||||||
return formatLocalDate(dateObj) === formatLocalDate(selectedDate); // formattedDate should be 'yyyy-MM-dd' string in UTC format as well
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Process appointments for the scheduler view
|
// Process appointments for the scheduler view
|
||||||
@@ -473,11 +469,8 @@ export default function AppointmentsPage() {
|
|||||||
...apt,
|
...apt,
|
||||||
patientName,
|
patientName,
|
||||||
staffId,
|
staffId,
|
||||||
status: apt.status ?? null, // Default to null if status is undefined
|
status: apt.status ?? null,
|
||||||
date:
|
date: formatLocalDate(parseLocalDate(apt.date))
|
||||||
apt.date instanceof Date
|
|
||||||
? formatLocalDate(apt.date)
|
|
||||||
: formatLocalDate(new Date(apt.date)),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return processed;
|
return processed;
|
||||||
@@ -529,7 +522,7 @@ export default function AppointmentsPage() {
|
|||||||
// Calculate new end time (30 minutes from start)
|
// Calculate new end time (30 minutes from start)
|
||||||
const startHour = parseInt(newTimeSlot.time.split(":")[0] as string);
|
const startHour = parseInt(newTimeSlot.time.split(":")[0] as string);
|
||||||
const startMinute = parseInt(newTimeSlot.time.split(":")[1] as string);
|
const startMinute = parseInt(newTimeSlot.time.split(":")[1] as string);
|
||||||
const startDate = new Date(selectedDate);
|
const startDate = parseLocalDate(selectedDate);
|
||||||
startDate.setHours(startHour, startMinute, 0);
|
startDate.setHours(startHour, startMinute, 0);
|
||||||
|
|
||||||
const endDate = addMinutes(startDate, 30);
|
const endDate = addMinutes(startDate, 30);
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ import {
|
|||||||
clearTaskStatus,
|
clearTaskStatus,
|
||||||
} from "@/redux/slices/seleniumClaimSubmitTaskSlice";
|
} from "@/redux/slices/seleniumClaimSubmitTaskSlice";
|
||||||
import { SeleniumTaskBanner } from "@/components/claims/selenium-task-banner";
|
import { SeleniumTaskBanner } from "@/components/claims/selenium-task-banner";
|
||||||
|
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
|
||||||
|
|
||||||
//creating types out of schema auto generated.
|
//creating types out of schema auto generated.
|
||||||
type Appointment = z.infer<typeof AppointmentUncheckedCreateInputObjectSchema>;
|
type Appointment = z.infer<typeof AppointmentUncheckedCreateInputObjectSchema>;
|
||||||
@@ -223,34 +224,11 @@ export default function ClaimsPage() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Converts local date to exact UTC date with no offset issues
|
|
||||||
function parseLocalDate(dateInput: Date | string): Date {
|
|
||||||
if (dateInput instanceof Date) return dateInput;
|
|
||||||
|
|
||||||
const dateString = dateInput.split("T")[0] || dateInput;
|
|
||||||
|
|
||||||
const parts = dateString.split("-");
|
|
||||||
if (parts.length !== 3) {
|
|
||||||
throw new Error(`Invalid date format: ${dateString}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const year = Number(parts[0]);
|
|
||||||
const month = Number(parts[1]);
|
|
||||||
const day = Number(parts[2]);
|
|
||||||
|
|
||||||
if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day)) {
|
|
||||||
throw new Error(`Invalid date parts in date string: ${dateString}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Date(year, month - 1, day); // month is 0-indexed
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAppointmentSubmit = async (
|
const handleAppointmentSubmit = async (
|
||||||
appointmentData: InsertAppointment | UpdateAppointment
|
appointmentData: InsertAppointment | UpdateAppointment
|
||||||
): Promise<number> => {
|
): Promise<number> => {
|
||||||
const rawDate = parseLocalDate(appointmentData.date);
|
const rawDate = parseLocalDate(appointmentData.date);
|
||||||
|
const formattedDate = formatLocalDate(rawDate);
|
||||||
const formattedDate = rawDate.toLocaleDateString("en-CA"); // YYYY-MM-DD format
|
|
||||||
|
|
||||||
// Prepare minimal data to update/create
|
// Prepare minimal data to update/create
|
||||||
const minimalData = {
|
const minimalData = {
|
||||||
@@ -264,7 +242,7 @@ export default function ClaimsPage() {
|
|||||||
const existingAppointment = appointments.find(
|
const existingAppointment = appointments.find(
|
||||||
(a) =>
|
(a) =>
|
||||||
a.patientId === appointmentData.patientId &&
|
a.patientId === appointmentData.patientId &&
|
||||||
new Date(a.date).toLocaleDateString("en-CA") === formattedDate
|
formatLocalDate(parseLocalDate(a.date)) === formattedDate
|
||||||
);
|
);
|
||||||
|
|
||||||
if (existingAppointment && typeof existingAppointment.id === "number") {
|
if (existingAppointment && typeof existingAppointment.id === "number") {
|
||||||
@@ -374,18 +352,21 @@ export default function ClaimsPage() {
|
|||||||
const prefillClaimForm = (patient: Patient) => {
|
const prefillClaimForm = (patient: Patient) => {
|
||||||
const patientAppointments = appointments
|
const patientAppointments = appointments
|
||||||
.filter((a) => a.patientId === patient.id)
|
.filter((a) => a.patientId === patient.id)
|
||||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
.sort(
|
||||||
|
(a, b) =>
|
||||||
|
parseLocalDate(b.date).getTime() - parseLocalDate(a.date).getTime()
|
||||||
|
);
|
||||||
|
|
||||||
const lastAppointment = patientAppointments[0]; // most recent
|
const lastAppointment = patientAppointments[0]; // most recent
|
||||||
|
|
||||||
const dateToUse = lastAppointment
|
const dateToUse = lastAppointment
|
||||||
? parseLocalDate(lastAppointment.date)
|
? parseLocalDate(lastAppointment.date)
|
||||||
: new Date();
|
: parseLocalDate(new Date());
|
||||||
|
|
||||||
setClaimFormData((prev: any) => ({
|
setClaimFormData((prev: any) => ({
|
||||||
...prev,
|
...prev,
|
||||||
patientId: patient.id,
|
patientId: patient.id,
|
||||||
serviceDate: dateToUse.toLocaleDateString("en-CA"), // consistent "YYYY-MM-DD"
|
serviceDate: formatLocalDate(dateToUse)
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -405,14 +386,11 @@ export default function ClaimsPage() {
|
|||||||
const lastName = rest.join(" ") || "";
|
const lastName = rest.join(" ") || "";
|
||||||
|
|
||||||
const parsedDob = parse(dob, "M/d/yyyy", new Date()); // robust for "4/17/1964", "12/1/1975", etc.
|
const parsedDob = parse(dob, "M/d/yyyy", new Date()); // robust for "4/17/1964", "12/1/1975", etc.
|
||||||
const isValidDob = !isNaN(parsedDob.getTime());
|
|
||||||
|
|
||||||
const newPatient: InsertPatient = {
|
const newPatient: InsertPatient = {
|
||||||
firstName,
|
firstName,
|
||||||
lastName,
|
lastName,
|
||||||
dateOfBirth: isValidDob
|
dateOfBirth: formatLocalDate(parsedDob),
|
||||||
? format(parsedDob, "yyyy-MM-dd")
|
|
||||||
: format(new Date(), "yyyy-MM-dd"),
|
|
||||||
gender: "",
|
gender: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
userId: user?.id ?? 1,
|
userId: user?.id ?? 1,
|
||||||
@@ -447,7 +425,8 @@ export default function ClaimsPage() {
|
|||||||
const patientAppointments = appointments
|
const patientAppointments = appointments
|
||||||
.filter((appt) => appt.patientId === patient.id)
|
.filter((appt) => appt.patientId === patient.id)
|
||||||
.sort(
|
.sort(
|
||||||
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
|
(a, b) =>
|
||||||
|
parseLocalDate(b.date).getTime() - parseLocalDate(a.date).getTime()
|
||||||
); // Sort descending by date
|
); // Sort descending by date
|
||||||
|
|
||||||
if (patientAppointments.length > 0) {
|
if (patientAppointments.length > 0) {
|
||||||
@@ -458,7 +437,7 @@ export default function ClaimsPage() {
|
|||||||
appointmentId: latestAppointment!.id,
|
appointmentId: latestAppointment!.id,
|
||||||
insuranceProvider: patient.insuranceProvider || "N/A",
|
insuranceProvider: patient.insuranceProvider || "N/A",
|
||||||
insuranceId: patient.insuranceId || "N/A",
|
insuranceId: patient.insuranceId || "N/A",
|
||||||
lastAppointment: String(latestAppointment!.date),
|
lastAppointment: formatLocalDate(parseLocalDate(latestAppointment!.date)),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -26,6 +26,7 @@ import {
|
|||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Link } from "wouter";
|
import { Link } from "wouter";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
|
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
|
||||||
|
|
||||||
//creating types out of schema auto generated.
|
//creating types out of schema auto generated.
|
||||||
type Appointment = z.infer<typeof AppointmentUncheckedCreateInputObjectSchema>;
|
type Appointment = z.infer<typeof AppointmentUncheckedCreateInputObjectSchema>;
|
||||||
@@ -63,7 +64,6 @@ const insertPatientSchema = (
|
|||||||
});
|
});
|
||||||
type InsertPatient = z.infer<typeof insertPatientSchema>;
|
type InsertPatient = z.infer<typeof insertPatientSchema>;
|
||||||
|
|
||||||
|
|
||||||
// Type for the ref to access modal methods
|
// Type for the ref to access modal methods
|
||||||
type AddPatientModalRef = {
|
type AddPatientModalRef = {
|
||||||
shouldSchedule: boolean;
|
shouldSchedule: boolean;
|
||||||
@@ -151,9 +151,7 @@ export default function Dashboard() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const isLoading =
|
const isLoading = isLoadingPatients || addPatientMutation.isPending;
|
||||||
isLoadingPatients ||
|
|
||||||
addPatientMutation.isPending;
|
|
||||||
|
|
||||||
// Create appointment mutation
|
// Create appointment mutation
|
||||||
const createAppointmentMutation = useMutation({
|
const createAppointmentMutation = useMutation({
|
||||||
@@ -235,24 +233,10 @@ export default function Dashboard() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Since we removed filters, just return all patients
|
// Since we removed filters, just return all patients
|
||||||
const filteredPatients = patients;
|
const today = formatLocalDate(new Date());
|
||||||
const now = new Date();
|
|
||||||
const todayUTC = `${now.getUTCFullYear()}-${String(now.getUTCMonth() + 1).padStart(2, "0")}-${String(now.getUTCDate()).padStart(2, "0")}`;
|
|
||||||
|
|
||||||
const todaysAppointments = appointments.filter((appointment) => {
|
const todaysAppointments = appointments.filter((appointment) => {
|
||||||
const dateObj =
|
const parsedDate = parseLocalDate(appointment.date);
|
||||||
typeof appointment.date === "string"
|
return formatLocalDate(parsedDate) === today;
|
||||||
? parseISO(appointment.date)
|
|
||||||
: appointment.date;
|
|
||||||
|
|
||||||
// Extract UTC year, month, day from appointment date
|
|
||||||
const year = dateObj.getUTCFullYear();
|
|
||||||
const month = dateObj.getUTCMonth();
|
|
||||||
const day = dateObj.getUTCDate();
|
|
||||||
|
|
||||||
const appointmentUTCDate = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
|
||||||
|
|
||||||
return appointmentUTCDate === todayUTC;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Count completed appointments today
|
// Count completed appointments today
|
||||||
|
|||||||
@@ -1,474 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useMutation, useQuery } 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 } from "@/components/ui/card";
|
|
||||||
import {
|
|
||||||
Search,
|
|
||||||
Eye,
|
|
||||||
ChevronLeft,
|
|
||||||
ChevronRight,
|
|
||||||
Settings,
|
|
||||||
Trash,
|
|
||||||
Download,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { ClaimPdfUncheckedCreateInputObjectSchema } from "@repo/db/usedSchemas";
|
|
||||||
import { z } from "zod";
|
|
||||||
import "@react-pdf-viewer/core/lib/styles/index.css";
|
|
||||||
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
|
|
||||||
import { Viewer, Worker } from "@react-pdf-viewer/core";
|
|
||||||
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
|
|
||||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
|
||||||
import { toast } from "@/hooks/use-toast";
|
|
||||||
import { DeleteConfirmationDialog } from "@/components/ui/deleteDialog";
|
|
||||||
|
|
||||||
const ClaimPdfSchema =
|
|
||||||
ClaimPdfUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>;
|
|
||||||
type ClaimPdf = z.infer<typeof ClaimPdfSchema>;
|
|
||||||
|
|
||||||
export default function DocumentsPage() {
|
|
||||||
const { user } = useAuth();
|
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
|
||||||
const [searchField, setSearchField] = useState("all");
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const itemsPerPage = 5;
|
|
||||||
const [selectedPdfId, setSelectedPdfId] = useState<number | null>(null);
|
|
||||||
const defaultLayoutPluginInstance = defaultLayoutPlugin();
|
|
||||||
const [isDeletePdfOpen, setIsDeletePdfOpen] = useState(false);
|
|
||||||
const [currentPdf, setCurrentPdf] = useState<ClaimPdf | null>(null);
|
|
||||||
|
|
||||||
const { data: pdfs = [], isLoading } = useQuery<ClaimPdf[]>({
|
|
||||||
queryKey: ["/api/documents/claim-pdf/recent"],
|
|
||||||
enabled: !!user,
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await apiRequest("GET", "/api/documents/claim-pdf/recent");
|
|
||||||
return res.json();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const deletePdfMutation = useMutation({
|
|
||||||
mutationFn: async (id: number) => {
|
|
||||||
await apiRequest("DELETE", `/api/documents/claim-pdf/${id}`);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
setIsDeletePdfOpen(false);
|
|
||||||
setCurrentPdf(null);
|
|
||||||
queryClient.invalidateQueries({
|
|
||||||
queryKey: ["/api/documents/claim-pdf/recent"],
|
|
||||||
});
|
|
||||||
|
|
||||||
toast({
|
|
||||||
title: "Success",
|
|
||||||
description: "PDF deleted successfully!",
|
|
||||||
variant: "default",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onError: (error: any) => {
|
|
||||||
console.error("Error deleting PDF:", error);
|
|
||||||
toast({
|
|
||||||
title: "Error",
|
|
||||||
description: `Failed to delete PDF: ${error.message || error}`,
|
|
||||||
variant: "destructive",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const formatDate = (dateString: string) => {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleDateString("en-US", {
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
year: "numeric",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const getPatientInitials = (first: string, last: string) =>
|
|
||||||
`${first[0]}${last[0]}`.toUpperCase();
|
|
||||||
|
|
||||||
const [fileBlobUrl, setFileBlobUrl] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!selectedPdfId) return;
|
|
||||||
let url: string | null = null;
|
|
||||||
|
|
||||||
const fetchPdf = async () => {
|
|
||||||
try {
|
|
||||||
const res = await apiRequest(
|
|
||||||
"GET",
|
|
||||||
`/api/documents/claim-pdf/${selectedPdfId}`
|
|
||||||
);
|
|
||||||
|
|
||||||
const arrayBuffer = await res.arrayBuffer();
|
|
||||||
const blob = new Blob([arrayBuffer], { type: "application/pdf" });
|
|
||||||
const objectUrl = URL.createObjectURL(blob);
|
|
||||||
setFileBlobUrl(objectUrl);
|
|
||||||
url = objectUrl;
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to load PDF", err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchPdf();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (url) {
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [selectedPdfId]);
|
|
||||||
|
|
||||||
const toggleMobileMenu = () => setIsMobileMenuOpen((prev) => !prev);
|
|
||||||
|
|
||||||
const viewPdf = (pdfId: number) => {
|
|
||||||
setSelectedPdfId(pdfId);
|
|
||||||
};
|
|
||||||
|
|
||||||
const downloadPdf = async (pdfId: number, filename: string) => {
|
|
||||||
try {
|
|
||||||
const res = await apiRequest("GET", `/api/documents/claim-pdf/${pdfId}`);
|
|
||||||
const arrayBuffer = await res.arrayBuffer();
|
|
||||||
const blob = new Blob([arrayBuffer], { type: "application/pdf" });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = url;
|
|
||||||
a.download = filename;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to download PDF:", err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeletePdf = (pdf: ClaimPdf) => {
|
|
||||||
setCurrentPdf(pdf);
|
|
||||||
setIsDeletePdfOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleConfirmDeletePdf = () => {
|
|
||||||
if (currentPdf) {
|
|
||||||
deletePdfMutation.mutate(currentPdf.id);
|
|
||||||
} else {
|
|
||||||
toast({
|
|
||||||
title: "Error",
|
|
||||||
description: "No PDF selected for deletion.",
|
|
||||||
variant: "destructive",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const filteredPdfs = pdfs.filter((pdf) => {
|
|
||||||
const patient = pdf.patient;
|
|
||||||
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.includes(searchLower) ||
|
|
||||||
patient.phone?.toLowerCase().includes(searchLower) ||
|
|
||||||
patient.email?.toLowerCase().includes(searchLower) ||
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalPages = Math.ceil(filteredPdfs.length / itemsPerPage);
|
|
||||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
||||||
const currentPdfs = filteredPdfs.slice(startIndex, startIndex + itemsPerPage);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-screen bg-gray-50">
|
|
||||||
<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">
|
|
||||||
<div className="mb-6">
|
|
||||||
<h1 className="text-2xl font-semibold text-gray-900 mb-2">
|
|
||||||
Documents
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
View and manage recent uploaded claim PDFs
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-0">
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="text-center py-8">Loading data...</div>
|
|
||||||
) : currentPdfs.length === 0 ? (
|
|
||||||
<div className="text-center py-8 text-gray-500">
|
|
||||||
{searchTerm
|
|
||||||
? "No results matching your search."
|
|
||||||
: "No recent claim PDFs available."}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<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-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-2">Status</div>
|
|
||||||
<div className="col-span-1">Actions</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{currentPdfs.map((pdf) => {
|
|
||||||
const patient = pdf.patient;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={pdf.id}
|
|
||||||
className="grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div className="col-span-2">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div className="col-span-1">
|
|
||||||
<div className="flex space-x-1">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="h-8 w-8 p-0"
|
|
||||||
onClick={() => handleDeletePdf(pdf)}
|
|
||||||
>
|
|
||||||
<Trash className="h-4 w-4 text-red-600" />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="h-8 w-8 p-0"
|
|
||||||
onClick={() =>
|
|
||||||
downloadPdf(pdf.id, pdf.filename)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Download className="h-4 w-4 text-blue-600" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="h-8 w-8 p-0"
|
|
||||||
onClick={() => viewPdf(pdf.id)}
|
|
||||||
>
|
|
||||||
<Eye className="h-4 w-4 text-gray-600" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
<DeleteConfirmationDialog
|
|
||||||
isOpen={isDeletePdfOpen}
|
|
||||||
onConfirm={handleConfirmDeletePdf}
|
|
||||||
onCancel={() => setIsDeletePdfOpen(false)}
|
|
||||||
entityName={`PDF #${currentPdf?.id}`}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* PDF Viewer */}
|
|
||||||
{selectedPdfId && fileBlobUrl && (
|
|
||||||
<div className="mt-6 border rounded-lg shadow-sm p-4 bg-white">
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-700">
|
|
||||||
Viewing PDF #{selectedPdfId}
|
|
||||||
</h2>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedPdfId(null);
|
|
||||||
setFileBlobUrl(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="h-[80vh] border">
|
|
||||||
<Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
|
|
||||||
<Viewer
|
|
||||||
fileUrl={fileBlobUrl}
|
|
||||||
plugins={[defaultLayoutPluginInstance]}
|
|
||||||
/>
|
|
||||||
</Worker>
|
|
||||||
</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(
|
|
||||||
startIndex + itemsPerPage,
|
|
||||||
filteredPdfs.length
|
|
||||||
)}{" "}
|
|
||||||
of {filteredPdfs.length} results
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setCurrentPage(currentPage - 1)}
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
>
|
|
||||||
<ChevronLeft className="h-4 w-4 mr-1" />
|
|
||||||
Previous
|
|
||||||
</Button>
|
|
||||||
{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(currentPage + 1)}
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
<ChevronRight className="h-4 w-4 ml-1" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -33,7 +33,7 @@ import {
|
|||||||
clearTaskStatus,
|
clearTaskStatus,
|
||||||
} from "@/redux/slices/seleniumEligibilityCheckTaskSlice";
|
} from "@/redux/slices/seleniumEligibilityCheckTaskSlice";
|
||||||
import { SeleniumTaskBanner } from "@/components/claims/selenium-task-banner";
|
import { SeleniumTaskBanner } from "@/components/claims/selenium-task-banner";
|
||||||
import { formatLocalDate, parseLocalDateString } from "@/utils/dateUtils";
|
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
|
||||||
|
|
||||||
const PatientSchema = (
|
const PatientSchema = (
|
||||||
PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
|
PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
|
||||||
@@ -85,7 +85,7 @@ export default function InsuranceEligibilityPage() {
|
|||||||
|
|
||||||
const dob =
|
const dob =
|
||||||
typeof selectedPatient.dateOfBirth === "string"
|
typeof selectedPatient.dateOfBirth === "string"
|
||||||
? parseLocalDateString(selectedPatient.dateOfBirth)
|
? parseLocalDate(selectedPatient.dateOfBirth)
|
||||||
: selectedPatient.dateOfBirth;
|
: selectedPatient.dateOfBirth;
|
||||||
setDateOfBirth(dob);
|
setDateOfBirth(dob);
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -2,10 +2,16 @@
|
|||||||
* Parse a date string in yyyy-MM-dd format (assumed local) into a JS Date object.
|
* Parse a date string in yyyy-MM-dd format (assumed local) into a JS Date object.
|
||||||
* No timezone conversion is applied. Returns a Date at midnight local time.
|
* No timezone conversion is applied. Returns a Date at midnight local time.
|
||||||
*/
|
*/
|
||||||
export function parseLocalDateString(dateStr: string): Date {
|
|
||||||
const parts = dateStr.split("-");
|
|
||||||
|
|
||||||
// Destructure with fallback
|
export function parseLocalDate(input: string | Date): Date {
|
||||||
|
if (input instanceof Date) {
|
||||||
|
return new Date(input.getFullYear(), input.getMonth(), input.getDate());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof input === "string") {
|
||||||
|
const dateString = input?.split("T")[0] ?? "";
|
||||||
|
const parts = dateString.split("-");
|
||||||
|
|
||||||
const [yearStr, monthStr, dayStr] = parts;
|
const [yearStr, monthStr, dayStr] = parts;
|
||||||
|
|
||||||
// Validate all parts are defined and valid strings
|
// Validate all parts are defined and valid strings
|
||||||
@@ -23,8 +29,10 @@ export function parseLocalDateString(dateStr: string): Date {
|
|||||||
|
|
||||||
return new Date(year, month, day);
|
return new Date(year, month, day);
|
||||||
}
|
}
|
||||||
|
throw new Error(
|
||||||
|
"Unsupported input to parseLocalDate. Expected string or Date."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Format a JS Date object as a `yyyy-MM-dd` string (in local time).
|
* Format a JS Date object as a `yyyy-MM-dd` string (in local time).
|
||||||
@@ -42,7 +50,9 @@ export function formatLocalDate(date: Date): string {
|
|||||||
* Useful for comparing or storing dates consistently across timezones.
|
* Useful for comparing or storing dates consistently across timezones.
|
||||||
*/
|
*/
|
||||||
export function toUTCDate(date: Date): Date {
|
export function toUTCDate(date: Date): Date {
|
||||||
return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
|
return new Date(
|
||||||
|
Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -50,23 +60,15 @@ export function toUTCDate(date: Date): Date {
|
|||||||
* and formats it as local yyyy-MM-dd string for UI use.
|
* and formats it as local yyyy-MM-dd string for UI use.
|
||||||
*/
|
*/
|
||||||
export function formatUTCDateStringToLocal(dateStr: string): string {
|
export function formatUTCDateStringToLocal(dateStr: string): string {
|
||||||
const date = new Date(dateStr); // still UTC
|
const localDate = parseLocalDate(dateStr); // will strip the time part
|
||||||
|
return formatLocalDate(localDate); // e.g., "2025-07-15"
|
||||||
// Create a local Date object with same year, month, day from UTC
|
|
||||||
const localDate = new Date(
|
|
||||||
date.getUTCFullYear(),
|
|
||||||
date.getUTCMonth(),
|
|
||||||
date.getUTCDate()
|
|
||||||
);
|
|
||||||
|
|
||||||
return formatLocalDate(localDate); // now safely in local time
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Ensure any date (Date|string) is formatted to ISO string for consistent backend storage.
|
* Ensure any date (Date|string) is formatted to ISO string for consistent backend storage.
|
||||||
* If it's already a string, pass through. If it's a Date, convert to ISO.
|
* If it's already a string, pass through. If it's a Date, convert to ISO.
|
||||||
*/
|
*/
|
||||||
export function normalizeToISOString(date: Date | string): string {
|
export function normalizeToISOString(date: Date | string): string {
|
||||||
return date instanceof Date ? date.toISOString() : date;
|
const parsed = parseLocalDate(date);
|
||||||
|
return parsed.toISOString(); // ensures it always starts from local midnight
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user