Skip to content

GitLab

Closed
Created by André Sacilotto Santos@andre.santosOwner
Report abuse

Feature/page solicitacoes admin

Mudanças

Como testar

Rodar back e front, ir até a page solicitações

import { useState } from "react"; import { type ColumnDef } from "@tanstack/react-table"; import { DataTable } from "@/components/table/index"; import { Checkbox } from "@/components/ui/checkbox"; import { FaUser, FaRegCalendarCheck } from "react-icons/fa"; import { Button } from "@/components/ui/button"; import { MdMoreVert, MdVisibility } from "react-icons/md"; import { useCallback } from "react"; import { useAdminRequests } from "@/hooks/useAdminRequests";

type Request = { id: string; name: string; email: string; status: string; };

const professorStatus = ["Approved", "Rejected", "Pending"]; const reservationStatus = [ "Confirmed", "Pending", "User Requested", "Payment Requested", "Cancellation Requested", "Edit Requested", ];

const professorColumns: ColumnDef[] = [ { accessorKey: "name", header: () => Name, cell: (info) => info.getValue(), }, { accessorKey: "status", header: () => Status, cell: (info) => info.getValue(), }, { accessorKey: "email", header: () => Email, cell: (info) => info.getValue(), }, { id: "actions", header: () => Actions, cell: ({ row }) => { const request: Request = row.original; return (

View
); }, }, ];

function ApproveButton({ requestId }: { requestId: string }) { const { approveMutation } = useAdminRequests();

const handleApprove = useCallback(() => { approveMutation.mutate(requestId); }, [approveMutation, requestId]);

return ( {approveMutation.isPending ? ( ⏳ ) : ( )} Approve ); }

const reservationColumns: ColumnDef[] = [ { accessorKey: "name", header: () => Name, cell: (info) => info.getValue(), }, { accessorKey: "status", header: () => Status, cell: (info) => info.getValue(), }, { accessorKey: "email", header: () => Email, cell: (info) => info.getValue(), }, { id: "actions", header: () => Actions, cell: ({ row }) => { const request: Request = row.original; return (

View
); }, }, ];

export default function AdminRequestsPage() { const [tab, setTab] = useState<"professor" | "reservation">("professor"); const [selectedStatus, setSelectedStatus] = useState<string[]>([]);

const { professorQuery, reservationQuery } = useAdminRequests();

const loading = tab === "professor" ? professorQuery.isLoading : reservationQuery.isLoading; const error = tab === "professor" ? professorQuery.error : reservationQuery.error; // Garante que sempre seja array, mesmo que a API retorne objeto const professorRequests: Request[] = Array.isArray(professorQuery.data) ? professorQuery.data : professorQuery.data?.data || professorQuery.data?.results || [];

const reservationRequests: Request[] = Array.isArray(reservationQuery.data) ? reservationQuery.data : reservationQuery.data?.data || reservationQuery.data?.results || [];

const handleStatusChange = (status: string) => { setSelectedStatus((prev) => prev.includes(status) ? prev.filter((s) => s !== status) : [...prev, status] ); };

const filteredRequests = tab === "professor" ? selectedStatus.length ? professorRequests.filter((d) => selectedStatus.includes(d.status)) : professorRequests : selectedStatus.length ? reservationRequests.filter((d) => selectedStatus.includes(d.status)) : reservationRequests;

const [filters, setFilters] = useState({ page: 0, limit: 10, sort: undefined as string | undefined, dir: undefined as "asc" | "desc" | undefined, });

if (loading) { return

Loading...
; } if (error) { return
Error loading requests.
; }

return (

<button className={flex items-center gap-2 px-4 py-2 rounded-lg font-semibold ${ tab === "professor" ? "bg-green-500 text-white" : "bg-gray-200 text-gray-700" }} onClick={() => { setTab("professor"); setSelectedStatus([]); }} > Professor Requests <button className={flex items-center gap-2 px-4 py-2 rounded-lg font-semibold ${ tab === "reservation" ? "bg-green-500 text-white" : "bg-gray-200 text-gray-700" }} onClick={() => { setTab("reservation"); setSelectedStatus([]); }} > Reservation Requests 
  <div className="mb-4 flex flex-wrap items-center gap-4">
    <span className="font-semibold">Filters:</span>
    <span>Status:</span>
    {(tab === "professor" ? professorStatus : reservationStatus).map((status) => (
      <label key={status} className="flex items-center gap-1">
        <Checkbox
          checked={selectedStatus.includes(status)}
          onCheckedChange={() => handleStatusChange(status)}
        />
        {status}
      </label>
    ))}
  </div>

  <DataTable
    columns={tab === "professor" ? professorColumns : reservationColumns}
    data={filteredRequests}
    filters={filters}
    setFilter={(key, value) =>
      setFilters((prev) => ({ ...prev, [key]: value }))
    }
    meta={{ 
      page: filters.page, 
      limit: filters.limit, 
      total: filteredRequests.length 
    }}
  />
</div>

); }

Acceptance Criteria

Requisitos de aceite: Listar todas as requisições do banco Filtros funcionando Botão de filtragem entre solicitações de professor ou de reservas

Screenshots da tela/componente desenvolvido

image image

Observações

🔄 Sincronizado do GitHub

Sincronizado automaticamente do GitHub para GitLab AGES