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) !== '-' && (
+                            {getListCompanyName(contact) !== '-' ? (
-                              <div className="flex items-center gap-2">
+                              <div className="flex items-center gap-3">
-                                <Building2 className="h-4 w-4 text-gray-400" />
+                                <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">
-                                <span className="text-sm text-gray-900">
+                                  {getListCompanyName(contact).charAt(0).toUpperCase()}
-                                  {getListCompanyName(contact)}
+                                </div>
-                                </span>
+                                <div>
+                                  <p className="font-semibold text-gray-900">
+                                    {getListCompanyName(contact)}
+                                  </p>
+                                </div>
                               </div>
+                            ) : (
+                              <span className="text-sm text-gray-400">-</span>
                             )}
                           </td>
 
@@ -609,13 +615,9 @@ function ContactsContent() {
                             </div>
                           </td>
 
-                        <td className="px-6 py-4">
+                          <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,8 +626,7 @@ function ContactsContent() {
                                 </p>
                               )}
                             </div>
-                          </div>
+                          </td>
-                        </td>
 
                           <td className="px-6 py-4">
                             <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(contact.type)}`}>

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,6 +223,386 @@ function TendersContent() {
     }
   }
 
+  const handleEdit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!selectedTender) return
+
+    const errors: Record<string, string> = {}
+
+    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()
+      fetchTenders()
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || 'Failed to update tender')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!selectedTender) return
+
+    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)
+    }
+  }
+
+  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">
+            {t('tenders.tenderNumber')} *
+          </label>
+          <input
+            type="text"
+            value={formData.tenderNumber}
+            onChange={(e) => setFormData({ ...formData, tenderNumber: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+          {formErrors.tenderNumber && (
+            <p className="text-red-500 text-xs mt-1">{formErrors.tenderNumber}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {t('tenders.issuingBody')} *
+          </label>
+          <input
+            type="text"
+            value={formData.issuingBodyName}
+            onChange={(e) => setFormData({ ...formData, issuingBodyName: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+          {formErrors.issuingBodyName && (
+            <p className="text-red-500 text-xs mt-1">{formErrors.issuingBodyName}</p>
+          )}
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {t('tenders.titleLabel')} *
+        </label>
+        <input
+          type="text"
+          value={formData.title}
+          onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg"
+        />
+        {formErrors.title && (
+          <p className="text-red-500 text-xs mt-1">{formErrors.title}</p>
+        )}
+      </div>
+
+      <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">
+            قيمة دفتر الشروط *
+          </label>
+          <input
+            type="number"
+            min={0}
+            value={formData.termsValue || ''}
+            onChange={(e) =>
+              setFormData({ ...formData, termsValue: Number(e.target.value) || 0 })
+            }
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            قيمة التأمينات الأولية *
+          </label>
+          <input
+            type="number"
+            min={0}
+            value={formData.initialBondValue || ''}
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                initialBondValue: Number(e.target.value) || 0,
+                bondValue: Number(e.target.value) || 0,
+              })
+            }
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+          {formErrors.initialBondValue && (
+            <p className="text-red-500 text-xs mt-1">{formErrors.initialBondValue}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            قيمة التأمينات النهائية
+          </label>
+          <input
+            type="number"
+            min={0}
+            value={formData.finalBondValue || ''}
+            onChange={(e) =>
+              setFormData({ ...formData, finalBondValue: Number(e.target.value) || 0 })
+            }
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            زمن الاسترجاع
+          </label>
+          <input
+            type="text"
+            value={formData.finalBondRefundPeriod || ''}
+            onChange={(e) =>
+              setFormData({ ...formData, finalBondRefundPeriod: e.target.value })
+            }
+            placeholder="مثال: بعد 90 يوم من التسليم النهائي"
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+        </div>
+      </div>
+
+      <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">
+            {t('tenders.announcementDate')} *
+          </label>
+          <input
+            type="date"
+            value={formData.announcementDate}
+            onChange={(e) => setFormData({ ...formData, announcementDate: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+          {formErrors.announcementDate && (
+            <p className="text-red-500 text-xs mt-1">{formErrors.announcementDate}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {t('tenders.closingDate')} *
+          </label>
+          <input
+            type="date"
+            value={formData.closingDate}
+            onChange={(e) => setFormData({ ...formData, closingDate: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg"
+          />
+          {formErrors.closingDate && (
+            <p className="text-red-500 text-xs mt-1">{formErrors.closingDate}</p>
+          )}
+        </div>
+      </div>
+
+      <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">
+            {t('tenders.source')}
+          </label>
+          <select
+            value={formData.source}
+            onChange={(e) => setFormData({ ...formData, source: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg"
+          >
+            {(sourceValues.length > 0 ? sourceValues : Object.keys(SOURCE_LABELS)).map((s) => (
+              <option key={s} value={s}>
+                {SOURCE_LABELS[s] || s}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {t('tenders.announcementType')}
+          </label>
+          <select
+            value={formData.announcementType}
+            onChange={(e) => setFormData({ ...formData, announcementType: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg"
+          >
+            {(announcementTypeValues.length > 0
+              ? announcementTypeValues
+              : Object.keys(ANNOUNCEMENT_LABELS)
+            ).map((a) => (
+              <option key={a} value={a}>
+                {ANNOUNCEMENT_LABELS[a] || a}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <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">
+            زيارة الموقع
+          </label>
+          <select
+            value={formData.siteVisitRequired ? 'YES' : 'NO'}
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                siteVisitRequired: e.target.value === 'YES',
+                siteVisitLocation: e.target.value === 'YES' ? formData.siteVisitLocation || '' : '',
+              })
+            }
+            className="w-full px-3 py-2 border rounded-lg"
+          >
+            <option value="NO">غير إجبارية</option>
+            <option value="YES">إجبارية</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            مكان استلام دفتر الشروط - المحافظة
+          </label>
+          <select
+            value={formData.termsPickupProvince || ''}
+            onChange={(e) => setFormData({ ...formData, termsPickupProvince: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg"
+          >
+            <option value="">اختر المحافظة</option>
+            {SYRIA_PROVINCES.map((province) => (
+              <option key={province} value={province}>
+                {province}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {formData.siteVisitRequired && (
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            مكان الزيارة *
+          </label>
+          <input
+            type="text"
+            value={formData.siteVisitLocation || ''}
+            onChange={(e) => setFormData({ ...formData, siteVisitLocation: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg"
+            placeholder="اكتب مكان أو عنوان زيارة الموقع"
+          />
+          {formErrors.siteVisitLocation && (
+            <p className="text-red-500 text-xs mt-1">{formErrors.siteVisitLocation}</p>
+          )}
+        </div>
+      )}
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {t('tenders.announcementLink')}
+        </label>
+        <input
+          type="url"
+          value={formData.announcementLink || ''}
+          onChange={(e) => setFormData({ ...formData, announcementLink: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {t('common.notes')}
+        </label>
+        <textarea
+          value={formData.notes || ''}
+          onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg"
+          rows={2}
+        />
+      </div>
+
+      {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>
+            <p className="text-sm font-medium text-amber-800">
+              {t('tenders.duplicateWarning') || 'Possible duplicates found'}
+            </p>
+            <ul className="text-sm text-amber-700 mt-1 list-disc list-inside">
+              {possibleDuplicates.slice(0, 3).map((d) => (
+                <li key={d.id}>
+                  <Link href={`/tenders/${d.id}`} className="underline">
+                    {d.tenderNumber} - {d.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+
+      <div className="flex justify-end gap-2 pt-4">
+        <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>
+
+        <button
+          type="submit"
+          disabled={submitting}
+          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" />}
+          {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">
@@ -201,16 +628,18 @@ function TendersContent() {
             </div>
           </div>
 
-          <button
+          {canCreateTender && (
-            onClick={() => {
+            <button
-              resetForm()
+              onClick={() => {
-              setShowCreateModal(true)
+                resetForm()
-            }}
+                setShowCreateModal(true)
-            className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
+              }}
-          >
+              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'}
+              <Plus className="h-5 w-5" />
-          </button>
+              {t('tenders.addTender') || 'Add Tender'}
+            </button>
+          )}
         </div>
 
         <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
@@ -251,22 +680,22 @@ function TendersContent() {
               <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">
+                    <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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <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-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
                       {t('common.actions')}
                     </th>
                   </tr>
@@ -275,21 +704,21 @@ function TendersContent() {
                 <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">
+                      <td className="px-6 py-4 text-sm font-semibold text-gray-900 text-right align-middle">
                         {tender.tenderNumber}
                       </td>
-                      <td className="px-4 py-3 text-sm text-gray-900">
+                      <td className="px-6 py-4 text-sm text-gray-900 text-right align-middle">
                         {tender.title}
                       </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">
+                      <td className="px-6 py-4 text-sm text-gray-600 text-right align-middle">
                         {tender.issuingBodyName}
                       </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">
+                      <td className="px-6 py-4 text-sm text-gray-600 text-right align-middle">
                         {tender.closingDate?.split('T')[0]}
                       </td>
-                      <td className="px-4 py-3">
+                      <td className="px-6 py-4 text-right align-middle">
                         <span
-                          className={`px-2 py-1 text-xs rounded-full ${
+                          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'
@@ -300,14 +729,41 @@ function TendersContent() {
                           {tender.status}
                         </span>
                       </td>
-                      <td className="px-4 py-3 text-right">
+                      <td className="px-6 py-4 text-right align-middle">
-                        <Link
+                        <div className="flex items-center justify-end gap-3">
-                          href={`/tenders/${tender.id}`}
+                          {canViewTender && (
-                          className="inline-flex items-center gap-1 text-indigo-600 hover:underline"
+                            <Link
-                        >
+                              href={`/tenders/${tender.id}`}
-                          <Eye className="h-4 w-4" />
+                              className="p-1.5 text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
-                          {t('common.view') || 'View'}
+                              title={t('common.view') || 'View'}
-                        </Link>
+                            >
+                              <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>
                   ))}
@@ -351,316 +807,79 @@ function TendersContent() {
         }}
         title={t('tenders.addTender') || 'Add Tender'}
       >
-        <form onSubmit={handleCreate} className="space-y-4">
+        {renderTenderForm('create')}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      </Modal>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                {t('tenders.tenderNumber')} *
-              </label>
-              <input
-                type="text"
-                value={formData.tenderNumber}
-                onChange={(e) => setFormData({ ...formData, tenderNumber: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg"
-              />
-              {formErrors.tenderNumber && (
-                <p className="text-red-500 text-xs mt-1">{formErrors.tenderNumber}</p>
-              )}
-            </div>
 
-            <div>
+      <Modal
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+        isOpen={showEditModal}
-                {t('tenders.issuingBody')} *
+        onClose={() => {
-              </label>
+          setShowEditModal(false)
-              <input
+          setSelectedTender(null)
-                type="text"
+          resetForm()
-                value={formData.issuingBodyName}
+        }}
-                onChange={(e) => setFormData({ ...formData, issuingBodyName: e.target.value })}
+        title={t('common.edit') || 'Edit Tender'}
-                className="w-full px-3 py-2 border rounded-lg"
+      >
-              />
+        {renderTenderForm('edit')}
-              {formErrors.issuingBodyName && (
+      </Modal>
-                <p className="text-red-500 text-xs mt-1">{formErrors.issuingBodyName}</p>
-              )}
-            </div>
-          </div>
 
-          <div>
+      {showDeleteDialog && selectedTender && (
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+        <div className="fixed inset-0 z-50 overflow-y-auto">
-              {t('tenders.titleLabel')} *
+          <div
-            </label>
+            className="fixed inset-0 bg-black bg-opacity-50"
-            <input
+            onClick={() => {
-              type="text"
+              setShowDeleteDialog(false)
-              value={formData.title}
+              setSelectedTender(null)
-              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+            }}
-              className="w-full px-3 py-2 border rounded-lg"
+          />
-            />
+          <div className="flex min-h-screen items-center justify-center p-4">
-            {formErrors.title && (
+            <div className="relative bg-white rounded-xl shadow-2xl p-6 max-w-md w-full">
-              <p className="text-red-500 text-xs mt-1">{formErrors.title}</p>
+              <div className="flex items-center gap-4 mb-4">
-            )}
+                <div className="bg-red-100 p-3 rounded-full">
-          </div>
+                  <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>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <p className="text-gray-700 mb-6">
-            <div>
+                Are you sure you want to delete tender{' '}
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+                <span className="font-semibold">{selectedTender.tenderNumber}</span>?
-                قيمة دفتر الشروط *
+              </p>
-              </label>
-              <input
-                type="number"
-                min={0}
-                value={formData.termsValue || ''}
-                onChange={(e) =>
-                  setFormData({ ...formData, termsValue: Number(e.target.value) || 0 })
-                }
-                className="w-full px-3 py-2 border rounded-lg"
-              />
-            </div>
 
-            <div>
+              <div className="flex items-center justify-end gap-3">
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+                <button
-                قيمة التأمينات الأولية *
+                  onClick={() => {
-              </label>
+                    setShowDeleteDialog(false)
-              <input
+                    setSelectedTender(null)
-                type="number"
+                  }}
-                min={0}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
-                value={formData.initialBondValue || ''}
+                  disabled={submitting}
-                onChange={(e) =>
+                >
-                  setFormData({
+                  {t('common.cancel') || 'Cancel'}
-                    ...formData,
+                </button>
-                    initialBondValue: Number(e.target.value) || 0,
+                <button
-                    bondValue: Number(e.target.value) || 0,
+                  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}
-                className="w-full px-3 py-2 border rounded-lg"
+                >
-              />
+                  {submitting ? (
-              {formErrors.initialBondValue && (
+                    <>
-                <p className="text-red-500 text-xs mt-1">{formErrors.initialBondValue}</p>
+                      <Loader2 className="h-4 w-4 animate-spin" />
-              )}
+                      Deleting...
-            </div>
+                    </>
-
+                  ) : (
-            <div>
+                    t('common.delete') || 'Delete'
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+                  )}
-                قيمة التأمينات النهائية
+                </button>
-              </label>
-              <input
-                type="number"
-                min={0}
-                value={formData.finalBondValue || ''}
-                onChange={(e) =>
-                  setFormData({ ...formData, finalBondValue: Number(e.target.value) || 0 })
-                }
-                className="w-full px-3 py-2 border rounded-lg"
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                زمن الاسترجاع
-              </label>
-              <input
-                type="text"
-                value={formData.finalBondRefundPeriod || ''}
-                onChange={(e) =>
-                  setFormData({ ...formData, finalBondRefundPeriod: e.target.value })
-                }
-                placeholder="مثال: بعد 90 يوم من التسليم النهائي"
-                className="w-full px-3 py-2 border rounded-lg"
-              />
-            </div>
-          </div>
-
-          <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">
-                {t('tenders.announcementDate')} *
-              </label>
-              <input
-                type="date"
-                value={formData.announcementDate}
-                onChange={(e) => setFormData({ ...formData, announcementDate: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg"
-              />
-              {formErrors.announcementDate && (
-                <p className="text-red-500 text-xs mt-1">{formErrors.announcementDate}</p>
-              )}
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                {t('tenders.closingDate')} *
-              </label>
-              <input
-                type="date"
-                value={formData.closingDate}
-                onChange={(e) => setFormData({ ...formData, closingDate: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg"
-              />
-              {formErrors.closingDate && (
-                <p className="text-red-500 text-xs mt-1">{formErrors.closingDate}</p>
-              )}
-            </div>
-          </div>
-
-          <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">
-                {t('tenders.source')}
-              </label>
-              <select
-                value={formData.source}
-                onChange={(e) => setFormData({ ...formData, source: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg"
-              >
-                {sourceValues.map((s) => (
-                  <option key={s} value={s}>
-                    {SOURCE_LABELS[s] || s}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                {t('tenders.announcementType')}
-              </label>
-              <select
-                value={formData.announcementType}
-                onChange={(e) => setFormData({ ...formData, announcementType: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg"
-              >
-                {announcementTypeValues.map((a) => (
-                  <option key={a} value={a}>
-                    {ANNOUNCEMENT_LABELS[a] || a}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <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">
-                زيارة الموقع
-              </label>
-              <select
-                value={formData.siteVisitRequired ? 'YES' : 'NO'}
-                onChange={(e) =>
-                  setFormData({
-                    ...formData,
-                    siteVisitRequired: e.target.value === 'YES',
-                    siteVisitLocation: e.target.value === 'YES' ? formData.siteVisitLocation || '' : '',
-                  })
-                }
-                className="w-full px-3 py-2 border rounded-lg"
-              >
-                <option value="NO">غير إجبارية</option>
-                <option value="YES">إجبارية</option>
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                مكان استلام دفتر الشروط - المحافظة
-              </label>
-              <select
-                value={formData.termsPickupProvince || ''}
-                onChange={(e) => setFormData({ ...formData, termsPickupProvince: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg"
-              >
-                <option value="">اختر المحافظة</option>
-                {SYRIA_PROVINCES.map((province) => (
-                  <option key={province} value={province}>
-                    {province}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          {formData.siteVisitRequired && (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                مكان الزيارة *
-              </label>
-              <input
-                type="text"
-                value={formData.siteVisitLocation || ''}
-                onChange={(e) => setFormData({ ...formData, siteVisitLocation: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg"
-                placeholder="اكتب مكان أو عنوان زيارة الموقع"
-              />
-              {formErrors.siteVisitLocation && (
-                <p className="text-red-500 text-xs mt-1">{formErrors.siteVisitLocation}</p>
-              )}
-            </div>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              {t('tenders.announcementLink')}
-            </label>
-            <input
-              type="url"
-              value={formData.announcementLink || ''}
-              onChange={(e) => setFormData({ ...formData, announcementLink: e.target.value })}
-              className="w-full px-3 py-2 border rounded-lg"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              {t('common.notes')}
-            </label>
-            <textarea
-              value={formData.notes || ''}
-              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
-              className="w-full px-3 py-2 border rounded-lg"
-              rows={2}
-            />
-          </div>
-
-          {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>
-                <p className="text-sm font-medium text-amber-800">
-                  {t('tenders.duplicateWarning') || 'Possible duplicates found'}
-                </p>
-                <ul className="text-sm text-amber-700 mt-1 list-disc list-inside">
-                  {possibleDuplicates.slice(0, 3).map((d) => (
-                    <li key={d.id}>
-                      <Link href={`/tenders/${d.id}`} className="underline">
-                        {d.tenderNumber} - {d.title}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
               </div>
             </div>
-          )}
-
-          <div className="flex justify-end gap-2 pt-4">
-            <button
-              type="button"
-              onClick={() => {
-                setShowCreateModal(false)
-                resetForm()
-              }}
-              className="px-4 py-2 border rounded-lg"
-            >
-              {t('common.cancel')}
-            </button>
-
-            <button
-              type="submit"
-              disabled={submitting}
-              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')}
-            </button>
           </div>
-        </form>
+        </div>
-      </Modal>
+      )}
     </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)