Merge version_2 into main #2

Merged
bender merged 5 commits from version_2 into main 2026-04-24 13:18:00 +00:00
5 changed files with 306 additions and 231 deletions

53
src/app/admin/page.tsx Normal file
View File

@@ -0,0 +1,53 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import { Users, BarChart3, Settings, AlertCircle } from "lucide-react";
export default function AdminDashboardPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="mediumLarge"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Dashboard", id: "/admin" }
]}
brandName="Bosaso Police Admin"
/>
</div>
<div id="metrics" data-section="metrics" className="pt-32 pb-16">
<MetricCardOne
title="System Overview"
description="Administrative control panel for managing user accounts, reports, and system settings."
gridVariant="bento-grid"
animationType="slide-up"
metrics={[
{ id: "u1", value: "1,248", title: "Active Users", description: "Registered account holders", icon: Users },
{ id: "u2", value: "85%", title: "Report Efficiency", description: "Resolved incident volume", icon: BarChart3 },
{ id: "u3", value: "12", title: "Pending Alerts", description: "High priority investigations", icon: AlertCircle },
{ id: "u4", value: "Enabled", title: "System Status", description: "Global configuration settings", icon: Settings }
]}
textboxLayout="split"
useInvertedBackground={false}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

63
src/app/login/page.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
export default function LoginPage() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log("Login attempted:", { email, password });
};
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="mediumLarge"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Login", id: "/login" },
{ name: "Register", id: "/register" },
]}
brandName="Bosaso Police"
/>
<main className="min-h-screen flex items-center justify-center pt-20">
<form onSubmit={handleSubmit} className="p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-200">
<h1 className="text-2xl font-bold mb-6">Police Login</h1>
<input
type="email"
placeholder="Email"
className="w-full p-3 mb-4 border rounded"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
className="w-full p-3 mb-6 border rounded"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit" className="w-full p-3 bg-blue-600 text-white rounded font-bold">
Login
</button>
</form>
</main>
</ThemeProvider>
);
}

View File

@@ -31,22 +31,11 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Services",
id: "features",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "features" },
{ name: "Contact", id: "contact" },
{ name: "Admin", id: "/admin" },
]}
brandName="Bosaso Police"
/>
@@ -55,107 +44,52 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{
variant: "gradient-bars",
}}
variant: "gradient-bars"}}
title="Bosaso Police Crime Report & Tracking System"
description="Secure, efficient, and community-focused reporting platform for a safer Bosaso. Empowering local police with real-time incident tracking to protect our citizens."
testimonials={[
{
name: "Ali Hassan",
handle: "@alihassan",
testimonial: "This platform has significantly improved how we report incidents in Bosaso.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=1",
imageAlt: "police patrol car city station",
},
name: "Ali Hassan", handle: "@alihassan", testimonial: "This platform has significantly improved how we report incidents in Bosaso.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=1", imageAlt: "police patrol car city station"},
{
name: "Fatima Noor",
handle: "@fatimanoor",
testimonial: "Very user-friendly and keeps our community safe.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=1",
imageAlt: "police patrol car city station",
},
name: "Fatima Noor", handle: "@fatimanoor", testimonial: "Very user-friendly and keeps our community safe.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=1", imageAlt: "police patrol car city station"},
{
name: "Mohamed Abdi",
handle: "@mohabdi",
testimonial: "Quick response times thanks to the tracking system.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=1",
imageAlt: "police patrol car city station",
},
name: "Mohamed Abdi", handle: "@mohabdi", testimonial: "Quick response times thanks to the tracking system.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=1", imageAlt: "police patrol car city station"},
{
name: "Zahra Ahmed",
handle: "@zahraahmed",
testimonial: "Essential tool for every citizen in Bosaso.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=1",
imageAlt: "police patrol car city station",
},
name: "Zahra Ahmed", handle: "@zahraahmed", testimonial: "Essential tool for every citizen in Bosaso.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=1", imageAlt: "police patrol car city station"},
{
name: "Yusuf Omar",
handle: "@yusufomar",
testimonial: "A massive step forward for police accountability.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=1",
imageAlt: "police patrol car city station",
},
name: "Yusuf Omar", handle: "@yusufomar", testimonial: "A massive step forward for police accountability.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=1", imageAlt: "police patrol car city station"},
]}
buttons={[
{
text: "Report Incident",
href: "#contact",
},
text: "Report Incident", href: "#contact"},
{
text: "Learn More",
href: "#about",
},
text: "Learn More", href: "#about"},
]}
imageSrc="http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=2"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/car-entering-parking_1160-352.jpg",
alt: "Local resident",
},
src: "http://img.b2bpic.net/free-photo/car-entering-parking_1160-352.jpg", alt: "Local resident"},
{
src: "http://img.b2bpic.net/free-photo/young-stylish-woman-exploring-city_23-2149186680.jpg",
alt: "Community member",
},
src: "http://img.b2bpic.net/free-photo/young-stylish-woman-exploring-city_23-2149186680.jpg", alt: "Community member"},
{
src: "http://img.b2bpic.net/free-photo/policemen-street-japan_23-2149297293.jpg",
alt: "Local business owner",
},
src: "http://img.b2bpic.net/free-photo/policemen-street-japan_23-2149297293.jpg", alt: "Local business owner"},
{
src: "http://img.b2bpic.net/free-photo/fire-truck-motion-emergency-vehicle-street-dynamic-city-scene_169016-68604.jpg",
alt: "Youth representative",
},
src: "http://img.b2bpic.net/free-photo/fire-truck-motion-emergency-vehicle-street-dynamic-city-scene_169016-68604.jpg", alt: "Youth representative"},
{
src: "http://img.b2bpic.net/free-photo/person-sitting-house-with-automation-light-system_482257-9704.jpg",
alt: "Neighborhood elder",
},
src: "http://img.b2bpic.net/free-photo/person-sitting-house-with-automation-light-system_482257-9704.jpg", alt: "Neighborhood elder"},
]}
marqueeItems={[
{
type: "text",
text: "Safety First",
},
{
type: "text",
text: "Rapid Response",
},
{
type: "text",
text: "Data Driven",
},
{
type: "text",
text: "Community Trust",
},
{
type: "text",
text: "24/7 Monitoring",
},
{ type: "text", text: "Safety First" },
{ type: "text", text: "Rapid Response" },
{ type: "text", text: "Data Driven" },
{ type: "text", text: "Community Trust" },
{ type: "text", text: "24/7 Monitoring" },
]}
/>
</div>
@@ -166,19 +100,13 @@ export default function LandingPage() {
title="Our Mission for Bosaso"
metrics={[
{
label: "Incidents Resolved",
value: "1200+",
icon: CheckCircle,
label: "Incidents Resolved", value: "1200+", icon: CheckCircle,
},
{
label: "Active Reports",
value: "45",
icon: AlertCircle,
label: "Active Reports", value: "45", icon: AlertCircle,
},
{
label: "Community Participation",
value: "98%",
icon: Users,
label: "Community Participation", value: "98%", icon: Users,
},
]}
metricsAnimation="slide-up"
@@ -192,38 +120,14 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Secure Mobile Reporting",
author: "Police Dept",
description: "Instant crime reporting from any smartphone with real-time location tagging.",
tags: [
"Security",
"Mobile",
],
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=2",
},
id: "f1", title: "Secure Mobile Reporting", author: "Police Dept", description: "Instant crime reporting from any smartphone with real-time location tagging.", tags: ["Security", "Mobile"],
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=2"},
{
id: "f2",
title: "Real-time Tracking",
author: "Police Dept",
description: "Dispatch teams can track reported incidents via live GPS data updates.",
tags: [
"Tracking",
"GPS",
],
imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=2",
},
id: "f2", title: "Real-time Tracking", author: "Police Dept", description: "Dispatch teams can track reported incidents via live GPS data updates.", tags: ["Tracking", "GPS"],
imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=2"},
{
id: "f3",
title: "Community Engagement",
author: "Police Dept",
description: "Interactive platform connecting local authorities with citizens for proactive safety.",
tags: [
"Safety",
"Community",
],
imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=2",
},
id: "f3", title: "Community Engagement", author: "Police Dept", description: "Interactive platform connecting local authorities with citizens for proactive safety.", tags: ["Safety", "Community"],
imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=2"},
]}
title="Core Capabilities"
description="State-of-the-art tools designed for rapid reporting and effective police response."
@@ -237,21 +141,9 @@ export default function LandingPage() {
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "15 min",
description: "Avg Response Time",
},
{
id: "m2",
value: "24/7",
description: "Operational Status",
},
{
id: "m3",
value: "95%",
description: "Incident Completion",
},
{ id: "m1", value: "15 min", description: "Avg Response Time" },
{ id: "m2", value: "24/7", description: "Operational Status" },
{ id: "m3", value: "95%", description: "Incident Completion" },
]}
title="Data-Driven Safety"
description="Metrics that track our performance and demonstrate our commitment to transparency."
@@ -265,45 +157,20 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Johnson",
handle: "@sarahj",
testimonial: "Fast and helpful.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=2",
},
id: "t1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "Fast and helpful.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=2"},
{
id: "t2",
name: "Michael Chen",
handle: "@mchen",
testimonial: "Excellent service.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/nature-lover-working-greenhouse_23-2149037251.jpg",
},
id: "t2", name: "Michael Chen", handle: "@mchen", testimonial: "Excellent service.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/nature-lover-working-greenhouse_23-2149037251.jpg"},
{
id: "t3",
name: "Emily Rodriguez",
handle: "@erod",
testimonial: "Professional reporting.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_23-2148729653.jpg",
},
id: "t3", name: "Emily Rodriguez", handle: "@erod", testimonial: "Professional reporting.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_23-2148729653.jpg"},
{
id: "t4",
name: "David Kim",
handle: "@dkim",
testimonial: "Very effective tool.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-library_23-2148680199.jpg",
},
id: "t4", name: "David Kim", handle: "@dkim", testimonial: "Very effective tool.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-library_23-2148680199.jpg"},
{
id: "t5",
name: "Alice Wong",
handle: "@awong",
testimonial: "Safety is improved.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149196105.jpg",
},
id: "t5", name: "Alice Wong", handle: "@awong", testimonial: "Safety is improved.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149196105.jpg"},
]}
showRating={true}
title="Community Voices"
@@ -316,21 +183,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Is my data anonymous?",
content: "Yes, you can choose to remain anonymous when submitting reports.",
},
{
id: "q2",
title: "How do I track reports?",
content: "Use your generated report ID on the tracking page.",
},
{
id: "q3",
title: "Is it available 24/7?",
content: "Yes, the system is fully operational around the clock.",
},
{ id: "q1", title: "Is my data anonymous?", content: "Yes, you can choose to remain anonymous when submitting reports." },
{ id: "q2", title: "How do I track reports?", content: "Use your generated report ID on the tracking page." },
{ id: "q3", title: "Is it available 24/7?", content: "Yes, the system is fully operational around the clock." },
]}
title="Common Inquiries"
description="Answers to frequently asked questions about our system."
@@ -341,16 +196,9 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
text="Report an incident safely and securely. Our team is ready to assist you."
buttons={[
{
text: "Submit Report",
href: "#contact",
},
]}
buttons={[{ text: "Submit Report", href: "#contact" }]}
/>
</div>
@@ -358,33 +206,16 @@ export default function LandingPage() {
<FooterBase
columns={[
{
title: "Quick Links",
items: [
{
label: "Home",
href: "#hero",
},
{
label: "About",
href: "#about",
},
{
label: "Report",
href: "#contact",
},
title: "Quick Links", items: [
{ label: "Home", href: "#hero" },
{ label: "About", href: "#about" },
{ label: "Report", href: "#contact" },
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
],
},
]}

72
src/app/register/page.tsx Normal file
View File

@@ -0,0 +1,72 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
export default function RegisterPage() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [role, setRole] = useState("officer");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log("Registration attempted:", { email, password, role });
};
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="mediumLarge"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Login", id: "/login" },
{ name: "Register", id: "/register" },
]}
brandName="Bosaso Police"
/>
<main className="min-h-screen flex items-center justify-center pt-20">
<form onSubmit={handleSubmit} className="p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-200">
<h1 className="text-2xl font-bold mb-6">Create Account</h1>
<input
type="email"
placeholder="Email"
className="w-full p-3 mb-4 border rounded"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
className="w-full p-3 mb-4 border rounded"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<select
className="w-full p-3 mb-6 border rounded"
value={role}
onChange={(e) => setRole(e.target.value)}
>
<option value="officer">Police Officer</option>
<option value="admin">Administrator</option>
</select>
<button type="submit" className="w-full p-3 bg-blue-600 text-white rounded font-bold">
Register
</button>
</form>
</main>
</ThemeProvider>
);
}

View File

@@ -0,0 +1,56 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactCenter from '@/components/sections/contact/ContactCenter';
export default function SubmitReportPage() {
const [status, setStatus] = useState<string>("");
const handleSubmit = async (email: string) => {
// Simulation of backend save
console.log("Saving report with email:", email);
setStatus("Report submitted successfully!");
};
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="mediumLarge"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Report", id: "#form" }
]}
brandName="Bosaso Police"
/>
</div>
<div id="form" data-section="form" className="pt-24">
<ContactCenter
tag="Report Incident"
title="Incident Submission Form"
description="Please provide accurate details regarding the incident. Our team will review your report shortly."
background={{ variant: "gradient-bars" }}
onSubmit={handleSubmit}
buttonText="Save Report"
/>
{status && (
<div className="text-center p-4 mt-4 bg-green-500/10 text-green-600 font-semibold rounded-full">
{status}
</div>
)}
</div>
</ThemeProvider>
);
}