sg-frontend-starter 1.0.0 → 1.0.3

package/.env

@@ -1,7 +1,7 @@
-# Mivel ez egy Vite projekt, az environment variableokat VITE_ prefixszel kell kezdeni, 
-# hogy azok elérhetőek legyenek!
-VITE_API_BASE_URL=http://localhost:3000/api
-
-# API végpontok
-VITE_API_EGY_OLDAL=/gyartok
+# Mivel ez egy Vite projekt, az environment variableokat VITE_ prefixszel kell kezdeni, 
+# hogy azok elérhetőek legyenek!
+VITE_API_BASE_URL=http://localhost:3000/api
+
+# API végpontok
+VITE_API_EGY_OLDAL=/gyartok
 VITE_API_TOBB_OLDAL=/telefonok

package/.env.example

@@ -1,5 +1,5 @@
-VITE_API_BASE_URL=http://localhost:3000/api
-
-# API végpontok
-VITE_API_TELEFONOK=/telefonok
-VITE_API_GYARTOK=/gyartok
+VITE_API_BASE_URL=http://localhost:3000/api
+
+# API végpontok
+VITE_API_TELEFONOK=/telefonok
+VITE_API_GYARTOK=/gyartok

package/package.json

@@ -1,19 +1,13 @@
 {
   "name": "sg-frontend-starter",
-  "version": "1.0.0",
-  "description": "React Vite starter template",
+  "version": "1.0.3",
   "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mrsoosgabor/frontend-starter.git"
-  },
-  "author": "Gabor Soos",
-  "license": "MIT",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postinstall": "node postinstall.js"
   },
   "dependencies": {
     "bootstrap": "^5.3.8",

package/postinstall.js

@@ -0,0 +1,16 @@
+const fs = require('fs');
+const path = require('path');
+
+const source = path.join(__dirname, 'node_modules', 'sg-frontend-starter');
+const dest = path.join(__dirname, 'sg-frontend-starter');
+
+// Ha létezik a modul a node_modules-ban
+if (fs.existsSync(source)) {
+  // Ha már létezik a célhelyen, töröld ki
+  if (fs.existsSync(dest)) {
+    fs.rmSync(dest, { recursive: true, force: true });
+  }
+  // Mozgasd ki a node_modules-ból
+  fs.renameSync(source, dest);
+  console.log('sg-frontend-starter modul sikeresen áthelyezve');
+}

package/src/components/TelefonEditModal.jsx

@@ -1,124 +1,124 @@
-import { useState } from "react";
-
-export default function TelefonEditModal({ isOpen, telefon, gyartok, onClose, onSave }) {
-  const [editingTelefon, setEditingTelefon] = useState(null);
-
-  // Frissítjük az editingTelefon state-et, amikor a telefon prop megváltozik
-  if (telefon && (!editingTelefon || editingTelefon._id !== telefon._id)) {
-    setEditingTelefon({ ...telefon });
-  }
-
-  const handleUpdate = async () => {
-    if (!editingTelefon._id || !editingTelefon.nev || !editingTelefon.ar) {
-      alert("Kérjük, töltse ki az összes mezőt");
-      return;
-    }
-
-    const gyartIdValue = typeof editingTelefon.gyartId === 'object' 
-      ? editingTelefon.gyartId._id 
-      : editingTelefon.gyartId;
-
-    if (!gyartIdValue) {
-      alert("Kérjük, válasszon egy gyártót");
-      return;
-    }
-
-    const updateData = {
-      nev: editingTelefon.nev,
-      ar: editingTelefon.ar,
-      gyartId: gyartIdValue
-    };
-
-    await onSave(editingTelefon._id, updateData);
-    handleClose();
-  };
-
-  const handleClose = () => {
-    setEditingTelefon(null);
-    onClose();
-  };
-
-  if (!isOpen || !editingTelefon) {
-    return null;
-  }
-
-  return (
-    <div className="modal d-block" style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}>
-      <div className="modal-dialog modal-dialog-centered">
-        <div className="modal-content">
-          <div className="modal-header bg-primary text-white">
-            <h5 className="modal-title">Telefon módosítása</h5>
-            <button 
-              type="button" 
-              className="btn-close btn-close-white" 
-              onClick={handleClose}
-            ></button>
-          </div>
-          <div className="modal-body">
-            <div>
-              <div className="mb-3">
-                <label className="form-label">ID:</label>
-                <input 
-                  type="text" 
-                  className="form-control" 
-                  value={editingTelefon._id}
-                  disabled
-                />
-              </div>
-              <div className="mb-3">
-                <label className="form-label">Telefon Neve:</label>
-                <input 
-                  type="text" 
-                  className="form-control" 
-                  value={editingTelefon.nev}
-                  onChange={(e) => setEditingTelefon({...editingTelefon, nev: e.target.value})}
-                />
-              </div>
-              <div className="mb-3">
-                <label className="form-label">Ár (Ft):</label>
-                <input 
-                  type="text" 
-                  className="form-control" 
-                  value={editingTelefon.ar}
-                  onChange={(e) => setEditingTelefon({...editingTelefon, ar: e.target.value})}
-                />
-              </div>
-              <div className="mb-3">
-                <label className="form-label">Gyártó:</label>
-                <select 
-                  className="form-select"
-                  value={editingTelefon.gyartId._id || editingTelefon.gyartId}
-                  onChange={(e) => {
-                    const selectedGyarto = gyartok.find(g => g._id === e.target.value);
-                    setEditingTelefon({...editingTelefon, gyartId: selectedGyarto || e.target.value});
-                  }}
-                >
-                  <option value="">-- Válasszon gyártót --</option>
-                  {gyartok.map((gyarto) => (
-                    <option key={gyarto._id} value={gyarto._id}>{gyarto.nev}</option>
-                  ))}
-                </select>
-              </div>
-            </div>
-          </div>
-          <div className="modal-footer">
-            <button 
-              type="button" 
-              className="btn btn-secondary" 
-              onClick={handleClose}
-            >
-              Mégse
-            </button>
-            <button 
-              type="button" 
-              className="btn btn-primary" 
-              onClick={handleUpdate}
-            >
-              Mentés
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { useState } from "react";
+
+export default function TelefonEditModal({ isOpen, telefon, gyartok, onClose, onSave }) {
+  const [editingTelefon, setEditingTelefon] = useState(null);
+
+  // Frissítjük az editingTelefon state-et, amikor a telefon prop megváltozik
+  if (telefon && (!editingTelefon || editingTelefon._id !== telefon._id)) {
+    setEditingTelefon({ ...telefon });
+  }
+
+  const handleUpdate = async () => {
+    if (!editingTelefon._id || !editingTelefon.nev || !editingTelefon.ar) {
+      alert("Kérjük, töltse ki az összes mezőt");
+      return;
+    }
+
+    const gyartIdValue = typeof editingTelefon.gyartId === 'object' 
+      ? editingTelefon.gyartId._id 
+      : editingTelefon.gyartId;
+
+    if (!gyartIdValue) {
+      alert("Kérjük, válasszon egy gyártót");
+      return;
+    }
+
+    const updateData = {
+      nev: editingTelefon.nev,
+      ar: editingTelefon.ar,
+      gyartId: gyartIdValue
+    };
+
+    await onSave(editingTelefon._id, updateData);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setEditingTelefon(null);
+    onClose();
+  };
+
+  if (!isOpen || !editingTelefon) {
+    return null;
+  }
+
+  return (
+    <div className="modal d-block" style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}>
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header bg-primary text-white">
+            <h5 className="modal-title">Telefon módosítása</h5>
+            <button 
+              type="button" 
+              className="btn-close btn-close-white" 
+              onClick={handleClose}
+            ></button>
+          </div>
+          <div className="modal-body">
+            <div>
+              <div className="mb-3">
+                <label className="form-label">ID:</label>
+                <input 
+                  type="text" 
+                  className="form-control" 
+                  value={editingTelefon._id}
+                  disabled
+                />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Telefon Neve:</label>
+                <input 
+                  type="text" 
+                  className="form-control" 
+                  value={editingTelefon.nev}
+                  onChange={(e) => setEditingTelefon({...editingTelefon, nev: e.target.value})}
+                />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Ár (Ft):</label>
+                <input 
+                  type="text" 
+                  className="form-control" 
+                  value={editingTelefon.ar}
+                  onChange={(e) => setEditingTelefon({...editingTelefon, ar: e.target.value})}
+                />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Gyártó:</label>
+                <select 
+                  className="form-select"
+                  value={editingTelefon.gyartId._id || editingTelefon.gyartId}
+                  onChange={(e) => {
+                    const selectedGyarto = gyartok.find(g => g._id === e.target.value);
+                    setEditingTelefon({...editingTelefon, gyartId: selectedGyarto || e.target.value});
+                  }}
+                >
+                  <option value="">-- Válasszon gyártót --</option>
+                  {gyartok.map((gyarto) => (
+                    <option key={gyarto._id} value={gyarto._id}>{gyarto.nev}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="modal-footer">
+            <button 
+              type="button" 
+              className="btn btn-secondary" 
+              onClick={handleClose}
+            >
+              Mégse
+            </button>
+            <button 
+              type="button" 
+              className="btn btn-primary" 
+              onClick={handleUpdate}
+            >
+              Mentés
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/TelefonForm.jsx

@@ -1,64 +1,64 @@
-import { ErrorMessage, Field, Form, Formik } from "formik";
-
-export default function TelefonForm({ gyartok, onSubmit }) {
-  return (
-    <div className="d-flex justify-content-center pt-5">
-      <div style={{ width: "100%", maxWidth: "500px", padding: "30px" }}>
-        <h2 className="text-center mb-4 text-white" style={{ backgroundColor: "#667eea", padding: "20px", borderRadius: "10px 10px 0 0" }}>Telefon Felvétel</h2>
-        <Formik
-          initialValues={{ _id: "", nev: "", ar: "", gyartId: "" }}
-          validate={(values) => {
-            const errors = {};
-            if (!values._id) {
-              errors._id = "Kötelező kitölteni";
-            }
-            if (!values.nev) {
-              errors.nev = "Kötelező kitölteni";
-            }
-            return errors;
-          }}
-          onSubmit={async (values, { setSubmitting, resetForm }) => {
-            console.log("Form data", values);
-            await onSubmit(values);
-            setSubmitting(false);
-            resetForm();
-          }}
-        >
-          {({ isSubmitting }) => (
-            <Form className="p-4" style={{ backgroundColor: "#f8f9fa", borderRadius: "0 0 10px 10px", boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)" }}>
-              <div className="mb-3">
-                <label htmlFor="_id" className="form-label">ID: </label>
-                <Field type="text" name="_id" placeholder="Adjon meg egy egyedi ID-t" className="form-control" />
-                <ErrorMessage name="_id" component="div" className="text-danger mt-2" />
-              </div>
-              <div className="mb-3">
-                <label htmlFor="nev" className="form-label">Telefon Neve: </label>
-                <Field type="text" name="nev" placeholder="pl. iPhone 15 Pro" className="form-control" />
-                <ErrorMessage name="nev" component="div" className="text-danger mt-2" />
-              </div>
-              <div className="mb-3">
-                <label htmlFor="ar" className="form-label">Ár (Ft): </label>
-                <Field type="text" name="ar" placeholder="pl. 500000" className="form-control" />
-                <ErrorMessage name="ar" component="div" className="text-danger mt-2" />
-              </div>
-              <div className="mb-3">
-                <label htmlFor="gyartId" className="form-label">Gyártó: </label>
-                <Field name="gyartId" as="select" className="form-select">
-                  <option value="">-- Válasszon gyártót --</option>
-                  {gyartok.map((gyarto) => (
-                    <option key={gyarto._id} value={gyarto._id}>{gyarto.nev}</option>
-                  ))}
-                </Field>
-                <ErrorMessage name="gyartId" component="div" className="text-danger mt-2" />
-              </div>
-
-              <button type="submit" disabled={isSubmitting} className="btn btn-primary w-100 fw-bold">
-                {isSubmitting ? "Feldolgozás..." : "Hozzáadás"}
-              </button>
-            </Form>
-          )}
-        </Formik>
-      </div>
-    </div>
-  );
-}
+import { ErrorMessage, Field, Form, Formik } from "formik";
+
+export default function TelefonForm({ gyartok, onSubmit }) {
+  return (
+    <div className="d-flex justify-content-center pt-5">
+      <div style={{ width: "100%", maxWidth: "500px", padding: "30px" }}>
+        <h2 className="text-center mb-4 text-white" style={{ backgroundColor: "#667eea", padding: "20px", borderRadius: "10px 10px 0 0" }}>Telefon Felvétel</h2>
+        <Formik
+          initialValues={{ _id: "", nev: "", ar: "", gyartId: "" }}
+          validate={(values) => {
+            const errors = {};
+            if (!values._id) {
+              errors._id = "Kötelező kitölteni";
+            }
+            if (!values.nev) {
+              errors.nev = "Kötelező kitölteni";
+            }
+            return errors;
+          }}
+          onSubmit={async (values, { setSubmitting, resetForm }) => {
+            console.log("Form data", values);
+            await onSubmit(values);
+            setSubmitting(false);
+            resetForm();
+          }}
+        >
+          {({ isSubmitting }) => (
+            <Form className="p-4" style={{ backgroundColor: "#f8f9fa", borderRadius: "0 0 10px 10px", boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)" }}>
+              <div className="mb-3">
+                <label htmlFor="_id" className="form-label">ID: </label>
+                <Field type="text" name="_id" placeholder="Adjon meg egy egyedi ID-t" className="form-control" />
+                <ErrorMessage name="_id" component="div" className="text-danger mt-2" />
+              </div>
+              <div className="mb-3">
+                <label htmlFor="nev" className="form-label">Telefon Neve: </label>
+                <Field type="text" name="nev" placeholder="pl. iPhone 15 Pro" className="form-control" />
+                <ErrorMessage name="nev" component="div" className="text-danger mt-2" />
+              </div>
+              <div className="mb-3">
+                <label htmlFor="ar" className="form-label">Ár (Ft): </label>
+                <Field type="text" name="ar" placeholder="pl. 500000" className="form-control" />
+                <ErrorMessage name="ar" component="div" className="text-danger mt-2" />
+              </div>
+              <div className="mb-3">
+                <label htmlFor="gyartId" className="form-label">Gyártó: </label>
+                <Field name="gyartId" as="select" className="form-select">
+                  <option value="">-- Válasszon gyártót --</option>
+                  {gyartok.map((gyarto) => (
+                    <option key={gyarto._id} value={gyarto._id}>{gyarto.nev}</option>
+                  ))}
+                </Field>
+                <ErrorMessage name="gyartId" component="div" className="text-danger mt-2" />
+              </div>
+
+              <button type="submit" disabled={isSubmitting} className="btn btn-primary w-100 fw-bold">
+                {isSubmitting ? "Feldolgozás..." : "Hozzáadás"}
+              </button>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </div>
+  );
+}

package/src/components/TelefonGrid.jsx

@@ -1,80 +1,80 @@
-import { useState } from "react";
-import TelefonEditModal from "./TelefonEditModal";
-
-export default function TelefonGrid({ mobilok, gyartok, onDelete, onUpdate }) {
-  const [editingTelefon, setEditingTelefon] = useState(null);
-  const [showModal, setShowModal] = useState(false);
-
-  const openEditModal = (telefon) => {
-    setEditingTelefon({ ...telefon });
-    setShowModal(true);
-  }
-
-  const closeModal = () => {
-    setShowModal(false);
-    setEditingTelefon(null);
-  }
-
-  const handleUpdate = async (id, updateData) => {
-    await onUpdate(id, updateData);
-    closeModal();
-  }
-
-  return (
-    <>
-      <div className="container mt-5 mb-5">
-        <h2 className="mb-4">Telefonok Listája</h2>
-        <div className="row g-4">
-          {mobilok && mobilok.length > 0 ? (
-            mobilok.map((telefon) => {
-              return (
-                <div key={telefon._id} className="col-md-4 col-sm-6 col-12">
-                  <div className="card h-100 shadow-sm" style={{ borderTop: "4px solid #667eea" }}>
-                    <div className="card-body">
-                      <h5 className="card-title text-primary">{telefon.nev}</h5>
-                      <p className="card-text mb-2">
-                        <strong>ID:</strong> {telefon._id}
-                      </p>
-                      <p className="card-text mb-2">
-                        <strong>Ár:</strong> <span className="text-success fw-bold">{telefon.ar} Ft</span>
-                      </p>
-                      <p className="card-text mb-0">
-                        <strong>Gyártó:</strong> {telefon.gyartId ? telefon.gyartId.nev : "Ismeretlen"}
-                      </p>
-                      <div className="d-flex gap-2 mt-3">
-                        <button 
-                          className="btn btn-warning btn-sm flex-grow-1"
-                          onClick={() => openEditModal(telefon)}
-                        >
-                          Módosítás
-                        </button>
-                        <button 
-                          className="btn btn-danger btn-sm flex-grow-1"
-                          onClick={() => onDelete(telefon._id)}
-                        >
-                          Törlés
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            })
-          ) : (
-            <div className="col-12">
-              <div className="alert alert-info text-center">Nincsenek telefonok az adatbázisban</div>
-            </div>
-          )}
-        </div>
-      </div>
-      
-      <TelefonEditModal 
-        isOpen={showModal}
-        telefon={editingTelefon}
-        gyartok={gyartok}
-        onClose={closeModal}
-        onSave={handleUpdate}
-      />
-    </>
-  );
-}
+import { useState } from "react";
+import TelefonEditModal from "./TelefonEditModal";
+
+export default function TelefonGrid({ mobilok, gyartok, onDelete, onUpdate }) {
+  const [editingTelefon, setEditingTelefon] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+
+  const openEditModal = (telefon) => {
+    setEditingTelefon({ ...telefon });
+    setShowModal(true);
+  }
+
+  const closeModal = () => {
+    setShowModal(false);
+    setEditingTelefon(null);
+  }
+
+  const handleUpdate = async (id, updateData) => {
+    await onUpdate(id, updateData);
+    closeModal();
+  }
+
+  return (
+    <>
+      <div className="container mt-5 mb-5">
+        <h2 className="mb-4">Telefonok Listája</h2>
+        <div className="row g-4">
+          {mobilok && mobilok.length > 0 ? (
+            mobilok.map((telefon) => {
+              return (
+                <div key={telefon._id} className="col-md-4 col-sm-6 col-12">
+                  <div className="card h-100 shadow-sm" style={{ borderTop: "4px solid #667eea" }}>
+                    <div className="card-body">
+                      <h5 className="card-title text-primary">{telefon.nev}</h5>
+                      <p className="card-text mb-2">
+                        <strong>ID:</strong> {telefon._id}
+                      </p>
+                      <p className="card-text mb-2">
+                        <strong>Ár:</strong> <span className="text-success fw-bold">{telefon.ar} Ft</span>
+                      </p>
+                      <p className="card-text mb-0">
+                        <strong>Gyártó:</strong> {telefon.gyartId ? telefon.gyartId.nev : "Ismeretlen"}
+                      </p>
+                      <div className="d-flex gap-2 mt-3">
+                        <button 
+                          className="btn btn-warning btn-sm flex-grow-1"
+                          onClick={() => openEditModal(telefon)}
+                        >
+                          Módosítás
+                        </button>
+                        <button 
+                          className="btn btn-danger btn-sm flex-grow-1"
+                          onClick={() => onDelete(telefon._id)}
+                        >
+                          Törlés
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            <div className="col-12">
+              <div className="alert alert-info text-center">Nincsenek telefonok az adatbázisban</div>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      <TelefonEditModal 
+        isOpen={showModal}
+        telefon={editingTelefon}
+        gyartok={gyartok}
+        onClose={closeModal}
+        onSave={handleUpdate}
+      />
+    </>
+  );
+}

package/src/services/api.js

@@ -1,83 +1,83 @@
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
-const ENDPOINTS = {
-  TOBB_OLDAL: import.meta.env.VITE_API_TOBB_OLDAL,
-  EGY_OLDAL: import.meta.env.VITE_API_EGY_OLDAL,
-};
-
-/**
- * Általános API hívás kezelő függvény
- * @param {string} endpoint - Az API végpont (pl. '/telefonok', '/gyartok')
- * @param {object} options - Fetch opciók (method, body, stb.)
- * @returns {Promise} - A válasz JSON formátumban
- */
-export async function apiCall(endpoint, options = {}) {
-  const { method = 'GET', body, headers = {} } = options;
-
-  const config = {
-    method,
-    headers: {
-      'Content-Type': 'application/json',
-      ...headers,
-    },
-  };
-
-  if (body) {
-    config.body = JSON.stringify(body);
-  }
-
-  try {
-    const response = await fetch(`${API_BASE_URL}${endpoint}`, config);
-    
-    const data = await response.json();
-
-    if (!response.ok) {
-      throw new Error(data.message || `HTTP error! status: ${response.status}`);
-    }
-
-    return data;
-  } catch (error) {
-    console.error('API hívás hiba:', error);
-    throw error;
-  }
-}
-
-// Specifikus API hívások
-export const tobb_oldalAPI = {
-  getAll: () => apiCall(ENDPOINTS.TOBB_OLDAL),
-  
-  getById: (id) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`),
-  
-  create: (data) => apiCall(ENDPOINTS.TOBB_OLDAL, {
-    method: 'POST',
-    body: data,
-  }),
-  
-  update: (id, data) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`, {
-    method: 'PATCH',
-    body: data,
-  }),
-  
-  delete: (id) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`, {
-    method: 'DELETE',
-  }),
-};
-
-export const egy_oldalAPI = {
-  getAll: () => apiCall(ENDPOINTS.EGY_OLDAL),
-  
-  getById: (id) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`),
-  
-  create: (data) => apiCall(ENDPOINTS.EGY_OLDAL, {
-    method: 'POST',
-    body: data,
-  }),
-  
-  update: (id, data) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`, {
-    method: 'PATCH',
-    body: data,
-  }),
-  
-  delete: (id) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`, {
-    method: 'DELETE',
-  }),
-};
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+const ENDPOINTS = {
+  TOBB_OLDAL: import.meta.env.VITE_API_TOBB_OLDAL,
+  EGY_OLDAL: import.meta.env.VITE_API_EGY_OLDAL,
+};
+
+/**
+ * Általános API hívás kezelő függvény
+ * @param {string} endpoint - Az API végpont (pl. '/telefonok', '/gyartok')
+ * @param {object} options - Fetch opciók (method, body, stb.)
+ * @returns {Promise} - A válasz JSON formátumban
+ */
+export async function apiCall(endpoint, options = {}) {
+  const { method = 'GET', body, headers = {} } = options;
+
+  const config = {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  };
+
+  if (body) {
+    config.body = JSON.stringify(body);
+  }
+
+  try {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, config);
+    
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data.message || `HTTP error! status: ${response.status}`);
+    }
+
+    return data;
+  } catch (error) {
+    console.error('API hívás hiba:', error);
+    throw error;
+  }
+}
+
+// Specifikus API hívások
+export const tobb_oldalAPI = {
+  getAll: () => apiCall(ENDPOINTS.TOBB_OLDAL),
+  
+  getById: (id) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`),
+  
+  create: (data) => apiCall(ENDPOINTS.TOBB_OLDAL, {
+    method: 'POST',
+    body: data,
+  }),
+  
+  update: (id, data) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`, {
+    method: 'PATCH',
+    body: data,
+  }),
+  
+  delete: (id) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`, {
+    method: 'DELETE',
+  }),
+};
+
+export const egy_oldalAPI = {
+  getAll: () => apiCall(ENDPOINTS.EGY_OLDAL),
+  
+  getById: (id) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`),
+  
+  create: (data) => apiCall(ENDPOINTS.EGY_OLDAL, {
+    method: 'POST',
+    body: data,
+  }),
+  
+  update: (id, data) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`, {
+    method: 'PATCH',
+    body: data,
+  }),
+  
+  delete: (id) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`, {
+    method: 'DELETE',
+  }),
+};

package/.degitignore

@@ -1,14 +0,0 @@
-# Degit által figyelmen kívül hagyandó fájlok/mappák
-
-node_modules/
-.git/
-.env
-dist/
-build/
-.DS_Store
-.vscode/
-.idea/
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

package/README.md

@@ -1,111 +0,0 @@
-# Telefon Kezelő Alkalmazás - React + Vite
-
-Egy modern React alkalmazás telefonok és gyártók kezeléséhez Vite build toolal.
-
-## Gyors Telepítés
-
-### Degit segítségével (ajánlott)
-
-```bash
-npx degit [GitHub-username]/react-starter my-app
-cd my-app
-npm install
-npm run dev
-```
-
-Helyettesítsd a `[GitHub-username]` helyére a GitHub felhasználónevedet!
-
-### Klasszikus klónozás
-
-```bash
-git clone https://github.com/[GitHub-username]/react-starter.git
-cd react-starter
-npm install
-npm run dev
-```
-
-## Telepítési lépések
-
-1. **Projekt klónozása/letöltése:**
-   ```bash
-   npx degit [GitHub-username]/react-starter my-app
-   cd my-app
-   ```
-
-2. **Függőségek telepítése:**
-   ```bash
-   npm install
-   ```
-
-3. **Environment konfigurálása:**
-   ```bash
-   cp .env.example .env
-   ```
-   Szerkeszd a `.env` fájlt a szükséges API végpontokkal.
-
-4. **Fejlesztési szerver indítása:**
-   ```bash
-   npm run dev
-   ```
-
-5. **Gyártáshoz való build:**
-   ```bash
-   npm run build
-   ```
-
-## Elérhető Parancsok
-
-- `npm run dev` - Fejlesztési szerver indítása
-- `npm run build` - Gyártási build készítése
-- `npm run preview` - Build előnézetének megtekintése
-- `npm run lint` - ESLint futtatása
-
-## Projekt Struktúra
-
-```
-src/
-├── components/
-│   ├── TelefonForm.jsx          # Telefon felvételi form
-│   ├── TelefonGrid.jsx          # Telefonok grid nézete
-│   └── TelefonEditModal.jsx     # Telefon módosítási modal
-├── services/
-│   └── api.js                   # API hívások kezelése
-├── App.jsx                      # Főkomponens
-├── main.jsx                     # Belépési pont
-└── index.css                    # Globális stílusok
-```
-
-## Konfiguráció
-
-### .env fájl
-
-```
-VITE_API_BASE_URL=http://localhost:3000/api
-VITE_API_TELEFONOK=/telefonok
-VITE_API_GYARTOK=/gyartok
-```
-
-## Szükséges Backend Végpontok
-
-Az alkalmazás az alábbi API végpontokat igényli:
-
-**Telefonok:**
-- `GET /api/telefonok` - Összes telefon listázása
-- `POST /api/telefonok` - Új telefon felvétele
-- `PATCH /api/telefonok/:id` - Telefon módosítása
-- `DELETE /api/telefonok/:id` - Telefon törlése
-
-**Gyártók:**
-- `GET /api/gyartok` - Összes gyártó listázása
-
-## Technológiák
-
-- **React 18** - UI framework
-- **Vite** - Build tool
-- **Formik** - Form kezelés
-- **Bootstrap** - CSS framework
-- **ESLint** - Kódminőség ellenőrzés
-
-## Licensz
-
-MIT