fix: gộp các nút thành viên và bỏ MemberDashboard
This commit is contained in:
@@ -0,0 +1,129 @@
|
||||
# To AI Agent: Deprecate MemberDashboard Page and Re-architect All User Features into Dedicated Modals on LandingPage
|
||||
|
||||
## 1. Architectural Strategy & Goal
|
||||
We are completely removing the standalone `MemberDashboard` route/page. When a user logs in successfully, they must **remain directly on the `LandingPage`** (or `ExplorerMap`), with their authentication state shifting cleanly to display the member avatar dropdown menu in the top-bar header.
|
||||
|
||||
Every core feature previously hosted on the dashboard page must now be converted into a high-performance, responsive **Modal Overlay Component**. Clicking an item in the avatar dropdown menu will toggle the visibility state of its respective modal over the current viewport, ensuring zero page-redirection disruption.
|
||||
|
||||
---
|
||||
|
||||
## 2. Route Deletion & Auth Redirection Clean-up
|
||||
### 1. **Route Removal:** Open your router configuration (`App.tsx` or `routes.tsx`) and permanently delete the `<Route path="/dashboard" ... />` node.
|
||||
### 2. **Auth Hook Modification:** Inside the login handler lifecycle (e.g., `LoginModal.tsx` or `AuthContext.tsx`), replace `Maps('/dashboard')` with a simple state closer that preserves the current page instance:
|
||||
```typescript
|
||||
// ❌ OLD: navigate('/dashboard');
|
||||
// ✅ NEW: Keep user on context page, close login overlay, update profile states
|
||||
setIsLoginModalOpen(false);
|
||||
|
||||
## 3. Technical Specifications for Each Target Modal
|
||||
Implement the following modal architectures inside frontend/src/components/modals/:
|
||||
|
||||
### 3.1. Modal Chat Trực Tiếp (LiveChatModal.tsx)
|
||||
Layout Architecture: A wide responsive viewport split into two main functional vertical columns (flex flex-col md:flex-row h-[80vh]).
|
||||
|
||||
Left Column (w-full md:w-80 border-r border-slate-800): Interactive scrollable contact strip displaying the User's Friend List with online status indicators and latest message snippets.
|
||||
|
||||
Right Column (flex-1 flex flex-col bg-slate-950): Active conversation window.
|
||||
|
||||
Bottom Input Tray Wrapper: A rich-text typing container bar fixed at the baseline containing:
|
||||
|
||||
Text input area field.
|
||||
|
||||
Attachment Trigger buttons: Icon for Image uploads (accept="image/*") and an Icon for transmitting spatial GPS Coordinates/Locations directly into the text stream.
|
||||
|
||||
### 3.2. Modal Hành Trình Của Tôi (MyToursModal.tsx)
|
||||
Layout Architecture: A dynamic card explorer view featuring structural chronological timeline tabs at the top:
|
||||
|
||||
Tabs Grid: Đang thực hiện (Ongoing), Sắp khởi hành (Upcoming), and Đã hoàn thành (Past).
|
||||
|
||||
Core Content Panel: Clicking a tab renders a fluid inner grid loop of compact trip tiles. Each tile houses a banner photo, progress indicators, and quick action links to open the standalone TourNavigationPage or route maps directly.
|
||||
|
||||
### 3.3. Modal Thư Viện Ảnh (PhotoGalleryModal.tsx)
|
||||
Layout Architecture: A dedicated media repository browser displaying all images uploaded by the member.
|
||||
|
||||
Filtering Header Matrix: Dual filter select boxes pinned at the top:
|
||||
|
||||
Filter 1: Filter by Itinerary/Trip (Theo hành trình).
|
||||
|
||||
Filter 2: Filter by Media Hashtags (Theo tags).
|
||||
|
||||
Core Workspace: A masonry-style gallery layout grid with hover micro-interactions enabling the user to view full resolution views, edit asset tagging descriptions, or delete pictures directly.
|
||||
|
||||
### 3.4. Modal Danh Sách Bạn Bè (FriendsManagerModal.tsx)
|
||||
Layout Architecture: A centralized social dashboard layout built to handle user connections.
|
||||
|
||||
Functional Subsections:
|
||||
|
||||
Search engine bar to lookup new profiles via display name or telephone metrics.
|
||||
|
||||
Tab views separating Danh sách bạn bè (Active Friends) and Lời mời kết bạn (Pending Requests).
|
||||
|
||||
Row items equipped with direct context action triggers: Hủy kết bạn (Unfriend), Chấp nhận (Accept), or Nhắn tin (Quick Message - which bridges states to auto-toggle the Chat Modal).
|
||||
|
||||
## 4. Top-Bar Profile Dropdown Structure Integration
|
||||
Refactor the items list container within MapProfileDropdown.tsx to match the localized modal toggles state logic:
|
||||
|
||||
TypeScript
|
||||
import React, { useState } from 'react';
|
||||
import { Compass, Map, Image, Settings, ShieldAlert, Users, LogOut } from 'lucide-react';
|
||||
|
||||
export const HeaderMemberDropdown = ({ openModal }) => {
|
||||
return (
|
||||
<div className="absolute right-0 top-14 w-64 bg-slate-900 border border-slate-800 rounded-xl p-1.5 shadow-2xl flex flex-col space-y-0.5 text-xs text-slate-200 z-[999999]">
|
||||
|
||||
{/* 1. Nút "Tạo tour" */}
|
||||
<button onClick={() => openModal('create_tour')} className="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-slate-800 rounded-lg text-left transition-colors">
|
||||
<Compass className="w-4 h-4 text-amber-400" />
|
||||
<span className="font-medium">Tạo tour</span>
|
||||
</button>
|
||||
|
||||
{/* 2. Nút "Hành trình của tôi" */}
|
||||
<button onClick={() => openModal('my_tours')} className="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-slate-800 rounded-lg text-left transition-colors">
|
||||
<Map className="w-4 h-4 text-blue-400" />
|
||||
<span className="font-medium">Hành trình của tôi</span>
|
||||
</button>
|
||||
|
||||
{/* 3. Nút "Thư viện ảnh" */}
|
||||
<button onClick={() => openModal('gallery')} className="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-slate-800 rounded-lg text-left transition-colors">
|
||||
<Image className="w-4 h-4 text-emerald-400" />
|
||||
<span className="font-medium">Thư viện ảnh</span>
|
||||
</button>
|
||||
|
||||
{/* 4. Nút "Cài đặt" */}
|
||||
<button onClick={() => openModal('settings')} className="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-slate-800 rounded-lg text-left transition-colors">
|
||||
<Settings className="w-4 h-4 text-slate-400" />
|
||||
<span className="font-medium">Cài đặt</span>
|
||||
</button>
|
||||
|
||||
{/* 5. Nút "Báo cáo vi phạm" */}
|
||||
<button onClick={() => openModal('reports')} className="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-slate-800 rounded-lg text-left transition-colors">
|
||||
<ShieldAlert className="w-4 h-4 text-rose-400" />
|
||||
<span className="font-medium">Báo cáo vi phạm</span>
|
||||
</button>
|
||||
|
||||
<div className="h-[1px] bg-slate-800/80 my-1 mx-2" />
|
||||
|
||||
{/* 6. Nút "Danh sách bạn bè" */}
|
||||
<button onClick={() => openModal('friends')} className="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-slate-800 rounded-lg text-left transition-colors">
|
||||
<Users className="w-4 h-4 text-indigo-400" />
|
||||
<span className="font-medium">Danh sách bạn bè</span>
|
||||
</button>
|
||||
|
||||
{/* 7. Nút "Đăng xuất" */}
|
||||
<button onClick={() => openModal('logout')} className="flex items-center gap-3 w-full px-4 py-2.5 text-rose-400 hover:bg-slate-800 rounded-lg text-left font-bold transition-colors">
|
||||
<LogOut className="w-4 h-4 text-rose-500" />
|
||||
<span>Đăng xuất</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
## 5. Automation Checklists for Quality Verification
|
||||
[ ] Redirection Invalidation Check: Perform a successful user login sweep. Verify the active URL hash parameter remains exactly / or /map, completely dropping dashboard transitions.
|
||||
|
||||
[ ] Chat Modal Layout Sizing: Trigger the Live Chat button. Ensure the workspace scales to an explicit split-view pane framework (Left: Contacts / Right: Dialog Thread) with working attachment trays.
|
||||
|
||||
[ ] Gallery Filter Interception: Confirm that filtering options inside the Photo modal dynamically re-index asset cards based on itinerary tags or custom upload parameters.
|
||||
|
||||
[ ] Global Z-Index Verification: All new modals must enforce a strict z-[999999] utility layer rule to pop up cleanly above the underlying map viewport layer without clip cutting.
|
||||
Reference in New Issue
Block a user