Merge branch 'main' of https://github.com/mit-27/Panora into feat-dyn…

…amic-catalog

.github/ISSUE_TEMPLATE/new-integration-request.yml

@@ -0,0 +1,49 @@
+name: New Integration Request
+description: Need an Integration that isn't in our catalog yet? Ask here!
+title: "feat: Add integration with: #SOFTWARE_NAME"
+labels: ["backend", "embedded-catalog", "good first issue"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this!
+  - type: input
+    id: contact
+    attributes:
+      label: Contact Details
+      description: "How can we get in touch with you if we need more info? (We'll edit the issue to hide your email)"
+      placeholder: ex. [email protected]
+    validations:
+      required: true
+  - type: dropdown
+    id: software_category
+    attributes:
+      label: Category
+      multiple: true
+      description: "What type of software do you want to build integrations with?"
+      options:
+        - Accounting
+        - Calendar
+        - Cybersecurity
+        - CRM
+        - Data Warehouse
+        - Document Signature
+        - Ecommerce
+        - Email
+        - File Storage
+        - HRIS
+        - Logging
+        - Marketing Automation
+        - Payments
+        - Point of Sale
+        - Source Code Management
+        - Telematics and IOT
+        - Ticketing
+        - Other
+    validations:
+      required: true
+  - type: textarea
+    id: platforms
+    attributes:
+      label: Platforms
+      description: "Which specific platforms would you integrate with? (example: Salesforce, Hubspot, Zendesk, Jira...)"

apps/client-ts/package.json

@@ -20,13 +20,13 @@
     "@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-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@radix-ui/react-scroll-area": "^1.0.5",
     "@tanstack/react-query": "^5.12.2",
     "@tanstack/react-query-devtools": "^5.25.0",
     "@tanstack/react-query-next-experimental": "^5.25.0",
@@ -37,22 +37,25 @@
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",
     "cookies": "^0.9.1",
+    "coolshapes-react": "^1.0.1",
     "date-fns": "^3.3.1",
+    "jotai": "^2.8.0",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.344.0",
     "next": "14.1.2",
     "next-themes": "^0.2.1",
     "posthog-js": "^1.96.1",
     "react": "^18",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18",
-    "react-hook-form": "^7.51.0",
+    "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",
     "zod": "^3.22.4",
-    "zustand": "^4.4.7",
-    "js-cookie": "^3.0.5"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@types/cookies": "^0.9.0",

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

@@ -2,7 +2,6 @@
 
 import { PlusCircledIcon } from "@radix-ui/react-icons";
 import { Button } from "@/components/ui/button"
-import { columns } from "@/components/ApiKeys/data/columns";
 import { DataTable } from "@/components/shared/data-table";
 import {
   Dialog,
@@ -22,9 +21,9 @@ import {
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input";
-import useApiKeys from "@/hooks/useApiKeys";
+import useApiKeys from "@/hooks/get/useApiKeys";
 import useProjectStore from "@/state/projectStore";
-import useApiKeyMutation from "@/hooks/mutations/useApiKeyMutation";
+import useCreateApiKey from "@/hooks/create/useCreateApiKey";
 import useProfileStore from "@/state/profileStore";
 import { Suspense, useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
@@ -35,6 +34,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 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";
 
 const formSchema = z.object({
   apiKeyIdentifier: z.string().min(2, {
@@ -43,9 +44,10 @@ const formSchema = z.object({
 })
 
 interface TSApiKeys {
-  name : string,
-  token : string,
-  created : string
+  id_api_key: string;
+  name : string;
+  token : string;
+  created : string;
 }
 
 export default function Page() {
@@ -56,21 +58,19 @@ export default function Page() {
   const {profile} = useProfileStore();
 
   const { data: apiKeys, isLoading, error } = useApiKeys();
-  const { mutate } = useApiKeyMutation();
+  const { mutate } = useCreateApiKey();
+  const columns = useColumns();
 
   useEffect(() => {
     const temp_tsApiKeys = apiKeys?.map((key) => ({
+      id_api_key: key.id_api_key,
       name: key.name || "",
       token: key.api_key_hash,
       created: new Date().toISOString()
     }))
-
     setTSApiKeys(temp_tsApiKeys)
-
   },[apiKeys])
 
-
-
   const posthog = usePostHog()
 
   if(error){
@@ -96,10 +96,6 @@ export default function Page() {
 
 
   const onSubmit = (values: z.infer<typeof formSchema>) => {
-    // e.preventDefault(); // Prevent default form submission
-    console.log("user data is => "+ JSON.stringify(profile))
-    console.log("id_user is "+ profile!.id_user)
-    console.log("idProject is "+ idProject)
     mutate({ 
       userId: profile!.id_user,
       projectId: idProject,
@@ -112,7 +108,6 @@ export default function Page() {
 
     setOpen(!open)
 
-
   };
 
   return (
@@ -132,19 +127,19 @@ export default function Page() {
         <div>
           <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogTrigger asChild>
-            <Button
-              variant="outline"
-              role="combobox"
-              aria-label="Select an api key"
-              className={cn("w-[180px] justify-between")}
+            <Button 
+              size="sm" 
+              className="h-7 gap-1" 
               onClick={() => {
                 posthog?.capture("add_new_api_key_button_clicked", {
                   id_project: idProject,
                   mode: config.DISTRIBUTION
               })}}
             >
-              <PlusCircledIcon className="mr-2 h-5 w-5" />
-              Create New Key
+              <PlusCircle className="h-3.5 w-3.5" />
+              <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                Create New Api Key
+              </span>
             </Button>
             </DialogTrigger>
             <DialogContent>
@@ -192,8 +187,10 @@ export default function Page() {
                     </div>
                   </div>
                 <DialogFooter>
-                  <Button variant='outline' type="reset" onClick={() => onCancel()}>Cancel</Button>
-                  <Button type='submit'>Create</Button>
+                  <Button variant='outline' type="reset" size="sm" className="h-7 gap-1" onClick={() => onCancel()}>Cancel</Button>
+                  <Button type='submit' size="sm" className="h-7 gap-1">
+                    Create
+                  </Button>
                 </DialogFooter>
                   </form>
                 </Form>

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

@@ -15,29 +15,37 @@ import Cookies from 'js-cookie';
 import useProfileStore from "@/state/profileStore";
 import useProjectStore from "@/state/projectStore"
 import { useQueryClient } from '@tanstack/react-query';
+import { useState } from "react";
 
 
 const Profile = () => {
-
+    const [copied, setCopied] = useState(false);
     const { profile, setProfile } = useProfileStore();
     const { setIdProject } = useProjectStore();
     const queryClient = useQueryClient();
-
-
 
     const router = useRouter();
 
+    const handleCopy = async (email: string) => {
+        try {
+          await navigator.clipboard.writeText(email)
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+        } catch (err) {
+          console.error('Failed to copy: ', err);
+        }
+      };
+
     const onLogout = () => {
         router.push('/b2c/login')
         Cookies.remove("access_token")
         setProfile(null)
         setIdProject("")
         queryClient.clear()
-
     }
 
     return (
-        <div className="ml-[200px] p-10">
+        <div className="p-10">
         <Card>
         <CardHeader>
             <CardTitle>Profile</CardTitle>
@@ -52,13 +60,18 @@ const Profile = () => {
 
             <div className="flex space-x-2">
             <Input value={`${profile?.email}`} readOnly />
-            <Button variant="secondary" className="shrink-0">
-                Copy
+            <Button type="button" onClick={() => handleCopy(profile?.email!)}>
+                {copied ? 'Copied!' : (
+                    <>
+                    <p className="mr-1" >Copy</p>
+                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
+                    </>
+                )}
             </Button>
             </div>
             <Separator className="my-4" />
             <div className="pt-4">
-            <Button onClick={() => onLogout()}>
+            <Button onClick={() => onLogout()} size="sm" className="h-7 gap-1">
                 Log Out
             </Button>
             </div>
@@ -68,5 +81,4 @@ const Profile = () => {
     ); 
 };
 
-
 export default Profile;