All files / laravel-saas/resources/js/Components/dashboard QuickActions.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Card, CardContent, CardHeader } from '@/Components/ui/Card';
import { Button } from '@/Components/ui/Button';
import { cn } from '@/lib/utils';
import { LucideIcon } from 'lucide-react';
 
interface QuickAction {
  id: string;
  title: string;
  description: string;
  icon: LucideIcon;
  onClick: () => void;
  variant?: 'default' | 'secondary' | 'outline';
  disabled?: boolean;
}
 
interface QuickActionsProps {
  actions: QuickAction[];
  title?: string;
  className?: string;
  columns?: 1 | 2 | 3 | 4;
}
 
export function QuickActions({ 
  actions, 
  title = 'Quick Actions', 
  className,
  columns = 2 
}: QuickActionsProps) {
  const gridClasses = {
    1: 'grid-cols-1',
    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',
  };
 
  if (actions.length === 0) {
    return (
      <Card className={className}>
        <CardHeader>
          <h3 className="text-lg font-semibold">{title}</h3>
        </CardHeader>
        <CardContent>
          <div className="text-center py-8 text-muted-foreground">
            No quick actions available
          </div>
        </CardContent>
      </Card>
    );
  }
 
  return (
    <Card className={className}>
      <CardHeader>
        <h3 className="text-lg font-semibold">{title}</h3>
      </CardHeader>
      <CardContent>
        <div className={cn('grid gap-4', gridClasses[columns])}>
          {actions.map((action) => {
            const Icon = action.icon;
            return (
              <div
                key={action.id}
                className="relative group"
              >
                <Button
                  variant={action.variant || 'outline'}
                  className={cn(
                    'h-auto p-4 w-full flex flex-col gap-3 items-center text-center transition-all',
                    'hover:shadow-md hover:scale-[1.02]',
                    action.disabled && 'opacity-50 cursor-not-allowed'
                  )}
                  onClick={action.onClick}
                  disabled={action.disabled}
                >
                  <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors">
                    <Icon className="h-4 w-4 text-primary" />
                  </div>
                  <div className="space-y-1">
                    <div className="font-medium text-sm">
                      {action.title}
                    </div>
                    <div className="text-xs text-muted-foreground leading-relaxed">
                      {action.description}
                    </div>
                  </div>
                </Button>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}