Team Card Added

Author: JKSANJAY27

src/app/teams/page.tsx

@@ -6,14 +6,19 @@ import teamCol from "@/components/columns/TeamCol";
 // import { user } from "@/store/interfaces";
 import tooms from "@/components/dumTeams.json";
 // import useToast from "@/lib/toast";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { type Team } from "@/data/schema";
 import { fetchTeams } from "@/api/fetchTeams";
 import { useState } from "react";
+import { TeamModal } from "@/components/table/team-modal";
 
 export default function Teams() {
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(10);
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const queryClient = useQueryClient();
 
   const {
       data: teamList,
@@ -24,17 +29,37 @@ export default function Teams() {
       queryFn: () => fetchTeams({ page: pageIndex + 1, limit: pageSize }),
   });
 
+  const handlePageChange = (page: number)=>{
+    setPageIndex(page);
+    queryClient.invalidateQueries({queryKey: ["teams"]});
+  }
+
+  const handlePageSizeChange = (size: number)=>{
+    setPageSize(size);
+    queryClient.invalidateQueries({queryKey: ["teams"]});
+  }
+
   if (isLoading) {
     <>loading...</>;
   }
   if (isError) {
     <>skill issue</>;
   }
+  const handleRowClick = (team: Team) => {
+    setSelectedTeam(team);
+    setOpen(true);
+  };
+
+
+  const handleModalClose = () => {
+    setOpen(false);
+  };
   return (
     <>
       <div className="p-4">
         <div className="mb-4"></div>
         {/* <DataTableUsers users={oosers} columns={userCol} /> */}
+        {selectedTeam && <TeamModal open = {open} onClose = {handleModalClose} team = {selectedTeam}/>}
         <DataTable<Team, string>
             columns={teamCol}
             data={teamList?.teams ?? []}
@@ -43,6 +68,7 @@ export default function Teams() {
             onPageSizeChange={setPageSize}
             currentPage = {pageIndex}
             pageSize = {pageSize}
+            onRowClick={handleRowClick}
         />
       </div>
     </>

src/components/table/data-table.tsx

@@ -30,6 +30,7 @@ interface DataTableProps<TData, TValue> {
   onPageSizeChange: (size: number) => void
   currentPage: number;
   pageSize: number;
+  onRowClick?: (row: TData) => void;
 }
 
 export function DataTable<TData, TValue>({
@@ -39,7 +40,8 @@ export function DataTable<TData, TValue>({
   onPageChange,
   onPageSizeChange,
   currentPage,
-  pageSize
+  pageSize,
+  onRowClick,
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = React.useState({});
   const [columnVisibility, setColumnVisibility] =
@@ -116,6 +118,11 @@ export function DataTable<TData, TValue>({
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
+                  onClick={() => {
+                    if (onRowClick) {
+                        onRowClick(row.original);
+                    }
+                }}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>

src/components/table/team-modal.tsx

@@ -0,0 +1,61 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+    DialogClose
+  } from "@/components/ui/dialog";
+  import { type Team } from "@/data/schema";
+import { Button } from "../ui/button";
+  
+  interface TeamModalProps{
+      open: boolean;
+      onClose: () => void;
+      team: Team;
+  }
+  export const TeamModal = ({open, onClose, team}: TeamModalProps) => {
+      return (<Dialog open={open} onOpenChange={onClose}>
+          <DialogContent className="sm:max-w-[425px]">
+              <DialogHeader>
+                  <DialogTitle>Team Details</DialogTitle>
+                  <DialogDescription>
+                   Here are details about the selected Team
+                  </DialogDescription>
+              </DialogHeader>
+                <div className="grid gap-4 py-4">
+                          <div className="grid grid-cols-4 gap-2">
+                              <div className="text-gray-100">ID</div>
+                               <div className="col-span-3 text-gray-100 font-medium">{team.ID}</div>
+                          </div>
+                          <div className="grid grid-cols-4 gap-2">
+                              <div className="text-gray-100">Name</div>
+                               <div className="col-span-3 text-gray-100 font-medium">{team.Name}</div>
+                          </div>
+                          <div className="grid grid-cols-4 gap-2">
+                               <div className="text-gray-100">Members</div>
+                               <div className="col-span-3 text-gray-100 font-medium">{team.NumberOfPeople}</div>
+                          </div>
+                           <div className="grid grid-cols-4 gap-2">
+                              <div className="text-gray-100">Code</div>
+                               <div className="col-span-3 text-gray-100 font-medium">{team.Code}</div>
+                          </div>
+                          <div className="grid grid-cols-4 gap-2">
+                              <div className="text-gray-100">Round</div>
+                               <div className="col-span-3 text-gray-100 font-medium">{team.RoundQualified}</div>
+                          </div>
+                          <div className="grid grid-cols-4 gap-2">
+                              <div className="text-gray-100">Banned</div>
+                               <div className="col-span-3 text-gray-100 font-medium">{team.IsBanned ? 'Yes': 'No'}</div>
+                          </div>
+                       </div>
+                 <div className="flex justify-end">
+                  <DialogClose asChild>
+                  <Button>Close</Button>
+                  </DialogClose>
+                </div>
+              </DialogContent>
+           </Dialog>
+      )
+  }