Skip to content

Commit dd145b6

Browse files
hhftechnologyhhftechnology
committed
update
1 parent 78b3064 commit dd145b6

File tree

11 files changed

+1987
-83
lines changed

11 files changed

+1987
-83
lines changed

‎ui/src/components/dashboard/Dashboard.jsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useApp } from '../../contexts/AppContext';
1010
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
1111
import { Button } from '../ui/button';
1212
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
13+
import { Alert, AlertDescription } from '../ui/alert';
1314
import { AlertTriangle, Info } from 'lucide-react';
1415

1516
const Dashboard = ({ navigateTo }) => {
@@ -180,34 +181,33 @@ const Dashboard = ({ navigateTo }) => {
180181

181182
<div className="space-y-4">
182183
{unprotectedResourcesCount > 0 && (
183-
<div className="p-4 rounded-lg bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-900">
184-
<div className="flex gap-3">
185-
<AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
186-
<p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
187-
{unprotectedResourcesCount} active resource{unprotectedResourcesCount !== 1 ? 's are' : ' is'} not protected by any middleware.
188-
</p>
189-
</div>
190-
</div>
184+
<Alert variant="warning" className="border-l-4">
185+
<AlertTriangle className="h-4 w-4" />
186+
<AlertDescription>
187+
{unprotectedResourcesCount} active resource{unprotectedResourcesCount !== 1 ? 's are' : ' is'} not protected by any middleware.
188+
</AlertDescription>
189+
</Alert>
191190
)}
192191

193192
{disabledResourcesCount > 0 && (
194-
<div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-900">
195-
<div className="flex gap-3">
196-
<Info className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
197-
<div className="flex-1 flex flex-col md:flex-row md:justify-between gap-3">
198-
<p className="text-sm text-blue-700 dark:text-blue-200">
193+
<Alert variant="info" className="border-l-4">
194+
<Info className="h-4 w-4" />
195+
<AlertDescription>
196+
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
197+
<span>
199198
{disabledResourcesCount} resource{disabledResourcesCount !== 1 ? 's are' : ' is'} currently disabled (not found in {activeDataSource}).
200-
</p>
199+
</span>
201200
<Button
202201
variant="link"
202+
size="sm"
203203
onClick={() => navigateTo('resources')}
204-
className="text-blue-700 dark:text-blue-300 hover:text-blue-600 dark:hover:text-blue-200 p-0 h-auto"
204+
className="p-0 h-auto"
205205
>
206206
View Resources →
207207
</Button>
208208
</div>
209-
</div>
210-
</div>
209+
</AlertDescription>
210+
</Alert>
211211
)}
212212
</div>
213213
</div>

‎ui/src/components/dashboard/ResourceSummary.jsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,14 @@ const ResourceSummary = ({ resource, onView, onDelete }) => {
2222
};
2323

2424
return (
25-
<TableRow className={isDisabled ? 'opacity-70' : ''}>
25+
<TableRow className={isDisabled ? 'opacity-60' : ''}>
2626
<TableCell className="font-medium">
27-
{resource.host}
28-
{isDisabled && (
29-
<Badge variant="error" className="ml-2">Disabled</Badge>
30-
)}
27+
<div className="flex items-center gap-2">
28+
<span>{resource.host}</span>
29+
{isDisabled && (
30+
<Badge variant="destructive" className="text-xs">Disabled</Badge>
31+
)}
32+
</div>
3133
</TableCell>
3234

3335
<TableCell>
@@ -40,15 +42,22 @@ const ResourceSummary = ({ resource, onView, onDelete }) => {
4042
{middlewaresList.length > 0 ? middlewaresList.length : '0'}
4143
</TableCell>
4244

43-
<TableCell className="text-right space-x-3">
44-
<Button variant="link" onClick={onView} className="p-0 h-auto">
45-
{isDisabled ? 'View' : 'Manage'}
46-
</Button>
47-
{isDisabled && (
48-
<Button variant="link" onClick={handleDelete} className="p-0 h-auto text-destructive">
49-
Delete
45+
<TableCell className="text-right">
46+
<div className="flex justify-end gap-2">
47+
<Button variant="link" size="sm" onClick={onView} className="h-auto p-0">
48+
{isDisabled ? 'View' : 'Manage'}
5049
</Button>
51-
)}
50+
{isDisabled && (
51+
<Button
52+
variant="link"
53+
size="sm"
54+
onClick={handleDelete}
55+
className="h-auto p-0 text-destructive hover:text-destructive/80"
56+
>
57+
Delete
58+
</Button>
59+
)}
60+
</div>
5261
</TableCell>
5362
</TableRow>
5463
);

‎ui/src/components/dashboard/StatCard.jsx‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { Server, ShieldCheck, Lock, Puzzle } from 'lucide-react';
3-
import { Card } from '../ui/card';
3+
import { Card, CardContent } from '../ui/card';
44
import { cn } from '../../lib/utils';
55

66
const icons = {
@@ -10,51 +10,62 @@ const icons = {
1010
puzzle: Puzzle,
1111
};
1212

13+
/**
14+
* Stat card component for displaying dashboard statistics
15+
* 100% Shadcn UI with proper Card/CardContent structure
16+
*/
1317
const StatCard = ({ title, value, subtitle = null, status = null, icon = null }) => {
14-
let statusClasses = '';
18+
let borderColor = 'border-l-border';
1519
let iconColor = 'text-muted-foreground';
20+
let bgColor = 'bg-muted/50';
1621

1722
if (status) {
1823
switch (status) {
1924
case 'success':
20-
statusClasses = 'border-l-4 border-green-500';
21-
iconColor = 'text-green-500';
25+
borderColor = 'border-l-green-500 dark:border-l-green-400';
26+
iconColor = 'text-green-600 dark:text-green-400';
27+
bgColor = 'bg-green-100 dark:bg-green-900/20';
2228
break;
2329
case 'warning':
24-
statusClasses = 'border-l-4 border-yellow-500';
25-
iconColor = 'text-yellow-500';
30+
borderColor = 'border-l-yellow-500 dark:border-l-yellow-400';
31+
iconColor = 'text-yellow-600 dark:text-yellow-400';
32+
bgColor = 'bg-yellow-100 dark:bg-yellow-900/20';
2633
break;
2734
case 'danger':
28-
statusClasses = 'border-l-4 border-red-500';
29-
iconColor = 'text-red-500';
35+
borderColor = 'border-l-red-500 dark:border-l-red-400';
36+
iconColor = 'text-red-600 dark:text-red-400';
37+
bgColor = 'bg-red-100 dark:bg-red-900/20';
3038
break;
3139
case 'neutral':
32-
statusClasses = 'border-l-4 border-gray-400';
33-
iconColor = 'text-gray-500';
40+
borderColor = 'border-l-gray-400 dark:border-l-gray-500';
41+
iconColor = 'text-gray-500 dark:text-gray-400';
42+
bgColor = 'bg-gray-100 dark:bg-gray-800/50';
3443
break;
3544
default:
36-
statusClasses = 'border-l-4 border-border';
45+
borderColor = 'border-l-border';
3746
}
38-
} else {
39-
statusClasses = 'border-l-4 border-border';
4047
}
4148

4249
const IconComponent = icon ? icons[icon] : null;
4350

4451
return (
45-
<Card className={cn('flex items-start p-4 sm:p-6', statusClasses)}>
46-
{IconComponent && (
47-
<div className={cn('flex-shrink-0 mr-4 p-2 bg-secondary rounded-full', iconColor)}>
48-
<IconComponent className="h-6 w-6" />
49-
</div>
50-
)}
51-
<div className="flex-1">
52-
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">{title}</h3>
53-
<p className="mt-1 text-3xl font-semibold">{value}</p>
54-
{subtitle && (
55-
<p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
52+
<Card className={cn('border-l-4', borderColor)}>
53+
<CardContent className="flex items-start gap-4 p-6">
54+
{IconComponent && (
55+
<div className={cn('p-3 rounded-full flex-shrink-0', bgColor, iconColor)}>
56+
<IconComponent className="h-6 w-6" />
57+
</div>
5658
)}
57-
</div>
59+
<div className="flex-1 space-y-1">
60+
<p className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
61+
{title}
62+
</p>
63+
<p className="text-3xl font-bold">{value}</p>
64+
{subtitle && (
65+
<p className="text-sm text-muted-foreground">{subtitle}</p>
66+
)}
67+
</div>
68+
</CardContent>
5869
</Card>
5970
);
6071
};

0 commit comments

Comments
 (0)