💄 Ui boilerplate updated

ui boilerplate

packages/webapp/src/components/configuration/components/FieldMappingModal.tsx

@@ -16,6 +16,16 @@ import {
   TabsTrigger,
 } from "@/components/ui/tabs"
 
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
 export function FModal() {
   return (
     <Tabs defaultValue="account" className="w-[400px] mt-5">
@@ -26,46 +36,127 @@ export function FModal() {
       <TabsContent value="account">
         <Card>
           <CardHeader>
-            <CardTitle>Account</CardTitle>
+            <CardTitle>Define</CardTitle>
             <CardDescription>
-              Make changes to your account here. Click save when you're done.
+              Define a custom field you want to enable on unified models. It must be mapped to an existent custom field on your end-user's provider.
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-2">
             <div className="space-y-1">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" defaultValue="Pedro Duarte" />
+              <Label htmlFor="name">Standard Model</Label>
+              <Select>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="Select a model" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="apple">Contact</SelectItem>
+                    <SelectItem value="banana">Task</SelectItem>
+                    <SelectItem value="blueberry">Note</SelectItem>
+                    <SelectItem value="grapes">Company</SelectItem>
+                    <SelectItem value="pineapple">Ticket</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-1">
-              <Label htmlFor="username">Username</Label>
-              <Input id="username" defaultValue="@peduarte" />
+              <Label htmlFor="username">Name</Label>
+              <Input id="username" defaultValue="favorite_color" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="username">Description</Label>
+              <Input id="username" defaultValue="favorite color" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="username">Field Type</Label>
+              <Select>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="Select a type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="apple">string</SelectItem>
+                    <SelectItem value="banana">int</SelectItem>
+                    <SelectItem value="blueberry">string[]</SelectItem>
+                    <SelectItem value="grapes">int[]</SelectItem>
+                    <SelectItem value="pineapple">Date</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
             </div>
           </CardContent>
           <CardFooter>
-            <Button>Save changes</Button>
+            <Button>Define Field</Button>
           </CardFooter>
         </Card>
       </TabsContent>
       <TabsContent value="password">
         <Card>
           <CardHeader>
-            <CardTitle>Password</CardTitle>
+            <CardTitle>Map</CardTitle>
             <CardDescription>
-              Change your password here. After saving, you'll be logged out.
+              Now that you defined your field, map it to an existent custom field on your end-user's tool.
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-2">
             <div className="space-y-1">
-              <Label htmlFor="current">Current password</Label>
-              <Input id="current" type="password" />
+              <Label htmlFor="current">Field</Label>
+              <Select>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="Select a defined field" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="apple">fav_color</SelectItem>
+                    <SelectItem value="banana">fav_hair</SelectItem>
+                    <SelectItem value="blueberry">pet_number</SelectItem>
+                    <SelectItem value="grapes">is_admin</SelectItem>
+                    <SelectItem value="pineapple">players_status</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="current">Provider</Label>
+              <Select>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="Select a provider" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="apple">Hubspot</SelectItem>
+                    <SelectItem value="banana">Zendesk</SelectItem>
+                    <SelectItem value="blueberry">Slack</SelectItem>
+                    <SelectItem value="grapes">Asana</SelectItem>
+                    <SelectItem value="pineapple">Zoho</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="current">Origin Source Field</Label>
+              <Select>
+                <SelectTrigger className="w-[250px]">
+                  <SelectValue placeholder="Select an existent custom field" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="apple">fav_color</SelectItem>
+                    <SelectItem value="banana">fav_hair</SelectItem>
+                    <SelectItem value="blueberry">pet_number</SelectItem>
+                    <SelectItem value="grapes">is_admin</SelectItem>
+                    <SelectItem value="pineapple">players_status</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-1">
-              <Label htmlFor="new">New password</Label>
+              <Label htmlFor="new">Linked User Id</Label>
               <Input id="new" type="password" />
             </div>
           </CardContent>
           <CardFooter>
-            <Button>Save password</Button>
+            <Button>Map Field</Button>
           </CardFooter>
         </Card>
       </TabsContent>

packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react"
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+  } from "@/components/ui/card"
+import { CONNECTIONS } from "@/components/connections/data/connection";
+import { columns } from "@/components/connections/data/columns";
+import { DataTable } from "@/components/jobs/components/data-table";
+
+export interface Connection {
+  organisation: string; 
+  app: string; 
+  status: string; 
+  category: string; 
+  linkedUser: string;
+  date: string;
+}
+
+export default function FieldMappingsTable() {
+  const [connections, setTasks] = useState<Connection[]>();
+
+  useEffect(() => {
+    async function loadTasks() {
+      //const fetchedTasks = await getTasks();
+      setTasks(CONNECTIONS);
+    }
+
+    loadTasks();
+  }, []);
+  return (
+    <>
+      <div className="hidden h-full flex-1 flex-col space-y-8 md:flex">
+      <div className="flex items-center space-x-4 justify-between flex-row">
+        <Card className="w-1/2">
+            <CardHeader>
+                <CardTitle>Defined</CardTitle>
+            </CardHeader>
+            <CardContent>
+            <p className="text-4xl font-bold">0</p>
+            </CardContent>
+
+        </Card>
+        <Card className="w-1/2">
+            <CardHeader>
+                <CardTitle>Mapped</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <p className="text-4xl font-bold">3</p>
+            </CardContent>
+        </Card>                  
+        </div>
+        {connections && <DataTable data={connections} columns={columns} />}
+      </div>
+    </>
+  )
+}

packages/webapp/src/components/configuration/index.tsx

@@ -28,6 +28,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { FModal } from "./components/FieldMappingModal"
 import { Separator } from "../ui/separator";
+import FieldMappingsTable from "./components/FieldMappingsTable";
 
 export default function ConfigurationPage() {
   /*const {getRootProps, getInputProps} = useDropzone({
@@ -94,8 +95,8 @@ export default function ConfigurationPage() {
 
                   <Card className="col-span-12">
                   <CardHeader>
-                    <CardTitle>Your Linked Accounts</CardTitle>
-                    <CardDescription>
+                    <CardTitle className="text-left">Your Linked Accounts</CardTitle>
+                    <CardDescription className="text-left">
                       You connected 1389 linked accounts.
                     </CardDescription>
                   </CardHeader>
@@ -153,14 +154,14 @@ export default function ConfigurationPage() {
 
                   <Card className="col-span-12">
                   <CardHeader>
-                    <CardTitle>Your Fields Mapping</CardTitle>
-                    <CardDescription>
+                    <CardTitle className="text-left">Your Fields Mapping</CardTitle>
+                    <CardDescription className="text-left">
                       You built 30 fields mapping.
                     </CardDescription>
                   </CardHeader>
                   <Separator className="mb-10"/>
                   <CardContent>
-                    <RecentSales />
+                  <FieldMappingsTable/>
                   </CardContent>
                 </Card>
                 </div>

packages/webapp/src/components/connections/Connection.tsx

@@ -11,8 +11,7 @@ import {
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { Button } from "../ui/button";
 import { PlusCircledIcon } from "@radix-ui/react-icons";
-import { Label } from "../ui/label";
-import { Input } from "../ui/input";
+import CopyLinkInput from "./components/CopyLinkInput";
 
 export interface Connection {
   organisation: string; 
@@ -69,42 +68,26 @@ export default function ConnectionTable() {
         </div>
         <Dialog>
                   <DialogTrigger asChild>
-                    <Button className="w-[18%] outline">
+                    <Button className="w-[20%] outline">
                         <PlusCircledIcon className="mr-2 h-4 w-4" />
                         Add New Connection
                     </Button>
                   </DialogTrigger>
                   <DialogContent className="sm:w-[450px]">
                     <DialogHeader>
-                      <DialogTitle>Edit profile</DialogTitle>
+                      <DialogTitle>Share this magic link with your customers</DialogTitle>
                       <DialogDescription>
-                        Make changes to your profile here. Click save when you're done.
+                        Once they finish the oAuth flow, a new connection would be enabled.
                       </DialogDescription>
                     </DialogHeader>
                     <div className="grid gap-4 py-4">
                       <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="name" className="text-right">
-                          Name
-                        </Label>
-                        <Input
-                          id="name"
-                          defaultValue="Pedro Duarte"
-                          className="col-span-3"
-                        />
-                      </div>
-                      <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="username" className="text-right">
-                          Username
-                        </Label>
-                        <Input
-                          id="username"
-                          defaultValue="@peduarte"
-                          className="col-span-3"
-                        />
+                      <CopyLinkInput/>
                       </div>
+
                     </div>
                     <DialogFooter>
-                      <Button type="submit">Save changes</Button>
+                      <Button type="submit">Share</Button>
                 </DialogFooter>
                   </DialogContent>
         </Dialog>

packages/webapp/src/components/connections/components/CopyLinkInput.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import React, { useState } from 'react';
+
+const CopyLinkInput = () => {
+  const [value, setValue] = useState('https://magic-link/edfr-12h3KKHjdd-1.com');
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  };
+
+  return (
+    <>
+      <Input
+        defaultValue={value}
+        readOnly
+        className="col-span-3"
+      />
+      <Button
+        onClick={handleCopy}
+        variant="outline"
+        className=" text-white rounded-md" // Adjust the styling as needed
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </Button>
+    </>
+  );
+};
+
+export default CopyLinkInput;