feat: Add Uziomy calculator page with grounding calculations and document generation

- Implemented Uziomy component for calculating grounding parameters.
- Added state management for input fields and results.
- Integrated DatePicker for date selection.
- Created functions for grounding calculations, document generation (DOCX), and DXF file generation.
- Enhanced UI with Tailwind CSS for better styling and responsiveness.
- Updated global styles to include Inter font and custom scrollbar styles.
- Configured Tailwind CSS to extend colors, fonts, and animations.

pages/cross.js

@@ -1,50 +1,21 @@
-import Head from "next/head";
 import { useState, useCallback } from "react";
-import styles from "../styles/Home.module.css";
-import Header from "../components/templates/header";
-import Nav from "../components/templates/nav";
-import UserTop from "../components/templates/userTop";
-import Content from "../components/templates/content";
-import Footer from "../components/templates/footer";
-import { useSession, signIn, signOut } from "next-auth/react";
-import {
-	Pane,
-	TextInputField,
-	TextareaField,
-	Button,
-	BuildIcon,
-	toaster,
-	Alert,
+import { useSession, signIn } from "next-auth/react";
+import Layout from "../components/ui/Layout";
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Alert } from "../components/ui/components";
+import { 
 	FileUploader,
-	FilePicker,
 	FileCard,
 } from "evergreen-ui";
+import { CloudArrowUpIcon as CloudUploadIcon, ArrowDownTrayIcon as DownloadIcon, Squares2X2Icon as GridIcon } from '@heroicons/react/24/outline';
 import axios from "axios";
 
 export default function Cross() {
 	const { data: session } = useSession();
-
-	const [fileData, setFileData] = useState(null);
-	const handleDownload = () => {
-		console.log("down");
-		if (fileData) {
-			console.log("load");
-			//   const link = document.createElement("a");
-			//   link.href = `data:application/octet-stream;base64,${fileData}`;
-			//   link.download = "plik.dxf";
-			//   link.click();
-			document.getElementById("down").download = fileData.filename;
-			console.log(fileData.filename)
-
-			document.getElementById("down").href = "cross.dxf";
-			console.log("cross.dxf")
-
-			document.getElementById("down").click();
-		}
-	};
-
 	const [files, setFiles] = useState([]);
 	const [fileRejections, setFileRejections] = useState([]);
+	const [fileData, setFileData] = useState(null);
+	const [isLoading, setIsLoading] = useState(false);
+	
 	const handleChange = useCallback((files) => setFiles([files[0]]), []);
 	const handleRejected = useCallback(
 		(fileRejections) => setFileRejections([fileRejections[0]]),
@@ -55,136 +26,222 @@ export default function Cross() {
 		setFileRejections([]);
 	}, []);
 
-	const handleSubmit = async (event) => {
-		event.preventDefault();
-
-		let file = files[0];
-
-		if (!file) {
-			// Handle error if no file is selected
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		setIsLoading(true);
+		
+		console.log("Files:", files);
+		if (files.length === 0) {
+			console.log("No files selected");
+			setIsLoading(false);
 			return;
 		}
 
 		const formData = new FormData();
-		formData.append("file", file);
+		formData.append("files", files[0]);
 
 		axios
-			.post("/api/upload", formData, {
+			.post("/api/cross", formData, {
 				headers: {
 					"Content-Type": "multipart/form-data",
 				},
 			})
 			.then((response) => {
 				console.log(response.data);
-				if (response.data.toString().startsWith("Py Error")) {
-					toaster.danger(response.data);
-					return;
-				}
-				toaster.warning(response.statusText);
-				console.log(response.data)
 				setFileData(response.data);
-				document.getElementById("download").disabled = false;
-
-				// document.getElementById("down").download =
-				// response.data.filename.toString().split(".")[0].split("-")[1]+"_s.dxf";
-				// document.getElementById("down").href =
-				// "uploads/"+response.data.filename.toString().split(".")[0]+"_s.dxf";
-				// document.getElementById("down").click();
+				setIsLoading(false);
 			})
 			.catch((error) => {
 				console.error(error);
+				setIsLoading(false);
 			});
 	};
 
+	const handleDownload = () => {
+		if (fileData) {
+			document.getElementById("down").download = fileData.filename;
+			document.getElementById("down").href = "cross.dxf";
+			document.getElementById("down").click();
+		}
+	};
+
 	if (session) {
 		return (
-			<div className="">
-				<Head>
-					<title>Wastpol</title>
-				</Head>
+			<Layout title="Wastpol - Generator siatki">
+				<div className="p-6 max-w-4xl mx-auto">
+					{/* Page Header */}
+					<div className="mb-8">
+						<div className="flex items-center space-x-3 mb-4">
+							<div className="p-3 bg-blue-100 rounded-lg">
+								<GridIcon className="w-8 h-8 text-blue-600" />
+							</div>
+							<div>
+								<h1 className="text-3xl font-bold text-gray-900">Generator siatki</h1>
+								<p className="text-gray-600">Przekształć pliki DXF na siatki instalacyjne</p>
+							</div>
+						</div>
+					</div>
 
-				<div className="flex md:flex-row flex-col justify-between px-8 mt-2">
-					<Nav />
-					<UserTop session={session} />
+					<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+						{/* Upload Section */}
+						<Card>
+							<CardHeader>
+								<CardTitle className="flex items-center space-x-2">
+									<CloudUploadIcon className="w-5 h-5 text-blue-600" />
+									<span>Prześlij plik</span>
+								</CardTitle>
+								<CardDescription>
+									Wybierz plik DXF do przetworzenia (maksymalnie 50 MB)
+								</CardDescription>
+							</CardHeader>
+							<CardContent>
+								<div className="space-y-4">
+									<FileUploader
+										label="Przeciągnij i upuść plik lub kliknij aby wybrać"
+										description="Obsługiwane formaty: DXF (max 50 MB)"
+										maxSizeInBytes={50 * 1024 ** 2}
+										maxFiles={1}
+										onChange={handleChange}
+										onRejected={handleRejected}
+										renderFile={(file) => {
+											const { name, size, type } = file;
+											const fileRejection = fileRejections.find(
+												(fileRejection) => fileRejection.file === file
+											);
+											const { message } = fileRejection || {};
+											return (
+												<FileCard
+													key={name}
+													isInvalid={fileRejection != null}
+													name={name}
+													onRemove={handleRemove}
+													sizeInBytes={size}
+													type={type}
+													validationMessage={message}
+												/>
+											);
+										}}
+										values={files}
+									/>
+									
+									<Button
+										onClick={handleSubmit}
+										disabled={files.length === 0 || isLoading}
+										loading={isLoading}
+										className="w-full"
+									>
+										{isLoading ? 'Przetwarzanie...' : 'Dodaj siatkę'}
+									</Button>
+								</div>
+							</CardContent>
+						</Card>
+
+						{/* Results Section */}
+						<Card>
+							<CardHeader>
+								<CardTitle className="flex items-center space-x-2">
+									<DownloadIcon className="w-5 h-5 text-green-600" />
+									<span>Wynik</span>
+								</CardTitle>
+								<CardDescription>
+									Pobierz wygenerowany plik siatki
+								</CardDescription>
+							</CardHeader>
+							<CardContent>
+								{fileData ? (
+									<div className="space-y-4">
+										<Alert variant="success">
+											<div className="flex items-center space-x-2">
+												<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+													<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+												</svg>
+												<span>Plik został pomyślnie przetworzony!</span>
+											</div>
+										</Alert>
+										
+										<Button
+											onClick={handleDownload}
+											variant="primary"
+											className="w-full"
+										>
+											<DownloadIcon className="w-5 h-5 mr-2" />
+											Pobierz siatką DXF
+										</Button>
+									</div>
+								) : (
+									<div className="text-center py-8">
+										<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+											<GridIcon className="w-8 h-8 text-gray-400" />
+										</div>
+										<p className="text-gray-500">Prześlij plik aby rozpocząć przetwarzanie</p>
+									</div>
+								)}
+							</CardContent>
+						</Card>
+					</div>
+
+					{/* Instructions */}
+					<Card className="mt-8">
+						<CardHeader>
+							<CardTitle>Instrukcje</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+								<div className="flex items-start space-x-3">
+									<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+										<span className="text-sm font-semibold text-blue-600">1</span>
+									</div>
+									<div>
+										<h4 className="font-medium text-gray-900">Prześlij plik</h4>
+										<p className="text-sm text-gray-600">Wybierz plik DXF z projektem</p>
+									</div>
+								</div>
+								
+								<div className="flex items-start space-x-3">
+									<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+										<span className="text-sm font-semibold text-blue-600">2</span>
+									</div>
+									<div>
+										<h4 className="font-medium text-gray-900">Przetwarzaj</h4>
+										<p className="text-sm text-gray-600">Kliknij "Dodaj siatkę"</p>
+									</div>
+								</div>
+								
+								<div className="flex items-start space-x-3">
+									<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+										<span className="text-sm font-semibold text-blue-600">3</span>
+									</div>
+									<div>
+										<h4 className="font-medium text-gray-900">Pobierz</h4>
+										<p className="text-sm text-gray-600">Zapisz gotową siatkę DXF</p>
+									</div>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+
+					<a href="the.dxf" download="the.dxf" id="down" className="hidden" />
 				</div>
-
-				<main className="flex flex-1 flex-col items-center">
-					<FileUploader
-						label="Prześlij plik"
-						description="Możesz dodać 1 plik, max 50 MB."
-						maxSizeInBytes={50 * 1024 ** 2}
-						maxFiles={1}
-						onChange={handleChange}
-						onRejected={handleRejected}
-						renderFile={(file) => {
-							const { name, size, type } = file;
-							const fileRejection = fileRejections.find(
-								(fileRejection) => fileRejection.file === file
-							);
-							const { message } = fileRejection || {};
-							return (
-								<FileCard
-									key={name}
-									isInvalid={fileRejection != null}
-									name={name}
-									onRemove={handleRemove}
-									sizeInBytes={size}
-									type={type}
-									validationMessage={message}
-								/>
-							);
-						}}
-						values={files}
-					/>
-
-					<Button
-						marginY={8}
-						marginRight={12}
-						appearance="default"
-						iconAfter={BuildIcon}
-						onClick={(e) => {
-							console.log("louding begins");
-							console.log(files);
-							document.getElementById("download").disabled = false;
-							handleSubmit(e);
-						}}
-					>
-						Dodaj siatkę
-					</Button>
-					<Button
-						id="download"
-						marginY={8}
-						marginRight={12}
-						appearance="default"
-						iconAfter={BuildIcon}
-						// disabled={true}
-						onClick={handleDownload}
-					>
-						Pobierz
-					</Button>
-					<a href="the.dxf" download="the.dxf" id="down">
-						{" "}
-					</a>
-				</main>
-			</div>
+			</Layout>
 		);
 	}
+
 	return (
-		<div className="grid place-items-center h-screen">
-			<Head>
-				<title>Wastpol</title>
-			</Head>
-			<div className="flex flex-col justify-center">
-				<h2 className="p-2">Nie zalogowano</h2>
-				<br></br>
-				<Button
-					onClick={() => signIn()}
-					appearance="primary"
-					// className="p-2 bg-slate-200 rounded-md"
-				>
-					Zaloguj
-				</Button>
-			</div>
+		<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+			<Card className="w-full max-w-md">
+				<CardHeader className="text-center">
+					<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
+						<img src="/logo.png" alt="Wastpol" className="w-10 h-10" />
+					</div>
+					<CardTitle className="text-2xl">Zaloguj się</CardTitle>
+					<p className="text-gray-600 mt-2">Uzyskaj dostęp do generatora siatki</p>
+				</CardHeader>
+				<CardContent>
+					<Button onClick={() => signIn()} className="w-full" size="lg">
+						Zaloguj się
+					</Button>
+				</CardContent>
+			</Card>
 		</div>
 	);
 }