[Customer Portal][Web] Enhance Time Display, Enforce Timezone for Scheduling, and Refine Call Request UI Logic

apps/customer-portal/webapp/src/api/usePatchCallRequest.ts

@@ -67,6 +67,9 @@ export function usePatchCallRequest(
       if (rest.utcTimes != null && rest.utcTimes.length > 0) {
         body.utcTimes = rest.utcTimes;
       }
+      if (rest.durationInMinutes != null) {
+        body.durationInMinutes = rest.durationInMinutes;
+      }
       logger.debug("[usePatchCallRequest] Request payload:", body);
 
       try {

apps/customer-portal/webapp/src/components/project-details/project-overview/service-hours-allocations/ServiceHoursAllocationsCard.tsx

@@ -25,7 +25,10 @@ import { Clock } from "@wso2/oxygen-ui-icons-react";
 import type { JSX } from "react";
 
 import type { ProjectDetails } from "@models/responses";
-import { formatProjectDate } from "@utils/projectDetails";
+import {
+  formatProjectDate,
+  formatServiceHoursDecimalAsHrMin,
+} from "@utils/projectDetails";
 import ErrorIndicator from "@components/common/error-indicator/ErrorIndicator";
 
 export interface ServiceHoursAllocationsCardProps {
@@ -44,12 +47,11 @@ function formatHoursDisplay(
   const c = Number(consumed ?? 0);
   const t = Number(total ?? 0);
   const pct = t === 0 ? 0 : Math.round((c / t) * 100);
-  return `${c}/${t}h (${pct}%)`;
+  return `${formatServiceHoursDecimalAsHrMin(c)}/${formatServiceHoursDecimalAsHrMin(t)} (${pct}%)`;
 }
 
 function formatRemaining(value: number | undefined): string {
-  if (value == null || typeof value !== "number") return NOT_AVAILABLE;
-  return `${value}h`;
+  return formatServiceHoursDecimalAsHrMin(value);
 }
 
 /**

apps/customer-portal/webapp/src/components/project-details/project-overview/service-hours-allocations/__tests__/ServiceHoursAllocationsCard.test.tsx

@@ -48,10 +48,14 @@ describe("ServiceHoursAllocationsCard", () => {
 
     expect(screen.getByText("Query Hours")).toBeInTheDocument();
     expect(screen.getByText("Onboarding Hours")).toBeInTheDocument();
-    expect(screen.getByText("45/100h (45%)")).toBeInTheDocument();
-    expect(screen.getByText("180/200h (90%)")).toBeInTheDocument();
-    expect(screen.getByText("55h")).toBeInTheDocument();
-    expect(screen.getByText("20h")).toBeInTheDocument();
+    expect(
+      screen.getByText("45 hrs/100 hrs (45%)"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("180 hrs/200 hrs (90%)"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("55 hrs")).toBeInTheDocument();
+    expect(screen.getByText("20 hrs")).toBeInTheDocument();
     expect(screen.getByText("Apr 30, 2026")).toBeInTheDocument();
   });
 

apps/customer-portal/webapp/src/components/project-details/time-tracking/ServiceHoursStatCards.tsx

@@ -19,7 +19,10 @@ import { Clock } from "@wso2/oxygen-ui-icons-react";
 import type { JSX } from "react";
 
 import type { ProjectDetails } from "@models/responses";
-import { formatProjectDate } from "@utils/projectDetails";
+import {
+  formatProjectDate,
+  formatServiceHoursDecimalAsHrMin,
+} from "@utils/projectDetails";
 import ErrorIndicator from "@components/common/error-indicator/ErrorIndicator";
 
 export interface ServiceHoursStatCardsProps {
@@ -38,12 +41,11 @@ function formatHoursDisplay(
   const c = Number(consumed ?? 0);
   const t = Number(total ?? 0);
   const pct = t === 0 ? 0 : Math.round((c / t) * 100);
-  return `${c}/${t}h (${pct}%)`;
+  return `${formatServiceHoursDecimalAsHrMin(c)}/${formatServiceHoursDecimalAsHrMin(t)} (${pct}%)`;
 }
 
 function formatRemaining(value: number | undefined): string {
-  if (value == null || typeof value !== "number") return NOT_AVAILABLE;
-  return `${value}h`;
+  return formatServiceHoursDecimalAsHrMin(value);
 }
 
 /**

apps/customer-portal/webapp/src/components/project-details/time-tracking/TimeTrackingCard.tsx

@@ -17,7 +17,10 @@
 import { Card, Box, Typography, Chip, useTheme } from "@wso2/oxygen-ui";
 import { type JSX } from "react";
 import type { TimeCard } from "@models/responses";
-import { getTimeCardStateColorPath } from "@utils/projectDetails";
+import {
+  formatMinutesAsHrMin,
+  getTimeCardStateColorPath,
+} from "@utils/projectDetails";
 import { getSupportOverviewChipSx, getPlainChipSx } from "@utils/support";
 
 interface TimeTrackingCardProps {
@@ -40,11 +43,7 @@ export default function TimeTrackingCard({
   const caseNumber = caseData?.number?.trim() || "--";
   const approvedByName = approvedBy?.label?.trim() || "--";
 
-  // Convert totalTime from minutes to hours
-  const totalTimeInHours =
-    totalTime !== undefined && totalTime !== null
-      ? Math.round((totalTime / 60) * 100) / 100
-      : null;
+  const totalTimeDisplay = formatMinutesAsHrMin(totalTime);
 
   const stateColorPath = getTimeCardStateColorPath(state);
 
@@ -119,7 +118,7 @@ export default function TimeTrackingCard({
               color: "text.primary",
             }}
           >
-            {totalTimeInHours !== null ? `${totalTimeInHours} hrs` : "--"}
+            {totalTimeDisplay === "Not Available" ? "--" : totalTimeDisplay}
           </Typography>
         </Box>
       </Box>

apps/customer-portal/webapp/src/components/project-details/time-tracking/__tests__/ServiceHoursStatCards.test.tsx

@@ -39,10 +39,14 @@ describe("ServiceHoursStatCards", () => {
 
     expect(screen.getByText("Query Hours")).toBeInTheDocument();
     expect(screen.getByText("Onboarding Hours")).toBeInTheDocument();
-    expect(screen.getByText("45/100h (45%)")).toBeInTheDocument();
-    expect(screen.getByText("180/200h (90%)")).toBeInTheDocument();
-    expect(screen.getByText("55h")).toBeInTheDocument();
-    expect(screen.getByText("20h")).toBeInTheDocument();
+    expect(
+      screen.getByText("45 hrs/100 hrs (45%)"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("180 hrs/200 hrs (90%)"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("55 hrs")).toBeInTheDocument();
+    expect(screen.getByText("20 hrs")).toBeInTheDocument();
     expect(screen.getByText("Apr 30, 2026")).toBeInTheDocument();
   });
 

apps/customer-portal/webapp/src/components/project-details/time-tracking/__tests__/TimeTrackingCard.test.tsx

@@ -42,7 +42,7 @@ describe("TimeTrackingCard", () => {
     expect(screen.getByText("Approved")).toBeInTheDocument();
     expect(screen.getByText("Billable")).toBeInTheDocument();
     expect(screen.getByText("CS0437343")).toBeInTheDocument();
-    expect(screen.getByText("1 hrs")).toBeInTheDocument(); // 60 minutes = 1 hour
+    expect(screen.getByText("1 hr")).toBeInTheDocument(); // 60 minutes = 1 hour
     expect(
       screen.getByText(/Approved by: Dileepa Peiris \(Intern\)/),
     ).toBeInTheDocument();
@@ -60,7 +60,7 @@ describe("TimeTrackingCard", () => {
     render(<TimeTrackingCard card={incompleteCard} />);
 
     expect(screen.getByText(/Approved by: --/)).toBeInTheDocument();
-    expect(screen.getByText(/State:\s*--/)).toBeInTheDocument();
+    expect(screen.getAllByText("--").length).toBeGreaterThan(0);
   });
 
   it("should not render Billable chip when hasBillable is false", () => {

apps/customer-portal/webapp/src/components/support/case-details/calls-tab/CallRequestCard.tsx

@@ -35,7 +35,11 @@ import {
   getCallRequestStatusColor,
   resolveColorFromTheme,
 } from "@utils/support";
-import { CallRequestStatus } from "@constants/supportConstants";
+import {
+  CALL_REQUEST_STATE_CUSTOMER_REJECTED,
+  CALL_REQUEST_STATE_NOTES_PENDING_ID,
+  CallRequestStatus,
+} from "@constants/supportConstants";
 
 export interface CallRequestCardProps {
   call: CallRequest;
@@ -81,6 +85,15 @@ export default function CallRequestCard({
     isCancelled || statusLabel === CallRequestStatus.COMPLETED;
   const isPendingOnCustomer =
     statusLabel === CallRequestStatus.PENDING_ON_CUSTOMER;
+  const isNotesPending =
+    call.state?.id === CALL_REQUEST_STATE_NOTES_PENDING_ID ||
+    statusLabel === CallRequestStatus.NOTES_PENDING ||
+    statusLower.includes("notes pending");
+  const isCustomerRejected =
+    call.state?.id === String(CALL_REQUEST_STATE_CUSTOMER_REJECTED) ||
+    statusLabel === CallRequestStatus.REJECTED ||
+    statusLower.includes("customer rejected");
+  const hideCustomerActions = isNotesPending || isCustomerRejected;
   const colorPath = getCallRequestStatusColor(statusLabel);
   const resolvedColor = isCancelled
     ? theme.palette.error.main
@@ -197,7 +210,7 @@ export default function CallRequestCard({
                   Reject
                 </Button>
               </>
-            ) : (
+            ) : hideCustomerActions ? null : (
               <>
                 <Button
                   variant="contained"

apps/customer-portal/webapp/src/components/support/case-details/calls-tab/CallsPanel.tsx

@@ -86,14 +86,23 @@ export default function CallsPanel({
   const [approveCall, setApproveCall] = useState<CallRequest | null>(null);
   const [rejectCall, setRejectCall] = useState<CallRequest | null>(null);
   const [isMissingTzDialogOpen, setIsMissingTzDialogOpen] = useState(false);
+  const [missingTzVariant, setMissingTzVariant] = useState<
+    "informational" | "required"
+  >("informational");
+  const [pendingCallAfterTz, setPendingCallAfterTz] = useState<
+    | { type: "create" }
+    | { type: "edit"; call: CallRequest }
+    | null
+  >(null);
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
   const [hasShownTzPrompt, setHasShownTzPrompt] = useState(false);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [callRequestsPage, setCallRequestsPage] = useState(1);
 
   const { data: projectFilters } = useGetProjectFilters(projectId);
-  const { data: userDetails } = useGetUserDetails();
+  const { data: userDetails, refetch: refetchUserDetails } =
+    useGetUserDetails();
   const userTimeZone = userDetails?.timeZone || undefined;
 
   // Derive filtered state keys from project filters (all non-Canceled states for search body)
@@ -213,16 +222,28 @@ export default function CallsPanel({
   };
 
   const handleOpenModal = () => {
-    setEditCall(null);
     setSuccessMessage(null);
     setErrorMessage(null);
+    if (!userDetails?.timeZone?.trim()) {
+      setPendingCallAfterTz({ type: "create" });
+      setMissingTzVariant("required");
+      setIsMissingTzDialogOpen(true);
+      return;
+    }
+    setEditCall(null);
     setIsModalOpen(true);
   };
   const handleCloseModal = () => {
     setIsModalOpen(false);
     setEditCall(null);
   };
   const handleEditClick = (call: CallRequest) => {
+    if (!userDetails?.timeZone?.trim()) {
+      setPendingCallAfterTz({ type: "edit", call });
+      setMissingTzVariant("required");
+      setIsMissingTzDialogOpen(true);
+      return;
+    }
     setEditCall(call);
     setIsModalOpen(true);
   };
@@ -320,7 +341,8 @@ export default function CallsPanel({
   // Prompt once per mount when the user has no timezone set and data is loaded
   useEffect(() => {
     if (hasShownTzPrompt) return;
-    if (userDetails && !userDetails.timeZone) {
+    if (userDetails && !userDetails.timeZone?.trim()) {
+      setMissingTzVariant("required");
       setIsMissingTzDialogOpen(true);
       setHasShownTzPrompt(true);
     }
@@ -391,6 +413,7 @@ export default function CallsPanel({
       <DeleteCallRequestModal
         open={!!deleteCall}
         call={deleteCall}
+        userTimeZone={userTimeZone}
         onClose={handleCloseDeleteModal}
         onConfirm={handleConfirmDelete}
         isDeleting={patchCallRequest.isPending}
@@ -434,6 +457,7 @@ export default function CallsPanel({
 
       <MissingTimezoneDialog
         open={isMissingTzDialogOpen}
+        variant={missingTzVariant}
         onClose={() => setIsMissingTzDialogOpen(false)}
         onSetTimeZone={() => {
           setIsMissingTzDialogOpen(false);
@@ -443,7 +467,25 @@ export default function CallsPanel({
 
       <UserProfileModal
         open={isProfileModalOpen}
-        onClose={() => setIsProfileModalOpen(false)}
+        onClose={() => {
+          setIsProfileModalOpen(false);
+          void refetchUserDetails().then((result) => {
+            const tz = result.data?.timeZone?.trim();
+            if (pendingCallAfterTz && tz) {
+              if (pendingCallAfterTz.type === "create") {
+                setEditCall(null);
+                setIsModalOpen(true);
+              } else {
+                setEditCall(pendingCallAfterTz.call);
+                setIsModalOpen(true);
+              }
+              setPendingCallAfterTz(null);
+            } else if (pendingCallAfterTz && !tz) {
+              setMissingTzVariant("required");
+              setIsMissingTzDialogOpen(true);
+            }
+          });
+        }}
       />
     </Stack>
   );

apps/customer-portal/webapp/src/components/support/case-details/calls-tab/DeleteCallRequestModal.tsx

@@ -34,11 +34,12 @@ import {
   type JSX,
 } from "react";
 import type { CallRequest } from "@models/responses";
-import { formatCallRequestPromptScheduledTime } from "@utils/support";
+import { formatUtcToLocal } from "@utils/support";
 
 export interface DeleteCallRequestModalProps {
   open: boolean;
   call: CallRequest | null;
+  userTimeZone?: string;
   onClose: () => void;
   onConfirm: (reason: string) => void;
   isDeleting?: boolean;
@@ -55,6 +56,7 @@ export interface DeleteCallRequestModalProps {
 export default function DeleteCallRequestModal({
   open,
   call,
+  userTimeZone,
   onClose,
   onConfirm,
   isDeleting = false,
@@ -93,12 +95,10 @@ export default function DeleteCallRequestModal({
 
   const canConfirm = reason.trim() !== "";
 
+  const firstPreferredTime = call?.preferredTimes?.find((t) => t?.trim())?.trim();
   const promptWhen =
-    call != null
-      ? formatCallRequestPromptScheduledTime(
-          call.preferredTimes,
-          call.scheduleTime,
-        )
+    userTimeZone && firstPreferredTime
+      ? formatUtcToLocal(firstPreferredTime, "short", false, userTimeZone)
       : "--";
   const cancelDescription =
     call == null
@@ -144,7 +144,7 @@ export default function DeleteCallRequestModal({
         </Typography>
         <TextField
           id="cancel-call-reason"
-          label="Reason *"
+          label="Reason"
           placeholder="Enter reason for cancellation..."
           value={reason}
           onChange={handleReasonChange}