From 6b7837540b0a0f52b2fd601143d9dfe417e95491 Mon Sep 17 00:00:00 2001 From: laxmanhalaki Date: Thu, 6 Nov 2025 10:13:57 +0530 Subject: [PATCH] mobile responsive changes --- .../layout/PageLayout/PageLayout.tsx | 2 +- .../workNote/WorkNoteChat/WorkNoteChat.tsx | 6 +- src/contexts/AuthContext.tsx | 4 +- src/pages/ClosedRequests/ClosedRequests.tsx | 149 +++++---- src/pages/MyRequests/MyRequests.tsx | 112 +++---- src/pages/OpenRequests/OpenRequests.tsx | 169 +++++----- src/pages/RequestDetail/RequestDetail.tsx | 290 +++++++++--------- 7 files changed, 373 insertions(+), 359 deletions(-) diff --git a/src/components/layout/PageLayout/PageLayout.tsx b/src/components/layout/PageLayout/PageLayout.tsx index acae25c..7f1d3e0 100644 --- a/src/components/layout/PageLayout/PageLayout.tsx +++ b/src/components/layout/PageLayout/PageLayout.tsx @@ -250,7 +250,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on {/* Main Content */} -
+
{children}
diff --git a/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx b/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx index 2e2adeb..4c7ea2e 100644 --- a/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx +++ b/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx @@ -390,7 +390,11 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, on } } catch {} try { - const base = (import.meta as any).env.VITE_BASE_URL || window.location.origin; + // Get backend URL from environment (same as API calls) + // Strip /api/v1 suffix if present to get base WebSocket URL + const apiBaseUrl = (import.meta as any).env.VITE_API_BASE_URL || 'http://localhost:5000/api/v1'; + const base = apiBaseUrl.replace(/\/api\/v1$/, ''); + console.log('[WorkNoteChat] Connecting socket to:', base); const s = getSocket(base); // Only join room if not skipped (standalone mode) diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx index bdff669..76aac57 100644 --- a/src/contexts/AuthContext.tsx +++ b/src/contexts/AuthContext.tsx @@ -337,8 +337,8 @@ function BackendAuthProvider({ children }: { children: ReactNode }) { try { setError(null); // Redirect to Okta login - const oktaDomain = 'https://dev-830839.oktapreview.com'; - const clientId = '0oa2j8slwj5S4bG5k0h8'; + const oktaDomain = import.meta.env.VITE_OKTA_DOMAIN || 'https://dev-830839.oktapreview.com'; + const clientId = import.meta.env.VITE_OKTA_CLIENT_ID || '0oa2jgzvrpdwx2iqd0h8'; const redirectUri = `${window.location.origin}/login/callback`; const responseType = 'code'; const scope = 'openid profile email'; diff --git a/src/pages/ClosedRequests/ClosedRequests.tsx b/src/pages/ClosedRequests/ClosedRequests.tsx index 3a09173..3f78cbb 100644 --- a/src/pages/ClosedRequests/ClosedRequests.tsx +++ b/src/pages/ClosedRequests/ClosedRequests.tsx @@ -180,43 +180,44 @@ export function ClosedRequests({ onViewRequest }: ClosedRequestsProps) { ].filter(Boolean).length; return ( -
+
{/* Enhanced Header */} -
-
-
-
- +
+
+
+
+
-

Closed Requests

-

Review completed and archived requests

+

Closed Requests

+

Review completed and archived requests

-
- - {loading ? 'Loading…' : `${filteredAndSortedRequests.length} closed requests`} +
+ + {loading ? 'Loading…' : `${filteredAndSortedRequests.length} closed`} + requests -
{/* Enhanced Filters Section */} - +
-
-
- +
+
+
- Filters & Search - + Filters & Search + {activeFiltersCount > 0 && ( {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active @@ -225,45 +226,45 @@ export function ClosedRequests({ onViewRequest }: ClosedRequestsProps) {
-
+
{activeFiltersCount > 0 && ( )}
- + {/* Primary filters */} -
+
- + setSearchTerm(e.target.value)} - className="pl-10 h-11 bg-gray-50 border-gray-200 focus:bg-white transition-colors" + className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white transition-colors" />
setSortBy(value)}> - + @@ -320,9 +321,9 @@ export function ClosedRequests({ onViewRequest }: ClosedRequestsProps) { variant="outline" size="sm" onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')} - className="px-3 h-11" + className="px-2 sm:px-3 h-9 sm:h-10 md:h-11" > - {sortOrder === 'asc' ? : } + {sortOrder === 'asc' ? : }
@@ -341,89 +342,87 @@ export function ClosedRequests({ onViewRequest }: ClosedRequestsProps) { className="group hover:shadow-xl transition-all duration-300 cursor-pointer border-0 shadow-md hover:scale-[1.01]" onClick={() => onViewRequest?.(request.id, request.title)} > - -
+ +
{/* Priority Indicator */} -
-
- +
+
+
{request.priority}
{/* Main Content */} -
+
{/* Header */} -
+
-
-

+
+

{(request as any).displayId || request.id}

- {request.status} + {request.status} {request.department && ( - + {request.department} )}
-

+

{request.title}

-

+

{request.description}

-
- +
+
{/* Status Info */} -
-
- - +
+
+ + {request.reason}
{/* Participants & Metadata */} -
-
-
- - - {request.initiator.avatar} - - -
-

{request.initiator.name}

-

Initiator

-
+
+
+ + + {request.initiator.avatar} + + +
+

{request.initiator.name}

+

Initiator

-
-
+
+
- - Created {request.createdAt} + + Created {request.createdAt} - Closed {request.dueDate} + Closed {request.dueDate}
diff --git a/src/pages/MyRequests/MyRequests.tsx b/src/pages/MyRequests/MyRequests.tsx index e8714fe..bfb3693 100644 --- a/src/pages/MyRequests/MyRequests.tsx +++ b/src/pages/MyRequests/MyRequests.tsx @@ -210,78 +210,78 @@ export function MyRequests({ onViewRequest, dynamicRequests = [] }: MyRequestsPr }; return ( -
+
{/* Header */}
-

- +

+ My Requests

-

+

Track and manage all your submitted requests

{/* Stats Overview */} -
+
- +
-

Total

-

{stats.total}

+

Total

+

{stats.total}

- +
- +
-

In Progress

-

{stats.pending + stats.inReview}

+

In Progress

+

{stats.pending + stats.inReview}

- +
- +
-

Approved

-

{stats.approved}

+

Approved

+

{stats.approved}

- +
- +
-

Rejected

-

{stats.rejected}

+

Rejected

+

{stats.rejected}

- +
- +
-

Draft

-

{stats.draft}

+

Draft

+

{stats.draft}

- +
@@ -289,21 +289,21 @@ export function MyRequests({ onViewRequest, dynamicRequests = [] }: MyRequestsPr {/* Filters and Search */} - -
-
- + +
+
+ setSearchTerm(e.target.value)} - className="pl-9 bg-white border-gray-300 hover:border-gray-400 focus:border-re-green focus:ring-1 focus:ring-re-green" + className="pl-9 text-sm sm:text-base bg-white border-gray-300 hover:border-gray-400 focus:border-re-green focus:ring-1 focus:ring-re-green h-9 sm:h-10" />
-
+
setSearchTerm(e.target.value)} - className="pl-10 h-11 bg-gray-50 border-gray-200 focus:bg-white transition-colors" + className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white transition-colors" />
setSortBy(value)}> - + @@ -374,9 +375,9 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) { variant="outline" size="sm" onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')} - className="px-3 h-11" + className="px-2 sm:px-3 h-9 sm:h-10 md:h-11" > - {sortOrder === 'asc' ? : } + {sortOrder === 'asc' ? : }
@@ -396,69 +397,69 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) { className="group hover:shadow-xl transition-all duration-300 cursor-pointer border-0 shadow-md hover:scale-[1.01]" onClick={() => onViewRequest?.(request.id, request.title)} > - -
+ +
{/* Priority Indicator */} -
-
- +
+
+
{request.priority}
{/* Main Content */} -
+
{/* Header */} -
+
-
-

+
+

{(request as any).displayId || request.id}

- {request.status} + {request.status} {request.department && ( - + {request.department} )}
-

+

{request.title}

-

+

{request.description}

-
- +
+
{/* SLA Progress */} -
-
+
+
- - SLA Progress + + SLA Progress
-
- +
+ {request.slaRemaining} remaining {slaConfig.urgency === 'critical' && ( - + URGENT )} @@ -466,59 +467,59 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
{/* Status Info */} -
-
- - +
+
+ + {request.approvalStep}
{/* Participants & Metadata */} -
-
-
- - +
+
+
+ + {request.initiator.avatar} -
-

{request.initiator.name}

+
+

{request.initiator.name}

Initiator

{request.currentApprover && ( -
- - +
+ + {request.currentApprover.avatar} -
-

{request.currentApprover.name}

+
+

{request.currentApprover.name}

Current Approver

)}
-
-
+
+
- - Created: {request.createdAt !== '—' ? formatDateShort(request.createdAt) : '—'} + + Created: {request.createdAt !== '—' ? formatDateShort(request.createdAt) : '—'} - - Due: {request.dueDate ? formatDateShort(request.dueDate) : 'Not set'} + + Due: {request.dueDate ? formatDateShort(request.dueDate) : 'Not set'}
diff --git a/src/pages/RequestDetail/RequestDetail.tsx b/src/pages/RequestDetail/RequestDetail.tsx index 666845a..d3976d1 100644 --- a/src/pages/RequestDetail/RequestDetail.tsx +++ b/src/pages/RequestDetail/RequestDetail.tsx @@ -169,16 +169,16 @@ const getSLAConfig = (progress: number) => { const getStepIcon = (status: string) => { switch (status) { case 'approved': - return ; + return ; case 'rejected': - return ; + return ; case 'pending': case 'in-review': - return ; + return ; case 'waiting': - return ; + return ; default: - return ; + return ; } }; @@ -996,63 +996,65 @@ function RequestDetailInner({ return ( <>
-
+
{/* Header Section */} -
+
{/* Top Header */} -
-
-
+
+
+
-
-
- +
+
+
-
-

{request.id || 'N/A'}

- - {priorityConfig.label} - - - {statusConfig.label} - +
+

{request.id || 'N/A'}

+
+ + {priorityConfig.label} + + + {statusConfig.label} + +
-
-
-

{request.title}

+
+

{request.title}

{/* SLA Progress */} -
-
+
+
- - SLA Progress + + SLA Progress
- + {request.slaRemaining}
-

+

Due: {request.slaEndDate ? formatDateTime(request.slaEndDate) : 'Not set'} • {request.slaProgress}% elapsed

@@ -1060,28 +1062,28 @@ function RequestDetailInner({ {/* Tabs */} - - - - Overview + + + + Overview - - - Workflow + + + Workflow - - - Documents + + + Docs - - - Activity + + + Activity - - - Work Notes + + + Notes {unreadWorkNotes > 0 && ( - + {unreadWorkNotes > 9 ? '9+' : unreadWorkNotes} )} @@ -1095,34 +1097,34 @@ function RequestDetailInner({ {/* Overview Tab */} -
+
{/* Request Initiator */} - - - + + + Request Initiator -
- - +
+ + {request.initiator?.avatar || 'U'} -
-

{request.initiator?.name || 'N/A'}

-

{request.initiator?.role || 'N/A'}

-

{request.initiator?.department || 'N/A'}

+
+

{request.initiator?.name || 'N/A'}

+

{request.initiator?.role || 'N/A'}

+

{request.initiator?.department || 'N/A'}

-
-
- - {request.initiator?.email || 'N/A'} +
+
+ + {request.initiator?.email || 'N/A'}
-
- +
+ {request.initiator?.phone || 'N/A'}
@@ -1133,17 +1135,17 @@ function RequestDetailInner({ {/* Request Details */} - - - + + + Request Details - +
- -
-

+ +

+

{request.description}

@@ -1242,18 +1244,18 @@ function RequestDetailInner({ -
+
- - + + Approval Workflow - + Track the approval progress through each step
{request.totalSteps && ( - + Step {request.currentStep} of {request.totalSteps} )} @@ -1261,7 +1263,7 @@ function RequestDetailInner({ {request.approvalFlow && request.approvalFlow.length > 0 ? ( -
+
{request.approvalFlow.map((step: any, index: number) => { const isActive = step.status === 'pending' || step.status === 'in-review'; const isCompleted = step.status === 'approved'; @@ -1271,7 +1273,7 @@ function RequestDetailInner({ return (
-
-
+
-
-
-
-

+
+
+
+

{step.step ? `Step ${step.step}: ` : ''}{step.role}

- + }`}> {step.status}
-

{step.approver}

+

{step.approver}

-
+
{step.tatHours && (

TAT: {step.tatHours}h

)} @@ -1321,24 +1323,24 @@ function RequestDetailInner({

Elapsed: {step.elapsedHours}h

)} {step.actualHours !== undefined && ( -

Completed in: {step.actualHours.toFixed(2)}h

+

Done: {step.actualHours.toFixed(2)}h

)}
{step.comment && ( -
-

{step.comment}

+
+

{step.comment}

)} {/* TAT Alerts/Reminders */} {step.tatAlerts && step.tatAlerts.length > 0 && ( -
+
{step.tatAlerts.map((alert: any, alertIndex: number) => (
-
+
{(alert.thresholdPercentage || 0) === 50 && '⏳'} {(alert.thresholdPercentage || 0) === 75 && '⚠️'} {(alert.thresholdPercentage || 0) === 100 && '⏰'}
-
-
-

- Reminder {alertIndex + 1} - {alert.thresholdPercentage || 0}% TAT Threshold +

+
+

+ Reminder {alertIndex + 1} - {alert.thresholdPercentage || 0}% TAT

{alert.isBreached ? 'BREACHED' : 'WARNING'}
-

+

{alert.thresholdPercentage || 0}% of SLA breach reminder have been sent

{/* Time Tracking Details */} -
+
Allocated: @@ -1414,17 +1416,17 @@ function RequestDetailInner({
-
-

+

+

Reminder sent by system automatically

{(alert.metadata?.testMode || alert.metadata?.tatTestMode) && ( - + TEST MODE )}
-

+

Sent at: {alert.alertSentAt ? formatDateTime(alert.alertSentAt) : 'N/A'}

{(alert.metadata?.testMode || alert.metadata?.tatTestMode) && ( @@ -1448,11 +1450,11 @@ function RequestDetailInner({ {/* Skip Approver Button - Only show for pending/in-review levels */} {(isActive || step.status === 'pending') && !isCompleted && !isRejected && step.levelId && ( -
+
-

+

Skip if approver is unavailable and move to next level

@@ -1489,25 +1491,29 @@ function RequestDetailInner({ {/* Documents Tab */} -
+
{/* Section 1: Request Documents */} -
- - - Request Documents - +
+
+ + + Request Documents + + Documents attached while creating the request +
- Documents attached while creating the request {request.documents && request.documents.length > 0 ? ( @@ -1585,11 +1591,11 @@ function RequestDetailInner({ {/* Section 2: Work Note Attachments */} - - + + Work Note Attachments - Files shared in work notes discussions + Files shared in work notes discussions {workNoteAttachments && workNoteAttachments.length > 0 ? ( @@ -1682,16 +1688,16 @@ function RequestDetailInner({ - - + + Activity Timeline - + Complete audit trail of all request activities -
+
{request.auditTrail && request.auditTrail.length > 0 ? request.auditTrail.map((entry: any, index: number) => (
{/* Icon */} @@ -1746,50 +1752,50 @@ function RequestDetailInner({ {/* Right Column - Quick Actions Sidebar (1/3 width) - Hidden for Work Notes Tab */} {activeTab !== 'worknotes' && ( -
+
{/* Quick Actions */} - Quick Actions + Quick Actions {!isSpectator && ( )} {!isSpectator && ( )} -
+
{!isSpectator && currentApprovalLevel && ( <> @@ -1802,7 +1808,7 @@ function RequestDetailInner({ {request.spectators && request.spectators.length > 0 && ( - Spectators + Spectators {request.spectators.map((spectator: any, index: number) => (