working and builded

src/app/(Administrador)/reportesGraficas/page.tsx

@@ -3,15 +3,13 @@
 import { useState } from "react";
 import DownloadReporteXLSX from "@/components/Dowload/Reporte";
 import Reporte from "@/components/reporteGraficas/reporte";
-import Antiguedad from "@/components/AntiguedadEquipo/Antiguedad";
 
 import "../../styles/layout/reporte.scss";
 
-type PreguntaKey = "antiguedad" | "adscripcion";
+type PreguntaKey = "antiguedad";
 
 const LABELS: Record<PreguntaKey, string> = {
   antiguedad: "Antigüedad",
-  adscripcion: "Antigüedad por Adscripcion"
 };
 
 export default function Page() {
@@ -20,10 +18,6 @@ export default function Page() {
   const renderPregunta = () => {
     switch (activeTab) {
       case "antiguedad":
-        return (
-          <Antiguedad />
-        );
-      case "adscripcion":
         return (
           <Reporte />
         );

src/components/AntiguedadEquipo/Antiguedad.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-
-interface antiguedad{
-    antiguedad:string;
-    total:number;
-}
-
-export default function Antiguedad() {
-    const [antiguedad,setAntiguedad]=useState<antiguedad[]>([])
-
-    useEffect(()=>{
-        const getAntiguedad = async()=>{
-            const response = await axios.get("http://localhost:3001/equipos/grafica")
-
-            setAntiguedad(response.data)
-        }
-        getAntiguedad()
-    },[])
-
-    return (
-        <ResponsiveContainer width="100%" aspect={2}>
-            <BarChart data={antiguedad}
-            width={500}
-            height={300}
-            margin={{
-                top:20,
-            }}
-            >
-                <CartesianGrid strokeDasharray="3 3"/>
-                <XAxis dataKey="antiguedad"/>
-                <YAxis/>
-                <Tooltip/>
-                <Legend/>
-                <Bar dataKey="total" fill="#0d6efd"/>
-
-            </BarChart>
-        </ResponsiveContainer>
-    )
-}

src/components/reporteGraficas/Graficas/Antiguedad.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    Legend,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis
+} from "recharts";
+import Cookies from "js-cookie";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface AntiguedadData {
+    adscripcion: string
+    antiguedad: string
+    total: number
+}
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function Antiguedad({ filtros }: Props) {
+
+    const [data, setData] = useState<AntiguedadData[]>([])
+
+    useEffect(() => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
+
+        const getAntiguedad = async () => {
+
+            const response = await axios.post(
+                `${api_url}/equipos/grafica/antiguedad`,
+                filtros,
+                { headers }
+            )
+
+            setData(response.data)
+
+        }
+
+        getAntiguedad()
+
+    }, [filtros])
+
+    return (
+        <div
+            style={{
+                minWidth: "570px",
+                background: "white",
+                borderRadius: "10px",
+                margin: "5px auto",
+                padding: "1rem",
+                maxWidth: "100%"
+            }}
+        >
+
+            <h1 style={{ margin: "0" }}>Antigüedad</h1>
+
+            <ResponsiveContainer width="100%" aspect={2.5}>
+
+                <BarChart
+                    data={data}
+                    margin={{ top: 20 }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+
+                    <XAxis dataKey="antiguedad" fontSize={12} />
+
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/Procesador.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type ProcesadorOption = {
+    id_procesador: string
+    procesador: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface procesador {
+    adscripcion: string
+    procesador: string;
+    total: number;
+}
+
+export default function Procesador({ filtros }: Props) {
+    const [data, setData] = useState<procesador[]>([])
+
+    useEffect(() => {
+        const getAntiguedad = async () => {
+            const response = await axios.post("http://localhost:3001/equipos/grafica/procesador",filtros)
+
+            setData(response.data)
+        }
+        getAntiguedad()
+    }, [filtros])
+
+    return (
+        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>Procesador</h1>
+            <ResponsiveContainer width="100%" aspect={3.5} minHeight={270}>
+                <BarChart data={data}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                        bottom: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="procesador" fontSize={12} angle={40} textAnchor="start" hide />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/SistemaOperativo.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type UsoOption = {
+    id_sistema_operativo: string
+    sistema_operativo: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface so {
+    adscripcion: string
+    so: string;
+    total: number;
+}
+
+export default function SistemaOperativo({ filtros }: Props) {
+    const [data, setData] = useState<so[]>([])
+
+    useEffect(() => {
+        const getAntiguedad = async () => {
+            const response = await axios.post("http://localhost:3001/equipos/grafica/so",filtros)
+
+            setData(response.data)
+        }
+        getAntiguedad()
+    }, [filtros])
+
+    return (
+        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>SistemaOperativo</h1>
+            <ResponsiveContainer width="100%" aspect={3.5}>
+                <BarChart data={data}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/Uso.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type UsoOption = {
+    id_uso: string
+    tipo_uso: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface UsoData {
+    uso: string
+    adscripcion: string
+    total: number
+}
+
+export default function Uso({ filtros }: Props) {
+    const [data, setData] = useState<UsoData[]>([])
+
+    useEffect(() => {
+        const getUso = async () => {
+            const response = await axios.post(
+                "http://localhost:3001/equipos/grafica/uso",filtros
+            )
+            setData(response.data)
+        }
+        getUso()
+
+    }, [filtros])
+
+    return (
+        <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>Uso</h1>
+            <ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
+                <BarChart data={data}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="uso" fontSize={12} />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Reporte.module.css

@@ -1,76 +1,92 @@
-.container{
+.container {
     width: 100%;
     margin: 0 auto;
-    padding:20px;
+    padding: 20px;
-    background:white;
+    background: white;
-    border-radius:10px;
+    border-radius: 10px;
-    box-shadow:0 2px 8px rgba(0,0,0,0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    font-family:Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
-    font-size:14px;
+    font-size: 14px;
 }
 
-.title{
+.title {
-    font-size:18px;
+    font-size: 18px;
-    margin-bottom:15px;
+    margin-bottom: 15px;
 }
 
-.label{
+.label {
-    font-size:13px;
+    font-size: 13px;
-    color:#444;
+    color: #444;
 }
 
-.listaContainer{
+.listaContainer {
-    margin-top:20px;
+    margin-top: 20px;
 }
 
-.subtitle{
+.subtitle {
-    font-size:14px;
+    font-size: 14px;
-    margin-bottom:10px;
+    margin-bottom: 10px;
 }
 
-.empty{
+.empty {
-    font-size:13px;
+    font-size: 13px;
-    color:#777;
+    color: #777;
 }
 
-.lista{
+.lista {
-    display:flex;
+    display: flex;
-    flex-wrap:wrap;
+    flex-wrap: wrap;
-    gap:8px;
+    gap: 8px;
 }
 
-.chip{
+.chip {
-    display:flex;
+    display: flex;
-    align-items:center;
+    align-items: center;
-    background:#f1f3f5;
+    background: #f1f3f5;
-    border-radius:20px;
+    border-radius: 6px;
-    padding:5px 10px;
+    padding: 5px 10px;
-    font-size:13px;
+    font-size: 13px;
+    text-align: start;
 }
 
-.remove{
+.remove {
-    border:none;
+    border: none;
-    background:none;
+    background: none;
-    margin-left:6px;
+    margin-left: 6px;
-    cursor:pointer;
+    cursor: pointer;
-    color:#777;
+    color: #777;
 }
 
-.remove:hover{
+.remove:hover {
-    color:#c0392b;
+    color: #c0392b;
 }
 
-.button{
+.button {
-    margin-top:20px;
+    margin-top: 20px;
-    padding:8px 14px;
+    padding: 8px 14px;
-    border:none;
+    border: none;
-    border-radius:6px;
+    border-radius: 6px;
-    background:#2563eb;
+    background: #2563eb;
-    color:white;
+    color: white;
-    font-size:13px;
+    font-size: 13px;
-    cursor:pointer;
+    cursor: pointer;
 }
 
-.button:hover{
+.button:hover {
-    background:#1d4ed8;
+    background: #1d4ed8;
+}
+
+.graficas {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.filtro {
+    display: flex;
+    gap: 10px;
+}
+
+.containerSelection {
+    width: 100%;
+    min-width: 200px
 }

src/components/reporteGraficas/reporte.tsx

@@ -1,99 +1,359 @@
 "use client"
 
 import Select from "react-select"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import styles from "./Reporte.module.css"
+import axios from "axios"
+
+import Antiguedad from "./Graficas/Antiguedad"
+import Procesador from "./Graficas/Procesador"
+import SistemaOperativo from "./Graficas/SistemaOperativo"
+import Uso from "./Graficas/Uso"
+
+import Cookies from "js-cookie";
+const api_url = process.env.NEXT_PUBLIC_API_URL;
 
 type AdscripcionOption = {
-    value: string
+    id_adscripcion: string
-    label: string
+    adscripcion: string
+}
+
+type UsoOption = {
+    id_uso: string
+    tipo_uso: string
+}
+
+type SoOption = {
+    id_sistema_operativo: string
+    sistema_operativo: string
+}
+
+type ProcesadorOption = {
+    id_procesador: string
+    procesador: string
+}
+
+type AntiguedadOption = {
+    antiguedad: string
 }
 
 export default function Reporte() {
 
+    const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
     const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])
 
-    const adscripciones: AdscripcionOption[] = [
+    const [procesadores, setProcesadores] = useState<ProcesadorOption[]>([])
-        { value: "informatica", label: "Informática" },
+    const [procesadorSeleccionado, setProcesadorSeleccionado] = useState<ProcesadorOption[]>([])
-        { value: "rh", label: "Recursos Humanos" },
-        { value: "finanzas", label: "Finanzas" },
-        { value: "juridico", label: "Jurídico" }
-    ]
 
-    const agregarAdscripcion = (option: AdscripcionOption | null) => {
+    const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
+    const [soSeleccionado, setSoSeleccionado] = useState<SoOption[]>([])
+
+    const [usos, setUsos] = useState<UsoOption[]>([])
+    const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
+
+    const [antiguedad, setAntiguedad] = useState<AntiguedadOption[]>([{ antiguedad: "Menor a 2 años" }, { antiguedad: "Entre 2 y 3 años" }, { antiguedad: "Entre 4 y 5 años" }, { antiguedad: "Mayor a 6 años" }])
+    const [antiguedadSeleccionada, setAntiguedadSeleccionada] = useState<AntiguedadOption[]>([])
+
+    const [filtros, setFiltros] = useState<any>(null)
+    useEffect(() => {
+
+        const cargarDatos = async () => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
+            const [
+                adscripcionRes,
+                procesadorRes,
+                usoRes,
+                soRes,
+            ] = await Promise.all([
+                axios.get(`${api_url}/equipos/adscripciones`,{ headers }),
+                axios.get(`${api_url}/equipos/procesador-tipo-equipos`,{ headers }),
+                axios.get(`${api_url}/equipos/usos`,{ headers }),
+                axios.get(`${api_url}/equipos/sistemas-operativos`,{ headers }),
+            ])
+
+            setAdscripciones(adscripcionRes.data)
+            setProcesadores(procesadorRes.data)
+            setUsos(usoRes.data)
+            setSistemasOperativos(soRes.data)
+
+        }
+
+        cargarDatos()
+
+    }, [])
+
+    function agregar<T>(option: T | null, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
 
         if (!option) return
 
-        const existe = adscripcionesSeleccionadas.some(a => a.value === option.value)
+        const existe = lista.some((item) => item[key] === option[key])
 
         if (!existe) {
-            setAdscripcionesSeleccionadas([...adscripcionesSeleccionadas, option])
+            setLista([...lista, option])
         }
+
     }
 
-    const eliminarAdscripcion = (value: string) => {
+    function eliminar<T>(id: string, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
-        setAdscripcionesSeleccionadas(
+
-            adscripcionesSeleccionadas.filter(a => a.value !== value)
+        setLista(
+            lista.filter((item) => item[key] !== id)
         )
+
     }
 
     const generarReporte = () => {
-        console.log("Adscripciones seleccionadas:", adscripcionesSeleccionadas)
+
+        const filtros = {
+            adscripciones: adscripcionesSeleccionadas.map(a => String(a.id_adscripcion)),
+            procesadores: procesadorSeleccionado.map(p => String(p.id_procesador)),
+            sistemas: soSeleccionado.map(s => String(s.id_sistema_operativo)),
+            usos: usoSeleccionado.map(u => String(u.id_uso)),
+            antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
+        }
+
+        setFiltros(filtros)
+
     }
 
     return (
+        <>
+            <div className={styles.container}>
 
-        <div className={styles.container}>
+                <section className={styles.filtro}>
 
-            <h2 className={styles.title}>Reporte de Antigüedad de Equipos</h2>
+                    {/* ADSCRIPCION */}
 
-            <label className={styles.label}>Buscar adscripción</label>
+                    <div className={styles.containerSelection}>
+                        <label className={styles.adscripcion}>Adscripción</label>
 
-            <Select
+                        <Select
-                options={adscripciones}
+                            options={adscripciones}
-                placeholder="Escribe para buscar..."
+                            getOptionLabel={(o) => o.adscripcion}
-                onChange={(value) => agregarAdscripcion(value)}
+                            getOptionValue={(o) => o.id_adscripcion}
-            />
+                            onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+                        />
 
-            <div className={styles.listaContainer}>
+                        <div className={styles.lista}>
 
-                <h4 className={styles.subtitle}>
+                            {adscripcionesSeleccionadas.map((a) => (
-                    Adscripciones seleccionadas ({adscripcionesSeleccionadas.length})
-                </h4>
 
-                {adscripcionesSeleccionadas.length === 0 && (
+                                <div key={a.id_adscripcion} className={styles.chip}>
-                    <p className={styles.empty}>No hay adscripciones seleccionadas</p>
-                )}
 
-                <div className={styles.lista}>
+                                    <span>{a.adscripcion}</span>
 
-                    {adscripcionesSeleccionadas.map((ads) => (
+                                    <button
-                        <div key={ads.value} className={styles.chip}>
+                                        className={styles.remove}
+                                        onClick={() => eliminar(a.id_adscripcion, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+                                    >
+                                        ✕
+                                    </button>
 
-                            <span>{ads.label}</span>
+                                </div>
 
-                            <button
+                            ))}
-                                className={styles.remove}
-                                onClick={() => eliminarAdscripcion(ads.value)}
-                            >
-                                ✕
-                            </button>
 
                         </div>
-                    ))}
 
-                </div>
+                    </div>
+
+
+                    {/* PROCESADOR */}
+
+                    <div className={styles.containerSelection}>
+
+                        <label className={styles.adscripcion}>Procesador</label>
+
+                        <Select
+                            options={procesadores}
+                            getOptionLabel={(o) => o.procesador}
+                            getOptionValue={(o) => o.id_procesador}
+                            onChange={(o) =>
+                                agregar(o, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
+                            }
+                        />
+
+                        <div className={styles.lista}>
+
+                            {procesadorSeleccionado.map((p) => (
+
+                                <div key={p.id_procesador} className={styles.chip}>
+
+                                    <span>{p.procesador}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() =>
+                                            eliminar(p.id_procesador, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
+                                        }
+                                    >
+                                        ✕
+                                    </button>
+
+                                </div>
+
+                            ))}
+
+                        </div>
+
+                    </div>
+
+                    {/* SISTEMA OPERATIVO */}
+
+                    <div className={styles.containerSelection}>
+
+                        <label className={styles.adscripcion}>Sistema Operativo</label>
+
+                        <Select
+                            options={sistemasOperativos}
+                            getOptionLabel={(o) => o.sistema_operativo}
+                            getOptionValue={(o) => o.id_sistema_operativo}
+                            onChange={(o) =>
+                                agregar(o, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
+                            }
+                        />
+
+                        <div className={styles.lista}>
+
+                            {soSeleccionado.map((s) => (
+
+                                <div key={s.id_sistema_operativo} className={styles.chip}>
+
+                                    <span>{s.sistema_operativo}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() =>
+                                            eliminar(s.id_sistema_operativo, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
+                                        }
+                                    >
+                                        ✕
+                                    </button>
+
+                                </div>
+
+                            ))}
+
+                        </div>
+
+                    </div>
+
+
+                    {/* USO */}
+
+                    <div className={styles.containerSelection}>
+
+                        <label className={styles.adscripcion}>Uso</label>
+
+                        <Select
+                            options={usos}
+                            getOptionLabel={(o) => o.tipo_uso}
+                            getOptionValue={(o) => o.id_uso}
+                            onChange={(o) =>
+                                agregar(o, usoSeleccionado, setUsoSeleccionado, "id_uso")
+                            }
+                        />
+
+                        <div className={styles.lista}>
+
+                            {usoSeleccionado.map((u) => (
+
+                                <div key={u.id_uso} className={styles.chip}>
+
+                                    <span>{u.tipo_uso}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() =>
+                                            eliminar(u.id_uso, usoSeleccionado, setUsoSeleccionado, "id_uso")
+                                        }
+                                    >
+                                        ✕
+                                    </button>
+
+                                </div>
+
+                            ))}
+
+                        </div>
+
+                    </div>
+
+
+                    <div className={styles.containerSelection}>
+
+                        <label className={styles.adscripcion}>Antiguedad</label>
+
+                        <Select
+                            options={antiguedad}
+                            getOptionLabel={(o) => o.antiguedad}
+                            getOptionValue={(o) => o.antiguedad}
+                            onChange={(o) =>
+                                agregar(o, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
+                            }
+                        />
+
+                        <div className={styles.lista}>
+
+                            {antiguedadSeleccionada.map((p) => (
+
+                                <div key={p.antiguedad} className={styles.chip}>
+
+                                    <span>{p.antiguedad}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() =>
+                                            eliminar(p.antiguedad, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
+                                        }
+                                    >
+                                        ✕
+                                    </button>
+
+                                </div>
+
+                            ))}
+
+                        </div>
+
+                    </div>
+
+
+                </section>
+
+                <button
+                    className={styles.button}
+                    onClick={generarReporte}
+                >
+                    Buscar
+                </button>
 
             </div>
 
-            <button
-                className={styles.button}
-                onClick={generarReporte}
-            >
-                Generar reporte
-            </button>
 
-        </div>
+            <section className={styles.graficas}>
 
+                <Antiguedad
+                    filtros={filtros}
+                />
+
+                <Uso
+                    filtros={filtros}
+                />
+
+                <Procesador
+                    filtros={filtros}
+                />
+
+                <SistemaOperativo
+                    filtros={filtros}
+                />
+
+            </section>
+
+
+        </>
     )
-}
+
+}