GNX-WEB/POLICY_API_SETUP.md

# Policy API Setup - Complete Guide

## 🎉 Summary

Successfully created a comprehensive Policy Management System with:
- **3 Policy Types**: Privacy Policy, Terms of Use, Support Policy
- **Professional Enterprise Content**: 13-15 sections per policy with detailed legal and operational information
- **Full CRUD API**: RESTful API endpoints for managing policies
- **Dynamic Frontend**: React-based policy viewer with loading states and error handling

---

## 📋 What Was Created

### Backend (Django)

#### 1. **Models** (`backend/policies/models.py`)
- `Policy`: Main policy document with metadata (type, title, version, effective date)
- `PolicySection`: Individual sections within each policy

#### 2. **API Views** (`backend/policies/views.py`)
- `PolicyViewSet`: RESTful viewset for policy CRUD operations
- Endpoints support filtering by type
- Retrieve by ID or policy type

#### 3. **Serializers** (`backend/policies/serializers.py`)
- `PolicySerializer`: Full policy with all sections
- `PolicyListSerializer`: Simplified list view
- `PolicySectionSerializer`: Individual section data

#### 4. **Admin Interface** (`backend/policies/admin.py`)
- Full admin panel integration
- Inline section editing
- List filters and search functionality

#### 5. **Management Command** (`backend/policies/management/commands/populate_policies.py`)
- Command: `python manage.py populate_policies`
- Creates/updates all 3 policies with professional content
- 42 total sections across all policies

### Frontend (Next.js)

#### 1. **API Service** (`lib/api/policyService.ts`)
- `getPolicies()`: Fetch all policies
- `getPolicyByType(type)`: Fetch specific policy
- `getPolicyById(id)`: Fetch by ID

#### 2. **React Hook** (`lib/hooks/usePolicy.ts`)
- `usePolicies()`: Hook for all policies
- `usePolicy(type)`: Hook for specific policy
- `usePolicyById(id)`: Hook for policy by ID

#### 3. **Policy Page** (`app/policy/page.tsx`)
- Dynamic page showing policy content
- Query parameter: `?type=privacy|terms|support`
- Loading and error states
- Responsive design
- Styled with inline styles

#### 4. **Support Center Integration** (`components/pages/support/SupportCenterHero.tsx`)
- Added 3 new clickable cards:
  - Privacy Policy → `/policy?type=privacy`
  - Terms of Use → `/policy?type=terms`
  - Support Policy → `/policy?type=support`

---

## 🚀 Setup Complete!

### What Was Done:

```bash
# 1. Created migrations
python manage.py makemigrations policies
✅ Created: policies/migrations/0001_initial.py

# 2. Applied migrations
python manage.py migrate policies
✅ Created database tables

# 3. Populated with content
python manage.py populate_policies
✅ Privacy Policy: 13 sections
✅ Terms of Use: 14 sections
✅ Support Policy: 15 sections
```

---

## 📡 API Endpoints

### Base URL
```
http://localhost:8000/api/policies/
```

### Available Endpoints

#### 1. **List All Policies**
```
GET /api/policies/
```
**Response:**
```json
[
  {
    "id": 1,
    "type": "privacy",
    "title": "Privacy Policy",
    "slug": "privacy",
    "description": "Our commitment to protecting your privacy and personal data",
    "last_updated": "2025-10-08",
    "version": "2.1"
  },
  ...
]
```

#### 2. **Get Specific Policy by Type**
```
GET /api/policies/privacy/
GET /api/policies/terms/
GET /api/policies/support/
```
**Response:**
```json
{
  "id": 1,
  "type": "privacy",
  "title": "Privacy Policy",
  "slug": "privacy",
  "description": "Our commitment to protecting your privacy and personal data",
  "last_updated": "2025-10-08",
  "version": "2.1",
  "effective_date": "2025-10-08",
  "sections": [
    {
      "id": 1,
      "heading": "1. Introduction and Scope",
      "content": "GNX Software Solutions...",
      "order": 1
    },
    ...
  ]
}
```

#### 3. **Get Policy by ID**
```
GET /api/policies/{id}/
```

---

## 🎨 Frontend Usage

### 1. **Direct Navigation**
```typescript
// Link to policies from anywhere
<a href="/policy?type=privacy">Privacy Policy</a>
<a href="/policy?type=terms">Terms of Use</a>
<a href="/policy?type=support">Support Policy</a>
```

### 2. **Using the Hook**
```typescript
import { usePolicy } from '@/lib/hooks/usePolicy';

function MyComponent() {
  const { data: policy, isLoading, error } = usePolicy('privacy');
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h1>{policy.title}</h1>
      {policy.sections.map(section => (
        <div key={section.id}>
          <h2>{section.heading}</h2>
          <p>{section.content}</p>
        </div>
      ))}
    </div>
  );
}
```

### 3. **Support Center Cards**
The support center hero now has 6 cards:
- **Top Row** (Opens Modals):
  - Submit Tickets
  - Knowledge Base
  - Track Status
- **Bottom Row** (Navigates to Policy Page):
  - Privacy Policy
  - Terms of Use
  - Support Policy

---

## 📝 Policy Content Overview

### Privacy Policy (13 Sections)
1. Introduction and Scope
2. Information We Collect
3. How We Collect Information
4. Use of Information
5. Information Sharing and Disclosure
6. Data Security
7. Data Retention
8. Your Rights and Choices
9. International Data Transfers
10. Cookies and Tracking Technologies
11. Children's Privacy
12. Changes to This Privacy Policy
13. Contact Information

### Terms of Use (14 Sections)
1. Acceptance of Terms
2. Service Description and Scope
3. User Accounts and Registration
4. Acceptable Use Policy
5. Intellectual Property Rights
6. Service Level Agreements
7. Payment Terms and Billing
8. Term and Termination
9. Disclaimer of Warranties
10. Limitation of Liability
11. Dispute Resolution and Governing Law
12. Modifications to Terms
13. General Provisions
14. Contact Information

### Support Policy (15 Sections)
1. Support Overview and Commitment
2. Support Coverage and Eligibility
3. Support Channels and Access Methods
4. Business Hours and Availability
5. Priority Levels and Response Times
6. Support Request Submission Requirements
7. Support Scope and Covered Activities
8. Exclusions and Limitations
9. Escalation Procedures
10. Knowledge Base and Self-Service Resources
11. Customer Responsibilities
12. Scheduled Maintenance and Updates
13. Service Level Credits and Remedies
14. Feedback and Continuous Improvement
15. Contact Information and Resources

---

## 🔧 Admin Panel

Access the admin panel to manage policies:

```
http://localhost:8000/admin/policies/
```

**Features:**
- ✅ Create/Edit/Delete policies
- ✅ Inline section editing
- ✅ Version management
- ✅ Effective date tracking
- ✅ Active/Inactive toggle
- ✅ Search and filtering

---

## 🎯 Features

### Backend
- ✅ RESTful API with Django REST Framework
- ✅ Versioned policies
- ✅ Effective date tracking
- ✅ Ordered sections
- ✅ Active/Inactive status
- ✅ Full admin interface
- ✅ Management command for easy population

### Frontend
- ✅ Dynamic policy loading from API
- ✅ Loading states with spinner
- ✅ Error handling with user-friendly messages
- ✅ Responsive design (mobile-friendly)
- ✅ Version and date display
- ✅ Smooth animations
- ✅ SEO-friendly structure
- ✅ Integration with support center

---

## 🚦 Testing

### Test the API
```bash
# List all policies
curl http://localhost:8000/api/policies/

# Get privacy policy
curl http://localhost:8000/api/policies/privacy/

# Get terms of use
curl http://localhost:8000/api/policies/terms/

# Get support policy
curl http://localhost:8000/api/policies/support/
```

### Test the Frontend
1. Navigate to: `http://localhost:3000/policy?type=privacy`
2. Navigate to: `http://localhost:3000/policy?type=terms`
3. Navigate to: `http://localhost:3000/policy?type=support`
4. Navigate to: `http://localhost:3000/support-center`
5. Click on any of the 6 feature cards

---

## 📊 Database Schema

```sql
-- Policy Table
CREATE TABLE policies_policy (
    id INTEGER PRIMARY KEY,
    type VARCHAR(50) UNIQUE,
    title VARCHAR(200),
    slug VARCHAR(100) UNIQUE,
    description TEXT,
    last_updated DATE,
    version VARCHAR(20),
    is_active BOOLEAN,
    effective_date DATE,
    created_at TIMESTAMP,
    updated_at TIMESTAMP
);

-- PolicySection Table
CREATE TABLE policies_policysection (
    id INTEGER PRIMARY KEY,
    policy_id INTEGER REFERENCES policies_policy(id),
    heading VARCHAR(300),
    content TEXT,
    order INTEGER,
    is_active BOOLEAN,
    created_at TIMESTAMP,
    updated_at TIMESTAMP
);
```

---

## 🔄 Updating Policies

### Via Management Command
```bash
# Re-run to update all policies
cd backend
../venv/bin/python manage.py populate_policies
```

### Via Admin Panel
1. Go to `http://localhost:8000/admin/policies/policy/`
2. Click on the policy to edit
3. Modify sections inline
4. Save changes

### Via API (Programmatic)
```python
from policies.models import Policy, PolicySection

# Get policy
policy = Policy.objects.get(type='privacy')

# Add new section
PolicySection.objects.create(
    policy=policy,
    heading="New Section",
    content="Section content...",
    order=14
)
```

---

## 🎨 Customization

### Styling
The policy page uses inline styles. To customize:
- Edit `/app/policy/page.tsx`
- Modify the `<style jsx>` blocks
- Or create a separate SCSS file

### Content
To modify policy content:
1. Edit `/backend/policies/management/commands/populate_policies.py`
2. Update the sections array for each policy
3. Run: `python manage.py populate_policies`

---

## ✅ Checklist

- [x] Backend models created
- [x] Database migrations applied
- [x] API endpoints configured
- [x] Professional content populated
- [x] Frontend service created
- [x] React hooks implemented
- [x] Policy page created
- [x] Support center integrated
- [x] Loading states added
- [x] Error handling implemented
- [x] Responsive design
- [x] Admin panel configured

---

## 🎉 You're All Set!

The Policy API system is now fully operational. Users can:
1. View all three policies from the support center
2. Access detailed, professional legal documents
3. See version information and effective dates
4. Navigate easily between policies

**Next Steps:**
- Customize policy content for your organization
- Add more policy types if needed
- Integrate policy acceptance tracking (optional)
- Add PDF export functionality (optional)

---

## 📞 Support

For questions or issues:
- Check the Django admin: `http://localhost:8000/admin/`
- View API docs: `http://localhost:8000/swagger/`
- Review backend logs: `/backend/logs/django.log`

**Congratulations!** 🎊 Your enterprise-grade policy management system is ready to use!