Updated-codebase with Authentication flow
This commit is contained in:
commit
e0e08043f1
2
.env.example
Normal file
2
.env.example
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# API Configuration
|
||||||
|
VITE_API_BASE_URL=http://localhost:3000/api
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
141
README.md
Normal file
141
README.md
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
# AgenticIQ
|
||||||
|
|
||||||
|
A modern React application built with TypeScript, Tailwind CSS, and shadcn/ui, following **AgenticIQ Enterprise Coding Guidelines & Best Practices Version 1.0** from Tech4Biz Solutions Pvt Ltd.
|
||||||
|
|
||||||
|
## 🚀 Features
|
||||||
|
|
||||||
|
- ⚡ **Vite** - Lightning-fast build tool
|
||||||
|
- ⚛️ **React 18** with TypeScript
|
||||||
|
- 🎨 **Tailwind CSS** - Utility-first CSS framework
|
||||||
|
- 🧩 **shadcn/ui** - Beautiful, accessible component library
|
||||||
|
- 📱 **Responsive Design** - Mobile-first with 7 breakpoints
|
||||||
|
- 🔒 **Type Safety** - Strict TypeScript configuration
|
||||||
|
- 📦 **Path Aliases** - Clean imports with `@/` prefix
|
||||||
|
- 🎯 **Best Practices** - Following enterprise coding standards
|
||||||
|
|
||||||
|
## 📋 Prerequisites
|
||||||
|
|
||||||
|
- Node.js 18+
|
||||||
|
- npm or yarn
|
||||||
|
|
||||||
|
## 🛠️ Installation
|
||||||
|
|
||||||
|
1. Clone the repository:
|
||||||
|
```bash
|
||||||
|
git clone <repository-url>
|
||||||
|
cd AgenticIQ
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Create environment file:
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Start development server:
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📁 Project Structure
|
||||||
|
|
||||||
|
Following AgenticIQ guidelines, the project is organized as:
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/ # Reusable UI components
|
||||||
|
│ └── ui/ # shadcn/ui components
|
||||||
|
├── pages/ # Route-level components
|
||||||
|
├── hooks/ # Custom React hooks
|
||||||
|
├── services/ # API calls and external services
|
||||||
|
├── utils/ # Helper functions
|
||||||
|
├── types/ # TypeScript type definitions
|
||||||
|
├── constants/ # Application constants
|
||||||
|
└── lib/ # Third-party library configurations
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎨 Responsive Breakpoints
|
||||||
|
|
||||||
|
Following AgenticIQ responsive design guidelines:
|
||||||
|
|
||||||
|
- **Mobile S** (`< 375px`): Extra small mobile devices
|
||||||
|
- **Mobile M** (`375px - 424px`): Standard mobile devices
|
||||||
|
- **Mobile L** (`425px - 767px`): Large mobile devices
|
||||||
|
- **Tablet** (`768px - 1023px`): Tablet devices
|
||||||
|
- **Laptop** (`1024px - 1439px`): Laptop screens
|
||||||
|
- **Desktop** (`1440px - 1919px`): Desktop screens
|
||||||
|
- **Large Display** (`≥ 1920px`): Large displays
|
||||||
|
|
||||||
|
## 📝 Naming Conventions
|
||||||
|
|
||||||
|
Following AgenticIQ standards:
|
||||||
|
|
||||||
|
- **Components/Interfaces**: `PascalCase`
|
||||||
|
- **Functions/Variables**: `camelCase`
|
||||||
|
- **Constants**: `SCREAMING_SNAKE_CASE`
|
||||||
|
- **CSS Classes/Files**: `kebab-case`
|
||||||
|
- **Private Fields**: `_camelCase`
|
||||||
|
|
||||||
|
## 🧪 Available Scripts
|
||||||
|
|
||||||
|
- `npm run dev` - Start development server
|
||||||
|
- `npm run build` - Build for production
|
||||||
|
- `npm run preview` - Preview production build
|
||||||
|
- `npm run lint` - Run ESLint
|
||||||
|
|
||||||
|
## 📚 Adding shadcn/ui Components
|
||||||
|
|
||||||
|
To add new shadcn/ui components:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx shadcn@latest add button
|
||||||
|
npx shadcn@latest add card
|
||||||
|
npx shadcn@latest add input
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎯 Code Quality Standards
|
||||||
|
|
||||||
|
This project follows:
|
||||||
|
|
||||||
|
- **File Size**: < 250 lines per file
|
||||||
|
- **Function Parameters**: Max 4 parameters
|
||||||
|
- **Nesting Levels**: Max 3 levels
|
||||||
|
- **Test Coverage**: Min 80% line coverage
|
||||||
|
- **Documentation**: JSDoc for all public functions
|
||||||
|
|
||||||
|
## 🔒 Security
|
||||||
|
|
||||||
|
- Input validation on client and server
|
||||||
|
- XSS prevention
|
||||||
|
- CSRF protection
|
||||||
|
- Secure authentication practices
|
||||||
|
|
||||||
|
## 📖 Documentation
|
||||||
|
|
||||||
|
All functions include JSDoc comments with:
|
||||||
|
- `@description` - What the function does
|
||||||
|
- `@param` - Parameter descriptions
|
||||||
|
- `@returns` - Return value description
|
||||||
|
- `@throws` - Possible errors
|
||||||
|
- `@example` - Usage examples
|
||||||
|
|
||||||
|
## 🤝 Contributing
|
||||||
|
|
||||||
|
Follow the AgenticIQ Enterprise Coding Guidelines when contributing:
|
||||||
|
|
||||||
|
1. Use conventional commits (`feat:`, `fix:`, `docs:`, etc.)
|
||||||
|
2. Follow branching strategy (`feature/`, `bugfix/`, `hotfix/`)
|
||||||
|
3. Maintain code quality standards
|
||||||
|
4. Add tests for new features
|
||||||
|
|
||||||
|
## 📄 License
|
||||||
|
|
||||||
|
[Your License Here]
|
||||||
|
|
||||||
|
## 🙏 Acknowledgments
|
||||||
|
|
||||||
|
Built following **AgenticIQ Enterprise Coding Guidelines & Best Practices Version 1.0** by Tech4Biz Solutions Pvt Ltd.
|
||||||
21
css-custom-data.json
Normal file
21
css-custom-data.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"version": 1.1,
|
||||||
|
"atDirectives": [
|
||||||
|
{
|
||||||
|
"name": "@tailwind",
|
||||||
|
"description": "Use the @tailwind directive to insert Tailwind's base, components, utilities and variants styles into your CSS."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "@apply",
|
||||||
|
"description": "Use @apply to inline any existing utility classes into your own custom CSS."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "@layer",
|
||||||
|
"description": "Use the @layer directive to tell Tailwind which \"bucket\" a set of custom styles belong to."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "@config",
|
||||||
|
"description": "Use the @config directive to specify which config file Tailwind should use when compiling that CSS file."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
23
eslint.config.js
Normal file
23
eslint.config.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
16
index.html
Normal file
16
index.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>AgenticIQ</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
6142
package-lock.json
generated
Normal file
6142
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
50
package.json
Normal file
50
package.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "agenticiq",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test": "vitest",
|
||||||
|
"test:coverage": "vitest --coverage"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@hookform/resolvers": "^3.9.1",
|
||||||
|
"@tailwindcss/vite": "^4.1.18",
|
||||||
|
"@tanstack/react-query": "^5.62.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-react": "^0.562.0",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-hook-form": "^7.54.0",
|
||||||
|
"tailwind-merge": "^3.4.0",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"zod": "^3.24.0",
|
||||||
|
"zustand": "^5.0.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.1",
|
||||||
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
|
"@testing-library/react": "^16.1.0",
|
||||||
|
"@types/node": "^24.10.4",
|
||||||
|
"@types/react": "^18.3.12",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react-swc": "^4.2.2",
|
||||||
|
"autoprefixer": "^10.4.23",
|
||||||
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.24",
|
||||||
|
"globals": "^16.5.0",
|
||||||
|
"jsdom": "^25.0.1",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"typescript-eslint": "^8.46.4",
|
||||||
|
"vite": "^7.2.4",
|
||||||
|
"vitest": "^2.1.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
17
src/App.tsx
Normal file
17
src/App.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/**
|
||||||
|
* Main App component
|
||||||
|
* @description Root application component that renders the main layout
|
||||||
|
*/
|
||||||
|
|
||||||
|
import SignInPage from './pages/sign-in-page';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* App component
|
||||||
|
* @description Application entry point that renders the dashboard
|
||||||
|
* @returns {JSX.Element} Root application element
|
||||||
|
*/
|
||||||
|
function App(): JSX.Element {
|
||||||
|
return <SignInPage />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
src/assets/decorative/bottomGradient1.png
Normal file
BIN
src/assets/decorative/bottomGradient1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
src/assets/decorative/bottomGradient2.png
Normal file
BIN
src/assets/decorative/bottomGradient2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
src/assets/decorative/topleft1.png
Normal file
BIN
src/assets/decorative/topleft1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
src/assets/decorative/toprigth2.png
Normal file
BIN
src/assets/decorative/toprigth2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
16
src/assets/logo/AgenticIQLogo.svg
Normal file
16
src/assets/logo/AgenticIQLogo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 77 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
89
src/components/auth/auth-layout.tsx
Normal file
89
src/components/auth/auth-layout.tsx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
|
import logoImage from '@/assets/logo/AgenticIQLogo.svg';
|
||||||
|
import topLeftDecoration from '@/assets/decorative/topleft1.png';
|
||||||
|
import topRightDecoration from '@/assets/decorative/toprigth2.png';
|
||||||
|
import bottomGradient1 from '@/assets/decorative/bottomGradient1.png';
|
||||||
|
import bottomGradient2 from '@/assets/decorative/bottomGradient2.png';
|
||||||
|
|
||||||
|
type AuthLayoutProps = {
|
||||||
|
children: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Main authentication layout wrapper with branded hero and decorative backgrounds
|
||||||
|
* Uses strict z-index layering with constrained, subtle background decorations
|
||||||
|
* Layer 0: Background images (z-0, pointer-events-none, low opacity, size-constrained)
|
||||||
|
* Layer 1: Content grid (z-10, relative)
|
||||||
|
* @returns {JSX.Element} Full-page layout with left hero and right content slot
|
||||||
|
*/
|
||||||
|
function AuthLayout({ children }: AuthLayoutProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className="relative w-full h-screen overflow-hidden bg-slate-50">
|
||||||
|
{/* ========== BACKGROUND LAYER (Z-0) ========== */}
|
||||||
|
|
||||||
|
{/* Top Left Decoration */}
|
||||||
|
<img
|
||||||
|
src={topLeftDecoration}
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute top-0 left-0 z-0 w-[250px] opacity-50 pointer-events-none select-none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Top Right Decoration */}
|
||||||
|
<img
|
||||||
|
src={topRightDecoration}
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute top-0 right-0 z-0 w-[320px] opacity-50 pointer-events-none select-none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Bottom Wave 1 - Main wave (constrained size) */}
|
||||||
|
<img
|
||||||
|
src={bottomGradient1}
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute bottom-0 left-0 z-0 w-[40vw] max-w-[600px] opacity-20 pointer-events-none select-none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Bottom Wave 2 - Secondary wave (smaller, offset for layered effect) */}
|
||||||
|
<img
|
||||||
|
src={bottomGradient2}
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute bottom-0 left-0 z-0 w-[35vw] max-w-[500px] opacity-20 translate-x-4 translate-y-4 pointer-events-none select-none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* ========== CONTENT LAYER (Z-10) ========== */}
|
||||||
|
<div className="relative z-10 flex w-full h-full">
|
||||||
|
{/* Left Content Column */}
|
||||||
|
<div className="hidden lg:flex lg:w-1/2 flex-col">
|
||||||
|
{/* Logo at top-left with padding */}
|
||||||
|
<div className="p-12">
|
||||||
|
<img src={logoImage} alt="AgenticIQ logo" className="w-48" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hero Text - Centered vertically */}
|
||||||
|
<div className="flex-1 flex items-center px-12 xl:px-16">
|
||||||
|
<div className="max-w-lg">
|
||||||
|
<h1 className="text-4xl lg:text-5xl font-bold leading-tight text-gray-900">
|
||||||
|
Engineering the Future with Intelligent Agents
|
||||||
|
</h1>
|
||||||
|
<p className="mt-6 text-lg text-gray-600 leading-relaxed">
|
||||||
|
Deploy intelligent agents that automate complex workflows, enhance decision-making, and scale
|
||||||
|
your operations. Built for enterprise reliability with seamless integration capabilities.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Content Column - Card Slot */}
|
||||||
|
<div className="w-full lg:w-1/2 flex items-center justify-center px-6 py-12">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthLayout;
|
||||||
126
src/components/auth/login-card.tsx
Normal file
126
src/components/auth/login-card.tsx
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Eye, EyeOff } from 'lucide-react';
|
||||||
|
|
||||||
|
const inputClasses = [
|
||||||
|
'h-12 w-full rounded-lg',
|
||||||
|
'bg-white/10 border border-white/20',
|
||||||
|
'px-4 text-white placeholder:text-white/70',
|
||||||
|
'outline-none transition-all duration-200',
|
||||||
|
'focus:border-white/50 focus:ring-2 focus:ring-white/30',
|
||||||
|
].join(' ');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Login card with Figma-matched gradient, glassmorphism inputs, and social sign-in
|
||||||
|
* Gradient: from-[#00B4DB] (rich cyan) to-[#003399] (deep royal blue)
|
||||||
|
* @returns {JSX.Element} Login card component
|
||||||
|
*/
|
||||||
|
function LoginCard(): JSX.Element {
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-[90%] sm:max-w-[420px] rounded-[30px] bg-gradient-to-b from-[#00B4DB] to-[#003399] p-10 shadow-2xl">
|
||||||
|
<header className="text-center">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-semibold text-white">Sign In to Your Account</h2>
|
||||||
|
<p className="mt-2 text-sm text-white/80">
|
||||||
|
Welcome back. Please enter<br />your credentials.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<form className="mt-8 space-y-5">
|
||||||
|
{/* Email Field */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-white" htmlFor="email">
|
||||||
|
Email<span className="text-cyan-300">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
aria-label="Email"
|
||||||
|
type="email"
|
||||||
|
placeholder="Enter your email address"
|
||||||
|
className={inputClasses}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Password Field */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-white" htmlFor="password">
|
||||||
|
Password<span className="text-cyan-300">*</span>
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
aria-label="Password"
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
className={`${inputClasses} pr-12`}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword((prev) => !prev)}
|
||||||
|
className="absolute inset-y-0 right-3 flex items-center text-white/70 hover:text-white transition-colors"
|
||||||
|
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<a
|
||||||
|
className="text-sm text-white hover:underline transition-colors"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Forgot your password?
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sign In Button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => console.log('Sign In clicked')}
|
||||||
|
className="h-12 w-full rounded-lg bg-[#00E5FF] text-base font-semibold text-[#0F172A] transition-all duration-300 hover:bg-[#00D4ED] active:scale-[0.98]"
|
||||||
|
>
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Social Sign In Buttons */}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => console.log('Google sign in clicked')}
|
||||||
|
className="flex h-11 flex-1 items-center justify-center gap-2 rounded-lg bg-white text-sm font-medium text-[#374151] transition-all duration-200 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 48 48" className="h-5 w-5" aria-hidden="true">
|
||||||
|
<path fill="#EA4335" d="M24 9.5c3.05 0 5.8 1.05 7.95 3.1l5.9-5.9C33.45 2.6 29.05.5 24 .5 14.95.5 7 6.8 4.05 15.05l6.95 5.4C12.8 14.7 17.9 9.5 24 9.5z" />
|
||||||
|
<path fill="#34A853" d="M46.5 24.5c0-1.55-.15-3.05-.45-4.5H24v9h12.7c-.55 2.95-2.2 5.45-4.7 7.15l7.3 5.65C43.55 38.65 46.5 32.15 46.5 24.5z" />
|
||||||
|
<path fill="#FBBC05" d="M10.95 28.85a14.52 14.52 0 0 1-.8-4.35c0-1.5.3-2.95.8-4.35l-6.95-5.4C1.35 17.9.5 21.1.5 24.5s.85 6.6 2.7 9.75l7.75-5.4z" />
|
||||||
|
<path fill="#4285F4" d="M24 47.5c5.05 0 9.35-1.65 12.45-4.5l-7.3-5.65c-2.05 1.35-4.7 2.15-7.15 2.15-6.1 0-11.2-5.2-12.1-11.95l-7.95 6.1C7 41.2 14.95 47.5 24 47.5z" />
|
||||||
|
</svg>
|
||||||
|
Sign in with Google
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => console.log('Azure sign in clicked')}
|
||||||
|
className="flex h-11 flex-1 items-center justify-center gap-2 rounded-lg bg-white text-sm font-medium text-[#374151] transition-all duration-200 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<span className="flex h-5 w-5 items-center justify-center rounded-sm bg-[#0078D4]" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 21 21" className="h-3 w-3" fill="white">
|
||||||
|
<path d="M0 10.5L7.5 0h6L0 10.5zm7.5 0L0 21h6l7.5-10.5H7.5zM15 10.5L7.5 21h6L21 10.5 13.5 0h-6l7.5 10.5z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Sign in with Azure
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Register Link */}
|
||||||
|
<p className="text-center text-sm text-white/90">
|
||||||
|
Don't have an account?{' '}
|
||||||
|
<a className="font-medium text-white hover:underline" href="#">
|
||||||
|
Register here
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoginCard;
|
||||||
49
src/components/dashboard/agent-card.tsx
Normal file
49
src/components/dashboard/agent-card.tsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
/**
|
||||||
|
* Agent Card Component
|
||||||
|
* @description Displays agent information with tags and description
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Agent card component props interface
|
||||||
|
* @description Props for the AgentCard component
|
||||||
|
*/
|
||||||
|
export interface IAgentCardProps {
|
||||||
|
title: string;
|
||||||
|
tags: string[];
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AgentCard component
|
||||||
|
* @description Card showing agent details with tags and hover effects
|
||||||
|
* @param {IAgentCardProps} props - Component props
|
||||||
|
* @param {string} props.title - Agent title
|
||||||
|
* @param {string[]} props.tags - Array of tag labels
|
||||||
|
* @param {string} props.description - Agent description text
|
||||||
|
* @returns {JSX.Element} AgentCard element
|
||||||
|
*/
|
||||||
|
export function AgentCard({ title, tags, description }: IAgentCardProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 card-hover">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-3">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2 mb-4">
|
||||||
|
{tags.map((tag, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="px-3 py-1 text-xs font-medium rounded-full bg-gray-100
|
||||||
|
text-gray-700 border border-gray-200"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-gray-600 leading-relaxed">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
90
src/components/dashboard/dashboard-header.tsx
Normal file
90
src/components/dashboard/dashboard-header.tsx
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
/**
|
||||||
|
* Dashboard Header Component
|
||||||
|
* @description Top header with search, notifications, and user actions
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Search, Bell, Moon, User } from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { useUIStore } from '@/stores';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DashboardHeader component
|
||||||
|
* @description Renders the top navigation header with search and user controls
|
||||||
|
* @returns {JSX.Element} Header element
|
||||||
|
*/
|
||||||
|
export function DashboardHeader(): JSX.Element {
|
||||||
|
const { toggleDarkMode } = useUIStore();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="bg-transparent sticky top-0 z-40">
|
||||||
|
<div className="px-4 sm:px-6 md:px-8 py-3 sm:py-4 flex items-center justify-between gap-4">
|
||||||
|
{/* Spacer for layout balance */}
|
||||||
|
<div className="flex-1 hidden lg:block" />
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 sm:gap-4 w-full lg:w-auto justify-end">
|
||||||
|
{/* Search - Hidden on mobile, shown on larger screens */}
|
||||||
|
<div className="relative hidden sm:block">
|
||||||
|
<Search
|
||||||
|
className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search"
|
||||||
|
className="pl-10 pr-4 py-2 bg-gray-100 rounded-lg text-sm
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||||
|
w-48 md:w-64 min-h-[44px]"
|
||||||
|
aria-label="Search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Search Button */}
|
||||||
|
<button
|
||||||
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors
|
||||||
|
sm:hidden min-h-[44px] min-w-[44px] flex items-center justify-center"
|
||||||
|
aria-label="Open search"
|
||||||
|
>
|
||||||
|
<Search className="w-5 h-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Notification Bell */}
|
||||||
|
<button
|
||||||
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors
|
||||||
|
min-h-[44px] min-w-[44px] flex items-center justify-center"
|
||||||
|
aria-label="View notifications"
|
||||||
|
>
|
||||||
|
<Bell className="w-5 h-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Dark Mode Toggle */}
|
||||||
|
<button
|
||||||
|
onClick={toggleDarkMode}
|
||||||
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors
|
||||||
|
min-h-[44px] min-w-[44px] flex items-center justify-center"
|
||||||
|
aria-label="Toggle dark mode"
|
||||||
|
>
|
||||||
|
<Moon className="w-5 h-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* User Avatar */}
|
||||||
|
<button
|
||||||
|
className="w-8 h-8 sm:w-10 sm:h-10 bg-gray-300 rounded-full
|
||||||
|
flex items-center justify-center min-h-[44px] min-w-[44px]"
|
||||||
|
aria-label="User menu"
|
||||||
|
>
|
||||||
|
<User className="w-5 h-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Create Agent Button */}
|
||||||
|
<Button
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white px-4 sm:px-6 py-2
|
||||||
|
rounded-lg font-medium text-sm sm:text-base min-h-[44px]"
|
||||||
|
>
|
||||||
|
<span className="hidden sm:inline">+ Create Agent</span>
|
||||||
|
<span className="sm:hidden">+ New</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
9
src/components/dashboard/index.ts
Normal file
9
src/components/dashboard/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* Dashboard components barrel export
|
||||||
|
* @description Centralized exports for dashboard components
|
||||||
|
*/
|
||||||
|
|
||||||
|
export { Sidebar } from './sidebar';
|
||||||
|
export { MetricCard } from './metric-card';
|
||||||
|
export { AgentCard } from './agent-card';
|
||||||
|
export { DashboardHeader } from './dashboard-header';
|
||||||
53
src/components/dashboard/metric-card.tsx
Normal file
53
src/components/dashboard/metric-card.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
/**
|
||||||
|
* Metric Card Component
|
||||||
|
* @description Displays metric information with gradient background
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Metric card component props interface
|
||||||
|
* @description Props for the MetricCard component
|
||||||
|
*/
|
||||||
|
export interface IMetricCardProps {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
value: string;
|
||||||
|
gradient: 'teal' | 'purple' | 'orange' | 'blue';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* MetricCard component
|
||||||
|
* @description Card showing metric with gradient background and hover effects
|
||||||
|
* @param {IMetricCardProps} props - Component props
|
||||||
|
* @param {string} props.title - Metric title
|
||||||
|
* @param {string} props.subtitle - Metric subtitle
|
||||||
|
* @param {string} props.value - Metric display value
|
||||||
|
* @param {string} props.gradient - Gradient color theme
|
||||||
|
* @returns {JSX.Element} MetricCard element
|
||||||
|
*/
|
||||||
|
export function MetricCard({
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
value,
|
||||||
|
gradient
|
||||||
|
}: IMetricCardProps): JSX.Element {
|
||||||
|
const gradientClass = `gradient-${gradient}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${gradientClass} rounded-2xl p-6 text-white card-hover cursor-pointer
|
||||||
|
min-h-[140px] sm:min-h-[160px]`}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<div className="text-xs sm:text-sm font-medium opacity-90 mb-1">
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs opacity-80 mb-4">
|
||||||
|
{subtitle}
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl sm:text-4xl font-bold mt-auto">
|
||||||
|
{value}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
96
src/components/dashboard/sidebar.tsx
Normal file
96
src/components/dashboard/sidebar.tsx
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
/**
|
||||||
|
* Dashboard Sidebar Component
|
||||||
|
* @description Vertical navigation sidebar with icons and responsive behavior
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
Home,
|
||||||
|
Brain,
|
||||||
|
LayoutGrid,
|
||||||
|
Lightbulb,
|
||||||
|
Share2,
|
||||||
|
ShoppingBag,
|
||||||
|
Wrench,
|
||||||
|
Share,
|
||||||
|
Settings2,
|
||||||
|
RotateCcw,
|
||||||
|
Settings
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Navigation item interface
|
||||||
|
* @description Defines structure for sidebar navigation items
|
||||||
|
*/
|
||||||
|
interface INavigationItem {
|
||||||
|
icon: React.ElementType;
|
||||||
|
label: string;
|
||||||
|
isActive?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Top navigation items
|
||||||
|
*/
|
||||||
|
const TOP_NAV_ITEMS: INavigationItem[] = [
|
||||||
|
{ icon: Home, label: 'Home', isActive: true },
|
||||||
|
{ icon: Brain, label: 'AI Agents' },
|
||||||
|
{ icon: LayoutGrid, label: 'Dashboard' },
|
||||||
|
{ icon: Lightbulb, label: 'Ideas' },
|
||||||
|
{ icon: Share2, label: 'Flows' },
|
||||||
|
{ icon: ShoppingBag, label: 'Store' },
|
||||||
|
{ icon: Wrench, label: 'Tools' },
|
||||||
|
{ icon: Share, label: 'Share' },
|
||||||
|
{ icon: Settings2, label: 'Settings' },
|
||||||
|
{ icon: RotateCcw, label: 'History' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sidebar component
|
||||||
|
* @description Left sidebar navigation with icon menu and responsive design
|
||||||
|
* @returns {JSX.Element} Sidebar element
|
||||||
|
*/
|
||||||
|
export function Sidebar(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
className="fixed left-2 sm:left-6 top-4 sm:top-24 bottom-4 sm:bottom-6
|
||||||
|
w-12 sm:w-16 bg-gradient-to-b from-[#00A1A0] to-[#00166D]
|
||||||
|
flex flex-col items-center py-4 sm:py-6 gap-4 sm:gap-6 z-50
|
||||||
|
rounded-xl sm:rounded-2xl shadow-xl"
|
||||||
|
>
|
||||||
|
{/* Navigation Icons */}
|
||||||
|
<nav className="flex flex-col items-center gap-3 sm:gap-5 flex-1 w-full">
|
||||||
|
{TOP_NAV_ITEMS.map((item, index) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
className={`min-h-[44px] min-w-[44px] w-8 h-8 sm:w-10 sm:h-10
|
||||||
|
rounded-lg sm:rounded-xl flex items-center justify-center
|
||||||
|
transition-all duration-200 ${
|
||||||
|
item.isActive
|
||||||
|
? 'bg-white/20 text-white shadow-inner'
|
||||||
|
: 'text-white/70 hover:bg-white/10 hover:text-white'
|
||||||
|
}`}
|
||||||
|
aria-label={item.label}
|
||||||
|
>
|
||||||
|
<Icon className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Bottom Settings Icon */}
|
||||||
|
<div className="flex flex-col gap-4 mt-auto">
|
||||||
|
<button
|
||||||
|
className="min-h-[44px] min-w-[44px] w-8 h-8 sm:w-10 sm:h-10
|
||||||
|
rounded-lg sm:rounded-xl flex items-center justify-center
|
||||||
|
text-white/70 hover:bg-white/10 hover:text-white
|
||||||
|
transition-all duration-200"
|
||||||
|
aria-label="Settings"
|
||||||
|
>
|
||||||
|
<Settings className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
132
src/components/sign-in/sign-in-card.tsx
Normal file
132
src/components/sign-in/sign-in-card.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Eye, EyeOff } from 'lucide-react';
|
||||||
|
|
||||||
|
const inputClasses = [
|
||||||
|
'h-12 w-full rounded-lg',
|
||||||
|
'border border-white/30 bg-white/15',
|
||||||
|
'px-4 py-3 text-white placeholder:text-white/50',
|
||||||
|
'outline-none transition-all duration-200',
|
||||||
|
'focus:border-white/50 focus:ring-2 focus:ring-white/40',
|
||||||
|
'focus:ring-offset-2 focus:ring-offset-transparent',
|
||||||
|
'focus-visible:ring-2 focus-visible:ring-white/40',
|
||||||
|
'focus-visible:ring-offset-2 focus-visible:ring-offset-transparent',
|
||||||
|
].join(' ');
|
||||||
|
|
||||||
|
function PasswordField(): JSX.Element {
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-white" htmlFor="password">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
aria-label="Password"
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
className={`${inputClasses} pr-12`}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword((prev) => !prev)}
|
||||||
|
className="absolute inset-y-0 right-3 flex items-center text-white/70"
|
||||||
|
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<a
|
||||||
|
className="text-sm text-white transition-colors duration-200 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent focus-visible:underline"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Forgot your password?
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SocialButtons(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => console.log('Google sign in clicked')}
|
||||||
|
className="flex h-12 flex-1 items-center justify-center gap-2 rounded-lg bg-white text-sm font-medium text-[#374151] transition-all duration-300 hover:scale-[1.02] hover:bg-[#F3F4F6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
|
||||||
|
>
|
||||||
|
<span aria-hidden="true" className="h-5 w-5 rounded-full bg-white">
|
||||||
|
<svg viewBox="0 0 48 48" className="h-5 w-5">
|
||||||
|
<path fill="#EA4335" d="M24 9.5c3.05 0 5.8 1.05 7.95 3.1l5.9-5.9C33.45 2.6 29.05.5 24 .5 14.95.5 7 6.8 4.05 15.05l6.95 5.4C12.8 14.7 17.9 9.5 24 9.5z" />
|
||||||
|
<path fill="#34A853" d="M46.5 24.5c0-1.55-.15-3.05-.45-4.5H24v9h12.7c-.55 2.95-2.2 5.45-4.7 7.15l7.3 5.65C43.55 38.65 46.5 32.15 46.5 24.5z" />
|
||||||
|
<path fill="#FBBC05" d="M10.95 28.85a14.52 14.52 0 0 1-.8-4.35c0-1.5.3-2.95.8-4.35l-6.95-5.4C1.35 17.9.5 21.1.5 24.5s.85 6.6 2.7 9.75l7.75-5.4z" />
|
||||||
|
<path fill="#4285F4" d="M24 47.5c5.05 0 9.35-1.65 12.45-4.5l-7.3-5.65c-2.05 1.35-4.7 2.15-7.15 2.15-6.1 0-11.2-5.2-12.1-11.95l-7.95 6.1C7 41.2 14.95 47.5 24 47.5z" />
|
||||||
|
<path fill="none" d="M0 0h48v48H0z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Sign in with Google
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => console.log('Azure sign in clicked')}
|
||||||
|
className="flex h-12 flex-1 items-center justify-center gap-2 rounded-lg bg-white text-sm font-medium text-[#374151] transition-all duration-300 hover:scale-[1.02] hover:bg-[#F3F4F6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
|
||||||
|
>
|
||||||
|
<span aria-hidden="true" className="h-5 w-5 rounded-sm bg-[#0078D4]" />
|
||||||
|
Sign in with Azure
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SignInCard(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-[90%] sm:max-w-[480px] rounded-3xl bg-gradient-to-b from-[#17C1B7] to-[#0A2B5C] p-8 sm:p-12 lg:p-16 shadow-2xl">
|
||||||
|
<header className="text-center">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-semibold text-white">Sign In to Your Account</h2>
|
||||||
|
<p className="mt-2 text-sm text-white/80">Welcome back. Please enter your credentials.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<form className="mt-8 space-y-5">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-white" htmlFor="email">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
aria-label="Email"
|
||||||
|
type="email"
|
||||||
|
placeholder="Enter your email address"
|
||||||
|
className={inputClasses}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PasswordField />
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => console.log('Sign In clicked')}
|
||||||
|
className="h-[52px] w-full rounded-lg bg-[#00D9C8] text-base font-semibold text-[#1E293B] transition-all duration-300 hover:scale-[1.02] hover:bg-[#00C0B0] active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
|
||||||
|
>
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<SocialButtons />
|
||||||
|
|
||||||
|
<p className="text-center text-sm text-white/90">
|
||||||
|
Don't have an account?{' '}
|
||||||
|
<a
|
||||||
|
className="font-medium text-white transition-colors duration-200 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Register here
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SignInCard;
|
||||||
|
|
||||||
3
src/components/ui/.gitkeep.ts
Normal file
3
src/components/ui/.gitkeep.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
// Placeholder for components/ui directory
|
||||||
|
// shadcn/ui components will be added here
|
||||||
|
export { }
|
||||||
108
src/components/ui/button.tsx
Normal file
108
src/components/ui/button.tsx
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
/**
|
||||||
|
* Button component
|
||||||
|
* @description Reusable button component with variants following shadcn/ui patterns
|
||||||
|
*/
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
|
||||||
|
text-sm font-medium transition-all duration-200 focus-visible:outline-none
|
||||||
|
focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2
|
||||||
|
disabled:pointer-events-none disabled:opacity-50
|
||||||
|
[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-slate-900 text-white shadow hover:bg-slate-800",
|
||||||
|
destructive:
|
||||||
|
"bg-red-600 text-white shadow-sm hover:bg-red-700",
|
||||||
|
outline:
|
||||||
|
"border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50",
|
||||||
|
secondary:
|
||||||
|
"bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-200",
|
||||||
|
ghost: "text-slate-900 hover:bg-slate-100",
|
||||||
|
link: "text-slate-900 underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2",
|
||||||
|
sm: "h-8 rounded-md px-3 text-xs",
|
||||||
|
lg: "h-10 rounded-md px-8",
|
||||||
|
icon: "h-9 w-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Button component props interface
|
||||||
|
* @description Props for the Button component extending HTML button attributes
|
||||||
|
*/
|
||||||
|
export interface IButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
isLoading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Button component with multiple variants
|
||||||
|
* @description Accessible button component with size and variant options
|
||||||
|
* @param {IButtonProps} props - Component props
|
||||||
|
* @param {string} props.variant - Visual style variant
|
||||||
|
* @param {string} props.size - Button size
|
||||||
|
* @param {string} props.className - Additional CSS classes
|
||||||
|
* @param {boolean} props.isLoading - Loading state indicator
|
||||||
|
* @param {React.ReactNode} props.children - Button content
|
||||||
|
* @returns {JSX.Element} Button element
|
||||||
|
* @example
|
||||||
|
* <Button variant="default" size="lg">Click me</Button>
|
||||||
|
*/
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
|
||||||
|
({ className, variant, size, isLoading, children, disabled, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
disabled={disabled || isLoading}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<svg
|
||||||
|
className="animate-spin h-4 w-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
className="opacity-25"
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Loading...
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
children
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Button.displayName = "Button";
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
35
src/constants/api.ts
Normal file
35
src/constants/api.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
/**
|
||||||
|
* API configuration constants
|
||||||
|
* @description Central location for API-related configuration
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api'
|
||||||
|
|
||||||
|
export const API_TIMEOUT = 30000 // 30 seconds
|
||||||
|
|
||||||
|
export const API_ENDPOINTS = {
|
||||||
|
AUTH: {
|
||||||
|
LOGIN: '/auth/login',
|
||||||
|
LOGOUT: '/auth/logout',
|
||||||
|
REGISTER: '/auth/register',
|
||||||
|
REFRESH: '/auth/refresh',
|
||||||
|
},
|
||||||
|
USERS: {
|
||||||
|
LIST: '/users',
|
||||||
|
DETAIL: (id: string) => `/users/${id}`,
|
||||||
|
CREATE: '/users',
|
||||||
|
UPDATE: (id: string) => `/users/${id}`,
|
||||||
|
DELETE: (id: string) => `/users/${id}`,
|
||||||
|
},
|
||||||
|
} as const
|
||||||
|
|
||||||
|
export const HTTP_STATUS = {
|
||||||
|
OK: 200,
|
||||||
|
CREATED: 201,
|
||||||
|
NO_CONTENT: 204,
|
||||||
|
BAD_REQUEST: 400,
|
||||||
|
UNAUTHORIZED: 401,
|
||||||
|
FORBIDDEN: 403,
|
||||||
|
NOT_FOUND: 404,
|
||||||
|
INTERNAL_SERVER_ERROR: 500,
|
||||||
|
} as const
|
||||||
58
src/hooks/index.ts
Normal file
58
src/hooks/index.ts
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
/**
|
||||||
|
* Custom React hooks
|
||||||
|
* @description Reusable hooks following AgenticIQ best practices
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook for managing media queries
|
||||||
|
* @description Tracks whether a media query matches
|
||||||
|
* @param query - Media query string
|
||||||
|
* @returns Boolean indicating if query matches
|
||||||
|
* @example
|
||||||
|
* const isMobile = useMediaQuery('(max-width: 768px)')
|
||||||
|
*/
|
||||||
|
export function useMediaQuery(query: string): boolean {
|
||||||
|
const [matches, setMatches] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const media = window.matchMedia(query)
|
||||||
|
|
||||||
|
if (media.matches !== matches) {
|
||||||
|
setMatches(media.matches)
|
||||||
|
}
|
||||||
|
|
||||||
|
const listener = () => setMatches(media.matches)
|
||||||
|
media.addEventListener('change', listener)
|
||||||
|
|
||||||
|
return () => media.removeEventListener('change', listener)
|
||||||
|
}, [matches, query])
|
||||||
|
|
||||||
|
return matches
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook for debouncing values
|
||||||
|
* @description Delays updating a value until after a specified delay
|
||||||
|
* @param value - Value to debounce
|
||||||
|
* @param delay - Delay in milliseconds
|
||||||
|
* @returns Debounced value
|
||||||
|
* @example
|
||||||
|
* const debouncedSearch = useDebounce(searchTerm, 500)
|
||||||
|
*/
|
||||||
|
export function useDebounce<T>(value: T, delay: number): T {
|
||||||
|
const [debouncedValue, setDebouncedValue] = useState<T>(value)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = setTimeout(() => {
|
||||||
|
setDebouncedValue(value)
|
||||||
|
}, delay)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(handler)
|
||||||
|
}
|
||||||
|
}, [value, delay])
|
||||||
|
|
||||||
|
return debouncedValue
|
||||||
|
}
|
||||||
215
src/index.css
Normal file
215
src/index.css
Normal file
@ -0,0 +1,215 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
/* Color System */
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 222.2 84% 4.9%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 222.2 84% 4.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 222.2 84% 4.9%;
|
||||||
|
--primary: 222.2 47.4% 11.2%;
|
||||||
|
--primary-foreground: 210 40% 98%;
|
||||||
|
--secondary: 210 40% 96.1%;
|
||||||
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--muted: 210 40% 96.1%;
|
||||||
|
--muted-foreground: 215.4 16.3% 46.9%;
|
||||||
|
--accent: 210 40% 96.1%;
|
||||||
|
--accent-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 214.3 31.8% 91.4%;
|
||||||
|
--input: 214.3 31.8% 91.4%;
|
||||||
|
--ring: 222.2 84% 4.9%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
|
||||||
|
/* Custom Dashboard Colors */
|
||||||
|
--sidebar-bg: 186 100% 29%;
|
||||||
|
--sidebar-hover: 186 100% 35%;
|
||||||
|
--teal-gradient-start: 186 100% 29%;
|
||||||
|
--teal-gradient-end: 186 80% 40%;
|
||||||
|
--purple-gradient-start: 280 100% 70%;
|
||||||
|
--purple-gradient-end: 250 100% 60%;
|
||||||
|
--orange-gradient-start: 30 100% 60%;
|
||||||
|
--orange-gradient-end: 15 100% 55%;
|
||||||
|
--blue-gradient-start: 220 100% 60%;
|
||||||
|
--blue-gradient-end: 200 100% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 222.2 84% 4.9%;
|
||||||
|
--foreground: 210 40% 98%;
|
||||||
|
--card: 222.2 84% 4.9%;
|
||||||
|
--card-foreground: 210 40% 98%;
|
||||||
|
--popover: 222.2 84% 4.9%;
|
||||||
|
--popover-foreground: 210 40% 98%;
|
||||||
|
--primary: 210 40% 98%;
|
||||||
|
--primary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--secondary: 217.2 32.6% 17.5%;
|
||||||
|
--secondary-foreground: 210 40% 98%;
|
||||||
|
--muted: 217.2 32.6% 17.5%;
|
||||||
|
--muted-foreground: 215 20.2% 65.1%;
|
||||||
|
--accent: 217.2 32.6% 17.5%;
|
||||||
|
--accent-foreground: 210 40% 98%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 217.2 32.6% 17.5%;
|
||||||
|
--input: 217.2 32.6% 17.5%;
|
||||||
|
--ring: 212.7 26.8% 83.9%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base typography - Mobile First */
|
||||||
|
html {
|
||||||
|
font-size: 14px; /* 0.875rem base for mobile */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
html {
|
||||||
|
font-size: 16px; /* 1rem base for desktop */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-white text-slate-900 antialiased m-0 p-0 overflow-x-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus visible for accessibility */
|
||||||
|
*:focus-visible {
|
||||||
|
@apply outline-none ring-2 ring-blue-500 ring-offset-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
/* Gradient utilities */
|
||||||
|
.gradient-teal {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
hsl(var(--teal-gradient-start)),
|
||||||
|
hsl(var(--teal-gradient-end))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-purple {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
hsl(var(--purple-gradient-start)),
|
||||||
|
hsl(var(--purple-gradient-end))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-orange {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
hsl(var(--orange-gradient-start)),
|
||||||
|
hsl(var(--orange-gradient-end))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-blue {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
hsl(var(--blue-gradient-start)),
|
||||||
|
hsl(var(--blue-gradient-end))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card hover animation */
|
||||||
|
.card-hover {
|
||||||
|
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar icon styles */
|
||||||
|
.sidebar-icon {
|
||||||
|
@apply w-6 h-6 text-white/80 hover:text-white transition-colors cursor-pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar icon v2 - Standard sidebar button style */
|
||||||
|
.sidebar-icon-v2 {
|
||||||
|
@apply w-10 h-10 rounded-xl flex items-center justify-center text-white/70
|
||||||
|
transition-all duration-200 hover:bg-white/10 hover:text-white cursor-pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch target minimum 44px for accessibility */
|
||||||
|
.touch-target {
|
||||||
|
@apply min-h-[44px] min-w-[44px];
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container with responsive padding */
|
||||||
|
.container-responsive {
|
||||||
|
@apply px-4 sm:px-6 md:px-8 lg:px-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text truncation utilities */
|
||||||
|
.text-truncate {
|
||||||
|
@apply truncate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-clamp-2 {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-clamp-3 {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation utilities */
|
||||||
|
.animate-fade-in {
|
||||||
|
animation: fadeIn 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-slide-up {
|
||||||
|
animation: slideUp 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-up-200 {
|
||||||
|
animation: fadeUp 0.8s ease forwards;
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-up-400 {
|
||||||
|
animation: fadeUp 0.8s ease forwards;
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.will-change-transform-opacity {
|
||||||
|
will-change: transform, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
src/lib/query-client.ts
Normal file
45
src/lib/query-client.ts
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
/**
|
||||||
|
* TanStack Query client configuration
|
||||||
|
* @description Centralized query client setup with default options
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { QueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default stale time for queries (5 minutes)
|
||||||
|
*/
|
||||||
|
const DEFAULT_STALE_TIME = 5 * 60 * 1000;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default cache time for queries (30 minutes)
|
||||||
|
*/
|
||||||
|
const DEFAULT_CACHE_TIME = 30 * 60 * 1000;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates and configures the QueryClient instance
|
||||||
|
* @description Sets up TanStack Query with optimized defaults
|
||||||
|
* @returns {QueryClient} Configured QueryClient instance
|
||||||
|
*/
|
||||||
|
export function createQueryClient(): QueryClient {
|
||||||
|
return new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
staleTime: DEFAULT_STALE_TIME,
|
||||||
|
gcTime: DEFAULT_CACHE_TIME,
|
||||||
|
retry: 3,
|
||||||
|
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
retry: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Singleton QueryClient instance
|
||||||
|
* @description Pre-configured query client for the application
|
||||||
|
*/
|
||||||
|
export const queryClient = createQueryClient();
|
||||||
|
|
||||||
14
src/lib/utils.ts
Normal file
14
src/lib/utils.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { type ClassValue, clsx } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Combines class names using clsx and merges Tailwind classes
|
||||||
|
* @description Utility function for conditional class names with Tailwind CSS
|
||||||
|
* @param inputs - Class values to combine
|
||||||
|
* @returns Merged class string
|
||||||
|
* @example
|
||||||
|
* cn("text-red-500", condition && "bg-blue-500")
|
||||||
|
*/
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
32
src/main.tsx
Normal file
32
src/main.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* Application entry point
|
||||||
|
* @description Bootstraps the React application with providers
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import { QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
import { queryClient } from '@/lib/query-client';
|
||||||
|
import App from './App';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Root element for React application
|
||||||
|
*/
|
||||||
|
const rootElement = document.getElementById('root');
|
||||||
|
|
||||||
|
if (!rootElement) {
|
||||||
|
throw new Error('Root element not found. Ensure index.html contains a div with id="root".');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders the application with all required providers
|
||||||
|
* @description Wraps App with StrictMode and QueryClientProvider
|
||||||
|
*/
|
||||||
|
createRoot(rootElement).render(
|
||||||
|
<StrictMode>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<App />
|
||||||
|
</QueryClientProvider>
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
156
src/pages/dashboard.tsx
Normal file
156
src/pages/dashboard.tsx
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
/**
|
||||||
|
* Dashboard Page Component
|
||||||
|
* @description Main dashboard layout with sidebar, metrics, and agent cards
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Sidebar } from '@/components/dashboard/sidebar';
|
||||||
|
import { MetricCard } from '@/components/dashboard/metric-card';
|
||||||
|
import { AgentCard } from '@/components/dashboard/agent-card';
|
||||||
|
import { DashboardHeader } from '@/components/dashboard/dashboard-header';
|
||||||
|
import { useUIStore } from '@/stores';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mock agents data
|
||||||
|
* @description Temporary data for agent cards display
|
||||||
|
*/
|
||||||
|
const MOCK_AGENTS = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: 'Customer Support Agent',
|
||||||
|
tags: ['GPT-4', 'Chat Interface'],
|
||||||
|
description: 'Automates customer service inquiries with intelligent escalation and context preservation.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: 'Document Analyst',
|
||||||
|
tags: ['Claude-3', 'PDF Processing', 'Knowledge Graph'],
|
||||||
|
description: 'Analyzes documents to extract insights and generate comprehensive reports automatically.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
title: 'Sales Qualifier',
|
||||||
|
tags: ['Lead Scoring', 'CRM Integration'],
|
||||||
|
description: 'Qualifies prospects, schedules meetings, and manages follow-up communications.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
title: 'Code Review Assistant',
|
||||||
|
tags: ['GPT-4', 'GitHub Integration'],
|
||||||
|
description: 'Reviews pull requests and provides actionable feedback on code quality and best practices.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
title: 'Data Pipeline Monitor',
|
||||||
|
tags: ['Real-time', 'Alerting'],
|
||||||
|
description: 'Monitors ETL pipelines and automatically diagnoses and reports data quality issues.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
title: 'Meeting Summarizer',
|
||||||
|
tags: ['Whisper', 'NLP'],
|
||||||
|
description: 'Transcribes meetings and generates structured summaries with action items.',
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dashboard component
|
||||||
|
* @description Main dashboard page with all sections including header, metrics, and agents
|
||||||
|
* @returns {JSX.Element} Dashboard element
|
||||||
|
*/
|
||||||
|
export function Dashboard(): JSX.Element {
|
||||||
|
const { activeTab, setActiveTab } = useUIStore();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[#F0F5FF]">
|
||||||
|
<Sidebar />
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="ml-6 sm:ml-24 min-h-screen transition-all duration-300">
|
||||||
|
<DashboardHeader />
|
||||||
|
|
||||||
|
{/* Content Area */}
|
||||||
|
<div className="px-4 sm:px-6 md:px-8 py-6 sm:py-8">
|
||||||
|
{/* Welcome Section */}
|
||||||
|
<div className="mb-6 sm:mb-8">
|
||||||
|
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-2">
|
||||||
|
Welcome, Vijay! 👋
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm sm:text-base text-gray-600 max-w-2xl">
|
||||||
|
Monitor and manage your intelligent agents, knowledge bases, and
|
||||||
|
automated workflows from a centralized dashboard
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metrics Grid */}
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8">
|
||||||
|
<MetricCard
|
||||||
|
title="ACTIVE AGENTS"
|
||||||
|
subtitle="Agents"
|
||||||
|
value="03"
|
||||||
|
gradient="teal"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
title="KNOWLEDGE BASES"
|
||||||
|
subtitle="Knowledge Bases"
|
||||||
|
value="02"
|
||||||
|
gradient="purple"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
title="RECENT WORKFLOWS"
|
||||||
|
subtitle="Workflows"
|
||||||
|
value="01"
|
||||||
|
gradient="orange"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
title="CONNECTED TOOLS"
|
||||||
|
subtitle="Tools"
|
||||||
|
value="01"
|
||||||
|
gradient="blue"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Agents Section */}
|
||||||
|
<div className="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-200 p-4 sm:p-6">
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex gap-2 sm:gap-4 mb-4 sm:mb-6">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('all')}
|
||||||
|
className={`px-4 sm:px-6 py-2 rounded-lg font-medium text-sm sm:text-base
|
||||||
|
transition-colors min-h-[44px] ${
|
||||||
|
activeTab === 'all'
|
||||||
|
? 'bg-black text-white'
|
||||||
|
: 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
All Agents
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('my')}
|
||||||
|
className={`px-4 sm:px-6 py-2 rounded-lg font-medium text-sm sm:text-base
|
||||||
|
transition-colors min-h-[44px] ${
|
||||||
|
activeTab === 'my'
|
||||||
|
? 'bg-black text-white'
|
||||||
|
: 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
My Agents
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Agent Cards Grid */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
|
||||||
|
{MOCK_AGENTS.map((agent) => (
|
||||||
|
<AgentCard
|
||||||
|
key={agent.id}
|
||||||
|
title={agent.title}
|
||||||
|
tags={agent.tags as unknown as string[]}
|
||||||
|
description={agent.description}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
18
src/pages/sign-in-page.tsx
Normal file
18
src/pages/sign-in-page.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/**
|
||||||
|
* @description Main sign-in page component for AgenticIQ application
|
||||||
|
* Combines left hero section with right login card
|
||||||
|
* @returns {JSX.Element} Complete sign-in page layout
|
||||||
|
*/
|
||||||
|
import AuthLayout from '@/components/auth/auth-layout';
|
||||||
|
import LoginCard from '@/components/auth/login-card';
|
||||||
|
|
||||||
|
function SignInPage(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<AuthLayout>
|
||||||
|
<LoginCard />
|
||||||
|
</AuthLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SignInPage;
|
||||||
|
|
||||||
2
src/pages/sign-in.tsx
Normal file
2
src/pages/sign-in.tsx
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export { default } from './sign-in-page';
|
||||||
|
|
||||||
122
src/services/api.ts
Normal file
122
src/services/api.ts
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
/**
|
||||||
|
* API service layer
|
||||||
|
* @description Handles HTTP requests with error handling and timeout support
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { API_BASE_URL, API_TIMEOUT } from '@/constants/api';
|
||||||
|
import type { IApiResponse, IApiError } from '@/types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Base fetch wrapper with error handling
|
||||||
|
* @description Makes HTTP requests with standardized error handling and timeout
|
||||||
|
* @param {string} endpoint - API endpoint path
|
||||||
|
* @param {RequestInit} options - Fetch options
|
||||||
|
* @returns {Promise<IApiResponse<T>>} Promise with API response
|
||||||
|
* @throws {IApiError} When request fails
|
||||||
|
* @example
|
||||||
|
* const data = await fetchApi('/users', { method: 'GET' })
|
||||||
|
*/
|
||||||
|
export async function fetchApi<T>(
|
||||||
|
endpoint: string,
|
||||||
|
options?: RequestInit
|
||||||
|
): Promise<IApiResponse<T>> {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timeoutId = setTimeout(() => controller.abort(), API_TIMEOUT);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
||||||
|
...options,
|
||||||
|
signal: controller.signal,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...options?.headers,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error: IApiError = {
|
||||||
|
message: `HTTP ${response.status}: ${response.statusText}`,
|
||||||
|
code: `HTTP_${response.status}`,
|
||||||
|
};
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
|
||||||
|
if (error instanceof Error) {
|
||||||
|
if (error.name === 'AbortError') {
|
||||||
|
throw {
|
||||||
|
message: 'Request timeout',
|
||||||
|
code: 'TIMEOUT',
|
||||||
|
} as IApiError;
|
||||||
|
}
|
||||||
|
throw {
|
||||||
|
message: error.message,
|
||||||
|
code: 'NETWORK_ERROR',
|
||||||
|
} as IApiError;
|
||||||
|
}
|
||||||
|
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET request helper
|
||||||
|
* @description Performs GET request to the specified endpoint
|
||||||
|
* @param {string} endpoint - API endpoint
|
||||||
|
* @returns {Promise<IApiResponse<T>>} Promise with response data
|
||||||
|
*/
|
||||||
|
export async function getRequest<T>(endpoint: string): Promise<IApiResponse<T>> {
|
||||||
|
return fetchApi<T>(endpoint, { method: 'GET' });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST request helper
|
||||||
|
* @description Performs POST request with JSON body
|
||||||
|
* @param {string} endpoint - API endpoint
|
||||||
|
* @param {D} data - Request body data
|
||||||
|
* @returns {Promise<IApiResponse<T>>} Promise with response data
|
||||||
|
*/
|
||||||
|
export async function createRequest<T, D = unknown>(
|
||||||
|
endpoint: string,
|
||||||
|
data: D
|
||||||
|
): Promise<IApiResponse<T>> {
|
||||||
|
return fetchApi<T>(endpoint, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PUT request helper
|
||||||
|
* @description Performs PUT request with JSON body
|
||||||
|
* @param {string} endpoint - API endpoint
|
||||||
|
* @param {D} data - Request body data
|
||||||
|
* @returns {Promise<IApiResponse<T>>} Promise with response data
|
||||||
|
*/
|
||||||
|
export async function updateRequest<T, D = unknown>(
|
||||||
|
endpoint: string,
|
||||||
|
data: D
|
||||||
|
): Promise<IApiResponse<T>> {
|
||||||
|
return fetchApi<T>(endpoint, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DELETE request helper
|
||||||
|
* @description Performs DELETE request to the specified endpoint
|
||||||
|
* @param {string} endpoint - API endpoint
|
||||||
|
* @returns {Promise<IApiResponse<T>>} Promise with response data
|
||||||
|
*/
|
||||||
|
export async function deleteRequest<T>(
|
||||||
|
endpoint: string
|
||||||
|
): Promise<IApiResponse<T>> {
|
||||||
|
return fetchApi<T>(endpoint, { method: 'DELETE' });
|
||||||
|
}
|
||||||
71
src/stores/app-store.ts
Normal file
71
src/stores/app-store.ts
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
/**
|
||||||
|
* Application global store
|
||||||
|
* @description Zustand store for application-wide state management
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { create } from 'zustand';
|
||||||
|
import { devtools, persist } from 'zustand/middleware';
|
||||||
|
import type { IUser } from '@/types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Application store state interface
|
||||||
|
* @description Defines the shape of the application store
|
||||||
|
*/
|
||||||
|
interface IAppStoreState {
|
||||||
|
user: IUser | null;
|
||||||
|
isAuthenticated: boolean;
|
||||||
|
isInitialized: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Application store actions interface
|
||||||
|
* @description Defines available actions for the app store
|
||||||
|
*/
|
||||||
|
interface IAppStoreActions {
|
||||||
|
setUser: (user: IUser | null) => void;
|
||||||
|
setIsAuthenticated: (isAuthenticated: boolean) => void;
|
||||||
|
setIsInitialized: (isInitialized: boolean) => void;
|
||||||
|
reset: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
type IAppStore = IAppStoreState & IAppStoreActions;
|
||||||
|
|
||||||
|
const initialState: IAppStoreState = {
|
||||||
|
user: null,
|
||||||
|
isAuthenticated: false,
|
||||||
|
isInitialized: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Application global store
|
||||||
|
* @description Manages user authentication and app initialization state
|
||||||
|
* @returns {IAppStore} Store instance with state and actions
|
||||||
|
* @example
|
||||||
|
* const { user, setUser } = useAppStore()
|
||||||
|
*/
|
||||||
|
export const useAppStore = create<IAppStore>()(
|
||||||
|
devtools(
|
||||||
|
persist(
|
||||||
|
(set) => ({
|
||||||
|
...initialState,
|
||||||
|
|
||||||
|
setUser: (user) => set({ user, isAuthenticated: !!user }),
|
||||||
|
|
||||||
|
setIsAuthenticated: (isAuthenticated) => set({ isAuthenticated }),
|
||||||
|
|
||||||
|
setIsInitialized: (isInitialized) => set({ isInitialized }),
|
||||||
|
|
||||||
|
reset: () => set(initialState),
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: 'agenticiq-app-store',
|
||||||
|
partialize: (state) => ({
|
||||||
|
user: state.user,
|
||||||
|
isAuthenticated: state.isAuthenticated,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
),
|
||||||
|
{ name: 'AppStore' }
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
8
src/stores/index.ts
Normal file
8
src/stores/index.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Zustand stores barrel export
|
||||||
|
* @description Centralized exports for global state stores
|
||||||
|
*/
|
||||||
|
|
||||||
|
export { useAppStore } from './app-store';
|
||||||
|
export { useUIStore } from './ui-store';
|
||||||
|
|
||||||
66
src/stores/ui-store.ts
Normal file
66
src/stores/ui-store.ts
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
/**
|
||||||
|
* UI state store
|
||||||
|
* @description Zustand store for UI-related state management
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { create } from 'zustand';
|
||||||
|
import { devtools } from 'zustand/middleware';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* UI store state interface
|
||||||
|
* @description Defines the shape of the UI store
|
||||||
|
*/
|
||||||
|
interface IUIStoreState {
|
||||||
|
isSidebarOpen: boolean;
|
||||||
|
isDarkMode: boolean;
|
||||||
|
activeTab: 'all' | 'my';
|
||||||
|
isSearchOpen: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* UI store actions interface
|
||||||
|
* @description Defines available actions for the UI store
|
||||||
|
*/
|
||||||
|
interface IUIStoreActions {
|
||||||
|
toggleSidebar: () => void;
|
||||||
|
setSidebarOpen: (isOpen: boolean) => void;
|
||||||
|
toggleDarkMode: () => void;
|
||||||
|
setActiveTab: (tab: 'all' | 'my') => void;
|
||||||
|
setSearchOpen: (isOpen: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
type IUIStore = IUIStoreState & IUIStoreActions;
|
||||||
|
|
||||||
|
const initialState: IUIStoreState = {
|
||||||
|
isSidebarOpen: true,
|
||||||
|
isDarkMode: false,
|
||||||
|
activeTab: 'all',
|
||||||
|
isSearchOpen: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* UI state store
|
||||||
|
* @description Manages UI state like sidebar visibility and theme
|
||||||
|
* @returns {IUIStore} Store instance with state and actions
|
||||||
|
* @example
|
||||||
|
* const { isSidebarOpen, toggleSidebar } = useUIStore()
|
||||||
|
*/
|
||||||
|
export const useUIStore = create<IUIStore>()(
|
||||||
|
devtools(
|
||||||
|
(set) => ({
|
||||||
|
...initialState,
|
||||||
|
|
||||||
|
toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
|
||||||
|
|
||||||
|
setSidebarOpen: (isOpen) => set({ isSidebarOpen: isOpen }),
|
||||||
|
|
||||||
|
toggleDarkMode: () => set((state) => ({ isDarkMode: !state.isDarkMode })),
|
||||||
|
|
||||||
|
setActiveTab: (tab) => set({ activeTab: tab }),
|
||||||
|
|
||||||
|
setSearchOpen: (isOpen) => set({ isSearchOpen: isOpen }),
|
||||||
|
}),
|
||||||
|
{ name: 'UIStore' }
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
81
src/types/index.ts
Normal file
81
src/types/index.ts
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
/**
|
||||||
|
* Application-wide type definitions
|
||||||
|
* @description TypeScript interfaces and types for the application
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* User entity interface
|
||||||
|
* @description Represents a user in the system
|
||||||
|
*/
|
||||||
|
export interface IUser {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generic API response wrapper
|
||||||
|
* @description Standard response format for all API calls
|
||||||
|
*/
|
||||||
|
export interface IApiResponse<T> {
|
||||||
|
data: T;
|
||||||
|
message?: string;
|
||||||
|
isSuccess: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* API error structure
|
||||||
|
* @description Standard error format for API failures
|
||||||
|
*/
|
||||||
|
export interface IApiError {
|
||||||
|
message: string;
|
||||||
|
code: string;
|
||||||
|
details?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Agent entity interface
|
||||||
|
* @description Represents an AI agent in the system
|
||||||
|
*/
|
||||||
|
export interface IAgent {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
tags: string[];
|
||||||
|
description: string;
|
||||||
|
isActive: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Metric data interface
|
||||||
|
* @description Represents dashboard metric information
|
||||||
|
*/
|
||||||
|
export interface IMetricData {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
value: string;
|
||||||
|
gradient: 'teal' | 'purple' | 'orange' | 'blue';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loading state type
|
||||||
|
* @description Represents async operation states
|
||||||
|
*/
|
||||||
|
export type LoadingState = 'idle' | 'loading' | 'success' | 'error';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Navigation item interface
|
||||||
|
* @description Represents a sidebar navigation item
|
||||||
|
*/
|
||||||
|
export interface INavigationItem {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
icon: string;
|
||||||
|
path: string;
|
||||||
|
isActive: boolean;
|
||||||
|
}
|
||||||
71
src/utils/format.ts
Normal file
71
src/utils/format.ts
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
/**
|
||||||
|
* Formatting utility functions
|
||||||
|
* @description Helper functions for formatting data
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats a number with leading zeros
|
||||||
|
* @description Pads a number with leading zeros to a specified length
|
||||||
|
* @param {number} value - The number to format
|
||||||
|
* @param {number} length - Desired string length
|
||||||
|
* @returns {string} Formatted number string
|
||||||
|
* @example
|
||||||
|
* formatNumberWithLeadingZeros(3, 2) // Returns "03"
|
||||||
|
*/
|
||||||
|
export function formatNumberWithLeadingZeros(value: number, length: number = 2): string {
|
||||||
|
return value.toString().padStart(length, '0');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats a date to locale string
|
||||||
|
* @description Converts a date to a human-readable format
|
||||||
|
* @param {string | Date} date - Date to format
|
||||||
|
* @param {Intl.DateTimeFormatOptions} options - Formatting options
|
||||||
|
* @returns {string} Formatted date string
|
||||||
|
* @example
|
||||||
|
* formatDate(new Date()) // Returns "Dec 22, 2025"
|
||||||
|
*/
|
||||||
|
export function formatDate(
|
||||||
|
date: string | Date,
|
||||||
|
options: Intl.DateTimeFormatOptions = {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
}
|
||||||
|
): string {
|
||||||
|
const dateObject = typeof date === 'string' ? new Date(date) : date;
|
||||||
|
return dateObject.toLocaleDateString('en-US', options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Truncates text to a specified length
|
||||||
|
* @description Cuts off text at a maximum length and adds ellipsis
|
||||||
|
* @param {string} text - Text to truncate
|
||||||
|
* @param {number} maxLength - Maximum character length
|
||||||
|
* @returns {string} Truncated text with ellipsis if needed
|
||||||
|
* @example
|
||||||
|
* truncateText("Hello World", 5) // Returns "Hello..."
|
||||||
|
*/
|
||||||
|
export function truncateText(text: string, maxLength: number): string {
|
||||||
|
if (text.length <= maxLength) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
return `${text.slice(0, maxLength)}...`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats a number as a compact string
|
||||||
|
* @description Converts large numbers to readable format (1K, 1M, etc.)
|
||||||
|
* @param {number} value - Number to format
|
||||||
|
* @returns {string} Formatted compact string
|
||||||
|
* @example
|
||||||
|
* formatCompactNumber(1500) // Returns "1.5K"
|
||||||
|
*/
|
||||||
|
export function formatCompactNumber(value: number): string {
|
||||||
|
const formatter = new Intl.NumberFormat('en-US', {
|
||||||
|
notation: 'compact',
|
||||||
|
compactDisplay: 'short',
|
||||||
|
});
|
||||||
|
return formatter.format(value);
|
||||||
|
}
|
||||||
|
|
||||||
9
src/utils/index.ts
Normal file
9
src/utils/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* Utility functions barrel export
|
||||||
|
* @description Centralized exports for utility functions
|
||||||
|
*/
|
||||||
|
|
||||||
|
export { cn } from '@/lib/utils';
|
||||||
|
export * from './format';
|
||||||
|
export * from './validation';
|
||||||
|
|
||||||
66
src/utils/validation.ts
Normal file
66
src/utils/validation.ts
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
/**
|
||||||
|
* Validation utility functions
|
||||||
|
* @description Helper functions for input validation
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validates email format
|
||||||
|
* @description Checks if a string is a valid email address
|
||||||
|
* @param {string} email - Email string to validate
|
||||||
|
* @returns {boolean} True if valid email format
|
||||||
|
* @example
|
||||||
|
* isValidEmail("test@example.com") // Returns true
|
||||||
|
*/
|
||||||
|
export function isValidEmail(email: string): boolean {
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
return emailRegex.test(email);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validates string is not empty
|
||||||
|
* @description Checks if a string has content after trimming
|
||||||
|
* @param {string} value - String to validate
|
||||||
|
* @returns {boolean} True if string has content
|
||||||
|
* @example
|
||||||
|
* isNotEmpty(" hello ") // Returns true
|
||||||
|
*/
|
||||||
|
export function isNotEmpty(value: string): boolean {
|
||||||
|
return value.trim().length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validates string length is within range
|
||||||
|
* @description Checks if string length falls within min and max bounds
|
||||||
|
* @param {string} value - String to validate
|
||||||
|
* @param {number} minLength - Minimum allowed length
|
||||||
|
* @param {number} maxLength - Maximum allowed length
|
||||||
|
* @returns {boolean} True if length is within range
|
||||||
|
* @example
|
||||||
|
* isValidLength("hello", 1, 10) // Returns true
|
||||||
|
*/
|
||||||
|
export function isValidLength(
|
||||||
|
value: string,
|
||||||
|
minLength: number,
|
||||||
|
maxLength: number
|
||||||
|
): boolean {
|
||||||
|
const length = value.trim().length;
|
||||||
|
return length >= minLength && length <= maxLength;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validates URL format
|
||||||
|
* @description Checks if a string is a valid URL
|
||||||
|
* @param {string} url - URL string to validate
|
||||||
|
* @returns {boolean} True if valid URL format
|
||||||
|
* @example
|
||||||
|
* isValidURL("https://example.com") // Returns true
|
||||||
|
*/
|
||||||
|
export function isValidURL(url: string): boolean {
|
||||||
|
try {
|
||||||
|
new URL(url);
|
||||||
|
return true;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
40
tsconfig.app.json
Normal file
40
tsconfig.app.json
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"incremental": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": [
|
||||||
|
"ES2022",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": [
|
||||||
|
"vite/client"
|
||||||
|
],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
/* Path Aliases */
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
]
|
||||||
|
}
|
||||||
19
tsconfig.json
Normal file
19
tsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
tsconfig.node.json
Normal file
25
tsconfig.node.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"incremental": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2022"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
18
vite.config.ts
Normal file
18
vite.config.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
import path from 'path'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tailwindcss(),
|
||||||
|
],
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "./src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user