feat(households): hane seçici, ayarlar, admin hane yönetimi ve hane-yok sayfası

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-05 02:35:01 +03:00
parent de91f2505a
commit 3644e081b1
21 changed files with 1427 additions and 29 deletions
@@ -0,0 +1,169 @@
+"use client";
+
+import { UserMinus } from "lucide-react";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { initials } from "@/components/layout/user-menu";
+import { tr } from "@/i18n/tr";
+import type { ActionResult } from "@/lib/action-result";
+import { HOUSEHOLD_ROLES, type HouseholdRole } from "../types";
+
+export type MemberRow = {
+  userId: string;
+  name: string;
+  username: string;
+  role: HouseholdRole;
+  banned: boolean;
+};
+
+type Props = {
+  members: MemberRow[];
+  householdName: string;
+  currentUserId: string;
+  canManage: boolean;
+  onSetRole: (userId: string, role: HouseholdRole) => Promise<ActionResult>;
+  onRemove: (userId: string) => Promise<ActionResult>;
+};
+
+/** Hane üyeleri: owner (veya admin) rol değiştirir / haneden çıkarır. Kurallar sunucuda. */
+export function MembersList({
+  members,
+  householdName,
+  currentUserId,
+  canManage,
+  onSetRole,
+  onRemove,
+}: Props) {
+  const [pending, startTransition] = useTransition();
+  const [removing, setRemoving] = useState<MemberRow | null>(null);
+  const t = tr.settings;
+
+  function changeRole(member: MemberRow, role: HouseholdRole) {
+    startTransition(async () => {
+      const result = await onSetRole(member.userId, role);
+      if (result.ok) toast.success(t.roleChanged(member.name));
+      else toast.error(result.error);
+    });
+  }
+
+  function confirmRemove() {
+    const member = removing;
+    if (!member) return;
+    startTransition(async () => {
+      const result = await onRemove(member.userId);
+      if (result.ok) {
+        toast.success(t.memberRemoved(member.name));
+        setRemoving(null);
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+  return (
+    <>
+      <ul className="divide-y rounded-xl border" aria-busy={pending}>
+        {members.map((m) => (
+          <li key={m.userId} className="flex flex-wrap items-center gap-3 p-3">
+            <Avatar>
+              <AvatarFallback className="bg-primary/10 text-xs font-medium text-primary">
+                {initials(m.name)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0 flex-1">
+              <p className="truncate font-medium">
+                {m.name}
+                {m.userId === currentUserId ? (
+                  <span className="ml-1.5 text-xs font-normal text-muted-foreground">
+                    ({tr.adminUsers.you})
+                  </span>
+                ) : null}
+              </p>
+              <p className="truncate text-xs text-muted-foreground">@{m.username}</p>
+            </div>
+            {m.banned ? <Badge variant="destructive">{t.banned}</Badge> : null}
+            {canManage ? (
+              <div className="flex items-center gap-1">
+                <Select
+                  value={m.role}
+                  onValueChange={(v) => changeRole(m, v as HouseholdRole)}
+                  disabled={pending}
+                >
+                  <SelectTrigger
+                    size="sm"
+                    className="w-32"
+                    aria-label={`${m.name} — ${t.changeRole}`}
+                  >
+                    <SelectValue>{tr.household.roles[m.role]}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent align="end">
+                    {HOUSEHOLD_ROLES.map((r) => (
+                      <SelectItem key={r} value={r}>
+                        <span className="flex flex-col">
+                          <span>{tr.household.roles[r]}</span>
+                          <span className="text-xs text-muted-foreground">
+                            {tr.household.roleHints[r]}
+                          </span>
+                        </span>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => setRemoving(m)}
+                  disabled={pending}
+                  aria-label={`${m.name} — ${t.removeMember}`}
+                  title={t.removeMember}
+                >
+                  <UserMinus />
+                </Button>
+              </div>
+            ) : (
+              <Badge variant={m.role === "owner" ? "default" : "secondary"}>
+                {tr.household.roles[m.role]}
+              </Badge>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <AlertDialog open={Boolean(removing)} onOpenChange={(open) => !open && setRemoving(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t.removeTitle}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {removing ? t.removeDescription(removing.name, householdName) : null}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>{tr.common.cancel}</AlertDialogCancel>
+            <Button variant="destructive" onClick={confirmRemove} disabled={pending}>
+              {t.removeConfirm}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}