Django React Logistics Portal Expert

Expert system for working with a logistics management portal built with Django REST Framework backend and React/TypeScript frontend. Specializes in dual-database architecture, JWT authentication, multi-step forms, and SQL Server WMS integration.

Architecture Overview

This skill provides deep understanding of a logistics portal with:

- PostgreSQL for application data (orders, users, configuration)

- SQL Server (FootPrint WMS) for real-time inventory and operational data

Step-by-Step Instructions

1. Understanding the Codebase Structure

When working with this project:

**Backend Structure**:

**Frontend Structure**:

**Key Integration Points**:

2. Working with the Dual-Database Architecture

When implementing features involving inventory or reports:

**PostgreSQL (Application Database)**:

**SQL Server (WMS Database)**:

**Cross-Database Patterns**:

3. Implementing New Features

When adding functionality:

**Backend Development**:

```bash

cd server

python manage.py startapp [app_name] # If creating new app

python manage.py makemigrations

python manage.py migrate

python manage.py test [app_name]

```

**Frontend Development**:

```bash

cd client

npm start # Development server

npx tsc --noEmit # Type checking

npx eslint src/**/*.{ts,tsx} # Linting

npm run build # Production build

```

**Code Style Requirements**:

4. Working with Key Feature Sections

**Dashboard Section**:

**Create Order Section** (Multi-Step Wizard):

**Reports Section**:

5. API Integration Patterns

**Authentication**:

**Protected Endpoints**:

```typescript

// Use secureApi for authenticated requests

import secureApi from '@/services/api/secureApi';

const response = await secureApi.get('/api/endpoint/');

```

**Error Handling**:

```typescript

try {

const response = await secureApi.post('/api/endpoint/', data);

// Handle success

} catch (error) {

// Display user-friendly error via Snackbar

console.error('Operation failed:', error);

}

```

6. Database Query Patterns

**Django ORM (PostgreSQL)**:

```python

Standard CRUD operations

from orders.models import Order

orders = Order.objects.filter(status='active').select_related('project')

```

**Raw SQL (SQL Server WMS)**:

```python

Store queries in /reports/sql/ directory

Use SQLReportManager for execution

from reports.sql_manager import SQLReportManager

manager = SQLReportManager()

results = manager.execute_query('inventory/by_project.sql', {'project_id': 123})

```

7. Testing Strategy

**Backend Tests**:

```bash

cd server

python manage.py test [app_name.tests.test_file]

python manage.py test # Run all tests

```

**Frontend Tests**:

```bash

cd client

npm test # Run test suite

npm test -- --coverage # With coverage report

```

8. Common Development Workflows

**Adding a New API Endpoint**:

1. Create/update Django ViewSet in appropriate app

2. Register route in app's `urls.py`

3. Create TypeScript interface for response type

4. Add API client method in `services/api/secureApi.ts`

5. Create React hook for data fetching if needed

6. Update Swagger documentation

**Adding a New Report**:

1. Create SQL query file in `/reports/sql/[category]/`

2. Register report definition in Django

3. Add export endpoint if needed

4. Update `ReportSelector.tsx` options

5. Test with real WMS data

**Creating a New Multi-Step Form**:

1. Create container component with step navigation

2. Implement `formReducer` for state management

3. Create step components with validation

4. Add custom hooks for data fetching

5. Implement API integration for form submission

6. Add error handling and user feedback

Constraints

Examples

Example 1: Adding a New Dashboard Filter

```typescript

// In DashboardFilters.tsx

interface FilterState {

searchTerm: string;

orderType: 'outbound' | 'inbound' | 'all';

dateRange: { start: Date; end: Date };

}

const [filters, setFilters] = useState<FilterState>({

searchTerm: '',

orderType: 'all',

dateRange: { start: new Date(), end: new Date() }

});

// Apply filters using DashboardUtils

const filteredOrders = DashboardUtils.filterOrders(orders, filters);

```

Example 2: Creating a New SQL Report

```sql

-- /reports/sql/inventory/by_warehouse.sql

SELECT

warehouse_code,

material_code,

SUM(quantity) as total_quantity,

COUNT(DISTINCT license_plate) as license_plate_count

FROM inventory

WHERE warehouse_code = %(warehouse_code)s

AND status = 'available'

GROUP BY warehouse_code, material_code

ORDER BY total_quantity DESC

```

Example 3: Multi-Step Form with Cross-Database Integration

```typescript

// In useMaterialSelection.ts

const handleMaterialSelect = async (materialCode: string) => {

// Fetch from SQL Server WMS

const inventory = await fetchInventory(materialCode);

// Check if material exists in PostgreSQL

let material = await secureApi.get(`/api/materials/${materialCode}/`);

if (!material) {

// Auto-create in PostgreSQL if found in WMS

material = await secureApi.post('/api/materials/', {

code: materialCode,

description: inventory.description,

// ... other fields from WMS

});

}

// Add to order with PostgreSQL material ID

dispatch({ type: 'ADD_MATERIAL', payload: { material, quantity } });

};

```

Important Notes