add edit & delete button to tender & update contacts dashbaord

backend/src/modules/tenders/tenders.controller.ts

@@ -27,6 +27,20 @@ export class TendersController {
     }
   }
 
+  async delete(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      await tendersService.delete(req.params.id, req.user!.id)
+      res.json(
+        ResponseFormatter.success(
+          true,
+          'تم حذف المناقصة بنجاح - Tender deleted successfully'
+        )
+      )
+    } catch (error) {
+      next(error)
+    }
+  }
+
   async findAll(req: AuthRequest, res: Response, next: NextFunction) {
     try {
       const page = parseInt(req.query.page as string) || 1;

backend/src/modules/tenders/tenders.routes.ts

@@ -112,6 +112,14 @@ router.put(
   tendersController.update
 );
 
+router.delete(
+  '/:id',
+  authorize('tenders', 'tenders', 'delete'),
+  param('id').isUUID(),
+  validate,
+  tendersController.delete
+);
+
 // Tender history
 router.get(
   '/:id/history',

backend/src/modules/tenders/tenders.service.ts

@@ -125,6 +125,62 @@ class TendersService {
     }
   }
 
+  async delete(id: string, userId: string) {
+    const tender = await prisma.tender.findUnique({
+      where: { id },
+      include: {
+        attachments: true,
+        directives: {
+          include: {
+            attachments: true,
+          },
+        },
+        convertedDeal: {
+          select: { id: true },
+        },
+      },
+    });
+
+    if (!tender) {
+      throw new AppError(404, 'Tender not found');
+    }
+
+    if (tender.convertedDeal) {
+      throw new AppError(400, 'Cannot delete tender that has been converted to deal');
+    }
+
+    for (const attachment of tender.attachments || []) {
+      if (attachment.path && fs.existsSync(attachment.path)) {
+        fs.unlinkSync(attachment.path);
+      }
+    }
+
+    for (const directive of tender.directives || []) {
+      for (const attachment of directive.attachments || []) {
+        if (attachment.path && fs.existsSync(attachment.path)) {
+          fs.unlinkSync(attachment.path);
+        }
+      }
+    }
+
+    await prisma.tender.delete({
+      where: { id },
+    });
+
+    await AuditLogger.log({
+      entityType: 'TENDER',
+      entityId: id,
+      action: 'DELETE',
+      userId,
+      changes: {
+        deletedTenderNumber: tender.tenderNumber,
+        deletedTitle: tender.title,
+      },
+    });
+
+    return true;
+  }
+
   private buildTenderNotes(
     plainNotes?: string | null,
     extra?: {

frontend/src/app/contacts/page.tsx

@@ -582,13 +582,19 @@ function ContactsContent() {
                           </td>
 
                           <td className="px-6 py-4">
-                            {getListCompanyName(contact) !== '-' && (
-                              <div className="flex items-center gap-2">
-                                <Building2 className="h-4 w-4 text-gray-400" />
-                                <span className="text-sm text-gray-900">
-                                  {getListCompanyName(contact)}
-                                </span>
+                            {getListCompanyName(contact) !== '-' ? (
+                              <div className="flex items-center gap-3">
+                                <div className="h-10 w-10 rounded-full bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center text-white font-bold">
+                                  {getListCompanyName(contact).charAt(0).toUpperCase()}
                                 </div>
+                                <div>
+                                  <p className="font-semibold text-gray-900">
+                                    {getListCompanyName(contact)}
+                                  </p>
+                                </div>
+                              </div>
+                            ) : (
+                              <span className="text-sm text-gray-400">-</span>
                             )}
                           </td>
 
@@ -610,12 +616,8 @@ function ContactsContent() {
                           </td>
 
                           <td className="px-6 py-4">
-                          <div className="flex items-center gap-3">
-                            <div className="h-10 w-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold">
-                              {getListContactName(contact).charAt(0)}
-                            </div>
                             <div>
-                              <p className="font-semibold text-gray-900">
+                              <p className="text-sm text-gray-900">
                                 {getListContactName(contact)}
                               </p>
                               {getListContactNameAr(contact) && (
@@ -624,7 +626,6 @@ function ContactsContent() {
                                 </p>
                               )}
                             </div>
-                          </div>
                           </td>
 
                           <td className="px-6 py-4">

frontend/src/app/tenders/page.tsx

@@ -14,7 +14,10 @@ import {
   ArrowLeft,
   Eye,
   Loader2,
+  Edit,
+  Trash2,
 } from 'lucide-react'
+import { useAuth } from '@/contexts/AuthContext'
 import { tendersAPI, Tender, CreateTenderData, TenderFilters } from '@/lib/api/tenders'
 import { useLanguage } from '@/contexts/LanguageContext'
 
@@ -59,14 +62,12 @@ const getInitialFormData = (): CreateTenderData => ({
   title: '',
   termsValue: 0,
   bondValue: 0,
-
   initialBondValue: 0,
   finalBondValue: 0,
   finalBondRefundPeriod: '',
   siteVisitRequired: false,
   siteVisitLocation: '',
   termsPickupProvince: '',
-
   announcementDate: '',
   closingDate: '',
   source: 'MANUAL',
@@ -76,6 +77,8 @@ const getInitialFormData = (): CreateTenderData => ({
 
 function TendersContent() {
   const { t } = useLanguage()
+  const { hasPermission } = useAuth()
+
   const [tenders, setTenders] = useState<Tender[]>([])
   const [loading, setLoading] = useState(true)
   const [currentPage, setCurrentPage] = useState(1)
@@ -93,6 +96,14 @@ function TendersContent() {
   const [showDuplicateWarning, setShowDuplicateWarning] = useState(false)
   const [sourceValues, setSourceValues] = useState<string[]>([])
   const [announcementTypeValues, setAnnouncementTypeValues] = useState<string[]>([])
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [selectedTender, setSelectedTender] = useState<Tender | null>(null)
+
+  const canCreateTender = hasPermission('tenders', 'create')
+  const canViewTender = hasPermission('tenders', 'view')
+  const canEditTender = hasPermission('tenders', 'edit')
+  const canDeleteTender = hasPermission('tenders', 'delete')
 
   const resetForm = () => {
     setFormData(getInitialFormData())
@@ -101,6 +112,42 @@ function TendersContent() {
     setShowDuplicateWarning(false)
   }
 
+  const fillFormFromTender = (tender: Tender): CreateTenderData => ({
+    tenderNumber: tender.tenderNumber || '',
+    issuingBodyName: tender.issuingBodyName || '',
+    title: tender.title || '',
+    termsValue: Number(tender.termsValue || 0),
+    bondValue: Number(tender.bondValue || 0),
+    initialBondValue: Number(tender.initialBondValue ?? tender.bondValue ?? 0),
+    finalBondValue: tender.finalBondValue != null ? Number(tender.finalBondValue) : 0,
+    finalBondRefundPeriod: tender.finalBondRefundPeriod || '',
+    siteVisitRequired: !!tender.siteVisitRequired,
+    siteVisitLocation: tender.siteVisitLocation || '',
+    termsPickupProvince: tender.termsPickupProvince || '',
+    announcementDate: tender.announcementDate?.split('T')[0] || '',
+    closingDate: tender.closingDate?.split('T')[0] || '',
+    announcementLink: tender.announcementLink || '',
+    source: tender.source || 'MANUAL',
+    sourceOther: tender.sourceOther || '',
+    announcementType: tender.announcementType || 'FIRST',
+    notes: tender.notes || '',
+    contactId: tender.contactId || '',
+  })
+
+  const openEditModal = (tender: Tender) => {
+    setSelectedTender(tender)
+    setFormData(fillFormFromTender(tender))
+    setFormErrors({})
+    setPossibleDuplicates([])
+    setShowDuplicateWarning(false)
+    setShowEditModal(true)
+  }
+
+  const openDeleteDialog = (tender: Tender) => {
+    setSelectedTender(tender)
+    setShowDeleteDialog(true)
+  }
+
   const fetchTenders = useCallback(async () => {
     setLoading(true)
     try {
@@ -176,182 +223,67 @@ function TendersContent() {
     }
   }
 
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="mb-6 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Link
-              href="/dashboard"
-              className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
-            >
-              <ArrowLeft className="h-5 w-5" />
-            </Link>
+  const handleEdit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!selectedTender) return
 
-            <div className="flex items-center gap-2">
-              <FileText className="h-8 w-8 text-indigo-600" />
-              <div>
-                <h1 className="text-2xl font-bold text-gray-900">
-                  {t('nav.tenders') || 'Tenders'}
-                </h1>
-                <p className="text-sm text-gray-600">
-                  {t('tenders.subtitle') || 'Tender Management'}
-                </p>
-              </div>
-            </div>
-          </div>
+    const errors: Record<string, string> = {}
 
-          <button
-            onClick={() => {
+    if (!formData.tenderNumber?.trim()) errors.tenderNumber = t('common.required')
+    if (!formData.issuingBodyName?.trim()) errors.issuingBodyName = t('common.required')
+    if (!formData.title?.trim()) errors.title = t('common.required')
+    if (!formData.announcementDate) errors.announcementDate = t('common.required')
+    if (!formData.closingDate) errors.closingDate = t('common.required')
+
+    if (Number(formData.initialBondValue || 0) < 0) {
+      errors.initialBondValue = t('common.required')
+    }
+
+    if (formData.siteVisitRequired && !formData.siteVisitLocation?.trim()) {
+      errors.siteVisitLocation = t('common.required')
+    }
+
+    setFormErrors(errors)
+    if (Object.keys(errors).length > 0) return
+
+    setSubmitting(true)
+    try {
+      await tendersAPI.update(selectedTender.id, {
+        ...formData,
+        bondValue: Number(formData.initialBondValue ?? formData.bondValue ?? 0),
+      })
+
+      toast.success(t('tenders.updateSuccess') || 'Tender updated successfully')
+      setShowEditModal(false)
+      setSelectedTender(null)
       resetForm()
-              setShowCreateModal(true)
-            }}
-            className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
-          >
-            <Plus className="h-5 w-5" />
-            {t('tenders.addTender') || 'Add Tender'}
-          </button>
-        </div>
+      fetchTenders()
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || 'Failed to update tender')
+    } finally {
+      setSubmitting(false)
+    }
+  }
 
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-          <div className="p-4 border-b border-gray-200 flex flex-wrap gap-4 items-center">
-            <div className="relative flex-1 min-w-[200px]">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-              <input
-                type="text"
-                placeholder={t('tenders.searchPlaceholder') || 'Search by number, title, issuing body...'}
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-              />
-            </div>
+  const handleDelete = async () => {
+    if (!selectedTender) return
 
-            <select
-              value={selectedStatus}
-              onChange={(e) => setSelectedStatus(e.target.value)}
-              className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-            >
-              <option value="all">{t('common.all') || 'All status'}</option>
-              <option value="ACTIVE">Active</option>
-              <option value="CONVERTED_TO_DEAL">Converted</option>
-              <option value="CANCELLED">Cancelled</option>
-            </select>
-          </div>
+    setSubmitting(true)
+    try {
+      await tendersAPI.delete(selectedTender.id)
+      toast.success(t('tenders.deleteSuccess') || 'Tender deleted successfully')
+      setShowDeleteDialog(false)
+      setSelectedTender(null)
+      fetchTenders()
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || 'Failed to delete tender')
+    } finally {
+      setSubmitting(false)
+    }
+  }
 
-          {loading ? (
-            <div className="flex justify-center py-12">
-              <LoadingSpinner />
-            </div>
-          ) : tenders.length === 0 ? (
-            <div className="text-center py-12 text-gray-500">
-              {t('tenders.noTenders') || 'No tenders found.'}
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-gray-200">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                      {t('tenders.tenderNumber') || 'Number'}
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                      {t('tenders.title') || 'Title'}
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                      {t('tenders.issuingBody') || 'Issuing body'}
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                      {t('tenders.closingDate') || 'Closing date'}
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                      {t('common.status')}
-                    </th>
-                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
-                      {t('common.actions')}
-                    </th>
-                  </tr>
-                </thead>
-
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {tenders.map((tender) => (
-                    <tr key={tender.id} className="hover:bg-gray-50">
-                      <td className="px-4 py-3 text-sm font-medium text-gray-900">
-                        {tender.tenderNumber}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-900">
-                        {tender.title}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">
-                        {tender.issuingBodyName}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">
-                        {tender.closingDate?.split('T')[0]}
-                      </td>
-                      <td className="px-4 py-3">
-                        <span
-                          className={`px-2 py-1 text-xs rounded-full ${
-                            tender.status === 'ACTIVE'
-                              ? 'bg-green-100 text-green-800'
-                              : tender.status === 'CONVERTED_TO_DEAL'
-                                ? 'bg-blue-100 text-blue-800'
-                                : 'bg-gray-100 text-gray-800'
-                          }`}
-                        >
-                          {tender.status}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-right">
-                        <Link
-                          href={`/tenders/${tender.id}`}
-                          className="inline-flex items-center gap-1 text-indigo-600 hover:underline"
-                        >
-                          <Eye className="h-4 w-4" />
-                          {t('common.view') || 'View'}
-                        </Link>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-
-          {totalPages > 1 && (
-            <div className="px-4 py-3 border-t border-gray-200 flex items-center justify-between">
-              <p className="text-sm text-gray-600">
-                {t('common.showing') || 'Showing'} {(currentPage - 1) * pageSize + 1}–
-                {Math.min(currentPage * pageSize, total)} {t('common.of') || 'of'} {total}
-              </p>
-              <div className="flex gap-2">
-                <button
-                  disabled={currentPage <= 1}
-                  onClick={() => setCurrentPage((p) => p - 1)}
-                  className="px-3 py-1 border rounded disabled:opacity-50"
-                >
-                  {t('crm.paginationPrevious') || 'Previous'}
-                </button>
-                <button
-                  disabled={currentPage >= totalPages}
-                  onClick={() => setCurrentPage((p) => p + 1)}
-                  className="px-3 py-1 border rounded disabled:opacity-50"
-                >
-                  {t('crm.paginationNext') || 'Next'}
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      <Modal
-        isOpen={showCreateModal}
-        onClose={() => {
-          setShowCreateModal(false)
-          resetForm()
-        }}
-        title={t('tenders.addTender') || 'Add Tender'}
-      >
-        <form onSubmit={handleCreate} className="space-y-4">
+  const renderTenderForm = (mode: 'create' | 'edit') => (
+    <form onSubmit={mode === 'create' ? handleCreate : handleEdit} className="space-y-4">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">
@@ -510,7 +442,7 @@ function TendersContent() {
             onChange={(e) => setFormData({ ...formData, source: e.target.value })}
             className="w-full px-3 py-2 border rounded-lg"
           >
-                {sourceValues.map((s) => (
+            {(sourceValues.length > 0 ? sourceValues : Object.keys(SOURCE_LABELS)).map((s) => (
               <option key={s} value={s}>
                 {SOURCE_LABELS[s] || s}
               </option>
@@ -527,7 +459,10 @@ function TendersContent() {
             onChange={(e) => setFormData({ ...formData, announcementType: e.target.value })}
             className="w-full px-3 py-2 border rounded-lg"
           >
-                {announcementTypeValues.map((a) => (
+            {(announcementTypeValues.length > 0
+              ? announcementTypeValues
+              : Object.keys(ANNOUNCEMENT_LABELS)
+            ).map((a) => (
               <option key={a} value={a}>
                 {ANNOUNCEMENT_LABELS[a] || a}
               </option>
@@ -618,7 +553,7 @@ function TendersContent() {
         />
       </div>
 
-          {showDuplicateWarning && possibleDuplicates.length > 0 && (
+      {mode === 'create' && showDuplicateWarning && possibleDuplicates.length > 0 && (
         <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-start gap-2">
           <AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
           <div>
@@ -642,10 +577,16 @@ function TendersContent() {
         <button
           type="button"
           onClick={() => {
+            if (mode === 'create') {
               setShowCreateModal(false)
+            } else {
+              setShowEditModal(false)
+              setSelectedTender(null)
+            }
             resetForm()
           }}
           className="px-4 py-2 border rounded-lg"
+          disabled={submitting}
         >
           {t('common.cancel')}
         </button>
@@ -656,11 +597,289 @@ function TendersContent() {
           className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 flex items-center gap-2"
         >
           {submitting && <Loader2 className="h-4 w-4 animate-spin" />}
-              {t('common.save')}
+          {mode === 'create' ? t('common.save') : (t('common.save') || 'Save')}
         </button>
       </div>
     </form>
+  )
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-6 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Link
+              href="/dashboard"
+              className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </Link>
+
+            <div className="flex items-center gap-2">
+              <FileText className="h-8 w-8 text-indigo-600" />
+              <div>
+                <h1 className="text-2xl font-bold text-gray-900">
+                  {t('nav.tenders') || 'Tenders'}
+                </h1>
+                <p className="text-sm text-gray-600">
+                  {t('tenders.subtitle') || 'Tender Management'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {canCreateTender && (
+            <button
+              onClick={() => {
+                resetForm()
+                setShowCreateModal(true)
+              }}
+              className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
+            >
+              <Plus className="h-5 w-5" />
+              {t('tenders.addTender') || 'Add Tender'}
+            </button>
+          )}
+        </div>
+
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+          <div className="p-4 border-b border-gray-200 flex flex-wrap gap-4 items-center">
+            <div className="relative flex-1 min-w-[200px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder={t('tenders.searchPlaceholder') || 'Search by number, title, issuing body...'}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              />
+            </div>
+
+            <select
+              value={selectedStatus}
+              onChange={(e) => setSelectedStatus(e.target.value)}
+              className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
+            >
+              <option value="all">{t('common.all') || 'All status'}</option>
+              <option value="ACTIVE">Active</option>
+              <option value="CONVERTED_TO_DEAL">Converted</option>
+              <option value="CANCELLED">Cancelled</option>
+            </select>
+          </div>
+
+          {loading ? (
+            <div className="flex justify-center py-12">
+              <LoadingSpinner />
+            </div>
+          ) : tenders.length === 0 ? (
+            <div className="text-center py-12 text-gray-500">
+              {t('tenders.noTenders') || 'No tenders found.'}
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                      {t('tenders.tenderNumber') || 'Number'}
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                      {t('tenders.title') || 'Title'}
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                      {t('tenders.issuingBody') || 'Issuing body'}
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                      {t('tenders.closingDate') || 'Closing date'}
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                      {t('common.status')}
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                      {t('common.actions')}
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {tenders.map((tender) => (
+                    <tr key={tender.id} className="hover:bg-gray-50">
+                      <td className="px-6 py-4 text-sm font-semibold text-gray-900 text-right align-middle">
+                        {tender.tenderNumber}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-gray-900 text-right align-middle">
+                        {tender.title}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-gray-600 text-right align-middle">
+                        {tender.issuingBodyName}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-gray-600 text-right align-middle">
+                        {tender.closingDate?.split('T')[0]}
+                      </td>
+                      <td className="px-6 py-4 text-right align-middle">
+                        <span
+                          className={`inline-flex px-2.5 py-1 text-xs font-medium rounded-full ${
+                            tender.status === 'ACTIVE'
+                              ? 'bg-green-100 text-green-800'
+                              : tender.status === 'CONVERTED_TO_DEAL'
+                                ? 'bg-blue-100 text-blue-800'
+                                : 'bg-gray-100 text-gray-800'
+                          }`}
+                        >
+                          {tender.status}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 text-right align-middle">
+                        <div className="flex items-center justify-end gap-3">
+                          {canViewTender && (
+                            <Link
+                              href={`/tenders/${tender.id}`}
+                              className="p-1.5 text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
+                              title={t('common.view') || 'View'}
+                            >
+                              <Eye className="h-4 w-4" />
+                            </Link>
+                          )}
+
+                          {canEditTender && (
+                            <button
+                              type="button"
+                              onClick={() => openEditModal(tender)}
+                              className="p-1.5 text-green-600 hover:bg-green-50 rounded-md transition-colors"
+                              title={t('common.edit') || 'Edit'}
+                            >
+                              <Edit className="h-4 w-4" />
+                            </button>
+                          )}
+
+                          {canDeleteTender && (
+                            <button
+                              type="button"
+                              onClick={() => openDeleteDialog(tender)}
+                              className="p-1.5 text-red-600 hover:bg-red-50 rounded-md transition-colors"
+                              title={t('common.delete') || 'Delete'}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </button>
+
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {totalPages > 1 && (
+            <div className="px-4 py-3 border-t border-gray-200 flex items-center justify-between">
+              <p className="text-sm text-gray-600">
+                {t('common.showing') || 'Showing'} {(currentPage - 1) * pageSize + 1}–
+                {Math.min(currentPage * pageSize, total)} {t('common.of') || 'of'} {total}
+              </p>
+              <div className="flex gap-2">
+                <button
+                  disabled={currentPage <= 1}
+                  onClick={() => setCurrentPage((p) => p - 1)}
+                  className="px-3 py-1 border rounded disabled:opacity-50"
+                >
+                  {t('crm.paginationPrevious') || 'Previous'}
+                </button>
+                <button
+                  disabled={currentPage >= totalPages}
+                  onClick={() => setCurrentPage((p) => p + 1)}
+                  className="px-3 py-1 border rounded disabled:opacity-50"
+                >
+                  {t('crm.paginationNext') || 'Next'}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Modal
+        isOpen={showCreateModal}
+        onClose={() => {
+          setShowCreateModal(false)
+          resetForm()
+        }}
+        title={t('tenders.addTender') || 'Add Tender'}
+      >
+        {renderTenderForm('create')}
       </Modal>
+
+      <Modal
+        isOpen={showEditModal}
+        onClose={() => {
+          setShowEditModal(false)
+          setSelectedTender(null)
+          resetForm()
+        }}
+        title={t('common.edit') || 'Edit Tender'}
+      >
+        {renderTenderForm('edit')}
+      </Modal>
+
+      {showDeleteDialog && selectedTender && (
+        <div className="fixed inset-0 z-50 overflow-y-auto">
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50"
+            onClick={() => {
+              setShowDeleteDialog(false)
+              setSelectedTender(null)
+            }}
+          />
+          <div className="flex min-h-screen items-center justify-center p-4">
+            <div className="relative bg-white rounded-xl shadow-2xl p-6 max-w-md w-full">
+              <div className="flex items-center gap-4 mb-4">
+                <div className="bg-red-100 p-3 rounded-full">
+                  <Trash2 className="h-6 w-6 text-red-600" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-bold text-gray-900">
+                    {t('common.delete') || 'Delete Tender'}
+                  </h3>
+                  <p className="text-sm text-gray-600">This action cannot be undone</p>
+                </div>
+              </div>
+
+              <p className="text-gray-700 mb-6">
+                Are you sure you want to delete tender{' '}
+                <span className="font-semibold">{selectedTender.tenderNumber}</span>?
+              </p>
+
+              <div className="flex items-center justify-end gap-3">
+                <button
+                  onClick={() => {
+                    setShowDeleteDialog(false)
+                    setSelectedTender(null)
+                  }}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                  disabled={submitting}
+                >
+                  {t('common.cancel') || 'Cancel'}
+                </button>
+                <button
+                  onClick={handleDelete}
+                  className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+                  disabled={submitting}
+                >
+                  {submitting ? (
+                    <>
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Deleting...
+                    </>
+                  ) : (
+                    t('common.delete') || 'Delete'
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

frontend/src/lib/api/tenders.ts

@@ -167,6 +167,10 @@ export const tendersAPI = {
     return response.data.data
   },
 
+  delete: async (id: string): Promise<void> => {
+    await api.delete(`/tenders/${id}`)
+  },
+
   uploadTenderAttachment: async (tenderId: string, file: File, category?: string): Promise<any> => {
     const formData = new FormData()
     formData.append('file', file)