[V0_FILE]typescriptreact:file="concedii-page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Home, FileText, List, BarChart2, CalendarIcon, Clock, User, Plus, Save, Search, Info, ChevronDown, CheckCircle2, XCircle, HelpCircle, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { Textarea } from "@/components/ui/textarea" import { format } from "date-fns" import { ro } from "date-fns/locale" import { Progress } from "@/components/ui/progress" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" export default function ConcediiPage() { const [startDate, setStartDate] = useState() const [endDate, setEndDate] = useState() // Date utilizator const userData = { nume: "Ionescu Maria", departament: "IT & Development", zileConcediuTotal: 25, zileConcediuRamase: 18, zileConcediuFolosite: 7, } // Concediile utilizatorului const concedii = [ { id: 1, tip: "Concediu medical", dataInceput: new Date("2025-04-08"), dataSfarsit: new Date("2025-04-16"), status: "Aprobat", aprobatDe: "Popescu Alexandru", dataAprobarii: new Date("2025-04-01"), comentariu: "Recuperare după intervenție", }, { id: 2, tip: "Concediu odihnă", dataInceput: new Date("2025-05-10"), dataSfarsit: new Date("2025-05-20"), status: "În așteptare", comentariu: "Vacanță de vară", }, { id: 3, tip: "Zi liberă", dataInceput: new Date("2025-06-01"), dataSfarsit: new Date("2025-06-01"), status: "Respins", aprobatDe: "Popescu Alexandru", dataAprobarii: new Date("2025-05-25"), comentariu: "Zi personală", motivRespingere: "Lipsă personal în ziua respectivă", }, ] return (

{/* Sidebar - păstrăm meniul existent */}

Pagini

{/* Main content */}

Concediile mele

{/* Card cu informații despre zilele de concediu disponibile */}

Situația concediilor în {new Date().getFullYear()} Bună, {userData.nume} ({userData.departament})

Zile disponibile {userData.zileConcediuRamase} zile

Zile folosite {userData.zileConcediuFolosite} zile

Total anual {userData.zileConcediuTotal} zile

Concediile mele Solicită concediu

Istoricul concediilor

} />

Tip concediu Perioada Durată Status Detalii {concedii.map((concediu) => { const durataZile = Math.ceil( (concediu.dataSfarsit.getTime() - concediu.dataInceput.getTime()) / (1000 * 60 * 60 * 24), ) + 1 return ( {concediu.tip} {format(concediu.dataInceput, "dd MMM", { locale: ro })} -{" "} {format(concediu.dataSfarsit, "dd MMM yyyy", { locale: ro })} {durataZile} zile {concediu.status === "Aprobat" && } {concediu.status === "Respins" && } {concediu.status === "În așteptare" && } {concediu.status}

{concediu.tip}

{concediu.comentariu}

{concediu.status !== "În așteptare" && ( <>

{concediu.status} de {concediu.aprobatDe} la{" "} {format(concediu.dataAprobarii!, "dd MMM yyyy", { locale: ro })}

{concediu.motivRespingere && (

Motiv respingere: {concediu.motivRespingere}

)} )}

) })}

Solicită concediu nou Completează formularul pentru a solicita un nou concediu. Solicitarea va fi trimisă managerului pentru aprobare.

Tip concediu *

Data de început *

Data de sfârșit *

Motivul concediului

</div>

<div className="grid gap-2">
                        <label htmlFor="inlocuitor" className="text-sm font-medium">
                          Persoana care vă înlocuiește *
                        </label>
                        <Select>
                          <SelectTrigger id="inlocuitor">
                            <SelectValue placeholder="Selectează persoana" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="popescu">Popescu Ion</SelectItem>
                            <SelectItem value="georgescu">Georgescu Ana</SelectItem>
                            <SelectItem value="vasilescu">Vasilescu Dan</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="flex gap-2 mt-4">
                        <Button>
                          <Save className="h-4 w-4 mr-2" />
                          Trimite solicitarea
                        </Button>
                        <Button variant="outline">Anulează</Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="nomenclator-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Plus, Trash2, Menu } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"

export default function NomenclatorPage() {
  const [activeTab, setActiveTab] = useState("echipamente")

const echipamente = [
    { id: 1, nume: "QR go" },
    { id: 2, nume: "Nutrilab" },
    { id: 3, nume: "Monidrop" },
  ]

return (
    <div className="flex h-screen bg-white">
      {/* Sidebar - exact ca în imagine */}
      <div className="w-[175px] border-r flex flex-col">
        <div className="p-4 border-b flex items-center gap-2">
          <div className="bg-blue-600 text-white p-1.5 rounded">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
              <path d="M9 9h6M9 12h6M9 15h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
            </svg>
          </div>
          <div className="flex items-center justify-between flex-1">
            <h1 className="text-base font-medium">Pagini</h1>
            <Menu className="h-5 w-5 text-gray-500" />
          </div>
        </div>

<nav className="flex-1">
          <div className="py-2">
            <a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  fill="none"
                />
              </svg>
              <span>Acasă</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-blue-600 bg-blue-50 hover:bg-blue-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M9 9h6M9 12h6M9 15h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span>Nomenclatoare</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M3 3v18h18"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M18 9l-5-5-4 4-3 3"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <span>Analiză</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M16 2v4M8 2v4M3 10h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span>Calendar</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 8v4l3 3"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" fill="none" />
              </svg>
              <span>Concedii</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor" strokeWidth="2" />
              </svg>
              <span>Admin</span>
            </a>
          </div>
        </nav>

<div className="mt-auto p-2 text-xs text-gray-500 border-t text-right">Powered by PowerSync</div>
      </div>

{/* Main Content */}
      <div className="flex-1 flex flex-col">
        <header className="p-4 border-b">
          <h1 className="text-xl font-semibold">Nomenclator</h1>
        </header>

<div className="flex-1 flex flex-col">
          <Tabs defaultValue="echipamente" className="w-full" onValueChange={setActiveTab}>
            <div className="border-b">
              <div className="px-4">
                <TabsList className="h-[40px] bg-transparent gap-2">
                  <TabsTrigger
                    value="echipamente"
                    className={`rounded-none border-b-2 ${
                      activeTab === "echipamente" ? "border-blue-600 text-blue-600" : "border-transparent"
                    } data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4`}
                  >
                    Echipamente
                  </TabsTrigger>
                  <TabsTrigger
                    value="orase"
                    className={`rounded-none border-b-2 ${
                      activeTab === "orase" ? "border-blue-600 text-blue-600" : "border-transparent"
                    } data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4`}
                  >
                    Orașe
                  </TabsTrigger>
                  <TabsTrigger
                    value="sectii"
                    className={`rounded-none border-b-2 ${
                      activeTab === "sectii" ? "border-blue-600 text-blue-600" : "border-transparent"
                    } data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4`}
                  >
                    Secții
                  </TabsTrigger>
                  <TabsTrigger
                    value="clienti"
                    className={`rounded-none border-b-2 ${
                      activeTab === "clienti" ? "border-blue-600 text-blue-600" : "border-transparent"
                    } data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4`}
                  >
                    Clienți
                  </TabsTrigger>
                </TabsList>
              </div>
            </div>

<TabsContent value="echipamente" className="flex-1 p-4 pt-0 mt-0">
              <div className="flex justify-between items-center py-4">
                <h2 className="text-lg font-medium">Echipamente</h2>
                <Button className="bg-blue-600 hover:bg-blue-700">
                  <Plus className="h-4 w-4 mr-2" />
                  Adaugă element
                </Button>
              </div>

<div className="border rounded-md overflow-hidden">
                {echipamente.map((item, index) => (
                  <div key={item.id}>
                    <div className="flex items-center justify-between p-4 hover:bg-gray-50">
                      <span>{item.nume}</span>
                      <Button variant="ghost" size="sm" className="text-red-500 hover:text-red-700 hover:bg-red-50">
                        <Trash2 size={18} />
                      </Button>
                    </div>
                    {index < echipamente.length - 1 && <Separator />}
                  </div>
                ))}
              </div>
            </TabsContent>

<TabsContent value="orase" className="flex-1 p-4">
              <div className="flex h-full items-center justify-center text-gray-500">
                Conținutul pentru Orașe va apărea aici
              </div>
            </TabsContent>

<TabsContent value="sectii" className="flex-1 p-4">
              <div className="flex h-full items-center justify-center text-gray-500">
                Conținutul pentru Secții va apărea aici
              </div>
            </TabsContent>

<TabsContent value="clienti" className="flex-1 p-4">
              <div className="flex h-full items-center justify-center text-gray-500">
                Conținutul pentru Clienți va apărea aici
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="vizite-medicale.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { CalendarIcon, Menu, Paperclip } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Textarea } from "@/components/ui/textarea"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { format } from "date-fns"

export default function ViziteMedicale() {
  const [selectedDate, setSelectedDate] = useState<Date>()
  const [selectedVisit, setSelectedVisit] = useState(2)

// Date pentru vizite
  const vizite = [
    {
      id: 2,
      data: new Date("2025-04-22"),
      oras: "Ploiești",
      client: "Client 2",
      sectia: "Terapie intensivă",
      echipamente: "0 Echipamente",
      status: "Finalizată",
      statusColor: "green",
    },
    {
      id: 3,
      data: new Date("2025-04-22"),
      oras: "Constanța",
      client: "Client 3",
      sectia: "Diabet",
      echipamente: "0 Echipamente",
      status: "Anulată",
      statusColor: "red",
    },
    {
      id: 1,
      data: new Date("2025-04-16"),
      oras: "București",
      client: "Client 1",
      sectia: "OG",
      echipamente: "1 Echipamente",
      status: "Inițializată",
      statusColor: "blue",
    },
  ]

// Detalii vizită selectată
  const vizitaSelectata = {
    id: 2,
    data: new Date("2025-04-22"),
    oras: "Ploiești",
    client: "Client 2",
    sectia: "Terapie intensivă",
    motivVizita: "test",
    persoanaDiscutie: "Client 2",
    functiePersoana: "test",
    echipamente: "0 Echipamente",
    status: "Finalizată",
    concluzii: "test",
    ziuaSaptamanii: "Miercuri",
  }

const handleSelectVisit = (id: number) => {
    setSelectedVisit(id)
  }

<nav className="flex-1">
          <div className="py-2">
            <a href="#" className="flex items-center gap-3 px-4 py-2 text-blue-600 bg-blue-50 hover:bg-blue-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  fill="none"
                />
              </svg>
              <span>Acasă</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M9 9h6M9 12h6M9 15h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span>Nomenclatoare</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M16 2v4M8 2v4M3 10h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span>Calendar</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 8v4l3 3"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" fill="none" />
              </svg>
              <span>Concedii</span>
            </a>
          </div>
        </nav>

<div className="mt-auto p-2 text-xs text-gray-500 border-t text-right">Powered by PowerSync</div>
      </div>

{/* Main Content */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <header className="bg-blue-600 text-white shadow-md">
          <div className="flex items-center h-14 px-4">
            <h1 className="text-lg font-medium">Vizite</h1>
            <div className="ml-auto flex items-center space-x-2">
              <Button variant="ghost" size="sm" className="text-white hover:bg-blue-700">
                Filtrare
              </Button>
              <Button variant="ghost" size="sm" className="text-white hover:bg-blue-700">
                Export
              </Button>
              <Button variant="ghost" size="sm" className="text-white hover:bg-blue-700">
                Salvează modificări
              </Button>
              <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="8" r="4" stroke="#888" strokeWidth="2" fill="none" />
                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="#888" strokeWidth="2" />
                </svg>
              </div>
            </div>
          </div>
        </header>

{/* Content */}
        <div className="flex-1 flex">
          {/* Left side - Table */}
          <div className="w-1/2 border-r overflow-auto">
            <Table>
              <TableHeader className="bg-gray-50 sticky top-0">
                <TableRow>
                  <TableHead className="font-medium">ID</TableHead>
                  <TableHead className="font-medium">Data</TableHead>
                  <TableHead className="font-medium">Oraș</TableHead>
                  <TableHead className="font-medium">Client</TableHead>
                  <TableHead className="font-medium">Secția</TableHead>
                  <TableHead className="font-medium">Echipament</TableHead>
                  <TableHead className="font-medium">Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {vizite.map((vizita) => (
                  <TableRow
                    key={vizita.id}
                    className={`cursor-pointer ${selectedVisit === vizita.id ? "bg-blue-50" : ""}`}
                    onClick={() => handleSelectVisit(vizita.id)}
                  >
                    <TableCell>{vizita.id}</TableCell>
                    <TableCell>{format(vizita.data, "dd/MM/yyyy")}</TableCell>
                    <TableCell>{vizita.oras}</TableCell>
                    <TableCell>{vizita.client}</TableCell>
                    <TableCell>{vizita.sectia}</TableCell>
                    <TableCell>{vizita.echipamente}</TableCell>
                    <TableCell>
                      <span
                        className={`px-2 py-1 rounded text-sm ${
                          vizita.status === "Finalizată"
                            ? "text-green-700"
                            : vizita.status === "Anulată"
                              ? "text-red-700"
                              : "text-blue-700"
                        }`}
                      >
                        {vizita.status}
                      </span>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

{/* Right side - Form */}
          <div className="w-1/2 p-4 overflow-auto">
            <div className="grid grid-cols-2 gap-x-6 gap-y-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Data</label>
                <Popover>
                  <PopoverTrigger asChild>
                    <Button variant="outline" className="w-full justify-start text-left font-normal">
                      <CalendarIcon className="mr-2 h-4 w-4" />
                      {selectedDate ? format(selectedDate, "dd/MM/yyyy") : format(vizitaSelectata.data, "dd/MM/yyyy")}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0">
                    <Calendar
                      mode="single"
                      selected={selectedDate || vizitaSelectata.data}
                      onSelect={setSelectedDate}
                      initialFocus
                    />
                  </PopoverContent>
                </Popover>
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Ziua săptămânii</label>
                <Input value={vizitaSelectata.ziuaSaptamanii} readOnly className="bg-gray-50" />
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Oraș</label>
                <Select defaultValue={vizitaSelectata.oras}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Ploiești">Ploiești</SelectItem>
                    <SelectItem value="București">București</SelectItem>
                    <SelectItem value="Constanța">Constanța</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Client</label>
                <Select defaultValue={vizitaSelectata.client}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Client 1">Client 1</SelectItem>
                    <SelectItem value="Client 2">Client 2</SelectItem>
                    <SelectItem value="Client 3">Client 3</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Secția</label>
                <Select defaultValue={vizitaSelectata.sectia}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Terapie intensivă">Terapie intensivă</SelectItem>
                    <SelectItem value="Diabet">Diabet</SelectItem>
                    <SelectItem value="OG">OG</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Motivul vizitei</label>
                <Input defaultValue={vizitaSelectata.motivVizita} />
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Nume persoana cu care s-a discutat</label>
                <Input defaultValue={vizitaSelectata.persoanaDiscutie} />
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Funcție persoana</label>
                <Input defaultValue={vizitaSelectata.functiePersoana} />
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Echipamente</label>
                <div className="bg-blue-500 text-white p-2 rounded text-center">{vizitaSelectata.echipamente} ⚙️</div>
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Status</label>
                <Select defaultValue={vizitaSelectata.status}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Finalizată">Finalizată</SelectItem>
                    <SelectItem value="Anulată">Anulată</SelectItem>
                    <SelectItem value="Inițializată">Inițializată</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="col-span-2 space-y-2">
                <label className="text-sm font-medium">Concluzii</label>
                <Textarea defaultValue={vizitaSelectata.concluzii} rows={3} />
              </div>

<div className="col-span-2 space-y-2">
                <label className="text-sm font-medium">Atașamente</label>
                <div className="border rounded-md p-4 bg-gray-50 flex flex-col items-center justify-center text-center">
                  <p className="text-gray-500 mb-2">There is nothing attached.</p>
                  <Button variant="outline" size="sm">
                    <Paperclip className="h-4 w-4 mr-2" />
                    Attach file
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="admin-page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { CalendarIcon, Menu, Paperclip, Search, Download, Save } from "lucide-react"

export default function AdminPage() {
  const [selectedDate, setSelectedDate] = useState<Date>()
  const [selectedVisit, setSelectedVisit] = useState(1)
  const [activeTab, setActiveTab] = useState("raport")

// Date pentru vizite
  const vizite = [
    {
      id: 1,
      data: new Date("2025-04-16"),
      agent: "Alex Lamba",
      oras: "București",
      client: "Client 1",
      sectia: "OG",
      status: "Inițializată",
      statusColor: "blue",
    },
    {
      id: 2,
      data: new Date("2025-04-22"),
      agent: "Alex Lamba",
      oras: "Ploiești",
      client: "Client 2",
      sectia: "Terapie intensivă",
      status: "Finalizată",
      statusColor: "green",
    },
    {
      id: 3,
      data: new Date("2025-04-22"),
      agent: "Alex Lamba",
      oras: "Constanța",
      client: "Client 3",
      sectia: "Diabet",
      status: "Anulată",
      statusColor: "red",
    },
  ]

// Detalii vizită selectată
  const vizitaSelectata = {
    id: 1,
    data: new Date("2025-04-16"),
    oras: "București",
    client: "Client 1",
    sectia: "OG",
    motivVizita: "Test",
    persoanaDiscutie: "Client 1",
    functiePersoana: "test",
    echipamente: "1 Echipamente",
    status: "Inițializată",
    concluzii: "test",
    ziuaSaptamanii: "Joi",
  }

const handleSelectVisit = (id: number) => {
    setSelectedVisit(id)
  }

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M9 9h6M9 12h6M9 15h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span>Nomenclatoare</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M16 2v4M8 2v4M3 10h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span>Calendar</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 8v4l3 3"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" fill="none" />
              </svg>
              <span>Concedii</span>
            </a>
          </div>
        </nav>

<div className="mt-auto p-2 text-xs text-gray-500 border-t text-right">Powered by PowerSync</div>
      </div>

{/* Main Content */}
      <div className="flex-1 flex flex-col">
        <Tabs defaultValue="raport" className="flex-1 flex flex-col" onValueChange={setActiveTab}>
          {/* Header */}
          <header className="bg-blue-600 text-white shadow-md">
            <div className="flex items-center h-14 px-4">
              <h1 className="text-lg font-medium mr-6">Acasă</h1>

{/* Tab Navigation în header */}
              <TabsList className="bg-transparent border-0">
                <TabsTrigger
                  value="raport"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Raport de activitate
                </TabsTrigger>
                <TabsTrigger
                  value="notificari"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Notificări
                </TabsTrigger>
                <TabsTrigger
                  value="calendar"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Calendar
                </TabsTrigger>
                <TabsTrigger
                  value="concedii"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Concedii
                </TabsTrigger>
              </TabsList>

<div className="ml-auto flex items-center space-x-2">
                <Button variant="ghost" size="sm" className="text-white hover:bg-blue-700">
                  Filtrare
                </Button>
                <Button variant="ghost" size="sm" className="text-white hover:bg-blue-700">
                  <Download className="h-4 w-4 mr-1" />
                  Export
                </Button>
                <Button variant="ghost" size="sm" className="text-white hover:bg-blue-700">
                  <Save className="h-4 w-4 mr-1" />
                  Salvează modificări
                </Button>
                <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="8" r="4" stroke="#888" strokeWidth="2" fill="none" />
                    <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="#888" strokeWidth="2" />
                  </svg>
                </div>
              </div>
            </div>
          </header>

{/* Spațiu pentru opțiuni specifice fiecărui tab */}
          <div className="border-b">
            <div className="px-4 py-2">
              {activeTab === "raport" && (
                <div className="flex items-center gap-4">
                  <div className="relative w-64">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
                    <Input placeholder="Caută vizite..." className="pl-10" />
                  </div>
                  <Select>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Filtru status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="toate">Toate statusurile</SelectItem>
                      <SelectItem value="initializata">Inițializată</SelectItem>
                      <SelectItem value="finalizata">Finalizată</SelectItem>
                      <SelectItem value="anulata">Anulată</SelectItem>
                    </SelectContent>
                  </Select>
                  <Select>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Filtru dată" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="toate">Toate datele</SelectItem>
                      <SelectItem value="azi">Astăzi</SelectItem>
                      <SelectItem value="saptamana">Această săptămână</SelectItem>
                      <SelectItem value="luna">Această lună</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}

{activeTab === "notificari" && (
                <div className="flex items-center gap-4">
                  <div className="relative w-64">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
                    <Input placeholder="Caută notificări..." className="pl-10" />
                  </div>
                  <Select>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Filtru tip" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="toate">Toate tipurile</SelectItem>
                      <SelectItem value="info">Informații</SelectItem>
                      <SelectItem value="succes">Succes</SelectItem>
                      <SelectItem value="eroare">Eroare</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}

{activeTab === "calendar" && (
                <div className="flex items-center gap-4">
                  <Button variant="outline" size="sm">
                    <CalendarIcon className="h-4 w-4 mr-2" />
                    Astăzi
                  </Button>
                  <Button variant="outline" size="sm">
                    Săptămână
                  </Button>
                  <Button variant="outline" size="sm">
                    Lună
                  </Button>
                  <Button variant="outline" size="sm">
                    An
                  </Button>
                </div>
              )}

{activeTab === "concedii" && (
                <div className="flex items-center gap-4">
                  <div className="relative w-64">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
                    <Input placeholder="Caută concedii..." className="pl-10" />
                  </div>
                  <Select>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Filtru status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="toate">Toate statusurile</SelectItem>
                      <SelectItem value="aprobat">Aprobat</SelectItem>
                      <SelectItem value="asteptare">În așteptare</SelectItem>
                      <SelectItem value="respins">Respins</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}
            </div>
          </div>

{/* Tab Content */}
          <TabsContent value="raport" className="p-0 m-0 flex-1">
            <div className="flex h-full">
              {/* Left side - Table */}
              <div className="w-1/2 border-r overflow-auto">
                <Table>
                  <TableHeader className="bg-gray-50 sticky top-0">
                    <TableRow>
                      <TableHead className="font-medium">ID</TableHead>
                      <TableHead className="font-medium">Data</TableHead>
                      <TableHead className="font-medium">Agent</TableHead>
                      <TableHead className="font-medium">Oraș</TableHead>
                      <TableHead className="font-medium">Client</TableHead>
                      <TableHead className="font-medium">Secția</TableHead>
                      <TableHead className="font-medium">Status</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {vizite.map((vizita) => (
                      <TableRow
                        key={vizita.id}
                        className={`cursor-pointer ${selectedVisit === vizita.id ? "bg-blue-50" : ""}`}
                        onClick={() => handleSelectVisit(vizita.id)}
                      >
                        <TableCell>{vizita.id}</TableCell>
                        <TableCell>{format(vizita.data, "dd/MM/yyyy")}</TableCell>
                        <TableCell>{vizita.agent}</TableCell>
                        <TableCell>{vizita.oras}</TableCell>
                        <TableCell>{vizita.client}</TableCell>
                        <TableCell>{vizita.sectia}</TableCell>
                        <TableCell>
                          <span
                            className={`px-2 py-1 rounded text-sm ${
                              vizita.status === "Finalizată"
                                ? "text-green-700"
                                : vizita.status === "Anulată"
                                  ? "text-red-700"
                                  : "text-blue-700"
                            }`}
                          >
                            {vizita.status}
                          </span>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

{/* Right side - Form */}
              <div className="w-1/2 p-4 overflow-auto">
                <div className="grid grid-cols-2 gap-x-6 gap-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Data</label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button variant="outline" className="w-full justify-start text-left font-normal">
                          <CalendarIcon className="mr-2 h-4 w-4" />
                          {selectedDate
                            ? format(selectedDate, "dd/MM/yyyy")
                            : format(vizitaSelectata.data, "dd/MM/yyyy")}
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0">
                        <Calendar
                          mode="single"
                          selected={selectedDate || vizitaSelectata.data}
                          onSelect={setSelectedDate}
                          initialFocus
                        />
                      </PopoverContent>
                    </Popover>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Ziua săptămânii</label>
                    <Input value={vizitaSelectata.ziuaSaptamanii} readOnly className="bg-gray-50" />
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Oraș</label>
                    <Select defaultValue={vizitaSelectata.oras}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="București">București</SelectItem>
                        <SelectItem value="Ploiești">Ploiești</SelectItem>
                        <SelectItem value="Constanța">Constanța</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Client</label>
                    <Select defaultValue={vizitaSelectata.client}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Client 1">Client 1</SelectItem>
                        <SelectItem value="Client 2">Client 2</SelectItem>
                        <SelectItem value="Client 3">Client 3</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Secția</label>
                    <Select defaultValue={vizitaSelectata.sectia}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="OG">OG</SelectItem>
                        <SelectItem value="Terapie intensivă">Terapie intensivă</SelectItem>
                        <SelectItem value="Diabet">Diabet</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Motivul vizitei</label>
                    <Input defaultValue={vizitaSelectata.motivVizita} />
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Nume persoana cu care s-a discutat</label>
                    <Input defaultValue={vizitaSelectata.persoanaDiscutie} />
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Funcție persoana</label>
                    <Input defaultValue={vizitaSelectata.functiePersoana} />
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Echipamente</label>
                    <div className="bg-blue-500 text-white p-2 rounded text-center">
                      {vizitaSelectata.echipamente} ⚙️
                    </div>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Status</label>
                    <Select defaultValue={vizitaSelectata.status}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Inițializată">Inițializată</SelectItem>
                        <SelectItem value="Finalizată">Finalizată</SelectItem>
                        <SelectItem value="Anulată">Anulată</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="col-span-2 space-y-2">
                    <label className="text-sm font-medium">Concluzii</label>
                    <Textarea defaultValue={vizitaSelectata.concluzii} rows={3} />
                  </div>

<div className="col-span-2 space-y-2">
                    <label className="text-sm font-medium">Atașamente</label>
                    <div className="border rounded-md p-4 bg-gray-50 flex flex-col items-center justify-center text-center">
                      <p className="text-gray-500 mb-2">There is nothing attached.</p>
                      <Button variant="outline" size="sm">
                        <Paperclip className="h-4 w-4 mr-2" />
                        Attach file
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="notificari" className="p-0 m-0 flex-1">
            <div className="p-4">
              <div className="bg-white rounded-lg shadow p-6">
                <h2 className="text-xl font-semibold mb-4">Notificări</h2>
                <div className="space-y-4">
                  <div className="p-3 border rounded-md bg-blue-50 border-blue-200">
                    <div className="flex justify-between">
                      <h3 className="font-medium">Vizită nouă programată</h3>
                      <span className="text-sm text-gray-500">Acum 2 ore</span>
                    </div>
                    <p className="text-sm mt-1">
                      O nouă vizită a fost programată pentru Client 4 pe data de 28/04/2025.
                    </p>
                  </div>

<div className="p-3 border rounded-md bg-green-50 border-green-200">
                    <div className="flex justify-between">
                      <h3 className="font-medium">Vizită finalizată</h3>
                      <span className="text-sm text-gray-500">Ieri</span>
                    </div>
                    <p className="text-sm mt-1">Vizita pentru Client 2 a fost marcată ca finalizată.</p>
                  </div>

<div className="p-3 border rounded-md bg-red-50 border-red-200">
                    <div className="flex justify-between">
                      <h3 className="font-medium">Vizită anulată</h3>
                      <span className="text-sm text-gray-500">23/04/2025</span>
                    </div>
                    <p className="text-sm mt-1">Vizita pentru Client 3 a fost anulată.</p>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="calendar" className="p-0 m-0 flex-1">
            <div className="p-4">
              <div className="bg-white rounded-lg shadow">
                <div className="p-4 border-b">
                  <h2 className="text-xl font-semibold">Calendar vizite</h2>
                </div>
                <div className="p-6">
                  <div className="grid grid-cols-7 gap-1">
                    {["L", "M", "M", "J", "V", "S", "D"].map((day, i) => (
                      <div key={i} className="text-center font-medium p-2">
                        {day}
                      </div>
                    ))}
                    {Array.from({ length: 35 }).map((_, i) => {
                      const isToday = i === 15
                      const hasEvent = [4, 10, 15, 22].includes(i)
                      return (
                        <div
                          key={i}
                          className={`p-2 border rounded-md min-h-[80px] ${isToday ? "bg-blue-50 border-blue-300" : ""}`}
                        >
                          <div className="text-right text-sm text-gray-500">{i + 1}</div>
                          {hasEvent && (
                            <div className="mt-1 p-1 text-xs bg-blue-100 rounded text-blue-800">
                              Vizită Client {Math.floor(Math.random() * 3) + 1}
                            </div>
                          )}
                        </div>
                      )
                    })}
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="concedii" className="p-0 m-0 flex-1">
            <div className="p-4">
              <div className="bg-white rounded-lg shadow">
                <div className="p-4 border-b">
                  <h2 className="text-xl font-semibold">Concedii</h2>
                </div>
                <div className="p-6">
                  <div className="mb-6">
                    <h3 className="text-lg font-medium mb-3">Concedii active</h3>
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Angajat</TableHead>
                          <TableHead>Tip concediu</TableHead>
                          <TableHead>Data început</TableHead>
                          <TableHead>Data sfârșit</TableHead>
                          <TableHead>Status</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        <TableRow>
                          <TableCell>Popescu Maria</TableCell>
                          <TableCell>Concediu odihnă</TableCell>
                          <TableCell>15/04/2025</TableCell>
                          <TableCell>25/04/2025</TableCell>
                          <TableCell>
                            <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Aprobat</span>
                          </TableCell>
                        </TableRow>
                        <TableRow>
                          <TableCell>Ionescu Dan</TableCell>
                          <TableCell>Concediu medical</TableCell>
                          <TableCell>20/04/2025</TableCell>
                          <TableCell>27/04/2025</TableCell>
                          <TableCell>
                            <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Aprobat</span>
                          </TableCell>
                        </TableRow>
                      </TableBody>
                    </Table>
                  </div>

<div>
                    <h3 className="text-lg font-medium mb-3">Cereri în așteptare</h3>
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Angajat</TableHead>
                          <TableHead>Tip concediu</TableHead>
                          <TableHead>Data început</TableHead>
                          <TableHead>Data sfârșit</TableHead>
                          <TableHead>Acțiuni</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        <TableRow>
                          <TableCell>Georgescu Ana</TableCell>
                          <TableCell>Concediu odihnă</TableCell>
                          <TableCell>01/05/2025</TableCell>
                          <TableCell>10/05/2025</TableCell>
                          <TableCell>
                            <div className="flex gap-2">
                              <Button
                                size="sm"
                                variant="outline"
                                className="h-8 px-2 text-green-600 border-green-600 hover:bg-green-50"
                              >
                                Aprobă
                              </Button>
                              <Button
                                size="sm"
                                variant="outline"
                                className="h-8 px-2 text-red-600 border-red-600 hover:bg-red-50"
                              >
                                Respinge
                              </Button>
                            </div>
                          </TableCell>
                        </TableRow>
                      </TableBody>
                    </Table>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="notificari-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Bell, CalendarIcon, Menu, Plus, User, X, Mail, Clock, AlertCircle } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { Badge } from "@/components/ui/badge"
import { format } from "date-fns"

export default function NotificariPage() {
  const [agents, setAgents] = useState([{ id: 1, email: "cursant.cosmin@usol.ro" }])

const [intervals, setIntervals] = useState([{ id: 1, start: new Date("2025-04-14"), end: new Date("2025-04-17") }])

const [newAgent, setNewAgent] = useState("")
  const [startDate, setStartDate] = useState<Date>()
  const [endDate, setEndDate] = useState<Date>()

const handleAddAgent = () => {
    if (newAgent) {
      setAgents([...agents, { id: Date.now(), email: newAgent }])
      setNewAgent("")
    }
  }

const handleAddInterval = () => {
    if (startDate && endDate) {
      setIntervals([...intervals, { id: Date.now(), start: startDate, end: endDate }])
      setStartDate(undefined)
      setEndDate(undefined)
    }
  }

const handleRemoveAgent = (id: number) => {
    setAgents(agents.filter((agent) => agent.id !== id))
  }

const handleRemoveInterval = (id: number) => {
    setIntervals(intervals.filter((interval) => interval.id !== id))
  }

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M9 9h6M9 12h6M9 15h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span>Nomenclatoare</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                <path d="M16 2v4M8 2v4M3 10h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span>Calendar</span>
            </a>

<a href="#" className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 8v4l3 3"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" fill="none" />
              </svg>
              <span>Concedii</span>
            </a>
          </div>
        </nav>

<div className="mt-auto p-2 text-xs text-gray-500 border-t text-right">Powered by PowerSync</div>
      </div>

{/* Main Content */}
      <div className="flex-1 flex flex-col">
        <Tabs defaultValue="notificari" className="flex-1 flex flex-col">
          {/* Header */}
          <header className="bg-blue-600 text-white shadow-md">
            <div className="flex items-center h-14 px-4">
              <h1 className="text-lg font-medium mr-6">Acasă</h1>

{/* Tab Navigation în header */}
              <TabsList className="bg-transparent border-0">
                <TabsTrigger
                  value="admin"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Admin
                </TabsTrigger>
                <TabsTrigger
                  value="raport"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Raport de activitate
                </TabsTrigger>
                <TabsTrigger
                  value="notificari"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Notificări
                </TabsTrigger>
                <TabsTrigger
                  value="calendar"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Calendar
                </TabsTrigger>
                <TabsTrigger
                  value="concedii"
                  className="text-white data-[state=active]:bg-blue-700 data-[state=active]:text-white data-[state=active]:shadow-none h-10"
                >
                  Concedii
                </TabsTrigger>
              </TabsList>

{/* Tab Content */}
          <TabsContent value="notificari" className="p-0 m-0 flex-1 overflow-auto">
            <div className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Secțiunea Agenți */}
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="flex items-center">
                      <User className="h-5 w-5 mr-2" />
                      Agenți pentru notificări
                    </CardTitle>
                    <CardDescription>Adaugă agenți care vor primi notificări</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex gap-2 mb-4">
                      <div className="relative flex-1">
                        <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                        <Input
                          placeholder="Adaugă email agent"
                          className="pl-10"
                          value={newAgent}
                          onChange={(e) => setNewAgent(e.target.value)}
                        />
                      </div>
                      <Button onClick={handleAddAgent}>
                        <Plus className="h-4 w-4 mr-2" />
                        Adaugă
                      </Button>
                    </div>

<div className="space-y-3">
                      {agents.map((agent) => (
                        <div
                          key={agent.id}
                          className="flex items-center justify-between p-3 bg-gray-50 rounded-md border"
                        >
                          <div className="flex items-center">
                            <Mail className="h-4 w-4 mr-2 text-blue-600" />
                            <span>{agent.email}</span>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
                            onClick={() => handleRemoveAgent(agent.id)}
                          >
                            <X className="h-4 w-4" />
                            <span className="sr-only">Șterge agent</span>
                          </Button>
                        </div>
                      ))}

{agents.length === 0 && (
                        <div className="text-center py-6 text-gray-500">
                          <AlertCircle className="h-12 w-12 mx-auto mb-2 text-gray-400" />
                          <p>Nu există agenți adăugați</p>
                          <p className="text-sm">Adaugă un agent pentru a primi notificări</p>
                        </div>
                      )}
                    </div>
                  </CardContent>
                </Card>

{/* Secțiunea Intervale de timp */}
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="flex items-center">
                      <Clock className="h-5 w-5 mr-2" />
                      Intervale de notificare
                    </CardTitle>
                    <CardDescription>Adaugă intervale de timp pentru notificări</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-3 mb-4">
                      <div>
                        <label className="text-sm font-medium mb-1 block">Data de început</label>
                        <Popover>
                          <PopoverTrigger asChild>
                            <Button variant="outline" className="w-full justify-start text-left font-normal">
                              <CalendarIcon className="mr-2 h-4 w-4" />
                              {startDate ? format(startDate, "dd/MM/yyyy") : <span>Selectează data</span>}
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            <Calendar mode="single" selected={startDate} onSelect={setStartDate} initialFocus />
                          </PopoverContent>
                        </Popover>
                      </div>

<div>
                        <label className="text-sm font-medium mb-1 block">Data de sfârșit</label>
                        <Popover>
                          <PopoverTrigger asChild>
                            <Button variant="outline" className="w-full justify-start text-left font-normal">
                              <CalendarIcon className="mr-2 h-4 w-4" />
                              {endDate ? format(endDate, "dd/MM/yyyy") : <span>Selectează data</span>}
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            <Calendar mode="single" selected={endDate} onSelect={setEndDate} initialFocus />
                          </PopoverContent>
                        </Popover>
                      </div>

<div className="col-span-2">
                        <Button className="w-full" onClick={handleAddInterval}>
                          <Plus className="h-4 w-4 mr-2" />
                          Adaugă interval
                        </Button>
                      </div>
                    </div>

<div className="space-y-3">
                      {intervals.map((interval) => (
                        <div
                          key={interval.id}
                          className="flex items-center justify-between p-3 bg-gray-50 rounded-md border"
                        >
                          <div className="flex items-center">
                            <CalendarIcon className="h-4 w-4 mr-2 text-blue-600" />
                            <span>
                              {format(interval.start, "dd/MM/yyyy")} — {format(interval.end, "dd/MM/yyyy")}
                            </span>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
                            onClick={() => handleRemoveInterval(interval.id)}
                          >
                            <X className="h-4 w-4" />
                            <span className="sr-only">Șterge interval</span>
                          </Button>
                        </div>
                      ))}

{intervals.length === 0 && (
                        <div className="text-center py-6 text-gray-500">
                          <Clock className="h-12 w-12 mx-auto mb-2 text-gray-400" />
                          <p>Nu există intervale adăugate</p>
                          <p className="text-sm">Adaugă un interval pentru notificări</p>
                        </div>
                      )}
                    </div>
                  </CardContent>
                </Card>

{/* Secțiunea Configurare notificări */}
                <Card className="md:col-span-2">
                  <CardHeader className="pb-3">
                    <CardTitle className="flex items-center">
                      <Bell className="h-5 w-5 mr-2" />
                      Configurare notificări
                    </CardTitle>
                    <CardDescription>Setări pentru tipurile de notificări trimise</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-4">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Badge variant="outline" className="bg-blue-50 text-blue-700 hover:bg-blue-50">
                              Vizite
                            </Badge>
                            <span>Notificări pentru vizite noi</span>
                          </div>
                          <Select defaultValue="email">
                            <SelectTrigger className="w-[140px]">
                              <SelectValue placeholder="Selectează" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="email">Email</SelectItem>
                              <SelectItem value="sms">SMS</SelectItem>
                              <SelectItem value="ambele">Ambele</SelectItem>
                              <SelectItem value="dezactivat">Dezactivat</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

<div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Badge variant="outline" className="bg-green-50 text-green-700 hover:bg-green-50">
                              Concedii
                            </Badge>
                            <span>Notificări pentru concedii</span>
                          </div>
                          <Select defaultValue="email">
                            <SelectTrigger className="w-[140px]">
                              <SelectValue placeholder="Selectează" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="email">Email</SelectItem>
                              <SelectItem value="sms">SMS</SelectItem>
                              <SelectItem value="ambele">Ambele</SelectItem>
                              <SelectItem value="dezactivat">Dezactivat</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>

<div className="space-y-4">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Badge variant="outline" className="bg-orange-50 text-orange-700 hover:bg-orange-50">
                              Rapoarte
                            </Badge>
                            <span>Notificări pentru rapoarte</span>
                          </div>
                          <Select defaultValue="dezactivat">
                            <SelectTrigger className="w-[140px]">
                              <SelectValue placeholder="Selectează" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="email">Email</SelectItem>
                              <SelectItem value="sms">SMS</SelectItem>
                              <SelectItem value="ambele">Ambele</SelectItem>
                              <SelectItem value="dezactivat">Dezactivat</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

<div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Badge variant="outline" className="bg-purple-50 text-purple-700 hover:bg-purple-50">
                              Sistem
                            </Badge>
                            <span>Notificări de sistem</span>
                          </div>
                          <Select defaultValue="ambele">
                            <SelectTrigger className="w-[140px]">
                              <SelectValue placeholder="Selectează" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="email">Email</SelectItem>
                              <SelectItem value="sms">SMS</SelectItem>
                              <SelectItem value="ambele">Ambele</SelectItem>
                              <SelectItem value="dezactivat">Dezactivat</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

<TabsContent value="admin" className="p-0 m-0 flex-1">
            <div className="p-6">
              <div className="text-center py-12 text-gray-500">Conținutul pentru Admin va apărea aici</div>
            </div>
          </TabsContent>

<TabsContent value="raport" className="p-0 m-0 flex-1">
            <div className="p-6">
              <div className="text-center py-12 text-gray-500">
                Conținutul pentru Raport de activitate va apărea aici
              </div>
            </div>
          </TabsContent>

<TabsContent value="calendar" className="p-0 m-0 flex-1">
            <div className="p-6">
              <div className="text-center py-12 text-gray-500">Conținutul pentru Calendar va apărea aici</div>
            </div>
          </TabsContent>

<TabsContent value="concedii" className="p-0 m-0 flex-1">
            <div className="p-6">
              <div className="text-center py-12 text-gray-500">Conținutul pentru Concedii va apărea aici</div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="notificari-page-v2.tsx"
"use client"

import { useState } from "react"
import { Bell, CalendarIcon, Menu, Plus, User, X, Mail, Clock, AlertCircle, Trash2 } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { format } from "date-fns"

export default function NotificariPageV2() {
  const [agents, setAgents] = useState([
    { id: 1, email: "cursant.cosmin@usol.ro" },
    { id: 2, email: "alex.lamba@powersync.ro" },
    { id: 3, email: "cursant.ionut@usol.ro" },
  ])

const [intervals, setIntervals] = useState([
    { id: 1, start: new Date("2025-04-14"), end: new Date("2025-04-17") },
    { id: 2, start: new Date("2025-05-15"), end: new Date("2025-05-17") },
    { id: 3, start: new Date("2025-05-19"), end: new Date("2025-05-25") },
  ])