+
+
+
+ );
+}
diff --git a/admin-frontend/src/components/Layout.tsx b/admin-frontend/src/components/Layout.tsx
new file mode 100644
index 0000000..464d8c9
--- /dev/null
+++ b/admin-frontend/src/components/Layout.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Sidebar from './Sidebar';
+
+const Layout: React.FC = () => {
+ return (
+
+ setSearchValue(event.target.value)}
+ className="max-w-sm bg-neutral-800 border-neutral-700 placeholder:text-neutral-500"
+ />
+
+
+
+
+
+
+
+
+ Page {pagination.pageIndex + 1} of {pageCount}
+
+
+
+
+
+
+
+ {/* Add a background texture for aesthetic effect */}
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/admin-frontend/src/components/Sidebar.tsx b/admin-frontend/src/components/Sidebar.tsx
new file mode 100644
index 0000000..ae59260
--- /dev/null
+++ b/admin-frontend/src/components/Sidebar.tsx
@@ -0,0 +1,42 @@
+import { NavLink } from 'react-router-dom';
+import { LayoutGrid, Users, FileText, Hash } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+const navigation = [
+ { name: 'Dashboard', href: '/dashboard', icon: LayoutGrid },
+ { name: 'Users', href: '/users', icon: Users },
+ { name: 'Posts', href: '/posts', icon: FileText },
+];
+
+const Sidebar = () => {
+ return (
+
+ );
+};
+
+export default Sidebar;
diff --git a/admin-frontend/src/components/ui/button.tsx b/admin-frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..fe33def
--- /dev/null
+++ b/admin-frontend/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default:
+ 'bg-acid-green text-black hover:bg-acid-green/90',
+ destructive:
+ 'bg-red-600 text-neutral-50 hover:bg-red-600/90',
+ outline:
+ 'border border-neutral-700 bg-transparent hover:bg-neutral-800 hover:text-neutral-50',
+ secondary:
+ 'bg-neutral-800 text-neutral-50 hover:bg-neutral-700',
+ ghost:
+ 'hover:bg-neutral-800 hover:text-neutral-50',
+ link:
+ 'text-neutral-50 underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-10 px-4 py-2',
+ sm: 'h-9 rounded-md px-3',
+ lg: 'h-11 rounded-md px-8',
+ icon: 'h-10 w-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ }
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes
+
+
+ )
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes${msg}
`;
+};
+
+async function boot() {
+ const urlParams = new URLSearchParams(window.location.search);
+ const agenticToken = urlParams.get('agentic_token');
+ const legacyToken = urlParams.get('auth_token');
+ const activeToken = agenticToken || legacyToken;
+
+ if (!activeToken) {
+ // Check sessionStorage in case the user navigated away and back
+ const storedToken = sessionStorage.getItem('admin_auth_token');
+ if (!storedToken) {
+ deny('Invalid or missing admin access token.');
+ return;
+ }
+ // Token is in sessionStorage and was already validated - mount app directly
+ const root = document.getElementById('root');
+ if (!root) { deny('Unable to load admin app.'); return; }
+ createRoot(root).render({value}
+
+
+ );
+ }
+
+ if (error) {
+ return Error fetching stats: {error.message}
;
+ }
+
+ const statItems = [
+ { title: 'Total Users', value: stats?.total_users ?? 0, icon: Users, colorClass: 'text-blue-400' },
+ { title: 'Total Posts', value: stats?.total_posts ?? 0, icon: FileText, colorClass: 'text-yellow-400' },
+ { title: 'Total Likes', value: stats?.total_likes ?? 0, icon: Heart, colorClass: 'text-red-400' },
+ { title: 'Total Comments', value: stats?.total_comments ?? 0, icon: MessageSquare, colorClass: 'text-green-400' },
+ ]
+
+ return (
+
+
+ Dashboard
+
+
+ {statItems.map((item) => (
+
+
+ ))}
+
+
+ );
+};
+
+export default DashboardPage;
diff --git a/admin-frontend/src/pages/PostManagementPage.tsx b/admin-frontend/src/pages/PostManagementPage.tsx
new file mode 100644
index 0000000..fa16bde
--- /dev/null
+++ b/admin-frontend/src/pages/PostManagementPage.tsx
@@ -0,0 +1,120 @@
+import { useState, useMemo } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { ColumnDef } from '@tanstack/react-table';
+import { formatDistanceToNow } from 'date-fns';
+import { toast } from 'sonner';
+
+import { api, API_URL } from '../api';
+import { Post } from '../types';
+import { DataTable } from '../components/DataTable';
+import { Button } from '../components/ui/button';
+import { Trash2 } from 'lucide-react';
+
+interface PostsResponse {
+ posts: Post[];
+ total: number;
+}
+
+const fetchPosts = async (page: number, pageSize: number, search: string): Promise{row.original.caption}
+ }, + { + accessorKey: 'author_username', + header: 'Author', + }, + { + accessorKey: 'like_count', + header: 'Likes', + }, + { + accessorKey: 'comment_count', + header: 'Comments', + }, + { + accessorKey: 'created_at', + header: 'Created', + cell: ({ row }) => ( + {formatDistanceToNow(new Date(row.original.created_at), { addSuffix: true })} + ), + }, + { + id: 'actions', + header: 'Actions', + cell: ({ row }) => ( + + ), + } + ], [deletePostMutation.isLoading]); + + const pageCount = data ? Math.ceil(data.total / pagination.pageSize) : 0; + + return ( +
+
+ );
+};
+
+export default PostManagementPage;
diff --git a/admin-frontend/src/pages/UserManagementPage.tsx b/admin-frontend/src/pages/UserManagementPage.tsx
new file mode 100644
index 0000000..aca5154
--- /dev/null
+++ b/admin-frontend/src/pages/UserManagementPage.tsx
@@ -0,0 +1,123 @@
+import { useState, useMemo } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { ColumnDef } from '@tanstack/react-table';
+import { formatDistanceToNow } from 'date-fns';
+import { toast } from 'sonner';
+
+import { api, API_URL } from '../api';
+import { User } from '../types';
+import { DataTable } from '../components/DataTable';
+import { Button } from '../components/ui/button';
+import { Trash2, User as UserIcon } from 'lucide-react';
+
+interface UsersResponse {
+ users: User[];
+ total: number;
+}
+
+const fetchUsers = async (page: number, pageSize: number, search: string): PromisePost Management
+
+ {fullUrl ?
+ 
:
+
+ )
+ },
+ size: 40,
+ },
+ {
+ accessorKey: 'username',
+ header: 'Username',
+ },
+ {
+ accessorKey: 'email',
+ header: 'Email',
+ },
+ {
+ accessorKey: 'post_count',
+ header: 'Posts',
+ },
+ {
+ accessorKey: 'created_at',
+ header: 'Joined',
+ cell: ({ row }) => (
+ {formatDistanceToNow(new Date(row.original.created_at), { addSuffix: true })}
+ ),
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ cell: ({ row }) => (
+
+ ),
+ }
+ ], [deleteUserMutation.isLoading]);
+
+ const pageCount = data ? Math.ceil(data.total / pagination.pageSize) : 0;
+
+ return (
+
+
+ );
+};
+
+export default UserManagementPage;
diff --git a/admin-frontend/src/pages/index.ts b/admin-frontend/src/pages/index.ts
new file mode 100644
index 0000000..099549a
--- /dev/null
+++ b/admin-frontend/src/pages/index.ts
@@ -0,0 +1,3 @@
+export { default as DashboardPage } from './DashboardPage';
+export { default as PostManagementPage } from './PostManagementPage';
+export { default as UserManagementPage } from './UserManagementPage';
diff --git a/admin-frontend/src/types/index.ts b/admin-frontend/src/types/index.ts
new file mode 100644
index 0000000..61adcee
--- /dev/null
+++ b/admin-frontend/src/types/index.ts
@@ -0,0 +1,28 @@
+export interface DashboardStats {
+ total_users: number;
+ total_posts: number;
+ total_likes: number;
+ total_comments: number;
+}
+
+export interface User {
+ id: string;
+ email: string;
+ username: string;
+ profile_picture_url: string | null;
+ bio: string | null;
+ post_count: number;
+ created_at: string;
+}
+
+export interface Post {
+ id: string;
+ user_email: string;
+ media_url: string;
+ media_type: 'image' | 'video';
+ caption: string;
+ created_at: string;
+ author_username: string;
+ like_count: number;
+ comment_count: number;
+}
diff --git a/admin-frontend/tailwind.config.js b/admin-frontend/tailwind.config.js
new file mode 100644
index 0000000..e5b20fa
--- /dev/null
+++ b/admin-frontend/tailwind.config.js
@@ -0,0 +1,81 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ darkMode: ["class"],
+ content: [
+ './pages/**/*.{ts,tsx}',
+ './components/**/*.{ts,tsx}',
+ './app/**/*.{ts,tsx}',
+ './src/**/*.{ts,tsx}',
+ ],
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ 'acid-green': '#39FF14',
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: `var(--radius)`,
+ md: `calc(var(--radius) - 2px)`,
+ sm: "calc(var(--radius) - 4px)",
+ },
+ fontFamily: {
+ sans: ["var(--font-sans)", 'system-ui', 'sans-serif'],
+ mono: ["var(--font-mono)", 'monospace'],
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: 0 },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: 0 },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+}
diff --git a/admin-frontend/tsconfig.json b/admin-frontend/tsconfig.json
new file mode 100644
index 0000000..5cf9af8
--- /dev/null
+++ b/admin-frontend/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": [
+ "DOM",
+ "DOM.Iterable",
+ "ESNext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "strict": false,
+ "noImplicitAny": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx"
+ },
+ "include": [
+ "src"
+ ]
+}
\ No newline at end of file
diff --git a/admin-frontend/vite.config.ts b/admin-frontend/vite.config.ts
new file mode 100644
index 0000000..691b1ee
--- /dev/null
+++ b/admin-frontend/vite.config.ts
@@ -0,0 +1,27 @@
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { fileURLToPath } from 'url'
+import path from 'path'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ "react-query": "@tanstack/react-query",
+ },
+ },
+ build: {
+ rollupOptions: {
+ onwarn(warning, warn) {
+ if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('use client')) {
+ return;
+ }
+ warn(warning);
+ },
+ },
+ },
+})