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>