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

feat(Calendar UI fixes) - shrink

Browse Source
This commit is contained in:
Potenz
2025-09-14 18:40:35 +05:30
parent 7aa6f6bc6d
commit aa3d3cac3a
5 changed files with 142 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { format } from "date-fns";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { apiRequest } from "@/lib/queryClient";
import { Button } from "@/components/ui/button";
import {
Form,
@@ -22,7 +22,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Clock } from "lucide-react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useQuery } from "@tanstack/react-query";
import { useAuth } from "@/hooks/use-auth";
import { useDebounce } from "use-debounce";
import {
@@ -39,7 +39,6 @@ import {
PatientSearch,
SearchCriteria,
} from "@/components/patients/patient-search";
import { QK_PATIENTS_BASE } from "../patients/patient-table";
import { toast } from "@/hooks/use-toast";
interface AppointmentFormProps {
@@ -59,7 +58,6 @@ export function AppointmentForm({
}: AppointmentFormProps) {
const { user } = useAuth();
const inputRef = useRef<HTMLInputElement>(null);
const queryClient = useQueryClient();
const [prefillPatient, setPrefillPatient] = useState<Patient | null>(null);
useEffect(() => {
@@ -70,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",

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 (

85
apps/Frontend/src/pages/appointments-page.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from "react";
import { useQuery, useMutation, keepPreviousData } from "@tanstack/react-query";
import { useQuery, useMutation } from "@tanstack/react-query";
import { addDays, startOfToday, addMinutes } from "date-fns";
import {
parseLocalDate,
@@ -20,13 +20,6 @@ import { useToast } from "@/hooks/use-toast";
import { Calendar } from "@/components/ui/calendar";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useAuth } from "@/hooks/use-auth";
import {
Card,
CardContent,
CardHeader,
CardDescription,
CardTitle,
} from "@/components/ui/card";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { Menu, Item, useContextMenu } from "react-contexify";
@@ -39,6 +32,12 @@ import {
Patient,
UpdateAppointment,
} from "@repo/db/types";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Label } from "@/components/ui/label";
// Define types for scheduling
interface TimeSlot {
@@ -78,6 +77,7 @@ export default function AppointmentsPage() {
const { toast } = useToast();
const { user } = useAuth();
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
const [calendarOpen, setCalendarOpen] = useState(false);
const [editingAppointment, setEditingAppointment] = useState<
Appointment | undefined
>(undefined);
@@ -233,10 +233,10 @@ export default function AppointmentsPage() {
);
return await res.json();
},
onSuccess: () => {
onSuccess: (appointment) => {
toast({
title: "Success",
description: "Appointment created successfully.",
title: "Appointment Scheduled",
description: appointment.message || "Appointment created successfully.",
});
// Invalidate both appointments and patients queries
queryClient.invalidateQueries({
@@ -269,10 +269,10 @@ export default function AppointmentsPage() {
);
return await res.json();
},
onSuccess: () => {
onSuccess: (appointment) => {
toast({
title: "Success",
description: "Appointment updated successfully.",
title: "Appointment Scheduled",
description: appointment.message || "Appointment created successfully.",
});
queryClient.invalidateQueries({
queryKey: qkAppointmentsDay(formattedSelectedDate),
@@ -697,10 +697,10 @@ export default function AppointmentsPage() {
</Item>
</Menu>
{/* Main Content - Split into Schedule and Calendar */}
{/* Main Content */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Left side - Schedule Grid */}
<div className="w-full lg:w-3/4 overflow-x-auto bg-white rounded-md shadow">
{/* Schedule Grid */}
<div className="w-full overflow-x-auto bg-white rounded-md shadow">
<div className="p-4 border-b">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
@@ -722,6 +722,35 @@ export default function AppointmentsPage() {
<ChevronRight className="h-4 w-4" />
</Button>
</div>
{/* Top button with popover calendar */}
<div className="flex items-center gap-2">
<Label className="hidden sm:flex">Selected</Label>
<Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
className="w-[160px] justify-start text-left font-normal"
>
<CalendarIcon className="mr-2 h-4 w-4" />
{selectedDate
? selectedDate.toLocaleDateString()
: "Pick a date"}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto">
<Calendar
mode="single"
selected={selectedDate}
onSelect={(date) => {
if (date) setSelectedDate(date);
}}
onClose={() => setCalendarOpen(false)}
/>
</PopoverContent>
</Popover>
</div>
</div>
</div>
@@ -770,28 +799,6 @@ export default function AppointmentsPage() {
</div>
</DndProvider>
</div>
{/* Right side - Calendar and Stats */}
<div className="w-full lg:w-1/4 space-y-6">
{/* Calendar Card */}
<Card>
<CardHeader className="pb-2">
<CardTitle>Calendar</CardTitle>
<CardDescription>
Select a date to view or schedule appointments
</CardDescription>
</CardHeader>
<CardContent>
<Calendar
mode="single"
selected={selectedDate}
onSelect={(date) => {
if (date) setSelectedDate(date);
}}
/>
</CardContent>
</Card>
</div>
</div>
</div>