gotova klijentska

employee-app/src/components/NewEmployeeForm.jsx

@@ -11,7 +11,7 @@ const NewEmployeeForm = () => {
     try {
       data = { ...data, userType: 'Employee' }
       const response = await api.instance.post('/employees', data);
-      console.log('Employee created:', response.data);
+      // console.log('Employee created:', response.data);
       setSubmitSuccess(true);
       setSubmitError(null);
       reset();

employee-app/src/components/tables/ClientTableGeneric.jsx

@@ -63,10 +63,15 @@ export default function ClientTableGeneric() {
   };
 
   const onInfoClient = (item) => {
-    console.log(item);
+    // console.log(item);
     navigate(`/clients/${item.id}`);
   };
 
+  const handleFilter = (ev) => {
+    const filteredClients = clients.filter(client => client.username.toLowerCase().includes(ev.target.value.toLowerCase()));
+    setClients(filteredClients);
+  }
+
   return (
     clients &&
     <div className="flex flex-col gap-4 card items-start justify-start">
@@ -77,6 +82,8 @@ export default function ClientTableGeneric() {
         onInfo={onInfoClient}
         onToggleActivity={onToggleClientActivity}
         onSort={onSortClient}
+        onFilter={handleFilter}
+        filterTarget={'username'}
         currentPage={clientPage}
         totalPages={clientPageTotal}
         onNextPage={() => setClientPage(prev => Math.min(prev + 1, clientPageTotal - 1))}

employee-app/src/components/tables/GenericTable.jsx

@@ -6,6 +6,8 @@ const GenericTable = ({
   onSort,
   onDelete,
   onInfo,
+  onFilter,
+  filterTarget,
   currentPage,
   totalPages,
   onNextPage,
@@ -25,6 +27,16 @@ const GenericTable = ({
 
   return (
     <div className="max-w-screen-2xl mx-auto w-full px-4 sm:px-6 lg:px-8">
+      {onFilter && (
+        <div className="mb-4">
+          <input
+            type="text"
+            className='minimal-input hover-highlight w-full'
+            placeholder={`${filterTarget ? `Filter by ${filterTarget}` : 'Filter'}`}
+            onInput={onFilter}
+          />
+        </div>
+      )}
       <table className="min-w-full divide-y divide-gray-200">
         <thead className="table-header">
           <tr>

employee-app/src/components/tables/ManufacturerTableGeneric.jsx

@@ -39,6 +39,12 @@ const ManufacturerTableGeneric = () => {
     }
   };
 
+  const handleFilter = (event) => {
+    const filterValue = event.target.value;
+    const filteredManufacturers = manufacturers.filter(manufacturer => manufacturer.name.toLowerCase().includes(filterValue.toLowerCase()));
+    setManufacturers(filteredManufacturers);
+  };
+
   const columns = [
     { key: 'name', label: 'Name' },
     { key: 'country', label: 'Country' },
@@ -54,6 +60,8 @@ const ManufacturerTableGeneric = () => {
       columns={columns}
       onSort={handleSort}
       onDelete={handleDelete}
+      onFilter={handleFilter}
+      filterTarget={'name'}
       currentPage={currentPage}
       totalPages={totalPages}
       onNextPage={() => setCurrentPage(prev => prev + 1)}

employee-app/src/components/tables/TransportationDeviceTableGeneric.jsx

@@ -94,12 +94,12 @@ export default function TransportationDeviceGenericTable() {
 
   const handleFilter = (event) => {
     const filterValue = event.target.value;
-    const filteredVehicles = transportationDevices.filter(vehicle => vehicle.name.toLowerCase().includes(filterValue.toLowerCase()));
+    const filteredVehicles = transportationDevices.filter(vehicle => vehicle.model.toLowerCase().includes(filterValue.toLowerCase()));
     setTransportationDevices(filteredVehicles);
   };
 
   const handleInfo = (device) => {
-    console.log(device)
+    // console.log(device)
     if (!device || !device.deviceID) {
       console.error('Invalid device or deviceID');
       return;
@@ -120,6 +120,7 @@ export default function TransportationDeviceGenericTable() {
       totalPages={totalPages}
       onInfo={handleInfo}
       onFilter={handleFilter}
+      filterTarget={'model'}
       onEntryClick={() => { navigate(`/transportation-devices/${transportationDevices[0].id}`) }}
       onNextPage={() => setCurrentPage(prev => prev + 1)}
       onPrevPage={() => setCurrentPage(prev => prev - 1)}

employee-app/src/pages/dashboard/administrator/TransportationDevicesPanel.jsx

@@ -58,19 +58,19 @@ export default function TransportationDevicesPanel() {
 
   const handleDeviceTypeChange = (event) => {
     setDeviceType(event.target.value);
-    console.log(event.target.value);
+    // console.log(event.target.value);
   };
 
   const handleManufacturerChange = (event) => {
     // nema logike da mi idalje prikazuje samo ime u displeju l o l
     // mrzim js
-    console.log(event.target.value)
+    // console.log(event.target.value)
     formData.manufacturerID = event.target.value.split('#')[0]
   }
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    console.log(formData);
+    // console.log(formData);
 
     const requiredFields = ['uuid', 'acquisitionDate', 'purchasePrice', 'manufacturerID', 'model', 'description'];
     if (deviceType === 'electricScooter') requiredFields.push('maxSpeed');
@@ -93,7 +93,7 @@ export default function TransportationDevicesPanel() {
       response = await api.instance.post('/electric-bicycles', formData);
     }
 
-    console.log(response);
+    // console.log(response);
 
     if (response.status === 200) {
       setFormData({

employee-app/src/pages/dashboard/manager/RentalPanel.jsx

@@ -47,7 +47,7 @@ export default function RentalPanel() {
         rentalPrice: rentalPricesResponse.data.find(rp => rp.id === r.rentalPriceID)?.pricePerMinute || 'N/A'
       })));
 
-      console.log(transportationDevicesResponse);
+      // console.log(transportationDevicesResponse);
 
       setRentalsPage(rentalsResponse.data.pageable.pageNumber);
       setRentalsTotalPages(rentalsResponse.data.totalPages);

employee-app/src/pages/dashboard/manager/RentalPricingPanel.jsx

@@ -54,7 +54,7 @@ export default function RentalPricingPanel() {
           isActive: d.active === true ? 'Active' : 'Inactive'
         })));
 
-      console.log(devicePricingsResponse.data.content)
+      // console.log(devicePricingsResponse.data.content)
     } catch (error) {
       console.log(error);
     }

employee-app/src/pages/dashboard/operator/BreakdownEntryPanel.jsx

@@ -37,10 +37,10 @@ export default function BreakdownEntryPanel() {
 
   const onSubmit = async (data) => {
     try {
-      console.log(data);
+      // console.log(data);
 
       const response = await api.instance.post('/breakdowns', data);
-      console.log('Breakdown created:', response.data);
+      // console.log('Breakdown created:', response.data);
 
       if (response.status == 200) {
         setSubmitSuccess(true);

employee-app/src/pages/dashboard/operator/TransportationDeviceMap.jsx

@@ -1,5 +1,129 @@
+import { useState, useEffect } from "react";
+import api from "../../../utils/api";
+
 export default function TransportationDeviceMap() {
+  const [gridData, setGridData] = useState(Array(20).fill().map(() => Array(20).fill(0)));
+  const [maxDevices, setMaxDevices] = useState(0);
+  const [initialized, setInitialized] = useState(false);
+  const [rentals, setRentals] = useState(null);
+  const [message, setMessage] = useState("Loading...");
+
+  const [isCellFocused, setIsCellFocused] = useState(false);
+  const [cellX, setCellX] = useState(null);
+  const [cellY, setCellY] = useState(null);
+  const [targetDevices, setTargetDevices] = useState(null);
+
+  const handleCellClick = (x, y) => {
+    setIsCellFocused(true);
+    setCellX(x);
+    setCellY(y);
+
+    const devices = rentals.filter(rental => {
+      return (
+        rental.dropoffX === x &&
+        rental.dropoffY === y
+      );
+    })
+    console.log(devices)
+    setTargetDevices(devices);
+  };
+
+  useEffect(() => {
+    fetchRentalData();
+  }, []);
+
+  const fetchRentalData = async () => {
+    try {
+      const [
+        rentalsResponse,
+        transportationDevicesResponse,
+        rentalPricesResponse,
+        clientsResponse] = await Promise.all([
+          api.instance.get('/rentals'),
+          api.instance.get('/transportation-devices/available/all'),
+          api.instance.get('/rental-prices'),
+          api.instance.get('/clients')
+        ]);
+
+      console.log(rentalsResponse.data)
+      console.log(transportationDevicesResponse.data)
+      console.log(rentalPricesResponse.data)
+      console.log(clientsResponse.data)
+
+      const filteredRentals = rentalsResponse.data.filter(rental => {
+        return (
+          rental.clientID === clientsResponse.data.find(c => c.id === rental.clientID)?.id &&
+          rental.deviceID === transportationDevicesResponse.data.find(d => d.device.deviceID === rental.deviceID)?.id &&
+          rental.rentalPriceID === rentalPricesResponse.data.find(rp => rp.id === rental.rentalPriceID)?.id
+        );
+      });
+
+      console.log(filteredRentals)
+      setRentals(filteredRentals)
+
+      if (filteredRentals.length === 0) {
+        setMessage("No available devices found.");
+        return;
+      }
+
+      // Process the rental data
+      const newGridData = Array(20).fill().map(() => Array(20).fill(0));
+
+      filteredRentals.data.forEach(rental => {
+        const x = Math.floor(rental.dropoffX);
+        const y = Math.floor(rental.dropoffY);
+        if (x >= 0 && x < 20 && y >= 0 && y < 20) {
+          newGridData[y][x]++;
+        }
+      });
+
+      const max = Math.max(...newGridData.flatMap(row => row));
+
+      setGridData(newGridData);
+      setMaxDevices(max);
+      setInitialized(true)
+    } catch (error) {
+      console.error('Error fetching rental data:', error);
+    }
+  };
+
+  if (!initialized) return <p>{message}</p>
+
   return (
-    <>Stranica za pregled prevoznih sredstava na mapi (mapu implementirati kao matricu ili pomoću neke biblioteke kao realnu mapu).</>
-  )
+    initialized &&
+    <div className="w-full flex flex-col gap-4 items-start justify-start" >
+      <h2 className="text-xl font-bold mb-4">Device Locations</h2>
+
+      <div className="grid grid-flow-row grid-rows-20 gap-0.5 w-full card">
+        {gridData.map((row, y) => (
+          <div key={y} className="grid grid-flow-col grid-cols-20 gap-0.5 w-full">
+            {row.map((count, x) => (
+              <div
+                key={x}
+                className="w-12 h-12 hover-highlight flex items-center justify-center p-4 border-2 hover:scale-125 rounded-lg hover:cursor-pointer"
+                onClick={() => handleCellClick(x, y)}
+              >
+                <span className="text-xl font-bold text-white">{count > 0 ? count : ''}</span>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {isCellFocused && (
+        targetDevices.map(td => {
+          return (
+            <div key={td.rentalID}>
+              <p className="text-2xl font-bold px-2 text-left">Device information</p>
+              <p className="px-2 text-left">Location: ({cellX}, {cellY})</p>
+              <p className="px-2 text-left">Client: {td.clientName}</p>
+              <p className="px-2 text-left">Vehicle: {td.deviceName}</p>
+              <p className="px-2 text-left">PPM rate: {td.rentalPrice}</p>
+            </div>
+          )
+        })
+      )}
+    </div>
+
+  );
 }

employee-app/src/pages/info_displays/ClientInfo.jsx

@@ -24,7 +24,7 @@ export default function ClientInfoDisplay() {
       }))
     } catch (error) {
       setError(error);
-      console.log(error)
+      // console.log(error)
     }
   }
 

promotionapp/.gitignore

@@ -0,0 +1,38 @@
+target/
+!.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+### IntelliJ IDEA ###
+.idea/modules.xml
+.idea/jarRepositories.xml
+.idea/compiler.xml
+.idea/libraries/
+*.iws
+*.iml
+*.ipr
+
+### Eclipse ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### VS Code ###
+.vscode/
+
+### Mac OS ###
+.DS_Store