diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx new file mode 100644 index 0000000..8e14453 --- /dev/null +++ b/pkgs/ui/src/app/access-point/page.tsx @@ -0,0 +1,16 @@ +"use client"; + +import {RecentActivity} from "@/components/dashboard/activity"; +import {APServiceRepositoryDummyData, APServiceRepositoryTableConfig} from "@/mock/ap/serviceRepository"; +import {APAttachmentsDummyData, APAttachmentsTableConfig} from "@/mock/ap/attachmentData"; + +export default function AccessPoint() { + return ( +
+
+ +
+ ) +} \ No newline at end of file diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx new file mode 100644 index 0000000..28e905f --- /dev/null +++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx @@ -0,0 +1,13 @@ +"use client"; + +import {RecentActivity} from "@/components/dashboard/activity"; +import {DLGResolutionDummyData, DLGResolutionTableConfig} from "@/mock/dlg/attachmentData"; + +export default function DLG() { + return ( +
+
+
+ ) +} \ No newline at end of file diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx index 9b2c52f..851ee4a 100644 --- a/pkgs/ui/src/app/layout.tsx +++ b/pkgs/ui/src/app/layout.tsx @@ -47,9 +47,9 @@ export default function RootLayout({ return ( - Clan.lol + Service-Aware Networks - + @@ -72,9 +72,8 @@ export default function RootLayout({ onClose={() => setShowSidebar(false)} />
@@ -89,7 +88,7 @@ export default function RootLayout({
Clan Logo
diff --git a/pkgs/ui/src/app/theme/themes.ts b/pkgs/ui/src/app/theme/themes.ts index 13e7af1..49d4427 100644 --- a/pkgs/ui/src/app/theme/themes.ts +++ b/pkgs/ui/src/app/theme/themes.ts @@ -4,7 +4,8 @@ import { createTheme, } from "@mui/material/styles"; -import colors from "@clan/colors/colors.json"; +// import colors from "@clan/colors/colors.json"; +import colors from "../../../../theme/src/colors.json"; const { palette, common } = colors.ref; const commonOptions: Partial = { @@ -46,8 +47,8 @@ export const darkTheme = createTheme({ mode: "dark", ...commonPalette, background: { - default: palette.neutral2.value, - paper: palette.neutral5.value, + default: palette.neutral20.value, + paper: palette.neutral50.value, }, common: { black: common.black.value, diff --git a/pkgs/ui/src/components/dashboard/activity/index.tsx b/pkgs/ui/src/components/dashboard/activity/index.tsx index 7276576..01cf015 100644 --- a/pkgs/ui/src/components/dashboard/activity/index.tsx +++ b/pkgs/ui/src/components/dashboard/activity/index.tsx @@ -1,12 +1,26 @@ -import { DashboardCard } from "@/components/card"; -import { NoDataOverlay } from "@/components/noDataOverlay"; +import {DashboardCard} from "@/components/card"; +import {NoDataOverlay} from "@/components/noDataOverlay"; +import {ReactNode} from "react"; +import CustomTable from "@/components/table"; +import {ICustomTable} from "@/types"; -export const RecentActivity = () => { - return ( - -
- -
- - ); +interface DashboardCardProps { + title: ReactNode; + data: ReactNode; + configuration: ICustomTable; +} + +export const RecentActivity = (props: DashboardCardProps) => { + const {title, data, configuration} = props; + return ( + + {/*
*/} + {/* */} + {/*
*/} + +
+ +
+ + ); }; diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx index c75bfa2..1bdfe6d 100644 --- a/pkgs/ui/src/components/sidebar/index.tsx +++ b/pkgs/ui/src/components/sidebar/index.tsx @@ -8,13 +8,17 @@ import { ListItemText, } from "@mui/material"; import Image from "next/image"; -import { ReactNode } from "react"; +import React, { ReactNode } from "react"; import { tw } from "@/utils/tailwind"; -import AssignmentIndIcon from "@mui/icons-material/AssignmentInd"; + import Link from "next/link"; -import WysiwygIcon from "@mui/icons-material/Wysiwyg"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; +import HomeIcon from '@mui/icons-material/Home'; +import HubIcon from '@mui/icons-material/Hub'; +import PersonIcon from '@mui/icons-material/Person'; +import RouterIcon from '@mui/icons-material/Router'; +import StorageIcon from '@mui/icons-material/Storage'; type MenuEntry = { icon: ReactNode; @@ -27,17 +31,41 @@ type MenuEntry = { const menuEntries: MenuEntry[] = [ { - icon: , - label: "Freelance", + icon: , + label: "Home", to: "/", disabled: false, }, { - icon: , - label: "Blog", - to: "/blog", + icon: , + label: "Entities", + to: "/entities", disabled: true, }, + { + icon: , + label: "C1", + to: "/client-1", + disabled: false, + }, + { + icon: , + label: "C2", + to: "/client-2", + disabled: false, + }, + { + icon: , + label: "AP", + to: "/access-point", + disabled: false, + }, + { + icon: , + label: "DLG", + to: "/distributed-ledger-gateway", + disabled: false, + } ]; const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`; @@ -50,17 +78,22 @@ interface SidebarProps { export function Sidebar(props: SidebarProps) { const { show, onClose } = props; + const [activeMenuItem, setActiveMenuItem] = React.useState('/'); + + const handleMenuItemClick = (path: string) => { + setActiveMenuItem(path); + }; + return (