diff --git a/CulinaryCommandApp/Components/Pages/Home.razor b/CulinaryCommandApp/Components/Pages/Home.razor index 8ec79c7..cdaa3c7 100644 --- a/CulinaryCommandApp/Components/Pages/Home.razor +++ b/CulinaryCommandApp/Components/Pages/Home.razor @@ -1,18 +1,190 @@ @page "/" +@namespace CulinaryCommand.Components.Pages @inject NavigationManager Nav @inject AuthService Auth +Culinary Command - Restaurant Command Center + +@if (showLanding) +{ +
+
+
+ + Culinary Command +
+ + Get Started +
+ +
+
+
Built for independent restaurants and multi-location operators
+

+ Run Your Restaurant With + Precision. +

+

+ Culinary Command gives you complete control over inventory, ingredients, + recipes, staff, and cost management - all in one intelligent dashboard. +

+
+ Get Started + See Features +
+
+ + + +
+
+ +
+
+
+
+
+
+
+

Trusted by the biggest restaurants

+
+
+
500+
+
Happy Users
+
+
+
32 Hrs+
+
Time Saved
+
+
+
1000+
+
Sales
+
+
+
+
+
+ +
+
+

Features

+

Every station. One command center.

+
+
+
+ +

Live Inventory

+

Track ingredients, stock alerts, and reorder points across locations.

+
+
+ +

Recipe Intelligence

+

Standardize recipes, costing, and prep workflows with precision.

+
+
+ +

Team Visibility

+

Assign tasks, monitor progress, and keep teams aligned in real time.

+
+
+
+ +
+
+

How It Works

+

Set up in minutes. Run flawlessly all day.

+
+
+
+ 01 +

Connect Locations

+

Invite managers and import existing inventory lists.

+
+
+ 02 +

Automate Workflows

+

Set roles, reorder rules, and prep schedules in one place.

+
+
+ 03 +

Measure Results

+

See time saved and costs reduced with live insights.

+
+
+
+ +
+
+

Pricing

+

Plans built for ambitious kitchens.

+
+
+
+

Starter

+
$49/mo
+
    +
  • Single location
    • +
  • Inventory + recipes
    • +
  • Weekly insights
    • +
+ Start now +
+
+
Most Popular
+

Growth

+
$129/mo
+
    +
  • Up to 5 locations
    • +
  • Automation + tasks
    • +
  • Daily analytics
    • +
+ Get Started +
+
+

Enterprise

+
Custom
+
    +
  • Unlimited locations
    • +
  • Dedicated success team
    • +
  • Custom integrations
    • +
+ Talk to sales +
+
+
+ + +
+} + @code { + private bool showLanding; + protected override void OnInitialized() { - // Redirect unauthenticated users to SignIn - if (!Auth.IsSignedIn) - { - Nav.NavigateTo("/signin"); - } - else + if (Auth.IsSignedIn) { Nav.NavigateTo("/dashboard"); + return; } + + showLanding = true; } } diff --git a/CulinaryCommandApp/Components/Pages/Home.razor.css b/CulinaryCommandApp/Components/Pages/Home.razor.css new file mode 100644 index 0000000..dda652e --- /dev/null +++ b/CulinaryCommandApp/Components/Pages/Home.razor.css @@ -0,0 +1,400 @@ +.landing { + min-height: 100vh; + background: radial-gradient(circle at top right, rgba(34, 197, 94, 0.35), transparent 50%), + radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.3), transparent 45%), + #0d1210; + color: #f8fafc; + padding: 28px 40px 60px; + font-family: "Space Grotesk", "Source Sans 3", sans-serif; +} + +.landing-nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + padding: 8px 6px 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.brand { + display: flex; + align-items: center; + gap: 10px; + font-weight: 600; + letter-spacing: 0.01em; +} + +.brand-dot { + width: 12px; + height: 12px; + border-radius: 999px; + background: linear-gradient(135deg, #22c55e, #10b981); + box-shadow: 0 0 12px rgba(34, 197, 94, 0.6); +} + +.landing-links { + display: flex; + gap: 24px; + font-size: 0.95rem; +} + +.landing-links a { + color: #e2e8f0; + text-decoration: none; + opacity: 0.8; + transition: opacity 0.2s ease; +} + +.landing-links a:hover { + opacity: 1; +} + +.nav-cta { + background: #22c55e; + color: #0d1210; + padding: 10px 18px; + border-radius: 999px; + text-decoration: none; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 8px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.nav-cta:hover { + transform: translateY(-1px); + box-shadow: 0 10px 24px rgba(34, 197, 94, 0.3); +} + +.hero { + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); + gap: 40px; + margin-top: 36px; + align-items: center; +} + +.hero-card { + background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); + border-radius: 24px; + padding: 36px; + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); +} + +.hero-badge { + display: inline-flex; + align-items: center; + padding: 6px 12px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + font-size: 0.78rem; + letter-spacing: 0.02em; + margin-bottom: 14px; +} + +.hero-card h1 { + font-size: clamp(2.4rem, 4vw, 3.6rem); + line-height: 1.02; + margin-bottom: 12px; +} + +.hero-emphasis { + display: block; + font-family: "Source Sans 3", sans-serif; + font-size: clamp(2.2rem, 4.3vw, 3.8rem); + color: #22c55e; +} + +.hero-card p { + color: #e2e8f0; + font-size: 1rem; + margin-bottom: 20px; +} + +.hero-actions { + display: flex; + gap: 14px; + flex-wrap: wrap; + margin-bottom: 18px; +} + +.btn-primary { + background: #22c55e; + color: #0d1210; + padding: 12px 20px; + border-radius: 999px; + font-weight: 700; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 8px; + box-shadow: 0 14px 24px rgba(34, 197, 94, 0.35); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.btn-primary:hover { + transform: translateY(-1px); + box-shadow: 0 20px 35px rgba(34, 197, 94, 0.45); +} + +.btn-ghost { + color: #f8fafc; + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 12px 18px; + border-radius: 999px; + text-decoration: none; + font-weight: 600; + transition: border 0.2s ease, color 0.2s ease; +} + +.btn-ghost:hover { + color: #22c55e; + border-color: rgba(34, 197, 94, 0.8); +} + +.hero-social { + display: flex; + gap: 10px; +} + +.social-btn { + width: 36px; + height: 36px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.08); + display: inline-flex; + align-items: center; + justify-content: center; + color: #f8fafc; + text-decoration: none; + transition: background 0.2s ease, transform 0.2s ease; +} + +.social-btn:hover { + background: rgba(34, 197, 94, 0.8); + transform: translateY(-2px); +} + +.hero-media { + display: grid; + gap: 18px; +} + +.hero-image { + position: relative; + height: 360px; + border-radius: 26px; + background: linear-gradient(140deg, rgba(15, 23, 42, 0.8), rgba(12, 10, 9, 0.2)); + border: 1px solid rgba(255, 255, 255, 0.1); + overflow: hidden; +} + +.hero-glow { + position: absolute; + inset: -20% 10% auto auto; + width: 240px; + height: 240px; + background: radial-gradient(circle, rgba(34, 197, 94, 0.7), transparent 70%); + filter: blur(4px); +} + +.hero-plate { + position: absolute; + bottom: -40px; + left: -20px; + width: 260px; + height: 260px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(15, 23, 42, 0)); + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.hero-spark { + position: absolute; + bottom: 40px; + right: 30px; + width: 120px; + height: 120px; + background: radial-gradient(circle, rgba(16, 185, 129, 0.7), transparent 65%); + border-radius: 50%; + filter: blur(6px); +} + +.hero-trust { + background: rgba(255, 255, 255, 0.06); + border-radius: 20px; + padding: 18px 20px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.hero-trust h3 { + font-size: 1rem; + margin-bottom: 12px; +} + +.hero-metrics { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; +} + +.metric-value { + font-size: 1.3rem; + font-weight: 700; +} + +.metric-label { + font-size: 0.78rem; + color: #cbd5f5; +} + +.landing-section { + margin-top: 70px; + padding: 0 6px; +} + +.section-header { + display: flex; + flex-direction: column; + gap: 6px; + margin-bottom: 28px; +} + +.section-kicker { + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.2em; + color: rgba(187, 247, 208, 0.7); +} + +.section-header h2 { + font-size: clamp(1.8rem, 3vw, 2.4rem); +} + +.feature-grid, +.steps, +.pricing-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; +} + +.feature-card, +.step-card, +.pricing-card { + background: rgba(255, 255, 255, 0.06); + border-radius: 18px; + padding: 22px; + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); +} + +.feature-card i { + font-size: 1.6rem; + color: #22c55e; + margin-bottom: 10px; + display: inline-block; +} + +.step-number { + font-size: 0.9rem; + font-weight: 700; + color: #22c55e; + letter-spacing: 0.1em; +} + +.pricing-section .pricing-card { + text-align: left; +} + +.pricing-card ul { + list-style: none; + padding: 0; + margin: 14px 0 20px; + color: #e2e8f0; +} + +.pricing-card li { + margin-bottom: 8px; +} + +.price { + font-size: 2rem; + font-weight: 700; + margin: 8px 0; +} + +.price span { + font-size: 0.95rem; + color: #cbd5f5; + margin-left: 4px; +} + +.pricing-card.featured { + border: 1px solid rgba(34, 197, 94, 0.6); + box-shadow: 0 20px 50px rgba(34, 197, 94, 0.2); +} + +.featured-tag { + display: inline-flex; + padding: 4px 10px; + border-radius: 999px; + background: rgba(34, 197, 94, 0.2); + color: #22c55e; + font-size: 0.75rem; + margin-bottom: 8px; +} + +.landing-footer { + margin-top: 80px; + padding: 26px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.08); + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.landing-footer p { + color: #cbd5f5; + margin: 6px 0 0; +} + +@media (max-width: 1000px) { + .hero { + grid-template-columns: 1fr; + } + + .landing-nav { + flex-direction: column; + align-items: flex-start; + } + + .landing-links { + flex-wrap: wrap; + } +} + +@media (max-width: 700px) { + .landing { + padding: 20px 20px 50px; + } + + .hero-card { + padding: 26px; + } + + .hero-image { + height: 260px; + } + + .landing-footer { + flex-direction: column; + align-items: flex-start; + } +} diff --git a/CulinaryCommandApp/Components/Routes.razor b/CulinaryCommandApp/Components/Routes.razor index 1c8ef38..3387be6 100644 --- a/CulinaryCommandApp/Components/Routes.razor +++ b/CulinaryCommandApp/Components/Routes.razor @@ -7,7 +7,8 @@ @if (routeData.PageType == typeof(CulinaryCommand.Components.Pages.SignIn) || routeData.PageType == typeof(CulinaryCommand.Components.Pages.SignUp) - || routeData.PageType == typeof(CulinaryCommand.Components.Pages.AdminSignUp)) + || routeData.PageType == typeof(CulinaryCommand.Components.Pages.AdminSignUp) + || routeData.PageType == typeof(CulinaryCommand.Components.Pages.Home)) { } diff --git a/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor b/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor index 73fbf28..a99416a 100644 --- a/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor +++ b/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor @@ -3,175 +3,140 @@ @using CulinaryCommand.Inventory.DTOs @using Microsoft.JSInterop -@using CulinaryCommand.Inventory.Services.Interfaces +@using Microsoft.AspNetCore.Components.Forms @using System.Threading.Tasks
-

Inventory

-
-
+ +
+
+ + +
+
+ + + +
+ +
+
+ +
+ - @* *@
- -
+
- - - -
- - @if (showFilterPanel) - { -
-
-
- - -
-
- - -
-
- - -
-
- -
-
-
- } - -
- - - - - - - + + + + + + + + + @if (isLoading) { - } - else if (!filteredItems.Any()) + else if (!pagedItems.Any()) { - } else { - @foreach (var item in filteredItems) + @foreach (var item in pagedItems) { - - + - + + - + +
- Name - - SKU + + - Current Qty - - Out of Stock - - Last Order - - Price - ActionsName CategoryUnitCurrent Stock Expires Cost/Unit LocationLast Updated Actions
+
+

No items found
-
- @item.Name - @if (item.IsLowStock) - { - Low - } -
+
+ @item.SKU -
- - @item.CurrentQuantity @item.Unit - +
+
@item.Name
+
SKU: @item.SKU
 - @if (item.OutOfStockDate.HasValue) - { - - @item.OutOfStockDate.Value.ToString("MM/dd/yy") - @if (IsDateCritical(item.OutOfStockDate.Value)) - { - - } - - } - else - { - - - } + @item.Category @item.Unit - @if (item.LastOrderDate.HasValue) - { - @item.LastOrderDate.Value.ToString("MM/dd/yy") - } - else - { - - - } +
+ @item.CurrentQuantity + @if (item.CurrentQuantity <= 0) + { + + } + else if (item.IsLowStock) + { + + } +
@(item.OutOfStockDate.HasValue ? item.OutOfStockDate.Value.ToString("M/d/yy") : "-") $@item.Price.ToString("F2") + @GetLocation(item.Id)@(item.LastOrderDate.HasValue ? item.LastOrderDate.Value.ToString("M/d/yy") : "-")
-
@@ -189,25 +154,27 @@ }
-
- - -
-
-
Total Items
-
@inventoryItems.Count
-
-
-
Low Stock
-
@inventoryItems.Count(i => i.IsLowStock)
-
-
-
Out of Stock
-
@inventoryItems.Count(i => i.CurrentQuantity <= 0)
-
-
-
Total Value
-
$@inventoryItems.Sum(i => i.CurrentQuantity * i.Price).ToString("F2")
+
+
Showing @GetStartIndex()-@GetEndIndex() of @filteredItems.Count Ingredients
+
@@ -278,6 +245,24 @@
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
@@ -292,20 +277,27 @@ @code { private List inventoryItems = new(); private List filteredItems = new(); + private List pagedItems = new(); private bool isLoading = true; private string activeTab = "all"; - private bool showFilterPanel = false; private string searchTerm = ""; private string selectedCategory = ""; private string stockStatus = ""; private string sortColumn = ""; private bool sortAscending = true; + private int currentPage = 1; + private int pageSize = 10; + private int totalPages = 1; + private List pageButtons = new(); + private HashSet selectedIds = new(); - private List categories = new() { "Produce", "Dairy", "Meat", "Dry Goods", "Beverages", "Condiments", "Spices" }; + private readonly Dictionary itemLocations = new(); + private List categories = new() { "Vegetables", "Dairy", "Meat & Poultry", "Grains & Pasta", "Oils & Sauces" }; private bool showModal = false; private InventoryItemDTO modalItem = new(); private InventoryItemDTO? editingItem = null; + private string modalLocation = ""; protected override async Task OnInitializedAsync() { @@ -316,19 +308,40 @@ { isLoading = true; - // Load real data from the inventory service instead of static mock data - try + inventoryItems = new List { - inventoryItems = await InventorySvc.GetAllItemsAsync(); - } - catch (Exception ex) + new InventoryItemDTO { Id = 1, Name = "Pasta", SKU = "123", Category = "Grains & Pasta", Unit = "lbs", CurrentQuantity = 10, Price = 5, ReorderLevel = 15, OutOfStockDate = new DateTime(2026, 1, 2), LastOrderDate = new DateTime(2026, 2, 11) }, + new InventoryItemDTO { Id = 2, Name = "Milk", SKU = "321", Category = "Dairy", Unit = "mL", CurrentQuantity = 20, Price = 8, ReorderLevel = 25, OutOfStockDate = new DateTime(2026, 1, 1), LastOrderDate = new DateTime(2026, 2, 10) }, + new InventoryItemDTO { Id = 3, Name = "Heavy Cream", SKU = "456", Category = "Dairy", Unit = "L", CurrentQuantity = 35, Price = 10, ReorderLevel = 20, OutOfStockDate = new DateTime(2026, 2, 5), LastOrderDate = new DateTime(2026, 2, 8) }, + new InventoryItemDTO { Id = 4, Name = "Olive Oil", SKU = "654", Category = "Oils & Sauces", Unit = "L", CurrentQuantity = 45, Price = 8, ReorderLevel = 30, OutOfStockDate = new DateTime(2026, 6, 22), LastOrderDate = new DateTime(2026, 2, 1) }, + new InventoryItemDTO { Id = 5, Name = "Potatoes", SKU = "789", Category = "Vegetables", Unit = "lbs", CurrentQuantity = 150, Price = 9, ReorderLevel = 40, OutOfStockDate = new DateTime(2026, 1, 5), LastOrderDate = new DateTime(2026, 2, 11) }, + new InventoryItemDTO { Id = 6, Name = "Basil", SKU = "987", Category = "Vegetables", Unit = "bunch", CurrentQuantity = 25, Price = 3, ReorderLevel = 20, OutOfStockDate = new DateTime(2026, 1, 2), LastOrderDate = new DateTime(2026, 2, 11) }, + new InventoryItemDTO { Id = 7, Name = "Beef", SKU = "012", Category = "Meat & Poultry", Unit = "lbs", CurrentQuantity = 150, Price = 25, ReorderLevel = 60, OutOfStockDate = new DateTime(2026, 2, 26), LastOrderDate = new DateTime(2026, 1, 21) }, + new InventoryItemDTO { Id = 8, Name = "Mozzarella", SKU = "677", Category = "Dairy", Unit = "lbs", CurrentQuantity = 75, Price = 25, ReorderLevel = 80, OutOfStockDate = new DateTime(2026, 2, 26), LastOrderDate = new DateTime(2026, 2, 11) }, + new InventoryItemDTO { Id = 9, Name = "Jasmine Rice", SKU = "962", Category = "Grains & Pasta", Unit = "lbs", CurrentQuantity = 150, Price = 25, ReorderLevel = 90, OutOfStockDate = new DateTime(2026, 1, 2), LastOrderDate = new DateTime(2026, 2, 11) }, + new InventoryItemDTO { Id = 10, Name = "Green Peppers", SKU = "832", Category = "Vegetables", Unit = "lbs", CurrentQuantity = 0, Price = 25, ReorderLevel = 30, OutOfStockDate = new DateTime(2026, 1, 1), LastOrderDate = new DateTime(2026, 2, 11) } + }; + + itemLocations.Clear(); + itemLocations[1] = "Dry Storage"; + itemLocations[2] = "Walk-in"; + itemLocations[3] = "Walk-in"; + itemLocations[4] = "Dry Storage"; + itemLocations[5] = "Dry Storage"; + itemLocations[6] = "Walk-in"; + itemLocations[7] = "Walk-in Freezer"; + itemLocations[8] = "Walk-in"; + itemLocations[9] = "Dry Storage"; + itemLocations[10] = "Walk-in"; + + foreach (var item in inventoryItems) { - Console.Error.WriteLine($"Failed to load inventory items: {ex}"); - inventoryItems = new List(); + item.IsLowStock = item.CurrentQuantity <= item.ReorderLevel && item.CurrentQuantity > 0; } FilterItems(); isLoading = false; + await Task.CompletedTask; } private void SetActiveTab(string tab) @@ -337,21 +350,16 @@ FilterItems(); } - private void ToggleFilterPanel() - { - showFilterPanel = !showFilterPanel; - } - private void FilterItems() { + currentPage = 1; filteredItems = inventoryItems.Where(item => { // Tab filter bool tabMatch = activeTab switch { - "dry" => item.Category == "Dry Goods", - "arriving" => item.OutOfStockDate.HasValue && item.OutOfStockDate.Value <= DateTime.Now.AddDays(7) && item.OutOfStockDate.Value >= DateTime.Now, - "ordered" => item.LastOrderDate.HasValue && item.LastOrderDate.Value >= DateTime.Now.AddDays(-7), + "low" => item.IsLowStock, + "out" => item.CurrentQuantity <= 0, _ => true }; @@ -377,14 +385,7 @@ }).ToList(); ApplySorting(); - } - - private void ClearFilters() - { - searchTerm = ""; - selectedCategory = ""; - stockStatus = ""; - FilterItems(); + UpdatePagination(); } private void SortBy(string column) @@ -399,6 +400,7 @@ sortAscending = true; } ApplySorting(); + UpdatePagination(); } private void ApplySorting() @@ -406,52 +408,173 @@ filteredItems = sortColumn switch { "name" => sortAscending ? filteredItems.OrderBy(i => i.Name).ToList() : filteredItems.OrderByDescending(i => i.Name).ToList(), - "sku" => sortAscending ? filteredItems.OrderBy(i => i.SKU).ToList() : filteredItems.OrderByDescending(i => i.SKU).ToList(), "currentQty" => sortAscending ? filteredItems.OrderBy(i => i.CurrentQuantity).ToList() : filteredItems.OrderByDescending(i => i.CurrentQuantity).ToList(), - "outOfStock" => sortAscending ? filteredItems.OrderBy(i => i.OutOfStockDate ?? DateTime.MaxValue).ToList() : filteredItems.OrderByDescending(i => i.OutOfStockDate ?? DateTime.MinValue).ToList(), - "lastOrder" => sortAscending ? filteredItems.OrderBy(i => i.LastOrderDate ?? DateTime.MaxValue).ToList() : filteredItems.OrderByDescending(i => i.LastOrderDate ?? DateTime.MinValue).ToList(), + "expires" => sortAscending ? filteredItems.OrderBy(i => i.OutOfStockDate ?? DateTime.MaxValue).ToList() : filteredItems.OrderByDescending(i => i.OutOfStockDate ?? DateTime.MinValue).ToList(), + "lastUpdated" => sortAscending ? filteredItems.OrderBy(i => i.LastOrderDate ?? DateTime.MaxValue).ToList() : filteredItems.OrderByDescending(i => i.LastOrderDate ?? DateTime.MinValue).ToList(), "price" => sortAscending ? filteredItems.OrderBy(i => i.Price).ToList() : filteredItems.OrderByDescending(i => i.Price).ToList(), _ => filteredItems }; } - private string GetRowClass(InventoryItemDTO item) + private string GetCategoryClass(string category) { - if (item.CurrentQuantity <= 0) return "row-out-of-stock"; - if (item.IsLowStock) return "row-low-stock"; - return ""; + return category switch + { + "Grains & Pasta" => "category-grains", + "Dairy" => "category-dairy", + "Oils & Sauces" => "category-oils", + "Vegetables" => "category-vegetables", + "Meat & Poultry" => "category-meat", + _ => "category-default" + }; } - private bool IsDateCritical(DateTime date) + private string GetLocation(int id) { - return date <= DateTime.Now.AddDays(3); + return itemLocations.TryGetValue(id, out var location) ? location : "-"; } - private async Task IncrementQuantity(InventoryItemDTO item) + private bool IsPageSelected => pagedItems.Count > 0 && pagedItems.All(i => selectedIds.Contains(i.Id)); + + private void ToggleSelection(int id, ChangeEventArgs args) { - item.CurrentQuantity++; - item.IsLowStock = item.CurrentQuantity <= item.ReorderLevel; - // TODO - //Call service to update quantity - StateHasChanged(); + var isChecked = args.Value is bool boolValue && boolValue; + if (!isChecked && args.Value is string textValue) + { + bool.TryParse(textValue, out isChecked); + } + + if (isChecked) + { + selectedIds.Add(id); + } + else + { + selectedIds.Remove(id); + } + } + + private void ToggleSelectAll(ChangeEventArgs args) + { + var isChecked = args.Value is bool boolValue && boolValue; + if (!isChecked && args.Value is string textValue) + { + bool.TryParse(textValue, out isChecked); + } + + if (isChecked) + { + foreach (var item in pagedItems) + { + selectedIds.Add(item.Id); + } + } + else + { + foreach (var item in pagedItems) + { + selectedIds.Remove(item.Id); + } + } + } + + private void UpdatePagination() + { + totalPages = Math.Max(1, (int)Math.Ceiling(filteredItems.Count / (double)pageSize)); + currentPage = Math.Min(currentPage, totalPages); + pagedItems = filteredItems + .Skip((currentPage - 1) * pageSize) + .Take(pageSize) + .ToList(); + + pageButtons = BuildPageButtons(); + } + + private List BuildPageButtons() + { + var buttons = new List(); + if (totalPages <= 1) + { + buttons.Add(1); + return buttons; + } + + if (totalPages <= 5) + { + for (var i = 1; i <= totalPages; i++) + { + buttons.Add(i); + } + return buttons; + } + + buttons.Add(1); + + if (currentPage > 3) + { + buttons.Add(-1); + } + + var start = Math.Max(2, currentPage - 1); + var end = Math.Min(totalPages - 1, currentPage + 1); + for (var i = start; i <= end; i++) + { + buttons.Add(i); + } + + if (currentPage < totalPages - 2) + { + buttons.Add(-1); + } + + buttons.Add(totalPages); + return buttons; + } + + private void GoToPage(int page) + { + currentPage = page; + UpdatePagination(); } - private async Task DecrementQuantity(InventoryItemDTO item) + private void PreviousPage() { - if (item.CurrentQuantity > 0) + if (currentPage > 1) { - item.CurrentQuantity--; - item.IsLowStock = item.CurrentQuantity <= item.ReorderLevel; - // TODO - // Call service to update quantity - StateHasChanged(); + currentPage--; + UpdatePagination(); } } + private void NextPage() + { + if (currentPage < totalPages) + { + currentPage++; + UpdatePagination(); + } + } + + private int GetStartIndex() + { + if (filteredItems.Count == 0) + { + return 0; + } + + return ((currentPage - 1) * pageSize) + 1; + } + + private int GetEndIndex() + { + return Math.Min(currentPage * pageSize, filteredItems.Count); + } + private void ShowAddItemModal() { editingItem = null; modalItem = new InventoryItemDTO(); + modalLocation = ""; showModal = true; } @@ -467,8 +590,11 @@ CurrentQuantity = item.CurrentQuantity, Unit = item.Unit, Price = item.Price, - ReorderLevel = item.ReorderLevel + ReorderLevel = item.ReorderLevel, + OutOfStockDate = item.OutOfStockDate, + LastOrderDate = item.LastOrderDate }; + modalLocation = itemLocations.TryGetValue(item.Id, out var location) ? location : ""; showModal = true; } @@ -476,44 +602,29 @@ { try { + modalItem.IsLowStock = modalItem.CurrentQuantity <= modalItem.ReorderLevel && modalItem.CurrentQuantity > 0; if (editingItem != null) { - // Persist changes via service - var updated = await InventorySvc.UpdateItemAsync(modalItem); - if (updated != null) + var idx = inventoryItems.FindIndex(i => i.Id == modalItem.Id); + if (idx >= 0) { - var idx = inventoryItems.FindIndex(i => i.Id == updated.Id); - if (idx >= 0) - inventoryItems[idx] = updated; - else - inventoryItems.Add(updated); - - editingItem = inventoryItems.First(i => i.Id == updated.Id); + inventoryItems[idx] = modalItem; } else { - await JSRuntime.InvokeVoidAsync("alert", "Failed to update item."); + inventoryItems.Add(modalItem); } } else { - // Create new ingredient via service - var dto = new CreateIngredientDTO - { - Name = modalItem.Name, - SKU = string.IsNullOrWhiteSpace(modalItem.SKU) ? null : modalItem.SKU, - CurrentQuantity = modalItem.CurrentQuantity, - Price = modalItem.Price, - Category = modalItem.Category, - ReorderLevel = modalItem.ReorderLevel, - UnitId = 1 // TODO: wire a real unit selector; use sensible default for now - }; - - var created = await InventorySvc.AddItemAsync(dto); - if (created != null) - { - inventoryItems.Add(created); - } + modalItem.Id = inventoryItems.Any() ? inventoryItems.Max(i => i.Id) + 1 : 1; + inventoryItems.Add(modalItem); + itemLocations[modalItem.Id] = string.IsNullOrWhiteSpace(modalLocation) ? "Dry Storage" : modalLocation.Trim(); + } + + if (editingItem != null) + { + itemLocations[modalItem.Id] = string.IsNullOrWhiteSpace(modalLocation) ? "-" : modalLocation.Trim(); } CloseModal(); @@ -534,9 +645,7 @@ private async Task OrderItem(InventoryItemDTO item) { - //TODO - // Implement some type of order functionality - Console.WriteLine($"Ordering {item.Name}"); + await JSRuntime.InvokeVoidAsync("alert", $"Ordering {item.Name} coming soon."); } private async Task DeleteItem(InventoryItemDTO item) @@ -545,33 +654,58 @@ { return; } - try { - var success = await InventorySvc.DeleteItemAsync(item.Id); + inventoryItems.Remove(item); + FilterItems(); + } - if (success) { - inventoryItems.Remove(item); - FilterItems(); - } - else { - await JSRuntime.InvokeVoidAsync("alert", $"Failed to delete {item.Name}."); - } + private async Task ExportInventory() + { + await JSRuntime.InvokeVoidAsync("alert", "Export coming soon."); + } + + private async Task RefreshInventory() + { + await LoadInventoryData(); + await JSRuntime.InvokeVoidAsync("console.log", "Inventory refreshed"); + } + + private void ToggleQuickFilter() + { + stockStatus = stockStatus == "low" ? "" : "low"; + FilterItems(); + } + + private string SearchTerm + { + get => searchTerm; + set + { + searchTerm = value; + FilterItems(); } - catch (Exception ex) { - Console.Error.WriteLine($"Failed to delete item: {ex}"); - await JSRuntime.InvokeVoidAsync("alert", "An error occurred while deleting the item."); + } + + private string SelectedCategory + { + get => selectedCategory; + set + { + selectedCategory = value; + FilterItems(); } } -/* - // If needed immplement CSV/Excel export - private void ExportInventory() + + private string StockStatus { - Console.WriteLine("Exporting inventory..."); + get => stockStatus; + set + { + stockStatus = value; + FilterItems(); + } } -*/ [Inject] private IJSRuntime JSRuntime { get; set; } = default!; - [Inject] - private IInventoryManagementService InventorySvc { get; set; } = default!; } diff --git a/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor.css b/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor.css index b586867..c7ed0cf 100644 --- a/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor.css +++ b/CulinaryCommandApp/Inventory/Pages/Inventory/InventoryManagement.razor.css @@ -1,451 +1,431 @@ +:root { + --ink: #1f2a37; + --muted: #6b7280; + --border: #e5e7eb; + --bg: #f6f7f9; + --card: #ffffff; + --green: #0a8f3c; + --green-dark: #087136; + --pill: #f0f2f5; + --shadow: 0 10px 30px rgba(31, 42, 55, 0.08); +} + .inventory-container { - max-width: 1400px; + max-width: 1280px; margin: 0 auto; - padding: 20px; - background: #f8f9fa; + padding: 24px 24px 40px; + background: var(--bg); min-height: 100vh; + font-family: "Source Sans 3", "Segoe UI", sans-serif; + color: var(--ink); } -.inventory-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 30px; - background: white; - padding: 30px; - border-radius: 12px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - position: relative; - overflow: hidden; +.inventory-container button, +.inventory-container .btn { + font-family: "Source Sans 3", "Segoe UI", sans-serif; + letter-spacing: 0.01em; + transition: all 0.2s ease; } -.inventory-header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4px; - background: #198754; +.inventory-header { + background: var(--card); + border-radius: 16px; + padding: 22px 26px; + box-shadow: var(--shadow); + border: 1px solid var(--border); + margin-bottom: 18px; } -.inventory-header h1 { - font-size: 2.5rem; - font-weight: 700; - color: #2c3e50; - margin: 0; - display: flex; - align-items: center; - gap: 12px; +.header-text h1 { + font-family: "Space Grotesk", "Source Sans 3", sans-serif; + font-size: 1.6rem; + margin: 0 0 4px; } -.inventory-header h1::before { - content: '📦'; - font-size: 2.2rem; +.header-text p { + margin: 0; + color: var(--muted); + font-size: 0.95rem; } -.header-actions { +.inventory-toolbar { display: flex; - gap: 12px; + gap: 16px; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + background: var(--card); + border-radius: 16px; + padding: 16px 18px; + border: 1px solid var(--border); + box-shadow: var(--shadow); + margin-bottom: 14px; } -.header-actions .btn { +.search-bar { display: flex; align-items: center; - gap: 8px; - padding: 12px 24px; - font-weight: 600; + gap: 10px; + flex: 2 1 520px; + background: #f9fafb; + border: 1px solid var(--border); border-radius: 12px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - border: none; - position: relative; - overflow: hidden; -} - -.header-actions .btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); - transition: left 0.5s; -} - -.header-actions .btn:hover::before { - left: 100%; + padding: 10px 14px; + min-width: 360px; } -.header-actions .btn:hover { - transform: translateY(-3px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); +.search-bar i { + color: var(--muted); } -.header-actions .btn-success { - background: #198754; - border-color: #198754; +.search-bar input { + border: none; + outline: none; + background: transparent; + width: 100%; + font-size: 0.95rem; } -.header-actions .btn-success:hover { - background: #157347; - border-color: #146c43; +.toolbar-actions { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; } -.header-actions .btn-primary { - background: #198754; - border-color: #198754; +.icon-btn { + width: 36px; + height: 36px; + border-radius: 10px; + border: 1px solid var(--green); + background: var(--green); + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--ink); + transition: all 0.2s ease; + font-weight: 600; } -.header-actions .btn-primary:hover { - background: #157347; - border-color: #146c43; +.icon-btn:hover { + color: var(--ink); + border-color: var(--green-dark); + background: var(--green-dark); + box-shadow: 0 6px 12px rgba(10, 143, 60, 0.25); } -/* Filter Tabs */ -.filter-tabs { - display: flex; - gap: 8px; - margin-bottom: 20px; - padding: 16px; - background: white; - border-radius: 12px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); - flex-wrap: wrap; +.icon-btn.selected, +.icon-btn.active { + background: var(--green); + border-color: var(--green); + box-shadow: 0 6px 12px rgba(10, 143, 60, 0.3); } -.tab-btn { - padding: 12px 28px; - background: transparent; - border: 2px solid transparent; - color: #666; - font-weight: 600; - cursor: pointer; - border-radius: 10px; - transition: all 0.3s ease; +.select-wrap { position: relative; } -.tab-btn:hover { - color: #198754; - background: rgba(25, 135, 84, 0.1); -} - -.tab-btn.active { - background: #198754; - color: white; - box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3); +.select-wrap .form-select { + border-radius: 10px; + border: 1px solid var(--border); + padding: 8px 30px 8px 12px; + font-size: 0.9rem; + background-color: #ffffff; } -.btn-filter-list { - margin-left: auto; - padding: 12px 24px; - background: white; - border: 2px solid #dee2e6; +.btn-add { + background: var(--green); + color: var(--ink); + border: none; + padding: 9px 14px; border-radius: 10px; - color: #495057; font-weight: 600; - cursor: pointer; - display: flex; + display: inline-flex; align-items: center; gap: 8px; - transition: all 0.3s ease; + transition: background 0.2s ease; + box-shadow: 0 8px 16px rgba(10, 143, 60, 0.18); } -.btn-filter-list:hover { - background: #198754; - color: white; - border-color: #198754; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3); -} - -/* Filter Panel */ -.filter-panel { - background: white; - padding: 24px; - border-radius: 12px; - margin-bottom: 20px; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); - border: 2px solid #f0f0f0; - animation: slideDown 0.3s ease; +.btn-add:hover { + background: var(--green-dark); + transform: translateY(-1px); } -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.filter-row { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 16px; - align-items: end; -} - -.filter-group { +.tab-row { display: flex; - flex-direction: column; + gap: 10px; + margin-bottom: 12px; + flex-wrap: wrap; } -.filter-group label { +.tab-btn { + border: 1px solid var(--green); + background: #ffffff; + padding: 8px 14px; + border-radius: 999px; font-weight: 600; - color: #495057; - margin-bottom: 6px; font-size: 0.9rem; + color: var(--ink); + transition: all 0.2s ease; } -.filter-group .form-control { - padding: 8px 12px; - border: 1px solid #ced4da; - border-radius: 6px; - transition: border-color 0.3s ease; +.tab-btn:hover { + background: var(--green); + color: #ffffff; + border-color: var(--green); + box-shadow: 0 4px 12px rgba(10, 143, 60, 0.2); } -.filter-group .form-control:focus { - border-color: #198754; - box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25); +.tab-btn.active, +.tab-btn.selected { + background: var(--green); + color: var(--ink); + border-color: var(--green); + box-shadow: 0 4px 12px rgba(10, 143, 60, 0.25); } -/* Inventory Table */ .inventory-table-container { - background: white; + background: var(--card); border-radius: 16px; - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1); + border: 1px solid var(--border); + box-shadow: var(--shadow); overflow: hidden; - margin-bottom: 30px; - border: 1px solid #f0f0f0; } .inventory-table { width: 100%; border-collapse: collapse; + font-size: 0.92rem; } .inventory-table thead { - background: #198754; - color: white; - position: relative; -} - -.inventory-table thead::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: #146c43; + background: var(--green); + color: var(--ink); } .inventory-table thead th { - padding: 18px 16px; + padding: 14px 12px; text-align: left; - font-weight: 700; - font-size: 0.85rem; + font-weight: 600; + font-size: 0.82rem; + letter-spacing: 0.02em; text-transform: uppercase; - letter-spacing: 1px; cursor: pointer; - user-select: none; - transition: all 0.3s ease; -} - -.inventory-table thead th:hover { - background: rgba(255, 255, 255, 0.15); - transform: scale(1.02); } .inventory-table thead th i { margin-left: 6px; - font-size: 0.75rem; opacity: 0.8; - transition: transform 0.3s ease; -} - -.inventory-table thead th:hover i { - transform: translateY(-2px); } .inventory-table tbody tr { - border-bottom: 1px solid #f0f0f0; - transition: all 0.3s ease; + border-bottom: 1px solid var(--border); + background: #ffffff; } .inventory-table tbody tr:hover { - background: rgba(25, 135, 84, 0.05); - transform: scale(1.01); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + background: #f9fafb; } -.inventory-table tbody tr.row-low-stock { - background: linear-gradient(90deg, #fff3cd 0%, #ffe9a6 100%); - border-left: 4px solid #ffc107; +.inventory-table tbody td { + padding: 14px 12px; + vertical-align: middle; } -.inventory-table tbody tr.row-low-stock:hover { - background: linear-gradient(90deg, #ffe9a6 0%, #ffd966 100%); +.checkbox-col { + width: 40px; + text-align: center; } -.inventory-table tbody tr.row-out-of-stock { - background: linear-gradient(90deg, #f8d7da 0%, #f5c2c7 100%); - border-left: 4px solid #dc3545; +.actions-col { + width: 120px; } -.inventory-table tbody tr.row-out-of-stock:hover { - background: linear-gradient(90deg, #f5c2c7 0%, #f1aeb5 100%); +.name-cell .item-name { + font-weight: 600; + color: var(--ink); } -.inventory-table tbody td { - padding: 18px 16px; - color: #333; - font-weight: 500; +.name-cell .item-sku { + font-size: 0.78rem; + color: var(--muted); + margin-top: 2px; } -.item-name { - display: flex; +.category-pill { + display: inline-flex; align-items: center; - font-weight: 500; + padding: 6px 12px; + border-radius: 999px; + font-size: 0.75rem; + font-weight: 700; + background: var(--pill); + color: #1f2a37; } -.item-name .badge { - font-size: 0.7rem; - padding: 3px 8px; - border-radius: 4px; +.category-grains { + background: #fbbf24; + color: #78350f; } -/* Quantity Control */ -.qty-control { - display: flex; - align-items: center; - gap: 10px; - background: #f8f9fa; - padding: 6px 12px; - border-radius: 12px; - width: fit-content; +.category-dairy { + background: #a855f7; + color: #fafafa; } -.qty-btn { - width: 36px; - height: 36px; - border: 2px solid #dee2e6; - background: white; - border-radius: 10px; +.category-oils { + background: #eab308; + color: #713f12; +} + +.category-vegetables { + background: #22c55e; + color: #fafafa; +} + +.category-meat { + background: #ef4444; + color: #fafafa; +} + +.category-default { + background: #6b7280; + color: #ffffff; +} + +.stock-cell { display: flex; align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - color: #495057; - font-weight: bold; + gap: 8px; } -.qty-btn:hover { - background: #198754; - color: white; - border-color: #198754; - transform: scale(1.15); - box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3); +.stock-value { + font-weight: 600; } -.qty-btn:active { - transform: scale(0.9); +.stock-indicator { + font-size: 0.85rem; } -.qty-value { - min-width: 90px; - text-align: center; - font-weight: 700; - color: #333; - font-size: 1rem; +.stock-indicator.low { + color: #f59e0b; +} + +.stock-indicator.out { + color: #ef4444; } -/* Action Buttons */ .action-buttons { display: flex; gap: 8px; } .btn-action { - width: 36px; - height: 36px; - border: 1px solid #dee2e6; - background: white; - border-radius: 6px; - display: flex; + width: 32px; + height: 32px; + border-radius: 8px; + border: 1px solid #d1d5db; + background: #f3f4f6; + display: inline-flex; align-items: center; justify-content: center; - cursor: pointer; - transition: all 0.3s ease; - color: #495057; + color: var(--ink); + transition: all 0.2s ease; + font-weight: 600; } .btn-action:hover { - background: #007bff; - color: white; - border-color: #007bff; - transform: translateY(-2px); + color: var(--ink); + border-color: #9ca3af; + background: #e5e7eb; + transform: translateY(-1px); + box-shadow: 0 6px 12px rgba(107, 114, 128, 0.2); } -.btn-action.text-danger:hover { - background: #dc3545; - border-color: #dc3545; +.btn-action.delete { + background: #ef4444; + border-color: #ef4444; + color: var(--ink); } -/* Inventory Stats */ -.inventory-stats { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 24px; - margin-top: 30px; +.btn-action.delete:hover { + color: var(--ink); + border-color: #dc2626; + background: #dc2626; + box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3); } -.stat-card { - background: white; - padding: 28px; - border-radius: 16px; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); - text-align: center; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - border: 2px solid transparent; - position: relative; - overflow: hidden; +.btn-action.selected, +.btn-action.active { + background: var(--green); + border-color: var(--green); + color: var(--ink); + box-shadow: 0 6px 12px rgba(10, 143, 60, 0.3); } -.stat-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4px; - background: #198754; +.btn-action.delete.selected, +.btn-action.delete.active { + background: #dc2626; + border-color: #dc2626; + color: var(--ink); + box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3); } -.stat-card:hover { - transform: translateY(-8px) scale(1.02); - box-shadow: 0 12px 28px rgba(25, 135, 84, 0.25); - border-color: #198754; +.table-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + background: #ffffff; } -.stat-label { +.footer-count { + color: var(--muted); + font-size: 0.85rem; +} + +.pagination { + display: flex; + align-items: center; + gap: 6px; +} + +.page-btn, +.page-nav { + width: 32px; + height: 32px; + border-radius: 8px; + border: 1px solid #d1fae5; + background: #ffffff; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--green); font-size: 0.85rem; - color: #666; font-weight: 600; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 1px; + transition: all 0.2s ease; +} + +.page-btn:hover, +.page-nav:hover { + background: var(--green); + color: #ffffff; + border-color: var(--green); + box-shadow: 0 6px 12px rgba(10, 143, 60, 0.25); +} + +.page-btn.active, +.page-btn.selected { + background: var(--green); + border-color: var(--green); + color: #ffffff; + box-shadow: 0 6px 12px rgba(10, 143, 60, 0.25); } -.stat-value { - font-size: 2.5rem; - font-weight: 800; - color: #198754; +.page-ellipsis { + padding: 0 6px; + color: var(--muted); } /* Modal */ @@ -455,10 +435,9 @@ left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(5px); + background: rgba(15, 23, 42, 0.6); + backdrop-filter: blur(4px); z-index: 1040; - animation: fadeIn 0.3s ease; } .modal-dialog-custom { @@ -467,157 +446,119 @@ left: 50%; transform: translate(-50%, -50%); z-index: 1050; - width: 90%; - max-width: 600px; - animation: slideInModal 0.4s cubic-bezier(0.4, 0, 0.2, 1); -} - -@keyframes slideInModal { - from { - opacity: 0; - transform: translate(-50%, -40%); - } - to { - opacity: 1; - transform: translate(-50%, -50%); - } + width: 92%; + max-width: 560px; } .modal-content-custom { - background: white; - border-radius: 20px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + background: #ffffff; + border-radius: 18px; + border: 1px solid var(--border); overflow: hidden; - border: 2px solid #f0f0f0; + box-shadow: var(--shadow); } .modal-header-custom { - padding: 28px 32px; - background: #198754; - color: white; + padding: 18px 22px; + background: var(--green); + color: var(--ink); display: flex; justify-content: space-between; align-items: center; - position: relative; -} - -.modal-header-custom::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 3px; - background: #146c43; } .modal-header-custom h3 { margin: 0; - font-size: 1.75rem; - font-weight: 700; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-size: 1.2rem; } .btn-close-custom { - background: rgba(255, 255, 255, 0.2); - border: 2px solid rgba(255, 255, 255, 0.3); - color: white; - font-size: 1.5rem; - cursor: pointer; - padding: 0; - width: 40px; - height: 40px; - display: flex; + border: none; + background: rgba(31, 42, 55, 0.1); + color: var(--ink); + width: 32px; + height: 32px; + border-radius: 10px; + display: inline-flex; align-items: center; justify-content: center; - border-radius: 10px; - transition: all 0.3s ease; } -.btn-close-custom:hover { - background: rgba(255, 255, 255, 0.3); - transform: rotate(90deg) scale(1.1); +.modal-body-custom { + padding: 22px; } -.modal-body-custom { - padding: 32px; - max-height: 60vh; - overflow-y: auto; +.modal-body-custom label { + display: block; + font-weight: 700; + color: var(--ink); + margin-bottom: 8px; + font-size: 0.95rem; +} + +.modal-body-custom .form-control, +.modal-body-custom .form-select { + border: 2px solid #6b7280; + border-radius: 8px; + padding: 10px 12px; + font-size: 0.95rem; + color: var(--ink); + background-color: #ffffff; +} + +.modal-body-custom .form-control:focus, +.modal-body-custom .form-select:focus { + border-color: var(--green); + box-shadow: 0 0 0 3px rgba(10, 143, 60, 0.1); + outline: none; } .modal-footer-custom { - padding: 24px 32px; - background: #f8f9fa; + padding: 14px 22px; + background: #f9fafb; display: flex; justify-content: flex-end; - gap: 12px; - border-top: 2px solid #f0f0f0; + gap: 10px; + border-top: 1px solid var(--border); } -/* Animations */ -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } +.modal-footer-custom .btn { + border-radius: 10px; + font-weight: 600; + box-shadow: 0 6px 12px rgba(31, 41, 55, 0.1); } -@keyframes slideIn { - from { - transform: translate(-50%, -60%); - opacity: 0; - } - to { - transform: translate(-50%, -50%); - opacity: 1; - } +.modal-footer-custom .btn-secondary { + background: #e5e7eb; + border-color: #e5e7eb; + color: var(--ink); } -@keyframes pulse { - 0%, 100% { - transform: scale(1); - } - 50% { - transform: scale(1.05); - } +.modal-footer-custom .btn-secondary:hover { + background: #d1d5db; + border-color: #d1d5db; } -/* Responsive */ -@media (max-width: 768px) { - .inventory-header { - flex-direction: column; - align-items: flex-start; - gap: 16px; - } - - .filter-tabs { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - - .inventory-table-container { - overflow-x: auto; - } - - .inventory-table { - min-width: 800px; - } +.modal-footer-custom .btn-success { + background: var(--green); + border-color: var(--green); + color: var(--ink); +} - .inventory-stats { - grid-template-columns: repeat(2, 1fr); - } +.modal-footer-custom .btn-success:hover { + background: var(--green-dark); + border-color: var(--green-dark); + color: var(--ink); } /* Loading Spinner */ .spinner-border { - width: 4rem; - height: 4rem; - border-width: 0.4rem; - border-color: #198754; + width: 3rem; + height: 3rem; + border-width: 0.3rem; + border-color: var(--green); border-right-color: transparent; - animation: spin 0.75s linear infinite; + animation: spin 0.8s linear infinite; } @keyframes spin { @@ -626,10 +567,21 @@ } } -.item-name .badge { - font-size: 0.7rem; - padding: 4px 10px; - border-radius: 6px; - font-weight: 700; - animation: pulse 2s infinite; +@media (max-width: 900px) { + .inventory-toolbar { + flex-direction: column; + align-items: stretch; + } + + .toolbar-actions { + justify-content: flex-start; + } + + .inventory-table-container { + overflow-x: auto; + } + + .inventory-table { + min-width: 980px; + } } diff --git a/CulinaryCommandApp/wwwroot/css/app.css b/CulinaryCommandApp/wwwroot/css/app.css index 95a4aba..e954a58 100644 --- a/CulinaryCommandApp/wwwroot/css/app.css +++ b/CulinaryCommandApp/wwwroot/css/app.css @@ -1,6 +1,9 @@ +@import url("https://fonts.googleapis.com/css2?family=Spline+Sans:wght@400;500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Space+Grotesk:wght@500;600&display=swap"); + html, body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: "Space Grotesk", "Source Sans 3", sans-serif; } a,