Start a new Lovable project, connect Supabase when prompted, then paste the prompt below. Follow up with individual screen requests as needed.
Build a multi-survey management platform for EWN (Energy Worldnet) called the EWN Survey Platform.
TECH STACK
React + TypeScript, Tailwind CSS, Supabase (auth + database + RLS), shadcn/ui components, @dnd-kit/sortable for drag-to-reorder.
BRAND & DESIGN
Font: Inter (all weights). Colors:
- OQ Blue #284249 (primary, buttons, section headers, headings)
- EWN Yellow #FFD400 (accents, badges, progress fill, logo on dark)
- Deep Navy #042B35 (page-level headers and nav bars)
- Teal Accent #1D7183 (focus rings, links, hover states)
- Page background #DDE8E5
- Cards: white, 1px #e5e7eb border, 12px border-radius
Logo: an SVG "E" mark I will supply (ewn-e.svg). Use it yellow on dark backgrounds, OQ Blue on light backgrounds.
DATABASE (create via Supabase)
Table: surveys
id uuid PK default gen_random_uuid()
name text not null
description text
location_tag text
status text default 'draft' -- 'draft' | 'active' | 'closed'
slug text unique not null
created_by uuid references auth.users
created_at timestamptz default now()
published_at timestamptz
closed_at timestamptz
Table: sections
id uuid PK default gen_random_uuid()
survey_id uuid references surveys on delete cascade
title text not null
order_index integer not null default 0
Table: questions
id uuid PK default gen_random_uuid()
section_id uuid references sections on delete cascade
text text not null
type text not null default 'likert' -- 'likert' | 'open_ended'
required boolean default true
affects_score boolean default true
order_index integer not null default 0
Table: responses
id uuid PK default gen_random_uuid()
survey_id uuid references surveys on delete cascade
submitted_at timestamptz default now()
answers jsonb not null default '{}'
email_copy_requested boolean default false
RLS:
- responses: INSERT allowed without auth (public can submit). SELECT/UPDATE/DELETE require authenticated admin.
- surveys, sections, questions: all operations require authenticated user.
USER ROLES
Admin: authenticated via Supabase Auth (email+password to start; Microsoft SSO as future enhancement). Full access to all /admin routes.
Respondent: no login. Access /survey/:slug only.
PAGE 1 — /admin (Survey Library)
Full-width dark header (#042B35): EWN logo (yellow SVG), title "Survey Library", yellow "ADMIN" badge. Right side: "New Survey" button (white outline style).
Below header: filter tabs (All / Draft / Active / Closed) + table of surveys. Table columns: Survey Name, Location, Status badge, Responses count, Created date, Actions.
Status badges: Draft=grey, Active=#35A552 green, Closed=slate.
Row actions: Edit (opens builder), Results (opens dashboard), Clone (duplicates as draft), Archive.
"New Survey" opens a modal: name field (required), description textarea, location tag input, optional clone-from select. Submit creates a draft and redirects to the builder.
Empty state: friendly card with EWN logo and "No surveys yet. Create your first one."
PAGE 2 — /admin/surveys/:id/edit (Survey Builder)
Top bar: inline-editable survey name, status chip, Preview button, Publish button.
Two-panel layout: left panel (280px) lists sections with drag handles and a + Add Section button. Right panel shows questions for the selected section with + Add Question button.
Each question row: drag handle, question text (truncated), type chip (Likert / Open-Ended), edit and delete icons.
Question edit form (slide-out panel or inline): text textarea, type radio (Likert / Open-Ended), required toggle, affects_score toggle.
Publish action: set status to active, set published_at, show toast with the shareable URL (/survey/:slug) and a copy button.
Preview button: renders a full-screen modal showing the exact public form.
PAGE 3 — /admin/surveys/:id/results (Results Dashboard)
Header: EWN logo + "Results: [Survey Name]" + Back to Library link + Export CSV button.
Stats row (4 cards): Total Responses | Overall Avg Score (x.xx / 5) | Score % | Sections.
Tab bar: "Section Scores" | "Open-Ended Responses".
Section Scores tab: one card per section. Each shows a colored score badge (score>=4.5: #35A552, >=3.5: #1D7183, >=2.5: #B8860B, else: #CD3D3D), section title, score progress bar (0-5 scale), question count + response count. Clicking a section expands it to show per-question rows: question text on left, avg score + 5-segment mini distribution bar on right (SA=green, A=teal, N=light grey, D=amber/yellow, SD=red).
Open-Ended tab: for each open-ended question, show the question text as a heading and all non-empty text responses in teal-tinted cards. Show response count.
Export CSV: download all responses as CSV (one row per response, columns: submitted_at + one column per question id + email_copy_requested).
If no responses yet: friendly empty state per tab.
PAGE 4 — /survey/:slug (Public Survey Form)
Load survey + sections + questions from Supabase using the slug. No auth required.
If survey.status === 'closed': show centered screen with EWN logo, "This survey is no longer accepting responses.", and a thank-you message.
If survey not found: show 404 screen.
If survey.status === 'draft': treat as not found.
If survey.status === 'active': render the form.
Form layout:
- Dark header (#042B35): EWN logo (yellow), survey name (white, 1.6rem bold), description (muted #9FBCC4).
- Sticky sub-bar below header (#042B35 slightly lighter or same): progress bar track with yellow fill, "X of Y answered" label. Updates live as user selects answers.
- Page background #DDE8E5.
- One white card per section. Card header: background #284249, white bold section title.
- Each Likert question: question text (0.88rem, #284249, bold), then 5 pill-style radio buttons in a flex-wrap row: "Strongly Agree" / "Agree" / "Neutral" / "Disagree" / "Strongly Disagree". Default: white bg, #d1d5db border. Selected: #284249 bg, white text.
- Each open-ended question: question text, italic note "This response will not affect survey scoring.", then a textarea.
- Bottom submit card: "Send me a copy of my responses" checkbox row, then full-width Submit button (#284249).
- On submit: validate all required questions have a response. If missing: highlight question blocks with red border, scroll to first error.
- On success: write to responses table, navigate to /survey/:slug/success.
PAGE 5 — /survey/:slug/success (Success Screen)
Centered card on #DDE8E5 background: EWN logo (blue), large green checkmark circle (#C6E3CB bg, green checkmark), "Thank you for your response!" heading, body text "Your feedback is anonymous and will be kept strictly confidential. Results help shape safety culture improvements across the organization."
SEED DATA
After setup, seed one survey: name="Safety Culture Survey (2026)", slug="safety-culture-2026", description="Please respond to each of the following statements regarding pipeline safety as honestly and accurately as you can. Your answers are anonymous and will be kept strictly confidential.", status='active'.
Sections and questions (all Likert, required, affects_score=true unless noted):
Section "Leadership & Management Commitment" (9 questions): Leadership clearly shows in actions & words that they are committed to system asset safety & consider it equal to other business priorities / Leadership has implemented policies & procedures to improve system asset safety practices / Leadership consistently conducts system asset safety assessments & evaluations & implements changes based on the findings / Leadership recognizes excellent employee behaviors regarding conformance with implemented system asset safety policies and procedures through rewards and incentives / Leadership fosters a system asset safety environment that promotes accountability & holds individuals accountable for their actions / Leadership routinely communicates the importance of safety, including expected behaviors & actions necessary to maintain system asset safety / I am encouraged by leadership & feel empowered to stop work when conditions are unsafe or if proper procedures are not followed / Leadership ensures that employees learn from past incidents & approaches operations from the perspective of what might go wrong / Adequate resources (budget, labor, equipment, materials, tools, etc.) are allocated towards ensuring proper procedures are followed
Section "Stakeholder Engagement" (4 questions): Employees are engaged by management or supervisors to share new ideas to improve system asset safety / I am encouraged to report near misses, unsafe behavior, safety violations, abnormal operating or unsafe conditions, & any deviation from proper procedures in my workplace / I know the process to report near misses, unsafe behavior, safety violations, abnormal operating or unsafe conditions, & any deviation from proper procedures & do not fear punishment for reporting such things / Management & supervisors actively solicit system asset safety-related feedback, listen to concerns, & communicate openly with employees
Section "Risk Management" (4 questions): System asset safety metrics are highly visible & are shared & discussed with everyone / My workplace quickly addresses & corrects system asset safety risks or hazards, even if it is costly / Management ensures proper tools, equipment, & other resource materials are available to support system asset safety / Management frequently addresses system asset safety & is continually working to improve conditions & reduce hazards, even when working on a tight deadline
Section "Operational Controls" (4 questions): Written system asset safety policies, rules, & instructions are always up-to-date & easy for employees to understand & implement / I have the equipment & tools I need to do my job properly as well as to comply with all expected system asset safety measures / Company safety culture and system asset safety procedures provide my co-workers & I with the ability to stop work when conditions are unsafe or if proper procedures are not followed / Management consistently communicates changes & updates to policies & procedures, including the applicability to my job
Section "Incident Investigation, Evaluations, & Lessons Learned" (6 questions): After an accident or incident, the primary aim of management is to thoroughly investigate, review, & identify the failed process or deficiency & improve them / After an accident or incident is investigated & reviewed, lessons learned are communicated to employees for learning & improvement purposes / Complacency regarding job risks is not tolerated, as system asset safety is the top priority / My co-workers & I openly discuss mistakes, accidents, & near miss incidents so we can learn from each other / System asset safety risks, accidents, & incidents must be reported quickly so that they can be reviewed & corrective actions can be implemented to reduce the chances of recurrence / There are multiple levels of controls in place to ensure system asset safety & to ensure risk is managed
Section "Safety Assurance" (2 questions): Employees are encouraged to share new ideas & voice concerns regarding system asset safety; ideas & concerns are thoroughly considered by management, & employees are provided feedback / Reported concerns about system asset safety are acted upon quickly & with open communication
Section "Management Review" (2 questions): Management conducts system asset safety program evaluations and job site visits consistently & the findings are communicated to all employees, highlighting areas for improvement / Leadership & management clearly define opportunities for continued system asset safety improvement
Section "Emergency Preparedness & Response" (4 questions): I have been trained on the proper procedures to follow in an emergency (fire, explosion, uncontrolled release, etc.) / Mock emergency training/drills are conducted regularly to ensure all employees are able to appropriately respond to different emergency scenarios / I feel prepared to execute my role & responsibilities in an emergency / It is crucial to maintain a realistic sense of vulnerability in order to maintain vigilance
Section "Competency, Awareness, & Training" (3 questions): The system asset safety training I received covered all the risks & hazards associated with the work for which I am responsible, & I know what my responsibilities are / I was evaluated on my understanding of system asset safety responsibility & further training was provided if knowledge gaps were identified / I am continually trained & evaluated on system asset safety practices & responsibilities
Section "Documentation & Record Keeping" (2 questions): I consistently have the proper documentation and records to perform my job (qualification records, dig tickets, task-specific procedures, DOT license, switching orders, maps, job briefing (tailboards), etc.) / I complete work documentation accurately, completely, & according to company procedure
Two open-ended questions at the end (type='open_ended', required=false, affects_score=false): "In your own words, what does your organization do well that supports a strong safety culture?" and "In your own words, what is the greatest challenge your organization faces in strengthening its safety culture?"