Test/react_task_1b
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New Tasks

Browse Source
This commit is contained in:
Possible
2024-06-25 23:51:51 +01:00
parent ca57235999
commit 967aec7bd1
117 changed files with 9108 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+52 -2
View File
@@ -8,8 +8,8 @@ All this task must be done in 1 day
- in src/utils/MkdSDK.jsx implement Line 91
- in src/pages/AdminLoginPage.jsx implement Line 30
- once login successful, call snackbar component to show logged in toast. DONT use 3rd party library
- in src/authContext.jsx implement 16
- in src/authContext.jsx implement 40 to check if token still valid
- in src/context/Auth/AuthContext.jsx implement 16
- in src/context/Auth/AuthContext.jsx implement 40 to check if token still valid
- There's a bug that it flickers Page Not Found
- once logged in go to dashboard page like figma file
https://www.figma.com/file/veiESwD61KJBa7BpEHtbdl/react-task-2?node-id=1086%3A15525
@@ -23,6 +23,56 @@ All this task must be done in 1 day
- Please READ SDK file and reuse code when you can. DO NOT REINVENT THE WHEEL.
- Use React Drag and drop library https://react-dnd.github.io/react-dnd/about to be able to rearrange the rows and columns in the table in dashboard. On Refresh, the columns go back to default
### Table Task
- in src/pages/AdminListReceipts.jsx - we have a table listing receipts
1. fix the bind issue in src/components/MkdListTable/MkdListTableBindOperations.jsx - all //TO DO
For example
<!-- {
edit: {
show: true,
// action: (ids) => navigate(`/admin/edit-receipts/${ids[0]}`),
multiple: false,
locations: ["buttons", "dropdown"],
icon: <EditIcon2 />,
bind: {
column: "receipt_status",
action: "hide",
operator: operations.EQUAL,
ifValue: 1,
},
}
} -->
the edit action binds via the bind property to a column "receipt_status"
if the value of receipt_status is 1 then the edit should be hidden, i.e not shown
2. in src/components/MkdListTable/MkdListTableRow.jsx each column has a format it should be rendered in
- "line_items" and "receipt_charges" have the list property `true`, listType: `json|object_array` could be `json|number_array` or `json|string_array` but in this case it is the `json|object_array`
- using the action which tells you what key in the array of objects you need to work on
operation is either to `list` all the values and return an array or `add` to add all the values of the key and return the result
- src/utils/utils.jsx - Line 179
<!-- Sample = {
header: "receipt_charges",
accessor: "receipt_charges",
isSorted: true,
list: true,
limit: 6,
listType: "json|object_array",
action: {
key: "total_charges",
operation: "add",
},
selected_column: true,
isSortedDesc: false,
mappingExist: false,
mappings: {},
}, -->
## Login
```
index.html
+2 -1
View File
@@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/src/mkd_logo.png" />
<!-- <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
jsconfig.json
+17
View File
@@ -0,0 +1,17 @@
{
"compilerOptions": {
"jsx": "react",
"baseUrl": ".",
"paths": {
"Components/*": ["src/components/*"],
"Pages/*": ["src/pages/*"],
"Utils/*": ["src/utils/*"],
"Assets/*": ["src/assets/*"],
"Context/*": ["src/context/*"],
"Routes/*": ["src/routes/*"],
"Hooks/*": ["src/hooks/*"],
"Src/*": ["src/*"]
}
}
}
package-lock.json
Generated
+179
View File
@@ -12,9 +12,13 @@
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-hook-form": "^7.31.2",
"react-icons": "^5.2.1",
"react-loading-skeleton": "^3.1.0",
"react-router": "^6.2.2",
"react-router-dom": "^6.2.2",
"react-spinners": "^0.13.8",
"react-toggle": "^4.1.3",
"react-tooltip": "^5.27.0",
"yup": "^0.32.11"
},
"devDependencies": {
@@ -417,6 +421,28 @@
"node": ">=6.9.0"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.3.tgz",
"integrity": "sha512-1ZpCvYf788/ZXOhRQGFxnYQOVgeU+pi0i+d0Ow34La7qjIXETi6RNswGVKkA6KcDO8/+Ysu2E/CeUmmeEBDvTg==",
"dependencies": {
"@floating-ui/utils": "^0.2.3"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.6",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.6.tgz",
"integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==",
"dependencies": {
"@floating-ui/core": "^1.0.0",
"@floating-ui/utils": "^0.2.3"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz",
"integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww=="
},
"node_modules/@hookform/resolvers": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.1.tgz",
@@ -776,6 +802,11 @@
"node": ">= 6"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/color-convert": {
"version": "1.9.3",
"dev": true,
@@ -1236,6 +1267,15 @@
"node": ">=0.10.0"
}
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/object-hash": {
"version": "3.0.0",
"dev": true,
@@ -1396,6 +1436,17 @@
"dev": true,
"license": "MIT"
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"peer": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"node_modules/property-expr": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
@@ -1467,6 +1518,20 @@
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-icons": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
"integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"peer": true
},
"node_modules/react-loading-skeleton": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
@@ -1507,6 +1572,41 @@
"react-dom": ">=16.8"
}
},
"node_modules/react-spinners": {
"version": "0.13.8",
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
"integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-toggle": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
"integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==",
"dependencies": {
"classnames": "^2.2.5"
},
"peerDependencies": {
"prop-types": ">= 15.3.0 < 19",
"react": ">= 15.3.0 < 19",
"react-dom": ">= 15.3.0 < 19"
}
},
"node_modules/react-tooltip": {
"version": "5.27.0",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.27.0.tgz",
"integrity": "sha512-JXROcdfCEbCqkAkh8LyTSP3guQ0dG53iY2E2o4fw3D8clKzziMpE6QG6CclDaHELEKTzpMSeAOsdtg0ahoQosw==",
"dependencies": {
"@floating-ui/dom": "^1.6.1",
"classnames": "^2.3.0"
},
"peerDependencies": {
"react": ">=16.14.0",
"react-dom": ">=16.14.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -2037,6 +2137,28 @@
"to-fast-properties": "^2.0.0"
}
},
"@floating-ui/core": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.3.tgz",
"integrity": "sha512-1ZpCvYf788/ZXOhRQGFxnYQOVgeU+pi0i+d0Ow34La7qjIXETi6RNswGVKkA6KcDO8/+Ysu2E/CeUmmeEBDvTg==",
"requires": {
"@floating-ui/utils": "^0.2.3"
}
},
"@floating-ui/dom": {
"version": "1.6.6",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.6.tgz",
"integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==",
"requires": {
"@floating-ui/core": "^1.0.0",
"@floating-ui/utils": "^0.2.3"
}
},
"@floating-ui/utils": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz",
"integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww=="
},
"@hookform/resolvers": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.1.tgz",
@@ -2262,6 +2384,11 @@
}
}
},
"classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"color-convert": {
"version": "1.9.3",
"dev": true,
@@ -2551,6 +2678,12 @@
"version": "0.1.2",
"dev": true
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"peer": true
},
"object-hash": {
"version": "3.0.0",
"dev": true
@@ -2629,6 +2762,17 @@
"version": "4.2.0",
"dev": true
},
"prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"peer": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"property-expr": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
@@ -2661,6 +2805,18 @@
"integrity": "sha512-A0bsgZZUnGdG68sXLBNMN7zRYKbYc/ESjDkjrJZ8PZ8/96EQ0IwMfYY3wpopt+yn2+Mm3APEUkw+JdjYQSRVJA==",
"requires": {}
},
"react-icons": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
"integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
"requires": {}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"peer": true
},
"react-loading-skeleton": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
@@ -2688,6 +2844,29 @@
"react-router": "6.3.0"
}
},
"react-spinners": {
"version": "0.13.8",
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
"integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
"requires": {}
},
"react-toggle": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
"integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==",
"requires": {
"classnames": "^2.2.5"
}
},
"react-tooltip": {
"version": "5.27.0",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.27.0.tgz",
"integrity": "sha512-JXROcdfCEbCqkAkh8LyTSP3guQ0dG53iY2E2o4fw3D8clKzziMpE6QG6CclDaHELEKTzpMSeAOsdtg0ahoQosw==",
"requires": {
"@floating-ui/dom": "^1.6.1",
"classnames": "^2.3.0"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
package.json
+5 -1
View File
@@ -8,13 +8,17 @@
"preview": "vite preview"
},
"dependencies": {
"@hookform/resolvers": "^2.8.10",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"@hookform/resolvers": "^2.8.10",
"react-hook-form": "^7.31.2",
"react-icons": "^5.2.1",
"react-loading-skeleton": "^3.1.0",
"react-router": "^6.2.2",
"react-router-dom": "^6.2.2",
"react-spinners": "^0.13.8",
"react-toggle": "^4.1.3",
"react-tooltip": "^5.27.0",
"yup": "^0.32.11"
},
"devDependencies": {
src/App.jsx
+2 -2
View File
@@ -1,6 +1,6 @@
import AuthProvider from "./authContext";
import GlobalProvider from "./globalContext";
import { BrowserRouter as Router } from "react-router-dom";
import { AuthProvider } from "Context/Auth";
import { GlobalProvider } from "Context/Global";
import Main from "./main";
function App() {
src/assets/images/index.js
+2
View File
@@ -0,0 +1,2 @@
export { default as LoginBgNew } from "./login-new-bg.png";
export { default as NoDataFoundImg } from "./no_data_found.png";
src/assets/images/login-new-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 669 KiB

src/assets/images/mkd_logo.png
+18
View File
@@ -0,0 +1,18 @@
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/assets/images/no_data_found.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

src/assets/svgs/AddressbookIcon.jsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
const AddressbookIcon = ({
className = "",
stroke = "black",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="14"
height="18"
viewBox="0 0 14 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.0404 16.7083H1.79036C1.33013 16.7083 0.957031 16.3352 0.957031 15.875V15.4583C0.957031 14.9981 1.33013 14.625 1.79036 14.625H13.0404V1.29163H1.79036C1.33013 1.29163 0.957031 1.66472 0.957031 2.12496V15.6666M6.58203 6.70829H7.41536M5.1237 10.4583C5.1237 10.4583 5.1237 9.20829 6.9987 9.20829C8.8737 9.20829 8.8737 10.4583 8.8737 10.4583H5.1237ZM7.83203 6.70829C7.83203 7.16853 7.45894 7.54163 6.9987 7.54163C6.53846 7.54163 6.16536 7.16853 6.16536 6.70829C6.16536 6.24806 6.53846 5.87496 6.9987 5.87496C7.45894 5.87496 7.83203 6.24806 7.83203 6.70829Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default AddressbookIcon;
src/assets/svgs/AvatarIcon.jsx
+37
View File
@@ -0,0 +1,37 @@
import React from "react";
const AvatarIcon = ({ className = "", fill = "#A8A8A8" }) => {
return (
<svg
className={`${className}`}
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M13.3333 5.41666C13.3333 7.25761 11.8409 8.74999 9.99997 8.74999C8.15902 8.74999 6.66664 7.25761 6.66664 5.41666C6.66664 3.57571 8.15902 2.08332 9.99997 2.08332C11.8409 2.08332 13.3333 3.57571 13.3333 5.41666Z"
fill={fill}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.99997 2.49999C8.38914 2.49999 7.08331 3.80583 7.08331 5.41666C7.08331 7.02749 8.38914 8.33332 9.99997 8.33332C11.6108 8.33332 12.9166 7.02749 12.9166 5.41666C12.9166 3.80583 11.6108 2.49999 9.99997 2.49999ZM6.24997 5.41666C6.24997 3.34559 7.9289 1.66666 9.99997 1.66666C12.071 1.66666 13.75 3.34559 13.75 5.41666C13.75 7.48772 12.071 9.16666 9.99997 9.16666C7.9289 9.16666 6.24997 7.48772 6.24997 5.41666Z"
fill={fill}
/>
<path
d="M9.99997 10.4167C6.27535 10.4167 3.66126 13.3457 3.33331 17.0833H16.6666C16.3387 13.3457 13.7246 10.4167 9.99997 10.4167Z"
fill={fill}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.80032 16.6667H16.1996C15.725 13.323 13.3164 10.8333 9.99997 10.8333C6.68352 10.8333 4.27494 13.323 3.80032 16.6667ZM2.91823 17.0469C3.26095 13.1409 6.01533 9.99999 9.99997 9.99999C13.9846 9.99999 16.739 13.1409 17.0817 17.0469L17.1215 17.5H2.87848L2.91823 17.0469Z"
fill={fill}
/>
</svg>
);
};
export default AvatarIcon;
src/assets/svgs/AwaitIcon.jsx
+33
View File
@@ -0,0 +1,33 @@
import React from "react";
const AwaitIcon = ({
className = "",
stroke = "#2D9F75",
fill = "#7B1113",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="14"
height="12"
viewBox="0 0 14 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.833496 0C0.557354 0 0.333496 0.223858 0.333496 0.5V2.16667C0.333496 2.44281 0.557354 2.66667 0.833496 2.66667H13.1668C13.443 2.66667 13.6668 2.44281 13.6668 2.16667V0.5C13.6668 0.223858 13.443 0 13.1668 0H0.833496Z"
fill={stroke}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.0002 3.66667H1.00016L1.00016 10.4508C1.00015 10.6225 1.00014 10.7801 1.01091 10.9119C1.02252 11.054 1.04909 11.2095 1.12732 11.363C1.23917 11.5825 1.41765 11.761 1.63717 11.8728C1.79071 11.9511 1.94616 11.9776 2.08825 11.9893C2.22004 12 2.37769 12 2.54934 12H11.451C11.6226 12 11.7803 12 11.9121 11.9893C12.0542 11.9776 12.2096 11.9511 12.3632 11.8728C12.5827 11.761 12.7612 11.5825 12.873 11.363C12.9512 11.2095 12.9778 11.054 12.9894 10.9119C13.0002 10.7801 13.0002 10.6225 13.0002 10.4508V3.66667ZM5.16683 5.83333C5.16683 5.55719 5.39069 5.33333 5.66683 5.33333H8.3335C8.60964 5.33333 8.8335 5.55719 8.8335 5.83333C8.8335 6.10948 8.60964 6.33333 8.3335 6.33333H5.66683C5.39069 6.33333 5.16683 6.10948 5.16683 5.83333Z"
fill={stroke}
/>
</svg>
);
};
export default AwaitIcon;
src/assets/svgs/BigPinIcon.jsx
+74
View File
@@ -0,0 +1,74 @@
import React from "react";
const BigPinIcon = ({
className = "",
stroke = "#F2AE40",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="52"
height="54"
viewBox="0 0 52 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_d_2433_85533)">
<rect x="2" width="48" height="48" rx="24" fill="#18181B" />
<path
d="M22.375 27.625L26.7983 32.0483C27.3375 32.5874 28.2575 32.349 28.4669 31.6159L30.3882 24.8915C30.4599 24.6405 30.6269 24.4275 30.8536 24.298L34.6133 22.1496C35.1858 21.8224 35.2905 21.0405 34.8243 20.5742L29.4258 15.1758C28.9596 14.7095 28.1776 14.8142 27.8505 15.3867L25.7021 19.1465C25.5725 19.3731 25.3595 19.5401 25.1085 19.6119L18.3842 21.5331C17.651 21.7426 17.4126 22.6626 17.9518 23.2017L22.375 27.625ZM22.375 27.625L22.3824 27.6176M22.375 27.625L17.75 32.25"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<filter
id="filter0_d_2433_85533"
x="0"
y="0"
width="52"
height="54"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="8"
operator="erode"
in="SourceAlpha"
result="effect1_dropShadow_2433_85533"
/>
<feOffset dy="4" />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.345098 0 0 0 0 0.360784 0 0 0 0 0.372549 0 0 0 0.2 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_2433_85533"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_2433_85533"
result="shape"
/>
</filter>
</defs>
</svg>
);
};
export default BigPinIcon;
src/assets/svgs/CaretLeft.jsx
+26
View File
@@ -0,0 +1,26 @@
import React from "react";
export const CaretLeft = ({
className = "",
stroke = "black",
fill = "none",
}) => {
return (
<svg
className={`${className}`}
width="8"
height="14"
viewBox="0 0 8 14"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 13L1 7L7 1"
stroke={stroke}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
src/assets/svgs/CheckIcon.jsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
const CheckIcon = ({
className = "",
stroke = "#2D9F75",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="16"
viewBox="0 0 18 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.5 10.4997L6.7451 14.6663L16.5 1.33301"
stroke={stroke}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default CheckIcon;
src/assets/svgs/ChecklistIcon.jsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
const ChecklistIcon = ({
className = "",
stroke = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="16"
height="14"
viewBox="0 0 16 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.79167 10.5417H14.875M7.79167 3.45833H14.875M1.125 4.1875L2.51389 5.125L5.29167 1.375M1.125 11.6875L2.51389 12.625L5.29167 8.875"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default ChecklistIcon;
src/assets/svgs/ChevronDownIcon.jsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
const ChevronDownIcon = ({
className = "",
stroke = "#D4D4D8",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 1L4.64645 4.64645C4.84171 4.84171 5.15829 4.84171 5.35355 4.64645L9 1"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default ChevronDownIcon;
src/assets/svgs/ChevronRightIcon.jsx
+27
View File
@@ -0,0 +1,27 @@
import React from "react";
const ChevronRightIcon = ({
className = "",
fill = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="6"
height="10"
viewBox="0 0 6 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
// d="M3.79587 4.99932L0.083374 1.28682L1.14387 0.226318L5.91687 4.99932L1.14387 9.77232L0.083374 8.71182L3.79587 4.99932Z"
d="M3.796 4.99932L0.0834961 1.28682L1.144 0.226318L5.917 4.99932L1.144 9.77232L0.0834961 8.71182L3.796 4.99932Z"
fill={fill}
/>
</svg>
);
};
export default ChevronRightIcon;
src/assets/svgs/ChevronUpIcon.jsx
+32
View File
@@ -0,0 +1,32 @@
import React from "react";
const ChevronUpIcon = ({
className = "",
stroke = "black",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="chevron-up">
<path
id="Icon"
d="M18 15L12 9L6 15"
stroke={stroke}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
);
};
export default ChevronUpIcon;
src/assets/svgs/CircleCheckMarkIcon.jsx
+27
View File
@@ -0,0 +1,27 @@
import React from "react";
const CircleCheckMarkIcon = ({
className = "",
fill = "#38C793",
stroke = "#D4D4D8",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 12C2.6862 12 0 9.3138 0 6C0 2.6862 2.6862 0 6 0C9.3138 0 12 2.6862 12 6C12 9.3138 9.3138 12 6 12ZM5.4018 8.4L9.6438 4.1574L8.7954 3.309L5.4018 6.7032L3.7044 5.0058L2.856 5.8542L5.4018 8.4Z"
fill={fill}
/>
</svg>
);
};
export default CircleCheckMarkIcon;
src/assets/svgs/CircleCloseIcon.jsx
+22
View File
@@ -0,0 +1,22 @@
import React from "react";
const CircleCloseIcon = ({ className = "", fill = "#0F1324" }) => {
return (
<svg
className={`${className}`}
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.9987 13.6666C3.3167 13.6666 0.332031 10.6819 0.332031 6.99992C0.332031 3.31792 3.3167 0.333252 6.9987 0.333252C10.6807 0.333252 13.6654 3.31792 13.6654 6.99992C13.6654 10.6819 10.6807 13.6666 6.9987 13.6666ZM6.9987 6.05725L5.11336 4.17125L4.17003 5.11459L6.05603 6.99992L4.17003 8.88525L5.11336 9.82859L6.9987 7.94258L8.88403 9.82859L9.82736 8.88525L7.94136 6.99992L9.82736 5.11459L8.88403 4.17125L6.9987 6.05725Z"
fill={fill}
fillOpacity="0.6"
/>
</svg>
);
};
export default CircleCloseIcon;
src/assets/svgs/CircleDollarIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const CircleDollarIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="18"
viewBox="0 0 18 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.00033 5.14567V4.28919M9.00033 12.854V13.7105M10.8551 6.43039C10.4849 5.91839 9.79287 5.57391 9.00033 5.57391H8.76241C7.71125 5.57391 6.85912 6.25562 6.85912 7.09655V7.16192C6.85912 7.76341 7.28392 8.31327 7.95641 8.58227L10.0442 9.41741C10.7167 9.6864 11.1415 10.2363 11.1415 10.8378C11.1415 11.7148 10.2528 12.4258 9.15652 12.4258H9.00033C8.20778 12.4258 7.5158 12.0813 7.14558 11.5693M16.7087 8.99984C16.7087 13.257 13.2575 16.7082 9.00033 16.7082C4.74313 16.7082 1.29199 13.257 1.29199 8.99984C1.29199 4.74264 4.74313 1.2915 9.00033 1.2915C13.2575 1.2915 16.7087 4.74264 16.7087 8.99984Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default CircleDollarIcon;
src/assets/svgs/CloseIcon.jsx
+19
View File
@@ -0,0 +1,19 @@
import React from "react";
export const CloseIcon = ({ className = "", fill = "#636363" }) => {
return (
<svg
className={`${className}`}
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.4059 16.6337C20.198 17.4257 20.198 18.6139 19.4059 19.4059C19.0099 19.802 18.5149 20 18.0198 20C17.5248 20 17.0297 19.802 16.6337 19.4059L10 12.7723L3.36634 19.4059C2.9703 19.802 2.47525 20 1.9802 20C1.48515 20 0.990099 19.802 0.594059 19.4059C-0.19802 18.6139 -0.19802 17.4257 0.594059 16.6337L7.22772 10L0.594059 3.36634C-0.19802 2.57426 -0.19802 1.38614 0.594059 0.594059C1.38614 -0.19802 2.57426 -0.19802 3.36634 0.594059L10 7.22772L16.6337 0.594059C17.4257 -0.19802 18.6139 -0.19802 19.4059 0.594059C20.198 1.38614 20.198 2.57426 19.4059 3.36634L12.7723 10L19.4059 16.6337Z"
fill={fill}
/>
</svg>
);
};
src/assets/svgs/CloudUploadIcon.jsx
+26
View File
@@ -0,0 +1,26 @@
import React from "react";
const CloudUploadIcon = ({
className = "",
fill = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="20"
height="18"
viewBox="0 0 20 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.99981 9.5274L13.8185 13.3452L12.545 14.6187L10.8998 12.9735V18H9.09981V12.9717L7.45461 14.6187L6.18111 13.3452L9.99981 9.5274ZM9.99981 1.99944e-08C11.5451 7.35929e-05 13.0365 0.568002 14.1904 1.59581C15.3443 2.62361 16.0803 4.03962 16.2584 5.5746C17.3782 5.87998 18.3552 6.56919 19.0184 7.52178C19.6816 8.47436 19.989 9.62972 19.8869 10.786C19.7847 11.9422 19.2794 13.0257 18.4594 13.8472C17.6394 14.6687 16.5567 15.1759 15.4007 15.2802V13.4676C15.8149 13.4085 16.2131 13.2674 16.5721 13.0527C16.9312 12.8379 17.2439 12.5539 17.4919 12.217C17.74 11.8801 17.9184 11.4972 18.0169 11.0906C18.1153 10.6839 18.1318 10.2618 18.0653 9.84876C17.9989 9.43572 17.8508 9.04005 17.6298 8.68486C17.4087 8.32967 17.1191 8.02208 16.7779 7.78002C16.4367 7.53797 16.0506 7.36631 15.6424 7.27507C15.2341 7.18383 14.8117 7.17483 14.3999 7.2486C14.5409 6.5924 14.5332 5.91297 14.3776 5.2601C14.222 4.60722 13.9223 3.99743 13.5004 3.47538C13.0786 2.95333 12.5454 2.53225 11.9397 2.24298C11.3341 1.9537 10.6714 1.80357 10.0003 1.80357C9.32909 1.80357 8.66642 1.9537 8.06078 2.24298C7.45515 2.53225 6.92189 2.95333 6.50007 3.47538C6.07825 3.99743 5.77854 4.60722 5.62291 5.2601C5.46728 5.91297 5.45966 6.5924 5.60061 7.2486C4.7795 7.0944 3.93076 7.27271 3.24112 7.74429C2.55147 8.21586 2.0774 8.94209 1.92321 9.7632C1.76901 10.5843 1.94731 11.433 2.41889 12.1227C2.89047 12.8123 3.6167 13.2864 4.43781 13.4406L4.59981 13.4676V15.2802C3.44371 15.1761 2.36097 14.669 1.54083 13.8476C0.720683 13.0261 0.215301 11.9426 0.113014 10.7863C0.0107261 9.63009 0.318038 8.47466 0.981239 7.522C1.64444 6.56934 2.62134 5.88005 3.74121 5.5746C3.91914 4.03954 4.65507 2.62342 5.80903 1.59558C6.96298 0.567738 8.45447 -0.000123032 9.99981 1.99944e-08Z"
fill={fill}
/>
</svg>
);
};
export default CloudUploadIcon;
src/assets/svgs/ColumnIcon.jsx
+27
View File
@@ -0,0 +1,27 @@
import React from "react";
const ColumnIcon = ({
className = "",
stroke = "#717179",
fill = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.25 1.75H1.75V12.25H6.25V1.75ZM7.75 1.75V12.25H12.25V1.75H7.75ZM1 0.25H13C13.1989 0.25 13.3897 0.329018 13.5303 0.46967C13.671 0.610322 13.75 0.801088 13.75 1V13C13.75 13.1989 13.671 13.3897 13.5303 13.5303C13.3897 13.671 13.1989 13.75 13 13.75H1C0.801088 13.75 0.610322 13.671 0.46967 13.5303C0.329018 13.3897 0.25 13.1989 0.25 13V1C0.25 0.801088 0.329018 0.610322 0.46967 0.46967C0.610322 0.329018 0.801088 0.25 1 0.25Z"
fill={fill}
/>
</svg>
);
};
export default ColumnIcon;
src/assets/svgs/CombineIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const CombineIcon = ({
className = "",
stroke = "white",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="16"
viewBox="0 0 18 16"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49694 8L1.75611 9.86137C1.13664 10.1696 1.13664 11.0593 1.75611 11.3676L8.63042 14.7881C8.86326 14.904 9.13641 14.904 9.36926 14.7881L16.2436 11.3676C16.863 11.0593 16.863 10.1696 16.2436 9.86138L12.5027 8M5.49694 8L1.75611 6.13862C1.13664 5.83039 1.13664 4.94067 1.7561 4.63243L8.63041 1.2119C8.86326 1.09603 9.13641 1.09603 9.36926 1.2119L16.2436 4.63243C16.863 4.94067 16.863 5.83039 16.2436 6.13862L12.5027 8M5.49694 8L8.63041 9.55916C8.86326 9.67502 9.13641 9.67502 9.36926 9.55916L12.5027 8"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="square"
strokeLinejoin="round"
/>
</svg>
);
};
export default CombineIcon;
src/assets/svgs/ControlIcon.jsx
+34
View File
@@ -0,0 +1,34 @@
import React from "react";
const ControlIcon = ({ className = "", fill = "#A8A8A8", onClick = () => { } }) => {
return (
<svg
className={`${className}`}
onClick={onClick}
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path
d="M7.125 1.5C6.50368 1.5 6 2.00368 6 2.625V4.8295C6 5.12787 6.11853 5.41402 6.3295 5.625L8.33709 7.63258C8.7032 7.9987 9.2968 7.9987 9.66291 7.63258L11.6705 5.625C11.8815 5.41402 12 5.12787 12 4.8295V2.625C12 2.00368 11.4963 1.5 10.875 1.5H7.125Z"
fill={fill}
/>
<path
d="M16.5 7.125C16.5 6.50368 15.9963 6 15.375 6H13.1705C12.8721 6 12.586 6.11853 12.375 6.3295L10.3674 8.33709C10.0013 8.7032 10.0013 9.2968 10.3674 9.66291L12.375 11.6705C12.586 11.8815 12.8721 12 13.1705 12H15.375C15.9963 12 16.5 11.4963 16.5 10.875V7.125Z"
fill={fill}
/>
<path
d="M10.875 16.5C11.4963 16.5 12 15.9963 12 15.375V13.1705C12 12.8721 11.8815 12.586 11.6705 12.375L9.66291 10.3674C9.2968 10.0013 8.7032 10.0013 8.33709 10.3674L6.3295 12.375C6.11853 12.586 6 12.8721 6 13.1705V15.375C6 15.9963 6.50368 16.5 7.125 16.5H10.875Z"
fill={fill}
/>
<path
d="M1.5 10.875C1.5 11.4963 2.00368 12 2.625 12H4.8295C5.12787 12 5.41402 11.8815 5.625 11.6705L7.63258 9.66291C7.9987 9.2968 7.9987 8.7032 7.63258 8.33709L5.625 6.3295C5.41402 6.11853 5.12787 6 4.8295 6H2.625C2.00368 6 1.5 6.50368 1.5 7.125V10.875Z"
fill={fill}
/>
</svg>
);
};
export default ControlIcon;
src/assets/svgs/CopyIcon.jsx
+16
View File
@@ -0,0 +1,16 @@
import React from "react";
export const CopyIcon = ({ className = "", fill = "#A8A8A8", onClick = () => { } }) => {
return (
<svg onClick={onClick} className={`${className}`} xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<g clipPath="url(#clip0_1405_8594)">
<path d="M13.3332 13.3332V15.6665C13.3332 16.5999 13.3332 17.0666 13.1515 17.4232C12.9917 17.7368 12.7368 17.9917 12.4232 18.1515C12.0666 18.3332 11.5999 18.3332 10.6665 18.3332H4.33317C3.39975 18.3332 2.93304 18.3332 2.57652 18.1515C2.26292 17.9917 2.00795 17.7368 1.84816 17.4232C1.6665 17.0666 1.6665 16.5999 1.6665 15.6665V9.33317C1.6665 8.39975 1.6665 7.93304 1.84816 7.57652C2.00795 7.26292 2.26292 7.00795 2.57652 6.84816C2.93304 6.6665 3.39975 6.6665 4.33317 6.6665H6.6665M9.33317 13.3332H15.6665C16.5999 13.3332 17.0666 13.3332 17.4232 13.1515C17.7368 12.9917 17.9917 12.7368 18.1515 12.4232C18.3332 12.0666 18.3332 11.5999 18.3332 10.6665V4.33317C18.3332 3.39975 18.3332 2.93304 18.1515 2.57652C17.9917 2.26292 17.7368 2.00795 17.4232 1.84816C17.0666 1.6665 16.5999 1.6665 15.6665 1.6665H9.33317C8.39975 1.6665 7.93304 1.6665 7.57652 1.84816C7.26292 2.00795 7.00795 2.26292 6.84816 2.57652C6.6665 2.93304 6.6665 3.39975 6.6665 4.33317V10.6665C6.6665 11.5999 6.6665 12.0666 6.84816 12.4232C7.00795 12.7368 7.26292 12.9917 7.57652 13.1515C7.93304 13.3332 8.39975 13.3332 9.33317 13.3332Z" stroke="#A8A8A8" stroke-width="1.5" strokeLinecap="round" strokeLinejoin="round" />
</g>
<defs>
<clipPath id="clip0_1405_8594">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
);
};
src/assets/svgs/CsvIcon.jsx
+153
View File
@@ -0,0 +1,153 @@
import React from "react";
const CsvIcon = ({
className = "",
fill = "#38C793",
stroke = "#D4D4D8",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_4112_120787)">
<g filter="url(#filter0_di_4112_120787)">
<path
d="M30 40H10C6.68629 40 4 37.3137 4 34V6C4 2.68629 6.68629 0 10 0H20.5147C22.106 0 23.6321 0.632142 24.7574 1.75736L34.2426 11.2426C35.3679 12.3679 36 13.894 36 15.4853V34C36 37.3137 33.3137 40 30 40Z"
fill="white"
/>
<path
d="M30 39.25H10C7.10051 39.25 4.75 36.8995 4.75 34V6C4.75 3.10051 7.10051 0.75 10 0.75H20.5147C21.9071 0.75 23.2425 1.30312 24.227 2.28769L33.7123 11.773C34.6969 12.7575 35.25 14.0929 35.25 15.4853V34C35.25 36.8995 32.8995 39.25 30 39.25Z"
stroke={stroke}
stroke-width="1.5"
/>
</g>
<path
d="M23 1V9C23 11.2091 24.7909 13 27 13H35"
stroke={stroke}
stroke-width="1.5"
/>
<g filter="url(#filter1_i_4112_120787)">
<mask id="path-4-inside-1_4112_120787" fill="white">
<path d="M0 22C0 19.7909 1.79086 18 4 18H26C28.2091 18 30 19.7909 30 22V30C30 32.2091 28.2091 34 26 34H4C1.79086 34 0 32.2091 0 30V22Z" />
</mask>
<path
d="M0 22C0 19.7909 1.79086 18 4 18H26C28.2091 18 30 19.7909 30 22V30C30 32.2091 28.2091 34 26 34H4C1.79086 34 0 32.2091 0 30V22Z"
fill={fill}
/>
<path
d="M-1 22C-1 19.2386 1.23858 17 4 17H26C28.7614 17 31 19.2386 31 22H29C29 20.3431 27.6569 19 26 19H4C2.34315 19 1 20.3431 1 22H-1ZM30 34H0H30ZM4 34C1.23858 34 -1 31.7614 -1 29V22C-1 19.2386 1.23858 17 4 17V19C2.34315 19 1 20.3431 1 22V30C1 32.2091 2.34315 34 4 34ZM26 17C28.7614 17 31 19.2386 31 22V29C31 31.7614 28.7614 34 26 34C27.6569 34 29 32.2091 29 30V22C29 20.3431 27.6569 19 26 19V17Z"
fill="black"
fillOpacity="0.08"
mask="url(#path-4-inside-1_4112_120787)"
/>
<path
d="M10.6367 24.6992H9.17578C9.13411 24.4596 9.05729 24.2474 8.94531 24.0625C8.83333 23.875 8.69401 23.7161 8.52734 23.5859C8.36068 23.4557 8.17057 23.3581 7.95703 23.293C7.74609 23.2253 7.51823 23.1914 7.27344 23.1914C6.83854 23.1914 6.45313 23.3008 6.11719 23.5195C5.78125 23.7357 5.51823 24.0534 5.32813 24.4727C5.13802 24.8893 5.04297 25.3984 5.04297 26C5.04297 26.612 5.13802 27.1276 5.32813 27.5469C5.52083 27.9635 5.78385 28.2786 6.11719 28.4922C6.45313 28.7031 6.83724 28.8086 7.26953 28.8086C7.50911 28.8086 7.73307 28.7773 7.94141 28.7148C8.15234 28.6497 8.34115 28.5547 8.50781 28.4297C8.67708 28.3047 8.81901 28.151 8.93359 27.9687C9.05078 27.7865 9.13151 27.5781 9.17578 27.3437L10.6367 27.3516C10.582 27.7318 10.4635 28.0885 10.2812 28.4219C10.1016 28.7552 9.86589 29.0495 9.57422 29.3047C9.28255 29.5573 8.94141 29.7552 8.55078 29.8984C8.16016 30.0391 7.72656 30.1094 7.25 30.1094C6.54688 30.1094 5.91927 29.9466 5.36719 29.6211C4.8151 29.2956 4.38021 28.8255 4.0625 28.2109C3.74479 27.5964 3.58594 26.8594 3.58594 26C3.58594 25.138 3.74609 24.401 4.06641 23.7891C4.38672 23.1745 4.82292 22.7044 5.375 22.3789C5.92708 22.0534 6.55208 21.8906 7.25 21.8906C7.69531 21.8906 8.10938 21.9531 8.49219 22.0781C8.875 22.2031 9.21615 22.3867 9.51563 22.6289C9.8151 22.8685 10.0612 23.1628 10.2539 23.5117C10.4492 23.8581 10.5768 24.2539 10.6367 24.6992ZM16.5315 24.1992C16.4951 23.8581 16.3414 23.5924 16.0706 23.4023C15.8024 23.2122 15.4534 23.1172 15.0237 23.1172C14.7216 23.1172 14.4625 23.1628 14.2464 23.2539C14.0302 23.3451 13.8649 23.4687 13.7503 23.625C13.6357 23.7812 13.5771 23.9596 13.5745 24.1602C13.5745 24.3268 13.6123 24.4714 13.6878 24.5937C13.7659 24.7161 13.8714 24.8203 14.0042 24.9062C14.137 24.9896 14.2841 25.0599 14.4456 25.1172C14.607 25.1745 14.7698 25.2227 14.9339 25.2617L15.6839 25.4492C15.986 25.5195 16.2763 25.6146 16.555 25.7344C16.8362 25.8542 17.0875 26.0052 17.3089 26.1875C17.5328 26.3698 17.7099 26.5898 17.8401 26.8477C17.9703 27.1055 18.0354 27.4076 18.0354 27.7539C18.0354 28.2227 17.9156 28.6354 17.6761 28.9922C17.4365 29.3464 17.0901 29.6237 16.637 29.8242C16.1865 30.0221 15.6409 30.1211 15.0003 30.1211C14.3779 30.1211 13.8375 30.0247 13.3792 29.832C12.9235 29.6393 12.5667 29.3581 12.3089 28.9883C12.0537 28.6185 11.9156 28.168 11.8948 27.6367H13.3206C13.3414 27.9154 13.4274 28.1471 13.5784 28.332C13.7294 28.5169 13.9261 28.6549 14.1682 28.7461C14.413 28.8372 14.6865 28.8828 14.9886 28.8828C15.3037 28.8828 15.5797 28.8359 15.8167 28.7422C16.0563 28.6458 16.2438 28.513 16.3792 28.3437C16.5146 28.1719 16.5836 27.9714 16.5862 27.7422C16.5836 27.5339 16.5224 27.362 16.4026 27.2266C16.2828 27.0885 16.1149 26.974 15.8987 26.8828C15.6852 26.7891 15.4352 26.7057 15.1487 26.6328L14.2386 26.3984C13.5797 26.2292 13.0589 25.9727 12.6761 25.6289C12.2958 25.2826 12.1057 24.8229 12.1057 24.25C12.1057 23.7786 12.2333 23.3659 12.4886 23.0117C12.7464 22.6576 13.0966 22.3828 13.5393 22.1875C13.982 21.9896 14.4833 21.8906 15.0432 21.8906C15.611 21.8906 16.1083 21.9896 16.5354 22.1875C16.9651 22.3828 17.3024 22.6549 17.5471 23.0039C17.7919 23.3503 17.9182 23.7487 17.9261 24.1992H16.5315ZM20.6177 22L22.6998 28.2969H22.7818L24.8599 22H26.4537L23.6334 30H21.8443L19.0279 22H20.6177Z"
fill="white"
/>
</g>
</g>
<defs>
<filter
id="filter0_di_4112_120787"
x="2"
y="-4"
width="36"
height="47"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="1" />
<feGaussianBlur stdDeviation="1" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.894118 0 0 0 0 0.898039 0 0 0 0 0.905882 0 0 0 0.24 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_4112_120787"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_4112_120787"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="-4" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.813571 0 0 0 0 0.82 0 0 0 0 0.826429 0 0 0 0.32 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_4112_120787"
/>
</filter>
<filter
id="filter1_i_4112_120787"
x="0"
y="18"
width="30"
height="20"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="4" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_4112_120787"
/>
</filter>
<clipPath id="clip0_4112_120787">
<rect width="40" height="40" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export default CsvIcon;
src/assets/svgs/CycleCountIcon.jsx
+41
View File
@@ -0,0 +1,41 @@
import React from "react";
const CycleCountIcon = ({
className = "",
fill = "#18181B",
stroke = "white",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="13"
viewBox="0 0 18 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.7915 1.5C5.17222 1.5 6.2915 2.61929 6.2915 4C6.2915 5.38071 5.17222 6.5 3.7915 6.5C2.41079 6.5 1.2915 5.38071 1.2915 4C1.2915 2.61929 2.41079 1.5 3.7915 1.5Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="square"
/>
<path
d="M14.2082 1.5C15.5889 1.5 16.7082 2.61929 16.7082 4C16.7082 5.38071 15.5889 6.5 14.2082 6.5C12.8275 6.5 11.7082 5.38071 11.7082 4C11.7082 2.61929 12.8275 1.5 14.2082 1.5Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="square"
/>
<path
d="M11.4998 9.20833C11.4998 10.589 10.3805 11.7083 8.99984 11.7083C7.61913 11.7083 6.49984 10.589 6.49984 9.20833C6.49984 7.82762 7.61913 6.70833 8.99984 6.70833C10.3805 6.70833 11.4998 7.82762 11.4998 9.20833Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="square"
/>
</svg>
);
};
export default CycleCountIcon;
src/assets/svgs/DangerIcon.jsx
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
export const DangerIcon = ( { className } ) => {
return (
<svg className={ `${ className }` } width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M40 80C62.1333 80 80 62.1333 80 40C80 17.8667 62.1333 0 40 0C17.8667 0 0 17.8667 0 40C0 62.1333 17.8667 80 40 80ZM36.1932 46.9993V18.1818H43.9169V46.9993H36.1932ZM44.3697 54.4567C44.3697 55.6108 43.9879 56.5607 43.2244 57.3065C42.4432 58.0522 41.3867 58.4251 40.055 58.4251C38.7411 58.4251 37.6935 58.0522 36.9123 57.3065C36.131 56.5607 35.7404 55.6108 35.7404 54.4567C35.7404 53.2848 36.1399 52.326 36.9389 51.5803C37.7202 50.8345 38.7589 50.4616 40.055 50.4616C41.3512 50.4616 42.3988 50.8345 43.1978 51.5803C43.979 52.326 44.3697 53.2848 44.3697 54.4567Z" fill="#CF2A2A" />
</svg>
)
}
src/assets/svgs/DashIcon.jsx
+24
View File
@@ -0,0 +1,24 @@
import React from "react";
const DashIcon = ({
className = "",
stroke = "black",
fill = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="12"
height="2"
viewBox="0 0 12 2"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0.75 0.25H11.25V1.75H0.75V0.25Z" fill={fill} />
</svg>
);
};
export default DashIcon;
src/assets/svgs/DiagonalArrowIcon.jsx
+28
View File
@@ -0,0 +1,28 @@
import React from "react";
const DiagonalArrowIcon = ({
className = "",
stroke = "#A1A1A9",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 10V1H5M2.25 12.75L13 2"
stroke={stroke}
strokeWidth="2"
strokeLinecap="square"
/>
</svg>
);
};
export default DiagonalArrowIcon;
src/assets/svgs/DotIcon.jsx
+59
View File
@@ -0,0 +1,59 @@
import React from "react";
const DotIcon = ({
className = "",
stroke = "black",
fill = "#636363",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 1.5C3 2.32843 2.32843 3 1.5 3C0.671573 3 0 2.32843 0 1.5C0 0.671573 0.671573 0 1.5 0C2.32843 0 3 0.671573 3 1.5Z"
fill={fill}
/>
<path
d="M3 8.5C3 9.32843 2.32843 10 1.5 10C0.671573 10 0 9.32843 0 8.5C0 7.67157 0.671573 7 1.5 7C2.32843 7 3 7.67157 3 8.5Z"
fill={fill}
/>
<path
d="M3 15.5C3 16.3284 2.32843 17 1.5 17C0.671573 17 0 16.3284 0 15.5C0 14.6716 0.671573 14 1.5 14C2.32843 14 3 14.6716 3 15.5Z"
fill={fill}
/>
<path
d="M10 1.5C10 2.32843 9.32843 3 8.5 3C7.67157 3 7 2.32843 7 1.5C7 0.671573 7.67157 0 8.5 0C9.32843 0 10 0.671573 10 1.5Z"
fill={fill}
/>
<path
d="M10 8.5C10 9.32843 9.32843 10 8.5 10C7.67157 10 7 9.32843 7 8.5C7 7.67157 7.67157 7 8.5 7C9.32843 7 10 7.67157 10 8.5Z"
fill={fill}
/>
<path
d="M10 15.5C10 16.3284 9.32843 17 8.5 17C7.67157 17 7 16.3284 7 15.5C7 14.6716 7.67157 14 8.5 14C9.32843 14 10 14.6716 10 15.5Z"
fill={fill}
/>
<path
d="M17 1.5C17 2.32843 16.3284 3 15.5 3C14.6716 3 14 2.32843 14 1.5C14 0.671573 14.6716 0 15.5 0C16.3284 0 17 0.671573 17 1.5Z"
fill={fill}
/>
<path
d="M17 8.5C17 9.32843 16.3284 10 15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5Z"
fill={fill}
/>
<path
d="M17 15.5C17 16.3284 16.3284 17 15.5 17C14.6716 17 14 16.3284 14 15.5C14 14.6716 14.6716 14 15.5 14C16.3284 14 17 14.6716 17 15.5Z"
fill={fill}
/>
</svg>
);
};
export default DotIcon;
src/assets/svgs/DoubleChevronRightIcon.jsx
+26
View File
@@ -0,0 +1,26 @@
import React from "react";
const DoubleChevronRightIcon = ({
className = "",
fill = "#18181B",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.97517 5.00069L5.66468 0.690186L4.6826 1.67228L8.011 5.00069L4.6826 8.32909L5.66468 9.31118L9.97517 5.00069ZM6.05162 5.00069L1.74112 0.690186L0.759033 1.67228L4.08746 5.00069L0.759033 8.32909L1.74112 9.31118L6.05162 5.00069Z"
fill={fill}
/>
</svg>
);
};
export default DoubleChevronRightIcon;
src/assets/svgs/DownloadIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const DownloadIcon = ({
className = "",
stroke = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{/* <rect width="32" height="32" rx="8" fill="white" /> */}
<path
d="M22.875 18.2917V22.0417C22.875 22.5019 22.5019 22.875 22.0417 22.875H9.95833C9.4981 22.875 9.125 22.5019 9.125 22.0417V18.2917M16 18.5V9.125M16 18.5L13.0833 15.5833M16 18.5L18.9167 15.5833"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default DownloadIcon;
src/assets/svgs/DuplicateIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const DuplicateIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="18"
viewBox="0 0 18 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.2915 6.29175V1.70841C6.2915 1.4783 6.47805 1.29175 6.70817 1.29175H16.2915C16.5216 1.29175 16.7082 1.4783 16.7082 1.70841V11.2917C16.7082 11.5219 16.5216 11.7084 16.2915 11.7084H11.7082M11.2915 6.29175H1.70817C1.47805 6.29175 1.2915 6.4783 1.2915 6.70841V16.2917C1.2915 16.5219 1.47805 16.7084 1.70817 16.7084H11.2915C11.5216 16.7084 11.7082 16.5219 11.7082 16.2917V6.70841C11.7082 6.4783 11.5216 6.29175 11.2915 6.29175Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default DuplicateIcon;
src/assets/svgs/EditIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const EditIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="24"
height="24"
viewBox="0 0 24 24"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 3.99998H6.8C5.11984 3.99998 4.27976 3.99998 3.63803 4.32696C3.07354 4.61458 2.6146 5.07353 2.32698 5.63801C2 6.27975 2 7.11983 2 8.79998V17.2C2 18.8801 2 19.7202 2.32698 20.362C2.6146 20.9264 3.07354 21.3854 3.63803 21.673C4.27976 22 5.11984 22 6.8 22H15.2C16.8802 22 17.7202 22 18.362 21.673C18.9265 21.3854 19.3854 20.9264 19.673 20.362C20 19.7202 20 18.8801 20 17.2V13M7.99997 16H9.67452C10.1637 16 10.4083 16 10.6385 15.9447C10.8425 15.8957 11.0376 15.8149 11.2166 15.7053C11.4184 15.5816 11.5914 15.4086 11.9373 15.0627L21.5 5.49998C22.3284 4.67156 22.3284 3.32841 21.5 2.49998C20.6716 1.67156 19.3284 1.67155 18.5 2.49998L8.93723 12.0627C8.59133 12.4086 8.41838 12.5816 8.29469 12.7834C8.18504 12.9624 8.10423 13.1574 8.05523 13.3615C7.99997 13.5917 7.99997 13.8363 7.99997 14.3255V16Z"
stroke={stroke}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default EditIcon;
src/assets/svgs/EditIcon2.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const EditIcon2 = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="18"
viewBox="0 0 18 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.042 4.20853L12.5777 1.67279C12.9032 1.34735 13.4308 1.34735 13.7562 1.67279L16.3277 4.24428C16.6532 4.56971 16.6532 5.09735 16.3277 5.42279L13.792 7.95853M10.042 4.20853L1.53607 12.7145C1.37979 12.8707 1.29199 13.0827 1.29199 13.3037V16.7085H4.69681C4.91783 16.7085 5.12979 16.6207 5.28607 16.4645L13.792 7.95853M10.042 4.20853L13.792 7.95853"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default EditIcon2;
src/assets/svgs/ExCircleIcon.jsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
const ExCircleIcon = ({
className = "",
stroke = "#E6483D",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="18"
viewBox="0 0 18 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5 6.49984L6.50002 11.4998M11.5 11.4998L6.50002 6.49984M16.7084 8.99984C16.7084 13.257 13.2572 16.7082 9.00002 16.7082C4.74283 16.7082 1.29169 13.257 1.29169 8.99984C1.29169 4.74264 4.74283 1.2915 9.00002 1.2915C13.2572 1.2915 16.7084 4.74264 16.7084 8.99984Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
);
};
export default ExCircleIcon;
src/assets/svgs/HamburgerIcon.jsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
const HamburgerIcon = ({
className = "",
stroke = "white",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.75 12H21.25M2.75 5.75H21.25M2.75 18.25H21.25"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default HamburgerIcon;
src/assets/svgs/HoldIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const HoldIcon = ({
className = "",
fill = "#18181B",
stroke = "white",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.125 3.20833V1.95833C1.125 1.4981 1.4981 1.125 1.95833 1.125H3.20833M12.7917 1.125H14.0417C14.5019 1.125 14.875 1.4981 14.875 1.95833V3.20833M14.875 12.7917V14.0417C14.875 14.5019 14.5019 14.875 14.0417 14.875H12.7917M3.20833 14.875H1.95833C1.4981 14.875 1.125 14.5019 1.125 14.0417V12.7917M1.125 9.45833V6.54167M6.54167 1.125H9.45833M14.875 6.54167V9.45833M9.45833 14.875H6.54167"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default HoldIcon;
src/assets/svgs/ImportIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const ImportIcon = ({
className = "",
fill = "#18181B",
stroke = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.99999 1.125V10.5M7.99999 1.125L11.75 4.875M7.99999 1.125L4.25 4.875M14.875 8.625V14.0417C14.875 14.5019 14.5019 14.875 14.0417 14.875H1.95833C1.4981 14.875 1.125 14.5019 1.125 14.0417V8.625"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default ImportIcon;
src/assets/svgs/KebabIcon.jsx
+39
View File
@@ -0,0 +1,39 @@
import React from "react";
const KebabIcon = ({ className = "", stroke = "#8D8D8D", onClick = () => { } }) => {
return (
<svg
className={`${className}`}
onClick={onClick}
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path
d="M9 9.75C9.41421 9.75 9.75 9.41421 9.75 9C9.75 8.58579 9.41421 8.25 9 8.25C8.58579 8.25 8.25 8.58579 8.25 9C8.25 9.41421 8.58579 9.75 9 9.75Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 4.5C9.41421 4.5 9.75 4.16421 9.75 3.75C9.75 3.33579 9.41421 3 9 3C8.58579 3 8.25 3.33579 8.25 3.75C8.25 4.16421 8.58579 4.5 9 4.5Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 15C9.41421 15 9.75 14.6642 9.75 14.25C9.75 13.8358 9.41421 13.5 9 13.5C8.58579 13.5 8.25 13.8358 8.25 14.25C8.25 14.6642 8.58579 15 9 15Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default KebabIcon;
src/assets/svgs/MoveOutIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const MoveOutIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="17"
height="15"
viewBox="0 0 17 15"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.2915 4.45841V13.2084C1.2915 13.6687 1.6646 14.0417 2.12484 14.0417H15.0415M12.9582 1.54175L15.8748 4.45841M15.8748 4.45841L12.9582 7.37508M15.8748 4.45841H9.62484C7.32365 4.45841 5.45817 6.32389 5.45817 8.62508V9.45841"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default MoveOutIcon;
src/assets/svgs/NarrowUpArrowIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const NarrowUpArrowIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="14"
height="18"
viewBox="0 0 14 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 17V1M7 1L1 7M7 1L13 7"
stroke={stroke}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default NarrowUpArrowIcon;
src/assets/svgs/NoFillCircleCheckMarkIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const NoFillCircleCheckMarkIcon = ({
className = "",
stroke = "#2D9F75",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="18"
viewBox="0 0 18 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5003 6.9165L7.75033 11.4998L6.08366 9.83317M16.7087 8.99984C16.7087 13.257 13.2575 16.7082 9.00033 16.7082C4.74313 16.7082 1.29199 13.257 1.29199 8.99984C1.29199 4.74264 4.74313 1.2915 9.00033 1.2915C13.2575 1.2915 16.7087 4.74264 16.7087 8.99984Z"
stroke={stroke}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);
};
export default NoFillCircleCheckMarkIcon;
src/assets/svgs/NotesIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const NotesIcon = ({
className = "",
fill = "#18181B",
stroke = "black",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.25 17.25V13.25C12.25 12.6977 12.6977 12.25 13.25 12.25H17.25M5.75 5.75H12.25M5.75 9.75H8.25M17.25 12.5858V1.75C17.25 1.19772 16.8023 0.75 16.25 0.75H1.75C1.19772 0.75 0.75 1.19772 0.75 1.75V16.25C0.75 16.8023 1.19772 17.25 1.75 17.25H12.5858C12.851 17.25 13.1054 17.1446 13.2929 16.9571L16.9571 13.2929C17.1446 13.1054 17.25 12.851 17.25 12.5858Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default NotesIcon;
src/assets/svgs/PdfIcon.jsx
+153
View File
@@ -0,0 +1,153 @@
import React from "react";
const PdfIcon = ({
className = "",
fill = "white",
stroke = "#D4D4D8",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_4045_39235)">
<g filter="url(#filter0_di_4045_39235)">
<path
d="M30 40H10C6.68629 40 4 37.3137 4 34V6C4 2.68629 6.68629 0 10 0H20.5147C22.106 0 23.6321 0.632142 24.7574 1.75736L34.2426 11.2426C35.3679 12.3679 36 13.894 36 15.4853V34C36 37.3137 33.3137 40 30 40Z"
fill={fill}
/>
<path
d="M30 39.25H10C7.10051 39.25 4.75 36.8995 4.75 34V6C4.75 3.10051 7.10051 0.75 10 0.75H20.5147C21.9071 0.75 23.2425 1.30312 24.227 2.28769L33.7123 11.773C34.6969 12.7575 35.25 14.0929 35.25 15.4853V34C35.25 36.8995 32.8995 39.25 30 39.25Z"
stroke={stroke}
strokeWidth="1.5"
/>
</g>
<path
d="M23 1V9C23 11.2091 24.7909 13 27 13H35"
stroke={stroke}
strokeWidth="1.5"
/>
<g filter="url(#filter1_i_4045_39235)">
<mask id="path-4-inside-1_4045_39235" fill={fill}>
<path d="M0 22C0 19.7909 1.79086 18 4 18H24C26.2091 18 28 19.7909 28 22V30C28 32.2091 26.2091 34 24 34H4C1.79086 34 0 32.2091 0 30V22Z" />
</mask>
<path
d="M0 22C0 19.7909 1.79086 18 4 18H24C26.2091 18 28 19.7909 28 22V30C28 32.2091 26.2091 34 24 34H4C1.79086 34 0 32.2091 0 30V22Z"
fill="#DF1C41"
/>
<path
d="M-1 22C-1 19.2386 1.23858 17 4 17H24C26.7614 17 29 19.2386 29 22H27C27 20.3431 25.6569 19 24 19H4C2.34315 19 1 20.3431 1 22H-1ZM28 34H0H28ZM4 34C1.23858 34 -1 31.7614 -1 29V22C-1 19.2386 1.23858 17 4 17V19C2.34315 19 1 20.3431 1 22V30C1 32.2091 2.34315 34 4 34ZM24 17C26.7614 17 29 19.2386 29 22V29C29 31.7614 26.7614 34 24 34C25.6569 34 27 32.2091 27 30V22C27 20.3431 25.6569 19 24 19V17Z"
fill="black"
fillOpacity="0.08"
mask="url(#path-4-inside-1_4045_39235)"
/>
<path
d="M3.78906 30V22H6.78906C7.40365 22 7.91927 22.1146 8.33594 22.3437C8.75521 22.5729 9.07161 22.888 9.28516 23.2891C9.5013 23.6875 9.60938 24.1406 9.60938 24.6484C9.60938 25.1615 9.5013 25.6172 9.28516 26.0156C9.06901 26.4141 8.75 26.7279 8.32812 26.957C7.90625 27.1836 7.38672 27.2969 6.76953 27.2969H4.78125V26.1055H6.57422C6.93359 26.1055 7.22786 26.043 7.45703 25.918C7.6862 25.793 7.85547 25.6211 7.96484 25.4023C8.07682 25.1836 8.13281 24.9323 8.13281 24.6484C8.13281 24.3646 8.07682 24.1146 7.96484 23.8984C7.85547 23.6823 7.6849 23.5143 7.45313 23.3945C7.22396 23.2721 6.92839 23.2109 6.56641 23.2109H5.23828V30H3.78906ZM13.7991 30H11.0882V22H13.8538C14.6481 22 15.3304 22.1602 15.9007 22.4805C16.4736 22.7982 16.9137 23.2552 17.221 23.8516C17.5283 24.4479 17.6819 25.1615 17.6819 25.9922C17.6819 26.8255 17.527 27.5417 17.2171 28.1406C16.9098 28.7396 16.4658 29.1992 15.885 29.5195C15.3069 29.8398 14.6116 30 13.7991 30ZM12.5374 28.7461H13.7288C14.2861 28.7461 14.7509 28.6445 15.1233 28.4414C15.4957 28.2357 15.7757 27.9297 15.9632 27.5234C16.1507 27.1146 16.2444 26.6042 16.2444 25.9922C16.2444 25.3802 16.1507 24.8724 15.9632 24.4687C15.7757 24.0625 15.4983 23.7591 15.1311 23.5586C14.7665 23.3555 14.3134 23.2539 13.7718 23.2539H12.5374V28.7461ZM19.2789 30V22H24.4039V23.2148H20.7281V25.3867H24.0523V26.6016H20.7281V30H19.2789Z"
fill={fill}
/>
</g>
</g>
<defs>
<filter
id="filter0_di_4045_39235"
x="2"
y="-4"
width="36"
height="47"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="1" />
<feGaussianBlur stdDeviation="1" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.894118 0 0 0 0 0.898039 0 0 0 0 0.905882 0 0 0 0.24 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_4045_39235"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_4045_39235"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="-4" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.813571 0 0 0 0 0.82 0 0 0 0 0.826429 0 0 0 0.32 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_4045_39235"
/>
</filter>
<filter
id="filter1_i_4045_39235"
x="0"
y="18"
width="28"
height="20"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="4" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_4045_39235"
/>
</filter>
<clipPath id="clip0_4045_39235">
<rect width="40" height="40" fill={fill} />
</clipPath>
</defs>
</svg>
);
};
export default PdfIcon;
src/assets/svgs/PendingIcon.jsx
+37
View File
@@ -0,0 +1,37 @@
import React from "react";
const PendingIcon = ({
className = "",
fill = "#7B1113",
stroke = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
idth="14"
height="12"
viewBox="0 0 14 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.57983 0.126498C6.8504 0.0219615 7.1502 0.0219618 7.42076 0.126498L12.9043 2.24514C13.8992 2.62954 13.8992 4.03726 12.9043 4.42166L7.42076 6.5403C7.1502 6.64484 6.8504 6.64484 6.57983 6.5403L1.0963 4.42166C0.101365 4.03726 0.101363 2.62954 1.0963 2.24514L6.57983 0.126498Z"
fill={fill}
/>
<path
d="M12.9043 7.08831L7.42076 9.20694C7.1502 9.31148 6.8504 9.31148 6.57983 9.20694L1.0963 7.08831C0.50339 6.85923 0.263812 6.26674 0.377564 5.74398L6.91205 8.26867C6.93705 8.27832 6.96322 8.28377 6.98955 8.285C6.99555 8.28539 7.00158 8.28545 7.00759 8.28519C7.03562 8.28445 7.06355 8.27894 7.09015 8.26867L13.6232 5.74455C13.7366 6.26717 13.497 6.85931 12.9043 7.08831Z"
fill={fill}
/>
<path
d="M12.9043 9.75497L7.42076 11.8736C7.1502 11.9781 6.8504 11.9781 6.57983 11.8736L1.0963 9.75497C0.50339 9.52589 0.263812 8.93341 0.377564 8.41064L6.91205 10.9353C6.93705 10.945 6.96322 10.9504 6.98955 10.9517C6.99555 10.9521 7.00158 10.9521 7.00759 10.9519C7.03562 10.9511 7.06355 10.9456 7.09015 10.9353L13.6232 8.41122C13.7366 8.93384 13.497 9.52598 12.9043 9.75497Z"
fill={fill}
/>
</svg>
);
};
export default PendingIcon;
src/assets/svgs/PinDownIcon.jsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
const PinDownIcon = ({
className = "",
stroke = "black",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 12.7082H3.95834V10.4165L4.27211 10.1027C5.40515 8.9697 6.04168 7.43298 6.04168 5.83063V3.12484C6.04168 2.6646 6.41477 2.2915 6.87501 2.2915H13.125C13.5852 2.2915 13.9583 2.6646 13.9583 3.12484V5.83063C13.9583 7.43298 14.5949 8.9697 15.7279 10.1027L16.0417 10.4165V12.7082H10ZM10 12.7082V17.7082"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default PinDownIcon;
src/assets/svgs/PlusIcon.jsx
+27
View File
@@ -0,0 +1,27 @@
import React from "react";
const PlusIcon = ({
className = "",
stroke = "black",
fill = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="11"
height="12"
viewBox="0 0 11 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.58301 5.25V0.75H6.08301V5.25H10.583V6.75H6.08301V11.25H4.58301V6.75H0.0830078V5.25H4.58301Z"
fill={fill}
/>
</svg>
);
};
export default PlusIcon;
src/assets/svgs/PrintIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const PrintIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="18"
viewBox="0 0 18 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.70866 7.95817H4.62533M4.62533 10.4582V15.8748C4.62533 16.3351 4.99842 16.7082 5.45866 16.7082H12.542C13.0022 16.7082 13.3753 16.3351 13.3753 15.8748V10.4582M4.62533 10.4582H13.3753M4.62533 10.4582V13.3748H2.12533C1.66509 13.3748 1.29199 13.0017 1.29199 12.5415V5.45817C1.29199 4.99793 1.66509 4.62484 2.12533 4.62484H15.8753C16.3356 4.62484 16.7087 4.99793 16.7087 5.45817V12.5415C16.7087 13.0017 16.3356 13.3748 15.8753 13.3748H13.3753V10.4582M5.45866 1.2915H12.542C13.0022 1.2915 13.3753 1.6646 13.3753 2.12484V4.62484H4.62533V2.12484C4.62533 1.6646 4.99842 1.2915 5.45866 1.2915Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default PrintIcon;
src/assets/svgs/PurgeIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const PurgeIcon = ({
className = "",
fill = "#18181B",
stroke = "white",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="16"
height="18"
viewBox="0 0 16 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.5834 1.29166L14.7888 3.49703C14.9515 3.65975 14.9515 3.92357 14.7888 4.08628L12.5834 6.29166M3.41677 16.7083L1.21139 14.503C1.04868 14.3402 1.04868 14.0764 1.21139 13.9137L3.41677 11.7083M2.3751 14.2083H14.0418C14.502 14.2083 14.8751 13.8352 14.8751 13.375V10.0417M1.1251 7.54166V4.62499C1.1251 4.16475 1.4982 3.79166 1.95843 3.79166H13.6251"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default PurgeIcon;
src/assets/svgs/QaulityLogo.jsx
+39
View File
File diff suppressed because one or more lines are too long
src/assets/svgs/RotateIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const RotateIcon = ({
className = "",
stroke = "white",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="17"
height="16"
viewBox="0 0 17 16"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.5515 14.875V11.9583C14.5515 11.7282 14.365 11.5417 14.1349 11.5417H11.2182M2.45833 1.125L2.45833 4.04167C2.45833 4.27179 2.64488 4.45833 2.875 4.45833H5.79167M1.67819 7.14063C1.64308 7.42215 1.625 7.70896 1.625 8C1.625 11.797 4.70304 14.875 8.5 14.875C10.7305 14.875 12.7593 13.8128 14.0268 12.1667M15.3218 8.85938C15.3569 8.57785 15.375 8.29104 15.375 8C15.375 4.20304 12.297 1.125 8.5 1.125C6.26951 1.125 4.24073 2.18719 2.9732 3.83333"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default RotateIcon;
src/assets/svgs/SmallPinIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const SmallPinIcon = ({
className = "",
stroke = "#F2AE40",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="28" height="28" rx="8" fill="white" fill-opacity="0.1" />
<path
d="M11.5833 16.4167L14.5322 19.3655C14.8916 19.7249 15.5049 19.566 15.6446 19.0772L16.9254 14.5943C16.9732 14.427 17.0846 14.285 17.2357 14.1986L19.7422 12.7664C20.1238 12.5483 20.1936 12.027 19.8828 11.7161L16.2838 8.11717C15.973 7.80634 15.4517 7.87616 15.2336 8.25782L13.8013 10.7643C13.715 10.9154 13.573 11.0268 13.4056 11.0746L8.92274 12.3554C8.43397 12.495 8.27504 13.1084 8.63448 13.4678L11.5833 16.4167ZM11.5833 16.4167L11.5882 16.4118M11.5833 16.4167L8.49999 19.5"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default SmallPinIcon;
src/assets/svgs/SortIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const SortIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="16"
viewBox="0 0 18 16"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.70703 4.25L4.59842 1.35861C4.8425 1.11453 5.23823 1.11453 5.48231 1.35861L8.3737 4.25M9.6237 11.75L12.5151 14.6414C12.7592 14.8855 13.1549 14.8855 13.399 14.6414L16.2904 11.75M5.04036 2.16667L5.04036 14.875M12.957 1.125L12.957 14.0417"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default SortIcon;
src/assets/svgs/Spinner.jsx
+21
View File
@@ -0,0 +1,21 @@
import React, { useId } from "react";
import MoonLoader from "react-spinners/MoonLoader";
const override = {
borderColor: "red",
};
export const Spinner = ({ size = 20, color = "#ffffff" }) => {
const id = useId();
return (
<MoonLoader
color={color}
loading={true}
cssOverride={override}
size={size}
// aria-label="Loading Spinner"
data-testid={id}
/>
);
};
src/assets/svgs/SplitIcon.jsx
+45
View File
@@ -0,0 +1,45 @@
import React from "react";
const SplitIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="19"
height="16"
viewBox="0 0 19 16"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.99984 0.5C2.15889 0.5 0.666504 1.99238 0.666504 3.83333C0.666504 5.67428 2.15889 7.16667 3.99984 7.16667C5.00413 7.16667 5.90469 6.72253 6.51582 6.01995L9.32956 7.99999L6.51581 9.98004C5.90468 9.27747 5.00413 8.83333 3.99984 8.83333C2.15889 8.83333 0.666504 10.3257 0.666504 12.1667C0.666504 14.0076 2.15889 15.5 3.99984 15.5C5.84079 15.5 7.33317 14.0076 7.33317 12.1667C7.33317 11.6293 7.20604 11.1217 6.98021 10.6722L18.3315 2.68428L17.9237 2.555C17.5516 2.43706 17.1458 2.49969 16.8266 2.72431L10.0536 7.4905L6.98021 5.32776C7.20604 4.87827 7.33317 4.37065 7.33317 3.83333C7.33317 1.99238 5.84079 0.5 3.99984 0.5ZM1.49984 3.83333C1.49984 2.45262 2.61913 1.33333 3.99984 1.33333C5.38055 1.33333 6.49984 2.45262 6.49984 3.83333C6.49984 5.21405 5.38055 6.33333 3.99984 6.33333C2.61913 6.33333 1.49984 5.21405 1.49984 3.83333ZM1.49984 12.1667C1.49984 10.786 2.61913 9.66667 3.99984 9.66667C5.38055 9.66667 6.49984 10.786 6.49984 12.1667C6.49984 13.5474 5.38055 14.6667 3.99984 14.6667C2.61913 14.6667 1.49984 13.5474 1.49984 12.1667Z"
fill="black"
/>
<path
d="M16.8266 13.2757L10.7771 9.01862L11.5011 8.50913L18.3315 13.3157L17.9237 13.445C17.5516 13.5629 17.1458 13.5003 16.8266 13.2757Z"
fill="black"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.99984 0.5C2.15889 0.5 0.666504 1.99238 0.666504 3.83333C0.666504 5.67428 2.15889 7.16667 3.99984 7.16667C5.00413 7.16667 5.90469 6.72253 6.51582 6.01995L9.32956 7.99999L6.51581 9.98004C5.90468 9.27747 5.00413 8.83333 3.99984 8.83333C2.15889 8.83333 0.666504 10.3257 0.666504 12.1667C0.666504 14.0076 2.15889 15.5 3.99984 15.5C5.84079 15.5 7.33317 14.0076 7.33317 12.1667C7.33317 11.6293 7.20604 11.1217 6.98021 10.6722L18.3315 2.68428L17.9237 2.555C17.5516 2.43706 17.1458 2.49969 16.8266 2.72431L10.0536 7.4905L6.98021 5.32776C7.20604 4.87827 7.33317 4.37065 7.33317 3.83333C7.33317 1.99238 5.84079 0.5 3.99984 0.5ZM1.49984 3.83333C1.49984 2.45262 2.61913 1.33333 3.99984 1.33333C5.38055 1.33333 6.49984 2.45262 6.49984 3.83333C6.49984 5.21405 5.38055 6.33333 3.99984 6.33333C2.61913 6.33333 1.49984 5.21405 1.49984 3.83333ZM1.49984 12.1667C1.49984 10.786 2.61913 9.66667 3.99984 9.66667C5.38055 9.66667 6.49984 10.786 6.49984 12.1667C6.49984 13.5474 5.38055 14.6667 3.99984 14.6667C2.61913 14.6667 1.49984 13.5474 1.49984 12.1667Z"
stroke={stroke}
strokeLinecap="square"
/>
<path
d="M16.8266 13.2757L10.7771 9.01862L11.5011 8.50913L18.3315 13.3157L17.9237 13.445C17.5516 13.5629 17.1458 13.5003 16.8266 13.2757Z"
stroke={stroke}
strokeLinecap="square"
/>
</svg>
);
};
export default SplitIcon;
src/assets/svgs/SubmittedIcon.jsx
+47
View File
@@ -0,0 +1,47 @@
import React from "react";
const SubmittedIcon = ({
className = "",
fill = "#7B1113",
stroke = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.3335 0.333374C6.60964 0.333374 6.8335 0.557232 6.8335 0.833374V2.00004C6.8335 2.27618 6.60964 2.50004 6.3335 2.50004C6.05735 2.50004 5.8335 2.27618 5.8335 2.00004V0.833374C5.8335 0.557232 6.05735 0.333374 6.3335 0.333374Z"
fill={fill}
/>
<path
d="M10.6245 2.04175C10.8198 2.23701 10.8198 2.55359 10.6245 2.74885L9.75078 3.62263C9.55551 3.81789 9.23893 3.81789 9.04367 3.62263C8.84841 3.42736 8.84841 3.11078 9.04367 2.91552L9.91744 2.04175C10.1127 1.84648 10.4293 1.84648 10.6245 2.04175Z"
fill={fill}
/>
<path
d="M3.62325 9.7508C3.81851 9.55554 3.81851 9.23896 3.62325 9.0437C3.42799 8.84844 3.1114 8.84844 2.91614 9.0437L2.04237 9.91747C1.84711 10.1127 1.84711 10.4293 2.04237 10.6246C2.23763 10.8198 2.55421 10.8198 2.74947 10.6246L3.62325 9.7508Z"
fill={fill}
/>
<path
d="M2.50016 6.33337C2.50016 6.60952 2.27631 6.83337 2.00016 6.83337H0.833496C0.557354 6.83337 0.333496 6.60952 0.333496 6.33337C0.333496 6.05723 0.557354 5.83337 0.833496 5.83337H2.00016C2.27631 5.83337 2.50016 6.05723 2.50016 6.33337Z"
fill={fill}
/>
<path
d="M2.91607 3.62313C3.11133 3.81839 3.42791 3.81839 3.62317 3.62313C3.81843 3.42786 3.81843 3.11128 3.62317 2.91602L2.7494 2.04225C2.55414 1.84698 2.23755 1.84698 2.04229 2.04225C1.84703 2.23751 1.84703 2.55409 2.04229 2.74935L2.91607 3.62313Z"
fill={fill}
/>
<path
d="M6.36779 5.34167C5.83139 5.12712 5.2946 5.64987 5.49486 6.19176L8.07238 13.1662C8.26994 13.7008 9.00371 13.7571 9.28048 13.2589L10.7015 10.701L13.2702 9.27394C13.7612 9.00118 13.7155 8.28076 13.1941 8.07218L6.36779 5.34167Z"
fill={fill}
/>
</svg>
);
};
export default SubmittedIcon;
src/assets/svgs/TrashIcon.jsx
+24
View File
@@ -0,0 +1,24 @@
import React from "react";
const TrashIcon = ({ className = "", fill = "#A8A8A8", onClick = () => { } }) => {
return (
<svg
className={`${className}`}
onClick={onClick}
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.3199 4.16666C6.90053 2.7025 8.32902 1.66666 10.0007 1.66666C11.6725 1.66666 13.1009 2.7025 13.6816 4.16666H17.7083C18.0535 4.16666 18.3333 4.44649 18.3333 4.79166C18.3333 5.13684 18.0535 5.41666 17.7083 5.41666H16.6276L15.8823 16.9689C15.8328 17.7363 15.196 18.3333 14.427 18.3333H5.57293C4.80396 18.3333 4.16713 17.7363 4.11762 16.9689L3.37232 5.41666H2.29163C1.94645 5.41666 1.66663 5.13684 1.66663 4.79166C1.66663 4.44649 1.94645 4.16666 2.29163 4.16666H6.3199ZM7.71797 4.16666C8.19942 3.41479 9.04236 2.91666 10.0007 2.91666C10.9591 2.91666 11.8021 3.41479 12.2835 4.16666H7.71797ZM8.74996 8.95833C8.74996 8.61315 8.47014 8.33333 8.12496 8.33333C7.77978 8.33333 7.49996 8.61315 7.49996 8.95833V13.5417C7.49996 13.8868 7.77978 14.1667 8.12496 14.1667C8.47014 14.1667 8.74996 13.8868 8.74996 13.5417V8.95833ZM11.875 8.33333C12.2201 8.33333 12.5 8.61315 12.5 8.95833V13.5417C12.5 13.8868 12.2201 14.1667 11.875 14.1667C11.5298 14.1667 11.25 13.8868 11.25 13.5417V8.95833C11.25 8.61315 11.5298 8.33333 11.875 8.33333Z"
fill={fill}
/>
</svg>
);
};
export default TrashIcon;
src/assets/svgs/UpdateIcon.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const UpdateIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="16"
height="18"
viewBox="0 0 16 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.5834 1.29163L14.7888 3.497C14.9515 3.65972 14.9515 3.92354 14.7888 4.08625L12.5834 6.29163M3.41677 16.7083L1.21139 14.5029C1.04868 14.3402 1.04868 14.0764 1.21139 13.9137L3.41677 11.7083M2.3751 14.2083H14.0418C14.502 14.2083 14.8751 13.8352 14.8751 13.375V10.0416M1.1251 7.54163V4.62496C1.1251 4.16472 1.4982 3.79163 1.95843 3.79163H13.6251"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default UpdateIcon;
src/assets/svgs/VoidIcon.jsx
+31
View File
@@ -0,0 +1,31 @@
import React from "react";
const VoidIcon = ({
className = "",
stroke = "#717179",
fill = "none",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="18"
viewBox="0 0 18 18"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.7082 9.00008C16.7082 13.2573 13.257 16.7084 8.99984 16.7084C4.74264 16.7084 1.2915 13.2573 1.2915 9.00008C1.2915 4.74289 4.74264 1.29175 8.99984 1.29175C13.257 1.29175 16.7082 4.74289 16.7082 9.00008Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
strokeDasharray="3 4"
/>
</svg>
);
};
export default VoidIcon;
src/assets/svgs/VoidedIcon.jsx
+31
View File
@@ -0,0 +1,31 @@
import React from "react";
const VoidedIcon = ({
className = "",
fill = "#A1A1A9",
stroke = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.6546 10.5335C13.296 9.50909 13.6668 8.29793 13.6668 7.00016C13.6668 3.31826 10.6821 0.333496 7.00018 0.333496C5.70241 0.333496 4.49125 0.704314 3.46688 1.34577L12.6546 10.5335Z"
fill={fill}
/>
<path
d="M1.94569 2.65279L0.979943 1.68705C0.784681 1.49179 0.784681 1.1752 0.979943 0.979943C1.1752 0.784681 1.49179 0.784681 1.68705 0.979943L2.98503 2.27793C2.98779 2.28056 2.99052 2.28323 2.99322 2.28593L11.7142 11.0069C11.7169 11.0096 11.7196 11.0124 11.7222 11.0151L13.0204 12.3133C13.2156 12.5085 13.2156 12.8251 13.0204 13.0204C12.8251 13.2156 12.5085 13.2156 12.3133 13.0204L11.3473 12.0545C10.1805 13.0589 8.6609 13.6666 7.00016 13.6666C3.31826 13.6666 0.333496 10.6819 0.333496 6.99998C0.333496 5.33924 0.941287 3.81968 1.94569 2.65279Z"
fill={fill}
/>
</svg>
);
};
export default VoidedIcon;
src/assets/svgs/WarningIcon.jsx
+28
View File
@@ -0,0 +1,28 @@
import React from "react";
const WarningIcon = ({
className = "",
stroke = "black",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="18"
height="16"
viewBox="0 0 18 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.00053 7.12508V10.0417M9.00053 12.1251V12.1167M8.28147 1.68609L1.19365 13.7872C0.868261 14.3428 1.2689 15.0417 1.91272 15.0417H16.0884C16.7322 15.0417 17.1328 14.3428 16.8074 13.7872L9.71961 1.68609C9.39772 1.13654 8.60335 1.13654 8.28147 1.68609ZM9.20887 12.1251C9.20887 12.2401 9.11559 12.3334 9.00053 12.3334C8.88548 12.3334 8.7922 12.2401 8.7922 12.1251C8.7922 12.01 8.88548 11.9167 9.00053 11.9167C9.11559 11.9167 9.20887 12.01 9.20887 12.1251Z"
stroke={stroke}
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
);
};
export default WarningIcon;
src/assets/svgs/XCloseIcon.jsx
+28
View File
@@ -0,0 +1,28 @@
import React from "react";
const XCloseIcon = ({
className = "",
stroke = "#717179",
onClick = () => {},
}) => {
return (
<svg
className={`${className}`}
onClick={onClick}
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.1665 1.16699L12.8332 12.8337M12.8332 1.16699L1.1665 12.8337"
stroke={stroke}
strokewidth="2"
strokelinecap="round"
/>
</svg>
);
};
export default XCloseIcon;
src/assets/svgs/index.js
+57
View File
@@ -0,0 +1,57 @@
export { CloseIcon } from "./CloseIcon";
export { DangerIcon } from "./DangerIcon";
export { Spinner } from "./Spinner";
export { CaretLeft } from "./CaretLeft";
export { default as AvatarIcon } from "./AvatarIcon";
export { default as ChevronUpIcon } from "./ChevronUpIcon";
export { default as EditIcon } from "./EditIcon";
export { default as QaulityLogo } from "./QaulityLogo";
export { default as ChevronDownIcon } from "./ChevronDownIcon";
export { default as SmallPinIcon } from "./SmallPinIcon";
export { default as BigPinIcon } from "./BigPinIcon";
export { default as PinDownIcon } from "./PinDownIcon";
export { default as HamburgerIcon } from "./HamburgerIcon";
export { default as DoubleChevronRightIcon } from "./DoubleChevronRightIcon";
export { default as ChevronRightIcon } from "./ChevronRightIcon";
export { default as ExCircleIcon } from "./ExCircleIcon";
export { default as DiagonalArrowIcon } from "./DiagonalArrowIcon";
export { default as PurgeIcon } from "./PurgeIcon";
export { default as HoldIcon } from "./HoldIcon";
export { default as CycleCountIcon } from "./CycleCountIcon";
export { default as ImportIcon } from "./ImportIcon";
export { default as NotesIcon } from "./NotesIcon";
export { default as CircleCloseIcon } from "./CircleCloseIcon";
export { default as KebabIcon } from "./KebabIcon";
export { default as TrashIcon } from "./TrashIcon";
export { default as ControlIcon } from "./ControlIcon";
export { default as CloudUploadIcon } from "./CloudUploadIcon";
export { default as PdfIcon } from "./PdfIcon";
export { default as WarningIcon } from "./WarningIcon";
export { default as ChecklistIcon } from "./ChecklistIcon";
export { default as AddressbookIcon } from "./AddressbookIcon";
export { default as DownloadIcon } from "./DownloadIcon";
export { default as CsvIcon } from "./CsvIcon";
export { default as CircleCheckMarkIcon } from "./CircleCheckMarkIcon";
export { default as DashIcon } from "./DashIcon";
export { default as PlusIcon } from "./PlusIcon";
export { default as EditIcon2 } from "./EditIcon2";
export { default as NoFillCircleCheckMarkIcon } from "./NoFillCircleCheckMarkIcon";
export { default as PrintIcon } from "./PrintIcon";
export { default as CircleDollarIcon } from "./CircleDollarIcon";
export { default as UpdateIcon } from "./UpdateIcon";
export { default as NarrowUpArrowIcon } from "./NarrowUpArrowIcon";
export { default as RotateIcon } from "./RotateIcon";
export { default as DuplicateIcon } from "./DuplicateIcon";
export { default as VoidIcon } from "./VoidIcon";
export { default as SplitIcon } from "./SplitIcon";
export { default as MoveOutIcon } from "./MoveOutIcon";
export { default as SubmittedIcon } from "./SubmittedIcon";
export { default as VoidedIcon } from "./VoidedIcon";
export { default as PendingIcon } from "./PendingIcon";
export { default as CombineIcon } from "./CombineIcon";
export { default as CheckIcon } from "./CheckIcon";
export { default as AwaitIcon } from "./AwaitIcon";
export { default as XCloseIcon } from "./XCloseIcon";
export { default as ColumnIcon } from "./ColumnIcon";
export { default as SortIcon } from "./SortIcon";
export { default as DotIcon } from "./DotIcon";
src/components/AddButton/AddButton.jsx
+60
View File
@@ -0,0 +1,60 @@
import React, { useId, useState } from "react";
import classes from "./AddButton.module.css";
import MoonLoader from "react-spinners/MoonLoader";
const AddButton = ({
onClick,
children = "Add New",
showPlus = true,
className,
showChildren = true,
loaderclasses,
color = "#ffffff",
loading = false,
disabled = false,
icon = null,
title,
}) => {
const override = {
borderColor: "#ffffff",
};
const id = useId();
const [animate, setAnimate] = useState(false);
const onClickHandle = () => {
if (onClick) {
onClick();
}
setAnimate(true);
};
// const classes = ` after:bg-[#90EE90] after:block after:absolute after:pt-[300%] after:pl-[350%] after:!ml-[-1.25rem] after:mt-[-120%] after:opacity-0 after:transition-all active:after:p-0 active:after:m-0 active:after:opacity-100 `;
return (
<button
title={title}
disabled={disabled}
type="button"
onAnimationEnd={() => setAnimate(false)}
onClick={onClickHandle}
className={`${animate && "animate-wiggle"} ${
classes.button
} relative flex h-[3rem] cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-[.625rem] border border-primary bg-primary px-[.625rem] py-2 font-inter text-sm font-medium leading-loose tracking-wide text-white ${className}`}
>
<>
<MoonLoader
color={color}
loading={loading}
cssOverride={override}
size={14}
className={loaderclasses}
// aria-label="Loading Spinner"
data-testid={id}
/>
{!loading && icon ? icon : null}
{/* {showPlus ? "+" : null} */}
{showChildren ? children : null}
</>
</button>
);
};
export default AddButton;
src/components/AddButton/AddButton.module.css
+32
View File
@@ -0,0 +1,32 @@
.button {
position: relative;
/* border: none; */
color: #ffffff;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
/* background-color: #7B1113; */
}
.button:after {
content: "";
background-color: #7b1113;
/* background: #4f46e5; */
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
src/components/AddButton/index.js
+1
View File
@@ -0,0 +1 @@
export { default as AddButton } from "./AddButton";
src/components/DropdownOptions/DropdownOption/DropdownOption.jsx
+24
View File
@@ -0,0 +1,24 @@
import React from "react";
const DropdownOption = ({
icon,
onClick = () => {},
name,
style = {},
className = "",
}) => {
return (
<div
style={{ ...style }}
className={`flex h-[2.25rem] max-h-[2.25rem] min-h-[2.25rem] w-full cursor-pointer items-center gap-3 px-2 capitalize text-[#262626] hover:bg-[#F4F4F4] hover:text-[#262626] ${className}`}
onClick={(e) => {
onClick(e);
}}
>
{icon && <span className=""> {icon}</span>}
{name && <span className="grow"> {name}</span>}
</div>
);
};
export default DropdownOption;
src/components/DropdownOptions/DropdownOption/index.js
+3
View File
@@ -0,0 +1,3 @@
import { lazy } from "react";
export const DropdownOption = lazy(() => import("./DropdownOption"));
src/components/DropdownOptions/DropdownOptions.jsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
import { KebabIcon } from "Assets/svgs";
const DropdownOptions = ({
icon,
children,
childrenWrapperClass = "",
iconWrapperClass = "",
className = "",
style = {},
}) => {
return (
<div
style={{ ...style }}
className={`relative flex items-center justify-center ${className}`}
>
<button className={`peer relative ${iconWrapperClass}`}>
{icon ? icon : <KebabIcon />}
</button>
<div
className={`absolute right-0 top-[85%] z-[9999999999] m-auto hidden whitespace-nowrap rounded-lg border border-[#a8a8a8] bg-white text-sm text-[#525252] shadow-md hover:block focus:block peer-focus:block peer-focus-visible:block ${childrenWrapperClass} `}
>
{children}
</div>
</div>
);
};
export default DropdownOptions;
src/components/DropdownOptions/index.js
+4
View File
@@ -0,0 +1,4 @@
import { lazy } from "react";
export const DropdownOptions = lazy(() => import("./DropdownOptions"));
export { DropdownOption } from "./DropdownOption";
src/components/MkdInput/MkdInput.css
+145
View File
@@ -0,0 +1,145 @@
.toggleClass.react-toggle--checked .react-toggle-track {
background-color: #7b1113;
}
.react-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: #ffffff;
-webkit-tap-highlight-color: transparent;
}
.react-toggle-screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.react-toggle--disabled {
cursor: not-allowed;
opacity: 0.5;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.react-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: #d4d4d8;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
/* background-color: #000000; */
}
.react-toggle--checked .react-toggle-track {
background-color: #7b1113;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #7b1113;
}
.react-toggle-track-check {
position: absolute;
width: 14px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
left: 8px;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
position: absolute;
width: 10px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
right: 10px;
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border: 1px solid #4d4d4d;
border-radius: 50%;
background-color: #fafafa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.react-toggle--checked .react-toggle-thumb {
left: 27px;
border-color: #7b1113;
}
.react-toggle--focus .react-toggle-thumb {
-webkit-box-shadow: 0px 0px 3px 2px #7b1113;
-moz-box-shadow: 0px 0px 3px 2px #7b1113;
box-shadow: 0px 0px 2px 3px #7b1113;
}
.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-webkit-box-shadow: 0px 0px 5px 5px #7b1113;
-moz-box-shadow: 0px 0px 5px 5px #7b1113;
box-shadow: 0px 0px 5px 5px #7b1113;
}
src/components/MkdInput/MkdInput.jsx
+209
View File
@@ -0,0 +1,209 @@
import React, { useId } from "react";
import { StringCaser } from "Utils/utils";
import Toggle from "react-toggle";
import "./MkdInput.css";
import { SkeletonLoader } from "Components/Skeleton";
const MkdInput = ({
type = "text",
page,
cols = "30",
rows = "50",
name,
label,
errors = null,
register = () => ({}),
className,
placeholder,
options = [],
mapping = null,
disabled = false,
value = null,
onChange,
loading = false,
required = false,
}) => {
const uniqueId = useId();
return (
<>
<div
className={`relative grow ${
page === "list" ? "w-full pl-2 pr-2 md:w-1/2" : ""
}`}
>
{["radio", "checkbox", "color", "toggle"].includes(type) ? null : (
<>
{label && (
<label
className="mb-2 block cursor-pointer text-sm "
htmlFor={uniqueId}
>
{label}
{required && (
<sup className="text-[.825rem] text-red-600">*</sup>
)}
{/* {StringCaser(label, { casetype: "capitalize", separator: "space" })} */}
</label>
)}
</>
)}
{loading ? (
<SkeletonLoader
count={1}
counts={[2]}
className={`!h-[3rem] !gap-0 rounded-[.625rem] !bg-[#ebebeb] !p-0 `}
/>
) : type === "textarea" ? (
<>
<textarea
className={`focus:shadow-outline w-full appearance-none rounded border border-soft-200 px-3 py-2 font-inter leading-tight text-black shadow focus:outline-none ${className} ${
errors && errors[name] && errors[name]?.message
? "border-red-500"
: ""
}`}
disabled={disabled}
id={uniqueId}
cols={cols}
name={name}
placeholder={placeholder}
rows={rows}
{...register(name)}
></textarea>
</>
) : ["radio", "checkbox", "color", "toggle"].includes(type) ? (
<div className="flex h-[1.875rem] items-center gap-2 pb-1 pt-3">
{["toggle"].includes(type) ? (
<Toggle
className={`toggle_class ${className}`}
// defaultChecked={}
// checked={selectRoles}
icons={false}
{...(onChange ? { onChange: onChange } : null)}
{...(value ? { checked: value } : null)}
// placeholder={placeholder}
// {...register(name)}
/>
) : (
// <input
// disabled={disabled}
// type={type}
// id={name}
// name={name}
// {...(value ? { value: value } : null)}
// placeholder={placeholder}
// {...register(name)}
// className={`focus:shadow-outline !h-4 !w-4 cursor-pointer appearance-none rounded border border-soft-200 font-inter leading-tight text-primary shadow focus:outline-none focus:ring-0 ${className} ${
// errors && errors[name] && errors[name]?.message
// ? "border-red-500"
// : ""
// } ${
// type === "color" ? "min-h-[3.125rem] min-w-[6.25rem]" : ""
// }`}
// />
<input
disabled={disabled}
type={type}
id={uniqueId}
name={name}
{...(value ? { value: value } : null)}
// {...(value ? { checked: value } : null)}
placeholder={placeholder}
{...register(name)}
className={`focus:shadow-outline !h-4 !w-4 cursor-pointer appearance-none rounded border border-soft-200 font-inter leading-tight text-primary shadow focus:outline-none focus:ring-0 ${className} ${
errors && errors[name] && errors[name]?.message
? "border-red-500"
: ""
} ${
type === "color" ? "min-h-[3.125rem] min-w-[6.25rem]" : ""
}`}
/>
)}
<label
className="mb-2 block h-full cursor-pointer font-inter text-sm font-[500] capitalize text-black"
htmlFor={uniqueId}
>
{label}
{/* {StringCaser(label, {
casetype: "capitalize",
separator: "space",
})} */}
</label>
</div>
) : type === "dropdown" || type === "select" ? (
<select
type={type}
id={uniqueId}
disabled={disabled}
placeholder={placeholder}
{...register(name)}
className={`focus:shadow-outline h-[3rem] w-full appearance-none rounded-[.625rem] border border-soft-200 p-[.625rem] px-3 py-2 font-inter leading-tight text-black shadow focus:outline-none focus:ring-0 ${className} ${
errors && errors[name] && errors[name]?.message
? "border-red-500"
: ""
}`}
>
<option></option>
{options.map((option, key) => (
<option value={option} key={key + 1}>
{option}
</option>
))}
</select>
) : type === "mapping" ? (
<>
{mapping ? (
<select
type={"number"}
id={uniqueId}
disabled={disabled}
{...(value ? { value: value } : null)}
placeholder={placeholder}
{...register(name)}
className={`focus:shadow-outline h-[3rem] w-full appearance-none rounded-[.625rem] border border-soft-200 p-[.625rem] px-3 py-2 font-inter leading-tight text-black shadow focus:outline-none focus:ring-0 ${className} ${
errors && errors[name] && errors[name]?.message
? "border-red-500"
: ""
}`}
>
<option></option>
{options.map((option, key) => (
<option value={option} key={key + 1}>
{mapping[option]}
</option>
))}
</select>
) : (
`Please Pass the mapping e.g {key:value}`
)}
</>
) : (
<input
type={type}
id={uniqueId}
disabled={disabled}
placeholder={placeholder}
{...register(name)}
{...(type === "number" ? { step: "0.01" } : null)}
min={type === "number" ? "0.00" : undefined} //
className={`focus:shadow-outline h-[3rem] w-full appearance-none rounded-[.625rem] border border-soft-200 p-[.625rem] px-3 py-2 font-inter leading-tight text-black shadow focus:outline-none focus:ring-0 ${className} ${
errors && errors[name] && errors[name]?.message
? "border-red-500"
: ""
}`}
/>
)}
{errors && errors[name] && (
<p className="text-field-error absolute inset-x-0 top-full m-auto mt-2 text-[.8rem] italic text-red-500">
{StringCaser(errors[name]?.message, {
casetype: "capitalize",
separator: " ",
})}
</p>
)}
</div>
</>
);
};
export default MkdInput;
src/components/MkdInput/MkdInput.module.css
+145
View File
@@ -0,0 +1,145 @@
.toggleClass.react-toggle--checked .react-toggle-track {
background-color: #7b1113;
}
.react-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.react-toggle-screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.react-toggle--disabled {
cursor: not-allowed;
opacity: 0.5;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.react-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: #4d4d4d;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #000000;
}
.react-toggle--checked .react-toggle-track {
background-color: #19ab27;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #128d15;
}
.react-toggle-track-check {
position: absolute;
width: 14px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
left: 8px;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
position: absolute;
width: 10px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
right: 10px;
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border: 1px solid #4d4d4d;
border-radius: 50%;
background-color: #fafafa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.react-toggle--checked .react-toggle-thumb {
left: 27px;
border-color: #19ab27;
}
.react-toggle--focus .react-toggle-thumb {
-webkit-box-shadow: 0px 0px 3px 2px #0099e0;
-moz-box-shadow: 0px 0px 3px 2px #0099e0;
box-shadow: 0px 0px 2px 3px #0099e0;
}
.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-webkit-box-shadow: 0px 0px 5px 5px #0099e0;
-moz-box-shadow: 0px 0px 5px 5px #0099e0;
box-shadow: 0px 0px 5px 5px #0099e0;
}
src/components/MkdInput/index.js
+3
View File
@@ -0,0 +1,3 @@
export { default as MkdInput } from "./MkdInput";
src/components/MkdListTable/MkdListTable.css
+42
View File
@@ -0,0 +1,42 @@
table thead {
border-top-left-radius: 0.625rem !important;
border-top-right-radius: 0.625rem !important;
}
table thead tr {
border-top-left-radius: 0.625rem !important;
border-top-right-radius: 0.625rem !important;
background-color: #f4f4f5;
}
tbody tr:last-child {
border-bottom: none;
}
table thead tr:first-child th:first-child {
border-left: 0.0313rem solid #e5e7eb;
border-top: 0.0313rem solid #e5e7eb;
border-top-left-radius: 0.625rem !important;
}
table thead tr:first-child th:last-child {
border-right: 0.0313rem solid #e5e7eb;
border-top: 0.0313rem solid #e5e7eb;
border-top-right-radius: 0.625rem !important;
}
table thead tr:first-child th {
border-top: 0.0313rem solid #e5e7eb;
}
table tbody tr:last-child td:first-child {
border-bottom-left-radius: 0.625rem !important;
}
table tbody tr:last-child td:last-child {
border-bottom-right-radius: 0.625rem !important;
}
table tbody tr td:first-child {
border-left: 0.0313rem solid #e5e7eb;
}
table tbody tr td {
border-right: 0.0313rem solid #e5e7eb;
}
.no-data-found {
filter: grayscale(10);
}
src/components/MkdListTable/MkdListTable.jsx
+339
View File
@@ -0,0 +1,339 @@
import React, { Fragment } from "react";
import { useNavigate } from "react-router-dom";
import { DotIcon, KebabIcon, NarrowUpArrowIcon, Spinner } from "Assets/svgs";
import { SkeletonLoader } from "Components/Skeleton";
import { NoDataFoundImg } from "Assets/images";
import MkdListTableSelectRow from "./MkdListTableSelectRow";
import MkdListTableRightActionPanel from "./MkdListTableRightActionPanel";
import MkdListTableRow from "./MkdListTableRow";
const MkdListTable = ({
table,
tableTitle,
onSort,
loading,
columns = [],
actions,
actionPostion = [],
tableRole,
deleteItem,
deleteLoading,
actionId = "id",
showDeleteModal,
currentTableData = [],
setShowDeleteModal,
handleTableCellChange,
setSelectedItems,
allowEditing,
useImage = true,
columnData = null,
setColumns = null,
setColumnData = null,
allowSortColumns = true,
onPopoverStateChange = null,
popoverShown = false,
}) => {
const [deleteId, setIdToDelete] = React.useState(null);
const [isOneOrMoreRowSelected, setIsOneOrMoreRowSelected] =
React.useState(false);
const [areAllRowsSelected, setAreAllRowsSelected] = React.useState(false);
const [selectedIds, setSelectedIds] = React.useState([]);
const [dragging, setDragging] = React.useState(false);
const [fromKey, setFromKey] = React.useState(null);
const [toKey, setToKey] = React.useState(null);
function handleSelectRow(id) {
setIsOneOrMoreRowSelected(true);
const tempIds = selectedIds;
if (actions?.select?.multiple) {
if (tempIds.includes(id)) {
const newIds = tempIds.filter((selectedId) => selectedId !== id);
setSelectedIds(() => [...newIds]);
setSelectedItems(newIds);
} else {
const newIds = [...tempIds, id];
setSelectedIds(() => [...newIds]);
setSelectedItems(newIds);
}
} else {
if (tempIds.includes(id)) {
const newIds = tempIds.filter((selectedId) => selectedId !== id);
setSelectedIds(() => [...newIds]);
setSelectedItems(newIds);
} else {
const newIds = [id];
setSelectedIds(() => [...newIds]);
setSelectedItems(newIds);
}
}
console.log(id);
}
const handleSelectAll = () => {
setAreAllRowsSelected((prevSelectAll) => !prevSelectAll);
if (!areAllRowsSelected) {
const allIds = currentTableData.map((item) => item[actionId]);
setSelectedIds(allIds);
setSelectedItems(allIds);
} else {
setSelectedIds([]);
setSelectedItems([]);
}
};
const handleDeleteAll = async (id) => {
setShowDeleteModal(true);
setIdToDelete(id);
};
const navigate = useNavigate();
const setDeleteId = async (id) => {
console.log("id >>", id);
setShowDeleteModal(true);
setIdToDelete(id);
};
const onDragStart = (e, key) => {
if (!allowSortColumns) return;
// e.preventDefault();
// console.log("onDragStart");
setFromKey(key);
setDragging(true);
};
const onDrop = (e) => {
if (!allowSortColumns) return;
e.preventDefault();
if (fromKey && toKey && fromKey != toKey) {
const tempColumns = [...columns];
const fromColumn = tempColumns[fromKey];
const toColumn = tempColumns[toKey];
tempColumns.splice(fromKey, 1);
tempColumns.splice(toKey, 0, fromColumn);
if (setColumns) {
setColumns(() => tempColumns);
}
}
setToKey(null);
setFromKey(null);
setDragging(false);
};
const onDragOver = (e, key) => {
if (!allowSortColumns) return;
e.preventDefault();
setToKey(key);
// if (fromKey != key) {
// }
};
const onDragEnter = (e) => {
if (!allowSortColumns) return;
e.preventDefault();
};
const onDragEnd = (e) => {
if (!allowSortColumns) return;
e.preventDefault();
setToKey(null);
setFromKey(null);
// console.log("onDragEnd");
setDragging(false);
};
const onDragLeave = (e) => {
if (!allowSortColumns) return;
e.preventDefault();
setToKey(null);
// setFromKey(null);
};
React.useEffect(() => {
if (selectedIds.length <= 0) {
setIsOneOrMoreRowSelected(false);
setAreAllRowsSelected(false);
}
if (selectedIds.length === currentTableData?.length) {
setAreAllRowsSelected(true);
setIsOneOrMoreRowSelected(true);
}
if (
selectedIds.length < currentTableData?.length &&
selectedIds.length > 0
) {
setAreAllRowsSelected(false);
}
}, [selectedIds, currentTableData]);
// console.log("currentTableData");
// console.log(currentTableData);
// console.log(columns)
return (
<>
<div
className={`${
loading || !currentTableData?.length
? "grid-cols-1"
: "grid-cols-[auto_1fr_auto]"
} relative grid !max-h-fit !min-h-fit !w-full justify-center !rounded-[.625rem] border border-soft-200 bg-white`}
>
<MkdListTableSelectRow
actions={actions}
loading={loading}
columns={columns}
currentTableData={currentTableData}
handleSelectAll={handleSelectAll}
areAllRowsSelected={areAllRowsSelected}
handleSelectRow={handleSelectRow}
selectedIds={selectedIds}
actionId={actionId}
/>
{/* BR */}
<div
className={`${
loading ? "" : ""
} relative flex max-h-fit !min-h-fit w-full justify-start overflow-y-clip bg-white ${
!popoverShown ? "overflow-x-auto" : ""
} `}
>
{(loading && useImage) ||
(loading && !columns?.length) ||
(loading && !currentTableData?.length) ? (
<div
className={`max-h-fit min-h-fit w-full min-w-full max-w-full items-center justify-center`}
>
<SkeletonLoader />
</div>
) : columns?.length && currentTableData?.length ? (
<>
{columns?.map((cell, cellIndex) => {
if (
!["row", ""].includes(cell?.accessor) &&
cell?.selected_column
) {
return (
<div key={cellIndex} className="h-full grow">
<div
draggable={allowSortColumns}
onDragStart={(e) => onDragStart(e, cellIndex)}
onDragEnd={onDragEnd}
onDragOver={(e) => onDragOver(e, cellIndex)}
onDragLeave={(e) => onDragLeave(e)}
onDrop={(e) => onDrop(e)}
className={`flex !h-[2.65rem] !max-h-[2.65rem] !min-h-[2.65rem] w-full !min-w-full max-w-fit items-center justify-start gap-2 px-[.75rem] py-[.5rem] ${
allowSortColumns && dragging
? "cursor-grabbing"
: cell?.isSorted
? "cursor-pointer"
: ""
} ${
toKey == cellIndex
? "bg-primary-light"
: "bg-weak-100"
} `}
>
<div
className="flex grow items-center justify-between gap-5"
onClick={
cell?.isSorted ? () => onSort(cellIndex) : undefined
}
>
<div className="w-auto grow whitespace-nowrap capitalize">
{cell.header}
</div>
<span className="w-fit">
{cell.isSorted ? (
<NarrowUpArrowIcon
className={`h-2 w-2 ${
cell.isSortedDesc ? "rotate-180" : ""
}`}
/>
) : (
""
)}
</span>
</div>
{allowSortColumns ? (
<DotIcon className="h-2 w-2 cursor-grab" />
) : null}
</div>
{currentTableData?.map((row, rowIndex) => {
return (
<MkdListTableRow
key={rowIndex}
columnIndex={cellIndex}
row={row}
columns={columns}
column={cell}
currentTableData={currentTableData}
actions={actions}
allowEditing={allowEditing}
handleSelectRow={handleSelectRow}
handleTableCellChange={handleTableCellChange}
actionPostion={actionPostion}
onPopoverStateChange={onPopoverStateChange}
selectedIds={selectedIds}
actionId={actionId}
tableRole={tableRole}
className={`!h-[3rem] !max-h-[3rem] !min-h-[3rem] w-full min-w-full max-w-fit whitespace-nowrap !border-b border-soft-200 bg-white px-[.75rem] py-[.5rem] ${
cellIndex === 0 ? "border-l border-r" : "border-r"
}`}
/>
);
})}
</div>
);
}
})}
</>
) : !loading && !currentTableData?.length ? (
<div className="relative w-full">
<div
className={`relative max-h-fit min-h-fit w-full min-w-fit max-w-full items-center justify-center `}
>
<div
className={`relative ${
useImage
? "h-[31.25rem]"
: "flex h-[6.25rem] items-center justify-center"
} w-full`}
>
{useImage ? (
<img
src={NoDataFoundImg}
className={`no-data-found absolute inset-x-0 m-auto h-full w-[50%] grayscale-[10%]`}
/>
) : (
<>No Data</>
)}
</div>
</div>
</div>
) : null}
</div>
<MkdListTableRightActionPanel
table={table}
tableTitle={tableTitle}
onSort={onSort}
loading={loading}
columns={columns}
actions={actions}
actionPostion={actionPostion}
tableRole={tableRole}
deleteItem={deleteItem}
deleteLoading={deleteLoading}
actionId={actionId}
showDeleteModal={showDeleteModal}
currentTableData={currentTableData}
setShowDeleteModal={setShowDeleteModal}
handleTableCellChange={handleTableCellChange}
setSelectedItems={setSelectedItems}
/>
</div>
</>
);
};
export default MkdListTable;
src/components/MkdListTable/MkdListTableBindOperations.jsx
+104
View File
@@ -0,0 +1,104 @@
export const operations = {
EQUAL: "eq",
NOT_EQUAL: "neq",
IS_NULL: "isn",
IS_NOT_NULL: "isnn",
CONTAINS: "cs",
START_WITH: "sw",
END_WITH: "ew",
LESS_THAN: "lt",
GREATER_THAN: "gt",
};
export const runOperation = (row, column, operator, value) => {
switch (operator) {
case operations.EQUAL:
// TO DO
// return runEqualOperation(row, column, value);
case operations.NOT_EQUAL:
// TO DO
// return runNotEqualOperation(row, column, value);
case operations.IS_NULL:
// TO DO
// return runIsNullOperation(row, column, value);
case operations.IS_NOT_NULL:
// TO DO
// return runIsNotNullOperation(row, column, value);
case operations.CONTAINS:
// TO DO
// return runContainsOperation(row, column, value);
case operations.START_WITH:
// TO DO
// return runStartWithOperation(row, column, value);
case operations.END_WITH:
// TO DO
// return runEndWithOperation(row, column, value);
case operations.GREATER_THAN:
// TO DO
// return runGreaterThanOperation(row, column, value);
case operations.LESS_THAN:
// TO DO
// return runLessThanOperation(row, column, value);
}
};
export const logicalOR = (action, row) => {
if (
!Array.isArray(action?.bind?.column) ||
!Array.isArray(action?.bind?.ifValue)
) {
return false;
}
if (action?.bind?.column?.length !== action?.bind?.ifValue?.length) {
return false;
}
const result = action?.bind?.ifValue.map((value, index) =>
runOperation(
row,
action?.bind?.column[index],
action?.bind?.operator,
value
)
);
return result.some((res) => res === true);
};
export const logicalAND = (action, row) => {
if (
!Array.isArray(action?.bind?.column) ||
!Array.isArray(action?.bind?.ifValue)
) {
return false;
}
if (action?.bind?.column?.length !== action?.bind?.ifValue?.length) {
return false;
}
const result = action?.bind?.ifValue.map((value, index) =>
runOperation(
row,
action?.bind?.column[index],
action?.bind?.operator,
value
)
);
return result.every((res) => res === true);
};
export const processBind = (action, row) => {
if (action?.bind?.logic) {
switch (action?.bind?.logic) {
case "or":
return logicalOR(action, row);
case "and":
return logicalAND(action, row);
}
} else {
return runOperation(
row,
action?.bind?.column,
action?.bind?.operator,
action?.bind?.ifValue
);
}
};
src/components/MkdListTable/MkdListTableHead.jsx
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import { NarrowUpArrowIcon } from "Assets/svgs";
import { SkeletonLoader } from "Components/Skeleton";
const MkdListTableHead = ({ onSort, columns }) => {
return (
<>
<tr className="flex !h-[2.25rem] !max-h-[2.25rem] !min-h-[2.25rem] overflow-hidden">
{!columns?.length ? (
<th scope="col" className={`!w-full !min-w-full !max-w-full `}>
<SkeletonLoader
count={1}
counts={[1]}
className="!m-0 !h-full !p-0"
/>
</th>
) : null}
{columns.map((column, i) => {
if (column?.accessor !== "" && column?.selected_column) {
return (
<th
key={i}
scope="col"
className={`flex !w-[6.25rem] !min-w-[6.25rem] max-w-[auto] shrink-0 grow cursor-pointer justify-start px-[.75rem] py-[.5rem] text-left text-sm font-[400] capitalize leading-[1.5rem] tracking-wider text-sub-500 ${
column.isSorted ? "cursor-pointer" : ""
} `}
onClick={column.isSorted ? () => onSort(i) : undefined}
>
<div className="flex !w-auto !min-w-fit max-w-[auto] shrink-0 items-center justify-start gap-2">
{column.header}
<span className="shrink-0">
{column.isSorted ? (
<NarrowUpArrowIcon
className={`h-2 w-2 ${
column.isSortedDesc ? "rotate-180" : ""
}`}
/>
) : (
""
)}
</span>
</div>
</th>
);
}
})}
</tr>
</>
);
};
export default MkdListTableHead;
src/components/MkdListTable/MkdListTableRightActionPanel.jsx
+96
View File
@@ -0,0 +1,96 @@
import React, { Fragment } from "react";
import MkdListTableRowDropdown from "./MkdListTableRowDropdown";
import MkdListTableRowButtons from "./MkdListTableRowButtons";
const MkdListTableRightActionPanel = ({
table,
loading,
columns = [],
actions,
actionPostion = [],
tableRole,
deleteItem,
deleteLoading,
actionId = "id",
showDeleteModal,
currentTableData = [],
setShowDeleteModal,
}) => {
const [deleteId, setIdToDelete] = React.useState(null);
const setDeleteId = async (id) => {
console.log("id >>", id);
setShowDeleteModal(true);
setIdToDelete(id);
};
return (
<Fragment>
{!loading && currentTableData.length && columns.length ? (
<>
{(columns.find((item) => item.accessor === "") &&
actions?.delete?.show) ||
Object.keys(actions).filter(
(key) =>
actions[key]?.show &&
actions[key]?.locations &&
actions[key]?.locations?.length &&
(actions[key]?.locations?.includes("dropdown") ||
actions[key]?.locations?.includes("buttons"))
)?.length ? (
<div className="h-full ">
<div className="grid grid-rows-[auto_1fr]">
<div className="flex !h-[2.65rem] !max-h-[2.65rem] !min-h-[2.65rem] border-b !bg-weak-100 "></div>
<div className="flex flex-col px-1">
{currentTableData?.map((rowData, rowDataIndex) => {
return (
<div
className="flex !h-[3rem] !max-h-[3rem] !min-h-[3rem] w-full items-center border-b"
key={rowDataIndex}
>
{/* // key={rowDataIndex}
// className="!h-[3rem] !max-h-[3rem] !min-h-[3rem] w-fit border-b" */}
{actionPostion?.includes("dropdown") ? (
<>
{/* <KebabIcon className="rotate-90" /> */}
<MkdListTableRowDropdown
actions={actions}
columns={columns}
row={rowData}
setDeleteId={setDeleteId}
// onPopoverStateChange={onPopoverStateChange}
actionId={actionId}
/>
</>
) : null}
{actionPostion?.includes("buttons") ? (
<>
<MkdListTableRowButtons
row={rowData}
actions={actions}
columns={columns}
actionId={actionId}
setDeleteId={setDeleteId}
/>
</>
) : null}
</div>
);
})}
</div>
</div>
</div>
) : null}
</>
) : null}
</Fragment>
);
};
export default MkdListTableRightActionPanel;
// [
// actions?.view?.show,
// actions?.edit?.show,
// actions?.delete?.show,
// actions?.status?.show,
// ].includes(true) ||
src/components/MkdListTable/MkdListTableRow.jsx
+296
View File
@@ -0,0 +1,296 @@
import React from "react";
import { MdPhoto } from "react-icons/md";
import { MkdPopover } from "Components/MkdPopover";
import { NotesIcon } from "Assets/svgs";
import { truncate, processList, mappingValues } from "Utils/utils";
import { GlobalContext } from "Context/Global";
import { AuthContext } from "Context/Auth";
import { SkeletonLoader } from "Components/Skeleton";
const statusNames = {
status: "status",
verify: "verify",
receipt_status: "receipt_status",
};
const MkdListTableRow = ({
column = null,
actions,
tableRole = "",
actionPostion = [],
actionId = "id",
handleTableCellChange,
selectedIds = [],
handleSelectRow,
columnIndex,
allowEditing,
onPopoverStateChange = null,
columns = [],
row,
currentTableData = [],
expandRow = false,
}) => {
const { dispatch } = React.useContext(AuthContext);
const {
dispatch: globalDispatch,
state: {},
} = React.useContext(GlobalContext);
const [listResult, setResult] = React.useState(null);
const showWithLimit = (column) => {
if (expandRow) {
if (["string", "number"].includes(typeof listResult)) {
return (
<span
className={`flex w-fit items-center justify-normal gap-[.25rem] rounded-[.375rem] border border-soft-200 p-[.25rem_.5rem_.25rem_.25rem] capitalize`}
>
{listResult}
</span>
);
}
if (typeof listResult === "object" && Array.isArray(listResult)) {
return (
<>
{listResult.map((item, itemKey) => {
return (
<span
className={`flex w-fit items-center justify-normal gap-[.25rem] rounded-[.375rem] border border-soft-200 p-[.25rem_.5rem_.25rem_.25rem] capitalize`}
key={itemKey}
>
{item}
</span>
);
})}
</>
);
}
} else {
if (["string", "number"].includes(typeof listResult)) {
return (
<span
className={`flex w-fit items-center justify-normal gap-[.25rem] rounded-[.375rem] border border-soft-200 p-[.25rem_.5rem_.25rem_.25rem] capitalize`}
>
{listResult}
</span>
);
}
if (typeof listResult === "object" && Array.isArray(listResult)) {
const lengthToHide =
listResult.length > column.limit
? `+${listResult.length - column?.limit}`
: null;
const itemsToShow = listResult
.map((item, index) => {
if (index + 1 <= column.limit) {
return item;
}
})
.filter(Boolean);
if (lengthToHide) itemsToShow.push(lengthToHide);
return (
<>
{itemsToShow.map((item, itemKey) => {
return (
<span
className={`flex w-fit items-center justify-normal gap-[.25rem] rounded-[.375rem] border border-soft-200 p-[.25rem_.5rem_.25rem_.25rem] capitalize`}
key={itemKey}
>
{item}
</span>
);
})}
</>
);
}
}
};
const getColumnListData = async (value, column) => {
// TO DO the processList function
const result = await processList(value, column, globalDispatch, dispatch);
if (["string", "number"].includes(typeof result)) {
setResult(result);
}
if (typeof result === "object" && Array.isArray(result)) {
setResult(() => [...result]);
}
};
React.useEffect(() => {
if (column?.list && !listResult) {
getColumnListData(row[column?.accessor], column);
}
}, [column?.accessor]);
return (
<div
className={`!h-[3rem] !max-h-[3rem] !min-h-[3rem] w-full min-w-full max-w-fit whitespace-nowrap !border-b border-soft-200 bg-white px-[.75rem] py-[.5rem] ${
columnIndex === 0 ? "border-l border-r" : "border-r"
}`}
>
{column?.accessor?.indexOf("image") > -1 ||
(column?.accessor?.indexOf("photo") > -1 && column?.selected_column) ? (
<LazyLoad>
<MkdPopover
display={<MdPhoto className="peer " />}
openOnClick={false}
zIndex={999999999999999}
onPopoverStateChange={onPopoverStateChange}
place="left-end"
tooltipClasses={`whitespace-nowrap h-fit min-h-[1rem] max-h-fit w-[18.75rem] !rounded-lg border border-[#a8a8a8] !bg-white p-2 text-sm text-[#525252] shadow-md`}
>
<LazyLoad
className={`h-[18.75rem] w-[18.75rem] whitespace-nowrap !rounded-lg border border-[#a8a8a8] !bg-white p-2 text-sm text-[#525252] shadow-md`}
>
<img
src={row[column?.accessor]}
className="w-[18.75rem]"
alt=""
/>
</LazyLoad>
</MkdPopover>
</LazyLoad>
) : (column?.accessor?.indexOf("pdf") > -1 ||
column?.accessor?.indexOf("doc") > -1 ||
column?.accessor?.indexOf("file") > -1 ||
column?.accessor?.indexOf("video") > -1) &&
column?.selected_column ? (
<a
className="text-blue-500"
target="_blank"
href={row[column?.accessor]}
rel="noreferrer"
>
{" "}
View
</a>
) : column?.join && column?.selected_column ? (
<>
{row[column?.join] && row[column?.join][column?.accessor]
? row[column?.join][column?.accessor]
: null}
</>
) : column?.mappingExist &&
["status", "role", "verify", "receipt_status"].includes(
column?.accessor
) &&
!["admin"].includes(tableRole) &&
column?.selected_column ? (
<span
style={{
backgroudColor: column?.mappings[row[column?.accessor]]?.bg,
color: column?.mappings[row[column?.accessor]]?.color,
}}
className={`flex w-fit items-center justify-normal gap-[.25rem] rounded-[.375rem] border border-soft-200 p-[.25rem_.5rem_.25rem_.25rem] capitalize`}
>
{mappingValues[
column?.mappings[row[column?.accessor]]?.toLowerCase()
] ?? column?.mappings[row[column?.accessor]]}
</span>
) : column?.mappingExist &&
allowEditing &&
["admin"].includes(tableRole) &&
column?.selected_column ? (
<select
// onChange={(e) =>
// handleTableCellChange(
// row[actionId],
// e.target.value,
// i,
// column?.accessor
// )
// }
value={row[column?.accessor]}
>
{Object.keys(column?.mappings).map((columnDataKey, index) => (
<option
key={index}
value={columnDataKey}
selected={columnDataKey === row[column?.accessor]}
>
{column?.mappings[columnDataKey]}
</option>
))}
</select>
) : column?.mappingExist &&
!allowEditing &&
["admin"].includes(tableRole) &&
column?.selected_column ? (
<span
style={{
backgroundColor: column?.mappings[row[column?.accessor]]?.bg,
color: column?.mappings[row[column?.accessor]]?.color,
}}
className={`flex w-fit items-center justify-normal gap-[.25rem] rounded-[.375rem] border border-soft-200 p-[.25rem_.5rem_.25rem_.25rem] capitalize`}
>
{mappingValues[
column?.mappings[row[column?.accessor]]?.toLowerCase()
] ?? column?.mappings[row[column?.accessor]]}
</span>
) : !column?.mappingExist &&
column?.accessor !== "id" &&
column?.accessor !== "create_at" &&
column?.accessor !== "update_at" &&
column?.accessor !== "user_id" &&
column?.accessor !== "" &&
allowEditing &&
column?.selected_column ? (
<input
className="text-ellipsis border-0"
type="text"
value={row[column?.accessor]}
// onChange={(e) =>
// handleTableCellChange(
// row[actionId],
// e.target.value,
// i,
// column?.accessor
// )
// }
/>
) : column?.truncate && column?.selected_column ? (
<>{truncate(row[column?.accessor], 50)}</>
) : column?.replace && column?.selected_column ? (
<>{truncate(row[column?.accessor], 30)}</>
) : column?.list && column?.selected_column ? (
<>
{listResult ? (
<div className="flex items-center gap-2">
{showWithLimit(column)}
</div>
) : (
<SkeletonLoader
count={1}
counts={[2]}
className={`!h-[2rem] !gap-0 rounded-[.625rem] !bg-[#ebebeb] !p-0`}
/>
)}
</>
) : column?.isCurrency && column?.selected_column ? (
<>
{column?.currency}
{row[column?.accessor]}
</>
) : ["notes"].includes(column?.accessor) && column?.selected_column ? (
<button type="button" className="flex items-center gap-2 ">
<NotesIcon className="h-[1.0313rem] w-[1.0313rem]" />
View
</button>
) : column?.accessor !== "" && column?.selected_column ? (
<>
{typeof row[column?.accessor] === "object"
? null
: row[column?.accessor]}
</>
) : null}
</div>
);
};
export default MkdListTableRow;
src/components/MkdListTable/MkdListTableRowButtons.jsx
+80
View File
@@ -0,0 +1,80 @@
import React from "react";
import { AddButton } from "Components/AddButton";
import { processBind } from "./MkdListTableBindOperations";
const MkdListTableRowDropdown = ({
row,
columns,
actions,
actionId = "id",
setDeleteId = null,
}) => {
return (
<>
<div className="z-3 relative flex h-fit w-fit items-center gap-2">
{Object.keys(actions)
.filter(
(key) =>
actions[key]?.locations &&
actions[key]?.locations?.includes("buttons")
)
.map((key, keyIndex) => {
if (actions[key]?.bind) {
switch (actions[key]?.bind?.action) {
case "hide":
if (!processBind(actions[key], row)) {
return (
<AddButton
key={keyIndex}
title={actions[key]?.children ?? key}
onClick={() => {
if (["delete"].includes(key)) {
if (setDeleteId) {
setDeleteId(row[actionId]);
}
} else if (actions[key]?.action) {
actions[key]?.action([row[actionId]]);
}
}}
className={`!h-[2rem] !w-[2.0713rem] !border-soft-200 !bg-white`}
>
{actions[key]?.icon
? actions[key]?.icon
: actions[key]?.children ?? key}
</AddButton>
);
}
}
}
if (!actions[key]?.bind) {
return (
<AddButton
key={keyIndex}
title={actions[key]?.children ?? key}
onClick={() => {
if (["delete"].includes(key) && !actions[key]?.action) {
if (setDeleteId) {
setDeleteId(row[actionId]);
}
} else if (actions[key]?.action) {
actions[key]?.action([row[actionId]]);
}
// if (actions[key]?.action) {
// actions[key]?.action([row[actionId]]);
// }
}}
className={`!h-[2rem] !w-[2.0713rem] !border-soft-200 !bg-white`}
>
{actions[key]?.icon
? actions[key]?.icon
: actions[key]?.children ?? key}
</AddButton>
);
}
})}
</div>
</>
);
};
export default MkdListTableRowDropdown;
src/components/MkdListTable/MkdListTableRowDropdown.jsx
+119
View File
@@ -0,0 +1,119 @@
import React from "react";
import { AiFillEye } from "react-icons/ai";
import { MkdPopover } from "Components/MkdPopover";
import { DropdownOption } from "Components/DropdownOptions";
import { KebabIcon, TrashIcon, EditIcon2, UpdateIcon } from "Assets/svgs";
import { optionTypes } from "Utils/utils";
import RenderDropdownActions from "./RenderDropdownActions";
import RenderActions from "./RenderActions";
const MkdListTableRowDropdown = ({
row,
columns,
actions,
actionId = "id",
setDeleteId,
onPopoverStateChange = null,
}) => {
return (
<>
<div className="items center z-3 relative flex h-fit w-fit">
<MkdPopover
display={<KebabIcon className="rotate-90" />}
tooltipClasses="!rounded-[.5rem] !min-w-[11rem] !px-0 !right-[3.25rem] !border bg-white"
place={"left-end"}
onPopoverStateChange={onPopoverStateChange}
>
{actions?.edit?.show && (
<DropdownOption
className="bg-white"
icon={<EditIcon2 />}
name={"Edit"}
onClick={() => {
if (actions?.edit?.action) {
actions?.edit?.action([row[actionId]]);
}
}}
/>
)}
{actions?.view?.show && (
<DropdownOption
icon={<AiFillEye className="text-gray-400" />}
name={"View"}
onClick={() => {
if (actions?.view?.action) {
actions?.view?.action([row[actionId]]);
}
}}
/>
)}
{actions?.status?.show && (
<DropdownOption
icon={<UpdateIcon />}
name={getStatusMap(statusRow, statusCol, row)}
onClick={() => {
if (actions?.status?.action) {
actions?.status?.action([row[actionId]]);
}
}}
/>
)}
{actions?.delete?.show && (
<DropdownOption
icon={<TrashIcon />}
name={"Delete"}
onClick={() => {
if (!actions[key]?.action) {
if (setDeleteId) {
setDeleteId(row[actionId]);
}
} else if (actions[key]?.action) {
actions[key]?.action([row[actionId]]);
}
// setDeleteId(row[actionId]);
}}
/>
)}
{Object.keys(actions)
.filter(
(key) =>
actions[key]?.show &&
actions[key]?.locations &&
actions[key]?.locations?.includes("dropdown")
)
.map((key, keyIndex) => {
if (
actions[key]?.type &&
[optionTypes.DROPDOWN].includes(actions[key]?.type)
) {
return (
<RenderDropdownActions
row={row}
key={keyIndex}
actionKey={key}
actionId={actionId}
action={actions[key]}
/>
);
} else if (!actions[key]?.type) {
return (
<RenderActions
row={row}
key={keyIndex}
actionId={actionId}
action={actions[key]}
/>
);
}
})}
</MkdPopover>
</div>
</>
);
};
export default MkdListTableRowDropdown;
src/components/MkdListTable/MkdListTableSelectRow.jsx
+85
View File
@@ -0,0 +1,85 @@
import React, { Fragment } from "react";
const MkdListTableSelectRow = ({
loading,
columns = [],
actions,
currentTableData = [],
areAllRowsSelected,
handleSelectAll,
handleSelectRow,
actionId = "id",
selectedIds,
}) => {
return (
<Fragment>
{!loading && currentTableData?.length && columns.length ? (
<>
{[actions?.select?.show].includes(true) ||
columns.find((item) => item?.accessor === "row") ? (
<div className="">
<div className="flex !h-[2.65rem] !max-h-[2.65rem] !min-h-[2.65rem] w-fit !bg-weak-100 ">
{[actions?.select?.show].includes(true) ? (
<div
className={`!w-[2.65rem] !min-w-[2.65rem] !max-w-[2.65rem] cursor-pointer !bg-weak-100 px-[.75rem] py-[.5rem] text-sm font-[400] capitalize leading-[1.5rem] tracking-wider text-sub-500`}
>
{actions?.select?.multiple ? (
<input
type="checkbox"
disabled={!actions?.select?.multiple}
id="select_all_rows"
className={`focus:shadow-outline mr-1 !h-4 !w-4 cursor-pointer appearance-none rounded border leading-tight text-primary shadow focus:outline-none focus:ring-0`}
checked={areAllRowsSelected}
onChange={handleSelectAll}
/>
) : null}
</div>
) : null}
{columns.find((item) => item.accessor === "row") ? (
<div
className={`flex !w-[2.65rem] !min-w-[2.65rem] !max-w-[2.65rem] cursor-pointer justify-center !bg-weak-100 py-[.5rem] text-sm font-[400] capitalize leading-[1.5rem] tracking-wider text-sub-500 `}
>
Row
</div>
) : null}
</div>
{currentTableData?.map((rowData, rowDataIndex) => {
return (
<div
className=" flex !h-[3rem] !max-h-[3rem] !min-h-[3rem] border-b"
key={rowDataIndex}
>
{[actions?.select?.show].includes(true) && (
<div
className={` !h-full !max-h-full !min-h-full !w-[2.65rem] !min-w-[2.65rem] !max-w-[2.65rem] cursor-pointer px-[.75rem] py-[.5rem] text-sm font-[400] capitalize leading-[1.5rem] tracking-wider text-sub-500`}
>
<input
type="checkbox"
// disabled={!actions?.select?.multiple}
className={`focus:shadow-outline mr-1 !h-4 !w-4 cursor-pointer appearance-none rounded border leading-tight text-primary shadow focus:outline-none focus:ring-0`}
name="select_item"
checked={selectedIds.includes(rowData[actionId])}
onChange={() => handleSelectRow(rowData[actionId])}
/>
</div>
)}
{columns.find((item) => item.accessor === "row") ? (
<div
className={`flex h-full !w-[2.65rem] !min-w-[2.65rem] !max-w-[2.65rem] items-center whitespace-nowrap px-[.75rem] py-[.5rem] text-sm`}
>
{rowDataIndex + 1}
</div>
) : null}
</div>
);
})}
</div>
) : null}
</>
) : null}
</Fragment>
);
};
export default MkdListTableSelectRow;
src/components/MkdListTable/MkdListTableV2.jsx
+809
View File
@@ -0,0 +1,809 @@
import React, { memo, useMemo } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import MkdSDK from "Utils/MkdSDK";
import { StringCaser } from "Utils/utils";
import { AuthContext, tokenExpireError } from "Context/Auth";
import {
GlobalContext,
customRequest,
getMany,
setLoading as setGlobalLoading,
} from "Context/Global";
import {
MkdListTable,
OverlayTableActions,
TableActions,
} from "Components/MkdListTable";
import { AddButton } from "Components/AddButton";
import TreeSDK from "Utils/TreeSDK";
import "./MkdListTable.css";
import { ExCircleIcon } from "Assets/svgs";
import { MkdInput } from "Components/MkdInput";
let sdk = new MkdSDK();
// const getSchemaStructure = (schema) => {
// return;
// };
const getType = (type) => {
switch (type) {
case "varchar":
return "text";
case "text":
return "textarea";
case "mediumtext":
return "textarea";
case "longtext":
return "textarea";
case "tinyint":
return "number";
case "int":
return "number";
case "bigint":
return "number";
case "float":
return "number";
case "double":
return "number";
case "image":
return "image";
case "file":
return "file";
case "date":
return "date";
case "datetime":
return "datetime";
default:
return "text";
}
};
/**
* @params {"dropwdown" | "ontop" | "overlay"} actionPostion
*
*/
const MkdListTableV2 = ({
externalData = [],
useExternalData = false,
defaultColumns = [],
columnModel = null,
// setColumns,
actions = {
view: { show: true, multiple: true, action: null },
edit: { show: true, multiple: true, action: null },
delete: { show: true, multiple: true, action: null },
select: { show: true, multiple: true, action: null },
action: {
show: false,
multiple: false,
action: null,
showChildren: true,
children: "+",
type: "",
className: "",
locations: [],
icon: null,
},
add: {
show: true,
multiple: true,
action: null,
showChildren: true,
children: "+",
type: "",
className: "",
},
export: {
show: true,
multiple: true,
action: null,
showText: false,
className: "",
},
},
actionPostion = ["dropdown"], // "dropwdown" | "ontop" | "overlay" | "button"
actionId = "id",
tableRole = "admin",
table = "user",
tableTitle = "",
tableSchema = [],
hasFilter = true,
schemaFields = [],
showPagination = true,
defaultFilter = [],
refreshRef = null,
allowEditing = false,
allowSortColumns = true,
topClasses = "",
join = [],
filterDisplays = [],
}) => {
const tdk = new TreeSDK();
const { dispatch } = React.useContext(AuthContext);
const {
dispatch: globalDispatch,
state: { columModel },
} = React.useContext(GlobalContext);
const [query, setQuery] = React.useState("");
const [currentTableData, setCurrentTableData] = React.useState([]);
const [pageSize, setPageSize] = React.useState(1000);
const [pageCount, setPageCount] = React.useState(0);
const [dataTotal, setDataTotal] = React.useState(0);
const [currentPage, setPage] = React.useState(1);
const [canPreviousPage, setCanPreviousPage] = React.useState(false);
const [canNextPage, setCanNextPage] = React.useState(false);
const [showDeleteModal, setShowDeleteModal] = React.useState(false);
const [deleteLoading, setDeleteLoading] = React.useState(false);
const [selectedOptions, setSelectedOptions] = React.useState([]);
const [filterConditions, setFilterConditions] = React.useState([]);
const [selectedItems, setSelectedItems] = React.useState([]);
const [searchValue, setSearchValue] = React.useState("");
const [isSearchDirty, setIsSearchDirty] = React.useState(false);
// const [optionValue, setOptionValue] = React.useState("eq");
const [isLoading, setIsLoading] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const [runFilter, setRunFilter] = React.useState(false);
const [searchField, setSearchField] = React.useState("name");
const [columnData, setColumnData] = React.useState(null);
const [columns, setColumns] = React.useState([]);
const [columnId, setColumnId] = React.useState(0);
const [popoverShown, setPopoverShow] = React.useState(false);
const selectedOptionsMemo = useMemo(() => selectedOptions, [selectedOptions]);
const schema = yup.object({});
const {
register,
handleSubmit,
setError,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
});
function onSort(columnIndex) {
console.log(columns[columnIndex]);
if (columns[columnIndex].isSorted) {
columns[columnIndex].isSortedDesc = !columns[columnIndex].isSortedDesc;
} else {
columns.map((i) => (i.isSorted = false));
columns.map((i) => (i.isSortedDesc = false));
columns[columnIndex].isSorted = true;
}
(async function () {
await getData(currentPage, pageSize, {
filterConditions,
order: columns[columnIndex].accessor,
direction: columns[columnIndex].isSortedDesc ? "desc" : "asc",
});
})();
}
function updatePageSize(limit) {
(async function () {
setPageSize(limit);
if (isSearchDirty && !searchValue) {
await getData(currentPage, limit);
setIsSearchDirty(false);
} else if (isSearchDirty && searchValue) {
getSearchData({ limit, page: currentPage });
}
})();
}
function setOptionValue(field, value, uid) {
const tempSelectedOptions = [...selectedOptions];
const data = tempSelectedOptions.map((item) => {
if (item?.uid === uid) {
return {
...item,
[field]: value,
};
}
return item;
});
setSelectedOptions((prev) => [...data]);
// console.log("field", field);
if (field === "value") {
// console.log("field", field);
setRunFilter(true);
}
}
function previousPage() {
(async function () {
if (isSearchDirty && !searchValue) {
// await getData(currentPage, pageSize, { filterConditions: [] });
await getData(
currentPage - 1 > 0 ? currentPage - 1 : currentPage,
pageSize
);
setIsSearchDirty(false);
} else if (isSearchDirty && searchValue) {
getSearchData({
limit: pageSize,
page: currentPage - 1 > 0 ? currentPage - 1 : currentPage,
});
}
})();
}
function updateCurrentPage(page) {
(async function () {
setPage(page);
if (isSearchDirty && !searchValue) {
await getData(page, pageSize);
setIsSearchDirty(false);
} else if (isSearchDirty && searchValue) {
getSearchData({ limit: pageSize, page });
}
})();
}
function nextPage() {
(async function () {
if (isSearchDirty && !searchValue) {
await getData(
currentPage + 1 <= pageCount ? currentPage + 1 : currentPage,
pageSize
);
setIsSearchDirty(false);
} else if (isSearchDirty && searchValue) {
getSearchData({
limit: pageSize,
page: currentPage + 1 <= pageCount ? currentPage + 1 : currentPage,
});
}
})();
}
const addFilterCondition = (option, selectedValue, inputValue) => {
const input =
selectedValue === "eq" && isNaN(inputValue)
? `${inputValue}`
: inputValue;
const condition = `${option},${selectedValue},${input}`.toLowerCase();
setFilterConditions((prevConditions) => {
const newConditions = prevConditions.filter(
(condition) => !condition.includes(option)
);
return [...newConditions, condition];
});
setSearchValue(inputValue);
};
// options.size = payload.limit;
// options.order = payload.sortId;
// options.direction = payload.direction;
// options.page = payload.page;
// options.join = payload.join;
async function getData(pageNum, limitNum, currentTableData) {
// console.log("currentTableData >>", currentTableData);
try {
setLoading(true);
const result = await tdk.getPaginate(table, {
size: limitNum,
page: pageNum,
...{
...(join && join.length
? {
join,
}
: null),
},
...{
...(currentTableData?.order
? {
order: currentTableData?.order,
direction: currentTableData?.direction,
}
: null),
},
...{
...(currentTableData?.filterConditions &&
currentTableData?.filterConditions.length
? {
filter: [
...currentTableData?.filterConditions,
...(defaultFilter.length ? defaultFilter : []),
],
}
: defaultFilter.length
? { filter: [...defaultFilter] }
: null),
},
});
// sdk.setTable(table);
// const result = await sdk.callRestAPI(
// {
// payload: {
// ...currentTableData,
// ...{
// ...(filterConditions.length
// ? {
// filter: [
// ...(defaultFilter.length && defaultFilter),
// ...filterConditions,
// ],
// }
// : defaultFilter.length
// ? { filter: [...defaultFilter] }
// : null),
// },
// },
// page: pageNum,
// limit: limitNum,
// },
// "PAGINATE"
// );
// if (!result) {
// setLoading(false);
// }
setSelectedItems(() => []);
const { list, total, limit, num_pages, page } = result;
setCurrentTableData(list);
console.log("v2 component fetch result");
console.log(result);
console.log("list");
console.log(list);
setPageSize(limit);
setPageCount(num_pages);
setPage(page);
setDataTotal(total);
setCanPreviousPage(page > 1);
setCanNextPage(page + 1 <= num_pages);
setLoading(false);
if (selectedItems?.length) {
setSelectedItems(() => []);
}
} catch (error) {
setLoading(false);
console.log("ERROR", error);
tokenExpireError(dispatch, error.message);
}
}
const deleteItem = async (id) => {
async function deleteId(id) {
try {
setDeleteLoading(true);
sdk.setTable(table);
const result = await sdk.callRestAPI({ id }, "DELETE");
if (!result?.error) {
setCurrentTableData((list) =>
list.filter((x) => Number(x.id) !== Number(id))
);
setDeleteLoading(false);
setShowDeleteModal(false);
}
} catch (err) {
setDeleteLoading(false);
setShowDeleteModal(false);
tokenExpireError(dispatch, err?.message);
throw new Error(err);
}
}
if (typeof id === "object") {
id.forEach(async (idToDelete) => {
await deleteId(idToDelete);
});
} else if (typeof id === "number") {
await deleteId(id);
}
};
const exportTable = async (id) => {
try {
sdk.setTable(table);
const result = await sdk.exportCSV();
} catch (err) {
throw new Error(err);
}
};
const handleAlphaSearchInput = async (e) => {
if ([e?.code?.toLowerCase(), e?.key?.toLowerCase()].includes("enter")) {
console.log("searchValue >>", searchValue);
if (isSearchDirty && !searchValue) {
await getData(currentPage, pageSize, { filterConditions: [] });
setIsSearchDirty(false);
} else if (isSearchDirty && searchValue) {
getSearchData();
}
} else {
setSearchValue(e?.target?.value);
if (!isSearchDirty) {
setIsSearchDirty(true);
}
}
};
const getSearchData = async (query = { limit: pageSize, page: 1 }) => {
try {
const apiEndpoint = `/v3/api/custom/qualitysign/generic/search/${table}?limit=${query?.limit}&page=${query?.page}`;
setLoading(true);
const result = await customRequest(globalDispatch, dispatch, {
endpoint: apiEndpoint,
method: "POST",
payload: {
search: searchValue,
columns: columns,
},
});
if (!result?.error) {
setSelectedItems(() => []);
const { data, total, limit, num_pages, page } = result;
setCurrentTableData(() => data);
console.log("v2 component fetch search result");
console.log(result);
console.log("list");
console.log(data);
setPageSize(Number(limit));
setPageCount(num_pages ?? pageCount);
setPage(Number(page));
setDataTotal(Number(total));
setCanPreviousPage(Number(page) > 1);
setCanNextPage(
Number(page) + 1 <= num_pages ? Number(num_pages) : pageCount
);
setLoading(false);
if (selectedItems?.length) {
setSelectedItems(() => []);
}
}
setLoading(false);
} catch (error) {
setLoading(false);
}
};
const resetForm = async () => {
reset();
await getData(currentPage, pageSize);
};
const onSubmit = (e) => {
let filters = [];
// find duplicate fields
const uniqueSet = new Set(
selectedOptionsMemo.map((item) => item?.accessor)
);
if (uniqueSet?.size) {
uniqueSet.forEach((uniqueSetItem) => {
const filterSet = selectedOptionsMemo.filter(
(item) => item.accessor === uniqueSetItem
);
console.log("filterSet >>", filterSet);
if (filterSet?.length > 0 && filterSet?.length > 1) {
const valueSet = filterSet
.map((item) => {
if (item?.value) {
return item;
}
})
.filter(Boolean);
if (valueSet.length > 1) {
// const value = `${uniqueSetItem},in,${valueSet
// .map((item) => item.value)
// .join(",")}`;
// filters.push(value);
valueSet.forEach((valueSetItem) => {
switch (valueSetItem?.operator) {
case "cs":
case "eq":
filters.push(
`qualitysign_${table}.${valueSetItem?.accessor},o${valueSetItem?.operator},${valueSetItem?.value}`
);
break;
default:
filters.push(
`qualitysign_${table}.${valueSetItem?.accessor},${valueSetItem?.operator},${valueSetItem?.value}`
);
}
});
} else if (valueSet.length === 1) {
filters.push(
`qualitysign_${table}.${valueSet[0]?.accessor},${valueSet[0]?.operator},${valueSet[0]?.value}`
);
}
} else if (filterSet?.length === 1) {
if (filterSet[0]?.value) {
filters.push(
`qualitysign_${table}.${filterSet[0]?.accessor},${filterSet[0]?.operator},${filterSet[0]?.value}`
);
}
}
});
}
// return console.log("filters >>", filters);
if (filters?.length) {
getData(currentPage, pageSize, { filterConditions: filters });
} else {
getData(currentPage, pageSize, { filterConditions: [] });
}
// getData(currentPage, pageSize, filter);
};
async function updateTableData(id, key, updatedData) {
try {
// setLoading(true);
sdk.setTable(table);
const result = await sdk.callRestAPI(
{
id,
[key]: updatedData,
},
"PUT"
);
// if (result) {
// setLoading(false);
// }
console.log("update user data");
console.log(result);
} catch (error) {
// setLoading(false);
console.log("ERROR", error);
tokenExpireError(dispatch, error.message);
}
}
async function handleTableCellChange(id, newValue, index, newValueKey) {
console.log(newValue);
console.log(index);
console.log(newValueKey);
let runApiCall;
newValue = isNaN(Number.parseInt(newValue))
? newValue
: Number.parseInt(newValue);
try {
clearTimeout(runApiCall);
runApiCall = setTimeout(async () => {
await updateTableData(id, newValueKey, newValue);
}, 200);
setCurrentTableData((prevData) => {
const updatedData = prevData.map((item, i) => {
if (i === index) {
return {
...item,
[newValueKey]: newValue,
};
}
return item;
});
return updatedData;
});
} catch (error) {
console.error(error);
}
}
const populateColums = (result) => {
setColumnId(result?.data[0]?.id);
setColumnData(result?.data[0]);
const data =
result?.data[0].columns && JSON.parse(result?.data[0].columns)
? JSON.parse(result?.data[0].columns)
: [];
console.log("data >>", data);
if (data.length) {
setColumns(() => [...data]);
} else {
setColumns(() => [...defaultColumns]);
}
};
const getColumns = async () => {
setGlobalLoading(globalDispatch, true, "columModel");
const result = await getMany(globalDispatch, dispatch, "column", [
...(columnModel
? [`model,eq,'${columnModel}'`]
: [`model,eq,'${table}'`]),
`user_id,eq,0`,
]);
// console.log("result >>", result);
if (!result?.error && result?.data?.length) {
populateColums(result);
} else {
const result = await getMany(globalDispatch, dispatch, "column", [
...(columnModel
? [`model,eq,'${columnModel}'`]
: [`model,eq,'${table}'`]),
`user_id,eq,0`,
]);
if (!result?.error && result?.data?.length) {
populateColums(result);
}
}
setGlobalLoading(globalDispatch, false, "columModel");
};
React.useEffect(() => {
if (useExternalData) {
setColumns(() => defaultColumns);
} else {
getColumns();
}
}, [useExternalData]);
// Update External Selected Items
React.useEffect(() => {
if (actions?.select?.action) {
actions.select.action(selectedItems);
}
}, [selectedItems?.length]);
React.useEffect(() => {
const searchableCol = columns.find((col) => col?.searchable);
if (searchableCol) {
setSearchField(searchableCol?.accessor);
}
}, []);
React.useEffect(() => {
if (useExternalData) {
setCurrentTableData(() => externalData);
} else {
getData(currentPage, pageSize, { filterConditions: [] });
}
}, [useExternalData]);
return (
<div className="!h-fit">
{refreshRef && (
<button
type="button"
ref={refreshRef}
onClick={() => getData(1, pageSize)}
className="hidden"
></button>
)}
<div
className={`flex w-full justify-between ${
tableTitle && hasFilter ? "flex-col gap-3" : "h-fit items-center"
} ${topClasses}`}
>
<h4 className="flex items-center font-inter text-[1rem] font-medium capitalize leading-[1.5rem] tracking-[-0.011em]">
{tableTitle ? tableTitle : ""}
</h4>
<div
className={`flex h-fit ${
hasFilter ? "w-full" : "w-fit"
} items-center justify-between gap-2 text-center`}
>
<div
className={`flex h-full w-fit justify-end gap-2 self-end ${
!tableTitle && !hasFilter ? "w-full" : ""
}`}
>
{Object.keys(actions).map((key, keyIndex) => {
if (
actions[key].show &&
actions[key].hasOwnProperty("type") &&
["toggle"].includes(actions[key].type)
) {
return (
<MkdInput
key={keyIndex}
type="toggle"
onChange={(e) => {
if (actions[key]?.action) {
actions[key]?.action(e?.target?.checked);
}
}}
label={actions[key]?.children ?? key}
value={actions[key]?.value}
/>
);
}
})}
{selectedItems?.length && actionPostion.includes("ontop") ? (
<TableActions actions={actions} selectedItems={selectedItems} />
) : null}
{Object.keys(actions).map((key, keyIndex) => {
if (
actions[key].show &&
actions[key].hasOwnProperty("type") &&
["static"].includes(actions[key].type)
) {
return (
<AddButton
key={keyIndex}
onClick={() => {
if (actions[key]?.action) {
actions[key]?.action();
}
}}
title={actions[key]?.title ?? key}
// showChildren={actions?.add?.showChildren}
showPlus={false}
className={`!h-[2.5rem] ${actions[key]?.className}`}
loading={actions[key]?.loading ?? false}
disabled={actions[key]?.disabled ?? false}
icon={actions[key]?.icon ?? null}
>
{key === "delete" ? <ExCircleIcon /> : null}
{actions[key].children ? (
actions[key].children
) : (
<>
{StringCaser(key === "delete" ? "Remove" : key, {
casetype: "capitalize",
separator: " ",
})}
</>
)}
</AddButton>
);
}
})}
{actions?.add?.show && (
<AddButton
onClick={() => {
if (actions?.add?.action) {
actions?.add?.action();
}
}}
showChildren={actions?.add?.showChildren}
className={`!h-[2.5rem] ${actions?.add?.className}`}
>
{actions?.add?.children}
</AddButton>
)}
</div>
</div>
</div>
<div className="my-2">
<MkdListTable
table={table}
onSort={onSort}
columns={columns}
actions={actions}
actionId={actionId}
tableRole={tableRole}
tableTitle={tableTitle}
columnData={columnData}
deleteItem={deleteItem}
setColumns={setColumns}
allowEditing={allowEditing}
setColumnData={setColumnData}
actionPostion={actionPostion}
deleteLoading={deleteLoading}
showDeleteModal={showDeleteModal}
allowSortColumns={allowSortColumns}
currentTableData={currentTableData}
setSelectedItems={setSelectedItems}
setShowDeleteModal={setShowDeleteModal}
loading={loading || columModel?.loading}
handleTableCellChange={handleTableCellChange}
// onPopoverStateChange={setPopoverShow}
popoverShown={popoverShown}
/>
</div>
{selectedItems?.length && actionPostion.includes("overlay") ? (
<OverlayTableActions actions={actions} selectedItems={selectedItems} />
) : null}
</div>
);
};
export default memo(MkdListTableV2);
src/components/MkdListTable/OverlayTableActions.jsx
+184
View File
@@ -0,0 +1,184 @@
import React from "react";
import { StringCaser, optionTypes } from "Utils/utils";
import { AddButton } from "Components/AddButton";
import { ChevronRightIcon, ExCircleIcon } from "Assets/svgs";
import { MkdPopover } from "Components/MkdPopover";
import { DropdownOption } from "Components/DropdownOptions";
const OverlayTableActions = ({ actions, selectedItems }) => {
return (
<div className="fixed inset-x-0 bottom-5 m-auto flex !h-[3.25rem] !max-h-[3.25rem] w-fit items-center justify-start gap-2 rounded-[.875rem] bg-black px-[.75rem] pb-[.5rem] pt-[.5rem]">
<div className="font-inter text-white">
Selected: {selectedItems.length}
</div>
{Object.keys(actions).filter(
(key) =>
actions[key]?.show &&
actions[key]?.locations &&
actions[key]?.locations?.includes("overlay")
)?.length ? (
<>
{Object.keys(actions)
.filter(
(key) =>
actions[key]?.show &&
actions[key]?.locations &&
actions[key]?.locations?.includes("overlay")
)
.map((key, keyIndex) => {
if (
actions[key]?.type &&
[optionTypes.DROPDOWN].includes(actions[key]?.type)
) {
return (
<RenderButtonDropdownActions
action={actions[key]}
actionKey={key}
selectedItems={selectedItems}
key={keyIndex}
/>
);
} else if (!actions[key]?.type) {
return (
<RenderButtons
action={actions[key]}
actionKey={key}
selectedItems={selectedItems}
key={keyIndex}
/>
);
}
})
.filter(Boolean)}
</>
) : null}
</div>
);
};
export default OverlayTableActions;
const RenderButtonDropdownActions = ({ action, actionKey, selectedItems }) => {
return (
<MkdPopover
display={
<span
className={`hover:text[#262626] relative flex h-[3rem] w-full cursor-pointer items-center justify-between gap-2 overflow-hidden rounded-[.625rem] border !border-white-200 border-primary !bg-white-100 bg-primary px-2 py-2 font-inter text-sm font-medium capitalize leading-loose tracking-wide text-white hover:bg-[#F4F4F4]`}
>
<span className="flex grow items-center justify-start gap-3 text-white">
{action?.icon}
{action?.children ?? actionKey}
</span>
<ChevronRightIcon className="-rotate-90" />
</span>
}
zIndex={999}
className={`w-full`}
tooltipClasses="!rounded-[.5rem] !text-white w-full !min-w-[11rem] !px-0 !right-[3.25rem] !border"
place={"top-start"}
backgroundColor="#18181B"
>
{action?.options && Object.keys(action?.options).length
? Object.keys(action?.options).map((key, keyIndex) => {
return (
<RenderButtonActions
key={keyIndex}
action={action?.options[key]}
selectedItems={selectedItems}
/>
);
})
: null}
</MkdPopover>
);
};
const RenderButtonActions = ({ action, selectedItems }) => {
return (
<DropdownOption
name={action?.children ?? key}
// key={keyIndex}
className="!text-white hover:!bg-white-100 "
icon={action?.icon}
onClick={() => {
if (action?.action) {
action?.action(selectedItems);
}
}}
/>
);
};
const RenderButtons = ({ selectedItems, action, actionKey }) => {
if (selectedItems && selectedItems?.length === 1 && !action?.multiple) {
return (
<AddButton
showPlus={false}
loading={action?.loading ?? false}
disabled={action?.disabled ?? false}
icon={action?.icon ?? null}
className={`flex cursor-pointer gap-2 !border-white-200 !bg-white-100 px-2 py-2 text-lg font-medium leading-loose tracking-wide ${
actionKey === "view"
? "text-blue-500"
: actionKey === "delete"
? "!text-red-500"
: "text-[#292829fd]"
} hover:underline`}
onClick={() => {
if (action?.action) {
console.log("actionKey >>", actionKey);
action.action(selectedItems);
}
}}
>
{actionKey === "delete" ? <ExCircleIcon /> : null}
{action.children ? (
action.children
) : (
<>
{StringCaser(actionKey === "delete" ? "Remove" : actionKey, {
casetype: "capitalize",
separator: " ",
})}
</>
)}
</AddButton>
);
}
if (selectedItems && selectedItems?.length >= 1 && action?.multiple) {
return (
<AddButton
actionKey={actionKey}
showPlus={false}
loading={action?.loading ?? false}
disabled={action?.disabled ?? false}
icon={action?.icon ?? null}
className={`cursor-pointer gap-2 !border-white-200 !bg-white-100 px-2 py-2 text-lg font-medium leading-loose tracking-wide ${
actionKey === "view"
? "text-blue-500"
: actionKey === "delete"
? "!text-red-500"
: "text-[#292829fd]"
} hover:underline`}
onClick={() => {
if (action?.action) {
console.log("actionKey >>", actionKey);
action.action(selectedItems);
}
}}
>
{actionKey === "delete" ? <ExCircleIcon /> : null}
{action.children ? (
action.children
) : (
<>
{StringCaser(actionKey === "delete" ? "Remove" : actionKey, {
casetype: "capitalize",
separator: " ",
})}
</>
)}
</AddButton>
);
}
};
src/components/MkdListTable/RenderActions.jsx
+43
View File
@@ -0,0 +1,43 @@
import React from "react";
import { DropdownOption } from "Components/DropdownOptions";
import { processBind } from "./MkdListTableBindOperations";
const RenderActions = ({ action, row, actionId, key }) => {
if (action?.bind) {
switch (action?.bind?.action) {
case "hide":
if (!processBind(action, row)) {
return (
<DropdownOption
name={action?.children ?? key}
// key={keyIndex}
className="hover:!bg-white-100 "
icon={action?.icon}
onClick={() => {
if (action?.action) {
action?.action([row[actionId]]);
}
}}
/>
);
}
}
}
if (!action?.bind) {
return (
<DropdownOption
name={action?.children ?? key}
// key={keyIndex}
className="hover:!bg-white-100 "
icon={action?.icon}
onClick={() => {
if (action?.action) {
action?.action([row[actionId]]);
}
}}
/>
);
}
};
export default RenderActions;
src/components/MkdListTable/RenderDropdownActions.jsx
+41
View File
@@ -0,0 +1,41 @@
import React from "react";
import { MkdPopover } from "Components/MkdPopover";
import { ChevronRightIcon } from "Assets/svgs";
import RenderActions from "./RenderActions";
const RenderDropdownActions = ({ action, actionKey, row, actionId }) => {
return (
<MkdPopover
display={
<span
className={`flex w-full cursor-pointer items-center justify-between gap-3 px-2 capitalize text-[#262626] hover:bg-[#F4F4F4]`}
>
<span className="flex grow gap-3">
{action?.icon}
{action?.children ?? actionKey}
</span>
<ChevronRightIcon />
</span>
}
className={`w-full`}
tooltipClasses="!rounded-[.5rem] w-full !min-w-[11rem] !px-0 !right-[3.25rem] !border bg-white"
place={"left-start"}
backgroundColor="#fff"
>
{action?.options && Object.keys(action?.options).length
? Object.keys(action?.options).map((key, keyIndex) => {
return (
<RenderActions
key={keyIndex}
action={action?.options[key]}
actionId={actionId}
row={row}
/>
);
})
: null}
</MkdPopover>
);
};
export default RenderDropdownActions;
src/components/MkdListTable/TableActions.jsx
+92
View File
@@ -0,0 +1,92 @@
import React from "react";
import { StringCaser } from "Utils/utils";
import { AddButton } from "Components/AddButton";
const TableActions = ({ actions, selectedItems }) => {
return (
<div className="flex gap-2">
{Object.keys(actions)
.map((key) => actions[key].show)
.includes(true) ? (
<>
{Object.keys(actions)
.map((key) => {
if (
actions[key].show &&
!["static"].includes(actions[key].type) &&
!["select", "add", "export"].includes(key)
) {
if (
selectedItems &&
selectedItems?.length === 1 &&
!actions[key]?.multiple
) {
return (
<AddButton
key={key}
showPlus={false}
loading={actions[key]?.loading ?? false}
disabled={actions[key]?.disabled ?? false}
icon={actions[key]?.icon ?? null}
className={`!h-[2.5rem] cursor-pointer px-2 py-2 text-lg font-medium leading-loose tracking-wide ${
key === "view"
? "text-blue-500"
: key === "delete"
? "text-red-500"
: "text-[#292829fd]"
} hover:underline`}
onClick={() => {
if (actions[key]?.action) {
actions[key].action(selectedItems);
}
}}
>
{StringCaser(key, {
casetype: "capitalize",
separator: " ",
})}
</AddButton>
);
}
if (
selectedItems &&
selectedItems?.length >= 1 &&
actions[key]?.multiple
) {
return (
<AddButton
key={key}
showPlus={false}
loading={actions[key]?.loading ?? false}
disabled={actions[key]?.disabled ?? false}
icon={actions[key]?.icon ?? null}
className={`!h-[2.5rem] cursor-pointer px-2 py-2 text-lg font-medium leading-loose tracking-wide ${
key === "view"
? "text-blue-500"
: key === "delete"
? "text-red-500"
: "text-[#292829fd]"
} hover:underline`}
onClick={() => {
if (actions[key]?.action) {
actions[key].action(selectedItems);
}
}}
>
{StringCaser(key, {
casetype: "capitalize",
separator: " ",
})}
</AddButton>
);
}
}
})
.filter(Boolean)}
</>
) : null}
</div>
);
};
export default TableActions;
src/components/MkdListTable/index.js
+8
View File
@@ -0,0 +1,8 @@
export { default as MkdListTable } from "./MkdListTable";
export { default as MkdListTableV2 } from "./MkdListTableV2";
export { default as TableActions } from "./TableActions";
export { default as OverlayTableActions } from "./OverlayTableActions";
export { default as MkdListTableRow } from "./MkdListTableRow";
export { default as MkdListTableHead } from "./MkdListTableHead";
export { default as MkdListTableRowButtons } from "./MkdListTableRowButtons";
export { default as MkdListTableRowDropdown } from "./MkdListTableRowDropdown";
src/components/MkdPopover/MkdPopover.css
+10
View File
@@ -0,0 +1,10 @@
/* PopoverOnClick.css */
/* Customize the appearance of the tooltip */
/* .tooltip {
background-color: white !important;
color: #fff;
padding: 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
} */
src/components/MkdPopover/MkdPopover.jsx
+61
View File
@@ -0,0 +1,61 @@
import React, { useId } from "react";
import { Tooltip as ReactTooltip } from "react-tooltip";
import "./MkdPopover.css";
const MkdPopover = ({
display,
className,
children,
tooltipClasses,
place = "bottom",
openOnClick = true,
zIndex = 99999,
onPopoverStateChange,
backgroundColor = "#fff",
textColor = "#000",
}) => {
const tooltipId = useId();
const handleTooltipShow = () => {
if (onPopoverStateChange) {
onPopoverStateChange(true);
}
};
const handleTooltipHide = () => {
if (onPopoverStateChange) {
onPopoverStateChange(false);
}
};
return (
<>
<div className="App">
<button
type="button"
data-tooltip-id={tooltipId}
className={`${className}`}
>
{display ? display : null}
{/* <AlertCircle className="rotate-180" /> */}
</button>
</div>
<ReactTooltip
// globalCloseEvents={{ scroll: true }}
id={tooltipId}
openOnClick={openOnClick}
style={{ backgroundColor, color: textColor, zIndex: zIndex }}
className={`z-[${zIndex}] ${tooltipClasses} !shadow-md`}
clickable
place={place}
effect="solid"
afterShow={handleTooltipShow}
afterHide={handleTooltipHide}
// getTextColor={() => textColor}
>
{children}
</ReactTooltip>
</>
);
};
export default MkdPopover;
src/components/MkdPopover/MkdPopover.module.css
+47
View File
@@ -0,0 +1,47 @@
.button {
position: relative;
border: none;
color: #ffffff;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #4f46e5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.tip {
position: absolute;
top: anchor(bottom);
left: anchor(50%);
}
/* PopoverOnClick.css */
/* Customize the appearance of the tooltip */
.tooltip {
background-color: #333;
color: #fff;
padding: 8px;
border-radius: 4px;
font-size: 14px;
/* Add any other styles you need */
}
src/components/MkdPopover/index.js
+3
View File
@@ -0,0 +1,3 @@
import { lazy } from "react";
export const MkdPopover = lazy(() => import("./MkdPopover"));
src/components/Skeleton/Skeleton.jsx
+41
View File
@@ -0,0 +1,41 @@
import React from "react";
import Skeleton from "react-loading-skeleton";
const SkeletonLoader = ({
className = "",
count = 5,
counts = [2, 1, 3, 1, 1],
circle = false,
}) => {
return (
<div
className={`flex h-fit max-h-screen min-h-fit w-full flex-col gap-5 overflow-hidden p-4 ${className} `}
>
{/* <Skeleton circle width={60} height={60} /> */}
{Array.from({ length: count }).map((_, index) => (
<Skeleton
key={`${_}${index}`}
count={counts[index] ?? 1}
height={
counts[index] && counts[index] > 1
? 25
: index + 1 === count
? 25
: 80
}
circle={circle}
// style={{ marginBottom: "0.6rem" }}
/>
))}
</div>
);
};
export default SkeletonLoader;
{
/* <Skeleton count={1} height={60} style={{ marginBottom: "0.6rem" }} />
<Skeleton count={3} height={25} style={{ marginBottom: "0.6rem" }} />
<Skeleton count={1} height={80} style={{ marginBottom: "0.6rem" }} />
<Skeleton count={1} height={25} style={{ marginBottom: "0.6rem" }} /> */
}

Some files were not shown because too many files have changed in this diff Show More