spectator access removed for the IO tab and document upload

src/components/workNote/WorkNoteChat/WorkNoteChat.tsx

@@ -1587,12 +1587,13 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                 })()}
 
                 <Textarea
-                  placeholder="Type your message... Use @username to mention someone"
+                  placeholder={effectiveIsSpectator ? "Spectators cannot send messages" : "Type your message... Use @username to mention someone"}
                   value={message}
                   onChange={(e) => setMessage(e.target.value)}
                   onKeyPress={handleKeyPress}
                   className="min-h-[50px] sm:min-h-[60px] resize-none border-gray-200 focus:ring-blue-500 focus:border-blue-500 w-full text-sm"
                   rows={2}
+                  disabled={effectiveIsSpectator}
                 />
 
                 {/* Emoji Picker Popup */}
@@ -1632,27 +1633,27 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
                     onClick={handleAttachmentClick}
-                    title="Attach file"
+                    disabled={effectiveIsSpectator}
+                    title={effectiveIsSpectator ? "Spectators cannot attach files" : "Attach file"}
                   >
                     <Paperclip className="h-4 w-4" />
                   </Button>
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
                     onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-                    title="Add emoji"
+                    disabled={effectiveIsSpectator}
+                    title={effectiveIsSpectator ? "Spectators cannot add emojis" : "Add emoji"}
                   >
                     <Smile className="h-4 w-4" />
                   </Button>
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
                     onClick={() => setMessage(prev => prev + '@')}
-                    title="Mention someone"
+                    disabled={effectiveIsSpectator}
+                    title={effectiveIsSpectator ? "Spectators cannot mention users" : "Mention someone"}
                   >
                     <AtSign className="h-4 w-4" />
                   </Button>
@@ -1665,9 +1666,10 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                   </span>
                   <Button
                     onClick={handleSendMessage}
-                    disabled={!message.trim() && selectedFiles.length === 0}
+                    disabled={(!message.trim() && selectedFiles.length === 0) || effectiveIsSpectator}
                     className="bg-blue-600 hover:bg-blue-700 h-8 sm:h-9 px-3 sm:px-4 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
                     size="sm"
+                    title={effectiveIsSpectator ? "Spectators cannot send messages" : "Send"}
                   >
                     <Send className="h-4 w-4 sm:mr-2" />
                     <span className="hidden sm:inline">Send</span>

src/custom/pages/RequestDetail.tsx

@@ -588,6 +588,7 @@ function CustomRequestDetailInner({ requestId: propRequestId, onBack, dynamicReq
                     triggerFileInput={triggerFileInput}
                     setPreviewDocument={setPreviewDocument}
                     downloadDocument={downloadDocument}
+                    isSpectator={isSpectator}
                   />
                 </TabsContent>
 

src/dealer-claim/components/request-detail/IOTab.tsx

@@ -20,6 +20,7 @@ interface IOTabProps {
   request: any;
   apiRequest?: any;
   onRefresh?: () => void;
+  isSpectator?: boolean;
 }
 
 interface IOBlockedDetails {
@@ -33,7 +34,7 @@ interface IOBlockedDetails {
   status: 'blocked' | 'released' | 'failed' | 'pending';
 }
 
-export function IOTab({ request, apiRequest, onRefresh }: IOTabProps) {
+export function IOTab({ request, apiRequest, onRefresh, isSpectator = false }: IOTabProps) {
   const { user } = useAuth();
   const requestId = apiRequest?.requestId || request?.requestId;
 
@@ -335,12 +336,12 @@ export function IOTab({ request, apiRequest, onRefresh }: IOTabProps) {
                 placeholder="Enter IO number (e.g., IO-2024-12345)"
                 value={ioNumber}
                 onChange={(e) => setIoNumber(e.target.value)}
-                disabled={fetchingAmount || (blockedIOs.length > 0 && !isAdditionalBlockingNeeded)}
+                disabled={fetchingAmount || (blockedIOs.length > 0 && !isAdditionalBlockingNeeded) || isSpectator}
                 className="flex-1"
               />
               <Button
                 onClick={handleFetchAmount}
-                disabled={!ioNumber.trim() || fetchingAmount || (blockedIOs.length > 0 && !isAdditionalBlockingNeeded)}
+                disabled={!ioNumber.trim() || fetchingAmount || (blockedIOs.length > 0 && !isAdditionalBlockingNeeded) || isSpectator}
                 className="bg-[#2d4a3e] hover:bg-[#1f3329]"
               >
                 <Download className="w-4 h-4 mr-2" />
@@ -398,6 +399,7 @@ export function IOTab({ request, apiRequest, onRefresh }: IOTabProps) {
                       setAmountToBlock(val);
                     }}
                     className="pl-8"
+                    disabled={isSpectator}
                   />
                 </div>
                 {estimatedBudget > 0 && (
@@ -417,7 +419,8 @@ export function IOTab({ request, apiRequest, onRefresh }: IOTabProps) {
                   !amountToBlock ||
                   parseFloat(amountToBlock) <= 0 ||
                   parseFloat(amountToBlock) > fetchedAmount ||
-                  (estimatedBudget > 0 && Math.abs((blockedIOs.reduce((s, i) => s + i.blockedAmount, 0) + parseFloat(amountToBlock)) - estimatedBudget) > 0.01)
+                  (estimatedBudget > 0 && Math.abs((blockedIOs.reduce((s, i) => s + i.blockedAmount, 0) + parseFloat(amountToBlock)) - estimatedBudget) > 0.01) ||
+                  isSpectator
                 }
                 className="w-full bg-[#2d4a3e] hover:bg-[#1f3329]"
               >

src/dealer-claim/components/request-detail/WorkflowTab.tsx

@@ -41,6 +41,7 @@ interface DealerClaimWorkflowTabProps {
     maxFileSizeMB: number;
     allowedFileTypes: string[];
   };
+  isSpectator?: boolean;
 }
 
 interface WorkflowStep {
@@ -178,7 +179,8 @@ export function DealerClaimWorkflowTab({
   isInitiator,
   onSkipApprover: _onSkipApprover,
   onRefresh,
-  documentPolicy
+  documentPolicy,
+  isSpectator = false
 }: DealerClaimWorkflowTabProps) {
   const [showProposalModal, setShowProposalModal] = useState(false);
   const [showApprovalModal, setShowApprovalModal] = useState(false);
@@ -2226,8 +2228,8 @@ export function DealerClaimWorkflowTab({
                           (stepLevel?.levelName && stepLevel.levelName.toLowerCase().includes('dealer'));
                         const isUserAuthorized = isUserApproverForThisStep || (isDealerStep && isDealer);
 
-                        // Step must be active AND user must be authorized
+                        // Step must be active AND user must be authorized AND NOT a spectator
-                        return isActive && isUserAuthorized;
+                        return isActive && isUserAuthorized && !isSpectator;
                       })() && (
                           <div className="mt-4 flex gap-2">
                             {/* Step 1: Submit Proposal Button - Only for dealer or step 1 approver */}

src/dealer-claim/pages/RequestDetail.tsx

@@ -153,14 +153,22 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
 
   // Determine if user is department lead (find dynamically by levelName, not hardcoded step number)
   const currentUserId = (user as any)?.userId || '';
+  const currentUserEmail = (user as any)?.email?.toLowerCase();
+
+  const isDepartmentLead = (request?.approvalFlow || []).some((level: any) =>
+    level.role === 'Department Lead Approval' &&
+    level.approverEmail?.toLowerCase() === currentUserEmail
+  );
 
   // IO tab visibility for dealer claims
-  // Restricted: Hide from Dealers, show for internal roles (Initiator, Dept Lead, Finance, Admin)
+  // Restricted: Hide from Dealers, show only for Initiator and Department Lead
   const isDealer = (user as any)?.jobTitle === 'Dealer' || (user as any)?.designation === 'Dealer';
   const isClaimManagement = request?.workflowType === 'CLAIM_MANAGEMENT' ||
     apiRequest?.workflowType === 'CLAIM_MANAGEMENT' ||
     request?.templateType === 'claim-management';
-  const showIOTab = isClaimManagement && !isDealer;
+
+  // Requirement: IO tab visible only for Initiator and Department Lead Approver
+  const showIOTab = isClaimManagement && !isDealer && (isInitiator || isDepartmentLead);
 
   const {
     mergedMessages,
@@ -616,6 +624,7 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
                     request={request}
                     user={user}
                     isInitiator={isInitiator}
+                    isSpectator={isSpectator}
                     onSkipApprover={(data) => {
                       if (!data.levelId) {
                         alert('Level ID not available');
@@ -635,6 +644,7 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
                       request={request}
                       apiRequest={apiRequest}
                       onRefresh={refreshDetails}
+                      isSpectator={isSpectator}
                     />
                   </TabsContent>
                 )}
@@ -648,6 +658,7 @@ function DealerClaimRequestDetailInner({ requestId: propRequestId, onBack, dynam
                     triggerFileInput={triggerFileInput}
                     setPreviewDocument={setPreviewDocument}
                     downloadDocument={downloadDocument}
+                    isSpectator={isSpectator}
                   />
                 </TabsContent>
 

src/pages/RequestDetail/components/tabs/DocumentsTab.tsx

@@ -15,6 +15,7 @@ interface DocumentsTabProps {
   triggerFileInput: () => void;
   setPreviewDocument: (doc: any) => void;
   downloadDocument: (documentId: string) => Promise<void>;
+  isSpectator?: boolean;
 }
 
 export function DocumentsTab({
@@ -25,6 +26,7 @@ export function DocumentsTab({
   triggerFileInput,
   setPreviewDocument,
   downloadDocument,
+  isSpectator = false,
 }: DocumentsTabProps) {
   const isForm16 = (request?.templateType || request?.template_type || '').toString().toUpperCase() === 'FORM_16';
 
@@ -105,7 +107,7 @@ export function DocumentsTab({
               <Button
                 size="sm"
                 onClick={triggerFileInput}
-                disabled={uploadingDocument || request.status === 'closed'}
+                disabled={uploadingDocument || request.status === 'closed' || isSpectator}
                 className="gap-1 sm:gap-2 h-8 sm:h-9 text-xs sm:text-sm shrink-0"
                 data-testid="upload-document-btn"
               >