Hugging Face's logo

Spaces:
cnmksjs
/
eretrrefvdsfd
Configuration error

App Files Community
eretrrefvdsfd
File size: 10,422 Bytes 
2c6bb7b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
590318c
2c6bb7b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
 
import { useState, useEffect } from 'react'
import { Routes, Route, Link, useLocation } from 'react-router-dom'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { 
  Users, 
  MessageSquare, 
  Settings, 
  BarChart3, 
  Shield,
  Activity,
  Database,
  Server
} from 'lucide-react'

// Mock data - replace with real API calls
const mockStats = {
  totalUsers: 1234,
  activeUsers: 567,
  totalChats: 890,
  totalMessages: 12345,
  storageUsed: 2.5, // GB
  serverUptime: 99.9 // %
}

export default function AdminPage() {
  const [stats] = useState(mockStats)
  const location = useLocation()

  useEffect(() => {
    // Load admin stats
    // TODO: Implement API call
  }, [])

  return (
    <div className="min-h-screen bg-background">

      <div className="border-b">

        <div className="flex h-16 items-center px-6">

          <Shield className="w-6 h-6 mr-2" />

          <h1 className="text-xl font-semibold">Admin Panel</h1>

        </div>

      </div>



      <div className="flex">

        {/* Sidebar */}

        <div className="w-64 border-r min-h-screen p-4">

          <nav className="space-y-2">

            <Link

              to="/admin"

              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${

                location.pathname === '/admin' 

                  ? 'bg-primary text-primary-foreground' 

                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'

              }`}

            >

              <BarChart3 className="w-4 h-4" />

              <span>Dashboard</span>

            </Link>

            <Link

              to="/admin/users"

              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${

                location.pathname === '/admin/users' 

                  ? 'bg-primary text-primary-foreground' 

                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'

              }`}

            >

              <Users className="w-4 h-4" />

              <span>Users</span>

            </Link>

            <Link

              to="/admin/chats"

              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${

                location.pathname === '/admin/chats' 

                  ? 'bg-primary text-primary-foreground' 

                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'

              }`}

            >

              <MessageSquare className="w-4 h-4" />

              <span>Chats</span>

            </Link>

            <Link

              to="/admin/settings"

              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${

                location.pathname === '/admin/settings' 

                  ? 'bg-primary text-primary-foreground' 

                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'

              }`}

            >

              <Settings className="w-4 h-4" />

              <span>Settings</span>

            </Link>

          </nav>

        </div>



        {/* Main content */}

        <div className="flex-1 p-6">

          <Routes>

            <Route path="/" element={<AdminDashboard stats={stats} />} />

            <Route path="/users" element={<AdminUsers />} />

            <Route path="/chats" element={<AdminChats />} />

            <Route path="/settings" element={<AdminSettings />} />

          </Routes>

        </div>

      </div>

    </div>
  )
}

function AdminDashboard({ stats }: { stats: typeof mockStats }) {
  return (
    <div className="space-y-6">

      <div>

        <h2 className="text-2xl font-bold">Dashboard</h2>

        <p className="text-muted-foreground">

          Overview of your ChatApp instance

        </p>

      </div>



      {/* Stats Cards */}

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <Card>

          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">

            <CardTitle className="text-sm font-medium">Total Users</CardTitle>

            <Users className="h-4 w-4 text-muted-foreground" />

          </CardHeader>

          <CardContent>

            <div className="text-2xl font-bold">{stats.totalUsers.toLocaleString()}</div>

            <p className="text-xs text-muted-foreground">

              +12% from last month

            </p>

          </CardContent>

        </Card>



        <Card>

          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">

            <CardTitle className="text-sm font-medium">Active Users</CardTitle>

            <Activity className="h-4 w-4 text-muted-foreground" />

          </CardHeader>

          <CardContent>

            <div className="text-2xl font-bold">{stats.activeUsers.toLocaleString()}</div>

            <p className="text-xs text-muted-foreground">

              Currently online

            </p>

          </CardContent>

        </Card>



        <Card>

          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">

            <CardTitle className="text-sm font-medium">Total Messages</CardTitle>

            <MessageSquare className="h-4 w-4 text-muted-foreground" />

          </CardHeader>

          <CardContent>

            <div className="text-2xl font-bold">{stats.totalMessages.toLocaleString()}</div>

            <p className="text-xs text-muted-foreground">

              +5% from last week

            </p>

          </CardContent>

        </Card>



        <Card>

          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">

            <CardTitle className="text-sm font-medium">Storage Used</CardTitle>

            <Database className="h-4 w-4 text-muted-foreground" />

          </CardHeader>

          <CardContent>

            <div className="text-2xl font-bold">{stats.storageUsed} GB</div>

            <p className="text-xs text-muted-foreground">

              Of 10 GB available

            </p>

          </CardContent>

        </Card>



        <Card>

          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">

            <CardTitle className="text-sm font-medium">Server Uptime</CardTitle>

            <Server className="h-4 w-4 text-muted-foreground" />

          </CardHeader>

          <CardContent>

            <div className="text-2xl font-bold">{stats.serverUptime}%</div>

            <p className="text-xs text-muted-foreground">

              Last 30 days

            </p>

          </CardContent>

        </Card>



        <Card>

          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">

            <CardTitle className="text-sm font-medium">Total Chats</CardTitle>

            <MessageSquare className="h-4 w-4 text-muted-foreground" />

          </CardHeader>

          <CardContent>

            <div className="text-2xl font-bold">{stats.totalChats.toLocaleString()}</div>

            <p className="text-xs text-muted-foreground">

              Groups and direct messages

            </p>

          </CardContent>

        </Card>

      </div>



      {/* Recent Activity */}

      <Card>

        <CardHeader>

          <CardTitle>Recent Activity</CardTitle>

          <CardDescription>

            Latest events in your ChatApp instance

          </CardDescription>

        </CardHeader>

        <CardContent>

          <div className="space-y-4">

            <div className="flex items-center space-x-4">

              <div className="w-2 h-2 bg-green-500 rounded-full"></div>

              <div className="flex-1">

                <p className="text-sm">New user registered: john_doe</p>

                <p className="text-xs text-muted-foreground">2 minutes ago</p>

              </div>

            </div>

            <div className="flex items-center space-x-4">

              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>

              <div className="flex-1">

                <p className="text-sm">New group created: "Project Team"</p>

                <p className="text-xs text-muted-foreground">5 minutes ago</p>

              </div>

            </div>

            <div className="flex items-center space-x-4">

              <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>

              <div className="flex-1">

                <p className="text-sm">Server maintenance completed</p>

                <p className="text-xs text-muted-foreground">1 hour ago</p>

              </div>

            </div>

          </div>

        </CardContent>

      </Card>

    </div>
  )
}

function AdminUsers() {
  return (
    <div className="space-y-6">

      <div>

        <h2 className="text-2xl font-bold">User Management</h2>

        <p className="text-muted-foreground">

          Manage users and their permissions

        </p>

      </div>

      

      <Card>

        <CardContent className="p-6">

          <p className="text-center text-muted-foreground">

            User management interface coming soon...

          </p>

        </CardContent>

      </Card>

    </div>
  )
}

function AdminChats() {
  return (
    <div className="space-y-6">

      <div>

        <h2 className="text-2xl font-bold">Chat Management</h2>

        <p className="text-muted-foreground">

          Monitor and manage chats and groups

        </p>

      </div>

      

      <Card>

        <CardContent className="p-6">

          <p className="text-center text-muted-foreground">

            Chat management interface coming soon...

          </p>

        </CardContent>

      </Card>

    </div>
  )
}

function AdminSettings() {
  return (
    <div className="space-y-6">

      <div>

        <h2 className="text-2xl font-bold">System Settings</h2>

        <p className="text-muted-foreground">

          Configure your ChatApp instance

        </p>

      </div>

      

      <Card>

        <CardContent className="p-6">

          <p className="text-center text-muted-foreground">

            Settings interface coming soon...

          </p>

        </CardContent>

      </Card>

    </div>
  )
}