Skip to content

ahmadalsadder/gurdian-gate

Repository files navigation

Guardian Gate v3.0.0

A modern border control and passenger management system built with React, featuring comprehensive passenger and gate management capabilities with advanced UI/UX components.

🚀 Version 3.0.0 - Major Release

🚪 NEW: Complete Gates Module

  • Gate Management System: Full CRUD operations for border gates
  • 6-Tab Gate Forms: Add and edit gates with comprehensive configuration
  • Advanced Gate View: Modern UI with timelines, progress bars, and document galleries
  • Gate Statistics: Real-time performance metrics and monitoring

🎨 Enhanced UI/UX Throughout

  • Modern Card-Based Layouts: Professional information display
  • Interactive Timelines: Activity tracking for passengers and gates
  • Progress Bars: Visual assessment scores and performance metrics
  • Document Galleries: Image previews with modal viewers
  • Mobile-Responsive Design: Optimized for all screen sizes

🎯 Core Features

👥 Passenger Management

  • Enhanced List View: Advanced search, filtering, and sorting
  • 6-Tab Add/Edit Forms: Comprehensive passenger data entry
  • Modern View Page: Card-based layout with timelines and progress bars
  • Document Management: Upload and preview passenger documents
  • Biometric Integration: IRIS, fingerprint, and face recognition support

🚪 Gate Management

  • Gate Configuration: Entry/Exit gates with IRIS biometric priority
  • Hardware Specifications: Model, manufacturer, dimensions, config files
  • Security Settings: Risk thresholds, watchlist integration
  • Performance Monitoring: Real-time statistics and activity tracking
  • Fully Automated: Complete automation level configuration

🎨 UI/UX Components

  • 50+ Radix UI Components: Professional component library
  • Enhanced Badge Colors: Vibrant, high-contrast status indicators
  • Full-Width Controls: Consistent dropdown and calendar styling
  • Tab Completion Icons: Visual progress indicators
  • Responsive Design: Mobile and desktop compatibility

🔐 Security & Authentication

  • Secure Login System: Persistent authentication state
  • Protected Routes: Role-based access control
  • Data Validation: Real-time form validation and error handling
  • Audit Trails: Change tracking and history logging

📊 Technical Stack

  • Frontend: React 18+ with Vite
  • UI Library: Radix UI components
  • Styling: Tailwind CSS
  • Routing: React Router v7
  • Icons: Lucide React
  • State Management: React hooks and context

🛠️ Installation & Setup

Prerequisites

  • Node.js 18 or higher
  • npm or pnpm package manager

Quick Start

# Extract the application archive
tar -xzf guardian-gate-v3.0.0.tar.gz
cd guardian-gate

# Install dependencies
npm install

# Start development server
npm run dev

# Open browser to http://localhost:5173

Production Build

# Build for production
npm run build

# Preview production build
npm run preview

🎮 Usage

Login

  • Use any credentials to access the system
  • Authentication state persists across sessions

Navigation

  • Dashboard: Overview and statistics
  • Passenger Management: Complete passenger lifecycle
  • Gate Management: Border gate configuration and monitoring
  • Reporting: Analytics and reports (coming soon)
  • Settings: System configuration (coming soon)

Key Workflows

Passenger Management:

  1. Navigate to Passenger Management
  2. Use search and filters to find passengers
  3. Add new passengers with 6-tab form
  4. Edit existing passenger data
  5. View detailed passenger profiles

Gate Management:

  1. Navigate to Gate Management
  2. Configure new gates with hardware specs
  3. Set security and biometric settings
  4. Monitor gate performance and activity
  5. Edit gate configurations as needed

📁 Project Structure

guardian-gate/
├── src/
│   ├── components/
│   │   ├── ui/                    # Reusable UI components
│   │   ├── Enhanced*Passenger*    # Passenger management components
│   │   ├── Enhanced*Gate*         # Gate management components
│   │   └── ComprehensiveDashboard.jsx
│   ├── services/
│   │   ├── mockPassengerService.js
│   │   └── mockGateService.js
│   └── App.jsx                    # Main application with routing
├── public/
│   └── images/                    # Sample images and documents
├── package.json
├── README.md
├── VERSION.md
└── INSTALLATION.md

🌟 Key Features Highlights

Enhanced Passenger Management

  • Modern UI: Card-based layouts with hover effects
  • Interactive Timeline: Travel history with status indicators
  • Progress Bars: Assessment scores with visual feedback
  • Document Gallery: Image previews with zoom functionality
  • Mobile Responsive: Optimized for all devices

Complete Gate Management

  • Hardware Configuration: Model, manufacturer, dimensions
  • Biometric Setup: IRIS primary, secondary options
  • Security Configuration: Risk thresholds, watchlist integration
  • Performance Monitoring: Real-time statistics and alerts
  • Activity Timeline: Gate usage and maintenance history

Professional UI/UX

  • Vibrant Badge Colors: High-contrast status indicators
  • Consistent Design: Unified color scheme and typography
  • Enhanced Forms: Full-width controls and validation
  • Tab Completion: Visual progress indicators
  • Responsive Layout: Works on all screen sizes

🔄 Version History

  • v3.0.0: Complete Gates Module + Enhanced UI/UX
  • v2.0.0: Enhanced Passenger Management + Badge Colors
  • v1.0.0: Initial Release with Core Features

📞 Support

For questions, issues, or feature requests, please refer to the documentation or contact the development team.

📄 License

This project is proprietary software. All rights reserved.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages