273 lines
15 KiB
TypeScript
273 lines
15 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useAuth } from '../../contexts/AuthContext';
|
||
import { supabase } from '../../supabase/client';
|
||
import { motion } from 'framer-motion';
|
||
import { FileText, Plus, Warehouse, Factory, ArrowLeft, Users, TrendingUp, Package, Clock, Building2, CheckCircle2, DollarSign, Droplets } from 'lucide-react';
|
||
import { useResponsive } from '../../hooks/useResponsive';
|
||
import { OnboardingGuide } from '../../components/OnboardingGuide';
|
||
import { NotificationCenter } from '../../components/NotificationCenter';
|
||
import type { ProductionPlan } from '../../types';
|
||
|
||
const statusMap: Record<string, { label: string; color: string; bgColor: string; icon: any }> = {
|
||
pending: { label: '待确定', color: 'text-amber-600', bgColor: 'bg-amber-50', icon: Clock },
|
||
producing: { label: '生产中', color: 'text-blue-600', bgColor: 'bg-blue-50', icon: TrendingUp },
|
||
completed: { label: '已完成', color: 'text-emerald-600', bgColor: 'bg-emerald-50', icon: Package }
|
||
};
|
||
|
||
const getQuickActions = (isMaster: boolean) => {
|
||
const actions = [
|
||
{ id: 'plans', icon: FileText, label: '计划总览', path: '/purchaser/plans', gradient: 'from-blue-500 to-cyan-500', description: '查看所有计划' },
|
||
{ id: 'new', icon: Plus, label: '新建纺织计划', path: '/purchaser/plans/new', gradient: 'from-emerald-500 to-green-500', description: '创建新纺织计划' },
|
||
{ id: 'washing', icon: Droplets, label: '新建水洗', path: '/purchaser/washing-plans/new', gradient: 'from-cyan-500 to-blue-500', description: '创建水洗计划' },
|
||
{ id: 'warehouse', icon: Warehouse, label: '原坯布仓库', path: '/purchaser/warehouse', gradient: 'from-amber-500 to-orange-500', description: '管理原坯布库存' },
|
||
{ id: 'finished', icon: Package, label: '水洗仓库', path: '/purchaser/finished-warehouse', gradient: 'from-emerald-500 to-teal-500', description: '管理水洗厂内坯布库存' },
|
||
{ id: 'factories', icon: Factory, label: '工厂管理', path: '/purchaser/factories', gradient: 'from-purple-500 to-violet-500', description: '管理合作工厂' },
|
||
{ id: 'accounts-payable', icon: DollarSign, label: '应付账款', path: '/purchaser/accounts-payable', gradient: 'from-rose-500 to-pink-500', description: '查看应付账款' }
|
||
];
|
||
if (isMaster) {
|
||
actions.push({ id: 'members', icon: Users, label: '账号管理', path: '/members', gradient: 'from-gray-500 to-slate-500', description: '管理团队成员' });
|
||
}
|
||
return actions;
|
||
};
|
||
|
||
const containerVariants = {
|
||
hidden: { opacity: 0 },
|
||
visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
|
||
};
|
||
|
||
const itemVariants = {
|
||
hidden: { opacity: 0, y: 20 },
|
||
visible: { opacity: 1, y: 0, transition: { duration: 0.4 } }
|
||
};
|
||
|
||
export function PurchaserDashboard() {
|
||
const navigate = useNavigate();
|
||
const { auth, logout } = useAuth();
|
||
const { isMobile } = useResponsive();
|
||
const [plans, setPlans] = useState<ProductionPlan[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
if (!auth.company) return;
|
||
fetchPlans();
|
||
}, [auth.company]);
|
||
|
||
const fetchPlans = async () => {
|
||
const { data } = await supabase
|
||
.from('production_plans')
|
||
.select('*')
|
||
.eq('purchaser_id', auth.company!.id)
|
||
.order('created_at', { ascending: false });
|
||
setPlans(data || []);
|
||
setLoading(false);
|
||
};
|
||
|
||
const stats = {
|
||
all: plans.length,
|
||
producing: plans.filter(p => p.status === 'producing').length,
|
||
completed: plans.filter(p => p.status === 'completed').length
|
||
};
|
||
|
||
const recentPlans = plans.slice(0, 5);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/30">
|
||
{/* 新用户引导动画 */}
|
||
<OnboardingGuide role="purchaser" onNavigate={(path) => navigate(path)} />
|
||
{/* Header - 移动端优化 */}
|
||
<header className="bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
|
||
<div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-8 py-3 sm:py-4 flex justify-between items-center">
|
||
<div className="flex items-center gap-2 sm:gap-3">
|
||
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||
<Building2 className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-sm sm:text-lg font-bold text-gray-900 flex items-center gap-2">
|
||
{auth.company?.name || '采购商'}工作台
|
||
<span className="text-[10px] sm:text-xs bg-gradient-to-r from-amber-500 to-orange-500 text-white px-1.5 sm:px-2 py-0.5 rounded-full font-medium">限时免费</span>
|
||
</h1>
|
||
<p className="text-xs text-gray-500 hidden sm:block">{(auth.user as any)?.display_name || auth.user?.username || '用户'}，欢迎回来，美好的一天从现在开始</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<NotificationCenter />
|
||
<button
|
||
onClick={async () => { await logout(); navigate('/login'); }}
|
||
className="px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||
>
|
||
退出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="p-3 sm:p-4 md:p-8 max-w-7xl mx-auto">
|
||
{loading ? (
|
||
<div className="flex items-center justify-center py-20">
|
||
<div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
||
</div>
|
||
) : (
|
||
<motion.div variants={containerVariants} initial="hidden" animate="visible" className="space-y-4 sm:space-y-6">
|
||
{/* 统计卡片 - 移动端优化 */}
|
||
<div className="grid grid-cols-3 gap-2 sm:gap-4">
|
||
<motion.div
|
||
variants={itemVariants}
|
||
whileHover={isMobile ? {} : { scale: 1.02, y: -2 }}
|
||
onClick={() => navigate('/purchaser/plans')}
|
||
className="bg-white rounded-xl sm:rounded-2xl p-3 sm:p-5 shadow-sm border border-gray-100 cursor-pointer hover:border-blue-300 hover:shadow-md transition-all"
|
||
>
|
||
<div className="flex items-center justify-between mb-2 sm:mb-3">
|
||
<p className="text-xs sm:text-sm text-gray-500">所有计划</p>
|
||
<div className="w-6 h-6 sm:w-8 sm:h-8 bg-blue-50 rounded-lg flex items-center justify-center">
|
||
<FileText className="w-3 h-3 sm:w-4 sm:h-4 text-blue-600" />
|
||
</div>
|
||
</div>
|
||
<p className="text-xl sm:text-3xl font-bold text-gray-900">{stats.all}</p>
|
||
<p className="text-xs text-gray-400 mt-0.5 sm:mt-1">累计创建</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
variants={itemVariants}
|
||
whileHover={isMobile ? {} : { scale: 1.02, y: -2 }}
|
||
onClick={() => navigate('/purchaser/plans?filter=producing')}
|
||
className="bg-white rounded-xl sm:rounded-2xl p-3 sm:p-5 shadow-sm border border-gray-100 cursor-pointer hover:border-emerald-300 hover:shadow-md transition-all"
|
||
>
|
||
<div className="flex items-center justify-between mb-2 sm:mb-3">
|
||
<p className="text-xs sm:text-sm text-gray-500">进行中</p>
|
||
<div className="w-6 h-6 sm:w-8 sm:h-8 bg-emerald-50 rounded-lg flex items-center justify-center">
|
||
<TrendingUp className="w-3 h-3 sm:w-4 sm:h-4 text-emerald-600" />
|
||
</div>
|
||
</div>
|
||
<p className="text-xl sm:text-3xl font-bold text-gray-900">{stats.producing}</p>
|
||
<p className="text-xs text-gray-400 mt-0.5 sm:mt-1">正在生产</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
variants={itemVariants}
|
||
whileHover={isMobile ? {} : { scale: 1.02, y: -2 }}
|
||
onClick={() => navigate('/purchaser/plans?filter=completed')}
|
||
className="bg-white rounded-xl sm:rounded-2xl p-3 sm:p-5 shadow-sm border border-gray-100 cursor-pointer hover:border-amber-300 hover:shadow-md transition-all"
|
||
>
|
||
<div className="flex items-center justify-between mb-2 sm:mb-3">
|
||
<p className="text-xs sm:text-sm text-gray-500">已完成</p>
|
||
<div className="w-6 h-6 sm:w-8 sm:h-8 bg-amber-50 rounded-lg flex items-center justify-center">
|
||
<Package className="w-3 h-3 sm:w-4 sm:h-4 text-amber-600" />
|
||
</div>
|
||
</div>
|
||
<p className="text-xl sm:text-3xl font-bold text-gray-900">{stats.completed}</p>
|
||
<p className="text-xs text-gray-400 mt-0.5 sm:mt-1">已入库</p>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* 快捷操作 - 移动端优化 */}
|
||
<motion.div variants={itemVariants} className="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-6">
|
||
<h2 className="text-sm sm:text-base font-semibold text-gray-900 mb-3 sm:mb-4">快捷操作</h2>
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-4">
|
||
{getQuickActions(auth.user?.is_master || false).map((action, index) => (
|
||
<motion.button
|
||
key={action.id}
|
||
whileHover={isMobile ? {} : { scale: 1.03, y: -2 }}
|
||
whileTap={{ scale: 0.97 }}
|
||
onClick={() => navigate(action.path)}
|
||
className="group flex flex-col items-center p-3 sm:p-4 rounded-xl border border-gray-100 hover:border-transparent hover:shadow-lg transition-all bg-gray-50/50 hover:bg-white"
|
||
>
|
||
<div className={`w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center mb-2 sm:mb-3 bg-gradient-to-br ${action.gradient} shadow-md group-hover:shadow-lg transition-shadow`}>
|
||
<action.icon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
|
||
</div>
|
||
<span className="text-xs sm:text-sm font-medium text-gray-700 group-hover:text-gray-900">{action.label}</span>
|
||
<span className="text-xs text-gray-400 mt-0.5 sm:mt-1 hidden sm:block">{action.description}</span>
|
||
</motion.button>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 最近计划 - 移动端优化 */}
|
||
<motion.div variants={itemVariants} className="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-6">
|
||
<div className="flex justify-between items-center mb-3 sm:mb-4">
|
||
<h2 className="text-sm sm:text-base font-semibold text-gray-900">最近计划</h2>
|
||
<button
|
||
onClick={() => navigate('/purchaser/plans')}
|
||
className="text-xs sm:text-sm text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1"
|
||
>
|
||
查看全部
|
||
<ArrowLeft className="w-3 h-3 sm:w-4 sm:h-4 rotate-180" />
|
||
</button>
|
||
</div>
|
||
|
||
{recentPlans.length === 0 ? (
|
||
<div className="text-center py-8 sm:py-12 text-gray-400">
|
||
<Package className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-3 text-gray-300" />
|
||
<p className="text-sm">暂无计划</p>
|
||
<button
|
||
onClick={() => navigate('/purchaser/plans/new')}
|
||
className="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors"
|
||
>
|
||
创建计划
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2 sm:space-y-3">
|
||
{recentPlans.map((plan, i) => {
|
||
const progress = plan.target_quantity > 0
|
||
? Math.round((plan.completed_quantity / plan.target_quantity) * 100)
|
||
: 0;
|
||
const status = statusMap[plan.status] || statusMap.pending;
|
||
const StatusIcon = status.icon;
|
||
|
||
return (
|
||
<motion.div
|
||
key={plan.id}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: i * 0.1 }}
|
||
onClick={() => navigate(`/purchaser/plans?id=${plan.id}`)}
|
||
className="group flex items-center gap-2 sm:gap-4 p-3 sm:p-4 rounded-xl border border-gray-100 hover:border-blue-200 hover:bg-blue-50/30 cursor-pointer transition-all"
|
||
>
|
||
<div className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center ${status.bgColor}`}>
|
||
<StatusIcon className={`w-4 h-4 sm:w-5 sm:h-5 ${status.color}`} />
|
||
</div>
|
||
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-1.5 sm:gap-2 mb-0.5 sm:mb-1">
|
||
<h3 className="font-medium text-gray-900 text-xs sm:text-sm truncate">{plan.product_name}-{plan.color}</h3>
|
||
<span className={`px-1.5 py-0.5 text-xs rounded-full whitespace-nowrap ${status.bgColor} ${status.color}`}>
|
||
{status.label}
|
||
</span>
|
||
</div>
|
||
<p className="text-xs text-gray-500">{plan.fabric_code}-{plan.color_code}</p>
|
||
</div>
|
||
|
||
<div className="text-right hidden sm:block">
|
||
<p className="text-sm font-medium text-gray-900">{plan.target_quantity}米</p>
|
||
<p className="text-xs text-gray-400">计划产量</p>
|
||
</div>
|
||
|
||
<div className="w-16 sm:w-24">
|
||
<div className="flex items-center justify-between text-xs text-gray-500 mb-1">
|
||
<span className="hidden sm:inline">进度</span>
|
||
<span>{progress}%</span>
|
||
</div>
|
||
<div className="h-1 sm:h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
animate={{ width: `${progress}%` }}
|
||
transition={{ duration: 0.8, delay: i * 0.1 }}
|
||
className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|