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

<script>
  import { 
    ChevronRight,
    User,
    LandPlot,
    Users,
    Building2,
    Monitor,
    Activity
  } from 'lucide-svelte';
  import { ArrowLeft } from 'lucide-svelte';

  const modules = [
    {
      title: 'Account',
      description: 'Manage organization accounts',
      icon: User,
      href: '/master-data/organization/account',
      color: 'bg-blue-500',
    },
    {
      title: 'Site',
      description: 'Manage organization sites and locations',
      icon: LandPlot,
      href: '/master-data/organization/site',
      color: 'bg-green-500',
    },
    {
      title: 'Department',
      description: 'Manage departments structure',
      icon: Users,
      href: '/master-data/organization/department',
      color: 'bg-purple-500',
    },
    {
      title: 'Discipline',
      description: 'Manage laboratory disciplines',
      icon: Building2,
      href: '/master-data/organization/discipline',
      color: 'bg-indigo-500',
    },
    {
      title: 'Workstation',
      description: 'Manage workstation configurations',
      icon: Monitor,
      href: '/master-data/organization/workstation',
      color: 'bg-cyan-500',
    },
    {
      title: 'Instrument',
      description: 'Manage laboratory instruments',
      icon: Activity,
      href: '/master-data/organization/instrument',
      color: 'bg-orange-500',
    },
  ];
</script>

<div class="p-4">
  <div class="flex items-center gap-4 mb-6">
    <a href="/master-data" class="btn btn-ghost btn-circle">
      <ArrowLeft class="w-5 h-5" />
    </a>
    <div class="flex-1">
      <h1 class="text-xl font-bold text-gray-800">Organization</h1>
      <p class="text-sm text-gray-600">Manage organizational structure and resources</p>
    </div>
  </div>

  <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>