From 420d3700f549f6f4358a80b8080a0b35d9a4ddae Mon Sep 17 00:00:00 2001 From: nael Date: Thu, 30 Nov 2023 15:44:58 +0100 Subject: [PATCH] :lipstick: Ui formatted ui --- packages/webapp/src/App.tsx | 2 +- .../api-keys/components/choose-project.tsx | 34 +-- .../src/components/api-keys/data/columns.tsx | 4 +- .../webapp/src/components/api-keys/index.tsx | 78 +++---- .../components/AddLinkedAccount.tsx | 36 +++ .../components/FieldMappingModal.tsx | 2 +- .../components/FieldMappingsTable.tsx | 29 +-- .../configuration/components/columns.tsx | 209 ++++++++++++++++++ .../components/configuration/data/data.tsx | 86 +++++++ .../components/configuration/data/mappings.ts | 62 ++++++ .../components/configuration/data/schema.ts | 16 ++ .../src/components/configuration/data/seed.ts | 20 ++ .../src/components/configuration/index.tsx | 127 ++--------- .../{Connection.tsx => ConnectionTable.tsx} | 12 +- .../{data => components}/columns.tsx | 6 +- .../src/components/connections/index.tsx | 2 +- .../dashboard/components/team-switcher.tsx | 38 +++- .../webapp/src/components/jobs/JobsTable.tsx | 31 +++ packages/webapp/src/components/jobs/Task.tsx | 34 --- .../components/jobs/components/columns.tsx | 10 +- .../components/jobs/data/{task.ts => jobs.ts} | 2 +- .../webapp/src/components/jobs/data/schema.ts | 4 +- packages/webapp/src/components/jobs/index.tsx | 4 +- .../data-table-column-header.tsx | 0 .../data-table-faceted-filter.tsx | 0 .../data-table-pagination.tsx | 0 .../data-table-row-actions.tsx | 0 .../data-table-toolbar.tsx | 2 +- .../data-table-view-options.tsx | 0 .../components => shared}/data-table.tsx | 4 +- .../{jobs/components => shared}/user-nav.tsx | 0 31 files changed, 603 insertions(+), 251 deletions(-) create mode 100644 packages/webapp/src/components/configuration/components/AddLinkedAccount.tsx create mode 100644 packages/webapp/src/components/configuration/components/columns.tsx create mode 100644 packages/webapp/src/components/configuration/data/data.tsx create mode 100644 packages/webapp/src/components/configuration/data/mappings.ts create mode 100644 packages/webapp/src/components/configuration/data/schema.ts create mode 100644 packages/webapp/src/components/configuration/data/seed.ts rename packages/webapp/src/components/connections/{Connection.tsx => ConnectionTable.tsx} (91%) rename packages/webapp/src/components/connections/{data => components}/columns.tsx (95%) create mode 100644 packages/webapp/src/components/jobs/JobsTable.tsx delete mode 100644 packages/webapp/src/components/jobs/Task.tsx rename packages/webapp/src/components/jobs/data/{task.ts => jobs.ts} (99%) rename packages/webapp/src/components/{jobs/components => shared}/data-table-column-header.tsx (100%) rename packages/webapp/src/components/{jobs/components => shared}/data-table-faceted-filter.tsx (100%) rename packages/webapp/src/components/{jobs/components => shared}/data-table-pagination.tsx (100%) rename packages/webapp/src/components/{jobs/components => shared}/data-table-row-actions.tsx (100%) rename packages/webapp/src/components/{jobs/components => shared}/data-table-toolbar.tsx (96%) rename packages/webapp/src/components/{jobs/components => shared}/data-table-view-options.tsx (100%) rename packages/webapp/src/components/{jobs/components => shared}/data-table.tsx (96%) rename packages/webapp/src/components/{jobs/components => shared}/user-nav.tsx (100%) diff --git a/packages/webapp/src/App.tsx b/packages/webapp/src/App.tsx index e0ce6d64f..b02217c6a 100644 --- a/packages/webapp/src/App.tsx +++ b/packages/webapp/src/App.tsx @@ -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 ( diff --git a/packages/webapp/src/components/api-keys/components/choose-project.tsx b/packages/webapp/src/components/api-keys/components/choose-project.tsx index d6d5675a5..b396b7f12 100644 --- a/packages/webapp/src/components/api-keys/components/choose-project.tsx +++ b/packages/webapp/src/components/api-keys/components/choose-project.tsx @@ -4,7 +4,6 @@ import * as React from "react" import { CaretSortIcon, CheckIcon, - PlusCircledIcon, } from "@radix-ui/react-icons" import { cn } from "@/lib/utils" @@ -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" @@ -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", }, ], }, @@ -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)} > @@ -101,8 +99,8 @@ export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps) - - No team found. + + No project found. {groups.map((group) => ( {group.teams.map((team) => ( @@ -137,21 +135,7 @@ export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps) ))} - - - - { - setOpen(false) - setShowNewTeamDialog(true) - }} - > - - Create Team - - - - + diff --git a/packages/webapp/src/components/api-keys/data/columns.tsx b/packages/webapp/src/components/api-keys/data/columns.tsx index 88766278a..22eb0417c 100644 --- a/packages/webapp/src/components/api-keys/data/columns.tsx +++ b/packages/webapp/src/components/api-keys/data/columns.tsx @@ -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[] = [ { diff --git a/packages/webapp/src/components/api-keys/index.tsx b/packages/webapp/src/components/api-keys/index.tsx index d910a1eab..5297416b6 100644 --- a/packages/webapp/src/components/api-keys/index.tsx +++ b/packages/webapp/src/components/api-keys/index.tsx @@ -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, @@ -26,50 +26,50 @@ export default function ApiKeysPage() { const [apiKeys, setApiKeys] = useState(); useEffect(() => { - async function loadTasks() { - //const fetchedTasks = await getTasks(); + async function loadApiKeys() { setApiKeys(API_KEYS); } - loadTasks(); + loadApiKeys(); }, []); - return ( -
-
-
-

Api Keys

-

Manage your api keys.

-
-
+ return ( +
+
+
+

Api Keys

+

Manage your api keys.

+
+
- - - - - - Add New Api Key - - Never share this key, you must saved it it will be displayed once ! - - -
-
- - + + + + + + Add New Api Key + + Never share this key, you must saved it it will be displayed once ! + + +
+
+ + +
-
- - - - -
+ + + + +
- {apiKeys && }
-
- ); - } \ No newline at end of file + {apiKeys && } +
+
+ ); +} \ No newline at end of file diff --git a/packages/webapp/src/components/configuration/components/AddLinkedAccount.tsx b/packages/webapp/src/components/configuration/components/AddLinkedAccount.tsx new file mode 100644 index 000000000..0f6278178 --- /dev/null +++ b/packages/webapp/src/components/configuration/components/AddLinkedAccount.tsx @@ -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 ( + + + + + + + + +

Add a new linked user

+ + + Import your own linked users + + + + + + ) +} + +export default AddLinkedAccount; \ No newline at end of file diff --git a/packages/webapp/src/components/configuration/components/FieldMappingModal.tsx b/packages/webapp/src/components/configuration/components/FieldMappingModal.tsx index d0b145b7a..fbf91d101 100644 --- a/packages/webapp/src/components/configuration/components/FieldMappingModal.tsx +++ b/packages/webapp/src/components/configuration/components/FieldMappingModal.tsx @@ -88,7 +88,7 @@ export function FModal() { - + diff --git a/packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx b/packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx index 62d58b0e5..7d73461df 100644 --- a/packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx +++ b/packages/webapp/src/components/configuration/components/FieldMappingsTable.tsx @@ -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(); + const [mappings, setMappings] = useState(); useEffect(() => { - async function loadTasks() { - //const fetchedTasks = await getTasks(); - setTasks(CONNECTIONS); + async function loadMappings() { + setMappings(MAPPINGS); } - loadTasks(); + loadMappings(); }, []); return ( <> @@ -51,7 +52,7 @@ export default function FieldMappingsTable() {
- {connections && } + {mappings && } ) diff --git a/packages/webapp/src/components/configuration/components/columns.tsx b/packages/webapp/src/components/configuration/components/columns.tsx new file mode 100644 index 000000000..e8c69936a --- /dev/null +++ b/packages/webapp/src/components/configuration/components/columns.tsx @@ -0,0 +1,209 @@ +"use client" + +import { ColumnDef } from "@tanstack/react-table" + +import { Badge } from "@/components/ui/badge" +import { Checkbox } from "@/components/ui/checkbox" + +import { labels, labels2, priorities, statuses } from "../../configuration/data/data" +import { DataTableColumnHeader } from "../../shared/data-table-column-header" +import { DataTableRowActions } from "../../shared/data-table-row-actions" +import { Mapping } from "../data/schema" + +export const columns: ColumnDef[] = [ + { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + className="translate-y-[2px]" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + className="translate-y-[2px]" + /> + ), + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "standard_object", + header: ({ column }) => ( + + ), + cell: ({ row }) =>{ + const label = labels2.find((label) => label.value === row.original.standard_object) + + return ( +
+ {label && {label.label}} +
+ ) + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "provider", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const label = labels.find((label) => label.value === row.original.source_app) + + return ( +
+ {label && {label.label}} +
+ ) + }, + }, + { + accessorKey: "status", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const status = statuses.find( + (status) => status.value === row.getValue("status") + ) + + if (!status) { + return null + } + + return ( +
+ {status.icon && ( + + )} + {status.label} +
+ ) + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)) + }, + }, + { + accessorKey: "category", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const direction = priorities.find( + (direction) => direction.value === row.getValue("category") + ) + + if (!direction) { + return null + } + + return ( +
+ {direction.icon && ( + + )} + {direction.label} +
+ ) + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)) + }, + }, + { + accessorKey: "source_field", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const status = statuses.find( + (status) => status.value === row.getValue("source_field") + ) + + if (!status) { + return null + } + + return ( +
+ {status.icon && ( + + )} + {status.label} +
+ ) + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)) + }, + }, + { + accessorKey: "destination_field", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const label = labels.find((label) => label.value === row.original.destination_field) + + return ( +
+ {label && {label.label}} + + {row.getValue("organisation")} + +
+ ) + }, + }, + { + accessorKey: "data_type", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const label = labels.find((label) => label.value === row.original.data_type) + + return ( +
+ {label && {label.label}} + + {row.getValue("date")} + +
+ ) + }, + }, + { + accessorKey: "date", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const label = labels.find((label) => label.value === row.original.date) + + return ( +
+ {label && {label.label}} + + {row.getValue("date")} + +
+ ) + }, + }, + { + id: "actions", + cell: ({ row }) => , + }, +] \ No newline at end of file diff --git a/packages/webapp/src/components/configuration/data/data.tsx b/packages/webapp/src/components/configuration/data/data.tsx new file mode 100644 index 000000000..ba3c3d7f4 --- /dev/null +++ b/packages/webapp/src/components/configuration/data/data.tsx @@ -0,0 +1,86 @@ +import { + ArrowDownIcon, + ArrowRightIcon, + ArrowUpIcon, + CheckCircledIcon, + CircleIcon, + CrossCircledIcon, + QuestionMarkCircledIcon, + StopwatchIcon, + } from "@radix-ui/react-icons" + + export const labels = [ + { + value: "/crm/task", + label: "/crm/task", + }, + { + value: "/crm/notes", + label: "/crm/notes", + }, + { + value: "/crm/contact", + label: "/crm/contact", + }, + ] + + export const labels2 = [ + { + value: "GET", + label: "GET", + }, + { + value: "POST", + label: "POST", + }, + { + value: "GET", + label: "GET", + }, + ] + + export const statuses = [ + { + value: "backlog", + label: "Backlog", + icon: QuestionMarkCircledIcon, + }, + { + value: "todo", + label: "Todo", + icon: CircleIcon, + }, + { + value: "in progress", + label: "In Progress", + icon: StopwatchIcon, + }, + { + value: "done", + label: "Done", + icon: CheckCircledIcon, + }, + { + value: "canceled", + label: "Canceled", + icon: CrossCircledIcon, + }, + ] + + export const priorities = [ + { + label: "Low", + value: "low", + icon: ArrowDownIcon, + }, + { + label: "Medium", + value: "medium", + icon: ArrowRightIcon, + }, + { + label: "High", + value: "high", + icon: ArrowUpIcon, + }, + ] \ No newline at end of file diff --git a/packages/webapp/src/components/configuration/data/mappings.ts b/packages/webapp/src/components/configuration/data/mappings.ts new file mode 100644 index 000000000..eba75bb9c --- /dev/null +++ b/packages/webapp/src/components/configuration/data/mappings.ts @@ -0,0 +1,62 @@ +export const MAPPINGS = [ + { + "standard_object": "Contact", + "source_app": "Hubspot", + "status": "defined", + "category": "CRM", + "source_field": "favorite_color", + "destination_field": "", + "data_type": "string", + "date": "Jul 31 2019" + }, + { + "standard_object": "Contact", + "source_app": "Zoho", + "status": "defined", + "category": "CRM", + "source_field": "favorite_team", + "destination_field": "fav_team", + "data_type": "string", + "date": "Jul 31 2019" + }, + { + "standard_object": "Company", + "source_app": "Hubspot", + "status": "defined", + "category": "CRM", + "source_field": "favorite_color", + "destination_field": "fav_color", + "data_type": "string", + "date": "Jul 31 2019" + }, + { + "standard_object": "Ticket", + "source_app": "Slack", + "status": "mapped", + "category": "TICKETING", + "source_field": "favorite_color", + "destination_field": "fav_color", + "data_type": "string", + "date": "Jul 31 2019" + }, + { + "standard_object": "Contact", + "source_app": "Hubspot", + "status": "defined", + "category": "CRM", + "source_field": "favorite_color", + "destination_field": "fav_color", + "data_type": "string", + "date": "Jul 31 2019" + }, + { + "standard_object": "Contact", + "source_app": "Hubspot", + "status": "defined", + "category": "CRM", + "source_field": "favorite_color", + "destination_field": "fav_color", + "data_type": "string", + "date": "Jul 31 2019" + }, +] \ No newline at end of file diff --git a/packages/webapp/src/components/configuration/data/schema.ts b/packages/webapp/src/components/configuration/data/schema.ts new file mode 100644 index 000000000..ba6a7950d --- /dev/null +++ b/packages/webapp/src/components/configuration/data/schema.ts @@ -0,0 +1,16 @@ +import { z } from "zod" + +// We're keeping a simple non-relational schema here. +// IRL, you will have a schema for your data models. +export const mappingSchema = z.object({ + standard_object: z.string(), + source_app: z.string(), + status: z.string(), + category: z.string(), + source_field: z.string(), + destination_field: z.string(), + data_type: z.string(), + date: z.string() +}) + +export type Mapping = z.infer \ No newline at end of file diff --git a/packages/webapp/src/components/configuration/data/seed.ts b/packages/webapp/src/components/configuration/data/seed.ts new file mode 100644 index 000000000..b35a5ef17 --- /dev/null +++ b/packages/webapp/src/components/configuration/data/seed.ts @@ -0,0 +1,20 @@ +import fs from "fs" +import path from "path" +import { faker } from "@faker-js/faker" + +import { labels, priorities, statuses } from "./data" + +const tasks = Array.from({ length: 100 }, () => ({ + id: `TASK-${faker.number.int({ min: 1000, max: 9999 })}`, + title: faker.hacker.phrase().replace(/^./, (letter) => letter.toUpperCase()), + status: faker.helpers.arrayElement(statuses).value, + label: faker.helpers.arrayElement(labels).value, + direction: faker.helpers.arrayElement(priorities).value, +})) + +fs.writeFileSync( + path.join(__dirname, "tasks.json"), + JSON.stringify(tasks, null, 2) +) + +console.log("✅ Tasks data generated.") \ No newline at end of file diff --git a/packages/webapp/src/components/configuration/index.tsx b/packages/webapp/src/components/configuration/index.tsx index dd95e4d10..d84014a6e 100644 --- a/packages/webapp/src/components/configuration/index.tsx +++ b/packages/webapp/src/components/configuration/index.tsx @@ -19,29 +19,12 @@ import { import { RecentSales } from "../dashboard/components/recent-sales"; import { Button } from "../ui/button"; import { PlusCircledIcon } from "@radix-ui/react-icons"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" import { FModal } from "./components/FieldMappingModal" import { Separator } from "../ui/separator"; import FieldMappingsTable from "./components/FieldMappingsTable"; +import AddLinkedAccount from "./components/AddLinkedAccount"; export default function ConfigurationPage() { - /*const {getRootProps, getInputProps} = useDropzone({ - // Implement file upload handling here - onDrop: (acceptedFiles) => { - acceptedFiles.forEach((file) => { - // Handle file upload here - console.log(file); - }); - } - });*/ - - return (
@@ -57,54 +40,22 @@ export default function ConfigurationPage() { oAuth -
- {/* + + - - Import your origin users - + Your Linked Accounts + + You connected 1389 linked accounts. + - - -

Drag 'n' drop some files here, or click to select files

+ + + - */} - - - - - - - - -

Add a new linked user

- - - Import your own linked users - - - - - - - - - Your Linked Accounts - - You connected 1389 linked accounts. - - - - - - - +
@@ -117,53 +68,21 @@ export default function ConfigurationPage() { - {/* - Edit profile - - Make changes to your profile here. Click save when you're done. - - -
-
- - -
-
- - -
-
- - - */} - + - - - Your Fields Mapping - - You built 30 fields mapping. - - - - - - - + + Your Fields Mapping + + You built 30 fields mapping. + + + + + + +
diff --git a/packages/webapp/src/components/connections/Connection.tsx b/packages/webapp/src/components/connections/ConnectionTable.tsx similarity index 91% rename from packages/webapp/src/components/connections/Connection.tsx rename to packages/webapp/src/components/connections/ConnectionTable.tsx index 0e5270f2c..77f384ffa 100644 --- a/packages/webapp/src/components/connections/Connection.tsx +++ b/packages/webapp/src/components/connections/ConnectionTable.tsx @@ -1,5 +1,5 @@ -import { columns } from "./data/columns" -import { DataTable } from "./../jobs/components/data-table" +import { columns } from "./components/columns" +import { DataTable } from "../shared/data-table" import { useEffect, useState } from "react" import { CONNECTIONS } from "./data/connection"; import { @@ -23,15 +23,15 @@ export interface Connection { } export default function ConnectionTable() { - const [connections, setTasks] = useState(); + const [connections, setConnections] = useState(); useEffect(() => { - async function loadTasks() { + async function loadConnections() { //const fetchedTasks = await getTasks(); - setTasks(CONNECTIONS); + setConnections(CONNECTIONS); } - loadTasks(); + loadConnections(); }, []); return ( <> diff --git a/packages/webapp/src/components/connections/data/columns.tsx b/packages/webapp/src/components/connections/components/columns.tsx similarity index 95% rename from packages/webapp/src/components/connections/data/columns.tsx rename to packages/webapp/src/components/connections/components/columns.tsx index 8de22d898..d77e011bb 100644 --- a/packages/webapp/src/components/connections/data/columns.tsx +++ b/packages/webapp/src/components/connections/components/columns.tsx @@ -6,9 +6,9 @@ import { Badge } from "@/components/ui/badge" import { Checkbox } from "@/components/ui/checkbox" import { labels, priorities, statuses } from "../data/data" -import { Connection } from "./schema" -import { DataTableColumnHeader } from "./../../jobs/components/data-table-column-header" -import { DataTableRowActions } from "./../../jobs/components/data-table-row-actions" +import { Connection } from "../data/schema" +import { DataTableColumnHeader } from "../../shared/data-table-column-header" +import { DataTableRowActions } from "../../shared/data-table-row-actions" export const columns: ColumnDef[] = [ { diff --git a/packages/webapp/src/components/connections/index.tsx b/packages/webapp/src/components/connections/index.tsx index 59dc8edc7..9398ec313 100644 --- a/packages/webapp/src/components/connections/index.tsx +++ b/packages/webapp/src/components/connections/index.tsx @@ -1,4 +1,4 @@ -import ConnectionTable from "./Connection"; +import ConnectionTable from "./ConnectionTable"; export default function ConnectionsPage() { return ( diff --git a/packages/webapp/src/components/dashboard/components/team-switcher.tsx b/packages/webapp/src/components/dashboard/components/team-switcher.tsx index ad7760cc6..4d88b4d8f 100644 --- a/packages/webapp/src/components/dashboard/components/team-switcher.tsx +++ b/packages/webapp/src/components/dashboard/components/team-switcher.tsx @@ -48,6 +48,23 @@ import { } from "@/components/ui/select" const groups = [ + { + label: "Projects", + teams: [ + { + label: "Financial Project", + value: "personal", + }, + { + label: "Data Project", + value: "personal1", + }, + { + label: "Marketing Project", + value: "personal2", + }, + ], + }, { label: "Teams", teams: [ @@ -85,15 +102,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { role="combobox" aria-expanded={open} aria-label="Select a team" - className={cn("w-[200px] justify-between", className)} + className={cn("w-[250px] justify-between", className)} > - - - SC - + {selectedTeam.label} @@ -150,6 +161,17 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { Create Team + + { + setOpen(false) + setShowNewTeamDialog(true) + }} + > + + Create Project + + diff --git a/packages/webapp/src/components/jobs/JobsTable.tsx b/packages/webapp/src/components/jobs/JobsTable.tsx new file mode 100644 index 000000000..3167b3473 --- /dev/null +++ b/packages/webapp/src/components/jobs/JobsTable.tsx @@ -0,0 +1,31 @@ +import { columns } from "./components/columns" +import { DataTable } from "../shared/data-table" +import { useEffect, useState } from "react" +import { JOBS } from "./data/JOBS"; + +export interface Job { + method: string; + url: string; + status: string; + direction: string; + integration: string; + organisation: string; + date: string; +} + +export default function JobsTable() { + const [jobs, setJobs] = useState(); + + useEffect(() => { + async function loadJobs() { + setJobs(JOBS); + } + + loadJobs(); + }, []); + return ( + <> + {jobs && } + + ) +} \ No newline at end of file diff --git a/packages/webapp/src/components/jobs/Task.tsx b/packages/webapp/src/components/jobs/Task.tsx deleted file mode 100644 index dfc275299..000000000 --- a/packages/webapp/src/components/jobs/Task.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { columns } from "./components/columns" -import { DataTable } from "./components/data-table" -import { useEffect, useState } from "react" -import { TASKS } from "./data/task"; - -export interface Task { - method: string; - url: string; - status: string; - direction: string; - integration: string; - organisation: string; - date: string; -} - -export default function TaskPage() { - const [tasks, setTasks] = useState(); - - useEffect(() => { - async function loadTasks() { - //const fetchedTasks = await getTasks(); - setTasks(TASKS); - } - - loadTasks(); - }, []); - return ( - <> - - {tasks && } - - - ) -} \ No newline at end of file diff --git a/packages/webapp/src/components/jobs/components/columns.tsx b/packages/webapp/src/components/jobs/components/columns.tsx index 9648b62f5..e28b9bfbf 100644 --- a/packages/webapp/src/components/jobs/components/columns.tsx +++ b/packages/webapp/src/components/jobs/components/columns.tsx @@ -5,12 +5,12 @@ import { ColumnDef } from "@tanstack/react-table" import { Badge } from "@/components/ui/badge" import { Checkbox } from "@/components/ui/checkbox" -import { labels, labels2, priorities, statuses } from "../data/data" -import { Task } from "../data/schema" -import { DataTableColumnHeader } from "./data-table-column-header" -import { DataTableRowActions } from "./data-table-row-actions" +import { labels, labels2, priorities, statuses } from "../../configuration/data/data" +import { Job } from "../../configuration/data/schema" +import { DataTableColumnHeader } from "../../shared/data-table-column-header" +import { DataTableRowActions } from "../../shared/data-table-row-actions" -export const columns: ColumnDef[] = [ +export const columns: ColumnDef[] = [ { id: "select", header: ({ table }) => ( diff --git a/packages/webapp/src/components/jobs/data/task.ts b/packages/webapp/src/components/jobs/data/jobs.ts similarity index 99% rename from packages/webapp/src/components/jobs/data/task.ts rename to packages/webapp/src/components/jobs/data/jobs.ts index f80d686e4..cd5606bad 100644 --- a/packages/webapp/src/components/jobs/data/task.ts +++ b/packages/webapp/src/components/jobs/data/jobs.ts @@ -1,4 +1,4 @@ -export const TASKS = [ +export const JOBS = [ { "method": "GET", "integration": "You can't compress the program without quantifying the open-source SSD pixel!", diff --git a/packages/webapp/src/components/jobs/data/schema.ts b/packages/webapp/src/components/jobs/data/schema.ts index 855a9aca0..63b81348c 100644 --- a/packages/webapp/src/components/jobs/data/schema.ts +++ b/packages/webapp/src/components/jobs/data/schema.ts @@ -2,7 +2,7 @@ import { z } from "zod" // We're keeping a simple non-relational schema here. // IRL, you will have a schema for your data models. -export const taskSchema = z.object({ +export const jobSchema = z.object({ method: z.string(), url: z.string(), status: z.string(), @@ -12,4 +12,4 @@ export const taskSchema = z.object({ date: z.string() }) -export type Task = z.infer \ No newline at end of file +export type Job = z.infer \ No newline at end of file diff --git a/packages/webapp/src/components/jobs/index.tsx b/packages/webapp/src/components/jobs/index.tsx index 0f74e1b96..01dce4126 100644 --- a/packages/webapp/src/components/jobs/index.tsx +++ b/packages/webapp/src/components/jobs/index.tsx @@ -1,4 +1,4 @@ -import TaskPage from "./Task"; +import JobsTable from "./JobsTable"; export default function JobsPage() { return ( @@ -7,7 +7,7 @@ export default function JobsPage() {

Jobs

- +
); diff --git a/packages/webapp/src/components/jobs/components/data-table-column-header.tsx b/packages/webapp/src/components/shared/data-table-column-header.tsx similarity index 100% rename from packages/webapp/src/components/jobs/components/data-table-column-header.tsx rename to packages/webapp/src/components/shared/data-table-column-header.tsx diff --git a/packages/webapp/src/components/jobs/components/data-table-faceted-filter.tsx b/packages/webapp/src/components/shared/data-table-faceted-filter.tsx similarity index 100% rename from packages/webapp/src/components/jobs/components/data-table-faceted-filter.tsx rename to packages/webapp/src/components/shared/data-table-faceted-filter.tsx diff --git a/packages/webapp/src/components/jobs/components/data-table-pagination.tsx b/packages/webapp/src/components/shared/data-table-pagination.tsx similarity index 100% rename from packages/webapp/src/components/jobs/components/data-table-pagination.tsx rename to packages/webapp/src/components/shared/data-table-pagination.tsx diff --git a/packages/webapp/src/components/jobs/components/data-table-row-actions.tsx b/packages/webapp/src/components/shared/data-table-row-actions.tsx similarity index 100% rename from packages/webapp/src/components/jobs/components/data-table-row-actions.tsx rename to packages/webapp/src/components/shared/data-table-row-actions.tsx diff --git a/packages/webapp/src/components/jobs/components/data-table-toolbar.tsx b/packages/webapp/src/components/shared/data-table-toolbar.tsx similarity index 96% rename from packages/webapp/src/components/jobs/components/data-table-toolbar.tsx rename to packages/webapp/src/components/shared/data-table-toolbar.tsx index 915bc39a8..d61d7d4f1 100644 --- a/packages/webapp/src/components/jobs/components/data-table-toolbar.tsx +++ b/packages/webapp/src/components/shared/data-table-toolbar.tsx @@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DataTableViewOptions } from "./data-table-view-options" -import { priorities, statuses } from "../data/data" +import { priorities, statuses } from "../configuration/data/data" import { DataTableFacetedFilter } from "./data-table-faceted-filter" interface DataTableToolbarProps { diff --git a/packages/webapp/src/components/jobs/components/data-table-view-options.tsx b/packages/webapp/src/components/shared/data-table-view-options.tsx similarity index 100% rename from packages/webapp/src/components/jobs/components/data-table-view-options.tsx rename to packages/webapp/src/components/shared/data-table-view-options.tsx diff --git a/packages/webapp/src/components/jobs/components/data-table.tsx b/packages/webapp/src/components/shared/data-table.tsx similarity index 96% rename from packages/webapp/src/components/jobs/components/data-table.tsx rename to packages/webapp/src/components/shared/data-table.tsx index c57986200..d120b56c9 100644 --- a/packages/webapp/src/components/jobs/components/data-table.tsx +++ b/packages/webapp/src/components/shared/data-table.tsx @@ -25,8 +25,8 @@ import { TableRow, } from "@/components/ui/table" -import { DataTablePagination } from "../components/data-table-pagination" -import { DataTableToolbar } from "../components/data-table-toolbar" +import { DataTablePagination } from "./data-table-pagination" +import { DataTableToolbar } from "./data-table-toolbar" interface DataTableProps { columns: ColumnDef[] diff --git a/packages/webapp/src/components/jobs/components/user-nav.tsx b/packages/webapp/src/components/shared/user-nav.tsx similarity index 100% rename from packages/webapp/src/components/jobs/components/user-nav.tsx rename to packages/webapp/src/components/shared/user-nav.tsx