526 lines
33 KiB
PHP
526 lines
33 KiB
PHP
<?php
|
|
require_once 'auth.php';
|
|
|
|
// Check if user is logged in
|
|
if (!is_logged_in()) {
|
|
header('Location: login.php');
|
|
exit;
|
|
}
|
|
|
|
if (!hasPermission('view_workflows')) {
|
|
header('Location: app.php');
|
|
exit;
|
|
}
|
|
|
|
require_once 'db/config.php';
|
|
|
|
$pdo = db();
|
|
|
|
// Handle form submission for adding a new workflow
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_workflow'])) {
|
|
if (hasPermission('manage_workflows')) {
|
|
$creation_type = $_POST['creation_type'] ?? 'scratch';
|
|
|
|
if ($creation_type === 'template') {
|
|
$template_name = $_POST['template_name'] ?? '';
|
|
$workflow_name = '';
|
|
$trigger_event = '';
|
|
$actions = [];
|
|
|
|
switch ($template_name) {
|
|
case 'smart_candidate_intake':
|
|
$workflow_name = 'Smart Candidate Intake';
|
|
$trigger_event = 'candidate_created';
|
|
$actions = [
|
|
['action_type' => 'ai_analysis', 'config' => json_encode(['prompt' => 'Enrich candidate data.'])],
|
|
['action_type' => 'create_task', 'config' => json_encode(['task_name' => 'Review new candidate profile', 'assign_to' => 'hiring_manager'])],
|
|
['action_type' => 'send_slack', 'config' => json_encode(['channel' => '#hr-alerts', 'message' => 'New candidate received.'])]
|
|
];
|
|
break;
|
|
case 'interview_scheduling':
|
|
$workflow_name = 'Interview Scheduling';
|
|
$trigger_event = 'candidate_status_changed';
|
|
$actions = [
|
|
['action_type' => 'send_email', 'config' => json_encode(['to' => '{candidate_email}', 'subject' => 'Invitation to Interview', 'body' => 'Please schedule your interview...'])],
|
|
['action_type' => 'schedule_event', 'config' => json_encode(['calendar' => 'hiring_manager_calendar', 'title' => 'Interview with {candidate_name}'])]
|
|
];
|
|
break;
|
|
case 'onboarding_automation':
|
|
$workflow_name = 'Onboarding Automation';
|
|
$trigger_event = 'candidate_hired';
|
|
$actions = [
|
|
['action_type' => 'create_task', 'config' => json_encode(['task_name' => 'Prepare welcome kit', 'assign_to' => 'hr_specialist'])],
|
|
['action_type' => 'create_task', 'config' => json_encode(['task_name' => 'Set up IT equipment', 'assign_to' => 'it_department'])],
|
|
['action_type' => 'send_email', 'config' => json_encode(['to' => '{candidate_email}', 'subject' => 'Welcome to the team!', 'body' => 'Your onboarding details...'])]
|
|
];
|
|
break;
|
|
case 'weekly_reports':
|
|
$workflow_name = 'Weekly Reports';
|
|
$trigger_event = 'schedule_weekly';
|
|
$actions = [
|
|
['action_type' => 'add_to_report', 'config' => json_encode(['report_name' => 'Weekly Candidate Pipeline', 'data' => 'summary'])],
|
|
['action_type' => 'send_email', 'config' => json_encode(['to' => 'management@example.com', 'subject' => 'Weekly Recruiting Report', 'body' => 'See attached report.'])]
|
|
];
|
|
break;
|
|
}
|
|
|
|
if ($workflow_name && $trigger_event) {
|
|
$stmt = $pdo->prepare("INSERT INTO workflows (name, trigger_event) VALUES (?, ?)");
|
|
$stmt->execute([$workflow_name, $trigger_event]);
|
|
$workflow_id = $pdo->lastInsertId();
|
|
|
|
$action_stmt = $pdo->prepare("INSERT INTO workflow_actions (workflow_id, action_type, config, action_order) VALUES (?, ?, ?, ?)");
|
|
foreach ($actions as $index => $action) {
|
|
$action_stmt->execute([$workflow_id, $action['action_type'], $action['config'], $index + 1]);
|
|
}
|
|
|
|
header("Location: workflow_actions.php?id=" . $workflow_id);
|
|
exit;
|
|
}
|
|
|
|
} else { // Build from scratch
|
|
$name = $_POST['name'] ?? '';
|
|
$trigger_event = $_POST['trigger_event'] ?? '';
|
|
$trigger_condition = $_POST['trigger_condition'] ?? null;
|
|
|
|
if ($name && $trigger_event) {
|
|
$stmt = $pdo->prepare("INSERT INTO workflows (name, trigger_event, trigger_condition) VALUES (?, ?, ?)");
|
|
$stmt->execute([$name, $trigger_event, $trigger_condition]);
|
|
$newWorkflowId = $pdo->lastInsertId();
|
|
header("Location: workflow_actions.php?id=" . $newWorkflowId);
|
|
exit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fetch workflows from the database
|
|
$stmt = $pdo->query("SELECT * FROM workflows ORDER BY created_at DESC");
|
|
$workflows = $stmt->fetchAll();
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FinMox Workflows</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.trigger-dropdown-options::-webkit-scrollbar { width: 6px; }
|
|
.trigger-dropdown-options::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
.trigger-dropdown-options::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }
|
|
.trigger-dropdown-options::-webkit-scrollbar-thumb:hover { background: #555; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<header class="bg-gray-800 text-white shadow-md">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="app.php">
|
|
<img src="assets/pasted-20251120-051320-b2b0cdfa.png" alt="FinMox Logo" style="height: 32px;">
|
|
</a>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div class="ml-10 flex items-baseline space-x-4">
|
|
<a href="app.php" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
|
|
<a href="dashboard.php" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
|
|
<a href="workflows.php" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Workflows</a>
|
|
|
|
<!-- User Dropdown -->
|
|
<div class="relative ml-3">
|
|
<div>
|
|
<button type="button" id="user-menu-button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-expanded="false" aria-haspopup="true">
|
|
<span class="sr-only">Open user menu</span>
|
|
<span class="text-white px-3 py-2 rounded-md text-sm font-medium"><?php echo htmlspecialchars($_SESSION['username']); ?></span>
|
|
</button>
|
|
</div>
|
|
<div id="user-menu" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
|
<a href="roles.php" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Manage Roles</a>
|
|
<a href="logout.php" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="-mr-2 flex md:hidden">
|
|
<!-- Mobile menu button -->
|
|
<button type="button" id="mobile-menu-button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu, show/hide based on menu state. -->
|
|
<div class="md:hidden hidden" id="mobile-menu">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<a href="app.php" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
|
|
<a href="dashboard.php" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
|
|
<a href="workflows.php" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Workflows</a>
|
|
</div>
|
|
<div class="pt-4 pb-3 border-t border-gray-700">
|
|
<div class="flex items-center px-5">
|
|
<div class="ml-3">
|
|
<div class="text-base font-medium leading-none text-white"><?php echo htmlspecialchars($_SESSION['username']); ?></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 px-2 space-y-1">
|
|
<a href="roles.php" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Manage Roles</a>
|
|
<a href="logout.php" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="workflows-page" class="min-h-screen p-8">
|
|
<div class="max-w-7xl mx-auto">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">Your Automation Workflows</h1>
|
|
<p class="text-gray-600 mt-1">Click any workflow to view and edit its actions</p>
|
|
</div>
|
|
<?php if (hasPermission('manage_workflows')): ?>
|
|
<button onclick="openModal('addWorkflowModal')" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
|
|
Create New Workflow
|
|
</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Workflow Cards Grid -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<?php if (empty($workflows)): ?>
|
|
<!-- Static Example Cards -->
|
|
<div class="bg-white rounded-xl shadow-sm border-2 border-gray-200 p-6"><div class="flex items-center gap-3 mb-4"><div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"><svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg></div><div><h3 class="text-lg font-bold text-gray-900">Smart Candidate Intake</h3></div></div><p class="text-gray-600">Automatically captures, enriches, and routes new candidates.</p></div>
|
|
<div class="bg-white rounded-xl shadow-sm border-2 border-gray-200 p-6"><div class="flex items-center gap-3 mb-4"><div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center"><svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div><div><h3 class="text-lg font-bold text-gray-900">Interview Scheduling</h3></div></div><p class="text-gray-600">Automates calendar checks and interview coordination.</p></div>
|
|
<div class="bg-white rounded-xl shadow-sm border-2 border-gray-200 p-6"><div class="flex items-center gap-3 mb-4"><div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center"><svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></div><div><h3 class="text-lg font-bold text-gray-900">Onboarding Automation</h3></div></div><p class="text-gray-600">Creates and tracks onboarding tasks for new hires.</p></div>
|
|
<?php else: ?>
|
|
<?php foreach ($workflows as $workflow): ?>
|
|
<a href="workflow_actions.php?id=<?php echo $workflow['id']; ?>" class="block bg-white rounded-xl shadow-sm border-2 border-gray-200 hover:border-blue-500 hover:shadow-lg transition-all p-6">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex items-center gap-3"><div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"><svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h6m-6 4h6m-6 4h6"></path></svg></div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-900"><?php echo htmlspecialchars($workflow['name']); ?></h3>
|
|
<span class="inline-block px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded mt-1">Active</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600">Trigger: <strong><?php echo htmlspecialchars(str_replace('_', ' ', ucfirst($workflow['trigger_event']))); ?></strong></p>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Workflow Modal -->
|
|
<div id="addWorkflowModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
|
|
<div class="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
|
|
<div class="flex justify-between items-center pb-3">
|
|
<p class="text-2xl font-bold">Create New Workflow</p>
|
|
<div class="cursor-pointer z-50" onclick="closeModal('addWorkflowModal')"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="border-b border-gray-200">
|
|
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
|
|
<button id="tab-templates" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-blue-500 text-blue-600">
|
|
📦 Start from Template
|
|
</button>
|
|
<button id="tab-scratch" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
|
⚙️ Build from Scratch
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div id="tab-content-templates" class="py-5">
|
|
<p class="text-gray-600 mb-4">Get started instantly with a pre-built automation.</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Template 1 -->
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<h4 class="font-bold text-lg">Smart Candidate Intake</h4>
|
|
<p class="text-sm text-gray-600 my-2">Trigger: When a new candidate is created.</p>
|
|
<form method="POST">
|
|
<input type="hidden" name="add_workflow" value="1">
|
|
<input type="hidden" name="creation_type" value="template">
|
|
<input type="hidden" name="template_name" value="smart_candidate_intake">
|
|
<button type="submit" class="w-full bg-gray-100 text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-200">Use Template</button>
|
|
</form>
|
|
</div>
|
|
<!-- Template 2 -->
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<h4 class="font-bold text-lg">Interview Scheduling</h4>
|
|
<p class="text-sm text-gray-600 my-2">Trigger: When candidate status is "Interview".</p>
|
|
<form method="POST">
|
|
<input type="hidden" name="add_workflow" value="1">
|
|
<input type="hidden" name="creation_type" value="template">
|
|
<input type="hidden" name="template_name" value="interview_scheduling">
|
|
<button type="submit" class="w-full bg-gray-100 text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-200">Use Template</button>
|
|
</form>
|
|
</div>
|
|
<!-- Template 3 -->
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<h4 class="font-bold text-lg">Onboarding Automation</h4>
|
|
<p class="text-sm text-gray-600 my-2">Trigger: When a candidate is hired.</p>
|
|
<form method="POST">
|
|
<input type="hidden" name="add_workflow" value="1">
|
|
<input type="hidden" name="creation_type" value="template">
|
|
<input type="hidden" name="template_name" value="onboarding_automation">
|
|
<button type="submit" class="w-full bg-gray-100 text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-200">Use Template</button>
|
|
</form>
|
|
</div>
|
|
<!-- Template 4 -->
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<h4 class="font-bold text-lg">Weekly Reports</h4>
|
|
<p class="text-sm text-gray-600 my-2">Trigger: Weekly on Friday at 4pm.</p>
|
|
<form method="POST">
|
|
<input type="hidden" name="add_workflow" value="1">
|
|
<input type="hidden" name="creation_type" value="template">
|
|
<input type="hidden" name="template_name" value="weekly_reports">
|
|
<button type="submit" class="w-full bg-gray-100 text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-200">Use Template</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-content-scratch" class="hidden py-5">
|
|
<form id="addWorkflowForm" method="POST">
|
|
<input type="hidden" name="add_workflow" value="1">
|
|
<input type="hidden" name="creation_type" value="scratch">
|
|
<input type="hidden" id="trigger_event" name="trigger_event">
|
|
<input type="hidden" id="trigger_condition" name="trigger_condition">
|
|
|
|
<div class="mb-4">
|
|
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Workflow Name</label>
|
|
<input type="text" id="name" name="name" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="e.g., 'Notify team on new hire'">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Trigger</label>
|
|
<div id="trigger-dropdown" class="relative">
|
|
<button type="button" id="trigger-dropdown-button" class="text-left shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline flex justify-between items-center">
|
|
<span id="trigger-selected-text">Select a trigger</span>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</button>
|
|
<div id="trigger-dropdown-options" class="absolute z-10 mt-1 w-full bg-white shadow-lg border rounded-md max-h-60 overflow-y-auto hidden trigger-dropdown-options"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="conditional-inputs" class="mb-4 space-y-4"></div>
|
|
|
|
<div class="flex items-center justify-end pt-4 border-t">
|
|
<button type="button" onclick="closeModal('addWorkflowModal')" class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 mr-2">Cancel</button>
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Save Workflow</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Header dropdowns
|
|
const userMenuButton = document.getElementById('user-menu-button');
|
|
const userMenu = document.getElementById('user-menu');
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (userMenuButton) {
|
|
userMenuButton.addEventListener('click', () => {
|
|
const isExpanded = userMenuButton.getAttribute('aria-expanded') === 'true';
|
|
userMenuButton.setAttribute('aria-expanded', !isExpanded);
|
|
userMenu.classList.toggle('hidden');
|
|
});
|
|
}
|
|
if (mobileMenuButton) {
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
|
|
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
|
|
mobileMenu.classList.toggle('hidden');
|
|
// Toggle icons
|
|
mobileMenuButton.querySelector('svg.block').classList.toggle('hidden');
|
|
mobileMenuButton.querySelector('svg.hidden').classList.toggle('hidden');
|
|
});
|
|
}
|
|
|
|
// Close dropdowns when clicking outside
|
|
document.addEventListener('click', (event) => {
|
|
if (userMenu && userMenuButton && !userMenu.classList.contains('hidden') && !userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
|
|
userMenu.classList.add('hidden');
|
|
userMenuButton.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
|
|
// Modal and Tab JS
|
|
const tabTemplates = document.getElementById('tab-templates');
|
|
const tabScratch = document.getElementById('tab-scratch');
|
|
const contentTemplates = document.getElementById('tab-content-templates');
|
|
const contentScratch = document.getElementById('tab-content-scratch');
|
|
|
|
if (tabTemplates) {
|
|
tabTemplates.addEventListener('click', () => {
|
|
tabTemplates.classList.add('border-blue-500', 'text-blue-600');
|
|
tabTemplates.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
|
|
tabScratch.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
|
|
tabScratch.classList.remove('border-blue-500', 'text-blue-600');
|
|
contentTemplates.classList.remove('hidden');
|
|
contentScratch.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
if (tabScratch) {
|
|
tabScratch.addEventListener('click', () => {
|
|
tabScratch.classList.add('border-blue-500', 'text-blue-600');
|
|
tabScratch.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
|
|
tabTemplates.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
|
|
tabTemplates.classList.remove('border-blue-500', 'text-blue-600');
|
|
contentScratch.classList.remove('hidden');
|
|
contentTemplates.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
function openModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal(modalId) {
|
|
document.getElementById(modalId).classList.add('hidden');
|
|
}
|
|
|
|
// Trigger Dropdown JS
|
|
const triggers = {
|
|
"📋 CANDIDATE EVENTS": [
|
|
{ id: "candidate_created", text: "New Candidate Created" },
|
|
{ id: "candidate_status_changed", text: "Candidate Status Changed", condition: { type: "select", name: "status", options: ["Screening", "Interviewing", "Offered", "Hired", "Rejected"] } },
|
|
{ id: "candidate_email_received", text: "Candidate Email Received" },
|
|
{ id: "application_form_submitted", text: "Application Form Submitted" },
|
|
{ id: "candidate_inactive_days", text: "Candidate Inactive for X Days", condition: { type: "number", name: "days", placeholder: "e.g., 30" } },
|
|
],
|
|
"📅 INTERVIEW EVENTS": [
|
|
{ id: "interview_scheduled", text: "Interview Scheduled" },
|
|
{ id: "interview_completed", text: "Interview Completed" },
|
|
{ id: "interview_feedback_received", text: "Interview Feedback Received" },
|
|
{ id: "interview_cancelled", text: "Interview Cancelled" },
|
|
],
|
|
"✅ TASK EVENTS": [
|
|
{ id: "task_created", text: "New Task Created" },
|
|
{ id: "task_completed", text: "Task Completed" },
|
|
{ id: "task_overdue", text: "Task Overdue" },
|
|
{ id: "task_assigned", text: "Task Assigned to User", condition: { type: "select", name: "user_id", options: ["User 1", "User 2"] } },
|
|
],
|
|
"🎉 ONBOARDING EVENTS": [
|
|
{ id: "candidate_hired", text: "Candidate Hired (status = Hired)" },
|
|
{ id: "onboarding_task_completed", text: "Onboarding Task Completed" },
|
|
{ id: "onboarding_50_complete", text: "Onboarding 50% Complete" },
|
|
{ id: "onboarding_100_complete", text: "Onboarding 100% Complete" },
|
|
{ id: "new_hire_starts_tomorrow", text: "New Hire Starts Tomorrow" },
|
|
],
|
|
"⏰ SCHEDULE (TIME-BASED)": [
|
|
{ id: "schedule_daily", text: "Daily at", condition: { type: "time", name: "time" } },
|
|
{ id: "schedule_weekly", text: "Weekly on", condition: { type: "select", name: "day", options: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] } },
|
|
{ id: "schedule_monthly", text: "Monthly on", condition: { type: "date", name: "date" } },
|
|
{ id: "schedule_interval", text: "Every X hours", condition: { type: "number", name: "hours", placeholder: "e.g., 4" } },
|
|
],
|
|
"💾 DATABASE CHANGES": [
|
|
{ id: "db_new_row", text: "New Row in", condition: { type: "select", name: "table", options: ["candidates", "tasks", "users"] } },
|
|
{ id: "db_row_updated", text: "Row Updated in", condition: { type: "select", name: "table", options: ["candidates", "tasks", "users"] } },
|
|
{ id: "db_field_changed", text: "Specific Field Changed", condition: { type: "text", name: "field", placeholder: "e.g., candidates.status" } },
|
|
]
|
|
};
|
|
|
|
const triggerDropdown = document.getElementById('trigger-dropdown');
|
|
const dropdownButton = document.getElementById('trigger-dropdown-button');
|
|
const dropdownOptions = document.getElementById('trigger-dropdown-options');
|
|
const selectedText = document.getElementById('trigger-selected-text');
|
|
const conditionalInputsContainer = document.getElementById('conditional-inputs');
|
|
const form = document.getElementById('addWorkflowForm');
|
|
const triggerEventInput = document.getElementById('trigger_event');
|
|
const triggerConditionInput = document.getElementById('trigger_condition');
|
|
|
|
function renderOptions(filter = '') {
|
|
let content = '<div class="p-2"><input type="text" id="trigger-search" class="w-full px-3 py-2 border rounded-md" placeholder="Search triggers..." value="' + filter + '"></div>';
|
|
filter = filter.toLowerCase();
|
|
|
|
for (const category in triggers) {
|
|
const filteredItems = triggers[category].filter(item => item.text.toLowerCase().includes(filter));
|
|
if (filteredItems.length > 0) {
|
|
content += `<div class="px-3 py-2 text-xs font-bold text-gray-500 uppercase">${category}</div>`;
|
|
filteredItems.forEach(item => {
|
|
content += `<div class="px-4 py-2 cursor-pointer hover:bg-gray-100" data-id="${item.id}">${item.text}</div>`;
|
|
});
|
|
}
|
|
}
|
|
dropdownOptions.innerHTML = content;
|
|
|
|
dropdownOptions.querySelector('#trigger-search').addEventListener('input', (e) => renderOptions(e.target.value));
|
|
dropdownOptions.querySelectorAll('[data-id]').forEach(el => {
|
|
el.addEventListener('click', () => {
|
|
const category = Object.keys(triggers).find(cat => triggers[cat].some(i => i.id === el.dataset.id));
|
|
const item = triggers[category].find(i => i.id === el.dataset.id);
|
|
selectOption(item);
|
|
});
|
|
});
|
|
}
|
|
|
|
function selectOption(item) {
|
|
selectedText.textContent = item.text;
|
|
triggerEventInput.value = item.id;
|
|
dropdownOptions.classList.add('hidden');
|
|
renderConditionalInputs(item.condition);
|
|
}
|
|
|
|
function renderConditionalInputs(condition) {
|
|
conditionalInputsContainer.innerHTML = '';
|
|
if (!condition) {
|
|
triggerConditionInput.value = '';
|
|
return;
|
|
}
|
|
// ... (rest of the conditional input logic is complex and better handled on the server or with a more robust framework)
|
|
}
|
|
|
|
if (dropdownButton) {
|
|
dropdownButton.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
dropdownOptions.classList.toggle('hidden');
|
|
if (!dropdownOptions.classList.contains('hidden')) {
|
|
renderOptions();
|
|
dropdownOptions.querySelector('#trigger-search').focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (triggerDropdown && !triggerDropdown.contains(e.target)) {
|
|
if (dropdownOptions) {
|
|
dropdownOptions.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
|
|
if(form) {
|
|
form.addEventListener('submit', () => {
|
|
const condition = {};
|
|
const inputs = conditionalInputsContainer.querySelectorAll('input, select');
|
|
if (inputs.length > 0) {
|
|
inputs.forEach(input => {
|
|
condition[input.name] = input.value;
|
|
});
|
|
triggerConditionInput.value = JSON.stringify(condition);
|
|
} else {
|
|
triggerConditionInput.value = '';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|