{(listingsData?.result || []).map((listing) => (
{ e.target.src = no_image; }}
/>
{!listing.active && (
Inactive
)}
{listing.title}
{listing.price && (
{listing.price}
)}
{listing.address && (
{listing.address}
)}
{listing.provider}
{listing.size && {listing.size} m²}
{timeService.format(listing.firstSeen)}
}
style={{ color: '#60a5fa' }}
theme="borderless"
onClick={() => window.open(listing.url, '_blank')}
/>
}
style={{ color: '#34d399' }}
theme="borderless"
onClick={() => navigate(`/listings/listing/${listing.id}`)}
/>
}
style={{ color: '#fb7185' }}
theme="borderless"
onClick={() => {
setListingToDelete(listing.id);
setDeleteModalVisible(true);
}}
/>
))}
(
{getInitials(value)}
{value}
{record.isAdmin && (
ADMIN
)}
),
},
{
title: 'Last login',
dataIndex: 'lastLogin',
render: (value) => format(value),
},
{
title: 'Jobs',
dataIndex: 'numberOfJobs',
},
{
title: 'MCP Token',
dataIndex: 'mcpToken',
render: (value) => (
{value || '---'}
),
},
{
title: '',
dataIndex: 'tools',
render: (_, record) => (
}
onClick={() => onUserRemoval(record.id)}
/>
} onClick={() => onUserEdit(record.id)} />
),
},
]}
dataSource={user}
/>
);
}
```
- [ ] **Step 4: Commit**
```bash
git add ui/src/views/user/Users.jsx ui/src/views/user/Users.less ui/src/components/table/UserTable.jsx
git commit -m "feat: users view with page heading, avatar initials, admin badge"
```
---
## Task 13: User Mutation (Create/Edit User)
**Files:**
- Modify: `ui/src/views/user/mutation/UserMutator.jsx`
- Modify: `ui/src/views/user/mutation/UserMutator.less`
- [ ] **Step 1: Read full `UserMutator.jsx`**
```bash
cat ui/src/views/user/mutation/UserMutator.jsx
```
- [ ] **Step 2: Add PageHeading + back button at the top of UserMutator.jsx**
Add these imports if not present:
```jsx
import Headline from '../../../components/headline/Headline.jsx';
import { IconArrowLeft } from '@douyinfe/semi-icons';
```
Inside the return (after the outer `` or ``), add as the very first element:
```jsx
}
onClick={() => navigate('/users')}
theme="borderless"
style={{ color: '#909090' }}
>
Back
}
/>
```
- [ ] **Step 3: Replace `UserMutator.less`**
```less
@import '../../../tokens.less';
.userMutator {
display: flex;
flex-direction: column;
&__actions {
display: flex;
gap: @space-3;
margin-top: @space-2;
justify-content: flex-end;
}
}
```
- [ ] **Step 4: Commit**
```bash
git add ui/src/views/user/mutation/UserMutator.jsx ui/src/views/user/mutation/UserMutator.less
git commit -m "feat: user mutation with page heading and back button"
```
---
## Task 14: Settings View (GeneralSettings)
**Files:**
- Modify: `ui/src/views/generalSettings/GeneralSettings.jsx`
- Modify: `ui/src/views/generalSettings/GeneralSettings.less`
Add PageHeading. Style the tabs with red active indicator. The SegmentPart cards are already styled via Task 8.
- [ ] **Step 1: Add `Headline` import to `GeneralSettings.jsx`**
```jsx
import Headline from '../../components/headline/Headline.jsx';
```
At the start of the return (before the `{!loading && ...}` check), add:
```jsx
<>
{!loading && (
// ... existing content
)}
```
Wrap the whole return in a Fragment if needed.
- [ ] **Step 2: Replace `ui/src/views/generalSettings/GeneralSettings.less`**
```less
@import '../../tokens.less';
.generalSettings {
display: flex;
flex-direction: column;
flex: 1;
&__tab-content {
padding: @space-4 0;
}
&__timePickerContainer {
display: flex;
gap: @space-3;
flex-wrap: wrap;
align-items: center;
}
&__save-row {
display: flex;
justify-content: flex-end;
margin-top: @space-2;
}
}
// Tabs styling
.semi-tabs-bar-line .semi-tabs-tab {
color: @color-faint;
font-size: @text-base;
transition: color @transition-fast;
&:hover {
color: @color-muted;
}
&.semi-tabs-tab-active {
color: @color-text !important;
}
}
.semi-tabs-bar-line .semi-tabs-ink-bar {
background-color: @color-accent !important;
height: 2px;
}
```
- [ ] **Step 3: Commit**
```bash
git add ui/src/views/generalSettings/GeneralSettings.jsx ui/src/views/generalSettings/GeneralSettings.less
git commit -m "feat: settings view with page heading and accent tab indicator"
```
---
## Task 15: Listing Detail
**Files:**
- Modify: `ui/src/views/listings/ListingDetail.jsx`
- Modify: `ui/src/views/listings/ListingDetail.less`
`WatchlistManagement.jsx` already imports and uses `Headline` — no changes needed there. `ListingDetail.jsx` already has a back button (`IconArrowLeft` + navigate('/listings')). It needs a `Headline` component at the top and a `tokens.less` import in its LESS file.
- [ ] **Step 1: Add Headline to ListingDetail.jsx**
Add this import at the top:
```jsx
import Headline from '../../components/headline/Headline.jsx';
```
Inside the return, find the existing back button (Button with `IconArrowLeft`). Replace the back-button + title row with a `Headline` that has the back button in the `actions` slot:
```jsx
}
onClick={() => navigate('/listings')}
theme="borderless"
style={{ color: '#909090' }}
>
Back
}
/>
```
Remove the old separate back-button and title elements from the JSX.
- [ ] **Step 2: Add tokens import to `ListingDetail.less`**
At the top of `ui/src/views/listings/ListingDetail.less`, add:
```less
@import '../../tokens.less';
```
- [ ] **Step 3: Commit**
```bash
git add ui/src/views/listings/ListingDetail.jsx ui/src/views/listings/ListingDetail.less
git commit -m "feat: listing detail view with page heading"
```
---
## Task 16: Final Polish + Verification
**Files:**
- Review all views in browser
- [ ] **Step 1: Start dev server**
```bash
yarn dev
```
- [ ] **Step 2: Visual checklist — verify each screen**
Open each route and check:
- [ ] `/login` — glass card, Outfit font, red login button, correct card dimensions
- [ ] `/dashboard` — PageHeading with gradient line, 4+4 KPI cards at 112px, no hover lift on KPI cards
- [ ] `/jobs` — PageHeading with "New Job" button, cards with dark bg
- [ ] `/jobs/new` — PageHeading "New Job", back button, section cards with correct dark style
- [ ] `/jobs/edit/:id` — PageHeading "Edit Job", back button, same layout
- [ ] `/listings` — PageHeading, card grid with image, star, price, action bar (blue/green/red icons)
- [ ] `/map` — PageHeading "Map View", filter panel overlay at top-right
- [ ] `/users` — PageHeading "Users", "+ New User" button, avatar initials, admin badge
- [ ] `/users/new` — PageHeading "New User", back button
- [ ] `/generalSettings` — PageHeading "Settings", tabs with red underline on active
- [ ] Sidebar collapses at width <= 850px
- [ ] Footer shows "Fredy vX.X.X" left, "Made with ❤️ by Christian Kellner" link right
- [ ] Scrollbar is thin (6px) and dark
- [ ] **Step 3: Mobile check (resize to 375px)**
- [ ] Sidebar is collapsed and shows heart icon
- [ ] Content padding is 12px
- [ ] Listing cards are single-column
- [ ] Login card fits viewport with no overflow
- [ ] **Step 4: Final commit**
```bash
git add -A
git commit -m "feat: Fredy UI redesign — complete cronpilot CI implementation"
```
---
## Appendix: Design Token Quick Reference
| Token | Value | Usage |
|---|---|---|
| `@color-base` | `#0d0d0d` | Body background |
| `@color-surface` | `#161616` | Cards, sidebar |
| `@color-elevated` | `#1e1e1e` | Listing cards, modals |
| `@color-border` | `#2a2a2a` | All borders |
| `@color-accent` | `#e04a38` | Buttons, active states |
| `@color-text` | `#efefef` | Primary text |
| `@color-muted` | `#909090` | Secondary text |
| `@color-faint` | `#505050` | Disabled, labels |
| `@font-ui` | Outfit | All UI text |
| `@font-mono` | JetBrains Mono | Code, tokens |