>(
+ ({ className, ...props }, ref) => (
+ |
+ ),
+)
+TableRow.displayName = 'TableRow'
const TableHead = React.forwardRef<
HTMLTableCellElement,
@@ -73,13 +64,13 @@ const TableHead = React.forwardRef<
[role=checkbox]]:translate-y-[2px] dark:text-neutral-400",
- className
+ 'h-10 px-2 text-left align-middle font-medium text-neutral-500 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] dark:text-neutral-400',
+ className,
)}
{...props}
/>
))
-TableHead.displayName = "TableHead"
+TableHead.displayName = 'TableHead'
const TableCell = React.forwardRef<
HTMLTableCellElement,
@@ -88,13 +79,13 @@ const TableCell = React.forwardRef<
| [role=checkbox]]:translate-y-[2px]",
- className
+ 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+ className,
)}
{...props}
/>
))
-TableCell.displayName = "TableCell"
+TableCell.displayName = 'TableCell'
const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
@@ -102,19 +93,10 @@ const TableCaption = React.forwardRef<
>(({ className, ...props }, ref) => (
))
-TableCaption.displayName = "TableCaption"
+TableCaption.displayName = 'TableCaption'
-export {
- Table,
- TableHeader,
- TableBody,
- TableFooter,
- TableHead,
- TableRow,
- TableCell,
- TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
diff --git a/client/src/components/ui/toggle.tsx b/client/src/components/ui/toggle.tsx
index 9c930a4..1e1a36e 100644
--- a/client/src/components/ui/toggle.tsx
+++ b/client/src/components/ui/toggle.tsx
@@ -1,37 +1,34 @@
-"use client"
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const toggleVariants = cva(
- "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-neutral-100 hover:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-neutral-100 data-[state=on]:text-neutral-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:hover:bg-neutral-800 dark:hover:text-neutral-400 dark:focus-visible:ring-neutral-300 dark:data-[state=on]:bg-neutral-800 dark:data-[state=on]:text-neutral-50",
+ 'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-neutral-100 hover:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-neutral-100 data-[state=on]:text-neutral-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:hover:bg-neutral-800 dark:hover:text-neutral-400 dark:focus-visible:ring-neutral-300 dark:data-[state=on]:bg-neutral-800 dark:data-[state=on]:text-neutral-50',
{
variants: {
variant: {
- default: "bg-transparent",
+ default: 'bg-transparent',
outline:
- "border border-neutral-200 bg-transparent shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+ 'border border-neutral-200 bg-transparent shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
},
size: {
- default: "h-9 px-2 min-w-9",
- sm: "h-8 px-1.5 min-w-8",
- lg: "h-10 px-2.5 min-w-10",
+ default: 'h-9 px-2 min-w-9',
+ sm: 'h-8 px-1.5 min-w-8',
+ lg: 'h-10 px-2.5 min-w-10',
},
},
defaultVariants: {
- variant: "default",
- size: "default",
+ variant: 'default',
+ size: 'default',
},
- }
+ },
)
const Toggle = React.forwardRef<
React.ElementRef,
- React.ComponentPropsWithoutRef &
- VariantProps
+ React.ComponentPropsWithoutRef & VariantProps
>(({ className, variant, size, ...props }, ref) => (
diff --git a/client/src/hooks/use-mobile.tsx b/client/src/hooks/use-mobile.tsx
index 2b0fe1d..4331d5c 100644
--- a/client/src/hooks/use-mobile.tsx
+++ b/client/src/hooks/use-mobile.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from 'react'
const MOBILE_BREAKPOINT = 768
@@ -10,9 +10,9 @@ export function useIsMobile() {
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
- mql.addEventListener("change", onChange)
+ mql.addEventListener('change', onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
- return () => mql.removeEventListener("change", onChange)
+ return () => mql.removeEventListener('change', onChange)
}, [])
return !!isMobile
diff --git a/client/src/hooks/use-toast.ts b/client/src/hooks/use-toast.ts
index 02e111d..d627a17 100644
--- a/client/src/hooks/use-toast.ts
+++ b/client/src/hooks/use-toast.ts
@@ -1,12 +1,7 @@
-"use client"
-
// Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from 'react'
-import type {
- ToastActionElement,
- ToastProps,
-} from "@/components/ui/toast"
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000
@@ -19,10 +14,10 @@ type ToasterToast = ToastProps & {
}
const actionTypes = {
- ADD_TOAST: "ADD_TOAST",
- UPDATE_TOAST: "UPDATE_TOAST",
- DISMISS_TOAST: "DISMISS_TOAST",
- REMOVE_TOAST: "REMOVE_TOAST",
+ ADD_TOAST: 'ADD_TOAST',
+ UPDATE_TOAST: 'UPDATE_TOAST',
+ DISMISS_TOAST: 'DISMISS_TOAST',
+ REMOVE_TOAST: 'REMOVE_TOAST',
} as const
let count = 0
@@ -36,20 +31,20 @@ type ActionType = typeof actionTypes
type Action =
| {
- type: ActionType["ADD_TOAST"]
+ type: ActionType['ADD_TOAST']
toast: ToasterToast
}
| {
- type: ActionType["UPDATE_TOAST"]
+ type: ActionType['UPDATE_TOAST']
toast: Partial
}
| {
- type: ActionType["DISMISS_TOAST"]
- toastId?: ToasterToast["id"]
+ type: ActionType['DISMISS_TOAST']
+ toastId?: ToasterToast['id']
}
| {
- type: ActionType["REMOVE_TOAST"]
- toastId?: ToasterToast["id"]
+ type: ActionType['REMOVE_TOAST']
+ toastId?: ToasterToast['id']
}
interface State {
@@ -66,7 +61,7 @@ const addToRemoveQueue = (toastId: string) => {
const timeout = setTimeout(() => {
toastTimeouts.delete(toastId)
dispatch({
- type: "REMOVE_TOAST",
+ type: 'REMOVE_TOAST',
toastId: toastId,
})
}, TOAST_REMOVE_DELAY)
@@ -76,21 +71,19 @@ const addToRemoveQueue = (toastId: string) => {
export const reducer = (state: State, action: Action): State => {
switch (action.type) {
- case "ADD_TOAST":
+ case 'ADD_TOAST':
return {
...state,
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
}
- case "UPDATE_TOAST":
+ case 'UPDATE_TOAST':
return {
...state,
- toasts: state.toasts.map((t) =>
- t.id === action.toast.id ? { ...t, ...action.toast } : t
- ),
+ toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
}
- case "DISMISS_TOAST": {
+ case 'DISMISS_TOAST': {
const { toastId } = action
// ! Side effects ! - This could be extracted into a dismissToast() action,
@@ -111,11 +104,11 @@ export const reducer = (state: State, action: Action): State => {
...t,
open: false,
}
- : t
+ : t,
),
}
}
- case "REMOVE_TOAST":
+ case 'REMOVE_TOAST':
if (action.toastId === undefined) {
return {
...state,
@@ -140,20 +133,20 @@ function dispatch(action: Action) {
})
}
-type Toast = Omit
+type Toast = Omit
function toast({ ...props }: Toast) {
const id = genId()
const update = (props: ToasterToast) =>
dispatch({
- type: "UPDATE_TOAST",
+ type: 'UPDATE_TOAST',
toast: { ...props, id },
})
- const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+ const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
dispatch({
- type: "ADD_TOAST",
+ type: 'ADD_TOAST',
toast: {
...props,
id,
@@ -187,7 +180,7 @@ function useToast() {
return {
...state,
toast,
- dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+ dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
}
}
diff --git a/client/src/index.css b/client/src/index.css
index 6a23e1c..2aaeeff 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -132,4 +132,3 @@ table-hover td,
--chart-5: 253 94% 58%;
}
}
-
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
new file mode 100644
index 0000000..fed2fe9
--- /dev/null
+++ b/client/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/client/src/pages/Dashboard/Dashboard.tsx b/client/src/pages/Dashboard/Overview.tsx
similarity index 56%
rename from client/src/pages/Dashboard/Dashboard.tsx
rename to client/src/pages/Dashboard/Overview.tsx
index 6bb391b..c590285 100644
--- a/client/src/pages/Dashboard/Dashboard.tsx
+++ b/client/src/pages/Dashboard/Overview.tsx
@@ -1,16 +1,16 @@
import { useEffect, useState } from 'react'
-import Papers, { Paper } from './Papers'
-import Projects, { Project } from './Projects'
import { API_URL } from '../../service/api'
import { useNavigate } from 'react-router-dom'
+import MainPage from '@/components/View/DataGrid/MainPage'
+import ProjectsTable, { Projects } from '@/components/View/DataGrid/ProjectsTable'
+import PapersTable, { Papers } from '@/components/View/DataGrid/PapersTable'
-const Dashboard = () => {
- const email = localStorage.getItem('email') || ''
- const [projects, setProjects] = useState([])
- const [papers, setPapers] = useState([])
- const [currentPage, setCurrentPage] = useState(1)
- const [pageSize] = useState(10) // Set your desired page size here
- const [totalPapers, setTotalPapers] = useState(0)
+const Overview = () => {
+ const [projects, setProjects] = useState([])
+ const [papers, setPapers] = useState([])
+
+ // papers table page size default is 50
+ const [pageSize] = useState(50)
const navigate = useNavigate()
@@ -36,8 +36,8 @@ const Dashboard = () => {
id: project.id,
name: project.title,
description: project.description,
- papers: project.papers.length,
- }
+ paper_count: project.papers.length,
+ } as Projects
},
),
)
@@ -72,12 +72,11 @@ const Dashboard = () => {
id: paper.id,
title: paper.title,
file_hash: paper.file_hash,
- updated_at: paper.updated_at,
- }
+ uploaded_at: paper.updated_at,
+ } as Papers
},
),
)
- setTotalPapers(data.total_papers)
} else {
throw new Error('Network response was not ok')
}
@@ -85,34 +84,39 @@ const Dashboard = () => {
}
useEffect(() => {
- fetchPapers(currentPage)
- }, [currentPage])
+ fetchPapers(1)
+ }, [])
return (
-
- {/* */}
-
-
-
- User: {email}
-
-
- Projects: {projects.length} | Papers: {totalPapers}
-
+
+
+
+
+ Running jobs
+ 0 In progress
+
+
+ Available features
+ 57 Total - 0 User
+
+
+ Available credit
+ 0 tokens
+
+
+
)
}
-export default Dashboard
+export default Overview
diff --git a/client/src/pages/Dashboard/Papers.tsx b/client/src/pages/Dashboard/Papers.tsx
deleted file mode 100644
index 8de120e..0000000
--- a/client/src/pages/Dashboard/Papers.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-export type Paper = {
- id: string
- title: string
- file_hash: string
- updated_at: string
-}
-
-type PaperProps = {
- papers: Paper[] | []
- currentPage: number
- pageSize: number
- totalPapers: number
- setCurrentPage: React.Dispatch >
-}
-
-const Papers = ({ papers, currentPage, pageSize, totalPapers, setCurrentPage }: PaperProps) => {
- const formatDate = (dateString: string): string => {
- const date = new Date(dateString)
- if (isNaN(date.getTime())) {
- return 'Invalid date'
- }
- return new Intl.DateTimeFormat('en-US', {
- year: 'numeric',
- month: 'long',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- }).format(date)
- }
-
- return (
- <>
- {/* */}
-
- Uploaded Papers
-
-
-
-
- |
- Id
- |
-
-
- Name
- |
-
- Hash
- |
-
- Created At
- |
-
-
-
- {papers.map((paper) => (
-
- |
- {paper.id}
- |
-
- {paper.title}
- |
-
- {paper.file_hash}
- |
-
- {formatDate(paper.updated_at)}
- |
-
- ))}
-
-
-
-
- {/* */}
-
-
-
- Page {currentPage} of {Math.max(Math.ceil(totalPapers / pageSize), 1)}
-
-
-
-
-
- Atlas
-
- 
-
- {loading ? (
- <>
- Authenticating... Please wait.
-
-
- ) : (
- <>
-
- Enter your email to get started. We'll send you a link to sign in.
-
-
-
- )}
+
+
+
+
+
+ Atlas
+
+ A simple and fun way to explore the universe of science.
+ Sign up now to get started.
+
+
+ {isLoggingIn ? {loggingInMessage} : null}
+
+
+
+
+
)
}
diff --git a/client/src/pages/Login/stars-render.ts b/client/src/pages/Home/stars-render.ts
similarity index 100%
rename from client/src/pages/Login/stars-render.ts
rename to client/src/pages/Home/stars-render.ts
diff --git a/client/src/pages/Login/Galaxy.test.tsx b/client/src/pages/Login/Galaxy.test.tsx
deleted file mode 100644
index 3cd1d4d..0000000
--- a/client/src/pages/Login/Galaxy.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render } from '@testing-library/react'
-import { BrowserRouter as Router } from 'react-router-dom'
-import Galaxy from './Galaxy'
-
-describe('Galaxy', () => {
- it('should render Login component', () => {
- const { getByTestId } = render(
-
-
- ,
- )
- const input = getByTestId('email-input')
- expect(input).toBeTruthy()
- })
-})
diff --git a/client/src/pages/Login/Galaxy.tsx b/client/src/pages/Login/Galaxy.tsx
deleted file mode 100644
index 5204ced..0000000
--- a/client/src/pages/Login/Galaxy.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { createUniverse } from './stars-render'
-import { API_URL } from '../../service/api'
-import { useNavigate, useParams } from 'react-router-dom'
-
-type Params = {
- email?: string
- magicLink?: string
-}
-
-const Galaxy = ({ loggingIn }: { loggingIn?: boolean }) => {
- const canvasRef = useRef (null)
- const emailRef = useRef(null)
-
- const params: Params = useParams()
- const navigate = useNavigate()
-
- const [submitting, setSubmitting] = useState(false)
- const [isLoggingIn, setIsLoggingIn] = useState(loggingIn)
-
- useEffect(() => {
- const starDensity = 0.216
- const speedCoeff = 0.03
- const giantColor = '180,184,240'
- const starColor = '226,225,142'
- const cometColor = '226,225,224'
- const cometDisabled = false
-
- const canva = canvasRef.current!
- const cleanup = createUniverse(
- canva,
- starDensity,
- speedCoeff,
- giantColor,
- starColor,
- cometColor,
- cometDisabled,
- )
-
- return () => {
- cleanup()
- }
- }, [])
-
- useEffect(() => {
- if (loggingIn) {
- setIsLoggingIn(true)
- fetch(`${API_URL}/validate`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ email: params.email, magic_link: params.magicLink }),
- }).then((res) => {
- if (res.ok) {
- localStorage.setItem('token', res.headers.get('Authorization')!)
- localStorage.setItem('email', params.email!)
- navigate('/dashboard')
- }
- })
- }
- }, [loggingIn])
-
- const submitEmail = async (e: React.FormEvent) => {
- setSubmitting(true)
- e.preventDefault()
- const email = emailRef.current!.value
- await fetch(`${API_URL}/login`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ email }),
- })
- .then((res) => {
- if (!res.ok) {
- throw new Error('Something went wrong!')
- }
- })
- .then(await new Promise((resolve) => setTimeout(resolve, 3000)))
- .finally(() => {
- setSubmitting(false)
- navigate('/table')
- })
- }
-
- return (
-
-
-
-
-
- Atlas
-
- A simple and fun way to explore the universe of science.
- Sign up now to get started.
-
-
- {isLoggingIn ? (
- Authenticating... Please wait.
- ) : null}
-
-
-
-
- |