setup husky prettier eslint

src/components/data-table/Footer/index.tsx

@@ -1,69 +1,71 @@
-"use client";
-import { Table } from "@tanstack/react-table";
+'use client';
+import { Table } from '@tanstack/react-table';
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select";
-import { Button } from "@/components/ui/button";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 export function TableFooter<TData>({ table }: { table: Table<TData> }) {
-    return (
-        <div className="flex items-center justify-between px-6 py-4 border-t border-border/40 bg-muted/5">
-            <div className="flex items-center gap-6">
-                <div className="flex items-center space-x-2">
-                    <p className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">Rows per page</p>
-                    <Select
-                        value={`${table.getState().pagination.pageSize}`}
-                        onValueChange={(value) => {
-                            table.setPageSize(Number(value));
-                        }}
-                    >
-                        <SelectTrigger className="h-8 w-[70px] bg-transparent border-border/40 text-xs font-semibold">
-                            <SelectValue placeholder={table.getState().pagination.pageSize} />
-                        </SelectTrigger>
-                        <SelectContent side="top" className="min-w-[70px]">
-                            {[10, 20, 30, 40, 50].map((pageSize) => (
-                                <SelectItem key={pageSize} value={`${pageSize}`} className="text-xs">
-                                    {pageSize}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-            </div>
-
-            <div className="flex items-center gap-8">
-                <div className="flex items-center text-[11px] font-bold text-muted-foreground uppercase tracking-widest gap-1">
-                    <span className="text-foreground">Page {table.getState().pagination.pageIndex + 1}</span>
-                    <span className="opacity-40">/</span>
-                    <span>{table.getPageCount() || 1}</span>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                    <Button
-                        variant="outline"
-                        className="h-8 w-8 p-0 border-border/40 bg-transparent hover:bg-muted/50 transition-colors"
-                        onClick={() => table.previousPage()}
-                        disabled={!table.getCanPreviousPage()}
-                    >
-                        <span className="sr-only">Go to previous page</span>
-                        <ChevronLeft className="h-4 w-4 opacity-70" />
-                    </Button>
-                    <Button
-                        variant="outline"
-                        className="h-8 w-8 p-0 border-border/40 bg-transparent hover:bg-muted/50 transition-colors"
-                        onClick={() => table.nextPage()}
-                        disabled={!table.getCanNextPage()}
-                    >
-                        <span className="sr-only">Go to next page</span>
-                        <ChevronRight className="h-4 w-4 opacity-70" />
-                    </Button>
-                </div>
-            </div>
+  return (
+    <div className="flex items-center justify-between px-6 py-4 border-t border-border/40 bg-muted/5">
+      <div className="flex items-center gap-6">
+        <div className="flex items-center space-x-2">
+          <p className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+            Rows per page
+          </p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px] bg-transparent border-border/40 text-xs font-semibold">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top" className="min-w-[70px]">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`} className="text-xs">
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
-    );
+      </div>
+
+      <div className="flex items-center gap-8">
+        <div className="flex items-center text-[11px] font-bold text-muted-foreground uppercase tracking-widest gap-1">
+          <span className="text-foreground">Page {table.getState().pagination.pageIndex + 1}</span>
+          <span className="opacity-40">/</span>
+          <span>{table.getPageCount() || 1}</span>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0 border-border/40 bg-transparent hover:bg-muted/50 transition-colors"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft className="h-4 w-4 opacity-70" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0 border-border/40 bg-transparent hover:bg-muted/50 transition-colors"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight className="h-4 w-4 opacity-70" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/data-table/Header/SearchBar.tsx

@@ -1,17 +1,17 @@
-"use client";
-import { SearchIcon } from "lucide-react";
-import { Input } from "@/components/ui/input";
+'use client';
+import { SearchIcon } from 'lucide-react';
+import { Input } from '@/components/ui/input';
 
 const SearchBar = () => {
-    return (
-        <div className="relative w-full">
-            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/70" />
-            <Input
-                placeholder="Search resources..."
-                className="pl-9 h-10 text-sm bg-muted/20 border-border/40 focus:bg-background transition-all"
-            />
-        </div>
-    );
+  return (
+    <div className="relative w-full">
+      <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/70" />
+      <Input
+        placeholder="Search resources..."
+        className="pl-9 h-10 text-sm bg-muted/20 border-border/40 focus:bg-background transition-all"
+      />
+    </div>
+  );
 };
 
 export default SearchBar;

src/components/data-table/Header/index.tsx

@@ -1,36 +1,36 @@
-"use client";
-import React from "react";
-import { Button } from "@/components/ui/button";
-import SearchBar from "./SearchBar";
-import { FolderPlus, Settings2, SlidersHorizontal } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
+'use client';
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import SearchBar from './SearchBar';
+import { FolderPlus, Settings2, SlidersHorizontal } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
 
 interface TopHeaderProps {
-    title?: string;
-    itemCount?: number;
-    onAddNew?: () => void;
-    addButtonText?: string;
+  title?: string;
+  itemCount?: number;
+  onAddNew?: () => void;
+  addButtonText?: string;
 }
 
-const TopHeader = ({ title, itemCount, onAddNew, addButtonText = "Add New" }: TopHeaderProps) => {
-    return (
-        <div className="flex flex-col gap-1 p-3 w-full">
-            {/* Connected Summary Block */}
-            <div className="w-full bg-muted/10 border border-border/50 rounded-lg p-4 flex items-center">
-                <div className="flex items-center gap-2 text-muted-foreground font-semibold tracking-tight">
-                    <span className="text-base text-foreground/80">Total {title || "Items"} :</span>
-                    <span className="text-primary font-bold text-lg">{itemCount || 0}</span>
-                </div>
-            </div>
+const TopHeader = ({ title, itemCount, onAddNew, addButtonText = 'Add New' }: TopHeaderProps) => {
+  return (
+    <div className="flex flex-col gap-1 p-3 w-full">
+      {/* Connected Summary Block */}
+      <div className="w-full bg-muted/10 border border-border/50 rounded-lg p-4 flex items-center">
+        <div className="flex items-center gap-2 text-muted-foreground font-semibold tracking-tight">
+          <span className="text-base text-foreground/80">Total {title || 'Items'} :</span>
+          <span className="text-primary font-bold text-lg">{itemCount || 0}</span>
+        </div>
+      </div>
 
-            <div className="flex items-center justify-between gap-4">
-                {/* Search Bar Hidden for now as per requirement */}
-                {/* <div className="flex w-full max-w-sm">
+      <div className="flex items-center justify-between gap-4">
+        {/* Search Bar Hidden for now as per requirement */}
+        {/* <div className="flex w-full max-w-sm">
                     <SearchBar />
                 </div> */}
-                
-                {/* Add New Button moved to PageHeader */}
-                {/* {onAddNew && (
+
+        {/* Add New Button moved to PageHeader */}
+        {/* {onAddNew && (
                     <Button 
                         onClick={onAddNew}
                         className="h-11 px-6 rounded-xl bg-primary hover:bg-primary/90 text-primary-foreground font-bold text-sm shadow-md shadow-primary/20 transition-all hover:-translate-y-0.5"
@@ -39,9 +39,9 @@ const TopHeader = ({ title, itemCount, onAddNew, addButtonText = "Add New" }: To
                         {addButtonText}
                     </Button>
                 )} */}
-            </div>
-        </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default TopHeader;

src/components/data-table/TableHeader.tsx

@@ -1,38 +1,32 @@
-"use client";
-import { flexRender } from "@tanstack/react-table";
-import {
-    TableHead,
-    TableHeader as ShadTableHeader,
-    TableRow,
-} from "@/components/ui/table";
-import { Table } from "@tanstack/react-table";
-import { ChevronDown, ChevronsUpDown } from "lucide-react";
+'use client';
+import { flexRender } from '@tanstack/react-table';
+import { TableHead, TableHeader as ShadTableHeader, TableRow } from '@/components/ui/table';
+import { Table } from '@tanstack/react-table';
+import { ChevronDown, ChevronsUpDown } from 'lucide-react';
 
 const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
-    return (
-        <ShadTableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id} className="hover:bg-transparent border-b border-border/30">
-                    {headerGroup.headers.map((header) => {
-                        return (
-                            <TableHead key={header.id} className="h-14 px-6 text-muted-foreground border-b border-border/30 font-medium text-sm">
-                                {header.isPlaceholder
-                                    ? null
-                                    : (
-                                        <div className="flex items-center gap-2 group  cursor-pointer select-none">
-                                            {flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
-                                        </div>
-                                    )}
-                            </TableHead>
-                        );
-                    })}
-                </TableRow>
-            ))}
-        </ShadTableHeader>
-    );
+  return (
+    <ShadTableHeader>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <TableRow key={headerGroup.id} className="hover:bg-transparent border-b border-border/30">
+          {headerGroup.headers.map((header) => {
+            return (
+              <TableHead
+                key={header.id}
+                className="h-14 px-6 text-muted-foreground border-b border-border/30 font-medium text-sm"
+              >
+                {header.isPlaceholder ? null : (
+                  <div className="flex items-center gap-2 group  cursor-pointer select-none">
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                  </div>
+                )}
+              </TableHead>
+            );
+          })}
+        </TableRow>
+      ))}
+    </ShadTableHeader>
+  );
 };
 
 export default TableHeader;

src/components/data-table/index.tsx

@@ -1,189 +1,194 @@
-"use client";
-import React from "react";
+'use client';
+import React from 'react';
 import {
-    ColumnDef,
-    SortingState,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getSortedRowModel,
-    getPaginationRowModel,
-} from "@tanstack/react-table";
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getSortedRowModel,
+  getPaginationRowModel,
+} from '@tanstack/react-table';
 
-import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Button } from "@/components/ui/button";
-import { Edit3, MoreHorizontal, Trash2 } from "lucide-react";
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { Edit3, MoreHorizontal, Trash2 } from 'lucide-react';
 
-import TopHeader from "./Header";
-import TableHeader from "./TableHeader";
-import { TableFooter } from "./Footer";
-import { cn } from "@/lib/utils";
+import TopHeader from './Header';
+import TableHeader from './TableHeader';
+import { TableFooter } from './Footer';
+import { cn } from '@/lib/utils';
 
 export interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
-    data: TData[];
-    title?: string;
-    onAddNew?: () => void;
-    addButtonText?: string;
-    isLoading?: boolean;
-    onEdit?: (item: TData) => void;
-    onDelete?: (item: TData) => void;
-    pagination?: {
-        skip: number;
-        limit: number;
-        totalItems?: number;
-        onPageChange: (newSkip: number) => void;
-        onLimitChange: (newLimit: number) => void;
-    };
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  title?: string;
+  onAddNew?: () => void;
+  addButtonText?: string;
+  isLoading?: boolean;
+  onEdit?: (item: TData) => void;
+  onDelete?: (item: TData) => void;
+  pagination?: {
+    skip: number;
+    limit: number;
+    totalItems?: number;
+    onPageChange: (newSkip: number) => void;
+    onLimitChange: (newLimit: number) => void;
+  };
 }
 
 export function DataTable<TData, TValue>({
-    columns: initialColumns,
-    data,
-    title,
-    onAddNew,
-    addButtonText,
-    isLoading = false,
-    onEdit,
-    onDelete,
-    pagination,
+  columns: initialColumns,
+  data,
+  title,
+  onAddNew,
+  addButtonText,
+  isLoading = false,
+  onEdit,
+  onDelete,
+  pagination,
 }: DataTableProps<TData, TValue>) {
-    const [rowSelection, setRowSelection] = React.useState({});
-    const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [sorting, setSorting] = React.useState<SortingState>([]);
 
-    const columns = React.useMemo(() => {
-        const cols: ColumnDef<TData, TValue>[] = [
-            ...initialColumns,
-        ];
+  const columns = React.useMemo(() => {
+    const cols: ColumnDef<TData, TValue>[] = [...initialColumns];
 
-        if (onEdit || onDelete) {
-            cols.push({
-                id: "actions",
-                header: () => <div className="text-right px-4">Action</div>,
-                cell: ({ row }) => {
-                    const item = row.original;
-                    return (
-                        <div className="flex justify-end gap-3 px-4">
-                            {onEdit && (
-                                <button
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        onEdit(item);
-                                    }}
-                                    className="flex items-center justify-center h-8 w-8 rounded-md text-primary hover:bg-foreground/10 transition-all duration-200"
-                                >
-                                    <Edit3 className="h-4.5 w-4.5" />
-                                </button>
-                            )}
-                            {onDelete && (
-                                <button
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        onDelete(item);
-                                    }}
-                                    className="flex items-center justify-center h-8 w-8 rounded-md text-red-500 hover:bg-foreground/10 transition-all duration-200"
-                                >
-                                    <Trash2 className="h-4.5 w-4.5" />
-                                </button>
-                            )}
-                        </div>
-                    );
-                },
-            });
-        }
-        return cols;
-    }, [initialColumns, onEdit, onDelete]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        onRowSelectionChange: setRowSelection,
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        manualPagination: !!pagination,
-        pageCount: pagination?.totalItems ? Math.ceil(pagination.totalItems / pagination.limit) : -1,
-        state: {
-            rowSelection,
-            sorting,
-            pagination: pagination ? {
-                pageIndex: Math.floor(pagination.skip / pagination.limit),
-                pageSize: pagination.limit,
-            } : undefined,
-        },
-        onPaginationChange: (updater) => {
-            if (typeof updater === 'function' && pagination) {
-                const newState = updater({
-                    pageIndex: Math.floor(pagination.skip / pagination.limit),
-                    pageSize: pagination.limit,
-                });
-                pagination.onLimitChange(newState.pageSize);
-                pagination.onPageChange(newState.pageIndex * newState.pageSize);
-            }
-        },
-    });
-
-    return (
-        <div className="rounded-xl border border-border/50 bg-muted/10 p-1 space-y-6">
-            <div className="bg-background/40 dark:bg-background/60 backdrop-blur-xl rounded-xl border border-border/50 overflow-hidden transition-all duration-300">
-                <TopHeader
-                    title={title}
-                    itemCount={data.length}
-                    onAddNew={onAddNew}
-                    addButtonText={addButtonText}
-                />
-
-                <div className="px-6 py-2">
-                    <Table containerClassName="max-h-[calc(100vh-300px)] overflow-y-auto scrollbar-thin" className="border-separate border-spacing-0">
-                        <TableHeader table={table} />
-                        <TableBody>
-                            {isLoading ? (
-                                Array.from({ length: 5 }).map((_, idx) => (
-                                    <TableRow key={idx} className="border-b border-border/30 last:border-0 hover:bg-muted/5">
-                                        {columns.map((_, colIdx) => (
-                                            <TableCell key={colIdx} className="px-6 py-6 border-b border-border/30">
-                                                <Skeleton className="h-4 w-full max-w-[140px] opacity-20" />
-                                            </TableCell>
-                                        ))}
-                                    </TableRow>
-                                ))
-                            ) : table.getRowModel().rows?.length ? (
-                                table.getRowModel().rows.map((row) => (
-                                    <TableRow
-                                        key={row.id}
-                                        data-state={row.getIsSelected() && "selected"}
-                                        className="group hover:bg-muted/10 transition-colors"
-                                    >
-                                        {row.getVisibleCells().map((cell) => (
-                                            <TableCell key={cell.id} className="px-4 py-3 border-b border-border/50 align-middle text-muted-foreground text-sm font-medium group-hover:text-foreground">
-                                                {flexRender(
-                                                    cell.column.columnDef.cell,
-                                                    cell.getContext()
-                                                )}
-                                            </TableCell>
-                                        ))}
-                                    </TableRow>
-                                ))
-                            ) : (
-                                <TableRow>
-                                    <TableCell
-                                        colSpan={columns.length}
-                                        className="h-48 text-center"
-                                    >
-                                        <div className="flex flex-col items-center justify-center text-muted-foreground gap-1">
-                                            <p className="font-bold text-sm tracking-tight">No results found.</p>
-                                            <p className="text-xs opacity-60 font-medium">Try adjusting your filters or search terms.</p>
-                                        </div>
-                                    </TableCell>
-                                </TableRow>
-                            )}
-                        </TableBody>
-                    </Table>
-                </div>
-                <TableFooter table={table} />
+    if (onEdit || onDelete) {
+      cols.push({
+        id: 'actions',
+        header: () => <div className="text-right px-4">Action</div>,
+        cell: ({ row }) => {
+          const item = row.original;
+          return (
+            <div className="flex justify-end gap-3 px-4">
+              {onEdit && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit(item);
+                  }}
+                  className="flex items-center justify-center h-8 w-8 rounded-md text-primary hover:bg-foreground/10 transition-all duration-200"
+                >
+                  <Edit3 className="h-4.5 w-4.5" />
+                </button>
+              )}
+              {onDelete && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete(item);
+                  }}
+                  className="flex items-center justify-center h-8 w-8 rounded-md text-red-500 hover:bg-foreground/10 transition-all duration-200"
+                >
+                  <Trash2 className="h-4.5 w-4.5" />
+                </button>
+              )}
             </div>
+          );
+        },
+      });
+    }
+    return cols;
+  }, [initialColumns, onEdit, onDelete]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    manualPagination: !!pagination,
+    pageCount: pagination?.totalItems ? Math.ceil(pagination.totalItems / pagination.limit) : -1,
+    state: {
+      rowSelection,
+      sorting,
+      pagination: pagination
+        ? {
+            pageIndex: Math.floor(pagination.skip / pagination.limit),
+            pageSize: pagination.limit,
+          }
+        : undefined,
+    },
+    onPaginationChange: (updater) => {
+      if (typeof updater === 'function' && pagination) {
+        const newState = updater({
+          pageIndex: Math.floor(pagination.skip / pagination.limit),
+          pageSize: pagination.limit,
+        });
+        pagination.onLimitChange(newState.pageSize);
+        pagination.onPageChange(newState.pageIndex * newState.pageSize);
+      }
+    },
+  });
+
+  return (
+    <div className="rounded-xl border border-border/50 bg-muted/10 p-1 space-y-6">
+      <div className="bg-background/40 dark:bg-background/60 backdrop-blur-xl rounded-xl border border-border/50 overflow-hidden transition-all duration-300">
+        <TopHeader
+          title={title}
+          itemCount={data.length}
+          onAddNew={onAddNew}
+          addButtonText={addButtonText}
+        />
+
+        <div className="px-6 py-2">
+          <Table
+            containerClassName="max-h-[calc(100vh-300px)] overflow-y-auto scrollbar-thin"
+            className="border-separate border-spacing-0"
+          >
+            <TableHeader table={table} />
+            <TableBody>
+              {isLoading ? (
+                Array.from({ length: 5 }).map((_, idx) => (
+                  <TableRow
+                    key={idx}
+                    className="border-b border-border/30 last:border-0 hover:bg-muted/5"
+                  >
+                    {columns.map((_, colIdx) => (
+                      <TableCell key={colIdx} className="px-6 py-6 border-b border-border/30">
+                        <Skeleton className="h-4 w-full max-w-[140px] opacity-20" />
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                    className="group hover:bg-muted/10 transition-colors"
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className="px-4 py-3 border-b border-border/50 align-middle text-muted-foreground text-sm font-medium group-hover:text-foreground"
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={columns.length} className="h-48 text-center">
+                    <div className="flex flex-col items-center justify-center text-muted-foreground gap-1">
+                      <p className="font-bold text-sm tracking-tight">No results found.</p>
+                      <p className="text-xs opacity-60 font-medium">
+                        Try adjusting your filters or search terms.
+                      </p>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
         </div>
-    );
+        <TableFooter table={table} />
+      </div>
+    </div>
+  );
 }