Presence Pal is a modern, responsive web application designed to streamline employee attendance and leave management. Built with performance and user experience in mind, it provides robust dashboards for both employees and administrators to handle daily operations efficiently.

Author: Teuku Vaickal Rizki Irdian

This project leverages the latest web technologies to ensure scalability, maintainability, and performance.

• Core Framework: React (v18) with Vite for lightning-fast build and HMR.
• Language: TypeScript for type-safe code.
• Styling: Tailwind CSS for utility-first styling.
• UI Components: shadcn/ui (based on Radix UI) for accessible and customizable components.
• State Management & Data Fetching: TanStack Query (React Query).
• Routing: React Router (v6).
• Forms & Validation: React Hook Form combined with Zod.
• Maps: Leaflet & React Leaflet for location-based features.
• Icons: Lucide React.
• Date Handling: date-fns.

• Secure Login Page intended for both Employees and Admins.

• Dashboard: Overview of attendance stats and quick actions.
• History: Detailed view of past attendance records.
• Leave Management: Interface to apply for and view status of leave requests.
• Profile: Manage user profile and settings.

• Dashboard: High-level view of company-wide attendance and stats.
• Employee Management: CRUD operations for employee records.
• Leave Requests: Review and approve/reject leave applications.
• Reports: Generate and view detailed attendance reports.

To maintain high code quality and consistency, we follow the Guideline Coding 2026 standards:

1. Type Safety: All new code must be strictly typed using TypeScript. Avoid any.
2. Component Architecture:
   • Use Functional Components with Hooks.
   • Atomic Design: Separate generic UI components (components/ui) from feature-specific components (components/<feature>).
3. State Management:
   • Use React Query for server state.
   • Use React Context or local state for UI state.
   • Avoid global state libraries (Redux/Zustand) unless absolutely necessary.
4. Styling:
   • Use Tailwind CSS utility classes.
   • Use cn() utility for conditional class merging.
   • Avoid inline styles.
5. Performance:
   • Implement code-splitting using React.lazy for routes.
   • Memoize expensive calculations with useMemo and callbacks with useCallback judiciously.
6. File Structure:
   • Features Folder: Group related files by feature (e.g., pages/employee, pages/admin).
   • Hooks: Extract reusable logic into custom hooks.
7. Linting: Ensure code passes ESLint rules (react-hooks, unused-vars, etc.) before committing.

Follow these steps to set up the project locally.

• Node.js (LTS version recommended)
• npm or yarn or bun

1. Clone the repository

   git clone https://github.com/icaluwu/presence-pal.git
   cd presence-pal

2. Install dependencies

   npm install
   # or
   bun install

3. Start development server

   npm run dev

4. Build for production

   npm run build

MIT