Skip to content

Commit 305f978

Browse files
itsmeakhilitsmeakhil
authored
Merge pull request #56 from zecrypt-io/feature/shivil/Dashboard-correction
fixed the Home page changes
2 parents a06c5ad + a1e4476 commit 305f978

File tree

2 files changed

+95
-95
lines changed

2 files changed

+95
-95
lines changed

‎packages/frontend-web/components/localized-overview-content.tsx‎

Lines changed: 94 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,8 @@ export function LocalizedOverviewContent() {
144144
const [recentAccounts, setRecentAccounts] = useState<Account[]>([]);
145145
const [revealedPasswords, setRevealedPasswords] = useState<Record<string, boolean>>({});
146146
const [showAllActivities, setShowAllActivities] = useState(false);
147-
const ACTIVITIES_PER_PAGE = 4;
148-
const MAX_ACTIVITIES = 7;
147+
const ACTIVITIES_DISPLAY_COUNT = 5;
148+
const ACCOUNTS_DISPLAY_COUNT = 5;
149149

150150
const processAccountData = useCallback(async (account: Account): Promise<Account> => {
151151
try {
@@ -414,38 +414,38 @@ export function LocalizedOverviewContent() {
414414
<h1 className="text-3xl font-bold tracking-tight">{translate("dashboard", "navigation")}</h1>
415415
</div>
416416

417-
{/* Dashboard Overview Cards */}
418-
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
417+
{/* Dashboard Overview Cards - Max 2 rows, 5 cards per row */}
418+
<div className="grid gap-3 grid-cols-5">
419419
{isLoading ? (
420-
Array(4).fill(0).map((_, index) => (
420+
Array(10).fill(0).map((_, index) => (
421421
<Card key={index} className="animate-pulse">
422422
<CardHeader className="pb-2">
423-
<div className="h-4 bg-muted rounded w-1/2"></div>
423+
<div className="h-3 bg-muted rounded w-1/2"></div>
424424
</CardHeader>
425425
<CardContent>
426-
<div className="h-8 bg-muted rounded w-1/3"></div>
427-
<div className="h-4 bg-muted rounded w-1/2 mt-2"></div>
426+
<div className="h-6 bg-muted rounded w-1/3"></div>
427+
<div className="h-3 bg-muted rounded w-1/2 mt-2"></div>
428428
</CardContent>
429429
</Card>
430430
))
431431
) : (
432-
dashboardData && Object.entries(dashboardData).map(([key, value]) => (
432+
dashboardData && Object.entries(dashboardData).slice(0, 10).map(([key, value]) => (
433433
<Card key={key} className="relative overflow-hidden border-0 shadow-lg bg-gradient-to-br from-background to-muted/20">
434434
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-primary/3 to-primary/10"></div>
435-
<CardHeader className="relative pb-2">
435+
<CardHeader className="relative pb-1 px-3 pt-3">
436436
<div className="flex items-center justify-between">
437-
<CardTitle className="text-sm font-medium text-muted-foreground">
437+
<CardTitle className="text-xs font-medium text-muted-foreground leading-tight">
438438
{formatDataTypeName(key)}
439439
</CardTitle>
440-
<div className="p-2 rounded-full bg-primary/10">
441-
{getDataTypeIcon(key, "h-4 w-4 text-primary")}
440+
<div className="p-1.5 rounded-full bg-primary/10">
441+
{getDataTypeIcon(key, "h-3 w-3 text-primary")}
442442
</div>
443443
</div>
444444
</CardHeader>
445-
<CardContent className="relative">
446-
<div className="text-3xl font-bold text-foreground">{value.toLocaleString()}</div>
447-
<div className="text-xs text-muted-foreground mt-2 flex items-center">
448-
<TrendingUp className="h-3 w-3 mr-1 text-green-500" />
445+
<CardContent className="relative px-3 pb-3">
446+
<div className="text-2xl font-bold text-foreground">{value.toLocaleString()}</div>
447+
<div className="text-xs text-muted-foreground mt-1 flex items-center">
448+
<TrendingUp className="h-2.5 w-2.5 mr-1 text-green-500" />
449449
<span className="text-green-500 font-medium">+0%</span>{" "}
450450
{translate("from_last_month", "dashboard")}
451451
</div>
@@ -471,14 +471,14 @@ export function LocalizedOverviewContent() {
471471
</div>
472472
</CardHeader>
473473
<CardContent>
474-
<div className="space-y-1">
474+
<div className="h-[320px] overflow-y-auto pr-2">
475475
{isLoading ? (
476-
Array(4).fill(0).map((_, index) => (
477-
<div key={index} className="flex items-center gap-4 p-4 animate-pulse">
478-
<div className="h-10 w-10 rounded-full bg-muted"></div>
476+
Array(5).fill(0).map((_, index) => (
477+
<div key={index} className="flex items-center gap-4 p-3 animate-pulse">
478+
<div className="h-8 w-8 rounded-full bg-muted"></div>
479479
<div className="flex-1 space-y-2">
480-
<div className="h-4 bg-muted rounded w-3/4"></div>
481-
<div className="h-3 bg-muted rounded w-1/2"></div>
480+
<div className="h-3 bg-muted rounded w-3/4"></div>
481+
<div className="h-2 bg-muted rounded w-1/2"></div>
482482
</div>
483483
</div>
484484
))
@@ -488,11 +488,8 @@ export function LocalizedOverviewContent() {
488488
<p>{translate("no_recent_activity", "dashboard") || "No recent activity"}</p>
489489
</div>
490490
) : (
491-
<>
492-
{(showAllActivities
493-
? [...recentActivities].reverse().slice(0, MAX_ACTIVITIES)
494-
: [...recentActivities].reverse().slice(0, ACTIVITIES_PER_PAGE)
495-
).map((activity) => {
491+
<div className="space-y-1">
492+
{[...recentActivities].reverse().slice(0, showAllActivities ? recentActivities.length : ACTIVITIES_DISPLAY_COUNT).map((activity) => {
496493
const isCurrentUser = activity.user_id === userId;
497494
const userName = isCurrentUser ? "You" : "Team member";
498495
const actionText = activity.action === "create" ? "created" :
@@ -503,14 +500,14 @@ export function LocalizedOverviewContent() {
503500
return (
504501
<div
505502
key={activity.doc_id}
506-
className="flex items-start gap-4 p-4 hover:bg-muted/30 rounded-lg transition-all duration-200 border border-transparent hover:border-border group"
503+
className="flex items-start gap-3 p-3 hover:bg-muted/30 rounded-lg transition-all duration-200 border border-transparent hover:border-border group"
507504
>
508505
<div className="relative">
509-
<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 border-2 border-primary/20 group-hover:border-primary/40 transition-colors">
510-
{getDataTypeIcon(activity.data_type, "h-4 w-4 text-primary")}
506+
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 border-2 border-primary/20 group-hover:border-primary/40 transition-colors">
507+
{getDataTypeIcon(activity.data_type, "h-3 w-3 text-primary")}
511508
</div>
512-
<div className={`absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-background border-2 border-background flex items-center justify-center ${getActionColor(activity.action)}`}>
513-
{getActionIcon(activity.action)}
509+
<div className={`absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full bg-background border border-background flex items-center justify-center ${getActionColor(activity.action)}`}>
510+
{getActionIcon(activity.action, "h-2 w-2")}
514511
</div>
515512
</div>
516513

@@ -552,8 +549,8 @@ export function LocalizedOverviewContent() {
552549
</div>
553550
);
554551
})}
555-
{recentActivities.length > ACTIVITIES_PER_PAGE && (
556-
<div className="flex justify-center pt-4">
552+
{recentActivities.length > ACTIVITIES_DISPLAY_COUNT && (
553+
<div className="flex justify-center pt-2">
557554
<Button
558555
variant="ghost"
559556
size="sm"
@@ -574,85 +571,87 @@ export function LocalizedOverviewContent() {
574571
</Button>
575572
</div>
576573
)}
577-
</>
574+
</div>
578575
)}
579576
</div>
580577
</CardContent>
581578
</Card>
582579

583-
{/* Quick Stats */}
580+
{/* Recently Added Accounts */}
584581
<Card className="md:col-span-2 lg:col-span-3 shadow-lg border-0 bg-gradient-to-br from-background to-muted/20">
585582
<CardHeader className="pb-4">
586583
<CardTitle className="text-xl font-semibold flex items-center gap-2">
587584
<Shield className="h-5 w-5 text-primary" />
588-
{translate("quick_stats", "dashboard")}
585+
{translate("recently_added_accounts", "dashboard") || "Recently Added Accounts"}
589586
</CardTitle>
590587
</CardHeader>
591588
<CardContent>
592-
<div className="space-y-3">
593-
{recentAccounts.map((account) => (
594-
<div
595-
key={account.doc_id}
596-
className="relative p-3 rounded-lg bg-gradient-to-r from-muted/30 to-muted/10 border border-border/50 hover:border-primary/20 transition-all duration-200 group"
597-
>
598-
{/* Main Account Info */}
599-
<div className={`flex items-center justify-between gap-2 transition-all duration-300 ${
600-
revealedPasswords[account.doc_id] ? 'blur-sm opacity-50' : ''
601-
}`}>
602-
<div className="flex items-center gap-2 min-w-0 flex-1">
603-
<div className="p-2 rounded-lg bg-white shadow-sm group-hover:shadow-md transition-shadow">
604-
{getWebsiteIcon(account.url || account.website || '', "h-4 w-4 text-slate-700")}
605-
</div>
606-
<div className="flex flex-col min-w-0">
607-
<span className="font-medium text-sm group-hover:text-primary transition-colors truncate">
608-
{account.name || account.title}
609-
</span>
610-
<span className="text-muted-foreground text-xs truncate">
611-
{account.username}
612-
</span>
589+
<div className="h-[320px] overflow-y-auto pr-2">
590+
<div className="space-y-3">
591+
{recentAccounts.slice(0, ACCOUNTS_DISPLAY_COUNT).map((account) => (
592+
<div
593+
key={account.doc_id}
594+
className="relative p-3 rounded-lg bg-gradient-to-r from-muted/30 to-muted/10 border border-border/50 hover:border-primary/20 transition-all duration-200 group"
595+
>
596+
{/* Main Account Info */}
597+
<div className={`flex items-center justify-between gap-2 transition-all duration-300 ${
598+
revealedPasswords[account.doc_id] ? 'blur-sm opacity-50' : ''
599+
}`}>
600+
<div className="flex items-center gap-2 min-w-0 flex-1">
601+
<div className="p-2 rounded-lg bg-white shadow-sm group-hover:shadow-md transition-shadow">
602+
{getWebsiteIcon(account.url || account.website || '', "h-4 w-4 text-slate-700")}
603+
</div>
604+
<div className="flex flex-col min-w-0">
605+
<span className="font-medium text-sm group-hover:text-primary transition-colors truncate">
606+
{account.name || account.title}
607+
</span>
608+
<span className="text-muted-foreground text-xs truncate">
609+
{account.username}
610+
</span>
611+
</div>
613612
</div>
613+
<button
614+
onClick={() => togglePasswordVisibility(account.doc_id)}
615+
className="text-muted-foreground hover:text-primary transition-colors flex-shrink-0 z-10 relative"
616+
>
617+
{revealedPasswords[account.doc_id] ? (
618+
<EyeOff className="h-4 w-4" />
619+
) : (
620+
<Eye className="h-4 w-4" />
621+
)}
622+
</button>
614623
</div>
615-
<button
616-
onClick={() => togglePasswordVisibility(account.doc_id)}
617-
className="text-muted-foreground hover:text-primary transition-colors flex-shrink-0 z-10 relative"
618-
>
619-
{revealedPasswords[account.doc_id] ? (
620-
<EyeOff className="h-4 w-4" />
621-
) : (
622-
<Eye className="h-4 w-4" />
623-
)}
624-
</button>
625-
</div>
626624

627-
{/* Password Modal/Projection */}
628-
{revealedPasswords[account.doc_id] && (
629-
<div className="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
630-
<div className="bg-background/95 backdrop-blur-sm border border-primary/10 rounded-lg shadow-sm px-3 py-2 max-w-[60%] animate-in fade-in-0 zoom-in-95 duration-200">
631-
<div className="flex items-center gap-2">
632-
<Lock className="h-3.5 w-3.5 text-primary/70" />
633-
<div className="font-mono text-sm bg-primary/5 text-primary px-2.5 py-0.5 rounded border border-primary/10">
634-
{account.password}
625+
{/* Password Modal/Projection */}
626+
{revealedPasswords[account.doc_id] && (
627+
<div className="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
628+
<div className="bg-background/95 backdrop-blur-sm border border-primary/10 rounded-lg shadow-sm px-3 py-2 max-w-[60%] animate-in fade-in-0 zoom-in-95 duration-200">
629+
<div className="flex items-center gap-2">
630+
<Lock className="h-3.5 w-3.5 text-primary/70" />
631+
<div className="font-mono text-sm bg-primary/5 text-primary px-2.5 py-0.5 rounded border border-primary/10">
632+
{account.password}
633+
</div>
635634
</div>
636635
</div>
637636
</div>
638-
</div>
639-
)}
637+
)}
640638

641-
{/* Click overlay to close when password is shown */}
642-
{revealedPasswords[account.doc_id] && (
643-
<div
644-
className="absolute inset-0 z-10 cursor-pointer"
645-
onClick={() => togglePasswordVisibility(account.doc_id)}
646-
/>
647-
)}
648-
</div>
649-
))}
650-
{recentAccounts.length === 0 && (
651-
<div className="text-center py-8 text-muted-foreground bg-muted/30 rounded-lg border border-dashed border-border">
652-
<Shield className="h-8 w-8 mx-auto mb-3 opacity-30" />
653-
<p>{translate("no_recent_accounts", "dashboard")}</p>
654-
</div>
655-
)}
639+
{/* Click overlay to close when password is shown */}
640+
{revealedPasswords[account.doc_id] && (
641+
<div
642+
className="absolute inset-0 z-10 cursor-pointer"
643+
onClick={() => togglePasswordVisibility(account.doc_id)}
644+
/>
645+
)}
646+
</div>
647+
))}
648+
{recentAccounts.length === 0 && (
649+
<div className="text-center py-8 text-muted-foreground bg-muted/30 rounded-lg border border-dashed border-border">
650+
<Shield className="h-8 w-8 mx-auto mb-3 opacity-30" />
651+
<p>{translate("no_recent_accounts", "dashboard")}</p>
652+
</div>
653+
)}
654+
</div>
656655
</div>
657656
</CardContent>
658657
</Card>

‎packages/frontend-web/messages/en/common.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@
240240
"total_passwords": "Total Passwords",
241241
"total_accounts": "Total Accounts",
242242
"total_folders": "Total Folders",
243+
"recently_added_accounts": "Recently Added Accounts",
243244
"from_last_month": "from last month",
244245
"create_project_details": "Create Project Details",
245246
"recent_activity": "Recent Activity",

0 commit comments

Comments
 (0)