Daniel Bedeleanu
9a87064dbe
Phase 10 Implementation: Bulk color system compliance across frontend Applied DESIGN_COLOR_RULES.md to 40 component and page files: - Indigo (3) → primary/secondary (primary actions) - Green (12) → tertiary (#00e639) (success/healthy status) - Red/Rose (20) → error (#ffb4ab) (destructive actions) - Amber/Sky (9) → primary/secondary (warnings/info) - Blue/Slate (various) → primary/design system colors (focus states) - Black → bg-surface-container-lowest (proper design color) Files updated: 40 components + pages Color replacements: 44+ instances Build status: ✓ Zero errors, compiled in 6.3s Test status: Pending (npm run test) All colors now follow DESIGN.md Industrial Precision system: ✅ Primary: #ffb781 (caution orange) ✅ Secondary: #c8c6c5 (gray) ✅ Tertiary: #00e639 (healthy green) ✅ Error: #ffb4ab (destructive red) ✅ Design system enforced across all UI/UX Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
82 lines
3.3 KiB
TypeScript
82 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { X, History } from 'lucide-react';
|
|
import { cn } from '@/lib/utils'; // Assuming this exists or I'll use the local cn
|
|
|
|
interface LogsOverlayProps {
|
|
show: boolean;
|
|
onClose: () => void;
|
|
logs: any[];
|
|
inventory: any[];
|
|
}
|
|
|
|
export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOverlayProps) {
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex flex-col level-0 p-6 lg:p-8 animate-in slide-in-from-bottom-20 duration-500">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h2 className="text-2xl font-normal tracking-tight">Audit History</h2>
|
|
<p className="text-xs text-muted">Live transaction log from cloud</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-3 bg-surface-container-lowest border border-border text-secondary hover:text-white transition-colors"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
|
|
{logs.length === 0 ? (
|
|
<div className="h-full flex flex-col items-center justify-center text-secondary gap-4">
|
|
<History size={48} className="opacity-20" />
|
|
<p>No transactions found</p>
|
|
</div>
|
|
) : (
|
|
logs.map((log) => (
|
|
<div key={log.id} className="level-1 p-4 lg:p-5 flex items-center justify-between gap-4 transition-colors hover:border-muted">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<p className={`text-xs font-normal ${
|
|
log.action.includes('CHECK_IN') ? "text-tertiary" : (log.action.includes('TRASH') ? "text-error" : "text-primary")
|
|
}`}>
|
|
{log.action}
|
|
</p>
|
|
<span className="text-xs font-normal text-muted">by</span>
|
|
<span className="text-xs font-normal text-secondary">{log.username || 'System'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-normal text-secondary">
|
|
{inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`}
|
|
</span>
|
|
</div>
|
|
{(log.details || log.timestamp) && (
|
|
<div className="flex items-center gap-3 mt-2">
|
|
<p className="text-xs text-secondary font-mono">
|
|
{new Date(log.timestamp).toLocaleString()}
|
|
</p>
|
|
{log.details && (
|
|
<span className="text-xs bg-surface-container-lowest text-muted px-2 py-0.5 border border-border font-mono">
|
|
{log.details}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="text-right">
|
|
<p className={`text-lg font-normal ${
|
|
log.quantity_change > 0 ? "text-tertiary" : "text-error"
|
|
}`}>
|
|
{log.quantity_change > 0 ? '+' : ''}{log.quantity_change}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|