[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Separator } from "@/components/ui/separator" import { Badge } from "@/components/ui/badge" import { Camera, Eye, EyeOff, User, Phone, MapPin, Users } from "lucide-react" import { useToast } from "@/hooks/use-toast" // Mock user data - replace with actual data fetching const mockUser = { id: "1", name: "John Doe", email: "john.doe@example.com", phone: "+1 (555) 123-4567", city: "New York", group: "Administrators", profilePhoto: "/placeholder.svg?height=120&width=120", } export default function ProfilePage() { const [user, setUser] = useState(mockUser) const [isChangingPassword, setIsChangingPassword] = useState(false) const [showCurrentPassword, setShowCurrentPassword] = useState(false) const [showNewPassword, setShowNewPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [passwordForm, setPasswordForm] = useState({ currentPassword: "", newPassword: "", confirmPassword: "", }) const { toast } = useToast() const handlePhotoUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { // In a real app, you would upload to your server/storage const reader = new FileReader() reader.onload = (e) => { setUser((prev) => ({ ...prev, profilePhoto: e.target?.result as string, })) toast({ title: "Profile photo updated", description: "Your profile photo has been successfully updated.", }) } reader.readAsDataURL(file) } } const handlePasswordChange = (e: React.FormEvent) => { e.preventDefault() if (passwordForm.newPassword !== passwordForm.confirmPassword) { toast({ title: "Password mismatch", description: "New password and confirmation don't match.", variant: "destructive", }) return } if (passwordForm.newPassword.length < 8) { toast({ title: "Password too short", description: "Password must be at least 8 characters long.", variant: "destructive", }) return } // In a real app, you would validate current password and update toast({ title: "Password updated", description: "Your password has been successfully changed.", }) setPasswordForm({ currentPassword: "", newPassword: "", confirmPassword: "", }) setIsChangingPassword(false) } const getInitials = (name: string) => { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() } return (

{/* Header */}

Profile

Manage your account settings and preferences

{/* Profile Information Card */} Profile Information Your personal information and group details {/* Profile Photo Section */}

{getInitials(user.name)} Upload new photo

{user.name}

{user.email}

{/* User Details */}

Full Name

{user.name}

Phone Number

{user.phone}

City

{user.city}

Group

{user.group}

{/* Password Change Card */} Security Update your password to keep your account secure {!isChangingPassword ? ( ) : (

Current Password

setPasswordForm((prev) => ({ ...prev, currentPassword: e.target.value, })) } required />

New Password

setPasswordForm((prev) => ({ ...prev, newPassword: e.target.value, })) } required minLength={8} />

Confirm New Password

setPasswordForm((prev) => ({ ...prev, confirmPassword: e.target.value, })) } required minLength={8} />

)}

) } [V0_FILE]typescriptreact:file="app/support/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, 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 { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { MessageSquare, Clock, CheckCircle, RotateCcw, Plus, Calendar, User } from "lucide-react" import { useToast } from "@/hooks/use-toast" type TicketStatus = "open" | "answered" | "closed" | "reopened" type TicketPriority = "low" | "medium" | "high" | "urgent" interface Ticket { id: string title: string description: string priority: TicketPriority status: TicketStatus createdAt: string updatedAt: string response?: string responseDate?: string } // Mock tickets data const mockTickets: Ticket[] = [ { id: "1", title: "Login Issues", description: "I'm having trouble logging into my account. The password reset doesn't seem to work.", priority: "high", status: "answered", createdAt: "2024-01-15T10:30:00Z", updatedAt: "2024-01-15T14:20:00Z", response: "Hi! I've reset your password manually. Please check your email for the new temporary password. Make sure to change it after logging in.", responseDate: "2024-01-15T14:20:00Z", }, { id: "2", title: "Feature Request", description: "Would it be possible to add dark mode to the application? It would be great for night-time usage.", priority: "low", status: "open", createdAt: "2024-01-14T09:15:00Z", updatedAt: "2024-01-14T09:15:00Z", }, { id: "3", title: "Data Export Problem", description: "The CSV export feature is not working properly. Some columns are missing from the exported file.", priority: "medium", status: "closed", createdAt: "2024-01-10T16:45:00Z", updatedAt: "2024-01-12T11:30:00Z", response: "This issue has been fixed in our latest update. The CSV export now includes all columns as expected.", responseDate: "2024-01-12T11:30:00Z", }, ] export default function SupportPage() { const [tickets, setTickets] = useState(mockTickets) const [isCreatingTicket, setIsCreatingTicket] = useState(false) const [newTicket, setNewTicket] = useState({ title: "", description: "", priority: "medium" as TicketPriority, }) const { toast } = useToast() const handleCreateTicket = (e: React.FormEvent) => { e.preventDefault() if (!newTicket.title.trim() || !newTicket.description.trim()) { toast({ title: "Missing information", description: "Please fill in both title and description.", variant: "destructive", }) return } const ticket: Ticket = { id: Date.now().toString(), title: newTicket.title, description: newTicket.description, priority: newTicket.priority, status: "open", createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), } setTickets((prev) => [ticket, ...prev]) setNewTicket({ title: "", description: "", priority: "medium" }) setIsCreatingTicket(false) toast({ title: "Ticket created", description: "Your support ticket has been submitted successfully.", }) } const handleCloseTicket = (ticketId: string) => { setTickets((prev) => prev.map((ticket) => ticket.id === ticketId ? { ...ticket, status: "closed" as TicketStatus, updatedAt: new Date().toISOString() } : ticket, ), ) toast({ title: "Ticket closed", description: "The ticket has been marked as resolved.", }) } const handleReopenTicket = (ticketId: string) => { setTickets((prev) => prev.map((ticket) => ticket.id === ticketId ? { ...ticket, status: "reopened" as TicketStatus, updatedAt: new Date().toISOString() } : ticket, ), ) toast({ title: "Ticket reopened", description: "The ticket has been reopened for further assistance.", }) } const getStatusIcon = (status: TicketStatus) => { switch (status) { case "open": return case "answered": return case "closed": return case "reopened": return } } const getStatusColor = (status: TicketStatus) => { switch (status) { case "open": return "bg-yellow-100 text-yellow-800 border-yellow-200" case "answered": return "bg-blue-100 text-blue-800 border-blue-200" case "closed": return "bg-green-100 text-green-800 border-green-200" case "reopened": return "bg-orange-100 text-orange-800 border-orange-200" } } const getPriorityColor = (priority: TicketPriority) => { switch (priority) { case "low": return "bg-gray-100 text-gray-800 border-gray-200" case "medium": return "bg-blue-100 text-blue-800 border-blue-200" case "high": return "bg-orange-100 text-orange-800 border-orange-200" case "urgent": return "bg-red-100 text-red-800 border-red-200" } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } return (

{/* Header */}

Support Center

Get help with your questions and issues

{/* Create Ticket Form */} {isCreatingTicket && ( Create New Support Ticket Describe your issue or question in detail

Title setNewTicket((prev) => ({ ...prev, title: e.target.value }))} required />

Priority

Description

setNewTicket((prev) => ({ ...prev, description: e.target.value }))}
                    required
                  />
                </div>

<div className="flex space-x-2">
                  <Button type="submit">Submit Ticket</Button>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      setIsCreatingTicket(false)
                      setNewTicket({ title: "", description: "", priority: "medium" })
                    }}
                  >
                    Cancel
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        )}

{/* Tickets History */}
        <Card>
          <CardHeader>
            <CardTitle>Your Support Tickets</CardTitle>
            <CardDescription>
              {tickets.length === 0
                ? "No tickets found. Create your first support ticket above."
                : `You have ${tickets.length} ticket${tickets.length !== 1 ? "s" : ""}`}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {tickets.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
                <p>No support tickets yet</p>
              </div>
            ) : (
              <div className="space-y-4">
                {tickets.map((ticket, index) => (
                  <div key={ticket.id}>
                    <div className="space-y-4">
                      {/* Ticket Header */}
                      <div className="flex items-start justify-between">
                        <div className="space-y-2">
                          <div className="flex items-center gap-2">
                            <h3 className="font-semibold">{ticket.title}</h3>
                            <Badge className={`${getStatusColor(ticket.status)} border`}>
                              <div className="flex items-center gap-1">
                                {getStatusIcon(ticket.status)}
                                {ticket.status.charAt(0).toUpperCase() + ticket.status.slice(1)}
                              </div>
                            </Badge>
                            <Badge className={`${getPriorityColor(ticket.priority)} border`}>
                              {ticket.priority.charAt(0).toUpperCase() + ticket.priority.slice(1)}
                            </Badge>
                          </div>
                          <div className="flex items-center gap-4 text-sm text-muted-foreground">
                            <div className="flex items-center gap-1">
                              <Calendar className="h-3 w-3" />
                              Created: {formatDate(ticket.createdAt)}
                            </div>
                            <div className="flex items-center gap-1">
                              <Clock className="h-3 w-3" />
                              Updated: {formatDate(ticket.updatedAt)}
                            </div>
                          </div>
                        </div>
                      </div>

{/* Ticket Description */}
                      <div className="bg-muted/50 p-4 rounded-lg">
                        <div className="flex items-start gap-2">
                          <User className="h-4 w-4 mt-1 text-muted-foreground" />
                          <div>
                            <p className="font-medium text-sm">You</p>
                            <p className="text-sm mt-1">{ticket.description}</p>
                          </div>
                        </div>
                      </div>

{/* Support Response */}
                      {ticket.response && (
                        <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                          <div className="flex items-start gap-2">
                            <MessageSquare className="h-4 w-4 mt-1 text-blue-600" />
                            <div>
                              <div className="flex items-center gap-2">
                                <p className="font-medium text-sm text-blue-900">Support Team</p>
                                <span className="text-xs text-blue-600">{formatDate(ticket.responseDate!)}</span>
                              </div>
                              <p className="text-sm mt-1 text-blue-800">{ticket.response}</p>
                            </div>
                          </div>
                        </div>
                      )}

{/* Ticket Actions */}
                      {ticket.status === "answered" && (
                        <div className="flex gap-2">
                          <Button
                            size="sm"
                            onClick={() => handleCloseTicket(ticket.id)}
                            className="bg-green-600 hover:bg-green-700"
                          >
                            <CheckCircle className="h-4 w-4 mr-1" />
                            Close Ticket
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => handleReopenTicket(ticket.id)}>
                            <RotateCcw className="h-4 w-4 mr-1" />
                            Need Further Assistance
                          </Button>
                        </div>
                      )}
                    </div>

{index < tickets.length - 1 && <Separator className="mt-6" />}
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}</article></body></html>