# Skybridge Platform Shell

A module federated React platform that provides a unified shell for multiple applications, similar to AWS Console.

## Features

- **Module Federation**: Apps are loaded as federated modules
- **Tab-based Navigation**: Each application appears as a tab
- **Global Search**: Federated search across all applications
- **Timezone Clocks**: PST, EST, CST, and IST clocks in the header
- **User Management**: User dropdown with logout functionality
- **Extensible**: Easy to add new federated applications

## Getting Started

### Prerequisites

- Node.js 24+
- npm 11+

### Installation

```bash
cd web
npm install
```

### Development

Start the shell (runs on port 3000):

```bash
npm start
```

Start the KMS federated app (runs on port 3001):

```bash
cd ../kms/kms-frontend
npm install
npm start
```

## Architecture

### Shell Application (`web/`)

- **Port**: 3000
- **Role**: Host application that loads federated modules
- **Components**:
  - `ShellHeader`: Global navigation with search and timezone clocks
  - `AppContainer`: Tab-based container for federated applications
  - `GlobalSearch`: Federated search across all applications
  - `TimeZoneClock`: Multi-timezone display
  - `UserDropdown`: User management interface

### KMS Application (`kms/kms-frontend/`)

- **Port**: 3001
- **Role**: Federated module providing KMS functionality
- **Exposes**:
  - `./App`: Main KMS application component
  - `./SearchProvider`: Search functionality for KMS data

## Adding New Applications

To add a new federated application:

1. **Create the application** with module federation configuration
2. **Expose components** in `craco.config.js`:
   ```javascript
   exposes: {
     './App': './src/YourApp',
     './SearchProvider': './src/SearchProvider', // Optional
   }
   ```

3. **Update shell configuration** in `web/craco.config.js`:
   ```javascript
   remotes: {
     kms: 'kms@http://localhost:3001/remoteEntry.js',
     yourapp: 'yourapp@http://localhost:3002/remoteEntry.js',
   }
   ```

4. **Create a loader component** similar to `LoadKMS.tsx`:
   ```typescript
   const YourApp = React.lazy(() => import('yourapp/App'));
   
   const LoadYourApp: React.FC = () => {
     const { registerApp } = useApp();
     
     useEffect(() => {
       registerApp({
         id: 'yourapp',
         name: 'Your App',
         path: '/yourapp',
         component: YourApp,
         searchProvider: yourSearchProvider, // Optional
       });
     }, [registerApp]);
     
     return null;
   };
   ```

5. **Include the loader** in the main App component

## Search Integration

Applications can provide search functionality by exposing a search provider:

```typescript
export const yourSearchProvider = async (query: string): Promise<SearchResult[]> => {
  // Implement your search logic
  return [
    {
      id: 'result-1',
      title: 'Search Result',
      description: 'Description of the result',
      appId: 'Your App',
      action: () => {
        // Navigate to result
      }
    }
  ];
};
```

## Configuration

### Ports

- Shell: 3000
- KMS: 3001
- Future apps: 3002+

### Environment

The shell includes:

- **React 19** with TypeScript
- **Ant Design 5.27** for UI components
- **Module Federation** for app loading
- **React Router** for routing
- **Moment Timezone** for clock functionality

## File Structure

```
web/
├── src/
│   ├── components/
│   │   ├── AppContainer.tsx      # Tab container
│   │   ├── GlobalSearch.tsx      # Federated search
│   │   ├── ShellHeader.tsx       # Main header
│   │   ├── TimeZoneClock.tsx     # Timezone display
│   │   ├── UserDropdown.tsx      # User menu
│   │   └── LoadKMS.tsx           # KMS app loader
│   ├── contexts/
│   │   └── AppContext.tsx        # Global app state
│   ├── types/
│   │   ├── index.ts              # Type definitions
│   │   └── federated.d.ts        # Module federation types
│   ├── App.tsx                   # Main app component
│   └── index.tsx                 # Entry point
├── public/
├── craco.config.js               # Module federation config
├── package.json
└── README.md
```

## Development Notes

- Applications run on separate ports and are loaded dynamically
- Shared dependencies (React, Ant Design) are singleton across all apps
- Each application maintains its own routing under its path prefix
- Global search aggregates results from all registered applications
- User state is managed globally in the shell