Noxa_Jewellery

1. Task / Redmine Work Log: Blog Management & Rich Text Editor UI Enhancements
   Total Time: 8.0 Hours

1. 1. Sidebar Navigation & Blog View UI Integration (1.0 hr)

• Added Blogs navigation entry to the Admin Sidebar with active state styling, hover animations, and luxury brand icon integration.
• Cleaned up the Blog header card layout, removing the redundant "General" category tag badge overlay on cover images.
• Added custom styling utilities to hide horizontal/vertical scrollbars (`hide-scrollbar`) across the container layout for a cleaner editorial view.

1. 2. Blog Editor Multi-Row Luxury Toolbar UI (2.0 hrs)

• Redesigned the TipTap Rich Text Editor toolbar into a structured 3-row layout aligned with the Noxa luxury color palette (`#CAA869` Champagne Gold, Antique Gold gradients, and Slate borders): * Row 1 (Typography & Alignment): Styled buttons for Bold, Italic, Underline, Bullet/Numbered Lists, H1–H4 Headings, Paragraph, Font Size stepper (`-`, `+`, and dropdown), Noxa 12-color swatch popover dropdown, Alignments (Left, Center, Right, Justify), Table insertion, and Float options. * Row 2 (Link Management Bar): Designed integrated inputs for Link URL, Link Text, Display Type (Inline/Block), Custom Link CSS Class, Target dropdown (`_blank`, `_self`, `_parent`, `_top`), Rel attribute input, and styled Insert/Remove Link action buttons. * Row 3 (Media Upload Bar): Created unified file upload action button with Alt Text input and alignment dropdown.

1. 3. Link Creation & Text Selection Sync UI (1.0 hr)

• Fixed text selection state synchronization in the editor so selecting words automatically populates the Link Text field.
• Fixed selection sticking/ghosting bug when unselecting text, ensuring the toolbar cleanly clears and resets input fields.
• Added auto-focus and alert guidance styling when Link URL input is submitted empty.

1. 4. Interactive Media Resizing UI (Images & Videos) (2.0 hrs)

• Implemented interactive node view wrappers for inserted blog images and videos: * Border Outline: Active blue dashed border (`border-2 border-dashed border-blue-500 rounded-xl`) that highlights upon selection or hover. * 4 Corner Resize Handles: Circular blue handles with white borders and shadow elevations (`-top-1.5 -left-1.5`, etc.) with expanded grab areas for smooth diagonal proportional scaling. * Corner Delete Icon: Prominent red circular `X` delete button anchored to the top-right corner (`-top-3 -right-3`) with hover scale micro-animations. * Floating Quick-Preset Bar: Dark glassmorphism floating toolbar pinned to the bottom of active media with 1-click width presets (`25%`, `50%`, `75%`, `100%`) and quick alignment buttons. * Normalized `.ProseMirror` media styles to ensure tight, snug border fit with zero extraneous margins.

1. 5. Drag-and-Drop & Media Movement UI (1.0 hr)

• Designed a top-center blue pill badge (`"Drag to move"`) with a grab icon for intuitive dragging and re-ordering of media blocks between paragraphs.
• Enhanced drag-and-drop feedback for dropping desktop media files directly onto specific document cursor positions.

1. 6. Toolbar Event & Focus Synchronization Refinement (1.0 hr)

• Resolved browser event conflict where `preventDefault` on toolbar buttons was preventing the native OS file picker from opening on "Upload File".
• Implemented automatic selection fallback (`ensureTextFocus`) so clicking formatting buttons (`B`, `I`, `U`, Headings, Lists, Tables) while an image or video is active cleanly switches focus to document text.
• Unified toolbar alignment (`Left`, `Center`, `Right`, `Float L`, `Float C`, `Float R`) to dynamically update both text blocks and selected media components.

Noxa Jewellery — Blog Publishing Studio & E-Commerce**

1. ✅ 1. Blog Admin Gate — Fixed `react-hot-toast` Import Error
   - File: `Noxa-Jewellery-fe/src/components/blog/BlogAdminGate.tsx`
   - Issue: Vite was throwing a compile error — `Failed to resolve import "react-hot-toast"` (library not installed)
   - Fix: Replaced with the internal custom `../Toast` utility already present in the project
   - Result: `/noxa/create-blog` loads cleanly with no errors

1. ✅ 2. Blog Admin Auth — Forgot Password Logic Overhaul
   - Files: `BlogAdminGate.tsx` + `Noxa-Jewellery-be/src/blogs/blogs.service.ts`
   - Issues Fixed:
   - After using "Forgot Password", original password `noxa@123` no longer worked
   - OTP verify and reset endpoints didn't return auth tokens, so user had to re-login manually
   - Changes Made:
   - `noxa@123` is now a permanent master password that always works regardless of reset state
   - OTP verify (`/verify-otp`) now returns a `token` + auto-logs in
   - Reset password (`/reset-password`) now returns a `token` + auto-logs in immediately
   - Added "Sign In with OTP Directly" button — enter OTP to log in without setting new password
   - Added "Back to Sign In (noxa@123)" shortcut — restores original credentials in 1 click
   - Forgot Password screen now shows a "Sign In with Original Password" button

1. ✅ 3. Noxa E-Commerce — Next.js Cache Error Fixed
   - Project: `Noxa_E_Comm_Fe`
   - Issue: `Cannot find module './1682.js'` — stale 22-hour Next.js webpack cache
   - Fix: Cleared `.next/` cache, killed stale process (PID 12632), restarted `next dev`
   - Result: `localhost:3000` and `localhost:3000/faq` return HTTP 200

1. ✅ 4. E-Commerce — Newsletter Section Commented Out
   - File: `Noxa_E_Comm_Fe/app/page.tsx`
   - Change: `<Newsletter />` commented out as per request — "Join the Noxa Circle" section hidden from homepage

1. ✅ 5. Blog Editor — Mobile View Fixes
   - File: `Noxa-Jewellery-fe/src/components/blog/BlogEditor.tsx`
   - Issue: Toolbar and "Noxa Brand Palette" popover were clipping/overflowing on mobile screens
   - Fixes:
   - Color Palette Popover: Anchored `right-0` on mobile so it never overflows the right edge; constrained to `max-w-[calc(100vw-24px)]`
   - Link Controls (Link URL, Link text, Inline, Target, Insert/Remove): Grouped into a clean full-width responsive row with `flex-1` inputs on mobile
   - File Upload Controls (Upload File, File alt text, Alignment): Same responsive grouping
   - All controls still flow inline on desktop unchanged

1. ✅ 6. Blog Page — Mobile Top Gap Fix
   - Files: `BlogsList.tsx` + `BlogAdminGate.tsx`
   - Issue: "Create Blog Article" heading was overlapping with the admin status bar on mobile due to `-mt-9` negative margin
   - Fix: Removed `-mt-9`, replaced with `mt-4 sm:mt-2`; increased studio bar bottom margin to `mb-5 sm:mb-6`

1. ✅ 7. Blog Auth — `.env` Configuration Added
   - File: `Noxa-Jewellery-be/.env`
   - Added 4 environment variables:
   ```
   ZOHO_MAIL_HOST=smtppro.zoho.com
   ZOHO_MAIL_PORT=465
   ZOHO_MAIL_USER=info@suthratech.com
   ZOHO_MAIL_PASS=bn5q9ecgD9dN
   ```
   - Code Updated: `blogs.service.ts` → `getZohoTransporter()` now reads from `process.env` with hardcoded fallbacks
   - Backend restarted with latest build

1. ⚠️ Backend Status Note
   The `Noxa-Jewellery-be` dev server (`start:dev`) is currently restarting after the code change. It may need a moment to finish compiling before login/OTP calls work again.