# Frontend Ready to Test ✅

## 🎉 Status: READY FOR TESTING

The frontend is fully set up and ready to test!

---

## 📋 Pre-Testing Checklist

Before testing, ensure:

- [ ] **Node.js 18+ installed** (check with `node --version`)
- [ ] **Backend API running** on `http://localhost:8080`
- [ ] **Database running** and accessible
- [ ] **Test user created** in database

---

## 🚀 Quick Start Testing

### 1. Install Node.js (if not installed)

```bash
# Option 1: Use install script
sudo ./scripts/install-requirements.sh

# Option 2: Manual installation
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
```

### 2. Install Frontend Dependencies

```bash
cd frontend
npm install
```

### 3. Start Backend (if not running)

In one terminal:
```bash
cd backend
export CALYPSO_DB_PASSWORD="calypso123"
export CALYPSO_JWT_SECRET="test-jwt-secret-key-minimum-32-characters-long"
go run ./cmd/calypso-api -config config.yaml.example
```

### 4. Start Frontend Dev Server

In another terminal:
```bash
cd frontend
npm run dev
```

### 5. Open Browser

Navigate to: `http://localhost:3000`

---

## ✅ What to Test

### Authentication
- [ ] Login page displays
- [ ] Login with valid credentials works
- [ ] Invalid credentials show error
- [ ] Token is stored after login
- [ ] Logout works

### Dashboard
- [ ] Dashboard loads after login
- [ ] System health status displays
- [ ] Overview cards show data:
  - Storage repositories count
  - Active alerts count
  - iSCSI targets count
  - Running tasks count
- [ ] Quick action buttons work
- [ ] Recent alerts preview displays

### Storage Page
- [ ] Navigate to Storage from sidebar
- [ ] Repositories list displays
- [ ] Capacity bars render correctly
- [ ] Physical disks list displays
- [ ] Volume groups list displays
- [ ] Status indicators show correctly

### Alerts Page
- [ ] Navigate to Alerts from sidebar
- [ ] Alert list displays
- [ ] Filter buttons work (All / Unacknowledged)
- [ ] Severity colors are correct
- [ ] Acknowledge button works
- [ ] Resolve button works
- [ ] Relative time displays correctly

### Navigation
- [ ] Sidebar navigation works
- [ ] All menu items are clickable
- [ ] Active route is highlighted
- [ ] Logout button works

---

## 🐛 Common Issues

### "Node.js not found"
**Fix**: Install Node.js (see step 1 above)

### "Cannot connect to API"
**Fix**: 
- Ensure backend is running
- Check `http://localhost:8080/api/v1/health` in browser

### "401 Unauthorized"
**Fix**:
- Verify user exists in database
- Check password is correct (may need Argon2id hash)
- See `scripts/update-admin-password.sh`

### "Blank page"
**Fix**:
- Check browser console (F12)
- Check network tab for failed requests
- Verify all dependencies installed

---

## 📊 Test Results Template

After testing, document results:

```
Frontend Testing Results
Date: [DATE]
Tester: [NAME]

✅ PASSING:
- Login page
- Dashboard
- Storage page
- Alerts page
- Navigation

❌ FAILING:
- [Issue description]

⚠️  ISSUES:
- [Issue description]
```

---

## 🎯 Expected Behavior

### Login Flow
1. User sees login form
2. Enters credentials
3. On success: Redirects to dashboard
4. Token stored in localStorage
5. All API requests include token

### Dashboard
- Shows system health (green/yellow/red indicator)
- Displays overview statistics
- Shows quick action buttons
- Displays recent alerts (if any)

### Storage Page
- Lists all repositories with usage bars
- Shows physical disks
- Shows volume groups
- All data from real API

### Alerts Page
- Lists alerts with severity colors
- Filtering works
- Actions (acknowledge/resolve) work
- Updates after actions

---

## 📝 Next Steps After Testing

Once testing is complete:
1. Document any issues found
2. Fix any bugs
3. Continue building remaining pages:
   - Tape Libraries
   - iSCSI Targets
   - Tasks
   - System
   - IAM
4. Add WebSocket real-time updates
5. Enhance UI components

---

## 🎉 Ready to Test!

The frontend is fully set up with:
- ✅ React + Vite + TypeScript
- ✅ Authentication flow
- ✅ Dashboard with real data
- ✅ Storage management page
- ✅ Alerts management page
- ✅ Navigation and routing
- ✅ API integration
- ✅ UI components

**Start testing now!** 🚀