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.

components/templates/generator.js

@@ -1,19 +1,9 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
-import {
-	Pane,
-	TextInputField,
-	TextareaField,
-	Button,
-	BuildIcon,
-	toaster,
-	Alert,
-	RadioGroup,
-} from "evergreen-ui";
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Textarea, Alert } from "../ui/components";
+import { ChartBarIcon, ArrowDownTrayIcon as DownloadIcon, EyeIcon } from '@heroicons/react/24/outline';
 import axios from "axios";
 
-import Footer from "./footer";
-
 export default function Generator() {
 	const [profil, setProfil] = useState();
 	const [args, setArgs] = useState({
@@ -21,18 +11,22 @@ export default function Generator() {
 		elementOne: 0,
 		elementTwo: 0,
 	});
-	const [ElementOneOptions] = useState([
-		{ label: "Nic", value: "0" },
-		{ label: "Słup", value: "1" },
-		{ label: "Dom", value: "2" },
-	]);
-	const [ElementTwoOptions] = useState([
-		{ label: "Nic", value: "0" },
-		{ label: "Słup", value: "1" },
-		{ label: "Dom", value: "2" },
-	]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [previewVisible, setPreviewVisible] = useState(false);
 	const { query } = useRouter();
 
+	const ElementOneOptions = [
+		{ label: "Nic", value: "0" },
+		{ label: "Słup", value: "1" },
+		{ label: "Dom", value: "2" },
+	];
+	
+	const ElementTwoOptions = [
+		{ label: "Nic", value: "0" },
+		{ label: "Słup", value: "1" },
+		{ label: "Dom", value: "2" },
+	];
+
 	useEffect(() => {
 		if (query.external == "tru") {
 			axios
@@ -54,86 +48,68 @@ export default function Generator() {
 			if (line[0] == "P") continue;
 			if (line[0] == "S") continue;
 			if (line[0] == "X") continue;
-
 			newLines.push(line);
 		}
-		let xs = [];
-		let ys = [];
-		let zs = [];
-		let toti = 0;
-		let al = 0;
+		
+		let xs = [], ys = [], zs = [];
+		let toti = 0, al = 0;
+		
 		for (let line of newLines) {
 			al += 1;
 			let theLine = line.split(",");
-			//console.log(theLine)
-			if (
-				xs &&
-				parseFloat(theLine[0]) == xs[-1] &&
-				parseFloat(theLine[1]) == ys[-1]
-			)
+			
+			if (xs && parseFloat(theLine[0]) == xs[-1] && parseFloat(theLine[1]) == ys[-1])
 				continue;
 
 			if (al > 2) {
-				let dist =
-					((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
-						(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) **
-					0.5;
+				let dist = ((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
+					(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) ** 0.5;
 				toti += Math.round(dist);
 			}
 			xs.push(parseFloat(theLine[0]));
 			ys.push(parseFloat(theLine[1]));
 			zs.push(parseFloat(theLine[2]));
 		}
-		let prevLine = ["0", "0", "0"];
-		let scaleFactor = 100000 / 2000;
-		const canvas = document.getElementById("canvas");
 
+		const canvas = document.getElementById("canvas");
 		if (!canvas.getContext) {
 			console.log("canvas err");
-			toaster.warning("canvas err");
 			return;
 		}
 
 		const ctx = canvas.getContext("2d");
-		ctx.clearRect(0, 0, 700, 700);
-
-		// set line stroke and line width
-		ctx.strokeStyle = "red";
+		ctx.clearRect(0, 0, 700, 500);
+		ctx.strokeStyle = "#3B82F6";
 		ctx.lineWidth = 2;
+		
+		let scaleFactor = 100000 / 2000;
 		let totalH = Math.max(...zs);
 		let minH = Math.min(...zs);
+		
 		for (let line = 0; line < xs.length - 1; line++) {
-			let theLine = [xs[line], ys[line], zs[line]];
-			let x = parseFloat(theLine[0]) - parseFloat(prevLine[0]);
-			let y = parseFloat(theLine[1]) - parseFloat(prevLine[1]);
 			let x1 = line * scaleFactor;
 			let y1 = zs[line];
 			let x2 = (line + 1) * scaleFactor;
 			let y2 = zs[line + 1];
-			//console.log(x1, y1, x2, y2);
-			let b0 = 0;
-			let b1 = 500;
+			
+			let b0 = 50, b1 = 450;
 			let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
 			let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
-
-			//b0 + (b1 - b0) * ((x1-0)/(toti*scaleFactor-0));
+			
 			let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti * scaleFactor));
 			let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti * scaleFactor));
-			//console.log(x12);
 
 			ctx.beginPath();
 			ctx.moveTo(x12, z1);
 			ctx.lineTo(x22, z2);
 			ctx.stroke();
 		}
-	};
-
-	const parsePreview = (e) => {
-		// console.log(dxf);
+		setPreviewVisible(true);
 	};
 
 	const py = (e, profil, args) => {
 		e.preventDefault();
+		setIsLoading(true);
 
 		axios
 			.post("/api/spawn", {
@@ -141,91 +117,178 @@ export default function Generator() {
 				arguments: args,
 			})
 			.then(function (response) {
+				setIsLoading(false);
 				console.log(response);
 				if (response.data.toString().startsWith("Py Error")) {
-					toaster.danger(response.data);
+					alert("Błąd: " + response.data);
 					return;
 				}
-				toaster.warning(response.data.data);
-				document.getElementById("down").download =
-					response.data.filename.toString() + ".dxf";
+				document.getElementById("down").download = response.data.filename.toString() + ".dxf";
 				document.getElementById("down").click();
 			})
 			.catch(function (error) {
+				setIsLoading(false);
 				console.log(error);
 			});
 	};
+
 	return (
-		<div className="flex xl:flex-row flex-col">
-			<div className="flex flex-col">
-				<Pane width={480}>
-					<TextareaField
-						id="textarea-1"
-						label="Dane z Geoportalu:"
-						placeholder="Próbkowanie: 1 ..."
-						onChange={(e) => {
-							//console.log(e.target.value);
-							setProfil(e.target.value);
-							parsePreview(e);
-							getPath(e, e.target.value);
-						}}
-					/>
+		<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+			{/* Input Section */}
+			<div className="space-y-6">
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center space-x-2">
+							<ChartBarIcon className="w-5 h-5 text-blue-600" />
+							<span>Dane wejściowe</span>
+						</CardTitle>
+						<CardDescription>
+							Wklej dane z Geoportalu lub wprowadź własne współrzędne
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<Textarea
+							id="textarea-1"
+							label="Dane z Geoportalu"
+							placeholder="Próbkowanie: 1 ..."
+							rows={8}
+							onChange={(e) => {
+								setProfil(e.target.value);
+								getPath(e, e.target.value);
+							}}
+							className="font-mono text-sm"
+						/>
 
-					<TextInputField
-						label="Skala:"
-						placeholder="200"
-						width={100}
-						onChange={(e) => {
-							console.log(e.target.value);
-							setArgs({ ...args, scale: e.target.value });
-						}}
-					/>
-					<RadioGroup
-						label="Lewa"
-						value={args.elementOne}
-						options={ElementOneOptions}
-						onChange={(event) => {
-							setArgs({ ...args, elementOne: event.target.value });
-						}}
-					/>
-					<RadioGroup
-						label="Prawa"
-						value={args.elementTwo}
-						options={ElementTwoOptions}
-						onChange={(event) => {
-							setArgs({ ...args, elementTwo: event.target.value });
-						}}
-					/>
-					<Button
-						marginY={8}
-						marginRight={12}
-						appearance="default"
-						iconAfter={BuildIcon}
-						onClick={(e) => {
-							if (document.getElementById("textarea-1").value == "") {
-								toaster.danger("Pole danych nie może być puste");
-							} else if (
-								!document
-									.getElementById("textarea-1")
-									.value.startsWith("Próbkowanie")
-							) {
-								toaster.danger("Błędne dane");
-							} else {
-								py(e, profil, args);
-							}
-						}}
-					>
-						Generuj
-					</Button>
-				</Pane>
+						<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+							<Input
+								label="Skala"
+								placeholder="200"
+								type="number"
+								value={args.scale}
+								onChange={(e) => setArgs({ ...args, scale: e.target.value })}
+							/>
 
-				<a href="test.dxf" download="test.dxf" id="down">
-					{" "}
-				</a>
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Element lewy
+								</label>
+								<select
+									className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+									value={args.elementOne}
+									onChange={(e) => setArgs({ ...args, elementOne: e.target.value })}
+								>
+									{ElementOneOptions.map(option => (
+										<option key={option.value} value={option.value}>
+											{option.label}
+										</option>
+									))}
+								</select>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Element prawy
+								</label>
+								<select
+									className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+									value={args.elementTwo}
+									onChange={(e) => setArgs({ ...args, elementTwo: e.target.value })}
+								>
+									{ElementTwoOptions.map(option => (
+										<option key={option.value} value={option.value}>
+											{option.label}
+										</option>
+									))}
+								</select>
+							</div>
+						</div>
+
+						<Button
+							onClick={(e) => {
+								const textareaValue = document.getElementById("textarea-1").value;
+								if (textareaValue === "") {
+									alert("Pole danych nie może być puste");
+								} else if (!textareaValue.startsWith("Próbkowanie")) {
+									alert("Błędne dane");
+								} else {
+									py(e, profil, args);
+								}
+							}}
+							disabled={isLoading}
+							loading={isLoading}
+							className="w-full"
+						>
+							<DownloadIcon className="w-5 h-5 mr-2" />
+							{isLoading ? 'Generowanie...' : 'Generuj profil'}
+						</Button>
+					</CardContent>
+				</Card>
 			</div>
-			<Pane className="ml-8 shadow-md rounded-md">
-				<canvas id="canvas" height="500" width="700"></canvas>
-			</Pane>
+
+			{/* Preview Section */}
+			<div>
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center space-x-2">
+							<EyeIcon className="w-5 h-5 text-green-600" />
+							<span>Podgląd profilu</span>
+						</CardTitle>
+						<CardDescription>
+							Wizualizacja profilu terenu na podstawie wprowadzonych danych
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						{previewVisible ? (
+							<div className="bg-gray-50 rounded-lg p-4">
+								<canvas 
+									id="canvas" 
+									height="500" 
+									width="700"
+									className="border border-gray-200 rounded bg-white"
+								/>
+							</div>
+						) : (
+							<div className="bg-gray-50 rounded-lg p-8 text-center">
+								<div className="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
+									<ChartBarIcon className="w-8 h-8 text-gray-400" />
+								</div>
+								<p className="text-gray-500">Wprowadź dane aby zobaczyć podgląd profilu</p>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+
+				{/* Instructions */}
+				<Card className="mt-6">
+					<CardHeader>
+						<CardTitle>Instrukcje</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="space-y-3 text-sm">
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">1</span>
+								</div>
+								<p className="text-gray-600">Skopiuj dane z Geoportalu w formacie "Próbkowanie: 1"</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">2</span>
+								</div>
+								<p className="text-gray-600">Ustaw skalę i wybierz elementy dodatkowe</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">3</span>
+								</div>
+								<p className="text-gray-600">Kliknij "Generuj profil" aby pobrać plik DXF</p>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+
+			<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
 		</div>
 	);
 }

components/templates/generator_new.js

@@ -0,0 +1,294 @@
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Textarea, Alert } from "../ui/components";
+import { ChartBarIcon, ArrowDownTrayIcon as DownloadIcon, EyeIcon } from '@heroicons/react/24/outline';
+import axios from "axios";
+
+export default function Generator() {
+	const [profil, setProfil] = useState();
+	const [args, setArgs] = useState({
+		scale: 200,
+		elementOne: 0,
+		elementTwo: 0,
+	});
+	const [isLoading, setIsLoading] = useState(false);
+	const [previewVisible, setPreviewVisible] = useState(false);
+	const { query } = useRouter();
+
+	const ElementOneOptions = [
+		{ label: "Nic", value: "0" },
+		{ label: "Słup", value: "1" },
+		{ label: "Dom", value: "2" },
+	];
+	
+	const ElementTwoOptions = [
+		{ label: "Nic", value: "0" },
+		{ label: "Słup", value: "1" },
+		{ label: "Dom", value: "2" },
+	];
+
+	useEffect(() => {
+		if (query.external == "tru") {
+			axios
+				.post("/api/readtext", {
+					id: query.id,
+				})
+				.then(function (response) {
+					setProfil(response.data.data);
+					document.getElementById("textarea-1").value = response.data.data;
+					console.log(response.data.data);
+				});
+		}
+	}, []);
+
+	const getPath = (e, path) => {
+		let newLines = [];
+
+		for (let line of path.split("\n")) {
+			if (line[0] == "P") continue;
+			if (line[0] == "S") continue;
+			if (line[0] == "X") continue;
+			newLines.push(line);
+		}
+		
+		let xs = [], ys = [], zs = [];
+		let toti = 0, al = 0;
+		
+		for (let line of newLines) {
+			al += 1;
+			let theLine = line.split(",");
+			
+			if (xs && parseFloat(theLine[0]) == xs[-1] && parseFloat(theLine[1]) == ys[-1])
+				continue;
+
+			if (al > 2) {
+				let dist = ((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
+					(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) ** 0.5;
+				toti += Math.round(dist);
+			}
+			xs.push(parseFloat(theLine[0]));
+			ys.push(parseFloat(theLine[1]));
+			zs.push(parseFloat(theLine[2]));
+		}
+
+		const canvas = document.getElementById("canvas");
+		if (!canvas.getContext) {
+			console.log("canvas err");
+			return;
+		}
+
+		const ctx = canvas.getContext("2d");
+		ctx.clearRect(0, 0, 700, 500);
+		ctx.strokeStyle = "#3B82F6";
+		ctx.lineWidth = 2;
+		
+		let scaleFactor = 100000 / 2000;
+		let totalH = Math.max(...zs);
+		let minH = Math.min(...zs);
+		
+		for (let line = 0; line < xs.length - 1; line++) {
+			let x1 = line * scaleFactor;
+			let y1 = zs[line];
+			let x2 = (line + 1) * scaleFactor;
+			let y2 = zs[line + 1];
+			
+			let b0 = 50, b1 = 450;
+			let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
+			let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
+			
+			let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti * scaleFactor));
+			let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti * scaleFactor));
+
+			ctx.beginPath();
+			ctx.moveTo(x12, z1);
+			ctx.lineTo(x22, z2);
+			ctx.stroke();
+		}
+		setPreviewVisible(true);
+	};
+
+	const py = (e, profil, args) => {
+		e.preventDefault();
+		setIsLoading(true);
+
+		axios
+			.post("/api/spawn", {
+				profil: profil,
+				arguments: args,
+			})
+			.then(function (response) {
+				setIsLoading(false);
+				console.log(response);
+				if (response.data.toString().startsWith("Py Error")) {
+					alert("Błąd: " + response.data);
+					return;
+				}
+				document.getElementById("down").download = response.data.filename.toString() + ".dxf";
+				document.getElementById("down").click();
+			})
+			.catch(function (error) {
+				setIsLoading(false);
+				console.log(error);
+			});
+	};
+
+	return (
+		<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+			{/* Input Section */}
+			<div className="space-y-6">
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center space-x-2">
+							<ChartBarIcon className="w-5 h-5 text-blue-600" />
+							<span>Dane wejściowe</span>
+						</CardTitle>
+						<CardDescription>
+							Wklej dane z Geoportalu lub wprowadź własne współrzędne
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<Textarea
+							id="textarea-1"
+							label="Dane z Geoportalu"
+							placeholder="Próbkowanie: 1 ..."
+							rows={8}
+							onChange={(e) => {
+								setProfil(e.target.value);
+								getPath(e, e.target.value);
+							}}
+							className="font-mono text-sm"
+						/>
+
+						<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+							<Input
+								label="Skala"
+								placeholder="200"
+								type="number"
+								value={args.scale}
+								onChange={(e) => setArgs({ ...args, scale: e.target.value })}
+							/>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Element lewy
+								</label>
+								<select
+									className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+									value={args.elementOne}
+									onChange={(e) => setArgs({ ...args, elementOne: e.target.value })}
+								>
+									{ElementOneOptions.map(option => (
+										<option key={option.value} value={option.value}>
+											{option.label}
+										</option>
+									))}
+								</select>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Element prawy
+								</label>
+								<select
+									className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+									value={args.elementTwo}
+									onChange={(e) => setArgs({ ...args, elementTwo: e.target.value })}
+								>
+									{ElementTwoOptions.map(option => (
+										<option key={option.value} value={option.value}>
+											{option.label}
+										</option>
+									))}
+								</select>
+							</div>
+						</div>
+
+						<Button
+							onClick={(e) => {
+								const textareaValue = document.getElementById("textarea-1").value;
+								if (textareaValue === "") {
+									alert("Pole danych nie może być puste");
+								} else if (!textareaValue.startsWith("Próbkowanie")) {
+									alert("Błędne dane");
+								} else {
+									py(e, profil, args);
+								}
+							}}
+							disabled={isLoading}
+							loading={isLoading}
+							className="w-full"
+						>
+							<DownloadIcon className="w-5 h-5 mr-2" />
+							{isLoading ? 'Generowanie...' : 'Generuj profil'}
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+
+			{/* Preview Section */}
+			<div>
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center space-x-2">
+							<EyeIcon className="w-5 h-5 text-green-600" />
+							<span>Podgląd profilu</span>
+						</CardTitle>
+						<CardDescription>
+							Wizualizacja profilu terenu na podstawie wprowadzonych danych
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						{previewVisible ? (
+							<div className="bg-gray-50 rounded-lg p-4">
+								<canvas 
+									id="canvas" 
+									height="500" 
+									width="700"
+									className="border border-gray-200 rounded bg-white"
+								/>
+							</div>
+						) : (
+							<div className="bg-gray-50 rounded-lg p-8 text-center">
+								<div className="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
+									<ChartBarIcon className="w-8 h-8 text-gray-400" />
+								</div>
+								<p className="text-gray-500">Wprowadź dane aby zobaczyć podgląd profilu</p>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+
+				{/* Instructions */}
+				<Card className="mt-6">
+					<CardHeader>
+						<CardTitle>Instrukcje</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="space-y-3 text-sm">
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">1</span>
+								</div>
+								<p className="text-gray-600">Skopiuj dane z Geoportalu w formacie "Próbkowanie: 1"</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">2</span>
+								</div>
+								<p className="text-gray-600">Ustaw skalę i wybierz elementy dodatkowe</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">3</span>
+								</div>
+								<p className="text-gray-600">Kliknij "Generuj profil" aby pobrać plik DXF</p>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+
+			<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
+		</div>
+	);
+}

components/templates/manual.js

@@ -1,25 +1,12 @@
-import { useState, useEffect } from "react";
-import {
-	Pane,
-	TextInputField,
-	TextareaField,
-	Button,
-	toaster,
-	Alert,
-	TrashIcon,
-	Icon,
-} from "evergreen-ui";
+import { useState } from "react";
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input } from "../ui/components";
+import { PencilIcon, PlusIcon, TrashIcon, ArrowDownTrayIcon as DownloadIcon } from '@heroicons/react/24/outline';
 import axios from "axios";
-import Footer from "./footer";
-import Generator from "./generator";
 
 export default function Manual() {
 	const [points, setPoints] = useState([{ id: 0, len: 0, height: 0 }]);
 	const [args, setArgs] = useState({ scale: 200 });
-
-	//useEffect(() => {
-		//do something here
-	// }, [points]);
+	const [isLoading, setIsLoading] = useState(false);
 
 	const reIndex = () => {
 		let newId = 0;
@@ -32,7 +19,32 @@ export default function Manual() {
 		setPoints([...newPoints]);
 	};
 
+	const addPoint = () => {
+		setPoints([
+			...points,
+			{
+				id: points.length,
+				len: Number(points[points.length - 1].len) + 1,
+				height: 0,
+			},
+		]);
+	};
+
+	const removePoint = (index) => {
+		let newPoints = points;
+		newPoints.splice(index, 1);
+		setPoints([...newPoints]);
+		reIndex();
+	};
+
+	const updatePoint = (index, field, value) => {
+		let newPoints = points;
+		newPoints[index][field] = value;
+		setPoints([...newPoints]);
+	};
+
 	const generation = (e) => {
+		setIsLoading(true);
 		let pointString = "Próbkowanie: 1\nSegment 0: w dół\nX:	Y,	Z";
 
 		for (let point of points) {
@@ -42,7 +54,6 @@ export default function Manual() {
 			pointString += point.height;
 		}
 
-		console.log(pointString);
 		py(e, pointString, args);
 	};
 
@@ -55,103 +66,176 @@ export default function Manual() {
 				arguments: args,
 			})
 			.then(function (response) {
+				setIsLoading(false);
 				console.log(response);
 				if (response.data.toString().startsWith("Py Error")) {
-					toaster.danger(response.data);
+					alert("Błąd: " + response.data);
 					return;
 				}
-				toaster.warning(response.data.data);
-				document.getElementById("down").download =
-					response.data.filename.toString() + ".dxf";
+				document.getElementById("down").download = response.data.filename.toString() + ".dxf";
 				document.getElementById("down").click();
 			})
 			.catch(function (error) {
+				setIsLoading(false);
 				console.log(error);
 			});
 	};
 
 	return (
-		<div className="flex xl:flex-row flex-col">
-			<div className="flex flex-col">
-				<Pane width={480}>
-					{points.map((point, index) => (
-						<Pane className="flex flex-row items-center">
-							<TextInputField
-								id={`len-${index}`}
-								placeholder="0 m"
-								onChange={(e) => {
-									console.log(e.target.value);
-									let newPoints = points;
-									newPoints[index].len = e.target.value;
-									setPoints([...newPoints]);
-								}}
-								value={point.len}
-							></TextInputField>
-							<TextInputField
-								id={`h-${index}`}
-								placeholder="0 m n.p.m."
-								onChange={(e) => {
-									console.log(e.target.value);
-									let newPoints = points;
-									newPoints[index].height = e.target.value;
-									setPoints([...newPoints]);
-								}}
-								value={point.height}
-								onKeyDown={(e) => {
-									if (e.key == "Enter") {
-										setPoints([
-											...points,
-											{
-												id: points.length,
-												len: Number(points[points.length - 1].len) + 1,
-												height: 0,
-											},
-										]);
+		<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+			{/* Input Section */}
+			<div className="space-y-6">
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center space-x-2">
+							<PencilIcon className="w-5 h-5 text-blue-600" />
+							<span>Punkty profilu</span>
+						</CardTitle>
+						<CardDescription>
+							Wprowadź punkty profilu ręcznie - długość i wysokość nad poziomem morza
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						{/* Scale Input */}
+						<Input
+							label="Skala"
+							type="number"
+							placeholder="200"
+							value={args.scale}
+							onChange={(e) => setArgs({ ...args, scale: e.target.value })}
+						/>
 
-										let nextDiv = e.target.parentNode.parentNode.nextSibling;
-										nextDiv.childNodes[1].childNodes[1].focus()
-										nextDiv.childNodes[1].childNodes[1].setSelectionRange(0, 1)
-									}
-								}}
-							></TextInputField>
+						{/* Points List */}
+						<div className="space-y-3 max-h-96 overflow-y-auto">
+							{points.map((point, index) => (
+								<div key={point.id} className="grid grid-cols-2 gap-3 p-3 bg-gray-50 rounded-lg">
+									<Input
+										label={`Punkt ${index + 1} - Długość (m)`}
+										type="number"
+										placeholder="0"
+										value={point.len}
+										onChange={(e) => updatePoint(index, 'len', e.target.value)}
+									/>
+									<div className="flex space-x-2">
+										<Input
+											label="Wysokość (m n.p.m.)"
+											type="number"
+											placeholder="0"
+											value={point.height}
+											onChange={(e) => updatePoint(index, 'height', e.target.value)}
+											onKeyDown={(e) => {
+												if (e.key === "Enter") {
+													addPoint();
+													// Focus next input after render
+													setTimeout(() => {
+														const nextInput = e.target.parentNode.parentNode.parentNode.nextSibling?.querySelector('input');
+														if (nextInput) nextInput.focus();
+													}, 100);
+												}
+											}}
+										/>
+										{points.length > 1 && (
+											<button
+												onClick={() => removePoint(index)}
+												className="self-end p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+												title="Usuń punkt"
+											>
+												<TrashIcon className="w-5 h-5" />
+											</button>
+										)}
+									</div>
+								</div>
+							))}
+						</div>
+
+						{/* Action Buttons */}
+						<div className="flex space-x-3">
 							<Button
-								className="mb-5"
-								appearance="minimal"
-								onClick={() => {
-									let newPoints = points;
-									newPoints.splice(index, 1);
-									setPoints([...newPoints]);
-									reIndex();
-								}}
+								onClick={addPoint}
+								variant="outline"
+								className="flex-1"
 							>
-								<Icon icon={TrashIcon} color="danger"></Icon>
+								<PlusIcon className="w-5 h-5 mr-2" />
+								Dodaj punkt
 							</Button>
-						</Pane>
-					))}
-				</Pane>
-				<Button
-					onClick={() => {
-						setPoints([
-							...points,
-							{
-								id: points.length,
-								len: Number(points[points.length - 1].len) + 1,
-								height: 0,
-							},
-						]);
-					}}
-				>
-					Dodaj
-				</Button>
-				<Button
-					appearance="primary"
-					onClick={(e) => {
-						generation(e);
-					}}
-				>
-					Generuj
-				</Button>
+							
+							<Button
+								onClick={generation}
+								disabled={isLoading}
+								loading={isLoading}
+								className="flex-1"
+							>
+								<DownloadIcon className="w-5 h-5 mr-2" />
+								{isLoading ? 'Generowanie...' : 'Generuj profil'}
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
 			</div>
+
+			{/* Preview/Instructions Section */}
+			<div className="space-y-6">
+				<Card>
+					<CardHeader>
+						<CardTitle>Podgląd punktów</CardTitle>
+						<CardDescription>
+							Lista wprowadzonych punktów profilu
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						{points.length > 0 ? (
+							<div className="space-y-2">
+								{points.map((point, index) => (
+									<div key={point.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
+										<span className="font-medium text-gray-900">Punkt {index + 1}</span>
+										<div className="text-sm text-gray-600">
+											<span className="mr-4">Długość: {point.len}m</span>
+											<span>Wysokość: {point.height}m</span>
+										</div>
+									</div>
+								))}
+							</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">
+									<PencilIcon className="w-8 h-8 text-gray-400" />
+								</div>
+								<p className="text-gray-500">Brak punktów do wyświetlenia</p>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Instrukcje</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="space-y-3 text-sm">
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">1</span>
+								</div>
+								<p className="text-gray-600">Wprowadź kolejne punkty profilu z długością i wysokością</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">2</span>
+								</div>
+								<p className="text-gray-600">Użyj klawisza Enter aby szybko dodać następny punkt</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">3</span>
+								</div>
+								<p className="text-gray-600">Ustaw skalę i kliknij "Generuj profil"</p>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+
+			<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
 		</div>
 	);
 }

components/templates/manual_new.js

@@ -0,0 +1,241 @@
+import { useState } from "react";
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input } from "../ui/components";
+import { PencilIcon, PlusIcon, TrashIcon, ArrowDownTrayIcon as DownloadIcon } from '@heroicons/react/24/outline';
+import axios from "axios";
+
+export default function Manual() {
+	const [points, setPoints] = useState([{ id: 0, len: 0, height: 0 }]);
+	const [args, setArgs] = useState({ scale: 200 });
+	const [isLoading, setIsLoading] = useState(false);
+
+	const reIndex = () => {
+		let newId = 0;
+		let newPoints = [];
+		for (let point of points) {
+			point.id = newId;
+			newPoints.push(point);
+			newId += 1;
+		}
+		setPoints([...newPoints]);
+	};
+
+	const addPoint = () => {
+		setPoints([
+			...points,
+			{
+				id: points.length,
+				len: Number(points[points.length - 1].len) + 1,
+				height: 0,
+			},
+		]);
+	};
+
+	const removePoint = (index) => {
+		let newPoints = points;
+		newPoints.splice(index, 1);
+		setPoints([...newPoints]);
+		reIndex();
+	};
+
+	const updatePoint = (index, field, value) => {
+		let newPoints = points;
+		newPoints[index][field] = value;
+		setPoints([...newPoints]);
+	};
+
+	const generation = (e) => {
+		setIsLoading(true);
+		let pointString = "Próbkowanie: 1\nSegment 0: w dół\nX:	Y,	Z";
+
+		for (let point of points) {
+			pointString += "\n";
+			pointString += Number(point.len) * 1.0;
+			pointString += ",	1.0,	";
+			pointString += point.height;
+		}
+
+		py(e, pointString, args);
+	};
+
+	const py = (e, profil, args) => {
+		e.preventDefault();
+
+		axios
+			.post("/api/spawn", {
+				profil: profil,
+				arguments: args,
+			})
+			.then(function (response) {
+				setIsLoading(false);
+				console.log(response);
+				if (response.data.toString().startsWith("Py Error")) {
+					alert("Błąd: " + response.data);
+					return;
+				}
+				document.getElementById("down").download = response.data.filename.toString() + ".dxf";
+				document.getElementById("down").click();
+			})
+			.catch(function (error) {
+				setIsLoading(false);
+				console.log(error);
+			});
+	};
+
+	return (
+		<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+			{/* Input Section */}
+			<div className="space-y-6">
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center space-x-2">
+							<PencilIcon className="w-5 h-5 text-blue-600" />
+							<span>Punkty profilu</span>
+						</CardTitle>
+						<CardDescription>
+							Wprowadź punkty profilu ręcznie - długość i wysokość nad poziomem morza
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						{/* Scale Input */}
+						<Input
+							label="Skala"
+							type="number"
+							placeholder="200"
+							value={args.scale}
+							onChange={(e) => setArgs({ ...args, scale: e.target.value })}
+						/>
+
+						{/* Points List */}
+						<div className="space-y-3 max-h-96 overflow-y-auto">
+							{points.map((point, index) => (
+								<div key={point.id} className="grid grid-cols-2 gap-3 p-3 bg-gray-50 rounded-lg">
+									<Input
+										label={`Punkt ${index + 1} - Długość (m)`}
+										type="number"
+										placeholder="0"
+										value={point.len}
+										onChange={(e) => updatePoint(index, 'len', e.target.value)}
+									/>
+									<div className="flex space-x-2">
+										<Input
+											label="Wysokość (m n.p.m.)"
+											type="number"
+											placeholder="0"
+											value={point.height}
+											onChange={(e) => updatePoint(index, 'height', e.target.value)}
+											onKeyDown={(e) => {
+												if (e.key === "Enter") {
+													addPoint();
+													// Focus next input after render
+													setTimeout(() => {
+														const nextInput = e.target.parentNode.parentNode.parentNode.nextSibling?.querySelector('input');
+														if (nextInput) nextInput.focus();
+													}, 100);
+												}
+											}}
+										/>
+										{points.length > 1 && (
+											<button
+												onClick={() => removePoint(index)}
+												className="self-end p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+												title="Usuń punkt"
+											>
+												<TrashIcon className="w-5 h-5" />
+											</button>
+										)}
+									</div>
+								</div>
+							))}
+						</div>
+
+						{/* Action Buttons */}
+						<div className="flex space-x-3">
+							<Button
+								onClick={addPoint}
+								variant="outline"
+								className="flex-1"
+							>
+								<PlusIcon className="w-5 h-5 mr-2" />
+								Dodaj punkt
+							</Button>
+							
+							<Button
+								onClick={generation}
+								disabled={isLoading}
+								loading={isLoading}
+								className="flex-1"
+							>
+								<DownloadIcon className="w-5 h-5 mr-2" />
+								{isLoading ? 'Generowanie...' : 'Generuj profil'}
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+
+			{/* Preview/Instructions Section */}
+			<div className="space-y-6">
+				<Card>
+					<CardHeader>
+						<CardTitle>Podgląd punktów</CardTitle>
+						<CardDescription>
+							Lista wprowadzonych punktów profilu
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						{points.length > 0 ? (
+							<div className="space-y-2">
+								{points.map((point, index) => (
+									<div key={point.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
+										<span className="font-medium text-gray-900">Punkt {index + 1}</span>
+										<div className="text-sm text-gray-600">
+											<span className="mr-4">Długość: {point.len}m</span>
+											<span>Wysokość: {point.height}m</span>
+										</div>
+									</div>
+								))}
+							</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">
+									<PencilIcon className="w-8 h-8 text-gray-400" />
+								</div>
+								<p className="text-gray-500">Brak punktów do wyświetlenia</p>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Instrukcje</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="space-y-3 text-sm">
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">1</span>
+								</div>
+								<p className="text-gray-600">Wprowadź kolejne punkty profilu z długością i wysokością</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">2</span>
+								</div>
+								<p className="text-gray-600">Użyj klawisza Enter aby szybko dodać następny punkt</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">3</span>
+								</div>
+								<p className="text-gray-600">Ustaw skalę i kliknij "Generuj profil"</p>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+
+			<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
+		</div>
+	);
+}

components/ui/Layout.js

@@ -0,0 +1,154 @@
+import { useState } from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useSession, signOut } from 'next-auth/react';
+import { 
+  HomeIcon, 
+  Squares2X2Icon as GridIcon, 
+  BoltIcon as LightningBoltIcon, 
+  Bars3Icon as MenuIcon, 
+  XMarkIcon as XIcon,
+  UserIcon,
+  ArrowRightOnRectangleIcon as LogoutIcon
+} from '@heroicons/react/24/outline';
+
+const navigationItems = [
+  { name: 'Przekrój terenu', href: '/', icon: HomeIcon },
+  { name: 'Siatka', href: '/cross', icon: GridIcon },
+  { name: 'Uziomy', href: '/uziomy', icon: LightningBoltIcon },
+];
+
+export default function Layout({ children, title = 'Wastpol' }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { data: session } = useSession();
+  const router = useRouter();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      <Head>
+        <title>{title}</title>
+        <meta name="description" content="Professional electrical engineering tools" />
+        <link rel="icon" href="/icon.png" />
+      </Head>
+
+      {/* Mobile sidebar */}
+      <div className={`fixed inset-0 z-50 lg:hidden ${sidebarOpen ? 'block' : 'hidden'}`}>
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setSidebarOpen(false)} />
+        <div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-white shadow-xl">
+          <div className="flex h-16 items-center justify-between px-4 border-b border-gray-200">
+            <img className="h-8 w-auto" src="/logo.png" alt="Wastpol" />
+            <button
+              onClick={() => setSidebarOpen(false)}
+              className="text-gray-500 hover:text-gray-700"
+            >
+              <XIcon className="h-6 w-6" />
+            </button>
+          </div>
+          <nav className="flex-1 px-2 py-4 space-y-1">
+            {navigationItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = router.pathname === item.href;
+              return (
+                <Link key={item.name} href={item.href}>
+                  <a
+                    className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors ${
+                      isActive
+                        ? 'bg-blue-100 text-blue-900 border-r-2 border-blue-500'
+                        : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
+                    }`}
+                    onClick={() => setSidebarOpen(false)}
+                  >
+                    <Icon className="mr-3 h-5 w-5 flex-shrink-0" />
+                    {item.name}
+                  </a>
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+      </div>
+
+      {/* Desktop layout */}
+      <div className="flex">
+        {/* Desktop sidebar */}
+        <div className="hidden lg:flex lg:flex-shrink-0">
+          <div className="flex w-64 flex-col">
+            <div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200 shadow-sm">
+              <div className="flex h-16 items-center justify-center px-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700">
+                <img className="h-8 w-auto filter brightness-0 invert" src="/logo.png" alt="Wastpol" />
+                <span className="ml-2 text-lg font-semibold text-white">Wastpol</span>
+              </div>
+              <div className="flex flex-1 flex-col overflow-y-auto">
+                <nav className="flex-1 px-2 py-4 space-y-1">
+                  {navigationItems.map((item) => {
+                    const Icon = item.icon;
+                    const isActive = router.pathname === item.href;
+                    return (
+                      <Link key={item.name} href={item.href}>
+                        <a
+                          className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
+                            isActive
+                              ? 'bg-blue-100 text-blue-900 border-r-2 border-blue-500 shadow-sm'
+                              : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:shadow-sm'
+                          }`}
+                        >
+                          <Icon className={`mr-3 h-5 w-5 flex-shrink-0 transition-colors ${
+                            isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-500'
+                          }`} />
+                          {item.name}
+                        </a>
+                      </Link>
+                    );
+                  })}
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main content */}
+        <div className="flex flex-1 flex-col">
+          {/* Top navbar */}
+          <div className="relative z-10 flex h-16 flex-shrink-0 bg-white shadow-sm border-b border-gray-200">
+            <button
+              onClick={() => setSidebarOpen(true)}
+              className="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 lg:hidden"
+            >
+              <MenuIcon className="h-6 w-6" />
+            </button>
+            
+            <div className="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
+              <div className="flex flex-1">
+                {/* You can add search or breadcrumbs here */}
+              </div>
+              
+              {session && (
+                <div className="ml-4 flex items-center md:ml-6">
+                  <div className="flex items-center space-x-4">
+                    <div className="flex items-center space-x-2 text-sm text-gray-700">
+                      <UserIcon className="h-5 w-5 text-gray-400" />
+                      <span className="hidden sm:block">{session.user.email}</span>
+                    </div>
+                    <button
+                      onClick={() => signOut()}
+                      className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                    >
+                      <LogoutIcon className="h-4 w-4 mr-2" />
+                      Wyloguj
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Page content */}
+          <main className="flex-1 overflow-y-auto">
+            {children}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/components.js

@@ -0,0 +1,179 @@
+import React from 'react';
+
+export const Card = ({ children, className = '', ...props }) => (
+  <div
+    className={`bg-white overflow-hidden shadow-sm border border-gray-200 rounded-xl transition-all duration-200 hover:shadow-md ${className}`}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export const CardHeader = ({ children, className = '', ...props }) => (
+  <div className={`px-6 py-4 border-b border-gray-200 ${className}`} {...props}>
+    {children}
+  </div>
+);
+
+export const CardContent = ({ children, className = '', ...props }) => (
+  <div className={`px-6 py-4 ${className}`} {...props}>
+    {children}
+  </div>
+);
+
+export const CardTitle = ({ children, className = '', ...props }) => (
+  <h3 className={`text-lg font-semibold text-gray-900 ${className}`} {...props}>
+    {children}
+  </h3>
+);
+
+export const CardDescription = ({ children, className = '', ...props }) => (
+  <p className={`text-sm text-gray-600 mt-1 ${className}`} {...props}>
+    {children}
+  </p>
+);
+
+export const Button = ({ 
+  children, 
+  variant = 'primary', 
+  size = 'md', 
+  className = '', 
+  disabled = false,
+  loading = false,
+  ...props 
+}) => {
+  const baseStyles = 'inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+  
+  const variants = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm hover:shadow-md',
+    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300',
+    outline: 'border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500',
+    ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-gray-500',
+    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
+  };
+
+  const sizes = {
+    sm: 'px-3 py-2 text-sm',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-6 py-3 text-base',
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading && (
+        <svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+        </svg>
+      )}
+      {children}
+    </button>
+  );
+};
+
+export const Input = ({ label, error, className = '', ...props }) => (
+  <div className="space-y-1">
+    {label && (
+      <label className="block text-sm font-medium text-gray-700">
+        {label}
+      </label>
+    )}
+    <input
+      className={`block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors ${
+        error ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''
+      } ${className}`}
+      {...props}
+    />
+    {error && (
+      <p className="text-sm text-red-600">{error}</p>
+    )}
+  </div>
+);
+
+export const Textarea = ({ label, error, className = '', ...props }) => (
+  <div className="space-y-1">
+    {label && (
+      <label className="block text-sm font-medium text-gray-700">
+        {label}
+      </label>
+    )}
+    <textarea
+      className={`block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors ${
+        error ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''
+      } ${className}`}
+      {...props}
+    />
+    {error && (
+      <p className="text-sm text-red-600">{error}</p>
+    )}
+  </div>
+);
+
+export const Badge = ({ children, variant = 'default', className = '' }) => {
+  const variants = {
+    default: 'bg-gray-100 text-gray-800',
+    success: 'bg-green-100 text-green-800',
+    warning: 'bg-yellow-100 text-yellow-800',
+    error: 'bg-red-100 text-red-800',
+    info: 'bg-blue-100 text-blue-800',
+  };
+
+  return (
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[variant]} ${className}`}>
+      {children}
+    </span>
+  );
+};
+
+export const Alert = ({ children, variant = 'info', className = '' }) => {
+  const variants = {
+    info: 'bg-blue-50 border-blue-200 text-blue-800',
+    success: 'bg-green-50 border-green-200 text-green-800',
+    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    error: 'bg-red-50 border-red-200 text-red-800',
+  };
+
+  return (
+    <div className={`border-l-4 p-4 rounded-lg ${variants[variant]} ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+export const Tabs = ({ children, value, onValueChange }) => (
+  <div className="w-full">
+    <div className="border-b border-gray-200">
+      <nav className="-mb-px flex space-x-8">
+        {React.Children.map(children, (child, index) => 
+          React.cloneElement(child, { 
+            isActive: value === index,
+            onClick: () => onValueChange(index)
+          })
+        )}
+      </nav>
+    </div>
+  </div>
+);
+
+export const TabsTrigger = ({ children, isActive, onClick }) => (
+  <button
+    onClick={onClick}
+    className={`whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
+      isActive
+        ? 'border-blue-500 text-blue-600'
+        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+    }`}
+  >
+    {children}
+  </button>
+);
+
+export const TabsContent = ({ children, isActive }) => (
+  <div className={`pt-6 ${isActive ? 'block' : 'hidden'}`}>
+    {children}
+  </div>
+);