Phase 1: Code cleanup - remove unused pages, components, and console.logs
- Deleted 6 empty folders (pages/Admin, pages/admin, pages/settings, components/debug, components/widgets, components/metrics) - Removed unused template components: - ecommerce/ (7 files) - sample-componeents/ (2 HTML files) - charts/bar/ and charts/line/ - tables/BasicTables/ - Deleted deprecated file: CurrentProcessingCard.old.tsx - Removed console.log statements from: - UserProfile components (UserMetaCard, UserAddressCard, UserInfoCard) - Automation/ConfigModal - ImageQueueModal (8 statements) - ImageGenerationCard (7 statements) - Applied ESLint auto-fixes (9 errors fixed) - All builds pass ✓ - TypeScript compiles without errors ✓
This commit is contained in:
IGNY8 VPS (Salman)
896
docs/plans/IMPLEMENTATION-PLAN-PHASES-1-5-6.md
Normal file
896
docs/plans/IMPLEMENTATION-PLAN-PHASES-1-5-6.md
Normal file
@@ -0,0 +1,896 @@
|
|||||||
|
# Implementation Plan: Phases 1, 5, and 6
|
||||||
|
|
||||||
|
**Created:** January 9, 2026
|
||||||
|
**Target:** Safe, verified execution of cleanup, UX improvements, and data backup
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
1. [Phase 1: Code Cleanup & Technical Debt](#phase-1-code-cleanup--technical-debt)
|
||||||
|
2. [Phase 5: UX Improvements](#phase-5-ux-improvements)
|
||||||
|
3. [Phase 6: Data Backup & Cleanup](#phase-6-data-backup--cleanup)
|
||||||
|
4. [Execution Checklist](#execution-checklist)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 1: Code Cleanup & Technical Debt
|
||||||
|
|
||||||
|
## 1.1 Pre-Cleanup Verification
|
||||||
|
|
||||||
|
### 1.1.1 Create Safety Branch
|
||||||
|
```bash
|
||||||
|
# BEFORE ANY CHANGES - Create a safety branch
|
||||||
|
cd /data/app/igny8
|
||||||
|
git checkout -b cleanup/phase-1-$(date +%Y%m%d)
|
||||||
|
git push origin cleanup/phase-1-$(date +%Y%m%d)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 1.1.2 Run Full Test Suite (Baseline)
|
||||||
|
```bash
|
||||||
|
# Backend tests
|
||||||
|
cd /data/app/igny8/backend
|
||||||
|
python manage.py test --verbosity=2 > /tmp/test-baseline-backend.log 2>&1
|
||||||
|
echo "Exit code: $?"
|
||||||
|
|
||||||
|
# Frontend build check
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
npm run build > /tmp/test-baseline-frontend.log 2>&1
|
||||||
|
echo "Exit code: $?"
|
||||||
|
|
||||||
|
# Frontend lint check
|
||||||
|
npm run lint > /tmp/test-baseline-lint.log 2>&1
|
||||||
|
```
|
||||||
|
|
||||||
|
**✅ CHECKPOINT:** All tests must pass before proceeding.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1.2 Frontend Cleanup - Empty/Unused Folders
|
||||||
|
|
||||||
|
### Files to Delete (Verified Empty/Unused)
|
||||||
|
|
||||||
|
| Path | Reason | Verified |
|
||||||
|
|------|--------|----------|
|
||||||
|
| `frontend/src/pages/Admin/` | Empty folder | ⬜ |
|
||||||
|
| `frontend/src/pages/admin/` | Empty folder (duplicate lowercase) | ⬜ |
|
||||||
|
| `frontend/src/pages/settings/` | Empty folder (lowercase duplicate) | ⬜ |
|
||||||
|
| `frontend/src/components/debug/` | Empty debug folder | ⬜ |
|
||||||
|
| `frontend/src/components/widgets/` | Empty folder | ⬜ |
|
||||||
|
| `frontend/src/components/metrics/` | Empty folder | ⬜ |
|
||||||
|
|
||||||
|
### Execution Steps:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Step 1: Verify folders are empty
|
||||||
|
cd /data/app/igny8/frontend/src
|
||||||
|
|
||||||
|
# Check each folder before deletion
|
||||||
|
ls -la pages/Admin/ 2>/dev/null || echo "Admin/ doesn't exist or empty"
|
||||||
|
ls -la pages/admin/ 2>/dev/null || echo "admin/ doesn't exist or empty"
|
||||||
|
ls -la pages/settings/ 2>/dev/null || echo "settings/ doesn't exist or empty"
|
||||||
|
ls -la components/debug/ 2>/dev/null || echo "debug/ doesn't exist or empty"
|
||||||
|
ls -la components/widgets/ 2>/dev/null || echo "widgets/ doesn't exist or empty"
|
||||||
|
ls -la components/metrics/ 2>/dev/null || echo "metrics/ doesn't exist or empty"
|
||||||
|
|
||||||
|
# Step 2: Remove empty folders (only if confirmed empty)
|
||||||
|
rmdir pages/Admin 2>/dev/null
|
||||||
|
rmdir pages/admin 2>/dev/null
|
||||||
|
rmdir pages/settings 2>/dev/null
|
||||||
|
rmdir components/debug 2>/dev/null
|
||||||
|
rmdir components/widgets 2>/dev/null
|
||||||
|
rmdir components/metrics 2>/dev/null
|
||||||
|
```
|
||||||
|
|
||||||
|
**✅ CHECKPOINT:** Run `npm run build` - must succeed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1.3 Frontend Cleanup - Template/Sample Components
|
||||||
|
|
||||||
|
### Components to Delete (Never Used - Template/Demo Code)
|
||||||
|
|
||||||
|
| Path | File Count | Reason |
|
||||||
|
|------|------------|--------|
|
||||||
|
| `frontend/src/components/ecommerce/` | 7 files | E-commerce template components - not used in app |
|
||||||
|
| `frontend/src/components/sample-componeents/` | 2 files | Sample HTML files with typo in folder name |
|
||||||
|
| `frontend/src/components/charts/bar/` | - | Unused bar chart template |
|
||||||
|
| `frontend/src/components/charts/line/` | - | Unused line chart template |
|
||||||
|
| `frontend/src/components/tables/BasicTables/` | - | Unused basic table template |
|
||||||
|
|
||||||
|
### Pre-Delete Verification:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Search for any imports of these components
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
|
||||||
|
# Check ecommerce imports
|
||||||
|
grep -r "ecommerce" src/ --include="*.ts" --include="*.tsx" | grep -v "node_modules"
|
||||||
|
|
||||||
|
# Check sample imports
|
||||||
|
grep -r "sample-componeents" src/ --include="*.ts" --include="*.tsx"
|
||||||
|
|
||||||
|
# Check charts/bar imports
|
||||||
|
grep -r "charts/bar" src/ --include="*.ts" --include="*.tsx"
|
||||||
|
|
||||||
|
# Check charts/line imports
|
||||||
|
grep -r "charts/line" src/ --include="*.ts" --include="*.tsx"
|
||||||
|
|
||||||
|
# Check BasicTables imports
|
||||||
|
grep -r "BasicTables" src/ --include="*.ts" --include="*.tsx"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Execution (Only if no imports found):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8/frontend/src
|
||||||
|
|
||||||
|
# Delete unused template folders
|
||||||
|
rm -rf components/ecommerce/
|
||||||
|
rm -rf components/sample-componeents/
|
||||||
|
rm -rf components/charts/bar/
|
||||||
|
rm -rf components/charts/line/
|
||||||
|
rm -rf components/tables/BasicTables/
|
||||||
|
|
||||||
|
# If charts folder is now empty, remove it
|
||||||
|
rmdir components/charts 2>/dev/null || true
|
||||||
|
# If tables folder is now empty, remove it
|
||||||
|
rmdir components/tables 2>/dev/null || true
|
||||||
|
```
|
||||||
|
|
||||||
|
**✅ CHECKPOINT:** Run `npm run build` - must succeed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1.4 Frontend Cleanup - Deprecated Files
|
||||||
|
|
||||||
|
### Individual Files to Delete
|
||||||
|
|
||||||
|
| File | Reason |
|
||||||
|
|------|--------|
|
||||||
|
| `frontend/src/components/Automation/CurrentProcessingCard.old.tsx` | Old deprecated version |
|
||||||
|
|
||||||
|
### Execution:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Verify no imports exist
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
grep -r "CurrentProcessingCard.old" src/
|
||||||
|
|
||||||
|
# If no results, safe to delete
|
||||||
|
rm src/components/Automation/CurrentProcessingCard.old.tsx
|
||||||
|
```
|
||||||
|
|
||||||
|
**✅ CHECKPOINT:** Run `npm run build` - must succeed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1.5 Console.log Cleanup
|
||||||
|
|
||||||
|
### Files with console.log statements to review:
|
||||||
|
|
||||||
|
| File | Line(s) | Action |
|
||||||
|
|------|---------|--------|
|
||||||
|
| `src/services/api.ts` | 2010, 2015 | Review - may need for debugging |
|
||||||
|
| `src/components/UserProfile/UserMetaCard.tsx` | 11 | Remove |
|
||||||
|
| `src/components/UserProfile/UserAddressCard.tsx` | 11 | Remove |
|
||||||
|
| `src/components/UserProfile/UserInfoCard.tsx` | 11 | Remove |
|
||||||
|
| `src/components/Automation/ConfigModal.tsx` | 42 | Remove |
|
||||||
|
| `src/components/common/ImageQueueModal.tsx` | 227, 229, 239, 242, 247, 251, 259, 262 | Remove all |
|
||||||
|
| `src/components/common/ImageGenerationCard.tsx` | 107, 125, 129, 141, 142, 151, 178 | Remove all |
|
||||||
|
|
||||||
|
### Execution Strategy:
|
||||||
|
|
||||||
|
**Option A: Manual removal (safer)**
|
||||||
|
Edit each file and remove console.log statements manually.
|
||||||
|
|
||||||
|
**Option B: Automated with review**
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
|
||||||
|
# Find all console.log in src (excluding node_modules)
|
||||||
|
grep -rn "console.log" src/ --include="*.ts" --include="*.tsx" > /tmp/console-logs.txt
|
||||||
|
|
||||||
|
# Review the file before any automated removal
|
||||||
|
cat /tmp/console-logs.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
### Per-File Actions:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// In UserMetaCard.tsx, UserAddressCard.tsx, UserInfoCard.tsx - REMOVE:
|
||||||
|
console.log("Saving changes...");
|
||||||
|
|
||||||
|
// In ConfigModal.tsx - REMOVE:
|
||||||
|
console.log('Saving config with delays:', dataToSave);
|
||||||
|
|
||||||
|
// In ImageQueueModal.tsx - REMOVE ALL console.log statements
|
||||||
|
|
||||||
|
// In ImageGenerationCard.tsx - REMOVE ALL console.log statements
|
||||||
|
|
||||||
|
// In api.ts - KEEP or convert to proper logging (these may be useful)
|
||||||
|
```
|
||||||
|
|
||||||
|
**✅ CHECKPOINT:** Run `npm run build && npm run lint` - must succeed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1.6 ESLint Verification
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
|
||||||
|
# Run full lint check
|
||||||
|
npm run lint
|
||||||
|
|
||||||
|
# If errors exist, fix them:
|
||||||
|
npm run lint -- --fix
|
||||||
|
```
|
||||||
|
|
||||||
|
**✅ CHECKPOINT:** Zero lint errors.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1.7 Post-Cleanup Verification
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Full build
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# 2. Type check
|
||||||
|
npx tsc --noEmit
|
||||||
|
|
||||||
|
# 3. Start dev server and manually verify app loads
|
||||||
|
npm run dev
|
||||||
|
# Open http://localhost:5173 and verify:
|
||||||
|
# - Dashboard loads
|
||||||
|
# - All sidebar navigation works
|
||||||
|
# - No console errors in browser
|
||||||
|
|
||||||
|
# 4. Commit changes
|
||||||
|
cd /data/app/igny8
|
||||||
|
git add -A
|
||||||
|
git status # Review all changes
|
||||||
|
git commit -m "Phase 1: Code cleanup - remove unused pages, components, and console.logs"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 5: UX Improvements
|
||||||
|
|
||||||
|
## 5.1 Pre-Implementation Setup
|
||||||
|
|
||||||
|
### 5.1.1 Create Feature Branch
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8
|
||||||
|
git checkout main # or your main branch
|
||||||
|
git pull
|
||||||
|
git checkout -b feature/phase-5-ux-improvements
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5.2 Search Modal Enhancement
|
||||||
|
|
||||||
|
### 5.2.1 Current State Analysis
|
||||||
|
|
||||||
|
**Location:** Search functionality likely in header/navigation components
|
||||||
|
|
||||||
|
**Research Required:**
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
|
||||||
|
# Find existing search component
|
||||||
|
grep -rn "search" src/components/header/ --include="*.tsx"
|
||||||
|
grep -rn "Search" src/components/ --include="*.tsx" | head -20
|
||||||
|
|
||||||
|
# Find search-related stores
|
||||||
|
grep -rn "search" src/store/ --include="*.ts"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5.2.2 Implementation Tasks
|
||||||
|
|
||||||
|
| Task | File(s) | Details |
|
||||||
|
|------|---------|---------|
|
||||||
|
| Add keyboard shortcut | `src/components/header/Search*.tsx` | Cmd/Ctrl+K to open |
|
||||||
|
| Add search filters | Search component | Filter by type (keyword, content, site) |
|
||||||
|
| Add recent searches | Search component + localStorage | Store last 5 searches |
|
||||||
|
| Improve results display | Search results component | Show context snippets |
|
||||||
|
| Add quick actions | Search results | Quick action buttons |
|
||||||
|
|
||||||
|
### 5.2.3 Keyboard Shortcut Implementation
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Add to App.tsx or a global hook
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||||
|
e.preventDefault();
|
||||||
|
// Open search modal
|
||||||
|
setSearchOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||||
|
}, []);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5.2.4 Verification
|
||||||
|
|
||||||
|
- [ ] Cmd/Ctrl+K opens search modal
|
||||||
|
- [ ] Search filters work correctly
|
||||||
|
- [ ] Recent searches persist across sessions
|
||||||
|
- [ ] Results show relevant context
|
||||||
|
- [ ] Quick actions function properly
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5.3 Image Regeneration Feature
|
||||||
|
|
||||||
|
### 5.3.1 Backend Requirements
|
||||||
|
|
||||||
|
**Check existing endpoint:**
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8/backend
|
||||||
|
|
||||||
|
# Find image generation endpoints
|
||||||
|
grep -rn "image" igny8_core/modules/writer/ --include="*.py" | head -20
|
||||||
|
grep -rn "regenerate" igny8_core/ --include="*.py"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Required API endpoint (if not exists):**
|
||||||
|
```
|
||||||
|
POST /api/v1/writer/images/{id}/regenerate/
|
||||||
|
Body: { reason?: string, prompt_adjustment?: string }
|
||||||
|
Response: { task_id: string, status: "queued" }
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5.3.2 Frontend Implementation
|
||||||
|
|
||||||
|
**File: `frontend/src/pages/Writer/Images.tsx`**
|
||||||
|
|
||||||
|
Add regenerate button to each image card:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Add to image card actions
|
||||||
|
const handleRegenerate = async (imageId: number) => {
|
||||||
|
const reason = await showRegenerateModal();
|
||||||
|
if (reason !== null) {
|
||||||
|
await api.post(`/v1/writer/images/${imageId}/regenerate/`, { reason });
|
||||||
|
// Refresh list or show status
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Button in image card
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleRegenerate(image.id)}
|
||||||
|
>
|
||||||
|
<RefreshIcon /> Regenerate
|
||||||
|
</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
**File: `frontend/src/pages/Writer/ContentView.tsx`**
|
||||||
|
|
||||||
|
Add regenerate for featured image:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// In featured image section (admin/editor only)
|
||||||
|
{(user.role === 'admin' || user.role === 'editor') && (
|
||||||
|
<Button onClick={() => handleRegenerateFeaturedImage(content.id)}>
|
||||||
|
Regenerate Featured Image
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5.3.3 Verification
|
||||||
|
|
||||||
|
- [ ] Regenerate button appears on `/writer/images` page
|
||||||
|
- [ ] Regenerate modal prompts for reason
|
||||||
|
- [ ] API call succeeds and image regenerates
|
||||||
|
- [ ] Status updates correctly
|
||||||
|
- [ ] Featured image regenerate works in content view
|
||||||
|
- [ ] Role-based visibility works (admin/editor only)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5.4 User Flow Polish
|
||||||
|
|
||||||
|
### 5.4.1 Signup to First Content Flow Testing
|
||||||
|
|
||||||
|
**Test Checklist:**
|
||||||
|
|
||||||
|
| Step | URL | Verify |
|
||||||
|
|------|-----|--------|
|
||||||
|
| 1. Signup | `/signup` | Form submits, verification email sent |
|
||||||
|
| 2. Verify Email | `/verify-email?token=...` | Email verified, redirect to app |
|
||||||
|
| 3. Onboarding | `/setup/wizard` | All steps complete without errors |
|
||||||
|
| 4. Add Site | Sites → Add Site | WordPress connection successful |
|
||||||
|
| 5. Add Keywords | `/planner/keywords` | Import works, keywords appear |
|
||||||
|
| 6. Clustering | `/planner/clusters` | AI clustering completes |
|
||||||
|
| 7. Generate Content | `/writer/tasks` | Content generates successfully |
|
||||||
|
| 8. Publish | Content → Publish | Content appears on WordPress |
|
||||||
|
|
||||||
|
### 5.4.2 Issue Documentation Template
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Issue: [Brief Description]
|
||||||
|
|
||||||
|
**Step:** [Which step in flow]
|
||||||
|
**URL:** [Page URL]
|
||||||
|
**Expected:** [What should happen]
|
||||||
|
**Actual:** [What happened]
|
||||||
|
**Steps to Reproduce:**
|
||||||
|
1. ...
|
||||||
|
2. ...
|
||||||
|
|
||||||
|
**Screenshots/Logs:** [Attach if applicable]
|
||||||
|
**Severity:** [Blocking/Major/Minor]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5.4.3 Post-Implementation Verification
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build and test
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
npm run build
|
||||||
|
npm run lint
|
||||||
|
|
||||||
|
# Commit
|
||||||
|
git add -A
|
||||||
|
git commit -m "Phase 5: UX improvements - search modal, image regeneration, flow polish"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 6: Data Backup & Cleanup
|
||||||
|
|
||||||
|
## 6.1 Pre-Backup Safety Steps
|
||||||
|
|
||||||
|
### 6.1.1 Create Backup Branch
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8
|
||||||
|
git checkout main
|
||||||
|
git checkout -b backup/pre-v1-cleanup-$(date +%Y%m%d)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.1.2 Full Database Backup
|
||||||
|
```bash
|
||||||
|
# Create backup directory
|
||||||
|
mkdir -p /data/app/igny8/backups/$(date +%Y%m%d)
|
||||||
|
|
||||||
|
# PostgreSQL full backup
|
||||||
|
pg_dump -h localhost -U your_user -d igny8_db > /data/app/igny8/backups/$(date +%Y%m%d)/full_backup.sql
|
||||||
|
|
||||||
|
# Verify backup
|
||||||
|
ls -la /data/app/igny8/backups/$(date +%Y%m%d)/
|
||||||
|
head -50 /data/app/igny8/backups/$(date +%Y%m%d)/full_backup.sql
|
||||||
|
```
|
||||||
|
|
||||||
|
**✅ CHECKPOINT:** Backup file exists and has content.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6.2 System Configuration Export
|
||||||
|
|
||||||
|
### 6.2.1 Create Export Directory Structure
|
||||||
|
```bash
|
||||||
|
mkdir -p /data/app/igny8/backups/config
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.2.2 Export Django Models (System Config)
|
||||||
|
|
||||||
|
**Create management command:**
|
||||||
|
```bash
|
||||||
|
# File: backend/igny8_core/management/commands/export_system_config.py
|
||||||
|
```
|
||||||
|
|
||||||
|
```python
|
||||||
|
# backend/igny8_core/management/commands/export_system_config.py
|
||||||
|
from django.core.management.base import BaseCommand
|
||||||
|
from django.core import serializers
|
||||||
|
import json
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
|
|
||||||
|
class Command(BaseCommand):
|
||||||
|
help = 'Export system configuration data to JSON files'
|
||||||
|
|
||||||
|
def add_arguments(self, parser):
|
||||||
|
parser.add_argument(
|
||||||
|
'--output-dir',
|
||||||
|
default='backups/config',
|
||||||
|
help='Output directory for config files'
|
||||||
|
)
|
||||||
|
|
||||||
|
def handle(self, *args, **options):
|
||||||
|
output_dir = options['output_dir']
|
||||||
|
os.makedirs(output_dir, exist_ok=True)
|
||||||
|
|
||||||
|
# Import models here to avoid circular imports
|
||||||
|
from igny8_core.modules.billing.models import Plan, CreditCostConfig
|
||||||
|
from igny8_core.modules.system.models import (
|
||||||
|
AIModelConfig, GlobalIntegrationSettings, SystemSettings
|
||||||
|
)
|
||||||
|
from igny8_core.auth.models import Industry, Sector, SeedKeyword
|
||||||
|
# Add other system models as needed
|
||||||
|
|
||||||
|
exports = {
|
||||||
|
'plans': Plan.objects.all(),
|
||||||
|
'credit_costs': CreditCostConfig.objects.all(),
|
||||||
|
'ai_models': AIModelConfig.objects.all(),
|
||||||
|
# 'global_integrations': GlobalIntegrationSettings.objects.all(),
|
||||||
|
# 'system_settings': SystemSettings.objects.all(),
|
||||||
|
'industries': Industry.objects.all(),
|
||||||
|
'sectors': Sector.objects.all(),
|
||||||
|
'seed_keywords': SeedKeyword.objects.all(),
|
||||||
|
}
|
||||||
|
|
||||||
|
for name, queryset in exports.items():
|
||||||
|
try:
|
||||||
|
data = serializers.serialize('json', queryset, indent=2)
|
||||||
|
filepath = os.path.join(output_dir, f'{name}.json')
|
||||||
|
with open(filepath, 'w') as f:
|
||||||
|
f.write(data)
|
||||||
|
self.stdout.write(
|
||||||
|
self.style.SUCCESS(f'Exported {queryset.count()} {name} to {filepath}')
|
||||||
|
)
|
||||||
|
except Exception as e:
|
||||||
|
self.stdout.write(
|
||||||
|
self.style.ERROR(f'Failed to export {name}: {str(e)}')
|
||||||
|
)
|
||||||
|
|
||||||
|
# Export timestamp
|
||||||
|
with open(os.path.join(output_dir, 'export_metadata.json'), 'w') as f:
|
||||||
|
json.dump({
|
||||||
|
'exported_at': datetime.now().isoformat(),
|
||||||
|
'exports': list(exports.keys())
|
||||||
|
}, f, indent=2)
|
||||||
|
|
||||||
|
self.stdout.write(self.style.SUCCESS('System config export complete!'))
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.2.3 Run Export
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8/backend
|
||||||
|
|
||||||
|
# Run the export command
|
||||||
|
python manage.py export_system_config --output-dir=../backups/config
|
||||||
|
|
||||||
|
# Verify exports
|
||||||
|
ls -la ../backups/config/
|
||||||
|
```
|
||||||
|
|
||||||
|
**✅ CHECKPOINT:** All config JSON files exist and contain data.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6.3 User Data Cleanup
|
||||||
|
|
||||||
|
### ⚠️ DANGER ZONE - READ CAREFULLY ⚠️
|
||||||
|
|
||||||
|
This section PERMANENTLY DELETES user data. Ensure:
|
||||||
|
1. Full backup completed (6.1.2)
|
||||||
|
2. Config exported (6.2)
|
||||||
|
3. You are in the correct environment (NOT PRODUCTION until ready)
|
||||||
|
|
||||||
|
### 6.3.1 Create Cleanup Management Command
|
||||||
|
|
||||||
|
```python
|
||||||
|
# backend/igny8_core/management/commands/cleanup_user_data.py
|
||||||
|
from django.core.management.base import BaseCommand
|
||||||
|
from django.db import transaction
|
||||||
|
|
||||||
|
class Command(BaseCommand):
|
||||||
|
help = 'Clean up all user-generated data (DESTRUCTIVE)'
|
||||||
|
|
||||||
|
def add_arguments(self, parser):
|
||||||
|
parser.add_argument(
|
||||||
|
'--confirm',
|
||||||
|
action='store_true',
|
||||||
|
help='Confirm you want to delete all user data'
|
||||||
|
)
|
||||||
|
parser.add_argument(
|
||||||
|
'--dry-run',
|
||||||
|
action='store_true',
|
||||||
|
help='Show what would be deleted without deleting'
|
||||||
|
)
|
||||||
|
|
||||||
|
def handle(self, *args, **options):
|
||||||
|
if not options['confirm'] and not options['dry_run']:
|
||||||
|
self.stdout.write(
|
||||||
|
self.style.ERROR('Must use --confirm or --dry-run flag')
|
||||||
|
)
|
||||||
|
return
|
||||||
|
|
||||||
|
# Import models
|
||||||
|
from igny8_core.auth.models import Site
|
||||||
|
from igny8_core.business.planning.models import Keywords, Clusters
|
||||||
|
from igny8_core.modules.writer.models import (
|
||||||
|
ContentIdea, Task, Content, ContentImage
|
||||||
|
)
|
||||||
|
from igny8_core.modules.publisher.models import PublishingRecord, SyncEvent
|
||||||
|
from igny8_core.modules.billing.models import CreditTransaction, CreditUsageLog
|
||||||
|
# Add other models
|
||||||
|
|
||||||
|
models_to_clear = [
|
||||||
|
('Keywords', Keywords),
|
||||||
|
('Clusters', Clusters),
|
||||||
|
('ContentIdeas', ContentIdea),
|
||||||
|
('Tasks', Task),
|
||||||
|
('Content', Content),
|
||||||
|
('ContentImages', ContentImage),
|
||||||
|
('PublishingRecords', PublishingRecord),
|
||||||
|
('SyncEvents', SyncEvent),
|
||||||
|
('CreditTransactions', CreditTransaction),
|
||||||
|
('CreditUsageLogs', CreditUsageLog),
|
||||||
|
# Sites should be last (foreign keys)
|
||||||
|
('Sites', Site),
|
||||||
|
]
|
||||||
|
|
||||||
|
if options['dry_run']:
|
||||||
|
self.stdout.write(self.style.WARNING('DRY RUN - No data will be deleted'))
|
||||||
|
for name, model in models_to_clear:
|
||||||
|
count = model.objects.count()
|
||||||
|
self.stdout.write(f' Would delete {count} {name}')
|
||||||
|
return
|
||||||
|
|
||||||
|
# Actual deletion
|
||||||
|
with transaction.atomic():
|
||||||
|
for name, model in models_to_clear:
|
||||||
|
count = model.objects.count()
|
||||||
|
model.objects.all().delete()
|
||||||
|
self.stdout.write(
|
||||||
|
self.style.SUCCESS(f'Deleted {count} {name}')
|
||||||
|
)
|
||||||
|
|
||||||
|
self.stdout.write(self.style.SUCCESS('User data cleanup complete!'))
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.3.2 Execute Cleanup (Step by Step)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8/backend
|
||||||
|
|
||||||
|
# Step 1: DRY RUN - See what will be deleted
|
||||||
|
python manage.py cleanup_user_data --dry-run
|
||||||
|
|
||||||
|
# Step 2: Review output carefully
|
||||||
|
# - Are the counts expected?
|
||||||
|
# - Is this the right environment?
|
||||||
|
|
||||||
|
# Step 3: ONLY if absolutely sure, run actual cleanup
|
||||||
|
python manage.py cleanup_user_data --confirm
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.3.3 Clear Media Storage
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# List media files first
|
||||||
|
ls -la /data/app/igny8/backend/media/
|
||||||
|
|
||||||
|
# Backup media if needed
|
||||||
|
cp -r /data/app/igny8/backend/media/ /data/app/igny8/backups/$(date +%Y%m%d)/media/
|
||||||
|
|
||||||
|
# Clear generated images (be specific about paths)
|
||||||
|
rm -rf /data/app/igny8/backend/media/generated_images/*
|
||||||
|
rm -rf /data/app/igny8/backend/media/content_images/*
|
||||||
|
|
||||||
|
# Verify
|
||||||
|
ls -la /data/app/igny8/backend/media/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.3.4 Clear Logs
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Backup logs first
|
||||||
|
cp -r /data/app/igny8/backend/logs/ /data/app/igny8/backups/$(date +%Y%m%d)/logs/
|
||||||
|
|
||||||
|
# Clear log files (keep empty files for app to write)
|
||||||
|
> /data/app/igny8/backend/logs/publish-sync-logs/*.log
|
||||||
|
> /data/app/igny8/backend/celerybeat-schedule
|
||||||
|
|
||||||
|
# Or remove all logs
|
||||||
|
rm -f /data/app/igny8/backend/logs/**/*.log
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6.4 Configuration Lock (V1.0)
|
||||||
|
|
||||||
|
### 6.4.1 Document Final Configuration
|
||||||
|
|
||||||
|
Create documentation file:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mkdir -p /data/app/igny8/docs/90-REFERENCE/
|
||||||
|
```
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# V1.0 Configuration Reference
|
||||||
|
|
||||||
|
**Locked:** [DATE]
|
||||||
|
**Version:** 1.0.0
|
||||||
|
|
||||||
|
## Plans Configuration
|
||||||
|
|
||||||
|
| Plan | Credits | Sites | Price | Interval |
|
||||||
|
|------|---------|-------|-------|----------|
|
||||||
|
| Starter | X | 1 | $X/mo | monthly |
|
||||||
|
| Growth | X | 3 | $X/mo | monthly |
|
||||||
|
| Scale | X | 10 | $X/mo | monthly |
|
||||||
|
|
||||||
|
## Credit Costs
|
||||||
|
|
||||||
|
| Operation | Cost |
|
||||||
|
|-----------|------|
|
||||||
|
| Basic Image | 1 credit |
|
||||||
|
| Quality Image | 5 credits |
|
||||||
|
| Premium Image | 15 credits |
|
||||||
|
| Clustering | Token-based |
|
||||||
|
| Content Generation | Token-based |
|
||||||
|
|
||||||
|
## AI Model Configurations
|
||||||
|
|
||||||
|
[Document all AI model settings]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**CHANGE POLICY:** Any changes require version bump and documented release.
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.4.2 Git Tag for V1.0
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8
|
||||||
|
|
||||||
|
# Ensure all changes committed
|
||||||
|
git status
|
||||||
|
git add -A
|
||||||
|
git commit -m "Phase 6: Pre-launch cleanup complete"
|
||||||
|
|
||||||
|
# Create annotated tag
|
||||||
|
git tag -a v1.0.0 -m "IGNY8 V1.0.0 - Production Release"
|
||||||
|
|
||||||
|
# Push tag
|
||||||
|
git push origin v1.0.0
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6.5 Post-Cleanup Verification
|
||||||
|
|
||||||
|
### 6.5.1 Database Verification
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /data/app/igny8/backend
|
||||||
|
|
||||||
|
# Run Django check
|
||||||
|
python manage.py check
|
||||||
|
|
||||||
|
# Verify system config still exists
|
||||||
|
python manage.py shell << 'EOF'
|
||||||
|
from igny8_core.modules.billing.models import Plan
|
||||||
|
from igny8_core.auth.models import Industry, Sector
|
||||||
|
print(f"Plans: {Plan.objects.count()}")
|
||||||
|
print(f"Industries: {Industry.objects.count()}")
|
||||||
|
print(f"Sectors: {Sector.objects.count()}")
|
||||||
|
EOF
|
||||||
|
|
||||||
|
# Verify user data cleared
|
||||||
|
python manage.py shell << 'EOF'
|
||||||
|
from igny8_core.auth.models import Site
|
||||||
|
from igny8_core.business.planning.models import Keywords
|
||||||
|
print(f"Sites: {Site.objects.count()}")
|
||||||
|
print(f"Keywords: {Keywords.objects.count()}")
|
||||||
|
EOF
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.5.2 Application Verification
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Start backend
|
||||||
|
cd /data/app/igny8/backend
|
||||||
|
python manage.py runserver &
|
||||||
|
|
||||||
|
# Start frontend
|
||||||
|
cd /data/app/igny8/frontend
|
||||||
|
npm run dev &
|
||||||
|
|
||||||
|
# Manual checks:
|
||||||
|
# 1. Can login as admin
|
||||||
|
# 2. Dashboard loads (empty state)
|
||||||
|
# 3. Plans visible in settings
|
||||||
|
# 4. Can create new user account
|
||||||
|
# 5. Onboarding flow works
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Execution Checklist
|
||||||
|
|
||||||
|
## Phase 1 Checklist
|
||||||
|
|
||||||
|
- [ ] Created safety branch
|
||||||
|
- [ ] Ran baseline tests (all pass)
|
||||||
|
- [ ] Deleted empty folders (6 folders)
|
||||||
|
- [ ] Build succeeds after empty folder deletion
|
||||||
|
- [ ] Deleted template/sample components (ecommerce, sample-componeents, charts, tables)
|
||||||
|
- [ ] Build succeeds after template deletion
|
||||||
|
- [ ] Deleted `CurrentProcessingCard.old.tsx`
|
||||||
|
- [ ] Removed console.log statements (reviewed each)
|
||||||
|
- [ ] ESLint passes with zero errors
|
||||||
|
- [ ] TypeScript compiles without errors
|
||||||
|
- [ ] Manual app verification complete
|
||||||
|
- [ ] Changes committed
|
||||||
|
|
||||||
|
## Phase 5 Checklist
|
||||||
|
|
||||||
|
- [ ] Created feature branch
|
||||||
|
- [ ] Researched existing search implementation
|
||||||
|
- [ ] Implemented keyboard shortcut (Cmd/Ctrl+K)
|
||||||
|
- [ ] Added search filters
|
||||||
|
- [ ] Added recent searches
|
||||||
|
- [ ] Improved results display
|
||||||
|
- [ ] Added image regenerate to `/writer/images`
|
||||||
|
- [ ] Added featured image regenerate to content view
|
||||||
|
- [ ] Backend endpoint created/verified
|
||||||
|
- [ ] Role-based visibility works
|
||||||
|
- [ ] Tested full signup-to-publish flow
|
||||||
|
- [ ] Documented any issues found
|
||||||
|
- [ ] Changes committed
|
||||||
|
|
||||||
|
## Phase 6 Checklist
|
||||||
|
|
||||||
|
- [ ] Created backup branch
|
||||||
|
- [ ] Full database backup created
|
||||||
|
- [ ] Backup file verified (has content)
|
||||||
|
- [ ] Created export_system_config command
|
||||||
|
- [ ] Exported all system config (plans, industries, etc.)
|
||||||
|
- [ ] Config files verified (JSON valid)
|
||||||
|
- [ ] Created cleanup_user_data command
|
||||||
|
- [ ] Ran dry-run cleanup (reviewed counts)
|
||||||
|
- [ ] **CONFIRMED correct environment**
|
||||||
|
- [ ] Executed user data cleanup
|
||||||
|
- [ ] Cleared media storage
|
||||||
|
- [ ] Backed up and cleared logs
|
||||||
|
- [ ] Created V1.0 config documentation
|
||||||
|
- [ ] Created git tag v1.0.0
|
||||||
|
- [ ] Verified system config still exists
|
||||||
|
- [ ] Verified user data cleared
|
||||||
|
- [ ] Application starts and functions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Rollback Procedures
|
||||||
|
|
||||||
|
### Phase 1 Rollback
|
||||||
|
```bash
|
||||||
|
git checkout main
|
||||||
|
git branch -D cleanup/phase-1-*
|
||||||
|
```
|
||||||
|
|
||||||
|
### Phase 5 Rollback
|
||||||
|
```bash
|
||||||
|
git checkout main
|
||||||
|
git branch -D feature/phase-5-ux-improvements
|
||||||
|
```
|
||||||
|
|
||||||
|
### Phase 6 Rollback (Database)
|
||||||
|
```bash
|
||||||
|
# Restore from backup
|
||||||
|
psql -h localhost -U your_user -d igny8_db < /data/app/igny8/backups/YYYYMMDD/full_backup.sql
|
||||||
|
|
||||||
|
# Restore media
|
||||||
|
cp -r /data/app/igny8/backups/YYYYMMDD/media/* /data/app/igny8/backend/media/
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Document Owner:** IGNY8 Team
|
||||||
|
**Review:** Before each phase execution
|
||||||
|
**Approval Required:** Phase 6 cleanup requires explicit approval
|
||||||
@@ -39,7 +39,6 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
|
|||||||
within_stage_delay: formData.within_stage_delay || 3,
|
within_stage_delay: formData.within_stage_delay || 3,
|
||||||
between_stage_delay: formData.between_stage_delay || 5,
|
between_stage_delay: formData.between_stage_delay || 5,
|
||||||
};
|
};
|
||||||
console.log('Saving config with delays:', dataToSave);
|
|
||||||
onSave(dataToSave);
|
onSave(dataToSave);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,184 +0,0 @@
|
|||||||
/**
|
|
||||||
* Current Processing Card Component
|
|
||||||
* Shows real-time automation progress with currently processing items
|
|
||||||
*/
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { automationService, ProcessingState } from '../../services/automationService';
|
|
||||||
|
|
||||||
interface CurrentProcessingCardProps {
|
|
||||||
runId: string;
|
|
||||||
siteId: number;
|
|
||||||
currentStage: number;
|
|
||||||
onComplete?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
|
|
||||||
runId,
|
|
||||||
siteId,
|
|
||||||
currentStage,
|
|
||||||
onComplete,
|
|
||||||
}) => {
|
|
||||||
const [processingState, setProcessingState] = useState<ProcessingState | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let isMounted = true;
|
|
||||||
|
|
||||||
const fetchState = async () => {
|
|
||||||
try {
|
|
||||||
const state = await automationService.getCurrentProcessing(siteId, runId);
|
|
||||||
|
|
||||||
if (!isMounted) return;
|
|
||||||
|
|
||||||
setProcessingState(state);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
// If stage completed (all items processed), trigger refresh
|
|
||||||
if (state && state.processed_items >= state.total_items && state.total_items > 0) {
|
|
||||||
onComplete?.();
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
if (!isMounted) return;
|
|
||||||
console.error('Error fetching processing state:', err);
|
|
||||||
setError('Failed to load processing state');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initial fetch
|
|
||||||
fetchState();
|
|
||||||
|
|
||||||
// Poll every 3 seconds
|
|
||||||
const interval = setInterval(fetchState, 3000);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
isMounted = false;
|
|
||||||
clearInterval(interval);
|
|
||||||
};
|
|
||||||
}, [siteId, runId, onComplete]);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className="bg-error-50 dark:bg-error-900/20 border-2 border-error-500 rounded-lg p-4 mb-6">
|
|
||||||
<p className="text-error-700 dark:text-error-300 text-sm">{error}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!processingState) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const percentage = processingState.percentage;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bg-brand-50 dark:bg-brand-900/20 border-2 border-brand-500 rounded-lg p-6 mb-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="animate-pulse">
|
|
||||||
<svg
|
|
||||||
className="w-8 h-8 text-brand-600 dark:text-brand-400"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
||||||
Automation In Progress
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
Stage {currentStage}: {processingState.stage_name}
|
|
||||||
<span className="ml-2 px-2 py-0.5 bg-brand-100 dark:bg-brand-900 text-brand-700 dark:text-brand-300 rounded text-xs">
|
|
||||||
{processingState.stage_type}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-4xl font-bold text-brand-600 dark:text-brand-400">
|
|
||||||
{percentage}%
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
{processingState.processed_items}/{processingState.total_items} processed
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Progress Bar */}
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
|
|
||||||
<div
|
|
||||||
className="bg-brand-600 dark:bg-brand-500 h-3 rounded-full transition-all duration-500"
|
|
||||||
style={{ width: `${Math.min(percentage, 100)}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Currently Processing and Up Next */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
{/* Currently Processing */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
|
||||||
Currently Processing:
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-1">
|
|
||||||
{processingState.currently_processing.length > 0 ? (
|
|
||||||
processingState.currently_processing.map((item, idx) => (
|
|
||||||
<div key={idx} className="flex items-start gap-2 text-sm">
|
|
||||||
<span className="text-brand-600 dark:text-brand-400 mt-1">•</span>
|
|
||||||
<span className="text-gray-800 dark:text-gray-200 font-medium line-clamp-2">
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="text-sm text-gray-500 dark:text-gray-400 italic">
|
|
||||||
No items currently processing
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Up Next */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
|
||||||
Up Next:
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-1">
|
|
||||||
{processingState.up_next.length > 0 ? (
|
|
||||||
<>
|
|
||||||
{processingState.up_next.map((item, idx) => (
|
|
||||||
<div key={idx} className="flex items-start gap-2 text-sm">
|
|
||||||
<span className="text-gray-400 dark:text-gray-500 mt-1">•</span>
|
|
||||||
<span className="text-gray-600 dark:text-gray-400 line-clamp-2">
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{processingState.remaining_count > processingState.up_next.length + processingState.currently_processing.length && (
|
|
||||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
|
||||||
+ {processingState.remaining_count - processingState.up_next.length - processingState.currently_processing.length} more in queue
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="text-sm text-gray-500 dark:text-gray-400 italic">
|
|
||||||
Queue empty
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CurrentProcessingCard;
|
|
||||||
@@ -8,7 +8,6 @@ export default function UserAddressCard() {
|
|||||||
const { isOpen, openModal, closeModal } = useModal();
|
const { isOpen, openModal, closeModal } = useModal();
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
// Handle save logic here
|
// Handle save logic here
|
||||||
console.log("Saving changes...");
|
|
||||||
closeModal();
|
closeModal();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ export default function UserInfoCard() {
|
|||||||
const { isOpen, openModal, closeModal } = useModal();
|
const { isOpen, openModal, closeModal } = useModal();
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
// Handle save logic here
|
// Handle save logic here
|
||||||
console.log("Saving changes...");
|
|
||||||
closeModal();
|
closeModal();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ export default function UserMetaCard() {
|
|||||||
const { isOpen, openModal, closeModal } = useModal();
|
const { isOpen, openModal, closeModal } = useModal();
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
// Handle save logic here
|
// Handle save logic here
|
||||||
console.log("Saving changes...");
|
|
||||||
closeModal();
|
closeModal();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'br
|
|||||||
|
|
||||||
// Determine progress bar color - use inline styles for dynamic colors
|
// Determine progress bar color - use inline styles for dynamic colors
|
||||||
let barColor = 'var(--color-brand-500)';
|
let barColor = 'var(--color-brand-500)';
|
||||||
let badgeVariant: 'soft' = 'soft';
|
const badgeVariant: 'soft' = 'soft';
|
||||||
let badgeTone: 'brand' | 'warning' | 'danger' | 'success' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' = accentColor;
|
let badgeTone: 'brand' | 'warning' | 'danger' | 'success' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' = accentColor;
|
||||||
|
|
||||||
// Color mapping for progress bars - using CSS variables
|
// Color mapping for progress bars - using CSS variables
|
||||||
|
|||||||
@@ -1,97 +0,0 @@
|
|||||||
import Chart from "react-apexcharts";
|
|
||||||
import { ApexOptions } from "apexcharts";
|
|
||||||
|
|
||||||
export default function BarChartOne() {
|
|
||||||
const options: ApexOptions = {
|
|
||||||
colors: ["var(--color-primary)"],
|
|
||||||
chart: {
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
type: "bar",
|
|
||||||
height: 180,
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
horizontal: false,
|
|
||||||
columnWidth: "39%",
|
|
||||||
borderRadius: 5,
|
|
||||||
borderRadiusApplication: "end",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
show: true,
|
|
||||||
width: 4,
|
|
||||||
colors: ["transparent"],
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
categories: [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
],
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
position: "top",
|
|
||||||
horizontalAlign: "left",
|
|
||||||
fontFamily: "Outfit",
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
title: {
|
|
||||||
text: undefined,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
yaxis: {
|
|
||||||
lines: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
x: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
formatter: (val: number) => `${val}`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const series = [
|
|
||||||
{
|
|
||||||
name: "Sales",
|
|
||||||
data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<div className="max-w-full overflow-x-auto custom-scrollbar">
|
|
||||||
<div id="chartOne" className="min-w-[1000px]">
|
|
||||||
<Chart options={options} series={series} type="bar" height={180} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
import Chart from "react-apexcharts";
|
|
||||||
import { ApexOptions } from "apexcharts";
|
|
||||||
|
|
||||||
export default function LineChartOne() {
|
|
||||||
const options: ApexOptions = {
|
|
||||||
legend: {
|
|
||||||
show: false, // Hide legend
|
|
||||||
position: "top",
|
|
||||||
horizontalAlign: "left",
|
|
||||||
},
|
|
||||||
colors: ["var(--color-primary)", "var(--color-brand-300)"], // Define line colors
|
|
||||||
chart: {
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
height: 310,
|
|
||||||
type: "line", // Set the chart type to 'line'
|
|
||||||
toolbar: {
|
|
||||||
show: false, // Hide chart toolbar
|
|
||||||
},
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
curve: "straight", // Define the line style (straight, smooth, or step)
|
|
||||||
width: [2, 2], // Line width for each dataset
|
|
||||||
},
|
|
||||||
|
|
||||||
fill: {
|
|
||||||
type: "gradient",
|
|
||||||
gradient: {
|
|
||||||
opacityFrom: 0.55,
|
|
||||||
opacityTo: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
markers: {
|
|
||||||
size: 0, // Size of the marker points
|
|
||||||
strokeColors: "#fff", // Marker border color
|
|
||||||
strokeWidth: 2,
|
|
||||||
hover: {
|
|
||||||
size: 6, // Marker size on hover
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
xaxis: {
|
|
||||||
lines: {
|
|
||||||
show: false, // Hide grid lines on x-axis
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
lines: {
|
|
||||||
show: true, // Show grid lines on y-axis
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false, // Disable data labels
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: true, // Enable tooltip
|
|
||||||
x: {
|
|
||||||
format: "dd MMM yyyy", // Format for x-axis tooltip
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
type: "category", // Category-based x-axis
|
|
||||||
categories: [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
],
|
|
||||||
axisBorder: {
|
|
||||||
show: false, // Hide x-axis border
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false, // Hide x-axis ticks
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: false, // Disable tooltip for x-axis points
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
labels: {
|
|
||||||
style: {
|
|
||||||
fontSize: "12px", // Adjust font size for y-axis labels
|
|
||||||
colors: ["var(--color-gray-500)"], // Color of the labels
|
|
||||||
},
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: "", // Remove y-axis title
|
|
||||||
style: {
|
|
||||||
fontSize: "0px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const series = [
|
|
||||||
{
|
|
||||||
name: "Sales",
|
|
||||||
data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Revenue",
|
|
||||||
data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<div className="max-w-full overflow-x-auto custom-scrollbar">
|
|
||||||
<div id="chartEight" className="min-w-[1000px]">
|
|
||||||
<Chart options={options} series={series} type="area" height={310} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -104,8 +104,6 @@ export default function ImageGenerationCard({
|
|||||||
}, [API_BASE_URL]);
|
}, [API_BASE_URL]);
|
||||||
|
|
||||||
const handleGenerate = async () => {
|
const handleGenerate = async () => {
|
||||||
console.log('[ImageGenerationCard] handleGenerate called');
|
|
||||||
|
|
||||||
if (!prompt.trim()) {
|
if (!prompt.trim()) {
|
||||||
toast.error('Please enter a prompt description');
|
toast.error('Please enter a prompt description');
|
||||||
return;
|
return;
|
||||||
@@ -122,11 +120,8 @@ export default function ImageGenerationCard({
|
|||||||
? (imageSettings.model || 'dall-e-3')
|
? (imageSettings.model || 'dall-e-3')
|
||||||
: (imageSettings.runwareModel || 'runware:97@1');
|
: (imageSettings.runwareModel || 'runware:97@1');
|
||||||
|
|
||||||
console.log('[ImageGenerationCard] Service and model:', { service, model, imageSettings });
|
|
||||||
|
|
||||||
// Build prompt with template (similar to reference plugin)
|
// Build prompt with template (similar to reference plugin)
|
||||||
const fullPrompt = `Create a high-quality ${imageType} image. ${prompt}`;
|
const fullPrompt = `Create a high-quality ${imageType} image. ${prompt}`;
|
||||||
console.log('[ImageGenerationCard] Full prompt:', fullPrompt.substring(0, 100) + '...');
|
|
||||||
|
|
||||||
const requestBody = {
|
const requestBody = {
|
||||||
prompt: fullPrompt,
|
prompt: fullPrompt,
|
||||||
@@ -138,9 +133,6 @@ export default function ImageGenerationCard({
|
|||||||
model: model,
|
model: model,
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log('[ImageGenerationCard] Making request to image generation endpoint');
|
|
||||||
console.log('[ImageGenerationCard] Request body:', requestBody);
|
|
||||||
|
|
||||||
// fetchAPI extracts data from unified format {success: true, data: {...}}
|
// fetchAPI extracts data from unified format {success: true, data: {...}}
|
||||||
// So data is the extracted response payload
|
// So data is the extracted response payload
|
||||||
const data = await fetchAPI('/v1/system/settings/integrations/image_generation/generate/', {
|
const data = await fetchAPI('/v1/system/settings/integrations/image_generation/generate/', {
|
||||||
@@ -148,8 +140,6 @@ export default function ImageGenerationCard({
|
|||||||
body: JSON.stringify(requestBody),
|
body: JSON.stringify(requestBody),
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log('[ImageGenerationCard] Response data:', data);
|
|
||||||
|
|
||||||
// fetchAPI extracts data from unified format, so data is the response payload
|
// fetchAPI extracts data from unified format, so data is the response payload
|
||||||
// If fetchAPI didn't throw, the request was successful
|
// If fetchAPI didn't throw, the request was successful
|
||||||
if (!data || typeof data !== 'object') {
|
if (!data || typeof data !== 'object') {
|
||||||
@@ -175,7 +165,6 @@ export default function ImageGenerationCard({
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log('[ImageGenerationCard] Image generation successful:', imageData);
|
|
||||||
toast.success('Image generated successfully!');
|
toast.success('Image generated successfully!');
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
console.error('[ImageGenerationCard] Error in handleGenerate:', {
|
console.error('[ImageGenerationCard] Error in handleGenerate:', {
|
||||||
|
|||||||
@@ -218,37 +218,29 @@ export default function ImageQueueModal({
|
|||||||
|
|
||||||
// Stop polling after max attempts
|
// Stop polling after max attempts
|
||||||
if (pollAttempts > maxPollAttempts) {
|
if (pollAttempts > maxPollAttempts) {
|
||||||
console.warn('Polling timeout reached, stopping');
|
|
||||||
clearInterval(pollInterval);
|
clearInterval(pollInterval);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
console.log(`[ImageQueueModal] Polling task status (attempt ${pollAttempts}):`, taskId);
|
|
||||||
const data = await fetchAPI(`/v1/system/settings/task_progress/${taskId}/`);
|
const data = await fetchAPI(`/v1/system/settings/task_progress/${taskId}/`);
|
||||||
console.log(`[ImageQueueModal] Task status response:`, data);
|
|
||||||
|
|
||||||
// Check if data is valid (not HTML error page)
|
// Check if data is valid (not HTML error page)
|
||||||
if (!data || typeof data !== 'object') {
|
if (!data || typeof data !== 'object') {
|
||||||
console.warn('Invalid task status response:', data);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check state (task_progress returns 'state', not 'status')
|
// Check state (task_progress returns 'state', not 'status')
|
||||||
const taskState = data.state || data.status;
|
const taskState = data.state || data.status;
|
||||||
console.log(`[ImageQueueModal] Task state:`, taskState);
|
|
||||||
|
|
||||||
if (taskState === 'SUCCESS' || taskState === 'FAILURE') {
|
if (taskState === 'SUCCESS' || taskState === 'FAILURE') {
|
||||||
console.log(`[ImageQueueModal] Task completed with state:`, taskState);
|
|
||||||
clearInterval(pollInterval);
|
clearInterval(pollInterval);
|
||||||
|
|
||||||
// Update final state
|
// Update final state
|
||||||
if (taskState === 'SUCCESS' && data.result) {
|
if (taskState === 'SUCCESS' && data.result) {
|
||||||
console.log(`[ImageQueueModal] Updating queue from result:`, data.result);
|
|
||||||
updateQueueFromTaskResult(data.result);
|
updateQueueFromTaskResult(data.result);
|
||||||
} else if (taskState === 'SUCCESS' && data.meta && data.meta.result) {
|
} else if (taskState === 'SUCCESS' && data.meta && data.meta.result) {
|
||||||
// Some responses have result in meta
|
// Some responses have result in meta
|
||||||
console.log(`[ImageQueueModal] Updating queue from meta result:`, data.meta.result);
|
|
||||||
updateQueueFromTaskResult(data.meta.result);
|
updateQueueFromTaskResult(data.meta.result);
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
@@ -256,10 +248,7 @@ export default function ImageQueueModal({
|
|||||||
|
|
||||||
// Update progress from task meta
|
// Update progress from task meta
|
||||||
if (data.meta) {
|
if (data.meta) {
|
||||||
console.log(`[ImageQueueModal] Updating queue from meta:`, data.meta);
|
|
||||||
updateQueueFromTaskMeta(data.meta);
|
updateQueueFromTaskMeta(data.meta);
|
||||||
} else {
|
|
||||||
console.log(`[ImageQueueModal] No meta data in response`);
|
|
||||||
}
|
}
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
// Check if it's a JSON parse error (HTML response) or API error
|
// Check if it's a JSON parse error (HTML response) or API error
|
||||||
|
|||||||
@@ -1,94 +0,0 @@
|
|||||||
// react plugin for creating vector maps
|
|
||||||
import { VectorMap } from "@react-jvectormap/core";
|
|
||||||
import { worldMill } from "@react-jvectormap/world";
|
|
||||||
|
|
||||||
// Define the component props
|
|
||||||
interface CountryMapProps {
|
|
||||||
mapColor?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CountryMap: React.FC<CountryMapProps> = ({ mapColor }) => {
|
|
||||||
return (
|
|
||||||
<VectorMap
|
|
||||||
map={worldMill}
|
|
||||||
backgroundColor="transparent"
|
|
||||||
markerStyle={{
|
|
||||||
initial: {
|
|
||||||
fill: "var(--color-primary)",
|
|
||||||
r: 4, // Custom radius for markers
|
|
||||||
} as any, // Type assertion to bypass strict CSS property checks
|
|
||||||
}}
|
|
||||||
markersSelectable={true}
|
|
||||||
markers={[
|
|
||||||
{
|
|
||||||
latLng: [37.2580397, -104.657039],
|
|
||||||
name: "United States",
|
|
||||||
style: {
|
|
||||||
fill: "var(--color-primary)",
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "white",
|
|
||||||
stroke: "var(--color-gray-700)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
latLng: [20.7504374, 73.7276105],
|
|
||||||
name: "India",
|
|
||||||
style: { fill: "var(--color-primary)", borderWidth: 1, borderColor: "white" },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
latLng: [53.613, -11.6368],
|
|
||||||
name: "United Kingdom",
|
|
||||||
style: { fill: "var(--color-primary)", borderWidth: 1, borderColor: "white" },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
latLng: [-25.0304388, 115.2092761],
|
|
||||||
name: "Sweden",
|
|
||||||
style: {
|
|
||||||
fill: "var(--color-primary)",
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "white",
|
|
||||||
strokeOpacity: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
zoomOnScroll={false}
|
|
||||||
zoomMax={12}
|
|
||||||
zoomMin={1}
|
|
||||||
zoomAnimate={true}
|
|
||||||
zoomStep={1.5}
|
|
||||||
regionStyle={{
|
|
||||||
initial: {
|
|
||||||
fill: mapColor || "var(--color-gray-300)",
|
|
||||||
fillOpacity: 1,
|
|
||||||
fontFamily: "Outfit",
|
|
||||||
stroke: "none",
|
|
||||||
strokeWidth: 0,
|
|
||||||
strokeOpacity: 0,
|
|
||||||
},
|
|
||||||
hover: {
|
|
||||||
fillOpacity: 0.7,
|
|
||||||
cursor: "pointer",
|
|
||||||
fill: "var(--color-primary)",
|
|
||||||
stroke: "none",
|
|
||||||
},
|
|
||||||
selected: {
|
|
||||||
fill: "var(--color-primary)",
|
|
||||||
},
|
|
||||||
selectedHover: {},
|
|
||||||
}}
|
|
||||||
regionLabelStyle={{
|
|
||||||
initial: {
|
|
||||||
fill: "var(--color-gray-700)",
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: "13px",
|
|
||||||
stroke: "none",
|
|
||||||
},
|
|
||||||
hover: {},
|
|
||||||
selected: {},
|
|
||||||
selectedHover: {},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CountryMap;
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { Dropdown } from "../ui/dropdown/Dropdown";
|
|
||||||
import { DropdownItem } from "../ui/dropdown/DropdownItem";
|
|
||||||
import { MoreDotIcon } from "../../icons";
|
|
||||||
import CountryMap from "./CountryMap";
|
|
||||||
import IconButton from "../ui/button/IconButton";
|
|
||||||
|
|
||||||
export default function DemographicCard() {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
|
|
||||||
function toggleDropdown() {
|
|
||||||
setIsOpen(!isOpen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDropdown() {
|
|
||||||
setIsOpen(false);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] sm:p-6">
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
|
|
||||||
Customers Demographic
|
|
||||||
</h3>
|
|
||||||
<p className="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
Number of customer based on country
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="relative inline-block">
|
|
||||||
<IconButton variant="ghost" size="sm" onClick={toggleDropdown} aria-label="More options" icon={<MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 size-6" />} />
|
|
||||||
<Dropdown
|
|
||||||
isOpen={isOpen}
|
|
||||||
onClose={closeDropdown}
|
|
||||||
className="w-40 p-2"
|
|
||||||
>
|
|
||||||
<DropdownItem
|
|
||||||
onItemClick={closeDropdown}
|
|
||||||
className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
View More
|
|
||||||
</DropdownItem>
|
|
||||||
<DropdownItem
|
|
||||||
onItemClick={closeDropdown}
|
|
||||||
className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</DropdownItem>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="px-4 py-6 my-6 overflow-hidden border border-gary-200 rounded-2xl dark:border-gray-800 sm:px-6">
|
|
||||||
<div
|
|
||||||
id="mapOne"
|
|
||||||
className="mapOne map-btn -mx-4 -my-6 h-[212px] w-[252px] 2xsm:w-[307px] xsm:w-[358px] sm:-mx-6 md:w-[668px] lg:w-[634px] xl:w-[393px] 2xl:w-[554px]"
|
|
||||||
>
|
|
||||||
<CountryMap />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-5">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="items-center w-full rounded-full max-w-8">
|
|
||||||
<img src="./images/country/country-01.svg" alt="usa" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-semibold text-gray-800 text-theme-sm dark:text-white/90">
|
|
||||||
USA
|
|
||||||
</p>
|
|
||||||
<span className="block text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
2,379 Customers
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex w-full max-w-[140px] items-center gap-3">
|
|
||||||
<div className="relative block h-2 w-full max-w-[100px] rounded-sm bg-gray-200 dark:bg-gray-800">
|
|
||||||
<div className="absolute left-0 top-0 flex h-full w-[79%] items-center justify-center rounded-sm bg-brand-500 text-xs font-medium text-white"></div>
|
|
||||||
</div>
|
|
||||||
<p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
|
|
||||||
79%
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="items-center w-full rounded-full max-w-8">
|
|
||||||
<img src="./images/country/country-02.svg" alt="france" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-semibold text-gray-800 text-theme-sm dark:text-white/90">
|
|
||||||
France
|
|
||||||
</p>
|
|
||||||
<span className="block text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
589 Customers
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex w-full max-w-[140px] items-center gap-3">
|
|
||||||
<div className="relative block h-2 w-full max-w-[100px] rounded-sm bg-gray-200 dark:bg-gray-800">
|
|
||||||
<div className="absolute left-0 top-0 flex h-full w-[23%] items-center justify-center rounded-sm bg-brand-500 text-xs font-medium text-white"></div>
|
|
||||||
</div>
|
|
||||||
<p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
|
|
||||||
23%
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import {
|
|
||||||
ArrowDownIcon,
|
|
||||||
ArrowUpIcon,
|
|
||||||
BoxIconLine,
|
|
||||||
GroupIcon,
|
|
||||||
} from "../../icons";
|
|
||||||
import Badge from "../ui/badge/Badge";
|
|
||||||
|
|
||||||
export default function EcommerceMetrics() {
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6">
|
|
||||||
{/* <!-- Metric Item Start --> */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
|
|
||||||
<div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800">
|
|
||||||
<GroupIcon className="text-gray-800 size-6 dark:text-white/90" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-end justify-between mt-5">
|
|
||||||
<div>
|
|
||||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
Customers
|
|
||||||
</span>
|
|
||||||
<h4 className="mt-2 font-bold text-gray-800 text-title-sm dark:text-white/90">
|
|
||||||
3,782
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<Badge color="success">
|
|
||||||
<ArrowUpIcon />
|
|
||||||
11.01%
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* <!-- Metric Item End --> */}
|
|
||||||
|
|
||||||
{/* <!-- Metric Item Start --> */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
|
|
||||||
<div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800">
|
|
||||||
<BoxIconLine className="text-gray-800 size-6 dark:text-white/90" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-end justify-between mt-5">
|
|
||||||
<div>
|
|
||||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
Orders
|
|
||||||
</span>
|
|
||||||
<h4 className="mt-2 font-bold text-gray-800 text-title-sm dark:text-white/90">
|
|
||||||
5,359
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Badge color="error">
|
|
||||||
<ArrowDownIcon />
|
|
||||||
9.05%
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* <!-- Metric Item End --> */}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,140 +0,0 @@
|
|||||||
import Chart from "react-apexcharts";
|
|
||||||
import { ApexOptions } from "apexcharts";
|
|
||||||
import { Dropdown } from "../ui/dropdown/Dropdown";
|
|
||||||
import { DropdownItem } from "../ui/dropdown/DropdownItem";
|
|
||||||
import { MoreDotIcon } from "../../icons";
|
|
||||||
import { useState } from "react";
|
|
||||||
import IconButton from "../ui/button/IconButton";
|
|
||||||
|
|
||||||
export default function MonthlySalesChart() {
|
|
||||||
const options: ApexOptions = {
|
|
||||||
colors: ["var(--color-primary)"],
|
|
||||||
chart: {
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
type: "bar",
|
|
||||||
height: 180,
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
horizontal: false,
|
|
||||||
columnWidth: "39%",
|
|
||||||
borderRadius: 5,
|
|
||||||
borderRadiusApplication: "end",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
show: true,
|
|
||||||
width: 4,
|
|
||||||
colors: ["transparent"],
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
categories: [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
],
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
position: "top",
|
|
||||||
horizontalAlign: "left",
|
|
||||||
fontFamily: "Outfit",
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
title: {
|
|
||||||
text: undefined,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
yaxis: {
|
|
||||||
lines: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
x: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
formatter: (val: number) => `${val}`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const series = [
|
|
||||||
{
|
|
||||||
name: "Sales",
|
|
||||||
data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
|
|
||||||
function toggleDropdown() {
|
|
||||||
setIsOpen(!isOpen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDropdown() {
|
|
||||||
setIsOpen(false);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-5 pt-5 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
|
|
||||||
Monthly Sales
|
|
||||||
</h3>
|
|
||||||
<div className="relative inline-block">
|
|
||||||
<IconButton variant="ghost" size="sm" onClick={toggleDropdown} aria-label="More options" icon={<MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 size-6" />} />
|
|
||||||
<Dropdown
|
|
||||||
isOpen={isOpen}
|
|
||||||
onClose={closeDropdown}
|
|
||||||
className="w-40 p-2"
|
|
||||||
>
|
|
||||||
<DropdownItem
|
|
||||||
onItemClick={closeDropdown}
|
|
||||||
className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
View More
|
|
||||||
</DropdownItem>
|
|
||||||
<DropdownItem
|
|
||||||
onItemClick={closeDropdown}
|
|
||||||
className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</DropdownItem>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="max-w-full overflow-x-auto custom-scrollbar">
|
|
||||||
<div className="-ml-5 min-w-[650px] xl:min-w-full pl-2">
|
|
||||||
<Chart options={options} series={series} type="bar" height={180} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,197 +0,0 @@
|
|||||||
import Chart from "react-apexcharts";
|
|
||||||
import { ApexOptions } from "apexcharts";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Dropdown } from "../ui/dropdown/Dropdown";
|
|
||||||
import { DropdownItem } from "../ui/dropdown/DropdownItem";
|
|
||||||
import { MoreDotIcon } from "../../icons";
|
|
||||||
import IconButton from "../ui/button/IconButton";
|
|
||||||
|
|
||||||
export default function MonthlyTarget() {
|
|
||||||
const series = [75.55];
|
|
||||||
const options: ApexOptions = {
|
|
||||||
colors: ["var(--color-primary)"],
|
|
||||||
chart: {
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
type: "radialBar",
|
|
||||||
height: 330,
|
|
||||||
sparkline: {
|
|
||||||
enabled: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
radialBar: {
|
|
||||||
startAngle: -85,
|
|
||||||
endAngle: 85,
|
|
||||||
hollow: {
|
|
||||||
size: "80%",
|
|
||||||
},
|
|
||||||
track: {
|
|
||||||
background: "var(--color-gray-200)",
|
|
||||||
strokeWidth: "100%",
|
|
||||||
margin: 5, // margin is in pixels
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
name: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
fontSize: "36px",
|
|
||||||
fontWeight: "600",
|
|
||||||
offsetY: -40,
|
|
||||||
color: "var(--color-gray-800)",
|
|
||||||
formatter: function (val) {
|
|
||||||
return val + "%";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
type: "solid",
|
|
||||||
colors: ["var(--color-primary)"],
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
lineCap: "round",
|
|
||||||
},
|
|
||||||
labels: ["Progress"],
|
|
||||||
};
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
|
|
||||||
function toggleDropdown() {
|
|
||||||
setIsOpen(!isOpen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDropdown() {
|
|
||||||
setIsOpen(false);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-gray-100 dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 pt-5 bg-white shadow-default rounded-2xl pb-11 dark:bg-gray-900 sm:px-6 sm:pt-6">
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
|
|
||||||
Monthly Target
|
|
||||||
</h3>
|
|
||||||
<p className="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
Target you’ve set for each month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="relative inline-block">
|
|
||||||
<IconButton variant="ghost" size="sm" onClick={toggleDropdown} aria-label="More options" icon={<MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 size-6" />} />
|
|
||||||
<Dropdown
|
|
||||||
isOpen={isOpen}
|
|
||||||
onClose={closeDropdown}
|
|
||||||
className="w-40 p-2"
|
|
||||||
>
|
|
||||||
<DropdownItem
|
|
||||||
onItemClick={closeDropdown}
|
|
||||||
className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
View More
|
|
||||||
</DropdownItem>
|
|
||||||
<DropdownItem
|
|
||||||
onItemClick={closeDropdown}
|
|
||||||
className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</DropdownItem>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative ">
|
|
||||||
<div className="max-h-[330px]" id="chartDarkStyle">
|
|
||||||
<Chart
|
|
||||||
options={options}
|
|
||||||
series={series}
|
|
||||||
type="radialBar"
|
|
||||||
height={330}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-[95%] rounded-full bg-success-50 px-3 py-1 text-xs font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500">
|
|
||||||
+10%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="mx-auto mt-10 w-full max-w-[380px] text-center text-sm text-gray-500 sm:text-base">
|
|
||||||
You earn $3287 today, it's higher than last month. Keep up your good
|
|
||||||
work!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-center gap-5 px-6 py-3.5 sm:gap-8 sm:py-5">
|
|
||||||
<div>
|
|
||||||
<p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
|
|
||||||
Target
|
|
||||||
</p>
|
|
||||||
<p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
|
|
||||||
$20K
|
|
||||||
<svg
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M7.26816 13.6632C7.4056 13.8192 7.60686 13.9176 7.8311 13.9176C7.83148 13.9176 7.83187 13.9176 7.83226 13.9176C8.02445 13.9178 8.21671 13.8447 8.36339 13.6981L12.3635 9.70076C12.6565 9.40797 12.6567 8.9331 12.3639 8.6401C12.0711 8.34711 11.5962 8.34694 11.3032 8.63973L8.5811 11.36L8.5811 2.5C8.5811 2.08579 8.24531 1.75 7.8311 1.75C7.41688 1.75 7.0811 2.08579 7.0811 2.5L7.0811 11.3556L4.36354 8.63975C4.07055 8.34695 3.59568 8.3471 3.30288 8.64009C3.01008 8.93307 3.01023 9.40794 3.30321 9.70075L7.26816 13.6632Z"
|
|
||||||
fill="#D92D20"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-px bg-gray-200 h-7 dark:bg-gray-800"></div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
|
|
||||||
Revenue
|
|
||||||
</p>
|
|
||||||
<p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
|
|
||||||
$20K
|
|
||||||
<svg
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M7.60141 2.33683C7.73885 2.18084 7.9401 2.08243 8.16435 2.08243C8.16475 2.08243 8.16516 2.08243 8.16556 2.08243C8.35773 2.08219 8.54998 2.15535 8.69664 2.30191L12.6968 6.29924C12.9898 6.59203 12.9899 7.0669 12.6971 7.3599C12.4044 7.6529 11.9295 7.65306 11.6365 7.36027L8.91435 4.64004L8.91435 13.5C8.91435 13.9142 8.57856 14.25 8.16435 14.25C7.75013 14.25 7.41435 13.9142 7.41435 13.5L7.41435 4.64442L4.69679 7.36025C4.4038 7.65305 3.92893 7.6529 3.63613 7.35992C3.34333 7.06693 3.34348 6.59206 3.63646 6.29926L7.60141 2.33683Z"
|
|
||||||
fill="#039855"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-px bg-gray-200 h-7 dark:bg-gray-800"></div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
|
|
||||||
Today
|
|
||||||
</p>
|
|
||||||
<p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
|
|
||||||
$20K
|
|
||||||
<svg
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M7.60141 2.33683C7.73885 2.18084 7.9401 2.08243 8.16435 2.08243C8.16475 2.08243 8.16516 2.08243 8.16556 2.08243C8.35773 2.08219 8.54998 2.15535 8.69664 2.30191L12.6968 6.29924C12.9898 6.59203 12.9899 7.0669 12.6971 7.3599C12.4044 7.6529 11.9295 7.65306 11.6365 7.36027L8.91435 4.64004L8.91435 13.5C8.91435 13.9142 8.57856 14.25 8.16435 14.25C7.75013 14.25 7.41435 13.9142 7.41435 13.5L7.41435 4.64442L4.69679 7.36025C4.4038 7.65305 3.92893 7.6529 3.63613 7.35992C3.34333 7.06693 3.34348 6.59206 3.63646 6.29926L7.60141 2.33683Z"
|
|
||||||
fill="#039855"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,209 +0,0 @@
|
|||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "../ui/table";
|
|
||||||
import Badge from "../ui/badge/Badge";
|
|
||||||
import Button from "../ui/button/Button";
|
|
||||||
|
|
||||||
// Define the TypeScript interface for the table rows
|
|
||||||
interface Product {
|
|
||||||
id: number; // Unique identifier for each product
|
|
||||||
name: string; // Product name
|
|
||||||
variants: string; // Number of variants (e.g., "1 Variant", "2 Variants")
|
|
||||||
category: string; // Category of the product
|
|
||||||
price: string; // Price of the product (as a string with currency symbol)
|
|
||||||
// status: string; // Status of the product
|
|
||||||
image: string; // URL or path to the product image
|
|
||||||
status: "Delivered" | "Pending" | "Canceled"; // Status of the product
|
|
||||||
}
|
|
||||||
|
|
||||||
// Define the table data using the interface
|
|
||||||
const tableData: Product[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: "MacBook Pro 13”",
|
|
||||||
variants: "2 Variants",
|
|
||||||
category: "Laptop",
|
|
||||||
price: "$2399.00",
|
|
||||||
status: "Delivered",
|
|
||||||
image: "/images/product/product-01.jpg", // Replace with actual image URL
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: "Apple Watch Ultra",
|
|
||||||
variants: "1 Variant",
|
|
||||||
category: "Watch",
|
|
||||||
price: "$879.00",
|
|
||||||
status: "Pending",
|
|
||||||
image: "/images/product/product-02.jpg", // Replace with actual image URL
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: "iPhone 15 Pro Max",
|
|
||||||
variants: "2 Variants",
|
|
||||||
category: "SmartPhone",
|
|
||||||
price: "$1869.00",
|
|
||||||
status: "Delivered",
|
|
||||||
image: "/images/product/product-03.jpg", // Replace with actual image URL
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: "iPad Pro 3rd Gen",
|
|
||||||
variants: "2 Variants",
|
|
||||||
category: "Electronics",
|
|
||||||
price: "$1699.00",
|
|
||||||
status: "Canceled",
|
|
||||||
image: "/images/product/product-04.jpg", // Replace with actual image URL
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: "AirPods Pro 2nd Gen",
|
|
||||||
variants: "1 Variant",
|
|
||||||
category: "Accessories",
|
|
||||||
price: "$240.00",
|
|
||||||
status: "Delivered",
|
|
||||||
image: "/images/product/product-05.jpg", // Replace with actual image URL
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function RecentOrders() {
|
|
||||||
return (
|
|
||||||
<div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6">
|
|
||||||
<div className="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
|
|
||||||
Recent Orders
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Button variant="outline" size="sm">
|
|
||||||
<svg
|
|
||||||
className="stroke-current fill-white dark:fill-gray-800"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M2.29004 5.90393H17.7067"
|
|
||||||
stroke=""
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M17.7075 14.0961H2.29085"
|
|
||||||
stroke=""
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M12.0826 3.33331C13.5024 3.33331 14.6534 4.48431 14.6534 5.90414C14.6534 7.32398 13.5024 8.47498 12.0826 8.47498C10.6627 8.47498 9.51172 7.32398 9.51172 5.90415C9.51172 4.48432 10.6627 3.33331 12.0826 3.33331Z"
|
|
||||||
fill=""
|
|
||||||
stroke=""
|
|
||||||
strokeWidth="1.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M7.91745 11.525C6.49762 11.525 5.34662 12.676 5.34662 14.0959C5.34661 15.5157 6.49762 16.6667 7.91745 16.6667C9.33728 16.6667 10.4883 15.5157 10.4883 14.0959C10.4883 12.676 9.33728 11.525 7.91745 11.525Z"
|
|
||||||
fill=""
|
|
||||||
stroke=""
|
|
||||||
strokeWidth="1.5"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Filter
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" size="sm">
|
|
||||||
See all
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="max-w-full overflow-x-auto">
|
|
||||||
<Table>
|
|
||||||
{/* Table Header */}
|
|
||||||
<TableHeader className="border-gray-100 dark:border-gray-800 border-y">
|
|
||||||
<TableRow>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
Products
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
Category
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
Price
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
Status
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
|
|
||||||
{/* Table Body */}
|
|
||||||
|
|
||||||
<TableBody className="divide-y divide-gray-100 dark:divide-gray-800">
|
|
||||||
{tableData.map((product) => (
|
|
||||||
<TableRow key={product.id} className="">
|
|
||||||
<TableCell className="py-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="h-[50px] w-[50px] overflow-hidden rounded-md">
|
|
||||||
<img
|
|
||||||
src={product.image}
|
|
||||||
className="h-[50px] w-[50px]"
|
|
||||||
alt={product.name}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
|
|
||||||
{product.name}
|
|
||||||
</p>
|
|
||||||
<span className="text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
{product.variants}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
{product.price}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
{product.category}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
<Badge
|
|
||||||
size="sm"
|
|
||||||
color={
|
|
||||||
product.status === "Delivered"
|
|
||||||
? "success"
|
|
||||||
: product.status === "Pending"
|
|
||||||
? "warning"
|
|
||||||
: "error"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{product.status}
|
|
||||||
</Badge>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
import Chart from "react-apexcharts";
|
|
||||||
import { ApexOptions } from "apexcharts";
|
|
||||||
import ChartTab from "../common/ChartTab";
|
|
||||||
|
|
||||||
export default function StatisticsChart() {
|
|
||||||
const options: ApexOptions = {
|
|
||||||
legend: {
|
|
||||||
show: false, // Hide legend
|
|
||||||
position: "top",
|
|
||||||
horizontalAlign: "left",
|
|
||||||
},
|
|
||||||
colors: ["var(--color-primary)", "var(--color-brand-300)"], // Define line colors
|
|
||||||
chart: {
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
height: 310,
|
|
||||||
type: "line", // Set the chart type to 'line'
|
|
||||||
toolbar: {
|
|
||||||
show: false, // Hide chart toolbar
|
|
||||||
},
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
curve: "straight", // Define the line style (straight, smooth, or step)
|
|
||||||
width: [2, 2], // Line width for each dataset
|
|
||||||
},
|
|
||||||
|
|
||||||
fill: {
|
|
||||||
type: "gradient",
|
|
||||||
gradient: {
|
|
||||||
opacityFrom: 0.55,
|
|
||||||
opacityTo: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
markers: {
|
|
||||||
size: 0, // Size of the marker points
|
|
||||||
strokeColors: "#fff", // Marker border color
|
|
||||||
strokeWidth: 2,
|
|
||||||
hover: {
|
|
||||||
size: 6, // Marker size on hover
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
xaxis: {
|
|
||||||
lines: {
|
|
||||||
show: false, // Hide grid lines on x-axis
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
lines: {
|
|
||||||
show: true, // Show grid lines on y-axis
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false, // Disable data labels
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: true, // Enable tooltip
|
|
||||||
x: {
|
|
||||||
format: "dd MMM yyyy", // Format for x-axis tooltip
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
type: "category", // Category-based x-axis
|
|
||||||
categories: [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
],
|
|
||||||
axisBorder: {
|
|
||||||
show: false, // Hide x-axis border
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false, // Hide x-axis ticks
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: false, // Disable tooltip for x-axis points
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
labels: {
|
|
||||||
style: {
|
|
||||||
fontSize: "12px", // Adjust font size for y-axis labels
|
|
||||||
colors: ["var(--color-gray-500)"], // Color of the labels
|
|
||||||
},
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: "", // Remove y-axis title
|
|
||||||
style: {
|
|
||||||
fontSize: "0px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const series = [
|
|
||||||
{
|
|
||||||
name: "Sales",
|
|
||||||
data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Revenue",
|
|
||||||
data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white px-5 pb-5 pt-5 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6">
|
|
||||||
<div className="flex flex-col gap-5 mb-6 sm:flex-row sm:justify-between">
|
|
||||||
<div className="w-full">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
|
|
||||||
Statistics
|
|
||||||
</h3>
|
|
||||||
<p className="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
Target you’ve set for each month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-start w-full gap-3 sm:justify-end">
|
|
||||||
<ChartTab />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="max-w-full overflow-x-auto custom-scrollbar">
|
|
||||||
<div className="min-w-[1000px] xl:min-w-full">
|
|
||||||
<Chart options={options} series={series} type="area" height={310} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,546 +0,0 @@
|
|||||||
<div x-data="{selectedTaskGroup: 'All'}" class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<!-- Task header Start -->
|
|
||||||
<div class="flex flex-col items-center px-4 py-5 xl:px-6 xl:py-6">
|
|
||||||
<div class="flex flex-col w-full gap-5 sm:justify-between xl:flex-row xl:items-center">
|
|
||||||
<div class="flex flex-wrap items-center gap-x-1 gap-y-2 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900">
|
|
||||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md h group hover:text-gray-900 dark:hover:text-white text-gray-900 dark:text-white bg-white dark:bg-gray-800" :class="selectedTaskGroup === 'All' ? 'text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'" @click="selectedTaskGroup = 'All' ">
|
|
||||||
All Tasks
|
|
||||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15" :class="selectedTaskGroup === 'All' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : 'bg-white dark:bg-white/[0.03]'">
|
|
||||||
11
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400" :class="selectedTaskGroup === 'Todo' ? 'text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'" @click="selectedTaskGroup = 'Todo' ">
|
|
||||||
To do
|
|
||||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 bg-white dark:bg-white/[0.03]" :class="selectedTaskGroup === 'Todo' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : 'bg-white dark:bg-white/[0.03]'">
|
|
||||||
3
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400" :class="selectedTaskGroup === 'InProgress' ? 'text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'" @click="selectedTaskGroup = 'InProgress' ">
|
|
||||||
In Progress
|
|
||||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 bg-white dark:bg-white/[0.03]" :class="selectedTaskGroup === 'InProgress' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : 'bg-white dark:bg-white/[0.03]'">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400" :class="selectedTaskGroup === 'Completed' ? 'text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'" @click="selectedTaskGroup = 'Completed' ">
|
|
||||||
Completed
|
|
||||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 bg-white dark:bg-white/[0.03]" :class="selectedTaskGroup === 'Completed' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : 'bg-white dark:bg-white/[0.03]'">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center gap-3 xl:justify-end">
|
|
||||||
<button class="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.03]">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0826 4.0835C11.0769 4.0835 10.2617 4.89871 10.2617 5.90433C10.2617 6.90995 11.0769 7.72516 12.0826 7.72516C13.0882 7.72516 13.9034 6.90995 13.9034 5.90433C13.9034 4.89871 13.0882 4.0835 12.0826 4.0835ZM2.29004 6.65409H8.84671C9.18662 8.12703 10.5063 9.22516 12.0826 9.22516C13.6588 9.22516 14.9785 8.12703 15.3184 6.65409H17.7067C18.1209 6.65409 18.4567 6.31831 18.4567 5.90409C18.4567 5.48988 18.1209 5.15409 17.7067 5.15409H15.3183C14.9782 3.68139 13.6586 2.5835 12.0826 2.5835C10.5065 2.5835 9.18691 3.68139 8.84682 5.15409H2.29004C1.87583 5.15409 1.54004 5.48988 1.54004 5.90409C1.54004 6.31831 1.87583 6.65409 2.29004 6.65409ZM4.6816 13.3462H2.29085C1.87664 13.3462 1.54085 13.682 1.54085 14.0962C1.54085 14.5104 1.87664 14.8462 2.29085 14.8462H4.68172C5.02181 16.3189 6.34142 17.4168 7.91745 17.4168C9.49348 17.4168 10.8131 16.3189 11.1532 14.8462H17.7075C18.1217 14.8462 18.4575 14.5104 18.4575 14.0962C18.4575 13.682 18.1217 13.3462 17.7075 13.3462H11.1533C10.8134 11.8733 9.49366 10.7752 7.91745 10.7752C6.34124 10.7752 5.02151 11.8733 4.6816 13.3462ZM9.73828 14.096C9.73828 13.0904 8.92307 12.2752 7.91745 12.2752C6.91183 12.2752 6.09662 13.0904 6.09662 14.096C6.09662 15.1016 6.91183 15.9168 7.91745 15.9168C8.92307 15.9168 9.73828 15.1016 9.73828 14.096Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
Filter & Short
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button @click="isTaskModalModal = true" class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600">
|
|
||||||
Add New Task
|
|
||||||
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.2502 4.99951C9.2502 4.5853 9.58599 4.24951 10.0002 4.24951C10.4144 4.24951 10.7502 4.5853 10.7502 4.99951V9.24971H15.0006C15.4148 9.24971 15.7506 9.5855 15.7506 9.99971C15.7506 10.4139 15.4148 10.7497 15.0006 10.7497H10.7502V15.0001C10.7502 15.4143 10.4144 15.7501 10.0002 15.7501C9.58599 15.7501 9.2502 15.4143 9.2502 15.0001V10.7497H5C4.58579 10.7497 4.25 10.4139 4.25 9.99971C4.25 9.5855 4.58579 9.24971 5 9.24971H9.2502V4.99951Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Task header End -->
|
|
||||||
|
|
||||||
<!-- Task wrapper Start -->
|
|
||||||
<div class="mt-7 grid grid-cols-1 border-t border-gray-200 sm:mt-0 sm:grid-cols-2 xl:grid-cols-3 dark:border-gray-800">
|
|
||||||
<!-- To do list -->
|
|
||||||
<div class="swim-lane flex flex-col gap-5 p-4 xl:p-6">
|
|
||||||
<div class="mb-1 flex items-center justify-between">
|
|
||||||
<h3 class="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
To Do
|
|
||||||
<span class="text-theme-xs inline-flex rounded-full bg-gray-100 px-2 py-0.5 font-medium text-gray-700 dark:bg-white/[0.03] dark:text-white/80">
|
|
||||||
3
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div x-data="{openDropDown: false}" class="relative">
|
|
||||||
<button @click="openDropDown = !openDropDown" class="text-gray-700 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.2451C6.96552 10.2451 7.74902 11.0286 7.74902 11.9951V12.0051C7.74902 12.9716 6.96552 13.7551 5.99902 13.7551C5.03253 13.7551 4.24902 12.9716 4.24902 12.0051V11.9951C4.24902 11.0286 5.03253 10.2451 5.99902 10.2451ZM17.999 10.2451C18.9655 10.2451 19.749 11.0286 19.749 11.9951V12.0051C19.749 12.9716 18.9655 13.7551 17.999 13.7551C17.0325 13.7551 16.249 12.9716 16.249 12.0051V11.9951C16.249 11.0286 17.0325 10.2451 17.999 10.2451ZM13.749 11.9951C13.749 11.0286 12.9655 10.2451 11.999 10.2451C11.0325 10.2451 10.249 11.0286 10.249 11.9951V12.0051C10.249 12.9716 11.0325 13.7551 11.999 13.7551C12.9655 13.7551 13.749 12.9716 13.749 12.0051V11.9951Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div x-show="openDropDown" @click.outside="openDropDown = false" class="shadow-theme-md dark:bg-gray-dark absolute top-full right-0 z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800" style="display: none;">
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Clear All
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Finish user onboarding
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Tomorrow
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-01.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Solve the Dribbble prioritisation issue with the team
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Jan 8, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
2
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="bg-brand-50 text-theme-xs text-brand-500 dark:bg-brand-500/15 dark:text-brand-400 mt-3 inline-flex rounded-full px-2 py-0.5 font-medium">
|
|
||||||
Marketing
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-07.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Change license and remove products
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Jan 8, 2027
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="text-theme-xs mt-3 inline-flex rounded-full bg-gray-100 px-2 py-0.5 font-medium text-gray-700 dark:bg-white/[0.03] dark:text-white/80">
|
|
||||||
Dev
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-08.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Progress list -->
|
|
||||||
<div class="swim-lane flex flex-col gap-5 border-x border-gray-200 p-4 xl:p-6 dark:border-gray-800">
|
|
||||||
<div class="mb-1 flex items-center justify-between">
|
|
||||||
<h3 class="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
In Progress
|
|
||||||
<span class="bg-warning-50 text-theme-xs text-warning-700 dark:bg-warning-500/15 inline-flex rounded-full px-2 py-0.5 font-medium dark:text-orange-400">
|
|
||||||
5
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div x-data="{openDropDown: false}" class="relative">
|
|
||||||
<button @click="openDropDown = !openDropDown" class="text-gray-700 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.2451C6.96552 10.2451 7.74902 11.0286 7.74902 11.9951V12.0051C7.74902 12.9716 6.96552 13.7551 5.99902 13.7551C5.03253 13.7551 4.24902 12.9716 4.24902 12.0051V11.9951C4.24902 11.0286 5.03253 10.2451 5.99902 10.2451ZM17.999 10.2451C18.9655 10.2451 19.749 11.0286 19.749 11.9951V12.0051C19.749 12.9716 18.9655 13.7551 17.999 13.7551C17.0325 13.7551 16.249 12.9716 16.249 12.0051V11.9951C16.249 11.0286 17.0325 10.2451 17.999 10.2451ZM13.749 11.9951C13.749 11.0286 12.9655 10.2451 11.999 10.2451C11.0325 10.2451 10.249 11.0286 10.249 11.9951V12.0051C10.249 12.9716 11.0325 13.7551 11.999 13.7551C12.9655 13.7551 13.749 12.9716 13.749 12.0051V11.9951Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div x-show="openDropDown" @click.outside="openDropDown = false" class="shadow-theme-md dark:bg-gray-dark absolute top-full right-0 z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800" style="display: none;">
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Clear All
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Work In Progress (WIP) Dashboard
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Today
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-09.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Kanban Flow Manager
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Feb 12, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
8
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
2
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="bg-success-50 text-theme-xs text-success-700 dark:bg-success-500/15 dark:text-success-500 mt-3 inline-flex rounded-full px-2 py-0.5 font-medium">
|
|
||||||
Template
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-10.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-2 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Product Update - Q4 2024
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
Dedicated form for a category of users that will perform
|
|
||||||
actions.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="my-4">
|
|
||||||
<img src="src/images/task/task.png" alt="task" class="overflow-hidden rounded-xl border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Feb 12, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
8
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-11.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Make figbot send comment when ticket is auto-moved
|
|
||||||
back to inbox
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Mar 08, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-12.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Completed list -->
|
|
||||||
<div class="swim-lane flex flex-col gap-5 p-4 xl:p-6">
|
|
||||||
<div class="mb-1 flex items-center justify-between">
|
|
||||||
<h3 class="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Completed
|
|
||||||
<span class="bg-success-50 text-theme-xs text-success-700 dark:bg-success-500/15 dark:text-success-500 inline-flex rounded-full px-2 py-0.5 font-medium">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div x-data="{openDropDown: false}" class="relative">
|
|
||||||
<button @click="openDropDown = !openDropDown" class="text-gray-700 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.2451C6.96552 10.2451 7.74902 11.0286 7.74902 11.9951V12.0051C7.74902 12.9716 6.96552 13.7551 5.99902 13.7551C5.03253 13.7551 4.24902 12.9716 4.24902 12.0051V11.9951C4.24902 11.0286 5.03253 10.2451 5.99902 10.2451ZM17.999 10.2451C18.9655 10.2451 19.749 11.0286 19.749 11.9951V12.0051C19.749 12.9716 18.9655 13.7551 17.999 13.7551C17.0325 13.7551 16.249 12.9716 16.249 12.0051V11.9951C16.249 11.0286 17.0325 10.2451 17.999 10.2451ZM13.749 11.9951C13.749 11.0286 12.9655 10.2451 11.999 10.2451C11.0325 10.2451 10.249 11.0286 10.249 11.9951V12.0051C10.249 12.9716 11.0325 13.7551 11.999 13.7551C12.9655 13.7551 13.749 12.9716 13.749 12.0051V11.9951Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div x-show="openDropDown" @click.outside="openDropDown = false" class="shadow-theme-md dark:bg-gray-dark absolute top-full right-0 z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800" style="display: none;">
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Clear All
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Manage internal feedback
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Tomorrow
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-13.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Do some projects on React Native with Flutter
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Jan 8, 2027
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="text-theme-xs mt-3 inline-flex rounded-full bg-orange-400/10 px-2 py-0.5 font-medium text-orange-400">
|
|
||||||
Development
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-14.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Design marketing assets
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Jan 8, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
2
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="bg-brand-50 text-theme-xs text-brand-500 dark:bg-brand-500/15 dark:text-brand-400 mt-3 inline-flex rounded-full px-2 py-0.5 font-medium">
|
|
||||||
Marketing
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-15.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex items-start justify-between gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Kanban Flow Manager
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Feb 12, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
8
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="bg-success-50 text-theme-xs text-success-700 dark:bg-success-500/15 dark:text-success-500 mt-3 inline-flex rounded-full px-2 py-0.5 font-medium">
|
|
||||||
Template
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-16.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Task wrapper End -->
|
|
||||||
</div>
|
|
||||||
@@ -1,788 +0,0 @@
|
|||||||
<div x-data="{selectedTaskGroup: 'All'}" class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<!-- Task header Start -->
|
|
||||||
<div class="flex flex-col items-center px-4 py-5 xl:px-6 xl:py-6">
|
|
||||||
<div class="flex flex-col w-full gap-5 sm:justify-between xl:flex-row xl:items-center">
|
|
||||||
<div class="flex flex-wrap items-center gap-x-1 gap-y-2 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900">
|
|
||||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md h group hover:text-gray-900 dark:hover:text-white text-gray-900 dark:text-white bg-white dark:bg-gray-800" :class="selectedTaskGroup === 'All' ? 'text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'" @click="selectedTaskGroup = 'All' ">
|
|
||||||
All Tasks
|
|
||||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15" :class="selectedTaskGroup === 'All' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : 'bg-white dark:bg-white/[0.03]'">
|
|
||||||
11
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400" :class="selectedTaskGroup === 'Todo' ? 'text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'" @click="selectedTaskGroup = 'Todo' ">
|
|
||||||
To do
|
|
||||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 bg-white dark:bg-white/[0.03]" :class="selectedTaskGroup === 'Todo' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : 'bg-white dark:bg-white/[0.03]'">
|
|
||||||
3
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400" :class="selectedTaskGroup === 'InProgress' ? 'text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'" @click="selectedTaskGroup = 'InProgress' ">
|
|
||||||
In Progress
|
|
||||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 bg-white dark:bg-white/[0.03]" :class="selectedTaskGroup === 'InProgress' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : 'bg-white dark:bg-white/[0.03]'">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400" :class="selectedTaskGroup === 'Completed' ? 'text-gray-900 dark:text-white bg-white dark:bg-gray-800' : 'text-gray-500 dark:text-gray-400'" @click="selectedTaskGroup = 'Completed' ">
|
|
||||||
Completed
|
|
||||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 bg-white dark:bg-white/[0.03]" :class="selectedTaskGroup === 'Completed' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : 'bg-white dark:bg-white/[0.03]'">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center gap-3 xl:justify-end">
|
|
||||||
<button class="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.03]">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0826 4.0835C11.0769 4.0835 10.2617 4.89871 10.2617 5.90433C10.2617 6.90995 11.0769 7.72516 12.0826 7.72516C13.0882 7.72516 13.9034 6.90995 13.9034 5.90433C13.9034 4.89871 13.0882 4.0835 12.0826 4.0835ZM2.29004 6.65409H8.84671C9.18662 8.12703 10.5063 9.22516 12.0826 9.22516C13.6588 9.22516 14.9785 8.12703 15.3184 6.65409H17.7067C18.1209 6.65409 18.4567 6.31831 18.4567 5.90409C18.4567 5.48988 18.1209 5.15409 17.7067 5.15409H15.3183C14.9782 3.68139 13.6586 2.5835 12.0826 2.5835C10.5065 2.5835 9.18691 3.68139 8.84682 5.15409H2.29004C1.87583 5.15409 1.54004 5.48988 1.54004 5.90409C1.54004 6.31831 1.87583 6.65409 2.29004 6.65409ZM4.6816 13.3462H2.29085C1.87664 13.3462 1.54085 13.682 1.54085 14.0962C1.54085 14.5104 1.87664 14.8462 2.29085 14.8462H4.68172C5.02181 16.3189 6.34142 17.4168 7.91745 17.4168C9.49348 17.4168 10.8131 16.3189 11.1532 14.8462H17.7075C18.1217 14.8462 18.4575 14.5104 18.4575 14.0962C18.4575 13.682 18.1217 13.3462 17.7075 13.3462H11.1533C10.8134 11.8733 9.49366 10.7752 7.91745 10.7752C6.34124 10.7752 5.02151 11.8733 4.6816 13.3462ZM9.73828 14.096C9.73828 13.0904 8.92307 12.2752 7.91745 12.2752C6.91183 12.2752 6.09662 13.0904 6.09662 14.096C6.09662 15.1016 6.91183 15.9168 7.91745 15.9168C8.92307 15.9168 9.73828 15.1016 9.73828 14.096Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
Filter & Short
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button @click="isTaskModalModal = true" class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600">
|
|
||||||
Add New Task
|
|
||||||
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.2502 4.99951C9.2502 4.5853 9.58599 4.24951 10.0002 4.24951C10.4144 4.24951 10.7502 4.5853 10.7502 4.99951V9.24971H15.0006C15.4148 9.24971 15.7506 9.5855 15.7506 9.99971C15.7506 10.4139 15.4148 10.7497 15.0006 10.7497H10.7502V15.0001C10.7502 15.4143 10.4144 15.7501 10.0002 15.7501C9.58599 15.7501 9.2502 15.4143 9.2502 15.0001V10.7497H5C4.58579 10.7497 4.25 10.4139 4.25 9.99971C4.25 9.5855 4.58579 9.24971 5 9.24971H9.2502V4.99951Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Task header End -->
|
|
||||||
|
|
||||||
<!-- Task wrapper Start -->
|
|
||||||
<div class="p-4 space-y-8 border-t border-gray-200 mt-7 dark:border-gray-800 sm:mt-0 xl:p-6">
|
|
||||||
<!-- To do list -->
|
|
||||||
<div class="flex flex-col gap-4 swim-lane">
|
|
||||||
<div class="flex items-center justify-between mb-2">
|
|
||||||
<h3 class="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
To Do
|
|
||||||
<span class="inline-flex rounded-full bg-gray-100 px-2 py-0.5 text-theme-xs font-medium text-gray-700 dark:bg-white/[0.03] dark:text-white/80">
|
|
||||||
3
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div x-data="{openDropDown: false}" class="relative">
|
|
||||||
<button @click="openDropDown = !openDropDown" class="text-gray-700 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.2451C6.96552 10.2451 7.74902 11.0286 7.74902 11.9951V12.0051C7.74902 12.9716 6.96552 13.7551 5.99902 13.7551C5.03253 13.7551 4.24902 12.9716 4.24902 12.0051V11.9951C4.24902 11.0286 5.03253 10.2451 5.99902 10.2451ZM17.999 10.2451C18.9655 10.2451 19.749 11.0286 19.749 11.9951V12.0051C19.749 12.9716 18.9655 13.7551 17.999 13.7551C17.0325 13.7551 16.249 12.9716 16.249 12.0051V11.9951C16.249 11.0286 17.0325 10.2451 17.999 10.2451ZM13.749 11.9951C13.749 11.0286 12.9655 10.2451 11.999 10.2451C11.0325 10.2451 10.249 11.0286 10.249 11.9951V12.0051C10.249 12.9716 11.0325 13.7551 11.999 13.7551C12.9655 13.7551 13.749 12.9716 13.749 12.0051V11.9951Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div x-show="openDropDown" @click.outside="openDropDown = false" class="absolute right-0 top-full z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-md dark:border-gray-800 dark:bg-gray-dark" style="display: none;">
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Clear All
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox1" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox1" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Finish user onboarding
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<span class="inline-flex rounded-full bg-brand-50 px-2 py-0.5 text-theme-xs font-medium text-brand-500 dark:bg-brand-500/15 dark:text-brand-400">
|
|
||||||
Marketing
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Tomorrow
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-01.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox2" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox2" class="sr-only taskCheckbox" checked="">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Solve the Dribbble prioritisation issue with the
|
|
||||||
team
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Jan 8, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
2
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-13.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox3" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox3" class="sr-only taskCheckbox" checked="">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Change license and remove products
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<span class="inline-flex rounded-full bg-brand-50 px-2 py-0.5 text-theme-xs font-medium text-brand-500 dark:bg-brand-500/15 dark:text-brand-400">
|
|
||||||
Marketing
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Feb 12, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-15.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Progress list -->
|
|
||||||
<div class="flex flex-col gap-4 swim-lane">
|
|
||||||
<div class="flex items-center justify-between mb-2">
|
|
||||||
<h3 class="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
In Progress
|
|
||||||
<span class="inline-flex rounded-full bg-warning-50 px-2 py-0.5 text-theme-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-orange-400">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div x-data="{openDropDown: false}" class="relative">
|
|
||||||
<button @click="openDropDown = !openDropDown" class="text-gray-700 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.2451C6.96552 10.2451 7.74902 11.0286 7.74902 11.9951V12.0051C7.74902 12.9716 6.96552 13.7551 5.99902 13.7551C5.03253 13.7551 4.24902 12.9716 4.24902 12.0051V11.9951C4.24902 11.0286 5.03253 10.2451 5.99902 10.2451ZM17.999 10.2451C18.9655 10.2451 19.749 11.0286 19.749 11.9951V12.0051C19.749 12.9716 18.9655 13.7551 17.999 13.7551C17.0325 13.7551 16.249 12.9716 16.249 12.0051V11.9951C16.249 11.0286 17.0325 10.2451 17.999 10.2451ZM13.749 11.9951C13.749 11.0286 12.9655 10.2451 11.999 10.2451C11.0325 10.2451 10.249 11.0286 10.249 11.9951V12.0051C10.249 12.9716 11.0325 13.7551 11.999 13.7551C12.9655 13.7551 13.749 12.9716 13.749 12.0051V11.9951Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div x-show="openDropDown" @click.outside="openDropDown = false" class="absolute right-0 top-full z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-md dark:border-gray-800 dark:bg-gray-dark" style="display: none;">
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Clear All
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox4" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox4" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Work In Progress (WIP) Dashboard
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Today
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-09.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox5" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox5" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Kanban Flow Manager
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<span class="inline-flex rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500">
|
|
||||||
Template
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Feb 12, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
8
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
2
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-10.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox6" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox6" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Product Update - Q4 2024
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Feb 12, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
8
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-11.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox7" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox7" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Make figbot send comment when ticket is auto-moved
|
|
||||||
back to inbox
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Mar 08, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-12.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Completed list -->
|
|
||||||
<div class="flex flex-col gap-4 swim-lane">
|
|
||||||
<div class="flex items-center justify-between mb-2">
|
|
||||||
<h3 class="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Completed
|
|
||||||
<span class="inline-flex rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div x-data="{openDropDown: false}" class="relative">
|
|
||||||
<button @click="openDropDown = !openDropDown" class="text-gray-700 dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.2451C6.96552 10.2451 7.74902 11.0286 7.74902 11.9951V12.0051C7.74902 12.9716 6.96552 13.7551 5.99902 13.7551C5.03253 13.7551 4.24902 12.9716 4.24902 12.0051V11.9951C4.24902 11.0286 5.03253 10.2451 5.99902 10.2451ZM17.999 10.2451C18.9655 10.2451 19.749 11.0286 19.749 11.9951V12.0051C19.749 12.9716 18.9655 13.7551 17.999 13.7551C17.0325 13.7551 16.249 12.9716 16.249 12.0051V11.9951C16.249 11.0286 17.0325 10.2451 17.999 10.2451ZM13.749 11.9951C13.749 11.0286 12.9655 10.2451 11.999 10.2451C11.0325 10.2451 10.249 11.0286 10.249 11.9951V12.0051C10.249 12.9716 11.0325 13.7551 11.999 13.7551C12.9655 13.7551 13.749 12.9716 13.749 12.0051V11.9951Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div x-show="openDropDown" @click.outside="openDropDown = false" class="absolute right-0 top-full z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-md dark:border-gray-800 dark:bg-gray-dark" style="display: none;">
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
||||||
Clear All
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox8" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox8" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Manage internal feedback
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Tomorrow
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-09.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox9" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox9" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Do some projects on React Native with Flutter
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<span class="inline-flex rounded-full bg-orange-400/10 px-2 py-0.5 text-theme-xs font-medium text-orange-400">
|
|
||||||
Development
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Jan 8, 2027
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-10.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox10" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox10" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Design marketing assets
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<span class="inline-flex rounded-full bg-brand-50 px-2 py-0.5 text-theme-xs font-medium text-brand-500 dark:bg-brand-500/15 dark:text-brand-400">
|
|
||||||
Marketing
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Jan 8, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
2
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-11.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- task item -->
|
|
||||||
<div draggable="true" class="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5">
|
|
||||||
<div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div class="flex items-start w-full gap-4">
|
|
||||||
<span class="text-gray-400">
|
|
||||||
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<label for="taskCheckbox11" class="w-full cursor-pointer">
|
|
||||||
<div class="relative flex items-start">
|
|
||||||
<input type="checkbox" id="taskCheckbox11" class="sr-only taskCheckbox">
|
|
||||||
<div class="flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700">
|
|
||||||
<span class="opacity-0">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="-mt-0.5 text-base text-gray-800 dark:text-white/90">
|
|
||||||
Kanban Flow Manager
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
|
||||||
<span class="inline-flex rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500">
|
|
||||||
Template
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
|
|
||||||
</svg>
|
|
||||||
Feb 12, 2027
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
|
|
||||||
<svg class="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" stroke-width="1.5" stroke-linejoin="round"></path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
8
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
|
|
||||||
<img src="src/images/user/user-12.jpg" alt="user">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Task wrapper End -->
|
|
||||||
</div>
|
|
||||||
@@ -1,222 +0,0 @@
|
|||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "../../ui/table";
|
|
||||||
|
|
||||||
import Badge from "../../ui/badge/Badge";
|
|
||||||
|
|
||||||
interface Order {
|
|
||||||
id: number;
|
|
||||||
user: {
|
|
||||||
image: string;
|
|
||||||
name: string;
|
|
||||||
role: string;
|
|
||||||
};
|
|
||||||
projectName: string;
|
|
||||||
team: {
|
|
||||||
images: string[];
|
|
||||||
};
|
|
||||||
status: string;
|
|
||||||
budget: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Define the table data using the interface
|
|
||||||
const tableData: Order[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
user: {
|
|
||||||
image: "/images/user/user-17.jpg",
|
|
||||||
name: "Lindsey Curtis",
|
|
||||||
role: "Web Designer",
|
|
||||||
},
|
|
||||||
projectName: "Agency Website",
|
|
||||||
team: {
|
|
||||||
images: [
|
|
||||||
"/images/user/user-22.jpg",
|
|
||||||
"/images/user/user-23.jpg",
|
|
||||||
"/images/user/user-24.jpg",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
budget: "3.9K",
|
|
||||||
status: "Active",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
user: {
|
|
||||||
image: "/images/user/user-18.jpg",
|
|
||||||
name: "Kaiya George",
|
|
||||||
role: "Project Manager",
|
|
||||||
},
|
|
||||||
projectName: "Technology",
|
|
||||||
team: {
|
|
||||||
images: ["/images/user/user-25.jpg", "/images/user/user-26.jpg"],
|
|
||||||
},
|
|
||||||
budget: "24.9K",
|
|
||||||
status: "Pending",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
user: {
|
|
||||||
image: "/images/user/user-17.jpg",
|
|
||||||
name: "Zain Geidt",
|
|
||||||
role: "Content Writing",
|
|
||||||
},
|
|
||||||
projectName: "Blog Writing",
|
|
||||||
team: {
|
|
||||||
images: ["/images/user/user-27.jpg"],
|
|
||||||
},
|
|
||||||
budget: "12.7K",
|
|
||||||
status: "Active",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
user: {
|
|
||||||
image: "/images/user/user-20.jpg",
|
|
||||||
name: "Abram Schleifer",
|
|
||||||
role: "Digital Marketer",
|
|
||||||
},
|
|
||||||
projectName: "Social Media",
|
|
||||||
team: {
|
|
||||||
images: [
|
|
||||||
"/images/user/user-28.jpg",
|
|
||||||
"/images/user/user-29.jpg",
|
|
||||||
"/images/user/user-30.jpg",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
budget: "2.8K",
|
|
||||||
status: "Cancel",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
user: {
|
|
||||||
image: "/images/user/user-21.jpg",
|
|
||||||
name: "Carla George",
|
|
||||||
role: "Front-end Developer",
|
|
||||||
},
|
|
||||||
projectName: "Website",
|
|
||||||
team: {
|
|
||||||
images: [
|
|
||||||
"/images/user/user-31.jpg",
|
|
||||||
"/images/user/user-32.jpg",
|
|
||||||
"/images/user/user-33.jpg",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
budget: "4.5K",
|
|
||||||
status: "Active",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function BasicTableOne() {
|
|
||||||
return (
|
|
||||||
<div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-white/[0.05] dark:bg-white/[0.03]">
|
|
||||||
<div className="max-w-full overflow-x-auto">
|
|
||||||
<Table>
|
|
||||||
{/* Table Header */}
|
|
||||||
<TableHeader className="border-b border-gray-100 dark:border-white/[0.05]">
|
|
||||||
<TableRow>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
User
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
Project Name
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
Team
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
Status
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
isHeader
|
|
||||||
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
|
|
||||||
>
|
|
||||||
Budget
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
|
|
||||||
{/* Table Body */}
|
|
||||||
<TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
|
|
||||||
{tableData.map((order) => (
|
|
||||||
<TableRow key={order.id}>
|
|
||||||
<TableCell className="px-5 py-4 sm:px-6 text-start">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 overflow-hidden rounded-full">
|
|
||||||
<img
|
|
||||||
width={40}
|
|
||||||
height={40}
|
|
||||||
src={order.user.image}
|
|
||||||
alt={order.user.name}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
|
|
||||||
{order.user.name}
|
|
||||||
</span>
|
|
||||||
<span className="block text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
{order.user.role}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
|
|
||||||
{order.projectName}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
|
|
||||||
<div className="flex -space-x-2">
|
|
||||||
{order.team.images.map((teamImage, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
src={teamImage}
|
|
||||||
alt={`Team member ${index + 1}`}
|
|
||||||
className="w-full size-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
|
|
||||||
<Badge
|
|
||||||
size="sm"
|
|
||||||
color={
|
|
||||||
order.status === "Active"
|
|
||||||
? "success"
|
|
||||||
: order.status === "Pending"
|
|
||||||
? "warning"
|
|
||||||
: "error"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{order.status}
|
|
||||||
</Badge>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
{order.budget}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -120,7 +120,7 @@ export default function IndustriesSectorsKeywords() {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// Get already-attached keywords across ALL sectors for this site
|
// Get already-attached keywords across ALL sectors for this site
|
||||||
let attachedSeedKeywordIds = new Set<number>();
|
const attachedSeedKeywordIds = new Set<number>();
|
||||||
try {
|
try {
|
||||||
const { fetchKeywords, fetchSiteSectors } = await import('../../services/api');
|
const { fetchKeywords, fetchSiteSectors } = await import('../../services/api');
|
||||||
// Get all sectors for the site
|
// Get all sectors for the site
|
||||||
|
|||||||
@@ -410,7 +410,7 @@ export default function SiteSettings() {
|
|||||||
const loadIndustries = async () => {
|
const loadIndustries = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetchIndustries();
|
const response = await fetchIndustries();
|
||||||
let allIndustries = response.industries || [];
|
const allIndustries = response.industries || [];
|
||||||
|
|
||||||
// Note: For existing sites with industries already configured,
|
// Note: For existing sites with industries already configured,
|
||||||
// we show ALL industries so users can change their selection.
|
// we show ALL industries so users can change their selection.
|
||||||
|
|||||||
@@ -227,14 +227,14 @@ export async function fetchAPI(endpoint: string, options?: RequestInit & { timeo
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Throw authentication error
|
// Throw authentication error
|
||||||
let err: any = new Error(errorMessage);
|
const err: any = new Error(errorMessage);
|
||||||
err.status = 403;
|
err.status = 403;
|
||||||
err.data = errorData;
|
err.data = errorData;
|
||||||
throw err;
|
throw err;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Not an auth error - could be permissions/plan issue - don't force logout
|
// Not an auth error - could be permissions/plan issue - don't force logout
|
||||||
let err: any = new Error(errorMessage);
|
const err: any = new Error(errorMessage);
|
||||||
err.status = 403;
|
err.status = 403;
|
||||||
err.data = errorData;
|
err.data = errorData;
|
||||||
throw err;
|
throw err;
|
||||||
@@ -243,7 +243,7 @@ export async function fetchAPI(endpoint: string, options?: RequestInit & { timeo
|
|||||||
if (e.status === 403) throw e;
|
if (e.status === 403) throw e;
|
||||||
|
|
||||||
// Parsing failed - throw generic 403 error
|
// Parsing failed - throw generic 403 error
|
||||||
let err: any = new Error(text || response.statusText);
|
const err: any = new Error(text || response.statusText);
|
||||||
err.status = 403;
|
err.status = 403;
|
||||||
throw err;
|
throw err;
|
||||||
}
|
}
|
||||||
@@ -251,7 +251,7 @@ export async function fetchAPI(endpoint: string, options?: RequestInit & { timeo
|
|||||||
|
|
||||||
// Handle 402 Payment Required - plan/limits issue
|
// Handle 402 Payment Required - plan/limits issue
|
||||||
if (response.status === 402) {
|
if (response.status === 402) {
|
||||||
let err: any = new Error(response.statusText);
|
const err: any = new Error(response.statusText);
|
||||||
err.status = response.status;
|
err.status = response.status;
|
||||||
try {
|
try {
|
||||||
const parsed = text ? JSON.parse(text) : null;
|
const parsed = text ? JSON.parse(text) : null;
|
||||||
@@ -295,7 +295,7 @@ export async function fetchAPI(endpoint: string, options?: RequestInit & { timeo
|
|||||||
logout();
|
logout();
|
||||||
|
|
||||||
// Throw error to stop request processing
|
// Throw error to stop request processing
|
||||||
let err: any = new Error(errorData.error || 'Session ended');
|
const err: any = new Error(errorData.error || 'Session ended');
|
||||||
err.status = 401;
|
err.status = 401;
|
||||||
err.data = errorData;
|
err.data = errorData;
|
||||||
throw err;
|
throw err;
|
||||||
@@ -368,7 +368,7 @@ export async function fetchAPI(endpoint: string, options?: RequestInit & { timeo
|
|||||||
return null;
|
return null;
|
||||||
} else {
|
} else {
|
||||||
// Retry failed - parse and throw the retry error (not the original 401)
|
// Retry failed - parse and throw the retry error (not the original 401)
|
||||||
let retryError: any = new Error(retryResponse.statusText);
|
const retryError: any = new Error(retryResponse.statusText);
|
||||||
retryError.status = retryResponse.status;
|
retryError.status = retryResponse.status;
|
||||||
try {
|
try {
|
||||||
const retryErrorData = JSON.parse(retryText);
|
const retryErrorData = JSON.parse(retryText);
|
||||||
|
|||||||
Reference in New Issue
Block a user