Fix UI for inventory page 3

frontend/src/components/ui/StatusModal/StatusModal.tsx

@@ -38,22 +38,23 @@ export interface StatusModalProps {
   onClose: () => void;
   mode: 'view' | 'edit';
   onModeChange?: (mode: 'view' | 'edit') => void;
-  
+
   // Content
   title: string;
   subtitle?: string;
   statusIndicator?: StatusIndicatorConfig;
   image?: string;
   sections: StatusModalSection[];
-  
+
   // Actions
   actions?: StatusModalAction[];
   showDefaultActions?: boolean;
+  actionsPosition?: 'header' | 'footer'; // New prop for positioning actions
   onEdit?: () => void;
   onSave?: () => Promise<void>;
   onCancel?: () => void;
   onFieldChange?: (sectionIndex: number, fieldIndex: number, value: string | number) => void;
-  
+
   // Layout
   size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   loading?: boolean;
@@ -224,6 +225,13 @@ const renderEditableField = (
 /**
  * StatusModal - Unified modal component for viewing/editing card details
  * Follows UX best practices for modal dialogs (2024)
+ *
+ * Features:
+ * - Supports actions in header (tab-style navigation) or footer (default)
+ * - Tab-style navigation in header improves discoverability for multi-view modals
+ * - Maintains backward compatibility - existing modals continue working unchanged
+ * - Responsive design with horizontal scroll for many tabs on mobile
+ * - Active state indicated by disabled=true for navigation actions
  */
 export const StatusModal: React.FC<StatusModalProps> = ({
   isOpen,
@@ -237,6 +245,7 @@ export const StatusModal: React.FC<StatusModalProps> = ({
   sections,
   actions = [],
   showDefaultActions = true,
+  actionsPosition = 'footer',
   onEdit,
   onSave,
   onCancel,
@@ -305,6 +314,48 @@ export const StatusModal: React.FC<StatusModalProps> = ({
 
   const allActions = [...actions, ...defaultActions];
 
+  // Render top navigation actions (tab-like style)
+  const renderTopActions = () => {
+    if (actionsPosition !== 'header' || allActions.length === 0) return null;
+
+    return (
+      <div className="border-b border-[var(--border-primary)] bg-[var(--bg-primary)]">
+        <div className="px-6 py-1">
+          <div className="flex gap-0 overflow-x-auto scrollbar-hide" style={{scrollbarWidth: 'none', msOverflowStyle: 'none'}}>
+            {allActions.map((action, index) => (
+              <button
+                key={index}
+                onClick={action.disabled || loading ? undefined : action.onClick}
+                disabled={loading}
+                className={`
+                  relative flex items-center gap-2 px-4 py-3 text-sm font-medium transition-all duration-200
+                  min-w-fit whitespace-nowrap border-b-2 -mb-px
+                  ${loading
+                    ? 'opacity-50 cursor-not-allowed text-[var(--text-tertiary)] border-transparent'
+                    : action.disabled
+                    ? 'text-[var(--color-primary)] border-[var(--color-primary)] bg-[var(--color-primary)]/8 cursor-default'
+                    : action.variant === 'danger'
+                    ? 'text-red-600 border-transparent hover:border-red-300 hover:bg-red-50'
+                    : 'text-[var(--text-secondary)] border-transparent hover:text-[var(--text-primary)] hover:border-[var(--border-primary)] hover:bg-[var(--bg-secondary)]'
+                  }
+                `}
+              >
+                {action.loading ? (
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
+                ) : (
+                  <>
+                    {action.icon && <action.icon className="w-4 h-4" />}
+                    <span>{action.label}</span>
+                  </>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <Modal
       isOpen={isOpen}
@@ -319,26 +370,26 @@ export const StatusModal: React.FC<StatusModalProps> = ({
           <div className="flex items-center gap-3">
             {/* Status indicator */}
             {statusIndicator && (
-              <div 
+              <div
                 className="flex-shrink-0 p-2 rounded-lg"
                 style={{ backgroundColor: `${statusIndicator.color}15` }}
               >
                 {StatusIcon && (
-                  <StatusIcon 
-                    className="w-5 h-5" 
-                    style={{ color: statusIndicator.color }} 
+                  <StatusIcon
+                    className="w-5 h-5"
+                    style={{ color: statusIndicator.color }}
                   />
                 )}
               </div>
             )}
-            
+
             {/* Title and status */}
             <div>
               <h2 className="text-xl font-semibold text-[var(--text-primary)]">
                 {title}
               </h2>
               {statusIndicator && (
-                <div 
+                <div
                   className="text-sm font-medium mt-1"
                   style={{ color: statusIndicator.color }}
                 >
@@ -363,6 +414,9 @@ export const StatusModal: React.FC<StatusModalProps> = ({
         onClose={onClose}
       />
 
+      {/* Top Navigation Actions */}
+      {renderTopActions()}
+
       <ModalBody>
         {loading && (
           <div className="absolute inset-0 bg-[var(--bg-primary)]/80 backdrop-blur-sm flex items-center justify-center z-10">
@@ -423,7 +477,7 @@ export const StatusModal: React.FC<StatusModalProps> = ({
         </div>
       </ModalBody>
 
-      {allActions.length > 0 && (
+      {allActions.length > 0 && actionsPosition === 'footer' && (
         <ModalFooter justify="end">
           <div className="flex gap-3">
             {allActions.map((action, index) => (

frontend/src/components/ui/index.ts

@@ -2,7 +2,7 @@
 export { default as Button } from './Button';
 export { default as Input } from './Input';
 export { default as Card, CardHeader, CardBody, CardFooter } from './Card';
-export { default as Modal } from './Modal';
+export { default as Modal, ModalHeader, ModalBody, ModalFooter } from './Modal';
 export { default as Table } from './Table';
 export { default as Badge } from './Badge';
 export { default as Avatar } from './Avatar';
@@ -22,7 +22,7 @@ export { TenantSwitcher } from './TenantSwitcher';
 export type { ButtonProps } from './Button';
 export type { InputProps } from './Input';
 export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from './Card';
-export type { ModalProps } from './Modal';
+export type { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './Modal';
 export type { TableProps, TableColumn, TableRow } from './Table';
 export type { BadgeProps } from './Badge';
 export type { AvatarProps } from './Avatar';