diff --git a/src/app/supplier/help-support/page.tsx b/src/app/supplier/help-support/page.tsx new file mode 100644 index 0000000..948220c --- /dev/null +++ b/src/app/supplier/help-support/page.tsx @@ -0,0 +1,218 @@ +"use client" + +import { useState } from "react" +import { + HelpCircle, + Book, + MessageCircle, + Video, + FileText, + Mail, + Search, + ChevronRight, + Package, + ShoppingCart, + Users +} from "lucide-react" + +interface FAQItem { + id: string + question: string + answer: string + category: "getting-started" | "products" | "orders" | "vendors" | "general" +} + +const faqCategories = [ + { id: "getting-started", label: "Getting Started", icon: Book }, + { id: "products", label: "Products", icon: Package }, + { id: "orders", label: "Orders", icon: ShoppingCart }, + { id: "vendors", label: "Vendors", icon: Users }, + { id: "general", label: "General", icon: HelpCircle }, +] + +const faqs: FAQItem[] = [ + { + id: "1", + question: "How do I set up my supplier profile?", + answer: "Go to Settings in the supplier portal and complete your company details, profile image, and description. A complete profile helps vendors trust your store and improves your visibility.", + category: "getting-started" + }, + { + id: "2", + question: "How do I add and update products?", + answer: "Open Products to create, edit, and manage your catalog. Keep product titles, pricing, stock, and images updated so vendors can review accurate information.", + category: "products" + }, + { + id: "3", + question: "How do supplier orders work?", + answer: "All incoming order activity appears in Orders. You can open each order to review line items, status, and vendor information, then continue fulfillment from your operational workflow.", + category: "orders" + }, + { + id: "4", + question: "How do I manage vendor relationships?", + answer: "Go to Vendors to view connected vendors, open each connection, and respond to collaboration activity. Keep communication and product data current to maintain strong vendor partnerships.", + category: "vendors" + }, + { + id: "5", + question: "How can I contact support?", + answer: "Use Contact Support on this page to email our team at support@junohub.com. Include your supplier account email and relevant details so we can assist you faster.", + category: "general" + }, + { + id: "6", + question: "Where can I learn more about JUNO features?", + answer: "Use the Documentation and Video Tutorials sections for step-by-step guidance on supplier workflows, catalog management, and collaboration with vendors.", + category: "general" + } +] + +export default function SupplierHelpSupportPage() { + const [searchTerm, setSearchTerm] = useState("") + const [selectedCategory, setSelectedCategory] = useState(null) + const [expandedFaq, setExpandedFaq] = useState(null) + + const filteredFaqs = faqs.filter(faq => { + const matchesSearch = faq.question.toLowerCase().includes(searchTerm.toLowerCase()) || + faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) + const matchesCategory = !selectedCategory || faq.category === selectedCategory + return matchesSearch && matchesCategory + }) + + return ( +
+
+
+

Help & Support

+

Find answers and get help for your supplier portal.

+
+
+ +
+ +
+ +
+

Contact Support

+

Get help from our team

+ + + +
+ +
+

Live Chat

+

Chat with support

+ + + +
+
+

Video Tutorials

+

Watch how-to guides

+ + + +
+ +
+

Documentation

+

Read detailed guides

+ +
+ +
+
+
+ + setSearchTerm(e.target.value)} + className="w-full h-12 pl-12 pr-4 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500/50 text-white placeholder:text-slate-500 text-sm font-medium transition-all" + /> +
+
+
+ +
+ + {faqCategories.map((category) => { + const Icon = category.icon + return ( + + ) + })} +
+ +
+
+ {filteredFaqs.length === 0 ? ( +
+ +

No results found

+

Try a different search term or category

+
+ ) : ( + filteredFaqs.map((faq) => ( +
+ +
+ )) + )} +
+
+
+ ) +} diff --git a/src/components/SupplierSidebar.tsx b/src/components/SupplierSidebar.tsx index 91abb5c..bbc5613 100644 --- a/src/components/SupplierSidebar.tsx +++ b/src/components/SupplierSidebar.tsx @@ -8,6 +8,7 @@ import { ShoppingCart, Users, Mail, + HelpCircle, } from "lucide-react" import Image from "next/image" import { cn } from "@/lib/utils" @@ -51,6 +52,10 @@ interface SupplierSidebarProps { export function SupplierSidebar({ showLogo = true }: SupplierSidebarProps) { const pathname = usePathname() + const isRouteActive = (href: string) => { + if (href === "/supplier") return pathname === "/supplier" + return pathname === href || pathname.startsWith(`${href}/`) + } return (
@@ -75,7 +80,7 @@ export function SupplierSidebar({ showLogo = true }: SupplierSidebarProps) { href={route.href} className={cn( "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-white hover:bg-white/10 rounded-xl transition-all duration-200 ease-out border border-transparent", - pathname === route.href ? "text-white bg-white/10 border-white/10" : "text-slate-400" + isRouteActive(route.href) ? "text-white bg-white/10 border-white/10" : "text-slate-400" )} >
@@ -85,6 +90,22 @@ export function SupplierSidebar({ showLogo = true }: SupplierSidebarProps) { ))}
+
+ +
+ + Help & Support +
+ +
) }