feat: disposition modal, persistent top bar, pagination, QA fixes

- DispositionModal: single modal for all call endings. Dismissable (agent can resume call).
  Agent clicks End → modal → select reason → hangup + dispose. Caller disconnects → same modal.
- One call screen: CallWidget stripped to ringing notification + auto-redirect to Call Desk.
- Persistent top bar in AppShell: agent status toggle + network indicator on all pages.
- Network indicator always visible (Connected/Unstable/No connection).
- Pagination: Untitled UI PaginationCardDefault on Call History + Appointments (20/page).
- Pinned table headers/footers: sticky column headers, scrollable body, pinned pagination.
  Applied to Call Desk worklist, Call History, Appointments, Call Recordings, Missed Calls.
- "Patient" → "Caller" column label in Call History.
- Offline → Ready toggle enabled.
- Profile status dot reflects Ozonetel state.
- NavAccountCard: popover placement top, View Profile + Account Settings restored.
- WIP pages for /profile and /account-settings.
- Enquiry form PHONE_INQUIRY → PHONE enum fix.
- Force Ready / View Profile / Account Settings removed then restored properly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/application/app-navigation/base-components/nav-account-card.tsx

@@ -2,12 +2,11 @@ import type { FC, HTMLAttributes } from "react";
 import { useCallback, useEffect, useRef } from "react";
 import type { Placement } from "@react-types/overlays";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUser, faGear, faArrowRightFromBracket, faPhoneVolume, faSort } from "@fortawesome/pro-duotone-svg-icons";
+import { faArrowRightFromBracket, faSort, faUser, faGear } from "@fortawesome/pro-duotone-svg-icons";
 
 const IconUser: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faUser} className={className} />;
 const IconSettings: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faGear} className={className} />;
 const IconLogout: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowRightFromBracket} className={className} />;
-const IconForceReady: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faPhoneVolume} className={className} />;
 import { useFocusManager } from "react-aria";
 import type { DialogProps as AriaDialogProps } from "react-aria-components";
 import { Button as AriaButton, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";
@@ -32,9 +31,10 @@ type NavAccountType = {
 export const NavAccountMenu = ({
     className,
     onSignOut,
-    onForceReady,
+    onViewProfile,
+    onAccountSettings,
     ...dialogProps
-}: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string; onSignOut?: () => void; onForceReady?: () => void }) => {
+}: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string; onSignOut?: () => void; onViewProfile?: () => void; onAccountSettings?: () => void }) => {
     const focusManager = useFocusManager();
     const dialogRef = useRef<HTMLDivElement>(null);
 
@@ -75,12 +75,10 @@ export const NavAccountMenu = ({
                 <>
                     <div className="rounded-xl bg-primary ring-1 ring-secondary">
                         <div className="flex flex-col gap-0.5 py-1.5">
-                            <NavAccountCardMenuItem label="View profile" icon={IconUser} shortcut="⌘K->P" />
-                            <NavAccountCardMenuItem label="Account settings" icon={IconSettings} shortcut="⌘S" />
-                            <NavAccountCardMenuItem label="Force Ready" icon={IconForceReady} onClick={() => { close(); onForceReady?.(); }} />
+                            <NavAccountCardMenuItem label="View profile" icon={IconUser} onClick={() => { close(); onViewProfile?.(); }} />
+                            <NavAccountCardMenuItem label="Account settings" icon={IconSettings} onClick={() => { close(); onAccountSettings?.(); }} />
                         </div>
                     </div>
-
                     <div className="pt-1 pb-1.5">
                         <NavAccountCardMenuItem label="Sign out" icon={IconLogout} shortcut="⌥⇧Q" onClick={() => { close(); onSignOut?.(); }} />
                     </div>
@@ -126,13 +124,15 @@ export const NavAccountCard = ({
     selectedAccountId,
     items = [],
     onSignOut,
-    onForceReady,
+    onViewProfile,
+    onAccountSettings,
 }: {
     popoverPlacement?: Placement;
     selectedAccountId?: string;
     items?: NavAccountType[];
     onSignOut?: () => void;
-    onForceReady?: () => void;
+    onViewProfile?: () => void;
+    onAccountSettings?: () => void;
 }) => {
     const triggerRef = useRef<HTMLDivElement>(null);
     const isDesktop = useBreakpoint("lg");
@@ -173,7 +173,7 @@ export const NavAccountCard = ({
                             )
                         }
                     >
-                        <NavAccountMenu selectedAccountId={selectedAccountId} accounts={items} onSignOut={onSignOut} onForceReady={onForceReady} />
+                        <NavAccountMenu selectedAccountId={selectedAccountId} accounts={items} onSignOut={onSignOut} onViewProfile={onViewProfile} onAccountSettings={onAccountSettings} />
                     </AriaPopover>
                 </AriaDialogTrigger>
             </div>

src/components/application/pagination/pagination.tsx

@@ -1,11 +1,10 @@
 import type { FC } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft, faArrowRight } from "@fortawesome/pro-duotone-svg-icons";
+import { Button } from "@/components/base/buttons/button";
 
 const ArrowLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowLeft} className={className} />;
 const ArrowRight: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowRight} className={className} />;
-import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
-import { Button } from "@/components/base/buttons/button";
 import { useBreakpoint } from "@/hooks/use-breakpoint";
 import { cx } from "@/utils/cx";
 import type { PaginationRootProps } from "./pagination-base";
@@ -23,7 +22,7 @@ const PaginationItem = ({ value, rounded, isCurrent }: { value: number; rounded?
             isCurrent={isCurrent}
             className={({ isSelected }) =>
                 cx(
-                    "flex size-10 cursor-pointer items-center justify-center p-3 text-sm font-medium text-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-secondary focus-visible:z-10 focus-visible:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2",
+                    "flex size-9 cursor-pointer items-center justify-center p-3 text-sm font-medium text-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-secondary focus-visible:z-10 focus-visible:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2",
                     rounded ? "rounded-full" : "rounded-lg",
                     isSelected && "bg-primary_hover text-secondary",
                 )
@@ -34,43 +33,6 @@ const PaginationItem = ({ value, rounded, isCurrent }: { value: number; rounded?
     );
 };
 
-interface MobilePaginationProps {
-    /** The current page. */
-    page?: number;
-    /** The total number of pages. */
-    total?: number;
-    /** The class name of the pagination component. */
-    className?: string;
-    /** The function to call when the page changes. */
-    onPageChange?: (page: number) => void;
-}
-
-const MobilePagination = ({ page = 1, total = 10, className, onPageChange }: MobilePaginationProps) => {
-    return (
-        <nav aria-label="Pagination" className={cx("flex items-center justify-between md:hidden", className)}>
-            <Button
-                aria-label="Go to previous page"
-                iconLeading={ArrowLeft}
-                color="secondary"
-                size="sm"
-                onClick={() => onPageChange?.(Math.max(0, page - 1))}
-            />
-
-            <span className="text-sm text-fg-secondary">
-                Page <span className="font-medium">{page}</span> of <span className="font-medium">{total}</span>
-            </span>
-
-            <Button
-                aria-label="Go to next page"
-                iconLeading={ArrowRight}
-                color="secondary"
-                size="sm"
-                onClick={() => onPageChange?.(Math.min(total, page + 1))}
-            />
-        </nav>
-    );
-};
-
 export const PaginationPageDefault = ({ rounded, page = 1, total = 10, className, ...props }: PaginationProps) => {
     const isDesktop = useBreakpoint("md");
 
@@ -84,7 +46,7 @@ export const PaginationPageDefault = ({ rounded, page = 1, total = 10, className
             <div className="hidden flex-1 justify-start md:flex">
                 <Pagination.PrevTrigger asChild>
                     <Button iconLeading={ArrowLeft} color="link-gray" size="sm">
-                        {isDesktop ? "Previous" : undefined}{" "}
+                        {isDesktop ? "Previous" : undefined}
                     </Button>
                 </Pagination.PrevTrigger>
             </div>
@@ -103,7 +65,7 @@ export const PaginationPageDefault = ({ rounded, page = 1, total = 10, className
                                 page.type === "page" ? (
                                     <PaginationItem key={index} rounded={rounded} {...page} />
                                 ) : (
-                                    <Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
+                                    <Pagination.Ellipsis key={index} className="flex size-9 shrink-0 items-center justify-center text-tertiary">
                                         &#8230;
                                     </Pagination.Ellipsis>
                                 ),
@@ -159,7 +121,7 @@ export const PaginationPageMinimalCenter = ({ rounded, page = 1, total = 10, cla
                                 page.type === "page" ? (
                                     <PaginationItem key={index} rounded={rounded} {...page} />
                                 ) : (
-                                    <Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
+                                    <Pagination.Ellipsis key={index} className="flex size-9 shrink-0 items-center justify-center text-tertiary">
                                         &#8230;
                                     </Pagination.Ellipsis>
                                 ),
@@ -210,7 +172,7 @@ export const PaginationCardDefault = ({ rounded, page = 1, total = 10, ...props
                                 page.type === "page" ? (
                                     <PaginationItem key={index} rounded={rounded} {...page} />
                                 ) : (
-                                    <Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
+                                    <Pagination.Ellipsis key={index} className="flex size-9 shrink-0 items-center justify-center text-tertiary">
                                         &#8230;
                                     </Pagination.Ellipsis>
                                 ),
@@ -235,99 +197,3 @@ export const PaginationCardDefault = ({ rounded, page = 1, total = 10, ...props
     );
 };
 
-interface PaginationCardMinimalProps {
-    /** The current page. */
-    page?: number;
-    /** The total number of pages. */
-    total?: number;
-    /** The alignment of the pagination. */
-    align?: "left" | "center" | "right";
-    /** The class name of the pagination component. */
-    className?: string;
-    /** The function to call when the page changes. */
-    onPageChange?: (page: number) => void;
-}
-
-export const PaginationCardMinimal = ({ page = 1, total = 10, align = "left", onPageChange, className }: PaginationCardMinimalProps) => {
-    return (
-        <div className={cx("border-t border-secondary px-4 py-3 md:px-6 md:pt-3 md:pb-4", className)}>
-            <MobilePagination page={page} total={total} onPageChange={onPageChange} />
-
-            <nav aria-label="Pagination" className={cx("hidden items-center gap-3 md:flex", align === "center" && "justify-between")}>
-                <div className={cx(align === "center" && "flex flex-1 justify-start")}>
-                    <Button isDisabled={page === 1} color="secondary" size="sm" onClick={() => onPageChange?.(Math.max(0, page - 1))}>
-                        Previous
-                    </Button>
-                </div>
-
-                <span
-                    className={cx(
-                        "text-sm font-medium text-fg-secondary",
-                        align === "right" && "order-first mr-auto",
-                        align === "left" && "order-last ml-auto",
-                    )}
-                >
-                    Page {page} of {total}
-                </span>
-
-                <div className={cx(align === "center" && "flex flex-1 justify-end")}>
-                    <Button isDisabled={page === total} color="secondary" size="sm" onClick={() => onPageChange?.(Math.min(total, page + 1))}>
-                        Next
-                    </Button>
-                </div>
-            </nav>
-        </div>
-    );
-};
-
-interface PaginationButtonGroupProps extends Partial<Omit<PaginationRootProps, "children">> {
-    /** The alignment of the pagination. */
-    align?: "left" | "center" | "right";
-}
-
-export const PaginationButtonGroup = ({ align = "left", page = 1, total = 10, ...props }: PaginationButtonGroupProps) => {
-    const isDesktop = useBreakpoint("md");
-
-    return (
-        <div
-            className={cx(
-                "flex border-t border-secondary px-4 py-3 md:px-6 md:pt-3 md:pb-4",
-                align === "left" && "justify-start",
-                align === "center" && "justify-center",
-                align === "right" && "justify-end",
-            )}
-        >
-            <Pagination.Root {...props} page={page} total={total}>
-                <Pagination.Context>
-                    {({ pages }) => (
-                        <ButtonGroup size="md">
-                            <Pagination.PrevTrigger asChild>
-                                <ButtonGroupItem iconLeading={ArrowLeft}>{isDesktop ? "Previous" : undefined}</ButtonGroupItem>
-                            </Pagination.PrevTrigger>
-
-                            {pages.map((page, index) =>
-                                page.type === "page" ? (
-                                    <Pagination.Item key={index} {...page} asChild>
-                                        <ButtonGroupItem isSelected={page.isCurrent} className="size-10 items-center justify-center">
-                                            {page.value}
-                                        </ButtonGroupItem>
-                                    </Pagination.Item>
-                                ) : (
-                                    <Pagination.Ellipsis key={index}>
-                                        <ButtonGroupItem className="pointer-events-none size-10 items-center justify-center rounded-none!">
-                                            &#8230;
-                                        </ButtonGroupItem>
-                                    </Pagination.Ellipsis>
-                                ),
-                            )}
-
-                            <Pagination.NextTrigger asChild>
-                                <ButtonGroupItem iconTrailing={ArrowRight}>{isDesktop ? "Next" : undefined}</ButtonGroupItem>
-                            </Pagination.NextTrigger>
-                        </ButtonGroup>
-                    )}
-                </Pagination.Context>
-            </Pagination.Root>
-        </div>
-    );
-};

src/components/application/table/table.tsx

@@ -55,7 +55,7 @@ const TableContext = createContext<{ size: "sm" | "md" }>({ size: "md" });
 const TableCardRoot = ({ children, className, size = "md", ...props }: HTMLAttributes<HTMLDivElement> & { size?: "sm" | "md" }) => {
     return (
         <TableContext.Provider value={{ size }}>
-            <div {...props} className={cx("overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary", className)}>
+            <div {...props} className={cx("flex flex-col overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary", className)}>
                 {children}
             </div>
         </TableContext.Provider>
@@ -81,7 +81,7 @@ const TableCardHeader = ({ title, badge, description, contentTrailing, className
     return (
         <div
             className={cx(
-                "relative flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row",
+                "relative shrink-0 flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row",
                 size === "sm" ? "py-4 md:px-5" : "py-5 md:px-6",
                 className,
             )}
@@ -115,8 +115,8 @@ const TableRoot = ({ className, size = "md", ...props }: TableRootProps) => {
 
     return (
         <TableContext.Provider value={{ size: context?.size ?? size }}>
-            <div className="overflow-x-auto">
-                <AriaTable className={(state) => cx("w-full overflow-x-hidden", typeof className === "function" ? className(state) : className)} {...props} />
+            <div className="flex-1 overflow-auto min-h-0">
+                <AriaTable className={(state) => cx("w-full", typeof className === "function" ? className(state) : className)} {...props} />
             </div>
         </TableContext.Provider>
     );
@@ -138,7 +138,7 @@ const TableHeader = <T extends object>({ columns, children, bordered = true, cla
             {...props}
             className={(state) =>
                 cx(
-                    "relative bg-secondary",
+                    "relative bg-secondary sticky top-0 z-10",
                     size === "sm" ? "h-9" : "h-11",
 
                     // Row border—using an "after" pseudo-element to avoid the border taking up space.