Advanced Task Management System for Volunteer Teams at Ghras Al-Ilm Academy
Ghras Task Manager is a professional SaaS platform built with modern technologies to manage volunteer team tasks at Ghras Al-Ilm Academy. The system provides an interactive Kanban board, comprehensive user management, and advanced analytics - all in Arabic with first-class RTL support.
Replaces manual processes (such as Google Sheets and WhatsApp groups) with a centralized system that provides:
- ✅ Accurate tracking of tasks and accomplishments
- ✅ Fair distribution of work among teams
- ✅ Real-time reports and analytics
- ✅ Complete transparency in performance
- ✅ Visual achievements to motivate volunteers
New → Scheduled → In Progress → Issue → Completed → Documentation
- Drag & Drop with full RTL support
- Automatic logging of start and completion dates
- Interactive cards with priorities and deadlines
- Real-time updates with Optimistic UI
- Interactive table with search and filtering
- Add and edit users
- Multiple roles (Admin, Supervisor, Volunteer)
- Team assignment and volunteer hours tracking
- Pie and bar charts
- Volunteer ranking by achievement
- Quick summaries of key metrics
- Export-ready reports
- Dark/Light mode automatic switching
- Responsive design (Mobile-First)
- Full RTL in every detail
- Instant notifications for every action
- Smooth animations
- Node.js 18+ and pnpm
# 1. Clone the project
git clone https://github.com/your-repo/ghras-admin.git
cd ghras-admin
# 2. Install packages
pnpm install
# 3. Setup environment
Copy-Item .env.example .env
# 4. Run the application
pnpm run devThe application will run on http://localhost:3000 🎉
pnpm run build # Build production version
pnpm run preview # Preview production build
pnpm run test # Run tests
pnpm run lint # Code quality check📘 For more details: Read the Quick Start Guide
| Category | Technology | Version |
|---|---|---|
| Frontend | React + TypeScript | 18.2 / 5.3 |
| Build Tool | Vite | 5.0 |
| Styling | Tailwind CSS | 3.4 |
| State | TanStack Query | 5.0 |
| Routing | React Router | 6.21 |
| DnD | @hello-pangea/dnd | 16.5 |
| Charts | Recharts | 2.10 |
| Validation | Zod | 3.22 |
| Notifications | React Hot Toast | 2.4 |
| Testing | Vitest + Testing Library | Latest |
ghras-admin/
├── 📄 index.html # RTL entry point
├── 📦 package.json # Dependencies
├── ⚙️ vite.config.ts # Vite configuration
├── 🎨 tailwind.config.js # Design system
├── 📝 tsconfig.json # TypeScript strict mode
├── 📚 src/
│ ├── 🚀 main.tsx # Entry point + React Query
│ ├── 🎨 index.css # Complete design system
│ ├── 📋 types.ts # Zod Schemas + Types
│ │
│ ├── 📡 api/
│ │ └── mockApi.ts # Mock API (ready for replacement)
│ │
│ ├── 🎣 hooks/
│ │ ├── useRole.ts # Role management
│ │ └── useDarkMode.ts # Dark mode
│ │
│ ├── 🧩 components/
│ │ ├── ErrorBoundary.tsx # Error handling
│ │ ├── ToastProvider.tsx # Notifications
│ │ ├── Modal.tsx # Modal dialogs
│ │ ├── LoadingSpinner.tsx
│ │ └── EmptyState.tsx
│ │
│ ├── 🏗️ layouts/
│ │ └── AppLayout.tsx # Main layout
│ │
│ └── 📄 pages/
│ ├── Home.tsx # Role selection
│ ├── TeamDashboard.tsx # Kanban Board
│ ├── UsersManagement.tsx
│ └── Statistics.tsx
│
├── 📖 README.md # This file
├── 📘 docs/SETUP.md # Setup guide
└── 📊 docs/PROJECT_SUMMARY.md # Comprehensive summary
- Admin → Full permissions
- Supervisor → Task and user management
- Volunteer → Personal task management
- Select your team from the sidebar
- Drag tasks between columns
- Click ➕ to add a task (Admin/Supervisor)
- Click ✏️ to edit or 🗑️ to delete
- Use search to find users
- Add new accounts with specific roles
- Enable or disable accounts with one click
- Task distribution by status
- Team and volunteer performance
- Key metrics summaries
- Primary:
#059669(Emerald green) - Background:
#f8fafc/#1e293b(Light/Dark) - Task States: 6 distinct colors
- Priorities: 4 color-coded levels
- Cairo - Professional Arabic font from Google Fonts
- Scales from xs to 6xl
- Buttons (btn, btn-primary, btn-secondary, btn-danger)
- Cards (card, card-hover)
- Badges (badge with state variants)
- RTL-formatted tables
- Modal dialogs (Modal with Portal)
📘 For full details: Read the Project Summary
✅ All permissions
✅ User management
✅ Task management
✅ View analytics
✅ All teams
✅ User management
✅ Task management
✅ View analytics
✅ All teams
✅ View team tasks
✅ Move tasks
✅ Log work hours
❌ Cannot create/delete tasks
❌ No management access
| Device | Size | Features |
|---|---|---|
| 📱 Mobile | < 768px | Dropdown menu, vertical columns |
| 📲 Tablet | 768-1024px | Fixed sidebar, medium grid |
| 💻 Desktop | > 1024px | Full layout, 6 columns |
The application is ready for integration with a Laravel backend:
- Update environment variables
# In .env
VITE_API_URL=http://localhost:8000/api- Replace Mock API
// Before (Mock)
export const fetchTasks = async () => {
await delay();
return MOCK_TASKS;
};
// After (Real API)
export const fetchTasks = async () => {
const response = await fetch(`${API_URL}/tasks`);
const data = await response.json();
return data.map(task => TaskSchema.parse(task));
};- Add Authentication
// Add JWT tokens
const token = localStorage.getItem('token');
headers: { 'Authorization': `Bearer ${token}` }- Laravel 11+ with Sanctum
- MySQL database
- RESTful API endpoints
- Zod schema validation
📘 For more details: See Project Documentation
# Run all tests
pnpm run test
# With coverage
pnpm run test -- --coverage
# Watch mode
pnpm run test -- --watch- ✅ Core React components
- ✅ Custom hooks
- ✅ API functions
- ✅ Zod validation
- ⏳ E2E tests (in development)
- 📄 README - This file
- 📘 Quick Start Guide
- 📊 Project Summary
- 📖 Full Project Documentation
Contributions are welcome! To get started:
- Fork the project
- Create a branch for your feature
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- ✅ Strict TypeScript code
- ✅ Tests for every new feature
- ✅ Arabic documentation
- ✅ RTL everywhere
- ✅ Follow existing code style
✅ Meta Tags
- Comprehensive title and description
- Open Graph tags for social sharing
- Twitter Card metadata
- Keywords and language tags
✅ PWA Support
- Manifest.json for installability
- Service worker ready
- Offline-first architecture
✅ Performance
- Image optimization (WebP format)
- Font preloading (Cairo)
- Code splitting with Vite
- Lazy loading components
- Optimized bundle size
✅ SEO Files
- robots.txt for search engines
- sitemap.xml for indexing
- Structured data (JSON-LD)
- Canonical URLs
- _headers for security and caching
✅ Accessibility
- ARIA labels throughout
- Semantic HTML
- Keyboard navigation
- Screen reader support
- High contrast ratios
- First Contentful Paint: < 1.8s
- Largest Contentful Paint: < 2.5s
- Time to Interactive: < 3.8s
- Cumulative Layout Shift: < 0.1
- First Input Delay: < 100ms
This project is developed for Ghras Al-Ilm Academy.
All rights reserved © 2025
- Ghras Al-Ilm Academy Team - Vision and guidance
- React Team - Amazing framework
- Tailwind Labs - Outstanding design system
- TanStack - Powerful state management tools
- Open Source Community - All libraries used
- 📖 Read the Quick Start Guide
- 📊 Review the Project Summary
- 🐛 Open an Issue on GitHub
- 💬 Contact via Telegram:
@ghras_support