- 
-
-
-
-
-
-
-
-
+
+ );
+}
diff --git a/src/components/Common/LoginHeader.tsx b/src/components/Common/LoginHeader.tsx
index 30d329b580a..fcd6a6d4d45 100644
--- a/src/components/Common/LoginHeader.tsx
+++ b/src/components/Common/LoginHeader.tsx
@@ -1,91 +1,91 @@
+import careConfig from "@careConfig";
import dayjs from "dayjs";
+import { ChevronDown, LogOut, User } from "lucide-react";
import { navigate } from "raviger";
import { useTranslation } from "react-i18next";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
+import { formatPhoneNumberIntl } from "react-phone-number-input";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
-import { Avatar } from "@/components/Common/Avatar";
-
-import { usePatientSignOut } from "@/hooks/usePatientSignOut";
-
-import { LocalStorageKeys } from "@/common/constants";
-
-import { TokenData } from "@/types/otp/otp";
+import { useAuthContext } from "@/hooks/useAuthUser";
export const LoginHeader = () => {
const { t } = useTranslation();
- const signOut = usePatientSignOut();
-
- const tokenData: TokenData = JSON.parse(
- localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
- );
+ const { signOut, patientToken } = useAuthContext();
const isLoggedIn =
- tokenData.token &&
- Object.keys(tokenData).length > 0 &&
- dayjs(tokenData.createdAt).isAfter(dayjs().subtract(14, "minutes"));
+ !!patientToken?.token &&
+ dayjs(patientToken.createdAt).isAfter(
+ dayjs().subtract(careConfig.patientTokenFreshnessMinutes, "minutes"),
+ );
+
+ const phone = patientToken?.phoneNumber
+ ? formatPhoneNumberIntl(patientToken.phoneNumber) ||
+ patientToken.phoneNumber
+ : "";
if (isLoggedIn) {
return (
-
-
-
-
-
-
-
-
- {tokenData.phoneNumber}
-
-
+
+
+
+
-
-
-
+
-
-
+
+ {label}
+ {children}
+
+ );
+}
+
+export function AppointmentTokenPass({
+ appointment,
+ className,
+}: {
+ appointment: PublicAppointment;
+ className?: string;
+}) {
+ const { t } = useTranslation();
+ const start = dayjs(appointment.token_slot.start_datetime);
+
+ return (
+
+
+ );
+}
diff --git a/src/components/Patient/CancelAppointmentButton.tsx b/src/components/Patient/CancelAppointmentButton.tsx
new file mode 100644
index 00000000000..ec8e6687685
--- /dev/null
+++ b/src/components/Patient/CancelAppointmentButton.tsx
@@ -0,0 +1,94 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+import ConfirmActionDialog from "@/components/Common/ConfirmActionDialog";
+import { Button } from "@/components/ui/button";
+
+import { usePatientContext } from "@/hooks/usePatientUser";
+
+import mutate from "@/Utils/request/mutate";
+import PublicAppointmentApi from "@/types/scheduling/PublicAppointmentApi";
+import {
+ AppointmentFinalStatuses,
+ PublicAppointment,
+ formatScheduleResourceName,
+} from "@/types/scheduling/schedule";
+
+export function isAppointmentCancellable(
+ appointment: PublicAppointment,
+): boolean {
+ return !AppointmentFinalStatuses.includes(appointment.status);
+}
+
+interface CancelAppointmentButtonProps {
+ appointment: PublicAppointment;
+ size?: React.ComponentProps
+
+ {appointment.patient.name}
+
+ {formatPatientAge(appointment.patient, true)} ·{" "}
+ {t(`GENDER__${appointment.patient.gender}`)}
+
+
+
+
+
+ {formatScheduleResourceName(appointment)}
+
+
+
+
+
+
+
+ {appointment.token_slot.availability.name}
+
+
+ {start.format("ddd, D MMM")} ·{" "}
+ {formatSlotTimeRange(appointment.token_slot)}
+
+
+
+
+ {appointment.facility.name}
+
+
+ {appointment.token ? (
+
+
+
+ {t("token_no")}
+
+
+ {renderTokenNumber(appointment.token)}
+
+
+ ) : (
+
+
+ {t("patient_booking__booking_reference")}
+
+
+ {appointment.id.slice(0, 8)}
+
+
+ )}
+
+
+ {reportTitle(report, t)}
+
+
+ {dayjs(report.created_date).format("DD MMM YYYY")}
+ {report.encounter?.facility?.name &&
+ ` · ${report.encounter.facility.name}`}
+
+
+
+ {!isReady ? (
+
+ {t("patient_records__processing")}
+
+ ) : (
+ flags > 0 && (
+
+ {t("patient_records__flagged_count", { count: flags })}
+
+ )
+ )}
+ {isReady && (
+
+
+ );
+
+ const rowClassName = cn(
+ "flex items-center gap-3 rounded-2xl border bg-white p-4",
+ !isReady && "border-dashed border-gray-300 bg-gray-50",
+ isReady && "hover:border-gray-300",
+ isReady && (flags > 0 ? "border-warning-200" : "border-gray-200"),
+ className,
+ );
+
+ if (!isReady) {
+ return {content}
;
+ }
+
+ return (
+
+ {content}
+
+ );
+}
diff --git a/src/components/Patient/PatientAppShell.tsx b/src/components/Patient/PatientAppShell.tsx
new file mode 100644
index 00000000000..f8f6f179895
--- /dev/null
+++ b/src/components/Patient/PatientAppShell.tsx
@@ -0,0 +1,315 @@
+import careConfig from "@careConfig";
+import {
+ ArrowLeft,
+ CalendarDays,
+ Check,
+ ChevronDown,
+ FolderClosed,
+ Home,
+ User,
+} from "lucide-react";
+import { Link, navigate, usePath } from "raviger";
+import { createContext, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { cn } from "@/lib/utils";
+
+import { PatientAvatar } from "@/components/Patient/PatientProfileCard";
+import { PatientSwitcherSheet } from "@/components/Patient/PatientSwitcherSheet";
+
+import { Button } from "@/components/ui/button";
+import { usePatientContext } from "@/hooks/usePatientUser";
+
+/** How long the "now showing records for X" confirmation stays up. */
+const SWITCH_NOTICE_MS = 3000;
+
+/** Lets descendant screens open the shell's shared patient switcher sheet. */
+const PatientShellContext = createContext<{
+ openSwitcher: () => void;
+ canSwitch: boolean;
+}>({ openSwitcher: () => {}, canSwitch: false });
+
+const TABS = [
+ { key: "home", href: "/patient/home", icon: Home, label: "home" },
+ {
+ key: "visits",
+ href: "/patient/visits",
+ icon: CalendarDays,
+ label: "visits",
+ },
+ {
+ key: "records",
+ href: "/patient/records",
+ icon: FolderClosed,
+ label: "records",
+ },
+ { key: "profile", href: "/patient/profile", icon: User, label: "profile" },
+] as const;
+
+/** `Anitha Ravindran` → `Anitha R.` so the header chip stays on one line. */
+function abbreviateName(name: string): string {
+ const parts = name.trim().split(/\s+/);
+ if (parts.length < 2) {
+ return parts[0] ?? "";
+ }
+ return `${parts[0]} ${parts[parts.length - 1][0]}.`;
+}
+
+interface PatientAppShellProps {
+ children: React.ReactNode;
+ title?: string;
+ /** Renders a back affordance instead of the tab bar's implicit navigation. */
+ backTo?: string;
+ /** Detail screens hide the tab bar so the page owns the full height. */
+ hideTabs?: boolean;
+ /** Trailing header content, e.g. a download action on detail screens. */
+ headerAction?: React.ReactNode;
+ /** Underline tabs rendered inside the header — use `PatientHeaderTabs`. */
+ headerTabs?: React.ReactNode;
+}
+
+/**
+ * The section switcher used by Records and Visits. Lives here so both screens
+ * share one implementation and stay visually identical.
+ */
+export function PatientHeaderTabs
+ {tabs.map((tab) => (
+
+ ))}
+
+ );
+}
+
+export function PatientAppShell({
+ children,
+ title,
+ backTo,
+ hideTabs,
+ headerAction,
+ headerTabs,
+}: PatientAppShellProps) {
+ const { t } = useTranslation();
+ const path = usePath();
+ const { selectedPatient, patients } = usePatientContext();
+
+ const [switcherOpen, setSwitcherOpen] = useState(false);
+ const [switchedTo, setSwitchedTo] = useState
+ {sideNav}
+ setSwitchedTo(patient.name)}
+ />
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+ {!hideTabs && (
+
+ )}
+
+
+ {backTo && (
+
+ )}
+ {title ? (
+
+
+ )}
+
+ {headerTabs}
+ + {title} +
+ ) : ( + +
+ {headerAction}
+ {!hideTabs && switcherChip}
+
+
+ {switchedTo && (
+
+
+
+
+ )}
+
+ {patients?.map((patient) => (
+
+
+
+
+
+ {formatName(prescription.prescribed_by)}
+
+
+ {[
+ dayjs(prescription.created_date).format("DD MMM YYYY"),
+ prescription.encounter?.facility?.name,
+ prescription.name,
+ ]
+ .filter(Boolean)
+ .join(" · ")}
+
+
+
+
+ {eyebrow ?? start.fromNow()}
+
+ {appointment.token && (
+
+ {t("token")} {renderTokenNumber(appointment.token)}
+
+ )}
+
+ )}
+
+
+ {isUpcoming ? (
+
+
+ );
+}
diff --git a/src/components/Resource/CcnConsole.tsx b/src/components/Resource/CcnConsole.tsx
new file mode 100644
index 00000000000..174e64eabfa
--- /dev/null
+++ b/src/components/Resource/CcnConsole.tsx
@@ -0,0 +1,404 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link, navigate, useQueryParams } from "raviger";
+import { ComponentProps, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import Loading from "@/components/Common/Loading";
+import PageTitle from "@/components/Common/PageTitle";
+import AppointmentWizard from "@/components/Resource/beckn/AppointmentWizard";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { EmptyState } from "@/components/ui/empty-state";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+import query from "@/Utils/request/query";
+import { relativeTime } from "@/Utils/utils";
+import { becknPatientFrom } from "@/types/beckn/becknModels";
+import {
+ getResourceRequestCategoryEnum,
+ ResourceRequestListRead,
+ ResourceRequestRead,
+ ResourceRequestStatus,
+} from "@/types/resourceRequest/resourceRequest";
+import resourceRequestApi from "@/types/resourceRequest/resourceRequestApi";
+
+interface CcnConsoleProps {
+ facilityId: string;
+ resourceId?: string;
+}
+
+/** Which side of the referral this facility is on. */
+type CcnTab = "incoming" | "outgoing";
+
+type BadgeVariant = ComponentProps
+
+ ) : (
+
+ {start.format("ddd")}
+
+
+ {start.format("DD")}
+
+
+ {start.format("MMM")}
+
+
+
+ )}
+
+
+ {start.format("MMM")}
+
+
+ {start.format("DD")}
+
+
+
+
+
+
+ {formatScheduleResourceName(appointment)}
+
+ {!isUpcoming &&
+ appointment.status !== AppointmentStatus.FULFILLED && (
+
+ {t(appointment.status)}
+
+ )}
+
+
+ {isUpcoming ? (
+ <>
+
+ {appointment.token_slot.availability.name} ·{" "}
+ {formatSlotTimeRange(appointment.token_slot)}
+
+
+ {appointment.facility.name}
+
+
+ ) : (
+ <>
+
+ {appointment.facility.name}
+
+
+ {[
+ start.format("h:mm A"),
+ appointment.token &&
+ `${t("token")} ${renderTokenNumber(appointment.token)}`,
+ ]
+ .filter(Boolean)
+ .join(" · ")}
+
+
+ )}
+
+
+ );
+}
+
+function RequestListItem({
+ item,
+ facilityId,
+ isOutgoing,
+ active,
+}: {
+ item: ResourceRequestListRead;
+ facilityId: string;
+ isOutgoing: boolean;
+ active: boolean;
+}) {
+ const { t } = useTranslation();
+ const readyToBook =
+ !isOutgoing && item.status === ResourceRequestStatus.APPROVED;
+
+ return (
+
+
+
+
+ {resourceId ? (
+ // Keyed so per-request state (the booked banner, wizard progress)
+ // can never leak across selections via a cached detail query.
+
+
+
+
+ )}
+
+
+ {item.title || t("ccn_untitled_request")}
+
+
+ {t(`resource_request_status__${item.status}`)}
+
+
+
+ {item.origin_facility?.name ?? ""}
+ {relativeTime(item.modified_date)}
+
+ {readyToBook ? (
+
+
+
+
+
+ {resource.title || t("ccn_untitled_request")}
+
+ {t(`resource_request_status__${resource.status}`)}
+
+
+
+
+
+
+
+ {readOnly ? (
+
+ );
+}
+
+/**
+ * Entry point to the appointment flow for an approved request: a CTA card that
+ * opens the full-screen wizard, and — once the wizard confirms — a booked
+ * banner in its place.
+ */
+function BookingLauncher({
+ facilityId,
+ resource,
+}: {
+ facilityId: string;
+ resource: ResourceRequestRead;
+}) {
+ const { t } = useTranslation();
+ const [wizardOpen, setWizardOpen] = useState(false);
+ const [booked, setBooked] = useState(false);
+
+ return (
+ <>
+ {booked ? (
+ {t("ccn_outgoing_read_only")}
+ ) : isApproved ? ( ++ {t("ccn_booking_available_once_approved")} +
+ )} +
+
+ ) : (
+ {t("ccn_booked_banner")}
+
+
+
+ {t("book_appointment")}
++ {t("ccn_booking_cta_description")} +
+
+ {label}
+ {value}
+
+ );
+}
diff --git a/src/components/Resource/ResourceForm.tsx b/src/components/Resource/ResourceForm.tsx
index 9054c2472c3..822d8674504 100644
--- a/src/components/Resource/ResourceForm.tsx
+++ b/src/components/Resource/ResourceForm.tsx
@@ -7,11 +7,11 @@ import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import * as z from "zod";
-import CareIcon from "@/CAREUI/icons/CareIcon";
+import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
-import RadioInput from "@/components/ui/RadioInput";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import Autocomplete from "@/components/ui/autocomplete";
+import BackButton from "@/components/Common/BackButton";
+import Loading from "@/components/Common/Loading";
+import PageTitle from "@/components/Common/PageTitle";
import { Button } from "@/components/ui/button";
import {
Form,
@@ -23,7 +23,6 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
-import { PhoneInput } from "@/components/ui/phone-input";
import {
Select,
SelectContent,
@@ -32,21 +31,17 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-
-import Loading from "@/components/Common/Loading";
-import PageTitle from "@/components/Common/PageTitle";
-import UserSelector from "@/components/Common/UserSelector";
-
-import useAuthUser from "@/hooks/useAuthUser";
import mutate from "@/Utils/request/mutate";
import query from "@/Utils/request/query";
-import { formatName, mergeAutocompleteOptions, valuesOf } from "@/Utils/utils";
-import validators from "@/Utils/validators";
-import BackButton from "@/components/Common/BackButton";
+import { valuesOf } from "@/Utils/utils";
+import BecknFlow from "@/components/Resource/beckn/BecknFlow";
+import { cn } from "@/lib/utils";
+import {
+ becknPatientFrom,
+ healthServiceTypeForCategory,
+} from "@/types/beckn/becknModels";
import patientApi from "@/types/emr/patient/patientApi";
-import publicFacilityApi from "@/types/facility/publicFacilityApi";
import {
getResourceRequestCategoryEnum,
RESOURCE_REQUEST_STATUS_OPTIONS,
@@ -55,41 +50,39 @@ import {
ResourceRequestStatus,
} from "@/types/resourceRequest/resourceRequest";
import resourceRequestApi from "@/types/resourceRequest/resourceRequestApi";
-import { UserReadMinimal } from "@/types/user/user";
interface ResourceProps {
- facilityId: number;
+ facilityId: string;
id?: string;
}
+// Consultation discover searches the network for Care Coordination Desks; the
+// user then picks which desk/facility to assign the referral to.
+const COORDINATION_DESK_SEARCH = "Care Coordination Desk";
+
+const CATEGORY_ICONS: Record
+ {
+ toast.success(t("resource_created_successfully"));
+ navigate(
+ `/facility/${facilityId}/patient/${related_patient}/resource_requests`,
+ );
+ }}
+ />
+
+ );
+ }
+
return (
-
+
+
+
+