SilverLABS/littleshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor payment verification to manual workflow and add comprehensive cleanup tools

Browse Source 
Major changes:
• Remove BTCPay Server integration in favor of SilverPAY manual verification
• Add test data cleanup mechanisms (API endpoints and shell scripts)
• Fix compilation errors in TestController (IdentityReference vs CustomerIdentity)
• Add deployment automation scripts for Hostinger VPS
• Enhance integration testing with comprehensive E2E validation
• Add Blazor components and mobile-responsive CSS for admin interface
• Create production environment configuration scripts

Key Features Added:
• Manual payment verification through Admin panel Order Details
• Bulk test data cleanup with proper cascade handling
• Deployment automation with systemd service configuration
• Comprehensive E2E testing suite with SilverPAY integration validation
• Mobile-first admin interface improvements

Security & Production:
• Environment variable configuration for production secrets
• Proper JWT and VAPID key management
• SilverPAY API integration with live credentials
• Database cleanup and maintenance tools

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
SysAdmin
2025-09-25 19:29:00 +01:00
parent 1588c79df0
commit 127be759c8
46 changed files with 3470 additions and 971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

457
LittleShop/wwwroot/css/mobile-admin.css Normal file
View File

@@ -0,0 +1,457 @@
/* Mobile-First Admin Styles */
:root {
--mobile-nav-height: 60px;
--touch-target-size: 44px;
--primary-color: #2563eb;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
}
/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--mobile-nav-height);
background: white;
border-top: 1px solid #e5e7eb;
display: none;
z-index: 1000;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.mobile-bottom-nav-items {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
}
.mobile-nav-item {
flex: 1;
height: 100%;
}
.mobile-nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #6b7280;
text-decoration: none;
font-size: 10px;
transition: all 0.2s;
}
.mobile-nav-link i {
font-size: 20px;
margin-bottom: 2px;
}
.mobile-nav-link.active {
color: var(--primary-color);
}
.mobile-nav-link:active {
background: rgba(37, 99, 235, 0.1);
}
.mobile-nav-badge {
position: absolute;
top: 5px;
right: calc(50% - 15px);
background: var(--danger-color);
color: white;
border-radius: 10px;
padding: 2px 6px;
font-size: 9px;
font-weight: bold;
min-width: 16px;
text-align: center;
}
/* Settings Menu Drawer */
.settings-drawer {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
background: white;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
transition: right 0.3s ease;
z-index: 1001;
overflow-y: auto;
}
.settings-drawer.open {
right: 0;
}
.settings-drawer-header {
padding: 20px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.settings-drawer-close {
background: none;
border: none;
font-size: 24px;
color: #6b7280;
padding: 0;
width: var(--touch-target-size);
height: var(--touch-target-size);
}
.settings-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.settings-menu-item {
border-bottom: 1px solid #f3f4f6;
}
.settings-menu-link {
display: flex;
align-items: center;
padding: 15px 20px;
color: #374151;
text-decoration: none;
min-height: var(--touch-target-size);
}
.settings-menu-link i {
margin-right: 15px;
width: 20px;
text-align: center;
}
.settings-menu-link:active {
background: #f3f4f6;
}
/* Drawer Overlay */
.drawer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 1000;
}
.drawer-overlay.show {
display: block;
}
/* Touch-Friendly Forms */
@media (max-width: 768px) {
.form-control, .form-select, .btn {
min-height: var(--touch-target-size);
font-size: 16px; /* Prevents zoom on iOS */
}
.btn {
padding: 12px 20px;
}
/* Larger checkboxes and radios */
.form-check-input {
width: 24px;
height: 24px;
margin-top: 0;
}
.form-check-label {
padding-left: 10px;
line-height: 24px;
}
}
/* Mobile Cards for Orders/Products */
.mobile-card {
background: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative;
}
.mobile-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.mobile-card-title {
font-weight: 600;
font-size: 16px;
}
.mobile-card-status {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.status-pending {
background: #fef3c7;
color: #92400e;
}
.status-accepted {
background: #d1fae5;
color: #065f46;
}
.status-packing {
background: #dbeafe;
color: #1e40af;
}
.status-dispatched {
background: #e9d5ff;
color: #6b21a8;
}
/* Swipe Actions */
.swipeable {
position: relative;
overflow: hidden;
}
.swipe-actions {
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100%;
display: flex;
transition: right 0.3s ease;
}
.swipeable.swiped .swipe-actions {
right: 0;
}
.swipe-action {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 500;
border: none;
}
.swipe-action-accept {
background: var(--success-color);
}
.swipe-action-reject {
background: var(--danger-color);
}
/* Responsive adjustments */
@media (max-width: 768px) {
/* Hide desktop nav on mobile */
.navbar-collapse {
display: none !important;
}
/* Show mobile bottom nav */
.mobile-bottom-nav {
display: block;
}
/* Adjust main content for bottom nav */
main {
padding-bottom: calc(var(--mobile-nav-height) + 20px) !important;
}
/* Full-width buttons on mobile */
.btn-group-mobile {
display: flex;
gap: 10px;
}
.btn-group-mobile .btn {
flex: 1;
}
/* Responsive tables to cards */
.table-responsive-mobile {
display: none;
}
.cards-responsive-mobile {
display: block;
}
}
@media (min-width: 769px) {
/* Hide mobile-only elements on desktop */
.mobile-bottom-nav,
.settings-drawer,
.drawer-overlay,
.cards-responsive-mobile {
display: none !important;
}
.table-responsive-mobile {
display: block;
}
}
/* Pull to Refresh */
.pull-to-refresh {
position: absolute;
top: -60px;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: top 0.3s ease;
}
.pull-to-refresh.active {
top: 0;
}
.pull-to-refresh-spinner {
width: 30px;
height: 30px;
border: 3px solid #e5e7eb;
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Floating Action Button */
.fab {
position: fixed;
bottom: calc(var(--mobile-nav-height) + 20px);
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary-color);
color: white;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: transform 0.2s;
z-index: 999;
}
.fab:active {
transform: scale(0.95);
}
/* Tab Navigation - Mobile Optimized */
.nav-tabs-mobile {
display: flex;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 20px;
}
.nav-tabs-mobile::-webkit-scrollbar {
display: none;
}
.nav-tabs-mobile .nav-link {
white-space: nowrap;
padding: 12px 20px;
color: #6b7280;
border: none;
border-bottom: 2px solid transparent;
min-width: fit-content;
}
.nav-tabs-mobile .nav-link.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
background: none;
}
/* Improved Touch Feedback */
button, a, .clickable {
-webkit-tap-highlight-color: rgba(37, 99, 235, 0.2);
}
/* Loading States */
.skeleton {
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
background-size: 200% 100%;
animation: loading 1.5s ease-in-out infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Product Variants Tab */
.variants-container {
padding: 20px 0;
}
.variant-card {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
.variant-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.variant-quantity {
font-size: 24px;
font-weight: bold;
color: var(--primary-color);
}
.variant-price {
font-size: 20px;
font-weight: 600;
}
.variant-unit-price {
color: #6b7280;
font-size: 14px;
margin-top: 5px;
}

15
LittleShop/wwwroot/js/blazor-integration.js Normal file
View File

@@ -0,0 +1,15 @@
// Blazor Server Integration Script
document.addEventListener('DOMContentLoaded', function() {
// Check if we're on a page that should use Blazor
const blazorContainers = document.querySelectorAll('[data-blazor-component]');
if (blazorContainers.length > 0 || window.location.pathname.includes('/Admin/Products/Blazor')) {
// Start Blazor
Blazor.start();
}
});
// Helper function to navigate to Blazor components from MVC
window.navigateToBlazor = function(componentPath) {
window.location.href = '/blazor#' + componentPath;
};

64
LittleShop/wwwroot/test-blazor-assets.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor Assets Test</title>
</head>
<body>
<div id="test-results">
<h1>Blazor Asset Loading Test</h1>
<div id="results">
<p id="blazor-status">❓ Checking Blazor Server JS...</p>
<p id="radzen-status">❓ Checking Radzen Blazor JS...</p>
<p id="signalr-status">❓ Checking SignalR connection...</p>
</div>
</div>
<!-- Test Blazor Server JS -->
<script src="/_framework/blazor.server.js"></script>
<!-- Test Radzen JS -->
<script src="/_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script>
// Check if Blazor is available
window.addEventListener('load', function() {
setTimeout(function() {
const blazorStatus = document.getElementById('blazor-status');
const radzenStatus = document.getElementById('radzen-status');
const signalrStatus = document.getElementById('signalr-status');
if (typeof window.Blazor !== 'undefined') {
blazorStatus.innerHTML = '✅ Blazor Server JS loaded successfully';
blazorStatus.style.color = 'green';
} else {
blazorStatus.innerHTML = '❌ Blazor Server JS failed to load';
blazorStatus.style.color = 'red';
}
if (typeof window.Radzen !== 'undefined') {
radzenStatus.innerHTML = '✅ Radzen Blazor JS loaded successfully';
radzenStatus.style.color = 'green';
} else {
radzenStatus.innerHTML = '❌ Radzen Blazor JS failed to load';
radzenStatus.style.color = 'red';
}
// Check SignalR
if (window.Blazor && window.Blazor.start) {
signalrStatus.innerHTML = '✅ SignalR connection methods available';
signalrStatus.style.color = 'green';
} else {
signalrStatus.innerHTML = '❌ SignalR connection methods not available';
signalrStatus.style.color = 'red';
}
console.log('Blazor available:', typeof window.Blazor !== 'undefined');
console.log('Radzen available:', typeof window.Radzen !== 'undefined');
console.log('All window objects:', Object.keys(window).filter(key => key.includes('Blazor') || key.includes('Radzen')));
}, 2000);
});
</script>
</body>
</html>

77
LittleShop/wwwroot/test-blazor.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor Asset Test</title>
<!-- Bootstrap -->
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link href="/lib/fontawesome/css/all.min.css" rel="stylesheet">
<!-- Radzen Blazor CSS -->
<link href="/_content/Radzen.Blazor/css/material-base.css" rel="stylesheet">
<!-- Mobile Admin CSS -->
<link href="/css/mobile-admin.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row mb-4">
<div class="col">
<h1><i class="fas fa-box"></i> Blazor Asset Loading Test</h1>
</div>
</div>
<div class="alert alert-info">
<h4>Testing Asset Loading</h4>
<ul>
<li><strong>Bootstrap:</strong> <span class="badge bg-primary">This should be styled</span></li>
<li><strong>FontAwesome:</strong> <i class="fas fa-check-circle text-success"></i> Icon should appear</li>
<li><strong>Radzen CSS:</strong> Check browser dev tools for 404 errors</li>
<li><strong>Mobile CSS:</strong> <span style="font-size: var(--touch-target-size, 44px);">Touch target size</span></li>
</ul>
</div>
<div class="card">
<div class="card-body">
<p>If you can see proper styling and no 404 errors in the browser console, the assets are loading correctly.</p>
<h5>Mobile Navigation Test</h5>
<nav class="mobile-bottom-nav">
<ul class="mobile-bottom-nav-items">
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<i class="fas fa-shopping-cart"></i>
<span>Orders</span>
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link active">
<i class="fas fa-box"></i>
<span>Products</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- jQuery -->
<script src="/lib/jquery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Blazor Server JS -->
<script src="/_framework/blazor.server.js"></script>
<!-- Radzen JS -->
<script src="/_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script>
console.log('Asset loading test loaded');
console.log('jQuery available:', typeof $ !== 'undefined');
console.log('Bootstrap available:', typeof bootstrap !== 'undefined');
console.log('Blazor available:', typeof window.Blazor !== 'undefined');
</script>
</body>
</html>