Karlist — Organizational Task Management

📋 Karlist — Bringing Structure to Organizational Work

Managing organizational work involves more than keeping a list of tasks. Teams need to understand who is responsible, how work is connected, when it is due, and what progress has been made.

Karlist is a task management application frontend that brings these workflows together through hierarchical tasks, visual planning tools, progress reports, and performance dashboards.

🌳 From Large Objectives to Actionable Tasks

Karlist supports parent tasks and nested subtasks, helping teams break larger objectives into smaller pieces of work.

Tasks can include a responsible manager, collaborators, an organization, priority, start date, deadline, description, and attachments.

Group task forms support creating and editing multiple related tasks within a hierarchy, while drag-and-drop controls let users reorder tasks.

🗺️ Multiple Views of the Same Work

Different situations call for different ways to understand a project. Karlist provides three complementary views:

• 📋 Hierarchical tables for browsing tasks and their details.
• 🔗 Interactive graphs for exploring parent-child relationships.
• 📅 Gantt timelines for comparing task schedules and durations.

The graph view uses React Flow and automatic layouts to visualize task structures, with navigation controls and an option to export the graph as an image.

🎙️ Progress Reports with More Context

Users can submit task reports with written updates, status changes, file attachments, and recorded voice messages.

Voice recording and waveform playback provide another way to communicate progress when a written update is less convenient.

Reports remain connected to their task, bringing updates and supporting files into the same workflow.

🔎 Find the Tasks That Need Attention

Task filters support searching by title, status, type, responsible manager, creator, priority, and date range.

Additional filters help identify overdue tasks and approaching deadlines, making it easier to focus on work that needs attention.

Archive views and backend-connected PDF and Excel export actions support reviewing and sharing task information.

📊 Performance at a Glance

Dashboard and system performance views summarize task activity through widgets, bar charts, and pie charts.

Organization and manager summaries help users explore how work is distributed and review task statuses across the system.

🔔 Connected Workflows and Role-Based Navigation

Karlist integrates with backend services for task operations, reports, notifications, users, and organizations.

Laravel Echo and a Reverb-compatible WebSocket connection support real-time event integration. Task forms also include options for immediate or scheduled SMS notifications.

Phone-based one-time password authentication supports sign-in, while frontend routes distinguish between administrators, managers, and regular users. Regular users have a dedicated view of their assigned tasks.

🛠️ Frontend Architecture

The application is built with React, TypeScript, and Vite, using React Router for navigation and lazy-loaded dashboard pages.

• 🔄 TanStack Query — API queries, mutations, and cache updates.
• 📋 TanStack Table — structured task tables.
• ✅ React Hook Form + Zod — forms and authentication validation.
• 🎨 Tailwind CSS + shadcn/ui — reusable interface components.
• 🔗 React Flow + Dagre — interactive task graphs and automatic layouts.
• ↕️ dnd-kit — sortable task interactions.
• 🎙️ WaveSurfer.js — audio waveforms and playback.
• 📊 Recharts — dashboard visualizations.
• 🌐 Axios + Laravel Echo — HTTP and real-time backend integration.

Persian typography, right-to-left layouts, and Persian calendar inputs support the application’s local working context.

🚀 What This Project Demonstrates

Karlist demonstrates frontend development for a complex business application: nested data management, interactive visualization, scheduling interfaces, audio workflows, reporting, role-aware navigation, and API integration.