Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/private_html/src/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import { useDashboardModal } from '@/hooks/useDashboardModal';
import { 
  Briefcase, 
  Users, 
  Calendar, 
  BarChart2, 
  MessageSquare, 
  User,
  FileText,
  DollarSign,
  Settings,
  Shield,
  Activity
} from 'lucide-react';

interface NavigationItem {
  title: string;
  description: string;
  icon: React.ReactNode;
  route: string;
  color: string;
}

interface DashboardNavigationProps {
  type: 'lawyer' | 'client' | 'admin';
}

const DashboardNavigation: React.FC<DashboardNavigationProps> = ({ type }) => {
  const { openModal } = useDashboardModal();

  const lawyerNavItems: NavigationItem[] = [
    {
      title: 'My Cases',
      description: 'View and manage all your assigned cases.',
      icon: <Briefcase className="h-8 w-8 text-blue-600" />,
      route: '/lawyer/cases',
      color: 'from-blue-500 to-blue-600',
    },
    {
      title: 'Consultations',
      description: 'Manage your legal consultations and bookings.',
      icon: <MessageSquare className="h-8 w-8 text-green-600" />,
      route: '/lawyer/consultations',
      color: 'from-green-500 to-green-600',
    },
    {
      title: 'My Team',
      description: 'Collaborate with your legal team and assign tasks.',
      icon: <Users className="h-8 w-8 text-purple-600" />,
      route: '/lawyer/team',
      color: 'from-purple-500 to-purple-600',
    },
    {
      title: 'Calendar',
      description: 'See all your hearings, meetings, and deadlines.',
      icon: <Calendar className="h-8 w-8 text-orange-600" />,
      route: '/lawyer/calendar',
      color: 'from-orange-500 to-orange-600',
    },
    {
      title: 'Analytics',
      description: 'Track your performance and case outcomes.',
      icon: <BarChart2 className="h-8 w-8 text-pink-600" />,
      route: '/lawyer/analytics',
      color: 'from-pink-500 to-pink-600',
    },
    {
      title: 'Clients',
      description: 'Manage your clients and communications.',
      icon: <User className="h-8 w-8 text-teal-600" />,
      route: '/lawyer/clients',
      color: 'from-teal-500 to-teal-600',
    },
    {
      title: 'Profile',
      description: 'Manage your professional profile and credentials.',
      icon: <User className="h-8 w-8 text-indigo-600" />,
      route: '/lawyer/profile',
      color: 'from-indigo-500 to-indigo-600',
    },
  ];

  const clientNavItems: NavigationItem[] = [
    {
      title: 'My Cases',
      description: 'View and manage your legal cases.',
      icon: <FileText className="h-8 w-8 text-blue-600" />,
      route: '/client/cases',
      color: 'from-blue-500 to-blue-600',
    },
    {
      title: 'Documents',
      description: 'Access and manage your legal documents.',
      icon: <FileText className="h-8 w-8 text-green-600" />,
      route: '/client/documents',
      color: 'from-green-500 to-green-600',
    },
    {
      title: 'Payments',
      description: 'View payment history and make payments.',
      icon: <DollarSign className="h-8 w-8 text-purple-600" />,
      route: '/client/payments',
      color: 'from-purple-500 to-purple-600',
    },
    {
      title: 'Messages',
      description: 'Communicate with your legal team.',
      icon: <MessageSquare className="h-8 w-8 text-orange-600" />,
      route: '/client/messages',
      color: 'from-orange-500 to-orange-600',
    },
  ];

  const adminNavItems: NavigationItem[] = [
    {
      title: 'User Management',
      description: 'Manage all users and their permissions.',
      icon: <Users className="h-8 w-8 text-blue-600" />,
      route: '/admin/users',
      color: 'from-blue-500 to-blue-600',
    },
    {
      title: 'Case Management',
      description: 'Oversee all cases and assignments.',
      icon: <Briefcase className="h-8 w-8 text-green-600" />,
      route: '/admin/cases',
      color: 'from-green-500 to-green-600',
    },
    {
      title: 'Registrations',
      description: 'Review and manage user registrations.',
      icon: <FileText className="h-8 w-8 text-purple-600" />,
      route: '/admin/registrations',
      color: 'from-purple-500 to-purple-600',
    },
    {
      title: 'Analytics',
      description: 'View system-wide analytics and reports.',
      icon: <BarChart2 className="h-8 w-8 text-orange-600" />,
      route: '/admin/analytics',
      color: 'from-orange-500 to-orange-600',
    },
    {
      title: 'Settings',
      description: 'Configure system settings and preferences.',
      icon: <Settings className="h-8 w-8 text-pink-600" />,
      route: '/admin/settings',
      color: 'from-pink-500 to-pink-600',
    },
  ];

  const getNavItems = () => {
    switch (type) {
      case 'lawyer':
        return lawyerNavItems;
      case 'client':
        return clientNavItems;
      case 'admin':
        return adminNavItems;
      default:
        return [];
    }
  };

  const handleCardClick = (item: NavigationItem) => {
    openModal(item.route, item.title);
  };

  const navItems = getNavItems();

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {navItems.map((item, index) => (
        <button
          key={index}
          onClick={() => handleCardClick(item)}
          className="group relative bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-all duration-200 hover:scale-105"
        >
          <div className="flex items-center justify-between mb-4">
            <div className={`p-3 rounded-lg bg-gradient-to-r ${item.color}`}>
              {item.icon}
            </div>
            <div className="opacity-0 group-hover:opacity-100 transition-opacity">
              <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
          <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
          <p className="text-sm text-gray-600">{item.description}</p>
        </button>
      ))}
    </div>
  );
};

export default DashboardNavigation;