[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" export default function Home() { return (

Laptop Repair Management System

Receive Laptop

Log new customer laptop repair requests.

Send to YS Repair

Send laptops for motherboard-level repairs.

Dashboard

View all pending repair cases.

) } [V0_FILE]typescriptreact:file="models.py" isMerged="true" from django.db import models class Customer(models.Model): name = models.CharField(max_length=100) mobile_number = models.CharField(max_length=15) def __str__(self): return self.name class RepairCase(models.Model): STATUS_CHOICES = [ ('pending', 'Pending'), ('at_ys_repair', 'At YS Repair'), ('solved', 'Solved'), ('unsolved', 'Unsolved'), ] case_id = models.CharField(max_length=10, unique=True) customer = models.ForeignKey(Customer, on_delete=models.CASCADE) product_serial_number = models.CharField(max_length=50) problem_description = models.TextField() diagnosed_problem = models.TextField(blank=True, null=True) status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='pending') created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) def __str__(self): return f"Case {self.case_id} - {self.customer.name}" class YSRepair(models.Model): repair_case = models.OneToOneField(RepairCase, on_delete=models.CASCADE) sent_date = models.DateTimeField(auto_now_add=True) returned_date = models.DateTimeField(null=True, blank=True) notes = models.TextField(blank=True, null=True) def __str__(self): return f"YS Repair for Case {self.repair_case.case_id}" [V0_FILE]typescriptreact:file="forms.py" isMerged="true" from django import forms from .models import Customer, RepairCase, YSRepair import random import string class ReceiveLaptopForm(forms.ModelForm): customer_name = forms.CharField(max_length=100) mobile_number = forms.CharField(max_length=15) class Meta: model = RepairCase fields = ['product_serial_number', 'problem_description'] def save(self, commit=True): # Generate a unique case ID case_id = ''.join(random.choices(string.ascii_uppercase + string.digits, k=6)) # Create or get customer customer, created = Customer.objects.get_or_create( name=self.cleaned_data['customer_name'], mobile_number=self.cleaned_data['mobile_number'] ) # Create repair case repair_case = super().save(commit=False) repair_case.case_id = case_id repair_case.customer = customer if commit: repair_case.save() return repair_case class SendToYSRepairForm(forms.ModelForm): class Meta: model = RepairCase fields = ['diagnosed_problem'] def save(self, commit=True): repair_case = super().save(commit=False) repair_case.status = 'at_ys_repair' if commit: repair_case.save() YSRepair.objects.create(repair_case=repair_case) return repair_case class CloseCaseForm(forms.Form): RESOLUTION_CHOICES = [ ('solved', 'Solved'), ('unsolved', 'Unsolved'), ] resolution = forms.ChoiceField(choices=RESOLUTION_CHOICES) notes = forms.CharField(widget=forms.Textarea, required=False) [V0_FILE]typescriptreact:file="app/receive-laptop/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" 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" export default function ReceiveLaptop() { const router = useRouter() const [formData, setFormData] = useState({ customerName: "", mobileNumber: "", serialNumber: "", problemDescription: "", }) const handleChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e) => { e.preventDefault() // In a real app, this would send data to your Django backend console.log("Form submitted:", formData) // Generate a mock case ID and redirect const mockCaseId = "C" + Math.floor(10000 + Math.random() * 90000) // Show success message alert(`Case ${mockCaseId} created successfully!`) // Redirect to dashboard router.push("/dashboard") } return (

Receive Laptop

Customer Laptop Intake Form Enter the customer and laptop details to create a new repair case.

Customer Name

Mobile Number

Product Serial Number

Problem Description

</div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Link href="/dashboard">
                <Button variant="outline">Cancel</Button>
              </Link>
              <Button type="submit">Create Repair Case</Button>
            </CardFooter>
          </form>
        </Card>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/send-to-ys/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Mock data - in a real app, this would come from your Django backend
const mockPendingCases = [
  { id: "C12345", customer: "John Doe", serial: "SN123456", problem: "Won't boot" },
  { id: "C12346", customer: "Jane Smith", serial: "SN789012", problem: "Screen flickering" },
  { id: "C12347", customer: "Bob Johnson", serial: "SN345678", problem: "Battery not charging" },
]

export default function SendToYSRepair() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const caseParam = searchParams.get("case")

const [selectedCase, setSelectedCase] = useState(caseParam || "")
  const [diagnosedProblem, setDiagnosedProblem] = useState("")
  const [caseDetails, setCaseDetails] = useState(null)

useEffect(() => {
    if (selectedCase) {
      // In a real app, you would fetch the case details from your Django backend
      const foundCase = mockPendingCases.find((c) => c.id === selectedCase)
      setCaseDetails(foundCase || null)
    } else {
      setCaseDetails(null)
    }
  }, [selectedCase])

const handleSubmit = (e) => {
    e.preventDefault()

// In a real app, this would send data to your Django backend
    console.log("Sending to YS Repair:", {
      caseId: selectedCase,
      diagnosedProblem,
    })

// Show success message
    alert(`Case ${selectedCase} has been sent to YS Repair!`)

// Redirect to dashboard
    router.push("/dashboard")
  }

return (
    <div className="min-h-screen bg-gray-50 p-4">
      <header className="bg-white shadow rounded-lg mb-6">
        <div className="max-w-7xl mx-auto py-6 px-4">
          <div className="flex justify-between items-center">
            <h1 className="text-3xl font-bold text-gray-900">Send to YS Repair</h1>
            <Link href="/">
              <Button variant="outline">Back to Home</Button>
            </Link>
          </div>
        </div>
      </header>

<main className="max-w-3xl mx-auto">
        <Card>
          <CardHeader>
            <CardTitle>Send Laptop for Motherboard Repair</CardTitle>
            <CardDescription>Select a case and enter the diagnosed problem to send to YS Repair.</CardDescription>
          </CardHeader>
          <form onSubmit={handleSubmit}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="caseSelect">Select Case</Label>
                <Select value={selectedCase} onValueChange={setSelectedCase} required>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a case" />
                  </SelectTrigger>
                  <SelectContent>
                    {mockPendingCases.map((caseItem) => (
                      <SelectItem key={caseItem.id} value={caseItem.id}>
                        {caseItem.id} - {caseItem.customer}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

{caseDetails && (
                <div className="bg-gray-50 p-4 rounded-md">
                  <h3 className="font-medium mb-2">Case Details</h3>
                  <p>
                    <strong>Customer:</strong> {caseDetails.customer}
                  </p>
                  <p>
                    <strong>Serial Number:</strong> {caseDetails.serial}
                  </p>
                  <p>
                    <strong>Customer Problem:</strong> {caseDetails.problem}
                  </p>
                </div>
              )}

<div className="space-y-2">
                <Label htmlFor="diagnosedProblem">Diagnosed Problem</Label>
                <Textarea
                  id="diagnosedProblem"
                  value={diagnosedProblem}
                  onChange={(e) => setDiagnosedProblem(e.target.value)}
                  placeholder="Enter your technical diagnosis of the problem"
                  rows={4}
                  required
                />
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Link href="/dashboard">
                <Button variant="outline">Cancel</Button>
              </Link>
              <Button type="submit" disabled={!selectedCase || !diagnosedProblem}>
                Send to YS Repair
              </Button>
            </CardFooter>
          </form>
        </Card>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/send-to-ys/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="settings.py" isMerged="true"
import os
from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-your-secret-key-here'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'repair_system',  # Our app
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'laptop_repair.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'laptop_repair.wsgi.application'

# Database
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

# Password validation
AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True

# Static files (CSS, JavaScript, Images)
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

# Default primary key field type
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

[V0_FILE]typescriptreact:file="laptop_repair/urls.py" isMerged="true"
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('repair_system.urls')),
]

[V0_FILE]typescriptreact:file="views.py" isEdit="true" isQuickEdit="true"
from django.shortcuts import render, redirect, get_object_or_404
from django.urls import reverse
from .models import RepairCase, YSRepair
from .forms import ReceiveLaptopForm, SendToYSRepairForm, CloseCaseForm
from django.utils import timezone

def dashboard(request):
    pending_cases = RepairCase.objects.filter(status='pending')
    ys_repair_cases = RepairCase.objects.filter(status='at_ys_repair')
    
    context = {
        'pending_cases': pending_cases,
        'ys_repair_cases': ys_repair_cases,
    }
    
    return render(request, 'repair_system/dashboard.html', context)

def receive_laptop(request):
    if request.method == 'POST':
        form = ReceiveLaptopForm(request.POST)
        if form.is_valid():
            repair_case = form.save()
            return redirect('case_detail', case_id=repair_case.case_id)
    else:
        form = ReceiveLaptopForm()
    
    return render(request, 'repair_system/receive_laptop.html', {'form': form})

def send_to_ys_repair(request):
    if request.method == 'POST':
        case_id = request.POST.get('case_id')
        repair_case = get_object_or_404(RepairCase, case_id=case_id)
        
        form = SendToYSRepairForm(request.POST, instance=repair_case)
        if form.is_valid():
            form.save()
            return redirect('dashboard')
    else:
        form = SendToYSRepairForm()
    
    pending_cases = RepairCase.objects.filter(status='pending')
    
    context = {
        'form': form,
        'pending_cases': pending_cases,
    }
    
    return render(request, 'repair_system/send_to_ys_repair.html', context)

def case_detail(request, case_id):
    repair_case = get_object_or_404(RepairCase, case_id=case_id)
    
    if request.method == 'POST':
        form = CloseCaseForm(request.POST)
        if form.is_valid():
            resolution = form.cleaned_data['resolution']
            notes = form.cleaned_data['notes']
            
            repair_case.status = resolution
            repair_case.save()
            
            # If the case was at YS Repair, update the YS Repair record
            if hasattr(repair_case, 'ysrepair'):
                ys_repair = repair_case.ysrepair
                ys_repair.notes = notes
                ys_repair.returned_date = timezone.now()
                ys_repair.save()
            
            return redirect('dashboard')
    else:
        form = CloseCaseForm()
    
    context = {
        'repair_case': repair_case,
        'form': form,
    }
    
    return render(request, 'repair_system/case_detail.html', context)

# Add a new view for closing a case
def close_case(request):
    if request.method == 'POST':
        case_id = request.POST.get('case_id')
        resolution = request.POST.get('resolution')
        notes = request.POST.get('notes')
        
        repair_case = get_object_or_404(RepairCase, case_id=case_id)
        repair_case.status = resolution
        repair_case.save()
        
        # If the case was at YS Repair, update the YS Repair record
        if hasattr(repair_case, 'ysrepair'):
            ys_repair = repair_case.ysrepair
            ys_repair.notes = notes
            ys_repair.returned_date = timezone.now()
            ys_repair.save()
        
        return redirect('dashboard')
    
    return redirect('dashboard')

[V0_FILE]typescriptreact:file="urls.py" isEdit="true" isQuickEdit="true"
from django.urls import path
from . import views

urlpatterns = [
    path('', views.dashboard, name='dashboard'),
    path('receive-laptop/', views.receive_laptop, name='receive_laptop'),
    path('send-to-ys-repair/', views.send_to_ys_repair, name='send_to_ys_repair'),
    path('case/<str:case_id>/', views.case_detail, name='case_detail'),
    path('close-case/', views.close_case, name='close_case'),
]

[V0_FILE]typescriptreact:file="app/components/close-case-dialog.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Textarea } from "@/components/ui/textarea"

interface CloseCaseDialogProps {
  caseId: string
  onClose: (resolution: string, notes: string) => void
  trigger?: React.ReactNode
}

export function CloseCaseDialog({ caseId, onClose, trigger }: CloseCaseDialogProps) {
  const [open, setOpen] = useState(false)
  const [resolution, setResolution] = useState("solved")
  const [notes, setNotes] = useState("")

const handleSubmit = () => {
    onClose(resolution, notes)
    setOpen(false)
    // Reset form
    setResolution("solved")
    setNotes("")
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {trigger || (
          <Button variant="destructive" size="sm">
            Close Case
          </Button>
        )}
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Close Case #{caseId}</DialogTitle>
          <DialogDescription>Mark this case as solved or unsolved to close it.</DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label>Resolution</Label>
            <RadioGroup value={resolution} onValueChange={setResolution} className="flex space-x-4">
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="solved" id="solved" />
                <Label htmlFor="solved">Solved</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="unsolved" id="unsolved" />
                <Label htmlFor="unsolved">Unsolved</Label>
              </div>
            </RadioGroup>
          </div>

<div className="space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea
              id="notes"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Enter any notes about the resolution"
              rows={4}
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleSubmit}>Close Case</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CloseCaseDialog } from "@/app/components/close-case-dialog"

// Mock data - in a real app, this would come from your Django backend
const mockPendingCases = [
  { id: "C12345", customer: "John Doe", serial: "SN123456", problem: "Won't boot", status: "pending" },
  { id: "C12346", customer: "Jane Smith", serial: "SN789012", problem: "Screen flickering", status: "pending" },
  { id: "C12347", customer: "Bob Johnson", serial: "SN345678", problem: "Battery not charging", status: "pending" },
]

const mockYSCases = [
  { id: "C12348", customer: "Alice Brown", serial: "SN901234", problem: "Motherboard failure", status: "at_ys_repair" },
  { id: "C12349", customer: "Charlie Davis", serial: "SN567890", problem: "GPU issues", status: "at_ys_repair" },
]

export default function Dashboard() {
  const [pendingCases, setPendingCases] = useState([])
  const [ysRepairCases, setYsRepairCases] = useState([])

useEffect(() => {
    // In a real app, you would fetch this data from your Django backend
    setPendingCases(mockPendingCases)
    setYsRepairCases(mockYSCases)
  }, [])

// Add a function to handle closing a case
  const handleCloseCase = (caseItem, resolution, notes) => {
    // In a real app, this would send data to your Django backend
    console.log("Closing case:", {
      caseId: caseItem.id,
      resolution,
      notes,
    })

// Show success message
    alert(`Case ${caseItem.id} has been marked as ${resolution}!`)

// Update the local state to remove the case from the list
    if (caseItem.status === "pending") {
      setPendingCases(pendingCases.filter((c) => c.id !== caseItem.id))
    } else if (caseItem.status === "at_ys_repair") {
      setYsRepairCases(ysRepairCases.filter((c) => c.id !== caseItem.id))
    }
  }

return (
    <div className="min-h-screen bg-gray-50 p-4">
      <header className="bg-white shadow rounded-lg mb-6">
        <div className="max-w-7xl mx-auto py-6 px-4">
          <div className="flex justify-between items-center">
            <h1 className="text-3xl font-bold text-gray-900">Repair Dashboard</h1>
            <div className="space-x-2">
              <Link href="/">
                <Button variant="outline">Home</Button>
              </Link>
              <Link href="/receive-laptop">
                <Button>New Repair</Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

<main className="max-w-7xl mx-auto">
        <Tabs defaultValue="pending">
          <TabsList className="grid w-full grid-cols-2 mb-6">
            <TabsTrigger value="pending">Pending Cases ({pendingCases.length})</TabsTrigger>
            <TabsTrigger value="ys_repair">YS Repair Cases ({ysRepairCases.length})</TabsTrigger>
          </TabsList>

<TabsContent value="pending">
            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
              {pendingCases.map((caseItem) => (
                <Card key={caseItem.id}>
                  <CardHeader>
                    <CardTitle className="flex justify-between">
                      <span>Case #{caseItem.id}</span>
                      <span className="text-sm bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Pending</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <p>
                        <strong>Customer:</strong> {caseItem.customer}
                      </p>
                      <p>
                        <strong>Serial:</strong> {caseItem.serial}
                      </p>
                      <p>
                        <strong>Problem:</strong> {caseItem.problem}
                      </p>
                      <div className="flex space-x-2 mt-4">
                        <Link href={`/case/${caseItem.id}`}>
                          <Button variant="outline" size="sm">
                            View Details
                          </Button>
                        </Link>
                        <Link href={`/send-to-ys?case=${caseItem.id}`}>
                          <Button size="sm">Send to YS</Button>
                        </Link>
                        <CloseCaseDialog
                          caseId={caseItem.id}
                          onClose={(resolution, notes) => handleCloseCase(caseItem, resolution, notes)}
                          trigger={
                            <Button variant="destructive" size="sm">
                              Close Case
                            </Button>
                          }
                        />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="ys_repair">
            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
              {ysRepairCases.map((caseItem) => (
                <Card key={caseItem.id}>
                  <CardHeader>
                    <CardTitle className="flex justify-between">
                      <span>Case #{caseItem.id}</span>
                      <span className="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">At YS Repair</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <p>
                        <strong>Customer:</strong> {caseItem.customer}
                      </p>
                      <p>
                        <strong>Serial:</strong> {caseItem.serial}
                      </p>
                      <p>
                        <strong>Problem:</strong> {caseItem.problem}
                      </p>
                      <div className="flex space-x-2 mt-4">
                        <Link href={`/case/${caseItem.id}`}>
                          <Button variant="outline" size="sm">
                            View Details
                          </Button>
                        </Link>
                        <CloseCaseDialog
                          caseId={caseItem.id}
                          onClose={(resolution, notes) => handleCloseCase(caseItem, resolution, notes)}
                          trigger={
                            <Button variant="destructive" size="sm">
                              Close Case
                            </Button>
                          }
                        />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/case/[id]/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CloseCaseDialog } from "@/app/components/close-case-dialog"

// Mock data - in a real app, this would come from your Django backend
const mockCases = [
  {
    id: "C12345",
    customer: "John Doe",
    mobile: "555-123-4567",
    serial: "SN123456",
    problem: "Won't boot",
    status: "pending",
    diagnosedProblem: "",
    createdAt: "2023-05-15T10:30:00Z",
    updatedAt: "2023-05-15T10:30:00Z",
  },
  {
    id: "C12348",
    customer: "Alice Brown",
    mobile: "555-987-6543",
    serial: "SN901234",
    problem: "Motherboard failure",
    status: "at_ys_repair",
    diagnosedProblem: "Failed capacitors on motherboard, needs replacement",
    createdAt: "2023-05-10T14:20:00Z",
    updatedAt: "2023-05-12T09:15:00Z",
  },
]

export default function CaseDetail({ params }) {
  const router = useRouter()
  const { id } = params

const [caseData, setCaseData] = useState(null)
  const [resolution, setResolution] = useState("solved")
  const [notes, setNotes] = useState("")

useEffect(() => {
    // In a real app, you would fetch the case details from your Django backend
    const foundCase = mockCases.find((c) => c.id === id)

if (foundCase) {
      setCaseData(foundCase)
    } else {
      // Case not found, redirect to dashboard
      router.push("/dashboard")
    }
  }, [id, router])

const handleCloseCase = (resolution, notes) => {
    // In a real app, this would send data to your Django backend
    console.log("Closing case:", {
      caseId: id,
      resolution,
      notes,
    })

// Show success message
    alert(`Case ${id} has been marked as ${resolution}!`)

// Redirect to dashboard
    router.push("/dashboard")
  }

if (!caseData) {
    return <div className="p-8 text-center">Loading...</div>
  }

const getStatusBadge = (status) => {
    switch (status) {
      case "pending":
        return <Badge className="bg-yellow-500">Pending</Badge>
      case "at_ys_repair":
        return <Badge className="bg-blue-500">At YS Repair</Badge>
      case "solved":
        return <Badge className="bg-green-500">Solved</Badge>
      case "unsolved":
        return <Badge className="bg-red-500">Unsolved</Badge>
      default:
        return <Badge>{status}</Badge>
    }
  }

const formatDate = (dateString) => {
    return new Date(dateString).toLocaleString()
  }

return (
    <div className="min-h-screen bg-gray-50 p-4">
      <header className="bg-white shadow rounded-lg mb-6">
        <div className="max-w-7xl mx-auto py-6 px-4">
          <div className="flex justify-between items-center">
            <h1 className="text-3xl font-bold text-gray-900">
              Case #{caseData.id} {getStatusBadge(caseData.status)}
            </h1>
            <Link href="/dashboard">
              <Button variant="outline">Back to Dashboard</Button>
            </Link>
          </div>
        </div>
      </header>

<main className="max-w-4xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <Card>
            <CardHeader>
              <CardTitle>Customer Information</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <p>
                  <strong>Name:</strong> {caseData.customer}
                </p>
                <p>
                  <strong>Mobile:</strong> {caseData.mobile}
                </p>
                <p>
                  <strong>Created:</strong> {formatDate(caseData.createdAt)}
                </p>
                <p>
                  <strong>Last Updated:</strong> {formatDate(caseData.updatedAt)}
                </p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Product Information</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <p>
                  <strong>Serial Number:</strong> {caseData.serial}
                </p>
                <p>
                  <strong>Problem Description:</strong> {caseData.problem}
                </p>
                {caseData.diagnosedProblem && (
                  <p>
                    <strong>Diagnosed Problem:</strong> {caseData.diagnosedProblem}
                  </p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

{(caseData.status === "pending" || caseData.status === "at_ys_repair") && (
          <Card>
            <CardHeader>
              <CardTitle>Close Case</CardTitle>
              <CardDescription>Mark this case as solved or unsolved to close it.</CardDescription>
            </CardHeader>
            <CardContent>
              <CloseCaseDialog caseId={caseData.id} onClose={handleCloseCase} trigger={<Button>Close Case</Button>} />
            </CardContent>
          </Card>
        )}
      </main>
    </div>
  )
}
</article></body></html>