From a728172a044121a56ef088cfea3910bb5f515f6f Mon Sep 17 00:00:00 2001
From: gorbenco03 <chiril.gorbenco.em@gmail.com>
Date: Fri, 5 Apr 2024 03:40:42 +0300
Subject: [PATCH] implement dashboard

---
 pages/contact.tsx            | 373 +++++++++--------
 pages/dashboard.tsx          | 789 +++++++++++++++++------------------
 sections/details/details.tsx |  43 +-
 3 files changed, 610 insertions(+), 595 deletions(-)

diff --git a/pages/contact.tsx b/pages/contact.tsx
index 6a69336..8562bef 100644
--- a/pages/contact.tsx
+++ b/pages/contact.tsx
@@ -1,177 +1,198 @@
-// import ConstrainedHeaderComponent from "../components/constrainedHeaderComponent"
+import ConstrainedHeaderComponent from '../components/constrainedHeaderComponent';
 
-// export default function Example() {
-//     return (
-//         <div><ConstrainedHeaderComponent></ConstrainedHeaderComponent>
-//       <div className="relative bg-white">
-
-//         <div className="lg:absolute lg:inset-0 lg:left-1/2">
-
-//         </div>
-//         <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:pt-32">
-//           <div className="px-6 lg:px-8">
-//             <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
-//               <h2 className="text-3xl font-bold tracking-tight text-gray-900">Let's work together</h2>
-//               <p className="mt-2 text-lg leading-8 text-gray-600">
-//                 Proin volutpat consequat porttitor cras nullam gravida at orci molestie a eu arcu sed ut tincidunt magna.
-//               </p>
-//               <form action="#" method="POST" className="mt-16">
-//                 <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
-//                   <div>
-//                     <label htmlFor="first-name" className="block text-sm font-semibold leading-6 text-gray-900">
-//                       First name
-//                     </label>
-//                     <div className="mt-2.5">
-//                       <input
-//                         type="text"
-//                         name="first-name"
-//                         id="first-name"
-//                         autoComplete="given-name"
-//                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                       />
-//                     </div>
-//                   </div>
-//                   <div>
-//                     <label htmlFor="last-name" className="block text-sm font-semibold leading-6 text-gray-900">
-//                       Last name
-//                     </label>
-//                     <div className="mt-2.5">
-//                       <input
-//                         type="text"
-//                         name="last-name"
-//                         id="last-name"
-//                         autoComplete="family-name"
-//                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                       />
-//                     </div>
-//                   </div>
-//                   <div className="sm:col-span-2">
-//                     <label htmlFor="email" className="block text-sm font-semibold leading-6 text-gray-900">
-//                       Email
-//                     </label>
-//                     <div className="mt-2.5">
-//                       <input
-//                         id="email"
-//                         name="email"
-//                         type="email"
-//                         autoComplete="email"
-//                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                       />
-//                     </div>
-//                   </div>
-//                   <div className="sm:col-span-2">
-//                     <label htmlFor="company" className="block text-sm font-semibold leading-6 text-gray-900">
-//                       Company
-//                     </label>
-//                     <div className="mt-2.5">
-//                       <input
-//                         type="text"
-//                         name="company"
-//                         id="company"
-//                         autoComplete="organization"
-//                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                       />
-//                     </div>
-//                   </div>
-//                   <div className="sm:col-span-2">
-//                     <div className="flex justify-between text-sm leading-6">
-//                       <label htmlFor="phone" className="block font-semibold text-gray-900">
-//                         Phone
-//                       </label>
-//                       <p id="phone-description" className="text-gray-400">
-//                         Optional
-//                       </p>
-//                     </div>
-//                     <div className="mt-2.5">
-//                       <input
-//                         type="tel"
-//                         name="phone"
-//                         id="phone"
-//                         autoComplete="tel"
-//                         aria-describedby="phone-description"
-//                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                       />
-//                     </div>
-//                   </div>
-//                   <div className="sm:col-span-2">
-//                     <div className="flex justify-between text-sm leading-6">
-//                       <label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">
-//                         How can we help you?
-//                       </label>
-//                       <p id="message-description" className="text-gray-400">
-//                         Max 500 characters
-//                       </p>
-//                     </div>
-//                     <div className="mt-2.5">
-//                       <textarea
-//                         id="message"
-//                         name="message"
-//                         rows={4}
-//                         aria-describedby="message-description"
-//                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                         defaultValue={''}
-//                       />
-//                     </div>
-//                   </div>
-//                   <fieldset className="sm:col-span-2">
-//                     <legend className="block text-sm font-semibold leading-6 text-gray-900">Expected budget</legend>
-//                     <div className="mt-4 space-y-4 text-sm leading-6 text-gray-600">
-//                       <div className="flex gap-x-2.5">
-//                         <input
-//                           id="budget-under-25k"
-//                           name="budget"
-//                           defaultValue="under_25k"
-//                           type="radio"
-//                           className="mt-1 h-4 w-4 border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-600"
-//                         />
-//                         <label htmlFor="budget-under-25k">Less than $25K</label>
-//                       </div>
-//                       <div className="flex gap-x-2.5">
-//                         <input
-//                           id="budget-25k-50k"
-//                           name="budget"
-//                           defaultValue="25k-50k"
-//                           type="radio"
-//                           className="mt-1 h-4 w-4 border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-600"
-//                         />
-//                         <label htmlFor="budget-25k-50k">$25K – $50K</label>
-//                       </div>
-//                       <div className="flex gap-x-2.5">
-//                         <input
-//                           id="budget-50k-100k"
-//                           name="budget"
-//                           defaultValue="50k-100k"
-//                           type="radio"
-//                           className="mt-1 h-4 w-4 border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-600"
-//                         />
-//                         <label htmlFor="budget-50k-100k">$50K – $100K</label>
-//                       </div>
-//                       <div className="flex gap-x-2.5">
-//                         <input
-//                           id="budget-over-100k"
-//                           name="budget"
-//                           defaultValue="over_100k"
-//                           type="radio"
-//                           className="mt-1 h-4 w-4 border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-600"
-//                         />
-//                         <label htmlFor="budget-over-100k">$100K+</label>
-//                       </div>
-//                     </div>
-//                   </fieldset>
-//                 </div>
-//                 <div className="mt-10 flex justify-end border-t border-gray-900/10 pt-8">
-//                   <button
-//                     type="submit"
-//                     className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-//                   >
-//                     Send message
-//                   </button>
-//                 </div>
-//               </form>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//       </div>
-//     )
-//   }
+export default function Example() {
+  return (
+    <div>
+      <ConstrainedHeaderComponent></ConstrainedHeaderComponent>
+      <div className="relative bg-white">
+        <div className="lg:absolute lg:inset-0 lg:left-1/2"></div>
+        <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:pt-32">
+          <div className="px-6 lg:px-8">
+            <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
+              <h2 className="text-3xl font-bold tracking-tight text-gray-900">
+                Let s work together
+              </h2>
+              <p className="mt-2 text-lg leading-8 text-gray-600">
+                Proin volutpat consequat porttitor cras nullam gravida at orci
+                molestie a eu arcu sed ut tincidunt magna.
+              </p>
+              <form action="#" method="POST" className="mt-16">
+                <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
+                  <div>
+                    <label
+                      htmlFor="first-name"
+                      className="block text-sm font-semibold leading-6 text-gray-900"
+                    >
+                      First name
+                    </label>
+                    <div className="mt-2.5">
+                      <input
+                        type="text"
+                        name="first-name"
+                        id="first-name"
+                        autoComplete="given-name"
+                        className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label
+                      htmlFor="last-name"
+                      className="block text-sm font-semibold leading-6 text-gray-900"
+                    >
+                      Last name
+                    </label>
+                    <div className="mt-2.5">
+                      <input
+                        type="text"
+                        name="last-name"
+                        id="last-name"
+                        autoComplete="family-name"
+                        className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                  <div className="sm:col-span-2">
+                    <label
+                      htmlFor="email"
+                      className="block text-sm font-semibold leading-6 text-gray-900"
+                    >
+                      Email
+                    </label>
+                    <div className="mt-2.5">
+                      <input
+                        id="email"
+                        name="email"
+                        type="email"
+                        autoComplete="email"
+                        className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                  <div className="sm:col-span-2">
+                    <label
+                      htmlFor="company"
+                      className="block text-sm font-semibold leading-6 text-gray-900"
+                    >
+                      Company
+                    </label>
+                    <div className="mt-2.5">
+                      <input
+                        type="text"
+                        name="company"
+                        id="company"
+                        autoComplete="organization"
+                        className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                  <div className="sm:col-span-2">
+                    <div className="flex justify-between text-sm leading-6">
+                      <label
+                        htmlFor="phone"
+                        className="block font-semibold text-gray-900"
+                      >
+                        Phone
+                      </label>
+                      <p id="phone-description" className="text-gray-400">
+                        Optional
+                      </p>
+                    </div>
+                    <div className="mt-2.5">
+                      <input
+                        type="tel"
+                        name="phone"
+                        id="phone"
+                        autoComplete="tel"
+                        aria-describedby="phone-description"
+                        className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                  <div className="sm:col-span-2">
+                    <div className="flex justify-between text-sm leading-6">
+                      <label
+                        htmlFor="message"
+                        className="block text-sm font-semibold leading-6 text-gray-900"
+                      >
+                        How can we help you?
+                      </label>
+                      <p id="message-description" className="text-gray-400">
+                        Max 500 characters
+                      </p>
+                    </div>
+                    <div className="mt-2.5">
+                      <textarea
+                        id="message"
+                        name="message"
+                        rows={4}
+                        aria-describedby="message-description"
+                        className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                        defaultValue={''}
+                      />
+                    </div>
+                  </div>
+                  <fieldset className="sm:col-span-2">
+                    <legend className="block text-sm font-semibold leading-6 text-gray-900">
+                      Expected budget
+                    </legend>
+                    <div className="mt-4 space-y-4 text-sm leading-6 text-gray-600">
+                      <div className="flex gap-x-2.5">
+                        <input
+                          id="budget-under-25k"
+                          name="budget"
+                          defaultValue="under_25k"
+                          type="radio"
+                          className="mt-1 h-4 w-4 border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-600"
+                        />
+                        <label htmlFor="budget-under-25k">Less than $25K</label>
+                      </div>
+                      <div className="flex gap-x-2.5">
+                        <input
+                          id="budget-25k-50k"
+                          name="budget"
+                          defaultValue="25k-50k"
+                          type="radio"
+                          className="mt-1 h-4 w-4 border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-600"
+                        />
+                        <label htmlFor="budget-25k-50k">$25K – $50K</label>
+                      </div>
+                      <div className="flex gap-x-2.5">
+                        <input
+                          id="budget-50k-100k"
+                          name="budget"
+                          defaultValue="50k-100k"
+                          type="radio"
+                          className="mt-1 h-4 w-4 border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-600"
+                        />
+                        <label htmlFor="budget-50k-100k">$50K – $100K</label>
+                      </div>
+                      <div className="flex gap-x-2.5">
+                        <input
+                          id="budget-over-100k"
+                          name="budget"
+                          defaultValue="over_100k"
+                          type="radio"
+                          className="mt-1 h-4 w-4 border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-600"
+                        />
+                        <label htmlFor="budget-over-100k">$100K+</label>
+                      </div>
+                    </div>
+                  </fieldset>
+                </div>
+                <div className="mt-10 flex justify-end border-t border-gray-900/10 pt-8">
+                  <button
+                    type="submit"
+                    className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  >
+                    Send message
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 07f667c..d1f22b0 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -1,95 +1,164 @@
-/*
-  This example requires some changes to your config:
-  
-  ```
-  // tailwind.config.js
-  module.exports = {
-    // ...
-    plugins: [
-      // ...
-      require('@tailwindcss/forms'),
-    ],
-  }
-  ```
-*/
-import { Fragment, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Fragment } from 'react';
 import { Dialog, Menu, Transition } from '@headlessui/react';
 import {
   Bars3CenterLeftIcon,
-  BellIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
   ClockIcon,
   CogIcon,
-  CreditCardIcon,
   DocumentChartBarIcon,
   HomeIcon,
-  QuestionMarkCircleIcon,
   ScaleIcon,
-  ShieldCheckIcon,
-  UserGroupIcon,
   XMarkIcon,
+  PaperClipIcon,
 } from '@heroicons/react/24/outline';
-import {
-  BanknotesIcon,
-  BuildingOfficeIcon,
-  CheckCircleIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  MagnifyingGlassIcon,
-} from '@heroicons/react/20/solid';
+
+interface Insurance {
+  _id: string; // Presupunând că mongoose adaugă automat un _id fiecărui document
+  Nume: string;
+  Prenume: string;
+  CNP: number;
+  DataNasterii: Date;
+  PermisDeConducere: string;
+  Email: string;
+  NrDeTelefon: string;
+  CategorieBonus: number;
+  CategoriaMasinii: string;
+  NumarulWIN: string;
+  AnProductie: number;
+  CapacitateCilindrica: number;
+  NrInmatriculare: string;
+  NrCertificatInmatriculare: string;
+  NormaDePoluare: string;
+  TipCombustibil: string;
+  PerioadaDeAsigurare: string;
+  TipAsigurare: string;
+  PretAsigurare: number;
+  StatusAsigurare: string;
+}
 
 const navigation = [
   { name: 'Home', href: '#', icon: HomeIcon, current: true },
-  { name: 'History', href: '#', icon: ClockIcon, current: false },
-  { name: 'Balances', href: '#', icon: ScaleIcon, current: false },
-  { name: 'Cards', href: '#', icon: CreditCardIcon, current: false },
-  { name: 'Recipients', href: '#', icon: UserGroupIcon, current: false },
   { name: 'Reports', href: '#', icon: DocumentChartBarIcon, current: false },
 ];
-const secondaryNavigation = [
-  { name: 'Settings', href: '#', icon: CogIcon },
-  { name: 'Help', href: '#', icon: QuestionMarkCircleIcon },
-  { name: 'Privacy', href: '#', icon: ShieldCheckIcon },
-];
-const cards = [
-  { name: 'Account balance', href: '#', icon: ScaleIcon, amount: '$30,659.45' },
-  // More items...
-];
-const transactions = [
-  {
-    id: 1,
-    name: 'Payment to Molly Sanders',
-    href: '#',
-    amount: '$20,000',
-    currency: 'USD',
-    status: 'success',
-    date: 'July 11, 2020',
-    datetime: '2020-07-11',
-  },
-  // More transactions...
-];
-const statusStyles = {
-  success: 'bg-green-100 text-green-800',
-  processing: 'bg-yellow-100 text-yellow-800',
-  failed: 'bg-gray-100 text-gray-800',
-};
 
-function classNames(...classes) {
+const secondaryNavigation = [{ name: 'Settings', href: '#', icon: CogIcon }];
+function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ');
 }
 
 export default function Example() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [recentActivities, setRecentActivities] = useState<Insurance[]>([]);
+
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  const [totalSum, setTotalSum] = useState(0);
+
+  useEffect(() => {
+    const fetchInsurances = async () => {
+      try {
+        const response = await fetch('http://localhost:5000/api/insurances');
+        const data = await response.json();
+
+        const updatedData = data
+          .slice()
+          .map((activity: { DataSolicitarii: string | number | Date }) => ({
+            ...activity,
+            DataSolicitarii: new Date(activity.DataSolicitarii),
+          }));
+        setRecentActivities(updatedData);
+        const totalSum = updatedData.reduce(
+          (acc: any, curr: { PretAsigurare: any }) => acc + curr.PretAsigurare,
+          0
+        );
+        setTotalSum(totalSum); // Asigură-te că ai acest state definit în componentă
+      } catch (error) {
+        console.error('Failed to fetch insurances:', error);
+      }
+    };
+
+    fetchInsurances();
+  }, []);
+
+  const pendingInsurancesCount = recentActivities.filter(
+    (activity) =>
+      activity.StatusAsigurare !== 'Acceptat' &&
+      activity.StatusAsigurare !== 'Respins'
+  ).length;
+
+  const cards = [
+    {
+      name: 'Account balance',
+      href: '#',
+      icon: ScaleIcon,
+      amount: `${totalSum.toFixed(2)} RON`,
+    },
+    {
+      name: 'Asigurari in asteptare',
+      href: '#',
+      icon: ClockIcon,
+      amount: `${pendingInsurancesCount}`, // Utilizează variabila calculată
+    },
+    {
+      name: 'Total asigurari',
+      href: '#',
+      icon: PaperClipIcon,
+      amount: `${recentActivities.length}`,
+    },
+  ];
+
+  const handleApprove = async (_id: any) => {
+    try {
+      const response = await fetch(
+        `http://localhost:5000/api/insurances/${_id}/status`,
+        {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ status: 'Acceptat' }),
+        }
+      );
+
+      if (response.ok) {
+        console.log('Approved successfully');
+        // Aici poți adăuga logica pentru a actualiza UI-ul sau state-ul după aprobare
+      } else {
+        console.error('Failed to approve');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  const handleReject = async (_id: any) => {
+    try {
+      const response = await fetch(
+        `http://localhost:5000/api/insurances/${_id}/status`,
+        {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ status: 'Respins' }),
+        }
+      );
+
+      if (response.ok) {
+        console.log('Rejected successfully');
+        // Aici poți adăuga logica pentru a actualiza UI-ul sau state-ul după respingere
+      } else {
+        console.error('Failed to reject');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
 
   return (
     <>
-      {/*
-        This example requires updating your template:
-
-        ```
-        <html class="h-full bg-gray-100">
-        <body class="h-full">
-        ```
-      */}
       <div className="min-h-full">
         <Transition.Root show={sidebarOpen} as={Fragment}>
           <Dialog
@@ -145,11 +214,11 @@ export default function Example() {
                     </div>
                   </Transition.Child>
                   <div className="flex flex-shrink-0 items-center px-4">
-                    <img
+                    {/* <img
                       className="h-8 w-auto"
                       src="https://tailwindui.com/img/logos/mark.svg?color=cyan&shade=300"
                       alt="Easywire logo"
-                    />
+                    /> */}
                   </div>
                   <nav
                     className="mt-5 h-full flex-shrink-0 divide-y divide-cyan-800 overflow-y-auto"
@@ -208,11 +277,11 @@ export default function Example() {
           {/* Sidebar component, swap this element with another sidebar if you like */}
           <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
             <div className="flex flex-shrink-0 items-center px-4">
-              <img
+              {/* <img
                 className="h-8 w-auto"
                 src="https://tailwindui.com/img/logos/mark.svg?color=cyan&shade=300"
                 alt="Easywire logo"
-              />
+              /> */}
             </div>
             <nav
               className="mt-5 flex flex-1 flex-col divide-y divide-cyan-800 overflow-y-auto"
@@ -271,180 +340,9 @@ export default function Example() {
               <Bars3CenterLeftIcon className="h-6 w-6" aria-hidden="true" />
             </button>
             {/* Search bar */}
-            <div className="flex flex-1 justify-between px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
-              <div className="flex flex-1">
-                <form className="flex w-full md:ml-0" action="#" method="GET">
-                  <label htmlFor="search-field" className="sr-only">
-                    Search
-                  </label>
-                  <div className="relative w-full text-gray-400 focus-within:text-gray-600">
-                    <div
-                      className="pointer-events-none absolute inset-y-0 left-0 flex items-center"
-                      aria-hidden="true"
-                    >
-                      <MagnifyingGlassIcon
-                        className="h-5 w-5"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <input
-                      id="search-field"
-                      name="search-field"
-                      className="block h-full w-full border-transparent py-2 pl-8 pr-3 text-gray-900 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
-                      placeholder="Search transactions"
-                      type="search"
-                    />
-                  </div>
-                </form>
-              </div>
-              <div className="ml-4 flex items-center md:ml-6">
-                <button
-                  type="button"
-                  className="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
-                >
-                  <span className="absolute -inset-1.5" />
-                  <span className="sr-only">View notifications</span>
-                  <BellIcon className="h-6 w-6" aria-hidden="true" />
-                </button>
-
-                {/* Profile dropdown */}
-                <Menu as="div" className="relative ml-3">
-                  <div>
-                    <Menu.Button className="relative flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-gray-50">
-                      <span className="absolute -inset-1.5 lg:hidden" />
-                      <img
-                        className="h-8 w-8 rounded-full"
-                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                        alt=""
-                      />
-                      <span className="ml-3 hidden text-sm font-medium text-gray-700 lg:block">
-                        <span className="sr-only">Open user menu for </span>
-                        Emilia Birch
-                      </span>
-                      <ChevronDownIcon
-                        className="ml-1 hidden h-5 w-5 flex-shrink-0 text-gray-400 lg:block"
-                        aria-hidden="true"
-                      />
-                    </Menu.Button>
-                  </div>
-                  <Transition
-                    as={Fragment}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      <Menu.Item>
-                        {({ active }) => (
-                          <a
-                            href="#"
-                            className={classNames(
-                              active ? 'bg-gray-100' : '',
-                              'block px-4 py-2 text-sm text-gray-700'
-                            )}
-                          >
-                            Your Profile
-                          </a>
-                        )}
-                      </Menu.Item>
-                      <Menu.Item>
-                        {({ active }) => (
-                          <a
-                            href="#"
-                            className={classNames(
-                              active ? 'bg-gray-100' : '',
-                              'block px-4 py-2 text-sm text-gray-700'
-                            )}
-                          >
-                            Settings
-                          </a>
-                        )}
-                      </Menu.Item>
-                      <Menu.Item>
-                        {({ active }) => (
-                          <a
-                            href="#"
-                            className={classNames(
-                              active ? 'bg-gray-100' : '',
-                              'block px-4 py-2 text-sm text-gray-700'
-                            )}
-                          >
-                            Logout
-                          </a>
-                        )}
-                      </Menu.Item>
-                    </Menu.Items>
-                  </Transition>
-                </Menu>
-              </div>
-            </div>
           </div>
           <main className="flex-1 pb-8">
             {/* Page header */}
-            <div className="bg-white shadow">
-              <div className="px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
-                <div className="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-gray-200">
-                  <div className="min-w-0 flex-1">
-                    {/* Profile */}
-                    <div className="flex items-center">
-                      <img
-                        className="hidden h-16 w-16 rounded-full sm:block"
-                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
-                        alt=""
-                      />
-                      <div>
-                        <div className="flex items-center">
-                          <img
-                            className="h-16 w-16 rounded-full sm:hidden"
-                            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
-                            alt=""
-                          />
-                          <h1 className="ml-3 text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:leading-9">
-                            Good morning, Emilia Birch
-                          </h1>
-                        </div>
-                        <dl className="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
-                          <dt className="sr-only">Company</dt>
-                          <dd className="flex items-center text-sm font-medium capitalize text-gray-500 sm:mr-6">
-                            <BuildingOfficeIcon
-                              className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
-                              aria-hidden="true"
-                            />
-                            Duke street studio
-                          </dd>
-                          <dt className="sr-only">Account status</dt>
-                          <dd className="mt-3 flex items-center text-sm font-medium capitalize text-gray-500 sm:mr-6 sm:mt-0">
-                            <CheckCircleIcon
-                              className="mr-1.5 h-5 w-5 flex-shrink-0 text-green-400"
-                              aria-hidden="true"
-                            />
-                            Verified account
-                          </dd>
-                        </dl>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-6 flex space-x-3 md:ml-4 md:mt-0">
-                    <button
-                      type="button"
-                      className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-                    >
-                      Add money
-                    </button>
-                    <button
-                      type="button"
-                      className="inline-flex items-center rounded-md bg-cyan-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-                    >
-                      Send money
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
             <div className="mt-8">
               <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
                 <h2 className="text-lg font-medium leading-6 text-gray-900">
@@ -493,75 +391,9 @@ export default function Example() {
                   ))}
                 </div>
               </div>
-
               <h2 className="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-gray-900 sm:px-6 lg:px-8">
                 Recent activity
               </h2>
-
-              {/* Activity list (smallest breakpoint only) */}
-              <div className="shadow sm:hidden">
-                <ul
-                  role="list"
-                  className="mt-2 divide-y divide-gray-200 overflow-hidden shadow sm:hidden"
-                >
-                  {transactions.map((transaction) => (
-                    <li key={transaction.id}>
-                      <a
-                        href={transaction.href}
-                        className="block bg-white px-4 py-4 hover:bg-gray-50"
-                      >
-                        <span className="flex items-center space-x-4">
-                          <span className="flex flex-1 space-x-2 truncate">
-                            <BanknotesIcon
-                              className="h-5 w-5 flex-shrink-0 text-gray-400"
-                              aria-hidden="true"
-                            />
-                            <span className="flex flex-col truncate text-sm text-gray-500">
-                              <span className="truncate">
-                                {transaction.name}
-                              </span>
-                              <span>
-                                <span className="font-medium text-gray-900">
-                                  {transaction.amount}
-                                </span>{' '}
-                                {transaction.currency}
-                              </span>
-                              <time dateTime={transaction.datetime}>
-                                {transaction.date}
-                              </time>
-                            </span>
-                          </span>
-                          <ChevronRightIcon
-                            className="h-5 w-5 flex-shrink-0 text-gray-400"
-                            aria-hidden="true"
-                          />
-                        </span>
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-
-                <nav
-                  className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3"
-                  aria-label="Pagination"
-                >
-                  <div className="flex flex-1 justify-between">
-                    <a
-                      href="#"
-                      className="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-                    >
-                      Previous
-                    </a>
-                    <a
-                      href="#"
-                      className="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-                    >
-                      Next
-                    </a>
-                  </div>
-                </nav>
-              </div>
-
               {/* Activity table (small breakpoint and up) */}
               <div className="hidden sm:block">
                 <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
@@ -570,103 +402,270 @@ export default function Example() {
                       <table className="min-w-full divide-y divide-gray-200">
                         <thead>
                           <tr>
-                            <th
-                              className="bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900"
-                              scope="col"
-                            >
-                              Transaction
+                            <th className="bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900">
+                              Nume și Prenume
+                            </th>
+                            <th className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900">
+                              Tip Asigurare
                             </th>
-                            <th
-                              className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900"
-                              scope="col"
-                            >
-                              Amount
+                            <th className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900">
+                              Pret Asigurare
                             </th>
-                            <th
-                              className="hidden bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900 md:block"
-                              scope="col"
-                            >
-                              Status
+                            <th className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900">
+                              Data solicitarii
                             </th>
-                            <th
-                              className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900"
-                              scope="col"
-                            >
-                              Date
+                            <th className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900">
+                              Acțiuni
                             </th>
                           </tr>
                         </thead>
                         <tbody className="divide-y divide-gray-200 bg-white">
-                          {transactions.map((transaction) => (
-                            <tr key={transaction.id} className="bg-white">
-                              <td className="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
-                                <div className="flex">
-                                  <a
-                                    href={transaction.href}
-                                    className="group inline-flex space-x-2 truncate text-sm"
+                          {recentActivities.map((activity, index) => (
+                            <React.Fragment key={activity._id || index}>
+                              <tr>
+                                <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                                  {activity.Nume} {activity.Prenume}
+                                </td>
+                                <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
+                                  {activity.TipAsigurare}
+                                </td>
+                                <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
+                                  {activity.PretAsigurare} RON
+                                </td>
+
+                                <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
+                                  <button
+                                    onClick={() =>
+                                      setSelectedIndex(
+                                        index === selectedIndex ? null : index
+                                      )
+                                    }
+                                    className="inline-flex items-center text-cyan-600 hover:text-cyan-900"
                                   >
-                                    <BanknotesIcon
-                                      className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-                                      aria-hidden="true"
-                                    />
-                                    <p className="truncate text-gray-500 group-hover:text-gray-900">
-                                      {transaction.name}
-                                    </p>
-                                  </a>
-                                </div>
-                              </td>
-                              <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
-                                <span className="font-medium text-gray-900">
-                                  {transaction.amount}
-                                </span>
-                                {transaction.currency}
-                              </td>
-                              <td className="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
-                                <span
-                                  className={classNames(
-                                    statusStyles[transaction.status],
-                                    'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium capitalize'
-                                  )}
-                                >
-                                  {transaction.status}
-                                </span>
-                              </td>
-                              <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
-                                <time dateTime={transaction.datetime}>
-                                  {transaction.date}
-                                </time>
-                              </td>
-                            </tr>
+                                    {selectedIndex === index ? (
+                                      <ChevronUpIcon className="h-5 w-5" />
+                                    ) : (
+                                      <ChevronDownIcon className="h-5 w-5" />
+                                    )}
+                                  </button>
+                                </td>
+                              </tr>
+                              {selectedIndex === index && (
+                                <tr>
+                                  <td
+                                    colSpan={5}
+                                    className="bg-gray-50 px-6 py-4"
+                                  >
+                                    <div className="text-sm text-gray-900 font-medium">
+                                      Detalii solicitare asigurare:
+                                    </div>
+                                    <div className="mt-2">
+                                      <table className="min-w-full divide-y divide-gray-200">
+                                        <tbody className="bg-white divide-y divide-gray-200">
+                                          {/* Fiecare rând reprezintă o pereche cheie-valoare din modelul tău */}
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Nume:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.Nume}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Prenume:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.Prenume}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              CNP:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.CNP}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Data Nașterii:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {new Date(
+                                                activity.DataNasterii
+                                              ).toLocaleDateString()}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Permis De Conducere:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.PermisDeConducere}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Email:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.Email}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Nr De Telefon:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.NrDeTelefon}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Categorie Bonus:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.CategorieBonus}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Categoria masinii:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.CategoriaMasinii}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Serie de șasiu
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.NumarulWIN}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              An productie:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.AnProductie}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Categorie Bonus:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.CategorieBonus}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Capacitate Cilindrica:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.CapacitateCilindrica}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Numar inamtriculare:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {
+                                                activity.NrCertificatInmatriculare
+                                              }
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Certificat de inmatriculare:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {
+                                                activity.NrCertificatInmatriculare
+                                              }
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Norma de poluare:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.NormaDePoluare}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Tip Combustibil:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.TipCombustibil}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Perioada de asiguare:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.PerioadaDeAsigurare}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Tip Asigurare:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.TipAsigurare}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Pret Asigurare:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.PretAsigurare}
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td className="px-2 py-2 text-gray-500">
+                                              Statut Asigurare:
+                                            </td>
+                                            <td className="px-2 py-2 text-gray-900">
+                                              {activity.StatusAsigurare}
+                                            </td>
+                                          </tr>
+                                          {/* Continuă să adaugi restul detaliilor în acest format */}
+                                        </tbody>
+                                      </table>
+                                      <div className="mt-4 flex justify-end space-x-3">
+                                        <button
+                                          onClick={() =>
+                                            handleApprove(activity._id)
+                                          }
+                                          className="inline-flex justify-center rounded-md border border-transparent bg-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
+                                        >
+                                          Aprobă
+                                        </button>
+                                        <button
+                                          onClick={() =>
+                                            handleReject(activity._id)
+                                          }
+                                          className="inline-flex justify-center rounded-md border border-transparent bg-red-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                                        >
+                                          Respinge
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                              )}
+                            </React.Fragment>
                           ))}
                         </tbody>
                       </table>
-                      {/* Pagination */}
-                      <nav
-                        className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
-                        aria-label="Pagination"
-                      >
-                        <div className="hidden sm:block">
-                          <p className="text-sm text-gray-700">
-                            Showing <span className="font-medium">1</span> to{' '}
-                            <span className="font-medium">10</span> of{' '}
-                            <span className="font-medium">20</span> results
-                          </p>
-                        </div>
-                        <div className="flex flex-1 justify-between gap-x-3 sm:justify-end">
-                          <a
-                            href="#"
-                            className="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
-                          >
-                            Previous
-                          </a>
-                          <a
-                            href="#"
-                            className="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
-                          >
-                            Next
-                          </a>
-                        </div>
-                      </nav>
                     </div>
                   </div>
                 </div>
diff --git a/sections/details/details.tsx b/sections/details/details.tsx
index fb309e0..1471da7 100644
--- a/sections/details/details.tsx
+++ b/sections/details/details.tsx
@@ -22,6 +22,7 @@ const Details: React.FC = () => {
     NormaDePoluare: '',
     TipCombustibil: '',
     PerioadaDeAsigurare: '',
+    StatusAsigurare: '',
   });
   const [estimatedPrice, setEstimatedPrice] = useState<string>('');
   const [basePrice, setBasePrice] = useState<number>(0);
@@ -48,7 +49,7 @@ const Details: React.FC = () => {
     'PerioadaDeAsigurare',
   ];
 
-  const options = {
+  const options: { [key: string]: string[] } = {
     PerioadaDeAsigurare: ['1 an', '6 luni', '3 luni'],
     NormaDePoluare: ['Euro 3', 'Euro 4', 'Euro 5', 'Euro 6'],
     TipCombustibil: ['Diesel', 'Benzina', 'Hibrid', 'Electric', 'Gaz-Benzina'],
@@ -89,7 +90,14 @@ const Details: React.FC = () => {
 
       console.log('Datele au fost trimise cu succes.');
     } catch (error) {
-      console.error('A apărut o eroare la trimiterea datelor:', error.message);
+      if (error instanceof Error) {
+        console.error(
+          'A apărut o eroare la trimiterea datelor:',
+          error.message
+        );
+      } else {
+        console.error('A apărut o eroare necunoscută');
+      }
     }
   };
 
@@ -113,7 +121,7 @@ const Details: React.FC = () => {
     }
 
     // Coeficienții pentru categoria mașinii
-    const carCategoryCoefficients = {
+    const carCategoryCoefficients: Record<string, number> = {
       Autoturism: 1.0,
       Camion: 1.5,
       Motocicleta: 0.8,
@@ -130,7 +138,7 @@ const Details: React.FC = () => {
         : 0.8;
 
     // Coeficienții pentru tipul de combustibil
-    const fuelTypeCoefficients = {
+    const fuelTypeCoefficients: Record<string, number> = {
       Diesel: 1.1,
       Benzina: 1.0,
       Electric: 0.8,
@@ -152,7 +160,7 @@ const Details: React.FC = () => {
       carAge < 5 ? 0.9 : carAge <= 10 ? 1.0 : 1.1;
 
     // Coeficienții pentru norma de poluare
-    const pollutionNormCoefficients = {
+    const pollutionNormCoefficients: Record<string, number> = {
       'Euro 3': 1.1,
       'Euro 4': 1.0,
       'Euro 5': 0.9,
@@ -165,7 +173,7 @@ const Details: React.FC = () => {
       cylinderCapacity <= 1500 ? 0.9 : cylinderCapacity <= 2500 ? 1.0 : 1.1;
 
     // Coeficienții pentru perioada de asigurare
-    const insurancePeriodCoefficients = {
+    const insurancePeriodCoefficients: Record<string, number> = {
       '1 an': 1.0,
       '6 luni': 1.05,
       '3 luni': 1.1,
@@ -274,24 +282,11 @@ const Details: React.FC = () => {
                     <option value="" disabled>
                       Selectează opțiunea
                     </option>
-                    {options[field].map(
-                      (
-                        option:
-                          | boolean
-                          | React.Key
-                          | React.ReactElement<
-                              any,
-                              string | React.JSXElementConstructor<any>
-                            >
-                          | React.ReactFragment
-                          | null
-                          | undefined
-                      ) => (
-                        <option key={option} value={option}>
-                          {option}
-                        </option>
-                      )
-                    )}
+                    {options[field].map((option) => (
+                      <option key={String(option)} value={String(option)}>
+                        {option}
+                      </option>
+                    ))}
                   </select>
                 ) : (
                   <input