From 3776a03a8f3b0174bcdc4fe798dd6b9f78ea5478 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Fri, 2 Jan 2026 12:05:37 +0000
Subject: [PATCH] mvp.9

---
 index.php        |   3 +
 view_process.php | 163 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 166 insertions(+)
 create mode 100644 view_process.php
diff --git a/index.php b/index.php
index 2ca2ceb..e979ddd 100644
--- a/index.php
+++ b/index.php
@@ -221,6 +221,9 @@ $project_image_url = htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '');
                                                 <small class="text-muted"><?php echo date("M d, Y", strtotime($process['created_at'])); ?></small>
                                             </div>
                                             <div class="d-flex align-items-center">
+                                                <a href="view_process.php?id=<?php echo $process['id']; ?>" class="btn btn-sm btn-outline-info me-2" title="View Process">
+                                                    <i data-feather="eye" style="width: 16px; height: 16px;"></i>
+                                                </a>
                                                 <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">
diff --git a/view_process.php b/view_process.php
new file mode 100644
index 0000000..484d30d
--- /dev/null
+++ b/view_process.php
@@ -0,0 +1,163 @@
+<?php
+require_once 'db/config.php';
+
+$process = null;
+$error_message = '';
+
+if (isset($_GET['id']) && is_numeric($_GET['id'])) {
+    $id = (int)$_GET['id'];
+    try {
+        $pdo = db();
+        $stmt = $pdo->prepare("SELECT id, name, description, created_at FROM processes WHERE id = :id");
+        $stmt->bindParam(':id', $id, PDO::PARAM_INT);
+        $stmt->execute();
+        $process = $stmt->fetch(PDO::FETCH_ASSOC);
+
+        if (!$process) {
+            $error_message = 'Process not found.';
+        }
+
+    } catch (PDOException $e) {
+        error_log("DB Error: " . $e->getMessage());
+        $error_message = 'A database error occurred. Please try again later.';
+    }
+} else {
+    $error_message = 'Invalid process ID.';
+}
+
+$page_title = $process ? htmlspecialchars($process['name']) . ' Details' : 'Process Details';
+$page_description = $process ? 'Details for process: ' . htmlspecialchars($process['name']) . '. ' . htmlspecialchars($process['description']) : 'View details of a specific process.';
+
+$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 $page_title; ?></title>
+    <meta name="description" content="<?php echo $page_description; ?>">
+    <!-- Open Graph / Twitter Meta Tags -->
+    <meta property="og:title" content="<?php echo $page_title; ?>">
+    <meta property="og:description" content="<?php echo $page_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 $page_title; ?>">
+    <meta name="twitter:description" content="<?php echo $page_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">
+    <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="card shadow-sm mb-4">
+            <div class="card-body p-4">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h2 class="h4 card-title fw-bold mb-0"><?php echo $page_title; ?></h2>
+                    <a href="index.php" class="btn btn-outline-secondary btn-sm">
+                        <i data-feather="arrow-left" style="width: 16px; height: 16px;"></i> Back to List
+                    </a>
+                </div>
+
+                <?php if ($error_message): ?>
+                    <div class="alert alert-danger" role="alert">
+                        <?php echo htmlspecialchars($error_message); ?>
+                    </div>
+                <?php elseif ($process): ?>
+                    <dl class="row">
+                        <dt class="col-sm-3">ID:</dt>
+                        <dd class="col-sm-9"><?php echo htmlspecialchars($process['id']); ?></dd>
+
+                        <dt class="col-sm-3">Name:</dt>
+                        <dd class="col-sm-9"><?php echo htmlspecialchars($process['name']); ?></dd>
+
+                        <dt class="col-sm-3">Description:</dt>
+                        <dd class="col-sm-9"><?php echo nl2br(htmlspecialchars($process['description'])); ?></dd>
+
+                        <dt class="col-sm-3">Created At:</dt>
+                        <dd class="col-sm-9"><?php echo date("M d, Y H:i:s", strtotime($process['created_at'])); ?></dd>
+                    </dl>
+                    <div class="mt-4 text-end">
+                        <a href="edit_process.php?id=<?php echo $process['id']; ?>" class="btn btn-primary me-2">
+                            <i data-feather="edit" style="width: 16px; height: 16px;"></i> Edit Process
+                        </a>
+                        <button type="button" class="btn btn-danger" 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> Delete Process
+                        </button>
+                    </div>
+                <?php endif; ?>
+
+            </div>
+        </div>
+    </main>
+
+    <footer class="text-center py-4 text-muted">
+        <p>&copy; <?php echo date("Y"); ?> <?php echo $project_name; ?>. All rights reserved.</p>
+    </footer>
+
+    <!-- Delete Confirmation Modal (identical to index.php for consistency) -->
+    <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>
+        feather.replace()
+
+        // 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() {
+                    // Create a form dynamically to submit POST request
+                    var form = document.createElement('form');
+                    form.setAttribute('method', 'POST');
+                    form.setAttribute('action', 'delete_process.php');
+
+                    var hiddenField = document.createElement('input');
+                    hiddenField.setAttribute('type', 'hidden');
+                    hiddenField.setAttribute('name', 'id');
+                    hiddenField.setAttribute('value', processId);
+
+                    form.appendChild(hiddenField);
+                    document.body.appendChild(form);
+                    form.submit();
+                };
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
