From a27237324614543d8bd9369e1531e753ae56f8a6 Mon Sep 17 00:00:00 2001
From: SysAdmin <sysadmin@silverlabs.uk>
Date: Thu, 13 Nov 2025 19:17:05 +0000
Subject: [PATCH] feat: Complete Phase 2 - Products responsive mobile cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added comprehensive mobile card layout for Products/Index, completing Phase 2 responsive design.

**Products Mobile View Features:**
- Horizontal layout with 80x80px product image on left
- Product name, category badge, price, and status on right
- Full description (100 chars) below header
- 2-column grid for Stock and Weight info
- Conditional badges for multi-buys and variants
- Full-width "View Details & Edit" button

**Mobile UX Highlights:**
- Larger product images (80px vs 50px desktop thumbnail)
- Price prominently displayed in green (fs-5)
- Stock status color-coded (success/warning)
- Variations clearly shown with icon badges
- Touch-friendly full-width action button

**Technical Implementation:**
- d-flex for image + info horizontal layout
- flex-grow-1 for responsive info section
- row g-2 for 2-column grid with gutters
- Conditional rendering for variations badges
- ARIA labels for accessibility

**Phase 2 Now Complete:**
✅ Categories - Simple cards with description
✅ Users - Minimal cards with user info
✅ ShippingRates - 2x2 grid for rate details
✅ VariantCollections - Cards with JSON preview
✅ Products - Rich cards with images and variations
✅ Orders - Mobile cards (already implemented)

All main Index views now mobile-optimized!

🚀 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../Areas/Admin/Views/Products/Index.cshtml   | 92 ++++++++++++++++++-
 1 file changed, 91 insertions(+), 1 deletion(-)

diff --git a/LittleShop/Areas/Admin/Views/Products/Index.cshtml b/LittleShop/Areas/Admin/Views/Products/Index.cshtml
index 78b75b6..17df41e 100644
--- a/LittleShop/Areas/Admin/Views/Products/Index.cshtml
+++ b/LittleShop/Areas/Admin/Views/Products/Index.cshtml
@@ -30,7 +30,8 @@
     <div class="card-body">
         @if (Model.Any())
         {
-            <div class="table-responsive">
+            <!-- Desktop Table View (hidden on mobile) -->
+            <div class="table-responsive d-none d-lg-block">
                 <table class="table table-striped">
                     <thead>
                         <tr>
@@ -118,6 +119,95 @@
                     </tbody>
                 </table>
             </div>
+
+            <!-- Mobile Card View (visible on mobile only) -->
+            <div class="d-lg-none">
+                @foreach (var product in Model)
+                {
+                    <div class="card mb-3">
+                        <div class="card-body">
+                            <div class="d-flex mb-3">
+                                @if (product.Photos.Any())
+                                {
+                                    <img src="@product.Photos.First().FilePath" alt="@product.Photos.First().AltText"
+                                         class="img-thumbnail me-3" style="width: 80px; height: 80px; object-fit: cover;">
+                                }
+                                else
+                                {
+                                    <div class="bg-light d-flex align-items-center justify-content-center me-3" style="width: 80px; height: 80px; border-radius: var(--radius-md);">
+                                        <i class="fas fa-image fa-2x text-muted"></i>
+                                    </div>
+                                }
+                                <div class="flex-grow-1">
+                                    <h5 class="card-title mb-1">@product.Name</h5>
+                                    <span class="badge bg-secondary mb-2">@product.CategoryName</span>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <strong class="text-success fs-5">£@product.Price</strong>
+                                        @if (product.IsActive)
+                                        {
+                                            <span class="badge bg-success">Active</span>
+                                        }
+                                        else
+                                        {
+                                            <span class="badge bg-danger">Inactive</span>
+                                        }
+                                    </div>
+                                </div>
+                            </div>
+
+                            <p class="card-text text-muted small mb-2">
+                                @product.Description.Substring(0, Math.Min(100, product.Description.Length))@(product.Description.Length > 100 ? "..." : "")
+                            </p>
+
+                            <div class="row g-2 mb-3">
+                                <div class="col-6">
+                                    <div class="p-2 bg-light rounded">
+                                        <small class="text-muted d-block">Stock</small>
+                                        @if (product.StockQuantity > 0)
+                                        {
+                                            <strong class="text-success">@product.StockQuantity units</strong>
+                                        }
+                                        else
+                                        {
+                                            <strong class="text-warning">Out of stock</strong>
+                                        }
+                                    </div>
+                                </div>
+                                <div class="col-6">
+                                    <div class="p-2 bg-light rounded">
+                                        <small class="text-muted d-block">Weight</small>
+                                        <strong>@product.Weight @product.WeightUnit.ToString().ToLower()</strong>
+                                    </div>
+                                </div>
+                            </div>
+
+                            @if (product.MultiBuys.Any() || product.Variants.Any())
+                            {
+                                <div class="mb-3">
+                                    @if (product.MultiBuys.Any())
+                                    {
+                                        <span class="badge bg-info me-1">
+                                            <i class="fas fa-shopping-basket" aria-hidden="true"></i> @product.MultiBuys.Count() multi-buys
+                                        </span>
+                                    }
+                                    @if (product.Variants.Any())
+                                    {
+                                        <span class="badge bg-success">
+                                            <i class="fas fa-swatchbook" aria-hidden="true"></i> @product.Variants.Count() variants
+                                        </span>
+                                    }
+                                </div>
+                            }
+
+                            <div class="d-grid">
+                                <a href="@Url.Action("Edit", new { id = product.Id })" class="btn btn-outline-primary" aria-label="View details for @product.Name">
+                                    <i class="fas fa-info-circle" aria-hidden="true"></i> View Details & Edit
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                }
+            </div>
         }
         else
         {