diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e43b0f9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
index 985de08..d74a337 100644
--- a/README.md
+++ b/README.md
@@ -1,55 +1,17 @@
-# Darbinieku darba laiku atskaite no SQLite datubāzes
+# Task for work hour overview
-## Resursi
+
+
-Tev tiek dots **SQLite datubāzes fails**: `attendance.db`
-Šajā datubāzē ir divas tabulas:
+# Backend (_python_)
-### Tabulu struktūra
+1. Install requirements.txt (I used [uv](https://github.com/astral-sh/uv), but should work with regular pip too)
+2. run command inside of `dev.sh` file
+3. Backend will start on port 8000
-**`Employees`**
-
-| id | username |
-|:----|:-----------|
-| 1 | janis |
-| 2 | liga |
-| 3 | juris |
-| 4 | dace |
-
-**`Attendance`**
-
-| id | employee_id | date | hours_worked |
-|:----|:-------------|:-------------|:----------------|
-| 1 | 1 | 2024-06-29 | 4 |
-| 2 | 1 | 2024-06-29 | 3.5 |
-| 3 | 1 | 2024-06-28 | 8 |
-| 4 | 2 | 2024-06-29 | 5 |
-| 5 | 2 | 2024-06-29 | 2.5 |
-| 6 | 2 | 2024-06-28 | 6.75 |
-| 7 | 3 | 2024-06-30 | 6 |
-| 8 | 3 | 2024-06-27 | 2 |
-| 9 | 3 | 2024-06-27 | 7 |
-
----
-
-## 📌 Uzdevums
-
-Izveidot **WEB aplikāciju** (vēlams izmantot Python):
-
-### 📍 Sākuma lapa `/`
-- Parāda sarakstu ar visiem darbinieku `username`
-- Iespēja veikt **username meklēšanu**
-
----
-
-### 📍 Darbinieka skatījums
-- Klikšķinot uz kāda darbinieka username, atveras lapa/skats, kur:
- - Redzama **tabula ar divām kolonnām: `date`, `hours_worked`**
- - Tabulā katrai dienai **tiek summētas visas nostrādātās stundas šajā datumā**
- - 📌 *Piemērs*:
- Ja vienā dienā ir divi ieraksti ar 4h un 3.5h — kopsumma būs **7.5**
- - Tabula **sakārtota pēc `date` DESC**
-
----
+# Frontend (_React_)
+1. Install dependencies with [bun](https://bun.sh/) (_should work with npm too_)
+2. Run development stage with `bun run dev`
+3. Frontend will start on port 3000
diff --git a/Uzdevums.md b/Uzdevums.md
new file mode 100644
index 0000000..985de08
--- /dev/null
+++ b/Uzdevums.md
@@ -0,0 +1,55 @@
+# Darbinieku darba laiku atskaite no SQLite datubāzes
+
+## Resursi
+
+Tev tiek dots **SQLite datubāzes fails**: `attendance.db`
+Šajā datubāzē ir divas tabulas:
+
+### Tabulu struktūra
+
+**`Employees`**
+
+| id | username |
+|:----|:-----------|
+| 1 | janis |
+| 2 | liga |
+| 3 | juris |
+| 4 | dace |
+
+**`Attendance`**
+
+| id | employee_id | date | hours_worked |
+|:----|:-------------|:-------------|:----------------|
+| 1 | 1 | 2024-06-29 | 4 |
+| 2 | 1 | 2024-06-29 | 3.5 |
+| 3 | 1 | 2024-06-28 | 8 |
+| 4 | 2 | 2024-06-29 | 5 |
+| 5 | 2 | 2024-06-29 | 2.5 |
+| 6 | 2 | 2024-06-28 | 6.75 |
+| 7 | 3 | 2024-06-30 | 6 |
+| 8 | 3 | 2024-06-27 | 2 |
+| 9 | 3 | 2024-06-27 | 7 |
+
+---
+
+## 📌 Uzdevums
+
+Izveidot **WEB aplikāciju** (vēlams izmantot Python):
+
+### 📍 Sākuma lapa `/`
+- Parāda sarakstu ar visiem darbinieku `username`
+- Iespēja veikt **username meklēšanu**
+
+---
+
+### 📍 Darbinieka skatījums
+- Klikšķinot uz kāda darbinieka username, atveras lapa/skats, kur:
+ - Redzama **tabula ar divām kolonnām: `date`, `hours_worked`**
+ - Tabulā katrai dienai **tiek summētas visas nostrādātās stundas šajā datumā**
+ - 📌 *Piemērs*:
+ Ja vienā dienā ir divi ieraksti ar 4h un 3.5h — kopsumma būs **7.5**
+ - Tabula **sakārtota pēc `date` DESC**
+
+---
+
+
diff --git a/backend/.gitignore b/backend/.gitignore
new file mode 100644
index 0000000..bff427b
--- /dev/null
+++ b/backend/.gitignore
@@ -0,0 +1,3 @@
+.venv
+__pychace__
+*.pyc
diff --git a/backend/db/__init__.py b/backend/db/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/attendance.db b/backend/db/attendance.db
similarity index 96%
rename from attendance.db
rename to backend/db/attendance.db
index 80d9587..bc8167e 100644
Binary files a/attendance.db and b/backend/db/attendance.db differ
diff --git a/backend/db/db.py b/backend/db/db.py
new file mode 100644
index 0000000..6cbf20d
--- /dev/null
+++ b/backend/db/db.py
@@ -0,0 +1,11 @@
+# This file is for database connection
+import sqlite3
+
+# Create the connection once, reuse it
+# Check same thread is false, because we fast api runs on multiple threads
+conn = sqlite3.connect("db/attendance.db", check_same_thread=False)
+conn.row_factory = sqlite3.Row
+
+def get_db():
+ return conn
+
diff --git a/backend/db/users.py b/backend/db/users.py
new file mode 100644
index 0000000..2b364dc
--- /dev/null
+++ b/backend/db/users.py
@@ -0,0 +1,49 @@
+# This file is for database functions
+from db.db import get_db
+
+conn = get_db()
+
+def get_users(search):
+ # Get search param
+ search_param = f"%{search}%"
+
+ # Generate cursor
+ cursor = conn.cursor()
+
+ # Search if needed
+ if search:
+ cursor.execute("SELECT * FROM Employees WHERE username LIKE ?", (search_param,))
+ else:
+ cursor.execute("SELECT * FROM Employees")
+
+ # Fetch users from database
+ users = cursor.fetchall()
+ return users
+
+def get_attendance(id):
+ # Set up query for worked hours, group by and ordered by date
+ cursor = conn.cursor()
+ cursor.execute("""
+ SELECT date, sum(hours_worked) as hours_worked
+ FROM Attendance
+ WHERE employee_id = ?
+ GROUP BY date
+ ORDER BY date DESC
+ """, (id,))
+ attendance = cursor.fetchall()
+
+ # Fetch username from database
+ # I am not using table JOIN because when theres no attendance, the query returns no rows (and shows user doesnt exist)
+ cursor.execute("SELECT username FROM Employees WHERE id = ?", (id,))
+ username = cursor.fetchone()
+
+ # Check if user exists
+ if not username:
+ return {"username": None, "attendance": []}
+
+ # Return clean api response
+ return {
+ "username": username[0],
+ "attendance": attendance
+ }
+
diff --git a/backend/dev.sh b/backend/dev.sh
new file mode 100755
index 0000000..061ca9f
--- /dev/null
+++ b/backend/dev.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+uvicorn main:app --reload
diff --git a/backend/main.py b/backend/main.py
new file mode 100644
index 0000000..74ba38d
--- /dev/null
+++ b/backend/main.py
@@ -0,0 +1,24 @@
+from fastapi import FastAPI
+import sqlite3
+from db.users import get_users, get_attendance
+from fastapi.middleware.cors import CORSMiddleware
+
+# Get fastapi app
+app = FastAPI()
+
+# Add cors headers to the app
+app.add_middleware(
+ CORSMiddleware,
+ allow_origins=["http://localhost:3000", "http://127.0.0.1:3000"],
+ allow_credentials=True,
+ allow_methods=["GET"],
+ allow_headers=["*"],
+)
+
+@app.get("/")
+def list_users(s: str = None):
+ return get_users(s)
+
+@app.get("/{employee_id}")
+def list_attendance(employee_id: int):
+ return get_attendance(employee_id)
diff --git a/backend/requirements.txt b/backend/requirements.txt
new file mode 100644
index 0000000..bf73abe
--- /dev/null
+++ b/backend/requirements.txt
@@ -0,0 +1,13 @@
+annotated-types==0.7.0
+anyio==4.9.0
+click==8.2.1
+fastapi==0.115.14
+h11==0.16.0
+idna==3.10
+pydantic==2.11.7
+pydantic-core==2.33.2
+sniffio==1.3.1
+starlette==0.46.2
+typing-extensions==4.14.0
+typing-inspection==0.4.1
+uvicorn==0.35.0
diff --git a/backend/run.sh b/backend/run.sh
new file mode 100755
index 0000000..11d9f8c
--- /dev/null
+++ b/backend/run.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+# Run the server
+uvicorn main:app --port 8000
diff --git a/frontend/.cta.json b/frontend/.cta.json
new file mode 100644
index 0000000..5ce3585
--- /dev/null
+++ b/frontend/.cta.json
@@ -0,0 +1,11 @@
+{
+ "projectName": ".",
+ "mode": "file-router",
+ "typescript": true,
+ "tailwind": true,
+ "packageManager": "bun",
+ "git": true,
+ "version": 1,
+ "framework": "react-cra",
+ "chosenAddOns": ["tanstack-query"]
+}
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..693a705
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+count.txt
+.env
+.nitro
+.tanstack
diff --git a/frontend/.prettierrc.mjs b/frontend/.prettierrc.mjs
new file mode 100644
index 0000000..b949921
--- /dev/null
+++ b/frontend/.prettierrc.mjs
@@ -0,0 +1,9 @@
+const config = {
+ trailingComma: "es5",
+ printWidth: 120,
+ tabWidth: 4,
+ semi: true,
+ singleQuote: false,
+};
+
+export default config;
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..a10b1aa
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,283 @@
+Welcome to your new TanStack app!
+
+# Getting Started
+
+To run this application:
+
+```bash
+bun install
+bunx --bun run start
+```
+
+# Building For Production
+
+To build this application for production:
+
+```bash
+bunx --bun run build
+```
+
+## Testing
+
+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
+
+```bash
+bunx --bun run test
+```
+
+## Styling
+
+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
+
+## Routing
+
+This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
+
+### Adding A Route
+
+To add a new route to your application just add another a new file in the `./src/routes` directory.
+
+TanStack will automatically generate the content of the route file for you.
+
+Now that you have two routes you can use a `Link` component to navigate between them.
+
+### Adding Links
+
+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
+
+```tsx
+import { Link } from "@tanstack/react-router";
+```
+
+Then anywhere in your JSX you can use it like so:
+
+```tsx
+
+ {data.results.map((person) => (
+ {person.name}
+ ))}
+
+ );
+ },
+});
+```
+
+Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
+
+### React-Query
+
+React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
+
+First add your dependencies:
+
+```bash
+bun install @tanstack/react-query @tanstack/react-query-devtools
+```
+
+Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
+
+```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// ...
+
+const queryClient = new QueryClient();
+
+// ...
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+
+ root.render(
+
+
+ );
+}
+```
+
+You can also add TanStack Query Devtools to the root route (optional).
+
+```tsx
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const rootRoute = createRootRoute({
+ component: () => (
+ <>
+
+
+ {data.map((person) => (
+ {person.name}
+ ))}
+
+
+ countStore.setState((n) => n + 1)}>Increment - {count}
+
+ );
+}
+
+export default App;
+```
+
+One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
+
+Let's check this out by doubling the count using derived state.
+
+```tsx
+import { useStore } from "@tanstack/react-store";
+import { Store, Derived } from "@tanstack/store";
+import "./App.css";
+
+const countStore = new Store(0);
+
+const doubledStore = new Derived({
+ fn: () => countStore.state * 2,
+ deps: [countStore],
+});
+doubledStore.mount();
+
+function App() {
+ const count = useStore(countStore);
+ const doubledCount = useStore(doubledStore);
+
+ return (
+
+
countStore.setState((n) => n + 1)}>Increment - {count}
+
Doubled - {doubledCount}
+
Bolderjara Serviss
+
+
+
+
+
+
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..dfa3767
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,36 @@
+{
+ "name": ".",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "start": "vite --port 3000",
+ "build": "vite build && tsc",
+ "serve": "vite preview",
+ "test": "vitest run"
+ },
+ "dependencies": {
+ "@tailwindcss/vite": "^4.0.6",
+ "@tanstack/react-query": "^5.66.5",
+ "@tanstack/react-query-devtools": "^5.66.5",
+ "@tanstack/react-router": "^1.121.2",
+ "@tanstack/react-router-devtools": "^1.121.2",
+ "@tanstack/router-plugin": "^1.121.2",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "tailwindcss": "^4.0.6"
+ },
+ "devDependencies": {
+ "@testing-library/dom": "^10.4.0",
+ "@testing-library/react": "^16.2.0",
+ "@types/react": "^19.0.8",
+ "@types/react-dom": "^19.0.3",
+ "@vitejs/plugin-react": "^4.3.4",
+ "jsdom": "^26.0.0",
+ "prettier": "^3.6.2",
+ "typescript": "^5.7.2",
+ "vite": "^6.1.0",
+ "vitest": "^3.0.5",
+ "web-vitals": "^4.2.4"
+ }
+}
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
new file mode 100644
index 0000000..a11777c
Binary files /dev/null and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png
new file mode 100644
index 0000000..fc44b0a
Binary files /dev/null and b/frontend/public/logo192.png differ
diff --git a/frontend/public/logo512.png b/frontend/public/logo512.png
new file mode 100644
index 0000000..a4e47a6
Binary files /dev/null and b/frontend/public/logo512.png differ
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
new file mode 100644
index 0000000..e9e57dc
--- /dev/null
+++ b/frontend/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
new file mode 100644
index 0000000..65b1db9
--- /dev/null
+++ b/frontend/src/components/Header.tsx
@@ -0,0 +1,11 @@
+import { Link } from "@tanstack/react-router";
+
+export default function Header() {
+ return (
+
+ );
+}
diff --git a/frontend/src/components/MainContainer.tsx b/frontend/src/components/MainContainer.tsx
new file mode 100644
index 0000000..a00444f
--- /dev/null
+++ b/frontend/src/components/MainContainer.tsx
@@ -0,0 +1,3 @@
+export default function MainContainer(props: { children: React.ReactNode; className?: string }) {
+ return {props.children} ;
+}
diff --git a/frontend/src/components/UsersTable.tsx b/frontend/src/components/UsersTable.tsx
new file mode 100644
index 0000000..4172ce0
--- /dev/null
+++ b/frontend/src/components/UsersTable.tsx
@@ -0,0 +1,60 @@
+import { API_BASE_URL } from "@/consts";
+import type { User } from "@/types/api";
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+
+function RenderList({ list }: { list: UseQueryResult }) {
+ // Base classes for each row
+ const baseRowClass = "flex text-xl p-2 px-4 rounded capitalize bg-panel/75";
+
+ // Display loading and error states
+ if (list.isLoading) return Loading...
;
+ if (list.isError) return Error: {list.error.message}
;
+
+ // Render all users to the list
+ return list.data?.map((u) => {
+ return (
+ ({ queryKey: ["users", debouncedSearch], queryFn: fetchUsers });
+
+ // Use effect is being used to make refetch after user has stopped typing in the search bar
+ useEffect(() => {
+ const timeout = setTimeout(() => setDebouncedSearch(search), 500);
+ return () => clearTimeout(timeout); // Clear timeout
+ }, [search]);
+
+ return (
+
+
setSearch(e.target.value)}
+ />
+
+
+
{children} ;
+}
diff --git a/frontend/src/logo.svg b/frontend/src/logo.svg
new file mode 100644
index 0000000..d6c2da2
--- /dev/null
+++ b/frontend/src/logo.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..1425c1b
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,46 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+
+import * as TanStackQueryProvider from "./integrations/tanstack-query/root-provider.tsx";
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen";
+
+import "./styles.css";
+import reportWebVitals from "./reportWebVitals.ts";
+
+// Create a new router instance
+const router = createRouter({
+ routeTree,
+ context: {
+ ...TanStackQueryProvider.getContext(),
+ },
+ defaultPreload: "intent",
+ scrollRestoration: true,
+ defaultStructuralSharing: true,
+ defaultPreloadStaleTime: 0,
+});
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+// Render the app
+const rootElement = document.getElementById("app");
+if (rootElement && !rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(
+
+
+ );
+}
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/frontend/src/reportWebVitals.ts b/frontend/src/reportWebVitals.ts
new file mode 100644
index 0000000..7117685
--- /dev/null
+++ b/frontend/src/reportWebVitals.ts
@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry?: () => void) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
+ onCLS(onPerfEntry);
+ onINP(onPerfEntry);
+ onFCP(onPerfEntry);
+ onLCP(onPerfEntry);
+ onTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
new file mode 100644
index 0000000..0ca4b88
--- /dev/null
+++ b/frontend/src/routeTree.gen.ts
@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as UserIdRouteImport } from './routes/$userId'
+import { Route as IndexRouteImport } from './routes/index'
+
+const UserIdRoute = UserIdRouteImport.update({
+ id: '/$userId',
+ path: '/$userId',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '/$userId': typeof UserIdRoute
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '/$userId': typeof UserIdRoute
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport
+ '/': typeof IndexRoute
+ '/$userId': typeof UserIdRoute
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths: '/' | '/$userId'
+ fileRoutesByTo: FileRoutesByTo
+ to: '/' | '/$userId'
+ id: '__root__' | '/' | '/$userId'
+ fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ UserIdRoute: typeof UserIdRoute
+}
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/$userId': {
+ id: '/$userId'
+ path: '/$userId'
+ fullPath: '/$userId'
+ preLoaderRoute: typeof UserIdRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ UserIdRoute: UserIdRoute,
+}
+export const routeTree = rootRouteImport
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/frontend/src/routes/$userId.tsx b/frontend/src/routes/$userId.tsx
new file mode 100644
index 0000000..53e6c07
--- /dev/null
+++ b/frontend/src/routes/$userId.tsx
@@ -0,0 +1,67 @@
+import MainContainer from "@/components/MainContainer";
+import { API_BASE_URL } from "@/consts";
+import type { UserInfo } from "@/types/api";
+import { capitalizeFirstLetter } from "@/utils/capitalizeFirstLetter";
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/$userId")({
+ component: RouteComponent,
+});
+
+function DisplayUserName({ info }: { info: UseQueryResult }) {
+ // Base classes for headers
+ const baseClasses = "text-4xl font-bold text-center";
+
+ // Display loading and error states
+ if (info.isLoading) return Loading user info ... ;
+ if (info.isError) return Error: {info.error.message} ;
+
+ // Check if user is null
+ if (!info.data?.username) return User not found ;
+
+ return {capitalizeFirstLetter(info.data.username)} ;
+}
+
+function DisplayUserTable({ info }: { info: UseQueryResult }) {
+ // Base classes for headers
+ const baseClasses = "p-2 text-center";
+
+ if (!info.data) return; // return nothing when no data
+ if (!info.data.username) return; // Return nothing when user is null
+ if (info.data.attendance.length === 0) return No attendance
; // Empty attendance, return msg
+
+ // Display attendance in a table
+ return (
+
+
+ Date
+ Hours worked
+
+
+ {info.data.attendance.map((a) => (
+
+ {a.date}
+ {a.hours_worked}
+
+ ))}
+
+
+ );
+}
+
+function RouteComponent() {
+ const { userId } = Route.useParams();
+
+ // Define url for user info fetch
+ const userInfoURL = new URL(`${API_BASE_URL}/${userId}`);
+ const fetchUserInfo = () => fetch(userInfoURL).then((res) => res.json());
+ const userInfo = useQuery({ queryKey: ["user", userId], queryFn: fetchUserInfo });
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
new file mode 100644
index 0000000..ccbdb9e
--- /dev/null
+++ b/frontend/src/routes/__root.tsx
@@ -0,0 +1,17 @@
+import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import Header from "../components/Header";
+
+import type { QueryClient } from "@tanstack/react-query";
+
+interface MyRouterContext {
+ queryClient: QueryClient;
+}
+
+export const Route = createRootRouteWithContext()({
+ component: () => (
+ <>
+
+
+ Employees
+
+ );
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
new file mode 100644
index 0000000..2deb03f
--- /dev/null
+++ b/frontend/src/styles.css
@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+@theme {
+ --color-accent: #123ffb;
+ --color-body: #dfe1e5;
+ --color-panel: white;
+}
+
+body {
+ @apply m-0;
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+ "Droid Sans", "Helvetica Neue", sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
new file mode 100644
index 0000000..365dfa7
--- /dev/null
+++ b/frontend/src/types/api.ts
@@ -0,0 +1,14 @@
+export interface User {
+ id: number;
+ username: string;
+}
+
+export interface Attendance {
+ date: string;
+ hours_worked: number;
+}
+
+export interface UserInfo {
+ username: string | null;
+ attendance: Attendance[];
+}
diff --git a/frontend/src/utils/capitalizeFirstLetter.ts b/frontend/src/utils/capitalizeFirstLetter.ts
new file mode 100644
index 0000000..fea7a6b
--- /dev/null
+++ b/frontend/src/utils/capitalizeFirstLetter.ts
@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(val: string) {
+ return String(val).charAt(0).toUpperCase() + String(val).slice(1);
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..f9fc45c
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "include": ["**/*.ts", "**/*.tsx"],
+ "compilerOptions": {
+ "target": "ES2022",
+ "jsx": "react-jsx",
+ "module": "ESNext",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "types": ["vite/client"],
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "noEmit": true,
+
+ /* Linting */
+ "skipLibCheck": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..2951b96
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import viteReact from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import { resolve } from "node:path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact(), tailwindcss()],
+ test: {
+ globals: true,
+ environment: "jsdom",
+ },
+ resolve: {
+ alias: {
+ "@": resolve(__dirname, "./src"),
+ },
+ },
+});
diff --git a/p1.png b/p1.png
new file mode 100644
index 0000000..9f62562
Binary files /dev/null and b/p1.png differ
diff --git a/p2.png b/p2.png
new file mode 100644
index 0000000..fbe7724
Binary files /dev/null and b/p2.png differ