DevOps/JUNOHUB-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI fixes and mobile responsive

Browse Source
This commit is contained in:
root 2026-02-14 17:28:19 +05:00
parent 59d90ed807
commit 4ad0ed7dbc
11 changed files with 1473 additions and 994 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

721
src/app/dashboard/inventory/page.tsx
View File

@ -19,8 +19,12 @@ import {
X,
CheckCircle2,
ChevronLeft,
ChevronRight
ChevronRight,
Plus
} from "lucide-react"
import { createPortal } from "react-dom"
import { motion, AnimatePresence } from "framer-motion"
import { useTheme } from "@/components/ThemeProvider"
interface ShopifyProduct {
id: number
@ -79,7 +83,15 @@ export default function InventoryPage() {
const [statusFilter, setStatusFilter] = useState<string>("all")
const [vendorFilter, setVendorFilter] = useState<string>("all")
const [showFilters, setShowFilters] = useState(false)
const menuRefs = useRef<{ [key: number]: HTMLDivElement | null }>({})
const [mounted, setMounted] = useState(false)
const [menuRect, setMenuRect] = useState<{ top: number; left: number } | null>(null)
const menuRefs = useRef<{ [key: number]: HTMLButtonElement | null }>({})
const { theme } = useTheme()
const isLight = theme === "light"
useEffect(() => {
setMounted(true)
}, [])
useEffect(() => {
const fetchStoreInfo = async () => {
@ -133,10 +145,10 @@ export default function InventoryPage() {
// First get the active store
const storeRes = await fetch("/api/stores")
if (!storeRes.ok) return
const storeData = await storeRes.json()
const activeStore = storeData.stores?.find((s: { isActive: boolean }) => s.isActive)
if (!activeStore) {
setConnectedSuppliers([])
return
@ -147,27 +159,27 @@ export default function InventoryPage() {
if (res.ok) {
const data = await res.json()
// Only show CONNECTED suppliers for the active store
const connected = data.connections?.filter(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(c: any) => c.status === "CONNECTED" &&
c.supplier &&
c.store?.id === activeStore.id
(c: any) => c.status === "CONNECTED" &&
c.supplier &&
c.store?.id === activeStore.id
// eslint-disable-next-line @typescript-eslint/no-explicit-any
).map((c: any) => c.supplier) || []
// Remove duplicates by supplier ID (in case of any edge cases)
const uniqueSuppliers = Array.from(
new Map(connected.map((s: Supplier) => [s.id, s])).values()
)
setConnectedSuppliers(uniqueSuppliers as Supplier[])
}
} catch {
// Silent fail - suppliers not critical for initial load
}
}
// Fetch store info, inventory, syncs, and suppliers
fetchStoreInfo()
fetchInventory()
@ -201,8 +213,19 @@ export default function InventoryPage() {
}
}, [openMenuId])
const handleMenuToggle = (productId: number) => {
setOpenMenuId(openMenuId === productId ? null : productId)
const handleMenuToggle = (productId: number, e: React.MouseEvent) => {
e.stopPropagation()
if (openMenuId === productId) {
setOpenMenuId(null)
setMenuRect(null)
} else {
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
setMenuRect({
top: rect.bottom + window.scrollY,
left: rect.right + window.scrollX
})
setOpenMenuId(productId)
}
}
const handleViewProduct = (product: ShopifyProduct) => {
@ -307,12 +330,12 @@ export default function InventoryPage() {
p.variants.length,
new Date(p.created_at).toLocaleDateString()
])
const csvContent = [
csvHeaders.join(","),
...csvRows.map(row => row.join(","))
].join("\n")
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
const link = document.createElement("a")
const url = URL.createObjectURL(blob)
@ -336,306 +359,402 @@ export default function InventoryPage() {
const uniqueVendors = Array.from(new Set(products.map(p => p.vendor))).sort()
return (
<div className="flex flex-col flex-1 min-h-0 space-y-4 md:space-y-6">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 flex-shrink-0">
<div>
<h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">Inventory</h1>
<p className="text-sm md:text-base text-slate-400 mt-1">Manage your synced Shopify products and variants.</p>
</div>
<div className="flex gap-2 md:gap-3">
<button
onClick={handleExport}
className="h-10 md:h-11 px-3 md:px-4 bg-white/10 border border-white/10 rounded-xl font-bold text-white hover:bg-white/15 backdrop-blur-sm transition-all flex items-center gap-2 text-sm"
>
<Download className="w-4 h-4" /> <span className="hidden sm:inline">Export</span>
</button>
</div>
</div>
<div className="bg-white/5 backdrop-blur-xl rounded-xl md:rounded-2xl border border-white/10 flex flex-col flex-1 min-h-0 relative">
<div className="p-4 md:p-6 border-b border-white/10 flex flex-col sm:flex-row gap-3 md:gap-4 justify-between bg-white/5 flex-shrink-0">
<div className="relative flex-1 min-w-0">
<Search className="absolute left-3 md:left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
<input
type="text"
placeholder="Search products, vendors..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full h-10 md:h-11 pl-10 md:pl-11 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"
/>
<>
<div className="flex flex-col h-full min-h-0 space-y-4 md:space-y-6">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 flex-shrink-0">
<div>
<h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">Inventory</h1>
<p className="text-sm md:text-base text-slate-400 mt-1">Manage your synced Shopify products and variants.</p>
</div>
<div className="relative">
<button
onClick={() => setShowFilters(!showFilters)}
className={`h-10 md:h-11 px-4 bg-white/10 border border-white/10 rounded-xl font-bold text-slate-300 hover:bg-white/15 transition-all flex items-center justify-center gap-2 text-sm shrink-0 ${showFilters ? "bg-indigo-500/20 border-indigo-500/30 text-indigo-400" : ""}`}
<div className="flex gap-2 md:gap-3">
<button
onClick={handleExport}
className="h-10 md:h-11 px-3 md:px-4 bg-white/10 border border-white/10 rounded-xl font-bold text-white hover:bg-white/15 backdrop-blur-sm transition-all flex items-center gap-2 text-sm"
>
<Filter className="w-4 h-4" /> Filters
<Download className="w-4 h-4" /> <span className="hidden sm:inline">Export</span>
</button>
{showFilters && (
<div className="absolute right-0 top-full mt-2 bg-slate-900 border border-white/10 rounded-xl shadow-xl p-4 z-50 min-w-[200px] max-w-[calc(100vw-2rem)]">
<div className="space-y-3">
<div>
<label className="block text-xs font-bold text-slate-400 mb-2">Status</label>
<select
value={statusFilter}
onChange={(e) => {
setStatusFilter(e.target.value)
}}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/30"
>
<option value="all">All Statuses</option>
<option value="active">Active</option>
<option value="archived">Archived</option>
<option value="draft">Draft</option>
</select>
</div>
<div>
<label className="block text-xs font-bold text-slate-400 mb-2">Vendor</label>
<select
value={vendorFilter}
onChange={(e) => {
setVendorFilter(e.target.value)
}}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/30"
>
<option value="all">All Vendors</option>
{uniqueVendors.map(vendor => (
<option key={vendor} value={vendor}>{vendor}</option>
))}
</select>
</div>
<button
</div>
</div>
<div className="bg-white/5 backdrop-blur-xl rounded-xl md:rounded-2xl border border-white/10 flex flex-col flex-1 min-h-0 relative overflow-hidden">
<div className="p-4 md:p-6 border-b border-white/10 flex flex-col sm:flex-row gap-3 md:gap-4 justify-between bg-white/5 flex-shrink-0">
<div className="relative flex-1 min-w-0">
<Search className="absolute left-3 md:left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
<input
type="text"
placeholder="Search products, vendors..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full h-10 md:h-11 pl-10 md:pl-11 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"
/>
</div>
<div className="relative">
<button
onClick={() => setShowFilters(!showFilters)}
className={`h-10 md:h-11 px-4 bg-white/10 border border-white/10 rounded-xl font-bold text-slate-300 hover:bg-white/15 transition-all flex items-center justify-center gap-2 text-sm shrink-0 ${showFilters ? "bg-indigo-500/20 border-indigo-500/30 text-indigo-400" : ""}`}
>
<Filter className="w-4 h-4" /> Filters
</button>
{showFilters && (
<div className="absolute right-0 top-full mt-2 bg-slate-900 border border-white/10 rounded-xl shadow-xl p-4 z-50 min-w-[200px] max-w-[calc(100vw-2rem)]">
<div className="space-y-3">
<div>
<label className="block text-xs font-bold text-slate-400 mb-2">Status</label>
<select
value={statusFilter}
onChange={(e) => {
setStatusFilter(e.target.value)
}}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/30"
>
<option value="all">All Statuses</option>
<option value="active">Active</option>
<option value="archived">Archived</option>
<option value="draft">Draft</option>
</select>
</div>
<div>
<label className="block text-xs font-bold text-slate-400 mb-2">Vendor</label>
<select
value={vendorFilter}
onChange={(e) => {
setVendorFilter(e.target.value)
}}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/30"
>
<option value="all">All Vendors</option>
{uniqueVendors.map(vendor => (
<option key={vendor} value={vendor}>{vendor}</option>
))}
</select>
</div>
<button
onClick={() => {
setStatusFilter("all")
setVendorFilter("all")
}}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm hover:bg-white/10 transition-colors"
>
Clear Filters
</button>
</div>
</div>
)}
</div>
</div>
<div className="flex-1 overflow-y-auto overflow-x-auto -mx-4 md:mx-0 min-h-0">
<div className="min-w-full px-4 md:px-0">
{loading ? (
<div className="h-64 flex flex-col items-center justify-center text-slate-400 gap-3">
<Loader2 className="w-8 h-8 animate-spin text-indigo-400" />
<p className="font-medium animate-pulse">Syncing with Shopify...</p>
</div>
) : error ? (
<div className="h-64 flex flex-col items-center justify-center text-red-400 gap-4 p-8 text-center">
<div className="w-12 h-12 bg-red-500/10 border border-red-500/20 rounded-2xl flex items-center justify-center">
<AlertCircle className="w-6 h-6" />
</div>
<div>
<p className="font-bold">{error}</p>
<p className="text-xs text-slate-400 mt-1 max-w-xs mx-auto">Check your Shopify API permissions (read_products) and try again.</p>
</div>
</div>
) : filteredProducts.length === 0 ? (
<div className="h-64 flex flex-col items-center justify-center text-slate-400 gap-3">
<Package className="w-10 h-10 opacity-20" />
<p className="font-medium">No products found.</p>
</div>
) : (
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-white/5 border-b border-white/10">
<th className="px-4 md:px-8 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest min-w-[200px] md:min-w-[300px]">Product</th>
<th className="px-3 md:px-6 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap">Status</th>
<th className="px-3 md:px-6 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap">Inventory</th>
<th className="px-3 md:px-6 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap hidden md:table-cell text-left">Supplier</th>
<th className="px-3 md:px-6 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap hidden lg:table-cell text-left">Sync</th>
<th className="px-4 md:px-8 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
{filteredProducts.map((product) => (
<tr key={product.id} className="hover:bg-white/5 transition-colors group">
<td className="px-4 md:px-8 py-3 md:py-4">
<div className="flex items-center gap-3 md:gap-4">
<div className="w-10 h-10 md:w-12 md:h-12 rounded-lg md:rounded-xl bg-white/10 border border-white/10 overflow-hidden shrink-0 flex items-center justify-center">
{product.image?.src ? (
<Image src={product.image.src} alt="" width={48} height={48} className="w-full h-full object-cover" />
) : (
<ImageIcon className="w-4 h-4 md:w-5 md:h-5 text-slate-500" />
)}
</div>
<div className="flex flex-col min-w-0">
<span className="font-bold text-sm md:text-base text-white group-hover:text-indigo-400 transition-colors truncate">{product.title}</span>
<span className="text-[10px] font-medium text-slate-500 font-mono tracking-tighter">ID: {product.id}</span>
</div>
</div>
</td>
<td className="px-3 md:px-6 py-3 md:py-4">
<span className={`px-2 md:px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider ${product.status === "active"
? "bg-emerald-500/20 text-emerald-400"
: "bg-white/10 text-slate-500"
}`}>
{product.status}
</span>
</td>
<td className="px-3 md:px-6 py-3 md:py-4">
<div className="flex flex-col">
<span className="font-bold text-sm md:text-base text-white">{product.variants.length} Variants</span>
<span className="text-[10px] text-slate-500 font-medium hidden sm:inline">Total Sync Stock</span>
</div>
</td>
<td className="px-3 md:px-6 py-3 md:py-4 hidden md:table-cell text-left">
{(() => {
const sync = isProductSynced(product.id)
const syncStatus = getProductSyncStatus(product.id)
return sync ? (
<span className="text-sm font-medium text-white">{sync.supplier.companyName}</span>
) : syncStatus?.status === "PENDING" ? (
<span className="text-sm font-medium text-yellow-400">Pending...</span>
) : (
<span className="text-sm font-medium text-slate-500">—</span>
)
})()}
</td>
<td className="px-3 md:px-6 py-3 md:py-4 hidden lg:table-cell text-left">
{(() => {
const sync = isProductSynced(product.id)
const syncStatus = getProductSyncStatus(product.id)
return sync ? (
<span className="inline-block px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-500/20 text-emerald-400">
Synced
</span>
) : syncStatus?.status === "PENDING" ? (
<span className="inline-block px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-yellow-500/20 text-yellow-400">
Pending
</span>
) : (
<button
onClick={() => handleSyncProduct(product)}
className="inline-block px-3 py-1.5 bg-indigo-500/20 text-indigo-400 border border-indigo-400/30 rounded-lg text-xs font-bold hover:bg-indigo-500/30 transition-colors"
>
Sync
</button>
)
})()}
</td>
<td className="px-4 md:px-8 py-3 md:py-4 text-right">
<div className="relative" ref={(el) => { menuRefs.current[product.id] = el }}>
<button
onClick={() => handleMenuToggle(product.id)}
className="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-indigo-400 transition-all relative z-10"
>
<MoreHorizontal className="w-4 h-4 md:w-5 md:h-5" />
</button>
{openMenuId === product.id && (
<div className="absolute right-0 top-full mt-1 bg-white/95 backdrop-blur-xl border border-white/20 rounded-xl shadow-xl overflow-hidden z-50 min-w-[180px]">
<button
onClick={() => handleViewProduct(product)}
className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
>
<Eye className="w-4 h-4" />
View in Shopify
</button>
<button
onClick={() => handleCopyProductId(product.id)}
className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
>
<Copy className="w-4 h-4" />
Copy Product ID
</button>
<button
onClick={() => handleRefreshProduct()}
className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
>
<RefreshCw className="w-4 h-4" />
Refresh Product
</button>
<div className="border-t border-white/10 my-1"></div>
{storeDomain && (
<a
href={`https://${storeDomain}/products/${product.handle}`}
target="_blank"
rel="noopener noreferrer"
onClick={() => setOpenMenuId(null)}
className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
>
<ExternalLink className="w-4 h-4" />
View on Storefront
</a>
)}
</div>
)}
</div>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
{/* Pagination removed as per requirements */}
</div>
{/* Supplier Selection Modal */}
{showSupplierModal && selectedProduct && (
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div className="bg-slate-900 border border-white/10 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col">
<div className="p-6 border-b border-white/10 flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold text-white">Select Supplier</h2>
<p className="text-sm text-slate-400 mt-1">Choose a supplier to sync &quot;{selectedProduct.title}&quot;</p>
</div>
<button
onClick={() => {
setShowSupplierModal(false)
setSelectedProduct(null)
}}
className="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="flex-1 overflow-y-auto p-6">
{connectedSuppliers.length === 0 ? (
<div className="text-center py-12">
<AlertCircle className="w-12 h-12 text-slate-500 mx-auto mb-4" />
<p className="text-slate-400 font-medium">No connected suppliers</p>
<p className="text-sm text-slate-500 mt-2">Please connect with suppliers first from the Suppliers page.</p>
</div>
) : (
<div className="grid gap-3">
{connectedSuppliers.map((supplier) => (
<button
key={supplier.id}
onClick={() => handleSelectSupplier(supplier.id)}
disabled={syncingProduct}
className="p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:border-indigo-500/50 transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed group"
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm hover:bg-white/10 transition-colors"
>
<div className="flex items-start justify-between">
<div className="flex-1">
<h3 className="font-bold text-white">{supplier.companyName}</h3>
{supplier.description && (
<p className="text-sm text-slate-400 mt-1 line-clamp-2">{supplier.description}</p>
)}
<p className="text-xs text-slate-500 mt-2">{supplier.user.email}</p>
</div>
{syncingProduct ? (
<Loader2 className="w-5 h-5 animate-spin text-indigo-400 ml-4" />
) : (
<CheckCircle2 className="w-5 h-5 text-indigo-400 ml-4 opacity-0 group-hover:opacity-100 transition-opacity" />
)}
</div>
Clear Filters
</button>
))}
</div>
</div>
)}
</div>
</div>
<div className="flex-1 overflow-y-auto overflow-x-auto -mx-4 md:mx-0 min-h-0">
<div className="min-w-full px-4 md:px-0">
{loading ? (
<div className="h-64 flex flex-col items-center justify-center text-slate-400 gap-3">
<Loader2 className="w-8 h-8 animate-spin text-indigo-400" />
<p className="font-medium animate-pulse">Syncing with Shopify...</p>
</div>
) : error ? (
<div className="h-64 flex flex-col items-center justify-center text-red-400 gap-4 p-8 text-center">
<div className="w-12 h-12 bg-red-500/10 border border-red-500/20 rounded-2xl flex items-center justify-center">
<AlertCircle className="w-6 h-6" />
</div>
<div>
<p className="font-bold">{error}</p>
<p className="text-xs text-slate-400 mt-1 max-w-xs mx-auto">Check your Shopify API permissions (read_products) and try again.</p>
</div>
</div>
) : filteredProducts.length === 0 ? (
<div className="h-64 flex flex-col items-center justify-center text-slate-400 gap-3">
<Package className="w-10 h-10 opacity-20" />
<p className="font-medium">No products found.</p>
</div>
) : (
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-white/5 border-b border-white/10">
<th className="px-4 md:px-8 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest min-w-[200px] md:min-w-[300px]">Product</th>
<th className="px-3 md:px-6 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap">Status</th>
<th className="px-3 md:px-6 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap">Inventory</th>
<th className="px-3 md:px-6 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap hidden md:table-cell text-left">Supplier</th>
<th className="px-3 md:px-6 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap hidden lg:table-cell text-left">Sync</th>
<th className="px-4 md:px-8 py-3 md:py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
{filteredProducts.map((product) => (
<tr key={product.id} className="hover:bg-white/5 transition-colors group">
<td className="px-4 md:px-8 py-3 md:py-4">
<div className="flex items-center gap-3 md:gap-4">
<div className="w-10 h-10 md:w-12 md:h-12 rounded-lg md:rounded-xl bg-white/10 border border-white/10 overflow-hidden shrink-0 flex items-center justify-center">
{product.image?.src ? (
<Image src={product.image.src} alt="" width={48} height={48} className="w-full h-full object-cover" />
) : (
<ImageIcon className="w-4 h-4 md:w-5 md:h-5 text-slate-500" />
)}
</div>
<div className="flex flex-col min-w-0">
<span className="font-bold text-sm md:text-base text-white group-hover:text-indigo-400 transition-colors truncate">{product.title}</span>
<span className="text-[10px] font-medium text-slate-500 font-mono tracking-tighter">ID: {product.id}</span>
</div>
</div>
</td>
<td className="px-3 md:px-6 py-3 md:py-4">
<span className={`px-2 md:px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider ${product.status === "active"
? "bg-emerald-500/20 text-emerald-400"
: "bg-white/10 text-slate-500"
}`}>
{product.status}
</span>
</td>
<td className="px-3 md:px-6 py-3 md:py-4">
<div className="flex flex-col">
<span className="font-bold text-sm md:text-base text-white">{product.variants.length} Variants</span>
<span className="text-[10px] text-slate-500 font-medium hidden sm:inline">Total Sync Stock</span>
</div>
</td>
<td className="px-3 md:px-6 py-3 md:py-4 hidden md:table-cell text-left">
{(() => {
const sync = isProductSynced(product.id)
const syncStatus = getProductSyncStatus(product.id)
return sync ? (
<span className="text-sm font-medium text-white">{sync.supplier.companyName}</span>
) : syncStatus?.status === "PENDING" ? (
<span className="text-sm font-medium text-yellow-400">Pending...</span>
) : (
<span className="text-sm font-medium text-slate-500">—</span>
)
})()}
</td>
<td className="px-3 md:px-6 py-3 md:py-4 hidden lg:table-cell text-left">
{(() => {
const sync = isProductSynced(product.id)
const syncStatus = getProductSyncStatus(product.id)
return sync ? (
<span className="inline-block px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-500/20 text-emerald-400">
Synced
</span>
) : syncStatus?.status === "PENDING" ? (
<span className="inline-block px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-yellow-500/20 text-yellow-400">
Pending
</span>
) : (
<button
onClick={() => handleSyncProduct(product)}
className="inline-block px-3 py-1.5 bg-indigo-500/20 text-indigo-400 border border-indigo-400/30 rounded-lg text-xs font-bold hover:bg-indigo-500/30 transition-colors"
>
Sync
</button>
)
})()}
</td>
<td className="px-4 md:px-8 py-3 md:py-4 text-right">
<div className="relative">
<button
ref={(el) => { menuRefs.current[product.id] = el }}
onClick={(e) => handleMenuToggle(product.id, e)}
className={`p-2 rounded-lg transition-all relative z-10 ${openMenuId === product.id
? (isLight ? "bg-indigo-100 text-indigo-600" : "bg-white/10 text-indigo-400")
: (isLight ? "text-slate-400 hover:text-slate-600 hover:bg-slate-100" : "text-slate-400 hover:text-indigo-400 hover:bg-white/10")
}`}
>
<MoreHorizontal className="w-4 h-4 md:w-5 md:h-5" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
{/* Pagination removed as per requirements */}
</div>
{/* Supplier Selection Modal */}
{showSupplierModal && selectedProduct && (
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div className="bg-slate-900 border border-white/10 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col">
<div className="p-6 border-b border-white/10 flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold text-white">Select Supplier</h2>
<p className="text-sm text-slate-400 mt-1">Choose a supplier to sync &quot;{selectedProduct.title}&quot;</p>
</div>
<button
onClick={() => {
setShowSupplierModal(false)
setSelectedProduct(null)
}}
className="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="flex-1 overflow-y-auto p-6">
{connectedSuppliers.length === 0 ? (
<div className="text-center py-12">
<AlertCircle className="w-12 h-12 text-slate-500 mx-auto mb-4" />
<p className="text-slate-400 font-medium">No connected suppliers</p>
<p className="text-sm text-slate-500 mt-2">Please connect with suppliers first from the Suppliers page.</p>
</div>
) : (
<div className="grid gap-3">
{connectedSuppliers.map((supplier) => (
<button
key={supplier.id}
onClick={() => handleSelectSupplier(supplier.id)}
disabled={syncingProduct}
className="p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:border-indigo-500/50 transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed group"
>
<div className="flex items-start justify-between">
<div className="flex-1">
<h3 className="font-bold text-white">{supplier.companyName}</h3>
{supplier.description && (
<p className="text-sm text-slate-400 mt-1 line-clamp-2">{supplier.description}</p>
)}
<p className="text-xs text-slate-500 mt-2">{supplier.user.email}</p>
</div>
{syncingProduct ? (
<Loader2 className="w-5 h-5 animate-spin text-indigo-400 ml-4" />
) : (
<CheckCircle2 className="w-5 h-5 text-indigo-400 ml-4 opacity-0 group-hover:opacity-100 transition-opacity" />
)}
</div>
</button>
))}
</div>
)}
</div>
</div>
</div>
)}
</div>
{mounted && createPortal(
<AnimatePresence>
{openMenuId !== null && menuRect !== null && (
<>
<div
className="fixed inset-0 z-[100]"
onClick={() => {
setOpenMenuId(null)
setMenuRect(null)
}}
/>
<ActionsMenuContent
openMenuId={openMenuId}
menuRect={menuRect}
isLight={isLight}
products={products}
storeDomain={storeDomain}
handleViewProduct={handleViewProduct}
handleCopyProductId={handleCopyProductId}
handleRefreshProduct={handleRefreshProduct}
onClose={() => {
setOpenMenuId(null)
setMenuRect(null)
}}
/>
</>
)}
</AnimatePresence>,
document.body
)}
</div>
</>
)
}
function ActionsMenuContent({
openMenuId,
menuRect,
isLight,
products,
storeDomain,
handleViewProduct,
handleCopyProductId,
handleRefreshProduct,
onClose
}: {
openMenuId: number;
menuRect: { top: number; left: number };
isLight: boolean;
products: ShopifyProduct[];
storeDomain: string | null;
handleViewProduct: (product: ShopifyProduct) => void;
handleCopyProductId: (productId: number) => void;
handleRefreshProduct: () => void;
onClose: () => void;
}) {
const product = products.find(p => p.id === openMenuId);
if (!product) return null;
return (
<motion.div
initial={{ opacity: 0, scale: 0.95, y: -10 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: -10 }}
key="inventory-actions-menu"
style={{
position: 'absolute',
top: menuRect.top + 4,
left: menuRect.left - 180,
zIndex: 101,
width: 180
}}
className={`rounded-xl shadow-2xl border overflow-hidden ${isLight
? "bg-white border-slate-200"
: "bg-slate-900 border-white/10"
}`}
>
<div className="flex flex-col">
<button
onClick={() => handleViewProduct(product)}
className={`w-full px-4 py-2.5 text-left text-sm font-medium flex items-center gap-2 transition-colors ${isLight
? "text-slate-700 hover:bg-slate-50 hover:text-indigo-600"
: "text-slate-300 hover:bg-white/5 hover:text-white"
}`}
>
<Eye className="w-4 h-4" />
View in Shopify
</button>
<button
onClick={() => handleCopyProductId(openMenuId)}
className={`w-full px-4 py-2.5 text-left text-sm font-medium flex items-center gap-2 transition-colors ${isLight
? "text-slate-700 hover:bg-slate-50 hover:text-indigo-600"
: "text-slate-300 hover:bg-white/5 hover:text-white"
}`}
>
<Copy className="w-4 h-4" />
Copy Product ID
</button>
<button
onClick={() => handleRefreshProduct()}
className={`w-full px-4 py-2.5 text-left text-sm font-medium flex items-center gap-2 transition-colors ${isLight
? "text-slate-700 hover:bg-slate-50 hover:text-indigo-600"
: "text-slate-300 hover:bg-white/5 hover:text-white"
}`}
>
<RefreshCw className="w-4 h-4" />
Refresh Product
</button>
{storeDomain && product.handle && (
<>
<div className={`border-t ${isLight ? "border-slate-100" : "border-white/5"}`} />
<a
href={`https://${storeDomain}/products/${product.handle}`}
target="_blank"
rel="noopener noreferrer"
onClick={onClose}
className={`w-full px-4 py-2.5 text-left text-sm font-medium flex items-center gap-2 transition-colors ${isLight
? "text-slate-700 hover:bg-slate-50 hover:text-indigo-600"
: "text-slate-300 hover:bg-white/5 hover:text-white"
}`}
>
<ExternalLink className="w-4 h-4" />
View on Storefront
</a>
</>
)}
</div>
</motion.div>
);
}

516
src/app/dashboard/juno-engine/email-templates/page.tsx
View File

@ -205,8 +205,8 @@ export default function EmailTemplatesPage() {
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className={`w-full h-10 md:h-11 pl-10 md:pl-11 pr-4 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/30 transition-all text-sm font-medium ${isLight
? "bg-white border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
: "bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500/50"
? "bg-white border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
: "bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500/50"
}`}
/>
</div>
@ -245,8 +245,8 @@ export default function EmailTemplatesPage() {
type="button"
onClick={() => startEditTemplate(template)}
className={`backdrop-blur-xl p-4 md:p-6 rounded-xl md:rounded-2xl border transition-all group text-left ${isLight
? "bg-white border-slate-200 hover:bg-slate-50 hover:border-indigo-300 shadow-sm"
: "bg-white/5 border-white/10 hover:bg-white/[0.07] hover:border-indigo-500/30"
? "bg-white border-slate-200 hover:bg-slate-50 hover:border-indigo-300 shadow-sm"
: "bg-white/5 border-white/10 hover:bg-white/[0.07] hover:border-indigo-500/30"
}`}
>
<div className="flex items-start justify-between mb-4">
@ -300,272 +300,276 @@ export default function EmailTemplatesPage() {
</div>
</div>
<AnimatePresence>
{editing && mounted && createPortal(
<div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none p-4">
{/* Backdrop */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => !saving && setEditing(null)}
className={`absolute inset-0 pointer-events-auto backdrop-blur-sm ${isLight ? "bg-black/40" : "bg-black/60"
}`}
/>
{mounted && createPortal(
<AnimatePresence>
{editing && (
<div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none p-4">
{/* Backdrop */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
key="backdrop"
onClick={() => !saving && setEditing(null)}
className={`absolute inset-0 pointer-events-auto backdrop-blur-sm ${isLight ? "bg-black/40" : "bg-black/60"
}`}
/>
{/* Modal */}
<motion.div
initial={{ scale: 0.95, opacity: 0, y: 20 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.95, opacity: 0, y: 20 }}
className={`relative flex w-full max-h-[90vh] max-w-3xl flex-col rounded-2xl border shadow-2xl pointer-events-auto ${isLight
? "bg-white text-slate-900 border-slate-200"
: "bg-slate-900 text-slate-50 border-white/10"
}`}
>
<div
className={`flex items-center justify-between px-6 py-5 border-b ${isLight ? "border-slate-100" : "border-white/10"
{/* Modal */}
<motion.div
initial={{ scale: 0.95, opacity: 0, y: 20 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.95, opacity: 0, y: 20 }}
key="modal"
className={`relative flex w-full max-h-[90vh] max-w-3xl flex-col rounded-2xl border shadow-2xl pointer-events-auto ${isLight
? "bg-white text-slate-900 border-slate-200"
: "bg-slate-900 text-slate-50 border-white/10"
}`}
>
<div>
<h2 className="text-xl font-bold">
{editing.id ? "Edit template" : "New template"}
</h2>
<p
className={`mt-1 text-sm ${isLight ? "text-slate-500" : "text-slate-400"
}`}
>
Use {"{{variable}}"} placeholders to personalize replies.
</p>
</div>
<button
type="button"
onClick={() => setEditing(null)}
className={`w-10 h-10 rounded-xl flex items-center justify-center transition-colors ${isLight
? "bg-slate-100 hover:bg-slate-200 text-slate-600"
: "bg-white/10 hover:bg-white/15 text-slate-300"
<div
className={`flex items-center justify-between px-6 py-5 border-b ${isLight ? "border-slate-100" : "border-white/10"
}`}
>
<Plus className="w-5 h-5 rotate-45" />
</button>
</div>
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<div>
<label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Template Name
</label>
<input
type="text"
value={editing.name}
onChange={(e) =>
setEditing((prev) =>
prev
? { ...prev, name: e.target.value }
: prev,
)
}
placeholder="e.g. Shipping Update"
className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
}`}
/>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Intent
</label>
<select
value={editing.intent}
onChange={(e) =>
setEditing((prev) =>
prev
? {
...prev,
intent: e.target.value,
}
: prev,
)
}
className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
}`}
>
{INTENT_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
<div>
<label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Mood
</label>
<select
value={editing.mood}
onChange={(e) =>
setEditing((prev) =>
prev
? {
...prev,
mood: e.target.value,
}
: prev,
)
}
className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
}`}
>
{MOOD_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
</div>
<div>
<label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Description (optional)
</label>
<input
type="text"
value={editing.description || ""}
onChange={(e) =>
setEditing((prev) =>
prev
? {
...prev,
description: e.target.value,
}
: prev,
)
}
placeholder="Short summary for your team"
className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
}`}
/>
</div>
</div>
<div className={`p-4 rounded-2xl border ${isLight ? "bg-indigo-50/50 border-indigo-100" : "bg-indigo-500/5 border-indigo-500/10"
}`}>
<p className={`text-xs font-bold uppercase tracking-wider mb-3 ${isLight ? "text-indigo-600" : "text-indigo-400"
}`}>
Available variables
<div>
<h2 className="text-xl font-bold">
{editing.id ? "Edit template" : "New template"}
</h2>
<p
className={`mt-1 text-sm ${isLight ? "text-slate-500" : "text-slate-400"
}`}
>
Use {"{{variable}}"} placeholders to personalize replies.
</p>
<div className="grid grid-cols-1 gap-2">
{[
{ key: "{{customer_name}}", label: "Customer's name" },
{ key: "{{customer_email}}", label: "Customer's email" },
{ key: "{{store_name}}", label: "Store name" },
{ key: "{{ticket_summary}}", label: "Email summary" }
].map((v) => (
<div key={v.key} className="flex items-center justify-between text-[11px]">
<code className={`px-2 py-0.5 rounded font-mono font-bold ${isLight ? "bg-white border border-indigo-200 text-indigo-700" : "bg-white/10 text-indigo-300"
}`}>
{v.key}
</code>
<span className={isLight ? "text-slate-500" : "text-slate-400"}>{v.label}</span>
</div>
))}
</div>
</div>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between">
<label className={`block text-xs font-bold uppercase tracking-wider ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Template body
</label>
<span className={`text-[10px] ${isLight ? "text-slate-400" : "text-slate-500"}`}>
Markdown & HTML supported
</span>
</div>
<textarea
value={editing.body}
onChange={(e) =>
setEditing((prev) =>
prev ? { ...prev, body: e.target.value } : prev,
)
}
rows={8}
className={`w-full rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 p-4 font-mono text-xs leading-relaxed ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
}`}
/>
</div>
<div className="space-y-4">
<label className={`block text-xs font-bold uppercase tracking-wider ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Preview with example data
</label>
<div className={`rounded-xl border p-5 text-sm leading-relaxed whitespace-pre-wrap ${isLight
? "bg-slate-50 border-slate-200 text-slate-800"
: "bg-slate-950 border-white/5 text-slate-300 shadow-inner"
}`}>
{currentPreview || "Preview will appear here..."}
</div>
</div>
</div>
<div className={`px-6 py-4 border-t flex items-center justify-between ${isLight ? "border-slate-100 bg-slate-50/50" : "border-white/10 bg-white/[0.02]"
}`}>
<p className={`text-[11px] font-medium ${isLight ? "text-slate-500" : "text-slate-500"}`}>
Autosaved to your draft templates.
</p>
<div className="flex items-center gap-3">
<button
type="button"
onClick={() => setEditing(null)}
className={`h-10 px-6 rounded-xl font-bold transition-all border ${isLight
? "bg-white text-slate-700 hover:bg-slate-50 border-slate-200"
: "bg-white/10 text-slate-300 hover:bg-white/20 border-white/10"
className={`w-10 h-10 rounded-xl flex items-center justify-center transition-colors ${isLight
? "bg-slate-100 hover:bg-slate-200 text-slate-600"
: "bg-white/10 hover:bg-white/15 text-slate-300"
}`}
>
Cancel
</button>
<button
type="button"
disabled={saving}
onClick={() => void handleSave()}
className="h-10 px-6 bg-indigo-500 text-sm font-bold text-white hover:bg-indigo-600 border border-indigo-400/20 shadow-lg shadow-indigo-500/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 rounded-xl"
>
{saving ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
Saving...
</>
) : (
"Save template"
)}
<Plus className="w-5 h-5 rotate-45" />
</button>
</div>
</div>
</motion.div>
</div>,
document.body
)}
</AnimatePresence>
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<div>
<label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Template Name
</label>
<input
type="text"
value={editing.name}
onChange={(e) =>
setEditing((prev) =>
prev
? { ...prev, name: e.target.value }
: prev,
)
}
placeholder="e.g. Shipping Update"
className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
}`}
/>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Intent
</label>
<select
value={editing.intent}
onChange={(e) =>
setEditing((prev) =>
prev
? {
...prev,
intent: e.target.value,
}
: prev,
)
}
className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
}`}
>
{INTENT_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
<div>
<label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Mood
</label>
<select
value={editing.mood}
onChange={(e) =>
setEditing((prev) =>
prev
? {
...prev,
mood: e.target.value,
}
: prev,
)
}
className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
}`}
>
{MOOD_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
</div>
<div>
<label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Description (optional)
</label>
<input
type="text"
value={editing.description || ""}
onChange={(e) =>
setEditing((prev) =>
prev
? {
...prev,
description: e.target.value,
}
: prev,
)
}
placeholder="Short summary for your team"
className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
}`}
/>
</div>
</div>
<div className={`p-4 rounded-2xl border ${isLight ? "bg-indigo-50/50 border-indigo-100" : "bg-indigo-500/5 border-indigo-500/10"
}`}>
<p className={`text-xs font-bold uppercase tracking-wider mb-3 ${isLight ? "text-indigo-600" : "text-indigo-400"
}`}>
Available variables
</p>
<div className="grid grid-cols-1 gap-2">
{[
{ key: "{{customer_name}}", label: "Customer's name" },
{ key: "{{customer_email}}", label: "Customer's email" },
{ key: "{{store_name}}", label: "Store name" },
{ key: "{{ticket_summary}}", label: "Email summary" }
].map((v) => (
<div key={v.key} className="flex items-center justify-between text-[11px]">
<code className={`px-2 py-0.5 rounded font-mono font-bold ${isLight ? "bg-white border border-indigo-200 text-indigo-700" : "bg-white/10 text-indigo-300"
}`}>
{v.key}
</code>
<span className={isLight ? "text-slate-500" : "text-slate-400"}>{v.label}</span>
</div>
))}
</div>
</div>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between">
<label className={`block text-xs font-bold uppercase tracking-wider ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Template body
</label>
<span className={`text-[10px] ${isLight ? "text-slate-400" : "text-slate-500"}`}>
Markdown & HTML supported
</span>
</div>
<textarea
value={editing.body}
onChange={(e) =>
setEditing((prev) =>
prev ? { ...prev, body: e.target.value } : prev,
)
}
rows={8}
className={`w-full rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 p-4 font-mono text-xs leading-relaxed ${isLight
? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
: "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
}`}
/>
</div>
<div className="space-y-4">
<label className={`block text-xs font-bold uppercase tracking-wider ${isLight ? "text-slate-500" : "text-slate-400"
}`}>
Preview with example data
</label>
<div className={`rounded-xl border p-5 text-sm leading-relaxed whitespace-pre-wrap ${isLight
? "bg-slate-50 border-slate-200 text-slate-800"
: "bg-slate-950 border-white/5 text-slate-300 shadow-inner"
}`}>
{currentPreview || "Preview will appear here..."}
</div>
</div>
</div>
<div className={`px-6 py-4 border-t flex items-center justify-between ${isLight ? "border-slate-100 bg-slate-50/50" : "border-white/10 bg-white/[0.02]"
}`}>
<p className={`text-[11px] font-medium ${isLight ? "text-slate-500" : "text-slate-500"}`}>
Autosaved to your draft templates.
</p>
<div className="flex items-center gap-3">
<button
type="button"
onClick={() => setEditing(null)}
className={`h-10 px-6 rounded-xl font-bold transition-all border ${isLight
? "bg-white text-slate-700 hover:bg-slate-50 border-slate-200"
: "bg-white/10 text-slate-300 hover:bg-white/20 border-white/10"
}`}
>
Cancel
</button>
<button
type="button"
disabled={saving}
onClick={() => void handleSave()}
className="h-10 px-6 bg-indigo-500 text-sm font-bold text-white hover:bg-indigo-600 border border-indigo-400/20 shadow-lg shadow-indigo-500/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 rounded-xl"
>
{saving ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
Saving...
</>
) : (
"Save template"
)}
</button>
</div>
</div>
</motion.div>
</div>
)}
</AnimatePresence>,
document.body
)}
</div>
)
}

79
src/app/dashboard/juno-engine/knowledge-base/page.tsx
View File

@ -4,32 +4,36 @@ import { useEffect, useState } from "react"
import { DocumentsSection } from "@/components/kb/DocumentsSection"
import { FaqSection } from "@/components/kb/FaqSection"
import { AskSection } from "@/components/kb/AskSection"
import { useTheme } from "@/components/ThemeProvider"
import { cn } from "@/lib/utils"
export default function KnowledgeBasePage() {
const { theme } = useTheme()
const isLight = theme === "light"
const [activeStoreId, setActiveStoreId] = useState<string | null>(null)
useEffect(() => {
let cancelled = false
;(async () => {
try {
const res = await fetch("/api/stores")
if (!res.ok) return
; (async () => {
try {
const res = await fetch("/api/stores")
if (!res.ok) return
const data = (await res.json()) as {
stores?: { id: string; isActive: boolean }[]
}
const active = (data.stores || []).find((s) => s.isActive)
const data = (await res.json()) as {
stores?: { id: string; isActive: boolean }[]
}
const active = (data.stores || []).find((s) => s.isActive)
if (!cancelled) {
setActiveStoreId(active?.id ?? null)
if (!cancelled) {
setActiveStoreId(active?.id ?? null)
}
} catch {
if (!cancelled) {
setActiveStoreId(null)
}
}
} catch {
if (!cancelled) {
setActiveStoreId(null)
}
}
})()
})()
return () => {
cancelled = true
@ -46,10 +50,10 @@ export default function KnowledgeBasePage() {
<div className="flex flex-col h-full space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-white">
<h1 className={cn("text-2xl font-bold", isLight ? "text-slate-900" : "text-white")}>
Knowledge Base
</h1>
<p className="text-sm text-slate-400">
<p className={cn("text-sm", isLight ? "text-slate-500" : "text-slate-400")}>
Centralize your store&apos;s documents and FAQs so JUNO can
answer customer and vendor questions.
</p>
@ -59,10 +63,10 @@ export default function KnowledgeBasePage() {
{!hasStore ? (
<div className="flex-1 flex items-center justify-center">
<div className="text-center max-w-md">
<h2 className="text-lg font-semibold text-white mb-2">
<h2 className={cn("text-lg font-semibold mb-2", isLight ? "text-slate-900" : "text-white")}>
No active store selected
</h2>
<p className="text-sm text-slate-400">
<p className={cn("text-sm", isLight ? "text-slate-500" : "text-slate-400")}>
Select a store from the top bar to manage its knowledge
base.
</p>
@ -70,37 +74,46 @@ export default function KnowledgeBasePage() {
</div>
) : (
<>
<div className="flex items-center space-x-2 border-b border-white/10">
<div className={cn("flex items-center space-x-2 border-b", isLight ? "border-slate-100" : "border-white/10")}>
<button
type="button"
onClick={() => setActiveTab("documents")}
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
className={cn(
"px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
activeTab === "documents"
? "border-indigo-500 text-white"
: "border-transparent text-slate-400 hover:text-white hover:border-slate-500"
}`}
? "border-indigo-500 text-indigo-600"
: isLight
? "border-transparent text-slate-500 hover:text-slate-900 hover:border-slate-300"
: "border-transparent text-slate-400 hover:text-white hover:border-slate-500"
)}
>
Documents
</button>
<button
type="button"
onClick={() => setActiveTab("faqs")}
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
className={cn(
"px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
activeTab === "faqs"
? "border-indigo-500 text-white"
: "border-transparent text-slate-400 hover:text-white hover:border-slate-500"
}`}
? "border-indigo-500 text-indigo-600"
: isLight
? "border-transparent text-slate-500 hover:text-slate-900 hover:border-slate-300"
: "border-transparent text-slate-400 hover:text-white hover:border-slate-500"
)}
>
FAQs
</button>
<button
type="button"
onClick={() => setActiveTab("ask")}
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
className={cn(
"px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
activeTab === "ask"
? "border-indigo-500 text-white"
: "border-transparent text-slate-400 hover:text-white hover:border-slate-500"
}`}
? "border-indigo-500 text-indigo-600"
: isLight
? "border-transparent text-slate-500 hover:text-slate-900 hover:border-slate-300"
: "border-transparent text-slate-400 hover:text-white hover:border-slate-500"
)}
>
Ask
</button>

59
src/app/dashboard/juno-engine/layout.tsx
View File

@ -1,10 +1,10 @@
"use client"
import { useRouter, usePathname } from "next/navigation"
import {
Ticket,
Flag,
Mail,
import {
Ticket,
Flag,
Mail,
FileText,
HelpCircle
} from "lucide-react"
@ -18,30 +18,30 @@ export default function JunoEngineLayout({
const pathname = usePathname()
const tabs = [
{
label: "Knowledge Base",
href: "/dashboard/juno-engine/knowledge-base",
icon: HelpCircle
{
label: "Knowledge Base",
href: "/dashboard/juno-engine/knowledge-base",
icon: HelpCircle
},
{
label: "Templates",
href: "/dashboard/juno-engine/email-templates",
icon: FileText
{
label: "Templates",
href: "/dashboard/juno-engine/email-templates",
icon: FileText
},
{
label: "Tickets",
href: "/dashboard/juno-engine/tickets",
icon: Ticket
{
label: "Tickets",
href: "/dashboard/juno-engine/tickets",
icon: Ticket
},
{
label: "Flagged Emails",
href: "/dashboard/juno-engine/flagged-email",
icon: Flag
{
label: "Flagged Emails",
href: "/dashboard/juno-engine/flagged-email",
icon: Flag
},
{
label: "Gmail",
href: "/dashboard/juno-engine/gmail-connect",
icon: Mail
{
label: "Gmail",
href: "/dashboard/juno-engine/gmail-connect",
icon: Mail
},
]
@ -62,14 +62,13 @@ export default function JunoEngineLayout({
<button
key={tab.href}
onClick={() => router.push(tab.href)}
className={`pb-3 md:pb-4 px-3 md:px-4 font-bold transition-all duration-200 ease-out whitespace-nowrap text-sm md:text-base flex items-center gap-2 relative ${
isActive
? "text-indigo-400 border-b-2 border-indigo-500"
className={`pb-3 md:pb-4 px-3 md:px-4 font-bold transition-all duration-200 ease-out whitespace-nowrap text-sm md:text-base flex items-center gap-2 relative ${isActive
? "text-indigo-400 border-b-2 border-indigo-500"
: "text-slate-400 hover:text-white"
}`}
}`}
>
<Icon className="w-4 h-4 transition-transform duration-200" />
{tab.label}
<Icon className="w-4 h-5 md:w-5 md:h-5 transition-transform duration-200" />
<span className="hidden sm:inline">{tab.label}</span>
</button>
)
})}

295
src/app/dashboard/juno-engine/tickets/[ticketId]/page.tsx
View File

@ -3,6 +3,7 @@
import { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import { ArrowLeft, Ticket, Loader2, MoreHorizontal } from "lucide-react"
import { cn } from "@/lib/utils"
type TicketStatus = "open" | "pending" | "resolved" | "closed"
@ -27,9 +28,13 @@ interface TicketData {
messages: TicketMessage[]
}
import { useTheme } from "@/components/ThemeProvider"
export default function TicketDetailPage() {
const params = useParams<{ ticketId: string }>()
const router = useRouter()
const { theme } = useTheme()
const isLight = theme === "light"
const [ticket, setTicket] = useState<TicketData | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
@ -69,65 +74,86 @@ export default function TicketDetailPage() {
const getStatusStyles = (status: TicketStatus | string) => {
switch (status) {
case "open":
return "bg-blue-500/20 text-blue-400"
return isLight ? "bg-blue-100 text-blue-700 border-blue-200" : "bg-blue-500/20 text-blue-400 border-blue-500/20"
case "pending":
return "bg-yellow-500/20 text-yellow-400"
return isLight ? "bg-amber-100 text-amber-700 border-amber-200" : "bg-yellow-500/20 text-yellow-400 border-yellow-500/20"
case "resolved":
return "bg-emerald-500/20 text-emerald-400"
return isLight ? "bg-emerald-100 text-emerald-700 border-emerald-200" : "bg-emerald-500/20 text-emerald-400 border-emerald-500/20"
case "closed":
return "bg-slate-500/20 text-slate-400"
return isLight ? "bg-slate-100 text-slate-700 border-slate-200" : "bg-slate-500/20 text-slate-400 border-slate-500/20"
default:
return "bg-white/10 text-slate-400"
return isLight ? "bg-slate-50 text-slate-600 border-slate-200" : "bg-white/10 text-slate-400 border-white/10"
}
}
return (
<div className="h-full flex flex-col space-y-4 md:space-y-6">
{/* Header */}
<div className="flex items-center gap-3 flex-shrink-0">
<button
onClick={() => router.push("/dashboard/juno-engine/tickets")}
className="inline-flex items-center justify-center w-9 h-9 rounded-full border border-white/10 bg-white/5 text-slate-300 hover:bg-white/10 hover:text-white transition-all"
>
<ArrowLeft className="w-4 h-4" />
</button>
<div>
<h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
{ticket?.subject || "Ticket"}
</h1>
<p className="text-sm md:text-base text-slate-400 mt-1">
{ticket?.customerEmail || "Full automated email history for this customer."}
</p>
<div className={cn("h-full flex flex-col min-h-0", isLight ? "bg-slate-50/50" : "")}>
<div className="w-full px-4 md:px-8 py-4 md:py-6 flex flex-col gap-6 min-h-0 h-full">
{/* Header */}
<div className="flex items-center gap-4 flex-shrink-0">
<button
onClick={() => router.push("/dashboard/juno-engine/tickets")}
className={cn(
"inline-flex items-center justify-center w-10 h-10 rounded-full border transition-all shadow-sm",
isLight
? "border-slate-200 bg-white text-slate-600 hover:bg-slate-50 hover:text-indigo-600"
: "border-white/10 bg-white/5 text-slate-300 hover:bg-white/10 hover:text-white"
)}
title="Go back"
>
<ArrowLeft className="w-5 h-5" />
</button>
<div className="min-w-0">
<h1 className={cn(
"text-2xl md:text-3xl font-black tracking-tight truncate",
isLight ? "text-slate-900" : "text-white"
)}>
{ticket?.subject || "Ticket"}
</h1>
<p className={cn(
"text-sm mt-0.5 truncate font-medium",
isLight ? "text-slate-500" : "text-slate-400"
)}>
{ticket?.customerEmail || "Full automated email history for this customer."}
</p>
</div>
</div>
</div>
{loading ? (
<div className="flex-1 flex flex-col items-center justify-center text-slate-400 gap-3">
<Loader2 className="w-8 h-8 animate-spin text-indigo-400" />
<p className="font-medium animate-pulse">Loading ticket...</p>
</div>
) : error || !ticket ? (
<div className="flex-1 flex flex-col items-center justify-center text-red-400 gap-3 text-center px-4">
<p className="font-medium">{error || "Ticket not found."}</p>
</div>
) : (
<div className="flex-1 overflow-y-auto min-h-0">
<div className="max-w-4xl mx-auto px-2 md:px-0 space-y-4">
{loading ? (
<div className="flex-1 flex flex-col items-center justify-center text-slate-400 gap-3">
<Loader2 className="w-8 h-8 animate-spin text-indigo-400" />
<p className="font-medium animate-pulse">Loading ticket...</p>
</div>
) : error || !ticket ? (
<div className="flex-1 flex flex-col items-center justify-center text-red-400 gap-3 text-center px-4">
<p className="font-medium">{error || "Ticket not found."}</p>
</div>
) : (
<div className="flex-1 flex flex-col min-h-0 gap-8">
{/* Meta badges */}
<div className="flex flex-wrap items-center justify-between gap-3 text-xs">
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center justify-between gap-4 text-xs flex-shrink-0">
<div className="flex flex-wrap items-center gap-3">
<span
className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider ${getStatusStyles(
ticket.status as TicketStatus
)}`}
className={cn(
"px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider shadow-sm border",
getStatusStyles(ticket.status as TicketStatus)
)}
>
{ticket.status}
</span>
<span className="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-white/5 text-slate-300 border border-white/10">
<span className={cn(
"px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider shadow-sm border",
isLight
? "bg-white border-slate-200 text-slate-600"
: "bg-white/5 border-white/10 text-slate-300"
)}>
{ticket.messagesCount} messages
</span>
</div>
<div className="text-[11px] text-slate-500">
<div className={cn(
"text-[11px] font-bold",
isLight ? "text-slate-400" : "text-slate-500"
)}>
Updated{" "}
{new Date(ticket.updatedAt).toLocaleString(undefined, {
dateStyle: "medium",
@ -136,97 +162,124 @@ export default function TicketDetailPage() {
</div>
</div>
{/* Conversation timeline - chat style */}
<div className="pt-2 space-y-4">
{ticket.messages.map((message) => {
const isIncoming =
message.trigger === "GMAIL_INCOMING" || message.status === "RECEIVED"
{/* Conversation timeline - Full width corners chat style */}
<div className="flex-1 overflow-y-auto min-h-0 pr-4 -mr-4 space-y-8 pb-10 custom-scrollbar">
{ticket.messages.map((message) => {
const isIncoming =
message.trigger === "GMAIL_INCOMING" || message.status === "RECEIVED"
const fullText = message.bodyPreview || ""
const lines = fullText.split(/\r?\n/)
const isExpanded = !!expandedMessages[message.id]
const hasMore = lines.length > 2
const displayText =
isExpanded || !hasMore ? fullText : lines.slice(0, 2).join("\n")
const fullText = message.bodyPreview || ""
const lines = fullText.split(/\r?\n/)
const isExpanded = !!expandedMessages[message.id]
const hasMore = lines.length > 2
const displayText =
isExpanded || !hasMore ? fullText : lines.slice(0, 2).join("\n")
return (
return (
<div
key={message.id}
className={cn(
"flex w-full animate-in fade-in slide-in-from-bottom-4 duration-500",
isIncoming ? "justify-start" : "justify-end"
)}
>
<div
key={message.id}
className={`flex w-full ${isIncoming ? "justify-start" : "justify-end"}`}
className={cn(
"w-full sm:max-w-[70%] lg:max-w-[60%] xl:max-w-[50%] rounded-2xl p-6 text-[14px] shadow-xl flex flex-col gap-3 relative transition-all border",
isIncoming
? isLight
? "bg-white border-slate-200 text-slate-700 rounded-bl-none shadow-slate-200/50"
: "bg-slate-800/40 border-white/10 text-slate-200 rounded-bl-none backdrop-blur-md shadow-black/20"
: isLight
? "bg-indigo-600 border-indigo-500 text-white rounded-br-none shadow-indigo-100"
: "bg-indigo-600 border-indigo-400/30 text-white rounded-br-none shadow-indigo-900/20"
)}
>
<div
className={`w-full sm:max-w-[88%] rounded-2xl px-4 py-3 text-xs shadow-sm flex flex-col gap-1
${
<div className="flex items-center justify-between gap-6 mb-1">
<div className="flex items-center gap-3">
<span className={cn(
"text-[11px] font-black uppercase tracking-widest",
isIncoming
? "bg-slate-900/70 border border-white/10 rounded-bl-sm"
: "bg-indigo-500/90 border border-indigo-300/60 text-white rounded-br-sm"
}`}
>
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<span className="text-[10px] font-semibold uppercase tracking-wide opacity-80">
{isIncoming ? "Customer" : "JUNOHUB"}
</span>
<span
className={`px-2 py-0.5 rounded-full text-[9px] font-semibold tracking-wide
${
isIncoming
? "bg-slate-800/80 text-slate-200 border border-white/10"
: "bg-indigo-600/90 text-indigo-50 border border-indigo-300/70"
}`}
>
{message.status}
</span>
</div>
<span className="text-[10px] text-slate-400 whitespace-nowrap">
{new Date(message.sentAt).toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
})}
? (isLight ? "text-indigo-600" : "text-indigo-400")
: "text-indigo-100"
)}>
{isIncoming ? "Customer" : "JUNOHUB"}
</span>
<span
className={cn(
"px-2.5 py-0.5 rounded-md text-[9px] font-black tracking-widest uppercase border",
isIncoming
? isLight
? "bg-slate-100 border-slate-200 text-slate-500"
: "bg-slate-700/50 text-slate-400 border-white/5"
: isLight
? "bg-indigo-800/20 border-indigo-400/30 text-indigo-100"
: "bg-indigo-700/50 text-indigo-50 border-indigo-400/30"
)}
>
{message.status}
</span>
</div>
{fullText && (
<p
className={`mt-0.5 leading-snug whitespace-pre-wrap break-words ${
isIncoming ? "text-slate-200" : "text-indigo-50"
}`}
>
{displayText}
</p>
)}
{hasMore && (
<button
type="button"
onClick={() =>
setExpandedMessages((prev) => ({
...prev,
[message.id]: !isExpanded,
}))
}
className={`self-end mt-1 text-[10px] font-medium underline underline-offset-2 ${
isIncoming ? "text-slate-300" : "text-indigo-100"
}`}
>
{isExpanded ? "Show less" : "Show more"}
</button>
)}
<span className={cn(
"text-[10px] whitespace-nowrap font-bold",
isIncoming
? (isLight ? "text-slate-400" : "text-slate-500")
: "text-indigo-200"
)}>
{new Date(message.sentAt).toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
})}
</span>
</div>
</div>
)
})}
{ticket.messages.length === 0 && (
<p className="text-[11px] text-slate-500 text-center">
No messages logged yet for this ticket.
</p>
)}
{fullText && (
<p
className={cn(
"leading-relaxed whitespace-pre-wrap break-words font-medium",
isIncoming
? (isLight ? "text-slate-600" : "text-slate-200")
: "text-white"
)}
>
{displayText}
</p>
)}
{hasMore && (
<button
type="button"
onClick={() =>
setExpandedMessages((prev) => ({
...prev,
[message.id]: !isExpanded,
}))
}
className={cn(
"self-start mt-2 text-[10px] font-black uppercase tracking-widest hover:underline transition-all",
isIncoming
? (isLight ? "text-indigo-600" : "text-indigo-400")
: "text-indigo-100"
)}
>
{isExpanded ? "Show less" : "Show more"}
</button>
)}
</div>
</div>
)
})}
{ticket.messages.length === 0 && (
<div className="flex flex-col items-center justify-center py-20 text-slate-500">
<Ticket className="w-12 h-12 mb-4 opacity-10" />
<p className="text-sm font-medium">No messages logged yet for this ticket.</p>
</div>
)}
</div>
</div>
</div>
)}
)}
</div>
</div>
)
}

306
src/app/dashboard/page.tsx
View File

@ -7,7 +7,9 @@ import {
ShoppingCart,
Users,
ArrowUpRight,
Loader2
Loader2,
Calendar,
ChevronDown
} from "lucide-react"
import {
XAxis,
@ -18,8 +20,14 @@ import {
AreaChart,
Area
} from "recharts"
import { useTheme } from "@/components/ThemeProvider"
import { cn } from "@/lib/utils"
type TimeRange = "7days" | "30days" | "1year"
export default function DashboardPage() {
const { theme } = useTheme()
const isLight = theme === "light"
const [stats, setStats] = useState([
{ label: "Total Sales", value: "$0.00", icon: TrendingUp, color: "text-indigo-600", bg: "bg-indigo-100" },
{ label: "Active Products", value: "0", icon: Package, color: "text-emerald-600", bg: "bg-emerald-100" },
@ -28,92 +36,179 @@ export default function DashboardPage() {
])
const [chartData, setChartData] = useState<{ date: string; amount: number }[]>([])
const [loading, setLoading] = useState(true)
const [timeRange, setTimeRange] = useState<TimeRange>("7days")
const fetchDashboardData = async () => {
try {
setLoading(true)
const [productsRes, ordersRes, customersRes] = await Promise.all([
fetch("/api/shopify/inventory").catch(() => ({ ok: false, json: async () => ({ products: [], message: "Failed to fetch products" }) })),
fetch("/api/shopify/orders").catch(() => ({ ok: false, json: async () => ({ orders: [], message: "Failed to fetch orders" }) })),
fetch("/api/shopify/customers").catch(() => ({ ok: false, json: async () => ({ customers: [], message: "Failed to fetch customers" }) }))
])
const [productsData, ordersData, customersData] = await Promise.all([
productsRes.json().catch(() => ({ products: [] })),
ordersRes.json().catch(() => ({ orders: [] })),
customersRes.json().catch(() => ({ customers: [] }))
])
const orders = ordersData.orders || []
const totalSales = orders.reduce((sum: number, order: { total_price?: string }) => sum + parseFloat(order.total_price ?? "0"), 0) || 0
// Helper to generate date range
const generateDateRange = (range: TimeRange) => {
const dates = []
const now = new Date()
if (range === "1year") {
for (let i = 11; i >= 0; i--) {
const d = new Date(now.getFullYear(), now.getMonth() - i, 1)
dates.push(d.toLocaleDateString("en-US", { month: "short", year: "2-digit" }))
}
} else {
const count = range === "30days" ? 30 : 7
for (let i = count - 1; i >= 0; i--) {
const d = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i)
dates.push(d.toLocaleDateString("en-US", { month: "short", day: "numeric" }))
}
}
return dates
}
const rangeLabels = generateDateRange(timeRange)
const salesByDate: Record<string, number> = {}
orders.forEach((order: { created_at?: string; total_price?: string }) => {
const orderDate = new Date(order.created_at ?? "")
let label = ""
if (timeRange === "1year") {
label = orderDate.toLocaleDateString("en-US", { month: "short", year: "2-digit" })
} else {
label = orderDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })
}
if (rangeLabels.includes(label)) {
salesByDate[label] = (salesByDate[label] || 0) + parseFloat(order.total_price ?? "0")
}
})
const processedChartData = rangeLabels.map(date => ({
date,
amount: Math.round((salesByDate[date] || 0) * 100) / 100
}))
setChartData(processedChartData)
setStats([
{ label: "Total Sales", value: `$${totalSales.toLocaleString()}`, icon: TrendingUp, color: "text-indigo-600", bg: "bg-indigo-100" },
{ label: "Active Products", value: productsData.products?.length.toString() || "0", icon: Package, color: "text-emerald-600", bg: "bg-emerald-100" },
{ label: "Total Orders", value: orders.length.toString() || "0", icon: ShoppingCart, color: "text-blue-600", bg: "bg-blue-100" },
{ label: "Customers", value: customersData.customers?.length.toString() || "0", icon: Users, color: "text-orange-600", bg: "bg-orange-100" },
])
} catch (error) {
console.error("Dashboard stats fetch error:", error)
} finally {
setLoading(false)
}
}
useEffect(() => {
const fetchDashboardData = async () => {
try {
const [productsRes, ordersRes, customersRes] = await Promise.all([
fetch("/api/shopify/inventory").catch(() => ({ ok: false, json: async () => ({ products: [], message: "Failed to fetch products" }) })),
fetch("/api/shopify/orders").catch(() => ({ ok: false, json: async () => ({ orders: [], message: "Failed to fetch orders" }) })),
fetch("/api/shopify/customers").catch(() => ({ ok: false, json: async () => ({ customers: [], message: "Failed to fetch customers" }) }))
])
const [productsData, ordersData, customersData] = await Promise.all([
productsRes.json().catch(() => ({ products: [] })),
ordersRes.json().catch(() => ({ orders: [] })),
customersRes.json().catch(() => ({ customers: [] }))
])
// Check for error messages
if (productsData.message && !productsRes.ok) {
console.warn("Products fetch error:", productsData.message)
}
if (ordersData.message && !ordersRes.ok) {
console.warn("Orders fetch error:", ordersData.message)
}
if (customersData.message && !customersRes.ok) {
console.warn("Customers fetch error:", customersData.message)
}
const orders = ordersData.orders || []
const totalSales = orders.reduce((sum: number, order: { total_price?: string }) => sum + parseFloat(order.total_price ?? "0"), 0) || 0
// Process chart data (Recent 7 days sales)
const salesByDate: Record<string, number> = {}
orders.forEach((order: { created_at?: string; total_price?: string }) => {
const date = new Date(order.created_at ?? "").toLocaleDateString("en-US", { month: "short", day: "numeric" })
salesByDate[date] = (salesByDate[date] || 0) + parseFloat(order.total_price ?? "0")
})
const processedChartData = Object.entries(salesByDate)
.map(([date, amount]) => ({ date, amount }))
.slice(-7) // Last 7 days
setChartData(processedChartData)
setStats([
{ label: "Total Sales", value: `$${totalSales.toLocaleString()}`, icon: TrendingUp, color: "text-indigo-600", bg: "bg-indigo-100" },
{ label: "Active Products", value: productsData.products?.length.toString() || "0", icon: Package, color: "text-emerald-600", bg: "bg-emerald-100" },
{ label: "Total Orders", value: orders.length.toString() || "0", icon: ShoppingCart, color: "text-blue-600", bg: "bg-blue-100" },
{ label: "Customers", value: customersData.customers?.length.toString() || "0", icon: Users, color: "text-orange-600", bg: "bg-orange-100" },
])
} catch (error) {
console.error("Dashboard stats fetch error:", error)
} finally {
setLoading(false)
}
}
fetchDashboardData()
}, [])
}, [timeRange])
const statCardStyle: Record<string, { bg: string; icon: string }> = {
"Total Sales": { bg: "bg-indigo-500/20 border-indigo-400/30", icon: "text-indigo-400" },
"Active Products": { bg: "bg-emerald-500/20 border-emerald-400/30", icon: "text-emerald-400" },
"Total Orders": { bg: "bg-blue-500/20 border-blue-400/30", icon: "text-blue-400" },
"Customers": { bg: "bg-orange-500/20 border-orange-400/30", icon: "text-orange-400" },
const statCardStyle: Record<string, { bg: string; icon: string; lightBg: string; lightIcon: string }> = {
"Total Sales": {
bg: "bg-indigo-500/20 border-indigo-400/30",
icon: "text-indigo-400",
lightBg: "bg-indigo-50 border-indigo-100",
lightIcon: "text-indigo-600"
},
"Active Products": {
bg: "bg-emerald-500/20 border-emerald-400/30",
icon: "text-emerald-400",
lightBg: "bg-emerald-50 border-emerald-100",
lightIcon: "text-emerald-600"
},
"Total Orders": {
bg: "bg-blue-500/20 border-blue-400/30",
icon: "text-blue-400",
lightBg: "bg-blue-50 border-blue-100",
lightIcon: "text-blue-600"
},
"Customers": {
bg: "bg-orange-500/20 border-orange-400/30",
icon: "text-orange-400",
lightBg: "bg-orange-50 border-orange-100",
lightIcon: "text-orange-600"
},
}
return (
<div className="space-y-6 md:space-y-8">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">Overview</h1>
<p className="text-sm md:text-base text-slate-400 mt-1">Welcome back! Here&apos;s a quick look at your live Shopify stats.</p>
<h1 className={cn("text-2xl md:text-3xl font-extrabold tracking-tight", isLight ? "text-slate-900" : "text-white")}>
Overview
</h1>
<p className={cn("text-sm md:text-base mt-1", isLight ? "text-slate-500" : "text-slate-400")}>
Welcome back! Here&apos;s a quick look at your live Shopify stats.
</p>
</div>
<div className="flex items-center gap-3">
<div className="relative group">
<select
value={timeRange}
onChange={(e) => setTimeRange(e.target.value as TimeRange)}
className={cn(
"appearance-none h-11 pl-10 pr-10 rounded-xl font-bold border transition-all text-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500/20",
isLight
? "bg-white border-slate-200 text-slate-700 hover:border-slate-300 shadow-sm"
: "bg-white/10 border-white/10 text-white hover:bg-white/15 backdrop-blur-sm"
)}
>
<option value="7days">Last 7 Days</option>
<option value="30days">Last 1 Month</option>
<option value="1year">Last 1 Year</option>
</select>
<Calendar className={cn("absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4", isLight ? "text-slate-400" : "text-slate-400")} />
<ChevronDown className={cn("absolute right-3.5 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none", isLight ? "text-slate-400" : "text-slate-400")} />
</div>
<button className={cn(
"h-11 px-4 md:px-6 rounded-xl font-bold flex items-center justify-center gap-2 border transition-all text-sm md:text-base shrink-0",
isLight
? "bg-indigo-600 text-white border-indigo-700 hover:bg-indigo-700 shadow-sm"
: "bg-white/10 text-white border-white/10 hover:bg-white/15 backdrop-blur-sm"
)}>
Export <ArrowUpRight className="hidden sm:block w-4 h-4" />
</button>
</div>
<button className="h-11 px-4 md:px-6 bg-white/10 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-white/15 border border-white/10 backdrop-blur-sm transition-all text-sm md:text-base shrink-0">
Export Report <ArrowUpRight className="w-4 h-4" />
</button>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
{stats.map((stat: (typeof stats)[number]) => (
<div key={stat.label} className="bg-white/5 backdrop-blur-xl p-4 md:p-6 rounded-xl md:rounded-2xl border border-white/10 flex items-center gap-4 md:gap-6 hover:bg-white/[0.07] transition-colors">
<div className={`w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl border ${statCardStyle[stat.label]?.bg ?? "bg-indigo-500/20 border-indigo-400/30"} flex items-center justify-center shrink-0 ${statCardStyle[stat.label]?.icon ?? "text-indigo-400"}`}>
<div key={stat.label} className={cn(
"p-4 md:p-6 rounded-xl md:rounded-2xl border flex items-center gap-4 md:gap-6 transition-all hover:translate-y-[-2px]",
isLight
? "bg-white border-slate-100 shadow-sm hover:shadow-md"
: "bg-white/5 border-white/10 backdrop-blur-xl hover:bg-white/[0.07]"
)}>
<div className={cn(
"w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl border flex items-center justify-center shrink-0 shadow-inner",
isLight ? statCardStyle[stat.label]?.lightBg : statCardStyle[stat.label]?.bg,
isLight ? statCardStyle[stat.label]?.lightIcon : statCardStyle[stat.label]?.icon
)}>
{loading ? <Loader2 className="w-6 h-6 md:w-7 md:h-7 animate-spin" /> : <stat.icon className="w-6 h-6 md:w-7 md:h-7" />}
</div>
<div className="min-w-0 flex-1">
<p className="text-[10px] uppercase font-bold text-slate-400 tracking-widest">{stat.label}</p>
<p className={`text-xl md:text-2xl font-black text-white tracking-tight truncate ${loading ? "animate-pulse opacity-50" : ""}`}>
<p className={cn("text-[10px] uppercase font-bold tracking-widest", isLight ? "text-slate-500" : "text-slate-400")}>
{stat.label}
</p>
<p className={cn(
"text-xl md:text-2xl font-black tracking-tight truncate",
isLight ? "text-slate-900" : "text-white",
loading && "animate-pulse opacity-50"
)}>
{stat.value}
</p>
</div>
@ -121,58 +216,95 @@ export default function DashboardPage() {
))}
</div>
<div className="bg-white/5 backdrop-blur-xl p-4 md:p-8 rounded-xl md:rounded-2xl border border-white/10">
<h3 className="text-lg md:text-xl font-bold text-white mb-4 md:mb-6 font-display">Recent Sales Trend</h3>
<div className="h-[250px] md:h-[300px] w-full">
<div className={cn(
"p-4 md:p-8 rounded-xl md:rounded-2xl border transition-all",
isLight ? "bg-white border-slate-100 shadow-sm" : "bg-white/5 border-white/10 backdrop-blur-xl"
)}>
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6 md:mb-8">
<div>
<h3 className={cn("text-lg md:text-xl font-bold font-display", isLight ? "text-slate-900" : "text-white")}>
Recent Sales Trend
</h3>
<p className={cn("text-xs mt-1", isLight ? "text-slate-500" : "text-slate-400")}>
Revenue analysis over time
</p>
</div>
<div className="flex items-center gap-2 bg-slate-100 dark:bg-white/5 p-1 rounded-lg w-fit">
{(["7days", "30days", "1year"] as const).map((r) => (
<button
key={r}
onClick={() => setTimeRange(r)}
className={cn(
"px-3 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all",
timeRange === r
? "bg-white dark:bg-indigo-600 text-indigo-600 dark:text-white shadow-sm"
: "text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-white"
)}
>
{r === "7days" ? "7D" : r === "30days" ? "1M" : "1Y"}
</button>
))}
</div>
</div>
<div className="h-[250px] md:h-[350px] w-full">
{loading ? (
<div className="w-full h-full flex items-center justify-center rounded-2xl bg-white/5 border border-white/5">
<div className="w-full h-full flex items-center justify-center rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5">
<Loader2 className="w-8 h-8 animate-spin text-indigo-400" />
</div>
) : chartData.length > 0 ? (
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={chartData}>
<AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="colorAmount" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#818cf8" stopOpacity={0.25} />
<stop offset="95%" stopColor="#4f46e5" stopOpacity={0} />
<stop offset="5%" stopColor="#818cf8" stopOpacity={isLight ? 0.3 : 0.25} />
<stop offset="95%" stopColor="#818cf8" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.06)" />
<CartesianGrid
strokeDasharray="3 3"
vertical={false}
stroke={isLight ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.06)"}
/>
<XAxis
dataKey="date"
axisLine={false}
tickLine={false}
tick={{ fill: "#94a3b8", fontSize: 10, fontWeight: 600 }}
tick={{ fill: isLight ? "#64748b" : "#94a3b8", fontSize: 10, fontWeight: 600 }}
dy={10}
/>
<YAxis
axisLine={false}
tickLine={false}
tick={{ fill: "#94a3b8", fontSize: 10, fontWeight: 600 }}
tick={{ fill: isLight ? "#64748b" : "#94a3b8", fontSize: 10, fontWeight: 600 }}
tickFormatter={(val) => `$${val > 999 ? (val / 1000).toFixed(1) + "k" : val}`}
/>
<Tooltip
contentStyle={{
borderRadius: "16px",
border: "1px solid rgba(255,255,255,0.1)",
background: "rgba(15, 23, 42, 0.9)",
color: "#f1f5f9",
borderRadius: "12px",
border: isLight ? "1px solid #e2e8f0" : "1px solid rgba(255,255,255,0.1)",
background: isLight ? "#ffffff" : "#0f172a",
color: isLight ? "#1e293b" : "#f1f5f9",
fontWeight: 700,
backdropFilter: "blur(12px)",
boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
backdropFilter: isLight ? "none" : "blur(12px)",
}}
formatter={(value: number | undefined) => [value !== undefined ? `$${value.toLocaleString()}` : "$0", "Revenue"]}
/>
<Area
type="monotone"
dataKey="amount"
stroke="#818cf8"
stroke="#4f46e5"
strokeWidth={3}
fillOpacity={1}
fill="url(#colorAmount)"
animationDuration={1500}
/>
</AreaChart>
</ResponsiveContainer>
) : (
<div className="w-full h-full flex items-center justify-center rounded-2xl bg-white/5 border border-white/5 text-slate-400 font-semibold">
No sales data found for the last 7 days.
<div className="w-full h-full flex items-center justify-center rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 text-slate-400 font-semibold italic">
No sales data found for this period.
</div>
)}
</div>

119
src/components/MobileSidebar.tsx
View File

@ -7,7 +7,12 @@ import { motion, AnimatePresence } from "framer-motion"
import { X, Menu, Zap } from "lucide-react"
import { Sidebar } from "./Sidebar"
import { useTheme } from "./ThemeProvider"
import { cn } from "@/lib/utils"
export function MobileSidebar() {
const { theme } = useTheme()
const isLight = theme === "light"
const [isOpen, setIsOpen] = useState(false)
const [mounted, setMounted] = useState(false)
const pathname = usePathname()
@ -38,56 +43,86 @@ export function MobileSidebar() {
{/* Hamburger Button */}
<button
onClick={() => setIsOpen(true)}
className="md:hidden p-2 rounded-lg bg-white/10 border border-white/10 text-white hover:bg-white/15 transition-all"
className={cn(
"md:hidden p-2 rounded-lg transition-all border shadow-sm",
isLight
? "bg-white border-slate-200 text-slate-600 hover:bg-slate-50"
: "bg-white/10 border-white/10 text-white hover:bg-white/15"
)}
aria-label="Open menu"
>
<Menu className="w-6 h-6" />
</button>
{/* Mobile Sidebar Overlay */}
<AnimatePresence>
{isOpen && mounted && createPortal(
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[999] md:hidden pointer-events-auto"
onClick={() => setIsOpen(false)}
/>
<motion.div
initial={{ x: -288 }}
animate={{ x: 0 }}
exit={{ x: -288 }}
transition={{ type: "spring", damping: 25, stiffness: 200 }}
className="fixed inset-y-0 left-0 w-72 bg-slate-900/95 backdrop-blur-xl border-r border-white/10 z-[1000] md:hidden flex flex-col pointer-events-auto"
>
{/* Header with close button */}
<div className="flex items-center justify-between p-4 border-b border-white/10">
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-indigo-500/40 border border-white/20 flex items-center justify-center backdrop-blur-sm">
<Zap className="w-5 h-5 text-white" />
{mounted && createPortal(
<AnimatePresence>
{isOpen && (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
key="sidebar-backdrop"
transition={{ duration: 0.2 }}
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[999] md:hidden pointer-events-auto"
onClick={() => setIsOpen(false)}
/>
<motion.div
initial={{ x: -288 }}
animate={{ x: 0 }}
exit={{ x: -288 }}
key="sidebar-content"
transition={{ type: "spring", damping: 25, stiffness: 200 }}
className={cn(
"fixed inset-y-0 left-0 w-72 backdrop-blur-xl border-r z-[1000] md:hidden flex flex-col pointer-events-auto",
isLight
? "bg-white/95 border-slate-200"
: "bg-slate-900/95 border-white/10"
)}
>
{/* Header with close button */}
<div className={cn(
"flex items-center justify-between p-4 border-b",
isLight ? "border-slate-100" : "border-white/10"
)}>
<div className="flex items-center gap-2">
<div className={cn(
"w-8 h-8 rounded-lg flex items-center justify-center backdrop-blur-sm border shadow-sm",
isLight
? "bg-indigo-50 border-indigo-100"
: "bg-indigo-500/40 border-white/20"
)}>
<Zap className={cn("w-5 h-5", isLight ? "text-indigo-600" : "text-white")} />
</div>
<h1 className={cn(
"text-xl font-bold tracking-tight",
isLight ? "text-slate-900" : "text-white"
)}>JUNOHUB</h1>
</div>
<h1 className="text-xl font-bold tracking-tight text-white">JUNOHUB</h1>
<button
onClick={() => setIsOpen(false)}
className={cn(
"p-2 rounded-lg transition-all border shadow-sm",
isLight
? "bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100"
: "bg-white/10 border-white/10 text-white hover:bg-white/15"
)}
aria-label="Close menu"
>
<X className="w-5 h-5" />
</button>
</div>
<button
onClick={() => setIsOpen(false)}
className="p-2 rounded-lg bg-white/10 border border-white/10 text-white hover:bg-white/15 transition-all"
aria-label="Close menu"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Sidebar Content */}
<div className="flex-1 overflow-y-auto">
<Sidebar />
</div>
</motion.div>
</>,
document.body
)}
</AnimatePresence>
{/* Sidebar Content */}
<div className="flex-1 overflow-y-auto">
<Sidebar showLogo={false} className="!bg-transparent !border-none" />
</div>
</motion.div>
</>
)}
</AnimatePresence>,
document.body
)}
</>
)
}

63
src/components/Sidebar.tsx
View File

@ -18,6 +18,7 @@ import {
HelpCircle
} from "lucide-react"
import { cn } from "@/lib/utils"
import { useTheme } from "@/components/ThemeProvider"
const routes = [
{
@ -75,25 +76,47 @@ const routes = [
}
]
export function Sidebar() {
interface SidebarProps {
showLogo?: boolean;
className?: string;
}
export function Sidebar({ showLogo = true, className }: SidebarProps) {
const pathname = usePathname()
const { theme } = useTheme()
const isLight = theme === "light"
return (
<div className="space-y-4 py-4 flex flex-col h-full text-white">
<div className="px-6 py-2 flex items-center mb-6">
<div className="w-8 h-8 rounded-lg bg-indigo-500/40 border border-white/20 flex items-center justify-center mr-3 backdrop-blur-sm">
<Zap className="w-5 h-5 text-white fill-white" />
<div className={cn(
"space-y-4 py-4 flex flex-col h-full transition-colors duration-300",
isLight ? "bg-white border-r border-slate-100 text-slate-900" : "text-white",
className
)}>
{showLogo && (
<div className="px-6 py-2 flex items-center mb-6">
<div className={cn(
"w-8 h-8 rounded-lg border flex items-center justify-center mr-3 backdrop-blur-sm",
isLight ? "bg-indigo-50 border-indigo-100" : "bg-indigo-500/40 border-white/20"
)}>
<Zap className={cn("w-5 h-5", isLight ? "text-indigo-600 fill-indigo-600" : "text-white fill-white")} />
</div>
<h1 className={cn("text-xl font-bold tracking-tight", isLight ? "text-slate-900" : "text-white")}>JUNOHUB</h1>
</div>
<h1 className="text-xl font-bold tracking-tight">JUNOHUB</h1>
</div>
)}
<div className="flex-1 px-3 space-y-1 overflow-y-auto">
{routes.map((route) => (
<div key={route.href}>
<Link
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.startsWith(route.href) ? "text-white bg-white/10 border-white/10" : "text-slate-400"
"text-sm group flex p-3 w-full justify-start font-medium cursor-pointer rounded-xl transition-all duration-200 ease-out border border-transparent",
isLight
? pathname.startsWith(route.href)
? "text-indigo-600 bg-indigo-50 border-indigo-100"
: "text-slate-600 hover:text-indigo-600 hover:bg-slate-50"
: pathname.startsWith(route.href)
? "text-white bg-white/10 border-white/10"
: "text-slate-400 hover:text-white hover:bg-white/10"
)}
>
<div className="flex items-center flex-1">
@ -108,8 +131,14 @@ export function Sidebar() {
key={sub.href}
href={sub.href}
className={cn(
"text-xs group flex p-2 w-full justify-start font-medium cursor-pointer hover:text-white hover:bg-white/5 rounded-lg transition-all duration-200 ease-out",
pathname === sub.href ? "text-white bg-white/5" : "text-slate-500"
"text-xs group flex p-2 w-full justify-start font-medium cursor-pointer rounded-lg transition-all duration-200 ease-out",
isLight
? pathname === sub.href
? "text-indigo-600 bg-indigo-50/50"
: "text-slate-500 hover:text-indigo-600 hover:bg-slate-50"
: pathname === sub.href
? "text-white bg-white/5"
: "text-slate-500 hover:text-white hover:bg-white/5"
)}
>
<div className="flex items-center flex-1">
@ -123,12 +152,18 @@ export function Sidebar() {
</div>
))}
</div>
<div className="px-3 pt-4 border-t border-white/10">
<div className={cn("px-3 pt-4 border-t", isLight ? "border-slate-100" : "border-white/10")}>
<Link
href="/dashboard/help-support"
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 === "/dashboard/help-support" ? "text-white bg-white/10 border-white/10" : "text-slate-400"
"text-sm group flex p-3 w-full justify-start font-medium cursor-pointer rounded-xl transition-all duration-200 ease-out border border-transparent",
isLight
? pathname === "/dashboard/help-support"
? "text-blue-600 bg-blue-50 border-blue-100"
: "text-slate-600 hover:text-blue-600 hover:bg-slate-50"
: pathname === "/dashboard/help-support"
? "text-white bg-white/10 border-white/10"
: "text-slate-400 hover:text-white hover:bg-white/10"
)}
>
<div className="flex items-center flex-1">

89
src/components/kb/AskSection.tsx
View File

@ -1,6 +1,8 @@
"use client"
import { useState } from "react"
import { useTheme } from "@/components/ThemeProvider"
import { cn } from "@/lib/utils"
type AskSectionProps = {
storeId: string
@ -15,6 +17,8 @@ type Source = {
}
export function AskSection({ storeId }: AskSectionProps) {
const { theme } = useTheme()
const isLight = theme === "light"
const [query, setQuery] = useState("")
const [includeFaq, setIncludeFaq] = useState(true)
const [includeDocuments, setIncludeDocuments] = useState(true)
@ -69,89 +73,118 @@ export function AskSection({ storeId }: AskSectionProps) {
return (
<div className="space-y-4">
<div>
<h3 className="text-lg font-semibold text-white">Ask JUNO</h3>
<p className="text-xs text-slate-400">
<h3 className={cn("text-lg font-semibold", isLight ? "text-slate-900" : "text-white")}>Ask JUNO</h3>
<p className={cn("text-xs", isLight ? "text-slate-500" : "text-slate-400")}>
Ask questions across your store&apos;s documents and FAQs. The
AI will answer using only your knowledge base.
</p>
</div>
{error && (
<div className="text-xs text-red-400 bg-red-950/40 border border-red-900/50 rounded-md px-3 py-2">
<div className="text-xs text-red-500 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
{error}
</div>
)}
<form
onSubmit={handleAsk}
className="border border-white/5 rounded-xl bg-slate-900/40 backdrop-blur-sm p-4 space-y-3"
className={cn(
"border rounded-xl p-4 space-y-4 transition-all",
isLight ? "bg-white border-slate-100 shadow-sm" : "bg-slate-900/40 border-white/5 backdrop-blur-sm"
)}
>
<textarea
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="e.g. How long do customers have to return an item?"
className="w-full px-3 py-2 rounded-lg bg-slate-950/60 border border-white/10 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/70 focus:border-indigo-500/70 min-h-[80px]"
className={cn(
"w-full px-4 py-3 rounded-lg border text-sm transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500/50 min-h-[120px]",
isLight
? "bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400"
: "bg-slate-950/60 border-white/10 text-white placeholder:text-slate-500"
)}
/>
<div className="flex items-center justify-between gap-4 text-xs text-slate-300">
<div className="flex items-center gap-3">
<label className="inline-flex items-center gap-2">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-4 text-xs">
<label className={cn(
"inline-flex items-center gap-2 cursor-pointer transition-colors",
isLight ? "text-slate-600 hover:text-slate-900" : "text-slate-400 hover:text-white"
)}>
<input
type="checkbox"
className="rounded border-slate-600 bg-slate-900 text-indigo-500"
className="rounded border-slate-300 bg-white text-indigo-600 focus:ring-indigo-500/20"
checked={includeDocuments}
onChange={(e) =>
setIncludeDocuments(e.target.checked)
}
/>
<span>Use documents</span>
<span className="font-medium">Use documents</span>
</label>
<label className="inline-flex items-center gap-2">
<label className={cn(
"inline-flex items-center gap-2 cursor-pointer transition-colors",
isLight ? "text-slate-600 hover:text-slate-900" : "text-slate-400 hover:text-white"
)}>
<input
type="checkbox"
className="rounded border-slate-600 bg-slate-900 text-indigo-500"
className="rounded border-slate-300 bg-white text-indigo-600 focus:ring-indigo-500/20"
checked={includeFaq}
onChange={(e) => setIncludeFaq(e.target.checked)}
/>
<span>Use FAQs</span>
<span className="font-medium">Use FAQs</span>
</label>
</div>
<button
type="submit"
disabled={isLoading}
className="inline-flex items-center px-3 py-2 rounded-lg bg-indigo-600/80 hover:bg-indigo-600 text-xs font-medium text-white disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
className="inline-flex items-center px-6 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-xs font-bold text-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
>
{isLoading ? "Thinking..." : "Ask"}
{isLoading ? (
<span className="flex items-center gap-2">
<svg className="animate-spin h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Thinking...
</span>
) : "Ask JUNO"}
</button>
</div>
</form>
{answer && (
<div className="border border-white/5 rounded-xl bg-slate-900/60 backdrop-blur-sm p-4 space-y-3">
<div className={cn(
"border rounded-xl p-6 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300",
isLight ? "bg-indigo-50/30 border-indigo-100" : "bg-slate-900/60 border-white/5 backdrop-blur-sm"
)}>
<div>
<h4 className="text-xs font-semibold text-slate-300 uppercase tracking-wide mb-1">
<h4 className={cn("text-[11px] font-bold uppercase tracking-wider mb-2", isLight ? "text-indigo-600" : "text-slate-400")}>
Answer
</h4>
<p className="text-sm text-slate-100 whitespace-pre-wrap">
<p className={cn("text-[15px] leading-relaxed whitespace-pre-wrap", isLight ? "text-slate-800" : "text-slate-100")}>
{answer}
</p>
</div>
{sources.length > 0 && (
<div className="border-t border-white/10 pt-3">
<h5 className="text-xs font-semibold text-slate-300 uppercase tracking-wide mb-1">
<div className={cn("border-t pt-4", isLight ? "border-indigo-100" : "border-white/10")}>
<h5 className={cn("text-[11px] font-bold uppercase tracking-wider mb-2", isLight ? "text-indigo-600" : "text-slate-400")}>
Sources
</h5>
<ul className="space-y-1 text-xs text-slate-400">
<ul className="space-y-2 text-xs">
{sources.map((source, index) => (
<li key={source.id}>
<span className="font-medium text-slate-200">
<li key={source.id} className="flex items-center gap-2">
<span className={cn(
"inline-flex items-center px-1.5 py-0.5 rounded bg-slate-100 text-[10px] font-bold",
isLight ? "text-slate-600" : "text-slate-400 bg-slate-800"
)}>
{source.type === "FAQ"
? "FAQ"
: "Document"}{" "}
#{index + 1}
: "Document"}
</span>
<span className="ml-2 text-slate-500">
(similarity:{" "}
{source.similarity.toFixed(2)})
<span className={isLight ? "text-slate-500" : "text-slate-400"}>
Source #{index + 1}
</span>
<span className="text-slate-400 ml-auto">
Similarity: {(source.similarity * 100).toFixed(0)}%
</span>
</li>
))}

68
src/components/kb/DocumentsSection.tsx
View File

@ -1,6 +1,8 @@
"use client"
import { useEffect, useState } from "react"
import { useTheme } from "@/components/ThemeProvider"
import { cn } from "@/lib/utils"
type KnowledgeDocument = {
id: string
@ -18,6 +20,8 @@ type DocumentsSectionProps = {
}
export function DocumentsSection({ storeId }: DocumentsSectionProps) {
const { theme } = useTheme()
const isLight = theme === "light"
const [documents, setDocuments] = useState<KnowledgeDocument[]>([])
const [isLoading, setIsLoading] = useState(false)
const [isUploading, setIsUploading] = useState(false)
@ -116,14 +120,14 @@ export function DocumentsSection({ storeId }: DocumentsSectionProps) {
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-white">
<h3 className={cn("text-lg font-semibold", isLight ? "text-slate-900" : "text-white")}>
Documents
</h3>
<p className="text-xs text-slate-400">
<p className={cn("text-xs", isLight ? "text-slate-500" : "text-slate-400")}>
Upload PDFs or DOCX files to power AI answers.
</p>
</div>
<label className="inline-flex items-center px-3 py-2 rounded-lg bg-indigo-600/80 hover:bg-indigo-600 text-sm font-medium text-white cursor-pointer transition-colors">
<label className="inline-flex items-center px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-sm font-medium text-white cursor-pointer transition-colors shadow-sm">
<span>{isUploading ? "Uploading..." : "Upload document"}</span>
<input
type="file"
@ -136,60 +140,76 @@ export function DocumentsSection({ storeId }: DocumentsSectionProps) {
</div>
{error && (
<div className="text-xs text-red-400 bg-red-950/40 border border-red-900/50 rounded-md px-3 py-2">
<div className="text-xs text-red-500 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
{error}
</div>
)}
<div className="border border-white/5 rounded-xl bg-slate-900/40 backdrop-blur-sm">
<div className="px-4 py-3 border-b border-white/5 flex items-center justify-between">
<span className="text-xs font-medium text-slate-300 uppercase tracking-wide">
<div className={cn(
"border rounded-xl",
isLight ? "border-slate-100 bg-white" : "border-white/5 bg-slate-900/40 backdrop-blur-sm"
)}>
<div className={cn(
"px-4 py-3 border-b flex items-center justify-between",
isLight ? "border-slate-100" : "border-white/5"
)}>
<span className={cn(
"text-xs font-semibold uppercase tracking-wide",
isLight ? "text-slate-500" : "text-slate-300"
)}>
Uploaded documents
</span>
{isLoading && (
<span className="text-xs text-slate-400">Loading...</span>
<span className="text-xs text-slate-400 animate-pulse">Loading...</span>
)}
</div>
<div className="divide-y divide-white/5">
<div className={cn(
"divide-y",
isLight ? "divide-slate-50" : "divide-white/5"
)}>
{documents.length === 0 && !isLoading ? (
<div className="px-4 py-6 text-sm text-slate-400 text-center">
<div className="px-4 py-10 text-sm text-slate-400 text-center">
No documents yet. Upload your first knowledge base file.
</div>
) : (
documents.map((doc) => (
<div
key={doc.id}
className="px-4 py-3 flex items-center justify-between gap-4 text-sm"
className="px-4 py-4 flex items-center justify-between gap-4 text-sm hover:bg-slate-50/50 transition-colors"
>
<div>
<p className="font-medium text-white">
<div className="min-w-0 flex-1">
<p className={cn("font-medium truncate", isLight ? "text-slate-900" : "text-white")}>
{doc.title}
</p>
<p className="text-xs text-slate-400">
<p className="text-xs text-slate-400 mt-0.5">
{doc.fileName} •{" "}
{(doc.sizeBytes / 1024).toFixed(1)} KB
</p>
</div>
<div className="flex items-center gap-3 text-xs text-right">
<div className="flex items-center gap-4 text-xs">
<span
className={`inline-flex items-center px-2 py-1 rounded-full border ${
className={cn(
"inline-flex items-center px-2.5 py-1 rounded-full border text-[10px] font-bold uppercase tracking-wider",
doc.status === "READY"
? "border-emerald-500/60 text-emerald-400 bg-emerald-500/10"
? "border-emerald-500/20 text-emerald-600 bg-emerald-50"
: doc.status === "PROCESSING"
? "border-amber-500/60 text-amber-400 bg-amber-500/10"
: doc.status === "FAILED"
? "border-red-500/60 text-red-400 bg-red-500/10"
: "border-slate-600 text-slate-300 bg-slate-800/60"
}`}
? "border-amber-500/20 text-amber-600 bg-amber-50"
: doc.status === "FAILED"
? "border-red-500/20 text-red-600 bg-red-50"
: "border-slate-200 text-slate-500 bg-slate-50"
)}
>
{doc.status.toLowerCase()}
</span>
<button
type="button"
onClick={() => void handleDelete(doc.id)}
className="px-2 py-1 rounded-md border border-red-500/60 text-red-400 hover:bg-red-500/10 transition-colors"
className="p-1.5 rounded-lg border border-red-200 text-red-500 hover:bg-red-50 transition-colors"
title="Delete document"
>
Delete
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>

152
src/components/kb/FaqSection.tsx
View File

@ -1,6 +1,8 @@
"use client"
import { useEffect, useState } from "react"
import { useTheme } from "@/components/ThemeProvider"
import { cn } from "@/lib/utils"
type FaqItem = {
id: string
@ -15,6 +17,8 @@ type FaqSectionProps = {
}
export function FaqSection({ storeId }: FaqSectionProps) {
const { theme } = useTheme()
const isLight = theme === "light"
const [faqs, setFaqs] = useState<FaqItem[]>([])
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
@ -25,28 +29,28 @@ export function FaqSection({ storeId }: FaqSectionProps) {
useEffect(() => {
if (!storeId) return
;(async () => {
try {
setIsLoading(true)
setError(null)
const res = await fetch(
`/api/stores/${encodeURIComponent(storeId)}/kb/faqs`,
)
if (!res.ok) {
throw new Error("Failed to load FAQs")
; (async () => {
try {
setIsLoading(true)
setError(null)
const res = await fetch(
`/api/stores/${encodeURIComponent(storeId)}/kb/faqs`,
)
if (!res.ok) {
throw new Error("Failed to load FAQs")
}
const json = (await res.json()) as { faqs: FaqItem[] }
setFaqs(json.faqs)
} catch (err) {
setError(
err instanceof Error
? err.message
: "Failed to load FAQs",
)
} finally {
setIsLoading(false)
}
const json = (await res.json()) as { faqs: FaqItem[] }
setFaqs(json.faqs)
} catch (err) {
setError(
err instanceof Error
? err.message
: "Failed to load FAQs",
)
} finally {
setIsLoading(false)
}
})()
})()
}, [storeId])
async function handleAddFaq(e: React.FormEvent) {
@ -165,13 +169,18 @@ export function FaqSection({ storeId }: FaqSectionProps) {
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-white">FAQs</h3>
<p className="text-xs text-slate-400">
<h3 className={cn("text-lg font-semibold", isLight ? "text-slate-900" : "text-white")}>FAQs</h3>
<p className={cn("text-xs", isLight ? "text-slate-500" : "text-slate-400")}>
Manage frequently asked questions that your AI can use as
trusted answers.
</p>
</div>
<label className="inline-flex items-center px-3 py-2 rounded-lg bg-slate-800/80 hover:bg-slate-800 text-xs font-medium text-slate-100 cursor-pointer transition-colors border border-white/10">
<label className={cn(
"inline-flex items-center px-3 py-2 rounded-lg text-xs font-medium cursor-pointer transition-colors border shadow-sm",
isLight
? "bg-white border-slate-200 text-slate-700 hover:bg-slate-50"
: "bg-slate-800/80 hover:bg-slate-800 border-white/10 text-slate-100 shadow-xl"
)}>
<span>
{isImporting ? "Importing..." : "Import from JSON file"}
</span>
@ -186,70 +195,97 @@ export function FaqSection({ storeId }: FaqSectionProps) {
</div>
{error && (
<div className="text-xs text-red-400 bg-red-950/40 border border-red-900/50 rounded-md px-3 py-2">
<div className="text-xs text-red-500 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
{error}
</div>
)}
<form
onSubmit={handleAddFaq}
className="border border-white/5 rounded-xl bg-slate-900/40 backdrop-blur-sm p-4 space-y-3"
className={cn(
"border rounded-xl p-4 space-y-4 transition-all",
isLight ? "bg-white border-slate-100 shadow-sm" : "bg-slate-900/40 border-white/5 backdrop-blur-sm"
)}
>
<div>
<label className="block text-xs font-medium text-slate-300 mb-1">
Question
</label>
<input
value={question}
onChange={(e) => setQuestion(e.target.value)}
placeholder="e.g. What is your return policy?"
className="w-full px-3 py-2 rounded-lg bg-slate-950/60 border border-white/10 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/70 focus:border-indigo-500/70"
/>
<div className="grid grid-cols-1 gap-4">
<div>
<label className={cn("block text-[11px] font-bold uppercase tracking-wider mb-1.5", isLight ? "text-slate-500" : "text-slate-400")}>
Question
</label>
<input
value={question}
onChange={(e) => setQuestion(e.target.value)}
placeholder="e.g. What is your return policy?"
className={cn(
"w-full px-3 py-2 rounded-lg border text-sm transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500/50",
isLight
? "bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400"
: "bg-slate-950/60 border-white/10 text-white placeholder:text-slate-500"
)}
/>
</div>
<div>
<label className={cn("block text-[11px] font-bold uppercase tracking-wider mb-1.5", isLight ? "text-slate-500" : "text-slate-400")}>
Answer
</label>
<textarea
value={answer}
onChange={(e) => setAnswer(e.target.value)}
placeholder="Provide a clear, friendly answer that can be shown directly to customers."
className={cn(
"w-full px-3 py-2 rounded-lg border text-sm transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500/50 min-h-[100px]",
isLight
? "bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400"
: "bg-slate-950/60 border-white/10 text-white placeholder:text-slate-500"
)}
/>
</div>
</div>
<div>
<label className="block text-xs font-medium text-slate-300 mb-1">
Answer
</label>
<textarea
value={answer}
onChange={(e) => setAnswer(e.target.value)}
placeholder="Provide a clear, friendly answer that can be shown directly to customers."
className="w-full px-3 py-2 rounded-lg bg-slate-950/60 border border-white/10 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/70 focus:border-indigo-500/70 min-h-[80px]"
/>
</div>
<div className="flex justify-end">
<div className="flex justify-end pt-2">
<button
type="submit"
disabled={isSaving}
className="inline-flex items-center px-3 py-2 rounded-lg bg-indigo-600/80 hover:bg-indigo-600 text-xs font-medium text-white disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
className="inline-flex items-center px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-xs font-bold text-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
>
{isSaving ? "Saving..." : "Add FAQ"}
</button>
</div>
</form>
<div className="border border-white/5 rounded-xl bg-slate-900/40 backdrop-blur-sm">
<div className="px-4 py-3 border-b border-white/5 flex items-center justify-between">
<span className="text-xs font-medium text-slate-300 uppercase tracking-wide">
<div className={cn(
"border rounded-xl transition-all",
isLight ? "bg-white border-slate-100 shadow-sm" : "bg-slate-900/40 border-white/5 backdrop-blur-sm"
)}>
<div className={cn(
"px-4 py-3 border-b flex items-center justify-between",
isLight ? "border-slate-100" : "border-white/5"
)}>
<span className={cn(
"text-xs font-semibold uppercase tracking-wide",
isLight ? "text-slate-500" : "text-slate-300"
)}>
Existing FAQs
</span>
{isLoading && (
<span className="text-xs text-slate-400">Loading...</span>
<span className="text-xs text-slate-400 animate-pulse">Loading...</span>
)}
</div>
<div className="divide-y divide-white/5">
<div className={cn(
"divide-y",
isLight ? "divide-slate-50" : "divide-white/5"
)}>
{faqs.length === 0 && !isLoading ? (
<div className="px-4 py-6 text-sm text-slate-400 text-center">
<div className="px-4 py-10 text-sm text-slate-400 text-center">
No FAQs yet. Add your first common question above or
import from JSON.
</div>
) : (
faqs.map((faq) => (
<div key={faq.id} className="px-4 py-3 text-sm">
<p className="font-medium text-white">
<div key={faq.id} className="px-4 py-4 text-sm hover:bg-slate-50/50 transition-colors group">
<p className={cn("font-semibold", isLight ? "text-slate-900" : "text-white")}>
{faq.question}
</p>
<p className="mt-1 text-xs text-slate-300">
<p className={cn("mt-1.5 text-[13px] leading-relaxed", isLight ? "text-slate-600" : "text-slate-300")}>
{faq.answer}
</p>
</div>