helix-lang 11.0.0

package/library/dashboard-analytics/components/dashboard/ActivityFeed.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+export interface ActivityItem {
+    id: string;
+    user: string;
+    action: string;
+    target?: string;
+    timestamp: string | Date;
+    avatar?: string;
+}
+
+interface ActivityFeedProps {
+    items: ActivityItem[];
+    title?: string;
+    maxItems?: number;
+    onViewAll?: () => void;
+}
+
+function formatRelativeTime(date: string | Date): string {
+    const now = Date.now();
+    const then = new Date(date).getTime();
+    const diffMs = now - then;
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHour = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHour / 24);
+
+    if (diffSec < 60) return 'just now';
+    if (diffMin < 60) return `${diffMin}m ago`;
+    if (diffHour < 24) return `${diffHour}h ago`;
+    if (diffDay < 7) return `${diffDay}d ago`;
+    return new Date(date).toLocaleDateString();
+}
+
+function getInitials(name: string): string {
+    return name
+        .split(' ')
+        .map((part) => part[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+
+export default function ActivityFeed({
+    items,
+    title = 'Recent Activity',
+    maxItems = 10,
+    onViewAll,
+}: ActivityFeedProps) {
+    const displayItems = items.slice(0, maxItems);
+
+    return (
+        <div className="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-6">
+            <div className="flex items-center justify-between mb-5">
+                <h3 className="text-lg font-semibold text-white">{title}</h3>
+                {onViewAll && (
+                    <button
+                        onClick={onViewAll}
+                        className="text-sm text-cyan-400 hover:text-cyan-300 transition-colors"
+                    >
+                        View all
+                    </button>
+                )}
+            </div>
+
+            {displayItems.length === 0 ? (
+                <p className="text-white/30 text-sm py-8 text-center">No recent activity</p>
+            ) : (
+                <div className="space-y-4">
+                    {displayItems.map((item) => (
+                        <div
+                            key={item.id}
+                            className="flex items-start gap-3 group"
+                        >
+                            {/* Avatar */}
+                            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center">
+                                {item.avatar ? (
+                                    <img
+                                        src={item.avatar}
+                                        alt={item.user}
+                                        className="w-8 h-8 rounded-full object-cover"
+                                    />
+                                ) : (
+                                    <span className="text-xs font-medium text-cyan-400">
+                                        {getInitials(item.user)}
+                                    </span>
+                                )}
+                            </div>
+
+                            {/* Content */}
+                            <div className="flex-1 min-w-0">
+                                <p className="text-sm text-white/80">
+                                    <span className="font-medium text-white">{item.user}</span>{' '}
+                                    {item.action}
+                                    {item.target && (
+                                        <span className="font-medium text-cyan-400"> {item.target}</span>
+                                    )}
+                                </p>
+                                <p className="text-xs text-white/30 mt-0.5">
+                                    {formatRelativeTime(item.timestamp)}
+                                </p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/library/dashboard-analytics/components/dashboard/LineChart.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useMemo } from 'react';
+
+export interface DataPoint {
+    label: string;
+    value: number;
+}
+
+interface LineChartProps {
+    data: DataPoint[];
+    title?: string;
+    height?: number;
+    color?: string;
+    showGrid?: boolean;
+    showLabels?: boolean;
+}
+
+export default function LineChart({
+    data,
+    title,
+    height = 200,
+    color = '#06b6d4',
+    showGrid = true,
+    showLabels = true,
+}: LineChartProps) {
+    const chartData = useMemo(() => {
+        if (data.length === 0) return null;
+
+        const values = data.map((d) => d.value);
+        const maxVal = Math.max(...values);
+        const minVal = Math.min(...values);
+        const range = maxVal - minVal || 1;
+
+        const padding = { top: 20, right: 20, bottom: 40, left: 50 };
+        const chartWidth = 600;
+        const chartHeight = height;
+        const innerWidth = chartWidth - padding.left - padding.right;
+        const innerHeight = chartHeight - padding.top - padding.bottom;
+
+        const points = data.map((d, i) => ({
+            x: padding.left + (i / Math.max(data.length - 1, 1)) * innerWidth,
+            y: padding.top + innerHeight - ((d.value - minVal) / range) * innerHeight,
+            label: d.label,
+            value: d.value,
+        }));
+
+        const pathD = points
+            .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`)
+            .join(' ');
+
+        const areaD =
+            pathD +
+            ` L ${points[points.length - 1].x} ${padding.top + innerHeight}` +
+            ` L ${points[0].x} ${padding.top + innerHeight} Z`;
+
+        const gridLines = [];
+        const gridCount = 4;
+        for (let i = 0; i <= gridCount; i++) {
+            const y = padding.top + (i / gridCount) * innerHeight;
+            const val = maxVal - (i / gridCount) * range;
+            gridLines.push({ y, label: val.toFixed(0) });
+        }
+
+        return {
+            points,
+            pathD,
+            areaD,
+            gridLines,
+            chartWidth,
+            chartHeight,
+            padding,
+            innerHeight,
+        };
+    }, [data, height]);
+
+    if (!chartData || data.length === 0) {
+        return (
+            <div className="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-6">
+                {title && <h3 className="text-lg font-semibold text-white mb-4">{title}</h3>}
+                <div
+                    className="flex items-center justify-center text-white/30"
+                    style={{ height }}
+                >
+                    No data available
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-6">
+            {title && <h3 className="text-lg font-semibold text-white mb-4">{title}</h3>}
+
+            <svg
+                viewBox={`0 0 ${chartData.chartWidth} ${chartData.chartHeight}`}
+                className="w-full"
+                style={{ height }}
+            >
+                {/* Gradient fill */}
+                <defs>
+                    <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor={color} stopOpacity="0.3" />
+                        <stop offset="100%" stopColor={color} stopOpacity="0" />
+                    </linearGradient>
+                </defs>
+
+                {/* Grid lines */}
+                {showGrid &&
+                    chartData.gridLines.map((line, i) => (
+                        <g key={i}>
+                            <line
+                                x1={chartData.padding.left}
+                                y1={line.y}
+                                x2={chartData.chartWidth - chartData.padding.right}
+                                y2={line.y}
+                                stroke="rgba(255,255,255,0.06)"
+                                strokeDasharray="4 4"
+                            />
+                            <text
+                                x={chartData.padding.left - 10}
+                                y={line.y + 4}
+                                textAnchor="end"
+                                fill="rgba(255,255,255,0.3)"
+                                fontSize="11"
+                            >
+                                {line.label}
+                            </text>
+                        </g>
+                    ))}
+
+                {/* Area fill */}
+                <path d={chartData.areaD} fill="url(#areaGradient)" />
+
+                {/* Line */}
+                <path
+                    d={chartData.pathD}
+                    fill="none"
+                    stroke={color}
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+
+                {/* Data points */}
+                {chartData.points.map((point, i) => (
+                    <circle
+                        key={i}
+                        cx={point.x}
+                        cy={point.y}
+                        r="3.5"
+                        fill="#0f172a"
+                        stroke={color}
+                        strokeWidth="2"
+                    />
+                ))}
+
+                {/* X-axis labels */}
+                {showLabels &&
+                    chartData.points
+                        .filter((_, i) => {
+                            const step = Math.max(1, Math.floor(data.length / 6));
+                            return i % step === 0 || i === data.length - 1;
+                        })
+                        .map((point, i) => (
+                            <text
+                                key={i}
+                                x={point.x}
+                                y={chartData.chartHeight - 8}
+                                textAnchor="middle"
+                                fill="rgba(255,255,255,0.3)"
+                                fontSize="11"
+                            >
+                                {point.label}
+                            </text>
+                        ))}
+            </svg>
+        </div>
+    );
+}

package/library/dashboard-analytics/components/dashboard/StatsCard.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+interface StatsCardProps {
+    title: string;
+    value: string | number;
+    change?: number;
+    changeLabel?: string;
+    icon?: React.ReactNode;
+}
+
+export default function StatsCard({
+    title,
+    value,
+    change,
+    changeLabel = 'vs last period',
+    icon,
+}: StatsCardProps) {
+    const isPositive = change !== undefined && change >= 0;
+    const changeColor = isPositive ? 'text-emerald-400' : 'text-red-400';
+    const changeIcon = isPositive ? '\u2191' : '\u2193';
+
+    return (
+        <div className="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all group">
+            <div className="flex items-start justify-between mb-4">
+                <p className="text-sm font-medium text-white/50 uppercase tracking-wider">
+                    {title}
+                </p>
+                {icon && (
+                    <div className="p-2 bg-cyan-500/10 rounded-lg text-cyan-400 group-hover:bg-cyan-500/20 transition-colors">
+                        {icon}
+                    </div>
+                )}
+            </div>
+
+            <p className="text-3xl font-bold text-white mb-2">{value}</p>
+
+            {change !== undefined && (
+                <div className="flex items-center gap-1.5">
+                    <span className={`text-sm font-medium ${changeColor}`}>
+                        {changeIcon} {Math.abs(change).toFixed(1)}%
+                    </span>
+                    <span className="text-xs text-white/30">{changeLabel}</span>
+                </div>
+            )}
+        </div>
+    );
+}

package/library/dashboard-analytics/components/dashboard/SummaryGrid.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+interface SummaryGridProps {
+    children: React.ReactNode;
+    columns?: 2 | 3 | 4;
+    title?: string;
+    subtitle?: string;
+}
+
+const columnClasses: Record<number, string> = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+};
+
+export default function SummaryGrid({
+    children,
+    columns = 4,
+    title,
+    subtitle,
+}: SummaryGridProps) {
+    return (
+        <div>
+            {(title || subtitle) && (
+                <div className="mb-6">
+                    {title && (
+                        <h2 className="text-xl font-bold text-white">{title}</h2>
+                    )}
+                    {subtitle && (
+                        <p className="text-sm text-white/50 mt-1">{subtitle}</p>
+                    )}
+                </div>
+            )}
+            <div className={`grid ${columnClasses[columns]} gap-4`}>
+                {children}
+            </div>
+        </div>
+    );
+}

package/library/dashboard-analytics/manifest.json

@@ -0,0 +1,19 @@
+{
+    "name": "dashboard-analytics",
+    "version": "1.0.0",
+    "description": "Analytics dashboard with stats cards, line charts, activity feed, and summary grid",
+    "author": "AD AI Engine",
+    "category": "dashboard",
+    "dependencies": [],
+    "files": {
+        "components": [
+            "components/dashboard/StatsCard.tsx",
+            "components/dashboard/LineChart.tsx",
+            "components/dashboard/ActivityFeed.tsx",
+            "components/dashboard/SummaryGrid.tsx"
+        ],
+        "api": []
+    },
+    "schema": null,
+    "instructions": "1. Import components into your dashboard page\n2. Pass data props to each component\n3. Use SummaryGrid as the layout wrapper for StatsCards\n4. LineChart accepts an array of { label, value } data points\n5. ActivityFeed accepts an array of activity items with timestamp, user, and action"
+}

package/library/data-table/components/table/BulkActions.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+interface BulkActionsProps {
+    selectedCount: number;
+    totalCount: number;
+    onSelectAll: () => void;
+    onDeselectAll: () => void;
+    onDeleteSelected: () => void;
+    allSelected: boolean;
+}
+
+export default function BulkActions({
+    selectedCount,
+    totalCount,
+    onSelectAll,
+    onDeselectAll,
+    onDeleteSelected,
+    allSelected,
+}: BulkActionsProps) {
+    if (selectedCount === 0) return null;
+
+    return (
+        <div className="flex items-center gap-3 px-4 py-2.5 bg-cyan-500/10 border border-cyan-500/20 rounded-lg">
+            <span className="text-sm text-cyan-400 font-medium">
+                {selectedCount} of {totalCount} selected
+            </span>
+
+            <div className="h-4 w-px bg-white/10" />
+
+            {!allSelected ? (
+                <button
+                    onClick={onSelectAll}
+                    className="text-sm text-white/60 hover:text-white transition-colors"
+                >
+                    Select all
+                </button>
+            ) : (
+                <button
+                    onClick={onDeselectAll}
+                    className="text-sm text-white/60 hover:text-white transition-colors"
+                >
+                    Deselect all
+                </button>
+            )}
+
+            <div className="ml-auto">
+                <button
+                    onClick={onDeleteSelected}
+                    className="flex items-center gap-1.5 px-3 py-1.5 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-400 hover:bg-red-500/20 transition-all"
+                >
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                    Delete selected
+                </button>
+            </div>
+        </div>
+    );
+}

package/library/data-table/components/table/ColumnToggle.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface ColumnToggleProps {
+    columns: { key: string; label: string }[];
+    visibleColumns: Set<string>;
+    onToggle: (key: string) => void;
+}
+
+export default function ColumnToggle({
+    columns,
+    visibleColumns,
+    onToggle,
+}: ColumnToggleProps) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        function handleClickOutside(e: MouseEvent) {
+            if (ref.current && !ref.current.contains(e.target as Node)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    return (
+        <div className="relative" ref={ref}>
+            <button
+                onClick={() => setOpen(!open)}
+                className="flex items-center gap-2 px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white/70 hover:bg-white/10 hover:text-white transition-all"
+            >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                Columns
+            </button>
+
+            {open && (
+                <div className="absolute right-0 top-full mt-2 w-56 backdrop-blur-xl bg-gray-900/95 border border-white/10 rounded-lg shadow-xl z-50 py-2">
+                    <p className="px-3 py-1.5 text-xs font-medium text-white/40 uppercase tracking-wider">
+                        Toggle columns
+                    </p>
+                    {columns.map((col) => (
+                        <label
+                            key={col.key}
+                            className="flex items-center gap-2.5 px-3 py-2 hover:bg-white/5 cursor-pointer transition-colors"
+                        >
+                            <input
+                                type="checkbox"
+                                checked={visibleColumns.has(col.key)}
+                                onChange={() => onToggle(col.key)}
+                                className="w-4 h-4 rounded border-white/20 bg-white/5 text-cyan-500 focus:ring-cyan-500/50 focus:ring-offset-0"
+                            />
+                            <span className="text-sm text-white/70">{col.label}</span>
+                        </label>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}