Get started by adding new routes to
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
new file mode 100644
index 00000000..4b045c5d
--- /dev/null
+++ b/frontend/src/app/login/page.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { Tabs, Tab } from "@nextui-org/react";
+import CitizenLogin from "@/components/Login/CitizenLogin";
+import MunicipalityLogin from "@/components/Login/MunicipalityLogin";
+import ServiceProviderLogin from "@/components/Login/ServiceProviderLogin";
+
+
+export default function Signup() {
+ const formHeader: string = "Sign In.";
+
+ return (
+
+
+
+
+ {formHeader}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/app/signup/page.tsx b/frontend/src/app/signup/page.tsx
new file mode 100644
index 00000000..0a50ec28
--- /dev/null
+++ b/frontend/src/app/signup/page.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import React, { Key, useState } from "react";
+import { Tabs, Tab } from "@nextui-org/react";
+
+import CitizenSignup from "@/components/Signup/CitizenSignup";
+import MunicipalitySignup from "@/components/Signup/MunicipalitySignup";
+import ServiceProviderSignup from "@/components/Signup/ServiceProviderSignup";
+
+
+
+export default function Signup() {
+ const headers: string[] = ["Get Connected.", "Take Control.", "Be The Change."];
+ const [currentFormHeader, setCurrentFormHeader] = useState(headers[0]);
+
+
+ const handleTabChange = (key: Key) => {
+ const index = Number(key);
+ setCurrentFormHeader(headers[index]);
+ };
+
+
+ return (
+
+
+
+
+ {currentFormHeader}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/Login/CitizenLogin.tsx b/frontend/src/components/Login/CitizenLogin.tsx
new file mode 100644
index 00000000..0e4f5253
--- /dev/null
+++ b/frontend/src/components/Login/CitizenLogin.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Input, Button } from '@nextui-org/react';
+import Link from 'next/link';
+
+
+export default function CitizenLogin() {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ // Handle the submit action here
+ console.log(`User Type: Citizen, Email: ${email}, Password: ${password}`);
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/components/Login/MunicipalityLogin.tsx b/frontend/src/components/Login/MunicipalityLogin.tsx
new file mode 100644
index 00000000..b9f7dea5
--- /dev/null
+++ b/frontend/src/components/Login/MunicipalityLogin.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Input, Button, Autocomplete, AutocompleteItem } from '@nextui-org/react';
+import { Building2, CircleHelp } from 'lucide-react';
+
+export default function MunicipalityLogin() {
+ const [municipality, setMunicipality] = useState('');
+ const [password, setPassword] = useState('');
+
+
+ type Municipality = {
+ id: number | string;
+ name: string;
+ };
+
+
+ const municipalities: Municipality[] = [
+ { id: 0, name: "City of Ekurhuleni" },
+ { id: 1, name: "City of Johannesburg" },
+ { id: 2, name: "City of Tshwane" },
+ ];
+
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ // console.log(`Province: ${province}, Municipality: ${municipality}, Verification Code: ${verificationCode}`);
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/Login/ServiceProviderLogin.tsx b/frontend/src/components/Login/ServiceProviderLogin.tsx
new file mode 100644
index 00000000..0ff6aef3
--- /dev/null
+++ b/frontend/src/components/Login/ServiceProviderLogin.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Input, Button, Autocomplete, AutocompleteItem } from '@nextui-org/react';
+import Link from 'next/link';
+import { CircleHelp } from 'lucide-react';
+
+
+export default function ServiceProviderLogin() {
+ // const [email, setEmail] = useState('');
+ const [company, setCompany] = useState('');
+ const [password, setPassword] = useState('');
+
+ type Company = {
+ id: number | string;
+ name: string;
+ };
+
+
+ const companies: Company[] = [
+ { id: 0, name: "Bob's Electronics" },
+ { id: 1, name: "West Coast Saviours" },
+ { id: 2, name: "Aubrey's Angels" },
+ ];
+
+
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ // Handle the submit action here
+ // console.log(`User Type: Organization, Email: ${email}, Password: ${password}`);
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/Signup/CitizenSignup.tsx b/frontend/src/components/Signup/CitizenSignup.tsx
new file mode 100644
index 00000000..fa4c81fa
--- /dev/null
+++ b/frontend/src/components/Signup/CitizenSignup.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Input, Button } from '@nextui-org/react';
+
+
+export default function CitizenSignup() {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ // Handle the submit action here
+ console.log(`User Type: Citizen, Email: ${email}, Password: ${password}`);
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/components/Signup/MunicipalitySignup.tsx b/frontend/src/components/Signup/MunicipalitySignup.tsx
new file mode 100644
index 00000000..3601dcb7
--- /dev/null
+++ b/frontend/src/components/Signup/MunicipalitySignup.tsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { Input, Button, Autocomplete, AutocompleteItem } from '@nextui-org/react';
+import { Building2 } from 'lucide-react';
+
+export default function MunicipalitySignup() {
+ const [province, setProvince] = useState('Gauteng');
+ const [municipality, setMunicipality] = useState('');
+ const [email, setEmail] = useState('');
+ // const [verificationCode, setVerificationCode] = useState('123456');
+ // const [showCode, setShowCode] = useState(false);
+
+ type Province = {
+ id: number | string;
+ name: string;
+ };
+
+ type Municipality = {
+ id: number | string;
+ name: string;
+ };
+
+
+ const provinces: Province[] = [
+ { id: 0, name: "Gauteng" },
+ { id: 1, name: "KwaZulu-Natal" },
+ { id: 2, name: "Western Cape" },
+ { id: 3, name: "Eastern Cape" },
+ { id: 4, name: "Limpopo" },
+ { id: 5, name: "Mpumalanga" },
+ { id: 6, name: "Northen Cape" },
+ { id: 7, name: "North West" },
+ { id: 8, name: "Free State" }
+ ];
+
+ const municipalities: Municipality[] = [
+ { id: 0, name: "City of Ekurhuleni" },
+ { id: 1, name: "City of Johannesburg" },
+ { id: 2, name: "City of Tshwane" },
+ ];
+
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ // console.log(`Province: ${province}, Municipality: ${municipality}, Verification Code: ${verificationCode}`);
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/Signup/ServiceProviderSignup.tsx b/frontend/src/components/Signup/ServiceProviderSignup.tsx
new file mode 100644
index 00000000..7ff90899
--- /dev/null
+++ b/frontend/src/components/Signup/ServiceProviderSignup.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Input, Button, Autocomplete, AutocompleteItem } from '@nextui-org/react';
+import { Upload } from 'lucide-react';
+
+
+export default function ServiceProviderSignup() {
+ const [email, setEmail] = useState('');
+ const [serviceArea, setServiceArea] = useState('');
+
+
+
+ type ServiceArea = {
+ id: number | string;
+ name: string;
+ };
+
+
+ const serviceAreas: ServiceArea[] = [
+ { id: 0, name: "Plumbing" },
+ { id: 1, name: "Cleaning" },
+ { id: 2, name: "Pest Control" },
+ { id: 3, name: "Landscaping" },
+ { id: 4, name: "Electrical Services" }
+ ];
+
+
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ // Handle the submit action here
+ // console.log(`User Type: Organization, Email: ${email}, Password: ${password}`);
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 587bed14..c335abe5 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -19,7 +19,7 @@
],
"baseUrl": "./",
"paths": {
- "@/*": ["./src/*"],
+ "@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],