Browse All Properties
Search, filter, and sort the full property marketplace using grid, table, or map views.
Browse All shows every property in the Fondaro marketplace. You can search by keyword, apply filters using inline popover pills, sort results, and switch between grid, table, and map views.
Toolbar
The toolbar runs across the top of the page and gives you quick access to all controls in a single row:
- Search — A rounded search field on the left side. Start typing to find properties by keyword (address, reference number, description text). Results update automatically as you type.
- Filter pills — A row of pill-shaped buttons sits next to the search field. Each pill opens a small popover where you can adjust that filter. Active filters appear filled so you can see what is applied at a glance. A Clear all link appears when any filter is active.
- Result count — The total number of matching properties displays as a number on the right side of the toolbar.
- View toggle — A compact pill-shaped control lets you switch between Grid, Table, and Map views. The active view is highlighted.
- Sort — A dropdown to the right lets you choose a sort order: Newest, Price (Low to High or High to Low), Beds (High to Low or Low to High), or Size (Large to Small or Small to Large).
- Add — A button that navigates directly to the Add New form.
Filter pills
Instead of a slide-in panel, filters are presented as inline pill buttons in the toolbar. Click any pill to open its popover. Each popover closes automatically when you click outside it, and your changes apply immediately.
| Pill | What it controls | How it works |
|---|---|---|
| Price | Price range | A dual-handle slider with a histogram showing the distribution of prices across available listings. Drag the handles to narrow the range. |
| Type | Property type | Toggle pills for Apartment, House, Condominium, Townhouse, Penthouse, and more. Select one or multiple. The pill shows a count when types are selected. |
| Beds | Bedrooms | Rounded number buttons (1, 2, 3, 4, 5+). Tap one to filter; tap it again to deselect. The pill shows the number you selected (e.g., "2+" for 2 or more bedrooms). |
| Baths | Bathrooms | Same style as Beds — rounded number buttons with the selected value shown on the pill. |
| More | Category, Features, Commission | Opens a larger popover with three sections. Category lets you pick All, Residential, Commercial, Industrial, or Land. Features has toggle switches for Swimming Pool, Sea View, Garage, Terrace, Garden, Furnished, Air Conditioning, and Lift/Elevator. Commission has min/max fields and a slider for filtering by commission percentage. The pill shows a count of how many of these sub-filters are active. |
When any filter is active, a Clear all link appears at the end of the pill row so you can reset everything in one click.
Grid view
Properties appear as full-bleed image cards in a responsive grid (up to four columns on wide screens). Each card uses a tall aspect ratio with the photo filling the entire card. A gradient overlay at the bottom ensures text is easy to read. Each card shows:
- Agent or organization avatar — A small circular avatar in the top-left corner. Hover over it to see the agent name and organization.
- Badges — In the top-right corner you will see badges for listing type (Sale, Rent, Fractional, Sale/Rent) and status (if not Active), displayed as frosted-glass pills.
- Image carousel — If a property has multiple photos, left/right arrow buttons and dot indicators appear when you hover over the card. Use them to browse images without leaving the grid.
- Property type — Shown as a small uppercase label at the bottom of the card (e.g., "APARTMENT").
- Price — Large, bold text overlaid on the image.
- City — Below the price.
- Key stats — Beds, baths, and area displayed in a compact row at the very bottom.
For properties that belong to your organization, hovering over the card reveals action buttons in the bottom-right corner: Edit (opens the listing editor), Mark as Sold/Rented (opens a confirmation dialog), and Delete. If a listing is expiring soon, a Renew button also appears.
Click anywhere on a card to open the property detail page.
Table view
The table view displays properties in a sortable data table with these columns:
- Image thumbnail
- Property (type + city)
- Price
- Listing type (For Sale, For Rent, Sale/Rent, Fractional)
- Beds, Baths, Area
- Status (Active, Pending, Inactive, Sold, Rented)
- Actions menu (View, Edit)
Click column headers to sort. Click a row to view the property detail.
Map view
The map view shows properties as markers on an interactive Google Map. The map automatically fits to show all visible properties when it first loads.
- Location search — A search field in the top-left corner lets you type a city or address. The map pans to the location you select.
- Hover-to-preview cards — Hover over any marker to see a preview card with the property image, price, and key details. Click a marker to pin the card in place; the pinned card includes a View details link and a close button.
- Custom controls — Zoom in, zoom out, and fit-all-properties buttons appear in the bottom-right corner as small rounded buttons.
- Automatic updates — As you pan and zoom, the results update automatically to show properties within the visible area. A loading indicator appears in the bottom-left corner while results refresh.
- Dark mode — The map automatically switches between light and dark color schemes to match your dashboard theme.
Property detail page
Click any property (from grid, table, or map) to open a full editorial-style detail page:
- Hero gallery — A large, cinematic image at the top with a 16:9 aspect ratio. If there are multiple photos, left/right arrows appear on hover. A fit-mode toggle in the top-right corner lets you switch between filling the frame and fitting the entire image. An Edit button appears on hover in the top-left corner for properties you own.
- Price and stats — Overlaid on the hero image at the bottom: listing type pill, price in large text, commission badge, property name, and a stat row showing beds, baths, and area.
- Description — The property description rendered as formatted text below the hero. Currency amounts and area units are automatically cleaned up for readability.
- Property details — A section listing bedrooms, bathrooms, living area, plot area, year built, and energy rating, each with its own icon.
- Features — Feature tags displayed as pill badges with icons (Swimming Pool, Sea View, Garage, Terrace, Garden, Furnished, Air Conditioning, Lift/Elevator, New Construction).
- Location — The full address, plus an embedded interactive map showing the property's exact position.
- Agent and organization — Contact details for the listing agent and the organization, including avatar, name, title, and links to email, phone, and website.
- Brochure download — A card that lets you download a PDF brochure of the property.
- Ad campaigns — If the property has active ads, a section shows previews of each ad creative.
- Similar properties — A grid of related listings appears at the bottom of the page, using the same full-bleed card design as the main grid.
Pagination
Grid and table views show pagination controls at the bottom of the page with the current page number, total pages, and total item count. Use the previous/next buttons to navigate.