dyzulk/app-beta
1
0
Fork 0
mirror of https://github.com/twinpath/app-beta.git synced 2026-01-26 13:51:52 +07:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Dyzulk Developer
2025-12-21 08:03:18 +07:00
commit 7c746f776a
300 changed files with 24836 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
resources/views/components/tables/basic-tables/basic-tables-one.blade.php Normal file
View File

@@ -0,0 +1,170 @@
<div x-data="{
orders: [
{
id: 1,
user: {
image: './images/user/user-17.jpg',
name: 'Lindsey Curtis',
role: 'Web Designer',
},
projectName: 'Agency Website',
team: {
images: [
'./images/user/user-22.jpg',
'./images/user/user-23.jpg',
'./images/user/user-24.jpg',
],
},
budget: '3.9K',
status: 'Active',
},
{
id: 2,
user: {
image: './images/user/user-18.jpg',
name: 'Kaiya George',
role: 'Project Manager',
},
projectName: 'Technology',
team: {
images: [
'./images/user/user-25.jpg',
'./images/user/user-26.jpg',
],
},
budget: '24.9K',
status: 'Pending',
},
{
id: 3,
user: {
image: './images/user/user-19.jpg',
name: 'Zain Geidt',
role: 'Content Writer',
},
projectName: 'Blog Writing',
team: {
images: [
'./images/user/user-27.jpg',
],
},
budget: '12.7K',
status: 'Active',
},
{
id: 4,
user: {
image: './images/user/user-20.jpg',
name: 'Abram Schleifer',
role: 'Digital Marketer',
},
projectName: 'Social Media',
team: {
images: [
'./images/user/user-28.jpg',
'./images/user/user-29.jpg',
'./images/user/user-30.jpg',
],
},
budget: '2.8K',
status: 'Cancel',
},
{
id: 5,
user: {
image: './images/user/user-21.jpg',
name: 'Carla George',
role: 'Front-end Developer',
},
projectName: 'Website',
team: {
images: [
'./images/user/user-31.jpg',
'./images/user/user-32.jpg',
'./images/user/user-33.jpg',
],
},
budget: '4.5K',
status: 'Active',
},
],
getStatusClass(status) {
const classes = {
'Active': 'bg-green-50 text-green-700 dark:bg-green-500/15 dark:text-green-500',
'Pending': 'bg-yellow-50 text-yellow-700 dark:bg-yellow-500/15 dark:text-yellow-400',
'Cancel': 'bg-red-50 text-red-700 dark:bg-red-500/15 dark:text-red-500',
};
return classes[status] || '';
}
}">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
<div class="max-w-full overflow-x-auto custom-scrollbar">
<table class="w-full min-w-[1102px]">
<thead>
<tr class="border-b border-gray-100 dark:border-gray-800">
<th class="px-5 py-3 text-left sm:px-6">
<p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
User
</p>
</th>
<th class="px-5 py-3 text-left sm:px-6">
<p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
Project Name
</p>
</th>
<th class="px-5 py-3 text-left sm:px-6">
<p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
Team
</p>
</th>
<th class="px-5 py-3 text-left sm:px-6">
<p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
Status
</p>
</th>
<th class="px-5 py-3 text-left sm:px-6">
<p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
Budget
</p>
</th>
</tr>
</thead>
<tbody>
<template x-for="order in orders" :key="order.id">
<tr class="border-b border-gray-100 dark:border-gray-800">
<td class="px-5 py-4 sm:px-6" colspan="1">
<div class="flex items-center gap-3">
<div class="w-10 h-10 overflow-hidden rounded-full">
<img :src="order.user.image" :alt="order.user.name">
</div>
<div>
<span class="block font-medium text-gray-800 text-theme-sm dark:text-white/90" x-text="order.user.name"></span>
<span class="block text-gray-500 text-theme-xs dark:text-gray-400" x-text="order.user.role"></span>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<p class="text-gray-500 text-theme-sm dark:text-gray-400" x-text="order.projectName"></p>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex -space-x-2">
<template x-for="(teamImage, index) in order.team.images" :key="index">
<div class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900">
<img :src="teamImage" alt="team member">
</div>
</template>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<p class="text-theme-xs inline-block rounded-full px-2 py-0.5 font-medium" :class="getStatusClass(order.status)" x-text="order.status"></p>
</td>
<td class="px-5 py-4 sm:px-6">
<p class="text-gray-500 text-theme-sm dark:text-gray-400" x-text="order.budget"></p>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>