IT Support Dashboard 🛠️

A professional-grade, web-based dashboard designed to streamline IT support tasks. This application provides a modern React UI to trigger powerful PowerShell scripts on a host machine, making system diagnostics, network troubleshooting, and maintenance tasks accessible via a one-click interface.

IT.Support.Dashboard.mp4

✨ Features

• Modern UI: Built with React 19 and Tailwind CSS for a clean, dark-mode aesthetic.
• One-Click Execution: Instantly run complex PowerShell scripts (Flush DNS, Restart Spooler, Check Firewall, etc.).
• Categorized Tools: Organized into System, Network, Maintenance, and User management.
• Python Backend: Powered by Flask to securely handle script execution on the host OS.
• Production Ready: Error handling and status management built-in.

🚀 Tech Stack

• Frontend: React (TypeScript), Tailwind CSS, Lucide React (Icons)
• Backend: Python (Flask)
• Scripting: PowerShell (.ps1)

🛠️ Installation & Setup

Prerequisites

• Node.js & npm
• Python 3.x
• Windows OS (for PowerShell script execution)

1. Frontend Setup

# Clone the repository
git clone https://github.com/BugHnter403/IT-Support-Dashboard
cd IT-Support-Dashboard

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

2. Backend Setup

# Run the server
python app.py

📂 Project Structure

IT-Support-Dashboard/
├── App.tsx                  # Main React component
├── README.md                # Project documentation
├── app.py                   # Python backend API server
├── components/              # Reusable UI components
│   ├── ResourceChart.tsx
│   ├── TerminalWindow.tsx
│   └── ToolOutput.tsx
├── constants.tsx            # Constants used in the frontend
├── index.html               # HTML entry point
├── index.tsx                # React app entry
├── metadata.json            # Project metadata
├── package.json             # Frontend dependencies
├── scripts/                 # PowerShell scripts for IT fixes
│   ├── Advanced_System_Info.ps1
│   ├── Check_Internet_Connection.ps1
│   ├── Clear_Temp_Files.ps1
│   ├── Find_Large_Files.ps1
│   ├── Firewall_Quick_Toggle.ps1
│   ├── Flush_DNS.ps1
│   ├── List_Local_Admins.ps1
│   ├── List_Local_Users.ps1
│   ├── Recently_Modified_Files.ps1
│   ├── Restart_Network_Adapter.ps1
│   ├── Restart_Print_Spooler.ps1
│   ├── Show_Disk_Space.ps1
│   ├── Show_Event_Log_Errors.ps1
│   ├── Show_My_IP_Address.ps1
│   ├── Show_Printer_Status.ps1
│   ├── Show_System_Uptime.ps1
│   └── System_Resource_Monitor.ps1
├── services/               # API service for frontend-backend communication
│   └── api.ts
├── tsconfig.json            # TypeScript configuration
├── types.ts                 # Type definitions
└── vite.config.ts           # Vite configuration

👨‍💻 Author

Firdaus Shaari

Linkedin

Github