Support for rescheduling appointment #9956
Conversation
WalkthroughThis pull request introduces enhancements to the appointment management system, specifically focusing on rescheduling functionality. It includes updates to locale translations, modifications to components, and new type definitions. A new Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying care-fe with
|
| Latest commit: |
943781a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b8343f96.care-fe.pages.dev |
| Branch Preview URL: | https://appointment-reschedule.care-fe.pages.dev |
CARE
|
||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
appointment-reschedule
|
| Run status |
|
| Run duration | 01m 46s |
| Commit |
|
| Committer | Rithvik Nishad |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
4
|
| View all changes introduced in this branch ↗︎ | |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
src/types/facility/facility.ts (1)
3-7: Consider renamingFacilityBareMinimumfor consistencyThe interface
FacilityBareMinimumcould be renamed to align with naming conventions. Consider using a name likeFacilitySummaryorMinimalFacilityfor improved clarity and consistency.src/pages/Appointments/components/AppointmentSlotPicker.tsx (2)
37-53: Consider error handling for data fetching.While the queries are well-structured, there's no explicit error handling UI for failed queries.
const slotsQuery = useQuery({ queryKey: ["slots", facilityId, resourceId, dateQueryString(selectedDate)], queryFn: query(scheduleApis.slots.getSlotsForDay, { pathParams: { facility_id: facilityId }, body: { user: resourceId ?? "", day: dateQueryString(selectedDate), }, }), enabled: !!resourceId && !!selectedDate, + retry: 2, }); +// Add error state handling +if (slotsQuery.error || heatmapQuery.error) { + return ( + <div className="text-red-500"> + {t("error_fetching_slots_data")} + </div> + ); +}
157-171: Consider adding loading states.The component should show loading indicators while data is being fetched.
<div className="max-h-96"> + {(slotsQuery.isLoading || heatmapQuery.isLoading) && ( + <div className="flex items-center justify-center py-32"> + <LoadingSpinner /> + </div> + )} {slotsQuery.data == null && !slotsQuery.isLoading && ( <div className="flex items-center justify-center py-32 border-2 border-gray-200 border-dashed rounded-lg text-center">src/pages/Appointments/AppointmentDetail.tsx (2)
422-441: Consider optimistic updates for better UX.The mutation could use optimistic updates to provide instant feedback to users.
const { mutate: rescheduleAppointment, isPending: isRescheduling } = useMutation({ mutationFn: mutate(scheduleApis.appointments.reschedule, { pathParams: { facility_id: facilityId, id: appointment.id, }, }), + onMutate: async (newAppointment) => { + await queryClient.cancelQueries({ queryKey: ["appointment", appointment.id] }); + const previousAppointment = queryClient.getQueryData(["appointment", appointment.id]); + queryClient.setQueryData(["appointment", appointment.id], old => ({ + ...old, + token_slot: { ...old.token_slot, id: newAppointment.new_slot } + })); + return { previousAppointment }; + }, + onError: (err, newAppointment, context) => { + queryClient.setQueryData( + ["appointment", appointment.id], + context.previousAppointment + ); + }, onSuccess: (newAppointment: Appointment) => { queryClient.invalidateQueries({ queryKey: ["appointment", appointment.id], });
475-519: Add confirmation dialog for rescheduling.Consider adding a confirmation dialog before rescheduling to prevent accidental changes.
+import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; <Sheet open={isRescheduleOpen} onOpenChange={setIsRescheduleOpen}> {/* ... */} - <Button - variant="default" - disabled={!selectedSlotId || isRescheduling} - onClick={() => { - if (selectedSlotId) { - rescheduleAppointment({ new_slot: selectedSlotId }); - } - }} - > - {isRescheduling ? t("rescheduling") : t("reschedule")} - </Button> + <AlertDialog> + <AlertDialogTrigger asChild> + <Button + variant="default" + disabled={!selectedSlotId || isRescheduling} + > + {isRescheduling ? t("rescheduling") : t("reschedule")} + </Button> + </AlertDialogTrigger> + <AlertDialogContent> + <AlertDialogHeader> + <AlertDialogTitle>{t("reschedule_appointment")}</AlertDialogTitle> + <AlertDialogDescription> + {t("reschedule_appointment_confirmation")} + </AlertDialogDescription> + </AlertDialogHeader> + <AlertDialogFooter> + <AlertDialogCancel>{t("cancel")}</AlertDialogCancel> + <AlertDialogAction + onClick={() => { + if (selectedSlotId) { + rescheduleAppointment({ new_slot: selectedSlotId }); + } + }} + > + {t("confirm")} + </AlertDialogAction> + </AlertDialogFooter> + </AlertDialogContent> + </AlertDialog>public/locale/en.json (1)
400-400: Add translation for rescheduling confirmation.Add a translation key for the rescheduling confirmation dialog.
"appointment_rescheduled_successfully": "Appointment rescheduled successfully", + "reschedule_appointment_confirmation": "Are you sure you want to reschedule this appointment? The patient will be notified of this change.", "reschedule_appointment": "Reschedule Appointment", "rescheduling": "Rescheduling...",Also applies to: 1723-1724
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
public/locale/en.json(2 hunks)src/pages/Appointments/AppointmentDetail.tsx(6 hunks)src/pages/Appointments/BookAppointment.tsx(3 hunks)src/pages/Appointments/components/AppointmentSlotPicker.tsx(1 hunks)src/types/facility/facility.ts(1 hunks)src/types/scheduling/schedule.ts(3 hunks)src/types/scheduling/scheduleApis.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages: care-fe
🔇 Additional comments (7)
src/pages/Appointments/BookAppointment.tsx (4)
27-27: Imported utilities are correctly utilizedThe
formatDisplayNameandformatNameutilities are imported and used appropriately.
30-31: ImportedAppointmentSlotPickercomponent successfullyThe
AppointmentSlotPickercomponent is correctly imported and ready for use.
42-42: State management forselectedSlotIdimplemented correctlyThe
useStatehook is properly used to manageselectedSlotId, ensuring the selected slot ID is tracked properly.
154-159:AppointmentSlotPickercomponent integrated effectivelyThe
AppointmentSlotPickeris correctly integrated with all necessary props, facilitating proper slot selection functionality.src/types/scheduling/schedule.ts (1)
142-142: Addedfacilityproperty toAppointmentinterface appropriatelyThe inclusion of the
facilityproperty of typeFacilityBareMinimumenhances theAppointmentinterface by providing essential facility details.src/types/scheduling/scheduleApis.ts (1)
146-151: Well-defined API endpoint for rescheduling!The reschedule endpoint follows RESTful conventions and maintains consistency with other appointment endpoints.
src/pages/Appointments/components/AppointmentSlotPicker.tsx (1)
20-25: Well-structured props interface!The props interface is clear and properly typed with optional properties where appropriate.
| @@ -137,6 +139,7 @@ | |||
| reason_for_visit: string; | |||
| user: UserBase; | |||
| booked_by: UserBase | null; // This is null if the appointment was booked by the patient itself. | |||
| facility: FacilityBareMinimum; | |||
There was a problem hiding this comment.
Update Appointment interface status property type
The status property in the Appointment interface is currently typed as AppointmentNonCancelledStatus, which does not include "rescheduled". To accommodate all possible statuses, including "rescheduled", consider changing the type of status to AppointmentStatus.
| const percentage = | ||
| slot.allocated / availability.tokens_per_slot; |
There was a problem hiding this comment.
Similar division by zero risk in slot percentage calculation.
The calculation of slot allocation percentage needs a safety check.
-const percentage = slot.allocated / availability.tokens_per_slot;
+const percentage = availability.tokens_per_slot > 0
+ ? slot.allocated / availability.tokens_per_slot
+ : 1;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const percentage = | |
| slot.allocated / availability.tokens_per_slot; | |
| const percentage = availability.tokens_per_slot > 0 | |
| ? slot.allocated / availability.tokens_per_slot | |
| : 1; |
| const { booked_slots, total_slots } = availability; | ||
| const bookedPercentage = booked_slots / total_slots; | ||
| const tokensLeft = total_slots - booked_slots; | ||
| const isFullyBooked = tokensLeft <= 0; |
There was a problem hiding this comment.
Potential division by zero risk.
The calculation of bookedPercentage could result in division by zero if total_slots is 0.
-const bookedPercentage = booked_slots / total_slots;
+const bookedPercentage = total_slots > 0 ? booked_slots / total_slots : 1;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { booked_slots, total_slots } = availability; | |
| const bookedPercentage = booked_slots / total_slots; | |
| const tokensLeft = total_slots - booked_slots; | |
| const isFullyBooked = tokensLeft <= 0; | |
| const { booked_slots, total_slots } = availability; | |
| const bookedPercentage = total_slots > 0 ? booked_slots / total_slots : 1; | |
| const tokensLeft = total_slots - booked_slots; | |
| const isFullyBooked = tokensLeft <= 0; |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/Appointments/AppointmentDetail.tsx (1)
476-520: Add aria-labels for better accessibility.The rescheduling UI implementation is well structured, but could benefit from accessibility improvements.
Add aria-labels to the buttons:
- <Button variant="outline" size="lg"> + <Button variant="outline" size="lg" aria-label={t("reschedule")}> <CalendarIcon className="size-4 mr-2" /> {t("reschedule")} </Button> - <Button + <Button + aria-label={t("cancel")} variant="outline" onClick={() => { setIsRescheduleOpen(false); setSelectedSlotId(undefined); }} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
public/locale/en.json(2 hunks)src/pages/Appointments/AppointmentDetail.tsx(7 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: cypress-run (1)
- GitHub Check: Cloudflare Pages: care-fe
🔇 Additional comments (5)
src/pages/Appointments/AppointmentDetail.tsx (4)
47-53: LGTM! Import statements are properly organized.The new imports for Sheet components and AppointmentSlotPicker are correctly added and align with the rescheduling feature requirements.
Also applies to: 80-80
244-244: LGTM! Status mapping is correctly updated.The "rescheduled" status is properly added to the badge variant mapping with the appropriate "secondary" variant.
423-442: LGTM! Reschedule mutation is well implemented.The implementation follows best practices:
- Proper type safety with useMutation
- Appropriate cache invalidation
- User feedback via toast notification
- Clean state management
- Correct navigation to the new appointment
444-444: LGTM! Status check is properly updated.The condition correctly uses AppointmentCancelledStatuses to include the rescheduled status in the cancelled states check.
public/locale/en.json (1)
400-400: LGTM! Translations are complete and consistent.All required translations for the rescheduling feature are properly added:
- appointment_rescheduled_successfully
- reschedule_appointment
- rescheduled
- rescheduling
Also applies to: 1723-1725
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (2)
src/types/scheduling/schedule.ts (2)
117-117: 🛠️ Refactor suggestionReevaluate inclusion of "rescheduled" in cancelled statuses
A rescheduled appointment isn't really cancelled - it's moved to a new time. Consider creating a separate status category for rescheduled appointments.
149-149:⚠️ Potential issueUpdate Appointment interface status type
The status property should allow all possible statuses including "rescheduled".
- status: AppointmentNonCancelledStatus; + status: AppointmentStatus;
🧹 Nitpick comments (1)
src/pages/Appointments/AppointmentDetail.tsx (1)
477-521: Improve accessibility of rescheduling sheetAdd ARIA labels and keyboard navigation support to the rescheduling sheet.
<Sheet open={isRescheduleOpen} onOpenChange={setIsRescheduleOpen}> - <SheetTrigger asChild> + <SheetTrigger asChild aria-label={t("reschedule_appointment")}> <Button variant="outline" size="lg"> <CalendarIcon className="size-4 mr-2" /> {t("reschedule")} </Button> </SheetTrigger> - <SheetContent className="w-full sm:max-w-xl"> + <SheetContent + className="w-full sm:max-w-xl" + role="dialog" + aria-labelledby="reschedule-title" + > <SheetHeader> - <SheetTitle>{t("reschedule_appointment")}</SheetTitle> + <SheetTitle id="reschedule-title">{t("reschedule_appointment")}</SheetTitle> </SheetHeader>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
public/locale/en.json(2 hunks)src/pages/Appointments/AppointmentDetail.tsx(7 hunks)src/pages/Patient/index.tsx(4 hunks)src/types/scheduling/schedule.ts(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages: care-fe
🔇 Additional comments (1)
public/locale/en.json (1)
397-402: Translation keys look good!All necessary translation keys for the rescheduling feature have been added with clear and consistent wording.
Also applies to: 1725-1727
src/pages/Patient/index.tsx
Outdated
| Appointment, | ||
| ApppointmentCompletedStatuses, | ||
| } from "@/types/scheduling/schedule"; |
There was a problem hiding this comment.
Fix typo in imported type name
The imported type name has a typo: ApppointmentCompletedStatuses has 3 'p's.
- import { Appointment, ApppointmentCompletedStatuses } from "@/types/scheduling/schedule";
+ import { Appointment, AppointmentCompletedStatuses } from "@/types/scheduling/schedule";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Appointment, | |
| ApppointmentCompletedStatuses, | |
| } from "@/types/scheduling/schedule"; | |
| Appointment, | |
| AppointmentCompletedStatuses, | |
| } from "@/types/scheduling/schedule"; |
| <Button variant="secondary"> | ||
| <span>{t("reschedule")}</span> | ||
| </Button> |
There was a problem hiding this comment.
Add click handler for reschedule button
The reschedule button is missing an onClick handler, making it non-functional.
- <Button variant="secondary">
+ <Button
+ variant="secondary"
+ onClick={() => navigate(`/facility/${facilityId}/appointments/${appointment.id}/reschedule`)}
+ >
<span>{t("reschedule")}</span>
</Button>Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
this would be addressed by @Jacobjeevan in his PR
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
| @@ -62,6 +66,9 @@ | |||
| }, | |||
| }), | |||
| onSuccess: () => { | |||
| setSelectedAppointment(undefined); | |||
| setAppointmentDialogOpen(false); | |||
| toast.success(t("appointment_cancelled")); | |||
There was a problem hiding this comment.
💡 Codebase verification
Missing translation key in multiple locale files
The translation key "appointment_cancelled" is only present in en.json but appears to be missing in other locale files (ta.json, mr.json, ml.json, hi.json, kn.json). This could lead to missing translations when users switch languages.
- Add the "appointment_cancelled" translation key to all locale files in
public/locale/
🔗 Analysis chain
Verify toast message translation key
Verify that the translation key "appointment_cancelled" exists in the locale files.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the translation key exists
rg -F "\"appointment_cancelled\":" public/locale/
Length of output: 133
Script:
#!/bin/bash
# List all locale files
fd . public/locale/ -e json -x echo "=== {} ===" \; cat {} \; echo
Length of output: 450
Script:
#!/bin/bash
# Search for the translation key in all locale files with context
rg -F "appointment_cancelled" public/locale/ --json | jq -r '.data.lines.text' 2>/dev/null
Length of output: 154
There was a problem hiding this comment.
Read README, we add only for en locale through PRs. Crowdin handles it.
There was a problem hiding this comment.
@rithviknishad Thank you for the correction. I've checked the README and understand now - only English translations should be added through PRs, while other languages are managed through Crowdin.
🔗 Analysis chain
@rithviknishad I apologize for the confusion. I understand now that only English (en) locale files are managed through PRs, while Crowdin handles other locales.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check README for localization/translation information
fd README -e md -X cat {}
Length of output: 19459
✏️ Learnings added
Learnt from: rithviknishad
PR: ohcnetwork/care_fe#9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.876Z
Learning: In this project, new translation strings must only be added to the English locale (en.json) through pull requests. Translations for other languages (ta.json, mr.json, ml.json, hi.json, kn.json, etc.) are managed through Crowdin (https://crowdin.com/project/ohccarefe) and should not be modified directly in PRs.
Learnt from: rithviknishad
PR: ohcnetwork/care_fe#9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.876Z
Learning: In this project, translations are only added to the English locale (en.json) through pull requests. Other locale files are managed through Crowdin and should not be modified directly in PRs.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
src/types/scheduling/schedule.ts
Outdated
| export const ApppointmentCompletedStatuses: AppointmentStatus[] = [ | ||
| "fulfilled", | ||
| "cancelled", | ||
| "entered_in_error", | ||
| "rescheduled", | ||
| ]; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix typo and consider renaming constant
- Fix the typo in the constant name (3 p's)
- Consider a more appropriate name like
AppointmentFinalStatusessince these are terminal states
- export const ApppointmentCompletedStatuses: AppointmentStatus[] = [
+ export const AppointmentFinalStatuses: AppointmentStatus[] = [📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const ApppointmentCompletedStatuses: AppointmentStatus[] = [ | |
| "fulfilled", | |
| "cancelled", | |
| "entered_in_error", | |
| "rescheduled", | |
| ]; | |
| export const AppointmentFinalStatuses: AppointmentStatus[] = [ | |
| "fulfilled", | |
| "cancelled", | |
| "entered_in_error", | |
| "rescheduled", | |
| ]; |
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
src/pages/Appointments/components/AppointmentSlotPicker.tsx (2)
85-88:⚠️ Potential issueDivision by zero risk in booking percentage calculation.
The bookedPercentage calculation could result in division by zero.
-const bookedPercentage = booked_slots / total_slots; +const bookedPercentage = total_slots > 0 ? booked_slots / total_slots : 1;
181-182:⚠️ Potential issueDivision by zero risk in slot percentage calculation.
The percentage calculation could result in division by zero.
-const percentage = slot.allocated / availability.tokens_per_slot; +const percentage = availability.tokens_per_slot > 0 + ? slot.allocated / availability.tokens_per_slot + : 1;
🧹 Nitpick comments (5)
src/pages/Appointments/components/AppointmentSlotPicker.tsx (5)
34-35: Consider initializing dates to the first available slot.Currently, both dates are initialized to the current date, which might not be an available appointment date. Consider fetching and initializing to the first available date instead.
-const [selectedMonth, setSelectedMonth] = useState(new Date()); -const [selectedDate, setSelectedDate] = useState(new Date()); +const [selectedMonth, setSelectedMonth] = useState<Date>(() => { + const today = new Date(); + return today; +}); +const [selectedDate, setSelectedDate] = useState<Date | null>(null);
43-53: Add error handling for failed slot fetching.The query implementation looks good, but there's no handling of error states. Consider adding error feedback for users.
const slotsQuery = useQuery({ queryKey: ["slots", facilityId, resourceId, dateQueryString(selectedDate)], queryFn: query(scheduleApis.slots.getSlotsForDay, { pathParams: { facility_id: facilityId }, body: { user: resourceId ?? "", day: dateQueryString(selectedDate), }, }), enabled: !!resourceId && !!selectedDate, + retry: 2, + onError: (error) => { + console.error('Failed to fetch slots:', error); + // Add user feedback mechanism here + } });
67-82: Remove onClick handler from disabled button.The disabled button shouldn't have an onClick handler as it will never be called.
<button disabled - onClick={() => { - setSelectedDate(date); - onSlotSelect(undefined); - }} className={cn(
188-227: Improve accessibility and code readability of slot buttons.The slot button needs accessibility improvements and the nested ternary operators could be simplified.
<Button key={slot.id} size="lg" variant={selectedSlotId === slot.id ? "outline_primary" : "outline"} + aria-label={`Select appointment slot at ${format(slot.start_datetime, "HH:mm")}, ${availability.tokens_per_slot - slot.allocated} slots remaining`} onClick={() => { onSlotSelect(selectedSlotId === slot.id ? undefined : slot.id); }} disabled={slot.allocated === availability.tokens_per_slot || isPastSlot} className="flex flex-col items-center group gap-0" > <span className="font-semibold"> {format(slot.start_datetime, "HH:mm")} </span> <span className={cn( "text-xs group-hover:text-inherit", - percentage >= 1 - ? "text-gray-400" - : percentage >= 0.8 - ? "text-red-600" - : percentage >= 0.6 - ? "text-yellow-600" - : "text-green-600", + getColorClassForPercentage(percentage) )} > {availability.tokens_per_slot - slot.allocated} left </span> </Button>Consider extracting the color logic to a separate function:
function getColorClassForPercentage(percentage: number): string { if (percentage >= 1) return "text-gray-400"; if (percentage >= 0.8) return "text-red-600"; if (percentage >= 0.6) return "text-yellow-600"; return "text-green-600"; }
27-32: Add JSDoc documentation for the component.Since this is a new component for appointment rescheduling, consider adding JSDoc documentation to explain its purpose and usage.
+/** + * A component that allows users to select appointment slots for scheduling or rescheduling. + * Displays a calendar view with availability indicators and a list of available time slots. + * + * @param facilityId - The ID of the facility where the appointment will take place + * @param resourceId - Optional. The ID of the resource (e.g., doctor) for the appointment + * @param onSlotSelect - Callback function called when a slot is selected or deselected + * @param selectedSlotId - Optional. The currently selected slot ID + */ export function AppointmentSlotPicker({ facilityId, resourceId, onSlotSelect, selectedSlotId, }: AppointmentSlotPickerProps) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Appointments/components/AppointmentSlotPicker.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: OSSAR-Scan
- GitHub Check: cypress-run (1)
- GitHub Check: Cloudflare Pages: care-fe
🔇 Additional comments (1)
src/pages/Appointments/components/AppointmentSlotPicker.tsx (1)
20-25: Well-structured interface definition!The props interface is well-defined with proper types and optional parameters.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/Appointments/AppointmentDetail.tsx(7 hunks)src/pages/Patient/index.tsx(4 hunks)src/types/scheduling/schedule.ts(3 hunks)
🧰 Additional context used
📓 Learnings (2)
src/pages/Patient/index.tsx (2)
Learnt from: rithviknishad
PR: ohcnetwork/care_fe#9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, new translation strings must only be added to the English locale (en.json) through pull requests. Translations for other languages (ta.json, mr.json, ml.json, hi.json, kn.json, etc.) are managed through Crowdin (https://crowdin.com/project/ohccarefe) and should not be modified directly in PRs.
Learnt from: rithviknishad
PR: ohcnetwork/care_fe#9956
File: src/pages/Patient/index.tsx:71-71
Timestamp: 2025-01-15T04:16:14.978Z
Learning: In this project, translations are only added to the English locale (en.json) through pull requests. Other locale files are managed through Crowdin and should not be modified directly in PRs.
src/pages/Appointments/AppointmentDetail.tsx (1)
Learnt from: rithviknishad
PR: ohcnetwork/care_fe#9956
File: src/pages/Appointments/AppointmentDetail.tsx:424-443
Timestamp: 2025-01-15T04:14:29.514Z
Learning: The codebase implements a global error handler that manages toast notifications and other necessary actions based on HttpError. Explicit error handling in mutations is not required as errors are handled globally.
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: OSSAR-Scan
- GitHub Check: cypress-run (1)
- GitHub Check: CodeQL-Build
- GitHub Check: OSSAR-Scan
🔇 Additional comments (8)
src/types/scheduling/schedule.ts (2)
5-5: LGTM!The import follows the project's conventions and is used in the
Appointmentinterface.
117-117: Reevaluate inclusion of "rescheduled" inAppointmentCancelledStatusesIncluding
"rescheduled"inAppointmentCancelledStatusesmay not accurately represent its state. Typically, a rescheduled appointment is active rather than canceled. Consider whether"rescheduled"should be part ofAppointmentNonCancelledStatusesor handled separately to reflect its true status.src/pages/Patient/index.tsx (3)
6-6: LGTM!The toast notification is correctly implemented to provide user feedback after canceling an appointment.
Also applies to: 71-71
69-70: LGTM!The dialog state management is correctly implemented to close the dialog after successful cancellation.
154-172: Add click handler for reschedule buttonThe reschedule button is missing an onClick handler, making it non-functional.
src/pages/Appointments/AppointmentDetail.tsx (3)
403-404: LGTM!The state management for the reschedule dialog and slot selection is well-implemented.
424-443: LGTM!The reschedule mutation is well-implemented with proper success handling. The global error handler will manage any errors.
477-521: LGTM!The reschedule UI is well-implemented with proper state management, slot picker integration, and button states.
| export const AppointmentFinalStatuses: AppointmentStatus[] = [ | ||
| "fulfilled", | ||
| "cancelled", | ||
| "entered_in_error", | ||
| "rescheduled", | ||
| ]; |
There was a problem hiding this comment.
Remove "rescheduled" from AppointmentFinalStatuses
A rescheduled appointment is not a terminal state but rather a transition state that leads to a new appointment. Including it in AppointmentFinalStatuses could prevent users from performing valid actions on rescheduled appointments.
Apply this diff to fix the issue:
export const AppointmentFinalStatuses: AppointmentStatus[] = [
"fulfilled",
"cancelled",
"entered_in_error",
- "rescheduled",
];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const AppointmentFinalStatuses: AppointmentStatus[] = [ | |
| "fulfilled", | |
| "cancelled", | |
| "entered_in_error", | |
| "rescheduled", | |
| ]; | |
| export const AppointmentFinalStatuses: AppointmentStatus[] = [ | |
| "fulfilled", | |
| "cancelled", | |
| "entered_in_error", | |
| ]; |
Required Backends
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Release Notes
New Features
Improvements
Translations
User Experience