draft toast modification done for production

src/App.tsx

@@ -234,10 +234,6 @@ function AppRoutes({ onLogout }: AppProps) {
     setDynamicRequests([...dynamicRequests, newCustomRequest]);
 
     navigate('/my-requests');
-    toast.success('Request Submitted Successfully!', {
-      description: `Your request "${requestData.title}" (${requestId}) has been created and sent for approval.`,
-      duration: 5000,
-    });
   };
 
   const handleApprovalSubmit = (action: 'approve' | 'reject', _comment: string) => {

src/components/workflow/CreateRequest/TemplateSelectionStep.tsx

@@ -59,23 +59,29 @@ export function TemplateSelectionStep({
         className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"
         data-testid="template-selection-grid"
       >
-        {templates.map((template) => (
-          <motion.div
-            key={template.id}
-            whileHover={{ scale: 1.03 }}
-            whileTap={{ scale: 0.98 }}
-            transition={{ type: "spring", stiffness: 300, damping: 20 }}
-            data-testid={`template-card-${template.id}`}
-          >
-            <Card
-              className={`cursor-pointer h-full transition-all duration-300 border-2 ${
-                selectedTemplate?.id === template.id
-                  ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200'
-                  : 'border-gray-200 hover:border-blue-300 hover:shadow-lg'
-              }`}
-              onClick={() => onSelectTemplate(template)}
-              data-testid={`template-card-${template.id}-clickable`}
+        {templates.map((template) => {
+          const isComingSoon = template.id === 'existing-template';
+          const isDisabled = isComingSoon;
+          
+          return (
+            <motion.div
+              key={template.id}
+              whileHover={!isDisabled ? { scale: 1.03 } : {}}
+              whileTap={!isDisabled ? { scale: 0.98 } : {}}
+              transition={{ type: "spring", stiffness: 300, damping: 20 }}
+              data-testid={`template-card-${template.id}`}
             >
+              <Card
+                className={`h-full transition-all duration-300 border-2 ${
+                  isDisabled
+                    ? 'border-gray-200 bg-gray-50/50 opacity-85 cursor-not-allowed'
+                    : selectedTemplate?.id === template.id
+                    ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200 cursor-pointer'
+                    : 'border-gray-200 hover:border-blue-300 hover:shadow-lg cursor-pointer'
+                }`}
+                onClick={!isDisabled ? () => onSelectTemplate(template) : undefined}
+                data-testid={`template-card-${template.id}-clickable`}
+              >
               <CardHeader className="space-y-4 pb-4">
                 <div className="flex items-start justify-between">
                   <div 
@@ -108,9 +114,20 @@ export function TemplateSelectionStep({
                   )}
                 </div>
                 <div className="text-left">
-                  <CardTitle className="text-xl mb-2" data-testid={`template-card-${template.id}-name`}>
-                    {template.name}
-                  </CardTitle>
+                  <div className="flex items-start justify-between gap-2 mb-2">
+                    <CardTitle className="text-xl" data-testid={`template-card-${template.id}-name`}>
+                      {template.name}
+                    </CardTitle>
+                    {isComingSoon && (
+                      <Badge 
+                        variant="outline" 
+                        className="text-xs bg-yellow-100 text-yellow-700 border-yellow-300 font-semibold"
+                        data-testid={`template-card-${template.id}-coming-soon-badge`}
+                      >
+                        Coming Soon
+                      </Badge>
+                    )}
+                  </div>
                   <div className="flex items-center gap-2">
                     <Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
                       {template.category}
@@ -140,7 +157,8 @@ export function TemplateSelectionStep({
               </CardContent>
             </Card>
           </motion.div>
-        ))}
+          );
+        })}
       </div>
 
       {/* Template Details Card */}

src/pages/CreateRequest/hooks/useCreateRequestSubmission.ts

@@ -3,6 +3,7 @@
  */
 
 import { useState } from 'react';
+import { toast } from 'sonner';
 import { FormData, RequestTemplate } from '@/hooks/useCreateRequestForm';
 import {
   buildCreatePayload,
@@ -72,6 +73,12 @@ export function useCreateRequestSubmission({
           documentsToDelete
         );
 
+        // Show toast after backend confirmation
+        toast.success('Request Submitted Successfully!', {
+          description: `Your request "${formData.title}" has been submitted and sent for approval.`,
+          duration: 5000,
+        });
+
         onSubmit?.({
           ...formData,
           backendId: editRequestId,
@@ -87,14 +94,24 @@ export function useCreateRequestSubmission({
 
         const result = await createAndSubmitWorkflow(createPayload, documents);
 
+        // Show toast after backend confirmation
+        toast.success('Request Submitted Successfully!', {
+          description: `Your request "${formData.title}" has been created and sent for approval.`,
+          duration: 5000,
+        });
+
         onSubmit?.({
           ...formData,
           backendId: result.id,
           template: selectedTemplate,
         });
       }
-    } catch (error) {
+    } catch (error: any) {
       console.error('Failed to submit workflow:', error);
+      toast.error('Failed to Submit Request', {
+        description: error?.response?.data?.message || error?.message || 'An error occurred while submitting the request.',
+        duration: 5000,
+      });
       setSubmitting(false);
     }
   };
@@ -130,6 +147,11 @@ export function useCreateRequestSubmission({
           documentsToDelete
         );
 
+        toast.success('Draft Saved Successfully!', {
+          description: `Your request "${formData.title}" has been saved as draft.`,
+          duration: 5000,
+        });
+
         onSubmit?.({
           ...formData,
           backendId: editRequestId,
@@ -145,14 +167,23 @@ export function useCreateRequestSubmission({
 
         const result = await createWorkflow(createPayload, documents);
 
+        toast.success('Draft Saved Successfully!', {
+          description: `Your request "${formData.title}" has been saved as draft.`,
+          duration: 5000,
+        });
+
         onSubmit?.({
           ...formData,
           backendId: result.id,
           template: selectedTemplate,
         });
       }
-    } catch (error) {
+    } catch (error: any) {
       console.error('Failed to save draft:', error);
+      toast.error('Failed to Save Draft', {
+        description: error?.response?.data?.message || error?.message || 'An error occurred while saving the draft.',
+        duration: 5000,
+      });
       setSavingDraft(false);
     }
   };