+
+
+
\ No newline at end of file
diff --git a/doc/README.md b/doc/README.md
index da3538a..836d463 100644
--- a/doc/README.md
+++ b/doc/README.md
@@ -20,6 +20,10 @@ The documentation is organized into the following sections:
- [User Guide](./form-builder/USER_GUIDE.md) - How to use the Form Builder
- [Technical Guide](./form-builder/TECHNICAL_GUIDE.md) - Technical details of the Form Builder implementation
+### Process Execution
+- [User Guide](./process-execution/USER_GUIDE.md) - How to use the Process Execution interface
+- [Technical Guide](./process-execution/TECHNICAL_GUIDE.md) - Technical details of the Process Execution implementation
+
## Getting Started
New to the project? We recommend reading the documentation in this order:
diff --git a/doc/overview/PROJECT_OVERVIEW.md b/doc/overview/PROJECT_OVERVIEW.md
index 808a672..5eee56f 100644
--- a/doc/overview/PROJECT_OVERVIEW.md
+++ b/doc/overview/PROJECT_OVERVIEW.md
@@ -68,6 +68,27 @@ The Form Builder complements the Process Builder, enabling users to create forms
- Form versioning and management
- Integration with processes
+### Process Execution
+
+The Process Execution module provides the end-user interface for interacting with deployed workflow processes. Key features include:
+
+- Execution Dashboard for process overview
+ - Task statistics and metrics
+ - Recent tasks and processes
+- Task Inbox for managing assigned tasks
+ - Task filtering and search
+ - Status indicators and due dates
+- New Case interface for initiating processes
+ - Process catalog with descriptions
+ - Categorized process listing
+- Case History for tracking process instances
+ - Historical record of completed processes
+ - Timeline visualization of process steps
+- Task Detail interface for completing tasks
+ - Dynamic form rendering
+ - Case context and variables
+ - Process timeline visualization
+
## User Flows
### Process Design and Execution
@@ -92,6 +113,15 @@ The Form Builder complements the Process Builder, enabling users to create forms
6. When a form task is encountered in a process, the assigned user sees the form
7. Form submissions store data in the process variables
+### Process Participation
+
+1. User logs into the system and views their task inbox
+2. User opens and completes assigned tasks
+3. User submits task forms with required data
+4. Process advances based on task completion
+5. User can view process history and status
+6. User can initiate new process instances
+
## Data Flow
1. Process execution begins at a start event
diff --git a/doc/process-execution/TECHNICAL_GUIDE.md b/doc/process-execution/TECHNICAL_GUIDE.md
new file mode 100644
index 0000000..94aa3e9
--- /dev/null
+++ b/doc/process-execution/TECHNICAL_GUIDE.md
@@ -0,0 +1,278 @@
+# Process Execution - Technical Guide
+
+## Introduction
+
+The Process Execution module forms the user-facing interface of the workflow system, enabling end-users to interact with processes designed in the Process Builder. This document outlines the technical implementation of the Process Execution module, aimed at developers who need to understand, maintain, or extend the system.
+
+## Architecture Overview
+
+The Process Execution module is built with the following technologies:
+
+- **Frontend**: Vue 3 components with Nuxt 3 for routing and SSR
+- **State Management**: Pinia stores for managing process and task data
+- **UI Components**: Rose UI components (rs-prefixed) for consistent styling
+- **Form Handling**: FormKit for dynamic form rendering and validation
+- **Data Fetching**: Fetch composables with caching for API interactions
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Process Execution Module │
+├─────────────┬─────────────┬─────────────┬──────────────────┤
+│ Dashboard │ New Case │ Task Inbox │ Case History │
+├─────────────┴─────────────┴─────────────┴──────────────────┤
+│ Task Detail & Form Rendering Engine │
+├─────────────────────────────────────────────────────────────┤
+│ API Layer │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Module Components
+
+### Pages
+
+The module consists of five main pages:
+
+1. **Execution Dashboard** (`pages/execution/index.vue`)
+ - Aggregates process and task data
+ - Displays statistics and recent items
+ - Provides navigation to other execution pages
+
+2. **New Case Page** (`pages/execution/new-case.vue`)
+ - Lists available processes that can be initiated
+ - Includes filtering and search functionality
+ - Handles process instantiation
+
+3. **Task Inbox** (`pages/execution/inbox.vue`)
+ - Lists tasks assigned to the current user
+ - Provides advanced filtering options
+ - Handles task status updates
+
+4. **Case History** (`pages/execution/history.vue`)
+ - Lists process instances and their statuses
+ - Provides filtering by multiple criteria
+ - Offers detailed case information access
+
+5. **Task Detail** (`pages/execution/task/[id].vue`)
+ - Renders task-specific forms
+ - Displays case variables and process timeline
+ - Handles task completion actions
+
+### Components
+
+Key components used throughout the module:
+
+1. **TaskForm.vue**
+ - Renders dynamic task forms based on task definition
+ - Handles validation and submission
+ - Uses FormKit for form element rendering
+
+### Data Models
+
+The module interacts with several data models:
+
+1. **Process Instance**
+ ```typescript
+ interface ProcessInstance {
+ id: string;
+ processDefinitionId: string;
+ name: string;
+ status: 'ACTIVE' | 'COMPLETED' | 'CANCELLED' | 'ERROR';
+ startDate: string;
+ endDate?: string;
+ variables: Record;
+ tasks: Task[];
+ }
+ ```
+
+2. **Task**
+ ```typescript
+ interface Task {
+ id: string;
+ name: string;
+ processInstanceId: string;
+ status: 'PENDING' | 'COMPLETED' | 'OVERDUE';
+ assignee: string;
+ dueDate?: string;
+ formKey?: string;
+ formData?: Record;
+ }
+ ```
+
+## API Endpoints
+
+The module interacts with the following API endpoints:
+
+### Processes
+
+- `GET /api/processes` - Retrieve available process definitions
+- `POST /api/processes/{processId}/start` - Start a new process instance
+- `GET /api/processes/instances` - Retrieve process instances
+- `GET /api/processes/instances/{instanceId}` - Get a specific process instance
+
+### Tasks
+
+- `GET /api/tasks` - Retrieve tasks assigned to the current user
+- `GET /api/tasks/{taskId}` - Get a specific task
+- `POST /api/tasks/{taskId}/complete` - Complete a task with form data
+- `POST /api/tasks/{taskId}/claim` - Claim a task assignment
+- `POST /api/tasks/{taskId}/unclaim` - Release a task assignment
+
+## Authentication and Authorization
+
+The module relies on the application's authentication system with specific considerations:
+
+- All execution pages require authentication (using the `auth` middleware)
+- Task accessibility is determined by task assignment
+- Process start permissions are controlled by user roles
+- Case history visibility respects process instance permissions
+
+## State Management
+
+Process Execution uses Pinia stores to manage state:
+
+```typescript
+// Store for task management
+export const useTaskStore = defineStore('task', {
+ state: () => ({
+ tasks: [],
+ currentTask: null,
+ loading: false,
+ error: null
+ }),
+ actions: {
+ async fetchTasks() {
+ // Implementation
+ },
+ async fetchTask(taskId) {
+ // Implementation
+ },
+ async completeTask(taskId, formData) {
+ // Implementation
+ }
+ }
+});
+
+// Store for process management
+export const useProcessStore = defineStore('process', {
+ state: () => ({
+ processDefinitions: [],
+ processInstances: [],
+ currentInstance: null,
+ loading: false,
+ error: null
+ }),
+ actions: {
+ async fetchProcessDefinitions() {
+ // Implementation
+ },
+ async startProcess(processId, initialData) {
+ // Implementation
+ },
+ async fetchProcessInstances() {
+ // Implementation
+ }
+ }
+});
+```
+
+## Form Rendering
+
+Process Execution dynamically renders forms based on form definitions:
+
+1. Forms are retrieved from the Form Builder's repository
+2. FormKit schema is generated from the form definition
+3. The schema is rendered using FormKit components
+4. Validation rules are applied based on form configuration
+5. Submission data is processed and sent to the API
+
+```javascript
+// Example of form rendering
+function renderTaskForm(formDefinition) {
+ const schema = convertToFormKitSchema(formDefinition);
+ return createForm({
+ schema,
+ onSubmit: async (formData) => {
+ await completeTask(currentTaskId.value, formData);
+ }
+ });
+}
+```
+
+## Status Tracking and Visualization
+
+Process status visualization is implemented using:
+
+1. **Status Badges**
+ - Color-coded status indicators (success, warning, danger)
+ - Text labels for clear status identification
+
+2. **Process Timeline**
+ - Sequential visualization of process steps
+ - Status indicators for each step
+ - Current position indicator in the flow
+
+## Performance Considerations
+
+1. **Data Caching**
+ - Task and process data is cached to minimize API calls
+ - Caching invalidated on relevant state changes
+
+2. **Pagination**
+ - Task lists and process history implement pagination
+ - Configurable page sizes to optimize data loading
+
+3. **Lazy Loading**
+ - Task details and forms are lazy-loaded
+ - Expandable sections to reduce initial load time
+
+## Error Handling
+
+1. **API Error Handling**
+ - Centralized error handling for API responses
+ - User-friendly error messages for common issues
+ - Detailed logging for debugging
+
+2. **Form Validation**
+ - Client-side validation to reduce server load
+ - Consistent error presentation for form fields
+ - Submission validation to prevent data loss
+
+## Future Improvements
+
+Planned technical enhancements for the Process Execution module:
+
+1. **Real-time Updates**
+ - WebSocket integration for task list updates
+ - Notifications for new task assignments
+
+2. **Offline Support**
+ - Task caching for offline access
+ - Offline form submission queuing
+
+3. **Performance Optimization**
+ - Virtual scrolling for large task lists
+ - Optimized form rendering for complex forms
+
+4. **Integration Enhancements**
+ - Enhanced document handling capabilities
+ - External system integrations for task actions
+
+## Development Guidelines
+
+When extending the Process Execution module:
+
+1. **Component Reuse**
+ - Utilize existing Rose UI components
+ - Follow established patterns for new components
+
+2. **State Management**
+ - Use appropriate stores for data management
+ - Maintain clear actions and mutations
+
+3. **Form Handling**
+ - Follow FormKit patterns for form implementation
+ - Use validation utilities consistently
+
+4. **API Interactions**
+ - Use the established composables for API calls
+ - Maintain proper error handling
\ No newline at end of file
diff --git a/doc/process-execution/USER_GUIDE.md b/doc/process-execution/USER_GUIDE.md
new file mode 100644
index 0000000..f7abc6e
--- /dev/null
+++ b/doc/process-execution/USER_GUIDE.md
@@ -0,0 +1,152 @@
+# Process Execution - User Guide
+
+## Introduction
+
+The Process Execution module is the end-user interface of Corrad ProcessMaker, allowing users to interact with workflow processes that have been designed in the Process Builder. This module enables users to:
+
+- Start new process instances
+- View and complete assigned tasks
+- Track the status and history of process instances
+- Access process-related information and context
+
+This guide provides a comprehensive overview of how to use the Process Execution module effectively.
+
+## Getting Started
+
+Access the Process Execution module by navigating to the "Process Execution" section in the main navigation menu. This section contains the following pages:
+
+- **Execution Dashboard** - Overview of processes and tasks
+- **New Case** - Start new process instances
+- **Task Inbox** - View and manage assigned tasks
+- **Case History** - View historical process instances
+
+## Execution Dashboard
+
+The Execution Dashboard provides a high-level overview of your process-related activities.
+
+
+
+### Dashboard Components
+
+1. **Statistics Cards**
+ - **Pending Tasks** - Number of tasks awaiting your action
+ - **Active Cases** - Number of process instances currently running
+ - **Completed Cases** - Number of process instances that have completed
+ - **Overdue Tasks** - Number of tasks that have passed their due date
+
+2. **Recent Tasks**
+ - Displays a list of your most recent tasks
+ - Shows task name, associated process, due date, and status
+ - Click on the "Open" button to go directly to the task
+ - Click on "View All Tasks" to navigate to the Task Inbox
+
+3. **Recent Processes**
+ - Displays a list of recently started processes
+ - Shows process name, start date, and current status
+ - Click on "View" to see detailed information about the process
+ - Click on "View All Processes" to navigate to the Case History
+
+## Starting a New Case
+
+To initiate a new process instance, navigate to the "New Case" page from the Process Execution section.
+
+
+
+### Steps to Start a New Case
+
+1. **Browse Available Processes**
+ - All available processes are displayed as cards
+ - Each card shows the process name, description, category, average duration, and number of steps
+ - Processes are color-coded by category
+
+2. **Filter and Search**
+ - Use the search box to find a specific process by name or description
+ - Use the category dropdown to filter processes by department (HR, Finance, Operations, etc.)
+
+3. **Start a Process**
+ - Click the "Start Process" button on the desired process card
+ - You will be directed to the first form or task in the process
+ - Complete the form and submit to continue the process
+
+## Managing Tasks in the Inbox
+
+The Task Inbox displays all tasks assigned to you that require your action.
+
+
+
+### Task Inbox Features
+
+1. **Filtering and Searching**
+ - Search for tasks by name, process, or case ID
+ - Filter tasks by process type
+ - Filter tasks by status (Pending, Overdue, Completed)
+
+2. **Task Information**
+ - Each task displays its name, associated process, case ID, and due date
+ - Status indicators show whether a task is pending, overdue, or completed
+ - Click on "Open Task" to view and work on the task
+
+3. **Refreshing the Inbox**
+ - Click the refresh button to update the task list
+ - Tasks are automatically updated when you complete an action
+
+## Completing Tasks
+
+When you open a task from the Inbox, you will see the Task Detail page.
+
+
+
+### Task Detail Components
+
+1. **Task Information**
+ - Task name and description
+ - Process information and case ID
+ - Due date and other task metadata
+
+2. **Task Form**
+ - Form fields required for task completion
+ - Field validation ensures correct data entry
+ - Submit button to complete the task
+
+3. **Case Information**
+ - Expandable panel showing case variables
+ - Process timeline with status of each step
+ - Links to related documents or information
+
+4. **Actions**
+ - Submit the form to complete the task
+ - Save draft to continue later
+ - View the case or process diagram
+
+## Viewing Case History
+
+The Case History page allows you to view all process instances (cases) and their current status.
+
+
+
+### Case History Features
+
+1. **Filtering and Searching**
+ - Search for cases by ID or process name
+ - Filter by process type
+ - Filter by status (Completed, Cancelled, Error)
+ - Filter by timeframe (Past Week, Past Month, Past Quarter, Past Year)
+
+2. **Case Information**
+ - Each case displays its ID, process name, start date, completion date, and duration
+ - Status indicators show whether a case is completed, cancelled, or has encountered an error
+ - Click on "View Details" to see the complete case information
+
+3. **Case Details**
+ - Timeline of all tasks and events in the case
+ - Case variables and their values
+ - Audit trail of user actions
+ - Related documents and notes
+
+## Best Practices
+
+- **Regular Check-ins**: Review your Task Inbox regularly to ensure timely completion of tasks
+- **Proper Documentation**: When completing forms, provide thorough and accurate information
+- **Process Awareness**: Familiarize yourself with the processes you participate in to understand your role
+- **Communication**: Use comments or notes when available to communicate with other process participants
+- **Organized Workflow**: Complete tasks in order of priority, focusing on overdue tasks first
\ No newline at end of file
diff --git a/layouts/execution.vue b/layouts/execution.vue
new file mode 100644
index 0000000..7e3c8af
--- /dev/null
+++ b/layouts/execution.vue
@@ -0,0 +1,32 @@
+
+