mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2026-06-17 23:09:35 +00:00
feat: Add premium frontend components — command palette, workspace, KPIs
Linear/Attio/HubSpot-inspired components: - command-palette.tsx: Cmd+K with Arabic/English/Arabizi fuzzy search - sales-workspace.tsx: HubSpot-inspired home (KPIs, tasks, deals, AI insights) - command-input.tsx: Reusable search input with ⌘K badge - kpi-card.tsx: KPI card with trend arrows, sparklines, count-up animation - empty-state.tsx: Linear-inspired monochrome empty states All bilingual with useI18n, RTL-safe, Framer Motion animations. https://claude.ai/code/session_01LsnvBa7HwF5hs99VZbgLGj
This commit is contained in:
Claude
parent
83150b97b5
commit
b23a32e913
@ -0,0 +1,289 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { clsx } from 'clsx';
|
||||
import {
|
||||
Search, Plus, MessageSquare, BarChart3, Settings,
|
||||
Users, Briefcase, ArrowRight, Clock, Inbox,
|
||||
LayoutDashboard, UserPlus, CheckSquare, Megaphone,
|
||||
} from 'lucide-react';
|
||||
import { useI18n } from '@/i18n';
|
||||
|
||||
type CommandCategory = 'recent' | 'navigation' | 'actions' | 'contacts' | 'deals';
|
||||
|
||||
interface CommandItem {
|
||||
id: string;
|
||||
label: string;
|
||||
labelAr: string;
|
||||
category: CommandCategory;
|
||||
icon: typeof Search;
|
||||
keywords: string[];
|
||||
onSelect?: () => void;
|
||||
}
|
||||
|
||||
interface CommandPaletteProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSelect?: (item: CommandItem) => void;
|
||||
}
|
||||
|
||||
const backdropVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: { opacity: 1 },
|
||||
};
|
||||
|
||||
const panelVariants = {
|
||||
hidden: { opacity: 0, scale: 0.96, y: -8 },
|
||||
visible: { opacity: 1, scale: 1, y: 0 },
|
||||
exit: { opacity: 0, scale: 0.96, y: -8 },
|
||||
};
|
||||
|
||||
function buildItems(t: (k: string) => string): CommandItem[] {
|
||||
return [
|
||||
{ id: 'nav-dashboard', label: 'Dashboard', labelAr: t('dashboard.tabs.overview'), category: 'navigation', icon: LayoutDashboard, keywords: ['home', 'لوحة', 'loha', 'dashboard'] },
|
||||
{ id: 'nav-pipeline', label: 'Pipeline', labelAr: t('dashboard.tabs.pipeline'), category: 'navigation', icon: Briefcase, keywords: ['deals', 'مسار', 'masar', 'pipeline', 'صفقات'] },
|
||||
{ id: 'nav-inbox', label: 'Inbox', labelAr: t('dashboard.tabs.inbox'), category: 'navigation', icon: Inbox, keywords: ['messages', 'صندوق', 'sandoq', 'inbox', 'رسائل'] },
|
||||
{ id: 'nav-analytics', label: 'Analytics', labelAr: t('dashboard.tabs.analytics'), category: 'navigation', icon: BarChart3, keywords: ['reports', 'تحليلات', 'tahlilat', 'analytics', 'تقارير'] },
|
||||
{ id: 'nav-leads', label: 'Leads', labelAr: t('dashboard.tabs.leads'), category: 'navigation', icon: Users, keywords: ['clients', 'عملاء', '3omala', 'leads'] },
|
||||
{ id: 'nav-settings', label: 'Settings', labelAr: t('dashboard.tabs.settings'), category: 'navigation', icon: Settings, keywords: ['config', 'إعدادات', 'e3dadat', 'settings'] },
|
||||
{ id: 'nav-marketers', label: 'Marketers', labelAr: t('commandPalette.actions.goToMarketers'), category: 'navigation', icon: Megaphone, keywords: ['affiliate', 'مسوقين', 'msawqin', 'marketers'] },
|
||||
{ id: 'act-new-deal', label: 'Create New Deal', labelAr: t('commandPalette.actions.newDeal'), category: 'actions', icon: Plus, keywords: ['new', 'deal', 'صفقة', 'safqa', 'جديد', 'jadid', 'create'] },
|
||||
{ id: 'act-new-contact', label: 'Add Contact', labelAr: t('commandPalette.actions.newContact'), category: 'actions', icon: UserPlus, keywords: ['contact', 'add', 'إضافة', 'edafa', 'جهة', 'jiha'] },
|
||||
{ id: 'act-new-task', label: 'Create Task', labelAr: t('commandPalette.actions.newTask'), category: 'actions', icon: CheckSquare, keywords: ['task', 'مهمة', 'muhimma', 'todo'] },
|
||||
{ id: 'act-send-msg', label: 'Send Message', labelAr: t('commandPalette.actions.sendMessage'), category: 'actions', icon: MessageSquare, keywords: ['message', 'رسالة', 'risala', 'whatsapp', 'واتساب'] },
|
||||
];
|
||||
}
|
||||
|
||||
function fuzzyMatch(query: string, item: CommandItem, isArabic: boolean): boolean {
|
||||
const q = query.toLowerCase();
|
||||
const haystack = [
|
||||
item.label.toLowerCase(),
|
||||
item.labelAr,
|
||||
...item.keywords.map((k) => k.toLowerCase()),
|
||||
].join(' ');
|
||||
return haystack.includes(q);
|
||||
}
|
||||
|
||||
function CommandPalette({ open, onClose, onSelect }: CommandPaletteProps) {
|
||||
const { t, dir, isArabic } = useI18n();
|
||||
const [query, setQuery] = useState('');
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const allItems = useMemo(() => buildItems(t), [t]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!query.trim()) return allItems.slice(0, 8);
|
||||
return allItems.filter((item) => fuzzyMatch(query, item, isArabic));
|
||||
}, [query, allItems, isArabic]);
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
const map = new Map<CommandCategory, CommandItem[]>();
|
||||
for (const item of filtered) {
|
||||
const list = map.get(item.category) ?? [];
|
||||
list.push(item);
|
||||
map.set(item.category, list);
|
||||
}
|
||||
return map;
|
||||
}, [filtered]);
|
||||
|
||||
const flatItems = useMemo(() => filtered, [filtered]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setQuery('');
|
||||
setActiveIndex(0);
|
||||
setTimeout(() => inputRef.current?.focus(), 50);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveIndex(0);
|
||||
}, [query]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(item: CommandItem) => {
|
||||
onSelect?.(item);
|
||||
item.onSelect?.();
|
||||
onClose();
|
||||
},
|
||||
[onSelect, onClose],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setActiveIndex((i) => (i + 1) % flatItems.length);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setActiveIndex((i) => (i - 1 + flatItems.length) % flatItems.length);
|
||||
} else if (e.key === 'Enter' && flatItems[activeIndex]) {
|
||||
e.preventDefault();
|
||||
handleSelect(flatItems[activeIndex]);
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[flatItems, activeIndex, handleSelect, onClose],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [open, onClose]);
|
||||
|
||||
const categoryLabel = (cat: CommandCategory) =>
|
||||
t(`commandPalette.categories.${cat}`);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh] px-4">
|
||||
<motion.div
|
||||
variants={backdropVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
transition={{ duration: 0.15 }}
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
variants={panelVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Command Palette"
|
||||
dir={dir}
|
||||
className={clsx(
|
||||
'relative z-10 w-full max-w-lg',
|
||||
'bg-[#0A0F1C]/95 backdrop-blur-2xl',
|
||||
'border border-white/10 rounded-2xl',
|
||||
'shadow-2xl shadow-black/50',
|
||||
'overflow-hidden',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3 border-b border-white/10 px-4 py-3">
|
||||
<Search className="h-4.5 w-4.5 text-slate-500 shrink-0" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t('commandPalette.placeholder')}
|
||||
className={clsx(
|
||||
'flex-1 bg-transparent text-sm text-white',
|
||||
'placeholder:text-slate-500',
|
||||
'outline-none',
|
||||
)}
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
<kbd className="hidden sm:inline-flex items-center rounded-md px-1.5 py-0.5 bg-white/[0.06] border border-white/10 text-[11px] text-slate-500 font-mono">
|
||||
ESC
|
||||
</kbd>
|
||||
</div>
|
||||
|
||||
<div ref={listRef} className="max-h-[340px] overflow-y-auto py-2">
|
||||
{flatItems.length === 0 ? (
|
||||
<div className="py-10 text-center text-sm text-slate-500">
|
||||
{t('commandPalette.noResults')} “{query}”
|
||||
</div>
|
||||
) : (
|
||||
Array.from(grouped.entries()).map(([category, items]) => (
|
||||
<div key={category} className="mb-1 last:mb-0">
|
||||
<p className="px-4 py-1.5 text-[11px] font-medium uppercase tracking-wider text-slate-500">
|
||||
{categoryLabel(category)}
|
||||
</p>
|
||||
{items.map((item) => {
|
||||
const globalIdx = flatItems.indexOf(item);
|
||||
const isActive = globalIdx === activeIndex;
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => handleSelect(item)}
|
||||
onMouseEnter={() => setActiveIndex(globalIdx)}
|
||||
className={clsx(
|
||||
'flex items-center gap-3 w-full px-4 py-2.5 text-start',
|
||||
'transition-colors duration-100',
|
||||
isActive
|
||||
? 'bg-teal-500/10 text-white'
|
||||
: 'text-slate-300 hover:bg-white/5',
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={clsx(
|
||||
'h-4 w-4 shrink-0',
|
||||
isActive ? 'text-teal-400' : 'text-slate-500',
|
||||
)}
|
||||
/>
|
||||
<span className="flex-1 text-sm truncate">
|
||||
{isArabic ? item.labelAr : item.label}
|
||||
</span>
|
||||
{isActive && (
|
||||
<ArrowRight className="h-3.5 w-3.5 text-teal-400 shrink-0 rtl:rotate-180" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-white/10 px-4 py-2 flex items-center gap-4 text-[11px] text-slate-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="rounded bg-white/[0.06] px-1 py-0.5 font-mono">↑↓</kbd>
|
||||
{isArabic ? 'تنقل' : 'Navigate'}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="rounded bg-white/[0.06] px-1 py-0.5 font-mono">↵</kbd>
|
||||
{isArabic ? 'اختر' : 'Select'}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="rounded bg-white/[0.06] px-1 py-0.5 font-mono">ESC</kbd>
|
||||
{isArabic ? 'إغلاق' : 'Close'}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
function useCommandPalette() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
setOpen((prev) => !prev);
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, []);
|
||||
|
||||
return { open, setOpen, onClose: () => setOpen(false) };
|
||||
}
|
||||
|
||||
export { CommandPalette, useCommandPalette };
|
||||
export type { CommandPaletteProps, CommandItem };
|
||||
@ -0,0 +1,364 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { clsx } from 'clsx';
|
||||
import {
|
||||
Users, CalendarPlus, Briefcase, TrendingUp, Clock, Zap,
|
||||
CheckCircle2, Circle, AlertTriangle, MessageSquare, Phone,
|
||||
ArrowUpRight, Sparkles, ChevronLeft, ChevronRight,
|
||||
FileText, InboxIcon,
|
||||
} from 'lucide-react';
|
||||
import { useI18n } from '@/i18n';
|
||||
import { KpiCard } from '@/components/ui/kpi-card';
|
||||
import { EmptyState } from '@/components/ui/empty-state';
|
||||
|
||||
/* ---------- Types ---------- */
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
dueStatus: 'overdue' | 'today' | 'upcoming';
|
||||
time?: string;
|
||||
}
|
||||
|
||||
interface Deal {
|
||||
id: string;
|
||||
name: string;
|
||||
value: number;
|
||||
stage: string;
|
||||
stageColor: string;
|
||||
}
|
||||
|
||||
interface Activity {
|
||||
id: string;
|
||||
type: 'message' | 'call' | 'dealUpdate' | 'noteAdded';
|
||||
text: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
interface AiInsight {
|
||||
id: string;
|
||||
type: 'followUp' | 'closing' | 'risk';
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface SalesWorkspaceProps {
|
||||
userName?: string;
|
||||
kpis?: {
|
||||
totalLeads: number;
|
||||
newToday: number;
|
||||
openDeals: number;
|
||||
wonValue: number;
|
||||
conversionRate: number;
|
||||
responseTime: number;
|
||||
};
|
||||
tasks?: Task[];
|
||||
deals?: Deal[];
|
||||
activities?: Activity[];
|
||||
insights?: AiInsight[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/* ---------- Demo data ---------- */
|
||||
const demoKpis = {
|
||||
totalLeads: 1247,
|
||||
newToday: 18,
|
||||
openDeals: 43,
|
||||
wonValue: 892500,
|
||||
conversionRate: 34,
|
||||
responseTime: 12,
|
||||
};
|
||||
|
||||
const demoTasks: Task[] = [
|
||||
{ id: '1', title: 'متابعة أحمد الشمري — عرض عقار', dueStatus: 'overdue', time: 'أمس' },
|
||||
{ id: '2', title: 'اتصال مع نورة — عرض سعر', dueStatus: 'today', time: '2:00 م' },
|
||||
{ id: '3', title: 'إرسال عقد لشركة المستقبل', dueStatus: 'today', time: '4:30 م' },
|
||||
{ id: '4', title: 'جدولة عرض تقديمي', dueStatus: 'upcoming', time: 'غداً' },
|
||||
];
|
||||
|
||||
const demoDeals: Deal[] = [
|
||||
{ id: '1', name: 'صفقة أبراج الرياض', value: 2500000, stage: 'تفاوض', stageColor: 'bg-amber-500' },
|
||||
{ id: '2', name: 'مشروع المجمع التجاري', value: 1800000, stage: 'عرض سعر', stageColor: 'bg-teal-500' },
|
||||
{ id: '3', name: 'فيلا حي النرجس', value: 950000, stage: 'مؤهّل', stageColor: 'bg-blue-500' },
|
||||
{ id: '4', name: 'مكاتب طريق الملك', value: 780000, stage: 'تفاوض', stageColor: 'bg-amber-500' },
|
||||
{ id: '5', name: 'شقق حي الملقا', value: 650000, stage: 'عرض سعر', stageColor: 'bg-teal-500' },
|
||||
];
|
||||
|
||||
const demoActivities: Activity[] = [
|
||||
{ id: '1', type: 'message', text: 'رسالة من أحمد: "ابي تفاصيل العرض"', time: 'منذ 5 دقائق' },
|
||||
{ id: '2', type: 'call', text: 'مكالمة مع نورة — 8 دقائق', time: 'منذ 30 دقيقة' },
|
||||
{ id: '3', type: 'dealUpdate', text: 'صفقة أبراج الرياض انتقلت لمرحلة التفاوض', time: 'منذ ساعة' },
|
||||
{ id: '4', type: 'noteAdded', text: 'ملاحظة على فيلا النرجس: العميل يبي جراج إضافي', time: 'منذ 2 ساعة' },
|
||||
];
|
||||
|
||||
const demoInsights: AiInsight[] = [
|
||||
{ id: '1', type: 'followUp', count: 3 },
|
||||
{ id: '2', type: 'closing', count: 2 },
|
||||
{ id: '3', type: 'risk', count: 1 },
|
||||
];
|
||||
|
||||
/* ---------- Sub-components ---------- */
|
||||
const stagger = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.06 } },
|
||||
};
|
||||
|
||||
const fadeUp = {
|
||||
hidden: { opacity: 0, y: 12 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
|
||||
};
|
||||
|
||||
function GlassCard({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
className={clsx(
|
||||
'rounded-xl bg-white/5 backdrop-blur-xl border border-white/10 p-5',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionHeader({ icon: Icon, title }: { icon: typeof Users; title: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Icon className="h-4 w-4 text-teal-400" />
|
||||
<h2 className="text-sm font-semibold text-slate-300">{title}</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const activityIcons: Record<Activity['type'], typeof MessageSquare> = {
|
||||
message: MessageSquare,
|
||||
call: Phone,
|
||||
dealUpdate: ArrowUpRight,
|
||||
noteAdded: FileText,
|
||||
};
|
||||
|
||||
const taskStatusStyles: Record<Task['dueStatus'], { dot: string; text: string }> = {
|
||||
overdue: { dot: 'bg-rose-500', text: 'text-rose-400' },
|
||||
today: { dot: 'bg-amber-500', text: 'text-amber-400' },
|
||||
upcoming: { dot: 'bg-slate-500', text: 'text-slate-400' },
|
||||
};
|
||||
|
||||
const insightIcons: Record<AiInsight['type'], { icon: typeof Sparkles; color: string }> = {
|
||||
followUp: { icon: Clock, color: 'text-amber-400' },
|
||||
closing: { icon: TrendingUp, color: 'text-emerald-400' },
|
||||
risk: { icon: AlertTriangle, color: 'text-rose-400' },
|
||||
};
|
||||
|
||||
/* ---------- Main ---------- */
|
||||
function SalesWorkspace({
|
||||
userName,
|
||||
kpis: kpisProp,
|
||||
tasks: tasksProp,
|
||||
deals: dealsProp,
|
||||
activities: activitiesProp,
|
||||
insights: insightsProp,
|
||||
className,
|
||||
}: SalesWorkspaceProps) {
|
||||
const { t, dir, locale, isArabic } = useI18n();
|
||||
|
||||
const kpis = kpisProp ?? demoKpis;
|
||||
const tasks = tasksProp ?? demoTasks;
|
||||
const deals = dealsProp ?? demoDeals;
|
||||
const activities = activitiesProp ?? demoActivities;
|
||||
const insights = insightsProp ?? demoInsights;
|
||||
|
||||
const greeting = useMemo(() => {
|
||||
const hour = new Date().getHours();
|
||||
const base = hour < 17 ? t('workspace.greeting') : t('workspace.greetingEvening');
|
||||
return userName ? `${base}، ${userName}` : base;
|
||||
}, [t, userName]);
|
||||
|
||||
const formatCurrency = (val: number) =>
|
||||
new Intl.NumberFormat(locale === 'ar' ? 'ar-SA' : 'en-US', {
|
||||
style: 'currency',
|
||||
currency: 'SAR',
|
||||
maximumFractionDigits: 0,
|
||||
}).format(val);
|
||||
|
||||
const kpiDefs = [
|
||||
{ key: 'totalLeads', value: kpis.totalLeads, label: t('dashboard.kpis.totalLeads'), icon: Users, trend: { direction: 'up' as const, percentage: 12 }, sparkline: [30, 42, 38, 55, 52, 68, 62] },
|
||||
{ key: 'newToday', value: kpis.newToday, label: t('dashboard.kpis.newToday'), icon: CalendarPlus, trend: { direction: 'up' as const, percentage: 8 }, sparkline: [5, 8, 12, 9, 15, 11, 18] },
|
||||
{ key: 'openDeals', value: kpis.openDeals, label: t('dashboard.kpis.openDeals'), icon: Briefcase, trend: { direction: 'up' as const, percentage: 5 }, sparkline: [28, 35, 31, 40, 38, 42, 43] },
|
||||
{ key: 'wonValue', value: kpis.wonValue, label: t('dashboard.kpis.wonValue'), prefix: isArabic ? 'ر.س' : 'SAR', trend: { direction: 'up' as const, percentage: 22 }, sparkline: [400, 520, 480, 650, 720, 810, 892] },
|
||||
{ key: 'conversionRate', value: kpis.conversionRate, label: t('dashboard.kpis.conversionRate'), suffix: '%', trend: { direction: 'down' as const, percentage: 3 }, sparkline: [38, 36, 35, 37, 34, 33, 34] },
|
||||
{ key: 'responseTime', value: kpis.responseTime, label: t('dashboard.kpis.responseTime'), suffix: t('workspace.kpiResponseUnit'), trend: { direction: 'up' as const, percentage: 15 }, sparkline: [20, 18, 15, 14, 13, 12, 12] },
|
||||
];
|
||||
|
||||
const insightLabel = (i: AiInsight) => {
|
||||
const labels: Record<AiInsight['type'], string> = {
|
||||
followUp: t('workspace.aiInsightFollowUp'),
|
||||
closing: t('workspace.aiInsightClosing'),
|
||||
risk: t('workspace.aiInsightRisk'),
|
||||
};
|
||||
return `${i.count} ${labels[i.type]}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={stagger}
|
||||
dir={dir}
|
||||
className={clsx('space-y-6', className)}
|
||||
>
|
||||
{/* Greeting */}
|
||||
<motion.h1
|
||||
variants={fadeUp}
|
||||
className="text-2xl font-bold text-white"
|
||||
>
|
||||
{greeting}
|
||||
</motion.h1>
|
||||
|
||||
{/* KPI Bar */}
|
||||
<motion.div variants={fadeUp} className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
|
||||
{kpiDefs.map((k) => (
|
||||
<KpiCard
|
||||
key={k.key}
|
||||
value={k.value}
|
||||
label={k.label}
|
||||
prefix={k.prefix}
|
||||
suffix={k.suffix}
|
||||
trend={k.trend}
|
||||
sparklineData={k.sparkline}
|
||||
variant="compact"
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* 3-column body */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
{/* LEFT: Tasks */}
|
||||
<GlassCard className="lg:col-span-3">
|
||||
<SectionHeader icon={CheckCircle2} title={t('workspace.todaysTasks')} />
|
||||
{tasks.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={CheckCircle2}
|
||||
title={t('workspace.noTasks')}
|
||||
className="py-8"
|
||||
/>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{tasks.map((task) => {
|
||||
const style = taskStatusStyles[task.dueStatus];
|
||||
return (
|
||||
<li
|
||||
key={task.id}
|
||||
className="flex items-start gap-2.5 py-2 border-b border-white/5 last:border-0"
|
||||
>
|
||||
<span className={clsx('mt-1.5 h-2 w-2 rounded-full shrink-0', style.dot)} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm text-slate-200 truncate">{task.title}</p>
|
||||
<p className={clsx('text-xs mt-0.5', style.text)}>{task.time}</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</GlassCard>
|
||||
|
||||
{/* CENTER: Hot Deals */}
|
||||
<GlassCard className="lg:col-span-5">
|
||||
<SectionHeader icon={Briefcase} title={t('workspace.hotDeals')} />
|
||||
{deals.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Briefcase}
|
||||
title={t('workspace.noDeals')}
|
||||
className="py-8"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{deals.map((deal, idx) => (
|
||||
<div
|
||||
key={deal.id}
|
||||
className="flex items-center gap-3 py-2.5 border-b border-white/5 last:border-0"
|
||||
>
|
||||
<span className="text-xs text-slate-500 w-5 text-center tabular-nums">
|
||||
{idx + 1}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-white truncate">{deal.name}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className={clsx('h-1.5 w-1.5 rounded-full', deal.stageColor)} />
|
||||
<span className="text-xs text-slate-400">{deal.stage}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-teal-400 tabular-nums whitespace-nowrap">
|
||||
{formatCurrency(deal.value)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</GlassCard>
|
||||
|
||||
{/* RIGHT: Activity */}
|
||||
<GlassCard className="lg:col-span-4">
|
||||
<SectionHeader icon={Clock} title={t('workspace.recentActivity')} />
|
||||
{activities.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={InboxIcon}
|
||||
title={t('workspace.noActivity')}
|
||||
className="py-8"
|
||||
/>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{activities.map((act) => {
|
||||
const Icon = activityIcons[act.type];
|
||||
return (
|
||||
<li key={act.id} className="flex items-start gap-3">
|
||||
<div className="mt-0.5 rounded-lg bg-white/5 p-1.5">
|
||||
<Icon className="h-3.5 w-3.5 text-slate-400" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm text-slate-200 leading-snug">{act.text}</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5">{act.time}</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* AI Insights */}
|
||||
<GlassCard className="border-teal-500/20 bg-gradient-to-l from-teal-500/5 to-transparent">
|
||||
<SectionHeader icon={Sparkles} title={t('workspace.aiInsights')} />
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{insights.map((insight) => {
|
||||
const { icon: Icon, color } = insightIcons[insight.type];
|
||||
return (
|
||||
<motion.div
|
||||
key={insight.id}
|
||||
whileHover={{ scale: 1.03 }}
|
||||
className={clsx(
|
||||
'flex items-center gap-2.5 px-4 py-2.5 rounded-lg',
|
||||
'bg-white/5 border border-white/10',
|
||||
'cursor-pointer hover:bg-white/[0.08] transition-colors',
|
||||
)}
|
||||
>
|
||||
<Icon className={clsx('h-4 w-4', color)} />
|
||||
<span className="text-sm text-slate-200">{insightLabel(insight)}</span>
|
||||
{isArabic ? (
|
||||
<ChevronLeft className="h-3.5 w-3.5 text-slate-500" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5 text-slate-500" />
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export { SalesWorkspace };
|
||||
export type { SalesWorkspaceProps, Task, Deal, Activity, AiInsight };
|
||||
60
salesflow-saas/frontend/src/components/ui/command-input.tsx
Normal file
60
salesflow-saas/frontend/src/components/ui/command-input.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
'use client';
|
||||
|
||||
import { forwardRef, type InputHTMLAttributes } from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
import { Search } from 'lucide-react';
|
||||
import { useI18n } from '@/i18n';
|
||||
|
||||
interface CommandInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
||||
onCommandClick?: () => void;
|
||||
}
|
||||
|
||||
const CommandInput = forwardRef<HTMLInputElement, CommandInputProps>(
|
||||
({ onCommandClick, className, placeholder, ...props }, ref) => {
|
||||
const { t, dir } = useI18n();
|
||||
|
||||
const resolvedPlaceholder = placeholder ?? t('commandPalette.placeholder');
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCommandClick}
|
||||
className={clsx(
|
||||
'group flex items-center w-full gap-3',
|
||||
'rounded-xl px-4 py-2.5',
|
||||
'bg-white/5 backdrop-blur-sm',
|
||||
'border border-white/10',
|
||||
'hover:bg-white/[0.08] hover:border-white/15',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400/50',
|
||||
'transition-all duration-200 cursor-pointer',
|
||||
className,
|
||||
)}
|
||||
dir={dir}
|
||||
>
|
||||
<Search className="h-4 w-4 text-slate-500 shrink-0" />
|
||||
|
||||
<span className="flex-1 text-start text-sm text-slate-500 truncate">
|
||||
{resolvedPlaceholder}
|
||||
</span>
|
||||
|
||||
<kbd
|
||||
className={clsx(
|
||||
'hidden sm:inline-flex items-center gap-0.5',
|
||||
'rounded-md px-1.5 py-0.5',
|
||||
'bg-white/[0.06] border border-white/10',
|
||||
'text-[11px] text-slate-500 font-mono',
|
||||
'group-hover:bg-white/10 group-hover:text-slate-400',
|
||||
'transition-colors duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="text-xs">⌘</span>K
|
||||
</kbd>
|
||||
</button>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
CommandInput.displayName = 'CommandInput';
|
||||
|
||||
export { CommandInput };
|
||||
export type { CommandInputProps };
|
||||
75
salesflow-saas/frontend/src/components/ui/empty-state.tsx
Normal file
75
salesflow-saas/frontend/src/components/ui/empty-state.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
'use client';
|
||||
|
||||
import { type ReactNode } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { clsx } from 'clsx';
|
||||
import { useI18n } from '@/i18n';
|
||||
import { type LucideIcon } from 'lucide-react';
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description?: string;
|
||||
actionLabel?: string;
|
||||
onAction?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function EmptyState({
|
||||
icon: Icon,
|
||||
title,
|
||||
description,
|
||||
actionLabel,
|
||||
onAction,
|
||||
className,
|
||||
}: EmptyStateProps) {
|
||||
const { dir } = useI18n();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: 'easeOut' }}
|
||||
dir={dir}
|
||||
className={clsx(
|
||||
'flex flex-col items-center justify-center text-center',
|
||||
'py-16 px-8',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="mb-5 rounded-2xl bg-white/5 p-4 border border-white/10">
|
||||
<Icon className="h-8 w-8 text-slate-500" strokeWidth={1.5} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-semibold text-slate-300 mb-1.5">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
{description && (
|
||||
<p className="text-sm text-slate-500 max-w-xs mb-6 leading-relaxed">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{actionLabel && onAction && (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.04 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={onAction}
|
||||
className={clsx(
|
||||
'inline-flex items-center gap-2 px-5 py-2.5 rounded-lg',
|
||||
'bg-teal-500/15 text-teal-400 text-sm font-medium',
|
||||
'border border-teal-500/25',
|
||||
'hover:bg-teal-500/25 transition-colors duration-200',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400',
|
||||
)}
|
||||
>
|
||||
{actionLabel}
|
||||
</motion.button>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export { EmptyState };
|
||||
export type { EmptyStateProps };
|
||||
162
salesflow-saas/frontend/src/components/ui/kpi-card.tsx
Normal file
162
salesflow-saas/frontend/src/components/ui/kpi-card.tsx
Normal file
@ -0,0 +1,162 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState, useMemo } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { clsx } from 'clsx';
|
||||
import { TrendingUp, TrendingDown } from 'lucide-react';
|
||||
import { useI18n } from '@/i18n';
|
||||
|
||||
interface KpiCardProps {
|
||||
value: number;
|
||||
label: string;
|
||||
trend?: { direction: 'up' | 'down'; percentage: number };
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
sparklineData?: number[];
|
||||
variant?: 'compact' | 'full';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function useCountUp(target: number, duration: number = 1200) {
|
||||
const [current, setCurrent] = useState(0);
|
||||
const frameRef = useRef<number>();
|
||||
|
||||
useEffect(() => {
|
||||
const start = performance.now();
|
||||
const animate = (now: number) => {
|
||||
const elapsed = now - start;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const eased = 1 - Math.pow(1 - progress, 3);
|
||||
setCurrent(Math.round(target * eased));
|
||||
if (progress < 1) {
|
||||
frameRef.current = requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
frameRef.current = requestAnimationFrame(animate);
|
||||
return () => {
|
||||
if (frameRef.current) cancelAnimationFrame(frameRef.current);
|
||||
};
|
||||
}, [target, duration]);
|
||||
|
||||
return current;
|
||||
}
|
||||
|
||||
function Sparkline({ data, className }: { data: number[]; className?: string }) {
|
||||
const max = Math.max(...data);
|
||||
const min = Math.min(...data);
|
||||
const range = max - min || 1;
|
||||
const h = 28;
|
||||
const w = 72;
|
||||
const step = w / (data.length - 1);
|
||||
|
||||
const points = data
|
||||
.map((v, i) => `${i * step},${h - ((v - min) / range) * h}`)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<svg
|
||||
viewBox={`0 0 ${w} ${h}`}
|
||||
className={clsx('overflow-visible', className)}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<polyline
|
||||
points={points}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function KpiCard({
|
||||
value,
|
||||
label,
|
||||
trend,
|
||||
prefix,
|
||||
suffix,
|
||||
sparklineData,
|
||||
variant = 'full',
|
||||
className,
|
||||
}: KpiCardProps) {
|
||||
const { locale } = useI18n();
|
||||
const animatedValue = useCountUp(value);
|
||||
|
||||
const formatted = useMemo(() => {
|
||||
return new Intl.NumberFormat(locale === 'ar' ? 'ar-SA' : 'en-US').format(
|
||||
animatedValue,
|
||||
);
|
||||
}, [animatedValue, locale]);
|
||||
|
||||
const isCompact = variant === 'compact';
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: 'easeOut' }}
|
||||
className={clsx(
|
||||
'relative rounded-xl overflow-hidden',
|
||||
'bg-white/5 backdrop-blur-xl',
|
||||
'border border-white/10',
|
||||
isCompact ? 'p-3' : 'p-5',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className={clsx(
|
||||
'text-slate-400 truncate',
|
||||
isCompact ? 'text-xs mb-1' : 'text-sm mb-2',
|
||||
)}>
|
||||
{label}
|
||||
</p>
|
||||
<p className={clsx(
|
||||
'font-semibold text-white tabular-nums',
|
||||
isCompact ? 'text-lg' : 'text-2xl',
|
||||
)}>
|
||||
{prefix && <span className="text-slate-400 me-1">{prefix}</span>}
|
||||
{formatted}
|
||||
{suffix && <span className="text-slate-400 ms-1 text-base">{suffix}</span>}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{sparklineData && sparklineData.length > 1 && (
|
||||
<div className={clsx(
|
||||
'shrink-0',
|
||||
isCompact ? 'w-14' : 'w-[72px]',
|
||||
trend?.direction === 'up' ? 'text-emerald-400' : 'text-rose-400',
|
||||
)}>
|
||||
<Sparkline data={sparklineData} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{trend && (
|
||||
<div className={clsx(
|
||||
'flex items-center gap-1',
|
||||
isCompact ? 'mt-1.5' : 'mt-3',
|
||||
)}>
|
||||
{trend.direction === 'up' ? (
|
||||
<TrendingUp className="h-3.5 w-3.5 text-emerald-400" />
|
||||
) : (
|
||||
<TrendingDown className="h-3.5 w-3.5 text-rose-400" />
|
||||
)}
|
||||
<span
|
||||
className={clsx(
|
||||
'text-xs font-medium tabular-nums',
|
||||
trend.direction === 'up' ? 'text-emerald-400' : 'text-rose-400',
|
||||
)}
|
||||
>
|
||||
{trend.percentage}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export { KpiCard };
|
||||
export type { KpiCardProps };
|
||||
Loading…
Reference in New Issue
Block a user