1#@!#!123s

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

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

// Handle deletion if ?delete=id is passed
if (isset($_GET['delete'])) {
    $delete_id = intval($_GET['delete']);
    $delete_query = "DELETE FROM categories WHERE id = $delete_id";
    if (mysqli_query($conn, $delete_query)) {
        $success_message = "Category deleted successfully.";
    } else {
        $error_message = "Failed to delete category: " . mysqli_error($conn);
    }
}

// Fetch categories from the database
$query = "SELECT id, category_name, category_description, created_at FROM categories";
$result = mysqli_query($conn, $query);
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Category Dashboard</title>
    <?php include 'style.php'; ?>
    <style>
        /* style.php - Modern Dashboard CSS */
        :root {
            --primary: #6c5ce7;
            --primary-light: #a29bfe;
            --secondary: #00cec9;
            --dark: #2d3436;
            --light: #f5f6fa;
            --gray: #dfe6e9;
            --success: #00b894;
            --warning: #fdcb6e;
            --danger: #d63031;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #f8fafc;
            color: var(--dark);
            line-height: 1.6;
        }

        /* Main Layout */
        .main-wrapper {
            display: flex;
            min-height: 100vh;
        }

        .page-wrapper {
            flex: 1;
            padding-top: 60px;
            background-color: #f8fafc;
        }

        .dashboard-container {
            padding: 2rem;
        }

        /* Cards */
        .main-card {
            background: white;
            border-radius: 16px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: var(--transition);
        }

        .main-card:hover {
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .main-header {
            padding: 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .main-header h5 {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
            color: var(--dark);
        }

        .card-body {
            padding: 1.5rem;
        }

        /* Category Grid */
        .category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .category-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
        }

        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(108, 92, 231, 0.15);
            border-color: var(--primary-light);
        }

        .card-header {
            padding: 1.25rem;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
        }

        .card-header h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .card-body {
            padding: 1.25rem;
            flex: 1;
        }

        .card-body p {
            margin: 0;
            color: #64748b;
            font-size: 0.9rem;
        }

        .card-footer {
            padding: 1rem 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.02);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .created-at {
            display: flex;
            align-items: center;
            font-size: 0.8rem;
            color: #64748b;
        }

        .created-at i {
            margin-right: 6px;
            font-size: 0.9rem;
        }

        /* Badges */
        .badge {
            display: inline-block;
            padding: 0.35em 0.65em;
            font-size: 0.75em;
            font-weight: 600;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 50px;
            background-color: var(--success);
            color: white;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            grid-column: 1 / -1;
        }

        .empty-state-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(108, 92, 231, 0.1);
            border-radius: 50%;
            color: var(--primary);
            font-size: 2rem;
        }

        .empty-state h4 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }

        .empty-state p {
            color: #64748b;
            max-width: 400px;
            margin: 0 auto;
        }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .category-card {
            animation: fadeIn 0.4s ease-out forwards;
            opacity: 0;
        }

        .category-card:nth-child(1) {
            animation-delay: 0.1s;
        }

        .category-card:nth-child(2) {
            animation-delay: 0.2s;
        }

        .category-card:nth-child(3) {
            animation-delay: 0.3s;
        }

        .category-card:nth-child(4) {
            animation-delay: 0.4s;
        }

        .category-card:nth-child(5) {
            animation-delay: 0.5s;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .dashboard-container {
                padding: 1rem;
            }

            .category-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Modern Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-light);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }
    </style>
</head>

<body>

    <!-- Main Wrapper -->
    <div class="main-wrapper">

        <!-- Header -->
        <?php include 'header.php'; ?>
        <!-- /Header -->

        <!-- Sidebar -->
        <?php include 'sidebar.php'; ?>
        <!-- /Sidebar -->

        <!-- Page Wrapper -->
        <div class="page-wrapper">
            <div class="content container-fluid dashboard-container">

                <div class="main-card">
                    <div class="main-header">
                        <h5>Category Management</h5>
                        <?php if (!empty($success_message)): ?>
                            <div class="alert alert-success"><?php echo $success_message; ?></div>
                        <?php elseif (!empty($error_message)): ?>
                            <div class="alert alert-danger"><?php echo $error_message; ?></div>
                        <?php endif; ?>
                    </div>
                    <div class="card-body">
                        <div class="category-grid">
                            <?php if (mysqli_num_rows($result) > 0): ?>
                                <?php while ($row = mysqli_fetch_assoc($result)): ?>
                                    <div class="category-card">
                                        <div class="card-header">
                                            <h3><?php echo htmlspecialchars($row['category_name']); ?></h3>
                                        </div>
                                        <div class="card-body">
                                            <p><?php echo htmlspecialchars($row['category_description']); ?></p>
                                        </div>
                                        <div class="card-footer d-flex justify-content-between align-items-center">
                                            <div class="created-at">
                                                <i class="fe fe-calendar"></i>
                                                <?php echo date('M j, Y', strtotime($row['created_at'])); ?>
                                            </div>
                                            <div class="action-buttons">
                                                <a href="edit_category.php?id=<?php echo $row['id']; ?>" class="btn btn-sm btn-primary">Edit</a>
                                                <a href="my_categories.php?delete=<?php echo $row['id']; ?>" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this category?');">Delete</a>
                                            </div>
                                        </div>
                                    </div>
                                <?php endwhile; ?>
                            <?php else: ?>
                                <div class="empty-state">
                                    <div class="empty-state-icon">
                                        <i class="fe fe-folder"></i>
                                    </div>
                                    <h4>No Categories Found</h4>
                                    <p>Create your first category to start organizing content</p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- /Page Wrapper -->

    </div>
    <!-- /Main Wrapper -->

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

</html>