From d63856a7843580f157fb3d6d5c416cc1ed4e6cad Mon Sep 17 00:00:00 2001 From: Arsh Saxena Date: Thu, 1 Aug 2024 13:21:22 +0530 Subject: [PATCH 01/11] built front-end --- app/admin/columns.tsx | 306 ++++++------- app/admin/data-table.tsx | 321 +++++++------- app/admin/page.tsx | 68 +-- app/admin/response/[regno]/page.tsx | 454 +++++++++---------- app/components/Footer.tsx | 69 +++ app/components/Nav.tsx | 2 +- app/form/page.tsx | 659 +++++++++++++++------------- app/globals.css | 123 +++--- app/interview/page.tsx | 138 +++--- app/layout.tsx | 47 +- app/page.tsx | 18 +- app/result/page.tsx | 138 +++--- 12 files changed, 1250 insertions(+), 1093 deletions(-) create mode 100644 app/components/Footer.tsx diff --git a/app/admin/columns.tsx b/app/admin/columns.tsx index a34999f..f2b9895 100644 --- a/app/admin/columns.tsx +++ b/app/admin/columns.tsx @@ -6,171 +6,171 @@ import { ArrowUpDown, Info, MoveUpRight } from "lucide-react"; import Link from "next/link"; export type Responses = { - name: string; - regno: string; - email: string; - mobile: string; - department1: string; - department2: string; - isShortlisted: string; - isSelected: string; - dateAssigned: string; - dateApplied: string; - moreInfo: string; + name: string; + regno: string; + email: string; + mobile: string; + department1: string; + department2: string; + isShortlisted: string; + isSelected: string; + dateAssigned: string; + dateApplied: string; + moreInfo: string; }; export const columns: ColumnDef[] = [ - { - accessorKey: "name", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "name", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "regno", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "regno", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "email", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "email", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "mobile", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "mobile", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "department1", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "department1", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "department2", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "department2", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "isShortlisted", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "isShortlisted", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "isSelected", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "isSelected", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "dateAssigned", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "dateAssigned", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "dateApplied", - header: ({ column }) => { - return ( - - ); + { + accessorKey: "dateApplied", + header: ({ column }) => { + return ( + + ); + }, }, - }, - { - accessorKey: "moreInfo", - header: "More Info", - cell: ({ row }) => { - return ( - - ); + { + accessorKey: "moreInfo", + header: "More Info", + cell: ({ row }) => { + return ( + + ); + }, }, - }, ]; diff --git a/app/admin/data-table.tsx b/app/admin/data-table.tsx index 212d0f6..5fcd1cd 100644 --- a/app/admin/data-table.tsx +++ b/app/admin/data-table.tsx @@ -6,180 +6,183 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { - DropdownMenu, - DropdownMenuCheckboxItem, - DropdownMenuContent, - DropdownMenuTrigger, + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { - ColumnDef, - ColumnFiltersState, - SortingState, - VisibilityState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - useReactTable, - getPaginationRowModel, - getSortedRowModel, + ColumnDef, + ColumnFiltersState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + useReactTable, + getPaginationRowModel, + getSortedRowModel, } from "@tanstack/react-table"; import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, } from "@/components/ui/table"; interface DataTableProps { - columns: ColumnDef[]; - data: TData[]; + columns: ColumnDef[]; + data: TData[]; } export function DataTable({ - columns, - data, + columns, + data, }: DataTableProps) { - const [sorting, setSorting] = useState([]); - const [columnFilters, setColumnFilters] = useState([]); - const [columnVisibility, setColumnVisibility] = useState({}); + const [sorting, setSorting] = useState([]); + const [columnFilters, setColumnFilters] = useState([]); + const [columnVisibility, setColumnVisibility] = useState({}); - const table = useReactTable({ - data, - columns, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - onSortingChange: setSorting, - getSortedRowModel: getSortedRowModel(), - onColumnFiltersChange: setColumnFilters, - getFilteredRowModel: getFilteredRowModel(), - onColumnVisibilityChange: setColumnVisibility, - state: { - sorting, - columnFilters, - columnVisibility, - }, - }); + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + onSortingChange: setSorting, + getSortedRowModel: getSortedRowModel(), + onColumnFiltersChange: setColumnFilters, + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + state: { + sorting, + columnFilters, + columnVisibility, + }, + }); + + return ( +
+
+
+ + table.getColumn("regno")?.setFilterValue(event.target.value) + } + className="max-w-sm" + /> + + table.getColumn("name")?.setFilterValue(event.target.value) + } + className="max-w-sm" + /> +
+ + + + + + {table + .getAllColumns() + .filter((column) => column.getCanHide()) + .map((column) => { + return ( + + column.toggleVisibility(!!value) + } + > + {column.id} + + ); + })} + + +
+
- return ( -
-
- - table.getColumn("regno")?.setFilterValue(event.target.value) - } - className="max-w-sm" - /> -
-
- - table.getColumn("name")?.setFilterValue(event.target.value) - } - className="max-w-sm" - /> - - - - - - {table - .getAllColumns() - .filter((column) => column.getCanHide()) - .map((column) => { - return ( - - column.toggleVisibility(!!value) - } - > - {column.id} - - ); - })} - - -
-
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - +
+
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+
-
- - -
-
- ); + Next + +
+
+ ); } diff --git a/app/admin/page.tsx b/app/admin/page.tsx index 39890cc..b9e9fc3 100644 --- a/app/admin/page.tsx +++ b/app/admin/page.tsx @@ -8,40 +8,42 @@ import { Responses, columns } from "./columns"; import { DataTable } from "./data-table"; const Admin = () => { - const { data: session } = useSession({ - required: true, - onUnauthenticated: () => { - redirect("/"); - }, - }); - - if (session?.user?.role !== "admin") { - redirect("/"); - } - - const [data, setData] = useState([]); - - useEffect(() => { - fetch("/api/admin/responses", { - method: "POST", - }) - .then((res) => res.json()) - .then((data) => { - setData(data.responses); + const { data: session } = useSession({ + required: true, + onUnauthenticated: () => { + redirect("/"); + }, }); - }, []); - - return ( -
-

- Welcome {session?.user?.name} (admin) -

- -
- -
-
- ); + + if (session?.user?.role !== "admin") { + redirect("/"); + } + + const [data, setData] = useState([]); + + useEffect(() => { + fetch("/api/admin/responses", { + method: "POST", + }) + .then((res) => res.json()) + .then((data) => { + setData(data.responses); + }); + }, []); + + return ( +
+ Admin +

+ Welcome, {session?.user?.name}! +

+ + +
+ +
+
+ ); }; export default Admin; diff --git a/app/admin/response/[regno]/page.tsx b/app/admin/response/[regno]/page.tsx index 200d178..7bcf205 100644 --- a/app/admin/response/[regno]/page.tsx +++ b/app/admin/response/[regno]/page.tsx @@ -6,11 +6,11 @@ import { usePathname } from "next/navigation"; import { Input } from "@/components/ui/input"; import { Select } from "@/components/ui/select"; import { - SelectTrigger, - SelectContent, - SelectGroup, - SelectItem, - SelectValue, + SelectTrigger, + SelectContent, + SelectGroup, + SelectItem, + SelectValue, } from "@/components/ui/select"; import { Label } from "@/components/ui/label"; @@ -18,234 +18,234 @@ import { useToast } from "@/components/ui/use-toast"; import { Button } from "@/components/ui/button"; const Response = () => { - const { data: session } = useSession({ - required: true, - onUnauthenticated: () => { - redirect("/"); - }, - }); + const { data: session } = useSession({ + required: true, + onUnauthenticated: () => { + redirect("/"); + }, + }); - if (session?.user?.role !== "admin") { - redirect("/"); - } + if (session?.user?.role !== "admin") { + redirect("/"); + } - const regno = usePathname().split("/").pop(); + const regno = usePathname().split("/").pop(); - const [data, setData] = useState([]); - const [dateAssigned, setDateAssigned] = useState(""); + const [data, setData] = useState([]); + const [dateAssigned, setDateAssigned] = useState(""); - useEffect(() => { - fetch(`/api/admin/response?regno=${regno}`, { - method: "POST", - }) - .then((res) => res.json()) - .then((res) => setData(res.data)); - }, []); + useEffect(() => { + fetch(`/api/admin/response?regno=${regno}`, { + method: "POST", + }) + .then((res) => res.json()) + .then((res) => setData(res.data)); + }, []); - const { toast } = useToast(); + const { toast } = useToast(); - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Name{data.name}
Reg No{data.regno}
Email{data.email}
Mobile{data.mobile}
Department 1{data.department1}
Reason for joining dept 1{data.reason1}
Previous Work 1{data.previousWork1}
Department 2{data.department2}
Reason for joining dept 2{data.reason2}
Previous Work 2{data.previousWork2}
Shortlisted - {data.isShortlisted ? "Yes" : "No"} -
Selected - {data.isSelected ? "Yes" : "No"} -
Applied Date{data.dateApplied}
Assigned Date{data.dateAssigned}
Primary Department{data.primaryDept}
-
-
- - setDateAssigned(e.target.value)} - className="w-[240px]" - /> - -
-
- -
-
- -
-
- -
-
- - ); + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name{data.name}
Register Number{data.regno}
Email{data.email}
Mobile{data.mobile}
Department 1{data.department1}
Reason for joining Department 1{data.reason1}
Previous Work 1{data.previousWork1}
Department 2{data.department2}
Reason for joining Department 2{data.reason2}
Previous Work 2{data.previousWork2}
Shortlisted + {data.isShortlisted ? "Yes" : "No"} +
Selected + {data.isSelected ? "Yes" : "No"} +
Applied Date{data.dateApplied}
Assigned Date{data.dateAssigned}
Primary Department{data.primaryDept}
+
+
+ + setDateAssigned(e.target.value)} + className="w-[240px]" + /> + +
+
+ +
+
+ +
+
+ +
+
+ + ); }; export default Response; diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx new file mode 100644 index 0000000..988c60a --- /dev/null +++ b/app/components/Footer.tsx @@ -0,0 +1,69 @@ +"use client"; + +const Footer = () => { + return ( + +
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ ); +}; + +export default Footer; diff --git a/app/components/Nav.tsx b/app/components/Nav.tsx index 14ec121..f8b0d94 100644 --- a/app/components/Nav.tsx +++ b/app/components/Nav.tsx @@ -13,7 +13,7 @@ const Nav = () => {