65 | This is your dashboard where you can manage your tasks. 66 |
67 | 68 | {/* Dashboard Stats */} 69 | {children} 70 |Dear ${userData.username},
53 |Congratulations! Your KYC verification has been successfully approved.
54 |You now have full access to our platform.
55 |Thank you for choosing ${process.env.APP_NAME}!
56 | `; 57 | } else if (data.kyc_status === "Rejected") { 58 | subject = "❌ KYC Rejected - Action Required"; 59 | message = ` 60 |Dear ${userData.username},
61 |Unfortunately, your KYC verification was rejected. Please check your submitted details and try again.
62 |For further assistance, contact our support team.
63 | `; 64 | } 65 | 66 | // Send Email If KYC is Approved or Rejected 67 | if (subject && message) { 68 | await resend.emails.send({ 69 | from: `${process.env.APP_NAME} <${process.env.APP_EMAIL}>`, 70 | to: userData.email, 71 | subject, 72 | html: ` 73 |
74 | ${message}
75 |
78 | `,
79 | });
80 | }
81 | // delete video using [video_path]
82 | const { error: videoError } = await supabase
83 | .storage
84 | .from("videos")
85 | .remove([data.video]);
86 | if (videoError) {
87 | console.error("Error deleting video from bucket:", videoError);
88 | alert("Failed to delete the video from the storage bucket.");
89 | return;
90 | }
91 |
92 | revalidatePath("/admin/kyc", "page"); // Ensure cache refresh
93 | return { success: true };
94 | }
95 |
--------------------------------------------------------------------------------
/src/actions/auth/login.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { createClient } from '@/utils/supabase/server';
4 | import { redirect } from 'next/navigation';
5 | import { z } from "zod";
6 |
7 | interface FormData {
8 | get: (key: string) => string | null;
9 | }
10 |
11 | interface LoginState {
12 | errors: RecordBest Regards,
76 |The ${process.env.APP_NAME} Team
77 |
6 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/(admin)/admin/dashboard/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function admin() {
4 | return (
5 | admin
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/(admin)/admin/kyc/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import KycTable from './tabel'
3 |
4 | export default function Kyc() {
5 | return (
6 |
7 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/(admin)/admin/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { AppSidebar } from '@/components/app-sidebar'
3 | import { SheetAdmin } from '@/components/sheetAdmin'
4 |
5 | export default function layout({children}:{children:React.ReactNode}) {
6 | return (
7 |
8 |
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/(admin)/admin/page.tsx:
--------------------------------------------------------------------------------
1 | import AdminDashboard from '@/components/adminDashboard'
2 | import AdminMenu from '@/components/app-sidebar'
3 | import React from 'react'
4 |
5 | export default function Dashboard() {
6 | return (
7 |
8 |
9 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/(admin)/admin/settings/GeneralSetting.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Input } from "@/components/ui/input";
4 | import { Button } from "@/components/ui/button";
5 | import { Card, CardContent, CardHeader } from "@/components/ui/card";
6 | import { Plus, Trash } from "lucide-react";
7 | import SiteLogoModel from "@/components/siteLogoModel";
8 | import Image from "next/image";
9 | import AddMenu from "@/actions/auth/addMenu";
10 | import AddCat from "@/actions/auth/addCat";
11 | import { useActionState } from "react";
12 | import MenuTabel from "@/components/MenuTabel";
13 | import CatTabel from "@/app/(admin)/admin/category/CatTabel";
14 | export default function SettingsPage({ userDetails, siteInfo }) {
15 | const [state, action, isPending] = useActionState(AddMenu, undefined);
16 | const[state1, action1, isPending1] = useActionState(AddCat, undefined);
17 |
18 | return (
19 |
20 |
21 | Site Logo
22 |
23 |
34 |
35 |
36 |
37 | Menus
38 |
39 |
60 |
61 |
62 |
63 | Add Category
64 |
65 |
79 |
80 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/src/app/(admin)/admin/settings/page.tsx:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import React from "react";
4 | import GeneralSetting from "./GeneralSetting";
5 | import { createClient } from "@/utils/supabase/server";
6 |
7 | export default async function Settings() {
8 |
9 |
10 |
11 |
12 | const supabase =await createClient(); // No need for await here
13 |
14 | // Fetch user details
15 | const { data: userDetails, error: userError } = await supabase.auth.getUser();
16 |
17 | if (userError || !userDetails?.user) {
18 | console.error("Error fetching user:", userError);
19 | return
24 |
33 |
40 |
55 |
56 |
57 |
59 |
66 |
76 |
77 | Error loading user details
;
20 | }
21 |
22 | // Fetch site information if user exists
23 | const { data: siteInfo, error: siteError } = await supabase
24 | .from("site_info")
25 | .select("*")
26 | .single();
27 |
28 | if (siteError) {
29 | console.error("Error fetching site info:", siteError);
30 | }
31 |
32 | return (
33 |
34 |
35 |
36 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/(admin)/admin/users/deleteButton.tsx:
--------------------------------------------------------------------------------
1 | import { createClient } from "@/utils/supabase/client"; // Adjust import based on your project structure
2 |
3 | // Initialize the Supabase client
4 | const supabase = createClient();
5 |
6 | const DeleteButton = ({ productId, imagePath }: { productId: string; imagePath: string }) => {
7 | const handleDelete = async () => {
8 | try {
9 | // Delete the product from the "products" table by productId
10 | const { error: deleteError } = await supabase
11 | .from("products")
12 | .delete()
13 | .eq("user_id", productId);
14 | if (deleteError) {
15 | console.error("Error deleting product:", deleteError);
16 | alert("Failed to delete the product from the database.");
17 | return;
18 | }
19 |
20 | // Delete the image from the Supabase bucket
21 | const { error: storageError } = await supabase
22 | .storage
23 | .from("products_image")
24 | .remove([imagePath.replace(/.*\/public\//, "")]);
25 | if (storageError) {
26 | console.error("Error deleting image from bucket:", storageError);
27 | alert("Failed to delete the image from the storage bucket.");
28 | return;
29 | }
30 |
31 | console.log("Product and associated image deleted successfully!");
32 | alert("Product and associated image deleted successfully!");
33 | // Refresh page automatically
34 | window.location.reload();
35 |
36 | } catch (err) {
37 | console.error("Error during deletion process:", err);
38 | alert("An unexpected error occurred while deleting.");
39 | }
40 | };
41 |
42 | return (
43 |
46 | );
47 | };
48 |
49 | export default DeleteButton;
50 |
--------------------------------------------------------------------------------
/src/app/(admin)/admin/users/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState, useEffect } from "react";
4 | import Userdashboard from "@/components/userdashboard";
5 | import Topbar from "@/components/topbar";
6 | import Link from "next/link";
7 | import TableComponent from "@/app/(admin)/admin/users/tabel";
8 |
9 | export default function UserList() {
10 |
11 | return (
12 |
13 |
14 |
15 | {/* Main Content Area */}
16 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/(agent)/agent/aside.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from 'react';
3 | import React from "react";
4 | import { X } from "lucide-react"; // Ensure you have lucide-react installed
5 |
6 | interface Agent {
7 | name: string;
8 | agentId: string;
9 | }
10 |
11 | interface AsideProps {
12 | isSidebarOpen: boolean;
13 | setIsSidebarOpen: (open: boolean) => void;
14 | agent: Agent;
15 | }
16 | const [isSidebarOpen, setIsSidebarOpen] = useState(false);
17 | export default function Aside({ isSidebarOpen, setIsSidebarOpen, agent }: AsideProps) {
18 | return (
19 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/app/(agent)/agent/dashboard/layout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from "react";
3 | import { Menu, User, X } from "lucide-react";
4 | import { UserProvider } from "./useContext";
5 |
6 | export default function Layout({ children }: { children: React.ReactNode }) {
7 | const [agent, setAgent] = React.useState(null);
8 | const [isSidebarOpen, setIsSidebarOpen] = React.useState(false); // Added missing state
9 |
10 | return (
11 |
17 | {/* Topbar */}
18 |
19 |
20 |
22 |
13 | {/* Sidebar */}
14 |
54 |
55 | {/* Main Content */}
56 |
57 |
63 |
64 |
71 |
72 |
16 | {children}
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/(agent)/agent/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import React from 'react';
3 | import { FaUserAlt, FaStore, FaSignInAlt } from 'react-icons/fa'; // Importing icons
4 |
5 | export default function AgentPage() {
6 | return (
7 |
8 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/(agent)/agent/register/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Metadata } from 'next'
3 |
4 |
5 | export const metadata: Metadata = {
6 | title: `${process.env.APP_NAME} - Open Account`,
7 | description: `${process.env.APP_DESCRIPTION}`,
8 | }
9 |
10 | export default function layout({ children }) {
11 | return (
12 |
9 | {/* Register Agent Section */}
10 |
54 |
11 |
12 |
14 |
23 |
24 | {/* Register Vendor Section */}
25 |
12 |
14 | Join our platform and start offering your services today.
15 | 16 | 17 | 20 | 21 | 22 |
26 |
27 |
29 |
38 |
39 | {/* Login Section */}
40 |
27 |
29 | Start selling your products on our platform today.
30 | 31 | 32 | 35 | 36 | 37 |
41 |
42 |
44 |
53 |
42 |
44 | Access your dashboard and manage your services efficiently.
45 | 46 | 47 | 50 | 51 | 52 |
13 |
14 | {children}
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/(auth)/forgot/layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react'
2 | import { Metadata } from 'next'
3 |
4 | export const metadata: Metadata = {
5 | title: `${process.env.APP_NAME} - Login`,
6 | description: `${process.env.APP_DESCRIPTION}`,
7 | }
8 |
9 | interface LayoutProps {
10 | children: ReactNode;
11 | }
12 |
13 | export default function Layout({ children }: LayoutProps) {
14 | return (
15 |
16 | {children}
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/(auth)/login/layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react'
2 | import { Metadata } from 'next'
3 |
4 | export const metadata: Metadata = {
5 | title: `${process.env.APP_NAME} - Login`,
6 | description: `${process.env.APP_DESCRIPTION}`,
7 | }
8 |
9 | interface LayoutProps {
10 | children: ReactNode;
11 | }
12 |
13 | export default function Layout({ children }: LayoutProps) {
14 | return (
15 |
16 | {children}
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/(auth)/register/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Metadata } from 'next'
3 |
4 |
5 | export const metadata: Metadata = {
6 | title: `${process.env.APP_NAME} - Open Account`,
7 | description: `${process.env.APP_DESCRIPTION}`,
8 | }
9 |
10 | export default function layout({ children }) {
11 | return (
12 |
13 |
14 | {children}
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/(auth)/register/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useActionState, useEffect } from "react";
4 | import register from "@/actions/auth/register";
5 | import { Button } from "@/components/ui/button";
6 | import Link from "next/link";
7 | import { Input } from "@/components/ui/input";
8 | import { AiOutlineArrowLeft } from "react-icons/ai";
9 | import SelectedState from "@/components/selectedState";
10 | import MultiSelect from "@/components/MultiSelectCombobox";
11 |
12 | export default function Register() {
13 | const initialState = {
14 | errors: undefined,
15 | isSubmitting: false,
16 | isValid: false,
17 | successMessage: undefined,
18 | };
19 |
20 | const [prev, action, isPending] = useActionState(register, initialState);
21 |
22 | useEffect(() => {
23 | if (prev?.successMessage) {
24 | setTimeout(() => {
25 | window.location.href = "/dashboard";
26 | }, 3000);
27 | }
28 | }, [prev?.successMessage]);
29 |
30 | return (
31 |
32 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/app/(auth)/updateReset/layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react'
2 | import { Metadata } from 'next'
3 |
4 | export const metadata: Metadata = {
5 | title: `${process.env.APP_NAME} - Login`,
6 | description: `${process.env.APP_DESCRIPTION}`,
7 | }
8 |
9 | interface LayoutProps {
10 | children: ReactNode;
11 | }
12 |
13 | export default function Layout({ children }: LayoutProps) {
14 | return (
15 |
33 |
75 |
34 |
35 |
39 | Join as a Handyman
38 |40 | Sign up as a skilled professional to connect with clients and offer handyman services. 41 |
42 | {prev?.successMessage && ( 43 |
44 | {prev.successMessage}
45 |
46 | )}
47 |
48 |
74 |
16 | {children}
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/(users)/dashboard/addproduct/page.tsx:
--------------------------------------------------------------------------------
1 | "use server";
2 | import React from 'react';
3 | import Topbar from '@/components/topbar';
4 | import ProductForm from '@/components/ProductForm';
5 | import addProduct from '@/actions/auth/productsAdd';
6 | import { createClient } from "@/utils/supabase/server";
7 |
8 | export default async function Product() {
9 | const supabase = await createClient();
10 |
11 | // Get authenticated user
12 | const { data: { user }, error: userError } = await supabase.auth.getUser();
13 | if (userError || !user) {
14 | console.error("Error fetching user:", userError);
15 | return Error fetching user data.
;
16 | }
17 |
18 | // Fetch total product uploads
19 | const { count: totalUploads = 0, error: totalUploadsError } = await supabase
20 | .from("products")
21 | .select("*", { count: "exact" })
22 | .eq("id", user.id);
23 |
24 | if (totalUploadsError) {
25 | console.error("Error fetching total uploads:", totalUploadsError);
26 | return Error fetching total uploads.
;
27 | }
28 |
29 | // Fetch user profile
30 | const { data: profile, error: profileError } = await supabase
31 | .from("user_profile")
32 | .select("*")
33 | .eq("id", user.id)
34 | .single();
35 |
36 | if (profileError || !profile || !profile.plan) {
37 | console.error("Error fetching profile or plan:", profileError, profile);
38 | return Error fetching profile data or plan is missing.
;
39 | }
40 |
41 |
42 | const maxUploads = profile.plan; // Fallback to 0 if plan is invalid
43 | const canUpload = totalUploads < maxUploads;
44 |
45 | console.log({
46 | userId: user.id,
47 | plan: profile.plan,
48 | totalUploads,
49 | maxUploads,
50 | canUpload
51 | });
52 |
53 | return (
54 |
55 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/app/(users)/dashboard/edit-profile/page.jsx:
--------------------------------------------------------------------------------
1 | import Userdashboard from "@/components/userdashboard";
2 | import Topbar from "@/components/topbar";
3 | import profileUpdate from "@/actions/auth/profileUpdate";
4 | import EditProfile from "@/components/editProfile";
5 | import { createClient } from "@/utils/supabase/server";
6 | import { redirect } from "next/navigation";
7 | import { Edit, FastForwardIcon } from "lucide-react";
8 | import { FaUserAltSlash } from "react-icons/fa";
9 |
10 | export default async function Profile() {
11 | // Create Supabase client
12 | const supabase = await createClient();
13 |
14 | // Authenticate the user
15 | const {
16 | data: { user },
17 | } = await supabase.auth.getUser();
18 |
19 | if (!user) {
20 | redirect("/login");
21 | return null; // Early return to avoid further execution
22 | }
23 |
24 | // Fetch the user's profile
25 | const { data: profile, error } = await supabase
26 | .from("user_profile")
27 | .select("*")
28 | .eq("id", user.id)
29 | .single();
30 |
31 | if (error) {
32 | console.error("Error fetching profile:", error);
33 | return
56 |
57 |
58 | {/* Debugging logs */}
59 |
77 |
60 | Total Uploads: {totalUploads}| Max Uploads: {maxUploads === Infinity ? "Unlimited" : maxUploads}
61 |
62 |
63 | {maxUploads === Infinity || canUpload ? (
64 |
65 | {maxUploads === Infinity
66 | ? "You have unlimited product uploads."
67 | : `You can upload ${maxUploads - totalUploads} more products.`}
68 |
69 | ) : (
70 |
71 | You have reached the maximum number of product uploads. Please upgrade your plan to add more products.
72 |
73 | )}
74 |
75 | Error loading profile. Please try again later.
;
34 | }
35 |
36 | // Convert profile to JSON
37 | const profileJson = JSON.parse(JSON.stringify(profile));
38 |
39 | return (
40 |
41 | {/* Main Content Area */}
42 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/(users)/dashboard/kyc-success/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { useRouter } from "next/navigation";
5 |
6 | export default function KYCSuccess() {
7 | const router = useRouter();
8 |
9 | return (
10 |
43 | {/* Dashboard & Topbar */}
44 |
54 |
45 |
48 |
49 |
50 | {/* Profile Form */}
51 |
53 |
11 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/(users)/dashboard/kyc/page.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from "next/navigation";
2 | import { createClient } from "@/utils/supabase/server";
3 | import UserDashboard from "@/components/userdashboard";
4 | import KycStatus from "@/components/kyc";
5 | import handleKYCSubmission from "@/actions/auth/kyc";
6 | import TopBar from "@/components/topbar";
7 | export default async function KycPage() {
8 |
9 | const supabase = await createClient();
10 | const { data: { user } } = await supabase.auth.getUser();
11 |
12 | if (!user) {
13 | redirect("/");
14 | }
15 |
16 | const { data: profile, error } = await supabase
17 | .from("user_profile")
18 | .select("*")
19 | .eq("user_id", user.id)
20 | .single();
21 |
22 | if (error) {
23 | console.error("Error fetching profile:", error);
24 | return null;
25 | }
26 |
27 |
28 |
29 | return (
30 |
12 |
23 | KYC Submission Successful!
13 |14 | Your KYC information has been submitted successfully. We will review your details and get back to you within 24-48 hours. 15 |
16 | 22 |
31 |
32 |
33 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/app/(users)/dashboard/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { createClient } from "@/utils/supabase/server";
3 | import { redirect } from "next/navigation";
4 |
5 | import ClientLayout from "@/components/ClientLayout";
6 | import TopBar from "@/components/topbar";
7 | import { UserProvider } from "@/context/userContext";
8 |
9 | export default async function Layout({ children }: { children: React.ReactNode }) {
10 |
11 | return (
12 |
17 | {/* Show error message if KYC status is "Pending" */}
18 | {profile?.kyc_status === "Pending" && (
19 |
20 | Your KYC verification is pending. Please complete the verification to access all features.
21 |
22 | )}
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/(users)/dashboard/productlist/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState, useEffect } from "react";
4 | import Userdashboard from "@/components/userdashboard";
5 | import Topbar from "@/components/topbar";
6 | import Link from "next/link";
7 |
8 | import Table from "@/components/tableList";
9 |
10 | export default function ProductList() {
11 |
12 | return (
13 |
14 |
15 |
16 | {/* Main Content Area */}
17 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/(users)/dashboard/profile/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Userdashboard from "@/components/userdashboard";
3 | import Topbar from "@/components/topbar";
4 | import profileUpdate from "@/actions/auth/profileUpdate";
5 | import ProfileForm from "@/components/ProfileForm";
6 | import { redirect } from "next/navigation";
7 | import { FastForwardIcon } from "lucide-react";
8 | import { FaUserAltSlash } from "react-icons/fa";
9 | import { useUser } from "@/context/userContext";
10 |
11 | export default function Profile() {
12 |
13 | const profileJson = useUser();
14 |
15 | return (
16 |
18 | {/* Topbar */}
19 |
20 |
23 |
24 |
17 | {/* Main Content Area */}
18 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/(users)/dashboard/success/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useState } from "react";
4 | import { CheckCircleIcon } from "lucide-react";
5 | import { Button } from "@/components/ui/button";
6 | import { createClient } from "@/utils/supabase/client";
7 | import Link from "next/link";
8 |
9 | export default function PaymentSuccess() {
10 | const [loading, setLoading] = useState(true);
11 | const [error, setError] = useState(null);
12 | const [profile, setProfile] = useState(null);
13 |
14 | useEffect(() => {
15 | const fetchUserData = async () => {
16 | const supabase = createClient();
17 | const { data: { user }, error: userError } = await supabase.auth.getUser();
18 |
19 | if (userError || !user) {
20 | setError("Failed to fetch user.");
21 | setLoading(false);
22 | return;
23 | }
24 |
25 | const { data: profileData, error: profileError } = await supabase
26 | .from("user_profile")
27 | .select("*")
28 | .eq("id", user.id)
29 | .single();
30 |
31 | if (profileError) {
32 | setError("Failed to fetch profile.");
33 | setLoading(false);
34 | return;
35 | }
36 |
37 | const upgradedPlan = profileData?.plan * 2;
38 |
39 | const { error: updateError } = await supabase
40 | .from("user_profile")
41 | .update({ subscription_plan: "Standard", plan: upgradedPlan })
42 | .eq("id", user.id);
43 |
44 | if (updateError) {
45 | setError("Failed to update plan.");
46 | } else {
47 | setProfile({ ...profileData, plan: upgradedPlan });
48 | }
49 |
50 | setLoading(false);
51 | };
52 |
53 | fetchUserData();
54 | }, []);
55 |
56 | if (loading) {
57 | return
19 | {/* Dashboard & Topbar */}
20 |
30 |
21 |
24 |
25 |
26 | {/* Profile Form */}
27 |
29 | Loading...
;
58 | }
59 |
60 | if (error) {
61 | return {error}
;
62 | }
63 |
64 | return (
65 |
66 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/src/app/api/payment.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | export default async function handler(req, res) {
4 | // Only allow POST requests
5 | if (req.method !== 'POST') {
6 | return res.status(405).json({ error: 'Method not allowed' });
7 | }
8 |
9 | try {
10 | // Generate a unique transaction reference
11 | const txRef = `T-${Date.now()}`;
12 |
13 | // Prepare the payment payload
14 | const paymentData = {
15 | tx_ref: txRef, // Unique reference per transaction
16 | amount: 7500, // Numeric amount for the payment
17 | currency: 'NGN',
18 | redirect_url: 'https://example_company.com/success', // Redirect after payment
19 | customer: {
20 | email: 'developers@flutterwavego.com', // Replace with customer email
21 | name: 'Flutterwave Developers', // Replace with customer name
22 | phonenumber: '09012345678', // Replace with customer phone number
23 | },
24 | customizations: {
25 | title: 'Flutterwave Standard Payment',
26 | },
27 | };
28 |
29 | // Set the request headers
30 | const headers = {
31 | Authorization: `Bearer ${process.env.FLW_SECRET_KEY}`, // Ensure your secret key is set in env
32 | 'Content-Type': 'application/json',
33 | };
34 |
35 | // Send the POST request to Flutterwave API
36 | const response = await axios.post(
37 | 'https://api.flutterwave.com/v3/payments',
38 | paymentData,
39 | { headers }
40 | );
41 |
42 | // Check if the request was successful
43 | if (response.status === 200 && response.data.status === 'success') {
44 | return res.status(200).json({ status: 'success', data: response.data });
45 | } else {
46 | return res.status(400).json({
47 | status: 'failure',
48 | message: response.data.message || 'Payment failed',
49 | });
50 | }
51 | } catch (error) {
52 | // Log error details for debugging
53 | console.error('Error with payment API:', error.response?.data || error.message);
54 | return res.status(500).json({ error: 'Payment request failed' });
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/auth/confirm/route.ts:
--------------------------------------------------------------------------------
1 | import { type EmailOtpType } from '@supabase/supabase-js'
2 | import { type NextRequest, NextResponse } from 'next/server'
3 |
4 | import { createClient } from '@/utils/supabase/server'
5 |
6 | // Creating a handler to a GET request to route /auth/confirm
7 | export async function GET(request: NextRequest) {
8 | const { searchParams } = new URL(request.url)
9 | const token_hash = searchParams.get('token_hash')
10 | const type = searchParams.get('type') as EmailOtpType | null
11 | const next = '/account'
12 |
13 | // Create redirect link without the secret token
14 | const redirectTo = request.nextUrl.clone()
15 | redirectTo.pathname = next
16 | redirectTo.searchParams.delete('token_hash')
17 | redirectTo.searchParams.delete('type')
18 |
19 | if (token_hash && type) {
20 | const supabase = await createClient()
21 |
22 | const { error } = await supabase.auth.verifyOtp({
23 | type,
24 | token_hash,
25 | })
26 | if (!error) {
27 | redirectTo.searchParams.delete('next')
28 | return NextResponse.redirect(redirectTo)
29 | }
30 | }
31 |
32 | // return the user to an error page with some instructions
33 | redirectTo.pathname = '/error'
34 | return NextResponse.redirect(redirectTo)
35 | }
--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pchukwuemeka424/backup/c2271a6f46ffad5814017a49553d7be1365aacf2/src/app/favicon.ico
--------------------------------------------------------------------------------
/src/app/filter/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Topnav from '@/components/topnav';
3 | import { Metadata } from 'next';
4 |
5 | export const metadata: Metadata = {
6 | title: `${process.env.APP_NAME}`,
7 | description: `${process.env.APP_DESCRIPTION}`,
8 | }
9 | export default function Layout({ children }) {
10 | return (
11 |
67 |
80 | Payment Successful!
69 |70 | Your upgrade has been successfully processed. You now have access to all premium features. 71 |
72 |
73 |
74 |
77 |
78 |
79 |
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/filter/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import CategoryList from '@/components/category';
5 | import SearchProduct from './filterFetch';
6 |
7 | export default function Page() {
8 |
9 | return (
10 | {children}
14 |
11 |
12 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 0 0% 3.9%;
9 | --card: 0 0% 100%;
10 | --card-foreground: 0 0% 3.9%;
11 | --popover: 0 0% 100%;
12 | --popover-foreground: 0 0% 3.9%;
13 | --primary: 0 0% 9%;
14 | --primary-foreground: 0 0% 98%;
15 | --secondary: 0 0% 96.1%;
16 | --secondary-foreground: 0 0% 9%;
17 | --muted: 0 0% 96.1%;
18 | --muted-foreground: 0 0% 45.1%;
19 | --accent: 0 0% 96.1%;
20 | --accent-foreground: 0 0% 9%;
21 | --destructive: 0 84.2% 60.2%;
22 | --destructive-foreground: 0 0% 98%;
23 | --border: 0 0% 89.8%;
24 | --input: 0 0% 89.8%;
25 | --ring: 0 0% 3.9%;
26 | --chart-1: 12 76% 61%;
27 | --chart-2: 173 58% 39%;
28 | --chart-3: 197 37% 24%;
29 | --chart-4: 43 74% 66%;
30 | --chart-5: 27 87% 67%;
31 | --radius: 0.5rem;
32 | --sidebar-background: 0 0% 98%;
33 | --sidebar-foreground: 240 5.3% 26.1%;
34 | --sidebar-primary: 240 5.9% 10%;
35 | --sidebar-primary-foreground: 0 0% 98%;
36 | --sidebar-accent: 240 4.8% 95.9%;
37 | --sidebar-accent-foreground: 240 5.9% 10%;
38 | --sidebar-border: 220 13% 91%;
39 | --sidebar-ring: 217.2 91.2% 59.8%;
40 | }
41 | .dark {
42 | --background: 0 0% 3.9%;
43 | --foreground: 0 0% 98%;
44 | --card: 0 0% 3.9%;
45 | --card-foreground: 0 0% 98%;
46 | --popover: 0 0% 3.9%;
47 | --popover-foreground: 0 0% 98%;
48 | --primary: 0 0% 98%;
49 | --primary-foreground: 0 0% 9%;
50 | --secondary: 0 0% 14.9%;
51 | --secondary-foreground: 0 0% 98%;
52 | --muted: 0 0% 14.9%;
53 | --muted-foreground: 0 0% 63.9%;
54 | --accent: 0 0% 14.9%;
55 | --accent-foreground: 0 0% 98%;
56 | --destructive: 0 62.8% 30.6%;
57 | --destructive-foreground: 0 0% 98%;
58 | --border: 0 0% 14.9%;
59 | --input: 0 0% 14.9%;
60 | --ring: 0 0% 83.1%;
61 | --chart-1: 220 70% 50%;
62 | --chart-2: 160 60% 45%;
63 | --chart-3: 30 80% 55%;
64 | --chart-4: 280 65% 60%;
65 | --chart-5: 340 75% 55%;
66 | --sidebar-background: 240 5.9% 10%;
67 | --sidebar-foreground: 240 4.8% 95.9%;
68 | --sidebar-primary: 224.3 76.3% 48%;
69 | --sidebar-primary-foreground: 0 0% 100%;
70 | --sidebar-accent: 240 3.7% 15.9%;
71 | --sidebar-accent-foreground: 240 4.8% 95.9%;
72 | --sidebar-border: 240 3.7% 15.9%;
73 | --sidebar-ring: 217.2 91.2% 59.8%;
74 | }
75 | }
76 |
77 | @layer base {
78 | * {
79 | @apply border-border;
80 | }
81 | body {
82 | @apply bg-background text-foreground;
83 | }
84 | }
85 |
86 |
87 |
88 | @layer base {
89 | * {
90 | @apply border-border outline-ring/50;
91 | }
92 | body {
93 | @apply bg-background text-foreground;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import "./globals.css";
3 | import TawkToScript from "@/components/TawkToScript"; // Import the Tawk.to script component
4 |
5 | export const metadata: Metadata = {
6 | title: `${process.env.APP_NAME}`,
7 | description: `${process.env.APP_DESCRIPTION}`,
8 | keywords: "Afrivendor, Nigeria vendor, afrivendor.ng, online marketplace, Nigeria businesses,wigs hair online vendors, Nigeria e-commerce, vendor platform, buy from Africa, shop Nigeria products, Nigeria goods, local Nigeria businesses, online vendors",
9 | author: "Acehub Technologies",
10 | viewport: "width=device-width, initial-scale=1.0",
11 | robots: "index, follow",
12 | openGraph: {
13 | title: `${process.env.APP_NAME}`,
14 | description: `${process.env.APP_DESCRIPTION}`,
15 | url: process.env.APP_URL || "default-url.com",
16 | images: [{ url: "https://sxkmrpzbtqpraucnmnjm.supabase.co/storage/v1/object/public/logos/White-and-Blue-Shopping-Cart-Logo-DesignEvo-Logo-Maker-02-14-2025_08_47_PM.png" }],
17 | },
18 | twitter: {
19 | card: "Afrivendor",
20 | title: `${process.env.APP_NAME}`,
21 | description: `${process.env.APP_DESCRIPTION}`,
22 | images: ["https://sxkmrpzbtqpraucnmnjm.supabase.co/storage/v1/object/public/logos/White-and-Blue-Shopping-Cart-Logo-DesignEvo-Logo-Maker-02-14-2025_08_47_PM.png"],
23 | },
24 | };
25 |
26 | export default function RootLayout({
27 | children,
28 | }: Readonly<{
29 | children: React.ReactNode;
30 | }>) {
31 | return (
32 |
33 |
34 | {/* Other meta tags can go here */}
35 |
36 |
37 | {children}
38 |
13 |
14 |
15 | {/* Product list */}
16 |
18 | not-found
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Navbar from "../components/navbar";
3 | import Hero from "../components/hero";
4 | import CatSlider from "../components/catSlider";
5 |
6 | import Midtab from "../components/midTab";
7 |
8 |
9 |
10 |
11 | export default function Home() {
12 | return (
13 |
14 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/products/[product]/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Topnav from '@/components/topnav';
3 | import { Metadata } from 'next';
4 |
5 | export const metadata: Metadata = {
6 | title: `${process.env.APP_NAME}`,
7 | description: `${process.env.APP_DESCRIPTION}`,
8 | }
9 |
10 | export default function Layout({ children }: { children: React.ReactNode }) {
11 | return (
12 |
13 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/products/[product]/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import CategoryList from '@/components/category';
5 | import FetchCat from './fetchCat';
6 | import Slider from '@/components/slider';
7 |
8 | export default function Page() {
9 | return (
10 | {children}
15 |
11 | {/* Full-width Slider */}
12 |
13 |
14 | {/* Responsive Grid */}
15 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/search/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Topnav from '@/components/topnav';
3 | import { Metadata } from 'next';
4 |
5 | export const metadata: Metadata = {
6 | title: `${process.env.APP_NAME}`,
7 | description: `${process.env.APP_DESCRIPTION}`,
8 | }
9 | export default function Layout({ children }) {
10 | return (
11 |
16 | {/* Sidebar for product categories */}
17 |
27 |
18 |
20 |
21 | {/* Product list */}
22 |
23 |
24 |
26 |
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/search/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import CategoryList from '@/components/category';
5 | import SearchProduct from './searchFetch';
6 |
7 | export default function Page() {
8 |
9 | return (
10 | {children}
14 |
11 |
12 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/sitemap.xml:
--------------------------------------------------------------------------------
1 |
13 | {/* Sidebar for product categories */}
14 |
15 |
20 | Error loading shop details.
;
37 | }
38 |
39 | return (
40 |
41 | {shopDetails && (
42 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/store/[store]/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 |
4 | export default function layout({ children }) {
5 | return (
6 |
7 |
43 |
46 | )}
47 |
8 |
10 |
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/store/[store]/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Shop from './shop';
3 | import { Metadata } from 'next';
4 | import { createClient } from '@/utils/supabase/client';
5 |
6 | export async function generateMetadata({ params }: { params: { store: string } }): Promise {children}
9 |
38 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/trades/[id]/loading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function loading() {
4 | return (
5 |
8 |
9 |
10 |
11 | {/* Skeleton for Product Details */}
12 |
13 |
14 |
15 |
16 |
17 |
29 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
12 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/trades/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Topnav from '@/components/topnav';
3 |
4 | import { Metadata } from 'next';
5 |
6 | export const metadata: Metadata = {
7 | title: process.env.APP_NAME || 'Default App Name',
8 | description: process.env.APP_DESCRIPTION || 'Default App Description',
9 | };
10 |
11 | export default function Layout({ children }: { children: React.ReactNode }) {
12 | return (
13 | <>
14 |
15 |
16 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/trades/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import CategoryList from '@/components/category';
5 | import ProductFetch from './productFetch';
6 | import Slider from '@/components/slider';
7 |
8 | export default function Page() {
9 | return (
10 | {children}
18 |
11 | {/* Full-width Slider */}
12 |
13 |
14 | {/* Responsive Grid */}
15 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/app/types/page.d.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pchukwuemeka424/backup/c2271a6f46ffad5814017a49553d7be1365aacf2/src/app/types/page.d.ts
--------------------------------------------------------------------------------
/src/app/unauthorized/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from 'react';
3 | import { Lock } from 'lucide-react'; // React Icon for a lock
4 |
5 | export default function Unauthorized() {
6 | return (
7 |
16 | {/* Sidebar for product categories */}
17 |
29 |
18 |
20 |
21 | {/* Product list */}
22 |
23 |
28 |
24 |
26 |
8 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/ClientNavbar.tsx:
--------------------------------------------------------------------------------
1 | 'use client'; // Add this at the very top
2 |
3 | import React from 'react';
4 | import Link from 'next/link';
5 | import { FaSignInAlt, FaUserPlus } from 'react-icons/fa';
6 | import { createClient } from '@/utils/supabase-db';
7 | import { useRouter } from 'next/navigation'; // For client-side navigation
8 |
9 | // Define the type for authUser
10 | type ClientNavbarProps = {
11 | authUser: { id: string | null } | null; // Ensure that authUser can be null
12 | };
13 |
14 | const ClientNavbar: React.FC
9 |
23 |
10 |
12 | Access Denied
13 |14 | You do not have permission to view this page. Please contact your administrator or go back to the previous page. 15 |
16 | 22 |
29 | {authUser ? (
30 |
58 | );
59 | };
60 |
61 | export default ClientNavbar;
62 |
--------------------------------------------------------------------------------
/src/components/MarketAutocomplete.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState, useEffect } from "react";
4 | import { createClient } from "@/utils/supabase/client";
5 |
6 | export default function MarketAutocomplete({ value, onChange }) {
7 | const supabase = createClient();
8 | const [markets, setMarkets] = useState("");
9 | const [suggestions, setSuggestions] = useState([]);
10 |
11 | useEffect(() => {
12 | const fetchMarkets = async () => {
13 | try {
14 | const { data, error } = await supabase.from("markettable").select("marketname");
15 | if (error) {
16 | console.error("Supabase Error:", error.message);
17 | } else if (data) {
18 | setMarkets(data.map((market) => market.marketname));
19 | }
20 | } catch (err) {
21 | console.error("Fetch Markets Error:", err);
22 | }
23 | };
24 |
25 | fetchMarkets();
26 | }, []);
27 |
28 | const handleInputChange = (e) => {
29 | const inputValue = e.target.value;
30 | onChange(inputValue);
31 |
32 | if (inputValue.length > 1) {
33 | setSuggestions(
34 | markets.filter((market) =>
35 | market.toLowerCase().includes(inputValue.toLowerCase())
36 | )
37 | );
38 | } else {
39 | setSuggestions([]);
40 | }
41 | };
42 |
43 | const handleSelect = (market) => {
44 | onChange(market);
45 | setSuggestions([]);
46 | };
47 |
48 | return (
49 |
31 | Dashboard
32 | Stores
33 | Products
34 |
37 |
38 | ) : (
39 |
40 |
41 |
44 |
45 |
46 |
49 |
50 |
51 |
54 |
55 |
56 | )}
57 |
50 |
51 |
59 | {suggestions.length > 0 && (
60 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/MultiSelectCombobox.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import dynamic from "next/dynamic";
3 | import { createClient } from "@/utils/supabase/client";
4 |
5 | // Dynamically import React Select with SSR disabled
6 | const Select = dynamic(() => import("react-select"), { ssr: false });
7 |
8 | function MultiSelectCombobox({profile}) {
9 | const supabase = createClient();
10 | const [options, setOptions] = useState([]);
11 | const [selectedOptions, setSelectedOptions] = useState([]);
12 |
13 | useEffect(() => {
14 | const fetchSkills = async () => {
15 | const { data, error } = await supabase.from("skills").select("*");
16 | if (error) {
17 | console.error("Error fetching skills:", error);
18 | return;
19 | }
20 | if (data) {
21 | setOptions(data.map((item) => ({ label: item.label, value: item.value })));
22 | }
23 | };
24 |
25 | fetchSkills();
26 | }, []);
27 |
28 | // Convert selected options to text separated by commas
29 | const selectedText = selectedOptions.map((option) => option.label).join(", ");
30 |
31 | return (
32 | -
61 | {suggestions.map((market, index) => (
62 |
- handleSelect(market)} 66 | > 67 | {market} 68 | 69 | ))} 70 |
33 |
42 | {/* Hidden input field for form submission */}
43 |
44 |
48 | );
49 | }
50 |
51 | export default MultiSelectCombobox;
52 |
--------------------------------------------------------------------------------
/src/components/ProductNotFound.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import React from 'react';
3 | import { FaShopLock } from 'react-icons/fa6';
4 |
5 | const ProductNotFound = () => {
6 | return (
7 |
45 | eg: Plumber, Carpenter, Electrician,Teacher etc
46 |
47 |
8 |
19 | );
20 | };
21 |
22 | export default ProductNotFound;
--------------------------------------------------------------------------------
/src/components/TawkToScript.tsx:
--------------------------------------------------------------------------------
1 | "use client"; // Ensure this runs only on the client side
2 | import { useEffect } from "react";
3 |
4 | export default function TawkToScript() {
5 | useEffect(() => {
6 | // Prevent duplicate script injection
7 | if (document.getElementById("tawk-script")) return;
8 |
9 | const script = document.createElement("script");
10 | script.id = "tawk-script";
11 | script.async = true;
12 | script.src = "https://embed.tawk.to/67b87470c3759e190c785cd7/1ikk8dmbs";
13 | script.charset = "UTF-8";
14 | script.setAttribute("crossorigin", "*");
15 | document.body.appendChild(script);
16 | }, []);
17 |
18 | return null; // This component does not render anything visible
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/adminDashboard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FaUsers, FaUpload, FaUserClock, FaExclamationCircle } from 'react-icons/fa';
3 |
4 | const AdminDashboard = () => {
5 | return (
6 |
9 |
18 |
10 |
12 | Product Not Found
13 |We couldn’t find the product you’re looking for. Try searching again or browse other categories.
14 | 15 | 16 | 17 |
7 |
55 | );
56 | };
57 |
58 | export default AdminDashboard;
59 |
--------------------------------------------------------------------------------
/src/components/agentUser.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { createClient } from "@/utils/supabase/client";
3 |
4 | export default function AgentUser() {
5 | const [agents, setAgents] = useState([]); // Store fetched agents
6 | const [selectedAgentId, setSelectedAgentId] = useState(""); // Track selected agent ID
7 |
8 | useEffect(() => {
9 | const fetchAgents = async () => {
10 | const supabase = await createClient();
11 | const { data, error } = await supabase.from("agents").select("*");
12 |
13 | if (error) {
14 | console.error("Error fetching agents:", error);
15 | return;
16 | }
17 |
18 | setAgents(data);
19 | };
20 |
21 | fetchAgents();
22 | }, []);
23 |
24 | return (
25 |
8 | {/* Total Users */}
9 |
54 |
10 |
18 |
19 | {/* Total Unverified Users */}
20 |
11 |
13 |
14 |
17 | Total Users
15 |1,200
16 |
21 |
29 |
30 | {/* Total Uploads */}
31 |
22 |
24 |
25 |
28 | Total Unverified Users
26 |450
27 |
32 |
40 |
41 | {/* More Cards */}
42 |
33 |
35 |
36 |
39 | Total Uploads
37 |3,700
38 |
43 |
51 |
52 | {/* Add more stats/cards as needed */}
53 |
44 |
46 |
47 |
50 | Critical Alerts
48 |2
49 |
26 |
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/app-sidebar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from 'react';
3 | import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
4 | import Link from "next/link";
5 | import { createClient } from "@/utils/supabase/client";
6 |
7 | export function AppSidebar() {
8 | const supabase = createClient();
9 |
10 | // Fetch menu data using useEffect
11 | const [menu, setMenu] = React.useState([]);
12 |
13 | React.useEffect(() => {
14 | const fetchData = async () => {
15 | const { data, error } = await supabase
16 | .from('menu')
17 | .select('*');
18 |
19 | if (error) {
20 | console.error('Error fetching menu data:', error);
21 | } else {
22 | setMenu(data);
23 | }
24 | };
25 |
26 | fetchData();
27 | }, []);
28 |
29 | return (
30 |
31 | {/* Sidebar */}
32 |
56 | );
57 | }
58 |
59 | const iconMap = {
60 | calendar: Calendar,
61 | home: Home,
62 | inbox: Inbox,
63 | search: Search,
64 | settings: Settings,
65 | };
66 |
--------------------------------------------------------------------------------
/src/components/banM.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState, useEffect } from "react";
3 | import { useActionState } from "react";
4 | import bannerAction from "@/actions/auth/bans";
5 |
6 |
7 | export default function Logo() {
8 |
9 | const [prev, action, isPending] = useActionState
33 |
52 |
53 | {/* Overlay */}
54 |
55 |
34 |
37 |
38 | Sidebar
35 | 36 |
39 | {menu.map((menuItem) => {
40 | const Icon = iconMap[menuItem.icon?.toLowerCase()];
41 | return (
42 |
51 |
43 | {Icon &&
48 | );
49 | })}
50 |
60 |
88 | {/* Success message display */}
89 | {successMessage && (
90 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/banner.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from 'react';
4 |
5 | export default function Banner() {
6 | const [visible, setVisible] = useState(true);
7 |
8 | useEffect(() => {
9 | const timer = setTimeout(() => {
10 | setVisible(false);
11 | }, 3000);
12 |
13 | return () => clearTimeout(timer);
14 | }, []);
15 |
16 | return (
17 | visible && (
18 | {successMessage}
91 | )} 92 |
24 |
28 | )
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/bannerModel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState } from "react";
4 |
5 | import {
6 | Dialog,
7 | DialogContent,
8 | DialogDescription,
9 | DialogHeader,
10 | DialogTitle,
11 | DialogTrigger,
12 | } from "@/components/ui/dialog";
13 | import { Button } from "@/components/ui/button";
14 | import { FaEye, FaFileAlt } from "react-icons/fa";
15 | import { Input } from "@/components/ui/input";
16 | import { Label } from "@/components/ui/label";
17 | import { createClient } from "@/utils/supabase/client";
18 | import BanM from "./banM";
19 | import { FaF } from "react-icons/fa6";
20 |
21 |
22 |
23 | export default function BannwerModalLogo() {
24 |
25 |
26 | return (
27 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/catSlider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useEffect, useState } from "react";
3 | import "slick-carousel/slick/slick.css";
4 | import "slick-carousel/slick/slick-theme.css";
5 | import Slider from "react-slick";
6 | import { createClient } from "@/utils/supabase/client";
7 | import Image from "next/image";
8 | import Link from "next/link";
9 |
10 | export default function SliderComponent() {
11 | const [categorys, setcategorys] = useState([]);
12 |
13 | useEffect(() => {
14 | // Fetch categories from Supabase
15 | const fetchCategories = async () => {
16 | const supabase = createClient();
17 | const { data: categories, error } = await supabase.from("category").select("*");
18 | if (error) console.error("Error fetching categories:", error);
19 | else setcategorys(categories);
20 | };
21 |
22 | fetchCategories();
23 | }, []);
24 |
25 | const settings = {
26 | infinite: true,
27 | slidesToShow: 7,
28 | slidesToScroll: 1,
29 | autoplay: true,
30 | speed: 2000,
31 | autoplaySpeed: 3000,
32 | cssEase: "linear",
33 | adaptiveHeight: true,
34 | responsive: [
35 | { breakpoint: 1024, settings: { slidesToShow: 4 } },
36 | { breakpoint: 768, settings: { slidesToShow: 3 } },
37 | { breakpoint: 480, settings: { slidesToShow: 3 } },
38 | ],
39 | };
40 |
41 | return (
42 |
25 |
27 | Your text here
26 |
43 |
45 | {categorys.map((category) => (
46 |
65 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/catlist.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createClient } from "@/utils/supabase/client";
4 | import React, { useEffect, useState } from "react";
5 |
6 | export default function Catlist({ product }) {
7 | const supabase = createClient();
8 | const [kycRecords, setKycRecords] = useState([]);
9 | const [loading, setLoading] = useState(true);
10 | const [error, setError] = useState(null);
11 |
12 | useEffect(() => {
13 | const fetchCategories = async () => {
14 | try {
15 | const { data, error } = await supabase.from("category").select("*");
16 | if (error) throw error;
17 | setKycRecords(data);
18 | } catch (err) {
19 | setError(err.message);
20 | } finally {
21 | setLoading(false);
22 | }
23 | };
24 |
25 | fetchCategories();
26 | }, [supabase]);
27 |
28 | if (loading) return Categories
44 |
47 |
48 |
63 | ))}
64 |
49 |
61 |
62 |
58 | {category.title}
59 |
60 | Loading...
;
29 | if (error) return Error: {error}
;
30 |
31 | return (
32 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/clipboard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 | import { FaShareAlt, FaCopy } from "react-icons/fa";
4 | import { Button } from "./ui/button";
5 |
6 | const ShopUrlDisplay = ({ siteData, profile }) => {
7 | const [copySuccess, setCopySuccess] = useState(false);
8 |
9 | const handleCopyClick = () => {
10 | const url = `${siteData.siteUrl}store/${profile?.username}`;
11 | navigator.clipboard.writeText(url)
12 | .then(() => setCopySuccess(true))
13 | .catch((err) => console.error('Error copying text: ', err));
14 | };
15 |
16 | const handleShareClick = () => {
17 | const url = `${siteData.siteUrl}store/${profile?.username}`;
18 | if (navigator.share) {
19 | navigator.share({
20 | title: "Check out my shop!",
21 | url: url,
22 | })
23 | .catch((err) => console.error("Error sharing:", err));
24 | } else {
25 | // Fallback if the browser doesn't support the Web Share API
26 | window.open(`https://twitter.com/share?url=${url}`, "_blank");
27 | }
28 | };
29 |
30 | return (
31 | siteData?.siteUrl && (
32 |
33 | Shop URL:
34 |
35 | {siteData.siteUrl}store/{profile?.username}
36 |
37 |
38 |
49 | )
50 | );
51 | };
52 |
53 | export default ShopUrlDisplay;
54 |
--------------------------------------------------------------------------------
/src/components/currency.ts:
--------------------------------------------------------------------------------
1 | export const formatCurrency = (value, currency = 'NGN') => {
2 | return new Intl.NumberFormat('en-NG', {
3 | style: 'currency',
4 | currency: currency,
5 | minimumFractionDigits: 0,
6 | }).format(value);
7 | };
8 |
--------------------------------------------------------------------------------
/src/components/deleteButton.tsx:
--------------------------------------------------------------------------------
1 | import { createClient } from "@/utils/supabase/client"; // Adjust import based on your project structure
2 |
3 | // Initialize the Supabase client
4 | const supabase = createClient();
5 |
6 | const DeleteButton = ({ productId, imagePath }: { productId: string; imagePath: string }) => {
7 | const handleDelete = async () => {
8 | try {
9 | // Delete the product from the "products" table by productId
10 | const { error: deleteError } = await supabase
11 | .from("products")
12 | .delete()
13 | .eq("user_id", productId);
14 | if (deleteError) {
15 | console.error("Error deleting product:", deleteError);
16 | alert("Failed to delete the product from the database.");
17 | return;
18 | }
19 |
20 | // Delete the image from the Supabase bucket
21 | const { error: storageError } = await supabase
22 | .storage
23 | .from("products_image")
24 | .remove([imagePath.replace(/.*\/public\//, "")]);
25 | if (storageError) {
26 | console.error("Error deleting image from bucket:", storageError);
27 | alert("Failed to delete the image from the storage bucket.");
28 | return;
29 | }
30 |
31 | console.log("Product and associated image deleted successfully!");
32 | alert("Product and associated image deleted successfully!");
33 | // Refresh page automatically
34 | window.location.reload();
35 |
36 | } catch (err) {
37 | console.error("Error during deletion process:", err);
38 | alert("An unexpected error occurred while deleting.");
39 | }
40 | };
41 |
42 | return (
43 |
46 | );
47 | };
48 |
49 | export default DeleteButton;
50 |
--------------------------------------------------------------------------------
/src/components/expanded_products.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "productName": "Leather Women Bag",
4 | "description": "Elegant leather bag with multiple compartments, perfect for work or casual outings."
5 | },
6 | {
7 | "productName": "Men's Messenger Bag",
8 | "description": "Durable and stylish messenger bag ideal for laptops and daily essentials."
9 | },
10 | {
11 | "productName": "Luxury Face Cream",
12 | "description": "Nourishing cream that hydrates and rejuvenates your skin for a youthful glow."
13 | },
14 | {
15 | "productName": "Women's Summer Dress",
16 | "description": "Lightweight, floral dress perfect for warm weather and casual outings."
17 | },
18 | {
19 | "productName": "iPhone 15 Pro Max",
20 | "description": "Experience unparalleled performance with cutting-edge technology and stunning design."
21 | },
22 | {
23 | "productName": "Men's Classic Wallet",
24 | "description": "Compact leather wallet with ample space for cards, cash, and coins."
25 | },
26 | {
27 | "productName": "Laptop Backpack",
28 | "description": "Comfortable and secure backpack with padded compartments for your laptop and accessories."
29 | },
30 | {
31 | "productName": "Women's Tote Bag",
32 | "description": "Stylish and spacious tote bag for shopping or casual use."
33 | },
34 | {
35 | "productName": "Synthetic Lace Front Wig",
36 | "description": "Natural-looking, heat-resistant wig with adjustable straps for a perfect fit."
37 | },
38 | {
39 | "productName": "Gaming Laptop",
40 | "description": "High-performance laptop with a powerful GPU for gaming and multitasking."
41 | }
42 |
43 | ]
--------------------------------------------------------------------------------
/src/components/headerUser.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 | import { FaHome } from "react-icons/fa";
4 | import Image from "next/image";
5 | import Link from "next/link";
6 | import { Button } from "./ui/button";
7 |
8 | export default function Header({ shopDetails, totalProducts }) {
9 | return (
10 |
39 |
43 |
47 |
48 |
12 | {/* Logo and Name */}
13 |
36 |
14 |
17 |
18 | {/* Navigation Links (Desktop) */}
19 | {shopDetails.shopname}
16 |
20 | Home
21 |
22 | Contact Us
23 |
24 |
25 | {/* Mobile Menu (Home Icon + Products and Contact Us) */}
26 |
27 |
28 |
35 |
36 |
80 | 37 | Discover Skilled Professionals 38 |
39 |40 | Easily connect with experienced experts for repairs, maintenance, and installations. 41 |
42 | 43 | {/* Search Bar Form */} 44 | 75 | 76 |
77 | Popular: House Cleaning, Web Design, Personal Trainers
78 |
79 |
60 |
88 | {/* Success message display */}
89 | {successMessage && (
90 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/logoModel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState } from "react";
4 |
5 | import {
6 | Dialog,
7 | DialogContent,
8 | DialogDescription,
9 | DialogHeader,
10 | DialogTitle,
11 | DialogTrigger,
12 | } from "@/components/ui/dialog";
13 | import { Button } from "@/components/ui/button";
14 | import { FaEye, FaFileAlt } from "react-icons/fa";
15 | import { Input } from "@/components/ui/input";
16 | import { Label } from "@/components/ui/label";
17 | import { createClient } from "@/utils/supabase/client";
18 | import Logo from "./logo";
19 | import { FaF } from "react-icons/fa6";
20 |
21 |
22 |
23 | export default function ModalLogo() {
24 |
25 |
26 | return (
27 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/logoutButton.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useEffect } from 'react';
3 | import { Button } from './ui/button';
4 | import { redirect } from 'next/navigation';
5 | import logout from '@/actions/auth/logout.ts';
6 | import { useActionState } from 'react';
7 | import { FaS } from 'react-icons/fa6';
8 | import { FaSignOutAlt } from 'react-icons/fa';
9 |
10 | export default function LogoutButton() {
11 | const [state, action, isPending] = useActionState(logout, undefined, null);
12 |
13 | useEffect(() => {
14 | if (state?.success) {
15 | console.log('Logged out successfully');
16 | redirect('/login');
17 | } else if (state?.error) {
18 | console.error('Error logging out:', state.error.message);
19 | redirect('/login');
20 | }
21 | }, [state]);
22 |
23 | return (
24 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/navbar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useState, useEffect } from 'react';
3 | import Link from 'next/link';
4 | import { createClient } from '@/utils/supabase/client';
5 | import LogoutButton from './logoutButton';
6 | import Image from 'next/image';
7 | import { ShoppingCart } from 'lucide-react';
8 | import { FaL } from 'react-icons/fa6';
9 | import { FaLock } from 'react-icons/fa';
10 |
11 | export default function Navbar() {
12 | const [user, setUser] = useState(null);
13 | const [logo, setLogo] = useState(null);
14 |
15 | useEffect(() => {
16 | const supabase = createClient(); // Initialize once
17 |
18 | async function fetchUser() {
19 | const { data: { user } } = await supabase.auth.getUser();
20 | setUser(user);
21 | }
22 |
23 | async function fetchLogo() {
24 | const { data, error } = await supabase
25 | .from('site_info')
26 | .select("logo")
27 | .single();
28 |
29 | if (error) console.error("Error fetching logo:", error);
30 | else setLogo(data?.logo);
31 | }
32 |
33 | fetchUser();
34 | fetchLogo();
35 | }, []);
36 |
37 | return (
38 | {successMessage}
91 | )} 92 |
39 |
86 |
87 | );
88 | }
89 |
--------------------------------------------------------------------------------
/src/components/productCategory.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Link from 'next/link'
3 |
4 | export default function ProductCategory() {
5 | return (
6 |
7 | {/* Product Categories */}
8 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/searchBar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState, useEffect } from "react";
4 | import { createClient } from "@/utils/supabase/client";
5 |
6 | export default function SearchBar({ value, onChange }) {
7 | const [skills, setSkills] = useState([]);
8 | const [suggestions, setSuggestions] = useState([]);
9 | const supabase = createClient();
10 |
11 | useEffect(() => {
12 | // Fetch skills from Supabase
13 | const fetchSkills = async () => {
14 | const { data: skills, error } = await supabase.from("skills").select();
15 |
16 | if (error) {
17 | console.error("Error fetching skills:", error);
18 | return;
19 | }
20 |
21 | setSkills(skills);
22 | };
23 |
24 | fetchSkills();
25 | }, []);
26 |
27 | const handleInputChange = (e) => {
28 | const inputValue = e.target.value;
29 | onChange(inputValue);
30 |
31 | if (inputValue.length > 1) {
32 | setSuggestions(
33 | skills.filter((item) =>
34 | item.label.toLowerCase().includes(inputValue.toLowerCase())
35 | )
36 | );
37 | } else {
38 | setSuggestions([]); // Clear suggestions if input is too short
39 | }
40 | };
41 |
42 | const handleSelect = (label) => {
43 | onChange(label);
44 | setSuggestions([]); // Clear suggestions when a selection is made
45 | };
46 |
47 | return (
48 | Product Categories
9 |-
10 |
- Electronics 11 |
- Clothing 12 |
- Home Appliances 13 |
- Books 14 |
- Sports 15 |
- Toys 16 |
- Beauty 17 |
- Groceries 18 |
- Furniture 19 |
- Jewelry 20 |
- Automotive 21 |
- Garden 22 |
- Office Supplies 23 |
- Baby Products 24 |
- Pet Supplies 25 |
- Music 26 |
- Movies 27 |
- Video Games 28 |
- Health 29 |
- Travel 30 |
49 |
57 | {suggestions.length > 0 && (
58 |
71 | );
72 | }
73 |
--------------------------------------------------------------------------------
/src/components/selectedState.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { states } from './stateLga'
3 |
4 | export default function selectedState() {
5 | const [selectedState, setSelectedState] = useState('');
6 | const [lga, setLga] = useState('');
7 | const stateLgas = states.find((s) => s.name === selectedState)?.lgas || [];
8 | const [formData, setFormData] = useState({
9 | state: '',
10 | city: '',
11 | });
12 |
13 | const handleStateChange = (e) => {
14 | setSelectedState(e.target.value);
15 | setLga(''); // Reset LGA when state changes
16 | };
17 |
18 | const handleLgaChange = (e) => {
19 | setLga(e.target.value);
20 | setFormData((prevData) => ({ ...prevData, city: e.target.value }));
21 | };
22 |
23 | return (
24 | -
59 | {suggestions.map((item) => (
60 |
- handleSelect(item.label)} 64 | > 65 | {item.label} 66 | 67 | ))} 68 |
25 |
26 |
66 | )
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/sendMessageModel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState } from "react";
4 |
5 | import {
6 | Dialog,
7 | DialogContent,
8 | DialogDescription,
9 | DialogHeader,
10 | DialogTitle,
11 | DialogTrigger,
12 | } from "@/components/ui/dialog";
13 | import { Button } from "@/components/ui/button";
14 | import { FaEye, FaFileAlt } from "react-icons/fa";
15 | import { Input } from "@/components/ui/input";
16 | import { Label } from "@/components/ui/label";
17 | import { createClient } from "@/utils/supabase/client";
18 |
19 | import { FaF } from "react-icons/fa6";
20 | import Message from "./message";
21 |
22 |
23 |
24 | export default function SendMessageModel({product}:any) {
25 |
26 |
27 | return (
28 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/sheetAdmin.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Button } from "@/components/ui/button";
3 | import {
4 | Sheet,
5 | SheetContent,
6 | SheetHeader,
7 | SheetTitle,
8 | SheetTrigger,
9 | } from "@/components/ui/sheet";
10 | import Link from "next/link";
11 | import { LuList } from "react-icons/lu";
12 | import { createClient } from "@/utils/supabase/client";
13 | import { useEffect, useState } from "react";
14 | import LogoutButton from "./logoutButton";
15 |
16 | export function SheetAdmin() {
17 | const supabase = createClient();
18 | const [menus, setMenus] = useState([]);
19 |
20 | useEffect(() => {
21 | async function fetchMenus() {
22 | const { data, error } = await supabase.from("menu").select("*");
23 | if (error) {
24 | console.error("Error fetching menus:", error.message);
25 | } else {
26 | setMenus(data);
27 | }
28 | }
29 |
30 | fetchMenus();
31 | }, [supabase]);
32 |
33 | return (
34 |
27 |
65 |
28 |
29 |
44 |
45 |
46 |
47 |
48 |
63 |
64 | -
46 | {menus.map((menu) => (
47 |
48 |
- 49 | {menu.title} 50 | 51 | 52 | ))} 53 |
-
50 | {categorys.map((category) => (
51 |
-
52 |
53 |
54 | {category.title} 55 | 56 |
57 | ))}
58 |
59 |
60 |
60 |
88 | {/* Success message display */}
89 | {successMessage && (
90 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/siteLogoModel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState } from "react";
4 |
5 | import {
6 | Dialog,
7 | DialogContent,
8 | DialogDescription,
9 | DialogHeader,
10 | DialogTitle,
11 | DialogTrigger,
12 | } from "@/components/ui/dialog";
13 | import { Button } from "@/components/ui/button";
14 | import { FaEye, FaFileAlt } from "react-icons/fa";
15 | import { Input } from "@/components/ui/input";
16 | import { Label } from "@/components/ui/label";
17 | import { createClient } from "@/utils/supabase/client";
18 | import SiteLogo from "./siteLogo";
19 | import { FaF } from "react-icons/fa6";
20 |
21 |
22 |
23 | export default function siteLogoModel() {
24 |
25 |
26 | return (
27 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/slider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import "slick-carousel/slick/slick.css";
3 | import "slick-carousel/slick/slick-theme.css";
4 | import Slider from "react-slick";
5 | import { createClient } from '@/utils/supabase/client';
6 | import Image from 'next/image';
7 |
8 | export default function SliderComponent() {
9 | const [avatars, setAvatars] = useState([]);
10 |
11 | useEffect(() => {
12 | // Fetch avatars from supabase
13 | const fetchAvatars = async () => {
14 | const supabase = createClient();
15 | const { data: avatars, error } = await supabase.from('banner').select("*");
16 | if (error) console.error('Error fetching avatars:', error);
17 | else setAvatars(avatars);
18 | };
19 |
20 | fetchAvatars();
21 | }, []);
22 |
23 | const settings = {
24 | infinite: true,
25 | slidesToShow: 1,
26 | slidesToScroll: 1,
27 | autoplay: true,
28 | speed: 2000,
29 | autoplaySpeed: 6000,
30 | cssEase: "linear",
31 | adaptiveHeight: true
32 |
33 |
34 | };
35 |
36 | return (
37 | {successMessage}
91 | )} 92 |
41 |
51 | ))}
52 |
20 |
30 |
31 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/states.ts:
--------------------------------------------------------------------------------
1 | // states.js
2 | export const nigeriaStates = [
3 | "Abia",
4 | "Adamawa",
5 | "Akwa Ibom",
6 | "Anambra",
7 | "Bauchi",
8 | "Bayelsa",
9 | "Benue",
10 | "Borno",
11 | "Cross River",
12 | "Delta",
13 | "Ebonyi",
14 | "Edo",
15 | "Ekiti",
16 | "Enugu",
17 | "Gombe",
18 | "Imo",
19 | "Jigawa",
20 | "Kaduna",
21 | "Kano",
22 | "Katsina",
23 | "Kebbi",
24 | "Kogi",
25 | "Kwara",
26 | "Lagos",
27 | "Nasarawa",
28 | "Niger",
29 | "Ogun",
30 | "Ondo",
31 | "Osun",
32 | "Oyo",
33 | "Plateau",
34 | "Rivers",
35 | "Sokoto",
36 | "Taraba",
37 | "Yobe",
38 | "Zamfara",
39 | "FCT",
40 | ];
41 |
--------------------------------------------------------------------------------
/src/components/tabsFetch.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import Tab from 'react-bootstrap/Tab';
3 | import Tabs from 'react-bootstrap/Tabs';
4 | import 'bootstrap/dist/css/bootstrap.min.css';
5 | import Reviews from './reviews';
6 | // use param
7 |
8 | function TabsFetch({ userDetail }: { userDetail: any }) {
9 | const [key, setKey] = useState('home');
10 |
11 | return (
12 |
13 |
14 | setKey(k || 'home')}
18 | className="mb-3"
19 | fill
20 | >
21 |
22 |
34 |
35 |
36 |
38 |
39 |
40 |
47 |
48 |
49 | );
50 | }
51 |
52 | export default TabsFetch;
53 |
--------------------------------------------------------------------------------
/src/components/topbar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FaBell, FaUserAlt } from 'react-icons/fa'; // Importing icons
3 | import Link from 'next/link';
4 | import Userdashboard from '@/components/userdashboard';
5 |
6 | export default function Topbar() {
7 | return (
8 | Services Offered
23 | {userDetail.skills && userDetail.skills.length > 0 ? ( 24 |-
25 | {userDetail.skills.split(',').map((skill: string, index: number) => (
26 |
- {skill} 27 | ))} 28 |
No services available.
31 | )} 32 | 33 |Work Samples
41 |
42 | 
43 |
44 |
45 |
46 |
9 |
10 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/topnav.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from "react";
3 | import { FaMapMarkerAlt, FaSearch } from "react-icons/fa";
4 | import { nigeriaStates } from "./states";
5 | import Image from "next/image";
6 | import { Button } from "./ui/button";
7 |
8 | export default function Topnav() {
9 | return (
10 |
11 | {/*
20 |
11 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { cva, type VariantProps } from "class-variance-authority"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const alertVariants = cva(
7 | "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
8 | {
9 | variants: {
10 | variant: {
11 | default: "bg-background text-foreground",
12 | destructive:
13 | "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 | },
15 | },
16 | defaultVariants: {
17 | variant: "default",
18 | },
19 | }
20 | )
21 |
22 | const Alert = React.forwardRef<
23 | HTMLDivElement,
24 | React.HTMLAttributes
12 |
22 |
23 |
24 |
60 |
25 |
58 |
59 |
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 | -
36 |
-
37 |
38 | 39 | Dashboard 40 | 41 |
42 | -
43 |
44 | 45 | Add Products 46 | 47 |
48 | -
49 |
50 | 51 | Manage Products 52 | 53 |
54 |
55 |
56 | -
57 |
58 | 59 | Profile 60 | 61 |
62 | -
63 |
64 | 74 |
75 |