- {editMode && (
-
- )}
- {series.map((serie, index) => {
+ {series.map((serie) => {
const isClickable = serie.name !== NOT_SET_VALUE && onClick;
return (
onClick(serie) } : {})}
>
-
+
{serie.name}
-
+
+ {serie.metrics.previous[metric]?.value}
{number.format(serie.metrics.sum)}
-
+
+
);
})}
diff --git a/apps/web/src/components/report/chart/ReportChartTooltip.tsx b/apps/web/src/components/report/chart/ReportChartTooltip.tsx
index 28c889f5..a05dac98 100644
--- a/apps/web/src/components/report/chart/ReportChartTooltip.tsx
+++ b/apps/web/src/components/report/chart/ReportChartTooltip.tsx
@@ -67,15 +67,12 @@ export function ReportChartTooltip({
{getLabel(data.label)}
-
- {number.format(data.count)}
- {unit}
-
+
{number.formatWithUnit(data.count, unit)}
{!!data.previous &&
- `(${data.previous.value + (unit ? unit : '')})`}
+ `(${number.formatWithUnit(data.previous.value, unit)})`}
diff --git a/apps/web/src/components/report/chart/SerieIcon.tsx b/apps/web/src/components/report/chart/SerieIcon.tsx
index dacd14a0..f751b915 100644
--- a/apps/web/src/components/report/chart/SerieIcon.tsx
+++ b/apps/web/src/components/report/chart/SerieIcon.tsx
@@ -30,6 +30,12 @@ const createImageIcon = (url: string) => {
} as LucideIcon;
};
+const createFlagIcon = (url: string) => {
+ return function (props: LucideProps) {
+ return
;
+ } as LucideIcon;
+};
+
const mapper: Record
= {
// Events
screen_view: MonitorPlayIcon,
@@ -88,6 +94,121 @@ const mapper: Record = {
email: MailIcon,
unknown: HelpCircleIcon,
[NOT_SET_VALUE]: ScanIcon,
+
+ // Flags
+ se: createFlagIcon('se'),
+ us: createFlagIcon('us'),
+ gb: createFlagIcon('gb'),
+ ua: createFlagIcon('ua'),
+ ru: createFlagIcon('ru'),
+ de: createFlagIcon('de'),
+ fr: createFlagIcon('fr'),
+ br: createFlagIcon('br'),
+ in: createFlagIcon('in'),
+ it: createFlagIcon('it'),
+ es: createFlagIcon('es'),
+ pl: createFlagIcon('pl'),
+ nl: createFlagIcon('nl'),
+ id: createFlagIcon('id'),
+ tr: createFlagIcon('tr'),
+ ph: createFlagIcon('ph'),
+ ca: createFlagIcon('ca'),
+ ar: createFlagIcon('ar'),
+ mx: createFlagIcon('mx'),
+ za: createFlagIcon('za'),
+ au: createFlagIcon('au'),
+ co: createFlagIcon('co'),
+ ch: createFlagIcon('ch'),
+ at: createFlagIcon('at'),
+ be: createFlagIcon('be'),
+ pt: createFlagIcon('pt'),
+ my: createFlagIcon('my'),
+ th: createFlagIcon('th'),
+ vn: createFlagIcon('vn'),
+ sg: createFlagIcon('sg'),
+ eg: createFlagIcon('eg'),
+ sa: createFlagIcon('sa'),
+ pk: createFlagIcon('pk'),
+ bd: createFlagIcon('bd'),
+ ro: createFlagIcon('ro'),
+ hu: createFlagIcon('hu'),
+ cz: createFlagIcon('cz'),
+ gr: createFlagIcon('gr'),
+ il: createFlagIcon('il'),
+ no: createFlagIcon('no'),
+ fi: createFlagIcon('fi'),
+ dk: createFlagIcon('dk'),
+ sk: createFlagIcon('sk'),
+ bg: createFlagIcon('bg'),
+ hr: createFlagIcon('hr'),
+ rs: createFlagIcon('rs'),
+ ba: createFlagIcon('ba'),
+ si: createFlagIcon('si'),
+ lv: createFlagIcon('lv'),
+ lt: createFlagIcon('lt'),
+ ee: createFlagIcon('ee'),
+ by: createFlagIcon('by'),
+ md: createFlagIcon('md'),
+ kz: createFlagIcon('kz'),
+ uz: createFlagIcon('uz'),
+ kg: createFlagIcon('kg'),
+ tj: createFlagIcon('tj'),
+ tm: createFlagIcon('tm'),
+ az: createFlagIcon('az'),
+ ge: createFlagIcon('ge'),
+ am: createFlagIcon('am'),
+ af: createFlagIcon('af'),
+ ir: createFlagIcon('ir'),
+ iq: createFlagIcon('iq'),
+ sy: createFlagIcon('sy'),
+ lb: createFlagIcon('lb'),
+ jo: createFlagIcon('jo'),
+ ps: createFlagIcon('ps'),
+ kw: createFlagIcon('kw'),
+ qa: createFlagIcon('qa'),
+ om: createFlagIcon('om'),
+ ye: createFlagIcon('ye'),
+ ae: createFlagIcon('ae'),
+ bh: createFlagIcon('bh'),
+ cy: createFlagIcon('cy'),
+ mt: createFlagIcon('mt'),
+ sm: createFlagIcon('sm'),
+ li: createFlagIcon('li'),
+ is: createFlagIcon('is'),
+ al: createFlagIcon('al'),
+ mk: createFlagIcon('mk'),
+ me: createFlagIcon('me'),
+ ad: createFlagIcon('ad'),
+ lu: createFlagIcon('lu'),
+ mc: createFlagIcon('mc'),
+ fo: createFlagIcon('fo'),
+ gg: createFlagIcon('gg'),
+ je: createFlagIcon('je'),
+ im: createFlagIcon('im'),
+ gi: createFlagIcon('gi'),
+ va: createFlagIcon('va'),
+ ax: createFlagIcon('ax'),
+ bl: createFlagIcon('bl'),
+ mf: createFlagIcon('mf'),
+ pm: createFlagIcon('pm'),
+ yt: createFlagIcon('yt'),
+ wf: createFlagIcon('wf'),
+ tf: createFlagIcon('tf'),
+ re: createFlagIcon('re'),
+ sc: createFlagIcon('sc'),
+ mu: createFlagIcon('mu'),
+ zw: createFlagIcon('zw'),
+ mz: createFlagIcon('mz'),
+ na: createFlagIcon('na'),
+ bw: createFlagIcon('bw'),
+ ls: createFlagIcon('ls'),
+ sz: createFlagIcon('sz'),
+ bi: createFlagIcon('bi'),
+ rw: createFlagIcon('rw'),
+ ug: createFlagIcon('ug'),
+ ke: createFlagIcon('ke'),
+ tz: createFlagIcon('tz'),
+ mg: createFlagIcon('mg'),
};
export function SerieIcon({ name, ...props }: SerieIconProps) {
diff --git a/apps/web/src/hooks/useNumerFormatter.ts b/apps/web/src/hooks/useNumerFormatter.ts
index 2533d427..bd9c392b 100644
--- a/apps/web/src/hooks/useNumerFormatter.ts
+++ b/apps/web/src/hooks/useNumerFormatter.ts
@@ -30,5 +30,26 @@ export function useNumber() {
return {
format,
short,
+ shortWithUnit: (value: number | null | undefined, unit?: string | null) => {
+ if (isNil(value)) {
+ return 'N/A';
+ }
+ if (unit === 'min') {
+ return fancyMinutes(value);
+ }
+ return `${short(value)}${unit ? ` ${unit}` : ''}`;
+ },
+ formatWithUnit: (
+ value: number | null | undefined,
+ unit?: string | null
+ ) => {
+ if (isNil(value)) {
+ return 'N/A';
+ }
+ if (unit === 'min') {
+ return fancyMinutes(value);
+ }
+ return `${format(value)}${unit ? ` ${unit}` : ''}`;
+ },
};
}
diff --git a/apps/web/src/modals/AddClient.tsx b/apps/web/src/modals/AddClient.tsx
index 15d03ba9..d700145e 100644
--- a/apps/web/src/modals/AddClient.tsx
+++ b/apps/web/src/modals/AddClient.tsx
@@ -1,17 +1,25 @@
'use client';
+import { useEffect } from 'react';
import { api, handleError } from '@/app/_trpc/client';
-import { ButtonContainer } from '@/components/ButtonContainer';
-import { InputWithLabel } from '@/components/forms/InputWithLabel';
-import Syntax from '@/components/Syntax';
import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
+import { CheckboxInput } from '@/components/ui/checkbox';
import { Combobox } from '@/components/ui/combobox';
+import {
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
+import { useAppParams } from '@/hooks/useAppParams';
import { clipboard } from '@/utils/clipboard';
import { zodResolver } from '@hookform/resolvers/zod';
-import { Copy } from 'lucide-react';
+import { Copy, SaveIcon } from 'lucide-react';
+import Link from 'next/link';
import { useRouter } from 'next/navigation';
+import type { SubmitHandler } from 'react-hook-form';
import { Controller, useForm, useWatch } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
@@ -19,194 +27,234 @@ import { z } from 'zod';
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
-const validator = z.object({
- name: z.string().min(1, 'Required'),
- cors: z.string().min(1, 'Required'),
- withCors: z.boolean(),
- projectId: z.string().min(1, 'Required'),
+const validation = z.object({
+ name: z.string().min(1),
+ domain: z.string().optional(),
+ withSecret: z.boolean().optional(),
+ projectId: z.string(),
});
-type IForm = z.infer;
-interface AddClientProps {
- organizationId: string;
-}
+type IForm = z.infer;
-export default function AddClient({ organizationId }: AddClientProps) {
+export default function AddClient() {
+ const { organizationId, projectId } = useAppParams();
const router = useRouter();
- const query = api.project.list.useQuery({
- organizationId,
+ const form = useForm({
+ resolver: zodResolver(validation),
+ defaultValues: {
+ withSecret: false,
+ name: '',
+ domain: '',
+ projectId,
+ },
});
-
- const mutation = api.client.create.useMutation({
+ const mutation = api.client.create2.useMutation({
onError: handleError,
onSuccess() {
- toast('Success', {
- description: 'Client created!',
- });
+ toast.success('Client created');
router.refresh();
},
});
-
- const { register, handleSubmit, formState, control } = useForm({
- resolver: zodResolver(validator),
- defaultValues: {
- name: '',
- cors: '*',
- projectId: '',
- withCors: true,
- },
+ const query = api.project.list.useQuery({
+ organizationId,
});
+ const onSubmit: SubmitHandler = (values) => {
+ mutation.mutate({
+ name: values.name,
+ domain: values.withSecret ? undefined : values.domain,
+ projectId: values.projectId,
+ organizationId,
+ });
+ };
- const withCors = useWatch({
- control,
- name: 'withCors',
+ const watch = useWatch({
+ control: form.control,
+ name: 'withSecret',
});
- if (mutation.isSuccess && mutation.data) {
- const { clientId, clientSecret, cors } = mutation.data;
- const snippet = clientSecret
- ? `const mixan = new Mixan({
- clientId: "${clientId}",
- // Avoid using this on web, rely on cors settings instead
- // Mostly for react-native and node/backend
- clientSecret: "${clientSecret}",
-})`
- : `const mixan = new Mixan({
- clientId: "${clientId}",
-})`;
- return (
-
-
-
- Your client has been created! You will only see the client secret once
- so keep it safe 🫣
-
-
-
-
- {clientSecret && (
-
- )}
-
-
-
-
-
-
-
- );
- }
-
return (
-
-