├── .eslintrc.json
├── src
    ├── redux
    │   ├── rootReducer.ts
    │   ├── hooks.ts
    │   └── store.ts
    ├── app
    │   ├── favicon.ico
    │   ├── loading.tsx
    │   ├── not-found.tsx
    │   ├── error.tsx
    │   ├── (withlayout)
    │   │   ├── student
    │   │   │   └── page.tsx
    │   │   ├── super-admin
    │   │   │   └── page.tsx
    │   │   └── layout.tsx
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── login
    │   │   └── page.tsx
    │   ├── page.tsx
    │   └── page.module.css
    ├── assets
    │   └── login-image.png
    ├── constants
    │   ├── role.ts
    │   └── sidebarItems.tsx
    ├── lib
    │   ├── Providers.tsx
    │   └── AntdRegistry.tsx
    └── components
    │   ├── ui
    │       ├── Contents.tsx
    │       ├── UMBreadCrumb.tsx
    │       └── Sidebar.tsx
    │   └── Forms
    │       ├── Form.tsx
    │       └── FormInput.tsx
├── next.config.js
├── .gitignore
├── public
    ├── vercel.svg
    └── next.svg
├── tsconfig.json
├── package.json
├── LICENCE
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | // eslintrc 


--------------------------------------------------------------------------------
/src/redux/rootReducer.ts:
--------------------------------------------------------------------------------
1 | export const reducer = {
2 |     
3 | }
4 | 
5 | // Root Reducer


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/University-Management-Frontend/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/assets/login-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/University-Management-Frontend/HEAD/src/assets/login-image.png


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | // next config
6 | 


--------------------------------------------------------------------------------
/src/constants/role.ts:
--------------------------------------------------------------------------------
1 | export enum USER_ROLE{
2 |     STUDENT = "student",
3 |     FACULTY = "faculty",
4 |     ADMIN = "admin",
5 |     SUPER_ADMIN = "super_admin"
6 | }
7 | 
8 | // Role 


--------------------------------------------------------------------------------
/src/app/loading.tsx:
--------------------------------------------------------------------------------
 1 | const Loading = () => {
 2 |   return (
 3 |     <div>
 4 |       <h1>Loading....</h1>
 5 |     </div>
 6 |   );
 7 | };
 8 | // Loading tsx
 9 | export default Loading;
10 | 


--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | const NotFoundPage = () => {
 2 |   return (
 3 |     <div>
 4 |       <h1>404!!! Page not found!</h1>
 5 |     </div>
 6 |   );
 7 | };
 8 | // Not found
 9 | export default NotFoundPage;
10 | 


--------------------------------------------------------------------------------
/src/app/error.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | // error
 3 | const ErrorPage = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>Something went wrong!</h1>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default ErrorPage;
12 | 


--------------------------------------------------------------------------------
/src/app/(withlayout)/student/page.tsx:
--------------------------------------------------------------------------------
 1 | const StudentPage = () => {
 2 |   return (
 3 |     <div>
 4 |       <h1>This page is for student</h1>
 5 |     </div>
 6 |   );
 7 | };
 8 | // Student Page
 9 | export default StudentPage;
10 | 


--------------------------------------------------------------------------------
/src/app/(withlayout)/super-admin/page.tsx:
--------------------------------------------------------------------------------
 1 | const SuperAdminPage = () => {
 2 |   return (
 3 |     <div>
 4 |       <h1>This page is for super admin</h1>
 5 |     </div>
 6 |   );
 7 | };
 8 | // Super Admin Page
 9 | export default SuperAdminPage;
10 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
2 | * {
3 |   box-sizing: border-box;
4 |   padding: 0;
5 |   margin: 0;
6 |   font-family: 'Roboto Condensed', sans-serif;
7 | }
8 | /* globals css */ 


--------------------------------------------------------------------------------
/src/redux/hooks.ts:
--------------------------------------------------------------------------------
1 | import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
2 | import type { RootState, AppDispatch } from './store'
3 | // hooks 
4 | // Use throughout your app instead of plain `useDispatch` and `useSelector`
5 | export const useAppDispatch: () => AppDispatch = useDispatch
6 | export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector


--------------------------------------------------------------------------------
/src/app/(withlayout)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Contents from "@/components/ui/Contents";
 2 | import SideBar from "@/components/ui/Sidebar";
 3 | import { Layout } from "antd";
 4 | // Super Admin Layout
 5 | const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
 6 |   return (
 7 |     <Layout hasSider>
 8 |       <SideBar />
 9 |       <Contents>{children}</Contents>
10 |     </Layout>
11 |   );
12 | };
13 | 
14 | export default DashboardLayout;
15 | 


--------------------------------------------------------------------------------
/src/lib/Providers.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { store } from "@/redux/store";
 3 | import { Provider } from "react-redux";
 4 | import StyledComponentsRegistry from "./AntdRegistry";
 5 | // Providers 
 6 | const Providers = ({ children }: { children: React.ReactNode }) => {
 7 |   return (
 8 |     <Provider store={store}>
 9 |       <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
10 |     </Provider>
11 |   );
12 | };
13 | 
14 | export default Providers;
15 | 


--------------------------------------------------------------------------------
/src/redux/store.ts:
--------------------------------------------------------------------------------
 1 | // Store js
 2 | import { reducer } from './rootReducer';
 3 | import { configureStore } from '@reduxjs/toolkit'
 4 | 
 5 | export const store = configureStore({
 6 |   reducer
 7 | })
 8 | 
 9 | 
10 | 
11 | // Infer the `RootState` and `AppDispatch` types from the store itself
12 | export type RootState = ReturnType<typeof store.getState>
13 | // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
14 | export type AppDispatch = typeof store.dispatch


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | # gitignore
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "./globals.css";
 2 | import type { Metadata } from "next";
 3 | import { Inter } from "next/font/google";
 4 | import Providers from "@/lib/Providers";
 5 | // layout tsx
 6 | const inter = Inter({ subsets: ["latin"] });
 7 | 
 8 | export const metadata: Metadata = {
 9 |   title: "Create Next App",
10 |   description: "Generated by create next app",
11 | };
12 | 
13 | export default function RootLayout({
14 |   children,
15 | }: {
16 |   children: React.ReactNode;
17 | }) {
18 |   return (
19 |     <Providers>
20 |       <html lang="en">
21 |         <body>{children}</body>
22 |       </html>
23 |     </Providers>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/src/lib/AntdRegistry.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | // ant regisrty
 3 | import React from "react";
 4 | import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
 5 | import type Entity from "@ant-design/cssinjs/es/Cache";
 6 | import { useServerInsertedHTML } from "next/navigation";
 7 | 
 8 | const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
 9 |   const cache = React.useMemo<Entity>(() => createCache(), []);
10 |   useServerInsertedHTML(() => (
11 |     <style
12 |       id="antd"
13 |       dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}
14 |     />
15 |   ));
16 |   return <StyleProvider cache={cache}>{children}</StyleProvider>;
17 | };
18 | 
19 | export default StyledComponentsRegistry;
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 
29 | //Ts config 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "university-management-frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ant-design/cssinjs": "^1.17.0",
13 |     "@reduxjs/toolkit": "^1.9.5",
14 |     "@types/node": "20.6.3",
15 |     "@types/react": "18.2.22",
16 |     "@types/react-dom": "18.2.7",
17 |     "antd": "^5.9.2",
18 |     "eslint": "8.49.0",
19 |     "eslint-config-next": "13.5.2",
20 |     "next": "13.5.2",
21 |     "react": "18.2.0",
22 |     "react-dom": "18.2.0",
23 |     "react-hook-form": "^7.46.2",
24 |     "react-redux": "^8.1.2",
25 |     "typescript": "5.2.2"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/ui/Contents.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Layout } from "antd";
 3 | import UMBreadCrumb from "./UMBreadCrumb";
 4 | // Contents 
 5 | const { Content } = Layout;
 6 | 
 7 | const Contents = ({ children }: { children: React.ReactNode }) => {
 8 |   const base = "admin";
 9 |   return (
10 |     <Content
11 |       style={{
12 |         minHeight: "100vh",
13 |         color: "black",
14 |       }}
15 |     >
16 |       <UMBreadCrumb
17 |         items={[
18 |           {
19 |             label: `${base}`,
20 |             link: `/${base}`,
21 |           },
22 |           {
23 |             label: "student",
24 |             link: `/${base}/student`,
25 |           },
26 |         ]}
27 |       />
28 |       {children}
29 |     </Content>
30 |   );
31 | };
32 | 
33 | export default Contents;
34 | 


--------------------------------------------------------------------------------
/src/components/ui/UMBreadCrumb.tsx:
--------------------------------------------------------------------------------
 1 | import { Breadcrumb } from "antd";
 2 | import Link from "next/link";
 3 | import { HomeOutlined } from "@ant-design/icons";
 4 | // Um bread crumb
 5 | const UMBreadCrumb = ({
 6 |   items,
 7 | }: {
 8 |   items: {
 9 |     label: string;
10 |     link: string;
11 |   }[];
12 | }) => {
13 |   const breadCrumbItems = [
14 |     {
15 |       title: (
16 |         <Link href="/">
17 |           <HomeOutlined />
18 |         </Link>
19 |       ),
20 |     },
21 |     ...items.map((item) => {
22 |       return {
23 |         title: item.link ? (
24 |           <Link href={item.link}>{item.label}</Link>
25 |         ) : (
26 |           <span>{item.label}</span>
27 |         ),
28 |       };
29 |     }),
30 |   ];
31 | 
32 |   return <Breadcrumb items={breadCrumbItems}></Breadcrumb>;
33 | };
34 | 
35 | export default UMBreadCrumb;
36 | 


--------------------------------------------------------------------------------
/src/components/Forms/Form.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | // Form
 3 | import { ReactElement, ReactNode } from "react";
 4 | import { useForm, FormProvider, SubmitHandler } from "react-hook-form";
 5 | 
 6 | type FormConfig = {
 7 |   defaultValues?: Record<string, any>;
 8 | };
 9 | 
10 | type FormProps = {
11 |   children?: ReactElement | ReactNode;
12 |   submitHandler: SubmitHandler<any>;
13 | } & FormConfig;
14 | 
15 | const Form = ({ children, submitHandler, defaultValues }: FormProps) => {
16 |   const formConfig: FormConfig = {};
17 | 
18 |   if (!!defaultValues) formConfig["defaultValues"] = defaultValues;
19 | 
20 |   const methods = useForm<FormProps>(formConfig);
21 | 
22 |   const { handleSubmit, reset } = methods;
23 | 
24 |   const onSubmit = (data: any) => {
25 |     submitHandler(data);
26 |     reset();
27 |   };
28 | 
29 |   return (
30 |     <FormProvider {...methods}>
31 |       <form onSubmit={handleSubmit(onSubmit)}>{children}</form>
32 |     </FormProvider>
33 |   );
34 | };
35 | 
36 | export default Form;
37 | 


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Hazrat Ali
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/ui/Sidebar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | // Sidebar
 3 | import { useState } from "react";
 4 | import { Layout, Menu } from "antd";
 5 | 
 6 | import { sidebarItems } from "@/constants/sidebarItems";
 7 | import { USER_ROLE } from "@/constants/role";
 8 | 
 9 | const { Sider } = Layout;
10 | 
11 | const SideBar = () => {
12 |   const [collapsed, setCollapsed] = useState(false);
13 | 
14 |   const role = USER_ROLE.ADMIN;
15 | 
16 |   return (
17 |     <Sider
18 |       collapsible
19 |       collapsed={collapsed}
20 |       onCollapse={(value) => setCollapsed(value)}
21 |       width={280}
22 |       style={{
23 |         overflow: "auto",
24 |         height: "100vh",
25 |         position: "sticky",
26 |         left: 0,
27 |         top: 0,
28 |         bottom: 0,
29 |       }}
30 |     >
31 |       <div
32 |         style={{
33 |           color: "white",
34 |           fontSize: "2rem",
35 |           textAlign: "center",
36 |           fontWeight: "bold",
37 |           marginBottom: "1rem",
38 |         }}
39 |       >
40 |         PH-University
41 |       </div>
42 |       <Menu
43 |         theme="dark"
44 |         defaultSelectedKeys={["1"]}
45 |         mode="inline"
46 |         items={sidebarItems(role)}
47 |       />
48 |     </Sider>
49 |   );
50 | };
51 | 
52 | export default SideBar;
53 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/src/components/Forms/FormInput.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | // From input
 3 | import { Input } from "antd";
 4 | import { useFormContext, Controller } from "react-hook-form";
 5 | interface IInput {
 6 |   name: string;
 7 |   type?: string;
 8 |   size?: "large" | "small";
 9 |   value?: string | string[] | undefined;
10 |   id?: string;
11 |   placeholder?: string;
12 |   validation?: object;
13 |   label?: string;
14 | }
15 | 
16 | const FormInput = ({
17 |   name,
18 |   type,
19 |   size,
20 |   value,
21 |   id,
22 |   placeholder,
23 |   validation,
24 |   label,
25 | }: IInput) => {
26 |   const { control } = useFormContext();
27 | 
28 |   return (
29 |     <>
30 |       {label ? label : null}
31 |       <Controller
32 |         control={control}
33 |         name={name}
34 |         render={({ field }) =>
35 |           type === "password" ? (
36 |             <Input.Password
37 |               type={type}
38 |               size={size}
39 |               placeholder={placeholder}
40 |               {...field}
41 |               value={value ? value : field.value}
42 |             />
43 |           ) : (
44 |             <Input
45 |               type={type}
46 |               size={size}
47 |               placeholder={placeholder}
48 |               {...field}
49 |               value={value ? value : field.value}
50 |             />
51 |           )
52 |         }
53 |       />
54 |     </>
55 |   );
56 | };
57 | 
58 | export default FormInput;
59 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🦁 Hazrat Ali
 2 | 
 3 | # 🐲 Programmer || Software Engineering
 4 | 
 5 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 6 | 
 7 | ## Getting Started
 8 | 
 9 | First, run the development server:
10 | 
11 | ```bash
12 | npm run dev
13 | # or
14 | yarn dev
15 | # or
16 | pnpm dev
17 | # or
18 | bun dev
19 | ```
20 | 
21 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
22 | 
23 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
24 | 
25 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
26 | 
27 | ## Learn More
28 | 
29 | To learn more about Next.js, take a look at the following resources:
30 | 
31 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
32 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
33 | 
34 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
35 | 
36 | ## Deploy on Vercel
37 | 
38 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
39 | 
40 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
41 | 


--------------------------------------------------------------------------------
/src/app/login/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Button, Col, Input, Row } from "antd";
 3 | import loginImage from "../../assets/login-image.png";
 4 | import Image from "next/image";
 5 | import Form from "@/components/Forms/Form";
 6 | import FormInput from "@/components/Forms/FormInput";
 7 | import { SubmitHandler } from "react-hook-form";
 8 | // login Page
 9 | type FormValues = {
10 |   id: string;
11 |   password: string;
12 | };
13 | 
14 | const LoginPage = () => {
15 |   const onSubmit: SubmitHandler<FormValues> = (data) => {
16 |     try {
17 |       console.log(data);
18 |     } catch (err) {}
19 |   };
20 |   return (
21 |     <Row
22 |       justify="center"
23 |       align="middle"
24 |       style={{
25 |         minHeight: "100vh",
26 |       }}
27 |     >
28 |       <Col sm={12} md={16} lg={10}>
29 |         <Image src={loginImage} width={500} alt="login image" />
30 |       </Col>
31 |       <Col sm={12} md={8} lg={8}>
32 |         <h1
33 |           style={{
34 |             margin: "15px 0px",
35 |           }}
36 |         >
37 |           First login your account
38 |         </h1>
39 |         <div>
40 |           <Form submitHandler={onSubmit}>
41 |             <div>
42 |               <FormInput name="id" type="text" size="large" label="User Id" />
43 |             </div>
44 |             <div
45 |               style={{
46 |                 margin: "15px 0px",
47 |               }}
48 |             >
49 |               <FormInput
50 |                 name="password"
51 |                 type="password"
52 |                 size="large"
53 |                 label="User Password"
54 |               />
55 |             </div>
56 |             <Button type="primary" htmlType="submit">
57 |               Login
58 |             </Button>
59 |           </Form>
60 |         </div>
61 |       </Col>
62 |     </Row>
63 |   );
64 | };
65 | 
66 | export default LoginPage;
67 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | import styles from './page.module.css'
 3 | // Page Modules
 4 | export default function Home() {
 5 |   return (
 6 |     <main className={styles.main}>
 7 |       <div className={styles.description}>
 8 |         <p>
 9 |           Get started by editing&nbsp;
10 |           <code className={styles.code}>src/app/page.tsx</code>
11 |         </p>
12 |         <div>
13 |           <a
14 |             href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15 |             target="_blank"
16 |             rel="noopener noreferrer"
17 |           >
18 |             By{' '}
19 |             <Image
20 |               src="/vercel.svg"
21 |               alt="Vercel Logo"
22 |               className={styles.vercelLogo}
23 |               width={100}
24 |               height={24}
25 |               priority
26 |             />
27 |           </a>
28 |         </div>
29 |       </div>
30 | 
31 |       <div className={styles.center}>
32 |         <Image
33 |           className={styles.logo}
34 |           src="/next.svg"
35 |           alt="Next.js Logo"
36 |           width={180}
37 |           height={37}
38 |           priority
39 |         />
40 |       </div>
41 | 
42 |       <div className={styles.grid}>
43 |         <a
44 |           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45 |           className={styles.card}
46 |           target="_blank"
47 |           rel="noopener noreferrer"
48 |         >
49 |           <h2>
50 |             Docs <span>-&gt;</span>
51 |           </h2>
52 |           <p>Find in-depth information about Next.js features and API.</p>
53 |         </a>
54 | 
55 |         <a
56 |           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
57 |           className={styles.card}
58 |           target="_blank"
59 |           rel="noopener noreferrer"
60 |         >
61 |           <h2>
62 |             Learn <span>-&gt;</span>
63 |           </h2>
64 |           <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
65 |         </a>
66 | 
67 |         <a
68 |           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
69 |           className={styles.card}
70 |           target="_blank"
71 |           rel="noopener noreferrer"
72 |         >
73 |           <h2>
74 |             Templates <span>-&gt;</span>
75 |           </h2>
76 |           <p>Explore the Next.js 13 playground.</p>
77 |         </a>
78 | 
79 |         <a
80 |           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
81 |           className={styles.card}
82 |           target="_blank"
83 |           rel="noopener noreferrer"
84 |         >
85 |           <h2>
86 |             Deploy <span>-&gt;</span>
87 |           </h2>
88 |           <p>
89 |             Instantly deploy your Next.js site to a shareable URL with Vercel.
90 |           </p>
91 |         </a>
92 |       </div>
93 |     </main>
94 |   )
95 | }
96 | 


--------------------------------------------------------------------------------
/src/app/page.module.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   justify-content: space-between;
  5 |   align-items: center;
  6 |   padding: 6rem;
  7 |   min-height: 100vh;
  8 | }
  9 | /* Page Module CSS comment */
 10 | .description {
 11 |   display: inherit;
 12 |   justify-content: inherit;
 13 |   align-items: inherit;
 14 |   font-size: 0.85rem;
 15 |   max-width: var(--max-width);
 16 |   width: 100%;
 17 |   z-index: 2;
 18 |   font-family: var(--font-mono);
 19 | }
 20 | 
 21 | .description a {
 22 |   display: flex;
 23 |   justify-content: center;
 24 |   align-items: center;
 25 |   gap: 0.5rem;
 26 | }
 27 | 
 28 | .description p {
 29 |   position: relative;
 30 |   margin: 0;
 31 |   padding: 1rem;
 32 |   background-color: rgba(var(--callout-rgb), 0.5);
 33 |   border: 1px solid rgba(var(--callout-border-rgb), 0.3);
 34 |   border-radius: var(--border-radius);
 35 | }
 36 | 
 37 | .code {
 38 |   font-weight: 700;
 39 |   font-family: var(--font-mono);
 40 | }
 41 | 
 42 | .grid {
 43 |   display: grid;
 44 |   grid-template-columns: repeat(4, minmax(25%, auto));
 45 |   max-width: 100%;
 46 |   width: var(--max-width);
 47 | }
 48 | 
 49 | .card {
 50 |   padding: 1rem 1.2rem;
 51 |   border-radius: var(--border-radius);
 52 |   background: rgba(var(--card-rgb), 0);
 53 |   border: 1px solid rgba(var(--card-border-rgb), 0);
 54 |   transition: background 200ms, border 200ms;
 55 | }
 56 | 
 57 | .card span {
 58 |   display: inline-block;
 59 |   transition: transform 200ms;
 60 | }
 61 | 
 62 | .card h2 {
 63 |   font-weight: 600;
 64 |   margin-bottom: 0.7rem;
 65 | }
 66 | 
 67 | .card p {
 68 |   margin: 0;
 69 |   opacity: 0.6;
 70 |   font-size: 0.9rem;
 71 |   line-height: 1.5;
 72 |   max-width: 30ch;
 73 | }
 74 | 
 75 | .center {
 76 |   display: flex;
 77 |   justify-content: center;
 78 |   align-items: center;
 79 |   position: relative;
 80 |   padding: 4rem 0;
 81 | }
 82 | 
 83 | .center::before {
 84 |   background: var(--secondary-glow);
 85 |   border-radius: 50%;
 86 |   width: 480px;
 87 |   height: 360px;
 88 |   margin-left: -400px;
 89 | }
 90 | 
 91 | .center::after {
 92 |   background: var(--primary-glow);
 93 |   width: 240px;
 94 |   height: 180px;
 95 |   z-index: -1;
 96 | }
 97 | 
 98 | .center::before,
 99 | .center::after {
100 |   content: '';
101 |   left: 50%;
102 |   position: absolute;
103 |   filter: blur(45px);
104 |   transform: translateZ(0);
105 | }
106 | 
107 | .logo {
108 |   position: relative;
109 | }
110 | /* Enable hover only on non-touch devices */
111 | @media (hover: hover) and (pointer: fine) {
112 |   .card:hover {
113 |     background: rgba(var(--card-rgb), 0.1);
114 |     border: 1px solid rgba(var(--card-border-rgb), 0.15);
115 |   }
116 | 
117 |   .card:hover span {
118 |     transform: translateX(4px);
119 |   }
120 | }
121 | 
122 | @media (prefers-reduced-motion) {
123 |   .card:hover span {
124 |     transform: none;
125 |   }
126 | }
127 | 
128 | /* Mobile */
129 | @media (max-width: 700px) {
130 |   .content {
131 |     padding: 4rem;
132 |   }
133 | 
134 |   .grid {
135 |     grid-template-columns: 1fr;
136 |     margin-bottom: 120px;
137 |     max-width: 320px;
138 |     text-align: center;
139 |   }
140 | 
141 |   .card {
142 |     padding: 1rem 2.5rem;
143 |   }
144 | 
145 |   .card h2 {
146 |     margin-bottom: 0.5rem;
147 |   }
148 | 
149 |   .center {
150 |     padding: 8rem 0 6rem;
151 |   }
152 | 
153 |   .center::before {
154 |     transform: none;
155 |     height: 300px;
156 |   }
157 | 
158 |   .description {
159 |     font-size: 0.8rem;
160 |   }
161 | 
162 |   .description a {
163 |     padding: 1rem;
164 |   }
165 | 
166 |   .description p,
167 |   .description div {
168 |     display: flex;
169 |     justify-content: center;
170 |     position: fixed;
171 |     width: 100%;
172 |   }
173 | 
174 |   .description p {
175 |     align-items: center;
176 |     inset: 0 0 auto;
177 |     padding: 2rem 1rem 1.4rem;
178 |     border-radius: 0;
179 |     border: none;
180 |     border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
181 |     background: linear-gradient(
182 |       to bottom,
183 |       rgba(var(--background-start-rgb), 1),
184 |       rgba(var(--callout-rgb), 0.5)
185 |     );
186 |     background-clip: padding-box;
187 |     backdrop-filter: blur(24px);
188 |   }
189 | 
190 |   .description div {
191 |     align-items: flex-end;
192 |     pointer-events: none;
193 |     inset: auto 0 0;
194 |     padding: 2rem;
195 |     height: 200px;
196 |     background: linear-gradient(
197 |       to bottom,
198 |       transparent 0%,
199 |       rgb(var(--background-end-rgb)) 40%
200 |     );
201 |     z-index: 1;
202 |   }
203 | }
204 | 
205 | /* Tablet and Smaller Desktop */
206 | @media (min-width: 701px) and (max-width: 1120px) {
207 |   .grid {
208 |     grid-template-columns: repeat(2, 50%);
209 |   }
210 | }
211 | 
212 | @media (prefers-color-scheme: dark) {
213 |   .vercelLogo {
214 |     filter: invert(1);
215 |   }
216 | 
217 |   .logo {
218 |     filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
219 |   }
220 | }
221 | 
222 | @keyframes rotate {
223 |   from {
224 |     transform: rotate(360deg);
225 |   }
226 |   to {
227 |     transform: rotate(0deg);
228 |   }
229 | }
230 | 


--------------------------------------------------------------------------------
/src/constants/sidebarItems.tsx:
--------------------------------------------------------------------------------
  1 | import type { MenuProps } from "antd";
  2 | import {
  3 |   ProfileOutlined,
  4 |   TableOutlined,
  5 |   AppstoreOutlined,
  6 |   ScheduleOutlined,
  7 |   ThunderboltOutlined,
  8 |   CreditCardOutlined,
  9 |   FileTextOutlined,
 10 | } from "@ant-design/icons";
 11 | import Link from "next/link";
 12 | import { USER_ROLE } from "./role";
 13 | export const sidebarItems = (role: string) => {
 14 |   const defaultSidebarItems: MenuProps["items"] = [
 15 |     {
 16 |       label: "Profile",
 17 |       key: "profile",
 18 |       icon: <ProfileOutlined />,
 19 |       children: [
 20 |         {
 21 |           label: <Link href={`/${role}/profile`}>Account Profile</Link>,
 22 |           key: `/${role}/profile`,
 23 |         },
 24 |         {
 25 |           label: <Link href={`/${role}/change-password`}>Change Password</Link>,
 26 |           key: `/${role}/change-password`,
 27 |         },
 28 |       ],
 29 |     },
 30 |   ];
 31 | 
 32 |   const commonAdminSidebarItems: MenuProps["items"] = [
 33 |     {
 34 |       label: <Link href={`/${role}/manage-student`}>Manage Students</Link>,
 35 |       icon: <TableOutlined />,
 36 |       key: `/${role}/manage-student`,
 37 |     },
 38 |     {
 39 |       label: <Link href={`/${role}/manage-faculty`}>Manage Faculty</Link>,
 40 |       icon: <TableOutlined />,
 41 |       key: `/${role}/manage-faculty`,
 42 |     },
 43 |   ];
 44 | 
 45 |   const adminSidebarItems: MenuProps["items"] = [
 46 |     ...defaultSidebarItems,
 47 |     ...commonAdminSidebarItems,
 48 |     {
 49 |       label: "Manage academic",
 50 |       key: "manage-academic",
 51 |       icon: <TableOutlined />,
 52 |       children: [
 53 |         {
 54 |           label: <Link href={`/${role}/academic/faculty`}>Faculties</Link>,
 55 |           key: `/${role}/academic/faculty`,
 56 |         },
 57 |         {
 58 |           label: <Link href={`/${role}/academic/department`}>Departments</Link>,
 59 |           key: `/${role}/academic/department`,
 60 |         },
 61 |         {
 62 |           label: <Link href={`/${role}/academic/semester`}>Semesters</Link>,
 63 |           key: `/${role}/academic/semester`,
 64 |         },
 65 |       ],
 66 |     },
 67 |     {
 68 |       label: "Management",
 69 |       key: "management",
 70 |       icon: <AppstoreOutlined />,
 71 |       children: [
 72 |         {
 73 |           label: <Link href={`/${role}/department`}>Department</Link>,
 74 |           key: `/${role}/department`,
 75 |         },
 76 |         {
 77 |           label: <Link href={`/${role}/building`}>Building</Link>,
 78 |           key: `/${role}/building`,
 79 |         },
 80 |         {
 81 |           label: <Link href={`/${role}/room`}>Rooms</Link>,
 82 |           key: `/${role}/room`,
 83 |         },
 84 |         {
 85 |           label: <Link href={`/${role}/course`}>Course</Link>,
 86 |           key: `/${role}/course`,
 87 |         },
 88 |         {
 89 |           label: (
 90 |             <Link href={`/${role}/semester-registration`}>
 91 |               Semester registration
 92 |             </Link>
 93 |           ),
 94 |           key: `/${role}/semester-registration`,
 95 |         },
 96 |         {
 97 |           label: <Link href={`/${role}/offered-course`}>Offered courses</Link>,
 98 |           key: `/${role}/offered-course`,
 99 |         },
100 |         {
101 |           label: (
102 |             <Link href={`/${role}/offered-course-section`}>
103 |               Course sections
104 |             </Link>
105 |           ),
106 |           key: `/${role}/offered-course-section`,
107 |         },
108 |         {
109 |           label: (
110 |             <Link href={`/${role}/offered-course-schedule`}>
111 |               Course schedules
112 |             </Link>
113 |           ),
114 |           key: `/${role}/offered-course-schedule`,
115 |         },
116 |       ],
117 |     },
118 |   ];
119 | 
120 |   const superAdminSidebarItems: MenuProps["items"] = [
121 |     ...defaultSidebarItems,
122 |     ...commonAdminSidebarItems,
123 |     {
124 |       label: <Link href={`/${role}/admin`}>Manage Admin</Link>,
125 |       icon: <TableOutlined />,
126 |       key: `/${role}/admin`,
127 |     },
128 |     {
129 |       label: <Link href={`/${role}/user`}>Manage User</Link>,
130 |       icon: <TableOutlined />,
131 |       key: `/${role}/user`,
132 |     },
133 |     {
134 |       label: "Manage permission",
135 |       key: "manage-permission",
136 |       icon: <AppstoreOutlined />,
137 |       children: [
138 |         {
139 |           label: <Link href={`/${role}/permission`}>View permissions</Link>,
140 |           key: `/${role}/permission`,
141 |         },
142 |       ],
143 |     },
144 |     {
145 |       label: "Management",
146 |       key: "management",
147 |       icon: <AppstoreOutlined />,
148 |       children: [
149 |         {
150 |           label: <Link href={`/${role}/department`}>Department</Link>,
151 |           key: `/${role}/department`,
152 |         },
153 |       ],
154 |     },
155 |   ];
156 | 
157 |   const facultySidebarItems: MenuProps["items"] = [
158 |     ...defaultSidebarItems,
159 |     {
160 |       label: <Link href={`/${role}/courses`}>Courses</Link>,
161 |       icon: <TableOutlined />,
162 |       key: `/${role}/courses`,
163 |     },
164 |   ];
165 | 
166 |   const studentSidebarItems: MenuProps["items"] = [
167 |     ...defaultSidebarItems,
168 |     {
169 |       label: <Link href={`/${role}/courses`}>Courses</Link>,
170 |       icon: <TableOutlined />,
171 |       key: `/${role}/courses`,
172 |     },
173 |     {
174 |       label: <Link href={`/${role}/courses/schedule`}>Course schedules</Link>,
175 |       icon: <ScheduleOutlined />,
176 |       key: `/${role}/courses/schedule`,
177 |     },
178 |     {
179 |       label: <Link href={`/${role}/registration`}>Registration</Link>,
180 |       icon: <ThunderboltOutlined />,
181 |       key: `/${role}/registration`,
182 |     },
183 |     {
184 |       label: <Link href={`/${role}/payment`}>Payment</Link>,
185 |       icon: <CreditCardOutlined />,
186 |       key: `/${role}/payment`,
187 |     },
188 |     {
189 |       label: <Link href={`/${role}/academic-report`}>Academic report</Link>,
190 |       icon: <FileTextOutlined />,
191 |       key: `/${role}/academic-report`,
192 |     },
193 |   ];
194 | 
195 |   if (role === USER_ROLE.SUPER_ADMIN) return superAdminSidebarItems;
196 |   else if (role === USER_ROLE.ADMIN) return adminSidebarItems;
197 |   else if (role === USER_ROLE.FACULTY) return facultySidebarItems;
198 |   else if (role === USER_ROLE.STUDENT) return studentSidebarItems;
199 |   else {
200 |     return defaultSidebarItems;
201 |   }
202 | };
203 | 
204 | // Sidebar team


--------------------------------------------------------------------------------