commit 0dafb7a38c16c8f7542aa053221c01d2f1a78b63 Author: Albatroz Jeremias Date: Thu May 8 23:58:06 2025 +0100 feat: reuse admin diff --git a/README.md b/README.md new file mode 100644 index 0000000..e4da6d6 --- /dev/null +++ b/README.md @@ -0,0 +1,85 @@ +# NextAdmin - Next.js Admin Dashboard Template and Components + +**NextAdmin** is a Free, open-source Next.js admin dashboard toolkit featuring 200+ UI components and templates that come with pre-built elements, components, pages, high-quality design, integrations, and much more to help you create powerful admin dashboards with ease. + + +[![nextjs admin template](https://cdn.pimjo.com/nextadmin-2.png)](https://nextadmin.co/) + + +**NextAdmin** provides you with a diverse set of dashboard UI components, elements, examples and pages necessary for creating top-notch admin panels or dashboards with **powerful** features and integrations. Whether you are working on a complex web application or a basic website, **NextAdmin** has got you covered. + +### [✨ Visit Website](https://nextadmin.co/) +### [🚀 Live Demo](https://demo.nextadmin.co/) +### [📖 Docs](https://docs.nextadmin.co/) + +By leveraging the latest features of **Next.js 14** and key functionalities like **server-side rendering (SSR)**, **static site generation (SSG)**, and seamless **API route integration**, **NextAdmin** ensures optimal performance. With the added benefits of **React 18 advancements** and **TypeScript** reliability, **NextAdmin** is the ultimate choice to kickstart your **Next.js** project efficiently. + +## Installation + +1. Download/fork/clone the repo and Once you're in the correct directory, it's time to install all the necessary dependencies. You can do this by typing the following command: + +``` +npm install +``` +If you're using **Yarn** as your package manager, the command will be: + +``` +yarn install +``` + +2. Okay, you're almost there. Now all you need to do is start the development server. If you're using **npm**, the command is: + +``` +npm run dev +``` +And if you're using **Yarn**, it's: + +``` +yarn dev +``` + +And voila! You're now ready to start developing. **Happy coding**! + +## Highlighted Features +**200+ Next.js Dashboard Ul Components and Templates** - includes a variety of prebuilt **Ul elements, components, pages, and examples** crafted with a high-quality design. +Additionally, features seamless **essential integrations and extensive functionalities**. + +- A library of over **200** professional dashboard UI components and elements. +- Five distinctive dashboard variations, catering to diverse use-cases. +- A comprehensive set of essential dashboard and admin pages. +- More than **45** **Next.js** files, ready for use. +- Styling facilitated by **Tailwind CSS** files. +- A design that resonates premium quality and high aesthetics. +- A handy UI kit with assets. +- Over ten web apps complete with examples. +- Support for both **dark mode** and **light mode**. +- Essential integrations including - Authentication (**NextAuth**), Database (**Postgres** with **Prisma**), and Search (**Algolia**). +- Detailed and user-friendly documentation. +- Customizable plugins and add-ons. +- **TypeScript** compatibility. +- Plus, much more! + +All these features and more make **NextAdmin** a robust, well-rounded solution for all your dashboard development needs. + +## Update Logs + +### Version 1.2.1 - [Mar 20, 2025] +- Fix Peer dependency issues and NextConfig warning. +- Updated apexcharts and react-apexhcarts to the latest version. + +### Version 1.2.0 - Major Upgrade and UI Improvements - [Jan 27, 2025] + +- Upgraded to Next.js v15 and updated dependencies +- API integration with loading skeleton for tables and charts. +- Improved code structure for better readability. +- Rebuilt components like dropdown, sidebar, and all ui-elements using accessibility practices. +- Using search-params to store dropdown selection and refetch data. +- Semantic markups, better separation of concerns and more. + +### Version 1.1.0 +- Updated Dependencies +- Removed Unused Integrations +- Optimized App + +### Version 1.0 +- Initial Release - [May 13, 2024] diff --git a/jsvectormap.d.ts b/jsvectormap.d.ts new file mode 100644 index 0000000..740f3c9 --- /dev/null +++ b/jsvectormap.d.ts @@ -0,0 +1,4 @@ +declare module 'jsvectormap' { + const jsVectorMap: any; + export default jsVectorMap; +} diff --git a/next.config.mjs b/next.config.mjs new file mode 100644 index 0000000..2b14958 --- /dev/null +++ b/next.config.mjs @@ -0,0 +1,29 @@ +/** @type {import("next").NextConfig} */ +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "cdn.sanity.io", + port: "" + }, + { + protocol: "https", + hostname: "lh3.googleusercontent.com", + port: "" + }, + { + protocol: "https", + hostname: "avatars.githubusercontent.com", + port: "" + }, + { + protocol: "https", + hostname: "pub-b7fd9c30cdbf439183b75041f5f71b92.r2.dev", + port: "" + } + ] + } +}; + +export default nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..10e3a03 --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "free-nextadmin-nextjs", + "version": "1.2.1", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "apexcharts": "^4.5.0", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "dayjs": "^1.11.13", + "flatpickr": "^4.6.13", + "jsvectormap": "^1.6.0", + "next": "15.1.6", + "next-themes": "^0.4.4", + "nextjs-toploader": "^3.7.15", + "react": "19.0.0", + "react-apexcharts": "^1.7.0", + "react-dom": "19.0.0", + "tailwind-merge": "^2.6.0" + }, + "devDependencies": { + "@types/node": "^22", + "@types/react": "19.0.8", + "@types/react-dom": "19.0.3", + "autoprefixer": "^10.4.20", + "eslint": "^9", + "eslint-config-next": "15.1.6", + "postcss": "^8", + "prettier": "^3.4.2", + "prettier-plugin-tailwindcss": "^0.6.11", + "tailwindcss": "^3.4.16", + "typescript": "^5" + } +} \ No newline at end of file diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..12a703d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/public/images/best-value-banner.png b/public/images/best-value-banner.png new file mode 100644 index 0000000..d39b518 Binary files /dev/null and b/public/images/best-value-banner.png differ diff --git a/public/images/brand/brand-01.svg b/public/images/brand/brand-01.svg new file mode 100644 index 0000000..73bb7fc --- /dev/null +++ b/public/images/brand/brand-01.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/images/brand/brand-02.svg b/public/images/brand/brand-02.svg new file mode 100644 index 0000000..2533616 --- /dev/null +++ b/public/images/brand/brand-02.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/brand/brand-03.svg b/public/images/brand/brand-03.svg new file mode 100644 index 0000000..09fee07 --- /dev/null +++ b/public/images/brand/brand-03.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/brand/brand-04.svg b/public/images/brand/brand-04.svg new file mode 100644 index 0000000..deae9dd --- /dev/null +++ b/public/images/brand/brand-04.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/brand/brand-05.svg b/public/images/brand/brand-05.svg new file mode 100644 index 0000000..bb042c3 --- /dev/null +++ b/public/images/brand/brand-05.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/brand/brand-06.svg b/public/images/brand/brand-06.svg new file mode 100644 index 0000000..7d22b38 --- /dev/null +++ b/public/images/brand/brand-06.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/brand/brand-07.svg b/public/images/brand/brand-07.svg new file mode 100644 index 0000000..6bf429b --- /dev/null +++ b/public/images/brand/brand-07.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/brand/brand-08.svg b/public/images/brand/brand-08.svg new file mode 100644 index 0000000..e99cf53 --- /dev/null +++ b/public/images/brand/brand-08.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/images/brand/brand-09.svg b/public/images/brand/brand-09.svg new file mode 100644 index 0000000..f96e8eb --- /dev/null +++ b/public/images/brand/brand-09.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/brand/brand-10.svg b/public/images/brand/brand-10.svg new file mode 100644 index 0000000..9c2d3c1 --- /dev/null +++ b/public/images/brand/brand-10.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/brand/brand-11.svg b/public/images/brand/brand-11.svg new file mode 100644 index 0000000..55b3c98 --- /dev/null +++ b/public/images/brand/brand-11.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/brand/brand-12.svg b/public/images/brand/brand-12.svg new file mode 100644 index 0000000..30e60f6 --- /dev/null +++ b/public/images/brand/brand-12.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/brand/brand-13.svg b/public/images/brand/brand-13.svg new file mode 100644 index 0000000..65e14b9 --- /dev/null +++ b/public/images/brand/brand-13.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/brand/brand-14.svg b/public/images/brand/brand-14.svg new file mode 100644 index 0000000..05d3468 --- /dev/null +++ b/public/images/brand/brand-14.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/images/brand/brand-15.svg b/public/images/brand/brand-15.svg new file mode 100644 index 0000000..2cb504a --- /dev/null +++ b/public/images/brand/brand-15.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/brand/brand-16.svg b/public/images/brand/brand-16.svg new file mode 100644 index 0000000..805a420 --- /dev/null +++ b/public/images/brand/brand-16.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/images/brand/brand-17.svg b/public/images/brand/brand-17.svg new file mode 100644 index 0000000..71591d1 --- /dev/null +++ b/public/images/brand/brand-17.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/brand/brand-18.svg b/public/images/brand/brand-18.svg new file mode 100644 index 0000000..6a3c525 --- /dev/null +++ b/public/images/brand/brand-18.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/brand/brand-19.svg b/public/images/brand/brand-19.svg new file mode 100644 index 0000000..de6a10d --- /dev/null +++ b/public/images/brand/brand-19.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/images/brand/brand-20.svg b/public/images/brand/brand-20.svg new file mode 100644 index 0000000..6a99a66 --- /dev/null +++ b/public/images/brand/brand-20.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/cards/cards-01.png b/public/images/cards/cards-01.png new file mode 100644 index 0000000..a44433b Binary files /dev/null and b/public/images/cards/cards-01.png differ diff --git a/public/images/cards/cards-02.png b/public/images/cards/cards-02.png new file mode 100644 index 0000000..22910ed Binary files /dev/null and b/public/images/cards/cards-02.png differ diff --git a/public/images/cards/cards-03.png b/public/images/cards/cards-03.png new file mode 100644 index 0000000..f4d50f4 Binary files /dev/null and b/public/images/cards/cards-03.png differ diff --git a/public/images/cards/cards-04.png b/public/images/cards/cards-04.png new file mode 100644 index 0000000..769241f Binary files /dev/null and b/public/images/cards/cards-04.png differ diff --git a/public/images/cards/cards-05.png b/public/images/cards/cards-05.png new file mode 100644 index 0000000..8175db3 Binary files /dev/null and b/public/images/cards/cards-05.png differ diff --git a/public/images/cards/cards-06.png b/public/images/cards/cards-06.png new file mode 100644 index 0000000..3174b57 Binary files /dev/null and b/public/images/cards/cards-06.png differ diff --git a/public/images/carousel/carousel-01.jpg b/public/images/carousel/carousel-01.jpg new file mode 100644 index 0000000..dd5a494 Binary files /dev/null and b/public/images/carousel/carousel-01.jpg differ diff --git a/public/images/carousel/carousel-02.jpg b/public/images/carousel/carousel-02.jpg new file mode 100644 index 0000000..3697c12 Binary files /dev/null and b/public/images/carousel/carousel-02.jpg differ diff --git a/public/images/carousel/carousel-03.jpg b/public/images/carousel/carousel-03.jpg new file mode 100644 index 0000000..43aed94 Binary files /dev/null and b/public/images/carousel/carousel-03.jpg differ diff --git a/public/images/country/country-01.svg b/public/images/country/country-01.svg new file mode 100644 index 0000000..f7847a3 --- /dev/null +++ b/public/images/country/country-01.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/country/country-02.svg b/public/images/country/country-02.svg new file mode 100644 index 0000000..690f684 --- /dev/null +++ b/public/images/country/country-02.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/images/country/country-03.svg b/public/images/country/country-03.svg new file mode 100644 index 0000000..0672951 --- /dev/null +++ b/public/images/country/country-03.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/images/country/country-04.svg b/public/images/country/country-04.svg new file mode 100644 index 0000000..e869372 --- /dev/null +++ b/public/images/country/country-04.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/images/country/country-05.svg b/public/images/country/country-05.svg new file mode 100644 index 0000000..a43ceb6 --- /dev/null +++ b/public/images/country/country-05.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/country/country-06.svg b/public/images/country/country-06.svg new file mode 100644 index 0000000..760807e --- /dev/null +++ b/public/images/country/country-06.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/images/cover/cover-01.png b/public/images/cover/cover-01.png new file mode 100644 index 0000000..68d4f52 Binary files /dev/null and b/public/images/cover/cover-01.png differ diff --git a/public/images/cover/cover-02.jpg b/public/images/cover/cover-02.jpg new file mode 100644 index 0000000..268ef7b Binary files /dev/null and b/public/images/cover/cover-02.jpg differ diff --git a/public/images/cover/cover-03.jpg b/public/images/cover/cover-03.jpg new file mode 100644 index 0000000..b6ae6df Binary files /dev/null and b/public/images/cover/cover-03.jpg differ diff --git a/public/images/cover/cover-04.jpg b/public/images/cover/cover-04.jpg new file mode 100644 index 0000000..f8adbb5 Binary files /dev/null and b/public/images/cover/cover-04.jpg differ diff --git a/public/images/cover/cover-05.jpg b/public/images/cover/cover-05.jpg new file mode 100644 index 0000000..523bc31 Binary files /dev/null and b/public/images/cover/cover-05.jpg differ diff --git a/public/images/favicon.ico b/public/images/favicon.ico new file mode 100644 index 0000000..b4e2503 Binary files /dev/null and b/public/images/favicon.ico differ diff --git a/public/images/grids/grid-01.svg b/public/images/grids/grid-01.svg new file mode 100644 index 0000000..5311cca --- /dev/null +++ b/public/images/grids/grid-01.svg @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/grids/grid-02.svg b/public/images/grids/grid-02.svg new file mode 100644 index 0000000..c2d12cf --- /dev/null +++ b/public/images/grids/grid-02.svg @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icon/icon-arrow-down.svg b/public/images/icon/icon-arrow-down.svg new file mode 100644 index 0000000..1fd6d42 --- /dev/null +++ b/public/images/icon/icon-arrow-down.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/public/images/icon/icon-calendar.svg b/public/images/icon/icon-calendar.svg new file mode 100644 index 0000000..d75d993 --- /dev/null +++ b/public/images/icon/icon-calendar.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/public/images/icon/icon-copy-alt.svg b/public/images/icon/icon-copy-alt.svg new file mode 100644 index 0000000..1f0c770 --- /dev/null +++ b/public/images/icon/icon-copy-alt.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/icon/icon-moon.svg b/public/images/icon/icon-moon.svg new file mode 100644 index 0000000..1ca395d --- /dev/null +++ b/public/images/icon/icon-moon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/icon/icon-sun.svg b/public/images/icon/icon-sun.svg new file mode 100644 index 0000000..4524cde --- /dev/null +++ b/public/images/icon/icon-sun.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/illustration/illustration-01.svg b/public/images/illustration/illustration-01.svg new file mode 100644 index 0000000..2cbd768 --- /dev/null +++ b/public/images/illustration/illustration-01.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/illustration/illustration-02.svg b/public/images/illustration/illustration-02.svg new file mode 100644 index 0000000..b67fcbc --- /dev/null +++ b/public/images/illustration/illustration-02.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/images/illustration/illustration-03.svg b/public/images/illustration/illustration-03.svg new file mode 100644 index 0000000..990a752 --- /dev/null +++ b/public/images/illustration/illustration-03.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/illustration/illustration-04.svg b/public/images/illustration/illustration-04.svg new file mode 100644 index 0000000..fa97126 --- /dev/null +++ b/public/images/illustration/illustration-04.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/logo/logo-dark.svg b/public/images/logo/logo-dark.svg new file mode 100644 index 0000000..fca4e12 --- /dev/null +++ b/public/images/logo/logo-dark.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/images/logo/logo-icon.svg b/public/images/logo/logo-icon.svg new file mode 100644 index 0000000..d9c37fb --- /dev/null +++ b/public/images/logo/logo-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/logo/logo.svg b/public/images/logo/logo.svg new file mode 100644 index 0000000..5e53f7c --- /dev/null +++ b/public/images/logo/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/images/product/product-01.png b/public/images/product/product-01.png new file mode 100644 index 0000000..137e6a9 Binary files /dev/null and b/public/images/product/product-01.png differ diff --git a/public/images/product/product-02.png b/public/images/product/product-02.png new file mode 100644 index 0000000..1505c7c Binary files /dev/null and b/public/images/product/product-02.png differ diff --git a/public/images/product/product-03.png b/public/images/product/product-03.png new file mode 100644 index 0000000..f582289 Binary files /dev/null and b/public/images/product/product-03.png differ diff --git a/public/images/product/product-04.png b/public/images/product/product-04.png new file mode 100644 index 0000000..1548a80 Binary files /dev/null and b/public/images/product/product-04.png differ diff --git a/public/images/product/product-thumb.png b/public/images/product/product-thumb.png new file mode 100644 index 0000000..56965b8 Binary files /dev/null and b/public/images/product/product-thumb.png differ diff --git a/public/images/task/task-01.jpg b/public/images/task/task-01.jpg new file mode 100644 index 0000000..d920dbc Binary files /dev/null and b/public/images/task/task-01.jpg differ diff --git a/public/images/team/team-01.png b/public/images/team/team-01.png new file mode 100644 index 0000000..638e5e3 Binary files /dev/null and b/public/images/team/team-01.png differ diff --git a/public/images/team/team-02.png b/public/images/team/team-02.png new file mode 100644 index 0000000..0293f43 Binary files /dev/null and b/public/images/team/team-02.png differ diff --git a/public/images/team/team-03.png b/public/images/team/team-03.png new file mode 100644 index 0000000..db92fb8 Binary files /dev/null and b/public/images/team/team-03.png differ diff --git a/public/images/team/team-04.png b/public/images/team/team-04.png new file mode 100644 index 0000000..b98cb7c Binary files /dev/null and b/public/images/team/team-04.png differ diff --git a/public/images/team/team-05.png b/public/images/team/team-05.png new file mode 100644 index 0000000..a417c10 Binary files /dev/null and b/public/images/team/team-05.png differ diff --git a/public/images/team/team-06.png b/public/images/team/team-06.png new file mode 100644 index 0000000..eeed8f5 Binary files /dev/null and b/public/images/team/team-06.png differ diff --git a/public/images/team/team-07.png b/public/images/team/team-07.png new file mode 100644 index 0000000..ed3c801 Binary files /dev/null and b/public/images/team/team-07.png differ diff --git a/public/images/team/team-08.png b/public/images/team/team-08.png new file mode 100644 index 0000000..0e5fd5d Binary files /dev/null and b/public/images/team/team-08.png differ diff --git a/public/images/todo/dribble.svg b/public/images/todo/dribble.svg new file mode 100644 index 0000000..b9c3730 --- /dev/null +++ b/public/images/todo/dribble.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/todo/linkdin.svg b/public/images/todo/linkdin.svg new file mode 100644 index 0000000..871d6ca --- /dev/null +++ b/public/images/todo/linkdin.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/todo/uideck.svg b/public/images/todo/uideck.svg new file mode 100644 index 0000000..682f2d2 --- /dev/null +++ b/public/images/todo/uideck.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/user/user-01.png b/public/images/user/user-01.png new file mode 100644 index 0000000..13d6430 Binary files /dev/null and b/public/images/user/user-01.png differ diff --git a/public/images/user/user-02.png b/public/images/user/user-02.png new file mode 100644 index 0000000..bd50c6d Binary files /dev/null and b/public/images/user/user-02.png differ diff --git a/public/images/user/user-03.png b/public/images/user/user-03.png new file mode 100644 index 0000000..3a64de4 Binary files /dev/null and b/public/images/user/user-03.png differ diff --git a/public/images/user/user-04.png b/public/images/user/user-04.png new file mode 100644 index 0000000..85aa905 Binary files /dev/null and b/public/images/user/user-04.png differ diff --git a/public/images/user/user-05.png b/public/images/user/user-05.png new file mode 100644 index 0000000..dc88286 Binary files /dev/null and b/public/images/user/user-05.png differ diff --git a/public/images/user/user-06.png b/public/images/user/user-06.png new file mode 100644 index 0000000..12b9c54 Binary files /dev/null and b/public/images/user/user-06.png differ diff --git a/public/images/user/user-07.png b/public/images/user/user-07.png new file mode 100644 index 0000000..a043a3f Binary files /dev/null and b/public/images/user/user-07.png differ diff --git a/public/images/user/user-08.png b/public/images/user/user-08.png new file mode 100644 index 0000000..92f5c4b Binary files /dev/null and b/public/images/user/user-08.png differ diff --git a/public/images/user/user-09.png b/public/images/user/user-09.png new file mode 100644 index 0000000..2ccf08e Binary files /dev/null and b/public/images/user/user-09.png differ diff --git a/public/images/user/user-10.png b/public/images/user/user-10.png new file mode 100644 index 0000000..d93d844 Binary files /dev/null and b/public/images/user/user-10.png differ diff --git a/public/images/user/user-11.png b/public/images/user/user-11.png new file mode 100644 index 0000000..a201a83 Binary files /dev/null and b/public/images/user/user-11.png differ diff --git a/public/images/user/user-12.png b/public/images/user/user-12.png new file mode 100644 index 0000000..758de2f Binary files /dev/null and b/public/images/user/user-12.png differ diff --git a/public/images/user/user-13.png b/public/images/user/user-13.png new file mode 100644 index 0000000..e1151e8 Binary files /dev/null and b/public/images/user/user-13.png differ diff --git a/public/images/user/user-14.png b/public/images/user/user-14.png new file mode 100644 index 0000000..0772fbc Binary files /dev/null and b/public/images/user/user-14.png differ diff --git a/public/images/user/user-15.png b/public/images/user/user-15.png new file mode 100644 index 0000000..3c8ed7c Binary files /dev/null and b/public/images/user/user-15.png differ diff --git a/public/images/user/user-16.png b/public/images/user/user-16.png new file mode 100644 index 0000000..74678af Binary files /dev/null and b/public/images/user/user-16.png differ diff --git a/public/images/user/user-17.png b/public/images/user/user-17.png new file mode 100644 index 0000000..d9c3744 Binary files /dev/null and b/public/images/user/user-17.png differ diff --git a/public/images/user/user-18.png b/public/images/user/user-18.png new file mode 100644 index 0000000..981fa85 Binary files /dev/null and b/public/images/user/user-18.png differ diff --git a/public/images/user/user-19.png b/public/images/user/user-19.png new file mode 100644 index 0000000..9b7d46c Binary files /dev/null and b/public/images/user/user-19.png differ diff --git a/public/images/user/user-20.png b/public/images/user/user-20.png new file mode 100644 index 0000000..f582c04 Binary files /dev/null and b/public/images/user/user-20.png differ diff --git a/public/images/user/user-21.png b/public/images/user/user-21.png new file mode 100644 index 0000000..ab40243 Binary files /dev/null and b/public/images/user/user-21.png differ diff --git a/public/images/user/user-22.png b/public/images/user/user-22.png new file mode 100644 index 0000000..8e90301 Binary files /dev/null and b/public/images/user/user-22.png differ diff --git a/public/images/user/user-23.png b/public/images/user/user-23.png new file mode 100644 index 0000000..b501583 Binary files /dev/null and b/public/images/user/user-23.png differ diff --git a/public/images/user/user-24.png b/public/images/user/user-24.png new file mode 100644 index 0000000..f7a066c Binary files /dev/null and b/public/images/user/user-24.png differ diff --git a/public/images/user/user-25.png b/public/images/user/user-25.png new file mode 100644 index 0000000..eda0f88 Binary files /dev/null and b/public/images/user/user-25.png differ diff --git a/public/images/user/user-26.png b/public/images/user/user-26.png new file mode 100644 index 0000000..7d0cce8 Binary files /dev/null and b/public/images/user/user-26.png differ diff --git a/public/images/user/user-27.png b/public/images/user/user-27.png new file mode 100644 index 0000000..34487ff Binary files /dev/null and b/public/images/user/user-27.png differ diff --git a/public/images/user/user-28.png b/public/images/user/user-28.png new file mode 100644 index 0000000..4f4c942 Binary files /dev/null and b/public/images/user/user-28.png differ diff --git a/public/images/user/user-29.png b/public/images/user/user-29.png new file mode 100644 index 0000000..aff52e2 Binary files /dev/null and b/public/images/user/user-29.png differ diff --git a/public/images/user/user-30.png b/public/images/user/user-30.png new file mode 100644 index 0000000..cdbf579 Binary files /dev/null and b/public/images/user/user-30.png differ diff --git a/src/app/(home)/_components/chats-card.tsx b/src/app/(home)/_components/chats-card.tsx new file mode 100644 index 0000000..6202d3d --- /dev/null +++ b/src/app/(home)/_components/chats-card.tsx @@ -0,0 +1,78 @@ +import { DotIcon } from "@/assets/icons"; +import { formatMessageTime } from "@/lib/format-message-time"; +import { cn } from "@/lib/utils"; +import Image from "next/image"; +import Link from "next/link"; +import { getChatsData } from "../fetch"; + +export async function ChatsCard() { + const data = await getChatsData(); + + return ( +
+

+ Chats +

+ + +
+ ); +} diff --git a/src/app/(home)/_components/overview-cards/card.tsx b/src/app/(home)/_components/overview-cards/card.tsx new file mode 100644 index 0000000..f0f0e7c --- /dev/null +++ b/src/app/(home)/_components/overview-cards/card.tsx @@ -0,0 +1,53 @@ +import { ArrowDownIcon, ArrowUpIcon } from "@/assets/icons"; +import { cn } from "@/lib/utils"; +import type { JSX, SVGProps } from "react"; + +type PropsType = { + label: string; + data: { + value: number | string; + growthRate: number; + }; + Icon: (props: SVGProps) => JSX.Element; +}; + +export function OverviewCard({ label, data, Icon }: PropsType) { + const isDecreasing = data.growthRate < 0; + + return ( +
+ + +
+
+
+ {data.value} +
+ +
{label}
+
+ +
+
+ {data.growthRate}% + {isDecreasing ? ( + + ) : ( + + )} +
+ +
+ {label} {isDecreasing ? "Decreased" : "Increased"} by{" "} + {data.growthRate}% +
+
+
+
+ ); +} diff --git a/src/app/(home)/_components/overview-cards/icons.tsx b/src/app/(home)/_components/overview-cards/icons.tsx new file mode 100644 index 0000000..ce8b3f1 --- /dev/null +++ b/src/app/(home)/_components/overview-cards/icons.tsx @@ -0,0 +1,73 @@ +import type { SVGProps } from "react"; + +type SVGPropsType = SVGProps; + +export function Views(props: SVGPropsType) { + return ( + + + + + + ); +} + +export function Profit(props: SVGPropsType) { + return ( + + + + + ); +} + +export function Product(props: SVGPropsType) { + return ( + + + + + ); +} + +export function Users(props: SVGPropsType) { + return ( + + + + + + + ); +} diff --git a/src/app/(home)/_components/overview-cards/index.tsx b/src/app/(home)/_components/overview-cards/index.tsx new file mode 100644 index 0000000..5c05983 --- /dev/null +++ b/src/app/(home)/_components/overview-cards/index.tsx @@ -0,0 +1,48 @@ +import { compactFormat } from "@/lib/format-number"; +import { getOverviewData } from "../../fetch"; +import { OverviewCard } from "./card"; +import * as icons from "./icons"; + +export async function OverviewCardsGroup() { + const { views, profit, products, users } = await getOverviewData(); + + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/app/(home)/_components/overview-cards/skeleton.tsx b/src/app/(home)/_components/overview-cards/skeleton.tsx new file mode 100644 index 0000000..56d303a --- /dev/null +++ b/src/app/(home)/_components/overview-cards/skeleton.tsx @@ -0,0 +1,26 @@ +import { Skeleton } from "@/components/ui/skeleton"; + +export function OverviewCardsSkeleton() { + return ( +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+ + +
+
+ + + +
+ + +
+
+ ))} +
+ ); +} diff --git a/src/app/(home)/_components/region-labels/index.tsx b/src/app/(home)/_components/region-labels/index.tsx new file mode 100644 index 0000000..f3974a7 --- /dev/null +++ b/src/app/(home)/_components/region-labels/index.tsx @@ -0,0 +1,17 @@ +"use client"; + +import dynamic from "next/dynamic"; + +const Map = dynamic(() => import("./map"), { ssr: false }); + +export function RegionLabels() { + return ( +
+

+ Region labels +

+ + +
+ ); +} diff --git a/src/app/(home)/_components/region-labels/map.tsx b/src/app/(home)/_components/region-labels/map.tsx new file mode 100644 index 0000000..e370b69 --- /dev/null +++ b/src/app/(home)/_components/region-labels/map.tsx @@ -0,0 +1,47 @@ +"use client"; + +import jsVectorMap from "jsvectormap"; +import { useEffect } from "react"; + +import "@/js/us-aea-en"; + +export default function Map() { + useEffect(() => { + new jsVectorMap({ + selector: "#mapOne", + map: "us_aea_en", + zoomButtons: true, + regionStyle: { + initial: { + fill: "#C8D0D8", + }, + hover: { + fillOpacity: 1, + fill: "#3056D3", + }, + }, + regionLabelStyle: { + initial: { + fontWeight: "semibold", + fill: "#fff", + }, + hover: { + cursor: "pointer", + }, + }, + labels: { + regions: { + render(code: string) { + return code.split("-")[1]; + }, + }, + }, + }); + }, []); + + return ( +
+
+
+ ); +} diff --git a/src/app/(home)/fetch.ts b/src/app/(home)/fetch.ts new file mode 100644 index 0000000..6486763 --- /dev/null +++ b/src/app/(home)/fetch.ts @@ -0,0 +1,91 @@ +export async function getOverviewData() { + // Fake delay + await new Promise((resolve) => setTimeout(resolve, 2000)); + + return { + views: { + value: 3456, + growthRate: 0.43, + }, + profit: { + value: 4220, + growthRate: 4.35, + }, + products: { + value: 3456, + growthRate: 2.59, + }, + users: { + value: 3456, + growthRate: -0.95, + }, + }; +} + +export async function getChatsData() { + // Fake delay + await new Promise((resolve) => setTimeout(resolve, 1000)); + + return [ + { + name: "Jacob Jones", + profile: "/images/user/user-01.png", + isActive: true, + lastMessage: { + content: "See you tomorrow at the meeting!", + type: "text", + timestamp: "2024-12-19T14:30:00Z", + isRead: false, + }, + unreadCount: 3, + }, + { + name: "Wilium Smith", + profile: "/images/user/user-03.png", + isActive: true, + lastMessage: { + content: "Thanks for the update", + type: "text", + timestamp: "2024-12-19T10:15:00Z", + isRead: true, + }, + unreadCount: 0, + }, + { + name: "Johurul Haque", + profile: "/images/user/user-04.png", + isActive: false, + lastMessage: { + content: "What's up?", + type: "text", + timestamp: "2024-12-19T10:15:00Z", + isRead: true, + }, + unreadCount: 0, + }, + { + name: "M. Chowdhury", + profile: "/images/user/user-05.png", + isActive: false, + lastMessage: { + content: "Where are you now?", + type: "text", + timestamp: "2024-12-19T10:15:00Z", + isRead: true, + }, + unreadCount: 2, + }, + { + name: "Akagami", + profile: "/images/user/user-07.png", + isActive: false, + lastMessage: { + content: "Hey, how are you?", + type: "text", + timestamp: "2024-12-19T10:15:00Z", + isRead: true, + }, + unreadCount: 0, + }, + ]; +} \ No newline at end of file diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx new file mode 100644 index 0000000..d7728b1 --- /dev/null +++ b/src/app/(home)/page.tsx @@ -0,0 +1,62 @@ +import { PaymentsOverview } from "@/components/Charts/payments-overview"; +import { UsedDevices } from "@/components/Charts/used-devices"; +import { WeeksProfit } from "@/components/Charts/weeks-profit"; +import { TopChannels } from "@/components/Tables/top-channels"; +import { TopChannelsSkeleton } from "@/components/Tables/top-channels/skeleton"; +import { createTimeFrameExtractor } from "@/utils/timeframe-extractor"; +import { Suspense } from "react"; +import { ChatsCard } from "./_components/chats-card"; +import { OverviewCardsGroup } from "./_components/overview-cards"; +import { OverviewCardsSkeleton } from "./_components/overview-cards/skeleton"; +import { RegionLabels } from "./_components/region-labels"; + +type PropsType = { + searchParams: Promise<{ + selected_time_frame?: string; + }>; +}; + +export default async function Home({ searchParams }: PropsType) { + const { selected_time_frame } = await searchParams; + const extractTimeFrame = createTimeFrameExtractor(selected_time_frame); + + return ( + <> + }> + + + +
+ + + + + + + + +
+ }> + + +
+ + + + +
+ + ); +} diff --git a/src/app/auth/sign-in/page.tsx b/src/app/auth/sign-in/page.tsx new file mode 100644 index 0000000..83dcabf --- /dev/null +++ b/src/app/auth/sign-in/page.tsx @@ -0,0 +1,70 @@ +import Signin from "@/components/Auth/Signin"; +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import type { Metadata } from "next"; +import Image from "next/image"; +import Link from "next/link"; + +export const metadata: Metadata = { + title: "Sign in", +}; + +export default function SignIn() { + return ( + <> + + +
+
+
+
+ +
+
+ +
+
+ + Logo + Logo + +

+ Sign in to your account +

+ +

+ Welcome Back! +

+ +

+ Please sign in to your account by completing the necessary + fields below +

+ +
+ Logo +
+
+
+
+
+ + ); +} diff --git a/src/app/calendar/page.tsx b/src/app/calendar/page.tsx new file mode 100644 index 0000000..03bae0d --- /dev/null +++ b/src/app/calendar/page.tsx @@ -0,0 +1,20 @@ +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import CalendarBox from "@/components/CalenderBox"; +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Calender Page", + // other metadata +}; + +const CalendarPage = () => { + return ( + <> + + + + + ); +}; + +export default CalendarPage; diff --git a/src/app/charts/basic-chart/page.tsx b/src/app/charts/basic-chart/page.tsx new file mode 100644 index 0000000..fbd0f3e --- /dev/null +++ b/src/app/charts/basic-chart/page.tsx @@ -0,0 +1,38 @@ +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import { CampaignVisitors } from "@/components/Charts/campaign-visitors"; +import { UsedDevices } from "@/components/Charts/used-devices"; +import { createTimeFrameExtractor } from "@/utils/timeframe-extractor"; +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Basic Chart", +}; + +type PropsType = { + searchParams: Promise<{ + selected_time_frame?: string; + }>; +}; + +export default async function Page(props: PropsType) { + const { selected_time_frame } = await props.searchParams; + const extractTimeFrame = createTimeFrameExtractor(selected_time_frame); + + return ( + <> + + +
+ + +
+ +
+
+ + ); +} diff --git a/src/app/favicon.ico b/src/app/favicon.ico new file mode 100644 index 0000000..b4e2503 Binary files /dev/null and b/src/app/favicon.ico differ diff --git a/src/app/forms/form-elements/page.tsx b/src/app/forms/form-elements/page.tsx new file mode 100644 index 0000000..d324212 --- /dev/null +++ b/src/app/forms/form-elements/page.tsx @@ -0,0 +1,129 @@ +import type { Metadata } from "next"; + +import { GlobeIcon } from "@/assets/icons"; +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import DatePickerOne from "@/components/FormElements/DatePicker/DatePickerOne"; +import DatePickerTwo from "@/components/FormElements/DatePicker/DatePickerTwo"; +import InputGroup from "@/components/FormElements/InputGroup"; +import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area"; +import MultiSelect from "@/components/FormElements/MultiSelect"; +import { Checkbox } from "@/components/FormElements/checkbox"; +import { RadioInput } from "@/components/FormElements/radio"; +import { Select } from "@/components/FormElements/select"; +import { Switch } from "@/components/FormElements/switch"; +import { ShowcaseSection } from "@/components/Layouts/showcase-section"; + +export const metadata: Metadata = { + title: "Form Elements", +}; + +export default function FormElementsPage() { + return ( + <> + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + ); +} diff --git a/src/app/forms/form-layout/_components/sign-in-form.tsx b/src/app/forms/form-layout/_components/sign-in-form.tsx new file mode 100644 index 0000000..71c81f0 --- /dev/null +++ b/src/app/forms/form-layout/_components/sign-in-form.tsx @@ -0,0 +1,37 @@ +import { Checkbox } from "@/components/FormElements/checkbox"; +import InputGroup from "@/components/FormElements/InputGroup"; +import { ShowcaseSection } from "@/components/Layouts/showcase-section"; +import Link from "next/link"; + +export function SignInForm() { + return ( + +
+ + + + +
+ + + + Forgot password? + +
+ + + +
+ ); +} diff --git a/src/app/forms/form-layout/_components/sign-up-form.tsx b/src/app/forms/form-layout/_components/sign-up-form.tsx new file mode 100644 index 0000000..9c9e276 --- /dev/null +++ b/src/app/forms/form-layout/_components/sign-up-form.tsx @@ -0,0 +1,42 @@ +import InputGroup from "@/components/FormElements/InputGroup"; +import { ShowcaseSection } from "@/components/Layouts/showcase-section"; + +export function SignUpForm() { + return ( + +
+ + + + + + + + + + +
+ ); +} diff --git a/src/app/forms/form-layout/page.tsx b/src/app/forms/form-layout/page.tsx new file mode 100644 index 0000000..0c9c31e --- /dev/null +++ b/src/app/forms/form-layout/page.tsx @@ -0,0 +1,30 @@ +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; + +import type { Metadata } from "next"; +import { ContactForm } from "./_components/contact-form"; +import { SignInForm } from "./_components/sign-in-form"; +import { SignUpForm } from "./_components/sign-up-form"; + +export const metadata: Metadata = { + title: "Form Layout", +}; + +export default function Page() { + return ( + <> + + +
+
+ +
+ +
+ + + +
+
+ + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..0554a39 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,46 @@ +import "@/css/satoshi.css"; +import "@/css/style.css"; + +import { Sidebar } from "@/components/Layouts/sidebar"; + +import "flatpickr/dist/flatpickr.min.css"; +import "jsvectormap/dist/jsvectormap.css"; + +import { Header } from "@/components/Layouts/header"; +import type { Metadata } from "next"; +import NextTopLoader from "nextjs-toploader"; +import type { PropsWithChildren } from "react"; +import { Providers } from "./providers"; + +export const metadata: Metadata = { + title: { + template: "%s | NextAdmin - Next.js Dashboard Kit", + default: "NextAdmin - Next.js Dashboard Kit", + }, + description: + "Next.js admin dashboard toolkit with 200+ templates, UI components, and integrations for fast dashboard development.", +}; + +export default function RootLayout({ children }: PropsWithChildren) { + return ( + + + + + +
+ + +
+
+ +
+ {children} +
+
+
+ + + + ); +} diff --git a/src/app/pages/settings/_components/personal-info.tsx b/src/app/pages/settings/_components/personal-info.tsx new file mode 100644 index 0000000..d122756 --- /dev/null +++ b/src/app/pages/settings/_components/personal-info.tsx @@ -0,0 +1,91 @@ +import { + CallIcon, + EmailIcon, + PencilSquareIcon, + UserIcon, +} from "@/assets/icons"; +import InputGroup from "@/components/FormElements/InputGroup"; +import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area"; +import { ShowcaseSection } from "@/components/Layouts/showcase-section"; + +export function PersonalInfoForm() { + return ( + +
+
+ } + iconPosition="left" + height="sm" + /> + + } + iconPosition="left" + height="sm" + /> +
+ + } + iconPosition="left" + height="sm" + /> + + } + iconPosition="left" + height="sm" + /> + + } + defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia turpis tortor, consequat efficitur mi congue a. Curabitur cursus, ipsum ut lobortis sodales, enim arcu pellentesque lectus ac suscipit diam sem a felis. Cras sapien ex, blandit eu dui et suscipit gravida nunc. Sed sed est quis dui." + /> + +
+ + + +
+ +
+ ); +} diff --git a/src/app/pages/settings/_components/upload-photo.tsx b/src/app/pages/settings/_components/upload-photo.tsx new file mode 100644 index 0000000..96b2a9a --- /dev/null +++ b/src/app/pages/settings/_components/upload-photo.tsx @@ -0,0 +1,79 @@ +import { UploadIcon } from "@/assets/icons"; +import { ShowcaseSection } from "@/components/Layouts/showcase-section"; +import Image from "next/image"; + +export function UploadPhotoForm() { + return ( + +
+
+ User + +
+ + Edit your photo + + + + + +
+
+ +
+ + + +
+ +
+ + +
+
+ + ); +} diff --git a/src/app/pages/settings/page.tsx b/src/app/pages/settings/page.tsx new file mode 100644 index 0000000..8d1bbf6 --- /dev/null +++ b/src/app/pages/settings/page.tsx @@ -0,0 +1,26 @@ +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import type { Metadata } from "next"; +import { PersonalInfoForm } from "./_components/personal-info"; +import { UploadPhotoForm } from "./_components/upload-photo"; + +export const metadata: Metadata = { + title: "Settings Page", +}; + +export default function SettingsPage() { + return ( +
+ + +
+
+ +
+
+ +
+
+
+ ); +}; + diff --git a/src/app/profile/_components/icons.tsx b/src/app/profile/_components/icons.tsx new file mode 100644 index 0000000..1602783 --- /dev/null +++ b/src/app/profile/_components/icons.tsx @@ -0,0 +1,134 @@ +import React from "react"; + +export type PropsType = React.SVGProps; + +export function CameraIcon(props: PropsType) { + return ( + + + + ); +} + +export function FacebookIcon(props: PropsType) { + return ( + + + + + + + + + + + ); +} + +export function XIcon(props: PropsType) { + return ( + + + + ); +} + +export function LinkedInIcon(props: PropsType) { + return ( + + + + + + + + + + + ); +} + +export function DribbleIcon(props: PropsType) { + return ( + + + + + + + + + + + ); +} + +export function GitHubIcon(props: PropsType) { + return ( + + + + + + + + + + + ); +} diff --git a/src/app/profile/_components/social-accounts.tsx b/src/app/profile/_components/social-accounts.tsx new file mode 100644 index 0000000..63f97b5 --- /dev/null +++ b/src/app/profile/_components/social-accounts.tsx @@ -0,0 +1,59 @@ +import Link from "next/link"; +import { + DribbleIcon, + FacebookIcon, + GitHubIcon, + LinkedInIcon, + XIcon, +} from "./icons"; + +const ACCOUNTS = [ + { + platform: "Facebook", + url: "#", + Icon: FacebookIcon, + }, + { + platform: "X", + url: "#", + Icon: XIcon, + }, + { + platform: "LinkedIn", + url: "#", + Icon: LinkedInIcon, + }, + { + platform: "Dribble", + url: "#", + Icon: DribbleIcon, + }, + { + platform: "GitHub", + url: "#", + Icon: GitHubIcon, + }, +]; + +export function SocialAccounts() { + return ( +
+

+ Follow me on +

+
+ {ACCOUNTS.map(({ Icon, ...item }) => ( + + View {item.platform} Account + + + + ))} +
+
+ ); +} diff --git a/src/app/profile/layout.tsx b/src/app/profile/layout.tsx new file mode 100644 index 0000000..ffbb0c1 --- /dev/null +++ b/src/app/profile/layout.tsx @@ -0,0 +1,11 @@ +import type { PropsWithChildren } from "react"; + +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Profile Page", +}; + +export default function Layout({ children }: PropsWithChildren) { + return children; +} diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx new file mode 100644 index 0000000..278edcc --- /dev/null +++ b/src/app/profile/page.tsx @@ -0,0 +1,154 @@ +"use client"; + +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import Image from "next/image"; + +import { useState } from "react"; +import { CameraIcon } from "./_components/icons"; +import { SocialAccounts } from "./_components/social-accounts"; + +export default function Page() { + const [data, setData] = useState({ + name: "Danish Heilium", + profilePhoto: "/images/user/user-03.png", + coverPhoto: "/images/cover/cover-01.png", + }); + + const handleChange = (e: any) => { + if (e.target.name === "profilePhoto" ) { + const file = e.target?.files[0]; + + setData({ + ...data, + profilePhoto: file && URL.createObjectURL(file), + }); + } else if (e.target.name === "coverPhoto") { + const file = e.target?.files[0]; + + setData({ + ...data, + coverPhoto: file && URL.createObjectURL(file), + }); + } else { + setData({ + ...data, + [e.target.name]: e.target.value, + }); + } + }; + + return ( +
+ + +
+
+ profile cover +
+ +
+
+
+
+
+ {data?.profilePhoto && ( + <> + profile + + + + )} +
+
+
+

+ {data?.name} +

+

Ui/Ux Designer

+
+
+ + 259 + + Posts +
+
+ + 129K + + Followers +
+
+ + 2K + + Following +
+
+ +
+

+ About Me +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Pellentesque posuere fermentum urna, eu condimentum mauris + tempus ut. Donec fermentum blandit aliquet. Etiam dictum dapibus + ultricies. Sed vel aliquet libero. Nunc a augue fermentum, + pharetra ligula sed, aliquam lacus. +

+
+ + +
+
+
+
+ ); +} diff --git a/src/app/providers.tsx b/src/app/providers.tsx new file mode 100644 index 0000000..bc2b437 --- /dev/null +++ b/src/app/providers.tsx @@ -0,0 +1,12 @@ +"use client"; + +import { SidebarProvider } from "@/components/Layouts/sidebar/sidebar-context"; +import { ThemeProvider } from "next-themes"; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} diff --git a/src/app/tables/page.tsx b/src/app/tables/page.tsx new file mode 100644 index 0000000..0649808 --- /dev/null +++ b/src/app/tables/page.tsx @@ -0,0 +1,35 @@ +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import { InvoiceTable } from "@/components/Tables/invoice-table"; +import { TopChannels } from "@/components/Tables/top-channels"; +import { TopChannelsSkeleton } from "@/components/Tables/top-channels/skeleton"; +import { TopProducts } from "@/components/Tables/top-products"; +import { TopProductsSkeleton } from "@/components/Tables/top-products/skeleton"; + +import { Metadata } from "next"; +import { Suspense } from "react"; + +export const metadata: Metadata = { + title: "Tables", +}; + +const TablesPage = () => { + return ( + <> + + +
+ }> + + + + }> + + + + +
+ + ); +}; + +export default TablesPage; diff --git a/src/app/ui-elements/alerts/page.tsx b/src/app/ui-elements/alerts/page.tsx new file mode 100644 index 0000000..242e82b --- /dev/null +++ b/src/app/ui-elements/alerts/page.tsx @@ -0,0 +1,36 @@ +import { Alert } from "@/components/ui-elements/alert"; +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import type { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Alerts", + // other metadata +}; + +export default function Page() { + return ( + <> + + +
+ + + + + +
+ + ); +} diff --git a/src/app/ui-elements/buttons/page.tsx b/src/app/ui-elements/buttons/page.tsx new file mode 100644 index 0000000..1ba0029 --- /dev/null +++ b/src/app/ui-elements/buttons/page.tsx @@ -0,0 +1,133 @@ +import { MessageOutlineIcon } from "@/assets/icons"; +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import { ShowcaseSection } from "@/components/Layouts/showcase-section"; +import { Button } from "@/components/ui-elements/button"; +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Buttons", +}; + +export default function Page() { + return ( + <> + + +
+ +
+
+ +
+
+ +
+
+ + + +
+
+ +
+
+ +
+
+ +
+ + ); +} diff --git a/src/assets/icons.tsx b/src/assets/icons.tsx new file mode 100644 index 0000000..13dc0b7 --- /dev/null +++ b/src/assets/icons.tsx @@ -0,0 +1,418 @@ +import type { IconProps } from "@/types/icon-props"; + +export function SearchIcon(props: IconProps) { + return ( + + + + + + + + + + + ); +} + +export function CloseIcon(props: IconProps) { + return ( + + + + ); +} + +export function ArrowLeftIcon(props: IconProps) { + return ( + + + + ); +} + +export function ChevronUpIcon(props: IconProps) { + return ( + + + + ); +} + +export function ArrowUpIcon(props: IconProps) { + return ( + + + + ); +} + +export function ArrowDownIcon(props: IconProps) { + return ( + + + + ); +} + +export function DotIcon(props: IconProps) { + return ( + + + + ); +} + +export function TrendingUpIcon(props: IconProps) { + return ( + + + + ); +} + +export function CheckIcon(props: IconProps) { + return ( + + + + ); +} + +export function XIcon(props: IconProps) { + return ( + + + + + + + + + + + ); +} + +export function GlobeIcon(props: IconProps) { + return ( + + + + + + + + + + + ); +} + +export function TrashIcon(props: IconProps) { + return ( + + + + + + + ); +} + +export function MessageOutlineIcon(props: IconProps) { + return ( + + + + ); +} + +export function EmailIcon(props: IconProps) { + return ( + + + + ); +} + +export function PasswordIcon(props: IconProps) { + return ( + + + + + ); +} + +export function GoogleIcon(props: IconProps) { + return ( + + + + + + + + + + + + + + ); +} + +export function UserIcon(props: IconProps) { + return ( + + + + + ); +} + +export function CallIcon(props: IconProps) { + return ( + + + + ); +} + +export function PencilSquareIcon(props: IconProps) { + return ( + + + + + + + + + + + ); +} + +export function UploadIcon(props: IconProps) { + return ( + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/assets/logos/dark.svg b/src/assets/logos/dark.svg new file mode 100644 index 0000000..5e53f7c --- /dev/null +++ b/src/assets/logos/dark.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/logos/facebook.svg b/src/assets/logos/facebook.svg new file mode 100644 index 0000000..5d608ea --- /dev/null +++ b/src/assets/logos/facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/logos/github.svg b/src/assets/logos/github.svg new file mode 100644 index 0000000..034ca3b --- /dev/null +++ b/src/assets/logos/github.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/logos/google.svg b/src/assets/logos/google.svg new file mode 100644 index 0000000..cddcc25 --- /dev/null +++ b/src/assets/logos/google.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/logos/index.ts b/src/assets/logos/index.ts new file mode 100644 index 0000000..75b91fa --- /dev/null +++ b/src/assets/logos/index.ts @@ -0,0 +1,7 @@ +export { default as dark } from './dark.svg'; +export { default as facebook } from './facebook.svg'; +export { default as github } from './github.svg'; +export { default as google } from './google.svg'; +export { default as main } from './main.svg'; +export { default as vimeo } from './vimeo.svg'; +export { default as x } from './x.svg'; diff --git a/src/assets/logos/main.svg b/src/assets/logos/main.svg new file mode 100644 index 0000000..fca4e12 --- /dev/null +++ b/src/assets/logos/main.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/logos/vimeo.svg b/src/assets/logos/vimeo.svg new file mode 100644 index 0000000..3de1e7b --- /dev/null +++ b/src/assets/logos/vimeo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/logos/x.svg b/src/assets/logos/x.svg new file mode 100644 index 0000000..2533616 --- /dev/null +++ b/src/assets/logos/x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Auth/GoogleSigninButton.tsx b/src/components/Auth/GoogleSigninButton.tsx new file mode 100644 index 0000000..8b4526d --- /dev/null +++ b/src/components/Auth/GoogleSigninButton.tsx @@ -0,0 +1,10 @@ +import { GoogleIcon } from "@/assets/icons"; + +export default function GoogleSigninButton({ text }: { text: string }) { + return ( + + ); +} diff --git a/src/components/Auth/Signin/index.tsx b/src/components/Auth/Signin/index.tsx new file mode 100644 index 0000000..655d154 --- /dev/null +++ b/src/components/Auth/Signin/index.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; +import GoogleSigninButton from "../GoogleSigninButton"; +import SigninWithPassword from "../SigninWithPassword"; + +export default function Signin() { + return ( + <> + + +
+ +
+ Or sign in with email +
+ +
+ +
+ +
+ +
+

+ Don’t have any account?{" "} + + Sign Up + +

+
+ + ); +} diff --git a/src/components/Auth/SigninWithPassword.tsx b/src/components/Auth/SigninWithPassword.tsx new file mode 100644 index 0000000..a02c4c7 --- /dev/null +++ b/src/components/Auth/SigninWithPassword.tsx @@ -0,0 +1,95 @@ +"use client"; +import { EmailIcon, PasswordIcon } from "@/assets/icons"; +import Link from "next/link"; +import React, { useState } from "react"; +import InputGroup from "../FormElements/InputGroup"; +import { Checkbox } from "../FormElements/checkbox"; + +export default function SigninWithPassword() { + const [data, setData] = useState({ + email: process.env.NEXT_PUBLIC_DEMO_USER_MAIL || "", + password: process.env.NEXT_PUBLIC_DEMO_USER_PASS || "", + remember: false, + }); + + const [loading, setLoading] = useState(false); + + const handleChange = (e: React.ChangeEvent) => { + setData({ + ...data, + [e.target.name]: e.target.value, + }); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + // You can remove this code block + setLoading(true); + + setTimeout(() => { + setLoading(false); + }, 1000); + }; + + return ( +
+ } + /> + + } + /> + +
+ + setData({ + ...data, + remember: e.target.checked, + }) + } + /> + + + Forgot Password? + +
+ +
+ +
+ + ); +} diff --git a/src/components/Breadcrumbs/Breadcrumb.tsx b/src/components/Breadcrumbs/Breadcrumb.tsx new file mode 100644 index 0000000..a37102d --- /dev/null +++ b/src/components/Breadcrumbs/Breadcrumb.tsx @@ -0,0 +1,28 @@ +import Link from "next/link"; + +interface BreadcrumbProps { + pageName: string; +} + +const Breadcrumb = ({ pageName }: BreadcrumbProps) => { + return ( +
+

+ {pageName} +

+ + +
+ ); +}; + +export default Breadcrumb; diff --git a/src/components/CalenderBox/index.tsx b/src/components/CalenderBox/index.tsx new file mode 100644 index 0000000..c5dc045 --- /dev/null +++ b/src/components/CalenderBox/index.tsx @@ -0,0 +1,237 @@ +const CalendarBox = () => { + return ( + <> +
+ + + + + + + + + + + + + + {/* */} + + + + + + + + + + {/* */} + {/* */} + + + + + + + + + + {/* */} + {/* */} + + + + + + + + + + {/* */} + {/* */} + + + + + + + + + + {/* */} + {/* */} + + + + + + + + + + {/* */} + +
+ Sunday + Sun + + Monday + Mon + + Tuesday + Tue + + Wednesday + Wed + + Thursday + Thur + + Friday + Fri + + Saturday + Sat +
+ 1 +
+ + More + +
+ + Redesign Website + + 1 Dec - 2 Dec +
+
+ 		+ 2 + + 3 + + 4 + + 5 + + 6 + + 7 +
+ 8 + + 9 + + + 10 + + + + 11 + + + + 12 + + + + 13 + + + + 14 + +
+ + 15 + + + + 16 + + + + 17 + + + + 18 + + + + 19 + + + + 20 + + + + 21 + +
+ + 22 + + + + 23 + + + + 24 + + + + 25 + +
+ + More + +
+ + App Design + + 25 Dec - 27 Dec +
+
+ 		+ + 26 + + + + 27 + + + + 28 + +
+ + 29 + + + + 30 + + + + 31 + + + 1 + + 2 + + 3 + + 4 +
+
+ + ); +}; + +export default CalendarBox; diff --git a/src/components/Charts/campaign-visitors/chart.tsx b/src/components/Charts/campaign-visitors/chart.tsx new file mode 100644 index 0000000..28d330f --- /dev/null +++ b/src/components/Charts/campaign-visitors/chart.tsx @@ -0,0 +1,90 @@ +"use client"; + +import type { ApexOptions } from "apexcharts"; +import dynamic from "next/dynamic"; + +type PropsType = { + data: { + x: string; + y: number; + }[]; +}; + +const Chart = dynamic(() => import("react-apexcharts"), { + ssr: false, +}); + +export function CampaignVisitorsChart({ data }: PropsType) { + const options: ApexOptions = { + colors: ["#5750F1"], + chart: { + fontFamily: "Satoshi, sans-serif", + type: "bar", + height: 200, + toolbar: { + show: false, + }, + }, + plotOptions: { + bar: { + horizontal: false, + columnWidth: "40%", + borderRadius: 3, + }, + }, + dataLabels: { + enabled: false, + }, + stroke: { + show: true, + width: 4, + colors: ["transparent"], + }, + xaxis: { + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + }, + legend: { + show: true, + position: "top", + horizontalAlign: "left", + fontFamily: "Satoshi", + }, + grid: { + strokeDashArray: 7, + yaxis: { + lines: { + show: true, + }, + }, + }, + fill: { + opacity: 1, + }, + tooltip: { + x: { + show: false, + }, + }, + }; + + return ( +
+ +
+ ); +} diff --git a/src/components/Charts/campaign-visitors/index.tsx b/src/components/Charts/campaign-visitors/index.tsx new file mode 100644 index 0000000..2ee213a --- /dev/null +++ b/src/components/Charts/campaign-visitors/index.tsx @@ -0,0 +1,49 @@ +import { TrendingUpIcon } from "@/assets/icons"; +import { compactFormat } from "@/lib/format-number"; +import { cn } from "@/lib/utils"; +import { getCampaignVisitorsData } from "@/services/charts.services"; +import { CampaignVisitorsChart } from "./chart"; + +export async function CampaignVisitors({ className }: { className?: string }) { + const data = await getCampaignVisitorsData(); + + return ( +
+
+
+

+ Campaign Visitors +

+ +
+ {compactFormat(data.total_visitors)} +
+
+ +
+
Last Campaign Performance
+ +
0 ? "text-green" : "text-red", + )} + > + 0 ? "-rotate-6" : "scale-y-[-1]"}`} + /> + + {data.performance}% +
+
+
+ + +
+ ); +} diff --git a/src/components/Charts/payments-overview/chart.tsx b/src/components/Charts/payments-overview/chart.tsx new file mode 100644 index 0000000..b1c8a8c --- /dev/null +++ b/src/components/Charts/payments-overview/chart.tsx @@ -0,0 +1,107 @@ +"use client"; + +import { useIsMobile } from "@/hooks/use-mobile"; +import type { ApexOptions } from "apexcharts"; +import dynamic from "next/dynamic"; + +type PropsType = { + data: { + received: { x: unknown; y: number }[]; + due: { x: unknown; y: number }[]; + }; +}; + +const Chart = dynamic(() => import("react-apexcharts"), { + ssr: false, +}); + +export function PaymentsOverviewChart({ data }: PropsType) { + const isMobile = useIsMobile(); + + const options: ApexOptions = { + legend: { + show: false, + }, + colors: ["#5750F1", "#0ABEF9"], + chart: { + height: 310, + type: "area", + toolbar: { + show: false, + }, + fontFamily: "inherit", + }, + fill: { + gradient: { + opacityFrom: 0.55, + opacityTo: 0, + }, + }, + responsive: [ + { + breakpoint: 1024, + options: { + chart: { + height: 300, + }, + }, + }, + { + breakpoint: 1366, + options: { + chart: { + height: 320, + }, + }, + }, + ], + stroke: { + curve: "smooth", + width: isMobile ? 2 : 3, + }, + grid: { + strokeDashArray: 5, + yaxis: { + lines: { + show: true, + }, + }, + }, + dataLabels: { + enabled: false, + }, + tooltip: { + marker: { + show: true, + }, + }, + xaxis: { + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + }, + }; + + return ( +
+ +
+ ); +} diff --git a/src/components/Charts/payments-overview/index.tsx b/src/components/Charts/payments-overview/index.tsx new file mode 100644 index 0000000..c7055fc --- /dev/null +++ b/src/components/Charts/payments-overview/index.tsx @@ -0,0 +1,52 @@ +import { PeriodPicker } from "@/components/period-picker"; +import { standardFormat } from "@/lib/format-number"; +import { cn } from "@/lib/utils"; +import { getPaymentsOverviewData } from "@/services/charts.services"; +import { PaymentsOverviewChart } from "./chart"; + +type PropsType = { + timeFrame?: string; + className?: string; +}; + +export async function PaymentsOverview({ + timeFrame = "monthly", + className, +}: PropsType) { + const data = await getPaymentsOverviewData(timeFrame); + + return ( +
+
+

+ Payments Overview +

+ + +
+ + + +
+
+
+ ${standardFormat(data.received.reduce((acc, { y }) => acc + y, 0))} +
+
Received Amount
+
+ +
+
+ ${standardFormat(data.due.reduce((acc, { y }) => acc + y, 0))} +
+
Due Amount
+
+
+
+ ); +} diff --git a/src/components/Charts/used-devices/chart.tsx b/src/components/Charts/used-devices/chart.tsx new file mode 100644 index 0000000..57e6b2b --- /dev/null +++ b/src/components/Charts/used-devices/chart.tsx @@ -0,0 +1,97 @@ +"use client"; + +import { compactFormat } from "@/lib/format-number"; +import type { ApexOptions } from "apexcharts"; +import dynamic from "next/dynamic"; + +type PropsType = { + data: { name: string; amount: number }[]; +}; + +const Chart = dynamic(() => import("react-apexcharts"), { + ssr: false, +}); + +export function DonutChart({ data }: PropsType) { + const chartOptions: ApexOptions = { + chart: { + type: "donut", + fontFamily: "inherit", + }, + colors: ["#5750F1", "#5475E5", "#8099EC", "#ADBCF2"], + labels: data.map((item) => item.name), + legend: { + show: true, + position: "bottom", + itemMargin: { + horizontal: 10, + vertical: 5, + }, + formatter: (legendName, opts) => { + const { seriesPercent } = opts.w.globals; + return `${legendName}: ${seriesPercent[opts.seriesIndex]}%`; + }, + }, + plotOptions: { + pie: { + donut: { + size: "80%", + background: "transparent", + labels: { + show: true, + total: { + show: true, + showAlways: true, + label: "Visitors", + fontSize: "16px", + fontWeight: "400", + }, + value: { + show: true, + fontSize: "28px", + fontWeight: "bold", + formatter: (val) => compactFormat(+val), + }, + }, + }, + }, + }, + dataLabels: { + enabled: false, + }, + responsive: [ + { + breakpoint: 2600, + options: { + chart: { + width: 415, + }, + }, + }, + { + breakpoint: 640, + options: { + chart: { + width: "100%", + }, + }, + }, + { + breakpoint: 370, + options: { + chart: { + width: 260, + }, + }, + }, + ], + }; + + return ( + item.amount)} + type="donut" + /> + ); +} diff --git a/src/components/Charts/used-devices/index.tsx b/src/components/Charts/used-devices/index.tsx new file mode 100644 index 0000000..aa4f0cc --- /dev/null +++ b/src/components/Charts/used-devices/index.tsx @@ -0,0 +1,37 @@ +import { PeriodPicker } from "@/components/period-picker"; +import { cn } from "@/lib/utils"; +import { getDevicesUsedData } from "@/services/charts.services"; +import { DonutChart } from "./chart"; + +type PropsType = { + timeFrame?: string; + className?: string; +}; + +export async function UsedDevices({ + timeFrame = "monthly", + className, +}: PropsType) { + const data = await getDevicesUsedData(timeFrame); + + return ( +
+
+

+ Used Devices +

+ + +
+ +
+ +
+
+ ); +} diff --git a/src/components/Charts/weeks-profit/chart.tsx b/src/components/Charts/weeks-profit/chart.tsx new file mode 100644 index 0000000..74fbd11 --- /dev/null +++ b/src/components/Charts/weeks-profit/chart.tsx @@ -0,0 +1,113 @@ +"use client"; + +import type { ApexOptions } from "apexcharts"; +import dynamic from "next/dynamic"; + +type PropsType = { + data: { + sales: { x: string; y: number }[]; + revenue: { x: string; y: number }[]; + }; +}; + +const Chart = dynamic(() => import("react-apexcharts"), { + ssr: false, +}); + +export function WeeksProfitChart({ data }: PropsType) { + const options: ApexOptions = { + colors: ["#5750F1", "#0ABEF9"], + chart: { + type: "bar", + stacked: true, + toolbar: { + show: false, + }, + zoom: { + enabled: false, + }, + }, + + responsive: [ + { + breakpoint: 1536, + options: { + plotOptions: { + bar: { + borderRadius: 3, + columnWidth: "25%", + }, + }, + }, + }, + ], + plotOptions: { + bar: { + horizontal: false, + borderRadius: 3, + columnWidth: "25%", + borderRadiusApplication: "end", + borderRadiusWhenStacked: "last", + }, + }, + dataLabels: { + enabled: false, + }, + + grid: { + strokeDashArray: 5, + xaxis: { + lines: { + show: false, + }, + }, + yaxis: { + lines: { + show: true, + }, + }, + }, + + xaxis: { + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + }, + legend: { + position: "top", + horizontalAlign: "left", + fontFamily: "inherit", + fontWeight: 500, + fontSize: "14px", + markers: { + size: 9, + shape: "circle", + }, + }, + fill: { + opacity: 1, + }, + }; + return ( +
+ +
+ ); +} diff --git a/src/components/Charts/weeks-profit/index.tsx b/src/components/Charts/weeks-profit/index.tsx new file mode 100644 index 0000000..72abb23 --- /dev/null +++ b/src/components/Charts/weeks-profit/index.tsx @@ -0,0 +1,36 @@ +import { PeriodPicker } from "@/components/period-picker"; +import { cn } from "@/lib/utils"; +import { getWeeksProfitData } from "@/services/charts.services"; +import { WeeksProfitChart } from "./chart"; + +type PropsType = { + timeFrame?: string; + className?: string; +}; + +export async function WeeksProfit({ className, timeFrame }: PropsType) { + const data = await getWeeksProfitData(timeFrame); + + return ( +
+
+

+ Profit {timeFrame || "this week"} +

+ + +
+ + +
+ ); +} diff --git a/src/components/FormElements/Checkboxes/CheckboxFive.tsx b/src/components/FormElements/Checkboxes/CheckboxFive.tsx new file mode 100644 index 0000000..1d71c8d --- /dev/null +++ b/src/components/FormElements/Checkboxes/CheckboxFive.tsx @@ -0,0 +1,35 @@ +import { useState } from "react"; + +const CheckboxFive = () => { + const [isChecked, setIsChecked] = useState(false); + + return ( +
+ +
+ ); +}; + +export default CheckboxFive; diff --git a/src/components/FormElements/Checkboxes/CheckboxFour.tsx b/src/components/FormElements/Checkboxes/CheckboxFour.tsx new file mode 100644 index 0000000..86d18c0 --- /dev/null +++ b/src/components/FormElements/Checkboxes/CheckboxFour.tsx @@ -0,0 +1,43 @@ +import { useState } from "react"; + +const CheckboxFour = () => { + const [isChecked, setIsChecked] = useState(false); + + return ( +
+ +
+ ); +}; + +export default CheckboxFour; diff --git a/src/components/FormElements/Checkboxes/CheckboxOne.tsx b/src/components/FormElements/Checkboxes/CheckboxOne.tsx new file mode 100644 index 0000000..79b41a4 --- /dev/null +++ b/src/components/FormElements/Checkboxes/CheckboxOne.tsx @@ -0,0 +1,39 @@ +import { useState } from "react"; + +const CheckboxOne = () => { + const [isChecked, setIsChecked] = useState(false); + + return ( +
+ +
+ ); +}; + +export default CheckboxOne; diff --git a/src/components/FormElements/Checkboxes/CheckboxThree.tsx b/src/components/FormElements/Checkboxes/CheckboxThree.tsx new file mode 100644 index 0000000..67a47fb --- /dev/null +++ b/src/components/FormElements/Checkboxes/CheckboxThree.tsx @@ -0,0 +1,64 @@ +import { useState } from "react"; + +const CheckboxThree = () => { + const [isChecked, setIsChecked] = useState(false); + + return ( +
+ +
+ ); +}; + +export default CheckboxThree; diff --git a/src/components/FormElements/Checkboxes/CheckboxTwo.tsx b/src/components/FormElements/Checkboxes/CheckboxTwo.tsx new file mode 100644 index 0000000..964b2a7 --- /dev/null +++ b/src/components/FormElements/Checkboxes/CheckboxTwo.tsx @@ -0,0 +1,52 @@ +import { useState } from "react"; + +const CheckboxTwo = () => { + const [isChecked, setIsChecked] = useState(false); + + return ( +
+ +
+ ); +}; + +export default CheckboxTwo; diff --git a/src/components/FormElements/DatePicker/DatePickerOne.tsx b/src/components/FormElements/DatePicker/DatePickerOne.tsx new file mode 100644 index 0000000..d05f10b --- /dev/null +++ b/src/components/FormElements/DatePicker/DatePickerOne.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { Calendar } from "@/components/Layouts/sidebar/icons"; +import flatpickr from "flatpickr"; +import { useEffect } from "react"; + +const DatePickerOne = () => { + useEffect(() => { + // Init flatpickr + flatpickr(".form-datepicker", { + mode: "single", + static: true, + monthSelectorType: "static", + dateFormat: "M j, Y", + }); + }, []); + + return ( +
+ +
+ + +
+ +
+
+
+ ); +}; + +export default DatePickerOne; diff --git a/src/components/FormElements/DatePicker/DatePickerTwo.tsx b/src/components/FormElements/DatePicker/DatePickerTwo.tsx new file mode 100644 index 0000000..1674a56 --- /dev/null +++ b/src/components/FormElements/DatePicker/DatePickerTwo.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { ChevronUpIcon } from "@/assets/icons"; +import flatpickr from "flatpickr"; +import { useEffect } from "react"; + +const DatePickerTwo = () => { + useEffect(() => { + // Init flatpickr + flatpickr(".form-datepicker", { + mode: "single", + static: true, + monthSelectorType: "static", + dateFormat: "M j, Y", + }); + }, []); + + return ( +
+ +
+ + +
+ +
+
+
+ ); +}; + +export default DatePickerTwo; diff --git a/src/components/FormElements/InputGroup/index.tsx b/src/components/FormElements/InputGroup/index.tsx new file mode 100644 index 0000000..92e4fb1 --- /dev/null +++ b/src/components/FormElements/InputGroup/index.tsx @@ -0,0 +1,90 @@ +import { cn } from "@/lib/utils"; +import { type HTMLInputTypeAttribute, useId } from "react"; + +type InputGroupProps = { + className?: string; + label: string; + placeholder: string; + type: HTMLInputTypeAttribute; + fileStyleVariant?: "style1" | "style2"; + required?: boolean; + disabled?: boolean; + active?: boolean; + handleChange?: (e: React.ChangeEvent) => void; + value?: string; + name?: string; + icon?: React.ReactNode; + iconPosition?: "left" | "right"; + height?: "sm" | "default"; + defaultValue?: string; +}; + +const InputGroup: React.FC = ({ + className, + label, + type, + placeholder, + required, + disabled, + active, + handleChange, + icon, + ...props +}) => { + const id = useId(); + + return ( +
+ + +
+ + + {icon} +
+
+ ); +}; + +export default InputGroup; + +function getFileStyles(variant: "style1" | "style2") { + switch (variant) { + case "style1": + return `file:mr-5 file:border-collapse file:cursor-pointer file:border-0 file:border-r file:border-solid file:border-stroke file:bg-[#E2E8F0] file:px-6.5 file:py-[13px] file:text-body-sm file:font-medium file:text-dark-5 file:hover:bg-primary file:hover:bg-opacity-10 dark:file:border-dark-3 dark:file:bg-white/30 dark:file:text-white`; + default: + return `file:mr-4 file:rounded file:border-[0.5px] file:border-stroke file:bg-stroke file:px-2.5 file:py-1 file:text-body-xs file:font-medium file:text-dark-5 file:focus:border-primary dark:file:border-dark-3 dark:file:bg-white/30 dark:file:text-white px-3 py-[9px]`; + } +} diff --git a/src/components/FormElements/InputGroup/text-area.tsx b/src/components/FormElements/InputGroup/text-area.tsx new file mode 100644 index 0000000..ea6e01d --- /dev/null +++ b/src/components/FormElements/InputGroup/text-area.tsx @@ -0,0 +1,55 @@ +import { cn } from "@/lib/utils"; +import { useId } from "react"; + +interface PropsType { + label: string; + placeholder: string; + required?: boolean; + disabled?: boolean; + active?: boolean; + className?: string; + icon?: React.ReactNode; + defaultValue?: string; +} + +export function TextAreaGroup({ + label, + placeholder, + required, + disabled, + active, + className, + icon, + defaultValue, +}: PropsType) { + const id = useId(); + + return ( +
+ + +
+