Employee Management & Excel Export System

A comprehensive Django-based web application for managing employee data with advanced filtering capabilities and Excel export functionality. Built specifically for organizations that need efficient employee data management with geographic-aware filtering for Nepal.

🚀 Features

Core Functionality

• Employee Management: Complete CRUD operations for employee records with clickable navigation
• Department Management: Add, view, update, and delete departments
• Advanced Filtering: Multi-criteria filtering with real-time results
• Excel Export: Export filtered data to Excel (.xlsx) format with integrated table header controls
• Geographic Intelligence: Nepal province-district mapping with smart filtering
• Real-time Search: Live search by employee name and address
• Responsive Design: Mobile-first approach with adaptive layouts

Advanced Filtering Options

• Department Filtering: Filter employees by their departments
• Geographic Filtering:
  • Province-based filtering (7 provinces of Nepal)
  • District-based filtering with province auto-selection
  • Smart province-district relationship mapping
• Salary Filtering:
  • Exact amount matching
  • Greater than / Less than comparisons
  • Range-based filtering (between two amounts)
• Date Filtering:
  • Creation date filtering (exact, before, after, between)
  • Last updated date filtering (exact, before, after, between)
• Dual Filter Modes: Simple search and Advanced multi-criteria filtering with collapsible options

Technical Features

• AJAX-powered Interface: No page refresh required for filtering
• Modular Architecture: Clean separation of HTML, CSS, and JavaScript
• Responsive Design: Mobile-friendly interface with CSS Grid and Flexbox
• Real-time Updates: Dynamic table updates without reload
• Form Validation: Client and server-side validation
• Message System: Success/error notifications
• Humanized Dates: User-friendly date formatting
• Class-based JavaScript: Object-oriented code organization
• Interactive Navigation: Clickable employee IDs and names for direct access to detail pages

🛠️ Technology Stack

• Backend: Django 3.2.5
• Database: SQLite (development)
• Frontend: HTML5, CSS3 (modular architecture), JavaScript ES6+ Classes
• JavaScript Libraries: jQuery, XLSX.js for Excel export
• Styling: Modular CSS with component-based architecture
• Date Handling: Django Humanize for natural time formatting
• Responsive Framework: Custom CSS Grid and Flexbox implementation

📋 Prerequisites

• Python 3.8 or higher
• pip (Python package manager)
• Virtual environment (recommended)
• Modern web browser with ES6+ support

🚀 Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd EmployeeExcelManager

2. Create Virtual Environment

python -m venv env

3. Activate Virtual Environment

# Windows
env\Scripts\activate

# macOS/Linux
source env/bin/activate

4. Install Dependencies

pip install -r requirements.txt

5. Database Setup

python manage.py makemigrations
python manage.py migrate

6. Create Superuser (Optional)

python manage.py createsuperuser

7. Run Development Server

python manage.py runserver

Visit http://127.0.0.1:8000/ to access the application.

📁 Project Structure

tabletoexcel/
├── tabletoexcel/              # Main project directory
│   ├── settings.py            # Django settings
│   ├── urls.py                # Main URL configuration
│   └── wsgi.py                # WSGI configuration
├── home/                      # Main application
│   ├── models.py              # Database models (Employee, Department)
│   ├── views.py               # View functions and classes
│   ├── forms.py               # Django forms
│   ├── urls.py                # App URL patterns
│   └── admin.py               # Admin configuration
├── templates/                 # HTML templates
│   ├── base.html              # Base template with modular CSS/JS loading
│   └── home/                  # App-specific templates
│       ├── index.html         # Homepage
│       ├── employeetable.html # Advanced employee table
│       ├── addemployee.html   # Employee creation form
│       ├── updateemployee.html# Employee update form
│       ├── employeedetail.html# Employee detail view
│       ├── adddepartment.html # Department creation
│       ├── updatedepartment.html# Department update
│       └── departmentdetail.html# Department detail view
├── static/                    # Static files (modular architecture)
│   ├── css/                   # Modular CSS files
│   │   ├── base.css           # Foundation styles and typography
│   │   ├── styles.css         # Shared component library
│   │   ├── index.css          # Homepage specific styles
│   │   ├── employeetable.css  # Table and filtering styles
│   │   ├── addemployee.css    # Employee form styles
│   │   ├── updateemployee.css # Employee update styles
│   │   ├── employeedetail.css # Detail page styles
│   │   ├── adddepartment.css  # Department form styles
│   │   ├── updatedepartment.css# Department update styles
│   │   └── departmentdetail.css# Department detail styles
│   ├── js/                    # Modular JavaScript files
│   │   ├── employee-table.js  # Table management and filtering
│   │   ├── province-district.js# Geographic relationship handler
│   │   ├── employee-search.js # Search functionality
│   │   └── xlsxfile.js        # Excel export library
│   └── img/                   # Images and assets
│       └── logo.png           # Application logo
├── requirements.txt           # Python dependencies
└── manage.py                  # Django management script

🎯 Key Models

Employee (ExcelForm)

- name: CharField (Employee full name)
- department: ForeignKey (Link to Department)
- salary: IntegerField (Employee salary)
- province: CharField (Nepal province selection)
- district: CharField (Nepal district selection)
- address: TextField (Detailed address)
- zip_code: IntegerField (Postal code)
- date_created: DateTimeField (Auto-generated)
- date_updated: DateTimeField (Auto-updated)

Department

- title: CharField (Department name)
- date_created: DateTimeField (Auto-generated)
- date_updated: DateTimeField (Auto-updated)

🏗️ Architecture Highlights

Modular CSS Architecture

• base.css: Foundation styles, typography, global elements
• styles.css: Shared component library (buttons, forms, cards, navigation)
• Page-specific CSS: Individual files for each template's unique styling
• Responsive Design: Mobile-first approach with breakpoints at 480px, 768px, 992px
• Theme Consistency: Each page has its own color theme while maintaining cohesive design

Class-based JavaScript Modules

• EmployeeTableManager: Comprehensive table operations, filtering, and Excel export
• ProvinceDistrictHandler: Geographic relationship management with backward compatibility
• EmployeeSearchHandler: Live search functionality for employee lists
• Modular Loading: Each template loads only required JavaScript modules

Responsive Features

• CSS Grid Layouts: Advanced responsive grids that adapt to screen size
• Flexible Components: Cards, forms, and tables that scale appropriately
• Touch-friendly: Enhanced button sizes and interaction areas for mobile
• Progressive Enhancement: Works without JavaScript, enhanced with it

🔧 Usage Guide

Adding Employees

1. Navigate to "Add Employee" page
2. Fill in employee details including department, salary, and location
3. Province-district selection is geographically aware with dynamic population
4. Submit to save the employee record

Managing Departments

1. Go to "Add Department" to create new departments
2. View all departments in the department list
3. Edit or delete departments as needed
4. Department deletion checks for associated employees

Filtering & Search

1. Simple Filter: Use the search box to find employees by name or address
2. Advanced Filter:
   • Toggle between Simple and Advanced modes
   • Select multiple criteria (department, location, salary, dates)
   • Multiple criteria work with AND logic - results must match ALL selected filters
   • Use "More Filters" to access collapsible date and salary range options
   • Click "Filter" to apply criteria
   • Use "Get Initial Data" to reset filters
3. Combined Filtering Examples:
   • Department: "IT" + Province: "Province No.1" = Shows only IT employees in Province No.1
   • Salary: "> 50,000" + Department: "HR" = Shows only HR employees earning more than 50,000
   • Multiple filters narrow down results progressively

Excel Export

1. Apply desired filters to narrow down data
2. Click "Export to Excel" button in the table header
3. Confirm export in the popup dialog
4. Excel file (.xlsx) will be downloaded automatically with filtered data

Navigation Features

• Clickable Employee Data: Click on employee ID or name to view detailed information
• Breadcrumb Navigation: Clear page hierarchy with clickable breadcrumbs
• Quick Actions: Integrated table header with Add Employee, Manage Departments buttons
• Responsive Menus: Mobile-friendly navigation that adapts to screen size

🌍 Nepal Geographic Data

The system includes comprehensive Nepal geographic data:

• 7 Provinces: Province No.1 through Province No.7
• 77 Districts: Complete district mapping for all provinces
• Smart Filtering: Selecting a district automatically filters relevant provinces
• Geographic Validation: Province-district relationships are maintained
• Dynamic Dropdowns: Real-time population of district options based on province selection

Province-District Mapping

• Province No.1: 14 districts (Bhojpur, Dhankuta, Ilam, Jhapa, Khotang, Morang, Okhaldhunga, Panchthar, Sankhuwasabha, Solukhumbu, Sunsari, Taplejung, Terhathum, Udayapur)
• Province No.2: 8 districts (Bara, Dhanusha, Mathottari, Parsa, Rautahat, Saptari, Sarlahi, Siraha)
• Province No.3: 13 districts (Bhaktapur, Chitwan, Dhading, Dolakha, Kathmandu, Kavrepalanchok, Lalitpur, Makwanpur, Nuwakot, Rasuwa, Ramechhap, Sindhupalchok, Sindhuli)
• Province No.4: 11 districts (Baglung, Gorkha, Kaski, Lamjung, Manang, Mustang, Myagdi, Nawalpur, Parbat, Syangia, Tanahun)
• Province No.5: 12 districts (Arghakhanchi, Banke, Bardiya, Dang, Eastern Rukum, Gulmi, Kapilvastu, Palpa, Parasi, Pyuthan, Rolpa, Rupandehi)
• Province No.6: 10 districts (Dailekh, Dolpa, Humla, Jajarkot, Jumla, Kalikot, Mugu, Salyan, Surkhet, Western Rukum)
• Province No.7: 9 districts (Achham, Baitadi, Bajhang, Bajura, Dadeldhura, Darchula, Doti, Kailali, Kanchanpur)

📊 Filtering Examples

Multi-Criteria Filtering (AND Logic)

• Department + Province: IT Department AND Province No.1 = Only IT employees in Province No.1
• Salary + Location: Salary > 50,000 AND Kathmandu District = High earners in Kathmandu only
• Date + Department + Salary: Created after 2023-01-01 AND HR Department AND Salary between 30,000-60,000
• All filters work together to progressively narrow down results

Salary Filtering

• Exact: Find employees with exactly Rs. 50,000 salary
• More Than: Find employees earning more than Rs. 40,000
• Less Than: Find employees earning less than Rs. 60,000
• Between: Find employees earning between Rs. 30,000 and Rs. 70,000

Date Filtering

• Exact: Employees added on a specific date
• Before: Employees added before a certain date
• After: Employees added after a certain date
• Between: Employees added within a date range

🎨 User Interface Features

Interactive Elements

• Toggle Filters: Switch between Simple and Advanced filtering modes with smooth animations
• Expandable Options: "More Filters" button reveals additional criteria with slide transitions
• Real-time Updates: Table updates instantly without page refresh
• Responsive Table: Hover effects, clickable elements, and mobile-friendly design
• Loading Animations: Smooth transitions and user feedback
• Message Notifications: Success/error messages with auto-hide functionality

Design System

• Color Themes: Each page has distinct color themes (green for tables, blue for details, orange for updates)
• Typography: Dosis font family with optimized loading and fallbacks
• Spacing System: Consistent padding, margins, and gap values throughout
• Component Library: Reusable buttons, cards, forms, and navigation elements
• Accessibility: Focus states, keyboard navigation, and screen reader support

Responsive Breakpoints

• Mobile: < 480px (single column layouts, stacked elements)
• Tablet: 481px - 768px (two-column grids, adapted navigation)
• Desktop: 769px - 992px (three-column grids, full feature set)
• Large: > 992px (optimal spacing, maximum feature density)

🔒 Security Features

• CSRF protection for all forms
• Input validation and sanitization
• Secure database queries with Django ORM
• Error handling for edge cases
• XSS prevention with proper template escaping

🚀 Deployment

Production Setup

1. Environment Variables: Set production environment variables
2. Database: Configure PostgreSQL or MySQL for production
3. Static Files: Set up static file serving (nginx/Apache) with proper caching headers
4. Security: Update ALLOWED_HOSTS, disable DEBUG
5. HTTPS: Configure SSL certificate
6. CSS/JS Minification: Implement asset compression for production

Environment Configuration

# settings.py updates for production
DEBUG = False
ALLOWED_HOSTS = ['your-domain.com']
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        # ... other database settings
    }
}

# Static files configuration
STATIC_ROOT = '/path/to/static/files/'
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/new-feature)
3. Follow the modular CSS/JS architecture patterns
4. Ensure responsive design compatibility
5. Test across multiple browsers and devices
6. Commit your changes (git commit -am 'Add new feature')
7. Push to the branch (git push origin feature/new-feature)
8. Create a Pull Request

📝 API Endpoints

• GET / - Home page with feature overview
• GET /employee-table/ - Main employee table with advanced filtering
• POST /post-filter/ - AJAX endpoint for advanced filtering
• POST /get-initial-data/ - AJAX endpoint to reset filters
• GET /add-employee/ - Add new employee form
• GET /add-department/ - Add new department form
• GET /employee/<int:pk>/ - Employee detail view with navigation
• POST /delete-employee/<int:pk>/ - Delete employee
• GET /update-employee/<int:pk>/ - Update employee form with province-district handling
• GET /department/<int:pk>/ - Department detail view
• GET /update-department/<int:pk>/ - Update department form
• POST /delete-department/<int:pk>/ - Delete department

📄 License

This project is open source. Feel free to use and modify according to your needs.

🔄 Version History

• v2.0: Major refactoring with modular architecture

  • Extracted all inline CSS to modular external files
  • Implemented class-based JavaScript modules
  • Added responsive design system with CSS Grid/Flexbox
  • Enhanced user experience with clickable navigation
  • Improved performance with caching-friendly static files
  • Better maintainability and code organization

• v1.0: Initial release with complete employee management system

  • Employee and department CRUD operations
  • Advanced filtering with geographic data
  • Excel export functionality
  • Real-time AJAX updates
  • Nepal-specific province-district mapping

---

Built with ❤️ for efficient employee data management

Streamline your HR processes with powerful filtering, modern responsive design, and comprehensive export capabilities