MIF_E31221222/sigap-website/components/admin/users/user-management.tsx

"use client";

import { useState } from "react";
import {
  PlusCircle,
  Search,
  Filter,
  MoreHorizontal,
  X,
  ChevronDown,
  UserPlus,
  Mail,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useQuery } from "@tanstack/react-query";
import { fetchUsers } from "@/app/protected/(admin)/dashboard/user-management/action";
import { User } from "@/src/models/users/users.model";
import { toast } from "sonner";
import { DataTable } from "./data-table";
import { InviteUserDialog } from "./invite-user";
import { AddUserDialog } from "./add-user-dialog";
import { UserDetailsSheet } from "./sheet";

export default function UserManagement() {
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedUser, setSelectedUser] = useState<User | null>(null);
  const [isSheetOpen, setIsSheetOpen] = useState(false);
  const [isAddUserOpen, setIsAddUserOpen] = useState(false);
  const [isInviteUserOpen, setIsInviteUserOpen] = useState(false);

  // Use React Query to fetch users
  const {
    data: users = [],
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      try {
        return await fetchUsers();
      } catch (error) {
        toast.error("Failed to fetch users");
        return [];
      }
    },
  });

  const handleUserClick = (user: User) => {
    setSelectedUser(user);
    setIsSheetOpen(true);
  };

  const handleUserUpdate = () => {
    refetch();
    setIsSheetOpen(false);
  };

  const filteredUsers = users.filter((user) => {
    if (!searchQuery) return true;

    const query = searchQuery.toLowerCase();
    return (
      user.email?.toLowerCase().includes(query) ||
      user.phone?.toLowerCase().includes(query) ||
      user.id.toLowerCase().includes(query)
    );
  });

  const columns = [
    {
      id: "email",
      header: "Email",
      cell: ({ row }: { row: { original: User } }) => (
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
            {row.original.email?.[0]?.toUpperCase() || "?"}
          </div>
          <div>
            <div className="font-medium">
              {row.original.email || "No email"}
            </div>
            <div className="text-xs text-muted-foreground">
              {row.original.id}
            </div>
          </div>
        </div>
      ),
      filterFn: (row: any, id: string, value: string) => {
        return row.original.email?.toLowerCase().includes(value.toLowerCase());
      },
    },
    {
      id: "phone",
      header: "Phone",
      cell: ({ row }: { row: { original: User } }) => row.original.phone || "-",
      filterFn: (row: any, id: string, value: string) => {
        return row.original.phone?.toLowerCase().includes(value.toLowerCase());
      },
    },
    {
      id: "lastSignIn",
      header: "Last Sign In",
      cell: ({ row }: { row: { original: User } }) => {
        return row.original.last_sign_in_at
          ? new Date(row.original.last_sign_in_at).toLocaleString()
          : "Never";
      },
    },
    {
      id: "createdAt",
      header: "Created At",
      cell: ({ row }: { row: { original: User } }) => {
        return new Date(row.original.created_at).toLocaleString();
      },
    },
    {
      id: "status",
      header: "Status",
      cell: ({ row }: { row: { original: User } }) => {
        if (row.original.banned_until) {
          return <Badge variant="destructive">Banned</Badge>;
        }
        if (!row.original.email_confirmed_at) {
          return <Badge variant="outline">Unconfirmed</Badge>;
        }
        return <Badge variant="default">Active</Badge>;
      },
      filterFn: (row: any, id: string, value: string) => {
        const status = row.original.banned_until
          ? "banned"
          : !row.original.email_confirmed_at
            ? "unconfirmed"
            : "active";
        return status.includes(value.toLowerCase());
      },
    },
    {
      id: "actions",
      header: "",
      cell: ({ row }: { row: { original: User } }) => (
        <Button
          variant="ghost"
          size="icon"
          onClick={(e) => {
            e.stopPropagation();
            handleUserClick(row.original);
          }}
        >
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      ),
    },
  ];

  return (
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
        <div className="relative w-full sm:w-72">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search users..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
          {searchQuery && (
            <Button
              variant="ghost"
              size="icon"
              className="absolute right-0 top-0 h-9 w-9"
              onClick={() => setSearchQuery("")}
            >
              <X className="h-4 w-4" />
            </Button>
          )}
        </div>
        <div className="flex gap-2 w-full sm:w-auto">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" className="gap-1">
                <PlusCircle className="h-4 w-4" />
                Add User
                <ChevronDown className="h-4 w-4 ml-1" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => setIsAddUserOpen(true)}>
                <UserPlus className="h-4 w-4 mr-2" />
                Create new user
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setIsInviteUserOpen(true)}>
                <Mail className="h-4 w-4 mr-2" />
                Send invitation
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <Button variant="outline" size="icon">
            <Filter className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <DataTable
        columns={columns}
        data={filteredUsers}
        loading={isLoading}
        onRowClick={(user) => handleUserClick(user)}
      />

      {selectedUser && (
        <UserDetailsSheet
          user={selectedUser}
          open={isSheetOpen}
          onOpenChange={setIsSheetOpen}
          onUserUpdate={handleUserUpdate}
        />
      )}

      <AddUserDialog
        open={isAddUserOpen}
        onOpenChange={setIsAddUserOpen}
        onUserAdded={() => refetch()}
      />

      <InviteUserDialog
        open={isInviteUserOpen}
        onOpenChange={setIsInviteUserOpen}
        onUserInvited={() => refetch()}
      />
    </div>
  );
}