[University Logo]

PROJECT TITLE
(Make it descriptive but not a paragraph)

A Project Report Submitted in Partial Fulfillment
of the Requirements for the Degree of
Bachelor of Technology
in
[Your Department]

Submitted by:
[Your Name]
Roll No: [Your Roll Number]

Under the Guidance of:
[Supervisor Name]
[Supervisor Designation]

[Department Name]
[University Name]
[City, State]
[Month Year]

DECLARATION

I hereby declare that this project report entitled "[Project Title]" 
is a result of my own work and efforts. I have not copied it from 
any source. All sources of information have been specifically 
acknowledged by giving references.

[Student Signature]
[Student Name]
[Roll Number]
Date:

---

CERTIFICATE

This is to certify that the project report entitled "[Project Title]" 
submitted by [Student Name], Roll No. [Number] in partial fulfillment 
of the requirements for the award of Bachelor of Technology in 
[Department] is a bonafide work carried out by him/her under my 
supervision and guidance.

[Supervisor Signature]
[Supervisor Name]
[Designation]
Date:

ACKNOWLEDGMENTS

I would like to express my sincere gratitude to all those who 
contributed to the successful completion of this project.

First and foremost, I thank [Supervisor Name], [Designation], 
for their continuous guidance, valuable suggestions, and constant 
encouragement throughout the project duration.

I am grateful to [HOD Name], Head of Department of [Department], 
for providing the necessary facilities and support.

[For internship reports:]
Special thanks to [Company Name] for providing the internship 
opportunity and practical exposure that enhanced my understanding 
of real-world applications. I particularly acknowledge 
[Mentor Name] for their industry insights and technical guidance.

I also acknowledge my classmates and friends for their help and 
cooperation during various phases of the project.

Finally, I thank my family for their unwavering support and 
encouragement throughout my academic journey.

[Your Name]
[Roll Number]

ABSTRACT

Traditional [domain] management systems often suffer from inefficiencies 
in [specific problems]. This project presents a comprehensive [System Name] 
developed using modern web technologies to address these challenges.

The system was developed using [Frontend Tech] for the frontend, [Backend Tech] 
for the backend, and [Database] for data storage. Key features include [3-4 
main features with brief descriptions].

The application implements [technical approaches] for [benefits]. Advanced 
features include [2-3 advanced features] providing [specific advantages].

Testing revealed [performance metrics] and [improvement statistics] compared 
to traditional methods. The system successfully handles [capacity/performance 
metrics] and provides [user experience benefits].

This project demonstrates practical application of [technologies/concepts] 
and provides a scalable solution for [target domain].

ABSTRACT

[Problem domain] faces significant challenges including [2-3 specific issues]. 
This project develops a cross-platform mobile application to address these 
concerns through [approach].

The application was built using [Technology Stack] with [key integrations]. 
Core functionalities include [4-5 main features]. The app features [UX aspects] 
and works seamlessly on both Android and iOS platforms.

Key technical implementations include [technical features]. User testing with 
[number] participants showed [satisfaction metrics] and [performance statistics].

This solution addresses [specific problems] while demonstrating [technical skills] 
and real-world problem-solving capabilities.

TABLE OF CONTENTS

Certificate/Declaration                                      i
Acknowledgments                                             ii
Abstract                                                   iii
Table of Contents                                           iv
List of Figures                                             v
List of Tables                                             vi

Chapter 1: Introduction                                      1
1.1 Background and Motivation                               1
1.2 Problem Statement                                       3
1.3 Objectives                                             4
1.4 Scope and Limitations                                   5
1.5 Organization of Report                                  6

Chapter 2: Company Profile [For Internship Reports]         7
2.1 Company Overview                                        7
2.2 Vision and Mission                                      8
2.3 Products and Services                                   9
2.4 Technology Infrastructure                              10
2.5 Target Market                                          11

Chapter 3: Literature Review and Technology Analysis        12
3.1 Existing Systems Analysis                              12
3.2 Technology Selection and Justification                15
3.3 Comparative Study                                      17

Chapter 4: System Analysis and Design                      19
4.1 Requirements Specification                             19
4.2 System Architecture                                    22
4.3 Database Design                                        24
4.4 User Interface Design                                  26

Chapter 5: Implementation Details                          28
5.1 Development Environment                                28
5.2 Module-wise Implementation                             30
5.3 Integration and Testing                                35

Chapter 6: Results and Evaluation                          38
6.1 System Features                                        38
6.2 Performance Analysis                                   41
6.3 User Feedback and Testing                              43

Chapter 7: Conclusion and Future Work                      45
7.1 Conclusion                                             45
7.2 Limitations                                            46
7.3 Future Enhancements                                    47

References                                                  48
Appendices                                                  49

3.1 COMPANY OVERVIEW

[Company Name] is a [industry type] company founded in [year] and 
headquartered in [location]. Established by [founder names], the 
company has grown from [initial description] to [current status].

With over [number] employees across [number] locations, [Company Name] 
serves [target market] and has established itself as [market position]. 
The company's primary business includes [main services/products] with 
a focus on [specialization area].

Key Statistics:
• Founded: [Year]
• Headquarters: [City, Country]  
• Employees: [Number] (as of [Year])
• Revenue: [Amount] (if public)
• Offices: [Number] locations across [regions]
• Market Presence: [Geographic reach]

3.2 VISION AND MISSION

Vision Statement:
"[Company's vision statement]"

This vision reflects the company's commitment to [explanation of what 
the vision means and how it guides company decisions].

Mission Statement:  
"[Company's mission statement]"

The mission emphasizes [breakdown of mission components] which aligns 
with the company's daily operations through [specific examples].

3.3 TECHNOLOGY INFRASTRUCTURE

Development Stack:
• Frontend Technologies: [List technologies used]
• Backend Technologies: [List technologies used]
• Mobile Development: [If applicable]
• Database Systems: [List databases used]
• Cloud Platforms: [List cloud services]

DevOps and Tools:
• Version Control: [Git platforms used]
• CI/CD: [Deployment tools]
• Monitoring: [Monitoring solutions]

This technology stack enables [company benefits] and supports 
[business objectives].

3.4 BUSINESS MODEL AND TARGET MARKET

Primary Markets:
1. [Market Segment 1]
   - [Description and characteristics]
   - [Size and potential]

2. [Market Segment 2]
   - [Description and characteristics]
   - [Size and potential]

Revenue Model:
• [Revenue stream 1]: [Description]
• [Revenue stream 2]: [Description]

Competitive Advantages:
• [Advantage 1]: [Explanation]
• [Advantage 2]: [Explanation]

4.1 BACKGROUND AND MOTIVATION

In today's [context], [describe the general problem area]. Traditional 
approaches to [problem domain] often face challenges such as [list 2-3 
key challenges]. For instance, [specific example of the problem].

According to [credible source/statistic], [relevant data that supports 
the problem's importance]. This has led to [consequences/impacts] affecting 
[stakeholders].

Current solutions in the market include [mention existing solutions] but 
they suffer from limitations such as:
• [Limitation 1 with brief explanation]
• [Limitation 2 with brief explanation]  
• [Limitation 3 with brief explanation]

These limitations create an opportunity for [your solution approach].

4.2 PROBLEM STATEMENT

The primary problem addressed by this project is [specific, measurable 
problem statement].

Specifically, the current system/approach faces the following issues:
1. [Issue 1]: [Detailed description and quantifiable impact]
2. [Issue 2]: [Detailed description and quantifiable impact]
3. [Issue 3]: [Detailed description and quantifiable impact]

These problems result in [quantifiable impacts such as time wastage, 
cost increases, user dissatisfaction, etc.].

The target users affected include [list stakeholders] who currently 
experience [specific pain points].

4.3 PROJECT OBJECTIVES

The primary objective of this project is to [main goal].

Specific objectives include:

1. Functional Objectives:
   • Develop [specific feature] to address [problem]
   • Implement [specific feature] to improve [metric]
   • Create [specific feature] to enable [capability]

2. Technical Objectives:
   • Build a scalable system supporting [specifications]
   • Achieve system response time of less than [time]
   • Ensure [reliability/availability metrics]

3. User Experience Objectives:
   • Design intuitive interface requiring minimal training
   • Support cross-platform accessibility
   • Implement [accessibility/usability features]

4. Business Objectives:
   • Reduce [process] time by [percentage]
   • Decrease [cost type] by [amount/percentage]
   • Improve [metric] to [target score]

4.4 PROJECT SCOPE

This project encompasses the following areas:

Included in Scope:
• [Feature/module 1 with brief description]
• [Feature/module 2 with brief description]
• [Feature/module 3 with brief description]
• Support for [platforms/browsers/devices]
• Integration with [specific systems/APIs]

Out of Scope:
• [Feature/aspect not included with reason]
• Advanced features like [examples] (reserved for future versions)

Target Users:
• Primary Users: [description and characteristics]
• Secondary Users: [description and characteristics]
• Administrators: [description and responsibilities]

Assumptions:
• Users have [basic requirements]
• [Technical assumptions]
• [Environmental assumptions]

Limitations:
• Current version supports up to [capacity]
• Limited to [specific constraints]
• Requires [prerequisites]

5.1.1 [System Name]

Developer/Company: [Name]
Type: [Open source/Commercial/SaaS]
Target Users: [Description]
Year of Release: [Year]

Key Features:
• [Feature 1]: [Description and capabilities]
• [Feature 2]: [Description and capabilities]
• [Feature 3]: [Description and capabilities]

Strengths:
• [Strength 1 with detailed explanation]
• [Strength 2 with detailed explanation]

Weaknesses:
• [Weakness 1 with detailed explanation]
• [Weakness 2 with detailed explanation]

Technology Stack: [Technologies used]
Pricing: [Cost model and approximate costs]
Market Position: [User base and market share if available]

Table 5.1: Feature Comparison Matrix

| Feature Category | System A | System B | System C | Proposed System |
|------------------|----------|----------|----------|----------------|
| User Management  | ✓        | ✓        | ✗        | ✓              |
| Mobile Support   | Limited  | ✓        | ✗        | ✓              |
| Real-time Updates| ✗        | ✓        | ✗        | ✓              |
| Customization    | Limited  | High     | Medium   | High           |
| Scalability      | High     | Medium   | Low      | High           |
| Cost             | High     | Medium   | Low      | Free           |

Legend: ✓ = Fully Supported, Limited = Partially Supported, ✗ = Not Supported

Table 5.2: Technology Stack Comparison

| Component | System A | System B | System C | Proposed System |
|-----------|----------|----------|----------|----------------|
| Frontend  | JSP      | React    | Angular  | React          |
| Backend   | Java     | Node.js  | .NET     | Node.js        |
| Database  | Oracle   | MongoDB  | MySQL    | MongoDB        |
| Deployment| On-prem  | Cloud    | Hybrid   | Cloud          |
| Mobile    | None     | Native   | PWA      | React Native   |

5.3 TECHNOLOGY SELECTION AND JUSTIFICATION

Based on the analysis of existing systems and project requirements, 
the following technology stack was selected:

5.3.1 Frontend Technology: [Selected Technology]

Selected: [Technology Name]
Alternatives Considered: [List alternatives]

Justification:
• [Reason 1 with technical explanation]
• [Reason 2 with technical explanation]
• [Reason 3 with technical explanation]

Specific Advantages for This Project:
• [Project-specific benefit 1]
• [Project-specific benefit 2]

5.3.2 Backend Technology: [Selected Technology]

Selected: [Technology Name]
Alternatives Considered: [List alternatives]

Justification:
• [Reason 1 with technical explanation]
• [Reason 2 with technical explanation]

Learning Outcome:
This choice allowed me to [learning benefits and skill development].

[Continue for all major technology choices]

6.1 FUNCTIONAL REQUIREMENTS

The functional requirements define specific behaviors and functions 
that the system must perform.

Table 6.1: Functional Requirements Specification

| ID  | Requirement Name | Description | Priority | Input | Output |
|-----|------------------|-------------|----------|-------|--------|
| FR1 | User Authentication | System shall provide secure login with role-based access | High | Username, Password | Auth Token, User Session |
| FR2 | Data Management | System shall allow CRUD operations on [entity] | High | [Input data] | [Output format] |
| FR3 | Reporting | System shall generate [report types] | Medium | [Parameters] | [Report format] |

Detailed Requirements:

FR1: User Authentication and Authorization
Description: The system shall provide secure user authentication 
and role-based authorization
Priority: High
Preconditions: User account exists in system
Input: Username/email, password, optional 2FA code
Process: 
1. Validate credentials against database
2. Generate JWT token if valid
3. Set user session with role permissions
Output: Authentication token, user profile data
Postconditions: User logged in with appropriate permissions

6.2 NON-FUNCTIONAL REQUIREMENTS

NFR1: Performance Requirements
• Response Time: 95% of requests processed within 3 seconds
• Throughput: Support minimum 100 concurrent users
• Resource Usage: Maximum 4GB RAM under normal load
• Database Query Time: Average query execution < 100ms

NFR2: Security Requirements
• Data Encryption: AES-256 encryption for sensitive data
• Authentication: JWT-based with configurable expiration
• Authorization: Role-based access control (RBAC)
• Data Privacy: Compliance with [relevant regulations]

NFR3: Usability Requirements
• Learning Curve: New users complete basic tasks within 15 minutes
• Accessibility: WCAG 2.1 AA compliance
• Browser Support: Latest 2 versions of major browsers
• Mobile Responsiveness: Full functionality on 320px+ screens

NFR4: Reliability and Availability
• Uptime: 99.5% availability during business hours
• Error Handling: Graceful degradation with user-friendly messages
• Data Backup: Automated daily backups with recovery procedures
• Fault Tolerance: System continues with single component failure

6.3 SYSTEM ARCHITECTURE

The proposed system follows a [architecture pattern] architecture:

Architecture Overview:
The system is designed using [architectural pattern] to ensure 
[benefits like scalability, maintainability, etc.].

Presentation Layer:
• [Frontend technology] application for web interface
• [Mobile technology] for mobile applications
• Responsive design for cross-device compatibility

Business Logic Layer:
• [Backend technology] with [framework]
• RESTful API design following OpenAPI standards
• Business rule implementation and validation
• Authentication and authorization middleware

Data Access Layer:
• [Database technology] for primary data storage
• [Caching solution] for performance optimization
• [File storage solution] for media and documents

External Integrations:
• [Integration 1]: [Purpose and implementation]
• [Integration 2]: [Purpose and implementation]

Architecture Benefits:
• Separation of concerns enabling independent development
• Horizontal scalability at each layer
• Technology flexibility allowing layer-specific optimizations
• Maintainability through modular design
• Testability through clear component boundaries

6.4 COMPONENT INTERACTION DESIGN

Data Flow Architecture:
1. User Request → Frontend Application
2. Frontend → API Gateway/Backend Server
3. Backend → Authentication Middleware
4. Backend → Business Logic Processing
5. Backend → Database/External Services
6. Response ← Backend ← Database
7. Response ← Frontend ← Backend
8. User Interface Update

Key Interactions:
• User Authentication Flow: [Detailed steps]
• Data Retrieval Process: [Detailed steps]
• Real-time Updates: [Implementation approach]
• Error Handling Chain: [Error propagation strategy]

6.5 DATABASE DESIGN

6.5.1 Entity Relationship Design

Primary Entities:

1. User Entity
   Attributes: user_id (PK), username, email, password_hash, 
              role, first_name, last_name, created_date, 
              updated_date, is_active
   Relationships: 
   - One-to-many with UserSessions
   - One-to-many with [related entities]

2. [Entity Name] Entity
   Attributes: [List with data types and constraints]
   Relationships: [Describe relationships with other entities]

[Continue for all major entities]

6.5.2 Database Schema

```sql
-- Users table
CREATE TABLE users (
    user_id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    role ENUM('admin', 'user', 'moderator') DEFAULT 'user',
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    created_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT TRUE,
    
    INDEX idx_email (email),
    INDEX idx_username (username),
    INDEX idx_role (role)
);

-- [Additional tables with proper indexing and constraints]

### 6.4 User Interface Design

---

## Chapter 7: Implementation Details

### 7.1 Development Environment

project-root/
├── frontend/               # Client-side application
│   ├── public/            # Static assets
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page/route components
│   │   ├── services/      # API communication
│   │   ├── utils/         # Helper functions
│   │   ├── hooks/         # Custom React hooks
│   │   └── styles/        # CSS/styling files
├── backend/               # Server-side application
│   ├── controllers/       # Request handlers
│   ├── models/           # Data models/schemas
│   ├── routes/           # API route definitions
│   ├── middleware/       # Custom middleware
│   ├── config/           # Configuration files
│   └── utils/            # Server utilities
├── database/             # Database scripts and migrations
├── tests/               # Test files and test data
├── docs/                # Project documentation
└── deployment/          # Deployment scripts and configs

### 7.2 Core Module Implementation

#### Authentication System

// MongoDB Schema Example
const userSchema = new mongoose.Schema({
  username: {
    type: String,
    required: [true, 'Username is required'],
    unique: true,
    trim: true,
    minlength: [3, 'Username must be at least 3 characters'],
    maxlength: [30, 'Username cannot exceed 30 characters']
  },
  email: {
    type: String,
    required: [true, 'Email is required'],
    unique: true,
    lowercase: true,
    validate: {
      validator: function(email) {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
      },
      message: 'Please provide a valid email address'
    }
  },
  password: {
    type: String,
    required: [true, 'Password is required'],
    minlength: [6, 'Password must be at least 6 characters']
  },
  role: {
    type: String,
    enum: ['user', 'admin', 'moderator'],
    default: 'user'
  },
  profile: {
    firstName: String,
    lastName: String,
    avatar: String
  },
  isActive: {
    type: Boolean,
    default: true
  },
  lastLogin: Date,
  emailVerified: {
    type: Boolean,
    default: false
  }
}, {
  timestamps: true // Adds createdAt and updatedAt
});

// Hash password before saving
userSchema.pre('save', async function(next) {
  if (!this.isModified('password')) return next();
  
  const saltRounds = 12;
  this.password = await bcrypt.hash(this.password, saltRounds);
  next();
});

// Instance method to check password
userSchema.methods.comparePassword = async function(candidatePassword) {
  return await bcrypt.compare(candidatePassword, this.password);
};

const jwt = require('jsonwebtoken');
const { validationResult } = require('express-validator');
const User = require('../models/User');

class AuthController {
  // User Registration
  async register(req, res) {
    try {
      // Validate input
      const errors = validationResult(req);
      if (!errors.isEmpty()) {
        return res.status(400).json({
          success: false,
          message: 'Validation failed',
          errors: errors.array()
        });
      }

      const { username, email, password, firstName, lastName } = req.body;

      // Check for existing user
      const existingUser = await User.findOne({
        $or: [{ email }, { username }]
      });

      if (existingUser) {
        return res.status(409).json({
          success: false,
          message: 'User already exists with this email or username'
        });
      }

      // Create new user
      const userData = {
        username,
        email,
        password,
        profile: { firstName, lastName }
      };

      const user = new User(userData);
      await user.save();

      // Generate JWT token
      const token = this.generateToken(user);

      // Remove password from response
      const userResponse = user.toObject();
      delete userResponse.password;

      res.status(201).json({
        success: true,
        message: 'User registered successfully',
        data: {
          user: userResponse,
          token
        }
      });

    } catch (error) {
      console.error('Registration error:', error);
      res.status(500).json({
        success: false,
        message: 'Internal server error during registration'
      });
    }
  }

        // User Login
  async login(req, res) {
    try {
      const errors = validationResult(req);
      if (!errors.isEmpty()) {
        return res.status(400).json({
          success: false,
          message: 'Validation failed',
          errors: errors.array()
        });
      }

      const { email, password } = req.body;

      // Find user and include password for comparison
      const user = await User.findOne({ email }).select('+password');

      if (!user || !user.isActive) {
        return res.status(401).json({
          success: false,
          message: 'Invalid credentials or account deactivated'
        });
      }

      // Verify password
      const isPasswordValid = await user.comparePassword(password);

      if (!isPasswordValid) {
        return res.status(401).json({
          success: false,
          message: 'Invalid credentials'
        });
      }

      // Update last login
      user.lastLogin = new Date();
      await user.save();

      // Generate token
      const token = this.generateToken(user);

      // Prepare user response (excluding password)
      const userResponse = user.toObject();
      delete userResponse.password;

      res.status(200).json({
        success: true,
        message: 'Login successful',
        data: {
          user: userResponse,
          token
        }
      });

    } catch (error) {
      console.error('Login error:', error);
      res.status(500).json({
        success: false,
        message: 'Internal server error during login'
      });
    }
  }

  // Generate JWT Token
  generateToken(user) {
    const payload = {
      userId: user._id,
      email: user.email,
      role: user.role
    };

    return jwt.sign(
      payload,
      process.env.JWT_SECRET,
      { 
        expiresIn: process.env.JWT_EXPIRES_IN || '7d',
        issuer: 'your-app-name'
      }
    );
  }

  // Token Verification Middleware
  async verifyToken(req, res, next) {
    try {
      const authHeader = req.header('Authorization');
      
      if (!authHeader || !authHeader.startsWith('Bearer ')) {
        return res.status(401).json({
          success: false,
          message: 'Access denied. No valid token provided'
        });
      }

      const token = authHeader.substring(7); // Remove 'Bearer ' prefix

      // Verify token
      const decoded = jwt.verify(token, process.env.JWT_SECRET);

      // Get current user
      const user = await User.findById(decoded.userId);

      if (!user || !user.isActive) {
        return res.status(401).json({
          success: false,
          message: 'Access denied. User not found or deactivated'
        });
      }

      req.user = user;
      next();

    } catch (error) {
      if (error.name === 'JsonWebTokenError') {
        return res.status(401).json({
          success: false,
          message: 'Invalid token'
        });
      }

      if (error.name === 'TokenExpiredError') {
        return res.status(401).json({
          success: false,
          message: 'Token expired'
        });
      }

      res.status(500).json({
        success: false,
        message: 'Token verification failed'
      });
    }
  }

  // Role-based Authorization
  authorize(...allowedRoles) {
    return (req, res, next) => {
      if (!req.user) {
        return res.status(401).json({
          success: false,
          message: 'Authentication required'
        });
      }

      if (!allowedRoles.includes(req.user.role)) {
        return res.status(403).json({
          success: false,
          message: 'Insufficient permissions for this operation'
        });
      }

      next();
    };
  }
}

module.exports = new AuthController();

import React, { createContext, useContext, useReducer, useEffect } from 'react';
import axios from 'axios';

// Auth Context
const AuthContext = createContext();

// Auth Reducer
const authReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN_START':
      return { ...state, loading: true, error: null };
    
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        user: action.payload.user,
        token: action.payload.token,
        isAuthenticated: true,
        loading: false,
        error: null
      };
    
    case 'LOGIN_FAILURE':
      return {
        ...state,
        user: null,
        token: null,
        isAuthenticated: false,
        loading: false,
        error: action.payload
      };
    
    case 'LOGOUT':
      return {
        ...state,
        user: null,
        token: null,
        isAuthenticated: false,
        loading: false,
        error: null
      };
    
    case 'CLEAR_ERROR':
      return { ...state, error: null };
    
    default:
      return state;
  }
};

// Auth Provider Component
export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, {
    user: null,
    token: null,
    isAuthenticated: false,
    loading: true,
    error: null
  });

  // Initialize auth state from localStorage
  useEffect(() => {
    const token = localStorage.getItem('authToken');
    const userData = localStorage.getItem('userData');

    if (token && userData) {
      try {
        const user = JSON.parse(userData);
        
        // Set axios default header
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
        
        dispatch({
          type: 'LOGIN_SUCCESS',
          payload: { user, token }
        });
      } catch (error) {
        console.error('Error parsing stored user data:', error);
        localStorage.removeItem('authToken');
        localStorage.removeItem('userData');
      }
    } else {
      dispatch({ type: 'LOGIN_FAILURE', payload: null });
    }
  }, []);

  // Login function
  const login = async (credentials) => {
    dispatch({ type: 'LOGIN_START' });

    try {
      const response = await axios.post('/api/auth/login', credentials);

      if (response.data.success) {
        const { user, token } = response.data.data;

        // Store in localStorage
        localStorage.setItem('authToken', token);
        localStorage.setItem('userData', JSON.stringify(user));

        // Set axios default header
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

        dispatch({
          type: 'LOGIN_SUCCESS',
          payload: { user, token }
        });

        return { success: true };
      }
    } catch (error) {
      const errorMessage = error.response?.data?.message || 'Login failed';
      dispatch({
        type: 'LOGIN_FAILURE',
        payload: errorMessage
      });
      return { success: false, error: errorMessage };
    }
  };

  // Register function
  const register = async (userData) => {
    dispatch({ type: 'LOGIN_START' });

    try {
      const response = await axios.post('/api/auth/register', userData);

      if (response.data.success) {
        const { user, token } = response.data.data;

        localStorage.setItem('authToken', token);
        localStorage.setItem('userData', JSON.stringify(user));
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

        dispatch({
          type: 'LOGIN_SUCCESS',
          payload: { user, token }
        });

        return { success: true };
      }
    } catch (error) {
      const errorMessage = error.response?.data?.message || 'Registration failed';
      dispatch({
        type: 'LOGIN_FAILURE',
        payload: errorMessage
      });
      return { success: false, error: errorMessage };
    }
  };

  // Logout function
  const logout = () => {
    localStorage.removeItem('authToken');
    localStorage.removeItem('userData');
    delete axios.defaults.headers.common['Authorization'];
    
    dispatch({ type: 'LOGOUT' });
  };

  // Clear error
  const clearError = () => {
    dispatch({ type: 'CLEAR_ERROR' });
  };

  const value = {
    ...state,
    login,
    register,
    logout,
    clearError
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
};

// Custom hook to use auth context
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

import React, { useState, useEffect } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { useNavigate, Link } from 'react-router-dom';

const LoginForm = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  const [formErrors, setFormErrors] = useState({});
  
  const { login, loading, error, isAuthenticated, clearError } = useAuth();
  const navigate = useNavigate();

  // Redirect if already authenticated
  useEffect(() => {
    if (isAuthenticated) {
      navigate('/dashboard');
    }
  }, [isAuthenticated, navigate]);

  // Clear error when component unmounts
  useEffect(() => {
    return () => clearError();
  }, [clearError]);

  const validateForm = () => {
    const errors = {};
    
    if (!formData.email) {
      errors.email = 'Email is required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      errors.email = 'Please enter a valid email address';
    }
    
    if (!formData.password) {
      errors.password = 'Password is required';
    } else if (formData.password.length < 6) {
      errors.password = 'Password must be at least 6 characters';
    }
    
    setFormErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    
    // Clear field error when user starts typing
    if (formErrors[name]) {
      setFormErrors(prev => ({
        ...prev,
        [name]: ''
      }));
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    clearError();

    if (!validateForm()) {
      return;
    }

    const result = await login(formData);
    
    if (result.success) {
      navigate('/dashboard');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full space-y-8">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Sign in to your account
          </h2>
        </div>
        
        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          {/* Global Error Message */}
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded">
              {error}
            </div>
          )}

          <div className="space-y-4">
            {/* Email Field */}
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                Email Address
              </label>
              <input
                id="email"
                name="email"
                type="email"
                value={formData.email}
                onChange={handleInputChange}
                className={`mt-1 appearance-none relative block w-full px-3 py-2 border 
                  ${formErrors.email ? 'border-red-300' : 'border-gray-300'} 
                  placeholder-gray-500 text-gray-900 rounded-md focus:outline-none 
                  focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm`}
                placeholder="Enter your email"
              />
              {formErrors.email && (
                <p className="mt-1 text-sm text-red-600">{formErrors.email}</p>
              )}
            </div>

            {/* Password Field */}
            <div>
              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                Password
              </label>
              <input
                id="password"
                name="password"
                type="password"
                value={formData.password}
                onChange={handleInputChange}
                className={`mt-1 appearance-none relative block w-full px-3 py-2 border 
                  ${formErrors.password ? 'border-red-300' : 'border-gray-300'} 
                  placeholder-gray-500 text-gray-900 rounded-md focus:outline-none 
                  focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm`}
                placeholder="Enter your password"
              />
              {formErrors.password && (
                <p className="mt-1 text-sm text-red-600">{formErrors.password}</p>
              )}
            </div>
          </div>

          {/* Submit Button */}
          <div>
            <button
              type="submit"
              disabled={loading}
              className={`group relative w-full flex justify-center py-2 px-4 border border-transparent 
                text-sm font-medium rounded-md text-white 
                ${loading 
                  ? 'bg-indigo-400 cursor-not-allowed' 
                  : 'bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
                } transition duration-150 ease-in-out`}
            >
              {loading ? (
                <span className="flex items-center">
                  <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  Signing in...
                </span>
              ) : (
                'Sign in'
              )}
            </button>
          </div>

          {/* Additional Links */}
          <div className="text-center">
            <p className="text-sm text-gray-600">
              Don't have an account?{' '}
              <Link to="/register" className="font-medium text-indigo-600 hover:text-indigo-500">
                Sign up here
              </Link>
            </p>
          </div>
        </form>
      </div>
    </div>
  );
};

export default LoginForm;

#### Data Management Module

// services/apiService.js
import axios from 'axios';

class ApiService {
  constructor(baseURL = process.env.REACT_APP_API_URL || '/api') {
    this.baseURL = baseURL;
    this.setupInterceptors();
  }

  setupInterceptors() {
    // Request interceptor
    axios.interceptors.request.use(
      (config) => {
        // Add auth token to requests
        const token = localStorage.getItem('authToken');
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        
        // Add timestamp to prevent caching
        config.params = {
          ...config.params,
          _t: Date.now()
        };
        
        return config;
      },
      (error) => Promise.reject(error)
    );

    // Response interceptor
    axios.interceptors.response.use(
      (response) => response,
      (error) => {
        // Handle common error scenarios
        if (error.response?.status === 401) {
          // Unauthorized - redirect to login
          localStorage.removeItem('authToken');
          localStorage.removeItem('userData');
          window.location.href = '/login';
        }
        
        if (error.response?.status === 403) {
          // Forbidden - show permission error
          console.error('Insufficient permissions');
        }
        
        return Promise.reject(error);
      }
    );
  }

  // Generic CRUD operations
  async create(endpoint, data) {
    try {
      const response = await axios.post(`${this.baseURL}/${endpoint}`, data);
      return {
        success: true,
        data: response.data.data || response.data,
        message: response.data.message
      };
    } catch (error) {
      return this.handleError(error);
    }
  }

  async getAll(endpoint, params = {}) {
    try {
      const response = await axios.get(`${this.baseURL}/${endpoint}`, { params });
      return {
        success: true,
        data: response.data.data || response.data,
        pagination: response.data.pagination,
        message: response.data.message
      };
    } catch (error) {
      return this.handleError(error);
    }
  }

  async getById(endpoint, id) {
    try {
      const response = await axios.get(`${this.baseURL}/${endpoint}/${id}`);
      return {
        success: true,
        data: response.data.data || response.data,
        message: response.data.message
      };
    } catch (error) {
      return this.handleError(error);
    }
  }

  async update(endpoint, id, data) {
    try {
      const response = await axios.put(`${this.baseURL}/${endpoint}/${id}`, data);
      return {
        success: true,
        data: response.data.data || response.data,
        message: response.data.message
      };
    } catch (error) {
      return this.handleError(error);
    }
  }

  async delete(endpoint, id) {
    try {
      const response = await axios.delete(`${this.baseURL}/${endpoint}/${id}`);
      return {
        success: true,
        data: response.data.data,
        message: response.data.message || 'Record deleted successfully'
      };
    } catch (error) {
      return this.handleError(error);
    }
  }

  // Upload files
  async uploadFile(endpoint, formData, onProgress) {
    try {
      const response = await axios.post(`${this.baseURL}/${endpoint}`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          if (onProgress) {
            const percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            onProgress(percentCompleted);
          }
        }
      });
      
      return {
        success: true,
        data: response.data.data,
        message: response.data.message
      };
    } catch (error) {
      return this.handleError(error);
    }
  }

  // Search functionality
  async search(endpoint, query, filters = {}) {
    try {
      const params = {
        search: query,
        ...filters
      };
      
      const response = await axios.get(`${this.baseURL}/${endpoint}/search`, { params });
      return {
        success: true,
        data: response.data.data || response.data,
        pagination: response.data.pagination,
        message: response.data.message
      };
    } catch (error) {
      return this.handleError(error);
    }
  }

  // Error handling
  handleError(error) {
    let errorMessage = 'An unexpected error occurred';
    let errorDetails = [];

    if (error.response) {
      // Server responded with error
      errorMessage = error.response.data.message || errorMessage;
      errorDetails = error.response.data.errors || [];
      
      console.error('API Error:', {
        status: error.response.status,
        message: errorMessage,
        details: errorDetails
      });
    } else if (error.request) {
      // Network error
      errorMessage = 'Network error - please check your connection';
      console.error('Network Error:', error.request);
    } else {
      // Other error
      console.error('Error:', error.message);
    }

    return {
      success: false,
      error: errorMessage,
      details: errorDetails,
      status: error.response?.status
    };
  }
}

export default new ApiService();

// hooks/useApiData.js
import { useState, useEffect, useCallback } from 'react';
import apiService from '../services/apiService';

export const useApiData = (endpoint, options = {}) => {
  const {
    initialLoad = true,
    dependencies = [],
    params = {}
  } = options;

  const [state, setState] = useState({
    data: null,
    loading: initialLoad,
    error: null,
    pagination: null
  });

  // Fetch data function
  const fetchData = useCallback(async (additionalParams = {}) => {
    setState(prev => ({ ...prev, loading: true, error: null }));

    try {
      const result = await apiService.getAll(endpoint, {
        ...params,
        ...additionalParams
      });

      if (result.success) {
        setState(prev => ({
          ...prev,
          data: result.data,
          pagination: result.pagination,
          loading: false
        }));
      } else {
        setState(prev => ({
          ...prev,
          error: result.error,
          loading: false
        }));
      }
    } catch (error) {
      setState(prev => ({
        ...prev,
        error: 'Failed to fetch data',
        loading: false
      }));
    }
  }, [endpoint, params]);

  // Create new record
  const createRecord = useCallback(async (data) => {
    setState(prev => ({ ...prev, loading: true }));

    try {
      const result = await apiService.create(endpoint, data);

      if (result.success) {
        // Update local data
        setState(prev => ({
          ...prev,
          data: Array.isArray(prev.data) 
            ? [result.data, ...prev.data]
            : result.data,
          loading: false
        }));
        return { success: true, data: result.data };
      } else {
        setState(prev => ({ ...prev, loading: false }));
        return result;
      }
    } catch (error) {
      setState(prev => ({
        ...prev,
        error: 'Failed to create record',
        loading: false
      }));
      return { success: false, error: 'Failed to create record' };
    }
  }, [endpoint]);

  // Update existing record
  const updateRecord = useCallback(async (id, data) => {
    setState(prev => ({ ...prev, loading: true }));

    try {
      const result = await apiService.update(endpoint, id, data);

      if (result.success) {
        setState(prev => ({
          ...prev,
          data: Array.isArray(prev.data)
            ? prev.data.map(item => 
                item._id === id ? result.data : item
              )
            : result.data,
          loading: false
        }));
        return { success: true, data: result.data };
      } else {
        setState(prev => ({ ...prev, loading: false }));
        return result;
      }
    } catch (error) {
      setState(prev => ({
        ...prev,
        error: 'Failed to update record',
        loading: false
      }));
      return { success: false, error: 'Failed to update record' };
    }
  }, [endpoint]);

  // Delete record
  const deleteRecord = useCallback(async (id) => {
    setState(prev => ({ ...prev, loading: true }));

    try {
      const result = await apiService.delete(endpoint, id);

      if (result.success) {
        setState(prev => ({
          ...prev,
          data: Array.isArray(prev.data)
            ? prev.data.filter(item => item._id !== id)
            : null,
          loading: false
        }));
        return { success: true };
      } else {
        setState(prev => ({ ...prev, loading: false }));
        return result;
      }
    } catch (error) {
      setState(prev => ({
        ...prev,
        error: 'Failed to delete record',
        loading: false
      }));
      return { success: false, error: 'Failed to delete record' };
    }
  }, [endpoint]);

  // Initial load
  useEffect(() => {
    if (initialLoad) {
      fetchData();
    }
  }, [fetchData, initialLoad, ...dependencies]);

  return {
    ...state,
    refetch: fetchData,
    create: createRecord,
    update: updateRecord,
    delete: deleteRecord
  };
};

// Hook for single record
export const useApiRecord = (endpoint, id) => {
  const [state, setState] = useState({
    data: null,
    loading: true,
    error: null
  });

  const fetchRecord = useCallback(async () => {
    if (!id) return;

    setState(prev => ({ ...prev, loading: true, error: null }));

    try {
      const result = await apiService.getById(endpoint, id);

      if (result.success) {
        setState({
          data: result.data,
          loading: false,
          error: null
        });
      } else {
        setState({
          data: null,
          loading: false,
          error: result.error
        });
      }
    } catch (error) {
      setState({
        data: null,
        loading: false,
        error: 'Failed to fetch record'
      });
    }
  }, [endpoint, id]);

  useEffect(() => {
    fetchRecord();
  }, [fetchRecord]);

  return {
    ...state,
    refetch: fetchRecord
  };
};

// components/DataTable.jsx
import React, { useState, useMemo } from 'react';
import { useApiData } from '../hooks/useApiData';

const DataTable = ({
  endpoint,
  columns,
  title,
  searchPlaceholder = "Search records...",
  allowCreate = true,
  allowEdit = true,
  allowDelete = true,
  CreateModal,
  EditModal,
  customActions = [],
  filters = {}
}) => {
  // Local state
  const [searchTerm, setSearchTerm] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [sortBy, setSortBy] = useState('createdAt');
  const [sortOrder, setSortOrder] = useState('desc');
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);

  // API params
  const apiParams = useMemo(() => ({
    page: currentPage,
    limit: pageSize,
    search: searchTerm,
    sortBy,
    sortOrder,
    ...filters
  }), [currentPage, pageSize, searchTerm, sortBy, sortOrder, filters]);

  // Use API data hook
  const {
    data: records,
    loading,
    error,
    pagination,
    refetch,
    create,
    update,
    delete: deleteRecord
  } = useApiData(endpoint, {
    params: apiParams,
    dependencies: [apiParams]
  });

  // Event handlers
  const handleSearch = (e) => {
    setSearchTerm(e.target.value);
    setCurrentPage(1); // Reset to first page
  };

  const handleSort = (columnKey) => {
    if (sortBy === columnKey) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortBy(columnKey);
      setSortOrder('asc');
    }
  };

  const handlePageChange = (newPage) => {
    setCurrentPage(newPage);
  };

  const handleCreate = async (formData) => {
    const result = await create(formData);
    if (result.success) {
      setShowCreateModal(false);
      // Optionally show success message
    }
    return result;
  };

  const handleEdit = (record) => {
    setEditingRecord(record);
    setShowEditModal(true);
  };

  const handleUpdate = async (formData) => {
    if (!editingRecord) return;
    
    const result = await update(editingRecord._id, formData);
    if (result.success) {
      setShowEditModal(false);
      setEditingRecord(null);
    }
    return result;
  };

  const handleDelete = async (id, recordName = 'this record') => {
    const confirmed = window.confirm(
      `Are you sure you want to delete ${recordName}? This action cannot be undone.`
    );
    
    if (confirmed) {
      const result = await deleteRecord(id);
      if (!result.success) {
        alert('Failed to delete record: ' + result.error);
      }
    }
  };

  // Render loading state
  if (loading && !records) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-indigo-600"></div>
      </div>
    );
  }

  // Render error state
  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
        <h3 className="font-medium">Error Loading Data</h3>
        <p>{error}</p>
        <        button 
          onClick={() => refetch()}
          className="mt-2 bg-red-100 hover:bg-red-200 px-4 py-2 rounded text-sm"
        >
          Retry
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header Section */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
          {pagination && (
            <p className="text-sm text-gray-600">
              Showing {pagination.totalRecords} records
            </p>
          )}
        </div>
        
        <div className="mt-4 sm:mt-0 flex space-x-4">
          {/* Search Input */}
          <div className="relative">
            <input
              type="text"
              placeholder={searchPlaceholder}
              value={searchTerm}
              onChange={handleSearch}
              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
            />
            <svg
              className="absolute left-3 top-2.5 h-5 w-5 text-gray-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
          </div>

          {/* Create Button */}
          {allowCreate && (
            <button
              onClick={() => setShowCreateModal(true)}
              className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
            >
              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
              <span>Add New</span>
            </button>
          )}
        </div>
      </div>

      {/* Table Section */}
      <div className="bg-white shadow-sm border border-gray-200 rounded-lg overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                {columns.map((column) => (
                  <th
                    key={column.key}
                    className={`px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${
                      column.sortable ? 'cursor-pointer hover:bg-gray-100' : ''
                    }`}
                    onClick={() => column.sortable && handleSort(column.key)}
                  >
                    <div className="flex items-center space-x-1">
                      <span>{column.title}</span>
                      {column.sortable && (
                        <svg
                          className={`h-4 w-4 ${
                            sortBy === column.key
                              ? sortOrder === 'asc'
                                ? 'transform rotate-180 text-indigo-600'
                                : 'text-indigo-600'
                              : 'text-gray-400'
                          }`}
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                      )}
                    </div>
                  </th>
                ))}
                {(allowEdit || allowDelete || customActions.length > 0) && (
                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Actions
                  </th>
                )}
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {records && records.length > 0 ? (
                records.map((record, index) => (
                  <tr key={record._id || index} className="hover:bg-gray-50">
                    {columns.map((column) => (
                      <td key={column.key} className="px-6 py-4 whitespace-nowrap text-sm">
                        {column.render
                          ? column.render(record[column.key], record)
                          : record[column.key] || '-'
                        }
                      </td>
                    ))}
                    {(allowEdit || allowDelete || customActions.length > 0) && (
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div className="flex items-center justify-end space-x-2">
                          {/* Custom Actions */}
                          {customActions.map((action, actionIndex) => (
                            <button
                              key={actionIndex}
                              onClick={() => action.onClick(record)}
                              className={`${action.className || 'text-indigo-600 hover:text-indigo-900'}`}
                              title={action.title}
                            >
                              {action.icon || action.label}
                            </button>
                          ))}

                          {/* Edit Button */}
                          {allowEdit && (
                            <button
                              onClick={() => handleEdit(record)}
                              className="text-indigo-600 hover:text-indigo-900"
                              title="Edit"
                            >
                              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                              </svg>
                            </button>
                          )}

                          {/* Delete Button */}
                          {allowDelete && (
                            <button
                              onClick={() => handleDelete(record._id, record.name || record.title)}
                              className="text-red-600 hover:text-red-900"
                              title="Delete"
                            >
                              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                              </svg>
                            </button>
                          )}
                        </div>
                      </td>
                    )}
                  </tr>
                ))
              ) : (
                <tr>
                  <td
                    colSpan={columns.length + (allowEdit || allowDelete ? 1 : 0)}
                    className="px-6 py-12 text-center text-gray-500"
                  >
                    {searchTerm ? 'No records found matching your search.' : 'No records found.'}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        {pagination && pagination.totalPages > 1 && (
          <div className="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <p className="text-sm text-gray-700">
                  Showing <span className="font-medium">{((currentPage - 1) * pageSize) + 1}</span> to{' '}
                  <span className="font-medium">
                    {Math.min(currentPage * pageSize, pagination.totalRecords)}
                  </span>{' '}
                  of <span className="font-medium">{pagination.totalRecords}</span> results
                </p>
              </div>
              <div className="flex items-center space-x-2">
                <button
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={!pagination.hasPrev}
                  className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
                >
                  Previous
                </button>
                
                {/* Page Numbers */}
                {Array.from({ length: Math.min(5, pagination.totalPages) }, (_, i) => {
                  const pageNum = Math.max(1, currentPage - 2) + i;
                  if (pageNum <= pagination.totalPages) {
                    return (
                      <button
                        key={pageNum}
                        onClick={() => handlePageChange(pageNum)}
                        className={`px-3 py-1 text-sm border rounded ${
                          pageNum === currentPage
                            ? 'bg-indigo-600 text-white border-indigo-600'
                            : 'border-gray-300 hover:bg-gray-50'
                        }`}
                      >
                        {pageNum}
                      </button>
                    );
                  }
                  return null;
                })}

                <button
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={!pagination.hasNext}
                  className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
                >
                  Next
                </button>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Loading Overlay */}
      {loading && records && (
        <div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-50">
          <div className="bg-white p-4 rounded-lg shadow-lg">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
          </div>
        </div>
      )}

      {/* Create Modal */}
      {showCreateModal && CreateModal && (
        <CreateModal
          isOpen={showCreateModal}
          onClose={() => setShowCreateModal(false)}
          onSubmit={handleCreate}
        />
      )}

      {/* Edit Modal */}
      {showEditModal && EditModal && editingRecord && (
        <EditModal
          isOpen={showEditModal}
          onClose={() => {
            setShowEditModal(false);
            setEditingRecord(null);
          }}
          onSubmit={handleUpdate}
          initialData={editingRecord}
        />
      )}
    </div>
  );
};

export default DataTable;

---

## Chapter 8: Testing Strategy and Implementation

### 8.1 Comprehensive Testing Approach

### 8.2 Detailed Test Cases

### 8.3 Test Results and Analysis

---

## Chapter 9: Results and System Evaluation

### 9.1 System Features and Functionality

### 9.2 Performance Analysis

### 9.3 User Experience Evaluation

---

## Chapter 10: Conclusion and Future Work

### 10.1 Project Summary and Achievements

### 10.2 Project Limitations and Constraints

### 10.3 Future Enhancements and Roadmap

---

## Chapter 11: References and Appendices

### 11.1 References

### 11.2 Appendices

frontend/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src/
│   ├── components/
│   │   ├── common/
│   │   │   ├── Header.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   └── LoadingSpinner.jsx
│   │   ├── forms/
│   │   │   ├── LoginForm.jsx
│   │   │   ├── RegisterForm.jsx
│   │   │   └── ContactForm.jsx
│   │   └── charts/
│   │       ├── LineChart.jsx
│   │       ├── BarChart.jsx
│   │       └── PieChart.jsx
│   ├── pages/
│   │   ├── Dashboard.jsx
│   │   ├── Profile.jsx
│   │   ├── Settings.jsx
│   │   └── Reports.jsx
│   ├── hooks/
│   │   ├── useAuth.js
│   │   ├── useApi.js
│   │   └── useLocalStorage.js
│   ├── services/
│   │   ├── authService.js
│   │   ├── apiService.js
│   │   └── storageService.js
│   ├── utils/
│   │   ├── validation.js
│   │   ├── formatting.js
│   │   └── constants.js
│   ├── styles/
│   │   ├── global.css
│   │   ├── components.css
│   │   └── responsive.css
│   ├── context/
│   │   ├── AuthContext.js
│   │   └── ThemeContext.js
│   ├── App.jsx
│   ├── index.js
│   └── setupTests.js
├── package.json
├── package-lock.json
└── README.md

backend/
├── controllers/
│   ├── authController.js
│   ├── userController.js
│   ├── dataController.js
│   └── reportController.js
├── models/
│   ├── User.js
│   ├── Session.js
│   ├── AuditLog.js
│   └── index.js
├── routes/
│   ├── auth.js
│   ├── users.js
│   ├── data.js
│   └── reports.js
├── middleware/
│   ├── auth.js
│   ├── validation.js
│   ├── errorHandler.js
│   └── rateLimit.js
├── config/
│   ├── database.js
│   ├── jwt.js
│   └── app.js
├── utils/
│   ├── logger.js
│   ├── emailService.js
│   └── fileUpload.js
├── tests/
│   ├── auth.test.js
│   ├── users.test.js
│   └── integration.test.js
├── app.js
├── server.js
├── package.json
└── README.md

// Users Collection
{
  "_id": ObjectId,
  "username": String (unique, required, 3-30 chars),
  "email": String (unique, required, valid email),
  "password": String (hashed, required, min 6 chars),
  "role": String (enum: ['user', 'admin', 'moderator']),
  "profile": {
    "firstName": String,
    "lastName": String,
    "avatar": String (URL),
    "bio": String,
    "phone": String
  },
  "preferences": {
    "theme": String (enum: ['light', 'dark']),
    "language": String (default: 'en'),
    "notifications": {
      "email": Boolean (default: true),
      "push": Boolean (default: true)
    }
  },
  "isActive": Boolean (default: true),
  "emailVerified": Boolean (default: false),
  "lastLogin": Date,
  "createdAt": Date,
  "updatedAt": Date,
  "indexes": [
    { "email": 1 },
    { "username": 1 },
    { "role": 1 },
    { "isActive": 1 }
  ]
}

// Sessions Collection  
{
  "_id": ObjectId,
  "userId": ObjectId (ref: Users),
  "token": String (JWT token hash),
  "deviceInfo": {
    "userAgent": String,
    "ip": String,
    "device": String
  },
  "isActive": Boolean (default: true),
  "expiresAt": Date,
  "createdAt": Date
}

// Audit Logs Collection
{
  "_id": ObjectId,
  "userId": ObjectId (ref: Users),
  "action": String (enum: ['CREATE', 'READ', 'UPDATE', 'DELETE']),
  "resource": String,
  "resourceId": String,
  "oldValues": Object,
  "newValues": Object,
  "ip": String,
  "userAgent": String,
  "timestamp": Date (default: now)
}

POST /api/auth/register
Description: Register a new user account
Request Body:
{
  "username": "string (required, 3-30 chars)",
  "email": "string (required, valid email)",
  "password": "string (required, min 6 chars)",
  "firstName": "string (optional)",
  "lastName": "string (optional)"
}

Response (201 Created):
{
  "success": true,
  "message": "User registered successfully",
  "data": {
    "user": {
      "id": "string",
      "username": "string",
      "email": "string",
      "role": "string"
    },
    "token": "string (JWT)"
  }
}

Response (400 Bad Request):
{
  "success": false,
  "message": "Validation failed",
  "errors": ["array of error messages"]
}

POST /api/auth/login
Description: Authenticate user and return JWT token
Request Body:
{
  "email": "string (required)",
  "password": "string (required)"
}

Response (200 OK):
{
  "success": true,
  "message": "Login successful",
  "data": {
    "user": {
      "id": "string",
      "username": "string",
      "email": "string",
      "role": "string",
      "lastLogin": "datetime"
    },
    "token": "string (JWT)"
  }
}

GET /api/auth/profile
Description: Get current user profile (requires authentication)
Headers: Authorization: Bearer <token>

Response (200 OK):
{
  "success": true,
  "data": {
    "user": {
      "id": "string",
      "username": "string",
      "email": "string",
      "role": "string",
      "profile": {
        "firstName": "string",
        "lastName": "string",
        "avatar": "string"
      },
      "preferences": {
        "theme": "string",
        "language": "string"
      }
    }
  }
}

File                    | % Stmts | % Branch | % Funcs | % Lines |
------------------------|---------|----------|---------|---------|
All files              |   87.23 |    82.14 |   89.47 |   86.92 |
 controllers/          |   91.34 |    88.23 |   94.12 |   90.87 |
  authController.js     |   95.45 |    92.31 |   100.00|   94.74 |
  userController.js     |   88.89 |    85.71 |   90.00 |   87.50 |
  dataController.js     |   89.47 |    86.96 |   92.31 |   88.89 |
 models/               |   82.35 |    76.47 |   83.33 |   81.82 |
  User.js              |   85.71 |    80.00 |   87.50 |   84.21 |
  Session.js           |   78.26 |    71.43 |   77.78 |   77.78 |
 utils/                |   79.31 |    72.22 |   81.82 |   78.57 |
  validation.js        |   83.33 |    75.00 |   85.71 |   82.35 |
  emailService.js      |   75.00 |    69.23 |   77.78 |   74.07 |

Load Test Summary:
==================
Test Duration: 30 minutes
Concurrent Users: 50, 75, 100, 125, 150
Total Requests: 45,678
Successful Requests: 45,234 (99.03%)
Failed Requests: 444 (0.97%)

Response Time Percentiles:
- 50th percentile: 1,234 ms
- 75th percentile: 2,145 ms  
- 90th percentile: 3,567 ms
- 95th percentile: 4,123 ms
- 99th percentile: 6,789 ms

Error Distribution:
- Timeout errors: 312 (70.3%)
- Connection errors: 89 (20.0%)
- HTTP 5xx errors: 43 (9.7%)

Resource Utilization:
- Average CPU: 68.5%
- Peak CPU: 89.2%
- Average Memory: 3.2 GB
- Peak Memory: 4.1 GB
- Average Disk I/O: 45 IOPS
- Peak Disk I/O: 127 IOPS

Pre-deployment Checklist:
□ Environment variables configured
□ Database migrations completed
□ SSL certificates installed
□ Backup procedures tested
□ Monitoring systems configured
□ Error logging enabled
□ Performance monitoring setup
□ Security scanning completed
□ Load balancer configured (if applicable)
□ CDN setup for static assets
□ DNS records updated
□ Rollback plan documented

Environment Variables:
NODE_ENV=production
DATABASE_URL=mongodb://username:password@host:port/database
JWT_SECRET=your-super-secret-jwt-key
JWT_EXPIRES_IN=7d
REDIS_URL=redis://host:port
EMAIL_SERVICE_API_KEY=your-email-service-key
UPLOAD_MAX_SIZE=10485760
CORS_ORIGIN=https://yourdomain.com
LOG_LEVEL=info

You are a technical documentation expert helping an engineering student create a professional project report. Based on the following project details, generate a comprehensive project documentation following the structure provided.

PROJECT DETAILS:
- Project Title: [Your Project Title]
- Project Type: [Web App/Mobile App/ML Project/IoT System/Database/Other]
- Technologies Used: [List your tech stack]
- Duration: [Project duration]
- Team Size: [Number of team members]
- University: [Your University Name]
- Department: [Your Department]
- Supervisor: [Supervisor Name]
- Company (if internship): [Company Name and details]

SPECIFIC REQUIREMENTS:
- Target report length: [25-80 pages]
- Focus areas: [What aspects to emphasize]
- Unique features: [What makes your project special]
- Challenges faced: [Major problems you solved]
- Target audience: [Professors/Industry professionals/Peers]

Please generate:
1. A compelling abstract (250 words)
2. Detailed problem statement with background
3. Technical architecture description
4. Implementation details for 3 key modules
5. Testing strategy specific to my project type
6. Results and performance metrics
7. Professional conclusion with future work

Make it sound professional but not overly complex. Include specific technical details relevant to my technology stack. Ensure the content demonstrates deep understanding and practical implementation skills.

Style Guidelines:
- Use active voice where possible
- Include quantifiable metrics and results
- Balance technical depth with clarity
- Show problem-solving approach
- Demonstrate learning outcomes
- Include industry-relevant best practices

Generate approximately [X] pages of content following the structure from the documentation guide provided.