Skip to content

Commit 29acf8d

Browse files
HyteqHyteq
Hyteq
authored and
Hyteq
committed
design cleanup
1 parent d4bf97d commit 29acf8d

3 files changed

Lines changed: 48 additions & 58 deletions

File tree

‎apps/dashboard/app/(main)/websites/[id]/errors/_components/errors-page-content.tsx‎

Lines changed: 46 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@
22

33
import { useState, useMemo, useEffect, useCallback, use } from "react";
44
import { toast } from "sonner";
5-
import { ArrowLeftIcon, ArrowClockwiseIcon, XIcon, BugIcon } from "@phosphor-icons/react";
6-
import { useRouter } from "next/navigation";
5+
import { ArrowClockwiseIcon, BugIcon } from "@phosphor-icons/react";
76
import { Button } from "@/components/ui/button";
8-
import { Badge } from "@/components/ui/badge";
97
import { AnimatedLoading } from "@/components/analytics/animated-loading";
108
import { useEnhancedErrorData } from "@/hooks/use-dynamic-query";
119
import type { DateRange } from "@/hooks/use-analytics";
1210
import { EmptyState } from "../../_components/utils/ui-components";
1311
import type { DynamicQueryFilter } from "@/hooks/use-dynamic-query";
12+
import { Card, CardContent } from "@/components/ui/card";
1413

1514
// Import our separated components
1615
import { ErrorSummaryStats } from "./error-summary-stats";
@@ -26,7 +25,6 @@ interface ErrorsPageContentProps {
2625
}
2726

2827
export const ErrorsPageContent = ({ params }: ErrorsPageContentProps) => {
29-
const router = useRouter();
3028
const resolvedParams = use(params);
3129
const websiteId = resolvedParams.id;
3230

@@ -273,69 +271,61 @@ export const ErrorsPageContent = ({ params }: ErrorsPageContentProps) => {
273271

274272
if (error) {
275273
return (
276-
<div className="container mx-auto p-6">
277-
<EmptyState
278-
icon={<BugIcon size={16} weight="duotone" className="h-4 w-4" />}
279-
title="Failed to load error data"
280-
description="There was an error loading the error analytics data. Please try again."
281-
action={
282-
<Button onClick={handleRefresh} variant="outline">
283-
<ArrowClockwiseIcon size={16} weight="duotone" className="mr-2 h-4 w-4" />
284-
Retry
285-
</Button>
286-
}
287-
/>
274+
<div className="p-3 sm:p-4 lg:p-6 max-w-[1600px] mx-auto">
275+
<Card className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950 rounded-xl">
276+
<CardContent className="pt-6">
277+
<div className="flex flex-col items-center text-center space-y-3">
278+
<div className="p-3 rounded-full bg-destructive/10 border border-destructive/20">
279+
<BugIcon size={16} weight="duotone" className="h-6 w-6 text-destructive" />
280+
</div>
281+
<div>
282+
<h4 className="font-semibold text-destructive">Error loading error data</h4>
283+
<p className="text-destructive/80 text-sm mt-1">
284+
There was an issue loading your error analytics. Please try refreshing the page.
285+
</p>
286+
</div>
287+
<Button
288+
variant="outline"
289+
size="sm"
290+
onClick={handleRefresh}
291+
className="gap-2 rounded-lg"
292+
>
293+
<ArrowClockwiseIcon size={16} weight="fill" className="h-4 w-4" />
294+
Retry
295+
</Button>
296+
</div>
297+
</CardContent>
298+
</Card>
288299
</div>
289300
);
290301
}
291302

292303
return (
293-
<div className="p-6 space-y-6">
294-
{/* Header */}
295-
<div className="flex items-center justify-between">
296-
<div className="flex items-center gap-4">
297-
<Button
298-
variant="ghost"
299-
size="sm"
300-
onClick={() => router.back()}
301-
className="h-8 w-8 p-0"
302-
>
303-
<ArrowLeftIcon size={16} weight="duotone" className="h-4 w-4" />
304-
</Button>
305-
<div>
306-
<h1 className="text-2xl font-bold tracking-tight">Error Analytics</h1>
307-
<p className="text-muted-foreground">Monitor and analyze application errors</p>
308-
</div>
309-
</div>
310-
<div className="flex items-center gap-3">
311-
{activeFilters.length > 0 && (
312-
<div className="flex items-center gap-2">
313-
<div className="flex flex-wrap gap-1">
314-
{activeFilters.map((filter, index) => (
315-
<Badge key={index} variant="secondary" className="text-xs">
316-
{filter.field}: {filter.value}
317-
<button
318-
onClick={() => removeFilter(filter)}
319-
className="ml-1 hover:bg-muted-foreground/20 rounded-full p-0.5"
320-
>
321-
<XIcon size={12} className="h-3 w-3" />
322-
</button>
323-
</Badge>
324-
))}
304+
<div className="p-3 sm:p-4 lg:p-6 max-w-[1600px] mx-auto space-y-6">
305+
<div className="border-b bg-muted/20 rounded py-2 -mx-3 sm:-mx-4 lg:-mx-6 px-3 sm:px-4 lg:px-6 pb-6">
306+
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
307+
<div className="space-y-2">
308+
<div className="flex items-center gap-3">
309+
<div className="p-3 rounded-xl bg-primary/10 border border-primary/20">
310+
<BugIcon size={16} weight="duotone" className="h-6 w-6 text-primary" />
311+
</div>
312+
<div>
313+
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground">Error Analytics</h1>
314+
<p className="text-muted-foreground text-sm sm:text-base">
315+
Monitor and analyze application errors to improve user experience
316+
</p>
325317
</div>
326-
<Button variant="ghost" size="sm" onClick={clearFilters} className="h-7 px-2 text-xs">
327-
Clear all
328-
</Button>
329318
</div>
330-
)}
319+
</div>
331320
<Button
332321
onClick={handleRefresh}
333-
disabled={isLoading || isRefreshing}
322+
disabled={isRefreshing}
334323
variant="outline"
335-
size="sm"
324+
size="default"
325+
className="gap-2 rounded-lg px-4 py-2 font-medium border-border/50 hover:border-primary/50 hover:bg-primary/5 transition-all duration-300"
336326
>
337-
<ArrowClockwiseIcon size={16} weight="duotone" className={`mr-2 h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
338-
Refresh
327+
<ArrowClockwiseIcon size={16} weight="fill" className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
328+
Refresh Data
339329
</Button>
340330
</div>
341331
</div>

‎apps/dashboard/app/(main)/websites/[id]/funnels/_components/page-header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function PageHeader({
2626
return (
2727
<div className="space-y-6">
2828
{/* Header - matching journeys design */}
29-
<div className="border-b bg-gradient-to-r from-background via-background to-muted/20 -mx-3 sm:-mx-4 lg:-mx-6 px-3 sm:px-4 lg:px-6 pb-6">
29+
<div className="border-b bg-muted/20 rounded py-2 -mx-3 sm:-mx-4 lg:-mx-6 px-3 sm:px-4 lg:px-6 pb-6">
3030
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
3131
<div className="space-y-2">
3232
<div className="flex items-center gap-3">

‎apps/dashboard/app/(main)/websites/[id]/journeys/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -482,7 +482,7 @@ export default function JourneysPage() {
482482
return (
483483
<div className="p-3 sm:p-4 lg:p-6 max-w-[1600px] mx-auto space-y-6">
484484
{/* Header */}
485-
<div className="border-b bg-gradient-to-r from-background via-background to-muted/20 -mx-3 sm:-mx-4 lg:-mx-6 px-3 sm:px-4 lg:px-6 pb-6">
485+
<div className="border-b bg-muted/20 rounded py-2 -mx-3 sm:-mx-4 lg:-mx-6 px-3 sm:px-4 lg:px-6 pb-6">
486486
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
487487
<div className="space-y-2">
488488
<div className="flex items-center gap-3">

0 commit comments

Comments
 (0)