From 595da3bbba12b04a28552b4308b512d0e499bdd0 Mon Sep 17 00:00:00 2001
From: itsjoxdev <itsjoxdev@gmail.com>
Date: Sat, 25 Jul 2026 16:40:40 +0300
Subject: [PATCH 1/2] feat: initialize web application with Next.js, Tailwind
 CSS, and core dependencies

---
 apps/web/package-lock.json | 11 +++++++++++
 apps/web/package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/apps/web/package-lock.json b/apps/web/package-lock.json
index 73efd10..2b667cb 100644
--- a/apps/web/package-lock.json
+++ b/apps/web/package-lock.json
@@ -18,6 +18,7 @@
         "react": "latest",
         "react-dom": "latest",
         "react-hook-form": "latest",
+        "sonner": "^2.0.7",
         "tailwind-merge": "latest",
         "zod": "latest",
         "zustand": "latest"
@@ -5970,6 +5971,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/apps/web/package.json b/apps/web/package.json
index f9cce7d..634d18a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -20,6 +20,7 @@
     "react": "latest",
     "react-dom": "latest",
     "react-hook-form": "latest",
+    "sonner": "^2.0.7",
     "tailwind-merge": "latest",
     "zod": "latest",
     "zustand": "latest"

From 047609b9eed913a2b3e464a59ddf96ff3e2db433 Mon Sep 17 00:00:00 2001
From: itsjoxdev <itsjoxdev@gmail.com>
Date: Sat, 25 Jul 2026 19:42:06 +0300
Subject: [PATCH 2/2] feat(toast): implement production toast notification
 system with Sonner abstraction

---
 apps/web/components/ui/sonner.tsx             | 35 ++++++++++++++++++
 .../tickets/components/TicketAssignment.tsx   | 23 +++++-------
 .../tickets/components/TicketWorkflow.tsx     | 16 +++-----
 .../features/users/components/UserActions.tsx | 30 +++++++--------
 .../features/users/components/UserForm.tsx    | 37 ++++++++++---------
 apps/web/providers/Providers.tsx              |  2 +
 6 files changed, 86 insertions(+), 57 deletions(-)
 create mode 100644 apps/web/components/ui/sonner.tsx

diff --git a/apps/web/components/ui/sonner.tsx b/apps/web/components/ui/sonner.tsx
new file mode 100644
index 0000000..2865367
--- /dev/null
+++ b/apps/web/components/ui/sonner.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group z-100 bottom-20 sm:bottom-4"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-card group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          error: "group-[.toaster]:bg-destructive group-[.toaster]:text-destructive-foreground group-[.toaster]:border-destructive",
+          success: "group-[.toaster]:bg-green-600 group-[.toaster]:text-white group-[.toaster]:border-green-600",
+        },
+      }}
+      visibleToasts={3}
+      position="bottom-right"
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/web/features/tickets/components/TicketAssignment.tsx b/apps/web/features/tickets/components/TicketAssignment.tsx
index 964ee20..0dd8384 100644
--- a/apps/web/features/tickets/components/TicketAssignment.tsx
+++ b/apps/web/features/tickets/components/TicketAssignment.tsx
@@ -6,6 +6,8 @@ import { ticketService } from '../api/tickets.api';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { toast } from '@/lib/toast';
+import { MESSAGES } from '@/lib/toast/messages';
 
 interface Props {
   ticketId: string;
@@ -16,18 +18,18 @@ export function TicketAssignment({ ticketId, currentAssignee }: Props) {
   const router = useRouter();
   const [isAssigning, setIsAssigning] = useState(false);
   const [technicianId, setTechnicianId] = useState('');
-  const [error, setError] = useState<string | null>(null);
 
   const handleAssign = async () => {
     if (!technicianId) return;
     setIsAssigning(true);
-    setError(null);
     try {
-      await ticketService.assignTicket(ticketId, technicianId);
+      const apiCall = ticketService.assignTicket(ticketId, technicianId);
+      toast.promise(apiCall, MESSAGES.TICKETS.ASSIGN);
+      await apiCall;
       setTechnicianId('');
       router.refresh();
     } catch (err: any) {
-      setError(err.message || 'Failed to assign ticket');
+      // Error feedback is handled by toast
     } finally {
       setIsAssigning(false);
     }
@@ -35,12 +37,13 @@ export function TicketAssignment({ ticketId, currentAssignee }: Props) {
 
   const handleUnassign = async () => {
     setIsAssigning(true);
-    setError(null);
     try {
-      await ticketService.unassignTicket(ticketId);
+      const apiCall = ticketService.unassignTicket(ticketId);
+      toast.promise(apiCall, MESSAGES.TICKETS.UNASSIGN);
+      await apiCall;
       router.refresh();
     } catch (err: any) {
-      setError(err.message || 'Failed to unassign ticket');
+      // Error feedback is handled by toast
     } finally {
       setIsAssigning(false);
     }
@@ -52,12 +55,6 @@ export function TicketAssignment({ ticketId, currentAssignee }: Props) {
         <CardTitle className="text-sm font-medium">Assignment</CardTitle>
       </CardHeader>
       <CardContent>
-        {error && (
-          <div className="mb-4 text-sm text-destructive bg-destructive/10 p-2 rounded-md">
-            {error}
-          </div>
-        )}
-
         {currentAssignee ? (
           <div className="flex items-center justify-between">
             <p className="text-sm text-muted-foreground">
diff --git a/apps/web/features/tickets/components/TicketWorkflow.tsx b/apps/web/features/tickets/components/TicketWorkflow.tsx
index a0b3c8e..fad3bf4 100644
--- a/apps/web/features/tickets/components/TicketWorkflow.tsx
+++ b/apps/web/features/tickets/components/TicketWorkflow.tsx
@@ -6,6 +6,8 @@ import { ticketService } from '../api/tickets.api';
 import { TicketStatus } from '../types';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { toast } from '@/lib/toast';
+import { MESSAGES } from '@/lib/toast/messages';
 
 interface Props {
   ticketId: string;
@@ -15,7 +17,6 @@ interface Props {
 export function TicketWorkflow({ ticketId, currentStatus }: Props) {
   const router = useRouter();
   const [isUpdating, setIsUpdating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
   const getAvailableTransitions = () => {
     // This replicates the backend ALLOWED_TRANSITIONS logic temporarily for UI purposes
@@ -33,12 +34,13 @@ export function TicketWorkflow({ ticketId, currentStatus }: Props) {
 
   const handleStatusChange = async (newStatus: TicketStatus) => {
     setIsUpdating(true);
-    setError(null);
     try {
-      await ticketService.updateTicketStatus(ticketId, newStatus);
+      const apiCall = ticketService.updateTicketStatus(ticketId, newStatus);
+      toast.promise(apiCall, MESSAGES.TICKETS.STATUS_UPDATE);
+      await apiCall;
       router.refresh();
     } catch (err: any) {
-      setError(err.message || 'Failed to update status');
+      // Error feedback is handled by toast
     } finally {
       setIsUpdating(false);
     }
@@ -54,12 +56,6 @@ export function TicketWorkflow({ ticketId, currentStatus }: Props) {
         <CardTitle className="text-sm font-medium">Workflow Actions</CardTitle>
       </CardHeader>
       <CardContent>
-        {error && (
-          <div className="mb-4 text-sm text-destructive bg-destructive/10 p-2 rounded-md">
-            {error}
-          </div>
-        )}
-
         <div className="flex flex-wrap gap-2">
           {availableTransitions.map((status) => (
             <Button
diff --git a/apps/web/features/users/components/UserActions.tsx b/apps/web/features/users/components/UserActions.tsx
index 7b39af0..e2ea7ed 100644
--- a/apps/web/features/users/components/UserActions.tsx
+++ b/apps/web/features/users/components/UserActions.tsx
@@ -6,6 +6,8 @@ import { User } from '../types';
 import { UserService } from '../api/users.api';
 import { Button } from '@/components/ui/button';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { toast } from '@/lib/toast';
+import { MESSAGES } from '@/lib/toast/messages';
 
 interface UserActionsProps {
   user: User;
@@ -14,7 +16,6 @@ interface UserActionsProps {
 export function UserActions({ user }: UserActionsProps) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
   const handleToggleStatus = async () => {
     if (!confirm(`Are you sure you want to ${user.is_active ? 'deactivate' : 'activate'} this user?`)) {
@@ -22,16 +23,16 @@ export function UserActions({ user }: UserActionsProps) {
     }
     
     setLoading(true);
-    setError(null);
     try {
-      if (user.is_active) {
-        await UserService.deactivateUser(user.id);
-      } else {
-        await UserService.activateUser(user.id);
-      }
+      const apiCall = user.is_active 
+        ? UserService.deactivateUser(user.id)
+        : UserService.activateUser(user.id);
+        
+      toast.promise(apiCall, user.is_active ? MESSAGES.USERS.DEACTIVATE : MESSAGES.USERS.ACTIVATE);
+      await apiCall;
       router.refresh();
     } catch (err: any) {
-      setError(err.message || 'Action failed');
+      // Error feedback is handled by toast.promise
     } finally {
       setLoading(false);
     }
@@ -43,13 +44,15 @@ export function UserActions({ user }: UserActionsProps) {
     }
     
     setLoading(true);
-    setError(null);
     try {
-      await UserService.deleteUser(user.id);
+      const apiCall = UserService.deleteUser(user.id);
+      toast.promise(apiCall, MESSAGES.USERS.DELETE);
+      await apiCall;
       router.push('/users');
       router.refresh();
     } catch (err: any) {
-      setError(err.message || 'Failed to delete user');
+      // Error feedback is handled by toast.promise
+    } finally {
       setLoading(false);
     }
   };
@@ -61,11 +64,6 @@ export function UserActions({ user }: UserActionsProps) {
       </CardHeader>
       
       <CardContent>
-        {error && (
-          <div className="p-3 mb-4 bg-destructive/10 text-destructive rounded-md text-sm">
-            {error}
-          </div>
-        )}
         
         <div className="flex flex-wrap gap-3">
           <Button
diff --git a/apps/web/features/users/components/UserForm.tsx b/apps/web/features/users/components/UserForm.tsx
index d9ff4f9..8fbecda 100644
--- a/apps/web/features/users/components/UserForm.tsx
+++ b/apps/web/features/users/components/UserForm.tsx
@@ -7,6 +7,8 @@ import { User, UserRole, CreateUserPayload, UpdateUserPayload } from '../types';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { toast } from '@/lib/toast';
+import { MESSAGES } from '@/lib/toast/messages';
 
 interface UserFormProps {
   user?: User; // If provided, we are editing. If not, creating.
@@ -15,7 +17,6 @@ interface UserFormProps {
 export function UserForm({ user }: UserFormProps) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   
   const [formData, setFormData] = useState({
     full_name: user?.full_name || '',
@@ -36,9 +37,9 @@ export function UserForm({ user }: UserFormProps) {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    setError(null);
 
     try {
+      let apiCall: Promise<any>;
       if (user) {
         const updatePayload: UpdateUserPayload = {
           full_name: formData.full_name,
@@ -49,25 +50,30 @@ export function UserForm({ user }: UserFormProps) {
         if (formData.password) {
           updatePayload.password = formData.password;
         }
-        await UserService.updateUser(user.id, updatePayload);
+        apiCall = UserService.updateUser(user.id, updatePayload);
       } else {
         if (!formData.password) {
-          throw new Error('Password is required for new users');
+          apiCall = Promise.reject(new Error('Password is required for new users'));
+        } else {
+          const createPayload: CreateUserPayload = {
+            full_name: formData.full_name,
+            email: formData.email,
+            password: formData.password,
+            role: formData.role as UserRole,
+            is_active: formData.is_active,
+          };
+          apiCall = UserService.createUser(createPayload);
         }
-        const createPayload: CreateUserPayload = {
-          full_name: formData.full_name,
-          email: formData.email,
-          password: formData.password,
-          role: formData.role as UserRole,
-          is_active: formData.is_active,
-        };
-        await UserService.createUser(createPayload);
       }
       
+      toast.promise(apiCall, user ? MESSAGES.USERS.UPDATE : MESSAGES.USERS.CREATE);
+      await apiCall;
+      
       router.push('/users');
       router.refresh();
     } catch (err: any) {
-      setError(err.message || 'An error occurred');
+      // Error feedback is handled by toast.promise
+    } finally {
       setLoading(false);
     }
   };
@@ -76,11 +82,6 @@ export function UserForm({ user }: UserFormProps) {
     <Card className="max-w-2xl border-border">
       <CardContent className="p-6">
         <form onSubmit={handleSubmit} className="space-y-6">
-          {error && (
-            <div className="p-3 bg-destructive/10 text-destructive rounded-md text-sm">
-              {error}
-            </div>
-          )}
           
           <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
             <div>
diff --git a/apps/web/providers/Providers.tsx b/apps/web/providers/Providers.tsx
index 7b45b42..275e1d3 100644
--- a/apps/web/providers/Providers.tsx
+++ b/apps/web/providers/Providers.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { ThemeProvider } from './ThemeProvider'
 import { QueryProvider } from './QueryProvider'
 import { AuthProvider } from './AuthProvider'
+import { Toaster } from '@/components/ui/sonner'
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
@@ -18,6 +19,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
           {children}
         </AuthProvider>
       </QueryProvider>
+      <Toaster />
     </ThemeProvider>
   )
 }