264 lines
14 KiB
PHP
264 lines
14 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
|
|
// Fetch all processes from the database
|
|
$processes = [];
|
|
try {
|
|
$pdo = db();
|
|
$stmt = $pdo->query("SELECT id, name, description, created_at FROM processes ORDER BY created_at DESC");
|
|
$processes = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
} catch (PDOException $e) {
|
|
// Silently log error, or display a friendly message.
|
|
error_log("DB Error: " . $e->getMessage());
|
|
}
|
|
|
|
$project_name = htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'ProcessFlow Optimizer');
|
|
$project_description = htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'Analyze and optimize your business processes.');
|
|
$project_image_url = htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '');
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo $project_name; ?></title>
|
|
<meta name="description" content="<?php echo $project_description; ?>">
|
|
<!-- Open Graph / Twitter Meta Tags -->
|
|
<meta property="og:title" content="<?php echo $project_name; ?>">
|
|
<meta property="og:description" content="<?php echo $project_description; ?>">
|
|
<meta property="og:image" content="<?php echo $project_image_url; ?>">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="<?php echo $project_name; ?>">
|
|
<meta name="twitter:description" content="<?php echo $project_description; ?>">
|
|
<meta name="twitter:image" content="<?php echo $project_image_url; ?>">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<script src="https://unpkg.com/feather-icons"></script>
|
|
</head>
|
|
<body class="bg-light">
|
|
<div id="message-area" class="container mt-4">
|
|
<?php
|
|
if (isset($_GET['success'])) {
|
|
$message = '';
|
|
switch ($_GET['success']) {
|
|
case 'processadded':
|
|
$message = 'Process added successfully!';
|
|
break;
|
|
case 'processupdated':
|
|
$message = 'Process updated successfully!';
|
|
break;
|
|
case 'processdeleted':
|
|
$message = 'Process deleted successfully!';
|
|
break;
|
|
default:
|
|
$message = 'Action successful!';
|
|
}
|
|
echo '<div class="alert alert-success alert-dismissible fade show" role="alert">' . $message . '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
|
|
}
|
|
|
|
if (isset($_GET['error'])) {
|
|
$message = '';
|
|
switch ($_GET['error']) {
|
|
case 'emptyfields':
|
|
$message = 'Please fill in all fields.';
|
|
break;
|
|
case 'dberror':
|
|
$message = 'A database error occurred. Please try again.';
|
|
break;
|
|
case 'deletionfailed':
|
|
$message = 'Failed to delete process. Please try again.';
|
|
break;
|
|
case 'invalidrequest':
|
|
$message = 'Invalid request.';
|
|
break;
|
|
case 'processnotfound':
|
|
$message = 'Process not found.';
|
|
break;
|
|
default:
|
|
$message = 'An error occurred. Please try again.';
|
|
}
|
|
echo '<div class="alert alert-danger alert-dismissible fade show" role="alert">' . $message . '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
<header class="header">
|
|
<div class="container">
|
|
<h1 class="h3 mb-0"><?php echo $project_name; ?></h1>
|
|
<p class="text-muted mb-0">A business process analyzer and automated optimizer</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container py-5">
|
|
<div class="row g-5">
|
|
<!-- Left Column: Form -->
|
|
<div class="col-lg-5">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4">
|
|
<h2 class="h4 card-title fw-bold">Map a New Process</h2>
|
|
<p class="card-subtitle mb-4 text-muted">Define a process to begin analysis.</p>
|
|
<form action="add_process.php" method="POST" id="addProcessForm">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Process Name</label>
|
|
<input type="text" class="form-control" id="name" name="name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Description</label>
|
|
<textarea class="form-control" id="description" name="description" rows="4" required></textarea>
|
|
</div>
|
|
<div class="mb-3 text-end">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="aiSuggestBtn">
|
|
<span id="aiSuggestSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
|
|
Suggest with AI
|
|
</button>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100">Add Process</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Process List -->
|
|
<div class="col-lg-7">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4">
|
|
<h2 class="h4 card-title fw-bold">Existing Processes</h2>
|
|
<?php if (empty($processes)): ?>
|
|
<div class="text-center py-5">
|
|
<i data-feather="search" class="text-muted mb-3" style="width: 48px; height: 48px;"></i>
|
|
<p class="text-muted">No processes defined yet. <br> Use the form to add your first process.</p>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="list-group list-group-flush">
|
|
<?php foreach ($processes as $process): ?>
|
|
<div class="list-group-item px-0">
|
|
<div class="d-flex w-100 justify-content-between align-items-start">
|
|
<div>
|
|
<h5 class="mb-1 fw-bold"><?php echo htmlspecialchars($process['name']); ?></h5>
|
|
<small class="text-muted"><?php echo date("M d, Y", strtotime($process['created_at'])); ?></small>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<form action="edit_process.php" method="GET" class="me-2">
|
|
<input type="hidden" name="id" value="<?php echo $process['id']; ?>">
|
|
<button type="submit" class="btn btn-sm btn-outline-primary" title="Edit Process">
|
|
<i data-feather="edit" style="width: 16px; height: 16px;"></i>
|
|
</button>
|
|
</form>
|
|
<form id="deleteForm-<?php echo $process['id']; ?>" action="delete_process.php" method="POST" style="display:none;">
|
|
<input type="hidden" name="id" value="<?php echo $process['id']; ?>">
|
|
</form>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" title="Delete Process" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal" data-bs-id="<?php echo $process['id']; ?>">
|
|
<i data-feather="trash-2" style="width: 16px; height: 16px;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="mb-1 text-muted"><?php echo htmlspecialchars($process['description']); ?></p>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="text-center py-4 text-muted">
|
|
<p>© <?php echo date("Y"); ?> <?php echo $project_name; ?>. All rights reserved.</p>
|
|
</footer>
|
|
|
|
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to delete this process? This action cannot be undone.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Client-side validation for the Add Process form
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var form = document.getElementById('addProcessForm');
|
|
if (form) {
|
|
form.addEventListener('submit', function(event) {
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
}
|
|
});
|
|
|
|
feather.replace()
|
|
|
|
// AI Suggestion Feature
|
|
const aiSuggestBtn = document.getElementById('aiSuggestBtn');
|
|
const aiSuggestSpinner = document.getElementById('aiSuggestSpinner');
|
|
const processNameInput = document.getElementById('name');
|
|
const processDescriptionInput = document.getElementById('description');
|
|
const messageArea = document.getElementById('message-area');
|
|
|
|
if (aiSuggestBtn) {
|
|
aiSuggestBtn.addEventListener('click', async () => {
|
|
aiSuggestBtn.disabled = true;
|
|
aiSuggestSpinner.classList.remove('d-none');
|
|
messageArea.innerHTML = ''; // Clear previous messages
|
|
|
|
const keyword = processNameInput.value.trim();
|
|
const queryParam = keyword ? `?keyword=${encodeURIComponent(keyword)}` : '';
|
|
|
|
try {
|
|
const response = await fetch(`api/generate_process_suggestion.php${queryParam}`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
processNameInput.value = data.data.name;
|
|
processDescriptionInput.value = data.data.description;
|
|
messageArea.innerHTML = '<div class="alert alert-success alert-dismissible fade show" role="alert">AI suggestion generated successfully!<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
|
|
} else {
|
|
messageArea.innerHTML = `<div class="alert alert-danger alert-dismissible fade show" role="alert">Failed to get AI suggestion: ${data.error}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>`;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching AI suggestion:', error);
|
|
messageArea.innerHTML = '<div class="alert alert-danger alert-dismissible fade show" role="alert">An error occurred while fetching AI suggestion. Please try again.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
|
|
} finally {
|
|
aiSuggestBtn.disabled = false;
|
|
aiSuggestSpinner.classList.add('d-none');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<script>
|
|
// JavaScript for handling the delete confirmation modal
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var confirmDeleteModal = document.getElementById('confirmDeleteModal');
|
|
var confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
|
|
|
|
confirmDeleteModal.addEventListener('show.bs.modal', function (event) {
|
|
// Button that triggered the modal
|
|
var button = event.relatedTarget;
|
|
// Extract info from data-bs-id attributes
|
|
var processId = button.getAttribute('data-bs-id');
|
|
|
|
// Update the modal's delete button to point to the correct delete_process.php with the processId
|
|
confirmDeleteBtn.onclick = function() {
|
|
document.getElementById('deleteForm-' + processId).submit();
|
|
};
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|