{row.getValue('emoji_shortcode')}
,
+ },
+ {
+ accessorKey: 'title',
+ header: 'Title',
+ cell: ({ row }) => {row.getValue('title')}
,
+ },
+ {
+ accessorKey: 'emoji_text',
+ header: 'Display',
+ cell: ({ row }) => {
+ const emoji = row.original;
+ if (emoji.emoji_text) {
+ return {emoji.emoji_text}
;
+ }
+ if (emoji.image_url) {
+ return N/A
;
+ },
+ },
+ {
+ accessorKey: 'sprite_mode',
+ header: 'Type',
+ cell: ({ row }) => {
+ const emoji = row.original;
+ let type = 'text';
+ if (emoji.sprite_mode) type = 'sprite';
+ else if (emoji.image_url) type = 'image';
+
+ return
+ {aliases.slice(0, 2).map((alias) => (
+
+ {alias.alias}
+
+ ))}
+ {aliases.length > 2 && (
+
+ +{aliases.length - 2} more
+
+ )}
+
+ );
+ },
+ },
+ {
+ accessorKey: 'created_at',
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ cell: ({ row }) => {
+ const date = new Date(row.getValue('created_at'));
+ return {date.toLocaleDateString()}
;
+ },
+ },
+ {
+ id: 'actions',
+ cell: ({ row }) => {
+ const emoji = row.original;
+
+ return (
+
+
+ );
+}
diff --git a/resources/js/components/ui/table.tsx b/resources/js/components/ui/table.tsx
new file mode 100644
index 000000000..5513a5cdb
--- /dev/null
+++ b/resources/js/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+ return (
+
+ table.getColumn('emoji_shortcode')?.setFilterValue(event.target.value)}
+ className="max-w-sm"
+ />
+
+
+
+
+
+
+
+ {table.getFilteredRowModel().rows.length} emoji(s) total.
+
+
+
+
+
+
+
+ )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+ return (
+
+ )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+ return (
+
+ )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+ return (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+
+ {flash?.success && (
+
+
+ );
+}
diff --git a/resources/js/pages/admin/emojis/index.tsx b/resources/js/pages/admin/emojis/index.tsx
new file mode 100644
index 000000000..3e26cb800
--- /dev/null
+++ b/resources/js/pages/admin/emojis/index.tsx
@@ -0,0 +1,161 @@
+import { type BreadcrumbItem, type SharedData } from '@/types';
+import { Head, Link, router, usePage } from '@inertiajs/react';
+import { Filter, Plus } from 'lucide-react';
+import { useState } from 'react';
+
+import { EmojiDataTable, type Emoji } from '@/components/emoji-data-table';
+import HeadingSmall from '@/components/heading-small';
+import { Button } from '@/components/ui/button';
+import AppLayout from '@/layouts/app-layout';
+
+const breadcrumbs: BreadcrumbItem[] = [
+ {
+ title: 'Control Panel',
+ href: '/admin',
+ },
+ {
+ title: 'Emoji Management',
+ href: '/admin/emojis',
+ },
+];
+
+type Category = {
+ id: number;
+ title: string;
+ display_order: number;
+ emojis_count?: number;
+};
+
+type PaginationLink = {
+ url: string | null;
+ label: string;
+ active: boolean;
+};
+
+type PageProps = {
+ emojis: {
+ data: Emoji[];
+ links: PaginationLink[];
+ current_page: number;
+ per_page: number;
+ total: number;
+ last_page: number;
+ };
+ categories: Category[];
+ filters: {
+ search?: string;
+ category_id?: number;
+ };
+};
+
+export default function AdminEmojiIndex({ emojis, categories, filters }: PageProps) {
+ const { flash } = usePage
+
+ )}
+
+ {flash.success}
+
+
+
+
+
+
+
+
+
+
+
+
+ Administrative emoji management - full control over emoji properties
+
+ {flash?.success && (
+
+
+ );
+}
diff --git a/resources/js/pages/admin/index.tsx b/resources/js/pages/admin/index.tsx
new file mode 100644
index 000000000..6dce33cca
--- /dev/null
+++ b/resources/js/pages/admin/index.tsx
@@ -0,0 +1,177 @@
+import { type BreadcrumbItem } from '@/types';
+import { Head, Link } from '@inertiajs/react';
+import { BarChart3, Database, Settings, Shield, Smile, Users } from 'lucide-react';
+
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import AppLayout from '@/layouts/app-layout';
+
+const breadcrumbs: BreadcrumbItem[] = [
+ {
+ title: 'Control Panel',
+ href: '/admin',
+ },
+];
+
+const adminSections = [
+ {
+ title: 'Emoji Management',
+ description: 'Manage custom emojis, categories, and aliases',
+ icon: Smile,
+ href: '/admin/emojis',
+ color: 'bg-yellow-500',
+ },
+ {
+ title: 'User Management',
+ description: 'Manage users, roles, and permissions',
+ icon: Users,
+ href: '/admin/users',
+ color: 'bg-blue-500',
+ disabled: true,
+ },
+ {
+ title: 'System Settings',
+ description: 'Configure application settings and preferences',
+ icon: Settings,
+ href: '/admin/settings',
+ color: 'bg-gray-500',
+ disabled: true,
+ },
+ {
+ title: 'Database Management',
+ description: 'Database operations and maintenance',
+ icon: Database,
+ href: '/admin/database',
+ color: 'bg-green-500',
+ disabled: true,
+ },
+ {
+ title: 'Analytics',
+ description: 'View system analytics and reports',
+ icon: BarChart3,
+ href: '/admin/analytics',
+ color: 'bg-purple-500',
+ disabled: true,
+ },
+ {
+ title: 'Security',
+ description: 'Security settings and audit logs',
+ icon: Shield,
+ href: '/admin/security',
+ color: 'bg-red-500',
+ disabled: true,
+ },
+];
+
+export default function AdminIndex() {
+ return (
+
+
+ )}
+
+ {flash.success}
+
+
+
+ {/* Stats */}
+
+
+
+
+
+
+
+
+ {/* Advanced Filters */}
+
+
+ {emojis.total || 0}
+ Total emojis
+
+
+ {categories.length}
+ Categories
+
+
+
+ {emojis.data?.reduce((acc, emoji) => acc + (emoji.aliases?.length || 0), 0) || 0}
+
+ Total aliases
+
+
+ {emojis.data?.filter((emoji) => emoji.sprite_mode).length || 0}
+ Sprite emojis
+
+
+
+ {/* Data Table */}
+
+
+
+
+
+
+
+
+ {/* Pagination */}
+ {emojis.links && emojis.links.length > 3 && (
+
+ {emojis.links.map((link, index) => (
+
+ )}
+
+
+
+ Recent Activity
+ Latest administrative actions and system events
+
+
+
+
+
+
+ );
+}
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index 3f73f0210..673be789b 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -14,7 +14,7 @@ export default function Dashboard() {
return (
+ {adminSections.map((section) => {
+ const IconComponent = section.icon;
+
+ return (
+
+
+
+
+ {section.description}
+
+ {section.disabled ? (
+
+ ) : (
+
+
+
+ )}
+
+
+ );
+ })}
+
+
+ {/* Quick Stats */}
+
+
+
+
+
+ {section.title}
+
+
+
+
+ Total Users
+
+
+
+
+ Active Sessions
+
+
+
+
+ System Load
+
+
+
+
+ Storage Used
+
+
+
+
+ {/* Recent Activity */}
+ 1,234
+ 89
+ 12%
+ 2.4 GB
+
+
+
+
+
+
+ User registration spike
+ 25 new users in the last hour
+ 2 min ago
+
+
+
+
+ System backup completed
+ Database backup finished successfully
+ 1 hour ago
+
+
+
+
+ Security scan completed
+ No threats detected
+ 3 hours ago
+
+