clqms-fe1/src/routes/(app)/master-data/+page.svelte

<script>
import { 
    List, 
    MapPin, 
    Users, 
    Briefcase, 
    Stethoscope, 
    Hash,
    Globe,
    ChevronRight,
    FlaskConical,
    TestTube
  } from 'lucide-svelte';

  const modules = [
    {
      title: 'Containers',
      description: 'Manage specimen containers and tubes',
      icon: FlaskConical,
      href: '/master-data/containers',
      color: 'bg-cyan-500',
    },
    {
      title: 'Test Definitions',
      description: 'Manage laboratory tests, panels, and calculated values',
      icon: TestTube,
      href: '/master-data/tests',
      color: 'bg-rose-500',
    },
    {
      title: 'ValueSets',
      description: 'System lookup values and dropdown options (GENDER, MARITAL_STATUS, etc.)',
      icon: List,
      href: '/master-data/valuesets',
      color: 'bg-blue-500',
    },
    {
      title: 'Locations',
      description: 'Manage locations and facilities',
      icon: MapPin,
      href: '/master-data/locations',
      color: 'bg-green-500',
    },
    {
      title: 'Contacts',
      description: 'Manage physicians and contacts',
      icon: Users,
      href: '/master-data/contacts',
      color: 'bg-purple-500',
    },
    {
      title: 'Occupations',
      description: 'Manage occupation codes',
      icon: Briefcase,
      href: '/master-data/occupations',
      color: 'bg-orange-500',
    },
    {
      title: 'Medical Specialties',
      description: 'Manage medical specialty codes',
      icon: Stethoscope,
      href: '/master-data/specialties',
      color: 'bg-pink-500',
    },
    {
      title: 'Counters',
      description: 'Manage ID generation counters',
      icon: Hash,
      href: '/master-data/counters',
      color: 'bg-teal-500',
    },
    {
      title: 'Geography',
      description: 'View provinces, cities, and geographical areas',
      icon: Globe,
      href: '/master-data/geography',
      color: 'bg-indigo-500',
    },
  ];
</script>

<div class="p-4">
  <h1 class="text-xl font-bold text-gray-800 mb-2">Master Data</h1>
  <p class="text-sm text-gray-600 mb-8">Manage reference data and lookup values used throughout the system</p>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {#each modules as module}
      <a 
        href={module.href}
        class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow border border-base-200 group"
      >
        <div class="card-body">
          <div class="flex items-start gap-4">
            <div class="{module.color} text-white p-3 rounded-lg">
              <svelte:component this={module.icon} class="w-6 h-6" />
            </div>
            <div class="flex-1">
              <h2 class="card-title text-lg group-hover:text-primary transition-colors">
                {module.title}
              </h2>
              <p class="text-sm text-gray-600 mt-1">{module.description}</p>
            </div>
            <ChevronRight class="w-5 h-5 text-gray-400 group-hover:text-primary transition-colors" />
          </div>
        </div>
      </a>
    {/each}
  </div>
</div>