mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2026-06-19 07:49:34 +00:00
b23a32e913
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
365 lines
13 KiB
TypeScript
365 lines
13 KiB
TypeScript
'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 };
|