Mit 27 feat dynamic catalog

apps/client-ts/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
@@ -48,12 +49,14 @@
     "react": "^18",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.2",
     "react-resizable-panels": "^2.0.19",
     "recharts": "^2.10.1",
     "sonner": "^1.4.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "xlsx": "^0.18.5",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"
   },

apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { PlusCircledIcon } from "@radix-ui/react-icons";
 import { Button } from "@/components/ui/button"
 import { DataTable } from "@/components/shared/data-table";
 import {
@@ -26,7 +25,6 @@ import useProjectStore from "@/state/projectStore";
 import useCreateApiKey from "@/hooks/create/useCreateApiKey";
 import useProfileStore from "@/state/profileStore";
 import { Suspense, useEffect, useState } from "react";
-import { cn } from "@/lib/utils";
 import { usePostHog } from 'posthog-js/react'
 import config from "@/lib/config";
 import * as z from "zod"
@@ -36,13 +34,15 @@ import { DataTableLoading } from "@/components/shared/data-table-loading";
 import {CustomHeading}  from "@/components/shared/custom-heading";
 import { useColumns } from "@/components/ApiKeys/columns";
 import { PlusCircle } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { useQueryClient } from "@tanstack/react-query";
 
 const formSchema = z.object({
   apiKeyIdentifier: z.string().min(2, {
     message: "apiKeyIdentifier must be at least 2 characters.",
   })
 })
-
 interface TSApiKeys {
   id_api_key: string;
   name : string;
@@ -53,11 +53,12 @@ export default function Page() {
   const [open,setOpen] = useState(false)
   const [tsApiKeys,setTSApiKeys] = useState<TSApiKeys[] | undefined>([])
 
+  const queryClient = useQueryClient();
+
   const {idProject} = useProjectStore();
   const {profile} = useProfileStore();
-
+  const { createApiKeyPromise } = useCreateApiKey();
   const { data: apiKeys, isLoading, error } = useApiKeys();
-  const { mutate } = useCreateApiKey();
   const columns = useColumns();
 
   useEffect(() => {
@@ -94,11 +95,33 @@ export default function Page() {
 
 
   const onSubmit = (values: z.infer<typeof formSchema>) => {
-    mutate({ 
-      userId: profile!.id_user,
-      projectId: idProject,
-      keyName: values.apiKeyIdentifier
+    toast.promise(
+      createApiKeyPromise({ 
+        userId: profile!.id_user,
+        projectId: idProject,
+        keyName: values.apiKeyIdentifier
+      }), 
+      {
+      loading: 'Loading...',
+      success: (data: any) => {
+        queryClient.setQueryData<any[]>(['api-keys'], (oldQueryData = []) => {
+          return [...oldQueryData, data];
+        });
+        return (
+          <div className="flex flex-row items-center">
+            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+            <div className="ml-2">
+              Api key
+              <Badge variant="secondary" className="rounded-sm px-1 mx-2 font-normal">{`${data.name}`}</Badge>
+              has been created
+            </div>
+          </div>
+        )
+        ;
+      },
+      error: 'Error',
     });
+
     posthog?.capture('api_key_created', {
       id_project: idProject,
       mode: config.DISTRIBUTION

apps/client-ts/src/app/(Dashboard)/b2c/profile/page.tsx

@@ -16,6 +16,7 @@ import useProfileStore from "@/state/profileStore";
 import useProjectStore from "@/state/projectStore"
 import { useQueryClient } from '@tanstack/react-query';
 import { useState } from "react";
+import { toast } from "sonner";
 
 
 const Profile = () => {
@@ -30,6 +31,12 @@ const Profile = () => {
         try {
           await navigator.clipboard.writeText(email)
           setCopied(true);
+          toast.success("Email copied", {
+            action: {
+              label: "Close",
+              onClick: () => console.log("Close"),
+            },
+          })
           setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
         } catch (err) {
           console.error('Failed to copy: ', err);

apps/client-ts/src/app/(Dashboard)/configuration/page.tsx

@@ -18,7 +18,6 @@ import FieldMappingsTable from "@/components/Configuration/FieldMappings/FieldMa
 import AddLinkedAccount from "@/components/Configuration/LinkedUsers/AddLinkedAccount";
 import useLinkedUsers from "@/hooks/get/useLinkedUsers";
 import useFieldMappings from "@/hooks/get/useFieldMappings";
-import { Skeleton } from "@/components/ui/skeleton";
 import { useState } from "react";
 import AddWebhook from "@/components/Configuration/Webhooks/AddWebhook";
 import { WebhooksPage } from "@/components/Configuration/Webhooks/WebhooksPage";
@@ -33,6 +32,7 @@ import { Button } from "@/components/ui/button";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { CatalogWidget } from "@/components/Configuration/Catalog/CatalogWidget";
 import { CopySnippet } from "@/components/Configuration/Catalog/CopySnippet";
+import {Button as Button2} from "@/components/ui/button2"
 
 export default function Page() {
 
@@ -191,8 +191,10 @@ export default function Page() {
                       </TooltipProvider>                
                     </CardTitle>
                     <CardDescription className="text-left flex flex-row items-center">
-                      You built {mappings ? mappings.length : <LoadingSpinner className="w-4 mr-2"/>} fields mappings.
+                      You built {mappings ? mappings.length : <LoadingSpinner className="w-4 mr-1"/>} fields mappings.
+                      <Button2 variant="linkHover2">
                         <a href="https://docs.panora.dev/core-concepts/custom-fields" className="font-bold" target="_blank" rel="noopener noreferrer"> Learn more about custom field mappings in our docs !</a>
+                      </Button2>
                     </CardDescription>
                   </CardHeader>
                   <Separator className="mb-10"/>
@@ -210,8 +212,10 @@ export default function Page() {
                   <CardHeader>
                     <CardTitle className="text-left">Your Webhooks</CardTitle>
                     <CardDescription className="text-left flex flex-row items-center">
-                      You enabled {webhooks ? webhooks.length : <LoadingSpinner className="w-4 mr-2"/>} webhooks.
-                      <a href="https://docs.panora.dev/webhooks/overview" target="_blank" rel="noopener noreferrer"><strong> Read more about webhooks from our documentation</strong></a>
+                      You enabled {webhooks ? webhooks.length : <LoadingSpinner className="w-4 mr-1"/>} webhooks.
+                      <Button2 variant="linkHover2">
+                        <a href="https://docs.panora.dev/webhooks/overview" target="_blank" rel="noopener noreferrer"><strong> Read more about webhooks from our documentation</strong></a>
+                      </Button2>
                     </CardDescription>
                   </CardHeader>
                   <Separator className="mb-10"/>

apps/client-ts/src/components/ApiKeys/columns.tsx

@@ -9,6 +9,8 @@ import { PasswordInput } from "../ui/password-input"
 import { useState } from "react"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
 import { Button } from "../ui/button"
+import { toast } from "sonner"
+import { Card } from "antd"
 
 export function useColumns() {
   const [copiedState, setCopiedState] = useState<{ [key: string]: boolean }>({});
@@ -19,6 +21,12 @@ export function useColumns() {
       ...prevState,
       [token]: true,
     }));
+    toast.success("Api key copied", {
+      action: {
+        label: "Close",
+        onClick: () => console.log("Close"),
+      },
+    })
     setTimeout(() => {
       setCopiedState((prevState) => ({
         ...prevState,