@fastnd/components 1.0.32 → 1.0.34

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,22 +1,25 @@
 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'
 
 const STATUS_BADGE_CLASSES: Record<ProjectStatus, string> = {
-  'neu':           'bg-primary/10 text-primary border-transparent',
-  'offen':         'bg-muted-foreground/10 text-muted-foreground border-transparent',
-  'in-prufung':    'bg-[#ebbe0d]/15 text-[#8a7100] border-transparent',
-  'validierung':   'bg-[#e8a026]/15 text-[#8a5a00] border-transparent',
-  'abgeschlossen': 'bg-[#1ec489]/15 text-[#0a6e44] border-transparent',
+  'neu':           'border-primary',
+  'offen':         'border-muted-foreground',
+  'in-prufung':    'border-[#ebbe0d]',
+  'validierung':   'border-[#e8a026]',
+  'abgeschlossen': 'border-[#1ec489]',
 }
 
+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="outline" 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

@@ -58,7 +58,7 @@ const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>
         {...props}
       >
         {/* Relative wrapper so the center label overlay can be positioned absolutely */}
-        <div className="relative mx-auto aspect-square max-h-[200px]">
+        <div className="relative mx-auto aspect-square max-h-[160px]">
           <ChartContainer config={chartConfig} className="size-full">
             <PieChart>
               <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
@@ -66,8 +66,8 @@ const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>
                 data={chartData}
                 dataKey="count"
                 nameKey="status"
-                innerRadius={60}
-                outerRadius={85}
+                innerRadius={48}
+                outerRadius={68}
                 strokeWidth={5}
                 className="cursor-pointer"
                 onClick={handlePieClick}
@@ -88,7 +88,7 @@ const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>
           {/* 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"
+              className="text-2xl font-bold text-foreground"
               style={{ fontFamily: 'var(--font-clash)' }}
             >
               {total.toLocaleString()}

package/dist/examples/dashboard/StatusFilterLegend/StatusFilterLegend.tsx

@@ -43,7 +43,7 @@ const StatusFilterLegend = React.forwardRef<HTMLDivElement, StatusFilterLegendPr
               data-filter={filter}
               onClick={() => onFilterChange(filter)}
               className={cn(
-                'flex items-center justify-between w-full px-3 py-2 rounded-md border border-transparent transition-colors cursor-pointer text-sm outline-none focus-visible:bg-muted',
+                'flex items-center justify-between w-full px-3 py-1.5 rounded-md border border-transparent transition-colors cursor-pointer text-sm outline-none focus-visible:bg-muted',
                 isActive ? 'bg-muted border-border' : 'hover:bg-muted',
               )}
             >

package/dist/examples/dashboard/StatusOverview/StatusOverview.tsx

@@ -22,7 +22,7 @@ const StatusOverview = React.forwardRef<HTMLElement, StatusOverviewProps>(
         className={cn(className)}
         {...props}
       >
-        <Card>
+        <Card className="h-full py-4 gap-3">
           <CardHeader>
             <CardTitle
               className="text-2xl font-medium"

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 & Tracking Platform',  client: 'Bayerische LogiTrans Handelsgesellschaft mbH', application: 'Next.js 14 / tRPC / PostgreSQL',         status: 'in-prufung',    isFavorite: true,  createdAt: '2024-12-03', updatedAt: d(2)  },
+  { id: '8',  name: 'HR Self-Service & Workforce Management Portal', client: 'Personalwerk Süddeutschland AG',               application: 'Angular 17 / .NET Core 8 / Azure AD',    status: 'offen',         isFavorite: false, createdAt: '2025-01-08', updatedAt: d(5)  },
+  { id: '9',  name: 'Echtzeit IoT Monitoring & Alerting Dashboard', client: 'SmartFactory Automatisierungstechnik SE',       application: 'Vue.js 3 / InfluxDB / Grafana',          status: 'validierung',   isFavorite: false, createdAt: '2024-10-14', updatedAt: d(9)  },
+  { id: '10', name: 'Digitales Dokumenten- & Archivierungssystem',  client: 'Kanzlei Bauer, Hoffmann & Partner GbR',        application: 'SharePoint Online / Power Automate',     status: 'abgeschlossen', isFavorite: false, createdAt: '2024-06-01', updatedAt: d(30) },
+  { id: '11', name: 'Multi-Channel Customer Loyalty & Rewards App', client: 'Retail Chain Deutschland GmbH & Co. KG',       application: 'React Native / Expo / Firebase',         status: 'neu',           isFavorite: false, createdAt: '2025-03-20', updatedAt: d(0)  },
+  { id: '12', name: 'KI-gestützte Predictive Maintenance Engine',   client: 'IndustrieWerk Maschinenbau KG',                application: 'Python 3.12 / FastAPI / PyTorch / MLflow',status: 'in-prufung',    isFavorite: true,  createdAt: '2024-09-17', updatedAt: d(4)  },
+  { id: '13', name: 'Automatisierte Compliance & Audit Reporting Suite', client: 'RegulaCorp Financial Services AG',        application: 'Power BI Embedded / Azure Synapse',      status: 'offen',         isFavorite: false, createdAt: '2025-02-25', updatedAt: d(11) },
+  { id: '14', name: 'Mobile Field Service & Wartungsmanagement',    client: 'TechService Außendienst GmbH',                 application: 'Salesforce Field Service / MuleSoft',    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/CellRenderers/CellRenderers.tsx

@@ -1,25 +1,19 @@
 import React from 'react'
-import { ChevronDown, ArrowLeftRight, Sparkles } from 'lucide-react'
+import { ChevronDown, ArrowLeftRight, Sparkles, FolderPlus, BookmarkPlus, Trash2 } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { ScoreBar } from '@/components/ScoreBar/ScoreBar'
 import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
 import { cn } from '@/lib/utils'
-import type { ColumnDef } from '../types'
-
-export interface RenderCellOptions {
-  mode?: 'default' | 'compact' | 'inventory-label'
-  isExpanded?: boolean
-  isFavorite?: boolean
-  onToggleExpand?: () => void
-  onToggleFavorite?: () => void
-}
+import type { ColumnDef, RenderCellOptions } from '../types'
+
+export type { RenderCellOptions }
 
 const STATUS_COLORS: Record<string, string> = {
-  active: 'bg-[var(--lifecycle-active-bg)] text-[var(--lifecycle-active)] border-transparent',
-  nrnd: 'bg-[var(--lifecycle-nrnd-bg)] text-[var(--lifecycle-nrnd)] border-transparent',
-  eol: 'bg-[var(--lifecycle-eol-bg)] text-[var(--lifecycle-eol)] border-transparent',
-  production: 'bg-[var(--lifecycle-production-bg)] text-[var(--lifecycle-production)] border-transparent',
+  active:     'border-[var(--lifecycle-active)]',
+  nrnd:       'border-[var(--lifecycle-nrnd)]',
+  eol:        'border-[var(--lifecycle-eol)]',
+  production: 'border-[var(--lifecycle-production)]',
 }
 
 const INVENTORY_COLORS: Record<string, string> = {
@@ -39,9 +33,11 @@ export function renderCell(
   row: Record<string, unknown>,
   options: RenderCellOptions = {},
 ): React.ReactNode {
-  const { mode = 'default', isExpanded = false, isFavorite = false, onToggleExpand, onToggleFavorite } = options
+  const { mode = 'default', isExpanded = false, isFavorite = false, onToggleExpand, onToggleFavorite, onAddToProject, onAddToCollection, onDelete } = options
   const val = row[colKey]
 
+  if (col.render) return col.render(val, row, options)
+
   switch (col.type) {
     case 'text': {
       // col.rowLines drives the clamp; default 2 so columns can shrink without growing rows
@@ -83,7 +79,7 @@ export function renderCell(
       if (val == null || !col.statusMap) return <span className="text-[13px]">{val != null ? String(val) : ''}</span>
       const status = col.statusMap[String(val)] ?? 'active'
       return (
-        <Badge className={STATUS_COLORS[status]}>
+        <Badge variant="outline" className={STATUS_COLORS[status]}>
           {String(val)}
         </Badge>
       )
@@ -168,6 +164,40 @@ export function renderCell(
       )
     }
 
+    case 'actions': {
+      return (
+        <div className="flex items-center justify-end gap-0.5">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 text-muted-foreground hover:text-foreground"
+            aria-label="Zu Projekt hinzufügen"
+            onClick={(e) => { e.stopPropagation(); onAddToProject?.() }}
+          >
+            <FolderPlus className="size-3.5" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 text-muted-foreground hover:text-foreground"
+            aria-label="Zu Sammlung hinzufügen"
+            onClick={(e) => { e.stopPropagation(); onAddToCollection?.() }}
+          >
+            <BookmarkPlus className="size-3.5" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 text-muted-foreground hover:text-destructive"
+            aria-label="Produkt löschen"
+            onClick={(e) => { e.stopPropagation(); onDelete?.() }}
+          >
+            <Trash2 className="size-3.5" aria-hidden="true" />
+          </Button>
+        </div>
+      )
+    }
+
     default: {
       return <span className="text-[13px]">{val != null ? String(val) : ''}</span>
     }

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

@@ -106,7 +106,7 @@ export function ColumnConfigPopover({
         >
           <SortableContext items={columnOrder} strategy={verticalListSortingStrategy}>
             <div className="p-1">
-              {columnOrder.map((key) => (
+              {columnOrder.filter((key) => columns[key]?.configurable !== false).map((key) => (
                 <SortableColumnItem
                   key={key}
                   colKey={key}

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

@@ -86,6 +86,7 @@ function DataCardView({
 }: DataCardViewProps) {
   const gridRef = useRef<HTMLDivElement>(null)
   const expandFields = getExpandFields(layout)
+  const actionsColKey = Object.keys(columns).find((k) => columns[k]?.type === 'actions')
 
   useLayoutEffect(() => {
     if (gridRef.current) {
@@ -97,7 +98,7 @@ function DataCardView({
     <div
       ref={gridRef}
       data-slot="data-card-view"
-      className={cn('grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-3', className)}
+      className={cn('grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4', className)}
     >
       {data.map((row) => {
         const rowId = String(row.id ?? '')
@@ -111,7 +112,7 @@ function DataCardView({
             <div className="flex flex-col">
               <div
                 className={cn(
-                  'flex flex-col border border-border rounded-lg overflow-hidden hover:shadow-md transition-shadow bg-card text-card-foreground',
+                  'flex flex-col flex-1 border border-border rounded-lg overflow-hidden hover:shadow-md transition-shadow bg-card text-card-foreground',
                   isAnyExpanded && 'border-b-2 border-b-primary',
                 )}
               >
@@ -136,7 +137,7 @@ function DataCardView({
 
                 {/* Badges */}
                 {layout.badgeFields.length > 0 && (
-                  <div className="px-4 pt-2 flex gap-2 flex-wrap">
+                  <div className="px-4 pt-2 flex gap-1.5 flex-wrap">
                     {layout.badgeFields.map((bf) => {
                       const col = columns[bf]
                       if (!col || row[bf] == null) return null
@@ -163,31 +164,38 @@ function DataCardView({
                           )
                         : String(row[r.field] ?? '')
                       return (
-                        <div key={r.field} className="flex justify-between items-center">
-                          <span className="text-xs text-muted-foreground">{r.label}</span>
-                          <span className="text-[13px] font-medium">{valueNode}</span>
+                        <div key={r.field} className="flex justify-between items-start gap-4">
+                          <span className="text-xs text-muted-foreground shrink-0">{r.label}</span>
+                          <span className="text-[13px] font-medium min-w-0 text-right">{valueNode}</span>
                         </div>
                       )
                     })}
                   </div>
                 )}
 
-                {/* Footer — expand buttons */}
-                {expandFields.length > 0 && (
-                  <div className="p-4 pt-3">
-                    <div className="flex gap-2">
-                      {expandFields.map((ef) => {
-                        const col = columns[ef]
-                        if (!col) return null
-                        const expansionKey = `${rowId}::${ef}`
-                        return (
-                          <React.Fragment key={ef}>
-                            {renderCell(ef, col, row, {
-                              isExpanded: expandedRows.has(expansionKey),
-                              onToggleExpand: () => onToggleExpansion(rowId, ef),
-                            })}
-                          </React.Fragment>
-                        )
+                {/* Footer — expand buttons + actions */}
+                {(expandFields.length > 0 || actionsColKey) && (
+                  <div className="mt-auto p-4 pt-3 border-t border-border">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex gap-2">
+                        {expandFields.map((ef) => {
+                          const col = columns[ef]
+                          if (!col) return null
+                          const expansionKey = `${rowId}::${ef}`
+                          return (
+                            <React.Fragment key={ef}>
+                              {renderCell(ef, col, row, {
+                                isExpanded: expandedRows.has(expansionKey),
+                                onToggleExpand: () => onToggleExpansion(rowId, ef),
+                              })}
+                            </React.Fragment>
+                          )
+                        })}
+                      </div>
+                      {actionsColKey && renderCell(actionsColKey, columns[actionsColKey], row, {
+                        onAddToProject: () => {},
+                        onAddToCollection: () => {},
+                        onDelete: () => {},
                       })}
                     </div>
                   </div>