Merge branch 'deploy' into feature/#5

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.2.6",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -15,9 +16,11 @@
     "antd": "^5.9.0",
     "dotenv": "^16.3.1",
     "firebase": "^10.3.1",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
@@ -52,6 +55,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/react-beautiful-dnd": "^13.1.4",
+    "@types/styled-components": "^5.1.27",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",

src/components/Employee/CardAddMember.tsx

@@ -0,0 +1,28 @@
+import { PlusOutlined } from "@ant-design/icons";
+import React from "react";
+import { Button, Dropdown } from "antd";
+import type { MenuProps } from "antd";
+
+const items: MenuProps["items"] = [
+  {
+    label: "Add Member",
+    key: "addMember",
+  },
+  {
+    label: "Add Team",
+    key: "addTeam",
+  },
+];
+
+export default function TableAddMember() {
+  return (
+    <Dropdown
+      menu={{ items }}
+      autoAdjustOverflow={true}
+      placement="bottomRight"
+      trigger={["click"]}
+    >
+      <Button type="primary" icon={<PlusOutlined />} size="large" />
+    </Dropdown>
+  );
+}

src/components/Employee/CardExportBtn.tsx

@@ -0,0 +1,12 @@
+import { CloudDownloadOutlined } from "@ant-design/icons";
+import React from "react";
+import { Button } from "antd";
+
+export default function TableExportBtn() {
+  return (
+    <Button size="large">
+      <CloudDownloadOutlined />
+      <span>Export</span>
+    </Button>
+  );
+}

src/components/Employee/CardFilter.tsx

@@ -0,0 +1,59 @@
+import { FilterFilled } from "@ant-design/icons";
+import React from "react";
+import { Button, Dropdown } from "antd";
+import type { MenuProps } from "antd";
+
+const items: MenuProps["items"] = [
+  {
+    type: "group",
+    label: "SORT BY:",
+    children: [
+      {
+        label: "default",
+        key: "sortDefault",
+      },
+      {
+        label: "Name",
+        key: "sortName",
+      },
+      {
+        label: "Team",
+        key: "sortTeam",
+      },
+    ],
+  },
+  {
+    type: "group",
+    label: "MEMBERS:",
+    children: [
+      {
+        label: "All",
+        key: "membersAll",
+      },
+      {
+        label: "Manager",
+        key: "membersManager",
+      },
+      {
+        label: "Member",
+        key: "membersMember",
+      },
+    ],
+  },
+];
+
+export default function TableFilter() {
+  return (
+    <Dropdown
+      menu={{ items }}
+      placement="bottomLeft"
+      className="filter-btn"
+      trigger={["click"]}
+    >
+      <Button size="large">
+        <FilterFilled />
+        <span>Filter</span>
+      </Button>
+    </Dropdown>
+  );
+}