support for creating availability and redesign weekday checkbox

closes #9738
ohcnetwork · Jan 9, 2025 · e208412 · e208412
1 parent aa3a1b6
commit e208412
Show file tree

Hide file tree

Showing 7 changed files with 506 additions and 378 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -437,6 +437,7 @@
   "authorize_shift_delete": "Authorize shift delete",
   "auto_generated_for_care": "Auto Generated for Care",
   "autofilled_fields": "Autofilled Fields",
+  "availabilities": "Availabilities",
   "available_features": "Available Features",
   "available_in": "Available in",
   "available_time_slots": "Available Time Slots",
@@ -657,6 +658,7 @@
   "created_by": "Created By",
   "created_date": "Created Date",
   "created_on": "Created On",
+  "creating": "Creating...",
   "criticality": "Criticality",
   "csv_file_in_the_specified_format": "Select a CSV file in the specified format",
   "current_address": "Current Address",
@@ -1240,11 +1242,13 @@
   "new_password_confirmation": "Confirm New Password",
   "new_password_same_as_old": "New password is same as old password, please enter a different new password.",
   "new_password_validation": "New password is not valid.",
+  "new_session": "New Session",
   "next_sessions": "Next Sessions",
   "no": "No",
   "no_address_provided": "No address provided",
   "no_appointments": "No appointments found",
   "no_attachments_found": "This communication has no attachments.",
+  "no_availabilities_yet": "No availabilities yet",
   "no_bed_asset_linked_allocated": "No bed/asset linked allocated",
   "no_bed_types_found": "No Bed Types found",
   "no_beds_available": "No beds available",
@@ -1624,16 +1628,15 @@
   "scan_asset_qr": "Scan Asset QR!",
   "schedule": "Schedule",
   "schedule_appointment": "Schedule Appointment",
+  "schedule_availability_created_successfully": "Availability created successfully",
   "schedule_availability_deleted_successfully": "Schedule availability deleted successfully",
-  "schedule_availability_updated_successfully": "Schedule availability updated successfully",
   "schedule_calendar": "Schedule Calendar",
   "schedule_end_time": "End Time",
   "schedule_for": "Scheduled for",
   "schedule_information": "Schedule Information",
   "schedule_remarks": "Remarks",
   "schedule_remarks_placeholder": "Any additional notes about this session",
   "schedule_session_time": "Session Time",
-  "schedule_session_title": "Session Title",
   "schedule_session_type": "Session Type",
   "schedule_sessions": "Sessions",
   "schedule_sessions_min_error": "Add at least one session",
@@ -1644,7 +1647,6 @@
   "schedule_template": "Schedule Template",
   "schedule_template_name": "Template Name",
   "schedule_template_name_placeholder": "Regular OP Day",
-  "schedule_tokens_per_slot": "Patients per Slot",
   "schedule_valid_from_till_range": "Valid from <strong>{{from_date}}</strong> till <strong>{{to_date}}</strong>",
   "schedule_weekdays": "Weekdays",
   "schedule_weekdays_description": "Select the weekdays applicable for the template",
@@ -1704,6 +1706,7 @@
   "send_sample_to_collection_centre_title": "Send sample to collection centre",
   "serial_number": "Serial Number",
   "serviced_on": "Serviced on",
+  "session_capacity": "Session Capacity",
   "session_expired": "Session Expired",
   "session_expired_msg": "It appears that your session has expired. This could be due to inactivity. Please login again to continue.",
   "session_title": "Session Title",
@@ -1738,6 +1741,7 @@
   "skill_add_error": "Error while adding skill",
   "skill_added_successfully": "Skill added successfully",
   "skills": "Skills",
+  "slot_configuration": "Slot Configuration",
   "slots_left": "slots left",
   "social_profile": "Social Profile",
   "social_profile_detail": "Include occupation, ration card category, socioeconomic status, and domestic healthcare support for a complete profile.",
@@ -1803,6 +1807,7 @@
   "total_amount": "Total Amount",
   "total_beds": "Total Beds",
   "total_patients": "Total Patients",
+  "total_slots": "Total Slots",
   "total_staff": "Total Staff",
   "total_users": "Total Users",
   "transcribe_again": "Transcribe Again",

diff --git a/src/CAREUI/interactive/WeekdayCheckbox.tsx b/src/CAREUI/interactive/WeekdayCheckbox.tsx
@@ -1,31 +1,32 @@
 import { useTranslation } from "react-i18next";
 
-import { cn } from "@/lib/utils";
-
-import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
 
 // 0 is Monday, 6 is Sunday - Python's convention.
-const DAYS_OF_WEEK = {
-  MONDAY: 0,
-  TUESDAY: 1,
-  WEDNESDAY: 2,
-  THURSDAY: 3,
-  FRIDAY: 4,
-  SATURDAY: 5,
-  SUNDAY: 6,
-} as const;
-
-export type DayOfWeekValue = (typeof DAYS_OF_WEEK)[keyof typeof DAYS_OF_WEEK];
+export enum DayOfWeek {
+  MONDAY = 0,
+  TUESDAY = 1,
+  WEDNESDAY = 2,
+  THURSDAY = 3,
+  FRIDAY = 4,
+  SATURDAY = 5,
+  SUNDAY = 6,
+}
 
 interface Props {
-  value?: DayOfWeekValue[];
-  onChange?: (value: DayOfWeekValue[]) => void;
+  value?: DayOfWeek[];
+  onChange?: (value: DayOfWeek[]) => void;
+  format?: "alphabet" | "short" | "long";
 }
 
-export default function WeekdayCheckbox({ value = [], onChange }: Props) {
+export default function WeekdayCheckbox({
+  value = [],
+  onChange,
+  format = "alphabet",
+}: Props) {
   const { t } = useTranslation();
 
-  const handleDayToggle = (day: DayOfWeekValue) => {
+  const handleDayToggle = (day: DayOfWeek) => {
     if (!onChange) return;
 
     if (value.includes(day)) {
@@ -36,36 +37,35 @@ export default function WeekdayCheckbox({ value = [], onChange }: Props) {
   };
 
   return (
-    <ul className="flex justify-between">
-      {Object.values(DAYS_OF_WEEK).map((day) => {
-        const isChecked = value.includes(day);
+    <div className="flex gap-2 md:gap-4">
+      {[
+        "MONDAY",
+        "TUESDAY",
+        "WEDNESDAY",
+        "THURSDAY",
+        "FRIDAY",
+        "SATURDAY",
+        "SUNDAY",
+      ].map((day) => {
+        const dow = DayOfWeek[day as keyof typeof DayOfWeek];
+        const isSelected = value.includes(dow);
 
         return (
-          <li key={day}>
-            <div
-              className={cn(
-                "flex flex-col items-center justify-center gap-2 rounded-lg border px-8 py-6 transition-all duration-200 ease-in-out",
-                isChecked
-                  ? "border-primary-500 bg-white shadow"
-                  : "border-gray-300",
-              )}
-            >
-              <Checkbox
-                id={`day_of_week_checkbox_${day}`}
-                checked={isChecked}
-                onCheckedChange={() => handleDayToggle(day)}
-              />
-              <label
-                htmlFor={`day_of_week_checkbox_${day}`}
-                className="cursor-pointer text-xs font-semibold uppercase"
-                onClick={(e) => e.stopPropagation()}
-              >
-                {t(`DAYS_OF_WEEK_SHORT__${day}`)}
-              </label>
-            </div>
-          </li>
+          <Button
+            key={dow}
+            type="button"
+            variant={isSelected ? "outline_primary" : "outline"}
+            onClick={() => handleDayToggle(dow)}
+            size={format === "alphabet" ? "icon" : "default"}
+          >
+            {format === "alphabet"
+              ? day[0]
+              : format === "short"
+                ? t(`DAYS_OF_WEEK_SHORT__${dow}`)
+                : t(`DAYS_OF_WEEK__${dow}`)}
+          </Button>
         );
       })}
-    </ul>
+    </div>
   );
 }