admin-shell-foundationlisted
Install: claude install-skill Tekkiiiii/the-agency
# Admin Shell Foundation
## What's Included
```
admin-shell-foundation/
├── AdminShell.tsx ← Base layout wrapper (sidebar + header)
├── DataTable.tsx ← Sortable, filterable CRUD table
├── StatusBadge.tsx ← active/inactive/pending/confirmed states
├── ConfirmDialog.tsx ← Destructive action confirmation modal
└── references/
├── sidebar-nav-pattern.md
└── data-table-pattern.md
```
## AdminShell Layout
```tsx
// components/AdminShell.tsx
export function AdminShell({ children, nav }: {
children: React.ReactNode;
nav: NavItem[];
}) {
const [sidebarOpen, setSidebarOpen] = useState(true);
const { session } = useSession();
return (
<div className="flex h-screen bg-gray-50">
{/* Sidebar */}
<aside className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-slate-800 transition-width`}>
<div className="p-4 font-bold text-white">Admin</div>
<nav className="flex-1">
{nav.map(item => (
<NavLink key={item.href} to={item.href}
className="flex items-center gap-3 px-4 py-3 text-gray-300 hover:bg-slate-700">
<item.icon className="w-5 h-5" />
{sidebarOpen && <span>{item.label}</span>}
</NavLink>
))}
</nav>
</aside>
{/* Main content */}
<div className="flex-1 flex flex-col">
<header className="h-16 bg-white border-b flex items-center justify-between px-6">
<button onClick={() => setSideba