Merge branch 'develop' of https://github.com/DonXavierdev/care_fe int…

…o issues/7417/File-upload-enhancement

.github/workflows/label-merge-conflict.yml

@@ -16,7 +16,7 @@ jobs:
     if: github.repository == 'ohcnetwork/care_fe'
     runs-on: ubuntu-24.04-arm
     steps:
-      - uses: prince-chrismc/label-merge-conflicts-action@v2
+      - uses: prince-chrismc/label-merge-conflicts-action@v3
         with:
           conflict_label_name: "merge conflict"
           github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -11,7 +11,7 @@ permissions:
 jobs:
   release:
     name: Release on Push
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
         with:

public/locale/en.json

@@ -949,6 +949,7 @@
   "external_identifier": "External Identifier",
   "facilities": "Facilities",
   "facility": "Facility",
+  "facility_actions_menu": "Facility action menu",
   "facility_added_successfully": "Facility created successfully",
   "facility_consent_requests_page_title": "Patient Consent List",
   "facility_count_one": "{{count}} Facility",
@@ -1294,8 +1295,7 @@
   "never_logged_in": "Never Logged In",
   "new_password": "New Password",
   "new_password_confirmation": "Confirm New Password",
-  "new_password_different_from_old": "Your new password is different from the old password.",
-  "new_password_same_as_old": "Your new password must not match the old password.",
+  "new_password_same_as_old": "Your new password <strong>must not match the old password </strong> ",
   "new_password_validation": "New password is not valid.",
   "new_session": "New Session",
   "next_month": "Next month",
@@ -1440,21 +1440,18 @@
   "pain_chart_description": "Mark region and intensity of pain",
   "passport_number": "Passport Number",
   "password": "Password",
-  "password_length_met": "It's at least 8 characters long",
-  "password_length_validation": "Use at least 8 characters",
-  "password_lowercase_met": "It includes at least one lowercase letter",
-  "password_lowercase_validation": "Include at least one lowercase letter",
+  "password_length_validation": "Use at least <strong>8 characters</strong>",
+  "password_lowercase_validation": "Include at least <strong>one lowercase letter</strong> (a-z)",
   "password_mismatch": "Passwords do not match",
-  "password_number_met": "It includes at least one number.",
-  "password_number_validation": "Include at least one number.",
+  "password_number_validation": "Include at least <strong>one number</strong> (0-9)",
   "password_required": "Password is required",
   "password_reset_failure": "Password Reset Failed",
   "password_reset_success": "Password Reset successfully",
   "password_sent": "Password Reset Email Sent",
+  "password_success_message": "All set! Your password is strong",
   "password_update_error": "Error while updating password. Try again later.",
   "password_updated": "Password updated successfully",
-  "password_uppercase_met": "It includes at least one uppercase letter.",
-  "password_uppercase_validation": "Include at least one uppercase letter.",
+  "password_uppercase_validation": "Include at least <strong>one uppercase letter</strong> (A-Z).",
   "passwords_match": "Passwords match.",
   "patient": "Patient",
   "patient-notes": "Notes",
@@ -2135,12 +2132,14 @@
   "username": "Username",
   "username_already_exists": "This username already exists",
   "username_available": "Username is available",
-  "username_characters_validation": "Only lowercase letters, numbers, and . _ - are allowed",
-  "username_consecutive_validation": "Cannot contain consecutive special characters",
-  "username_max_length_validation": "Use at most 16 characters",
-  "username_min_length_validation": "Use at least 4 characters",
+  "username_characters_validation": "Only <strong>lowercase letters, numbers, and . _ -  </strong>are allowed",
+  "username_consecutive_validation": "Cannot contain <strong>consecutive special characters</strong>",
+  "username_max_length_validation": "Use at most <strong>16 characters</strong>",
+  "username_min_length_validation": "Use at least <strong>4 characters</strong>",
   "username_not_available": "Username is not available",
-  "username_start_end_validation": "Must start and end with a letter or number",
+  "username_not_valid": "username is not valid",
+  "username_start_end_validation": "Must start and end with a <strong>letter</strong> or <strong>number</strong>",
+  "username_success_message": "All set! Your username is strong",
   "username_userdetails_not_found": "Unable to fetch details as username or user details not found",
   "username_valid": "Username is valid",
   "users": "Users",

src/components/Auth/ResetPassword.tsx

@@ -6,7 +6,7 @@ import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { PasswordInput } from "@/components/ui/input-password";
 
-import { validateRule } from "@/components/Users/UserFormValidations";
+import { ValidationHelper } from "@/components/Users/UserFormValidations";
 
 import { LocalStorageKeys } from "@/common/constants";
 import { validatePassword } from "@/common/validation";
@@ -27,9 +27,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
   const initErr: any = {};
   const [form, setForm] = useState(initForm);
   const [errors, setErrors] = useState(initErr);
-  const [passwordInputInFocus, setPasswordInputInFocus] = useState(false);
-  const [confirmPasswordInputInFocus, setConfirmPasswordInputInFocus] =
-    useState(false);
+  const [isPasswordFieldFocused, setIsPasswordFieldFocused] = useState(false);
 
   const { t } = useTranslation();
   const handleChange = (e: any) => {
@@ -124,40 +122,41 @@ const ResetPassword = (props: ResetPasswordProps) => {
               name="password"
               placeholder={t("new_password")}
               onChange={handleChange}
-              onFocus={() => setPasswordInputInFocus(true)}
-              onBlur={() => setPasswordInputInFocus(false)}
+              onFocus={() => setIsPasswordFieldFocused(true)}
+              onBlur={() => setIsPasswordFieldFocused(false)}
             />
             {errors.password && (
               <div className="mt-1 text-red-500 text-xs" data-input-error>
                 {errors.password}
               </div>
             )}
-            {passwordInputInFocus && (
-              <div className="text-sm mt-2 pl-2 text-secondary-500">
-                {validateRule(
-                  form.password?.length >= 8,
-                  t("password_length_validation"),
-                  !form.password,
-                  t("password_length_met"),
-                )}
-                {validateRule(
-                  form.password !== form.password.toUpperCase(),
-                  t("password_lowercase_validation"),
-                  !form.password,
-                  t("password_lowercase_met"),
-                )}
-                {validateRule(
-                  form.password !== form.password.toLowerCase(),
-                  t("password_uppercase_validation"),
-                  !form.password,
-                  t("password_uppercase_met"),
-                )}
-                {validateRule(
-                  /\d/.test(form.password),
-                  t("password_number_validation"),
-                  !form.password,
-                  t("password_number_met"),
-                )}
+            {isPasswordFieldFocused && (
+              <div
+                className="text-small mt-2 pl-2 text-secondary-500"
+                aria-live="polite"
+              >
+                <ValidationHelper
+                  isInputEmpty={!form.password}
+                  successMessage={t("password_success_message")}
+                  validations={[
+                    {
+                      description: "password_length_validation",
+                      fulfilled: form.password?.length >= 8,
+                    },
+                    {
+                      description: "password_lowercase_validation",
+                      fulfilled: /[a-z]/.test(form.password),
+                    },
+                    {
+                      description: "password_uppercase_validation",
+                      fulfilled: /[A-Z]/.test(form.password),
+                    },
+                    {
+                      description: "password_number_validation",
+                      fulfilled: /\d/.test(form.password),
+                    },
+                  ]}
+                />
               </div>
             )}
           </div>
@@ -167,23 +166,12 @@ const ResetPassword = (props: ResetPasswordProps) => {
               name="confirm"
               placeholder={t("confirm_password")}
               onChange={handleChange}
-              onFocus={() => setConfirmPasswordInputInFocus(true)}
-              onBlur={() => setConfirmPasswordInputInFocus(false)}
             />
             {errors.confirm && (
               <div className="mt-1 text-red-500 text-xs" data-input-error>
                 {errors.confirm}
               </div>
             )}
-            {confirmPasswordInputInFocus &&
-              form.confirm.length > 0 &&
-              form.password.length > 0 &&
-              validateRule(
-                form.confirm === form.password,
-                t("password_mismatch"),
-                !form.password && form.password.length > 0,
-                t("password_match"),
-              )}
           </div>
         </div>
 

src/components/Facility/FacilityHome.tsx

@@ -1,4 +1,10 @@
 import careConfig from "@careConfig";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Hospital, MapPin, MoreVertical, Settings } from "lucide-react";
 import { navigate } from "raviger";
@@ -219,32 +225,44 @@ export const FacilityHome = ({ facilityId }: Props) => {
               )}
 
               <div className="absolute inset-x-0 bottom-0 p-6 text-white">
-                <div className="flex items-center gap-6">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-4">
+                <div className="flex flex-wrap items-center gap-4 md:gap-6">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 md:gap-4">
                       <Avatar
                         name={facilityData.name}
-                        className="h-12 w-12 shrink-0 rounded-xl border-2 border-white/10 shadow-xl"
+                        className="h-9 w-9 md:h-12 md:w-12 shrink-0 rounded-xl border-2 border-white/10 shadow-xl"
                       />
-                      <div>
-                        <h1 className="text-3xl font-bold text-white">
-                          {facilityData?.name}
-                        </h1>
+                      <div className="min-w-0">
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <h1 className="text-sm md:text-3xl text-white md:font-bold">
+                                {facilityData?.name}
+                              </h1>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p className="text-sm text-white bg-black rounded-md p-2">
+                                {facilityData?.name}
+                              </p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
                       </div>
                     </div>
                   </div>
                   <div className="flex-shrink-0">
-                    <DropdownMenu modal={false}>
+                    <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <Button
                           variant="secondary"
                           size="icon"
-                          className="bg-white/20 hover:bg-white/40"
+                          aria-label={t("facility_actions_menu")}
+                          className="bg-white/20 hover:bg-white/40 w-8 h-8"
                         >
                           <MoreVertical className="h-4 w-4 text-white" />
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end" className="w-56">
+                      <DropdownMenuContent align="end" className="w-48 md:w-56">
                         {hasPermissionToEditCoverImage && (
                           <DropdownMenuItem
                             className="cursor-pointer"
@@ -293,7 +311,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
             <div className="mt-2 space-y-2">
               <Card>
                 <CardContent>
-                  <div className="flex flex-col gap-4 items-start mt-4">
+                  <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-12 mt-4">
                     <div className="flex items-start gap-3">
                       <MapPin className="mt-2 h-5 w-5 flex-shrink-0 text-muted-foreground" />
                       <div>

src/components/Files/FilesTab.tsx

@@ -595,7 +595,7 @@ const FileUploadDialog = ({
             {fileUpload.files.length > 1 ? t("upload_files") : t("upload_file")}
           </DialogTitle>
         </DialogHeader>
-        <div className="space-y-4">
+        <div className="space-y-6 pr-5 max-h-[70vh] overflow-y-auto">
           {isPdf ? (
             <>
               {fileUpload.files.map((file, index) => (

src/components/Resource/ResourceBoard.tsx

@@ -43,7 +43,7 @@ export default function BoardView() {
     cacheBlacklist: ["title"],
   });
   const [boardFilter, setBoardFilter] = useState(ACTIVE);
-  // eslint-disable-next-line
+
   const appliedFilters = formatFilter(qParams);
   const { t } = useTranslation();