solar-invoice

As a frontend developer, implement the LandingHero section for the Landing page. Uses a custom `useMousePosition` hook tracking global mousemove. Contains a `MagneticButton` component that uses a ref to compute button center, calculates proximity distance (maxDist=200), and applies spring-animated x/y offsets (strength up to 12px). On click, spawns 10 particles via `setParticles` with randomized angles, speeds (40–100), and colors (#1A73E8, #FFCA28, #FF7043, #FFB300) that animate outward and are cleaned up after 700ms via setTimeout. Particles render via AnimatePresence as fixed-position motion.divs. The hero itself includes animated headline, subheadline, and CTA buttons wired to framer-motion entrance animations.

As a frontend developer, implement the GalaxyMap section for the Landing page. Uses @react-three/fiber Canvas with OrbitControls, Float, and Line from @react-three/drei, plus THREE.js directly. Renders 5 FEATURES as 3D `StarMesh` nodes at defined [x,y,z] positions (e.g. Dashboard at [0,1.2,0], Invoicing at [2.2,0.3,-0.8]). Each StarMesh uses `useFrame` to animate `emissiveIntensity` (0.6+sin pulse, 2.5 on hover) and a glow sprite with scale oscillation. CONNECTION_PAIRS (8 pairs) are rendered as 3D Line elements between feature positions. Clicking a node sets `selectedFeature` state and triggers an AnimatePresence overlay panel (outside the Canvas) showing feature name, icon, description, connections list, and a CTA link. `hoveredIndex` drives cursor:pointer and emissive boost. Component is wrapped in a motion.div for section entrance animation.

As a frontend developer, implement the FeatureHighlights section for the Landing page. Renders 6 feature cards from a FEATURES array: Real-Time Dashboard, Invoice Generator, Client Management, PDF Export, Multi-User Roles, GST Support — each with a title, description, link/linkText, and icon type. Each card uses `useInView` from framer-motion for scroll-triggered entrance animations. Contains a `FeatureIcon` switch component rendering unique SVG icons per type (dashboard, invoice, clients, pdf, roles, gst). Cards link to internal routes (/Dashboard, /Invoice Generator, /Clients, /PDF Export, /Company, /Invoices). Uses a `useRef` on each card for intersection tracking. Grid layout collapses responsively for mobile.

As a frontend developer, implement the UserPersonas section for the Landing page. Renders 3 persona cards (Owner, Manager, User) from a `personas` array, each with role, variant, badgeClass, avatarClass, color (#1A73E8, #FF7043, #FFCA28), description, and a `permissions` array of 5 items. Uses AnimatePresence for tab-switching between personas via `useState`. Each persona card shows a role icon (ShieldIcon for Owner, BriefcaseIcon for Manager, UserIcon for User), a permissions list rendered with CheckIcon SVGs, and a `learnHref` CTA. Includes `up-badge--owner/manager/user`, `up-avatar--owner/manager/user`, and `up-perm-icon--owner/manager/user` CSS variant classes for color theming per role.

As a frontend developer, implement the TrustBadges section for the Landing page. Contains 6 custom inline SVG partner logos: LogoTechFlow (circle + text), LogoFinBridge (rects + text), LogoCloudLedger (cloud path + text), LogoPayAxis (polygon + text), LogoGSTHub (rect with 'G' glyph + text), LogoInvoiceIQ (document rect + text). Uses `useInView` from framer-motion for scroll-triggered entrance. Partner logos array maps `{ name, Component }` entries. Logos are rendered in a scrolling marquee or grid with grayscale/opacity treatment. Section also includes trust stat counters or badge chips. Uses `useRef` for the inView anchor element.

As a frontend developer, implement the HowItWorks section for the Landing page. Contains 4 STEPS: Sign Up & Configure, Add Clients, Generate Invoices, Download & Send — each with a number, title, and description. Uses GSAP with dynamically imported ScrollTrigger (only on desktop via matchMedia min-width:768px) to animate step entrance (opacity 0→1, y 30→0) and a progress bar ref (`progressRef`). Each step's number element (`.hiw-step-number`) is targeted separately. Uses a `TypewriterText` sub-component with `useEffect`+`setInterval` that types characters at 12ms intervals when `trigger` prop is true, shows a `.hiw-cursor` span during typing, and hides it 600ms after completion. `visibleSteps` is a Set tracked via `useState` to control which steps have triggered their typewriter. Step refs collected via `setStepRef` callback, arrow refs via `setArrowRef`.

As a frontend developer, implement the Testimonials section for the Landing page. Renders 6 testimonial cards from a `testimonials` array with fields: name, role, company, quote, rating (all 5), initials, avatarClass (tm-avatar--1 through --6). Each card is a `TestimonialCard` component using `useInView` (once:true, margin:-60px) for scroll-triggered entrance (opacity 0→1, y 40→0). Cards have `isHovered` state for 3D tilt/lift effect. Includes a `StarIcon` SVG component rendering filled stars. Avatar initials are displayed in colored circles via `tm-avatar--N` CSS classes. Quotes are from realistic Indian business personas (Priya Sharma/Sharma Textiles, Rajesh Mehta/GreenLeaf Organics, Ananya Desai/Ananya Creative Studio, Vikram Patel/Patel & Sons Exports, Meera Krishnan/BlueWave Solutions, Arjun Nair/NexGen IT Services). Uses `motion.div` with `cm-card-perspective` class for 3D CSS perspective wrapper.

As a frontend developer, implement the PricingTeaser section for the Landing page. Renders 3 pricing tiers from TIERS array: Starter (₹499/mo, 4 features), Professional (₹1499/mo, 5 features, implied popular), Enterprise (₹3999/mo, 5 features, `enterprise:true` flag). Uses a `useCountUp` custom hook with requestAnimationFrame, cubic ease-out (`1 - (1-progress)^3`), and configurable duration (1500ms) — triggered by `shouldStart` prop. `PriceDisplay` wraps `useCountUp` and formats via `toLocaleString('en-IN')` with ₹ prefix. `AnimatedCheckmark` uses framer-motion `strokeDashoffset` animation (20→0) with staggered `delay` prop per feature. `TierCard` uses `cardVariants` with hidden/visible states and `inView` prop. All CTAs link to `/Login`. Uses `useInView` on the section container to trigger count-up and checkmark animations simultaneously.

As a frontend developer, implement the LandingCTA section for the Landing page. Uses `useInView` (once:true, margin:-80px) and `useState` for `gradientPhase`. On inView, triggers a `motion.section` background color transition from flat `#E8F0FE` to a three-stop gradient (`#E8F0FE → rgba(255,202,40,0.12) → #E8F0FE`) over 1.2s. Headline 'Ready to streamline your invoicing?' is split character-by-character via `HEADLINE.split('')` and rendered as individual `motion.span` elements with `lc-char` class, animated via `containerVariants` (staggerChildren: 0.02) and `charVariants` (opacity 0→1, y 12→0, duration 0.3). Subheadline 'Join 500+ businesses using BillFlow' fades in at delay 0.7s. Button group fades in at delay 0.9s. Includes parallax bg layer (--scroll * -0.25px) with `lc-bg-orb--1/2/3` blobs and mid layer (--scroll * -0.45px) with `lc-mid-ring--1/2` ring divs.

As a frontend developer, implement the Footer section for the Landing page. Contains 4 `linkColumns` (Product, Resources, Company, Legal) each with 4 links. Uses a `LinkItem` component with `isHovered` state driving a `motion.div` underline that animates `scaleX` 0→1 on hover (duration 0.3, easeInOut). Uses a `LinkColumn` component with `colHovered` state (onHoverStart/End) that cascades color animation (#757575→#1A73E8) to child link wrappers with staggered delays (`i * 0.08`). Includes `LinkedInIcon`, `TwitterIcon` SVG components for social links. Footer bottom bar shows copyright text and BillFlow branding. Uses `useInView` from framer-motion for entrance animation of the footer grid. Note: this component may already exist from a previous page if shared across pages.

As a frontend developer, implement the Navbar section for the Login page. This component reuses the Navbar already built for the Landing page (task 7b0d52a6). It uses useState for `scrolled`, `mobileOpen`, and `activeLink` state, useEffect for scroll listener and body overflow lock, and framer-motion for animated SVG logo (logoPathVariants, logoFillVariants with pathLength draw), hamburger-to-X transforms (hamburgerTop/Mid/Bot variants), and a spring-driven mobile drawer (drawerVariants) with AnimatePresence overlay. NAV_LINKS array includes Landing, Dashboard, Invoices, Clients, Company routes. Apply nb-root/nb-solid/nb-transparent class toggling based on scroll position.

Implement REST API endpoints for CompanyProfile management: GET /api/company (fetch profile), PUT /api/company (update profile — Owner only), including fields: name, GSTIN, address, logo_url, bank_details. Apply RBAC middleware so only Owner role can modify tax settings and company profile. Used by the Company page frontend sections.

Implement REST API endpoints for Client management: GET /api/clients (searchable list with query param), GET /api/clients/:id, POST /api/clients (Owner and Manager), PUT /api/clients/:id (Owner and Manager), DELETE /api/clients/:id (Owner only). Fields: name, email, phone, address, tax_id. Apply RBAC so Manager cannot delete. Used by Clients page frontend sections and Invoice Generator client selector.

Configure the Next.js app as a Progressive Web App (PWA): add a web app manifest (manifest.json) with BillFlow branding, icons, theme_color #1A73E8, and display standalone. Set up a service worker using next-pwa or a custom Workbox configuration for offline caching of static assets. Add appropriate meta tags in _document.tsx. Ensure lighthouse PWA audit passes for installability and offline support.

Create a centralized API client module for the Next.js frontend to communicate with the Node.js backend. Implement typed fetch wrappers or an Axios instance with: base URL from environment variables, automatic JWT token injection from session state, global error handling (401 redirect to Login, 403 permission error toast), and typed response interfaces for all API resources (Company, Client, Invoice, LineItem, Dashboard). Export individual service modules: companyService, clientService, invoiceService, dashboardService. This is a shared utility needed by all page sections that fetch real data.

As a frontend developer, implement the LoginHero section for the Login page. Renders a static hero with an animated solar SVG icon mark (three concentric circles at cx=28/cy=28 plus 8 radially computed ray lines at 45° increments using Math.cos/Math.sin, stroked in #FFCA28). Displays lh-headline with 'Welcome back to solar-invoice' emphasis span, an lh-subheadline paragraph, and a horizontal lh-trust-row with three trust badges (GST Compliant, Bank-level Security, Free to Start) each containing an inline SVG icon and label separated by lh-trust-sep dividers. All styling via LoginHero.css with lh- BEM classes.

As a frontend developer, implement the LoginForm section for the Login page. Contains multiple SVG icon sub-components: MailIcon, LockIcon, EyeIcon, EyeOffIcon, CheckIcon, CircleCheckIcon, CircleAlertIcon, ArrowRightIcon, and AlertIcon. Uses useState to manage email/password field values, validation states (success/error per field via lf-input-status--success/lf-input-status--error classes), password visibility toggle (EyeIcon/EyeOffIcon swap), remember-me checkbox with CheckIcon, and form-level error banner with AlertIcon. Submit button includes ArrowRightIcon and loading/disabled states. Includes a 'Forgot password?' link. All input wrappers use lf-input-icon for leading icons and lf-input-status for trailing validation icons. Styled via LoginForm.css with lf- BEM classes.

As a frontend developer, implement the LoginDivider section for the Login page. A minimal purely static presentational component rendering a ld-root container with a centered ld-inner flex row containing two ld-line divider bars flanking an ld-text span with the label 'Or continue with'. No state or animation. Styled via LoginDivider.css with ld- BEM classes.

As a frontend developer, implement the LoginSignupCTA section for the Login page. Renders two social OAuth button anchors in an lsc-buttons-row: 'Continue with Google' featuring a multi-path GoogleIcon SVG with brand colors (#4285F4, #34A853, #FBBC05, #EA4335), and 'Continue with GitHub' featuring a GitHubIcon SVG with currentColor fill. Both have aria-label attributes and onClick preventDefault stubs. Below the buttons, an lsc-signup-row paragraph links to /Register ('Sign up for free' via lsc-signup-link). A final lsc-terms-note paragraph contains inline anchor links to Terms of Service and Privacy Policy pages. Styled via LoginSignupCTA.css with lsc- BEM classes.

As a frontend developer, implement the Footer section for the Login page. This component reuses the Footer already built for the Landing page (task f1eae798). Uses useState for per-link hover state and per-column colHovered state, and framer-motion useInView for scroll-triggered reveal. Renders four LinkColumn components (Product, Resources, Company, Legal) each with motion.div wrappers animating child link color from #757575 to #1A73E8 on column hover with staggered delay (i * 0.08s). Each LinkItem uses a motion.div with scaleX underline animation. Social icons include LinkedInIcon and TwitterIcon SVGs. Styled via Footer.css with ftr- BEM classes.

Implement REST API endpoints for Invoice management: GET /api/invoices (list with filters), GET /api/invoices/:id, POST /api/invoices (auto-increment invoice_number), PUT /api/invoices/:id (Owner and Manager; enforce invoice_number non-editable once finalized), PATCH /api/invoices/:id/status (mark Paid only with payment_date), DELETE /api/invoices/:id (Owner only). Business logic: enforce that invoice cannot be marked Paid without a recorded payment_date; invoice_number must be unique and non-editable once finalized. Used by Invoices, Invoice Generator, and PDF Export page sections.

As a frontend developer, implement the Navbar section for the Invoice Generator page. This component may already exist from the Landing and Login pages (task IDs: 7b0d52a6-72f4-4be9-a97b-e5b8de876953, 8b364ba6-88e0-4515-bdb4-abc2c9f3df6f). Verify reusability before reimplementing. The Navbar uses useState for `scrolled`, `mobileOpen`, and `activeLink` states. It attaches a passive scroll listener via useEffect to toggle `nb-solid`/`nb-transparent` CSS classes. A second useEffect locks `document.body.style.overflow` when the mobile drawer is open. The logo SVG uses framer-motion `motion.circle` with `logoPathVariants` (animated pathLength draw) and `logoFillVariants` (delayed fillOpacity reveal). Hamburger button animates three bars using `hamburgerTop`, `hamburgerMid`, `hamburgerBot` variants (rotate/translate/opacity). Mobile drawer uses `drawerVariants` (spring x: 100%→0) with an `overlayVariants` backdrop. NAV_LINKS array renders: Landing, Dashboard, Invoices, Clients, Company. Active link is tracked via `activeLink` state. Import Navbar.css.

Implement REST API endpoints for LineItem management nested under invoices: POST /api/invoices/:id/lineitems, PUT /api/invoices/:id/lineitems/:lid, DELETE /api/invoices/:id/lineitems/:lid. Implement the Calculation Engine server-side: ItemTotal = Qty * Price, Subtotal = sum(ItemTotals), Tax = Subtotal * TaxRate, Total = Subtotal + Tax - Discount. Ensure all computed fields are recalculated and stored on the Invoice on every line item mutation. Fields: description, quantity (integer), unit_price (decimal), tax_rate, total_price.

Implement REST API endpoints to power the Dashboard page: GET /api/dashboard/summary (returns Total Revenue, Pending Payments totals), GET /api/dashboard/monthly-trends (returns monthly billing data for the bar chart, last 12 months). Aggregate from Invoice table. Apply auth middleware. Used by Dashboard page frontend sections.

Implement a PDF generation endpoint: GET /api/invoices/:id/pdf — generates a print-ready PDF invoice from an Invoice ID using a server-side PDF library (e.g., Puppeteer or PDFKit). The PDF must include: company profile (name, GSTIN, logo, bank details), client details, all line items with quantities/prices, GST breakdown (CGST + SGST or IGST), subtotal, discount, and total in INR format. Returns the PDF as a binary stream with Content-Type: application/pdf. Used by PDF Export page frontend sections.

As a frontend developer, implement the InvoiceGeneratorHero section for the Invoice Generator page. The section renders a `<section className='igh-root'>` containing: two decorative CSS elements (`igh-accent-shape`, `igh-accent-line`), a breadcrumb `<nav>` with three items (Dashboard → Invoices → Create Invoice) using an inline `ChevronRight` SVG component, and a headline row (`igh-headline-row`) with a heading (`igh-title`) that includes an inline `InvoiceIcon` SVG and per-letter animated spans (`igh-title-letter`) where each letter's `animationDelay` is computed as `i * 0.035s` for a staggered CSS entrance effect. A subtitle paragraph describes the four-step GST-compliant invoice flow. A status badge (`igh-status`) renders a dot and 'Draft' label. TITLE_TEXT is the static string 'Create Invoice' split into `letters` array. No state or framer-motion — purely CSS-driven animations. Import InvoiceGeneratorHero.css.

As a frontend developer, implement the Footer section for the Invoice Generator page. This component may already exist from the Landing and Login pages (task IDs: f1eae798-be9a-468b-aaee-8da0455dc45e, 8e9df625-7b8f-4abc-8dd6-14b57eb310fa). Verify reusability before reimplementing. The Footer uses `useInView` from framer-motion for scroll-triggered entrance animations and renders four `LinkColumn` components from the `linkColumns` array: Product, Resources, Company, Legal — each with four anchor links. `LinkColumn` uses `useState` for `colHovered` and `motion.div` with `onHoverStart`/`onHoverEnd` to animate child link color to `#1A73E8` with staggered `delay: i * 0.08`. `LinkItem` uses `useState` for `hovered` and renders a `motion.div` underline that animates `scaleX` 0→1 on hover. Social icons include inline SVG components: `LinkedInIcon` and `TwitterIcon`. Import Footer.css.

As a frontend developer, implement the PDFExportHero section for the PDF Export page. This section renders a full Three.js particle field background using ThreeParticleField component with nine floating PlaneGeometry meshes (1.0×1.4) that drift and oscillate using per-mesh userData speed/drift/amplitude properties animated in a requestAnimationFrame loop. The hero displays INVOICE_DATA (INV-2024-0087, Arjun Enterprises, ₹67,968 total) as a styled invoice preview card, alongside STATS chips (2 sec avg export time, A4/Letter formats, GST ready). Includes DownloadIcon and InvoicesIcon inline SVG components. The Three.js renderer uses alpha:true with DevicePixelRatio capped at 2. Apply PDFExportHero.css for layout, responsive breakpoints, and glassmorphism card styling over the 3D background.

As a frontend developer, implement the PDFExportForm section for the PDF Export page. This section provides a multi-field invoice selection form backed by MOCK_INVOICES (five entries: INV-2024-001 through INV-2024-005 with real Indian client names, amounts in ₹ INR, and Paid/Pending/Overdue statuses) and CLIENT_LIST dropdown. The form includes a SearchIcon-decorated invoice number text input with live lookup that resolves to the mock data, a CalendarIcon date-range picker pair, and a UsersIcon client dropdown with ChevronDownIcon. On valid selection the form shows a resolved invoice detail card with CheckCircleIcon confirmation; on invalid input it shows an AlertCircleIcon error state. A RefreshIcon reset button clears all fields. Uses useState and useCallback hooks; manages invoiceId, dateFrom, dateTo, client, resolved invoice, and error state. Apply PDFExportForm.css for field styling, dropdown, validation states, and responsive layout.

As a frontend developer, implement the PDFExportPreview section for the PDF Export page. This section renders a zoomable invoice preview using a @react-three/fiber Canvas with a DecorativeScene containing FloatingGrid (torusGeometry r=4, wireframe #1A73E8, slow rotation via useFrame), and three SmallRing meshes at different positions/speeds/colors (FFCA28, FF7043, 1A73E8) animated per-frame. The invoice preview card renders INVOICE data (INV-2025-0042, Solar-Invoice Pvt Ltd, Rajesh Electricals, five line items including Solar Panel Installation ₹1,80,000 and AMC ₹6,000) with formatINR helper using en-IN locale. Subtotal, CGST 9%, SGST 9%, and grandTotal are computed at module level. A ZOOM_LEVELS array [0.6, 0.75, 1.0, 1.25, 1.5] drives zoom state toggled via UI buttons. Wrapped in React Suspense. Apply PDFExportPreview.css for preview card layout, zoom controls, GSTIN display, and responsive scaling.

As a frontend developer, implement the PDFExportSettings section for the PDF Export page. This section renders four settings cards: (1) Page Size card with PageIcon — radio toggle between A4 and Letter (useState pageSize); (2) Margins card with MarginIcon — four numeric inputs (top/right/bottom/left, clamped 0–60mm) using handleMarginChange with useState margins; (3) Font Size card with FontIcon — a custom range slider (8–18pt) with sliderPct computed for fill width, useState fontSize; (4) Field Visibility card with FieldIcon — six FIELD_TOGGLES rendered as toggle switches (logo, notes, paymentTerms, gstBreakdown, signature, bankDetails — first four default on) using useState fields object; (5) Watermark card with WatermarkIcon — master enable toggle useState watermarkEnabled, text input useState watermarkText defaulting to 'DRAFT', and opacity slider useState watermarkOpacity (0–100). Uses useId for accessible label-input associations. Apply PDFExportSettings.css for card layout, toggle switch styling, range slider fill, and responsive grid.

As a frontend developer, implement the PDFExportActions section for the PDF Export page. This section renders four action buttons: Download PDF (primary, DownloadIcon), Preview (secondary, EyeIcon), Email Invoice (tertiary, MailIcon), and Save Template (tertiary, BookmarkIcon). The Download button triggers a simulated async download flow: useState isDownloading drives a progress bar animation via useState downloadProgress incremented through setInterval in progressTimerRef, completing at 100% before resetting. A toast notification system uses useState toast ({type, message}) and useState toastVisible with TOAST_DURATION=4000ms auto-dismiss via toastTimerRef useRef. Toast variants render CheckCircleIcon (success), AlertCircleIcon (error), or InfoIcon (info) with XIcon manual dismiss. All timers are cleaned up in useEffect on unmount. Apply PDFExportActions.css for button layout, progress bar, toast positioning (fixed bottom-right), and responsive stacking.