gnx/GNX-WEB

Fork 0

Files

Iliyan Angelov dd8eb1c7aa update

2025-10-09 00:44:15 +03:00

10 KiB

Raw Blame History

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:

# 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:

[
  {
    "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:

{
  "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

// 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

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)

Introduction and Scope
Information We Collect
How We Collect Information
Use of Information
Information Sharing and Disclosure
Data Security
Data Retention
Your Rights and Choices
International Data Transfers
Cookies and Tracking Technologies
Children's Privacy
Changes to This Privacy Policy
Contact Information

Terms of Use (14 Sections)

Acceptance of Terms
Service Description and Scope
User Accounts and Registration
Acceptable Use Policy
Intellectual Property Rights
Service Level Agreements
Payment Terms and Billing
Term and Termination
Disclaimer of Warranties
Limitation of Liability
Dispute Resolution and Governing Law
Modifications to Terms
General Provisions
Contact Information

Support Policy (15 Sections)

Support Overview and Commitment
Support Coverage and Eligibility
Support Channels and Access Methods
Business Hours and Availability
Priority Levels and Response Times
Support Request Submission Requirements
Support Scope and Covered Activities
Exclusions and Limitations
Escalation Procedures
Knowledge Base and Self-Service Resources
Customer Responsibilities
Scheduled Maintenance and Updates
Service Level Credits and Remedies
Feedback and Continuous Improvement
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

# 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

Navigate to: http://localhost:3000/policy?type=privacy
Navigate to: http://localhost:3000/policy?type=terms
Navigate to: http://localhost:3000/policy?type=support
Navigate to: http://localhost:3000/support-center
Click on any of the 6 feature cards

📊 Database Schema

-- 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

# Re-run to update all policies
cd backend
../venv/bin/python manage.py populate_policies

Via Admin Panel

Go to http://localhost:8000/admin/policies/policy/
Click on the policy to edit
Modify sections inline
Save changes

Via API (Programmatic)

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:

Edit /backend/policies/management/commands/populate_policies.py
Update the sections array for each policy
Run: python manage.py populate_policies

✅ Checklist

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

🎉 You're All Set!

The Policy API system is now fully operational. Users can:

View all three policies from the support center
Access detailed, professional legal documents
See version information and effective dates
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!

10 KiB Raw Blame History