[V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isQuickEdit="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isQuickEdit="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return ( ) }) Textarea.displayName = "Textarea" export { Textarea } [V0_FILE]typescriptreact:file="app/improve-pension/page.tsx" isQuickEdit="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Landmark, ArrowUpRight, CheckCircle } from "lucide-react" export default function ImprovePensionPage() { return ( <div className="min-h-screen flex flex-col"> <main className="flex-1 py-12 bg-primary/5"> <div className="container mx-auto px-4"> <div className="text-center mb-12"> <h1 className="text-4xl font-bold mb-4">שפר את תנאי הפנסיה שלך</h1> <p className="text-lg text-muted-foreground max-w-2xl mx-auto"> מלא את הפרטים שלך ונחבר אותך לסוכן פנסיוני מוביל שיעזור לך לשפר את תנאי הפנסיה שלך </p> </div> <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto"> <Card> <CardHeader> <CardTitle>מלא את הפרטים שלך</CardTitle> <CardDescription>אנו נחזור אליך בהקדם עם הצעה מותאמת אישית</CardDescription> </CardHeader> <CardContent> <form className="space-y-4"> <div className="space-y-2"> <Label htmlFor="name">שם מלא</Label> <Input id="name" name="name" required /> </div> <div className="space-y-2"> <Label htmlFor="email">דוא"ל</Label> <Input id="email" name="email" type="email" required /> </div> <div className="space-y-2"> <Label htmlFor="phone">טלפון</Label> <Input id="phone" name="phone" required /> </div> <div className="space-y-2"> <Label htmlFor="age">גיל</Label> <Input id="age" name="age" type="number" required /> </div> <div className="space-y-2"> <Label htmlFor="current-pension">האם יש לך פנסיה כיום?</Label> <div className="flex gap-4"> <label className="flex items-center gap-2"> <input type="radio" name="current-pension" value="yes" /> <span>כן</span> </label> <label className="flex items-center gap-2"> <input type="radio" name="current-pension" value="no" /> <span>לא</span> </label> </div> </div> <div className="space-y-2"> <Label htmlFor="message">הערות נוספות</Label> <Textarea id="message" name="message" rows={4} /> </div> </form> </CardContent> <CardFooter> <Button type="submit" className="w-full"> שפר לי את התנאים! </Button> </CardFooter> </Card> <div className="space-y-6"> <Card> <CardHeader> <CardTitle>היתרונות שלנו</CardTitle> </CardHeader> <CardContent className="space-y-4"> <div className="flex items-start gap-3"> <div className="h-6 w-6 rounded-full bg-primary/20 flex items-center justify-center mt-0.5"> <CheckCircle className="h-3 w-3 text-primary" /> </div> <div> <div className="font-medium">התאמה אישית</div> <div className="text-muted-foreground">התאמה מדויקת לסוכן פנסיוני המתמחה בצרכים שלך</div> </div> </div> <div className="flex items-start gap-3"> <div className="h-6 w-6 rounded-full bg-primary/20 flex items-center justify-center mt-0.5"> <CheckCircle className="h-3 w-3 text-primary" /> </div> <div> <div className="font-medium">חיסכון בעלויות</div> <div className="text-muted-foreground">הפחתת דמי ניהול ועלויות נלוות</div> </div> </div> <div className="flex items-start gap-3"> <div className="h-6 w-6 rounded-full bg-primary/20 flex items-center justify-center mt-0.5"> <CheckCircle className="h-3 w-3 text-primary" /> </div> <div> <div className="font-medium">ליווי מקצועי</div> <div className="text-muted-foreground">ליווי אישי לאורך כל הדרך</div> </div> </div> <div className="flex items-start gap-3"> <div className="h-6 w-6 rounded-full bg-primary/20 flex items-center justify-center mt-0.5"> <CheckCircle className="h-3 w-3 text-primary" /> </div> <div> <div className="font-medium">שירות ללא עלות</div> <div className="text-muted-foreground">השירות ניתן ללא עלות מצדך</div> </div> </div> </CardContent> </Card> <Card> <CardHeader> <CardTitle>שאלות נפוצות</CardTitle> </CardHeader> <CardContent className="space-y-4"> <div> <h3 className="font-semibold mb-1">איך השירות עובד?</h3> <p className="text-sm text-muted-foreground"> אנו מחברים בינך לבין סוכן פנסיוני מוביל שיעזור לך לשפר את תנאי הפנסיה שלך. </p> </div> <div> <h3 className="font-semibold mb-1">האם השירות כרוך בתשלום?</h3> <p className="text-sm text-muted-foreground"> לא, השירות ניתן ללא עלות מצדך. אנו מקבלים עמלה מחברות הביטוח. </p> </div> <div> <h3 className="font-semibold mb-1">כמה זמן לוקח התהליך?</h3> <p className="text-sm text-muted-foreground"> סוכן פנסיוני יצור איתך קשר תוך 24 שעות מרגע מילוי הטופס. </p> </div> <div className="text-center mt-4"> <Link href="/faq" className="text-primary hover:underline inline-flex items-center"> לכל השאלות הנפוצות <ArrowUpRight className="h-4 w-4 mr-1" /> </Link> </div> </CardContent> </Card> </div> </div> </div> </main> <footer className="bg-muted/30 border-t py-8"> <div className="container mx-auto px-4 text-center"> <div className="flex items-center justify-center gap-2 mb-4"> <Landmark className="h-6 w-6 text-primary" /> <span className="text-xl font-bold">גורו פנסיוני</span> </div> <p className="text-muted-foreground text-sm"> © {new Date().getFullYear()} גורו פנסיוני. כל הזכויות שמורות. </p> </div> </footer> </div> ) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isQuickEdit="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> { asChild?: boolean } const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( <Comp className={cn(buttonVariants({ variant, size, className }), "flex justify-center items-center")} ref={ref} {...props} /> ) }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]png:file="public/images/dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-05-10%20172610-pOydHTGaR9R0dNcqEh6K60Nl0PtuNt.png" [V0_FILE]png:file="public/images/food-delivery.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-05-10%20172727-9BbP5F8eld64K0aGl1RVL7yzGnzkCz.png" [V0_FILE]typescriptreact:file="components/ui/slider.tsx" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef<typeof SliderPrimitive.Root>, React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> >(({ className, ...props }, ref) => ( <SliderPrimitive.Root ref={ref} className={cn("relative flex w-full touch-none select-none items-center", className)} {...props} > <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-gray-200"> <SliderPrimitive.Range className="absolute h-full bg-blue-500" /> </SliderPrimitive.Track> <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-blue-500 bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" /> </SliderPrimitive.Root> )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef<typeof DialogPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> >(({ className, ...props }, ref) => ( <DialogPrimitive.Overlay ref={ref} className={cn( "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className, )} {...props} /> )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef<typeof DialogPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> >(({ className, children, ...props }, ref) => ( <DialogPortal> <DialogOverlay /> <DialogPrimitive.Content ref={ref} className={cn( "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className, )} {...props} > {children} </DialogPrimitive.Content> </DialogPortal> )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( <div className={cn("flex flex-col space-y-1.5 text-center sm:text-right", className)} {...props} /> ) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 sm:space-x-reverse", className)} {...props} /> ) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> >(({ className, ...props }, ref) => ( <DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} /> )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef<typeof DialogPrimitive.Description>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> >(({ className, ...props }, ref) => ( <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} /> )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" "use client" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from "lucide-react" import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef< React.ElementRef<typeof RadioGroupPrimitive.Root>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> >(({ className, ...props }, ref) => { return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} /> }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef<typeof RadioGroupPrimitive.Item>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> >(({ className, ...props }, ref) => { return ( <RadioGroupPrimitive.Item ref={ref} className={cn( "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className, )} {...props} > <RadioGroupPrimitive.Indicator className="flex items-center justify-center"> <Circle className="h-2.5 w-2.5 fill-current text-current" /> </RadioGroupPrimitive.Indicator> </RadioGroupPrimitive.Item> ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef<typeof ProgressPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> >(({ className, value, ...props }, ref) => ( <ProgressPrimitive.Root ref={ref} className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...props} > <ProgressPrimitive.Indicator className="h-full w-full flex-1 bg-blue-600 transition-all" style={{ transform: `translateX(-${100 - (value || 0)}%)` }} /> </ProgressPrimitive.Root> )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/select.tsx" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> >(({ className, children, ...props }, ref) => ( <SelectPrimitive.Trigger ref={ref} className={cn( "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className, )} {...props} > {children} <SelectPrimitive.Icon asChild> <ChevronDown className="h-4 w-4 opacity-50" /> </SelectPrimitive.Icon> </SelectPrimitive.Trigger> )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectContent = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Content>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> >(({ className, children, position = "popper", ...props }, ref) => ( <SelectPrimitive.Portal> <SelectPrimitive.Content ref={ref} className={cn( "relative z-50 max-h-[300px] min-w-[8rem] overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className, )} position={position} {...props} > <SelectPrimitive.Viewport className={cn( "p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", )} > {children} </SelectPrimitive.Viewport> </SelectPrimitive.Content> </SelectPrimitive.Portal> )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Label>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> >(({ className, ...props }, ref) => ( <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} /> )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Item>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> >(({ className, children, ...props }, ref) => ( <SelectPrimitive.Item ref={ref} className={cn( "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-blue-50 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-blue-50 transition-colors", className, )} {...props} > <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <SelectPrimitive.ItemIndicator> <Check className="h-4 w-4" /> </SelectPrimitive.ItemIndicator> </span> <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> </SelectPrimitive.Item> )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> >(({ className, ...props }, ref) => ( <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator } [V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isQuickEdit="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef<typeof TooltipPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> >(({ className, sideOffset = 4, ...props }, ref) => ( <TooltipPrimitive.Portal> <TooltipPrimitive.Content ref={ref} sideOffset={sideOffset} className={cn( "z-50 overflow-hidden rounded-md border bg-white px-3 py-2 text-sm text-gray-800 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} /> </TooltipPrimitive.Portal> )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isQuickEdit="true" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( <DropdownMenuPrimitive.SubTrigger ref={ref} className={cn( "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", inset && "pl-8", className, )} {...props} > {children} <ChevronRight className="ml-auto h-4 w-4" /> </DropdownMenuPrimitive.SubTrigger> )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> >(({ className, ...props }, ref) => ( <DropdownMenuPrimitive.SubContent ref={ref} className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} /> )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> >(({ className, sideOffset = 4, ...props }, ref) => ( <DropdownMenuPrimitive.Portal> <DropdownMenuPrimitive.Content ref={ref} sideOffset={sideOffset} className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} /> </DropdownMenuPrimitive.Portal> )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Item>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( <DropdownMenuPrimitive.Item ref={ref} className={cn( "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className, )} {...props} /> )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> >(({ className, children, checked, ...props }, ref) => ( <DropdownMenuPrimitive.CheckboxItem ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className, )} checked={checked} {...props} > <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <DropdownMenuPrimitive.ItemIndicator> <Check className="h-4 w-4" /> </DropdownMenuPrimitive.ItemIndicator> </span> {children} </DropdownMenuPrimitive.CheckboxItem> )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> >(({ className, children, ...props }, ref) => ( <DropdownMenuPrimitive.RadioItem ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className, )} {...props} > <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <DropdownMenuPrimitive.ItemIndicator> <Circle className="h-2 w-2 fill-current" /> </DropdownMenuPrimitive.ItemIndicator> </span> {children} </DropdownMenuPrimitive.RadioItem> )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Label>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( <DropdownMenuPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props} /> )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> >(({ className, ...props }, ref) => ( <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => { return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} /> } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .fixed-header { @apply fixed top-0 left-0 right-0 z-50 bg-white border-b; } @keyframes float { 0% { transform: translateY(0px) rotate(6deg); } 50% { transform: translateY(-10px) rotate(6deg); } 100% { transform: translateY(0px) rotate(6deg); } } .animate-float { animation: float 6s ease-in-out infinite; } [V0_FILE]typescriptreact:file="tailwind.config.js" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isQuickEdit="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return <NextThemesProvider {...props}>{children}</NextThemesProvider> } [V0_FILE]typescriptreact:file="lib/pension-types.ts" isQuickEdit="true" // This file now contains only pension-related types // You can add any pension-specific types here as needed [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Heebo } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import Header from "@/components/header" const heebo = Heebo({ subsets: ["hebrew", "latin"] }) export const metadata: Metadata = { title: "גורו פנסיוני - ייעוץ והכוונה פנסיונית", description: "חיבור בין לקוחות פרטיים לסוכני פנסיה מובילים", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( <html lang="he" dir="rtl"> <body className={heebo.className}> <ThemeProvider attribute="class" defaultTheme="light" disableTransitionOnChange> <Header /> <div className="pt-16">{children}</div> </ThemeProvider> </body> </html> ) } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef<typeof AccordionPrimitive.Item>, React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> >(({ className, ...props }, ref) => ( <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} /> )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef<typeof AccordionPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> >(({ className, children, ...props }, ref) => ( <AccordionPrimitive.Header className="flex"> <AccordionPrimitive.Trigger ref={ref} className={cn( "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className, )} {...props} > {children} <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" /> </AccordionPrimitive.Trigger> </AccordionPrimitive.Header> )) AccordionTrigger.displayName = "AccordionTrigger" const AccordionContent = React.forwardRef< React.ElementRef<typeof AccordionPrimitive.Content>, React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> >(({ className, children, ...props }, ref) => ( <AccordionPrimitive.Content ref={ref} className={cn( "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", className, )} {...props} > <div className="pb-4 pt-0">{children}</div> </AccordionPrimitive.Content> )) AccordionContent.displayName = "AccordionContent" export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef<typeof CheckboxPrimitive.Root>, React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> >(({ className, ...props }, ref) => ( <CheckboxPrimitive.Root ref={ref} className={cn( "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className, )} {...props} > <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}> <Check className="h-3.5 w-3.5" /> </CheckboxPrimitive.Indicator> </CheckboxPrimitive.Root> )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" "use client" import type * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { he } from "date-fns/locale" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps<typeof DayPicker> function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( <DayPicker showOutsideDays={showOutsideDays} className={cn("p-3", className)} locale={he} classNames={{ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: cn( buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100", ), nav_button_previous: "absolute right-1", nav_button_next: "absolute left-1", table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-r-md last:[&:has([aria-selected])]:rounded-l-md focus-within:relative focus-within:z-20", day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"), day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible", ...classNames, }} components={{ IconLeft: ({ ...props }) => <ChevronRight className="h-4 w-4" />, IconRight: ({ ...props }) => <ChevronLeft className="h-4 w-4" />, }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="components/ui/popover.tsx" "use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef<typeof PopoverPrimitive.Content>, React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( <PopoverPrimitive.Portal> <PopoverPrimitive.Content ref={ref} align={align} sideOffset={sideOffset} className={cn( "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} /> </PopoverPrimitive.Portal> )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } [V0_FILE]typescriptreact:file="components/agent-dashboard/offer-notification.tsx" "use client" import { useState } from "react" import { AlertTriangle } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" interface OfferNotificationProps { expiringOffers: { id: string title: string expiryDate: string daysRemaining: number }[] } export default function OfferNotification({ expiringOffers }: OfferNotificationProps) { const [isVisible, setIsVisible] = useState(true) if (!isVisible || expiringOffers.length === 0) { return null } return ( <Card className="mb-6 border-yellow-200 bg-yellow-50"> <CardContent className="p-4"> <div className="flex items-start gap-4"> <div className="flex-shrink-0 mt-1"> <AlertTriangle className="h-5 w-5 text-yellow-500" /> </div> <div className="flex-grow"> <h3 className="text-base font-medium mb-2">הצעות שעומדות לפוג בקרוב</h3> <ul className="space-y-2"> {expiringOffers.map((offer) => ( <li key={offer.id} className="flex justify-between items-center"> <span> <span className="font-medium">{offer.title}</span> - פוקעת בתאריך{" "} {new Date(offer.expiryDate).toLocaleDateString("he-IL")} (בעוד {offer.daysRemaining} ימים) </span> <div className="flex gap-2"> <Button variant="outline" size="sm"> הארכת תוקף </Button> <Button variant="outline" size="sm"> ערוך </Button> </div> </li> ))} </ul> </div> <Button variant="ghost" size="sm" className="flex-shrink-0" onClick={() => setIsVisible(false)}> סגור </Button> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="app/agent-dashboard/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/agent-dashboard/view-offer-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import { formatDate } from "@/lib/utils" interface ViewOfferModalProps { isOpen: boolean onClose: () => void offer: any | null } export default function ViewOfferModal({ isOpen, onClose, offer }: ViewOfferModalProps) { if (!offer) return null // Helper function to get audience description const getAudienceDescription = (audience: string) => { return audience || "כל הקהלים" } // Helper function to get offer type in Hebrew const getOfferTypeHebrew = (type: string) => { switch (type) { case "pension": return "פנסיה" case "provident": return "גמל" case "investment": return "השתלמות" default: return type } } return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto" dir="rtl"> <DialogHeader> <DialogTitle className="text-xl font-bold">{offer.title}</DialogTitle> <DialogDescription> <Badge className="bg-green-100 text-green-800 hover:bg-green-100 mt-2">{offer.status}</Badge> <span className="mr-2 text-sm">סוג הצעה: {getOfferTypeHebrew(offer.type)}</span> </DialogDescription> </DialogHeader> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 py-4"> {/* Basic Offer Details /} <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">פרטי הצעה בסיסיים</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <p className="text-sm text-gray-500">כותרת ההצעה</p> <p className="font-medium">{offer.title}</p> </div> <div className="space-y-2"> <p className="text-sm text-gray-500">תיאור ההצעה</p> <p>{offer.description || "הצעה מיוחדת לחיסכון בדמי ניהול ושיפור התנאים הפנסיוניים."}</p> </div> <div className="space-y-2"> <p className="text-sm text-gray-500">עדכון אחרון</p> <p>{formatDate(offer.lastUpdate)}</p> </div> <div className="space-y-2"> <p className="text-sm text-gray-500">תוקף עד</p> <p>{formatDate(offer.endDate) || "ללא הגבלת זמן"}</p> </div> </div> {/ Offer Terms /} <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">תנאי ההצעה</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <p className="text-sm text-gray-500">דמי ניהול מצבירה</p> <p className="font-medium">{offer.managementFeeAccumulation}%</p> </div> <div className="space-y-2"> <p className="text-sm text-gray-500">דמי ניהול מהפקדה</p> <p className="font-medium">{offer.managementFeeDeposit}%</p> </div> <div className="space-y-2"> <p className="text-sm text-gray-500">חברה מנהלת</p> <p className="font-medium">{offer.managingCompany}</p> </div> <div className="space-y-2"> <p className="text-sm text-gray-500">קהל יעד</p> <p className="font-medium">{getAudienceDescription(offer.audience)}</p> </div> </div> </div> {/ Performance Statistics /} <div className="border-t pt-4 mt-4"> <div className="flex items-center mb-4"> <h3 className="text-lg font-semibold">סטטיסטיקות ביצועים</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="bg-gray-50 p-4 rounded-md"> <p className="text-sm text-gray-500">סה"כ צפיות</p> <p className="text-xl font-bold">{offer.views}</p> </div> <div className="bg-gray-50 p-4 rounded-md"> <p className="text-sm text-gray-500">יצירות קשר</p> <p className="text-xl font-bold">{offer.contacts}</p> </div> <div className="bg-gray-50 p-4 rounded-md"> <p className="text-sm text-gray-500">אחוז המרה</p> <p className="text-xl font-bold"> {offer.views > 0 ? Math.round((offer.contacts / offer.views) 100) : 0}% </p> </div> <div className="bg-gray-50 p-4 rounded-md"> <p className="text-sm text-gray-500">ימים פעילים</p> <p className="text-xl font-bold"> {offer.lastUpdate ? Math.max( 1, Math.round((new Date().getTime() - new Date(offer.lastUpdate).getTime()) / (1000 * 60 * 60 * 24)), ) : "-"} </p> </div> </div> </div> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/request-change-modal.tsx" "use client" import type React from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" interface RequestChangeModalProps { isOpen: boolean onClose: () => void field: string reason: string onReasonChange: (reason: string) => void onSubmit: () => void } export default function RequestChangeModal({ isOpen, onClose, field, reason, onReasonChange, onSubmit, }: RequestChangeModalProps) { const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit() } return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md" dir="rtl"> <DialogHeader> <DialogTitle>בקשת שינוי {field}</DialogTitle> </DialogHeader> <form onSubmit={handleSubmit}> <div className="space-y-4 py-4"> <div className="space-y-2"> <Label htmlFor="reason">סיבת הבקשה</Label> <Textarea id="reason" value={reason} onChange={(e) => onReasonChange(e.target.value)} placeholder="נא לפרט את סיבת הבקשה לשינוי" className="min-h-[100px]" required /> </div> </div> <DialogFooter> <Button type="button" variant="outline" onClick={onClose}> ביטול </Button> <Button type="submit">שלח בקשה</Button> </DialogFooter> </form> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/request-review-deletion-modal.tsx" "use client" import type React from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" interface RequestReviewDeletionModalProps { isOpen: boolean onClose: () => void reviewId: string | null reason: string onReasonChange: (reason: string) => void onSubmit: () => void } export default function RequestReviewDeletionModal({ isOpen, onClose, reviewId, reason, onReasonChange, onSubmit, }: RequestReviewDeletionModalProps) { const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit() } return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md" dir="rtl"> <DialogHeader> <DialogTitle>בקשת הסרת ביקורת</DialogTitle> </DialogHeader> <form onSubmit={handleSubmit}> <div className="space-y-4 py-4"> <div className="space-y-2"> <Label htmlFor="reason">סיבת הבקשה להסרת הביקורת</Label> <Textarea id="reason" value={reason} onChange={(e) => onReasonChange(e.target.value)} placeholder="נא לפרט את סיבת הבקשה להסרת הביקורת" className="min-h-[100px]" required /> <p className="text-xs text-gray-500"> בקשות להסרת ביקורות ייבחנו על ידי מנהל המערכת. שים לב כי רק ביקורות שמפרות את תנאי השימוש יוסרו. </p> </div> </div> <DialogFooter> <Button type="button" variant="outline" onClick={onClose}> ביטול </Button> <Button type="submit">שלח בקשה</Button> </DialogFooter> </form> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="app/admin-dashboard/loading.tsx" import { Skeleton } from "@/components/ui/skeleton" export default function Loading() { return ( <div className="flex min-h-screen bg-background"> {/* Sidebar skeleton /} <div className="hidden md:flex w-64 flex-col border-l bg-card p-4"> <div className="flex items-center gap-2 mb-8"> <Skeleton className="h-6 w-6 rounded-full" /> <Skeleton className="h-6 w-32" /> </div> <div className="space-y-2"> {Array(8) .fill(null) .map((_, i) => ( <Skeleton key={i} className="h-10 w-full" /> ))} </div> <div className="mt-auto pt-4 border-t"> <div className="flex items-center gap-2 mb-2"> <Skeleton className="w-8 h-8 rounded-full" /> <div> <Skeleton className="h-4 w-24 mb-1" /> <Skeleton className="h-3 w-32" /> </div> </div> <Skeleton className="h-8 w-full" /> </div> </div> {/ Main content skeleton /} <div className="flex-1 overflow-auto p-6"> <Skeleton className="h-8 w-64 mb-6" /> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> {Array(4) .fill(null) .map((_, i) => ( <div key={i} className="rounded-lg border bg-card p-6"> <Skeleton className="h-4 w-32 mb-4" /> <Skeleton className="h-8 w-16" /> </div> ))} </div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> {Array(2) .fill(null) .map((_, i) => ( <div key={i} className="rounded-lg border bg-card"> <div className="p-6"> <Skeleton className="h-6 w-48 mb-2" /> <Skeleton className="h-4 w-32" /> </div> <Skeleton className="h-80 w-full" /> </div> ))} </div> <div className="rounded-lg border bg-card"> <div className="p-6"> <Skeleton className="h-6 w-48 mb-2" /> <Skeleton className="h-4 w-32 mb-4" /> <div className="space-y-2"> {Array(5) .fill(null) .map((_, i) => ( <Skeleton key={i} className="h-12 w-full" /> ))} </div> </div> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true" "use client" import { Area, AreaChart, Bar, BarChart, CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts" export { Area, AreaChart, Bar, BarChart, CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } [V0_FILE]typescriptreact:file="components/pension-form/employment-details-form.tsx" isQuickEdit="true" "use client" import type React from "react" import type { FormData } from "./pension-form-modal" import { useState } from "react" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { InfoTooltip } from "./info-tooltip" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface EmploymentDetailsFormProps { formData: FormData updateFormData: (data: Partial<FormData>) => void onNext: () => void onBack: () => void } export function EmploymentDetailsForm({ formData, updateFormData, onNext, onBack }: EmploymentDetailsFormProps) { const [errors, setErrors] = useState<Record<string, string>>({}) const validateForm = () => { const newErrors: Record<string, string> = {} if (!formData.workField) { newErrors.workField = "נא לבחור תחום עבודה" } if (!formData.monthlySalary) { newErrors.monthlySalary = "נא לבחור טווח שכר" } if (!formData.monthlyContribution) { newErrors.monthlyContribution = "נא לבחור טווח הפרשה" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onNext() } } const workFields = [ { value: "tech", label: "הייטק / טכנולוגיה" }, { value: "finance", label: "פיננסים / בנקאות" }, { value: "education", label: "חינוך / הוראה" }, { value: "health", label: "בריאות / רפואה" }, { value: "law", label: "משפטים" }, { value: "sales", label: "מכירות / שיווק" }, { value: "service", label: "שירות לקוחות" }, { value: "manufacturing", label: "תעשייה / ייצור" }, { value: "construction", label: "בנייה / נדל״ן" }, { value: "government", label: "ממשלה / ציבורי" }, { value: "freelance", label: "עצמאי / פרילנסר" }, { value: "other", label: "אחר" }, ] const salaryRanges = [ { value: "0-5000", label: "עד 5,000 ₪" }, { value: "5001-7500", label: "5,001 - 7,500 ₪" }, { value: "7501-10000", label: "7,501 - 10,000 ₪" }, { value: "10001-15000", label: "10,001 - 15,000 ₪" }, { value: "15001-20000", label: "15,001 - 20,000 ₪" }, { value: "20001-30000", label: "20,001 - 30,000 ₪" }, { value: "30001-50000", label: "30,001 - 50,000 ₪" }, { value: "50001+", label: "מעל 50,000 ₪" }, ] const contributionRanges = [ { value: "0-500", label: "עד 500 ₪" }, { value: "501-1000", label: "501 - 1,000 ₪" }, { value: "1001-1500", label: "1,001 - 1,500 ₪" }, { value: "1501-2000", label: "1,501 - 2,000 ₪" }, { value: "2001-3000", label: "2,001 - 3,000 ₪" }, { value: "3001-5000", label: "3,001 - 5,000 ₪" }, { value: "5001+", label: "מעל 5,000 ₪" }, ] return ( <form onSubmit={handleSubmit}> <div className="space-y-6"> <div className="text-center mb-6"> <h2 className="text-2xl font-bold text-gray-900">פרטי תעסוקה</h2> <p className="text-gray-500 mt-1">המידע התעסוקתי שלך יעזור לנו להתאים את הפתרון הפנסיוני המיטבי עבורך</p> </div> <div className="space-y-4"> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="workField" className="font-medium"> תחום העבודה שלי </Label> <InfoTooltip content="תחום העבודה שלך יכול להשפיע על סוג הפנסיה המתאים לך" dataSource="בחר את התחום המתאים ביותר לעיסוק הנוכחי שלך" /> </div> <div className="relative"> <Select value={formData.workField} onValueChange={(value) => updateFormData({ workField: value })}> <SelectTrigger id="workField" className={`${errors.workField ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר תחום עבודה" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {workFields.map((field) => ( <SelectItem key={field.value} value={field.value}> {field.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.workField && <p className="text-red-500 text-sm">{errors.workField}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="monthlySalary" className="font-medium"> משכורת חודשית ברוטו </Label> <InfoTooltip content="המשכורת החודשית ברוטו משפיעה על גובה ההפקדות לפנסיה ועל החיסכון הצפוי" dataSource="ניתן למצוא את המשכורת ברוטו בתלוש השכר האחרון שלך, בסעיף 'שכר ברוטו'" /> </div> <div className="relative"> <Select value={formData.monthlySalary} onValueChange={(value) => updateFormData({ monthlySalary: value })} > <SelectTrigger id="monthlySalary" className={`${errors.monthlySalary ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר טווח שכר" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {salaryRanges.map((range) => ( <SelectItem key={range.value} value={range.value}> {range.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.monthlySalary && <p className="text-red-500 text-sm">{errors.monthlySalary}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="monthlyContribution" className="font-medium"> סכום ההפרשה החודשי שלי לקרן הפנסיה </Label> <InfoTooltip content="סכום ההפרשה החודשי כולל את הפרשות העובד והמעסיק" dataSource="ניתן למצוא את סכום ההפרשה החודשי בתלוש השכר שלך, בסעיף 'הפרשות לפנסיה', או בדיווח החודשי מחברת הפנסיה" /> </div> <div className="relative"> <Select value={formData.monthlyContribution} onValueChange={(value) => updateFormData({ monthlyContribution: value })} > <SelectTrigger id="monthlyContribution" className={`${errors.monthlyContribution ? "border-red-500" : ""}`} > <SelectValue placeholder="בחר טווח הפרשה" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {contributionRanges.map((range) => ( <SelectItem key={range.value} value={range.value}> {range.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.monthlyContribution && <p className="text-red-500 text-sm">{errors.monthlyContribution}</p>} </div> </div> <div className="pt-4 flex gap-3"> <Button type="button" variant="outline" onClick={onBack} className="flex-1 flex items-center justify-center gap-2" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700 flex items-center justify-center gap-2"> המשך לשלב הבא <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m9 18 6-6-6-6" /> </svg> </Button> </div> </div> </form> ) } [V0_FILE]typescriptreact:file="components/pension-form/google-signup.tsx" isQuickEdit="true" "use client" import type { FormData } from "./pension-form-modal" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Check, Lock } from "lucide-react" interface GoogleSignupProps { formData: FormData onSubmit: () => void onBack: () => void } export function GoogleSignup({ formData, onSubmit, onBack }: GoogleSignupProps) { return ( <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-1"> <div className="text-center mb-4"> <h2 className="text-xl font-bold text-gray-900">כמעט סיימנו!</h2> <p className="text-gray-500 mt-1 text-sm"> כדי לשמור את הנתונים שלך ולהמשיך בתהליך, אנא התחבר באמצעות חשבון Google </p> </div> <Card className="bg-green-50 border-green-200"> <CardContent className="p-3"> <div className="space-y-2"> <div className="flex items-start gap-2"> <Check className="h-4 w-4 text-green-500 mt-0.5" /> <div> <p className="font-medium text-sm">הנתונים שלך מוכנים</p> <p className="text-xs text-gray-600">כל המידע שהזנת נשמר ומוכן לעיבוד</p> </div> </div> <div className="flex items-start gap-2"> <Check className="h-4 w-4 text-green-500 mt-0.5" /> <div> <p className="font-medium text-sm">ניתוח אישי הושלם</p> <p className="text-xs text-gray-600">ניתחנו את המצב הפנסיוני שלך והכנו המלצות מותאמות אישית</p> </div> </div> <div className="flex items-start gap-2"> <Check className="h-4 w-4 text-green-500 mt-0.5" /> <div> <p className="font-medium text-sm">הצעד הבא: חיבור לסוכן פנסיוני</p> <p className="text-xs text-gray-600"> לאחר ההתחברות, נחבר אותך לסוכן פנסיוני מוביל שיעזור לך לשפר את התנאים שלך </p> </div> </div> </div> </CardContent> </Card> <div className="flex items-center gap-2 text-xs text-gray-500 justify-center"> <Lock className="h-3 w-3" /> <span>המידע שלך מאובטח ולא יועבר לצדדים שלישיים ללא הסכמתך</span> </div> <div className="pt-4 flex flex-col gap-3"> <Button onClick={onSubmit} className="w-full bg-green-600 hover:bg-green-700 text-white flex items-center justify-center gap-2 py-4" > סיום והתחברות <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <path d="M5 12h14" /> <path d="m12 5 7 7-7 7" /> </svg> </Button> <Button type="button" variant="outline" onClick={onBack} className="flex items-center justify-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> <div className="mt-4 flex items-center justify-center gap-2"> <span className="text-sm text-gray-500">או</span> </div> <Button onClick={onSubmit} className="w-full bg-white hover:bg-gray-50 text-gray-800 border border-gray-300 flex items-center justify-center gap-2 py-4" > <svg width="18" height="18" viewBox="0 0 24 24"> <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" /> <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" /> <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" /> <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" /> </svg> התחברות עם Google </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/email-registration.tsx" isQuickEdit="true" "use client" import type React from "react" import type { FormData } from "./pension-form-modal" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Check, Lock, Mail } from "lucide-react" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" interface EmailRegistrationProps { formData: FormData updateFormData: (data: Partial<FormData>) => void onSubmit: () => void onBack: () => void } export function EmailRegistration({ formData, updateFormData, onSubmit, onBack }: EmailRegistrationProps) { const [errors, setErrors] = useState<Record<string, string>>({}) const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const validateForm = () => { const newErrors: Record<string, string> = {} if (!formData.email || !formData.email.includes("@") || !formData.email.includes(".")) { newErrors.email = "נא להזין כתובת אימייל תקינה" } if (!password || password.length < 8) { newErrors.password = "הסיסמה חייבת להכיל לפחות 8 תווים" } if (password !== confirmPassword) { newErrors.confirmPassword = "הסיסמאות אינן תואמות" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onSubmit() } } return ( <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-1"> <div className="text-center mb-4"> <h2 className="text-xl font-bold text-gray-900">כמעט סיימנו!</h2> <p className="text-gray-500 mt-1 text-sm">כדי לשמור את הנתונים שלך ולהמשיך בתהליך, אנא צור חשבון</p> </div> <Card className="bg-green-50 border-green-200"> <CardContent className="p-3"> <div className="space-y-2"> <div className="flex items-start gap-2"> <Check className="h-4 w-4 text-green-500 mt-0.5" /> <div> <p className="font-medium text-sm">הנתונים שלך נשמרו</p> <p className="text-xs text-gray-600">כל המידע שהזנת נשמר במערכת</p> </div> </div> <div className="flex items-start gap-2"> <Check className="h-4 w-4 text-green-500 mt-0.5" /> <div> <p className="font-medium text-sm">ניתוח השוואתי הושלם</p> <p className="text-xs text-gray-600">ניתחנו את המצב הפנסיוני שלך בהשוואה למשתמשים אחרים באתר</p> </div> </div> <div className="flex items-start gap-2"> <Check className="h-4 w-4 text-green-500 mt-0.5" /> <div> <p className="font-medium text-sm">לוח מודעות פנסיוני</p> <p className="text-xs text-gray-600"> האתר משמש כלוח מודעות בלבד ואינו מספק שיווק פנסיוני או ייעוץ. סוכנים מורשים יוכלו להציג הצעות באתר בהתאם להעדפותיך. </p> </div> </div> </div> </CardContent> </Card> <form onSubmit={handleSubmit} className="space-y-4 mt-4"> <div className="space-y-2"> <Label htmlFor="email">כתובת אימייל</Label> <Input id="email" type="email" value={formData.email} onChange={(e) => updateFormData({ email: e.target.value })} placeholder="your.email@example.com" className={errors.email ? "border-red-500" : ""} dir="ltr" /> {errors.email && <p className="text-red-500 text-sm">{errors.email}</p>} </div> <div className="space-y-2"> <Label htmlFor="password">סיסמה</Label> <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="הזן סיסמה (לפחות 8 תווים)" className={errors.password ? "border-red-500" : ""} /> {errors.password && <p className="text-red-500 text-sm">{errors.password}</p>} </div> <div className="space-y-2"> <Label htmlFor="confirmPassword">אימות סיסמה</Label> <Input id="confirmPassword" type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="הזן את הסיסמה שוב" className={errors.confirmPassword ? "border-red-500" : ""} /> {errors.confirmPassword && <p className="text-red-500 text-sm">{errors.confirmPassword}</p>} </div> <div className="flex items-center gap-2 text-xs text-gray-500 justify-center mt-4"> <Lock className="h-3 w-3" /> <span>המידע שלך מאובטח ולא יועבר לצדדים שלישיים ללא הסכמתך</span> </div> <div className="pt-4 flex flex-col gap-3"> <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center gap-2 py-4" > סיום והרשמה <Mail className="h-4 w-4" /> </Button> <Button type="button" variant="outline" onClick={onBack} className="flex items-center justify-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> </div> </form> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/product-selection-form.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { InfoTooltip } from "./info-tooltip" import type { FormData } from "./pension-form-modal" interface ProductSelectionFormProps { formData: FormData onNext: () => void updateFormData: (data: Partial<FormData>) => void } export function ProductSelectionForm({ formData, onNext, updateFormData }: ProductSelectionFormProps) { const [error, setError] = useState<string | null>(null) const handleProductChange = (product: string, checked: boolean) => { const updatedProducts = checked ? [...formData.selectedProducts, product] : formData.selectedProducts.filter((p) => p !== product) updateFormData({ selectedProducts: updatedProducts }) setError(null) } const handleNext = () => { if (formData.selectedProducts.length === 0) { setError("אנא בחר לפחות מוצר אחד") return } onNext() } return ( <div className="space-y-4 max-h-[65vh] overflow-y-auto pr-1"> <div className="text-center mb-4"> <h2 className="text-2xl font-bold text-gray-900">בחר את המוצרים הפנסיוניים בעבורם תרצה לקבל הצעה</h2> <p className="text-gray-500 mt-1">בחר את המוצרים הפנסיוניים שברשותך או שאתה מעוניין לקבל עבורם הצעה</p> </div> <div className="grid gap-3"> <Card className="border-2 hover:border-blue-500 transition-colors"> <CardContent className="p-4"> <div className="flex items-start space-x-3 space-x-reverse"> <Checkbox id="pension" checked={formData.selectedProducts.includes("pension")} onCheckedChange={(checked) => handleProductChange("pension", checked === true)} className="mt-1" /> <div className="flex-1"> <div className="flex items-center justify-between"> <label htmlFor="pension" className="text-lg font-medium cursor-pointer"> קרן פנסיה </label> <InfoTooltip content="קרן פנסיה היא תכנית חיסכון ארוכת טווח המיועדת לתקופת הפרישה. היא מספקת קצבה חודשית לאחר הפרישה, וכוללת גם כיסויים ביטוחיים למקרה של אובדן כושר עבודה או מוות." /> </div> <p className="text-gray-500 text-sm mt-1"> חיסכון פנסיוני המספק קצבה חודשית לאחר הפרישה וכיסויים ביטוחיים </p> </div> </div> </CardContent> </Card> <Card className="border-2 hover:border-blue-500 transition-colors"> <CardContent className="p-4"> <div className="flex items-start space-x-3 space-x-reverse"> <Checkbox id="provident" checked={formData.selectedProducts.includes("provident")} onCheckedChange={(checked) => handleProductChange("provident", checked === true)} className="mt-1" /> <div className="flex-1"> <div className="flex items-center justify-between"> <label htmlFor="provident" className="text-lg font-medium cursor-pointer"> קופת גמל </label> <InfoTooltip content="קופת גמל היא מכשיר חיסכון לטווח ארוך המאפשר משיכת כספים כסכום הוני (חד פעמי) או כקצבה חודשית. הכספים בקופת הגמל נהנים מהטבות מס משמעותיות." /> </div> <p className="text-gray-500 text-sm mt-1"> חיסכון לטווח ארוך עם אפשרות למשיכה הונית או כקצבה והטבות מס </p> </div> </div> </CardContent> </Card> <Card className="border-2 hover:border-blue-500 transition-colors"> <CardContent className="p-4"> <div className="flex items-start space-x-3 space-x-reverse"> <Checkbox id="study" checked={formData.selectedProducts.includes("study")} onCheckedChange={(checked) => handleProductChange("study", checked === true)} className="mt-1" /> <div className="flex-1"> <div className="flex items-center justify-between"> <label htmlFor="study" className="text-lg font-medium cursor-pointer"> קרן השתלמות </label> <InfoTooltip content="קרן השתלמות היא מכשיר חיסכון לטווח בינוני (6 שנים) הנהנה מפטור ממס רווחי הון. לאחר 6 שנים ניתן למשוך את הכספים לכל מטרה ללא תשלום מס." /> </div> <p className="text-gray-500 text-sm mt-1">חיסכון לטווח בינוני (6 שנים) עם פטור ממס רווחי הון</p> </div> </div> </CardContent> </Card> </div> {error && <p className="text-red-500 text-center mt-2">{error}</p>} <div className="pt-4"> <Button onClick={handleNext} className="w-full bg-blue-600 hover:bg-blue-700"> המשך </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/info-tooltip.tsx" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { InfoIcon } from "lucide-react" interface InfoTooltipProps { content: string } export function InfoTooltip({ content }: InfoTooltipProps) { const [isVisible, setIsVisible] = useState(false) const tooltipRef = useRef<HTMLDivElement>(null) const triggerRef = useRef<HTMLDivElement>(null) // Position the tooltip to ensure it stays within viewport boundaries const positionTooltip = () => { if (!tooltipRef.current || !triggerRef.current) return const tooltip = tooltipRef.current const trigger = triggerRef.current const triggerRect = trigger.getBoundingClientRect() // Reset position to default tooltip.style.left = "auto" tooltip.style.right = "auto" tooltip.style.top = "auto" tooltip.style.bottom = "auto" // Get tooltip dimensions after reset const tooltipRect = tooltip.getBoundingClientRect() // Check if tooltip would go off-screen to the left if (triggerRect.left < tooltipRect.width / 2) { tooltip.style.left = "0px" tooltip.style.right = "auto" } // Check if tooltip would go off-screen to the right else if (triggerRect.right + tooltipRect.width / 2 > window.innerWidth) { tooltip.style.right = "0px" tooltip.style.left = "auto" } // Default positioning (centered above trigger) else { const leftPosition = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2 tooltip.style.left = `${leftPosition}px` tooltip.style.right = "auto" } // Check if tooltip would go off-screen to the top if (triggerRect.top - tooltipRect.height < 0) { tooltip.style.top = `${triggerRect.bottom + 5}px` tooltip.style.bottom = "auto" } else { tooltip.style.top = `${triggerRect.top - tooltipRect.height - 5}px` tooltip.style.bottom = "auto" } } useEffect(() => { // Add event listeners for window resize and scroll const handleResize = () => { if (isVisible) { positionTooltip() } } window.addEventListener("resize", handleResize) window.addEventListener("scroll", handleResize) return () => { window.removeEventListener("resize", handleResize) window.removeEventListener("scroll", handleResize) } }, [isVisible]) const showTooltip = () => { setIsVisible(true) // Position the tooltip after it becomes visible setTimeout(positionTooltip, 0) } const hideTooltip = () => { setIsVisible(false) } return ( <div className="relative inline-block" dir="rtl"> <div ref={triggerRef} className="cursor-help text-gray-500 hover:text-gray-700 transition-colors" onMouseEnter={showTooltip} onMouseLeave={hideTooltip} onFocus={showTooltip} onBlur={hideTooltip} > <InfoIcon className="h-4 w-4" /> </div> {isVisible && ( <div ref={tooltipRef} className="absolute z-50 w-64 p-2 text-sm bg-white border border-gray-200 rounded-md shadow-lg text-right" style={{ bottom: "100%", marginBottom: "5px" }} > {content} <div className="absolute w-2 h-2 bg-white border-b border-r border-gray-200 transform rotate-45" style={{ bottom: "-5px", right: "calc(50% - 4px)" }} ></div> </div> )} </div> ) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" "use client" import { Landmark, Mail, MapPin } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function ContactPage() { return ( <div className="min-h-screen flex flex-col"> <main className="flex-1 py-12 bg-primary/5"> <div className="container mx-auto px-4"> <div className="text-center mb-8"> <h1 className="text-3xl font-bold mb-3">צרו קשר</h1> <p className="text-muted-foreground max-w-xl mx-auto"> צוות המומחים שלנו זמין לענות על כל שאלה ולסייע בכל נושא </p> </div> <div className="max-w-2xl mx-auto"> <Card className="shadow-md"> <CardHeader className="text-center pb-0"> <CardTitle className="text-xl">פרטי התקשרות</CardTitle> </CardHeader> <CardContent className="pt-4"> <div className="grid gap-4 md:grid-cols-2"> <div className="flex flex-col items-center p-4 rounded-lg text-center"> <div className="h-10 w-10 bg-primary/10 rounded-full flex items-center justify-center mb-3"> <Mail className="h-5 w-5 text-primary" /> </div> <h3 className="font-medium mb-1">דוא"ל</h3> <a href="mailto:info@guru-pensioni.co.il" className="text-primary hover:underline"> info@guru-pensioni.co.il </a> </div> <div className="flex flex-col items-center p-4 rounded-lg text-center"> <div className="h-10 w-10 bg-primary/10 rounded-full flex items-center justify-center mb-3"> <MapPin className="h-5 w-5 text-primary" /> </div> <h3 className="font-medium mb-1">כתובת</h3> <p className="text-sm text-muted-foreground">רחוב רוטשילד 123, תל אביב</p> </div> </div> </CardContent> </Card> </div> </div> </main> <footer className="bg-muted/30 border-t py-6"> <div className="container mx-auto px-4 text-center"> <div className="flex items-center justify-center gap-2 mb-2"> <Landmark className="h-5 w-5 text-primary" /> <span className="text-lg font-bold">גורו פנסיוני</span> </div> <p className="text-muted-foreground text-xs"> © {new Date().getFullYear()} גורו פנסיוני. כל הזכויות שמורות. </p> </div> </footer> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/edit-offer-modal.tsx" isFixed="true" isQuickEdit="true" "use client" import type React from "react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { BasicOfferDetails } from "./edit-offer-modal/basic-offer-details" import { OfferTerms } from "./edit-offer-modal/offer-terms" import { TargetAudience } from "./edit-offer-modal/target-audience" import { OfferExpiration } from "./edit-offer-modal/offer-expiration" import { TermsAgreement } from "./edit-offer-modal/terms-agreement" import { useEditOfferForm } from "./edit-offer-modal/use-edit-offer-form" interface EditOfferModalProps { isOpen: boolean onClose: () => void onSave: (offerData: any, originalId: string) => void offer: any } export default function EditOfferModal({ isOpen, onClose, onSave, offer }: EditOfferModalProps) { const { formData, errors, handleInputChange, handleTargetAudienceChange, handleToggleEndDate, validateForm } = useEditOfferForm(offer) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onSave(formData, offer.id) } } return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto" dir="rtl"> <form onSubmit={handleSubmit}> <DialogHeader> <DialogTitle className="text-xl font-bold">עריכת הצעה</DialogTitle> <DialogDescription>עדכן את פרטי ההצעה שתוצג ללקוחות פוטנציאליים.</DialogDescription> </DialogHeader> <div className="grid grid-cols-1 gap-5 py-4"> <BasicOfferDetails formData={formData} errors={errors} onInputChange={handleInputChange} /> <OfferTerms formData={formData} errors={errors} onInputChange={handleInputChange} /> <TargetAudience formData={formData} errors={errors} onTargetAudienceChange={handleTargetAudienceChange} /> <OfferExpiration formData={formData} errors={errors} onToggleEndDate={handleToggleEndDate} onInputChange={handleInputChange} /> <TermsAgreement formData={formData} errors={errors} onInputChange={handleInputChange} /> </div> <DialogFooter className="flex justify-between mt-6"> <Button type="button" variant="outline" onClick={onClose}> בטל </Button> <Button type="submit">עדכן הצעה</Button> </DialogFooter> </form> </DialogContent> </Dialog> ) } [V0_FILE]typescript:file="components/agent-dashboard/edit-offer-modal/types.ts" // Refactored from: components/agent-dashboard/edit-offer-modal.tsx // Type definitions for edit offer modal export type OfferType = "pension" | "provident" | "investment" export type AgeRange = "any" | "20-30" | "30-40" | "40-50" | "50-60" | "60+" export type Sector = "any" | "hitech" | "education" | "finance" | "healthcare" | "industry" | "other" export type AmountRange = "any" | "0-50000" | "50000-100000" | "100000-250000" | "250000-500000" | "500000+" export type ManagingCompany = | "מגדל" | "הראל" | "מנורה" | "כלל" | "הפניקס" | "אלטשולר שחם" | "פסגות" | "אחר" | "כל החברות" export interface EditOfferFormData { title: string type: OfferType managementFeeAccumulation: number managementFeeDeposit: number managingCompany: ManagingCompany otherManagingCompany: string targetAudience: { ageRanges: AgeRange[] sectors: Sector[] amountRanges: AmountRange[] currentManagingCompanies: ManagingCompany[] otherCurrentManagingCompany: string } endDate: Date | null description: string hasEndDate: boolean termsAgreed: boolean } [V0_FILE]typescript:file="components/agent-dashboard/edit-offer-modal/constants.ts" // Refactored from: components/agent-dashboard/edit-offer-modal.tsx // Constants and options for edit offer modal import type { AgeRange, Sector, AmountRange, ManagingCompany } from "./types" export const ageRanges: { value: AgeRange; label: string }[] = [ { value: "any", label: "כל הגילאים" }, { value: "20-30", label: "20-30" }, { value: "30-40", label: "30-40" }, { value: "40-50", label: "40-50" }, { value: "50-60", label: "50-60" }, { value: "60+", label: "60+" }, ] export const sectors: { value: Sector; label: string }[] = [ { value: "any", label: "כל הסקטורים" }, { value: "hitech", label: "הייטק" }, { value: "education", label: "חינוך" }, { value: "finance", label: "פיננסים" }, { value: "healthcare", label: "רפואה" }, { value: "industry", label: "תעשייה" }, { value: "other", label: "אחר" }, ] export const amountRanges: { value: AmountRange; label: string }[] = [ { value: "any", label: "כל הסכומים" }, { value: "0-50000", label: "עד 50,000 ₪" }, { value: "50000-100000", label: "50,000 ₪ - 100,000 ₪" }, { value: "100000-250000", label: "100,000 ₪ - 250,000 ₪" }, { value: "250000-500000", label: "250,000 ₪ - 500,000 ₪" }, { value: "500000+", label: "מעל 500,000 ₪" }, ] export const managingCompanies: { value: ManagingCompany; label: string }[] = [ { value: "מגדל", label: "מגדל" }, { value: "הראל", label: "הראל" }, { value: "מנורה", label: "מנורה" }, { value: "כלל", label: "כלל" }, { value: "הפניקס", label: "הפניקס" }, { value: "אלטשולר שחם", label: "אלטשולר שחם" }, { value: "פסגות", label: "פסגות" }, { value: "אחר", label: "אחר" }, ] export const currentManagingCompanies: { value: ManagingCompany; label: string }[] = [ { value: "כל החברות", label: "כל החברות" }, ...managingCompanies, ] [V0_FILE]typescript:file="components/agent-dashboard/edit-offer-modal/use-edit-offer-form.ts" "use client" // Refactored from: components/agent-dashboard/edit-offer-modal.tsx // Custom hook for managing edit offer form state and validation import { useState, useEffect } from "react" import type { EditOfferFormData } from "./types" export function useEditOfferForm(offer: any) { const [formData, setFormData] = useState<EditOfferFormData>({ title: "", type: "pension", managementFeeAccumulation: 0.25, managementFeeDeposit: 2, managingCompany: "מגדל", otherManagingCompany: "", targetAudience: { ageRanges: ["any"], sectors: ["any"], amountRanges: ["any"], currentManagingCompanies: ["מגדל"], otherCurrentManagingCompany: "", }, endDate: null, description: "", hasEndDate: false, termsAgreed: true, }) const [errors, setErrors] = useState<Record<string, string>>({}) useEffect(() => { if (offer) { setFormData({ title: offer.title || "", type: offer.type || "pension", managementFeeAccumulation: offer.managementFeeAccumulation || 0.25, managementFeeDeposit: offer.managementFeeDeposit || 2, managingCompany: offer.managingCompany || "מגדל", otherManagingCompany: offer.otherManagingCompany || "", targetAudience: { ageRanges: offer.targetAudience?.ageRanges || ["any"], sectors: offer.targetAudience?.sectors || ["any"], amountRanges: offer.targetAudience?.amountRanges || ["any"], currentManagingCompanies: offer.targetAudience?.currentManagingCompanies || ["מגדל"], otherCurrentManagingCompany: offer.targetAudience?.otherCurrentManagingCompany || "", }, endDate: offer.endDate ? new Date(offer.endDate) : null, description: offer.description || "", hasEndDate: !!offer.endDate, termsAgreed: true, }) } }, [offer]) const handleInputChange = (field: string, value: any) => { const fieldPath = field.includes(".") ? field.split(".") : [field] setFormData((prev) => { const newData = { ...prev } if (fieldPath.length === 1) { newData[fieldPath[0]] = value } else if (fieldPath.length === 2) { newData[fieldPath[0]] = { ...newData[fieldPath[0]], [fieldPath[1]]: value, } } return newData }) if (errors[field]) { setErrors((prev) => { const newErrors = { ...prev } delete newErrors[field] return newErrors }) } } const handleTargetAudienceChange = (field: keyof typeof formData.targetAudience, value: any, checked?: boolean) => { if (Array.isArray(value)) { setFormData((prev) => ({ ...prev, targetAudience: { ...prev.targetAudience, [field]: value, }, })) } else if (checked !== undefined) { setFormData((prev) => { const currentValues = [...prev.targetAudience[field]] if (checked) { if (!currentValues.includes(value)) { if (value === "any" || value === "כל החברות") { return { ...prev, targetAudience: { ...prev.targetAudience, [field]: [value], }, } } else { const filteredValues = currentValues.filter((v) => v !== "any" && v !== "כל החברות") return { ...prev, targetAudience: { ...prev.targetAudience, [field]: [...filteredValues, value], }, } } } } else { const filteredValues = currentValues.filter((v) => v !== value) if (filteredValues.length === 0) { return { ...prev, targetAudience: { ...prev.targetAudience, [field]: field === "currentManagingCompanies" ? ["כל החברות"] : ["any"], }, } } return { ...prev, targetAudience: { ...prev.targetAudience, [field]: filteredValues, }, } } return prev }) } } const handleToggleEndDate = (checked: boolean) => { setFormData((prev) => ({ ...prev, hasEndDate: checked, endDate: checked ? prev.endDate || new Date(Date.now() + 30 24 * 60 * 60 * 1000) : null, })) } const validateForm = () => { const newErrors: Record<string, string> = {} if (!formData.title.trim()) { newErrors.title = "יש להזין כותרת להצעה" } if (formData.managementFeeAccumulation < 0 || formData.managementFeeAccumulation > 2) { newErrors.managementFeeAccumulation = "דמי ניהול מצבירה חייבים להיות בין 0% ל-2%" } if (formData.managementFeeDeposit < 0 || formData.managementFeeDeposit > 6) { newErrors.managementFeeDeposit = "דמי ניהול מהפקדה חייבים להיות בין 0% ל-6%" } if (!formData.managingCompany) { newErrors.managingCompany = "יש לבחור חברה מנהלת" } if ( formData.managingCompany === "אחר" && (!formData.otherManagingCompany || !formData.otherManagingCompany.trim()) ) { newErrors.otherManagingCompany = "יש להזין שם חברה מנהלת" } if (formData.hasEndDate && !formData.endDate) { newErrors.endDate = "יש לבחור תאריך סיום" } if (formData.targetAudience.currentManagingCompanies.length === 0) { newErrors.currentManagingCompanies = "יש לבחור לפחות חברה מנהלת נוכחית אחת" } if ( formData.targetAudience.currentManagingCompanies.includes("אחר") && (!formData.targetAudience.otherCurrentManagingCompany || !formData.targetAudience.otherCurrentManagingCompany.trim()) ) { newErrors.otherCurrentManagingCompany = "יש להזין שם חברה מנהלת נוכחית" } if (!formData.description.trim()) { newErrors.description = "יש להזין תיאור להצעה" } if (!formData.termsAgreed) { newErrors.termsAgreed = "יש לאשר את תנאי ההצעה" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } return { formData, errors, handleInputChange, handleTargetAudienceChange, handleToggleEndDate, validateForm, } } [V0_FILE]typescriptreact:file="components/agent-dashboard/edit-offer-modal/basic-offer-details.tsx" "use client" // Refactored from: components/agent-dashboard/edit-offer-modal.tsx // Basic offer details section component import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { EditOfferFormData } from "./types" interface BasicOfferDetailsProps { formData: EditOfferFormData errors: Record<string, string> onInputChange: (field: string, value: any) => void } export function BasicOfferDetails({ formData, errors, onInputChange }: BasicOfferDetailsProps) { return ( <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">פרטי הצעה בסיסיים</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <Label htmlFor="title" className="flex items-center"> כותרת ההצעה <span className="text-red-500 mr-1"></span> </Label> <Input id="title" value={formData.title} onChange={(e) => onInputChange("title", e.target.value)} placeholder="לדוגמה: חיסכון מקסימלי לפנסיה" required className={errors.title ? "border-red-500" : ""} /> {errors.title && <p className="text-red-500 text-sm">{errors.title}</p>} </div> <div className="space-y-2"> <Label htmlFor="type" className="flex items-center"> סוג הצעה <span className="text-red-500 mr-1"></span> </Label> <Select value={formData.type} onValueChange={(value) => onInputChange("type", value)}> <SelectTrigger id="type"> <SelectValue placeholder="בחר סוג הצעה" /> </SelectTrigger> <SelectContent> <SelectItem value="pension">פנסיה</SelectItem> <SelectItem value="provident">גמל</SelectItem> <SelectItem value="investment">השתלמות</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="description" className="flex items-center"> תיאור ההצעה <span className="text-red-500 mr-1"></span> </Label> <textarea id="description" className={`flex w-full rounded-md border ${ errors.description ? "border-red-500" : "border-input" } bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px]`} value={formData.description} onChange={(e) => onInputChange("description", e.target.value)} placeholder="תאר את ההצעה ואת היתרונות שלה..." required /> {errors.description && <p className="text-red-500 text-sm">{errors.description}</p>} </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/edit-offer-modal/offer-terms.tsx" "use client" // Refactored from: components/agent-dashboard/edit-offer-modal.tsx // Offer terms section component import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { managingCompanies } from "./constants" import type { EditOfferFormData } from "./types" interface OfferTermsProps { formData: EditOfferFormData errors: Record<string, string> onInputChange: (field: string, value: any) => void } export function OfferTerms({ formData, errors, onInputChange }: OfferTermsProps) { return ( <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">תנאי ההצעה</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="managementFeeAccumulation" className="flex items-center"> דמי ניהול מצבירה (%) <span className="text-red-500 mr-1"></span> </Label> </div> <div className="flex items-center"> <Input id="managementFeeAccumulation" type="number" step="0.01" min="0" max="2" value={formData.managementFeeAccumulation} onChange={(e) => onInputChange("managementFeeAccumulation", Number.parseFloat(e.target.value))} required className={errors.managementFeeAccumulation ? "border-red-500" : ""} /> <span className="mr-2">%</span> </div> {errors.managementFeeAccumulation && <p className="text-red-500 text-sm">{errors.managementFeeAccumulation}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="managementFeeDeposit" className="flex items-center"> דמי ניהול מהפקדה (%) <span className="text-red-500 mr-1"></span> </Label> </div> <div className="flex items-center"> <Input id="managementFeeDeposit" type="number" step="0.1" min="0" max="6" value={formData.managementFeeDeposit} onChange={(e) => onInputChange("managementFeeDeposit", Number.parseFloat(e.target.value))} required className={errors.managementFeeDeposit ? "border-red-500" : ""} /> <span className="mr-2">%</span> </div> {errors.managementFeeDeposit && <p className="text-red-500 text-sm">{errors.managementFeeDeposit}</p>} </div> <div className="space-y-2"> <Label htmlFor="managingCompany" className="flex items-center"> חברה מנהלת <span className="text-red-500 mr-1"></span> </Label> <Select value={formData.managingCompany} onValueChange={(value) => onInputChange("managingCompany", value)}> <SelectTrigger id="managingCompany" className={errors.managingCompany ? "border-red-500" : ""}> <SelectValue placeholder="בחר חברה מנהלת" /> </SelectTrigger> <SelectContent> {managingCompanies.map((company) => ( <SelectItem key={company.value} value={company.value}> {company.label} </SelectItem> ))} </SelectContent> </Select> {errors.managingCompany && <p className="text-red-500 text-sm">{errors.managingCompany}</p>} </div> {formData.managingCompany === "אחר" && ( <div className="space-y-2"> <Label htmlFor="otherManagingCompany" className="flex items-center"> שם חברה מנהלת אחרת <span className="text-red-500 mr-1"></span> </Label> <Input id="otherManagingCompany" value={formData.otherManagingCompany || ""} onChange={(e) => onInputChange("otherManagingCompany", e.target.value)} placeholder="הזן שם חברה מנהלת" className={errors.otherManagingCompany ? "border-red-500" : ""} /> {errors.otherManagingCompany && <p className="text-red-500 text-sm">{errors.otherManagingCompany}</p>} </div> )} </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/edit-offer-modal/target-audience.tsx" "use client" // Refactored from: components/agent-dashboard/edit-offer-modal.tsx // Target audience section component import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { ageRanges, sectors, amountRanges, currentManagingCompanies } from "./constants" import type { EditOfferFormData } from "./types" interface TargetAudienceProps { formData: EditOfferFormData errors: Record<string, string> onTargetAudienceChange: (field: keyof EditOfferFormData["targetAudience"], value: any, checked?: boolean) => void } export function TargetAudience({ formData, errors, onTargetAudienceChange }: TargetAudienceProps) { return ( <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">קהל יעד</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <Label>קבוצת גיל</Label> <div className="grid grid-cols-2 gap-2"> {ageRanges.map((age) => ( <div key={age.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`age-${age.value}`} checked={formData.targetAudience.ageRanges.includes(age.value)} onCheckedChange={(checked) => onTargetAudienceChange("ageRanges", age.value, checked as boolean)} /> <Label htmlFor={`age-${age.value}`} className="mr-2 cursor-pointer"> {age.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label>סקטור</Label> <div className="grid grid-cols-2 gap-2"> {sectors.map((sector) => ( <div key={sector.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`sector-${sector.value}`} checked={formData.targetAudience.sectors.includes(sector.value)} onCheckedChange={(checked) => onTargetAudienceChange("sectors", sector.value, checked as boolean)} /> <Label htmlFor={`sector-${sector.value}`} className="mr-2 cursor-pointer"> {sector.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label>סכום בקרן</Label> <div className="grid grid-cols-2 gap-2"> {amountRanges.map((amount) => ( <div key={amount.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`amount-${amount.value}`} checked={formData.targetAudience.amountRanges.includes(amount.value)} onCheckedChange={(checked) => onTargetAudienceChange("amountRanges", amount.value, checked as boolean)} /> <Label htmlFor={`amount-${amount.value}`} className="mr-2 cursor-pointer"> {amount.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label className="flex items-center"> חברה מנהלת נוכחית <span className="text-red-500 mr-1"></span> </Label> <div className="grid grid-cols-2 gap-2"> {currentManagingCompanies.map((company) => ( <div key={company.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`company-${company.value}`} checked={formData.targetAudience.currentManagingCompanies.includes(company.value)} onCheckedChange={(checked) => onTargetAudienceChange("currentManagingCompanies", company.value, checked as boolean) } /> <Label htmlFor={`company-${company.value}`} className="mr-2 cursor-pointer"> {company.label} </Label> </div> ))} </div> {errors.currentManagingCompanies && <p className="text-red-500 text-sm">{errors.currentManagingCompanies}</p>} </div> {formData.targetAudience.currentManagingCompanies.includes("אחר") && ( <div className="space-y-2"> <Label htmlFor="otherCurrentManagingCompany" className="flex items-center"> שם חברה מנהלת נוכחית אחרת <span className="text-red-500 mr-1"></span> </Label> <Input id="otherCurrentManagingCompany" value={formData.targetAudience.otherCurrentManagingCompany || ""} onChange={(e) => { onTargetAudienceChange("otherCurrentManagingCompany", e.target.value) }} placeholder="הזן שם חברה מנהלת נוכחית" className={errors.otherCurrentManagingCompany ? "border-red-500" : ""} /> {errors.otherCurrentManagingCompany && ( <p className="text-red-500 text-sm">{errors.otherCurrentManagingCompany}</p> )} </div> )} </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/edit-offer-modal/offer-expiration.tsx" "use client" // Refactored from: components/agent-dashboard/edit-offer-modal.tsx // Offer expiration section component import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Switch } from "@/components/ui/switch" import { format } from "date-fns" import { he } from "date-fns/locale" import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" import type { EditOfferFormData } from "./types" interface OfferExpirationProps { formData: EditOfferFormData errors: Record<string, string> onToggleEndDate: (checked: boolean) => void onInputChange: (field: string, value: any) => void } export function OfferExpiration({ formData, errors, onToggleEndDate, onInputChange }: OfferExpirationProps) { return ( <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">תוקף ההצעה</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="flex items-center space-x-4 space-x-reverse mb-4"> <Switch id="hasEndDate" checked={formData.hasEndDate} onCheckedChange={onToggleEndDate} /> <Label htmlFor="hasEndDate" className="mr-2"> הגדר תאריך סיום להצעה </Label> </div> {formData.hasEndDate && ( <div className="space-y-2"> <Label htmlFor="endDate">תאריך סיום</Label> <Popover> <PopoverTrigger asChild> <Button variant="outline" className={cn( "w-full justify-start text-right font-normal", !formData.endDate && "text-muted-foreground", errors.endDate && "border-red-500", )} > <CalendarIcon className="ml-2 h-4 w-4" /> {formData.endDate ? format(formData.endDate, "dd/MM/yyyy", { locale: he }) : "בחר תאריך סיום"} </Button> </PopoverTrigger> <PopoverContent className="w-auto p-0" align="start"> <Calendar mode="single" selected={formData.endDate || undefined} onSelect={(date) => onInputChange("endDate", date)} initialFocus disabled={(date) => date < new Date()} /> </PopoverContent> </Popover> {errors.endDate && <p className="text-red-500 text-sm">{errors.endDate}</p>} <p className="text-sm text-muted-foreground"> ההצעה תפוג בתאריך זה. תקבל התראה 7 ימים ויום לפני פקיעת ההצעה. </p> </div> )} </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/edit-offer-modal/terms-agreement.tsx" // Refactored from: components/agent-dashboard/edit-offer-modal.tsx // Terms agreement section component import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import type { EditOfferFormData } from "./types" interface TermsAgreementProps { formData: EditOfferFormData errors: Record<string, string> onInputChange: (field: string, value: any) => void } export function TermsAgreement({ formData, errors, onInputChange }: TermsAgreementProps) { return ( <div className="space-y-4 mt-4"> <div className="flex items-center space-x-2 space-x-reverse"> <Checkbox id="termsAgreed" checked={formData.termsAgreed} onCheckedChange={(checked) => onInputChange("termsAgreed", checked as boolean)} /> <Label htmlFor="termsAgreed" className="mr-2 text-sm"> אני מאשר/ת כי אני מתחייב/ת לכבד את התנאים המוצגים בהצעה זו ולהציגם באופן מדויק ללקוחות. אי עמידה בתנאים עלולה להוביל לסנקציות. </Label> </div> {errors.termsAgreed && <p className="text-red-500 text-sm">{errors.termsAgreed}</p>} </div> ) } [V0_FILE]typescript:file="components/agent-dashboard/new-offer-modal/constants.ts" // Refactored from: components/agent-dashboard/new-offer-modal.tsx // Constants and options for new offer modal import type { AgeRange, Sector, AmountRange, ManagingCompany } from "./types" export const ageRanges: { value: AgeRange; label: string }[] = [ { value: "any", label: "כל הגילאים" }, { value: "20-30", label: "20-30" }, { value: "30-40", label: "30-40" }, { value: "40-50", label: "40-50" }, { value: "50-60", label: "50-60" }, { value: "60+", label: "60+" }, ] export const sectors: { value: Sector; label: string }[] = [ { value: "any", label: "כל הסקטורים" }, { value: "hitech", label: "הייטק" }, { value: "education", label: "חינוך" }, { value: "finance", label: "פיננסים" }, { value: "healthcare", label: "רפואה" }, { value: "industry", label: "תעשייה" }, { value: "other", label: "אחר" }, ] export const amountRanges: { value: AmountRange; label: string }[] = [ { value: "any", label: "כל הסכומים" }, { value: "0-50000", label: "עד 50,000 ₪" }, { value: "50000-100000", label: "50,000 ₪ - 100,000 ₪" }, { value: "100000-250000", label: "100,000 ₪ - 250,000 ₪" }, { value: "250000-500000", label: "250,000 ₪ - 500,000 ₪" }, { value: "500000+", label: "מעל 500,000 ₪" }, ] export const managingCompanies: { value: ManagingCompany; label: string }[] = [ { value: "מגדל", label: "מגדל" }, { value: "הראל", label: "הראל" }, { value: "מנורה", label: "מנורה" }, { value: "כלל", label: "כלל" }, { value: "הפניקס", label: "הפניקס" }, { value: "אלטשולר שחם", label: "אלטשולר שחם" }, { value: "פסגות", label: "פסגות" }, { value: "אחר", label: "אחר" }, ] export const currentManagingCompanies: { value: ManagingCompany; label: string }[] = [ { value: "כל החברות", label: "כל החברות" }, ...managingCompanies, ] [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/basic-offer-details.tsx" "use client" // Refactored from: components/agent-dashboard/new-offer-modal.tsx // Basic offer details section component import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { OfferFormData } from "./types" interface BasicOfferDetailsProps { formData: OfferFormData errors: Record<string, string> onInputChange: (field: keyof OfferFormData, value: any) => void } export function BasicOfferDetails({ formData, errors, onInputChange }: BasicOfferDetailsProps) { return ( <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">פרטי הצעה בסיסיים</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <Label htmlFor="title" className="flex items-center"> כותרת ההצעה <span className="text-red-500 mr-1"></span> </Label> <Input id="title" value={formData.title} onChange={(e) => onInputChange("title", e.target.value)} placeholder="לדוגמה: חיסכון מקסימלי לפנסיה" required className={errors.title ? "border-red-500" : ""} /> {errors.title && <p className="text-red-500 text-sm">{errors.title}</p>} </div> <div className="space-y-2"> <Label htmlFor="type" className="flex items-center"> סוג הצעה <span className="text-red-500 mr-1"></span> </Label> <Select value={formData.type} onValueChange={(value) => onInputChange("type", value)}> <SelectTrigger id="type"> <SelectValue placeholder="בחר סוג הצעה" /> </SelectTrigger> <SelectContent> <SelectItem value="pension">פנסיה</SelectItem> <SelectItem value="provident">גמל</SelectItem> <SelectItem value="investment">השתלמות</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="description" className="flex items-center"> תיאור ההצעה <span className="text-red-500 mr-1"></span> </Label> <textarea id="description" className={`flex w-full rounded-md border ${errors.description ? "border-red-500" : "border-input"} bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px]`} value={formData.description} onChange={(e) => onInputChange("description", e.target.value)} placeholder="תאר את ההצעה ואת היתרונות שלה..." required /> {errors.description && <p className="text-red-500 text-sm">{errors.description}</p>} </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/offer-terms.tsx" "use client" // Refactored from: components/agent-dashboard/new-offer-modal.tsx // Offer terms section component import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { managingCompanies } from "./constants" import type { OfferFormData } from "./types" interface OfferTermsProps { formData: OfferFormData errors: Record<string, string> onInputChange: (field: keyof OfferFormData, value: any) => void } export function OfferTerms({ formData, errors, onInputChange }: OfferTermsProps) { return ( <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">תנאי ההצעה</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="managementFeeAccumulation" className="flex items-center"> דמי ניהול מצבירה (%) <span className="text-red-500 mr-1"></span> </Label> </div> <div className="flex items-center"> <Input id="managementFeeAccumulation" type="number" step="0.01" min="0" max="2" value={formData.managementFeeAccumulation} onChange={(e) => onInputChange("managementFeeAccumulation", Number.parseFloat(e.target.value))} required className={errors.managementFeeAccumulation ? "border-red-500" : ""} /> <span className="mr-2">%</span> </div> {errors.managementFeeAccumulation && <p className="text-red-500 text-sm">{errors.managementFeeAccumulation}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="managementFeeDeposit" className="flex items-center"> דמי ניהול מהפקדה (%) <span className="text-red-500 mr-1"></span> </Label> </div> <div className="flex items-center"> <Input id="managementFeeDeposit" type="number" step="0.1" min="0" max="6" value={formData.managementFeeDeposit} onChange={(e) => onInputChange("managementFeeDeposit", Number.parseFloat(e.target.value))} required className={errors.managementFeeDeposit ? "border-red-500" : ""} /> <span className="mr-2">%</span> </div> {errors.managementFeeDeposit && <p className="text-red-500 text-sm">{errors.managementFeeDeposit}</p>} </div> <div className="space-y-2"> <Label htmlFor="managingCompany" className="flex items-center"> חברה מנהלת <span className="text-red-500 mr-1"></span> </Label> <Select value={formData.managingCompany} onValueChange={(value) => onInputChange("managingCompany", value)}> <SelectTrigger id="managingCompany" className={errors.managingCompany ? "border-red-500" : ""}> <SelectValue placeholder="בחר חברה מנהלת" /> </SelectTrigger> <SelectContent> {managingCompanies.map((company) => ( <SelectItem key={company.value} value={company.value}> {company.label} </SelectItem> ))} </SelectContent> </Select> {errors.managingCompany && <p className="text-red-500 text-sm">{errors.managingCompany}</p>} </div> {formData.managingCompany === "אחר" && ( <div className="space-y-2"> <Label htmlFor="otherManagingCompany" className="flex items-center"> שם חברה מנהלת אחרת <span className="text-red-500 mr-1"></span> </Label> <Input id="otherManagingCompany" value={formData.otherManagingCompany || ""} onChange={(e) => onInputChange("otherManagingCompany", e.target.value)} placeholder="הזן שם חברה מנהלת" className={errors.otherManagingCompany ? "border-red-500" : ""} /> {errors.otherManagingCompany && <p className="text-red-500 text-sm">{errors.otherManagingCompany}</p>} </div> )} </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/target-audience.tsx" "use client" // Refactored from: components/agent-dashboard/new-offer-modal.tsx // Target audience section component import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { ageRanges, sectors, amountRanges, currentManagingCompanies } from "./constants" import type { OfferFormData } from "./types" interface TargetAudienceProps { formData: OfferFormData errors: Record<string, string> onTargetAudienceChange: (field: keyof OfferFormData["targetAudience"], value: any, checked?: boolean) => void } export function TargetAudience({ formData, errors, onTargetAudienceChange }: TargetAudienceProps) { return ( <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">קהל יעד</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <Label>קבוצת גיל</Label> <div className="grid grid-cols-2 gap-2"> {ageRanges.map((age) => ( <div key={age.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`age-${age.value}`} checked={formData.targetAudience.ageRanges.includes(age.value)} onCheckedChange={(checked) => onTargetAudienceChange("ageRanges", age.value, checked as boolean)} /> <Label htmlFor={`age-${age.value}`} className="mr-2 cursor-pointer"> {age.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label>סקטור</Label> <div className="grid grid-cols-2 gap-2"> {sectors.map((sector) => ( <div key={sector.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`sector-${sector.value}`} checked={formData.targetAudience.sectors.includes(sector.value)} onCheckedChange={(checked) => onTargetAudienceChange("sectors", sector.value, checked as boolean)} /> <Label htmlFor={`sector-${sector.value}`} className="mr-2 cursor-pointer"> {sector.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label>סכום בקרן</Label> <div className="grid grid-cols-2 gap-2"> {amountRanges.map((amount) => ( <div key={amount.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`amount-${amount.value}`} checked={formData.targetAudience.amountRanges.includes(amount.value)} onCheckedChange={(checked) => onTargetAudienceChange("amountRanges", amount.value, checked as boolean)} /> <Label htmlFor={`amount-${amount.value}`} className="mr-2 cursor-pointer"> {amount.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label className="flex items-center"> חברה מנהלת נוכחית <span className="text-red-500 mr-1"></span> </Label> <div className="grid grid-cols-2 gap-2"> {currentManagingCompanies.map((company) => ( <div key={company.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`company-${company.value}`} checked={formData.targetAudience.currentManagingCompanies.includes(company.value)} onCheckedChange={(checked) => onTargetAudienceChange("currentManagingCompanies", company.value, checked as boolean) } /> <Label htmlFor={`company-${company.value}`} className="mr-2 cursor-pointer"> {company.label} </Label> </div> ))} </div> {errors.currentManagingCompanies && <p className="text-red-500 text-sm">{errors.currentManagingCompanies}</p>} </div> {formData.targetAudience.currentManagingCompanies.includes("אחר") && ( <div className="space-y-2"> <Label htmlFor="otherCurrentManagingCompany" className="flex items-center"> שם חברה מנהלת נוכחית אחרת <span className="text-red-500 mr-1"></span> </Label> <Input id="otherCurrentManagingCompany" value={formData.targetAudience.otherCurrentManagingCompany || ""} onChange={(e) => { onTargetAudienceChange("otherCurrentManagingCompany", e.target.value) }} placeholder="הזן שם חברה מנהלת נוכחית" className={errors.otherCurrentManagingCompany ? "border-red-500" : ""} /> {errors.otherCurrentManagingCompany && ( <p className="text-red-500 text-sm">{errors.otherCurrentManagingCompany}</p> )} </div> )} </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/terms-agreement.tsx" // Refactored from: components/agent-dashboard/new-offer-modal.tsx // Terms agreement section component import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import type { OfferFormData } from "./types" interface TermsAgreementProps { formData: OfferFormData errors: Record<string, string> onInputChange: (field: keyof OfferFormData, value: any) => void } export function TermsAgreement({ formData, errors, onInputChange }: TermsAgreementProps) { return ( <div className="space-y-4 mt-4"> <div className="flex items-center space-x-2 space-x-reverse"> <Checkbox id="termsAgreed" checked={formData.termsAgreed} onCheckedChange={(checked) => onInputChange("termsAgreed", checked as boolean)} /> <Label htmlFor="termsAgreed" className="mr-2 text-sm"> אני מאשר/ת כי אני מתחייב/ת לכבד את התנאים המוצגים בהצעה זו ולהציגם באופן מדויק ללקוחות. אי עמידה בתנאים עלולה להוביל לסנקציות. </Label> </div> {errors.termsAgreed && <p className="text-red-500 text-sm">{errors.termsAgreed}</p>} </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import type { FormData } from "./pension-form-modal" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { PensionComparisonContent } from "./comparison-results/pension-comparison" import { ProvidentComparisonContent } from "./comparison-results/provident-comparison" import { StudyComparisonContent } from "./comparison-results/study-comparison" interface ComparisonResultsProps { formData: FormData onNext: () => void onBack: () => void } export function ComparisonResults({ formData, onNext, onBack }: ComparisonResultsProps) { const [activeTab, setActiveTab] = useState<string>("pension") useEffect(() => { if (formData.selectedProducts.length > 0) { setActiveTab(formData.selectedProducts[0]) } }, [formData.selectedProducts]) return ( <div dir="rtl" className="space-y-6 overflow-y-auto max-h-[70vh] pr-1 text-right"> <div className="text-center mb-6"> <h2 className="text-2xl font-bold text-gray-900">ניתוח והשוואה</h2> <p className="text-gray-500 mt-1">בהתבסס על הנתונים שסיפקת, הנה ניתוח של המצב הנוכחי שלך</p> </div> {formData.selectedProducts.length > 1 && ( <Tabs dir="rtl" value={activeTab} onValueChange={setActiveTab} className="w-full text-right"> <TabsList className="grid w-full" style={{ gridTemplateColumns: `repeat(${formData.selectedProducts.length}, 1fr)` }} > {formData.selectedProducts.includes("pension") && <TabsTrigger value="pension">קרן פנסיה</TabsTrigger>} {formData.selectedProducts.includes("provident") && <TabsTrigger value="provident">קופת גמל</TabsTrigger>} {formData.selectedProducts.includes("study") && <TabsTrigger value="study">קרן השתלמות</TabsTrigger>} </TabsList> {formData.selectedProducts.includes("pension") && ( <TabsContent dir="rtl" value="pension" className="mt-4 text-right"> <PensionComparisonContent formData={formData} /> </TabsContent> )} {formData.selectedProducts.includes("provident") && ( <TabsContent dir="rtl" value="provident" className="mt-4 text-right"> <ProvidentComparisonContent formData={formData} /> </TabsContent> )} {formData.selectedProducts.includes("study") && ( <TabsContent dir="rtl" value="study" className="mt-4 text-right"> <StudyComparisonContent formData={formData} /> </TabsContent> )} </Tabs> )} {formData.selectedProducts.length === 1 && ( <div dir="rtl" className="text-right"> {formData.selectedProducts.includes("pension") && <PensionComparisonContent formData={formData} />} {formData.selectedProducts.includes("provident") && <ProvidentComparisonContent formData={formData} />} {formData.selectedProducts.includes("study") && <StudyComparisonContent formData={formData} />} </div> )} <div className="pt-4 flex gap-3"> <Button type="button" variant="outline" onClick={onBack} className="flex-1 flex items-center justify-center gap-2" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> <Button onClick={onNext} className="flex-1 bg-blue-600 hover:bg-blue-700 flex items-center justify-center gap-2" > המשך להרשמה <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m9 18 6-6-6-6" /> </svg> </Button> </div> </div> ) } [V0_FILE]typescript:file="components/pension-form/comparison-results/utils.ts" // Refactored from: components/pension-form/comparison-results.tsx // Utility functions for comparison results export function calculatePercentile(value: number, min: number, max: number): number { const range = max - min const normalizedValue = (value - min) / range return Math.min(Math.max(normalizedValue * 100, 0), 100) } export function getCompanyName(companyCode: string): string { const companies: Record<string, string> = { migdal: "מגדל", menora: "מנורה מבטחים", harel: "הראל", clal: "כלל", phoenix: "הפניקס", psagot: "פסגות", altshuler: "אלטשולר שחם", more: "מור", other: "חברה אחרת", } return companies[companyCode] || companyCode } export function getBalanceRangeLabel(range: string): string { switch (range) { case "0": return "0 ₪" case "1-50000": return "1-50,000 ₪" case "50001-100000": return "50,001-100,000 ₪" case "100001-250000": return "100,001-250,000 ₪" case "250001-500000": return "250,001-500,000 ₪" case "500001-1000000": return "500,001-1,000,000 ₪" case "1000001+": return "1,000,001+ ₪" default: return "לא ידוע" } } export function isInBalanceRange(balance: string, range: string): boolean { return balance === range } export function getOccupationName(field: string): string { const occupations: Record<string, string> = { tech: "הייטק", finance: "פיננסים", education: "חינוך", healthcare: "בריאות", legal: "משפטים", retail: "קמעונאות", manufacturing: "תעשייה", construction: "בנייה", government: "ממשלה", other: "אחר", } return occupations[field] || "כללי" } [V0_FILE]typescriptreact:file="components/agent-registration-form/step-indicator.tsx" // Refactored from: components/agent-registration-form.tsx // Step indicator component interface StepIndicatorProps { currentStep: number } export function StepIndicator({ currentStep }: StepIndicatorProps) { return ( <div className="flex justify-center mb-6"> <div className="flex items-center"> <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 1 ? "bg-primary text-white" : "bg-gray-200"}`} > 1 </div> <div className={`h-1 w-12 ${currentStep >= 2 ? "bg-primary" : "bg-gray-200"}`}></div> <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 2 ? "bg-primary text-white" : "bg-gray-200"}`} > 2 </div> <div className={`h-1 w-12 ${currentStep >= 3 ? "bg-primary" : "bg-gray-200"}`}></div> <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 3 ? "bg-primary text-white" : "bg-gray-200"}`} > 3 </div> <div className={`h-1 w-12 ${currentStep >= 4 ? "bg-primary" : "bg-gray-200"}`}></div> <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 4 ? "bg-primary text-white" : "bg-gray-200"}`} > 4 </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-registration-form/error-message.tsx" // Refactored from: components/agent-registration-form.tsx // Error message component import { AlertCircle } from "lucide-react" interface ErrorMessageProps { showErrors: boolean } export function ErrorMessage({ showErrors }: ErrorMessageProps) { if (!showErrors) return null return ( <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-center mb-4"> <AlertCircle className="h-5 w-5 mr-2" /> <span>יש למלא את כל השדות הנדרשים לפני המשך</span> </div> ) } [V0_FILE]typescriptreact:file="components/agent-registration-form/license-credentials-step.tsx" "use client" import type React from "react" // Refactored from: components/agent-registration-form.tsx // License credentials step component import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { AgentFormData, ValidationErrors } from "./types" interface LicenseCredentialsStepProps { formData: AgentFormData errors: ValidationErrors showErrors: boolean onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void onSelectChange: (id: string, value: string) => void onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void onNext: () => void onPrev: () => void } export function LicenseCredentialsStep({ formData, errors, showErrors, onInputChange, onSelectChange, onFileChange, onNext, onPrev, }: LicenseCredentialsStepProps) { return ( <div className="space-y-4"> <h3 className="text-lg font-semibold">רישיון והסמכות</h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="space-y-2"> <Label htmlFor="licenseType">סוג רישיון</Label> <Select required value={formData.licenseType} onValueChange={(value) => onSelectChange("licenseType", value)}> <SelectTrigger id="licenseType" className={`text-right ${showErrors && !formData.licenseType ? "border-red-500" : ""}`} > <SelectValue placeholder="בחר סוג רישיון" /> </SelectTrigger> <SelectContent> <SelectItem value="agent">סוכן ביטוח פנסיוני</SelectItem> <SelectItem value="advisor">יועץ פנסיוני</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="licenseNumber">מספר רישיון</Label> <Input id="licenseNumber" required dir="rtl" value={formData.licenseNumber} onChange={onInputChange} className={showErrors && !formData.licenseNumber ? "border-red-500" : ""} /> </div> <div className="space-y-2"> <Label htmlFor="licenseDate">תאריך הנפקת רישיון</Label> <Input id="licenseDate" type="date" dir="rtl" required value={formData.licenseDate} onChange={onInputChange} className={showErrors && !formData.licenseDate ? "border-red-500" : ""} /> </div> <div className="space-y-2"> <Label htmlFor="licenseDocument">העלאת מסמך רישיון (PDF/תמונה)</Label> <Input id="licenseDocument" type="file" accept=".pdf,.jpg,.jpeg,.png" required onChange={onFileChange} className={`file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:bg-primary file:text-white hover:file:bg-primary/90 ${ showErrors && !formData.licenseDocument ? "border-red-500" : "" }`} /> </div> </div> <div className="flex justify-between mt-6"> <Button type="button" variant="outline" onClick={onPrev}> חזרה </Button> <Button type="button" onClick={onNext}> המשך </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-registration-form/declarations-step.tsx" isQuickEdit="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import type { AgentFormData, ValidationErrors } from "./types" interface DeclarationsStepProps { formData: AgentFormData errors: ValidationErrors showErrors: boolean onInputChange: (field: string, value: string) => void onCheckboxChange: (group: string, id: string, checked: boolean) => void onSubmit: (e: React.FormEvent) => void onPrev: () => void } export function DeclarationsStep({ formData, errors, showErrors, onInputChange, onCheckboxChange, onSubmit, onPrev, }: DeclarationsStepProps) { return ( <div className="space-y-4"> <h3 className="text-lg font-semibold">הצהרות וסיסמה</h3> {/* Password Section /} <Card className={showErrors && (errors.password || errors.confirmPassword) ? "border-red-500" : ""}> <CardContent className="pt-4"> <h4 className="text-md font-medium mb-3">יצירת סיסמה</h4> <div className="space-y-3"> <div> <Label htmlFor="password" className="text-sm font-medium"> סיסמה <span className="text-red-500"></span> </Label> <Input id="password" type="password" value={formData.password} onChange={(e) => onInputChange("password", e.target.value)} className={showErrors && errors.password ? "border-red-500" : ""} placeholder="הזן סיסמה" /> {showErrors && errors.password && <p className="text-red-500 text-xs mt-1">{errors.password}</p>} </div> <div> <Label htmlFor="confirmPassword" className="text-sm font-medium"> אימות סיסמה <span className="text-red-500"></span> </Label> <Input id="confirmPassword" type="password" value={formData.confirmPassword} onChange={(e) => onInputChange("confirmPassword", e.target.value)} className={showErrors && errors.confirmPassword ? "border-red-500" : ""} placeholder="הזן סיסמה שוב" /> {showErrors && errors.confirmPassword && ( <p className="text-red-500 text-xs mt-1">{errors.confirmPassword}</p> )} </div> <p className="text-xs text-muted-foreground"> הסיסמה חייבת להכיל לפחות 8 תווים, אות גדולה, אות קטנה, מספר ותו מיוחד </p> </div> </CardContent> </Card> {/ Declarations Section /} <Card className={showErrors && errors.step4 ? "border-red-500" : ""}> <CardContent className="pt-4"> <h4 className="text-md font-medium mb-3">הצהרות</h4> <div className="space-y-3"> <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="declaration-1" required checked={formData.declarations.declaration1} onCheckedChange={(checked) => onCheckboxChange("declarations", "declaration1", checked as boolean)} /> <Label htmlFor="declaration-1" className="mr-2 text-xs leading-relaxed"> אני מאשר/ת שיש ברשותי רישיון תקף כסוכן ביטוח פנסיוני / יועץ פנסיוני בישראל. </Label> </div> <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="declaration-2" required checked={formData.declarations.declaration2} onCheckedChange={(checked) => onCheckboxChange("declarations", "declaration2", checked as boolean)} /> <Label htmlFor="declaration-2" className="mr-2 text-xs leading-relaxed"> אני מתחייב/ת לספק שירות מקצועי, מדויק וחוקי ללקוחות בפלטפורמה. </Label> </div> <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="declaration-3" required checked={formData.declarations.declaration3} onCheckedChange={(checked) => onCheckboxChange("declarations", "declaration3", checked as boolean)} /> <Label htmlFor="declaration-3" className="mr-2 text-xs leading-relaxed"> קראתי והסכמתי ל<span className="text-primary underline cursor-pointer">תנאי השימוש</span> ול <span className="text-primary underline cursor-pointer">מדיניות הפרטיות</span>. </Label> </div> <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="declaration-4" required checked={formData.declarations.declaration4} onCheckedChange={(checked) => onCheckboxChange("declarations", "declaration4", checked as boolean)} /> <Label htmlFor="declaration-4" className="mr-2 text-xs leading-relaxed"> אני מבין/ה ששימוש לרעה בפלטפורמה או מצג שווא עלולים להוביל להסרה. </Label> </div> <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="declaration-5" required checked={formData.declarations.declaration5} onCheckedChange={(checked) => onCheckboxChange("declarations", "declaration5", checked as boolean)} /> <Label htmlFor="declaration-5" className="mr-2 text-xs leading-relaxed"> אני מאשר/ת לגורו פנסיוני לאמת את הרישיון וההסמכות שלי מול הגופים הרגולטוריים הרלוונטיים. </Label> </div> <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="declaration-6" checked={formData.declarations.declaration6} onCheckedChange={(checked) => onCheckboxChange("declarations", "declaration6", checked as boolean)} /> <Label htmlFor="declaration-6" className="mr-2 text-xs leading-relaxed"> אני מסכים/ה לקבל עדכוני מוצר והודעות על תכונות חדשות באמצעות דוא"ל. </Label> </div> </div> </CardContent> </Card> <div className="flex justify-between mt-4"> <Button type="button" variant="outline" onClick={onPrev}> חזרה </Button> <Button type="submit" onClick={onSubmit}> שלח בקשת הצטרפות </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/home-content.tsx" "use client" // Extracted from app/dashboard/page.tsx - Home/Overview content component import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Calendar, Briefcase, Wallet } from "lucide-react" interface HomeContentProps { activeOverviewType: string setActiveOverviewType: (type: string) => void getCurrentUserRates: (type?: string) => any } export function HomeContent({ activeOverviewType, setActiveOverviewType, getCurrentUserRates }: HomeContentProps) { return ( <Card> <CardHeader> <CardTitle>השוואה לשוק</CardTitle> <CardDescription> חברות הביטוח והפנסיה מציעות תעריפים שונים בהתאם לגיל, שכר, וסכום הצבירה. בדוק כיצד התעריפים שלך משתווים לשוק. </CardDescription> </CardHeader> <CardContent> {/ Tabbed structure for Overview /} <div className="flex justify-center border-b mb-4"> <button className={`px-4 py-2 font-medium ${ activeOverviewType === "pension" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOverviewType("pension")} > פנסיה </button> <button className={`px-4 py-2 font-medium ${ activeOverviewType === "provident" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOverviewType("provident")} > קרנות השתלמות </button> <button className={`px-4 py-2 font-medium ${ activeOverviewType === "pension-fund" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOverviewType("pension-fund")} > קופות גמל </button> </div> {/ Current Terms Section /} <div className="mb-6"> <Card className="border border-gray-100 shadow-sm bg-gray-50"> <CardHeader className="pb-1 pt-2"> <CardTitle className="text-sm text-gray-600"> התנאים הנוכחיים שלך - {getCurrentUserRates(activeOverviewType).title} </CardTitle> </CardHeader> <CardContent className="py-2"> <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs"> <div> <div className="text-gray-500 mb-1">חברה נוכחית</div> <div className="font-medium">{getCurrentUserRates(activeOverviewType).company}</div> </div> <div> <div className="text-gray-500 mb-1">דמי ניהול מהצבירה</div> <div className="font-medium text-red-600"> {getCurrentUserRates(activeOverviewType).managementFeeAccumulated}% </div> </div> <div> <div className="text-gray-500 mb-1">דמי ניהול מההפקדה</div> <div className="font-medium text-red-600"> {getCurrentUserRates(activeOverviewType).managementFeeDeposit}% </div> </div> <div> <div className="text-gray-500 mb-1">מסלול השקעה</div> <div className="font-medium">{getCurrentUserRates(activeOverviewType).investmentTrack}</div> </div> </div> </CardContent> </Card> </div> <div className="space-y-6"> {/ Redesigned Management Fee Bars /} <div> <div className="flex justify-between mb-2 text-sm"> <span className="font-medium">דמי ניהול מהצבירה</span> <span className="font-bold">{getCurrentUserRates(activeOverviewType).managementFeeAccumulated}%</span> </div> <div className="relative h-10 bg-gray-100 rounded-lg overflow-hidden"> <div className="absolute inset-0 flex"> <div className="h-full bg-green-500" style={{ width: "20%" }}></div> <div className="h-full bg-green-400" style={{ width: "15%" }}></div> <div className="h-full bg-yellow-400" style={{ width: "15%" }}></div> <div className="h-full bg-orange-400" style={{ width: "20%" }}></div> <div className="h-full bg-red-500" style={{ width: "30%" }}></div> </div> {/ User marker - only the line /} <div className="absolute top-0 bottom-0 w-2 bg-blue-600 border-2 border-white shadow-md" style={{ right: `${(1 - getCurrentUserRates(activeOverviewType).managementFeeAccumulated / 2) 100}%`, transform: "translateX(50%)", }} ></div> {/* Average marker /} <div className="absolute inset-0 flex items-center justify-center"> <span className="text-xs font-medium text-white">ממוצע: 0.5%</span> </div> </div> </div> <div> <div className="flex justify-between mb-2 text-sm"> <span className="font-medium">דמי ניהול מההפקדה</span> <span className="font-bold">{getCurrentUserRates(activeOverviewType).managementFeeDeposit}%</span> </div> <div className="relative h-10 bg-gray-100 rounded-lg overflow-hidden"> <div className="absolute inset-0 flex"> <div className="h-full bg-green-500" style={{ width: "15%" }}></div> <div className="h-full bg-green-400" style={{ width: "15%" }}></div> <div className="h-full bg-yellow-400" style={{ width: "20%" }}></div> <div className="h-full bg-orange-400" style={{ width: "20%" }}></div> <div className="h-full bg-red-500" style={{ width: "30%" }}></div> </div> {/ User marker - only the line /} <div className="absolute top-0 bottom-0 w-2 bg-blue-600 border-2 border-white shadow-md" style={{ right: `${(1 - getCurrentUserRates(activeOverviewType).managementFeeDeposit / 6) 100}%`, transform: "translateX(50%)", }} ></div> {/* Average marker /} <div className="absolute inset-0 flex items-center justify-center"> <span className="text-xs font-medium text-white">ממוצע: 2.5%</span> </div> </div> </div> {/ Comparison Charts Section /} <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8"> {/ Comparison by Age - Donut Chart with new color palette /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Calendar className="h-5 w-5 text-cyan-600" /> <h4 className="font-medium">השוואה לפי גיל</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Donut chart with new color palette /} <defs> <linearGradient id="donutGradientNew" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#06b6d4" /> <stop offset="50%" stopColor="#0ea5e9" /> <stop offset="100%" stopColor="#3b82f6" /> </linearGradient> </defs> {/ Background circle /} <circle cx="100" cy="100" r="80" fill="none" stroke="#e5e7eb" strokeWidth="20" /> {/ Data arc - 60% worse than average /} <circle cx="100" cy="100" r="80" fill="none" stroke="url(#donutGradientNew)" strokeWidth="20" strokeDasharray="502.4 502.4" strokeDashoffset="200.96" transform="rotate(-90 100 100)" /> {/ Marker for user position /} <circle cx="100" cy="20" r="6" fill="#0284c7" /> {/ Center text /} <text x="100" y="95" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#0284c7"> 60% </text> <text x="100" y="115" textAnchor="middle" fontSize="12" fill="#6b7280"> גבוה מהממוצע </text> </svg> </div> <div className="text-center text-sm text-gray-500 mt-2">דמי הניהול שלך גבוהים ב-60% מהממוצע לגילך</div> </div> {/ Redesigned Comparison by Occupation - Modern Gauge Chart /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Briefcase className="h-5 w-5 text-indigo-600" /> <h4 className="font-medium">השוואה לפי תחום עיסוק</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Modern Gauge Chart /} <defs> <linearGradient id="sectorGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#4f46e5" /> <stop offset="100%" stopColor="#818cf8" /> </linearGradient> <filter id="glow" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur stdDeviation="3" result="blur" /> <feComposite in="SourceGraphic" in2="blur" operator="over" /> </filter> </defs> {/ Sector name /} <text x="100" y="50" textAnchor="middle" fontSize="16" fontWeight="bold" fill="#4f46e5" filter="url(#glow)" > {getCurrentUserRates(activeOverviewType).sector || "הייטק"} </text> {/ Gauge background /} <path d="M 30,140 A 70,70 0 0,1 170,140" fill="none" stroke="#e5e7eb" strokeWidth="10" strokeLinecap="round" /> {/ Gauge fill - 45% worse than average /} <path d="M 30,140 A 70,70 0 0,1 100,70" fill="none" stroke="url(#sectorGradient)" strokeWidth="10" strokeLinecap="round" /> {/ Gauge needle /} <line x1="100" y1="140" x2="100" y2="80" stroke="#4f46e5" strokeWidth="3" strokeLinecap="round" /> <circle cx="100" cy="140" r="5" fill="#4f46e5" /> {/ Percentage /} <text x="100" y="170" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#4f46e5"> 45% </text> <text x="100" y="185" textAnchor="middle" fontSize="12" fill="#6b7280"> גבוה מהממוצע בתחום </text> </svg> </div> </div> {/ New Chart: Comparison by Accumulated Amount - Bar Chart /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Wallet className="h-5 w-5 text-emerald-600" /> <h4 className="font-medium">השוואה לפי סכום צבור</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Bar chart /} <defs> <linearGradient id="accBarGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stopColor="#10b981" /> <stop offset="100%" stopColor="#34d399" /> </linearGradient> </defs> {/ Y-axis /} <line x1="40" y1="40" x2="40" y2="160" stroke="#94a3b8" strokeWidth="1.5" /> {/ X-axis /} <line x1="40" y1="160" x2="180" y2="160" stroke="#94a3b8" strokeWidth="1.5" /> {/ Bars /} <rect x="50" y="70" width="20" height="90" rx="2" fill="#e5e7eb" /> <rect x="80" y="90" width="20" height="70" rx="2" fill="#e5e7eb" /> <rect x="110" y="60" width="20" height="100" rx="2" fill="url(#accBarGradient)" stroke="#10b981" strokeWidth="2" /> <rect x="140" y="100" width="20" height="60" rx="2" fill="#e5e7eb" /> {/ Only label the user's category /} <text x="120" y="175" textAnchor="middle" fontSize="10" fill="#10b981" fontWeight="bold"> 250K-500K </text> </svg> </div> <div className="text-center text-sm text-gray-500 mt-2"> <span className="font-medium text-emerald-600">הקטגוריה שלך:</span> דמי הניהול הממוצעים בקטגוריית הסכום הצבור שלך הם 0.8% </div> </div> </div> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/decline-all-modal.tsx" "use client" // Extracted from app/dashboard/page.tsx - Decline all offers modal component import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { X } from "lucide-react" interface DeclineAllModalProps { showDeclineAllOptions: boolean setShowDeclineAllOptions: (show: boolean) => void declineAllReason: string setDeclineAllReason: (reason: string) => void onDeclineAll: () => void } export function DeclineAllModal({ showDeclineAllOptions, setShowDeclineAllOptions, declineAllReason, setDeclineAllReason, onDeclineAll, }: DeclineAllModalProps) { if (!showDeclineAllOptions) return null return ( <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> <div className="bg-white rounded-lg shadow-xl w-full max-w-md overflow-hidden"> <div className="p-4 bg-blue-50 border-b flex justify-between items-center"> <h3 className="text-lg font-bold">מדוע אינך מעוניין בהצעות אלו?</h3> <button onClick={() => setShowDeclineAllOptions(false)} className="p-1 rounded-full hover:bg-blue-100"> <X className="h-5 w-5" /> </button> </div> <div className="p-4"> <p className="text-gray-600 mb-4">המשוב שלך יעזור לנו להציע לך הצעות מותאמות יותר בעתיד</p> <div className="space-y-3"> <div className="space-y-2"> <div className="flex items-center space-x-2 space-x-reverse"> <input type="radio" id="reason-not-attractive" name="decline-reason" value="ההצעות לא מספיק אטרקטיביות" checked={declineAllReason === "ההצעות לא מספיק אטרקטיביות"} onChange={(e) => setDeclineAllReason(e.target.value)} className="h-4 w-4 text-blue-600" /> <Label htmlFor="reason-not-attractive" className="mr-2 cursor-pointer"> ההצעות לא מספיק אטרקטיביות </Label> </div> <div className="flex items-center space-x-2 space-x-reverse"> <input type="radio" id="reason-not-companies" name="decline-reason" value="לא מעוניין בחברות אלו" checked={declineAllReason === "לא מעוניין בחברות אלו"} onChange={(e) => setDeclineAllReason(e.target.value)} className="h-4 w-4 text-blue-600" /> <Label htmlFor="reason-not-companies" className="mr-2 cursor-pointer"> לא מעוניין בחברות אלו </Label> </div> <div className="flex items-center space-x-2 space-x-reverse"> <input type="radio" id="reason-better-offer" name="decline-reason" value="יש לי כבר הצעה טובה יותר" checked={declineAllReason === "יש לי כבר הצעה טובה יותר"} onChange={(e) => setDeclineAllReason(e.target.value)} className="h-4 w-4 text-blue-600" /> <Label htmlFor="reason-better-offer" className="mr-2 cursor-pointer"> יש לי כבר הצעה טובה יותר </Label> </div> <div className="flex items-center space-x-2 space-x-reverse"> <input type="radio" id="reason-other" name="decline-reason" value="אחר" checked={declineAllReason === "אחר" || declineAllReason.startsWith("אחר: ")} onChange={(e) => setDeclineAllReason(e.target.value)} className="h-4 w-4 text-blue-600" /> <Label htmlFor="reason-other" className="mr-2 cursor-pointer"> אחר </Label> </div> </div> {(declineAllReason === "אחר" || declineAllReason.startsWith("אחר: ")) && ( <div className="space-y-2 mt-4"> <Label htmlFor="other-reason">פרט</Label> <Textarea id="other-reason" placeholder="נא לפרט את הסיבה" value={declineAllReason === "אחר" ? "" : declineAllReason.replace("אחר: ", "")} onChange={(e) => setDeclineAllReason(`אחר: ${e.target.value}`)} className="w-full" rows={3} /> </div> )} </div> <div className="flex justify-end gap-3 mt-6"> <Button variant="outline" onClick={() => setShowDeclineAllOptions(false)}> ביטול </Button> <Button onClick={onDeclineAll} disabled={!declineAllReason}> שלח משוב </Button> </div> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/overview-charts.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Area, AreaChart, CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "@/components/ui/chart" interface OverviewChartsProps { generateDailySignupData: () => any[] generateLeadActivityData: () => any[] } export function OverviewCharts({ generateDailySignupData, generateLeadActivityData }: OverviewChartsProps) { return ( <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <Card> <CardHeader> <CardTitle>הרשמות משתמשים יומיות</CardTitle> <CardDescription>30 הימים האחרונים</CardDescription> </CardHeader> <CardContent className="h-80"> <ResponsiveContainer width="100%" height="100%"> <LineChart data={generateDailySignupData()} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}> <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" /> <XAxis dataKey="date" /> <YAxis /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="clients" stroke="#3b82f6" strokeWidth={2} /> <Line type="monotone" dataKey="agents" stroke="#10b981" strokeWidth={2} /> </LineChart> </ResponsiveContainer> </CardContent> </Card> <Card> <CardHeader> <CardTitle>פעילות לידים יומית</CardTitle> <CardDescription>30 הימים האחרונים</CardDescription> </CardHeader> <CardContent className="h-80"> <ResponsiveContainer width="100%" height="100%"> <AreaChart data={generateLeadActivityData()} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}> <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" /> <XAxis dataKey="date" /> <YAxis /> <Tooltip /> <Legend /> <Area type="monotone" dataKey="views" stroke="#3b82f6" fill="#93c5fd" /> <Area type="monotone" dataKey="contacts" stroke="#10b981" fill="#6ee7b7" /> </AreaChart> </ResponsiveContainer> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/recent-activity-table.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" interface RecentActivityTableProps { recentActivities: Array<{ action: string user: string date: string status: string }> } export function RecentActivityTable({ recentActivities }: RecentActivityTableProps) { return ( <Card> <CardHeader> <CardTitle>פעילות אחרונה</CardTitle> <CardDescription>פעולות אחרונות במערכת</CardDescription> </CardHeader> <CardContent> <Table> <TableHeader> <TableRow> <TableHead>פעולה</TableHead> <TableHead>משתמש</TableHead> <TableHead>תאריך</TableHead> <TableHead>סטטוס</TableHead> </TableRow> </TableHeader> <TableBody> {recentActivities.map((activity, index) => ( <TableRow key={index}> <TableCell className="font-medium">{activity.action}</TableCell> <TableCell>{activity.user}</TableCell> <TableCell>{activity.date}</TableCell> <TableCell> <Badge className={ activity.status === "הושלם" ? "bg-green-100 text-green-800 hover:bg-green-100" : activity.status === "בתהליך" ? "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" : "bg-red-100 text-red-800 hover:bg-red-100" } > {activity.status} </Badge> </TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/offers-content.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { RefreshCw } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "@/components/ui/chart" interface OffersContentProps { offersData: Array<{ id: string agentName: string type: string expirationDate: string views: number contactRequests: number }> offersComparisonData: Array<{ name: string צפיות: number "בקשות קשר": number }> } export function OffersContent({ offersData, offersComparisonData }: OffersContentProps) { return ( <div className="space-y-6"> <div className="flex justify-between items-center"> <h2 className="text-xl font-bold">ניטור הצעות</h2> <div className="flex gap-2"> <Select> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="סטטוס הצעה" /> </SelectTrigger> <SelectContent> <SelectItem value="all">הכל</SelectItem> <SelectItem value="active">פעיל</SelectItem> <SelectItem value="expired">פג תוקף</SelectItem> <SelectItem value="flagged">מסומן</SelectItem> </SelectContent> </Select> <Button variant="outline"> <RefreshCw className="ml-2 h-4 w-4" /> רענון </Button> </div> </div> <Card> <CardContent className="pt-6"> <Table> <TableHeader> <TableRow> <TableHead>מזהה הצעה</TableHead> <TableHead>שם סוכן</TableHead> <TableHead>סוג</TableHead> <TableHead>תאריך תפוגה</TableHead> <TableHead>צפיות</TableHead> <TableHead>בקשות קשר</TableHead> <TableHead>פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {offersData.map((offer, index) => ( <TableRow key={index}> <TableCell className="font-medium">{offer.id}</TableCell> <TableCell>{offer.agentName}</TableCell> <TableCell>{offer.type}</TableCell> <TableCell>{offer.expirationDate}</TableCell> <TableCell>{offer.views}</TableCell> <TableCell>{offer.contactRequests}</TableCell> <TableCell> <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="sm"> פעולות </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem>צפייה</DropdownMenuItem> <DropdownMenuItem>השבתה</DropdownMenuItem> <DropdownMenuItem>שכפול</DropdownMenuItem> <DropdownMenuItem>צפייה בהיסטוריית עריכה</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> <Card> <CardHeader> <CardTitle>השוואת צפיות ובקשות קשר</CardTitle> <CardDescription>10 ההצעות המובילות</CardDescription> </CardHeader> <CardContent className="h-80"> <ResponsiveContainer width="100%" height="100%"> <BarChart data={offersComparisonData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} layout="vertical"> <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" /> <XAxis type="number" /> <YAxis type="category" dataKey="name" width={100} /> <Tooltip /> <Legend /> <Bar dataKey="צפיות" fill="#3b82f6" /> <Bar dataKey="בקשות קשר" fill="#10b981" /> </BarChart> </ResponsiveContainer> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/settings-content.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Bell, Search, Download } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface SettingsContentProps { adminsData: Array<{ name: string email: string role: string permissions: string status: string }> adminLogsData: Array<{ timestamp: string admin: string action: string details: string ip: string }> } export function SettingsContent({ adminsData, adminLogsData }: SettingsContentProps) { return ( <div className="space-y-6"> <Tabs defaultValue="settings" className="w-full"> <TabsList className="grid w-full grid-cols-3"> <TabsTrigger value="settings">הגדרות מערכת</TabsTrigger> <TabsTrigger value="admins">ניהול מנהלים</TabsTrigger> <TabsTrigger value="logs">לוגים</TabsTrigger> </TabsList> <TabsContent value="settings" className="space-y-4 pt-4"> <Card> <CardHeader> <CardTitle>הגדרות כלליות</CardTitle> <CardDescription>הגדרות כלל-מערכתיות</CardDescription> </CardHeader> <CardContent className="space-y-4"> <div className="space-y-2"> <h4 className="font-medium">כללי הקצאת לידים</h4> <Select defaultValue="random"> <SelectTrigger> <SelectValue /> </SelectTrigger> <SelectContent> <SelectItem value="random">הקצאה אקראית</SelectItem> <SelectItem value="round-robin">סבב מחזורי</SelectItem> <SelectItem value="performance">לפי ביצועים</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <h4 className="font-medium">ברירת מחדל לתפוגת הצעות (ימים)</h4> <Input type="number" defaultValue="30" /> </div> <div className="space-y-2"> <h4 className="font-medium">תזמון התראות אימייל</h4> <Select defaultValue="instant"> <SelectTrigger> <SelectValue /> </SelectTrigger> <SelectContent> <SelectItem value="instant">מיידי</SelectItem> <SelectItem value="hourly">שעתי</SelectItem> <SelectItem value="daily">יומי</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <h4 className="font-medium">מספר מקסימלי של הצעות לסוכן</h4> <Input type="number" defaultValue="50" /> </div> <Button className="mt-4">שמירת הגדרות</Button> </CardContent> </Card> <Card> <CardHeader> <CardTitle>הגדרות התראות</CardTitle> <CardDescription>ניהול התראות מערכת</CardDescription> </CardHeader> <CardContent className="space-y-4"> <div className="flex items-center justify-between"> <div> <h4 className="font-medium">התראות על לידים חדשים</h4> <p className="text-sm text-muted-foreground">שליחת התראות למנהלים על לידים חדשים</p> </div> <div className="flex items-center space-x-2"> <Button variant="outline" size="sm"> <Bell className="ml-2 h-4 w-4" /> הגדרות </Button> </div> </div> <div className="flex items-center justify-between"> <div> <h4 className="font-medium">התראות על אימותי סוכנים</h4> <p className="text-sm text-muted-foreground">שליחת התראות על בקשות אימות חדשות</p> </div> <div className="flex items-center space-x-2"> <Button variant="outline" size="sm"> <Bell className="ml-2 h-4 w-4" /> הגדרות </Button> </div> </div> <div className="flex items-center justify-between"> <div> <h4 className="font-medium">התראות על מחלוקות</h4> <p className="text-sm text-muted-foreground">שליחת התראות על מחלוקות חדשות</p> </div> <div className="flex items-center space-x-2"> <Button variant="outline" size="sm"> <Bell className="ml-2 h-4 w-4" /> הגדרות </Button> </div> </div> </CardContent> </Card> </TabsContent> <TabsContent value="admins" className="space-y-4 pt-4"> <Card> <CardHeader> <CardTitle>ניהול מנהלים</CardTitle> <CardDescription>ניהול משתמשי מנהל במערכת</CardDescription> </CardHeader> <CardContent> <div className="flex justify-end mb-4"> <Button>הוספת מנהל חדש</Button> </div> <Table> <TableHeader> <TableRow> <TableHead>שם</TableHead> <TableHead>אימייל</TableHead> <TableHead>תפקיד</TableHead> <TableHead>הרשאות</TableHead> <TableHead>סטטוס</TableHead> <TableHead>פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {adminsData.map((admin, index) => ( <TableRow key={index}> <TableCell className="font-medium">{admin.name}</TableCell> <TableCell>{admin.email}</TableCell> <TableCell>{admin.role}</TableCell> <TableCell>{admin.permissions}</TableCell> <TableCell> <Badge className={ admin.status === "פעיל" ? "bg-green-100 text-green-800 hover:bg-green-100" : "bg-red-100 text-red-800 hover:bg-red-100" } > {admin.status} </Badge> </TableCell> <TableCell> <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="sm"> פעולות </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem>עריכה</DropdownMenuItem> <DropdownMenuItem>שינוי הרשאות</DropdownMenuItem> <DropdownMenuItem>השבתה</DropdownMenuItem> <DropdownMenuItem>איפוס סיסמה</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> </TabsContent> <TabsContent value="logs" className="space-y-4 pt-4"> <Card> <CardHeader> <CardTitle>לוג פעולות מנהל</CardTitle> <CardDescription>היסטוריית פעולות מנהלים במערכת</CardDescription> </CardHeader> <CardContent> <div className="flex justify-between items-center mb-4"> <div className="relative"> <Search className="absolute right-3 top-2.5 h-4 w-4 text-muted-foreground" /> <Input placeholder="חיפוש..." className="pr-9 w-[250px]" /> </div> <Button variant="outline"> <Download className="ml-2 h-4 w-4" /> ייצוא לוג </Button> </div> <Table> <TableHeader> <TableRow> <TableHead>תאריך ושעה</TableHead> <TableHead>מנהל</TableHead> <TableHead>פעולה</TableHead> <TableHead>פרטים</TableHead> <TableHead>IP</TableHead> </TableRow> </TableHeader> <TableBody> {adminLogsData.map((log, index) => ( <TableRow key={index}> <TableCell className="font-medium">{log.timestamp}</TableCell> <TableCell>{log.admin}</TableCell> <TableCell>{log.action}</TableCell> <TableCell>{log.details}</TableCell> <TableCell>{log.ip}</TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> </TabsContent> </Tabs> </div> ) } [V0_FILE]typescript:file="lib/agent-dashboard-utils.ts" import { Star } from "lucide-react" import type { JSX } from "react" // Format date utility export const formatDate = (dateString: string | undefined | null) => { if (!dateString) { return "לא צוין" } try { const date = new Date(dateString) // Check if date is valid if (isNaN(date.getTime())) { return "תאריך לא תקין" } return new Intl.DateTimeFormat("he-IL").format(date) } catch (error) { console.error("Error formatting date:", error) return "תאריך לא תקין" } } // Format currency utility export const formatCurrency = (amount: number) => { return new Intl.NumberFormat("he-IL", { style: "currency", currency: "ILS" }).format(amount) } // Render star rating utility export const renderStars = (rating: number): JSX.Element => { return ( <div className="flex text-yellow-400"> {Array.from({ length: 5 }).map((_, i) => ( <Star key={i} className="w-4 h-4" fill={i < rating ? "currentColor" : "none"} strokeWidth={i < rating ? 0 : 1.5} /> ))} </div> ) } // Get audience description utility export const getAudienceDescription = (targetAudience: any) => { if (targetAudience.ageRanges.includes("any") && targetAudience.sectors.includes("any")) { return "כל הקהלים" } const descriptions = [] if (!targetAudience.ageRanges.includes("any")) { descriptions.push(`גילאי ${targetAudience.ageRanges.join(", ")}`) } if (!targetAudience.sectors.includes("any")) { const sectorNames = targetAudience.sectors.map((sector: string) => { switch (sector) { case "hitech": return "הייטק" case "education": return "חינוך" case "finance": return "פיננסים" case "healthcare": return "רפואה" case "industry": return "תעשייה" default: return "אחר" } }) descriptions.push(sectorNames.join(", ")) } return descriptions.join(", ") || "כל הקהלים" } // Find offer by ID utility export const findOfferById = (offerId: string, offersData: any) => { const allOffers = [...offersData.pension, ...offersData.provident, ...offersData.investment] return allOffers.find((offer: any) => offer.id === offerId) } // Get expiring offers utility export const getExpiringOffers = (offersData: any) => { return [...offersData.pension, ...offersData.provident, ...offersData.investment] .filter((offer) => { const expiryDate = new Date(offer.endDate) const today = new Date() const diffTime = expiryDate.getTime() - today.getTime() const diffDays = Math.ceil(diffTime / (1000 60 * 60 * 24)) return diffDays <= 7 && diffDays > 0 }) .map((offer) => ({ id: offer.id, title: offer.title, expiryDate: offer.endDate, daysRemaining: Math.ceil((new Date(offer.endDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)), })) } // Get offers expiring in 1 day utility export const getOneDayExpiringOffers = (offersData: any) => { return [...offersData.pension, ...offersData.provident, ...offersData.investment] .filter((offer) => { const expiryDate = new Date(offer.endDate) const today = new Date() const diffTime = expiryDate.getTime() - today.getTime() const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) return diffDays === 1 }) .map((offer) => ({ id: offer.id, title: offer.title, expiryDate: offer.endDate, })) } [V0_FILE]typescriptreact:file="components/agent-dashboard/chart-renderers.tsx" "use client" import { leadsData } from "@/lib/agent-dashboard-data" import type { JSX } from "react" interface ChartRenderersProps { offersData: any } export function useChartRenderers({ offersData }: ChartRenderersProps) { // Render lead activity chart const renderLeadActivityChart = (): JSX.Element => { const maxViews = Math.max(...leadsData.activityData.map((d) => d.views)) const maxContacts = Math.max(...leadsData.activityData.map((d) => d.contacts)) const maxConversions = Math.max(...leadsData.activityData.map((d) => d.conversions)) const maxValue = Math.max(maxViews, maxContacts, maxConversions) const colors = { views: "#6366f1", contacts: "#10b981", conversions: "#f59e0b", axis: "#94a3b8", text: "#64748b", background: "rgba(248, 250, 252, 0.8)", } return ( <div className="h-64 w-full relative"> <svg className="w-full h-full" viewBox="0 0 700 300" preserveAspectRatio="none"> <defs> <linearGradient id="viewsGradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor={colors.views} stopOpacity="0.2" /> <stop offset="100%" stopColor={colors.views} stopOpacity="0.05" /> </linearGradient> <linearGradient id="contactsGradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor={colors.contacts} stopOpacity="0.2" /> <stop offset="100%" stopColor={colors.contacts} stopOpacity="0.05" /> </linearGradient> <linearGradient id="conversionsGradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor={colors.conversions} stopOpacity="0.2" /> <stop offset="100%" stopColor={colors.conversions} stopOpacity="0.05" /> </linearGradient> </defs> <rect x="50" y="50" width="600" height="200" fill={colors.background} rx="4" /> <line x1="50" y1="250" x2="650" y2="250" stroke={colors.axis} strokeWidth="1.5" /> <line x1="50" y1="50" x2="50" y2="250" stroke={colors.axis} strokeWidth="1.5" /> {[0, 1, 2, 3, 4].map((i) => ( <text key={`y-label-${i}`} x="40" y={255 - i * 50} textAnchor="end" fontSize="12" fill={colors.text} fontFamily="system-ui, sans-serif" fontWeight="500" > {Math.round((maxValue / 4) * i)} </text> ))} {leadsData.activityData.map((d, i) => ( <text key={`x-label-${i}`} x={50 + i * (600 / (leadsData.activityData.length - 1))} y="270" textAnchor="middle" fontSize="12" fill={colors.text} fontFamily="system-ui, sans-serif" fontWeight="500" > {new Date(d.date).toLocaleDateString("he-IL", { month: "numeric", day: "numeric" })} </text> ))} <path d={` M${50},${250} ${leadsData.activityData .map((d, i) => { const x = 50 + i * (600 / (leadsData.activityData.length - 1)) const y = 250 - (d.views / maxValue) * 200 return `L${x},${y}` }) .join(" ")} L${50 + (leadsData.activityData.length - 1) * (600 / (leadsData.activityData.length - 1))},${250} Z `} fill="url(#viewsGradient)" opacity="0.7" /> <path d={` M${50},${250 - (leadsData.activityData[0].views / maxValue) * 200} ${leadsData.activityData .slice(1) .map((d, i) => { const x = 50 + (i + 1) * (600 / (leadsData.activityData.length - 1)) const y = 250 - (d.views / maxValue) * 200 return `S${x - 30},${y} ${x},${y}` }) .join(" ")} `} fill="none" stroke={colors.views} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /> <path d={` M${50},${250 - (leadsData.activityData[0].contacts / maxValue) * 200} ${leadsData.activityData .slice(1) .map((d, i) => { const x = 50 + (i + 1) * (600 / (leadsData.activityData.length - 1)) const y = 250 - (d.contacts / maxValue) * 200 return `S${x - 30},${y} ${x},${y}` }) .join(" ")} `} fill="none" stroke={colors.contacts} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /> <path d={` M${50},${250 - (leadsData.activityData[0].conversions / maxValue) * 200} ${leadsData.activityData .slice(1) .map((d, i) => { const x = 50 + (i + 1) * (600 / (leadsData.activityData.length - 1)) const y = 250 - (d.conversions / maxValue) * 200 return `S${x - 30},${y} ${x},${y}` }) .join(" ")} `} fill="none" stroke={colors.conversions} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /> </svg> <div className="flex justify-center gap-6 text-sm mt-2 font-medium"> <div className="flex items-center"> <div className="w-3 h-3 rounded-full ml-1" style={{ backgroundColor: colors.views }}></div> <span>צפיות</span> </div> <div className="flex items-center"> <div className="w-3 h-3 rounded-full ml-1" style={{ backgroundColor: colors.contacts }}></div> <span>יצירות קשר</span> </div> <div className="flex items-center"> <div className="w-3 h-3 rounded-full ml-1" style={{ backgroundColor: colors.conversions }}></div> <span>המרות</span> </div> </div> </div> ) } // Render offer performance chart const renderOfferPerformanceChart = (offerType: string): JSX.Element => { const offers = offersData[offerType as keyof typeof offersData] if (!offers || offers.length === 0) { return ( <div className="h-64 w-full bg-gray-50 rounded-lg border flex items-center justify-center"> <div className="text-center p-4"> <div className="h-12 w-12 text-gray-400 mx-auto mb-2">📊</div> <p className="text-gray-500">אין נתונים להצגת גרף</p> <p className="text-sm text-gray-400">לא נמצאו הצעות מסוג זה</p> </div> </div> ) } const maxViews = Math.max(...offers.map((offer: any) => Math.max(...offer.viewsOverTime))) const maxContacts = Math.max(...offers.map((offer: any) => Math.max(...offer.contactsOverTime))) const maxValue = Math.max(maxViews, maxContacts) const colors = { views: "#6366f1", contacts: "#10b981", axis: "#94a3b8", text: "#64748b", background: "rgba(248, 250, 252, 0.8)", } return ( <div className="h-64 w-full relative"> <svg className="w-full h-full" viewBox="0 0 700 300" preserveAspectRatio="none"> <defs> <linearGradient id="viewsGradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor={colors.views} stopOpacity="0.2" /> <stop offset="100%" stopColor={colors.views} stopOpacity="0.05" /> </linearGradient> <linearGradient id="contactsGradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor={colors.contacts} stopOpacity="0.2" /> <stop offset="100%" stopColor={colors.contacts} stopOpacity="0.05" /> </linearGradient> </defs> <rect x="50" y="50" width="600" height="200" fill={colors.background} rx="4" /> <line x1="50" y1="250" x2="650" y2="250" stroke={colors.axis} strokeWidth="1.5" /> <line x1="50" y1="50" x2="50" y2="250" stroke={colors.axis} strokeWidth="1.5" /> {[0, 1, 2, 3, 4].map((i) => ( <text key={`y-label-${i}`} x="40" y={255 - i * 50} textAnchor="end" fontSize="12" fill={colors.text} fontFamily="system-ui, sans-serif" fontWeight="500" > {Math.round((maxValue / 4) * i)} </text> ))} {offers[0].viewsOverTime.map((_: any, i: number) => ( <text key={`x-label-${i}`} x={50 + i * (600 / (offers[0].viewsOverTime.length - 1))} y="270" textAnchor="middle" fontSize="12" fill={colors.text} fontFamily="system-ui, sans-serif" fontWeight="500" > {i + 1} </text> ))} <path d={` M${50},${250} ${offers[0].viewsOverTime .map((views: number, i: number) => { const x = 50 + i * (600 / (offers[0].viewsOverTime.length - 1)) const y = 250 - (views / maxValue) * 200 return `L${x},${y}` }) .join(" ")} L${50 + (offers[0].viewsOverTime.length - 1) * (600 / (offers[0].viewsOverTime.length - 1))},${250} Z `} fill="url(#viewsGradient)" opacity="0.7" /> <path d={` M${50},${250 - (offers[0].viewsOverTime[0] / maxValue) * 200} ${offers[0].viewsOverTime .slice(1) .map((views: number, i: number) => { const x = 50 + (i + 1) * (600 / (offers[0].viewsOverTime.length - 1)) const y = 250 - (views / maxValue) * 200 return `S${x - 30},${y} ${x},${y}` }) .join(" ")} `} fill="none" stroke={colors.views} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /> <path d={` M${50},${250 - (offers[0].contactsOverTime[0] / maxValue) * 200} ${offers[0].contactsOverTime .slice(1) .map((contacts: number, i: number) => { const x = 50 + (i + 1) * (600 / (offers[0].contactsOverTime.length - 1)) const y = 250 - (contacts / maxValue) * 200 return `S${x - 30},${y} ${x},${y}` }) .join(" ")} `} fill="none" stroke={colors.contacts} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /> </svg> <div className="flex justify-center gap-6 text-sm mt-2 font-medium"> <div className="flex items-center"> <div className="w-3 h-3 rounded-full ml-1" style={{ backgroundColor: colors.views }}></div> <span>צפיות</span> </div> <div className="flex items-center"> <div className="w-3 h-3 rounded-full ml-1" style={{ backgroundColor: colors.contacts }}></div> <span>יצירות קשר</span> </div> </div> </div> ) } return { renderLeadActivityChart, renderOfferPerformanceChart, } } [V0_FILE]typescriptreact:file="lib/constants.ts" isQuickEdit="true" // Demo user removed for security and privacy [V0_FILE]typescript:file="lib/mock/mockOffers.ts" // Pension and provident fund offers export const providentFundOffers = [ { id: "pf-offer-1", company: "מיטב דש", managementFeeAccumulated: 0.22, managementFeeDeposit: 0.8, savingsAmount: 85000, status: "pending", investmentTrack: "מסלול כללי", agent: { name: "רונית לוי", rating: 5, specialization: "קרנות השתלמות", agency: "סוכנות פיננסים עתיד", phone: "050-1234567", email: "ronit@finance-future.co.il", reviews: [ { text: "רונית מקצועית מאוד ועזרה לי להשיג תנאים מעולים", author: "יעל כהן", rating: 5 }, { text: "שירות אישי ומהיר, ממליץ בחום", author: "אבי לוי", rating: 5 }, ], }, }, { id: "pf-offer-2", company: "אלטשולר שחם", managementFeeAccumulated: 0.25, managementFeeDeposit: 0.9, savingsAmount: 92000, status: "pending", investmentTrack: "מסלול מניות", agent: { name: "אלון גולן", rating: 4, specialization: "קרנות השתלמות והשקעות", agency: "גולן יועצים פיננסיים", phone: "050-7654321", email: "alon@golan-finance.co.il", reviews: [ { text: "אלון מקצועי ואכפתי, עוזר בכל שאלה", author: "דנה שרון", rating: 4 }, { text: "קיבלתי ייעוץ מצוין והצעה משתלמת", author: "יוסי כהן", rating: 5 }, ], }, }, { id: "pf-offer-3", company: "הראל", managementFeeAccumulated: 0.3, managementFeeDeposit: 1.0, savingsAmount: 78000, status: "pending", investmentTrack: "מסלול אג״ח", agent: { name: "שירה אברהם", rating: 4, specialization: "תכנון פיננסי כולל", agency: "הראל סוכנויות", phone: "050-9876543", email: "shira@harel-agency.co.il", reviews: [ { text: "שירה מקצועית ונותנת שירות מעולה", author: "רונן לוי", rating: 4 }, { text: "תמיד זמינה לשאלות ועוזרת בכל נושא", author: "מיכל גולן", rating: 4 }, ], }, }, ] export const pensionFundOffers = [ { id: "pension-offer-1", company: "מנורה מבטחים", managementFeeAccumulated: 0.18, managementFeeDeposit: 0.7, savingsAmount: 110000, status: "pending", investmentTrack: "מסלול כללי", agent: { name: "דוד ישראלי", rating: 5, specialization: "קופות גמל וחיסכון ארוך טווח", agency: "ישראלי יועצים פנסיוניים", phone: "050-1122334", email: "david@israeli-pension.co.il", reviews: [ { text: "דוד עזר לי להבין את כל האפשרויות ולבחור את המסלול הטוב ביותר", author: "אורית כהן", rating: 5 }, { text: "שירות מקצועי ואדיב, ממליץ בחום", author: "יעקב לוי", rating: 5 }, ], }, }, { id: "pension-offer-2", company: "פסגות", managementFeeAccumulated: 0.2, managementFeeDeposit: 0.8, savingsAmount: 105000, status: "pending", investmentTrack: "מסלול מניות", agent: { name: "מיכל דוידוב", rating: 4, specialization: "קופות גמל והשקעות", agency: "פסגות סוכנויות", phone: "050-5566778", email: "michal@psagot-agency.co.il", reviews: [ { text: "מיכל מקצועית ואכפתית, עוזרת בכל שאלה", author: "רונן כהן", rating: 4 }, { text: "קיבלתי ייעוץ מצוין והצעה משתלמת", author: "שרה לוי", rating: 4 }, ], }, }, { id: "pension-offer-3", company: "כלל", managementFeeAccumulated: 0.22, managementFeeDeposit: 0.9, savingsAmount: 98000, status: "pending", investmentTrack: "מסלול הלכה", agent: { name: "יוסף אברהמי", rating: 4, specialization: "תכנון פרישה וקופות גמל", agency: "כלל סוכנויות", phone: "050-9988776", email: "yosef@clal-agency.co.il", reviews: [ { text: "יוסף מקצועי ונותן שירות מעולה", author: "דן לוי", rating: 4 }, { text: "תמיד זמין לשאלות ועוזר בכל נושא", author: "רחל כהן", rating: 5 }, ], }, }, ] // Agent dashboard offers data export const initialOffersData = { pension: [ { id: "offer-1", title: "חיסכון מקסימלי לפנסיה", audience: "עובדי הייטק", views: 145, contacts: 28, lastUpdate: "2023-05-01", status: "פעיל", endDate: "2023-06-15", managementFeeAccumulation: 0.25, managementFeeDeposit: 2.0, managingCompany: "מגדל", viewsOverTime: [10, 15, 22, 28, 35, 42, 48, 55, 62, 70, 78, 85, 92, 100, 110, 120, 130, 140, 145], contactsOverTime: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 25, 26, 27, 28, 28, 28, 28], }, { id: "offer-2", title: "פנסיה למשפחות צעירות", audience: "גילאי 30-40", views: 98, contacts: 15, lastUpdate: "2023-04-20", status: "פעיל", endDate: "2023-06-10", managementFeeAccumulation: 0.3, managementFeeDeposit: 1.8, managingCompany: "הראל", viewsOverTime: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 98], contactsOverTime: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 15, 15, 15, 15], }, ], provident: [ { id: "offer-3", title: "קרן השתלמות ללא דמי ניהול", audience: "כל הגילאים", views: 210, contacts: 42, lastUpdate: "2023-05-05", status: "פעיל", endDate: "2023-07-01", managementFeeAccumulation: 0.2, managementFeeDeposit: 0, managingCompany: "אלטשולר שחם", viewsOverTime: [15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210], contactsOverTime: [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42], }, { id: "offer-4", title: "השתלמות למגזר הציבורי", audience: "עובדי מדינה", views: 76, contacts: 18, lastUpdate: "2023-04-15", status: "פעיל", endDate: "2023-06-20", managementFeeAccumulation: 0.4, managementFeeDeposit: 0, managingCompany: "מנורה", viewsOverTime: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 76], contactsOverTime: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 17, 18], }, ], investment: [ { id: "offer-5", title: "גמל להשקעה - מסלול מניות", audience: "משקיעים מנוסים", views: 89, contacts: 12, lastUpdate: "2023-04-28", status: "פעיל", endDate: "2023-06-05", managementFeeAccumulation: 0.6, managementFeeDeposit: 0, managingCompany: "פסגות", viewsOverTime: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 89], contactsOverTime: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12, 12, 12, 12, 12, 12], }, ], } // Admin dashboard offers data export const offersData = [ { id: "O-2001", agentName: "דוד לוי", type: "פנסיה", expirationDate: "18/06/2025", views: 120, contactRequests: 15 }, { id: "O-2002", agentName: "שרה כהן", type: "גמל", expirationDate: "20/06/2025", views: 85, contactRequests: 8 }, { id: "O-2003", agentName: "רחל אברהם", type: "השתלמות", expirationDate: "25/06/2025", views: 150, contactRequests: 22, }, { id: "O-2004", agentName: "דוד לוי", type: "פנסיה", expirationDate: "30/06/2025", views: 95, contactRequests: 12 }, { id: "O-2005", agentName: "שרה כהן", type: "גמל", expirationDate: "05/07/2025", views: 110, contactRequests: 18 }, ] export const offersComparisonData = [ { name: "O-2003 (רחל)", צפיות: 150, "בקשות קשר": 22 }, { name: "O-2001 (דוד)", צפיות: 120, "בקשות קשר": 15 }, { name: "O-2005 (שרה)", צפיות: 110, "בקשות קשר": 18 }, { name: "O-2004 (דוד)", צפיות: 95, "בקשות קשר": 12 }, { name: "O-2002 (שרה)", צפיות: 85, "בקשות קשר": 8 }, ] [V0_FILE]typescript:file="lib/mock/mockLeads.ts" // Agent dashboard leads data export const leadsData = { summary: { totalOfferViews: 324, totalLeads: 47, convertedLeads: 12, conversionRate: 26, }, recentLeads: [ { id: "lead-1", name: "יוסי כהן", email: "yossi@example.com", phone: "054-1234567", age: "30-40", sector: "הייטק", fund: "מגדל", date: "2023-05-10", status: "חדש", interestType: "יצור עמך קשר עצמאית", contacted: false, preferredContact: "phone", relatedOffer: "חיסכון מקסימלי לפנסיה", relatedOfferId: "offer-1", }, { id: "lead-2", name: "שרה לוי", email: "sarah@example.com", phone: "052-7654321", age: "40-50", sector: "חינוך", fund: "הראל", date: "2023-05-09", status: "בטיפול", interestType: "ביקש יצירת קשר", contacted: false, preferredContact: "email", relatedOffer: "פנסיה למשפחות צעירות", relatedOfferId: "offer-2", }, { id: "lead-3", name: "דוד ישראלי", email: "david@example.com", phone: "050-9876543", age: "25-35", sector: "פיננסים", fund: "מנורה", date: "2023-05-08", status: "חדש", interestType: "יצור עמך קשר עצמאית", contacted: false, preferredContact: "phone", relatedOffer: "קרן השתלמות ללא דמי ניהול", relatedOfferId: "offer-3", }, { id: "lead-4", name: "מיכל אברהם", email: "michal@example.com", phone: "053-6543210", age: "35-45", sector: "רפואה", fund: "כלל", date: "2023-05-07", status: "חדש", interestType: "ביקש יצירת קשר", contacted: false, preferredContact: "email", relatedOffer: "גמל להשקעה - מסלול מניות", relatedOfferId: "offer-5", }, { id: "lead-5", name: "אבי גולדשטיין", email: "avi@example.com", phone: "058-1122334", age: "50-60", sector: "תעשייה", fund: "הפניקס", date: "2023-05-06", status: "בטיפול", interestType: "ביקש יצירת קשר", contacted: true, preferredContact: "phone", relatedOffer: "חיסכון מקסימלי לפנסיה", relatedOfferId: "offer-1", }, ], activityData: [ { date: "2023-04-01", views: 12, contacts: 2, conversions: 1 }, { date: "2023-04-08", views: 18, contacts: 4, conversions: 2 }, { date: "2023-04-15", views: 15, contacts: 3, conversions: 1 }, { date: "2023-04-22", views: 22, contacts: 5, conversions: 3 }, { date: "2023-04-29", views: 28, contacts: 7, conversions: 4 }, { date: "2023-05-06", views: 32, contacts: 8, conversions: 5 }, { date: "2023-05-13", views: 38, contacts: 10, conversions: 6 }, ], } // Admin dashboard leads data export const adminLeadsData = [ { id: "L-1001", clientName: "ישראל ישראלי", agentName: "דוד לוי", offerId: "O-2001", date: "18/05/2025", type: "פנסיה", status: "בתהליך", }, { id: "L-1002", clientName: "מיכל לוי", agentName: "שרה כהן", offerId: "O-2002", date: "17/05/2025", type: "גמל", status: "הושלם", }, { id: "L-1003", clientName: "יוסי כהן", agentName: "רחל אברהם", offerId: "O-2003", date: "16/05/2025", type: "השתלמות", status: "בתהליך", }, { id: "L-1004", clientName: "רונית אברהם", agentName: "דוד לוי", offerId: "O-2004", date: "15/05/2025", type: "פנסיה", status: "נדחה", }, { id: "L-1005", clientName: "אבי משה", agentName: "שרה כהן", offerId: "O-2005", date: "14/05/2025", type: "גמל", status: "הושלם", }, ] export const leadsTrendData = [ { name: "פנסיה", הושלם: 45, בתהליך: 30, נדחה: 15 }, { name: "גמל", הושלם: 35, בתהליך: 25, נדחה: 10 }, { name: "השתלמות", הושלם: 50, בתהליך: 20, נדחה: 5 }, ] [V0_FILE]typescript:file="lib/mock/mockReviews.ts" // Agent dashboard reviews data export const reviewsData = { summary: { averageRating: 4.6, totalReviews: 23, positivePercentage: 87, }, reviews: [ { id: "review-1", client: "לקוח פנסיה", rating: 5, comment: "דוד עזר לי להבין את כל האפשרויות ולבחור את המסלול הטוב ביותר עבורי. חסכתי הרבה כסף בזכותו.", date: "2023-05-01", }, { id: "review-2", client: "לקוח קרן השתלמות", rating: 5, comment: "שירות מעולה ומקצועי, ממליץ בחום!", date: "2023-04-25", }, { id: "review-3", client: "לקוח פנסיה", rating: 4, comment: "הצעה טובה וחיסכון משמעותי. הייתי שמח ליותר הסברים על המסלול.", date: "2023-04-20", }, { id: "review-4", client: "לקוח גמל להשקעה", rating: 5, comment: "דוד מקצועי מאוד ועזר לי להשיג תנאים מעולים.", date: "2023-04-15", }, { id: "review-5", client: "לקוח פנסיה", rating: 4, comment: "שירות טוב, מענה מהיר לשאלות.", date: "2023-04-10" }, ], } // Admin dashboard reviews data export const adminReviewsData = [ { reviewerName: "ישראל ישראלי", agentName: "דוד לוי", rating: 5, comment: "שירות מעולה, דוד עזר לי להבין את כל האפשרויות ולבחור את הפנסיה המתאימה ביותר.", date: "15/05/2025", flagged: false, }, { reviewerName: "מיכל לוי", agentName: "שרה כהן", rating: 4, comment: "שרה הייתה מקצועית מאוד, אך לקח זמן לקבל מענה.", date: "14/05/2025", flagged: false, }, { reviewerName: "יוסי כהן", agentName: "רחל אברהם", rating: 5, comment: "רחל נתנה שירות יוצא מן הכלל, חסכה לי הרבה כסף!", date: "13/05/2025", flagged: false, }, { reviewerName: "רונית אברהם", agentName: "דוד לוי", rating: 2, comment: "לא הייתי מרוצה מהשירות, הרגשתי שדוד לא הקשיב לצרכים שלי.", date: "12/05/2025", flagged: true, }, { reviewerName: "אבי משה", agentName: "שרה כהן", rating: 3, comment: "שירות סביר, אך לא מעבר לכך.", date: "11/05/2025", flagged: false, }, ] [V0_FILE]typescript:file="lib/mock/mockChartData.ts" // Performance data for agent dashboard export const performanceData = { kpis: { offerAcceptanceRate: 65, averageSavings: 120000, profileViews: 324, averageRating: 4.6, }, trends: { viewsLastMonth: [ 42, 38, 55, 48, 65, 58, 60, 55, 70, 68, 72, 75, 80, 82, 85, 88, 92, 95, 100, 105, 108, 112, 115, 120, 125, 130, 135, 140, 145, ], contactsLastMonth: [ 5, 4, 8, 6, 10, 9, 12, 10, 15, 14, 16, 18, 20, 22, 24, 25, 28, 30, 32, 35, 38, 40, 42, 45, 48, 50, 52, 55, 59, ], }, clientIndustries: [ { industry: "הייטק", percentage: 35 }, { industry: "חינוך", percentage: 20 }, { industry: "פיננסים", percentage: 15 }, { industry: "רפואה", percentage: 12 }, { industry: "תעשייה", percentage: 10 }, { industry: "אחר", percentage: 8 }, ], benchmarks: { offerAcceptanceRate: { agent: 65, platform: 45 }, averageSavings: { agent: 120000, platform: 85000 }, responseTime: { agent: 6, platform: 12 }, // hours clientSatisfaction: { agent: 4.6, platform: 4.2 }, }, } // Admin dashboard chart data generators export function generateDailySignupData() { const data = [] const now = new Date() for (let i = 29; i >= 0; i--) { const date = new Date(now) date.setDate(date.getDate() - i) const dateStr = `${date.getDate()}/${date.getMonth() + 1}` data.push({ date: dateStr, clients: Math.floor(Math.random() * 20) + 5, agents: Math.floor(Math.random() * 5) + 1, }) } return data } export function generateLeadActivityData() { const data = [] const now = new Date() for (let i = 29; i >= 0; i--) { const date = new Date(now) date.setDate(date.getDate() - i) const dateStr = `${date.getDate()}/${date.getMonth() + 1}` data.push({ date: dateStr, views: Math.floor(Math.random() * 100) + 50, contacts: Math.floor(Math.random() * 30) + 5, }) } return data } [V0_FILE]typescript:file="lib/mock/mockDisputes.ts" // Admin dashboard disputes data export const disputesData = [ { id: "D-1001", client: "ישראל ישראלי", agent: "דוד לוי", subject: "אי התאמה בתנאי ההצעה", date: "15/05/2025", status: "חדש", description: "הלקוח טוען כי תנאי ההצעה שקיבל בפועל שונים מאלו שהוצגו לו בפלטפורמה. דמי הניהול גבוהים ב-0.3% ממה שהובטח.", }, { id: "D-1002", client: "מיכל לוי", agent: "שרה כהן", subject: "אי זמינות הסוכן", date: "14/05/2025", status: "בבדיקה", description: "הלקוחה מתלוננת שהסוכנת לא זמינה למענה על שאלות ולא חזרה אליה במשך שבוע שלם למרות פניות חוזרות.", }, { id: "D-1003", client: "יוסי כהן", agent: "רחל אברהם", subject: "ביטול עסקה", date: "13/05/2025", status: "נפתר", description: "הלקוח ביקש לבטל את העסקה בתוך 14 ימים כנדרש בחוק, אך הסוכנת התעכבה בטיפול. הנושא טופל והעסקה בוטלה.", }, { id: "D-1004", client: "רונית אברהם", agent: "דוד לוי", subject: "חוסר הבנה בתנאי הפוליסה", date: "12/05/2025", status: "בבדיקה", description: "הלקוחה טוענת שהסוכן לא הסביר לה את כל תנאי הפוליסה, במיוחד בנוגע לתקופת האכשרה והחריגים.", }, { id: "D-1005", client: "אבי משה", agent: "שרה כהן", subject: "טענה להטעיה", date: "11/05/2025", status: "חדש", description: "הלקוח טוען שהוטעה לגבי התשואות הצפויות והציג מצגים שלא תואמים את המציאות.", }, ] [V0_FILE]typescript:file="lib/mock/mockActivity.ts" // Admin dashboard recent activities export const recentActivities = [ { action: "אישור סוכן", user: "דוד לוי", date: "15/05/2025", status: "הושלם" }, { action: "דחיית סוכן", user: "רונית כהן", date: "15/05/2025", status: "הושלם" }, { action: "טיפול במחלוקת", user: "יעל אברהם", date: "14/05/2025", status: "בתהליך" }, { action: "הסרת ביקורת", user: "משה ישראלי", date: "14/05/2025", status: "הושלם" }, { action: "עדכון הגדרות מערכת", user: "מנהל מערכת", date: "13/05/2025", status: "הושלם" }, ] // Admin logs data export const adminLogsData = [ { timestamp: "18/05/2025 14:32", admin: "מנהל מערכת", action: "אישור סוכן", details: "אישור סוכן: יעקב ישראלי", ip: "192.168.1.1", }, { timestamp: "18/05/2025 13:15", admin: "יעל אברהם", action: "הסרת ביקורת", details: "הסרת ביקורת מס' 123 - תוכן לא הולם", ip: "192.168.1.2", }, { timestamp: "18/05/2025 11:45", admin: "משה ישראלי", action: "דחיית סוכן", details: "דחיית סוכן: עומר דוד - מסמכים חסרים", ip: "192.168.1.3", }, { timestamp: "18/05/2025 10:20", admin: "רונית כהן", action: "פתרון מחלוקת", details: "פתרון מחלוקת מס' D-1003", ip: "192.168.1.4", }, { timestamp: "18/05/2025 09:05", admin: "מנהל מערכת", action: "עדכון הגדרות", details: "שינוי הגדרות תפוגת הצעות ל-45 ימים", ip: "192.168.1.1", }, ] [V0_FILE]typescript:file="lib/mock/mockFilters.ts" // Dashboard filter options and initial states export const initialFilters = { companies: [], regions: [], specialties: [], investmentTracks: [], agentRating: { min: 4, max: 5 }, lowerAccumulationFee: false, lowerDepositFee: false, higherSavings: false, } export const initialSelectedOptions = { companies: [], regions: [], specialties: [], investmentTracks: [], agentRatings: [], managementFees: [], } [V0_FILE]typescript:file="lib/dashboard-data.ts" isFixed="true" isQuickEdit="true" // Extracted mock data and constants from dashboard page.tsx export const providentFundOffers = [ { id: "pf-offer-1", company: "מיטב דש", managementFeeAccumulated: 0.22, managementFeeDeposit: 0.8, savingsAmount: 85000, status: "pending", investmentTrack: "מסלול כללי", agent: { name: "רונית לוי", rating: 5, specialization: "קרנות השתלמות", agency: "סוכנות פיננסים עתיד", phone: "050-1234567", email: "ronit@finance-future.co.il", reviews: [ { text: "רונית מקצועית מאוד ועזרה לי להשיג תנאים מעולים", author: "יעל כהן", rating: 5 }, { text: "שירות אישי ומהיר, ממליץ בחום", author: "אבי לוי", rating: 5 }, ], }, }, { id: "pf-offer-2", company: "אלטשולר שחם", managementFeeAccumulated: 0.25, managementFeeDeposit: 0.9, savingsAmount: 92000, status: "pending", investmentTrack: "מסלול מניות", agent: { name: "אלון גולן", rating: 4, specialization: "קרנות השתלמות והשקעות", agency: "גולן יועצים פיננסיים", phone: "050-7654321", email: "alon@golan-finance.co.il", reviews: [ { text: "אלון מקצועי ואכפתי, עוזר בכל שאלה", author: "דנה שרון", rating: 4 }, { text: "קיבלתי ייעוץ מצוין והצעה משתלמת", author: "יוסי כהן", rating: 5 }, ], }, }, { id: "pf-offer-3", company: "הראל", managementFeeAccumulated: 0.3, managementFeeDeposit: 1.0, savingsAmount: 78000, status: "pending", investmentTrack: "מסלול אג״ח", agent: { name: "שירה אברהם", rating: 4, specialization: "תכנון פיננסי כולל", agency: "הראל סוכנויות", phone: "050-9876543", email: "shira@harel-agency.co.il", reviews: [ { text: "שירה מקצועית ונותנת שירות מעולה", author: "רונן לוי", rating: 4 }, { text: "תמיד זמינה לשאלות ועוזרת בכל נושא", author: "מיכל גולן", rating: 4 }, ], }, }, ] export const pensionFundOffers = [ { id: "pension-offer-1", company: "מנורה מבטחים", managementFeeAccumulated: 0.18, managementFeeDeposit: 0.7, savingsAmount: 110000, status: "pending", investmentTrack: "מסלול כללי", agent: { name: "דוד ישראלי", rating: 5, specialization: "קופות גמל וחיסכון ארוך טווח", agency: "ישראלי יועצים פנסיוניים", phone: "050-1122334", email: "david@israeli-pension.co.il", reviews: [ { text: "דוד עזר לי להבין את כל האפשרויות ולבחור את המסלול הטוב ביותר", author: "אורית כהן", rating: 5 }, { text: "שירות מקצועי ואדיב, ממליץ בחום", author: "יעקב לוי", rating: 5 }, ], }, }, { id: "pension-offer-2", company: "פסגות", managementFeeAccumulated: 0.2, managementFeeDeposit: 0.8, savingsAmount: 105000, status: "pending", investmentTrack: "מסלול מניות", agent: { name: "מיכל דוידוב", rating: 4, specialization: "קופות גמל והשקעות", agency: "פסגות סוכנויות", phone: "050-5566778", email: "michal@psagot-agency.co.il", reviews: [ { text: "מיכל מקצועית ואכפתית, עוזרת בכל שאלה", author: "רונן כהן", rating: 4 }, { text: "קיבלתי ייעוץ מצוין והצעה משתלמת", author: "שרה לוי", rating: 4 }, ], }, }, { id: "pension-offer-3", company: "כלל", managementFeeAccumulated: 0.22, managementFeeDeposit: 0.9, savingsAmount: 98000, status: "pending", investmentTrack: "מסלול הלכה", agent: { name: "יוסף אברהמי", rating: 4, specialization: "תכנון פרישה וקופות גמל", agency: "כלל סוכנויות", phone: "050-9988776", email: "yosef@clal-agency.co.il", reviews: [ { text: "יוסף מקצועי ונותן שירות מעולה", author: "دان لוי", rating: 4 }, { text: "תמיד זמין לשאלות ועוזר בכל נושא", author: "רחל כהן", rating: 5 }, ], }, }, ] export const initialFilters = { companies: [], regions: [], specialties: [], investmentTracks: [], agentRating: { min: 4, max: 5 }, lowerAccumulationFee: false, lowerDepositFee: false, higherSavings: false, } export const initialSelectedOptions = { companies: [], regions: [], specialties: [], investmentTracks: [], agentRatings: [], managementFees: [], } // Re-export from mock files for backward compatibility from "@/lib/mock/mockOffers" from "@/lib/mock/mockFilters" import { dashboardStats, mockOffers, chartData } from "./mock-data" export const getDashboardStats = () => dashboardStats export const getOffers = () => mockOffers export const getChartData = () => chartData export const getRecentActivity = () => [ { id: 1, action: "הצעה חדשה התקבלה", time: "לפני 2 שעות", type: "offer" }, { id: 2, action: "ביקורת הושלמה", time: "לפני 5 שעות", type: "review" }, { id: 3, action: "הודעה חדשה", time: "אתמול", type: "message" }, ] [V0_FILE]typescript:file="lib/auth.ts" isFixed="true" isQuickEdit="true" // Updated auth system with role-based users import { demoUsers } from "@/lib/mock/mockUsers" import { demoUser } from "./mock-data" export type UserRole = "client" | "agent" | "admin" export interface User { email: string password: string name: string id: string role: UserRole pensionDetails?: { pensionCompany: string pensionBalance: string managementFeeAccumulated: number managementFeeDeposit: number investmentTrack: string workField: string monthlySalary: string monthlyContribution: string birthDate: string gender: string } offers?: Array<{ id: string company: string managementFeeAccumulated: number managementFeeDeposit: number savingsAmount: number status: string }> // Agent-specific fields agentDetails?: { licenseType: string licenseNumber: string licenseIssueDate: string experience: string clientsCount: string bio: string services: string[] languages: string[] agency: string serviceArea: string verified: boolean } // Agent performance metrics agentMetrics?: { offerAcceptanceRate: number averageSavings: number profileViews: number averageRating: number totalLeads: number convertedLeads: number reviewsCount: number positiveReviewsPercentage: number } } // Simple authentication function for demo purposes export async function authenticateUser(email: string, password: string) { console.log("Authenticating:", { email, password }) // Check if it's one of our demo users const user = Object.values(demoUsers).find((u) => u.email === email) if (user && user.password === password) { return { success: true, user, } } // In a real app, you would check against a database return { success: false, error: "פרטי התחברות שגויים", } } // Export demo user for backward compatibility export { demoUser } export const isAuthenticated = () => { // Mock authentication - always return true for demo return true } export const getCurrentUser = () => { return demoUser } export const logout = () => { // Mock logout functionality console.log("User logged out") } export const getUserRole = () => { const path = typeof window !== "undefined" ? window.location.pathname : "" if (path.includes("/admin-dashboard")) return "admin" if (path.includes("/agent-dashboard")) return "agent" return "client" } [V0_FILE]typescriptreact:file="components/admin-dashboard/overview-content.tsx" isQuickEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { adminStats } from "@/lib/mock-data" export function OverviewContent() { return ( <div className="space-y-6"> {/* Stats Cards /} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">סה״כ משתמשים רשומים</CardTitle> </CardHeader> <CardContent> <div className="flex items-center justify-between"> <div className="text-2xl font-bold">{adminStats.totalUsers}</div> <div className="flex flex-col items-end"> <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">לקוחות: {adminStats.totalClients}</Badge> <Badge className="bg-green-100 text-green-800 hover:bg-green-100 mt-1"> סוכנים: {adminStats.totalAgents} </Badge> </div> </div> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">אימותי סוכנים בהמתנה</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">{adminStats.pendingVerifications}</div> <p className="text-xs text-muted-foreground">5 ממתינים יותר מ-48 שעות</p> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">הצעות פעילות</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">{adminStats.activeOffers}</div> <p className="text-xs text-muted-foreground">32 הצעות חדשות השבוע</p> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">מחלוקות פתוחות</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">{adminStats.openDisputes}</div> <div className="flex items-center mt-1"> <Badge variant="destructive">3 דחופות</Badge> </div> </CardContent> </Card> </div> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/users-content.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Search, Download, Filter } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { clientsData, agentsData } from "@/lib/mock-data" export function UsersContent() { const [userSubTab, setUserSubTab] = useState("clients") return ( <div className="space-y-6"> <div className="flex justify-between items-center"> <div className="flex gap-2"> <Button variant={userSubTab === "clients" ? "default" : "outline"} onClick={() => setUserSubTab("clients")}> לקוחות </Button> <Button variant={userSubTab === "agents" ? "default" : "outline"} onClick={() => setUserSubTab("agents")}> סוכנים </Button> </div> <div className="flex gap-2"> <div className="relative"> <Search className="absolute right-3 top-2.5 h-4 w-4 text-muted-foreground" /> <Input placeholder="חיפוש..." className="pr-9 w-[250px]" /> </div> <Button variant="outline"> <Filter className="ml-2 h-4 w-4" /> סינון </Button> <Button variant="outline"> <Download className="ml-2 h-4 w-4" /> ייצוא </Button> </div> </div> {userSubTab === "clients" && ( <Card> <CardHeader> <CardTitle>לקוחות רשומים</CardTitle> <CardDescription>ניהול לקוחות במערכת</CardDescription> </CardHeader> <CardContent> <Table> <TableHeader> <TableRow> <TableHead>שם מלא</TableHead> <TableHead>אימייל</TableHead> <TableHead>תאריך הרשמה</TableHead> <TableHead>הצעות שנבדקו</TableHead> <TableHead>התחברות אחרונה</TableHead> <TableHead>פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {clientsData.map((client, index) => ( <TableRow key={index}> <TableCell className="font-medium">{client.name}</TableCell> <TableCell>{client.email}</TableCell> <TableCell>{client.registrationDate}</TableCell> <TableCell>{client.reviewedOffers}</TableCell> <TableCell>{client.lastLogin}</TableCell> <TableCell> <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="sm"> פעולות </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem>השבתת משתמש</DropdownMenuItem> <DropdownMenuItem>צפייה בלוג פעילות</DropdownMenuItem> <DropdownMenuItem>איפוס סיסמה</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> )} {userSubTab === "agents" && ( <Card> <CardHeader> <CardTitle>סוכנים רשומים</CardTitle> <CardDescription>ניהול סוכנים במערכת</CardDescription> </CardHeader> <CardContent> <Table> <TableHeader> <TableRow> <TableHead>שם מלא</TableHead> <TableHead>מספר רישיון</TableHead> <TableHead>סטטוס אימות</TableHead> <TableHead>הצעות שהוגשו</TableHead> <TableHead>ביקורות</TableHead> <TableHead>פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {agentsData.map((agent, index) => ( <TableRow key={index}> <TableCell className="font-medium">{agent.name}</TableCell> <TableCell>{agent.licenseNumber}</TableCell> <TableCell> <Badge className={ agent.verificationStatus === "מאושר" ? "bg-green-100 text-green-800 hover:bg-green-100" : agent.verificationStatus === "בבדיקה" ? "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" : "bg-red-100 text-red-800 hover:bg-red-100" } > {agent.verificationStatus} </Badge> </TableCell> <TableCell>{agent.submittedOffers}</TableCell> <TableCell>{agent.reviews}</TableCell> <TableCell> <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="sm"> פעולות </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem>אישור / דחיית סוכן</DropdownMenuItem> <DropdownMenuItem>סימון לביקורת</DropdownMenuItem> <DropdownMenuItem>התחברות כסוכן</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> )} </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/simple-content.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" interface SimpleContentProps { title: string description: string } export function SimpleContent({ title, description }: SimpleContentProps) { return ( <div className="space-y-6"> <h2 className="text-xl font-bold">{title}</h2> <Card> <CardHeader> <CardTitle>{title}</CardTitle> </CardHeader> <CardContent> <p className="text-muted-foreground">{description}</p> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/employment-info-form.tsx" isQuickEdit="true" "use client" import type React from "react" import type { FormData } from "./pension-form-modal" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { InfoTooltip } from "./info-tooltip" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { useState } from "react" interface EmploymentInfoFormProps { formData: FormData updateFormData: (data: Partial<FormData>) => void onNext: () => void onBack: () => void } export function EmploymentInfoForm({ formData, updateFormData, onNext, onBack }: EmploymentInfoFormProps) { const [errors, setErrors] = useState<Record<string, string>>({}) const validateForm = () => { const newErrors: Record<string, string> = {} if (!formData.birthDate) { newErrors.birthDate = "נא להזין תאריך לידה" } else { // Check if user is at least 18 years old const birthDate = new Date(formData.birthDate) const today = new Date() const age = today.getFullYear() - birthDate.getFullYear() const monthDiff = today.getMonth() - birthDate.getMonth() if ( age < 18 || (age === 18 && monthDiff < 0) || (age === 18 && monthDiff === 0 && today.getDate() < birthDate.getDate()) ) { newErrors.birthDate = "עליך להיות מעל גיל 18 כדי להשתמש בשירות זה" } } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onNext() } } const employmentStatuses = [ { value: "employee", label: "שכיר" }, { value: "self-employed", label: "עצמאי" }, { value: "both", label: "גם שכיר וגם עצמאי" }, { value: "unemployed", label: "לא עובד" }, { value: "student", label: "סטודנט" }, { value: "other", label: "אחר" }, ] const sectors = [ { value: "private", label: "מגזר פרטי" }, { value: "public", label: "מגזר ציבורי" }, { value: "self-employed", label: "עצמאי" }, { value: "other", label: "אחר" }, ] const fields = [ { value: "tech", label: "הייטק" }, { value: "healthcare", label: "רפואה ובריאות" }, { value: "education", label: "חינוך והוראה" }, { value: "finance", label: "פיננסים ובנקאות" }, { value: "law", label: "משפטים" }, { value: "retail", label: "קמעונאות ומסחר" }, { value: "manufacturing", label: "תעשייה וייצור" }, { value: "construction", label: "בנייה ונדל״ן" }, { value: "government", label: "ממשלה וציבורי" }, { value: "services", label: "שירותים" }, { value: "other", label: "אחר" }, ] const salaryRanges = [ { value: "0-5000", label: "עד 5,000 ₪" }, { value: "5001-7500", label: "5,001 - 7,500 ₪" }, { value: "7501-10000", label: "7,501 - 10,000 ₪" }, { value: "10001-15000", label: "10,001 - 15,000 ₪" }, { value: "15001-20000", label: "15,001 - 20,000 ₪" }, { value: "20001-30000", label: "20,001 - 30,000 ₪" }, { value: "30001-50000", label: "30,001 - 50,000 ₪" }, { value: "50001+", label: "מעל 50,000 ₪" }, { value: "prefer-not-to-say", label: "מעדיף לא לומר" }, ] return ( <form onSubmit={handleSubmit}> <div className="space-y-6"> <div className="text-center mb-6"> <h2 className="text-2xl font-bold text-gray-900">פרטי תעסוקה והכנסה</h2> <p className="text-gray-500 mt-1"> המידע שתשתף ישמש לצורך ניתוח סטטיסטי, העשרת תובנות הקהילה, ויאפשר לך לקבל הצעות ייעודיות מסוכנים המתמחים בסקטורים ספציפיים או ברמות שכר מסוימות </p> </div> <div className="space-y-4"> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="employmentStatus" className="font-medium"> סטטוס תעסוקה </Label> <InfoTooltip content="סטטוס התעסוקה שלך משפיע על אפשרויות החיסכון הפנסיוני העומדות בפניך" dataSource="בחר את האפשרות המתאימה ביותר למצב התעסוקתי הנוכחי שלך" /> </div> <div className="relative"> <Select value={formData.employmentStatus} onValueChange={(value) => updateFormData({ employmentStatus: value })} > <SelectTrigger id="employmentStatus"> <SelectValue placeholder="בחר סטטוס תעסוקה" /> </SelectTrigger> <SelectContent> {employmentStatuses.map((status) => ( <SelectItem key={status.value} value={status.value}> {status.label} </SelectItem> ))} </SelectContent> </Select> </div> </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="sector" className="font-medium"> מגזר </Label> <InfoTooltip content="המגזר בו אתה עובד יכול להשפיע על תנאי הפנסיה שלך" dataSource="בחר את המגזר המתאים ביותר למקום העבודה הנוכחי שלך" /> </div> <div className="relative"> <Select value={formData.sector} onValueChange={(value) => updateFormData({ sector: value })}> <SelectTrigger id="sector"> <SelectValue placeholder="בחר מגזר" /> </SelectTrigger> <SelectContent> {sectors.map((sector) => ( <SelectItem key={sector.value} value={sector.value}> {sector.label} </SelectItem> ))} </SelectContent> </Select> </div> </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="field" className="font-medium"> תחום עיסוק </Label> <InfoTooltip content="תחום העיסוק שלך יכול להשפיע על סוג הפנסיה המתאים לך" dataSource="בחר את התחום המתאים ביותר לעיסוק הנוכחי שלך" /> </div> <div className="relative"> <Select value={formData.field} onValueChange={(value) => updateFormData({ field: value })}> <SelectTrigger id="field"> <SelectValue placeholder="בחר תחום עיסוק" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {fields.map((field) => ( <SelectItem key={field.value} value={field.value}> {field.label} </SelectItem> ))} </SelectContent> </Select> </div> </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="monthlySalary" className="font-medium"> הכנסה חודשית ברוטו </Label> <InfoTooltip content="ההכנסה החודשית ברוטו משפיעה על גובה ההפקדות לפנסיה ועל החיסכון הצפוי" dataSource="בחר את טווח ההכנסה המתאים להכנסה החודשית הממוצעת שלך לפני ניכויים ומיסים" /> </div> <div className="relative"> <Select value={formData.monthlySalary} onValueChange={(value) => updateFormData({ monthlySalary: value })} > <SelectTrigger id="monthlySalary"> <SelectValue placeholder="בחר טווח הכנסה" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {salaryRanges.map((range) => ( <SelectItem key={range.value} value={range.value}> {range.label} </SelectItem> ))} </SelectContent> </Select> </div> </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="birthDate" className="font-medium"> תאריך לידה </Label> <InfoTooltip content="משמש רק לאימות שאתה מעל גיל 18 ולחישוב חיסכון פנסיוני מדויק" dataSource="הזן את תאריך הלידה המופיע בתעודת הזהות שלך" /> </div> <div className="relative"> <Input id="birthDate" type="date" value={formData.birthDate} onChange={(e) => updateFormData({ birthDate: e.target.value })} className={`${errors.birthDate ? "border-red-500" : ""}`} max={new Date().toISOString().split("T")[0]} // Prevent future dates /> </div> {errors.birthDate && <p className="text-red-500 text-sm">{errors.birthDate}</p>} </div> </div> <div className="pt-4 flex gap-3"> <Button type="button" variant="outline" onClick={onBack} className="flex-1 flex items-center justify-center gap-2" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700 flex items-center justify-center gap-2"> המשך לשלב הבא <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m9 18 6-6-6-6" /> </svg> </Button> </div> </div> </form> ) } [V0_FILE]typescriptreact:file="components/pension-form/personal-details-form.tsx" "use client" import type React from "react" import type { FormData } from "./pension-form-modal" import { useState } from "react" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { InfoTooltip } from "./info-tooltip" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" interface PersonalDetailsFormProps { formData: FormData updateFormData: (data: Partial<FormData>) => void onNext: () => void onBack: () => void } export function PersonalDetailsForm({ formData, updateFormData, onNext, onBack }: PersonalDetailsFormProps) { const [errors, setErrors] = useState<Record<string, string>>({}) const validateForm = () => { const newErrors: Record<string, string> = {} if (!formData.fullName || formData.fullName.trim().length < 2) { newErrors.fullName = "נא להזין שם מלא" } // Phone validation - only validate if provided if (formData.phone && formData.phone.replace(/\D/g, "").length < 9) { newErrors.phone = "נא להזין מספר טלפון תקין" } if (!formData.gender) { newErrors.gender = "נא לבחור מגדר" } if (!formData.termsAccepted) { newErrors.termsAccepted = "יש לאשר את תנאי השימוש כדי להמשיך" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onNext() } } const genderOptions = [ { value: "male", label: "זכר" }, { value: "female", label: "נקבה" }, { value: "other", label: "אחר" }, { value: "prefer-not-to-say", label: "מעדיף/ה לא לציין" }, ] return ( <form onSubmit={handleSubmit}> <div className="space-y-6"> <div className="text-center mb-6"> <h2 className="text-2xl font-bold text-gray-900">פרטים אישיים</h2> <p className="text-gray-500 mt-1">פרטי יצירת קשר שיעזרו לנו להתאים את הפתרון הפנסיוני המיטבי עבורך</p> </div> <div className="space-y-4"> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="fullName" className="font-medium"> שם מלא </Label> <InfoTooltip content="השם המלא שלך כפי שמופיע בתעודת הזהות" dataSource="נדרש לצורך יצירת קשר והתאמת הצעות אישיות" /> </div> <div className="relative"> <Input id="fullName" type="text" value={formData.fullName} onChange={(e) => updateFormData({ fullName: e.target.value })} className={`${errors.fullName ? "border-red-500" : ""}`} placeholder="ישראל ישראלי" /> </div> {errors.fullName && <p className="text-red-500 text-sm">{errors.fullName}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="phone" className="font-medium"> מספר טלפון נייד <span className="text-gray-400 text-sm">(אופציונלי)</span> </Label> <InfoTooltip content="מספר הטלפון שלך ישמש ליצירת קשר בנוגע להצעות" dataSource="אופציונלי - לצורך יצירת קשר עם סוכן פנסיוני" /> </div> <div className="relative"> <Input id="phone" type="tel" value={formData.phone} onChange={(e) => updateFormData({ phone: e.target.value })} className={`${errors.phone ? "border-red-500" : ""}`} placeholder="050-1234567" dir="ltr" /> </div> {errors.phone && <p className="text-red-500 text-sm">{errors.phone}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="gender" className="font-medium"> מין </Label> <InfoTooltip content="המגדר משפיע על חישוב הפנסיה בשל הבדלים בתוחלת החיים ובגיל הפרישה" dataSource="בחר את המגדר המתאים לך. מידע זה משמש לחישוב גיל הפרישה וההטבות הפנסיוניות" /> </div> <div className="relative"> <Select value={formData.gender} onValueChange={(value) => updateFormData({ gender: value })}> <SelectTrigger id="gender" className={`${errors.gender ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר מגדר" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {genderOptions.map((option) => ( <SelectItem key={option.value} value={option.value}> {option.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.gender && <p className="text-red-500 text-sm">{errors.gender}</p>} </div> {/ Legal Terms Checkboxes - at the end of the form /} <div className="border-t pt-4 mt-6"> <div className="space-y-4"> <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="terms" checked={formData.termsAccepted} onCheckedChange={(checked) => updateFormData({ termsAccepted: checked === true })} className={errors.termsAccepted ? "border-red-500" : ""} /> <div className="mr-2"> <Label htmlFor="terms" className="font-medium cursor-pointer"> אני מאשר/ת את תנאי השימוש ומדיניות הפרטיות </Label> <p className="text-sm text-gray-500 mt-1">אני מסכים/ה לתנאי השימוש ולמדיניות הפרטיות של האתר</p> </div> </div> {errors.termsAccepted && <p className="text-red-500 text-sm">{errors.termsAccepted}</p>} <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="marketingConsent" checked={formData.marketingConsent} onCheckedChange={(checked) => updateFormData({ marketingConsent: checked === true })} /> <div className="mr-2"> <Label htmlFor="marketingConsent" className="font-medium cursor-pointer"> אני מאשר/ת קבלת הצעות מסוכני ביטוח ופנסיה מורשים </Label> <p className="text-sm text-gray-500 mt-1"> אני מסכים/ה לשיתוף המידע שמסרתי לצורך קבלת הצעות מסוכני ביטוח ופנסיה מורשים </p> </div> </div> </div> </div> </div> <div className="pt-4 flex gap-3"> <Button type="button" variant="outline" onClick={onBack} className="flex-1 flex items-center justify-center gap-2" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700 flex items-center justify-center gap-2"> המשך לשלב הבא <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m9 18 6-6-6-6" /> </svg> </Button> </div> </div> </form> ) } [V0_FILE]typescriptreact:file="hooks/use-dashboard-state.ts" "use client" // Extracted state management logic from dashboard page.tsx import { useState, useRef } from "react" import { demoUser } from "@/lib/auth" import { initialFilters, initialSelectedOptions } from "@/lib/dashboard-data" export const useDashboardState = () => { const [activeContent, setActiveContent] = useState("offers") const [isMenuOpen, setIsMenuOpen] = useState(false) const [notificationsOpen, setNotificationsOpen] = useState(false) const [profileOpen, setProfileOpen] = useState(false) const [activeOfferType, setActiveOfferType] = useState("pension") const [activeOverviewType, setActiveOverviewType] = useState("pension") const [showFilters, setShowFilters] = useState(true) const [showDeclineAllOptions, setShowDeclineAllOptions] = useState(false) const [declineAllReason, setDeclineAllReason] = useState("") const [showDeclineOptions, setShowDeclineOptions] = useState(false) const [declineReason, setDeclineReason] = useState("") const [selectedOffers, setSelectedOffers] = useState({}) const [confirmedOffers, setConfirmedOffers] = useState({}) const [declinedOffers, setDeclinedOffers] = useState({}) const [selectedOffer, setSelectedOffer] = useState(null) const [selectedAgent, setSelectedAgent] = useState(null) const [contactOption, setContactOption] = useState("") const [contactMethod, setContactMethod] = useState("") const [phoneNumber, setPhoneNumber] = useState("") const [successMessage, setSuccessMessage] = useState("") const [showSelectionMessage, setShowSelectionMessage] = useState(false) const [currentFee, setCurrentFee] = useState(demoUser.pensionDetails.managementFeeAccumulated) const [depositFee, setDepositFee] = useState(demoUser.pensionDetails.managementFeeDeposit) const [improvedFee, setImprovedFee] = useState(0.3) const [improvedDepositFee, setImprovedDepositFee] = useState(1.2) const [monthlyDeposit, setMonthlyDeposit] = useState(2500) const [years, setYears] = useState(30) const [savingsTooltipVisible, setSavingsTooltipVisible] = useState(false) const [randomizationTooltipVisible, setRandomizationTooltipVisible] = useState(false) const [filters, setFilters] = useState(initialFilters) const [openDropdown, setOpenDropdown] = useState(null) const [selectedOptions, setSelectedOptions] = useState(initialSelectedOptions) const [disputes, setDisputes] = useState([]) const agentInfoRef = useRef(null) const offerSelectionRef = useRef(null) return { // State values activeContent, isMenuOpen, notificationsOpen, profileOpen, activeOfferType, activeOverviewType, showFilters, showDeclineAllOptions, declineAllReason, showDeclineOptions, declineReason, selectedOffers, confirmedOffers, declinedOffers, selectedOffer, selectedAgent, contactOption, contactMethod, phoneNumber, successMessage, showSelectionMessage, currentFee, depositFee, improvedFee, improvedDepositFee, monthlyDeposit, years, savingsTooltipVisible, randomizationTooltipVisible, filters, openDropdown, selectedOptions, disputes, agentInfoRef, offerSelectionRef, // State setters setActiveContent, setIsMenuOpen, setNotificationsOpen, setProfileOpen, setActiveOfferType, setActiveOverviewType, setShowFilters, setShowDeclineAllOptions, setDeclineAllReason, setShowDeclineOptions, setDeclineReason, setSelectedOffers, setConfirmedOffers, setDeclinedOffers, setSelectedOffer, setSelectedAgent, setContactOption, setContactMethod, setPhoneNumber, setSuccessMessage, setShowSelectionMessage, setCurrentFee, setDepositFee, setImprovedFee, setImprovedDepositFee, setMonthlyDeposit, setYears, setSavingsTooltipVisible, setRandomizationTooltipVisible, setFilters, setOpenDropdown, setSelectedOptions, setDisputes, } } [V0_FILE]typescript:file="lib/mock-data.ts" // Centralized mock data for the application // User Data export const demoUser = { id: "1", name: "יוסי כהן", email: "yossi@example.com", phone: "050-1234567", age: 35, monthlyIncome: 15000, currentPension: "מגדל", currentProvident: "הראל", registrationDate: "2024-01-15", pensionDetails: { managementFeeAccumulated: 0.5, managementFeeDeposit: 1.2, currentSavings: 150000, monthlyDeposit: 2500, company: "מגדל", investmentTrack: "מסלול כללי", }, providentDetails: { managementFeeAccumulated: 0.3, managementFeeDeposit: 0.8, currentSavings: 85000, monthlyDeposit: 1500, company: "הראל", investmentTrack: "מסלול מניות", }, studyFundDetails: { managementFeeAccumulated: 0.25, managementFeeDeposit: 0.7, currentSavings: 45000, monthlyDeposit: 800, company: "כלל", investmentTrack: "מסלול אג״ח", }, offers: [ { id: "1", company: "מגדל", managementFeeAccumulated: 0.4, managementFeeDeposit: 1.0, savingsAmount: 12000, status: "pending", }, { id: "2", company: "הראל", managementFeeAccumulated: 0.35, managementFeeDeposit: 0.9, savingsAmount: 15000, status: "pending", }, { id: "3", company: "כלל", managementFeeAccumulated: 0.45, managementFeeDeposit: 1.1, savingsAmount: 10000, status: "pending", }, ], } // Admin Dashboard Data export const adminStats = { totalUsers: 1247, totalClients: 1158, totalAgents: 89, pendingVerifications: 12, activeOffers: 156, openDisputes: 8, } export const recentActivities = [ { action: "אישור סוכן", user: "דוד לוי", date: "15/05/2025", status: "הושלם" }, { action: "דחיית סוכן", user: "רונית כהן", date: "15/05/2025", status: "הושלם" }, { action: "טיפול במחלוקת", user: "יעל אברהם", date: "14/05/2025", status: "בתהליך" }, { action: "הסרת ביקורת", user: "משה ישראלי", date: "14/05/2025", status: "הושלם" }, { action: "עדכון הגדרות מערכת", user: "מנהל מערכת", date: "13/05/2025", status: "הושלם" }, ] export const clientsData = [ { name: "ישראל ישראלי", email: "israel@example.com", registrationDate: "10/04/2025", reviewedOffers: 8, lastLogin: "17/05/2025", }, { name: "מיכל לוי", email: "michal@example.com", registrationDate: "15/04/2025", reviewedOffers: 5, lastLogin: "16/05/2025", }, { name: "יוסי כהן", email: "yossi@example.com", registrationDate: "20/04/2025", reviewedOffers: 12, lastLogin: "18/05/2025", }, { name: "רונית אברהם", email: "ronit@example.com", registrationDate: "25/04/2025", reviewedOffers: 3, lastLogin: "15/05/2025", }, { name: "אבי משה", email: "avi@example.com", registrationDate: "01/05/2025", reviewedOffers: 7, lastLogin: "18/05/2025", }, ] export const agentsData = [ { name: "דוד לוי", licenseNumber: "12345", verificationStatus: "מאושר", submittedOffers: 24, reviews: 18 }, { name: "שרה כהן", licenseNumber: "23456", verificationStatus: "מאושר", submittedOffers: 18, reviews: 12 }, { name: "יעקב ישראלי", licenseNumber: "34567", verificationStatus: "בבדיקה", submittedOffers: 0, reviews: 0 }, { name: "רחל אברהם", licenseNumber: "45678", verificationStatus: "מאושר", submittedOffers: 32, reviews: 25 }, { name: "משה דוד", licenseNumber: "56789", verificationStatus: "נדחה", submittedOffers: 0, reviews: 0 }, ] // Provident Fund Offers export const providentFundOffers = [ { id: "pf-offer-1", company: "מיטב דש", managementFeeAccumulated: 0.22, managementFeeDeposit: 0.8, savingsAmount: 85000, status: "pending", investmentTrack: "מסלול כללי", agent: { name: "רונית לוי", rating: 5, specialization: "קרנות השתלמות", agency: "סוכנות פיננסים עתיד", phone: "050-1234567", email: "ronit@finance-future.co.il", reviews: [ { text: "רונית מקצועית מאוד ועזרה לי להשיג תנאים מעולים", author: "יעל כהן", rating: 5 }, { text: "שירות אישי ומהיר, ממליץ בחום", author: "אבי לוי", rating: 5 }, ], }, }, { id: "pf-offer-2", company: "אלטשולר שחם", managementFeeAccumulated: 0.25, managementFeeDeposit: 0.9, savingsAmount: 92000, status: "pending", investmentTrack: "מסלול מניות", agent: { name: "אלון גולן", rating: 4, specialization: "קרנות השתלמות והשקעות", agency: "גולן יועצים פיננסיים", phone: "050-7654321", email: "alon@golan-finance.co.il", reviews: [ { text: "אלון מקצועי ואכפתי, עוזר בכל שאלה", author: "דנה שרון", rating: 4 }, { text: "קיבלתי ייעוץ מצוין והצעה משתלמת", author: "יוסי כהן", rating: 5 }, ], }, }, { id: "pf-offer-3", company: "הראל", managementFeeAccumulated: 0.3, managementFeeDeposit: 1.0, savingsAmount: 78000, status: "pending", investmentTrack: "מסלול אג״ח", agent: { name: "שירה אברהם", rating: 4, specialization: "תכנון פיננסי כולל", agency: "הראל סוכנויות", phone: "050-9876543", email: "shira@harel-agency.co.il", reviews: [ { text: "שירה מקצועית ונותנת שירות מעולה", author: "רונן לוי", rating: 4 }, { text: "תמיד זמינה לשאלות ועוזרת בכל נושא", author: "מיכל גולן", rating: 4 }, ], }, }, ] // Pension Fund Offers export const pensionFundOffers = [ { id: "pension-offer-1", company: "מנורה מבטחים", managementFeeAccumulated: 0.18, managementFeeDeposit: 0.7, savingsAmount: 110000, status: "pending", investmentTrack: "מסלול כללי", agent: { name: "דוד ישראלי", rating: 5, specialization: "קופות גמל וחיסכון ארוך טווח", agency: "ישראלי יועצים פנסיוניים", phone: "050-1122334", email: "david@israeli-pension.co.il", reviews: [ { text: "דוד עזר לי להבין את כל האפשרויות ולבחור את המסלול הטוב ביותר", author: "אורית כהן", rating: 5 }, { text: "שירות מקצועי ואדיב, ממליץ בחום", author: "יעקב לוי", rating: 5 }, ], }, }, { id: "pension-offer-2", company: "פסגות", managementFeeAccumulated: 0.2, managementFeeDeposit: 0.8, savingsAmount: 105000, status: "pending", investmentTrack: "מסלול מניות", agent: { name: "מיכל דוידוב", rating: 4, specialization: "קופות גמל והשקעות", agency: "פסגות סוכנויות", phone: "050-5566778", email: "michal@psagot-agency.co.il", reviews: [ { text: "מיכל מקצועית ואכפתית, עוזרת בכל שאלה", author: "רונן כהן", rating: 4 }, { text: "קיבלתי ייעוץ מצוין והצעה משתלמת", author: "שרה לוי", rating: 4 }, ], }, }, { id: "pension-offer-3", company: "כלל", managementFeeAccumulated: 0.22, managementFeeDeposit: 0.9, savingsAmount: 98000, status: "pending", investmentTrack: "מסלול הלכה", agent: { name: "יוסף אברהמי", rating: 4, specialization: "תכנון פרישה וקופות גמל", agency: "כלל סוכנויות", phone: "050-9988776", email: "yosef@clal-agency.co.il", reviews: [ { text: "יוסף מקצועי ונותן שירות מעולה", author: "דן לוי", rating: 4 }, { text: "תמיד זמין לשאלות ועוזר בכל נושא", author: "רחל כהן", rating: 5 }, ], }, }, ] // Dashboard Stats export const dashboardStats = { totalOffers: 12, activeOffers: 8, pendingReviews: 3, completedDeals: 2, } // Offer Data export const mockOffers = [ { id: "1", company: "מגדל", type: "פנסיה", monthlyFee: 45, managementFee: 0.5, rating: 4.5, features: ["ביטוח נכות", "כיסוי רפואי"], status: "active", }, { id: "2", company: "הראל", type: "קרן השתלמות", monthlyFee: 35, managementFee: 0.3, rating: 4.2, features: ["גמישות משיכה", "תשואה גבוהה"], status: "pending", }, ] // Agent Dashboard Data export const agentStats = { totalLeads: 45, activeOffers: 12, conversionRate: 23, monthlyRevenue: 8500, } // Chart Data export const chartData = [ { month: "ינואר", leads: 12, conversions: 3 }, { month: "פברואר", leads: 18, conversions: 5 }, { month: "מרץ", leads: 15, conversions: 4 }, { month: "אפריל", leads: 22, conversions: 6 }, ] // Filter Options export const filterOptions = { productTypes: ["פנסיה", "קרן השתלמות", "ביטוח"], companies: ["מגדל", "הראל", "כלל", "פסגות"], statuses: ["פעיל", "ממתין", "הושלם", "נדחה"], } // Initial Filter States export const initialFilters = { companies: [], regions: [], specialties: [], investmentTracks: [], agentRating: { min: 4, max: 5 }, lowerAccumulationFee: false, lowerDepositFee: false, higherSavings: false, } export const initialSelectedOptions = { companies: [], regions: [], specialties: [], investmentTracks: [], agentRatings: [], managementFees: [], productTypes: [], agentLanguages: [], } // Dispute System Data export const disputeReasons = [ "הסוכן לא יצר קשר", "ההצעה שונה ממה שהובטח", "שירות לקוי מהסוכן", "בעיה טכנית במערכת", "בעיה אחרת", ] // Mock disputes data for client export const clientDisputes = [ { id: "dispute-1", clientId: "1", offerId: "1", agentId: "agent-1", productType: "pension", reason: "הסוכן לא יצר קשר", comment: "עברו כבר שבועיים מאז שבחרתי את ההצעה והסוכן לא יצר איתי קשר כפי שהובטח", timestamp: "2025-01-15T10:30:00Z", status: "חדש", adminResponse: null, offerSummary: { company: "מגדל", agentName: "דוד ישראלי", }, }, { id: "dispute-2", clientId: "1", offerId: "pf-offer-1", agentId: "agent-2", productType: "provident", reason: "ההצעה שונה ממה שהובטח", comment: "הסוכן הבטיח דמי ניהול של 0.2% אבל בהצעה הסופית זה 0.22%", timestamp: "2025-01-10T14:20:00Z", status: "בבדיקה", adminResponse: "אנו בודקים את הנושא עם הסוכן ונחזור אליך בהקדם", offerSummary: { company: "מיטב דש", agentName: "רונית לוי", }, }, ] // Mock disputes data for admin dashboard export const allDisputes = [ { id: "dispute-1", client: "יוסי כהן", agent: "דוד ישראלי", subject: "הסוכן לא יצר קשר", date: "15/01/2025", status: "חדש", description: "עברו כבר שבועיים מאז שבחרתי את ההצעה והסוכן לא יצר איתי קשר כפי שהובטח", productType: "פנסיה", company: "מגדל", }, { id: "dispute-2", client: "יוסי כהן", agent: "רונית לוי", subject: "ההצעה שונה ממה שהובטח", date: "10/01/2025", status: "בבדיקה", description: "הסוכן הבטיח דמי ניהול של 0.2% אבל בהצעה הסופית זה 0.22%", productType: "קרן השתלמות", company: "מיטב דש", }, { id: "dispute-3", client: "מיכל לוי", agent: "שרה כהן", subject: "שירות לקוי מהסוכן", date: "08/01/2025", status: "נפתר", description: "הסוכן לא היה זמין לשאלות ולא סיפק מידע מספק", productType: "קופת גמל", company: "הראל", }, ] [V0_FILE]typescript:file="types/dashboard.ts" export interface FilterOptions { companies: string[] investmentTracks: string[] managementFees: string[] specialties: string[] regions: string[] agentRatings: string[] agentLanguages: string[] productTypes: string[] } export interface DashboardState { activeContent: string activeOfferType: string activeOverviewType: string isMenuOpen: boolean showFilters: boolean showDeclineAllOptions: boolean declineAllReason: string notificationsOpen: boolean profileOpen: boolean openDropdown: string | null selectedOptions: FilterOptions filters: any selectedOffers: any confirmedOffers: any declinedOffers: any selectedOffer: any selectedAgent: any contactOption: string contactMethod: string phoneNumber: string successMessage: string showDeclineOptions: boolean declineReason: string showSelectionMessage: boolean agentInfoRef: any offerSelectionRef: any randomizationTooltipVisible: boolean setRandomizationTooltipVisible: (visible: boolean) => void savingsTooltipVisible: boolean setSavingsTooltipVisible: (visible: boolean) => void currentFee: number setCurrentFee: (fee: number) => void depositFee: number setDepositFee: (fee: number) => void improvedFee: number setImprovedFee: (fee: number) => void improvedDepositFee: number setImprovedDepositFee: (fee: number) => void monthlyDeposit: number setMonthlyDeposit: (deposit: number) => void years: number setYears: (years: number) => void } export interface Offer { id: string company: string managementFeeAccumulated: number managementFeeDeposit: number investmentTrack?: string savingsAmount?: number agent: Agent } export interface Agent { id: string name: string specialization: string agency: string phone: string email: string rating: number reviews: Review[] } export interface Review { author: string rating: number text: string } export interface Dispute { id: string clientId: string offerId: string agentId: string productType: string reason: string comment?: string timestamp: string status: "חדש" | "בבדיקה" | "נפתר" adminResponse?: string offerSummary: { company: string agentName: string } } [V0_FILE]typescript:file="constants/filter-options.ts" export const COMPANIES = ["מגדל", "הראל", "מנורה מבטחים", "כלל", "אלטשולר שחם", "פסגות", "מיטב דש", "הפניקס"] export const INVESTMENT_TRACKS = [ "מסלול כללי", "מסלול מניות", "מסלול אג״ח", "מסלול הלכה", "מסלול שקלי", "מסלול חו״ל", "מסלול פאסיבי", "מסלול מדדי", ] export const SPECIALTIES = [ "פנסיה", "ביטוח", "השקעות", "תכנון פרישה", "גמל והשתלמות", "ביטוח בריאות", "ביטוח חיים", "תכנון פיננסי", ] export const REGIONS = ["מרכז", "צפון", "דרום", "ירושלים", "שרון", "חיפה", "אילת", "השפלה"] export const LANGUAGES = ["עברית", "ערבית", "אנגלית", "רוסית", "אמהרית"] export const PRODUCT_TYPES = [ { value: "pension", label: "פנסיה" }, { value: "provident", label: "גמל" }, { value: "study", label: "השתלמות" }, ] export const MANAGEMENT_FEE_OPTIONS = [ { value: "lowerAccumulation", label: "סנן לפי העדפה לדמי ניהול נמוכים מהצבירה" }, { value: "lowerDeposit", label: "סנן לפי העדפה לדמי ניהול נמוכים מההפקדה" }, { value: "higherSavings", label: "סנן לפי העדפה לפוטנציאל חיסכון גבוה יותר לאורך זמן" }, ] export const RATING_OPTIONS = [ { value: "5", label: "5 כוכבים ומעלה" }, { value: "4", label: "4 כוכבים ומעלה" }, { value: "3", label: "3 כוכבים ומעלה" }, { value: "2", label: "2 כוכבים ומעלה" }, { value: "1", label: "כל הדירוגים" }, ] export const DISPUTE_REASONS = [ "הסוכן לא יצר קשר", "ההצעה שונה ממה שהובטח", "בעיה בתקשורת עם הסוכן", "אי שביעות רצון מהשירות", "בעיה אחרת", ] [V0_FILE]typescriptreact:file="components/dashboard/filters/product-type-filter.tsx" "use client" import { PRODUCT_TYPES } from "@/constants/filter-options" interface ProductTypeFilterProps { selectedOptions: any onCheckboxChange: (category: string, value: string) => void } export function ProductTypeFilter({ selectedOptions, onCheckboxChange }: ProductTypeFilterProps) { return ( <div className="mb-6"> <h3 className="text-sm font-semibold text-gray-700 mb-3 pb-1 border-b border-gray-200">בחר סוגי מוצר</h3> <div className="flex flex-wrap gap-3 justify-center"> {PRODUCT_TYPES.map((productType) => ( <label key={productType.value} className="flex items-center p-2 border rounded-lg cursor-pointer hover:bg-gray-50 transition-colors" > <input type="checkbox" className="ml-2 h-4 w-4 text-blue-600" checked={selectedOptions.productTypes?.includes(productType.value) || false} onChange={() => onCheckboxChange("productTypes", productType.value)} /> <span className="font-medium">{productType.label}</span> </label> ))} </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/filters/investment-preferences-filter.tsx" "use client" import { Label } from "@/components/ui/label" import { ChevronDown } from "lucide-react" import { COMPANIES, INVESTMENT_TRACKS, MANAGEMENT_FEE_OPTIONS } from "@/constants/filter-options" interface InvestmentPreferencesFilterProps { selectedOptions: any openDropdown: string | null onToggleDropdown: (dropdown: string) => void onCheckboxChange: (category: string, value: string) => void } export function InvestmentPreferencesFilter({ selectedOptions, openDropdown, onToggleDropdown, onCheckboxChange, }: InvestmentPreferencesFilterProps) { return ( <div className="mb-6"> <h3 className="text-sm font-semibold text-gray-700 mb-3 pb-1 border-b border-gray-200">העדפות השקעה</h3> <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> {/ Companies Dropdown /} <div className="relative"> <Label className="text-xs font-medium mb-1 block text-gray-600">חברה מנהלת</Label> <div className="w-full p-2 border rounded-md bg-white flex justify-between items-center cursor-pointer text-sm hover:border-blue-300 transition-colors" onClick={() => onToggleDropdown("companies")} > <div className="text-right"> {selectedOptions.companies.length === 0 ? ( <span className="text-gray-400">בחר חברות</span> ) : selectedOptions.companies.includes("all") ? ( <span>כל החברות</span> ) : ( <span className="text-blue-600">{selectedOptions.companies.length} נבחרו</span> )} </div> <ChevronDown className={`h-4 w-4 transition-transform text-gray-400 ${ openDropdown === "companies" ? "transform rotate-180" : "" }`} /> </div> {openDropdown === "companies" && ( <div className="absolute z-20 right-0 mt-1 w-full bg-white border rounded-md shadow-lg max-h-48 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.companies.includes("all")} onChange={() => onCheckboxChange("companies", "all")} /> <span className="font-medium">כל החברות</span> </label> {COMPANIES.map((company) => ( <label key={company} className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm" > <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.companies.includes(company)} onChange={() => onCheckboxChange("companies", company)} /> <span>{company}</span> </label> ))} </div> </div> )} </div> {/ Investment Tracks Dropdown /} <div className="relative"> <Label className="text-xs font-medium mb-1 block text-gray-600">מסלול השקעה</Label> <div className="w-full p-2 border rounded-md bg-white flex justify-between items-center cursor-pointer text-sm hover:border-blue-300 transition-colors" onClick={() => onToggleDropdown("investmentTracks")} > <div className="text-right"> {selectedOptions.investmentTracks.length === 0 ? ( <span className="text-gray-400">בחר מסלולים</span> ) : selectedOptions.investmentTracks.includes("all") ? ( <span>כל המסלולים</span> ) : ( <span className="text-blue-600">{selectedOptions.investmentTracks.length} נבחרו</span> )} </div> <ChevronDown className={`h-4 w-4 transition-transform text-gray-400 ${ openDropdown === "investmentTracks" ? "transform rotate-180" : "" }`} /> </div> {openDropdown === "investmentTracks" && ( <div className="absolute z-20 right-0 mt-1 w-full bg-white border rounded-md shadow-lg max-h-48 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.investmentTracks.includes("all")} onChange={() => onCheckboxChange("investmentTracks", "all")} /> <span className="font-medium">כל המסלולים</span> </label> {INVESTMENT_TRACKS.map((track) => ( <label key={track} className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.investmentTracks.includes(track)} onChange={() => onCheckboxChange("investmentTracks", track)} /> <span>{track}</span> </label> ))} </div> </div> )} </div> {/ Management Fees Dropdown /} <div className="relative"> <Label className="text-xs font-medium mb-1 block text-gray-600">העדפות דמי ניהול</Label> <div className="w-full p-2 border rounded-md bg-white flex justify-between items-center cursor-pointer text-sm hover:border-blue-300 transition-colors" onClick={() => onToggleDropdown("managementFees")} > <div className="text-right"> {selectedOptions.managementFees.length === 0 ? ( <span className="text-gray-400">בחר העדפות</span> ) : selectedOptions.managementFees.includes("all") ? ( <span>כל האפשרויות</span> ) : ( <span className="text-blue-600">{selectedOptions.managementFees.length} נבחרו</span> )} </div> <ChevronDown className={`h-4 w-4 transition-transform text-gray-400 ${ openDropdown === "managementFees" ? "transform rotate-180" : "" }`} /> </div> {openDropdown === "managementFees" && ( <div className="absolute z-20 right-0 mt-1 w-full bg-white border rounded-md shadow-lg max-h-48 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.managementFees.includes("all")} onChange={() => onCheckboxChange("managementFees", "all")} /> <span className="font-medium">כל האפשרויות</span> </label> {MANAGEMENT_FEE_OPTIONS.map((fee) => ( <label key={fee.value} className="flex items-start p-2 hover:bg-gray-50 rounded cursor-pointer text-sm" > <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600 mt-0.5" checked={selectedOptions.managementFees.includes(fee.value)} onChange={() => onCheckboxChange("managementFees", fee.value)} /> <span className="leading-tight">{fee.label}</span> </label> ))} </div> </div> )} </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/filters/agent-preferences-filter.tsx" "use client" import { Label } from "@/components/ui/label" import { ChevronDown, Star } from "lucide-react" import { SPECIALTIES, REGIONS, LANGUAGES, RATING_OPTIONS } from "@/constants/filter-options" interface AgentPreferencesFilterProps { selectedOptions: any openDropdown: string | null onToggleDropdown: (dropdown: string) => void onCheckboxChange: (category: string, value: string) => void } export function AgentPreferencesFilter({ selectedOptions, openDropdown, onToggleDropdown, onCheckboxChange, }: AgentPreferencesFilterProps) { return ( <div className="mb-6"> <h3 className="text-sm font-semibold text-gray-700 mb-3 pb-1 border-b border-gray-200">העדפות סוכן</h3> <div className="grid grid-cols-1 md:grid-cols-4 gap-4"> {/ Agent Specialties Dropdown /} <div className="relative"> <Label className="text-xs font-medium mb-1 block text-gray-600">התמחות סוכן</Label> <div className="w-full p-2 border rounded-md bg-white flex justify-between items-center cursor-pointer text-sm hover:border-blue-300 transition-colors" onClick={() => onToggleDropdown("specialties")} > <div className="text-right"> {selectedOptions.specialties.length === 0 ? ( <span className="text-gray-400">בחר התמחויות</span> ) : selectedOptions.specialties.includes("all") ? ( <span>כל ההתמחויות</span> ) : ( <span className="text-blue-600">{selectedOptions.specialties.length} נבחרו</span> )} </div> <ChevronDown className={`h-4 w-4 transition-transform text-gray-400 ${ openDropdown === "specialties" ? "transform rotate-180" : "" }`} /> </div> {openDropdown === "specialties" && ( <div className="absolute z-20 right-0 mt-1 w-full bg-white border rounded-md shadow-lg max-h-48 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.specialties.includes("all")} onChange={() => onCheckboxChange("specialties", "all")} /> <span className="font-medium">כל ההתמחויות</span> </label> {SPECIALTIES.map((specialty) => ( <label key={specialty} className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm" > <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.specialties.includes(specialty)} onChange={() => onCheckboxChange("specialties", specialty)} /> <span>{specialty}</span> </label> ))} </div> </div> )} </div> {/ Regions Dropdown /} <div className="relative"> <Label className="text-xs font-medium mb-1 block text-gray-600">אזור סוכן</Label> <div className="w-full p-2 border rounded-md bg-white flex justify-between items-center cursor-pointer text-sm hover:border-blue-300 transition-colors" onClick={() => onToggleDropdown("regions")} > <div className="text-right"> {selectedOptions.regions.length === 0 ? ( <span className="text-gray-400">בחר אזורים</span> ) : selectedOptions.regions.includes("all") ? ( <span>כל האזורים</span> ) : ( <span className="text-blue-600">{selectedOptions.regions.length} נבחרו</span> )} </div> <ChevronDown className={`h-4 w-4 transition-transform text-gray-400 ${ openDropdown === "regions" ? "transform rotate-180" : "" }`} /> </div> {openDropdown === "regions" && ( <div className="absolute z-20 right-0 mt-1 w-full bg-white border rounded-md shadow-lg max-h-48 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.regions.includes("all")} onChange={() => onCheckboxChange("regions", "all")} /> <span className="font-medium">כל האזורים</span> </label> {REGIONS.map((region) => ( <label key={region} className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.regions.includes(region)} onChange={() => onCheckboxChange("regions", region)} /> <span>{region}</span> </label> ))} </div> </div> )} </div> {/ Agent Rating Dropdown /} <div className="relative"> <Label className="text-xs font-medium mb-1 block text-gray-600">דירוג מינימלי</Label> <div className="w-full p-2 border rounded-md bg-white flex justify-between items-center cursor-pointer text-sm hover:border-blue-300 transition-colors" onClick={() => onToggleDropdown("agentRatings")} > <div className="text-right"> {selectedOptions.agentRatings.length === 0 ? ( <span className="text-gray-400">בחר דירוג</span> ) : ( <span className="text-blue-600">{selectedOptions.agentRatings.length} נבחרו</span> )} </div> <ChevronDown className={`h-4 w-4 transition-transform text-gray-400 ${ openDropdown === "agentRatings" ? "transform rotate-180" : "" }`} /> </div> {openDropdown === "agentRatings" && ( <div className="absolute z-20 right-0 mt-1 w-full bg-white border rounded-md shadow-lg max-h-48 overflow-y-auto"> <div className="p-1"> {RATING_OPTIONS.map((rating) => ( <label key={rating.value} className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm" > <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.agentRatings.includes(rating.value)} onChange={() => onCheckboxChange("agentRatings", rating.value)} /> <div className="flex items-center"> <span>{rating.label}</span> {rating.value !== "1" && ( <div className="flex mr-2 text-yellow-400"> {Array.from({ length: Number.parseInt(rating.value) }).map((_, i) => ( <Star key={i} className="w-3 h-3" fill="currentColor" /> ))} </div> )} </div> </label> ))} </div> </div> )} </div> {/ Agent Language Preference Dropdown /} <div className="relative"> <Label className="text-xs font-medium mb-1 block text-gray-600">שפת תקשורת מועדפת עם הסוכן</Label> <div className="w-full p-2 border rounded-md bg-white flex justify-between items-center cursor-pointer text-sm hover:border-blue-300 transition-colors" onClick={() => onToggleDropdown("agentLanguages")} > <div className="text-right"> {selectedOptions.agentLanguages?.length === 0 || !selectedOptions.agentLanguages ? ( <span className="text-gray-400">בחר שפות</span> ) : selectedOptions.agentLanguages.includes("all") ? ( <span>כל השפות</span> ) : ( <span className="text-blue-600">{selectedOptions.agentLanguages.length} נבחרו</span> )} </div> <ChevronDown className={`h-4 w-4 transition-transform text-gray-400 ${ openDropdown === "agentLanguages" ? "transform rotate-180" : "" }`} /> </div> {openDropdown === "agentLanguages" && ( <div className="absolute z-20 right-0 mt-1 w-full bg-white border rounded-md shadow-lg max-h-48 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.agentLanguages?.includes("all") || false} onChange={() => onCheckboxChange("agentLanguages", "all")} /> <span className="font-medium">כל השפות</span> </label> {LANGUAGES.map((language) => ( <label key={language} className="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer text-sm" > <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={selectedOptions.agentLanguages?.includes(language) || false} onChange={() => onCheckboxChange("agentLanguages", language)} /> <span>{language}</span> </label> ))} </div> </div> )} </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter.tsx" isFixed="true" isQuickEdit="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ProductTypeFilter } from "./filters/product-type-filter" import { InvestmentPreferencesFilter } from "./filters/investment-preferences-filter" import { AgentPreferencesFilter } from "./filters/agent-preferences-filter" interface OffersFilterProps { filters: any onFilterChange: (category: string, value: any) => void onApplyFilters: () => void openDropdown: string | null onToggleDropdown: (dropdown: string) => void selectedOptions: any onCheckboxChange: (category: string, value: string) => void } export function OffersFilter({ filters, onFilterChange, onApplyFilters, openDropdown, onToggleDropdown, selectedOptions, onCheckboxChange, }: OffersFilterProps) { const isProductTypeSelected = selectedOptions.productTypes && selectedOptions.productTypes.length > 0 return ( <Card className="md:max-w-4xl mx-auto mb-6"> <CardHeader className="pb-3"> <CardTitle className="text-lg text-center">סנן הצעות לפי העדפותיך</CardTitle> <CardDescription className="text-center text-sm"> בחר קריטריונים להתאמה אישית של הצעות. ניתן לבחור רק סוג מוצר ולהשאיר את שאר הקריטריונים ריקים לפי בחירתך. </CardDescription> </CardHeader> <CardContent> <ProductTypeFilter selectedOptions={selectedOptions} onCheckboxChange={onCheckboxChange} /> <InvestmentPreferencesFilter selectedOptions={selectedOptions} openDropdown={openDropdown} onToggleDropdown={onToggleDropdown} onCheckboxChange={onCheckboxChange} /> <AgentPreferencesFilter selectedOptions={selectedOptions} openDropdown={openDropdown} onToggleDropdown={onToggleDropdown} onCheckboxChange={onCheckboxChange} /> {/ Apply Filters Button /} <div className="flex justify-center pt-2"> <Button onClick={() => { onApplyFilters() onToggleDropdown(null) }} className="px-8 py-2" disabled={!isProductTypeSelected} > הצג הצעות מתאימות </Button> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/dispute-modal.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { SelectedOffer } from "@/types/dashboard" interface DisputeModalProps { isOpen: boolean onClose: () => void offer: SelectedOffer | null onSubmit: (disputeData: { reason: string; comment: string }) => void } const disputeReasons = [ "הסוכן לא יצר קשר", "ההצעה שונה ממה שהובטח", "שירות לקוי מהסוכן", "בעיה טכנית במערכת", "בעיה אחרת", ] export function DisputeModal({ isOpen, onClose, offer, onSubmit }: DisputeModalProps) { const [reason, setReason] = useState("") const [comment, setComment] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!reason.trim()) return setIsSubmitting(true) try { await onSubmit({ reason: reason.trim(), comment: comment.trim(), }) // Reset form setReason("") setComment("") onClose() } catch (error) { console.error("Error submitting dispute:", error) } finally { setIsSubmitting(false) } } const handleClose = () => { setReason("") setComment("") onClose() } return ( <Dialog open={isOpen} onOpenChange={handleClose}> <DialogContent className="sm:max-w-md" dir="rtl"> <DialogHeader> <DialogTitle className="text-right">פתיחת מחלוקת</DialogTitle> </DialogHeader> <form onSubmit={handleSubmit} className="space-y-4"> <div className="space-y-2"> <Label htmlFor="dispute-reason" className="text-sm font-medium"> סיבת המחלוקת <span className="text-red-500"></span> </Label> <Select value={reason} onValueChange={setReason} required> <SelectTrigger> <SelectValue placeholder="בחר סיבת מחלוקת" /> </SelectTrigger> <SelectContent> {disputeReasons.map((reasonOption) => ( <SelectItem key={reasonOption} value={reasonOption}> {reasonOption} </SelectItem> ))} </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="dispute-comment" className="text-sm font-medium"> הערות נוספות (אופציונלי) </Label> <Textarea id="dispute-comment" value={comment} onChange={(e) => setComment(e.target.value)} placeholder="תאר את הבעיה בפירוט..." className="min-h-[100px] resize-none" maxLength={500} /> <p className="text-xs text-muted-foreground text-left">{comment.length}/500 תווים</p> </div> <div className="flex gap-2 pt-4"> <Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting} className="flex-1 bg-transparent" > ביטול </Button> <Button type="submit" disabled={!reason.trim() || isSubmitting} className="flex-1"> {isSubmitting ? "שולח..." : "שלח מחלוקת"} </Button> </div> </form> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/pension-form/pension-details-form.tsx" "use client" import type React from "react" import type { FormData } from "./pension-form-modal" import { useState } from "react" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { InfoTooltip } from "./info-tooltip" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" interface PensionDetailsFormProps { formData: FormData updateFormData: (data: Partial<FormData>) => void onNext: () => void onBack: () => void } export function PensionDetailsForm({ formData, updateFormData, onNext, onBack }: PensionDetailsFormProps) { const [errors, setErrors] = useState<Record<string, string>>({}) const hasActiveFund = formData.pensionCompany && formData.pensionCompany !== "none" const validateForm = () => { const newErrors: Record<string, string> = {} if (!formData.pensionCompany) { newErrors.pensionCompany = "נא לבחור חברת פנסיה" } // Only validate other fields if user has an active fund if (hasActiveFund) { if (!formData.pensionBalance) { newErrors.pensionBalance = "נא לבחור טווח" } if (formData.managementFeeAccumulated < 0 || formData.managementFeeAccumulated > 2) { newErrors.managementFeeAccumulated = "נא להזין אחוז תקין (0-2%)" } if (formData.managementFeeDeposit < 0 || formData.managementFeeDeposit > 6) { newErrors.managementFeeDeposit = "נא להזין אחוז תקין (0-6%)" } if (!formData.investmentTrack) { newErrors.investmentTrack = "נא לבחור מסלול השקעה" } } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onNext() } } const companies = [ { value: "none", label: "אין לי קרן פנסיה" }, { value: "migdal", label: "מגדל" }, { value: "menora", label: "מנורה מבטחים" }, { value: "harel", label: "הראל" }, { value: "clal", label: "כלל" }, { value: "phoenix", label: "הפניקס" }, { value: "psagot", label: "פסגות" }, { value: "altshuler", label: "אלטשולר שחם" }, { value: "more", label: "מור" }, { value: "other", label: "אחר" }, ] const balanceRanges = [ { value: "0", label: "0 ₪" }, { value: "1-50000", label: "1 - 50,000 ₪" }, { value: "50001-100000", label: "50,001 - 100,000 ₪" }, { value: "100001-250000", label: "100,001 - 250,000 ₪" }, { value: "250001-500000", label: "250,001 - 500,000 ₪" }, { value: "500001-1000000", label: "500,001 - 1,000,000 ₪" }, { value: "1000001+", label: "מעל 1,000,000 ₪" }, ] const investmentTracks = [ { value: "general", label: "מסלול כללי" }, { value: "stocks", label: "מסלול מניות" }, { value: "bonds", label: "מסלול אג״ח" }, { value: "low-risk", label: "מסלול סיכון נמוך" }, { value: "halakha", label: "מסלול הלכה" }, { value: "age-based", label: "מסלול תלוי גיל" }, { value: "unknown", label: "לא יודע/ת" }, ] return ( <form onSubmit={handleSubmit}> <div className="space-y-6"> <div className="text-center mb-6"> <h2 className="text-2xl font-bold text-gray-900">פרטי קרן הפנסיה שלך</h2> <p className="text-gray-500 mt-1">המידע על הפנסיה הנוכחית שלך יעזור לנו להשוות ולהציע פתרון טוב יותר</p> </div> <div className="space-y-4"> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="pensionCompany" className="font-medium"> החברה בה מנוהלת קרן הפנסיה שלי כיום </Label> <InfoTooltip content="חברת הפנסיה שמנהלת את החיסכון הפנסיוני שלך" dataSource="ניתן למצוא את שם חברת הפנסיה בדף הפירוט השנתי שנשלח אליך, או באתר האינטרנט של חברת הפנסיה שלך" /> </div> <div className="relative"> <Select value={formData.pensionCompany} onValueChange={(value) => updateFormData({ pensionCompany: value })} > <SelectTrigger id="pensionCompany" className={`${errors.pensionCompany ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר חברת פנסיה" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {companies.map((company) => ( <SelectItem key={company.value} value={company.value}> {company.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.pensionCompany && <p className="text-red-500 text-sm">{errors.pensionCompany}</p>} </div> {hasActiveFund && ( <> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="pensionBalance" className="font-medium"> סכום כולל צבור בפנסיה שלי עד היום </Label> <InfoTooltip content="הסכום הכולל שנצבר בקרן הפנסיה שלך עד היום" dataSource="ניתן למצוא את הסכום הצבור בדף הפירוט השנתי, בדוח הרבעוני, או באזור האישי באתר חברת הפנסיה שלך" /> </div> <div className="relative"> <Select value={formData.pensionBalance} onValueChange={(value) => updateFormData({ pensionBalance: value })} > <SelectTrigger id="pensionBalance" className={`${errors.pensionBalance ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר טווח" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {balanceRanges.map((range) => ( <SelectItem key={range.value} value={range.value}> {range.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.pensionBalance && <p className="text-red-500 text-sm">{errors.pensionBalance}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="managementFeeAccumulated" className="font-medium"> דמי ניהול מהצבירה (%) </Label> <InfoTooltip content="אחוז דמי הניהול השנתיים שאתה משלם מסך הכסף שנצבר בפנסיה שלך" dataSource="ניתן למצוא את דמי הניהול מהצבירה בדף הפירוט השנתי תחת סעיף 'דמי ניהול', או בהסכם שחתמת עם חברת הפנסיה" /> </div> <div className="relative"> <Input id="managementFeeAccumulated" type="number" step="0.01" min="0" max="2" value={formData.managementFeeAccumulated} onChange={(e) => updateFormData({ managementFeeAccumulated: Number.parseFloat(e.target.value) })} placeholder="לדוגמה: 0.5" className={`text-left ${errors.managementFeeAccumulated ? "border-red-500" : ""}`} /> </div> {errors.managementFeeAccumulated && ( <p className="text-red-500 text-sm">{errors.managementFeeAccumulated}</p> )} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="managementFeeDeposit" className="font-medium"> דמי ניהול מההפקדה (%) </Label> <InfoTooltip content="אחוז דמי הניהול שאתה משלם מכל הפקדה חודשית לפנסיה" dataSource="ניתן למצוא את דמי הניהול מההפקדה בדף הפירוט השנתי תחת סעיף 'דמי ניהול', או בהסכם שחתמת עם חברת הפנסיה" /> </div> <div className="relative"> <Input id="managementFeeDeposit" type="number" step="0.1" min="0" max="6" value={formData.managementFeeDeposit} onChange={(e) => updateFormData({ managementFeeDeposit: Number.parseFloat(e.target.value) })} placeholder="לדוגמה: 2.0" className={`text-left ${errors.managementFeeDeposit ? "border-red-500" : ""}`} /> </div> {errors.managementFeeDeposit && <p className="text-red-500 text-sm">{errors.managementFeeDeposit}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="investmentTrack" className="font-medium"> מסלול ההשקעה שלי </Label> <InfoTooltip content="מסלול ההשקעה קובע את אופן השקעת הכספים בקרן הפנסיה שלך" dataSource="ניתן למצוא את מסלול ההשקעה בדף הפירוט השנתי, או באזור האישי באתר חברת הפנסיה שלך" /> </div> <div className="relative"> <Select value={formData.investmentTrack} onValueChange={(value) => updateFormData({ investmentTrack: value })} > <SelectTrigger id="investmentTrack" className={`${errors.investmentTrack ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר מסלול השקעה" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {investmentTracks.map((track) => ( <SelectItem key={track.value} value={track.value}> {track.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.investmentTrack && <p className="text-red-500 text-sm">{errors.investmentTrack}</p>} </div> </> )} </div> <div className="pt-4 flex gap-3"> <Button type="button" variant="outline" onClick={onBack} className="flex-1 flex items-center justify-center gap-2 bg-transparent" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700 flex items-center justify-center gap-2"> המשך לשלב הבא <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m9 18 6-6-6-6" /> </svg> </Button> </div> </div> </form> ) } [V0_FILE]typescriptreact:file="components/pension-form/provident-fund-form.tsx" "use client" import type React from "react" import type { FormData } from "./pension-form-modal" import { useState } from "react" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { InfoTooltip } from "./info-tooltip" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" interface ProvidentFundFormProps { formData: FormData updateFormData: (data: Partial<FormData>) => void onNext: () => void onBack: () => void } export function ProvidentFundForm({ formData, updateFormData, onNext, onBack }: ProvidentFundFormProps) { const [errors, setErrors] = useState<Record<string, string>>({}) const hasActiveFund = formData.providentCompany && formData.providentCompany !== "none" const validateForm = () => { const newErrors: Record<string, string> = {} if (!formData.providentCompany) { newErrors.providentCompany = "נא לבחור חברה מנהלת" } // Only validate other fields if user has an active fund if (hasActiveFund) { if (!formData.providentBalance) { newErrors.providentBalance = "נא לבחור טווח" } if (formData.providentFeeAccumulated < 0 || formData.providentFeeAccumulated > 2) { newErrors.providentFeeAccumulated = "נא להזין אחוז תקין (0-2%)" } if (!formData.providentInvestmentTrack) { newErrors.providentInvestmentTrack = "נא לבחור מסלול השקעה" } } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onNext() } } const companies = [ { value: "none", label: "אין לי קופת גמל" }, { value: "migdal", label: "מגדל" }, { value: "menora", label: "מנורה מבטחים" }, { value: "harel", label: "הראל" }, { value: "clal", label: "כלל" }, { value: "phoenix", label: "הפניקס" }, { value: "psagot", label: "פסגות" }, { value: "altshuler", label: "אלטשולר שחם" }, { value: "more", label: "מור" }, { value: "other", label: "אחר" }, ] const balanceRanges = [ { value: "0", label: "0 ₪" }, { value: "1-50000", label: "1 - 50,000 ₪" }, { value: "50001-100000", label: "50,001 - 100,000 ₪" }, { value: "100001-250000", label: "100,001 - 250,000 ₪" }, { value: "250001-500000", label: "250,001 - 500,000 ₪" }, { value: "500001-1000000", label: "500,001 - 1,000,000 ₪" }, { value: "1000001+", label: "מעל 1,000,000 ₪" }, ] const investmentTracks = [ { value: "general", label: "מסלול כללי" }, { value: "stocks", label: "מסלול מניות" }, { value: "bonds", label: "מסלול אג״ח" }, { value: "low-risk", label: "מסלול סיכון נמוך" }, { value: "halakha", label: "מסלול הלכה" }, { value: "age-based", label: "מסלול תלוי גיל" }, { value: "unknown", label: "לא יודע/ת" }, ] return ( <form onSubmit={handleSubmit}> <div className="space-y-6"> <div className="text-center mb-6"> <h2 className="text-2xl font-bold text-gray-900">פרטי קופת הגמל שלך</h2> <p className="text-gray-500 mt-1">המידע על קופת הגמל הנוכחית שלך יעזור לנו להשוות ולהציע פתרון מתאים</p> </div> <div className="space-y-4"> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="providentCompany" className="font-medium"> החברה בה מנוהלת קופת הגמל שלי כיום </Label> <InfoTooltip content="חברת הגמל שמנהלת את החיסכון שלך" dataSource="ניתן למצוא את שם החברה בדף הפירוט השנתי שנשלח אליך, או באתר האינטרנט של חברת הגמל שלך" /> </div> <div className="relative"> <Select value={formData.providentCompany} onValueChange={(value) => updateFormData({ providentCompany: value })} > <SelectTrigger id="providentCompany" className={`${errors.providentCompany ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר חברה מנהלת" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {companies.map((company) => ( <SelectItem key={company.value} value={company.value}> {company.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.providentCompany && <p className="text-red-500 text-sm">{errors.providentCompany}</p>} </div> {hasActiveFund && ( <> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="providentBalance" className="font-medium"> סכום כולל צבור בקופת הגמל שלי עד היום </Label> <InfoTooltip content="הסכום הכולל שנצבר בקופת הגמל שלך עד היום" dataSource="ניתן למצוא את הסכום הצבור בדף הפירוט השנתי, בדוח הרבעוני, או באזור האישי באתר חברת הגמל שלך" /> </div> <div className="relative"> <Select value={formData.providentBalance} onValueChange={(value) => updateFormData({ providentBalance: value })} > <SelectTrigger id="providentBalance" className={`${errors.providentBalance ? "border-red-500" : ""}`} > <SelectValue placeholder="בחר טווח" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {balanceRanges.map((range) => ( <SelectItem key={range.value} value={range.value}> {range.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.providentBalance && <p className="text-red-500 text-sm">{errors.providentBalance}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="providentFeeAccumulated" className="font-medium"> דמי ניהול מהצבירה (%) </Label> <InfoTooltip content="אחוז דמי הניהול השנתיים שאתה משלם מסך הכסף שנצבר בקופת הגמל שלך" dataSource="ניתן למצוא את דמי הניהול מהצבירה בדף הפירוט השנתי תחת סעיף 'דמי ניהול', או בהסכם שחתמת עם חברת הגמל" /> </div> <div className="relative"> <Input id="providentFeeAccumulated" type="number" step="0.01" min="0" max="2" value={formData.providentFeeAccumulated} onChange={(e) => updateFormData({ providentFeeAccumulated: Number.parseFloat(e.target.value) })} placeholder="לדוגמה: 0.5" className={`text-left ${errors.providentFeeAccumulated ? "border-red-500" : ""}`} /> </div> {errors.providentFeeAccumulated && ( <p className="text-red-500 text-sm">{errors.providentFeeAccumulated}</p> )} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="providentFeeDeposit" className="font-medium"> דמי ניהול מההפקדה (%) </Label> <InfoTooltip content="בקופות גמל בדרך כלל אין דמי ניהול מהפקדה, אך אם יש - זהו אחוז דמי הניהול שאתה משלם מכל הפקדה חודשית" dataSource="ניתן למצוא את דמי הניהול מההפקדה בדף הפירוט השנתי תחת סעיף 'דמי ניהול', או בהסכם שחתמת עם חברת הגמל" /> </div> <div className="relative"> <Input id="providentFeeDeposit" type="number" step="0.1" min="0" max="6" value={formData.providentFeeDeposit} onChange={(e) => updateFormData({ providentFeeDeposit: Number.parseFloat(e.target.value) })} placeholder="לדוגמה: 0.0" className={`text-left ${errors.providentFeeDeposit ? "border-red-500" : ""}`} /> </div> <p className="text-xs text-gray-500">בדרך כלל בקופות גמל אין דמי ניהול מהפקדה</p> </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="providentInvestmentTrack" className="font-medium"> מסלול ההשקעה שלי </Label> <InfoTooltip content="מסלול ההשקעה קובע את אופן השקעת הכספים בקופת הגמל שלך" dataSource="ניתן למצוא את מסלול ההשקעה בדף הפירוט השנתי, או באזור האישי באתר חברת הגמל שלך" /> </div> <div className="relative"> <Select value={formData.providentInvestmentTrack} onValueChange={(value) => updateFormData({ providentInvestmentTrack: value })} > <SelectTrigger id="providentInvestmentTrack" className={`${errors.providentInvestmentTrack ? "border-red-500" : ""}`} > <SelectValue placeholder="בחר מסלול השקעה" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {investmentTracks.map((track) => ( <SelectItem key={track.value} value={track.value}> {track.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.providentInvestmentTrack && ( <p className="text-red-500 text-sm">{errors.providentInvestmentTrack}</p> )} </div> </> )} </div> <div className="pt-4 flex gap-3"> <Button type="button" variant="outline" onClick={onBack} className="flex-1 flex items-center justify-center gap-2 bg-transparent" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700 flex items-center justify-center gap-2"> המשך לשלב הבא <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m9 18 6-6-6-6" /> </svg> </Button> </div> </div> </form> ) } [V0_FILE]typescriptreact:file="components/pension-form/study-fund-form.tsx" "use client" import type React from "react" import type { FormData } from "./pension-form-modal" import { useState } from "react" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { InfoTooltip } from "./info-tooltip" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" interface StudyFundFormProps { formData: FormData updateFormData: (data: Partial<FormData>) => void onNext: () => void onBack: () => void } export function StudyFundForm({ formData, updateFormData, onNext, onBack }: StudyFundFormProps) { const [errors, setErrors] = useState<Record<string, string>>({}) const hasActiveFund = formData.studyCompany && formData.studyCompany !== "none" const validateForm = () => { const newErrors: Record<string, string> = {} if (!formData.studyCompany) { newErrors.studyCompany = "נא לבחור חברה מנהלת" } // Only validate other fields if user has an active fund if (hasActiveFund) { if (!formData.studyBalance) { newErrors.studyBalance = "נא לבחור טווח" } if (formData.studyFeeAccumulated < 0 || formData.studyFeeAccumulated > 2) { newErrors.studyFeeAccumulated = "נא להזין אחוז תקין (0-2%)" } if (!formData.studyInvestmentTrack) { newErrors.studyInvestmentTrack = "נא לבחור מסלול השקעה" } } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onNext() } } const companies = [ { value: "none", label: "אין לי קרן השתלמות" }, { value: "migdal", label: "מגדל" }, { value: "menora", label: "מנורה מבטחים" }, { value: "harel", label: "הראל" }, { value: "clal", label: "כלל" }, { value: "phoenix", label: "הפניקס" }, { value: "psagot", label: "פסגות" }, { value: "altshuler", label: "אלטשולר שחם" }, { value: "more", label: "מור" }, { value: "other", label: "אחר" }, ] const balanceRanges = [ { value: "0", label: "0 ₪" }, { value: "1-50000", label: "1 - 50,000 ₪" }, { value: "50001-100000", label: "50,001 - 100,000 ₪" }, { value: "100001-250000", label: "100,001 - 250,000 ₪" }, { value: "250001-500000", label: "250,001 - 500,000 ₪" }, { value: "500001-1000000", label: "500,001 - 1,000,000 ₪" }, { value: "1000001+", label: "מעל 1,000,000 ₪" }, ] const investmentTracks = [ { value: "general", label: "מסלול כללי" }, { value: "stocks", label: "מסלול מניות" }, { value: "bonds", label: "מסלול אג״ח" }, { value: "low-risk", label: "מסלול סיכון נמוך" }, { value: "halakha", label: "מסלול הלכה" }, { value: "age-based", label: "מסלול תלוי גיל" }, { value: "unknown", label: "לא יודע/ת" }, ] return ( <form onSubmit={handleSubmit}> <div className="space-y-6"> <div className="text-center mb-6"> <h2 className="text-2xl font-bold text-gray-900">פרטי קרן ההשתלמות שלך</h2> <p className="text-gray-500 mt-1">המידע על קרן ההשתלמות הנוכחית שלך יעזור לנו להשוות ולהציע פתרון מתאים</p> </div> <div className="space-y-4"> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="studyCompany" className="font-medium"> החברה בה מנוהלת קרן ההשתלמות שלי כיום </Label> <InfoTooltip content="חברת קרן ההשתלמות שמנהלת את החיסכון שלך" dataSource="ניתן למצוא את שם החברה בדף הפירוט השנתי שנשלח אליך, או באתר האינטרנט של חברת קרן ההשתלמות שלך" /> </div> <div className="relative"> <Select value={formData.studyCompany} onValueChange={(value) => updateFormData({ studyCompany: value })}> <SelectTrigger id="studyCompany" className={`${errors.studyCompany ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר חברה מנהלת" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {companies.map((company) => ( <SelectItem key={company.value} value={company.value}> {company.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.studyCompany && <p className="text-red-500 text-sm">{errors.studyCompany}</p>} </div> {hasActiveFund && ( <> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="studyBalance" className="font-medium"> סכום כולל צבור בקרן ההשתלמות שלי עד היום </Label> <InfoTooltip content="הסכום הכולל שנצבר בקרן ההשתלמות שלך עד היום" dataSource="ניתן למצוא את הסכום הצבור בדף הפירוט השנתי, בדוח הרבעוני, או באזור האישי באתר חברת קרן ההשתלמות שלך" /> </div> <div className="relative"> <Select value={formData.studyBalance} onValueChange={(value) => updateFormData({ studyBalance: value })} > <SelectTrigger id="studyBalance" className={`${errors.studyBalance ? "border-red-500" : ""}`}> <SelectValue placeholder="בחר טווח" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {balanceRanges.map((range) => ( <SelectItem key={range.value} value={range.value}> {range.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.studyBalance && <p className="text-red-500 text-sm">{errors.studyBalance}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="studyFeeAccumulated" className="font-medium"> דמי ניהול מהצבירה (%) </Label> <InfoTooltip content="אחוז דמי הניהול השנתיים שאתה משלם מסך הכסף שנצבר בקרן ההשתלמות שלך" dataSource="ניתן למצוא את דמי הניהול מהצבירה בדף הפירוט השנתי תחת סעיף 'דמי ניהול', או בהסכם שחתמת עם חברת קרן ההשתלמות" /> </div> <div className="relative"> <Input id="studyFeeAccumulated" type="number" step="0.01" min="0" max="2" value={formData.studyFeeAccumulated} onChange={(e) => updateFormData({ studyFeeAccumulated: Number.parseFloat(e.target.value) })} placeholder="לדוגמה: 0.6" className={`text-left ${errors.studyFeeAccumulated ? "border-red-500" : ""}`} /> </div> {errors.studyFeeAccumulated && <p className="text-red-500 text-sm">{errors.studyFeeAccumulated}</p>} </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="studyFeeDeposit" className="font-medium"> דמי ניהול מההפקדה (%) </Label> <InfoTooltip content="בקרנות השתלמות בדרך כלל אין דמי ניהול מהפקדה, אך אם יש - זהו אחוז דמי הניהול שאתה משלם מכל הפקדה חודשית" dataSource="ניתן למצוא את דמי הניהול מההפקדה בדף הפירוט השנתי תחת סעיף 'דמי ניהול', או בהסכם שחתמת עם חברת קרן ההשתלמות" /> </div> <div className="relative"> <Input id="studyFeeDeposit" type="number" step="0.1" min="0" max="6" value={formData.studyFeeDeposit} onChange={(e) => updateFormData({ studyFeeDeposit: Number.parseFloat(e.target.value) })} placeholder="לדוגמה: 0.0" className={`text-left ${errors.studyFeeDeposit ? "border-red-500" : ""}`} /> </div> <p className="text-xs text-gray-500">בדרך כלל בקרנות השתלמות אין דמי ניהול מהפקדה</p> </div> <div className="space-y-2"> <div className="flex items-center"> <Label htmlFor="studyInvestmentTrack" className="font-medium"> מסלול ההשקעה שלי </Label> <InfoTooltip content="מסלול ההשקעה קובע את אופן השקעת הכספים בקרן ההשתלמות שלך" dataSource="ניתן למצוא את מסלול ההשקעה בדף הפירוט השנתי, או באזור האישי באתר חברת קרן ההשתלמות שלך" /> </div> <div className="relative"> <Select value={formData.studyInvestmentTrack} onValueChange={(value) => updateFormData({ studyInvestmentTrack: value })} > <SelectTrigger id="studyInvestmentTrack" className={`${errors.studyInvestmentTrack ? "border-red-500" : ""}`} > <SelectValue placeholder="בחר מסלול השקעה" /> </SelectTrigger> <SelectContent className="max-h-[300px] overflow-y-auto"> {investmentTracks.map((track) => ( <SelectItem key={track.value} value={track.value}> {track.label} </SelectItem> ))} </SelectContent> </Select> </div> {errors.studyInvestmentTrack && <p className="text-red-500 text-sm">{errors.studyInvestmentTrack}</p>} </div> </> )} </div> <div className="pt-4 flex gap-3"> <Button type="button" variant="outline" onClick={onBack} className="flex-1 flex items-center justify-center gap-2 bg-transparent" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m15 18-6-6 6-6" /> </svg> חזרה לשלב הקודם </Button> <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700 flex items-center justify-center gap-2"> המשך לשלב הבא <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rtl:rotate-180" > <path d="m9 18 6-6-6-6" /> </svg> </Button> </div> </div> </form> ) } [V0_FILE]markdown:file="docs/firestore-schema.md" # 🔥 FIREBASE DATA STRUCTURE (CLOUD FIRESTORE) ## /clients (Collection) Handles clients data \`\`\` {clientId} - UUID fullName: string email: string phone: string birthDate: timestamp gender: string selectedProducts: map # any selected product by client should appear here, atleast one should exist pension: string # value should be UUID of pension form in /client-pension collection - or null providentFund: string # value should be UUID of provident form in /client-provident-fund collection - or null studyFund: string # value should be UUID of studyFund form in /client-study-fund collection - or null employmentDetails: map status: string sector: string occupation: string incomeRange: string allowMarketing: boolean createdAt: timestamp lastLogin: timestamp \`\`\` ## /client-pension (Collection) Handles client pension data \`\`\` {clientId} - client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: timestamp \`\`\` ## /client-provident-fund (Collection) Handles client provident fund data \`\`\` {clientId} - client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: timestamp \`\`\` ## /client-study-fund (Collection) Handles client study fund data \`\`\` {clientId} - client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: timestamp \`\`\` ## /client-selected-offers (Collection) Handles selected offers by client in order to not allow him to search for new ones until expired \`\`\` {clientId} - client UUID pension: map or null id: string contactMethod: list ["phone", "email"] - one or both expirationTimestamp: timestamp providentFund: map or null id: string contactMethod: list ["phone", "email"] - one or both expirationTimestamp: timestamp studyFund: map or null id: string contactMethod: list ["phone", "email"] - one or both expirationTimestamp: timestamp updatedAt: timestamp \`\`\` ## /client-messages (Collection) Handles notifications for client to view \`\`\` {messageId} - UUID clientId: string sender: string ("system" | "agent" | "admin") senderId: string message: string timestamp: timestamp type: string ("notification" | "info") \`\`\` ## /client-disputes (Collection) Handles disputes, used for admin to view messages from client about agents \`\`\` {disputeId} - UUID clientId: string offerId: string agentId: string status: string ("new" | "in_review" | "resolved") subject: string description: string openedAt: timestamp closedAt: timestamp \`\`\` ## /agents (Collection) Handles agents data \`\`\` {agentId} - UUID fullName: string email: string phone: string identificationNumber: number licenseNumber: string licenseType: string licenseIssuedAt: timestamp licenseDocumentUrl: string agencyName: string serviceArea: string yearsExperience: number clientNumber: string languages: array services: array ("pension" | "providentFund" | "studyFund") status: string ("pending" | "approved" | "rejected") rating: number reviewsCount: number allowMarketing: boolean createdAt: timestamp lastLogin: timestamp \`\`\` ## /agent-offers-pension (Collection) Handles pension offers data from agents \`\`\` {offerId} - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: array targetOccupation: array minBalance: string expirationDate: timestamp viewCount: number clickCount: number selectCount: number createdAt: timestamp updatedAt: timestamp \`\`\` ## /agent-offers-provident-fund (Collection) Handles provident fund offers data from agents \`\`\` {offerId} - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: array targetOccupation: array minBalance: string expirationDate: timestamp viewCount: number clickCount: number selectCount: number createdAt: timestamp \`\`\` ## /agent-offers-study-fund (Collection) Handles study fund offers data from agents \`\`\` {offerId} - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: array targetOccupation: array minBalance: string expirationDate: timestamp viewCount: number clickCount: number selectCount: number createdAt: timestamp \`\`\` ## /agent-messages (Collection) Handles notifications for agent to view \`\`\` {messageId} - UUID agentId: string sender: string ("system" | "agent" | "admin") senderId: string message: string timestamp: timestamp type: string ("notification" | "info") \`\`\` ## /agent-offer-matches (Collection) Stores the match between an agents offer and a clients selection \`\`\` {matchId} - UUID clientId: string agentId: string offerId: string productType: string ("pension" | "providentFund" | "studyFund") contactMethod: list ["phone", "email"] - one or both status: string ("new" | "contacted" | "in_progress" | "completed" | "not_relevant" | "canceled") createdAt: timestamp updatedAt: timestamp \`\`\` ## /agent-reviews (Collection) Stores the reviews from clients to agents \`\`\` {reviewId} - UUID agentId: string clientId: string rating: number text: string createdAt: timestamp adminApproved: boolean \`\`\` ## /admins (Collection) Handles admins data \`\`\` {adminId} - UUID fullName: string email: string role: string ("superadmin" | "moderator") createdAt: timestamp lastLogin: timestamp \`\`\` ## /platform-notifications (Collection) Handles platform notifications to clients, agents and admins \`\`\` {notificationId} - UUID targetAudience: list ["clients", "agents", "admins"] - one or more message: string timestamp: timestamp critical: boolean \`\`\` --- ## Collection Relationships ### Client Flow 1. Client Registration: Data stored in `/clients` 2. Product Selection: References stored in `selectedProducts` map 3. Product Details: Detailed forms in `/client-pension`, `/client-provident-fund`, `/client-study-fund` 4. Offer Selection: Active selections tracked in `/client-selected-offers` 5. Agent Matching: Matches created in `/agent-offer-matches` ### Agent Flow 1. Agent Registration: Data stored in `/agents` 2. Offer Creation: Offers stored in product-specific collections 3. Client Matching: Automatic matching via `/agent-offer-matches` 4. Communication: Messages via `/agent-messages` ### Admin Flow 1. Agent Verification: Manage agent status in `/agents` 2. Dispute Resolution: Handle disputes via `/client-disputes` 3. Review Moderation: Approve reviews in `/agent-reviews` 4. Platform Communication: Send notifications via `/platform-notifications` [V0_FILE]markdown:file="docs/README.md" # Documentation This directory contains project documentation and reference materials. ## Files - firestore-schema.md - Complete Firestore database schema documentation including all collections, fields, and relationships - README.md - This file, providing an overview of the documentation structure ## Usage These documentation files serve as reference materials for developers working on the project. They provide detailed information about: - Database structure and relationships - Data types and field specifications - Collection purposes and usage patterns - Integration guidelines The documentation is maintained alongside the codebase to ensure accuracy and consistency with the implemented features. [V0_FILE]typescript:file="types/legacy.ts" // Legacy types for backward compatibility during migration // These will be gradually replaced with the new model types export interface LegacyUser { email: string password: string name: string id: string role: "client" | "agent" | "admin" pensionDetails?: { pensionCompany: string pensionBalance: string managementFeeAccumulated: number managementFeeDeposit: number investmentTrack: string workField: string monthlySalary: string monthlyContribution: string birthDate: string gender: string } offers?: Array<{ id: string company: string managementFeeAccumulated: number managementFeeDeposit: number savingsAmount: number status: string }> agentDetails?: { licenseType: string licenseNumber: string licenseIssueDate: string experience: string clientsCount: string bio: string services: string[] languages: string[] agency: string serviceArea: string verified: boolean } agentMetrics?: { offerAcceptanceRate: number averageSavings: number profileViews: number averageRating: number totalLeads: number convertedLeads: number reviewsCount: number positiveReviewsPercentage: number } } export interface LegacyOffer { id: string company: string managementFeeAccumulated: number managementFeeDeposit: number investmentTrack?: string savingsAmount?: number status?: string agent: { name: string rating: number specialization: string agency: string phone: string email: string reviews: Array<{ text: string author: string rating: number }> } } export interface LegacyFormData { selectedProducts: string[] termsAccepted: boolean marketingConsent: boolean pensionCompany: string pensionBalance: string managementFeeAccumulated: number managementFeeDeposit: number investmentTrack: string providentCompany: string providentBalance: string providentFeeAccumulated: number providentFeeDeposit: number providentInvestmentTrack: string studyCompany: string studyBalance: string studyFeeAccumulated: number studyFeeDeposit: number studyInvestmentTrack: string employmentStatus: string sector: string field: string workField: string monthlySalary: string monthlyContribution: string fullName: string email: string phone: string birthDate: string gender: string } // Migration utilities export namespace TypeMigration { export function legacyUserToClient(legacyUser: LegacyUser): Partial<import("./models").Client> { return { id: legacyUser.id, fullName: legacyUser.name, email: legacyUser.email, phone: legacyUser.pensionDetails?.monthlySalary || "", // This mapping needs to be fixed birthDate: legacyUser.pensionDetails?.birthDate ? new Date(legacyUser.pensionDetails.birthDate) : new Date(), gender: legacyUser.pensionDetails?.gender || "", allowMarketing: false, // Default value createdAt: new Date(), lastLogin: new Date(), selectedProducts: { pension: null, providentFund: null, studyFund: null, }, employmentDetails: { status: "", sector: legacyUser.pensionDetails?.workField || "", occupation: "", incomeRange: legacyUser.pensionDetails?.monthlySalary || "", }, } } export function legacyUserToAgent(legacyUser: LegacyUser): Partial<import("./models").Agent> { if (!legacyUser.agentDetails) return {} return { id: legacyUser.id, fullName: legacyUser.name, email: legacyUser.email, phone: "", // Not available in legacy identificationNumber: 0, // Not available in legacy licenseNumber: legacyUser.agentDetails.licenseNumber, licenseType: legacyUser.agentDetails.licenseType, licenseIssuedAt: new Date(legacyUser.agentDetails.licenseIssueDate), licenseDocumentUrl: "", agencyName: legacyUser.agentDetails.agency, serviceArea: legacyUser.agentDetails.serviceArea, yearsExperience: Number.parseInt(legacyUser.agentDetails.experience.split("-")[0]) || 0, clientNumber: legacyUser.agentDetails.clientsCount, languages: legacyUser.agentDetails.languages, services: legacyUser.agentDetails.services.map((s) => { switch (s) { case "פנסיה": return "pension" as const case "קרן השתלמות": return "studyFund" as const case "גמל להשקעה": return "providentFund" as const default: return "pension" as const } }), status: legacyUser.agentDetails.verified ? ("approved" as const) : ("pending" as const), rating: legacyUser.agentMetrics?.averageRating || 0, reviewsCount: legacyUser.agentMetrics?.reviewsCount || 0, allowMarketing: false, createdAt: new Date(), lastLogin: new Date(), } } } [V0_FILE]typescript:file="types/index.ts" // Main types export file export * from "./models" export * from "./legacy" // Re-export commonly used types for convenience export type { Client, Agent, AgentOffer, ClientPension, ClientProvidentFund, ClientStudyFund, AgentOfferMatch, AgentReview, ClientDispute, ProductType, UserRole, ContactMethod, } from "./models" [V0_FILE]typescript:file="lib/type-guards.ts" // Type guard functions for runtime type checking import type { Client, Agent, AgentOffer, AgentOfferPension, AgentOfferProvidentFund, AgentOfferStudyFund, ProductType, UserRole, } from "@/types/models" export function isClient(user: any): user is Client { return ( user && typeof user.id === "string" && typeof user.fullName === "string" && typeof user.email === "string" && typeof user.phone === "string" && user.birthDate instanceof Date && typeof user.gender === "string" && user.selectedProducts && user.employmentDetails && typeof user.allowMarketing === "boolean" && user.createdAt instanceof Date && user.lastLogin instanceof Date ) } export function isAgent(user: any): user is Agent { return ( user && typeof user.id === "string" && typeof user.fullName === "string" && typeof user.email === "string" && typeof user.phone === "string" && typeof user.identificationNumber === "number" && typeof user.licenseNumber === "string" && typeof user.licenseType === "string" && user.licenseIssuedAt instanceof Date && typeof user.licenseDocumentUrl === "string" && typeof user.agencyName === "string" && typeof user.serviceArea === "string" && typeof user.yearsExperience === "number" && typeof user.clientNumber === "string" && Array.isArray(user.languages) && Array.isArray(user.services) && ["pending", "approved", "rejected"].includes(user.status) && typeof user.rating === "number" && typeof user.reviewsCount === "number" && typeof user.allowMarketing === "boolean" && user.createdAt instanceof Date && user.lastLogin instanceof Date ) } export function isProductType(value: string): value is ProductType { return ["pension", "providentFund", "studyFund"].includes(value) } export function isUserRole(value: string): value is UserRole { return ["client", "agent", "admin"].includes(value) } export function isAgentOfferPension(offer: AgentOffer): offer is AgentOfferPension { return "updatedAt" in offer } export function isAgentOfferProvidentFund(offer: AgentOffer): offer is AgentOfferProvidentFund { return !("updatedAt" in offer) && "createdAt" in offer } export function isAgentOfferStudyFund(offer: AgentOffer): offer is AgentOfferStudyFund { return !("updatedAt" in offer) && "createdAt" in offer } // Validation functions export function validateEmail(email: string): boolean { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } export function validatePhone(phone: string): boolean { const phoneRegex = /^05\d-?\d{7}$|^0\d{1,2}-?\d{7}$/ return phoneRegex.test(phone.replace(/\s/g, "")) } export function validateIsraeliId(id: string): boolean { if (!/^\d{9}$/.test(id)) return false const digits = id.split("").map(Number) let sum = 0 for (let i = 0; i < 9; i++) { let digit = digits[i] if (i % 2 === 1) { digit = 2 if (digit > 9) digit -= 9 } sum += digit } return sum % 10 === 0 } export function validateLicenseNumber(license: string): boolean { // Basic validation - adjust based on actual license format requirements return /^\d{4,8}$/.test(license) } [V0_FILE]typescript:file="lib/constants/firestore.ts" // Firestore collection names and field constants export const COLLECTIONS = { CLIENTS: "clients", CLIENT_PENSION: "client-pension", CLIENT_PROVIDENT_FUND: "client-provident-fund", CLIENT_STUDY_FUND: "client-study-fund", CLIENT_SELECTED_OFFERS: "client-selected-offers", CLIENT_MESSAGES: "client-messages", CLIENT_DISPUTES: "client-disputes", AGENTS: "agents", AGENT_OFFERS_PENSION: "agent-offers-pension", AGENT_OFFERS_PROVIDENT_FUND: "agent-offers-provident-fund", AGENT_OFFERS_STUDY_FUND: "agent-offers-study-fund", AGENT_MESSAGES: "agent-messages", AGENT_OFFER_MATCHES: "agent-offer-matches", AGENT_REVIEWS: "agent-reviews", ADMINS: "admins", PLATFORM_NOTIFICATIONS: "platform-notifications", } as const export const PRODUCT_TYPES = { PENSION: "pension", PROVIDENT_FUND: "providentFund", STUDY_FUND: "studyFund", } as const export const CONTACT_METHODS = { PHONE: "phone", EMAIL: "email", } as const export const AGENT_STATUS = { PENDING: "pending", APPROVED: "approved", REJECTED: "rejected", } as const export const DISPUTE_STATUS = { NEW: "new", IN_REVIEW: "in_review", RESOLVED: "resolved", } as const export const MATCH_STATUS = { NEW: "new", CONTACTED: "contacted", IN_PROGRESS: "in_progress", COMPLETED: "completed", NOT_RELEVANT: "not_relevant", CANCELED: "canceled", } as const export const MESSAGE_SENDER = { SYSTEM: "system", AGENT: "agent", ADMIN: "admin", } as const export const MESSAGE_TYPE = { NOTIFICATION: "notification", INFO: "info", } as const export const ADMIN_ROLE = { SUPERADMIN: "superadmin", MODERATOR: "moderator", } as const // Field validation constants export const VALIDATION = { MIN_PASSWORD_LENGTH: 8, MAX_NAME_LENGTH: 100, MAX_MESSAGE_LENGTH: 1000, MAX_TITLE_LENGTH: 200, MIN_RATING: 1, MAX_RATING: 5, MIN_FEE: 0, MAX_FEE: 10, MIN_YEARS_EXPERIENCE: 0, MAX_YEARS_EXPERIENCE: 50, } as const // Default values export const DEFAULTS = { PAGINATION_LIMIT: 20, OFFER_EXPIRATION_DAYS: 30, SELECTED_OFFER_EXPIRATION_DAYS: 7, DEFAULT_RATING: 0, DEFAULT_REVIEWS_COUNT: 0, } as const [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/pension-comparison.tsx" isFixed="true" isQuickEdit="true" // Refactored from: components/pension-form/comparison-results.tsx // Pension fund comparison content component import { Card, CardContent } from "@/components/ui/card" import { InfoTooltip } from "../info-tooltip" import { Percent, AlertCircle } from "lucide-react" import type { FormData } from "../pension-form-modal" import { getCompanyName } from "./utils" import { PensionComparisonCharts } from "./pension-comparison-charts" import { PensionMarketComparison } from "./pension-market-comparison" interface PensionComparisonContentProps { formData: FormData } export function PensionComparisonContent({ formData }: PensionComparisonContentProps) { return ( <div dir="rtl" className="space-y-4 text-right"> <div className="bg-blue-50 p-4 rounded-lg border border-blue-100"> <h3 className="font-medium text-blue-800 mb-2 flex items-center"> <AlertCircle className="h-5 w-5 ml-2" /> קרן פנסיה -{" "} {formData.pensionCompany === "none" ? "אין לך קרן פנסיה" : getCompanyName(formData.pensionCompany)} </h3> <p className="text-sm text-blue-700">הנתונים מוצגים לצורך השוואה בלבד ומבוססים על דיווחי משתמשים באתר.</p> </div> <div className="grid grid-cols-2 gap-4"> <Card> <CardContent className="p-4"> <div className="flex items-center justify-between mb-2"> <div className="flex items-center"> <Percent className="h-5 w-5 text-gray-600 ml-2" /> <span className="font-medium">דמי ניהול מהצבירה</span> </div> <InfoTooltip content="דמי הניהול השנתיים שאתה משלם מסך הכסף שנצבר בפנסיה" /> </div> <div className="flex items-center justify-between"> <span className="text-gray-500">כיום:</span> <span className="font-bold">{formData.managementFeeAccumulated}%</span> </div> <div className="flex items-center justify-between"> <span className="text-gray-500">ממוצע משתמשים באתר:</span> <span className="font-medium">0.80%</span> </div> </CardContent> </Card> <Card> <CardContent className="p-4"> <div className="flex items-center justify-between mb-2"> <div className="flex items-center"> <Percent className="h-5 w-5 text-gray-600 ml-2" /> <span className="font-medium">דמי ניהול מהפקדה</span> </div> <InfoTooltip content="דמי הניהול שאתה משלם מכל הפקדה חודשית לפנסיה" /> </div> <div className="flex items-center justify-between"> <span className="text-gray-500">כיום:</span> <span className="font-bold">{formData.managementFeeDeposit}%</span> </div> <div className="flex items-center justify-between"> <span className="text-gray-500">ממוצע משתמשים באתר:</span> <span className="font-medium">2.50%</span> </div> </CardContent> </Card> </div> {/ Market Comparison /} <PensionMarketComparison formData={formData} /> {/ Visual Comparison Charts /} <h3 className="font-semibold text-lg mt-6 mb-3">השוואה למשתמשים באתר</h3> <PensionComparisonCharts formData={formData} /> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/pension-market-comparison.tsx" // Market comparison component for pension funds import { Card, CardContent } from "@/components/ui/card" import { InfoTooltip } from "../info-tooltip" import type { FormData } from "../pension-form-modal" import { calculatePercentile } from "./utils" interface PensionMarketComparisonProps { formData: FormData } export function PensionMarketComparison({ formData }: PensionMarketComparisonProps) { const percentilePosition = calculatePercentile(formData.managementFeeAccumulated, 0.2, 1.5) const percentileFormatted = (100 - percentilePosition).toFixed(2) return ( <Card> <CardContent className="p-4"> <div className="flex items-center justify-between mb-4"> <h3 className="font-medium">השוואה למשתמשים באתר - דמי ניהול מהצבירה</h3> <InfoTooltip content="השוואה בין דמי הניהול שלך לממוצע משתמשים באתר, בהתבסס על נתונים שדווחו על ידי משתמשים" /> </div> <div className="relative h-8 bg-gray-100 rounded-full overflow-hidden mb-2"> <div className="absolute top-0 bottom-0 right-0 bg-gradient-to-l from-red-500 via-yellow-500 to-green-500" style={{ width: "100%" }} ></div> <div className="absolute top-0 bottom-0 right-0 h-full w-1 bg-black" style={{ right: `${percentilePosition}%` }} ></div> <div className="absolute top-full mt-1 transform -translate-x-1/2 text-xs font-medium" style={{ right: `${percentilePosition}%` }} > אתה כאן </div> </div> <div className="flex justify-between text-xs text-gray-500 mt-4"> <span>דמי ניהול גבוהים</span> <span>דמי ניהול נמוכים</span> </div> <div className="mt-4 text-sm text-center text-gray-600"> דמי הניהול שלך {percentilePosition < 50 ? "נמוכים" : "גבוהים"} מ- {percentilePosition < 50 ? percentileFormatted : (100 - Number.parseFloat(percentileFormatted)).toFixed(2)}% מהמשתמשים באתר בגילך, בהתבסס על נתונים שדווחו </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/provident-comparison.tsx" isFixed="true" isQuickEdit="true" // Refactored from: components/pension-form/comparison-results.tsx // Provident fund comparison content component import { Card, CardContent } from "@/components/ui/card" import { InfoTooltip } from "../info-tooltip" import { Percent, AlertCircle } from "lucide-react" import type { FormData } from "../pension-form-modal" import { getCompanyName } from "./utils" import { ProvidentComparisonCharts } from "./provident-comparison-charts" import { ProvidentMarketComparison } from "./provident-market-comparison" interface ProvidentComparisonContentProps { formData: FormData } export function ProvidentComparisonContent({ formData }: ProvidentComparisonContentProps) { return ( <div dir="rtl" className="space-y-4 text-right"> <div className="bg-blue-50 p-4 rounded-lg border border-blue-100"> <h3 className="font-medium text-blue-800 mb-2 flex items-center"> <AlertCircle className="h-5 w-5 ml-2" /> קופת גמל -{" "} {formData.providentCompany === "none" ? "אין לך קופת גמל" : getCompanyName(formData.providentCompany)} </h3> <p className="text-sm text-blue-700">הנתונים מוצגים לצורך השוואה בלבד ומבוססים על דיווחי משתמשים באתר.</p> </div> <Card> <CardContent className="p-4"> <div className="flex items-center justify-between mb-2"> <div className="flex items-center"> <Percent className="h-5 w-5 text-gray-600 ml-2" /> <span className="font-medium">דמי ניהול מהצבירה</span> </div> <InfoTooltip content="דמי הניהול השנתיים שאתה משלם מסך הכסף שנצבר בקופת הגמל" /> </div> <div className="flex items-center justify-between"> <span className="text-gray-500">כיום:</span> <span className="font-bold">{formData.providentFeeAccumulated}%</span> </div> <div className="flex items-center justify-between"> <span className="text-gray-500">ממוצע משתמשים באתר:</span> <span className="font-medium">0.65%</span> </div> </CardContent> </Card> {/ Market Comparison /} <ProvidentMarketComparison formData={formData} /> {/ Visual Comparison Charts /} <h3 className="font-semibold text-lg mt-6 mb-3">השוואה למשתמשים באתר</h3> <ProvidentComparisonCharts formData={formData} /> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/provident-market-comparison.tsx" // Market comparison component for provident funds import { Card, CardContent } from "@/components/ui/card" import { InfoTooltip } from "../info-tooltip" import type { FormData } from "../pension-form-modal" import { calculatePercentile } from "./utils" interface ProvidentMarketComparisonProps { formData: FormData } export function ProvidentMarketComparison({ formData }: ProvidentMarketComparisonProps) { const percentilePosition = calculatePercentile(formData.providentFeeAccumulated, 0.15, 1.2) const percentileFormatted = (100 - percentilePosition).toFixed(2) return ( <Card> <CardContent className="p-4"> <div className="flex items-center justify-between mb-4"> <h3 className="font-medium">השוואה למשתמשים באתר - דמי ניהול מהצבירה</h3> <InfoTooltip content="השוואה בין דמי הניהול שלך לממוצע משתמשים באתר, בהתבסס על נתונים שדווחו על ידי משתמשים" /> </div> <div className="relative h-8 bg-gray-100 rounded-full overflow-hidden mb-2"> <div className="absolute top-0 bottom-0 right-0 bg-gradient-to-l from-red-500 via-yellow-500 to-green-500" style={{ width: "100%" }} ></div> <div className="absolute top-0 bottom-0 right-0 h-full w-1 bg-black" style={{ right: `${percentilePosition}%` }} ></div> <div className="absolute top-full mt-1 transform -translate-x-1/2 text-xs font-medium" style={{ right: `${percentilePosition}%` }} > אתה כאן </div> </div> <div className="flex justify-between text-xs text-gray-500 mt-4"> <span>דמי ניהול גבוהים</span> <span>דמי ניהול נמוכים</span> </div> <div className="mt-4 text-sm text-center text-gray-600"> דמי הניהול שלך {percentilePosition < 50 ? "נמוכים" : "גבוהים"} מ- {percentilePosition < 50 ? percentileFormatted : (100 - Number.parseFloat(percentileFormatted)).toFixed(2)}% מהמשתמשים באתר בגילך, בהתבסס על נתונים שדווחו </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/study-comparison.tsx" isFixed="true" isQuickEdit="true" // Refactored from: components/pension-form/comparison-results.tsx // Study fund comparison content component import { Card, CardContent } from "@/components/ui/card" import { InfoTooltip } from "../info-tooltip" import { Percent, AlertCircle } from "lucide-react" import type { FormData } from "../pension-form-modal" import { getCompanyName } from "./utils" import { StudyComparisonCharts } from "./study-comparison-charts" import { StudyMarketComparison } from "./study-market-comparison" interface StudyComparisonContentProps { formData: FormData } export function StudyComparisonContent({ formData }: StudyComparisonContentProps) { return ( <div dir="rtl" className="space-y-4 text-right"> <div className="bg-blue-50 p-4 rounded-lg border border-blue-100"> <h3 className="font-medium text-blue-800 mb-2 flex items-center"> <AlertCircle className="h-5 w-5 ml-2" /> קרן השתלמות -{" "} {formData.studyCompany === "none" ? "אין לך קרן השתלמות" : getCompanyName(formData.studyCompany)} </h3> <p className="text-sm text-blue-700">הנתונים מוצגים לצורך השוואה בלבד ומבוססים על דיווחי משתמשים באתר.</p> </div> <Card> <CardContent className="p-4"> <div className="flex items-center justify-between mb-2"> <div className="flex items-center"> <Percent className="h-5 w-5 text-gray-600 ml-2" /> <span className="font-medium">דמי ניהול מהצבירה</span> </div> <InfoTooltip content="דמי הניהול השנתיים שאתה משלם מסך הכסף שנצבר בקרן ההשתלמות" /> </div> <div className="flex items-center justify-between"> <span className="text-gray-500">כיום:</span> <span className="font-bold">{formData.studyFeeAccumulated}%</span> </div> <div className="flex items-center justify-between"> <span className="text-gray-500">ממוצע משתמשים באתר:</span> <span className="font-medium">0.55%</span> </div> </CardContent> </Card> {/ Market Comparison /} <StudyMarketComparison formData={formData} /> {/ Visual Comparison Charts /} <h3 className="font-semibold text-lg mt-6 mb-3">השוואה למשתמשים באתר</h3> <StudyComparisonCharts formData={formData} /> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/study-market-comparison.tsx" // Market comparison component for study funds import { Card, CardContent } from "@/components/ui/card" import { InfoTooltip } from "../info-tooltip" import type { FormData } from "../pension-form-modal" import { calculatePercentile } from "./utils" interface StudyMarketComparisonProps { formData: FormData } export function StudyMarketComparison({ formData }: StudyMarketComparisonProps) { const percentilePosition = calculatePercentile(formData.studyFeeAccumulated, 0.1, 1.0) const percentileFormatted = (100 - percentilePosition).toFixed(2) return ( <Card> <CardContent className="p-4"> <div className="flex items-center justify-between mb-4"> <h3 className="font-medium">השוואה למשתמשים באתר - דמי ניהול מהצבירה</h3> <InfoTooltip content="השוואה בין דמי הניהול שלך לממוצע משתמשים באתר, בהתבסס על נתונים שדווחו על ידי משתמשים" /> </div> <div className="relative h-8 bg-gray-100 rounded-full overflow-hidden mb-2"> <div className="absolute top-0 bottom-0 right-0 bg-gradient-to-l from-red-500 via-yellow-500 to-green-500" style={{ width: "100%" }} ></div> <div className="absolute top-0 bottom-0 right-0 h-full w-1 bg-black" style={{ right: `${percentilePosition}%` }} ></div> <div className="absolute top-full mt-1 transform -translate-x-1/2 text-xs font-medium" style={{ right: `${percentilePosition}%` }} > אתה כאן </div> </div> <div className="flex justify-between text-xs text-gray-500 mt-4"> <span>דמי ניהול גבוהים</span> <span>דמי ניהול נמוכים</span> </div> <div className="mt-4 text-sm text-center text-gray-600"> דמי הניהול שלך {percentilePosition < 50 ? "נמוכים" : "גבוהים"} מ- {percentilePosition < 50 ? percentileFormatted : (100 - Number.parseFloat(percentileFormatted)).toFixed(2)}% מהמשתמשים באתר בגילך, בהתבסס על נתונים שדווחו </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/pension-form/pension-form-modal/step-navigation.tsx" // Step navigation and progress components for pension form modal import { Progress } from "@/components/ui/progress" interface StepNavigationProps { currentStep: number totalSteps: number stepName: string progress: number } export function StepNavigation({ currentStep, totalSteps, stepName, progress }: StepNavigationProps) { return ( <div className="bg-blue-50 px-6 py-4 sticky top-0 z-10 border-b"> <div className="flex justify-between text-sm mb-1"> <span className="font-medium"> {stepName} ({currentStep} מתוך {totalSteps}) </span> <span className="text-blue-600 font-medium">{Math.round(progress)}%</span> </div> <Progress value={progress} className="h-2" /> <div className="flex justify-center gap-2 mt-2"> {Array.from({ length: totalSteps }).map((_, index) => ( <div key={index} className={`h-2 w-2 rounded-full ${index + 1 === currentStep ? "bg-blue-600" : "bg-gray-300"}`} /> ))} </div> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/pension-form-modal/step-utils.tsx" // Utility functions for step management in pension form modal import type { FormData } from "../pension-form-modal" export function calculateTotalSteps(formData: FormData): number { // Base steps: Product Selection + Employment Info + Personal Details + Comparison + Registration let totalSteps = 5 // Add steps for each selected product if (formData.selectedProducts.includes("pension")) totalSteps++ if (formData.selectedProducts.includes("provident")) totalSteps++ if (formData.selectedProducts.includes("study")) totalSteps++ return totalSteps } export function getStepName(currentStep: number, formData: FormData): string { // First step is always product selection if (currentStep === 1) { return "בחירת מוצרים" } // Calculate which step we're on based on selected products let stepCounter = 2 // Start after product selection // Pension step if (formData.selectedProducts.includes("pension")) { if (currentStep === stepCounter) { return "פרטי קרן פנסיה" } stepCounter++ } // Provident fund step if (formData.selectedProducts.includes("provident")) { if (currentStep === stepCounter) { return "פרטי קופת גמל" } stepCounter++ } // Study fund step if (formData.selectedProducts.includes("study")) { if (currentStep === stepCounter) { return "פרטי קרן השתלמות" } stepCounter++ } // Employment info step (new) if (currentStep === stepCounter) { return "פרטי תעסוקה והכנסה" } stepCounter++ // Comparison results step if (currentStep === stepCounter) { return "ניתוח והשוואה" } stepCounter++ // Personal details step if (currentStep === stepCounter) { return "פרטים אישיים" } stepCounter++ // Final registration step if (currentStep === stepCounter) { return "כמעט סיימנו!" } return "" } [V0_FILE]typescriptreact:file="components/agent-dashboard/offers-content/offers-table.tsx" "use client" // Offers table component for agent dashboard import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Edit, Trash2, Eye } from "lucide-react" interface OffersTableProps { offers: any[] type: string handleViewOffer: (type: string, offerId: string) => void handleEditOffer: (type: string, offerId: string) => void handleDeleteOffer: (type: string, offerId: string) => void formatDate: (date: string) => string } export function OffersTable({ offers, type, handleViewOffer, handleEditOffer, handleDeleteOffer, formatDate, }: OffersTableProps) { return ( <div className="overflow-x-auto"> <table className="w-full text-right"> <thead> <tr className="border-b"> <th className="py-3 px-4 font-medium">כותרת</th> <th className="py-3 px-4 font-medium">קהל יעד</th> <th className="py-3 px-4 font-medium">דמי ניהול מצבירה</th> <th className="py-3 px-4 font-medium">דמי ניהול מהפקדה</th> <th className="py-3 px-4 font-medium">חברה מנהלת</th> <th className="py-3 px-4 font-medium">צפיות</th> <th className="py-3 px-4 font-medium">יצירות קשר</th> <th className="py-3 px-4 font-medium">תוקף עד</th> <th className="py-3 px-4 font-medium">סטטוס</th> <th className="py-3 px-4 font-medium">פעולות</th> </tr> </thead> <tbody> {offers.map((offer) => ( <tr key={offer.id} className="border-b hover:bg-gray-50"> <td className="py-3 px-4 font-medium">{offer.title}</td> <td className="py-3 px-4">{offer.audience}</td> <td className="py-3 px-4">{offer.managementFeeAccumulation}%</td> <td className="py-3 px-4">{offer.managementFeeDeposit}%</td> <td className="py-3 px-4">{offer.managingCompany}</td> <td className="py-3 px-4">{offer.views}</td> <td className="py-3 px-4">{offer.contacts}</td> <td className="py-3 px-4">{formatDate(offer.endDate)}</td> <td className="py-3 px-4"> <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{offer.status}</Badge> </td> <td className="py-3 px-4"> <div className="flex gap-2"> <Button variant="ghost" size="icon" onClick={() => handleViewOffer(type, offer.id)} title="צפה בפרטי ההצעה" > <Eye className="h-4 w-4 text-blue-600" /> </Button> <Button variant="ghost" size="icon" onClick={() => handleEditOffer(type, offer.id)}> <Edit className="h-4 w-4" /> </Button> <Button variant="ghost" size="icon" onClick={() => handleDeleteOffer(type, offer.id)}> <Trash2 className="h-4 w-4 text-red-500" /> </Button> </div> </td> </tr> ))} </tbody> </table> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/offers-content.tsx" isFixed="true" isQuickEdit="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" import OfferNotification from "@/components/agent-dashboard/offer-notification" import { OffersTable } from "./offers-content/offers-table" import { OffersTabs } from "./offers-content/offers-tabs" interface OffersContentProps { expiringOffers: any[] setIsNewOfferModalOpen: (open: boolean) => void activeOfferType: string setActiveOfferType: (type: string) => void offersData: any handleViewOffer: (type: string, offerId: string) => void handleEditOffer: (type: string, offerId: string) => void handleDeleteOffer: (type: string, offerId: string) => void formatDate: (date: string) => string renderOfferPerformanceChart: (offerType: string) => JSX.Element } export default function OffersContent({ expiringOffers, setIsNewOfferModalOpen, activeOfferType, setActiveOfferType, offersData, handleViewOffer, handleEditOffer, handleDeleteOffer, formatDate, renderOfferPerformanceChart, }: OffersContentProps) { return ( <div className="space-y-6"> {/ Expiring Offers Notification /} {expiringOffers.length > 0 && <OfferNotification expiringOffers={expiringOffers} />} {/ Action buttons /} <div className="flex justify-between items-center"> <Button className="flex items-center gap-2" onClick={() => setIsNewOfferModalOpen(true)}> <Plus className="h-4 w-4 ml-2" /> <span>הצעה חדשה</span> </Button> </div> {/ Offers Tabs - Improved RTL design /} <div className="bg-white rounded-lg border shadow-sm"> <OffersTabs activeOfferType={activeOfferType} setActiveOfferType={setActiveOfferType} /> <div className="p-4"> {activeOfferType === "pension" && ( <div className="space-y-6"> <OffersTable offers={offersData.pension} type="pension" handleViewOffer={handleViewOffer} handleEditOffer={handleEditOffer} handleDeleteOffer={handleDeleteOffer} formatDate={formatDate} /> </div> )} {activeOfferType === "provident" && ( <div className="space-y-6"> <OffersTable offers={offersData.provident} type="provident" handleViewOffer={handleViewOffer} handleEditOffer={handleEditOffer} handleDeleteOffer={handleDeleteOffer} formatDate={formatDate} /> </div> )} {activeOfferType === "investment" && ( <div className="space-y-6"> <OffersTable offers={offersData.investment} type="investment" handleViewOffer={handleViewOffer} handleEditOffer={handleEditOffer} handleDeleteOffer={handleDeleteOffer} formatDate={formatDate} /> </div> )} </div> </div> {/ Offers Performance Chart /} <Card> <CardHeader> <CardTitle>ביצועי הצעות</CardTitle> <CardDescription>השוואת צפיות ויצירות קשר בין הצעות שלך</CardDescription> </CardHeader> <CardContent>{renderOfferPerformanceChart(activeOfferType)}</CardContent> </Card> </div> ) } [V0_FILE]markdown:file="docs/Data_Objects.md" # Data Objects Documentation This document provides an overview of all main data entities in the pension platform system. Each collection in Firestore represents a specific type of data with defined fields and purposes. ## User Collections ### Clients Purpose: Stores information about individual users seeking pension/financial services. Key Fields: - `id` (string): Client UUID - matches Firebase Auth UID - `fullName` (string): Client's full name - `email` (string): Email address (unique) - `phone` (string): Phone number - `birthDate` (timestamp): Date of birth - `gender` (string): Gender selection - `selectedProducts` (object): Map of selected product types - `pension` (string|null): UUID reference to client-pension document - `providentFund` (string|null): UUID reference to client-provident-fund document - `studyFund` (string|null): UUID reference to client-study-fund document - `employmentDetails` (object): Employment information - `status` (string): Employment status - `sector` (string): Work sector - `occupation` (string): Job title/occupation - `incomeRange` (string): Monthly income range - `allowMarketing` (boolean): Marketing consent - `createdAt` (timestamp): Account creation date - `lastLogin` (timestamp): Last login timestamp Important Notes: - Document ID matches Firebase Auth UID for easy user identification - selectedProducts acts as a junction to link clients with their product details - Employment details are used for offer matching and targeting ### Agents Purpose: Stores information about licensed pension/financial advisors who create offers. Key Fields: - `id` (string): Agent UUID - `fullName` (string): Agent's full name - `email` (string): Email address (unique) - `phone` (string): Phone number - `identificationNumber` (number): National ID number - `licenseNumber` (string): Professional license number - `licenseType` (string): Type of license held - `licenseIssuedAt` (timestamp): License issue date - `licenseDocumentUrl` (string): URL to uploaded license document - `agencyName` (string): Name of agency/company - `serviceArea` (string): Geographic service area - `yearsExperience` (number): Years of professional experience - `clientNumber` (string): Internal client reference number - `languages` (array): Languages spoken - `services` (array): Product types offered (pension, providentFund, studyFund) - `status` (string): Approval status (pending, approved, rejected) - `rating` (number): Average rating from client reviews - `reviewsCount` (number): Total number of reviews received - `allowMarketing` (boolean): Marketing consent - `createdAt` (timestamp): Registration date - `lastLogin` (timestamp): Last login timestamp Important Notes: - All agents must be manually approved by admins before accessing full features - License documents are stored externally with URL references - Rating and review counts are calculated from agent-reviews collection ### Admins Purpose: Platform administrators who manage users, content, and disputes. Key Fields: - `id` (string): Admin UUID - `fullName` (string): Administrator's full name - `email` (string): Email address (unique) - `role` (string): Admin role (superadmin, moderator) - `createdAt` (timestamp): Account creation date - `lastLogin` (timestamp): Last login timestamp Important Notes: - Superadmins have full system access - Moderators have limited permissions for content review ## Product Detail Collections ### Client-Pension Purpose: Stores client's current pension details and preferences. Key Fields: - `clientId` (string): Reference to client UUID - `currentCompany` (string): Current pension provider - `balanceRange` (string): Current balance range - `feeAccumulated` (number): Current management fee on accumulated funds (%) - `feeDeposit` (number): Current management fee on deposits (%) - `investmentTrack` (string): Current investment track/strategy - `updatedAt` (timestamp): Last update timestamp ### Client-Provident-Fund Purpose: Stores client's current provident fund details. Key Fields: - `clientId` (string): Reference to client UUID - `currentCompany` (string): Current provident fund provider - `balanceRange` (string): Current balance range - `feeAccumulated` (number): Current management fee on accumulated funds (%) - `feeDeposit` (number): Current management fee on deposits (%) - `investmentTrack` (string): Current investment track/strategy - `updatedAt` (timestamp): Last update timestamp ### Client-Study-Fund Purpose: Stores client's current study fund details. Key Fields: - `clientId` (string): Reference to client UUID - `currentCompany` (string): Current study fund provider - `balanceRange` (string): Current balance range - `feeAccumulated` (number): Current management fee on accumulated funds (%) - `feeDeposit` (number): Current management fee on deposits (%) - `investmentTrack` (string): Current investment track/strategy - `updatedAt` (timestamp): Last update timestamp Important Notes for Product Collections: - All three collections have identical structure but separate data - Document IDs are UUIDs, not client IDs (one-to-many relationship possible) - Fees are stored as decimal percentages (e.g., 0.5 for 0.5%) ## Offer Collections ### Agent-Offers-Pension Purpose: Pension offers created by agents. Key Fields: - `id` (string): Offer UUID - `agentId` (string): Reference to agent who created the offer - `title` (string): Offer title/name - `managingCompany` (string): Company that will manage the pension - `feeAccumulated` (number): Management fee on accumulated funds (%) - `feeDeposit` (number): Management fee on deposits (%) - `targetAgeRange` (array): Target age ranges for this offer - `targetOccupation` (array): Target occupations - `minBalance` (string): Minimum balance requirement - `expirationDate` (timestamp): When offer expires - `viewCount` (number): Number of times offer was viewed - `clickCount` (number): Number of times offer was clicked - `selectCount` (number): Number of times offer was selected - `createdAt` (timestamp): Offer creation date - `updatedAt` (timestamp): Last modification date ### Agent-Offers-Provident-Fund Purpose: Provident fund offers created by agents. Key Fields: Same structure as Agent-Offers-Pension ### Agent-Offers-Study-Fund Purpose: Study fund offers created by agents. Key Fields: Same structure as Agent-Offers-Pension Important Notes for Offer Collections: - Three separate collections for different product types but identical structure - Targeting criteria help match offers to appropriate clients - Analytics fields (viewCount, clickCount, selectCount) track offer performance ## Interaction Collections ### Client-Selected-Offers Purpose: Tracks which offers clients have selected for each product type. Key Fields: - `clientId` (string): Reference to client UUID (document ID) - `pension` (object|null): Selected pension offer details - `id` (string): Offer ID - `contactMethod` (array): Preferred contact methods (phone, email) - `expirationTimestamp` (timestamp): When selection expires - `providentFund` (object|null): Selected provident fund offer details - `studyFund` (object|null): Selected study fund offer details - `updatedAt` (timestamp): Last update timestamp Important Notes: - Document ID is the client ID (one document per client) - Each product type can have one active selection - Selections expire automatically after a set period ### Agent-Offer-Matches Purpose: Tracks leads/matches between clients and agents when offers are selected. Key Fields: - `id` (string): Match UUID - `clientId` (string): Reference to client - `agentId` (string): Reference to agent - `offerId` (string): Reference to specific offer - `productType` (string): Product type (pension, providentFund, studyFund) - `contactMethod` (array): Client's preferred contact methods - `status` (string): Match status (new, contacted, in_progress, completed, not_relevant, canceled) - `createdAt` (timestamp): Match creation date - `updatedAt` (timestamp): Last status update Important Notes: - Created automatically when client selects an offer - Status progression tracks the lead through to completion - Used for agent lead management and analytics ### Agent-Reviews Purpose: Client reviews and ratings for agents. Key Fields: - `id` (string): Review UUID - `agentId` (string): Reference to reviewed agent - `clientId` (string): Reference to reviewing client - `rating` (number): Star rating (1-5) - `text` (string): Review text/comments - `createdAt` (timestamp): Review submission date - `adminApproved` (boolean): Whether admin has approved the review Important Notes: - Reviews require admin approval before being publicly visible - Used to calculate agent rating and review count - One review per client-agent pair (enforced by business logic) ## Communication Collections ### Client-Messages Purpose: Messages/notifications sent to clients. Key Fields: - `id` (string): Message UUID - `clientId` (string): Reference to recipient client - `sender` (string): Message sender type (system, agent, admin) - `senderId` (string): ID of specific sender - `message` (string): Message content - `timestamp` (timestamp): Message sent time - `type` (string): Message type (notification, info) ### Agent-Messages Purpose: Messages/notifications sent to agents. Key Fields: Same structure as Client-Messages but for agents - `agentId` (string): Reference to recipient agent ### Platform-Notifications Purpose: System-wide notifications for multiple user types. Key Fields: - `id` (string): Notification UUID - `targetAudience` (array): Target user types (clients, agents, admins) - `message` (string): Notification content - `timestamp` (timestamp): Notification creation time - `critical` (boolean): Whether notification is critical/urgent Important Notes for Communication Collections: - No real-time chat system implemented - Messages are one-way notifications - Platform notifications can target multiple user types simultaneously ## Dispute Collections ### Client-Disputes Purpose: Tracks client complaints and disputes about offers or agents. Key Fields: - `id` (string): Dispute UUID - `clientId` (string): Reference to client filing dispute - `offerId` (string): Reference to disputed offer - `agentId` (string): Reference to agent involved - `status` (string): Dispute status (new, in_review, resolved) - `subject` (string): Dispute category/subject - `description` (string): Detailed description of the issue - `openedAt` (timestamp): Dispute creation date - `closedAt` (timestamp|null): Dispute resolution date Important Notes: - Disputes link clients, agents, and specific offers - Admin intervention required for resolution - Status tracking enables dispute management workflow ## Data Validation Rules ### Field Constraints - Email fields: Must be unique across user types - Phone numbers: Must follow valid format - Fees: Must be between 0 and 10 (representing 0% to 10%) - Ratings: Must be between 1 and 5 - UUIDs: All ID fields use UUID format for uniqueness ### Business Rules - Clients can only select one offer per product type at a time - Agents must be approved before creating offers - Reviews require admin approval before public visibility - Offer selections expire after 7 days by default - Agent offers expire after 30 days by default ### Index Requirements - Client email, agent email (unique indexes) - Agent status (for filtering pending approvals) - Offer agentId (for agent dashboard queries) - Match clientId and agentId (for lead management) - Review agentId (for agent profile queries) - Message clientId/agentId (for user message queries) [V0_FILE]markdown:file="docs/Data_Relationships.md" # Data Relationships Documentation This document explains how different data entities in the pension platform connect and interact with each other. Understanding these relationships is crucial for implementing backend operations and maintaining data integrity. ## Core Entity Relationships ### User Relationships #### Client → Product Details (One-to-Many) - Connection: A Client can have multiple product detail records - Implementation: - Client document contains `selectedProducts` object with UUIDs - Each UUID references a document in client-pension, client-provident-fund, or client-study-fund - Multiple product detail records can exist per client (historical data) - Example: Client "123" has selectedProducts.pension = "pension-uuid-456" which points to a document in client-pension collection #### Agent → Offers (One-to-Many) - Connection: An Agent can create multiple offers across different product types - Implementation: - Each offer document contains `agentId` field referencing the agent - Offers are distributed across three collections by product type - All offer collections have identical structure - Query Pattern: Find all offers by agent across all product types - Example: Agent "agent-789" has offers in agent-offers-pension, agent-offers-provident-fund, and agent-offers-study-fund ### Selection and Matching Relationships #### Client → Selected Offers (One-to-One per Product) - Connection: Each client can have one active selection per product type - Implementation: - client-selected-offers uses clientId as document ID - Contains nested objects for pension, providentFund, studyFund - Each selection includes offer ID, contact preferences, and expiration - Business Rule: Only one active selection per product type - Example: Client "123" document in client-selected-offers contains pension.id = "offer-456" #### Offer Selection → Agent Match (One-to-One) - Connection: When a client selects an offer, it creates a lead for the agent - Implementation: - Selecting an offer triggers creation of agent-offer-match document - Match contains clientId, agentId, offerId, and status tracking - Status progresses from "new" → "contacted" → "in_progress" → "completed" - Workflow: Selection creates both client-selected-offers entry and agent-offer-match entry - Example: Client selects offer "offer-456" → creates match "match-789" linking client, agent, and offer ### Communication Relationships #### Agent ↔ Client Communication (Indirect) - Connection: No direct messaging system; communication tracked through matches and messages - Implementation: - agent-offer-matches track interaction status - client-messages and agent-messages store notifications - Messages reference sender and recipient but no conversation threading - Pattern: System sends notifications about match status changes - Example: When agent contacts client, match status updates and client receives notification #### Reviews (Client → Agent) - Connection: Clients can review agents after completed interactions - Implementation: - agent-reviews links clientId and agentId - Reviews require admin approval (adminApproved field) - Agent rating calculated from approved reviews - Business Rule: One review per client-agent pair - Example: After completed match, client "123" reviews agent "agent-789" ### Administrative Relationships #### Admin → Content Moderation (One-to-Many) - Connection: Admins moderate various content types - Implementation: - Agents require admin approval (status field) - Reviews require admin approval (adminApproved field) - Disputes handled by admins (status tracking) - Workflow: Admins review and approve/reject content across multiple collections - Example: Admin approves agent registration, reviews, and resolves disputes #### Disputes (Client → Agent + Offer) - Connection: Disputes link clients, agents, and specific offers - Implementation: - client-disputes contains clientId, agentId, and offerId - Provides complete context for dispute resolution - Status tracking enables admin workflow - Pattern: Disputes reference the complete interaction context - Example: Client disputes offer "offer-456" from agent "agent-789" ## Data Flow Patterns ### Offer Discovery and Selection Flow 1. Offer Creation: Agent creates offer → stored in agent-offers-{type} 2. Offer Display: Client searches → system queries offers by criteria 3. Offer Selection: Client selects → creates client-selected-offers + agent-offer-match 4. Lead Generation: Agent sees new match in leads dashboard 5. Status Tracking: Match status updates as interaction progresses ### Review and Rating Flow 1. Interaction Completion: Agent-offer-match status = "completed" 2. Review Submission: Client submits review → agent-reviews (adminApproved=false) 3. Admin Review: Admin approves → adminApproved=true 4. Rating Update: Agent rating recalculated from approved reviews 5. Display: Approved reviews visible in agent profile ### Dispute Resolution Flow 1. Dispute Creation: Client files dispute → client-disputes (status="new") 2. Admin Assignment: Admin reviews dispute details 3. Investigation: Admin examines linked client, agent, and offer data 4. Resolution: Admin updates dispute status and adds response 5. Notification: Client receives resolution notification ## Query Patterns and Indexes ### Common Query Patterns #### Agent Dashboard Queries \`\`\` // Get agent's offers across all product types - Query agent-offers-pension WHERE agentId = {agentId} - Query agent-offers-provident-fund WHERE agentId = {agentId} - Query agent-offers-study-fund WHERE agentId = {agentId} // Get agent's leads/matches - Query agent-offer-matches WHERE agentId = {agentId} // Get agent's reviews - Query agent-reviews WHERE agentId = {agentId} AND adminApproved = true \`\`\` #### Client Dashboard Queries \`\`\` // Get client's product details - Query client-pension WHERE clientId = {clientId} - Query client-provident-fund WHERE clientId = {clientId} - Query client-study-fund WHERE clientId = {clientId} // Get client's selected offers - Get client-selected-offers/{clientId} // Get client's messages - Query client-messages WHERE clientId = {clientId} ORDER BY timestamp DESC \`\`\` #### Admin Dashboard Queries \`\`\` // Pending agent approvals - Query agents WHERE status = "pending" // Pending review approvals - Query agent-reviews WHERE adminApproved = false // Active disputes - Query client-disputes WHERE status IN ["new", "in_review"] \`\`\` ### Required Indexes #### Performance Indexes - `agents.status` - For filtering pending approvals - `agent-offers-.agentId` - For agent dashboard offer queries - `agent-offer-matches.agentId` - For agent lead queries - `agent-offer-matches.clientId` - For client interaction history - `agent-reviews.agentId + adminApproved` - For agent profile reviews - `client-messages.clientId + timestamp` - For client message history - `agent-messages.agentId + timestamp` - For agent message history #### Unique Constraints - `clients.email` - Prevent duplicate client emails - `agents.email` - Prevent duplicate agent emails - `agents.licenseNumber` - Prevent duplicate license numbers ## Data Integrity Rules ### Referential Integrity - Soft References: All ID references are strings (UUIDs) without foreign key constraints - Orphan Prevention: Business logic must handle cascading deletes - Validation: Application layer validates reference existence ### Business Logic Constraints - One Selection Per Product: Client can only have one active offer selection per product type - Agent Approval Required: Only approved agents can create offers - Review Approval Required: Only approved reviews count toward agent rating - Offer Expiration: Selected offers expire after 7 days, agent offers after 30 days ### Consistency Requirements - Agent Rating Sync: Agent.rating must match calculated average from approved reviews - Match Status Progression: Agent-offer-match status must follow logical progression - Selection Expiration: Expired selections should be automatically cleaned up ## Performance Considerations ### Read Optimization - Denormalization: Agent rating stored in agent document for quick access - Batch Queries: Multiple offer collections require parallel queries - Pagination: Large result sets (offers, messages) should be paginated ### Write Optimization - Batch Operations: Offer selection creates multiple documents atomically - Event-Driven Updates: Rating recalculation triggered by review approval - Background Jobs: Cleanup of expired selections and offers ### Scaling Considerations - Collection Sharding: Offer collections already sharded by product type - Geographic Distribution: Service area field enables regional scaling - Caching Strategy: Frequently accessed data (agent profiles, offers) should be cached ## Error Handling Patterns ### Common Error Scenarios - Missing References: Referenced agent, client, or offer doesn't exist - Status Conflicts: Invalid status transitions in matches or disputes - Duplicate Operations: Attempting to select already selected offer - Permission Violations: Unapproved agent trying to create offers ### Recovery Strategies - Graceful Degradation: Show partial data when some references are missing - Retry Logic: Temporary failures in multi-document operations - Audit Logging: Track all data modifications for debugging - Rollback Procedures: Undo partial operations when batch writes fail [V0_FILE]markdown:file="docs/User_Flows.md" # User Flows Documentation This document provides step-by-step walkthroughs of key user interactions and system flows, explaining what happens in both the frontend and backend (Firestore operations) for each scenario. ## 1. Client Onboarding Flow ### Overview A new user discovers the platform, goes through the pension sign-up form, provides personal and financial details, and creates an account. ### Step-by-Step Flow #### 1.1 Initial Discovery and Form Access Frontend: - User visits homepage and clicks "שפר לי את התנאים!" (Improve my terms) - PensionFormModal opens with multi-step form Backend: No operations yet #### 1.2 Personal Details Collection Frontend: - User fills personal information (name, email, phone, birth date, gender) - User selects employment details (status, sector, occupation, income range) - User chooses which products they want (pension, provident fund, study fund) Backend: Form validation only, no database writes #### 1.3 Product-Specific Details Frontend: - For each selected product, user provides current provider details: - Current company name - Current balance range - Current management fees (accumulated and deposit) - Current investment track Backend: Form validation and temporary storage in component state #### 1.4 Account Creation and Data Persistence Frontend: - User completes form and submits - Loading state shown during account creation Backend Operations: 1. Create Firebase Auth account: \`\`\` Firebase Auth → Create user with email/password \`\`\` 2. Create client document: \`\`\` Collection: clients Document ID: {Firebase Auth UID} Data: { fullName, email, phone, birthDate, gender, employmentDetails: { status, sector, occupation, incomeRange }, selectedProducts: { pension: null, providentFund: null, studyFund: null }, allowMarketing: boolean, createdAt: timestamp, lastLogin: timestamp } \`\`\` 3. Create product detail documents (for each selected product): \`\`\` Collection: client-pension (if pension selected) Document ID: {generated UUID} Data: { clientId: {client UUID}, currentCompany, balanceRange, feeAccumulated, feeDeposit, investmentTrack, updatedAt: timestamp } Collection: client-provident-fund (if provident fund selected) Collection: client-study-fund (if study fund selected) \`\`\` 4. Update client selectedProducts references: \`\`\` Update clients/{clientId} Set selectedProducts.pension = {pension document UUID} Set selectedProducts.providentFund = {provident fund document UUID} Set selectedProducts.studyFund = {study fund document UUID} \`\`\` #### 1.5 Post-Registration Frontend: - User automatically logged in - Redirected to dashboard - Welcome message displayed Backend: - User session established - Dashboard data queries begin --- ## 2. Client Selecting an Offer Flow ### Overview A client browses available offers on their dashboard, compares options, and selects an offer that interests them. ### Step-by-Step Flow #### 2.1 Offer Discovery Frontend: - Client navigates to "הצעות" (Offers) tab in dashboard - System displays current user rates for comparison - Client can switch between product types (pension, provident fund, study fund) Backend Operations: 1. Fetch user's current rates: \`\`\` Query client-pension WHERE clientId = {clientId} Query client-provident-fund WHERE clientId = {clientId} Query client-study-fund WHERE clientId = {clientId} \`\`\` 2. Fetch available offers: \`\`\` Query agent-offers-pension (for pension tab) Query agent-offers-provident-fund (for provident fund tab) Query agent-offers-study-fund (for study fund tab) Filter by: expirationDate > now, agent.status = "approved" \`\`\` 3. Enhance offers with agent information: \`\`\` For each offer: Query agents WHERE id = offer.agentId Query agent-reviews WHERE agentId = offer.agentId AND adminApproved = true Calculate average rating and review count \`\`\` #### 2.2 Offer Comparison and Selection Frontend: - Client views offer cards with fee comparisons - Potential savings calculated and displayed - Client clicks "בחר הצעה" (Select Offer) button Backend: No operations during browsing #### 2.3 Offer Selection Processing Frontend: - Confirmation dialog appears - Client confirms selection - Loading state during processing Backend Operations: 1. Check for existing selections: \`\`\` Get client-selected-offers/{clientId} Verify no active selection exists for this product type \`\`\` 2. Create/Update selected offers document: \`\`\` Set client-selected-offers/{clientId} Update specific product field: { pension: { id: {offerId}, contactMethod: ["phone", "email"], // client preference expirationTimestamp: now + 7 days }, updatedAt: timestamp } \`\`\` 3. Create agent-offer match (lead): \`\`\` Collection: agent-offer-matches Document ID: {generated UUID} Data: { clientId: {clientId}, agentId: {offer.agentId}, offerId: {offerId}, productType: "pension", // or provident/study contactMethod: ["phone", "email"], status: "new", createdAt: timestamp, updatedAt: timestamp } \`\`\` 4. Update offer analytics: \`\`\` Update agent-offers-{type}/{offerId} Increment selectCount by 1 \`\`\` 5. Send notification to agent: \`\`\` Collection: agent-messages Document ID: {generated UUID} Data: { agentId: {agentId}, sender: "system", senderId: "system", message: "לקוח חדש בחר את ההצעה שלך", timestamp: now, type: "notification" } \`\`\` #### 2.4 Post-Selection UI Update Frontend: - Success message displayed - Offer moves to "הצעות שנבחרו" (Selected Offers) tab - Product type tab shows "נבחר" (Selected) status - Client can no longer select other offers for this product type Backend: No additional operations --- ## 3. Agent Registration & Approval Flow ### Overview A potential agent discovers the platform, fills out the registration form with professional credentials, and waits for admin approval. ### Step-by-Step Flow #### 3.1 Registration Form Access Frontend: - User visits "/join-as-agent" page - Multi-step registration form displayed Backend: No operations #### 3.2 Basic Information Collection Frontend: - Agent provides personal details (name, email, phone, ID number) - Form validation ensures required fields completed Backend: Client-side validation only #### 3.3 License and Credentials Frontend: - Agent uploads license document - Provides license number, type, and issue date - Specifies agency name and service area Backend Operations: 1. File upload (if implemented): \`\`\` Upload license document to storage Get download URL for document \`\`\` #### 3.4 Professional Information Frontend: - Agent selects years of experience - Chooses services offered (pension, provident fund, study fund) - Selects languages spoken - Provides client reference number Backend: Form validation only #### 3.5 Account Creation Frontend: - Agent completes declarations and terms agreement - Submits registration form - Success message displayed Backend Operations: 1. Create Firebase Auth account: \`\`\` Firebase Auth → Create user with email/password \`\`\` 2. Create agent document: \`\`\` Collection: agents Document ID: {Firebase Auth UID} Data: { fullName, email, phone, identificationNumber, licenseNumber, licenseType, licenseIssuedAt, licenseDocumentUrl, agencyName, serviceArea, yearsExperience, clientNumber, languages: [], services: [], status: "pending", // Key field for approval workflow rating: 0, reviewsCount: 0, allowMarketing: boolean, createdAt: timestamp, lastLogin: timestamp } \`\`\` #### 3.6 Admin Review Process Frontend (Admin Dashboard): - Admin navigates to "מרכז אימות" (Verification Center) - Sees list of pending agent registrations - Reviews agent details and uploaded documents Backend Operations: 1. Fetch pending agents: \`\`\` Query agents WHERE status = "pending" Order by createdAt DESC \`\`\` #### 3.7 Approval Decision Frontend (Admin Dashboard): - Admin clicks "אשר" (Approve) or "דחה" (Reject) - Confirmation dialog appears Backend Operations: 1. Update agent status: \`\`\` Update agents/{agentId} Set status = "approved" OR "rejected" Set updatedAt = timestamp \`\`\` 2. Send notification to agent: \`\`\` Collection: agent-messages Document ID: {generated UUID} Data: { agentId: {agentId}, sender: "admin", senderId: {adminId}, message: "הבקשה שלך אושרה!" OR "הבקשה שלך נדחתה", timestamp: now, type: "notification" } \`\`\` #### 3.8 Post-Approval Access Frontend: - Approved agent can now access full dashboard features - Can create offers, view leads, manage profile Backend: - Agent queries now filter by status = "approved" - Agent can perform write operations (create offers) --- ## 4. Agent Creating Offer & Lead Generation Flow ### Overview An approved agent creates a new offer for a specific product type, which becomes available to clients and can generate leads. ### Step-by-Step Flow #### 4.1 Offer Creation Access Frontend: - Agent navigates to "הצעות" (Offers) tab in agent dashboard - Clicks "הצעה חדשה" (New Offer) button - NewOfferModal opens Backend Operations: 1. Verify agent status: \`\`\` Query agents/{agentId} Verify status = "approved" \`\`\` #### 4.2 Offer Details Input Frontend: - Agent fills offer form: - Product type selection (pension/provident/study) - Managing company name - Fee structure (accumulated and deposit fees) - Target audience criteria (age range, occupation) - Minimum balance requirements - Offer expiration date Backend: Form validation only #### 4.3 Offer Submission Frontend: - Agent reviews offer details - Clicks "פרסם הצעה" (Publish Offer) - Loading state during creation Backend Operations: 1. Create offer document: \`\`\` Collection: agent-offers-{productType} // pension/provident-fund/study-fund Document ID: {generated UUID} Data: { agentId: {agentId}, title: {offer title}, managingCompany: {company name}, feeAccumulated: {percentage}, feeDeposit: {percentage}, targetAgeRange: [], targetOccupation: [], minBalance: {amount range}, expirationDate: {future timestamp}, viewCount: 0, clickCount: 0, selectCount: 0, createdAt: timestamp, updatedAt: timestamp } \`\`\` #### 4.4 Offer Visibility Frontend: - Offer appears in agent's offers list - Offer becomes visible to clients in offer browsing Backend: - Offer included in client offer queries - Analytics tracking begins (view/click counts) #### 4.5 Client Discovers and Selects Offer Frontend (Client Side): - Client sees offer in their dashboard offers list - Client selects the offer (see "Client Selecting an Offer Flow") Backend: Operations covered in previous flow #### 4.6 Lead Generation Frontend (Agent Dashboard): - Agent sees new lead in "לידים" (Leads) tab - Lead shows as status "חדש" (New) Backend Operations: 1. Fetch agent leads: \`\`\` Query agent-offer-matches WHERE agentId = {agentId} Order by createdAt DESC \`\`\` 2. Lead details include: - Client contact information (if client approved contact) - Selected offer details - Preferred contact methods - Lead creation timestamp #### 4.7 Agent Lead Management Frontend: - Agent can update lead status (contacted, in progress, completed) - Agent can contact client via preferred method - Agent tracks interaction progress Backend Operations: 1. Update match status: \`\`\` Update agent-offer-matches/{matchId} Set status = "contacted" | "in_progress" | "completed" Set updatedAt = timestamp \`\`\` 2. Send status update notification: \`\`\` Collection: client-messages Document ID: {generated UUID} Data: { clientId: {clientId}, sender: "agent", senderId: {agentId}, message: "הסוכן יצר איתך קשר", timestamp: now, type: "notification" } \`\`\` --- ## 5. Client-Agent Communication & Reviews Flow ### Overview After an agent-client interaction is completed, the client can leave a review for the agent, which requires admin approval before becoming visible. ### Step-by-Step Flow #### 5.1 Interaction Completion Frontend (Agent Dashboard): - Agent marks lead as "הושלם" (Completed) - Interaction considered finished Backend Operations: 1. Update match status: \`\`\` Update agent-offer-matches/{matchId} Set status = "completed" Set updatedAt = timestamp \`\`\` 2. Notify client of completion: \`\`\` Collection: client-messages Document ID: {generated UUID} Data: { clientId: {clientId}, sender: "system", senderId: "system", message: "השירות הושלם - תוכל להשאיר ביקורת", timestamp: now, type: "notification" } \`\`\` #### 5.2 Review Opportunity Frontend (Client Dashboard): - Client receives notification about completed service - Option to leave review appears in messages or profile section Backend: No operations until review submitted #### 5.3 Review Submission Frontend: - Client opens review form - Provides star rating (1-5) - Writes review text - Submits review Backend Operations: 1. Create review document: \`\`\` Collection: agent-reviews Document ID: {generated UUID} Data: { agentId: {agentId}, clientId: {clientId}, rating: {1-5}, text: {review text}, createdAt: timestamp, adminApproved: false // Key field - requires approval } \`\`\` 2. Notify admin of pending review: \`\`\` Collection: platform-notifications Document ID: {generated UUID} Data: { targetAudience: ["admins"], message: "ביקורת חדשה ממתינה לאישור", timestamp: now, critical: false } \`\`\` #### 5.4 Admin Review Process Frontend (Admin Dashboard): - Admin navigates to "ניהול ביקורות" (Review Management) - Sees list of pending reviews (adminApproved = false) - Reviews content for appropriateness Backend Operations: 1. Fetch pending reviews: \`\`\` Query agent-reviews WHERE adminApproved = false Order by createdAt DESC \`\`\` #### 5.5 Review Approval Frontend (Admin Dashboard): - Admin clicks "אשר" (Approve) or "הסתר" (Hide) - Review status updated Backend Operations: 1. Approve review: \`\`\` Update agent-reviews/{reviewId} Set adminApproved = true \`\`\` 2. Recalculate agent rating: \`\`\` Query agent-reviews WHERE agentId = {agentId} AND adminApproved = true Calculate average rating Count total reviews Update agents/{agentId} Set rating = {calculated average} Set reviewsCount = {total count} \`\`\` 3. Notify agent of new review: \`\`\` Collection: agent-messages Document ID: {generated UUID} Data: { agentId: {agentId}, sender: "system", senderId: "system", message: "קיבלת ביקורת חדשה", timestamp: now, type: "notification" } \`\`\` #### 5.6 Review Visibility Frontend: - Approved review appears in agent's profile - Agent rating updated in all offer displays - Review visible to other clients considering this agent Backend: Reviews included in agent profile queries --- ## 6. Dispute Flow ### Overview When a client is unsatisfied with an agent interaction (e.g., agent never contacted them, offer terms weren't honored), they can file a dispute for admin resolution. ### Step-by-Step Flow #### 6.1 Dispute Trigger Frontend (Client Dashboard): - Client navigates to "הצעות שנבחרו" (Selected Offers) - Clicks "פתח מחלוקת" (Open Dispute) button on problematic offer - DisputeModal opens Backend: No operations until dispute submitted #### 6.2 Dispute Details Collection Frontend: - Client selects dispute reason from dropdown: - "הסוכן לא יצר קשר" (Agent didn't contact) - "ההצעה שונה ממה שהובטח" (Offer different than promised) - "שירות לקוי מהסוכן" (Poor service from agent) - "בעיה טכנית במערכת" (Technical system issue) - "בעיה אחרת" (Other issue) - Client provides detailed description (optional) Backend: Form validation only #### 6.3 Dispute Submission Frontend: - Client clicks "שלח מחלוקת" (Submit Dispute) - Success message: "המחלוקת נשלחה לבדיקה" - Modal closes Backend Operations: 1. Create dispute document: \`\`\` Collection: client-disputes Document ID: {generated UUID} Data: { clientId: {clientId}, offerId: {offerId}, agentId: {agentId}, // from selected offer status: "new", subject: {selected reason}, description: {client description}, openedAt: timestamp, closedAt: null } \`\`\` 2. Notify admins: \`\`\` Collection: platform-notifications Document ID: {generated UUID} Data: { targetAudience: ["admins"], message: "מחלוקת חדשה נפתחה", timestamp: now, critical: true } \`\`\` 3. Notify client of submission: \`\`\` Collection: client-messages Document ID: {generated UUID} Data: { clientId: {clientId}, sender: "system", senderId: "system", message: "המחלוקת שלך נשלחה לבדיקה", timestamp: now, type: "notification" } \`\`\` #### 6.4 Admin Dispute Review Frontend (Admin Dashboard): - Admin navigates to "טיפול במחלוקות" (Dispute Management) - Sees list of disputes with status "חדש" (New) - Clicks "טיפול" (Handle) to open dispute details Backend Operations: 1. Fetch active disputes: \`\`\` Query client-disputes WHERE status IN ["new", "in_review"] Order by openedAt DESC \`\`\` 2. Fetch dispute context: \`\`\` Get clients/{clientId} // client details Get agents/{agentId} // agent details Get agent-offers-{type}/{offerId} // offer details Get agent-offer-matches WHERE clientId AND agentId AND offerId // interaction history \`\`\` #### 6.5 Dispute Investigation Frontend (Admin Dashboard): - Admin reviews all context information - Admin can see complete interaction timeline - Admin updates dispute status to "בבדיקה" (In Review) Backend Operations: 1. Update dispute status: \`\`\` Update client-disputes/{disputeId} Set status = "in_review" Set updatedAt = timestamp \`\`\` #### 6.6 Dispute Resolution Frontend (Admin Dashboard): - Admin provides response to client - Admin updates dispute status to "נפתר" (Resolved) - Admin can add internal notes Backend Operations: 1. Update dispute with resolution: \`\`\` Update client-disputes/{disputeId} Set status = "resolved" Set adminResponse = {admin response text} Set closedAt = timestamp \`\`\` 2. Notify client of resolution: \`\`\` Collection: client-messages Document ID: {generated UUID} Data: { clientId: {clientId}, sender: "admin", senderId: {adminId}, message: {admin response}, timestamp: now, type: "notification" } \`\`\` 3. Optionally notify agent (if relevant): \`\`\` Collection: agent-messages Document ID: {generated UUID} Data: { agentId: {agentId}, sender: "admin", senderId: {adminId}, message: "מחלוקת נפתרה - אנא שפר את השירות", timestamp: now, type: "notification" } \`\`\` #### 6.7 Post-Resolution Frontend (Client Dashboard): - Client sees resolution in messages - Dispute appears as "נפתר" (Resolved) in messages section - Client can view admin response Backend: Dispute tracking complete, data available for analytics --- ## Cross-Flow Considerations ### Data Consistency - Atomic Operations: Multi-document updates (like offer selection) should be atomic - Event Ordering: Status updates must follow logical progression - Cleanup Jobs: Expired offers and selections need periodic cleanup ### Error Handling - Partial Failures: Handle cases where some operations succeed and others fail - Retry Logic: Implement retry for transient failures - User Feedback: Provide clear error messages for failed operations ### Performance Optimization - Batch Queries: Fetch related data in batches where possible - Caching: Cache frequently accessed data (agent profiles, offers) - Pagination: Implement pagination for large data sets (offers, messages, leads) ### Security Considerations - Authorization: Verify user permissions for all operations - Data Validation: Validate all input data before database writes - Rate Limiting: Prevent abuse of offer selection and dispute creation [V0_FILE]typescript:file="components/admin-dashboard/agent-verification/types.ts" export interface Agent { agentId: string fullName: string email: string phone: string identificationNumber: number licenseNumber: string licenseType: string licenseIssuedAt: Date licenseDocumentUrl: string agencyName: string serviceArea: string yearsExperience: number clientNumber: string languages: string[] services: string[] status: "pending" | "approved" | "rejected" rating: number reviewsCount: number allowMarketing: boolean createdAt: Date lastLogin: Date licenseVerified?: boolean } export interface VerificationChecklist { licenseVerified: boolean ministryOfFinanceCheck: boolean documentsReviewed: boolean } export interface AgentVerificationState { agents: Agent[] filteredAgents: Agent[] selectedAgent: Agent | null searchTerm: string statusFilter: string dateFilter: string sortField: string sortDirection: "asc" | "desc" showDetailsModal: boolean showEmailModal: boolean emailSubject: string emailMessage: string } export type SortField = "fullName" | "status" | "licenseNumber" | "createdAt" export interface EmailModalProps { agent: Agent | null isOpen: boolean onClose: () => void subject: string message: string onSubjectChange: (subject: string) => void onMessageChange: (message: string) => void onSend: () => void } [V0_FILE]typescriptreact:file="components/admin-dashboard/agent-verification/filters.tsx" "use client" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, X } from "lucide-react" interface FiltersProps { searchTerm: string statusFilter: string dateFilter: string onSearchChange: (value: string) => void onStatusFilterChange: (value: string) => void onDateFilterChange: (value: string) => void onClearFilters: () => void } export function Filters({ searchTerm, statusFilter, dateFilter, onSearchChange, onStatusFilterChange, onDateFilterChange, onClearFilters, }: FiltersProps) { const hasActiveFilters = searchTerm || statusFilter !== "all" || dateFilter !== "all" return ( <div className="space-y-4"> <div className="flex flex-col sm:flex-row gap-4"> <div className="relative flex-1"> <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" /> <Input placeholder="חיפוש לפי שם, אימייל, רישיון או טלפון..." value={searchTerm} onChange={(e) => onSearchChange(e.target.value)} className="pr-10" /> </div> <Select value={statusFilter} onValueChange={onStatusFilterChange}> <SelectTrigger className="w-full sm:w-[180px]"> <SelectValue placeholder="סטטוס" /> </SelectTrigger> <SelectContent> <SelectItem value="all">כל הסטטוסים</SelectItem> <SelectItem value="pending">בבדיקה</SelectItem> <SelectItem value="approved">מאושר</SelectItem> <SelectItem value="rejected">נדחה</SelectItem> </SelectContent> </Select> <Select value={dateFilter} onValueChange={onDateFilterChange}> <SelectTrigger className="w-full sm:w-[180px]"> <SelectValue placeholder="תאריך הרשמה" /> </SelectTrigger> <SelectContent> <SelectItem value="all">כל התאריכים</SelectItem> <SelectItem value="today">היום</SelectItem> <SelectItem value="week">השבוע</SelectItem> <SelectItem value="month">החודש</SelectItem> </SelectContent> </Select> {hasActiveFilters && ( <Button variant="outline" onClick={onClearFilters} className="whitespace-nowrap bg-transparent"> <X className="h-4 w-4 ml-1" /> נקה פילטרים </Button> )} </div> {hasActiveFilters && ( <div className="flex flex-wrap gap-2"> {searchTerm && ( <Badge variant="secondary" className="gap-1"> חיפוש: {searchTerm} <X className="h-3 w-3 cursor-pointer" onClick={() => onSearchChange("")} /> </Badge> )} {statusFilter !== "all" && ( <Badge variant="secondary" className="gap-1"> סטטוס: {statusFilter === "pending" ? "בבדיקה" : statusFilter === "approved" ? "מאושר" : "נדחה"} <X className="h-3 w-3 cursor-pointer" onClick={() => onStatusFilterChange("all")} /> </Badge> )} {dateFilter !== "all" && ( <Badge variant="secondary" className="gap-1"> תאריך: {dateFilter === "today" ? "היום" : dateFilter === "week" ? "השבוע" : "החודש"} <X className="h-3 w-3 cursor-pointer" onClick={() => onDateFilterChange("all")} /> </Badge> )} </div> )} </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/verification-content.tsx" import { AgentVerificationPanel } from "./agent-verification" interface VerificationContentProps { verificationData?: Array<{ name: string phone: string email: string registrationDate: string }> } export function VerificationContent({ verificationData }: VerificationContentProps) { return <AgentVerificationPanel /> } [V0_FILE]typescript:file="components/admin-dashboard/agent-verification/utils.ts" isFixed="true" isQuickEdit="true" import type { Agent, SortField, BadgeProps } from "./types" // Mock data based on firestore schema export const mockAgents: Agent[] = [ { agentId: "agent-001", fullName: "יוסי כהן", email: "yossi.cohen@example.com", phone: "050-1234567", identificationNumber: 123456789, licenseNumber: "LIC-2024-001", licenseType: "סוכן ביטוח", licenseIssuedAt: new Date("2024-01-15"), licenseDocumentUrl: "/documents/license-001.pdf", agencyName: "כהן ביטוח ופנסיה", serviceArea: "תל אביב", yearsExperience: 5, clientNumber: "CLI-001", languages: ["עברית", "אנגלית"], services: ["pension", "providentFund"], status: "pending", rating: 0, reviewsCount: 0, allowMarketing: true, createdAt: new Date("2024-01-10"), lastLogin: new Date("2024-01-20"), licenseVerified: false, }, { agentId: "agent-002", fullName: "שרה לוי", email: "sarah.levy@example.com", phone: "052-9876543", identificationNumber: 987654321, licenseNumber: "LIC-2024-002", licenseType: "יועץ פנסיוני", licenseIssuedAt: new Date("2023-12-20"), licenseDocumentUrl: "/documents/license-002.pdf", agencyName: "לוי פיננסים", serviceArea: "ירושלים", yearsExperience: 8, clientNumber: "CLI-002", languages: ["עברית", "רוסית"], services: ["pension", "studyFund"], status: "approved", rating: 4.5, reviewsCount: 12, allowMarketing: false, createdAt: new Date("2024-01-05"), lastLogin: new Date("2024-01-22"), licenseVerified: true, }, { agentId: "agent-003", fullName: "דוד אברהם", email: "david.abraham@example.com", phone: "054-5555555", identificationNumber: 555666777, licenseNumber: "LIC-2024-003", licenseType: "סוכן ביטוח", licenseIssuedAt: new Date("2024-01-01"), licenseDocumentUrl: "/documents/license-003.pdf", agencyName: "אברהם ושותפים", serviceArea: "חיפה", yearsExperience: 3, clientNumber: "CLI-003", languages: ["עברית"], services: ["providentFund"], status: "rejected", rating: 0, reviewsCount: 0, allowMarketing: true, createdAt: new Date("2024-01-08"), lastLogin: new Date("2024-01-18"), licenseVerified: false, }, ] export function getStatusBadgeVariant(status: Agent["status"]): BadgeProps["variant"] { switch (status) { case "pending": return "secondary" case "approved": return "default" // This will be styled as green case "rejected": return "destructive" default: return "secondary" } } export function getStatusText(status: Agent["status"]): string { switch (status) { case "pending": return "ממתין לאישור" case "approved": return "מאושר" case "rejected": return "נדחה" default: return "לא ידוע" } } export const sortAgents = (agents: Agent[], field: SortField, direction: "asc" | "desc") => { return [...agents].sort((a, b) => { let aValue: any = a[field] let bValue: any = b[field] if (field === "createdAt") { aValue = new Date(aValue).getTime() bValue = new Date(bValue).getTime() } if (typeof aValue === "string") { aValue = aValue.toLowerCase() bValue = bValue.toLowerCase() } if (direction === "asc") { return aValue > bValue ? 1 : -1 } else { return aValue < bValue ? 1 : -1 } }) } export const filterAgents = (agents: Agent[], searchTerm: string, statusFilter: string, dateFilter: string) => { return agents.filter((agent) => { const matchesSearch = !searchTerm || agent.fullName.toLowerCase().includes(searchTerm.toLowerCase()) || agent.email.toLowerCase().includes(searchTerm.toLowerCase()) || agent.licenseNumber.toLowerCase().includes(searchTerm.toLowerCase()) || agent.phone.includes(searchTerm) const matchesStatus = !statusFilter || statusFilter === "all" || agent.status === statusFilter const matchesDate = !dateFilter || dateFilter === "all" || (() => { const agentDate = new Date(agent.createdAt) const now = new Date() const daysDiff = Math.floor((now.getTime() - agentDate.getTime()) / (1000 * 60 * 60 * 24)) switch (dateFilter) { case "today": return daysDiff === 0 case "week": return daysDiff <= 7 case "month": return daysDiff <= 30 default: return true } })() return matchesSearch && matchesStatus && matchesDate }) } export function formatDate(date: string | Date): string { return new Date(date).toLocaleDateString("he-IL") } export function formatPhoneNumber(phone: string): string { // Format Israeli phone numbers const cleaned = phone.replace(/\D/g, "") if (cleaned.length === 10) { return `${cleaned.slice(0, 3)}-${cleaned.slice(3, 6)}-${cleaned.slice(6)}` } return phone } [V0_FILE]typescriptreact:file="components/admin-dashboard/agent-verification/agent-details-modal.tsx" "use client" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import { Label } from "@/components/ui/label" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { FileText, Download } from "lucide-react" import { Button } from "@/components/ui/button" import type { Agent } from "./types" import { getStatusBadgeVariant, getStatusText } from "./utils" interface AgentDetailsModalProps { agent: Agent | null isOpen: boolean onClose: () => void } export function AgentDetailsModal({ agent, isOpen, onClose }: AgentDetailsModalProps) { if (!agent) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto"> <DialogHeader> <DialogTitle className="flex items-center gap-2"> פרטי סוכן - {agent.fullName} <Badge variant={getStatusBadgeVariant(agent.status)} className={agent.status === "approved" ? "bg-green-100 text-green-800 border-green-200" : ""} > {getStatusText(agent.status)} </Badge> </DialogTitle> <DialogDescription>פרטים מלאים של הסוכן</DialogDescription> </DialogHeader> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> {/* Personal Information /} <Card> <CardHeader className="pb-3"> <CardTitle className="text-base">פרטים אישיים</CardTitle> </CardHeader> <CardContent className="space-y-2"> <div> <Label className="text-xs font-medium text-muted-foreground">שם מלא</Label> <div className="text-sm font-medium">{agent.fullName}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">ת.ז.</Label> <div className="text-sm font-mono">{agent.identificationNumber}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">טלפון</Label> <div className="text-sm">{agent.phone}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">אימייל</Label> <div className="text-sm break-all">{agent.email}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">הסכמה לשיווק</Label> <div className="text-sm">{agent.allowMarketing ? "כן" : "לא"}</div> </div> </CardContent> </Card> {/ License Information /} <Card> <CardHeader className="pb-3"> <CardTitle className="text-base">פרטי רישיון</CardTitle> </CardHeader> <CardContent className="space-y-2"> <div> <Label className="text-xs font-medium text-muted-foreground">מספר רישיון</Label> <div className="text-sm font-mono">{agent.licenseNumber}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">סוג רישיון</Label> <div className="text-sm">{agent.licenseType}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">תאריך הנפקה</Label> <div className="text-sm">{new Date(agent.licenseIssuedAt).toLocaleDateString("he-IL")}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">מסמך רישיון</Label> <Button variant="outline" size="sm" className="h-7 text-xs bg-transparent"> <FileText className="h-3 w-3 ml-1" /> צפייה <Download className="h-3 w-3 mr-1" /> </Button> </div> </CardContent> </Card> {/ Professional Information /} <Card> <CardHeader className="pb-3"> <CardTitle className="text-base">פרטים מקצועיים</CardTitle> </CardHeader> <CardContent className="space-y-2"> <div> <Label className="text-xs font-medium text-muted-foreground">שם סוכנות</Label> <div className="text-sm">{agent.agencyName}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">אזור שירות</Label> <div className="text-sm">{agent.serviceArea}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">שנות ניסיון</Label> <div className="text-sm">{agent.yearsExperience} שנים</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">קוד זיהוי</Label> <div className="text-sm font-mono">{agent.clientNumber}</div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">גודל תיק לקוחות</Label> <div className="text-sm">{agent.clientNumber} לקוחות</div> </div> </CardContent> </Card> {/ Additional Information /} <Card> <CardHeader className="pb-3"> <CardTitle className="text-base">מידע נוסף</CardTitle> </CardHeader> <CardContent className="space-y-2"> <div> <Label className="text-xs font-medium text-muted-foreground">שפות</Label> <div className="flex gap-1 mt-1"> {agent.languages.map((lang, index) => ( <Badge key={index} variant="outline" className="text-xs h-5"> {lang} </Badge> ))} </div> </div> <div> <Label className="text-xs font-medium text-muted-foreground">שירותים</Label> <div className="flex gap-1 mt-1"> {agent.services.map((service, index) => ( <Badge key={index} variant="secondary" className="text-xs h-5"> {service === "pension" ? "פנסיה" : service === "providentFund" ? "קרן השתלמות" : "קרן לימודים"} </Badge> ))} </div> </div> </CardContent> </Card> </div> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/agent-verification/email-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Mail, Send } from "lucide-react" import type { Agent } from "./types" interface EmailModalProps { agent: Agent | null isOpen: boolean onClose: () => void onSend: (subject: string, message: string) => void } export function EmailModal({ agent, isOpen, onClose, onSend }: EmailModalProps) { const [subject, setSubject] = useState("") const [message, setMessage] = useState("") const [isSending, setIsSending] = useState(false) const handleSend = async () => { if (!subject.trim() || !message.trim()) return setIsSending(true) try { await onSend(subject, message) setSubject("") setMessage("") onClose() } finally { setIsSending(false) } } const handleClose = () => { setSubject("") setMessage("") onClose() } if (!agent) return null return ( <Dialog open={isOpen} onOpenChange={handleClose}> <DialogContent className="max-w-2xl"> <DialogHeader> <DialogTitle className="flex items-center gap-2"> <Mail className="h-5 w-5" /> שליחת אימייל לסוכן </DialogTitle> <DialogDescription> שליחת הודעה ל{agent.fullName} ({agent.email}) </DialogDescription> </DialogHeader> <div className="space-y-4"> <div> <Label htmlFor="email-subject">נושא</Label> <Input id="email-subject" placeholder="נושא ההודעה..." value={subject} onChange={(e) => setSubject(e.target.value)} className="mt-1" /> </div> <div> <Label htmlFor="email-message">הודעה</Label> <Textarea id="email-message" placeholder="תוכן ההודעה..." value={message} onChange={(e) => setMessage(e.target.value)} className="mt-1 min-h-[120px]" /> </div> </div> <DialogFooter> <Button variant="outline" onClick={handleClose}> ביטול </Button> <Button onClick={handleSend} disabled={!subject.trim() || !message.trim() || isSending} className="bg-blue-600 hover:bg-blue-700" > <Send className="h-4 w-4 ml-1" /> {isSending ? "שולח..." : "שלח"} </Button> </DialogFooter> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/agent-verification/agent-table.tsx" "use client" import type React from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Checkbox } from "@/components/ui/checkbox" import { Eye, Check, X, Mail, ChevronUp, ChevronDown, RotateCcw } from "lucide-react" import type { Agent, SortField } from "./types" import { getStatusBadgeVariant, getStatusText } from "./utils" interface AgentTableProps { agents: Agent[] sortField: string sortDirection: "asc" | "desc" onSort: (field: SortField) => void onViewDetails: (agent: Agent) => void onApprove: (agent: Agent) => void onReject: (agent: Agent) => void onRevert: (agent: Agent) => void onSendEmail: (agent: Agent) => void onLicenseVerificationChange: (agent: Agent, verified: boolean) => void } export function AgentTable({ agents, sortField, sortDirection, onSort, onViewDetails, onApprove, onReject, onRevert, onSendEmail, onLicenseVerificationChange, }: AgentTableProps) { const SortButton = ({ field, children }: { field: SortField; children: React.ReactNode }) => ( <Button variant="ghost" size="sm" onClick={() => onSort(field)} className="h-auto p-0 font-semibold hover:bg-transparent" > <span className="flex items-center gap-1"> {children} {sortField === field && (sortDirection === "asc" ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)} </span> </Button> ) if (agents.length === 0) { return ( <div className="text-center py-8 text-muted-foreground"> <div className="text-lg font-medium mb-2">לא נמצאו סוכנים</div> <div className="text-sm">נסה לשנות את הפילטרים או החיפוש</div> </div> ) } return ( <div className="rounded-md border overflow-hidden"> <Table> <TableHeader> <TableRow> <TableHead> <SortButton field="status">סטטוס</SortButton> </TableHead> <TableHead> <SortButton field="fullName">שם מלא</SortButton> </TableHead> <TableHead> <SortButton field="licenseNumber">מספר רישיון</SortButton> </TableHead> <TableHead>טלפון</TableHead> <TableHead>אימייל</TableHead> <TableHead> <SortButton field="createdAt">תאריך הרשמה</SortButton> </TableHead> <TableHead className="text-center">אימות רישיון</TableHead> <TableHead className="text-center">אישור/דחייה</TableHead> <TableHead className="text-center">פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {agents.map((agent) => { const isLicenseVerified = agent.licenseVerified || false const canApprove = agent.status === "pending" && isLicenseVerified return ( <TableRow key={agent.agentId}> <TableCell> <Badge variant={getStatusBadgeVariant(agent.status)} className={agent.status === "approved" ? "bg-green-100 text-green-800 border-green-200" : ""} > {getStatusText(agent.status)} </Badge> </TableCell> <TableCell className="font-medium">{agent.fullName}</TableCell> <TableCell className="font-mono text-sm">{agent.licenseNumber}</TableCell> <TableCell>{agent.phone}</TableCell> <TableCell className="max-w-[200px] truncate">{agent.email}</TableCell> <TableCell>{new Date(agent.createdAt).toLocaleDateString("he-IL")}</TableCell> <TableCell className="text-center"> <Checkbox checked={isLicenseVerified} onCheckedChange={(checked) => onLicenseVerificationChange(agent, checked as boolean)} disabled={agent.status !== "pending"} /> </TableCell> <TableCell className="text-center"> <div className="flex items-center justify-center gap-2"> {agent.status === "pending" && ( <> <Button size="sm" onClick={() => onApprove(agent)} disabled={!canApprove} className={`h-8 px-3 border-0 rounded-md shadow-sm transition-colors ${ canApprove ? "bg-emerald-500 hover:bg-emerald-600 text-white" : "bg-gray-200 text-gray-400 cursor-not-allowed hover:bg-gray-200" }`} > <Check className="h-3.5 w-3.5" /> </Button> <Button size="sm" onClick={() => onReject(agent)} className="h-8 px-3 bg-red-500 hover:bg-red-600 text-white border-0 rounded-md shadow-sm transition-colors" > <X className="h-3.5 w-3.5" /> </Button> </> )} {(agent.status === "approved" || agent.status === "rejected") && ( <Button size="sm" onClick={() => onRevert(agent)} className="h-8 px-3 bg-gray-100 hover:bg-gray-200 text-gray-700 border border-gray-300 rounded-md shadow-sm transition-colors" > <RotateCcw className="h-3.5 w-3.5" /> </Button> )} </div> </TableCell> <TableCell className="text-center"> <div className="flex items-center justify-center gap-2"> <Button variant="ghost" size="sm" onClick={() => onViewDetails(agent)} className="h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-colors" > <Eye className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" onClick={() => onSendEmail(agent)} className="h-8 w-8 p-0 hover:bg-purple-50 hover:text-purple-600 rounded-md transition-colors" > <Mail className="h-4 w-4" /> </Button> </div> </TableCell> </TableRow> ) })} </TableBody> </Table> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/basic-offer-details-step.tsx" "use client" // Basic offer details step component import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import type { OfferFormData } from "./types" interface BasicOfferDetailsStepProps { formData: OfferFormData errors: Record<string, string> showErrors: boolean onInputChange: (field: keyof OfferFormData, value: any) => void onNext: () => void onCancel: () => void } export function BasicOfferDetailsStep({ formData, errors, showErrors, onInputChange, onNext, onCancel, }: BasicOfferDetailsStepProps) { return ( <div className="space-y-6"> <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">פרטי הצעה בסיסיים</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <Label htmlFor="title" className="flex items-center"> כותרת ההצעה <span className="text-red-500 mr-1"></span> </Label> <Input id="title" value={formData.title} onChange={(e) => onInputChange("title", e.target.value)} placeholder="לדוגמה: חיסכון מקסימלי לפנסיה" required className={showErrors && errors.title ? "border-red-500" : ""} /> {showErrors && errors.title && <p className="text-red-500 text-sm">{errors.title}</p>} </div> <div className="space-y-2"> <Label htmlFor="type" className="flex items-center"> סוג הצעה <span className="text-red-500 mr-1"></span> </Label> <Select value={formData.type} onValueChange={(value) => onInputChange("type", value)}> <SelectTrigger id="type"> <SelectValue placeholder="בחר סוג הצעה" /> </SelectTrigger> <SelectContent> <SelectItem value="pension">פנסיה</SelectItem> <SelectItem value="provident">גמל</SelectItem> <SelectItem value="investment">השתלמות</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="description" className="flex items-center"> תיאור ההצעה <span className="text-red-500 mr-1"></span> </Label> <textarea id="description" className={`flex w-full rounded-md border ${ showErrors && errors.description ? "border-red-500" : "border-input" } bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px]`} value={formData.description} onChange={(e) => onInputChange("description", e.target.value)} placeholder="תאר את ההצעה ואת היתרונות שלה..." required /> {showErrors && errors.description && <p className="text-red-500 text-sm">{errors.description}</p>} </div> </div> <div className="flex justify-between pt-6"> <Button type="button" variant="outline" onClick={onCancel}> בטל </Button> <Button type="button" onClick={onNext}> המשך </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/step-indicator.tsx" // Step indicator component for new offer modal interface StepIndicatorProps { currentStep: number } export function StepIndicator({ currentStep }: StepIndicatorProps) { const steps = [ { number: 1, title: "תנאי ההצעה" }, { number: 2, title: "קהל יעד" }, { number: 3, title: "אישור תנאים" }, ] return ( <div className="flex justify-center mb-6"> <div className="flex items-center"> {steps.map((step, index) => ( <div key={step.number} className="flex items-center"> <div className="flex flex-col items-center"> <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${ currentStep >= step.number ? "bg-primary text-white" : "bg-gray-200 text-gray-600" }`} > {step.number} </div> <span className={`text-xs mt-1 ${currentStep >= step.number ? "text-primary" : "text-gray-500"}`}> {step.title} </span> </div> {index < steps.length - 1 && ( <div className={`h-1 w-12 mx-2 ${currentStep > step.number ? "bg-primary" : "bg-gray-200"}`}></div> )} </div> ))} </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/error-message.tsx" // Error message component for new offer modal interface ErrorMessageProps { showErrors: boolean } export function ErrorMessage({ showErrors }: ErrorMessageProps) { if (!showErrors) return null return ( <div className="bg-red-50 border border-red-200 rounded-md p-4 mb-4"> <p className="text-red-800 text-sm">יש לתקן את השגיאות הבאות כדי להמשיך:</p> </div> ) } [V0_FILE]typescript:file="components/agent-dashboard/new-offer-modal/types.ts" // Type definitions for new offer modal export type OfferType = "pension" | "provident" | "investment" | "" export type AgeRange = "any" | "20-30" | "30-40" | "40-50" | "50-60" | "60+" export type Sector = "any" | "hitech" | "education" | "finance" | "healthcare" | "industry" | "other" export type AmountRange = "any" | "0-50000" | "50000-100000" | "100000-250000" | "250000-500000" | "500000+" export type ManagingCompany = | "מגדל" | "הראל" | "מנורה" | "כלל" | "הפניקס" | "אלטשולר שחם" | "פסגות" | "אחר" | "כל החברות" | "" export interface OfferFormData { type: OfferType managementFeeAccumulation: number | null managementFeeDeposit: number | null managingCompany: ManagingCompany otherManagingCompany?: string targetAudience: { ageRanges: AgeRange[] sectors: Sector[] amountRanges: AmountRange[] currentManagingCompanies: ManagingCompany[] otherCurrentManagingCompany?: string } endDate: Date | null hasEndDate: boolean termsAgreed: boolean } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/terms-agreement-step.tsx" isQuickEdit="true" "use client" import type React from "react" // Terms agreement step component import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { format } from "date-fns" import { he } from "date-fns/locale" import type { OfferFormData } from "./types" const translateAgeRanges = (ranges: string[]) => { const translations: Record<string, string> = { any: "כל הגילאים", "20-30": "20-30", "30-40": "30-40", "40-50": "40-50", "50-60": "50-60", "60+": "60+", } return ranges.map((range) => translations[range] || range).join(", ") } const translateSectors = (sectors: string[]) => { const translations: Record<string, string> = { any: "כל הסקטורים", hitech: "היי-טק", education: "חינוך", finance: "פיננסים", healthcare: "בריאות", industry: "תעשייה", other: "אחר", } return sectors.map((sector) => translations[sector] || sector).join(", ") } const translateAmountRanges = (ranges: string[]) => { const translations: Record<string, string> = { any: "כל הסכומים", "0-50000": "0-50,000 ₪", "50000-100000": "50,000-100,000 ₪", "100000-250000": "100,000-250,000 ₪", "250000-500000": "250,000-500,000 ₪", "500000+": "500,000+ ₪", } return ranges.map((range) => translations[range] || range).join(", ") } const translateManagingCompanies = (companies: string[], otherCompany?: string) => { const translations: Record<string, string> = { "כל החברות": "כל החברות", מגדל: "מגדל", הראל: "הראל", מנורה: "מנורה", כלל: "כלל", הפניקס: "הפניקס", "אלטשולר שחם": "אלטשולר שחם", פסגות: "פסגות", אחר: otherCompany || "אחר", } return companies.map((company) => translations[company] || company).join(", ") } interface TermsAgreementStepProps { formData: OfferFormData errors: Record<string, string> showErrors: boolean onInputChange: (field: keyof OfferFormData, value: any) => void onSubmit: (e: React.FormEvent) => void onPrev: () => void } export function TermsAgreementStep({ formData, errors, showErrors, onInputChange, onSubmit, onPrev, }: TermsAgreementStepProps) { const getOfferTypeLabel = (type: string) => { switch (type) { case "pension": return "פנסיה" case "provident": return "גמל" case "investment": return "השתלמות" default: return type } } const getManagingCompanyLabel = (company: string) => { if (company === "אחר" && formData.otherManagingCompany) { return formData.otherManagingCompany } return company } return ( <div className="space-y-6"> <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">סיכום ההצעה ואישור תנאים</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="bg-gray-50 p-4 rounded-lg space-y-3"> <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm"> <div> <span className="font-medium">סוג הצעה:</span> <Badge variant="secondary" className="mr-2"> {getOfferTypeLabel(formData.type)} </Badge> </div> <div> <span className="font-medium">חברה מנהלת:</span> <span className="mr-2">{getManagingCompanyLabel(formData.managingCompany)}</span> </div> <div> <span className="font-medium">דמי ניהול מצבירה:</span> <span className="mr-2">{formData.managementFeeAccumulation}%</span> </div> <div> <span className="font-medium">דמי ניהול מהפקדה:</span> <span className="mr-2">{formData.managementFeeDeposit}%</span> </div> {formData.hasEndDate && formData.endDate && ( <div className="col-span-2"> <span className="font-medium">תאריך סיום:</span> <span className="mr-2">{format(formData.endDate, "PPP", { locale: he })}</span> </div> )} </div> <div className="border-t pt-3 space-y-1 text-sm"> <div> <span className="font-medium">קבוצות גיל: </span> <span>{translateAgeRanges(formData.targetAudience.ageRanges)}</span> </div> <div> <span className="font-medium">סקטורים: </span> <span>{translateSectors(formData.targetAudience.sectors)}</span> </div> <div> <span className="font-medium">סכומים בקרן: </span> <span>{translateAmountRanges(formData.targetAudience.amountRanges)}</span> </div> <div> <span className="font-medium">חברות מנהלות נוכחיות: </span> <span> {translateManagingCompanies( formData.targetAudience.currentManagingCompanies, formData.targetAudience.otherCurrentManagingCompany, )} </span> </div> </div> </div> <div className="space-y-4 pt-4"> <div className="flex items-start space-x-2 space-x-reverse"> <Checkbox id="termsAgreed" checked={formData.termsAgreed} onCheckedChange={(checked) => onInputChange("termsAgreed", checked as boolean)} className={showErrors && errors.termsAgreed ? "border-red-500" : ""} /> <div className="grid gap-1.5 leading-none mr-2"> <Label htmlFor="termsAgreed" className="cursor-pointer"> אני מאשר/ת את תנאי ההצעה ומסכים/ה לפרסומה <span className="text-red-500 mr-1"></span> </Label> <p className="text-xs text-muted-foreground"> על ידי אישור תנאי ההצעה, אתה מסכים שההצעה תפורסם ותהיה זמינה ללקוחות פוטנציאליים. ההצעה תהיה כפופה לתנאים והגבלות של הפלטפורמה. </p> </div> </div> {showErrors && errors.termsAgreed && <p className="text-red-500 text-sm mr-6">{errors.termsAgreed}</p>} </div> </div> <div className="flex justify-between pt-6"> <Button type="button" variant="outline" onClick={onPrev}> חזור </Button> <Button type="submit" onClick={onSubmit}> פרסם הצעה </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/offer-terms-step.tsx" "use client" // Offer terms step component (merged with basic details) import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { CalendarIcon } from "lucide-react" import { format } from "date-fns" import { he } from "date-fns/locale" import { cn } from "@/lib/utils" import { managingCompanies } from "./constants" import type { OfferFormData } from "./types" import { useState } from "react" interface OfferTermsStepProps { formData: OfferFormData errors: Record<string, string> showErrors: boolean onInputChange: (field: keyof OfferFormData, value: any) => void onNext: () => void onCancel: () => void } export function OfferTermsStep({ formData, errors, showErrors, onInputChange, onNext, onCancel }: OfferTermsStepProps) { const [isDatePickerOpen, setIsDatePickerOpen] = useState(false) const handleDateSelect = (date: Date | undefined) => { onInputChange("endDate", date) setIsDatePickerOpen(false) } const today = new Date() today.setHours(0, 0, 0, 0) return ( <div className="space-y-6"> <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">תנאי ההצעה</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <div className="space-y-2"> <Label htmlFor="type" className="flex items-center"> סוג הצעה <span className="text-red-500 mr-1"></span> </Label> <Select value={formData.type || ""} onValueChange={(value) => onInputChange("type", value)}> <SelectTrigger id="type" className={showErrors && errors.type ? "border-red-500" : ""}> <SelectValue placeholder="בחר סוג הצעה" /> </SelectTrigger> <SelectContent> <SelectItem value="pension">פנסיה</SelectItem> <SelectItem value="provident">גמל</SelectItem> <SelectItem value="investment">השתלמות</SelectItem> </SelectContent> </Select> {showErrors && errors.type && <p className="text-red-500 text-sm">{errors.type}</p>} </div> <div className="space-y-2"> <Label htmlFor="managementFeeAccumulation" className="flex items-center"> דמי ניהול מצבירה (%) <span className="text-red-500 mr-1"></span> </Label> <div className="flex items-center"> <Input id="managementFeeAccumulation" type="number" step="0.01" min="0" max="2" value={formData.managementFeeAccumulation === null ? "" : formData.managementFeeAccumulation} onChange={(e) => onInputChange("managementFeeAccumulation", e.target.value ? Number.parseFloat(e.target.value) : null) } placeholder="הזן דמי ניהול מצבירה" required className={showErrors && errors.managementFeeAccumulation ? "border-red-500" : ""} /> <span className="mr-2">%</span> </div> {showErrors && errors.managementFeeAccumulation && ( <p className="text-red-500 text-sm">{errors.managementFeeAccumulation}</p> )} </div> <div className="space-y-2"> <Label htmlFor="managementFeeDeposit" className="flex items-center"> דמי ניהול מהפקדה (%) <span className="text-red-500 mr-1"></span> </Label> <div className="flex items-center"> <Input id="managementFeeDeposit" type="number" step="0.1" min="0" max="6" value={formData.managementFeeDeposit === null ? "" : formData.managementFeeDeposit} onChange={(e) => onInputChange("managementFeeDeposit", e.target.value ? Number.parseFloat(e.target.value) : null) } placeholder="הזן דמי ניהול מהפקדה" required className={showErrors && errors.managementFeeDeposit ? "border-red-500" : ""} /> <span className="mr-2">%</span> </div> {showErrors && errors.managementFeeDeposit && ( <p className="text-red-500 text-sm">{errors.managementFeeDeposit}</p> )} </div> <div className="space-y-2"> <Label htmlFor="managingCompany" className="flex items-center"> חברה מנהלת <span className="text-red-500 mr-1"></span> </Label> <Select value={formData.managingCompany || ""} onValueChange={(value) => onInputChange("managingCompany", value)} > <SelectTrigger id="managingCompany" className={showErrors && errors.managingCompany ? "border-red-500" : ""} > <SelectValue placeholder="בחר חברה מנהלת" /> </SelectTrigger> <SelectContent> {managingCompanies.map((company) => ( <SelectItem key={company.value} value={company.value}> {company.label} </SelectItem> ))} </SelectContent> </Select> {showErrors && errors.managingCompany && <p className="text-red-500 text-sm">{errors.managingCompany}</p>} </div> {formData.managingCompany === "אחר" && ( <div className="space-y-2"> <Label htmlFor="otherManagingCompany" className="flex items-center"> שם חברה מנהלת אחרת <span className="text-red-500 mr-1"></span> </Label> <Input id="otherManagingCompany" value={formData.otherManagingCompany || ""} onChange={(e) => onInputChange("otherManagingCompany", e.target.value)} placeholder="הזן שם חברה מנהלת" className={showErrors && errors.otherManagingCompany ? "border-red-500" : ""} /> {showErrors && errors.otherManagingCompany && ( <p className="text-red-500 text-sm">{errors.otherManagingCompany}</p> )} </div> )} <div className="space-y-4 pt-4 border-t"> <div className="flex items-center space-x-2 space-x-reverse"> <Checkbox id="hasEndDate" checked={formData.hasEndDate} onCheckedChange={(checked) => onInputChange("hasEndDate", checked as boolean)} /> <Label htmlFor="hasEndDate" className="mr-2 cursor-pointer"> הגבל הצעה בזמן </Label> </div> {formData.hasEndDate && ( <div className="space-y-2 mr-6"> <Label htmlFor="endDate" className="flex items-center"> תאריך סיום ההצעה <span className="text-red-500 mr-1"></span> </Label> <Popover open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}> <PopoverTrigger asChild> <Button type="button" variant="outline" className={cn( "w-full justify-start text-right font-normal", !formData.endDate && "text-muted-foreground", showErrors && errors.endDate && "border-red-500", )} onClick={() => setIsDatePickerOpen(!isDatePickerOpen)} > <CalendarIcon className="ml-2 h-4 w-4" /> {formData.endDate ? format(formData.endDate, "PPP", { locale: he }) : "בחר תאריך סיום"} </Button> </PopoverTrigger> <PopoverContent className="w-auto p-0" align="start"> <Calendar mode="single" selected={formData.endDate || undefined} onSelect={handleDateSelect} disabled={(date) => date <= today} initialFocus locale={he} /> </PopoverContent> </Popover> {showErrors && errors.endDate && <p className="text-red-500 text-sm">{errors.endDate}</p>} </div> )} </div> </div> <div className="flex justify-between pt-6"> <Button type="button" variant="outline" onClick={onCancel}> בטל </Button> <Button type="button" onClick={onNext}> המשך </Button> </div> </div> ) } [V0_FILE]typescript:file="components/agent-dashboard/new-offer-modal/use-new-offer-form.ts" "use client" // Custom hook for managing new offer form state and validation import { useState } from "react" import type { OfferFormData } from "./types" export function useNewOfferForm() { const [formData, setFormData] = useState<OfferFormData>({ type: "", managementFeeAccumulation: null, managementFeeDeposit: null, managingCompany: "", targetAudience: { ageRanges: ["any"], sectors: ["any"], amountRanges: ["any"], currentManagingCompanies: ["כל החברות"], }, endDate: null, hasEndDate: false, termsAgreed: false, }) const [errors, setErrors] = useState<Record<string, string>>({}) const [showErrors, setShowErrors] = useState(false) const handleInputChange = (field: keyof OfferFormData, value: any) => { setFormData((prev) => ({ ...prev, [field]: value, })) if (errors[field]) { setErrors((prev) => { const newErrors = { ...prev } delete newErrors[field] return newErrors }) } } const handleTargetAudienceChange = (field: keyof OfferFormData["targetAudience"], value: any, checked?: boolean) => { if (Array.isArray(value)) { setFormData((prev) => ({ ...prev, targetAudience: { ...prev.targetAudience, [field]: value, }, })) } else if (checked !== undefined) { setFormData((prev) => { const currentValues = [...prev.targetAudience[field]] if (checked) { if (!currentValues.includes(value)) { if (value === "any" || value === "כל החברות") { return { ...prev, targetAudience: { ...prev.targetAudience, [field]: [value], }, } } else { const filteredValues = currentValues.filter((v) => v !== "any" && v !== "כל החברות") return { ...prev, targetAudience: { ...prev.targetAudience, [field]: [...filteredValues, value], }, } } } } else { const filteredValues = currentValues.filter((v) => v !== value) if (filteredValues.length === 0) { return { ...prev, targetAudience: { ...prev.targetAudience, [field]: field === "currentManagingCompanies" ? ["כל החברות"] : ["any"], }, } } return { ...prev, targetAudience: { ...prev.targetAudience, [field]: filteredValues, }, } } return prev }) } else { setFormData((prev) => ({ ...prev, targetAudience: { ...prev.targetAudience, [field]: value, }, })) } } const validateStep1 = () => { const newErrors: Record<string, string> = {} if (!formData.type) { newErrors.type = "יש לבחור סוג הצעה" } if (formData.managementFeeAccumulation === null) { newErrors.managementFeeAccumulation = "יש להזין דמי ניהול מצבירה" } else if (formData.managementFeeAccumulation < 0 || formData.managementFeeAccumulation > 2) { newErrors.managementFeeAccumulation = "דמי ניהול מצבירה חייבים להיות בין 0% ל-2%" } if (formData.managementFeeDeposit === null) { newErrors.managementFeeDeposit = "יש להזין דמי ניהול מהפקדה" } else if (formData.managementFeeDeposit < 0 || formData.managementFeeDeposit > 6) { newErrors.managementFeeDeposit = "דמי ניהול מהפקדה חייבים להיות בין 0% ל-6%" } if (!formData.managingCompany) { newErrors.managingCompany = "יש לבחור חברה מנהלת" } if ( formData.managingCompany === "אחר" && (!formData.otherManagingCompany || !formData.otherManagingCompany.trim()) ) { newErrors.otherManagingCompany = "יש להזין שם חברה מנהלת" } if (formData.hasEndDate && !formData.endDate) { newErrors.endDate = "יש לבחור תאריך סיום" } if (formData.hasEndDate && formData.endDate) { const today = new Date() today.setHours(0, 0, 0, 0) const selectedDate = new Date(formData.endDate) selectedDate.setHours(0, 0, 0, 0) if (selectedDate <= today) { newErrors.endDate = "תאריך הסיום חייב להיות בעתיד" } } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const validateStep2 = () => { // Target audience step has no mandatory fields return true } const validateStep3 = () => { const newErrors: Record<string, string> = {} if (!formData.termsAgreed) { newErrors.termsAgreed = "יש לאשר את תנאי ההצעה" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } return { formData, errors, showErrors, setShowErrors, handleInputChange, handleTargetAudienceChange, validateStep1, validateStep2, validateStep3, } } [V0_FILE]typescriptreact:file="components/dashboard/dashboard-header.tsx" "use client" import React from "react" // Extracted from app/dashboard/page.tsx - Dashboard header component import { Menu } from "lucide-react" interface DashboardHeaderProps { isMenuOpen: boolean setIsMenuOpen: (open: boolean) => void userName: string userEmail: string notificationsOpen: boolean setNotificationsOpen: (open: boolean) => void profileOpen: boolean setProfileOpen: (open: boolean) => void setActiveContent: (content: string) => void handleLogout: () => void } export function DashboardHeader({ isMenuOpen, setIsMenuOpen, userName, userEmail, notificationsOpen, setNotificationsOpen, profileOpen, setProfileOpen, setActiveContent, handleLogout, }: DashboardHeaderProps) { // Listen for navigation events from main header React.useEffect(() => { const handleNavigateToProfile = () => { setActiveContent("profile") } window.addEventListener("navigate-to-profile", handleNavigateToProfile) return () => { window.removeEventListener("navigate-to-profile", handleNavigateToProfile) } }, [setActiveContent]) return ( <header className="bg-white border-b sticky top-0 z-30"> <div className="flex items-center justify-between p-4"> <div className="flex items-center"> <button className="p-2 md:hidden" onClick={() => setIsMenuOpen(true)}> <Menu className="h-6 w-6" /> </button> <h1 className="text-xl font-bold mr-2 md:mr-0">לוח בקרה</h1> </div> {/ User controls now handled by main header /} </div> </header> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/dashboard-header.tsx" "use client" import { Menu } from "lucide-react" import React from "react" interface DashboardHeaderProps { isMenuOpen: boolean setIsMenuOpen: (open: boolean) => void notificationsOpen: boolean setNotificationsOpen: (open: boolean) => void profileOpen: boolean setProfileOpen: (open: boolean) => void expiringOffers: any[] oneDayExpiringOffers: any[] agentUser: any setActiveContent: (content: string) => void handleLogout: () => void } export default function DashboardHeader({ isMenuOpen, setIsMenuOpen, notificationsOpen, setNotificationsOpen, profileOpen, setProfileOpen, expiringOffers, oneDayExpiringOffers, agentUser, setActiveContent, handleLogout, }: DashboardHeaderProps) { // Listen for navigation events from main header React.useEffect(() => { const handleNavigateToAgentProfile = () => { setActiveContent("profile") } window.addEventListener("navigate-to-agent-profile", handleNavigateToAgentProfile) return () => { window.removeEventListener("navigate-to-agent-profile", handleNavigateToAgentProfile) } }, [setActiveContent]) return ( <header className="bg-white border-b sticky top-0 z-30"> <div className="flex items-center justify-between p-4"> <div className="flex items-center"> <button className="p-2 md:hidden" onClick={() => setIsMenuOpen(true)}> <Menu className="h-6 w-6" /> </button> <h1 className="text-xl font-bold mr-2 md:mr-0">לוח בקרה לסוכן</h1> </div> {/ User controls now handled by main header */} </div> </header> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/offers-content/offers-tabs.tsx" "use client" // Offers tabs component for agent dashboard interface OffersTabsProps { activeOfferType: string setActiveOfferType: (type: string) => void } export function OffersTabs({ activeOfferType, setActiveOfferType }: OffersTabsProps) { return ( <div className="flex justify-center border-b mb-4"> <button className={`px-4 py-2 font-medium ${ activeOfferType === "pension" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("pension")} > פנסיה </button> <button className={`px-4 py-2 font-medium ${ activeOfferType === "provident" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("provident")} > גמל </button> <button className={`px-4 py-2 font-medium ${ activeOfferType === "investment" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("investment")} > השתלמות </button> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/reviews-content.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import type { JSX } from "react" interface ReviewsContentProps { reviewsData: any handleRequestReviewDeletion: (reviewId: string) => void formatDate: (date: string) => string renderStars: (rating: number) => JSX.Element } export default function ReviewsContent({ reviewsData, handleRequestReviewDeletion, formatDate, renderStars, }: ReviewsContentProps) { return ( <div className="space-y-6"> <Card> <CardHeader> <CardTitle>ביקורות לקוחות</CardTitle> <CardDescription>מה לקוחות אומרים עליך</CardDescription> </CardHeader> <CardContent> <div className="space-y-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <Card> <CardContent className="p-6"> <div className="flex flex-col items-center"> <div className="text-2xl font-bold">{reviewsData.summary.averageRating}</div> <div className="my-2">{renderStars(reviewsData.summary.averageRating)}</div> <p className="text-muted-foreground">דירוג ממוצע</p> </div> </CardContent> </Card> <Card> <CardContent className="p-6"> <div className="flex flex-col items-center"> <div className="text-2xl font-bold">{reviewsData.summary.totalReviews}</div> <p className="text-muted-foreground">סה"כ ביקורות</p> </div> </CardContent> </Card> <Card> <CardContent className="p-6"> <div className="flex flex-col items-center"> <div className="text-2xl font-bold">{reviewsData.summary.positivePercentage}%</div> <p className="text-muted-foreground">ביקורות חיוביות</p> </div> </CardContent> </Card> </div> <div className="space-y-4"> {reviewsData.reviews.map((review: any) => ( <div key={review.id} className="border rounded-lg p-4"> <div className="flex justify-between items-start mb-2"> <div> <p className="font-medium">{review.client}</p> <div className="flex items-center mt-1"> {renderStars(review.rating)} <span className="text-sm text-gray-500 mr-2">{formatDate(review.date)}</span> </div> </div> <Button variant="ghost" size="sm" className="text-red-600 hover:text-red-800 hover:bg-red-50" onClick={() => handleRequestReviewDeletion(review.id)} > בקש הסרה </Button> </div> <p className="text-gray-700">{review.comment}</p> </div> ))} </div> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal/target-audience-step.tsx" isQuickEdit="true" "use client" // Target audience step component import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Button } from "@/components/ui/button" import { ageRanges, sectors, amountRanges, currentManagingCompanies } from "./constants" import type { OfferFormData } from "./types" interface TargetAudienceStepProps { formData: OfferFormData errors: Record<string, string> showErrors: boolean onTargetAudienceChange: (field: keyof OfferFormData["targetAudience"], value: any, checked?: boolean) => void onNext: () => void onPrev: () => void } export function TargetAudienceStep({ formData, errors, showErrors, onTargetAudienceChange, onNext, onPrev, }: TargetAudienceStepProps) { return ( <div className="space-y-6"> <div className="space-y-4"> <div className="flex items-center"> <h3 className="text-lg font-semibold">קהל יעד</h3> <div className="h-px bg-gray-200 flex-grow mr-4"></div> </div> <p className="text-sm text-gray-600 mt-2">ההצעות יוצגו למשתמשים העונים על הקריטריונים הבאים</p> <div className="space-y-2"> <Label>קבוצת גיל</Label> <div className="grid grid-cols-2 gap-2"> {ageRanges.map((age) => ( <div key={age.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`age-${age.value}`} checked={formData.targetAudience.ageRanges.includes(age.value)} onCheckedChange={(checked) => onTargetAudienceChange("ageRanges", age.value, checked as boolean)} /> <Label htmlFor={`age-${age.value}`} className="mr-2 cursor-pointer"> {age.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label>סקטור</Label> <div className="grid grid-cols-2 gap-2"> {sectors.map((sector) => ( <div key={sector.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`sector-${sector.value}`} checked={formData.targetAudience.sectors.includes(sector.value)} onCheckedChange={(checked) => onTargetAudienceChange("sectors", sector.value, checked as boolean)} /> <Label htmlFor={`sector-${sector.value}`} className="mr-2 cursor-pointer"> {sector.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label>סכום בקרן</Label> <div className="grid grid-cols-2 gap-2"> {amountRanges.map((amount) => ( <div key={amount.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`amount-${amount.value}`} checked={formData.targetAudience.amountRanges.includes(amount.value)} onCheckedChange={(checked) => onTargetAudienceChange("amountRanges", amount.value, checked as boolean) } /> <Label htmlFor={`amount-${amount.value}`} className="mr-2 cursor-pointer"> {amount.label} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label>חברה מנהלת נוכחית</Label> <div className="grid grid-cols-2 gap-2"> {currentManagingCompanies.map((company) => ( <div key={company.value} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`company-${company.value}`} checked={formData.targetAudience.currentManagingCompanies.includes(company.value)} onCheckedChange={(checked) => onTargetAudienceChange("currentManagingCompanies", company.value, checked as boolean) } /> <Label htmlFor={`company-${company.value}`} className="mr-2 cursor-pointer"> {company.label} </Label> </div> ))} </div> </div> {formData.targetAudience.currentManagingCompanies.includes("אחר") && ( <div className="space-y-2"> <Label htmlFor="otherCurrentManagingCompany">שם חברה מנהלת נוכחית אחרת</Label> <Input id="otherCurrentManagingCompany" value={formData.targetAudience.otherCurrentManagingCompany || ""} onChange={(e) => { onTargetAudienceChange("otherCurrentManagingCompany", e.target.value) }} placeholder="הזן שם חברה מנהלת נוכחית" /> </div> )} </div> <div className="flex justify-between pt-6"> <Button type="button" variant="outline" onClick={onPrev}> חזור </Button> <Button type="button" onClick={onNext}> המשך </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/new-offer-modal.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { CheckCircle2 } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { OfferTermsStep } from "./new-offer-modal/offer-terms-step" import { TargetAudienceStep } from "./new-offer-modal/target-audience-step" import { TermsAgreementStep } from "./new-offer-modal/terms-agreement-step" import { useNewOfferForm } from "./new-offer-modal/use-new-offer-form" import { StepIndicator } from "./new-offer-modal/step-indicator" import { ErrorMessage } from "./new-offer-modal/error-message" import type { OfferFormData } from "./new-offer-modal/types" interface NewOfferModalProps { isOpen: boolean onClose: () => void /** called when the form finishes successfully / onSubmit: (offerData: OfferFormData) => void } export default function NewOfferModal({ isOpen, onClose, onSubmit }: NewOfferModalProps) { const [currentStep, setCurrentStep] = useState(1) const [isSubmitted, setIsSubmitted] = useState(false) const { formData, errors, showErrors, setShowErrors, handleInputChange, handleTargetAudienceChange, validateStep1, validateStep2, validateStep3, } = useNewOfferForm() const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (currentStep === 3 && !validateStep3()) { setShowErrors(true) return } setIsSubmitted(true) setTimeout(() => { onSubmit(formData) setIsSubmitted(false) setCurrentStep(1) onClose() }, 2000) } const nextStep = () => { let isValid = false if (currentStep === 1) { isValid = validateStep1() } else if (currentStep === 2) { isValid = validateStep2() } if (!isValid) { setShowErrors(true) return } setShowErrors(false) setCurrentStep(currentStep + 1) } const prevStep = () => { setShowErrors(false) setCurrentStep(currentStep - 1) } const handleClose = () => { setCurrentStep(1) setShowErrors(false) setIsSubmitted(false) onClose() } return ( <Dialog open={isOpen} onOpenChange={handleClose}> <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto" dir="rtl"> <DialogHeader> <DialogTitle className="text-xl font-bold">יצירת הצעה חדשה</DialogTitle> <DialogDescription>מלא את הפרטים הבאים כדי ליצור הצעה חדשה שתוצג ללקוחות פוטנציאליים.</DialogDescription> </DialogHeader> {isSubmitted ? ( <div className="flex flex-col items-center justify-center py-10 text-center"> <div className="bg-green-50 rounded-full p-4 mb-4"> <CheckCircle2 className="h-16 w-16 text-green-500" /> </div> <h3 className="text-xl font-bold mb-2">ההצעה נוצרה בהצלחה!</h3> <p className="text-muted-foreground mb-6">ההצעה שלך פורסמה ותהיה זמינה ללקוחות פוטנציאליים.</p> </div> ) : ( <form onSubmit={handleSubmit} className="space-y-6 py-4 text-right"> <StepIndicator currentStep={currentStep} /> <ErrorMessage showErrors={showErrors} /> {currentStep === 1 && ( <OfferTermsStep formData={formData} errors={errors} showErrors={showErrors} onInputChange={handleInputChange} onNext={nextStep} onCancel={handleClose} /> )} {currentStep === 2 && ( <TargetAudienceStep formData={formData} errors={errors} showErrors={showErrors} onTargetAudienceChange={handleTargetAudienceChange} onNext={nextStep} onPrev={prevStep} /> )} {currentStep === 3 && ( <TermsAgreementStep formData={formData} errors={errors} showErrors={showErrors} onInputChange={handleInputChange} onSubmit={handleSubmit} onPrev={prevStep} /> )} </form> )} </DialogContent> </Dialog> ) } export type { OfferFormData } [V0_FILE]typescriptreact:file="hooks/use-agent-dashboard-state.ts" isQuickEdit="true" "use client" import { useState, useRef } from "react" import { initialOffersData, leadsData } from "@/lib/agent-dashboard-data" export function useAgentDashboardState() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [activeContent, setActiveContent] = useState("leads") const [notificationsOpen, setNotificationsOpen] = useState(false) const [profileOpen, setProfileOpen] = useState(false) const [activeOfferType, setActiveOfferType] = useState("pension") const [isNewOfferModalOpen, setIsNewOfferModalOpen] = useState(false) const [isContactDialogOpen, setIsContactDialogOpen] = useState(false) const [selectedLead, setSelectedLead] = useState<any>(null) const [isFilterOpen, setIsFilterOpen] = useState(false) const [filterValues, setFilterValues] = useState({ offerType: "all", status: "all", dateRange: "all", }) const [leadsFilterValues, setLeadsFilterValues] = useState({ dateRange: "all", offerType: "all", status: "all", interestType: "all", }) const [isEditOfferModalOpen, setIsEditOfferModalOpen] = useState(false) const [selectedOffer, setSelectedOffer] = useState<any>(null) const [errorMessage, setErrorMessage] = useState<string | null>(null) const [isViewOfferModalOpen, setIsViewOfferModalOpen] = useState(false) const [viewedOffer, setViewedOffer] = useState<any>(null) const [isRequestChangeModalOpen, setIsRequestChangeModalOpen] = useState(false) const [requestChangeField, setRequestChangeField] = useState("") const [requestChangeReason, setRequestChangeReason] = useState("") const [isRequestReviewDeletionModalOpen, setIsRequestReviewDeletionModalOpen] = useState(false) const [selectedReviewId, setSelectedReviewId] = useState<string | null>(null) const [reviewDeletionReason, setReviewDeletionReason] = useState("") const [leads, setLeads] = useState(leadsData.recentLeads) const [offersData, setOffersData] = useState(initialOffersData) const errorTimeoutRef = useRef<NodeJS.Timeout | null>(null) return { // UI State isMenuOpen, setIsMenuOpen, activeContent, setActiveContent, notificationsOpen, setNotificationsOpen, profileOpen, setProfileOpen, activeOfferType, setActiveOfferType, // Modal State isNewOfferModalOpen, setIsNewOfferModalOpen, isContactDialogOpen, setIsContactDialogOpen, isEditOfferModalOpen, setIsEditOfferModalOpen, isViewOfferModalOpen, setIsViewOfferModalOpen, isRequestChangeModalOpen, setIsRequestChangeModalOpen, isRequestReviewDeletionModalOpen, setIsRequestReviewDeletionModalOpen, // Filter State isFilterOpen, setIsFilterOpen, filterValues, setFilterValues, leadsFilterValues, setLeadsFilterValues, // Data State leads, setLeads, offersData, setOffersData, selectedLead, setSelectedLead, selectedOffer, setSelectedOffer, viewedOffer, setViewedOffer, selectedReviewId, setSelectedReviewId, // Form State requestChangeField, setRequestChangeField, requestChangeReason, setRequestChangeReason, reviewDeletionReason, setReviewDeletionReason, // Error State errorMessage, setErrorMessage, errorTimeoutRef, } } [V0_FILE]typescriptreact:file="components/dashboard/review-modal.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Star } from "lucide-react" interface ReviewModalProps { isOpen: boolean onClose: () => void agent: any | null onSubmit: (reviewData: { rating: number; comment: string; agentId: string; agentName: string }) => void } export function ReviewModal({ isOpen, onClose, agent, onSubmit }: ReviewModalProps) { const [rating, setRating] = useState(0) const [comment, setComment] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (rating === 0) return setIsSubmitting(true) try { await onSubmit({ rating, comment: comment.trim(), agentId: agent?.id || "", agentName: agent?.name || "", }) // Reset form setRating(0) setComment("") onClose() } catch (error) { console.error("Error submitting review:", error) } finally { setIsSubmitting(false) } } const handleClose = () => { setRating(0) setComment("") onClose() } const renderStarRating = () => { return ( <div className="flex gap-1"> {Array.from({ length: 5 }).map((_, i) => ( <button key={i} type="button" onClick={() => setRating(i + 1)} className="text-2xl hover:scale-110 transition-transform" > <Star className="w-6 h-6" fill={i < rating ? "#fbbf24" : "none"} stroke={i < rating ? "#fbbf24" : "#d1d5db"} strokeWidth={1.5} /> </button> ))} </div> ) } return ( <Dialog open={isOpen} onOpenChange={handleClose}> <DialogContent className="sm:max-w-md" dir="rtl"> <DialogHeader> <DialogTitle className="text-right">כתיבת ביקורת עבור {agent?.name}</DialogTitle> </DialogHeader> <form onSubmit={handleSubmit} className="space-y-4"> <div className="space-y-2"> <Label className="text-sm font-medium"> דירוג <span className="text-red-500"></span> </Label> <div className="flex justify-center">{renderStarRating()}</div> </div> <div className="space-y-2"> <Label htmlFor="review-comment" className="text-sm font-medium"> הביקורת שלך (עד 2 משפטים) </Label> <Textarea id="review-comment" value={comment} onChange={(e) => setComment(e.target.value)} placeholder="שתף את החוויה שלך עם הסוכן..." className="min-h-[80px] resize-none" maxLength={200} /> <p className="text-xs text-muted-foreground text-left">{comment.length}/200 תווים</p> </div> <div className="text-xs text-gray-500 bg-gray-50 p-3 rounded">הביקורת תישלח לאישור מנהל האתר לפני פרסומה</div> <div className="flex gap-2 pt-4"> <Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting} className="flex-1 bg-transparent" > ביטול </Button> <Button type="submit" disabled={rating === 0 || isSubmitting} className="flex-1"> {isSubmitting ? "שולח..." : "שלח ביקורת"} </Button> </div> </form> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="hooks/use-agent-dashboard-handlers.ts" isQuickEdit="true" "use client" import { useState } from "react" import { getAgentLeads, getAgentOffers } from "@/lib/agent-dashboard-data" export const useAgentDashboardHandlers = () => { const [leads, setLeads] = useState(getAgentLeads()) const [offers, setOffers] = useState(getAgentOffers()) const handleUpdateLeadStatus = (leadId: string, status: string) => { setLeads((prev) => prev.map((lead) => (lead.id === leadId ? { ...lead, status } : lead))) } const handleCreateOffer = (offerData: any) => { const newOffer = { id: Date.now().toString(), ...offerData, status: "ממתין לאישור", leads: 0, conversions: 0, createdAt: new Date().toISOString().split("T")[0], } setOffers((prev) => [newOffer, ...prev]) } const handleUpdateOffer = (offerId: string, updates: any) => { setOffers((prev) => prev.map((offer) => (offer.id === offerId ? { ...offer, ...updates } : offer))) } const handleDeleteOffer = (offerId: string) => { setOffers((prev) => prev.filter((offer) => offer.id !== offerId)) } const handleCycleLeadStatus = (leadId: string) => { setLeads((prev) => prev.map((lead) => { if (lead.id === leadId) { // Cycle through statuses: חדש -> בטיפול -> טופל -> חדש let newStatus = "חדש" if (lead.status === "חדש") { newStatus = "בטיפול" } else if (lead.status === "בטיפול") { newStatus = "טופל" } return { ...lead, status: newStatus } } return lead }), ) } return { leads, offers, handleUpdateLeadStatus, handleCreateOffer, handleUpdateOffer, handleDeleteOffer, handleCycleLeadStatus, } } [V0_FILE]typescriptreact:file="components/admin-dashboard/overview-stats-cards.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" export function OverviewStatsCards() { return ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">סה״כ משתמשים רשומים</CardTitle> </CardHeader> <CardContent> <div className="flex items-center justify-between"> <div className="text-2xl font-bold">1,248</div> <div className="flex flex-col items-end"> <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">לקוחות: 1,156</Badge> <Badge className="bg-green-100 text-green-800 hover:bg-green-100 mt-1">סוכנים: 92</Badge> </div> </div> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">אימותי סוכנים בהמתנה</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">14</div> <p className="text-xs text-muted-foreground">5 ממתינים יותר מ-48 שעות</p> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">הצעות פעילות</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">387</div> <p className="text-xs text-muted-foreground">32 הצעות חדשות השבוע</p> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">מחלוקות פתוחות</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">7</div> <div className="flex items-center mt-1"> <Badge variant="destructive">3 דחופות</Badge> </div> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">סה״כ לידים</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">342</div> <p className="text-xs text-muted-foreground">28 לידים חדשים השבוע</p> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">ביקורות ממתינות לאישור</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">15</div> <p className="text-xs text-muted-foreground">9 ממתינות יותר מ-24 שעות</p> </CardContent> </Card> <Card> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium">בקשות מחיקת ביקורות</CardTitle> </CardHeader> <CardContent> <div className="text-2xl font-bold">6</div> <p className="text-xs text-muted-foreground">3 בקשות חדשות היום</p> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/pension-comparison-charts.tsx" isQuickEdit="true" import { Calendar, Briefcase, Wallet } from "lucide-react" import type { FormData } from "../pension-form-modal" import { getOccupationName } from "./utils" interface PensionComparisonChartsProps { formData: FormData } export function PensionComparisonCharts({ formData }: PensionComparisonChartsProps) { const birthYear = new Date(formData.birthDate).getFullYear() const currentYear = new Date().getFullYear() const age = currentYear - birthYear return ( <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8"> {/* Comparison by Age - Donut Chart with new color palette /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Calendar className="h-5 w-5 text-cyan-600" /> <h4 className="font-medium">השוואה לפי גיל</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Donut chart with new color palette /} <defs> <linearGradient id="donutGradientNew" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#06b6d4" /> <stop offset="50%" stopColor="#0ea5e9" /> <stop offset="100%" stopColor="#3b82f6" /> </linearGradient> </defs> {/ Background circle /} <circle cx="100" cy="100" r="80" fill="none" stroke="#e5e7eb" strokeWidth="20" /> {/ Data arc - 60% worse than average /} <circle cx="100" cy="100" r="80" fill="none" stroke="url(#donutGradientNew)" strokeWidth="20" strokeDasharray="502.4 502.4" strokeDashoffset="200.96" transform="rotate(-90 100 100)" /> {/ Marker for user position /} <circle cx="100" cy="20" r="6" fill="#0284c7" /> {/ Center text /} <text x="100" y="95" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#0284c7"> 60% </text> <text x="100" y="115" textAnchor="middle" fontSize="12" fill="#6b7280"> גבוה מהממוצע </text> </svg> </div> <div className="text-center text-sm text-gray-500 mt-2">דמי הניהול שלך גבוהים ב-60% מהממוצע לגילך</div> </div> {/ Redesigned Comparison by Occupation - Modern Gauge Chart /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Briefcase className="h-5 w-5 text-indigo-600" /> <h4 className="font-medium">השוואה לפי תחום עיסוק</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Modern Gauge Chart /} <defs> <linearGradient id="sectorGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#4f46e5" /> <stop offset="100%" stopColor="#818cf8" /> </linearGradient> <filter id="glow" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur stdDeviation="3" result="blur" /> <feComposite in="SourceGraphic" in2="blur" operator="over" /> </filter> </defs> {/ Sector name /} <text x="100" y="50" textAnchor="middle" fontSize="16" fontWeight="bold" fill="#4f46e5" filter="url(#glow)"> {getOccupationName(formData.workField) || "הייטק"} </text> {/ Gauge background /} <path d="M 30,140 A 70,70 0 0,1 170,140" fill="none" stroke="#e5e7eb" strokeWidth="10" strokeLinecap="round" /> {/ Gauge fill - 45% worse than average /} <path d="M 30,140 A 70,70 0 0,1 100,70" fill="none" stroke="url(#sectorGradient)" strokeWidth="10" strokeLinecap="round" /> {/ Gauge needle /} <line x1="100" y1="140" x2="100" y2="80" stroke="#4f46e5" strokeWidth="3" strokeLinecap="round" /> <circle cx="100" cy="140" r="5" fill="#4f46e5" /> {/ Percentage /} <text x="100" y="170" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#4f46e5"> 45% </text> <text x="100" y="185" textAnchor="middle" fontSize="12" fill="#6b7280"> גבוה מהממוצע בתחום </text> </svg> </div> </div> {/ New Chart: Comparison by Accumulated Amount - Bar Chart /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Wallet className="h-5 w-5 text-emerald-600" /> <h4 className="font-medium">השוואה לפי סכום צבור</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Bar chart /} <defs> <linearGradient id="accBarGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stopColor="#10b981" /> <stop offset="100%" stopColor="#34d399" /> </linearGradient> </defs> {/ Y-axis /} <line x1="40" y1="40" x2="40" y2="160" stroke="#94a3b8" strokeWidth="1.5" /> {/ X-axis /} <line x1="40" y1="160" x2="180" y2="160" stroke="#94a3b8" strokeWidth="1.5" /> {/ Bars /} <rect x="50" y="70" width="20" height="90" rx="2" fill="#e5e7eb" /> <rect x="80" y="90" width="20" height="70" rx="2" fill="#e5e7eb" /> <rect x="110" y="60" width="20" height="100" rx="2" fill="url(#accBarGradient)" stroke="#10b981" strokeWidth="2" /> <rect x="140" y="100" width="20" height="60" rx="2" fill="#e5e7eb" /> {/ Only label the user's category /} <text x="120" y="175" textAnchor="middle" fontSize="10" fill="#10b981" fontWeight="bold"> 250K-500K </text> </svg> </div> <div className="text-center text-sm text-gray-500 mt-2"> <span className="font-medium text-emerald-600">הקטגוריה שלך:</span> דמי הניהול הממוצעים בקטגוריית הסכום הצבור שלך הם 0.8% </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/provident-comparison-charts.tsx" isQuickEdit="true" import { Calendar, Briefcase, Wallet } from "lucide-react" import type { FormData } from "../pension-form-modal" import { getOccupationName } from "./utils" interface ProvidentComparisonChartsProps { formData: FormData } export function ProvidentComparisonCharts({ formData }: ProvidentComparisonChartsProps) { const birthYear = new Date(formData.birthDate).getFullYear() const currentYear = new Date().getFullYear() const age = currentYear - birthYear return ( <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8"> {/ Comparison by Age - Donut Chart with new color palette /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Calendar className="h-5 w-5 text-cyan-600" /> <h4 className="font-medium">השוואה לפי גיל</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Donut chart with new color palette /} <defs> <linearGradient id="donutGradientProvident" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#06b6d4" /> <stop offset="50%" stopColor="#0ea5e9" /> <stop offset="100%" stopColor="#3b82f6" /> </linearGradient> </defs> {/ Background circle /} <circle cx="100" cy="100" r="80" fill="none" stroke="#e5e7eb" strokeWidth="20" /> {/ Data arc - 55% worse than average /} <circle cx="100" cy="100" r="80" fill="none" stroke="url(#donutGradientProvident)" strokeWidth="20" strokeDasharray="502.4 502.4" strokeDashoffset="225.08" transform="rotate(-90 100 100)" /> {/ Marker for user position /} <circle cx="100" cy="20" r="6" fill="#0284c7" /> {/ Center text /} <text x="100" y="95" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#0284c7"> 55% </text> <text x="100" y="115" textAnchor="middle" fontSize="12" fill="#6b7280"> גבוה מהממוצע </text> </svg> </div> <div className="text-center text-sm text-gray-500 mt-2">דמי הניהול שלך גבוהים ב-55% מהממוצע לגילך</div> </div> {/ Redesigned Comparison by Occupation - Modern Gauge Chart /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Briefcase className="h-5 w-5 text-indigo-600" /> <h4 className="font-medium">השוואה לפי תחום עיסוק</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Modern Gauge Chart /} <defs> <linearGradient id="sectorGradientProvident" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#4f46e5" /> <stop offset="100%" stopColor="#818cf8" /> </linearGradient> <filter id="glowProvident" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur stdDeviation="3" result="blur" /> <feComposite in="SourceGraphic" in2="blur" operator="over" /> </filter> </defs> {/ Sector name /} <text x="100" y="50" textAnchor="middle" fontSize="16" fontWeight="bold" fill="#4f46e5" filter="url(#glowProvident)" > {getOccupationName(formData.workField) || "הייטק"} </text> {/ Gauge background /} <path d="M 30,140 A 70,70 0 0,1 170,140" fill="none" stroke="#e5e7eb" strokeWidth="10" strokeLinecap="round" /> {/ Gauge fill - 40% worse than average /} <path d="M 30,140 A 70,70 0 0,1 90,75" fill="none" stroke="url(#sectorGradientProvident)" strokeWidth="10" strokeLinecap="round" /> {/ Gauge needle /} <line x1="100" y1="140" x2="90" y2="85" stroke="#4f46e5" strokeWidth="3" strokeLinecap="round" /> <circle cx="100" cy="140" r="5" fill="#4f46e5" /> {/ Percentage /} <text x="100" y="170" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#4f46e5"> 40% </text> <text x="100" y="185" textAnchor="middle" fontSize="12" fill="#6b7280"> גבוה מהממוצע בתחום </text> </svg> </div> </div> {/ New Chart: Comparison by Accumulated Amount - Bar Chart /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Wallet className="h-5 w-5 text-emerald-600" /> <h4 className="font-medium">השוואה לפי סכום צבור</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Bar chart /} <defs> <linearGradient id="accBarGradientProvident" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stopColor="#10b981" /> <stop offset="100%" stopColor="#34d399" /> </linearGradient> </defs> {/ Y-axis /} <line x1="40" y1="40" x2="40" y2="160" stroke="#94a3b8" strokeWidth="1.5" /> {/ X-axis /} <line x1="40" y1="160" x2="180" y2="160" stroke="#94a3b8" strokeWidth="1.5" /> {/ Bars /} <rect x="50" y="80" width="20" height="80" rx="2" fill="#e5e7eb" /> <rect x="80" y="95" width="20" height="65" rx="2" fill="#e5e7eb" /> <rect x="110" y="70" width="20" height="90" rx="2" fill="url(#accBarGradientProvident)" stroke="#10b981" strokeWidth="2" /> <rect x="140" y="105" width="20" height="55" rx="2" fill="#e5e7eb" /> {/ Only label the user's category /} <text x="120" y="175" textAnchor="middle" fontSize="10" fill="#10b981" fontWeight="bold"> 250K-500K </text> </svg> </div> <div className="text-center text-sm text-gray-500 mt-2"> <span className="font-medium text-emerald-600">הקטגוריה שלך:</span> דמי הניהול הממוצעים בקטגוריית הסכום הצבור שלך הם 0.7% </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/pension-form/comparison-results/study-comparison-charts.tsx" isQuickEdit="true" import { Calendar, Briefcase, Wallet } from "lucide-react" import type { FormData } from "../pension-form-modal" import { getOccupationName } from "./utils" interface StudyComparisonChartsProps { formData: FormData } export function StudyComparisonCharts({ formData }: StudyComparisonChartsProps) { const birthYear = new Date(formData.birthDate).getFullYear() const currentYear = new Date().getFullYear() const age = currentYear - birthYear return ( <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8"> {/ Comparison by Age - Donut Chart with new color palette /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Calendar className="h-5 w-5 text-cyan-600" /> <h4 className="font-medium">השוואה לפי גיל</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Donut chart with new color palette /} <defs> <linearGradient id="donutGradientStudy" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#06b6d4" /> <stop offset="50%" stopColor="#0ea5e9" /> <stop offset="100%" stopColor="#3b82f6" /> </linearGradient> </defs> {/ Background circle /} <circle cx="100" cy="100" r="80" fill="none" stroke="#e5e7eb" strokeWidth="20" /> {/ Data arc - 50% worse than average /} <circle cx="100" cy="100" r="80" fill="none" stroke="url(#donutGradientStudy)" strokeWidth="20" strokeDasharray="502.4 502.4" strokeDashoffset="251.2" transform="rotate(-90 100 100)" /> {/ Marker for user position /} <circle cx="100" cy="20" r="6" fill="#0284c7" /> {/ Center text /} <text x="100" y="95" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#0284c7"> 50% </text> <text x="100" y="115" textAnchor="middle" fontSize="12" fill="#6b7280"> גבוה מהממוצע </text> </svg> </div> <div className="text-center text-sm text-gray-500 mt-2">דמי הניהול שלך גבוהים ב-50% מהממוצע לגילך</div> </div> {/ Redesigned Comparison by Occupation - Modern Gauge Chart /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Briefcase className="h-5 w-5 text-indigo-600" /> <h4 className="font-medium">השוואה לפי תחום עיסוק</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Modern Gauge Chart /} <defs> <linearGradient id="sectorGradientStudy" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#4f46e5" /> <stop offset="100%" stopColor="#818cf8" /> </linearGradient> <filter id="glowStudy" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur stdDeviation="3" result="blur" /> <feComposite in="SourceGraphic" in2="blur" operator="over" /> </filter> </defs> {/ Sector name /} <text x="100" y="50" textAnchor="middle" fontSize="16" fontWeight="bold" fill="#4f46e5" filter="url(#glowStudy)" > {getOccupationName(formData.workField) || "הייטק"} </text> {/ Gauge background /} <path d="M 30,140 A 70,70 0 0,1 170,140" fill="none" stroke="#e5e7eb" strokeWidth="10" strokeLinecap="round" /> {/ Gauge fill - 35% worse than average /} <path d="M 30,140 A 70,70 0 0,1 85,80" fill="none" stroke="url(#sectorGradientStudy)" strokeWidth="10" strokeLinecap="round" /> {/ Gauge needle /} <line x1="100" y1="140" x2="85" y2="90" stroke="#4f46e5" strokeWidth="3" strokeLinecap="round" /> <circle cx="100" cy="140" r="5" fill="#4f46e5" /> {/ Percentage /} <text x="100" y="170" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#4f46e5"> 35% </text> <text x="100" y="185" textAnchor="middle" fontSize="12" fill="#6b7280"> גבוה מהממוצע בתחום </text> </svg> </div> </div> {/ New Chart: Comparison by Accumulated Amount - Bar Chart /} <div className="bg-white p-4 rounded-lg border shadow-sm"> <div className="flex items-center gap-2 mb-3"> <Wallet className="h-5 w-5 text-emerald-600" /> <h4 className="font-medium">השוואה לפי סכום צבור</h4> </div> <div className="relative h-48 w-full"> <svg viewBox="0 0 200 200" className="h-full w-full mx-auto"> {/ Bar chart /} <defs> <linearGradient id="accBarGradientStudy" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stopColor="#10b981" /> <stop offset="100%" stopColor="#34d399" /> </linearGradient> </defs> {/ Y-axis /} <line x1="40" y1="40" x2="40" y2="160" stroke="#94a3b8" strokeWidth="1.5" /> {/ X-axis /} <line x1="40" y1="160" x2="180" y2="160" stroke="#94a3b8" strokeWidth="1.5" /> {/ Bars /} <rect x="50" y="85" width="20" height="75" rx="2" fill="#e5e7eb" /> <rect x="80" y="100" width="20" height="60" rx="2" fill="#e5e7eb" /> <rect x="110" y="75" width="20" height="85" rx="2" fill="url(#accBarGradientStudy)" stroke="#10b981" strokeWidth="2" /> <rect x="140" y="110" width="20" height="50" rx="2" fill="#e5e7eb" /> {/ Only label the user's category /} <text x="120" y="175" textAnchor="middle" fontSize="10" fill="#10b981" fontWeight="bold"> 250K-500K </text> </svg> </div> <div className="text-center text-sm text-gray-500 mt-2"> <span className="font-medium text-emerald-600">הקטגוריה שלך:</span> דמי הניהול הממוצעים בקטגוריית הסכום הצבור שלך הם 0.6% </div> </div> </div> ) } [V0_FILE]typescript:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export const formatDate = (dateString: string | undefined | null) => { if (!dateString) { return "לא צוין" } try { const date = new Date(dateString) // Check if date is valid if (isNaN(date.getTime())) { return "תאריך לא תקין" } return new Intl.DateTimeFormat("he-IL").format(date) } catch (error) { console.error("Error formatting date:", error) return "תאריך לא תקין" } } // Formats a number into a localized currency string (default: Israeli Shekel) export const formatCurrency = (amount: number, locale = "he-IL", currency = "ILS", fractionDigits = 0) => { return new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits, }).format(amount) } [V0_FILE]typescriptreact:file="components/dashboard/calculator-icon.tsx" "use client" import { Calculator } from "lucide-react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface CalculatorIconProps { offer: any offerType: string onCalculateOffer: (offer: any, offerType: string) => void } export function CalculatorIcon({ offer, offerType, onCalculateOffer }: CalculatorIconProps) { const handleClick = () => { onCalculateOffer(offer, offerType) } return ( <TooltipProvider> <Tooltip> <TooltipTrigger asChild> <button onClick={handleClick} className="p-1.5 rounded-full hover:bg-gray-100 transition-colors" aria-label="חשב את ההצעה" > <Calculator className="w-4 h-4 text-gray-600 hover:text-blue-600" /> </button> </TooltipTrigger> <TooltipContent> <p>חשב את ההצעה</p> </TooltipContent> </Tooltip> </TooltipProvider> ) } [V0_FILE]typescript:file="hooks/use-dashboard-handlers.ts" "use client" // Extracted event handlers from dashboard page.tsx import { useEffect } from "react" import { useRouter } from "next/navigation" import { demoUser } from "@/lib/auth" import { providentFundOffers, pensionFundOffers } from "@/lib/mock-data" import { enhanceOffersWithAgentInfo } from "@/lib/dashboard-utils" export const useDashboardHandlers = (state: any) => { const router = useRouter() const { activeOfferType, setActiveOverviewType, selectedOffers, confirmedOffers, setSelectedOffers, setSelectedOffer, setContactOption, setContactMethod, setSuccessMessage, setShowSelectionMessage, setConfirmedOffers, setDeclineAllReason, setShowDeclineAllOptions, setFilters, setShowFilters, setOpenDropdown, setSelectedOptions, setShowDeclineOptions, setDeclineReason, agentInfoRef, offerSelectionRef, setSelectedAgent, disputes, setDisputes, } = state // Enhanced offers with agent info const enhancedOffers = enhanceOffersWithAgentInfo(demoUser.offers) // Update active overview type when offer type changes useEffect(() => { setActiveOverviewType(activeOfferType) }, [activeOfferType, setActiveOverviewType]) // Close dropdowns when clicking outside useEffect(() => { const handleClickOutside = (event: any) => { if ( agentInfoRef.current && !agentInfoRef.current.contains(event.target) && !event.target.closest(".agent-info-trigger") ) { setSelectedAgent(null) } if ( offerSelectionRef.current && !offerSelectionRef.current.contains(event.target) && !event.target.closest(".offer-selection-trigger") ) { setSelectedOffer(null) setContactOption("") setContactMethod("") setSuccessMessage("") } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [setSelectedAgent, setSelectedOffer, setContactOption, setContactMethod, setSuccessMessage]) const handleLogout = () => { router.push("/login") } const getCurrentOffers = () => { switch (activeOfferType) { case "pension": return enhancedOffers.slice(0, 3) case "provident": return providentFundOffers.slice(0, 3) case "pension-fund": return pensionFundOffers.slice(0, 3) default: return enhancedOffers.slice(0, 3) } } const onFilterChange = (category: string, value: any) => { if (category === "companies" || category === "regions" || category === "specialties") { setFilters((prev: any) => { const updated = { ...prev } if (updated[category].includes(value)) { updated[category] = updated[category].filter((item: any) => item !== value) } else { updated[category] = [...updated[category], value] } return updated }) } else { setFilters((prev: any) => ({ ...prev, [category]: value, })) } } const onApplyFilters = () => { setShowFilters(false) } const onToggleDropdown = (dropdown: string | null) => { setOpenDropdown(state.openDropdown === dropdown ? null : dropdown) } const onCheckboxChange = (category: string, value: string) => { setSelectedOptions((prev: any) => { // Ensure the category exists and is an array const currentSelections = Array.isArray(prev[category]) ? [...prev[category]] : [] if (value === "all") { return { ...prev, [category]: currentSelections.includes("all") ? [] : ["all"], } } else { let newSelections = currentSelections.filter((item: any) => item !== "all") if (newSelections.includes(value)) { newSelections = newSelections.filter((item: any) => item !== value) } else { newSelections.push(value) } return { ...prev, [category]: newSelections, } } }) } const onSelectOffer = (offer: any) => { if (confirmedOffers[activeOfferType]) { setShowSelectionMessage(true) setTimeout(() => setShowSelectionMessage(false), 3000) return } if (selectedOffers[activeOfferType] && selectedOffers[activeOfferType].id !== offer.id) { setSelectedOffers((prev: any) => ({ ...prev, [activeOfferType]: offer, })) } else { setSelectedOffers((prev: any) => ({ ...prev, [activeOfferType]: offer, })) } setSelectedOffer(offer) setContactOption("") setContactMethod("") setSuccessMessage("") } const onContactOptionChange = (option: string) => { setContactOption(option) setContactMethod("") } const onContactMethodChange = (method: string) => { setContactMethod(method) } const onSubmitContactRequest = () => { if (state.selectedOffer) { setConfirmedOffers((prev: any) => ({ ...prev, [activeOfferType]: state.selectedOffer, })) if (state.contactOption === "direct") { setSuccessMessage("פרטי הקשר של הסוכן") } else if (state.contactOption === "agent-contacts") { setSuccessMessage( `בקשת יצירת קשר נשלחה בהצלחה. הסוכן יצור איתך קשר ב${state.contactMethod === "phone" ? "טלפון" : "אימייל"}`, ) } } } const onDeclineAll = () => { if (state.declineAllReason) { console.log("All offers declined:", state.declineAllReason) setDeclineAllReason("") setShowDeclineAllOptions(false) onResetFilters() } } const onDeclineOffer = () => { setShowDeclineOptions(false) setDeclineReason("") } const onResetFilters = () => { setFilters({ companies: [], regions: [], specialties: [], investmentTracks: [], agentRating: { min: 4, max: 5 }, lowerAccumulationFee: false, lowerDepositFee: false, higherSavings: false, }) setShowFilters(true) } const onOpenDispute = (disputeData: any) => { const newDispute = { id: `dispute-${Date.now()}`, clientId: demoUser.id, ...disputeData, } setDisputes((prev: any) => [...prev, newDispute]) // In a real app, this would be an API call to save the dispute console.log("New dispute created:", newDispute) // Simulate admin notification console.log("Admin notification: New dispute submitted by", demoUser.name) } const onCalculateOffer = (offer: any, offerType: string) => { // Map offer type to calculator tab const tabMapping: Record<string, string> = { pension: "pension", provident: "provident", "pension-fund": "study", // pension-fund maps to study tab } const calculatorTab = tabMapping[offerType] || "pension" // Store the offer data for the calculator to use // This would typically be stored in a global state or passed through props if (typeof window !== "undefined") { ;(window as any).calculatorOfferData = { tab: calculatorTab, alternativeFeeAccumulated: offer.managementFeeAccumulated, alternativeFeeDeposit: offer.managementFeeDeposit, } } } return { handleLogout, getCurrentOffers, onFilterChange, onApplyFilters, onToggleDropdown, onCheckboxChange, onSelectOffer, onContactOptionChange, onContactMethodChange, onSubmitContactRequest, onDeclineAll, onDeclineOffer, onResetFilters, onOpenDispute, onCalculateOffer, } } [V0_FILE]typescript:file="components/pension-form/pension-form-modal/types.ts" // Type definitions for pension form modal export type FormData = { // Product selection selectedProducts: string[] termsAccepted: boolean marketingConsent: boolean // Block 1: Pension Details pensionCompany: string pensionBalance: string managementFeeAccumulated: number managementFeeDeposit: number investmentTrack: string // Provident Fund Details providentCompany: string providentBalance: string providentFeeAccumulated: number providentFeeDeposit: number providentInvestmentTrack: string // Study Fund Details studyCompany: string studyBalance: string studyFeeAccumulated: number studyFeeDeposit: number studyInvestmentTrack: string // Employment Info Details (new) employmentStatus: string sector: string field: string // Employment Details (original) workField: string monthlySalary: string monthlyContribution: string // Personal Details fullName: string email: string phone: string birthDate: string gender: string } [V0_FILE]typescript:file="components/pension-form/pension-form-modal/constants.ts" // Constants for pension form modal import type { FormData } from "./types" export const INITIAL_FORM_DATA: FormData = { // Product selection selectedProducts: [], termsAccepted: false, marketingConsent: false, // Block 1: Pension Details pensionCompany: "", pensionBalance: "", managementFeeAccumulated: 0.5, managementFeeDeposit: 2, investmentTrack: "", // Provident Fund Details providentCompany: "", providentBalance: "", providentFeeAccumulated: 0.5, providentFeeDeposit: 0, providentInvestmentTrack: "", // Study Fund Details studyCompany: "", studyBalance: "", studyFeeAccumulated: 0.6, studyFeeDeposit: 0, studyInvestmentTrack: "", // Employment Info Details (new) employmentStatus: "", sector: "", field: "", // Employment Details (original) workField: "", monthlySalary: "", monthlyContribution: "", // Personal Details fullName: "", email: "", phone: "", birthDate: "", gender: "", } [V0_FILE]typescript:file="components/pension-form/pension-form-modal/use-pension-form.ts" "use client" // Custom hook for pension form state management import { useState, useEffect } from "react" import type { FormData } from "./types" import { INITIAL_FORM_DATA } from "./constants" import { calculateTotalSteps } from "./step-utils" export function usePensionForm() { const [currentStep, setCurrentStep] = useState(1) const [progress, setProgress] = useState(0) const [formData, setFormData] = useState<FormData>(INITIAL_FORM_DATA) const totalSteps = calculateTotalSteps(formData) useEffect(() => { // Calculate progress based on current step and total steps setProgress((currentStep / totalSteps) 100) }, [currentStep, totalSteps]) const handleNext = () => { if (currentStep < totalSteps) { setCurrentStep(currentStep + 1) window.scrollTo(0, 0) } } const handleBack = () => { if (currentStep > 1) { setCurrentStep(currentStep - 1) window.scrollTo(0, 0) } } const handleUpdateFormData = (data: Partial<FormData>) => { setFormData((prev) => ({ ...prev, ...data })) } const handleSubmit = async () => { // Here you would typically send the data to your backend console.log("Form submitted:", formData) return formData } const resetForm = () => { setCurrentStep(1) setProgress(0) setFormData(INITIAL_FORM_DATA) } return { currentStep, progress, formData, totalSteps, handleNext, handleBack, handleUpdateFormData, handleSubmit, resetForm, } } [V0_FILE]typescriptreact:file="components/pension-form/pension-form-modal/step-manager.tsx" isQuickEdit="true" "use client" // Step management logic for pension form modal import { ProductSelectionForm } from "../product-selection-form" import { PensionDetailsForm } from "../pension-details-form" import { ProvidentFundForm } from "../provident-fund-form" import { StudyFundForm } from "../study-fund-form" import { EmploymentInfoForm } from "../employment-info-form" import { PersonalDetailsForm } from "../personal-details-form" import { ComparisonResults } from "../comparison-results" import { EmailRegistration } from "../email-registration" import type { FormData } from "./types" interface StepManagerProps { currentStep: number formData: FormData handleUpdateFormData: (data: Partial<FormData>) => void handleNext: () => void handleBack: () => void handleSubmit: () => Promise<void> } export function StepManager({ currentStep, formData, handleUpdateFormData, handleNext, handleBack, handleSubmit, }: StepManagerProps) { // First step is always product selection if (currentStep === 1) { return <ProductSelectionForm formData={formData} updateFormData={handleUpdateFormData} onNext={handleNext} /> } // Calculate which step we're on based on selected products let stepCounter = 2 // Start after product selection // Pension step if (formData.selectedProducts.includes("pension")) { if (currentStep === stepCounter) { return ( <PensionDetailsForm formData={formData} updateFormData={handleUpdateFormData} onNext={handleNext} onBack={handleBack} /> ) } stepCounter++ } // Provident fund step if (formData.selectedProducts.includes("provident")) { if (currentStep === stepCounter) { return ( <ProvidentFundForm formData={formData} updateFormData={handleUpdateFormData} onNext={handleNext} onBack={handleBack} /> ) } stepCounter++ } // Study fund step if (formData.selectedProducts.includes("study")) { if (currentStep === stepCounter) { return ( <StudyFundForm formData={formData} updateFormData={handleUpdateFormData} onNext={handleNext} onBack={handleBack} /> ) } stepCounter++ } // Employment info step (new) if (currentStep === stepCounter) { return ( <EmploymentInfoForm formData={formData} updateFormData={handleUpdateFormData} onNext={handleNext} onBack={handleBack} /> ) } stepCounter++ // Comparison results step if (currentStep === stepCounter) { return <ComparisonResults formData={formData} onNext={handleNext} onBack={handleBack} /> } stepCounter++ // Personal details step if (currentStep === stepCounter) { return ( <PersonalDetailsForm formData={formData} updateFormData={handleUpdateFormData} onNext={handleNext} onBack={handleBack} /> ) } stepCounter++ // Final registration step if (currentStep === stepCounter) { return ( <EmailRegistration formData={formData} onSubmit={handleSubmit} onBack={handleBack} updateFormData={handleUpdateFormData} /> ) } // Default fallback return null } [V0_FILE]typescriptreact:file="components/pension-form/pension-form-modal.tsx" "use client" import { Dialog, DialogContent } from "@/components/ui/dialog" import { X } from "lucide-react" import { StepNavigation } from "./pension-form-modal/step-navigation" import { StepManager } from "./pension-form-modal/step-manager" import { getStepName } from "./pension-form-modal/step-utils" import { usePensionForm } from "./pension-form-modal/use-pension-form" interface PensionFormModalProps { isOpen: boolean onClose: () => void } export function PensionFormModal({ isOpen, onClose }: PensionFormModalProps) { const { currentStep, progress, formData, totalSteps, handleNext, handleBack, handleUpdateFormData, handleSubmit, resetForm, } = usePensionForm() const stepName = getStepName(currentStep, formData) const handleFormSubmit = async () => { await handleSubmit() onClose() resetForm() } return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="sm:max-w-[600px] md:max-w-[700px] p-0 bg-white max-h-[90vh] overflow-hidden"> <div className="flex flex-col h-full"> {/* Close button /} <button onClick={onClose} className="absolute top-4 right-4 z-10 rounded-full p-1 bg-white/90 text-gray-500 hover:bg-gray-100" > <X className="h-5 w-5" /> </button> {/ Progress bar - sticky header /} <StepNavigation currentStep={currentStep} totalSteps={totalSteps} stepName={stepName} progress={progress} /> {/ Form content - scrollable area /} <div className="flex-1 overflow-y-auto max-h-[calc(90vh-80px)]"> <div className="p-6"> <StepManager currentStep={currentStep} formData={formData} handleUpdateFormData={handleUpdateFormData} handleNext={handleNext} handleBack={handleBack} handleSubmit={handleFormSubmit} /> </div> </div> </div> </DialogContent> </Dialog> ) } [V0_FILE]typescript:file="components/admin-dashboard/agent-verification/mock-data.ts" import type { Agent } from "./types" export const mockAgents: Agent[] = [ { agentId: "agent-1", fullName: "יוסי כהן", identificationNumber: 123456789, phone: "050-1234567", email: "yossi.cohen@example.com", licenseNumber: "LIC-001", licenseType: "סוכן ביטוח", licenseIssuedAt: new Date("2020-01-15"), licenseDocumentUrl: "https://example.com/license1.pdf", agencyName: "כהן ביטוח", serviceArea: "תל אביב", yearsExperience: 5, clientNumber: "CLI-001", languages: ["עברית", "אנגלית"], services: ["pension", "providentFund"], status: "pending", rating: 0, reviewsCount: 0, allowMarketing: true, createdAt: new Date("2024-01-15"), lastLogin: new Date("2024-01-15"), licenseVerified: false, }, { agentId: "agent-2", fullName: "שרה לוי", identificationNumber: 987654321, phone: "052-9876543", email: "sarah.levy@example.com", licenseNumber: "LIC-002", licenseType: "סוכן ביטוח", licenseIssuedAt: new Date("2019-03-20"), licenseDocumentUrl: "https://example.com/license2.pdf", agencyName: "לוי פיננסים", serviceArea: "ירושלים", yearsExperience: 8, clientNumber: "CLI-002", languages: ["עברית", "רוסית"], services: ["pension", "studyFund"], status: "approved", rating: 0, reviewsCount: 0, allowMarketing: false, createdAt: new Date("2024-01-10"), lastLogin: new Date("2024-01-20"), licenseVerified: true, }, { agentId: "agent-3", fullName: "דוד אברהם", identificationNumber: 456789123, phone: "054-4567891", email: "david.abraham@example.com", licenseNumber: "LIC-003", licenseType: "סוכן ביטוח", licenseIssuedAt: new Date("2021-06-10"), licenseDocumentUrl: "https://example.com/license3.pdf", agencyName: "אברהם ושותפים", serviceArea: "חיפה", yearsExperience: 3, clientNumber: "CLI-003", languages: ["עברית"], services: ["providentFund"], status: "rejected", rating: 0, reviewsCount: 0, allowMarketing: true, createdAt: new Date("2024-01-20"), lastLogin: new Date("2024-01-20"), licenseVerified: false, }, ] [V0_FILE]typescript:file="components/admin-dashboard/agent-verification/use-agent-filters.ts" "use client" import { useMemo } from "react" import type { Agent } from "./types" interface UseAgentFiltersProps { agents: Agent[] searchTerm: string statusFilter: "all" | "pending" | "approved" | "rejected" dateFilter: "all" | "today" | "week" | "month" licenseVerifiedFilter: "all" | "verified" | "unverified" sortField: string sortDirection: "asc" | "desc" } export function useAgentFilters({ agents, searchTerm, statusFilter, dateFilter, licenseVerifiedFilter, sortField, sortDirection, }: UseAgentFiltersProps) { return useMemo(() => { const filtered = agents.filter((agent) => { // --- free-text search --- const matchesSearch = agent.fullName.toLowerCase().includes(searchTerm.toLowerCase()) || agent.email.toLowerCase().includes(searchTerm.toLowerCase()) || agent.licenseNumber.toLowerCase().includes(searchTerm.toLowerCase()) // --- status filter --- const matchesStatus = statusFilter === "all" || agent.status === statusFilter // --- licence verified filter (unused in UI for now) --- const matchesLicenseVerified = licenseVerifiedFilter === "all" || (licenseVerifiedFilter === "verified" && agent.licenseVerified) || (licenseVerifiedFilter === "unverified" && !agent.licenseVerified) // --- date filter (createdAt) --- const matchesDate = (() => { if (dateFilter === "all") return true const created = new Date(agent.createdAt) const today = new Date() switch (dateFilter) { case "today": return ( created.getFullYear() === today.getFullYear() && created.getMonth() === today.getMonth() && created.getDate() === today.getDate() ) case "week": return today.getTime() - created.getTime() <= 7 24 * 60 * 60 * 1000 case "month": return today.getTime() - created.getTime() <= 30 * 24 * 60 * 60 * 1000 default: return true } })() return matchesSearch && matchesStatus && matchesLicenseVerified && matchesDate }) filtered.sort((a, b) => { let aValue: any = a[sortField as keyof Agent] let bValue: any = b[sortField as keyof Agent] if (sortField === "createdAt" || sortField === "licenseIssuedAt") { aValue = new Date(aValue).getTime() bValue = new Date(bValue).getTime() } if (typeof aValue === "string") { aValue = aValue.toLowerCase() bValue = bValue.toLowerCase() } if (sortDirection === "asc") { return aValue < bValue ? -1 : aValue > bValue ? 1 : 0 } else { return aValue > bValue ? -1 : aValue < bValue ? 1 : 0 } }) return filtered }, [agents, searchTerm, statusFilter, dateFilter, licenseVerifiedFilter, sortField, sortDirection]) } [V0_FILE]typescript:file="components/admin-dashboard/agent-verification/use-agent-actions.ts" "use client" import type React from "react" import { useCallback } from "react" import type { Agent } from "./types" interface UseAgentActionsProps { agents: Agent[] setAgents: React.Dispatch<React.SetStateAction<Agent[]>> } export function useAgentActions({ agents, setAgents }: UseAgentActionsProps) { const handleApprove = useCallback( (agent: Agent) => { // Only allow approval if license is verified if (agent.licenseVerified) { setAgents((prev) => prev.map((a) => (a.agentId === agent.agentId ? { ...a, status: "approved" as const } : a))) } }, [setAgents], ) const handleReject = useCallback( (agent: Agent) => { setAgents((prev) => prev.map((a) => (a.agentId === agent.agentId ? { ...a, status: "rejected" as const } : a))) }, [setAgents], ) const handleRevert = useCallback( (agent: Agent) => { setAgents((prev) => prev.map((a) => (a.agentId === agent.agentId ? { ...a, status: "pending" as const } : a))) }, [setAgents], ) const handleLicenseVerificationChange = useCallback( (agent: Agent, verified: boolean) => { setAgents((prev) => prev.map((a) => (a.agentId === agent.agentId ? { ...a, licenseVerified: verified } : a))) }, [setAgents], ) const handleEmailSend = useCallback(async (subject: string, message: string, emailAgent: Agent | null) => { // Simulate email sending console.log("Sending email:", { agent: emailAgent, subject, message }) // Here you would integrate with your email service }, []) return { handleApprove, handleReject, handleRevert, handleLicenseVerificationChange, handleEmailSend, } } [V0_FILE]typescriptreact:file="components/admin-dashboard/agent-verification/index.tsx" "use client" import { useState } from "react" import { AgentTable } from "./agent-table" import { AgentDetailsModal } from "./agent-details-modal" import { EmailModal } from "./email-modal" import { Filters } from "./filters" import { mockAgents } from "./mock-data" import { useAgentFilters } from "./use-agent-filters" import { useAgentActions } from "./use-agent-actions" import type { Agent, SortField } from "./types" // Rename to match the expected import export function AgentVerificationPanel() { const [agents, setAgents] = useState<Agent[]>(mockAgents) const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null) const [emailAgent, setEmailAgent] = useState<Agent | null>(null) const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false) const [isEmailModalOpen, setIsEmailModalOpen] = useState(false) const [sortField, setSortField] = useState<string>("createdAt") const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc") // individual filter states (matches Filters component API) const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState<"all" | "pending" | "approved" | "rejected">("all") const [dateFilter, setDateFilter] = useState<"all" | "today" | "week" | "month">("all") // optional extra filter still used internally (no UI control yet) const [licenseVerifiedFilter, setLicenseVerifiedFilter] = useState<"all" | "verified" | "unverified">("all") const filteredAndSortedAgents = useAgentFilters({ agents, searchTerm, statusFilter, dateFilter, licenseVerifiedFilter, sortField, sortDirection, }) const { handleApprove, handleReject, handleRevert, handleLicenseVerificationChange, handleEmailSend } = useAgentActions({ agents, setAgents }) const handleSort = (field: SortField) => { if (sortField === field) { setSortDirection(sortDirection === "asc" ? "desc" : "asc") } else { setSortField(field) setSortDirection("asc") } } const handleViewDetails = (agent: Agent) => { setSelectedAgent(agent) setIsDetailsModalOpen(true) } const handleSendEmail = (agent: Agent) => { setEmailAgent(agent) setIsEmailModalOpen(true) } const handleEmailSendWrapper = async (subject: string, message: string) => { await handleEmailSend(subject, message, emailAgent) } return ( <div className="space-y-6"> <div> <h2 className="text-2xl font-bold">מרכז אימות סוכנים</h2> <p className="text-muted-foreground">ניהול ואימות בקשות הצטרפות של סוכנים</p> </div> <Filters searchTerm={searchTerm} statusFilter={statusFilter} dateFilter={dateFilter} onSearchChange={setSearchTerm} onStatusFilterChange={setStatusFilter} onDateFilterChange={setDateFilter} onClearFilters={() => { setSearchTerm("") setStatusFilter("all") setDateFilter("all") }} /> <AgentTable agents={filteredAndSortedAgents} sortField={sortField} sortDirection={sortDirection} onSort={handleSort} onViewDetails={handleViewDetails} onApprove={handleApprove} onReject={handleReject} onRevert={handleRevert} onSendEmail={handleSendEmail} onLicenseVerificationChange={handleLicenseVerificationChange} /> <AgentDetailsModal agent={selectedAgent} isOpen={isDetailsModalOpen} onClose={() => { setIsDetailsModalOpen(false) setSelectedAgent(null) }} /> <EmailModal agent={emailAgent} isOpen={isEmailModalOpen} onClose={() => { setIsEmailModalOpen(false) setEmailAgent(null) }} onSend={handleEmailSendWrapper} /> </div> ) } // If you still want to keep the old name available elsewhere, re-export it: export { AgentVerificationPanel as AgentVerification } [V0_FILE]typescriptreact:file="components/agent-registration-form/success-message.tsx" "use client" import { CheckCircle2 } from "lucide-react" export function SuccessMessage() { return ( <div className="flex flex-col items-center justify-center py-10 text-center"> <div className="bg-green-50 rounded-full p-4 mb-4"> <CheckCircle2 className="h-16 w-16 text-green-500" /> </div> <h3 className="text-xl font-bold mb-2">תודה על ההרשמה!</h3> <p className="text-muted-foreground mb-6">הצוות שלנו יבדוק את הבקשה שלך ויעדכן אותך תוך 2-3 ימי עסקים.</p> </div> ) } [V0_FILE]typescript:file="components/dashboard/calculator-content/types.ts" export interface ProductData { currentFeeAccumulated: number currentFeeDeposit: number alternativeFeeAccumulated: number alternativeFeeDeposit: number monthlyDeposit: number currentAmount: number } export interface CalculatorContentProps { currentFee: number setCurrentFee: (fee: number) => void depositFee: number setDepositFee: (fee: number) => void improvedFee: number setImprovedFee: (fee: number) => void improvedDepositFee: number setImprovedDepositFee: (fee: number) => void monthlyDeposit: number setMonthlyDeposit: (deposit: number) => void years: number setYears: (years: number) => void calculateSavings: () => { current: number; improved: number; savings: number } formatCurrency: (amount: number) => string savingsTooltipVisible: boolean setSavingsTooltipVisible: (visible: boolean) => void randomizationTooltipVisible: boolean setRandomizationTooltipVisible: (visible: boolean) => void } export interface CalculationInputs { years: number expectedReturn: number } export interface ChartDataPoint { year: number current: number alternative: number } export interface CalculationScenarios { current: number alternative: number difference: number } [V0_FILE]typescript:file="components/dashboard/calculator-content/constants.ts" import type { ProductData } from "./types" export const DEFAULT_PRODUCT_DATA: Record<string, ProductData> = { pension: { currentFeeAccumulated: 1.2, currentFeeDeposit: 4.0, alternativeFeeAccumulated: 0.8, alternativeFeeDeposit: 2.5, monthlyDeposit: 2500, currentAmount: 150000, }, provident: { currentFeeAccumulated: 0.9, currentFeeDeposit: 3.5, alternativeFeeAccumulated: 0.6, alternativeFeeDeposit: 2.0, monthlyDeposit: 1500, currentAmount: 85000, }, study: { currentFeeAccumulated: 1.1, currentFeeDeposit: 4.5, alternativeFeeAccumulated: 0.7, alternativeFeeDeposit: 2.8, monthlyDeposit: 800, currentAmount: 25000, }, } export const DEFAULT_CALCULATION_INPUTS = { years: 20, expectedReturn: 4.0, } [V0_FILE]typescript:file="components/dashboard/calculator-content/utils.ts" import type { ProductData, CalculationInputs, CalculationScenarios, ChartDataPoint } from "./types" export const calculateScenarios = ( currentProduct: ProductData, calculationInputs: CalculationInputs, ): CalculationScenarios => { const { years, expectedReturn } = calculationInputs const monthlyReturn = expectedReturn / 100 / 12 const totalMonths = years * 12 // Current scenario calculation (including existing amount) const currentExistingGrowth = currentProduct.currentAmount * (1 + expectedReturn / 100) ** years * (1 - currentProduct.currentFeeAccumulated / 100) ** years const currentMonthlyAfterFees = currentProduct.monthlyDeposit * (1 - currentProduct.currentFeeDeposit / 100) const currentNewSavings = currentMonthlyAfterFees * (((1 + monthlyReturn) ** totalMonths - 1) / monthlyReturn) * (1 - currentProduct.currentFeeAccumulated / 100) ** years const currentTotal = currentExistingGrowth + currentNewSavings // Alternative scenario calculation (including existing amount) const altExistingGrowth = currentProduct.currentAmount * (1 + expectedReturn / 100) ** years * (1 - currentProduct.alternativeFeeAccumulated / 100) ** years const altMonthlyAfterFees = currentProduct.monthlyDeposit * (1 - currentProduct.alternativeFeeDeposit / 100) const altNewSavings = altMonthlyAfterFees * (((1 + monthlyReturn) ** totalMonths - 1) / monthlyReturn) * (1 - currentProduct.alternativeFeeAccumulated / 100) ** years const altTotal = altExistingGrowth + altNewSavings return { current: Math.max(0, currentTotal), alternative: Math.max(0, altTotal), difference: Math.max(0, altTotal) - Math.max(0, currentTotal), } } export const generateChartData = ( currentProduct: ProductData, calculationInputs: CalculationInputs, ): ChartDataPoint[] => { const points = [] const { expectedReturn } = calculationInputs const monthlyReturn = expectedReturn / 100 / 12 for (let year = 0; year <= calculationInputs.years; year += 2) { const months = year * 12 // Current scenario const currentExistingGrowth = currentProduct.currentAmount * (1 + expectedReturn / 100) ** year * (1 - currentProduct.currentFeeAccumulated / 100) ** year const currentMonthlyAfterFees = currentProduct.monthlyDeposit * (1 - currentProduct.currentFeeDeposit / 100) const currentNewSavings = months === 0 ? 0 : currentMonthlyAfterFees * (((1 + monthlyReturn) ** months - 1) / monthlyReturn) * (1 - currentProduct.currentFeeAccumulated / 100) ** year const currentValue = currentExistingGrowth + currentNewSavings // Alternative scenario const altExistingGrowth = currentProduct.currentAmount * (1 + expectedReturn / 100) ** year * (1 - currentProduct.alternativeFeeAccumulated / 100) ** year const altMonthlyAfterFees = currentProduct.monthlyDeposit * (1 - currentProduct.alternativeFeeDeposit / 100) const altNewSavings = months === 0 ? 0 : altMonthlyAfterFees * (((1 + monthlyReturn) ** months - 1) / monthlyReturn) * (1 - currentProduct.alternativeFeeAccumulated / 100) ** year const altValue = altExistingGrowth + altNewSavings points.push({ year, current: Math.max(0, currentValue), alternative: Math.max(0, altValue), }) } return points } export const getTabLabel = (tab: string): string => { switch (tab) { case "pension": return "פנסיה" case "provident": return "קרן השתלמות" case "study": return "קופות גמל" default: return "" } } [V0_FILE]typescriptreact:file="components/dashboard/calculator-content/comparison-chart.tsx" import type { ChartDataPoint } from "./types" interface ComparisonChartProps { chartData: ChartDataPoint[] formatCurrency: (amount: number) => string } export function ComparisonChart({ chartData, formatCurrency }: ComparisonChartProps) { const maxValue = Math.max(...chartData.map((d) => Math.max(d.current, d.alternative))) return ( <div className="h-64 w-full"> <svg viewBox="0 0 600 240" className="h-full w-full"> <defs> <linearGradient id="currentGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.2" /> <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.05" /> </linearGradient> <linearGradient id="alternativeGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stopColor="#10b981" stopOpacity="0.2" /> <stop offset="100%" stopColor="#10b981" stopOpacity="0.05" /> </linearGradient> </defs> {/* Grid lines /} {[0, 1, 2, 3, 4].map((i) => ( <line key={`grid-h-${i}`} x1="50" y1={30 + i 40} x2="550" y2={30 + i * 40} stroke="#e5e7eb" strokeWidth="1" /> ))} {/* Axes /} <line x1="50" y1="190" x2="550" y2="190" stroke="#6b7280" strokeWidth="1.5" /> <line x1="50" y1="30" x2="50" y2="190" stroke="#6b7280" strokeWidth="1.5" /> {/ Chart lines /} <path d={`M ${chartData .map((d, i) => `${50 + (i 500) / (chartData.length - 1)},${190 - (d.current / maxValue) * 160}`) .join(" L ")}`} fill="none" stroke="#3b82f6" strokeWidth="2.5" strokeLinecap="round" /> <path d={`M ${chartData .map((d, i) => `${50 + (i * 500) / (chartData.length - 1)},${190 - (d.alternative / maxValue) * 160}`) .join(" L ")}`} fill="none" stroke="#10b981" strokeWidth="2.5" strokeLinecap="round" /> {/* X-axis labels /} {chartData.map((d, i) => ( <text key={`x-label-${i}`} x={50 + (i 500) / (chartData.length - 1)} y="205" textAnchor="middle" fontSize="10" fill="#6b7280" > {d.year} </text> ))} {/* Y-axis labels /} {[0, 1, 2, 3, 4].map((i) => ( <text key={`y-label-${i}`} x="45" y={195 - i 40} textAnchor="end" fontSize="9" fill="#6b7280"> {formatCurrency((maxValue / 4) * i) .replace("₪", "") .replace(",", "")} K </text> ))} </svg> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/calculator-content/product-tabs.tsx" "use client" interface ProductTabsProps { activeTab: "pension" | "provident" | "study" setActiveTab: (tab: "pension" | "provident" | "study") => void } export function ProductTabs({ activeTab, setActiveTab }: ProductTabsProps) { return ( <div className="flex justify-center border-b mb-4"> <button className={`px-4 py-2 font-medium ${ activeTab === "pension" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveTab("pension")} > פנסיה </button> <button className={`px-4 py-2 font-medium ${ activeTab === "provident" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveTab("provident")} > קרן השתלמות </button> <button className={`px-4 py-2 font-medium ${ activeTab === "study" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveTab("study")} > קופות גמל </button> </div> ) } [V0_FILE]typescript:file="components/dashboard/offers-filter-modal/filter-preferences-step/types.ts" import type React from "react" export interface FilterData { companies: string[] investmentTracks: string[] managementFees: string[] specialties: string[] regions: string[] agentRatings: string[] agentLanguages: string[] } export interface FilterPreferencesStepProps { filterData: FilterData openDropdown: string | null onToggleDropdown: (dropdown: string) => void onCheckboxChange: (category: keyof FilterData, value: string) => void } export interface DropdownProps { label: string placeholder: string selectedCount: number isOpen: boolean onToggle: () => void children: React.ReactNode } export interface FilterSectionProps { title: string children: React.ReactNode } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step/dropdown.tsx" "use client" import { ChevronDown } from "lucide-react" import { Label } from "@/components/ui/label" import type { DropdownProps } from "./types" export function Dropdown({ label, placeholder, selectedCount, isOpen, onToggle, children }: DropdownProps) { return ( <div className="relative"> <Label className="text-xs font-medium mb-1 block">{label}</Label> <div className="w-full p-2 border rounded-md bg-white flex justify-between items-center cursor-pointer text-xs hover:border-blue-300 transition-colors" onClick={onToggle} > <div className="text-right"> {selectedCount === 0 ? ( <span className="text-gray-400">{placeholder}</span> ) : ( <span className="text-blue-600">{selectedCount} נבחרו</span> )} </div> <ChevronDown className={`h-3 w-3 transition-transform text-gray-400 ${isOpen ? "transform rotate-180" : ""}`} /> </div> {isOpen && ( <div className="absolute z-20 right-0 mt-1 w-full bg-white border rounded-md shadow-lg max-h-40 overflow-y-auto"> <div className="p-1">{children}</div> </div> )} </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step/filter-section.tsx" "use client" import type { FilterSectionProps } from "./types" export function FilterSection({ title, children }: FilterSectionProps) { return ( <div className="space-y-3"> <h3 className="text-base font-semibold text-gray-800 border-b pb-1">{title}</h3> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">{children}</div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step/management-fees-dropdown.tsx" "use client" import { Dropdown } from "./dropdown" import type { FilterData } from "./types" interface ManagementFeesDropdownProps { filterData: FilterData isOpen: boolean onToggle: () => void onCheckboxChange: (category: keyof FilterData, value: string) => void } export function ManagementFeesDropdown({ filterData, isOpen, onToggle, onCheckboxChange, }: ManagementFeesDropdownProps) { const getDisplayText = () => { if (filterData.managementFees.length === 0) return 0 if (filterData.managementFees.includes("all")) return "כל האפשרויות" return filterData.managementFees.length } const displayText = getDisplayText() const selectedCount = typeof displayText === "string" ? 0 : displayText return ( <Dropdown label="דמי ניהול מועדפים" placeholder="בחר העדפות" selectedCount={selectedCount} isOpen={isOpen} onToggle={onToggle} > <label className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.managementFees.includes("all")} onChange={() => onCheckboxChange("managementFees", "all")} /> <span className="font-medium">כל האפשרויות</span> </label> <label className="flex items-start p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600 mt-0.5" checked={filterData.managementFees.includes("lowerAccumulation")} onChange={() => onCheckboxChange("managementFees", "lowerAccumulation")} /> <span className="leading-tight">דמי ניהול נמוכים מהצבירה</span> </label> <label className="flex items-start p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600 mt-0.5" checked={filterData.managementFees.includes("lowerDeposit")} onChange={() => onCheckboxChange("managementFees", "lowerDeposit")} /> <span className="leading-tight">דמי ניהול נמוכים מההפקדה</span> </label> </Dropdown> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step/companies-dropdown.tsx" "use client" import { Dropdown } from "./dropdown" import type { FilterData } from "./types" import { COMPANIES } from "@/constants/filter-options" interface CompaniesDropdownProps { filterData: FilterData isOpen: boolean onToggle: () => void onCheckboxChange: (category: keyof FilterData, value: string) => void } export function CompaniesDropdown({ filterData, isOpen, onToggle, onCheckboxChange }: CompaniesDropdownProps) { const getDisplayText = () => { if (filterData.companies.length === 0) return 0 if (filterData.companies.includes("all")) return "כל החברות" return filterData.companies.length } const displayText = getDisplayText() const selectedCount = typeof displayText === "string" ? 0 : displayText return ( <Dropdown label="חברה מנהלת מועדפת" placeholder="בחר חברות" selectedCount={selectedCount} isOpen={isOpen} onToggle={onToggle} > <label className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.companies.includes("all")} onChange={() => onCheckboxChange("companies", "all")} /> <span className="font-medium">כל החברות</span> </label> {COMPANIES.map((company) => ( <label key={company} className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.companies.includes(company)} onChange={() => onCheckboxChange("companies", company)} /> <span>{company}</span> </label> ))} </Dropdown> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step/investment-tracks-dropdown.tsx" "use client" import { Dropdown } from "./dropdown" import type { FilterData } from "./types" import { INVESTMENT_TRACKS } from "@/constants/filter-options" interface InvestmentTracksDropdownProps { filterData: FilterData isOpen: boolean onToggle: () => void onCheckboxChange: (category: keyof FilterData, value: string) => void } export function InvestmentTracksDropdown({ filterData, isOpen, onToggle, onCheckboxChange, }: InvestmentTracksDropdownProps) { const getDisplayText = () => { if (filterData.investmentTracks.length === 0) return 0 if (filterData.investmentTracks.includes("all")) return "כל המסלולים" return filterData.investmentTracks.length } const displayText = getDisplayText() const selectedCount = typeof displayText === "string" ? 0 : displayText return ( <Dropdown label="מסלול השקעה מועדף" placeholder="בחר מסלולים" selectedCount={selectedCount} isOpen={isOpen} onToggle={onToggle} > <label className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.investmentTracks.includes("all")} onChange={() => onCheckboxChange("investmentTracks", "all")} /> <span className="font-medium">כל המסלולים</span> </label> {INVESTMENT_TRACKS.map((track) => ( <label key={track} className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.investmentTracks.includes(track)} onChange={() => onCheckboxChange("investmentTracks", track)} /> <span>{track}</span> </label> ))} </Dropdown> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step/regions-dropdown.tsx" "use client" import { Dropdown } from "./dropdown" import type { FilterData } from "./types" import { REGIONS } from "@/constants/filter-options" interface RegionsDropdownProps { filterData: FilterData isOpen: boolean onToggle: () => void onCheckboxChange: (category: keyof FilterData, value: string) => void } export function RegionsDropdown({ filterData, isOpen, onToggle, onCheckboxChange }: RegionsDropdownProps) { const getDisplayText = () => { if (filterData.regions.length === 0) return 0 if (filterData.regions.includes("all")) return "כל האזורים" return filterData.regions.length } const displayText = getDisplayText() const selectedCount = typeof displayText === "string" ? 0 : displayText return ( <Dropdown label="איזור פעילות סוכן" placeholder="בחר אזורים" selectedCount={selectedCount} isOpen={isOpen} onToggle={onToggle} > <label className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.regions.includes("all")} onChange={() => onCheckboxChange("regions", "all")} /> <span className="font-medium">כל האזורים</span> </label> {REGIONS.map((region) => ( <label key={region} className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.regions.includes(region)} onChange={() => onCheckboxChange("regions", region)} /> <span>{region}</span> </label> ))} </Dropdown> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step/agent-ratings-dropdown.tsx" "use client" import { Star } from "lucide-react" import { Dropdown } from "./dropdown" import type { FilterData } from "./types" import { RATING_OPTIONS } from "@/constants/filter-options" interface AgentRatingsDropdownProps { filterData: FilterData isOpen: boolean onToggle: () => void onCheckboxChange: (category: keyof FilterData, value: string) => void } export function AgentRatingsDropdown({ filterData, isOpen, onToggle, onCheckboxChange }: AgentRatingsDropdownProps) { return ( <Dropdown label="דירוג מינימלי באתר" placeholder="בחר דירוג" selectedCount={filterData.agentRatings.length} isOpen={isOpen} onToggle={onToggle} > {RATING_OPTIONS.map((rating) => ( <label key={rating.value} className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.agentRatings.includes(rating.value)} onChange={() => onCheckboxChange("agentRatings", rating.value)} /> <div className="flex items-center"> <span>{rating.label}</span> {rating.value !== "1" && ( <div className="flex mr-1 text-yellow-400"> {Array.from({ length: Number.parseInt(rating.value) }).map((_, i) => ( <Star key={i} className="w-2 h-2" fill="currentColor" /> ))} </div> )} </div> </label> ))} </Dropdown> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step/agent-languages-dropdown.tsx" "use client" import { Dropdown } from "./dropdown" import type { FilterData } from "./types" import { LANGUAGES } from "@/constants/filter-options" interface AgentLanguagesDropdownProps { filterData: FilterData isOpen: boolean onToggle: () => void onCheckboxChange: (category: keyof FilterData, value: string) => void } export function AgentLanguagesDropdown({ filterData, isOpen, onToggle, onCheckboxChange, }: AgentLanguagesDropdownProps) { const getDisplayText = () => { if (filterData.agentLanguages.length === 0) return 0 if (filterData.agentLanguages.includes("all")) return "כל השפות" return filterData.agentLanguages.length } const displayText = getDisplayText() const selectedCount = typeof displayText === "string" ? 0 : displayText return ( <Dropdown label="שפת סוכן" placeholder="בחר שפות" selectedCount={selectedCount} isOpen={isOpen} onToggle={onToggle}> <label className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.agentLanguages.includes("all")} onChange={() => onCheckboxChange("agentLanguages", "all")} /> <span className="font-medium">כל השפות</span> </label> {LANGUAGES.map((language) => ( <label key={language} className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={filterData.agentLanguages.includes(language)} onChange={() => onCheckboxChange("agentLanguages", language)} /> <span>{language}</span> </label> ))} </Dropdown> ) } [V0_FILE]typescript:file="components/dashboard/selected-offers-content/types.ts" export interface SelectedOffersContentProps { activeOfferType: string setActiveOfferType: (type: string) => void selectedOffers: any confirmedOffers: any getCurrentUserRates: (type?: string) => any onOpenDispute?: (disputeData: any) => void } export interface OfferTabsProps { activeOfferType: string setActiveOfferType: (type: string) => void } export interface CurrentRatesCardProps { activeOfferType: string getCurrentUserRates: (type?: string) => any } export interface OfferDetailsCardProps { selectedOffer: any onOpenDispute: (offer: any) => void } export interface AgentDetailsCardProps { selectedOffer: any onOpenReview: (agent: any) => void isReviewSubmitted: boolean } export interface NoOfferSelectedProps { activeOfferType: string } [V0_FILE]typescriptreact:file="components/dashboard/selected-offers-content/offer-tabs.tsx" "use client" import type { OfferTabsProps } from "./types" export function OfferTabs({ activeOfferType, setActiveOfferType }: OfferTabsProps) { return ( <div className="flex justify-center border-b mb-4"> <button className={`px-4 py-2 font-medium ${ activeOfferType === "pension" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("pension")} > פנסיה </button> <button className={`px-4 py-2 font-medium ${ activeOfferType === "provident" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("provident")} > קרנות השתלמות </button> <button className={`px-4 py-2 font-medium ${ activeOfferType === "pension-fund" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("pension-fund")} > קופות גמל </button> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/selected-offers-content/current-rates-card.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { CurrentRatesCardProps } from "./types" export function CurrentRatesCard({ activeOfferType, getCurrentUserRates }: CurrentRatesCardProps) { return ( <div className="mb-4 max-w-2xl mx-auto"> <Card className="border border-gray-100 shadow-sm bg-gray-50"> <CardHeader className="pb-1 pt-2"> <CardTitle className="text-sm text-gray-600"> התנאים הנוכחיים שלך - {getCurrentUserRates(activeOfferType).title} </CardTitle> </CardHeader> <CardContent className="py-2"> <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs"> <div> <div className="text-gray-500 mb-1">חברה נוכחית</div> <div className="font-medium">{getCurrentUserRates(activeOfferType).company}</div> </div> <div> <div className="text-gray-500 mb-1">דמי ניהול מהצבירה</div> <div className="font-medium text-red-600"> {getCurrentUserRates(activeOfferType).managementFeeAccumulated}% </div> </div> <div> <div className="text-gray-500 mb-1">דמי ניהול מההפקדה</div> <div className="font-medium text-red-600"> {getCurrentUserRates(activeOfferType).managementFeeDeposit}% </div> </div> <div> <div className="text-gray-500 mb-1">מסלול השקעה</div> <div className="font-medium">{getCurrentUserRates(activeOfferType).investmentTrack}</div> </div> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/selected-offers-content/star-rating.tsx" "use client" import { Star } from "lucide-react" interface StarRatingProps { rating: number className?: string } export function StarRating({ rating, className = "text-yellow-400" }: StarRatingProps) { return ( <div className={`flex ${className}`}> {Array.from({ length: 5 }).map((_, i) => ( <Star key={i} className="w-4 h-4" fill={i < rating ? "currentColor" : "none"} strokeWidth={i < rating ? 0 : 1.5} /> ))} </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/selected-offers-content/offer-details-card.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { AlertTriangle } from "lucide-react" import type { OfferDetailsCardProps } from "./types" export function OfferDetailsCard({ selectedOffer, onOpenDispute }: OfferDetailsCardProps) { return ( <Card className="ring-2 ring-green-500 bg-green-50"> <CardHeader className="pb-2"> <div className="flex justify-between items-center"> <CardTitle className="text-lg">{selectedOffer.company}</CardTitle> <Badge className="bg-green-600 text-white">נבחר</Badge> </div> </CardHeader> <CardContent> <div className="space-y-3"> <div className="flex justify-between"> <span className="text-gray-500">דמי ניהול מהצבירה:</span> <span className="font-medium text-green-600">{selectedOffer.managementFeeAccumulated}%</span> </div> <div className="flex justify-between"> <span className="text-gray-500">דמי ניהול מההפקדה:</span> <span className="font-medium text-green-600">{selectedOffer.managementFeeDeposit}%</span> </div> <div className="flex justify-between"> <span className="text-gray-500">שם החברה המנהלת:</span> <span className="font-medium">{selectedOffer.company}</span> </div> <div className="flex justify-between"> <span className="text-gray-500">מסלול השקעה:</span> <span className="font-medium">{selectedOffer.investmentTrack || "מסלול כללי"}</span> </div> {selectedOffer.savingsAmount && ( <div className="flex justify-between"> <span className="text-gray-500">סכום חיסכון צפוי:</span> <span className="font-medium text-green-600">₪{selectedOffer.savingsAmount.toLocaleString()}</span> </div> )} </div> {/* Dispute Button /} <div className="mt-4 pt-4 border-t"> <Button variant="outline" size="sm" onClick={() => onOpenDispute(selectedOffer)} className="w-full text-red-600 border-red-200 hover:bg-red-50" > <AlertTriangle className="w-4 h-4 ml-2" /> פתח מחלוקת </Button> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/selected-offers-content/agent-details-card.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Star, Building, Phone, Mail, Users } from "lucide-react" import { StarRating } from "./star-rating" import type { AgentDetailsCardProps } from "./types" export function AgentDetailsCard({ selectedOffer, onOpenReview, isReviewSubmitted }: AgentDetailsCardProps) { return ( <Card className="border-blue-200 bg-blue-50"> <CardHeader className="pb-2"> <CardTitle className="text-lg flex items-center gap-2"> <span>פרטי הסוכן</span> <StarRating rating={selectedOffer.agent.rating} /> </CardTitle> </CardHeader> <CardContent> <div className="space-y-4"> {/ Agent Basic Info /} <div className="flex items-center gap-3"> <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xl font-bold"> {selectedOffer.agent.name.charAt(0)} </div> <div> <div className="font-medium text-lg">{selectedOffer.agent.name}</div> <div className="text-sm text-gray-600">{selectedOffer.agent.specialization}</div> </div> </div> {/ Agent Details /} <div className="space-y-3"> <div className="flex items-start gap-2"> <Building className="h-5 w-5 text-blue-600 mt-0.5" /> <div> <div className="font-medium">סוכנות</div> <div className="text-gray-600">{selectedOffer.agent.agency}</div> </div> </div> <div className="flex items-center gap-2"> <Phone className="h-5 w-5 text-blue-600" /> <div> <div className="font-medium">טלפון</div> <div className="text-gray-600">{selectedOffer.agent.phone}</div> </div> </div> <div className="flex items-center gap-2"> <Mail className="h-5 w-5 text-blue-600" /> <div> <div className="font-medium">דוא"ל</div> <div className="text-gray-600">{selectedOffer.agent.email}</div> </div> </div> </div> {/ Agent Reviews /} <div className="border-t pt-4"> <div className="flex items-center gap-2 mb-3"> <Users className="h-5 w-5 text-blue-600" /> <h4 className="font-medium">ביקורות לקוחות</h4> </div> <div className="space-y-3"> {selectedOffer.agent.reviews.slice(0, 2).map((review: any, index: number) => ( <div key={index} className="bg-white p-3 rounded-lg"> <div className="flex justify-between items-center mb-1"> <div className="font-medium">{review.author}</div> <div className="flex"> <StarRating rating={review.rating} /> </div> </div> <p className="text-sm text-gray-600">{review.text}</p> </div> ))} </div> </div> {/ Review Button /} <div className="mt-4 pt-4 border-t"> <Button variant="outline" size="sm" onClick={() => onOpenReview(selectedOffer.agent)} disabled={isReviewSubmitted} className={`w-full ${ isReviewSubmitted ? "text-gray-400 border-gray-200 cursor-not-allowed" : "text-blue-600 border-blue-200 hover:bg-blue-50" }`} > <Star className="w-4 h-4 ml-2" /> {isReviewSubmitted ? "ביקורת נשלחה" : "כתוב ביקורת"} </Button> </div> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/selected-offers-content/no-offer-selected.tsx" "use client" import { Briefcase } from "lucide-react" import type { NoOfferSelectedProps } from "./types" export function NoOfferSelected({ activeOfferType }: NoOfferSelectedProps) { const getProductName = () => { switch (activeOfferType) { case "pension": return "פנסיה" case "provident": return "קרנות השתלמות" case "pension-fund": return "קופות גמל" default: return "המוצר" } } return ( <div className="text-center py-12"> <div className="max-w-md mx-auto"> <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"> <Briefcase className="h-8 w-8 text-gray-400" /> </div> <h3 className="text-lg font-medium text-gray-900 mb-2">לא נבחרה הצעה למוצר זה עדיין</h3> <p className="text-gray-600">כאשר תבחר הצעה עבור {getProductName()}, היא תופיע כאן עם כל הפרטים הרלוונטיים.</p> </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/selected-offers-content.tsx" "use client" // Selected offers content component - read-only view of user's selected offers import { useState } from "react" import { DisputeModal } from "./dispute-modal" import { ReviewModal } from "./review-modal" import { OfferTabs } from "./selected-offers-content/offer-tabs" import { CurrentRatesCard } from "./selected-offers-content/current-rates-card" import { OfferDetailsCard } from "./selected-offers-content/offer-details-card" import { AgentDetailsCard } from "./selected-offers-content/agent-details-card" import { NoOfferSelected } from "./selected-offers-content/no-offer-selected" import type { SelectedOffersContentProps } from "./selected-offers-content/types" export function SelectedOffersContent({ activeOfferType, setActiveOfferType, selectedOffers, confirmedOffers, getCurrentUserRates, onOpenDispute, }: SelectedOffersContentProps) { const [disputeModalOpen, setDisputeModalOpen] = useState(false) const [selectedOfferForDispute, setSelectedOfferForDispute] = useState(null) const [reviewModalOpen, setReviewModalOpen] = useState(false) const [selectedAgentForReview, setSelectedAgentForReview] = useState(null) const [submittedReviews, setSubmittedReviews] = useState<Set<string>>(new Set()) // Get the selected offer for current product type const getSelectedOffer = () => { return confirmedOffers[activeOfferType] || selectedOffers[activeOfferType] } const selectedOffer = getSelectedOffer() const handleOpenDispute = (offer: any) => { setSelectedOfferForDispute(offer) setDisputeModalOpen(true) } const handleSubmitDispute = (disputeData: any) => { if (onOpenDispute) { onOpenDispute(disputeData) } // Show success message (could be implemented with toast or state) alert("המחלוקת נשלחה לבדיקה. צוות האתר יעיין בה ותחזור אליך התשובה בלשונית ההודעות.") } const handleOpenReview = (agent: any) => { setSelectedAgentForReview(agent) setReviewModalOpen(true) } const handleSubmitReview = (reviewData: any) => { // In a real app, this would be an API call to save the review for admin approval console.log("New review submitted for approval:", reviewData) // Mark this offer as reviewed const reviewKey = `${selectedOffer?.id}-${activeOfferType}` setSubmittedReviews((prev) => new Set([...prev, reviewKey])) // Show success message alert("הביקורת נשלחה לאישור. לאחר אישור המנהל היא תופיע באתר.") } // Check if review was already submitted for this offer const isReviewSubmitted = () => { if (!selectedOffer) return false const reviewKey = `${selectedOffer.id}-${activeOfferType}` return submittedReviews.has(reviewKey) } return ( <div className="space-y-4"> {/ Centered tab buttons /} <OfferTabs activeOfferType={activeOfferType} setActiveOfferType={setActiveOfferType} /> {/ Current rates section /} <CurrentRatesCard activeOfferType={activeOfferType} getCurrentUserRates={getCurrentUserRates} /> {/ Selected offer display /} {selectedOffer ? ( <div className="max-w-4xl mx-auto"> <div className="mb-4 text-center"> <h3 className="text-lg font-medium text-gray-900">ההצעה שנבחרה</h3> <p className="text-sm text-gray-600">פרטי ההצעה והסוכן שבחרת</p> </div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> {/ Offer Details Card /} <OfferDetailsCard selectedOffer={selectedOffer} onOpenDispute={handleOpenDispute} /> {/ Agent Details Card /} <AgentDetailsCard selectedOffer={selectedOffer} onOpenReview={handleOpenReview} isReviewSubmitted={isReviewSubmitted()} /> </div> </div> ) : ( / No offer selected placeholder / <NoOfferSelected activeOfferType={activeOfferType} /> )} {/ Dispute Modal /} <DisputeModal isOpen={disputeModalOpen} onClose={() => setDisputeModalOpen(false)} offer={selectedOfferForDispute} onSubmit={handleSubmitDispute} /> {/ Review Modal /} <ReviewModal isOpen={reviewModalOpen} onClose={() => setReviewModalOpen(false)} agent={selectedAgentForReview} onSubmit={handleSubmitReview} /> </div> ) } [V0_FILE]typescriptreact:file="app/join-as-agent/components/hero-section.tsx" "use client" import { Button } from "@/components/ui/button" import { Award } from "lucide-react" interface HeroSectionProps { onRegisterClick: () => void } export function HeroSection({ onRegisterClick }: HeroSectionProps) { return ( <section className="relative py-20 bg-primary/5 overflow-hidden"> <div className="container mx-auto px-4"> <div className="grid md:grid-cols-2 gap-12 items-center"> <div className="z-10"> <h1 className="text-4xl font-bold mb-6">הצטרף כסוכן לגורו פנסיוני</h1> <p className="text-lg text-muted-foreground mb-6"> אנו מזמינים סוכני פנסיה מובילים להצטרף לרשת הסוכנים שלנו וליהנות מהפניות איכותיות של לקוחות פוטנציאליים. </p> <div className="flex gap-4 mt-8"> <Button size="lg" onClick={onRegisterClick}> הצטרף עכשיו </Button> </div> </div> <div className="relative"> {/ Floating image 1 /} <div className="absolute top-0 right-[10%] w-64 h-64 animate-float"> <img src="/placeholder.svg?height=300&width=300" alt="Pension advisor" className="w-full h-full object-cover rounded-2xl shadow-lg transform rotate-6" /> </div> {/ Floating image 2 /} <div className="absolute bottom-0 left-[10%] w-48 h-48 animate-float" style={{ animationDelay: "2s" }}> <img src="/placeholder.svg?height=200&width=200" alt="Financial planning" className="w-full h-full object-cover rounded-2xl shadow-lg transform -rotate-6" /> </div> <div className="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg z-20"> <div className="flex items-center gap-3"> <Award className="h-10 w-10 text-accent" /> <div> <div className="text-xl font-bold">500+ סוכנים</div> <div className="text-sm text-muted-foreground">כבר נהנים מהשירות שלנו</div> </div> </div> </div> </div> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="app/join-as-agent/components/benefits-section.tsx" import { Card, CardContent } from "@/components/ui/card" import { Users, BarChart3, Award } from "lucide-react" export function BenefitsSection() { return ( <section className="py-16"> <div className="container mx-auto px-4"> <div className="text-center mb-12"> <h2 className="text-3xl font-bold mb-4">היתרונות לסוכנים</h2> <p className="text-lg text-muted-foreground max-w-2xl mx-auto"> הצטרפות לגורו פנסיוני מעניקה לך יתרונות משמעותיים לפיתוח העסק שלך </p> </div> <div className="grid md:grid-cols-3 gap-8"> <Card className="bg-card"> <CardContent className="pt-6"> <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> <Users className="h-6 w-6 text-primary" /> </div> <h3 className="text-xl font-semibold mb-2">לידים איכותיים</h3> <p className="text-muted-foreground"> קבל הפניות איכותיות של לקוחות פוטנציאליים המחפשים באופן אקטיבי שירותי ייעוץ פנסיוני. </p> </CardContent> </Card> <Card className="bg-card"> <CardContent className="pt-6"> <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> <BarChart3 className="h-6 w-6 text-primary" /> </div> <h3 className="text-xl font-semibold mb-2">הגדלת הכנסות</h3> <p className="text-muted-foreground"> הגדל את מספר הלקוחות שלך ואת ההכנסות שלך באמצעות הפניות איכותיות וממוקדות. </p> </CardContent> </Card> <Card className="bg-card"> <CardContent className="pt-6"> <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"> <Award className="h-6 w-6 text-primary" /> </div> <h3 className="text-xl font-semibold mb-2">מוניטין ומיתוג</h3> <p className="text-muted-foreground"> היה חלק מרשת סוכנים מובילה ותיהנה ממיתוג חזק ומוניטין מקצועי בענף. </p> </CardContent> </Card> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="app/join-as-agent/components/faq-section.tsx" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export function FaqSection() { return ( <section className="py-16 bg-primary/5"> <div className="container mx-auto px-4"> <div className="text-center mb-12"> <h2 className="text-3xl font-bold mb-4">שאלות נפוצות</h2> <p className="text-lg text-muted-foreground max-w-2xl mx-auto"> מידע חשוב לסוכנים המעוניינים להצטרף לפלטפורמה שלנו </p> </div> <div className="max-w-3xl mx-auto"> <Accordion type="single" collapsible className="w-full"> <AccordionItem value="item-1"> <AccordionTrigger className="text-right">האם ההצטרפות וקבלת לידים הינה בחינם?</AccordionTrigger> <AccordionContent className="text-right"> כן. הצטרפות לגורו פנסיוני וקבלת לידים היא כרגע ללא עלות לסוכני פנסיה מורשים. אין עלויות נסתרות או התחייבויות. המטרה שלנו בשלב זה היא ליצור ערך הן ללקוחות והן לאנשי מקצוע תוך כדי צמיחת הפלטפורמה. </AccordionContent> </AccordionItem> <AccordionItem value="item-2"> <AccordionTrigger className="text-right">מי יכול להצטרף לפלטפורמה?</AccordionTrigger> <AccordionContent className="text-right"> כל סוכן פנסיוני מורשה או יועץ פיננסי בישראל זכאי להצטרף. הפלטפורמה פתוחה לסוכנים עצמאיים, משרדים קטנים וחברות גדולות כאחד. אנו מאמינים באפשרות לתחרות הוגנת המבוססת על איכות השירות, ולא על גודל החברה או תקציב השיווק. </AccordionContent> </AccordionItem> <AccordionItem value="item-3"> <AccordionTrigger className="text-right">כיצד מאומתים הסוכנים?</AccordionTrigger> <AccordionContent className="text-right"> כדי לשמור על אמון הלקוחות ועל עמידה בדרישות הרגולציה, כל הסוכנים עוברים תהליך אימות קצר. זה כולל מילוי טופס רישום מקוון, העלאת רישיון תקף ומתן זיהוי. הצוות שלנו מאמת את המידע באופן ידני, בדרך כלל תוך יומיים עד שלושה ימי עסקים. </AccordionContent> </AccordionItem> <AccordionItem value="item-4"> <AccordionTrigger className="text-right">מה הופך את הלידים האלה לבעלי ערך?</AccordionTrigger> <AccordionContent className="text-right"> לקוחות המשתמשים בגורו פנסיוני מחפשים באופן פעיל לשפר את מצב הפנסיה שלהם. אלה אינם אנשי קשר קרים או פסיביים - אלה משתמשים מעורבים המשווים הצעות אמיתיות. בנוסף לשירותי פנסיה, לידים אלה מובילים לעתים קרובות להזדמנויות קשורות כמו קרן השתלמות או מוצרי ביטוח כמו כיסוי נכות וחיים. ליד איכותי אחד יכול להפוך ללקוח ארוך טווח בעל ערך גבוה. </AccordionContent> </AccordionItem> <AccordionItem value="item-5"> <AccordionTrigger className="text-right">כיצד אוכל לבלוט ולזכות בלידים?</AccordionTrigger> <AccordionContent className="text-right"> לכל סוכן יש פרופיל ציבורי הכולל ביוגרפיה מקצועית, אישורי רישיון, ביקורות לקוחות ומדדי ביצועים כמו חיסכון ממוצע להצעה. הלקוחות בוחרים עם מי להתקשר על בסיס אמון, בהירות וערך ההצעה - לא על טקטיקות מכירה אגרסיביות. </AccordionContent> </AccordionItem> <AccordionItem value="item-6"> <AccordionTrigger className="text-right">איזה סוג מידע אני מקבל על הלקוח?</AccordionTrigger> <AccordionContent className="text-right"> בהתחלה, סוכנים יכולים לצפות בנתוני פנסיה אנונימיים כגון עמלות נוכחיות, הקצאות קרנות וכיסוי ביטוחי. ברגע שלקוח מקבל הצעה, הסוכן מקבל את פרטי הקשר המלאים שלהם. אנו מטפלים בכל היבטי הפרטיות והציות כדי להבטיח חוויה בטוחה ומקצועית לשני הצדדים. </AccordionContent> </AccordionItem> <AccordionItem value="item-7"> <AccordionTrigger className="text-right">האם אני יכול לעקוב אחר הביצועים שלי?</AccordionTrigger> <AccordionContent className="text-right"> כן. סוכנים מקבלים גישה للוח בקרה אישי המציג שיעורי קבלת הצעות, ביצועים לעומת סמנים בשוק ונתונים אנליטיים שימושיים אחרים. כלים אלה עוזרים לסוכנים לשפר את הגישה שלהם ולמדוד תוצאות לאורך זמן. </AccordionContent> </AccordionItem> <AccordionItem value="item-8"> <AccordionTrigger className="text-right">למה כדאי לי להצטרף עכשיו?</AccordionTrigger> <AccordionContent className="text-right"> כפלטפורמה בשלב מוקדם, אנו מזמינים סוכנים מוסמכים לעזור לעצב את עתיד השירות. משתתפים מוקדמים נהנים מנראות מוגברת, תג "סוכן מייסד" והזדמנויות להשפיע על תכונות עתידיות על בסיס משוב אמיתי מהשטח. </AccordionContent> </AccordionItem> <AccordionItem value="item-9"> <AccordionTrigger className="text-right">האם הפלטפורמה עומדת בדרישות הרגולציה?</AccordionTrigger> <AccordionContent className="text-right"> גורו פנסיוני פועל בהתאם מלא לתקנות הפיננסיות הישראליות, כולל רישוי סוכנים, פרטיות נתונים ותקני פרסום הוגנים. אנו מחויבים לשמור על רמות הגבוהות ביותר של אמון ושקיפות עבור כל המשתמשים - הן לקוחות והן אנשי מקצוע. </AccordionContent> </AccordionItem> </Accordion> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="app/join-as-agent/components/footer.tsx" import { Landmark } from "lucide-react" export function Footer() { return ( <footer className="bg-muted/30 border-t py-8"> <div className="container mx-auto px-4 text-center"> <div className="flex items-center justify-center gap-2 mb-4"> <Landmark className="h-6 w-6 text-primary" /> <span className="text-xl font-bold">גורו פנסיוני</span> </div> <p className="text-muted-foreground text-sm"> © {new Date().getFullYear()} גורו פנסיוני. כל הזכויות שמורות. </p> </div> </footer> ) } [V0_FILE]typescriptreact:file="app/join-as-agent/components/registration-dialog.tsx" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { AgentRegistrationForm } from "@/components/agent-registration-form" interface RegistrationDialogProps { isOpen: boolean onOpenChange: (open: boolean) => void } export function RegistrationDialog({ isOpen, onOpenChange }: RegistrationDialogProps) { return ( <Dialog open={isOpen} onOpenChange={onOpenChange}> <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto"> <DialogHeader> <DialogTitle className="text-right text-xl">הרשמה כסוכן פנסיוני</DialogTitle> <DialogDescription className="text-right">מלא את הפרטים הבאים כדי להצטרף לרשת הסוכנים שלנו</DialogDescription> </DialogHeader> <AgentRegistrationForm onSuccess={() => onOpenChange(false)} /> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="app/join-as-agent/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { HeroSection } from "./components/hero-section" import { BenefitsSection } from "./components/benefits-section" import { FaqSection } from "./components/faq-section" import { Footer } from "./components/footer" import { RegistrationDialog } from "./components/registration-dialog" export default function JoinAsAgentPage() { const [isRegistrationOpen, setIsRegistrationOpen] = useState(false) return ( <div className="min-h-screen flex flex-col"> <main className="flex-1"> <HeroSection onRegisterClick={() => setIsRegistrationOpen(true)} /> <BenefitsSection /> <FaqSection /> </main> <Footer /> <RegistrationDialog isOpen={isRegistrationOpen} onOpenChange={setIsRegistrationOpen} /> </div> ) } [V0_FILE]typescriptreact:file="app/components/stats-section.tsx" export function StatsSection() { return ( <section className="py-16 bg-blue-600 text-white"> <div className="container mx-auto px-4"> <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> <div> <div className="text-4xl font-bold mb-2">500+</div> <div className="text-white/80">סוכנים מובילים</div> </div> <div> <div className="text-4xl font-bold mb-2">10+</div> <div className="text-white/80">שנות ניסיון</div> </div> <div> <div className="text-4xl font-bold mb-2">10,000+</div> <div className="text-white/80">לקוחות מרוצים</div> </div> <div> <div className="text-4xl font-bold mb-2">98%</div> <div className="text-white/80">שביעות רצון</div> </div> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="app/components/products-section.tsx" import { PieChart, BarChart3, Briefcase } from "lucide-react" export function ProductsSection() { return ( <section className="py-12 bg-white"> <div className="container mx-auto px-4"> <div className="text-center mb-8"> <h2 className="text-2xl md:text-3xl font-bold mb-2">המוצרים שלנו</h2> </div> <div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto"> <div className="text-center"> <div className="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mb-3 mx-auto"> <PieChart className="h-6 w-6 text-blue-600" /> </div> <h3 className="text-lg font-semibold text-blue-900">קרן פנסיה</h3> </div> <div className="text-center"> <div className="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mb-3 mx-auto"> <BarChart3 className="h-6 w-6 text-blue-600" /> </div> <h3 className="text-lg font-semibold text-blue-900">קופת גמל</h3> </div> <div className="text-center"> <div className="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mb-3 mx-auto"> <Briefcase className="h-6 w-6 text-blue-600" /> </div> <h3 className="text-lg font-semibold text-blue-900">קרן השתלמות</h3> </div> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="app/components/faq-section.tsx" import { HelpCircle } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export function FaqSection() { return ( <section id="faq" className="py-16 bg-blue-50"> <div className="container mx-auto px-4"> <div className="text-center mb-10"> <h2 className="text-3xl md:text-4xl font-bold mb-3">שאלות נפוצות</h2> <p className="text-base text-muted-foreground max-w-2xl mx-auto"> תשובות לשאלות הנפוצות ביותר על השירות שלנו </p> </div> <div className="max-w-3xl mx-auto bg-white rounded-xl shadow-sm p-5 md:p-8"> <Accordion type="single" collapsible className="w-full" dir="rtl"> <AccordionItem value="item-1" className="border-b border-gray-200"> <AccordionTrigger className="text-right py-5 hover:no-underline"> <div className="flex items-center gap-3 text-lg font-medium"> <HelpCircle className="h-5 w-5 text-blue-600 flex-shrink-0" /> <span>האם אתם נותנים ייעוץ פנסיוני?</span> </div> </AccordionTrigger> <AccordionContent className="text-muted-foreground text-right pr-8"> לא. אנחנו לא מספקים ייעוץ או שיווק פנסיוני, אלא רק פלטפורמה נייטרלית בסגנון לוח מודעות. ההצעות מוצגות באקראי אך רק מתוך כאלה שעונות על ההעדפות שסימנת (למשל בקשה לדמי ניהול נמוכים יותר), ולכן הן לרוב משופרות ממה שיש לך – בלי שנחרוג ממגבלות הרגולציה. </AccordionContent> </AccordionItem> <AccordionItem value="item-2" className="border-b border-gray-200"> <AccordionTrigger className="text-right py-5 hover:no-underline"> <div className="flex items-center gap-3 text-lg font-medium"> <HelpCircle className="h-5 w-5 text-blue-600 flex-shrink-0" /> <span>אז מה המטרה של הפלטפורמה?</span> </div> </AccordionTrigger> <AccordionContent className="text-muted-foreground text-right pr-8"> המטרה שלנו היא להנגיש את תחום הפנסיה, הגמל וההשתלמות לציבור – בצורה פשוטה, שקופה וללא עלות. הפלטפורמה נבנתה מתוך צורך אמיתי ולא מסחרי, במטרה לעזור לקהילה להבין איפה היא עומדת – ולקבל הצעות תחרותיות מסוכנים שמבינים את הכוח של קהילה מאורגנת. ככל שיש יותר משתמשים – כך סוכנים מציעים הצעות טובות יותר. </AccordionContent> </AccordionItem> <AccordionItem value="item-3" className="border-b border-gray-200"> <AccordionTrigger className="text-right py-5 hover:no-underline"> <div className="flex items-center gap-3 text-lg font-medium"> <HelpCircle className="h-5 w-5 text-blue-600 flex-shrink-0" /> <span>האם השירות חינמי?</span> </div> </AccordionTrigger> <AccordionContent className="text-muted-foreground text-right pr-8"> כן. השימוש בפלטפורמה לגמרי חינמי – אין תשלום על הרשמה, צפייה בהצעות או חיבור לסוכן. </AccordionContent> </AccordionItem> <AccordionItem value="item-4" className="border-b border-gray-200"> <AccordionTrigger className="text-right py-5 hover:no-underline"> <div className="flex items-center gap-3 text-lg font-medium"> <HelpCircle className="h-5 w-5 text-blue-600 flex-shrink-0" /> <span>אם השירות חינמי – ממה אתם מרוויחים?</span> </div> </AccordionTrigger> <AccordionContent className="text-muted-foreground text-right pr-8"> כרגע, אין לנו מודל רווח. איננו גובים כסף מהמשתמשים, וגם לא מקבלים תשלום מהסוכנים או עמלה על סגירת עסקה. מדובר ביוזמה קהילתית. בעתיד ייתכן ונציע פיצ'רים מתקדמים בתשלום – אך השירות הבסיסי והעקרונות עליו נבנה יישארו חינמיים ונייטרליים. </AccordionContent> </AccordionItem> <AccordionItem value="item-5" className="border-b border-gray-200"> <AccordionTrigger className="text-right py-5 hover:no-underline"> <div className="flex items-center gap-3 text-lg font-medium"> <HelpCircle className="h-5 w-5 text-blue-600 flex-shrink-0" /> <span>אילו מוצרים מכוסים בפלטפורמה?</span> </div> </AccordionTrigger> <AccordionContent className="text-muted-foreground text-right pr-8"> הפלטפורמה מאפשרת לך לקבל הצעות בשלושה תחומים עיקריים: קרן פנסיה, קופת גמל, ו־קרן השתלמות. תוכל לבחור באילו מהם תרצה להתמקד בתהליך – ניתן לבחור מוצר אחד, שניים או את שלושתם יחד. </AccordionContent> </AccordionItem> <AccordionItem value="item-6" className="border-b border-gray-200"> <AccordionTrigger className="text-right py-5 hover:no-underline"> <div className="flex items-center gap-3 text-lg font-medium"> <HelpCircle className="h-5 w-5 text-blue-600 flex-shrink-0" /> <span>מי הם הסוכנים שמציגים הצעות באתר?</span> </div> </AccordionTrigger> <AccordionContent className="text-muted-foreground text-right pr-8"> כל סוכן שמציג הצעות בפלטפורמה הוא סוכן פנסיוני מוסמך בלבד – יועץ או משווק בעל רישיון תקף ממשרד האוצר. הסוכנים עוברים תהליך אימות, וכל הצעה מוצגת בצורה אנונימית וללא פרטים מזהים עד שתבחר אם ברצונך ליצור קשר. בנוסף, לכל סוכן יש מנגנון דירוג שקוף מבוסס על חוות דעת של משתמשים קודמים – כדי לאפשר בחירה מושכלת ואחראית. </AccordionContent> </AccordionItem> <AccordionItem value="item-7" className="border-b-0"> <AccordionTrigger className="text-right py-5 hover:no-underline"> <div className="flex items-center gap-3 text-lg font-medium"> <HelpCircle className="h-5 w-5 text-blue-600 flex-shrink-0" /> <span>מה קורה עם המידע האישי שאני מוסר?</span> </div> </AccordionTrigger> <AccordionContent className="text-muted-foreground text-right pr-8"> המידע שאתה מזין מאובטח ונשמר בהתאם לחוקי הגנת הפרטיות והמידע בישראל. הפרטים לא מועברים לשום גורם חיצוני ללא הסכמתך. רק אם תבחר ליצור קשר עם סוכן מסוים – תתבקש לאשר שיתוף פרטיך עמו. </AccordionContent> </AccordionItem> </Accordion> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="app/components/cta-section.tsx" "use client" import { Button } from "@/components/ui/button" import { Briefcase } from "lucide-react" interface CtaSectionProps { onOpenForm: () => void } export function CtaSection({ onOpenForm }: CtaSectionProps) { return ( <section className="py-20 bg-blue-100"> <div className="container mx-auto px-4 text-center"> <h2 className="text-3xl md:text-4xl font-bold mb-4">מוכנים לקחת את הצעד הבא?</h2> <p className="text-xl mb-8 max-w-2xl mx-auto text-muted-foreground"> הצטרפו עוד היום ושפרו את תנאי הפנסיה שלכם </p> <div className="flex justify-center"> <Button size="lg" className="gap-2 bg-blue-600 hover:bg-blue-700" onClick={onOpenForm}> <Briefcase className="h-5 w-5 ml-1" /> שפר לי את התנאים! </Button> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="app/components/footer.tsx" import Link from "next/link" import { Landmark } from "lucide-react" export function Footer() { return ( <footer className="bg-gray-100 border-t py-12"> <div className="container mx-auto px-4"> <div className="flex flex-col md:flex-row justify-between items-center"> <div className="flex items-center gap-2 mb-4 md:mb-0"> <Landmark className="h-6 w-6 text-blue-600" /> <span className="text-xl font-bold">גורו פנסיוני</span> </div> <div className="flex gap-8"> <Link href="/privacy" className="text-muted-foreground hover:text-blue-600"> פרטיות </Link> <Link href="/terms" className="text-muted-foreground hover:text-blue-600"> תנאי שימוש </Link> <Link href="/contact" className="text-muted-foreground hover:text-blue-600"> צור קשר </Link> </div> </div> <div className="mt-8 text-center text-muted-foreground text-sm"> © {new Date().getFullYear()} גורו פנסיוני. כל הזכויות שמורות. </div> </div> </footer> ) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { PensionFormModal } from "@/components/pension-form/pension-form-modal" import { HeroSection } from "./components/hero-section" import { StatsSection } from "./components/stats-section" import { HowItWorksSection } from "./components/how-it-works-section" import { ProductsSection } from "./components/products-section" import { FaqSection } from "./components/faq-section" import { CtaSection } from "./components/cta-section" import { Footer } from "./components/footer" export default function Home() { const [isFormOpen, setIsFormOpen] = useState(false) const openForm = () => { setIsFormOpen(true) } const closeForm = () => { setIsFormOpen(false) } return ( <div className="min-h-screen flex flex-col"> <main className="flex-1"> <HeroSection onOpenForm={openForm} /> <StatsSection /> <HowItWorksSection /> <ProductsSection /> <FaqSection /> <CtaSection onOpenForm={openForm} /> </main> <Footer /> {/ Pension Form Modal /} <PensionFormModal isOpen={isFormOpen} onClose={closeForm} /> </div> ) } [V0_FILE]typescript:file="app/agent-dashboard/components/types.ts" isFixed="true" isQuickEdit="true" export interface ContactDialogProps { isOpen: boolean onClose: () => void selectedLead: any formatDate: (date: string) => string findOfferById: (id: string, offersData: any) => any handleMarkContacted: (leadId: string) => void } export interface ModalsProps { isNewOfferModalOpen: boolean setIsNewOfferModalOpen: (open: boolean) => void handleCreateOffer: (offerData: any) => void isViewOfferModalOpen: boolean setIsViewOfferModalOpen: (open: boolean) => void viewedOffer: any formatDate: (date: string) => string isRequestChangeModalOpen: boolean setIsRequestChangeModalOpen: (open: boolean) => void requestChangeField: string requestChangeReason: string setRequestChangeReason: (reason: string) => void handleSubmitChangeRequest: () => void isRequestReviewDeletionModalOpen: boolean setIsRequestReviewDeletionModalOpen: (open: boolean) => void selectedReviewId: string | null reviewDeletionReason: string setReviewDeletionReason: (reason: string) => void handleSubmitReviewDeletionRequest: () => void } export interface ContentRendererProps { activeContent: string leadsData: any leads: any[] handleContactLead: (lead: any) => void handleCycleLeadStatus: (leadId: string) => void formatDate: (date: string) => string renderLeadActivityChart: () => JSX.Element leadsFilterValues: any setLeadsFilterValues: (values: any) => void expiringOffers: any[] setIsNewOfferModalOpen: (open: boolean) => void activeOfferType: string setActiveOfferType: (type: string) => void offersData: any handleViewOffer: (type: string, offerId: string) => void handleEditOffer: (type: string, offerId: string) => void handleDeleteOffer: (type: string, offerId: string) => void renderOfferPerformanceChart: (offerType: string) => JSX.Element agentUser: any reviewsData: any handleRequestReviewDeletion: (reviewId: string) => void renderStars: (rating: number) => JSX.Element handleRequestChange: (field: string) => void } [V0_FILE]typescriptreact:file="app/agent-dashboard/components/contact-dialog.tsx" "use client" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import type { ContactDialogProps } from "./types" export default function ContactDialog({ isOpen, onClose, selectedLead, formatDate, findOfferById, handleMarkContacted, }: ContactDialogProps) { if (!selectedLead) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md"> <DialogHeader> <DialogTitle>פרטי התקשרות</DialogTitle> <DialogDescription>פרטי הלקוח שביקש ליצור קשר</DialogDescription> </DialogHeader> <div className="space-y-4 py-2"> <div className="flex items-center gap-3 border-b pb-3"> <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> <div className="h-5 w-5 text-blue-600">👤</div> </div> <div> <p className="font-medium">{selectedLead.name}</p> <p className="text-sm text-gray-500"> {selectedLead.sector}, גילאי {selectedLead.age} </p> </div> </div> <div className="grid grid-cols-2 gap-4"> <div className="space-y-3"> <div className="flex items-center gap-2"> <div className="h-4 w-4 text-gray-500">📞</div> <div> <p className="text-xs text-gray-500">טלפון</p> <p className="font-medium">{selectedLead.phone}</p> {selectedLead.preferredContact === "phone" && ( <span className="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">מועדף</span> )} </div> </div> <div className="flex items-center gap-2"> <div className="h-4 w-4 text-gray-500">📧</div> <div> <p className="text-xs text-gray-500">דוא"ל</p> <p className="font-medium">{selectedLead.email}</p> {selectedLead.preferredContact === "email" && ( <span className="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">מועדף</span> )} </div> </div> <div className="flex items-center gap-2"> <div className="h-4 w-4 text-gray-500">📅</div> <div> <p className="text-xs text-gray-500">תאריך פנייה</p> <p className="font-medium">{formatDate(selectedLead.date)}</p> </div> </div> <div className="flex items-center gap-2"> <div className="h-4 w-4 text-gray-500">🏛️</div> <div> <p className="text-xs text-gray-500">קרן נוכחית</p> <p className="font-medium">{selectedLead.fund}</p> </div> </div> </div> <div className="bg-blue-50 p-3 rounded-md"> {selectedLead.relatedOfferId && ( <> {(() => { const offer = findOfferById(selectedLead.relatedOfferId, {}) return offer ? ( <div className="space-y-2"> <p className="text-sm font-medium text-blue-800">פרטי ההצעה:</p> <p className="font-medium text-sm">{offer.title}</p> <div className="space-y-1 text-xs"> <p> <span className="text-gray-600">חברה מנהלת:</span> {offer.managingCompany} </p> <p> <span className="text-gray-600">דמי ניהול מצבירה:</span> {offer.managementFeeAccumulation}% </p> <p> <span className="text-gray-600">דמי ניהול מהפקדה:</span> {offer.managementFeeDeposit}% </p> <p> <span className="text-gray-600">קהל יעד:</span> {offer.audience} </p> <p> <span className="text-gray-600">תוקף עד:</span> {formatDate(offer.endDate)} </p> </div> </div> ) : ( <p className="text-sm font-medium">הצעה: {selectedLead.relatedOffer}</p> ) })()} </> )} </div> </div> <div className="pt-3 border-t"> <div className="flex gap-2"> <Button onClick={() => { window.open(`tel:${selectedLead.phone}`, "_self") handleMarkContacted(selectedLead.id) }} className="flex-1" variant={selectedLead.preferredContact === "phone" ? "default" : "outline"} > התקשר </Button> <Button onClick={() => { window.open(`mailto:${selectedLead.email}`, "_self") handleMarkContacted(selectedLead.id) }} className="flex-1" variant={selectedLead.preferredContact === "email" ? "default" : "outline"} > שלח מייל </Button> </div> </div> </div> <DialogFooter> <Button variant="outline" onClick={onClose}> סגור </Button> </DialogFooter> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="app/agent-dashboard/components/modals.tsx" "use client" import NewOfferModal from "@/components/agent-dashboard/new-offer-modal" import ViewOfferModal from "@/components/agent-dashboard/view-offer-modal" import RequestChangeModal from "@/components/agent-dashboard/request-change-modal" import RequestReviewDeletionModal from "@/components/agent-dashboard/request-review-deletion-modal" import type { ModalsProps } from "./types" export default function Modals({ isNewOfferModalOpen, setIsNewOfferModalOpen, handleCreateOffer, isViewOfferModalOpen, setIsViewOfferModalOpen, viewedOffer, formatDate, isRequestChangeModalOpen, setIsRequestChangeModalOpen, requestChangeField, requestChangeReason, setRequestChangeReason, handleSubmitChangeRequest, isRequestReviewDeletionModalOpen, setIsRequestReviewDeletionModalOpen, selectedReviewId, reviewDeletionReason, setReviewDeletionReason, handleSubmitReviewDeletionRequest, }: ModalsProps) { return ( <> <NewOfferModal isOpen={isNewOfferModalOpen} onClose={() => setIsNewOfferModalOpen(false)} onSubmit={handleCreateOffer} /> <ViewOfferModal isOpen={isViewOfferModalOpen} onClose={() => setIsViewOfferModalOpen(false)} offer={viewedOffer} formatDate={formatDate} /> <RequestChangeModal isOpen={isRequestChangeModalOpen} onClose={() => setIsRequestChangeModalOpen(false)} field={requestChangeField} reason={requestChangeReason} setReason={setRequestChangeReason} onSubmit={handleSubmitChangeRequest} /> <RequestReviewDeletionModal isOpen={isRequestReviewDeletionModalOpen} onClose={() => setIsRequestReviewDeletionModalOpen(false)} reviewId={selectedReviewId} reason={reviewDeletionReason} onReasonChange={setReviewDeletionReason} onSubmit={handleSubmitReviewDeletionRequest} /> </> ) } [V0_FILE]typescriptreact:file="app/agent-dashboard/components/content-renderer.tsx" "use client" import LeadsContent from "@/components/agent-dashboard/leads-content" import OffersContent from "@/components/agent-dashboard/offers-content" import ProfileContent from "@/components/agent-dashboard/profile-content" import ReviewsContent from "@/components/agent-dashboard/reviews-content" import MessagesContent from "@/components/agent-dashboard/messages-content" import type { ContentRendererProps } from "./types" export default function ContentRenderer({ activeContent, leadsData, leads, handleContactLead, handleCycleLeadStatus, formatDate, renderLeadActivityChart, leadsFilterValues, setLeadsFilterValues, expiringOffers, setIsNewOfferModalOpen, activeOfferType, setActiveOfferType, offersData, handleViewOffer, handleEditOffer, handleDeleteOffer, renderOfferPerformanceChart, agentUser, reviewsData, handleRequestReviewDeletion, renderStars, handleRequestChange, }: ContentRendererProps) { switch (activeContent) { case "leads": return ( <LeadsContent leadsData={leadsData} leads={leads} handleContactLead={handleContactLead} handleCycleLeadStatus={handleCycleLeadStatus} formatDate={formatDate} renderLeadActivityChart={renderLeadActivityChart} filterValues={leadsFilterValues} onFilterChange={(key, value) => setLeadsFilterValues((prev: any) => ({ ...prev, [key]: value }))} /> ) case "offers": return ( <OffersContent expiringOffers={expiringOffers} setIsNewOfferModalOpen={setIsNewOfferModalOpen} activeOfferType={activeOfferType} setActiveOfferType={setActiveOfferType} offersData={offersData} handleViewOffer={handleViewOffer} handleEditOffer={handleEditOffer} handleDeleteOffer={handleDeleteOffer} formatDate={formatDate} renderOfferPerformanceChart={renderOfferPerformanceChart} /> ) case "messages": return <MessagesContent agentUser={agentUser} /> case "reviews": return ( <ReviewsContent reviewsData={reviewsData} handleRequestReviewDeletion={handleRequestReviewDeletion} formatDate={formatDate} renderStars={renderStars} /> ) case "profile": return <ProfileContent agentUser={agentUser} handleRequestChange={handleRequestChange} /> default: return null } } [V0_FILE]typescript:file="lib/agent-dashboard-data/agent-user.ts" export const agentUser = { id: "agent-1", name: "דוד כהן", email: "david@example.com", role: "agent", agentDetails: { licenseNumber: "12345", licenseType: "סוכן ביטוח פנסיוני", experience: "6-10", clientsCount: "101-200", bio: "יועץ פנסיוני מנוסה עם התמחות בתכנון פרישה וחיסכון ארוך טווח. מתמחה בהתאמת פתרונות אישיים לצרכי הלקוח.", services: ["פנסיה", "קרן השתלמות", "ביטוחים", "גמל להשקעה"], languages: ["עברית", "אנגלית"], }, agentMetrics: { totalLeads: 47, convertedLeads: 12, offerAcceptanceRate: 65, averageSavings: 120000, profileViews: 324, averageRating: 4.6, reviewsCount: 23, positiveReviewsPercentage: 87, }, } [V0_FILE]typescript:file="lib/agent-dashboard-data/leads-data.ts" import { agentUser } from "./agent-user" export const leadsData = { summary: { totalOfferViews: 324, totalLeads: agentUser.agentMetrics?.totalLeads || 0, convertedLeads: agentUser.agentMetrics?.convertedLeads || 0, conversionRate: agentUser.agentMetrics ? Math.round((agentUser.agentMetrics.convertedLeads / agentUser.agentMetrics.totalLeads) 100) : 0, }, recentLeads: [ { id: "lead-1", name: "יוסי כהן", email: "yossi@example.com", phone: "054-1234567", age: "30-40", sector: "הייטק", fund: "מגדל", date: "2023-05-10", status: "חדש", interestType: "יצור עמך קשר עצמאית", contacted: false, preferredContact: "phone", relatedOffer: "חיסכון מקסימלי לפנסיה", relatedOfferId: "offer-1", }, { id: "lead-2", name: "שרה לוי", email: "sarah@example.com", phone: "052-7654321", age: "40-50", sector: "חינוך", fund: "הראל", date: "2023-05-09", status: "בטיפול", interestType: "ביקש יצירת קשר", contacted: false, preferredContact: "email", relatedOffer: "פנסיה למשפחות צעירות", relatedOfferId: "offer-2", }, { id: "lead-3", name: "דוד ישראלי", email: "david@example.com", phone: "050-9876543", age: "25-35", sector: "פיננסים", fund: "מנורה", date: "2023-05-08", status: "חדש", interestType: "יצור עמך קשר עצמאית", contacted: false, preferredContact: "phone", relatedOffer: "קרן השתלמות ללא דמי ניהול", relatedOfferId: "offer-3", }, { id: "lead-4", name: "מיכל אברהם", email: "michal@example.com", phone: "053-6543210", age: "35-45", sector: "רפואה", fund: "כלל", date: "2023-05-07", status: "חדש", interestType: "ביקש יצירת קשר", contacted: false, preferredContact: "email", relatedOffer: "גמל להשקעה - מסלול מניות", relatedOfferId: "offer-5", }, { id: "lead-5", name: "אבי גולדשטיין", email: "avi@example.com", phone: "058-1122334", age: "50-60", sector: "תעשייה", fund: "הפניקס", date: "2023-05-06", status: "בטיפול", interestType: "ביקש יצירת קשר", contacted: true, preferredContact: "phone", relatedOffer: "חיסכון מקסימלי לפנסיה", relatedOfferId: "offer-1", }, ], activityData: [ { date: "2023-04-01", views: 12, contacts: 2, conversions: 1 }, { date: "2023-04-08", views: 18, contacts: 4, conversions: 2 }, { date: "2023-04-15", views: 15, contacts: 3, conversions: 1 }, { date: "2023-04-22", views: 22, contacts: 5, conversions: 3 }, { date: "2023-04-29", views: 28, contacts: 7, conversions: 4 }, { date: "2023-05-06", views: 32, contacts: 8, conversions: 5 }, { date: "2023-05-13", views: 38, contacts: 10, conversions: 6 }, ], } [V0_FILE]typescript:file="lib/agent-dashboard-data/offers-data.ts" export const initialOffersData = { pension: [ { id: "offer-1", title: "חיסכון מקסימלי לפנסיה", audience: "עובדי הייטק", views: 145, contacts: 28, lastUpdate: "2023-05-01", status: "פעיל", endDate: "2023-06-15", managementFeeAccumulation: 0.25, managementFeeDeposit: 2.0, managingCompany: "מגדל", viewsOverTime: [10, 15, 22, 28, 35, 42, 48, 55, 62, 70, 78, 85, 92, 100, 110, 120, 130, 140, 145], contactsOverTime: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 25, 26, 27, 28, 28, 28, 28], }, { id: "offer-2", title: "פנסיה למשפחות צעירות", audience: "גילאי 30-40", views: 98, contacts: 15, lastUpdate: "2023-04-20", status: "פעיל", endDate: "2023-06-10", managementFeeAccumulation: 0.3, managementFeeDeposit: 1.8, managingCompany: "הראל", viewsOverTime: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 98], contactsOverTime: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 15, 15, 15, 15], }, ], provident: [ { id: "offer-3", title: "קרן השתלמות ללא דמי ניהול", audience: "כל הגילאים", views: 210, contacts: 42, lastUpdate: "2023-05-05", status: "פעיל", endDate: "2023-07-01", managementFeeAccumulation: 0.2, managementFeeDeposit: 0, managingCompany: "אלטשולר שחם", viewsOverTime: [15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210], contactsOverTime: [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42], }, { id: "offer-4", title: "השתלמות למגזר הציבורי", audience: "עובדי מדינה", views: 76, contacts: 18, lastUpdate: "2023-04-15", status: "פעיל", endDate: "2023-06-20", managementFeeAccumulation: 0.4, managementFeeDeposit: 0, managingCompany: "מנורה", viewsOverTime: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 76], contactsOverTime: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 17, 18], }, ], investment: [ { id: "offer-5", title: "גמל להשקעה - מסלול מניות", audience: "משקיעים מנוסים", views: 89, contacts: 12, lastUpdate: "2023-04-28", status: "פעיל", endDate: "2023-06-05", managementFeeAccumulation: 0.6, managementFeeDeposit: 0, managingCompany: "פסגות", viewsOverTime: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 89], contactsOverTime: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12, 12, 12, 12, 12, 12], }, ], } [V0_FILE]typescript:file="lib/agent-dashboard-data/reviews-data.ts" import { agentUser } from "./agent-user" export const reviewsData = { summary: { averageRating: agentUser.agentMetrics?.averageRating || 0, totalReviews: agentUser.agentMetrics?.reviewsCount || 0, positivePercentage: agentUser.agentMetrics?.positiveReviewsPercentage || 0, }, reviews: [ { id: "review-1", client: "לקוח פנסיה", rating: 5, comment: "דוד עזר לי להבין את כל האפשרויות ולבחור את המסלול הטוב ביותר עבורי. חסכתי הרבה כסף בזכותו.", date: "2023-05-01", }, { id: "review-2", client: "לקוח קרן השתלמות", rating: 5, comment: "שירות מעולה ומקצועי, ממליץ בחום!", date: "2023-04-25", }, { id: "review-3", client: "לקוח פנסיה", rating: 4, comment: "הצעה טובה וחיסכון משמעותי. הייתי שמח ליותר הסברים על המסלול.", date: "2023-04-20", }, { id: "review-4", client: "לקוח גמל להשקעה", rating: 5, comment: "דוד מקצועי מאוד ועזר לי להשיג תנאים מעולים.", date: "2023-04-15", }, { id: "review-5", client: "לקוח פנסיה", rating: 4, comment: "שירות טוב, מענה מהיר לשאלות.", date: "2023-04-10" }, ], } [V0_FILE]typescript:file="lib/agent-dashboard-data/performance-data.ts" import { agentUser } from "./agent-user" export const performanceData = { kpis: { offerAcceptanceRate: agentUser.agentMetrics?.offerAcceptanceRate || 0, averageSavings: agentUser.agentMetrics?.averageSavings || 0, profileViews: agentUser.agentMetrics?.profileViews || 0, averageRating: agentUser.agentMetrics?.averageRating || 0, }, trends: { viewsLastMonth: [ 42, 38, 55, 48, 65, 58, 60, 55, 70, 68, 72, 75, 80, 82, 85, 88, 92, 95, 100, 105, 108, 112, 115, 120, 125, 130, 135, 140, 145, ], contactsLastMonth: [ 5, 4, 8, 6, 10, 9, 12, 10, 15, 14, 16, 18, 20, 22, 24, 25, 28, 30, 32, 35, 38, 40, 42, 45, 48, 50, 52, 55, 59, ], }, clientIndustries: [ { industry: "הייטק", percentage: 35 }, { industry: "חינוך", percentage: 20 }, { industry: "פיננסים", percentage: 15 }, { industry: "רפואה", percentage: 12 }, { industry: "תעשייה", percentage: 10 }, { industry: "אחר", percentage: 8 }, ], benchmarks: { offerAcceptanceRate: { agent: agentUser.agentMetrics?.offerAcceptanceRate || 0, platform: 45 }, averageSavings: { agent: agentUser.agentMetrics?.averageSavings || 0, platform: 85000 }, responseTime: { agent: 6, platform: 12 }, // hours clientSatisfaction: { agent: agentUser.agentMetrics?.averageRating || 0, platform: 4.2 }, }, } [V0_FILE]typescript:file="lib/agent-dashboard-data/simple-data.ts" export const getAgentLeads = () => [ { id: "1", name: "דוד לוי", email: "david@example.com", phone: "052-9876543", status: "חדש", product: "פנסיה", createdAt: "2024-01-20", }, { id: "2", name: "רחל אברהם", email: "rachel@example.com", phone: "054-1122334", status: "בטיפול", product: "קרן השתלמות", createdAt: "2024-01-18", }, ] export const getAgentOffers = () => [ { id: "1", title: "הצעת פנסיה מיוחדת", company: "מגדל", type: "פנסיה", status: "פעיל", leads: 8, conversions: 2, createdAt: "2024-01-15", }, { id: "2", title: "קרן השתלמות משתלמת", company: "הראל", type: "קרן השתלמות", status: "ממתין לאישור", leads: 5, conversions: 1, createdAt: "2024-01-12", }, ] [V0_FILE]typescript:file="lib/agent-dashboard-data.ts" isFixed="true" isQuickEdit="true" import { agentStats, chartData } from "./mock-data" import { agentUser } from "./agent-dashboard-data/agent-user" import { leadsData } from "./agent-dashboard-data/leads-data" import { initialOffersData } from "./agent-dashboard-data/offers-data" import { reviewsData } from "./agent-dashboard-data/reviews-data" import { performanceData } from "./agent-dashboard-data/performance-data" import { getAgentLeads, getAgentOffers } from "./agent-dashboard-data/simple-data" // Re-export all data export { agentUser, leadsData, initialOffersData, reviewsData, performanceData } // Legacy function exports for backward compatibility export const getAgentStats = () => agentStats export const getAgentChartData = () => chartData export { getAgentLeads, getAgentOffers } [V0_FILE]typescript:file="components/admin-dashboard/reviews-content/types.ts" export interface Review { id?: string reviewerName: string agentName: string rating: number comment: string date: string flagged: boolean status?: "pending" | "approved" | "rejected" } export interface ReviewDeletionRequest { id: string agentName: string reviewId: string reason: string date: string status: "pending" | "approved" | "rejected" originalReview: Review } export interface ReviewsContentProps { reviewsData?: Review[] } export interface ReviewModalProps { open: boolean onOpenChange: (open: boolean) => void selectedReview: Review | null editedName: string setEditedName: (name: string) => void editedComment: string setEditedComment: (comment: string) => void onUpdate: () => void } export interface DeletionRequestModalProps { open: boolean onOpenChange: (open: boolean) => void selectedDeletionRequest: ReviewDeletionRequest | null } export interface ReviewsTableProps { reviews: Review[] onOpenReview: (review: Review) => void onApproveReview: (reviewId: string) => void onRejectReview: (reviewId: string) => void onRevertReview: (reviewId: string) => void } export interface DeletionRequestsTableProps { deletionRequests: ReviewDeletionRequest[] onOpenDeletionRequestModal: (request: ReviewDeletionRequest) => void onApproveDeletionRequest: (requestId: string) => void onRejectDeletionRequest: (requestId: string) => void onRevertDeletionRequest: (requestId: string) => void } [V0_FILE]typescriptreact:file="components/admin-dashboard/reviews-content/star-rating.tsx" import { Star } from "lucide-react" interface StarRatingProps { rating: number } export function StarRating({ rating }: StarRatingProps) { return ( <div className="flex text-yellow-400"> {Array.from({ length: 5 }).map((_, i) => ( <Star key={i} className="w-4 h-4" fill={i < rating ? "currentColor" : "none"} strokeWidth={i < rating ? 0 : 1.5} /> ))} </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/reviews-content/status-badge.tsx" interface StatusBadgeProps { status: string } export function StatusBadge({ status }: StatusBadgeProps) { switch (status) { case "approved": return <span className="text-green-600 text-xs">מאושר</span> case "rejected": return <span className="text-red-600 text-xs">נדחה</span> default: return <span className="text-yellow-600 text-xs">ממתין</span> } } [V0_FILE]typescriptreact:file="components/admin-dashboard/reviews-content/reviews-table.tsx" "use client" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Eye, Check, X, RotateCcw } from "lucide-react" import { StarRating } from "./star-rating" import { StatusBadge } from "./status-badge" import type { ReviewsTableProps } from "./types" export function ReviewsTable({ reviews, onOpenReview, onApproveReview, onRejectReview, onRevertReview, }: ReviewsTableProps) { return ( <Table> <TableHeader> <TableRow> <TableHead>שם מבקר</TableHead> <TableHead>שם סוכן</TableHead> <TableHead>דירוג</TableHead> <TableHead>תגובה</TableHead> <TableHead>תאריך</TableHead> <TableHead>סטטוס</TableHead> <TableHead>פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {reviews.map((review) => ( <TableRow key={review.id}> <TableCell className="font-medium">{review.reviewerName}</TableCell> <TableCell>{review.agentName}</TableCell> <TableCell> <StarRating rating={review.rating} /> </TableCell> <TableCell className="max-w-xs truncate"> <Eye className="inline-block h-4 w-4 cursor-pointer hover:text-blue-600" onClick={() => onOpenReview(review)} /> </TableCell> <TableCell>{review.date}</TableCell> <TableCell> <StatusBadge status={review.status || "pending"} /> </TableCell> <TableCell> <div className="flex gap-2"> {review.status === "pending" && ( <> <Button variant="ghost" size="sm" onClick={() => onApproveReview(review.id!)} className="text-green-600 hover:text-green-800" > <Check className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" onClick={() => onRejectReview(review.id!)} className="text-red-600 hover:text-red-800" > <X className="h-4 w-4" /> </Button> </> )} {(review.status === "approved" || review.status === "rejected") && ( <Button variant="ghost" size="sm" onClick={() => onRevertReview(review.id!)} className="text-blue-600 hover:text-blue-800" > <RotateCcw className="h-4 w-4" /> </Button> )} </div> </TableCell> </TableRow> ))} </TableBody> </Table> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/reviews-content/deletion-requests-table.tsx" "use client" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Eye, Check, X, RotateCcw } from "lucide-react" import { StatusBadge } from "./status-badge" import type { DeletionRequestsTableProps } from "./types" export function DeletionRequestsTable({ deletionRequests, onOpenDeletionRequestModal, onApproveDeletionRequest, onRejectDeletionRequest, onRevertDeletionRequest, }: DeletionRequestsTableProps) { return ( <Table> <TableHeader> <TableRow> <TableHead>שם סוכן</TableHead> <TableHead>תאריך</TableHead> <TableHead>תגובה</TableHead> <TableHead>סטטוס</TableHead> <TableHead>פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {deletionRequests.map((request) => ( <TableRow key={request.id}> <TableCell className="font-medium">{request.agentName}</TableCell> <TableCell>{request.date}</TableCell> <TableCell className="max-w-xs truncate"> <Eye className="inline-block h-4 w-4 cursor-pointer hover:text-blue-600" onClick={() => onOpenDeletionRequestModal(request)} /> </TableCell> <TableCell> <StatusBadge status={request.status} /> </TableCell> <TableCell> <div className="flex gap-2"> {request.status === "pending" && ( <> <Button variant="ghost" size="sm" onClick={() => onApproveDeletionRequest(request.id)} className="text-green-600 hover:text-green-800" > <Check className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" onClick={() => onRejectDeletionRequest(request.id)} className="text-red-600 hover:text-red-800" > <X className="h-4 w-4" /> </Button> </> )} {request.status !== "pending" && ( <Button variant="ghost" size="sm" onClick={() => onRevertDeletionRequest(request.id)} className="text-blue-600 hover:text-blue-800" > <RotateCcw className="h-4 w-4" /> </Button> )} </div> </TableCell> </TableRow> ))} </TableBody> </Table> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/reviews-content/review-modal.tsx" "use client" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import type { ReviewModalProps } from "./types" export function ReviewModal({ open, onOpenChange, selectedReview, editedName, setEditedName, editedComment, setEditedComment, onUpdate, }: ReviewModalProps) { return ( <Dialog open={open} onOpenChange={onOpenChange}> <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle>סקירת ביקורת</DialogTitle> <DialogDescription>ערוך את הביקורת לפני שתאשר אותה.</DialogDescription> </DialogHeader> <div className="grid gap-4 py-4"> <div className="grid grid-cols-4 items-center gap-4"> <label htmlFor="name" className="text-right font-medium"> שם </label> <Input type="text" id="name" value={editedName} onChange={(e) => setEditedName(e.target.value)} className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <label htmlFor="comment" className="text-right font-medium"> תגובה </label> <Textarea id="comment" value={editedComment} onChange={(e) => setEditedComment(e.target.value)} className="col-span-3" /> </div> </div> <DialogFooter> <Button type="button" onClick={onUpdate}> אישור </Button> </DialogFooter> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/reviews-content/deletion-request-modal.tsx" "use client" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import type { DeletionRequestModalProps } from "./types" export function DeletionRequestModal({ open, onOpenChange, selectedDeletionRequest }: DeletionRequestModalProps) { return ( <Dialog open={open} onOpenChange={onOpenChange}> <DialogContent className="sm:max-w-[525px]"> <DialogHeader> <DialogTitle>בקשת מחיקת ביקורת</DialogTitle> <DialogDescription>צפייה בפרטי הבקשה והביקורת המקורית.</DialogDescription> </DialogHeader> <div className="grid gap-4 py-4"> <div className="grid grid-cols-1 items-center gap-4"> <label htmlFor="reason" className="text-right font-medium"> סיבת הבקשה </label> <Textarea id="reason" value={selectedDeletionRequest?.reason || ""} readOnly className="col-span-3" /> </div> <div className="grid grid-cols-1 items-center gap-4"> <label htmlFor="originalReview" className="text-right font-medium"> ביקורת מקורית </label> <Card> <CardContent> {selectedDeletionRequest?.originalReview ? ( <ScrollArea className="h-40"> <p> <b>שם מבקר:</b> {selectedDeletionRequest.originalReview.reviewerName} </p> <p> <b>דירוג:</b> {selectedDeletionRequest.originalReview.rating} </p> <p> <b>תגובה:</b> {selectedDeletionRequest.originalReview.comment} </p> <p> <b>תאריך:</b> {selectedDeletionRequest.originalReview.date} </p> </ScrollArea> ) : ( <p>הביקורת המקורית לא נמצאה.</p> )} </CardContent> </Card> </div> </div> <DialogFooter> <Button type="button" onClick={() => onOpenChange(false)}> סגור </Button> </DialogFooter> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/reviews-content/mock-data.ts" import type { ReviewDeletionRequest } from "./types" export const mockDeletionRequests: ReviewDeletionRequest[] = [ { id: "deletion-1", agentName: "סוכן הדגמה 1", reviewId: "review-1", reason: "הלקוח טוען שהתגובה לא רלוונטית", date: "2024-01-15", status: "pending", originalReview: { id: "review-1", reviewerName: "לקוח הדגמה 1", agentName: "סוכן הדגמה 1", rating: 5, comment: "סוכן מצויין, שירות מעולה!", date: "2024-01-10", flagged: false, status: "approved", }, }, { id: "deletion-2", agentName: "סוכן הדגמה 2", reviewId: "review-2", reason: "התגובה מכילה מידע שגוי", date: "2024-02-01", status: "pending", originalReview: { id: "review-2", reviewerName: "לקוח הדגמה 2", agentName: "סוכן הדגמה 2", rating: 2, comment: "השירות היה איטי ולא מקצועי.", date: "2024-01-25", flagged: false, status: "approved", }, }, ] [V0_FILE]typescript:file="components/admin-dashboard/leads-content/types.ts" export interface LeadData { id: string clientName: string agentName: string offerId: string date: string type: string status: string } export interface LeadsTrendData { name: string הושלם: number בתהליך: number נדחה: number } export interface LeadsContentProps { leadsData: LeadData[] leadsTrendData: LeadsTrendData[] } [V0_FILE]typescriptreact:file="components/admin-dashboard/leads-content/leads-header.tsx" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Search, Download } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export function LeadsHeader() { return ( <div className="flex justify-between items-center"> <h2 className="text-xl font-bold">ניטור לידים</h2> <div className="flex gap-2"> <div className="relative"> <Search className="absolute right-3 top-2.5 h-4 w-4 text-muted-foreground" /> <Input placeholder="חיפוש..." className="pr-9 w-[250px]" /> </div> <Select> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="סוג התעניינות" /> </SelectTrigger> <SelectContent> <SelectItem value="all">הכל</SelectItem> <SelectItem value="pension">פנסיה</SelectItem> <SelectItem value="gemel">גמל</SelectItem> <SelectItem value="hishtalmut">השתלמות</SelectItem> </SelectContent> </Select> <Button variant="outline"> <Download className="ml-2 h-4 w-4" /> ייצוא ל-CSV </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/leads-content/status-badge.tsx" import { Badge } from "@/components/ui/badge" interface StatusBadgeProps { status: string } export function StatusBadge({ status }: StatusBadgeProps) { const getStatusColor = (status: string) => { switch (status) { case "הושלם": return "bg-green-100 text-green-800 hover:bg-green-100" case "בתהליך": return "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" default: return "bg-red-100 text-red-800 hover:bg-red-100" } } return <Badge className={getStatusColor(status)}>{status}</Badge> } [V0_FILE]typescriptreact:file="components/admin-dashboard/leads-content/leads-table.tsx" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { StatusBadge } from "./status-badge" import type { LeadData } from "./types" interface LeadsTableProps { leadsData: LeadData[] } export function LeadsTable({ leadsData }: LeadsTableProps) { return ( <Card> <CardContent className="pt-6"> <Table> <TableHeader> <TableRow> <TableHead>מזהה ליד</TableHead> <TableHead>שם לקוח</TableHead> <TableHead>שם סוכן</TableHead> <TableHead>מזהה הצעה</TableHead> <TableHead>תאריך</TableHead> <TableHead>סוג התעניינות</TableHead> <TableHead>סטטוס</TableHead> <TableHead>פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {leadsData.map((lead, index) => ( <TableRow key={index}> <TableCell className="font-medium">{lead.id}</TableCell> <TableCell>{lead.clientName}</TableCell> <TableCell>{lead.agentName}</TableCell> <TableCell>{lead.offerId}</TableCell> <TableCell>{lead.date}</TableCell> <TableCell>{lead.type}</TableCell> <TableCell> <StatusBadge status={lead.status} /> </TableCell> <TableCell> <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="sm"> פעולות </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem>ייצוא ל-CSV</DropdownMenuItem> <DropdownMenuItem>סימון חריגה</DropdownMenuItem> <DropdownMenuItem>צפייה בפרטים</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/leads-content/leads-chart.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "@/components/ui/chart" import type { LeadsTrendData } from "./types" interface LeadsChartProps { leadsTrendData: LeadsTrendData[] } export function LeadsChart({ leadsTrendData }: LeadsChartProps) { return ( <Card> <CardHeader> <CardTitle>מגמות לידים</CardTitle> <CardDescription>התפלגות לידים לפי סוג וסטטוס</CardDescription> </CardHeader> <CardContent className="h-80"> <ResponsiveContainer width="100%" height="100%"> <BarChart data={leadsTrendData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}> <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" /> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="הושלם" fill="#10b981" /> <Bar dataKey="בתהליך" fill="#f59e0b" /> <Bar dataKey="נדחה" fill="#ef4444" /> </BarChart> </ResponsiveContainer> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/leads-content.tsx" isFixed="true" isQuickEdit="true" import { LeadsHeader } from "./leads-content/leads-header" import { LeadsTable } from "./leads-content/leads-table" import { LeadsChart } from "./leads-content/leads-chart" import type { LeadsContentProps } from "./leads-content/types" export function LeadsContent({ leadsData, leadsTrendData }: LeadsContentProps) { return ( <div className="space-y-6"> <LeadsHeader /> <LeadsTable leadsData={leadsData} /> <LeadsChart leadsTrendData={leadsTrendData} /> </div> ) } [V0_FILE]typescript:file="components/agent-dashboard/leads-content/types.ts" isFixed="true" isQuickEdit="true" import type { JSX } from "react" export interface LeadsContentProps { leadsData: any leads: any[] handleContactLead: (lead: any) => void handleCycleLeadStatus: (leadId: string) => void formatDate: (date: string) => string renderLeadActivityChart: () => JSX.Element filterValues?: { dateRange: string offerType: string status: string interestType: string } onFilterChange?: (key: string, value: string) => void } export interface SummaryCardsProps { leadsData: any } export interface LeadsTableProps { leads: any[] handleViewLeadDetails: (lead: any) => void handleCycleLeadStatus: (leadId: string) => void formatDate: (date: string) => string filterValues?: { dateRange: string offerType: string status: string interestType: string } onFilterChange?: (key: string, value: string) => void } export interface LeadFunnelProps { leadsData: any } export interface LeadDetailsModalProps { isOpen: boolean onClose: () => void selectedLead: any formatDate: (date: string) => string } [V0_FILE]typescriptreact:file="components/agent-dashboard/leads-content/summary-cards.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import type { SummaryCardsProps } from "./types" export default function SummaryCards({ leadsData }: SummaryCardsProps) { return ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="relative group"> <Card> <CardContent className="p-6"> <div className="flex flex-col items-center"> <div className="text-2xl font-bold">{leadsData.summary.totalOfferViews}</div> <p className="text-muted-foreground">צפיות בהצעות</p> </div> </CardContent> </Card> <div className="absolute z-50 invisible group-hover:visible bg-white border rounded-md shadow-lg p-3 w-64 text-sm right-0 mt-2"> <p> מספר הפעמים שהצעות שלך נצפו על ידי משתמשים באתר. נספר בכל פעם שמשתמש צופה בהצעה, גם אם אותו משתמש צפה מספר פעמים. </p> </div> </div> <div className="relative group"> <Card> <CardContent className="p-6"> <div className="flex flex-col items-center"> <div className="text-2xl font-bold">{leadsData.summary.totalLeads}</div> <p className="text-muted-foreground">סה"כ התעניינויות</p> </div> </CardContent> </Card> <div className="absolute z-50 invisible group-hover:visible bg-white border rounded-md shadow-lg p-3 w-64 text-sm right-0 mt-2"> <p>מספר המשתמשים שהביעו התעניינות בהצעות שלך. כולל משתמשים שצפו בפרופיל שלך או ביקשו מידע נוסף.</p> </div> </div> <div className="relative group"> <Card> <CardContent className="p-6"> <div className="flex flex-col items-center"> <div className="text-2xl font-bold">{leadsData.summary.convertedLeads}</div> <p className="text-muted-foreground">התעניינויות שהבשילו</p> </div> </CardContent> </Card> <div className="absolute z-50 invisible group-hover:visible bg-white border rounded-md shadow-lg p-3 w-64 text-sm right-0 mt-2"> <p>מספר המשתמשים שהתקדמו לשלב הבא בתהליך, כגון יצירת קשר ישיר או בקשת הצעה מותאמת אישית.</p> </div> </div> <div className="relative group"> <Card> <CardContent className="p-6"> <div className="flex flex-col items-center"> <div className="text-2xl font-bold">{leadsData.summary.conversionRate}%</div> <p className="text-muted-foreground">שיעור הבשלה</p> </div> </CardContent> </Card> <div className="absolute z-50 invisible group-hover:visible bg-white border rounded-md shadow-lg p-3 w-64 text-sm right-0 mt-2"> <p> אחוז ההתעניינויות שהבשילו מתוך סך כל ההתעניינויות. מחושב כ: (התעניינויות שהבשילו / סה"כ התעניינויות) × 100. </p> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/leads-content/lead-details-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import type { LeadDetailsModalProps } from "./types" export default function LeadDetailsModal({ isOpen, onClose, selectedLead, formatDate }: LeadDetailsModalProps) { // Mock offer and client data const mockOfferDetails = { title: "הצעת פנסיה מובילה", company: "הראל פנסיה וגמל", feeAccumulated: 0.5, feeDeposit: 0.3, description: "הצעה מיוחדת לעובדי הייטק עם תנאים מועדפים", } const mockClientDetails = { name: "יוסי כהן", phone: "050-1234567", email: "yossi@example.com", } return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="sm:max-w-[425px] max-h-[80vh] overflow-y-auto"> <DialogHeader> <DialogTitle>פרטי התעניינות</DialogTitle> </DialogHeader> {selectedLead && ( <div className="space-y-4"> {/* Offer Summary /} <div> <h3 className="text-sm font-semibold mb-2">סיכום הצעה</h3> <div className="bg-gray-50 p-3 rounded-lg space-y-1 text-sm"> <div className="flex justify-between"> <span className="font-medium">כותרת:</span> <span>{mockOfferDetails.title}</span> </div> <div className="flex justify-between"> <span className="font-medium">חברה:</span> <span>{mockOfferDetails.company}</span> </div> <div className="flex justify-between"> <span className="font-medium">דמי ניהול צבירה:</span> <span>{mockOfferDetails.feeAccumulated}%</span> </div> <div className="flex justify-between"> <span className="font-medium">דמי ניהול הפקדה:</span> <span>{mockOfferDetails.feeDeposit}%</span> </div> </div> </div> {/ Client Contact Info - Only if client requested contact /} {selectedLead.interestType === "ביקש יצירת קשר" && ( <div> <h3 className="text-sm font-semibold mb-2">פרטי יצירת קשר</h3> <div className="bg-blue-50 p-3 rounded-lg space-y-1 text-sm"> <div className="flex justify-between"> <span className="font-medium">שם:</span> <span>{mockClientDetails.name}</span> </div> <div className="flex justify-between"> <span className="font-medium">טלפון:</span> <span>{mockClientDetails.phone}</span> </div> <div className="flex justify-between"> <span className="font-medium">אימייל:</span> <span>{mockClientDetails.email}</span> </div> </div> </div> )} {/ Lead Info /} <div> <h3 className="text-sm font-semibold mb-2">פרטי התעניינות</h3> <div className="bg-gray-50 p-3 rounded-lg space-y-1 text-sm"> <div className="flex justify-between"> <span className="font-medium">תאריך:</span> <span>{formatDate(selectedLead.date)}</span> </div> <div className="flex justify-between"> <span className="font-medium">סוג:</span> <span>{selectedLead.interestType}</span> </div> <div className="flex justify-between"> <span className="font-medium">סטטוס:</span> <Badge className={ selectedLead.status === "בטיפול" ? "bg-blue-100 text-blue-800" : selectedLead.status === "חדש" ? "bg-yellow-100 text-yellow-800" : "bg-green-100 text-green-800" } > {selectedLead.status} </Badge> </div> </div> </div> </div> )} </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/leads-content.tsx" isFixed="true" isQuickEdit="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { useState } from "react" import SummaryCards from "./leads-content/summary-cards" import LeadsTable from "./leads-content/leads-table" import LeadFunnel from "./leads-content/lead-funnel" import LeadDetailsModal from "./leads-content/lead-details-modal" import type { LeadsContentProps } from "./leads-content/types" export default function LeadsContent({ leadsData, leads, handleContactLead, handleCycleLeadStatus, formatDate, renderLeadActivityChart, filterValues, onFilterChange, }: LeadsContentProps) { const [selectedLead, setSelectedLead] = useState<any>(null) const [showLeadDetails, setShowLeadDetails] = useState(false) const handleViewLeadDetails = (lead: any) => { setSelectedLead(lead) setShowLeadDetails(true) } return ( <div className="space-y-6"> {/ Summary Cards /} <SummaryCards leadsData={leadsData} /> {/ Leads Table - Enhanced /} <LeadsTable leads={leads} handleViewLeadDetails={handleViewLeadDetails} handleCycleLeadStatus={handleCycleLeadStatus} formatDate={formatDate} filterValues={filterValues} onFilterChange={onFilterChange} /> {/ Lead Funnel Visualization /} <LeadFunnel leadsData={leadsData} /> {/ Lead Activity Chart /} <Card> <CardHeader> <CardTitle>פעילות לידים</CardTitle> <CardDescription>מעקב אחר פעילות הלידים לאורך זמן</CardDescription> </CardHeader> <CardContent>{renderLeadActivityChart()}</CardContent> </Card> {/ Lead Details Modal /} <LeadDetailsModal isOpen={showLeadDetails} onClose={() => setShowLeadDetails(false)} selectedLead={selectedLead} formatDate={formatDate} /> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/star-rating.tsx" import { Star } from "lucide-react" interface StarRatingProps { rating: number } export function StarRating({ rating }: StarRatingProps) { return ( <div className="flex text-yellow-400"> {Array.from({ length: 5 }).map((_, i) => ( <Star key={i} className="w-4 h-4" fill={i < rating ? "currentColor" : "none"} strokeWidth={i < rating ? 0 : 1.5} /> ))} </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/offer-card.tsx" "use client" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { CalculatorIcon } from "../calculator-icon" import { StarRating } from "./star-rating" import type { OfferCardProps } from "./types" export function OfferCard({ offer, index, activeOfferType, selectedOffers, confirmedOffers, onSelectOffer, onCalculateOffer, }: OfferCardProps) { return ( <Card key={offer.id || `offer-${index}`} className={`${ confirmedOffers[activeOfferType]?.id === offer.id ? "ring-2 ring-green-500 bg-green-50" : selectedOffers[activeOfferType]?.id === offer.id ? "ring-2 ring-blue-500 bg-blue-50" : "" }`} > <CardHeader className="pb-2"> <div className="flex justify-between items-center"> <CardTitle className="text-lg">{offer.company}</CardTitle> <div className="flex items-center gap-2"> {/ Calculator Icon /} {onCalculateOffer && ( <CalculatorIcon offer={offer} offerType={activeOfferType} onCalculateOffer={onCalculateOffer} /> )} {/ Existing badges /} {confirmedOffers[activeOfferType]?.id === offer.id && ( <Badge className="bg-green-600 text-white">נבחר</Badge> )} {selectedOffers[activeOfferType]?.id === offer.id && !confirmedOffers[activeOfferType] && ( <Badge className="bg-blue-600 text-white">נבחר זמנית</Badge> )} </div> </div> </CardHeader> <CardContent> <div className="flex flex-col gap-4"> <div className="space-y-2"> <div className="flex justify-between"> <span className="text-gray-500">דמי ניהול מהצבירה:</span> <span className="font-medium text-green-600">{offer.managementFeeAccumulated}%</span> </div> <div className="flex justify-between"> <span className="text-gray-500">דמי ניהול מההפקדה:</span> <span className="font-medium text-green-600">{offer.managementFeeDeposit}%</span> </div> <div className="flex justify-between"> <span className="text-gray-500">שם החברה המנהלת:</span> <span className="font-medium">{offer.company}</span> </div> <div className="flex justify-between"> <span className="text-gray-500">מסלול השקעה:</span> <span className="font-medium"> {offer.investmentTrack || (index === 0 ? "מסלול כללי" : index === 1 ? "מסלול מניות" : "מסלול הלכה")} </span> </div> </div> <div className="border-t pt-3 mt-1"> <div className="flex items-center justify-between"> <span className="text-gray-500">דירוג סוכן:</span> <StarRating rating={offer.agent.rating} /> </div> <div className="mt-2 text-sm text-gray-600"> <p className="italic">"{offer.agent.reviews[0].text.substring(0, 50)}..."</p> <p className="text-right text-xs mt-1">- לקוח אנונימי</p> </div> </div> </div> </CardContent> <CardFooter className="pt-0"> <Button className="w-full" onClick={() => onSelectOffer(offer)} disabled={confirmedOffers[activeOfferType] && confirmedOffers[activeOfferType].id !== offer.id} variant={ confirmedOffers[activeOfferType]?.id === offer.id ? "default" : selectedOffers[activeOfferType]?.id === offer.id ? "secondary" : "outline" } > {confirmedOffers[activeOfferType]?.id === offer.id ? "הצעה נבחרה" : selectedOffers[activeOfferType]?.id === offer.id ? "הצעה נבחרת זמנית" : "בחר הצעה"} </Button> </CardFooter> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/agent-info-modal.tsx" "use client" import { X, Briefcase, Building, Users } from "lucide-react" import { StarRating } from "./star-rating" import type { AgentInfoModalProps } from "./types" export function AgentInfoModal({ selectedAgent, setSelectedAgent, agentInfoRef }: AgentInfoModalProps) { if (!selectedAgent) return null return ( <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> <div ref={agentInfoRef} className="bg-white rounded-lg shadow-xl w-full max-w-md overflow-hidden"> <div className="p-4 bg-blue-50 border-b flex justify-between items-center"> <h3 className="text-lg font-bold">{selectedAgent.name}</h3> <button onClick={() => setSelectedAgent(null)} className="p-1 rounded-full hover:bg-blue-100"> <X className="h-5 w-5" /> </button> </div> <div className="p-4"> <div className="flex items-center gap-3 mb-4"> <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-2xl font-bold"> {selectedAgent.name.charAt(0)} </div> <div> <div className="font-medium">{selectedAgent.name}</div> <div className="flex mt-1"> <StarRating rating={selectedAgent.rating} /> </div> </div> </div> <div className="space-y-3 mb-4"> <div className="flex items-start gap-2"> <Briefcase className="h-5 w-5 text-blue-600 mt-0.5" /> <div> <div className="font-medium">התמחות</div> <div className="text-gray-600">{selectedAgent.specialization}</div> </div> </div> <div className="flex items-start gap-2"> <Building className="h-5 w-5 text-blue-600 mt-0.5" /> <div> <div className="font-medium">סוכנות</div> <div className="text-gray-600">{selectedAgent.agency}</div> </div> </div> </div> <div className="border-t pt-4"> <div className="flex items-center gap-2 mb-3"> <Users className="h-5 w-5 text-blue-600" /> <h4 className="font-medium">ביקורות לקוחות</h4> </div> <div className="space-y-3"> {selectedAgent.reviews.map((review: any, index: number) => ( <div key={index} className="bg-gray-50 p-3 rounded-lg"> <div className="flex justify-between items-center mb-1"> <div className="font-medium">{review.author}</div> <StarRating rating={review.rating} /> </div> <p className="text-sm text-gray-600">{review.text}</p> </div> ))} </div> </div> <div className="mt-4 pt-4 border-t">{/ Contact button removed /}</div> </div> </div> </div> ) } [V0_FILE]typescript:file="components/dashboard/profile-content/types.ts" export interface ProfileContentProps { userName: string userEmail: string phoneNumber: string setPhoneNumber: (phone: string) => void pensionDetails: any } export interface ProductData { company: string investmentTrack: string managementFeeAccumulated: string managementFeeDeposit: string } export interface ProfileHeaderProps { userName: string userEmail: string } export interface PersonalInfoProps { userName: string userEmail: string phoneNumber: string setPhoneNumber: (phone: string) => void } export type EmploymentInfoProps = {} export interface ProductDetailsProps { activeProductTab: string setActiveProductTab: (tab: string) => void pensionData: ProductData setPensionData: (data: ProductData) => void providentData: ProductData setProvidentData: (data: ProductData) => void studyData: ProductData setStudyData: (data: ProductData) => void } export interface ProductTabsProps { activeProductTab: string setActiveProductTab: (tab: string) => void } export interface ProductFormProps { activeProductTab: string getCurrentTabData: () => ProductData setCurrentTabData: (field: string, value: string) => void } [V0_FILE]typescriptreact:file="components/dashboard/profile-content/profile-header.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import type { ProfileHeaderProps } from "./types" export function ProfileHeader({ userName, userEmail }: ProfileHeaderProps) { return ( <Card> <CardHeader> <CardTitle>פרופיל והגדרות</CardTitle> <CardDescription>עדכן את הפרטים האישיים שלך והגדרות הפנסיה</CardDescription> </CardHeader> <CardContent> {/ Profile Information /} <div className="flex flex-col md:flex-row gap-4 items-center mb-6"> <div className="w-24 h-24 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-3xl font-bold"> {userName.charAt(0)} </div> <div> <h2 className="text-2xl font-bold">{userName}</h2> <p className="text-gray-500">{userEmail}</p> </div> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/profile-content/personal-info-section.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import type { PersonalInfoProps } from "./types" export function PersonalInfoSection({ userName, userEmail, phoneNumber, setPhoneNumber }: PersonalInfoProps) { return ( <Card> <CardHeader className="pb-3"> <CardTitle className="text-lg">פרטים אישיים</CardTitle> </CardHeader> <CardContent> <div className="grid md:grid-cols-2 gap-4"> <div className="space-y-2"> <Label htmlFor="profile-name" className="text-sm font-medium"> שם מלא </Label> <Input id="profile-name" defaultValue={userName} className="text-sm" /> </div> <div className="space-y-2"> <Label htmlFor="profile-email" className="text-sm font-medium"> דוא"ל </Label> <Input id="profile-email" type="email" defaultValue={userEmail} className="text-sm" /> </div> <div className="space-y-2"> <Label htmlFor="profile-phone" className="text-sm font-medium"> טלפון </Label> <Input id="profile-phone" placeholder="הזן מספר טלפון" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} className="text-sm" /> </div> <div className="space-y-2"> <Label htmlFor="profile-birthdate" className="text-sm font-medium"> תאריך לידה </Label> <Input id="profile-birthdate" type="date" defaultValue="1980-01-01" className="text-sm" /> </div> <div className="space-y-2"> <Label htmlFor="profile-gender" className="text-sm font-medium"> מגדר </Label> <select id="profile-gender" className="w-full p-2 border rounded-md text-sm"> <option value="male">זכר</option> <option value="female">נקבה</option> <option value="other">אחר</option> </select> </div> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/profile-content/employment-info-section.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import type { EmploymentInfoProps } from "./types" export function EmploymentInfoSection({}: EmploymentInfoProps) { return ( <Card> <CardHeader className="pb-3"> <CardTitle className="text-lg">פרטי תעסוקה</CardTitle> </CardHeader> <CardContent> <div className="grid md:grid-cols-2 gap-4"> <div className="space-y-2"> <Label htmlFor="employment-status" className="text-sm font-medium"> סטטוס תעסוקה </Label> <select id="employment-status" className="w-full p-2 border rounded-md text-sm"> <option value="employed">שכיר</option> <option value="self-employed">עצמאי</option> <option value="unemployed">לא עובד</option> <option value="student">סטודנט</option> <option value="retired">פנסיונר</option> </select> </div> <div className="space-y-2"> <Label htmlFor="work-sector" className="text-sm font-medium"> מגזר </Label> <select id="work-sector" className="w-full p-2 border rounded-md text-sm"> <option value="private">פרטי</option> <option value="public">ציבורי</option> <option value="nonprofit">ללא כוונת רווח</option> <option value="self-employed">עצמאי</option> </select> </div> <div className="space-y-2"> <Label htmlFor="work-field" className="text-sm font-medium"> תחום עבודה </Label> <select id="work-field" className="w-full p-2 border rounded-md text-sm"> <option value="tech">הייטק וטכנולוגיה</option> <option value="finance">פיננסים ובנקאות</option> <option value="education">חינוך</option> <option value="healthcare">בריאות</option> <option value="government">ממשל וביטחון</option> <option value="retail">קמעונאות ושירותים</option> <option value="manufacturing">תעשייה וייצור</option> <option value="other">אחר</option> </select> </div> <div className="space-y-2"> <Label htmlFor="monthly-salary" className="text-sm font-medium"> שכר חודשי ברוטו </Label> <select id="monthly-salary" className="w-full p-2 border rounded-md text-sm"> <option value="0-5000">עד 5,000 ₪</option> <option value="5000-10000">5,000 - 10,000 ₪</option> <option value="10000-15000">10,000 - 15,000 ₪</option> <option value="15000-20000">15,000 - 20,000 ₪</option> <option value="20000-30000">20,000 - 30,000 ₪</option> <option value="30000-50000">30,000 - 50,000 ₪</option> <option value="50000+">מעל 50,000 ₪</option> </select> </div> <div className="space-y-2"> <Label htmlFor="monthly-contribution" className="text-sm font-medium"> הפקדה חודשית נוכחית </Label> <select id="monthly-contribution" className="w-full p-2 border rounded-md text-sm"> <option value="0-500">עד 500 ₪</option> <option value="500-1000">500 - 1,000 ₪</option> <option value="1000-2000">1,000 - 2,000 ₪</option> <option value="2000-3000">2,000 - 3,000 ₪</option> <option value="3000-5000">3,000 - 5,000 ₪</option> <option value="5000+">מעל 5,000 ₪</option> </select> </div> <div className="space-y-2"> <Label htmlFor="accumulated-amount" className="text-sm font-medium"> סכום צבור נוכחי </Label> <select id="accumulated-amount" className="w-full p-2 border rounded-md text-sm"> <option value="0-50000">עד 50,000 ₪</option> <option value="50000-100000">50,000 - 100,000 ₪</option> <option value="100000-250000">100,000 - 250,000 ₪</option> <option value="250000-500000">250,000 - 500,000 ₪</option> <option value="500000-1000000">500,000 - 1,000,000 ₪</option> <option value="1000000+">מעל 1,000,000 ₪</option> </select> </div> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/profile-content/product-tabs.tsx" "use client" import type { ProductTabsProps } from "./types" export function ProductTabs({ activeProductTab, setActiveProductTab }: ProductTabsProps) { return ( <div className="flex justify-center border-b mb-4"> <button className={`px-4 py-2 font-medium ${ activeProductTab === "pension" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveProductTab("pension")} > פנסיה </button> <button className={`px-4 py-2 font-medium ${ activeProductTab === "provident" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveProductTab("provident")} > קופת גמל </button> <button className={`px-4 py-2 font-medium ${ activeProductTab === "study" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveProductTab("study")} > קרן השתלמות </button> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/profile-content/product-form.tsx" "use client" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import type { ProductFormProps } from "./types" export function ProductForm({ activeProductTab, getCurrentTabData, setCurrentTabData }: ProductFormProps) { return ( <div className="grid md:grid-cols-2 gap-4"> <div className="space-y-2"> <Label htmlFor={`current-company-${activeProductTab}`} className="text-sm font-medium"> חברה נוכחית </Label> <select id={`current-company-${activeProductTab}`} className="w-full p-2 border rounded-md text-sm" value={getCurrentTabData().company} onChange={(e) => setCurrentTabData("company", e.target.value)} > <option value="">בחר חברה</option> <option value="migdal">מגדל</option> <option value="harel">הראל</option> <option value="menora">מנורה מבטחים</option> <option value="clal">כלל</option> <option value="altshuler">אלטשולר שחם</option> <option value="psagot">פסגות</option> <option value="meitav">מיטב דש</option> <option value="phoenix">הפניקס</option> <option value="other">אחר</option> </select> </div> <div className="space-y-2"> <Label htmlFor={`current-investment-track-${activeProductTab}`} className="text-sm font-medium"> מסלול השקעה נוכחי </Label> <select id={`current-investment-track-${activeProductTab}`} className="w-full p-2 border rounded-md text-sm" value={getCurrentTabData().investmentTrack} onChange={(e) => setCurrentTabData("investmentTrack", e.target.value)} > <option value="">בחר מסלול</option> <option value="general">מסלול כללי</option> <option value="stocks">מסלול מניות</option> <option value="bonds">מסלול אג״ח</option> <option value="halakha">מסלול הלכה</option> <option value="shekel">מסלול שקלי</option> <option value="foreign">מסלול חו״ל</option> <option value="passive">מסלול פאסיבי</option> <option value="index">מסלול מדדי</option> </select> </div> <div className="space-y-2"> <Label htmlFor={`management-fee-accumulated-${activeProductTab}`} className="text-sm font-medium"> דמי ניהול מהצבירה (%) </Label> <Input id={`management-fee-accumulated-${activeProductTab}`} type="number" step="0.01" min="0" max="2" placeholder="הזן דמי ניהול מהצבירה" className="text-sm border rounded-md" value={getCurrentTabData().managementFeeAccumulated} onChange={(e) => setCurrentTabData("managementFeeAccumulated", e.target.value)} /> </div> <div className="space-y-2"> <Label htmlFor={`management-fee-deposit-${activeProductTab}`} className="text-sm font-medium"> דמי ניהול מההפקדה (%) </Label> <Input id={`management-fee-deposit-${activeProductTab}`} type="number" step="0.1" min="0" max="6" placeholder="הזן דמי ניהול מההפקדה" className="text-sm border rounded-md" value={getCurrentTabData().managementFeeDeposit} onChange={(e) => setCurrentTabData("managementFeeDeposit", e.target.value)} /> </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/profile-content/product-details-section.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ProductTabs } from "./product-tabs" import { ProductForm } from "./product-form" import type { ProductDetailsProps } from "./types" export function ProductDetailsSection({ activeProductTab, setActiveProductTab, pensionData, setPensionData, providentData, setProvidentData, studyData, setStudyData, }: ProductDetailsProps) { const getCurrentTabData = () => { switch (activeProductTab) { case "pension": return pensionData case "provident": return providentData case "study": return studyData default: return pensionData } } const setCurrentTabData = (field: string, value: string) => { switch (activeProductTab) { case "pension": setPensionData((prev) => ({ ...prev, [field]: value })) break case "provident": setProvidentData((prev) => ({ ...prev, [field]: value })) break case "study": setStudyData((prev) => ({ ...prev, [field]: value })) break } } return ( <Card> <CardHeader className="pb-3"> <CardTitle className="text-lg">פרטי מוצרים נוכחיים</CardTitle> </CardHeader> <CardContent> <ProductTabs activeProductTab={activeProductTab} setActiveProductTab={setActiveProductTab} /> <ProductForm activeProductTab={activeProductTab} getCurrentTabData={getCurrentTabData} setCurrentTabData={setCurrentTabData} /> </CardContent> </Card> ) } [V0_FILE]png:file="public/images/pension-dashboard-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screen%20Shot%202025-07-02%20at%2017.04.17-Bd5mZiLEgXxNPlnRwbZOVx25fQxulz.png" [V0_FILE]png:file="public/images/pension-dashboard-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screen%20Shot%202025-07-02%20at%2017.04.43-kjkPlLUTPxijkKVq1UddIRonH2pUAR.png" [V0_FILE]typescriptreact:file="app/components/hero-section.tsx" "use client" import { Button } from "@/components/ui/button" import { Briefcase, LineChart } from "lucide-react" import Image from "next/image" interface HeroSectionProps { onOpenForm: () => void } export function HeroSection({ onOpenForm }: HeroSectionProps) { return ( <section className="relative py-20 md:py-32 overflow-hidden"> <div className="absolute inset-0 bg-gradient-to-bl from-blue-500/20 to-blue-600/10 -z-10" /> <div className="container mx-auto px-4 flex flex-col md:flex-row-reverse items-center gap-12"> <div className="md:w-1/2 space-y-6"> <h1 className="text-4xl md:text-6xl font-bold leading-tight"> פתרונות <span className="text-blue-600">פנסיוניים</span> חכמים לעתיד שלך </h1> <p className="text-lg text-muted-foreground"> גורו פנסיוני מחבר בין לקוחות פרטיים לסוכני פנסיה מובילים, עם ליווי מקצועי והתאמה אישית לצרכים שלך. </p> <div className="flex justify-center pt-4"> <Button size="lg" className="gap-2 bg-blue-600 hover:bg-blue-700" onClick={onOpenForm}> <Briefcase className="h-5 w-5 ml-1" /> שפר לי את התנאים! </Button> </div> </div> <div className="md:w-1/2 relative"> <div className="relative w-full h-[400px] bg-gradient-to-bl from-blue-400/20 to-blue-500/10 rounded-2xl overflow-hidden"> {/ Pension Dashboard Image 1 - Top Right /} <div className="absolute top-10 right-10 w-64 h-auto rounded-lg shadow-lg rotate-6 animate-float overflow-hidden"> <Image src="/images/pension-dashboard-1.png" alt="ניתוח וגרפים פנסיוניים" width={600} height={450} className="w-full h-auto object-cover" /> </div> {/ Pension Dashboard Image 2 - Bottom Left /} <div className="absolute bottom-10 left-10 w-72 h-auto rounded-lg shadow-lg -rotate-3 animate-float overflow-hidden" style={{ animationDelay: "2s" }} > <Image src="/images/pension-dashboard-2.png" alt="השוואת הצעות פנסיוניות" width={600} height={450} className="w-full h-auto object-cover" /> </div> {/ Center Circle with Icon /} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center"> <LineChart className="h-16 w-16 text-blue-600" /> </div> </div> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/action-buttons.tsx" "use client" import { Button } from "@/components/ui/button" import { RefreshCw } from "lucide-react" import type { ActionButtonsProps } from "./types" export function ActionButtons({ onResetFilters, confirmedOffers, activeOfferType }: ActionButtonsProps) { return ( <div className="flex flex-col md:flex-row justify-center gap-4 mt-6"> <Button variant="outline" className="flex items-center gap-2 bg-transparent" onClick={onResetFilters} disabled={confirmedOffers[activeOfferType]} > <RefreshCw className="h-4 w-4" /> הצג הצעות חדשות </Button> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/disputes-content.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { AlertTriangle, Clock, CheckCircle } from "lucide-react" import { clientDisputes } from "@/lib/mock-data" export function DisputesContent() { const getStatusIcon = (status: string) => { switch (status) { case "חדש": return <AlertTriangle className="h-4 w-4 text-red-500" /> case "בבדיקה": return <Clock className="h-4 w-4 text-yellow-500" /> case "נפתר": return <CheckCircle className="h-4 w-4 text-green-500" /> default: return <AlertTriangle className="h-4 w-4 text-gray-500" /> } } const getStatusColor = (status: string) => { switch (status) { case "חדש": return "bg-red-100 text-red-800 hover:bg-red-100" case "בבדיקה": return "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" case "נפתר": return "bg-green-100 text-green-800 hover:bg-green-100" default: return "bg-gray-100 text-gray-800 hover:bg-gray-100" } } const formatDate = (timestamp: string) => { return new Date(timestamp).toLocaleDateString("he-IL", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", }) } return ( <div className="space-y-6"> {/ Disputes Section /} <Card> <CardHeader> <CardTitle className="flex items-center gap-2"> <AlertTriangle className="h-5 w-5 text-orange-500" /> מחלוקות </CardTitle> </CardHeader> <CardContent> {clientDisputes.length > 0 ? ( <div className="space-y-4"> {clientDisputes.map((dispute) => ( <div key={dispute.id} className="border rounded-lg p-4"> <div className="flex justify-between items-start mb-3"> <div className="flex items-center gap-2"> {getStatusIcon(dispute.status)} <h3 className="font-medium">מחלוקת על הצעה מחברת {dispute.offerSummary.company}</h3> </div> <Badge className={getStatusColor(dispute.status)}>{dispute.status}</Badge> </div> <div className="space-y-2 text-sm"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <span className="text-gray-500">סוכן: </span> <span className="font-medium">{dispute.offerSummary.agentName}</span> </div> <div> <span className="text-gray-500">תאריך פתיחה: </span> <span className="font-medium">{formatDate(dispute.timestamp)}</span> </div> <div> <span className="text-gray-500">סיבה: </span> <span className="font-medium">{dispute.reason}</span> </div> <div> <span className="text-gray-500">מוצר: </span> <span className="font-medium"> {dispute.productType === "pension" ? "פנסיה" : dispute.productType === "provident" ? "קרן השתלמות" : "קופת גמל"} </span> </div> </div> {dispute.comment && ( <div className="mt-3"> <span className="text-gray-500">הערות: </span> <p className="text-gray-700 mt-1">{dispute.comment}</p> </div> )} {dispute.adminResponse && ( <div className="mt-3 p-3 bg-blue-50 rounded-lg"> <span className="text-blue-700 font-medium">תגובת צוות האתר: </span> <p className="text-blue-700 mt-1">{dispute.adminResponse}</p> </div> )} </div> </div> ))} </div> ) : ( <div className="text-center py-8 text-gray-500"> <AlertTriangle className="h-12 w-12 mx-auto mb-3 text-gray-300" /> <p>אין מחלוקות פתוחות כרגע</p> </div> )} </CardContent> </Card> </div> ) } [V0_FILE]typescript:file="app/dashboard/content-renderer.tsx" "use client" import { getCurrentUserRates, calculateSavings, formatCurrency } from "@/lib/dashboard-utils" import { HomeContent } from "@/components/dashboard/home-content" import { OffersContent } from "@/components/dashboard/offers-content" import { CalculatorContent } from "@/components/dashboard/calculator-content" import { MessagesContent } from "@/components/dashboard/messages-content" import { DisputesContent } from "@/components/dashboard/disputes-content" import { ProfileContent } from "@/components/dashboard/profile-content" import { SelectedOffersContent } from "@/components/dashboard/selected-offers-content" interface ContentRendererProps { state: any handlers: any userName: string userEmail: string showPhoneInput: boolean } export function ContentRenderer({ state, handlers, userName, userEmail, showPhoneInput }: ContentRendererProps) { switch (state.activeContent) { case "home": return ( <HomeContent activeOverviewType={state.activeOverviewType} setActiveOverviewType={state.setActiveOverviewType} getCurrentUserRates={getCurrentUserRates} /> ) case "offers": return ( <OffersContent activeOfferType={state.activeOfferType} setActiveOfferType={state.setActiveOfferType} showFilters={state.showFilters} setShowFilters={state.setShowFilters} showDeclineAllOptions={state.showDeclineAllOptions} setShowDeclineAllOptions={state.setShowDeclineAllOptions} declineAllReason={state.declineAllReason} setDeclineAllReason={state.setDeclineAllReason} onDeclineAll={handlers.onDeclineAll} onResetFilters={handlers.onResetFilters} getCurrentOffers={handlers.getCurrentOffers} getCurrentUserRates={getCurrentUserRates} filters={state.filters} onFilterChange={handlers.onFilterChange} onApplyFilters={handlers.onApplyFilters} openDropdown={state.openDropdown} onToggleDropdown={handlers.onToggleDropdown} selectedOptions={state.selectedOptions} onCheckboxChange={handlers.onCheckboxChange} selectedOffers={state.selectedOffers} confirmedOffers={state.confirmedOffers} declinedOffers={state.declinedOffers} onSelectOffer={handlers.onSelectOffer} selectedOffer={state.selectedOffer} selectedAgent={state.selectedAgent} setSelectedAgent={state.setSelectedAgent} contactOption={state.contactOption} onContactOptionChange={handlers.onContactOptionChange} contactMethod={state.contactMethod} onContactMethodChange={handlers.onContactMethodChange} showPhoneInput={showPhoneInput} phoneNumber={state.phoneNumber} setPhoneNumber={state.setPhoneNumber} onSubmitContactRequest={handlers.onSubmitContactRequest} successMessage={state.successMessage} showDeclineOptions={state.showDeclineOptions} setShowDeclineOptions={state.setShowDeclineOptions} declineReason={state.declineReason} setDeclineReason={state.setDeclineReason} onDeclineOffer={handlers.onDeclineOffer} showSelectionMessage={state.showSelectionMessage} agentInfoRef={state.agentInfoRef} offerSelectionRef={state.offerSelectionRef} randomizationTooltipVisible={state.randomizationTooltipVisible} setRandomizationTooltipVisible={state.setRandomizationTooltipVisible} setActiveContent={state.setActiveContent} onCalculateOffer={handlers.onCalculateOffer} /> ) case "calculator": return ( <CalculatorContent currentFee={state.currentFee} setCurrentFee={state.setCurrentFee} depositFee={state.depositFee} setDepositFee={state.setDepositFee} improvedFee={state.improvedFee} setImprovedFee={state.setImprovedFee} improvedDepositFee={state.improvedDepositFee} setImprovedDepositFee={state.setImprovedDepositFee} monthlyDeposit={state.monthlyDeposit} setMonthlyDeposit={state.setMonthlyDeposit} years={state.years} setYears={state.setYears} calculateSavings={() => calculateSavings( state.currentFee, state.depositFee, state.improvedFee, state.improvedDepositFee, state.monthlyDeposit, state.years, ) } formatCurrency={formatCurrency} savingsTooltipVisible={state.savingsTooltipVisible} setSavingsTooltipVisible={state.setSavingsTooltipVisible} randomizationTooltipVisible={state.randomizationTooltipVisible} setRandomizationTooltipVisible={state.setRandomizationTooltipVisible} /> ) case "messages": return <MessagesContent userName={userName} /> case "disputes": return <DisputesContent /> case "profile": return ( <ProfileContent userName={userName} userEmail={userEmail} phoneNumber={state.phoneNumber} setPhoneNumber={state.setPhoneNumber} pensionDetails={getCurrentUserRates("pension")} /> ) case "selected-offers": return ( <SelectedOffersContent activeOfferType={state.activeOfferType} setActiveOfferType={state.setActiveOfferType} selectedOffers={state.selectedOffers} confirmedOffers={state.confirmedOffers} getCurrentUserRates={getCurrentUserRates} onOpenDispute={handlers.onOpenDispute} /> ) default: return null } } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal/filter-preferences-step.tsx" "use client" import { FilterSection } from "./filter-preferences-step/filter-section" import { ManagementFeesDropdown } from "./filter-preferences-step/management-fees-dropdown" import { CompaniesDropdown } from "./filter-preferences-step/companies-dropdown" import { InvestmentTracksDropdown } from "./filter-preferences-step/investment-tracks-dropdown" import { RegionsDropdown } from "./filter-preferences-step/regions-dropdown" import { AgentRatingsDropdown } from "./filter-preferences-step/agent-ratings-dropdown" import { AgentLanguagesDropdown } from "./filter-preferences-step/agent-languages-dropdown" import type { FilterPreferencesStepProps } from "./filter-preferences-step/types" interface ExtendedFilterPreferencesStepProps extends FilterPreferencesStepProps { activeOfferType: string } export function FilterPreferencesStep({ filterData, openDropdown, onToggleDropdown, onCheckboxChange, activeOfferType, }: ExtendedFilterPreferencesStepProps) { const getProductTypeTitle = () => { switch (activeOfferType) { case "pension": return "פנסיה" case "provident": return "קרנות השתלמות" case "pension-fund": return "קופות גמל" default: return "פנסיה" } } return ( <div className="space-y-4"> <div className="text-center space-y-3"> <h2 className="text-lg font-bold text-gray-900">הצגת הצעות {getProductTypeTitle()}</h2> <p className="text-gray-600 text-sm"> על ידי מתן קריטריונים להעדפותיך, נוכל לסנן את מאגר ההצעות לפני הרנדומיזציה כדי להציג לך הצעות שמתאימות יותר לצרכיך. </p> </div> {/ Investment Preferences /} <FilterSection title="העדפות השקעה"> <ManagementFeesDropdown filterData={filterData} isOpen={openDropdown === "managementFees"} onToggle={() => onToggleDropdown("managementFees")} onCheckboxChange={onCheckboxChange} /> <CompaniesDropdown filterData={filterData} isOpen={openDropdown === "companies"} onToggle={() => onToggleDropdown("companies")} onCheckboxChange={onCheckboxChange} /> <InvestmentTracksDropdown filterData={filterData} isOpen={openDropdown === "investmentTracks"} onToggle={() => onToggleDropdown("investmentTracks")} onCheckboxChange={onCheckboxChange} /> </FilterSection> {/ Agent Preferences /} <FilterSection title="העדפות סוכן"> <RegionsDropdown filterData={filterData} isOpen={openDropdown === "regions"} onToggle={() => onToggleDropdown("regions")} onCheckboxChange={onCheckboxChange} /> <AgentRatingsDropdown filterData={filterData} isOpen={openDropdown === "agentRatings"} onToggle={() => onToggleDropdown("agentRatings")} onCheckboxChange={onCheckboxChange} /> <AgentLanguagesDropdown filterData={filterData} isOpen={openDropdown === "agentLanguages"} onToggle={() => onToggleDropdown("agentLanguages")} onCheckboxChange={onCheckboxChange} /> </FilterSection> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-filter-modal.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { X } from "lucide-react" import { FilterPreferencesStep } from "./offers-filter-modal/filter-preferences-step" interface OffersFilterModalProps { isOpen: boolean onClose: () => void onApplyFilters: (hasFilters: boolean, filters?: any) => void activeOfferType: string } interface FilterData { companies: string[] investmentTracks: string[] managementFees: string[] specialties: string[] regions: string[] agentRatings: string[] agentLanguages: string[] } export function OffersFilterModal({ isOpen, onClose, onApplyFilters, activeOfferType }: OffersFilterModalProps) { const [openDropdown, setOpenDropdown] = useState<string | null>(null) const [filterData, setFilterData] = useState<FilterData>({ companies: [], investmentTracks: [], managementFees: [], specialties: [], regions: [], agentRatings: [], agentLanguages: [], }) const handleClose = () => { setFilterData({ companies: [], investmentTracks: [], managementFees: [], specialties: [], regions: [], agentRatings: [], agentLanguages: [], }) setOpenDropdown(null) onClose() } const handleFilterSubmit = () => { onApplyFilters(true, filterData) handleClose() } const handleNoFilterSubmit = () => { onApplyFilters(false) handleClose() } const onCheckboxChange = (category: keyof FilterData, value: string) => { setFilterData((prev) => { const currentSelections = [...prev[category]] if (value === "all") { return { ...prev, [category]: currentSelections.includes("all") ? [] : ["all"], } } else { let newSelections = currentSelections.filter((item) => item !== "all") if (newSelections.includes(value)) { newSelections = newSelections.filter((item) => item !== value) } else { newSelections.push(value) } return { ...prev, [category]: newSelections, } } }) } const onToggleDropdown = (dropdown: string) => { setOpenDropdown(openDropdown === dropdown ? null : dropdown) } if (!isOpen) return null return ( <div className="bg-white border rounded-lg shadow-sm max-w-4xl mx-auto"> {/ Close button /} <button onClick={handleClose} className="absolute top-3 right-3 z-10 rounded-full p-1 bg-white/90 text-gray-500 hover:bg-gray-100" > <X className="h-4 w-4" /> </button> {/ Form content - compact scrollable area /} <div className="max-h-96 overflow-y-auto"> <div className="p-4"> <FilterPreferencesStep filterData={filterData} openDropdown={openDropdown} onToggleDropdown={onToggleDropdown} onCheckboxChange={onCheckboxChange} activeOfferType={activeOfferType} /> </div> </div> {/ Footer with action buttons /} <div className="bg-gray-50 border-t px-4 py-3 flex justify-center gap-3"> <Button onClick={handleFilterSubmit} size="sm" className="bg-blue-600 hover:bg-blue-700 text-white"> הצג הצעות עם סינון </Button> <Button onClick={handleNoFilterSubmit} variant="outline" size="sm" className="border-gray-300 hover:bg-gray-50 bg-transparent" > הצג הצעות ללא סינון </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/reviews-content.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { adminReviewsData as defaultReviews } from "@/lib/mock/mockReviews" import { ReviewsTable } from "./reviews-content/reviews-table" import { DeletionRequestsTable } from "./reviews-content/deletion-requests-table" import { ReviewModal } from "./reviews-content/review-modal" import { DeletionRequestModal } from "./reviews-content/deletion-request-modal" import { mockDeletionRequests } from "./reviews-content/mock-data" import type { Review, ReviewDeletionRequest, ReviewsContentProps } from "./reviews-content/types" export function ReviewsContent({ reviewsData }: ReviewsContentProps) { const [reviews, setReviews] = useState<Review[]>(() => (reviewsData ?? defaultReviews).map((review, index) => ({ ...review, id: review.id || `review-${index}`, status: review.status || "pending", })), ) const [deletionRequests, setDeletionRequests] = useState<ReviewDeletionRequest[]>(mockDeletionRequests) const [statusFilter, setStatusFilter] = useState<string>("all") const [open, setOpen] = useState(false) const [selectedReview, setSelectedReview] = useState<Review | null>(null) const [editedName, setEditedName] = useState("") const [editedComment, setEditedComment] = useState("") const [openDeletionRequest, setOpenDeletionRequest] = useState(false) const [selectedDeletionRequest, setSelectedDeletionRequest] = useState<ReviewDeletionRequest | null>(null) // Filter reviews by status const filteredData = reviews.filter((review) => { if (statusFilter === "all") return true return review.status === statusFilter }) const handleOpenReview = (review: Review) => { setSelectedReview(review) setEditedName(review.reviewerName) setEditedComment(review.comment) setOpen(true) } const handleUpdateReview = () => { if (!selectedReview) return setReviews((prev) => prev.map((review) => review.id === selectedReview.id ? { ...review, reviewerName: editedName, comment: editedComment } : review, ), ) setOpen(false) } const handleApproveReview = (reviewId: string) => { setReviews((prev) => prev.map((review) => (review.id === reviewId ? { ...review, status: "approved" } : review))) // Send notifications (in real app, this would be API calls) const review = reviews.find((r) => r.id === reviewId) if (review) { console.log(`Notification sent to agent: New review approved from ${review.reviewerName}`) console.log(`Notification sent to client: Your review for ${review.agentName} has been approved`) } } const handleRejectReview = (reviewId: string) => { const review = reviews.find((r) => r.id === reviewId) setReviews((prev) => prev.map((review) => (review.id === reviewId ? { ...review, status: "rejected" } : review))) // Send notification to client (in real app, this would be API calls) if (review) { console.log(`Notification sent to client: Your review for ${review.agentName} has been rejected by admin`) } } const handleRevertReview = (reviewId: string) => { setReviews((prev) => prev.map((review) => (review.id === reviewId ? { ...review, status: "pending" } : review))) } const handleOpenDeletionRequestModal = (request: ReviewDeletionRequest) => { setSelectedDeletionRequest(request) setOpenDeletionRequest(true) } const handleApproveDeletionRequest = (requestId: string) => { const request = deletionRequests.find((req) => req.id === requestId) if (!request) return // Remove the original review setReviews((prev) => prev.filter((review) => review.id !== request.reviewId)) // Mark the deletion request as approved setDeletionRequests((prev) => prev.map((req) => (req.id === requestId ? { ...req, status: "approved" } : req))) setOpenDeletionRequest(false) console.log(`Review ${request.reviewId} deleted and deletion request ${requestId} approved.`) } const handleRejectDeletionRequest = (requestId: string) => { setDeletionRequests((prev) => prev.map((req) => (req.id === requestId ? { ...req, status: "rejected" } : req))) setOpenDeletionRequest(false) // Send notification to agent (in real app, this would be API calls) const request = deletionRequests.find((req) => req.id === requestId) if (request) { console.log( `Notification sent to agent ${request.agentName}: Deletion request for review ${request.reviewId} has been rejected by admin`, ) } } const handleRevertDeletionRequest = (requestId: string) => { setDeletionRequests((prev) => prev.map((req) => (req.id === requestId ? { ...req, status: "pending" } : req))) } return ( <div className="space-y-6"> {/ Header + filters /} <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"> <h2 className="text-xl font-bold">ניהול ביקורות</h2> <div className="flex gap-2"> <Select value={statusFilter} onValueChange={setStatusFilter}> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="סטטוס" /> </SelectTrigger> <SelectContent> <SelectItem value="all">הכל</SelectItem> <SelectItem value="pending">ממתינה</SelectItem> <SelectItem value="approved">מאושרת</SelectItem> <SelectItem value="rejected">נדחתה</SelectItem> </SelectContent> </Select> </div> </div> {/ Reviews table /} <Card> <CardHeader> <CardTitle>ביקורות ממתינות לאישור</CardTitle> </CardHeader> <CardContent> {filteredData.length === 0 ? ( <p className="text-center py-8">אין ביקורות להצגה.</p> ) : ( <ReviewsTable reviews={filteredData} onOpenReview={handleOpenReview} onApproveReview={handleApproveReview} onRejectReview={handleRejectReview} onRevertReview={handleRevertReview} /> )} </CardContent> </Card> {/ Review Deletion Requests Table /} <Card> <CardHeader> <CardTitle>ערעורים של סוכנים על ביקורות</CardTitle> </CardHeader> <CardContent> {deletionRequests.length === 0 ? ( <p className="text-center py-8">אין בקשות מחיקה להצגה.</p> ) : ( <DeletionRequestsTable deletionRequests={deletionRequests} onOpenDeletionRequestModal={handleOpenDeletionRequestModal} onApproveDeletionRequest={handleApproveDeletionRequest} onRejectDeletionRequest={handleRejectDeletionRequest} onRevertDeletionRequest={handleRevertDeletionRequest} /> )} </CardContent> </Card> <ReviewModal open={open} onOpenChange={setOpen} selectedReview={selectedReview} editedName={editedName} setEditedName={setEditedName} editedComment={editedComment} setEditedComment={setEditedComment} onUpdate={handleUpdateReview} /> <DeletionRequestModal open={openDeletionRequest} onOpenChange={setOpenDeletionRequest} selectedDeletionRequest={selectedDeletionRequest} /> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/disputes-content/dispute-details-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Card, CardContent } from "@/components/ui/card" interface DisputeDetailsModalProps { isOpen: boolean onClose: () => void dispute: any } export function DisputeDetailsModal({ isOpen, onClose, dispute }: DisputeDetailsModalProps) { if (!dispute) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md"> <DialogHeader> <DialogTitle>פרטי המחלוקת</DialogTitle> </DialogHeader> <Card> <CardContent className="pt-6 space-y-4"> <div className="flex justify-between items-center"> <span className="font-medium">מזהה מחלוקת:</span> <span className="text-muted-foreground">{dispute.id}</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">נושא מחלוקת:</span> <span className="text-muted-foreground">{dispute.subject}</span> </div> <div className="space-y-2"> <span className="font-medium">פרטי המחלוקת:</span> <p className="text-muted-foreground text-sm leading-relaxed"> {dispute.description || "לא צוינו פרטים נוספים"} </p> </div> </CardContent> </Card> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/disputes-content/contact-agent-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { useState } from "react" interface ContactAgentModalProps { isOpen: boolean onClose: () => void dispute: any } export function ContactAgentModal({ isOpen, onClose, dispute }: ContactAgentModalProps) { const [subject, setSubject] = useState("") const [message, setMessage] = useState("") const handleSubmit = () => { // Handle email submission logic here alert("אימייל נשלח לסוכן בהצלחה") setSubject("") setMessage("") onClose() } if (!dispute) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md"> <DialogHeader> <DialogTitle>שליחת אימייל לסוכן</DialogTitle> </DialogHeader> <div className="space-y-4"> <div> <Label htmlFor="agent-email">אל:</Label> <Input id="agent-email" value={`${dispute.agent}@example.com`} readOnly className="bg-muted" /> </div> <div> <Label htmlFor="subject">נושא:</Label> <Input id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="הזן נושא האימייל" /> </div> <div> <Label htmlFor="message">הודעה:</Label> <Textarea id="message" value={message} onChange={(e) => setMessage(e.target.value)} placeholder="הזן את תוכן ההודעה" rows={4} /> </div> </div> <DialogFooter> <Button variant="outline" onClick={onClose}> ביטול </Button> <Button onClick={handleSubmit}>שלח</Button> </DialogFooter> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/disputes-content/contact-client-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { useState } from "react" interface ContactClientModalProps { isOpen: boolean onClose: () => void dispute: any } export function ContactClientModal({ isOpen, onClose, dispute }: ContactClientModalProps) { const [subject, setSubject] = useState("") const [message, setMessage] = useState("") const handleSubmit = () => { // Handle email submission logic here alert("אימייל נשלח ללקוח בהצלחה") setSubject("") setMessage("") onClose() } if (!dispute) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md"> <DialogHeader> <DialogTitle>שליחת אימייל ללקוח</DialogTitle> </DialogHeader> <div className="space-y-4"> <div> <Label htmlFor="client-email">אל:</Label> <Input id="client-email" value={`${dispute.client}@example.com`} readOnly className="bg-muted" /> </div> <div> <Label htmlFor="subject">נושא:</Label> <Input id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="הזן נושא האימייל" /> </div> <div> <Label htmlFor="message">הודעה:</Label> <Textarea id="message" value={message} onChange={(e) => setMessage(e.target.value)} placeholder="הזן את תוכן ההודעה" rows={4} /> </div> </div> <DialogFooter> <Button variant="outline" onClick={onClose}> ביטול </Button> <Button onClick={handleSubmit}>שלח</Button> </DialogFooter> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/disputes-content/admin-reply-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { useState } from "react" interface AdminReplyModalProps { isOpen: boolean onClose: () => void dispute: any onSubmitReply: (disputeId: string) => void } export function AdminReplyModal({ isOpen, onClose, dispute, onSubmitReply }: AdminReplyModalProps) { const [reply, setReply] = useState("") const handleSubmit = () => { if (reply.trim()) { onSubmitReply(dispute.id) alert("תגובה נשלחה בהצלחה") setReply("") onClose() } } if (!dispute) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md"> <DialogHeader> <DialogTitle>תגובה למחלוקת</DialogTitle> </DialogHeader> <div className="space-y-4"> <div> <Label>מזהה מחלוקת: {dispute.id}</Label> </div> <div> <Label htmlFor="reply">תגובה:</Label> <Textarea id="reply" value={reply} onChange={(e) => setReply(e.target.value)} placeholder="הזן את תגובתך למחלוקת" rows={6} /> </div> </div> <DialogFooter> <Button variant="outline" onClick={onClose}> ביטול </Button> <Button onClick={handleSubmit}>שמור</Button> </DialogFooter> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/disputes-content/offer-details-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Card, CardContent } from "@/components/ui/card" interface OfferDetailsModalProps { isOpen: boolean onClose: () => void dispute: any } export function OfferDetailsModal({ isOpen, onClose, dispute }: OfferDetailsModalProps) { if (!dispute) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md"> <DialogHeader> <DialogTitle>פרטי ההצעה</DialogTitle> </DialogHeader> <Card> <CardContent className="pt-6 space-y-4"> <div className="flex justify-between items-center"> <span className="font-medium">מזהה הצעה:</span> <span className="text-muted-foreground">#{dispute.id}-OFFER</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">חברה:</span> <span className="text-muted-foreground">{dispute.company || "לא צוין"}</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">סוג מוצר:</span> <span className="text-muted-foreground">{dispute.productType || "לא צוין"}</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">סטטוס הצעה:</span> <span className="text-muted-foreground">פעילה</span> </div> </CardContent> </Card> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/disputes-content/agent-details-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Card, CardContent } from "@/components/ui/card" interface AgentDetailsModalProps { isOpen: boolean onClose: () => void dispute: any } export function AgentDetailsModal({ isOpen, onClose, dispute }: AgentDetailsModalProps) { if (!dispute) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md"> <DialogHeader> <DialogTitle>פרטי הסוכן</DialogTitle> </DialogHeader> <Card> <CardContent className="pt-6 space-y-4"> <div className="flex justify-between items-center"> <span className="font-medium">שם הסוכן:</span> <span className="text-muted-foreground">{dispute.agent}</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">אימייל:</span> <span className="text-muted-foreground">{dispute.agent}@example.com</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">טלפון:</span> <span className="text-muted-foreground">050-123-4567</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">רישיון:</span> <span className="text-muted-foreground">LIC-{dispute.id}</span> </div> </CardContent> </Card> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/disputes-content/client-details-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Card, CardContent } from "@/components/ui/card" interface ClientDetailsModalProps { isOpen: boolean onClose: () => void dispute: any } export function ClientDetailsModal({ isOpen, onClose, dispute }: ClientDetailsModalProps) { if (!dispute) return null return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md"> <DialogHeader> <DialogTitle>פרטי הלקוח</DialogTitle> </DialogHeader> <Card> <CardContent className="pt-6 space-y-4"> <div className="flex justify-between items-center"> <span className="font-medium">שם הלקוח:</span> <span className="text-muted-foreground">{dispute.client}</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">אימייל:</span> <span className="text-muted-foreground">{dispute.client}@example.com</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">טלפון:</span> <span className="text-muted-foreground">052-987-6543</span> </div> <div className="flex justify-between items-center"> <span className="font-medium">תאריך הצטרפות:</span> <span className="text-muted-foreground">01/01/2024</span> </div> </CardContent> </Card> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/profile-content.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { User } from "lucide-react" export function ProfileContent() { return ( <div className="space-y-6"> <div className="flex items-center gap-3"> <h1 className="text-2xl font-bold">פרופיל והגדרות</h1> </div> <Card> <CardHeader> <CardTitle className="flex items-center gap-2"> <User className="h-5 w-5" /> פרטי המנהל </CardTitle> </CardHeader> <CardContent className="space-y-6"> {/ Profile Avatar and Basic Info /} <div className="flex items-center gap-4"> <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xl"> מ </div> <div> <h3 className="font-medium text-lg">מנהל המערכת</h3> <p className="text-gray-600">admin@pensionexpert.co.il</p> </div> </div> {/ Profile Form /} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="space-y-2"> <Label htmlFor="name">שם מלא</Label> <Input id="name" defaultValue="מנהל המערכת" /> </div> <div className="space-y-2"> <Label htmlFor="email">כתובת אימייל</Label> <Input id="email" type="email" defaultValue="admin@pensionexpert.co.il" /> </div> <div className="space-y-2"> <Label htmlFor="role">תפקיד</Label> <Input id="role" defaultValue="מנהל מערכת" disabled className="bg-gray-50" /> </div> </div> {/ Save Button /} <div className="flex justify-start"> <Button className="bg-blue-600 hover:bg-blue-700">שמור שינויים</Button> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { Landmark, ChevronDown, Bell, User, LogOut } from "lucide-react" import { useState, useEffect } from "react" import { demoUser } from "@/lib/auth" import { useRouter, usePathname } from "next/navigation" import { useNotifications } from "@/hooks/use-notifications" import { NotificationItem } from "@/components/notifications/notification-item" export default function Header() { const router = useRouter() const [isLoggedIn, setIsLoggedIn] = useState(false) const [notificationsOpen, setNotificationsOpen] = useState(false) const [profileOpen, setProfileOpen] = useState(false) const pathname = usePathname() const isAgentPage = pathname?.includes("/join-as-agent") || pathname?.includes("/agent-dashboard") // Check if user is in any dashboard route const isDashboardRoute = pathname?.includes("/dashboard") || pathname?.includes("/agent-dashboard") || pathname?.includes("/admin-dashboard") // Get current user ID based on dashboard type const getCurrentUserId = () => { if (pathname?.includes("/agent-dashboard")) { return "agent-1" } else if (pathname?.includes("/admin-dashboard")) { return "admin-1" } else { return "client-1" } } const { notifications, unreadCount, markAsRead, markAsUnread } = useNotifications( isLoggedIn ? getCurrentUserId() : "", ) // בדיקה אם המשתמש מחובר (לצורך הדגמה) useEffect(() => { // בדיקה פשוטה אם אנחנו בדף הדשבורד או בדף אחר שדורש התחברות const isInDashboard = window.location.pathname.includes("/dashboard") || window.location.pathname.includes("/agent-dashboard") || window.location.pathname.includes("/admin-dashboard") setIsLoggedIn(isInDashboard) }, [pathname]) const handleLogout = () => { // לוגיקת התנתקות פשוטה setIsLoggedIn(false) setNotificationsOpen(false) setProfileOpen(false) router.push("/login") } const handleProfileClick = () => { setProfileOpen(!profileOpen) setNotificationsOpen(false) } const handleNotificationsClick = () => { setNotificationsOpen(!notificationsOpen) setProfileOpen(false) } const handleProfileNavigation = (section: string) => { const currentPath = window.location.pathname if (currentPath.includes("/dashboard")) { // Navigate within current dashboard - client dashboard if (section === "profile") { window.dispatchEvent(new CustomEvent("navigate-to-profile")) } } else if (currentPath.includes("/agent-dashboard")) { // Navigate within agent dashboard if (section === "profile") { window.dispatchEvent(new CustomEvent("navigate-to-agent-profile")) } } else if (currentPath.includes("/admin-dashboard")) { // Navigate within admin dashboard if (section === "profile") { window.dispatchEvent(new CustomEvent("navigate-to-admin-profile")) } } else { // Navigate to appropriate dashboard router.push(`/dashboard`) } setProfileOpen(false) } const handleNotificationsNavigation = () => { const currentPath = window.location.pathname if (currentPath.includes("/dashboard")) { // Navigate within current dashboard - client dashboard window.dispatchEvent(new CustomEvent("navigate-to-messages")) } else if (currentPath.includes("/agent-dashboard")) { // Navigate within agent dashboard window.dispatchEvent(new CustomEvent("navigate-to-agent-messages")) } else if (currentPath.includes("/admin-dashboard")) { // Navigate within admin dashboard - admin doesn't have messages tab, so we'll keep it as is // Admin dashboard doesn't have a messages tab, so no action needed } else { // Navigate to appropriate dashboard router.push(`/dashboard`) } setNotificationsOpen(false) } const handleNotificationNavigate = (linkTo: string) => { setNotificationsOpen(false) // Determine the correct navigation based on the linkTo path if (linkTo.includes("/dashboard")) { // Client dashboard navigation if (linkTo.includes("/offers/selected")) { window.dispatchEvent(new CustomEvent("navigate-to-selected-offers")) } else if (linkTo.includes("/offers")) { window.dispatchEvent(new CustomEvent("navigate-to-offers")) } else if (linkTo.includes("/messages")) { window.dispatchEvent(new CustomEvent("navigate-to-messages")) } else if (linkTo.includes("/disputes")) { window.dispatchEvent(new CustomEvent("navigate-to-disputes")) } } else if (linkTo.includes("/agent")) { // Agent dashboard navigation if (linkTo.includes("/leads")) { window.dispatchEvent(new CustomEvent("navigate-to-agent-leads")) } else if (linkTo.includes("/reviews")) { window.dispatchEvent(new CustomEvent("navigate-to-agent-reviews")) } else if (linkTo.includes("/offers")) { window.dispatchEvent(new CustomEvent("navigate-to-agent-offers")) } } } // Close dropdowns when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { const target = event.target as Element if (!target.closest(".notifications-dropdown") && !target.closest(".notifications-button")) { setNotificationsOpen(false) } if (!target.closest(".profile-dropdown") && !target.closest(".profile-button")) { setProfileOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) return ( <header className="fixed-header"> <div className="container mx-auto px-4 py-4 flex justify-between items-center"> <div className="flex items-center gap-2"> <Link href="/"> <div className="flex items-center gap-2"> <Landmark className="h-8 w-8 text-blue-600" /> <h1 className="text-2xl font-bold">גורו פנסיוני</h1> </div> </Link> </div> <div className="flex items-center gap-8"> <nav className="hidden md:flex gap-6 justify-end"> {!isDashboardRoute && ( <> {!isAgentPage && ( <Link href="/#how-it-works" className="font-medium hover:text-blue-600"> איך זה עובד </Link> )} <Link href={isAgentPage ? `${pathname}#faq` : "/#faq"} className="font-medium hover:text-blue-600"> שאלות נפוצות </Link> <Link href="/join-as-agent" className="font-medium hover:text-blue-600 font-bold text-blue-600"> הצטרפות כסוכן </Link> </> )} </nav> <div className="flex items-center gap-4"> {isLoggedIn ? ( <> {/ Notifications /} <div className="relative"> <button className="relative p-2 notifications-button" onClick={handleNotificationsClick}> <Bell className="h-6 w-6" /> {unreadCount > 0 && ( <span className="absolute top-1 left-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center"> {unreadCount > 9 ? "9+" : unreadCount} </span> )} </button> {notificationsOpen && ( <div className="absolute left-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-50 border notifications-dropdown"> <div className="p-3 border-b"> <h3 className="font-medium">התראות אחרונות</h3> </div> <div className="max-h-96 overflow-y-auto"> {notifications.length > 0 ? ( notifications.map((notification) => ( <NotificationItem key={notification.id} notification={notification} onMarkAsRead={markAsRead} onMarkAsUnread={markAsUnread} onNavigate={handleNotificationNavigate} showNavigation={true} /> )) ) : ( <div className="p-4 text-center text-gray-500">אין התראות חדשות</div> )} </div> <div className="p-2 bg-gray-50 text-center"> <button className="text-sm text-blue-600 hover:underline" onClick={handleNotificationsNavigation} > צפה בכל ההתראות </button> </div> </div> )} </div> {/ User Profile /} <div className="relative"> <button className="flex items-center profile-button" onClick={handleProfileClick}> <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold"> {demoUser.name.charAt(0)} </div> <span className="mr-2 hidden md:block">{demoUser.name}</span> <ChevronDown className="h-4 w-4 mr-1 hidden md:block" /> </button> {profileOpen && ( <div className="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg overflow-hidden z-50 border profile-dropdown"> <div className="p-2 border-b"> <div className="font-medium">{demoUser.name}</div> <div className="text-xs text-gray-500">{demoUser.email}</div> </div> <div className="p-1"> <button className="w-full text-right px-3 py-2 text-sm hover:bg-gray-100 rounded-md flex items-center" onClick={() => handleProfileNavigation("profile")} > <User className="h-4 w-4 ml-2" /> פרופיל והגדרות </button> <button className="w-full text-right px-3 py-2 text-sm hover:bg-gray-100 rounded-md flex items-center text-red-600" onClick={handleLogout} > <LogOut className="h-4 w-4 ml-2" /> התנתקות </button> </div> </div> )} </div> </> ) : ( <Link href="/login"> <Button className="bg-blue-600 hover:bg-blue-700">התחברות</Button> </Link> )} </div> </div> </div> </header> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/messages-content.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { MessageSquare } from "lucide-react" import { useNotifications } from "@/hooks/use-notifications" import { NotificationItem } from "@/components/notifications/notification-item" interface MessagesContentProps { agentUser: any } export default function MessagesContent({ agentUser }: MessagesContentProps) { const { notifications, markAsRead, markAsUnread } = useNotifications("agent-1") return ( <div className="space-y-6"> {/ Messages Section /} <Card> <CardHeader> <CardTitle className="flex items-center gap-2"> <MessageSquare className="h-5 w-5 text-blue-500" /> הודעות והתראות </CardTitle> </CardHeader> <CardContent> <div className="space-y-0"> {notifications.length > 0 ? ( notifications.map((notification) => ( <NotificationItem key={notification.id} notification={notification} onMarkAsRead={markAsRead} onMarkAsUnread={markAsUnread} showNavigation={false} /> )) ) : ( <div className="p-4 text-center text-gray-500">אין הודעות</div> )} </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/leads-content/lead-funnel.tsx" isQuickEdit="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import type { LeadsContentProps } from "./types" // keeps type-safety for parent import interface LeadFunnelProps { leadsData: LeadsContentProps["leadsData"] } export default function LeadFunnel({ leadsData }: LeadFunnelProps) { const { totalOfferViews = 0, totalLeads: maturedInterests = 0 } = leadsData?.summary ?? {} // For demo purposes we still derive "total interests" (middle step) as 60 % of offer views. const totalInterests = Math.round(totalOfferViews 0.6) // Avoid division by zero. const base = totalOfferViews || 1 const steps = [ { label: "צפיות בהצעה", value: totalOfferViews, percent: 100, }, { label: "סה״כ התעניינויות", value: totalInterests, percent: Math.round((totalInterests / base) * 100), }, { label: "התעניינויות שהבשילו", value: maturedInterests, percent: Math.round((maturedInterests / base) * 100), }, ] return ( <Card> <CardHeader> <CardTitle>משפך לידים</CardTitle> </CardHeader> <CardContent> <div className="space-y-6"> {steps.map((step) => ( <div key={step.label} className="space-y-2"> <div className="flex justify-between text-sm"> <span>{step.label}</span> <span>{step.value}</span> </div> <Progress value={step.percent} className="h-3" /> <div className="text-xs text-muted-foreground text-left">{step.percent}%</div> </div> ))} </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/dashboard/messages-content.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import useNotifications from "@/hooks/use-notifications" import NotificationItem from "@/components/notifications/notification-item" /** * Dashboard Messages tab – shows the same notification objects * in list form (no navigation from here). / export function MessagesContent() { const { notifications, markAsRead, markAsUnread } = useNotifications() return ( <Card> <CardHeader> <CardTitle>הודעות</CardTitle> </CardHeader> <CardContent className="space-y-4"> {notifications.length === 0 ? ( <p className="text-sm text-muted-foreground">אין הודעות להצגה.</p> ) : ( notifications .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()) .map((n) => ( <NotificationItem key={n.id} notification={n} // Messages tab should NOT navigate. We only toggle read/unread: onClick={() => (n.read ? markAsUnread(n.id) : markAsRead(n.id))} onToggleRead={() => (n.read ? markAsUnread(n.id) : markAsRead(n.id))} /> )) )} </CardContent> </Card> ) } // Provide both named and default export. export default MessagesContent [V0_FILE]typescriptreact:file="components/notifications/notification-item.tsx" isQuickEdit="true" "use client" import type React from "react" import { Check, Eye } from "lucide-react" import type { Notification } from "@/types/notification" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface NotificationItemProps { notification: Notification onMarkAsRead: (id: string) => void onMarkAsUnread: (id: string) => void onNavigate?: (linkTo: string) => void showNavigation?: boolean } export function NotificationItem({ notification, onMarkAsRead, onMarkAsUnread, onNavigate, showNavigation = true, }: NotificationItemProps) { const handleNotificationClick = () => { if (showNavigation && onNavigate) { if (!notification.read) { onMarkAsRead(notification.id) } onNavigate(notification.linkTo) } } const handleMarkAsRead = (e: React.MouseEvent) => { e.stopPropagation() onMarkAsRead(notification.id) } const handleMarkAsUnread = (e: React.MouseEvent) => { e.stopPropagation() onMarkAsUnread(notification.id) } const formatTimeAgo = (date: Date) => { const now = new Date() const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 60 * 60)) if (diffInHours < 1) { return "לפני פחות משעה" } else if (diffInHours < 24) { return `לפני ${diffInHours} שעות` } else { const diffInDays = Math.floor(diffInHours / 24) if (diffInDays === 1) { return "לפני יום" } else if (diffInDays < 7) { return `לפני ${diffInDays} ימים` } else { return `לפני ${Math.floor(diffInDays / 7)} שבועות` } } } return ( <div className={cn( "p-3 border-b hover:bg-gray-50 transition-colors", showNavigation && "cursor-pointer", !notification.read && "bg-blue-50 border-l-4 border-l-blue-500", )} onClick={handleNotificationClick} > <div className="flex justify-between items-start gap-2"> <div className="flex-1 min-w-0"> <div className="flex justify-between items-start mb-1"> <h3 className={cn("text-sm truncate", !notification.read ? "font-semibold" : "font-medium")}> {notification.title} </h3> <span className="text-xs text-gray-500 whitespace-nowrap mr-2"> {formatTimeAgo(notification.createdAt)} </span> </div> <p className="text-sm text-gray-600 line-clamp-2">{notification.message}</p> </div> <div className="flex items-center gap-1 flex-shrink-0"> {notification.read ? ( <Button variant="ghost" size="sm" className="h-6 w-6 p-0 hover:bg-gray-200" onClick={handleMarkAsUnread} title="סמן כלא נקרא" > <Eye className="h-3 w-3 text-gray-400" /> </Button> ) : ( <Button variant="ghost" size="sm" className="h-6 w-6 p-0 hover:bg-green-100" onClick={handleMarkAsRead} title="סמן כנקרא" > <Check className="h-3 w-3 text-green-600" /> </Button> )} </div> </div> </div> ) } /* Default export so consumers can `import NotificationItem from "@/components/notifications/notification-item"` / export default NotificationItem [V0_FILE]typescriptreact:file="components/dashboard/sidebar-mobile.tsx" "use client" // Extracted from app/dashboard/page.tsx - Mobile sidebar component import { PieChart, FileText, Home, MessageSquare, User, LogOut, AlertTriangle } from "lucide-react" interface SidebarMobileProps { isMenuOpen: boolean setIsMenuOpen: (open: boolean) => void activeContent: string setActiveContent: (content: string) => void handleLogout: () => void } export function SidebarMobile({ isMenuOpen, setIsMenuOpen, activeContent, setActiveContent, handleLogout, }: SidebarMobileProps) { return ( <> {/ Mobile menu overlay /} <div className={`fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden ${isMenuOpen ? "block" : "hidden"}`} onClick={() => setIsMenuOpen(false)} ></div> {/ Mobile menu /} <div className={`fixed inset-y-0 right-0 w-64 bg-white z-50 transform transition-transform duration-300 ease-in-out md:hidden ${isMenuOpen ? "translate-x-0" : "translate-x-full"}`} > <div className="p-4 border-b"> <div className="flex items-center justify-between"> <div className="flex items-center"> <PieChart className="h-6 w-6 text-blue-600" /> <span className="text-xl font-bold mr-2">גורו פנסיוני</span> </div> <button onClick={() => setIsMenuOpen(false)} className="p-2"> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> <nav className="flex-1 p-4 space-y-1"> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "offers" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("offers") setIsMenuOpen(false) }} > <FileText className="h-5 w-5 ml-2" /> <span>הצעות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "selected-offers" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("selected-offers") setIsMenuOpen(false) }} > <FileText className="h-5 w-5 ml-2" /> <span>הצעות שנבחרו</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "home" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("home") setIsMenuOpen(false) }} > <Home className="h-5 w-5 ml-2" /> <span>מבט כללי</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "calculator" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("calculator") setIsMenuOpen(false) }} > <PieChart className="h-5 w-5 ml-2" /> <span>מחשבון פנסיוני</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "messages" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("messages") setIsMenuOpen(false) }} > <MessageSquare className="h-5 w-5 ml-2" /> <span>הודעות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "disputes" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("disputes") setIsMenuOpen(false) }} > <AlertTriangle className="h-5 w-5 ml-2" /> <span>מחלוקות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "profile" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("profile") setIsMenuOpen(false) }} > <User className="h-5 w-5 ml-2" /> <span>פרופיל והגדרות</span> </button> </nav> <div className="p-4 border-t"> <button onClick={handleLogout} className="flex items-center w-full p-2 rounded-md hover:bg-gray-100 text-gray-700" > <LogOut className="h-5 w-5 ml-2" /> <span>התנתקות</span> </button> </div> </div> </> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/sidebar-desktop.tsx" "use client" import { PieChart, Users, FileText, User, LogOut, MessageSquare, Star } from "lucide-react" interface SidebarDesktopProps { activeContent: string setActiveContent: (content: string) => void leads: any[] offersData: any reviewsData: any handleLogout: () => void } export default function SidebarDesktop({ activeContent, setActiveContent, leads, offersData, reviewsData, handleLogout, }: SidebarDesktopProps) { return ( <div className="hidden md:flex flex-col w-64 bg-white border-r"> <div className="p-4 border-b"> <div className="flex items-center justify-center"> <PieChart className="h-6 w-6 text-blue-600" /> <span className="text-xl font-bold mr-2">לוח בקרה סוכנים</span> </div> </div> <nav className="flex-1 p-4 space-y-1"> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "leads" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("leads")} > <Users className="h-5 w-5 ml-2" /> <span>לידים</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "offers" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("offers")} > <FileText className="h-5 w-5 ml-2" /> <span>הצעות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "messages" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("messages")} > <MessageSquare className="h-5 w-5 ml-2" /> <span>הודעות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "reviews" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("reviews")} > <Star className="h-5 w-5 ml-2" /> <span>ביקורות לקוחות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "profile" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("profile")} > <User className="h-5 w-5 ml-2" /> <span>פרופיל והגדרות</span> </button> </nav> <div className="p-4 border-t"> <button onClick={handleLogout} className="flex items-center w-full p-2 rounded-md hover:bg-gray-100 text-gray-700" > <LogOut className="h-5 w-5 ml-2" /> <span>התנתקות</span> </button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/sidebar-mobile.tsx" "use client" import { PieChart, Users, FileText, User, LogOut, MessageSquare, Star } from "lucide-react" interface SidebarMobileProps { isMenuOpen: boolean setIsMenuOpen: (open: boolean) => void activeContent: string setActiveContent: (content: string) => void leads: any[] offersData: any reviewsData: any handleLogout: () => void } export default function SidebarMobile({ isMenuOpen, setIsMenuOpen, activeContent, setActiveContent, leads, offersData, reviewsData, handleLogout, }: SidebarMobileProps) { return ( <> {/ Mobile menu overlay /} <div className={`fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden ${isMenuOpen ? "block" : "hidden"}`} onClick={() => setIsMenuOpen(false)} ></div> {/ Mobile sidebar /} <div className={`fixed inset-y-0 right-0 w-64 bg-white z-50 transform transition-transform duration-300 ease-in-out md:hidden ${isMenuOpen ? "translate-x-0" : "translate-x-full"}`} > <div className="p-4 border-b"> <div className="flex items-center justify-between"> <div className="flex items-center"> <PieChart className="h-6 w-6 text-blue-600" /> <span className="text-xl font-bold mr-2">גורו פנסיוני</span> </div> <button onClick={() => setIsMenuOpen(false)} className="p-2"> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> <nav className="flex-1 p-4 space-y-1"> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "leads" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("leads") setIsMenuOpen(false) }} > <Users className="h-5 w-5 ml-2" /> <span>לידים</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "offers" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("offers") setIsMenuOpen(false) }} > <FileText className="h-5 w-5 ml-2" /> <span>הצעות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "messages" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("messages") setIsMenuOpen(false) }} > <MessageSquare className="h-5 w-5 ml-2" /> <span>הודעות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "reviews" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("reviews") setIsMenuOpen(false) }} > <Star className="h-5 w-5 ml-2" /> <span>ביקורות לקוחות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "profile" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveContent("profile") setIsMenuOpen(false) }} > <User className="h-5 w-5 ml-2" /> <span>פרופיל והגדרות</span> </button> </nav> <div className="p-4 border-t"> <button onClick={handleLogout} className="flex items-center w-full p-2 rounded-md hover:bg-gray-100 text-gray-700" > <LogOut className="h-5 w-5 ml-2" /> <span>התנתקות</span> </button> </div> </div> </> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/admin-sidebar.tsx" "use client" import { Shield, BarChart3, MessageSquare, UserCheck, AlertTriangle, User, LogOut } from "lucide-react" interface AdminSidebarProps { activeTab: string setActiveTab: (tab: string) => void } export function AdminSidebar({ activeTab, setActiveTab }: AdminSidebarProps) { return ( <div className="hidden md:flex flex-col w-64 bg-white border-r"> <div className="p-4 border-b"> <div className="flex items-center justify-center"> <Shield className="h-6 w-6 text-blue-600" /> <span className="text-xl font-bold mr-2">לוח בקרה מנהל</span> </div> </div> <nav className="flex-1 p-4 space-y-1"> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "overview" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveTab("overview")} > <BarChart3 className="h-5 w-5 ml-2" /> <span>סקירה כללית</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "reviews" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveTab("reviews")} > <MessageSquare className="h-5 w-5 ml-2" /> <span>ניהול ביקורות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "verification" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveTab("verification")} > <UserCheck className="h-5 w-5 ml-2" /> <span>מרכז אימות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "disputes" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveTab("disputes")} > <AlertTriangle className="h-5 w-5 ml-2" /> <span>טיפול במחלוקות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "profile" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveTab("profile")} > <User className="h-5 w-5 ml-2" /> <span>פרופיל והגדרות</span> </button> </nav> <div className="p-4 border-t"> <div className="flex items-center gap-2 mb-2"> <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold"> מ </div> <div> <p className="font-medium">מנהל מערכת</p> <p className="text-sm text-muted-foreground">admin@gmail.com</p> </div> </div> <button className="flex items-center w-full p-2 rounded-md hover:bg-gray-100 text-gray-700"> <LogOut className="h-5 w-5 ml-2" /> <span>התנתקות</span> </button> </div> </div> ) } [V0_FILE]typescript:file="types/notification.ts" export interface Notification { id: string userId: string type: | "הצעה לקוח" | "הצעות שנבחרו לקוח" | "הודעת מערכת" | "מחלוקת" | "ביקורת" | "התעניינות שהבשילה" | "הצעה סוכן" | "ביקורת לאישור" | "ערעור לביקורת" | "סוכן חדש" | "מחלוקת אדמין" title: string message: string read: boolean createdAt: Date linkTo: string } export type NotificationType = Notification["type"] export const getNotificationRedirectPath = (type: NotificationType): string => { switch (type) { case "הצעה לקוח": return "/dashboard/offers" case "הצעות שנבחרו לקוח": return "/dashboard/offers/selected" case "הודעת מערכת": return "/dashboard/messages" case "מחלוקת": return "/dashboard/disputes" case "ביקורת": return "/agent/reviews" case "התעניינות שהבשילה": return "/agent/leads" case "הצעה סוכן": return "/agent/offers" case "ביקורת לאישור": return "/admin/reviews" case "ערעור לביקורת": return "/admin/reviews" case "סוכן חדש": return "/admin/verification" case "מחלוקת אדמין": return "/admin/disputes" default: return "/dashboard" } } [V0_FILE]typescript:file="lib/notifications-data.ts" import type { Notification } from "@/types/notification" export const mockNotifications: Notification[] = [ { id: "1", userId: "client-1", type: "הצעה לקוח", title: "הצעה חדשה מחברת הראל", message: "קיבלנו עבורך הצעה מיוחדת מחברת הראל עם דמי ניהול מופחתים.", read: false, createdAt: new Date(Date.now() - 2 24 * 60 * 60 * 1000), // 2 days ago linkTo: "/dashboard/offers", }, { id: "2", userId: "client-1", type: "הודעת מערכת", title: "עדכון בתנאי הפנסיה שלך", message: "חלו שינויים בתנאי הפנסיה שלך.", read: false, createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), // 5 days ago linkTo: "/dashboard/messages", }, { id: "3", userId: "client-1", type: "הודעת מערכת", title: "תזכורת: בדיקת תיק פנסיוני", message: "הגיע הזמן לבדיקה תקופתית של התיק הפנסיוני שלך.", read: true, createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), // 1 week ago linkTo: "/dashboard/messages", }, { id: "4", userId: "agent-1", type: "התעניינות שהבשילה", title: "לקוח חדש מתעניין בהצעה שלך", message: "לקוח מתעניין בהצעת הפנסיה שלך מחברת מגדל.", read: false, createdAt: new Date(Date.now() - 1 * 60 * 60 * 1000), // 1 hour ago linkTo: "/agent/leads", }, { id: "5", userId: "agent-1", type: "ביקורת", title: "ביקורת חדשה התקבלה", message: "קיבלת ביקורת חדשה עם דירוג 5 כוכבים.", read: false, createdAt: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago linkTo: "/agent/reviews", }, // New admin-only notification types { id: "6", userId: "admin-1", type: "ביקורת לאישור", title: "ביקורת חדשה ממתינה לאישור", message: "ביקורת חדשה על סוכן דורשת אישור מנהל לפני פרסום.", read: false, createdAt: new Date(Date.now() - 30 * 60 * 1000), // 30 minutes ago linkTo: "/admin/reviews", }, { id: "7", userId: "admin-1", type: "ערעור לביקורת", title: "ערעור על ביקורת שלילית", message: "סוכן הגיש ערעור על ביקורת שלילית שקיבל מלקוח.", read: false, createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago linkTo: "/admin/reviews", }, { id: "8", userId: "admin-1", type: "סוכן חדש", title: "בקשת רישום סוכן חדש", message: "סוכן חדש הגיש בקשה להצטרפות למערכת וממתין לאימות.", read: true, createdAt: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago linkTo: "/admin/verification", }, { id: "9", userId: "admin-1", type: "מחלוקת אדמין", title: "מחלוקת דורשת התערבות מנהל", message: "מחלוקת בין לקוח לסוכן הועלתה לטיפול מנהל.", read: false, createdAt: new Date(Date.now() - 6 * 60 * 60 * 1000), // 6 hours ago linkTo: "/admin/disputes", }, ] export const getNotificationsForUser = (userId: string): Notification[] => { return mockNotifications.filter((notification) => notification.userId === userId) } export const getUnreadNotificationsCount = (userId: string): number => { return getNotificationsForUser(userId).filter((notification) => !notification.read).length } [V0_FILE]typescriptreact:file="hooks/use-notifications.ts" "use client" import { useState, useCallback } from "react" import { getNotificationsForUser, mockNotifications } from "@/lib/notifications-data" import type { Notification } from "@/types/notification" export function useNotifications(userId: string) { const [notifications, setNotifications] = useState<Notification[]>(() => getNotificationsForUser(userId)) const markAsRead = useCallback((notificationId: string) => { setNotifications((prev) => prev.map((notification) => (notification.id === notificationId ? { ...notification, read: true } : notification)), ) // Update the global mock data as well const notificationIndex = mockNotifications.findIndex((n) => n.id === notificationId) if (notificationIndex !== -1) { mockNotifications[notificationIndex].read = true } }, []) const markAsUnread = useCallback((notificationId: string) => { setNotifications((prev) => prev.map((notification) => notification.id === notificationId ? { ...notification, read: false } : notification, ), ) // Update the global mock data as well const notificationIndex = mockNotifications.findIndex((n) => n.id === notificationId) if (notificationIndex !== -1) { mockNotifications[notificationIndex].read = false } }, []) const unreadCount = notifications.filter((n) => !n.read).length return { notifications, unreadCount, markAsRead, markAsUnread, } } export default useNotifications [V0_FILE]typescriptreact:file="components/admin-dashboard/disputes-content.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Eye, Mail, MessageSquare, Send } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { allDisputes } from "@/lib/mock-data" import { useState } from "react" import { ContactAgentModal } from "./disputes-content/contact-agent-modal" import { ContactClientModal } from "./disputes-content/contact-client-modal" import { AdminReplyModal } from "./disputes-content/admin-reply-modal" import { OfferDetailsModal } from "./disputes-content/offer-details-modal" import { AgentDetailsModal } from "./disputes-content/agent-details-modal" import { ClientDetailsModal } from "./disputes-content/client-details-modal" import { DisputeDetailsModal } from "./disputes-content/dispute-details-modal" interface DisputesContentProps { disputesData?: Array<{ id: string client: string agent: string subject: string date: string status: string description: string productType?: string company?: string }> } export function DisputesContent({ disputesData = allDisputes }: DisputesContentProps) { const [selectedDispute, setSelectedDispute] = useState<any>(null) const [showOfferModal, setShowOfferModal] = useState(false) const [showAgentModal, setShowAgentModal] = useState(false) const [showClientModal, setShowClientModal] = useState(false) const [showDisputeModal, setShowDisputeModal] = useState(false) const [showContactAgentModal, setShowContactAgentModal] = useState(false) const [showContactClientModal, setShowContactClientModal] = useState(false) const [showReplyModal, setShowReplyModal] = useState(false) const [disputes, setDisputes] = useState(disputesData) const [statusFilter, setStatusFilter] = useState<string>("all") // Filter disputes by status - same logic as reviews tab const filteredDisputes = disputes.filter((dispute) => { if (statusFilter === "all") return true return dispute.status === statusFilter }) const toggleStatus = (disputeId: string) => { setDisputes((prev) => prev.map((dispute) => { if (dispute.id === disputeId) { const statusOrder = ["חדש", "בבדיקה", "נפתר"] const currentIndex = statusOrder.indexOf(dispute.status) const nextIndex = (currentIndex + 1) % statusOrder.length return { ...dispute, status: statusOrder[nextIndex] } } return dispute }), ) } const handleContactAgent = (dispute: any) => { setSelectedDispute(dispute) setShowContactAgentModal(true) } const handleContactClient = (dispute: any) => { setSelectedDispute(dispute) setShowContactClientModal(true) } const handleReply = (dispute: any) => { setSelectedDispute(dispute) setShowReplyModal(true) } const handleViewOffer = (dispute: any) => { setSelectedDispute(dispute) setShowOfferModal(true) } const handleViewAgent = (dispute: any) => { setSelectedDispute(dispute) setShowAgentModal(true) } const handleViewClient = (dispute: any) => { setSelectedDispute(dispute) setShowClientModal(true) } const handleViewDispute = (dispute: any) => { setSelectedDispute(dispute) setShowDisputeModal(true) } const handleSubmitReply = (disputeId: string) => { setDisputes((prev) => prev.map((dispute) => (dispute.id === disputeId ? { ...dispute, status: "נפתר" } : dispute))) } return ( <TooltipProvider> <div className="space-y-6"> <div className="flex justify-between items-center"> <h2 className="text-xl font-bold">טיפול במחלוקות</h2> <div className="flex gap-2"> <Select value={statusFilter} onValueChange={setStatusFilter}> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="סטטוס" /> </SelectTrigger> <SelectContent> <SelectItem value="all">הכל</SelectItem> <SelectItem value="חדש">חדש</SelectItem> <SelectItem value="בבדיקה">בבדיקה</SelectItem> <SelectItem value="נפתר">נפתר</SelectItem> </SelectContent> </Select> </div> </div> <Card> <CardContent className="pt-6"> <Table> <TableHeader> <TableRow> <TableHead>סטטוס</TableHead> <TableHead>תאריך פתיחה</TableHead> <TableHead>לקוח</TableHead> <TableHead>סוכן</TableHead> <TableHead>מחלוקת</TableHead> <TableHead>הצעה</TableHead> <TableHead>פעולות</TableHead> </TableRow> </TableHeader> <TableBody> {filteredDisputes.map((dispute, index) => ( <TableRow key={index}> <TableCell> <Badge className={`cursor-pointer ${ dispute.status === "נפתר" ? "bg-green-100 text-green-800 hover:bg-green-100" : dispute.status === "בבדיקה" ? "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" : "bg-red-100 text-red-800 hover:bg-red-100" }`} onClick={() => toggleStatus(dispute.id)} > {dispute.status} </Badge> </TableCell> <TableCell>{dispute.date}</TableCell> <TableCell> <Button variant="ghost" size="sm" onClick={() => handleViewClient(dispute)}> <Eye className="h-4 w-4" /> </Button> </TableCell> <TableCell> <Button variant="ghost" size="sm" onClick={() => handleViewAgent(dispute)}> <Eye className="h-4 w-4" /> </Button> </TableCell> <TableCell> <Button variant="ghost" size="sm" onClick={() => handleViewDispute(dispute)}> <Eye className="h-4 w-4" /> </Button> </TableCell> <TableCell> <Button variant="ghost" size="sm" onClick={() => handleViewOffer(dispute)}> <Eye className="h-4 w-4" /> </Button> </TableCell> <TableCell> <div className="flex gap-1"> <Tooltip> <TooltipTrigger asChild> <Button variant="ghost" size="sm" onClick={() => handleContactAgent(dispute)}> <Mail className="h-4 w-4" /> </Button> </TooltipTrigger> <TooltipContent> <p>שלח מייל לסוכן</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="ghost" size="sm" onClick={() => handleContactClient(dispute)}> <Send className="h-4 w-4" /> </Button> </TooltipTrigger> <TooltipContent> <p>שלח מייל ללקוח</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="ghost" size="sm" onClick={() => handleReply(dispute)}> <MessageSquare className="h-4 w-4" /> </Button> </TooltipTrigger> <TooltipContent> <p>השב על המחלוקת</p> </TooltipContent> </Tooltip> </div> </TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> <OfferDetailsModal isOpen={showOfferModal} onClose={() => setShowOfferModal(false)} dispute={selectedDispute} /> <AgentDetailsModal isOpen={showAgentModal} onClose={() => setShowAgentModal(false)} dispute={selectedDispute} /> <ClientDetailsModal isOpen={showClientModal} onClose={() => setShowClientModal(false)} dispute={selectedDispute} /> <DisputeDetailsModal isOpen={showDisputeModal} onClose={() => setShowDisputeModal(false)} dispute={selectedDispute} /> <ContactAgentModal isOpen={showContactAgentModal} onClose={() => setShowContactAgentModal(false)} dispute={selectedDispute} /> <ContactClientModal isOpen={showContactClientModal} onClose={() => setShowContactClientModal(false)} dispute={selectedDispute} /> <AdminReplyModal isOpen={showReplyModal} onClose={() => setShowReplyModal(false)} dispute={selectedDispute} onSubmitReply={handleSubmitReply} /> </div> </TooltipProvider> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/leads-content/leads-table.tsx" isFixed="true" isQuickEdit="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Eye, Clock, CheckCircle2, Filter } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useState } from "react" import type { LeadsTableProps } from "./types" export default function LeadsTable({ leads, handleViewLeadDetails, handleCycleLeadStatus, formatDate, filterValues, onFilterChange, }: LeadsTableProps) { // Local filter state (not applied until "סנן" is clicked) const [localFilters, setLocalFilters] = useState({ dateRange: "all", offerType: "all", status: "all", interestType: "all", }) // Applied filters state (what's actually filtering the table) const [appliedFilters, setAppliedFilters] = useState({ dateRange: "all", offerType: "all", status: "all", interestType: "all", }) // Handle local filter changes (doesn't trigger table update) const handleLocalFilterChange = (key: string, value: string) => { setLocalFilters((prev) => ({ ...prev, [key]: value, })) } // Apply filters when "סנן" button is clicked const applyFilters = () => { setAppliedFilters(localFilters) // Also call the parent's filter change handler if provided if (onFilterChange) { Object.entries(localFilters).forEach(([key, value]) => { onFilterChange(key, value) }) } } // Reset all filters const resetFilters = () => { const resetState = { dateRange: "all", offerType: "all", status: "all", interestType: "all", } setLocalFilters(resetState) setAppliedFilters(resetState) if (onFilterChange) { Object.entries(resetState).forEach(([key, value]) => { onFilterChange(key, value) }) } } // Filter leads based on applied filters const filteredLeads = leads.filter((lead) => { if (appliedFilters.status !== "all" && lead.status !== appliedFilters.status) { return false } if (appliedFilters.interestType !== "all" && lead.interestType !== appliedFilters.interestType) { return false } if (appliedFilters.offerType !== "all") { // Add offer type filtering logic if needed // For now, assuming all leads are pension type } if (appliedFilters.dateRange !== "all") { // Add date range filtering logic if needed const today = new Date() const leadDate = new Date(lead.date) switch (appliedFilters.dateRange) { case "today": if (leadDate.toDateString() !== today.toDateString()) return false break case "week": const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000) if (leadDate < weekAgo) return false break case "month": const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000) if (leadDate < monthAgo) return false break case "quarter": const quarterAgo = new Date(today.getTime() - 90 * 24 * 60 * 60 * 1000) if (leadDate < quarterAgo) return false break } } return true }) return ( <Card> <CardHeader> <CardTitle>לידים</CardTitle> <CardDescription>משתמשים שהביעו עניין ביצירת קשר</CardDescription> </CardHeader> {/* Filter Section - Enhanced with Apply Button /} <div className="px-6 pb-4 border-b"> <div className="flex items-center gap-2 text-sm mb-3"> <span className="text-gray-500 font-medium">סינון:</span> <Select value={localFilters.dateRange} onValueChange={(value) => handleLocalFilterChange("dateRange", value)}> <SelectTrigger className="w-32 h-8 text-xs"> <SelectValue placeholder="תאריך" /> </SelectTrigger> <SelectContent> <SelectItem value="all">כל התאריכים</SelectItem> <SelectItem value="today">היום</SelectItem> <SelectItem value="week">השבוע</SelectItem> <SelectItem value="month">החודש</SelectItem> <SelectItem value="quarter">הרבעון</SelectItem> </SelectContent> </Select> <Select value={localFilters.offerType} onValueChange={(value) => handleLocalFilterChange("offerType", value)}> <SelectTrigger className="w-32 h-8 text-xs"> <SelectValue placeholder="סוג הצעה" /> </SelectTrigger> <SelectContent> <SelectItem value="all">כל ההצעות</SelectItem> <SelectItem value="pension">פנסיה</SelectItem> <SelectItem value="providentFund">קרן השתלמות</SelectItem> <SelectItem value="studyFund">קופת גמל</SelectItem> </SelectContent> </Select> <Select value={localFilters.status} onValueChange={(value) => handleLocalFilterChange("status", value)}> <SelectTrigger className="w-28 h-8 text-xs"> <SelectValue placeholder="סטטוס" /> </SelectTrigger> <SelectContent> <SelectItem value="all">כל הסטטוסים</SelectItem> <SelectItem value="חדש">חדש</SelectItem> <SelectItem value="בטיפול">בטיפול</SelectItem> <SelectItem value="טופל">טופל</SelectItem> </SelectContent> </Select> <Select value={localFilters.interestType} onValueChange={(value) => handleLocalFilterChange("interestType", value)} > <SelectTrigger className="w-36 h-8 text-xs"> <SelectValue placeholder="סוג התעניינות" /> </SelectTrigger> <SelectContent> <SelectItem value="all">כל הסוגים</SelectItem> <SelectItem value="ביקש יצירת קשר">ביקש יצירת קשר</SelectItem> <SelectItem value="צפה בפרופיל">צפה בפרופיל</SelectItem> <SelectItem value="הוריד מידע">הוריד מידע</SelectItem> </SelectContent> </Select> </div> {/ Filter Action Buttons /} <div className="flex items-center gap-2"> <Button onClick={applyFilters} size="sm" className="h-8 px-3 text-xs"> <Filter className="h-3 w-3 mr-1" /> סנן </Button> <Button onClick={resetFilters} variant="outline" size="sm" className="h-8 px-3 text-xs bg-transparent"> איפוס </Button> <span className="text-xs text-gray-500 mr-2"> מציג {filteredLeads.length} מתוך {leads.length} לידים </span> </div> </div> <CardContent> <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="border-b"> <th className="text-right py-3 px-4 font-medium">מזהה</th> <th className="text-right py-3 px-4 font-medium">תאריך</th> <th className="text-right py-3 px-4 font-medium">סוג התעניינות</th> <th className="text-right py-3 px-4 font-medium">סוג הצעה</th> <th className="text-right py-3 px-4 font-medium">סטטוס</th> <th className="text-right py-3 px-4 font-medium">פעולות</th> </tr> </thead> <tbody> {filteredLeads.map((lead) => ( <tr key={lead.id} className="border-b hover:bg-gray-50 cursor-pointer"> <td className="py-3 px-4">{lead.id}</td> <td className="py-3 px-4">{formatDate(lead.date)}</td> <td className="py-3 px-4"> <div className="flex items-center"> <Badge className={ lead.interestType === "ביקש יצירת קשר" ? "bg-green-100 text-green-800 hover:bg-green-100" : "bg-blue-100 text-blue-800 hover:bg-blue-100" } > {lead.interestType} </Badge> </div> </td> <td className="py-3 px-4">פנסיה</td> <td className="py-3 px-4"> <Badge variant={lead.status === "בטיפול" ? "default" : "outline"} className={ lead.status === "בטיפול" ? "bg-blue-100 text-blue-800 hover:bg-blue-100" : lead.status === "חדש" ? "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" : lead.status === "טופל" ? "bg-green-100 text-green-800 hover:bg-green-100" : "" } > {lead.status} </Badge> </td> <td className="py-3 px-4"> <div className="flex gap-2"> <Button variant="ghost" size="icon" onClick={(e) => { e.stopPropagation() handleViewLeadDetails(lead) }} title="צפייה בפרטי הליד" > <Eye className="h-4 w-4 text-blue-600" /> </Button> <Button variant="ghost" size="icon" onClick={(e) => { e.stopPropagation() handleCycleLeadStatus(lead.id) }} title="לחץ כדי לשנות סטטוס" > {lead.status === "חדש" ? ( <div className="w-4 h-4 rounded-full bg-yellow-500"></div> ) : lead.status === "בטיפול" ? ( <Clock className="h-4 w-4 text-blue-600" /> ) : ( <CheckCircle2 className="h-4 w-4 text-green-600" /> )} </Button> </div> </td> </tr> ))} </tbody> </table> </div> </CardContent> </Card> ) } [V0_FILE]typescript:file="types/models/client.ts" // Client-related types and interfaces export interface Client { id: string // clientId - UUID fullName: string email: string phone: string birthDate: Date // timestamp gender: string selectedProducts: { pension: string | null // UUID of pension form in /client-pension collection providentFund: string | null // UUID of provident form in /client-provident-fund collection studyFund: string | null // UUID of studyFund form in /client-study-fund collection } employmentDetails: { status: string sector: string occupation: string incomeRange: string } allowMarketing: boolean createdAt: Date // timestamp lastLogin: Date // timestamp } export interface ClientPension { clientId: string // client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: Date // timestamp } export interface ClientProvidentFund { clientId: string // client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: Date // timestamp } export interface ClientStudyFund { clientId: string // client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: Date // timestamp } export interface ClientSelectedOffers { clientId: string // client UUID pension: { id: string contactMethod: ("phone" | "email")[] // one or both expirationTimestamp: Date // timestamp } | null providentFund: { id: string contactMethod: ("phone" | "email")[] // one or both expirationTimestamp: Date // timestamp } | null studyFund: { id: string contactMethod: ("phone" | "email")[] // one or both expirationTimestamp: Date // timestamp } | null updatedAt: Date // timestamp } export interface ClientMessage { id: string // messageId - UUID clientId: string sender: "system" | "agent" | "admin" senderId: string message: string timestamp: Date // timestamp type: "notification" | "info" } export interface ClientDispute { id: string // disputeId - UUID clientId: string offerId: string agentId: string status: "new" | "in_review" | "resolved" subject: string description: string openedAt: Date // timestamp closedAt: Date | null // timestamp } [V0_FILE]typescript:file="types/models/agent.ts" // Agent-related types and interfaces export interface Agent { id: string // agentId - UUID fullName: string email: string phone: string identificationNumber: number licenseNumber: string licenseType: string licenseIssuedAt: Date // timestamp licenseDocumentUrl: string agencyName: string serviceArea: string yearsExperience: number clientNumber: string languages: string[] services: ("pension" | "providentFund" | "studyFund")[] status: "pending" | "approved" | "rejected" rating: number reviewsCount: number allowMarketing: boolean createdAt: Date // timestamp lastLogin: Date // timestamp } export interface AgentOfferPension { id: string // offerId - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: string[] targetOccupation: string[] minBalance: string expirationDate: Date // timestamp viewCount: number clickCount: number selectCount: number createdAt: Date // timestamp updatedAt: Date // timestamp } export interface AgentOfferProvidentFund { id: string // offerId - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: string[] targetOccupation: string[] minBalance: string expirationDate: Date // timestamp viewCount: number clickCount: number selectCount: number createdAt: Date // timestamp } export interface AgentOfferStudyFund { id: string // offerId - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: string[] targetOccupation: string[] minBalance: string expirationDate: Date // timestamp viewCount: number clickCount: number selectCount: number createdAt: Date // timestamp } // Generic agent offer type for common operations export type AgentOffer = AgentOfferPension | AgentOfferProvidentFund | AgentOfferStudyFund export interface AgentMessage { id: string // messageId - UUID agentId: string sender: "system" | "agent" | "admin" senderId: string message: string timestamp: Date // timestamp type: "notification" | "info" } export interface AgentOfferMatch { id: string // matchId - UUID clientId: string agentId: string offerId: string productType: "pension" | "providentFund" | "studyFund" contactMethod: ("phone" | "email")[] // one or both status: "new" | "contacted" | "in_progress" | "completed" | "not_relevant" | "canceled" createdAt: Date // timestamp updatedAt: Date // timestamp } export interface AgentReview { id: string // reviewId - UUID agentId: string clientId: string rating: number text: string createdAt: Date // timestamp adminApproved: boolean } [V0_FILE]typescript:file="types/models/admin.ts" // Admin-related types and interfaces export interface Admin { id: string // adminId - UUID fullName: string email: string role: "superadmin" | "moderator" createdAt: Date // timestamp lastLogin: Date // timestamp } export interface PlatformNotification { id: string // notificationId - UUID targetAudience: ("clients" | "agents" | "admins")[] // one or more message: string timestamp: Date // timestamp critical: boolean } [V0_FILE]typescript:file="types/models/common.ts" // Common utility types used across the application // Product types for type safety export type ProductType = "pension" | "providentFund" | "studyFund" // Contact methods export type ContactMethod = "phone" | "email" // User roles export type UserRole = "client" | "agent" | "admin" // Status types export type AgentStatus = "pending" | "approved" | "rejected" export type DisputeStatus = "new" | "in_review" | "resolved" export type MatchStatus = "new" | "contacted" | "in_progress" | "completed" | "not_relevant" | "canceled" export type MessageSender = "system" | "agent" | "admin" export type MessageType = "notification" | "info" export type AdminRole = "superadmin" | "moderator" [V0_FILE]typescript:file="types/models/forms.ts" // Form data types for UI components import type { ProductType } from "./common" export interface ClientFormData { fullName: string email: string phone: string birthDate: string // Will be converted to Date gender: string selectedProducts: string[] // Will be converted to selectedProducts map employmentStatus: string sector: string occupation: string incomeRange: string allowMarketing: boolean } export interface PensionFormData { currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string } export interface ProvidentFundFormData { currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string } export interface StudyFundFormData { currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string } export interface AgentFormData { fullName: string email: string phone: string identificationNumber: string // Will be converted to number licenseNumber: string licenseType: string licenseIssuedAt: string // Will be converted to Date licenseDocument: File | null agencyName: string serviceArea: string yearsExperience: string // Will be converted to number clientNumber: string languages: string[] services: ProductType[] allowMarketing: boolean } export interface OfferFormData { title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: string[] targetOccupation: string[] minBalance: string expirationDate: string // Will be converted to Date } [V0_FILE]typescript:file="types/models/api.ts" // API response types export interface ApiResponse<T> { success: boolean data?: T error?: string message?: string } export interface PaginatedResponse<T> { items: T[] total: number page: number limit: number hasMore: boolean } [V0_FILE]typescript:file="types/models/dashboard.ts" // Dashboard-related types and statistics export interface DashboardStats { totalClients: number totalAgents: number totalOffers: number totalMatches: number pendingDisputes: number monthlyGrowth: number } export interface AgentDashboardStats { totalOffers: number activeOffers: number totalViews: number totalClicks: number totalMatches: number conversionRate: number averageRating: number totalReviews: number } export interface ClientDashboardStats { selectedOffers: number activeMatches: number completedMatches: number potentialSavings: number } [V0_FILE]typescript:file="types/models/filters.ts" // Filter types for search and filtering functionality import type { ProductType, AgentStatus } from "./common" export interface OfferFilters { productType?: ProductType[] managingCompany?: string[] feeAccumulatedMax?: number feeDepositMax?: number targetAgeRange?: string[] targetOccupation?: string[] minBalance?: string[] agentRating?: number expirationDate?: { from?: Date to?: Date } } export interface AgentFilters { services?: ProductType[] languages?: string[] serviceArea?: string[] yearsExperience?: { min?: number max?: number } rating?: number status?: AgentStatus[] } export interface ClientFilters { sector?: string[] occupation?: string[] incomeRange?: string[] selectedProducts?: ProductType[] registrationDate?: { from?: Date to?: Date } } [V0_FILE]typescript:file="types/models.ts" isFixed="true" isQuickEdit="true" // Core TypeScript interfaces mirroring the Firestore schema from docs/firestore-schema.md // Re-exports all model types for backward compatibility // ============================================================================ // CLIENT TYPES // ============================================================================ export interface Client { id: string // clientId - UUID fullName: string email: string phone: string birthDate: Date // timestamp gender: string selectedProducts: { pension: string | null // UUID of pension form in /client-pension collection providentFund: string | null // UUID of provident form in /client-provident-fund collection studyFund: string | null // UUID of studyFund form in /client-study-fund collection } employmentDetails: { status: string sector: string occupation: string incomeRange: string } allowMarketing: boolean createdAt: Date // timestamp lastLogin: Date // timestamp } export interface ClientPension { clientId: string // client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: Date // timestamp } export interface ClientProvidentFund { clientId: string // client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: Date // timestamp } export interface ClientStudyFund { clientId: string // client UUID currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string updatedAt: Date // timestamp } export interface ClientSelectedOffers { clientId: string // client UUID pension: { id: string contactMethod: ("phone" | "email")[] // one or both expirationTimestamp: Date // timestamp } | null providentFund: { id: string contactMethod: ("phone" | "email")[] // one or both expirationTimestamp: Date // timestamp } | null studyFund: { id: string contactMethod: ("phone" | "email")[] // one or both expirationTimestamp: Date // timestamp } | null updatedAt: Date // timestamp } export interface ClientMessage { id: string // messageId - UUID clientId: string sender: "system" | "agent" | "admin" senderId: string message: string timestamp: Date // timestamp type: "notification" | "info" } export interface ClientDispute { id: string // disputeId - UUID clientId: string offerId: string agentId: string status: "new" | "in_review" | "resolved" subject: string description: string openedAt: Date // timestamp closedAt: Date | null // timestamp } // ============================================================================ // AGENT TYPES // ============================================================================ export interface Agent { id: string // agentId - UUID fullName: string email: string phone: string identificationNumber: number licenseNumber: string licenseType: string licenseIssuedAt: Date // timestamp licenseDocumentUrl: string agencyName: string serviceArea: string yearsExperience: number clientNumber: string languages: string[] services: ("pension" | "providentFund" | "studyFund")[] status: "pending" | "approved" | "rejected" rating: number reviewsCount: number allowMarketing: boolean createdAt: Date // timestamp lastLogin: Date // timestamp } export interface AgentOfferPension { id: string // offerId - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: string[] targetOccupation: string[] minBalance: string expirationDate: Date // timestamp viewCount: number clickCount: number selectCount: number createdAt: Date // timestamp updatedAt: Date // timestamp } export interface AgentOfferProvidentFund { id: string // offerId - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: string[] targetOccupation: string[] minBalance: string expirationDate: Date // timestamp viewCount: number clickCount: number selectCount: number createdAt: Date // timestamp } export interface AgentOfferStudyFund { id: string // offerId - UUID agentId: string title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: string[] targetOccupation: string[] minBalance: string expirationDate: Date // timestamp viewCount: number clickCount: number selectCount: number createdAt: Date // timestamp } // Generic agent offer type for common operations export type AgentOffer = AgentOfferPension | AgentOfferProvidentFund | AgentOfferStudyFund export interface AgentMessage { id: string // messageId - UUID agentId: string sender: "system" | "agent" | "admin" senderId: string message: string timestamp: Date // timestamp type: "notification" | "info" } export interface AgentOfferMatch { id: string // matchId - UUID clientId: string agentId: string offerId: string productType: "pension" | "providentFund" | "studyFund" contactMethod: ("phone" | "email")[] // one or both status: "new" | "contacted" | "in_progress" | "completed" | "not_relevant" | "canceled" createdAt: Date // timestamp updatedAt: Date // timestamp } export interface AgentReview { id: string // reviewId - UUID agentId: string clientId: string rating: number text: string createdAt: Date // timestamp adminApproved: boolean } // ============================================================================ // ADMIN TYPES // ============================================================================ export interface Admin { id: string // adminId - UUID fullName: string email: string role: "superadmin" | "moderator" createdAt: Date // timestamp lastLogin: Date // timestamp } export interface PlatformNotification { id: string // notificationId - UUID targetAudience: ("clients" | "agents" | "admins")[] // one or more message: string timestamp: Date // timestamp critical: boolean } // ============================================================================ // UTILITY TYPES // ============================================================================ // Product types for type safety export type ProductType = "pension" | "providentFund" | "studyFund" // Contact methods export type ContactMethod = "phone" | "email" // User roles export type UserRole = "client" | "agent" | "admin" // Status types export type AgentStatus = "pending" | "approved" | "rejected" export type DisputeStatus = "new" | "in_review" | "resolved" export type MatchStatus = "new" | "contacted" | "in_progress" | "completed" | "not_relevant" | "canceled" export type MessageSender = "system" | "agent" | "admin" export type MessageType = "notification" | "info" export type AdminRole = "superadmin" | "moderator" // Form data types for UI components export interface ClientFormData { fullName: string email: string phone: string birthDate: string // Will be converted to Date gender: string selectedProducts: string[] // Will be converted to selectedProducts map employmentStatus: string sector: string occupation: string incomeRange: string allowMarketing: boolean } export interface PensionFormData { currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string } export interface ProvidentFundFormData { currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string } export interface StudyFundFormData { currentCompany: string balanceRange: string feeAccumulated: number feeDeposit: number investmentTrack: string } export interface AgentFormData { fullName: string email: string phone: string identificationNumber: string // Will be converted to number licenseNumber: string licenseType: string licenseIssuedAt: string // Will be converted to Date licenseDocument: File | null agencyName: string serviceArea: string yearsExperience: string // Will be converted to number clientNumber: string languages: string[] services: ProductType[] allowMarketing: boolean } export interface OfferFormData { title: string managingCompany: string feeAccumulated: number feeDeposit: number targetAgeRange: string[] targetOccupation: string[] minBalance: string expirationDate: string // Will be converted to Date } // ============================================================================ // API RESPONSE TYPES // ============================================================================ export interface ApiResponse<T> { success: boolean data?: T error?: string message?: string } export interface PaginatedResponse<T> { items: T[] total: number page: number limit: number hasMore: boolean } // ============================================================================ // DASHBOARD TYPES // ============================================================================ export interface DashboardStats { totalClients: number totalAgents: number totalOffers: number totalMatches: number pendingDisputes: number monthlyGrowth: number } export interface AgentDashboardStats { totalOffers: number activeOffers: number totalViews: number totalClicks: number totalMatches: number conversionRate: number averageRating: number totalReviews: number } export interface ClientDashboardStats { selectedOffers: number activeMatches: number completedMatches: number potentialSavings: number } // ============================================================================ // FILTER TYPES // ============================================================================ export interface OfferFilters { productType?: ProductType[] managingCompany?: string[] feeAccumulatedMax?: number feeDepositMax?: number targetAgeRange?: string[] targetOccupation?: string[] minBalance?: string[] agentRating?: number expirationDate?: { from?: Date to?: Date } } export interface AgentFilters { services?: ProductType[] languages?: string[] serviceArea?: string[] yearsExperience?: { min?: number max?: number } rating?: number status?: AgentStatus[] } export interface ClientFilters { sector?: string[] occupation?: string[] incomeRange?: string[] selectedProducts?: ProductType[] registrationDate?: { from?: Date to?: Date } } // Re-export all types from individual modules export from "./models/client" export * from "./models/agent" export * from "./models/admin" export * from "./models/common" export * from "./models/forms" export * from "./models/api" export * from "./models/dashboard" export * from "./models/filters" [V0_FILE]typescriptreact:file="app/agent/pending/page.tsx" import { Clock } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" export default function PendingAgentPage() { return ( <div className="min-h-screen bg-gray-50 flex flex-col"> {/* Main Content /} <div className="flex-1 flex items-center justify-center px-4 py-12"> <div className="max-w-md w-full text-center"> {/ Icon /} <div className="mx-auto w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6"> <Clock className="w-8 h-8 text-yellow-600" /> </div> {/ Title /} <h1 className="text-2xl font-bold text-gray-900 mb-4">ההרשמה שלך נמצאת בבדיקה</h1> {/ Message /} <div className="text-gray-600 mb-8 leading-relaxed"> <p className="mb-4">תודה על ההרשמה!</p> <p className="mb-4">פרטי ההצטרפות שלך כסוכן נבדקים על ידי צוות האתר.</p> <p className="mb-4">אנו נשלח לך הודעה ברגע שהבקשה תאושר.</p> <p>בינתיים אין לך גישה למערכת.</p> </div> {/ Action Button /} <Button asChild className="w-full"> <Link href="/">חזרה לדף הבית</Link> </Button> </div> </div> {/ Footer /} <footer className="bg-white border-t border-gray-200 py-6"> <div className="max-w-7xl mx-auto px-4 text-center text-sm text-gray-500"> © 2024 פנסיה חכמה. כל הזכויות שמורות. </div> </footer> </div> ) } [V0_FILE]typescriptreact:file="app/agent/rejected/page.tsx" import { AlertCircle } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" export default function RejectedAgentPage() { return ( <div className="min-h-screen bg-gray-50 flex flex-col"> {/ Main Content /} <div className="flex-1 flex items-center justify-center px-4 py-12"> <div className="max-w-md w-full text-center"> {/ Icon /} <div className="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6"> <AlertCircle className="w-8 h-8 text-red-600" /> </div> {/ Title /} <h1 className="text-2xl font-bold text-gray-900 mb-4">ההרשמה שלך נדחתה</h1> {/ Message /} <div className="text-gray-600 mb-8 leading-relaxed"> <p className="mb-4">אנו מצטערים, אך בקשת ההצטרפות שלך כסוכן נדחתה על ידי צוות האתר.</p> <p>אם לדעתך מדובר בטעות, או ברצונך לערער על ההחלטה — נשמח שתפנה אלינו דרך עמוד יצירת הקשר באתר.</p> </div> {/ Action Buttons /} <div className="space-y-3"> <Button asChild className="w-full"> <Link href="/contact">יצירת קשר</Link> </Button> <Button asChild variant="outline" className="w-full bg-transparent"> <Link href="/">חזרה לדף הבית</Link> </Button> </div> </div> </div> {/ Footer /} <footer className="bg-white border-t border-gray-200 py-6"> <div className="max-w-7xl mx-auto px-4 text-center text-sm text-gray-500"> © 2024 פנסיה חכמה. כל הזכויות שמורות. </div> </footer> </div> ) } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Eye, EyeOff } from "lucide-react" import { mockUsers } from "@/lib/mock/mockUsers" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") setIsLoading(true) try { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Find user in mock data const user = mockUsers.find((u) => u.email === email && u.password === password) if (!user) { setError("אימייל או סיסמה שגויים") return } // Store user data in localStorage (in real app, use proper auth) localStorage.setItem("currentUser", JSON.stringify(user)) // Redirect based on user type and status if (user.type === "client") { router.push("/dashboard") } else if (user.type === "admin") { router.push("/admin-dashboard") } else if (user.type === "agent") { // Check agent status for redirects if (user.status === "rejected") { router.push("/agent/rejected") } else if (user.status === "pending") { router.push("/agent/pending") } else { // Approved agents go to dashboard router.push("/agent-dashboard") } } } catch (error) { setError("אירעה שגיאה בהתחברות") } finally { setIsLoading(false) } } return ( <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <CardTitle className="text-2xl font-bold">התחברות</CardTitle> <CardDescription>הכנס את פרטי ההתחברות שלך כדי לגשת לחשבון</CardDescription> </CardHeader> <CardContent> <form onSubmit={handleSubmit} className="space-y-4"> <div className="space-y-2"> <Label htmlFor="email">אימייל</Label> <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required placeholder="הכנס את האימייל שלך" /> </div> <div className="space-y-2"> <Label htmlFor="password">סיסמה</Label> <div className="relative"> <Input id="password" type={showPassword ? "text" : "password"} value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="הכנס את הסיסמה שלך" /> <Button type="button" variant="ghost" size="sm" className="absolute left-0 top-0 h-full px-3 py-2 hover:bg-transparent" onClick={() => setShowPassword(!showPassword)} > {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />} </Button> </div> </div> {error && ( <Alert variant="destructive"> <AlertDescription>{error}</AlertDescription> </Alert> )} <Button type="submit" className="w-full" disabled={isLoading}> {isLoading ? "מתחבר..." : "התחבר"} </Button> </form> <div className="mt-6 text-center text-sm text-gray-600"> <p className="mb-2">משתמשי דמו:</p> <div className="space-y-1 text-xs"> <p> <strong>לקוח:</strong> client@demo.com / demo123 </p> <p> <strong>סוכן:</strong> agent@demo.com / demo123 </p> <p> <strong>מנהל:</strong> admin@demo.com / demo123 </p> <p> <strong>סוכן ממתין:</strong> pending@demo.com / demo123 </p> <p> <strong>סוכן נדחה:</strong> rejected@demo.com / demo123 </p> </div> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescript:file="lib/mock/mockUsers.ts" isFixed="true" isQuickEdit="true" import type { User } from "@/lib/auth" // Demo users for QA purposes export const demoUsers: Record<string, User> = { // Client user "client-1": { id: "client-1", email: "client@demo.com", password: "demo123", name: "יוסי כהן", role: "client" as const, pensionDetails: { pensionCompany: "הפניקס", pensionBalance: "450,000", managementFeeAccumulated: 1.2, managementFeeDeposit: 0.8, investmentTrack: "מסלול כללי", workField: "הייטק", monthlySalary: "25,000", monthlyContribution: "2,500", birthDate: "1985-03-15", gender: "זכר", }, offers: [ { id: "offer-1", company: "מגדל", managementFeeAccumulated: 0.9, managementFeeDeposit: 0.5, savingsAmount: 45000, status: "pending", }, ], }, // Agent user (approved) "agent-1": { id: "agent-1", email: "agent@demo.com", password: "demo123", name: "שרה לוי", role: "agent" as const, agentDetails: { licenseType: "רישיון סוכן ביטוח", licenseNumber: "12345678", licenseIssueDate: "2020-01-15", experience: "5+ שנים", clientsCount: "50-100", bio: "סוכנת ביטוח מנוסה המתמחה בפנסיה וביטוח חיים", services: ["ייעוץ פנסיוני", "ביטוח חיים", "קרנות השתלמות"], languages: ["עברית", "אנגלית"], agency: "סוכנות הביטוח המובילה", serviceArea: "מרכז", verified: true, status: "approved", }, agentMetrics: { offerAcceptanceRate: 75, averageSavings: 35000, profileViews: 1250, averageRating: 4.8, totalLeads: 45, convertedLeads: 32, reviewsCount: 28, positiveReviewsPercentage: 92, }, }, // Agent user (pending) "agent-pending": { id: "agent-pending", email: "pending@demo.com", password: "demo123", name: "רחל ממתינה", role: "agent" as const, agentDetails: { licenseType: "רישיון סוכן ביטוח", licenseNumber: "11223344", licenseIssueDate: "2024-01-01", experience: "2-3 שנים", clientsCount: "10-25", bio: "סוכנת ביטוח עם ניסיון בתחום הפנסיה", services: ["ייעוץ פנסיוני", "קרנות השתלמות"], languages: ["עברית"], agency: "סוכנות חדשה", serviceArea: "דרום", verified: false, status: "pending", }, agentMetrics: { offerAcceptanceRate: 0, averageSavings: 0, profileViews: 0, averageRating: 0, totalLeads: 0, convertedLeads: 0, reviewsCount: 0, positiveReviewsPercentage: 0, }, }, // Agent user (rejected) "agent-rejected": { id: "agent-rejected", email: "rejected@demo.com", password: "demo123", name: "משה נדחה", role: "agent" as const, agentDetails: { licenseType: "רישיון סוכן ביטוח", licenseNumber: "87654321", licenseIssueDate: "2023-06-01", experience: "1-2 שנים", clientsCount: "1-10", bio: "סוכן ביטוח חדש בתחום", services: ["ייעוץ פנסיוני"], languages: ["עברית"], agency: "סוכנות קטנה", serviceArea: "צפון", verified: false, status: "rejected", }, agentMetrics: { offerAcceptanceRate: 0, averageSavings: 0, profileViews: 0, averageRating: 0, totalLeads: 0, convertedLeads: 0, reviewsCount: 0, positiveReviewsPercentage: 0, }, }, // Admin user "admin-1": { id: "admin-1", email: "admin@demo.com", password: "demo123", name: "דוד אדמין", role: "admin" as const, }, } // For backward compatibility - empty user object since demo users removed export const demoUser = { email: "", password: "", name: "", id: "", role: "client" as const, pensionDetails: { pensionCompany: "", pensionBalance: "", managementFeeAccumulated: 0, managementFeeDeposit: 0, investmentTrack: "", workField: "", monthlySalary: "", monthlyContribution: "", birthDate: "", gender: "", }, offers: [], } // Agent user data export const agentUser = { id: "agent-1", name: "דוד כהן", email: "david@example.com", role: "agent", agentDetails: { licenseNumber: "12345", licenseType: "סוכן ביטוח פנסיוני", experience: "6-10", clientsCount: "101-200", bio: "יועץ פנסיוני מנוסה עם התמחות בתכנון פרישה וחיסכון ארוך טווח. מתמחה בהתאמת פתרונות אישיים לצרכי הלקוח.", services: ["פנסיה", "קרן השתלמות", "ביטוחים", "גמל להשקעה"], languages: ["עברית", "אנגלית"], }, agentMetrics: { totalLeads: 47, convertedLeads: 12, offerAcceptanceRate: 65, averageSavings: 120000, profileViews: 324, averageRating: 4.6, reviewsCount: 23, positiveReviewsPercentage: 87, }, } // Admin dashboard users data export const clientsData = [ { name: "ישראל ישראלי", email: "israel@example.com", registrationDate: "10/04/2025", reviewedOffers: 8, lastLogin: "17/05/2025", }, { name: "מיכל לוי", email: "michal@example.com", registrationDate: "15/04/2025", reviewedOffers: 5, lastLogin: "16/05/2025", }, { name: "יוסי כהן", email: "yossi@example.com", registrationDate: "20/04/2025", reviewedOffers: 12, lastLogin: "18/05/2025", }, { name: "רונית אברהם", email: "ronit@example.com", registrationDate: "25/04/2025", reviewedOffers: 3, lastLogin: "15/05/2025", }, { name: "אבי משה", email: "avi@example.com", registrationDate: "01/05/2025", reviewedOffers: 7, lastLogin: "18/05/2025", }, ] export const agentsData = [ { name: "דוד לוי", licenseNumber: "12345", verificationStatus: "מאושר", submittedOffers: 24, reviews: 18 }, { name: "שרה כהן", licenseNumber: "23456", verificationStatus: "מאושר", submittedOffers: 18, reviews: 12 }, { name: "יעקב ישראלי", licenseNumber: "34567", verificationStatus: "בבדיקה", submittedOffers: 0, reviews: 0 }, { name: "רחל אברהם", licenseNumber: "45678", verificationStatus: "מאושר", submittedOffers: 32, reviews: 25 }, { name: "משה דוד", licenseNumber: "56789", verificationStatus: "נדחה", submittedOffers: 0, reviews: 0 }, ] export const adminsData = [ { name: "מנהל מערכת", email: "admin@gmail.com", role: "מנהל ראשי", permissions: "מלא", status: "פעיל" }, { name: "יעל אברהם", email: "yael@example.com", role: "מנהל תוכן", permissions: "תוכן בלבד", status: "פעיל" }, { name: "משה ישראלי", email: "moshe@example.com", role: "מנהל אימות", permissions: "אימות סוכנים", status: "פעיל" }, { name: "רונית כהן", email: "ronit@example.com", role: "מנהל תמיכה", permissions: "תמיכה ומחלוקות", status: "פעיל" }, { name: "אבי לוי", email: "avi@example.com", role: "מנהל מערכת", permissions: "מלא", status: "מושבת" }, ] export const verificationData = [ { name: "יעקב ישראלי", phone: "050-1234567", email: "yaakov@example.com", registrationDate: "10/05/2025" }, { name: "נועה כהן", phone: "052-2345678", email: "noa@example.com", registrationDate: "11/05/2025" }, { name: "אלון לוי", phone: "054-3456789", email: "alon@example.com", registrationDate: "12/05/2025" }, { name: "שירה אברהם", phone: "053-4567890", email: "shira@example.com", registrationDate: "13/05/2025" }, { name: "עומר דוד", phone: "058-5678901", email: "omer@example.com", registrationDate: "14/05/2025" }, ] export const mockUsers = [ { id: "client-1", email: "client@demo.com", password: "demo123", type: "client", name: "יוסי כהן", verified: true, }, { id: "agent-1", email: "agent@demo.com", password: "demo123", type: "agent", name: "שרה לוי", verified: true, status: "approved", }, { id: "admin-1", email: "admin@demo.com", password: "demo123", type: "admin", name: "דוד אדמין", verified: true, }, { id: "agent-pending", email: "pending@demo.com", password: "demo123", type: "agent", name: "רחל ממתינה", verified: false, status: "pending", }, { id: "agent-rejected", email: "rejected@demo.com", password: "demo123", type: "agent", name: "משה נדחה", verified: false, status: "rejected", }, ] [V0_FILE]typescriptreact:file="components/ui/disclaimer-message.tsx" import type React from "react" import { AlertTriangle } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" interface DisclaimerMessageProps { children: React.ReactNode } export function DisclaimerMessage({ children }: DisclaimerMessageProps) { return ( <Card className="border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50"> <CardContent className="p-3"> <div className="flex items-center gap-3"> <AlertTriangle className="h-4 w-4 text-amber-600 flex-shrink-0" /> <div className="text-sm text-amber-800">{children}</div> </div> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="app/components/how-it-works-section.tsx" import { Filter, Heart, MessageCircle } from "lucide-react" export function HowItWorksSection() { return ( <section id="how-it-works" className="py-16 bg-gray-50"> <div className="container mx-auto px-4"> <div className="text-center mb-12"> <h2 className="text-3xl md:text-4xl font-bold mb-4">איך זה עובד</h2> <p className="text-lg text-muted-foreground max-w-2xl mx-auto"> תהליך פשוט ויעיל בשלושה שלבים לחיבור בין לקוחות פרטיים לסוכני פנסיה מובילים </p> </div> <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto"> {/ Step 1: מילוי העדפות /} <div className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow relative"> <div className="absolute -top-3 -right-3 bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"> 1 </div> <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mb-4"> <Filter className="h-5 w-5 text-blue-600" /> </div> <h3 className="text-xl font-semibold mb-2">מילוי העדפות</h3> <p className="text-muted-foreground text-sm mb-4">בחרו קריטריונים להתאמת מנגנון הצגת ההצעות שלנו</p> {/ Screenshot placeholder for filter form /} <div className="bg-gray-100 rounded-lg p-3 border"> <div className="bg-white rounded p-2 mb-2"> <div className="flex items-center gap-2 mb-2"> <div className="w-3 h-3 bg-blue-500 rounded"></div> <div className="h-2 bg-gray-300 rounded flex-1"></div> </div> <div className="grid grid-cols-2 gap-1"> <div className="h-6 bg-gray-200 rounded text-xs flex items-center justify-center">סוג מוצר</div> <div className="h-6 bg-gray-200 rounded text-xs flex items-center justify-center">אזור</div> </div> </div> <div className="h-6 bg-blue-500 rounded text-xs text-white flex items-center justify-center"> הצג הצעות </div> </div> </div> {/ Step 2: בחירת הצעה /} <div className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow relative"> <div className="absolute -top-3 -right-3 bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"> 2 </div> <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mb-4"> <Heart className="h-5 w-5 text-blue-600" /> </div> <h3 className="text-xl font-semibold mb-2">בחירת הצעה</h3> <p className="text-muted-foreground text-sm mb-4">בחרו את ההצעה שמתאימה לכם מתוך רשימת ההצעות המותאמות</p> {/ Screenshot placeholder for offer cards /} <div className="bg-gray-100 rounded-lg p-3 border"> <div className="space-y-2"> <div className="bg-white rounded p-2 border-r-4 border-blue-500"> <div className="flex justify-between items-center mb-1"> <div className="h-2 bg-gray-800 rounded w-20"></div> <div className="flex gap-1"> {[1, 2, 3, 4, 5].map((i) => ( <div key={i} className="w-2 h-2 bg-yellow-400 rounded-full"></div> ))} </div> </div> <div className="h-1 bg-gray-300 rounded w-full mb-1"></div> <div className="h-1 bg-gray-300 rounded w-3/4"></div> </div> <div className="bg-white rounded p-2 border-r-4 border-green-500"> <div className="flex justify-between items-center mb-1"> <div className="h-2 bg-gray-800 rounded w-16"></div> <div className="flex gap-1"> {[1, 2, 3, 4].map((i) => ( <div key={i} className="w-2 h-2 bg-yellow-400 rounded-full"></div> ))} </div> </div> <div className="h-1 bg-gray-300 rounded w-full mb-1"></div> <div className="h-1 bg-gray-300 rounded w-2/3"></div> </div> </div> </div> </div> {/ Step 3: יצירת קשר /} <div className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow relative"> <div className="absolute -top-3 -right-3 bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"> 3 </div> <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mb-4"> <MessageCircle className="h-5 w-5 text-blue-600" /> </div> <h3 className="text-xl font-semibold mb-2">יצירת קשר</h3> <p className="text-muted-foreground text-sm mb-4">יצירת קשר על ידכם או על ידי הסוכן שנבחר, לבחירתכם</p> {/ Screenshot placeholder for contact/message UI /} <div className="bg-gray-100 rounded-lg p-3 border"> <div className="bg-white rounded p-2"> <div className="flex items-center gap-2 mb-2"> <div className="w-6 h-6 bg-blue-500 rounded-full"></div> <div className="h-2 bg-gray-800 rounded w-16"></div> </div> <div className="bg-blue-50 rounded p-2 mb-2"> <div className="h-1 bg-gray-400 rounded w-full mb-1"></div> <div className="h-1 bg-gray-400 rounded w-3/4"></div> </div> <div className="flex gap-2"> <div className="h-6 bg-blue-500 rounded flex-1 text-xs text-white flex items-center justify-center"> שלח הודעה </div> <div className="h-6 bg-green-500 rounded flex-1 text-xs text-white flex items-center justify-center"> התקשר </div> </div> </div> </div> </div> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="components/dashboard/sidebar-desktop.tsx" "use client" import { PieChart, FileText, Home, MessageSquare, User, LogOut, AlertTriangle } from "lucide-react" interface SidebarDesktopProps { activeContent: string setActiveContent: (content: string) => void handleLogout: () => void } export function SidebarDesktop({ activeContent, setActiveContent, handleLogout }: SidebarDesktopProps) { return ( <div className="hidden md:flex flex-col w-64 bg-white border-r"> <div className="p-4 border-b"> <div className="flex items-center justify-center"> <PieChart className="h-6 w-6 text-blue-600" /> <span className="text-xl font-bold mr-2">גורו פנסיוני</span> </div> </div> <nav className="flex-1 p-4 space-y-1"> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "offers" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("offers")} > <FileText className="h-5 w-5 ml-2" /> <span>הצעות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "selected-offers" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("selected-offers")} > <FileText className="h-5 w-5 ml-2" /> <span>הצעות שנבחרו</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "home" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("home")} > <Home className="h-5 w-5 ml-2" /> <span>מבט כללי</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "calculator" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("calculator")} > <PieChart className="h-5 w-5 ml-2" /> <span>מחשבון פנסיוני</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "messages" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("messages")} > <MessageSquare className="h-5 w-5 ml-2" /> <span>הודעות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "disputes" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("disputes")} > <AlertTriangle className="h-5 w-5 ml-2" /> <span>מחלוקות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeContent === "profile" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => setActiveContent("profile")} > <User className="h-5 w-5 ml-2" /> <span>פרופיל והגדרות</span> </button> </nav> <div className="p-4 border-t"> <button onClick={handleLogout} className="flex items-center w-full p-2 rounded-md hover:bg-gray-100 text-gray-700" > <LogOut className="h-5 w-5 ml-2" /> <span>התנתקות</span> </button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/mobile-header.tsx" "use client" import { Menu, PieChart } from "lucide-react" import { Button } from "@/components/ui/button" interface MobileHeaderProps { onMenuToggle: () => void title?: string } export function MobileHeader({ onMenuToggle, title = "גורו פנסיוני" }: MobileHeaderProps) { return ( <div className="md:hidden bg-white border-b px-4 py-3 flex items-center justify-between"> <div className="flex items-center gap-2"> <PieChart className="h-6 w-6 text-blue-600" /> <span className="text-lg font-bold">{title}</span> </div> <Button variant="ghost" size="icon" onClick={onMenuToggle} className="h-10 w-10" aria-label="פתח תפריט"> <Menu className="h-6 w-6" /> </Button> </div> ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" "use client" import { demoUser } from "@/lib/auth" import { useDashboardState } from "@/hooks/use-dashboard-state" import { useDashboardHandlers } from "@/hooks/use-dashboard-handlers" import { SidebarDesktop } from "@/components/dashboard/sidebar-desktop" import { SidebarMobile } from "@/components/dashboard/sidebar-mobile" import { MobileHeader } from "@/components/dashboard/mobile-header" import { ContentRenderer } from "./content-renderer" import { useEffect } from "react" export default function DashboardPage() { const state = useDashboardState() const handlers = useDashboardHandlers(state) const userName = demoUser.name const userEmail = demoUser.email const showPhoneInput = state.contactOption === "agent-contacts" && state.contactMethod === "phone" // Listen for navigation events from header useEffect(() => { const handleNavigateToProfile = () => { state.setActiveContent("profile") } const handleNavigateToMessages = () => { state.setActiveContent("messages") } const handleNavigateToOffers = () => { state.setActiveContent("offers") } const handleNavigateToSelectedOffers = () => { state.setActiveContent("selected-offers") } const handleNavigateToDisputes = () => { state.setActiveContent("disputes") } window.addEventListener("navigate-to-profile", handleNavigateToProfile) window.addEventListener("navigate-to-messages", handleNavigateToMessages) window.addEventListener("navigate-to-offers", handleNavigateToOffers) window.addEventListener("navigate-to-selected-offers", handleNavigateToSelectedOffers) window.addEventListener("navigate-to-disputes", handleNavigateToDisputes) return () => { window.removeEventListener("navigate-to-profile", handleNavigateToProfile) window.removeEventListener("navigate-to-messages", handleNavigateToMessages) window.removeEventListener("navigate-to-offers", handleNavigateToOffers) window.removeEventListener("navigate-to-selected-offers", handleNavigateToSelectedOffers) window.removeEventListener("navigate-to-disputes", handleNavigateToDisputes) } }, [state.setActiveContent]) return ( <div className="min-h-screen bg-gray-50 flex flex-col md:flex-row" dir="rtl"> {/ Desktop Sidebar /} <SidebarDesktop activeContent={state.activeContent} setActiveContent={state.setActiveContent} handleLogout={handlers.handleLogout} /> {/ Mobile Header /} <div className="flex-1 flex flex-col"> <MobileHeader onMenuToggle={() => state.setIsMenuOpen(true)} /> {/ Mobile Sidebar /} <SidebarMobile isMenuOpen={state.isMenuOpen} setIsMenuOpen={state.setIsMenuOpen} activeContent={state.activeContent} setActiveContent={state.setActiveContent} handleLogout={handlers.handleLogout} /> {/ Main Content /} <main className="flex-1 p-4 md:p-6 overflow-auto"> <div className="max-w-7xl mx-auto"> <ContentRenderer state={state} handlers={handlers} userName={userName} userEmail={userEmail} showPhoneInput={showPhoneInput} /> </div> </main> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/mobile-header.tsx" "use client" import { Menu, PieChart } from "lucide-react" import { Button } from "@/components/ui/button" interface MobileHeaderProps { onMenuToggle: () => void title?: string } export function MobileHeader({ onMenuToggle, title = "לוח בקרה סוכן" }: MobileHeaderProps) { return ( <div className="md:hidden bg-white border-b px-4 py-3 flex items-center justify-between"> <div className="flex items-center gap-2"> <PieChart className="h-6 w-6 text-blue-600" /> <span className="text-lg font-bold">{title}</span> </div> <Button variant="ghost" size="icon" onClick={onMenuToggle} className="h-10 w-10" aria-label="פתח תפריט"> <Menu className="h-6 w-6" /> </Button> </div> ) } [V0_FILE]typescriptreact:file="app/agent-dashboard/page.tsx" "use client" // Import data and utilities import { agentUser, leadsData, reviewsData } from "@/lib/agent-dashboard-data" import { formatDate, renderStars, findOfferById, getExpiringOffers, getOneDayExpiringOffers, } from "@/lib/agent-dashboard-utils" // Import hooks import { useAgentDashboardState } from "@/hooks/use-agent-dashboard-state" import { useAgentDashboardHandlers } from "@/hooks/use-agent-dashboard-handlers" import { useChartRenderers } from "@/components/agent-dashboard/chart-renderers" // Import components import SidebarDesktop from "@/components/agent-dashboard/sidebar-desktop" import SidebarMobile from "@/components/agent-dashboard/sidebar-mobile" import { MobileHeader } from "@/components/agent-dashboard/mobile-header" import ContactDialog from "./components/contact-dialog" import Modals from "./components/modals" import ContentRenderer from "./components/content-renderer" import { useEffect } from "react" export default function AgentDashboardPage() { // Use custom hooks for state and handlers const state = useAgentDashboardState() const handlers = useAgentDashboardHandlers({ setLeads: state.setLeads, setOffersData: state.setOffersData, setIsNewOfferModalOpen: state.setIsNewOfferModalOpen, setSelectedLead: state.setSelectedLead, setIsContactDialogOpen: state.setIsContactDialogOpen, setErrorMessage: state.setErrorMessage, setSelectedOffer: state.setSelectedOffer, setIsEditOfferModalOpen: state.setIsEditOfferModalOpen, setViewedOffer: state.setViewedOffer, setIsViewOfferModalOpen: state.setIsViewOfferModalOpen, setRequestChangeField: state.setRequestChangeField, setRequestChangeReason: state.setRequestChangeReason, setIsRequestChangeModalOpen: state.setIsRequestChangeModalOpen, setSelectedReviewId: state.setSelectedReviewId, setReviewDeletionReason: state.setReviewDeletionReason, setIsRequestReviewDeletionModalOpen: state.setIsRequestReviewDeletionModalOpen, errorMessage: state.errorMessage, errorTimeoutRef: state.errorTimeoutRef, offersData: state.offersData, }) // Use chart renderers const { renderLeadActivityChart, renderOfferPerformanceChart } = useChartRenderers({ offersData: state.offersData, }) // Calculate derived data const expiringOffers = getExpiringOffers(state.offersData) const oneDayExpiringOffers = getOneDayExpiringOffers(state.offersData) // Listen for navigation events from header useEffect(() => { const handleNavigateToAgentProfile = () => { state.setActiveContent("profile") } const handleNavigateToAgentMessages = () => { state.setActiveContent("messages") } const handleNavigateToAgentLeads = () => { state.setActiveContent("leads") } const handleNavigateToAgentReviews = () => { state.setActiveContent("reviews") } const handleNavigateToAgentOffers = () => { state.setActiveContent("offers") } window.addEventListener("navigate-to-agent-profile", handleNavigateToAgentProfile) window.addEventListener("navigate-to-agent-messages", handleNavigateToAgentMessages) window.addEventListener("navigate-to-agent-leads", handleNavigateToAgentLeads) window.addEventListener("navigate-to-agent-reviews", handleNavigateToAgentReviews) window.addEventListener("navigate-to-agent-offers", handleNavigateToAgentOffers) return () => { window.removeEventListener("navigate-to-agent-profile", handleNavigateToAgentProfile) window.removeEventListener("navigate-to-agent-messages", handleNavigateToAgentMessages) window.removeEventListener("navigate-to-agent-leads", handleNavigateToAgentLeads) window.removeEventListener("navigate-to-agent-reviews", handleNavigateToAgentReviews) window.removeEventListener("navigate-to-agent-offers", handleNavigateToAgentOffers) } }, [state.setActiveContent]) // Add handler for review deletion requests const handleRequestReviewDeletion = (reviewId: string) => { state.setSelectedReviewId(reviewId) state.setReviewDeletionReason("") state.setIsRequestReviewDeletionModalOpen(true) } const handleSubmitReviewDeletionRequest = () => { // Here you would implement the actual submission logic to send to admin console.log(`Requesting deletion of review ${state.selectedReviewId} with reason: ${state.reviewDeletionReason}`) // Show success message or notification alert("בקשת ההסרה נשלחה בהצלחה למנהל המערכת") state.setIsRequestReviewDeletionModalOpen(false) state.setSelectedReviewId(null) state.setReviewDeletionReason("") } return ( <div className="flex min-h-screen bg-gray-100 flex-col md:flex-row" dir="rtl"> {/ Desktop Sidebar /} <SidebarDesktop activeContent={state.activeContent} setActiveContent={state.setActiveContent} leads={state.leads} offersData={state.offersData} reviewsData={reviewsData} handleLogout={handlers.handleLogout} /> {/ Main content /} <div className="flex-1 flex flex-col"> {/ Mobile Header /} <MobileHeader onMenuToggle={() => state.setIsMenuOpen(true)} /> {/ Mobile Sidebar /} <SidebarMobile isMenuOpen={state.isMenuOpen} setIsMenuOpen={state.setIsMenuOpen} activeContent={state.activeContent} setActiveContent={state.setActiveContent} leads={state.leads} offersData={state.offersData} reviewsData={reviewsData} handleLogout={handlers.handleLogout} /> {/ Dashboard content /} <main className="flex-1 p-4 md:p-6 overflow-auto"> <ContentRenderer activeContent={state.activeContent} leadsData={leadsData} leads={state.leads} handleContactLead={handlers.handleContactLead} handleCycleLeadStatus={handlers.handleCycleLeadStatus} formatDate={formatDate} renderLeadActivityChart={renderLeadActivityChart} leadsFilterValues={state.leadsFilterValues} setLeadsFilterValues={state.setLeadsFilterValues} expiringOffers={expiringOffers} setIsNewOfferModalOpen={state.setIsNewOfferModalOpen} activeOfferType={state.activeOfferType} setActiveOfferType={state.setActiveOfferType} offersData={state.offersData} handleViewOffer={handlers.handleViewOffer} handleEditOffer={handlers.handleEditOffer} handleDeleteOffer={handlers.handleDeleteOffer} renderOfferPerformanceChart={renderOfferPerformanceChart} agentUser={agentUser} reviewsData={reviewsData} handleRequestReviewDeletion={handleRequestReviewDeletion} renderStars={renderStars} handleRequestChange={handlers.handleRequestChange} /> </main> </div> {/ Contact Dialog /} <ContactDialog isOpen={state.isContactDialogOpen} onClose={() => state.setIsContactDialogOpen(false)} selectedLead={state.selectedLead} formatDate={formatDate} findOfferById={findOfferById} handleMarkContacted={handlers.handleMarkContacted} /> {/ Modals /} <Modals isNewOfferModalOpen={state.isNewOfferModalOpen} setIsNewOfferModalOpen={state.setIsNewOfferModalOpen} handleCreateOffer={handlers.handleCreateOffer} isViewOfferModalOpen={state.isViewOfferModalOpen} setIsViewOfferModalOpen={state.setIsViewOfferModalOpen} viewedOffer={state.viewedOffer} formatDate={formatDate} isRequestChangeModalOpen={state.isRequestChangeModalOpen} setIsRequestChangeModalOpen={state.setIsRequestChangeModalOpen} requestChangeField={state.requestChangeField} requestChangeReason={state.requestChangeReason} setRequestChangeReason={state.setRequestChangeReason} handleSubmitChangeRequest={handlers.handleSubmitChangeRequest} isRequestReviewDeletionModalOpen={state.isRequestReviewDeletionModalOpen} setIsRequestReviewDeletionModalOpen={state.setIsRequestReviewDeletionModalOpen} selectedReviewId={state.selectedReviewId} reviewDeletionReason={state.reviewDeletionReason} setReviewDeletionReason={state.setReviewDeletionReason} handleSubmitReviewDeletionRequest={handleSubmitReviewDeletionRequest} /> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/mobile-header.tsx" "use client" import { Menu, Shield } from "lucide-react" import { Button } from "@/components/ui/button" interface MobileHeaderProps { onMenuToggle: () => void title?: string } export function MobileHeader({ onMenuToggle, title = "לוח בקרה מנהל" }: MobileHeaderProps) { return ( <div className="md:hidden bg-white border-b px-4 py-3 flex items-center justify-between"> <div className="flex items-center gap-2"> <Shield className="h-6 w-6 text-blue-600" /> <span className="text-lg font-bold">{title}</span> </div> <Button variant="ghost" size="icon" onClick={onMenuToggle} className="h-10 w-10" aria-label="פתח תפריט"> <Menu className="h-6 w-6" /> </Button> </div> ) } [V0_FILE]typescriptreact:file="components/admin-dashboard/admin-sidebar-mobile.tsx" "use client" import { Shield, BarChart3, MessageSquare, UserCheck, AlertTriangle, User, LogOut } from "lucide-react" interface AdminSidebarMobileProps { isMenuOpen: boolean setIsMenuOpen: (open: boolean) => void activeTab: string setActiveTab: (tab: string) => void } export function AdminSidebarMobile({ isMenuOpen, setIsMenuOpen, activeTab, setActiveTab }: AdminSidebarMobileProps) { return ( <> {/ Mobile menu overlay /} <div className={`fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden ${isMenuOpen ? "block" : "hidden"}`} onClick={() => setIsMenuOpen(false)} ></div> {/ Mobile sidebar /} <div className={`fixed inset-y-0 right-0 w-64 bg-white z-50 transform transition-transform duration-300 ease-in-out md:hidden ${isMenuOpen ? "translate-x-0" : "translate-x-full"}`} > <div className="p-4 border-b"> <div className="flex items-center justify-between"> <div className="flex items-center"> <Shield className="h-6 w-6 text-blue-600" /> <span className="text-xl font-bold mr-2">לוח בקרה מנהל</span> </div> <button onClick={() => setIsMenuOpen(false)} className="p-2"> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> <nav className="flex-1 p-4 space-y-1"> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "overview" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveTab("overview") setIsMenuOpen(false) }} > <BarChart3 className="h-5 w-5 ml-2" /> <span>סקירה כללית</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "reviews" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveTab("reviews") setIsMenuOpen(false) }} > <MessageSquare className="h-5 w-5 ml-2" /> <span>ניהול ביקורות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "verification" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveTab("verification") setIsMenuOpen(false) }} > <UserCheck className="h-5 w-5 ml-2" /> <span>מרכז אימות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "disputes" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveTab("disputes") setIsMenuOpen(false) }} > <AlertTriangle className="h-5 w-5 ml-2" /> <span>טיפול במחלוקות</span> </button> <button className={`flex items-center p-2 rounded-md w-full text-right ${activeTab === "profile" ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`} onClick={() => { setActiveTab("profile") setIsMenuOpen(false) }} > <User className="h-5 w-5 ml-2" /> <span>פרופיל והגדרות</span> </button> </nav> <div className="p-4 border-t"> <div className="flex items-center gap-2 mb-2"> <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold"> מ </div> <div> <p className="font-medium">מנהל מערכת</p> <p className="text-sm text-muted-foreground">admin@gmail.com</p> </div> </div> <button className="flex items-center w-full p-2 rounded-md hover:bg-gray-100 text-gray-700"> <LogOut className="h-5 w-5 ml-2" /> <span>התנתקות</span> </button> </div> </div> </> ) } [V0_FILE]typescriptreact:file="app/admin-dashboard/page.tsx" "use client" import { useState, useEffect } from "react" import { AdminSidebar } from "@/components/admin-dashboard/admin-sidebar" import { AdminSidebarMobile } from "@/components/admin-dashboard/admin-sidebar-mobile" import { MobileHeader } from "@/components/admin-dashboard/mobile-header" import { OverviewContent } from "@/components/admin-dashboard/overview-content" import { ReviewsContent } from "@/components/admin-dashboard/reviews-content" import { VerificationContent } from "@/components/admin-dashboard/verification-content" import { DisputesContent } from "@/components/admin-dashboard/disputes-content" import { ProfileContent } from "@/components/admin-dashboard/profile-content" export default function AdminDashboard() { const [activeTab, setActiveTab] = useState("overview") const [isMenuOpen, setIsMenuOpen] = useState(false) // Listen for profile navigation event from header useEffect(() => { const handleNavigateToAdminProfile = () => { setActiveTab("profile") } window.addEventListener("navigate-to-admin-profile", handleNavigateToAdminProfile) return () => { window.removeEventListener("navigate-to-admin-profile", handleNavigateToAdminProfile) } }, []) const renderContent = () => { switch (activeTab) { case "overview": return <OverviewContent /> case "reviews": return <ReviewsContent /> case "verification": return <VerificationContent /> case "disputes": return <DisputesContent /> case "profile": return <ProfileContent /> default: return <OverviewContent /> } } return ( <div className="flex h-screen bg-gray-100 flex-col md:flex-row" dir="rtl"> {/ Desktop Sidebar /} <AdminSidebar activeTab={activeTab} setActiveTab={setActiveTab} /> {/ Main Content /} <div className="flex-1 flex flex-col"> {/ Mobile Header /} <MobileHeader onMenuToggle={() => setIsMenuOpen(true)} /> {/ Mobile Sidebar /} <AdminSidebarMobile isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} activeTab={activeTab} setActiveTab={setActiveTab} /> {/ Content /} <main className="flex-1 overflow-y-auto p-4 md:p-6">{renderContent()}</main> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-registration-form/types.ts" // Refactored from: components/agent-registration-form.tsx // Type definitions for agent registration form export interface AgentFormData { // Step 1 fullName: string email: string phone: string idNumber: string agencyName: string serviceAreas: string[] // Changed from city: string to serviceAreas: string[] // Step 2 licenseType: string licenseNumber: string licenseDate: string licenseDocument: File | null // Step 3 experience: string clientsNumber: string services: string[] // Changed from object with booleans to array of strings languages: string[] // Changed from object with booleans to array of strings // Step 4 password: string confirmPassword: string declarations: { declaration1: boolean declaration2: boolean declaration3: boolean declaration4: boolean declaration5: boolean declaration6: boolean } } export interface ValidationErrors { step1: boolean step2: boolean step3: boolean step4: boolean } [V0_FILE]typescriptreact:file="components/agent-registration-form/professional-info-step.tsx" "use client" // Refactored from: components/agent-registration-form.tsx // Professional info step component import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ChevronDown } from "lucide-react" import { useState } from "react" import type { AgentFormData, ValidationErrors } from "./types" interface ProfessionalInfoStepProps { formData: AgentFormData errors: ValidationErrors showErrors: boolean onSelectChange: (id: string, value: string) => void onCheckboxChange: (group: string, id: string, checked: boolean) => void onServicesChange: (services: string[]) => void onLanguagesChange: (languages: string[]) => void onNext: () => void onPrev: () => void } const SERVICES = ["פנסיה", "קרן השתלמות", "קופת גמל"] const LANGUAGES = ["עברית", "אנגלית", "ערבית", "רוסית", "צרפתית", "אמהרית"] export function ProfessionalInfoStep({ formData, errors, showErrors, onSelectChange, onCheckboxChange, onServicesChange, onLanguagesChange, onNext, onPrev, }: ProfessionalInfoStepProps) { const [isServicesOpen, setIsServicesOpen] = useState(false) const [isLanguagesOpen, setIsLanguagesOpen] = useState(false) const handleServiceToggle = (service: string) => { const currentServices = formData.services || [] let newServices: string[] if (service === "all") { // Toggle all services if (currentServices.includes("all") || currentServices.length === SERVICES.length) { newServices = [] } else { newServices = ["all", ...SERVICES] } } else { // Toggle individual service if (currentServices.includes(service)) { newServices = currentServices.filter((s) => s !== service && s !== "all") } else { newServices = [...currentServices.filter((s) => s !== "all"), service] // If all individual services are selected, add "all" if (newServices.length === SERVICES.length) { newServices = ["all", ...newServices] } } } onServicesChange(newServices) } const handleLanguageToggle = (language: string) => { const currentLanguages = formData.languages || [] let newLanguages: string[] if (language === "all") { // Toggle all languages if (currentLanguages.includes("all") || currentLanguages.length === LANGUAGES.length) { newLanguages = [] } else { newLanguages = ["all", ...LANGUAGES] } } else { // Toggle individual language if (currentLanguages.includes(language)) { newLanguages = currentLanguages.filter((l) => l !== language && l !== "all") } else { newLanguages = [...currentLanguages.filter((l) => l !== "all"), language] // If all individual languages are selected, add "all" if (newLanguages.length === LANGUAGES.length) { newLanguages = ["all", ...newLanguages] } } } onLanguagesChange(newLanguages) } const getServicesDisplayText = () => { const services = formData.services || [] if (services.length === 0) return "בחר שירותים" if (services.includes("all")) return "כל השירותים" if (services.length === 1) return services[0] return `${services.length} שירותים נבחרו` } const getLanguagesDisplayText = () => { const languages = formData.languages || [] if (languages.length === 0) return "בחר שפות" if (languages.includes("all")) return "כל השפות" if (languages.length === 1) return languages[0] return `${languages.length} שפות נבחרו` } return ( <div className="space-y-4"> <h3 className="text-lg font-semibold">מידע מקצועי</h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="space-y-2"> <Label htmlFor="experience">ותק בתחום</Label> <Select value={formData.experience} onValueChange={(value) => onSelectChange("experience", value)}> <SelectTrigger className={showErrors && !formData.experience ? "border-red-500" : ""}> <SelectValue placeholder="בחר ותק" /> </SelectTrigger> <SelectContent> <SelectItem value="0-2">0-2 שנים</SelectItem> <SelectItem value="3-5">3-5 שנים</SelectItem> <SelectItem value="6-10">6-10 שנים</SelectItem> <SelectItem value="10+">מעל 10 שנים</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="clientsNumber">מספר לקוחות</Label> <Select value={formData.clientsNumber} onValueChange={(value) => onSelectChange("clientsNumber", value)}> <SelectTrigger className={showErrors && !formData.clientsNumber ? "border-red-500" : ""}> <SelectValue placeholder="בחר מספר לקוחות" /> </SelectTrigger> <SelectContent> <SelectItem value="0-50">0-50</SelectItem> <SelectItem value="51-100">51-100</SelectItem> <SelectItem value="101-200">101-200</SelectItem> <SelectItem value="200+">מעל 200</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="services">שירותים מוצעים</Label> <div className="relative"> <button type="button" onClick={() => setIsServicesOpen(!isServicesOpen)} className={`w-full flex items-center justify-between px-3 py-2 text-sm border rounded-md bg-background text-right ${ showErrors && (!formData.services || formData.services.length === 0) ? "border-red-500" : "border-input" } hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2`} > <ChevronDown className={`h-4 w-4 transition-transform ${isServicesOpen ? "rotate-180" : ""}`} /> <span className={formData.services?.length ? "text-foreground" : "text-muted-foreground"}> {getServicesDisplayText()} </span> </button> {isServicesOpen && ( <div className="absolute top-full left-0 right-0 z-50 mt-1 bg-background border rounded-md shadow-lg max-h-60 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={formData.services?.includes("all") || false} onChange={() => handleServiceToggle("all")} /> <span className="font-medium">כל השירותים</span> </label> {SERVICES.map((service) => ( <label key={service} className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs" > <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={formData.services?.includes(service) || false} onChange={() => handleServiceToggle(service)} /> <span>{service}</span> </label> ))} </div> </div> )} </div> </div> <div className="space-y-2"> <Label htmlFor="languages">שפות</Label> <div className="relative"> <button type="button" onClick={() => setIsLanguagesOpen(!isLanguagesOpen)} className={`w-full flex items-center justify-between px-3 py-2 text-sm border rounded-md bg-background text-right border-input hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2`} > <ChevronDown className={`h-4 w-4 transition-transform ${isLanguagesOpen ? "rotate-180" : ""}`} /> <span className={formData.languages?.length ? "text-foreground" : "text-muted-foreground"}> {getLanguagesDisplayText()} </span> </button> {isLanguagesOpen && ( <div className="absolute top-full left-0 right-0 z-50 mt-1 bg-background border rounded-md shadow-lg max-h-60 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={formData.languages?.includes("all") || false} onChange={() => handleLanguageToggle("all")} /> <span className="font-medium">כל השפות</span> </label> {LANGUAGES.map((language) => ( <label key={language} className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs" > <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={formData.languages?.includes(language) || false} onChange={() => handleLanguageToggle(language)} /> <span>{language}</span> </label> ))} </div> </div> )} </div> </div> </div> <div className="flex justify-between mt-6"> <Button type="button" variant="outline" onClick={onPrev}> חזור </Button> <Button type="button" onClick={onNext}> המשך </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/agent-registration-form.tsx" "use client" import type React from "react" import { useState } from "react" import { BasicInfoStep } from "./agent-registration-form/basic-info-step" import { LicenseCredentialsStep } from "./agent-registration-form/license-credentials-step" import { ProfessionalInfoStep } from "./agent-registration-form/professional-info-step" import { DeclarationsStep } from "./agent-registration-form/declarations-step" import { useAgentRegistrationForm } from "./agent-registration-form/use-agent-registration-form" import { StepIndicator } from "./agent-registration-form/step-indicator" import { ErrorMessage } from "./agent-registration-form/error-message" import { SuccessMessage } from "./agent-registration-form/success-message" interface AgentRegistrationFormProps { onSuccess: () => void } export function AgentRegistrationForm({ onSuccess }: AgentRegistrationFormProps) { const [currentStep, setCurrentStep] = useState(1) const [isSubmitted, setIsSubmitted] = useState(false) const { formData, errors, showErrors, setShowErrors, handleInputChange, handleSelectChange, handleServiceAreaChange, // Added new handler handleServicesChange, // Added new handler for services handleLanguagesChange, // Added new handler for languages handleFileChange, handleCheckboxChange, validateStep1, validateStep2, validateStep3, validateStep4, } = useAgentRegistrationForm() const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (currentStep === 4 && !validateStep4()) { setShowErrors(true) return } setIsSubmitted(true) setTimeout(() => { onSuccess() }, 3000) } const nextStep = () => { let isValid = false if (currentStep === 1) { isValid = validateStep1() } else if (currentStep === 2) { isValid = validateStep2() } else if (currentStep === 3) { isValid = validateStep3() } if (!isValid) { setShowErrors(true) return } setShowErrors(false) setCurrentStep(currentStep + 1) window.scrollTo(0, 0) } const prevStep = () => { setShowErrors(false) setCurrentStep(currentStep - 1) window.scrollTo(0, 0) } if (isSubmitted) { return <SuccessMessage /> } return ( <form onSubmit={handleSubmit} className="space-y-6 py-4 text-right"> <StepIndicator currentStep={currentStep} /> <ErrorMessage showErrors={showErrors} /> {currentStep === 1 && ( <BasicInfoStep formData={formData} errors={errors} showErrors={showErrors} onInputChange={handleInputChange} onServiceAreaChange={handleServiceAreaChange} // Added new prop onNext={nextStep} /> )} {currentStep === 2 && ( <LicenseCredentialsStep formData={formData} errors={errors} showErrors={showErrors} onInputChange={handleInputChange} onSelectChange={handleSelectChange} onFileChange={handleFileChange} onNext={nextStep} onPrev={prevStep} /> )} {currentStep === 3 && ( <ProfessionalInfoStep formData={formData} errors={errors} showErrors={showErrors} onSelectChange={handleSelectChange} onCheckboxChange={handleCheckboxChange} onServicesChange={handleServicesChange} // Added new prop for services onLanguagesChange={handleLanguagesChange} // Added new prop for languages onNext={nextStep} onPrev={prevStep} /> )} {currentStep === 4 && ( <DeclarationsStep formData={formData} errors={errors} showErrors={showErrors} onInputChange={handleInputChange} onCheckboxChange={handleCheckboxChange} onSubmit={handleSubmit} onPrev={prevStep} /> )} </form> ) } [V0_FILE]typescriptreact:file="components/agent-registration-form/use-agent-registration-form.ts" isQuickEdit="true" "use client" import type React from "react" // Refactored from: components/agent-registration-form.tsx // Custom hook for managing agent registration form state and validation import { useState, useEffect } from "react" import type { AgentFormData, ValidationErrors } from "./types" import { validateIsraeliId } from "@/lib/type-guards" export function useAgentRegistrationForm() { const [formData, setFormData] = useState<AgentFormData>({ // Step 1 fullName: "", email: "", phone: "", idNumber: "", agencyName: "", serviceAreas: [], // Changed from city: "" to serviceAreas: [] // Step 2 licenseType: "", licenseNumber: "", licenseDate: "", licenseDocument: null, // Step 3 experience: "", clientsNumber: "", services: [], // Changed from object to array languages: ["עברית"], // Changed from object to array with default Hebrew // Step 4 password: "", confirmPassword: "", declarations: { declaration1: false, declaration2: false, declaration3: false, declaration4: false, declaration5: false, declaration6: false, }, }) const [errors, setErrors] = useState<ValidationErrors>({ step1: true, step2: true, step3: true, step4: true, }) const [showErrors, setShowErrors] = useState(false) // Handle both event objects and direct field/value calls const handleInputChange = (fieldOrEvent: string | React.ChangeEvent<HTMLInputElement>, value?: string) => { let field: string let val: string if (typeof fieldOrEvent === "string") { // Direct field/value call field = fieldOrEvent val = value || "" } else { // Event object call field = fieldOrEvent.target.id val = fieldOrEvent.target.value } setFormData({ ...formData, [field]: val, }) } const handleSelectChange = (id: string, value: string) => { setFormData({ ...formData, [id]: value, }) } const handleServiceAreaChange = (areas: string[]) => { setFormData({ ...formData, serviceAreas: areas, }) } const handleServicesChange = (services: string[]) => { setFormData({ ...formData, services: services, }) } const handleLanguagesChange = (languages: string[]) => { setFormData({ ...formData, languages: languages, }) } const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { if (e.target.files && e.target.files[0]) { setFormData({ ...formData, [e.target.id]: e.target.files[0], }) } } const handleCheckboxChange = (group: string, id: string, checked: boolean) => { setFormData({ ...formData, [group]: { ...(formData[group as keyof typeof formData] as Record<string, boolean>), [id]: checked, }, }) } const validateStep1 = () => { const { fullName, email, phone, idNumber, serviceAreas } = formData const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ const isValid = fullName.trim() !== "" && email.trim() !== "" && emailRegex.test(email) && phone.trim() !== "" && idNumber.trim() !== "" && validateIsraeliId(idNumber.trim()) && // Added Israeli ID validation serviceAreas.length > 0 // Changed from city.trim() !== "" to serviceAreas.length > 0 setErrors((prev) => ({ ...prev, step1: !isValid })) return isValid } const validateStep2 = () => { const { licenseType, licenseNumber, licenseDate, licenseDocument } = formData const isValid = licenseType !== "" && licenseNumber.trim() !== "" && licenseDate !== "" && licenseDocument !== null setErrors((prev) => ({ ...prev, step2: !isValid })) return isValid } const validateStep3 = () => { const { experience, clientsNumber, services } = formData const hasService = services.length > 0 // Changed from checking object values to array length const isValid = experience !== "" && clientsNumber !== "" && hasService setErrors((prev) => ({ ...prev, step3: !isValid })) return isValid } const validateStep4 = () => { const { password, confirmPassword, declarations } = formData // Password validation const passwordRegex = /^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@$!%?&])[A-Za-z\d@$!%?&]{8,}$/ const passwordValid = passwordRegex.test(password) const passwordsMatch = password === confirmPassword && password.length > 0 const declarationsValid = declarations.declaration1 && declarations.declaration2 && declarations.declaration3 && declarations.declaration4 && declarations.declaration5 const isValid = passwordValid && passwordsMatch && declarationsValid setErrors((prev) => ({ ...prev, step4: !isValid })) return isValid } // Run validation when form data changes useEffect(() => { validateStep1() validateStep2() validateStep3() validateStep4() }, [formData]) return { formData, errors, showErrors, setShowErrors, handleInputChange, handleSelectChange, handleServiceAreaChange, // Added new handler handleServicesChange, // Added new handler for services handleLanguagesChange, // Added new handler for languages handleFileChange, handleCheckboxChange, validateStep1, validateStep2, validateStep3, validateStep4, } } [V0_FILE]typescriptreact:file="components/agent-registration-form/basic-info-step.tsx" isQuickEdit="true" "use client" // Refactored from: components/agent-registration-form.tsx // Basic info step component import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { ChevronDown } from "lucide-react" import { useState } from "react" import type { AgentFormData, ValidationErrors } from "./types" import { validateIsraeliId } from "@/lib/type-guards" interface BasicInfoStepProps { formData: AgentFormData errors: ValidationErrors showErrors: boolean onInputChange: (field: string, value: string) => void onServiceAreaChange: (areas: string[]) => void onNext: () => void } const SERVICE_AREAS = [ "מרכז", "צפון", "דרום", "ירושלים", "שרון", "חיפה", "אילת", "השפלה", "גוש דן", "השומרון", "הגליל", "הנגב", ] export function BasicInfoStep({ formData, errors, showErrors, onInputChange, onServiceAreaChange, onNext, }: BasicInfoStepProps) { const [isServiceAreaOpen, setIsServiceAreaOpen] = useState(false) const handleServiceAreaToggle = (area: string) => { const currentAreas = formData.serviceAreas || [] let newAreas: string[] if (area === "all") { // Toggle all areas if (currentAreas.includes("all") || currentAreas.length === SERVICE_AREAS.length) { newAreas = [] } else { newAreas = ["all", ...SERVICE_AREAS] } } else { // Toggle individual area if (currentAreas.includes(area)) { newAreas = currentAreas.filter((a) => a !== area && a !== "all") } else { newAreas = [...currentAreas.filter((a) => a !== "all"), area] // If all individual areas are selected, add "all" if (newAreas.length === SERVICE_AREAS.length) { newAreas = ["all", ...newAreas] } } } onServiceAreaChange(newAreas) } const getDisplayText = () => { const areas = formData.serviceAreas || [] if (areas.length === 0) return "בחר אזורי שירות" if (areas.includes("all")) return "כל האזורים" if (areas.length === 1) return areas[0] return `${areas.length} אזורים נבחרו` } return ( <div className="space-y-4"> <h3 className="text-lg font-semibold">מידע בסיסי</h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="space-y-2"> <Label htmlFor="fullName">שם מלא</Label> <Input id="fullName" required dir="rtl" value={formData.fullName} onChange={(e) => onInputChange("fullName", e.target.value)} className={showErrors && !formData.fullName ? "border-red-500" : ""} /> </div> <div className="space-y-2"> <Label htmlFor="email">כתובת אימייל</Label> <Input id="email" type="email" required dir="rtl" value={formData.email} onChange={(e) => onInputChange("email", e.target.value)} className={showErrors && !formData.email ? "border-red-500" : ""} /> </div> <div className="space-y-2"> <Label htmlFor="phone">מספר טלפון</Label> <Input id="phone" required dir="rtl" value={formData.phone} onChange={(e) => onInputChange("phone", e.target.value)} className={showErrors && !formData.phone ? "border-red-500" : ""} /> </div> <div className="space-y-2"> <Label htmlFor="idNumber">תעודת זהות</Label> <Input id="idNumber" required dir="rtl" value={formData.idNumber} onChange={(e) => onInputChange("idNumber", e.target.value)} className={ showErrors && (!formData.idNumber || !validateIsraeliId(formData.idNumber.trim())) ? "border-red-500" : "" } /> {showErrors && formData.idNumber && !validateIsraeliId(formData.idNumber.trim()) && ( <p className="text-sm text-red-500">מספר תעודת זהות לא תקין</p> )} </div> <div className="space-y-2"> <Label htmlFor="agencyName">שם משרד/סוכנות (אופציונלי)</Label> <Input id="agencyName" dir="rtl" value={formData.agencyName} onChange={(e) => onInputChange("agencyName", e.target.value)} /> </div> <div className="space-y-2"> <Label htmlFor="serviceAreas">אזור שירות</Label> <div className="relative"> <button type="button" onClick={() => setIsServiceAreaOpen(!isServiceAreaOpen)} className={`w-full flex items-center justify-between px-3 py-2 text-sm border rounded-md bg-background text-right ${ showErrors && (!formData.serviceAreas || formData.serviceAreas.length === 0) ? "border-red-500" : "border-input" } hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2`} > <ChevronDown className={`h-4 w-4 transition-transform ${isServiceAreaOpen ? "rotate-180" : ""}`} /> <span className={formData.serviceAreas?.length ? "text-foreground" : "text-muted-foreground"}> {getDisplayText()} </span> </button> {isServiceAreaOpen && ( <div className="absolute top-full left-0 right-0 z-50 mt-1 bg-background border rounded-md shadow-lg max-h-60 overflow-y-auto"> <div className="p-1"> <label className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs"> <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={formData.serviceAreas?.includes("all") || false} onChange={() => handleServiceAreaToggle("all")} /> <span className="font-medium">כל האזורים</span> </label> {SERVICE_AREAS.map((area) => ( <label key={area} className="flex items-center p-1.5 hover:bg-gray-50 rounded cursor-pointer text-xs" > <input type="checkbox" className="ml-2 h-3 w-3 text-blue-600" checked={formData.serviceAreas?.includes(area) || false} onChange={() => handleServiceAreaToggle(area)} /> <span>{area}</span> </label> ))} </div> </div> )} </div> </div> </div> <div className="flex justify-end mt-6"> <Button type="button" onClick={onNext}> המשך </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="components/ui/confirmation-dialog.tsx" "use client" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface ConfirmationDialogProps { open: boolean onOpenChange: (open: boolean) => void title: string description: string confirmText?: string cancelText?: string onConfirm: () => void variant?: "default" | "destructive" } export function ConfirmationDialog({ open, onOpenChange, title, description, confirmText = "אישור", cancelText = "ביטול", onConfirm, variant = "default", }: ConfirmationDialogProps) { const handleConfirm = () => { onConfirm() onOpenChange(false) } const handleCancel = () => { onOpenChange(false) } return ( <Dialog open={open} onOpenChange={onOpenChange}> <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle className="text-right">{title}</DialogTitle> <DialogDescription className="text-right whitespace-pre-line">{description}</DialogDescription> </DialogHeader> <DialogFooter className="flex flex-row justify-end gap-2"> <Button variant="outline" onClick={handleCancel}> {cancelText} </Button> <Button variant={variant === "destructive" ? "destructive" : "default"} onClick={handleConfirm}> {confirmText} </Button> </DialogFooter> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/dashboard/profile-content.tsx" "use client" // Extracted from app/dashboard/page.tsx - Profile content component import { Button } from "@/components/ui/button" import { useState } from "react" import { ProfileHeader } from "./profile-content/profile-header" import { PersonalInfoSection } from "./profile-content/personal-info-section" import { EmploymentInfoSection } from "./profile-content/employment-info-section" import { ProductDetailsSection } from "./profile-content/product-details-section" import { ConfirmationDialog } from "@/components/ui/confirmation-dialog" import type { ProfileContentProps, ProductData } from "./profile-content/types" export function ProfileContent({ userName, userEmail, phoneNumber, setPhoneNumber, pensionDetails, }: ProfileContentProps) { const [activeProductTab, setActiveProductTab] = useState("pension") const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false) const [pensionData, setPensionData] = useState<ProductData>({ company: "", investmentTrack: "", managementFeeAccumulated: "", managementFeeDeposit: "", }) const [providentData, setProvidentData] = useState<ProductData>({ company: "", investmentTrack: "", managementFeeAccumulated: "", managementFeeDeposit: "", }) const [studyData, setStudyData] = useState<ProductData>({ company: "", investmentTrack: "", managementFeeAccumulated: "", managementFeeDeposit: "", }) const handleDeleteAccount = () => { setShowDeleteConfirmation(true) } const confirmDeleteAccount = () => { // Handle account deletion logic here console.log("Account deletion confirmed") } return ( <div className="space-y-6"> <ProfileHeader userName={userName} userEmail={userEmail} /> <PersonalInfoSection userName={userName} userEmail={userEmail} phoneNumber={phoneNumber} setPhoneNumber={setPhoneNumber} /> <EmploymentInfoSection /> <ProductDetailsSection activeProductTab={activeProductTab} setActiveProductTab={setActiveProductTab} pensionData={pensionData} setPensionData={setPensionData} providentData={providentData} setProvidentData={setProvidentData} studyData={studyData} setStudyData={setStudyData} /> {/ Save Button and Delete Account Button /} <div className="flex justify-between items-center"> <Button variant="outline" className="text-red-600 border-red-300 hover:bg-red-50 bg-transparent" onClick={handleDeleteAccount} > מחק חשבון </Button> <Button className="px-8">שמור שינויים</Button> </div> <ConfirmationDialog open={showDeleteConfirmation} onOpenChange={setShowDeleteConfirmation} title="מחיקת חשבון" description="מחיקת החשבון היא פעולה בלתי הפיכה. מחיקת החשבון תגרום למחיקה מוחלטת של כל הנתונים, ההצעות והפרטים שלך. פעולה זו אינה ניתנת לביטול. האם אתה בטוח שברצונך למחוק את החשבון?" confirmText="מחק חשבון" cancelText="ביטול" onConfirm={confirmDeleteAccount} variant="destructive" /> </div> ) } [V0_FILE]typescriptreact:file="components/agent-dashboard/profile-content.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { ConfirmationDialog } from "@/components/ui/confirmation-dialog" import { useState } from "react" import { REGIONS } from "@/constants/filter-options" interface ProfileContentProps { agentUser: any handleRequestChange: (field: string) => void } export default function ProfileContent({ agentUser, handleRequestChange }: ProfileContentProps) { const [showDeleteConfirm, setShowDeleteConfirm] = useState(false) const handleDeleteAccount = () => { setShowDeleteConfirm(true) } const confirmDeleteAccount = () => { // Handle account deletion logic here console.log("Account deletion confirmed") // You can add actual deletion logic here } return ( <div className="space-y-6"> {/ Profile information /} <Card> <CardHeader> <CardTitle>פרטים אישיים ומקצועיים</CardTitle> <CardDescription>עדכן את המידע האישי והמקצועי שלך</CardDescription> </CardHeader> <CardContent> {/ Personal Details Section /} <div className="space-y-4 mb-8"> <h3 className="text-lg font-semibold mb-4">פרטים אישיים</h3> <div className="space-y-2"> <Label htmlFor="name">שם מלא</Label> <Input id="name" value={agentUser.name} disabled className="bg-gray-50" /> </div> <div className="space-y-2"> <Label htmlFor="email">דוא"ל</Label> <Input id="email" type="email" defaultValue={agentUser.email} /> </div> <div className="space-y-2"> <Label htmlFor="phone">טלפון</Label> <Input id="phone" type="tel" defaultValue="054-1234567" /> </div> <div className="space-y-2"> <Label htmlFor="city">אזור שירות</Label> <Select defaultValue="תל אביב"> <SelectTrigger id="city"> <SelectValue placeholder="בחר אזור שירות" /> </SelectTrigger> <SelectContent> {REGIONS.map((region) => ( <SelectItem key={region} value={region}> {region} </SelectItem> ))} </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="agencyName">שם משרד/סוכנות</Label> <Input id="agencyName" defaultValue="משרד הביטוח של דוד" /> </div> </div> {/ Professional Details Section /} <div className="space-y-4 mb-8"> <h3 className="text-lg font-semibold mb-4">פרטים מקצועיים</h3> <div className="space-y-2"> <Label htmlFor="experience">שנות ניסיון</Label> <Select defaultValue={agentUser.agentDetails?.experience || "6-10"}> <SelectTrigger id="experience"> <SelectValue placeholder="בחר שנות ניסיון" /> </SelectTrigger> <SelectContent> <SelectItem value="0-2">0-2 שנים</SelectItem> <SelectItem value="3-5">3-5 שנים</SelectItem> <SelectItem value="6-10">6-10 שנים</SelectItem> <SelectItem value="11-15">11-15 שנים</SelectItem> <SelectItem value="16+">16+ שנים</SelectItem> </SelectContent> </Select> </div> <div className="space-y-2"> <Label htmlFor="clientsCount">מספר לקוחות פעילים</Label> <Select defaultValue={agentUser.agentDetails?.clientsCount || "101-200"}> <SelectTrigger id="clientsCount"> <SelectValue placeholder="בחר טווח לקוחות" /> </SelectTrigger> <SelectContent> <SelectItem value="0-50">0-50 לקוחות</SelectItem> <SelectItem value="51-100">51-100 לקוחות</SelectItem> <SelectItem value="101-200">101-200 לקוחות</SelectItem> <SelectItem value="201-500">201-500 לקוחות</SelectItem> <SelectItem value="500+">מעל 500 לקוחות</SelectItem> </SelectContent> </Select> </div> </div> {/ Additional Professional Details /} <div className="space-y-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="space-y-2"> <Label>שירותים מוצעים</Label> <div className="grid grid-cols-2 gap-2"> {["פנסיה", "קרן השתלמות", "קופת גמל"].map((service) => ( <div key={service} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`service-${service}`} defaultChecked={agentUser.agentDetails?.services?.includes(service)} /> <Label htmlFor={`service-${service}`} className="mr-2 cursor-pointer"> {service} </Label> </div> ))} </div> </div> <div className="space-y-2"> <Label>שפות</Label> <div className="grid grid-cols-2 gap-2"> {["עברית", "אנגלית", "ערבית", "רוסית", "צרפתית", "אמהרית"].map((language) => ( <div key={language} className="flex items-center space-x-2 space-x-reverse"> <Checkbox id={`language-${language}`} defaultChecked={agentUser.agentDetails?.languages?.includes(language)} /> <Label htmlFor={`language-${language}`} className="mr-2 cursor-pointer"> {language} </Label> </div> ))} </div> </div> </div> <div className="flex justify-between items-center"> <Button variant="outline" className="text-red-600 border-red-300 hover:bg-red-50 bg-transparent" onClick={handleDeleteAccount} > מחק חשבון </Button> <Button>שמור שינויים</Button> </div> </div> </CardContent> </Card> {/ Delete Account Confirmation Dialog /} <ConfirmationDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm} title="מחיקת חשבון" description="מחיקת החשבון היא פעולה בלתי הפיכה. מחיקת החשבון תגרום למחיקה מוחלטת של כל הנתונים, ההצעות והלידים שלך. פעולה זו אינה ניתנת לביטול.\n\nהאם אתה בטוח שברצונך למחוק את החשבון?" confirmText="מחק חשבון" cancelText="ביטול" onConfirm={confirmDeleteAccount} variant="destructive" /> </div> ) } [V0_FILE]typescriptreact:file="lib/dashboard-utils.ts" isQuickEdit="true" // Extracted utility functions from dashboard page.tsx import { demoUser } from "@/lib/auth" export const getCurrentUserRates = (type = "pension") => { const details = { title: "פנסיה", company: "מגדל", managementFeeAccumulated: demoUser.pensionDetails.managementFeeAccumulated, managementFeeDeposit: demoUser.pensionDetails.managementFeeDeposit, balance: "250,000 - 500,000 ₪", investmentTrack: "מסלול כללי", sector: "הייטק", } // Adjust based on active offer type switch (type) { case "pension": details.title = "פנסיה" details.company = "מגדל" details.managementFeeAccumulated = demoUser.pensionDetails.managementFeeAccumulated details.managementFeeDeposit = demoUser.pensionDetails.managementFeeDeposit details.investmentTrack = "מסלול כללי" details.sector = "הייטק" break case "provident": details.title = "קופת גמל" details.company = "אלטשולר שחם" details.managementFeeAccumulated = 0.6 details.managementFeeDeposit = 2.0 details.balance = "50,000 - 100,000 ₪" details.investmentTrack = "מסלול אג״ח" details.sector = "חינוך" break case "pension-fund": details.title = "קרן השתלמות" details.company = "מיטב דש" details.managementFeeAccumulated = 0.7 details.managementFeeDeposit = 2.5 details.balance = "100,000 - 250,000 ₪" details.investmentTrack = "מסלול מניות" details.sector = "פיננסים" break } return details } export const calculateSavings = ( currentFee: number, depositFee: number, improvedFee: number, improvedDepositFee: number, monthlyDeposit: number, years: number, ) => { const monthlyReturn = 0.005 const months = years 12 const currentTotal = (monthlyDeposit * (Math.pow(1 + monthlyReturn, months) - 1)) / monthlyReturn - (monthlyDeposit * months * currentFee) / 100 - (monthlyDeposit * months * depositFee) / 100 const improvedTotal = (monthlyDeposit * (Math.pow(1 + monthlyReturn, months) - 1)) / monthlyReturn - (monthlyDeposit * months * improvedFee) / 100 - (monthlyDeposit * months * improvedDepositFee) / 100 return { current: Math.max(0, currentTotal), improved: Math.max(0, improvedTotal), savings: Math.max(0, improvedTotal - currentTotal), } } export const formatCurrency = (amount: number) => { return new Intl.NumberFormat("he-IL", { style: "currency", currency: "ILS", minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(amount) } export const enhanceOffersWithAgentInfo = (offers: any[], offerType = "pension") => { const currentRates = getCurrentUserRates(offerType) const monthlyDeposit = 3000 // Default monthly deposit - can be made dynamic based on user data const years = 20 // Default calculation period - can be made dynamic based on user data return offers.map((offer, index) => { // Calculate savings for this offer const savingsData = calculateSavings( currentRates.managementFeeAccumulated, currentRates.managementFeeDeposit, offer.managementFeeAccumulated, offer.managementFeeDeposit, monthlyDeposit, years, ) return { ...offer, estimatedSavings: savingsData.savings, // Add the calculated savings agent: { name: index === 0 ? "יוסי כהן" : index === 1 ? "מיכל לוי" : "דוד אברהם", rating: index === 0 ? 4 : index === 1 ? 5 : 3, specialization: index === 0 ? "פנסיה וביטוח" : index === 1 ? "תכנון פרישה" : "השקעות", agency: index === 0 ? "סוכנות א.ב פנסיה" : index === 1 ? "מנורה סוכנויות" : "הראל סוכנויות", phone: index === 0 ? "050-1234567" : index === 1 ? "050-7654321" : "050-9876543", email: index === 0 ? "yossi@ab-pension.co.il" : index === 1 ? "michal@menora.co.il" : "david@harel.co.il", reviews: [ { text: "שירות מעולה ומקצועי, ממליץ בחום", author: "אבי לוי", rating: 5, }, { text: "עזר לי להבין את האפשרויות ולבחור את המסלול הטוב ביותר", author: "רונית כהן", rating: 4, }, ], }, } }) } [V0_FILE]typescript:file="components/dashboard/offers-list/types.ts" export interface StarRatingProps { rating: number className?: string } export interface OfferCardProps { offer: any index: number activeOfferType: string selectedOffers: any confirmedOffers: any onSelectOffer: (offer: any) => void onCalculateOffer?: (offer: any, offerType: string) => void } export interface ActionButtonsProps { onResetFilters: () => void confirmedOffers: any activeOfferType: string } export interface OffersListProps { activeOfferType: string getCurrentOffers: () => any[] selectedOffers: any confirmedOffers: any onSelectOffer: (offer: any) => void showSelectionMessage: boolean onResetFilters: () => void selectedOffer: any selectedAgent: any setSelectedAgent: (agent: any) => void contactOption: string onContactOptionChange: (option: string) => void contactMethod: string onContactMethodChange: (method: string) => void showPhoneInput: boolean phoneNumber: string setPhoneNumber: (phone: string) => void onSubmitContactRequest: () => void successMessage: string agentInfoRef: any offerSelectionRef: any onCalculateOffer?: (offer: any, offerType: string) => void } export interface OfferSelectionModalProps { selectedOffer: any contactOption: string onContactOptionChange: (option: string) => void contactMethod: string onContactMethodChange: (method: string) => void showPhoneInput: boolean phoneNumber: string setPhoneNumber: (phone: string) => void onSubmitContactRequest: () => void successMessage: string offerSelectionRef: any } export interface AgentReviewModalProps { agent: any isOpen: boolean onClose: () => void } export interface OfferTileProps { offer: any index: number activeOfferType: string selectedOffers: any confirmedOffers: any onSelectOffer: (offer: any) => void onCalculateOffer?: (offer: any, offerType: string) => void onShowAgentReviews: (agent: any) => void } export interface OfferTileExpandedProps { offer: any index: number activeOfferType: string selectedOffers: any confirmedOffers: any onSelectOffer: (offer: any) => void } export interface OfferTableProps { offers: any[] activeOfferType: string selectedOffers: any confirmedOffers: any onSelectOffer: (offer: any) => void onShowAgentReviews: (agent: any) => void sortField: string sortDirection: "asc" | "desc" onSort: (field: string) => void } export interface LoadMoreButtonProps { onLoadMore: () => void hasMore: boolean loading?: boolean } export interface OfferFilterSortMenuProps { isOpen: boolean onClose: () => void onFilter: (filters: any) => void onSort: (field: string, direction: "asc" | "desc") => void currentFilters: any } export interface ViewToggleProps { currentView: "tiles" | "table" onViewChange: (view: "tiles" | "table") => void } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/agent-reviews-modal.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Star } from "lucide-react" import { useState } from "react" interface AgentReviewsModalProps { agent: any isOpen: boolean onClose: () => void } export function AgentReviewsModal({ agent, isOpen, onClose }: AgentReviewsModalProps) { const [selectedRating, setSelectedRating] = useState<number | null>(null) const [visibleReviews, setVisibleReviews] = useState(10) if (!agent) return null const renderStars = (rating: number) => { return ( <div className="flex items-center gap-1"> {[1, 2, 3, 4, 5].map((star) => ( <Star key={star} className={`h-4 w-4 ${star <= rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`} /> ))} </div> ) } // Mock reviews data - in real app this would come from props or API const mockReviews = [ { rating: 5, text: "שירות מעולה ומקצועי, ממליץ בחום", date: "לפני חודש" }, { rating: 4, text: "עזר לי להבין את האפשרויות ולבחור את המסלול הטוב ביותר", date: "לפני שבועיים" }, { rating: 5, text: "סוכן אמין ומקצועי, תמיד זמין לעזרה", date: "לפני 3 חודשים" }, { rating: 3, text: "שירות סביר, אבל יכול להיות יותר מהיר בתגובות", date: "לפני חודש" }, { rating: 5, text: "הצליח לחסוך לי הרבה כסף, מאוד מרוצה", date: "לפני שבוע" }, { rating: 4, text: "מקצועי וסבלני, הסביר הכל בפירוט", date: "לפני חודשיים" }, { rating: 5, text: "המלצה חמה על הסוכן הזה", date: "לפני 3 שבועות" }, { rating: 4, text: "עבודה טובה, יעיל ומהיר", date: "לפני חודש וחצי" }, { rating: 5, text: "הסוכן הטוב ביותר שעבדתי איתו", date: "לפני חודשיים" }, { rating: 3, text: "בסדר, אבל יש מקום לשיפור", date: "לפני 3 חודשים" }, { rating: 4, text: "שירות טוב ומקצועי", date: "לפני חודש" }, { rating: 5, text: "מומלץ בחום! עזר לי מאוד", date: "לפני שבועיים" }, { rating: 4, text: "סוכן טוב עם ידע רחב", date: "לפני חודש" }, { rating: 5, text: "שירות יוצא מן הכלל", date: "לפני 3 שבועות" }, { rating: 3, text: "סביר, אבל לא יוצא דופן", date: "לפני חודשיים" }, ] const filteredReviews = selectedRating ? mockReviews.filter((review) => review.rating === selectedRating) : mockReviews const displayedReviews = filteredReviews.slice(0, visibleReviews) const hasMoreReviews = visibleReviews < filteredReviews.length const handleLoadMore = () => { setVisibleReviews((prev) => prev + 10) } return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className="max-w-md max-h-[80vh] overflow-hidden flex flex-col"> <DialogHeader> <DialogTitle className="text-right">חוות דעת לקוחות</DialogTitle> </DialogHeader> <div className="flex-1 overflow-y-auto"> <div className="space-y-4"> {/* Rating Filter /} <div className="flex flex-wrap gap-2 pb-3 border-b"> <Button variant={selectedRating === null ? "default" : "outline"} size="sm" onClick={() => setSelectedRating(null)} > הכל </Button> {[5, 4, 3, 2, 1].map((rating) => ( <Button key={rating} variant={selectedRating === rating ? "default" : "outline"} size="sm" onClick={() => setSelectedRating(rating)} className="flex items-center gap-1" > <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" /> {rating} </Button> ))} </div> {/ Reviews List /} <div className="space-y-3"> {displayedReviews.length > 0 ? ( displayedReviews.map((review, index) => ( <div key={index} className="border rounded-lg p-3 bg-gray-50"> <div className="flex items-center justify-between mb-2"> {renderStars(review.rating)} <span className="text-xs text-gray-500">{review.date}</span> </div> <p className="text-sm text-gray-700 italic">"{review.text}"</p> </div> )) ) : ( <div className="text-center py-8 text-gray-500"> <p>אין חוות דעת עבור דירוג זה</p> </div> )} </div> {/ Load More Button /} {hasMoreReviews && ( <div className="flex justify-center pt-3"> <Button variant="outline" onClick={handleLoadMore}> טען עוד חוות דעת </Button> </div> )} {mockReviews.length === 0 && ( <div className="text-center py-8 text-gray-500"> <p>אין עדיין חוות דעת</p> </div> )} </div> </div> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/offer-selection-modal.tsx" "use client" import { X, Check, Briefcase, Building, Phone, Mail, Users, AlertTriangle } from "lucide-react" import { Button } from "@/components/ui/button" import { StarRating } from "./star-rating" import type { OfferSelectionModalProps } from "./types" export function OfferSelectionModal({ selectedOffer, contactOption, onContactOptionChange, contactMethod, onContactMethodChange, showPhoneInput, phoneNumber, setPhoneNumber, onSubmitContactRequest, successMessage, offerSelectionRef, }: OfferSelectionModalProps) { if (!selectedOffer) return null return ( <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> <div ref={offerSelectionRef} className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] overflow-hidden flex flex-col" > <div className="p-3 bg-blue-50 border-b flex justify-between items-center flex-shrink-0"> <h3 className="text-lg font-bold">בחירת הצעה - {selectedOffer.company}</h3> <button onClick={() => { // setSelectedOffer(null) - This would be handled by parent }} className="p-1 rounded-full hover:bg-blue-100" > <X className="h-5 w-5" /> </button> </div> <div className="p-4 overflow-y-auto flex-1"> {/ Warning Message /} <div className="flex items-start gap-3 p-3 bg-yellow-50 border border-yellow-200 rounded-lg mb-4"> <AlertTriangle className="h-5 w-5 text-yellow-600 mt-0.5 flex-shrink-0" /> <p className="text-sm text-yellow-800"> <strong>שים לב:</strong> ניתן לבחור הצעה אחת בלבד למוצר זה כל 72 שעות. </p> </div> {successMessage ? ( <div className="text-center"> {contactOption === "direct" ? ( <div> <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> <Check className="h-6 w-6 text-green-600" /> </div> <h4 className="text-lg font-medium mb-3">פרטי הסוכן</h4> <div className="flex items-center gap-3 mb-3 justify-center"> <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-lg font-bold"> {selectedOffer.agent.name.charAt(0)} </div> <div> <div className="font-medium">{selectedOffer.agent.name}</div> <div className="flex mt-1"> <StarRating rating={selectedOffer.agent.rating} /> </div> </div> </div> <div className="mt-3 p-3 bg-gray-50 rounded-lg text-right"> <div className="space-y-2"> <div className="flex items-start gap-2"> <Briefcase className="h-4 w-4 text-blue-600 mt-0.5" /> <div> <div className="font-medium text-sm">התמחות</div> <div className="text-gray-600 text-sm">{selectedOffer.agent.specialization}</div> </div> </div> <div className="flex items-start gap-2"> <Building className="h-4 w-4 text-blue-600 mt-0.5" /> <div> <div className="font-medium text-sm">סוכנות</div> <div className="text-gray-600 text-sm">{selectedOffer.agent.agency}</div> </div> </div> <div className="flex items-center gap-2"> <Phone className="h-4 w-4 text-blue-600" /> <div> <div className="font-medium text-sm">טלפון</div> <div className="text-gray-600 text-sm">{selectedOffer.agent.phone}</div> </div> </div> <div className="flex items-center gap-2"> <Mail className="h-4 w-4 text-blue-600" /> <div> <div className="font-medium text-sm">דוא"ל</div> <div className="text-gray-600 text-sm">{selectedOffer.agent.email}</div> </div> </div> </div> </div> <div className="border-t pt-3 mt-3"> <div className="flex items-center gap-2 mb-2"> <Users className="h-4 w-4 text-blue-600" /> <h4 className="font-medium text-sm">ביקורות לקוחות</h4> </div> <div className="space-y-2"> {selectedOffer.agent.reviews.map((review, index) => ( <div key={index} className="bg-gray-50 p-2 rounded-lg"> <div className="flex justify-between items-center mb-1"> <div className="font-medium text-sm">{review.author}</div> <StarRating rating={review.rating} /> </div> <p className="text-xs text-gray-600">{review.text}</p> </div> ))} </div> </div> </div> ) : ( <> <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> <Check className="h-6 w-6 text-green-600" /> </div> <p className="text-gray-600 text-sm">{successMessage}</p> <div className="mt-4"> <h4 className="text-lg font-medium mb-3">פרטי הסוכן</h4> <div className="flex items-center gap-3 mb-3 justify-center"> <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-lg font-bold"> {selectedOffer.agent.name.charAt(0)} </div> <div> <div className="font-medium">{selectedOffer.agent.name}</div> <div className="flex mt-1"> <StarRating rating={selectedOffer.agent.rating} /> </div> </div> </div> <div className="mt-3 p-3 bg-gray-50 rounded-lg text-right"> <div className="space-y-2"> <div className="flex items-start gap-2"> <Briefcase className="h-4 w-4 text-blue-600 mt-0.5" /> <div> <div className="font-medium text-sm">התמחות</div> <div className="text-gray-600 text-sm">{selectedOffer.agent.specialization}</div> </div> </div> <div className="flex items-start gap-2"> <Building className="h-4 w-4 text-blue-600 mt-0.5" /> <div> <div className="font-medium text-sm">סוכנות</div> <div className="text-gray-600 text-sm">{selectedOffer.agent.agency}</div> </div> </div> </div> </div> </div> </> )} </div> ) : ( <div> <h4 className="text-lg font-medium mb-2">כיצד תרצה להמשיך?</h4> <p className="text-gray-600 mb-4">בחר את האפשרות המועדפת עליך</p> <div className="space-y-3"> <div className={`p-4 border rounded-lg cursor-pointer ${contactOption === "direct" ? "border-blue-500 bg-blue-50" : "hover:bg-gray-50"}`} onClick={() => onContactOptionChange("direct")} > <div className="flex items-center gap-3"> <div className={`w-5 h-5 rounded-full border ${contactOption === "direct" ? "border-blue-600 bg-blue-600" : "border-gray-300"} flex items-center justify-center`} > {contactOption === "direct" && <div className="w-2 h-2 rounded-full bg-white"></div>} </div> <div className="font-medium">צור קשר ישירות עם הסוכן</div> </div> <p className="text-sm text-gray-600 mr-8 mt-1"> קבל את פרטי הקשר של הסוכן כדי שתוכל ליצור קשר באופן עצמאי </p> </div> <div className={`p-4 border rounded-lg cursor-pointer ${contactOption === "agent-contacts" ? "border-blue-500 bg-blue-50" : "hover:bg-gray-50"}`} onClick={() => onContactOptionChange("agent-contacts")} > <div className="flex items-center gap-3"> <div className={`w-5 h-5 rounded-full border ${contactOption === "agent-contacts" ? "border-blue-600 bg-blue-600" : "border-gray-300"} flex items-center justify-center`} > {contactOption === "agent-contacts" && <div className="w-2 h-2 rounded-full bg-white"></div>} </div> <div className="font-medium">הסוכן יצור איתך קשר</div> </div> <p className="text-sm text-gray-600 mr-8 mt-1">הסוכן יקבל את פרטיך ויצור איתך קשר בהקדם</p> {contactOption === "agent-contacts" && <></>} </div> </div> <div className="flex justify-end gap-3 mt-6"> <Button variant="outline" onClick={() => { // setSelectedOffer(null) - This would be handled by parent }} > ביטול </Button> <Button onClick={onSubmitContactRequest} disabled={!contactOption}> אישור </Button> </div> </div> )} </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/offer-tile-expanded.tsx" "use client" import { Button } from "@/components/ui/button" import { UserIcon,Target, BriefcaseBusinessIcon, Wallet } from "lucide-react" interface OfferTileExpandedProps { offer: any index: number activeOfferType: string selectedOffers: any confirmedOffers: any onSelectOffer: (offer: any) => void } export function OfferTileExpanded({ offer, index, activeOfferType, selectedOffers, confirmedOffers, onSelectOffer, }: OfferTileExpandedProps) { const isSelected = selectedOffers[activeOfferType]?.id === offer.id const isConfirmed = confirmedOffers[activeOfferType]?.id === offer.id const handleSelectClick = () => { onSelectOffer(offer) } return ( <div className="border-t bg-gray-50 p-3 rounded-b-lg shadow-inner"> {/ Target Audience Section /} <div className="mb-4"> <h4 className="font-medium text-gray-900 mb-3 text-right">קהל יעד להצעה</h4> <div className="space-y-2"> <div className="flex items-center justify-between py-1.5"> <div className="flex items-center gap-2"> <UserIcon className="h-4 w-4 text-blue-500" /> <span className="text-sm font-medium text-gray-600">גיל:</span> </div> <span className="font-semibold text-gray-900">{offer.targetAge || "25-65"}</span> </div> <div className="flex items-center justify-between py-1.5"> <div className="flex items-center gap-2"> <BriefcaseBusinessIcon className="h-4 w-4 text-blue-500" /> <span className="text-sm font-medium text-gray-600">סקטור:</span> </div> <span className="font-semibold text-gray-900">{offer.sector || "מגוון"}</span> </div> <div className="flex items-center justify-between py-1.5"> <div className="flex items-center gap-2"> <Wallet className="h-4 w-4 text-blue-500" /> <span className="text-sm font-medium text-gray-600">סכום צבירה מינימלי:</span> </div> <span className="font-semibold text-gray-900">{offer.minimumAccumulation || "₪10,000"}</span> </div> </div> </div> {/ Action Button /} <div className="pt-3 border-t"> <div className="flex justify-center"> <Button onClick={handleSelectClick} disabled={confirmedOffers[activeOfferType] && !isConfirmed} className={` px-6 py-2 font-semibold rounded-lg transition-all duration-200 ${ isConfirmed ? "bg-green-600 hover:bg-green-700 text-white" : isSelected ? "bg-blue-600 hover:bg-blue-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white" } disabled:opacity-50 disabled:cursor-not-allowed `} > {isConfirmed ? "הצעה נבחרה" : "בחר הצעה"} </Button> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/offer-tile.tsx" "use client" import type React from "react" import { useState } from "react" import { Star, ChevronDown, ChevronUp } from "lucide-react" import { formatCurrency } from "@/lib/dashboard-utils" import { OfferTileExpanded } from "./offer-tile-expanded" interface OfferTileProps { offer: any index: number activeOfferType: string selectedOffers: any confirmedOffers: any onSelectOffer: (offer: any) => void onCalculateOffer?: (offer: any, offerType: string) => void onShowAgentReviews: (agent: any) => void } export function OfferTile({ offer, index, activeOfferType, selectedOffers, confirmedOffers, onSelectOffer, onCalculateOffer, onShowAgentReviews, }: OfferTileProps) { const [isExpanded, setIsExpanded] = useState(false) const handleCalculateClick = (e: React.MouseEvent) => { e.stopPropagation() if (onCalculateOffer) { onCalculateOffer(offer, activeOfferType) } } const handleAgentRatingClick = (e: React.MouseEvent) => { e.stopPropagation() onShowAgentReviews(offer.agent) } const handleTileClick = () => { setIsExpanded(!isExpanded) } const renderStars = (rating: number) => { return ( <div className="flex items-center gap-1"> {[1, 2, 3, 4, 5].map((star) => ( <Star key={star} className={`h-3.5 w-3.5 ${star <= rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`} /> ))} </div> ) } const isSelected = selectedOffers[activeOfferType]?.id === offer.id const isConfirmed = confirmedOffers[activeOfferType]?.id === offer.id return ( <div className="w-full"> {/ Main Tile /} <div className={` border rounded-lg p-2.5 cursor-pointer transition-all duration-200 hover:shadow-md bg-white ${ isConfirmed ? "ring-2 ring-green-500 bg-green-50 border-green-200" : isSelected ? "ring-2 ring-blue-500 bg-blue-50 border-blue-200" : "border-gray-200 hover:border-gray-300" } ${isExpanded ? "shadow-md border-gray-300" : ""} `} onClick={handleTileClick} > {/ Company Name and Expand Icon /} <div className="flex items-center justify-between mb-1.5"> <h3 className="font-semibold text-gray-900 text-base">{offer.company}</h3> <div className="text-gray-400"> {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />} </div> </div> {/ Management Fees - Side by Side /} <div className="grid grid-cols-2 gap-2 mb-1.5"> <div> <div className="text-xs text-gray-600 mb-0.5">דמי ניהול מצבירה:</div> <div className="text-sm font-medium text-green-600">{offer.managementFeeAccumulated}%</div> </div> <div> <div className="text-xs text-gray-600 mb-0.5">דמי ניהול מהפקדה:</div> <div className="text-sm font-medium text-green-600">{offer.managementFeeDeposit}%</div> </div> </div> {/ Investment Track /} <div className="mb-1.5"> <div className="text-xs text-gray-600 mb-0.5">מסלול השקעה:</div> <div className="text-sm font-medium text-gray-900"> {offer.investmentTrack || (index === 0 ? "מסלול כללי" : index === 1 ? "מסלול מניות" : "מסלול הלכה")} </div> </div> {/ Agent Rating and Estimated Savings /} <div className="flex items-center justify-between"> <div> <div className="text-xs text-gray-600 mb-0.5">דירוג סוכן:</div> <button onClick={handleAgentRatingClick} className="hover:bg-gray-100 p-1 rounded transition-colors -ml-1"> {renderStars(offer.agent.rating)} </button> </div> <div className="text-right"> <div className="text-xs text-gray-600 mb-0.5">חיסכון מוערך:</div> <button onClick={handleCalculateClick} className="text-sm font-semibold text-blue-600 hover:text-blue-800 transition-colors" > {offer.estimatedSavings ? formatCurrency(offer.estimatedSavings) : "חשב חיסכון"} </button> </div> </div> </div> {/ Expanded Content /} {isExpanded && ( <OfferTileExpanded offer={offer} index={index} activeOfferType={activeOfferType} selectedOffers={selectedOffers} confirmedOffers={confirmedOffers} onSelectOffer={onSelectOffer} /> )} </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/offer-table.tsx" "use client" import { Button } from "@/components/ui/button" import { Star, ChevronUp, ChevronDown } from "lucide-react" import type { OfferTableProps } from "./types" export function OfferTable({ offers, activeOfferType, selectedOffers, confirmedOffers, onSelectOffer, onShowAgentReviews, sortField, sortDirection, onSort, }: OfferTableProps) { const renderStars = (rating: number, agent: any) => { return ( <button onClick={() => onShowAgentReviews(agent)} className="flex items-center gap-1 hover:bg-gray-100 p-1 rounded transition-colors" > {[1, 2, 3, 4, 5].map((star) => ( <Star key={star} className={`h-3.5 w-3.5 ${star <= rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`} /> ))} </button> ) } const handleSort = (field: string) => { const newDirection = sortField === field && sortDirection === "asc" ? "desc" : "asc" onSort(field) } const getSortIcon = (field: string) => { if (sortField !== field) return null return sortDirection === "asc" ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" /> } const isSelected = (offer: any) => selectedOffers[activeOfferType]?.id === offer.id const isConfirmed = (offer: any) => confirmedOffers[activeOfferType]?.id === offer.id return ( <div className="overflow-x-auto"> <table className="w-full border-collapse bg-white rounded-lg shadow-sm"> <thead> <tr className="border-b bg-gray-50"> <th className="text-right p-3 font-medium text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort("company")} > <div className="flex items-center justify-between"> שם החברה {getSortIcon("company")} </div> </th> <th className="text-right p-3 font-medium text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort("investmentTrack")} > <div className="flex items-center justify-between"> מסלול השקעה {getSortIcon("investmentTrack")} </div> </th> <th className="text-right p-3 font-medium text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort("managementFeeAccumulated")} > <div className="flex items-center justify-between"> דמי ניהול מצבירה {getSortIcon("managementFeeAccumulated")} </div> </th> <th className="text-right p-3 font-medium text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort("managementFeeDeposit")} > <div className="flex items-center justify-between"> דמי ניהול מהפקדה {getSortIcon("managementFeeDeposit")} </div> </th> <th className="text-right p-3 font-medium text-gray-700">דירוג סוכן</th> <th className="text-right p-3 font-medium text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort("agentLanguage")} > <div className="flex items-center justify-between"> שפת סוכן {getSortIcon("agentLanguage")} </div> </th> <th className="text-center p-3 font-medium text-gray-700">פעולה</th> </tr> </thead> <tbody> {offers.map((offer, index) => ( <tr key={offer.id || `offer-${index}`} className={` border-b hover:bg-gray-50 transition-colors ${ isConfirmed(offer) ? "bg-green-50 border-green-200" : isSelected(offer) ? "bg-blue-50 border-blue-200" : "" } `} > <td className="p-3 font-medium text-gray-900">{offer.company}</td> <td className="p-3 text-gray-700"> {offer.investmentTrack || (index === 0 ? "מסלול כללי" : index === 1 ? "מסלול מניות" : "מסלול הלכה")} </td> <td className="p-3 font-medium text-green-600">{offer.managementFeeAccumulated}%</td> <td className="p-3 font-medium text-green-600">{offer.managementFeeDeposit}%</td> <td className="p-3">{renderStars(offer.agent.rating, offer.agent)}</td> <td className="p-3 text-gray-700">{offer.agent.language || "עברית"}</td> <td className="p-3 text-center"> <Button onClick={() => onSelectOffer(offer)} disabled={confirmedOffers[activeOfferType] && !isConfirmed(offer)} variant={isConfirmed(offer) ? "default" : isSelected(offer) ? "secondary" : "outline"} size="sm" className={ isConfirmed(offer) ? "bg-green-600 hover:bg-green-700 text-white" : isSelected(offer) ? "bg-blue-600 hover:bg-blue-700 text-white" : "" } > {isConfirmed(offer) ? "נבחר" : "בחר הצעה"} </Button> </td> </tr> ))} </tbody> </table> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/view-toggle.tsx" "use client" import { Button } from "@/components/ui/button" import { LayoutGridIcon, Table2Icon } from "lucide-react" import type { ViewToggleProps } from "./types" export function ViewToggle({ currentView, onViewChange }: ViewToggleProps) { return ( <div className="flex items-center gap-2 mb-4"> <Button variant={currentView === "tiles" ? "default" : "outline"} size="sm" onClick={() => onViewChange("tiles")} className="flex items-center gap-2" > <LayoutGridIcon className="h-4 w-4" /> {""} </Button> <Button variant={currentView === "table" ? "default" : "outline"} size="sm" onClick={() => onViewChange("table")} className="flex items-center gap-2" > <Table2Icon className="h-4 w-4" /> {""} </Button> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/load-more-button.tsx" "use client" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { ChevronDown, Loader2 } from "lucide-react" interface LoadMoreButtonProps { onLoadMore: () => void hasMore: boolean loading?: boolean } export function LoadMoreButton({ onLoadMore, hasMore, loading = false }: LoadMoreButtonProps) { const handleClick = () => { console.log("Load More button clicked", { hasMore, loading }) if (!loading && hasMore) { onLoadMore() } } console.log("Load More button rendered", { hasMore, loading }) return ( <div className="flex justify-center mt-6 mb-4"> <TooltipProvider> <Tooltip> <TooltipTrigger asChild> <Button variant="outline" size="sm" onClick={handleClick} disabled={loading || !hasMore} className="flex items-center gap-2 bg-transparent" > {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <ChevronDown className="h-4 w-4" />} </Button> </TooltipTrigger> <TooltipContent> <p>{hasMore ? "טען עוד הצעות" : "אין עוד הצעות לטעינה"}</p> </TooltipContent> </Tooltip> </TooltipProvider> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list/offer-filter-sort-menu.tsx" "use client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Filter } from "lucide-react" interface OfferFilterSortMenuProps { onFilter: (filters: any) => void onSort: (field: string, direction: "asc" | "desc") => void currentFilters: any } export function OfferFilterSortMenu({ onFilter, onSort, currentFilters }: OfferFilterSortMenuProps) { const investmentTracks = ["מסלול כללי", "מסלול מניות", "מסלול הלכה", "מסלול אג״ח", "מסלול מעורב"] const agentLanguages = ["עברית", "אנגלית", "צרפתית", "רוסית", "ערבית"] const preferredCompanies = ["מנורה מבטחים", "הפניקס", "כלל ביטוח", "מגדל", "הראל"] const handleResetAll = () => { console.log("Reset all filters and sorting") onFilter({}) onSort("", "asc") } const handleButtonClick = () => { console.log("Dropdown toggled") } console.log("Dropdown rendered") return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline" size="sm" className="flex items-center gap-2 bg-transparent" onClick={handleButtonClick} > <Filter className="h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end" className="w-56"> <DropdownMenuItem onClick={() => onSort("managementFeeAccumulated", "asc")}>דמי ניהול</DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuSub> <DropdownMenuSubTrigger> <span>חברה מנהלת מועדפת</span> </DropdownMenuSubTrigger> <DropdownMenuSubContent side="left" align="start" className="w-48"> {preferredCompanies.map((company) => ( <DropdownMenuItem key={company} onClick={() => onFilter({ preferredCompany: company })}> {company} </DropdownMenuItem> ))} </DropdownMenuSubContent> </DropdownMenuSub> <DropdownMenuSub> <DropdownMenuSubTrigger> <span>מסלול השקעה מועדף</span> </DropdownMenuSubTrigger> <DropdownMenuSubContent side="left" align="start" className="w-48"> {investmentTracks.map((track) => ( <DropdownMenuItem key={track} onClick={() => onFilter({ investmentTrack: track })}> {track} </DropdownMenuItem> ))} </DropdownMenuSubContent> </DropdownMenuSub> <DropdownMenuSub> <DropdownMenuSubTrigger> <span>שפת סוכן</span> </DropdownMenuSubTrigger> <DropdownMenuSubContent side="left" align="start" className="w-48"> {agentLanguages.map((language) => ( <DropdownMenuItem key={language} onClick={() => onFilter({ agentLanguage: language })}> {language} </DropdownMenuItem> ))} </DropdownMenuSubContent> </DropdownMenuSub> <DropdownMenuSeparator /> <DropdownMenuItem onClick={handleResetAll} className="text-red-500"> איפוס סינון ומיון </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-list.tsx" "use client" import { X } from "lucide-react" import { useState, useMemo } from "react" import { OfferTile } from "./offers-list/offer-tile" import { OfferTable } from "./offers-list/offer-table" import { AgentReviewsModal } from "./offers-list/agent-reviews-modal" import { AgentInfoModal } from "./offers-list/agent-info-modal" import { OfferSelectionModal } from "./offers-list/offer-selection-modal" import { LoadMoreButton } from "./offers-list/load-more-button" import { ViewToggle } from "./offers-list/view-toggle" import { OfferFilterSortMenu } from "./offers-list/offer-filter-sort-menu" import type { OffersListProps } from "./offers-list/types" export function OffersList({ activeOfferType, getCurrentOffers, selectedOffers, confirmedOffers, onSelectOffer, showSelectionMessage, onResetFilters, selectedOffer, selectedAgent, setSelectedAgent, contactOption, onContactOptionChange, contactMethod, onContactMethodChange, showPhoneInput, phoneNumber, setPhoneNumber, onSubmitContactRequest, successMessage, agentInfoRef, offerSelectionRef, onCalculateOffer, }: OffersListProps) { const [currentView, setCurrentView] = useState<"tiles" | "table">("tiles") const [visibleTiles, setVisibleTiles] = useState(3) const [visibleTableRows, setVisibleTableRows] = useState(10) const [selectedAgentForReviews, setSelectedAgentForReviews] = useState<any>(null) const [showAgentReviewsModal, setShowAgentReviewsModal] = useState(false) const [sortField, setSortField] = useState("") const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc") const [filters, setFilters] = useState<any>({}) const allOffers = getCurrentOffers() // Apply filters and sorting const processedOffers = useMemo(() => { let filtered = [...allOffers] // Apply filters if (filters.preferredCompany) { filtered = filtered.filter((offer) => offer.company === filters.preferredCompany) } if (filters.investmentTrack) { filtered = filtered.filter((offer) => (offer.investmentTrack || "מסלול כללי") === filters.investmentTrack) } if (filters.agentLanguage) { filtered = filtered.filter((offer) => (offer.agent.language || "עברית") === filters.agentLanguage) } // Apply sorting if (sortField) { filtered.sort((a, b) => { let aValue, bValue switch (sortField) { case "company": aValue = a.company bValue = b.company break case "managementFeeAccumulated": aValue = a.managementFeeAccumulated bValue = b.managementFeeAccumulated break case "managementFeeDeposit": aValue = a.managementFeeDeposit bValue = b.managementFeeDeposit break case "investmentTrack": aValue = a.investmentTrack || "מסלול כללי" bValue = b.investmentTrack || "מסלול כללי" break case "agentLanguage": aValue = a.agent.language || "עברית" bValue = b.agent.language || "עברית" break default: return 0 } if (typeof aValue === "string") { const comparison = aValue.localeCompare(bValue, "he") return sortDirection === "asc" ? comparison : -comparison } else { return sortDirection === "asc" ? aValue - bValue : bValue - aValue } }) } return filtered }, [allOffers, filters, sortField, sortDirection]) const displayedTiles = processedOffers.slice(0, visibleTiles) const displayedTableRows = processedOffers.slice(0, visibleTableRows) const hasMoreTiles = visibleTiles < processedOffers.length const hasMoreTableRows = visibleTableRows < processedOffers.length const handleLoadMoreTiles = () => { setVisibleTiles((prev) => prev + 3) } const handleLoadMoreTableRows = () => { setVisibleTableRows((prev) => prev + 10) } const handleShowAgentReviews = (agent: any) => { setSelectedAgentForReviews(agent) setShowAgentReviewsModal(true) } const handleCalculateOffer = (offer: any, offerType: string) => { if (onCalculateOffer) { onCalculateOffer(offer, offerType) } } const handleSort = (field: string, direction: "asc" | "desc") => { setSortField(field) setSortDirection(direction) } const handleFilter = (newFilters: any) => { setFilters(newFilters) setVisibleTiles(3) setVisibleTableRows(10) } const handleResetFiltersAndSort = () => { setFilters({}) setSortField("") setSortDirection("asc") setVisibleTiles(3) setVisibleTableRows(10) } return ( <> {/ View Toggle and Filter Button - Switched positions /} <div className="flex items-center justify-between mb-4"> <div className="relative"> <OfferFilterSortMenu onFilter={handleFilter} onSort={handleSort} currentFilters={filters} /> </div> <ViewToggle currentView={currentView} onViewChange={setCurrentView} /> </div> {/ Content based on view /} {currentView === "tiles" ? ( <> {/ Tiles View /} <div className="space-y-2"> {displayedTiles.map((offer, index) => ( <OfferTile key={offer.id || `offer-${index}`} offer={offer} index={index} activeOfferType={activeOfferType} selectedOffers={selectedOffers} confirmedOffers={confirmedOffers} onSelectOffer={onSelectOffer} onCalculateOffer={handleCalculateOffer} onShowAgentReviews={handleShowAgentReviews} /> ))} </div> {/ Load More Button for Tiles - Always rendered /} <LoadMoreButton onLoadMore={handleLoadMoreTiles} hasMore={hasMoreTiles} /> </> ) : ( <> {/ Table View /} <OfferTable offers={displayedTableRows} activeOfferType={activeOfferType} selectedOffers={selectedOffers} confirmedOffers={confirmedOffers} onSelectOffer={onSelectOffer} onShowAgentReviews={handleShowAgentReviews} sortField={sortField} sortDirection={sortDirection} onSort={(field) => { if (sortField === field) { setSortDirection((prev) => (prev === "asc" ? "desc" : "asc")) } else { setSortField(field) setSortDirection("asc") } }} /> {/ Load More Button for Table - Always rendered /} <LoadMoreButton onLoadMore={handleLoadMoreTableRows} hasMore={hasMoreTableRows} /> </> )} {/ Selection limit message /} {showSelectionMessage && ( <div className="fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded shadow-lg z-50"> <div className="flex items-center"> <X className="h-4 w-4 mr-2" /> <span>ניתן לבחור הצעה אחת בלבד לכל סוג מוצר.</span> </div> </div> )} {/ Agent Reviews Modal /} <AgentReviewsModal agent={selectedAgentForReviews} isOpen={showAgentReviewsModal} onClose={() => setShowAgentReviewsModal(false)} /> {/ Existing modals /} <AgentInfoModal selectedAgent={selectedAgent} setSelectedAgent={setSelectedAgent} agentInfoRef={agentInfoRef} /> <OfferSelectionModal selectedOffer={selectedOffer} contactOption={contactOption} onContactOptionChange={onContactOptionChange} contactMethod={contactMethod} onContactMethodChange={onContactMethodChange} showPhoneInput={showPhoneInput} phoneNumber={phoneNumber} setPhoneNumber={setPhoneNumber} onSubmitContactRequest={onSubmitContactRequest} successMessage={successMessage} offerSelectionRef={offerSelectionRef} /> </> ) } [V0_FILE]typescriptreact:file="components/dashboard/offers-content.tsx" "use client" // Extracted from app/dashboard/page.tsx - Offers content component import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { DisclaimerMessage } from "@/components/ui/disclaimer-message" import { OffersList } from "./offers-list" import { X } from "lucide-react" import { useState } from "react" interface OffersContentProps { activeOfferType: string setActiveOfferType: (type: string) => void showFilters: boolean setShowFilters: (show: boolean) => void onResetFilters: () => void getCurrentOffers: () => any[] getCurrentUserRates: (type?: string) => any filters: any onFilterChange: (category: string, value: any) => void onApplyFilters: () => void openDropdown: string | null onToggleDropdown: (dropdown: string) => void selectedOptions: any onCheckboxChange: (category: string, value: string) => void selectedOffers: any confirmedOffers: any onSelectOffer: (offer: any) => void selectedOffer: any selectedAgent: any setSelectedAgent: (agent: any) => void contactOption: string onContactOptionChange: (option: string) => void contactMethod: string onContactMethodChange: (method: string) => void showPhoneInput: boolean phoneNumber: string setPhoneNumber: (phone: string) => void onSubmitContactRequest: () => void successMessage: string showSelectionMessage: boolean agentInfoRef: any offerSelectionRef: any randomizationTooltipVisible: boolean setRandomizationTooltipVisible: (visible: boolean) => void setActiveContent?: (content: string) => void onCalculateOffer?: (offer: any, offerType: string) => void } export function OffersContent({ activeOfferType, setActiveOfferType, showFilters, setShowFilters, onResetFilters, getCurrentOffers, getCurrentUserRates, filters, onFilterChange, onApplyFilters, openDropdown, onToggleDropdown, selectedOptions, onCheckboxChange, selectedOffers, confirmedOffers, onSelectOffer, selectedOffer, selectedAgent, setSelectedAgent, contactOption, onContactOptionChange, contactMethod, onContactMethodChange, showPhoneInput, phoneNumber, setPhoneNumber, onSubmitContactRequest, successMessage, showSelectionMessage, agentInfoRef, offerSelectionRef, randomizationTooltipVisible, setRandomizationTooltipVisible, setActiveContent, onCalculateOffer, }: OffersContentProps) { const [showWarning, setShowWarning] = useState(true) const handleCalculateOffer = (offer: any, offerType: string) => { if (onCalculateOffer) { onCalculateOffer(offer, offerType) } if (setActiveContent) { setActiveContent("calculator") } } return ( <div className="space-y-4"> {/ Centered tab buttons /} <div className="flex justify-center border-b mb-4"> <button className={`px-4 py-2 font-medium ${ activeOfferType === "pension" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("pension")} > פנסיה </button> <button className={`px-4 py-2 font-medium ${ activeOfferType === "provident" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("provident")} > קרנות השתלמות </button> <button className={`px-4 py-2 font-medium ${ activeOfferType === "pension-fund" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700" }`} onClick={() => setActiveOfferType("pension-fund")} > קופות גמל </button> </div> {/ Streamlined current rates section with reduced visual weight /} <div className="mb-4 max-w-2xl mx-auto"> <Card className="border border-gray-100 shadow-sm bg-gray-50"> <CardHeader className="pb-1 pt-2"> <CardTitle className="text-sm text-gray-600"> התנאים הנוכחיים שלך - {getCurrentUserRates(activeOfferType).title} </CardTitle> </CardHeader> <CardContent className="py-2"> <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs"> <div> <div className="text-gray-500 mb-1">חברה נוכחית</div> <div className="font-medium">{getCurrentUserRates(activeOfferType).company}</div> </div> <div> <div className="text-gray-500 mb-1">דמי ניהול מהצבירה</div> <div className="font-medium text-red-600"> {getCurrentUserRates(activeOfferType).managementFeeAccumulated}% </div> </div> <div> <div className="text-gray-500 mb-1">דמי ניהול מההפקדה</div> <div className="font-medium text-red-600"> {getCurrentUserRates(activeOfferType).managementFeeDeposit}% </div> </div> <div> <div className="text-gray-500 mb-1">מסלול השקעה</div> <div className="font-medium">{getCurrentUserRates(activeOfferType).investmentTrack}</div> </div> </div> </CardContent> </Card> </div> {/ Dismissible Disclaimer Message /} {showWarning && ( <div className="mb-4 transition-all duration-300 ease-in-out"> <div className="relative"> <DisclaimerMessage> <span className="font-medium">ההצעות שמוצגות לך נבחרו באופן רנדומלי</span> מתוך כלל ההצעות הרלוונטיות, בהתאם לפרטים שסיפקת. חלק מההצעות עשויות לכלול תנאים משופרים ביחס למה שקיים בשוק, אך אין לראות בכך ייעוץ או המלצה. ההצעות נבחרו באקראי בהתאם להעדפות שסיפקת, והפלטפורמה משמשת להצגת מידע בלבד. </DisclaimerMessage> <button onClick={() => setShowWarning(false)} className="absolute top-2 left-2 p-1 rounded-full hover:bg-gray-200 transition-colors" title="סגור הודעה" > <X className="h-4 w-4 text-gray-500" /> </button> </div> </div> )} {/ Offers List - show directly without filter form /} <OffersList activeOfferType={activeOfferType} getCurrentOffers={getCurrentOffers} selectedOffers={selectedOffers} confirmedOffers={confirmedOffers} onSelectOffer={onSelectOffer} showSelectionMessage={showSelectionMessage} onResetFilters={onResetFilters} selectedOffer={selectedOffer} selectedAgent={selectedAgent} setSelectedAgent={setSelectedAgent} contactOption={contactOption} onContactOptionChange={onContactOptionChange} contactMethod={contactMethod} onContactMethodChange={onContactMethodChange} showPhoneInput={showPhoneInput} phoneNumber={phoneNumber} setPhoneNumber={setPhoneNumber} onSubmitContactRequest={onSubmitContactRequest} successMessage={successMessage} agentInfoRef={agentInfoRef} offerSelectionRef={offerSelectionRef} onCalculateOffer={handleCalculateOffer} /> </div> ) } [V0_FILE]typescriptreact:file="components/dashboard/calculator-content.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { DisclaimerMessage } from "@/components/ui/disclaimer-message" import { X } from "lucide-react" import type { CalculatorContentProps, ProductData, CalculationInputs } from "./calculator-content/types" import { DEFAULT_PRODUCT_DATA, DEFAULT_CALCULATION_INPUTS } from "./calculator-content/constants" import { calculateScenarios, generateChartData } from "./calculator-content/utils" import { ComparisonChart } from "./calculator-content/comparison-chart" import { ProductTabs } from "./calculator-content/product-tabs" export function CalculatorContent({ formatCurrency }: CalculatorContentProps) { const [activeTab, setActiveTab] = useState<"pension" | "provident" | "study">("pension") const [showWarning, setShowWarning] = useState(true) // Default product data - would come from user registration and selected offers const [productData, setProductData] = useState<Record<string, ProductData>>(DEFAULT_PRODUCT_DATA) const [calculationInputs, setCalculationInputs] = useState<CalculationInputs>(DEFAULT_CALCULATION_INPUTS) // Check for offer data from calculator icon click useEffect(() => { if (typeof window !== "undefined" && (window as any).calculatorOfferData) { const offerData = (window as any).calculatorOfferData // Set the active tab setActiveTab(offerData.tab) // Update the alternative fees for the specific tab setProductData((prev) => ({ ...prev, [offerData.tab]: { ...prev[offerData.tab], alternativeFeeAccumulated: offerData.alternativeFeeAccumulated, alternativeFeeDeposit: offerData.alternativeFeeDeposit, }, })) // Clear the data after using it delete (window as any).calculatorOfferData } }, []) const currentProduct = productData[activeTab] const updateProductData = (field: keyof ProductData, value: number) => { setProductData((prev) => ({ ...prev, [activeTab]: { ...prev[activeTab], [field]: value, }, })) } const scenarios = calculateScenarios(currentProduct, calculationInputs) const chartData = generateChartData(currentProduct, calculationInputs) return ( <div className="space-y-4"> {/ Header /} <div> <h1 className="text-2xl font-bold text-gray-900">מחשבון השוואת תנאים</h1> <p className="text-gray-600 text-sm mt-1">השווה בין התנאים הנוכחיים שלך לבין הצעות חלופיות</p> </div> {/ Dismissible Disclaimer /} {showWarning && ( <div className="transition-all duration-300 ease-in-out"> <div className="relative"> <DisclaimerMessage> <span className="font-medium">כלי המחשבון מיועד להמחשה בלבד.</span> התוצאות מבוססות על הנתונים שסופקו ואינן מהוות ייעוץ או המלצה פיננסית. יש להתייעץ עם יועץ מוסמך לפני קבלת החלטות. </DisclaimerMessage> <button onClick={() => setShowWarning(false)} className="absolute top-2 left-2 p-1 rounded-full hover:bg-gray-200 transition-colors" title="סגור הודעה" > <X className="h-4 w-4 text-gray-500" /> </button> </div> </div> )} {/ Tabs - Matching offers tab style exactly /} <ProductTabs activeTab={activeTab} setActiveTab={setActiveTab} /> {/ Compact Tab Content /} <div className="grid lg:grid-cols-2 gap-4"> {/ Current Terms - Compact /} <Card className="h-fit"> <CardHeader className="pb-3"> <CardTitle className="text-base">תנאים נוכחיים</CardTitle> </CardHeader> <CardContent className="space-y-3"> <div className="grid grid-cols-2 gap-3 text-sm"> <div> <Label className="text-xs text-gray-600">דמי ניהול מצבירה</Label> <div className="mt-1 p-2 bg-gray-50 rounded text-center"> <span className="font-semibold text-gray-900">{currentProduct.currentFeeAccumulated}%</span> </div> </div> <div> <Label className="text-xs text-gray-600">דמי ניהול מהפקדה</Label> <div className="mt-1 p-2 bg-gray-50 rounded text-center"> <span className="font-semibold text-gray-900">{currentProduct.currentFeeDeposit}%</span> </div> </div> </div> </CardContent> </Card> {/ Alternative Terms - Compact /} <Card className="h-fit"> <CardHeader className="pb-3"> <CardTitle className="text-base">תנאים אלטרנטיביים</CardTitle> </CardHeader> <CardContent className="space-y-3"> <div> <div className="flex justify-between mb-1"> <Label className="text-xs text-gray-600">דמי ניהול מצבירה (%)</Label> <span className="text-xs font-medium text-green-600">{currentProduct.alternativeFeeAccumulated}%</span> </div> <Slider min={0.1} max={2} step={0.1} value={[currentProduct.alternativeFeeAccumulated]} onValueChange={(value) => updateProductData("alternativeFeeAccumulated", value[0])} className="w-full" /> </div> <div> <div className="flex justify-between mb-1"> <Label className="text-xs text-gray-600">דמי ניהול מהפקדה (%)</Label> <span className="text-xs font-medium text-green-600">{currentProduct.alternativeFeeDeposit}%</span> </div> <Slider min={0} max={6} step={0.1} value={[currentProduct.alternativeFeeDeposit]} onValueChange={(value) => updateProductData("alternativeFeeDeposit", value[0])} className="w-full" /> </div> </CardContent> </Card> </div> {/ Calculation Assumptions - Compact with Current Amount /} <Card> <CardHeader className="pb-3"> <CardTitle className="text-base">הנחות החישוב</CardTitle> </CardHeader> <CardContent> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> <div> <div className="flex justify-between mb-1"> <Label className="text-xs text-gray-600">צבירה נוכחית (₪)</Label> <span className="text-xs font-medium text-blue-600"> {formatCurrency(currentProduct.currentAmount)} </span> </div> <Slider min={0} max={500000} step={5000} value={[currentProduct.currentAmount]} onValueChange={(value) => updateProductData("currentAmount", value[0])} className="w-full" /> </div> <div> <div className="flex justify-between mb-1"> <Label className="text-xs text-gray-600">הפקדה חודשית (₪)</Label> <span className="text-xs font-medium text-blue-600"> {formatCurrency(currentProduct.monthlyDeposit)} </span> </div> <Slider min={500} max={10000} step={100} value={[currentProduct.monthlyDeposit]} onValueChange={(value) => updateProductData("monthlyDeposit", value[0])} className="w-full" /> </div> <div> <div className="flex justify-between mb-1"> <Label className="text-xs text-gray-600">תקופת חיסכון (שנים)</Label> <span className="text-xs font-medium text-blue-600">{calculationInputs.years}</span> </div> <Slider min={5} max={40} step={1} value={[calculationInputs.years]} onValueChange={(value) => setCalculationInputs((prev) => ({ ...prev, years: value[0] }))} className="w-full" /> </div> <div> <div className="flex justify-between mb-1"> <Label className="text-xs text-gray-600">תשואה שנתית צפויה (%)</Label> <span className="text-xs font-medium text-blue-600">{calculationInputs.expectedReturn}%</span> </div> <Slider min={1} max={8} step={0.1} value={[calculationInputs.expectedReturn]} onValueChange={(value) => setCalculationInputs((prev) => ({ ...prev, expectedReturn: value[0] }))} className="w-full" /> </div> </div> <div className="mt-3 p-2 bg-gray-50 rounded text-xs text-gray-600 space-y-1"> <p>• החישוב כולל את הצבירה הנוכחית ומניח המשך הפקדות קבועות</p> <p>• ההערכה מבוססת על תשואה קבועה ואינה מתחשבת בתנודתיות השוק</p> </div> </CardContent> </Card> {/ Results Section - Moved below assumptions /} <Card> <CardHeader className="pb-3"> <CardTitle className="text-base">תוצאות החישוב</CardTitle> </CardHeader> <CardContent> <div className="p-4 bg-gradient-to-br from-purple-50 to-blue-50 rounded-lg border border-purple-200 text-center"> <div className="text-sm text-purple-600 mb-2">הבדל מצטבר לאחר {calculationInputs.years} שנים</div> <div className="text-2xl font-bold text-purple-700"> {scenarios.difference >= 0 ? "+" : ""} {formatCurrency(scenarios.difference)} </div> </div> </CardContent> </Card> {/ Compact Chart */} <Card> <CardHeader className="pb-3"> <CardTitle className="text-base">השוואה לאורך זמן</CardTitle> </CardHeader> <CardContent> <ComparisonChart chartData={chartData} formatCurrency={formatCurrency} /> <div className="flex justify-center gap-4 mt-3"> <div className="flex items-center gap-2"> <div className="w-2.5 h-2.5 rounded-full bg-blue-500"></div> <span className="text-xs text-gray-600">תנאים נוכחיים</span> </div> <div className="flex items-center gap-2"> <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div> <span className="text-xs text-gray-600">תנאים אלטרנטיביים</span> </div> </div> </CardContent> </Card> </div> ) }</article></body></html>