first commit

components/users/deleted-user-table.tsx

@@ -0,0 +1,90 @@
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { RefreshCcw, ShieldAlert } from "lucide-react";
+import { User } from "@/lib/features/auth/authSlice";
+import { getAvatarUrl } from "@/lib/utils";
+
+interface DeletedUserTableProps {
+    users: (User & { deleted_at?: string })[];
+    onRestore: (id: string) => void;
+    onHardDelete: (id: string) => void;
+}
+
+export function DeletedUserTable({ users, onRestore, onHardDelete }: DeletedUserTableProps) {
+    return (
+        <div className="rounded-md border border-destructive/20 bg-destructive/5">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className="w-14">Avatar</TableHead>
+                        <TableHead>Username (Silinmiş)</TableHead>
+                        <TableHead>Email</TableHead>
+                        <TableHead>Silinme Tarihi</TableHead>
+                        <TableHead className="text-right">İşlemler</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {users.length === 0 ? (
+                        <TableRow>
+                            <TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
+                                Çöp kutusu boş.
+                            </TableCell>
+                        </TableRow>
+                    ) : (
+                        users.map((user) => (
+                            <TableRow key={user.id}>
+                                <TableCell>
+                                    <Avatar className="h-9 w-9 grayscale opacity-50">
+                                        <AvatarImage src={getAvatarUrl(user.avatar_url)} alt={user.username} />
+                                        <AvatarFallback className="text-xs">
+                                            {user.username?.slice(0, 2).toUpperCase() || "?"}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                </TableCell>
+                                <TableCell className="font-medium text-muted-foreground line-through">
+                                    {user.username}
+                                </TableCell>
+                                <TableCell className="text-muted-foreground">{user.email}</TableCell>
+                                <TableCell className="text-muted-foreground text-sm">
+                                    {user.deleted_at ? new Date(user.deleted_at).toLocaleString('tr-TR') : "-"}
+                                </TableCell>
+                                <TableCell className="text-right">
+                                    <div className="inline-flex rounded-md border border-input bg-background [&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:first-child]:border-r [&>button:first-child]:border-input">
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-9 w-9 text-green-600 hover:text-green-700 hover:bg-green-100 dark:hover:bg-green-900/20"
+                                            onClick={() => onRestore(user.id)}
+                                            title="Geri Yükle"
+                                        >
+                                            <RefreshCcw className="h-4 w-4" />
+                                            <span className="sr-only">Geri Yükle</span>
+                                        </Button>
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+                                            onClick={() => onHardDelete(user.id)}
+                                            title="Kalıcı Sil (Hard)"
+                                        >
+                                            <ShieldAlert className="h-4 w-4" />
+                                            <span className="sr-only">Kalıcı Sil</span>
+                                        </Button>
+                                    </div>
+                                </TableCell>
+                            </TableRow>
+                        ))
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}