API tools faq
paste
hnzbyte

Untitled

hnzbyte
Aug 6th, 2025
662
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
TypeScript 36.13 KB | None | 0 0
raw download clone embed print report
  1. // "use client";
  2. // import { ICreateProgramData } from "@/lib/repository/program.repository";
  3. // import { UploadButton } from "@/lib/utils";
  4. // import { useRouter } from "next/navigation";
  5. // import { useEffect, useState } from "react";
  6. // interface Category {
  7. //     id: string;
  8. //     name: string;
  9. // }
  10.  
  11. // interface FormData {
  12. //     title: string;
  13. //     description: string;
  14. //     duration: string;
  15. //     location: string;
  16. //     criteria: string;
  17. //     categoryId: string;
  18. //     startDate: string;
  19. //     endDate: string;
  20. //     programImageUrl: string;
  21. //     videoUrl: string;
  22. //     videoThumbnailUrl: string;
  23. //     isOpen: boolean;
  24. // }
  25.  
  26. // const initialFormData: FormData = {
  27. //     title: "",
  28. //     description: "",
  29. //     duration: "",
  30. //     location: "",
  31. //     criteria: "",
  32. //     categoryId: "",
  33. //     startDate: "",
  34. //     endDate: "",
  35. //     programImageUrl: "",
  36. //     videoUrl: "",
  37. //     videoThumbnailUrl: "",
  38. //     isOpen: true,
  39. // };
  40.  
  41. // interface IAddProgramFormProps {
  42. //     userId: string; // Assuming userId is passed as a prop
  43. // }
  44.  
  45. // export default function AddProgramForm({ userId }: IAddProgramFormProps) {
  46. //     const router = useRouter();
  47. //     const [formData, setFormData] = useState<FormData>(initialFormData);
  48. //     const [programImageFile, setProgramImageFile] = useState<File | null>(null);
  49. //     const [categories, setCategories] = useState<Category[]>([]);
  50. //     const [isLoading, setIsLoading] = useState(false);
  51. //     const [isSubmitting, setIsSubmitting] = useState(false);
  52. //     const [isAiAssisting, setIsAiAssisting] = useState(false);
  53. //     const [showAiAssistant, setShowAiAssistant] = useState(false);
  54. //     const [aiPrompt, setAiPrompt] = useState("");
  55. //     const [errors, setErrors] = useState<Record<string, string>>({});
  56. //     const [imageUrl, setImageUrl] = useState<string>("");
  57. //     const [isImageUploading, setIsImageUploading] = useState(false);
  58.  
  59. //     // Load categories on component mount
  60. //     useEffect(() => {
  61. //         const loadCategories = async () => {
  62. //             try {
  63. //                 setIsLoading(true);
  64. //                 const categoriesData = await fetch("/api/category");
  65. //                 if (!categoriesData.ok) {
  66. //                     throw new Error("Failed to load categories");
  67. //                 }
  68. //                 const categories = await categoriesData.json();
  69. //                 setCategories(categories);
  70. //             } catch (error) {
  71. //                 console.error("Failed to load categories:", error);
  72. //                 alert("Failed to load categories");
  73. //             } finally {
  74. //                 setIsLoading(false);
  75. //             }
  76. //         };
  77.  
  78. //         loadCategories();
  79. //     }, []);
  80.  
  81. //     // Handle input changes
  82. //     const handleInputChange = (
  83. //         field: keyof FormData,
  84. //         value: string | boolean
  85. //     ) => {
  86. //         setFormData((prev) => ({
  87. //             ...prev,
  88. //             [field]: value,
  89. //         }));
  90.  
  91. //         // Clear error when user starts typing
  92. //         if (errors[field]) {
  93. //             setErrors((prev) => ({
  94. //                 ...prev,
  95. //                 [field]: "",
  96. //             }));
  97. //         }
  98. //     };
  99.  
  100. //     // Handle file input change
  101. //     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  102. //         const file = e.target.files?.[0] || null;
  103. //         setProgramImageFile(file);
  104. //     };
  105.  
  106. //     // Validate form
  107. //     const validateForm = (): boolean => {
  108. //         const newErrors: Record<string, string> = {};
  109.  
  110. //         if (!formData.title.trim()) {
  111. //             newErrors.title = "Program title is required";
  112. //         }
  113.  
  114. //         if (!formData.description.trim()) {
  115. //             newErrors.description = "Program description is required";
  116. //         }
  117.  
  118. //         if (!formData.duration.trim()) {
  119. //             newErrors.duration = "Program duration is required";
  120. //         }
  121.  
  122. //         if (!formData.location.trim()) {
  123. //             newErrors.location = "Program location is required";
  124. //         }
  125.  
  126. //         if (!formData.criteria.trim()) {
  127. //             newErrors.criteria = "Participant criteria is required";
  128. //         }
  129.  
  130. //         if (!formData.categoryId) {
  131. //             newErrors.categoryId = "Program category is required";
  132. //         }
  133.  
  134. //         if (!formData.startDate) {
  135. //             newErrors.startDate = "Start date is required";
  136. //         }
  137.  
  138. //         if (!formData.endDate) {
  139. //             newErrors.endDate = "End date is required";
  140. //         }
  141.  
  142. //         if (
  143. //             formData.startDate &&
  144. //             formData.endDate &&
  145. //             new Date(formData.startDate) >= new Date(formData.endDate)
  146. //         ) {
  147. //             newErrors.endDate = "End date must be after start date";
  148. //         }
  149.  
  150. //         setErrors(newErrors);
  151. //         return Object.keys(newErrors).length === 0;
  152. //     };
  153.  
  154. //     // Handle form submission
  155. //     const handleSubmit = async (e: React.FormEvent) => {
  156. //         e.preventDefault();
  157.  
  158. //         // For now, use a dummy user ID - in real app this would come from auth
  159.  
  160. //         if (!validateForm()) {
  161. //             alert("Please complete all required fields");
  162. //             return;
  163. //         }
  164.  
  165. //         setIsSubmitting(true);
  166.  
  167. //         try {
  168. //             const programData: ICreateProgramData = {
  169. //                 artisanId: userId,
  170. //                 title: formData.title.trim(),
  171. //                 description: formData.description.trim(),
  172. //                 duration: formData.duration.trim(),
  173. //                 location: formData.location.trim(),
  174. //                 criteria: formData.criteria.trim(),
  175. //                 categoryId: formData.categoryId,
  176. //                 startDate: new Date(formData.startDate),
  177. //                 endDate: new Date(formData.endDate),
  178. //                 programImageUrl: imageUrl,
  179. //                 videoUrl: formData.videoUrl.trim() || undefined,
  180. //                 videoThumbnailUrl: formData.videoThumbnailUrl.trim() || undefined,
  181. //                 isOpen: formData.isOpen,
  182. //             };
  183.  
  184. //             await fetch("/api/program", {
  185. //                 method: "POST",
  186. //                 headers: {
  187. //                     "Content-Type": "application/json",
  188. //                 },
  189. //                 body: JSON.stringify(programData),
  190. //             });
  191.  
  192. //             alert("Program created successfully!");
  193. //             router.push("/dashboard/artisan/programs");
  194. //         } catch (error) {
  195. //             console.error("Failed to create program:", error);
  196. //             alert("Failed to create program. Please try again.");
  197. //         } finally {
  198. //             setIsSubmitting(false);
  199. //         }
  200. //     };
  201.  
  202. //     // Handle AI Assistant
  203. //     const handleAiAssist = async () => {
  204. //         if (!aiPrompt.trim()) {
  205. //             alert("Please enter ideas or keywords for your program description");
  206. //             return;
  207. //         }
  208.  
  209. //         setIsAiAssisting(true);
  210.  
  211. //         try {
  212. //             const selectedCategory = categories.find(
  213. //                 (cat) => cat.id === formData.categoryId
  214. //             );
  215.  
  216. //             const response = await fetch("/api/ai-assistant", {
  217. //                 method: "POST",
  218. //                 headers: {
  219. //                     "Content-Type": "application/json",
  220. //                 },
  221. //                 body: JSON.stringify({
  222. //                     prompt: aiPrompt,
  223. //                     programTitle: formData.title || "Cultural Heritage Program",
  224. //                     category: selectedCategory?.name || "Cultural Heritage",
  225. //                     duration: formData.duration || "",
  226. //                     location: formData.location || "",
  227. //                 }),
  228. //             });
  229.  
  230. //             if (!response.ok) {
  231. //                 const errorData = await response.json();
  232. //                 throw new Error(
  233. //                     errorData.error || `HTTP error! status: ${response.status}`
  234. //                 );
  235. //             }
  236.  
  237. //             const data = await response.json();
  238.  
  239. //             if (data.success && data.generatedDescription) {
  240. //                 // Update description with AI generated text
  241. //                 handleInputChange("description", data.generatedDescription);
  242. //                 setShowAiAssistant(false);
  243. //                 setAiPrompt("");
  244.  
  245. //                 if (data.fallback) {
  246. //                     alert(
  247. //                         "AI service had issues, but we've generated a basic description template for you. Please review and customize it as needed."
  248. //                     );
  249. //                 } else {
  250. //                     alert(
  251. //                         "Description successfully generated by AI! You can edit it as needed."
  252. //                     );
  253. //                 }
  254. //             } else {
  255. //                 throw new Error(data.error || "No description generated");
  256. //             }
  257. //         } catch (error) {
  258. //             console.error("AI Assistant error:", error);
  259.  
  260. //             let errorMessage =
  261. //                 "Failed to generate description with AI. Please try again or write manually.";
  262.  
  263. //             if (error instanceof Error) {
  264. //                 if (
  265. //                     error.message.includes("API key authentication failed") ||
  266. //                     error.message.includes("API access denied")
  267. //                 ) {
  268. //                     errorMessage =
  269. //                         "AI service configuration error. Please contact support.";
  270. //                 } else if (error.message.includes("Too many requests")) {
  271. //                     errorMessage =
  272. //                         "Too many requests. Please wait a moment and try again.";
  273. //                 } else if (error.message.includes("temporarily unavailable")) {
  274. //                     errorMessage =
  275. //                         "AI service is temporarily unavailable. Please try again in a few minutes.";
  276. //                 } else if (error.message.includes("safety filters")) {
  277. //                     errorMessage =
  278. //                         "Your input was blocked by content filters. Please try rephrasing your description.";
  279. //                 } else if (error.message.includes("Invalid request format")) {
  280. //                     errorMessage =
  281. //                         "Invalid input format. Please check your description and try again.";
  282. //                 } else if (error.message.includes("HTTP error")) {
  283. //                     errorMessage =
  284. //                         "Network error occurred. Please check your connection and try again.";
  285. //                 }
  286. //             }
  287.  
  288. //             alert(errorMessage);
  289. //         } finally {
  290. //             setIsAiAssisting(false);
  291. //         }
  292. //     };
  293.  
  294. //     // Handle reset form
  295. //     const handleReset = () => {
  296. //         setFormData(initialFormData);
  297. //         setErrors({});
  298. //         setShowAiAssistant(false);
  299. //         setAiPrompt("");
  300. //     };
  301.  
  302. //     if (isLoading) {
  303. //         return (
  304. //             <div className="container mx-auto px-4 py-8">
  305. //                 <div className="flex items-center justify-center min-h-[400px]">
  306. //                     <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
  307. //                     <span className="ml-3">Loading data...</span>
  308. //                 </div>
  309. //             </div>
  310. //         );
  311. //     }
  312.  
  313. //     return (
  314. //         <div className="container mx-auto px-4 py-8">
  315. //             <div className="max-w-4xl mx-auto">
  316. //                 {/* Header */}
  317. //                 <div className="mb-8">
  318. //                     <h1 className="text-3xl font-bold text-gray-900">
  319. //                         Create New Program
  320. //                     </h1>
  321. //                     <p className="text-gray-600 mt-2">
  322. //                         Create a cultural heritage training program to share with the
  323. //                         community
  324. //                     </p>
  325. //                 </div>
  326.  
  327. //                 <form onSubmit={handleSubmit} className="space-y-8">
  328. //                     {/* Basic Information */}
  329. //                     <div className="bg-white rounded-lg shadow-md p-6">
  330. //                         <h2 className="text-xl font-semibold mb-4">Basic Information</h2>
  331. //                         <div className="space-y-6">
  332. //                               <div>
  333. //                                 <label
  334. //                                     htmlFor="programImageFile"
  335. //                                     className="block text-sm font-medium text-gray-700 mb-2"
  336. //                                 >
  337. //                                     Program Image <span className="text-red-500">*</span>
  338. //                                 </label>
  339. //                                 <UploadButton
  340. //                                     endpoint="imageUploader"
  341. //                                     onClientUploadComplete={(res) => {
  342. //                                         setIsImageUploading(false);
  343. //                                         if (res && res[0]?.ufsUrl) {
  344. //                                             setImageUrl(res[0].ufsUrl);
  345. //                                             setFormData((prev) => ({ ...prev, programImageUrl: res[0].ufsUrl }));
  346. //                                         }
  347. //                                     }}
  348. //                                     onUploadError={(error: Error) => {
  349. //                                         setIsImageUploading(false);
  350. //                                         alert(`ERROR! ${error.message}`);
  351. //                                     }}
  352. //                                     className="bg-amber-500 text-white px-3 py-1 rounded shadow hover:bg-amber-600 transition font-semibold text-sm max-w-fit"
  353. //                                 />
  354. //                                 {isImageUploading && (
  355. //                                     <div className="mt-2 flex items-center gap-2 text-blue-600">
  356. //                                         <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
  357. //                                         <span>Uploading image...</span>
  358. //                                     </div>
  359. //                                 )}
  360. //                                 {(imageUrl || formData.programImageUrl) && (
  361. //                                     <div className="mt-2">
  362. //                                         <img src={imageUrl || formData.programImageUrl} alt="Program" className="max-h-40 rounded shadow" />
  363. //                                     </div>
  364. //                                 )}
  365. //                             </div>
  366. //                             {/* Title */}
  367. //                             <div>
  368. //                                 <label
  369. //                                     htmlFor="title"
  370. //                                     className="block text-sm font-medium text-gray-700 mb-2"
  371. //                                 >
  372. //                                     Program Title <span className="text-red-500">*</span>
  373. //                                 </label>
  374. //                                 <input
  375. //                                     type="text"
  376. //                                     id="title"
  377. //                                     placeholder="Enter program title"
  378. //                                     value={formData.title}
  379. //                                     onChange={(e) => handleInputChange("title", e.target.value)}
  380. //                                     className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.title ? "border-red-500" : "border-gray-300"
  381. //                                         }`}
  382. //                                 />
  383. //                                 {errors.title && (
  384. //                                     <p className="text-sm text-red-500 mt-1">{errors.title}</p>
  385. //                                 )}
  386. //                             </div>
  387.  
  388. //                             {/* Description */}
  389. //                             <div>
  390. //                                 <div className="flex items-center justify-between mb-2">
  391. //                                     <label
  392. //                                         htmlFor="description"
  393. //                                         className="block text-sm font-medium text-gray-700"
  394. //                                     >
  395. //                                         Program Description <span className="text-red-500">*</span>
  396. //                                     </label>
  397. //                                     <button
  398. //                                         type="button"
  399. //                                         onClick={() => setShowAiAssistant(!showAiAssistant)}
  400. //                                         className="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
  401. //                                     >
  402. //                                         <svg
  403. //                                             className="w-4 h-4 mr-2"
  404. //                                             fill="none"
  405. //                                             stroke="currentColor"
  406. //                                             viewBox="0 0 24 24"
  407. //                                         >
  408. //                                             <path
  409. //                                                 strokeLinecap="round"
  410. //                                                 strokeLinejoin="round"
  411. //                                                 strokeWidth={2}
  412. //                                                 d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
  413. //                                             />
  414. //                                         </svg>
  415. //                                         Writing Assistant
  416. //                                     </button>
  417. //                                 </div>
  418.  
  419. //                                 {/* Writing Assistant Panel */}
  420. //                                 {showAiAssistant && (
  421. //                                     <div className="mb-4 p-4 bg-gray-50 border border-gray-200 rounded-md">
  422. //                                         <h4 className="text-sm font-medium text-gray-900 mb-2">
  423. //                                             ✍️ Description Writing Assistant
  424. //                                         </h4>
  425. //                                         <p className="text-sm text-gray-600 mb-3">
  426. //                                             Describe your program idea and we&apos;ll help you create a detailed description.
  427. //                                         </p>
  428. //                                         <div className="space-y-3">
  429. //                                             <textarea
  430. //                                                 value={aiPrompt}
  431. //                                                 onChange={(e) => setAiPrompt(e.target.value)}
  432. //                                                 placeholder="Example: This program teaches traditional batik tulis from Yogyakarta. Participants will learn classic patterns and natural dyeing techniques..."
  433. //                                                 rows={3}
  434. //                                                 className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
  435. //                                             />
  436. //                                             <div className="flex gap-3">
  437. //                                                 <button
  438. //                                                     type="button"
  439. //                                                     onClick={handleAiAssist}
  440. //                                                     disabled={isAiAssisting || !aiPrompt.trim()}
  441. //                                                     className="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
  442. //                                                 >
  443. //                                                     {isAiAssisting ? (
  444. //                                                         <>
  445. //                                                             <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
  446. //                                                             Generating...
  447. //                                                         </>
  448. //                                                     ) : (
  449. //                                                         <>
  450. //                                                             <svg
  451. //                                                                 className="w-4 h-4 mr-2"
  452. //                                                                 fill="none"
  453. //                                                                 stroke="currentColor"
  454. //                                                                 viewBox="0 0 24 24"
  455. //                                                             >
  456. //                                                                 <path
  457. //                                                                     strokeLinecap="round"
  458. //                                                                     strokeLinejoin="round"
  459. //                                                                     strokeWidth={2}
  460. //                                                                     d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
  461. //                                                                 />
  462. //                                                             </svg>
  463. //                                                             Generate Description
  464. //                                                         </>
  465. //                                                     )}
  466. //                                                 </button>
  467. //                                                 <button
  468. //                                                     type="button"
  469. //                                                     onClick={() => setShowAiAssistant(false)}
  470. //                                                     className="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
  471. //                                                 >
  472. //                                                     Cancel
  473. //                                                 </button>
  474. //                                             </div>
  475. //                                         </div>
  476. //                                     </div>
  477. //                                 )}
  478.  
  479. //                                 <textarea
  480. //                                     id="description"
  481. //                                     placeholder="Describe your program in detail"
  482. //                                     rows={4}
  483. //                                     value={formData.description}
  484. //                                     onChange={(e) =>
  485. //                                         handleInputChange("description", e.target.value)
  486. //                                     }
  487. //                                     className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.description ? "border-red-500" : "border-gray-300"
  488. //                                         }`}
  489. //                                 />
  490. //                                 {errors.description && (
  491. //                                     <p className="text-sm text-red-500 mt-1">
  492. //                                         {errors.description}
  493. //                                     </p>
  494. //                                 )}
  495. //                             </div>
  496.  
  497. //                             {/* Category */}
  498. //                             <div>
  499. //                                 <label
  500. //                                     htmlFor="categoryId"
  501. //                                     className="block text-sm font-medium text-gray-700 mb-2"
  502. //                                 >
  503. //                                     Category <span className="text-red-500">*</span>
  504. //                                 </label>
  505. //                                 <select
  506. //                                     id="categoryId"
  507. //                                     value={formData.categoryId}
  508. //                                     onChange={(e) =>
  509. //                                         handleInputChange("categoryId", e.target.value)
  510. //                                     }
  511. //                                     className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.categoryId ? "border-red-500" : "border-gray-300"
  512. //                                         }`}
  513. //                                 >
  514. //                                     <option value="">Select program category</option>
  515. //                                     {categories.map((category) => (
  516. //                                         <option key={category.id} value={category.id}>
  517. //                                             {category.name}
  518. //                                         </option>
  519. //                                     ))}
  520. //                                 </select>
  521. //                                 {errors.categoryId && (
  522. //                                     <p className="text-sm text-red-500 mt-1">
  523. //                                         {errors.categoryId}
  524. //                                     </p>
  525. //                                 )}
  526. //                             </div>
  527.  
  528. //                             {/* Duration and Location */}
  529. //                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  530. //                                 <div>
  531. //                                     <label
  532. //                                         htmlFor="duration"
  533. //                                         className="block text-sm font-medium text-gray-700 mb-2"
  534. //                                     >
  535. //                                         Duration <span className="text-red-500">*</span>
  536. //                                     </label>
  537. //                                     <input
  538. //                                         type="text"
  539. //                                         id="duration"
  540. //                                         placeholder="Example: 3 months, 12 weeks"
  541. //                                         value={formData.duration}
  542. //                                         onChange={(e) =>
  543. //                                             handleInputChange("duration", e.target.value)
  544. //                                         }
  545. //                                         className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.duration ? "border-red-500" : "border-gray-300"
  546. //                                             }`}
  547. //                                     />
  548. //                                     {errors.duration && (
  549. //                                         <p className="text-sm text-red-500 mt-1">
  550. //                                             {errors.duration}
  551. //                                         </p>
  552. //                                     )}
  553. //                                 </div>
  554.  
  555. //                                 <div>
  556. //                                     <label
  557. //                                         htmlFor="location"
  558. //                                         className="block text-sm font-medium text-gray-700 mb-2"
  559. //                                     >
  560. //                                         Location <span className="text-red-500">*</span>
  561. //                                     </label>
  562. //                                     <input
  563. //                                         type="text"
  564. //                                         id="location"
  565. //                                         placeholder="Enter program location"
  566. //                                         value={formData.location}
  567. //                                         onChange={(e) =>
  568. //                                             handleInputChange("location", e.target.value)
  569. //                                         }
  570. //                                         className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.location ? "border-red-500" : "border-gray-300"
  571. //                                             }`}
  572. //                                     />
  573. //                                     {errors.location && (
  574. //                                         <p className="text-sm text-red-500 mt-1">
  575. //                                             {errors.location}
  576. //                                         </p>
  577. //                                     )}
  578. //                                 </div>
  579. //                             </div>
  580.  
  581. //                             {/* Criteria */}
  582. //                             <div>
  583. //                                 <label
  584. //                                     htmlFor="criteria"
  585. //                                     className="block text-sm font-medium text-gray-700 mb-2"
  586. //                                 >
  587. //                                     Participant Criteria <span className="text-red-500">*</span>
  588. //                                 </label>
  589. //                                 <textarea
  590. //                                     id="criteria"
  591. //                                     placeholder="Describe the criteria or requirements to join the program"
  592. //                                     rows={3}
  593. //                                     value={formData.criteria}
  594. //                                     onChange={(e) =>
  595. //                                         handleInputChange("criteria", e.target.value)
  596. //                                     }
  597. //                                     className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.criteria ? "border-red-500" : "border-gray-300"
  598. //                                         }`}
  599. //                                 />
  600. //                                 {errors.criteria && (
  601. //                                     <p className="text-sm text-red-500 mt-1">{errors.criteria}</p>
  602. //                                 )}
  603. //                             </div>
  604. //                         </div>
  605. //                     </div>
  606.  
  607. //                     {/* Schedule */}
  608. //                     <div className="bg-white rounded-lg shadow-md p-6">
  609. //                         <h2 className="text-xl font-semibold mb-4">Program Schedule</h2>
  610. //                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  611. //                             {/* Start Date */}
  612. //                             <div>
  613. //                                 <label
  614. //                                     htmlFor="startDate"
  615. //                                     className="block text-sm font-medium text-gray-700 mb-2"
  616. //                                 >
  617. //                                     Start Date <span className="text-red-500">*</span>
  618. //                                 </label>
  619. //                                 <input
  620. //                                     type="date"
  621. //                                     id="startDate"
  622. //                                     value={formData.startDate}
  623. //                                     onChange={(e) =>
  624. //                                         handleInputChange("startDate", e.target.value)
  625. //                                     }
  626. //                                     className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.startDate ? "border-red-500" : "border-gray-300"
  627. //                                         }`}
  628. //                                 />
  629. //                                 {errors.startDate && (
  630. //                                     <p className="text-sm text-red-500 mt-1">
  631. //                                         {errors.startDate}
  632. //                                     </p>
  633. //                                 )}
  634. //                             </div>
  635.  
  636. //                             {/* End Date */}
  637. //                             <div>
  638. //                                 <label
  639. //                                     htmlFor="endDate"
  640. //                                     className="block text-sm font-medium text-gray-700 mb-2"
  641. //                                 >
  642. //                                     End Date <span className="text-red-500">*</span>
  643. //                                 </label>
  644. //                                 <input
  645. //                                     type="date"
  646. //                                     id="endDate"
  647. //                                     value={formData.endDate}
  648. //                                     onChange={(e) => handleInputChange("endDate", e.target.value)}
  649. //                                     className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.endDate ? "border-red-500" : "border-gray-300"
  650. //                                         }`}
  651. //                                 />
  652. //                                 {errors.endDate && (
  653. //                                     <p className="text-sm text-red-500 mt-1">{errors.endDate}</p>
  654. //                                 )}
  655. //                             </div>
  656. //                         </div>
  657. //                     </div>
  658.  
  659. //                     {/* Action Buttons */}
  660. //                     <div className="flex flex-col sm:flex-row gap-4 pt-6">
  661. //                         <button
  662. //                             type="submit"
  663. //                             disabled={isSubmitting}
  664. //                             className="flex-1 bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
  665. //                         >
  666. //                             {isSubmitting ? (
  667. //                                 <>
  668. //                                     <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
  669. //                                     Creating Program...
  670. //                                 </>
  671. //                             ) : (
  672. //                                 "Create Program"
  673. //                             )}
  674. //                         </button>
  675.  
  676. //                         <button
  677. //                             type="button"
  678. //                             onClick={handleReset}
  679. //                             disabled={isSubmitting}
  680. //                             className="flex-1 sm:flex-none bg-gray-200 text-gray-800 px-6 py-3 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 disabled:opacity-50"
  681. //                         >
  682. //                             Reset Form
  683. //                         </button>
  684.  
  685. //                         <button
  686. //                             type="button"
  687. //                             onClick={() => router.push("/dashboard/artisan/programs")}
  688. //                             disabled={isSubmitting}
  689. //                             className="flex-1 sm:flex-none bg-white text-gray-700 px-6 py-3 rounded-md border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
  690. //                         >
  691. //                             Cancel
  692. //                         </button>
  693. //                     </div>
  694. //                 </form>
  695. //             </div>
  696. //         </div>
  697. //     );
  698. // }
  699.  
  700.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!