Skip to content

Commit 797708c

Browse files
sprettsprett
committed
feat: update dependencies and enhance dashboard UI
- Refactored layout and styling in various components to improve UI consistency, including the use of CornerCard for better visual structure. - Enhanced DateRangePicker and StatCard components for improved user interaction and visual feedback.
1 parent f4d47db commit 797708c

File tree

13 files changed

+545
-270
lines changed

13 files changed

+545
-270
lines changed

‎apps/dashboard/app/(main)/websites/[id]/_components/analytics-toolbar.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,8 @@ export function AnalyticsToolbar({
114114
);
115115

116116
return (
117-
<div className="mt-3 flex flex-col gap-2 rounded border bg-card p-3 shadow-sm">
118-
<div className="flex items-center justify-between gap-3">
117+
<div className="h-32 flex flex-col justify-center border-b ">
118+
<div className="flex items-center justify-between gap-3 px-6">
119119
<div className="flex h-8 overflow-hidden rounded border bg-background shadow-sm">
120120
<Button
121121
className={getGranularityButtonClass('daily')}
@@ -161,38 +161,40 @@ export function AnalyticsToolbar({
161161
</div>
162162
</div>
163163

164-
<div className="flex items-center gap-1 overflow-x-auto rounded border bg-background p-1 shadow-sm">
165-
{QUICK_RANGES.map((range) => {
166-
const isActive = isQuickRangeActive(range);
167-
return (
168-
<Button
169-
className={`h-8 cursor-pointer touch-manipulation whitespace-nowrap px-2 font-medium text-xs ${isActive ? 'bg-primary/10 text-primary shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
170-
key={range.label}
171-
onClick={() => handleQuickRangeSelect(range)}
172-
size="sm"
173-
title={range.fullLabel}
174-
variant={isActive ? 'secondary' : 'ghost'}
175-
>
176-
{range.label}
177-
</Button>
178-
);
179-
})}
180-
181-
<div className="ml-1 border-border/50 border-l pl-2">
182-
<DateRangePicker
183-
className="w-auto"
184-
maxDate={new Date()}
185-
minDate={new Date(2020, 0, 1)}
186-
onChange={(range) => {
187-
if (range?.from && range?.to) {
188-
setDateRangeAction({
189-
startDate: range.from,
190-
endDate: range.to,
191-
});
192-
}
193-
}}
194-
value={selectedRange}
195-
/>
164+
<div className="flex items-center gap-1 overflow-x-auto px-6 py-2">
165+
<div className="flex items-center gap-1 rounded border bg-background p-1 shadow-sm">
166+
{QUICK_RANGES.map((range) => {
167+
const isActive = isQuickRangeActive(range);
168+
return (
169+
<Button
170+
className={`h-8 cursor-pointer touch-manipulation whitespace-nowrap px-2 font-medium text-xs ${isActive ? 'bg-primary/10 text-primary shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
171+
key={range.label}
172+
onClick={() => handleQuickRangeSelect(range)}
173+
size="sm"
174+
title={range.fullLabel}
175+
variant={isActive ? 'secondary' : 'ghost'}
176+
>
177+
{range.label}
178+
</Button>
179+
);
180+
})}
181+
182+
<div className="ml-1 border-border/50 border-l pl-2">
183+
<DateRangePicker
184+
className="w-auto"
185+
maxDate={new Date()}
186+
minDate={new Date(2020, 0, 1)}
187+
onChange={(range) => {
188+
if (range?.from && range?.to) {
189+
setDateRangeAction({
190+
startDate: range.from,
191+
endDate: range.to,
192+
});
193+
}
194+
}}
195+
value={selectedRange}
196+
/>
197+
</div>
196198
</div>
197199
</div>
198200
</div>

‎apps/dashboard/app/(main)/websites/[id]/_components/tabs/overview-tab.tsx‎

Lines changed: 118 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
createPageColumns,
3131
createReferrerColumns,
3232
} from '@/components/table/rows';
33+
import { CornerCard } from '@/components/ui/corner-card';
3334
import { useBatchDynamicQuery } from '@/hooks/use-dynamic-query';
3435
import { getUserTimezone } from '@/lib/timezone';
3536
import { useDateFilters } from '@/hooks/use-date-filters';
@@ -961,7 +962,7 @@ export function WebsiteOverviewTab({
961962
</div>
962963

963964
{/* Chart */}
964-
<div className="rounded border border-sidebar-border border-b-0 bg-sidebar shadow-sm">
965+
<CornerCard className="overflow-hidden" cornerSize="md" animated={false}>
965966
<div className="flex flex-col items-start justify-between gap-3 border-sidebar-border border-b px-4 py-3 sm:flex-row">
966967
<div>
967968
<h2 className="font-semibold text-lg text-sidebar-foreground tracking-tight">
@@ -986,7 +987,7 @@ export function WebsiteOverviewTab({
986987
<div>
987988
<MetricsChartWithAnnotations
988989
websiteId={websiteId}
989-
className="rounded border-0"
990+
className="rounded border-0 shadow-none"
990991
data={chartData}
991992
height={350}
992993
isLoading={isLoading}
@@ -998,116 +999,134 @@ export function WebsiteOverviewTab({
998999
}}
9991000
/>
10001001
</div>
1001-
</div>
1002+
</CornerCard>
10021003

10031004
{/* Tables */}
10041005
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
1005-
<DataTable
1006-
description="Referrers and campaign data"
1007-
isLoading={isLoading}
1008-
minHeight={350}
1009-
onAddFilter={onAddFilter}
1010-
tabs={referrerTabs}
1011-
title="Traffic Sources"
1012-
/>
1006+
<CornerCard className="overflow-hidden" cornerSize="sm" animated={false}>
1007+
<DataTable
1008+
description="Referrers and campaign data"
1009+
className="rounded border-0 shadow-none"
1010+
isLoading={isLoading}
1011+
minHeight={350}
1012+
onAddFilter={onAddFilter}
1013+
tabs={referrerTabs}
1014+
title="Traffic Sources"
1015+
/>
1016+
</CornerCard>
10131017

1014-
<DataTable
1015-
description="Top pages and entry/exit points"
1016-
isLoading={isLoading}
1017-
minHeight={350}
1018-
onAddFilter={onAddFilter}
1019-
tabs={pagesTabs}
1020-
title="Pages"
1021-
/>
1018+
<CornerCard className="overflow-hidden" cornerSize="sm" animated={false}>
1019+
<DataTable
1020+
description="Top pages and entry/exit points"
1021+
className="rounded border-0 shadow-none"
1022+
isLoading={isLoading}
1023+
minHeight={350}
1024+
onAddFilter={onAddFilter}
1025+
tabs={pagesTabs}
1026+
title="Pages"
1027+
/>
1028+
</CornerCard>
10221029
</div>
10231030

10241031
{/* Custom Events Table */}
1025-
<CustomEventsSection
1026-
customEventsData={customEventsData}
1027-
isLoading={isLoading}
1028-
onAddFilter={onAddFilter}
1029-
/>
1032+
<CornerCard className="overflow-hidden" cornerSize="md" animated={false}>
1033+
<CustomEventsSection
1034+
className="rounded border-0 shadow-none"
1035+
customEventsData={customEventsData}
1036+
isLoading={isLoading}
1037+
onAddFilter={onAddFilter}
1038+
/>
1039+
</CornerCard>
10301040

10311041
{/* Technology */}
10321042
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
1033-
<DataTable
1034-
columns={deviceColumns}
1035-
data={analytics.device_types || []}
1036-
description="Device breakdown"
1037-
initialPageSize={8}
1038-
isLoading={isLoading}
1039-
minHeight={350}
1040-
onAddFilter={onAddFilter}
1041-
showSearch={false}
1042-
tabs={[
1043-
{
1044-
id: 'devices',
1045-
label: 'Devices',
1046-
data: analytics.device_types || [],
1047-
columns: deviceColumns,
1048-
getFilter: (row: TechnologyData) => {
1049-
const deviceDisplayToFilterMap: Record<string, string> = {
1050-
laptop: 'mobile',
1051-
tablet: 'tablet',
1052-
desktop: 'desktop',
1053-
};
1054-
return {
1055-
field: 'device_type',
1056-
value: deviceDisplayToFilterMap[row.name] || row.name,
1057-
};
1043+
<CornerCard className="overflow-hidden" cornerSize="sm" animated={false}>
1044+
<DataTable
1045+
columns={deviceColumns}
1046+
data={analytics.device_types || []}
1047+
description="Device breakdown"
1048+
className="rounded border-0 shadow-none"
1049+
initialPageSize={8}
1050+
isLoading={isLoading}
1051+
minHeight={350}
1052+
onAddFilter={onAddFilter}
1053+
showSearch={false}
1054+
tabs={[
1055+
{
1056+
id: 'devices',
1057+
label: 'Devices',
1058+
data: analytics.device_types || [],
1059+
columns: deviceColumns,
1060+
getFilter: (row: TechnologyData) => {
1061+
const deviceDisplayToFilterMap: Record<string, string> = {
1062+
laptop: 'mobile',
1063+
tablet: 'tablet',
1064+
desktop: 'desktop',
1065+
};
1066+
return {
1067+
field: 'device_type',
1068+
value: deviceDisplayToFilterMap[row.name] || row.name,
1069+
};
1070+
},
10581071
},
1059-
},
1060-
]}
1061-
title="Devices"
1062-
/>
1072+
]}
1073+
title="Devices"
1074+
/>
1075+
</CornerCard>
10631076

1064-
<DataTable
1065-
columns={browserColumns}
1066-
data={analytics.browser_versions || []}
1067-
description="Browser breakdown"
1068-
initialPageSize={8}
1069-
isLoading={isLoading}
1070-
minHeight={350}
1071-
onAddFilter={onAddFilter}
1072-
showSearch={false}
1073-
tabs={[
1074-
{
1075-
id: 'browsers',
1076-
label: 'Browsers',
1077-
data: analytics.browser_versions || [],
1078-
columns: browserColumns,
1079-
getFilter: (row: TechnologyData) => ({
1080-
field: 'browser_name',
1081-
value: row.name,
1082-
}),
1083-
},
1084-
]}
1085-
title="Browsers"
1086-
/>
1077+
<CornerCard className="overflow-hidden" cornerSize="sm" animated={false}>
1078+
<DataTable
1079+
columns={browserColumns}
1080+
data={analytics.browser_versions || []}
1081+
description="Browser breakdown"
1082+
className="rounded border-0 shadow-none"
1083+
initialPageSize={8}
1084+
isLoading={isLoading}
1085+
minHeight={350}
1086+
onAddFilter={onAddFilter}
1087+
showSearch={false}
1088+
tabs={[
1089+
{
1090+
id: 'browsers',
1091+
label: 'Browsers',
1092+
data: analytics.browser_versions || [],
1093+
columns: browserColumns,
1094+
getFilter: (row: TechnologyData) => ({
1095+
field: 'browser_name',
1096+
value: row.name,
1097+
}),
1098+
},
1099+
]}
1100+
title="Browsers"
1101+
/>
1102+
</CornerCard>
10871103

1088-
<DataTable
1089-
columns={osColumns}
1090-
data={analytics.operating_systems || []}
1091-
description="OS breakdown"
1092-
initialPageSize={8}
1093-
isLoading={isLoading}
1094-
minHeight={350}
1095-
onAddFilter={onAddFilter}
1096-
showSearch={false}
1097-
tabs={[
1098-
{
1099-
id: 'operating_systems',
1100-
label: 'Operating Systems',
1101-
data: analytics.operating_systems || [],
1102-
columns: osColumns,
1103-
getFilter: (row: TechnologyData) => ({
1104-
field: 'os_name',
1105-
value: row.name,
1106-
}),
1107-
},
1108-
]}
1109-
title="Operating Systems"
1110-
/>
1104+
<CornerCard className="overflow-hidden" cornerSize="sm" animated={false}>
1105+
<DataTable
1106+
columns={osColumns}
1107+
data={analytics.operating_systems || []}
1108+
description="OS breakdown"
1109+
className="rounded border-0 shadow-none"
1110+
initialPageSize={8}
1111+
isLoading={isLoading}
1112+
minHeight={350}
1113+
onAddFilter={onAddFilter}
1114+
showSearch={false}
1115+
tabs={[
1116+
{
1117+
id: 'operating_systems',
1118+
label: 'Operating Systems',
1119+
data: analytics.operating_systems || [],
1120+
columns: osColumns,
1121+
getFilter: (row: TechnologyData) => ({
1122+
field: 'os_name',
1123+
value: row.name,
1124+
}),
1125+
},
1126+
]}
1127+
title="Operating Systems"
1128+
/>
1129+
</CornerCard>
11111130
</div>
11121131
</div>
11131132
);

‎apps/dashboard/app/(main)/websites/[id]/_components/tabs/overview/_components/custom-events-section.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export function CustomEventsSection({
5454
customEventsData,
5555
isLoading,
5656
onAddFilter,
57+
className,
5758
}: CustomEventsSectionProps) {
5859
const [expandedProperties, setExpandedProperties] = useState<Set<string>>(
5960
new Set()
@@ -260,6 +261,7 @@ export function CustomEventsSection({
260261

261262
return (
262263
<DataTable
264+
className={className}
263265
description="User-defined events, interactions, and outbound link tracking"
264266
expandable
265267
getSubRows={(row: ProcessedCustomEvent): any[] => {

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,9 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
6161
};
6262

6363
return (
64-
<div
65-
className={cn(
66-
'mx-auto flex h-full max-w-[1600px] flex-col',
67-
noPadding ? 'p-0' : 'p-3 sm:p-4 lg:p-6'
68-
)}
69-
>
64+
<div className="mx-auto flex h-full max-w-[1600px] flex-col">
7065
{isTrackingSetup && !isAssistantPage && (
71-
<div className="flex-shrink-0 space-y-4">
66+
<div className="flex-shrink-0">
7267
<AnalyticsToolbar
7368
isRefreshing={isRefreshing}
7469
onRefresh={handleRefresh}
@@ -78,7 +73,7 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
7873
</div>
7974
)}
8075

81-
<div className={isAssistantPage ? 'min-h-0 flex-1' : ''}>{children}</div>
76+
<div className={isAssistantPage ? 'min-h-0 flex-1' : 'p-3 sm:p-4 lg:p-6'}>{children}</div>
8277
</div>
8378
);
8479
}

0 commit comments

Comments
 (0)