added the elmeent on the nav and fixed the payments transactions

This commit is contained in:
mouazkh
2026-06-23 23:32:07 +03:00
parent 61e527fab3
commit 199478f237
8 changed files with 958 additions and 33 deletions

442
full-project-analysis.md Normal file
View File

@ -0,0 +1,442 @@
# SweetHome — Full Project Analysis
**Project:** SweetHome Next.js Real Estate Application
**Date:** June 16, 2026
**Framework:** Next.js 16.1.6 (App Router) + React 18.3.1
**Language:** JavaScript (no TypeScript)
**Styling:** Tailwind CSS v4 + DaisyUI (unused) + Flowbite (unused)
**API:** Custom `.NET` backend at `https://45.93.137.91.nip.io/api`
---
## 1. Project Structure
### Directory Tree (Top 3 Levels)
```
SweetHome/
├── .gitea/workflows/ # CI/CD deployer
├── app/ # ★ MAIN APP (112 source files)
│ ├── account-verification/ # OTP email/phone verification
│ ├── auth/choose-role/ # Owner/Tenant/Agent role picker
│ ├── blocked/ # Blocked account page
│ ├── booked-properties/ # User's booked properties
│ ├── change-password/ # Change password form
│ ├── components/ # ★ 14 reusable components
│ │ ├── home/ # HeroSearch, PropertyMap
│ │ ├── property/ # BookingCalendar, PropertyMap
│ │ ├── ratings/ # StarRating, PropertyRatingForm, etc.
│ │ ├── BottomNav.js # Mobile bottom nav
│ │ ├── FloatingSidebar.js # Desktop floating sidebar
│ │ ├── NavLinks.js # Nav link atoms
│ │ ├── NotificationHandler.js # Firebase FCM handler
│ │ └── PropertyMapWithMarkers.js # Standalone Leaflet map
│ ├── contexts/ # ★ 3 context providers
│ │ ├── FavoritesContext.js
│ │ ├── NotificationsContext.js
│ │ └── PropertyContext.js # ORPHANED (never mounted)
│ ├── enums/ # 20 enum constant files
│ ├── faq/ # FAQ accordion page
│ ├── favorites/ # Favorites list page
│ ├── forgot-password/ # 3-step forgot password
│ ├── i18n/ # i18next config (Arabic/English)
│ ├── login/ # 2-step login (credential + OTP)
│ ├── my-rates/ # Ratings received from owners
│ ├── notifications/ # Notifications list page
│ ├── onboarding/ # 3-step intro wizard
│ ├── owner/ # ★ Owner dashboard (6 sub-routes)
│ │ ├── account-book/ # Financial dashboard
│ │ ├── bookings/ # Booking management
│ │ ├── calendar/ # Monthly calendar view
│ │ ├── profits/ # Revenue/profit stats
│ │ ├── properties/ # CRUD property management
│ │ └── reservations/ # Reservation requests
│ ├── payments/ # Deposit payment page
│ ├── privacy/ # Privacy policy
│ ├── profile/ # User profile CRUD
│ ├── properties/ # Property listings grid
│ ├── property/[id]/ # Property detail (dynamic route)
│ ├── register/ # Registration (tenant/owner/agent)
│ ├── reports/ # 3-tab report submission
│ ├── reservations/ # Customer reservations
│ ├── services/ # AuthService.js
│ ├── settings/ # Account settings
│ ├── support/ # Support contact form
│ ├── terms/ # Terms of service
│ ├── utils/ # ★ api.js, calculations, firebase, etc.
│ ├── ClientLayout.js # Client layout shell (804 lines)
│ ├── layout.js # Root server layout
│ ├── globals.css # Tailwind + custom fonts
│ ├── page.js # Home page
│ ├── error.js # Error boundary
│ ├── loading.js # Loading state
│ └── not-found.js # 404 page
├── public/ # Static files (fonts, images, APK)
│ ├── files/SweetHome.apk # Android APK
│ ├── fonts/ # Madani Arabic (woff2 + ttf)
│ └── firebase-messaging-sw.js # FCM service worker
├── package.json # 18 prod + 7 dev dependencies
├── next.config.mjs # Next.js config
├── postcss.config.mjs # PostCSS + Tailwind
├── jsconfig.json # Path aliases (@/* → ./)
└── security-audit-report.md # Previous security audit
```
### Route Summary (33 pages)
| Type | Routes | Count |
|------|--------|-------|
| Public | `/`, `/login`, `/register/*`, `/forgot-password`, `/auth/choose-role`, `/properties`, `/property/[id]`, `/terms`, `/privacy`, `/faq`, `/support`, `/onboarding` | 14 |
| Protected (auth only) | `/profile`, `/settings`, `/change-password`, `/account-verification`, `/favorites`, `/booked-properties`, `/reservations`, `/notifications`, `/payments`, `/my-rates`, `/reports`, `/blocked` | 12 |
| Owner only | `/owner/properties`, `/owner/properties/add`, `/owner/reservations`, `/owner/bookings`, `/owner/calendar`, `/owner/profits`, `/owner/account-book` | 7 |
---
## 2. Architecture Overview
### Layout Hierarchy
```
app/layout.js (Server Component — root HTML, fonts, metadata)
└── app/ClientLayout.js (Client Component — 804 lines)
├── <NotificationsProvider> (context)
│ └── <FavoritesProvider> (context)
│ └── <main>{children}</main>
├── <BottomNav /> (mobile, authenticated only)
└── <NotificationHandler /> (FCM push notifications)
```
- **No nested layouts** — flat route structure
- **No `middleware.js`** — all route protection is client-side only
- Nav bar hidden on auth pages (`/login`, `/register/*`, `/blocked`, `/forgot-password`, `/auth/choose-role`)
### Data Flow Pattern
```
Page (useEffect on mount)
→ API call (apiFetch from app/utils/api.js)
→ AuthService.getToken() → Authorization: Bearer <JWT>
→ fetch() to https://45.93.137.91.nip.io/api/{endpoint}
→ Response: auto-unwrap { data: ... } envelope
→ Return parsed data or throw on non-ok
→ Component state (useState)
→ Render UI with Tailwind classes
```
---
## 3. API Layer
**File:** `app/utils/api.js` (1198 lines — 370 commented legacy + 828 active)
**Ratings API:** `app/utils/ratings.js` (separate file with own `apiFetch`)
### Fetch Helpers
| Function | Lines | Method | Auth | Error Handling | Return Type |
|----------|-------|--------|------|----------------|-------------|
| `apiFetch(endpoint, options)` | 421-478 | Any | Auto Bearer | Throws on non-ok (except 206) | `data` (auto-unwrapped) |
| `authFetch(endpoint, body, token)` | 483-524 | POST | Manual param | Returns `{status,data,ok,message}` | Object |
| `reportFetch(endpoint, body)` | 526-558 | POST | None | Returns `{status,data,ok,message}` | Object |
| `multipartAuthFetch(endpoint, formData)` | 772-803 | POST | Auto Bearer | Returns `{status,data,ok,message}` | Object |
### Exported API Functions (47 total)
| Category | Functions | Count |
|----------|-----------|-------|
| Rent Properties | `getRentProperties`, `getRentProperty`, `getRentPropertyLocations`, `filterRentProperties` | 4 |
| Sale Properties | `getSaleProperties`, `getSaleProperty`, `getSalePropertyById` | 3 |
| Generic Property | `getProperty` | 1 |
| Recommendations | `getRecommendations`, `getTopRecommendations` | 2 |
| Reservations | `getAvailableDateRanges`, `getReservations`, `getReservation`, `checkAvailability`, `bookReservation`, `getUserReservations`, `getOwnerReservationRequests`, `getOwnerReservationsByStatuses`, `ownerConfirmReservation`, `confirmDepositPayment`, `adminConfirmDeposit`, `updateBookingStatus`, `payDeposit` | 13 |
| Owner Management | `getMyRentListings`, `getMySaleListings`, `addRentProperty`, `addSaleProperty`, `editRentProperty`, `editSaleProperty`, `updateRentPropertyStatus`, `updateSalePropertyStatus`, `getOwnerContactInformation`, `getOwnerStatistics` | 10 |
| Auth | `loginWithEmail`, `loginWithPhone`, `sendEmailOTP`, `sendPhoneOTP`, `verifyEmail`, `verifyPhone`, `changePassword`, `requestForgetPasswordOtp`, `verifyForgetPasswordOtp`, `resetPassword`, `deleteMyAccount` | 11 |
| Registration | `addOwner`, `addCustomer`, `registerRealEstateAgent` | 3 |
| Favorites | `getUserFavoriteProperties`, `addFavoriteProperty`, `removeFavoriteProperty` | 3 |
| Notifications | `getUserNotifications`, `setFCMToken` | 2 |
| Terms | `getARTerms`, `getENTerms`, `addOrUpdateTerms` | 3 |
| Currencies | `getCurrencies` | 1 |
| Files | `uploadPicture` | 1 |
| Reports | `sendGeneralReport`, `submitReport`, `submitReservationReport`, `updateReservationReport`, `submitSaleReport`, `updateSaleReport` | 6 |
| Profile | `getCustomerByUserId`, `getOwnerByUserId` | 2 |
### Ratings API (5 functions)
`addPropertyRating`, `addCustomerRating`, `getPropertyRatings`, `getCustomerRatings`, `getPropertyAverageRating`
### API Endpoint Coverage
| HTTP Method | Count | Examples |
|-------------|-------|----------|
| GET | 26 | `/RentProperties/GetRentProperties`, `/Reservations/GetAvailableDates/available/${id}` |
| POST | 17 | `/Auth/LogInWithEmail`, `/Reservations/PayDeposit/pay-deposit`, `/Rating/AddPropertyRating` |
| PUT | 8 | `/RentProperties/EditRentProperty/${id}`, `/Reservations/AdminConfirmDeposit/admin-confirm-deposit` |
| DELETE | 2 | `/FavoriteProperty/Remove`, `/User/DeleteMyAccount` |
---
## 4. State Management
### Context Providers
| Context | File | State | Consumers | Status |
|---------|------|-------|-----------|--------|
| **FavoritesProvider** | `app/contexts/FavoritesContext.js` | `favorites[]`, `isLoading` | `FloatingSidebar`, `/favorites`, `/properties`, `/property/[id]` | ✅ Active |
| **NotificationsProvider** | `app/contexts/NotificationsContext.js` | `notifications[]`, `unreadCount`, `isLoading` | `BottomNav`, `FloatingSidebar` | ✅ Active |
| **PropertyContext** | `app/contexts/PropertyContext.js` | `properties[]`, `loading`, `error` | None | ❌ Orphaned (never mounted) |
| **PropertyContext** | `app/utils/PropertyContext.js` | Same as above | None | ❌ Orphaned duplicate |
### localStorage Keys (10 actively written, ~5 legacy read-only)
| Key | Data | Written By | Read By |
|-----|------|------------|---------|
| `auth_token` | JWT string | `AuthService.addToken()` | `AuthService.getToken()`, `firebase.js` |
| `cached_user` | User profile JSON | `AuthService.cacheUser()` | `AuthService.getCachedUser()` |
| `language` | "en" or "ar" | `ClientLayout.js` | `ClientLayout.js` |
| `sweethome_onboarding_completed` | "true" | `/onboarding/page.js` | `/onboarding/page.js` |
| `ownerProperties` | Properties array JSON | `/owner/properties/page.js` | `/owner/calendar/page.js` |
| `ownerBookings` | Bookings array JSON | `/owner/bookings/page.js` | `/owner/bookings/page.js` |
| `ownerProfitsTable` | Profit data JSON | `/owner/profits/page.js` | `/owner/profits/page.js` |
| `userProfile` | Profile form data JSON | `/profile/page.js` | `/profile/page.js` |
| `userAvatar` | Base64 data URL | `/profile/page.js` | `/profile/page.js` |
| `token`, `accessToken`, `authToken` | (legacy reads only) | — | `/settings`, `/payments`, `/reservations` |
### Auth Flow
```
Login (app/login/page.js)
→ loginWithEmail() / loginWithPhone()
→ authFetch(POST /Auth/LogInWithEmail, { credential, password, device: 0 })
→ 200: AuthService.addToken(token) → localStorage.setItem('auth_token', token)
→ 206: OTP required → sendEmailOTP() → verifyEmail(code) → get final token
→ AuthService.cacheUser(user) → localStorage.setItem('cached_user', ...)
→ router.push('/')
ClientLayout.js (every page navigation)
→ AuthService.getUser() → decode JWT payload (base64 atob)
→ setUser({ name, email, phone, role: isOwner() ? 'owner' : 'customer' })
→ UI branches on user.role (show owner nav / customer nav / guest nav)
Page-level checks
→ Each protected page independently calls:
AuthService.isAuthenticated() → else router.push('/login')
AuthService.isOwner() → else router.push('/')
```
---
## 5. Component Architecture
### Component Inventory (14 reusable components)
| Component | File | Lines | Purpose | State |
|-----------|------|-------|---------|-------|
| HeroSearch | `components/home/HeroSearch.js` | 321 | Hero search with filters | `filters`, login dialog |
| PropertyMap (home) | `components/home/PropertyMap.js` | 287 | Map with markers + popup | `selectedProperty`, map ref |
| PropertyMap (property) | `components/property/PropertyMap.js` | 166 | Map at property detail | Tooltip state |
| BookingCalendar | `components/property/BookingCalendar.js` | 124 | Monthly booking grid | `currentMonth`, `selectedStart` |
| PropertyMapWithMarkers | `components/PropertyMapWithMarkers.js` | 100 | Generic Leaflet map | Map ref, markers ref |
| StarRating | `components/ratings/StarRating.js` | 134 | 5-star input | `hoverRating` |
| PropertyRatingList | `components/ratings/PropertyRatingList.js` | 286 | Paginated reviews | `ratings`, `page`, `loading` |
| PropertyRatingForm | `components/ratings/PropertyRatingForm.js` | 317 | 4-field rating form | Clean/services/owner/experience |
| CustomerRatingForm | `components/ratings/CustomerRatingForm.js` | 92 | 3-field rating form | Furn/terms/behavior |
| BottomNav | `components/BottomNav.js` | 58 | Mobile bottom bar | Badge from context |
| FloatingSidebar | `components/FloatingSidebar.js` | 158 | Quick-access buttons | Framer-motion variants |
| NavLinks | `components/NavLinks.js` | 42 | Nav link atoms | `usePathname` active |
| NotificationHandler | `components/NotificationHandler.js` | 151 | FCM push handler | Permission state |
### Largest Page Files
| Rank | File | Lines | Complexity |
|------|------|-------|------------|
| 1 | `api.js` | 1198 | 60+ functions, 4 fetch helpers, 370 lines commented |
| 2 | `PropertyDetail.js` | 1743 | 56 imports, 8+ state vars, booking calendar, image gallery, owner check, ratings, map |
| 3 | `owner/properties/page.js` | 2057 | CRUD + modals + localStorage caching + API calls |
| 4 | `ClientLayout.js` | 804 | Nav (desktop+mobile), user menu, language switcher, context providers |
| 5 | `owner/properties/add/page.js` | 700+ | Multi-step form with map, image upload, pricing |
| 6 | `app/page.js` (Home) | 623 | Property fetching, multi-filter, hero, map, feature cards |
---
## 6. Key Patterns
### Data Fetching (4 Patterns)
| Pattern | Usage | Found In |
|---------|-------|----------|
| `useEffect` + `useState` | ~90% of pages | Most pages |
| Context-level fetch | 2 providers | `FavoritesContext`, `NotificationsContext` |
| localStorage cache | Owner dashboards | `owner/bookings`, `owner/calendar`, `owner/profits` |
| Mock data fallback | 3 owner pages | `owner/bookings`, `owner/calendar`, `owner/profits` |
### Styling
- 100% Tailwind CSS v4 (utility classes, no CSS modules)
- Custom `globals.css`: Madani Arabic fonts (9 weights), Leaflet overrides, keyframe animations
- Color palette: `amber-500/600` (primary), `#ede6e6` (bg), `#156874` (accent teal)
- RTL-first with dynamic LTR switching via `currentLanguage` state
### Animations (Framer Motion v12.29.2)
- `initial/animate` opacity + y/x translations (section reveals)
- `whileHover`/`whileTap` scale (buttons, interactive elements)
- `AnimatePresence` (property popups, user menus)
- `whileInView` + `viewport` (scroll-triggered animations on home page)
- `staggerChildren` (hero text)
- Spring transitions `{ type: "spring", damping: 25, stiffness: 300 }`
### Form Handling
- **All forms**: Controlled `useState` — no React Hook Form, Formik, or `useReducer`
- **Validation**: Inline `value === 0 && <p className="text-red-500">مطلوب</p>`
- **No form libraries** — all hand-rolled
### Responsive Breakpoints
| Breakpoint | Layout |
|------------|--------|
| Default (mobile) | Single column, BottomNav, hamburger menu |
| `md:` (768px) | Desktop nav, 2-3 column grids |
| `lg:` (1024px) | PropertyDetail sidebar, 3-column grids |
---
## 7. Owner Pages Analysis (Dashboard Section)
| Route | File | Lines | Status | Data Source |
|-------|------|-------|--------|-------------|
| `/owner/properties` | `owner/properties/page.js` | 2057 | ✅ Active | API (`getMyRentListings`, `getMySaleListings`) + localStorage cache |
| `/owner/properties/add` | `owner/properties/add/page.js` | 700+ | ✅ Active | API (`addRentProperty`, `addSaleProperty`, `uploadPicture`) |
| `/owner/reservations` | `owner/reservations/page.js` | 1400+ | ❌ Commented out | Mock data (commented) |
| `/owner/bookings` | `owner/bookings/page.js` | 560+ | ⚠️ Demo | localStorage mock data only |
| `/owner/calendar` | `owner/calendar/page.js` | 580+ | ⚠️ Demo | localStorage mock data only |
| `/owner/profits` | `owner/profits/page.js` | 600+ | ⚠️ Demo | localStorage mock data only |
| `/owner/account-book` | `owner/account-book/page.js` | 500+ | ✅ Active | API (`getOwnerStatistics`) |
---
## 8. Admin Functionality
| Component | Status | Data Source |
|-----------|--------|-------------|
| BookingRequests | ✅ Active | Real API (`getReservations`, `adminConfirmDeposit`) |
| Users | ❌ Not implemented | — |
| Properties | ❌ Not implemented | — |
| LedgerBook | ⚠️ Mock only | 3 hardcoded mock transactions |
| Dashboard | ❌ Not implemented | — |
Designed for internal admin use at `/admin` — tabs for Bookings/Users/Properties/Ledger/Dashboard.
---
## 9. Known Technical Debt
### Dead Code
| File | Dead Lines | Issue |
|------|-----------|-------|
| `api.js` | Lines 1-370 (370 lines) | Entire legacy version commented out |
| `StarRating.js` | Lines 1-93 (93 lines) | Old framer-motion version commented out |
| `PropertyRatingList.js` | ~150 lines | Old version commented out |
| `PropertyRatingForm.js` | ~220 lines | Old version commented out |
| `contexts/PropertyContext.js` | Entire file | Never mounted |
| `utils/PropertyContext.js` | Entire file | Duplicate orphan |
### Code Duplication
| Pattern | Files | Description |
|---------|-------|-------------|
| Leaflet maps | 3 separate files | `PropertyMapWithMarkers.js`, `home/PropertyMap.js`, `property/PropertyMap.js` — all setup Leaflet identically |
| Rating forms | `PropertyRatingForm.js` (317) + `CustomerRatingForm.js` (92) | ~75% code overlap; both define identical `RatingField` inline |
| formatCurrency | 4+ locations | Scattered across files with slightly different logic |
| Image URL building | 4+ locations | Different implementations for same task |
| Notifications page | `/notifications/page.js` vs `NotificationsContext` | Page duplicates all context state/logic |
### Architecture Issues
| Issue | Impact |
|-------|--------|
| No middleware.js | All route protection is client-side only |
| JWT in localStorage | XSS-vulnerable token storage |
| Client-side role checks | Users can modify JWT to elevate privileges |
| Owner pages use mock data | `/owner/bookings`, `/owner/calendar`, `/owner/profits` are demo-only |
| 3 unused UI libraries | DaisyUI, Flowbite, Yandex Maps imported but never used |
| No TypeScript | 112 JS files, no type safety |
| No ESLint | No linting configured |
| No testing framework | Zero tests |
| Flat route structure | No nested layouts; all pages share root layout |
| Active console.log | ~30+ files with console.log statements (security risk) |
---
## 10. Dependencies
### Production (18)
| Package | Version | Purpose |
|---------|---------|---------|
| next | 16.1.6 | Framework |
| react / react-dom | ^18.3.1 | UI |
| firebase | ^12.11.0 | FCM push notifications |
| leaflet / react-leaflet | 1.9.4 / 4.2.1 | Maps |
| @pbe/react-yandex-maps | ^1.2.5 | Yandex Maps (unused) |
| framer-motion | ^12.29.2 | Animations |
| lucide-react | ^0.563.0 | Icons |
| flowbite / flowbite-react | 4.0.1 / 0.12.16 | UI library (unused) |
| react-hot-toast | ^2.6.0 | Toasts |
| i18next / react-i18next / i18next-browser-languagedetector | 25.8 / 16.5 / 8.2 | i18n |
| jspdf / html2canvas | 4.2.1 / 1.4.1 | PDF generation |
| xlsx | ^0.18.5 | Excel export |
| react-intersection-observer | ^10.0.3 | Scroll detection |
### Dev (7)
| Package | Version | Purpose |
|---------|---------|---------|
| tailwindcss | ^4.1.18 | CSS framework |
| @tailwindcss/postcss | ^4 | PostCSS plugin |
| postcss / autoprefixer | ^8.5.6 / ^10.4.23 | CSS processing |
| daisyui | ^5.5.14 | UI components (unused) |
| babel-plugin-react-compiler | 1.0.0 | React compiler optimization |
### Missing (notable absences)
- No TypeScript
- No ESLint
- No testing (Jest, Playwright, Cypress)
- No state management library (Redux, Zustand)
- No data fetching library (React Query, SWR)
- No form library (React Hook Form, Formik)
- No security lib (helmet, cors, csurf)
- No HTTP client (axios, ky)
- No JWT lib (jsonwebtoken, jose)
---
## 11. Security Summary
*(See `security-audit-report.md` for full details)*
| # | Finding | Severity |
|---|---------|----------|
| 1 | JWT in localStorage (XSS-theft) | 🔴 Critical |
| 2 | Stored XSS via Leaflet popup HTML | 🔴 Critical |
| 3 | OTP code logged to console | 🔴 Critical |
| 4 | No server-side middleware | 🔴 Critical |
| 5 | Passwords in URL query params | 🔴 Critical |
| 6 | IDOR on property edit/status APIs | 🔴 Critical |
| 7 | Client-only role checks | 🟠 High |
| 8 | HTTP endpoints leak tokens | 🟠 High |
| 9 | No CSP/security headers | 🟠 High |
| 10 | Mass assignment via spread | 🟠 High |
| 11 | Error messages leak internals | 🟠 High |
| 12 | Hardcoded IPs (10+ files) | 🟡 Medium |
---
## 12. File Size Heatmap
| Size Range | Files | Examples |
|------------|-------|----------|
| 1500-2100 lines | 2 | `PropertyDetail.js` (1743), `owner/properties/page.js` (2057) |
| 600-1200 lines | 6 | `api.js` (1198), `ClientLayout.js` (804), `login/page.js` (800+), `owner/properties/add/page.js` (700+), `app/page.js` (623), `owner/bookings/page.js` (560+) |
| 200-600 lines | 15 | Most page files |
| < 200 lines | ~70 | Enum files, smaller components, error/loading pages |