From bb9185ddc4d6327eba178ba8e5d7b418ff47dc0a Mon Sep 17 00:00:00 2001 From: Sinan Date: Sat, 17 Aug 2024 12:25:10 +0530 Subject: [PATCH] admin page side bar and layout added --- client/app/admin/layout.tsx | 16 ++ client/app/admin/page.tsx | 33 ++- client/app/admin/signin/page.tsx | 10 +- client/app/layout.tsx | 4 +- client/components/SideBar.tsx | 61 ++++++ .../modles/OtpVerificationModel.tsx | 34 ---- client/components/ui/sidebar.tsx | 189 ++++++++++++++++++ client/constants/{index.ts => index.tsx} | 38 +++- client/lib/utils.ts | 6 + client/package-lock.json | 50 +++++ client/package.json | 2 + 11 files changed, 395 insertions(+), 48 deletions(-) create mode 100644 client/app/admin/layout.tsx create mode 100644 client/components/SideBar.tsx create mode 100644 client/components/ui/sidebar.tsx rename client/constants/{index.ts => index.tsx} (61%) diff --git a/client/app/admin/layout.tsx b/client/app/admin/layout.tsx new file mode 100644 index 00000000..eb020216 --- /dev/null +++ b/client/app/admin/layout.tsx @@ -0,0 +1,16 @@ +'use client' +import React from "react"; +import SideBar from "@/components/SideBar"; +import { usePathname } from "next/navigation"; + +const AdminLayoutWrapper = ({ children }: { children: React.ReactNode }) => { + const pathname = usePathname(); + return ( +
+ {!pathname.includes("/signin") && } +
{children}
+
+ ); +}; + +export default AdminLayoutWrapper; diff --git a/client/app/admin/page.tsx b/client/app/admin/page.tsx index 983ebb85..510fc903 100644 --- a/client/app/admin/page.tsx +++ b/client/app/admin/page.tsx @@ -1,9 +1,30 @@ +'use server' import React from 'react' -const page = () => { - return ( -
page
- ) -} +const Dashboard = () => { + return ( +
+
+
+ {[...new Array(4)].map((i) => ( +
+ ))} +
+
+ {[...new Array(2)].map((i) => ( +
+ ))} +
+
+
+ ); + }; + -export default page \ No newline at end of file +export default Dashboard \ No newline at end of file diff --git a/client/app/admin/signin/page.tsx b/client/app/admin/signin/page.tsx index 26b30e4b..148613e5 100644 --- a/client/app/admin/signin/page.tsx +++ b/client/app/admin/signin/page.tsx @@ -1,8 +1,8 @@ +'use server' import SigninForm from "@/components/forms/admin/SigninForm"; import Image from "next/image"; import Link from "next/link"; -const SignIn = ()=> { - +const SignIn = () => { return (
@@ -17,7 +17,7 @@ const SignIn = ()=> {

- © 2024 AVM Ayurveda's + © 2024 AVM Ayurveda's

Patient @@ -35,6 +35,6 @@ const SignIn = ()=> { />
); -} +}; -export default SignIn \ No newline at end of file +export default SignIn; diff --git a/client/app/layout.tsx b/client/app/layout.tsx index 44af0b9a..0ec4ffc3 100644 --- a/client/app/layout.tsx +++ b/client/app/layout.tsx @@ -29,8 +29,8 @@ export default function RootLayout({ {children} diff --git a/client/components/SideBar.tsx b/client/components/SideBar.tsx new file mode 100644 index 00000000..92d1721d --- /dev/null +++ b/client/components/SideBar.tsx @@ -0,0 +1,61 @@ +"use client"; +import React, { useState } from "react"; +import { Sidebar, SidebarBody, SidebarLink } from "@/components/ui/sidebar"; +import Link from "next/link"; +import Image from "next/image"; +import { AdminSideBarLinks } from "@/constants"; + +const SideBar= () =>{ + const [open, setOpen] = useState(true); + + return ( +
+ + +
+ +
+ {AdminSideBarLinks.map((link, idx) => ( + + ))} +
+
+
+ + ), + }} + /> +
+ + + +
+ ); +} + +export const Logo = () => { + return ( + + Logo + AVM Ayurveda + + ); +}; + +export default SideBar \ No newline at end of file diff --git a/client/components/modles/OtpVerificationModel.tsx b/client/components/modles/OtpVerificationModel.tsx index 4e3ba329..72c07c4b 100644 --- a/client/components/modles/OtpVerificationModel.tsx +++ b/client/components/modles/OtpVerificationModel.tsx @@ -93,37 +93,3 @@ const OtpVerificationModel = () => { export default OtpVerificationModel; - -// GET /patient/signin 200 in 354ms -// ✓ Compiled in 730ms (1527 modules) - -// <--- Last few GCs ---> - -// [8600:0000023A945E0B90] 2025911 ms: Mark-Compact (reduce) 391.6 (410.8) -> 390.8 (410.0) MB, 448.11 / 0.00 ms (average mu = 0.899, current mu = 0.000) external memory pressure; GC in old space requested -// [8600:0000023A945E0B90] 2026075 ms: Scavenge 391.8 (410.0) -> 391.3 (411.0) MB, 5.93 / 0.00 ms (average mu = 0.899, current mu = 0.000) allocation failure; - - -// <--- JS stacktrace ---> - -// FATAL ERROR: NewSpace::EnsureCurrentCapacity Allocation failed - JavaScript heap out of memory -// 1: 00007FF7083A436F -// 2: 00007FF70831C686 -// 3: 00007FF70831E471 -// 4: 00007FF708D8B281 -// 5: 00007FF708D74A18 -// 6: 00007FF708BD60A0 -// 7: 00007FF708BAF580 -// 8: 00007FF708BDCCEA -// 9: 00007FF708BDF7AC -// 10: 00007FF708BD2DC0 -// 11: 00007FF708BD0913 -// 12: 00007FF708AD2682 -// 13: 00007FF708D38BC4 -// 14: 00007FF708D38351 -// 15: 00007FF708D37DD0 -// 16: 00007FF708E3C74E -// 17: 00007FF708DAB4C3 -// 18: 00007FF708EC3A16 -// 19: 00007FF708E2D7CF -// 20: 00007FF708DAB4C3 -// 21: 00007FF68A4F4B64 diff --git a/client/components/ui/sidebar.tsx b/client/components/ui/sidebar.tsx new file mode 100644 index 00000000..ee5c5c59 --- /dev/null +++ b/client/components/ui/sidebar.tsx @@ -0,0 +1,189 @@ +"use client"; +import { cn } from "@/lib/utils"; +import Link, { LinkProps } from "next/link"; +import React, { useState, createContext, useContext } from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { IconMenu2, IconX } from "@tabler/icons-react"; + +interface Links { + label: string; + href: string; + icon: React.JSX.Element | React.ReactNode; +} + +interface SidebarContextProps { + open: boolean; + setOpen: React.Dispatch>; + animate: boolean; +} + +const SidebarContext = createContext( + undefined +); + +export const useSidebar = () => { + const context = useContext(SidebarContext); + if (!context) { + throw new Error("useSidebar must be used within a SidebarProvider"); + } + return context; +}; + +export const SidebarProvider = ({ + children, + open: openProp, + setOpen: setOpenProp, + animate = true, +}: { + children: React.ReactNode; + open?: boolean; + setOpen?: React.Dispatch>; + animate?: boolean; +}) => { + const [openState, setOpenState] = useState(false); + const open = openProp !== undefined ? openProp : openState; + const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState; + + return ( + + {children} + + ); +}; + +export const Sidebar = ({ + children, + open, + setOpen, + animate, +}: { + children: React.ReactNode; + open?: boolean; + setOpen?: React.Dispatch>; + animate?: boolean; +}) => { + return ( + + {children} + + ); +}; + +export const SidebarBody = (props: React.ComponentProps) => { + return ( + <> + + )} /> + + ); +}; + +export const DesktopSidebar = ({ + className, + children, + ...props +}: React.ComponentProps) => { + const { open, setOpen, animate } = useSidebar(); + return ( + <> + + + ); +}; + +export const MobileSidebar = ({ + className, + children, + ...props +}: React.ComponentProps<"div">) => { + const { open, setOpen } = useSidebar(); + return ( + <> +
+
+ setOpen(!open)} + /> +
+ + {open && ( + +
setOpen(!open)} + > + +
+ {children} + + )} + +
+ + ); +}; + +export const SidebarLink = ({ + link, + className, + ...props +}: { + link: Links; + className?: string; + props?: LinkProps; +}) => { + const { open, animate } = useSidebar(); + return ( + + {link.icon} + + + {link.label} + + + ); +}; diff --git a/client/constants/index.ts b/client/constants/index.tsx similarity index 61% rename from client/constants/index.ts rename to client/constants/index.tsx index 0569b067..373feeaf 100644 --- a/client/constants/index.ts +++ b/client/constants/index.tsx @@ -1,3 +1,10 @@ +import { + IconArrowLeft, + IconBrandTabler, + IconSettings, + IconUserBolt, +} from "@tabler/icons-react"; + export const AppointmentTypes: { type: string; image: string }[] = [ { type: "inpatient", @@ -73,4 +80,33 @@ export const DiseaseOptions: string[] = [ "Zika Virus", "Meningitis", ]; - +export const AdminSideBarLinks = [ + { + label: "Dashboard", + href: "#", + icon: ( + + ), + }, + { + label: "Profile", + href: "#", + icon: ( + + ), + }, + { + label: "Settings", + href: "#", + icon: ( + + ), + }, + { + label: "Logout", + href: "#", + icon: ( + + ), + }, +]; \ No newline at end of file diff --git a/client/lib/utils.ts b/client/lib/utils.ts index a373deed..547b3c00 100644 --- a/client/lib/utils.ts +++ b/client/lib/utils.ts @@ -5,6 +5,12 @@ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } +export const isMobile = () => { + if (typeof window === "undefined") return false; + const width = window.innerWidth; + return width <= 1024; +}; + export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value)); export const convertFileToUrl = (file: File) => URL.createObjectURL(file); diff --git a/client/package-lock.json b/client/package-lock.json index 00542a8d..97ec00f6 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -16,8 +16,10 @@ "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-slot": "^1.1.0", "@reduxjs/toolkit": "^2.2.7", + "@tabler/icons-react": "^3.12.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "framer-motion": "^11.3.28", "input-otp": "^1.2.4", "lucide-react": "^0.427.0", "next": "14.2.5", @@ -1169,6 +1171,30 @@ "tslib": "^2.4.0" } }, + "node_modules/@tabler/icons": { + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.12.0.tgz", + "integrity": "sha512-Im37ar/mQkqLb6XUXsU7nOc4/66VB9/3KLuZ+6tUsJKHHNLaDUkYfCTNG3pnGDI03laByxVf5+umSNK2yPTx8A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + } + }, + "node_modules/@tabler/icons-react": { + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.12.0.tgz", + "integrity": "sha512-RnJl3HrCqInuC8JJEUxWuYP4OFNYnY2EUtBqZFSpYatPKY3AnvJBIrShJLHf3fiLPpo6xEYAIoB7Qow93JX0fQ==", + "dependencies": { + "@tabler/icons": "3.12.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + }, + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -2861,6 +2887,30 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/framer-motion": { + "version": "11.3.28", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.28.tgz", + "integrity": "sha512-dqhoawipEAjqdv32zbv72sOMJZjol7dROWn7t/FOq23WXJ40O4OUybgnO2ldnuS+3YquSn8xO/KKRavZ+TBVOQ==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", diff --git a/client/package.json b/client/package.json index b7964a29..6db2b692 100644 --- a/client/package.json +++ b/client/package.json @@ -18,8 +18,10 @@ "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-slot": "^1.1.0", "@reduxjs/toolkit": "^2.2.7", + "@tabler/icons-react": "^3.12.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "framer-motion": "^11.3.28", "input-otp": "^1.2.4", "lucide-react": "^0.427.0", "next": "14.2.5",