style: ui readability refactor v1.2.2 (removed uppercase, tracking, increased font sizes)
This commit is contained in:
Daniel Bedeleanu
535
frontend/app/inventory/page.tsx
Normal file
535
frontend/app/inventory/page.tsx
Normal file
@@ -0,0 +1,535 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { db, Item } from '@/lib/db';
|
||||
import { inventoryApi } from '@/lib/api';
|
||||
import PageShell from '@/components/PageShell';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import {
|
||||
Package,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
BarChart3,
|
||||
Layers,
|
||||
Plus,
|
||||
Minus,
|
||||
Trash2,
|
||||
X,
|
||||
AlertTriangle,
|
||||
Tag,
|
||||
Edit2
|
||||
} from 'lucide-react';
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export default function InventoryPage() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [inventory, setInventory] = useState<Item[]>([]);
|
||||
const [stats, setStats] = useState<any>(null);
|
||||
const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [currentUser, setCurrentUser] = useState<any | null>(null);
|
||||
|
||||
// Stock Adjustment State
|
||||
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
|
||||
const [adjustQty, setAdjustQty] = useState<number>(1);
|
||||
const [adjustType, setAdjustType] = useState<'ADD' | 'REMOVE' | 'TRASH'>('ADD');
|
||||
const [trashReason, setTrashReason] = useState('Damaged');
|
||||
|
||||
// Item Editing state
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editedItem, setEditedItem] = useState<Partial<Item>>({});
|
||||
const [categoriesList, setCategoriesList] = useState<any[]>([]);
|
||||
|
||||
// Category Editing state
|
||||
const [editingCategory, setEditingCategory] = useState<any | null>(null);
|
||||
const [catEditedName, setCatEditedName] = useState('');
|
||||
const [catEditedDesc, setCatEditedDesc] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const savedUser = localStorage.getItem('inventory_user');
|
||||
if (savedUser) {
|
||||
setCurrentUser(JSON.parse(savedUser));
|
||||
}
|
||||
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
// Load local items
|
||||
const cached = await db.items.toArray();
|
||||
setInventory(cached);
|
||||
|
||||
try {
|
||||
// Load backend stats
|
||||
const s = await inventoryApi.getStats();
|
||||
setStats(s);
|
||||
|
||||
const cats = await inventoryApi.getCategories();
|
||||
setCategoriesList(cats);
|
||||
|
||||
// Load fresh items
|
||||
const res = await inventoryApi.getItems();
|
||||
setInventory(res);
|
||||
// Sync local DB
|
||||
await db.items.clear();
|
||||
await db.items.bulkAdd(res);
|
||||
} catch (err) {
|
||||
console.error("Failed to load backend data", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdjustStock = async () => {
|
||||
if (!selectedItem) return;
|
||||
const toastId = toast.loading("Processing...");
|
||||
|
||||
try {
|
||||
const isOnline = navigator.onLine;
|
||||
const finalAdjustQty = adjustQty;
|
||||
const newQty = selectedItem.quantity + (adjustType === 'ADD' ? adjustQty : -adjustQty);
|
||||
|
||||
// Local Update
|
||||
await db.items.update(selectedItem.id!, { quantity: newQty });
|
||||
setInventory(prev => prev.map(i => i.id === selectedItem.id ? { ...i, quantity: newQty } : i));
|
||||
|
||||
if (isOnline) {
|
||||
const endpoint = adjustType === 'ADD' ? 'check-in' : (adjustType === 'TRASH' ? 'trash' : 'check-out');
|
||||
const payload: any = {
|
||||
barcode: selectedItem.barcode,
|
||||
quantity: finalAdjustQty,
|
||||
user_id: currentUser?.id || 1
|
||||
};
|
||||
if (adjustType === 'TRASH') payload.reason = trashReason;
|
||||
|
||||
await inventoryApi.adjustStock(endpoint, payload);
|
||||
toast.success("Inventory updated & synced", { id: toastId });
|
||||
} else {
|
||||
await db.pendingOperations.add({
|
||||
type: adjustType === 'ADD' ? 'CHECK_IN' : (adjustType === 'TRASH' ? 'TRASH' : 'CHECK_OUT'),
|
||||
barcode: selectedItem.barcode,
|
||||
quantity: finalAdjustQty,
|
||||
timestamp: Date.now(),
|
||||
synced: 0,
|
||||
uuid: crypto.randomUUID()
|
||||
} as any);
|
||||
toast.success("Saved locally (Offline)", { id: toastId });
|
||||
}
|
||||
|
||||
setSelectedItem(null);
|
||||
setAdjustQty(1);
|
||||
} catch (error: any) {
|
||||
console.error("Adjustment failure:", error);
|
||||
toast.error("Error saving operation", { id: toastId });
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateItem = async () => {
|
||||
if (!selectedItem) return;
|
||||
try {
|
||||
const updated = { ...selectedItem, ...editedItem };
|
||||
if (updated.part_number) updated.part_number = updated.part_number.toUpperCase();
|
||||
|
||||
await db.items.update(selectedItem.id!, updated);
|
||||
if (navigator.onLine) {
|
||||
await inventoryApi.updateItem(selectedItem.id!, updated);
|
||||
}
|
||||
|
||||
toast.success("Item updated successfully");
|
||||
setIsEditing(false);
|
||||
setSelectedItem(updated as Item);
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Failed to update item");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteItem = async () => {
|
||||
if (!selectedItem || !selectedItem.id) return;
|
||||
if (!window.confirm(`Are you sure you want to delete "${selectedItem.name}"?`)) return;
|
||||
|
||||
try {
|
||||
await db.items.delete(selectedItem.id);
|
||||
if (navigator.onLine) {
|
||||
await inventoryApi.deleteItem(selectedItem.id);
|
||||
}
|
||||
toast.success("Item deleted");
|
||||
setSelectedItem(null);
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Failed to delete item");
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateCategory = async () => {
|
||||
if (!editingCategory) return;
|
||||
try {
|
||||
await inventoryApi.updateCategory(editingCategory.id, {
|
||||
name: catEditedName,
|
||||
description: catEditedDesc
|
||||
});
|
||||
toast.success("Category updated");
|
||||
setEditingCategory(null);
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
toast.error("Update failed");
|
||||
}
|
||||
};
|
||||
|
||||
// Group items by category
|
||||
const categories = Array.from(new Set(inventory.map(i => i.category)));
|
||||
const filteredCategories = categories.filter(c =>
|
||||
c.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
inventory.some(i => i.category === c && i.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<PageShell>
|
||||
<div className="p-3 md:p-8 max-w-4xl mx-auto space-y-6">
|
||||
|
||||
<header className="max-w-4xl mx-auto w-full mb-8">
|
||||
<h1 className="text-2xl font-black flex items-center gap-3">
|
||||
<Package className="text-primary" size={28} />
|
||||
Inventory Catalog
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Detailed view of all stock items by category</p>
|
||||
</header>
|
||||
|
||||
<div className="max-w-4xl mx-auto w-full space-y-8">
|
||||
{/* Stats Dashboard */}
|
||||
<section className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-3xl">
|
||||
<div className="w-8 h-8 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-3">
|
||||
<Layers size={18} />
|
||||
</div>
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Categories</p>
|
||||
<p className="text-2xl font-black mt-1">{stats?.total_categories || categories.length}</p>
|
||||
</div>
|
||||
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-3xl">
|
||||
<div className="w-8 h-8 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center mb-3">
|
||||
<Package size={18} />
|
||||
</div>
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Item Types</p>
|
||||
<p className="text-2xl font-black mt-1">{stats?.total_items || inventory.length}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search categories or items..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-800 rounded-2xl py-4 pl-12 pr-4 text-sm focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-600">
|
||||
🔍
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categorized List (Accordion) */}
|
||||
<section className="space-y-3">
|
||||
{filteredCategories.map(cat => (
|
||||
<div key={cat} className="bg-slate-900/40 border border-slate-800/50 rounded-3xl overflow-hidden active:scale-[0.995] transition-all">
|
||||
<div
|
||||
className="w-full p-5 flex items-center justify-between hover:bg-slate-900/60 transition-colors cursor-pointer"
|
||||
onClick={() => setExpandedCategory(expandedCategory === cat ? null : cat)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-slate-800 flex items-center justify-center text-slate-400 group-hover:text-primary transition-colors">
|
||||
<Tag size={20} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="font-bold text-lg">{cat}</h3>
|
||||
<p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">
|
||||
{inventory.filter(i => i.category === cat).length} Item types in stock
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{expandedCategory === cat ? <ChevronDown size={20} className="text-primary" /> : <ChevronRight size={20} className="text-slate-600" />}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const categoryObj = categoriesList.find(c => c.name === cat);
|
||||
if (categoryObj) {
|
||||
setEditingCategory(categoryObj);
|
||||
setCatEditedName(categoryObj.name);
|
||||
setCatEditedDesc(categoryObj.description || '');
|
||||
}
|
||||
}}
|
||||
className="p-2 hover:bg-slate-800 rounded-full text-slate-500 hover:text-primary transition-colors relative z-10"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedCategory === cat && (
|
||||
<div className="p-4 pt-0 space-y-2 animate-in slide-in-from-top-4 duration-300">
|
||||
<div className="h-px bg-slate-800/50 mb-4 mx-2" />
|
||||
{inventory
|
||||
.filter(i => i.category === cat)
|
||||
.filter(i => i.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => setSelectedItem(item)}
|
||||
className="bg-slate-950/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 cursor-pointer transition-all active:scale-[0.98]"
|
||||
>
|
||||
<div className="flex-1 min-w-0 pr-4">
|
||||
<h4 className="font-bold text-slate-200 truncate">{item.name}</h4>
|
||||
<p className="text-[10px] text-slate-500 truncate mt-0.5">{item.specs}</p>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<span className={cn(
|
||||
"text-lg font-black",
|
||||
item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
|
||||
)}>
|
||||
{item.quantity}
|
||||
</span>
|
||||
<p className="text-[8px] text-slate-600 uppercase tracking-widest font-black">Stock</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredCategories.length === 0 && (
|
||||
<div className="py-20 text-center text-slate-600">
|
||||
<Package size={48} className="mx-auto mb-4 opacity-10" />
|
||||
<p className="font-medium">No results found</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Stock Adjustment / Edit Item Overlay */}
|
||||
{selectedItem && (
|
||||
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-xl font-black tracking-tight">
|
||||
{isEditing ? "Edit Item" : selectedItem.name}
|
||||
</h3>
|
||||
<div className="flex gap-2">
|
||||
{!isEditing && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditedItem(selectedItem);
|
||||
setIsEditing(true);
|
||||
}}
|
||||
className="p-2 hover:bg-slate-800 rounded-full text-slate-400"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</button>
|
||||
)}
|
||||
{isEditing && (
|
||||
<button
|
||||
onClick={handleDeleteItem}
|
||||
className="p-2 hover:bg-red-500/20 rounded-full text-red-500"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedItem(null);
|
||||
setIsEditing(false);
|
||||
setAdjustQty(1);
|
||||
}}
|
||||
className="p-2 hover:bg-slate-800 rounded-full"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isEditing ? (
|
||||
<div className="space-y-4 mb-8">
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.name || ''}
|
||||
onChange={e => setEditedItem({...editedItem, name: e.target.value})}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 placeholder:text-slate-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Part Number</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.part_number || ''}
|
||||
onChange={e => setEditedItem({...editedItem, part_number: e.target.value})}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-mono outline-none text-slate-100 placeholder:text-slate-700 uppercase"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Category</label>
|
||||
<select
|
||||
value={editedItem.category || ''}
|
||||
onChange={e => setEditedItem({...editedItem, category: e.target.value})}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
||||
>
|
||||
<option value="">Select Category</option>
|
||||
{categoriesList.map(c => (
|
||||
<option key={c.id} value={c.name}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Item Type</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.type || ''}
|
||||
onChange={e => setEditedItem({...editedItem, type: e.target.value})}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Specs / Comments</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.specs || ''}
|
||||
onChange={e => setEditedItem({...editedItem, specs: e.target.value})}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex p-1 bg-slate-950 rounded-2xl mb-8">
|
||||
{[
|
||||
{ id: 'ADD', label: 'Buy More', icon: Plus, color: 'text-primary' },
|
||||
{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
|
||||
{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
|
||||
].map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setAdjustType(t.id as any)}
|
||||
className={cn(
|
||||
"flex-1 flex flex-col items-center py-3 rounded-xl transition-all",
|
||||
adjustType === t.id ? "bg-slate-800 shadow-lg" : "text-slate-500"
|
||||
)}
|
||||
>
|
||||
<t.icon size={20} className={adjustType === t.id ? t.color : ""} />
|
||||
<span className="text-[10px] font-black uppercase tracking-widest mt-1">{t.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-6 mb-8">
|
||||
<div className="flex items-center gap-8">
|
||||
<button
|
||||
onClick={() => setAdjustQty(Math.max(1, adjustQty - 1))}
|
||||
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<Minus size={24} />
|
||||
</button>
|
||||
<span className="text-5xl font-black tabular-nums">{adjustQty}</span>
|
||||
<button
|
||||
onClick={() => setAdjustQty(adjustQty + 1)}
|
||||
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<Plus size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{adjustType === 'TRASH' && (
|
||||
<div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl">
|
||||
<select
|
||||
value={trashReason}
|
||||
onChange={(e) => setTrashReason(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-300"
|
||||
>
|
||||
<option>Damaged</option>
|
||||
<option>Expired</option>
|
||||
<option>Lost</option>
|
||||
<option>Technical Failure</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={isEditing ? handleUpdateItem : handleAdjustStock}
|
||||
className={cn(
|
||||
"w-full py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-xl",
|
||||
isEditing ? "bg-white text-slate-950 shadow-white/10" : (
|
||||
adjustType === 'ADD' ? "bg-primary text-white shadow-primary/20" :
|
||||
adjustType === 'REMOVE' ? "bg-amber-600 text-white shadow-amber-600/20" :
|
||||
"bg-red-600 text-white shadow-red-600/20"
|
||||
)
|
||||
)}
|
||||
>
|
||||
{isEditing ? "Save Changes" : (
|
||||
adjustType === 'ADD' ? `Add ${adjustQty} to Stock` :
|
||||
adjustType === 'REMOVE' ? `Subtract ${adjustQty} from Stock` :
|
||||
`Discard ${adjustQty} items`
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Category Edit Overlay */}
|
||||
{editingCategory && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300">
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 max-w-sm w-full shadow-2xl space-y-6 animate-in zoom-in-95 duration-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-black uppercase tracking-tight">Edit Category</h2>
|
||||
<button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-400">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={catEditedName}
|
||||
onChange={e => setCatEditedName(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Description</label>
|
||||
<textarea
|
||||
value={catEditedDesc}
|
||||
onChange={e => setCatEditedDesc(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 h-24 resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleUpdateCategory}
|
||||
className="w-full bg-primary text-white font-black uppercase tracking-widest py-4 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
|
||||
>
|
||||
Update Category
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user