From 471559ccb72b2fb32de928dd5ef261204b7812ea Mon Sep 17 00:00:00 2001 From: Marco Santos Date: Wed, 5 Mar 2025 01:07:29 +0000 Subject: [PATCH] Novo site --- GeradoresWS/Dockerfile | 1 - docker-compose.yml | 14 +- geradoresfe/.env | 2 +- geradoresfe/.gitignore | 5 + geradoresfe/.vscode/iisexpress.json | 6 + geradoresfe/package.json | 56 +- geradoresfe/public/favicon.ico | Bin 3870 -> 0 bytes geradoresfe/public/index.html | 6 +- geradoresfe/src/App.css | 38 -- geradoresfe/src/App.tsx | 53 +- geradoresfe/src/GeradoresTheme.tsx | 633 ------------------ geradoresfe/src/components/FAQ.tsx | 150 ----- geradoresfe/src/components/Features.tsx | 27 - geradoresfe/src/components/Footer.tsx | 16 - geradoresfe/src/components/GeradorNIF.tsx | 67 -- geradoresfe/src/components/Hero.tsx | 23 - geradoresfe/src/components/Highlights.tsx | 124 ---- geradoresfe/src/components/LogoCollection.tsx | 59 -- geradoresfe/src/components/Navbar.tsx | 108 --- geradoresfe/src/components/Pricing.tsx | 215 ------ geradoresfe/src/components/SitemarkIcon.tsx | 53 -- geradoresfe/src/components/Testimonials.tsx | 154 ----- .../src/components/ToggleColorMode.tsx | 31 - .../UserProfile/UserAddressCard.tsx | 132 ++++ .../components/UserProfile/UserInfoCard.tsx | 185 +++++ .../components/UserProfile/UserMetaCard.tsx | 217 ++++++ .../src/components/charts/bar/BarChartOne.tsx | 98 +++ .../components/charts/line/LineChartOne.tsx | 121 ++++ .../src/components/common/ChartTab.tsx | 45 ++ .../src/components/common/ComponentCard.tsx | 42 ++ .../src/components/common/CountdownTimer.tsx | 69 ++ .../src/components/common/GridShape.tsx | 14 + .../src/components/common/PageBreadCrumb.tsx | 52 ++ .../src/components/common/PageMeta.tsx | 21 + .../components/common/ThemeToggleButton.tsx | 42 ++ .../src/components/ecommerce/CountryMap.tsx | 95 +++ .../components/ecommerce/DemographicCard.tsx | 115 ++++ .../components/ecommerce/EcommerceMetrics.tsx | 60 ++ .../ecommerce/MonthlySalesChart.tsx | 142 ++++ .../components/ecommerce/MonthlyTarget.tsx | 198 ++++++ .../src/components/ecommerce/RecentOrders.tsx | 208 ++++++ .../components/ecommerce/StatisticsChart.tsx | 138 ++++ geradoresfe/src/components/form/Form.tsx | 23 + geradoresfe/src/components/form/Label.tsx | 27 + .../src/components/form/MultiSelect.tsx | 166 +++++ geradoresfe/src/components/form/Select.tsx | 64 ++ .../form/form-elements/CheckboxComponents.tsx | 36 + .../form/form-elements/DefaultInputs.tsx | 114 ++++ .../form/form-elements/DropZone.tsx | 77 +++ .../form/form-elements/FileInputExample.tsx | 22 + .../form/form-elements/InputGroup.tsx | 55 ++ .../form/form-elements/InputStates.tsx | 69 ++ .../form/form-elements/RadioButtons.tsx | 42 ++ .../form/form-elements/SelectInputs.tsx | 52 ++ .../form/form-elements/TextAreaInput.tsx | 42 ++ .../form/form-elements/ToggleSwitch.tsx | 41 ++ .../form/group-input/PhoneInput.tsx | 140 ++++ .../src/components/form/input/Checkbox.tsx | 43 ++ .../src/components/form/input/FileInput.tsx | 18 + .../src/components/form/input/InputField.tsx | 84 +++ .../src/components/form/input/Radio.tsx | 65 ++ .../src/components/form/input/RadioSm.tsx | 59 ++ .../src/components/form/input/TextArea.tsx | 63 ++ .../src/components/form/switch/Switch.tsx | 72 ++ geradoresfe/src/components/header/Header.tsx | 189 ++++++ .../header/NotificationDropdown.tsx | 380 +++++++++++ .../src/components/header/UserDropdown.tsx | 163 +++++ .../src/components/tables/BasicTableOne.tsx | 215 ++++++ geradoresfe/src/components/ui/alert/Alert.tsx | 145 ++++ .../src/components/ui/avatar/Avatar.tsx | 57 ++ .../src/components/ui/avatar/AvatarText.tsx | 47 ++ geradoresfe/src/components/ui/badge/Badge.tsx | 79 +++ .../src/components/ui/button/Button.tsx | 55 ++ .../src/components/ui/dropdown/Dropdown.tsx | 45 ++ .../components/ui/dropdown/DropdownItem.tsx | 43 ++ .../components/ui/images/ResponsiveImage.tsx | 15 + .../ui/images/ThreeColumnImageGrid.tsx | 31 + .../ui/images/TwoColumnImageGrid.tsx | 23 + geradoresfe/src/components/ui/modal/index.tsx | 94 +++ geradoresfe/src/components/ui/table/index.tsx | 64 ++ .../components/ui/videos/AspectRatioVideo.tsx | 28 + .../components/ui/videos/FourIsToThree.tsx | 16 + .../src/components/ui/videos/OneIsToOne.tsx | 16 + .../components/ui/videos/SixteenIsToNine.tsx | 16 + .../ui/videos/TwentyOneIsToNine.tsx | 16 + geradoresfe/src/context/SidebarContext.tsx | 83 +++ geradoresfe/src/context/ThemeContext.tsx | 58 ++ geradoresfe/src/hooks/useGoBack.ts | 17 + geradoresfe/src/hooks/useModal.ts | 11 + geradoresfe/src/icons/alert.svg | 15 + geradoresfe/src/icons/angle-down.svg | 12 + geradoresfe/src/icons/angle-left.svg | 0 geradoresfe/src/icons/angle-right.svg | 0 geradoresfe/src/icons/angle-up.svg | 13 + geradoresfe/src/icons/arrow-down.svg | 15 + geradoresfe/src/icons/arrow-right.svg | 15 + geradoresfe/src/icons/arrow-up.svg | 16 + geradoresfe/src/icons/audio.svg | 15 + geradoresfe/src/icons/bolt.svg | 15 + geradoresfe/src/icons/box-cube.svg | 15 + geradoresfe/src/icons/box-line.svg | 15 + geradoresfe/src/icons/box.svg | 15 + geradoresfe/src/icons/calendar.svg | 13 + geradoresfe/src/icons/calender-line.svg | 3 + geradoresfe/src/icons/chat.svg | 3 + geradoresfe/src/icons/check-circle.svg | 15 + geradoresfe/src/icons/check-line.svg | 15 + geradoresfe/src/icons/chevron-down.svg | 6 + geradoresfe/src/icons/chevron-left.svg | 16 + geradoresfe/src/icons/chevron-up.svg | 3 + geradoresfe/src/icons/close-line.svg | 14 + geradoresfe/src/icons/close.svg | 15 + geradoresfe/src/icons/copy.svg | 15 + geradoresfe/src/icons/docs.svg | 15 + geradoresfe/src/icons/dollar-line.svg | 15 + geradoresfe/src/icons/download.svg | 15 + geradoresfe/src/icons/envelope.svg | 15 + geradoresfe/src/icons/eye-close.svg | 14 + geradoresfe/src/icons/eye.svg | 14 + geradoresfe/src/icons/file.svg | 15 + geradoresfe/src/icons/folder.svg | 13 + geradoresfe/src/icons/grid.svg | 15 + geradoresfe/src/icons/group.svg | 15 + geradoresfe/src/icons/horizontal-dots.svg | 15 + geradoresfe/src/icons/index.ts | 107 +++ geradoresfe/src/icons/info-hexa.svg | 15 + geradoresfe/src/icons/info.svg | 15 + geradoresfe/src/icons/list.svg | 15 + geradoresfe/src/icons/lock.svg | 19 + geradoresfe/src/icons/mail-line.svg | 15 + geradoresfe/src/icons/more-dot.svg | 14 + geradoresfe/src/icons/page.svg | 15 + geradoresfe/src/icons/paper-plane.svg | 15 + geradoresfe/src/icons/pencil.svg | 15 + geradoresfe/src/icons/pie-chart.svg | 15 + geradoresfe/src/icons/plug-in.svg | 15 + geradoresfe/src/icons/plus.svg | 15 + geradoresfe/src/icons/shooting-star.svg | 15 + geradoresfe/src/icons/table.svg | 15 + geradoresfe/src/icons/task-icon.svg | 15 + geradoresfe/src/icons/time.svg | 15 + geradoresfe/src/icons/trash.svg | 13 + geradoresfe/src/icons/user-circle.svg | 6 + geradoresfe/src/icons/user-line.svg | 15 + geradoresfe/src/icons/videos.svg | 15 + geradoresfe/src/index.css | 606 +++++++++++++++++ geradoresfe/src/index.tsx | 25 +- geradoresfe/src/layout/AppHeader.tsx | 101 +++ geradoresfe/src/layout/AppLayout.tsx | 26 + geradoresfe/src/layout/AppSidebar.tsx | 378 +++++++++++ geradoresfe/src/layout/AuthLayout.tsx | 10 + geradoresfe/src/layout/Backdrop.tsx | 17 + geradoresfe/src/layout/SidebarWidget.tsx | 25 + geradoresfe/src/pages/AuthPages/SignIn.tsx | 175 +++++ geradoresfe/src/pages/AuthPages/SignUp.tsx | 225 +++++++ geradoresfe/src/pages/Blank.tsx | 28 + geradoresfe/src/pages/GenerateCC.tsx | 91 +++ geradoresfe/src/pages/GenerateNIF.tsx | 92 +++ geradoresfe/src/pages/GenerateNISS.tsx | 91 +++ geradoresfe/src/pages/Home.tsx | 56 ++ geradoresfe/tailwind.config.js | 194 +++++- geradoresfe/tsconfig.json | 10 +- 162 files changed, 8335 insertions(+), 1769 deletions(-) create mode 100644 geradoresfe/.vscode/iisexpress.json delete mode 100644 geradoresfe/public/favicon.ico delete mode 100644 geradoresfe/src/App.css delete mode 100644 geradoresfe/src/GeradoresTheme.tsx delete mode 100644 geradoresfe/src/components/FAQ.tsx delete mode 100644 geradoresfe/src/components/Features.tsx delete mode 100644 geradoresfe/src/components/Footer.tsx delete mode 100644 geradoresfe/src/components/GeradorNIF.tsx delete mode 100644 geradoresfe/src/components/Hero.tsx delete mode 100644 geradoresfe/src/components/Highlights.tsx delete mode 100644 geradoresfe/src/components/LogoCollection.tsx delete mode 100644 geradoresfe/src/components/Navbar.tsx delete mode 100644 geradoresfe/src/components/Pricing.tsx delete mode 100644 geradoresfe/src/components/SitemarkIcon.tsx delete mode 100644 geradoresfe/src/components/Testimonials.tsx delete mode 100644 geradoresfe/src/components/ToggleColorMode.tsx create mode 100644 geradoresfe/src/components/UserProfile/UserAddressCard.tsx create mode 100644 geradoresfe/src/components/UserProfile/UserInfoCard.tsx create mode 100644 geradoresfe/src/components/UserProfile/UserMetaCard.tsx create mode 100644 geradoresfe/src/components/charts/bar/BarChartOne.tsx create mode 100644 geradoresfe/src/components/charts/line/LineChartOne.tsx create mode 100644 geradoresfe/src/components/common/ChartTab.tsx create mode 100644 geradoresfe/src/components/common/ComponentCard.tsx create mode 100644 geradoresfe/src/components/common/CountdownTimer.tsx create mode 100644 geradoresfe/src/components/common/GridShape.tsx create mode 100644 geradoresfe/src/components/common/PageBreadCrumb.tsx create mode 100644 geradoresfe/src/components/common/PageMeta.tsx create mode 100644 geradoresfe/src/components/common/ThemeToggleButton.tsx create mode 100644 geradoresfe/src/components/ecommerce/CountryMap.tsx create mode 100644 geradoresfe/src/components/ecommerce/DemographicCard.tsx create mode 100644 geradoresfe/src/components/ecommerce/EcommerceMetrics.tsx create mode 100644 geradoresfe/src/components/ecommerce/MonthlySalesChart.tsx create mode 100644 geradoresfe/src/components/ecommerce/MonthlyTarget.tsx create mode 100644 geradoresfe/src/components/ecommerce/RecentOrders.tsx create mode 100644 geradoresfe/src/components/ecommerce/StatisticsChart.tsx create mode 100644 geradoresfe/src/components/form/Form.tsx create mode 100644 geradoresfe/src/components/form/Label.tsx create mode 100644 geradoresfe/src/components/form/MultiSelect.tsx create mode 100644 geradoresfe/src/components/form/Select.tsx create mode 100644 geradoresfe/src/components/form/form-elements/CheckboxComponents.tsx create mode 100644 geradoresfe/src/components/form/form-elements/DefaultInputs.tsx create mode 100644 geradoresfe/src/components/form/form-elements/DropZone.tsx create mode 100644 geradoresfe/src/components/form/form-elements/FileInputExample.tsx create mode 100644 geradoresfe/src/components/form/form-elements/InputGroup.tsx create mode 100644 geradoresfe/src/components/form/form-elements/InputStates.tsx create mode 100644 geradoresfe/src/components/form/form-elements/RadioButtons.tsx create mode 100644 geradoresfe/src/components/form/form-elements/SelectInputs.tsx create mode 100644 geradoresfe/src/components/form/form-elements/TextAreaInput.tsx create mode 100644 geradoresfe/src/components/form/form-elements/ToggleSwitch.tsx create mode 100644 geradoresfe/src/components/form/group-input/PhoneInput.tsx create mode 100644 geradoresfe/src/components/form/input/Checkbox.tsx create mode 100644 geradoresfe/src/components/form/input/FileInput.tsx create mode 100644 geradoresfe/src/components/form/input/InputField.tsx create mode 100644 geradoresfe/src/components/form/input/Radio.tsx create mode 100644 geradoresfe/src/components/form/input/RadioSm.tsx create mode 100644 geradoresfe/src/components/form/input/TextArea.tsx create mode 100644 geradoresfe/src/components/form/switch/Switch.tsx create mode 100644 geradoresfe/src/components/header/Header.tsx create mode 100644 geradoresfe/src/components/header/NotificationDropdown.tsx create mode 100644 geradoresfe/src/components/header/UserDropdown.tsx create mode 100644 geradoresfe/src/components/tables/BasicTableOne.tsx create mode 100644 geradoresfe/src/components/ui/alert/Alert.tsx create mode 100644 geradoresfe/src/components/ui/avatar/Avatar.tsx create mode 100644 geradoresfe/src/components/ui/avatar/AvatarText.tsx create mode 100644 geradoresfe/src/components/ui/badge/Badge.tsx create mode 100644 geradoresfe/src/components/ui/button/Button.tsx create mode 100644 geradoresfe/src/components/ui/dropdown/Dropdown.tsx create mode 100644 geradoresfe/src/components/ui/dropdown/DropdownItem.tsx create mode 100644 geradoresfe/src/components/ui/images/ResponsiveImage.tsx create mode 100644 geradoresfe/src/components/ui/images/ThreeColumnImageGrid.tsx create mode 100644 geradoresfe/src/components/ui/images/TwoColumnImageGrid.tsx create mode 100644 geradoresfe/src/components/ui/modal/index.tsx create mode 100644 geradoresfe/src/components/ui/table/index.tsx create mode 100644 geradoresfe/src/components/ui/videos/AspectRatioVideo.tsx create mode 100644 geradoresfe/src/components/ui/videos/FourIsToThree.tsx create mode 100644 geradoresfe/src/components/ui/videos/OneIsToOne.tsx create mode 100644 geradoresfe/src/components/ui/videos/SixteenIsToNine.tsx create mode 100644 geradoresfe/src/components/ui/videos/TwentyOneIsToNine.tsx create mode 100644 geradoresfe/src/context/SidebarContext.tsx create mode 100644 geradoresfe/src/context/ThemeContext.tsx create mode 100644 geradoresfe/src/hooks/useGoBack.ts create mode 100644 geradoresfe/src/hooks/useModal.ts create mode 100644 geradoresfe/src/icons/alert.svg create mode 100644 geradoresfe/src/icons/angle-down.svg create mode 100644 geradoresfe/src/icons/angle-left.svg create mode 100644 geradoresfe/src/icons/angle-right.svg create mode 100644 geradoresfe/src/icons/angle-up.svg create mode 100644 geradoresfe/src/icons/arrow-down.svg create mode 100644 geradoresfe/src/icons/arrow-right.svg create mode 100644 geradoresfe/src/icons/arrow-up.svg create mode 100644 geradoresfe/src/icons/audio.svg create mode 100644 geradoresfe/src/icons/bolt.svg create mode 100644 geradoresfe/src/icons/box-cube.svg create mode 100644 geradoresfe/src/icons/box-line.svg create mode 100644 geradoresfe/src/icons/box.svg create mode 100644 geradoresfe/src/icons/calendar.svg create mode 100644 geradoresfe/src/icons/calender-line.svg create mode 100644 geradoresfe/src/icons/chat.svg create mode 100644 geradoresfe/src/icons/check-circle.svg create mode 100644 geradoresfe/src/icons/check-line.svg create mode 100644 geradoresfe/src/icons/chevron-down.svg create mode 100644 geradoresfe/src/icons/chevron-left.svg create mode 100644 geradoresfe/src/icons/chevron-up.svg create mode 100644 geradoresfe/src/icons/close-line.svg create mode 100644 geradoresfe/src/icons/close.svg create mode 100644 geradoresfe/src/icons/copy.svg create mode 100644 geradoresfe/src/icons/docs.svg create mode 100644 geradoresfe/src/icons/dollar-line.svg create mode 100644 geradoresfe/src/icons/download.svg create mode 100644 geradoresfe/src/icons/envelope.svg create mode 100644 geradoresfe/src/icons/eye-close.svg create mode 100644 geradoresfe/src/icons/eye.svg create mode 100644 geradoresfe/src/icons/file.svg create mode 100644 geradoresfe/src/icons/folder.svg create mode 100644 geradoresfe/src/icons/grid.svg create mode 100644 geradoresfe/src/icons/group.svg create mode 100644 geradoresfe/src/icons/horizontal-dots.svg create mode 100644 geradoresfe/src/icons/index.ts create mode 100644 geradoresfe/src/icons/info-hexa.svg create mode 100644 geradoresfe/src/icons/info.svg create mode 100644 geradoresfe/src/icons/list.svg create mode 100644 geradoresfe/src/icons/lock.svg create mode 100644 geradoresfe/src/icons/mail-line.svg create mode 100644 geradoresfe/src/icons/more-dot.svg create mode 100644 geradoresfe/src/icons/page.svg create mode 100644 geradoresfe/src/icons/paper-plane.svg create mode 100644 geradoresfe/src/icons/pencil.svg create mode 100644 geradoresfe/src/icons/pie-chart.svg create mode 100644 geradoresfe/src/icons/plug-in.svg create mode 100644 geradoresfe/src/icons/plus.svg create mode 100644 geradoresfe/src/icons/shooting-star.svg create mode 100644 geradoresfe/src/icons/table.svg create mode 100644 geradoresfe/src/icons/task-icon.svg create mode 100644 geradoresfe/src/icons/time.svg create mode 100644 geradoresfe/src/icons/trash.svg create mode 100644 geradoresfe/src/icons/user-circle.svg create mode 100644 geradoresfe/src/icons/user-line.svg create mode 100644 geradoresfe/src/icons/videos.svg create mode 100644 geradoresfe/src/layout/AppHeader.tsx create mode 100644 geradoresfe/src/layout/AppLayout.tsx create mode 100644 geradoresfe/src/layout/AppSidebar.tsx create mode 100644 geradoresfe/src/layout/AuthLayout.tsx create mode 100644 geradoresfe/src/layout/Backdrop.tsx create mode 100644 geradoresfe/src/layout/SidebarWidget.tsx create mode 100644 geradoresfe/src/pages/AuthPages/SignIn.tsx create mode 100644 geradoresfe/src/pages/AuthPages/SignUp.tsx create mode 100644 geradoresfe/src/pages/Blank.tsx create mode 100644 geradoresfe/src/pages/GenerateCC.tsx create mode 100644 geradoresfe/src/pages/GenerateNIF.tsx create mode 100644 geradoresfe/src/pages/GenerateNISS.tsx create mode 100644 geradoresfe/src/pages/Home.tsx diff --git a/GeradoresWS/Dockerfile b/GeradoresWS/Dockerfile index ddaaf9a..9183c54 100644 --- a/GeradoresWS/Dockerfile +++ b/GeradoresWS/Dockerfile @@ -6,7 +6,6 @@ EXPOSE 8080 EXPOSE 443 FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build - WORKDIR /src COPY ["GeradoresWS/GeradoresWS.csproj", "GeradoresWS/"] diff --git a/docker-compose.yml b/docker-compose.yml index 751c394..81b693b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,14 +1,22 @@ version: "3.8" services: geradoresws: - build: . + build: + context: . # Caminho para a pasta do Dockerfile do backend + dockerfile: Dockerfile + image: docker.io/shini89/geradoresws:latest ports: - "5050:8080" networks: - app-network + environment: + - ASPNETCORE_ENVIRONMENT=Production # Variavel de ambiente para o backend geradoresfe: - build: ./geradoresfe + build: + context: ./geradoresfe # Caminho para a pasta do Dockerfile do frontend + dockerfile: Dockerfile + image: docker.io/shini89/geradoresfe:latest ports: - "3000:3000" depends_on: @@ -21,4 +29,4 @@ services: networks: app-network: - driver: bridge \ No newline at end of file + driver: bridge diff --git a/geradoresfe/.env b/geradoresfe/.env index 0fcaa18..dd278cd 100644 --- a/geradoresfe/.env +++ b/geradoresfe/.env @@ -1 +1 @@ -REACT_APP_API_URL=http://localhost:5015/ \ No newline at end of file +REACT_APP_API_URL=https://localhost:44329/ \ No newline at end of file diff --git a/geradoresfe/.gitignore b/geradoresfe/.gitignore index 4d29575..18c0012 100644 --- a/geradoresfe/.gitignore +++ b/geradoresfe/.gitignore @@ -21,3 +21,8 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.vercel + +package-lock.json +yarn-lock.json +pnpm-lock.json diff --git a/geradoresfe/.vscode/iisexpress.json b/geradoresfe/.vscode/iisexpress.json new file mode 100644 index 0000000..b67a3bd --- /dev/null +++ b/geradoresfe/.vscode/iisexpress.json @@ -0,0 +1,6 @@ +{ + "port": 26415, + "path": "./", + "clr": "v4.0", + "protocol": "http" +} diff --git a/geradoresfe/package.json b/geradoresfe/package.json index 6910eb4..4a26a76 100644 --- a/geradoresfe/package.json +++ b/geradoresfe/package.json @@ -1,26 +1,45 @@ { - "name": "geradoresfe", - "version": "0.1.0", - "private": true, + "name": "tailadmin-react-free", + "version": "2.0.0", "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.5", - "@headlessui/react": "^2.2.0", - "@heroicons/react": "^2.1.5", - "@mui/icons-material": "^5.15.15", - "@mui/material": "^5.15.15", + "@fullcalendar/core": "^6.1.15", + "@fullcalendar/daygrid": "^6.1.15", + "@fullcalendar/interaction": "^6.1.15", + "@fullcalendar/list": "^6.1.15", + "@fullcalendar/react": "^6.1.15", + "@fullcalendar/timegrid": "^6.1.15", + "@react-jvectormap/core": "^1.0.4", + "@react-jvectormap/world": "^1.1.2", + "@tailwindcss/forms": "^0.5.9", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", - "@types/node": "^16.18.95", - "@types/react": "^18.2.74", - "@types/react-dom": "^18.2.24", - "axios": "^1.6.8", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "@types/node": "^16.18.119", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "apexcharts": "^4.1.0", + "autoprefixer": "^10.4.20", + "classnames": "^2.5.1", + "clsx": "^2.1.1", + "flatpickr": "^4.6.13", + "lucide-react": "^0.477.0", + "motion": "^12.4.10", + "postcss": "^8.4.49", + "react": "^18.3.1", + "react-apexcharts": "^1.6.0", + "react-dnd": "^16.0.1", + "react-dnd-html5-backend": "^16.0.1", + "react-dom": "^18.3.1", + "react-dropzone": "^14.3.5", + "react-flatpickr": "^3.10.13", "react-helmet": "^6.1.0", + "react-helmet-async": "^2.0.5", + "react-router": "^7.0.1", "react-scripts": "5.0.1", + "react-simple-maps": "^3.0.0", + "swiper": "^11.1.15", + "tailwind-merge": "^2.6.0", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, @@ -49,10 +68,7 @@ ] }, "devDependencies": { - "@types/react-helmet": "^6.1.11", - "eslint": "^8.57.0", - "eslint-config-react-app": "^7.0.1", - "jest-editor-support": "^31.1.2", - "tailwindcss": "^3.4.13" + "@types/react-flatpickr": "^3.8.11", + "tailwindcss": "^3.4.15" } } diff --git a/geradoresfe/public/favicon.ico b/geradoresfe/public/favicon.ico deleted file mode 100644 index a11777cc471a4344702741ab1c8a588998b1311a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3870 zcma);c{J4h9>;%nil|2-o+rCuEF-(I%-F}ijC~o(k~HKAkr0)!FCj~d>`RtpD?8b; zXOC1OD!V*IsqUwzbMF1)-gEDD=A573Z-&G7^LoAC9|WO7Xc0Cx1g^Zu0u_SjAPB3vGa^W|sj)80f#V0@M_CAZTIO(t--xg= z!sii`1giyH7EKL_+Wi0ab<)&E_0KD!3Rp2^HNB*K2@PHCs4PWSA32*-^7d{9nH2_E zmC{C*N*)(vEF1_aMamw2A{ZH5aIDqiabnFdJ|y0%aS|64E$`s2ccV~3lR!u<){eS` z#^Mx6o(iP1Ix%4dv`t@!&Za-K@mTm#vadc{0aWDV*_%EiGK7qMC_(`exc>-$Gb9~W!w_^{*pYRm~G zBN{nA;cm^w$VWg1O^^<6vY`1XCD|s_zv*g*5&V#wv&s#h$xlUilPe4U@I&UXZbL z0)%9Uj&@yd03n;!7do+bfixH^FeZ-Ema}s;DQX2gY+7g0s(9;`8GyvPY1*vxiF&|w z>!vA~GA<~JUqH}d;DfBSi^IT*#lrzXl$fNpq0_T1tA+`A$1?(gLb?e#0>UELvljtQ zK+*74m0jn&)5yk8mLBv;=@}c{t0ztT<v;Avck$S6D`Z)^c0(jiwKhQsn|LDRY&w(Fmi91I7H6S;b0XM{e zXp0~(T@k_r-!jkLwd1_Vre^v$G4|kh4}=Gi?$AaJ)3I+^m|Zyj#*?Kp@w(lQdJZf4 z#|IJW5z+S^e9@(6hW6N~{pj8|NO*>1)E=%?nNUAkmv~OY&ZV;m-%?pQ_11)hAr0oAwILrlsGawpxx4D43J&K=n+p3WLnlDsQ$b(9+4 z?mO^hmV^F8MV{4Lx>(Q=aHhQ1){0d*(e&s%G=i5rq3;t{JC zmgbn5Nkl)t@fPH$v;af26lyhH!k+#}_&aBK4baYPbZy$5aFx4}ka&qxl z$=Rh$W;U)>-=S-0=?7FH9dUAd2(q#4TCAHky!$^~;Dz^j|8_wuKc*YzfdAht@Q&ror?91Dm!N03=4=O!a)I*0q~p0g$Fm$pmr$ zb;wD;STDIi$@M%y1>p&_>%?UP($15gou_ue1u0!4(%81;qcIW8NyxFEvXpiJ|H4wz z*mFT(qVx1FKufG11hByuX%lPk4t#WZ{>8ka2efjY`~;AL6vWyQKpJun2nRiZYDij$ zP>4jQXPaP$UC$yIVgGa)jDV;F0l^n(V=HMRB5)20V7&r$jmk{UUIe zVjKroK}JAbD>B`2cwNQ&GDLx8{pg`7hbA~grk|W6LgiZ`8y`{Iq0i>t!3p2}MS6S+ zO_ruKyAElt)rdS>CtF7j{&6rP-#c=7evGMt7B6`7HG|-(WL`bDUAjyn+k$mx$CH;q2Dz4x;cPP$hW=`pFfLO)!jaCL@V2+F)So3}vg|%O*^T1j>C2lx zsURO-zIJC$^$g2byVbRIo^w>UxK}74^TqUiRR#7s_X$e)$6iYG1(PcW7un-va-S&u zHk9-6Zn&>T==A)lM^D~bk{&rFzCi35>UR!ZjQkdSiNX*-;l4z9j*7|q`TBl~Au`5& z+c)*8?#-tgUR$Zd%Q3bs96w6k7q@#tUn`5rj+r@_sAVVLqco|6O{ILX&U-&-cbVa3 zY?ngHR@%l{;`ri%H*0EhBWrGjv!LE4db?HEWb5mu*t@{kv|XwK8?npOshmzf=vZA@ zVSN9sL~!sn?r(AK)Q7Jk2(|M67Uy3I{eRy z_l&Y@A>;vjkWN5I2xvFFTLX0i+`{qz7C_@bo`ZUzDugfq4+>a3?1v%)O+YTd6@Ul7 zAfLfm=nhZ`)P~&v90$&UcF+yXm9sq!qCx3^9gzIcO|Y(js^Fj)Rvq>nQAHI92ap=P z10A4@prk+AGWCb`2)dQYFuR$|H6iDE8p}9a?#nV2}LBCoCf(Xi2@szia7#gY>b|l!-U`c}@ zLdhvQjc!BdLJvYvzzzngnw51yRYCqh4}$oRCy-z|v3Hc*d|?^Wj=l~18*E~*cR_kU z{XsxM1i{V*4GujHQ3DBpl2w4FgFR48Nma@HPgnyKoIEY-MqmMeY=I<%oG~l!f<+FN z1ZY^;10j4M4#HYXP zw5eJpA_y(>uLQ~OucgxDLuf}fVs272FaMxhn4xnDGIyLXnw>Xsd^J8XhcWIwIoQ9} z%FoSJTAGW(SRGwJwb=@pY7r$uQRK3Zd~XbxU)ts!4XsJrCycrWSI?e!IqwqIR8+Jh zlRjZ`UO1I!BtJR_2~7AbkbSm%XQqxEPkz6BTGWx8e}nQ=w7bZ|eVP4?*Tb!$(R)iC z9)&%bS*u(lXqzitAN)Oo=&Ytn>%Hzjc<5liuPi>zC_nw;Z0AE3Y$Jao_Q90R-gl~5 z_xAb2J%eArrC1CN4G$}-zVvCqF1;H;abAu6G*+PDHSYFx@Tdbfox*uEd3}BUyYY-l zTfEsOqsi#f9^FoLO;ChK<554qkri&Av~SIM*{fEYRE?vH7pTAOmu2pz3X?Wn*!ROX ztd54huAk&mFBemMooL33RV-*1f0Q3_(7hl$<#*|WF9P!;r;4_+X~k~uKEqdzZ$5Al zV63XN@)j$FN#cCD;ek1R#l zv%pGrhB~KWgoCj%GT?%{@@o(AJGt*PG#l3i>lhmb_twKH^EYvacVY-6bsCl5*^~L0 zonm@lk2UvvTKr2RS%}T>^~EYqdL1q4nD%0n&Xqr^cK^`J5W;lRRB^R-O8b&HENO||mo0xaD+S=I8RTlIfVgqN@SXDr2&-)we--K7w= zJVU8?Z+7k9dy;s;^gDkQa`0nz6N{T?(A&Iz)2!DEecLyRa&FI!id#5Z7B*O2=PsR0 zEvc|8{NS^)!d)MDX(97Xw}m&kEO@5jqRaDZ!+%`wYOI<23q|&js`&o4xvjP7D_xv@ z5hEwpsp{HezI9!~6O{~)lLR@oF7?J7i>1|5a~UuoN=q&6N}EJPV_GD`&M*v8Y`^2j zKII*d_@Fi$+i*YEW+Hbzn{iQk~yP z>7N{S4)r*!NwQ`(qcN#8SRQsNK6>{)X12nbF`*7#ecO7I)Q$uZsV+xS4E7aUn+U(K baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/geradoresfe/public/index.html b/geradoresfe/public/index.html index aa069f2..7d64e7e 100644 --- a/geradoresfe/public/index.html +++ b/geradoresfe/public/index.html @@ -2,9 +2,8 @@ - + - - React App - +
*/} +
+
+ +
+ +
+
+ + Customers + +

+ 3,782 +

+
+ + + 11.01% + +
+
+ {/* */} + + {/* */} +
+
+ +
+
+
+ + Orders + +

+ 5,359 +

+
+ + + + 9.05% + +
+
+ {/* */} + + ); +} diff --git a/geradoresfe/src/components/ecommerce/MonthlySalesChart.tsx b/geradoresfe/src/components/ecommerce/MonthlySalesChart.tsx new file mode 100644 index 0000000..b8b442e --- /dev/null +++ b/geradoresfe/src/components/ecommerce/MonthlySalesChart.tsx @@ -0,0 +1,142 @@ +import Chart from "react-apexcharts"; +import { ApexOptions } from "apexcharts"; +import { MoreDotIcon } from "../../icons"; +import { Dropdown } from "../ui/dropdown/Dropdown"; +import { DropdownItem } from "../ui/dropdown/DropdownItem"; +import { useState } from "react"; + +export default function MonthlySalesChart() { + const options: ApexOptions = { + colors: ["#465fff"], + chart: { + fontFamily: "Outfit, sans-serif", + type: "bar", + height: 180, + toolbar: { + show: false, + }, + }, + plotOptions: { + bar: { + horizontal: false, + columnWidth: "39%", + borderRadius: 5, + borderRadiusApplication: "end", + }, + }, + dataLabels: { + enabled: false, + }, + stroke: { + show: true, + width: 4, + colors: ["transparent"], + }, + xaxis: { + categories: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + }, + legend: { + show: true, + position: "top", + horizontalAlign: "left", + fontFamily: "Outfit", + }, + yaxis: { + title: { + text: undefined, + }, + }, + grid: { + yaxis: { + lines: { + show: true, + }, + }, + }, + fill: { + opacity: 1, + }, + + tooltip: { + x: { + show: false, + }, + y: { + formatter: (val: number) => `${val}`, + }, + }, + }; + const series = [ + { + name: "Sales", + data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112], + }, + ]; + const [isOpen, setIsOpen] = useState(false); + + function toggleDropdown() { + setIsOpen(!isOpen); + } + + function closeDropdown() { + setIsOpen(false); + } + + return ( +
+
+

+ Monthly Sales +

+
+ + + + View More + + + Delete + + +
+
+ +
+
+ +
+
+
+ ); +} diff --git a/geradoresfe/src/components/ecommerce/MonthlyTarget.tsx b/geradoresfe/src/components/ecommerce/MonthlyTarget.tsx new file mode 100644 index 0000000..6f544bb --- /dev/null +++ b/geradoresfe/src/components/ecommerce/MonthlyTarget.tsx @@ -0,0 +1,198 @@ +import Chart from "react-apexcharts"; +import { ApexOptions } from "apexcharts"; +import { useState } from "react"; +import { MoreDotIcon } from "../../icons"; +import { Dropdown } from "../ui/dropdown/Dropdown"; +import { DropdownItem } from "../ui/dropdown/DropdownItem"; + +export default function MonthlyTarget() { + const series = [75.55]; + const options: ApexOptions = { + colors: ["#465FFF"], + chart: { + fontFamily: "Outfit, sans-serif", + type: "radialBar", + height: 330, + sparkline: { + enabled: true, + }, + }, + plotOptions: { + radialBar: { + startAngle: -85, + endAngle: 85, + hollow: { + size: "80%", + }, + track: { + background: "#E4E7EC", + strokeWidth: "100%", + margin: 5, // margin is in pixels + }, + dataLabels: { + name: { + show: false, + }, + value: { + fontSize: "36px", + fontWeight: "600", + offsetY: -40, + color: "#1D2939", + formatter: function (val) { + return val + "%"; + }, + }, + }, + }, + }, + fill: { + type: "solid", + colors: ["#465FFF"], + }, + stroke: { + lineCap: "round", + }, + labels: ["Progress"], + }; + const [isOpen, setIsOpen] = useState(false); + + function toggleDropdown() { + setIsOpen(!isOpen); + } + + function closeDropdown() { + setIsOpen(false); + } + return ( +
+
+
+
+

+ Monthly Target +

+

+ Target you’ve set for each month +

+
+
+ + + + View More + + + Delete + + +
+
+
+
+ +
+ + + +10% + +
+

+ You earn $3287 today, it's higher than last month. Keep up your good + work! +

+
+ +
+
+

+ Target +

+

+ $20K + + + +

+
+ +
+ +
+

+ Revenue +

+

+ $20K + + + +

+
+ +
+ +
+

+ Today +

+

+ $20K + + + +

+
+
+
+ ); +} diff --git a/geradoresfe/src/components/ecommerce/RecentOrders.tsx b/geradoresfe/src/components/ecommerce/RecentOrders.tsx new file mode 100644 index 0000000..903d8f5 --- /dev/null +++ b/geradoresfe/src/components/ecommerce/RecentOrders.tsx @@ -0,0 +1,208 @@ +import { + Table, + TableBody, + TableCell, + TableHeader, + TableRow, +} from "../ui/table"; +import Badge from "../ui/badge/Badge"; + +// Define the TypeScript interface for the table rows +interface Product { + id: number; // Unique identifier for each product + name: string; // Product name + variants: string; // Number of variants (e.g., "1 Variant", "2 Variants") + category: string; // Category of the product + price: string; // Price of the product (as a string with currency symbol) + // status: string; // Status of the product + image: string; // URL or path to the product image + status: "Delivered" | "Pending" | "Canceled"; // Status of the product +} + +// Define the table data using the interface +const tableData: Product[] = [ + { + id: 1, + name: "MacBook Pro 13â€", + variants: "2 Variants", + category: "Laptop", + price: "$2399.00", + status: "Delivered", + image: "/images/product/product-01.jpg", // Replace with actual image URL + }, + { + id: 2, + name: "Apple Watch Ultra", + variants: "1 Variant", + category: "Watch", + price: "$879.00", + status: "Pending", + image: "/images/product/product-02.jpg", // Replace with actual image URL + }, + { + id: 3, + name: "iPhone 15 Pro Max", + variants: "2 Variants", + category: "SmartPhone", + price: "$1869.00", + status: "Delivered", + image: "/images/product/product-03.jpg", // Replace with actual image URL + }, + { + id: 4, + name: "iPad Pro 3rd Gen", + variants: "2 Variants", + category: "Electronics", + price: "$1699.00", + status: "Canceled", + image: "/images/product/product-04.jpg", // Replace with actual image URL + }, + { + id: 5, + name: "AirPods Pro 2nd Gen", + variants: "1 Variant", + category: "Accessories", + price: "$240.00", + status: "Delivered", + image: "/images/product/product-05.jpg", // Replace with actual image URL + }, +]; + +export default function RecentOrders() { + return ( +
+
+
+

+ Recent Orders +

+
+ +
+ + +
+
+
+ + {/* Table Header */} + + + + Products + + + Category + + + Price + + + Status + + + + + {/* Table Body */} + + + {tableData.map((product) => ( + + +
+
+ {product.name} +
+
+

+ {product.name} +

+ + {product.variants} + +
+
+ + + {product.price} + + + {product.category} + + + + {product.status} + + + + ))} + +
+
+
+ ); +} diff --git a/geradoresfe/src/components/ecommerce/StatisticsChart.tsx b/geradoresfe/src/components/ecommerce/StatisticsChart.tsx new file mode 100644 index 0000000..8376e61 --- /dev/null +++ b/geradoresfe/src/components/ecommerce/StatisticsChart.tsx @@ -0,0 +1,138 @@ +import React from "react"; +import Chart from "react-apexcharts"; +import { ApexOptions } from "apexcharts"; +import ChartTab from "../common/ChartTab"; + +export default function StatisticsChart() { + const options: ApexOptions = { + legend: { + show: false, // Hide legend + position: "top", + horizontalAlign: "left", + }, + colors: ["#465FFF", "#9CB9FF"], // Define line colors + chart: { + fontFamily: "Outfit, sans-serif", + height: 310, + type: "line", // Set the chart type to 'line' + toolbar: { + show: false, // Hide chart toolbar + }, + }, + stroke: { + curve: "straight", // Define the line style (straight, smooth, or step) + width: [2, 2], // Line width for each dataset + }, + + fill: { + type: "gradient", + gradient: { + opacityFrom: 0.55, + opacityTo: 0, + }, + }, + markers: { + size: 0, // Size of the marker points + strokeColors: "#fff", // Marker border color + strokeWidth: 2, + hover: { + size: 6, // Marker size on hover + }, + }, + grid: { + xaxis: { + lines: { + show: false, // Hide grid lines on x-axis + }, + }, + yaxis: { + lines: { + show: true, // Show grid lines on y-axis + }, + }, + }, + dataLabels: { + enabled: false, // Disable data labels + }, + tooltip: { + enabled: true, // Enable tooltip + x: { + format: "dd MMM yyyy", // Format for x-axis tooltip + }, + }, + xaxis: { + type: "category", // Category-based x-axis + categories: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + axisBorder: { + show: false, // Hide x-axis border + }, + axisTicks: { + show: false, // Hide x-axis ticks + }, + tooltip: { + enabled: false, // Disable tooltip for x-axis points + }, + }, + yaxis: { + labels: { + style: { + fontSize: "12px", // Adjust font size for y-axis labels + colors: ["#6B7280"], // Color of the labels + }, + }, + title: { + text: "", // Remove y-axis title + style: { + fontSize: "0px", + }, + }, + }, + }; + + const series = [ + { + name: "Sales", + data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235], + }, + { + name: "Revenue", + data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140], + }, + ]; + return ( +
+
+
+

+ Statistics +

+

+ Target you’ve set for each month +

+
+
+ +
+
+ +
+
+ +
+
+
+ ); +} diff --git a/geradoresfe/src/components/form/Form.tsx b/geradoresfe/src/components/form/Form.tsx new file mode 100644 index 0000000..0530a6a --- /dev/null +++ b/geradoresfe/src/components/form/Form.tsx @@ -0,0 +1,23 @@ +import React, { FC, ReactNode, FormEvent } from "react"; + +interface FormProps { + onSubmit: (event: FormEvent) => void; + children: ReactNode; + className?: string; +} + +const Form: FC = ({ onSubmit, children, className }) => { + return ( +
{ + event.preventDefault(); // Prevent default form submission + onSubmit(event); + }} + className={` ${className}`} // Default spacing between form fields + > + {children} +
+ ); +}; + +export default Form; diff --git a/geradoresfe/src/components/form/Label.tsx b/geradoresfe/src/components/form/Label.tsx new file mode 100644 index 0000000..8b0628b --- /dev/null +++ b/geradoresfe/src/components/form/Label.tsx @@ -0,0 +1,27 @@ +import React, { FC, ReactNode } from "react"; +import { twMerge } from "tailwind-merge"; + +interface LabelProps { + htmlFor?: string; + children: ReactNode; + className?: string; +} + +const Label: FC = ({ htmlFor, children, className }) => { + return ( + + ); +}; + +export default Label; diff --git a/geradoresfe/src/components/form/MultiSelect.tsx b/geradoresfe/src/components/form/MultiSelect.tsx new file mode 100644 index 0000000..d25f7d1 --- /dev/null +++ b/geradoresfe/src/components/form/MultiSelect.tsx @@ -0,0 +1,166 @@ +import React, { useState } from "react"; + +interface Option { + value: string; + text: string; + selected: boolean; +} + +interface MultiSelectProps { + label: string; + options: Option[]; + defaultSelected?: string[]; + onChange?: (selected: string[]) => void; + disabled?: boolean; +} + +const MultiSelect: React.FC = ({ + label, + options, + defaultSelected = [], + onChange, + disabled = false, +}) => { + const [selectedOptions, setSelectedOptions] = + useState(defaultSelected); + const [isOpen, setIsOpen] = useState(false); + + const toggleDropdown = () => { + if (disabled) return; + setIsOpen((prev) => !prev); + }; + + const handleSelect = (optionValue: string) => { + const newSelectedOptions = selectedOptions.includes(optionValue) + ? selectedOptions.filter((value) => value !== optionValue) + : [...selectedOptions, optionValue]; + + setSelectedOptions(newSelectedOptions); + if (onChange) onChange(newSelectedOptions); + }; + + const removeOption = (index: number, value: string) => { + const newSelectedOptions = selectedOptions.filter((opt) => opt !== value); + setSelectedOptions(newSelectedOptions); + if (onChange) onChange(newSelectedOptions); + }; + + const selectedValuesText = selectedOptions.map( + (value) => options.find((option) => option.value === value)?.text || "" + ); + + return ( +
+ + +
+
+
+
+
+ {selectedValuesText.length > 0 ? ( + selectedValuesText.map((text, index) => ( +
+ {text} +
+
+ removeOption(index, selectedOptions[index]) + } + className="pl-2 text-gray-500 cursor-pointer group-hover:text-gray-400 dark:text-gray-400" + > + + + +
+
+
+ )) + ) : ( + + )} +
+
+ +
+
+
+ + {isOpen && ( +
e.stopPropagation()} + > +
+ {options.map((option, index) => ( +
+
handleSelect(option.value)} + > +
+
+ {option.text} +
+
+
+
+ ))} +
+
+ )} +
+
+
+ ); +}; + +export default MultiSelect; diff --git a/geradoresfe/src/components/form/Select.tsx b/geradoresfe/src/components/form/Select.tsx new file mode 100644 index 0000000..e2f3c6a --- /dev/null +++ b/geradoresfe/src/components/form/Select.tsx @@ -0,0 +1,64 @@ +import React, { useState } from "react"; + +interface Option { + value: string; + label: string; +} + +interface SelectProps { + options: Option[]; + placeholder?: string; + onChange: (value: string) => void; + className?: string; + defaultValue?: string; +} + +const Select: React.FC = ({ + options, + placeholder = "Select an option", + onChange, + className = "", + defaultValue = "", +}) => { + // Manage the selected value + const [selectedValue, setSelectedValue] = useState(defaultValue); + + const handleChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setSelectedValue(value); + onChange(value); // Trigger parent handler + }; + + return ( + + ); +}; + +export default Select; diff --git a/geradoresfe/src/components/form/form-elements/CheckboxComponents.tsx b/geradoresfe/src/components/form/form-elements/CheckboxComponents.tsx new file mode 100644 index 0000000..213416e --- /dev/null +++ b/geradoresfe/src/components/form/form-elements/CheckboxComponents.tsx @@ -0,0 +1,36 @@ +import React, { useState } from "react"; +import ComponentCard from "../../common/ComponentCard"; +import Checkbox from "../input/Checkbox"; + +export default function CheckboxComponents() { + const [isChecked, setIsChecked] = useState(false); + const [isCheckedTwo, setIsCheckedTwo] = useState(true); + const [isCheckedDisabled, setIsCheckedDisabled] = useState(true); + return ( + +
+
+ + + Default + +
+
+ +
+
+ +
+
+ + ); +} diff --git a/geradoresfe/src/components/form/form-elements/DefaultInputs.tsx b/geradoresfe/src/components/form/form-elements/DefaultInputs.tsx new file mode 100644 index 0000000..504325c --- /dev/null +++ b/geradoresfe/src/components/form/form-elements/DefaultInputs.tsx @@ -0,0 +1,114 @@ +import React, { useState } from "react"; +import ComponentCard from "../../common/ComponentCard"; +import Label from "../Label"; +import Input from "../input/InputField"; +import Select from "../Select"; +import { CalenderIcon, EyeCloseIcon, EyeIcon, TimeIcon } from "../../../icons"; + +export default function DefaultInputs() { + const [showPassword, setShowPassword] = useState(false); + const options = [ + { value: "marketing", label: "Marketing" }, + { value: "template", label: "Template" }, + { value: "development", label: "Development" }, + ]; + const handleSelectChange = (value: string) => { + console.log("Selected value:", value); + }; + return ( + +
+
+ + +
+
+ + +
+
+ + + +
+
+
+ +
+ console.log(e.target.value)} + /> + + + +
+
+
+ +
+ console.log(e.target.value)} + /> + + + +
+
+
+ +
+ + + + + + + + +
+
+ + + ); +} diff --git a/geradoresfe/src/components/form/form-elements/DropZone.tsx b/geradoresfe/src/components/form/form-elements/DropZone.tsx new file mode 100644 index 0000000..064e7f5 --- /dev/null +++ b/geradoresfe/src/components/form/form-elements/DropZone.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import ComponentCard from "../../common/ComponentCard"; +import { useDropzone } from "react-dropzone"; +// import Dropzone from "react-dropzone"; + +const DropzoneComponent: React.FC = () => { + const onDrop = (acceptedFiles: File[]) => { + console.log("Files dropped:", acceptedFiles); + // Handle file uploads here + }; + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + onDrop, + accept: { + "image/png": [], + "image/jpeg": [], + "image/webp": [], + "image/svg+xml": [], + }, + }); + return ( + +
+
+ {/* Hidden Input */} + + +
+ {/* Icon Container */} +
+
+ + + +
+
+ + {/* Text Content */} +

+ {isDragActive ? "Drop Files Here" : "Drag & Drop Files Here"} +

+ + + Drag and drop your PNG, JPG, WebP, SVG images here or browse + + + + Browse File + +
+
+
+ + ); +}; + +export default DropzoneComponent; diff --git a/geradoresfe/src/components/form/form-elements/FileInputExample.tsx b/geradoresfe/src/components/form/form-elements/FileInputExample.tsx new file mode 100644 index 0000000..e2a977a --- /dev/null +++ b/geradoresfe/src/components/form/form-elements/FileInputExample.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import ComponentCard from "../../common/ComponentCard"; +import FileInput from "../input/FileInput"; +import Label from "../Label"; + +export default function FileInputExample() { + const handleFileChange = (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + console.log("Selected file:", file.name); + } + }; + + return ( + +
+ + +
+ + ); +} diff --git a/geradoresfe/src/components/form/form-elements/InputGroup.tsx b/geradoresfe/src/components/form/form-elements/InputGroup.tsx new file mode 100644 index 0000000..2e7208e --- /dev/null +++ b/geradoresfe/src/components/form/form-elements/InputGroup.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import ComponentCard from "../../common/ComponentCard"; +import Label from "../Label"; +import Input from "../input/InputField"; +import { EnvelopeIcon } from "../../../icons"; +import PhoneInput from "../group-input/PhoneInput"; + +export default function InputGroup() { + const countries = [ + { code: "US", label: "+1" }, + { code: "GB", label: "+44" }, + { code: "CA", label: "+1" }, + { code: "AU", label: "+61" }, + ]; + const handlePhoneNumberChange = (phoneNumber: string) => { + console.log("Updated phone number:", phoneNumber); + }; + return ( + +
+
+ +
+ + + + +
+
+
+ + +
{" "} +
+ + +
+
+ + ); +} diff --git a/geradoresfe/src/components/form/form-elements/InputStates.tsx b/geradoresfe/src/components/form/form-elements/InputStates.tsx new file mode 100644 index 0000000..6d93d62 --- /dev/null +++ b/geradoresfe/src/components/form/form-elements/InputStates.tsx @@ -0,0 +1,69 @@ +import React, { useState } from "react"; +import ComponentCard from "../../common/ComponentCard"; +import Input from "../input/InputField"; +import Label from "../Label"; + +export default function InputStates() { + const [email, setEmail] = useState(""); + const [error, setError] = useState(false); + + // Simulate a validation check + const validateEmail = (value: string) => { + const isValidEmail = + /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value); + setError(!isValidEmail); + return isValidEmail; + }; + + const handleEmailChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setEmail(value); + validateEmail(value); + }; + return ( + +
+ {/* Error Input */} +
+ + +
+ + {/* Success Input */} +
+ + +
+ + {/* Disabled Input */} +
+ + +
+
+ + ); +} diff --git a/geradoresfe/src/components/form/form-elements/RadioButtons.tsx b/geradoresfe/src/components/form/form-elements/RadioButtons.tsx new file mode 100644 index 0000000..0ad1c21 --- /dev/null +++ b/geradoresfe/src/components/form/form-elements/RadioButtons.tsx @@ -0,0 +1,42 @@ +import React, { useState } from "react"; +import ComponentCard from "../../common/ComponentCard"; +import Radio from "../input/Radio"; + +export default function RadioButtons() { + const [selectedValue, setSelectedValue] = useState("option2"); + + const handleRadioChange = (value: string) => { + setSelectedValue(value); + }; + return ( + +
+ + + +
+ + ); +} diff --git a/geradoresfe/src/components/form/form-elements/SelectInputs.tsx b/geradoresfe/src/components/form/form-elements/SelectInputs.tsx new file mode 100644 index 0000000..95989ed --- /dev/null +++ b/geradoresfe/src/components/form/form-elements/SelectInputs.tsx @@ -0,0 +1,52 @@ +import React, { useState } from "react"; +import ComponentCard from "../../common/ComponentCard"; +import Label from "../Label"; +import Select from "../Select"; +import MultiSelect from "../MultiSelect"; + +export default function SelectInputs() { + const options = [ + { value: "marketing", label: "Marketing" }, + { value: "template", label: "Template" }, + { value: "development", label: "Development" }, + ]; + const handleSelectChange = (value: string) => { + console.log("Selected value:", value); + }; + const [selectedValues, setSelectedValues] = useState([]); + + const multiOptions = [ + { value: "1", text: "Option 1", selected: false }, + { value: "2", text: "Option 2", selected: false }, + { value: "3", text: "Option 3", selected: false }, + { value: "4", text: "Option 4", selected: false }, + { value: "5", text: "Option 5", selected: false }, + ]; + return ( + +
+
+ +