reui-blocks/blocks/settings-members3.tsx

"use client";

import { Mail, MoreHorizontal, Shield, UserPlus } from "lucide-react";
import { useState } from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

interface Member {
  id: string;
  name: string;
  email: string;
  role: "admin" | "member" | "viewer";
  avatar?: string;
  joinedAt: string;
}

interface SettingsMembers3Props {
  heading?: string;
  description?: string;
  members?: Member[];
  className?: string;
}

const roleColors = {
  admin: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400",
  member: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
  viewer: "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
};

const getRoleLabel = (role: Member["role"]) => {
  const labels: Record<Member["role"], string> = {
    admin: "مدیر سیستم",
    member: "کارشناس فروش",
    viewer: "فقط مشاهده",
  };
  return labels[role];
};

const SettingsMembers3 = ({
  heading = "تیم فروش",
  description = "اعضای تیم و سطح دسترسی هر نفر به سامانه مدیریت ارتباط با مشتری را مدیریت کنید.",
  members = [
    {
      id: "1",
      name: "مریم چناری",
      email: "sarah.chen@company.io",
      role: "admin",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
      joinedAt: "ژانویه ۲۰۲۴",
    },
    {
      id: "2",
      name: "مهدی جعفری",
      email: "marcus.j@company.io",
      role: "member",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
      joinedAt: "مارس ۲۰۲۴",
    },
    {
      id: "3",
      name: "النا محمدی",
      email: "elena.r@company.io",
      role: "member",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
      joinedAt: "آوریل ۲۰۲۴",
    },
    {
      id: "4",
      name: "داوود پارک",
      email: "david.p@company.io",
      role: "viewer",
      joinedAt: "ژوئن ۲۰۲۴",
    },
    {
      id: "5",
      name: "آیدا پناهی",
      email: "aisha.p@company.io",
      role: "member",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
      joinedAt: "اوت ۲۰۲۴",
    },
    {
      id: "6",
      name: "توماس رضایی",
      email: "thomas.w@company.io",
      role: "viewer",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
      joinedAt: "اکتبر ۲۰۲۴",
    },
  ],
  className,
}: SettingsMembers3Props) => {
  const [isInviteOpen, setIsInviteOpen] = useState(false);

  return (
    <section dir="rtl" lang="fa" className={cn("w-full py-32", className)}>
      <div className="w-full px-4 sm:px-6 lg:px-8">
        <div className="flex w-full flex-col gap-8">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="space-y-1">
              <h2 className="text-xl font-semibold tracking-tight">
                {heading}
              </h2>
              <p className="text-sm text-muted-foreground">{description}</p>
            </div>
            <Dialog open={isInviteOpen} onOpenChange={setIsInviteOpen}>
              <DialogTrigger asChild>
                <Button>
                  <UserPlus className="size-4" />
                  دعوت عضو
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>دعوت عضو جدید</DialogTitle>
                  <DialogDescription>
                    دعوتنامه برای پیوستن به فضای کاری سامانه مدیریت ارتباط با مشتری ارسال کنید.
                  </DialogDescription>
                </DialogHeader>
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    setIsInviteOpen(false);
                  }}
                  className="space-y-4"
                >
                  <div className="space-y-2">
                    <Label htmlFor="email">ایمیل سازمانی</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="colleague@company.io"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="role">سطح دسترسی</Label>
                    <Select defaultValue="member">
                      <SelectTrigger id="role">
                        <SelectValue placeholder="انتخاب نقش" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="admin">مدیر سیستم</SelectItem>
                        <SelectItem value="member">کارشناس فروش</SelectItem>
                        <SelectItem value="viewer">فقط مشاهده</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <DialogFooter>
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => setIsInviteOpen(false)}
                    >
                      انصراف
                    </Button>
                    <Button type="submit">ارسال دعوتنامه</Button>
                  </DialogFooter>
                </form>
              </DialogContent>
            </Dialog>
          </div>

          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {members.map((member) => (
              <Card key={member.id}>
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-3">
                      <Avatar className="size-12">
                        <AvatarImage src={member.avatar} alt={`آواتار ${member.name}`} />
                        <AvatarFallback className="text-sm font-medium">
                          {member.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div className="space-y-1">
                        <CardTitle className="text-base">
                          {member.name}
                        </CardTitle>
                        <Badge
                          variant="secondary"
                          className={cn("text-xs", roleColors[member.role])}
                        >
                          <Shield className="me-1 size-3" />
                          {getRoleLabel(member.role)}
                        </Badge>
                      </div>
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="size-8">
                          <MoreHorizontal className="size-4" />
                          <span className="sr-only">گزینه‌های بیشتر</span>
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>تغییر سطح دسترسی</DropdownMenuItem>
                        <DropdownMenuItem>مشاهده فعالیت اخیر</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem className="text-destructive">
                          حذف از فضای کاری
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </CardHeader>
                <CardContent className="space-y-2">
                  <CardDescription className="flex items-center gap-2 text-sm">
                    <Mail className="size-4" />
                    {member.email}
                  </CardDescription>
                  <p className="text-xs text-muted-foreground">
                    عضو از {member.joinedAt}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { SettingsMembers3 };