Spaces:

harfby
/

tem

Running

App Files Files Community

tem / index.html

harfby

Add 3 files

0207bc1 verified about 1 year ago

raw

history blame contribute delete

67.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Supplier Portal - Tender Management System</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.sidebar {
	transition: all 0.3s ease;
	}
	.sidebar.collapsed {
	width: 70px;
	}
	.sidebar.collapsed .nav-text {
	display: none;
	}
	.sidebar.collapsed .logo-text {
	display: none;
	}
	.sidebar.collapsed .nav-item {
	justify-content: center;
	}
	.content {
	transition: all 0.3s ease;
	}
	.content.expanded {
	margin-left: 70px;
	}
	.tender-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	}
	.tender-card {
	transition: all 0.3s ease;
	}
	.progress-bar {
	height: 8px;
	border-radius: 4px;
	background-color: #e0e0e0;
	}
	.progress-fill {
	height: 100%;
	border-radius: 4px;
	background-color: #3b82f6;
	transition: width 0.5s ease;
	}
	.notification-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	font-size: 10px;
	background-color: #ef4444;
	color: white;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	</style>
	</head>
	<body class="bg-gray-100 font-sans">
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<div class="sidebar bg-blue-800 text-white w-64 flex flex-col">
	<div class="p-4 flex items-center space-x-2 border-b border-blue-700">
	<div class="logo-icon text-2xl">
	<i class="fas fa-handshake"></i>
	</div>
	<span class="logo-text text-xl font-bold">TenderPro</span>
	</div>

	<div class="flex-1 overflow-y-auto">
	<div class="p-4 space-y-1">
	<div class="flex items-center justify-between mb-6">
	<div class="flex items-center space-x-2">
	<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
	<i class="fas fa-user"></i>
	</div>
	<div>
	<div class="font-medium">Supplier Name</div>
	<div class="text-xs text-blue-200">Premium Account</div>
	</div>
	</div>
	<button id="toggleSidebar" class="text-blue-200 hover:text-white">
	<i class="fas fa-bars"></i>
	</button>
	</div>

	<div class="space-y-2">
	<a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg bg-blue-700 text-white">
	<i class="fas fa-home"></i>
	<span class="nav-text">Dashboard</span>
	</a>
	<a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
	<i class="fas fa-search"></i>
	<span class="nav-text">Find Tenders</span>
	</a>
	<a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
	<i class="fas fa-file-signature"></i>
	<span class="nav-text">My Applications</span>
	<div class="notification-badge">3</div>
	</a>
	<a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
	<i class="fas fa-bell"></i>
	<span class="nav-text">Notifications</span>
	<div class="notification-badge">5</div>
	</a>
	<a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
	<i class="fas fa-chart-line"></i>
	<span class="nav-text">Performance</span>
	</a>
	<a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
	<i class="fas fa-cog"></i>
	<span class="nav-text">Settings</span>
	</a>
	</div>
	</div>

	<div class="p-4 border-t border-blue-700">
	<div class="text-xs text-blue-300 mb-2 nav-text">SUPPORT</div>
	<a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
	<i class="fas fa-question-circle"></i>
	<span class="nav-text">Help Center</span>
	</a>
	<a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
	<i class="fas fa-sign-out-alt"></i>
	<span class="nav-text">Logout</span>
	</a>
	</div>
	</div>
	</div>

	<!-- Main Content -->
	<div class="content flex-1 overflow-auto">
	<header class="bg-white shadow-sm">
	<div class="px-6 py-4 flex items-center justify-between">
	<h1 class="text-2xl font-bold text-gray-800">Supplier Dashboard</h1>

	<div class="flex items-center space-x-4">
	<div class="relative">
	<button class="p-2 rounded-full hover:bg-gray-100">
	<i class="fas fa-bell text-gray-600"></i>
	<div class="notification-badge">5</div>
	</button>
	</div>
	<div class="relative">
	<button class="p-2 rounded-full hover:bg-gray-100">
	<i class="fas fa-envelope text-gray-600"></i>
	<div class="notification-badge">2</div>
	</button>
	</div>
	<div class="flex items-center space-x-2">
	<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
	<i class="fas fa-user"></i>
	</div>
	<span class="font-medium">Supplier</span>
	</div>
	</div>
	</div>
	</header>

	<main class="p-6">
	<!-- Stats Cards -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
	<div class="bg-white rounded-lg shadow p-6">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-500">Active Tenders</p>
	<h3 class="text-2xl font-bold mt-2">24</h3>
	</div>
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-file-contract text-xl"></i>
	</div>
	</div>
	<div class="mt-4 text-sm text-blue-600 font-medium">
	<i class="fas fa-arrow-up mr-1"></i> 12% from last month
	</div>
	</div>

	<div class="bg-white rounded-lg shadow p-6">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-500">My Applications</p>
	<h3 class="text-2xl font-bold mt-2">8</h3>
	</div>
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-file-signature text-xl"></i>
	</div>
	</div>
	<div class="mt-4 text-sm text-green-600 font-medium">
	<i class="fas fa-arrow-up mr-1"></i> 3 new this week
	</div>
	</div>

	<div class="bg-white rounded-lg shadow p-6">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-500">Won Tenders</p>
	<h3 class="text-2xl font-bold mt-2">3</h3>
	</div>
	<div class="p-3 rounded-full bg-purple-100 text-purple-600">
	<i class="fas fa-trophy text-xl"></i>
	</div>
	</div>
	<div class="mt-4 text-sm text-purple-600 font-medium">
	<i class="fas fa-arrow-up mr-1"></i> 1 new this month
	</div>
	</div>

	<div class="bg-white rounded-lg shadow p-6">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-500">Deadlines</p>
	<h3 class="text-2xl font-bold mt-2">2</h3>
	</div>
	<div class="p-3 rounded-full bg-red-100 text-red-600">
	<i class="fas fa-clock text-xl"></i>
	</div>
	</div>
	<div class="mt-4 text-sm text-red-600 font-medium">
	<i class="fas fa-exclamation-circle mr-1"></i> Urgent action needed
	</div>
	</div>
	</div>

	<!-- Tabs Navigation -->
	<div class="bg-white rounded-lg shadow mb-6">
	<div class="border-b border-gray-200">
	<nav class="flex -mb-px">
	<button id="activeTendersTab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-blue-500 text-blue-600">
	Active Tenders
	</button>
	<button id="myApplicationsTab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
	My Applications
	</button>
	<button id="allTendersTab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
	All Tenders
	</button>
	<button id="recommendedTab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
	Recommended
	</button>
	</nav>
	</div>
	</div>

	<!-- Search and Filter -->
	<div class="bg-white rounded-lg shadow p-4 mb-6">
	<div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
	<div class="relative flex-1 md:max-w-md">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i class="fas fa-search text-gray-400"></i>
	</div>
	<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search tenders...">
	</div>

	<div class="flex space-x-3">
	<div class="relative">
	<select class="appearance-none block w-full pl-3 pr-8 py-2 border border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
	<option>All Categories</option>
	<option>Construction</option>
	<option>IT Services</option>
	<option>Consulting</option>
	<option>Supplies</option>
	</select>
	<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
	<i class="fas fa-chevron-down text-gray-400"></i>
	</div>
	</div>

	<div class="relative">
	<select class="appearance-none block w-full pl-3 pr-8 py-2 border border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
	<option>All Status</option>
	<option>Open</option>
	<option>Closed</option>
	<option>Evaluating</option>
	<option>Awarded</option>
	</select>
	<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
	<i class="fas fa-chevron-down text-gray-400"></i>
	</div>
	</div>

	<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-filter mr-2"></i> Filter
	</button>
	</div>
	</div>
	</div>

	<!-- Active Tenders Content -->
	<div id="activeTendersContent" class="tab-content">
	<h2 class="text-xl font-bold mb-4">Active Tenders You Can Join</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Tender Card 1 -->
	<div class="tender-card bg-white rounded-lg shadow overflow-hidden">
	<div class="p-6">
	<div class="flex justify-between items-start">
	<div>
	<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
	Open
	</span>
	<h3 class="mt-2 text-lg font-bold text-gray-900">Construction of Community Center</h3>
	</div>
	<button class="text-gray-400 hover:text-gray-500">
	<i class="far fa-bookmark"></i>
	</button>
	</div>

	<div class="mt-4">
	<div class="flex items-center text-sm text-gray-500">
	<i class="fas fa-building mr-2"></i>
	<span>Ministry of Infrastructure</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mt-2">
	<i class="fas fa-map-marker-alt mr-2"></i>
	<span>Nairobi, Kenya</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mt-2">
	<i class="fas fa-tag mr-2"></i>
	<span>Construction</span>
	</div>
	</div>

	<div class="mt-6">
	<div class="flex justify-between text-sm mb-1">
	<span class="text-gray-500">Deadline:</span>
	<span class="font-medium">15 Aug 2023</span>
	</div>
	<div class="flex justify-between text-sm">
	<span class="text-gray-500">Budget:</span>
	<span class="font-medium">$250,000 - $300,000</span>
	</div>
	</div>

	<div class="mt-6">
	<div class="progress-bar">
	<div class="progress-fill" style="width: 65%"></div>
	</div>
	<div class="flex justify-between text-xs text-gray-500 mt-1">
	<span>65% complete</span>
	<span>12 days left</span>
	</div>
	</div>
	</div>

	<div class="bg-gray-50 px-6 py-4 flex justify-between items-center">
	<div class="flex space-x-2">
	<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
	<i class="fas fa-users mr-1"></i> 24 Bidders
	</span>
	<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
	<i class="fas fa-file-alt mr-1"></i> Docs Required
	</span>
	</div>
	<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	Apply Now
	</button>
	</div>
	</div>

	<!-- Tender Card 2 -->
	<div class="tender-card bg-white rounded-lg shadow overflow-hidden">
	<div class="p-6">
	<div class="flex justify-between items-start">
	<div>
	<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
	Open
	</span>
	<h3 class="mt-2 text-lg font-bold text-gray-900">IT Infrastructure Upgrade</h3>
	</div>
	<button class="text-gray-400 hover:text-gray-500">
	<i class="far fa-bookmark"></i>
	</button>
	</div>

	<div class="mt-4">
	<div class="flex items-center text-sm text-gray-500">
	<i class="fas fa-building mr-2"></i>
	<span>National Bank</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mt-2">
	<i class="fas fa-map-marker-alt mr-2"></i>
	<span>Countrywide</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mt-2">
	<i class="fas fa-tag mr-2"></i>
	<span>IT Services</span>
	</div>
	</div>

	<div class="mt-6">
	<div class="flex justify-between text-sm mb-1">
	<span class="text-gray-500">Deadline:</span>
	<span class="font-medium">22 Aug 2023</span>
	</div>
	<div class="flex justify-between text-sm">
	<span class="text-gray-500">Budget:</span>
	<span class="font-medium">$500,000+</span>
	</div>
	</div>

	<div class="mt-6">
	<div class="progress-bar">
	<div class="progress-fill" style="width: 40%"></div>
	</div>
	<div class="flex justify-between text-xs text-gray-500 mt-1">
	<span>40% complete</span>
	<span>19 days left</span>
	</div>
	</div>
	</div>

	<div class="bg-gray-50 px-6 py-4 flex justify-between items-center">
	<div class="flex space-x-2">
	<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
	<i class="fas fa-users mr-1"></i> 18 Bidders
	</span>
	<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
	<i class="fas fa-file-alt mr-1"></i> Docs Required
	</span>
	</div>
	<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	Apply Now
	</button>
	</div>
	</div>

	<!-- Tender Card 3 -->
	<div class="tender-card bg-white rounded-lg shadow overflow-hidden">
	<div class="p-6">
	<div class="flex justify-between items-start">
	<div>
	<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
	Limited
	</span>
	<h3 class="mt-2 text-lg font-bold text-gray-900">Medical Supplies Procurement</h3>
	</div>
	<button class="text-gray-400 hover:text-gray-500">
	<i class="far fa-bookmark"></i>
	</button>
	</div>

	<div class="mt-4">
	<div class="flex items-center text-sm text-gray-500">
	<i class="fas fa-building mr-2"></i>
	<span>Ministry of Health</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mt-2">
	<i class="fas fa-map-marker-alt mr-2"></i>
	<span>All Counties</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mt-2">
	<i class="fas fa-tag mr-2"></i>
	<span>Medical Supplies</span>
	</div>
	</div>

	<div class="mt-6">
	<div class="flex justify-between text-sm mb-1">
	<span class="text-gray-500">Deadline:</span>
	<span class="font-medium">05 Sep 2023</span>
	</div>
	<div class="flex justify-between text-sm">
	<span class="text-gray-500">Budget:</span>
	<span class="font-medium">$1,200,000</span>
	</div>
	</div>

	<div class="mt-6">
	<div class="progress-bar">
	<div class="progress-fill" style="width: 25%"></div>
	</div>
	<div class="flex justify-between text-xs text-gray-500 mt-1">
	<span>25% complete</span>
	<span>33 days left</span>
	</div>
	</div>
	</div>

	<div class="bg-gray-50 px-6 py-4 flex justify-between items-center">
	<div class="flex space-x-2">
	<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
	<i class="fas fa-users mr-1"></i> 9 Bidders
	</span>
	<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
	<i class="fas fa-file-alt mr-1"></i> Docs Required
	</span>
	</div>
	<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	Apply Now
	</button>
	</div>
	</div>
	</div>

	<div class="mt-8 flex justify-center">
	<button class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-redo mr-2"></i> Load More Tenders
	</button>
	</div>
	</div>

	<!-- My Applications Content (Hidden by default) -->
	<div id="myApplicationsContent" class="tab-content hidden">
	<h2 class="text-xl font-bold mb-4">Tenders You've Applied For</h2>

	<div class="bg-white shadow overflow-hidden sm:rounded-lg">
	<ul class="divide-y divide-gray-200">
	<!-- Application 1 -->
	<li>
	<div class="px-4 py-5 sm:px-6">
	<div class="flex items-center justify-between">
	<div>
	<h3 class="text-lg leading-6 font-medium text-gray-900">Construction of Community Center</h3>
	<p class="mt-1 max-w-2xl text-sm text-gray-500">Ministry of Infrastructure</p>
	</div>
	<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
	Under Review
	</span>
	</div>

	<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
	<div>
	<p class="text-sm font-medium text-gray-500">Application Date</p>
	<p class="text-sm text-gray-900">12 Jul 2023</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Deadline</p>
	<p class="text-sm text-gray-900">15 Aug 2023</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Status</p>
	<p class="text-sm text-gray-900">Evaluation in progress</p>
	</div>
	</div>

	<div class="mt-4">
	<div class="flex space-x-4">
	<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-eye mr-2"></i> View Details
	</button>
	<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-download mr-2"></i> Download Submission
	</button>
	</div>
	</div>
	</div>
	</li>

	<!-- Application 2 -->
	<li>
	<div class="px-4 py-5 sm:px-6">
	<div class="flex items-center justify-between">
	<div>
	<h3 class="text-lg leading-6 font-medium text-gray-900">Office Furniture Supply</h3>
	<p class="mt-1 max-w-2xl text-sm text-gray-500">County Government</p>
	</div>
	<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
	Awarded
	</span>
	</div>

	<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
	<div>
	<p class="text-sm font-medium text-gray-500">Application Date</p>
	<p class="text-sm text-gray-900">05 Jun 2023</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Deadline</p>
	<p class="text-sm text-gray-900">30 Jun 2023</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Status</p>
	<p class="text-sm text-gray-900">Contract signed</p>
	</div>
	</div>

	<div class="mt-4">
	<div class="flex space-x-4">
	<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-eye mr-2"></i> View Details
	</button>
	<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-file-contract mr-2"></i> View Contract
	</button>
	</div>
	</div>
	</div>
	</li>

	<!-- Application 3 -->
	<li>
	<div class="px-4 py-5 sm:px-6">
	<div class="flex items-center justify-between">
	<div>
	<h3 class="text-lg leading-6 font-medium text-gray-900">School Feeding Program</h3>
	<p class="mt-1 max-w-2xl text-sm text-gray-500">Ministry of Education</p>
	</div>
	<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
	Rejected
	</span>
	</div>

	<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
	<div>
	<p class="text-sm font-medium text-gray-500">Application Date</p>
	<p class="text-sm text-gray-900">15 May 2023</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Deadline</p>
	<p class="text-sm text-gray-900">10 Jun 2023</p>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-500">Status</p>
	<p class="text-sm text-gray-900">Did not meet requirements</p>
	</div>
	</div>

	<div class="mt-4">
	<div class="flex space-x-4">
	<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-eye mr-2"></i> View Details
	</button>
	<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-comment-alt mr-2"></i> View Feedback
	</button>
	</div>
	</div>
	</div>
	</li>
	</ul>
	</div>
	</div>

	<!-- All Tenders Content (Hidden by default) -->
	<div id="allTendersContent" class="tab-content hidden">
	<h2 class="text-xl font-bold mb-4">All Available Tenders</h2>

	<div class="bg-white shadow overflow-hidden sm:rounded-lg">
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Tender Name
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Organization
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Category
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Deadline
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Status
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Action
	</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
	<i class="fas fa-building text-blue-600"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Road Construction</div>
	<div class="text-sm text-gray-500">Tender No: RC-2023-001</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">Ministry of Transport</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
	Construction
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">30 Aug 2023</div>
	<div class="text-sm text-gray-500">15 days left</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
	Open
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
	<button class="text-blue-600 hover:text-blue-900">View</button>
	</td>
	</tr>

	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
	<i class="fas fa-laptop-code text-purple-600"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Software Development</div>
	<div class="text-sm text-gray-500">Tender No: SD-2023-045</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">National Hospital</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
	IT Services
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">25 Aug 2023</div>
	<div class="text-sm text-gray-500">10 days left</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
	Open
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
	<button class="text-blue-600 hover:text-blue-900">View</button>
	</td>
	</tr>

	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center">
	<i class="fas fa-ambulance text-yellow-600"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Medical Equipment</div>
	<div class="text-sm text-gray-500">Tender No: ME-2023-112</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">County Health Dept</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
	Medical
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">15 Aug 2023</div>
	<div class="text-sm text-gray-500">Closed</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
	Closed
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
	<button class="text-blue-600 hover:text-blue-900">View</button>
	</td>
	</tr>

	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
	<i class="fas fa-book text-indigo-600"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Textbook Supply</div>
	<div class="text-sm text-gray-500">Tender No: TS-2023-078</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">Ministry of Education</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">
	Education
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">10 Sep 2023</div>
	<div class="text-sm text-gray-500">26 days left</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
	Open
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
	<button class="text-blue-600 hover:text-blue-900">View</button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
	<div class="flex-1 flex justify-between sm:hidden">
	<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
	Previous
	</a>
	<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
	Next
	</a>
	</div>
	<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
	<div>
	<p class="text-sm text-gray-700">
	Showing
	<span class="font-medium">1</span>
	to
	<span class="font-medium">4</span>
	of
	<span class="font-medium">24</span>
	results
	</p>
	</div>
	<div>
	<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
	<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
	<span class="sr-only">Previous</span>
	<i class="fas fa-chevron-left"></i>
	</a>
	<a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
	1
	</a>
	<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
	2
	</a>
	<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
	3
	</a>
	<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
	...
	</span>
	<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
	8
	</a>
	<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
	<span class="sr-only">Next</span>
	<i class="fas fa-chevron-right"></i>
	</a>
	</nav>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Recommended Content (Hidden by default) -->
	<div id="recommendedContent" class="tab-content hidden">
	<h2 class="text-xl font-bold mb-4">Recommended Tenders For You</h2>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<div class="p-6">
	<div class="flex items-center justify-between mb-6">
	<div>
	<h3 class="text-lg font-medium text-gray-900">Based on your profile and past applications</h3>
	<p class="mt-1 text-sm text-gray-500">We've matched these tenders to your capabilities and interests</p>
	</div>
	<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-sync-alt mr-2"></i> Refresh Recommendations
	</button>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<!-- Recommended Tender 1 -->
	<div class="tender-card border border-gray-200 rounded-lg p-6 hover:border-blue-300">
	<div class="flex justify-between items-start">
	<div>
	<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
	High Match
	</span>
	<h3 class="mt-2 text-lg font-bold text-gray-900">Building Materials Supply</h3>
	</div>
	<div class="text-yellow-400">
	<i class="fas fa-star"></i>
	</div>
	</div>

	<div class="mt-4">
	<div class="flex items-center text-sm text-gray-500">
	<i class="fas fa-building mr-2"></i>
	<span>National Housing Corporation</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mt-2">
	<i class="fas fa-map-marker-alt mr-2"></i>
	<span>Nairobi, Mombasa, Kisumu</span>
	</div>
	</div>

	<div class="mt-6">
	<div class="flex justify-between text-sm mb-1">
	<span class="text-gray-500">Match Score:</span>
	<span class="font-medium">92%</span>
	</div>
	<div class="progress-bar">
	<div class="progress-fill" style="width: 92%"></div>
	</div>
	</div>

	<div class="mt-6 flex justify-between items-center">
	<div>
	<p class="text-sm text-gray-500">Deadline: <span class="font-medium">20 Aug 2023</span></p>
	</div>
	<button class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	View Details
	</button>
	</div>
	</div>

	<!-- Recommended Tender 2 -->
	<div class="tender-card border border-gray-200 rounded-lg p-6 hover:border-blue-300">
	<div class="flex justify-between items-start">
	<div>
	<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
	Good Match
	</span>
	<h3 class="mt-2 text-lg font-bold text-gray-900">Office Renovation</h3>
	</div>
	<div class="text-yellow-400">
	<i class="fas fa-star"></i>
	</div>
	</div>

	<div class="mt-4">
	<div class="flex items-center text-sm text-gray-500">
	<i class="fas fa-building mr-2"></i>
	<span>Insurance Company</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mt-2">
	<i class="fas fa-map-marker-alt mr-2"></i>
	<span>Nairobi CBD</span>
	</div>
	</div>

	<div class="mt-6">
	<div class="flex justify-between text-sm mb-1">
	<span class="text-gray-500">Match Score:</span>
	<span class="font-medium">85%</span>
	</div>
	<div class="progress-bar">
	<div class="progress-fill" style="width: 85%"></div>
	</div>
	</div>

	<div class="mt-6 flex justify-between items-center">
	<div>
	<p class="text-sm text-gray-500">Deadline: <span class="font-medium">25 Aug 2023</span></p>
	</div>
	<button class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	View Details
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>
	</div>
	</div>

	<script>
	// Toggle sidebar
	document.getElementById('toggleSidebar').addEventListener('click', function() {
	const sidebar = document.querySelector('.sidebar');
	const content = document.querySelector('.content');

	sidebar.classList.toggle('collapsed');
	content.classList.toggle('expanded');
	});

	// Tab functionality
	const tabs = ['activeTenders', 'myApplications', 'allTenders', 'recommended'];

	tabs.forEach(tab => {
	const tabButton = document.getElementById(`${tab}Tab`);
	const tabContent = document.getElementById(`${tab}Content`);

	tabButton.addEventListener('click', function() {
	// Hide all tab contents
	document.querySelectorAll('.tab-content').forEach(content => {
	content.classList.add('hidden');
	});

	// Remove active class from all tab buttons
	document.querySelectorAll('.tab-button').forEach(button => {
	button.classList.remove('border-blue-500', 'text-blue-600');
	button.classList.add('border-transparent', 'text-gray-500');
	});

	// Show selected tab content
	tabContent.classList.remove('hidden');

	// Add active class to selected tab button
	this.classList.remove('border-transparent', 'text-gray-500');
	this.classList.add('border-blue-500', 'text-blue-600');
	});
	});

	// Initialize with first tab active
	document.getElementById('activeTendersTab').classList.remove('border-transparent', 'text-gray-500');
	document.getElementById('activeTendersTab').classList.add('border-blue-500', 'text-blue-600');
	document.getElementById('activeTendersContent').classList.remove('hidden');
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=harfby/tem" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>