Skip to content

Commit

Permalink
💄 Ui formatted
Browse files Browse the repository at this point in the history 
ui
  • Loading branch information
@naelob
naelob committed Nov 30, 2023
1 parent bd09fb8 commit 420d370
Show file tree
Hide file tree
Showing 31 changed files with 603 additions and 251 deletions.
2 changes: 1 addition & 1 deletion packages/webapp/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import DashboardPage from './components/dashboard'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import JobsPage from './components/jobs';
import ConnectionsPage from './components/connections';
import TaskPage from './components/jobs/Task';
import TaskPage from './components/jobs/JobsTable';

function App() {
return (
Expand Down
34 changes: 9 additions & 25 deletions packages/webapp/src/components/api-keys/components/choose-project.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import * as React from "react"
import {
CaretSortIcon,
CheckIcon,
PlusCircledIcon,
} from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"
Expand All @@ -30,7 +29,6 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
Expand All @@ -49,15 +47,15 @@ import {

const groups = [
{
label: "Teams",
label: "Projects",
teams: [
{
label: "Acme Inc.",
value: "acme-inc",
label: "Project 1",
value: "project1",
},
{
label: "Monsters Inc.",
value: "monsters",
label: "Project 2",
value: "project2",
},
],
},
Expand All @@ -84,7 +82,7 @@ export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps)
variant="outline"
role="combobox"
aria-expanded={open}
aria-label="Select a team"
aria-label="Select a project"
className={cn("w-[200px] justify-between", className)}
>
<Avatar className="mr-2 h-3 w-3">
Expand All @@ -101,8 +99,8 @@ export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps)
<PopoverContent className="w-[200px] p-0 ml-20">
<Command>
<CommandList>
<CommandInput placeholder="Search team..." />
<CommandEmpty>No team found.</CommandEmpty>
<CommandInput placeholder="Search project..." />
<CommandEmpty>No project found.</CommandEmpty>
{groups.map((group) => (
<CommandGroup key={group.label} heading={group.label}>
{group.teams.map((team) => (
Expand Down Expand Up @@ -137,21 +135,7 @@ export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps)
))}
</CommandList>
<CommandSeparator />
<CommandList>
<CommandGroup>
<DialogTrigger asChild>
<CommandItem
onSelect={() => {
setOpen(false)
setShowNewTeamDialog(true)
}}
>
<PlusCircledIcon className="mr-2 h-5 w-5" />
Create Team
</CommandItem>
</DialogTrigger>
</CommandGroup>
</CommandList>

</Command>
</PopoverContent>
</Popover>
Expand Down
4 changes: 2 additions & 2 deletions packages/webapp/src/components/api-keys/data/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { ColumnDef } from "@tanstack/react-table"


import { ApiKey } from "./schema"
import { DataTableColumnHeader } from "./../../jobs/components/data-table-column-header"
import { DataTableRowActions } from "./../../jobs/components/data-table-row-actions"
import { DataTableColumnHeader } from "../../shared/data-table-column-header"
import { DataTableRowActions } from "../../shared/data-table-row-actions"

export const columns: ColumnDef<ApiKey>[] = [
{
Expand Down
78 changes: 39 additions & 39 deletions packages/webapp/src/components/api-keys/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ChooseProjectSwitcher from "./components/choose-project";
import { useEffect, useState } from "react";
import { API_KEYS } from "./data/api-keys";
import { columns } from "./data/columns";
import { DataTable } from "../jobs/components/data-table";
import { DataTable } from "../shared/data-table";
import {
Dialog,
DialogContent,
Expand All @@ -26,50 +26,50 @@ export default function ApiKeysPage() {
const [apiKeys, setApiKeys] = useState<ApiKey[]>();

useEffect(() => {
async function loadTasks() {
//const fetchedTasks = await getTasks();
async function loadApiKeys() {
setApiKeys(API_KEYS);
}
loadTasks();
loadApiKeys();
}, []);
return (

<div className="flex items-center justify-between space-y-2">
<div className="flex-1 space-y-4 p-8 pt-6">
<div className="flex flex-col items-start justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Api Keys</h2>
<h2 className="text-lg font-bold tracking-tight">Manage your api keys.</h2>
</div>
<div className="flex space-y-8 md:flex pb-4">
return (
<div className="flex items-center justify-between space-y-2">
<div className="flex-1 space-y-4 p-8 pt-6">
<div className="flex flex-col items-start justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Api Keys</h2>
<h2 className="text-lg font-bold tracking-tight">Manage your api keys.</h2>
</div>
<div className="flex space-y-8 md:flex pb-4">
<div></div>
<ChooseProjectSwitcher className="w-52 mr-4" />
<Dialog>
<DialogTrigger asChild>
<Button>
<PlusCircledIcon className="mr-2 h-4 w-4" />
Create New Key
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add New Api Key</DialogTitle>
<DialogDescription>
Never share this key, you must saved it it will be displayed once !
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="url">Name</Label>
<Input id="url" placeholder="My Best Key For Finance Data" />
<DialogTrigger asChild>
<Button>
<PlusCircledIcon className="mr-2 h-4 w-4" />
Create New Key
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add New Api Key</DialogTitle>
<DialogDescription>
Never share this key, you must saved it it will be displayed once !
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="url">Name</Label>
<Input id="url" placeholder="My Best Key For Finance Data" />
</div>
</div>
</div>
<DialogFooter>
<Button>Create</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<DialogFooter>
<Button>Create</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
{apiKeys && <DataTable data={apiKeys} columns={columns} />}</div>
</div>
);
}
{apiKeys && <DataTable data={apiKeys} columns={columns} />}
</div>
</div>
);
}
36 changes: 36 additions & 0 deletions packages/webapp/src/components/configuration/components/AddLinkedAccount.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { PlusCircledIcon } from "@radix-ui/react-icons"

const AddLinkedAccount = () => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="col-span-3">
<PlusCircledIcon className="mr-2 h-4 w-4" />
Add Linked Users
</Button>
</DropdownMenuTrigger>

<DropdownMenuContent className="w-56 ml-20" align="end" forceMount>
<DropdownMenuGroup>
<DropdownMenuItem>
<p className="mr-10">Add a new linked user</p>
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg> </DropdownMenuItem>
<DropdownMenuItem>
Import your own linked users
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.81825 1.18188C7.64251 1.00615 7.35759 1.00615 7.18185 1.18188L4.18185 4.18188C4.00611 4.35762 4.00611 4.64254 4.18185 4.81828C4.35759 4.99401 4.64251 4.99401 4.81825 4.81828L7.05005 2.58648V9.49996C7.05005 9.74849 7.25152 9.94996 7.50005 9.94996C7.74858 9.94996 7.95005 9.74849 7.95005 9.49996V2.58648L10.1819 4.81828C10.3576 4.99401 10.6425 4.99401 10.8182 4.81828C10.994 4.64254 10.994 4.35762 10.8182 4.18188L7.81825 1.18188ZM2.5 9.99997C2.77614 9.99997 3 10.2238 3 10.5V12C3 12.5538 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2238 12.2239 9.99997 12.5 9.99997C12.7761 9.99997 13 10.2238 13 10.5V12C13 13.104 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2238 2.22386 9.99997 2.5 9.99997Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

export default AddLinkedAccount;
2 changes: 1 addition & 1 deletion packages/webapp/src/components/configuration/components/FieldMappingModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export function FModal() {
<CardFooter>
<Button>Define Field</Button>
</CardFooter>
</Card>
</Card>
</TabsContent>
<TabsContent value="password">
<Card>
Expand Down
29 changes: 15 additions & 14 deletions packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,30 @@ import {
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";
import { DataTable } from "@/components/shared/data-table";
import { MAPPINGS } from "../data/mappings";
import { columns } from "./columns";

export interface Connection {
organisation: string;
app: string;
status: string;
export interface Mapping {
standard_object: string;
source_app: string;
status: string;
category: string;
linkedUser: string;
source_field: string;
destination_field: string;
data_type: string;
date: string;
}

export default function FieldMappingsTable() {
const [connections, setTasks] = useState<Connection[]>();
const [mappings, setMappings] = useState<Mapping[]>();

useEffect(() => {
async function loadTasks() {
//const fetchedTasks = await getTasks();
setTasks(CONNECTIONS);
async function loadMappings() {
setMappings(MAPPINGS);
}

loadTasks();
loadMappings();
}, []);
return (
<>
Expand All @@ -51,7 +52,7 @@ export default function FieldMappingsTable() {
</CardContent>
</Card>
</div>
{connections && <DataTable data={connections} columns={columns} />}
{mappings && <DataTable data={mappings} columns={columns} />}
</div>
</>
)
Expand Down
Loading

0 comments on commit 420d370

Please sign in to comment.