- {unlinkFacilityData.show && (
-
- - {isLoading || userFacilitiesLoading ? ( -
- );
-}
diff --git a/src/components/Users/UserHome.tsx b/src/components/Users/UserHome.tsx
index 8c12ad2c561..f441e66370d 100644
--- a/src/components/Users/UserHome.tsx
+++ b/src/components/Users/UserHome.tsx
@@ -38,6 +38,8 @@ export default function UserHome(props: UserHomeProps) {
if (!username) {
username = authUser.username;
}
+ const loggedInUser = username === authUser.username;
+ const urlPrefix = loggedInUser ? "/user" : `/users/${username}`;
const { loading, refetch: refetchUserDetails } = useTanStackQueryInstead(
routes.getUserDetails,
@@ -96,7 +98,11 @@ export default function UserHome(props: UserHomeProps) {
<>
- addFacility(username, facility)}
- >
- {t("add")}
-
-
- - - {isLoading || userFacilitiesLoading ? ( -
-
- ) : (
-
- {/* Home Facility section */}
- {user?.home_facility_object && (
-
- )}
-
-
- )}
-
- {/* Linked Facilities section */}
- {!!userFacilities?.results.length && (
-
-
-
- {user?.home_facility_object?.name}
-
-
-
-
-
- )}
-
-
- )}
- {!user?.home_facility_object && !userFacilities?.results.length && (
-
- {userFacilities.results.map(
- (facility: FacilityModel, i: number) => {
- if (user?.home_facility_object?.id === facility.id) {
- // skip if it's a home facility
- return null;
- }
- return (
-
- {totalCount > limit && (
-
-
- );
- },
- )}
-
- {facility.name}
- {(["DistrictAdmin", "StateAdmin"].includes(
- authUser.user_type,
- ) ||
- username === authUser.username) && (
-
-
- {authUser.user_type !== "Nurse" && (
-
- )}
-
-
- )}
-
-
- )}
-
-
- )}
-
- 
-
-
- - {t("no_linked_facilities")} -
-
{t(`USERMANAGEMENT_TAB__${p}`)}
diff --git a/src/components/Users/UserProfile.tsx b/src/components/Users/UserProfile.tsx
deleted file mode 100644
index 786e569c4db..00000000000
--- a/src/components/Users/UserProfile.tsx
+++ /dev/null
@@ -1,1032 +0,0 @@
-import careConfig from "@careConfig";
-import { FormEvent, useEffect, useReducer, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import AvatarEditModal from "@/components/Common/AvatarEditModal";
-import AvatarEditable from "@/components/Common/AvatarEditable";
-import ButtonV2, { Submit } from "@/components/Common/ButtonV2";
-import LanguageSelector from "@/components/Common/LanguageSelector";
-import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
-import UpdatableApp, { checkForUpdate } from "@/components/Common/UpdatableApp";
-import { PhoneNumberValidator } from "@/components/Form/FieldValidators";
-import DateFormField from "@/components/Form/FormFields/DateFormField";
-import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
-import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
-import TextFormField from "@/components/Form/FormFields/TextFormField";
-import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
-import { validateRule } from "@/components/Users/UserAddEditForm";
-import {
- GenderType,
- SkillModel,
- UpdatePasswordForm,
-} from "@/components/Users/models";
-
-import useAuthUser, { useAuthContext } from "@/hooks/useAuthUser";
-
-import { GENDER_TYPES } from "@/common/constants";
-import { validateEmailAddress } from "@/common/validation";
-
-import * as Notification from "@/Utils/Notifications";
-import dayjs from "@/Utils/dayjs";
-import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
-import uploadFile from "@/Utils/request/uploadFile";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
-import { getAuthorizationHeader } from "@/Utils/request/utils";
-import {
- dateQueryString,
- formatDate,
- formatDisplayName,
- isValidUrl,
- parsePhoneNumber,
- sleep,
-} from "@/Utils/utils";
-
-type EditForm = {
- firstName: string;
- lastName: string;
- date_of_birth: Date | null | string;
- gender: GenderType;
- email: string;
- video_connect_link: string | undefined;
- phoneNumber: string;
- altPhoneNumber: string;
- user_type: string | undefined;
- qualification: string | undefined;
- doctor_experience_commenced_on: number | string | undefined;
- doctor_medical_council_registration: string | undefined;
- weekly_working_hours: string | null | undefined;
-};
-type ErrorForm = {
- firstName: string;
- lastName: string;
- date_of_birth: string | null;
- gender: string;
- email: string;
- video_connect_link: string | undefined;
- phoneNumber: string;
- altPhoneNumber: string;
- user_type: string | undefined;
- qualification: string | undefined;
- doctor_experience_commenced_on: number | string | undefined;
- doctor_medical_council_registration: string | undefined;
- weekly_working_hours: string | undefined;
-};
-type State = {
- form: EditForm;
- errors: ErrorForm;
-};
-type Action =
- | { type: "set_form"; form: EditForm }
- | { type: "set_error"; errors: ErrorForm };
-
-const initForm: EditForm = {
- firstName: "",
- lastName: "",
- date_of_birth: null,
- gender: "Male",
- video_connect_link: "",
- email: "",
- phoneNumber: "",
- altPhoneNumber: "",
- user_type: "",
- qualification: undefined,
- doctor_experience_commenced_on: undefined,
- doctor_medical_council_registration: undefined,
- weekly_working_hours: undefined,
-};
-
-const initError: ErrorForm = Object.assign(
- {},
- ...Object.keys(initForm).map((k) => ({ [k]: "" })),
-);
-
-const initialState: State = {
- form: { ...initForm },
- errors: { ...initError },
-};
-
-const editFormReducer = (state: State, action: Action) => {
- switch (action.type) {
- case "set_form": {
- return {
- ...state,
- form: action.form,
- };
- }
- case "set_error": {
- return {
- ...state,
- errors: action.errors,
- };
- }
- }
-};
-
-export default function UserProfile() {
- const { t } = useTranslation();
- const { signOut, refetchUser } = useAuthContext();
- const [states, dispatch] = useReducer(editFormReducer, initialState);
- const [editAvatar, setEditAvatar] = useState(false);
- const [updateStatus, setUpdateStatus] = useState({
- isChecking: false,
- isUpdateAvailable: false,
- });
- const [dirty, setDirty] = useState(false);
-
- const authUser = useAuthUser();
-
- const [changePasswordForm, setChangePasswordForm] = useState<{
- username: string;
- old_password: string;
- new_password_1: string;
- new_password_2: string;
- }>({
- username: authUser.username,
- old_password: "",
- new_password_1: "",
- new_password_2: "",
- });
-
- const [changePasswordErrors] = useState<{
- old_password: string;
- password_confirmation: string;
- }>({
- old_password: "",
- password_confirmation: "",
- });
-
- const [showEdit, setShowEdit] = useState(false);
-
- useEffect(() => {
- const formData: EditForm = {
- firstName: authUser.first_name,
- lastName: authUser.last_name,
- date_of_birth: authUser.date_of_birth || null,
- gender: authUser.gender || "Male",
- email: authUser.email,
- video_connect_link: authUser.video_connect_link,
- phoneNumber: authUser.phone_number?.toString() || "",
- altPhoneNumber: authUser.alt_phone_number?.toString() || "",
- user_type: authUser.user_type,
- qualification: authUser.qualification,
- doctor_experience_commenced_on: dayjs().diff(
- dayjs(authUser.doctor_experience_commenced_on),
- "years",
- ),
- doctor_medical_council_registration:
- authUser.doctor_medical_council_registration,
- weekly_working_hours: authUser.weekly_working_hours,
- };
- dispatch({
- type: "set_form",
- form: formData,
- });
- setDirty(false);
- }, [authUser]);
-
- const { data: skillsView, loading: isSkillsLoading } =
- useTanStackQueryInstead(routes.userListSkill, {
- pathParams: { username: authUser.username },
- });
-
- const validatePassword = (password: string) => {
- const rules = [
- {
- test: (p: string) => p.length >= 8,
- message: "Password should be at least 8 characters long",
- },
- {
- test: (p: string) => p !== p.toUpperCase(),
- message: "Password should contain at least 1 lowercase letter",
- },
- {
- test: (p: string) => p !== p.toLowerCase(),
- message: "Password should contain at least 1 uppercase letter",
- },
- {
- test: (p: string) => /\d/.test(p),
- message: "Password should contain at least 1 number",
- },
- ];
- return rules.map((rule) =>
- validateRule(rule.test(password), rule.message, !password),
- );
- };
-
- const validateNewPassword = (password: string) => {
- if (
- password.length < 8 ||
- !/\d/.test(password) ||
- password === password.toUpperCase() ||
- password === password.toLowerCase()
- ) {
- return false;
- }
- return true;
- };
-
- const validateForm = () => {
- const errors = { ...initError };
- let invalidForm = false;
- Object.keys(states.form).forEach((field) => {
- switch (field) {
- case "firstName":
- case "lastName":
- case "gender":
- if (!states.form[field]) {
- errors[field] = t("field_required");
- invalidForm = true;
- }
- return;
- case "date_of_birth":
- if (!states.form[field]) {
- errors[field] = "Enter a valid date of birth";
- invalidForm = true;
- } else if (
- !dayjs(states.form[field]).isValid() ||
- dayjs(states.form[field]).isAfter(dayjs().subtract(17, "year"))
- ) {
- errors[field] = "Enter a valid date of birth";
- invalidForm = true;
- }
- return;
- case "phoneNumber":
- // eslint-disable-next-line no-case-declarations
- const phoneNumber = parsePhoneNumber(states.form[field]);
-
- // eslint-disable-next-line no-case-declarations
- let is_valid = false;
- if (phoneNumber) {
- is_valid = PhoneNumberValidator()(phoneNumber) === undefined;
- }
-
- if (!states.form[field] || !is_valid) {
- errors[field] = "Please enter valid phone number";
- invalidForm = true;
- }
- return;
- case "altPhoneNumber":
- // eslint-disable-next-line no-case-declarations
- let alt_is_valid = false;
- if (states.form[field] && states.form[field] !== "+91") {
- const altPhoneNumber = parsePhoneNumber(states.form[field]);
- if (altPhoneNumber) {
- alt_is_valid =
- PhoneNumberValidator(["mobile"])(altPhoneNumber) === undefined;
- }
- }
-
- if (
- states.form[field] &&
- states.form[field] !== "+91" &&
- !alt_is_valid
- ) {
- errors[field] = "Please enter valid mobile number";
- invalidForm = true;
- }
- return;
- case "email":
- if (!states.form[field]) {
- errors[field] = t("field_required");
- invalidForm = true;
- } else if (!validateEmailAddress(states.form[field])) {
- errors[field] = "Enter a valid email address";
- invalidForm = true;
- }
- return;
- case "doctor_experience_commenced_on":
- if (states.form.user_type === "Doctor" && !states.form[field]) {
- errors[field] = t("field_required");
- invalidForm = true;
- } else if (
- (states.form.user_type === "Doctor" &&
- Number(states.form.doctor_experience_commenced_on) >= 100) ||
- Number(states.form.doctor_experience_commenced_on) < 0
- ) {
- errors[field] =
- "Doctor experience should be at least 0 years and less than 100 years.";
- invalidForm = true;
- }
- return;
- case "qualification":
- if (
- (states.form.user_type === "Doctor" ||
- states.form.user_type === "Nurse") &&
- !states.form[field]
- ) {
- errors[field] = t("field_required");
- invalidForm = true;
- }
- return;
- case "doctor_medical_council_registration":
- if (states.form.user_type === "Doctor" && !states.form[field]) {
- errors[field] = t("field_required");
- invalidForm = true;
- }
- return;
- case "weekly_working_hours":
- if (
- states.form[field] &&
- (Number(states.form[field]) < 0 ||
- Number(states.form[field]) > 168 ||
- !/^\d+$/.test(states.form[field] ?? ""))
- ) {
- errors[field] =
- "Average weekly working hours must be a number between 0 and 168";
- invalidForm = true;
- }
- return;
- case "video_connect_link":
- if (states.form[field]) {
- if (isValidUrl(states.form[field]) === false) {
- errors[field] = "Please enter a valid url";
- invalidForm = true;
- }
- }
- return;
- }
- });
- dispatch({ type: "set_error", errors });
- return !invalidForm;
- };
-
- const handleFieldChange = (event: FieldChangeEvent) => {
- dispatch({
- type: "set_form",
- form: { ...states.form, [event.name]: event.value },
- });
- setDirty(true);
- };
-
- const getDate = (value: any) =>
- value && dayjs(value).isValid() && dayjs(value).toDate();
-
- const fieldProps = (name: string) => {
- return {
- name,
- id: name,
- value: (states.form as any)[name],
- onChange: handleFieldChange,
- error: (states.errors as any)[name],
- };
- };
-
- const handleSubmit = async (e: FormEvent) => {
- e.preventDefault();
- const validForm = validateForm();
- if (validForm) {
- const data = {
- username: authUser.username,
- first_name: states.form.firstName,
- last_name: states.form.lastName,
- email: states.form.email,
- video_connect_link: states.form.video_connect_link,
- phone_number: parsePhoneNumber(states.form.phoneNumber) ?? "",
- alt_phone_number: parsePhoneNumber(states.form.altPhoneNumber) ?? "",
- gender: states.form.gender,
- date_of_birth: dateQueryString(states.form.date_of_birth),
- qualification:
- states.form.user_type === "Doctor" ||
- states.form.user_type === "Nurse"
- ? states.form.qualification
- : undefined,
- doctor_experience_commenced_on:
- states.form.user_type === "Doctor"
- ? dayjs()
- .subtract(
- parseInt(
- (states.form.doctor_experience_commenced_on as string) ??
- "0",
- ),
- "years",
- )
- .format("YYYY-MM-DD")
- : undefined,
- doctor_medical_council_registration:
- states.form.user_type === "Doctor"
- ? states.form.doctor_medical_council_registration
- : undefined,
- weekly_working_hours:
- states.form.weekly_working_hours &&
- states.form.weekly_working_hours !== ""
- ? states.form.weekly_working_hours
- : null,
- };
- const { res } = await request(routes.partialUpdateUser, {
- pathParams: { username: authUser.username },
- body: data,
- });
- if (res?.ok) {
- Notification.Success({
- msg: "Details updated successfully",
- });
- await refetchUser();
- setShowEdit(false);
- }
- }
- };
-
- const isLoading = isSkillsLoading;
-
- if (isLoading) {
- return
- setEditAvatar(false)}
- />
-
- );
-}
diff --git a/src/components/Users/UserSoftwareUpdate.tsx b/src/components/Users/UserSoftwareUpdate.tsx
new file mode 100644
index 00000000000..5cc685f575d
--- /dev/null
+++ b/src/components/Users/UserSoftwareUpdate.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button } from "@/components/ui/button";
+
+import UpdatableApp, { checkForUpdate } from "@/components/Common/UpdatableApp";
+
+import * as Notification from "@/Utils/Notifications";
+
+export default function UserSoftwareUpdate() {
+ const [updateStatus, setUpdateStatus] = useState({
+ isChecking: false,
+ isUpdateAvailable: false,
+ });
+ const { t } = useTranslation();
+
+ const checkUpdates = async () => {
+ setUpdateStatus({ ...updateStatus, isChecking: true });
+ await new Promise((resolve) => setTimeout(resolve, 500));
+ if ((await checkForUpdate()) != null) {
+ setUpdateStatus({
+ isUpdateAvailable: true,
+ isChecking: false,
+ });
+ } else {
+ setUpdateStatus({
+ isUpdateAvailable: false,
+ isChecking: false,
+ });
+ Notification.Success({
+ msg: "No update available",
+ });
+ }
+ };
+
+ return (
+ <>
+ {updateStatus.isChecking ? (
+ // While checking for updates
+
+ ) : updateStatus.isUpdateAvailable ? (
+ // When an update is available
+
+
+
+ ) : (
+ // Default state to check for updates
+
+ )}
+
+ );
+}
diff --git a/src/components/Users/UserSummary.tsx b/src/components/Users/UserSummary.tsx
index f75aa066e65..9b703deddbd 100644
--- a/src/components/Users/UserSummary.tsx
+++ b/src/components/Users/UserSummary.tsx
@@ -15,6 +15,7 @@ import {
UserProfessionalInfoView,
} from "@/components/Users/UserEditDetails";
import UserResetPassword from "@/components/Users/UserResetPassword";
+import UserSoftwareUpdate from "@/components/Users/UserSoftwareUpdate";
import {
BasicInfoDetails,
ContactInfoDetails,
@@ -200,12 +201,20 @@ export default function UserSummaryTab({
/>
)}
{authUser.username === userData.username && (
-
-
-
-
-
- - {t("local_body")}, {t("district")}, {t("state")}{" "} - {t("are_non_editable_fields")}. -
-
- setEditAvatar(!editAvatar)}
- className="h-20 w-20"
- />
-
-
-
- - {authUser.first_name} {authUser.last_name} -
-- @{authUser.username} -
-
- setShowEdit(!showEdit)}
- type="button"
- id="edit-cancel-profile-button"
- >
- {showEdit ? t("cancel") : t("edit_user_profile")}
-
-
-
-
-
- {!showEdit && !isLoading && (
-
-
-
- )}
- {showEdit && (
- -
-
- - {t("username")} - -
- - {authUser.username || "-"} - -
- - {t("phone_number")} - -
- - {authUser.phone_number || "-"} - -
- - {t("whatsapp_number")} - -
- - {authUser.alt_phone_number || "-"} - -
- - {t("email")} - -
- - {authUser.email || "-"} - -
- - {t("first_name")} - -
- - {authUser.first_name || "-"} - -
- - {t("last_name")} - -
- - {authUser.last_name || "-"} - -
- - {t("date_of_birth")} - -
- - {authUser.date_of_birth - ? formatDate(authUser.date_of_birth) - : "-"} - -
- - {t("access_level")} - -
-
-
- {authUser.user_type || "-"} -
- - - {t("gender")} - -
- - {authUser.gender || "-"} - -
- - {t("local_body")} - -
- - {authUser.local_body_object?.name || "-"} - -
- - {t("district")} - -
- - {authUser.district_object?.name || "-"} - -
- - {t("state")} - -
- - {authUser.state_object?.name || "-"} - -
- - {t("skills")} - -
-
- - {skillsView?.results?.length - ? skillsView.results?.map((skill: SkillModel) => { - return ( - --
- {skill.skill_object.name} -
- - ); - }) - : "-"} -
- - - {t("average_weekly_working_hours")} - -
- - {authUser.weekly_working_hours ?? "-"} - -
- - {t("video_conference_link")} - -
- - {authUser.video_connect_link ? ( - - {authUser.video_connect_link} - - ) : ( - "-" - )} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
-
- - {t("language_selection")} -
-- {t("set_your_local_language")} -
-
-
-
-
-
-
-
-
- - {t("software_update")} -
-- {t("check_for_available_update")} -
-
- {updateStatus.isChecking ? (
- // While checking for updates
-
-
- ) : updateStatus.isUpdateAvailable ? (
- // When an update is available
-
-
-
-
- ) : (
- // Default state to check for updates
-
-
- )}
-
-
-
-
-
-
-
-
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000000..de505bc5833
--- /dev/null
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,118 @@
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+ HTMLElement,
+ React.ComponentPropsWithoutRef<"nav"> & {
+ separator?: React.ReactNode;
+ }
+>(({ ...props }, ref) => );
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+ HTMLOListElement,
+ React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+