Merge pull request #14 from Freelancer-god/feat/roles

Feat/roles

package.json

@@ -18,6 +18,8 @@
     "prepare": "husky | chmod ug+x .husky/*"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.20.0",
+    "@ant-design/nextjs-registry": "^1.0.0",
     "@hookform/resolvers": "^3.4.2",
     "@next/bundle-analyzer": "^14.2.3",
     "@radix-ui/primitive": "^1.0.1",
@@ -35,6 +37,7 @@
     "@tanstack/react-query": "^5.40.1",
     "@tanstack/react-table": "^8.17.3",
     "@uidotdev/usehooks": "^2.4.1",
+    "antd": "^5.18.0",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -78,4 +81,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}

src/app/dashboard/chihois/_components/chihois-table.tsx

@@ -47,5 +47,5 @@ export function ChihoisTable<TData, TValue>({ columns, initialData, total }: Dat
     debugTable: process.env.NODE_ENV === "development",
   });
 
-  return <DataTable columns={columns} table={table} isLoading={isFetching} filterField="email" />;
+  return <DataTable columns={columns} table={table} isLoading={isFetching} filterField="name" />;
 }

src/app/dashboard/chihois/_components/columns.tsx

@@ -11,14 +11,15 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { MoreHorizontal } from "lucide-react";
-import { DataTableColumnHeader } from "@/components/table/data-table-column-header";
 import { Chihoi, chihoiSchema } from "@/types/chihoi";
 import { Checkbox } from "@/components/ui/checkbox";
 import { mergeArraysById } from "@/lib/utils";
 import DeleteChihoiForm from "@/app/dashboard/chihois/_components/delete-chihoi-form";
 import DropDownModalWrapper from "@/components/dropdown/dropdown-modal-wrapper";
 import ChihoiForm from "@/app/dashboard/chihois/_components/chihoi-form";
 import { dynamicColumns } from "@/components/table/dynamic-column";
+import dayjs from "dayjs";
+import UploadChihoiForm from "@/app/dashboard/chihois/_components/upload-chihoi-form";
 
 const defaultColumns: ColumnDef<Chihoi>[] = [
   {
@@ -66,6 +67,9 @@ const defaultColumns: ColumnDef<Chihoi>[] = [
             <DropDownModalWrapper label="Delete" className="text-red-500">
               <DeleteChihoiForm id={chihoi.id} />
             </DropDownModalWrapper>
+            <DropDownModalWrapper label="Upload">
+              <UploadChihoiForm id={chihoi.id} />
+            </DropDownModalWrapper>
           </DropdownMenuContent>
         </DropdownMenu>
       );
@@ -76,11 +80,11 @@ const defaultColumns: ColumnDef<Chihoi>[] = [
 
 // Add, or override stuff here by specify id
 const updates: ColumnDef<Chihoi>[] = [
-  // {
-  //   id: "founding_date",
-  //   accessorKey: "founding_date",
-  //   // cell:
-  // },
+  {
+    id: "founding_date",
+    accessorFn: (d) => d["founding_date"] && dayjs(d["founding_date"]).tz("Asia/Ho_Chi_Minh").format("DD/MM/YYYY"),
+    // cell:
+  },
 ];
 
 export const columns = mergeArraysById(defaultColumns, updates);

src/app/dashboard/chihois/_components/upload-chihoi-form.tsx

@@ -0,0 +1,29 @@
+"use client";
+import ImageUpload from "@/components/form/antd-image-upload";
+import ModalCard from "@/components/form/modal-card";
+import { useDeleteChihoi } from "@/services/chihoi-service";
+
+export default function UploadChihoiForm({ id }: { id: string }) {
+  // const { mutate, isPending, isSuccess, isError: isCreateBookError } = useDeleteChihoi();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // mutate(id);
+  };
+
+  return (
+    <ModalCard
+      formId="upload-chihoi-form"
+      metadata={{
+        title: "Upload ảnh",
+        buttonLabel: "Upload ảnh",
+      }}
+      // onClose={isSuccess}
+      // isLoading={isPending}
+    >
+      <form id="upload-chihoi-form" onSubmit={handleSubmit}>
+        <ImageUpload onUpload={() => {}} />
+      </form>
+    </ModalCard>
+  );
+}

src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Providers } from "@/components/providers/providers";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "@/../public/globals.css";
+import { AntdRegistry } from "@ant-design/nextjs-registry";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,7 +19,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Providers>{children}</Providers>
+        <AntdRegistry>
+          <Providers>{children}</Providers>
+        </AntdRegistry>
       </body>
     </html>
   );

src/components/form/antd-image-upload.tsx

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import { InboxOutlined } from "@ant-design/icons";
+import type { UploadProps } from "antd";
+import { message, Upload } from "antd";
+
+const { Dragger } = Upload;
+
+const props: UploadProps = {
+  name: "file",
+  multiple: true,
+  action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
+  onChange(info) {
+    const { status } = info.file;
+    if (status !== "uploading") {
+      console.log(info.file, info.fileList);
+    }
+    if (status === "done") {
+      message.success(`${info.file.name} file uploaded successfully.`);
+    } else if (status === "error") {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  },
+  onDrop(e) {
+    console.log("Dropped files", e.dataTransfer.files);
+  },
+};
+
+export default function ImageUpload({ onUpload }: { onUpload: any }) {
+  return (
+    <Dragger {...props}>
+      <p className="ant-upload-drag-icon">
+        <InboxOutlined />
+      </p>
+      <p className="ant-upload-text">Click or drag file to this area to upload</p>
+      <p className="ant-upload-hint">
+        Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
+      </p>
+    </Dragger>
+  );
+}

src/components/form/generic-form-field.tsx

@@ -25,7 +25,11 @@ export function GenericFormField({
 
     schema = unwrapZodSchema(schema);
 
-    if (schema instanceof z.ZodDate) return <DateTimePicker label={name} name={name} id={name} {...props} />;
+    if (schema instanceof z.ZodDate) {
+      const date = props?.value ? new Date(props.value) : null;
+      delete props?.value;
+      return <DateTimePicker label={name} name={name} id={name} jsDate={date} {...props} />;
+    }
     if (schema instanceof z.ZodString) return <Input name={name} id={name} type="text" {...props} />;
     if (schema instanceof z.ZodNumber) return <Input name={name} id={name} type="number" {...props} />;
     if (schema instanceof z.ZodEnum) {

src/lib/constants.tsx

@@ -41,5 +41,5 @@ export const SIDEBAR_ITEMS: MenuItem[] = [
   },
 ];
 
-export const CREATE_EDIT_FIELDS_EXCLUDE = ["id", "updated_at", "created_at", "last_login_at", "role"];
+export const CREATE_EDIT_FIELDS_EXCLUDE = ["id", "reference", "updated_at", "created_at", "last_login_at", "role"];
 export const READ_FIELDS_EXCLUDE = ["password"];

src/services/chihoi-service.ts

@@ -36,7 +36,7 @@ const fetchChihoiById = async (id: string) => {
 
 // Create chihoi
 const createChihoi = async (chihoi: Chihoi) => {
-  return await fetcher<Chihoi>({ url: "/clubs/store", method: "POST", data: { ...chihoi } });
+  return await fetcher<Chihoi>({ url: "/clubs/store", method: "POST", data: chihoi });
 };
 
 // Delete chihoi
@@ -49,7 +49,7 @@ const editChihoi = async (chihoi: Chihoi) => {
   return await fetcher<Chihoi>({
     url: `/clubs/update/${chihoi.id}`,
     method: "PUT",
-    data: { ...chihoi },
+    data: chihoi,
   });
 };
 

src/services/employee-service.ts

@@ -36,7 +36,7 @@ const fetchEmployeeById = async (id: string) => {
 
 // Create employee
 const createEmployee = async (employee: Employee) => {
-  return await fetcher<Employee>({ url: "/employees/store", method: "POST", data: { ...employee } });
+  return await fetcher<Employee>({ url: "/employees/store", method: "POST", data: employee });
 };
 
 // Delete employee
@@ -49,7 +49,7 @@ const editEmployee = async (employee: Employee) => {
   return await fetcher<Employee>({
     url: `/employees/update/${employee.id}`,
     method: "PUT",
-    data: { ...employee },
+    data: employee,
   });
 };
 

src/services/role-service.ts

@@ -36,7 +36,7 @@ const fetchRoleById = async (id: string) => {
 
 // Create role
 const createRole = async (role: Role) => {
-  return await fetcher<Role>({ url: "/roles/store", method: "POST", data: { ...role } });
+  return await fetcher<Role>({ url: "/roles/store", method: "POST", data: role });
 };
 
 // Delete role
@@ -49,7 +49,7 @@ const editRole = async (role: Role) => {
   return await fetcher<Role>({
     url: `/roles/update/${role.id}`,
     method: "PUT",
-    data: { ...role },
+    data: role,
   });
 };
 

src/types/chihoi.ts

@@ -12,7 +12,7 @@ export const chihoiSchema = z.object({
   phone_zalo: z.string().regex(/^\d+$/, {
     message: "Phone number should only contain digits",
   }),
-  media: z.union([z.string(), z.number()]).optional(),
+  media: z.union([z.string(), z.number()]).nullable().optional(),
 });
 // .omit({ password: true });