shiny-drawing

As a frontend developer, implement the LandingHero section using @react-three/fiber Canvas and THREE.js. Implements BlueprintMesh component with useFrame morph animation between sketchPositions and archPositions (24 architectural lines: foundation, walls, roof, door, windows, interior lines, dimension lines, chimney). Vertices interpolate via morphProgress ref. Uses useMemo to generate Float32Array geometry buffers with random jitter (0.35) for sketch positions. GSAP drives scroll-linked morphProgress from 0 to 1. Hero text and CTA buttons animate in with gsap timeline on mount. Background features parallax layers at -0.3px and -0.5px scroll speeds. Includes pencil-sketch animation concept from SRD signature design.

As a frontend developer, implement the ProblemStatement section using framer-motion and lucide-react. Uses useRef and useInView (once:true, margin:-80px) to trigger animations. Left column slides in from x:-50 with motion.div. Pulsing AlertTriangle icon uses motion.div with scale:[1,1.1,1] infinite loop at 2s. Icon ring animates scale:[1,1.3,1] and opacity:[0.4,0.15,0.4]. Text lines use staggerChildren (0.05s) with lineVariant (opacity 0→1, y:8→0, 0.4s easeOut). descLines array has 6 entries with emphasis boolean for coral-colored text. Three parallax background layers: ps-parallax-bg (-0.3px), ps-parallax-mid (-0.5px) with draft elements. Blueprint grid lines (3 horizontal, 3 vertical) as decorative background.

As a frontend developer, implement the SolutionHighlight section using GSAP and ScrollTrigger. Registers ScrollTrigger plugin. Stats array: accuracy (98%), time (10x), risk (85%), adoption (92%) with barClass variants. Uses useState for displayValues (count-up display), useRef for sectionRef/headlineRef/descRef/statNumberRefs/statBarRefs/hasAnimated. ScrollTrigger fires at top:75% once, triggering GSAP timeline: headline fades in (0.8s power2.out), description fades in (-0.4s overlap). Counter animation uses gsap.to on plain object with onUpdate updating displayValues state, staggered by 0.15s delays. Accent bars animate scaleX from 0→1. Background SVG blueprint pattern layer with parallax at -0.3px. Cleans up all ScrollTrigger instances on unmount.

As a frontend developer, implement the LandingFeatures section using framer-motion and react-icons/fi. Features array has 6 items: PDF Upload (FiUpload→/Dashboard), Trade-Scope Allocation (FiLayers→/TradeMatrix), Risk Highlighting (FiAlertTriangle→/Canvas), Scope Export (FiShare2→/Project), Interactive Canvas (FiEdit3→/Canvas), Audit Trail (FiFileText→/AuditTrail). Each feature card uses motion.div animations. Three parallax layers: lf-parallax-bg (-0.3px) with blueprint grid, lf-parallax-mid (-0.5px) with 3 drafting elements and 2 drafting lines. Content layer with lf-header containing subtitle, title, and description. Feature cards rendered in responsive grid with hover interactions via framer-motion.

As a frontend developer, implement the UserPersonas section using framer-motion and useState. Uses hoveredPersona state to drive hover interactions on persona cards. Two persona objects: Senior Site Manager (SM initials, primary accent, 4 painPoints) and Quantity Surveyor (QS initials, light accent, 4 painPoints). Background SVG blueprint grid: 25 horizontal lines and 38 vertical lines at 32px spacing, plus building sketch shapes (rect, line elements) with stroke=#1A535C and strokeDasharray. Parallax background layer at -0.5px scroll speed. Persona cards animate on hover via setHoveredPersona, showing pain points list with framer-motion transitions.

As a frontend developer, implement the HowItWorks section using framer-motion, GSAP, and lucide-react. Steps array has 5 items: Upload Drawing (Upload icon), AI Analysis (Brain icon), Scope Allocation (Layers icon), Risk Review (ShieldCheck icon), Export Package (PackageOpen icon). Uses IntersectionObserver (threshold:0.15) to set isVisible and trigger GSAP connector SVG path draw animation (strokeDasharray→strokeDashoffset 0 over 2s power2.inOut, 0.3s delay). openAccordion state (default:0) drives AnimatePresence accordion for step descriptions — toggleAccordion sets to -1 if same index. containerVariants staggers children by 0.12s, stepVariants animate opacity/y. connectorRef targets SVG path for line draw. timelineRef for GSAP animation reference.

As a frontend developer, implement the Testimonials section using framer-motion with AnimatePresence carousel. Three testimonials: Marcus Chen (Balfour Beatty, Senior Site Manager), Sarah Okonkwo (Mace Group, Lead QS), James Harrington (Kier Group, Pre-Construction Director). currentIndex and direction state drive AnimatePresence card transitions: cardVariants animate x:100→0 on enter, x:0→-100 on exit (0.5s cubic-bezier). goNext/goPrev/goTo handlers update direction state. Auto-rotate useEffect fires every 5000ms with setInterval. starContainerVariants staggers star icons by 0.1s with spring animation (stiffness:400, damping:15). Dot navigation indicators. Parallax background layer. Prev/Next buttons visible on desktop.

As a frontend developer, implement the LandingPricing section using framer-motion. Plans array has 3 tiers: Starter ($49/mo, 5 features), Professional ($149/mo, 7 features, popular:true), Enterprise ($399/mo, 7 features). hoveredCard state drives card hover interactions. lp-blueprint-bg parallax at -0.3px, lp-deco-layer at -0.5px with 3 decorative circles. Header animates with whileInView (opacity:0→1, y:24→0). containerVariants staggers feature list items by 0.08s with itemVariants (opacity/x:-8→0). checkVariants rotate check icons from -90→0 degrees. Professional plan renders popular badge and elevated visual treatment. CTAs link to trial/contact flows. Responsive 3-column grid collapses on mobile.

As a frontend developer, implement the LandingCTA section using framer-motion and GSAP for particle burst effects. particles state array stores particle objects with id, x, y, targetX, targetY, variant (yellow or teal). spawnParticles (useCallback) creates 7 particles per click at angles distributed by (2π*i/count) with random distance 30-70px. gsap.fromTo animates each particle element by id (lc-p-{id}) from opacity:1 to opacity:0/scale:0.3 over 0.6s power2.out, removing from state onComplete. requestAnimationFrame fallback for DOM-ready particles. handleTrialClick spawns yellow particles, handleDemoClick spawns teal particles. containerVariants staggers children by 0.15s, itemVariants animate y:20→0 over 0.6s. Decorative icons: Ruler, Pencil, Triangle, Compass, PenTool, Layers from lucide-react positioned around section.

As a frontend developer, implement the Footer section using framer-motion and react-icons/fi. email useState drives newsletter form with handleSubmit resetting email on submit. Four link columns: Product (Canvas, Trade Matrix, Audit Trail, Dashboard), Company (About Us, Careers, Blog, Contact), Resources (Documentation, API Reference, Tutorials, Community), Legal (Privacy Policy, Terms of Service, Cookie Policy, Compliance). Each link uses motion.a with whileHover color transition. Social icons: FiTwitter, FiLinkedin, FiGithub, FiInstagram rendered as ftr-social-icon with motion.a whileHover rotate:180 and color:#FF9F1C over 0.4s easeInOut. Footer background uses primary (#1A535C) with accent (#FFE66D) column headers. Newsletter input with ftr-newsletter-btn. Responsive grid: 1-col mobile, 1.2fr/2fr tablet, 1.4fr/2.5fr desktop. Note: reused across pages — check if already exists.

As a frontend developer, implement the Navbar section for the Login page. This component may already exist from the Landing page (sections/Navbar.jsx). It uses gsap for two animations: (1) SVG path draw animation on mount via logoPathRef using getTotalLength/strokeDashoffset, and (2) a magnetic button effect on the CTA via ctaWrapRef/ctaRef that pulls the button toward the cursor within an 80px radius. State includes menuOpen (boolean) and scrolled (boolean) driven by a passive scroll listener that toggles nb-scrolled class. Nav links include Landing, Canvas, Dashboard, TradeMatrix, AuditTrail. Mobile drawer with overlay and animated hamburger (3-line to X via nb-open class). Responsive: desktop nav hidden at max-width 767px, hamburger shown, drawer slides in from right at translateX(0).

Implement REST API endpoints for drawings resource: POST /drawings/upload (multipart PDF upload to storage, creates drawing record with processed_status='pending'), GET /drawings/{id}, GET /projects/{project_id}/drawings (list), DELETE /drawings/{id}. Fields: id, project_id, drawing_number, drawing_title, storage_url, processed_status (pending/processing/complete/failed), created_at. Handles concurrent uploads without performance degradation per NFR. Integrates with file storage (Supabase Storage or S3). Required by Project page (DrawingCanvas, ProjectSidebar) and Canvas page. Note: frontend tasks DrawingCanvas, ProjectSidebar, CanvasDrawingArea should depend on this.

Implement REST API endpoints for trade_packages resource: GET /projects/{project_id}/trade-packages, POST /projects/{project_id}/trade-packages, PUT /trade-packages/{id}, DELETE /trade-packages/{id}. Fields: id, project_id, trade_name, color_code (hex), created_at. Used by TradeMatrix page (TradeListSidebar, TradeMatrixHeader, ScopeAllocationGrid) and Canvas (layer filters). Note: frontend tasks TradeListSidebar, TradeMatrixHeader, ScopeAllocationGrid, CanvasToolPanel should depend on this.

Implement authentication middleware for all protected API routes. Using JWT tokens: verify_token middleware validates Bearer token on each request, extracts user_id and role. Implement get_current_user dependency injection. Add role-based access: Senior Site Manager and Quantity Surveyor roles with appropriate permissions. Protected routes require valid JWT. Add user profile endpoint GET /users/me returning id, email, role, name. Implement password hashing with bcrypt. Ensure all API endpoints (projects, drawings, trade_packages, drawing_elements, scope_gaps, export) are protected. Relates to existing auth setup — extend with middleware guards rather than recreating login/register endpoints.

Integrate cloud file storage for architectural drawing PDF uploads. Using Supabase Storage or AWS S3: (1) Configure storage bucket with appropriate CORS and access policies; (2) Implement signed URL generation for secure PDF access (time-limited URLs, not public); (3) Upload service with progress tracking (multipart upload for large PDFs); (4) File validation: PDF-only, max size limit (e.g., 100MB), virus scanning hook; (5) Storage path convention: /{owner_id}/{project_id}/{drawing_id}/{filename}. Backend drawing upload endpoint should use this service to store the PDF and return the storage_url. Required by the AI analysis pipeline which reads from storage.

As a frontend developer, implement the LoginHero section for the Login page (sections/LoginHero.jsx). Uses gsap.timeline with power3.out ease to stagger-animate four refs: eyebrowRef, headlineRef, subheadlineRef, dividerRef — each set to opacity:0/y:18 then animated in sequence starting at 0.1s offsets. Background is an SVG blueprint grid using two nested SVG patterns: lh-grid-minor (24x24, 0.5px stroke) and lh-grid-major (120x120, 1.2px stroke) with crosshair registration marks at corners and an orange (#FF9F1C) dashed dimension annotation line at 85% height. Diagonal teal gradient overlay (rgba 0%→rgba 4%→rgba 6%). Eyebrow badge shows 'Scope Auditing Platform' with orange dot. Headline 'Welcome Back' with lh-headline-accent CSS animation (scaleX underline draw). Responsive: headline scales from 2rem (mobile) to 2.75rem (tablet) to 3.25rem (desktop).

As a frontend developer, implement the LoginCard section for the Login page (sections/LoginCard.jsx). Manages six state hooks: email, password, rememberMe, showPassword, isLoading, error. handleSubmit validates non-empty fields (sets error state on fail), then sets isLoading=true for 1200ms simulated delay before redirecting to /Dashboard. Card has a ::before gradient top accent line (linear-gradient #1A535C→#4ECDC4→#1A535C). Email field with inline SVG envelope icon (lc-input-icon). Password field with lock icon and lc-pw-toggle button that toggles showPassword to switch input type text/password with animated eye/eye-slash SVG icons. Custom checkbox for rememberMe using hidden lc-checkbox-input + visible lc-checkbox-custom with ::after checkmark via CSS. Coral (#FF6B6B) forgot password link. Accent yellow (#FFE66D) submit button with spinner (lc-spinner CSS keyframe rotate animation) during loading. Error message in lc-error div with alert role. Divider with 'New to shiny-drawing?' text. Responsive: card padding shrinks at max-width 480px.

As a frontend developer, implement the Footer section for the Login page (sections/Footer.jsx). This component may already exist from the Landing page (sections/Footer.jsx). Uses framer-motion for link hover animations (whileHover color transition) and social icon rotation (whileHover rotate:180, color:#FF9F1C). Manages email state for newsletter form with handleSubmit that clears input. Four link columns (Product: Canvas/TradeMatrix/AuditTrail/Dashboard; Company; Resources; Legal) rendered via motion.a with whileHover={{color:'#F7FFF7'}}. Social icons from react-icons/fi: FiTwitter, FiLinkedin, FiGithub, FiInstagram wrapped in motion.a with 180deg rotation on hover. Newsletter form with ftr-newsletter-input (teal border, semi-transparent bg) and ftr-newsletter-btn (primary_light background→accent on hover). Deep teal (#1A535C) background. ftr-top grid: 1-col mobile → 1.2fr/2fr tablet → 1.4fr/2.5fr desktop. ftr-links-grid: 2-col mobile → 4-col tablet.

As a frontend developer, implement the Navbar section for the Dashboard page. This component is likely already implemented from the Landing and Login pages (task IDs: 31b71d8a-806e-4a25-a5ef-e1e1c293afa6, 056bce28-b533-4f77-b1a8-975b929be466). Verify the shared Navbar component works on the Dashboard route with its active 'Dashboard' nav link highlighted. The Navbar uses: useState for menuOpen/scrolled, useRef for logoPathRef/ctaRef/ctaWrapRef, gsap for SVG path draw animation on mount (strokeDasharray/strokeDashoffset), scroll event listener for nb-scrolled class, magnetic button effect via handleMouseMove/handleMouseLeave callbacks with gsap.to x/y transforms, handleCtaClick adding nb-cta-clicked class, and navLinks array including Landing/Canvas/Dashboard/TradeMatrix/AuditTrail routes. Ensure the Dashboard href is correctly set as active.

Implement REST API endpoints for drawing_elements resource: GET /drawings/{drawing_id}/elements (list with optional trade filter), PUT /drawing-elements/{id} (assign trade). Fields: id, drawing_id, element_type, raw_content, bounding_box (JSON coordinates for canvas overlay rendering), suggested_trade_id, assigned_trade_id. The bounding_box JSON is consumed by the frontend canvas to render color-coded overlays. Required by Canvas page (CanvasDrawingArea) and TradeMatrix (CanvasPreview). Note: frontend tasks CanvasDrawingArea, CanvasPreview should depend on this.

Implement a centralized API client layer for the frontend: (1) Axios or fetch wrapper with base URL configuration from environment variables, automatic JWT token injection from auth state, 401 response interceptor for token refresh/logout; (2) React Query (TanStack Query) setup for server state management with query keys for projects, drawings, trade_packages, scope_gaps; (3) Custom hooks: useProjects(), useDrawing(id), useTradePackages(projectId), useScopeGaps(drawingId, filters), useMutation hooks for create/update/delete operations; (4) Optimistic updates for scope gap status changes (mark resolved) in AuditTrail. This layer sits between all frontend section components and the backend APIs.

As a frontend developer, implement the LoginFooterNote section for the Login page (sections/LoginFooterNote.jsx). Static section with lfn-root/lfn-inner layout. Contains: (1) lfn-legal paragraph with coral (#FF6B6B) styled links to /Terms and /Privacy with border-bottom hover transition, (2) lfn-divider (32px wide 1px line), (3) lfn-security span with inline SVG shield+checkmark icon (16x16, stroke currentColor, #1A535C at 0.7 opacity) and text 'Your data is encrypted and secure'. Responsive: padding increases at min-width 768px.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. This static presentational component renders a breadcrumb nav (Home → Dashboard with aria-current='page'), a header row containing a title group with an SVG icon, a dh-title-icon, and a dh-header-row layout. Below the title, it renders a dh-meta-bar displaying four metaItems: 'Last updated' (clock SVG), 'Role: Senior Site Manager' (person SVG), 'Projects: 12 Active' (grid SVG), and 'Environment: PCSA Phase' (layers SVG). Each meta item uses inline SVG icons. The component uses only React (no state/animations) with CSS classes prefixed dh-. It also includes action buttons in the header row area.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. The component uses useState for drawerOpen, activeStatus ('all'), and activeTrade (null). It imports Lucide icons: LayoutDashboard, FolderOpen, ClipboardCheck, Settings, HelpCircle, Building2, ChevronDown, MapPin. Renders: a mobile toggle button with ChevronDown rotation via dsb-open class, a dsb-drawer div toggled by dsb-drawer-open class. Inside the drawer: a dsb-profile card showing avatar initials 'SB', online status dot, name 'Sarah Bennett', role 'Senior Site Manager', and MapPin location 'London, UK'. A nav menu built from navItems array (6 items with badges — 'My Projects' badge '12', 'Active Audits' badge '3'). Status filter pills from statusFilters array (All/In Progress/Under Review/Completed with counts and color dots). Trade filter chips from tradeFilters array (Structural/MEP/Finishes/Civil Works). Active filter state updates on click with setActiveStatus/setActiveTrade.

As a frontend developer, implement the DashboardWelcomeBanner section for the Dashboard page. The component uses useRef for greetingRef, badgeRef, statusRef, ctaRowRef, statsRef and animates them with a gsap.timeline on mount: greeting slides in from x:-18 (opacity 0→1, 0.45s), badge scales from 0.85 (0.3s, overlap -0.25), status fades from y:8 (0.35s, overlap -0.15), ctaRow from y:10 (0.35s, overlap -0.1), statsRef from x:14 (0.4s, overlap -0.3). Renders: dwb-corner-mark decorative element, dwb-left column with dwb-greeting h1 ('Welcome back, Sarah'), dwb-role-badge with dwb-role-dot ('Senior Site Manager'), dwb-status-message paragraph with bold '3 drawings awaiting scope audit' text, dwb-cta-row with two links ('Continue Active Audit' → /Canvas primary, 'Create New Project' → /Project secondary). dwb-stats-strip on the right showing quickStats array: 12 Active Projects, 3 Audits Pending, 94% Scope Coverage.

As a frontend developer, implement the DashboardStatsCards section for the Dashboard page. The component uses useRef cardRefs array and animates all cards on mount with gsap.fromTo: opacity 0→1, y:18→0, duration 0.5, stagger 0.09, delay 0.1. Renders four stat cards from the stats array: 'Total Projects' (24, accentColor #1A535C, monitor SVG icon, trend '+3 this month' up), 'Active Audits' (7, accentColor #4ECDC4, search-circle SVG, trend '+2 today' up), 'Pending Reviews' (12, accentColor #FF9F1C, document SVG, trend '-4 from last week' down), 'Completed Scope Packs' (58, accentColor #FFE66D, checkmark SVG, trend '+11 this quarter' up). Each card uses accentColor and iconBg for inline styling. A TrendArrow sub-component renders up/down SVG polylines. Cards also receive hover interaction via GSAP (based on truncated code pattern).

As a frontend developer, implement the DashboardProjectsGrid section for the Dashboard page. This is the most complex section with full filtering, sorting, and search. Uses useState for activeFilter ('All'), sortVal ('updated_desc'), search query, and dropdown open state. The PROJECTS array has 6 entries (Heathrow Terminal 6, Kings Cross, Manchester Civic Quarter, Canary Wharf Data Centre, Edinburgh Waterfront, Leeds Hospital). STATUS_FILTERS = ['All','In Progress','Ready','Completed']. SORT_OPTIONS has 3 options. Helpers: formatDate (en-GB locale), sortProjects (name_asc/drawings_desc/updated_desc). BlueprintThumb sub-component renders a procedural SVG blueprint preview using color/accent props. Each project card shows: BlueprintThumb, project name, client, status badge, drawings count (Layers icon), updated date (Calendar icon), and an action menu (MoreVertical) with Eye/Download/Settings/FileText options. Grid toolbar includes Search input, Plus button, status filter pills, and sort dropdown. Lucide icons: Search, Plus, Eye, Download, Settings, MoreVertical, FileText, Calendar, Layers.

As a frontend developer, implement the DashboardRecentActivity section for the Dashboard page. Uses useState for activeTab and useMemo for filtered activity list. ALL_ACTIVITIES array has 10+ items with fields: id, type (upload/audit/export/team), owner (my/team), user, action, target, project, projectHref, timestamp, dotClass (dra-dot-upload/dra-dot-audit/dra-dot-export/dra-dot-flag/dra-dot-team), and icon (↑/✓/⬇/⚑/◆). Tab filters toggle between 'my' and 'team' activity ownership. Each activity renders as a timeline row with a colored dot (dotClass), icon, user name, action text, bold target link, project link (projectHref → /Project), and timestamp. The timeline uses a vertical connector line between items. Visible activity count is limited with a 'Show more' pattern.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Uses useRef rootRef and animatedRef (guard pattern to prevent re-animation). On mount, gsap.fromTo animates all .dqa-animate elements: opacity 0→1, y:14→0, duration 0.4, stagger 0.07, delay 0.1. Renders a dqa-layout with two columns. Left column: 4 action cards from quickActions array — 'View Trade Matrix' (→/TradeMatrix, variant secondary, iconVariant teal), 'Create Project' (→/Project, variant tertiary, iconVariant primary), 'Open Canvas' (→/Canvas, variant highlight, iconVariant highlight), 'Audit Trail' (→/AuditTrail, variant coral, iconVariant coral) — each with SVG icon, label, and desc. Right column: quickLinks list (5 links: Structural Templates, MEP Package, Facade Audit, Civil Works, Fire & Safety) and recentProjects list (3 items: Harbour Bridge Tower active, Westfield Retail pending, Civic Centre review) with colored status dots (dqa-recent-dot--active/pending/review) and meta text.

As a frontend developer, implement the Footer section for the Dashboard page. This component likely already exists from the Landing page (task ID: fdbff25c-b1ae-4efd-acc4-1492da4bc716) and Login page (task ID: 19807291-1d52-4b26-bc70-ac72c93f1578). Verify the shared Footer renders correctly on the Dashboard. The Footer uses useState for email (newsletter form), framer-motion for motion.a hover effects (whileHover color → #F7FFF7), react-icons/fi for FiTwitter/FiLinkedin/FiGithub/FiInstagram social icons. Renders: ftr-brand section with 'shiny-drawing' logo (ftr-logo-accent span), brand description. ftr-links-grid with 4 columns: Product (Canvas/Trade Matrix/Audit Trail/Dashboard), Company (About/Careers/Blog/Contact), Resources (Documentation/API Reference/Tutorials/Community), Legal (Privacy/Terms/Cookie/Compliance). Social icons row. Newsletter email form with handleSubmit that clears email state. Copyright line. All product links updated to include Dashboard href.

As a frontend developer, implement the Navbar section for the Project page. This component may already exist from previous pages (Dashboard, Login, Landing). Reuse the shared Navbar component featuring: GSAP SVG logo path draw animation on mount using strokeDasharray/strokeDashoffset, scroll-detection shadow via window.addEventListener('scroll') toggling the 'nb-scrolled' class, magnetic CTA button effect using gsap.to() on mousemove/mouseleave with radius=80 pull calculation, click ripple animation via 'nb-cta-clicked' class toggle, and nav links to Landing/Canvas/Dashboard/TradeMatrix/AuditTrail. Uses useState for menuOpen/scrolled, useRef for logoPathRef/ctaRef/ctaWrapRef, and useCallback for mouse handlers.

Implement REST API endpoints for scope_gaps resource: GET /drawings/{drawing_id}/scope-gaps (list with filter by risk_level, status), POST /scope-gaps (create gap), PUT /scope-gaps/{id} (update status open/resolved, recommended_action), DELETE /scope-gaps/{id}. Fields: id, drawing_id, element_id, risk_level (Low/Med/High), gap_description, recommended_action, status (Open/Resolved), created_at. Supports bulk status update endpoint PATCH /scope-gaps/bulk for AuditTrail bulk actions. Required by AuditTrail page (AuditTable, AuditSummaryCards, AuditDetailPanel) and Project page (ScopeRisksPanel). Note: frontend tasks AuditTable, AuditSummaryCards, AuditDetailPanel, ScopeRisksPanel should depend on this.

As a frontend developer, implement the ProjectHeader section for the Project page. Renders a static header with: breadcrumb nav (aria-label='Breadcrumb') using an ordered list of crumbs ['Dashboard', 'Projects'] with SVG chevron separators and a current-page 'Commercial Tower - Phase 2' span; a title row with h1 ph-project-title, p ph-subtitle ('Pre-Construction Scope Audit · Structural & MEP Package'), and a right-side meta group containing a ph-status-chip with animated dot ('Analysis Active') and a ph-updated-badge with clock SVG showing 'Updated May 14, 2026 at 09:41'; and a decorative ph-accent-line blueprint underline div. No state or animation — pure static JSX with semantic HTML.

As a frontend developer, implement the ProjectMetadata section for the Project page. Renders a pm-root section with two subsections: (1) pm-stats row with 3 STATS cards (drawings=142, trades=18 with 'Active' badge, risks=7 with 'Review' risk badge), each card having pm-stat-icon SVG, pm-stat-value span (ref'd via statRefs array), and pm-stat-label; (2) an analysis progress bar block showing COMPLETION=68% with a fillRef-animated pm-progress-fill and 4 MILESTONES (Upload/Analysis/Scope/Export at 0/33/66/100%). GSAP animations on mount: statRefs counting up from 0 to target value using gsap.to({val}) with onUpdate, and fillRef animating width from '0%' to '68%' over 1.2s with power2.out ease. Uses useRef for fillRef and statRefs array, useEffect for GSAP triggers.

As a frontend developer, implement the ProjectSidebar section for the Project page. Renders a filterable file navigator with: TRADE_FILTERS array (All Trades, Structural, Mechanical, Electrical, Civil, Architectural) with color swatches and file counts; SEVERITY_FILTERS array (All Severities, High/Medium/Low Risk) with counts; a PROJECT_FILES list of 12 files each with trade color from TRADE_COLOR_MAP, risk badge (low/medium/high), and active state; FiSearch-powered search input filtering files by name; FiUpload upload trigger button; FiChevronDown mobile expand toggle. State: activeTrade, activeSeverity, searchQuery, activeFile, mobileExpanded via useState. GSAP animations: accentLineRef animating width from 0 to 'calc(100% - 24px)' on mount; sidebarRef fade-in from opacity:0/x:-16 to opacity:1/x:0. Uses react-icons FiSearch/FiFile/FiUpload/FiChevronDown/FiLayers.

As a frontend developer, implement the ScopeRisksPanel section for the Project page. Renders a risk audit panel with: severity filter tabs (All/Critical/High/Medium/Low/Resolved) controlling activeFilter state; 6 RISK_DATA items each showing severity badge (critical/high/medium/low), title, trade, ref (e.g. DWG-S-014), date, description paragraph, and action buttons ('Mark Resolved', 'Review', 'Audit Trail'); expandedRisk state controlling accordion open/close per risk card with GSAP height animation; RSK-006 showing 'Resolved'/'Reopen' state (resolved:true variant); GSAP stagger entrance on risk cards from opacity:0/y:12; severity count chips in filter bar. State: activeFilter (string), expandedRisk (id|null), resolved items tracking. Uses useRef for panel root and card refs for GSAP accordion animation.

As a frontend developer, implement the Footer section for the Project page. This component may already exist from Landing/Login/Dashboard pages — reuse if available. Renders ftr-root footer with: ftr-brand block showing 'shiny-drawing' logo with ftr-logo-accent span and brand description paragraph; ftr-links-grid with 4 columns (Product/Company/Resources/Legal) each rendered as ftr-link-column with h4 heading and ul of motion.a links using Framer Motion whileHover={{ color: '#F7FFF7' }} with duration:0.3 transition; newsletter signup block with controlled email useState, form onSubmit clearing email; social icons row using FiTwitter/FiLinkedin/FiGithub/FiInstagram from react-icons/fi as anchor links; copyright line '© 2026 shiny-drawing'. Uses Framer Motion motion.a for hover animations and react-icons for social icons.

As a frontend developer, implement the Navbar section for the Canvas page. This component already exists from previous pages (Project, Dashboard) — reuse the shared Navbar component with GSAP logo SVG path draw animation using strokeDasharray/strokeDashoffset on mount, scroll detection state (setScrolled) for nb-scrolled shadow class, magnetic CTA button effect using ctaWrapRef/ctaRef with GSAP elastic.out animations on mousemove/mouseleave, and nb-cta-clicked pulse animation on click. Nav links include Landing, Canvas, Dashboard, TradeMatrix, AuditTrail. Mobile hamburger with animated nb-hamburger-line transforms and sliding nb-drawer with overlay.

Implement export API endpoint: POST /projects/{project_id}/export (accepts format: pdf|csv|xlsx, filters: trade_ids, include_resolved, drawing_id). Generates and returns a downloadable scope package file containing trade allocations and scope gaps. For PDF: uses a server-side PDF generation library (e.g., WeasyPrint or Puppeteer). For CSV/XLSX: structured data export. Returns a signed download URL or file stream. Required by Project page (ExportSection, ActionBar) and AuditTrail (AuditExportModal). Note: frontend tasks ExportSection, AuditExportModal should depend on this.

Implement the AI analysis pipeline (InstructBrain) that processes uploaded architectural drawing PDFs: (1) PDF parsing to extract vector linework, hatching, and text callouts as structured drawing_elements with bounding_box coordinates; (2) Trade allocation model that assigns suggested_trade_id to each element using ML classification; (3) Scope gap detection implementing the trade clash interface rules: Roofing vs Cladding interface seals, MEP vs Drylining pattresses/fire seals, Fire Protection vs All Trades deflection heads/dampers, MEP vs Groundworks BWIC/penetrations; (4) Async processing job queue (Celery/RQ or equivalent) updating drawing processed_status from pending -> processing -> complete. Exposes GET /drawings/{id}/analysis-status for polling. Required by Project page (ProjectMetadata analysis progress bar) and triggers scope_gaps population. Note: frontend tasks ProjectMetadata, ScopeRisksPanel should depend on this.

Implement GET /users/me/stats endpoint returning aggregated dashboard statistics for the authenticated user: total_projects (int), active_audits (int), pending_reviews (int), completed_scope_packs (int), recent_activity (array of last 10 activity events with type/user/action/target/timestamp), drawings_awaiting_audit (int). Activity types: upload, audit, export, team. This endpoint powers DashboardStatsCards, DashboardWelcomeBanner ('3 drawings awaiting scope audit'), and DashboardRecentActivity sections. Should be efficiently computed via database aggregation queries, not N+1 queries.

As a frontend developer, implement the DrawingCanvas section for the Project page. Renders an interactive SVG-based drawing viewer with: 5 TRADES filter toggles (Structural/MEP/Civil/Finishes/Siteworks) controlling activeTradeFilters Set state; 8 HIGHLIGHT_ZONES as colored SVG rect overlays filterable by trade key; 3 RISK_MARKERS as pulsing circle pins with hover tooltip showing title/desc via hoverRisk state and cursorPos tracking; pan/drag via mousedown/mousemove/mouseup handlers updating pan {x,y} state, applied directly to stageRef via transform style (avoid re-render); wheel zoom updating zoom state clamped between MIN_ZOOM=0.3 and MAX_ZOOM=3.0 with ZOOM_STEP=0.15; toolbar buttons for zoom-in/zoom-out/fit/pan; GSAP entrance animation on rootRef fromTo opacity:0/y:16 to opacity:1/y:0. State: zoom, pan, activeTradeFilters (Set), isDragging, dragStart, panStart, hoverRisk, cursorPos. Uses useRef for rootRef/viewportRef/stageRef and useCallback for toggle/drag handlers.

As a frontend developer, implement the CanvasToolPanel section for the Canvas page. This is a vertical left-panel tool sidebar with: TOOLS array (select, pen, brush, highlight/markup, measure, text/note) rendered as icon buttons with activeTool state; LAYERS array (structural, electrical, plumbing, hvac, annotations, scope-flags) with toggleable visibility state per layer; COLORS palette (8 swatches including #1A535C, #4ECDC4, #FF6B6B, #FF9F1C, #FFE66D) with activeColor state; BRUSH_SIZES (xs/sm/md/lg dot sizes) with activeBrushSize state; TRADES panel (structural, mep, civil, finishes, siteworks) with file counts and trade filter toggles. GSAP entrance animations on mount sliding panel in from left. CSS prefix ctp-.

As a frontend developer, implement the CanvasHeader section for the Canvas page. Features: zoom state (useState(100)) with handleZoomIn/handleZoomOut (±25, clamped 10–400), ZOOM_PRESETS dropdown [25,50,75,100,125,150,200] toggled via showPresets state with outside-click dismissal using presetsRef; handleFitToScreen resets to 75% with GSAP scale bounce on fitBtnRef; grid/ruler toggle buttons (gridOn, rulerOn boolean states); saveStatus state ('saved'|'saving') with triggerSaving timeout simulation; export button with GSAP backgroundColor flash from #4ECDC4 to #1A535C on exportBtnRef; zoomDisplayRef animates scale+color on every zoom change using gsap.fromTo with back.out(2) ease. Project name 'Level 04 — Structural', filename 'SD-2024-ARB-L04-001.pdf'. Lucide icons: ZoomIn, ZoomOut, Maximize2, Grid3x3, Ruler, Download, CheckCircle. CSS prefix ch-.

As a frontend developer, implement the CanvasDrawingArea section for the Canvas page. This is the core interactive canvas component with: TRADES array (structural/#FF6B6B, mechanical/#FF9F1C, electrical/#FFE66D, plumbing/#4ECDC4, finishes/#A29BFE) each with overlays containing x/y/w/h/title/desc/risk properties for real construction scope items (AHU Plant Room, LV Distribution, Wet Riser Core, Open Plan Flooring, Column Grids); activeTrades Set state toggling which trade overlays render; zoom (useState(1.0)) and pan ({x,y}) state for viewport transform; isPanning state toggling grab cursor; stageRef/viewportRef/gridRef/gridMajorRef for GSAP transforms; TOOLS array (select/pan/measure/annotate) with activeTool state; hover tooltip state showing overlay title/desc/risk; annotation drawing state with mousedown/mousemove/mouseup handlers; blueprint grid SVG background with minor/major grid lines; risk badge markers (high=red, medium=orange, low=teal) on overlays; ALL_OVERLAYS flattened lookup. CSS prefix cda-.

As a frontend developer, implement the CanvasStatusBar section for the Canvas page. Features: live cursor coordinate simulation using requestAnimationFrame loop with sin/cos movement (coords state {x,y} updating every 80 ticks); scale state (useState(1.0)) updated via wheel event listener (±0.05, clamped 0.25–4.0); resolved toggle state with GSAP elastic.out bounce on resolveRef button; export button with GSAP y/opacity yoyo animation on exportRef; scalePercent display (scale*100 rounded); left info group showing Cursor coords, Scale%, layer count, alert count; right group with Resolve/Export action buttons. Lucide icons: MapPin, ZoomIn, Layers, AlertTriangle, Download, CheckCircle, Crosshair, Scale. CSS prefix csb-.

As a frontend developer, implement the CanvasRightPanel section for the Canvas page. Three-tab panel (tabs state) with: TRADE_SCOPES tab showing 5 trade packages (Structural 94%, MEP 81%, Facade 76%, Groundworks 89%, Internal Fit-Out 65%) each with coverage%, items count, drawings count, area m², and animated progress bar fill; RISK_FLAGS tab showing 6 risk items (rf-001 critical through rf-006 low) with severity badges (critical/#FF6B6B, high/#FF9F1C, medium/#FFE66D, low/#4ECDC4), location string, action button (Resolve/Assign/Flag/Review/Update), and expandable description via ChevronDown/ChevronUp toggle per item (expandedRisk state); NOTES tab with INITIAL_NOTES array showing author initials avatar (SM=Sarah Mitchell QS, etc), role, timestamp, tag chip, note text, and add-note textarea. Lucide icons: AlertTriangle, FileText, List, MapPin, ChevronDown, ChevronUp. CSS prefix crp-.

As a frontend developer, implement the Footer section for the Canvas page. This component already exists from previous pages (Project, Dashboard, Login) — reuse the shared Footer component with framer-motion animated links (motion.a with whileHover color:#F7FFF7), four link columns (Product: Canvas/TradeMatrix/AuditTrail/Dashboard; Company; Resources; Legal), newsletter subscription form with email useState and handleSubmit clearing state, social icons using react-icons/fi (FiTwitter, FiLinkedin, FiGithub, FiInstagram) with framer-motion whileHover rotate:180/color:#FF9F1C, ftr-logo-accent span in #FFE66D, deep teal #1A535C background, ftr-newsletter glassmorphism panel with rgba border. Responsive grid: mobile 1-col, tablet 1.2fr/2fr, desktop 1.4fr/2.5fr. CSS prefix ftr-.

As a frontend developer, implement the Navbar section for the TradeMatrix page. This component uses React hooks (useState, useEffect, useRef, useCallback) and GSAP animations. Key features: SVG logo path draw animation using getTotalLength/strokeDashoffset on mount (1.2s, power2.inOut ease), scroll-detection shadow via window scroll listener setting `scrolled` state, and a magnetic CTA button effect using GSAP that pulls the button element toward the cursor within an 80px radius (35% pull factor) and snaps back with elastic.out easing on mouse leave. Nav links include Landing, Canvas, Dashboard, TradeMatrix, and AuditTrail routes. Note: this component likely already exists from Canvas and Project pages — verify reuse before rebuilding. Page-level dependency on Canvas Navbar task must be chained via depends_on.

As a frontend developer, implement the AuditNavBar section for the AuditTrail page. This reuses the shared Navbar component (may already exist from Canvas page, task 0d3e2acb-36d0-44f7-b9f8-678f9bd6d168). The component uses useState for menuOpen and scrolled states, useRef for logoPathRef, ctaRef, and ctaWrapRef. On mount, a GSAP SVG path draw animation runs on the logo using getTotalLength(), strokeDasharray/strokeDashoffset. A scroll listener sets the nb-scrolled class when scrollY > 10. A magnetic button effect on the CTA uses gsap.to() with elastic.out easing on mousemove/mouseleave. The CTA click triggers a CSS class toggle (nb-cta-clicked) for animation. Nav links include Landing, Canvas, Dashboard, TradeMatrix, and AuditTrail routes. Styles imported from Navbar.css.

Implement WebSocket endpoint for real-time drawing analysis progress updates. Backend: WebSocket route /ws/drawings/{drawing_id}/status that emits events as the AI pipeline progresses through stages (uploaded -> parsing -> trade_allocation -> gap_detection -> complete). Frontend: useDrawingStatus(drawingId) hook that connects to WebSocket and updates local state, driving the ProjectMetadata progress bar animation in real-time rather than polling. Fallback to polling GET /drawings/{id}/analysis-status if WebSocket unavailable. Required for the 'Monitor Analysis' step in the Senior Site Manager user flow (Project page -> ProjectMetadata section).

As a frontend developer, implement the TradeMatrixPanel section for the Project page. Renders a scrollable trade-scope matrix table with: 6 SCOPE_COLUMNS (Foundations/Superstructure/Envelope/Interiors/Services/External Works) as headers; TRADE_ROWS for Structural/MEP/Finishes/Groundworks/Facade/Fit-Out each with color swatch, code (e.g. STR-01), and per-column scope cells showing STATUS_COMPLETE/PARTIAL/MISSING/RISK badges with item counts; row expansion on click revealing trade tags array as pill chips; column totals row; GSAP row stagger entrance animation via useEffect on mount animating each tr from opacity:0/y:8. State: expandedRow tracking which trade row is expanded. Uses useRef for table container. Clicking a trade row highlights it on the drawing canvas (cross-panel interaction note). Horizontal scroll for overflow columns.

As a frontend developer, implement the TradeMatrixHeader section for the TradeMatrix page. This component renders a breadcrumb nav (Dashboard › Highfield Mixed-Use Tower › Trade Matrix) and a heading row with title, subtitle, and animated stat badges. Uses useState for `activeFilter` (default 'all') and useRef maps `indicatorRefs` and `toggleRefs` for filter pill underlines, plus `badgeRefs` array for badge elements. On mount, GSAP animates badges from opacity:0/y:-8/scale:0.92 to visible with stagger:0.08 and back.out(1.4) ease. On filter change, GSAP animates the active underline indicator with scaleX from 0→1. TRADE_FILTERS array defines 7 filter pills (all, structural, mechanical, electrical, civil, architectural, plumbing) each with a count badge and trade-specific color.

As a frontend developer, implement the TradeListSidebar section for the TradeMatrix page. Component uses useState for `query` (search text), `riskFilter` ('All'|'High'|'Medium'|'Low'), and `activeId` (default 'structural'). Imports lucide-react icons (Search, X, Layers, AlertTriangle). GSAP entrance animation on mount fades/slides the `headerRef` in from opacity:0/y:-10. A `useMemo` filters the TRADES array (8 trades: structural, mechanical, electrical, plumbing, civil, fitout, fire, facade) by both text query and risk level. RISK_FILTERS toggles ('All', 'High', 'Medium', 'Low') control `riskFilter`. Each trade card shows name, tag with colored class (tls-tag-structural etc.), scopeCount, risk badge (tls-risk-high/medium/low via getRiskClass helper), and description. Active card highlighted by `activeId` state.

As a frontend developer, implement the CanvasPreview section for the TradeMatrix page. This is a complex 3D/canvas section using @react-three/fiber (Canvas, useFrame, useThree) and THREE.js alongside GSAP. The BlueprintScene component builds scene geometry imperatively: a 10×7 world-unit grid of THREE.Line objects with LineBasicMaterial at 0.18 opacity, outer walls at 0.85 opacity, and 5 internal partitions at 0.55 opacity — all built in a useEffect on a groupRef. A separate highlightRef renders the selected trade highlight geometry. The scene supports `panOffset` and `zoomScale` props for camera control. TRADES array defines 5 trade layers (mechanical, electrical, plumbing, structural, fitout) each with hex color and normalized rgb values. SELECTED_TRADE defaults to mechanical (highlighted). Drawing metadata displayed: DRAWING_NAME ('Level-02-Floor-Plan-Rev-C.pdf') and DRAWING_SCALE ('1:100'). Uses useCallback for pan/zoom interaction handlers.

As a frontend developer, implement the TradeDetailPanel section for the TradeMatrix page. Component uses useState for `expanded` (default true), useRef for `bodyRef`, `gridRef`, `barFillRef`, and `hasAnimated`. Displays TRADE_DATA object for trade M-04 (Mechanical & HVAC Systems, code MECH-04, status 'In Review', risk 'High Risk'). Budget section shows allocated £1,240,000 of £1,500,000 total — `budgetPct` computed as Math.min(allocated/total*100, 100); GSAP animates `barFillRef` width from '0%' to budgetPct+'%' (1.1s, power3.out, delay 0.25s) on expand, reset on collapse via hasAnimated ref guard. GSAP also staggers `.tdp-card` elements in `gridRef` on expand. Team avatars rendered for 4 members (Sarah Lin, Marcus Kelly, Priya Das, Tom Harris) by initials. 8 scopeTags rendered as chips. 4 risk notes rendered with level-based styling (high/medium/low). `formatCurrency` helper formats £ GBP values with toLocaleString.

As a frontend developer, implement the ScopeAllocationGrid section for the TradeMatrix page. This is the most complex data-grid section: ALL_ROWS contains 15 scope items (SC-001 through SC-015) with fields id, description, area, qty, unit, cost, risk (critical/high/medium/low), assignedTo, and status (flagged/in-progress/open/resolved). TEAM_MEMBERS array (6 members) and RISK_ORDER map (critical:0, high:1, medium:2, low:3) support filtering/sorting. Uses useState for filter/sort state, useMemo for derived filtered+sorted row set, useRef for animation targets, and GSAP for row entrance animations. `avatarInitials` helper extracts initials from name strings. Grid columns include risk indicator, scope ID, description, area/qty/unit, cost, assignedTo (with avatar), and status badge. Supports multi-select for ActionBar integration. Status badges styled per state (flagged=red, in-progress=amber, open=blue, resolved=green).

As a frontend developer, implement the Footer section for the TradeMatrix page. Component uses useState for `email` (newsletter input). Renders four link columns: Product (Canvas, Trade Matrix, Audit Trail, Dashboard), Company (About Us, Careers, Blog, Contact), Resources (Documentation, API Reference, Tutorials, Community), and Legal (Privacy Policy, Terms of Service, Cookie Policy, Compliance). Social icons rendered using react-icons/fi (FiTwitter, FiLinkedin, FiGithub, FiInstagram) as anchor links. Each nav link wrapped in framer-motion `motion.a` with whileHover color transition to #F7FFF7 (duration 0.3s). Newsletter form with email input and handleSubmit that clears email state on submit. Brand logo displays 'shiny-' + accent span '-drawing'. Note: this component likely already exists from Dashboard, Project, and Canvas pages — verify reuse before rebuilding.

As a frontend developer, implement the AuditPageHeader section for the AuditTrail page. The component renders a static header with a four-level breadcrumb nav (Dashboard > Projects > Westfield Tower > Audit Trail) using aph-breadcrumb-item and aph-breadcrumb-sep classes. The main content row (aph-content) contains a title block with an h1 (aph-page-title with aph-page-title-em span) and subtitle chips row showing PROJECT_NAME ('Westfield Tower — PCSA Phase 2') and DRAWING_FILE ('A-001_Rev04_ArchitecturalFloorPlans.pdf') each with inline SVG icons. The meta block shows an aph-status-badge with animated aph-status-dot and a timestamp display (LAST_UPDATED = 'Fri 16 May 2026, 14:32 UTC'). Styles from AuditPageHeader.css.

As a frontend developer, implement the AuditSummaryCards section for the AuditTrail page. Uses useState(null) for activeFilter. Renders three interactive button cards from CARDS array: 'total' (47 gaps, trend up), 'high' (14 high severity, trend up), and 'resolved' (29 resolved, trend down). Each card toggles activeFilter on click and sets aria-pressed. Card variants apply CSS modifier classes (asc-card--total, asc-card--high, asc-card--resolved) and asc-active when selected. A TrendIcon sub-component renders directional chevron SVGs with #FF6B6B (up) or #2EB872 (down) stroke colors. Each card contains an icon (SVG), count, label, sub-label, trend icon, and trendText. Styles from AuditSummaryCards.css.

As a frontend developer, implement the AuditFilterBar section for the AuditTrail page. State managed via useState: severity ('all'), selectedTrades ([]), riskCategory ('all'), tradeOpen (false). A dropdownRef with useRef and handleClickOutside via useCallback closes the trade dropdown on outside clicks using a mousedown event listener registered only when tradeOpen is true. Trade packages dropdown (7 options with color swatches) uses toggleTrade() to add/remove IDs from selectedTrades array. SEVERITY_OPTIONS and RISK_CATEGORIES render as select/radio-style controls. Sub-components: ChevronIcon (rotates when open via afb-open class), ClearIcon (X path SVG), CheckmarkIcon (checkmark path SVG). Active trade chips are shown with a remove button. Styles from AuditFilterBar.css.

As a frontend developer, implement the Footer section for the AuditTrail page. This reuses the shared Footer component (may already exist from Canvas page task 7cc1170c-d78a-4764-92bf-ddf60c823ab3 and TradeMatrix task 88f70c3a-3775-47aa-883d-fc54a5b45ff8). Uses useState for email input state with handleSubmit resetting email to ''. Renders four link columns (Product, Company, Resources, Legal) each with motion.a elements from framer-motion using whileHover={{ color: '#F7FFF7' }} and 0.3s transition. Social icons row uses FiTwitter, FiLinkedin, FiGithub, FiInstagram from react-icons/fi. Newsletter signup form with email input and Subscribe button. ftr-logo with shiny-drawing branding and ftr-logo-accent span. Styles from Footer.css.

As a frontend developer, implement the ActionBar section for the Project page. Renders a sticky bottom action bar with: 'Export Scope Package' button with ExportIcon SVG triggering export flow; 'Download PDF Report' button with PdfIcon SVG; 'Share' button with ShareIcon SVG that toggles a share dropdown popover containing EmailIcon/LinkIcon/SlackIcon share options; analysis-complete status chip ('Analysis complete — PCSA-2024-BLQ-07') and 'READY TO EXPORT' badge. State: shareOpen (boolean) controlling dropdown visibility via useState. GSAP entrance animation on mount: bar slides up from y:20/opacity:0 using useEffect with ref. Uses useCallback for button handlers. Share dropdown closes on outside click via useEffect document listener. Custom SVG icon components: ExportIcon, PdfIcon, ShareIcon, EmailIcon, LinkIcon, SlackIcon all defined inline.

As a frontend developer, implement the ActionBar section for the TradeMatrix page. Component manages useState for `selectedCount` (default 3), `reviewedIds` array, `highlighted` boolean, and `activeAction` string. Five action buttons each have dedicated useRef (btnHighlightRef, btnAssignRef, btnReviewRef, btnExportRef, btnCompareRef). `animateClick` helper runs a GSAP timeline: scale 0.94 → 1 with elastic.out(1.2, 0.5), plus a radial box-shadow pulse from full color to transparent. Handlers: handleHighlight toggles `highlighted` state and updates canvas label ('Highlight on Canvas' / 'Clear Canvas Highlight') with icon change (◈/✕); handleReview appends to `reviewedIds`; handleAssign/Export/Compare trigger color-coded GSAP pulses (teal, red, amber, yellow, teal respectively). handleSelectAll sets count to 12; handleClearAll sets to 0. `hasSelection` guards all actions — buttons disabled when no selection. activeAction resets to null after 800ms timeout.

As a frontend developer, implement the AuditTableHeader section for the AuditTrail page. Accepts props: onSort, sortKey, sortDir, totalResults (default 24), selectedCount (default 0), allSelected (false), onSelectAll. Internal state via useState for internalSortKey ('created_date'), internalSortDir ('desc'), and checked. Supports controlled (external props) and uncontrolled (internal state) sort modes. Seven columns defined in COLUMNS array (gap_id, risk_description, affected_trade, severity, recommended_action, status, created_date) — all sortable except recommended_action. getSortClass() applies ath-sorted and ath-sorted-asc/ath-sorted-desc classes. Sub-components: ChevronUp and ChevronDown SVG polyline icons. Meta bar shows total results count and selected count. Checkbox column for select-all. Styles from AuditTableHeader.css.

As a frontend developer, implement the ExportSection section for the Project page. Renders a full export configuration panel with: FORMAT_OPTIONS radio-style selector (PDF/Excel/JSON) with badge labels, file extension, description text, and SVG icon — activeFormat state controls selected format; es-naming-block with controlled fileName input (useState), safeFileName computed by trimming/replacing spaces with hyphens, fullFileName preview label appending activeFormatObj.ext; INCLUDE_OPTIONS checkboxes (Drawing Annotations/Risk Flags/Trade Scope Matrix/Audit Trail Log) tracked via included object state with toggleIncluded handler; 'Export PDF' primary button and 'Preview Report' secondary link; exporting/exported boolean states controlling button loading spinner and success state with GSAP scale bounce on exportBtnRef; GSAP stagger entrance on mount animating '.es-format-block, .es-naming-block, .es-options-block, .es-action-block' from opacity:0/y:18. Uses useRef for exportBtnRef and rootRef.

As a frontend developer, implement the AuditTable section for the AuditTrail page. Uses useState for selectedRows and activeRow, useRef for rowRefs map, and GSAP for row entrance animations (staggered gsap.fromTo with opacity/y/duration on mount via useEffect). AUDIT_ROWS contains 12+ gap entries (GAP-001 through GAP-012+) each with id, risk description, trades array, severity (High/Medium/Low), actions array, resolved boolean, and date. Rows render severity badges with variant classes, trade package chips, action button pills (Review/Assign/Escalate/Resolve), and a resolved checkmark state. Row click sets activeRow for detail panel integration. Checkbox per row tracks selectedRows set. Resolved rows apply a visual resolved style modifier. Styles from AuditTable.css. Imports gsap from 'gsap'.

As a frontend developer, implement the AuditDetailPanel section for the AuditTrail page. Uses useState for open/closed panel state, useRef for panel DOM reference, and GSAP for slide-in/slide-out animation (gsap.fromTo with x offset). Imports Lucide icons: X, AlertTriangle, FileText, Layers, HardHat, ShieldAlert, CheckSquare, Paperclip, ChevronRight, Zap, Wrench, Droplets, Wind, Bolt, LayoutGrid, Eye. SAMPLE_GAP data includes id (GAP-0047), title, severity ('high'), description, scopeImpact, affectedTrades array (4 trades each with name, sub, and Lucide icon component), riskAssessment string, riskLevel, and recommendedActions array (4 action strings). Panel renders sections for trade description, scope impact, affected trades with icons, risk assessment, recommended actions checklist, and attachments. Styles from AuditDetailPanel.css.

As a frontend developer, implement the AuditActionBar section for the AuditTrail page. Uses useState: selectedCount (hardcoded to 3) and resolvedFeedback (false). hasSelection derived boolean gates button disabled states. handleMarkResolved sets resolvedFeedback to true then resets after 1800ms via setTimeout, toggling the aab-btn-success class on the primary button for visual feedback. Three bulk action buttons: 'Bulk Mark Resolved' (CheckCircle icon, primary style, success feedback state), 'Bulk Assign to Trade' (Users icon, secondary style), 'Bulk Export Selection' (Download icon, accent style) — all disabled when no selection. A View Drawing anchor link navigates to /Canvas with aab-view-icon-pulse wrapper around Eye icon. Selection counter badge uses aab-has-selection modifier class and aab-counter-dot. Styles from AuditActionBar.css. Imports from lucide-react.

As a frontend developer, implement the AuditExportModal section for the AuditTrail page. State managed via useState: isOpen (false), selectedFormat ('pdf'), includeResolved (false), notes (''), selectedTrades (['all']), showPreview (false), isExporting (false). maxNotes constant = 280 for textarea character limit. handleTradeChip via useCallback toggles trade chip selections — selecting 'all' clears others; deselecting all reverts to ['all']. handleExport via useCallback sets isExporting true, simulates 1800ms export delay then closes modal. handleOverlayClick closes on backdrop click via e.target === e.currentTarget check. FORMAT_OPTIONS: pdf, csv, xlsx each with iconClass, iconLabel, desc. TRADE_PACKAGES: 8 options including 'all'. Preview rows derived from current state show Format, Trade Scope, Include Resolved, Total Gaps, Notes. Modal trigger button (aem-trigger-btn) opens the modal. Styles from AuditExportModal.css.