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

Merge branch 'feature/appointment-page' into develop

Browse Source
This commit is contained in:
Potenz
2025-09-14 18:41:02 +05:30
parent 531595ed31 aa3d3cac3a
commit 0f1c46ae42
12 changed files with 756 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/Frontend/src/components/appointments/add-appointment-modal.tsx
View File

@@ -8,7 +8,6 @@ import { AppointmentForm } from "./appointment-form";
import {
Appointment,
InsertAppointment,
Patient,
UpdateAppointment,
} from "@repo/db/types";
@@ -19,7 +18,6 @@ interface AddAppointmentModalProps {
onDelete?: (id: number) => void;
isLoading: boolean;
appointment?: Appointment;
patients: Patient[];
}
export function AddAppointmentModal({
@@ -29,7 +27,6 @@ export function AddAppointmentModal({
onDelete,
isLoading,
appointment,
patients,
}: AddAppointmentModalProps) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@@ -42,7 +39,6 @@ export function AddAppointmentModal({
<div className="p-1">
<AppointmentForm
appointment={appointment}
patients={patients}
onSubmit={(data) => {
onSubmit(data);
onOpenChange(false);

332
apps/Frontend/src/components/appointments/appointment-form.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { format } from "date-fns";
@@ -34,10 +34,15 @@ import {
UpdateAppointment,
} from "@repo/db/types";
import { DateInputField } from "@/components/ui/dateInputField";
import { parseLocalDate } from "@/utils/dateUtils";
import {
PatientSearch,
SearchCriteria,
} from "@/components/patients/patient-search";
import { toast } from "@/hooks/use-toast";
interface AppointmentFormProps {
appointment?: Appointment;
patients: Patient[];
onSubmit: (data: InsertAppointment | UpdateAppointment) => void;
onDelete?: (id: number) => void;
onOpenChange?: (open: boolean) => void;
@@ -46,7 +51,6 @@ interface AppointmentFormProps {
export function AppointmentForm({
appointment,
patients,
onSubmit,
onDelete,
onOpenChange,
@@ -54,6 +58,8 @@ export function AppointmentForm({
}: AppointmentFormProps) {
const { user } = useAuth();
const inputRef = useRef<HTMLInputElement>(null);
const [prefillPatient, setPrefillPatient] = useState<Patient | null>(null);
useEffect(() => {
const timeout = setTimeout(() => {
inputRef.current?.focus();
@@ -62,15 +68,14 @@ export function AppointmentForm({
return () => clearTimeout(timeout);
}, []);
const { data: staffMembersRaw = [] as Staff[], isLoading: isLoadingStaff } =
useQuery<Staff[]>({
queryKey: ["/api/staffs/"],
queryFn: async () => {
const res = await apiRequest("GET", "/api/staffs/");
return res.json();
},
enabled: !!user,
});
const { data: staffMembersRaw = [] as Staff[] } = useQuery<Staff[]>({
queryKey: ["/api/staffs/"],
queryFn: async () => {
const res = await apiRequest("GET", "/api/staffs/");
return res.json();
},
enabled: !!user,
});
const colorMap: Record<string, string> = {
"Dr. Kai Gao": "bg-blue-600",
@@ -82,23 +87,6 @@ export function AppointmentForm({
color: colorMap[staff.name] || "bg-gray-400",
}));
function parseLocalDate(dateString: string): Date {
const parts = dateString.split("-");
if (parts.length !== 3) {
return new Date();
}
const year = parseInt(parts[0] ?? "", 10);
const month = parseInt(parts[1] ?? "", 10);
const day = parseInt(parts[2] ?? "", 10);
if (isNaN(year) || isNaN(month) || isNaN(day)) {
return new Date();
}
// Create date at UTC midnight instead of local midnight
return new Date(year, month - 1, day);
}
// Get the stored data from session storage
const storedDataString = sessionStorage.getItem("newAppointmentData");
let parsedStoredData = null;
@@ -169,50 +157,159 @@ export function AppointmentForm({
defaultValues,
});
const [searchTerm, setSearchTerm] = useState("");
const [debouncedSearchTerm] = useDebounce(searchTerm, 200); // 1 seconds
const [filteredPatients, setFilteredPatients] = useState(patients);
// -----------------------------
// PATIENT SEARCH (reuse PatientSearch)
// -----------------------------
const [selectOpen, setSelectOpen] = useState(false);
useEffect(() => {
if (!debouncedSearchTerm.trim()) {
setFilteredPatients(patients);
// search criteria state (reused from patient page)
const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | null>(
null
);
const [isSearchActive, setIsSearchActive] = useState(false);
// debounce search criteria so we don't hammer the backend
const [debouncedSearchCriteria] = useDebounce(searchCriteria, 300);
const limit = 50; // dropdown size
const offset = 0; // always first page for dropdown
// compute key used in patient page: recent or trimmed term
const searchKeyPart = useMemo(
() => debouncedSearchCriteria?.searchTerm?.trim() || "recent",
[debouncedSearchCriteria]
);
// Query function mirrors PatientTable logic (so backend contract is identical)
const queryFn = async (): Promise<Patient[]> => {
const trimmedTerm = debouncedSearchCriteria?.searchTerm?.trim();
const isSearch = !!trimmedTerm && trimmedTerm.length > 0;
const rawSearchBy = debouncedSearchCriteria?.searchBy || "name";
const validSearchKeys = [
"name",
"phone",
"insuranceId",
"gender",
"dob",
"all",
];
const searchKey = validSearchKeys.includes(rawSearchBy)
? rawSearchBy
: "name";
let url: string;
if (isSearch) {
const searchParams = new URLSearchParams({
limit: String(limit),
offset: String(offset),
});
if (searchKey === "all") {
searchParams.set("term", trimmedTerm!);
} else {
searchParams.set(searchKey, trimmedTerm!);
}
url = `/api/patients/search?${searchParams.toString()}`;
} else {
const term = debouncedSearchTerm.toLowerCase();
setFilteredPatients(
patients.filter((p) =>
`${p.firstName} ${p.lastName} ${p.phone} ${p.dateOfBirth}`
.toLowerCase()
.includes(term)
)
);
url = `/api/patients/recent?limit=${limit}&offset=${offset}`;
}
}, [debouncedSearchTerm, patients]);
const res = await apiRequest("GET", url);
if (!res.ok) {
const err = await res
.json()
.catch(() => ({ message: "Failed to fetch patients" }));
throw new Error(err.message || "Failed to fetch patients");
}
const payload = await res.json();
// Expect payload to be { patients: Patient[], totalCount: number } or just an array.
// Normalize: if payload.patients exists, return it; otherwise assume array of patients.
return Array.isArray(payload) ? payload : (payload.patients ?? []);
};
const {
data: patients = [],
isFetching: isFetchingPatients,
refetch: refetchPatients,
} = useQuery<Patient[], Error>({
queryKey: ["patients-dropdown", searchKeyPart],
queryFn,
enabled: selectOpen || !!debouncedSearchCriteria?.searchTerm,
});
// If select opened and no patients loaded, fetch
useEffect(() => {
if (selectOpen && (!patients || patients.length === 0)) {
refetchPatients();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectOpen]);
// Force form field values to update and clean up storage
useEffect(() => {
if (parsedStoredData) {
// Update form field values directly
if (parsedStoredData.startTime) {
form.setValue("startTime", parsedStoredData.startTime);
}
if (!parsedStoredData) return;
if (parsedStoredData.endTime) {
form.setValue("endTime", parsedStoredData.endTime);
}
// set times/staff/date as before
if (parsedStoredData.startTime)
form.setValue("startTime", parsedStoredData.startTime);
if (parsedStoredData.endTime)
form.setValue("endTime", parsedStoredData.endTime);
if (parsedStoredData.staff)
form.setValue("staffId", parsedStoredData.staff);
if (parsedStoredData.date) {
const parsedDate =
typeof parsedStoredData.date === "string"
? parseLocalDate(parsedStoredData.date)
: new Date(parsedStoredData.date);
form.setValue("date", parsedDate);
}
if (parsedStoredData.staff) {
form.setValue("staffId", parsedStoredData.staff);
}
// ---- patient prefill: check main cache, else fetch once ----
if (parsedStoredData.patientId) {
const pid = Number(parsedStoredData.patientId);
if (!Number.isNaN(pid)) {
// ensure the form value is set
form.setValue("patientId", pid);
if (parsedStoredData.date) {
const parsedDate =
typeof parsedStoredData.date === "string"
? parseLocalDate(parsedStoredData.date)
: new Date(parsedStoredData.date);
form.setValue("date", parsedDate);
// fetch single patient record (preferred)
(async () => {
try {
const res = await apiRequest("GET", `/api/patients/${pid}`);
if (res.ok) {
const patientRecord = await res.json();
setPrefillPatient(patientRecord);
} else {
// non-OK response: show toast with status / message
let msg = `Failed to load patient (status ${res.status})`;
try {
const body = await res.json().catch(() => null);
if (body && body.message) msg = body.message;
} catch {}
toast({
title: "Could not load patient",
description: msg,
variant: "destructive",
});
}
} catch (err) {
toast({
title: "Error fetching patient",
description:
(err as Error)?.message ||
"An unknown error occurred while fetching patient details.",
variant: "destructive",
});
} finally {
// remove the one-time transport
sessionStorage.removeItem("newAppointmentData");
}
})();
}
// Clean up session storage
} else {
// no patientId in storage — still remove to avoid stale state
sessionStorage.removeItem("newAppointmentData");
}
}, [form]);
@@ -224,12 +321,6 @@ export function AppointmentForm({
? parseInt(data.patientId, 10)
: data.patientId;
// Get patient name for the title
const patient = patients.find((p) => p.id === patientId);
const patientName = patient
? `${patient.firstName} ${patient.lastName}`
: "Patient";
// Auto-create title if it's empty
let title = data.title;
if (!title || title.trim() === "") {
@@ -289,41 +380,109 @@ export function AppointmentForm({
render={({ field }) => (
<FormItem>
<FormLabel>Patient</FormLabel>
<Select
disabled={isLoading}
onValueChange={(val) => field.onChange(Number(val))}
value={field.value?.toString()}
defaultValue={field.value?.toString()}
onOpenChange={(open: boolean) => {
setSelectOpen(open);
if (!open) {
// reset transient search state when the dropdown closes
setSearchCriteria(null);
setIsSearchActive(false);
// Remove transient prefill if the main cached list contains it now
if (
prefillPatient &&
patients &&
patients.some(
(p) => Number(p.id) === Number(prefillPatient.id)
)
) {
setPrefillPatient(null);
}
} else {
// when opened, ensure initial results
if (!patients || patients.length === 0) refetchPatients();
}
}}
value={
field.value == null || // null or undefined
(typeof field.value === "number" &&
!Number.isFinite(field.value)) || // NaN/Infinity
(typeof field.value === "string" &&
field.value.trim() === "") || // empty string
field.value === "NaN" // defensive check
? ""
: String(field.value)
}
onValueChange={(val) =>
field.onChange(val === "" ? undefined : Number(val))
}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a patient" />
</SelectTrigger>
</FormControl>
<SelectContent>
{/* Reuse full PatientSearch UI inside dropdown — callbacks update the query */}
<div className="p-2" onKeyDown={(e) => e.stopPropagation()}>
<Input
ref={inputRef}
placeholder="Search patients..."
className="w-full"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onKeyDown={(e) => {
const navKeys = ["ArrowDown", "ArrowUp", "Enter"];
if (!navKeys.includes(e.key)) {
e.stopPropagation(); // Only stop keys that affect select state
}
<PatientSearch
onSearch={(criteria) => {
setSearchCriteria(criteria);
setIsSearchActive(true);
}}
onClearSearch={() => {
setSearchCriteria({
searchTerm: "",
searchBy: "name",
});
setIsSearchActive(false);
}}
isSearchActive={isSearchActive}
/>
</div>
{/* Prefill patient only if main list does not already include them */}
{prefillPatient &&
!patients.some(
(p) => Number(p.id) === Number(prefillPatient.id)
) && (
<SelectItem
key={`prefill-${prefillPatient.id}`}
value={prefillPatient.id?.toString() ?? ""}
>
<div className="flex flex-col items-start">
<span className="font-medium">
{prefillPatient.firstName}{" "}
{prefillPatient.lastName}
</span>
<span className="text-xs text-muted-foreground">
DOB:{" "}
{prefillPatient.dateOfBirth
? new Date(
prefillPatient.dateOfBirth
).toLocaleDateString()
: ""}{" "}
• {prefillPatient.phone ?? ""}
</span>
</div>
</SelectItem>
)}
<div className="max-h-60 overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/30">
{filteredPatients.length > 0 ? (
filteredPatients.map((patient) => (
{isFetchingPatients ? (
<div className="p-2 text-sm text-muted-foreground">
Loading...
</div>
) : patients && patients.length > 0 ? (
patients.map((patient) => (
<SelectItem
key={patient.id}
value={patient.id?.toString() ?? ""}
>
<div className="flex flex-col">
<div className="flex flex-col items-start">
<span className="font-medium">
{patient.firstName} {patient.lastName}
</span>
@@ -345,6 +504,7 @@ export function AppointmentForm({
</div>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}

169
apps/Frontend/src/components/appointments/appointment-table.tsx
View File

@@ -1,169 +0,0 @@
import { format } from "date-fns";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
MoreHorizontal,
Edit,
Trash2,
Eye,
Calendar,
Clock,
} from "lucide-react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Appointment, Patient } from "@repo/db/types";
interface AppointmentTableProps {
appointments: Appointment[];
patients: Patient[];
onEdit: (appointment: Appointment) => void;
onDelete: (id: number) => void;
}
export function AppointmentTable({
appointments,
patients,
onEdit,
onDelete,
}: AppointmentTableProps) {
// Helper function to get patient name
const getPatientName = (patientId: number) => {
const patient = patients.find((p) => p.id === patientId);
return patient
? `${patient.firstName} ${patient.lastName}`
: "Unknown Patient";
};
// Helper function to get status badge
const getStatusBadge = (status: string) => {
const statusConfig: Record<
string,
{
variant:
| "default"
| "secondary"
| "destructive"
| "outline"
| "success";
label: string;
}
> = {
scheduled: { variant: "default", label: "Scheduled" },
confirmed: { variant: "secondary", label: "Confirmed" },
completed: { variant: "success", label: "Completed" },
cancelled: { variant: "destructive", label: "Cancelled" },
"no-show": { variant: "outline", label: "No Show" },
};
const config = statusConfig[status] || {
variant: "default",
label: status,
};
return <Badge variant={config.variant as any}>{config.label}</Badge>;
};
// Sort appointments by date and time (newest first)
const sortedAppointments = [...appointments].sort((a, b) => {
const dateComparison =
new Date(b.date).getTime() - new Date(a.date).getTime();
if (dateComparison !== 0) return dateComparison;
return a.startTime.toString().localeCompare(b.startTime.toString());
});
return (
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Patient</TableHead>
<TableHead>Date</TableHead>
<TableHead>Time</TableHead>
<TableHead>Type</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{sortedAppointments.length === 0 ? (
<TableRow>
<TableCell colSpan={6} className="h-24 text-center">
No appointments found.
</TableCell>
</TableRow>
) : (
sortedAppointments.map((appointment) => (
<TableRow key={appointment.id}>
<TableCell className="font-medium">
{getPatientName(appointment.patientId)}
</TableCell>
<TableCell>
<div className="flex items-center">
<Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
{format(new Date(appointment.date), "MMM d, yyyy")}
</div>
</TableCell>
<TableCell>
<div className="flex items-center">
<Clock className="mr-2 h-4 w-4 text-muted-foreground" />
{appointment.startTime.slice(0, 5)} -{" "}
{appointment.endTime.slice(0, 5)}
</div>
</TableCell>
<TableCell className="capitalize">
{appointment.type.replace("-", " ")}
</TableCell>
<TableCell>{getStatusBadge(appointment.status!)}</TableCell>
<TableCell className="text-right">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem onClick={() => onEdit(appointment)}>
<Edit className="mr-2 h-4 w-4" />
Edit
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
if (typeof appointment.id === "number") {
onDelete(appointment.id);
} else {
console.error("Invalid appointment ID");
}
}}
className="text-destructive focus:text-destructive"
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
);
}

32
apps/Frontend/src/components/claims/claim-form.tsx
View File

@@ -133,6 +133,10 @@ export function ClaimForm({
const [serviceDate, setServiceDate] = useState<string>(
formatLocalDate(new Date())
);
const [serviceDateOpen, setServiceDateOpen] = useState(false);
const [openProcedureDateIndex, setOpenProcedureDateIndex] = useState<
number | null
>(null);
// Update service date when calendar date changes
const onServiceDateChange = (date: Date | undefined) => {
@@ -559,7 +563,10 @@ export function ClaimForm({
{/* Service Date */}
<div className="flex gap-2">
<Label className="flex items-center">Service Date</Label>
<Popover>
<Popover
open={serviceDateOpen}
onOpenChange={setServiceDateOpen}
>
<PopoverTrigger asChild>
<Button
variant="outline"
@@ -569,11 +576,14 @@ export function ClaimForm({
{form.serviceDate}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<PopoverContent className="w-auto">
<Calendar
mode="single"
selected={serviceDateValue}
onSelect={onServiceDateChange}
onSelect={(date) => {
onServiceDateChange(date);
}}
onClose={() => setServiceDateOpen(false)}
/>
</PopoverContent>
</Popover>
@@ -702,7 +712,12 @@ export function ClaimForm({
</div>
{/* Date Picker */}
<Popover>
<Popover
open={openProcedureDateIndex === i}
onOpenChange={(open) =>
setOpenProcedureDateIndex(open ? i : null)
}
>
<PopoverTrigger asChild>
<Button
variant="outline"
@@ -712,11 +727,16 @@ export function ClaimForm({
{line.procedureDate || "Pick Date"}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<PopoverContent className="w-auto">
<Calendar
mode="single"
selected={new Date(line.procedureDate)}
selected={
line.procedureDate
? new Date(line.procedureDate)
: undefined
}
onSelect={(date) => updateProcedureDate(i, date)}
onClose={() => setOpenProcedureDateIndex(null)}
/>
</PopoverContent>
</Popover>

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

@@ -43,6 +43,8 @@ export function PatientSearch({
onClearSearch,
isSearchActive,
}: PatientSearchProps) {
const [dobOpen, setDobOpen] = useState(false);
const [advanceDobOpen, setAdvanceDobOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [searchBy, setSearchBy] = useState<SearchCriteria["searchBy"]>("name");
const [showAdvanced, setShowAdvanced] = useState(false);
@@ -84,7 +86,7 @@ export function PatientSearch({
<div className="flex gap-2 mb-4">
<div className="relative flex-1">
{searchBy === "dob" ? (
<Popover>
<Popover open={dobOpen} onOpenChange={setDobOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
@@ -112,6 +114,7 @@ export function PatientSearch({
if (date) {
const formattedDate = format(date, "yyyy-MM-dd");
setSearchTerm(String(formattedDate));
setDobOpen(false);
}
}}
disabled={(date) => date > new Date()}
@@ -153,9 +156,10 @@ export function PatientSearch({
<Select
value={searchBy}
onValueChange={(value) =>
setSearchBy(value as SearchCriteria["searchBy"])
}
onValueChange={(value) => {
setSearchBy(value as SearchCriteria["searchBy"]);
setSearchTerm("");
}}
>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Search by..." />
@@ -189,12 +193,13 @@ export function PatientSearch({
</label>
<Select
value={advancedCriteria.searchBy}
onValueChange={(value) =>
updateAdvancedCriteria(
"searchBy",
value as SearchCriteria["searchBy"]
)
}
onValueChange={(value) => {
setAdvancedCriteria((prev) => ({
...prev,
searchBy: value as SearchCriteria["searchBy"],
searchTerm: "",
}));
}}
>
<SelectTrigger className="col-span-3">
<SelectValue placeholder="Name" />
@@ -215,9 +220,13 @@ export function PatientSearch({
Search term
</label>
{advancedCriteria.searchBy === "dob" ? (
<Popover>
<Popover
open={advanceDobOpen}
onOpenChange={setAdvanceDobOpen}
>
<PopoverTrigger asChild>
<Button
type="button"
variant="outline"
onKeyDown={(e) => {
if (e.key === "Enter") handleSearch();
@@ -251,6 +260,7 @@ export function PatientSearch({
"searchTerm",
String(formattedDate)
);
setAdvanceDobOpen(false);
}
}}
disabled={(date) => date > new Date()}

41
apps/Frontend/src/components/ui/calendar.tsx
View File

@@ -13,20 +13,34 @@ type CalendarProps =
mode: "single";
selected?: Date;
onSelect?: (date: Date | undefined) => void;
closeOnSelect?: boolean /** whether to request closing after selection (default true for single) */;
onClose?: () => void;
})
| (BaseProps & {
mode: "range";
selected?: DateRange;
onSelect?: (range: DateRange | undefined) => void;
closeOnSelect?: boolean; // will close only when range is complete
onClose?: () => void;
})
| (BaseProps & {
mode: "multiple";
selected?: Date[];
onSelect?: (dates: Date[] | undefined) => void;
closeOnSelect?: boolean; // default false for multi
onClose?: () => void;
});
export function Calendar(props: CalendarProps) {
const { mode, selected, onSelect, className, ...rest } = props;
const {
mode,
selected,
onSelect,
className,
closeOnSelect,
onClose,
...rest
} = props;
const [internalSelected, setInternalSelected] =
useState<typeof selected>(selected);
@@ -37,7 +51,30 @@ export function Calendar(props: CalendarProps) {
const handleSelect = (value: typeof selected) => {
setInternalSelected(value);
onSelect?.(value as any); // We'll narrow this properly below
// forward original callback
onSelect?.(value as any);
// Decide whether to request closing
const shouldClose =
typeof closeOnSelect !== "undefined"
? closeOnSelect
: mode === "single"
? true
: false;
if (!shouldClose) return;
// For range: only close when both from and to exist
if (mode === "range") {
const range = value as DateRange | undefined;
if (range?.from && range?.to) {
onClose?.();
}
return;
}
// For single or multiple (when allowed), close immediately
onClose?.();
};
return (

3
apps/Frontend/src/components/ui/dateInput.tsx
View File

@@ -19,6 +19,9 @@ interface DateInputProps {
disablePast?: boolean;
}
// THIS COMPONENT IS MADE FOR GENERAL FIELD IN PAGE.
// Here, User can input/paste date in certain format, and also select via calendar
export function DateInput({
label,
value,

2
apps/Frontend/src/components/ui/dateInputField.tsx
View File

@@ -16,6 +16,8 @@ interface DateInputFieldProps {
disablePast?: boolean;
}
// THIS COMPONENT MADE FOR USING IN FORM FIELD INSIDE ANY FORM CONTROL, NOT AS INPUT FIELD NORMALLY.
// Here, User can input/paste date in certain format, and also select via calendar
export function DateInputField({
control,
name,