feat: dashboard v2, esm, upgrades (#211)

* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
2025-10-16 12:27:44 +02:00
parent 436e81ecc9
commit 81a7e5d62e
741 changed files with 32695 additions and 16996 deletions
--- a/apps/start/src/modals/add-client.tsx
+++ b/apps/start/src/modals/add-client.tsx
@@ -0,0 +1,161 @@
+import { CreateClientSuccess } from '@/components/clients/create-client-success';
+import { Button, buttonVariants } from '@/components/ui/button';
+import { Combobox } from '@/components/ui/combobox';
+import { DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useAppParams } from '@/hooks/use-app-params';
+import { handleError } from '@/integrations/trpc/react';
+import { cn } from '@/utils/cn';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { SaveIcon } from 'lucide-react';
+import type { SubmitHandler } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { useTRPC } from '@/integrations/trpc/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+const validation = z.object({
+  name: z.string().min(1),
+  type: z.enum(['read', 'write', 'root']),
+});
+
+type IForm = z.infer<typeof validation>;
+
+export default function AddClient() {
+  const { organizationId, projectId } = useAppParams();
+  const form = useForm<IForm>({
+    resolver: zodResolver(validation),
+    defaultValues: {
+      name: '',
+      type: 'write',
+    },
+  });
+  const queryClient = useQueryClient();
+  const trpc = useTRPC();
+  const mutation = useMutation(
+    trpc.client.create.mutationOptions({
+      onSuccess() {
+        toast.success('Client created successfully');
+        queryClient.invalidateQueries(
+          trpc.project.getProjectWithClients.pathFilter(),
+        );
+      },
+      onError: handleError,
+    }),
+  );
+
+  const onSubmit: SubmitHandler<IForm> = (values) => {
+    mutation.mutate({
+      name: values.name,
+      type: values.type,
+      projectId,
+      organizationId,
+    });
+  };
+
+  return (
+    <ModalContent>
+      {mutation.isSuccess ? (
+        <>
+          <ModalHeader title="Success" text={'Your client is created'} />
+          <CreateClientSuccess {...mutation.data} />
+          <div className="mt-4 flex gap-4">
+            <a
+              className={cn(buttonVariants({ variant: 'secondary' }), 'flex-1')}
+              href="https://openpanel.dev/docs"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Read docs
+            </a>
+            <Button className="flex-1" onClick={() => popModal()}>
+              Close
+            </Button>
+          </div>
+        </>
+      ) : (
+        <>
+          <ModalHeader title="Create a client" />
+          <form
+            className="flex flex-col gap-4"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
+            <div>
+              <Label>Client name</Label>
+              <Input
+                placeholder="Eg. My App Client"
+                error={form.formState.errors.name?.message}
+                {...form.register('name')}
+              />
+            </div>
+
+            <div>
+              <Controller
+                control={form.control}
+                name="type"
+                render={({ field }) => {
+                  return (
+                    <div>
+                      <Label>Type of client</Label>
+                      <Combobox
+                        {...field}
+                        className="w-full"
+                        onChange={(value) => {
+                          field.onChange(value);
+                        }}
+                        items={[
+                          {
+                            value: 'write',
+                            label: 'Write (for ingestion)',
+                          },
+                          {
+                            value: 'read',
+                            label: 'Read (access export API)',
+                          },
+                          {
+                            value: 'root',
+                            label: 'Root (access export API)',
+                          },
+                        ]}
+                        placeholder="Select a project"
+                      />
+                      <p className="mt-2 text-sm text-muted-foreground">
+                        {field.value === 'write' &&
+                          'Write: Is the default client type and is used for ingestion of data'}
+                        {field.value === 'read' &&
+                          'Read: You can access the current projects data from the export API'}
+                        {field.value === 'root' &&
+                          'Root: You can access any projects data from the export API'}
+                      </p>
+                    </div>
+                  );
+                }}
+              />
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant={'secondary'}
+                onClick={() => popModal()}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                icon={SaveIcon}
+                loading={mutation.isPending}
+              >
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </>
+      )}
+    </ModalContent>
+  );
+}