Add frontend code

apps/kvittering-frontend/.env.local

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:5000

apps/kvittering-frontend/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/kvittering-frontend/README.md

@@ -0,0 +1,177 @@
+# React + Vite + TypeScript Template (react-vite-ui)
+
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Dan5py/react-vite-ui/blob/main/LICENSE)
+
+A React + Vite template powered by shadcn/ui.
+
+## 🎉 Features
+
+- **React** - A JavaScript library for building user interfaces.
+- **Vite** - A fast, opinionated frontend build tool.
+- **TypeScript** - A typed superset of JavaScript that compiles to plain JavaScript.
+- **Tailwind CSS** - A utility-first CSS framework.
+- **Tailwind Prettier Plugin** - A Prettier plugin for formatting Tailwind CSS classes.
+- **ESLint** - A pluggable linting utility for JavaScript and TypeScript.
+- **PostCSS** - A tool for transforming CSS with JavaScript.
+- **Autoprefixer** - A PostCSS plugin to parse CSS and add vendor prefixes.
+- **shadcn/ui** - Beautifully designed components that you can copy and paste into your apps.
+
+## ⚙️ Prerequisites
+
+Make sure you have the following installed on your development machine:
+
+- Node.js (version 16 or above)
+- pnpm (package manager)
+
+## 🚀 Getting Started
+
+Follow these steps to get started with the react-vite-ui template:
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/dan5py/react-vite-ui.git
+   ```
+
+2. Navigate to the project directory:
+
+   ```bash
+   cd react-vite-ui
+   ```
+
+3. Install the dependencies:
+
+   ```bash
+   pnpm install
+   ```
+
+4. Start the development server:
+
+   ```bash
+   pnpm dev
+   ```
+
+## 📜 Available Scripts
+
+- pnpm dev - Starts the development server.
+- pnpm build - Builds the production-ready code.
+- pnpm lint - Runs ESLint to analyze and lint the code.
+- pnpm preview - Starts the Vite development server in preview mode.
+
+## 📂 Project Structure
+
+The project structure follows a standard React application layout:
+
+```python
+react-vite-ui/
+  ├── node_modules/      # Project dependencies
+  ├── public/            # Public assets
+  ├── src/               # Application source code
+  │   ├── components/    # React components
+  │   │   └── ui/        # shadc/ui components
+  │   ├── styles/        # CSS stylesheets
+  │   ├── lib/           # Utility functions
+  │   ├── App.tsx        # Application entry point
+  │   └── index.tsx      # Main rendering file
+  ├── eslint.config.js     # ESLint configuration
+  ├── index.html         # HTML entry point
+  ├── postcss.config.js  # PostCSS configuration
+  ├── tailwind.config.ts # Tailwind CSS configuration
+  ├── tsconfig.json      # TypeScript configuration
+  └── vite.config.ts     # Vite configuration
+```
+
+## 📄 License
+
+This project is licensed under the MIT License. See the [LICENSE](https://choosealicense.com/licenses/mit/) file for details.
+
+# Vite Application with Docker and Nginx
+
+This repository contains a Vite-built React application that can be served locally using Docker and Nginx.
+
+## Why Docker and Nginx?
+
+When building a Vite application with `npm run build`, the resulting files in the `dist` directory are optimized for production with:
+- Hashed filenames for cache busting (e.g., `index-DzP5xbg0.css`)
+- Minified and bundled JavaScript and CSS
+- Static assets with optimized paths
+
+These files need to be served with the correct MIME types and path configurations, which can cause issues when using simple development servers like Live Server. Common errors include:
+
+```
+Refused to apply style from '...' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
+```
+
+## Solution: Docker with Nginx
+
+This repository includes a Docker Compose setup that properly serves your Vite application using Nginx, ensuring:
+- Correct MIME types for all assets
+- Proper handling of SPA routing
+- Optimal cache headers
+
+## Getting Started
+
+### Prerequisites
+
+- [Docker](https://www.docker.com/get-started) installed and running on your machine
+
+### Running the Application
+
+1. Build your Vite application (if you haven't already):
+   ```bash
+   npm run build
+   ```
+
+2. Start the Docker container:
+   ```bash
+   docker compose up
+   ```
+
+3. Access your application at:
+   ```
+   http://localhost:8080
+   ```
+
+4. To stop the container, press `Ctrl+C` in the terminal or run:
+   ```bash
+   docker compose down
+   ```
+
+## Configuration Files
+
+### docker-compose.yml
+
+```yaml
+version: '3'
+
+services:
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "8080:80"
+    volumes:
+      - ./dist:/usr/share/nginx/html
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+    restart: unless-stopped
+```
+
+### nginx.conf
+
+The custom Nginx configuration ensures:
+- Proper MIME types for JavaScript, CSS, and SVG files
+- SPA routing with fallback to index.html
+- Appropriate cache headers
+
+## Customization
+
+- To change the port, modify the `ports` section in `docker-compose.yml`
+- For additional Nginx configurations, edit the `nginx.conf` file
+
+## Troubleshooting
+
+If you encounter issues:
+
+1. Ensure Docker is running on your system
+2. Verify that the `dist` directory contains your built Vite application
+3. Check that port 8080 is not already in use by another application
+4. Review Docker logs with `docker compose logs`

apps/kvittering-frontend/biome.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"linter": {
+		"ignore": ["dist"]
+	}
+}

apps/kvittering-frontend/components.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/styles/globals.css",
+		"baseColor": "zinc",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"iconLibrary": "lucide"
+}

apps/kvittering-frontend/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Kvitteringsskjema</title>
+  <script defer data-domain="kvittering.online.ntnu.no" src="https://plausible.io/js/script.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

apps/kvittering-frontend/package.json

@@ -0,0 +1,46 @@
+{
+	"name": "@dotkomonline/kvittering-frontend",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "biome check --write --unsafe .",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@hookform/resolvers": "^4.1.2",
+		"@radix-ui/react-label": "^2.1.2",
+		"@radix-ui/react-radio-group": "^1.2.3",
+		"@radix-ui/react-select": "^2.1.6",
+		"@radix-ui/react-slot": "^1.1.2",
+		"@sentry/browser": "^9.4.0",
+		"@sentry/react": "^9.4.0",
+		"browser-image-compression": "^2.0.2",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"lucide-react": "^0.475.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"react-dropzone": "^14.3.8",
+		"react-hook-form": "^7.54.2",
+		"sonner": "^2.0.1",
+		"tailwindcss-animate": "^1.0.7",
+		"zod": "^3.24.2"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.9.4",
+		"@types/node": "^22.0.0",
+		"@types/react": "^19.0.8",
+		"@types/react-dom": "^19.0.3",
+		"@vitejs/plugin-react": "4.3.4",
+		"autoprefixer": "^10.4.20",
+		"globals": "^15.14.0",
+		"postcss": "^8.5.1",
+		"tailwind-merge": "^3.0.1",
+		"tailwindcss": "^3.4.14",
+		"typescript": "^5.8",
+		"vite": "6.2.0"
+	}
+}

apps/kvittering-frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

apps/kvittering-frontend/src/App.tsx

@@ -0,0 +1,17 @@
+import { Toaster } from "sonner";
+import { Header } from "./components/header";
+import ReceiptForm from "./components/receipt-form";
+
+function App() {
+	return (
+		<div>
+			<Header />
+			<main className="px-8 lg:px-0">
+				<ReceiptForm />
+			</main>
+			<Toaster position="top-center" expand={true} />
+		</div>
+	);
+}
+
+export default App;

apps/kvittering-frontend/src/components/header.tsx

@@ -0,0 +1,14 @@
+export const Header = () => {
+	return (
+		<header className="bg-[#0d5474] grid justify-center box-border w-full">
+			<img
+				src={"https://wiki.online.ntnu.no/attachments/681-Online_hvit.png"}
+				alt="Linjeforeningen Online"
+				className="w-[26rem] max-w-[100vw] box-border p-6"
+			/>
+			<h2 className="text-white text-center tracking-wider mb-4">
+				Kvitteringsskjema
+			</h2>
+		</header>
+	);
+};