Getting started

CHRIS HRIS Documentation

Welcome to the documentation for CHRIS (Croatian Human Resource Information System) - a comprehensive leave and employee management system. What is CHRIS? CHRIS is a modern HRIS application designed to streamline employee leave management, team organization, and HR workflows. Built with React, TypeScript, and Supabase, it offers: - Multi-language Support: Croatian, English, Russian, and Hindi - Leave Management: Full workflow from request to approval - Team Organization: Hierarchical team structure with team leaders - Contract Management: Track employment contracts and documents - Email Notifications: Automated notifications via SMTP - Role-Based Access: Admin, HR Manager, and Employee roles Quick Start - :material-clock-fast:{ .lg .middle } Getting Started Set up your development environment and run CHRIS locally :octicons-arrow-right-24: Getting Started - :material-account-plus:{ .lg .middle } First Leave Request Learn how to submit your first leave request as an employee :octicons-arrow-right-24: First Leave Request - :material-cog:{ .lg .middle } Admin Setup Configure CHRIS for your organization :octicons-arrow-right-24: Admin Setup Guide Documentation Structure This documentation follows the Diátaxis framework: | Section | Purpose | Best For | |---------|---------|----------| | Tutorials | Learning-oriented guides | Beginners starting out | | How-To Guides | Task-oriented instructions | Accomplishing specific tasks | | Reference | Technical specifications | Looking up details | | Explanation | Understanding concepts | Learning how things work | Key Features Leave Management - Submit, approve, and track leave requests - Multiple leave types (annual, sick, family, etc.) - Leave balance calculation with carryover support - Public holiday integration by country Employee Management - Employee profiles with contract details - CV/resume upload and management - Role-based permissions (Admin, HR Manager, Employee) - Admin masquerade functionality Team Organization - Create and manage teams - Assign team leaders - Team-based leave approval workflow Internationalization - Four supported languages: 🇭🇷 Croatian, 🇬🇧 English, 🇷🇺 Russian, 🇮🇳 Hindi - Database-driven translations - Easy to add new languages Tech Stack | Layer | Technology | |-------|------------| | Frontend | React 18, TypeScript, Vite | | UI Components | shadcn/ui, Tailwind CSS, Radix UI | | State Management | TanStack Query (React Query) | | Backend | Supabase (PostgreSQL, Auth, Edge Functions, Storage) | | Routing | React Router v6 | | Forms | React Hook Form, Zod validation | Version Current Version: 1.0.0 See the Changelog for version history. Contributing CHRIS is developed following these standards: - Accessibility: WCAG 2.1 Level AA compliance - Changelog: Keep a Changelog format - Versioning: Semantic Versioning Support For issues or feature requests, please visit our GitHub repository.

Admin Setup Guide

This tutorial walks administrators through the initial configuration of CHRIS. Prerequisites - Access to CHRIS with an admin role account - Supabase project with database migrations applied - SMTP server credentials (for email notifications) Overview Initial setup involves configuring: 1. Company settings 2. Email (SMTP) configuration 3. Leave types and policies 4. Holiday schemes 5. Your first employees and teams Step 1: Access Admin Settings 1. Sign in with your admin account 2. Click Settings in the navigation menu 3. You'll see tabs for different configuration areas !!! note "Admin-Only Access" Settings pages are only visible to users with the admin role. Step 2: Configure Company Information Navigate to Settings > Company: | Field | Description | Example | |-------|-------------|---------| | Company Name | Your organization's name | Acme Corporation | | Default Language | Primary language | Croatian | | Date Format | How dates are displayed | DD/MM/YYYY | Click Save to apply changes. Step 3: Set Up Email Notifications Navigate to Settings > Email: SMTP Configuration | Field | Description | Example | |-------|-------------|---------| | SMTP Host | Mail server address | smtp.gmail.com | | SMTP Port | Server port | 587 | | Username | SMTP authentication | notifications@company.com | | Password | SMTP password | (app-specific password) | | From Email | Sender address | hr@company.com | | From Name | Sender display name | CHRIS HR System | | Use TLS | Enable encryption | Yes (recommended) | Test Your Configuration 1. Click Send Test Email 2. Check your inbox for the test message 3. If successful, you'll see a confirmation !!! warning "Gmail/Outlook Users" Use an app-specific password instead of your regular password: - Gmail: [Create App Password](https://myaccount.google.com/apppasswords) - Outlook: [App Passwords](https://account.live.com/proofs/AppPassword) Email Rerouting (For Testing) Enable Email Rerouting to redirect all emails to a test address during setup: 1. Toggle Enable Rerouting to on 2. Enter a test email address 3. All notifications will go to this address instead of actual recipients Step 4: Configure Leave Types Navigate to Settings > Leave Types: Default leave types include: | Type | Description | |------|-------------| | Annual Leave | Paid vacation days | | Sick Leave (Short) | Short-term illness (up to 3 days) | | Sick Leave (Long) | Extended illness with documentation | | Family Leave | Family emergencies | You can customize: - Names in each language - Default entitlement days - Whether documents are required - Carryover policies Step 5: Set Up Holiday Schemes Navigate to Settings > Holidays: 1. Click Add Holiday Scheme 2. Enter scheme details: - Name (e.g., "Croatia 2025") - Country - Year 3. Add public holidays: - Date - Name in each language - Type (national, religious, etc.) !!! tip "Import Holidays" You can import holidays from previous years and adjust dates. Step 6: Add Your First Employee Navigate to Employees > Add Employee: Basic Information | Field | Required | Description | |-------|----------|-------------| | Email | Yes | Login email address | | First Name | Yes | Employee's first name | | Last Name | Yes | Employee's last name | | Role | Yes | admin, hr_manager, or employee | Contract Details | Field | Description | |-------|-------------| | Position | Job title | | Start Date | Employment start | | Contract Type | Full-time, Part-time, etc. | | Leave Entitlement | Annual leave days | | Holiday Scheme | Which public holidays apply | Click Create Employee to send them a welcome email with login instructions. Step 7: Create Teams Navigate to Teams > Add Team: 1. Enter team name 2. Select a team leader (must be an existing employee) 3. Add team members !!! info "Team Leaders" Team leaders can approve leave requests for their team members. Step 8: Verify Setup Run through this checklist: - [ ] Company name displays correctly - [ ] Test email was received - [ ] Leave types are configured - [ ] Holidays are set up for the current year - [ ] At least one admin user exists - [ ] At least one team is created Next Steps Your CHRIS installation is now ready for use: - Add more employees - Configure email templates - Set up additional teams - Review the security model Common Setup Issues Emails Not Sending 1. Verify SMTP credentials 2. Check that TLS is enabled if required 3. Review Edge Function logs in Supabase dashboard 4. Ensure firewall allows outbound SMTP Missing Translations If UI shows keys like common.save: 1. Check translations table has data 2. Run migrations: npx supabase db push --linked Permission Denied Errors 1. Verify your account has admin role 2. Check RLS policies are applied 3. Sign out and sign back in to refresh session

Your First Leave Request

This tutorial guides you through submitting your first leave request as an employee. Prerequisites - You have access to CHRIS (either locally or deployed) - You have an employee account with login credentials - Your profile is set up with a team assignment Step 1: Sign In 1. Navigate to the CHRIS application 2. Enter your email and password 3. Click Sign In !!! note "First Time Login" If this is your first login, you may be prompted to change your password. Step 2: View Your Dashboard After signing in, you'll see the dashboard showing: - Leave Balance: Your remaining leave days by type - Pending Requests: Any requests awaiting approval - Team Calendar: (If applicable) Your team's leave schedule Step 3: Check Your Leave Balance Before submitting a request, verify your available balance: 1. Look at the Leave Balance card on your dashboard 2. Note your remaining days for each leave type: - Annual Leave - Sick Leave (Short-term) - Sick Leave (Long-term) - Family Leave !!! tip "Balance Calculation" Your balance is calculated based on: - Entitled days from your contract - Days already used this year - Any carryover from previous years Step 4: Submit a Leave Request 1. Click Request Leave in the navigation menu 2. Fill in the request form: | Field | Description | |-------|-------------| | Leave Type | Select the type of leave (Annual, Sick, etc.) | | Start Date | First day of your leave | | End Date | Last day of your leave | | Reason | Optional explanation for the request | 3. Review the Working Days calculated (excludes weekends and public holidays) 4. Click Submit Request !!! warning "Insufficient Balance" If your requested days exceed your available balance, you'll see a warning. The request can still be submitted but may be rejected. Step 5: Track Your Request After submission: 1. Navigate to My Requests in the menu 2. Find your request in the list 3. Check the Status column: - Pending: Awaiting approval - Approved: Your leave is confirmed - Rejected: Request was declined (check comments) - Cancelled: You cancelled the request Step 6: Receive Notification When your request status changes: - You'll receive an email notification (if SMTP is configured) - The notification includes: - Decision (approved/rejected) - Approver's name - Any comments from the approver What Happens Next? Your request follows this workflow: graph LR A[Submit] --> B[Pending] B --> C{Decision} C -->|Approved| D[Leave Scheduled] C -->|Rejected| E[Not Approved] B --> F[Cancel] 1. Team Leader Review: Your team leader receives a notification 2. HR Review: HR managers can also approve requests 3. Decision: You're notified of the outcome 4. Calendar Update: Approved leave appears on team calendars Tips for Successful Requests 1. Submit Early: Give approvers time to review 2. Check Calendar: Avoid overlapping with team members' leave 3. Be Specific: Include reason for planned absences 4. Attach Documents: For sick leave, upload medical certificates if required Next Steps - Learn how to manage your requests - View the leave status workflow - Understand leave balance calculation

Getting Started

This tutorial walks you through setting up CHRIS for local development. Prerequisites Before you begin, ensure you have: - Node.js 18 or higher (install with nvm) - npm 9 or higher (comes with Node.js) - Git for version control - A Supabase account and project Step 1: Clone the Repository git clone https://github.com/your-org/godisnji-odmor-tracker.git cd godisnji-odmor-tracker Step 2: Install Dependencies npm install This installs all required packages including React, TypeScript, shadcn/ui, and Supabase client. Step 3: Configure Environment Variables Create a .env file in the project root: cp .env.example .env Edit .env with your Supabase credentials: VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key !!! tip "Finding Your Supabase Credentials" 1. Go to your Supabase Dashboard 2. Select your project 3. Navigate to Settings > API 4. Copy the Project URL and anon public key Step 4: Set Up the Database If starting fresh, apply the database migrations: npx supabase db push --linked This creates all required tables: profiles, teams, leave_requests, translations, etc. Step 5: Start Development Server npm run dev The application will start at http://localhost:8080 (or the next available port). !!! success "You're Ready!" Open your browser and navigate to the URL shown in the terminal. What's Next? Now that you have CHRIS running locally: - Submit your first leave request as an employee - Set up the admin configuration if you're an administrator - Explore the How-To Guides for specific tasks Troubleshooting Port Already in Use If port 8080 is occupied, Vite automatically uses the next available port: Port 8080 is in use, trying another one... VITE ready in 184 ms Local: http://localhost:8081/ Supabase Connection Issues If you see authentication errors: 1. Verify your .env file has correct credentials 2. Check that your Supabase project is active 3. Ensure RLS (Row Level Security) policies are configured Missing Translations If text appears as translation keys (e.g., common.save): 1. Ensure the translations table is populated 2. Run any pending migrations: npx supabase db push --linked