1#@!#!123s

: / home3 / encodto1 / inventory.tapaslights.com / tapaslights /
Filename : my_projects.php
back
<?php 
require 'config.php';

// Initialize variables
$error_message = '';
$success_message = '';

// Check for success/error messages from other pages
if (isset($_GET['success'])) {
    $success_message = htmlspecialchars($_GET['success']);
}
if (isset($_GET['error'])) {
    $error_message = htmlspecialchars($_GET['error']);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Projects</title>
    <?php include 'style.php'; ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background-color: #f4f6f9;
            margin: 0;
        }

        .page-wrapper {
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        .card-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: flex-start;
        }

        .project-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            width: 320px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .project-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

        .project-header {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: #fff;
            padding: 20px;
            position: relative;
        }

        .project-header h2 {
            margin: 0;
            font-size: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .toggle-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            position: absolute;
            bottom: 15px;
            right: 20px;
        }

        .project-content {
            padding: 20px;
            flex-grow: 1;
        }

        .project-section {
            margin-bottom: 15px;
        }

        .project-section h4 {
            margin: 0 0 5px 0;
            font-size: 13px;
            color: #555;
            font-weight: 600;
        }

        .project-section p {
            margin: 0;
            font-size: 13px;
            color: #333;
            line-height: 1.4;
        }

        .project-footer {
            padding: 15px 20px;
            background-color: #f1f1f1;
            text-align: right;
            border-top: 1px solid #ddd;
        }

        .update-btn {
            background-color: #4e54c8;
            color: #fff;
            padding: 7px 14px;
            font-size: 13px;
            border: none;
            border-radius: 6px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            display: inline-block;
        }

        .update-btn:hover {
            background-color: #3a3fad;
        }

        .toggle-section {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        .toggle-section.open {
            max-height: 1000px;
        }

        .icon-text {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 5px;
        }

        .icon-text i {
            color: #666;
            min-width: 16px;
            text-align: center;
        }

        .progress-bar-container {
            background-color: #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            height: 10px;
            margin-top: 8px;
            position: relative;
        }

        .progress-bar {
            background: linear-gradient(90deg, #4e54c8, #8f94fb);
            height: 100%;
            transition: width 0.4s ease-in-out;
        }

        .progress-text {
            font-size: 12px;
            color: #333;
            text-align: right;
            margin-top: 4px;
            font-weight: 600;
        }

        .alert {
            padding: 12px 20px;
            border-radius: 4px;
            margin-bottom: 20px;
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .add-project-btn {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 20px;
            transition: background-color 0.3s;
        }

        .add-project-btn:hover {
            background-color: #218838;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #666;
            width: 100%;
        }

        .empty-state i {
            font-size: 50px;
            margin-bottom: 20px;
            color: #ccc;
        }

        @media (max-width: 768px) {
            .card-container {
                justify-content: center;
            }
            
            .project-card {
                width: 100%;
                max-width: 400px;
            }
        }
    </style>
</head>
<body>

<?php include 'header.php'; ?>
<?php include 'sidebar.php'; ?>

<div class="page-wrapper">
    <div class="content container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>All Projects</h1>
            <a href="create_project.php" class="add-project-btn">
                <i class="fas fa-plus"></i> Add New Project
            </a>
        </div>

        <?php if ($success_message): ?>
            <div class="alert alert-success"><?php echo $success_message; ?></div>
        <?php elseif ($error_message): ?>
            <div class="alert alert-danger"><?php echo $error_message; ?></div>
        <?php endif; ?>

        <div class="card-container">
            <?php
            $query = "SELECT * FROM projects ORDER BY created_at DESC";
            $result = mysqli_query($conn, $query);

            if ($result && mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    $projectId = htmlspecialchars($row['id']);
                    $projectName = htmlspecialchars($row['project_name']);
                    $location = htmlspecialchars($row['location']);
                    $contactPerson = htmlspecialchars($row['contact_person_name']);
                    $contactPhone = htmlspecialchars($row['contact_person_phone']);
                    $contactEmail = htmlspecialchars($row['contact_person_email']);
                    $engineerName = htmlspecialchars($row['project_engineer_name']);
                    $engineerPhone = htmlspecialchars($row['project_engineer_phone']);
                    $engineerEmail = htmlspecialchars($row['project_engineer_email']);
                    $estimatedValue = number_format($row['estimate_project_value'], 2);
                    $labours = htmlspecialchars($row['no_of_labours']);
                    $startDate = date('M d, Y', strtotime($row['project_start_date']));
                    $deadline = date('M d, Y', strtotime($row['project_deadline']));
                    $progress = intval($row['project_progress']); // Ensure this is a number
                    $works = nl2br(htmlspecialchars($row['list_of_works']));
                    
                    // Get completion status of each step
                    $steps_query = "SELECT step_name, is_completed FROM project_progress_steps WHERE project_id = $projectId";
                    $steps_result = mysqli_query($conn, $steps_query);
                    $completed_steps = [];
                    if ($steps_result) {
                        while ($step = mysqli_fetch_assoc($steps_result)) {
                            if ($step['is_completed']) {
                                $completed_steps[] = $step['step_name'];
                            }
                        }
                    }
            ?>
                    <div class="project-card">
                        <div class="project-header">
                            <h2><?= $projectName; ?></h2>
                            <button class="toggle-btn" onclick="toggleDetails('details<?= $projectId; ?>', this)">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="project-content">
                            <div class="project-section icon-text">
                                <i class="fas fa-map-marker-alt"></i>
                                <p><?= $location; ?></p>
                            </div>

                            <div class="project-section">
                                <h4>Progress</h4>
                                <div class="progress-bar-container">
                                    <div class="progress-bar" style="width: <?= $progress; ?>%;"></div>
                                </div>
                                <div class="progress-text">
                                    <?= $progress; ?>% Complete
                                    <?php if ($progress == 100): ?>
                                        <i class="fas fa-check-circle" style="color: #4CAF50; margin-left: 5px;"></i>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <div class="project-section">
                                <h4>Contact</h4>
                                <div class="icon-text"><i class="fas fa-user"></i><p><?= $contactPerson; ?></p></div>
                                <div class="icon-text"><i class="fas fa-phone"></i><p><?= $contactPhone; ?></p></div>
                                <div class="icon-text"><i class="fas fa-envelope"></i><p><?= $contactEmail; ?></p></div>
                            </div>

                            <div class="toggle-section" id="details<?= $projectId; ?>">
                                <div class="project-section">
                                    <h4>Project Details</h4>
                                    <div class="icon-text"><i class="fas fa-calendar-alt"></i><p>Started: <?= $startDate; ?></p></div>
                                    <div class="icon-text"><i class="fas fa-calendar-times"></i><p>Deadline: <?= $deadline; ?></p></div>
                                    <div class="icon-text"><i class="fas fa-users"></i><p>Labours: <?= $labours; ?></p></div>
                                    <div class="icon-text"><i class="fas fa-money-bill-wave"></i><p>Value: ₹<?= $estimatedValue; ?></p></div>
                                </div>

                                <div class="project-section">
                                    <h4>Engineer</h4>
                                    <div class="icon-text"><i class="fas fa-user-cog"></i><p><?= $engineerName ?: 'Not assigned'; ?></p></div>
                                    <div class="icon-text"><i class="fas fa-phone"></i><p><?= $engineerPhone ?: '--'; ?></p></div>
                                    <div class="icon-text"><i class="fas fa-envelope"></i><p><?= $engineerEmail ?: '--'; ?></p></div>
                                </div>

                                <div class="project-section">
                                    <h4>Completed Steps</h4>
                                    <?php if (!empty($completed_steps)): ?>
                                        <ul style="margin: 0; padding-left: 20px;">
                                            <?php foreach ($completed_steps as $step): ?>
                                                <li style="font-size: 13px; margin-bottom: 3px;">
                                                    <i class="fas fa-check-circle" style="color: #4CAF50;"></i> <?= htmlspecialchars($step); ?>
                                                </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    <?php else: ?>
                                        <p style="font-size: 13px; color: #666; margin: 0;">No steps completed yet</p>
                                    <?php endif; ?>
                                </div>

                                <div class="project-section">
                                    <h4>Works Description</h4>
                                    <p style="font-size: 13px;"><?= $works ?: 'No description provided'; ?></p>
                                </div>
                            </div>
                        </div>
                        <div class="project-footer">
                            <a href="edit_project.php?id=<?= $projectId; ?>" class="update-btn">
                                <i class="fas fa-edit"></i> Update
                            </a>
                        </div>
                    </div>
            <?php
                }
            } else {
                echo '
                <div class="empty-state">
                    <i class="fas fa-folder-open"></i>
                    <h3>No Projects Found</h3>
                    <p>You haven\'t created any projects yet. Click the "Add New Project" button to get started.</p>
                </div>';
            }
            ?>
        </div>
    </div>
</div>

<?php include 'footer.php'; ?>

<script>
    function toggleDetails(id, btn) {
        const section = document.getElementById(id);
        section.classList.toggle('open');
        btn.innerHTML = section.classList.contains('open') 
            ? '<i class="fas fa-chevron-up"></i>' 
            : '<i class="fas fa-chevron-down"></i>';
    }

    // Add animation to progress bars when they come into view
    document.addEventListener('DOMContentLoaded', function() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const progressBar = entry.target.querySelector('.progress-bar');
                    const width = progressBar.style.width;
                    progressBar.style.width = '0';
                    setTimeout(() => {
                        progressBar.style.width = width;
                    }, 100);
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.project-card').forEach(card => {
            observer.observe(card);
        });
    });
</script>

</body>
</html>