diff --git a/ui/src/components/grid/jobs/JobGrid.less b/ui/src/components/grid/jobs/JobGrid.less
index 5ce81019..6c62a543 100644
--- a/ui/src/components/grid/jobs/JobGrid.less
+++ b/ui/src/components/grid/jobs/JobGrid.less
@@ -1,3 +1,5 @@
+@import '../../cards/DashboardCardColors.less';
+
.jobGrid {
&__card {
height: 100%;
@@ -12,55 +14,137 @@
box-shadow: 0 0 15px -3px rgb(78 78 78 / 70%);
background-color: rgba(36, 36, 36, 1);
}
- }
- &__searchbar {
- display: flex;
- gap: .5rem;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 1rem;
- }
+ &__header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 8px;
+ margin-bottom: 16px;
+ }
- &__toolbar {
- &__card {
- border-radius: var(--semi-border-radius-medium);
+ &__name {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+ }
+
+ &__dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+ background-color: var(--semi-color-text-3);
+
+ &--active {
+ background-color: #21aa21;
+ }
+ }
+
+ &__stats {
+ display: flex;
+ gap: 8px;
+ }
+
+ &__stat {
+ flex: 1;
display: flex;
flex-direction: column;
- gap: .3rem;
- background: rgba(36, 36, 36, 0.9);
- backdrop-filter: blur(8px);
- padding: 0.5rem;
- border: 1px solid var(--semi-color-border);
+ align-items: center;
+ background: rgba(255, 255, 255, 0.04);
+ border: 1px solid transparent;
+ border-radius: var(--semi-border-radius-small);
+ padding: 10px 4px 8px;
+
+ &__number {
+ font-size: 22px;
+ font-weight: 600;
+ color: var(--semi-color-text-0);
+ line-height: 1.2;
+ }
+
+ &__label {
+ font-size: 11px;
+ color: var(--semi-color-text-3);
+ display: flex;
+ align-items: center;
+ gap: 3px;
+ margin-top: 4px;
+ }
+
+ &--blue {
+ background: @color-blue-bg;
+ border-color: @color-blue-border;
+ .jobGrid__card__stat__number { color: @color-blue-text; }
+ .jobGrid__card__stat__label { color: @color-blue-text; opacity: 0.7; }
+ }
+
+ &--orange {
+ background: @color-orange-bg;
+ border-color: @color-orange-border;
+ .jobGrid__card__stat__number { color: @color-orange-text; }
+ .jobGrid__card__stat__label { color: @color-orange-text; opacity: 0.7; }
+ }
+
+ &--purple {
+ background: @color-purple-bg;
+ border-color: @color-purple-border;
+ .jobGrid__card__stat__number { color: @color-purple-text; }
+ .jobGrid__card__stat__label { color: @color-purple-text; opacity: 0.7; }
+ }
+ }
+
+ &__footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
}
- &__header {
+ &__topbar {
display: flex;
+ flex-wrap: nowrap;
align-items: center;
- justify-content: space-between;
- }
+ gap: 8px;
+ margin-bottom: 16px;
- &__title {
- margin-bottom: 0 !important;
- }
+ .jobGrid__topbar__search {
+ flex: 1;
+ min-width: 0;
+ }
- &__infoItem {
- display: flex;
- align-items: center;
- width: 100%;
+ @media (max-width: 768px) {
+ flex-wrap: wrap;
- .semi-typography {
- display: flex;
- align-items: center;
- gap: 4px;
+ .semi-button:first-child {
+ flex-shrink: 0;
+ }
+
+ .jobGrid__topbar__search {
+ flex: 1;
+ min-width: 160px;
+ }
+
+ .semi-radio-group {
+ flex: 1;
+ }
+
+ .semi-select {
+ flex: 1;
+ min-width: 100px;
+ width: auto !important;
+ }
}
}
+ &__title {
+ margin-bottom: 0 !important;
+ }
+
&__actions {
display: flex;
- justify-content: space-between;
- gap: 8px;
+ gap: 6px;
}
&__pagination {
diff --git a/ui/src/components/grid/listings/ListingsGrid.jsx b/ui/src/components/grid/listings/ListingsGrid.jsx
index d555db21..e47f00c8 100644
--- a/ui/src/components/grid/listings/ListingsGrid.jsx
+++ b/ui/src/components/grid/listings/ListingsGrid.jsx
@@ -10,15 +10,15 @@ import {
Row,
Image,
Button,
- Space,
Typography,
Pagination,
Toast,
Divider,
Input,
Select,
- Popover,
Empty,
+ Radio,
+ RadioGroup,
} from '@douyinfe/semi-ui-19';
import {
IconBriefcase,
@@ -30,9 +30,10 @@ import {
IconStar,
IconStarStroked,
IconSearch,
- IconFilter,
IconActivity,
IconEyeOpened,
+ IconArrowUp,
+ IconArrowDown,
} from '@douyinfe/semi-icons';
import { useNavigate } from 'react-router-dom';
import ListingDeletionModal from '../../ListingDeletionModal.jsx';
@@ -64,8 +65,6 @@ const ListingsGrid = () => {
const [jobNameFilter, setJobNameFilter] = useState(null);
const [activityFilter, setActivityFilter] = useState(null);
const [providerFilter, setProviderFilter] = useState(null);
- const [showFilterBar, setShowFilterBar] = useState(false);
-
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [listingToDelete, setListingToDelete] = useState(null);
@@ -129,107 +128,84 @@ const ListingsGrid = () => {
return (
-
-
} showClear placeholder="Search" onChange={handleFilterChange} />
-
-
- }
- onClick={() => {
- setShowFilterBar(!showFilterBar);
- }}
- />
-
-
-
- {showFilterBar && (
-
-
-
-
- Filter by:
-
-
-
+
+ }
+ showClear
+ placeholder="Search"
+ onChange={handleFilterChange}
+ />
-
+ {
+ const v = e.target.value;
+ setActivityFilter(v === 'all' ? null : v === 'true');
+ }}
+ >
+ All
+ Active
+ Inactive
+
-
+ {
+ const v = e.target.value;
+ setWatchListFilter(v === 'all' ? null : v === 'true');
+ }}
+ >
+ All
+ Watched
+ Unwatched
+
-
-
-
-
+
-
-
- Sort by:
-
-
-
+
-
-
-
-
-
{(listingsData?.result || []).length === 0 && (
{
)}
{(listingsData?.result || []).map((item) => (
-
+
{
{cap(item.title)}
-
- } size="small">
- {item.price} €
-
+
+
+ {item.price} €
+
+
}
@@ -305,18 +282,17 @@ const ListingsGrid = () => {
) : (
}>
- Distance cannot be calculated, provide an address
+ Distance cannot be calculated
)}
-
+
-
+
-