-
- To get started, edit the page.tsx file.
+ <>
+
{!collapsed && (
-
- Niki
-
+ <>
+
+ Niki
+
+
- To get started, edit the page.tsx file.
+ <>
+
+ {/* Background decoration */}
+
+
+
+
+
+
+
+
+
+ Kind Box Management System v2.0
+
+
+
+ Connecting{' '}
+
+ Kindness
+ {' '}
+ with Those in Need
-
- Looking for a starting point or more instructions? Head over to{" "}
-
+ Niki is a comprehensive kind box management platform that connects benefactors,
+ agents, and administrators to streamline donations, deliveries, and tracking
+ across cities.
+
+
+
+
- Templates
- {" "}
- or the{" "}
-
+
+
+ {/* Stats Section */}
+
+
+ {stats.map((stat) => (
+
+
+
+ {stat.value}
+
+ {stat.label}
+
+ ))}
+
+
+
+ {/* How It Works Section */}
+
+
+
+ How It Works
+
+
+ From registration to delivery โ Niki makes the entire process seamless and transparent.
-
-
-
+ {item.title}
+
+
+ {item.description}
+
+
+
+ ))}
-
-
+
+
+ {/* System Portals */}
+
+
+
+ System Portals
+
+
+ Role-based dashboards designed for each user type.
+
+
+
+
+ {portals.map((portal) => (
+
+
+ {portal.icon}
+
+
+ {portal.title}
+
+
+ {portal.description}
+
+
+ Access portal โ
+
+
+ {portal.roles}
+
+
+ ))}
+
+
+
+ {/* Testimonials Section */}
+
+
+
+ What Our Users Say
+
+
+ Hear from the people who use Niki every day.
+
+
+
+
+ {testimonials.map((t) => (
+
+ {/* Quote icon */}
+
+
+ “{t.quote}”
+
+
+
+ {t.avatar}
+
+
+ {t.name}
+ {t.role}
+
+
+
+ ))}
+
+
+
+ {/* CTA Section */}
+
+
+ {/* Decorative elements */}
+
+
+
+
+
+
+ Ready to Get Started?
+
+
+ Join thousands of benefactors, agents, and administrators making a difference
+ through the Niki kind box management system.
+
+
+
+ Create Free Account
+
+
+
+ Browse Products
+
+
+
+
+
+
+
+
+
+ ID
+ Name
+ Phone
+ Sex
+ Case Status
+ Referral
+ Actions
+
+
+
+ {filtered.map((p) => (
+
+ #{p.id}
+ {p.firstName} {p.lastName}
+ {p.phone}
+ {p.sex}
+ {p.caseStatus}
+ {p.referralSource}
+
+ ))}
+
+
+
+ ) : (
+ 0 ? {
+ label: `Cart (${cartCount})`,
+ href: '/cart',
+ } : undefined}
+ />
+
+ {/* Search and Filters */}
+
+
+
+ setSearch(e.target.value)}
+ className="form-input pl-10"
+ />
+
+
+
+ {/* Category Pills */}
+
+ {categories.map((cat) => (
+
+ ))}
+
+
+ {/* Product Grid */}
+ {filtered.length > 0 ? (
+
+ {filtered.map((p) => (
+
+ {/* Product Image Placeholder */}
+
+ {p.image}
+
+
+ {p.category}
+
+
+
+
+
+ {p.name}
+ {p.description}
+
+
+
+ {formatCurrency(p.price)}
+
+
+ {p.stock <= 15 ? `Only ${p.stock} left` : `Stock: ${p.stock}`}
+
+
+
+
+
+
+ ))}
+
+ ) : (
+
+ );
+}
diff --git a/src/app/sales-reports/page.tsx b/src/app/sales-reports/page.tsx
new file mode 100644
index 0000000..dcef16e
--- /dev/null
+++ b/src/app/sales-reports/page.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { useState } from 'react';
+import PageHeader from '@/components/PageHeader';
+import { formatCurrency } from '@/lib/utils';
+
+const mockStats = { totalRevenue: 15000000, totalOrders: 45, totalBenefactors: 120, totalCampaigns: 8 };
+const mockRecent = [
+ { id: 1, date: '2025-06-10', amount: 750000, orders: 3 },
+ { id: 2, date: '2025-06-09', amount: 500000, orders: 2 },
+ { id: 3, date: '2025-06-08', amount: 1250000, orders: 5 },
+];
+
+export default function SalesReportsPage() {
+ return (
+
+ Total Revenue
{formatCurrency(mockStats.totalRevenue)}
+ Total Orders
{mockStats.totalOrders}
+ Benefactors
{mockStats.totalBenefactors}
+ Campaigns
{mockStats.totalCampaigns}
+
+
+
+ Recent Sales
+
+
+
+
+ Date
+ Orders
+ Revenue
+
+
+
+ {mockRecent.map((r) => (
+
+ {r.date}
+ {r.orders}
+ {formatCurrency(r.amount)}
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
new file mode 100644
index 0000000..e732a6c
--- /dev/null
+++ b/src/app/staff/page.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { useState } from 'react';
+import PageHeader from '@/components/PageHeader';
+import StatusBadge from '@/components/StatusBadge';
+import EmptyState from '@/components/EmptyState';
+import { formatDateTime } from '@/lib/utils';
+
+const mockStaff = [
+ { id: 1, firstName: 'Dr. Amir', lastName: 'Hosseini', phoneNumber: '09111234567', email: 'amir@niki.com', role: 'doctor', isActive: true, createdAt: '2025-01-15T08:00:00' },
+ { id: 2, firstName: 'Nurse Maryam', lastName: 'Akbari', phoneNumber: '09121234567', email: 'maryam@niki.com', role: 'nurse', isActive: true, createdAt: '2025-02-01T08:00:00' },
+];
+
+export default function StaffPage() {
+ const [search, setSearch] = useState('');
+ const filtered = mockStaff.filter((s) => `${s.firstName} ${s.lastName}`.toLowerCase().includes(search.toLowerCase()));
+
+ return (
+
+
+
+
+ ID
+ Name
+ Phone
+ Email
+ Role
+ Status
+ Joined
+
+
+
+ {filtered.map((s) => (
+
+ #{s.id}
+ {s.firstName} {s.lastName}
+ {s.phoneNumber}
+ {s.email}
+ {s.role}
+ {formatDateTime(s.createdAt)}
+
+ ))}
+
+
+
+ ) : (
+ Current Balance
+ {formatCurrency(Number(mockWallet.balance))}
+
+ Status:
+
+
+ ID
+ Type
+ Amount
+ Description
+ Date
+
+
+
+ {mockTransactions.map((t) => (
+
+ #{t.id}
+ {t.actionType}
+ {t.actionType === 'deposit' ? '+' : '-'}{formatCurrency(Number(t.amount))}
+ {t.description}
+ {formatDateTime(t.timestamp)}
+
+ ))}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/AuthGuard.tsx b/src/components/AuthGuard.tsx
new file mode 100644
index 0000000..249ae52
--- /dev/null
+++ b/src/components/AuthGuard.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { useEffect, ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/AuthContext';
+
+interface AuthGuardProps {
+ children: ReactNode;
+ requiredRoles?: string[];
+}
+
+export default function AuthGuard({ children, requiredRoles }: AuthGuardProps) {
+ const router = useRouter();
+ const { isAuthenticated, isLoading, role } = useAuth();
+
+ useEffect(() => {
+ if (!isLoading && !isAuthenticated) {
+ router.replace('/login');
+ }
+ }, [isLoading, isAuthenticated, router]);
+
+ // Check role requirements
+ useEffect(() => {
+ if (!isLoading && isAuthenticated && requiredRoles && role) {
+ if (!requiredRoles.includes(role)) {
+ router.replace('/');
+ }
+ }
+ }, [isLoading, isAuthenticated, role, requiredRoles, router]);
+
+ if (isLoading) {
+ return (
+
+
+
+ Loading...
+
+
+ );
+ }
+
+ if (!isAuthenticated) {
+ return (
+
+
+
+ Redirecting to login...
+
+
+ );
+ }
+
+ // Check role
+ if (requiredRoles && role && !requiredRoles.includes(role)) {
+ return (
+
+
+ ๐
+ Access Denied
+ You do not have permission to access this page.
+
+
+ );
+ }
+
+ return <>{children};
+}
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
new file mode 100644
index 0000000..2a69058
--- /dev/null
+++ b/src/components/EmptyState.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import Link from 'next/link';
+
+interface EmptyStateProps {
+ icon?: string;
+ title: string;
+ description?: string;
+ action?: {
+ label: string;
+ href: string;
+ };
+}
+
+export default function EmptyState({ icon = '๐ญ', title, description, action }: EmptyStateProps) {
+ return (
+
+ {icon}
+ {title}
+ {description && {description}
}
+ {action && (
+
+ {action.label}
+
+ )}
+
+ );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..e8896d1
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,105 @@
+import Link from 'next/link';
+
+const roleGroups = [
+ {
+ role: 'Super Admin / Admin',
+ dashboards: [
+ { label: 'Admin Dashboard', href: '/admin/dashboard' },
+ { label: 'Benefactors', href: '/admin/benefactors' },
+ { label: 'Agents', href: '/admin/agents' },
+ { label: 'Kind Boxes', href: '/admin/kind-boxes' },
+ { label: 'Kind Box Requests', href: '/admin/kind-box-requests' },
+ { label: 'Refer Times', href: '/admin/refer-times' },
+ { label: 'Patients', href: '/patients' },
+ { label: 'Drivers', href: '/drivers' },
+ { label: 'Staff', href: '/staff' },
+ { label: 'Sales Reports', href: '/sales-reports' },
+ { label: 'Gamification', href: '/gamification' },
+ ],
+ },
+ {
+ role: 'Benefactor',
+ dashboards: [
+ { label: 'My Kind Boxes', href: '/benefactor/kind-boxes' },
+ { label: 'My Requests', href: '/benefactor/kind-box-requests' },
+ { label: 'My Addresses', href: '/benefactor/addresses' },
+ { label: 'Refer Times', href: '/benefactor/refer-times' },
+ ],
+ },
+ {
+ role: 'Agent',
+ dashboards: [
+ { label: 'Agent Dashboard', href: '/agent/dashboard' },
+ { label: 'Return Awaiting', href: '/agent/kind-boxes' },
+ { label: 'Delivery Awaiting', href: '/agent/kind-box-requests' },
+ ],
+ },
+ {
+ role: 'General',
+ dashboards: [
+ { label: 'Products', href: '/products' },
+ { label: 'Cart', href: '/cart' },
+ { label: 'Orders', href: '/orders' },
+ { label: 'Campaigns', href: '/campaigns' },
+ { label: 'Wallet', href: '/wallet' },
+ ],
+ },
+];
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/LandingFooter.tsx b/src/components/LandingFooter.tsx
new file mode 100644
index 0000000..a1358a7
--- /dev/null
+++ b/src/components/LandingFooter.tsx
@@ -0,0 +1,95 @@
+import Link from 'next/link';
+
+const footerLinks = {
+ platform: {
+ title: 'Platform',
+ links: [
+ { label: 'Admin Dashboard', href: '/admin/dashboard' },
+ { label: 'Benefactor Portal', href: '/benefactor/kind-boxes' },
+ { label: 'Agent Panel', href: '/agent/dashboard' },
+ { label: 'Marketplace', href: '/products' },
+ ],
+ },
+ resources: {
+ title: 'Resources',
+ links: [
+ { label: 'Cart', href: '/cart' },
+ { label: 'Orders', href: '/orders' },
+ { label: 'Campaigns', href: '/campaigns' },
+ { label: 'Wallet', href: '/wallet' },
+ ],
+ },
+ company: {
+ title: 'Company',
+ links: [
+ { label: 'About Us', href: '/' },
+ { label: 'Contact', href: '/' },
+ { label: 'Privacy Policy', href: '/' },
+ { label: 'Terms of Service', href: '/' },
+ ],
+ },
+};
+
+export default function LandingFooter() {
+ return (
+
+ );
+}
diff --git a/src/components/LandingNavbar.tsx b/src/components/LandingNavbar.tsx
new file mode 100644
index 0000000..a8172ab
--- /dev/null
+++ b/src/components/LandingNavbar.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import Link from 'next/link';
+import { useAuth } from '@/lib/AuthContext';
+
+export default function LandingNavbar() {
+ const { isAuthenticated, user, logout } = useAuth();
+
+ return (
+
+ );
+}
diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
new file mode 100644
index 0000000..aa7a2e9
--- /dev/null
+++ b/src/components/MainContent.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { useSidebar } from '@/lib/SidebarContext';
+import Footer from './Footer';
+
+export default function MainContent({ children }: { children: ReactNode }) {
+ const pathname = usePathname();
+ const { collapsed } = useSidebar();
+ const isPublicPage = pathname === '/login' || pathname === '/';
+
+ return (
+
+ {children}
+ {!isPublicPage && }
+
+ );
+}
diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx
new file mode 100644
index 0000000..51bb92d
--- /dev/null
+++ b/src/components/PageHeader.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import Link from 'next/link';
+
+interface PageHeaderProps {
+ title: string;
+ description?: string;
+ action?: {
+ label: string;
+ href: string;
+ };
+}
+
+export default function PageHeader({ title, description, action }: PageHeaderProps) {
+ return (
+
+
+ {title}
+ {description && (
+ {description}
+ )}
+
+ {action && (
+
+
+ {action.label}
+
+ )}
+
+ );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 77e5f74..a0326cf 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -5,6 +5,8 @@ import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { getUserRole } from '@/lib/api';
import { useState, useEffect } from 'react';
+import { useSidebar } from '@/lib/SidebarContext';
+import ThemeToggle from './ThemeToggle';
interface NavItem {
label: string;
@@ -17,7 +19,7 @@ interface NavItem {
const navItems: NavItem[] = [
{
label: 'Dashboard',
- href: '/',
+ href: '/admin/dashboard',
icon: '๐',
},
{
@@ -160,19 +162,23 @@ const navItems: NavItem[] = [
export default function Sidebar() {
const pathname = usePathname();
const [role, setRole] = useState(null);
- const [collapsed, setCollapsed] = useState(false);
+ const { collapsed, toggle } = useSidebar();
useEffect(() => {
setRole(getUserRole());
}, []);
+ // Don't render sidebar on login or landing page
+ if (pathname === '/login' || pathname === '/') {
+ return null;
+ }
+
const filteredItems = navItems.filter((item) => {
if (!item.roles || item.roles.length === 0) return true;
return role && item.roles.includes(role);
});
const isActive = (href: string) => {
- if (href === '/') return pathname === '/';
return pathname.startsWith(href);
};
@@ -189,9 +195,17 @@ export default function Sidebar() {
N
+
+
+
+
+
+
+
+
+
+ Kind Box Management System v2.0
+
+
+ + Connecting{' '} + + Kindness + {' '} + with Those in Need
-- Looking for a starting point or more instructions? Head over to{" "} - + Niki is a comprehensive kind box management platform that connects benefactors, + agents, and administrators to streamline donations, deliveries, and tracking + across cities. +
+ +
+
- Templates
- {" "}
- or the{" "}
-
+
+
+ {stats.map((stat) => (
+
+
+
+
+ ))}
+
+ {stat.value}
+
+ {stat.label}
+
+
- + How It Works +
++ From registration to delivery โ Niki makes the entire process seamless and transparent.
-
-
+
+ {howItWorks.map((item, index) => (
+
-
-
+ {/* Connector line */}
+ {index < howItWorks.length - 1 && (
+
+ )}
+
+ ))}
+
+
+ {item.icon}
+
+
+ Step {item.step}
+
+ + {item.title} +
++ {item.description} +
+
+
+
+ + System Portals +
++ Role-based dashboards designed for each user type. +
+
+ {portals.map((portal) => (
+
+
+
+ {portal.icon}
+
+ + {portal.title} +
++ {portal.description} +
+
+ Access portal โ
+
+
+ {portal.roles}
+
+
+ ))}
+
+
+
+ + What Our Users Say +
++ Hear from the people who use Niki every day. +
+
+ {testimonials.map((t) => (
+
+
+ {/* Quote icon */}
+
+
+ ))}
+ + “{t.quote}” +
+
+
+
+ {t.avatar}
+
+
+
+ {t.name}
+ {t.role}
+
+ {/* Decorative elements */}
+
+
+
+
+
+
+
+ + Ready to Get Started? +
++ Join thousands of benefactors, agents, and administrators making a difference + through the Niki kind box management system. +
+
+
+ Create Free Account
+
+
+
+ Browse Products
+
+
+
+
+ setSearch(e.target.value)} className="form-input pl-10" />
+
+ {filtered.length > 0 ? (
+
+
+
+
+
+ ) : (
+ | ID | +Name | +Phone | +Sex | +Case Status | +Referral | +Actions | +
|---|---|---|---|---|---|---|
| #{p.id} | +{p.firstName} {p.lastName} | +{p.phone} | +{p.sex} | +{p.caseStatus} | +{p.referralSource} | ++ |
+
+
+ {/* Category Pills */}
+
+
+ setSearch(e.target.value)}
+ className="form-input pl-10"
+ />
+
+
+ {categories.map((cat) => (
+
+ ))}
+
+
+ {/* Product Grid */}
+ {filtered.length > 0 ? (
+
+ {filtered.map((p) => (
+
+ ) : (
+
+ {/* Product Image Placeholder */}
+
+ ))}
+
+ {p.image}
+
+
+
+
+ {p.category}
+
+
+
+
+ {p.name}
+{p.description}
+ +
+
+ {formatCurrency(p.price)}
+
+
+ {p.stock <= 15 ? `Only ${p.stock} left` : `Stock: ${p.stock}`}
+
+
+
+
+
+
+
+
+
+
+
+ Total Revenue
{formatCurrency(mockStats.totalRevenue)}
Total Orders
{mockStats.totalOrders}
Benefactors
{mockStats.totalBenefactors}
Campaigns
{mockStats.totalCampaigns}
+
+
+ Recent Sales
+
+
+
+
+ | Date | +Orders | +Revenue | +
|---|---|---|
| {r.date} | +{r.orders} | +{formatCurrency(r.amount)} | +
+
+ setSearch(e.target.value)} className="form-input pl-10" />
+
+ {filtered.length > 0 ? (
+
+
+
+
+
+ ) : (
+ | ID | +Name | +Phone | +Role | +Status | +Joined | +|
|---|---|---|---|---|---|---|
| #{s.id} | +{s.firstName} {s.lastName} | +{s.phoneNumber} | +{s.email} | +{s.role} | +{formatDateTime(s.createdAt)} | +
+
+
+
+
+ Current Balance
+{formatCurrency(Number(mockWallet.balance))}
+
+ Status:
+
+
+
+
+
+
+
+
+
+ {activeTab === 'transactions' && (
+
+
+
+
+
+ )}
+ | ID | +Type | +Amount | +Description | +Date | +
|---|---|---|---|---|
| #{t.id} | +{t.actionType} | +{t.actionType === 'deposit' ? '+' : '-'}{formatCurrency(Number(t.amount))} | +{t.description} | +{formatDateTime(t.timestamp)} | +
+
+
+ Loading...
+
+
+
+ Redirecting to login...
+
+ ๐
+
+ Access Denied
+You do not have permission to access this page.
+{title}
+ {description &&{description}
} + {action && ( + + {action.label} + + )} +{children}
+ {!isPublicPage && }
+
+
+ {action && (
+
+
+ {action.label}
+
+ )}
+ {title}
+ {description && ( +{description}
+ )} +
+
)}