Website : rimsha.abasa.com
backdoor
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
var
/
www
/
mudeer-web-backup30April26
/
Filename :
README.md
back
Copy
# Mudeer Web Frontend Next.js 14 frontend application for the Mudeer attendance management system. Built with TypeScript, React, and modern UI components. ## Tech Stack **Core:** - **Next.js 14** - React framework with App Router - **TypeScript** - Type safety - **React 18** - UI library - **Tailwind CSS** - Utility-first styling **UI Components:** - **Shadcn/ui** - Accessible component library (Radix UI primitives) - **Material-UI (MUI)** - Additional UI components - **Lucide React** - Icon library - **React Icons** - Icon collection **State Management & Data Fetching:** - **TanStack Query (React Query)** - Server state management - **React Context API** - Client state (Auth, Login Activity) **Forms & Validation:** - **Zod** - Schema validation - **React Hook Form** - Form state management **Charts & Visualization:** - **Recharts** - Chart library - **D3.js** - Data visualization **Date/Time:** - **date-fns** & **date-fns-tz** - Date utilities with timezone support - **dayjs** - Lightweight date library - **React Day Picker** - Date picker component **Other Libraries:** - **Axios** - HTTP client - **Firebase** - Push notifications & authentication - **Next Themes** - Dark mode support - **Sonner** - Toast notifications - **SweetAlert2** - Alert dialogs - **React Phone Number Input** - Phone input component - **Styled Components** - CSS-in-JS (with MUI integration) ## Project Structure ``` src/ ├── app/ # Next.js App Router │ ├── (auth)/ # Authentication routes │ │ ├── signin/ │ │ ├── forgot-password/ │ │ └── reset-password/ │ ├── (dashboard)/ # Protected dashboard routes │ │ ├── attendance/ │ │ ├── employees/ │ │ │ └── [id]/ # Dynamic employee routes │ │ │ ├── attendance/ │ │ │ ├── activities/ │ │ │ ├── logs/ │ │ │ └── settings/ │ │ ├── departments/ │ │ │ └── [id]/ │ │ ├── notifications/ │ │ └── register/ │ ├── (termsAndPolicy)/ # Legal pages │ ├── Providers/ # Context providers │ │ ├── AuthContext.tsx │ │ ├── QueryProvider.tsx │ │ └── LoginActivityContext.tsx │ ├── validators/ # Zod validation schemas │ ├── layout.tsx # Root layout │ └── page.tsx # Home page ├── components/ # Reusable components │ ├── ui/ # Shadcn/ui components │ │ ├── button.tsx │ │ ├── dialog.tsx │ │ ├── table.tsx │ │ └── ... │ ├── Header.tsx │ ├── Sidebar.tsx │ ├── ProtectedRoute.tsx │ └── ... ├── hooks/ # Custom React hooks │ ├── useFCM.ts # Firebase Cloud Messaging │ ├── useNotifications.ts │ └── use-mobile.tsx ├── lib/ # Utility libraries │ ├── firebase.ts │ ├── timezone.ts │ └── utils.ts └── public/ # Static assets ├── fonts/ └── svgs/ ``` ## Installation ### Prerequisites - Node.js (v18+ recommended) - npm, yarn, pnpm, or bun ### Setup 1. **Clone the repository** ```bash git clone https://gs1.abasa.com/sohaib/mudeer-web.git cd mudeer-web ``` 2. **Install dependencies** ```bash npm install ``` If you encounter peer dependency conflicts, use: ```bash npm install --legacy-peer-deps ``` 3. **Configure environment variables** Create a `.env` file in the root directory: ```env # Backend API URL NEXT_PUBLIC_MUDEER_URL=http://localhost:8000 ``` 4. **Run the development server** ```bash npm run dev ``` Open [http://localhost:3000](http://localhost:3000) in your browser. ## Available Scripts - `npm run dev` - Start development server - `npm run build` - Build for production - `npm run start` - Start production server - `npm run lint` - Run ESLint - `npm run build:profile` - Build with profiling - `npm run analyze` - Analyze bundle size ## Key Features - **Authentication Flow** - Sign in, password reset, forgot password - **Dashboard** - Main application interface with sidebar navigation - **Employee Management** - View employees, track attendance, view activities/logs - **Attendance Tracking** - Record and view attendance with charts - **Department Management** - Organize employees by departments - **Notifications** - Real-time push notifications via Firebase - **Responsive Design** - Mobile-friendly UI with Tailwind CSS - **Dark Mode** - Theme switching support - **UTC Timezone Handling** - Consistent timezone management - **Form Validation** - Zod-based validation for all forms - **Data Tables** - TanStack Table for sortable, filterable tables ## Architecture - **App Router** - Next.js 14 App Router with route groups `(auth)`, `(dashboard)` - **Server Components** - Default React Server Components - **Client Components** - Marked with `'use client'` for interactivity - **API Integration** - TanStack Query for data fetching and caching - **Protected Routes** - Authentication-based route protection - **Component Library** - Shadcn/ui components built on Radix UI primitives ## Styling - **Tailwind CSS** - Primary styling approach - **CSS Modules** - Component-specific styles - **Styled Components** - For MUI integration - **Custom Fonts** - Poppins, Montserrat, Lato fonts included ## Deployment The project includes GitLab CI/CD configuration for automated deployment. Build the production bundle with `npm run build` and deploy using PM2 or similar process manager.