feat: admin layout

MinhDienCoop · Jul 26, 2024 · 76255cc · 76255cc
1 parent 50e5de7
commit 76255cc
Show file tree

Hide file tree

Showing 26 changed files with 954 additions and 100 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,10 @@
+DATABASE_URL=
+NEXTAUTH_SECRET=
+
+GITHUB_ID=
+GITHUB_SECRET=
+
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,28 @@
+{
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
+    "search.exclude": {
+      "package-lock.json": true,
+      "dist": true,
+      "**/dist": true
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": ["source.addMissingImports", "source.fixAll.eslint"],
+    "eslint.validate": ["javascript", "typescript"],
+    "jest.autoRun": {
+      "watch": true, // Start the jest with the watch flag
+      "onSave": "test-src-file", // Trigger test run for the given test or source file upon save
+      "onStartup": ["all-tests"] // Run all tests upon project launch
+    },
+    "jest.showCoverageOnLoad": true, // Show code coverage when the project is launched
+    // Multiple language settings for json and jsonc files
+    "[json][jsonc]": {
+      "editor.formatOnSave": true,
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "files.eol": "\n",
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+  }
diff --git a/app/(inner-pages)/layout.tsx b/app/(inner-pages)/layout.tsx
@@ -0,0 +1,33 @@
+import { Playfair } from "next/font/google";
+
+import "@/app/globals.css";
+import Header from "@/app/components/Header/header";
+import Footer from "@/app/components/Footer/footer";
+
+const fontBase = Playfair({ subsets: ["latin", "vietnamese"] });
+
+export const metadata = {
+  title: "Mdc",
+  description: "Generated by create Mdc Team",
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body
+        className={`${fontBase.className} bg-[#f5f5f5]`}
+        suppressHydrationWarning={true}
+      >
+        <Header />
+        <main id="page-main" className="px-[48px]">
+          <div className="page-main-content min-h-[300px]">{children}</div>
+        </main>
+        <Footer />
+      </body>
+    </html>
+  );
+}
diff --git a/app/(inner-pages)/layout.tsx_ b/app/(inner-pages)/layout.tsx_
diff --git a/app/page.tsx → app/(inner-pages)/page.tsx b/app/page.tsx → app/(inner-pages)/page.tsx
diff --git a/app/admin/(inner-admin)/files/page.tsx b/app/admin/(inner-admin)/files/page.tsx
@@ -0,0 +1,102 @@
+"use client";
+import React, { useState } from "react";
+import { Button, Dropdown, Radio, Tooltip, Input } from "antd";
+import type { MenuProps, RadioChangeEvent } from "antd";
+import { PlusOutlined, SearchOutlined, SwapOutlined } from "@ant-design/icons";
+import FilesTable from "@/app/components/Sections/Files/filesTable";
+
+export default function Files() {
+  const [value, setValue] = useState<string>("date");
+  const [showFilter, setShowFilter] = useState<boolean>(false);
+  const items: MenuProps["items"] = [
+    {
+      key: "date",
+      label: "Date",
+    },
+    {
+      key: "fileName",
+      label: "File name",
+    },
+    {
+      key: "FileSize",
+      label: "File size",
+    },
+  ];
+
+  const onChangeSort = (e: RadioChangeEvent) => {
+    console.log("radio checked", e.target.value);
+    setValue(e.target.value);
+  };
+
+  const SortRender = () => {
+    return (
+      <div className="border border-solid border-[var(--border-cl)] shadow-lg p-3 rounded-lg">
+        <Radio.Group onChange={onChangeSort} value={value}>
+          {items.map((item: any) => (
+            <Radio value={item.key} className="block">
+              {item.label}
+            </Radio>
+          ))}
+        </Radio.Group>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <div>
+        {!showFilter && (
+          <div className="flex flex-wrap items-center">
+            <div className="flex-1 flex flex-wrap items-center gap-3">
+              <span className="bg-[#ebebeb] rounded-lg py-1 px-3 leading-[24px]">
+                All
+              </span>
+              <Button type="text" className="flex items-center py-1 px-3">
+                <PlusOutlined />
+              </Button>
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <Button
+                className="flex items-center py-1 px-3"
+                onClick={() => setShowFilter(true)}
+              >
+                <SearchOutlined />
+                <span className="relative w-[20px] h-[13px] inline-block m-0">
+                  <span className="absolute top-0 left-0 right-0 mx-auto w-[85%] h-[1px] bg-black inline-block"></span>
+                  <span className="absolute top-1/2 left-0 right-0 mx-auto w-[60%] h-[1px] bg-black inline-block"></span>
+                  <span className="absolute bottom-0 left-0 right-0 mx-auto w-[30%] h-[1px] bg-black inline-block"></span>
+                </span>
+              </Button>
+              <Dropdown
+                dropdownRender={() => SortRender()}
+                placement="bottomRight"
+                trigger={["click"]}
+              >
+                <Tooltip placement="top" title="Sort">
+                  <Button className="py-1 px-3 flex items-center">
+                    <SwapOutlined className="rotate-90" />
+                  </Button>
+                </Tooltip>
+              </Dropdown>
+            </div>
+          </div>
+        )}
+
+        {showFilter && (
+          <div>
+            <div className="flex flex-wrap items-center gap-3">
+              <Input placeholder="Searching in All" className="flex-1" />
+              <Button type="text" onClick={() => setShowFilter(false)}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-5">
+        <FilesTable />
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/(inner-admin)/layout.tsx b/app/admin/(inner-admin)/layout.tsx
@@ -0,0 +1,28 @@
+import { Playfair } from "next/font/google";
+
+import "@/app/globals.css";
+import AdminLayout from "@/app/components/Common/adminLayout";
+
+const fontBase = Playfair({ subsets: ["latin", "vietnamese"] });
+
+export const metadata = {
+  title: "Mdc",
+  description: "Generated by create Mdc Team",
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body
+        className={`${fontBase.className} bg-[#f5f5f5] overflow-hidden`}
+        suppressHydrationWarning={true}
+      >
+        <AdminLayout children={children} />
+      </body>
+    </html>
+  );
+}
diff --git a/app/admin/(inner-admin)/page.tsx b/app/admin/(inner-admin)/page.tsx
@@ -0,0 +1,3 @@
+export default function AdminHome() {
+  return <div className="mt-10">Admin</div>;
+}
diff --git a/app/admin/login/layout.tsx b/app/admin/login/layout.tsx
@@ -0,0 +1,27 @@
+import { Playfair } from "next/font/google";
+
+import "@/app/globals.css";
+
+const fontBase = Playfair({ subsets: ["latin", "vietnamese"] });
+
+export const metadata = {
+  title: "Login - Mdc Admin ",
+  description: "Generated by create Mdc Team",
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body
+        className={`${fontBase.className} bg-[#f5f5f5]`}
+        suppressHydrationWarning={true}
+      >
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
diff --git a/app/admin/login/page.tsx b/app/admin/login/page.tsx
@@ -0,0 +1,19 @@
+import PageTitle from "@/app/components/Common/pageTitle";
+import Logo from "@/app/components/Header/logo";
+import LoginFormAdmin from "@/app/components/Sections/loginFormAdmin";
+
+export default function AdminHome() {
+  return (
+    <div className="h-screen flex items-center justify-center">
+      <div className="text-center bg-white p-10 rounded-xl w-full max-w-[500px]">
+        <div className="w-[120px] h-[120px] mx-auto">
+          <Logo />
+        </div>
+        <div className="mb-3">
+          <PageTitle title="MDC Admin" />
+        </div>
+        <LoginFormAdmin />
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/Common/adminLayout.tsx b/app/components/Common/adminLayout.tsx
@@ -0,0 +1,22 @@
+"use client";
+import React, { useState } from "react";
+import { Layout } from "antd";
+import SideBar from "@/app/components/Header/sidebar";
+import ContentAdmin from "@/app/components/Sections/ContentAdmin";
+
+const AdminLayout = ({ children }: { children: React.ReactNode }) => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <Layout>
+      <SideBar collapsed={collapsed} />
+      <ContentAdmin
+        children={children}
+        collapsed={collapsed}
+        setCollapsed={setCollapsed}
+      />
+    </Layout>
+  );
+};
+
+export default AdminLayout;
diff --git a/app/components/Common/pageTitle.tsx b/app/components/Common/pageTitle.tsx
@@ -0,0 +1,5 @@
+const PageTitle = ({ title }: { title: string }) => {
+  return <h1 className="text-2xl font-bold">{title}</h1>;
+};
+
+export default PageTitle;
diff --git a/app/components/Header/header.tsx b/app/components/Header/header.tsx
@@ -1,16 +1,19 @@
-'use client'
-import { Layout } from 'antd';
+"use client";
+import { Layout } from "antd";
 
-import Logo from './logo';
-import MainMenu from '@/app/components/Header/mainMenu'
+import Logo from "./logo";
+import MainMenu from "@/app/components/Header/mainMenu";
 
 const Header = () => {
-    return (
-        <Layout.Header style={{ display: 'flex', alignItems: 'center' }}>
-          <Logo/>
-          <MainMenu/>
-        </Layout.Header>
-    );
-}
-
-export default Header;
+  return (
+    <Layout.Header style={{ display: "flex", alignItems: "center" }}>
+      <div className="relative w-[100px] min-w-[50px] h-[50px] px-3 mr-[24px] bg-[rgba(225,_225,_225,_0.2)] rounded-[6px] overflow-hidden">
+        <Logo />
+      </div>
+
+      <MainMenu />
+    </Layout.Header>
+  );
+};
+
+export default Header;