diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..ee0eed5
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,5 @@
+# Copy to .env.local and fill in real values locally. Never commit .env.local.
+# Next.js only exposes vars prefixed NEXT_PUBLIC_ to the client bundle.
+
+# Base URL of the GuildWorkman API. Defaults to the hosted instance if unset.
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..13418b1
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,32 @@
+name: CI
+
+on:
+ push:
+ branches: [main, dev]
+ pull_request:
+
+jobs:
+ check:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 20
+ cache: npm
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Type-check
+ run: npx tsc --noEmit
+
+ - name: Lint
+ run: npx eslint .
+
+ - name: Test
+ run: npm test
+
+ - name: Build
+ run: npm run build
diff --git a/.gitignore b/.gitignore
index 3c3629e..3625680 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,32 @@
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# env files
+.env
+.env*.local
+!.env.example
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# typescript
+*.tsbuildinfo
diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index b58b603..0000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
diff --git a/.idea/Sabi-Sabi.iml b/.idea/Sabi-Sabi.iml
deleted file mode 100644
index 24643cc..0000000
--- a/.idea/Sabi-Sabi.iml
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
deleted file mode 100644
index 17fc53e..0000000
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml
deleted file mode 100644
index 5acd1e3..0000000
--- a/.idea/material_theme_project_new.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
deleted file mode 100644
index 9b296dc..0000000
--- a/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 6b0e8f6..0000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..41bf3ae
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,202 @@
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright 2024-2026 Workman Labs
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..69f5578
--- /dev/null
+++ b/README.md
@@ -0,0 +1,293 @@
+# GuildWorkman Web
+
+**Live:** [guildworkman-web.vercel.app](https://guildworkman-web.vercel.app) · **X:** [@guildworkman](https://x.com/guildworkman)
+
+The client-facing web app for **GuildWorkman** — a marketplace that connects
+clients with skilled tradespeople (electricians, plumbers, beauticians,
+carpenters, fashion designers, photographers, and more) for bookable,
+in-person appointments. This is the Next.js frontend: it renders the public
+marketing site, handles client/worker registration and login, and drives the
+booking, cancellation, update, and review flows against the backend API in
+[`guildworkman-core`](https://github.com/workman-labs/guildworkman-core).
+
+## Table of contents
+
+- [Project ecosystem](#project-ecosystem)
+- [Tech stack](#tech-stack)
+- [Design system](#design-system)
+- [Brand assets](#brand-assets)
+- [Features](#features)
+- [Web3 / Stellar touches](#web3--stellar-touches)
+- [Project structure](#project-structure)
+- [API integration](#api-integration)
+- [Prerequisites](#prerequisites)
+- [Setup](#setup)
+- [Running locally](#running-locally)
+- [Building for production](#building-for-production)
+- [Testing](#testing)
+- [Deployment](#deployment)
+- [Contributing](#contributing)
+- [Known limitations](#known-limitations)
+
+## Project ecosystem
+
+GuildWorkman lives in two repositories:
+
+| Repo | Role |
+|---|---|
+| **`guildworkman-web`** (this repo) | Next.js frontend — everything a client or worker sees and clicks. |
+| [`guildworkman-core`](https://github.com/workman-labs/guildworkman-core) | The Spring Boot backend (`backend-api/`) — auth, booking, payments (Paystack), email, and the Postgres-backed domain model, which this repo talks to over REST — **and** the Soroban (Stellar) smart contracts (`soroban-contracts/`) for on-chain escrow, reputation, and loyalty rewards. The contracts aren't called from the backend yet — see [Web3 / Stellar touches](#web3--stellar-touches) below for what's live on the frontend today versus what's still ahead. |
+
+## Tech stack
+
+- **Next.js 16** (App Router) + **React 19** + **TypeScript**
+- **Tailwind CSS v4** — a hand-rolled design system (no component library);
+ see [Design system](#design-system)
+- **Formik** + **Yup** for the login/signup forms; **react-hook-form** +
+ **react-dropzone** for the profile form's file upload
+- **axios** and the native `fetch` API for HTTP calls to the backend
+- **Leaflet** / **react-leaflet**, loaded dynamically client-side, for the
+ homepage location map and search
+- **@stellar/freighter-api** for wallet connect (see below)
+- **react-icons** (Heroicons v1 set) for all iconography
+
+## Design system
+
+The whole UI is built on a small set of hand-written Tailwind primitives in
+`src/components/ui/` rather than a component library:
+
+- `Button` — `variant`: `primary` / `secondary` / `ghost` / `outline-inverse` / `gold`; `size`: `sm` / `md` / `lg`
+- `Input`, `Select` — labeled form fields with built-in error display
+- `Card` — bordered/shadowed container
+- `Badge` — pill badge with `tone`: `brand` / `gold` / `success` / `error` / `neutral` / `chain` / `navy`
+
+Colors and type are defined once as CSS custom properties in
+`src/app/globals.css` and mirrored into Tailwind's `@theme inline` block.
+This is **Identity System v1** — see [Brand assets](#brand-assets):
+
+- **Palette** — trust navy (`--navy`) as the primary, guild gold (`--gold`) as
+ the reputation accent (the North Star, ratings, escrow seals), and terracotta
+ (`--terra`) as the expressive voice reserved for the cultural mark and
+ worker-facing bands. All of it sits on a warm sand ground (`--sand`) rather
+ than stark white, with warm-biased ink (`--ink`) instead of pure gray.
+- **Type** — Inter throughout (grotesque, not serif), loaded via
+ `next/font/google`.
+- **Dark theme** — a token-level flip in `globals.css`. It follows
+ `prefers-color-scheme` by default; a stored preference stamps `data-theme` on
+ `` and wins in both directions (`ThemeToggle` in the navbar, with a
+ no-FOUC script in the layout).
+
+## Brand assets
+
+The logo marks live in `public/brand/`. Each one ships as an SVG master plus a
+4× PNG; **the SVG is the source of truth** — reach for it anywhere the mark
+scales (favicons, print, large hero use) and keep the PNG for fixed-size or
+non-vector surfaces. PNGs are transparent except where a mark carries its own
+tile. In-app, the same geometry is also available as React components in
+`src/components/brand/` (`Logo`, `NorthStar`, `AdinkraPattern`) — prefer those
+over an `SabiConnect
-
-
- You need to enable JavaScript to run this app.
-
-
-
-
diff --git a/connect/public/manifest.json b/connect/public/manifest.json
deleted file mode 100644
index a556470..0000000
--- a/connect/public/manifest.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "short_name": "React App",
- "name": "Create React App Sample",
- "icons": [
- {
- "src": "favicon.ico",
- "sizes": "64x64 32x32 24x24 16x16",
- "type": "image/x-icon"
- }
-
- ],
- "start_url": ".",
- "display": "standalone",
- "theme_color": "#000000",
- "background_color": "#ffffff"
-}
diff --git a/connect/public/robots.txt b/connect/public/robots.txt
deleted file mode 100644
index e9e57dc..0000000
--- a/connect/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/connect/src/.env b/connect/src/.env
deleted file mode 100644
index 15661e1..0000000
--- a/connect/src/.env
+++ /dev/null
@@ -1 +0,0 @@
-GOOGLE_KEY='AIzaSyBq7q3753U4lQ4tIM5TrcPesf2NuKFcn7Y'
\ No newline at end of file
diff --git a/connect/src/App.css b/connect/src/App.css
deleted file mode 100644
index 2236a2a..0000000
--- a/connect/src/App.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*@tailwind base;*/
-/*@tailwind components;*/
-/*@tailwind utilities;*/
-
-
diff --git a/connect/src/App.js b/connect/src/App.js
deleted file mode 100644
index fd1ceb2..0000000
--- a/connect/src/App.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import './App.css';
-import {ROUTE} from "./route";
-import {useRoutes} from "react-router-dom";
-
-
-function App() {
- return (
- useRoutes( ROUTE)
-
- );
-}
-
-export default App;
diff --git a/connect/src/App.test.js b/connect/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/connect/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render(
-
-
-
-
Home
-
Find Worker
-
Clients
- {/*
*/}
- {/*
*/}
-
-
-
-
-
-
-
- navigate('/login')}>Login
- navigate('/skilWok')}>Sign up as skilledworker
- navigate('/client')}>Sign up as client
- navigate('/book')}>Book Appointment
-
-
-
- {/*Login */}
- {/*SignUp */}
-
-
-
-
-
-
-
-
-);
-
-
diff --git a/connect/src/pages/Dashbord/MyProfile/content.module.css b/connect/src/pages/Dashbord/MyProfile/content.module.css
deleted file mode 100644
index acddd1b..0000000
--- a/connect/src/pages/Dashbord/MyProfile/content.module.css
+++ /dev/null
@@ -1,358 +0,0 @@
-body {
- margin: 0;
- padding: 0;
- overflow-x: hidden;
-}
-
-.contentheader{
- display: flex;
- flex-direction: column;
- margin-left: 10px;
- width: 125px;
- height: 150vh;
- padding: 0;
- box-sizing: border-box;
-}
-
-.horizontalLine, .topHorizontalLine {
- width: 900%;
- /*border: 0.2px solid gray;*/
- height: 0;
-}
-
-.topHorizontalLine {
- margin-bottom: 1px;
-}
-
-.horizontalLine {
- margin-top: 5px;
- margin-bottom: 5px;
-}
-
-.headertitle{
- color: #050505;
-}
-.headeractivity{
- display: flex;
- align-items: center;
- gap: 59%;
- width: 78vw;
-}
-.searchbox{
- background: #1e5176;
- padding: 8px 10px;
- border-radius: 10px;
- display: flex;
- align-items: center;
-}
-.searchbox input{
- border: none;
- outline: none;
- background: transparent;
- padding: 5px;
-}
-
-.searchbox .icon{
- color: #dce8f4;
- font-size: 22px;
- cursor: pointer;
- transition: 0.5s ease-in-out;
-}
-
-.notify{
- background: #333333;
- padding: 12px;
- border-radius: 10px;
- color: #dce8f4;
- display: flex;
- align-items: center;
- justify-content: center;
-
-}
-
-.notify .icon{
- font-size: 20px;
- transition: 0.5s ease-in-out;
-}
-
-.icon:hover{
- transform: scale(1.3);
- cursor: pointer;
-}
-
-.cardcontainer{
- display: flex;
-
-}
-
-.sectionContainer{
- width: 300px;
- display: flex;
- gap: 30px;
-
-}
-.content2{
-
- font-size: 30px;
-
-}
-
-.base1{
- width: 600px;
- flex-direction: row;
-
-}
-
-.formContainer {
- background-color: #e5ebee;
- padding: 20px;
- border-radius: 8px;
- max-width: 400px;
- margin-bottom: 4px;
-
-}
-
-input {
- display: block;
- width: 400px;
- margin: 9px -18px;
- padding: 10px;
- border: 1px solid #ccc;
- border-radius: 4px;
- height: 20px;
- font-size: 18px
-}
-
-button {
- background-color: #2b8fda; /* Green */
- color: white;
- padding: 10px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
-}
-
-button:hover {
- background-color: #45a049;
-}
-
-.genderContainer{
- width: 400px;
- height: 30px;
- font-size: 18px;
- padding: 10px;
- background-color: #F8F8FD;
-
-}
-
-.container {
- /*padding: 20px;*/
- /*border: 1px dashed #9C27B0; */
- /*border-radius: 8px;*/
- /*max-width: 600px;*/
- /*display: flex;*/
-}
-
-.formControl {
- width: 70vw;
- display: flex;
- justify-content: space-between;
-}
-
-.legend {
- font-size: 18px;
- font-weight: bold;
- color: #000000;
- margin-bottom: 8px;
-}
-
-.description {
- font-size: 14px;
- color: #666;
- margin-bottom: 16px;
-}
-
-.radioGroup {
- display: flex;
- flex-direction: column;
- gap: 16px;
-}
-
-.optionContainer {
- display: flex;
- align-items: center;
-}
-
-.labelContainer {
- display: flex;
- flex-direction: column;
- margin-left: 8px;
-}
-
-.labelTitle {
- font-size: 16px;
- font-weight: bold;
- margin: 0;
-}
-
-.labelDescription {
- font-size: 14px;
- color: #666;
- margin: 0;
-}
-
-.formControlLabel {
- align-items: flex-start;
-}
-
-.bottonContainer{
- width: 97px;
- height: 30px;
- margin-left: 800px;
- /*background-color: #2a7ab6;*/
- margin-bottom: 20px;
-}
-
-/*.dviContainer{*/
-/* display: grid;*/
-
-/*}*/
-
-.profContainer{
- display: flex;
- width: 70vw;
- /*gap: 150px;*/
- justify-content: space-between;
- /*margin-right: -320px;*/
-}
-
-.profContainer img {
- max-width: 100%;
- height: auto;
- /*border: 1px dashed #aaa;*/
- /*padding: 10px;*/
- /*margin-bottom: 10px;*/
-}
-
-.uploadArea {
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- padding: 10px;
- cursor: pointer;
- gap: 10px;
-}
-
-.uploadIcon {
- font-size: 2px;
- margin-right: 10px;
- width: 20px;
- height: 20px;
- padding-top: 30px;
-
-
-}
-
-.uploadText {
- font-size: 17px;
- margin-bottom: 40px;
-}
-
-
-.linkButton {
- background: none;
- border: none;
- color: blue;
- text-decoration: underline;
- cursor: pointer;
- padding: 0;
- font: inherit;
- margin: 0;
-}
-
-.linkButton:hover {
- text-decoration: none;
-}
-
-.cropPic{
- width: 100px;
- height: 1000px;
- border-radius: 50%;
- /*padding-top: 200px;*/
-
-}
-
-.iconContainer{
- text-align: center;
- display: inline-block;
- width: 100%;
- border: 2px dashed #2a7ab6;
- border-radius: 5px;
-
-
-}
-
-.personContainer{
- display: flex;
- justify-content: space-between;
- width: 70vw;
- /*margin-left: 150px; */
-
-
-}
-
-.phoEmail{
- display: flex;
- gap: 20px;
-}
-
-.phoneContainer,
-.phoEmail > div {
- flex: 1;
- max-width: 300px;
-}
-.personContainer,
-.emailContainer >div{
- margin-bottom:10px;
- padding-bottom: 1px;
-}
-
-.phoneContainer input, .emailContainer,
-.phoEmail > div input {
- width: 200px;
- /*padding: 8px;*/
- box-sizing: border-box;
- font-size: 14px;
- height: 40px;
- /*margin-left: 1px;*/
-}
-.formContainer input[type="text"],
-/*.formContainer input[type="tel"],*/
-/*.formContainer input[type="email"],*/
-.formContainer input[type="password"] {
- width: 300px;
- padding: 8px;
- box-sizing: border-box;
- font-size: 14px;
- height: 40px;
-}
-
-.formContainer select {
- width: 300px;
- padding: 8px;
- box-sizing: border-box;
-
-}
-
-.fileInput {
- display: none;
-}
-
-.uploadLabel {
- cursor: pointer;
-}
-
-.buttonstyle{
- color: #45a049;
-}
diff --git a/connect/src/pages/Dashbord/MyProfile/contentheader.jsx b/connect/src/pages/Dashbord/MyProfile/contentheader.jsx
deleted file mode 100644
index 56719e9..0000000
--- a/connect/src/pages/Dashbord/MyProfile/contentheader.jsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import React, {useState} from 'react';
-import style from './content.module.css'
-import {useNavigate} from "react-router-dom";
-import igmIc from "../../../assets/imageiconR.png";
-import crop from "../../../assets/skilledcrop.jpg"
-import {
- FormControl,
- FormControlLabel,
- InputLabel,
- MenuItem,
- OutlinedInput, Radio,
- RadioGroup,
- Select,
- useTheme
-} from "@mui/material";
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
-
-const names = [
- 'Male',
- 'Female',
- 'Others',
-
-];
-
-function getStyles(name, selectedName, theme) {
- return {
- fontWeight:
- selectedName.indexOf(name) === -1
- ? theme.typography.fontWeightRegular
- : theme.typography.fontWeightMedium,
- };
-}
-
-const ContentHeader = () => {
-
- const [ setImage] = useState(crop);
-
- const handleClick = (e) => {
- e.preventDefault(); // Prevent default anchor behavior
- document.getElementById('fileInput').click(); // Trigger file input click
- };
-
- const handleFileChange = (e) => {
- const file = e.target.files[0];
- if (file) {
- const reader = new FileReader();
- reader.onloadend = () => {
- setImage(reader.result);
- };
- reader.readAsDataURL(file);
- }
- };
-
-
- const [selectedValue, setSelectedValue] = React.useState('a');
- // const handleChange = (event) => {
- // setSelectedValue(event.target.value);
- // };
-
- const theme = useTheme();
- const [selectedName, setSelectedName] = React.useState([]);
-
- const [formData, setFormData] = useState({
- fullName: '',
- PhoneNumber: '',
- email: '',
- DateOfBirth: '',
- gender: '',
- });
-
- const handleChange = (e) => {
- const { name, value } = e.target;
- setFormData({ ...formData, [name]: value });
- setSelectedName(value);
- setSelectedValue(value);
- };
-
- const handleSubmit = (e) => {
- e.preventDefault();
- console.log(formData);
- };
-
- const navigate = useNavigate();
-
- return (
-
-
-
My Profile
-
Login Details
-
Notification
-
-
-
-
-
Basic information
-
This is your personal information that you can update anytime.
-
-
-
-
-
Profile photo
-
This image will be shown publicly
-
-
-
-
-
-
-
- Click to
- replace or
- drag and drop
-
-
-
-
-
-
-
-
-
-
-
-
Account Type
- {/*
Account Type */}
-
You can update your account type
-
-
-
-
-
}
- label={
-
-
Skilled-Worker
-
Looking for a job
-
-
-
}
- label={
-
-
Client
-
Hiring, sourcing candidates
- job
-
-
-
-
-
-
- Save Profile
-
-
-
-
Dashboard
- navigate('/')}>Back to homepage
-
-
-
Accept Appointment
- setId(e.target.value)}>
- Select Appointment
- {appointments.map(app => (
- {app.title} on {app.date}
- ))}
-
- Accept Appointment
-
- );
-};
-export default AcceptAppointment;
diff --git a/connect/src/pages/Dashbord/appoint/acceptApp/index.module.css b/connect/src/pages/Dashbord/appoint/acceptApp/index.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/connect/src/pages/Dashbord/appoint/appoint.jsx b/connect/src/pages/Dashbord/appoint/appoint.jsx
deleted file mode 100644
index 9b53cdd..0000000
--- a/connect/src/pages/Dashbord/appoint/appoint.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import Dashboard from "../dashboard/dashboard";
-import Appointment from "./appointments/appointment";
-import style from './index.module.css'
-
-const Appoint = () => {
- return (
-
- );
-};
-
-export default Appoint;
\ No newline at end of file
diff --git a/connect/src/pages/Dashbord/appoint/appointments/appointment.jsx b/connect/src/pages/Dashbord/appoint/appointments/appointment.jsx
deleted file mode 100644
index 3196cee..0000000
--- a/connect/src/pages/Dashbord/appoint/appointments/appointment.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { useState } from 'react';
-import {useNavigate} from 'react-router-dom';
-import banner from '../../../../assets/logobanna.png'
-import fashionDesigner from '../../../../assets/fashiondesigner.jpg'
-import brickLayers from '../../../../assets/mernsonMen.jpg'
-import plumber from '../../../../assets/plumb2.jpeg'
-import hairStylist from '../../../../assets/hairstylist.jpg'
-import workers from '../../../../assets/foundationLayers.jpg'
-import styles from './index.module.css';
-
-
-
-const AppointmentComponent = () => {
- const [isClient, setIsClient] = useState(true);
-
- const navigate = useNavigate();
-
- const handleNavigation = (path) => {
- navigate(path);
- };
-
- return (
-
-
-
SabiConnect
-
{isClient ? 'Client Appointment' : 'Skilled Worker Appointment'}
-
-
- {/*
*/}
- {/* setIsClient(true)}>Client */}
- {/* setIsClient(false)}>Skilled Worker */}
- {/*
*/}
-
-
- {isClient ? (
- <>
- handleNavigation('/book')}>Book Appointment
- handleNavigation('/cancel')}>Cancel Appointment
- handleNavigation('/update')}>Update Appointment
- handleNavigation('/delete')}>Delete Appointment
- handleNavigation('/view')}>View All Appointments
-
- ) : (
- <>
- handleNavigation('/accept')}>Accept Appointment
- handleNavigation('/decline')}>Decline Appointment
- handleNavigation('/delete')}>Delete Appointment
- handleNavigation('/view')}>View All Appointments
-
- )}
-
-
-
-
-
-
Book Appointment
-
Book appointments easily and reliably
-
handleNavigation('/book')}>Book Appointment
-
-
-
-
-
-
-
-
Cancel Appointment
-
Book appointments easily and reliably
-
handleNavigation('/cancel')}>Cancel Appointment
-
-
-
-
-
-
Update Appointment
-
Book appointments easily and reliably
-
handleNavigation('/update')}>Update Appointment
-
-
-
-
-
-
-
-
Delete Appointment
-
Book appointments easily and reliably
-
handleNavigation('/delete')}>Delete Appointment
-
-
-
-
-
-
View all Appointment
-
Book appointments easily and reliably
-
handleNavigation('/view')}>View All Appointments
-
-
-
-
-
-// ))
-// }
-//
-// }
-//
-// return (
-//
-//
Book Appointment
-//
-//
-// {categories.map((category) => (
-// setCurrentCategory(category)}
-// />
-// ))}
-//
-// {/*
*/}
-// {/* {categories.map((category) => (*/}
-// {/* {*/}
-// {/* setCurrentCategory(category)*/}
-// {/* }}/>*/}
-// {/* ))}*/}
-//
-// {/*
*/}
-//
-//
-//
-// {currentCategory === "ELECTRICAL" ? (
-//
-// ) : currentCategory === "PLUMBING" ? (
-//
-// ) : null}
-//
-//
-// navigate('/')}>Back to Home
-//
-//
-//
-//
-//
-
Book Appointment
-
-
- {categories.map((category) => (
- setCurrentCategory(category)}
- />
- ))}
-
-
-
- {currentCategory === "ELECTRICAL" ? (
-
- ) : currentCategory === "PLUMBING" ? (
-
- ) : null}
-
-
-
navigate('/')}>Back to Home
-
- {bookedAppointments.length > 0 && (
-
-
Booked Appointments
-
- {bookedAppointments.map((appointment, index) => (
-
- {appointment.title} - {appointment.dateTime} ({appointment.category})
-
- ))}
-
-
- )}
-
-
-
-// {categoryName}
-//
-// );
-// };
-//
-// export default Category;
-
-import React from 'react';
-import style from './Category.module.css';
-
-const Category = ({ categoryName, click }) => {
- return (
- click(categoryName)} className={style.main}>
- {categoryName}
-
-
- );
-};
-
-export default Category;
diff --git a/connect/src/pages/Dashbord/appoint/bookApp/category/Category.module.css b/connect/src/pages/Dashbord/appoint/bookApp/category/Category.module.css
deleted file mode 100644
index eb681f1..0000000
--- a/connect/src/pages/Dashbord/appoint/bookApp/category/Category.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.main{
- background-color: blue;
- border-radius: 30px;
- height: 50px;
- margin-bottom: 20px;
- width: 250px;
- display: grid;
- justify-content: center;
- place-items: center;
-}
\ No newline at end of file
diff --git a/connect/src/pages/Dashbord/appoint/bookApp/index.module.css b/connect/src/pages/Dashbord/appoint/bookApp/index.module.css
deleted file mode 100644
index 2f23f90..0000000
--- a/connect/src/pages/Dashbord/appoint/bookApp/index.module.css
+++ /dev/null
@@ -1,124 +0,0 @@
-.left{
- height: 485px;
- width: 410px;
- border-radius: 20px;
- background-color: #cbe6ff;
- padding: 45px 0 0 160px;
-}
-.right{
- background-color: white;
- width: 600px;
- height: 500px;
- margin-left: 40px;
- padding: 35px 0 0 70px;
- border-radius: 20px 0 0 20px;
-}
-.mainBody{
- background-color: #cbe6ff;
-}
-.body {
- display: flex;
-}
-
-/*h2 {*/
-/* color: #333;*/
-/* text-align: center;*/
-/*}*/
-
-/*.container {*/
-/* max-width: 800px;*/
-/* margin: auto;*/
-/* background: white;*/
-/* border-radius: 8px;*/
-/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
-/* padding: 20px;*/
-/*}*/
-
-/*.appointment-item {*/
-/* background: #f9f9f9;*/
-/* margin: 10px 0;*/
-/* padding: 15px;*/
-/* border-radius: 4px;*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/*}*/
-
-
-/*button {*/
-/* padding: 10px 15px;*/
-/* margin: 0 5px;*/
-/* border: none;*/
-/* border-radius: 4px;*/
-/* cursor: pointer;*/
-/* transition: background-color 0.3s;*/
-/*}*/
-
-/*button.bookAppointment {*/
-/* background-color: #007bff;*/
-/* color: white;*/
-/*}*/
-
-/*button.cancelAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button.updateAppointment {*/
-/* background-color: #ffc107;*/
-/* color: black;*/
-/*}*/
-
-/*button.deleteAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button.viewAllAppointments {*/
-/* background-color: #28a745;*/
-/* color: white;*/
-/*}*/
-
-/*button.acceptAppointment {*/
-/* background-color: #28a745;*/
-/* color: white;*/
-/*}*/
-
-/*button.declineAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button:hover {*/
-/* opacity: 0.9;*/
-/*}*/
-
-
-/*.combinedAppointmentComponent {*/
-/* border: 1px solid #ddd;*/
-/* border-radius: 4px;*/
-/* padding: 15px;*/
-/* background: #fcfcfc;*/
-/* margin-top: 20px;*/
-/*}*/
-
-/*.combinedAppointmentComponent h3 {*/
-/* margin: 0;*/
-/* color: #333;*/
-/*}*/
-
-/*.message {*/
-/* padding: 10px;*/
-/* border-radius: 4px;*/
-/* margin-top: 10px;*/
-/*}*/
-
-/*.success {*/
-/* background-color: #d4edda;*/
-/* color: #155724;*/
-/*}*/
-
-/*.error {*/
-/* background-color: #f8d7da;*/
-/* color: #721c24;*/
-/*}*/
diff --git a/connect/src/pages/Dashbord/appoint/bookApp/skillCard/SKillCard.jsx b/connect/src/pages/Dashbord/appoint/bookApp/skillCard/SKillCard.jsx
deleted file mode 100644
index 5de38fa..0000000
--- a/connect/src/pages/Dashbord/appoint/bookApp/skillCard/SKillCard.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import styles from './skillCard.module.css'
-
-const SKillCard = ({image, name, skill, description}) => {
- return (
-
-
-
-
{name}
-
{skill}
-
{description}
-
-
-
-//
Cancel Appointment
-// setId(e.target.value)}>
-// Select Appointment
-// {Array.isArray(appointments) && appointments.map(app => (
-// {app.title} on {app.date}
-// ))}
-//
-// Cancel Appointment
-//
-// );
-// };
-//
-// export default CancelAppointment;
-
-
-
-
-
-
-import React, { useState } from 'react';
-import './index.module.css';
-import { cancelAppointmentApi } from "../../../../component/clientApi";
-import {useNavigate} from "react-router-dom";
-
-const CancelAppointment = ({ appointments, removeAppointment }) => {
-
- const navigate = useNavigate();
- const [id, setId] = useState('');
- const [errorMessage, setErrorMessage] = useState('');
- const [loading, setLoading] = useState(false);
- const [successMessage, setSuccessMessage] = useState('');
-
- const handleCancel = () => {
- const appointment = appointments.find(app => app.id === id);
-
- if (appointment) {
- handleSubmit({ id: appointment.id });
- } else {
- alert('Appointment not found. Please select a valid appointment to cancel.');
- }
- };
-
- const handleSubmit = async (values) => {
- setLoading(true);
- setErrorMessage('');
- setSuccessMessage('');
-
- try {
- const response = await cancelAppointmentApi(values);
-
- const successMessage = response.data?.message || 'Cancel Appointment successful!';
-
- setSuccessMessage(successMessage);
-
- removeAppointment(values.id);
-
- const { token, refreshToken } = response.data.data;
-
- localStorage.setItem('accessToken', token);
- localStorage.setItem('refreshToken', refreshToken);
- console.log('Access token:', token);
-
-
- setTimeout(() => {
- navigate('/book');
- }, 2000);
- } catch (error) {
- if (error.response && error.response.data) {
- const backendMessage = error.response.data.message;
- setErrorMessage(backendMessage);
- } else {
- setErrorMessage('An error occurred while trying to cancel the appointment.');
- }
- } finally {
- setLoading(false);
- }
- };
-
- return (
-
-
Cancel Appointment
-
setId(e.target.value)}>
- Select Appointment
- {Array.isArray(appointments) && appointments.map(app => (
- {app.title} on {app.date}
- ))}
-
-
Cancel Appointment
- {errorMessage &&
{errorMessage}
}
- {successMessage &&
{successMessage}
}
-
-//
Cancel Appointment
-//
setId(e.target.value)}>
-// Select Appointment
-// {Array.isArray(appointments) && appointments.map(app => (
-// {app.title} on {app.date}
-// ))}
-//
-//
Cancel Appointment
-// {errorMessage &&
{errorMessage}
}
-// {successMessage &&
{successMessage}
}
-//
-
Decline Appointment
- setId(e.target.value)}>
- Select Appointment
- {appointments.map(app => (
- {app.title} on {app.date}
- ))}
-
- Decline Appointment
-
- );
-};
-
-export default DeclineAppointment;
diff --git a/connect/src/pages/Dashbord/appoint/declineApp/index.module.css b/connect/src/pages/Dashbord/appoint/declineApp/index.module.css
deleted file mode 100644
index 4b7b058..0000000
--- a/connect/src/pages/Dashbord/appoint/declineApp/index.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-
-/*body {*/
-/* font-family: Arial, sans-serif;*/
-/* background-color: #f4f4f4;*/
-/* margin: 0;*/
-/* padding: 20px;*/
-/*}*/
-
-/*h2 {*/
-/* color: #333;*/
-/* text-align: center;*/
-/*}*/
-
-/*.container {*/
-/* max-width: 800px;*/
-/* margin: auto;*/
-/* background: white;*/
-/* border-radius: 8px;*/
-/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
-/* padding: 20px;*/
-/*}*/
-
-/*.appointment-item {*/
-/* background: #f9f9f9;*/
-/* margin: 10px 0;*/
-/* padding: 15px;*/
-/* border-radius: 4px;*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/*}*/
-
-
-/*button {*/
-/* padding: 10px 15px;*/
-/* margin: 0 5px;*/
-/* border: none;*/
-/* border-radius: 4px;*/
-/* cursor: pointer;*/
-/* transition: background-color 0.3s;*/
-/*}*/
-
-/*button.bookAppointment {*/
-/* background-color: #007bff;*/
-/* color: white;*/
-/*}*/
-
-/*button.cancelAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button.updateAppointment {*/
-/* background-color: #ffc107;*/
-/* color: black;*/
-/*}*/
-
-/*button.deleteAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button.viewAllAppointments {*/
-/* background-color: #28a745;*/
-/* color: white;*/
-/*}*/
-
-/*button.acceptAppointment {*/
-/* background-color: #28a745;*/
-/* color: white;*/
-/*}*/
-
-/*button.declineAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button:hover {*/
-/* opacity: 0.9;*/
-/*}*/
-
-
-/*.combinedAppointmentComponent {*/
-/* border: 1px solid #ddd;*/
-/* border-radius: 4px;*/
-/* padding: 15px;*/
-/* background: #fcfcfc;*/
-/* margin-top: 20px;*/
-/*}*/
-
-/*.combinedAppointmentComponent h3 {*/
-/* margin: 0;*/
-/* color: #333;*/
-/*}*/
-
-/*.message {*/
-/* padding: 10px;*/
-/* border-radius: 4px;*/
-/* margin-top: 10px;*/
-/*}*/
-
-/*.success {*/
-/* background-color: #d4edda;*/
-/* color: #155724;*/
-/*}*/
-
-/*.error {*/
-/* background-color: #f8d7da;*/
-/* color: #721c24;*/
-/*}*/
diff --git a/connect/src/pages/Dashbord/appoint/index.module.css b/connect/src/pages/Dashbord/appoint/index.module.css
deleted file mode 100644
index ef88201..0000000
--- a/connect/src/pages/Dashbord/appoint/index.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.appointty{
- display: flex;
- gap: 20px;
-}
\ No newline at end of file
diff --git a/connect/src/pages/Dashbord/appoint/updateApp/index.module.css b/connect/src/pages/Dashbord/appoint/updateApp/index.module.css
deleted file mode 100644
index 4b7b058..0000000
--- a/connect/src/pages/Dashbord/appoint/updateApp/index.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-
-/*body {*/
-/* font-family: Arial, sans-serif;*/
-/* background-color: #f4f4f4;*/
-/* margin: 0;*/
-/* padding: 20px;*/
-/*}*/
-
-/*h2 {*/
-/* color: #333;*/
-/* text-align: center;*/
-/*}*/
-
-/*.container {*/
-/* max-width: 800px;*/
-/* margin: auto;*/
-/* background: white;*/
-/* border-radius: 8px;*/
-/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
-/* padding: 20px;*/
-/*}*/
-
-/*.appointment-item {*/
-/* background: #f9f9f9;*/
-/* margin: 10px 0;*/
-/* padding: 15px;*/
-/* border-radius: 4px;*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/*}*/
-
-
-/*button {*/
-/* padding: 10px 15px;*/
-/* margin: 0 5px;*/
-/* border: none;*/
-/* border-radius: 4px;*/
-/* cursor: pointer;*/
-/* transition: background-color 0.3s;*/
-/*}*/
-
-/*button.bookAppointment {*/
-/* background-color: #007bff;*/
-/* color: white;*/
-/*}*/
-
-/*button.cancelAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button.updateAppointment {*/
-/* background-color: #ffc107;*/
-/* color: black;*/
-/*}*/
-
-/*button.deleteAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button.viewAllAppointments {*/
-/* background-color: #28a745;*/
-/* color: white;*/
-/*}*/
-
-/*button.acceptAppointment {*/
-/* background-color: #28a745;*/
-/* color: white;*/
-/*}*/
-
-/*button.declineAppointment {*/
-/* background-color: #dc3545;*/
-/* color: white;*/
-/*}*/
-
-/*button:hover {*/
-/* opacity: 0.9;*/
-/*}*/
-
-
-/*.combinedAppointmentComponent {*/
-/* border: 1px solid #ddd;*/
-/* border-radius: 4px;*/
-/* padding: 15px;*/
-/* background: #fcfcfc;*/
-/* margin-top: 20px;*/
-/*}*/
-
-/*.combinedAppointmentComponent h3 {*/
-/* margin: 0;*/
-/* color: #333;*/
-/*}*/
-
-/*.message {*/
-/* padding: 10px;*/
-/* border-radius: 4px;*/
-/* margin-top: 10px;*/
-/*}*/
-
-/*.success {*/
-/* background-color: #d4edda;*/
-/* color: #155724;*/
-/*}*/
-
-/*.error {*/
-/* background-color: #f8d7da;*/
-/* color: #721c24;*/
-/*}*/
diff --git a/connect/src/pages/Dashbord/appoint/updateApp/updateApp.jsx b/connect/src/pages/Dashbord/appoint/updateApp/updateApp.jsx
deleted file mode 100644
index 93c05d3..0000000
--- a/connect/src/pages/Dashbord/appoint/updateApp/updateApp.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import './index.module.css'
-
-const updateAppointmentStatus = (appointments, setAppointments, id, status) => {
- setAppointments(appointments.map(app =>
- app.id === Number(id) ? { ...app, status } : app
- ));
-};
-
-const UpdateAppointment = ({ isClient, appointments, setAppointments }) => {
- const handleAccept = (id) => {
- updateAppointmentStatus(appointments, setAppointments, id, 'Accepted');
- alert('Appointment Accepted');
- };
-
- const handleDecline = (id) => {
- updateAppointmentStatus(appointments, setAppointments, id, 'Declined');
- alert('Appointment Declined');
- };
-
- return (
- <>
- {!isClient && Array.isArray(appointments) && appointments.length > 0 ? ( // Check if appointments is an array and has items
- appointments.map(app => (
-
- {app.title} on {app.date}
- handleAccept(app.id)}>Accept
- handleDecline(app.id)}>Decline
-
- ))
- ) : (
- No appointments available to update.
// Fallback message if appointments is empty or undefined
- )}
-
- );
-};
-
-export default UpdateAppointment;
\ No newline at end of file
diff --git a/connect/src/pages/Dashbord/appoint/viewApp/index.module.css b/connect/src/pages/Dashbord/appoint/viewApp/index.module.css
deleted file mode 100644
index a51715a..0000000
--- a/connect/src/pages/Dashbord/appoint/viewApp/index.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-
-body {
- font-family: Arial, sans-serif;
- background-color: #f4f4f4;
- margin: 0;
- /*padding: 20px;*/
-}
-
-h2 {
- color: #333;
- text-align: center;
-}
-
-.container {
- max-width: 800px;
- margin: auto;
- background: white;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
- padding: 20px;
-}
-
-.appointment-item {
- background: #f9f9f9;
- margin: 10px 0;
- padding: 15px;
- border-radius: 4px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-
-button {
- padding: 10px 15px;
- margin: 0 5px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
-}
-
-button.bookAppointment {
- background-color: #007bff;
- color: white;
-}
-
-button.cancelAppointment {
- background-color: #dc3545;
- color: white;
-}
-
-button.updateAppointment {
- background-color: #ffc107;
- color: black;
-}
-
-button.deleteAppointment {
- background-color: #dc3545;
- color: white;
-}
-
-button.viewAllAppointments {
- background-color: #28a745;
- color: white;
-}
-
-button.acceptAppointment {
- background-color: #28a745;
- color: white;
-}
-
-button.declineAppointment {
- background-color: #dc3545;
- color: white;
-}
-
-button:hover {
- opacity: 0.9;
-}
-
-
-.combinedAppointmentComponent {
- border: 1px solid #ddd;
- border-radius: 4px;
- padding: 15px;
- background: #fcfcfc;
- margin-top: 20px;
-}
-
-.combinedAppointmentComponent h3 {
- margin: 0;
- color: #333;
-}
-
-.message {
- padding: 10px;
- border-radius: 4px;
- margin-top: 10px;
-}
-
-.success {
- background-color: #d4edda;
- color: #155724;
-}
-
-.error {
- background-color: #f8d7da;
- color: #721c24;
-}
diff --git a/connect/src/pages/Dashbord/appoint/viewApp/viewApp.jsx b/connect/src/pages/Dashbord/appoint/viewApp/viewApp.jsx
deleted file mode 100644
index c642b4e..0000000
--- a/connect/src/pages/Dashbord/appoint/viewApp/viewApp.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import './index.module.css'
-
-const ViewAllAppointments = ({ appointments = []}) => {
- console.log('Appointments:', appointments);
- return (
-
-
All Appointments
-
- {appointments.length > 0 ? (
- appointments.map(app => (
- {app.title} on {app.date}
- ))
-
- ) : (
- No appointments available
- )}
-
-
-
-
Book Appointment
-
-
-
-
Cancel Appointment
-
-
-
-
{category.charAt(0).toUpperCase() + category.slice(1)} Workers
-
- {workers.length > 0 ? (
- workers.map((worker, index) => (
-
- {worker.name}
- Experience: {worker.experience}
-
- ))
- ) : (
- No workers available in this category.
- )}
-
-
-
-
-
-
- SabiConnect
-
-
-
-
-
-
Dashboard
- Back to homepage
-
-
-
My Profile
-
Login Details
-
Notification
-
-
-
-
Basic information
-
This is your personal information that you can update anytime.
-
-
-
-
-//
-//
-//
Discover more than 5000 skilled worker
-//
Great platform for the job seeker that searching for new career heights and passionate about startups.
-//
navigate('/appoint')}
-// >
-// Discover Now
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-// typeof option === 'string' ? option : option.description
-// }
-// filterOptions={(x) => x}
-// options={options}
-// autoComplete
-// includeInputInList
-// filterSelectedOptions
-// value={value}
-// noOptionsText="No locations"
-// onChange={(event, newValue) => {
-// setOptions(newValue ? [newValue, ...options] : options);
-// setValue(newValue);
-// }}
-// onInputChange={(event, newInputValue) => {
-// setInputValue(newInputValue);
-// }}
-// renderInput={(params) => (
-//
-//
-//
-//
-//
-// {parts.map((part, index) => (
-//
-// {part.text}
-//
-// ))}
-//
-// {option.structured_formatting.secondary_text}
-//
-//
-//
-//
-// );
-// }}
-// />
-//
-// // typeof option === 'string' ? option : option.description
-// // }
-// // filterOptions={(x) => x}
-// // options={options}
-// // autoComplete
-// // includeInputInList
-// // filterSelectedOptions
-// // value={value}
-// // noOptionsText="No locations"
-// // onChange={(event, newValue) => {
-// // setOptions(newValue ? [newValue, ...options] : options);
-// // setValue(newValue);
-// // }}
-// // onInputChange={(event, newInputValue) => {
-// // setInputValue(newInputValue);
-// // }}
-// // renderInput={(params) => (
-// //
-// //
-// //
-// //
-// //
-// // {parts.map((part, index) => (
-// //
-// // {part.text}
-// //
-// // ))}
-// //
-// // {option.structured_formatting.secondary_text}
-// //
-// //
-// //
-// //
-// // );
-// // }}
-// // />
-//
-// );
-// };
-//
-// export default Hero;
-//
-
-
-import React from 'react';
-import combi from '../../../assets/fashiondesigner.jpg';
-import pic from './../../../assets/hairstylist.jpg';
-import pic1 from '../../../assets/Skill.png';
-import pic2 from '../../../assets/barber.jpg';
-import pic3 from '../../../assets/plumb1.jpeg';
-
-import style from './index.module.css';
-import { Button } from "@mui/material";
-import Paper from '@mui/material/Paper';
-import InputBase from '@mui/material/InputBase';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import SearchIcon from '@mui/icons-material/Search';
-import DirectionsIcon from '@mui/icons-material/Directions';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import parse from 'autosuggest-highlight/parse';
-import { debounce } from '@mui/material/utils';
-import { useNavigate } from "react-router-dom";
-
-// const GOOGLE_MAPS_API_KEY = process.env.GOOGLE_KEY;
-
-function loadScript(src, position, id) {
- if (!position) {
- return;
- }
-
- const script = document.createElement('script');
- script.setAttribute('async', '');
- script.setAttribute('id', id);
- script.src = src;
- position.appendChild(script);
-}
-
-const Hero = () => {
- const navigate = useNavigate();
- const [value, setValue] = React.useState(null);
- const [inputValue, setInputValue] = React.useState('');
- const [options, setOptions] = React.useState([]);
- const loaded = React.useRef(false);
- const autocompleteService = React.useRef(null);
-
- // if (typeof window !== 'undefined' && !loaded.current) {
- // if (!document.querySelector('#google-maps')) {
- // loadScript(
- // // `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`,
- // document.querySelector('head'),
- // 'google-maps',
- // );
- // }
- //
- // loaded.current = true;
- // }
-
- const fetch = React.useMemo(
- () =>
- debounce((request, callback) => {
- if (autocompleteService.current) {
- autocompleteService.current.getPlacePredictions(request, callback);
- }
- }, 400),
- [],
- );
-
- React.useEffect(() => {
- let active = true;
-
- if (!autocompleteService.current && window.google) {
- autocompleteService.current =
- new window.google.maps.places.AutocompleteService();
- }
-
- if (!autocompleteService.current || inputValue === '') {
- setOptions(value ? [value] : []);
- return undefined;
- }
-
- fetch({ input: inputValue }, (results) => {
- if (active) {
- let newOptions = [];
-
- if (value) {
- newOptions = [value];
- }
-
- if (results) {
- newOptions = [...newOptions, ...results];
- }
-
- setOptions(newOptions);
- }
- });
-
- return () => {
- active = false;
- };
- }, [value, inputValue, fetch]);
-
- return (
-
-
-
-
Discover more than 5000 skilled workers
-
Great platform for job seekers searching for new career heights and passionate about making people happy.
-
navigate('/appoint')}
- >
- Discover Now
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Explore by category
-
-
-
-
-
Fashion Design
-
available jobs navigate('/book')}/>
-
-
-
-
-
-
-
-
Cleaners
-
available jobs navigate('/book')}/>
-
-
-
-
Electrician
-
available jobs navigate('/book')}/>
-
-
-
-
HairStylist
-
available jobs navigate('/book')}/>
-
-
-
-
-
-
-
-
-
-
Carpenter
-
available jobs navigate('/book')}/>
- {/*
*/}
-
-
-
-
-
-
-
-
Photographer
-
available jobs navigate('/book')}/>
-
-
-
-
Electrician
-
available jobs navigate('/book')} />
-
-
-
-
HairStylist
-
available jobs navigate('/book')}/>
-
-
-
-
-
- {/*
*/}
- {/* Explore by category */}
- {/* */}
- {/*
*/}
- {/* */}
- {/* Fashion Design */}
- {/* available jobs -> */}
- {/* */}
- {/* */}
- {/* Cleaners */}
- {/* available jobs -> */}
- {/* */}
- {/* */}
- {/* Electrician */}
- {/* available jobs -> */}
- {/* */}
- {/* */}
- {/* HairStylist */}
- {/* available jobs -> */}
- {/* */}
- {/* */}
-
-
-
- {images.map((image) => (
-
-
- `calc(${theme.spacing(1)} + 6px)`,
- }}
- >
- {image.title}
-
-
-
- ))}
-
-
-
-
- );
-
-};
-
-export default Section2;
\ No newline at end of file
diff --git a/connect/src/pages/LoginPg/index.module.css b/connect/src/pages/LoginPg/index.module.css
deleted file mode 100644
index ad88643..0000000
--- a/connect/src/pages/LoginPg/index.module.css
+++ /dev/null
@@ -1,72 +0,0 @@
-.loginContainer {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- padding: 16px;
- background-color: #f5f5f5;
-}
-
-.backButton {
- display: flex;
- align-items: center;
- font-size: 16px;
- margin-bottom: 16px;
- color: #333;
- background: none;
- border: none;
- cursor: pointer;
- margin-right: 330px;
-}
-
-.backButton:hover {
- color: #000;
-}
-
-
-.loginForm {
- width: 100%;
- max-width: 400px;
- background-color: white;
- padding: 32px;
- border-radius: 8px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.loginForm h2 {
- text-align: center;
- margin-bottom: 24px;
- color: #333;
-}
-
-.formField {
- margin-bottom: 24px;
-}
-
-.MuiOutlinedInput-root {
- border-radius: 9999px !important;
-}
-
-.loginButton {
- background-color: dodgerblue;
- color: white;
- padding: 12px 0;
- border-radius: 9999px;
- font-size: 16px;
- text-transform: none;
- width: 100%;
-}
-
-.loginButton:hover {
- background-color: dodgerblue;
-}
-
-.logiCont{
- display: flex;
- justify-content: space-evenly;
-}
-
-.butts:hover{
- background-color: #26A4FF;
-}
\ No newline at end of file
diff --git a/connect/src/pages/LoginPg/login.jsx b/connect/src/pages/LoginPg/login.jsx
deleted file mode 100644
index 947d398..0000000
--- a/connect/src/pages/LoginPg/login.jsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, {useEffect, useState} from "react";
-import {useNavigate} from "react-router-dom";
-import {HiArrowLeft} from "react-icons/hi";
-import TextField from "@mui/material/TextField";
-import {Formik, ErrorMessage as FormikErrorMessage} from 'formik';
-import * as Yup from 'yup';
-import {Button, Checkbox, FormControlLabel, FormGroup} from "@mui/material";
-import style from './index.module.css'
-import loginIm from '../../assets/signup3.jpg'
-import {loginApi} from "../../component/skilledworkerApi";
-
-const Login = () => {
-
- const [loading, setLoading] = useState(false);
- const [errorMessage, setErrorMessage] = useState('');
- const [showPassword, setShowPassword] = useState(false);
-
-
- const validationSchema = Yup.object().shape({
- fullName: Yup.string()
- .matches(/^[a-zA-Z\s]+$/, 'Name should only contain letters and spaces')
- .required('Full Name is required'),
- email: Yup.string()
- .email('Invalid email address')
- .matches(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, 'Must be a valid email Address')
- .required('Email Address is required'),
- });
-
- const [form, setForm] = useState({
- email: '',
- password: '',
- });
- const navigate = useNavigate();
-
- const handleChange = (e) => {
- const { name, value, type, checked } = e.target;
- setForm({
- ...form,
- [name]: type === 'checkbox' ? checked : value
- });
- };
-
- const handleSubmit = async (event) => {
- event.preventDefault()
- setLoading(true);
- setErrorMessage('');
-
-
- try {
- const response = await loginApi(form);
- const { token, refreshToken } = response.data.data;
- localStorage.setItem('accessToken', token);
- localStorage.setItem('refreshToken', refreshToken);
- navigate('/');
- } catch (error) {
- if (error.response && error.response.data) {
- setErrorMessage(error.response.data.message);
- } else {
- setErrorMessage('An unexpected error occurred.');
- }
- } finally {
- setLoading(false);
- }
- };
-
- const togglePasswordVisibility = () => {
- setShowPassword(!showPassword);
- };
-
- useEffect(() => {
- if (errorMessage) {
- const timer = setTimeout(() => {
- setErrorMessage('');
- }, 3000);
-
- return () => clearTimeout(timer);
- }
- }, [errorMessage]);
-
- const roundedStyle = {
- '& .MuiOutlinedInput-root': {
- borderRadius: '9999px',
- },
- };
-
- return (
-
-
- {errorMessage && (
-
- {errorMessage}
-
- )}
-
-
-
-
-
- navigate('/')}
- className={style.backButton}
- >
-
-
-
-
Log in
-
-
- } label="Remember me"/>
-
-
-
-
Don't have an Account? navigate('/client')}
- >Signup as client
- navigate('/skilWok')}
- >Signup as worker
-
-
-
-
-
-
-
-
-
- {errorMessage && (
-
- {errorMessage}
-
- )}
-
-
- {({values,handleChange,handleSubmit}) => (
-
-
-
- navigate('/')}
- className={style.backButton}
- >
-
-
-
-
-
-
-
-
- {errorMessage && (
-
- {errorMessage}
-
- )}
-
-
-
-
-
- navigate('/')}
- className={style.backButton}
- >
-
-
-
-
-
-
-
`.
+
+### 2. (Optional) Extend `AppointmentStatus` for the escrow lifecycle
+
+Current enum: `ACCEPTED, DECLINED, SCHEDULED, CANCELLED, UPDATED`.
+
+The redesign shows a **"confirm & release"** step (client releases escrow once the job
+is done). There's no `COMPLETED`/`RELEASED` state to represent that. If escrow
+release is in scope, add e.g. `COMPLETED` (job done, funds released) and optionally
+`REFUNDED`. If not, the UI will map "done" onto existing states and hide the release
+action until the Soroban escrow work lands.
+
+### 3. Mutation endpoints — no change needed
+
+The frontend now matches these as-is:
+
+| Action | Method | Path | Body |
+|---|---|---|---|
+| Cancel | `PUT` | `/api/v1/client/cancelAppointment?appointmentId={id}` | — |
+| Accept/decline | `PUT` | `/api/v1/client/updateAppointment?appointmentId={id}` | `{ "status": "ACCEPTED" \| "DECLINED", ... }` |
+| Delete | `DELETE` | `/api/v1/client/deleteAppointment?appointmentId={id}` | `{ "appointment_Id": {id} }` |
+
+All wrap their payload in `ApiResponse { data, status }` — the frontend unwraps `data`.
+
+## Frontend readiness
+
+- `api.ts` already calls the correct method/params for cancel/update/delete and unwraps
+ `ApiResponse`.
+- `types.ts` has an `Appointment` interface ready for the richer record above; only
+ `viewAllAppointment`'s response needs to become that list.
+- Once the list ships, the cancel/update screens drop their temporary manual-id input
+ and populate a picker/list automatically, and the account redesign can be built for real.
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..7a865a4
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,26 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+ ...nextVitals,
+ ...nextTs,
+ // Override default ignores of eslint-config-next.
+ globalIgnores([
+ // Default ignores of eslint-config-next:
+ ".next/**",
+ "out/**",
+ "build/**",
+ "next-env.d.ts",
+ ]),
+ {
+ rules: {
+ // Advisory, not a correctness error: this fires on standard patterns
+ // like fetch-on-mount and hydration-safe reads (e.g. theme from
+ // localStorage). Kept visible as a warning rather than blocking CI.
+ "react-hooks/set-state-in-effect": "warn",
+ },
+ },
+]);
+
+export default eslintConfig;
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..9edff1c
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+///
+
+
+
diff --git a/public/brand/guildworkman-adinkra.png b/public/brand/guildworkman-adinkra.png
new file mode 100644
index 0000000..9cbbc8b
Binary files /dev/null and b/public/brand/guildworkman-adinkra.png differ
diff --git a/public/brand/guildworkman-adinkra.svg b/public/brand/guildworkman-adinkra.svg
new file mode 100644
index 0000000..2dfd6e6
--- /dev/null
+++ b/public/brand/guildworkman-adinkra.svg
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/public/brand/guildworkman-appicon.png b/public/brand/guildworkman-appicon.png
new file mode 100644
index 0000000..a05b29a
Binary files /dev/null and b/public/brand/guildworkman-appicon.png differ
diff --git a/public/brand/guildworkman-appicon.svg b/public/brand/guildworkman-appicon.svg
new file mode 100644
index 0000000..f688e2d
--- /dev/null
+++ b/public/brand/guildworkman-appicon.svg
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/public/brand/guildworkman-lockup-reversed.png b/public/brand/guildworkman-lockup-reversed.png
new file mode 100644
index 0000000..e4dbca1
Binary files /dev/null and b/public/brand/guildworkman-lockup-reversed.png differ
diff --git a/public/brand/guildworkman-lockup-reversed.svg b/public/brand/guildworkman-lockup-reversed.svg
new file mode 100644
index 0000000..a691eea
--- /dev/null
+++ b/public/brand/guildworkman-lockup-reversed.svg
@@ -0,0 +1,4 @@
+
+ GuildWorkman
+
diff --git a/public/brand/guildworkman-lockup-stacked.png b/public/brand/guildworkman-lockup-stacked.png
new file mode 100644
index 0000000..2e87b83
Binary files /dev/null and b/public/brand/guildworkman-lockup-stacked.png differ
diff --git a/public/brand/guildworkman-lockup-stacked.svg b/public/brand/guildworkman-lockup-stacked.svg
new file mode 100644
index 0000000..405c14b
--- /dev/null
+++ b/public/brand/guildworkman-lockup-stacked.svg
@@ -0,0 +1,4 @@
+
+ GuildWorkman
+
diff --git a/public/brand/guildworkman-lockup.png b/public/brand/guildworkman-lockup.png
new file mode 100644
index 0000000..741d6aa
Binary files /dev/null and b/public/brand/guildworkman-lockup.png differ
diff --git a/public/brand/guildworkman-lockup.svg b/public/brand/guildworkman-lockup.svg
new file mode 100644
index 0000000..a588bdd
--- /dev/null
+++ b/public/brand/guildworkman-lockup.svg
@@ -0,0 +1,4 @@
+
+ GuildWorkman
+
diff --git a/public/brand/guildworkman-star-mono.png b/public/brand/guildworkman-star-mono.png
new file mode 100644
index 0000000..4781387
Binary files /dev/null and b/public/brand/guildworkman-star-mono.png differ
diff --git a/public/brand/guildworkman-star-mono.svg b/public/brand/guildworkman-star-mono.svg
new file mode 100644
index 0000000..a48953f
--- /dev/null
+++ b/public/brand/guildworkman-star-mono.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/public/brand/guildworkman-star.png b/public/brand/guildworkman-star.png
new file mode 100644
index 0000000..3cbe618
Binary files /dev/null and b/public/brand/guildworkman-star.png differ
diff --git a/public/brand/guildworkman-star.svg b/public/brand/guildworkman-star.svg
new file mode 100644
index 0000000..2c54e26
--- /dev/null
+++ b/public/brand/guildworkman-star.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/public/brand/study/workman-chevron.png b/public/brand/study/workman-chevron.png
new file mode 100644
index 0000000..4635fe8
Binary files /dev/null and b/public/brand/study/workman-chevron.png differ
diff --git a/public/brand/study/workman-chevron.svg b/public/brand/study/workman-chevron.svg
new file mode 100644
index 0000000..f352d28
--- /dev/null
+++ b/public/brand/study/workman-chevron.svg
@@ -0,0 +1,10 @@
+
+ workman
+ LABS
+
diff --git a/public/brand/study/workman-forge.png b/public/brand/study/workman-forge.png
new file mode 100644
index 0000000..be973f2
Binary files /dev/null and b/public/brand/study/workman-forge.png differ
diff --git a/public/brand/study/workman-forge.svg b/public/brand/study/workman-forge.svg
new file mode 100644
index 0000000..cce8878
--- /dev/null
+++ b/public/brand/study/workman-forge.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+ WORKMAN
+ LABS
+
diff --git a/public/brand/study/workman-seal.png b/public/brand/study/workman-seal.png
new file mode 100644
index 0000000..04bd9e0
Binary files /dev/null and b/public/brand/study/workman-seal.png differ
diff --git a/public/brand/study/workman-seal.svg b/public/brand/study/workman-seal.svg
new file mode 100644
index 0000000..7d6978f
--- /dev/null
+++ b/public/brand/study/workman-seal.svg
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ WORKMAN · LABS
+
+
+ CRAFT · SYSTEMS
+
+ W
+ EST · 2026
+
diff --git a/public/brand/workman-labs-avatar.png b/public/brand/workman-labs-avatar.png
new file mode 100644
index 0000000..3803c05
Binary files /dev/null and b/public/brand/workman-labs-avatar.png differ
diff --git a/public/brand/workman-labs-avatar.svg b/public/brand/workman-labs-avatar.svg
new file mode 100644
index 0000000..4b7308e
--- /dev/null
+++ b/public/brand/workman-labs-avatar.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
diff --git a/public/icons/icon-192.png b/public/icons/icon-192.png
new file mode 100644
index 0000000..1b63aaa
Binary files /dev/null and b/public/icons/icon-192.png differ
diff --git a/public/icons/icon-512.png b/public/icons/icon-512.png
new file mode 100644
index 0000000..3803c05
Binary files /dev/null and b/public/icons/icon-512.png differ
diff --git a/src/app/appMan/page.tsx b/src/app/appMan/page.tsx
new file mode 100644
index 0000000..815917c
--- /dev/null
+++ b/src/app/appMan/page.tsx
@@ -0,0 +1,11 @@
+import BookAppointmentForm from "@/components/BookAppointmentForm";
+import CancelAppointmentForm from "@/components/CancelAppointmentForm";
+
+export default function AppointmentManagerPage() {
+ return (
+
+
+ );
+}
diff --git a/src/app/apple-icon.png b/src/app/apple-icon.png
new file mode 100644
index 0000000..96fe85d
Binary files /dev/null and b/src/app/apple-icon.png differ
diff --git a/src/app/appoint/page.tsx b/src/app/appoint/page.tsx
new file mode 100644
index 0000000..9e67c2f
--- /dev/null
+++ b/src/app/appoint/page.tsx
@@ -0,0 +1,5 @@
+import AppointmentHub from "@/components/AppointmentHub";
+
+export default function AppointPage() {
+ return = {
+ electrical: "Electricians",
+ plumbing: "Plumbers",
+ beauty: "Beauty pros",
+ carpentry: "Carpenters",
+ fashion: "Fashion designers",
+ photography: "Photographers",
+};
+
+const AREA = "Yaba, Lagos";
+
+export default async function BrowseCategoryPage({
+ params,
+}: {
+ params: Promise<{ category: string }>;
+}) {
+ const { category } = await params;
+ const meta = getCategory(category);
+ if (!meta) notFound();
+
+ const workers = getWorkersByCategory(meta.key);
+ const heading = PLURAL[meta.key];
+
+ return (
+ <>
+
+
+
All trades
+
+
+
{heading} near you
+
+ {meta.count} pros available in {AREA}
+
+
+
+
+
+ {workers.map((w) => (
+
+
+
+ Show more pros
+
+
+
+ Change
+
+
+
+ What do you need done?
+
+
+ Pick a trade to see verified pros near you. Every booking is escrow-protected.
+
+
+
+
+
+
+ {CATEGORIES.map((c) => (
+
+
+
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..7345a6e
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "leaflet/dist/leaflet.css";
+import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import { NotificationProvider } from "@/components/notifications/useNotifications";
+import { ThemeProvider } from "@/components/ThemeProvider";
+import NotificationToast from "@/components/notifications/NotificationToast";
+
+const inter = Inter({
+ variable: "--font-inter",
+ subsets: ["latin"],
+});
+
+// Runs before paint so the correct theme is applied with no flash: honour a
+// stored preference, otherwise fall back to the OS setting (handled in CSS).
+const themeScript = `(function(){try{var t=localStorage.getItem('theme');var r=document.documentElement;if(t==='light'||t==='dark'){r.setAttribute('data-theme',t);r.style.colorScheme=t;}else{r.style.colorScheme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}}catch(e){}})();`;
+
+export const metadata: Metadata = {
+ title: "GuildWorkman — Book trusted local pros",
+ description:
+ "Book vetted electricians, plumbers, carpenters and stylists near you — with payment held in on-chain escrow until the job is done.",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..03c9634
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import LoginForm from "@/components/LoginForm";
+
+export default function LoginPage() {
+ return (
+
+
+ );
+}
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
new file mode 100644
index 0000000..7d82f8c
--- /dev/null
+++ b/src/app/manifest.ts
@@ -0,0 +1,35 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+ return {
+ name: "GuildWorkman — Book trusted local pros",
+ short_name: "GuildWorkman",
+ description:
+ "Book vetted electricians, plumbers, carpenters and stylists near you — with payment held in on-chain escrow until the job is done.",
+ start_url: "/",
+ display: "standalone",
+ background_color: "#fbf8f1",
+ theme_color: "#1b2440",
+ icons: [
+ {
+ src: "/icons/icon-192.png",
+ sizes: "192x192",
+ type: "image/png",
+ purpose: "any",
+ },
+ {
+ src: "/icons/icon-512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "any",
+ },
+ {
+ // The star sits inside the central 60%, so it survives the safe-zone crop.
+ src: "/icons/icon-512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "maskable",
+ },
+ ],
+ };
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..b9ee3e2
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,19 @@
+import Hero from "@/components/Hero";
+import HomeCategories from "@/components/HomeCategories";
+import HowItWorks from "@/components/HowItWorks";
+import FeaturedPros from "@/components/FeaturedPros";
+import StatsBand from "@/components/StatsBand";
+import WorkerCta from "@/components/WorkerCta";
+
+export default function Home() {
+ return (
+ <>
+
+
+ Onboarding
+
+
Verify your identity
+
+ A few quick steps to confirm who you are. You can save your progress and come back any
+ time before submitting.
+
+
+
+
+
+ Appointments
+
+
Manage your bookings
+
Everything you need in one place.
+
+
+ {actions.map((action) => (
+
+
+
+
+
{action.label}
+
{action.copy}
+
router.push(action.path)} className="w-fit">
+ {action.label}
+
+
+ ))}
+
+
+
Book an appointment
+
Pick a category, then a date and time that works.
+
+
+
+ {categories.map((category) => (
+ setCurrentCategory(category)}
+ />
+ ))}
+
+
+
+ {details.length > 0 && (
+
+ {details.map((detail, index) => (
+
+ )}
+
+
+
+
+
router.push("/")} className="mt-4 text-muted underline text-sm">
+ Back to Home
+
+
+
+
([]);
+ const [loading, setLoading] = useState(true);
+ const [cancelling, setCancelling] = useState(null);
+ const [errorMessage, setErrorMessage] = useState("");
+ const [successMessage, setSuccessMessage] = useState("");
+
+ const load = useCallback(async () => {
+ const clientId = getClientId();
+ if (!clientId) {
+ setErrorMessage("You need to be signed in to cancel an appointment.");
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const res = await viewAllAppointmentApi(clientId);
+ setAppointments((res.data ?? []).filter((a) => !isClosed(a)).sort(byScheduleTime));
+ } catch (error) {
+ setErrorMessage(getErrorMessage(error, "Failed to load your appointments."));
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ void load();
+ }, [load]);
+
+ const handleCancel = async (appointmentId: number) => {
+ setCancelling(appointmentId);
+ setErrorMessage("");
+ setSuccessMessage("");
+ try {
+ await cancelAppointmentApi(appointmentId);
+ // Drop it locally rather than refetching — it's no longer cancellable.
+ setAppointments((current) => current.filter((a) => a.id !== appointmentId));
+ setSuccessMessage("Appointment cancelled.");
+ } catch (error) {
+ setErrorMessage(
+ getErrorMessage(error, "An error occurred while cancelling the appointment.")
+ );
+ } finally {
+ setCancelling(null);
+ }
+ };
+
+ return (
+
+
Cancel an appointment
+
+ Pick the job you want to call off. Cancelled and declined jobs aren't shown.
+
+
+ {loading &&
Loading…
}
+
+ {!loading && appointments.length === 0 && !errorMessage && (
+
+ Nothing to cancel
+ You have no active appointments.
+
+ )}
+
+
+ {appointments.map((appointment) => (
+
+ {formatCategory(appointment.category)}
+
+ {formatScheduleTime(appointment.scheduleTime)}
+ {appointment.worker ? ` · ${appointment.worker.fullName}` : ""}
+
+ void handleCancel(appointment.id)}
+ disabled={cancelling !== null}
+ className="mt-3 w-full rounded-full bg-err py-2.5 font-medium text-white transition-colors hover:bg-err/90 disabled:opacity-40"
+ >
+ {cancelling === appointment.id ? "Cancelling…" : "Cancel appointment"}
+
+
+ ))}
+
+
+ {errorMessage &&
{errorMessage}
}
+ {successMessage &&
{successMessage}
}
+
+ {categoryName}
+
+ );
+}
diff --git a/src/components/FeaturedPros.tsx b/src/components/FeaturedPros.tsx
new file mode 100644
index 0000000..53734a6
--- /dev/null
+++ b/src/components/FeaturedPros.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { FaArrowRight } from "react-icons/fa6";
+import WorkerCard from "./marketplace/WorkerCard";
+import { FEATURED_WORKERS } from "@/lib/marketplace";
+
+export default function FeaturedPros() {
+ return (
+
+
+
+
+
+ Top-rated near you
+
+
+ Pros clients keep re-booking
+
+
+
+ See all in Lagos
+
+
+
+ {FEATURED_WORKERS.map((w) => (
+
+
+ );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..874cc19
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,58 @@
+import Link from "next/link";
+import Logo from "./brand/Logo";
+import NorthStar from "./brand/NorthStar";
+
+const COLS = [
+ {
+ title: "Trades",
+ links: ["Electrical", "Plumbing", "Beauty Care", "Carpentry", "Fashion", "Photography"],
+ },
+ {
+ title: "Company",
+ links: ["How it works", "Trust & escrow", "About", "Help centre"],
+ },
+ {
+ title: "Get started",
+ links: ["Find a pro", "Join as a pro", "Log in", "Download the app"],
+ },
+];
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..73d523a
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,127 @@
+import {
+ FaMagnifyingGlass,
+ FaLocationDot,
+ FaShieldHalved,
+ FaClock,
+ FaCheck,
+} from "react-icons/fa6";
+import NorthStar from "./brand/NorthStar";
+import AdinkraPattern from "./brand/AdinkraPattern";
+import WorkerCard from "./marketplace/WorkerCard";
+import { buttonClasses } from "./ui/Button";
+import { FEATURED_WORKERS, TRADES, LAGOS_AREAS } from "@/lib/marketplace";
+
+function SelectField({
+ label,
+ icon,
+ options,
+ name,
+}: {
+ label: string;
+ icon: React.ReactNode;
+ options: string[];
+ name: string;
+}) {
+ return (
+
+ {icon}
+
+
+ {label}
+
+
+ {options.map((o) => (
+ {o}
+ ))}
+
+
+
+ );
+}
+
+export default function Hero() {
+ const heroWorkers = FEATURED_WORKERS.slice(0, 2);
+
+ return (
+
+ );
+}
diff --git a/src/components/HomeCategories.tsx b/src/components/HomeCategories.tsx
new file mode 100644
index 0000000..9b62b47
--- /dev/null
+++ b/src/components/HomeCategories.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { FaArrowRight } from "react-icons/fa6";
+import CategoryTile from "./marketplace/CategoryTile";
+import { CATEGORIES } from "@/lib/marketplace";
+
+export default function HomeCategories() {
+ return (
+
+
+
+
+
+ Browse by trade
+
+
+ Whatever the job, there's a pro for it
+
+
+
+ All trades
+
+
+
+ {CATEGORIES.map((c) => (
+
+
+ );
+}
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
new file mode 100644
index 0000000..675a2aa
--- /dev/null
+++ b/src/components/HowItWorks.tsx
@@ -0,0 +1,79 @@
+import { FaMagnifyingGlass, FaLock } from "react-icons/fa6";
+import NorthStar from "./brand/NorthStar";
+
+export default function HowItWorks() {
+ return (
+
+
+
+
+ How it works
+
+
+ Trust built into every booking
+
+
+ Your money is held on-chain and only moves when you say the job is
+ done — so booking a stranger stops feeling like a risk.
+
+
+
+
+
+
+ );
+}
+
+function Step({
+ n,
+ title,
+ icon,
+ children,
+ highlight = false,
+ chip,
+}: {
+ n: string;
+ title: string;
+ icon: React.ReactNode;
+ children: React.ReactNode;
+ highlight?: boolean;
+ chip?: string;
+}) {
+ return (
+
+
{n}
+
+ {icon} {title}
+
+
{children}
+ {chip ? (
+
+ {chip}
+
+ ) : null}
+
+
+
router.push("/")} className="flex items-center gap-1 text-white/70 hover:text-white w-fit">
+
+
+
+ “Verified skill, honest pay, real trust.”
+
+
+ GuildWorkman connects clients with skilled tradespeople they can
+ count on.
+
+
+
+
+
+
+
+
router.push("/")} className="lg:hidden flex items-center gap-1 mb-8 text-muted">
+
+
Welcome back
+
+ Log in {userType === "worker" ? "as a skilled worker" : "as a client"}
+
+
+ {errorMessage && (
+
{errorMessage}
+ )}
+
+
{
+ setLoading(true);
+ setErrorMessage("");
+
+ try {
+ const response = await loginApi(values, userType);
+ const { token, refreshToken, userId } = response.data.data;
+ localStorage.setItem("accessToken", token);
+ localStorage.setItem("refreshToken", refreshToken);
+ localStorage.setItem("userId", userId);
+ router.push("/book");
+ } catch (error) {
+ setErrorMessage(getErrorMessage(error, "An unexpected error occurred."));
+ } finally {
+ setLoading(false);
+ setSubmitting(false);
+ }
+ }}
+ >
+ {({ values, handleChange, handleSubmit, isSubmitting }) => (
+
+ )}
+
+
+
+ Don't have an account?{" "}
+ router.push("/client")}>
+ Sign up as client
+ {" "}
+ or{" "}
+ router.push("/skilWok")}>
+ sign up as worker
+
+
+
+
+
+
+
+
+
+
+
+ {navLinks.map((link) => (
+
+
+
+
+
+
+ setOpen((o) => !o)}
+ >
+ {open ?
+
+
+
+ {navLinks.map((link) => (
+
+
+
+
+ );
+}
diff --git a/src/components/ProfileForm.tsx b/src/components/ProfileForm.tsx
new file mode 100644
index 0000000..502621a
--- /dev/null
+++ b/src/components/ProfileForm.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { useDropzone } from "react-dropzone";
+import {
+ HiHome,
+ HiCalendar,
+ HiUser,
+ HiShieldCheck,
+ HiLockClosed,
+ HiMail,
+ HiQuestionMarkCircle,
+ HiUpload,
+} from "react-icons/hi";
+import Button from "./ui/Button";
+import Input from "./ui/Input";
+import Select from "./ui/Select";
+import Card from "./ui/Card";
+
+interface ProfileFormValues {
+ fullName: string;
+ phoneNumber?: string;
+ email: string;
+ dob?: string;
+ gender: string;
+ accountType: string;
+}
+
+const navItems = [
+ { icon: HiHome, label: "Dashboard" },
+ { icon: HiCalendar, label: "Appointment" },
+ { icon: HiUser, label: "My Profile", active: true },
+ { icon: HiShieldCheck, label: "Verify Identity", href: "/verify-identity" },
+ { icon: HiLockClosed, label: "Login Details" },
+ { icon: HiMail, label: "Message" },
+ { icon: HiQuestionMarkCircle, label: "Help" },
+];
+
+export default function ProfileForm() {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+ const [profileImage, setProfileImage] = useState(null);
+ const [successMessage, setSuccessMessage] = useState(false);
+
+ const onDrop = (acceptedFiles: File[]) => {
+ if (acceptedFiles[0]) {
+ setProfileImage(URL.createObjectURL(acceptedFiles[0]));
+ }
+ };
+
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
+ onDrop,
+ accept: { "image/*": [] },
+ maxFiles: 1,
+ });
+
+ const onSubmit = () => {
+ setSuccessMessage(true);
+ setTimeout(() => setSuccessMessage(false), 3000);
+ };
+
+ return (
+
+
+ My Account
+
+
+ {navItems.map((item) => {
+ const itemClassName = `flex items-center gap-3 px-3 py-2.5 rounded-xl ${
+ item.active ? "bg-terra text-white font-medium" : "text-white/70 hover:bg-white/5"
+ }`;
+ return (
+
+ {item.href ? (
+
+
+ )}
+
+ );
+ })}
+
+
+
+
+
+ Profile Information
+ Update your personal information below.
+
+ {successMessage && (
+
+ Saved successfully!
+
+ )}
+
+
+
+
+ {profileImage ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
+
+ {isDragActive ? (
+
Drop the image here...
+ ) : (
+
+ Click to upload or drag and drop
+
+ )}
+
+ )}
+
+
+
= {
+ client: "Find someone reliable, fast — and know their work is verified.",
+ worker: "Build a reputation that follows you, job after job.",
+};
+
+export default function SignupForm({ userType }: SignupFormProps) {
+ const router = useRouter();
+ const [message, setMessage] = useState("");
+ const [isError, setIsError] = useState(false);
+
+ useEffect(() => {
+ if (!message) return;
+ const timer = setTimeout(() => setMessage(""), 4000);
+ return () => clearTimeout(timer);
+ }, [message]);
+
+ const signupApi = userType === "worker" ? skillWorkerApi : clientSignupApi;
+
+ return (
+
+
+
router.push("/")} className="flex items-center gap-1 text-white/70 hover:text-white w-fit">
+
+
+
+
+
+
+
+
router.push("/")} className="lg:hidden flex items-center gap-1 mb-8 text-muted">
+
+
+ Join as a {userType === "worker" ? "skilled worker" : "client"}
+
+
Create your GuildWorkman account.
+
+ {message && (
+
+ {message}
+
+ )}
+
+
{
+ setIsError(false);
+ setMessage("");
+ try {
+ const response = await signupApi(values);
+ setMessage(response.message || "Sign up successful!");
+ setTimeout(() => router.push("/"), 500);
+ } catch (error) {
+ setMessage(getErrorMessage(error, "Sign up failed."));
+ setIsError(true);
+ } finally {
+ setSubmitting(false);
+ }
+ }}
+ >
+ {({ values, handleChange, handleSubmit, isSubmitting }) => (
+
+ )}
+
+
+
+ Already have an account?{" "}
+ router.push(userType === "worker" ? "/login?as=worker" : "/login")}
+ >
+ Log in
+
+
+
+
+
+
+
+
+
{name}
+
+ {skill}
+ Escrow protected
+
+
{description}
+
+ );
+}
diff --git a/src/components/StatsBand.tsx b/src/components/StatsBand.tsx
new file mode 100644
index 0000000..d5560ef
--- /dev/null
+++ b/src/components/StatsBand.tsx
@@ -0,0 +1,37 @@
+import AdinkraPattern from "./brand/AdinkraPattern";
+
+const STATS = [
+ { v: "₦2.4M", label: "held in escrow this week", cur: "₦" },
+ { v: "12,400", label: "verified pros on the guild" },
+ { v: "4.8★", label: "average job rating", cur: "★" },
+ { v: "~18", label: "min average reply time", suffix: " min" },
+];
+
+export default function StatsBand() {
+ return (
+
+
+
+
+ {STATS.map((s) => (
+
+
+ {s.v.split("").map((ch, i) =>
+ s.cur && ch === s.cur ? (
+
+ {ch}
+
+ ) : (
+ {ch}
+ )
+ )}
+ {s.suffix ? {s.suffix} : null}
+
+
{s.label}
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..4305076
--- /dev/null
+++ b/src/components/ThemeProvider.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+ type ReactNode,
+} from "react";
+
+type Theme = "light" | "dark";
+
+// ── Context shape ───────────────────────────────────────────────────
+interface ThemeContextValue {
+ theme: Theme;
+ toggleTheme: () => void;
+ setTheme: (t: Theme) => void;
+}
+
+const ThemeContext = createContext(null);
+
+// ── Provider ────────────────────────────────────────────────────────
+export function ThemeProvider({ children }: { children: ReactNode }) {
+ // Start with null so we can avoid a hydration mismatch — the inline
+ // script in layout.tsx runs before React, so the DOM is already correct.
+ const [theme, setThemeState] = useState(null);
+
+ // Hydrate from localStorage (or system preference) on mount. The inline
+ // script has already stamped the correct value, so we just read it back.
+ useEffect(() => {
+ const stored = localStorage.getItem("theme");
+ if (stored === "light" || stored === "dark") {
+ setThemeState(stored);
+ } else {
+ setThemeState(
+ window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? "dark"
+ : "light"
+ );
+ }
+ }, []);
+
+ const applyTheme = useCallback((t: Theme) => {
+ const root = document.documentElement;
+ root.setAttribute("data-theme", t);
+ root.style.colorScheme = t;
+ localStorage.setItem("theme", t);
+ }, []);
+
+ const setTheme = useCallback(
+ (t: Theme) => {
+ setThemeState(t);
+ applyTheme(t);
+ },
+ [applyTheme]
+ );
+
+ const toggleTheme = useCallback(() => {
+ setThemeState((prev) => {
+ const next: Theme = prev === "dark" ? "light" : "dark";
+ applyTheme(next);
+ return next;
+ });
+ }, [applyTheme]);
+
+ // Listen for system-preference changes when no explicit choice is stored.
+ useEffect(() => {
+ const mq = window.matchMedia("(prefers-color-scheme: dark)");
+ const handler = (e: MediaQueryListEvent) => {
+ // Only auto-switch when the user hasn't made an explicit choice.
+ // (An explicit choice is always in localStorage.)
+ if (localStorage.getItem("theme") !== null) return;
+ const next: Theme = e.matches ? "dark" : "light";
+ setThemeState(next);
+ applyTheme(next);
+ };
+ mq.addEventListener("change", handler);
+ return () => mq.removeEventListener("change", handler);
+ }, [applyTheme]);
+
+ // Provide a stable default until hydration so children don't crash.
+ const value: ThemeContextValue = {
+ theme: theme ?? "light",
+ toggleTheme,
+ setTheme,
+ };
+
+ return (
+ {children}
+ );
+}
+
+// ── Hook ────────────────────────────────────────────────────────────
+export function useTheme(): ThemeContextValue {
+ const ctx = useContext(ThemeContext);
+ if (!ctx) {
+ throw new Error("useTheme must be used within a ");
+ }
+ return ctx;
+}
\ No newline at end of file
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..57327a4
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { FaSun, FaMoon } from "react-icons/fa6";
+import { useTheme } from "./ThemeProvider";
+
+/** Light/dark toggle. Defaults to the system preference; once toggled,
+ the choice is stamped on and persisted. The initial
+ paint is handled by the inline script in the root layout (no FOUC). */
+export default function ThemeToggle() {
+ const { theme, toggleTheme } = useTheme();
+
+ return (
+
+ {theme === "dark" ? (
+
+ );
+}
diff --git a/src/components/UpdateAppointmentForm.tsx b/src/components/UpdateAppointmentForm.tsx
new file mode 100644
index 0000000..3f2a7f1
--- /dev/null
+++ b/src/components/UpdateAppointmentForm.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { updateAppointmentApi, viewAllAppointmentApi } from "@/lib/api";
+import {
+ STATUS_TONE,
+ byScheduleTime,
+ formatCategory,
+ formatScheduleTime,
+ getClientId,
+ isClosed,
+} from "@/lib/appointments";
+import { formatNaira } from "@/lib/marketplace";
+import {
+ getErrorMessage,
+ type AppointmentStatus,
+ type ViewAllAppointmentsResponse,
+} from "@/lib/types";
+import Card from "./ui/Card";
+
+/** Which appointment is mid-request, and what we're setting it to. */
+interface Pending {
+ id: number;
+ status: AppointmentStatus;
+}
+
+export default function UpdateAppointmentForm() {
+ const [appointments, setAppointments] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [pending, setPending] = useState(null);
+ const [message, setMessage] = useState("");
+
+ const load = useCallback(async () => {
+ const clientId = getClientId();
+ if (!clientId) {
+ setMessage("You need to be signed in to respond to a request.");
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const res = await viewAllAppointmentApi(clientId);
+ setAppointments((res.data ?? []).filter((a) => !isClosed(a)).sort(byScheduleTime));
+ } catch (error) {
+ setMessage(getErrorMessage(error, "Failed to load requests."));
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ void load();
+ }, [load]);
+
+ const respond = async (appointmentId: number, status: AppointmentStatus) => {
+ setPending({ id: appointmentId, status });
+ setMessage("");
+ try {
+ await updateAppointmentApi(appointmentId, { status });
+ if (status === "DECLINED") {
+ setAppointments((current) => current.filter((a) => a.id !== appointmentId));
+ } else {
+ setAppointments((current) =>
+ current.map((a) => (a.id === appointmentId ? { ...a, status } : a))
+ );
+ }
+ setMessage(`Appointment ${status.toLowerCase()}.`);
+ } catch (error) {
+ setMessage(getErrorMessage(error, "Error updating appointment."));
+ } finally {
+ setPending(null);
+ }
+ };
+
+ const isPending = (appointmentId: number, status: AppointmentStatus) =>
+ pending?.id === appointmentId && pending.status === status;
+
+ return (
+
+
Respond to a request
+
+ Accept or decline the jobs waiting on you.
+
+
+ {loading &&
Loading…
}
+
+ {!loading && appointments.length === 0 && (
+
+ No open requests
+
+ Nothing is waiting on a response right now.
+
+
+ )}
+
+
+ {appointments.map((appointment) => (
+
+
+
+
+ {formatCategory(appointment.category)}
+
+
+ {formatScheduleTime(appointment.scheduleTime)}
+
+
+
+
+ {appointment.status.charAt(0) +
+ appointment.status.slice(1).toLowerCase()}
+
+ {appointment.amount !== null && (
+
+ {formatNaira(appointment.amount)}
+
+ )}
+
+
+ void respond(appointment.id, "ACCEPTED")}
+ >
+ {isPending(appointment.id, "ACCEPTED") ? "Accepting…" : "Accept"}
+
+ void respond(appointment.id, "DECLINED")}
+ >
+ {isPending(appointment.id, "DECLINED") ? "Declining…" : "Decline"}
+
+
+
+ ))}
+
+
+ {message &&
{message}
}
+
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const load = useCallback(async () => {
+ const clientId = getClientId();
+ if (!clientId) {
+ setError("You need to be signed in to see your appointments.");
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ setError(null);
+ try {
+ const res = await viewAllAppointmentApi(clientId);
+ setAppointments([...(res.data ?? [])].sort(byScheduleTime));
+ } catch (err) {
+ setError(getErrorMessage(err, "Failed to fetch appointments."));
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ void load();
+ }, [load]);
+
+ return (
+
+
Your appointments
+
+ Every job you've booked, soonest first.
+
+
+ {loading &&
Loading…
}
+
+ {error && !loading && (
+
+ {error}
+ void load()}
+ className="mt-3 text-sm font-medium text-navy underline underline-offset-4"
+ >
+ Try again
+
+
+ )}
+
+ {!loading && !error && appointments.length === 0 && (
+
+ No appointments yet
+
+ When you book a pro, the job shows up here.
+
+
+ )}
+
+
+ {appointments.map((appointment) => (
+
+
+
+
+ {formatCategory(appointment.category)}
+
+
+ {formatScheduleTime(appointment.scheduleTime)}
+
+
+ {appointment.worker
+ ? appointment.worker.fullName
+ : "No pro assigned yet"}
+
+
+
+
+ {appointment.status.charAt(0) +
+ appointment.status.slice(1).toLowerCase()}
+
+ {appointment.amount !== null && (
+
+ {formatNaira(appointment.amount)}
+
+ )}
+
+
+ ))}
+
+
= {
+ PUBLIC: "Mainnet",
+ TESTNET: "Testnet",
+ FUTURENET: "Futurenet",
+};
+
+interface WalletButtonProps {
+ variant?: "navbar" | "mobile";
+}
+
+export default function WalletButton({ variant = "navbar" }: WalletButtonProps) {
+ const { address, network, connecting, error, freighterMissing, connect, disconnect } = useWallet();
+ const [open, setOpen] = useState(false);
+ const rootRef = useRef(null);
+
+ useEffect(() => {
+ function onClickOutside(e: MouseEvent) {
+ if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+ setOpen(false);
+ }
+ }
+ document.addEventListener("mousedown", onClickOutside);
+ return () => document.removeEventListener("mousedown", onClickOutside);
+ }, []);
+
+ const baseButton =
+ "inline-flex items-center gap-2 rounded-full border border-white/40 px-4 py-1.5 text-sm text-white hover:bg-white/10 transition-colors";
+
+ if (address) {
+ return (
+
+
setOpen((o) => !o)}
+ className={`${baseButton} ${variant === "mobile" ? "w-full justify-between" : ""}`}
+ >
+
+ {open && (
+
+
+
Connected to
+
{network ? NETWORK_LABELS[network] ?? network : "Stellar"}
+
{address}
+
+
{
+ disconnect();
+ setOpen(false);
+ }}
+ className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-err hover:bg-err/5"
+ >
+
+
+ )}
+
+
+
+ {freighterMissing && (
+
+ Freighter wallet not found.{" "}
+
+ Install it
+ {" "}
+ to connect.
+
+ )}
+ {error && !freighterMissing && (
+
+ {error}
+
+ )}
+
+
+
+
+
+ For skilled workers
+
+
+ Got a skill? Get booked.
+
+
+ List your trade, set your rates, and let clients across Lagos find
+ you. Every job is paid up front into escrow — so you always get paid
+ for good work.
+
+
+
+
+
+ {PERKS.map((p) => (
+
+
+
+
+ {p.b} {p.t}
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/booking/BookingScreen.tsx b/src/components/booking/BookingScreen.tsx
new file mode 100644
index 0000000..51f1475
--- /dev/null
+++ b/src/components/booking/BookingScreen.tsx
@@ -0,0 +1,527 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+ FaArrowLeft,
+ FaArrowRight,
+ FaLock,
+ FaCheck,
+ FaPlus,
+ FaClock,
+} from "react-icons/fa6";
+import NorthStar from "@/components/brand/NorthStar";
+import RatingPill from "@/components/marketplace/RatingPill";
+import { buttonClasses } from "@/components/ui/Button";
+import { bookingApi } from "@/lib/api";
+import { getErrorMessage } from "@/lib/types";
+import { formatNaira, type Worker } from "@/lib/marketplace";
+import { feeFor, type Service, type DateChip, type TimeSlot } from "@/lib/booking";
+import {
+ PROVIDER_TIME_ZONE,
+ convertSlotToZone,
+ getVisitorTimeZone,
+ offsetLabel,
+} from "@/lib/timezone";
+import {
+ acquireSlotLock,
+ createHolderId,
+ isLockedByOther,
+ releaseSlotLock,
+ slotKey,
+ subscribeToLockChanges,
+} from "@/lib/slotLock";
+
+interface Props {
+ worker: Worker;
+ /** API category enum, e.g. "ELECTRICAL" — sent to bookAppointment. */
+ apiCategory: string;
+ backHref: string;
+ services: Service[];
+ dates: DateChip[];
+ timeSlots: TimeSlot[];
+}
+
+export default function BookingScreen({
+ worker,
+ apiCategory,
+ backHref,
+ services,
+ dates,
+ timeSlots,
+}: Props) {
+ const router = useRouter();
+ const firstOpenDate = dates.find((d) => !d.disabled) ?? dates[0];
+ const firstOpenTime = timeSlots.find((s) => !s.off)?.t ?? timeSlots[0].t;
+
+ const [serviceId, setServiceId] = useState(services[0].id);
+ const [dateIso, setDateIso] = useState(firstOpenDate.iso);
+ const [time, setTime] = useState(firstOpenTime);
+ const [booked, setBooked] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState("");
+
+ // --- timezone: render times in the visitor's own zone -------------------
+ // Start off matching the server-rendered provider zone so hydration has
+ // nothing to mismatch against, then swap to the browser's real zone once
+ // mounted (Intl isn't available/reliable during SSR).
+ const [visitorZone, setVisitorZone] = useState(PROVIDER_TIME_ZONE);
+ useEffect(() => {
+ setVisitorZone(getVisitorTimeZone());
+ }, []);
+ const showsOwnZone = visitorZone !== PROVIDER_TIME_ZONE;
+ const [holderId] = useState(createHolderId);
+ const [lockTick, setLockTick] = useState(0);
+ useEffect(() => subscribeToLockChanges(() => setLockTick((t) => t + 1)), []);
+ useEffect(() => {
+ const id = window.setInterval(() => setLockTick((t) => t + 1), 15_000);
+ return () => window.clearInterval(id);
+ }, []);
+
+ const currentKey = slotKey(worker.id, dateIso, time);
+ useEffect(() => {
+ if (booked) return;
+ acquireSlotLock(currentKey, holderId);
+ return () => releaseSlotLock(currentKey, holderId);
+ }, [currentKey, holderId, booked]);
+
+ function selectTime(t: string) {
+ const key = slotKey(worker.id, dateIso, t);
+ if (!acquireSlotLock(key, holderId)) {
+ setError("That time was just taken in another tab — pick another slot.");
+ return;
+ }
+ setError("");
+ setTime(t);
+ }
+
+ const service = services.find((s) => s.id === serviceId) ?? services[0];
+ const selectedDate = dates.find((d) => d.iso === dateIso) ?? firstOpenDate;
+ const fee = feeFor(service.price);
+ const total = service.price + fee;
+
+ async function pay() {
+ setError("");
+
+ // clientId comes from the login flow (localStorage "userId").
+ const clientId =
+ typeof window !== "undefined" ? localStorage.getItem("userId") : null;
+ if (!clientId || clientId === "undefined") {
+ router.push("/login?as=client");
+ return;
+ }
+
+ // Re-confirm the hold right before submitting — it may have expired, or
+ // (extremely unlikely with a 5-minute TTL, but possible) another tab
+ // could have grabbed it between selection and now.
+ if (!acquireSlotLock(currentKey, holderId)) {
+ setError("This slot was just taken — please pick another time.");
+ return;
+ }
+
+ setLoading(true);
+ try {
+ // Combine the picked date + slot into the datetime the API expects.
+ const scheduleTime = `${dateIso}T${time}`;
+ // The API also takes a skilledWorkerId, but we can't send one yet: the
+ // pros in the browse list are sample data whose ids ("gw-chidi") aren't
+ // the backend's numeric SkilledWorker ids. Until workers are fetched from
+ // the API, the appointment records the amount but no pro.
+ const res = await bookingApi({
+ scheduleTime,
+ category: apiCategory,
+ clientId,
+ amount: total,
+ });
+
+ if (res.status) {
+ // NOTE: Soroban escrow contract call still to come — the funds
+ // aren't actually locked on-chain yet, only the appointment is booked.
+ setBooked({ ref: `GW-${Math.floor(1000 + Math.random() * 9000)}` });
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ } else {
+ throw new Error(res.data?.error ?? "We couldn't confirm your booking. Please try again.");
+ }
+ } catch (e) {
+ setError(
+ getErrorMessage(e, "We couldn't reach the booking service. Please try again in a moment.")
+ );
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ if (booked) {
+ return (
+
+
+
+
Back to {worker.trade.toLowerCase()}s in {worker.area}
+
+
Book {worker.name}
+
+ Pick a service and time. You'll pay into escrow —{" "}
+ {worker.name.split(" ")[0]}
+ {" "}only gets paid once you confirm the work's done.
+
+
+
+
+ {/* form */}
+
+ {/* service */}
+
+
+ Prices are {worker.name.split(" ")[0]}'s base rate — final quote is confirmed in
+ chat before work starts.
+
+
+ {services.map((s) => {
+ const sel = s.id === serviceId;
+ return (
+ setServiceId(s.id)}
+ className={`flex items-center gap-3.5 rounded-xl border p-4 text-left transition ${
+ sel ? "border-gold bg-gold/10" : "border-line hover:border-navy-2"
+ }`}
+ >
+
+ {sel ?
+
+ {s.label}
+ {s.desc}
+
+
+ {s.from ? "from " : ""}
+ {formatNaira(s.price)}
+
+
+ );
+ })}
+
+
+
+ {/* date + time */}
+
+
+ {dates.map((d) => {
+ const sel = d.iso === dateIso;
+ return (
+ setDateIso(d.iso)}
+ className={`min-w-[64px] shrink-0 rounded-xl border px-3.5 py-2.5 text-center transition ${
+ d.disabled
+ ? "cursor-not-allowed border-line text-muted opacity-40"
+ : sel
+ ? "border-navy bg-navy text-white"
+ : "border-line hover:border-navy-2"
+ }`}
+ >
+
+ {d.dow}
+
+ {d.num}
+
+ );
+ })}
+
+
+ Available times · {selectedDate.label}
+
+ {showsOwnZone ? (
+
+
+ ) : null}
+
+ {timeSlots.map((s) => {
+ const key = slotKey(worker.id, dateIso, s.t);
+ const held = !s.off && isLockedByOther(key, holderId);
+ const disabled = s.off || held;
+ const sel = s.t === time && !disabled;
+ const zoned = convertSlotToZone(dateIso, s.t, visitorZone);
+ return (
+ selectTime(s.t)}
+ className={`relative rounded-xl border px-4 py-2.5 font-bold tabular-nums transition ${
+ disabled
+ ? "cursor-not-allowed border-line text-muted line-through opacity-40"
+ : sel
+ ? "border-navy bg-navy text-white"
+ : "border-line hover:border-navy-2"
+ }`}
+ >
+ {zoned.time}
+ {zoned.dayOffset !== 0 ? (
+
+ {zoned.dayOffset > 0 ? "+1" : "-1"}
+
+ ) : null}
+ {held ? (
+
+ Held
+
+ ) : null}
+
+ );
+ })}
+
+
+
+ {/* where */}
+
+
+
+ {/* escrow summary */}
+
+
+
+ {n} {title}
+
+ );
+}
+
+function Line({ k, v }: { k: string; v: string }) {
+ return (
+
+ {k}
+ {v}
+
+ );
+}
+
+function TrackNode({
+ icon,
+ label,
+ sub,
+ tone,
+}: {
+ icon: React.ReactNode;
+ label: string;
+ sub: string;
+ tone: "gold" | "navy" | "todo";
+}) {
+ const chip =
+ tone === "gold"
+ ? "bg-gold border-gold text-navy-ink"
+ : tone === "navy"
+ ? "bg-navy border-navy text-white"
+ : "bg-surface border-line text-muted";
+ return (
+
+
+ {icon}
+
+ {label}
+ {sub}
+
+ );
+}
+
+function Confirmation({
+ worker,
+ when,
+ total,
+ reference,
+}: {
+ worker: Worker;
+ when: string;
+ total: number;
+ reference: string;
+}) {
+ const first = worker.name.split(" ")[0];
+ return (
+
+
+
+
+
+
Booking confirmed
+
+ {formatNaira(total)} is locked in escrow. {first} has{" "}
+ 12 hours {" "}to accept — you'll get a notification
+ either way.
+
+
+
+
+
+
+
+
+
+
+ When the job's done you tap Release payment — or open a
+ dispute for a full refund if it falls through. Your rating posts to {first}'s
+ on-chain record.
+
+
+
+
+
+
+ {k}
+ {v}
+
+ );
+}
diff --git a/src/components/booking/FilterBar.tsx b/src/components/booking/FilterBar.tsx
new file mode 100644
index 0000000..df29231
--- /dev/null
+++ b/src/components/booking/FilterBar.tsx
@@ -0,0 +1,32 @@
+import { FaChevronDown } from "react-icons/fa6";
+
+/* Presentational filter bar — reflects the intended UX. Wiring to
+ skilledWorker/nearby + real sort/filter is a follow-up. */
+
+function Chip({ label, value, active = false }: { label?: string; value: string; active?: boolean }) {
+ return (
+
+ {label ? (
+ {label}
+ ) : null}
+ {value}
+
+ );
+}
+
+export default function FilterBar({ area }: { area: string }) {
+ return (
+
+
+ );
+}
diff --git a/src/components/booking/Stepper.tsx b/src/components/booking/Stepper.tsx
new file mode 100644
index 0000000..2ade220
--- /dev/null
+++ b/src/components/booking/Stepper.tsx
@@ -0,0 +1,39 @@
+import { FaCheck } from "react-icons/fa6";
+
+interface Step {
+ label: string;
+ state: "done" | "current" | "todo";
+}
+
+/** Booking progress sub-header: Trade ✓ → Pro ✓ → Book & pay. */
+export default function Stepper({ steps }: { steps: Step[] }) {
+ return (
+
+
+ {steps.map((s, i) => (
+
+ {i > 0 ?
+
+ {s.state === "done" ?
+ {s.label}
+
+
+ ))}
+
+
= {
+ electrical: FaBolt,
+ plumbing: FaWrench,
+ beauty: FaScissors,
+ carpentry: FaHammer,
+ fashion: FaShirt,
+ photography: FaCamera,
+};
+
+/** Rich category card for the /book "choose a trade" step. */
+export default function TradeCard({ category }: { category: CategoryMeta }) {
+ const Icon = ICONS[category.key];
+ return (
+
+
+ {category.label}
+
+ {category.count} pros near you
+
+
+ from{" "}
+ {formatNaira(category.fromPrice)}
+
+
+ );
+}
diff --git a/src/components/booking/WorkerBrowseRow.tsx b/src/components/booking/WorkerBrowseRow.tsx
new file mode 100644
index 0000000..4ac481c
--- /dev/null
+++ b/src/components/booking/WorkerBrowseRow.tsx
@@ -0,0 +1,67 @@
+import Link from "next/link";
+import { FaLocationDot, FaLock } from "react-icons/fa6";
+import NorthStar from "@/components/brand/NorthStar";
+import { buttonClasses } from "@/components/ui/Button";
+import { formatNaira, type Worker } from "@/lib/marketplace";
+
+/** A worker row for the /book/[category] "choose a pro" list. */
+export default function WorkerBrowseRow({ worker }: { worker: Worker }) {
+ const bookHref = `/book/${worker.category}/${worker.id}`;
+ return (
+
+
+ {worker.initials}
+
+
+
+
+ {worker.name}
+
+
+ {worker.trade}
+ ·
+
+
+ ({worker.reviews})
+
+
+
+
+ {worker.specialties.map((s) => (
+
+ {s}
+
+ ))}
+
+
+
+
+
+
+ from {formatNaira(worker.priceFrom)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/brand/Logo.tsx b/src/components/brand/Logo.tsx
new file mode 100644
index 0000000..dec4695
--- /dev/null
+++ b/src/components/brand/Logo.tsx
@@ -0,0 +1,48 @@
+/* GuildWorkman primary lockup — the Chevron mark + wordmark.
+ The left chevron and wordmark inherit `currentColor` (so the lockup
+ flips for light/dark surfaces by setting text colour); the right
+ chevron is always Guild gold. Size it by setting a font size /
+ text-* utility on the element. */
+
+interface LogoProps {
+ className?: string;
+ /** Hide the wordmark, render the chevron mark only (favicon/avatar use). */
+ markOnly?: boolean;
+}
+
+export default function Logo({ className = "", markOnly = false }: LogoProps) {
+ return (
+
+
+
+ {markOnly ? (
+ GuildWorkman
+ ) : (
+ GuildWorkman
+ )}
+
+ );
+}
diff --git a/src/components/brand/NorthStar.tsx b/src/components/brand/NorthStar.tsx
new file mode 100644
index 0000000..4dbc497
--- /dev/null
+++ b/src/components/brand/NorthStar.tsx
@@ -0,0 +1,53 @@
+/* The North Star — GuildWorkman's reputation mark.
+ Used as: the rating star, the verified tick, the escrow seal,
+ the app/favicon symbol. One geometry, many jobs. */
+
+const SPARK =
+ "M240 70 C250 175 260 185 365 240 C260 295 250 305 240 410 C230 305 220 295 115 240 C220 185 230 175 240 70 Z";
+const CHECK = "M198 244 L228 274 L294 206";
+
+interface NorthStarProps {
+ size?: number;
+ /** Overlay the verified check (turns the star into a "verified" tick). */
+ verified?: boolean;
+ /** Star fill. Use "currentColor" to inherit text colour (e.g. rating pills). */
+ color?: string;
+ /** Check stroke colour when `verified`. */
+ checkColor?: string;
+ className?: string;
+ title?: string;
+}
+
+export default function NorthStar({
+ size = 20,
+ verified = false,
+ color = "var(--gold)",
+ checkColor = "var(--navy)",
+ className = "",
+ title,
+}: NorthStarProps) {
+ return (
+
+ {title ? {title} : null}
+
+ );
+}
diff --git a/src/components/identity/DocumentDropzone.tsx b/src/components/identity/DocumentDropzone.tsx
new file mode 100644
index 0000000..efdf420
--- /dev/null
+++ b/src/components/identity/DocumentDropzone.tsx
@@ -0,0 +1,49 @@
+import { useDropzone } from "react-dropzone";
+import { HiCheckCircle, HiUpload } from "react-icons/hi";
+
+interface DocumentDropzoneProps {
+ label: string;
+ hint: string;
+ file: File | null;
+ onSelect: (file: File) => void;
+ error?: string;
+}
+
+/** A single labeled image dropzone — shared by the document-upload and
+ selfie steps so both look and behave the same way. */
+export default function DocumentDropzone({ label, hint, file, onSelect, error }: DocumentDropzoneProps) {
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
+ onDrop: (accepted) => {
+ if (accepted[0]) onSelect(accepted[0]);
+ },
+ accept: { "image/*": [] },
+ maxFiles: 1,
+ });
+
+ return (
+
+
{label}
+
+
+ {file ? (
+
+
+
{file.name}
+
Click or drop to replace
+
+ ) : (
+
+
+
{isDragActive ? "Drop the image here..." : hint}
+
+ )}
+
+ {error &&
{error}
}
+
+ {STEP_IDS.map((id: StepId, index) => {
+ const isCurrent = index === currentIndex;
+ const isCompleted = index < furthestValidatedIndex || (index === furthestValidatedIndex && index < currentIndex);
+ const isReachable = index <= furthestValidatedIndex;
+
+ return (
+
+ onStepSelect(index)}
+ aria-current={isCurrent ? "step" : undefined}
+ className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-colors ${
+ isCurrent
+ ? "bg-navy text-white"
+ : isCompleted
+ ? "bg-ok text-white"
+ : "bg-line text-muted"
+ } ${isReachable ? "cursor-pointer" : "cursor-not-allowed"}`}
+ >
+ {isCompleted ?
+
+ {STEP_LABELS[id]}
+
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/identity/IdentityVerificationWizard.tsx b/src/components/identity/IdentityVerificationWizard.tsx
new file mode 100644
index 0000000..16968df
--- /dev/null
+++ b/src/components/identity/IdentityVerificationWizard.tsx
@@ -0,0 +1,288 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { FormProvider, useForm, type FieldPath } from "react-hook-form";
+import { HiExclamationCircle } from "react-icons/hi";
+import Button from "@/components/ui/Button";
+import Card from "@/components/ui/Card";
+import Badge from "@/components/ui/Badge";
+import IdentityStepper from "./IdentityStepper";
+import PersonalDetailsStep from "./steps/PersonalDetailsStep";
+import DocumentSelectionStep from "./steps/DocumentSelectionStep";
+import DocumentUploadStep from "./steps/DocumentUploadStep";
+import SelfieStep from "./steps/SelfieStep";
+import ReviewStep from "./steps/ReviewStep";
+import {
+ DOCUMENT_TYPES_REQUIRING_BACK,
+ EMPTY_FORM_VALUES,
+ STEP_IDS,
+ STEP_VALIDATION_FIELDS,
+ clearProgress,
+ loadProgress,
+ saveProgress,
+ submitIdentityVerification,
+ type IdentityVerificationFormValues,
+ type StepId,
+} from "@/lib/identityVerification";
+
+type UploadKey = "front" | "back" | "selfie";
+
+const UPLOAD_STEP_INDEX = STEP_IDS.indexOf("upload");
+const REVIEW_STEP_INDEX = STEP_IDS.indexOf("review");
+
+export default function IdentityVerificationWizard() {
+ const form = useForm({
+ mode: "onChange",
+ defaultValues: EMPTY_FORM_VALUES,
+ });
+ const { trigger, watch, reset } = form;
+
+ const [stepIndex, setStepIndex] = useState(0);
+ const [furthestValidatedIndex, setFurthestValidatedIndex] = useState(0);
+ const [files, setFiles] = useState>({
+ front: null,
+ back: null,
+ selfie: null,
+ });
+ const [fileErrors, setFileErrors] = useState>>({});
+ const [resumeState, setResumeState] = useState<"checking" | "offered" | "dismissed">("checking");
+ const [resumeSummary, setResumeSummary] = useState<{ step: number; savedAt: string } | null>(null);
+ const [submission, setSubmission] = useState<
+ { status: "idle" | "submitting" } | { status: "error"; message: string } | { status: "success"; referenceId: string }
+ >({ status: "idle" });
+ const [needsReattachNotice, setNeedsReattachNotice] = useState(false);
+
+ const saveTimer = useRef | null>(null);
+
+ // Offer to resume a saved session once, on mount.
+ useEffect(() => {
+ const saved = loadProgress();
+ if (saved) {
+ setResumeSummary({ step: saved.step, savedAt: saved.savedAt });
+ setResumeState("offered");
+ } else {
+ setResumeState("dismissed");
+ }
+ }, []);
+
+ // Debounce-persist step data (never file contents) whenever it changes.
+ useEffect(() => {
+ if (resumeState === "checking") return;
+ const subscription = watch((values) => {
+ if (saveTimer.current) clearTimeout(saveTimer.current);
+ saveTimer.current = setTimeout(() => {
+ saveProgress({
+ step: stepIndex,
+ values: values as IdentityVerificationFormValues,
+ attachedFileNames: {
+ front: files.front?.name,
+ back: files.back?.name,
+ selfie: files.selfie?.name,
+ },
+ });
+ }, 500);
+ });
+ return () => {
+ subscription.unsubscribe();
+ if (saveTimer.current) clearTimeout(saveTimer.current);
+ };
+ }, [watch, stepIndex, files, resumeState]);
+
+ function handleResume() {
+ const saved = loadProgress();
+ if (!saved) return;
+ reset(saved.values);
+ // Files can't be restored (see lib doc comment) — if the saved session
+ // had gotten past the upload/selfie steps, send the user back to
+ // whichever of those comes first so they can re-attach before
+ // continuing, rather than silently landing past a step with no file.
+ const hadUploads = Object.keys(saved.attachedFileNames).length > 0;
+ const targetStep =
+ hadUploads && saved.step > UPLOAD_STEP_INDEX ? UPLOAD_STEP_INDEX : saved.step;
+ setNeedsReattachNotice(hadUploads && saved.step > UPLOAD_STEP_INDEX);
+ setStepIndex(targetStep);
+ setFurthestValidatedIndex(Math.max(targetStep, saved.step > UPLOAD_STEP_INDEX ? UPLOAD_STEP_INDEX : saved.step));
+ setResumeState("dismissed");
+ }
+
+ function handleStartOver() {
+ clearProgress();
+ reset(EMPTY_FORM_VALUES);
+ setFiles({ front: null, back: null, selfie: null });
+ setStepIndex(0);
+ setFurthestValidatedIndex(0);
+ setResumeState("dismissed");
+ }
+
+ function validateUploadStep(): boolean {
+ const documentType = form.getValues("document.documentType");
+ const needsBack = DOCUMENT_TYPES_REQUIRING_BACK.includes(
+ documentType as (typeof DOCUMENT_TYPES_REQUIRING_BACK)[number]
+ );
+ const errors: Partial> = {};
+ if (!files.front) errors.front = "Please upload the front of your document";
+ if (needsBack && !files.back) errors.back = "Please upload the back of your document";
+ setFileErrors(errors);
+ return Object.keys(errors).length === 0;
+ }
+
+ function validateSelfieStep(): boolean {
+ if (!files.selfie) {
+ setFileErrors({ selfie: "Please upload a selfie" });
+ return false;
+ }
+ setFileErrors({});
+ return true;
+ }
+
+ async function handleContinue() {
+ const stepId: StepId = STEP_IDS[stepIndex];
+ let valid = true;
+
+ const fieldsToValidate = STEP_VALIDATION_FIELDS[stepId];
+ if (fieldsToValidate) {
+ valid = await trigger(fieldsToValidate as FieldPath[]);
+ } else if (stepId === "upload") {
+ valid = validateUploadStep();
+ } else if (stepId === "selfie") {
+ valid = validateSelfieStep();
+ }
+
+ if (!valid) return;
+
+ setNeedsReattachNotice(false);
+ const nextIndex = Math.min(stepIndex + 1, STEP_IDS.length - 1);
+ setStepIndex(nextIndex);
+ setFurthestValidatedIndex((prev) => Math.max(prev, nextIndex));
+ }
+
+ function handleBack() {
+ setStepIndex((prev) => Math.max(prev - 1, 0));
+ }
+
+ function handleStepSelect(index: number) {
+ if (index <= furthestValidatedIndex) setStepIndex(index);
+ }
+
+ async function handleSubmit() {
+ setSubmission({ status: "submitting" });
+ try {
+ const values = form.getValues();
+ const result = await submitIdentityVerification({
+ ...values,
+ hasFrontUpload: Boolean(files.front),
+ hasBackUpload: Boolean(files.back),
+ hasSelfie: Boolean(files.selfie),
+ });
+ clearProgress();
+ setSubmission({ status: "success", referenceId: result.referenceId });
+ } catch (error) {
+ setSubmission({
+ status: "error",
+ message: error instanceof Error ? error.message : "Something went wrong. Please try again.",
+ });
+ }
+ }
+
+ if (submission.status === "success") {
+ return (
+
+
+ Pending review
+
+ Verification submitted
+
+ Reference {submission.referenceId} . We'll
+ notify you once it's been reviewed — this usually takes 1–2 business days.
+
+
+ );
+ }
+
+ const stepId = STEP_IDS[stepIndex];
+ const isLastStep = stepIndex === REVIEW_STEP_INDEX;
+
+ return (
+
+ {resumeState === "offered" && resumeSummary && (
+
+
+ You have an unfinished verification from{" "}
+ {new Date(resumeSummary.savedAt).toLocaleString()}.
+
+
+
+ Resume
+
+
+ Start over
+
+
+
+ For your security, we don't save uploaded documents between sessions — please
+ re-attach your document and selfie to continue.
+
+ )}
+
+
+
+ {stepId === "personal" &&
}
+ {stepId === "document" &&
}
+ {stepId === "upload" && (
+
setFiles((prev) => ({ ...prev, front: file }))}
+ onBackChange={(file) => setFiles((prev) => ({ ...prev, back: file }))}
+ errors={fileErrors}
+ />
+ )}
+ {stepId === "selfie" && (
+ setFiles((prev) => ({ ...prev, selfie: file }))}
+ error={fileErrors.selfie}
+ />
+ )}
+ {stepId === "review" && (
+
+
+ {submission.status === "error" && (
+
+ {submission.message}
+
+ )}
+
+
+
+ Back
+
+ {isLastStep ? (
+
+ {submission.status === "submitting"
+ ? "Submitting..."
+ : submission.status === "error"
+ ? "Retry submission"
+ : "Submit for review"}
+
+ ) : (
+ Continue
+ )}
+
+
+ );
+}
diff --git a/src/components/identity/steps/DocumentSelectionStep.tsx b/src/components/identity/steps/DocumentSelectionStep.tsx
new file mode 100644
index 0000000..4cb761a
--- /dev/null
+++ b/src/components/identity/steps/DocumentSelectionStep.tsx
@@ -0,0 +1,41 @@
+import { useFormContext } from "react-hook-form";
+import Input from "@/components/ui/Input";
+import Select from "@/components/ui/Select";
+import type { IdentityVerificationFormValues } from "@/lib/identityVerification";
+
+export default function DocumentSelectionStep() {
+ const {
+ register,
+ formState: { errors },
+ } = useFormContext();
+
+ return (
+
+
+
+ Select a document
+ National ID
+ Passport
+ Driver's license
+
+ {errors.document?.documentType && (
+
{errors.document.documentType.message}
+ )}
+
+
+
+
+ {errors.document?.documentNumber && (
+
{errors.document.documentNumber.message}
+ )}
+
+
();
+ const documentType = watch("document.documentType");
+ const needsBack = DOCUMENT_TYPES_REQUIRING_BACK.includes(
+ documentType as (typeof DOCUMENT_TYPES_REQUIRING_BACK)[number]
+ );
+
+ return (
+
+
+ );
+}
diff --git a/src/components/identity/steps/PersonalDetailsStep.tsx b/src/components/identity/steps/PersonalDetailsStep.tsx
new file mode 100644
index 0000000..a5a0e42
--- /dev/null
+++ b/src/components/identity/steps/PersonalDetailsStep.tsx
@@ -0,0 +1,79 @@
+import { useFormContext } from "react-hook-form";
+import Input from "@/components/ui/Input";
+import Select from "@/components/ui/Select";
+import type { IdentityVerificationFormValues } from "@/lib/identityVerification";
+
+const NATIONALITIES = [
+ "Nigeria",
+ "Ghana",
+ "Kenya",
+ "South Africa",
+ "United Kingdom",
+ "United States",
+ "Other",
+];
+
+export default function PersonalDetailsStep() {
+ const {
+ register,
+ formState: { errors },
+ } = useFormContext();
+
+ return (
+
+
+
+ {errors.personal?.fullName && (
+
{errors.personal.fullName.message}
+ )}
+
+
+
+
+ {errors.personal?.dateOfBirth && (
+
{errors.personal.dateOfBirth.message}
+ )}
+
+
+
+
+ Select nationality
+ {NATIONALITIES.map((country) => (
+
+ {country}
+
+ ))}
+
+ {errors.personal?.nationality && (
+
{errors.personal.nationality.message}
+ )}
+
+
+
+
+ {errors.personal?.phoneNumber && (
+
{errors.personal.phoneNumber.message}
+ )}
+
+
+ {label}
+ {value || "—"}
+
+ );
+}
+
+const DOCUMENT_TYPE_LABELS: Record = {
+ "national-id": "National ID",
+ passport: "Passport",
+ "drivers-license": "Driver's license",
+};
+
+export default function ReviewStep({ frontFile, backFile, selfieFile }: ReviewStepProps) {
+ const { getValues } = useFormContext();
+ const { personal, document } = getValues();
+
+ return (
+
+
+
+ Personal details
+
+
+
+
+
+ Document
+
+
+
+
+ By submitting, you confirm the information above is accurate and consent to it being used
+ to verify your identity.
+
+
+
+ Take a clear, well-lit photo of your face. Remove sunglasses or hats, and make sure
+ there's no glare over your eyes.
+
+
+
= {
+ electrical: FaBolt,
+ plumbing: FaWrench,
+ beauty: FaScissors,
+ carpentry: FaHammer,
+ fashion: FaShirt,
+ photography: FaCamera,
+};
+
+export default function CategoryTile({ category }: { category: CategoryMeta }) {
+ const Icon = ICONS[category.key];
+ return (
+
+
+ {category.label}
+
+ {category.count} pros
+
+
+ );
+}
diff --git a/src/components/marketplace/RatingPill.tsx b/src/components/marketplace/RatingPill.tsx
new file mode 100644
index 0000000..a7878ed
--- /dev/null
+++ b/src/components/marketplace/RatingPill.tsx
@@ -0,0 +1,23 @@
+import NorthStar from "@/components/brand/NorthStar";
+
+interface RatingPillProps {
+ rating: number;
+ reviews?: number;
+ className?: string;
+}
+
+/** Gold rating pill built on the North Star — the score and the brand
+ are literally the same shape. */
+export default function RatingPill({ rating, reviews, className = "" }: RatingPillProps) {
+ return (
+
+ ·{reviews}
+ ) : null}
+
+ );
+}
diff --git a/src/components/marketplace/WorkerCard.tsx b/src/components/marketplace/WorkerCard.tsx
new file mode 100644
index 0000000..11faf28
--- /dev/null
+++ b/src/components/marketplace/WorkerCard.tsx
@@ -0,0 +1,100 @@
+import Link from "next/link";
+import { FaLock } from "react-icons/fa6";
+import NorthStar from "@/components/brand/NorthStar";
+import RatingPill from "./RatingPill";
+import { buttonClasses } from "@/components/ui/Button";
+import { formatNaira, type Worker } from "@/lib/marketplace";
+
+function Avatar({ worker, size = 50 }: { worker: Worker; size?: number }) {
+ return (
+
+ {worker.initials}
+
+ );
+}
+
+function Name({ worker }: { worker: Worker }) {
+ return (
+
+ {worker.name}
+
+ );
+}
+
+function EscrowChip() {
+ return (
+
+
+ );
+}
+
+interface WorkerCardProps {
+ worker: Worker;
+ variant?: "row" | "stack";
+}
+
+export default function WorkerCard({ worker, variant = "stack" }: WorkerCardProps) {
+ if (variant === "row") {
+ return (
+
+
+
+
+
+ {worker.trade} · {worker.area}
+
+
+
+
+
+ Book
+
+
+
+
+
+
+
+ {worker.trade} · {worker.area}
+
+
+
+
+
+
+
+ from{" "}
+
+ {formatNaira(worker.priceFrom)}
+
+
+
+
+
+
+
+
{notification.title}
+
{notification.message}
+
{timeAgo(notification.timestamp)}
+
+ {/* Action buttons */}
+ {(notification.retryAction || notification.deepLink) && (
+
+ {notification.retryAction && (
+ {
+ void notification.retryAction!.handler();
+ onDismiss(notification.id);
+ }}
+ className="inline-flex items-center gap-1 rounded-md bg-navy-tint px-2.5 py-1 text-[11px] font-semibold text-navy-2 transition-colors hover:bg-navy/15"
+ >
+ {notification.retryAction.label}
+
+ )}
+ {notification.deepLink && (
+
+ )}
+
+
+
onDismiss(notification.id)}
+ aria-label="Dismiss"
+ className="shrink-0 rounded-full p-1 text-muted transition-colors hover:bg-line/70"
+ >
+
+
(null);
+
+ // Close on outside click (same pattern as WalletButton.tsx)
+ useEffect(() => {
+ function onClickOutside(e: MouseEvent) {
+ if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+ setOpen(false);
+ }
+ }
+ document.addEventListener("mousedown", onClickOutside);
+ return () => document.removeEventListener("mousedown", onClickOutside);
+ }, []);
+
+ const unread = notifications.length;
+ const hasNotifications = unread > 0;
+
+ return (
+
+ {/* Bell button */}
+
setOpen((o) => !o)}
+ aria-label={`Notifications${hasNotifications ? ` (${unread} unread)` : ""}`}
+ aria-expanded={open}
+ className="relative rounded-full p-2 text-muted transition-colors hover:bg-line/60"
+ >
+
+ {unread > 9 ? "9+" : unread}
+
+ )}
+
+
+ {/* Dropdown panel */}
+ {open && (
+
+ {/* Header */}
+
+ Notifications
+ {hasNotifications && (
+
+
+ )}
+
+
+ {/* List */}
+ {notifications.length === 0 ? (
+
+
No notifications yet
+
+ Transaction updates will appear here.
+
+
+ ) : (
+
+ {[...notifications].reverse().map((n) => (
+
+ )}
+
+ )}
+
+
+
+
+
+
{notification.title}
+
{notification.message}
+
+ {/* Action buttons — shown for error toasts mostly */}
+ {(notification.retryAction || notification.deepLink) && (
+
+ {notification.retryAction && (
+ {
+ void notification.retryAction!.handler();
+ dismiss();
+ }}
+ className="inline-flex items-center gap-1 rounded-lg bg-navy-tint px-3 py-1.5 text-xs font-semibold text-navy-2 transition-colors hover:bg-navy/15"
+ >
+ {notification.retryAction.label}
+
+ )}
+ {notification.deepLink && (
+
+ )}
+
+
+
+
+
+
+ {visible.map((n) => (
+
+
+ ))}
+
= {
+ success: 5_000,
+ info: 5_000,
+ pending: 10_000, // give pending a bit longer before disappearing
+ error: 10_000, // errors stay longer so the user can retry
+};
+
+// ── Context shape ─────────────────────────────────────────────────
+interface NotificationContextValue {
+ notifications: TransactionNotification[];
+ addNotification: (n: TransactionNotification) => void;
+ dismissNotification: (id: string) => void;
+ clearAll: () => void;
+}
+
+const NotificationContext = createContext(null);
+
+// ── Provider ───────────────────────────────────────────────────────
+export function NotificationProvider({ children }: { children: ReactNode }) {
+ const [notifications, setNotifications] = useState([]);
+ const timersRef = useRef>>(new Map());
+
+ // Auto‑dismiss logic — set a timer per notification based on its type.
+ // Clears the timer if the notification is manually dismissed before expiry.
+ useEffect(() => {
+ const timers = timersRef.current;
+
+ for (const n of notifications) {
+ if (!timers.has(n.id)) {
+ const ms = DISMISS_MS[n.type] ?? 5_000;
+ const timer = setTimeout(() => {
+ setNotifications((prev) => prev.filter((x) => x.id !== n.id));
+ timers.delete(n.id);
+ }, ms);
+ timers.set(n.id, timer);
+ }
+ }
+
+ // Clean up timers for notifications that have been removed
+ return () => {
+ for (const [id, timer] of timers) {
+ clearTimeout(timer);
+ timers.delete(id);
+ }
+ };
+ }, [notifications]);
+
+ const addNotification = useCallback((n: TransactionNotification) => {
+ setNotifications((prev) => [...prev, n]);
+ }, []);
+
+ const dismissNotification = useCallback((id: string) => {
+ setNotifications((prev) => prev.filter((x) => x.id !== id));
+ const timer = timersRef.current.get(id);
+ if (timer) {
+ clearTimeout(timer);
+ timersRef.current.delete(id);
+ }
+ }, []);
+
+ const clearAll = useCallback(() => {
+ for (const [, timer] of timersRef.current) clearTimeout(timer);
+ timersRef.current.clear();
+ setNotifications([]);
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
+
+// ── Hook ───────────────────────────────────────────────────────────
+export function useNotifications(): NotificationContextValue {
+ const ctx = useContext(NotificationContext);
+ if (!ctx) {
+ throw new Error(
+ "useNotifications must be used within a "
+ );
+ }
+ return ctx;
+}
+
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..205878a
--- /dev/null
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,33 @@
+import { HTMLAttributes } from "react";
+
+type Tone =
+ | "brand"
+ | "gold"
+ | "success"
+ | "error"
+ | "neutral"
+ | "chain"
+ | "navy";
+
+const toneClasses: Record = {
+ brand: "bg-terra/10 text-terra-deep",
+ gold: "bg-gold/20 text-gold-deep",
+ success: "bg-ok/12 text-ok",
+ error: "bg-err/12 text-err",
+ neutral: "bg-line/70 text-ink",
+ chain: "bg-navy-tint text-navy-2",
+ navy: "bg-navy-tint text-navy-2",
+};
+
+interface BadgeProps extends HTMLAttributes {
+ tone?: Tone;
+}
+
+export default function Badge({ tone = "neutral", className = "", ...props }: BadgeProps) {
+ return (
+ = {
+ // navy = trust = the default action across the product
+ primary: "bg-navy text-white hover:bg-navy-2 disabled:opacity-50 shadow-card",
+ secondary: "bg-navy-ink text-white hover:bg-navy disabled:opacity-50",
+ gold: "bg-gold text-navy-ink hover:bg-gold-2 disabled:opacity-50",
+ ghost: "bg-transparent text-ink hover:bg-line/60",
+ outline: "bg-transparent text-ink border border-line hover:border-navy-2",
+ "outline-inverse":
+ "bg-transparent text-white border border-white/40 hover:bg-white/10",
+ // for use on terracotta / dark bands
+ sand: "bg-[#fbf3e9] text-terra-deep hover:bg-white",
+};
+
+const sizeClasses: Record = {
+ sm: "px-4 py-2.5 text-sm",
+ md: "px-5 py-3 text-sm",
+ lg: "px-6 py-3.5 text-base",
+};
+
+/** Shared button styling — use for (via / {
+ variant?: ButtonVariant;
+ size?: ButtonSize;
+}
+
+const Button = forwardRef(
+ ({ variant = "primary", size = "md", className = "", ...props }, ref) => {
+ return (
+ ) {
+ return (
+
+ );
+}
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..e32346f
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,29 @@
+import { InputHTMLAttributes, forwardRef } from "react";
+
+interface InputProps extends InputHTMLAttributes {
+ label?: string;
+ error?: string;
+}
+
+const Input = forwardRef(
+ ({ label, error, className = "", id, ...props }, ref) => {
+ const inputId = id ?? props.name;
+ return (
+
+ {label && {label} }
+ {error} }
+
+ );
+ }
+);
+Input.displayName = "Input";
+
+export default Input;
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
new file mode 100644
index 0000000..fba1548
--- /dev/null
+++ b/src/components/ui/Select.tsx
@@ -0,0 +1,27 @@
+import { SelectHTMLAttributes, forwardRef } from "react";
+
+interface SelectProps extends SelectHTMLAttributes {
+ label?: string;
+}
+
+const Select = forwardRef(
+ ({ label, className = "", id, children, ...props }, ref) => {
+ const selectId = id ?? props.name;
+ return (
+
+ {label && {label} }
+
+ {children}
+
+
+ );
+ }
+);
+Select.displayName = "Select";
+
+export default Select;
diff --git a/src/lib/api.ts b/src/lib/api.ts
new file mode 100644
index 0000000..5352c05
--- /dev/null
+++ b/src/lib/api.ts
@@ -0,0 +1,99 @@
+import axios from "axios";
+import { API_BASE_URL } from "./config";
+import type {
+ ApiEnvelope,
+ AuthApiResponse,
+ BookAppointmentRequest,
+ BookAppointmentResponse,
+ LoginRequest,
+ RegistrationRequest,
+ RegistrationResponse,
+ UpdateAppointmentRequest,
+ UserType,
+ ViewAllAppointmentsResponse,
+} from "./types";
+
+async function requestJson(
+ method: "GET" | "POST" | "PUT" | "DELETE",
+ path: string,
+ body?: unknown
+): Promise {
+ const response = await fetch(`${API_BASE_URL}${path}`, {
+ method,
+ headers: { "Content-Type": "application/json" },
+ body: body === undefined ? undefined : JSON.stringify(body),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(
+ `HTTP error! status: ${response.status}, message: ${errorData.message ?? "unknown error"}`
+ );
+ }
+
+ return response.json();
+}
+
+const postJson = (path: string, body: unknown) => requestJson("POST", path, body);
+const getJson = (path: string) => requestJson("GET", path);
+
+// --- Client ---
+
+export const clientSignupApi = (userData: RegistrationRequest) =>
+ postJson("/api/v1/client/registerClient", userData);
+
+export const bookingApi = (userData: BookAppointmentRequest) =>
+ postJson("/api/v1/client/bookAppointment", userData);
+
+/* Appointment management — shapes matched to the backend
+ (guildworkman-core -> backend-api):
+ - viewAllAppointment returns a LIST, each with id/status/amount/worker
+ - cancel/update/delete all take the id in the `appointmentId` query param
+ - update carries the new status in the body; cancel/delete take no body
+ - all wrap their payload in ApiResponse { data, status } */
+
+export const viewAllAppointmentApi = (clientId: string) =>
+ getJson>(
+ `/api/v1/client/viewAllAppointment?clientId=${encodeURIComponent(clientId)}`
+ );
+
+export const cancelAppointmentApi = (appointmentId: number) =>
+ requestJson>(
+ "PUT",
+ `/api/v1/client/cancelAppointment?appointmentId=${appointmentId}`
+ );
+
+export const updateAppointmentApi = (appointmentId: number, body: UpdateAppointmentRequest) =>
+ requestJson>(
+ "PUT",
+ `/api/v1/client/updateAppointment?appointmentId=${appointmentId}`,
+ body
+ );
+
+export const deleteAppointmentApi = (appointmentId: number) =>
+ requestJson>(
+ "DELETE",
+ `/api/v1/client/deleteAppointment?appointmentId=${appointmentId}`
+ );
+
+// --- Skilled worker ---
+
+export const skillWorkerApi = (userData: RegistrationRequest) =>
+ postJson("/api/v1/skilledWorker/registerSkilledWorker", userData);
+
+export const addSkillApi = (userData: unknown) =>
+ postJson<{ message?: string }>("/api/v1/skilledWorker/addSkill", userData);
+
+export const findWorkerById = (userData: unknown) =>
+ postJson("/api/v1/skilledWorker/findById", userData);
+
+export const updateWorkerProfileApi = (userData: unknown) =>
+ postJson<{ message?: string }>("/api/v1/skilledWorker/updateProfile", userData);
+
+// --- Auth ---
+
+export const loginApi = (loginData: LoginRequest, userType: UserType) => {
+ const path =
+ userType === "worker" ? "/api/v1/auth/login/worker" : "/api/v1/auth/login/client";
+ return axios.post(`${API_BASE_URL}${path}`, loginData);
+};
diff --git a/src/lib/appointments.ts b/src/lib/appointments.ts
new file mode 100644
index 0000000..9c7309f
--- /dev/null
+++ b/src/lib/appointments.ts
@@ -0,0 +1,51 @@
+import type { AppointmentStatus, ViewAllAppointmentsResponse } from "./types";
+
+/** The backend sends a zoneless LocalDateTime ("2026-07-20T10:30:00"), which
+ Date reads as local time — the right reading for a Lagos booking. */
+export function formatScheduleTime(scheduleTime: string): string {
+ const date = new Date(scheduleTime);
+ if (Number.isNaN(date.getTime())) return scheduleTime;
+ return date.toLocaleString("en-NG", {
+ weekday: "short",
+ day: "numeric",
+ month: "short",
+ hour: "numeric",
+ minute: "2-digit",
+ });
+}
+
+/** Category enums arrive as BEAUTY_CARE / FASHION_DESIGN. */
+export function formatCategory(category: string): string {
+ return category
+ .toLowerCase()
+ .split("_")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+}
+
+export const STATUS_TONE: Record = {
+ SCHEDULED: "bg-gold/15 text-gold-deep",
+ ACCEPTED: "bg-ok/15 text-ok",
+ UPDATED: "bg-navy/10 text-navy",
+ DECLINED: "bg-err/15 text-err",
+ CANCELLED: "bg-err/15 text-err",
+};
+
+/** An appointment that's over — no longer actionable. */
+export function isClosed(appointment: ViewAllAppointmentsResponse): boolean {
+ return appointment.status === "CANCELLED" || appointment.status === "DECLINED";
+}
+
+/** Soonest first. */
+export function byScheduleTime(
+ a: ViewAllAppointmentsResponse,
+ b: ViewAllAppointmentsResponse
+): number {
+ return new Date(a.scheduleTime).getTime() - new Date(b.scheduleTime).getTime();
+}
+
+/** clientId is set by the login flow. */
+export function getClientId(): string | null {
+ const clientId = localStorage.getItem("userId");
+ return !clientId || clientId === "undefined" ? null : clientId;
+}
diff --git a/src/lib/booking.ts b/src/lib/booking.ts
new file mode 100644
index 0000000..3fda534
--- /dev/null
+++ b/src/lib/booking.ts
@@ -0,0 +1,87 @@
+import type { CategoryKey } from "./marketplace";
+import { PROVIDER_TIME_ZONE, todayIsoInZone } from "./timezone";
+
+export interface Service {
+ id: string;
+ label: string;
+ desc: string;
+ price: number;
+ /** Price is a "from" estimate (site visit / quote required). */
+ from?: boolean;
+}
+
+const ELECTRICAL: Service[] = [
+ { id: "diag", label: "Fault diagnosis & repair", desc: "Sockets, tripping, wiring faults · ~1–2 hrs", price: 8000 },
+ { id: "wiring", label: "Wiring & socket installation", desc: "New points, fixtures, distribution board", price: 15000 },
+ { id: "rewire", label: "Full house rewire", desc: "Quoted after a site visit", price: 60000, from: true },
+ { id: "solar", label: "Inverter / solar setup", desc: "Install & configuration", price: 45000, from: true },
+];
+
+function generic(trade: string): Service[] {
+ return [
+ { id: "standard", label: `Standard ${trade.toLowerCase()} visit`, desc: "Assessment and standard work · ~1–2 hrs", price: 10000 },
+ { id: "callout", label: "Call-out & quote", desc: "On-site assessment, quoted before work starts", price: 5000 },
+ { id: "project", label: "Full project", desc: "Quoted after a consultation", price: 40000, from: true },
+ ];
+}
+
+export function getServices(category: CategoryKey, trade: string): Service[] {
+ return category === "electrical" ? ELECTRICAL : generic(trade);
+}
+
+/** Platform service fee, 10% of the base rate (mockup: ₦8,000 → ₦800). */
+export function feeFor(price: number): number {
+ return Math.round(price * 0.1);
+}
+
+export interface TimeSlot {
+ t: string;
+ off?: boolean;
+}
+
+export const TIME_SLOTS: TimeSlot[] = [
+ { t: "08:00" },
+ { t: "09:30", off: true },
+ { t: "11:00" },
+ { t: "12:30" },
+ { t: "14:00" },
+ { t: "16:00" },
+];
+
+export interface DateChip {
+ iso: string;
+ dow: string; // THU
+ num: string; // 11
+ label: string; // Fri 11 Jul (used in the summary)
+ disabled: boolean; // Sundays closed
+}
+
+const DOW_SHORT = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+const DOW_TITLE = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+/** Compute the next `count` days on the server so the client hydrates
+ from stable prop values (no midnight hydration mismatch).
+
+ "Today" is anchored to PROVIDER_TIME_ZONE (Lagos) rather than the host
+ machine's own clock — serverless hosts typically run in UTC, so around
+ midnight WAT the old `new Date()` could compute the wrong "toda */
+export function buildDates(count = 7): DateChip[] {
+ const todayIso = todayIsoInZone(PROVIDER_TIME_ZONE);
+ const [y, m, d] = todayIso.split("-").map(Number);
+ // Noon UTC avoids landing on a different calendar day when this Date is
+ // later read back with .getDate()/.getDay() in the host's own zone.
+ const today = new Date(Date.UTC(y, m - 1, d, 12));
+ return Array.from({ length: count }, (_, i) => {
+ const day = new Date(today);
+ day.setUTCDate(today.getUTCDate() + i);
+ const dayIdx = day.getUTCDay();
+ return {
+ iso: day.toISOString().slice(0, 10),
+ dow: DOW_SHORT[dayIdx],
+ num: String(day.getUTCDate()),
+ label: `${DOW_TITLE[dayIdx]} ${day.getUTCDate()} ${MONTHS[day.getUTCMonth()]}`,
+ disabled: dayIdx === 0,
+ };
+ });
+}
diff --git a/src/lib/config.ts b/src/lib/config.ts
new file mode 100644
index 0000000..f59af86
--- /dev/null
+++ b/src/lib/config.ts
@@ -0,0 +1,2 @@
+export const API_BASE_URL =
+ process.env.NEXT_PUBLIC_API_BASE_URL ?? "https://guildworkman-api.onrender.com";
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..1f03e82
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,60 @@
+export interface SkillDetail {
+ skill: string;
+ image: string;
+ name: string;
+ description: string;
+}
+
+export const categories = [
+ "ELECTRICAL",
+ "PLUMBING",
+ "BEAUTY CARE",
+ "CARPENTRY",
+ "FASHION",
+ "PHOTOGRAPHY",
+] as const;
+
+const barberDescription =
+ "A skilled tradesperson who specializes in their craft, working with clients to deliver reliable, professional service.";
+
+export const electricalDetails: SkillDetail[] = [
+ {
+ skill: "Electrician",
+ image: "/assets/electrician.jpeg",
+ name: "Francis Mark",
+ description: barberDescription,
+ },
+ {
+ skill: "Electrician",
+ image: "/assets/hairstylist.jpg",
+ name: "Francis Mark",
+ description: barberDescription,
+ },
+ {
+ skill: "Electrician",
+ image: "/assets/foundationLayers.jpg",
+ name: "Francis Mark",
+ description: barberDescription,
+ },
+];
+
+export const plumberDetails: SkillDetail[] = [
+ {
+ skill: "Plumber",
+ image: "/assets/plumb1.jpeg",
+ name: "Francis Mark",
+ description: barberDescription,
+ },
+ {
+ skill: "Plumber",
+ image: "/assets/plumb2.jpeg",
+ name: "Francis Mark",
+ description: barberDescription,
+ },
+ {
+ skill: "Plumber",
+ image: "/assets/plum3.jpeg",
+ name: "Francis Mark",
+ description: barberDescription,
+ },
+];
diff --git a/src/lib/identityVerification.ts b/src/lib/identityVerification.ts
new file mode 100644
index 0000000..0ac7faf
--- /dev/null
+++ b/src/lib/identityVerification.ts
@@ -0,0 +1,144 @@
+/**
+ * Onboarding identity verification wizard — state shape, save-and-resume
+ * persistence, and the submission call.
+ *
+ * WHY THIS IS A FRONTEND-ONLY STUB (read before wiring a real endpoint)
+ * `guildworkman-core` doesn't expose an identity-verification endpoint yet —
+ * only `/api/v1/client/*`, `/api/v1/skilledWorker/*`, and `/api/v1/auth/*`
+ * (see `src/lib/api.ts`). Rather than invent a REST shape the backend can't
+ * answer, `submitIdentityVerification` below simulates the round trip
+ * (latency + a success/failure outcome) so the wizard's step validation,
+ * save-and-resume, and error-recovery UI are fully exercised today. Swap its
+ * body for a real `postJson(...)` call in `lib/api.ts` once the backend adds
+ * the route — the wizard component doesn't need to change, only this
+ * function's implementation.
+ *
+ * WHY UPLOADED FILES ARE NOT PERSISTED
+ * `localStorage` is the only realistic client-side store for save-and-resume
+ * (it's what `slotLock.ts` already uses), but it's a poor — and, for a photo
+ * ID or a selfie, actively unsafe — place to keep sensitive document images:
+ * it's unencrypted, has no expiry of its own, and a multi-MB data URL risks
+ * blowing the ~5MB quota outright. So only non-sensitive step data (names,
+ * document numbers, which step you were on) is persisted; uploaded files
+ * live in React state only. Resuming after a reload restores every answered
+ * field but asks the user to re-attach documents/selfie — a deliberate
+ * trade-off of a little resume friction for not writing ID photos to disk.
+ */
+
+export type DocumentType = "national-id" | "passport" | "drivers-license";
+
+export interface PersonalDetails {
+ fullName: string;
+ dateOfBirth: string;
+ nationality: string;
+ phoneNumber: string;
+}
+
+export interface DocumentDetails {
+ documentType: DocumentType | "";
+ documentNumber: string;
+}
+
+/** Document types whose back side actually carries information; passports
+ are a single data page, so we don't ask for a "back" scan of one. */
+export const DOCUMENT_TYPES_REQUIRING_BACK: DocumentType[] = ["national-id", "drivers-license"];
+
+export interface IdentityVerificationFormValues {
+ personal: PersonalDetails;
+ document: DocumentDetails;
+}
+
+export const EMPTY_FORM_VALUES: IdentityVerificationFormValues = {
+ personal: { fullName: "", dateOfBirth: "", nationality: "", phoneNumber: "" },
+ document: { documentType: "", documentNumber: "" },
+};
+
+export const STEP_IDS = ["personal", "document", "upload", "selfie", "review"] as const;
+export type StepId = (typeof STEP_IDS)[number];
+
+export const STEP_LABELS: Record = {
+ personal: "Personal details",
+ document: "Document type",
+ upload: "Upload document",
+ selfie: "Selfie check",
+ review: "Review & submit",
+};
+
+/** Field paths (dot-notation, matching react-hook-form's `trigger` API)
+ validated before a step is allowed to advance. Upload/selfie/review are
+ validated separately since they gate on files held in component state,
+ not registered form fields. */
+export const STEP_VALIDATION_FIELDS: Partial> = {
+ personal: ["personal.fullName", "personal.dateOfBirth", "personal.nationality", "personal.phoneNumber"],
+ document: ["document.documentType", "document.documentNumber"],
+};
+
+const STORAGE_KEY = "gw-identity-verification-v1";
+
+export interface PersistedProgress {
+ step: number;
+ values: IdentityVerificationFormValues;
+ /** Filenames only, so a resumed session can show "you'd attached X" —
+ never the file contents themselves (see module doc comment). */
+ attachedFileNames: Partial>;
+ savedAt: string;
+}
+
+export function loadProgress(): PersistedProgress | null {
+ if (typeof window === "undefined") return null;
+ try {
+ const raw = window.localStorage.getItem(STORAGE_KEY);
+ if (!raw) return null;
+ return JSON.parse(raw) as PersistedProgress;
+ } catch {
+ return null;
+ }
+}
+
+export function saveProgress(progress: Omit): void {
+ if (typeof window === "undefined") return;
+ const record: PersistedProgress = { ...progress, savedAt: new Date().toISOString() };
+ try {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify(record));
+ } catch {
+ // Quota exceeded or storage disabled — resume just won't be available.
+ }
+}
+
+export function clearProgress(): void {
+ if (typeof window === "undefined") return;
+ window.localStorage.removeItem(STORAGE_KEY);
+}
+
+export interface IdentityVerificationPayload extends IdentityVerificationFormValues {
+ hasFrontUpload: boolean;
+ hasBackUpload: boolean;
+ hasSelfie: boolean;
+}
+
+export interface IdentityVerificationResult {
+ referenceId: string;
+ status: "pending-review";
+}
+
+/** Simulated submission — see the module doc comment for why this doesn't
+ call a real backend endpoint yet. Fails roughly 1 in 6 tries so the
+ wizard's error-recovery path (inline error + retry, form left intact) is
+ reachable without special test hooks. */
+export function submitIdentityVerification(
+ payload: IdentityVerificationPayload
+): Promise {
+ void payload; // not sent anywhere yet — see module doc comment
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ if (Math.random() < 1 / 6) {
+ reject(new Error("We couldn't reach the verification service. Please try again."));
+ return;
+ }
+ resolve({
+ referenceId: `IDV-${Date.now().toString(36).toUpperCase()}`,
+ status: "pending-review",
+ });
+ }, 1200);
+ });
+}
diff --git a/src/lib/marketplace.ts b/src/lib/marketplace.ts
new file mode 100644
index 0000000..148f76a
--- /dev/null
+++ b/src/lib/marketplace.ts
@@ -0,0 +1,117 @@
+/* Sample marketplace content for the redesigned surfaces. Shapes stay
+ compatible with the API categories in constants.ts / types.ts; the
+ numbers here are illustrative Lagos content until the app is wired to
+ skilledWorker/nearby + the category list. */
+
+export type CategoryKey =
+ | "electrical"
+ | "plumbing"
+ | "beauty"
+ | "carpentry"
+ | "fashion"
+ | "photography";
+
+export interface CategoryMeta {
+ key: CategoryKey;
+ label: string;
+ /** Matches the API's category enum (see lib/constants.ts). */
+ apiCategory: string;
+ count: number;
+ fromPrice: number;
+}
+
+export const CATEGORIES: CategoryMeta[] = [
+ { key: "electrical", label: "Electrical", apiCategory: "ELECTRICAL", count: 320, fromPrice: 8000 },
+ { key: "plumbing", label: "Plumbing", apiCategory: "PLUMBING", count: 210, fromPrice: 6000 },
+ { key: "beauty", label: "Beauty Care", apiCategory: "BEAUTY_CARE", count: 540, fromPrice: 3500 },
+ { key: "carpentry", label: "Carpentry", apiCategory: "CARPENTRY", count: 180, fromPrice: 12000 },
+ { key: "fashion", label: "Fashion", apiCategory: "FASHION", count: 260, fromPrice: 15000 },
+ { key: "photography", label: "Photography", apiCategory: "PHOTOGRAPHY", count: 140, fromPrice: 20000 },
+];
+
+export function getCategory(key: string): CategoryMeta | undefined {
+ return CATEGORIES.find((c) => c.key === key);
+}
+
+export interface Worker {
+ id: string;
+ name: string;
+ initials: string;
+ /** Avatar background colour until real photos are wired in. */
+ avatar: string;
+ trade: string;
+ area: string;
+ rating: number;
+ reviews: number;
+ priceFrom: number;
+ category: CategoryKey;
+ specialties: string[];
+ /** Distance from the client's chosen area, km (illustrative). */
+ distanceKm: number;
+ featured?: boolean;
+}
+
+export const WORKERS: Worker[] = [
+ // Electrical
+ { id: "gw-chidi", name: "Chidi O.", initials: "CO", avatar: "#c24a2a", trade: "Electrician", area: "Yaba", rating: 4.9, reviews: 128, priceFrom: 8000, category: "electrical", specialties: ["Wiring", "Fault repair", "Inverters"], distanceKm: 1.2, featured: true },
+ { id: "gw-ngozi", name: "Ngozi A.", initials: "NA", avatar: "#2a6e5a", trade: "Electrician", area: "Yaba", rating: 5.0, reviews: 63, priceFrom: 10000, category: "electrical", specialties: ["Rewiring", "Solar"], distanceKm: 0.8 },
+ { id: "gw-emeka", name: "Emeka I.", initials: "EI", avatar: "#b9801f", trade: "Electrician", area: "Surulere", rating: 4.7, reviews: 204, priceFrom: 7500, category: "electrical", specialties: ["Sockets", "Repairs"], distanceKm: 3.1 },
+ { id: "gw-musa", name: "Musa D.", initials: "MD", avatar: "#7a4f9e", trade: "Electrician", area: "Ikeja", rating: 4.8, reviews: 151, priceFrom: 9000, category: "electrical", specialties: ["Industrial", "Fault repair"], distanceKm: 5.4 },
+ { id: "gw-femi", name: "Femi B.", initials: "FB", avatar: "#2a3a66", trade: "Electrician", area: "Lekki", rating: 4.9, reviews: 240, priceFrom: 12000, category: "electrical", specialties: ["Solar", "Inverters", "Rewiring"], distanceKm: 8.0 },
+ // Plumbing
+ { id: "gw-kunle", name: "Kunle S.", initials: "KS", avatar: "#2a6e5a", trade: "Plumber", area: "Surulere", rating: 4.8, reviews: 96, priceFrom: 6000, category: "plumbing", specialties: ["Leaks", "Fittings"], distanceKm: 2.4 },
+ { id: "gw-ibrahim", name: "Ibrahim Y.", initials: "IY", avatar: "#b9801f", trade: "Plumber", area: "Ikeja", rating: 4.6, reviews: 132, priceFrom: 7000, category: "plumbing", specialties: ["Drainage", "Water heaters"], distanceKm: 4.9 },
+ { id: "gw-chioma", name: "Chioma E.", initials: "CE", avatar: "#7a4f9e", trade: "Plumber", area: "Yaba", rating: 4.9, reviews: 78, priceFrom: 8500, category: "plumbing", specialties: ["Bathrooms", "Pipework"], distanceKm: 1.6 },
+ // Beauty
+ { id: "gw-bukola", name: "Bukola A.", initials: "BA", avatar: "#2a6e5a", trade: "Hair stylist", area: "Lekki", rating: 4.9, reviews: 312, priceFrom: 6500, category: "beauty", specialties: ["Braids", "Locs", "Gele"], distanceKm: 8.0, featured: true },
+ { id: "gw-tolu", name: "Tolu F.", initials: "TF", avatar: "#c24a2a", trade: "Makeup artist", area: "Yaba", rating: 5.0, reviews: 145, priceFrom: 12000, category: "beauty", specialties: ["Bridal", "Editorial"], distanceKm: 1.1 },
+ { id: "gw-halima", name: "Halima B.", initials: "HB", avatar: "#b9801f", trade: "Barber", area: "Surulere", rating: 4.7, reviews: 210, priceFrom: 3500, category: "beauty", specialties: ["Fades", "Beard work"], distanceKm: 3.0 },
+ // Carpentry
+ { id: "gw-tunde", name: "Tunde B.", initials: "TB", avatar: "#b9801f", trade: "Carpenter", area: "Ikeja", rating: 4.8, reviews: 204, priceFrom: 15000, category: "carpentry", specialties: ["Furniture", "Fittings"], distanceKm: 5.4, featured: true },
+ { id: "gw-segun", name: "Segun O.", initials: "SO", avatar: "#2a3a66", trade: "Carpenter", area: "Yaba", rating: 4.7, reviews: 88, priceFrom: 12000, category: "carpentry", specialties: ["Wardrobes", "Doors"], distanceKm: 1.9 },
+ { id: "gw-grace", name: "Grace N.", initials: "GN", avatar: "#7a4f9e", trade: "Carpenter", area: "Maryland", rating: 4.9, reviews: 121, priceFrom: 18000, category: "carpentry", specialties: ["Cabinets", "Bespoke"], distanceKm: 4.2 },
+ // Fashion
+ { id: "gw-amara", name: "Amara N.", initials: "AN", avatar: "#7a4f9e", trade: "Fashion designer", area: "Surulere", rating: 5.0, reviews: 86, priceFrom: 25000, category: "fashion", specialties: ["Bridal", "Ankara", "Tailoring"], distanceKm: 3.1, featured: true },
+ { id: "gw-zainab", name: "Zainab O.", initials: "ZO", avatar: "#c24a2a", trade: "Fashion designer", area: "Lekki", rating: 4.8, reviews: 64, priceFrom: 30000, category: "fashion", specialties: ["Agbada", "Ready-to-wear"], distanceKm: 7.5 },
+ { id: "gw-ada", name: "Ada M.", initials: "AM", avatar: "#2a6e5a", trade: "Tailor", area: "Yaba", rating: 4.9, reviews: 152, priceFrom: 10000, category: "fashion", specialties: ["Alterations", "Native"], distanceKm: 1.4 },
+ // Photography
+ { id: "gw-ife", name: "Ife K.", initials: "IK", avatar: "#2a3a66", trade: "Photographer", area: "Lekki", rating: 4.9, reviews: 98, priceFrom: 20000, category: "photography", specialties: ["Events", "Portrait"], distanceKm: 7.8 },
+ { id: "gw-sola", name: "Sola A.", initials: "SA", avatar: "#b9801f", trade: "Photographer", area: "Yaba", rating: 4.7, reviews: 55, priceFrom: 18000, category: "photography", specialties: ["Weddings", "Studio"], distanceKm: 1.3 },
+ { id: "gw-uche", name: "Uche P.", initials: "UP", avatar: "#c24a2a", trade: "Videographer", area: "Ikeja", rating: 5.0, reviews: 41, priceFrom: 35000, category: "photography", specialties: ["Cinematic", "Drone"], distanceKm: 5.0 },
+];
+
+/** Highest-rated first — the default "Top rated" browse order. */
+export function getWorkersByCategory(key: CategoryKey): Worker[] {
+ return WORKERS.filter((w) => w.category === key).sort((a, b) => b.rating - a.rating);
+}
+
+export function getWorkerById(id: string): Worker | undefined {
+ return WORKERS.find((w) => w.id === id);
+}
+
+/** Curated set for the landing page. */
+export const FEATURED_WORKERS: Worker[] = ["gw-chidi", "gw-amara", "gw-tunde", "gw-bukola"]
+ .map((id) => getWorkerById(id))
+ .filter((w): w is Worker => Boolean(w));
+
+export const LAGOS_AREAS = [
+ "Yaba, Lagos",
+ "Ikeja, Lagos",
+ "Surulere, Lagos",
+ "Lekki, Lagos",
+ "Victoria Island, Lagos",
+ "Maryland, Lagos",
+];
+
+export const TRADES = [
+ "Electrician",
+ "Plumber",
+ "Carpenter",
+ "Hair stylist",
+ "Fashion designer",
+ "Photographer",
+];
+
+export function formatNaira(amount: number): string {
+ return "₦" + amount.toLocaleString("en-NG");
+}
diff --git a/src/lib/notifications.ts b/src/lib/notifications.ts
new file mode 100644
index 0000000..c9d23e8
--- /dev/null
+++ b/src/lib/notifications.ts
@@ -0,0 +1,99 @@
+/** Deep-link target attached to a notification. */
+export interface DeepLink {
+ label: string;
+ href: string;
+}
+
+/** Retry action attached to a notification. */
+export interface RetryAction {
+ label: string;
+ handler: () => Promise | void;
+}
+
+export type NotificationType = "pending" | "success" | "error" | "info";
+
+export interface TransactionNotification {
+ id: string;
+ type: NotificationType;
+ title: string;
+ message: string;
+ /** ISO timestamp of when the notification was created. */
+ timestamp: string;
+ /** Optional deep-link rendered as a button inside the toast / center. */
+ deepLink?: DeepLink;
+ /** Optional retry action, shown as a button for failed transactions. */
+ retryAction?: RetryAction;
+}
+
+let _counter = 0;
+
+/** Create a unique, human‑readable notification ID. */
+export function createNotificationId(): string {
+ _counter += 1;
+ return `notif-${Date.now()}-${_counter}`;
+}
+
+/** Helper to build a success notification. */
+export function successNotification(
+ title: string,
+ message: string,
+ deepLink?: DeepLink
+): TransactionNotification {
+ return {
+ id: createNotificationId(),
+ type: "success",
+ title,
+ message,
+ timestamp: new Date().toISOString(),
+ deepLink,
+ };
+}
+
+/** Helper to build an error notification with an optional retry action. */
+export function errorNotification(
+ title: string,
+ message: string,
+ retryAction?: RetryAction,
+ deepLink?: DeepLink
+): TransactionNotification {
+ return {
+ id: createNotificationId(),
+ type: "error",
+ title,
+ message,
+ timestamp: new Date().toISOString(),
+ retryAction,
+ deepLink,
+ };
+}
+
+/** Helper to build a pending notification. */
+export function pendingNotification(
+ title: string,
+ message: string
+): TransactionNotification {
+ return {
+ id: createNotificationId(),
+ type: "pending",
+ title,
+ message,
+ timestamp: new Date().toISOString(),
+ };
+}
+
+/** Helper to build an info notification. */
+export function infoNotification(
+ title: string,
+ message: string,
+ deepLink?: DeepLink
+): TransactionNotification {
+ return {
+ id: createNotificationId(),
+ type: "info",
+ title,
+ message,
+ timestamp: new Date().toISOString(),
+ deepLink,
+ };
+}
+
diff --git a/src/lib/slotLock.ts b/src/lib/slotLock.ts
new file mode 100644
index 0000000..48ce527
--- /dev/null
+++ b/src/lib/slotLock.ts
@@ -0,0 +1,151 @@
+/**
+ * Client-side slot locking, to stop a visitor from double-booking the same
+ * worker/date/time.
+ *
+ * WHY THIS IS CLIENT-SIDE ONLY (read before extending this file)
+ * Double-booking is really a backend concern — the source of truth for "is
+ * this worker already busy at 9:30am Thursday" has to live wherever
+ * appointments are stored. Today `guildworkman-core` doesn't expose an
+ * endpoint to list a *worker's* upcoming appointments — only
+ * `viewAllAppointment`, which returns the logged-in *client's own*
+ * bookings (see `viewAllAppointmentApi` in lib/api.ts). Without a
+ * per-worker availability endpoint, the frontend has no way to ask "is
+ * this slot already taken by someone else" before submitting.
+ *
+ * Until that endpoint exists, this module owns the piece that *is*
+ * legitimately solvable on the frontend: stopping a visitor from
+ * double-booking *themselves* — e.g. opening the same worker's page in two
+ * tabs and paying for the same slot twice, or refreshing mid-checkout and
+ * losing track of a slot they already committed to. It combines
+ * `localStorage` (survives a refresh) with `BroadcastChannel` (near-
+ * instant sync across tabs of the same browser) and a short TTL, so a lock
+ * left behind by a crashed tab or an abandoned checkout releases itself
+ * automatically instead of blocking that slot forever.
+ *
+ * ARCHITECTURAL NOTE: this does NOT prevent two different
+ * visitors (different browsers) from racing for the same slot — that
+ * needs a backend change (a per-worker availability/hold endpoint) which
+ * is out of scope for a Frontend-only issue. Tracking that as a follow-up
+ * is recommended once this lands.
+ */
+
+const CHANNEL_NAME = "gw-slot-locks";
+const STORAGE_PREFIX = "gw-slot-lock:";
+
+/** How long a selected slot stays held before it's released automatically.
+ Long enough to pick a service, fill in the job address, and pay. */
+export const LOCK_TTL_MS = 5 * 60_000;
+
+export interface SlotLock {
+ key: string;
+ holderId: string;
+ expiresAt: number;
+}
+
+function storageKey(key: string): string {
+ return `${STORAGE_PREFIX}${key}`;
+}
+
+/** Builds the lock key for a given worker + date + time slot. */
+export function slotKey(workerId: string, dateIso: string, time: string): string {
+ return `${workerId}|${dateIso}|${time}`;
+}
+
+function readLock(key: string): SlotLock | null {
+ if (typeof window === "undefined") return null;
+ try {
+ const raw = window.localStorage.getItem(storageKey(key));
+ if (!raw) return null;
+ const lock = JSON.parse(raw) as SlotLock;
+ if (!lock.expiresAt || lock.expiresAt <= Date.now()) {
+ window.localStorage.removeItem(storageKey(key));
+ return null;
+ }
+ return lock;
+ } catch {
+ return null;
+ }
+}
+
+function writeLock(key: string, lock: SlotLock | null): void {
+ if (typeof window === "undefined") return;
+ if (lock) window.localStorage.setItem(storageKey(key), JSON.stringify(lock));
+ else window.localStorage.removeItem(storageKey(key));
+}
+
+function getChannel(): BroadcastChannel | null {
+ if (typeof window === "undefined" || typeof BroadcastChannel === "undefined") return null;
+ try {
+ return new BroadcastChannel(CHANNEL_NAME);
+ } catch {
+ return null;
+ }
+}
+
+/** Returns the current lock on `key`, or null if it's free / expired. */
+export function getSlotLock(key: string): SlotLock | null {
+ return readLock(key);
+}
+
+/** True if `key` is currently locked by someone other than `holderId`. */
+export function isLockedByOther(key: string, holderId: string): boolean {
+ const lock = readLock(key);
+ return Boolean(lock && lock.holderId !== holderId);
+}
+
+/** Attempts to acquire (or renew) the lock on `key` for `holderId`.
+ Returns false without changing anything if another holder already has
+ an unexpired lock on it. */
+export function acquireSlotLock(key: string, holderId: string, ttlMs = LOCK_TTL_MS): boolean {
+ const existing = readLock(key);
+ if (existing && existing.holderId !== holderId) return false;
+
+ const lock: SlotLock = { key, holderId, expiresAt: Date.now() + ttlMs };
+ writeLock(key, lock);
+ const channel = getChannel();
+ channel?.postMessage({ type: "lock", key });
+ channel?.close();
+ return true;
+}
+
+/** Releases `key`, but only if `holderId` is the one holding it — so a
+ stale release firing from an old/reloaded tab can't steal a lock that a
+ newer tab has since (legitimately) taken over. */
+export function releaseSlotLock(key: string, holderId: string): void {
+ const existing = readLock(key);
+ if (!existing || existing.holderId !== holderId) return;
+ writeLock(key, null);
+ const channel = getChannel();
+ channel?.postMessage({ type: "release", key });
+ channel?.close();
+}
+
+/** Subscribes to lock changes coming from other tabs — both same-tick
+ updates via `BroadcastChannel` and the native cross-document `storage`
+ event (fires in *other* tabs, not the one that wrote the value, which
+ is exactly the case `BroadcastChannel` covers for same-runtime
+ listeners already active). Returns an unsubscribe function. */
+export function subscribeToLockChanges(onChange: () => void): () => void {
+ if (typeof window === "undefined") return () => {};
+
+ const channel = getChannel();
+ channel?.addEventListener("message", onChange);
+
+ const onStorage = (e: StorageEvent) => {
+ if (e.key?.startsWith(STORAGE_PREFIX)) onChange();
+ };
+ window.addEventListener("storage", onStorage);
+
+ return () => {
+ channel?.removeEventListener("message", onChange);
+ channel?.close();
+ window.removeEventListener("storage", onStorage);
+ };
+}
+
+/** A per-tab identity so a tab's own lock never reads as "locked by
+ someone else" to itself. Call once per component/session, not per
+ render. */
+export function createHolderId(): string {
+ return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
diff --git a/src/lib/test/identityVerification.test.ts b/src/lib/test/identityVerification.test.ts
new file mode 100644
index 0000000..b4f2a80
--- /dev/null
+++ b/src/lib/test/identityVerification.test.ts
@@ -0,0 +1,62 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+ DOCUMENT_TYPES_REQUIRING_BACK,
+ EMPTY_FORM_VALUES,
+ clearProgress,
+ loadProgress,
+ saveProgress,
+} from "../identityVerification";
+
+describe("saveProgress / loadProgress / clearProgress", () => {
+ beforeEach(() => {
+ window.localStorage.clear();
+ });
+
+ it("returns null when nothing has been saved", () => {
+ expect(loadProgress()).toBeNull();
+ });
+
+ it("round-trips step index and form values", () => {
+ saveProgress({
+ step: 2,
+ values: {
+ ...EMPTY_FORM_VALUES,
+ personal: { ...EMPTY_FORM_VALUES.personal, fullName: "Ada Lovelace" },
+ },
+ attachedFileNames: { front: "id-front.jpg" },
+ });
+
+ const loaded = loadProgress();
+ expect(loaded?.step).toBe(2);
+ expect(loaded?.values.personal.fullName).toBe("Ada Lovelace");
+ expect(loaded?.attachedFileNames.front).toBe("id-front.jpg");
+ expect(loaded?.savedAt).toBeTruthy();
+ });
+
+ it("never persists file contents, only filenames", () => {
+ saveProgress({ step: 3, values: EMPTY_FORM_VALUES, attachedFileNames: { selfie: "me.png" } });
+ const raw = window.localStorage.getItem("gw-identity-verification-v1") ?? "";
+ expect(raw).toContain("me.png");
+ expect(raw).not.toContain("data:image");
+ });
+
+ it("clears a saved session", () => {
+ saveProgress({ step: 1, values: EMPTY_FORM_VALUES, attachedFileNames: {} });
+ expect(loadProgress()).not.toBeNull();
+ clearProgress();
+ expect(loadProgress()).toBeNull();
+ });
+
+ it("recovers gracefully from corrupted storage", () => {
+ window.localStorage.setItem("gw-identity-verification-v1", "{not-json");
+ expect(loadProgress()).toBeNull();
+ });
+});
+
+describe("DOCUMENT_TYPES_REQUIRING_BACK", () => {
+ it("requires a back scan for national ID and driver's license, not passport", () => {
+ expect(DOCUMENT_TYPES_REQUIRING_BACK).toContain("national-id");
+ expect(DOCUMENT_TYPES_REQUIRING_BACK).toContain("drivers-license");
+ expect(DOCUMENT_TYPES_REQUIRING_BACK).not.toContain("passport");
+ });
+});
diff --git a/src/lib/test/slotLock.test.ts b/src/lib/test/slotLock.test.ts
new file mode 100644
index 0000000..e71a305
--- /dev/null
+++ b/src/lib/test/slotLock.test.ts
@@ -0,0 +1,160 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+ LOCK_TTL_MS,
+ acquireSlotLock,
+ getSlotLock,
+ isLockedByOther,
+ releaseSlotLock,
+ slotKey,
+ subscribeToLockChanges,
+} from "../slotLock";
+
+describe("slotKey", () => {
+ it("combines worker, date, and time into a stable key", () => {
+ expect(slotKey("gw-chidi", "2026-07-24", "09:00")).toBe("gw-chidi|2026-07-24|09:00");
+ });
+
+ it("produces different keys for different slots", () => {
+ const a = slotKey("gw-chidi", "2026-07-24", "09:00");
+ const b = slotKey("gw-chidi", "2026-07-24", "09:30");
+ const c = slotKey("gw-chidi", "2026-07-25", "09:00");
+ const d = slotKey("gw-ada", "2026-07-24", "09:00");
+ expect(new Set([a, b, c, d]).size).toBe(4);
+ });
+});
+
+describe("acquireSlotLock / releaseSlotLock / getSlotLock", () => {
+ beforeEach(() => {
+ window.localStorage.clear();
+ });
+
+ it("acquires a free slot", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ expect(acquireSlotLock(key, "tab-a")).toBe(true);
+ expect(getSlotLock(key)?.holderId).toBe("tab-a");
+ });
+
+ it("lets the same holder re-acquire (renew) its own lock", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ acquireSlotLock(key, "tab-a");
+ expect(acquireSlotLock(key, "tab-a")).toBe(true);
+ });
+
+ it("refuses to hand a locked slot to a different holder", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ acquireSlotLock(key, "tab-a");
+ expect(acquireSlotLock(key, "tab-b")).toBe(false);
+ // the original holder keeps the lock
+ expect(getSlotLock(key)?.holderId).toBe("tab-a");
+ });
+
+ it("frees the slot once the original holder releases it", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ acquireSlotLock(key, "tab-a");
+ releaseSlotLock(key, "tab-a");
+ expect(getSlotLock(key)).toBeNull();
+ expect(acquireSlotLock(key, "tab-b")).toBe(true);
+ });
+
+ it("does not let a non-holder release someone else's lock", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ acquireSlotLock(key, "tab-a");
+ releaseSlotLock(key, "tab-b"); // wrong holder — should be a no-op
+ expect(getSlotLock(key)?.holderId).toBe("tab-a");
+ });
+});
+
+describe("isLockedByOther", () => {
+ beforeEach(() => {
+ window.localStorage.clear();
+ });
+
+ it("is false for a free slot", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ expect(isLockedByOther(key, "tab-a")).toBe(false);
+ });
+
+ it("is false for the slot's own holder", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ acquireSlotLock(key, "tab-a");
+ expect(isLockedByOther(key, "tab-a")).toBe(false);
+ });
+
+ it("is true when a different holder has the lock", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ acquireSlotLock(key, "tab-a");
+ expect(isLockedByOther(key, "tab-b")).toBe(true);
+ });
+});
+
+describe("lock expiry (TTL)", () => {
+ beforeEach(() => {
+ window.localStorage.clear();
+ vi.useFakeTimers();
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it("releases the lock on its own once the TTL has elapsed", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ acquireSlotLock(key, "tab-a");
+ expect(getSlotLock(key)).not.toBeNull();
+
+ vi.advanceTimersByTime(LOCK_TTL_MS + 1);
+
+ expect(getSlotLock(key)).toBeNull();
+ // and since it's expired, a different holder can now take it
+ expect(acquireSlotLock(key, "tab-b")).toBe(true);
+ });
+
+ it("does not expire early", () => {
+ const key = slotKey("gw-chidi", "2026-07-24", "09:00");
+ acquireSlotLock(key, "tab-a");
+
+ vi.advanceTimersByTime(LOCK_TTL_MS - 1_000);
+
+ expect(getSlotLock(key)?.holderId).toBe("tab-a");
+ expect(acquireSlotLock(key, "tab-b")).toBe(false);
+ });
+});
+
+describe("subscribeToLockChanges", () => {
+ it("notifies subscribers when another tab's storage write fires the native storage event", () => {
+ const onChange = vi.fn();
+ const unsubscribe = subscribeToLockChanges(onChange);
+
+ // The native `storage` event only fires in *other* documents than the
+ // one that wrote the value, so we dispatch it manually here to
+ // simulate that cross-tab signal.
+ window.dispatchEvent(
+ new StorageEvent("storage", { key: "gw-slot-lock:gw-chidi|2026-07-24|09:00" })
+ );
+
+ expect(onChange).toHaveBeenCalledTimes(1);
+ unsubscribe();
+ });
+
+ it("ignores storage events for unrelated keys", () => {
+ const onChange = vi.fn();
+ const unsubscribe = subscribeToLockChanges(onChange);
+
+ window.dispatchEvent(new StorageEvent("storage", { key: "some-unrelated-key" }));
+
+ expect(onChange).not.toHaveBeenCalled();
+ unsubscribe();
+ });
+
+ it("stops notifying after unsubscribe", () => {
+ const onChange = vi.fn();
+ const unsubscribe = subscribeToLockChanges(onChange);
+ unsubscribe();
+
+ window.dispatchEvent(
+ new StorageEvent("storage", { key: "gw-slot-lock:gw-chidi|2026-07-24|09:00" })
+ );
+
+ expect(onChange).not.toHaveBeenCalled();
+ });
+});
\ No newline at end of file
diff --git a/src/lib/test/timezone.test.ts b/src/lib/test/timezone.test.ts
new file mode 100644
index 0000000..7430063
--- /dev/null
+++ b/src/lib/test/timezone.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import {
+ PROVIDER_TIME_ZONE,
+ convertSlotToZone,
+ getVisitorTimeZone,
+ offsetLabel,
+ todayIsoInZone,
+ zonedTimeToUtc,
+} from "../timezone";
+
+// Fixed zones with no DST, chosen deliberately so the tests are stable
+// year-round instead of depending on today's date relative to a DST
+// boundary:
+// Africa/Lagos UTC+1 (the provider zone itself)
+// Asia/Tokyo UTC+9 (always ahead of Lagos -> exercises +1 day)
+// America/Phoenix UTC-7 (always behind Lagos -> exercises -1 day)
+
+describe("zonedTimeToUtc", () => {
+ it("converts a Lagos wall-clock reading to the matching UTC instant", () => {
+ // 09:00 in Lagos (UTC+1) is 08:00 UTC.
+ const utc = zonedTimeToUtc("2026-07-24", "09:00", PROVIDER_TIME_ZONE);
+ expect(utc.toISOString()).toBe("2026-07-24T08:00:00.000Z");
+ });
+
+ it("is a no-op offset for midnight", () => {
+ const utc = zonedTimeToUtc("2026-01-01", "00:00", PROVIDER_TIME_ZONE);
+ expect(utc.toISOString()).toBe("2025-12-31T23:00:00.000Z");
+ });
+});
+
+describe("convertSlotToZone", () => {
+ it("keeps the same calendar day when the visitor zone is far enough ahead of Lagos midday", () => {
+ // 09:00 Lagos -> Tokyo is Lagos+8h -> 17:00 same day.
+ const zoned = convertSlotToZone("2026-07-24", "09:00", "Asia/Tokyo");
+ expect(zoned).toEqual({ time: "17:00", dayOffset: 0 });
+ });
+
+ it("rolls forward a day when the visitor zone is ahead and the slot is late", () => {
+ // 20:00 Lagos -> Tokyo is Lagos+8h -> 04:00 the next day.
+ const zoned = convertSlotToZone("2026-07-24", "20:00", "Asia/Tokyo");
+ expect(zoned).toEqual({ time: "04:00", dayOffset: 1 });
+ });
+
+ it("keeps the same calendar day when the visitor zone is behind but the slot is late enough", () => {
+ // 09:00 Lagos -> Phoenix is Lagos-8h -> 01:00 same day.
+ const zoned = convertSlotToZone("2026-07-24", "09:00", "America/Phoenix");
+ expect(zoned).toEqual({ time: "01:00", dayOffset: 0 });
+ });
+
+ it("rolls back a day when the visitor zone is behind and the slot is early", () => {
+ // 06:00 Lagos -> Phoenix is Lagos-8h -> 22:00 the previous day.
+ const zoned = convertSlotToZone("2026-07-24", "06:00", "America/Phoenix");
+ expect(zoned).toEqual({ time: "22:00", dayOffset: -1 });
+ });
+
+ it("is a no-op when converting to the provider's own zone", () => {
+ const zoned = convertSlotToZone("2026-07-24", "14:30", PROVIDER_TIME_ZONE);
+ expect(zoned).toEqual({ time: "14:30", dayOffset: 0 });
+ });
+});
+
+describe("offsetLabel", () => {
+ const at = new Date("2026-07-24T12:00:00Z");
+
+ it("formats the provider zone", () => {
+ expect(offsetLabel(PROVIDER_TIME_ZONE, at)).toBe("GMT+1");
+ });
+
+ it("formats a zone ahead of UTC", () => {
+ expect(offsetLabel("Asia/Tokyo", at)).toBe("GMT+9");
+ });
+
+ it("formats a zone behind UTC", () => {
+ expect(offsetLabel("America/Phoenix", at)).toBe("GMT-7");
+ });
+});
+
+describe("todayIsoInZone", () => {
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it("reports the Lagos calendar date even when the host clock is a UTC instant that has already rolled to the next day locally", () => {
+ // 23:30 UTC on the 24th is already 00:30 on the 25th in Lagos (UTC+1).
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date("2026-07-24T23:30:00Z"));
+ expect(todayIsoInZone(PROVIDER_TIME_ZONE)).toBe("2026-07-25");
+ });
+
+ it("reports the visitor's own calendar date the same way", () => {
+ // 01:00 UTC on the 24th is still 17:00 on the 23rd in Phoenix (UTC-7).
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date("2026-07-24T01:00:00Z"));
+ expect(todayIsoInZone("America/Phoenix")).toBe("2026-07-23");
+ });
+});
+
+describe("getVisitorTimeZone", () => {
+ it("falls back to the provider zone when Intl is unavailable", () => {
+ const original = globalThis.Intl;
+ // @ts-expect-error deliberately simulating an environment without Intl
+ delete globalThis.Intl;
+ expect(getVisitorTimeZone()).toBe(PROVIDER_TIME_ZONE);
+ globalThis.Intl = original;
+ });
+
+ it("otherwise returns a non-empty IANA zone string", () => {
+ expect(getVisitorTimeZone().length).toBeGreaterThan(0);
+ });
+});
\ No newline at end of file
diff --git a/src/lib/timezone.ts b/src/lib/timezone.ts
new file mode 100644
index 0000000..3f71421
--- /dev/null
+++ b/src/lib/timezone.ts
@@ -0,0 +1,136 @@
+/**
+ * Timezone-aware helpers for the booking calendar.
+ *
+ * BACKGROUND
+ * The backend's `scheduleTime` is a bare `LocalDateTime` with no zone info
+ * (see `ViewAllAppointmentsResponse.scheduleTime` in lib/types.ts) — every
+ * date/time string the API sends and receives is implicitly a wall-clock
+ * reading in the provider's own local time, which for GuildWorkman today
+ * is always Lagos, Nigeria. There's no per-visitor zone stored anywhere on
+ * the backend.
+ *
+ * So "timezone-aware" here means: the source of truth for a slot is a wall
+ * clock time in PROVIDER_TIME_ZONE. This module turns that into a real
+ * point in time (a UTC instant) and re-renders it in whatever zone the
+ * visitor's browser reports, so someone browsing from London or New York
+ * sees slot times in *their* local time instead of silently seeing WAT and
+ * showing up at the wrong hour.
+ */
+
+/** The single provider zone every `scheduleTime` on the backend is anchored
+ to. Becomes a lookup (per worker/region) if GuildWorkman ever operates
+ outside Lagos — hardcoded for now since the backend has no concept of
+ worker timezone either. */
+export const PROVIDER_TIME_ZONE = "Africa/Lagos";
+
+export function getVisitorTimeZone(): string {
+ if (typeof Intl === "undefined") return PROVIDER_TIME_ZONE;
+ try {
+ return Intl.DateTimeFormat().resolvedOptions().timeZone || PROVIDER_TIME_ZONE;
+ } catch {
+ return PROVIDER_TIME_ZONE;
+ }
+}
+
+interface DateTimeParts {
+ year: number;
+ month: number; // 1-12
+ day: number;
+ hour: number;
+ minute: number;
+}
+
+/** Reads the wall-clock date/time `instant` shows when viewed in `zone`. */
+function getZonedParts(instant: Date, zone: string): DateTimeParts {
+ const dtf = new Intl.DateTimeFormat("en-US", {
+ timeZone: zone,
+ hour12: false,
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+ const parts = dtf.formatToParts(instant).reduce>((acc, p) => {
+ if (p.type !== "literal") acc[p.type] = p.value;
+ return acc;
+ }, {});
+ return {
+ year: Number(parts.year),
+ month: Number(parts.month),
+ day: Number(parts.day),
+ // Intl reports midnight as "24" in some environments with hour12:false.
+ hour: Number(parts.hour) % 24,
+ minute: Number(parts.minute),
+ };
+}
+
+/** Minutes to ADD to a UTC instant to get the wall-clock reading in `zone`
+ at that moment (e.g. Lagos/WAT is UTC+1 → returns +60). Computed by
+ asking Intl what `zone` reads at `instant` and diffing against UTC,
+ rather than hardcoding an offset, so zones that observe DST stay
+ correct across the year. */
+function getOffsetMinutes(instant: Date, zone: string): number {
+ const zoned = getZonedParts(instant, zone);
+ const asUtc = Date.UTC(zoned.year, zoned.month - 1, zoned.day, zoned.hour, zoned.minute);
+ return Math.round((asUtc - instant.getTime()) / 60_000);
+}
+
+/**
+ * Converts a "wall clock" date + time meant to be read in `zone` into a
+ * real UTC instant (a `Date`).
+ */
+export function zonedTimeToUtc(dateIso: string, time: string, zone: string): Date {
+ const [year, month, day] = dateIso.split("-").map(Number);
+ const [hour, minute] = time.split(":").map(Number);
+ const naiveUtc = Date.UTC(year, month - 1, day, hour, minute);
+
+ const firstOffset = getOffsetMinutes(new Date(naiveUtc), zone);
+ const candidate = naiveUtc - firstOffset * 60_000;
+
+ const secondOffset = getOffsetMinutes(new Date(candidate), zone);
+ return new Date(naiveUtc - secondOffset * 60_000);
+}
+
+export interface ZonedSlot {
+ /** "HH:mm" as it reads in the target zone. */
+ time: string;
+ dayOffset: number;
+}
+
+/** Converts a provider-local `dateIso` + `time` into how it reads in
+ `zone`, plus how many calendar days that reading has drifted. */
+export function convertSlotToZone(dateIso: string, time: string, zone: string): ZonedSlot {
+ const utcInstant = zonedTimeToUtc(dateIso, time, PROVIDER_TIME_ZONE);
+ const zoned = getZonedParts(utcInstant, zone);
+
+ const zonedDayUtc = Date.UTC(zoned.year, zoned.month - 1, zoned.day);
+ const [y, m, d] = dateIso.split("-").map(Number);
+ const providerDayUtc = Date.UTC(y, m - 1, d);
+ const dayOffset = Math.round((zonedDayUtc - providerDayUtc) / 86_400_000);
+
+ return {
+ time: `${String(zoned.hour).padStart(2, "0")}:${String(zoned.minute).padStart(2, "0")}`,
+ dayOffset,
+ };
+}
+
+/** A short human label for a zone's current offset, e.g. "GMT+1" — used in
+ the "times shown in your timezone" banner. Falls back to the bare zone
+ name if the runtime doesn't support `timeZoneName: "shortOffset"`. */
+export function offsetLabel(zone: string, at: Date = new Date()): string {
+ try {
+ const parts = new Intl.DateTimeFormat("en-US", {
+ timeZone: zone,
+ timeZoneName: "shortOffset",
+ }).formatToParts(at);
+ return parts.find((p) => p.type === "timeZoneName")?.value ?? zone;
+ } catch {
+ return zone;
+ }
+}
+
+export function todayIsoInZone(zone: string): string {
+ const { year, month, day } = getZonedParts(new Date(), zone);
+ return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..eb66814
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,111 @@
+export interface RegistrationRequest {
+ fullName: string;
+ email: string;
+ password: string;
+}
+
+export interface RegistrationResponse {
+ message: string;
+ clientId?: number;
+ skilledWorkerId?: number;
+}
+
+export interface LoginRequest {
+ email: string;
+ password: string;
+}
+
+export interface LoginResponseData {
+ token: string;
+ refreshToken: string;
+ userId: string;
+}
+
+export interface AuthApiResponse {
+ data: {
+ data: LoginResponseData;
+ message?: string;
+ };
+}
+
+export type UserType = "client" | "worker";
+
+export interface BookAppointmentRequest {
+ scheduleTime: string;
+ category: string;
+ clientId: string;
+ /** The pro being booked. Optional on the backend; we can only send it once
+ workers come from the API — the browse list is still sample data whose
+ ids ("gw-chidi") aren't the backend's numeric SkilledWorker ids. */
+ skilledWorkerId?: number;
+ /** Agreed price, in naira. */
+ amount?: number;
+}
+
+/** Backend wraps most responses as ApiResponse { data, status }. */
+export interface ApiEnvelope {
+ data: T;
+ status: boolean;
+}
+
+/** Mirrors the backend's AppointmentStatus enum. */
+export type AppointmentStatus =
+ | "ACCEPTED"
+ | "DECLINED"
+ | "SCHEDULED"
+ | "CANCELLED"
+ | "UPDATED";
+
+/** The pro attached to an appointment. Null when the booking didn't record
+ one (skilledWorkerId is optional on the backend). */
+export interface AppointmentWorker {
+ id: number;
+ fullName: string;
+ category: string | null;
+}
+
+/** One appointment from viewAllAppointment, which returns a LIST of these.
+ The `id` is what cancel/update/delete take as ?appointmentId= — without it
+ appointment management was unreachable from the client. */
+export interface ViewAllAppointmentsResponse {
+ id: number;
+ status: AppointmentStatus;
+ category: string;
+ /** LocalDateTime, no zone — e.g. "2026-07-20T10:30:00". */
+ scheduleTime: string;
+ amount: number | null;
+ worker: AppointmentWorker | null;
+}
+
+export interface BookAppointmentResponse {
+ status: boolean;
+ data: {
+ message?: string;
+ scheduleTime?: string;
+ status?: string;
+ error?: string;
+ };
+}
+
+/** PUT body for updateAppointment; the id travels in the `appointmentId`
+ query param, not the body. */
+export interface UpdateAppointmentRequest {
+ status: AppointmentStatus;
+ clientId?: string;
+ amount?: number;
+ startTime?: string;
+}
+
+export interface ApiErrorResponse {
+ response?: {
+ data?: {
+ message?: string;
+ };
+ };
+ message?: string;
+}
+
+export function getErrorMessage(error: unknown, fallback: string): string {
+ const apiError = error as ApiErrorResponse;
+ return apiError.response?.data?.message ?? apiError.message ?? fallback;
+}
diff --git a/src/lib/wallet.ts b/src/lib/wallet.ts
new file mode 100644
index 0000000..7cdaf23
--- /dev/null
+++ b/src/lib/wallet.ts
@@ -0,0 +1,85 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import {
+ isConnected as freighterIsConnected,
+ getAddress as freighterGetAddress,
+ requestAccess as freighterRequestAccess,
+ getNetwork as freighterGetNetwork,
+} from "@stellar/freighter-api";
+
+const SESSION_KEY = "gw_wallet_connected";
+
+export function truncateAddress(address: string) {
+ return `${address.slice(0, 4)}...${address.slice(-4)}`;
+}
+
+interface WalletState {
+ address: string | null;
+ network: string | null;
+ connecting: boolean;
+ error: string | null;
+ freighterMissing: boolean;
+}
+
+export function useWallet() {
+ const [state, setState] = useState({
+ address: null,
+ network: null,
+ connecting: false,
+ error: null,
+ freighterMissing: false,
+ });
+
+ useEffect(() => {
+ if (localStorage.getItem(SESSION_KEY) !== "true") return;
+
+ freighterIsConnected().then(({ isConnected, error }) => {
+ if (error || !isConnected) return;
+ freighterGetAddress().then(({ address, error: addrError }) => {
+ if (addrError || !address) return;
+ setState((s) => ({ ...s, address }));
+ freighterGetNetwork().then(({ network }) => {
+ setState((s) => ({ ...s, network: network ?? null }));
+ });
+ });
+ });
+ }, []);
+
+ const connect = useCallback(async () => {
+ setState((s) => ({ ...s, connecting: true, error: null, freighterMissing: false }));
+
+ const { isConnected } = await freighterIsConnected();
+ if (!isConnected) {
+ setState((s) => ({ ...s, connecting: false, freighterMissing: true }));
+ return;
+ }
+
+ const { address, error } = await freighterRequestAccess();
+ if (error || !address) {
+ setState((s) => ({
+ ...s,
+ connecting: false,
+ error: error ? String(error) : "Connection was declined.",
+ }));
+ return;
+ }
+
+ const { network } = await freighterGetNetwork();
+ localStorage.setItem(SESSION_KEY, "true");
+ setState({
+ address,
+ network: network ?? null,
+ connecting: false,
+ error: null,
+ freighterMissing: false,
+ });
+ }, []);
+
+ const disconnect = useCallback(() => {
+ localStorage.removeItem(SESSION_KEY);
+ setState({ address: null, network: null, connecting: false, error: null, freighterMissing: false });
+ }, []);
+
+ return { ...state, connect, disconnect };
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..cf9c65d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ ".next/dev/types/**/*.ts",
+ "**/*.mts"
+ ],
+ "exclude": ["node_modules"]
+}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..50a6d0c
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+ test: {
+ environment: "jsdom",
+ include: ["src/**/*.test.ts"],
+ globals: false,
+ },
+});
\ No newline at end of file
-