all
This commit is contained in:
ghassan committed
1 parent
a43805e30c
commit
b1986e8654
20 files changed
+1925
No files matched your search
@@ -0,0 +1,139 @@
|
||||
<h2>Full Form Mockup — New Purchase Request</h2>
|
||||
<p class="subtitle">Showing the improved header section with all dropdowns and the urgency popup. Click "Urgency" to see the popup demo.</p>
|
||||
|
||||
<div class="mockup" style="max-width:900px;margin:0 auto;">
|
||||
<div class="mockup-header">Purchase Request Form — Header Section</div>
|
||||
<div class="mockup-body" style="background:#f8fafc;padding:20px;">
|
||||
|
||||
<!-- Form card -->
|
||||
<div style="background:#fff;border-radius:10px;border:1px solid #e2e8f0;padding:20px;margin-bottom:16px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#374151;margin-bottom:14px;">Project / Department Details</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
|
||||
|
||||
<!-- Date -->
|
||||
<div>
|
||||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Date <span style="color:#ef4444">*</span></div>
|
||||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#374151;background:#fff;">2026-05-24</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Name — dropdown -->
|
||||
<div>
|
||||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Project / Site Name <span style="color:#ef4444">*</span></div>
|
||||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#374151;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;">
|
||||
<span style="color:#9ca3af;">Select project…</span>
|
||||
<span style="color:#9ca3af;font-size:10px;">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Requested By -->
|
||||
<div>
|
||||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Requested By <span style="color:#ef4444">*</span></div>
|
||||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#374151;background:#fff;">Ahmed Al-Mansoori</div>
|
||||
</div>
|
||||
|
||||
<!-- Required Date / Urgency — popup trigger -->
|
||||
<div style="position:relative;">
|
||||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Required Date / Urgency</div>
|
||||
<div id="urgency-trigger" onclick="toggleUrgencyPopup()" style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#9ca3af;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;">
|
||||
<span id="urgency-display">Select urgency…</span>
|
||||
<span style="font-size:14px;">🎯</span>
|
||||
</div>
|
||||
|
||||
<!-- Urgency popup -->
|
||||
<div id="urgency-popup" style="display:none;position:absolute;top:100%;left:0;z-index:50;margin-top:4px;background:#fff;border-radius:12px;border:1.5px solid #e2e8f0;box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:14px;width:280px;">
|
||||
<div style="font-size:11px;font-weight:600;color:#94a3b8;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.05em;">How soon is this needed?</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;" id="urgency-cards">
|
||||
<div onclick="pickUrgency('Critical','🚨','#fee2e2','#dc2626')" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;transition:all 0.15s;" class="urg-card">
|
||||
<div style="font-size:20px;margin-bottom:2px;">🚨</div>
|
||||
<div style="font-size:11px;font-weight:700;color:#dc2626;">Critical</div>
|
||||
<div style="font-size:10px;color:#94a3b8;">Today</div>
|
||||
</div>
|
||||
<div onclick="pickUrgency('Urgent','⚡','#ffedd5','#ea580c')" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;" class="urg-card">
|
||||
<div style="font-size:20px;margin-bottom:2px;">⚡</div>
|
||||
<div style="font-size:11px;font-weight:700;color:#ea580c;">Urgent</div>
|
||||
<div style="font-size:10px;color:#94a3b8;">1–3 days</div>
|
||||
</div>
|
||||
<div onclick="pickUrgency('Normal','📋','#fef9c3','#ca8a04')" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;" class="urg-card">
|
||||
<div style="font-size:20px;margin-bottom:2px;">📋</div>
|
||||
<div style="font-size:11px;font-weight:700;color:#ca8a04;">Normal</div>
|
||||
<div style="font-size:10px;color:#94a3b8;">This week</div>
|
||||
</div>
|
||||
<div onclick="showDatePicker()" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;" class="urg-card" id="planned-card">
|
||||
<div style="font-size:20px;margin-bottom:2px;">🗓️</div>
|
||||
<div style="font-size:11px;font-weight:700;color:#16a34a;">Planned</div>
|
||||
<div style="font-size:10px;color:#94a3b8;">Pick date</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- date picker section, hidden until Planned clicked -->
|
||||
<div id="date-section" style="display:none;margin-top:10px;border-top:1px solid #f1f5f9;padding-top:10px;">
|
||||
<div style="font-size:11px;color:#6b7280;margin-bottom:4px;">Specify the required date:</div>
|
||||
<input type="date" id="planned-date" style="width:100%;border:1.5px solid #3b82f6;border-radius:6px;padding:6px 10px;font-size:12px;" onchange="confirmDate(this.value)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location / Site — dropdown -->
|
||||
<div>
|
||||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Location / Site</div>
|
||||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#374151;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;">
|
||||
<span style="color:#9ca3af;">Select location…</span>
|
||||
<span style="color:#9ca3af;font-size:10px;">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Department -->
|
||||
<div>
|
||||
<div style="font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;">Department</div>
|
||||
<div style="border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:12px;color:#9ca3af;background:#fff;">e.g. Operations, Production</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings sidebar hint -->
|
||||
<div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px;font-size:11px;color:#1d4ed8;">
|
||||
⚙️ <strong>New Settings section in sidebar</strong> — Admins can manage <em>Locations</em>, <em>Projects</em>, and <em>Urgency Levels</em> from here. Each has a simple list with Add / Edit / Delete.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleUrgencyPopup() {
|
||||
var p = document.getElementById('urgency-popup');
|
||||
p.style.display = p.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function pickUrgency(label, emoji, bg, color) {
|
||||
document.getElementById('urgency-display').innerHTML = '<span style="background:' + bg + ';color:' + color + ';border-radius:20px;padding:2px 10px;font-weight:600;">' + emoji + ' ' + label + '</span>';
|
||||
document.getElementById('urgency-popup').style.display = 'none';
|
||||
document.getElementById('date-section').style.display = 'none';
|
||||
// reset planned card
|
||||
document.getElementById('planned-card').style.borderColor = '#e2e8f0';
|
||||
document.getElementById('planned-card').style.background = '#fff';
|
||||
}
|
||||
|
||||
function showDatePicker() {
|
||||
var section = document.getElementById('date-section');
|
||||
section.style.display = section.style.display === 'none' ? 'block' : 'none';
|
||||
document.getElementById('planned-card').style.borderColor = '#22c55e';
|
||||
document.getElementById('planned-card').style.background = '#f0fdf4';
|
||||
}
|
||||
|
||||
function confirmDate(val) {
|
||||
if (!val) return;
|
||||
var d = new Date(val);
|
||||
var formatted = d.toLocaleDateString('en-GB', {day:'2-digit',month:'short',year:'numeric'});
|
||||
document.getElementById('urgency-display').innerHTML = '<span style="background:#f0fdf4;color:#16a34a;border-radius:20px;padding:2px 10px;font-weight:600;">🗓️ ' + formatted + '</span>';
|
||||
setTimeout(function(){ document.getElementById('urgency-popup').style.display = 'none'; }, 300);
|
||||
}
|
||||
|
||||
// close on outside click
|
||||
document.addEventListener('click', function(e) {
|
||||
var popup = document.getElementById('urgency-popup');
|
||||
var trigger = document.getElementById('urgency-trigger');
|
||||
if (popup && !popup.contains(e.target) && !trigger.contains(e.target)) {
|
||||
popup.style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,87 @@
|
||||
<h2>Required Date / Urgency — which style feels right?</h2>
|
||||
<p class="subtitle">When the user clicks the field, a popup opens. Pick the style you prefer.</p>
|
||||
|
||||
<div class="cards" style="grid-template-columns: repeat(3, 1fr); gap: 20px;">
|
||||
|
||||
<!-- Option A -->
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:16px; background:#f8fafc;">
|
||||
<div style="font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;margin-bottom:8px;">Urgency</div>
|
||||
<div style="border:1.5px solid #3b82f6;border-radius:8px;padding:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
|
||||
<div style="font-size:11px;color:#94a3b8;margin-bottom:8px;">Select urgency level</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||||
<div style="background:#fee2e2;color:#dc2626;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;">🔴 Critical / Immediate</div>
|
||||
<div style="background:#ffedd5;color:#ea580c;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;">🟠 Urgent — Within 3 days</div>
|
||||
<div style="background:#fef9c3;color:#ca8a04;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;">🟡 This Week</div>
|
||||
<div style="background:#dcfce7;color:#16a34a;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;">🟢 Normal — This Month</div>
|
||||
<div style="border:1px solid #e2e8f0;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;color:#475569;display:flex;align-items:center;gap:6px;">📅 Pick a specific date →</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A — Urgency Levels</h3>
|
||||
<p>Colored pills with preset labels. Optionally jump to a date picker.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option B -->
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:16px; background:#f8fafc;">
|
||||
<div style="font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;margin-bottom:8px;">Urgency</div>
|
||||
<div style="border:1.5px solid #3b82f6;border-radius:8px;padding:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
|
||||
<div style="font-size:11px;color:#94a3b8;margin-bottom:10px;">How soon is this needed?</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;">
|
||||
<div style="border:1.5px solid #dc2626;border-radius:8px;padding:8px;text-align:center;background:#fff5f5;">
|
||||
<div style="font-size:18px;">🚨</div>
|
||||
<div style="font-size:11px;font-weight:700;color:#dc2626;">Critical</div>
|
||||
<div style="font-size:10px;color:#94a3b8;">Today</div>
|
||||
</div>
|
||||
<div style="border:1.5px solid #f97316;border-radius:8px;padding:8px;text-align:center;background:#fff7ed;">
|
||||
<div style="font-size:18px;">⚡</div>
|
||||
<div style="font-size:11px;font-weight:700;color:#ea580c;">Urgent</div>
|
||||
<div style="font-size:10px;color:#94a3b8;">1–3 days</div>
|
||||
</div>
|
||||
<div style="border:1.5px solid #eab308;border-radius:8px;padding:8px;text-align:center;background:#fefce8;">
|
||||
<div style="font-size:18px;">📋</div>
|
||||
<div style="font-size:11px;font-weight:700;color:#ca8a04;">Normal</div>
|
||||
<div style="font-size:10px;color:#94a3b8;">This week</div>
|
||||
</div>
|
||||
<div style="border:1.5px solid #22c55e;border-radius:8px;padding:8px;text-align:center;background:#f0fdf4;">
|
||||
<div style="font-size:18px;">🗓️</div>
|
||||
<div style="font-size:11px;font-weight:700;color:#16a34a;">Planned</div>
|
||||
<div style="font-size:10px;color:#94a3b8;">Pick date</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B — Icon Cards</h3>
|
||||
<p>2×2 grid of icon cards with urgency label + subtitle. Visually distinct.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option C -->
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:16px; background:#f8fafc;">
|
||||
<div style="font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;margin-bottom:8px;">Urgency</div>
|
||||
<div style="border:1.5px solid #3b82f6;border-radius:8px;padding:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
|
||||
<div style="font-size:11px;color:#94a3b8;margin-bottom:10px;">Quick select or pick a date</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;">
|
||||
<span style="background:#fee2e2;color:#dc2626;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;">🔴 Critical</span>
|
||||
<span style="background:#ffedd5;color:#ea580c;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;">⚡ Urgent</span>
|
||||
<span style="background:#fef9c3;color:#ca8a04;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;">📋 This Week</span>
|
||||
<span style="background:#dcfce7;color:#16a34a;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;">✅ Normal</span>
|
||||
</div>
|
||||
<div style="border-top:1px solid #f1f5f9;padding-top:8px;">
|
||||
<div style="font-size:10px;color:#94a3b8;margin-bottom:4px;">Or pick a specific date:</div>
|
||||
<div style="border:1px solid #e2e8f0;border-radius:6px;padding:5px 10px;font-size:11px;color:#94a3b8;background:#f8fafc;">📅 Select date…</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C — Chips + Date</h3>
|
||||
<p>Pill-shaped tags for quick picks, plus a date field below for exact dates.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1779606561971}
|
||||
@@ -0,0 +1 @@
|
||||
1730
|
||||
Reference in new issue
Block a user