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

migrate to app dir and ssr

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-01-20 22:54:38 +01:00
parent 719a82f1c4
commit 308ae98472
194 changed files with 4706 additions and 2194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/Card.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import {
DropdownMenu,
DropdownMenuContent,
@@ -17,7 +19,7 @@ export function Card({ children, hover, className }: CardProps) {
return (
<div
className={cn(
'border border-border rounded relative',
'border border-border rounded relative bg-white',
hover && 'transition-all hover:shadow hover:border-black',
className
)}

2
apps/web/src/components/Content.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import { cn } from '@/utils/cn';
interface ContentHeaderProps {

2
apps/web/src/components/DataTable.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import {
flexRender,
getCoreRowModel,

8
apps/web/src/components/Logo.tsx Normal file
View File

@@ -0,0 +1,8 @@
export function Logo() {
return (
<div className="text-xl flex gap-2 items-center">
<img src="/logo.svg" className="w-8 rounded-lg" />
<span className="relative -top-0.5">openpanel</span>
</div>
);
}

4
apps/web/src/components/Pagination.tsx
View File

@@ -12,6 +12,7 @@ export function usePagination(take = 100) {
take,
canPrev: skip > 0,
canNext: true,
page: skip / take + 1,
}),
[skip, setSkip, take]
);
@@ -21,7 +22,8 @@ export type PaginationProps = ReturnType<typeof usePagination>;
export function Pagination(props: PaginationProps) {
return (
<div className="flex select-none items-center justify-end space-x-2 py-4">
<div className="flex select-none items-center justify-end gap-2">
<div className="font-medium text-xs">Page: {props.page}</div>
<Button
variant="outline"
size="sm"

2
apps/web/src/components/Syntax.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import ts from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript';
import docco from 'react-syntax-highlighter/dist/cjs/styles/hljs/docco';

43
apps/web/src/components/Widget.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { cn } from '@/utils/cn';
interface WidgetHeadProps {
children: React.ReactNode;
className?: string;
}
export function WidgetHead({ children, className }: WidgetHeadProps) {
return (
<div
className={cn(
'p-4 border-b border-border [&_.title]:font-medium',
className
)}
>
{children}
</div>
);
}
interface WidgetBodyProps {
children: React.ReactNode;
className?: string;
}
export function WidgetBody({ children, className }: WidgetBodyProps) {
return <div className={cn('p-4', className)}>{children}</div>;
}
interface WidgetProps {
children: React.ReactNode;
className?: string;
}
export function Widget({ children, className }: WidgetProps) {
return (
<div
className={cn(
'border border-border rounded-md bg-white self-start',
className
)}
>
{children}
</div>
);
}

15
apps/web/src/components/clients/ClientActions.tsx
View File

@@ -1,9 +1,11 @@
import { useRefetchActive } from '@/hooks/useRefetchActive';
'use client';
import { api } from '@/app/_trpc/client';
import { pushModal, showConfirm } from '@/modals';
import type { IClientWithProject } from '@/types';
import { api } from '@/utils/api';
import { clipboard } from '@/utils/clipboard';
import { MoreHorizontal } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { Button } from '../ui/button';
import {
@@ -16,15 +18,16 @@ import {
} from '../ui/dropdown-menu';
import { toast } from '../ui/use-toast';
export function ClientActions({ id }: IClientWithProject) {
const refetch = useRefetchActive();
export function ClientActions(client: IClientWithProject) {
const { id } = client;
const router = useRouter();
const deletion = api.client.remove.useMutation({
onSuccess() {
toast({
title: 'Success',
description: 'Client revoked, incoming requests will be rejected.',
});
refetch();
router.refresh();
},
});
return (
@@ -42,7 +45,7 @@ export function ClientActions({ id }: IClientWithProject) {
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
pushModal('EditClient', { id });
pushModal('EditClient', client);
}}
>
Edit

95
apps/web/src/components/events/EventsTable.tsx
View File

@@ -1,95 +0,0 @@
import { useMemo } from 'react';
import { DataTable } from '@/components/DataTable';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import type { RouterOutputs } from '@/utils/api';
import { formatDateTime } from '@/utils/date';
import { toDots } from '@/utils/object';
import { AvatarImage } from '@radix-ui/react-avatar';
import { createColumnHelper } from '@tanstack/react-table';
import Link from 'next/link';
const columnHelper =
createColumnHelper<RouterOutputs['event']['list'][number]>();
interface EventsTableProps {
data: RouterOutputs['event']['list'];
}
export function EventsTable({ data }: EventsTableProps) {
const params = useOrganizationParams();
const columns = useMemo(() => {
return [
columnHelper.accessor((row) => row.createdAt, {
id: 'createdAt',
header: () => 'Created At',
cell(info) {
return formatDateTime(info.getValue());
},
footer: () => 'Created At',
}),
columnHelper.accessor((row) => row.name, {
id: 'event',
header: () => 'Event',
cell(info) {
return <span className="font-medium">{info.getValue()}</span>;
},
footer: () => 'Created At',
}),
columnHelper.accessor((row) => row.profile, {
id: 'profile',
header: () => 'Profile',
cell(info) {
const profile = info.getValue();
return (
<Link
shallow
href={`/${params.organization}/${params.project}/profiles/${profile?.id}`}
className="flex items-center gap-2"
>
<Avatar className="h-6 w-6">
{profile?.avatar && <AvatarImage src={profile.avatar} />}
<AvatarFallback className="text-xs">
{profile?.first_name?.at(0)}
</AvatarFallback>
</Avatar>
{`${profile?.first_name} ${profile?.last_name ?? ''}`}
</Link>
);
},
footer: () => 'Created At',
}),
columnHelper.accessor((row) => row.properties, {
id: 'properties',
header: () => 'Properties',
cell(info) {
const dots = toDots(info.getValue() as Record<string, any>);
return (
<Table className="mini">
<TableBody>
{Object.keys(dots).map((key) => {
return (
<TableRow key={key}>
<TableCell className="font-medium">{key}</TableCell>
<TableCell>
{typeof dots[key] === 'boolean'
? dots[key]
? 'true'
: 'false'
: dots[key]}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
},
footer: () => 'Created At',
}),
];
}, [params]);
return <DataTable data={data} columns={columns} />;
}

35
apps/web/src/components/events/ListProperties.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { toDots } from '@/utils/object';
import { Table, TableBody, TableCell, TableRow } from '../ui/table';
interface ListPropertiesProps {
data: any;
className?: string;
}
export function ListProperties({
data,
className = 'mini',
}: ListPropertiesProps) {
const dots = toDots(data);
return (
<Table className={className}>
<TableBody>
{Object.keys(dots).map((key) => {
return (
<TableRow key={key}>
<TableCell className="font-medium">{key}</TableCell>
<TableCell>
{typeof dots[key] === 'boolean'
? dots[key]
? 'true'
: 'false'
: dots[key]}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
}

14
apps/web/src/components/forms/InputWithLabel.tsx
View File

@@ -6,15 +6,23 @@ import { Label } from '../ui/label';
type InputWithLabelProps = InputProps & {
label: string;
error?: string | undefined;
};
export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
({ label, className, ...props }, ref) => {
return (
<div className={className}>
<Label htmlFor={label} className="block mb-2">
{label}
</Label>
<div className="block mb-2 flex justify-between">
<Label className="mb-0" htmlFor={label}>
{label}
</Label>
{props.error && (
<span className="text-sm text-destructive leading-none">
{props.error}
</span>
)}
</div>
<Input ref={ref} id={label} {...props} />
</div>
);

54
apps/web/src/components/general/ExpandableListItem.tsx Normal file
View File

@@ -0,0 +1,54 @@
import React, { useState } from 'react';
import { cn } from '@/utils/cn';
import { ChevronUp } from 'lucide-react';
import AnimateHeight from 'react-animate-height';
import { Button } from '../ui/button';
interface ExpandableListItemProps {
children: React.ReactNode;
bullets: React.ReactNode[];
title: string;
image?: React.ReactNode;
initialOpen?: boolean;
}
export function ExpandableListItem({
title,
bullets,
image,
initialOpen = false,
children,
}: ExpandableListItemProps) {
const [open, setOpen] = useState(initialOpen ?? false);
return (
<div className="bg-white shadow rounded-xl overflow-hidden">
<div className="p-3 sm:p-6 flex gap-4 items-start">
<div className="flex gap-1">{image}</div>
<div className="flex flex-col flex-1 gap-1 min-w-0">
<span className="text-lg font-medium leading-none mb-1">{title}</span>
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-sm text-muted-foreground">
{bullets.map((bullet) => (
<span key={bullet}>{bullet}</span>
))}
</div>
</div>
<Button
variant="secondary"
size="icon"
onClick={() => setOpen((p) => !p)}
>
<ChevronUp
size={20}
className={cn(
'transition-transform',
open ? 'rotate-180' : 'rotate-0'
)}
/>
</Button>
</div>
<AnimateHeight duration={200} height={open ? 'auto' : 0}>
<div className="border-t border-border">{children}</div>
</AnimateHeight>
</div>
);
}

52
apps/web/src/components/layouts/MainLayout.tsx
View File

@@ -1,52 +0,0 @@
import { useState } from 'react';
import { cn } from '@/utils/cn';
import { MenuIcon } from 'lucide-react';
import Link from 'next/link';
import { Container } from '../Container';
import { Breadcrumbs } from '../navbar/Breadcrumbs';
import { NavbarMenu } from '../navbar/NavbarMenu';
interface MainLayoutProps {
children: React.ReactNode;
className?: string;
}
export function MainLayout({ children, className }: MainLayoutProps) {
const [visible, setVisible] = useState(false);
return (
<>
<div className="h-2 w-full bg-gradient-to-r from-blue-900 to-purple-600"></div>
<nav className="border-b border-border">
<Container className="flex h-20 items-center justify-between ">
<Link shallow href="/" className="text-3xl">
mixan
</Link>
<div
className={cn(
'flex items-center gap-8 z-50',
visible === false && 'max-sm:hidden',
visible === true &&
'max-sm:flex max-sm:flex-col max-sm:absolute max-sm:inset-0 max-sm:bg-white max-sm:justify-center max-sm:top-4 max-sm:shadow-lg'
)}
>
<NavbarMenu />
</div>
<button
className={cn(
'px-4 sm:hidden absolute z-50 top-9 right-4 transition-all',
visible === true && 'rotate-90'
)}
onClick={() => {
setVisible((p) => !p);
}}
>
<MenuIcon />
</button>
</Container>
</nav>
<Breadcrumbs />
<main className={cn(className, 'mb-8')}>{children}</main>
</>
);
}

55
apps/web/src/components/layouts/SettingsLayout.tsx
View File

@@ -1,55 +0,0 @@
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { cn } from '@/utils/cn';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Container } from '../Container';
import { PageTitle } from '../PageTitle';
import { Sidebar, WithSidebar } from '../WithSidebar';
import { MainLayout } from './MainLayout';
interface SettingsLayoutProps {
children: React.ReactNode;
className?: string;
}
export function SettingsLayout({ children, className }: SettingsLayoutProps) {
const params = useOrganizationParams();
const pathname = usePathname();
const links = [
{
href: `/${params.organization}/settings/organization`,
label: 'Organization',
},
{ href: `/${params.organization}/settings/projects`, label: 'Projects' },
{ href: `/${params.organization}/settings/clients`, label: 'Clients' },
{ href: `/${params.organization}/settings/profile`, label: 'Profile' },
];
return (
<MainLayout>
<Container>
<PageTitle>Settings</PageTitle>
<WithSidebar>
<Sidebar>
{links.map(({ href, label }) => (
<Link
shallow
key={href}
href={href}
className={cn(
'p-4 py-3 leading-none rounded-lg transition-colors',
pathname.startsWith(href)
? 'bg-slate-100'
: 'hover:bg-slate-100'
)}
>
{label}
</Link>
))}
</Sidebar>
<div className={cn('flex flex-col', className)}>{children}</div>
</WithSidebar>
</Container>
</MainLayout>
);
}

20
apps/web/src/components/navbar/Breadcrumbs.tsx
View File

@@ -1,5 +1,5 @@
import { api } from '@/app/_trpc/client';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { api } from '@/utils/api';
import { ChevronRight, HomeIcon } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
@@ -11,30 +11,30 @@ export function Breadcrumbs() {
const org = api.organization.get.useQuery(
{
slug: params.organization,
id: params.organizationId,
},
{
enabled: !!params.organization,
enabled: !!params.organizationId,
staleTime: Infinity,
}
);
const pro = api.project.get.useQuery(
{
slug: params.project,
id: params.projectId,
},
{
enabled: !!params.project,
enabled: !!params.projectId,
staleTime: Infinity,
}
);
const dashboard = api.dashboard.get.useQuery(
{
slug: params.dashboard,
id: params.dashboardId,
},
{
enabled: !!params.dashboard,
enabled: !!params.dashboardId,
staleTime: Infinity,
}
);
@@ -48,7 +48,7 @@ export function Breadcrumbs() {
{org.data && (
<>
<HomeIcon size={14} />
<Link shallow href={`/${org.data.slug}`}>
<Link shallow href={`/${org.data.id}`}>
{org.data.name}
</Link>
</>
@@ -57,7 +57,7 @@ export function Breadcrumbs() {
{org.data && pro.data && (
<>
<ChevronRight size={10} />
<Link shallow href={`/${org.data.slug}/${pro.data.slug}`}>
<Link shallow href={`/${org.data.id}/${pro.data.id}`}>
{pro.data.name}
</Link>
</>
@@ -68,7 +68,7 @@ export function Breadcrumbs() {
<ChevronRight size={10} />
<Link
shallow
href={`/${org.data.slug}/${pro.data.slug}/${dashboard.data.slug}`}
href={`/${org.data.id}/${pro.data.id}/${dashboard.data.id}`}
>
{dashboard.data.name}
</Link>

2
apps/web/src/components/navbar/NavbarCreate.tsx
View File

@@ -25,7 +25,7 @@ export function NavbarCreate() {
<DropdownMenuItem asChild>
<Link
shallow
href={`/${params.organization}/${params.project}/reports`}
href={`/${params.organizationId}/${params.projectId}/reports`}
>
<LineChart className="mr-2 h-4 w-4" />
<span>Create a report</span>

18
apps/web/src/components/navbar/NavbarMenu.tsx
View File

@@ -26,27 +26,27 @@ export function NavbarMenu() {
const params = useOrganizationParams();
return (
<div className={cn('flex gap-1 items-center text-sm', 'max-sm:flex-col')}>
{params.project && (
<Item href={`/${params.organization}/${params.project}`}>
{params.projectId && (
<Item href={`/${params.organizationId}/${params.projectId}`}>
Dashboards
</Item>
)}
{params.project && (
<Item href={`/${params.organization}/${params.project}/events`}>
{params.projectId && (
<Item href={`/${params.organizationId}/${params.projectId}/events`}>
Events
</Item>
)}
{params.project && (
<Item href={`/${params.organization}/${params.project}/profiles`}>
{params.projectId && (
<Item href={`/${params.organizationId}/${params.projectId}/profiles`}>
Profiles
</Item>
)}
{params.project && (
{params.projectId && (
<Item
href={{
pathname: `/${params.organization}/${params.project}/reports`,
pathname: `/${params.organizationId}/${params.projectId}/reports`,
query: strip({
dashboard: params.dashboard,
dashboardId: params.dashboardId,
}),
}}
>

8
apps/web/src/components/navbar/NavbarUserDropdown.tsx
View File

@@ -28,7 +28,7 @@ export function NavbarUserDropdown() {
<DropdownMenuGroup>
<DropdownMenuItem asChild className="cursor-pointer">
<Link
href={`/${params.organization}/settings/organization`}
href={`/${params.organizationId}/settings/organization`}
shallow
>
<User className="mr-2 h-4 w-4" />
@@ -36,19 +36,19 @@ export function NavbarUserDropdown() {
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="cursor-pointer">
<Link href={`/${params.organization}/settings/projects`} shallow>
<Link href={`/${params.organizationId}/settings/projects`} shallow>
<User className="mr-2 h-4 w-4" />
Projects
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="cursor-pointer">
<Link href={`/${params.organization}/settings/clients`} shallow>
<Link href={`/${params.organizationId}/settings/clients`} shallow>
<User className="mr-2 h-4 w-4" />
Clients
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="cursor-pointer">
<Link href={`/${params.organization}/settings/profile`} shallow>
<Link href={`/${params.organizationId}/settings/profile`} shallow>
<User className="mr-2 h-4 w-4" />
Profile
</Link>

53
apps/web/src/components/profiles/ProfileAvatar.tsx Normal file
View File

@@ -0,0 +1,53 @@
'use client';
import type { IServiceProfile } from '@/server/services/profile.service';
import { cn } from '@/utils/cn';
import { AvatarImage } from '@radix-ui/react-avatar';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { Avatar, AvatarFallback } from '../ui/avatar';
interface ProfileAvatarProps
extends VariantProps<typeof variants>,
Partial<Pick<IServiceProfile, 'avatar' | 'first_name'>> {
className?: string;
}
const variants = cva('', {
variants: {
size: {
default: 'h-12 w-12 rounded-xl [&>span]:rounded-xl',
sm: 'h-6 w-6 rounded [&>span]:rounded',
xs: 'h-4 w-4 rounded [&>span]:rounded',
},
},
defaultVariants: {
size: 'default',
},
});
export function ProfileAvatar({
avatar,
first_name,
className,
size,
}: ProfileAvatarProps) {
return (
<Avatar className={cn(variants({ className, size }), className)}>
{avatar && <AvatarImage src={avatar} />}
<AvatarFallback
className={cn(
size === 'sm'
? 'text-xs'
: size === 'xs'
? 'text-[8px]'
: 'text-base',
'bg-slate-200 text-slate-800'
)}
>
{first_name?.at(0) ?? '🫣'}
</AvatarFallback>
</Avatar>
);
}

15
apps/web/src/components/projects/ProjectActions.tsx
View File

@@ -1,9 +1,11 @@
import { useRefetchActive } from '@/hooks/useRefetchActive';
'use client';
import { api } from '@/app/_trpc/client';
import { pushModal, showConfirm } from '@/modals';
import type { IProject } from '@/types';
import { api } from '@/utils/api';
import { clipboard } from '@/utils/clipboard';
import { MoreHorizontal } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { Button } from '../ui/button';
import {
@@ -16,15 +18,16 @@ import {
} from '../ui/dropdown-menu';
import { toast } from '../ui/use-toast';
export function ProjectActions({ id }: IProject) {
const refetch = useRefetchActive();
export function ProjectActions(project: IProject) {
const { id } = project;
const router = useRouter();
const deletion = api.project.remove.useMutation({
onSuccess() {
toast({
title: 'Success',
description: 'Project deleted successfully.',
});
refetch();
router.refresh();
},
});
@@ -43,7 +46,7 @@ export function ProjectActions({ id }: IProject) {
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
pushModal('EditProject', { id });
pushModal('EditProject', project);
}}
>
Edit

2
apps/web/src/components/projects/table.tsx
View File

@@ -1,3 +1,4 @@
import { IServiceProject } from '@/server/services/project.service';
import { formatDate } from '@/utils/date';
import type { ColumnDef } from '@tanstack/react-table';
@@ -6,7 +7,6 @@ import type { Project as IProject } from '@mixan/db';
import { ProjectActions } from './ProjectActions';
export type Project = IProject;
export const columns: ColumnDef<Project>[] = [
{
accessorKey: 'name',

14
apps/web/src/components/report/ReportChartType.tsx
View File

@@ -1,23 +1,27 @@
import { useDispatch, useSelector } from '@/redux';
import type { IChartType } from '@/types';
import { chartTypes } from '@/utils/constants';
import { objectToZodEnums } from '@/utils/validation';
import { Combobox } from '../ui/combobox';
import { changeChartType } from './reportSlice';
export function ReportChartType() {
interface ReportChartTypeProps {
className?: string;
}
export function ReportChartType({ className }: ReportChartTypeProps) {
const dispatch = useDispatch();
const type = useSelector((state) => state.report.chartType);
return (
<Combobox
className={className}
placeholder="Chart type"
onChange={(value) => {
dispatch(changeChartType(value as IChartType));
dispatch(changeChartType(value));
}}
value={type}
items={Object.entries(chartTypes).map(([key, value]) => ({
label: value,
items={objectToZodEnums(chartTypes).map((key) => ({
label: chartTypes[key],
value: key,
}))}
/>

14
apps/web/src/components/report/ReportInterval.tsx
View File

@@ -1,21 +1,28 @@
import { useDispatch, useSelector } from '@/redux';
import type { IInterval } from '@/types';
import { isMinuteIntervalEnabledByRange } from '@/utils/constants';
import {
isHourIntervalEnabledByRange,
isMinuteIntervalEnabledByRange,
} from '@/utils/constants';
import { Combobox } from '../ui/combobox';
import { changeInterval } from './reportSlice';
export function ReportInterval() {
interface ReportIntervalProps {
className?: string;
}
export function ReportInterval({ className }: ReportIntervalProps) {
const dispatch = useDispatch();
const interval = useSelector((state) => state.report.interval);
const range = useSelector((state) => state.report.range);
const chartType = useSelector((state) => state.report.chartType);
if (chartType !== 'linear') {
if (chartType !== 'linear' && chartType !== 'histogram') {
return null;
}
return (
<Combobox
className={className}
placeholder="Interval"
onChange={(value) => {
dispatch(changeInterval(value as IInterval));
@@ -30,6 +37,7 @@ export function ReportInterval() {
{
value: 'hour',
label: 'Hour',
disabled: !isHourIntervalEnabledByRange(range),
},
{
value: 'day',

34
apps/web/src/components/report/ReportLineType.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { useDispatch, useSelector } from '@/redux';
import { lineTypes } from '@/utils/constants';
import { objectToZodEnums } from '@/utils/validation';
import { Combobox } from '../ui/combobox';
import { changeLineType } from './reportSlice';
interface ReportLineTypeProps {
className?: string;
}
export function ReportLineType({ className }: ReportLineTypeProps) {
const dispatch = useDispatch();
const chartType = useSelector((state) => state.report.chartType);
const type = useSelector((state) => state.report.lineType);
if (chartType != 'linear' && chartType != 'area') {
return null;
}
return (
<Combobox
className={className}
placeholder="Line type"
onChange={(value) => {
dispatch(changeLineType(value));
}}
value={type}
items={objectToZodEnums(lineTypes).map((key) => ({
label: lineTypes[key],
value: key,
}))}
/>
);
}

17
apps/web/src/components/report/ReportSaveButton.tsx
View File

@@ -1,15 +1,20 @@
'use client';
import { api, handleError } from '@/app/_trpc/client';
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/use-toast';
import { pushModal } from '@/modals';
import { useDispatch, useSelector } from '@/redux';
import { api, handleError } from '@/utils/api';
import { SaveIcon } from 'lucide-react';
import { useParams } from 'next/navigation';
import { useReportId } from './hooks/useReportId';
import { resetDirty } from './reportSlice';
export function ReportSaveButton() {
const { reportId } = useReportId();
interface ReportSaveButtonProps {
className?: string;
}
export function ReportSaveButton({ className }: ReportSaveButtonProps) {
const { reportId } = useParams();
const dispatch = useDispatch();
const update = api.report.update.useMutation({
onSuccess() {
@@ -26,11 +31,12 @@ export function ReportSaveButton() {
if (reportId) {
return (
<Button
className={className}
disabled={!report.dirty}
loading={update.isLoading}
onClick={() => {
update.mutate({
reportId,
reportId: reportId as string,
report,
});
}}
@@ -42,6 +48,7 @@ export function ReportSaveButton() {
} else {
return (
<Button
className={className}
disabled={!report.dirty}
onClick={() => {
pushModal('SaveReport', {

5
apps/web/src/components/report/chart/ChartAnimation.tsx
View File

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

2
apps/web/src/components/report/chart/LazyChart.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import React, { useEffect, useRef } from 'react';
import { useInViewport } from 'react-in-viewport';

104
apps/web/src/components/report/chart/ReportAreaChart.tsx Normal file
View File

@@ -0,0 +1,104 @@
import type { IChartData } from '@/app/_trpc/client';
import { AutoSizer } from '@/components/AutoSizer';
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
import { useRechartDataModel } from '@/hooks/useRechartDataModel';
import { useVisibleSeries } from '@/hooks/useVisibleSeries';
import type { IChartLineType, IInterval } from '@/types';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
import {
Area,
AreaChart,
CartesianGrid,
Tooltip,
XAxis,
YAxis,
} from 'recharts';
import { getYAxisWidth } from './chart-utils';
import { useChartContext } from './ChartProvider';
import { ReportChartTooltip } from './ReportChartTooltip';
import { ReportTable } from './ReportTable';
interface ReportAreaChartProps {
data: IChartData;
interval: IInterval;
lineType: IChartLineType;
}
export function ReportAreaChart({
lineType,
interval,
data,
}: ReportAreaChartProps) {
const { editMode } = useChartContext();
const { series, setVisibleSeries } = useVisibleSeries(data);
const formatDate = useFormatDateInterval(interval);
const rechartData = useRechartDataModel(data);
return (
<>
<div
className={cn(
'max-sm:-mx-3',
editMode && 'border border-border bg-white rounded-md p-4'
)}
>
<AutoSizer disableHeight>
{({ width }) => (
<AreaChart
width={width}
height={Math.min(Math.max(width * 0.5, 250), 400)}
data={rechartData}
>
<Tooltip content={<ReportChartTooltip />} />
<XAxis
axisLine={false}
fontSize={12}
dataKey="date"
tickFormatter={(m: string) => formatDate(m)}
tickLine={false}
allowDuplicatedCategory={false}
/>
<YAxis
width={getYAxisWidth(data.metrics.max)}
fontSize={12}
axisLine={false}
tickLine={false}
allowDecimals={false}
/>
{series.map((serie) => {
return (
<Area
key={serie.name}
type={lineType}
isAnimationActive={false}
strokeWidth={0}
dataKey={`${serie.index}:count`}
stroke={getChartColor(serie.index)}
fill={getChartColor(serie.index)}
stackId={'1'}
fillOpacity={1}
/>
);
})}
<CartesianGrid
strokeDasharray="3 3"
horizontal={true}
vertical={false}
/>
</AreaChart>
)}
</AutoSizer>
</div>
{editMode && (
<ReportTable
data={data}
visibleSeries={series}
setVisibleSeries={setVisibleSeries}
/>
)}
</>
);
}

34
apps/web/src/components/report/chart/ReportBarChart.tsx
View File

@@ -1,4 +1,5 @@
import { useMemo, useState } from 'react';
import type { IChartData, RouterOutputs } from '@/app/_trpc/client';
import { ColorSquare } from '@/components/ColorSquare';
import {
Table,
@@ -8,8 +9,6 @@ import {
TableHeader,
TableRow,
} from '@/components/ui/table';
import type { IChartData } from '@/types';
import type { RouterOutputs } from '@/utils/api';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
import {
@@ -36,6 +35,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
const { editMode } = useChartContext();
const [ref, { width }] = useElementSize();
const [sorting, setSorting] = useState<SortingState>([]);
const maxCount = Math.max(...data.series.map((serie) => serie.metrics.sum));
const table = useReactTable({
data: useMemo(
() => (editMode ? data.series : data.series.slice(0, 20)),
@@ -57,7 +57,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
footer: (info) => info.column.id,
size: width ? width * 0.3 : undefined,
}),
columnHelper.accessor((row) => row.metrics.total, {
columnHelper.accessor((row) => row.metrics.sum, {
id: 'totalCount',
cell: (info) => (
<div className="text-right font-medium">{info.getValue()}</div>
@@ -67,15 +67,13 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
size: width ? width * 0.1 : undefined,
enableSorting: true,
}),
columnHelper.accessor((row) => row.metrics.total, {
columnHelper.accessor((row) => row.metrics.sum, {
id: 'graph',
cell: (info) => (
<div
className="shine h-4 rounded [.mini_&]:h-3"
style={{
width:
(info.getValue() / info.row.original.meta.highest) * 100 +
'%',
width: (info.getValue() / maxCount) * 100 + '%',
background: getChartColor(info.row.index),
}}
/>
@@ -93,30 +91,10 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
getCoreRowModel: getCoreRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
// debugTable: true,
// debugHeaders: true,
// debugColumns: true,
});
return (
<div ref={ref}>
{editMode && (
<div className="mb-8 flex flex-wrap gap-4">
{data.events.map((event) => {
return (
<div className="border border-border p-4" key={event.id}>
<div className="flex items-center gap-2 text-lg font-medium">
<ColorSquare>{event.id}</ColorSquare> {event.name}
</div>
<div className="mt-6 font-mono text-5xl font-light">
{new Intl.NumberFormat('en-IN', {
maximumSignificantDigits: 20,
}).format(event.count)}
</div>
</div>
);
})}
</div>
)}
<div className="overflow-x-auto">
<Table
{...{

43
apps/web/src/components/report/chart/ReportLineChartTooltip.tsx → apps/web/src/components/report/chart/ReportChartTooltip.tsx
View File

@@ -2,19 +2,19 @@ import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
import { useMappings } from '@/hooks/useMappings';
import { useSelector } from '@/redux';
import type { IToolTipProps } from '@/types';
import { alphabetIds } from '@/utils/constants';
type ReportLineChartTooltipProps = IToolTipProps<{
color: string;
value: number;
dataKey: string;
payload: {
date: Date;
count: number;
label: string;
color: string;
} & Record<string, any>;
}>;
export function ReportLineChartTooltip({
export function ReportChartTooltip({
active,
payload,
}: ReportLineChartTooltipProps) {
@@ -34,31 +34,32 @@ export function ReportLineChartTooltip({
const sorted = payload.slice(0).sort((a, b) => b.value - a.value);
const visible = sorted.slice(0, limit);
const hidden = sorted.slice(limit);
const first = visible[0]!;
const isBarChart = first.payload.count === undefined;
return (
<div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
{formatDate(new Date(first.payload.date))}
{visible.map((item, index) => {
const id = alphabetIds[index];
// If we have a <Cell /> component, payload can be nested
const payload = item.payload.payload ?? item.payload;
const data = item.dataKey.includes(':')
? payload[`${item.dataKey.split(':')[0]}:payload`]
: payload;
return (
<div key={item.payload.label} className="flex gap-2">
<div
className="w-[3px] rounded-full"
style={{ background: item.color }}
></div>
<div className="flex flex-col">
<div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
{isBarChart
? item.payload[`${id}:label`]
: getLabel(item.payload.label)}
</div>
<div>
{isBarChart ? item.payload[`${id}:count`] : item.payload.count}
<>
{index === 0 && data.date ? formatDate(new Date(data.date)) : null}
<div key={item.payload.label} className="flex gap-2">
<div
className="w-[3px] rounded-full"
style={{ background: data.color }}
/>
<div className="flex flex-col">
<div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
{getLabel(data.label)}
</div>
<div>{data.count}</div>
</div>
</div>
</div>
</>
);
})}
{hidden.length > 0 && (

98
apps/web/src/components/report/chart/ReportHistogramChart.tsx
View File

@@ -1,13 +1,16 @@
import { useEffect, useRef, useState } from 'react';
import type { IChartData } from '@/app/_trpc/client';
import { AutoSizer } from '@/components/AutoSizer';
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
import type { IChartData, IInterval } from '@/types';
import { alphabetIds } from '@/utils/constants';
import { getChartColor } from '@/utils/theme';
import { useRechartDataModel } from '@/hooks/useRechartDataModel';
import { useVisibleSeries } from '@/hooks/useVisibleSeries';
import type { IInterval } from '@/types';
import { cn } from '@/utils/cn';
import { getChartColor, theme } from '@/utils/theme';
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
import { getYAxisWidth } from './chart-utils';
import { useChartContext } from './ChartProvider';
import { ReportLineChartTooltip } from './ReportLineChartTooltip';
import { ReportChartTooltip } from './ReportChartTooltip';
import { ReportTable } from './ReportTable';
interface ReportHistogramChartProps {
@@ -15,80 +18,61 @@ interface ReportHistogramChartProps {
interval: IInterval;
}
function BarHover(props: any) {
const bg = theme?.colors?.slate?.['200'] as string;
return <rect {...props} rx="8" fill={bg} fill-opacity={0.5} />;
}
export function ReportHistogramChart({
interval,
data,
}: ReportHistogramChartProps) {
const { editMode } = useChartContext();
const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
const formatDate = useFormatDateInterval(interval);
const { series, setVisibleSeries } = useVisibleSeries(data);
const ref = useRef(false);
useEffect(() => {
if (!ref.current && data) {
const max = 20;
setVisibleSeries(
data?.series?.slice(0, max).map((serie) => serie.name) ?? []
);
// ref.current = true;
}
}, [data]);
const rel = data.series[0]?.data.map(({ date }) => {
return {
date,
...data.series.reduce((acc, serie, idx) => {
return {
...acc,
...serie.data.reduce(
(acc2, item) => {
const id = alphabetIds[idx];
if (item.date === date) {
acc2[`${id}:count`] = item.count;
acc2[`${id}:label`] = item.label;
}
return acc2;
},
{} as Record<string, any>
),
};
}, {}),
};
});
const rechartData = useRechartDataModel(data);
return (
<>
<div className="max-sm:-mx-3">
<div
className={cn(
'max-sm:-mx-3',
editMode && 'border border-border bg-white rounded-md p-4'
)}
>
<AutoSizer disableHeight>
{({ width }) => (
<BarChart
width={width}
height={Math.min(Math.max(width * 0.5, 250), 400)}
data={rel}
data={rechartData}
>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip content={<ReportLineChartTooltip />} />
<CartesianGrid strokeDasharray="3 3" vertical={false} />
<Tooltip content={<ReportChartTooltip />} cursor={<BarHover />} />
<XAxis
fontSize={12}
dataKey="date"
tickFormatter={formatDate}
tickLine={false}
axisLine={false}
/>
{data.series.map((serie, index) => {
const id = alphabetIds[index];
<YAxis
fontSize={12}
axisLine={false}
tickLine={false}
width={getYAxisWidth(data.metrics.max)}
/>
{series.map((serie) => {
return (
<>
<YAxis dataKey={`${id}:count`} fontSize={12}></YAxis>
<Bar
stackId={id}
key={serie.name}
isAnimationActive={false}
name={serie.name}
dataKey={`${id}:count`}
fill={getChartColor(index)}
/>
</>
<Bar
stackId={serie.index}
key={serie.name}
name={serie.name}
dataKey={`${serie.index}:count`}
fill={getChartColor(serie.index)}
radius={8}
/>
);
})}
</BarChart>
@@ -98,7 +82,7 @@ export function ReportHistogramChart({
{editMode && (
<ReportTable
data={data}
visibleSeries={visibleSeries}
visibleSeries={series}
setVisibleSeries={setVisibleSeries}
/>
)}

98
apps/web/src/components/report/chart/ReportLineChart.tsx
View File

@@ -1,7 +1,11 @@
import { useEffect, useRef, useState } from 'react';
import type { IChartData } from '@/app/_trpc/client';
import { AutoSizer } from '@/components/AutoSizer';
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
import type { IChartData, IInterval } from '@/types';
import { useRechartDataModel } from '@/hooks/useRechartDataModel';
import { useVisibleSeries } from '@/hooks/useVisibleSeries';
import type { IChartLineType, IInterval } from '@/types';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
import {
CartesianGrid,
@@ -12,76 +16,76 @@ import {
YAxis,
} from 'recharts';
import { getYAxisWidth } from './chart-utils';
import { useChartContext } from './ChartProvider';
import { ReportLineChartTooltip } from './ReportLineChartTooltip';
import { ReportChartTooltip } from './ReportChartTooltip';
import { ReportTable } from './ReportTable';
interface ReportLineChartProps {
data: IChartData;
interval: IInterval;
lineType: IChartLineType;
}
export function ReportLineChart({ interval, data }: ReportLineChartProps) {
export function ReportLineChart({
lineType,
interval,
data,
}: ReportLineChartProps) {
const { editMode } = useChartContext();
const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
const formatDate = useFormatDateInterval(interval);
const ref = useRef(false);
useEffect(() => {
if (!ref.current && data) {
const max = 20;
setVisibleSeries(
data?.series?.slice(0, max).map((serie) => serie.name) ?? []
);
// ref.current = true;
}
}, [data]);
const { series, setVisibleSeries } = useVisibleSeries(data);
const rechartData = useRechartDataModel(data);
return (
<>
<div className="max-sm:-mx-3">
<div
className={cn(
'max-sm:-mx-3',
editMode && 'border border-border bg-white rounded-md p-4'
)}
>
<AutoSizer disableHeight>
{({ width }) => (
<LineChart
width={width}
height={Math.min(Math.max(width * 0.5, 250), 400)}
data={rechartData}
>
<YAxis dataKey={'count'} fontSize={12}></YAxis>
<Tooltip content={<ReportLineChartTooltip />} />
<CartesianGrid strokeDasharray="3 3" />
<CartesianGrid
strokeDasharray="3 3"
horizontal={true}
vertical={false}
/>
<YAxis
width={getYAxisWidth(data.metrics.max)}
fontSize={12}
axisLine={false}
tickLine={false}
allowDecimals={false}
/>
<Tooltip content={<ReportChartTooltip />} />
<XAxis
axisLine={false}
fontSize={12}
dataKey="date"
tickFormatter={(m: string) => {
return formatDate(m);
}}
tickFormatter={(m: string) => formatDate(m)}
tickLine={false}
allowDuplicatedCategory={false}
/>
{data?.series
.filter((serie) => {
return visibleSeries.includes(serie.name);
})
.map((serie) => {
const realIndex = data?.series.findIndex(
(item) => item.name === serie.name
);
const key = serie.name;
const strokeColor = getChartColor(realIndex);
return (
<Line
type="monotone"
key={key}
isAnimationActive={false}
strokeWidth={2}
dataKey="count"
stroke={strokeColor}
data={serie.data}
name={serie.name}
/>
);
})}
{series.map((serie) => {
return (
<Line
type={lineType}
key={serie.name}
isAnimationActive={false}
strokeWidth={2}
dataKey={`${serie.index}:count`}
stroke={getChartColor(serie.index)}
name={serie.name}
/>
);
})}
</LineChart>
)}
</AutoSizer>
@@ -89,7 +93,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
{editMode && (
<ReportTable
data={data}
visibleSeries={visibleSeries}
visibleSeries={series}
setVisibleSeries={setVisibleSeries}
/>
)}

79
apps/web/src/components/report/chart/ReportMetricChart.tsx Normal file
View File

@@ -0,0 +1,79 @@
import type { IChartData } from '@/app/_trpc/client';
import { ColorSquare } from '@/components/ColorSquare';
import { useVisibleSeries } from '@/hooks/useVisibleSeries';
import { cn } from '@/utils/cn';
import { theme } from '@/utils/theme';
import AutoSizer from 'react-virtualized-auto-sizer';
import { Area, AreaChart } from 'recharts';
import { useChartContext } from './ChartProvider';
interface ReportMetricChartProps {
data: IChartData;
}
export function ReportMetricChart({ data }: ReportMetricChartProps) {
const { editMode } = useChartContext();
const { series } = useVisibleSeries(data, editMode ? undefined : 2);
const color = theme?.colors['chart-0'];
return (
<div
className={cn(
'grid grid-cols-1 gap-4',
editMode && 'md:grid-cols-2 lg:grid-cols-3'
)}
>
{series.map((serie) => {
return (
<div
className="relative border border-border p-4 rounded-md bg-white overflow-hidden"
key={serie.name}
>
<div className="absolute -top-1 -left-1 -right-1 -bottom-1 z-0 opacity-50">
<AutoSizer>
{({ width, height }) => (
<AreaChart
width={width}
height={height / 3}
data={serie.data}
style={{ marginTop: (height / 3) * 2 }}
>
<defs>
<linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.3} />
<stop
offset="95%"
stopColor={color}
stopOpacity={0.1}
/>
</linearGradient>
</defs>
<Area
dataKey="count"
type="monotone"
fill="url(#area)"
fillOpacity={1}
stroke={color}
strokeWidth={2}
/>
</AreaChart>
)}
</AutoSizer>
</div>
<div className="relative">
<div className="flex items-center gap-2 text-lg font-medium">
<ColorSquare>{serie.event.id}</ColorSquare>
{serie.name ?? serie.event.displayName ?? serie.event.name}
</div>
<div className="mt-6 font-mono text-4xl font-light">
{new Intl.NumberFormat('en', {
maximumSignificantDigits: 20,
}).format(serie.metrics.sum)}
</div>
</div>
</div>
);
})}
</div>
);
}

81
apps/web/src/components/report/chart/ReportPieChart.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { useEffect, useRef, useState } from 'react';
import type { IChartData } from '@/app/_trpc/client';
import { AutoSizer } from '@/components/AutoSizer';
import { useVisibleSeries } from '@/hooks/useVisibleSeries';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
import { Cell, Pie, PieChart, Tooltip } from 'recharts';
import { useChartContext } from './ChartProvider';
import { ReportChartTooltip } from './ReportChartTooltip';
import { ReportTable } from './ReportTable';
interface ReportPieChartProps {
data: IChartData;
}
export function ReportPieChart({ data }: ReportPieChartProps) {
const { editMode } = useChartContext();
const { series, setVisibleSeries } = useVisibleSeries(data);
// Get max 10 series and than combine others into one
const pieData = series.map((serie) => {
return {
id: serie.name,
color: getChartColor(serie.index),
index: serie.index,
label: serie.name,
count: serie.metrics.sum,
};
});
return (
<>
<div
className={cn(
'max-sm:-mx-3',
editMode && 'border border-border bg-white rounded-md p-4'
)}
>
<AutoSizer disableHeight>
{({ width }) => {
const height = Math.min(Math.max(width * 0.5, 250), 400);
return (
<PieChart
width={width}
height={Math.min(Math.max(width * 0.5, 250), 400)}
>
<Tooltip content={<ReportChartTooltip />} />
<Pie
dataKey={'count'}
data={pieData}
innerRadius={height / 4}
outerRadius={height / 2 - 20}
isAnimationActive={false}
>
{pieData.map((item) => {
return (
<Cell
key={item.id}
strokeWidth={2}
stroke={item.color}
fill={item.color}
/>
);
})}
</Pie>
</PieChart>
);
}}
</AutoSizer>
</div>
{editMode && (
<ReportTable
data={data}
visibleSeries={series}
setVisibleSeries={setVisibleSeries}
/>
)}
</>
);
}

71
apps/web/src/components/report/chart/ReportTable.tsx
View File

@@ -1,15 +1,20 @@
import * as React from 'react';
import type { IChartData } from '@/app/_trpc/client';
import { Checkbox } from '@/components/ui/checkbox';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
import { useMappings } from '@/hooks/useMappings';
import { useSelector } from '@/redux';
import type { IChartData } from '@/types';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
interface ReportTableProps {
data: IChartData;
visibleSeries: string[];
visibleSeries: IChartData['series'];
setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
}
@@ -40,31 +45,23 @@ export function ReportTable({
'bg-gray-50 text-emerald-600 font-medium border-r border-border';
return (
<>
<div className="flex w-fit max-w-full rounded-md border border-border">
<div className="flex w-fit max-w-full rounded-md border border-border bg-white">
{/* Labels */}
<div className="border-r border-border">
<div className={cn(header, row, cell)}>Name</div>
{/* <div
className={cn(
'flex max-w-[200px] w-full min-w-full items-center gap-2',
row,
cell
)}
>
<div className="font-medium min-w-0 overflow-scroll whitespace-nowrap scrollbar-hide">
Summary
</div>
</div> */}
{data.series.map((serie, index) => {
const checked = visibleSeries.includes(serie.name);
const checked = !!visibleSeries.find(
(item) => item.name === serie.name
);
return (
<div
key={serie.name}
className={cn(
'flex max-w-[200px] w-full min-w-full items-center gap-2',
'flex max-w-[200px] lg:max-w-[400px] xl:max-w-[600px] w-full min-w-full items-center gap-2',
row,
cell
// avoid using cell since its better on the right side
'p-2'
)}
>
<Checkbox
@@ -81,12 +78,16 @@ export function ReportTable({
}
checked={checked}
/>
<div
title={getLabel(serie.name)}
className="min-w-full overflow-scroll whitespace-nowrap scrollbar-hide"
>
{getLabel(serie.name)}
</div>
<Tooltip delayDuration={200}>
<TooltipTrigger asChild>
<div className="min-w-0 overflow-hidden whitespace-nowrap text-ellipsis">
{getLabel(serie.name)}
</div>
</TooltipTrigger>
<TooltipContent>
<p>{getLabel(serie.name)}</p>
</TooltipContent>
</Tooltip>
</div>
);
})}
@@ -113,7 +114,7 @@ export function ReportTable({
return (
<div className={cn('w-max', row)} key={serie.name}>
<div className={cn(header, value, cell, total)}>
{serie.metrics.total}
{serie.metrics.sum}
</div>
<div className={cn(header, value, cell, total)}>
{serie.metrics.average}
@@ -130,14 +131,22 @@ export function ReportTable({
})}
</div>
</div>
<div className="flex gap-2">
<div>Total</div>
<div>
{data.series.reduce((acc, serie) => serie.metrics.total + acc, 0)}
<div className="flex gap-4">
<div className="flex gap-1">
<div>Total</div>
<div>{data.metrics.sum}</div>
</div>
<div>Average</div>
<div>
{data.series.reduce((acc, serie) => serie.metrics.average + acc, 0)}
<div className="flex gap-1">
<div>Average</div>
<div>{data.metrics.averge}</div>
</div>
<div className="flex gap-1">
<div>Min</div>
<div>{data.metrics.min}</div>
</div>
<div className="flex gap-1">
<div>Max</div>
<div>{data.metrics.max}</div>
</div>
</div>
</>

5
apps/web/src/components/report/chart/chart-utils.ts Normal file
View File

@@ -0,0 +1,5 @@
import { round } from '@/utils/math';
export function getYAxisWidth(value: number) {
return round(value, 0).toString().length * 7.5 + 7.5;
}

42
apps/web/src/components/report/chart/index.tsx
View File

@@ -1,13 +1,18 @@
'use client';
import { memo } from 'react';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { api } from '@/app/_trpc/client';
import { useAppParams } from '@/hooks/useAppParams';
import type { IChartInput } from '@/types';
import { api } from '@/utils/api';
import { ChartAnimation, ChartAnimationContainer } from './ChartAnimation';
import { withChartProivder } from './ChartProvider';
import { ReportAreaChart } from './ReportAreaChart';
import { ReportBarChart } from './ReportBarChart';
import { ReportHistogramChart } from './ReportHistogramChart';
import { ReportLineChart } from './ReportLineChart';
import { ReportMetricChart } from './ReportMetricChart';
import { ReportPieChart } from './ReportPieChart';
export type ReportChartProps = IChartInput;
@@ -19,8 +24,9 @@ export const Chart = memo(
chartType,
name,
range,
lineType,
}: ReportChartProps) {
const params = useOrganizationParams();
const params = useAppParams();
const hasEmptyFilters = events.some((event) =>
event.filters.some((filter) => filter.value.length === 0)
);
@@ -29,13 +35,15 @@ export const Chart = memo(
{
interval,
chartType,
// dont send lineType since it does not need to be sent
lineType: 'monotone',
events,
breakdowns,
name,
range,
startDate: null,
endDate: null,
projectSlug: params.project,
projectId: params.projectId,
},
{
keepPreviousData: false,
@@ -97,8 +105,32 @@ export const Chart = memo(
return <ReportBarChart data={chart.data} />;
}
if (chartType === 'metric') {
return <ReportMetricChart data={chart.data} />;
}
if (chartType === 'pie') {
return <ReportPieChart data={chart.data} />;
}
if (chartType === 'linear') {
return <ReportLineChart interval={interval} data={chart.data} />;
return (
<ReportLineChart
lineType={lineType}
interval={interval}
data={chart.data}
/>
);
}
if (chartType === 'area') {
return (
<ReportAreaChart
lineType={lineType}
interval={interval}
data={chart.data}
/>
);
}
return (

9
apps/web/src/components/report/hooks/useReportId.ts
View File

@@ -1,9 +0,0 @@
import { useQueryParams } from '@/hooks/useQueryParams';
import { z } from 'zod';
export const useReportId = () =>
useQueryParams(
z.object({
reportId: z.string().optional(),
})
);

43
apps/web/src/components/report/reportSlice.ts
View File

@@ -2,25 +2,34 @@ import type {
IChartBreakdown,
IChartEvent,
IChartInput,
IChartLineType,
IChartRange,
IChartType,
IInterval,
} from '@/types';
import { alphabetIds, isMinuteIntervalEnabledByRange } from '@/utils/constants';
import {
alphabetIds,
getDefaultIntervalByRange,
isHourIntervalEnabledByRange,
isMinuteIntervalEnabledByRange,
} from '@/utils/constants';
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
type InitialState = IChartInput & {
dirty: boolean;
ready: boolean;
startDate: string | null;
endDate: string | null;
};
// First approach: define the initial state using that type
const initialState: InitialState = {
ready: false,
dirty: false,
name: 'Untitled',
chartType: 'linear',
lineType: 'monotone',
interval: 'day',
breakdowns: [],
events: [],
@@ -42,12 +51,19 @@ export const reportSlice = createSlice({
reset() {
return initialState;
},
ready() {
return {
...initialState,
ready: true,
};
},
setReport(state, action: PayloadAction<IChartInput>) {
return {
...action.payload,
startDate: null,
endDate: null,
dirty: false,
ready: true,
};
},
setName(state, action: PayloadAction<string>) {
@@ -132,6 +148,19 @@ export const reportSlice = createSlice({
) {
state.interval = 'hour';
}
if (
!isHourIntervalEnabledByRange(state.range) &&
state.interval === 'hour'
) {
state.interval = 'day';
}
},
// Line type
changeLineType: (state, action: PayloadAction<IChartLineType>) => {
state.dirty = true;
state.lineType = action.payload;
},
// Date range
@@ -149,15 +178,7 @@ export const reportSlice = createSlice({
changeDateRanges: (state, action: PayloadAction<IChartRange>) => {
state.dirty = true;
state.range = action.payload;
if (action.payload === '30min' || action.payload === '1h') {
state.interval = 'minute';
} else if (action.payload === 'today' || action.payload === '24h') {
state.interval = 'hour';
} else if (action.payload === '7d' || action.payload === '14d') {
state.interval = 'day';
} else {
state.interval = 'month';
}
state.interval = getDefaultIntervalByRange(action.payload);
},
},
});
@@ -165,6 +186,7 @@ export const reportSlice = createSlice({
// Action creators are generated for each case reducer function
export const {
reset,
ready,
setReport,
setName,
addEvent,
@@ -176,6 +198,7 @@ export const {
changeInterval,
changeDateRanges,
changeChartType,
changeLineType,
resetDirty,
} = reportSlice.actions;

13
apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
View File

@@ -1,20 +1,22 @@
'use client';
import { api } from '@/app/_trpc/client';
import { ColorSquare } from '@/components/ColorSquare';
import { Combobox } from '@/components/ui/combobox';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useDispatch, useSelector } from '@/redux';
import type { IChartBreakdown } from '@/types';
import { api } from '@/utils/api';
import { useParams } from 'next/navigation';
import { addBreakdown, changeBreakdown, removeBreakdown } from '../reportSlice';
import { ReportBreakdownMore } from './ReportBreakdownMore';
import type { ReportEventMoreProps } from './ReportEventMore';
export function ReportBreakdowns() {
const params = useOrganizationParams();
const params = useParams();
const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
const dispatch = useDispatch();
const propertiesQuery = api.chart.properties.useQuery({
projectSlug: params.project,
projectId: params.projectId as string,
});
const propertiesCombobox = (propertiesQuery.data ?? []).map((item) => ({
value: item,
@@ -43,6 +45,8 @@ export function ReportBreakdowns() {
<div className="flex items-center gap-2 p-2 px-4">
<ColorSquare>{index}</ColorSquare>
<Combobox
className="flex-1"
searchable
value={item.name}
onChange={(value) => {
dispatch(
@@ -63,6 +67,7 @@ export function ReportBreakdowns() {
{selectedBreakdowns.length === 0 && (
<Combobox
searchable
value={''}
onChange={(value) => {
dispatch(

19
apps/web/src/components/report/sidebar/ReportEventFilters.tsx
View File

@@ -1,9 +1,9 @@
import type { Dispatch } from 'react';
import { api } from '@/app/_trpc/client';
import { ColorSquare } from '@/components/ColorSquare';
import { Dropdown } from '@/components/Dropdown';
import { Button } from '@/components/ui/button';
import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
import { ComboboxMulti } from '@/components/ui/combobox-multi';
import {
CommandDialog,
CommandEmpty,
@@ -15,16 +15,15 @@ import {
} from '@/components/ui/command';
import { RenderDots } from '@/components/ui/RenderDots';
import { useMappings } from '@/hooks/useMappings';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useDispatch, useSelector } from '@/redux';
import { useDispatch } from '@/redux';
import type {
IChartEvent,
IChartEventFilter,
IChartEventFilterValue,
} from '@/types';
import { api } from '@/utils/api';
import { operators } from '@/utils/constants';
import { CreditCard, SlidersHorizontal, Trash } from 'lucide-react';
import { useParams } from 'next/navigation';
import { changeEvent } from '../reportSlice';
@@ -39,12 +38,12 @@ export function ReportEventFilters({
isCreating,
setIsCreating,
}: ReportEventFiltersProps) {
const params = useOrganizationParams();
const params = useParams();
const dispatch = useDispatch();
const propertiesQuery = api.chart.properties.useQuery(
{
event: event.name,
projectSlug: params.project,
projectId: params.projectId as string,
},
{
enabled: !!event.name,
@@ -103,13 +102,13 @@ interface FilterProps {
}
function Filter({ filter, event }: FilterProps) {
const params = useOrganizationParams();
const params = useParams<{ organizationId: string; projectId: string }>();
const getLabel = useMappings();
const dispatch = useDispatch();
const potentialValues = api.chart.values.useQuery({
event: event.name,
property: filter.name,
projectSlug: params.project,
projectId: params?.projectId!,
});
const valuesCombobox =
@@ -196,8 +195,8 @@ function Filter({ filter, event }: FilterProps) {
</Dropdown>
<ComboboxAdvanced
items={valuesCombobox}
selected={filter.value}
setSelected={(setFn) => {
value={filter.value}
onChange={(setFn) => {
changeFilterValue(
typeof setFn === 'function' ? setFn(filter.value) : setFn
);

12
apps/web/src/components/report/sidebar/ReportEvents.tsx
View File

@@ -1,14 +1,16 @@
'use client';
import { useState } from 'react';
import { api } from '@/app/_trpc/client';
import { ColorSquare } from '@/components/ColorSquare';
import { Dropdown } from '@/components/Dropdown';
import { Combobox } from '@/components/ui/combobox';
import { Input } from '@/components/ui/input';
import { useDebounceFn } from '@/hooks/useDebounceFn';
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
import { useDispatch, useSelector } from '@/redux';
import type { IChartEvent } from '@/types';
import { api } from '@/utils/api';
import { Filter, GanttChart, Users } from 'lucide-react';
import { useParams } from 'next/navigation';
import { addEvent, changeEvent, removeEvent } from '../reportSlice';
import { ReportEventFilters } from './ReportEventFilters';
@@ -19,9 +21,9 @@ export function ReportEvents() {
const [isCreating, setIsCreating] = useState(false);
const selectedEvents = useSelector((state) => state.report.events);
const dispatch = useDispatch();
const params = useOrganizationParams();
const params = useParams();
const eventsQuery = api.chart.events.useQuery({
projectSlug: params.project,
projectId: String(params.projectId),
});
const eventsCombobox = (eventsQuery.data ?? []).map((item) => ({
value: item.name,
@@ -56,6 +58,8 @@ export function ReportEvents() {
<div className="flex items-center gap-2 p-2">
<ColorSquare>{event.id}</ColorSquare>
<Combobox
className="flex-1"
searchable
value={event.name}
onChange={(value) => {
dispatch(

2
apps/web/src/components/ui/RenderDots.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import { cn } from '@/utils/cn';
import { Asterisk, ChevronRight } from 'lucide-react';

2
apps/web/src/components/ui/alert-dialog.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { buttonVariants } from '@/components/ui/button';
import { cn } from '@/utils/cn';

59
apps/web/src/components/ui/alert.tsx Normal file
View File

@@ -0,0 +1,59 @@
import * as React from 'react';
import { cn } from '@/utils/cn';
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',
{
variants: {
variant: {
default: 'bg-background text-foreground',
destructive:
'border-destructive text-destructive dark:border-destructive [&>svg]:text-destructive',
},
},
defaultVariants: {
variant: 'default',
},
}
);
const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
));
Alert.displayName = 'Alert';
const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn('mb-1 font-medium leading-none tracking-tight', className)}
{...props}
/>
));
AlertTitle.displayName = 'AlertTitle';
const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('text-sm [&_p]:leading-relaxed', className)}
{...props}
/>
));
AlertDescription.displayName = 'AlertDescription';
export { Alert, AlertTitle, AlertDescription };

2
apps/web/src/components/ui/aspect-ratio.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
const AspectRatio = AspectRatioPrimitive.Root;

2
apps/web/src/components/ui/avatar.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as AvatarPrimitive from '@radix-ui/react-avatar';

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

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import { cva } from 'class-variance-authority';

5
apps/web/src/components/ui/button.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import { Slot } from '@radix-ui/react-slot';
@@ -7,11 +9,12 @@ import type { LucideIcon } from 'lucide-react';
import { Loader2 } from 'lucide-react';
const buttonVariants = cva(
'inline-flex items-center justify-center 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',
'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',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
cta: 'bg-blue-600 text-primary-foreground hover:bg-blue-500',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:

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

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';

44
apps/web/src/components/ui/combobox-advanced.tsx
View File

@@ -1,6 +1,9 @@
'use client';
import * as React from 'react';
import { Badge } from '@/components/ui/badge';
import { Command, CommandGroup, CommandItem } from '@/components/ui/command';
import { useOnClickOutside } from 'usehooks-ts';
import { Checkbox } from './checkbox';
import { Input } from './input';
@@ -9,23 +12,25 @@ type IValue = any;
type IItem = Record<'value' | 'label', IValue>;
interface ComboboxAdvancedProps {
selected: IValue[];
setSelected: React.Dispatch<React.SetStateAction<IValue[]>>;
value: IValue[];
onChange: React.Dispatch<React.SetStateAction<IValue[]>>;
items: IItem[];
placeholder: string;
}
export function ComboboxAdvanced({
items,
selected,
setSelected,
value,
onChange,
placeholder,
}: ComboboxAdvancedProps) {
const [open, setOpen] = React.useState(false);
const [inputValue, setInputValue] = React.useState('');
const ref = React.useRef<HTMLDivElement | null>(null);
useOnClickOutside(ref, () => setOpen(false));
const selectables = items
.filter((item) => !selected.find((s) => s === item.value))
.filter((item) => !value.find((s) => s === item.value))
.filter(
(item) =>
(typeof item.label === 'string' &&
@@ -35,7 +40,7 @@ export function ComboboxAdvanced({
);
const renderItem = (item: IItem) => {
const checked = !!selected.find((s) => s === item.value);
const checked = !!value.find((s) => s === item.value);
return (
<CommandItem
key={String(item.value)}
@@ -45,7 +50,7 @@ export function ComboboxAdvanced({
}}
onSelect={() => {
setInputValue('');
setSelected((prev) => {
onChange((prev) => {
if (prev.includes(item.value)) {
return prev.filter((s) => s !== item.value);
}
@@ -66,15 +71,15 @@ export function ComboboxAdvanced({
};
return (
<Command className="overflow-visible bg-white">
<Command className="overflow-visible bg-white" ref={ref}>
<button
type="button"
className="group border border-input px-3 py-2 text-sm ring-offset-background rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
onClick={() => setOpen((prev) => !prev)}
>
<div className="flex gap-1 flex-wrap">
{selected.length === 0 && placeholder}
{selected.slice(0, 2).map((value) => {
{value.length === 0 && placeholder}
{value.slice(0, 2).map((value) => {
const item = items.find((item) => item.value === value) ?? {
value,
label: value,
@@ -85,13 +90,13 @@ export function ComboboxAdvanced({
</Badge>
);
})}
{selected.length > 2 && (
<Badge variant="secondary">+{selected.length - 2} more</Badge>
{value.length > 2 && (
<Badge variant="secondary">+{value.length - 2} more</Badge>
)}
</div>
</button>
<div className="relative mt-2">
{open && (
{open && (
<div className="relative top-2">
<div className="max-h-80 min-w-[300px] absolute w-full z-10 top-0 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
<CommandGroup className="max-h-80 overflow-auto">
<div className="p-1 mb-2">
@@ -102,13 +107,16 @@ export function ComboboxAdvanced({
/>
</div>
{inputValue === ''
? selected.map(renderUnknownItem)
: renderUnknownItem(inputValue)}
? value.map(renderUnknownItem)
: renderItem({
value: inputValue,
label: `Pick "${inputValue}"`,
})}
{selectables.map(renderItem)}
</CommandGroup>
</div>
)}
</div>
</div>
)}
</Command>
);
}

2
apps/web/src/components/ui/combobox-multi.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { Badge } from '@/components/ui/badge';
import { Command, CommandGroup, CommandItem } from '@/components/ui/command';

40
apps/web/src/components/ui/combobox.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
@@ -15,29 +17,31 @@ import {
import { cn } from '@/utils/cn';
import { Check, ChevronsUpDown } from 'lucide-react';
import { ScrollArea } from './scroll-area';
interface ComboboxProps {
interface ComboboxProps<T> {
placeholder: string;
items: {
value: string;
value: T;
label: string;
disabled?: boolean;
}[];
value: string;
onChange: (value: string) => void;
value: T | null | undefined;
onChange: (value: T) => void;
children?: React.ReactNode;
onCreate?: (value: string) => void;
onCreate?: (value: T) => void;
className?: string;
searchable?: boolean;
}
export function Combobox({
export function Combobox<T extends string>({
placeholder,
items,
value,
onChange,
children,
onCreate,
}: ComboboxProps) {
className,
searchable,
}: ComboboxProps<T>) {
const [open, setOpen] = React.useState(false);
const [search, setSearch] = React.useState('');
function find(value: string) {
@@ -54,9 +58,9 @@ export function Combobox({
variant="outline"
role="combobox"
aria-expanded={open}
className="w-full justify-between min-w-[150px]"
className={cn('justify-between min-w-[150px]', className)}
>
<span className="overflow-hidden text-ellipsis">
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
{value ? find(value)?.label ?? 'No match' : placeholder}
</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -65,11 +69,13 @@ export function Combobox({
</PopoverTrigger>
<PopoverContent className="w-full min-w-0 p-0" align="start">
<Command>
<CommandInput
placeholder="Search item..."
value={search}
onValueChange={setSearch}
/>
{searchable === true && (
<CommandInput
placeholder="Search item..."
value={search}
onValueChange={setSearch}
/>
)}
{typeof onCreate === 'function' && search ? (
<CommandEmpty className="p-2">
<Button
@@ -85,7 +91,7 @@ export function Combobox({
) : (
<CommandEmpty>Nothing selected</CommandEmpty>
)}
<div className="max-h-[300px] overflow-scroll">
<div className="max-h-[300px] overflow-y-auto over-x-hidden">
<CommandGroup>
{items.map((item) => (
<CommandItem

2
apps/web/src/components/ui/command.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { cn } from '@/utils/cn';

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

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as DialogPrimitive from '@radix-ui/react-dialog';

2
apps/web/src/components/ui/dropdown-menu.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';

11
apps/web/src/components/ui/input.tsx
View File

@@ -1,16 +1,21 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
error?: string | undefined;
};
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
({ className, error, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
className,
!!error && 'border-destructive'
)}
ref={ref}
{...props}

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

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as LabelPrimitive from '@radix-ui/react-label';

2
apps/web/src/components/ui/popover.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as PopoverPrimitive from '@radix-ui/react-popover';

2
apps/web/src/components/ui/radio-group.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';

35
apps/web/src/components/ui/scroll-area.tsx
View File

@@ -1,7 +1,8 @@
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
'use client';
import { cn } from "@/utils/cn"
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -9,7 +10,7 @@ const ScrollArea = React.forwardRef<
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
className={cn('relative overflow-hidden', className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
@@ -18,34 +19,34 @@ const ScrollArea = React.forwardRef<
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
>(({ className, orientation = 'vertical', ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
'flex touch-none select-none transition-colors',
orientation === 'vertical' &&
'h-full w-2.5 border-l border-l-transparent p-[1px]',
orientation === 'horizontal' &&
'h-2.5 flex-col border-t border-t-transparent p-[1px]',
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb
className={cn(
"relative rounded-full bg-border",
orientation === "vertical" && "flex-1"
'relative rounded-full bg-border',
orientation === 'vertical' && 'flex-1'
)}
/>
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
export { ScrollArea, ScrollBar }
export { ScrollArea, ScrollBar };

2
apps/web/src/components/ui/sheet.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as SheetPrimitive from '@radix-ui/react-dialog';

8
apps/web/src/components/ui/table.tsx
View File

@@ -1,11 +1,13 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="border border-border rounded-md">
React.HTMLAttributes<HTMLTableElement> & { wrapper?: boolean }
>(({ className, wrapper, ...props }, ref) => (
<div className={cn('border border-border rounded-md bg-white', className)}>
<div className="relative w-full overflow-auto ">
<table
ref={ref}

2
apps/web/src/components/ui/toast.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as ToastPrimitives from '@radix-ui/react-toast';

2
apps/web/src/components/ui/toaster.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import {
Toast,
ToastClose,

4
apps/web/src/components/ui/tooltip.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -16,7 +18,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'z-50 overflow-hidden rounded-md border bg-black px-3 py-1.5 text-sm text-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className
)}
{...props}

4
apps/web/src/components/ui/use-toast.ts
View File

@@ -1,3 +1,5 @@
'use client';
// Inspired by react-hot-toast library
import * as React from 'react';
import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
@@ -134,7 +136,7 @@ function dispatch(action: Action) {
});
}
type Toast = Omit<ToasterToast, 'id'>;
export type Toast = Omit<ToasterToast, 'id'>;
function toast({ ...props }: Toast) {
const id = genId();

2
apps/web/src/components/user/ChangePassword.tsx
View File

@@ -1,8 +1,8 @@
import { api, handleError } from '@/app/_trpc/client';
import { ContentHeader, ContentSection } from '@/components/Content';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { toast } from '@/components/ui/use-toast';
import { api, handleError } from '@/utils/api';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';