zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add tailwind prettier and some clean up

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-26 22:03:08 +01:00
parent d0079c8dc3
commit 44c66dbed4
118 changed files with 355 additions and 2045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
View File

@@ -36,7 +36,7 @@ export function ListReports({ reports }: ListReportsProps) {
return (
<>
<StickyBelowHeader className="p-4 items-center justify-between flex">
<StickyBelowHeader className="flex items-center justify-between p-4">
<OverviewReportRange />
<Button
icon={PlusIcon}
@@ -54,20 +54,20 @@ export function ListReports({ reports }: ListReportsProps) {
<span className="sm:hidden">Report</span>
</Button>
</StickyBelowHeader>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
<div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
{reports.map((report) => {
const chartRange = report.range; // timeRanges[report.range];
return (
<div className="card" key={report.id}>
<Link
href={`/${params.organizationId}/${params.projectId}/reports/${report.id}`}
className="flex border-b border-border p-4 leading-none [&_svg]:hover:opacity-100 items-center justify-between"
className="flex items-center justify-between border-b border-border p-4 leading-none [&_svg]:hover:opacity-100"
shallow
>
<div>
<div className="font-medium">{report.name}</div>
{chartRange !== null && (
<div className="mt-2 text-sm flex gap-2">
<div className="mt-2 flex gap-2 text-sm">
<span
className={
range !== null || (startDate && endDate)
@@ -87,7 +87,7 @@ export function ListReports({ reports }: ListReportsProps) {
</div>
<div className="flex items-center gap-4">
<DropdownMenu>
<DropdownMenuTrigger className="h-8 w-8 hover:border rounded justify-center items-center flex">
<DropdownMenuTrigger className="flex h-8 w-8 items-center justify-center rounded hover:border">
<MoreHorizontal size={16} />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px]">
@@ -116,7 +116,7 @@ export function ListReports({ reports }: ListReportsProps) {
<div
className={cn(
'p-4',
report.chartType === 'bar' && 'overflow-auto max-h-[300px]'
report.chartType === 'bar' && 'max-h-[300px] overflow-auto'
)}
>
<LazyChart

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/header-dashboards.tsx
View File

@@ -9,7 +9,7 @@ import { StickyBelowHeader } from '../layout-sticky-below-header';
export function HeaderDashboards() {
return (
<StickyBelowHeader>
<div className="p-4 flex justify-between items-center">
<div className="flex items-center justify-between p-4">
<div />
<Button
icon={PlusIcon}

6
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/dashboards/list-dashboards.tsx
View File

@@ -60,13 +60,13 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
return (
<>
<div className="grid sm:grid-cols-2 gap-4 p-4">
<div className="grid gap-4 p-4 sm:grid-cols-2">
{dashboards.map((item) => (
<Card key={item.id} hover>
<div>
<Link
href={`/${organizationId}/${projectId}/dashboards/${item.id}`}
className="block p-4 flex flex-col"
className="block flex flex-col p-4"
>
<span className="font-medium">{item.name}</span>
</Link>
@@ -83,7 +83,7 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
Edit
</button>
</CardActionsItem>
<CardActionsItem className="text-destructive w-full" asChild>
<CardActionsItem className="w-full text-destructive" asChild>
<button
onClick={() => {
deletion.mutate({

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/charts/events-per-day-chart.tsx
View File

@@ -20,7 +20,7 @@ export function EventsPerDayChart({ projectId, filters, events }: Props) {
];
return (
<div className="card p-4 mb-8">
<div className="card mb-8 p-4">
<ChartSwitchShortcut
projectId={projectId}
range="1m"

4
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-conversions-list/event-conversions-list.tsx
View File

@@ -22,13 +22,13 @@ export function EventConversionsList({ data }: EventListProps) {
<WidgetHead>
<div className="title">Conversions</div>
</WidgetHead>
<div className="flex flex-col gap-2 overflow-y-auto max-h-80 p-4">
<div className="flex max-h-80 flex-col gap-2 overflow-y-auto p-4">
{data.map((item, index, list) => (
<Fragment key={item.id}>
{showDateHeader(item.createdAt, list[index - 1]?.createdAt) && (
<div className="flex flex-row justify-between gap-2 [&:not(:first-child)]:mt-12">
<div className="flex gap-2">
<div className="bg-slate-100 border border-slate-300 rounded h-8 px-3 leading-none flex items-center text-sm font-medium gap-2">
<div className="flex h-8 items-center gap-2 rounded border border-slate-300 bg-slate-100 px-3 text-sm font-medium leading-none">
{item.createdAt.toLocaleDateString()}
</div>
</div>

12
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-details.tsx
View File

@@ -157,8 +157,8 @@ export function EventDetails({ event, open, setOpen }: Props) {
{properties.length > 0 && (
<div>
<div className="text-sm font-medium mb-2">Params</div>
<div className="flex gap-2 flex-wrap">
<div className="mb-2 text-sm font-medium">Params</div>
<div className="flex flex-wrap gap-2">
{properties.map((item) => (
<KeyValue
key={item.name}
@@ -177,8 +177,8 @@ export function EventDetails({ event, open, setOpen }: Props) {
</div>
)}
<div>
<div className="text-sm font-medium mb-2">Common</div>
<div className="flex gap-2 flex-wrap">
<div className="mb-2 text-sm font-medium">Common</div>
<div className="flex flex-wrap gap-2">
{common.map((item) => (
<KeyValue
key={item.name}
@@ -191,10 +191,10 @@ export function EventDetails({ event, open, setOpen }: Props) {
</div>
<div>
<div className="flex justify-between text-sm font-medium mb-2">
<div className="mb-2 flex justify-between text-sm font-medium">
<div>Similar events</div>
<button
className="hover:underline text-muted-foreground"
className="text-muted-foreground hover:underline"
onClick={() => {
setEvents([event.name]);
setOpen(false);

8
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-edit.tsx
View File

@@ -80,10 +80,10 @@ export function EventEdit({ event, open, setOpen }: Props) {
<SheetHeader>
<SheetTitle>Edit "{name}"</SheetTitle>
</SheetHeader>
<div className="flex flex-col gap-8 my-8">
<div className="my-8 flex flex-col gap-8">
<div>
<Label className="mb-4 block">Conversion</Label>
<label className="cursor-pointer flex items-center select-none border border-border rounded-md p-4 gap-4">
<label className="flex cursor-pointer select-none items-center gap-4 rounded-md border border-border p-4">
<Checkbox
checked={conversion}
onCheckedChange={(checked) => {
@@ -106,7 +106,7 @@ export function EventEdit({ event, open, setOpen }: Props) {
setIcon(name);
}}
className={cn(
'flex-shrink-0 rounded-md w-8 h-8 cursor-pointer inline-flex transition-all bg-slate-100 flex items-center justify-center',
'flex inline-flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md bg-slate-100 transition-all',
name === selectedIcon
? 'scale-110 ring-1 ring-black'
: '[&_svg]:opacity-50'
@@ -127,7 +127,7 @@ export function EventEdit({ event, open, setOpen }: Props) {
setColor(color);
}}
className={cn(
'flex-shrink-0 rounded-md w-8 h-8 cursor-pointer transition-all flex justify-center items-center',
'flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md transition-all',
color === selectedColor ? 'ring-1 ring-black' : '',
getBg(color)
)}

6
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-icon.tsx
View File

@@ -23,11 +23,11 @@ import { toast } from 'sonner';
import type { EventMeta } from '@openpanel/db';
const variants = cva('flex items-center justify-center shrink-0 rounded-full', {
const variants = cva('flex shrink-0 items-center justify-center rounded-full', {
variants: {
size: {
sm: 'w-6 h-6',
default: 'w-10 h-10',
sm: 'h-6 w-6',
default: 'h-10 w-10',
},
},
defaultVariants: {

8
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
View File

@@ -55,11 +55,11 @@ export function EventListItem(props: EventListItemProps) {
<button
onClick={() => setIsDetailsOpen(true)}
className={cn(
'w-full card p-4 flex hover:bg-slate-50 rounded-lg transition-colors justify-between items-center',
'card flex w-full items-center justify-between rounded-lg p-4 transition-colors hover:bg-slate-50',
meta?.conversion && `bg-${meta.color}-50 hover:bg-${meta.color}-100`
)}
>
<div className="flex gap-4 items-center text-left text-sm">
<div className="flex items-center gap-4 text-left text-sm">
<EventIcon size="sm" name={name} meta={meta} projectId={projectId} />
<span>
<span className="font-medium">{renderName()}</span>
@@ -77,14 +77,14 @@ export function EventListItem(props: EventListItemProps) {
e.stopPropagation();
}}
href={`/${organizationId}/${projectId}/profiles/${profile?.id}`}
className="text-muted-foreground text-sm hover:underline whitespace-nowrap max-w-[80px] overflow-hidden text-ellipsis"
className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap text-sm text-muted-foreground hover:underline"
>
{profile?.firstName} {profile?.lastName}
</Link>
</Tooltiper>
<Tooltiper asChild content={createdAt.toLocaleString()}>
<div className="text-muted-foreground text-sm">
<div className="text-sm text-muted-foreground">
{createdAt.toLocaleTimeString()}
</div>
</Tooltiper>

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-list.tsx
View File

@@ -67,7 +67,7 @@ export function EventList({ data, count }: EventListProps) {
<div className="flex flex-row justify-between gap-2 [&:not(:first-child)]:mt-12">
{index === 0 ? <EventListener /> : <div />}
<div className="flex gap-2">
<div className="bg-slate-100 border border-slate-300 rounded h-8 px-3 leading-none flex items-center text-sm font-medium gap-2">
<div className="flex h-8 items-center gap-2 rounded border border-slate-300 bg-slate-100 px-3 text-sm font-medium leading-none">
{item.createdAt.toLocaleDateString()}
</div>
{index === 0 && (

6
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-listener.tsx
View File

@@ -49,17 +49,17 @@ export default function EventListener() {
setCounter(0);
router.refresh();
}}
className="bg-white border border-border rounded h-8 px-3 leading-none flex items-center text-sm font-medium gap-2"
className="flex h-8 items-center gap-2 rounded border border-border bg-white px-3 text-sm font-medium leading-none"
>
<div className="relative">
<div
className={cn(
'bg-emerald-500 h-3 w-3 rounded-full animate-ping opacity-100 transition-all'
'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all'
)}
></div>
<div
className={cn(
'bg-emerald-500 h-3 w-3 rounded-full absolute top-0 left-0 transition-all'
'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all'
)}
></div>
</div>

6
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/page.tsx
View File

@@ -57,7 +57,7 @@ export default async function Page({
return (
<PageLayout title="Events" organizationSlug={organizationId}>
<StickyBelowHeader className="p-4 flex justify-between">
<StickyBelowHeader className="flex justify-between p-4">
<OverviewFiltersDrawer
mode="events"
projectId={projectId}
@@ -65,11 +65,11 @@ export default async function Page({
enableEventsFilter
/>
<OverviewFiltersButtons
className="p-0 justify-end"
className="justify-end p-0"
nuqsOptions={nuqsOptions}
/>
</StickyBelowHeader>
<div className="grid md:grid-cols-2 p-4 gap-4">
<div className="grid gap-4 p-4 md:grid-cols-2">
<div>
<EventList data={events} count={count} />
</div>

8
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-menu.tsx
View File

@@ -40,7 +40,7 @@ function LinkWithIcon({
return (
<Link
className={cn(
'text-slate-800 text-sm font-medium flex gap-2 items-center px-3 py-2 transition-colors hover:bg-blue-100 leading-none rounded-md transition-all',
'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium leading-none text-slate-800 transition-all transition-colors hover:bg-blue-100',
active && 'bg-blue-50',
className
)}
@@ -106,7 +106,7 @@ export default function LayoutMenu({ dashboards }: LayoutMenuProps) {
href={`/${params.organizationId}/${projectId}/settings/organization`}
/>
{pathname?.includes('/settings/') && (
<div className="pl-7 flex flex-col gap-1">
<div className="flex flex-col gap-1 pl-7">
<LinkWithIcon
icon={BuildingIcon}
label="Organization"
@@ -136,14 +136,14 @@ export default function LayoutMenu({ dashboards }: LayoutMenuProps) {
)}
{dashboards.length > 0 && (
<div className="mt-8">
<div className="font-medium mb-2 text-sm">Your dashboards</div>
<div className="mb-2 text-sm font-medium">Your dashboards</div>
<div className="flex flex-col gap-2">
{dashboards.map((item) => (
<LinkWithIcon
key={item.id}
icon={LayoutPanelTopIcon}
label={
<div className="flex justify-between gap-0.5 items-center">
<div className="flex items-center justify-between gap-0.5">
<span>{item.name}</span>
<span className="text-xs text-muted-foreground">
{item.project.name}

20
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-sidebar.tsx
View File

@@ -38,35 +38,35 @@ export function LayoutSidebar({
<button
onClick={() => setActive(false)}
className={cn(
'fixed top-0 left-0 right-0 bottom-0 backdrop-blur-sm z-30 transition-opacity',
'fixed bottom-0 left-0 right-0 top-0 z-30 backdrop-blur-sm transition-opacity',
active
? 'opacity-100 pointer-events-auto'
: 'opacity-0 pointer-events-none'
? 'pointer-events-auto opacity-100'
: 'pointer-events-none opacity-0'
)}
/>
<div
className={cn(
'fixed top-0 left-0 h-screen border-r border-border w-72 bg-white flex flex-col z-30 transition-transform',
'fixed left-0 top-0 z-30 flex h-screen w-72 flex-col border-r border-border bg-white transition-transform',
'-translate-x-72 lg:-translate-x-0', // responsive
active && 'translate-x-0' // force active on mobile
)}
>
<div className="absolute -right-12 h-16 flex items-center lg:hidden">
<div className="absolute -right-12 flex h-16 items-center lg:hidden">
<Hamburger toggled={active} onToggle={setActive} size={20} />
</div>
<div className="h-16 border-b border-border px-4 shrink-0 flex items-center">
<div className="flex h-16 shrink-0 items-center border-b border-border px-4">
<Link href="/">
<Logo />
</Link>
</div>
<div className="flex flex-col p-4 gap-2 flex-grow overflow-auto">
<div className="flex flex-grow flex-col gap-2 overflow-auto p-4">
<LayoutMenu dashboards={dashboards} />
{/* Placeholder for LayoutOrganizationSelector */}
<div className="h-32 block shrink-0"></div>
<div className="block h-32 shrink-0"></div>
</div>
<div className="fixed bottom-0 left-0 right-0">
<div className="bg-gradient-to-t from-white to-white/0 h-8 w-full"></div>
<div className="bg-white p-4 pt-0 flex flex-col gap-2">
<div className="h-8 w-full bg-gradient-to-t from-white to-white/0"></div>
<div className="flex flex-col gap-2 bg-white p-4 pt-0">
<Link
className={cn('flex gap-2', buttonVariants())}
href={`/${organizationId}/${projectId}/reports`}

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header.tsx
View File

@@ -12,7 +12,7 @@ export function StickyBelowHeader({
return (
<div
className={cn(
'md:sticky bg-white border-b border-border z-20 [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none rounded-lg top-0',
'top-0 z-20 rounded-lg border-b border-border bg-white md:sticky [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none',
className
)}
>

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout.tsx
View File

@@ -55,7 +55,7 @@ export default async function AppLayout({
<LayoutSidebar
{...{ organizationId, projectId, organizations, dashboards }}
/>
<div className="lg:pl-72 transition-all">{children}</div>
<div className="transition-all lg:pl-72">{children}</div>
</div>
);
}

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/page-layout.tsx
View File

@@ -20,7 +20,7 @@ export default async function PageLayout({
return (
<>
<div className="h-16 border-b border-border flex-shrink-0 sticky top-0 bg-white px-4 flex items-center justify-between z-20 pl-12 lg:pl-4">
<div className="sticky top-0 z-20 flex h-16 flex-shrink-0 items-center justify-between border-b border-border bg-white px-4 pl-12 lg:pl-4">
<div className="text-xl font-medium">{title}</div>
{projects.length > 0 && <LayoutProjectSelector projects={projects} />}
</div>

4
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/page.tsx
View File

@@ -35,7 +35,7 @@ export default async function Page({
return (
<PageLayout title="Overview" organizationSlug={organizationId}>
<StickyBelowHeader>
<div className="p-4 flex gap-2 justify-between">
<div className="flex justify-between gap-2 p-4">
<div className="flex gap-2">
<OverviewReportRange />
<OverviewFiltersDrawer projectId={projectId} mode="events" />
@@ -47,7 +47,7 @@ export default async function Page({
</div>
<OverviewFiltersButtons />
</StickyBelowHeader>
<div className="p-4 grid gap-4 grid-cols-6">
<div className="grid grid-cols-6 gap-4 p-4">
<div className="col-span-6">
<OverviewLiveHistogram projectId={projectId} />
</div>

12
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/[profileId]/page.tsx
View File

@@ -133,7 +133,7 @@ export default async function Page({
</div>
}
>
<StickyBelowHeader className="p-4 flex justify-between">
<StickyBelowHeader className="flex justify-between p-4">
<OverviewFiltersDrawer
projectId={projectId}
mode="events"
@@ -141,11 +141,11 @@ export default async function Page({
/>
<OverviewFiltersButtons
nuqsOptions={{ shallow: false }}
className="p-0 justify-end"
className="justify-end p-0"
/>
</StickyBelowHeader>
<div className="p-4">
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 mb-8">
<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<EventList data={events} count={count} />
</div>
@@ -159,7 +159,7 @@ export default async function Page({
</WidgetBody>
</Widget>
<Widget className="w-full">
<WidgetHead className="flex justify-between items-center">
<WidgetHead className="flex items-center justify-between">
<span className="title">Profile</span>
<ProfileAvatar {...profile} />
</WidgetHead>
@@ -199,10 +199,10 @@ function ValueRow({ name, value }: { name: string; value?: unknown }) {
}
return (
<div className="flex flex-row justify-between p-2 px-4">
<div className="font-medium text-muted-foreground capitalize">
<div className="font-medium capitalize text-muted-foreground">
{name.replace('_', ' ')}
</div>
<div className="flex gap-2 items-center text-right">
<div className="flex items-center gap-2 text-right">
{typeof value === 'string' ? (
<>
<SerieIcon name={value} /> {value}

6
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/page.tsx
View File

@@ -30,18 +30,18 @@ export default function Page({
}: PageProps) {
return (
<PageLayout title="Profiles" organizationSlug={organizationId}>
<StickyBelowHeader className="p-4 flex justify-between">
<StickyBelowHeader className="flex justify-between p-4">
<OverviewFiltersDrawer
projectId={projectId}
nuqsOptions={nuqsOptions}
mode="events"
/>
<OverviewFiltersButtons
className="p-0 justify-end"
className="justify-end p-0"
nuqsOptions={nuqsOptions}
/>
</StickyBelowHeader>
<div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2">
<ProfileListServer
projectId={projectId}
cursor={parseAsInteger.parseServerSide(cursor ?? '') ?? undefined}

8
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-last-seen/index.tsx
View File

@@ -29,11 +29,11 @@ export default async function ProfileLastSeenServer({ projectId }: Props) {
const renderItem = (item: Row) => (
<div
key={item.days}
className="flex-1 shrink-0 h-full flex flex-col items-center"
className="flex h-full flex-1 shrink-0 flex-col items-center"
>
<Tooltip>
<TooltipTrigger asChild>
<div className="w-full flex-1 bg-slate-200 rounded flex flex-col justify-end">
<div className="flex w-full flex-1 flex-col justify-end rounded bg-slate-200">
<div
className={cn(
'w-full rounded',
@@ -50,7 +50,7 @@ export default async function ProfileLastSeenServer({ projectId }: Props) {
{item.days === 0 ? 'today' : `${item.days} days ago`}
</TooltipContent>
</Tooltip>
<div className="text-xs mt-1">{item.days}</div>
<div className="mt-1 text-xs">{item.days}</div>
</div>
);
return (
@@ -59,7 +59,7 @@ export default async function ProfileLastSeenServer({ projectId }: Props) {
<div className="title">Last seen</div>
</WidgetHead>
<WidgetBody>
<div className="flex aspect-[3/1] w-full gap-1 items-end">
<div className="flex aspect-[3/1] w-full items-end gap-1">
{res.length >= 18 ? (
<>
{res.slice(0, split).map(renderItem)}

8
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-list/profile-list.tsx
View File

@@ -25,7 +25,7 @@ export function ProfileList({ data, count }: ProfileListProps) {
const { cursor, setCursor } = useCursor();
return (
<Widget>
<WidgetHead className="flex justify-between items-center">
<WidgetHead className="flex items-center justify-between">
<div className="title">Profiles</div>
<Pagination
size="sm"
@@ -47,7 +47,7 @@ export function ProfileList({ data, count }: ProfileListProps) {
return (
<Link
href={`/${organizationId}/${projectId}/profiles/${profile.id}`}
className="flex gap-2 items-center font-medium"
className="flex items-center gap-2 font-medium"
>
<ProfileAvatar size="sm" {...profile} />
{getProfileName(profile)}
@@ -69,7 +69,7 @@ export function ProfileList({ data, count }: ProfileListProps) {
asChild
content={profile.createdAt.toLocaleString()}
>
<div className="text-muted-foreground text-sm">
<div className="text-sm text-muted-foreground">
{profile.createdAt.toLocaleTimeString()}
</div>
</Tooltiper>
@@ -78,7 +78,7 @@ export function ProfileList({ data, count }: ProfileListProps) {
},
]}
/>
<div className="p-4 border-t border-border">
<div className="border-t border-border p-4">
<Pagination
cursor={cursor}
setCursor={setCursor}

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-top/index.tsx
View File

@@ -44,7 +44,7 @@ export default async function ProfileTopServer({
return (
<Link
href={`/${organizationId}/${projectId}/profiles/${profile.id}`}
className="flex gap-2 items-center font-medium"
className="flex items-center gap-2 font-medium"
>
<ProfileAvatar size="sm" {...profile} />
{getProfileName(profile)}

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/reports/[reportId]/page.tsx
View File

@@ -27,7 +27,7 @@ export default async function Page({
<PageLayout
organizationSlug={organizationId}
title={
<div className="flex gap-2 items-center cursor-pointer">
<div className="flex cursor-pointer items-center gap-2">
{report.name}
<Pencil size={16} />
</div>

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/reports/page.tsx
View File

@@ -15,7 +15,7 @@ export default function Page({ params: { organizationId } }: PageProps) {
<PageLayout
organizationSlug={organizationId}
title={
<div className="flex gap-2 items-center cursor-pointer">
<div className="flex cursor-pointer items-center gap-2">
Unnamed report
<Pencil size={16} />
</div>

6
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx
View File

@@ -53,7 +53,7 @@ export default function ReportEditor({
return (
<Sheet>
<StickyBelowHeader className="p-4 grid grid-cols-2 gap-2 md:grid-cols-6">
<StickyBelowHeader className="grid grid-cols-2 gap-2 p-4 md:grid-cols-6">
<SheetTrigger asChild>
<div>
<Button icon={GanttChartSquareIcon} variant="cta">
@@ -61,7 +61,7 @@ export default function ReportEditor({
</Button>
</div>
</SheetTrigger>
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 col-span-4">
<div className="col-span-4 grid grid-cols-2 gap-2 md:grid-cols-4">
<ReportChartType className="min-w-0 flex-1" />
<ReportRange
className="min-w-0 flex-1"
@@ -93,7 +93,7 @@ export default function ReportEditor({
<ReportInterval className="min-w-0 flex-1" />
<ReportLineType className="min-w-0 flex-1" />
</div>
<div className="col-start-2 md:col-start-6 row-start-1 text-right">
<div className="col-start-2 row-start-1 text-right md:col-start-6">
<ReportSaveButton />
</div>
</StickyBelowHeader>

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/clients/list-clients.tsx
View File

@@ -16,7 +16,7 @@ export default function ListClients({ clients }: ListClientsProps) {
return (
<>
<StickyBelowHeader>
<div className="p-4 flex items-center justify-between">
<div className="flex items-center justify-between p-4">
<div />
<Button icon={PlusIcon} onClick={() => pushModal('AddClient')}>
<span className="max-sm:hidden">Create client</span>

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/organization/invites/create-invite.tsx
View File

@@ -123,7 +123,7 @@ export default function CreateInvite({ projects }: Props) {
value: item.id,
}))}
/>
<p className="text-xs text-muted-foreground mt-1">
<p className="mt-1 text-xs text-muted-foreground">
Leave empty to give access to all projects
</p>
</div>

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/organization/invites/invites.tsx
View File

@@ -73,7 +73,7 @@ function Item({
{new Date(createdAt).toLocaleDateString()}
</TooltipComplete>
</TableCell>
<TableCell className="capitalize flex items-center gap-2">
<TableCell className="flex items-center gap-2 capitalize">
<Dot
className={cn(
status === 'accepted' && 'bg-emerald-600',

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/organization/page.tsx
View File

@@ -26,7 +26,7 @@ export default async function Page({
return (
<PageLayout title={organization.name} organizationSlug={organizationSlug}>
<div className="p-4 grid grid-cols-1 gap-8">
<div className="grid grid-cols-1 gap-8 p-4">
<EditOrganization organization={organization} />
<MembersServer organizationSlug={organizationSlug} />
<InvitesServer organizationSlug={organizationSlug} />

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/profile/page.tsx
View File

@@ -17,7 +17,7 @@ export default async function Page({ params: { organizationId } }: PageProps) {
return (
<PageLayout title={profile.lastName} organizationSlug={organizationId}>
<div className="p-4 flex flex-col gap-4">
<div className="flex flex-col gap-4 p-4">
<EditProfile profile={profile} />
<Logout />
</div>

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/projects/list-projects.tsx
View File

@@ -18,7 +18,7 @@ export default function ListProjects({ projects }: ListProjectsProps) {
return (
<>
<StickyBelowHeader>
<div className="p-4 flex items-center justify-between">
<div className="flex items-center justify-between p-4">
<div />
<Button
icon={PlusIcon}

2
apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/references/list-references.tsx
View File

@@ -17,7 +17,7 @@ export default function ListReferences({ data }: ListProjectsProps) {
return (
<>
<StickyBelowHeader>
<div className="p-4 flex items-center justify-between">
<div className="flex items-center justify-between p-4">
<div />
<Button icon={PlusIcon} onClick={() => pushModal('AddReference')}>
<span className="max-sm:hidden">Create reference</span>

4
apps/dashboard/src/app/(app)/[organizationId]/create-project.tsx
View File

@@ -44,8 +44,8 @@ export function CreateProject() {
return (
<>
<div>
<LogoSquare className="w-20 md:w-28 mb-8" />
<h1 className="font-medium text-3xl">Create your first project</h1>
<LogoSquare className="mb-8 w-20 md:w-28" />
<h1 className="text-3xl font-medium">Create your first project</h1>
<div className="text-lg">
A project is just a container for your events. You can create as many
as you want.

16
apps/dashboard/src/app/(app)/[organizationId]/page.tsx
View File

@@ -31,10 +31,10 @@ export default async function Page({ params: { organizationId } }: PageProps) {
const isAccepted = await isWaitlistUserAccepted();
if (!isAccepted) {
return (
<div className="p-4 flex items-center justify-center h-screen">
<div className="max-w-lg w-full">
<LogoSquare className="w-20 md:w-28 mb-8" />
<h1 className="font-medium text-3xl">Not quite there yet</h1>
<div className="flex h-screen items-center justify-center p-4">
<div className="w-full max-w-lg">
<LogoSquare className="mb-8 w-20 md:w-28" />
<h1 className="text-3xl font-medium">Not quite there yet</h1>
<div className="text-lg">
We're still working on Openpanel, but we're not quite there yet.
We'll let you know when we're ready to go!
@@ -47,8 +47,8 @@ export default async function Page({ params: { organizationId } }: PageProps) {
if (projects.length === 0) {
return (
<div className="flex items-center justify-center h-screen p-4 ">
<div className="max-w-lg w-full">
<div className="flex h-screen items-center justify-center p-4 ">
<div className="w-full max-w-lg">
<CreateProject />
</div>
</div>
@@ -60,8 +60,8 @@ export default async function Page({ params: { organizationId } }: PageProps) {
}
return (
<div className="max-w-xl w-full mx-auto flex flex-col gap-4 pt-20 p-4 ">
<h1 className="font-medium text-xl">Select project</h1>
<div className="mx-auto flex w-full max-w-xl flex-col gap-4 p-4 pt-20 ">
<h1 className="text-xl font-medium">Select project</h1>
{projects.map((item) => (
<ProjectCard key={item.id} {...item} />
))}

12
apps/dashboard/src/app/(app)/create-organization.tsx
View File

@@ -58,14 +58,14 @@ export function CreateOrganization() {
if (mutation.isSuccess && mutation.data.client) {
return (
<div className="card p-4 md:p-8">
<LogoSquare className="w-20 mb-4" />
<h1 className="font-medium text-3xl">Nice job!</h1>
<LogoSquare className="mb-4 w-20" />
<h1 className="text-3xl font-medium">Nice job!</h1>
<div className="mb-4">
You're ready to start using our SDK. Save the client ID and secret (if
you have any)
</div>
<CreateClientSuccess {...mutation.data.client} />
<div className="flex gap-4 mt-4">
<div className="mt-4 flex gap-4">
<a
className={cn(buttonVariants({ variant: 'secondary' }), 'flex-1')}
href="https://docs.openpanel.dev/docs"
@@ -87,8 +87,8 @@ export function CreateOrganization() {
return (
<div className="card p-4 md:p-8">
<LogoSquare className="w-20 mb-4" />
<h1 className="font-medium text-3xl">Welcome to Openpanel</h1>
<LogoSquare className="mb-4 w-20" />
<h1 className="text-3xl font-medium">Welcome to Openpanel</h1>
<div className="text-lg">
Create your organization below (can be personal or a company) and your
first project.
@@ -132,7 +132,7 @@ export function CreateOrganization() {
/>
</TabsContent>
<TabsContent value="other">
<div className="p-2 px-3 bg-white rounded text-sm">
<div className="rounded bg-white p-2 px-3 text-sm">
🔑 You will get a secret to use for your API requests.
</div>
</TabsContent>

12
apps/dashboard/src/app/(app)/page.tsx
View File

@@ -13,10 +13,10 @@ export default async function Page() {
const isAccepted = await isWaitlistUserAccepted();
if (!isAccepted) {
return (
<div className="flex items-center justify-center h-screen">
<div className="max-w-lg w-full">
<LogoSquare className="w-20 md:w-28 mb-8" />
<h1 className="font-medium text-3xl">Not quite there yet</h1>
<div className="flex h-screen items-center justify-center">
<div className="w-full max-w-lg">
<LogoSquare className="mb-8 w-20 md:w-28" />
<h1 className="text-3xl font-medium">Not quite there yet</h1>
<div className="text-lg">
We're still working on Openpanel, but we're not quite there yet.
We'll let you know when we're ready to go!
@@ -32,8 +32,8 @@ export default async function Page() {
}
return (
<div className="flex items-center justify-center h-screen">
<div className="max-w-lg w-full">
<div className="flex h-screen items-center justify-center">
<div className="w-full max-w-lg">
<CreateOrganization />
</div>
</div>

16
apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx
View File

@@ -32,12 +32,12 @@ export default async function Page({ params: { id } }: PageProps) {
const organization = await getOrganizationBySlug(share.organization_slug);
return (
<div className="p-4 md:p-16 bg-gradient-to-tl from-blue-950 to-blue-600">
<div className="max-w-6xl mx-auto">
<div className="flex justify-between items-end mb-4">
<div className="bg-gradient-to-tl from-blue-950 to-blue-600 p-4 md:p-16">
<div className="mx-auto max-w-6xl">
<div className="mb-4 flex items-end justify-between">
<div className="leading-none">
<span className="text-white mb-4">{organization?.name}</span>
<h1 className="text-white text-xl font-medium">
<span className="mb-4 text-white">{organization?.name}</span>
<h1 className="text-xl font-medium text-white">
{share.project?.name}
</h1>
</div>
@@ -45,9 +45,9 @@ export default async function Page({ params: { id } }: PageProps) {
<Logo className="text-white max-sm:[&_span]:hidden" />
</a>
</div>
<div className="max-sm:-mx-3 bg-slate-100 rounded-lg shadow ring-8 ring-blue-600/50">
<div className="rounded-lg bg-slate-100 shadow ring-8 ring-blue-600/50 max-sm:-mx-3">
<StickyBelowHeader>
<div className="p-4 flex gap-2 justify-between">
<div className="flex justify-between gap-2 p-4">
<div className="flex gap-2">
<OverviewReportRange />
{/* <OverviewFiltersDrawer projectId={projectId} mode="events" /> */}
@@ -58,7 +58,7 @@ export default async function Page({ params: { id } }: PageProps) {
</div>
<OverviewFiltersButtons />
</StickyBelowHeader>
<div className="p-4 grid gap-4 grid-cols-6">
<div className="grid grid-cols-6 gap-4 p-4">
<div className="col-span-6">
<OverviewLiveHistogram projectId={projectId} />
</div>

4
apps/dashboard/src/app/auth.tsx
View File

@@ -28,8 +28,8 @@ export default function Auth() {
const pathname = usePathname();
const [state, setState] = useState<string | null>(null);
return (
<div className="flex items-center justify-center flex-col h-screen p-4">
<Widget className="max-w-md w-full mb-4">
<div className="flex h-screen flex-col items-center justify-center p-4">
<Widget className="mb-4 w-full max-w-md">
<WidgetBody>
<div className="flex justify-center py-8">
<Logo />

2
apps/dashboard/src/app/layout.tsx
View File

@@ -24,7 +24,7 @@ export default function RootLayout({
return (
<html lang="en" className="light">
<body
className={cn('min-h-screen font-sans antialiased grainy bg-slate-100')}
className={cn('grainy min-h-screen bg-slate-100 font-sans antialiased')}
>
<Providers>{children}</Providers>
</body>

2
apps/dashboard/src/components/button-container.tsx
View File

@@ -6,6 +6,6 @@ export function ButtonContainer({
...props
}: HtmlProps<HTMLDivElement>) {
return (
<div className={cn('flex justify-between mt-6', className)} {...props} />
<div className={cn('mt-6 flex justify-between', className)} {...props} />
);
}

4
apps/dashboard/src/components/card.tsx
View File

@@ -34,9 +34,9 @@ interface CardActionsProps {
}
export function CardActions({ children }: CardActionsProps) {
return (
<div className="absolute top-2 right-2 z-10">
<div className="absolute right-2 top-2 z-10">
<DropdownMenu>
<DropdownMenuTrigger className="h-8 w-8 hover:border rounded justify-center items-center flex">
<DropdownMenuTrigger className="flex h-8 w-8 items-center justify-center rounded hover:border">
<MoreHorizontal size={16} />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px]">

4
apps/dashboard/src/components/forms/input-with-label.tsx
View File

@@ -13,12 +13,12 @@ export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
({ label, className, ...props }, ref) => {
return (
<div className={className}>
<div className="block mb-2 flex justify-between">
<div className="mb-2 block flex justify-between">
<Label className="mb-0" htmlFor={label}>
{label}
</Label>
{props.error && (
<span className="text-sm text-destructive leading-none">
<span className="text-sm leading-none text-destructive">
{props.error}
</span>
)}

8
apps/dashboard/src/components/full-page-empty-state.tsx
View File

@@ -16,13 +16,13 @@ export function FullPageEmptyState({
className,
}: FullPageEmptyStateProps) {
return (
<div className={cn('p-4 flex items-center justify-center', className)}>
<div className="p-8 w-full max-w-xl flex flex-col items-center justify-center">
<div className="w-24 h-24 bg-white shadow-sm rounded-full flex justify-center items-center mb-6">
<div className={cn('flex items-center justify-center p-4', className)}>
<div className="flex w-full max-w-xl flex-col items-center justify-center p-8">
<div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-white shadow-sm">
<Icon size={60} strokeWidth={1} />
</div>
<h1 className="text-xl font-medium mb-1">{title}</h1>
<h1 className="mb-1 text-xl font-medium">{title}</h1>
{children}
</div>

2
apps/dashboard/src/components/logo.tsx
View File

@@ -17,7 +17,7 @@ export function LogoSquare({ className }: LogoProps) {
export function Logo({ className }: LogoProps) {
return (
<div
className={cn('text-xl font-medium flex gap-2 items-center', className)}
className={cn('flex items-center gap-2 text-xl font-medium', className)}
>
<LogoSquare className="max-h-8" />
<span>openpanel.dev</span>

6
apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx
View File

@@ -76,7 +76,7 @@ export function OverviewFiltersDrawerContent({
/>
</div>
<div className="flex flex-col gap-4 mt-8">
<div className="mt-8 flex flex-col gap-4">
{filters
.filter((filter) => filter.value[0] !== null)
.map((filter) => {
@@ -120,7 +120,7 @@ export function FilterOptionEvent({
);
return (
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<div>{filter.name}</div>
<Combobox
className="flex-1"
@@ -160,7 +160,7 @@ export function FilterOptionProfile({
const values = useProfileValues(projectId, filter.name);
return (
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<div>{filter.name}</div>
<Combobox
className="flex-1"

2
apps/dashboard/src/components/overview/filters/overview-filters-drawer.tsx
View File

@@ -17,7 +17,7 @@ export function OverviewFiltersDrawer(
Filters
</Button>
</SheetTrigger>
<SheetContent className="!max-w-lg w-full" side="right">
<SheetContent className="w-full !max-w-lg" side="right">
<OverviewFiltersDrawerContent {...props} />
</SheetContent>
</Sheet>

6
apps/dashboard/src/components/overview/live-counter/live-counter.tsx
View File

@@ -58,18 +58,18 @@ export default function LiveCounter({ data = 0, projectId }: LiveCounterProps) {
<TooltipTrigger asChild>
<button
onClick={() => setLiveHistogram((p) => !p)}
className="border border-border rounded h-8 px-3 leading-none flex items-center font-medium gap-2"
className="flex h-8 items-center gap-2 rounded border border-border px-3 font-medium leading-none"
>
<div className="relative">
<div
className={cn(
'bg-emerald-500 h-3 w-3 rounded-full animate-ping opacity-100 transition-all',
'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all',
counter === 0 && 'bg-destructive opacity-0'
)}
></div>
<div
className={cn(
'bg-emerald-500 h-3 w-3 rounded-full absolute top-0 left-0 transition-all',
'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
counter === 0 && 'bg-destructive'
)}
></div>

12
apps/dashboard/src/components/overview/overview-live-histogram.tsx
View File

@@ -85,7 +85,7 @@ export function OverviewLiveHistogram({
{staticArray.map((percent, i) => (
<div
key={i}
className="flex-1 rounded-md bg-slate-200 animate-pulse"
className="flex-1 animate-pulse rounded-md bg-slate-200"
style={{ height: `${percent}%` }}
/>
))}
@@ -105,7 +105,7 @@ export function OverviewLiveHistogram({
<TooltipTrigger asChild>
<div
className={cn(
'flex-1 rounded-md hover:scale-110 transition-all ease-in-out',
'flex-1 rounded-md transition-all ease-in-out hover:scale-110',
minute.count === 0 ? 'bg-slate-200' : 'bg-blue-600'
)}
style={{
@@ -136,14 +136,14 @@ interface WrapperProps {
function Wrapper({ open, children, count }: WrapperProps) {
return (
<AnimateHeight duration={500} height={open ? 'auto' : 0}>
<div className="flex items-end flex-col md:flex-row">
<div className="md:mr-2 flex md:flex-col max-md:justify-between items-end max-md:w-full max-md:mb-2 md:card md:p-4">
<div className="flex flex-col items-end md:flex-row">
<div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
<div className="text-sm max-md:mb-1">Last 30 minutes</div>
<div className="text-2xl font-bold text-ellipsis overflow-hidden whitespace-nowrap">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{count}
</div>
</div>
<div className="max-h-[150px] aspect-[5/1] flex flex-1 gap-0.5 md:gap-2 items-end w-full relative">
<div className="relative flex aspect-[5/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:gap-2">
<div className="absolute -top-3 right-0 text-xs text-muted-foreground">
NOW
</div>

6
apps/dashboard/src/components/overview/overview-metrics.tsx
View File

@@ -192,13 +192,13 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
return (
<>
<div className="grid grid-cols-6 col-span-6 gap-1">
<div className="col-span-6 grid grid-cols-6 gap-1">
{reports.map((report, index) => (
<button
key={index}
className={cn(
'relative col-span-3 md:col-span-2 lg:col-span-1 group transition-all scale-95',
index === metric && 'shadow-md rounded-xl scale-105 z-10'
'group relative col-span-3 scale-95 transition-all md:col-span-2 lg:col-span-1',
index === metric && 'z-10 scale-105 rounded-xl shadow-md'
)}
onClick={() => {
setMetric(index);

6
apps/dashboard/src/components/overview/overview-widget.tsx
View File

@@ -20,7 +20,7 @@ export function WidgetHead({ className, ...props }: WidgetHeadProps) {
return (
<WidgetHeadBase
className={cn(
'flex flex-col p-0 [&_.title]:p-4 [&_.title]:flex [&_.title]:justify-between [&_.title]:items-center',
'flex flex-col p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4',
className
)}
{...props}
@@ -85,7 +85,7 @@ export function WidgetButtons({
<div
ref={container}
className={cn(
'px-4 self-stretch justify-start transition-opacity flex flex-wrap [&_button]:text-xs [&_button]:opacity-50 [&_button]:whitespace-nowrap [&_button.active]:opacity-100 [&_button.active]:border-b [&_button.active]:border-black [&_button]:py-1',
'flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b [&_button.active]:border-black [&_button.active]:opacity-100 [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
className
)}
style={{ gap }}
@@ -102,7 +102,7 @@ export function WidgetButtons({
<DropdownMenuTrigger asChild>
<button
className={cn(
'flex items-center gap-1 select-none',
'flex select-none items-center gap-1',
sizes.current.length - 1 === slice ? hidden : 'opacity-50'
)}
>

4
apps/dashboard/src/components/pagination.tsx
View File

@@ -48,9 +48,9 @@ export function Pagination({
>
{size === 'base' && (
<>
<div className="font-medium text-xs">Page: {cursor + 1}</div>
<div className="text-xs font-medium">Page: {cursor + 1}</div>
{typeof count === 'number' && (
<div className="font-medium text-xs">Total rows: {count}</div>
<div className="text-xs font-medium">Total rows: {count}</div>
)}
</>
)}

18
apps/dashboard/src/components/projects/project-card.tsx
View File

@@ -34,30 +34,30 @@ export async function ProjectCard({
return (
<Link
href={`/${organizationSlug}/${id}`}
className="card p-4 inline-flex flex-col gap-2 hover:-translate-y-1 transition-transform"
className="card inline-flex flex-col gap-2 p-4 transition-transform hover:-translate-y-1"
>
<div className="font-medium">{name}</div>
<div className="aspect-[15/1] -mx-4">
<div className="-mx-4 aspect-[15/1]">
<ChartSSR data={chart.map((d) => ({ ...d, date: new Date(d.date) }))} />
</div>
<div className="flex gap-4 justify-between text-muted-foreground text-sm">
<div className="flex justify-between gap-4 text-sm text-muted-foreground">
<div className="font-medium">Visitors</div>
<div className="flex gap-4">
<div className="flex flex-col md:flex-row gap-2">
<div className="flex flex-col gap-2 md:flex-row">
<div>Total</div>
<span className="text-black font-medium">
<span className="font-medium text-black">
{shortNumber('en')(data?.total)}
</span>
</div>
<div className="flex flex-col md:flex-row gap-2">
<div className="flex flex-col gap-2 md:flex-row">
<div>Month</div>
<span className="text-black font-medium">
<span className="font-medium text-black">
{shortNumber('en')(data?.month)}
</span>
</div>
<div className="flex flex-col md:flex-row gap-2">
<div className="flex flex-col gap-2 md:flex-row">
<div>24h</div>
<span className="text-black font-medium">
<span className="font-medium text-black">
{shortNumber('en')(data?.day)}
</span>
</div>

2
apps/dashboard/src/components/report/PreviousDiffIndicator.tsx
View File

@@ -95,7 +95,7 @@ export function PreviousDiffIndicatorText({
return (
<div
className={cn([
'flex gap-0.5 items-center',
'flex items-center gap-0.5',
getDiffIndicator(
previousIndicatorInverted,
state,

2
apps/dashboard/src/components/report/ReportRange.tsx
View File

@@ -62,7 +62,7 @@ export function ReportRange({
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<div className="p-4 border-b border-border">
<div className="border-b border-border p-4">
<ToggleGroup
value={range}
onValueChange={(value) => {

2
apps/dashboard/src/components/report/chart/ChartAnimation.tsx
View File

@@ -25,7 +25,7 @@ export const ChartAnimationContainer = (
<div
{...props}
className={cn(
'border border-border rounded-md p-8 bg-white',
'rounded-md border border-border bg-white p-8',
props.className
)}
/>

2
apps/dashboard/src/components/report/chart/ChartEmpty.tsx
View File

@@ -22,7 +22,7 @@ export function ChartEmpty() {
return (
<div
className={
'aspect-video w-full max-h-[300px] min-h-[200px] flex justify-center items-center'
'flex aspect-video max-h-[300px] min-h-[200px] w-full items-center justify-center'
}
>
No data

2
apps/dashboard/src/components/report/chart/ChartLoading.tsx
View File

@@ -7,7 +7,7 @@ export function ChartLoading({ className }: ChartLoadingProps) {
return (
<div
className={cn(
'aspect-video w-full bg-slate-200 animate-pulse rounded max-h-[300px] min-h-[200px]',
'aspect-video max-h-[300px] min-h-[200px] w-full animate-pulse rounded bg-slate-200',
className
)}
/>

24
apps/dashboard/src/components/report/chart/MetricCard.tsx
View File

@@ -56,10 +56,10 @@ export function MetricCard({
return (
<div
className="group relative card p-4 overflow-hidden h-24"
className="card group relative h-24 overflow-hidden p-4"
key={serie.name}
>
<div className="absolute inset-0 -left-1 -right-1 z-0 opacity-20 transition-opacity duration-300 group-hover:opacity-50 rounded-md">
<div className="absolute inset-0 -left-1 -right-1 z-0 rounded-md opacity-20 transition-opacity duration-300 group-hover:opacity-50">
<AutoSizer>
{({ width, height }) => (
<AreaChart
@@ -82,21 +82,21 @@ export function MetricCard({
</div>
<div className="relative">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 font-medium text-left min-w-0">
<div className="flex min-w-0 items-center gap-2 text-left font-medium">
<ColorSquare>{serie.event.id}</ColorSquare>
<span className="text-ellipsis overflow-hidden whitespace-nowrap">
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
{serie.name || serie.event.displayName || serie.event.name}
</span>
</div>
{/* <PreviousDiffIndicator {...serie.metrics.previous[metric]} /> */}
</div>
<div className="flex justify-between items-end mt-2">
<div className="text-2xl font-bold text-ellipsis overflow-hidden whitespace-nowrap">
<div className="mt-2 flex items-end justify-between">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{renderValue(serie.metrics[metric], 'ml-1 font-light text-xl')}
</div>
<PreviousDiffIndicatorText
{...serie.metrics.previous[metric]}
className="font-medium text-xs mb-0.5"
className="mb-0.5 text-xs font-medium"
/>
</div>
</div>
@@ -106,8 +106,8 @@ export function MetricCard({
export function MetricCardEmpty() {
return (
<div className="card p-4 h-24">
<div className="flex items-center justify-center h-full text-slate-600">
<div className="card h-24 p-4">
<div className="flex h-full items-center justify-center text-slate-600">
No data
</div>
</div>
@@ -116,9 +116,9 @@ export function MetricCardEmpty() {
export function MetricCardLoading() {
return (
<div className="h-24 p-4 py-5 flex flex-col card">
<div className="bg-slate-200 rounded animate-pulse h-4 w-1/2"></div>
<div className="bg-slate-200 rounded animate-pulse h-6 w-1/5 mt-auto"></div>
<div className="card flex h-24 flex-col p-4 py-5">
<div className="h-4 w-1/2 animate-pulse rounded bg-slate-200"></div>
<div className="mt-auto h-6 w-1/5 animate-pulse rounded bg-slate-200"></div>
</div>
);
}

12
apps/dashboard/src/components/report/chart/ReportBarChart.tsx
View File

@@ -29,8 +29,8 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
return (
<div
className={cn(
'flex flex-col w-full text-xs -mx-2',
editMode && 'text-base card p-4'
'-mx-2 flex w-full flex-col text-xs',
editMode && 'card p-4 text-base'
)}
>
{series.map((serie, index) => {
@@ -39,17 +39,17 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
<div
key={serie.name}
className={cn(
'relative py-3 px-2 flex flex-1 w-full gap-4 items-center even:bg-slate-50 rounded overflow-hidden',
'[&_[role=progressbar]]:even:bg-white [&_[role=progressbar]]:shadow-sm',
'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50',
'[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-white',
isClickable && 'cursor-pointer hover:!bg-slate-100'
)}
{...(isClickable ? { onClick: () => onClick(serie) } : {})}
>
<div className="flex-1 break-all flex items-center gap-2 font-medium">
<div className="flex flex-1 items-center gap-2 break-all font-medium">
<SerieIcon name={serie.name} />
{serie.name}
</div>
<div className="flex-shrink-0 flex w-1/4 gap-4 items-center justify-end">
<div className="flex w-1/4 flex-shrink-0 items-center justify-end gap-4">
<PreviousDiffIndicatorText
{...serie.metrics.previous[metric]}
className="text-xs font-medium"

4
apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
View File

@@ -39,7 +39,7 @@ export function ReportChartTooltip({
const hidden = sorted.slice(limit);
return (
<div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl min-w-[180px]">
<div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
{visible.map((item, index) => {
// If we have a <Cell /> component, payload can be nested
const payload = item.payload.payload ?? item.payload;
@@ -62,7 +62,7 @@ export function ReportChartTooltip({
className="w-[3px] rounded-full"
style={{ background: data.color }}
/>
<div className="flex flex-col flex-1">
<div className="flex flex-1 flex-col">
<div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
{getLabel(data.label)}
</div>

10
apps/dashboard/src/components/report/chart/ReportTable.tsx
View File

@@ -55,8 +55,8 @@ export function ReportTable({
return (
<>
<div className="grid grid-cols-[200px_1fr] border border-border rounded-md overflow-hidden">
<Table className="rounded-none border-t-0 border-l-0 border-b-0">
<div className="grid grid-cols-[200px_1fr] overflow-hidden rounded-md border border-border">
<Table className="rounded-none border-b-0 border-l-0 border-t-0">
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
@@ -88,7 +88,7 @@ export function ReportTable({
/>
<Tooltip delayDuration={200}>
<TooltipTrigger asChild>
<div className="min-w-0 overflow-hidden whitespace-nowrap text-ellipsis">
<div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
{getLabel(serie.name)}
</div>
</TooltipTrigger>
@@ -157,8 +157,8 @@ export function ReportTable({
</Table>
</div>
</div>
<div className="flex flex-col-reverse gap-4 md:flex-row md:justify-between md:items-center">
<div className="flex gap-1 flex-wrap">
<div className="flex flex-col-reverse gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex flex-wrap gap-1">
<Badge>Total: {number.format(data.metrics.sum)}</Badge>
<Badge>Average: {number.format(data.metrics.average)}</Badge>
<Badge>Min: {number.format(data.metrics.min)}</Badge>

2
apps/dashboard/src/components/report/chart/ResponsiveContainer.tsx
View File

@@ -17,7 +17,7 @@ export function ResponsiveContainer({ children }: ResponsiveContainerProps) {
maxHeight,
minHeight,
}}
className={cn('max-sm:-mx-3 aspect-video w-full', editMode && 'card p-4')}
className={cn('aspect-video w-full max-sm:-mx-3', editMode && 'card p-4')}
>
<AutoSizer disableHeight>
{({ width }) =>

2
apps/dashboard/src/components/report/chart/SerieIcon.flags.tsx
View File

@@ -4,7 +4,7 @@ const createFlagIcon = (url: string) => {
return function (_props: LucideProps) {
return (
<span
className={`rounded-[2px] overflow-hidden !block !leading-[1rem] fi fi-${url}`}
className={`fi !block overflow-hidden rounded-[2px] !leading-[1rem] fi-${url}`}
></span>
);
} as LucideIcon;

4
apps/dashboard/src/components/report/chart/SerieIcon.tsx
View File

@@ -29,7 +29,7 @@ function getProxyImage(url: string) {
const createImageIcon = (url: string) => {
return function (_props: LucideProps) {
return <img className="h-4 object-contain rounded-[2px]" src={url} />;
return <img className="h-4 rounded-[2px] object-contain" src={url} />;
} as LucideIcon;
};
@@ -81,7 +81,7 @@ export function SerieIcon({ name, ...props }: SerieIconProps) {
}, [name]);
return Icon ? (
<div className="h-4 flex-shrink-0 relative [&_a]:![&_a]:!h-4 [&_svg]:!rounded-[2px]">
<div className="[&_a]:![&_a]:!h-4 relative h-4 flex-shrink-0 [&_svg]:!rounded-[2px]">
<Icon size={16} {...props} />
</div>
) : null;

26
apps/dashboard/src/components/report/funnel/Funnel.tsx
View File

@@ -94,7 +94,7 @@ export function FunnelSteps({
return (
<CarouselItem
className={cn(
'flex-[0_0_250px] max-w-full p-0 px-1',
'max-w-full flex-[0_0_250px] p-0 px-1',
editMode && 'flex-[0_0_320px]'
)}
key={step.event.id}
@@ -106,13 +106,13 @@ export function FunnelSteps({
{step.event.displayName || step.event.name}
</h3>
</div>
<div className="aspect-square relative">
<div className="relative aspect-square">
<FunnelChart from={step.prevPercent} to={step.percent} />
<div className="absolute top-0 left-0 right-0 p-4 flex flex-col bg-white/40">
<div className="uppercase font-medium text-muted-foreground">
<div className="absolute left-0 right-0 top-0 flex flex-col bg-white/40 p-4">
<div className="font-medium uppercase text-muted-foreground">
Sessions
</div>
<div className="uppercase text-3xl font-bold flex items-center">
<div className="flex items-center text-3xl font-bold uppercase">
<span className="text-muted-foreground">
{step.before}
</span>
@@ -130,34 +130,34 @@ export function FunnelSteps({
</div>
</div>
{finalStep ? (
<div className={cn('p-4 flex flex-col items-center')}>
<div className="uppercase text-xs font-medium">
<div className={cn('flex flex-col items-center p-4')}>
<div className="text-xs font-medium uppercase">
Conversion
</div>
<div
className={cn(
'uppercase text-3xl font-bold',
'text-3xl font-bold uppercase',
getDropoffColor(step.dropoff.percent)
)}
>
{round(step.percent, 1)}%
</div>
<div className="uppercase text-sm mt-0 font-medium text-muted-foreground">
<div className="mt-0 text-sm font-medium uppercase text-muted-foreground">
Converted {step.current} of {totalSessions} sessions
</div>
</div>
) : (
<div className={cn('p-4 flex flex-col items-center')}>
<div className="uppercase text-xs font-medium">Dropoff</div>
<div className={cn('flex flex-col items-center p-4')}>
<div className="text-xs font-medium uppercase">Dropoff</div>
<div
className={cn(
'uppercase text-3xl font-bold',
'text-3xl font-bold uppercase',
getDropoffColor(step.dropoff.percent)
)}
>
{round(step.dropoff.percent, 1)}%
</div>
<div className="uppercase text-sm mt-0 font-medium text-muted-foreground">
<div className="mt-0 text-sm font-medium uppercase text-muted-foreground">
Lost {step.dropoff.count} sessions
</div>
</div>

2
apps/dashboard/src/components/report/sidebar/EventPropertiesCombobox.tsx
View File

@@ -51,7 +51,7 @@ export function EventPropertiesCombobox({
>
<button
className={cn(
'flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs',
'flex items-center gap-1 rounded-md border border-border p-1 px-2 text-xs font-medium leading-none',
!event.property && 'border-destructive text-destructive'
)}
>

4
apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
View File

@@ -135,7 +135,7 @@ export function ReportEvents() {
]}
label="Segment"
>
<button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs bg-white">
<button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
{event.segment === 'user' ? (
<>
<Users size={12} /> Unique users
@@ -203,7 +203,7 @@ export function ReportEvents() {
/>
</div>
<label
className="flex items-center gap-2 cursor-pointer select-none text-sm font-medium mt-4"
className="mt-4 flex cursor-pointer select-none items-center gap-2 text-sm font-medium"
htmlFor="previous"
>
<Checkbox

2
apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
View File

@@ -54,7 +54,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
);
}}
>
<button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs bg-white">
<button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
<FilterIcon size={12} /> Add filter
</button>
</Combobox>

2
apps/dashboard/src/components/ui/alert.tsx
View File

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
{
variants: {
variant: {

2
apps/dashboard/src/components/ui/badge.tsx
View File

@@ -6,7 +6,7 @@ import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
const badgeVariants = cva(
'inline-flex items-center rounded-full border px-1.5 h-[20px] text-[10px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
'inline-flex h-[20px] items-center rounded-full border px-1.5 text-[10px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
{
variants: {
variant: {

4
apps/dashboard/src/components/ui/button.tsx
View File

@@ -9,7 +9,7 @@ import type { LucideIcon } from 'lucide-react';
import { Loader2 } from 'lucide-react';
const buttonVariants = cva(
'flex-shrink-0 inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
'inline-flex flex-shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
@@ -75,7 +75,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{Icon && (
<Icon
className={cn(
'h-4 w-4 mr-2 flex-shrink-0',
'mr-2 h-4 w-4 flex-shrink-0',
responsive && 'mr-0 sm:mr-2',
loading && 'animate-spin'
)}

2
apps/dashboard/src/components/ui/checkbox.tsx
View File

@@ -30,7 +30,7 @@ const CheckboxInput = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>((props, ref) => (
<label className="cursor-pointer flex items-center select-none border border-border rounded-md px-3 gap-4 min-h-10">
<label className="flex min-h-10 cursor-pointer select-none items-center gap-4 rounded-md border border-border px-3">
<Checkbox ref={ref} {...props} />
<div className="text-sm font-medium">{props.children}</div>
</label>

4
apps/dashboard/src/components/ui/combobox-advanced.tsx
View File

@@ -63,7 +63,7 @@ export function ComboboxAdvanced({
: [...value, item.value]
);
}}
className={'cursor-pointer flex items-center gap-2'}
className={'flex cursor-pointer items-center gap-2'}
>
<Checkbox checked={checked} className="pointer-events-none" />
{item?.label ?? item?.value}
@@ -84,7 +84,7 @@ export function ComboboxAdvanced({
onClick={() => setOpen((prev) => !prev)}
className={className}
>
<div className="flex gap-1 flex-wrap w-full">
<div className="flex w-full flex-wrap gap-1">
{value.length === 0 && placeholder}
{value.map((value) => {
const item = items.find((item) => item.value === value) ?? {

2
apps/dashboard/src/components/ui/combobox.tsx
View File

@@ -117,7 +117,7 @@ export function Combobox<T extends string>({
) : (
<CommandEmpty>Nothing selected</CommandEmpty>
)}
<div className="max-h-[300px] overflow-y-auto over-x-hidden">
<div className="over-x-hidden max-h-[300px] overflow-y-auto">
<CommandGroup>
{items.map((item) => (
<CommandItem

2
apps/dashboard/src/components/ui/dialog.tsx
View File

@@ -77,7 +77,7 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col-reverse sm:flex-row sm:justify-end gap-2',
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
className
)}
{...props}

4
apps/dashboard/src/components/ui/gradient-background.tsx
View File

@@ -13,12 +13,12 @@ export function GradientBackground({
return (
<div
className={cn(
'bg-gradient-to-tr from-slate-100 to-white rounded-md',
'rounded-md bg-gradient-to-tr from-slate-100 to-white',
className
)}
{...props}
>
<div className="p-4 flex flex-col gap-4">{children}</div>
<div className="flex flex-col gap-4 p-4">{children}</div>
</div>
);
}

6
apps/dashboard/src/components/ui/key-value.tsx
View File

@@ -15,15 +15,15 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
return (
<Component
className={cn(
'group overflow-hidden flex border border-border rounded-md text-xs divide-x font-medium self-start min-w-0 max-w-full transition-transform',
'group flex min-w-0 max-w-full divide-x self-start overflow-hidden rounded-md border border-border text-xs font-medium transition-transform',
clickable && 'hover:-translate-y-0.5'
)}
{...{ href, onClick }}
>
<div className="p-1 px-2 bg-black/5">{name}</div>
<div className="bg-black/5 p-1 px-2">{name}</div>
<div
className={cn(
'p-1 px-2 font-mono text-blue-700 bg-white whitespace-nowrap overflow-hidden text-ellipsis shadow-[inset_0_0_0_1px_#fff]',
'overflow-hidden text-ellipsis whitespace-nowrap bg-white p-1 px-2 font-mono text-blue-700 shadow-[inset_0_0_0_1px_#fff]',
clickable && 'group-hover:underline'
)}
>

2
apps/dashboard/src/components/ui/label.tsx
View File

@@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
const labelVariants = cva(
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 block mb-2'
'mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
);
const Label = React.forwardRef<

27
apps/dashboard/src/components/ui/radio-group.tsx
View File

@@ -1,8 +1,7 @@
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"
import { cn } from "@/utils/cn"
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import { Circle } from 'lucide-react';
const RadioGroup = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -10,13 +9,13 @@ const RadioGroup = React.forwardRef<
>(({ className, ...props }, ref) => {
return (
<RadioGroupPrimitive.Root
className={cn("grid gap-2", className)}
className={cn('grid gap-2', className)}
{...props}
ref={ref}
/>
)
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
);
});
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
const RadioGroupItem = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -26,7 +25,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
{...props}
@@ -35,8 +34,8 @@ const RadioGroupItem = React.forwardRef<
<Circle className="h-2.5 w-2.5 fill-current text-current" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
)
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
);
});
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
export { RadioGroup, RadioGroupItem }
export { RadioGroup, RadioGroupItem };

6
apps/dashboard/src/components/ui/sheet.tsx
View File

@@ -31,16 +31,16 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
'flex flex-col max-sm:w-[calc(100%-theme(spacing.8))] overflow-y-auto fixed z-50 gap-4 bg-background p-6 rounded-lg shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
'fixed z-50 flex flex-col gap-4 overflow-y-auto rounded-lg bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out max-sm:w-[calc(100%-theme(spacing.8))]',
{
variants: {
side: {
top: 'inset-x-4 top-4 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
bottom:
'inset-x-4 bottom-4 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
left: 'top-4 bottom-4 left-4 w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
left: 'bottom-4 left-4 top-4 w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
right:
'top-4 bottom-4 right-4 w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
'bottom-4 right-4 top-4 w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
},
},
defaultVariants: {

4
apps/dashboard/src/components/ui/table.tsx
View File

@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
'px-4 h-10 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 shadow-[0_0_0_0.5px] shadow-border',
'h-10 px-4 text-left align-middle font-medium text-muted-foreground shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
className
)}
{...props}
@@ -90,7 +90,7 @@ const TableCell = React.forwardRef<
<td
ref={ref}
className={cn(
'px-4 h-12 align-middle [&:has([role=checkbox])]:pr-0 shadow-[0_0_0_0.5px] shadow-border whitespace-nowrap',
'h-12 whitespace-nowrap px-4 align-middle shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
className
)}
{...props}

4
apps/dashboard/src/components/widget-table.tsx
View File

@@ -10,7 +10,7 @@ interface Props<T> {
export function WidgetTable<T>({ columns, data, keyExtractor }: Props<T>) {
return (
<table className="w-full">
<thead className="bg-slate-50 border-b border-border text-slate-500 [&_th]:font-medium text-sm [&_th]:p-4 [&_th]:py-2 [&_th]:text-left [&_th:last-child]:text-right [&_th]:whitespace-nowrap">
<thead className="border-b border-border bg-slate-50 text-sm text-slate-500 [&_th:last-child]:text-right [&_th]:whitespace-nowrap [&_th]:p-4 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium">
<tr>
{columns.map((column) => (
<th key={column.name}>{column.name}</th>
@@ -21,7 +21,7 @@ export function WidgetTable<T>({ columns, data, keyExtractor }: Props<T>) {
{data.map((item) => (
<tr
key={keyExtractor(item)}
className="text-sm border-b border-border last:border-0 [&_td]:p-4 [&_td:first-child]:text-left text-right"
className="border-b border-border text-right text-sm last:border-0 [&_td:first-child]:text-left [&_td]:p-4"
>
{columns.map((column) => (
<td key={column.name}>{column.render(item)}</td>

2
apps/dashboard/src/components/widget.tsx
View File

@@ -8,7 +8,7 @@ export function WidgetHead({ children, className }: WidgetHeadProps) {
return (
<div
className={cn(
'p-4 border-b border-border [&_.title]:font-medium [&_.title]:whitespace-nowrap',
'border-b border-border p-4 [&_.title]:whitespace-nowrap [&_.title]:font-medium',
className
)}
>

7
apps/dashboard/src/middleware.ts
View File

@@ -4,7 +4,12 @@ import { authMiddleware } from '@clerk/nextjs';
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
export default authMiddleware({
publicRoutes: ['/share/overview/:id', '/api/trpc(.*)', '/api/clerk/(.*)?'],
publicRoutes: [
'/share/overview/:id',
'/api/trpc(.*)',
'/api/clerk/(.*)?',
'/monitoring',
],
});
export const config = {

4
apps/dashboard/src/modals/AddClient.tsx
View File

@@ -77,7 +77,7 @@ export default function AddClient() {
<>
<ModalHeader title="Success" text={'Your client is created'} />
<CreateClientSuccess {...mutation.data} />
<div className="flex gap-4 mt-4">
<div className="mt-4 flex gap-4">
<a
className={cn(buttonVariants({ variant: 'secondary' }), 'flex-1')}
href="https://docs.openpanel.dev/docs"
@@ -150,7 +150,7 @@ export default function AddClient() {
/>
</TabsContent>
<TabsContent value="other">
<div className="p-2 px-3 bg-white rounded text-sm">
<div className="rounded bg-white p-2 px-3 text-sm">
🔑 You will get a secret to use for your API requests.
</div>
</TabsContent>

4
apps/dashboard/src/modals/Modal/Container.tsx
View File

@@ -25,9 +25,9 @@ interface ModalHeaderProps {
export function ModalHeader({ title, text, onClose }: ModalHeaderProps) {
return (
<div className="flex justify-between mb-6">
<div className="mb-6 flex justify-between">
<div>
<div className="font-medium mt-0.5">{title}</div>
<div className="mt-0.5 font-medium">{title}</div>
{!!text && <div className="text-sm text-muted-foreground">{text}</div>}
</div>
{onClose !== false && (

2
apps/dashboard/src/modals/ShareOverviewModal.tsx
View File

@@ -63,7 +63,7 @@ export default function ShareOverviewModal() {
render={({ field }) => (
<label
htmlFor="public"
className="flex items-center gap-2 text-sm font-medium leading-none mb-4"
className="mb-4 flex items-center gap-2 text-sm font-medium leading-none"
>
<Checkbox
id="public"

4
apps/dashboard/src/modals/index.tsx
View File

@@ -9,7 +9,7 @@ import { useOnClickOutside } from 'usehooks-ts';
import type { ConfirmProps } from './Confirm';
const Loading = () => (
<div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto bg-backdrop">
<div className="bg-backdrop fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto">
<Loader className="mb-8 animate-spin" size={40} />
</div>
);
@@ -162,7 +162,7 @@ export function ModalProvider() {
return (
<>
{!!state.length && (
<div className="fixed top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.2)] z-50"></div>
<div className="fixed bottom-0 left-0 right-0 top-0 z-50 bg-[rgba(0,0,0,0.2)]"></div>
)}
{state.map((item, index) => {
const Modal = modals[item.name];