Lesson 4: Dashboard Enhancement & UI Refinement

Creating Dual Navigation Systems

Build separate navigation experiences for authenticated employees and public visitors to improve security and user experience.

AI prompt for dual navigation:

# Tell Claude:
"Let's create two navigations.
One for when it is logged in and one for when it is not.
The logged out should have access to the about page.
We no longer need a login link."

# Claude will:
# 1. Create conditional navigation in base.html
# 2. Check authentication status with Flask-Login
# 3. Display different nav items based on login state

Navigation structure for logged-out users:

# Public navigation includes:
# - Home/Index (login form)
# - About page (accessible without login)
# - No login link needed (index IS login)

# Template logic:
{% if current_user.is_authenticated %}
    
{% else %}
    
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
{% endif %}

Navigation structure for logged-in users:

# Authenticated navigation includes:
# - Dashboard
# - Pizzas
# - Customers
# - Orders
# - Admin User (profile)
# - Logout

# No About page in authenticated nav (removed)

Configuring index page as login:

# Additional AI prompt:
"I want the login page to be the login form to be the index page.
Then I want a dashboard built for when the login is successful."

# This creates:
# - index.html as main login page
# - dashboard.html as post-login landing page
# - Login redirects to /dashboard
# - Logout redirects to /index

Building Dynamic Dashboard with Real Data

Transform basic dashboard into data-driven overview with customer counts, sales totals, and recent order tracking.

AI prompt for dashboard enhancement:

# Tell Claude:
"Let's update the dashboard with actual numbers.
Add a total sales for the year,
number of customers,
and a table with the most recent orders on it."

Dashboard metrics Claude implements:

# Claude automatically creates SQL queries:

# 1. Customer Count
SELECT COUNT(*) as customer_count FROM customer

# 2. Total Sales for 2025
SELECT SUM(od.quantity * p.price * 1.07) as total_sales
FROM order_detail od
JOIN orders o ON od.order_id = o.order_id
JOIN pizza p ON od.pizza_id = p.pizza_id
WHERE YEAR(o.date) = 2025

# 3. Recent Orders (last 10)
SELECT o.order_id, c.name, o.date,
       SUM(od.quantity * p.price * 1.07) as order_total
FROM orders o
JOIN customer c ON o.customer_id = c.customer_id
JOIN order_detail od ON o.order_id = od.order_id
JOIN pizza p ON od.pizza_id = p.pizza_id
GROUP BY o.order_id
ORDER BY o.date DESC
LIMIT 10

Dashboard UI components created:

# Claude generates Bootstrap cards:

# Metric Cards:
- Total Customers: [count] (icon: people)
- Pizza Options: [count] (icon: pizza)
- Total Orders: [count] (icon: receipt)
- Total Sales 2025: $[amount] (icon: currency)

# Recent Orders Table:
- Order ID | Customer | Date | Total
- Sortable columns
- Responsive design
- View Details link for each order

The dashboard transforms from static placeholder buttons to a functional analytics overview with real database queries.

Implementing Footer and Container Width Adjustments

Add professional footer and ensure consistent content width across all pages for polished appearance.

AI prompt for footer and styling:

# Tell Claude:
"Go ahead and add a footer.
Make the header the same width as the body content.
Also make the logo clickable.
Add a dashboard link to the navigation."

Footer implementation:

# Claude creates footer component:

# File: templates/footer.html (or in base.html)
<footer class="bg-dark text-white mt-5 py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h5>Pizza Ordering System</h5>
                <p>© 2025 All Rights Reserved</p>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="/about" class="text-white">About</a> |
                <a href="/contact" class="text-white">Contact</a>
            </div>
        </div>
    </div>
</footer>

Container width consistency:

# Claude adjusts base.html:

# Before: Different widths for header/content
# Header: Full width
# Content: Container class

# After: Consistent container width
<header>
    <div class="container">  
        <!-- Logo and navigation -->
    </div>
</header>

<main>
    <div class="container">  
        {% block content %}{% endblock %}
    </div>
</main>

Navigation enhancements:

• Dashboard link added to main navigation
• Logo made clickable (links to dashboard when logged in)
• Consistent spacing and alignment
• Responsive mobile navigation

Creating Employee Profile Page

Build employee information page accessible from Admin User navigation link to display logged-in employee details.

AI prompt for profile page:

# Tell Claude:
"Make the admin link open an information page
for the logged in employee."

# Claude will:
# 1. Create profile route in app.py or auth blueprint
# 2. Generate profile.html template
# 3. Query employee data from database
# 4. Display employee information
# 5. Update navigation link to point to /profile

Profile page implementation:

# Route created:
@app.route('/profile')
@login_required
def profile():
    employee = get_employee_by_id(current_user.id)
    return render_template('profile.html', employee=employee)

# Template displays:
- User ID
- Username
- First Name
- Last Name
- (Password not displayed - security)

Profile page features:

# Claude creates simple profile display:

<div class="card">
    <div class="card-header">
        <h3>Employee Profile</h3>
    </div>
    <div class="card-body">
        <p><strong>Username:</strong> {{ employee.username }}</p>
        <p><strong>First Name:</strong> {{ employee.first_name }}</p>
        <p><strong>Last Name:</strong> {{ employee.last_name }}</p>
        <p><strong>User ID:</strong> {{ employee.user_id }}</p>
    </div>
</div>

Note: Claude keeps profile simple based on schema. Only includes fields that exist in employee table, avoiding extra fields not in database.

Fixing Order Calculations with 7% Sales Tax

Implement accurate order total calculations including 7% sales tax across order details and order list views.

Initial problem identification:

# Issue discovered:
# - Order details page shows one total
# - Orders list page shows different total
# - Calculations happening in template (Jinja variables)
# - Tax not consistently applied

AI prompt for tax implementation:

# Tell Claude:
"The order total is not working on the order details page.
We need to add a 7% tax to the order total."

# Claude diagnoses:
"The issue is the template is using Jinja template variables
to calculate the total."

Server-side calculation fix:

# Claude moves calculations to Python backend:

# In orders route:
@app.route('/orders//details')
@login_required
def order_details(order_id):
    # Get order items
    items = get_order_items(order_id)
    
    # Calculate subtotal
    subtotal = sum(item['quantity'] * item['price'] for item in items)
    
    # Calculate tax (7%)
    tax = Decimal(subtotal) * Decimal('0.07')
    
    # Calculate total
    total = subtotal + tax
    
    return render_template('order_details.html',
                         items=items,
                         subtotal=subtotal,
                         tax=tax,
                         total=total)

Decimal type handling:

# Error encountered:
"TypeError: unsupported operand type(s) for *: 'float' and 'Decimal'"

# AI prompt:
# Just paste error message

# Claude fixes:
from decimal import Decimal

# Ensures all money calculations use Decimal type
subtotal = Decimal(str(subtotal))
tax = subtotal * Decimal('0.07')
total = subtotal + tax

Updating orders list totals:

# Additional AI prompt:
"The total on the order page does not include the tax."

# Claude updates orders list query:
SELECT o.order_id,
       c.name,
       o.date,
       SUM(od.quantity * p.price) * 1.07 as total_with_tax
FROM orders o
JOIN customer c ON o.customer_id = c.customer_id
JOIN order_detail od ON o.order_id = od.order_id  
JOIN pizza p ON od.pizza_id = p.pizza_id
GROUP BY o.order_id

Removing unnecessary columns:

# Additional improvement:
"We can also remove the created date column from the order."

# Claude removes:
- created_at column from display
- Simplifies table view
- Focuses on relevant information

Testing verification:

# Test procedure documented in video:
# 1. View order #9 details: $41.97
# 2. Check orders list: Should match $41.97
# 3. Add item (Barbecue pizza)
# 4. New total: $52.40
# 5. Verify orders list shows $52.40
# 6. Dashboard shows updated total sales: $300.79

Cleaning Up Temporary Development Files

Remove temporary Python scripts created during database setup that are no longer needed for production.

Files to remove:

# Temporary files created in Lesson 2:
- create_tables.py (used to create database tables)
- verify_data.py (used to verify seed data)
- update_passwords.py (used to fix employee passwords)
- templates/login.html (replaced by index.html)

AI prompt for cleanup:

# Tell Claude:
"Let's clean up the site.
Remove any test or update or create files used to build the site."

# Claude will:
# 1. Scan project directory
# 2. Identify temporary/test files
# 3. Request permission to delete (safety feature)
# 4. Remove approved files

Deletion process:

# Claude finds four files to remove:
# 1. create_tables.py
# 2. verify_data.py
# 3. update_passwords.py
# 4. templates/login.html (old login template)

# May ask for confirmation before deleting
# This is a safety feature for destructive operations

Files to keep:

# Important: Keep these files for reference
- database/schema.sql (database structure documentation)
- database/seed.sql (sample data reference)

# These files are useful for:
# - Understanding table structure
# - Recreating database if needed
# - Reference for future development

Manual deletion option:

# If AI cleanup doesn't complete:
# Can manually delete files in project explorer
# Right-click file → Delete

# However, AI usually completes successfully
# May just take a few moments

Understanding AI Memory Compacting

Learn about AI conversation compacting process that occurs during long development sessions to maintain performance.

What is compacting:

# During development session:
# - Conversation grows with each interaction
# - Context window fills with messages
# - AI needs to manage memory efficiently

# Compacting process:
# - Takes 135+ seconds (2+ minutes)
# - Condenses conversation history
# - Preserves important context
# - Frees up memory for new tasks
# - Makes AI run faster afterward

When compacting occurs:

# You'll see message:
"Compacting conversation..."

# Happens when:
# - Conversation becomes very long
# - Multiple files have been created/edited
# - Context window approaching limit
# - AI determines compacting is beneficial

What to do during compacting:

# Wait patiently:
# - Don't interrupt the process
# - Don't close the terminal
# - Don't send new messages
# - Process will complete automatically

# After compacting:
# - AI has "fresh memory"
# - Commands run faster
# - Can continue development normally
# - All context is preserved

Benefits after compacting:

• Faster response times
• More efficient processing
• Continued context awareness
• Ready for additional tasks

Final Testing and Deployment

Perform comprehensive testing of all features and deploy completed application to production on Heroku.

Comprehensive local testing:

# Test navigation:
# 1. Logout - verify public navigation shows (Home, About)
# 2. Login - verify authenticated nav shows (Dashboard, Pizzas, etc.)
# 3. Check Dashboard link in navigation

# Test dashboard:
# 1. Verify customer count displays correctly
# 2. Check total sales for 2025 ($300.79 in demo)
# 3. View recent orders table
# 4. Confirm all metrics pull from database

# Test admin profile:
# 1. Click Admin User in navigation
# 2. Verify profile page loads
# 3. Check employee information displays
# 4. Confirm only schema fields shown

Order calculation verification:

# Detailed order testing:
# 1. Navigate to Orders page
# 2. Note order #10 total: $31.01
# 3. Click View Details for order #10
# 4. Verify order detail total matches: $31.01
# 5. Add item (Barbecue pizza)
# 6. New total with tax: $52.40
# 7. Return to Orders list
# 8. Verify order #10 now shows: $52.40
# 9. Check dashboard updates sales total

# Confirms:
# - Tax calculated correctly (7%)
# - Totals consistent across pages
# - Real-time updates working

Deployment to Heroku:

# AI prompt:
"Push to GitHub"

# Process:
# 1. Stage all changes (git add .)
# 2. Create commit with descriptive message
# 3. Confirm push (may ask twice)
# 4. Push to GitHub repository
# 5. GitHub triggers Heroku auto-deploy
# 6. Monitor in Heroku Activity tab

Production verification checklist:

# After Heroku deployment completes:

# Test in production:
✓ Login page loads (index with prefilled credentials)
✓ Authentication works
✓ Dashboard displays with real data
✓ All navigation links functional
✓ Customers CRUD operations work
✓ Pizzas CRUD operations work
✓ Orders CRUD operations work
✓ Order details view works
✓ Sales tax calculated correctly
✓ Totals match across pages
✓ Admin profile page works
✓ Footer displays properly
✓ Container widths consistent
✓ Logout clears session
✓ Back button prevention works
✓ Public navigation for logged-out users
✓ Database connections work in production

Final project status:

• Complete five-table database system
• Full CRUD operations with modals
• Employee authentication system
• Dynamic dashboard with metrics
• Dual navigation systems
• Professional UI with footer
• Accurate sales tax calculations
• Production-ready deployment

The Pizza Management System is now complete and ready for student duplication projects.