From b4855af43f01496b342d3ee96e90c3947e2e686b Mon Sep 17 00:00:00 2001 From: sassanix <39465071+sassanix@users.noreply.github.com> Date: Fri, 7 Mar 2025 16:12:15 -0400 Subject: [PATCH] Grid view, manuals, prices, table view, export option, filters ## [0.5.0] - 2025-03-07 ### Added - Enhanced filtering and sorting capabilities - Status filter (All, Active, Expiring Soon, Expired) - Multiple sorting options (Expiration Date, Purchase Date, Name) - Export filtered warranties as CSV - Improved filter controls layout - Mobile-responsive filter design - Multiple view options for warranty display - Grid view with card layout (default) - List view for compact horizontal display - Table view for structured data presentation - View preference saved between sessions - Responsive design for all view types - Optional purchase price tracking - Users can now add purchase prices to warranties - Price information displayed in warranty cards - Currency formatting with dollar sign - Included in warranty summary and exports ### Changed - Completely redesigned user interface - Modern card-based layout for warranties - Enhanced filter controls with improved styling - Better visual hierarchy with labeled filter groups - Custom dropdown styling with intuitive icons - Improved spacing and alignment throughout - Consistent color scheme and visual feedback - Responsive grid layout for warranty cards ### Fixed - Status indicator borders now correctly displayed for all warranty states - Green border for active warranties - Orange border for warranties expiring soon - Red border for expired warranties - Consistent status styling across all warranty cards - Form now resets to first tab after successful warranty submission - Manual filename now properly cleared when form is reset ## [0.4.0] - 2025-03-07 ### Added - Improved warranty creation process - Multi-step form with intuitive navigation - Progress indicator showing completion status - Enhanced validation with clear error messages - Summary review step before submission - Expiration date preview in summary - Responsive design for all device sizes ### Fixed - Progress indicator alignment issue in multi-step form - Contained indicator within form boundaries - Prevented overflow with improved CSS approach - Ensured consistent tab widths for better alignment - Improved tab navigation visual feedback ## [0.3.0] - 2025-03-07 ### Added - Product manual upload support - Users can now upload a second document for product manuals - Manual documents are displayed alongside invoices in the warranty details - Both add and edit forms support manual uploads - Product URL support - Users can now add website URLs for products - Links to product websites displayed in warranty cards - Easy access to product support and information pages ### Changed - Improved document link styling for consistency - Enhanced visual appearance of document links - Consistent styling between invoice and manual links - Better hover effects for document links - Fixed styling inconsistencies between document links - Improved warranty card layout - Document links now displayed side by side for better space utilization - Responsive design adapts to different screen sizes - More compact and organized appearance ### Fixed - Styling inconsistency between View Invoice and View Manual buttons - Removed unused CSS file to prevent styling conflicts --- CHANGELOG.md | 86 +++ backend/Dockerfile | 17 + backend/app.py | 46 +- backend/init.sql | 2 + backend/migrations/002_add_purchase_price.sql | 2 + backend/run_migrations.py | 105 +++ docker-compose.yml | 4 +- frontend/api-test.html | 197 ++--- frontend/index.html | 256 ++++-- frontend/script.js | 507 ++++++++++-- frontend/style.css | 729 ++++++++++++++++-- frontend/test-api.js | 44 ++ nginx.conf | 2 +- 13 files changed, 1708 insertions(+), 289 deletions(-) create mode 100644 backend/Dockerfile create mode 100644 backend/migrations/002_add_purchase_price.sql create mode 100644 backend/run_migrations.py create mode 100644 frontend/test-api.js diff --git a/CHANGELOG.md b/CHANGELOG.md index e016ec1..3a32d5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,91 @@ # Changelog + +## [0.5.0] - 2025-03-07 + +### Added +- Enhanced filtering and sorting capabilities + - Status filter (All, Active, Expiring Soon, Expired) + - Multiple sorting options (Expiration Date, Purchase Date, Name) + - Export filtered warranties as CSV + - Improved filter controls layout + - Mobile-responsive filter design +- Multiple view options for warranty display + - Grid view with card layout (default) + - List view for compact horizontal display + - Table view for structured data presentation + - View preference saved between sessions + - Responsive design for all view types +- Optional purchase price tracking + - Users can now add purchase prices to warranties + - Price information displayed in warranty cards + - Currency formatting with dollar sign + - Included in warranty summary and exports + +### Changed +- Completely redesigned user interface + - Modern card-based layout for warranties + - Enhanced filter controls with improved styling + - Better visual hierarchy with labeled filter groups + - Custom dropdown styling with intuitive icons + - Improved spacing and alignment throughout + - Consistent color scheme and visual feedback + - Responsive grid layout for warranty cards + +### Fixed +- Status indicator borders now correctly displayed for all warranty states + - Green border for active warranties + - Orange border for warranties expiring soon + - Red border for expired warranties +- Consistent status styling across all warranty cards +- Form now resets to first tab after successful warranty submission +- Manual filename now properly cleared when form is reset + +## [0.4.0] - 2025-03-07 + +### Added +- Improved warranty creation process + - Multi-step form with intuitive navigation + - Progress indicator showing completion status + - Enhanced validation with clear error messages + - Summary review step before submission + - Expiration date preview in summary + - Responsive design for all device sizes + +### Fixed +- Progress indicator alignment issue in multi-step form + - Contained indicator within form boundaries + - Prevented overflow with improved CSS approach + - Ensured consistent tab widths for better alignment +- Improved tab navigation visual feedback + +## [0.3.0] - 2025-03-07 + +### Added +- Product manual upload support + - Users can now upload a second document for product manuals + - Manual documents are displayed alongside invoices in the warranty details + - Both add and edit forms support manual uploads +- Product URL support + - Users can now add website URLs for products + - Links to product websites displayed in warranty cards + - Easy access to product support and information pages + +### Changed +- Improved document link styling for consistency + - Enhanced visual appearance of document links + - Consistent styling between invoice and manual links + - Better hover effects for document links + - Fixed styling inconsistencies between document links +- Improved warranty card layout + - Document links now displayed side by side for better space utilization + - Responsive design adapts to different screen sizes + - More compact and organized appearance + +### Fixed +- Styling inconsistency between View Invoice and View Manual buttons +- Removed unused CSS file to prevent styling conflicts + ## [0.2.5-beta] - 2025-03-07 ### Added diff --git a/backend/Dockerfile b/backend/Dockerfile new file mode 100644 index 0000000..19f735d --- /dev/null +++ b/backend/Dockerfile @@ -0,0 +1,17 @@ +FROM python:3.9-slim + +WORKDIR /app + +COPY requirements.txt . +RUN pip install --no-cache-dir -r requirements.txt + +COPY . . + +# Create directory for uploads +RUN mkdir -p /data/uploads && chmod 777 /data/uploads + +# Expose port +EXPOSE 5000 + +# Start the application +CMD ["python", "app.py"] \ No newline at end of file diff --git a/backend/app.py b/backend/app.py index 55103a1..80f6554 100644 --- a/backend/app.py +++ b/backend/app.py @@ -7,6 +7,7 @@ from werkzeug.utils import secure_filename from flask_cors import CORS import logging import time +from decimal import Decimal app = Flask(__name__) CORS(app) # Enable CORS @@ -96,6 +97,8 @@ def init_db(): expiration_date DATE, invoice_path TEXT, manual_path TEXT, + product_url TEXT, + purchase_price DECIMAL(10, 2), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ) ''') @@ -147,6 +150,9 @@ def get_warranties(): for key, value in warranty_dict.items(): if isinstance(value, (datetime, date)): warranty_dict[key] = value.isoformat() + # Convert Decimal objects to float for JSON serialization + elif isinstance(value, Decimal): + warranty_dict[key] = float(value) # Get serial numbers for this warranty warranty_id = warranty_dict['id'] @@ -186,6 +192,17 @@ def add_warranty(): product_name = request.form['product_name'] purchase_date_str = request.form['purchase_date'] serial_numbers = request.form.getlist('serial_numbers') + product_url = request.form.get('product_url', '') + + # Handle purchase price (optional) + purchase_price = None + if request.form.get('purchase_price'): + try: + purchase_price = float(request.form.get('purchase_price')) + if purchase_price < 0: + return jsonify({"error": "Purchase price cannot be negative"}), 400 + except ValueError: + return jsonify({"error": "Purchase price must be a valid number"}), 400 try: purchase_date = datetime.strptime(purchase_date_str, '%Y-%m-%d') @@ -237,10 +254,10 @@ def add_warranty(): with conn.cursor() as cur: # Insert warranty cur.execute(''' - INSERT INTO warranties (product_name, purchase_date, warranty_years, expiration_date, invoice_path, manual_path) - VALUES (%s, %s, %s, %s, %s, %s) + INSERT INTO warranties (product_name, purchase_date, warranty_years, expiration_date, invoice_path, manual_path, product_url, purchase_price) + VALUES (%s, %s, %s, %s, %s, %s, %s, %s) RETURNING id - ''', (product_name, purchase_date, warranty_years, expiration_date, db_invoice_path, db_manual_path)) + ''', (product_name, purchase_date, warranty_years, expiration_date, db_invoice_path, db_manual_path, product_url, purchase_price)) warranty_id = cur.fetchone()[0] # Insert serial numbers @@ -334,6 +351,17 @@ def update_warranty(warranty_id): product_name = request.form['product_name'] purchase_date_str = request.form['purchase_date'] serial_numbers = request.form.getlist('serial_numbers') + product_url = request.form.get('product_url', '') + + # Handle purchase price (optional) + purchase_price = None + if request.form.get('purchase_price'): + try: + purchase_price = float(request.form.get('purchase_price')) + if purchase_price < 0: + return jsonify({"error": "Purchase price cannot be negative"}), 400 + except ValueError: + return jsonify({"error": "Purchase price must be a valid number"}), 400 try: purchase_date = datetime.strptime(purchase_date_str, '%Y-%m-%d') @@ -400,10 +428,10 @@ def update_warranty(warranty_id): cur.execute(''' UPDATE warranties SET product_name = %s, purchase_date = %s, warranty_years = %s, - expiration_date = %s, invoice_path = %s, manual_path = %s + expiration_date = %s, invoice_path = %s, manual_path = %s, product_url = %s, purchase_price = %s WHERE id = %s ''', (product_name, purchase_date, warranty_years, expiration_date, - db_invoice_path, db_manual_path, warranty_id)) + db_invoice_path, db_manual_path, product_url, purchase_price, warranty_id)) # Update serial numbers # First, delete existing serial numbers for this warranty @@ -508,7 +536,7 @@ def get_statistics(): cursor.execute(""" SELECT id, product_name, purchase_date, warranty_years, - expiration_date, invoice_path + expiration_date, invoice_path, manual_path, product_url, purchase_price FROM warranties WHERE expiration_date >= %s AND expiration_date <= %s ORDER BY expiration_date @@ -526,6 +554,10 @@ def get_statistics(): warranty['purchase_date'] = warranty['purchase_date'].isoformat() if warranty['expiration_date']: warranty['expiration_date'] = warranty['expiration_date'].isoformat() + + # Convert Decimal objects to float for JSON serialization + if warranty.get('purchase_price') and isinstance(warranty['purchase_price'], Decimal): + warranty['purchase_price'] = float(warranty['purchase_price']) recent_warranties.append(warranty) @@ -545,7 +577,7 @@ def get_statistics(): return jsonify({"error": str(e)}), 500 finally: - if cursor and cursor.closed is False: + if cursor: cursor.close() if conn: release_db_connection(conn) diff --git a/backend/init.sql b/backend/init.sql index f2c5849..e47ec57 100644 --- a/backend/init.sql +++ b/backend/init.sql @@ -8,6 +8,8 @@ CREATE TABLE warranties ( expiration_date DATE, invoice_path TEXT, manual_path TEXT, + product_url TEXT, + purchase_price DECIMAL(10, 2), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); diff --git a/backend/migrations/002_add_purchase_price.sql b/backend/migrations/002_add_purchase_price.sql new file mode 100644 index 0000000..44697c9 --- /dev/null +++ b/backend/migrations/002_add_purchase_price.sql @@ -0,0 +1,2 @@ +-- Add purchase_price column to warranties table +ALTER TABLE warranties ADD COLUMN purchase_price DECIMAL(10, 2); \ No newline at end of file diff --git a/backend/run_migrations.py b/backend/run_migrations.py new file mode 100644 index 0000000..ad1b131 --- /dev/null +++ b/backend/run_migrations.py @@ -0,0 +1,105 @@ +#!/usr/bin/env python3 +import os +import sys +import psycopg2 +import logging +from psycopg2 import pool +import time + +# Configure logging +logging.basicConfig(level=logging.INFO) +logger = logging.getLogger(__name__) + +# PostgreSQL connection details +DB_HOST = os.environ.get('DB_HOST', 'warrackerdb') +DB_NAME = os.environ.get('DB_NAME', 'warranty_db') +DB_USER = os.environ.get('DB_USER', 'warranty_user') +DB_PASSWORD = os.environ.get('DB_PASSWORD', 'warranty_password') + +def create_db_connection(max_retries=5, retry_delay=5): + """Create a database connection with retry logic""" + attempt = 0 + last_exception = None + + while attempt < max_retries: + try: + logger.info(f"Attempting to connect to database (attempt {attempt+1}/{max_retries})") + conn = psycopg2.connect( + host=DB_HOST, + database=DB_NAME, + user=DB_USER, + password=DB_PASSWORD + ) + logger.info("Database connection successful") + return conn + except Exception as e: + last_exception = e + logger.error(f"Database connection error: {e}") + logger.info(f"Retrying in {retry_delay} seconds...") + time.sleep(retry_delay) + attempt += 1 + + # If we got here, all connection attempts failed + logger.error(f"Failed to connect to database after {max_retries} attempts") + raise last_exception + +def run_migrations(): + """Run all migration scripts in order""" + conn = None + try: + conn = create_db_connection() + conn.autocommit = False + cursor = conn.cursor() + + # Get list of migration files + migration_dir = os.path.join(os.path.dirname(__file__), 'migrations') + migration_files = sorted([f for f in os.listdir(migration_dir) if f.endswith('.sql')]) + + # Create migrations table if it doesn't exist + cursor.execute(''' + CREATE TABLE IF NOT EXISTS migrations ( + id SERIAL PRIMARY KEY, + filename VARCHAR(255) NOT NULL UNIQUE, + applied_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP + ) + ''') + + # Get already applied migrations + cursor.execute('SELECT filename FROM migrations') + applied_migrations = {row[0] for row in cursor.fetchall()} + + # Apply new migrations + for migration_file in migration_files: + if migration_file in applied_migrations: + logger.info(f"Migration {migration_file} already applied, skipping") + continue + + logger.info(f"Applying migration: {migration_file}") + migration_path = os.path.join(migration_dir, migration_file) + + with open(migration_path, 'r') as f: + migration_sql = f.read() + + try: + cursor.execute(migration_sql) + cursor.execute('INSERT INTO migrations (filename) VALUES (%s)', (migration_file,)) + logger.info(f"Migration {migration_file} applied successfully") + except Exception as e: + conn.rollback() + logger.error(f"Error applying migration {migration_file}: {e}") + raise + + conn.commit() + logger.info("All migrations applied successfully") + + except Exception as e: + logger.error(f"Migration error: {e}") + if conn: + conn.rollback() + sys.exit(1) + finally: + if conn: + conn.close() + +if __name__ == "__main__": + run_migrations() \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 50c94f8..d43c1d3 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,3 +1,5 @@ +version: '3' + services: warracker: build: . @@ -30,6 +32,6 @@ services: interval: 10s timeout: 5s retries: 5 - + volumes: postgres_data: \ No newline at end of file diff --git a/frontend/api-test.html b/frontend/api-test.html index 25252eb..f32c83f 100644 --- a/frontend/api-test.html +++ b/frontend/api-test.html @@ -3,145 +3,88 @@ - API Test Page + API Connection Test + + -
- Home - Status Page - Simple Test - Chart Test - API Test - Page Test -
+ +
+
+
+ +

Warranty Tracker

+
+
+ + Home + + + Status + +
+
+
-

API Test Page

-

Use this page to test various API endpoints and see if they're responding correctly.

- -
-

Test Simple API Endpoint

- - 
Results will appear here
-
- -
-

Test Warranties API Endpoint

- - 
Results will appear here
-
- -
-

Test Statistics API Endpoint

- - 
Results will appear here
-
- - +
+
+

Testing API Connection

+
+
+
+

Checking API connection...

+
+ +
+

Manual API Test

+

You can also test the API manually with tools like curl:

+ 
curl -X GET http://localhost:8005/api/warranties
+
+ +
+ + + Back to Home + +
+
+
+ + + + + \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index 2a148ce..1a55f5c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -62,57 +62,159 @@

Add New Warranty

+
+
+ Product +
+
+ Warranty +
+
+ Documents +
+
+ Summary +
+
-
- - -
- -
- - -
- -
- - -
- -
- -
-
- - + +
+
+ + +
+ +
+ + +
+ +
+ +
+
+ + +
-
- -
- - + +
+
+ + +
+ +
+ + +
+ +
+ +
+ $ + +
-
-
- -
- - + +
+
+ +
+ + +
+
+
+ +
+ +
+ + +
+
-
- + +
+

Review Your Warranty Information

+
+
+

Product Information

+
+ Product Name: + - +
+
+ Product URL: + - +
+
+ Serial Numbers: +
-
+
+
+ +
+

Warranty Details

+
+ Purchase Date: + - +
+
+ Warranty Period: + - +
+
+ Expiration Date: + - +
+
+ Purchase Price: + - +
+
+ +
+

Documents

+
+ Invoice/Receipt: + - +
+
+ Product Manual: + - +
+
+
+ +
+ +
+
+ + +
+ + +
@@ -125,12 +227,65 @@ -
- - +
+
+ + +
+ +
+
+ + +
+ +
+ + +
+ +
+ +
+ + + +
+
+ + +
-
+
+ +
+ + Product + Status + Purchase Date + Expiration + Actions + +
+
@@ -157,6 +312,11 @@
+
+ + +
+
@@ -167,6 +327,14 @@
+
+ +
+ $ + +
+
+
diff --git a/frontend/script.js b/frontend/script.js index c918267..3f3348d 100644 --- a/frontend/script.js +++ b/frontend/script.js @@ -3,6 +3,27 @@ const warrantyForm = document.getElementById('warrantyForm'); const settingsBtn = document.getElementById('settingsBtn'); const settingsMenu = document.getElementById('settingsMenu'); const darkModeToggle = document.getElementById('darkModeToggle'); +const warrantiesList = document.getElementById('warrantiesList'); +const refreshBtn = document.getElementById('refreshBtn'); +const searchInput = document.getElementById('searchWarranties'); +const statusFilter = document.getElementById('statusFilter'); +const sortBySelect = document.getElementById('sortBy'); +const exportBtn = document.getElementById('exportBtn'); +const gridViewBtn = document.getElementById('gridViewBtn'); +const listViewBtn = document.getElementById('listViewBtn'); +const tableViewBtn = document.getElementById('tableViewBtn'); +const tableViewHeader = document.querySelector('.table-view-header'); +const fileInput = document.getElementById('invoice'); +const fileName = document.getElementById('fileName'); +const manualInput = document.getElementById('manual'); +const manualFileName = document.getElementById('manualFileName'); +const editModal = document.getElementById('editModal'); +const deleteModal = document.getElementById('deleteModal'); +const editWarrantyForm = document.getElementById('editWarrantyForm'); +const saveWarrantyBtn = document.getElementById('saveWarrantyBtn'); +const confirmDeleteBtn = document.getElementById('confirmDeleteBtn'); +const loadingContainer = document.getElementById('loadingContainer'); +const toastContainer = document.getElementById('toastContainer'); // Theme Management function setTheme(isDark) { @@ -73,27 +94,18 @@ function addSerialNumberInput(container = serialNumbersContainer) { container.appendChild(newInput); } -const warrantiesList = document.getElementById('warrantiesList'); -const refreshBtn = document.getElementById('refreshBtn'); -const searchInput = document.getElementById('searchWarranties'); -const fileInput = document.getElementById('invoice'); -const fileName = document.getElementById('fileName'); -const manualInput = document.getElementById('manual'); -const manualFileName = document.getElementById('manualFileName'); -const editModal = document.getElementById('editModal'); -const deleteModal = document.getElementById('deleteModal'); -const editWarrantyForm = document.getElementById('editWarrantyForm'); -const saveWarrantyBtn = document.getElementById('saveWarrantyBtn'); -const confirmDeleteBtn = document.getElementById('confirmDeleteBtn'); -const loadingContainer = document.getElementById('loadingContainer'); -const toastContainer = document.getElementById('toastContainer'); - // Variables let warranties = []; let currentWarrantyId = null; +let currentFilters = { + search: '', + status: 'all', + sort: 'expiration' +}; +let currentView = 'grid'; // Default view // API URL -const API_URL = '/api/warranties'; // CORRECTED API_URL (relative URL) +const API_URL = '/api/warranties'; // Event Listeners document.addEventListener('DOMContentLoaded', () => { @@ -114,6 +126,36 @@ document.addEventListener('DOMContentLoaded', () => { e.stopPropagation(); }); }); + + // Initialize form tabs + initFormTabs(); + + // Filter event listeners + searchInput.addEventListener('input', () => { + currentFilters.search = searchInput.value.toLowerCase(); + applyFilters(); + }); + + statusFilter.addEventListener('change', () => { + currentFilters.status = statusFilter.value; + applyFilters(); + }); + + sortBySelect.addEventListener('change', () => { + currentFilters.sort = sortBySelect.value; + applyFilters(); + }); + + // View switcher event listeners + gridViewBtn.addEventListener('click', () => switchView('grid')); + listViewBtn.addEventListener('click', () => switchView('list')); + tableViewBtn.addEventListener('click', () => switchView('table')); + + // Export button event listener + exportBtn.addEventListener('click', exportWarranties); + + // Load saved view preference + loadViewPreference(); }); // File input change event @@ -132,9 +174,6 @@ warrantyForm.addEventListener('submit', addWarranty); // Refresh button refreshBtn.addEventListener('click', loadWarranties); -// Search input -searchInput.addEventListener('input', filterWarranties); - // Save warranty changes saveWarrantyBtn.addEventListener('click', updateWarranty); @@ -226,22 +265,30 @@ function renderWarranties(filteredWarranties = null) { warrantiesList.innerHTML = ''; - // Sort warranties: expiring soon first, then active, then expired - warrantiesToRender.sort((a, b) => { - const dateA = new Date(a.expiration_date); - const dateB = new Date(b.expiration_date); - - const isExpiredA = dateA < today; - const isExpiredB = dateB < today; - - if (isExpiredA && !isExpiredB) return 1; - if (!isExpiredA && isExpiredB) return -1; - - // Both active or both expired, sort by date - return dateA - dateB; + // Apply sorting based on current sort selection + const sortedWarranties = [...warrantiesToRender].sort((a, b) => { + switch (currentFilters.sort) { + case 'name': + return a.product_name.localeCompare(b.product_name); + case 'purchase': + return new Date(b.purchase_date) - new Date(a.purchase_date); + case 'expiration': + default: + const dateA = new Date(a.expiration_date); + const dateB = new Date(b.expiration_date); + + const isExpiredA = dateA < today; + const isExpiredB = dateB < today; + + if (isExpiredA && !isExpiredB) return 1; + if (!isExpiredA && isExpiredB) return -1; + + // Both active or both expired, sort by date + return dateA - dateB; + } }); - warrantiesToRender.forEach(warranty => { + sortedWarranties.forEach(warranty => { const purchaseDate = new Date(warranty.purchase_date); const expirationDate = new Date(warranty.expiration_date); const daysRemaining = Math.floor((expirationDate - today) / (1000 * 60 * 60 * 24)); @@ -259,13 +306,17 @@ function renderWarranties(filteredWarranties = null) { statusText = `${daysRemaining} days remaining`; } + // Add status to warranty object for filtering + warranty.status = statusClass; + warranty.daysRemaining = daysRemaining; + // Make sure serial numbers array exists and is valid const validSerialNumbers = Array.isArray(warranty.serial_numbers) ? warranty.serial_numbers.filter(sn => sn && typeof sn === 'string' && sn.trim() !== '') : []; const cardElement = document.createElement('div'); - cardElement.className = `warranty-card ${statusClass === 'expired' ? 'expired' : statusClass === 'expiring' ? 'expiring-soon' : ''}`; + cardElement.className = `warranty-card ${statusClass === 'expired' ? 'expired' : statusClass === 'expiring' ? 'expiring-soon' : 'active'}`; cardElement.innerHTML = `

${warranty.product_name}

@@ -282,6 +333,7 @@ function renderWarranties(filteredWarranties = null) {
Purchased: ${formatDate(purchaseDate)}
Warranty: ${warranty.warranty_years} ${warranty.warranty_years > 1 ? 'years' : 'year'}
Expires: ${formatDate(expirationDate)}
+ ${warranty.purchase_price ? `
Price: $${parseFloat(warranty.purchase_price).toFixed(2)}
` : ''} ${statusText} ${validSerialNumbers.length > 0 ? `
@@ -291,20 +343,23 @@ function renderWarranties(filteredWarranties = null) {
` : ''} - ${warranty.invoice_path ? ` -
+
+ ${warranty.product_url ? ` + + Product Website + + ` : ''} + ${warranty.invoice_path ? ` - View Invoice + Invoice -
- ` : ''} - ${warranty.manual_path ? ` -
+ ` : ''} + ${warranty.manual_path ? ` - View Manual + Manual -
- ` : ''} + ` : ''} +
`; @@ -381,6 +436,7 @@ async function addWarranty(event) { // Reset form warrantyForm.reset(); fileName.textContent = ''; + manualFileName.textContent = ''; // Completely reset serial number inputs serialNumbersContainer.innerHTML = ''; @@ -402,6 +458,9 @@ async function addWarranty(event) { serialNumbersContainer.appendChild(initialInput); + // Switch back to the first tab + switchToTab(0); + // Reload warranties loadWarranties(); } catch (error) { @@ -416,10 +475,11 @@ function openEditModal(warranty) { currentWarrantyId = warranty.id; // Populate form fields - document.getElementById('editWarrantyId').value = warranty.id; document.getElementById('editProductName').value = warranty.product_name; - document.getElementById('editPurchaseDate').value = new Date(warranty.purchase_date).toISOString().split('T')[0]; + document.getElementById('editProductUrl').value = warranty.product_url || ''; + document.getElementById('editPurchaseDate').value = warranty.purchase_date.split('T')[0]; document.getElementById('editWarrantyYears').value = warranty.warranty_years; + document.getElementById('editPurchasePrice').value = warranty.purchase_price || ''; // Clear existing serial number inputs const editSerialNumbersContainer = document.getElementById('editSerialNumbersContainer'); @@ -585,4 +645,359 @@ async function deleteWarranty() { } finally { hideLoading(); } +} + +// Form tab navigation variables +const formTabs = Array.from(document.querySelectorAll('.form-tab')); +const tabContents = Array.from(document.querySelectorAll('.tab-content')); +let currentTabIndex = 0; + +// Initialize form tabs +function initFormTabs() { + // Hide the submit button initially + const submitButton = document.querySelector('button[type="submit"]'); + if (submitButton) { + submitButton.style.display = 'none'; + } + + // Show/hide navigation buttons based on current tab + updateNavigationButtons(); + + // Add event listeners for tab navigation + document.querySelector('.next-tab').addEventListener('click', () => { + if (validateTab(currentTabIndex)) { + switchToTab(currentTabIndex + 1); + } else { + showValidationErrors(currentTabIndex); + } + }); + + document.querySelector('.prev-tab').addEventListener('click', () => { + switchToTab(currentTabIndex - 1); + }); + + // Add click event for tab headers + formTabs.forEach((tab, index) => { + tab.addEventListener('click', () => { + // Only allow clicking on previous tabs or current tab + if (index <= currentTabIndex) { + switchToTab(index); + } + }); + }); +} + +// Switch to a specific tab +function switchToTab(index) { + // Ensure index is within bounds + if (index < 0 || index >= formTabs.length) return; + + // Update active tab + formTabs.forEach(tab => tab.classList.remove('active')); + tabContents.forEach(content => content.classList.remove('active')); + + formTabs[index].classList.add('active'); + tabContents[index].classList.add('active'); + + // Update current tab index + currentTabIndex = index; + + // Update progress indicator + document.querySelector('.form-tabs').setAttribute('data-step', currentTabIndex); + + // Update completed tabs + updateCompletedTabs(); + + // Update navigation buttons + updateNavigationButtons(); + + // Update summary if on summary tab + if (index === formTabs.length - 1) { + updateSummary(); + } +} + +// Update navigation buttons based on current tab +function updateNavigationButtons() { + const prevButton = document.querySelector('.prev-tab'); + const nextButton = document.querySelector('.next-tab'); + const submitButton = document.querySelector('button[type="submit"]'); + + // Hide/show previous button + prevButton.style.display = currentTabIndex === 0 ? 'none' : 'block'; + + // Hide/show next button and submit button + if (currentTabIndex === formTabs.length - 1) { + nextButton.style.display = 'none'; + submitButton.style.display = 'block'; + } else { + nextButton.style.display = 'block'; + submitButton.style.display = 'none'; + } +} + +// Update completed tabs +function updateCompletedTabs() { + formTabs.forEach((tab, index) => { + if (index < currentTabIndex) { + tab.classList.add('completed'); + } else { + tab.classList.remove('completed'); + } + }); +} + +// Validate a specific tab +function validateTab(tabIndex) { + const tabContent = tabContents[tabIndex]; + const requiredInputs = tabContent.querySelectorAll('input[required]'); + let isValid = true; + + requiredInputs.forEach(input => { + if (!input.value.trim()) { + isValid = false; + input.classList.add('invalid'); + } else { + input.classList.remove('invalid'); + } + }); + + return isValid; +} + +// Show validation errors for a specific tab +function showValidationErrors(tabIndex) { + const tabContent = tabContents[tabIndex]; + const requiredInputs = tabContent.querySelectorAll('input[required]'); + + requiredInputs.forEach(input => { + if (!input.value.trim()) { + input.classList.add('invalid'); + + // Add validation message if not already present + let validationMessage = input.nextElementSibling; + if (!validationMessage || !validationMessage.classList.contains('validation-message')) { + validationMessage = document.createElement('div'); + validationMessage.className = 'validation-message'; + validationMessage.textContent = 'This field is required'; + input.parentNode.insertBefore(validationMessage, input.nextSibling); + } + } + }); + + // Show toast message + showToast('Please fill in all required fields', 'error'); +} + +// Update summary tab with current form values +function updateSummary() { + // Product information + document.getElementById('summary-product-name').textContent = + document.getElementById('productName').value || '-'; + + document.getElementById('summary-product-url').textContent = + document.getElementById('productUrl').value || '-'; + + // Serial numbers + const serialNumbers = []; + document.querySelectorAll('input[name="serial_numbers[]"]').forEach(input => { + if (input.value.trim()) { + serialNumbers.push(input.value.trim()); + } + }); + + const serialNumbersContainer = document.getElementById('summary-serial-numbers'); + if (serialNumbers.length > 0) { + serialNumbersContainer.innerHTML = '
    ' + + serialNumbers.map(sn => `
  • ${sn}
    • `).join('') + + '
'; + } else { + serialNumbersContainer.textContent = 'None'; + } + + // Warranty details + const purchaseDate = document.getElementById('purchaseDate').value; + document.getElementById('summary-purchase-date').textContent = purchaseDate ? + new Date(purchaseDate).toLocaleDateString() : '-'; + + const warrantyYears = document.getElementById('warrantyYears').value; + document.getElementById('summary-warranty-years').textContent = warrantyYears ? + `${warrantyYears} ${warrantyYears > 1 ? 'years' : 'year'}` : '-'; + + // Calculate and display expiration date + if (purchaseDate && warrantyYears) { + const expirationDate = new Date(purchaseDate); + expirationDate.setFullYear(expirationDate.getFullYear() + parseInt(warrantyYears)); + document.getElementById('summary-expiration-date').textContent = + expirationDate.toLocaleDateString(); + } else { + document.getElementById('summary-expiration-date').textContent = '-'; + } + + // Purchase price + const purchasePrice = document.getElementById('purchasePrice').value; + document.getElementById('summary-purchase-price').textContent = purchasePrice ? + `$${parseFloat(purchasePrice).toFixed(2)}` : 'Not specified'; + + // Documents + const invoiceFile = document.getElementById('invoice').files[0]; + document.getElementById('summary-invoice').textContent = invoiceFile ? + invoiceFile.name : 'No file selected'; + + const manualFile = document.getElementById('manual').files[0]; + document.getElementById('summary-manual').textContent = manualFile ? + manualFile.name : 'No file selected'; +} + +// Add input event listeners to remove validation errors when user types +document.addEventListener('input', (e) => { + if (e.target.hasAttribute('required') && e.target.classList.contains('invalid')) { + if (e.target.value.trim()) { + e.target.classList.remove('invalid'); + + // Remove validation message if exists + const validationMessage = e.target.nextElementSibling; + if (validationMessage && validationMessage.classList.contains('validation-message')) { + validationMessage.remove(); + } + } + } +}); + +function applyFilters() { + let filteredWarranties = [...warranties]; + + // Apply search filter + if (currentFilters.search) { + filteredWarranties = filteredWarranties.filter(warranty => + warranty.product_name.toLowerCase().includes(currentFilters.search) + ); + } + + // Apply status filter + if (currentFilters.status !== 'all') { + filteredWarranties = filteredWarranties.filter(warranty => { + // We need to calculate the status if it's not already set + if (!warranty.status) { + const today = new Date(); + const expirationDate = new Date(warranty.expiration_date); + const daysRemaining = Math.floor((expirationDate - today) / (1000 * 60 * 60 * 24)); + + if (daysRemaining < 0) { + warranty.status = 'expired'; + } else if (daysRemaining < 30) { + warranty.status = 'expiring'; + } else { + warranty.status = 'active'; + } + } + + return warranty.status === currentFilters.status; + }); + } + + renderWarranties(filteredWarranties); +} + +function exportWarranties() { + // Get filtered warranties + let warrantiesToExport = [...warranties]; + + // Apply current filters + if (currentFilters.search) { + warrantiesToExport = warrantiesToExport.filter(warranty => + warranty.product_name.toLowerCase().includes(currentFilters.search) + ); + } + + if (currentFilters.status !== 'all') { + warrantiesToExport = warrantiesToExport.filter(warranty => + warranty.status === currentFilters.status + ); + } + + // Create CSV content + let csvContent = "data:text/csv;charset=utf-8,"; + + // Add headers + csvContent += "Product Name,Purchase Date,Warranty Period,Expiration Date,Status,Serial Numbers\n"; + + // Add data rows + warrantiesToExport.forEach(warranty => { + const purchaseDate = new Date(warranty.purchase_date).toLocaleDateString(); + const expirationDate = new Date(warranty.expiration_date).toLocaleDateString(); + const serialNumbers = Array.isArray(warranty.serial_numbers) + ? warranty.serial_numbers.join('; ') + : ''; + + // Calculate status if not already set + if (!warranty.status) { + const today = new Date(); + const expDate = new Date(warranty.expiration_date); + const daysRemaining = Math.floor((expDate - today) / (1000 * 60 * 60 * 24)); + + if (daysRemaining < 0) { + warranty.status = 'Expired'; + } else if (daysRemaining < 30) { + warranty.status = 'Expiring Soon'; + } else { + warranty.status = 'Active'; + } + } + + // Format status for CSV + let statusText = warranty.status.charAt(0).toUpperCase() + warranty.status.slice(1); + if (statusText === 'Expiring') statusText = 'Expiring Soon'; + + // Create CSV row + csvContent += `"${warranty.product_name}",${purchaseDate},${warranty.warranty_years} years,${expirationDate},${statusText},"${serialNumbers}"\n`; + }); + + // Create download link + const encodedUri = encodeURI(csvContent); + const link = document.createElement("a"); + link.setAttribute("href", encodedUri); + link.setAttribute("download", "warranties.csv"); + document.body.appendChild(link); + + // Trigger download + link.click(); + + // Clean up + document.body.removeChild(link); + + showToast('Warranties exported successfully', 'success'); +} + +// Function to switch between views +function switchView(viewType) { + // Update current view + currentView = viewType; + + // Update view buttons + gridViewBtn.classList.toggle('active', viewType === 'grid'); + listViewBtn.classList.toggle('active', viewType === 'list'); + tableViewBtn.classList.toggle('active', viewType === 'table'); + + // Update warranties list class + warrantiesList.className = `warranties-list ${viewType}-view`; + + // Show/hide table header for table view + if (tableViewHeader) { + tableViewHeader.classList.toggle('visible', viewType === 'table'); + } + + // Re-render warranties with the new view + renderWarranties(); + + // Save view preference to localStorage + localStorage.setItem('warrantyView', viewType); +} + +// Load saved view preference +function loadViewPreference() { + const savedView = localStorage.getItem('warrantyView'); + if (savedView) { + switchView(savedView); + } } \ No newline at end of file diff --git a/frontend/style.css b/frontend/style.css index f3efb13..ab25314 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -12,6 +12,7 @@ --primary-dark: #2980b9; --secondary-color: #2ecc71; --danger-color: #e74c3c; + --warning-color: #f39c12; --text-color: #333333; --light-gray: #f5f5f5; --medium-gray: #e0e0e0; @@ -40,6 +41,7 @@ --primary-dark: #339af0; --secondary-color: #40c057; --danger-color: #fa5252; + --warning-color: #ff922b; --light-gray: #2d2d2d; --medium-gray: #404040; --dark-gray: #909090; @@ -113,6 +115,162 @@ header .container { padding: 25px; } +/* Form Tabs */ +.form-tabs { + display: flex; + margin-bottom: 20px; + position: relative; + border-bottom: 2px solid var(--medium-gray); + overflow: hidden; +} + +.form-tabs::after { + display: none; +} + +.form-tabs::before { + content: ''; + position: absolute; + bottom: -2px; + height: 2px; + background-color: var(--secondary-color); + transition: all 0.3s ease; + width: 25%; + z-index: 1; +} + +.form-tabs[data-step="0"]::before { + left: 0; +} + +.form-tabs[data-step="1"]::before { + left: 25%; +} + +.form-tabs[data-step="2"]::before { + left: 50%; +} + +.form-tabs[data-step="3"]::before { + left: 75%; +} + +.form-tab { + flex: 1; + text-align: center; + padding: 15px 10px; + cursor: pointer; + position: relative; + color: var(--dark-gray); + transition: color 0.3s ease; + box-sizing: border-box; + width: 25%; /* Ensure each tab is exactly 25% width */ +} + +.form-tab:hover { + color: var(--primary-color); +} + +.form-tab.active { + color: var(--primary-color); + font-weight: 600; +} + +.form-tab.completed { + color: var(--secondary-color); +} + +.form-tab.completed::after { + content: '\f00c'; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + position: absolute; + top: 10px; + right: 10px; + font-size: 0.8rem; +} + +.form-tab i { + margin-right: 5px; +} + +.tab-content { + display: none; +} + +.tab-content.active { + display: block; + animation: fade-in 0.3s ease; +} + +.tab-navigation { + display: flex; + justify-content: space-between; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid var(--medium-gray); +} + +.tab-navigation .btn { + min-width: 120px; +} + +.tab-navigation .btn i { + margin-right: 5px; +} + +.tab-navigation .btn:last-child i { + margin-right: 0; + margin-left: 5px; +} + +input.invalid { + border-color: var(--danger-color); + box-shadow: 0 0 0 1px var(--danger-color); + animation: shake 0.3s ease; +} + +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } +} + +/* Progress indicator */ +.form-tabs { + display: flex; + border-bottom: 2px solid var(--medium-gray); + margin-bottom: 20px; + position: relative; +} + +.form-tabs::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + height: 2px; + background-color: var(--secondary-color); + transition: width 0.3s ease; +} + +.form-tabs[data-step="0"]::after { + width: calc(100% / 3); +} + +.form-tabs[data-step="1"]::after { + width: calc(200% / 3); +} + +.form-tabs[data-step="2"]::after { + width: 100%; +} + +@keyframes fade-in { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + .form-panel h2 { color: var(--primary-color); margin-bottom: 20px; @@ -294,79 +452,86 @@ header .container { } .warranties-list { - max-height: 600px; - overflow-y: auto; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + margin-top: 20px; } .warranty-card { background-color: var(--card-bg); border-radius: var(--border-radius); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); - padding: 15px; - margin-bottom: 15px; + box-shadow: var(--shadow); + overflow: hidden; transition: var(--transition); - border-left: 4px solid var(--primary-color); - position: relative; + border: 1px solid var(--border-color); + display: flex; + flex-direction: column; } .warranty-card:hover { + transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); - transform: translateY(-2px); } .warranty-card.expired { - border-left-color: var(--danger-color); + border-left: 4px solid var(--danger-color); } .warranty-card.expiring-soon { - border-left-color: #f39c12; + border-left: 4px solid var(--warning-color); +} + +.warranty-card.active { + border-left: 4px solid var(--secondary-color); } .warranty-header { display: flex; justify-content: space-between; - align-items: flex-start; - margin-bottom: 10px; + align-items: center; + padding: 15px; + background-color: rgba(0, 0, 0, 0.03); + border-bottom: 1px solid var(--border-color); } .warranty-title { - font-size: 1.2rem; + margin: 0; + font-size: 1.1rem; font-weight: 600; color: var(--text-color); - margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; } .warranty-actions { display: flex; - gap: 10px; + gap: 8px; } .action-btn { - color: var(--primary-color); - margin-right: 8px; - font-size: 1.1rem; - transition: var(--transition); background: none; border: none; + font-size: 1rem; cursor: pointer; - padding: 0; - display: inline-flex; + color: var(--dark-gray); + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; - text-decoration: none; + transition: var(--transition); } .action-btn:hover { - color: var(--primary-dark); - transform: scale(1.1); + background-color: rgba(0, 0, 0, 0.05); } .edit-btn:hover { - color: var(--primary-dark); -} - -.view-btn:hover { - color: var(--secondary-color); + color: var(--primary-color); } .delete-btn:hover { @@ -374,12 +539,15 @@ header .container { } .warranty-details { - color: var(--dark-gray); - font-size: 0.9rem; + padding: 15px; + flex-grow: 1; + display: flex; + flex-direction: column; } .warranty-details div { - margin-bottom: 5px; + margin-bottom: 8px; + font-size: 0.95rem; } .warranty-details span { @@ -389,53 +557,47 @@ header .container { .warranty-status { display: inline-block; - padding: 3px 10px; + padding: 4px 10px; border-radius: 20px; - font-size: 0.75rem; - font-weight: 500; - margin-top: 10px; -} - -.status-expired, .status-expiring, .status-active { - display: inline-block; - padding: 4px 8px; - border-radius: 4px; font-size: 0.85rem; font-weight: 600; + margin: 10px 0; } .status-active { - background-color: rgba(76, 175, 80, 0.2); - color: #4CAF50; + background-color: rgba(46, 204, 113, 0.15); + color: #27ae60; } .status-expired { - background-color: rgba(244, 67, 54, 0.2); - color: #F44336; + background-color: rgba(231, 76, 60, 0.15); + color: #c0392b; } .status-expiring { - background-color: rgba(255, 152, 0, 0.2); - color: #FF9800; + background-color: rgba(241, 196, 15, 0.15); + color: #f39c12; } -.invoice-link { - display: inline-flex; - align-items: center; - color: var(--primary-color); - text-decoration: none; - font-weight: 500; +.serial-numbers { margin-top: 10px; - transition: var(--transition); + margin-bottom: 15px; } -.invoice-link i { - margin-right: 5px; +.serial-numbers strong { + display: block; + margin-bottom: 5px; + font-size: 0.9rem; } -.invoice-link:hover { - color: var(--primary-dark); - text-decoration: underline; +.serial-numbers ul { + margin: 0; + padding-left: 20px; + font-size: 0.9rem; +} + +.serial-numbers li { + margin-bottom: 3px; } /* ===== MODAL ===== */ @@ -669,6 +831,16 @@ header .container { .warranty-actions { margin-top: 10px; } + + .document-links-row { + flex-direction: column; + gap: 5px; + } + + .invoice-link, .manual-link, .product-link { + width: 100%; + justify-content: center; + } } /* ===== SETTINGS MENU ===== */ @@ -1301,7 +1473,15 @@ tr.status-expiring { margin-top: 10px; } -.invoice-link, .manual-link { +.document-links-row { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 15px; + justify-content: flex-start; +} + +.invoice-link, .manual-link, .product-link { display: inline-flex !important; align-items: center !important; color: var(--primary-color) !important; @@ -1312,15 +1492,438 @@ tr.status-expiring { border-radius: var(--border-radius) !important; transition: var(--transition) !important; border: none !important; + margin: 0 !important; + white-space: nowrap !important; } -.invoice-link i, .manual-link i { +.invoice-link i, .manual-link i, .product-link i { margin-right: 5px !important; font-size: 1rem !important; } -.invoice-link:hover, .manual-link:hover { +.invoice-link:hover, .manual-link:hover, .product-link:hover { text-decoration: none !important; background-color: var(--medium-gray) !important; color: var(--primary-dark) !important; +} +.validation-message { + color: var(--danger-color); + font-size: 0.85rem; + margin-top: 5px; + animation: fade-in 0.3s ease; +} + +/* Improve the visual feedback for invalid inputs */ +input.invalid { + border-color: var(--danger-color); + box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.25); + background-color: rgba(231, 76, 60, 0.05); +} + +/* Add a subtle shake animation for validation errors */ +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } +} + +input.invalid { + animation: shake 0.4s ease-in-out; +} +.summary-container { + background-color: var(--light-gray); + border-radius: var(--border-radius); + padding: 20px; + margin-bottom: 20px; +} + +.summary-section { + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 1px solid var(--medium-gray); +} + +.summary-section:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} + +.summary-section h4 { + color: var(--primary-color); + margin-bottom: 15px; + font-size: 1.1rem; + display: flex; + align-items: center; +} + +.summary-section h4 i { + margin-right: 8px; +} + +.summary-item { + display: flex; + margin-bottom: 10px; +} + +.summary-label { + font-weight: 500; + width: 150px; + flex-shrink: 0; +} + +.summary-value { + flex-grow: 1; +} + +.summary-value ul { + margin: 0; + padding-left: 20px; +} + +/* Filter controls */ +.filter-controls { + margin-bottom: 20px; + background-color: var(--card-bg); + border-radius: var(--border-radius); + padding: 15px; + box-shadow: var(--shadow); + border: 1px solid var(--border-color); +} + +.search-box { + position: relative; + margin-bottom: 15px; +} + +.search-box i { + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + color: var(--dark-gray); + font-size: 1rem; +} + +.search-box input { + width: 100%; + padding: 10px 10px 10px 35px; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + font-size: 0.95rem; + background-color: var(--bg-color); + color: var(--text-color); + transition: var(--transition); +} + +.search-box input:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); +} + +.filter-options { + display: flex; + flex-wrap: wrap; + gap: 10px; + align-items: center; +} + +.filter-group { + display: flex; + flex-direction: column; + flex: 1; + min-width: 150px; +} + +.filter-label { + font-size: 0.85rem; + margin-bottom: 5px; + color: var(--dark-gray); + font-weight: 500; +} + +.filter-select { + padding: 10px 12px; + border-radius: var(--border-radius); + border: 1px solid var(--border-color); + background-color: var(--bg-color); + color: var(--text-color); + font-size: 0.95rem; + cursor: pointer; + transition: var(--transition); + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 1em; + padding-right: 30px; +} + +.filter-select:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); +} + +.export-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 10px 15px; + border-radius: var(--border-radius); + border: none; + background-color: var(--primary-color); + color: white; + font-size: 0.95rem; + font-weight: 500; + cursor: pointer; + transition: var(--transition); + height: 40px; + align-self: flex-end; + margin-top: auto; +} + +.export-btn:hover { + background-color: var(--primary-dark); + transform: translateY(-1px); +} + +.export-btn i { + font-size: 0.9rem; +} + +/* Responsive filter controls */ +@media (max-width: 768px) { + .filter-options { + flex-direction: column; + width: 100%; + gap: 15px; + } + + .filter-group { + width: 100%; + } + + .filter-select, .export-btn { + width: 100%; + } + + .export-btn { + margin-top: 5px; + } +} + +/* View Switcher */ +.view-switcher { + display: flex; + flex-direction: column; +} + +.view-buttons { + display: flex; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + overflow: hidden; +} + +.view-btn { + background-color: var(--bg-color); + border: none; + color: var(--dark-gray); + padding: 8px 12px; + cursor: pointer; + transition: var(--transition); + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.view-btn:not(:last-child) { + border-right: 1px solid var(--border-color); +} + +.view-btn:hover { + background-color: var(--light-gray); + color: var(--primary-color); +} + +.view-btn.active { + background-color: var(--primary-color); + color: white; +} + +/* Grid View (Default) */ +.warranties-list.grid-view { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + margin-top: 20px; +} + +/* List View */ +.warranties-list.list-view { + display: flex; + flex-direction: column; + gap: 15px; + margin-top: 20px; +} + +.list-view .warranty-card { + display: flex; + flex-direction: row; + align-items: center; +} + +.list-view .warranty-header { + width: 200px; + border-bottom: none; + border-right: 1px solid var(--border-color); + height: 100%; + padding: 15px; +} + +.list-view .warranty-details { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: 15px; + padding: 15px; +} + +.list-view .warranty-details > div { + margin-bottom: 0; + margin-right: 20px; +} + +.list-view .document-links-row { + margin-left: auto; +} + +/* Table View */ +.warranties-list.table-view { + display: table; + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +.table-view .warranty-card { + display: table-row; + border: none; + border-bottom: 1px solid var(--border-color); +} + +.table-view .warranty-card.expired { + border-left: none; + background-color: rgba(231, 76, 60, 0.05); +} + +.table-view .warranty-card.expiring-soon { + border-left: none; + background-color: rgba(241, 196, 15, 0.05); +} + +.table-view .warranty-card.active { + border-left: none; + background-color: rgba(46, 204, 113, 0.05); +} + +.table-view .warranty-header, +.table-view .warranty-details { + display: table-cell; + vertical-align: middle; + padding: 12px 15px; +} + +.table-view .warranty-header { + width: 200px; + border-bottom: none; + background-color: transparent; +} + +.table-view .warranty-status { + margin: 0; +} + +.table-view .document-links-row { + display: flex; + gap: 8px; +} + +.table-view .serial-numbers { + margin: 0; +} + +/* Table Headers */ +.table-view-header { + display: none; +} + +.table-view-header.visible { + display: table-header-group; +} + +.table-view-header th { + text-align: left; + padding: 12px 15px; + background-color: var(--light-gray); + font-weight: 600; + color: var(--text-color); + border-bottom: 2px solid var(--border-color); +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .view-switcher { + width: 100%; + } + + .list-view .warranty-card, + .table-view .warranty-card { + flex-direction: column; + } + + .list-view .warranty-header, + .table-view .warranty-header { + width: 100%; + border-right: none; + border-bottom: 1px solid var(--border-color); + } + + .list-view .warranty-details, + .table-view .warranty-details { + flex-direction: column; + align-items: flex-start; + } + + .list-view .document-links-row, + .table-view .document-links-row { + margin-left: 0; + margin-top: 10px; + flex-direction: column; + width: 100%; + } +} + +/* Price input styling */ +.price-input-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.currency-symbol { + position: absolute; + left: 12px; + color: var(--dark-gray); + font-weight: 500; + z-index: 1; +} + +.price-input-wrapper .form-control { + padding-left: 25px; } \ No newline at end of file diff --git a/frontend/test-api.js b/frontend/test-api.js new file mode 100644 index 0000000..92a065b --- /dev/null +++ b/frontend/test-api.js @@ -0,0 +1,44 @@ +// API connection test script +document.addEventListener('DOMContentLoaded', function() { + // Element to display test results + const resultElement = document.getElementById('apiTestResult'); + + if (resultElement) { + resultElement.innerHTML = '

Checking API connection...

'; + + // Test API connection + fetch('/api/warranties') + .then(response => { + if (!response.ok) { + throw new Error('API responded with status: ' + response.status); + } + return response.json(); + }) + .then(data => { + console.log('API response:', data); + resultElement.innerHTML = ` +
+

✅ API Connection Successful

+

The API responded with ${data && Array.isArray(data) ? data.length : 0} warranties.

+ 
${JSON.stringify(data && data.length ? data[0] : {}, null, 2)}
+
+ `; + }) + .catch(error => { + console.error('API connection error:', error); + resultElement.innerHTML = ` +
+

❌ API Connection Failed

+

Error: ${error.message}

+
Debug Information:
+
    +
  • Browser URL: ${window.location.href}
    • +
  • Target API: /api/warranties
    • +
  • Make sure the backend is running and accessible
    • +
  • Check that nginx is properly configured to proxy API requests
    • +
+
+ `; + }); + } +}); \ No newline at end of file diff --git a/nginx.conf b/nginx.conf index c2cb505..6bd1b37 100644 --- a/nginx.conf +++ b/nginx.conf @@ -1,7 +1,7 @@ server { listen 80; server_name localhost; - root /usr/share/nginx/html; + root /var/www/html; index index.html; # Enable detailed error logging