# Market BackOffice

A comprehensive Angular-based admin panel for managing multi-brand marketplace products, categories, and inventory.

## Features

- 📊 **Project Management** - Switch between multiple marketplace brands (Dexar, Novo, etc.)
- 📁 **Category Editor** - Create, edit, and organize categories with drag-and-drop priority
- 🏷️ **Subcategory Management** - Hierarchical category structure with subcategories
- 📦 **Item Editor** - Full-featured product editor with:
  - Auto-save (500ms debounce)
  - Image upload and management
  - Rich text descriptions
  - Variant management
  - Tags, pricing, stock control
  - Priority sorting
- 📋 **Items List** - Paginated item browsing with:
  - Search functionality
  - Visibility filters
  - Bulk operations
  - Quick edit access
- 🎨 **Material Design** - Modern Angular Material UI
- 🔄 **Mock Data Mode** - Development mode with mock data for testing
- 📱 **Responsive** - Works on desktop and tablet

## Tech Stack

- **Angular 21** - Latest Angular with standalone components
- **Angular Material 21** - Material Design components
- **TypeScript** - Type-safe development
- **SCSS** - Modular styling
- **RxJS** - Reactive programming

## API Integration

See [API.md](API.md) for complete API documentation.

**Base URL**: Configured in `src/environments/environment.ts`

### Main Endpoints
- Projects: GET `/api/projects`
- Categories: GET, POST, PATCH, DELETE `/api/categories/*`
- Subcategories: GET, POST, PATCH, DELETE `/api/subcategories/*`
- Items: GET, POST, PATCH, DELETE `/api/items/*`
- Upload: POST `/api/upload` (multipart/form-data)

## Project Structure

```
src/app/
├── components/
│   ├── confirm-dialog/        # Confirmation dialogs
│   └── create-dialog/         # Creation dialogs
├── models/
│   ├── project.model.ts       # Project/Brand model
│   ├── category.model.ts      # Category with subcategories
│   ├── item.model.ts          # Product model
│   └── index.ts               # Model exports
├── pages/
│   ├── projects-dashboard/    # Brand selection
│   ├── project-view/          # Category management
│   ├── category-editor/       # Category details editor
│   ├── subcategory-editor/    # Subcategory editor
│   ├── items-list/            # Item browsing
│   └── item-editor/           # Full item editor
├── services/
│   ├── api.service.ts         # HTTP API integration
│   ├── mock-data.service.ts   # Development mock data
│   └── index.ts               # Service exports
└── environments/
    ├── environment.ts         # Development config
    └── environment.production.ts  # Production config
```

## Development server

To start a local development server, run:

```bash
npm start
# or
ng serve
```

Once the server is running, open your browser and navigate to `http://localhost:4200/`.

## Building

To build the project for production:

```bash
npm run build
# or
ng build
```

This will compile your project and store the build artifacts in the `dist/market-backOffice/` directory.

## Environment Configuration

### Development (`src/environments/environment.ts`)
```typescript
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',  // Local backend
  useMockData: true  // Use mock data for development
};
```

### Production (`src/environments/environment.production.ts`)
```typescript
export const environment = {
  production: true,
  apiUrl: 'https://api.dexarmarket.ru/api',  // Production backend
  useMockData: false  // Use real API
};
```

## Deployment

### Prerequisites
1. Node.js 18+ and npm installed
2. Backend API running and accessible
3. API URL configured in production environment

### Build for Production
```bash
npm run build
```

### Deploy to Server
1. Upload contents of `dist/market-backOffice/` to your web server
2. Configure nginx or Apache to serve the files:

**Nginx Example:**
```nginx
server {
    listen 80;
    server_name backoffice.dexarmarket.ru;
    
    root /var/www/backoffice;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Optional: Proxy API requests
    location /api/ {
        proxy_pass https://api.dexarmarket.ru/api/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
```

3. Enable HTTPS with Let's Encrypt:
```bash
certbot --nginx -d backoffice.dexarmarket.ru
```

## Development Features

### Auto-Save
- Item editor auto-saves changes after 500ms of inactivity
- Each field triggers individual PATCH requests
- Visual feedback for save operations

### Mock Data Mode
- Enable with `useMockData: true` in environment
- Simulates full API with realistic data
- Useful for frontend development without backend

### Material Design
- Consistent UI with Angular Material
- Themes can be customized in `src/styles.scss`
- Responsive components for all screen sizes

## Running unit tests

To execute unit tests with [Vitest](https://vitest.dev/):

```bash
npm test
# or
ng test
```

## Additional Resources

- [Angular CLI Documentation](https://angular.dev/tools/cli)
- [Angular Material](https://material.angular.io/)
- [API Documentation](API.md)

## Support

For issues or questions, contact the development team or check the main marketplace repository.

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.