feat(03-03): module loader utility with category page and lazy cards
- Create module-loader.ts with MODULE_REGISTRY mapping slugs to dynamic imports (ssr:false) - Create [category] page fetching active modules from API, filtering by category - Create ModuleCard component with icon, name, description, and link to expanded view - Add i18n keys for modules namespace (de + en)
This commit is contained in:
@@ -0,0 +1,107 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Link from 'next/link';
|
||||
|
||||
/**
|
||||
* Module metadata passed to the card for rendering.
|
||||
*/
|
||||
export interface ModuleCardProps {
|
||||
name: string;
|
||||
slug: string;
|
||||
description: Record<string, string>;
|
||||
icon?: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default icon mapping for known module icons.
|
||||
* Renders inline SVG to avoid external icon library dependency.
|
||||
*/
|
||||
function ModuleIcon({ icon }: { icon?: string }) {
|
||||
// Globe icon for domain-related modules
|
||||
if (icon === 'Globe') {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-primary"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
||||
<path d="M2 12h20" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// Default puzzle-piece icon for generic modules
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-primary"
|
||||
>
|
||||
<path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.315 8.685a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 1.705-.707c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Module card for the category grid view.
|
||||
*
|
||||
* Displays module name, localized description, icon, and a link
|
||||
* to the expanded module view. Per D-05a: uniform card appearance,
|
||||
* compact, looks good even with a single module.
|
||||
*/
|
||||
export function ModuleCard({ name, slug, description, icon, category }: ModuleCardProps) {
|
||||
const t = useTranslations('modules');
|
||||
const locale = (typeof window !== 'undefined' && document.documentElement.lang) || 'de';
|
||||
const localizedDescription = description[locale] || description.en || description.de || '';
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/modules/${category}/${slug}`}
|
||||
className="group block"
|
||||
>
|
||||
<div className="rounded-lg border border-border bg-card p-5 shadow-sm transition-all hover:shadow-md hover:border-primary/30 group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2">
|
||||
{/* Header: icon + name */}
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
<div className="rounded-md bg-muted p-2.5 shrink-0">
|
||||
<ModuleIcon icon={icon} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="font-semibold text-base leading-tight truncate">
|
||||
{name}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-muted-foreground line-clamp-2 mb-4">
|
||||
{localizedDescription}
|
||||
</p>
|
||||
|
||||
{/* Footer: open link */}
|
||||
<div className="flex justify-end">
|
||||
<span className="text-sm font-medium text-primary group-hover:underline">
|
||||
{t('openModule')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { ModuleCard, type ModuleCardProps } from './components/ModuleCard';
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||
|
||||
/**
|
||||
* Module data shape from the API response.
|
||||
*/
|
||||
interface ApiModule {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
category: string;
|
||||
description: Record<string, string> | string;
|
||||
icon?: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a category slug for display.
|
||||
* Replaces hyphens with spaces and capitalizes each word.
|
||||
*/
|
||||
function formatCategoryName(category: string): string {
|
||||
return category
|
||||
.split('-')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
/**
|
||||
* Category page — displays activated module cards in a grid.
|
||||
*
|
||||
* Fetches active modules for the current tenant from the API,
|
||||
* filters by the category from the URL param, and renders a
|
||||
* responsive card grid. Per D-04: category page groups all
|
||||
* modules of that category.
|
||||
*
|
||||
* T-03-10: API filters by tenant's active modules — inactive
|
||||
* modules are never returned, cards never rendered.
|
||||
*/
|
||||
export default function CategoryPage() {
|
||||
const params = useParams<{ category: string }>();
|
||||
const category = params.category;
|
||||
const t = useTranslations('modules');
|
||||
|
||||
const [modules, setModules] = useState<ModuleCardProps[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchModules() {
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/modules/active`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
setModules([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const data: ApiModule[] = await response.json();
|
||||
|
||||
// Filter by category and map to card props
|
||||
const categoryModules = data
|
||||
.filter((mod) => mod.category === category)
|
||||
.map((mod): ModuleCardProps => ({
|
||||
name: mod.name,
|
||||
slug: mod.slug,
|
||||
description:
|
||||
typeof mod.description === 'string'
|
||||
? { en: mod.description }
|
||||
: (mod.description ?? {}),
|
||||
icon: mod.icon,
|
||||
category: mod.category,
|
||||
}));
|
||||
|
||||
setModules(categoryModules);
|
||||
} catch {
|
||||
setModules([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchModules();
|
||||
}, [category]);
|
||||
|
||||
const categoryTitle = formatCategoryName(category);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
{t('categoryTitle', { category: categoryTitle })}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Loading state */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Module grid */}
|
||||
{!isLoading && modules.length > 0 && (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{modules.map((mod) => (
|
||||
<ModuleCard key={mod.slug} {...mod} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoading && modules.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<div className="rounded-lg bg-muted p-4 mb-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-muted-foreground"
|
||||
>
|
||||
<path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.315 8.685a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 1.705-.707c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
{t('noModules')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user