Tilers Hub

# Tilers Hub

## Overview
A Next.js 14 application for connecting tilers with potential clients. The app uses Supabase for backend services (authentication, database, storage).

## Tech Stack
- **Frontend**: Next.js 14 with TypeScript
- **Styling**: Tailwind CSS
- **Backend**: Supabase (Authentication, PostgreSQL Database, Storage)
- **Package Manager**: npm

## Project Structure
- `/app` - Next.js App Router pages
- `/components` - Reusable React components
- `/lib` - Utility functions and Supabase client
- `/supabase/migrations` - Database migration files

## Key Features

### Post Task Flow
The task posting flow is a 3-step wizard:
1. **Project Info**: Collects project address and starting date
2. **Services**: Add multiple tiling services with detailed specifications
3. **Review**: Preview and publish the task

Supported service types:
- **Floor Tiling**: Floor, material, tile size, area, skirting, screed, nosing, demolition
- **Wall Tiling**: Same as floor tiling with wall-specific context
- **Staircase Tiling**: Steps, step length, top, riser, landings, edge finishing
- **Bathroom Tiling**: Wall area, floor area, screed, nosing, 45-degree cuts
- **Pantry/Backsplash**: Material, area, pantry length, shape, edge finish
- **Other**: Free-form description

Each service section supports:
- Image upload (stored in Supabase Storage)
- Additional notes field

### Tiler Profile Customization
The tiler profile system (`/profile/setup`) provides a comprehensive setup form:

**Photo Uploads:**
- Cover photo at the top of profile (stored in `profile-covers` bucket)
- Circular profile photo with overlay upload button (stored in `profile-avatars` bucket)
- Instant upload feedback and preview

**Basic Information:**
- Full name, WhatsApp number (required)
- NIC number for verification (not shown publicly)
- Bio/About section
- District and city location
- Business address
- Years of experience

**Services & Rates:**
- Toggle services on/off with checkboxes
- Set custom rates for each enabled service (LKR per unit)
- 9 service types: Floor Tiling, Wall Tiling, Staircase Tiling, Bathroom Tiling, Pantry/Backsplash, Waterproofing, Screed, Demolition, Nosing

**Working Areas:**
- Select multiple districts where tiler can work
- Visual tag-style selection UI

**Certificates & Qualifications:**
- Add certificates with title, issuer, and image upload
- Stored in `certifications` table and `certifications` storage bucket
- Delete certificates with confirmation
- Displayed on profile page

**Profile Display (`/profile`):**
- Cover photo header with avatar overlay
- Services with rates in card format
- Certificates section with image lightbox
- Portfolio gallery (horizontal scroll)
- Years of experience and completed jobs count

Public tiler profile page (`/tilers/[id]`) - mobile-first design:
- **Profile header**: Circular avatar, name, location with pin icon, star rating
- **Request Quote button**: Prominent CTA button linking to WhatsApp
- **About Me section**: Bio text with phone and email contact info
- **My Skills section**: 2-column grid with green checkmark badges showing services offered
- **Portfolio section**: Horizontal scrolling gallery with lightbox view
- **Reviews section**: Reviewer cards with avatar, name, service type, date, and comment
- **Experience footer**: Years of experience and completed jobs count

### Admin Dashboard
Secure admin panel at `/admin` for managing website content. Only users with `is_admin=true` can access.

Features:
- **Dashboard Overview**: Stats cards showing total users, tilers, tasks, blog posts, and guides
- **Users Management** (`/admin/users`): View all profiles, search, filter by role, verify/unverify tilers
- **Blog Posts** (`/admin/blog`): Create, edit, publish/unpublish, and delete blog articles
- **Guides** (`/admin/guides`): Create step-by-step how-to guides with dynamic step builder
- **Tasks** (`/admin/tasks`): View all tasks, change status, delete inappropriate tasks

To grant admin access, set `is_admin = true` in the profiles table for the user.

### Database Tables
- `profiles` - User profiles with role, contact info, availability settings, is_admin flag
- `tiler_services` - Individual service offerings with pricing
- `tiler_portfolio` - Work samples gallery
- `certifications` - Professional certifications
- `tasks` - Posted tiling jobs
- `task_sections` - Individual service requirements within tasks
- `bids` - Tiler bids on tasks
- `conversations` / `messages` - In-app messaging
- `blog_posts` - Admin-managed blog articles
- `guides` - Admin-managed how-to guides with JSON steps

## Environment Variables Required
- `NEXT_PUBLIC_SUPABASE_URL` - Supabase project URL
- `NEXT_PUBLIC_SUPABASE_ANON_KEY` - Supabase anonymous key

## Running the App
The development server runs on port 5000:
```bash
npm run dev
```

## Deployment
- Build command: `npm run build`
- Start command: `npm start`

## Supabase Edge Functions
Located in `/supabase/functions/`:
- `place-bid` - Handles bid placement with tiler role validation, prevents duplicate bids, and validates amounts

## Recent Changes
- **Jan 1, 2026**: Fixed tiler profile name display - now shows full_name first, then display_name, with proper fallback. Request Quote now starts in-app conversations instead of WhatsApp redirect. Created `/messages/new` page for direct messaging. Performance improvements: modern image formats (avif/webp), caching headers, compression, preconnect hints.
- **Jan 1, 2026**: Production readiness for AdSense - Added privacy policy with advertising disclosure, terms of service with metadata, ads.txt placeholder, AdSense script placeholder in layout, added legal pages to sitemap, configured autoscale deployment with standalone server.
- **Jan 1, 2026**: Performance optimizations - Next.js Image config for Supabase, skeleton loading components, memoized components, pagination on tilers page, optimized Supabase queries.
- **Jan 1, 2026**: Optimized public tiler profile (`/tilers/[id]`) with cover photo header, services with rates display, service images in portfolio, and certificates section with images.
- **Jan 1, 2026**: Added service image uploads for each selected service - images are stored in `service_rates` JSON and displayed in portfolio gallery with service labels. Fixed rate update to preserve photo_path.
- **Jan 1, 2026**: Enhanced tiler profile setup with profile photo upload, cover photo upload, NIC field, service rates per service, and certificates upload section. Profile display page now shows cover photo, services with rates, and certificates.
- **Jan 1, 2026**: Redesigned tiler profile setup (`/profile/setup`) with progressive editing using expandable sections like Facebook - each section saves independently, shows completion status, and has a progress bar. Added "Become a Tiler" option to homeowner profile edit page.
- **Jan 1, 2026**: Added comprehensive admin dashboard (`/admin`) with Supabase auth protection. Includes users management, blog posts CRUD, guides CRUD with step builder, and tasks moderation. Added RLS policies for admin access to profiles/tasks/blog_posts/guides.
- **Jan 1, 2026**: Fixed profile edit confusion - homeowners now have a simple edit page (`/profile/edit`) while tilers use progressive profile setup (`/profile/setup`).
- **Jan 1, 2026**: Added service-specific pages (`/services/[service]`) showing available tilers, related blog articles, and how-to guides for each service type.
- **Jan 1, 2026**: Performance optimizations - Next.js Image config for Supabase, skeleton loading components, memoized components, pagination on tilers page, optimized Supabase queries.
- **Dec 31, 2025**: Added full blog articles (8 posts with complete content) and how-to guides section (8 step-by-step guides) with individual pages.
- **Dec 31, 2025**: Created missing pages - `/tilers` (browse all tilers with search) and `/blog` (articles with category filters).
- **Dec 31, 2025**: Improved bottom navigation bar to industry standards - filled/outlined icon states, smooth transitions, scale animations, glassmorphism effect, and proper label alignment.
- **Dec 31, 2025**: Added Supabase Edge Function for secure bid placement - only tilers can bid, with RLS policies for defense in depth.
- **Dec 31, 2025**: Created role-based home pages - homeowners see search bar, services grid, top tilers, blog posts, and how-to guides; tilers see available tasks and tiler-focused blog posts.
- **Dec 31, 2025**: Added TILERS HUB branding header on all mobile pages, root URL (/) now redirects to /home.
- **Dec 31, 2025**: Redesigned public tiler profile page with mobile-first layout matching the design reference - profile header with avatar/name/location/rating, Request Quote button, About Me section, My Skills grid with checkmarks, horizontal Portfolio gallery, and Reviews section.
- **Dec 31, 2025**: Enhanced tiler profile customization with 5-step setup wizard, portfolio gallery, availability settings, verification badges, and improved public profile display with tabbed interface.
- **Dec 31, 2025**: Updated services to align with post task flow (9 service types: floor_tiling, wall_tiling, staircase_tiling, bathroom_tiling, pantry_backsplash, waterproofing, screed, demolition, nosing).
- **Dec 31, 2025**: Updated post-task flow with comprehensive tiling service options including floor, wall, staircase, bathroom, and pantry tiling with detailed specifications, image upload, and additional notes.