Add project management pages

templates/base_authenticated.html

@@ -55,6 +55,11 @@
               </a>
 
               {% if session.role == 'admin' %}
+              <a href="{{ url_for('projects') }}" 
+                 class="menu-item {% if request.endpoint in ['projects', 'create_project', 'edit_project'] %}active{% endif %}">
+                <i class="fas fa-folder"></i>
+                <span class="menu-text">Projects</span>
+              </a>
               <a href="{{ url_for('users') }}" class="menu-item">
                 <i class="fas fa-users"></i>
                 <span class="menu-text">Users</span>

templates/create_project.html

@@ -0,0 +1,159 @@
+{% extends "base.html" %}
+{% block title %}Create Project - QR Code Management{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/projects.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="projects-page">
+  <!-- Page Header -->
+  <div class="projects-header">
+    <div class="header-content">
+      <h1><i class="fas fa-folder-plus"></i> Create New Project</h1>
+      <p>Create a new project to organize your QR codes</p>
+    </div>
+    <div class="header-actions">
+      <a href="{{ url_for('projects') }}" class="btn btn-secondary">
+        <i class="fas fa-arrow-left"></i>
+        Back to Projects
+      </a>
+    </div>
+  </div>
+
+  <!-- Create Project Form -->
+  <div class="content-section">
+    <div class="section-header">
+      <h2><i class="fas fa-info-circle"></i> Project Information</h2>
+    </div>
+    
+    <div style="padding: 1.5rem;">
+      <form method="POST" id="createProjectForm">
+        <div style="max-width: 600px;">
+          <!-- Project Name -->
+          <div class="form-group" style="margin-bottom: 1.5rem;">
+            <label for="name" style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; font-size: 0.875rem;">
+              <i class="fas fa-tag"></i>
+              Project Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              required
+              maxlength="100"
+              placeholder="Enter project name"
+              style="width: 100%; padding: 0.75rem; border: 2px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; transition: all 0.2s ease-in-out; background-color: #ffffff;"
+            />
+            <span class="character-counter" id="nameCounter" style="position: absolute; bottom: -1.5rem; right: 0; font-size: 0.75rem; color: #6b7280;">0/100</span>
+          </div>
+
+          <!-- Project Description -->
+          <div class="form-group" style="margin-bottom: 1.5rem; position: relative;">
+            <label for="description" style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; font-size: 0.875rem;">
+              <i class="fas fa-align-left"></i>
+              Description (Optional)
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              rows="4"
+              maxlength="500"
+              placeholder="Enter project description (optional)"
+              style="width: 100%; padding: 0.75rem; border: 2px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; transition: all 0.2s ease-in-out; background-color: #ffffff; resize: vertical; min-height: 80px;"
+            ></textarea>
+            <span class="character-counter" id="descriptionCounter" style="position: absolute; bottom: -1.5rem; right: 0; font-size: 0.75rem; color: #6b7280;">0/500</span>
+            <small style="display: block; margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">
+              <i class="fas fa-info-circle"></i>
+              Provide a brief description of what this project is for
+            </small>
+          </div>
+
+          <!-- Form Actions -->
+          <div style="display: flex; justify-content: flex-start; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb;">
+            <a href="{{ url_for('projects') }}" class="btn btn-secondary" style="background: #f1f5f9; color: #475569; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease-in-out; border: 1px solid #cbd5e1;">
+              <i class="fas fa-arrow-left"></i>
+              Cancel
+            </a>
+            <button type="submit" class="btn btn-primary" id="submitBtn" style="background: #2563eb; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease-in-out; border: none; cursor: pointer;">
+              <i class="fas fa-plus"></i>
+              Create Project
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const form = document.getElementById("createProjectForm");
+  const submitBtn = document.getElementById("submitBtn");
+  
+  // Character counters
+  const counters = [
+    { input: "name", counter: "nameCounter", max: 100 },
+    { input: "description", counter: "descriptionCounter", max: 500 }
+  ];
+
+  counters.forEach((item) => {
+    const input = document.getElementById(item.input);
+    const counter = document.getElementById(item.counter);
+
+    if (input && counter) {
+      input.addEventListener("input", function () {
+        const length = this.value.length;
+        counter.textContent = `${length}/${item.max}`;
+
+        if (length > item.max * 0.9) {
+          counter.style.color = '#f59e0b';
+        } else {
+          counter.style.color = '#6b7280';
+        }
+      });
+      
+      // Focus styles
+      input.addEventListener("focus", function() {
+        this.style.borderColor = '#2563eb';
+        this.style.boxShadow = '0 0 0 3px rgba(37, 99, 235, 0.1)';
+      });
+      
+      input.addEventListener("blur", function() {
+        this.style.borderColor = '#d1d5db';
+        this.style.boxShadow = 'none';
+      });
+    }
+  });
+
+  // Form submission
+  form.addEventListener("submit", function (e) {
+    const name = document.getElementById("name").value.trim();
+    
+    if (!name) {
+      e.preventDefault();
+      alert("Project name is required");
+      return false;
+    }
+
+    // Show loading state
+    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating Project...';
+    submitBtn.disabled = true;
+    submitBtn.style.opacity = '0.7';
+  });
+  
+  // Add smooth animation on load
+  const contentSection = document.querySelector('.content-section');
+  contentSection.style.opacity = '0';
+  contentSection.style.transform = 'translateY(20px)';
+  
+  setTimeout(() => {
+    contentSection.style.transition = 'all 0.5s ease-out';
+    contentSection.style.opacity = '1';
+    contentSection.style.transform = 'translateY(0)';
+  }, 100);
+});
+</script>
+{% endblock %}

templates/create_qr_code.html

@@ -431,6 +431,25 @@
                 <span id="locationCounter">0/100</span>
               </div>
             </div>
+
+            <div class="form-group">
+              <label for="project_id">
+                <i class="fas fa-folder"></i>
+                Project (Optional)
+              </label>
+              <select id="project_id" name="project_id" class="form-select">
+                <option value="">Select a project (Optional)</option>
+                {% for project in projects %}
+                <option value="{{ project.id }}">
+                  {{ project.name }} ({{ project.qr_count }} QR codes)
+                </option>
+                {% endfor %}
+              </select>
+              <small class="form-help">
+                <i class="fas fa-info-circle"></i>
+                Organize your QR code by assigning it to a project
+              </small>
+            </div>
           </div>
 
           <!-- Location Details Section -->
@@ -541,17 +560,9 @@
           </div>
 
           <!-- Hidden coordinate fields for form submission -->
-          <input type="hidden" id="address_latitude" name="address_latitude" />
-          <input
-            type="hidden"
-            id="address_longitude"
-            name="address_longitude"
-          />
-          <input
-            type="hidden"
-            id="coordinate_accuracy"
-            name="coordinate_accuracy"
-          />
+          <input type="hidden" id="latitude" name="latitude" value="" />
+          <input type="hidden" id="longitude" name="longitude" value="" />
+          <input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy" value="" />
 
           <!-- Form Actions -->
           <div class="form-actions">
@@ -581,6 +592,7 @@
         initializeForm();
         initializeCharacterCounters();
         initializeCoordinatesFeature();
+        initializeProjectDropdown();
       });
 
       function initializeForm() {
@@ -730,12 +742,31 @@
       }
 
       function updateHiddenFields() {
-        document.getElementById("address_latitude").value =
-          coordinatesData.latitude || "";
-        document.getElementById("address_longitude").value =
-          coordinatesData.longitude || "";
-        document.getElementById("coordinate_accuracy").value =
-          coordinatesData.accuracy || "";
+        console.log("📝 Updating hidden coordinate fields");
+        
+        // Update hidden form fields with coordinate data
+        const latitudeField = document.getElementById("latitude");
+        const longitudeField = document.getElementById("longitude");
+        const accuracyField = document.getElementById("coordinate_accuracy");
+        
+        if (coordinatesData.latitude && coordinatesData.longitude) {
+          latitudeField.value = coordinatesData.latitude;
+          longitudeField.value = coordinatesData.longitude;
+          accuracyField.value = coordinatesData.accuracy || 'geocoded';
+          
+          console.log("✓ Hidden fields updated:", {
+            latitude: latitudeField.value,
+            longitude: longitudeField.value,
+            accuracy: accuracyField.value
+          });
+        } else {
+          // Clear fields if no coordinates
+          latitudeField.value = '';
+          longitudeField.value = '';
+          accuracyField.value = '';
+          
+          console.log("✓ Hidden fields cleared");
+        }
       }
 
       function clearCoordinates() {
@@ -745,11 +776,18 @@
           accuracy: null,
         };
 
-        updateCoordinatesDisplay();
+        // Clear display
+        document.getElementById("latitudeValue").textContent = "--";
+        document.getElementById("longitudeValue").textContent = "--";
+        document.getElementById("accuracyValue").textContent = "--";
+
+        // Clear hidden fields
         updateHiddenFields();
 
-        // Clear status
-        document.getElementById("coordinateStatus").innerHTML = "";
+        // Hide coordinates section
+        document.getElementById("coordinatesSection").style.display = "none";
+
+        console.log("🧹 Coordinates cleared");
       }
 
       function showStatus(type, message) {
@@ -776,47 +814,32 @@
       }
 
       function validateForm() {
-        const requiredFields = [
-          { id: "name", name: "QR Code Name" },
-          { id: "location", name: "Location Name" },
-          { id: "location_address", name: "Complete Address" },
-          { id: "location_event", name: "Event or Purpose" },
-        ];
+        const name = document.getElementById("name").value.trim();
+        const location = document.getElementById("location").value.trim();
+        const address = document.getElementById("location_address").value.trim();
 
-        let isValid = true;
+        if (!name || !location || !address) {
+          alert("Please fill in all required fields");
+          return false;
+        }
 
-        requiredFields.forEach((field) => {
-          const input = document.getElementById(field.id);
-          if (!input.value.trim()) {
-            showFieldError(input, `${field.name} is required`);
-            isValid = false;
-          } else {
-            clearFieldError(input);
+        // DEBUG: Log coordinates being submitted
+        const latitude = document.getElementById("latitude").value;
+        const longitude = document.getElementById("longitude").value;
+        const accuracy = document.getElementById("coordinate_accuracy").value;
+        
+        console.log("🚀 Form submission data:", {
+          name: name,
+          location: location,
+          address: address,
+          coordinates: {
+            latitude: latitude,
+            longitude: longitude,
+            accuracy: accuracy
           }
         });
 
-        // Additional validation
-        const name = document.getElementById("name").value.trim();
-        if (name && name.length < 3) {
-          showFieldError(
-            document.getElementById("name"),
-            "QR Code name must be at least 3 characters"
-          );
-          isValid = false;
-        }
-
-        const address = document
-          .getElementById("location_address")
-          .value.trim();
-        if (address && address.length < 10) {
-          showFieldError(
-            document.getElementById("location_address"),
-            "Please provide a complete address"
-          );
-          isValid = false;
-        }
-
-        return isValid;
+        return true;
       }
 
       function showFieldError(input, message) {
@@ -842,6 +865,23 @@
           errorElement.remove();
         }
       }
+
+      // Project dropdown functionality
+      function initializeProjectDropdown() {
+        const projectSelect = document.getElementById('project_id');
+        
+        if (projectSelect) {
+          // Load projects dynamically (optional enhancement)
+          // For now, projects are loaded server-side
+          projectSelect.addEventListener('change', function() {
+            const selectedOption = this.options[this.selectedIndex];
+            
+            if (selectedOption.value) {
+              console.log('Selected project:', selectedOption.text);
+            }
+          });
+        }
+      }
     </script>
   </body>
 </html>

templates/edit_project.html

@@ -0,0 +1,198 @@
+{% extends "base.html" %}
+{% block title %}Edit Project - QR Code Management{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/projects.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="projects-page">
+  <!-- Page Header -->
+  <div class="projects-header">
+    <div class="header-content">
+      <h1><i class="fas fa-folder-open"></i> Edit Project</h1>
+      <p>Update project information and settings</p>
+    </div>
+    <div class="header-actions">
+      <a href="{{ url_for('projects') }}" class="btn btn-secondary">
+        <i class="fas fa-arrow-left"></i>
+        Back to Projects
+      </a>
+    </div>
+  </div>
+
+  <!-- Current Project Info -->
+  <div class="content-section" style="margin-bottom: 1.5rem;">
+    <div class="section-header">
+      <h2><i class="fas fa-info-circle"></i> Current Project Information</h2>
+    </div>
+    
+    <div style="padding: 1.5rem;">
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; max-width: 800px;">
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <strong style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Project Name:</strong>
+          <span style="font-size: 0.9rem; color: #374151; word-break: break-word;">{{ project.name }}</span>
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <strong style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Description:</strong>
+          <span style="font-size: 0.9rem; color: #374151; word-break: break-word;">{{ project.description if project.description else 'No description provided' }}</span>
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <strong style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">QR Codes:</strong>
+          <span style="font-size: 0.9rem; color: #374151;">{{ project.qr_count }} active QR codes</span>
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <strong style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Created:</strong>
+          <span style="font-size: 0.9rem; color: #374151;">{{ project.created_date.strftime('%B %d, %Y at %I:%M %p') }}</span>
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <strong style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Status:</strong>
+          <span class="status-badge {% if project.active_status %}active{% else %}inactive{% endif %}">
+            {% if project.active_status %}Active{% else %}Inactive{% endif %}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Edit Project Form -->
+  <div class="content-section">
+    <div class="section-header">
+      <h2><i class="fas fa-edit"></i> Update Project Information</h2>
+    </div>
+    
+    <div style="padding: 1.5rem;">
+      <form method="POST" id="editProjectForm">
+        <div style="max-width: 600px;">
+          <!-- Project Name -->
+          <div class="form-group" style="margin-bottom: 1.5rem; position: relative;">
+            <label for="name" style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; font-size: 0.875rem;">
+              <i class="fas fa-tag"></i>
+              Project Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value="{{ project.name }}"
+              required
+              maxlength="100"
+              style="width: 100%; padding: 0.75rem; border: 2px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; transition: all 0.2s ease-in-out; background-color: #ffffff;"
+            />
+            <span class="character-counter" id="nameCounter" style="position: absolute; bottom: -1.5rem; right: 0; font-size: 0.75rem; color: #6b7280;">{{ project.name|length }}/100</span>
+          </div>
+
+          <!-- Project Description -->
+          <div class="form-group" style="margin-bottom: 1.5rem; position: relative;">
+            <label for="description" style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; font-size: 0.875rem;">
+              <i class="fas fa-align-left"></i>
+              Description (Optional)
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              rows="4"
+              maxlength="500"
+              style="width: 100%; padding: 0.75rem; border: 2px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; transition: all 0.2s ease-in-out; background-color: #ffffff; resize: vertical; min-height: 80px;"
+            >{{ project.description if project.description else '' }}</textarea>
+            <span class="character-counter" id="descriptionCounter" style="position: absolute; bottom: -1.5rem; right: 0; font-size: 0.75rem; color: #6b7280;">{{ (project.description|length) if project.description else 0 }}/500</span>
+            <small style="display: block; margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">
+              <i class="fas fa-info-circle"></i>
+              Provide a brief description of what this project is for
+            </small>
+          </div>
+
+          <!-- Form Actions -->
+          <div style="display: flex; justify-content: flex-start; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb;">
+            <a href="{{ url_for('projects') }}" class="btn btn-secondary" style="background: #f1f5f9; color: #475569; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease-in-out; border: 1px solid #cbd5e1;">
+              <i class="fas fa-arrow-left"></i>
+              Cancel
+            </a>
+            <button type="submit" class="btn btn-primary" id="submitBtn" style="background: #2563eb; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease-in-out; border: none; cursor: pointer;">
+              <i class="fas fa-save"></i>
+              Update Project
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const form = document.getElementById("editProjectForm");
+  const submitBtn = document.getElementById("submitBtn");
+  
+  // Character counters
+  const counters = [
+    { input: "name", counter: "nameCounter", max: 100 },
+    { input: "description", counter: "descriptionCounter", max: 500 }
+  ];
+
+  counters.forEach((item) => {
+    const input = document.getElementById(item.input);
+    const counter = document.getElementById(item.counter);
+
+    if (input && counter) {
+      input.addEventListener("input", function () {
+        const length = this.value.length;
+        counter.textContent = `${length}/${item.max}`;
+
+        if (length > item.max * 0.9) {
+          counter.style.color = '#f59e0b';
+        } else {
+          counter.style.color = '#6b7280';
+        }
+      });
+      
+      // Focus styles
+      input.addEventListener("focus", function() {
+        this.style.borderColor = '#2563eb';
+        this.style.boxShadow = '0 0 0 3px rgba(37, 99, 235, 0.1)';
+      });
+      
+      input.addEventListener("blur", function() {
+        this.style.borderColor = '#d1d5db';
+        this.style.boxShadow = 'none';
+      });
+    }
+  });
+
+  // Form submission
+  form.addEventListener("submit", function (e) {
+    const name = document.getElementById("name").value.trim();
+    
+    if (!name) {
+      e.preventDefault();
+      alert("Project name is required");
+      return false;
+    }
+
+    // Show loading state
+    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating Project...';
+    submitBtn.disabled = true;
+    submitBtn.style.opacity = '0.7';
+  });
+  
+  // Add smooth animation on load
+  const contentSections = document.querySelectorAll('.content-section');
+  contentSections.forEach((section, index) => {
+    section.style.opacity = '0';
+    section.style.transform = 'translateY(20px)';
+    
+    setTimeout(() => {
+      section.style.transition = 'all 0.5s ease-out';
+      section.style.opacity = '1';
+      section.style.transform = 'translateY(0)';
+    }, index * 100 + 100);
+  });
+});
+</script>
+{% endblock %}

templates/edit_qr_code.html

@@ -535,6 +535,30 @@
                   >
                 </div>
               </div>
+
+              <div class="form-group">
+                <label for="project_id">
+                  <i class="fas fa-folder"></i>
+                  Project (Optional)
+                </label>
+                <select id="project_id" name="project_id" class="form-select">
+                  <option value="">No project assigned</option>
+                  {% for project in projects %}
+                  <option value="{{ project.id }}" 
+                          {% if qr_code.project_id == project.id %}selected{% endif %}>
+                    {{ project.name }} ({{ project.qr_count }} QR codes)
+                  </option>
+                  {% endfor %}
+                </select>
+                <small class="form-help">
+                  <i class="fas fa-info-circle"></i>
+                  {% if qr_code.project %}
+                    Currently assigned to: <strong>{{ qr_code.project.name }}</strong>
+                  {% else %}
+                    This QR code is not assigned to any project
+                  {% endif %}
+                </small>
+              </div>
             </div>
 
             <!-- Location Details Section -->

templates/projects.html

@@ -0,0 +1,188 @@
+{% extends "base.html" %}
+{% block title %}Projects - QR Code Management{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/projects.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="projects-page">
+  <!-- Page Header -->
+  <div class="projects-header">
+    <div class="header-content">
+      <h1><i class="fas fa-folder"></i> Projects</h1>
+      <p>Organize and manage your QR code projects</p>
+    </div>
+    <div class="header-actions">
+      <a href="{{ url_for('create_project') }}" class="btn btn-primary">
+        <i class="fas fa-plus"></i>
+        Create Project
+      </a>
+    </div>
+  </div>
+
+  <!-- Project Statistics -->
+  <div class="project-stats">
+    <div class="stat-card">
+      <div class="stat-icon">
+        <i class="fas fa-folder"></i>
+      </div>
+      <div class="stat-info">
+        <h3>{{ projects|length }}</h3>
+        <p>Total Projects</p>
+      </div>
+    </div>
+
+    <div class="stat-card active">
+      <div class="stat-icon active">
+        <i class="fas fa-folder-open"></i>
+      </div>
+      <div class="stat-info">
+        <h3>{{ projects|selectattr('active_status', 'equalto', True)|list|length }}</h3>
+        <p>Active Projects</p>
+      </div>
+    </div>
+
+    <div class="stat-card">
+      <div class="stat-icon">
+        <i class="fas fa-qrcode"></i>
+      </div>
+      <div class="stat-info">
+        <h3>{{ projects|sum(attribute='total_qr_count') }}</h3>
+        <p>Total QR Codes</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Projects List -->
+  <div class="content-section">
+    <div class="section-header">
+      <h2><i class="fas fa-list"></i> All Projects</h2>
+    </div>
+
+    {% if projects %}
+    <div class="projects-grid">
+      {% for project in projects %}
+      <div class="project-card {% if not project.active_status %}inactive{% endif %}">
+        <div class="project-header">
+          <div class="project-info">
+            <h3>{{ project.name }}</h3>
+            <p class="project-description">
+              {% if project.description %}
+                {{ project.description[:100] }}{% if project.description|length > 100 %}...{% endif %}
+              {% else %}
+                No description provided
+              {% endif %}
+            </p>
+          </div>
+          <div class="project-status">
+            {% if project.active_status %}
+              <span class="status-badge active">Active</span>
+            {% else %}
+              <span class="status-badge inactive">Inactive</span>
+            {% endif %}
+          </div>
+        </div>
+
+        <div class="project-stats-section">
+          <div class="stat-item">
+            <i class="fas fa-qrcode"></i>
+            <span>{{ project.qr_count }} QR Codes</span>
+          </div>
+          <div class="stat-item">
+            <i class="fas fa-calendar"></i>
+            <span>{{ project.created_date.strftime('%b %d, %Y') }}</span>
+          </div>
+          <div class="stat-item">
+            <i class="fas fa-user"></i>
+            <span>{{ project.creator.full_name if project.creator else 'Unknown' }}</span>
+          </div>
+        </div>
+
+        <div class="project-actions">
+          <a href="{{ url_for('edit_project', project_id=project.id) }}" 
+             class="btn btn-secondary">
+            <i class="fas fa-edit"></i>
+            Edit
+          </a>
+          
+          <form method="POST" action="{{ url_for('toggle_project', project_id=project.id) }}" 
+                style="display: inline;">
+            <button type="submit" 
+                    class="btn {% if project.active_status %}btn-warning{% else %}btn-success{% endif %}">
+              <i class="fas {% if project.active_status %}fa-pause{% else %}fa-play{% endif %}"></i>
+              {% if project.active_status %}Deactivate{% else %}Activate{% endif %}
+            </button>
+          </form>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    {% else %}
+    <div class="empty-state">
+      <div class="empty-icon">
+        <i class="fas fa-folder-open"></i>
+      </div>
+      <h3>No Projects Yet</h3>
+      <p>Create your first project to organize your QR codes</p>
+      <a href="{{ url_for('create_project') }}" class="btn btn-primary">
+        <i class="fas fa-plus"></i>
+        Create First Project
+      </a>
+    </div>
+    {% endif %}
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Add smooth animations to project cards
+  const projectCards = document.querySelectorAll('.project-card');
+  
+  projectCards.forEach((card, index) => {
+    card.style.opacity = '0';
+    card.style.transform = 'translateY(20px)';
+    
+    setTimeout(() => {
+      card.style.transition = 'all 0.5s ease-out';
+      card.style.opacity = '1';
+      card.style.transform = 'translateY(0)';
+    }, index * 100);
+  });
+  
+  // Confirm project deactivation/activation
+  const toggleForms = document.querySelectorAll('form[action*="toggle_project"]');
+  toggleForms.forEach(form => {
+    form.addEventListener('submit', function(e) {
+      const button = form.querySelector('button');
+      const action = button.textContent.trim();
+      const projectName = form.closest('.project-card').querySelector('h3').textContent.trim();
+      
+      if (!confirm(`Are you sure you want to ${action.toLowerCase()} the project "${projectName}"?`)) {
+        e.preventDefault();
+      }
+    });
+  });
+  
+  // Add loading state to buttons
+  const actionButtons = document.querySelectorAll('.project-actions .btn');
+  actionButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      if (this.tagName === 'BUTTON') {
+        const originalText = this.innerHTML;
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Re-enable after form submission (in case of validation errors)
+        setTimeout(() => {
+          this.innerHTML = originalText;
+          this.disabled = false;
+        }, 3000);
+      }
+    });
+  });
+});
+</script>
+{% endblock %}