Refactor admin page layout

src/components/moderation/ModerationQueue.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
-import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image } from 'lucide-react';
+import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { format } from 'date-fns';
@@ -455,56 +455,120 @@ export function ModerationQueue() {
     );
   };
 
+  const clearFilters = () => {
+    setActiveEntityFilter('all');
+    setActiveStatusFilter('pending');
+  };
+
+  const getEntityFilterIcon = (filter: EntityFilter) => {
+    switch (filter) {
+      case 'reviews': return <MessageSquare className="w-4 h-4" />;
+      case 'submissions': return <FileText className="w-4 h-4" />;
+      case 'photos': return <Image className="w-4 h-4" />;
+      default: return <Filter className="w-4 h-4" />;
+    }
+  };
+
   return (
     <div className="space-y-4">
-      {/* Entity Type Filter */}
-      <Tabs value={activeEntityFilter} onValueChange={(value) => setActiveEntityFilter(value as EntityFilter)}>
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="all" className="flex items-center gap-2">
-            <Filter className="w-4 h-4" />
-            All
-          </TabsTrigger>
-          <TabsTrigger value="reviews" className="flex items-center gap-2">
-            <MessageSquare className="w-4 h-4" />
-            Reviews
-          </TabsTrigger>
-          <TabsTrigger value="submissions" className="flex items-center gap-2">
-            <FileText className="w-4 h-4" />
-            Submissions
-          </TabsTrigger>
-          <TabsTrigger value="photos" className="flex items-center gap-2">
-            <Image className="w-4 h-4" />
-            Photos
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
+      {/* Filter Bar */}
+      <div className="flex flex-col sm:flex-row gap-4 p-4 bg-muted/50 rounded-lg">
+        <div className="flex flex-col sm:flex-row gap-4 flex-1">
+          <div className="space-y-2 min-w-[140px]">
+            <Label className="text-sm font-medium">Entity Type</Label>
+            <Select value={activeEntityFilter} onValueChange={(value) => setActiveEntityFilter(value as EntityFilter)}>
+              <SelectTrigger>
+                <SelectValue>
+                  <div className="flex items-center gap-2">
+                    {getEntityFilterIcon(activeEntityFilter)}
+                    <span className="capitalize">{activeEntityFilter === 'all' ? 'All Items' : activeEntityFilter}</span>
+                  </div>
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">
+                  <div className="flex items-center gap-2">
+                    <Filter className="w-4 h-4" />
+                    All Items
+                  </div>
+                </SelectItem>
+                <SelectItem value="reviews">
+                  <div className="flex items-center gap-2">
+                    <MessageSquare className="w-4 h-4" />
+                    Reviews
+                  </div>
+                </SelectItem>
+                <SelectItem value="submissions">
+                  <div className="flex items-center gap-2">
+                    <FileText className="w-4 h-4" />
+                    Submissions
+                  </div>
+                </SelectItem>
+                <SelectItem value="photos">
+                  <div className="flex items-center gap-2">
+                    <Image className="w-4 h-4" />
+                    Photos
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
 
-      {/* Status Filter */}
-      <Tabs value={activeStatusFilter} onValueChange={(value) => setActiveStatusFilter(value as StatusFilter)}>
-        <TabsList className="grid w-full grid-cols-5">
-          <TabsTrigger value="all" className="flex items-center gap-2">
-            <Filter className="w-4 h-4" />
-            All
-          </TabsTrigger>
-          <TabsTrigger value="pending" className="flex items-center gap-2">
-            <Eye className="w-4 h-4" />
-            Pending
-          </TabsTrigger>
-          <TabsTrigger value="flagged" className="flex items-center gap-2">
-            <XCircle className="w-4 h-4" />
-            Flagged
-          </TabsTrigger>
-          <TabsTrigger value="approved" className="flex items-center gap-2">
-            <CheckCircle className="w-4 h-4" />
-            Approved
-          </TabsTrigger>
-          <TabsTrigger value="rejected" className="flex items-center gap-2">
-            <XCircle className="w-4 h-4" />
-            Rejected
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
+          <div className="space-y-2 min-w-[120px]">
+            <Label className="text-sm font-medium">Status</Label>
+            <Select value={activeStatusFilter} onValueChange={(value) => setActiveStatusFilter(value as StatusFilter)}>
+              <SelectTrigger>
+                <SelectValue>
+                  <span className="capitalize">{activeStatusFilter === 'all' ? 'All Status' : activeStatusFilter}</span>
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="pending">Pending</SelectItem>
+                {activeEntityFilter !== 'submissions' && activeEntityFilter !== 'photos' && (
+                  <SelectItem value="flagged">Flagged</SelectItem>
+                )}
+                <SelectItem value="approved">Approved</SelectItem>
+                <SelectItem value="rejected">Rejected</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
 
+        {(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
+          <div className="flex items-end">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={clearFilters}
+              className="flex items-center gap-2"
+            >
+              <X className="w-4 h-4" />
+              Clear Filters
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Active Filters Display */}
+      {(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>Active filters:</span>
+          {activeEntityFilter !== 'all' && (
+            <Badge variant="secondary" className="flex items-center gap-1">
+              {getEntityFilterIcon(activeEntityFilter)}
+              {activeEntityFilter}
+            </Badge>
+          )}
+          {activeStatusFilter !== 'pending' && (
+            <Badge variant="secondary" className="capitalize">
+              {activeStatusFilter}
+            </Badge>
+          )}
+        </div>
+      )}
+
+      {/* Queue Content */}
       <QueueContent />
     </div>
   );

src/pages/Admin.tsx

@@ -98,8 +98,24 @@ export default function Admin() {
         </Card>
       </div>
 
+      {/* User Management Section */}
+      <Card className="mb-8">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Users className="w-5 h-5" />
+            User Management
+          </CardTitle>
+          <CardDescription>
+            Manage user profiles and role assignments
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <UserManagement />
+        </CardContent>
+      </Card>
+
       <Tabs defaultValue="queue" className="space-y-6">
-        <TabsList className="grid w-full grid-cols-3">
+        <TabsList className="grid w-full grid-cols-2">
           <TabsTrigger value="queue" className="flex items-center gap-2">
             <FileText className="w-4 h-4" />
             Moderation Queue
@@ -108,10 +124,6 @@ export default function Admin() {
             <Flag className="w-4 h-4" />
             Reports
           </TabsTrigger>
-          <TabsTrigger value="users" className="flex items-center gap-2">
-            <Users className="w-4 h-4" />
-            User Management
-          </TabsTrigger>
         </TabsList>
         
         <TabsContent value="queue">
@@ -141,10 +153,6 @@ export default function Admin() {
             </CardContent>
           </Card>
         </TabsContent>
-        
-        <TabsContent value="users">
-          <UserManagement />
-        </TabsContent>
       </Tabs>
       </div>
     </>