@fastnd/components 1.0.31 → 1.0.33

package/dist/components/QuickAccessCard/QuickAccessCard.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface QuickAccessCardProps extends React.ComponentProps<'a'> {
+    label: string;
+    count: number;
+    countLabel?: string;
+    icon: React.ReactNode;
+    variant?: 'default' | 'overdue';
+    isActive?: boolean;
+}
+declare const QuickAccessCard: React.ForwardRefExoticComponent<Omit<QuickAccessCardProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { QuickAccessCard };
+export type { QuickAccessCardProps };

package/dist/components/ScoreBar/ScoreBar.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ScoreBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    value: number;
+    showLabel?: boolean;
+}
+declare const ScoreBar: React.ForwardRefExoticComponent<ScoreBarProps & React.RefAttributes<HTMLDivElement>>;
+export { ScoreBar };
+export type { ScoreBarProps };

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
 export * from './FavoriteButton/FavoriteButton';
+export * from './QuickAccessCard/QuickAccessCard';
+export * from './ScoreBar/ScoreBar';
 export * from './ui/accordion';
 export * from './ui/alert';
 export * from './ui/alert-dialog';

package/dist/examples/dashboard/DashboardPage/DashboardPage.tsx

@@ -25,7 +25,7 @@ const DashboardPage = React.forwardRef<HTMLElement, DashboardPageProps>(
         ref={ref}
         data-slot="dashboard-page"
         className={cn(
-          'grid grid-cols-1 lg:grid-cols-[350px_1fr] gap-6 max-w-[1400px] mx-auto p-8',
+          'grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6 max-w-[1400px] mx-auto p-8',
           className,
         )}
         {...props}

package/dist/examples/dashboard/ProjectList/ProjectList.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
-import { Star } from 'lucide-react'
 import { Card, CardContent } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { Table, TableHeader, TableHead, TableBody, TableRow, TableCell } from '@/components/ui/table'
 import { Badge } from '@/components/ui/badge'
-import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { DataTableView } from '@/features/data-visualization/DataTableView/DataTableView'
+import { formatRelativeDate } from '@/utils/date'
 import { cn } from '@/lib/utils'
+import type { ColumnDef, SortState } from '@/features/data-visualization/types'
 import type { Project, ProjectStatus } from '../types'
 import { STATUS_CONFIG } from '../constants'
 
@@ -17,6 +17,9 @@ const STATUS_BADGE_CLASSES: Record<ProjectStatus, string> = {
   'abgeschlossen': 'bg-[#1ec489]/15 text-[#0a6e44] border-transparent',
 }
 
+const STATIC_SORT: SortState = { column: null, direction: 'asc' }
+const EMPTY_ROWS = new Set<string>()
+
 interface ProjectListProps extends React.ComponentProps<'section'> {
   projects: Project[]
   filterLabel: string
@@ -38,6 +41,75 @@ const ProjectList = React.forwardRef<HTMLElement, ProjectListProps>(
     },
     ref,
   ) => {
+    const columns: Record<string, ColumnDef> = React.useMemo(() => ({
+      isFavorite: {
+        label: 'Favorit',
+        type: 'favorite',
+        sortable: false,
+        filterable: false,
+        visible: true,
+        headerIcon: 'star',
+        headerTooltip: 'Favorit',
+      },
+      name: {
+        label: 'Projekt / Applikation',
+        type: 'double-text',
+        secondary: 'application',
+        sortable: false,
+        filterable: false,
+        visible: true,
+      },
+      client: {
+        label: 'Kunde',
+        type: 'text',
+        sortable: false,
+        filterable: false,
+        visible: true,
+      },
+      status: {
+        label: 'Status',
+        type: 'text',
+        sortable: false,
+        filterable: false,
+        visible: true,
+        render: (val) => {
+          const s = val as ProjectStatus
+          return (
+            <Badge variant="secondary" className={STATUS_BADGE_CLASSES[s]}>
+              {STATUS_CONFIG[s].label}
+            </Badge>
+          )
+        },
+      },
+      updatedAt: {
+        label: 'Aktivität',
+        type: 'text',
+        sortable: false,
+        filterable: false,
+        visible: true,
+        render: (val, row) => (
+          <div className="flex flex-col">
+            <span className="font-medium text-[13px]">{formatRelativeDate(String(val))}</span>
+            <span className="text-muted-foreground text-xs">
+              Erstellt: {new Date(String(row.createdAt)).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })}
+            </span>
+          </div>
+        ),
+      },
+    }), [])
+
+    const visibleColumns = ['isFavorite', 'name', 'client', 'status', 'updatedAt']
+
+    const rowData = React.useMemo(
+      () => projects.map(p => ({ ...p } as Record<string, unknown>)),
+      [projects],
+    )
+
+    const favorites = React.useMemo(
+      () => new Set(projects.filter(p => p.isFavorite).map(p => p.id)),
+      [projects],
+    )
+
     return (
       <section
         ref={ref}
@@ -63,50 +135,18 @@ const ProjectList = React.forwardRef<HTMLElement, ProjectListProps>(
               onChange={e => onSearchChange(e.target.value)}
             />
           </div>
-          <CardContent>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead scope="col">Projektname</TableHead>
-                  <TableHead scope="col">Kunde</TableHead>
-                  <TableHead scope="col">Applikation</TableHead>
-                  <TableHead scope="col">Status</TableHead>
-                  <TableHead scope="col" aria-label="Favorit">
-                    <Star className="size-3.5" />
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {projects.map(project => (
-                  <TableRow key={project.id}>
-                    <TableCell>
-                      <span className="font-medium">{project.name}</span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-muted-foreground text-[0.8125rem]">
-                        {project.client}
-                      </span>
-                    </TableCell>
-                    <TableCell>{project.application}</TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="secondary"
-                        className={cn(STATUS_BADGE_CLASSES[project.status])}
-                      >
-                        {STATUS_CONFIG[project.status].label}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>
-                      <FavoriteButton
-                        pressed={project.isFavorite}
-                        projectName={project.name}
-                        onPressedChange={() => onToggleFavorite(project.id)}
-                      />
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+          <CardContent className="p-0">
+            <DataTableView
+              data={rowData}
+              columns={columns}
+              visibleColumns={visibleColumns}
+              sort={STATIC_SORT}
+              onToggleSort={() => {}}
+              expandedRows={EMPTY_ROWS}
+              onToggleExpansion={() => {}}
+              favorites={favorites}
+              onToggleFavorite={onToggleFavorite}
+            />
           </CardContent>
         </Card>
       </section>

package/dist/examples/dashboard/StatusDonutChart/StatusDonutChart.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Pie, PieChart, Label, Sector } from 'recharts'
+import { Pie, PieChart, Sector } from 'recharts'
 import type { PieSectorShapeProps } from 'recharts/types/polar/Pie'
 import {
   ChartContainer,
@@ -57,62 +57,47 @@ const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>
         className={cn(className)}
         {...props}
       >
-        <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[200px]">
-          <PieChart>
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-            <Pie
-              data={chartData}
-              dataKey="count"
-              nameKey="status"
-              innerRadius={60}
-              outerRadius={85}
-              strokeWidth={5}
-              className="cursor-pointer"
-              onClick={handlePieClick}
-              shape={({
-                index,
-                outerRadius: or = 0,
-                ...sectorProps
-              }: PieSectorShapeProps) => (
-                <Sector
-                  {...sectorProps}
-                  outerRadius={index === activeIndex ? or + 10 : or}
-                />
-              )}
-            >
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-foreground text-3xl font-bold"
-                          style={{ fontFamily: 'var(--font-clash)' }}
-                        >
-                          {total.toLocaleString()}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 24}
-                          className="fill-muted-foreground text-xs uppercase tracking-wider"
-                        >
-                          Gesamt
-                        </tspan>
-                      </text>
-                    )
-                  }
-                }}
+        {/* Relative wrapper so the center label overlay can be positioned absolutely */}
+        <div className="relative mx-auto aspect-square max-h-[200px]">
+          <ChartContainer config={chartConfig} className="size-full">
+            <PieChart>
+              <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+              <Pie
+                data={chartData}
+                dataKey="count"
+                nameKey="status"
+                innerRadius={60}
+                outerRadius={85}
+                strokeWidth={5}
+                className="cursor-pointer"
+                onClick={handlePieClick}
+                shape={({
+                  index,
+                  outerRadius: or = 0,
+                  ...sectorProps
+                }: PieSectorShapeProps) => (
+                  <Sector
+                    {...sectorProps}
+                    outerRadius={index === activeIndex ? or + 10 : or}
+                  />
+                )}
               />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
+            </PieChart>
+          </ChartContainer>
+
+          {/* Center label — rendered as HTML so it is always in the DOM (recharts SVG labels are invisible in jsdom) */}
+          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-0.5">
+            <span
+              className="text-3xl font-bold text-foreground"
+              style={{ fontFamily: 'var(--font-clash)' }}
+            >
+              {total.toLocaleString()}
+            </span>
+            <span className="text-xs uppercase tracking-wider text-muted-foreground">
+              Gesamt
+            </span>
+          </div>
+        </div>
       </div>
     )
   }

package/dist/examples/dashboard/constants.ts

@@ -8,11 +8,25 @@ export const STATUS_CONFIG: Record<ProjectStatus, { label: string; color: string
   'abgeschlossen': { label: 'Abgeschlossen', color: '#1ec489' },
 }
 
+const d = (daysAgo: number) => new Date(Date.now() - daysAgo * 86_400_000).toISOString()
+
 export const MOCK_PROJECTS: Project[] = [
-  { id: '1', name: 'E-Commerce Relaunch',     client: 'Müller GmbH',       application: 'Shopify CMS',       status: 'neu',           isFavorite: false },
-  { id: '2', name: 'CRM Integration MVP',     client: 'TechCorp Inc.',     application: 'Salesforce API',    status: 'offen',         isFavorite: true },
-  { id: '3', name: 'Data Analytics Dashboard', client: 'DataViz AG',        application: 'React / Supabase',  status: 'in-prufung',    isFavorite: false },
-  { id: '4', name: 'Mobile App Onboarding',   client: 'FitHealth',         application: 'Flutter',           status: 'neu',           isFavorite: false },
-  { id: '5', name: 'Payment Gateway Update',  client: 'FinTech Solutions', application: 'Stripe API',        status: 'validierung',   isFavorite: false },
-  { id: '6', name: 'Legacy System Migration', client: 'OldBank Corp.',     application: 'Node.js / PostgreSQL', status: 'abgeschlossen', isFavorite: true },
+  { id: '1', name: 'E-Commerce Relaunch',      client: 'Müller GmbH',       application: 'Shopify CMS',          status: 'neu',           isFavorite: false, createdAt: '2025-03-15', updatedAt: d(0)  },
+  { id: '2', name: 'CRM Integration MVP',      client: 'TechCorp Inc.',     application: 'Salesforce API',       status: 'offen',         isFavorite: true,  createdAt: '2025-02-10', updatedAt: d(1)  },
+  { id: '3', name: 'Data Analytics Dashboard', client: 'DataViz AG',        application: 'React / Supabase',     status: 'in-prufung',    isFavorite: false, createdAt: '2025-01-20', updatedAt: d(3)  },
+  { id: '4', name: 'Mobile App Onboarding',    client: 'FitHealth',         application: 'Flutter',              status: 'neu',           isFavorite: false, createdAt: '2025-03-01', updatedAt: d(7)  },
+  { id: '5', name: 'Payment Gateway Update',   client: 'FinTech Solutions', application: 'Stripe API',           status: 'validierung',   isFavorite: false, createdAt: '2024-11-05', updatedAt: d(14) },
+  { id: '6', name: 'Legacy System Migration',  client: 'OldBank Corp.',     application: 'Node.js / PostgreSQL', status: 'abgeschlossen', isFavorite: true,  createdAt: '2024-08-20', updatedAt: d(60) },
+]
+
+export const MOCK_PROJECTS_EXTENDED: Project[] = [
+  ...MOCK_PROJECTS,
+  { id: '7',  name: 'Supply Chain Visibility Platform', client: 'LogiTrans GmbH',     application: 'Next.js / GraphQL',    status: 'in-prufung',    isFavorite: true,  createdAt: '2024-12-03', updatedAt: d(2)  },
+  { id: '8',  name: 'HR Self-Service Portal',           client: 'Personalwerk AG',    application: 'Angular / .NET Core',  status: 'offen',         isFavorite: false, createdAt: '2025-01-08', updatedAt: d(5)  },
+  { id: '9',  name: 'IoT Monitoring Dashboard',         client: 'SmartFactory SE',    application: 'Vue.js / InfluxDB',    status: 'validierung',   isFavorite: false, createdAt: '2024-10-14', updatedAt: d(9)  },
+  { id: '10', name: 'Document Management System',       client: 'Kanzlei Bauer & Co', application: 'SharePoint / Power Automate', status: 'abgeschlossen', isFavorite: false, createdAt: '2024-06-01', updatedAt: d(30) },
+  { id: '11', name: 'Customer Loyalty App',             client: 'Retail Chain GmbH',  application: 'React Native',         status: 'neu',           isFavorite: false, createdAt: '2025-03-20', updatedAt: d(0)  },
+  { id: '12', name: 'Predictive Maintenance Engine',    client: 'IndustrieWerk KG',   application: 'Python / FastAPI / ML',status: 'in-prufung',    isFavorite: true,  createdAt: '2024-09-17', updatedAt: d(4)  },
+  { id: '13', name: 'Compliance Reporting Suite',       client: 'RegulaCorp AG',      application: 'Power BI / Azure',     status: 'offen',         isFavorite: false, createdAt: '2025-02-25', updatedAt: d(11) },
+  { id: '14', name: 'Field Service Management',         client: 'TechService GmbH',   application: 'Salesforce Field Srv', status: 'validierung',   isFavorite: true,  createdAt: '2024-07-30', updatedAt: d(6)  },
 ]

package/dist/examples/dashboard/types.ts

@@ -9,6 +9,8 @@ export interface Project {
   application: string
   status: ProjectStatus
   isFavorite: boolean
+  createdAt: string
+  updatedAt: string
 }
 
 export interface StatusCount {

package/dist/examples/data-visualization/CardCarouselPanel/CardCarouselPanel.tsx

@@ -0,0 +1,171 @@
+import React from 'react'
+import { Plus } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from '@/components/ui/carousel'
+import { ScoreBar } from '@/components/ScoreBar/ScoreBar'
+import { renderCell } from '../CellRenderers/CellRenderers'
+import { cn } from '@/lib/utils'
+import type { CardLayout, ColumnDef, ExpandColumnDef } from '../types'
+
+export interface CardCarouselPanelProps {
+  title: string
+  items: Record<string, unknown>[]
+  expandColumns: ExpandColumnDef[]
+  columns: Record<string, ColumnDef>
+  layout: CardLayout
+  className?: string
+}
+
+function buildVirtualRow(
+  item: Record<string, unknown>,
+  expandColumns: ExpandColumnDef[],
+  columns: Record<string, ColumnDef>,
+): Record<string, unknown> {
+  const virtualRow: Record<string, unknown> = {}
+  for (const ec of expandColumns) {
+    if (ec.mapTo) {
+      virtualRow[ec.mapTo] = item[ec.key]
+      if (ec.secondaryKey) {
+        const mainCol = columns[ec.mapTo]
+        if (mainCol?.secondary) {
+          virtualRow[mainCol.secondary] = item[ec.secondaryKey]
+        }
+      }
+    }
+  }
+  return virtualRow
+}
+
+function CardCarouselPanel({
+  title,
+  items,
+  expandColumns,
+  columns,
+  layout,
+  className,
+}: CardCarouselPanelProps) {
+  const scoreEc = expandColumns.find((ec) => ec.type === 'score-bar')
+
+  return (
+    <div
+      data-slot="card-carousel-panel"
+      className={cn('border border-border rounded-lg bg-card', className)}
+    >
+      <Carousel opts={{ align: 'start' }}>
+        <div className="flex items-center justify-between p-3 border-b border-border">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold">{title}</span>
+            <Badge variant="secondary" className="text-xs">
+              {items.length}
+            </Badge>
+          </div>
+          <div className="flex items-center gap-1">
+            <CarouselPrevious className="static translate-y-0 size-7 rounded-md" />
+            <CarouselNext className="static translate-y-0 size-7 rounded-md" />
+          </div>
+        </div>
+
+        <CarouselContent className="p-3 -ml-3">
+          {items.map((item, index) => {
+            const virtualRow = buildVirtualRow(item, expandColumns, columns)
+            const titleValue = virtualRow[layout.titleField]
+            const subtitleValue = layout.subtitleField
+              ? virtualRow[layout.subtitleField]
+              : undefined
+
+            return (
+              <CarouselItem
+                key={index}
+                className="basis-1/3 pl-3 max-lg:basis-1/2 max-sm:basis-[85%]"
+              >
+                <div className="border border-border rounded-lg p-4 flex flex-col gap-3 h-full">
+                  {/* Header — single-line truncate for carousel mini-card per spec */}
+                  <div>
+                    <div className="text-[13px] font-semibold truncate">
+                      {titleValue != null ? String(titleValue) : ''}
+                    </div>
+                    {subtitleValue != null && (
+                      <div className="text-xs text-muted-foreground mt-0.5 flex items-center gap-1">
+                        {String(subtitleValue)}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Badges */}
+                  {layout.badgeFields.length > 0 && (
+                    <div className="flex flex-wrap gap-1">
+                      {layout.badgeFields.map((bf) => {
+                        const col = columns[bf]
+                        if (!col || virtualRow[bf] == null) return null
+                        return (
+                          <React.Fragment key={bf}>
+                            {renderCell(bf, col, virtualRow)}
+                          </React.Fragment>
+                        )
+                      })}
+                    </div>
+                  )}
+
+                  {/* Rows */}
+                  {layout.rows.length > 0 && (
+                    <div className="flex flex-col gap-1.5 flex-1">
+                      {layout.rows.map((r) => {
+                        if (virtualRow[r.field] == null) return null
+                        const col = columns[r.field]
+                        const valueNode = col
+                          ? renderCell(
+                              r.field,
+                              col,
+                              virtualRow,
+                              r.rendererOverride === 'inventory-label'
+                                ? { mode: 'inventory-label' }
+                                : {},
+                            )
+                          : String(virtualRow[r.field] ?? '')
+                        return (
+                          <div
+                            key={r.field}
+                            className="flex justify-between items-center text-[13px]"
+                          >
+                            <span className="text-muted-foreground">{r.label}</span>
+                            <span className="font-medium">{valueNode}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  )}
+
+                  {/* Score bar */}
+                  {scoreEc && (
+                    <ScoreBar
+                      value={
+                        typeof item[scoreEc.key] === 'number'
+                          ? (item[scoreEc.key] as number)
+                          : 0
+                      }
+                    />
+                  )}
+
+                  {/* Footer */}
+                  <Button variant="outline" size="sm" className="w-full gap-1.5">
+                    <Plus className="size-3.5" aria-hidden="true" />
+                    Hinzufügen
+                  </Button>
+                </div>
+              </CarouselItem>
+            )
+          })}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  )
+}
+
+export { CardCarouselPanel }