[V0_FILE]typescriptreact:file="app/page.tsx" 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 { Car, Settings, User, Wrench } from "lucide-react" export default function Home() { return (

CarFixConnect

Connect with Car Repair Services

Find reliable mechanics and repair shops in your area or offer your services to car owners.

For Car Owners

Get your car fixed quickly and reliably

Connect with skilled mechanics in your area. Share your car issue, get quotes, and track repair progress in real-time.

For Mechanics & Workshops

Grow your repair business

Receive repair requests directly from car owners. Manage your schedule, set your rates, and build your reputation.

How It Works

Our platform makes it easy to connect car owners with repair services

For Car Owners For Mechanics

1. Submit Request

Describe your car issue and provide your contact details

2. Get Connected

Nearby mechanics will contact you with quotes and availability

3. Get Fixed

Choose a mechanic, track their arrival, and get your car fixed

1. Receive Requests

Get notified of nearby car owners who need your services

2. Respond & Quote

Contact customers, provide quotes, and arrange service times

3. Complete & Get Paid

Provide quality service and receive payment through the app

) } [V0_FILE]typescriptreact:file="app/customer/page.tsx" "use client" import type React from "react" import { useState } from "react" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { ArrowLeft, MapPin, Send } from "lucide-react" import { useToast } from "@/hooks/use-toast" export default function CustomerPage() { const [service, setService] = useState("") const [issue, setIssue] = useState("") const [contact, setContact] = useState("") const [location, setLocation] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const { toast } = useToast() const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate API call setTimeout(() => { setIsSubmitting(false) toast({ title: "Request Submitted", description: "Your repair request has been sent to nearby mechanics.", }) // In a real app, we would save this data to a database console.log({ service, issue, contact, location }) }, 1500) } const handleShareLocation = () => { // In a real app, we would use the browser's geolocation API setLocation("Current location") toast({ title: "Location Shared", description: "Your current location has been added to the request.", }) } return (

Request Car Repair

Fill out the form below to connect with nearby mechanics and repair shops.

Car Repair Request Provide details about your car issue to get the right help.

Service Type

Describe the Issue

setIssue(e.target.value)}
                required
                className="min-h-[100px]"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="contact">Contact Number</Label>
              <Input
                id="contact"
                type="tel"
                placeholder="Your phone number"
                value={contact}
                onChange={(e) => setContact(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="location">Location</Label>
              <div className="flex gap-2">
                <Input
                  id="location"
                  placeholder="Your location"
                  value={location}
                  onChange={(e) => setLocation(e.target.value)}
                  required
                  className="flex-1"
                />
                <Button type="button" variant="outline" onClick={handleShareLocation}>
                  <MapPin className="mr-2 h-4 w-4" />
                  Share Location
                </Button>
              </div>
            </div>
            <Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? (
                "Submitting..."
              ) : (
                <>
                  <Send className="mr-2 h-4 w-4" />
                  Submit Request
                </>
              )}
            </Button>
          </form>
        </CardContent>
        <CardFooter className="flex flex-col items-start border-t px-6 py-4">
          <p className="text-sm text-muted-foreground">
            By submitting this request, you agree to be contacted by mechanics in your area.
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/worker/page.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Calendar, CheckCircle, Clock, MapPin, Phone, Settings, User } from "lucide-react"

// Mock data for demonstration
const mockRequests = [
  {
    id: "req-001",
    service: "Engine Repair",
    issue: "Car won't start. Makes clicking noise when I turn the key.",
    contact: "0300-1234567",
    location: "F-10 Markaz, Islamabad",
    time: "10 minutes ago",
    status: "new",
  },
  {
    id: "req-002",
    service: "AC Repair",
    issue: "AC not cooling properly, makes strange noise when turned on.",
    contact: "0321-9876543",
    location: "F-10/2, Islamabad",
    time: "25 minutes ago",
    status: "new",
  },
  {
    id: "req-003",
    service: "Electrical System",
    issue: "Battery drains overnight. Need to check electrical system.",
    contact: "0333-5556666",
    location: "F-10/3, Islamabad",
    time: "1 hour ago",
    status: "new",
  },
  {
    id: "req-004",
    service: "Denting & Painting",
    issue: "Minor dent on front bumper after small accident.",
    contact: "0345-1112222",
    location: "F-10/4, Islamabad",
    time: "2 hours ago",
    status: "accepted",
  },
  {
    id: "req-005",
    service: "Key & Immobilizer",
    issue: "Lost my car key. Need a replacement and programming.",
    contact: "0312-3334444",
    location: "F-11 Markaz, Islamabad",
    time: "3 hours ago",
    status: "completed",
  },
]

export default function WorkerPage() {
  const [activeRequests, setActiveRequests] = useState(mockRequests)

const acceptRequest = (id: string) => {
    setActiveRequests(activeRequests.map((req) => (req.id === id ? { ...req, status: "accepted" } : req)))
  }

const completeRequest = (id: string) => {
    setActiveRequests(activeRequests.map((req) => (req.id === id ? { ...req, status: "completed" } : req)))
  }

return (
    <div className="container max-w-4xl py-6 md:py-10">
      <div className="mb-6">
        <Button variant="ghost" size="sm" asChild>
          <Link href="/">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Home
          </Link>
        </Button>
      </div>
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div className="space-y-1">
          <h1 className="text-3xl font-bold tracking-tight">Mechanic Dashboard</h1>
          <p className="text-muted-foreground">View and manage repair requests from car owners in your area.</p>
        </div>
        <Button variant="outline" size="sm">
          <Settings className="mr-2 h-4 w-4" />
          Workshop Settings
        </Button>
      </div>

<Tabs defaultValue="new">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="new">
            New Requests
            <Badge variant="secondary" className="ml-2">
              {activeRequests.filter((r) => r.status === "new").length}
            </Badge>
          </TabsTrigger>
          <TabsTrigger value="accepted">
            Accepted
            <Badge variant="secondary" className="ml-2">
              {activeRequests.filter((r) => r.status === "accepted").length}
            </Badge>
          </TabsTrigger>
          <TabsTrigger value="completed">
            Completed
            <Badge variant="secondary" className="ml-2">
              {activeRequests.filter((r) => r.status === "completed").length}
            </Badge>
          </TabsTrigger>
        </TabsList>

<TabsContent value="new" className="mt-4 space-y-4">
          {activeRequests.filter((req) => req.status === "new").length > 0 ? (
            activeRequests
              .filter((req) => req.status === "new")
              .map((request) => (
                <Card key={request.id}>
                  <CardHeader className="pb-2">
                    <div className="flex justify-between items-start">
                      <CardTitle>{request.service}</CardTitle>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <Clock className="mr-1 h-3 w-3" />
                        {request.time}
                      </div>
                    </div>
                    <CardDescription>{request.issue}</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="grid gap-2">
                      <div className="flex items-center">
                        <MapPin className="mr-2 h-4 w-4 text-muted-foreground" />
                        <span>{request.location}</span>
                      </div>
                      <div className="flex items-center">
                        <Phone className="mr-2 h-4 w-4 text-muted-foreground" />
                        <span>{request.contact}</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full" onClick={() => acceptRequest(request.id)}>
                      Accept Request
                    </Button>
                  </CardFooter>
                </Card>
              ))
          ) : (
            <div className="text-center py-10">
              <p className="text-muted-foreground">No new requests at the moment.</p>
            </div>
          )}
        </TabsContent>

<TabsContent value="accepted" className="mt-4 space-y-4">
          {activeRequests.filter((req) => req.status === "accepted").length > 0 ? (
            activeRequests
              .filter((req) => req.status === "accepted")
              .map((request) => (
                <Card key={request.id}>
                  <CardHeader className="pb-2">
                    <div className="flex justify-between items-start">
                      <CardTitle>{request.service}</CardTitle>
                      <Badge>In Progress</Badge>
                    </div>
                    <CardDescription>{request.issue}</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="grid gap-2">
                      <div className="flex items-center">
                        <MapPin className="mr-2 h-4 w-4 text-muted-foreground" />
                        <span>{request.location}</span>
                      </div>
                      <div className="flex items-center">
                        <Phone className="mr-2 h-4 w-4 text-muted-foreground" />
                        <span>{request.contact}</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full" onClick={() => completeRequest(request.id)}>
                      Mark as Completed
                    </Button>
                  </CardFooter>
                </Card>
              ))
          ) : (
            <div className="text-center py-10">
              <p className="text-muted-foreground">No accepted requests.</p>
            </div>
          )}
        </TabsContent>

<TabsContent value="completed" className="mt-4 space-y-4">
          {activeRequests.filter((req) => req.status === "completed").length > 0 ? (
            activeRequests
              .filter((req) => req.status === "completed")
              .map((request) => (
                <Card key={request.id}>
                  <CardHeader className="pb-2">
                    <div className="flex justify-between items-start">
                      <CardTitle>{request.service}</CardTitle>
                      <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                        <CheckCircle className="mr-1 h-3 w-3" />
                        Completed
                      </Badge>
                    </div>
                    <CardDescription>{request.issue}</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="grid gap-2">
                      <div className="flex items-center">
                        <User className="mr-2 h-4 w-4 text-muted-foreground" />
                        <span>{request.contact}</span>
                      </div>
                      <div className="flex items-center">
                        <MapPin className="mr-2 h-4 w-4 text-muted-foreground" />
                        <span>{request.location}</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Calendar className="mr-2 h-4 w-4" />
                      View Details
                    </Button>
                  </CardFooter>
                </Card>
              ))
          ) : (
            <div className="text-center py-10">
              <p className="text-muted-foreground">No completed requests yet.</p>
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/payment/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { ArrowLeft, CreditCard, Smartphone } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export default function PaymentPage() {
  const [paymentMethod, setPaymentMethod] = useState("card")
  const [isProcessing, setIsProcessing] = useState(false)
  const { toast } = useToast()

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setIsProcessing(true)

// Simulate payment processing
    setTimeout(() => {
      setIsProcessing(false)
      toast({
        title: "Payment Successful",
        description: "Your payment has been processed successfully.",
      })
    }, 2000)
  }

return (
    <div className="container max-w-md py-6 md:py-10">
      <div className="mb-6">
        <Button variant="ghost" size="sm" asChild>
          <Link href="/customer">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Request
          </Link>
        </Button>
      </div>
      <div className="space-y-2 mb-6">
        <h1 className="text-3xl font-bold tracking-tight">Payment</h1>
        <p className="text-muted-foreground">Complete your payment to confirm your repair request.</p>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Payment Details</CardTitle>
          <CardDescription>Choose your preferred payment method.</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-4">
              <Label>Payment Method</Label>
              <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod} className="grid grid-cols-2 gap-4">
                <div>
                  <RadioGroupItem value="card" id="card" className="peer sr-only" />
                  <Label
                    htmlFor="card"
                    className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <CreditCard className="mb-3 h-6 w-6" />
                    Credit Card
                  </Label>
                </div>
                <div>
                  <RadioGroupItem value="mobile" id="mobile" className="peer sr-only" />
                  <Label
                    htmlFor="mobile"
                    className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <Smartphone className="mb-3 h-6 w-6" />
                    Mobile Wallet
                  </Label>
                </div>
              </RadioGroup>
            </div>

{paymentMethod === "card" ? (
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="card-number">Card Number</Label>
                  <Input id="card-number" placeholder="1234 5678 9012 3456" />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="expiry">Expiry Date</Label>
                    <Input id="expiry" placeholder="MM/YY" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cvc">CVC</Label>
                    <Input id="cvc" placeholder="123" />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="name">Name on Card</Label>
                  <Input id="name" placeholder="John Doe" />
                </div>
              </div>
            ) : (
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="mobile-number">Mobile Number</Label>
                  <Input id="mobile-number" placeholder="03XX-XXXXXXX" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="provider">Provider</Label>
                  <select
                    id="provider"
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                  >
                    <option value="jazzcash">JazzCash</option>
                    <option value="easypaisa">EasyPaisa</option>
                    <option value="upaisa">UPaisa</option>
                  </select>
                </div>
              </div>
            )}

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label>Amount</Label>
                <span className="font-semibold">Rs. 1,500</span>
              </div>
              <div className="flex items-center justify-between text-sm text-muted-foreground">
                <span>Service Fee</span>
                <span>Rs. 50</span>
              </div>
              <div className="flex items-center justify-between font-medium">
                <span>Total</span>
                <span>Rs. 1,550</span>
              </div>
            </div>

<Button type="submit" className="w-full" disabled={isProcessing}>
              {isProcessing ? "Processing..." : "Pay Now"}
            </Button>
          </form>
        </CardContent>
        <CardFooter className="flex flex-col items-start border-t px-6 py-4">
          <p className="text-sm text-muted-foreground">Your payment information is secure and encrypted.</p>
        </CardFooter>
      </Card>
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This