import { useEffect, useState } from "react"
import { toast } from "react-toastify"
import { useNavigate } from "react-router-dom"
import { useSelector } from "react-redux"
import axios from "axios"
import {
  CheckCircle,
  XCircle,
  Home,
  MapPin,
  Package,
  PenToolIcon as Tool,
  FileText,
  Clock,
  Calendar,
  Truck,
  DollarSign,
  FileUp,
  CheckCheck,
  Award
} from "lucide-react"
import Navbar from "../components/Navbar"
import { ConfirmationModal } from "../modals/ConfirmationModal"
import API from "../API"

import { useDispatch } from "react-redux"
import { logout } from "../utils/UserSlice"

const TransporterDashboardPage = () => {
  const [tenders, setTenders] = useState([])
  const [history, setHistory] = useState([])
  const [showModal, setShowModal] = useState(false)
  const [selectedTender, setSelectedTender] = useState(null)
  const [responseForm, setResponseForm] = useState({
    price: "",
    vehicleNo: "",
    attachments: [],
  })
  const [view, setView] = useState(false)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [confirmDialog, setConfirmDialog] = useState(null)
  const [historyLoading, setHistoryLoading] = useState(false)
  const [historyError, setHistoryError] = useState(null)
  const [transporters, setTransporters] = useState([])
  const [transporterMap, setTransporterMap] = useState({})

  const navigate = useNavigate()
  const dispatch = useDispatch()


  const userInfo = useSelector((state) => state.User?.userInfo)
  const userName = userInfo?.name || "RR User"

  const fetchTenders = async () => {
    try {
      const res = await fetch(`${API.FETCH_ALL_TENDERS}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      })

      const data = await res.json()
      // console.log("fetch all tenders : ", data.data)

      const userId = userInfo?._id

      // Mark tenders where this user has submitted a quotation
      const updatedTenders = (data.data || []).map((tender) => {
        const hasUserQuoted = (tender.quotations || []).some((q) => {
          if (typeof q === 'object' && q.transportUser?._id) {
            return q.transportUser._id === userId
          }
          return false
        })

        return {
          ...tender,
          hasUserQuoted,
        }
      })

      setTenders(updatedTenders);

    } catch (err) {
      console.error("Fetch error:", err)
      setError("Failed to load tenders.")
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {

    fetchTenders()
  }, [])

  const fetchTransporters = async () => {
    try {
      const res = await axios.get(API.FETCH_ALL_TRANSPORTER, {
        withCredentials: true,
      })
      const list = res.data?.data || []
      // console.log("transporter's name : ", res.data)
      setTransporters(list)

      // create a map for quick lookup
      const map = {}
      list.forEach((t) => {
        map[t._id] = t.name
      })
      setTransporterMap(map)
    } catch (err) {
      console.error("Error fetching transporter list:", err)
    }
  }

  // const handleReject = (id) => {
  //   setConfirmDialog({
  //     message: "Are you sure you want to reject this tender?",
  //     onConfirm: () => {
  //       setTenders((prev) => prev.filter((t) => t.id !== id))
  //       toast.info("Tender rejected.")
  //       setConfirmDialog(null)
  //     },
  //     onCancel: () => setConfirmDialog(null),
  //   })
  // }

  const handleApprove = (tender) => {
    setSelectedTender(tender)
    setShowModal(true)
  }

  const handleFileChange = (e) => {

    const file = e.target.files?.[0]

    if (file && !["image/jpeg", "image/jpg"].includes(file.type)) {
      toast.error("Only JPG and JPEG files are allowed.")
      e.target.value = null // Reset input
      return
    }

    setResponseForm({
      ...responseForm,
      attachments: e.target.files?.[0] ? [e.target.files[0]] : [],
    })
  }

  const handleResponseChange = (e) => {
    setResponseForm({ ...responseForm, [e.target.name]: e.target.value })
  }

  const handleSubmitResponse = async () => {
    if (!responseForm.price || !responseForm.vehicleNo) {
      toast.warning("Price and vehicle number are required.")
      return
    }

    const formData = new FormData()
    formData.append("price", responseForm.price)
    formData.append("vehicleNumber", responseForm.vehicleNo)

    if (responseForm.attachments.length > 0) {
      formData.append("file", responseForm.attachments[0])
    }

    // console.log([...formData.entries()])
    setIsSubmitting(true)

    try {
      const res = await fetch(`${API.SUBMIT_QUOTATION}/${selectedTender._id}`, {
        method: "POST",
        body: formData,
        credentials: "include",
      })

      const result = await res.json()

      if (res.ok) {
        toast.success("Quotation submitted successfully!")

        setHistory((prev) => [
          ...prev,
          {
            rrName: selectedTender.rrName,
            price: responseForm.price,
            vehicleNo: responseForm.vehicleNo,
            attachments: result.data.files?.map((f) => f.originalName || f.url) || [],
            dispatchLocation: selectedTender.dispatchLocation,
            materials: selectedTender.materials.map((m) => ({
              item: m.material,
              subItem: m.subMaterial,
              weight: m.weight,
              quantity: m.quantity,
            })),
          },
        ])

        setShowModal(false)
        setResponseForm({ price: "", vehicleNo: "", attachments: [] })

        // Refresh tender list to reflect quotation
        await fetchTenders()

      } else {
        toast.error(result.message || "Failed to submit quotation.")
      }
    } catch (error) {
      console.error("Quotation Submit Error:", error)
      toast.error("An error occurred while submitting your quotation.")
    } finally {
      setIsSubmitting(false)
    }
  }

  // const handleClearHistory = () => {
  //   setConfirmDialog({
  //     message: "Are you sure you want to delete all history?",
  //     onConfirm: () => {
  //       setHistory([])
  //       toast.info("All history cleared.")
  //       setConfirmDialog(null)
  //     },
  //     onCancel: () => setConfirmDialog(null),
  //   })
  // }

  // const handleDeleteHistoryItem = (index) => {
  //   setConfirmDialog({
  //     message: "Delete this history entry?",
  //     onConfirm: () => {
  //       setHistory((prev) => prev.filter((_, idx) => idx !== index))
  //       toast.success("History entry deleted.")
  //       setConfirmDialog(null)
  //     },
  //     onCancel: () => setConfirmDialog(null),
  //   })
  // }

  const handleLogout = async () => {
    try {
      await axios.post(API.LOGOUT_USER, {}, { withCredentials: true })
      dispatch(logout())
      toast.success("Logged out successfully!")
    } catch (err) {
      console.error("Logout failed:", err)
      toast.error("Logout failed. Please try again.")
    } finally {
      navigate("/signin")
    }
  }


  const handleToggleView = async () => {
    if (!view) {
      // Switching to history view
      setHistoryLoading(true)
      setHistoryError(null)
      try {
        await fetchTransporters()
        const res = await axios.get(API.HISTORY_FOR_QUOTATION_QUOTE, {
          withCredentials: true,
          headers: {
            "Content-Type": "application/json",
          },
        })

        // console.log("History response:", res.data)

        const enriched = res.data.data.map((entry) => {
          return {
            ...entry,
            transporterName: transporterMap[entry.tenderId] || "Unknown Transporter",
          }
        })

        setHistory(enriched)
      } catch (err) {
        console.error("Failed to load history:", err)
        if (err.response) {
          console.error("Server responded with:", err.response.status, err.response.data)
        } else if (err.request) {
          console.error("No response received:", err.request)
        }
        setHistoryError("Failed to load submission history.")
      } finally {
        setHistoryLoading(false)
      }
    }
    setView((prev) => !prev)
  }

  const navbarActions = (
    <button
      onClick={handleToggleView}
      className="px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 transition-colors duration-200 flex items-center gap-2 shadow-sm"
    >
      {view ? (
        <>
          <Package className="h-4 w-4" /> Back to Dashboard
        </>
      ) : (
        <>
          <Clock className="h-4 w-4" /> View History
        </>
      )}
    </button>
  )

  const formatDate = (dateString) => {
    if (!dateString) return "N/A"
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

  return (
    <div className="min-h-screen bg-slate-200">
      <Navbar
        title="Transporter Dashboard"
        userName={userName || "Transport User"}
        actions={navbarActions}
        onLogout={handleLogout}
      />

      <div className="py-8 px-4 max-w-6xl mx-auto">
        {loading ? (
          <div className="flex justify-center items-center h-64">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-500"></div>
          </div>
        ) : error ? (
          <div className="text-center p-8 bg-red-50 rounded-lg border border-red-200 text-red-600">
            <XCircle className="h-8 w-8 mx-auto mb-2" />
            {error}
          </div>
        ) : view ? (
          historyLoading ? (
            <div className="flex justify-center items-center h-64">
              <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-500"></div>
            </div>
          ) : historyError ? (
            <div className="text-center p-8 bg-red-50 rounded-lg border border-red-200 text-red-600">
              <XCircle className="h-8 w-8 mx-auto mb-2" />
              {historyError}
            </div>
          ) : history.length > 0 ? (
            <div className="mb-10">
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-2xl font-bold text-teal-700 flex items-center gap-2">
                  <FileText className="h-6 w-6 text-teal-600" />
                  Submission History
                </h3>

                {/* <button
                  onClick={handleClearHistory}
                  className=" bg-red-100 flex items-center gap-2 px-4 py-2 text-red-600 border border-red-300 rounded-md hover:bg-red-500 hover:text-white transition-colors duration-200">
                  <XCircle className="h-4 w-4" />
                  Clear All
                </button> */}

              </div>
              <div className="grid gap-6">
                {history.map((entry, idx) => (
                  <div
                    key={entry._id || idx}
                    className="relative bg-white border border-slate-200 rounded-xl shadow-sm p-6 transition-all duration-200 hover:shadow-md"
                  >
                    {/* Delete Button */}
                    {/* <button
                      onClick={() => handleDeleteHistoryItem(idx)}
                      className="absolute top-4 right-4 text-slate-400 hover:text-red-500 transition-colors duration-200"
                      title="Delete Entry">
                      <XCircle className="h-5 w-5" />
                    </button> */}

                    {/* Header with status badge */}
                    <div className="mb-4 pb-4 border-b border-slate-100 ">
                      <div className="flex flex-wrap items-start justify-between gap-2">
                        <h4 className="text-lg font-semibold text-slate-800">Quotation #{idx + 1}</h4>
                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-teal-100 text-teal-800">
                          Submitted
                        </span>
                      </div>
                    </div>

                    {/* Tender Info Grid */}
                    <div className="grid sm:grid-cols-2 gap-4 text-sm">
                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <Home className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">RR User</p>
                          <p className="font-medium text-slate-800">{entry.tender?.createdBy?.name || "Unknown"}</p>
                          <p className="text-xs text-slate-500">
                            {entry.tender?.createdBy?.email || "Email not available"}
                          </p>
                        </div>
                      </div>

                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <Calendar className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">Delivery Window</p>
                          <p className="font-medium text-slate-800">
                            {entry.tender?.deliveryWindow?.from && entry.tender?.deliveryWindow?.to
                              ? `${formatDate(entry.tender.deliveryWindow.from)} to ${formatDate(entry.tender.deliveryWindow.to)}`
                              : "N/A"}
                          </p>
                        </div>
                      </div>

                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <Clock className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">Closing Date</p>
                          <p className="font-medium text-slate-800">{formatDate(entry.tender?.closeDate)}</p>
                        </div>
                      </div>

                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <Clock className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">Submitted On</p>
                          <p className="font-medium text-slate-800">
                            {new Date(entry.createdAt).toLocaleString("en-US", {
                              year: "numeric",
                              month: "long",
                              day: "numeric",
                              hour: "2-digit",
                              minute: "2-digit",
                              hour12: true,
                            })}
                          </p>
                        </div>
                      </div>

                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <MapPin className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">Location</p>
                          <p className="font-medium text-slate-800">{entry.tender?.dispatchLocation || "N/A"}</p>
                          <p className="text-xs text-slate-500">
                            {entry.tender?.address ? `${entry.tender.address}, ` : ""}
                            {entry.tender?.pincode || ""}
                          </p>
                        </div>
                      </div>

                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <Truck className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">Vehicle Number</p>
                          <p className="font-medium text-slate-800">{entry.vehicleNumber}</p>
                        </div>
                      </div>

                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <DollarSign className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">Price</p>
                          <p className="font-medium text-slate-800">₹ {entry.price}</p>
                        </div>
                      </div>

                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <Package className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">Total Weight</p>
                          <p className="font-medium text-slate-800">{entry.tender?.totalWeight ?? "N/A"} kg</p>
                        </div>
                      </div>

                      <div className="flex items-start gap-2">
                        <span className="text-slate-500 mt-0.5">
                          <Package className="h-4 w-4" />
                        </span>
                        <div>
                          <p className="text-slate-500">Total Quantity</p>
                          <p className="font-medium text-slate-800">{entry.tender?.totalQuantity ?? "N/A"} pcs</p>
                        </div>
                      </div>
                    </div>

                    {/* Remarks */}
                    {entry.tender?.remarks && (
                      <div className="mt-4 bg-amber-50 border border-amber-100 rounded-lg p-3 text-sm">
                        <div className="flex gap-2">
                          <FileText className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
                          <div>
                            <span className="font-medium text-amber-800">Remarks:</span> {entry.tender.remarks}
                          </div>
                        </div>
                      </div>
                    )}

                    {/* Materials List */}
                    {entry.tender?.materials?.length > 0 && (
                      <div className="mt-4 bg-slate-50 border border-slate-200 rounded-lg p-4">
                        <h4 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-2">
                          <Tool className="h-4 w-4 text-slate-600" /> Materials
                        </h4>
                        <div className="overflow-x-auto">
                          <table className="w-full text-sm">
                            <thead>
                              <tr className="bg-slate-100 text-slate-600">
                                <th className="px-3 py-2 text-left">Material</th>
                                <th className="px-3 py-2 text-left">Sub Item</th>
                                <th className="px-3 py-2 text-right">Weight (Kg)</th>
                                <th className="px-3 py-2 text-right">Quantity</th>
                              </tr>
                            </thead>
                            <tbody>
                              {entry.tender.materials.map((m, i) => (
                                <tr key={m._id || i} className="border-t border-slate-200">
                                  <td className="px-3 py-2 font-medium">{m.material}</td>
                                  <td className="px-3 py-2">{m.subMaterial || "-"}</td>
                                  <td className="px-3 py-2 text-right">{m.weight || "-"}</td>
                                  <td className="px-3 py-2 text-right">{m.quantity || "-"}</td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      </div>
                    )}

                    {/* Attachments */}
                    <div className="mt-4">
                      <h4 className="text-sm font-semibold text-slate-800 mb-2 flex items-center gap-2">
                        <FileUp className="h-4 w-4 text-slate-600" /> Attachments
                      </h4>
                      {entry.files?.length > 0 ? (
                        <div className="flex flex-wrap gap-2">
                          {entry.files.map((f, i) => {
                            const label = f.originalName || f.name || `File ${i + 1}`
                            const fileUrl = f.url || f

                            return (
                              <a
                                key={i}
                                href={fileUrl}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-md hover:bg-slate-200 transition-colors duration-200 text-sm"
                              >
                                <FileText className="h-3.5 w-3.5" />
                                {label}
                              </a>
                            )
                          })}
                        </div>
                      ) : (
                        <p className="text-slate-500 text-sm">No attachments</p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center h-64 bg-white rounded-xl border border-slate-200 p-8">
              <FileText className="h-12 w-12 text-slate-300 mb-4" />
              <p className="text-slate-500 text-lg">No submission history available</p>
              <button
                onClick={handleToggleView}
                className="mt-4 px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 transition-colors duration-200"
              >
                Return to Dashboard
              </button>
            </div>
          )
        ) : tenders.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-64 bg-white rounded-xl border border-slate-200 p-8">
            <Package className="h-12 w-12 text-slate-300 mb-4" />
            <p className="text-slate-500 text-lg">No pending tenders available</p>
          </div>
        ) : (
          <>
            <h1 className="text-2xl font-bold text-teal-700 mb-6 flex items-center gap-2">
              <Package className="h-6 w-6" />
              Available Tenders
            </h1>

            <div className="space-y-8">
              {tenders.map((tender) => (
                <div
                  key={tender._id}
                  className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 transition-all duration-200 hover:shadow-md"
                >
                  {/* Header */}
                  <div className="flex flex-wrap justify-between items-start gap-4 pb-4 border-b border-slate-100 mb-4">
                    <div>
                      <h3 className="text-xl font-bold text-slate-800 mb-1">
                        Tender from {tender.createdBy?.name || "Unknown RR User"}
                      </h3>
                      <p className="text-sm text-slate-500">{tender.createdBy?.email || "Email not available"}</p>
                    </div>

                    {/* <div className="flex items-center gap-2">
                      <span className="text-xs font-medium px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800">
                        Pending Response
                      </span>
                    </div> */}

                    <div className="flex items-center gap-2">
                      <span className={`text-xs font-medium px-2.5 py-0.5 rounded-full ${tender.hasUserQuoted ? "bg-green-100 text-green-800" : "bg-amber-100 text-amber-800"}`}>
                        {tender.hasUserQuoted ? "Quotation Submitted" : "Pending Response"}
                      </span>
                    </div>
                  </div>

                  {/* Info Grid */}
                  <div className="grid md:grid-cols-2 gap-4 mb-6">
                    <div className="flex items-start gap-3">
                      <div className="bg-teal-100 p-2 rounded-lg text-teal-600">
                        <Calendar className="h-5 w-5" />
                      </div>
                      <div>
                        <p className="text-sm text-slate-500">Delivery Window</p>
                        <p className="font-medium text-slate-800">
                          {tender.deliveryWindow?.from && tender.deliveryWindow?.to
                            ? `${formatDate(tender.deliveryWindow.from)} to ${formatDate(tender.deliveryWindow.to)}`
                            : "N/A"}
                        </p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3">
                      <div className="bg-purple-100 p-2 rounded-lg text-purple-600">
                        <Clock className="h-5 w-5" />
                      </div>
                      <div>
                        <p className="text-sm text-slate-500">Closing Date</p>
                        <p className="font-medium text-slate-800">{formatDate(tender?.closeDate)}</p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3">
                      <div className="bg-rose-100 p-2 rounded-lg text-rose-600">
                        <MapPin className="h-5 w-5" />
                      </div>
                      <div>
                        <p className="text-sm text-slate-500">Location</p>
                        <p className="font-medium text-slate-800">{tender.dispatchLocation || "N/A"}</p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3">
                      <div className="bg-sky-100 p-2 rounded-lg text-sky-600">
                        <Home className="h-5 w-5" />
                      </div>
                      <div>
                        <p className="text-sm text-slate-500">Address</p>
                        <p className="font-medium text-slate-800">
                          {tender.address || "N/A"}
                          {tender.pincode ? `, ${tender.pincode}` : ""}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Materials Table */}
                  <div className="bg-slate-50 rounded-lg p-4 mb-6">
                    <h4 className="font-semibold mb-3 text-slate-700 flex items-center gap-2">
                      <Tool className="h-5 w-5 text-slate-600" /> Materials
                    </h4>
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="bg-slate-100 text-slate-600">
                            <th className="px-4 py-2 text-left rounded-l-md">Material</th>
                            <th className="px-4 py-2 text-left">Sub Item</th>
                            <th className="px-4 py-2 text-right">Weight (Kg)</th>
                            <th className="px-4 py-2 text-right rounded-r-md">Quantity</th>
                          </tr>
                        </thead>
                        <tbody>
                          {tender.materials.map((m, index) => (
                            <tr
                              key={m._id}
                              className={`${index % 2 === 0 ? "bg-white" : "bg-slate-50"} hover:bg-slate-100 transition-colors duration-150`}
                            >
                              <td className="px-4 py-2 font-medium">{m.material}</td>
                              <td className="px-4 py-2">{m.subMaterial || "-"}</td>
                              <td className="px-4 py-2 text-right">{m.weight || "-"}</td>
                              <td className="px-4 py-2 text-right">{m.quantity || "-"}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>

                  {/* Summary Stats */}
                  <div className="flex flex-wrap gap-4 mb-4">
                    <div className="bg-teal-50 border border-teal-100 px-4 py-2 rounded-lg">
                      <span className="text-slate-600 text-sm">Total Weight: </span>
                      <span className="text-teal-700 font-semibold">{tender?.totalWeight ?? "N/A"} kg</span>
                    </div>
                    <div className="bg-teal-50 border border-teal-100 px-4 py-2 rounded-lg">
                      <span className="text-slate-600 text-sm">Total Quantity: </span>
                      <span className="text-teal-700 font-semibold">{tender?.totalQuantity ?? "N/A"} pcs</span>
                    </div>
                  </div>

                  {/* Remarks */}
                  {tender.remarks && (
                    <div className="mb-6 bg-amber-50 border border-amber-100 rounded-lg p-3 text-sm">
                      <div className="flex gap-2">
                        <FileText className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
                        <div>
                          <span className="font-medium text-amber-800">Remarks:</span> {tender.remarks}
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Action Buttons */}
                  {tender.hasUserQuoted ? (
                    <div className="flex justify-center mt-4 animate-fadeIn">
                      <div className="inline-flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-green-50 to-emerald-50 text-emerald-700 font-medium text-sm border border-emerald-200 rounded-lg shadow-sm">
                        <Award className="h-5 w-5 text-emerald-500" />
                        <span>Quotation Submitted</span>
                        <CheckCheck className="h-5 w-5 text-emerald-500 ml-1" />
                      </div>
                    </div>
                  ) : (
                    <div className="flex flex-col sm:flex-row gap-3 justify-center mt-6">
                      {/* <button
                        onClick={() => handleReject(tender._id)}
                        className="bg-white border border-slate-300 text-slate-700 px-6 py-2.5 rounded-lg hover:bg-slate-50 transition-all duration-200 flex items-center justify-center gap-2 shadow-sm hover:shadow"
                      >
                        <XCircle className="h-5 w-5 text-red-500" />
                        <span>Reject</span>
                      </button> */}

                      <button
                        onClick={() => handleApprove(tender)}
                        className="bg-gradient-to-r from-teal-600 to-emerald-600 text-white px-6 py-2.5 rounded-lg hover:from-teal-700 hover:to-emerald-700 transition-all duration-200 flex items-center justify-center gap-2 shadow-sm hover:shadow"
                      >
                        <CheckCircle className="h-5 w-5" />
                        <span>Approve</span>
                      </button>
                    </div>
                  )}

                </div>
              ))}
            </div>
          </>
        )}
      </div>

      {/* Quotation Modal */}
      {showModal && selectedTender && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <h3 className="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2">
              <FileText className="h-5 w-5 text-teal-600" />
              Submit Quotation
            </h3>
            <div className="space-y-5">
              <div>
                <label className="block font-medium mb-1.5 text-sm text-slate-700">Price (₹)</label>
                <input
                  name="price"
                  value={responseForm.price}
                  onChange={handleResponseChange}
                  type="number"
                  placeholder="Enter your price"
                  className="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
                  required
                />
              </div>
              <div>
                <label className="block font-medium mb-1.5 text-sm text-slate-700">Vehicle Details</label>
                <input
                  name="vehicleNo"
                  value={responseForm.vehicleNo}
                  onChange={handleResponseChange}
                  type="text"
                  placeholder="Enter vehicle details"
                  className="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
                  required
                />
              </div>
              <div>
                <label className="block font-medium mb-1.5 text-sm text-slate-700">Attachments</label>
                <div className="border border-dashed border-slate-300 rounded-lg p-4 bg-slate-50">
                  <input
                    type="file"
                    accept=".jpg,.jpeg,image/jpeg"
                    onChange={handleFileChange}
                    className="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100"
                  />
                  <p className="text-xs text-slate-500 mt-2">
                    Only upload <strong>.jpg</strong> or <strong>.jpeg</strong> files
                  </p>

                </div>
              </div>
            </div>
            <div className="flex flex-col sm:flex-row sm:justify-end gap-3 mt-8">
              <button
                onClick={() => setShowModal(false)}
                className="px-5 py-2.5 border border-slate-300 rounded-lg text-sm text-slate-700 hover:bg-slate-50 transition-colors duration-200 order-2 sm:order-1"
              >
                Cancel
              </button>
              <button
                onClick={handleSubmitResponse}
                className="px-5 py-2.5 bg-teal-600 text-white rounded-lg text-sm hover:bg-teal-700 transition-colors duration-200 order-1 sm:order-2 flex items-center justify-center"
                disabled={isSubmitting}
              >
                {isSubmitting ? (
                  <>
                    <svg
                      className="animate-spin h-4 w-4 text-white mr-2"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                    </svg>
                    Submitting...
                  </>
                ) : (
                  "Submit Quotation"
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Confirmation Modal */}
      {confirmDialog && (
        <ConfirmationModal
          message={confirmDialog.message}
          onConfirm={confirmDialog.onConfirm}
          onCancel={confirmDialog.onCancel}
        />
      )}
    </div>
  )
}

export default TransporterDashboardPage

<h1>hello</h1>

CREATE TABLE Hastalar (
    PatientID INT PRIMARY KEY AUTO_INCREMENT,
    Ad VARCHAR(50) NOT NULL,
    Soyad VARCHAR(50) NOT NULL,
    TCKN CHAR(11) UNIQUE NOT NULL,
    DogumTarihi DATE NOT NULL,
    Cinsiyet ENUM('Erkek', 'Kadın', 'Diğer') NOT NULL,
    Telefon VARCHAR(20),
    Eposta VARCHAR(100),
    Adres TEXT,
    Boy DECIMAL(5,2),
    Kilo DECIMAL(5,2),
    SigortaTuru ENUM('SGK', 'Özel', 'Yok'),
    Alerjiler TEXT,
    KronikHastaliklar TEXT,
    KanGrubu ENUM('A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-')
);

ollama pull llama3.2
echo "FROM llama3.2" >> Modelfile
echo "SYSTEM You are a friendly assistant." >> Modelfile
ollama create -f Modelfile killrkingz/brandonjessup
ollama push killrkingz/brandonjessup

{
	"blocks": [
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": ":cute-sun: Boost Days - What's On This Week :cute-sun:"
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": "Xero Café :coffee:",
				"emoji": true
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "\n :new-thing: *This week we are offering:* \n\n :caramel-slice: Anzac Slices  \n\n :cheesecake: Raspberry and White Choc cheesecake  \n\n *Weekly Café Special:* _Iced Matcha Latte_"
			}
		},
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": " Wednesday, 23rd April :calendar-date-16:",
				"emoji": true
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "  \n\n \n\n :lunch: *Light Lunch*: Provided by Kartel Catering from *12pm* \n\n"
			}
		},
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": "Thursday, 24th April :calendar-date-17:",
				"emoji": true
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": ":breakfast: *Breakfast*: Provided by *Kartel Catering* from *8:30am - 10:30am* in the Wominjeka Breakout Space."
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "Stay tuned for more fun throughout the year. :party-wx:"
			}
		}
	]
}

input.Add_notes _field = "<style>input.zc-live-primary-btn { display: none;}</style>";

Teamwork Communications Group is the one-stop destination for all brands who seek to be at the forefront of the news and want to increase their presence among the right target audience. We are the Best PR Firm in India purveying brands to build a hero position in the market using effective communication strategies, including Digital and Influencer marketing.

End-to-end solutions for P2E Game Development can help your business generate new revenue streams.  We are the top Play-to-Earn Game development Company, providing outstanding P2E game development services.  Hire Play-to-Earn game developers to make your gaming concepts a reality.  Attract players and investors with an advanced gaming platform that is built for long-term growth and success.

https://chatgpt.com/share/67fea1e0-4fe0-800f-bdd8-9a39c7ea02d9

OTT Influence is the best influencer marketing agency in Delhi, offering impeccable services that connect your brand with the right influencers. At OTT, we unite brands with top micro-influencers, ensuring maximum engagement.

{"url":"https://chatgpt.com","cookies":[{"domain":"chatgpt.com","hostOnly":true,"httpOnly":true,"name":"__Host-next-auth.csrf-token","path":"/","sameSite":"lax","secure":true,"session":true,"storeId":"0","value":"337eca6f64d51ab44e96ad2d730a6cf61bb4dd6a187648fb95eff5251758c62a%7C34fa57fcbc4a093c97c166ee58c7514903c45ebb9d0c77871c193edded99daf9"},{"domain":".chatgpt.com","expirationDate":1775794870.919494,"hostOnly":false,"httpOnly":false,"name":"oai-did","path":"/","sameSite":"lax","secure":false,"session":false,"storeId":"0","value":"ad550994-b717-475c-a09d-8e4cbc3a47a8"},{"domain":".chatgpt.com","hostOnly":false,"httpOnly":true,"name":"_cfuvid","path":"/","sameSite":"no_restriction","secure":true,"session":true,"storeId":"0","value":".ZCzOJ0HNEjbK91wVle70wP3trWE7YHKqSZdgLdAVa8-1744690871171-0.0.1.1-604800000"},{"domain":"chatgpt.com","hostOnly":true,"httpOnly":true,"name":"__Secure-next-auth.callback-url","path":"/","sameSite":"lax","secure":true,"session":true,"storeId":"0","value":"https%3A%2F%2Fchatgpt.com%2F"},{"domain":"chatgpt.com","expirationDate":1775794891.241609,"hostOnly":true,"httpOnly":false,"name":"oai-hlib","path":"/","sameSite":"lax","secure":false,"session":false,"storeId":"0","value":"true"},{"domain":"chatgpt.com","expirationDate":1747282965.209637,"hostOnly":true,"httpOnly":false,"name":"oai-last-model","path":"/","sameSite":"lax","secure":false,"session":false,"storeId":"0","value":"gpt-4o"},{"domain":".chatgpt.com","expirationDate":1744704853.116044,"hostOnly":false,"httpOnly":true,"name":"__cf_bm","path":"/","sameSite":"no_restriction","secure":true,"session":false,"storeId":"0","value":"eidvaDKwtbwpzrq_NJH.8ywhU.vVijHaVFGQRkyUhYw-1744703053-1.0.1.1-NefiTbmmfXv_8q2sul4dkkP3RmK4ktDE75ulFGxiMUWqBl50y5jKFL4HqwjaW6GviS6GboCbabSNFqhF.Ho0agHhTLkzPcIIpHLlcgDKpbw"},{"domain":"chatgpt.com","expirationDate":1744706653.116104,"hostOnly":true,"httpOnly":true,"name":"__cflb","path":"/","sameSite":"no_restriction","secure":true,"session":false,"storeId":"0","value":"0H28vzvP5FJafnkHxiseZX82KGkF3aDneuym4DsnykP"},{"domain":".chatgpt.com","expirationDate":1752479110.805003,"hostOnly":false,"httpOnly":true,"name":"__Secure-next-auth.session-token.0","path":"/","sameSite":"lax","secure":true,"session":false,"storeId":"0","value":"eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..cU2BC9TN0Dtu249y.rG4LXkHvBtSWg4fahhqUwcT3c2vSEXF9UNjhpEkjKbsaSt_olRyQSrjF3SWLvFtrJYHaOYmNX8qutYWtnIrhy6uUda5M4L8SkOVqwDaLnfMsdxtkmrDuiHaIrW49fR65USLZeZKZe_gIJNkHmUwgNcmNSXU9CONzlCKiG5khNZIZh185QDXk6oidVbXleDTmtmG1KmXTPg1v6hAen1zS8rtCxrCyNwVteWrSczvVJVmZwaPPm_atnmCIVqQ5h6OLSR30y96NemRTLjl8jfXKtd09MXF7a1XSSg5q2sn3DFYu1Wse4FJzoc37TEAhsC_GnOmY3MXHubHdVCHwlxlrrIjG8adaztLNZNhBSjTp0UBfvMgl1lAaXUgYLdyX3pPLTpN43SfUqFv7hgJnsyiFXe5ze_3SecoxURBw7uZU2g0uqh5tdn0_TMg3vJwaJZ3iUMP_63HkKRwhe0mq02f22vkuGuet2P_i5SzjHTsTTKdVliR-_TW_Gel4bTl2eAw6rm5tXjfo0-D1FfHvivcADNzCJCLrVeIC1p6NV3Sr70Rhj_ip0s_r3aN9NOxLwYt9aEhcpZPS4joyRgddFWLyQcXHqZr-45pAJ-LMR0crL5-wTTCtnluxGCV_HksvSGcDceR4xVIWIMbk5yr1xSPAx7cHKDHDZcj-VJR2cIGfo5-94yvYTR9HynKURkT9ZMR6EjcE9I8fSlwQlpeEipR-ZefKmKA40NcRM5phTYtOwfNHt9TWJSZZ2-beaxViD6ui6JMWINr4Nk8my0WoIx3NIIQNGQqu2yvu3lyTUknvQNhtNT4I6fxTjKFAlstjM0NH-6uhOwUzjos3ze0qx8O3-OB_yVWybla9yaWyZcyozw6lYdWeqww0jlIjtOPAeNUYJ7z8iIiBy6h6ehNrAdA7SWg1BT1SgqeZxQsqWMc5EaEQwEJ_nQNcyh-1zr8H3Jt25evMKbq23_e0K11RmpwOKULlRzDyBq5KaAU_EDSTWLX0FSWPv6bpCJtC3ycanXqy6HiXOy9dKgqxDjRJCRcD-PWEoyN8N1uJuW1ZPdSH1pjERKabHWwP-toE5O6SyNRy46wOZmELCi83ltsq2To0qC2QbIiThJ5mJG3KOgijIQywqkcxGtvNLEAYx05TfsTlBdkJDDrkFSv3zaUc_eLniwK2hXsdivYZpE7sAVqLp9ooK-PDRllD-ISzKEwY2_EJJEvzjWy3ovzSrSQhgnpwnzK8TNrV9AqEV4sWPwhvvOx1giuUV2v4ApCPveWMsJqQfT4rVdJ2oGX-QY66XFKm1Hkyc6hbR_3_0HMMbFJHECm5lEXLW0OkkHkHPKv0W80x9jf0OI0F29LP4MMil4ZcsZdXFLOLClm_dHALOY_Q5b3cOTp6fvvmIJ_unuD5_4DPHcVLJ5pyCjnM5r-pefkxsdaJKtBKvKa2MJNKj1T0I4jwfz1eKxIvcpngNosXijlMRlcqafyKrYinILUPXuGNNDG5hxkRtjI-H4QZlDl9SY0hrcaT92E3Tc3RPabuOSB4w0LzKAiocnDh12aj7gZAAhuF1iJeG9J48p5yQaJ76P5V9mB9UyjdPd9GNMg0ylhdwXzOAe-w4kg6bLDuQGWWYs80MbBj33ATipGTOPpxJCB242PxXeWFweIGMQwtUwQQG__ubdV9FSwPp2vk2kaUzCi_NIoPTGZjhLuzLQ-J_xQ-BckrGsd7RozTQZhbitwwiBUKFxCgsLsVkV7UqR2DFzgGrx7vP2X33gQlkr0KK72RZvJLeCwr7VI0tzMYuc8w71bEgDrVktc_HRdPV9j-_NFbC6_Dw_YIHjsovqtE0-9Ctbr5EuQIWggjZEYmtgJbWiyJfAx9WkmAcv4ygqawTOJnBk5xsb_MRREICDJ47LtetFdTVIYVuChk8eta7fXKRA8AGUxUCt6KXruYE2mOUAYnmU_0oC0sZ9mcSLkHvINRA7r4-A496sqw9spYDZrpq7T3vuwD-Cg-HqYZM4VLDxtbRfmFbA6CrmCrIIESu_2Vb_kgbJlyCJne9MGi5j8tftvIFNwqZKFpOpmrahOaXepyNGuqX9arphh2OOWvhA6tpS6p-E1Xrvc5c1LnJzYtykSpCL48JBxX-ZjzUK8j2hEDgFmyL5zsV8AoKhNY5hZy-zy3lWRJnTaAq_zsbYFq7ZbckkLTyz8OfC_xGYBsv2chcoa4MuqySx_QaQi8spZbwe2ccKBKny8NcFQKA_bXkBPohCCntgpeY-mjWfQyps_voDzcZH197GDjTsklO430f7iyGBX5-CDCO6dLRI2RsA8e-TqQYpwtPKf_2kaFPBFVd6ViyP4Xa5f6P5g5awOA1EQpVA54uG1TUY9yDvgAeZIRJX-U8mI65y9BTpyXtp4518o5pSIevSDW0wbveRVcQHHJ5w_oSlAdVRtZnnHs_I-H3M1mmxvWhoAnXlgKbZZeHayoDjMTw_1em83gRjbtqjA0fvLyPDWwdXTjBuF8d9oDaJMIaPZz3TRmB5tpfGbkwbJj_adIsiRUiOy7GieT6tnNn9kavDUHfpJQFSGOkRtFYEIwAuIZz2fYkoGLQGDA5gUJbWAUOpoic2Ys5SPHTAcaoafA8rBgAhzNQv9Y1n8HNoGA53PJbxxBNECDq0atAySkpEc-SJ4_EMMd0LfCC9Y1vab15Wn7Fi08avINRS3QmsSIYb5aYsu1JDYWUWWmh8TY_PV-5VrPw8tBdh6RkauSfIr_NOV5r9clI3VnSJ4W_uCuFHvhg0wEZKmqyBvITUMxQ4ynYT_ofbbBw1K38NxhyFjHwXs0KIOBi9GrFpr6G-hbWVPcAcJIAe6ZbggjzpIFkJBMeCWeIDT6cukj9RD-ayxqMYqENB9Ub-ermwxl4RgMrq3ElOrVAPOQBON2ioS9AacrOvYbljvzfOuq5B-dphJoiTbDmdFPQjO73Nrry3yQ1NedYaCemKjgg0KWiP0UJuc8zk1UJ9AcU7m5NTgf2MWIsiz_YUrW7bt8JQPEPYysjdQaARoi_CSajd1lr8ZCedg-4anc-lmItm1COXTd7sc7Gp9OarBiDf25WwE6Uy5eVRKTCjubrF_zC_-_tNDd7Incyea0I28mRq29OcCGriRgHGx12vmVih73Wr1rA8aCXRjk_-du8u52iKwyxAvvCnvl1La3pIN4OdXQPsPBr62aWqCu-Qbgh6fH4i8u8C0aPxATNKmY_8jM19SA9ijjhXSMtZO_mheuIpseWlgCRyWd0Z7LqwAhoTzKGAken9C2kiU7LDeI4Y-6j2pKMzTqSr741YHfSQotvPLlAqjXQbnY9LjlPyhEJqPoPEqM_Zhv_6DcGc49cRL-pt3fJi_1CnxeMD2LETwIdUTydRCzInieGkuhe9M0Py70Olpgp-GDevwOk5R9zJ4nZ_vmk60vQw5skPMP_X63Gaed2A0tOZcYc0dS9uHrDmlFbj5nPHlKKwDN8FbF7ziY4Dxgb59e718lqqc9bVsBQQ7XfOyAKOXnKnIWDFr_zPkKzObfp_hNeledKWZ0SA51rM5997HOn7ZoRYPU2HMAJEiw61Ej041sNOjOFRTAYhTWVOiS4cE4podDnVCudb4w4e_y1SFhLMxZnlXlXoN3laX5D075SojQVosjMFvfawSOcSlcwjE8H1Nh1xxkjU7Rz8y94rvIExdYA5VuSxWOSTnlEVlbW6te8VmCOODTuPaAMxLDxz7gXWXyEfD_j_EkKewWYS4iMo_I1r-t7my3mVL0_ICl_hVx9vJCVQEkUyHlvUZiI3g0jaFFwP0t-25y-DrOKD-Punmfs2dDKswkT2CanOakdMg2YPmWlHp7GdyWzmGybcLQSmXzTfzHWFcRcVsPztWT0a4Ri1F"},{"domain":".chatgpt.com","expirationDate":1752479110.805117,"hostOnly":false,"httpOnly":true,"name":"__Secure-next-auth.session-token.1","path":"/","sameSite":"lax","secure":true,"session":false,"storeId":"0","value":"FyHQcqvoTNXJwcRpDCiAxOivNJHhKzUuJq7OPbwHeA5EV9_-oOZI.e0eSUVNVgSgRgO_krXyEBQ"},{"domain":".chatgpt.com","expirationDate":1776239111.913607,"hostOnly":false,"httpOnly":false,"name":"oai-sc","path":"/","sameSite":"no_restriction","secure":true,"session":false,"storeId":"0","value":"0gAAAAABn_g6IWjRIPM9d6fSX7kRgWouvExGNs0ZXM1kDFqkpYADsRc8PrPkClyZvrocUX4epOylI33QJh0ad5feClHpwcch9mKwFoYc-ShpD6crmCtPqpuhViq2UNSxHSVOQw2OxG-JZc0z3zvSkYBA7_qCmOzXNYIjT59MZRdpONZy_qIBJf6Uy_hYk-9SK6-2G9JXhrwndE8kkMRcNQgCcACup7Xr0RpgDHLiXQxUqeYd3zmV7tLA"},{"domain":"chatgpt.com","expirationDate":1744704104,"hostOnly":true,"httpOnly":false,"name":"_dd_s","path":"/","sameSite":"strict","secure":false,"session":false,"storeId":"0","value":"rum=0&expire=1744704100422&logs=1&id=d172268d-bb48-438e-84a1-df230e44e25b&created=1744699886272"}]}

void htmlParserFrom()
{
deal_description = "<p><img src=\"https://media.sunhub.com/pictures/item/image_2a8b93a2.jpg\" alt=\"Hyundai Logo\"></p><h2><strong>Hyundai 405W 132 Half Cell BoB Bifacial Solar Panel</strong></h2><p>As a core energy business entity of HHI, Hyundai Energy Solutions has strong pride in providing high-quality PV products to more than 3,000 customers worldwide.</p><p> </p><h3><strong>Key Features:</strong></h3><ul><li>Maximized Power Generation</li><li>Half-Cut & Multi-Wire Technology</li><li>Anti-LID / PID</li><li>Mechanical Strength</li><li>UL / VDE Test Labs</li><li>Reliable Warranty</li></ul><h3><strong>Products Details:</strong></h3><ul><li>Manufacturing Part number: HIS-S405YH(BK)</li><li>Power Output: 405 Watt</li><li>Cells: 132 Half cut Bifacial cells</li><li>Weight: 46.51 lb</li><li>Dimensions: 75.74 x 40.86 x 1.26 in</li><li>Pallet Qty: 32 Pcs</li><li>Container Qty: 768 Pcs<br><br>Current Stock In: TX, NJ, FL, CA</li></ul>";
// Remove all HTML tags using replaceAll
clean_description = deal_description.replaceAll("<[^>]+>","");
info clean_description;
// This will show the text without HTML tags
}

1.put all these files and folders in a folder called task-manager(create one)

2.[[[[now open cmd in the task manager folder or set the path in cmd to the folder.

Hold Shift and right click on task-manager folder select open terminal or Open Command Window]]]]

3. once opened run these commands in cmd
npm init -y
npm install express mongoose jsonwebtoken bcryptjs cors
npm install dotenv

4. run this finally
  node server.js

if it doesnt work pray to god and leave the internal🙂


    
    

/**
2
 * Make Woodmart WooCommerce variation buttons appear with different styles based on stock status
3
 */
4
​
5
add_action('wp_head', 'add_woodmart_size_variation_css');
6
function add_woodmart_size_variation_css() {
7
    ?>
8
    <style>
9
        /* Available in stock - normal state with green border */
10
        .wd-swatch.wd-in-stock,
11
        div[data-id="pa_size"] .wd-swatch.wd-in-stock {
12
            border: 1px solid #294567 !important;
13
            background-color: #f9fff5 !important;
14
        }
15
        
16
        /* Out of stock but available for backorder - orange styling */
17
        .wd-swatch.wd-backorder,
18
        div[data-id="pa_size"] .wd-swatch.wd-backorder {
19
            background-color: #bbbbbb !important;
20
            border: 1px solid #bbbbbb !important;
21
        }
22
        
23
        .wd-swatch.wd-backorder .wd-swatch-text,
24
        div[data-id="pa_size"] .wd-swatch.wd-backorder .wd-swatch-text {
25
            color: #fff !important;
26
        }
27
        
28
        /* Out of stock and not available for backorder - gray styling */
29
        .wd-swatch.wd-disabled,
30
        div[data-id="pa_size"] .wd-swatch.wd-disabled {
31
            opacity: 0.5 !important;
32
            background-color: #f5f5f5 !important;
33
            border: 1px solid #d6d6d6 !important;
34
            cursor: not-allowed;
35
        }

const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const cors = require('cors');
const path = require('path');
const authRoutes = require('./routes/auth');
const taskRoutes = require('./routes/tasks');

dotenv.config(); 

const app = express();
const PORT = process.env.PORT || 5000;


app.use(express.json()); 
app.use(cors()); 




mongoose.connect(process.env.MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
  })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.error('MongoDB connection error:', err));
  

app.use('/api/auth', authRoutes);
app.use('/api/tasks', taskRoutes);


app.listen(process.env.PORT, () =>
    console.log(`Server running on port ${process.env.PORT}`)
  );
  

MONGO_URI=mongodb://127.0.0.1:27017/taskdb
JWT_SECRET=mysecretkey
PORT=5000

//auth.js

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');

const router = express.Router();

// Register
router.post('/register', async (req, res) => {
  const { name, email, password } = req.body;

  if (!name || !email || !password) {
    return res.status(400).json({ message: 'All fields are required' });
  }

  try {
    const existingUser = await User.findOne({ email });
    if (existingUser) {
      return res.status(400).json({ message: 'User already exists' });
    }

    const hashedPassword = await bcrypt.hash(password, 10);
    const newUser = new User({
      name,
      email,
      password: hashedPassword,
    });

    await newUser.save();

    res.status(201).json({ message: 'User registered successfully' });
  } catch (err) {
    console.error('Registration failed:', err);
    res.status(500).json({ message: 'Server error during registration' });
  }
});

// Login
router.post('/login', async (req, res) => {
  const { email, password } = req.body;

  try {
    const user = await User.findOne({ email });
    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const token = jwt.sign({ _id: user._id }, process.env.JWT_SECRET, {
      expiresIn: '1h'
    });

    res.json({ token });
  } catch (err) {
    console.error('Login failed:', err);
    res.status(500).json({ message: 'Server error during login' });
  }
});

module.exports = router;



//tasks.js

const express = require('express');
const TaskModel = require('../models/Task');
const authMiddleware = require('../middleware/authMiddleware'); // Authentication middleware
const router = express.Router();

// Apply authentication middleware to all routes in this file
router.use(authMiddleware);

// Create a new task
router.post('/create', async (req, res) => {
  const newTask = new TaskModel({
    ...req.body,
    assignedTo: req.user._id, // Assign the task to the authenticated user
  });
  try {
    await newTask.save();
    res.status(201).json(newTask); // Send the created task as response
  } catch (err) {
    res.status(500).json({ error: 'Error creating task' });
  }
});

// Get all tasks for the logged-in user
router.get('/all', async (req, res) => {
  try {
    const userTasks = await TaskModel.find({ assignedTo: req.user._id });
    res.status(200).json(userTasks);
  } catch (err) {
    res.status(500).json({ error: 'Error fetching tasks' });
  }
});

// Get a specific task by ID
router.get('/single/:taskId', async (req, res) => {
  try {
    const task = await TaskModel.findOne({ _id: req.params.taskId, assignedTo: req.user._id });
    if (!task) return res.status(404).json({ error: 'Task not found' });
    res.status(200).json(task);
  } catch (err) {
    res.status(500).json({ error: 'Error fetching task' });
  }
});

// Update a specific task
router.put('/update/:taskId', async (req, res) => {
  try {
    const updatedTask = await TaskModel.findOneAndUpdate(
      { _id: req.params.taskId, assignedTo: req.user._id },
      req.body,
      { new: true }
    );
    if (!updatedTask) return res.status(404).json({ error: 'Task not found' });
    res.status(200).json(updatedTask);
  } catch (err) {
    res.status(500).json({ error: 'Error updating task' });
  }
});

// Delete a task
router.delete('/delete/:taskId', async (req, res) => {
  try {
    const deletedTask = await TaskModel.findOneAndDelete({ _id: req.params.taskId, assignedTo: req.user._id });
    if (!deletedTask) return res.status(404).json({ error: 'Task not found' });
    res.status(200).json({ message: 'Task Deleted' });
  } catch (err) {
    res.status(500).json({ error: 'Error deleting task' });
  }
});

module.exports = router;

//index.html
<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
</head>
<body>
  <h2>Login</h2>
  <input id="email" placeholder="Email" required><br>
  <input id="password" type="password" placeholder="Password" required><br>
  <button onclick="login()">Login</button>
  <p>No account? <a href="register.html">Register here</a></p>

  <script>
    const API = 'http://localhost:5000/api/auth';

    async function login() {
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;

      if (!email || !password) {
        alert("Please fill in all fields");
        return;
      }

      try {
        const res = await fetch(`${API}/login`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password })
        });

        const data = await res.json();

        if (res.ok) {
          localStorage.setItem('token', data.token);
          alert('Login successful!');
          window.location.href = 'tasks.html';
        } else {
          alert(data.message || 'Login failed');
        }
      } catch (err) {
        console.error('Login error:', err);
        alert('Something went wrong. Please try again.');
      }
    }
  </script>
</body>
</html>


//register.html
<!DOCTYPE html>
<html>
<head>
  <title>Register</title>
</head>
<body>
  <h2>Register</h2>
  <input id="name" placeholder="Full Name" required><br>
  <input id="email" placeholder="Email" required><br>
  <input id="password" type="password" placeholder="Password" required><br>
  <button id="registerBtn">Register</button>
  <p>Already have an account? <a href="index.html">Login here</a></p>

  <script>
    const API = 'http://localhost:5000/api/auth';

    document.getElementById('registerBtn').addEventListener('click', async () => {
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;

      if (!name || !email || !password) {
        return alert('All fields are required.');
      }

      try {
        const res = await fetch(`${API}/register`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, email, password })
        });

        const data = await res.json();

        if (res.ok) {
          alert(data.message);
          window.location.href = 'index.html';
        } else {
          alert(data.message || 'Registration failed');
        }
      } catch (err) {
        console.error('Register error:', err);
        alert('Something went wrong. Try again.');
      }
    });
  </script>
</body>
</html>


//tasks.html

<!DOCTYPE html>
<html>
<head>
  <title>Task Management</title>
</head>
<body>
  <h2>Manage Your Tasks</h2>

  <div>
    <input id="taskTitle" placeholder="Enter Task Title"><br>
    <input id="taskDescription" placeholder="Enter Description"><br>
    <input id="taskDueDate" type="date"><br>
    <select id="taskStatus">
      <option value="pending">Pending</option>
      <option value="in-progress">In Progress</option>
      <option value="completed">Completed</option>
    </select><br><br>
    <button onclick="addNewTask()">Add New Task</button>
  </div>

  <h3>Task List</h3>
  <ul id="taskList"></ul>

  <script>
    const API_URL = 'http://localhost:5000/api/tasks';
    const userToken = localStorage.getItem('token');

    if (!userToken) {
      alert("You need to log in first.");
      window.location.href = "login.html"; // Redirect to login page if no token found
    }

    // Fetch and display all tasks
    async function getAllTasks() {
      try {
        const response = await fetch(API_URL + '/all', {
          headers: { Authorization: 'Bearer ' + userToken }
        });
        const tasks = await response.json();

        const taskListElement = document.getElementById('taskList');
        taskListElement.innerHTML = '';

        if (tasks.length === 0) {
          taskListElement.innerHTML = '<li>No tasks found.</li>';
        } else {
          tasks.forEach(task => {
            const taskItem = document.createElement('li');
            taskItem.innerHTML = `
              <b>${task.title}</b> - ${task.status}
              <button onclick="deleteTask('${task._id}')">Delete</button>
            `;
            taskListElement.appendChild(taskItem);
          });
        }
      } catch (err) {
        console.error("Fetching tasks failed:", err);
        alert("Error fetching tasks. Please try again.");
      }
    }

    // Add a new task
    async function addNewTask() {
      const title = document.getElementById('taskTitle').value.trim();
      const description = document.getElementById('taskDescription').value.trim();
      const dueDate = document.getElementById('taskDueDate').value;
      const status = document.getElementById('taskStatus').value;

      if (!title) {
        return alert("Title is required.");
      }

      try {
        const response = await fetch(API_URL + '/create', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + userToken
          },
          body: JSON.stringify({ title, description, dueDate, status })
        });

        const responseData = await response.json();
        alert('Task added successfully!');
        getAllTasks();
      } catch (err) {
        console.error("Adding task failed:", err);
        alert("Could not add task.");
      }
    }

    // Delete a task by ID
    async function deleteTask(taskId) {
      if (!confirm("Are you sure you want to delete this task?")) return;

      try {
        const response = await fetch(`${API_URL}/delete/${taskId}`, {
          method: 'DELETE',
          headers: { Authorization: 'Bearer ' + userToken }
        });

        const responseData = await response.json();
        alert(responseData.message);
        getAllTasks();
      } catch (err) {
        console.error("Deleting task failed:", err);
        alert("Could not delete task.");
      }
    }

    // Load tasks when the page loads
    getAllTasks();
  </script>
</body>
</html>

//task.js

const mongoose = require('mongoose');

const TaskSchema = new mongoose.Schema({
  title: { type: String, required: true },
  description: String,
  status: { type: String, enum: ['pending', 'in-progress', 'completed'], default: 'pending' },
  dueDate: Date,
  assignedTo: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }
});

module.exports = mongoose.model('Task', TaskSchema);



//user.js
const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('User', UserSchema);

//authMiddleware.js

const jwt = require('jsonwebtoken');

module.exports = function (req, res, next) {
  
  const token = req.header('Authorization')?.split(' ')[1];

  if (!token) return res.status(401).send('Access Denied'); 

  try {

    const verified = jwt.verify(token, process.env.JWT_SECRET);
    req.user = verified; 
    next(); 
  } catch (err) {

    res.status(400).send('Invalid Token');
  }
};

To Deploy all the design for the one report----
CD K:\AosService\PackagesLocalDirectory\Plugins\AxReportVmRoleStartupTask\
.\DeployAllReportsToSSRS.ps1 -PackageInstallLocation "K:\AosService\PackagesLocalDirectory" -ReportName DrumLabel*
 
to deploy one desighn from report----
CD K:\AosService\PackagesLocalDirectory\Plugins\AxReportVmRoleStartupTask\
.\DeployAllReportsToSSRS.ps1 -PackageInstallLocation "K:\AosService\PackagesLocalDirectory" -ReportName DrumLabel.Medium_DualLang
 

TEXT(MONTH(DATEVALUE({!f_StartDateTimeWithTimeZoneOffset}))) & "/" &
TEXT(DAY(DATEVALUE({!f_StartDateTimeWithTimeZoneOffset}))) & "/" &
TEXT(YEAR(DATEVALUE({!f_StartDateTimeWithTimeZoneOffset}))) & " " &
IF(
    VALUE(MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 12, 2)) = 0, 
    "12:" & 
    RIGHT("00" & MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 15, 2), 2) & 
    " AM", 
    IF(
        VALUE(MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 12, 2)) < 12,
        TEXT(VALUE(MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 12, 2))) & ":" & 
        RIGHT("00" & MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 15, 2), 2) & 
        " AM",
        IF(
            VALUE(MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 12, 2)) = 12,
            "12:" & 
            RIGHT("00" & MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 15, 2), 2) & 
            " PM",
            TEXT(VALUE(MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 12, 2)) - 12) & ":" & 
            RIGHT("00" & MID(TEXT({!f_StartDateTimeWithTimeZoneOffset}), 15, 2), 2) & 
            " PM"
        )
    )
)

//f_GMTOffset
24 * (DATETIMEVALUE({!$Flow.CurrentDate}) - {!Convert_Today_To_DateTime.datetimeValue})

//Convert_Today_To_DateTime is an UnofficialSF Action - ConvertDateToDatetimeFlowAction

{!dateTimeVariable} + ({!f_GMTOffset}/24)

{
	"blocks": [
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": ":xeros-connect: Boost Days - What's on this week! :xeros-connect:"
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "Morning Ahuriri :wave: Happy Monday, let's get ready to dive into another week in the Hawke's Bay office! See below for what's in store :eyes:"
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": ":calendar-date-16: Wednesday, 16th April :camel:",
				"emoji": true
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "\n:coffee: *Café Partnership*: Enjoy coffee and café-style beverages from our cafe partner, *Adoro*, located in our office building *8:00AM - 11:30AM*.\n:breakfast: *Breakfast*: Provided by *Design Cuisine* from *9:30AM-10:30AM* in the Kitchen."
			}
		},
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": ":calendar-date-17: Thursday, 17th April :rabbit:",
				"emoji": true
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "\n:coffee: *Café Partnership*: Enjoy coffee and café-style beverages from our cafe partner, *Adoro*, located in our office building *8:00AM - 11:30AM*.\n:wrap: *Lunch*: Provided by *Roam* from *12:30PM-1:30PM* in the Kitchen."
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "\n *What else?* Stay tuned to this channel for more details, check out the <https://calendar.google.com/calendar/u/0?cid=eGVyby5jb21fbXRhc2ZucThjaTl1b3BpY284dXN0OWlhdDRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ|*Hawkes Bay Social Calendar*>, and get ready to Boost your workdays!\n\nWX Team :party-wx:"
			}
		}
	]
}

class MockApiService implements ApiService {
  @override
  Future<String> fetchUserName() async {
    return "Mock User"; // Fake data, no delay
  }
}

void main() {
  // For testing, inject the mock
  runApp(
    MaterialApp(
      home: Scaffold(
        body: UserWidget(apiService: MockApiService()),
      ),
    ),
  );
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: UserWidget(apiService: ApiService()),
      ),
    ),
  );
}

class UserWidget extends StatelessWidget {
  final ApiService apiService; // Dependency injected

  UserWidget({required this.apiService});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: apiService.fetchUserName(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text("User: ${snapshot.data}");
        }
        return CircularProgressIndicator();
      },
    );
  }
}

class UserWidget extends StatelessWidget {
  final ApiService apiService = ApiService(); // Hardcoded dependency

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: apiService.fetchUserName(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text("User: ${snapshot.data}");
        }
        return CircularProgressIndicator();
      },
    );
  }
}

class ApiService {
  Future<String> fetchUserName() async {
    // Simulate an API call
    await Future.delayed(Duration(seconds: 1));
    return "John Doe";
  }
}

$ git remote -v
> origin    https://github.com/YOUR-USERNAME/YOUR-FORK.git (fetch)
> origin    https://github.com/YOUR-USERNAME/YOUR-FORK.git (push)
> upstream  https://github.com/ORIGINAL-OWNER/ORIGINAL-REPOSITORY.git (fetch)
> upstream  https://github.com/ORIGINAL-OWNER/ORIGINAL-REPOSITORY.git (push)

msiexec.exe /package PowerShell-7.5.0-win-x64.msi /quiet ADD_EXPLORER_CONTEXT_MENU_OPENPOWERSHELL=1 ADD_FILE_CONTEXT_MENU_RUNPOWERSHELL=1 ENABLE_PSREMOTING=1 REGISTER_MANIFEST=1 USE_MU=1 ENABLE_MU=1 ADD_PATH=1

for i in reversed([ i for i in range(100)]):
    print(i)

Imagine a shopping platform where products never run out, browsing is lightning-fast, and checkout is as easy as a single click. Our Amazon Clone online store brings you an unmatched shopping experience with a wide range of products, smart recommendations, and smooth navigation. Whether you’re searching for the latest gadgets, fashion, or daily essentials, everything is just a tap away!
Why You’ll Like It?
 Infinite Choices – Browse an endless catalog of products.
 Fast & Easy Search – Find what you need instantly.
 Safe & Secure Payments – Shop with confidence.

Visit now >> https://www.beleaftechnologies.com/amazon-clone
Whatsapp :  +91 8056786622
Email id :  business@beleaftechnologies.com
Telegram : https://telegram.me/BeleafSoftTech 

<lightning-input class="searchBar" data-id="searchBar" type="search" variant="label-hidden" placeholder="Search..."
                onmouseout={handleSearch}>
            </lightning-input>
            <div class="tooltip-pointer">
                <div class="tooltip-content">
                    {searchAttributesText}
                </div>
            </div>

.tooltip-pointer {
    position: absolute;
    z-index: 7000;
    /* opacity: 0;
    visibility: hidden; */
    margin-top: 3rem;
    width: 13.5rem;
    padding: 0.5rem;
    background-color: #003366;
    text-align: left;
    color: white;
}

/* Show tooltip on hover */
.searchBar:hover .tooltip-pointer {
    opacity: 1;
    visibility: visible;
}

/* Triangle pointer at the top of tooltip */
.tooltip-pointer:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #003366;
}

.tooltip-content {
    font-size: 13px;
    line-height: 1.5;
}