Fixed Input unfocus, add information about save status

.env.development

@@ -1,2 +1,2 @@
 VITE_APP_NAME=Frez Manager [Developer Build]
-VITE_API_URL=http://localhost:7082
+VITE_API_URL=http://localhost

src/configure.tsx

@@ -85,12 +85,12 @@ export interface CustomRouteObject extends Omit<RouteObject, "children"> {
 //Main configuration, static data, mostly used here
 export const main = {
 	program_name: viteEnv.VITE_APP_NAME,
-	program_version: "2.0.0",
+	program_version: "2.1.0",
 };
 //About page configuration
 export const about = {
 	program_description: `${main.program_name} to nowoczesna platforma dedykowana specjalistom z branży obróbki skrawaniem. Nasza strona umożliwia profesjonalny dobór narzędzi do frezowania, gwarantując precyzję i efektywność w każdym projekcie. Dzięki intuicyjnemu interfejsowi i zaawansowanym algorytmom, ${main.program_name} staje się niezastąpionym narzędziem dla każdego, kto chce osiągnąć perfekcyjne rezultaty w obróbce materiałów.`,
-	program_authors: [{ name: "Bartosz Bielski", email: "bartbie194@student.polsl.pl" }],
+	program_authors: [{ name: "Igor Barcik", email: "chx94126@student.chorzow.wsb.pl" }],
 };
 //----
 export const flatRoutes = flatternRoutingTable(navigation);

src/features/Home/HomePage.tsx

@@ -61,6 +61,7 @@ const HomePage = () => {
 	const [searching, setSearching] = useState(false); // Status wyszukiwania
 	const [notFound, setNotFound] = useState(false); // Status znalezienia
 	const [edited, setEdited] = useState(false); // Status edycji
+	const [saving, setSaving] = useState(false); // Status zapisywania
 	// ----------------------------- FUNCTION --------------------------
 	const handleChangeOfField = (key: keyof typeof input) => (e: React.ChangeEvent<HTMLSelectElement>) => {
 		const value = Number(e.target.value);
@@ -182,7 +183,7 @@ const HomePage = () => {
 					<>
 						{result.map((tool, index) => {
 							return (
-								<div key={uuid4()}>
+								<div key={index}>
 									<h2 className="text-2xl mb-1">{tool.name}</h2>
 									<table className="table">
 										<thead>
@@ -192,9 +193,9 @@ const HomePage = () => {
 											</tr>
 										</thead>
 										<tbody>
-											{Object.entries(tool).map(([key, value]) => {
+											{Object.entries(tool).map(([key, value], indexNumber) => {
 												return (
-													<tr key={uuid4()}>
+													<tr key={indexNumber}>
 														<td className="border px-4 py-2">{key}</td>
 														<td className="border px-4 py-2">
 															<input
@@ -230,10 +231,16 @@ const HomePage = () => {
 											const newToolsDB: Database = { ...toolsDB, tools: [...toolsDB.tools, ...newTool] };
 											// Set new tools to localStorage
 											setToolsDB(newToolsDB);
+											setEdited(false);
+											setSaving(true);
+											setTimeout(() => {
+												setSaving(false);
+											}, 3000); // 100ms delay
+
 										}}
 										disabled={!edited}
 									>
-										Zapisz zmiany jako nowy przypadek
+										Zapisz zmiany jako nowy przypadek {saving && "(Zapisano ✅)"}
 									</button>
 									<div className="h-px bg-neutral-content mb-2"></div>
 								</div>