Interface Mockups

This page provides visual representations of key Cattlemin screens to help you understand the interface layout and navigation.

Welcome Screen

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  🎉 Announcing our next version release. Read more             │
│                                                                 │
│                                                                 │
│                    Welcome to Cattlemin                        │
│                                                                 │
│                Minimize your herds' records.                   │
│                                                                 │
│                                                                 │
│              [Get Started]    [Learn More ▼]                   │
│                                                                 │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                                                         │   │
│  │  Animated background with gradient colors               │   │
│  │  (F2BF6C, F69A97, FF51EB, FC4778, 6050DC, 3952F5)      │   │
│  │                                                         │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Locations Dashboard

┌─────────────────────────────────────────────────────────────────┐
│ Cattlemin Dashboard                    [Account] [Settings]    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│  │ Total       │ │ Cattle      │ │ Birth       │ │ Vaccination │ │
│  │ Records     │ │ Records     │ │ Records     │ │ Records     │ │
│  │             │ │             │ │             │ │             │ │
│  │ 1,234       │ │ 🐄 567      │ │ 🎂 234      │ │ 💉 433      │ │
│  │ +20.1%      │ │ +180.1%     │ │ +19%        │ │ +201        │ │
│  └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│                                                                 │
│  [Location +] [Date Range Picker]                               │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │                                                             │ │
│  │  Click [+] Location to get started.                        │ │
│  │                                                             │ │
│  │  (Empty state - no locations yet)                          │ │
│  │                                                             │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Location Dashboard (with data)

┌─────────────────────────────────────────────────────────────────┐
│ North Pasture Dashboard              [Account] [Settings]      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│  │ Total       │ │ Cattle      │ │ Birth       │ │ Vaccination │ │
│  │ Records     │ │ Records     │ │ Records     │ │ Records     │ │
│  │             │ │             │ │             │ │             │ │
│  │ 156         │ │ 🐄 89       │ │ 🎂 34       │ │ 💉 33       │ │
│  │ +12.5%      │ │ +15.2%      │ │ +8.3%       │ │ +25.0%      │ │
│  └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│                                                                 │
│  [Record +] [Date Range Picker]                                 │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Overview │ Cattle │ Births │ Vaccinations                   │ │
│  ├─────────────────────────────────────────────────────────────┤ │
│  │                                                             │ │
│  │ Record Type │ Tag │ Sex │ Date of Birth │ Age │ Actions    │ │
│  │ ─────────── │ ─── │ ─── │ ───────────── │ ─── │ ─────────  │ │
│  │ Cattle      │ 123 │ H   │ 2023-03-15    │ 1.2 │ [Edit]     │ │
│  │ Cattle      │ 124 │ BC  │ 2023-04-22    │ 0.9 │ [Edit]     │ │
│  │ Birth       │ 125 │ H   │ 2024-01-10    │ 0.2 │ [Edit]     │ │
│  │ Vaccination │ -   │ -   │ 2024-01-15    │ -   │ [Edit]     │ │
│  │                                                             │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Add Record Dialog

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Add Cattle                                    [×]           │ │
│  │                                                             │ │
│  │ Add a new cattle to your location here. Click save when    │ │
│  │ you're done.                                                │ │
│  │                                                             │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ Mass Entry Mode [Toggle Switch]                        │ │ │
│  │ │ When enabled, you will remain on this screen after     │ │ │
│  │ │ clicking the save button.                              │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Tag *                                                       │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ [Enter ear tag number]                                  │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Type                                                        │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ [Heifer ▼]                                              │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Date of Birth                                               │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ [2024-01-15]                                            │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Parent Tag                                                  │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ [Enter parent tag number]                               │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │                    [Cancel] [Save]                         │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Mobile Interface - Record Selection

┌─────────────────────────────────────────────────────────────────┐
│ North Pasture Dashboard              [Menu]                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│  │ Total       │ │ Cattle      │ │ Birth       │ │ Vaccination │ │
│  │ Records     │ │ Records     │ │ Records     │ │ Records     │ │
│  │             │ │             │ │             │ │             │ │
│  │ 156         │ │ 🐄 89       │ │ 🎂 34       │ │ 💉 33       │ │
│  └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│                                                                 │
│  [Record +]                                                     │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Add Record                                                  │ │
│  │                                                             │ │
│  │ Select a record type to add to your location.              │ │
│  │                                                             │ │
│  │                                                             │ │
│  │        ┌─────────┐    ┌─────────┐    ┌─────────┐           │ │
│  │        │   🐄    │    │   🎂    │    │   💉    │           │ │
│  │        │ Cattle  │    │ Birth   │    │ Vaccin. │           │ │
│  │        └─────────┘    └─────────┘    └─────────┘           │ │
│  │                                                             │ │
│  │                    [Cancel]                                 │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Mobile Interface - Card View

┌─────────────────────────────────────────────────────────────────┐
│ North Pasture Dashboard              [Menu]                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│  │ Total       │ │ Cattle      │ │ Birth       │ │ Vaccination │ │
│  │ Records     │ │ Records     │ │ Records     │ │ Records     │ │
│  │             │ │             │ │             │ │             │ │
│  │ 156         │ │ 🐄 89       │ │ 🎂 34       │ │ 💉 33       │ │
│  └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│                                                                 │
│  [Record +]                                                     │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Cattle                                                      │ │
│  │ Tag #123                                                    │ │
│  │ Heifer • Age: 1.2 years                                     │ │
│  │                                                             │ │
│  │ [Edit] [Add Calf] [Delete]                                  │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Cattle                                                      │ │
│  │ Tag #124                                                    │ │
│  │ Bull Calf • Age: 0.9 years                                  │ │
│  │                                                             │ │
│  │ [Edit] [Add Calf] [Delete]                                  │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Birth                                                       │ │
│  │ Calf #125                                                   │ │
│  │ Heifer • Born: 2024-01-10                                   │ │
│  │ Parent: #123                                                │ │
│  │                                                             │ │
│  │ [Edit] [Delete]                                             │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Data Table with Actions

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Record Type │ Tag │ Sex │ Date of Birth │ Age │ Actions    │ │
│  │ ─────────── │ ─── │ ─── │ ───────────── │ ─── │ ─────────  │ │
│  │ Cattle      │ 123 │ H   │ 2023-03-15    │ 1.2 │ [⋮]        │ │
│  │ Cattle      │ 124 │ BC  │ 2023-04-22    │ 0.9 │ [⋮]        │ │
│  │ Birth       │ 125 │ H   │ 2024-01-10    │ 0.2 │ [⋮]        │ │
│  │ Vaccination │ -   │ -   │ 2024-01-15    │ -   │ [⋮]        │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Actions Menu                                                │ │
│  │                                                             │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ Actions                                                  │ │
│  │ │ ┌─────────────────────────────────────────────────────┐ │ │ │
│  │ │ │ ✏️ Edit                                              │ │ │ │
│  │ │ │ 🐄 Add Calf                                          │ │ │ │
│  │ │ │ 🗑️ Delete                                            │ │ │ │
│  │ │ └─────────────────────────────────────────────────────┘ │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Birth Record Form

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Add Birth                                      [×]           │ │
│  │                                                             │ │
│  │ Add a new birth to your location here. Click save when     │ │
│  │ you're done.                                                │ │
│  │                                                             │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ Mass Entry Mode [Toggle Switch]                        │ │ │
│  │ │ When enabled, you will remain on this screen after     │ │ │
│  │ │ clicking the save button.                              │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Calf Tag *                                                  │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ [Enter calf ear tag number]                             │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Parent Tag                                                  │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ [Enter parent ear tag number]                           │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Calf Type                                                   │ │
│  │ ○ Heifer                                                    │ │
│  │ ○ Bull Calf                                                 │ │
│  │                                                             │ │
│  │ Date of Birth *                                             │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ [2024-01-15]                                            │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │                    [Cancel] [Save]                         │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Vaccination Record Form

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Add Vaccination                               [×]           │ │
│  │                                                             │ │
│  │ Add a new vaccination to your location here. Click save    │ │
│  │ when you're done.                                           │ │
│  │                                                             │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ Mass Entry Mode [Toggle Switch]                        │ │ │
│  │ │ When enabled, you will remain on this screen after     │ │ │
│  │ │ clicking the save button.                              │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Date *                                                      │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ [2024-01-15]                                            │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Vaccination Types                                           │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ ☑️ Black Leg                                            │ │ │
│  │ │ ☑️ Respiratory                                          │ │ │
│  │ │ ☐ Lepto                                                 │ │ │
│  │ │ ☐ Wormer                                                │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │                    [Cancel] [Save]                         │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Navigation and Breadcrumbs

┌─────────────────────────────────────────────────────────────────┐
│ Cattlemin Dashboard                    [Account] [Settings]    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Home > Locations > North Pasture                              │
│                                                                 │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│  │ Total       │ │ Cattle      │ │ Birth       │ │ Vaccination │ │
│  │ Records     │ │ Records     │ │ Records     │ │ Records     │ │
│  │             │ │             │ │             │ │             │ │
│  │ 156         │ │ 🐄 89       │ │ 🎂 34       │ │ 💉 33       │ │
│  └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│                                                                 │
│  [Record +] [Date Range Picker]                                 │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Overview │ Cattle │ Births │ Vaccinations                   │ │
│  ├─────────────────────────────────────────────────────────────┤ │
│  │                                                             │ │
│  │ (Table content)                                             │ │
│  │                                                             │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Filter and Search Interface

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │ Filters and Search                                          │ │
│  │                                                             │ │
│  │ ┌─────────────────────────────────────────────────────────┐ │ │
│  │ │ 🔍 Search records...                                    │ │ │
│  │ └─────────────────────────────────────────────────────────┘ │ │
│  │                                                             │ │
│  │ Record Type: [All ▼]                                       │ │
│  │ Date Range: [Last 30 days ▼]                               │ │
│  │ Tag Number: [Any ▼]                                        │ │
│  │                                                             │ │
│  │ [Clear Filters] [Apply]                                    │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │                                                             │ │
│  │ Record Type │ Tag │ Sex │ Date of Birth │ Age │ Actions    │ │
│  │ ─────────── │ ─── │ ─── │ ───────────── │ ─── │ ─────────  │ │
│  │ Cattle      │ 123 │ H   │ 2023-03-15    │ 1.2 │ [⋮]        │ │
│  │ Cattle      │ 124 │ BC  │ 2023-04-22    │ 0.9 │ [⋮]        │ │
│  │                                                             │ │
│  └─────────────────────────────────────────────────────────────┘ │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Key Interface Elements

Icons and Symbols

• 🐄 Cow Icon: Represents cattle records
• 🎂 Cake Icon: Represents birth records
• 💉 Syringe Icon: Represents vaccination records
• ➕ Plus Icon: Add new records or locations
• ⋮ Three Dots: Actions menu
• ✏️ Pencil: Edit action
• 🗑️ Trash: Delete action
• 🐄 Cow with Plus: Add calf action

Color Scheme

• Primary Blue: #3952F5 (buttons, links)
• Success Green: #22C55E (success messages)
• Warning Orange: #F59E0B (warnings)
• Error Red: #EF4444 (errors, delete actions)
• Neutral Gray: #6B7280 (secondary text)

Typography

• Headings: Bold, larger font sizes
• Body Text: Regular weight, readable size
• Labels: Medium weight, clear hierarchy
• Numbers: Monospace font for data consistency

Responsive Design

• Desktop: Full table view with all columns
• Tablet: Condensed table with key columns
• Mobile: Card-based layout with touch-friendly buttons

These mockups represent the key interfaces you’ll encounter while using Cattlemin. The actual application may have slight variations in styling and layout, but the core functionality and navigation patterns remain consistent.