# Robot Account Manager - Project Structure

## Directory Organization

```
AccManager/
├── pages/                      # HTML pages
│   ├── login.html             # Login page (entry point)
│   ├── index.html             # Dashboard
│   ├── accounts.html          # Accounts management
│   └── applications.html      # Applications management
├── js/                        # JavaScript files
│   └── app.js                 # Main application logic
├── docs/                      # Documentation
│   └── README.md             # This file
├── index.html                 # Root redirect to pages/login.html
├── .git/                      # Version control
├── .vscode/                   # VS Code settings
└── README.md                  # Project root README
```

## Quick Start

1. **Access the application:**
   - Open `index.html` in a browser
   - You will be automatically redirected to `pages/login.html`

2. **Login Credentials (Demo):**
   - Username: `admin`
   - Password: `admin`

3. **Features:**
   - Dashboard: Overview of accounts and applications
   - Accounts: Manage user accounts for various services
   - Applications: Manage connected applications/services

## File Structure Explanation

### /pages/
Contains all HTML pages with updated relative paths for script imports:
- `login.html` - Authentication page
- `index.html` - Main dashboard
- `accounts.html` - Accounts management interface
- `applications.html` - Applications management interface

All pages reference scripts using `../js/app.js` for correct path resolution.

### /js/
Application logic and state management:
- `app.js` - Main AccountManager class with all functionality

### /docs/
Documentation files for reference and development.

## Application Architecture

### AccountManager Class (app.js)
- **Storage**: Uses localStorage for data persistence
- **Pages**: Dynamically renders content based on user navigation
- **Authentication**: Checks for valid session on page load
- **Modals**: Manages adding/editing accounts and applications

### Data Storage
Application stores data in browser's localStorage:
- `currentUser` - Logged-in user information
- `accounts` - List of managed accounts
- `applications` - List of managed applications
- `rememberedUsername` - Optional saved username

## Development Notes

- **Framework**: Tailwind CSS for styling
- **Icons**: Material Design symbols
- **Storage**: Browser localStorage (client-side only)
- **Responsive**: Built with mobile-first approach
- **Modern**: ES6+ JavaScript features

## Navigation Flow

```
index.html (root)
    ↓
pages/login.html
    ↓ (after login)
pages/index.html (dashboard)
    ├→ pages/accounts.html
    └→ pages/applications.html
```

## Features

### Authentication
- Username/password login
- Session management
- Remember me functionality
- Logout with confirmation

### Dashboard
- Overview statistics
- Recent account activity
- Quick access to management pages

### Account Management
- Add new accounts
- Edit existing accounts
- Delete accounts
- Filter by service
- View account details

### Application Management
- Add new applications
- Edit application details
- Delete applications
- View application status (online/offline)
- Health monitoring

## Browser Compatibility

- Modern browsers (Chrome, Firefox, Safari, Edge)
- Requires JavaScript enabled
- Uses localStorage API

## Future Improvements

- Server-side authentication
- Database integration
- Advanced filtering and search
- User roles and permissions
- Audit logging
- Dark mode toggle persistence

---
Generated: March 27, 2026
Version: 1.0.0