MICRA 1.0
This commit is contained in:
Flatlogic Bot
parent
db934b1222
commit
0c89516ec1
@ -3,10 +3,9 @@ import { mdiLogout, mdiClose } from '@mdi/js'
|
||||
import BaseIcon from './BaseIcon'
|
||||
import AsideMenuList from './AsideMenuList'
|
||||
import { MenuAsideItem } from '../interfaces'
|
||||
import { useAppSelector } from '../stores/hooks'
|
||||
import { useAppDispatch, useAppSelector } from '../stores/hooks'
|
||||
import Link from 'next/link';
|
||||
|
||||
import { useAppDispatch } from '../stores/hooks';
|
||||
import { createAsyncThunk } from '@reduxjs/toolkit';
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||
import BaseDivider from './BaseDivider'
|
||||
import BaseIcon from './BaseIcon'
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { ReactNode, useEffect } from 'react'
|
||||
import { useState } from 'react'
|
||||
import React, { ReactNode, useEffect, useState } from 'react'
|
||||
import jwt from 'jsonwebtoken';
|
||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||
import menuAside from '../menuAside'
|
||||
|
||||
@ -7,6 +7,12 @@ const menuAside: MenuAsideItem[] = [
|
||||
icon: icon.mdiViewDashboardOutline,
|
||||
label: 'Dashboard',
|
||||
},
|
||||
{
|
||||
href: '/farm-ops',
|
||||
icon: 'mdiFishbowlOutline' in icon ? icon['mdiFishbowlOutline' as keyof typeof icon] : icon.mdiFish,
|
||||
label: 'Farm Ops',
|
||||
permissions: 'READ_FEEDING_LOGS'
|
||||
},
|
||||
|
||||
{
|
||||
href: '/users/users-list',
|
||||
|
||||
538
frontend/src/pages/farm-ops.tsx
Normal file
538
frontend/src/pages/farm-ops.tsx
Normal file
@ -0,0 +1,538 @@
|
||||
import {
|
||||
mdiCalendarCheck,
|
||||
mdiChartTimelineVariant,
|
||||
mdiClipboardTextClock,
|
||||
mdiFish,
|
||||
mdiFoodDrumstick,
|
||||
mdiStorefront,
|
||||
mdiWaterPercent,
|
||||
} from '@mdi/js'
|
||||
import Head from 'next/head'
|
||||
import React, { ReactElement, useEffect, useMemo, useState } from 'react'
|
||||
import axios from 'axios'
|
||||
import BaseButton from '../components/BaseButton'
|
||||
import CardBox from '../components/CardBox'
|
||||
import LayoutAuthenticated from '../layouts/Authenticated'
|
||||
import SectionMain from '../components/SectionMain'
|
||||
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
|
||||
import BaseIcon from '../components/BaseIcon'
|
||||
import { getPageTitle } from '../config'
|
||||
import { hasPermission } from '../helpers/userPermissions'
|
||||
import { useAppSelector } from '../stores/hooks'
|
||||
|
||||
type Option = {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
type FeedLog = {
|
||||
id: string
|
||||
fed_at?: string
|
||||
quantity_kg?: string | number
|
||||
feeding_method?: string
|
||||
appetite?: string
|
||||
notes?: string
|
||||
batch?: { id?: string; batch_code?: string }
|
||||
feed_product?: { id?: string; product_name?: string }
|
||||
recorded_by?: { firstName?: string; lastName?: string; email?: string }
|
||||
createdAt?: string
|
||||
}
|
||||
|
||||
type OpsForm = {
|
||||
batch: string
|
||||
feed_product: string
|
||||
fed_at: string
|
||||
quantity_kg: string
|
||||
feeding_method: string
|
||||
appetite: string
|
||||
notes: string
|
||||
}
|
||||
|
||||
const initialForm: OpsForm = {
|
||||
batch: '',
|
||||
feed_product: '',
|
||||
fed_at: '',
|
||||
quantity_kg: '',
|
||||
feeding_method: 'manual',
|
||||
appetite: 'normal',
|
||||
notes: '',
|
||||
}
|
||||
|
||||
const nowForDateTimeLocal = () => {
|
||||
const date = new Date()
|
||||
date.setMinutes(date.getMinutes() - date.getTimezoneOffset())
|
||||
return date.toISOString().slice(0, 16)
|
||||
}
|
||||
|
||||
const formatDateTime = (value?: string) => {
|
||||
if (!value) return 'Not scheduled'
|
||||
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
}).format(new Date(value))
|
||||
}
|
||||
|
||||
const formatQuantity = (value?: string | number) => {
|
||||
if (value === undefined || value === null || value === '') return '0 kg'
|
||||
|
||||
return `${Number(value).toLocaleString(undefined, { maximumFractionDigits: 2 })} kg`
|
||||
}
|
||||
|
||||
const getRecorder = (log?: FeedLog) => {
|
||||
const firstName = log?.recorded_by?.firstName || ''
|
||||
const lastName = log?.recorded_by?.lastName || ''
|
||||
const fullName = `${firstName} ${lastName}`.trim()
|
||||
|
||||
return fullName || log?.recorded_by?.email || 'Team member'
|
||||
}
|
||||
|
||||
const statusStyles = {
|
||||
low: 'bg-amber-100 text-amber-800 ring-amber-200',
|
||||
normal: 'bg-emerald-100 text-emerald-800 ring-emerald-200',
|
||||
high: 'bg-sky-100 text-sky-800 ring-sky-200',
|
||||
}
|
||||
|
||||
const FarmOpsPage = () => {
|
||||
const { currentUser } = useAppSelector((state) => state.auth)
|
||||
const [logs, setLogs] = useState<FeedLog[]>([])
|
||||
const [batchOptions, setBatchOptions] = useState<Option[]>([])
|
||||
const [feedOptions, setFeedOptions] = useState<Option[]>([])
|
||||
const [selectedLog, setSelectedLog] = useState<FeedLog | null>(null)
|
||||
const [form, setForm] = useState<OpsForm>({ ...initialForm, fed_at: nowForDateTimeLocal() })
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const canCreateFeedLog = currentUser && hasPermission(currentUser, 'CREATE_FEEDING_LOGS')
|
||||
|
||||
const totalFedToday = useMemo(() => {
|
||||
const today = new Date().toDateString()
|
||||
|
||||
return logs
|
||||
.filter((log) => log.fed_at && new Date(log.fed_at).toDateString() === today)
|
||||
.reduce((sum, log) => sum + Number(log.quantity_kg || 0), 0)
|
||||
}, [logs])
|
||||
|
||||
const activeBatchCount = useMemo(() => {
|
||||
const ids = new Set(logs.map((log) => log.batch?.id).filter(Boolean))
|
||||
|
||||
return ids.size
|
||||
}, [logs])
|
||||
|
||||
const latestAppetite = logs[0]?.appetite || 'normal'
|
||||
|
||||
const fetchWorkspace = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const [feedLogResponse, batchResponse, feedProductResponse] = await Promise.all([
|
||||
axios.get('/feeding_logs?limit=12&field=fed_at&sort=DESC'),
|
||||
axios.get('/batches/autocomplete?limit=100'),
|
||||
axios.get('/feed_products/autocomplete?limit=100'),
|
||||
])
|
||||
|
||||
const latestLogs = Array.isArray(feedLogResponse.data?.rows) ? feedLogResponse.data.rows : []
|
||||
const batches = Array.isArray(batchResponse.data) ? batchResponse.data : []
|
||||
const feeds = Array.isArray(feedProductResponse.data) ? feedProductResponse.data : []
|
||||
|
||||
setLogs(latestLogs)
|
||||
setBatchOptions(batches)
|
||||
setFeedOptions(feeds)
|
||||
setSelectedLog((current) => current || latestLogs[0] || null)
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
batch: current.batch || batches[0]?.id || '',
|
||||
feed_product: current.feed_product || feeds[0]?.id || '',
|
||||
}))
|
||||
} catch (fetchError) {
|
||||
console.error('Farm ops workspace failed to load', fetchError)
|
||||
setError('Could not load the farm operations workspace. Please refresh or check your permissions.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchWorkspace()
|
||||
}, [])
|
||||
|
||||
const handleChange = (field: keyof OpsForm, value: string) => {
|
||||
setForm((current) => ({ ...current, [field]: value }))
|
||||
}
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
setError('')
|
||||
setMessage('')
|
||||
|
||||
if (!form.batch) {
|
||||
setError('Choose a batch before recording feed.')
|
||||
return
|
||||
}
|
||||
|
||||
if (!form.fed_at) {
|
||||
setError('Add the feeding time.')
|
||||
return
|
||||
}
|
||||
|
||||
if (!form.quantity_kg || Number(form.quantity_kg) <= 0) {
|
||||
setError('Feed quantity must be greater than 0 kg.')
|
||||
return
|
||||
}
|
||||
|
||||
setSaving(true)
|
||||
|
||||
try {
|
||||
await axios.post('/feeding_logs', {
|
||||
data: {
|
||||
batch: form.batch,
|
||||
feed_product: form.feed_product || null,
|
||||
fed_at: new Date(form.fed_at).toISOString(),
|
||||
quantity_kg: form.quantity_kg,
|
||||
feeding_method: form.feeding_method,
|
||||
appetite: form.appetite,
|
||||
notes: form.notes,
|
||||
recorded_by: currentUser?.id || null,
|
||||
},
|
||||
})
|
||||
|
||||
setMessage('Feeding record saved. The latest activity list has been refreshed.')
|
||||
setForm({ ...initialForm, fed_at: nowForDateTimeLocal(), batch: form.batch, feed_product: form.feed_product })
|
||||
await fetchWorkspace()
|
||||
} catch (saveError) {
|
||||
console.error('Farm ops feeding log save failed', saveError)
|
||||
setError('Could not save the feeding record. Please check the values and try again.')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{getPageTitle('Farm Ops Command Center')}</title>
|
||||
</Head>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Farm Ops Command Center" main>
|
||||
<BaseButton href="/feeding_logs/feeding_logs-list" label="Open full CRUD" color="whiteDark" />
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<section className="mb-6 overflow-hidden rounded-3xl bg-gradient-to-br from-[#042f2e] via-[#075985] to-[#0f766e] p-1 shadow-xl">
|
||||
<div className="rounded-[1.35rem] bg-white/10 p-6 text-white backdrop-blur md:p-8">
|
||||
<div className="grid gap-6 lg:grid-cols-[1.35fr_0.65fr] lg:items-end">
|
||||
<div>
|
||||
<p className="mb-3 inline-flex rounded-full bg-white/15 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-cyan-100 ring-1 ring-white/20">
|
||||
Multi-tenant aquaculture workflow
|
||||
</p>
|
||||
<h2 className="max-w-3xl text-3xl font-black tracking-tight md:text-5xl">
|
||||
Record feed, monitor appetite, and keep the farm team aligned.
|
||||
</h2>
|
||||
<p className="mt-4 max-w-2xl text-sm leading-6 text-cyan-50 md:text-base">
|
||||
A focused daily operations slice built on top of your generated CRUD entities: batches, feed products, and feeding logs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3 text-center">
|
||||
<div className="rounded-2xl bg-white/15 p-4 ring-1 ring-white/20">
|
||||
<div className="text-2xl font-black">{formatQuantity(totalFedToday)}</div>
|
||||
<div className="mt-1 text-xs text-cyan-100">Fed today</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white/15 p-4 ring-1 ring-white/20">
|
||||
<div className="text-2xl font-black">{activeBatchCount}</div>
|
||||
<div className="mt-1 text-xs text-cyan-100">Active batches</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white/15 p-4 ring-1 ring-white/20">
|
||||
<div className="text-2xl font-black capitalize">{latestAppetite}</div>
|
||||
<div className="mt-1 text-xs text-cyan-100">Latest appetite</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{(message || error) && (
|
||||
<div
|
||||
className={`mb-6 rounded-2xl px-4 py-3 text-sm ring-1 ${
|
||||
error ? 'bg-rose-50 text-rose-800 ring-rose-200' : 'bg-emerald-50 text-emerald-800 ring-emerald-200'
|
||||
}`}
|
||||
>
|
||||
{error || message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
|
||||
<CardBox className="border-0 shadow-lg ring-1 ring-slate-200/80 dark:ring-dark-700">
|
||||
<div className="mb-5 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-teal-600">Quick input</p>
|
||||
<h3 className="mt-1 text-2xl font-bold text-slate-900 dark:text-white">Log a feeding</h3>
|
||||
<p className="mt-1 text-sm text-slate-500">Capture the minimum operational data and confirm it immediately.</p>
|
||||
</div>
|
||||
<span className="rounded-2xl bg-teal-50 p-3 text-teal-700 ring-1 ring-teal-100">
|
||||
<BaseIcon path={mdiFoodDrumstick} size="24" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="rounded-2xl bg-slate-50 p-6 text-sm text-slate-500">Loading batches and feed products…</div>
|
||||
) : batchOptions.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-6 text-sm text-slate-600">
|
||||
<p className="font-semibold text-slate-900">No batches available yet.</p>
|
||||
<p className="mt-2">Create a batch first, then return here to record daily feeding activity.</p>
|
||||
<BaseButton href="/batches/batches-new" label="Create batch" color="info" className="mt-4" />
|
||||
</div>
|
||||
) : (
|
||||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">Batch</span>
|
||||
<select
|
||||
className="h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/30 dark:border-dark-700 dark:bg-dark-800"
|
||||
value={form.batch}
|
||||
onChange={(event) => handleChange('batch', event.target.value)}
|
||||
disabled={!canCreateFeedLog || saving}
|
||||
>
|
||||
{batchOptions.map((batch) => (
|
||||
<option key={batch.id} value={batch.id}>
|
||||
{batch.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">Fed at</span>
|
||||
<input
|
||||
className="h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/30 dark:border-dark-700 dark:bg-dark-800"
|
||||
type="datetime-local"
|
||||
value={form.fed_at}
|
||||
onChange={(event) => handleChange('fed_at', event.target.value)}
|
||||
disabled={!canCreateFeedLog || saving}
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">Quantity (kg)</span>
|
||||
<input
|
||||
className="h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/30 dark:border-dark-700 dark:bg-dark-800"
|
||||
min="0"
|
||||
step="0.01"
|
||||
type="number"
|
||||
value={form.quantity_kg}
|
||||
onChange={(event) => handleChange('quantity_kg', event.target.value)}
|
||||
disabled={!canCreateFeedLog || saving}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<label className="block md:col-span-1">
|
||||
<span className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">Feed product</span>
|
||||
<select
|
||||
className="h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/30 dark:border-dark-700 dark:bg-dark-800"
|
||||
value={form.feed_product}
|
||||
onChange={(event) => handleChange('feed_product', event.target.value)}
|
||||
disabled={!canCreateFeedLog || saving}
|
||||
>
|
||||
<option value="">Not specified</option>
|
||||
{feedOptions.map((feed) => (
|
||||
<option key={feed.id} value={feed.id}>
|
||||
{feed.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block md:col-span-1">
|
||||
<span className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">Method</span>
|
||||
<select
|
||||
className="h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/30 dark:border-dark-700 dark:bg-dark-800"
|
||||
value={form.feeding_method}
|
||||
onChange={(event) => handleChange('feeding_method', event.target.value)}
|
||||
disabled={!canCreateFeedLog || saving}
|
||||
>
|
||||
<option value="manual">Manual</option>
|
||||
<option value="auto_feeder">Auto feeder</option>
|
||||
<option value="broadcast">Broadcast</option>
|
||||
<option value="tray">Tray</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="block md:col-span-1">
|
||||
<span className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">Appetite</span>
|
||||
<select
|
||||
className="h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/30 dark:border-dark-700 dark:bg-dark-800"
|
||||
value={form.appetite}
|
||||
onChange={(event) => handleChange('appetite', event.target.value)}
|
||||
disabled={!canCreateFeedLog || saving}
|
||||
>
|
||||
<option value="low">Low</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200">Notes</span>
|
||||
<textarea
|
||||
className="min-h-[104px] w-full rounded-xl border border-slate-300 bg-white px-3 py-3 text-sm shadow-sm focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/30 dark:border-dark-700 dark:bg-dark-800"
|
||||
placeholder="Optional observation, e.g. fish surfaced quickly, mild leftovers, weather change…"
|
||||
value={form.notes}
|
||||
onChange={(event) => handleChange('notes', event.target.value)}
|
||||
disabled={!canCreateFeedLog || saving}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{!canCreateFeedLog && (
|
||||
<p className="rounded-xl bg-amber-50 px-3 py-2 text-sm text-amber-800 ring-1 ring-amber-200">
|
||||
Your role can view feeding logs but cannot create new records.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-3 pt-2">
|
||||
<BaseButton
|
||||
color="info"
|
||||
disabled={!canCreateFeedLog || saving}
|
||||
label={saving ? 'Saving…' : 'Save feeding record'}
|
||||
type="submit"
|
||||
/>
|
||||
<BaseButton color="whiteDark" href="/feeding_logs/feeding_logs-new" label="Advanced form" />
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</CardBox>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[1fr_0.85fr] xl:grid-cols-1 2xl:grid-cols-[1fr_0.85fr]">
|
||||
<CardBox className="border-0 shadow-lg ring-1 ring-slate-200/80 dark:ring-dark-700">
|
||||
<div className="mb-5 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-sky-600">Activity stream</p>
|
||||
<h3 className="mt-1 text-2xl font-bold text-slate-900 dark:text-white">Latest feeding logs</h3>
|
||||
</div>
|
||||
<BaseButton color="whiteDark" label="Refresh" onClick={fetchWorkspace} small />
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="rounded-2xl bg-slate-50 p-6 text-sm text-slate-500">Loading latest records…</div>
|
||||
) : logs.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-8 text-center">
|
||||
<BaseIcon path={mdiClipboardTextClock} size="40" className="mx-auto text-slate-400" />
|
||||
<p className="mt-3 font-semibold text-slate-900">No feeding logs yet</p>
|
||||
<p className="mt-1 text-sm text-slate-500">Use the quick input form to create the first daily operation record.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{logs.map((log) => {
|
||||
const isSelected = selectedLog?.id === log.id
|
||||
const appetiteClass = statusStyles[log.appetite] || statusStyles.normal
|
||||
|
||||
return (
|
||||
<button
|
||||
key={log.id}
|
||||
className={`w-full rounded-2xl border p-4 text-left transition hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-teal-500/40 ${
|
||||
isSelected ? 'border-teal-400 bg-teal-50/80' : 'border-slate-200 bg-white dark:border-dark-700 dark:bg-dark-900'
|
||||
}`}
|
||||
type="button"
|
||||
onClick={() => setSelectedLog(log)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="font-bold text-slate-900 dark:text-white">{log.batch?.batch_code || 'Unassigned batch'}</p>
|
||||
<p className="mt-1 text-sm text-slate-500">{formatDateTime(log.fed_at)} • {log.feeding_method || 'manual'}</p>
|
||||
</div>
|
||||
<span className={`rounded-full px-2.5 py-1 text-xs font-semibold capitalize ring-1 ${appetiteClass}`}>
|
||||
{log.appetite || 'normal'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-2 gap-3 text-sm">
|
||||
<div className="rounded-xl bg-slate-50 p-3 dark:bg-dark-800">
|
||||
<span className="block text-xs uppercase tracking-wide text-slate-400">Quantity</span>
|
||||
<strong>{formatQuantity(log.quantity_kg)}</strong>
|
||||
</div>
|
||||
<div className="rounded-xl bg-slate-50 p-3 dark:bg-dark-800">
|
||||
<span className="block text-xs uppercase tracking-wide text-slate-400">Feed</span>
|
||||
<strong>{log.feed_product?.product_name || 'Not specified'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardBox>
|
||||
|
||||
<CardBox className="border-0 bg-slate-950 text-white shadow-lg ring-1 ring-slate-800">
|
||||
<div className="mb-5 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-cyan-300">Detail</p>
|
||||
<h3 className="mt-1 text-2xl font-bold">Record snapshot</h3>
|
||||
</div>
|
||||
<span className="rounded-2xl bg-cyan-400/10 p-3 text-cyan-200 ring-1 ring-cyan-300/20">
|
||||
<BaseIcon path={mdiWaterPercent} size="24" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{selectedLog ? (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-2xl bg-white/10 p-4 ring-1 ring-white/10">
|
||||
<p className="text-sm text-slate-300">Batch</p>
|
||||
<p className="mt-1 text-2xl font-black">{selectedLog.batch?.batch_code || 'Unassigned batch'}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="rounded-2xl bg-white/10 p-4 ring-1 ring-white/10">
|
||||
<p className="text-xs uppercase tracking-wide text-slate-400">Quantity</p>
|
||||
<p className="mt-1 text-xl font-bold">{formatQuantity(selectedLog.quantity_kg)}</p>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white/10 p-4 ring-1 ring-white/10">
|
||||
<p className="text-xs uppercase tracking-wide text-slate-400">Appetite</p>
|
||||
<p className="mt-1 text-xl font-bold capitalize">{selectedLog.appetite || 'normal'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white/10 p-4 ring-1 ring-white/10">
|
||||
<p className="text-xs uppercase tracking-wide text-slate-400">Recorded</p>
|
||||
<p className="mt-1 font-semibold">{formatDateTime(selectedLog.fed_at)} by {getRecorder(selectedLog)}</p>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white/10 p-4 ring-1 ring-white/10">
|
||||
<p className="text-xs uppercase tracking-wide text-slate-400">Notes</p>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-200">{selectedLog.notes || 'No notes added for this operation.'}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3 pt-2">
|
||||
<BaseButton color="info" href={`/feeding_logs/${selectedLog.id}`} label="Open detail" />
|
||||
<BaseButton color="whiteDark" href="/marketplace_listings/marketplace_listings-list" label="Marketplace" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-2xl border border-dashed border-white/20 p-8 text-center text-slate-300">
|
||||
Select a feeding log to inspect its farm-ready details.
|
||||
</div>
|
||||
)}
|
||||
</CardBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="mt-6 grid gap-4 md:grid-cols-3">
|
||||
{[
|
||||
{ icon: mdiFish, title: 'Batch context', text: 'Every record is tied to generated batch CRUD for traceability.' },
|
||||
{ icon: mdiCalendarCheck, title: 'Daily rhythm', text: 'Fast input supports the staff workflow farmers repeat every shift.' },
|
||||
{ icon: mdiStorefront, title: 'Marketplace ready', text: 'Operational records are one step away from harvest, listing, order, and transaction flows.' },
|
||||
].map((item) => (
|
||||
<div key={item.title} className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 dark:bg-dark-900 dark:ring-dark-700">
|
||||
<BaseIcon path={item.icon} size="28" className="text-teal-600" />
|
||||
<h4 className="mt-3 font-bold text-slate-900 dark:text-white">{item.title}</h4>
|
||||
<p className="mt-1 text-sm leading-6 text-slate-500">{item.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</SectionMain>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
FarmOpsPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutAuthenticated permission="READ_FEEDING_LOGS">{page}</LayoutAuthenticated>
|
||||
}
|
||||
|
||||
export default FarmOpsPage
|
||||
@ -1,166 +1,138 @@
|
||||
import React from 'react'
|
||||
import type { ReactElement } from 'react'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import BaseButton from '../components/BaseButton'
|
||||
import CardBox from '../components/CardBox'
|
||||
import LayoutGuest from '../layouts/Guest'
|
||||
import { getPageTitle } from '../config'
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import CardBox from '../components/CardBox';
|
||||
import SectionFullScreen from '../components/SectionFullScreen';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import BaseDivider from '../components/BaseDivider';
|
||||
import BaseButtons from '../components/BaseButtons';
|
||||
import { getPageTitle } from '../config';
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||
const metrics = [
|
||||
{ value: '12+', label: 'aquaculture entities' },
|
||||
{ value: '4', label: 'role-focused workspaces' },
|
||||
{ value: 'CSV', label: 'import / export ready' },
|
||||
]
|
||||
|
||||
const workflows = [
|
||||
'Ponds, species, batches, feeding, water quality, health, and harvests',
|
||||
'Marketplace listings, buyer orders, payment transactions, and shipment statuses',
|
||||
'Investor visibility, audit logs, REST API, webhooks, and email notifications',
|
||||
]
|
||||
|
||||
export default function Starter() {
|
||||
const [illustrationImage, setIllustrationImage] = useState({
|
||||
src: undefined,
|
||||
photographer: undefined,
|
||||
photographer_url: undefined,
|
||||
})
|
||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
||||
const [contentType, setContentType] = useState('image');
|
||||
const [contentPosition, setContentPosition] = useState('background');
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
|
||||
const title = 'Aquaculture Ops CRUD'
|
||||
|
||||
// Fetch Pexels image/video
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage();
|
||||
const video = await getPexelsVideo();
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const imageBlock = (image) => (
|
||||
<div
|
||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
||||
style={{
|
||||
backgroundImage: `${
|
||||
image
|
||||
? `url(${image?.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={image?.photographer_url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Photo by {image?.photographer} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const videoBlock = (video) => {
|
||||
if (video?.video_files?.length > 0) {
|
||||
return (
|
||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
||||
<video
|
||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
>
|
||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={video?.user?.url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Video by {video.user.name} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
contentPosition === 'background'
|
||||
? {
|
||||
backgroundImage: `${
|
||||
illustrationImage
|
||||
? `url(${illustrationImage.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<div className="min-h-screen bg-[#f6fbf9] text-slate-900">
|
||||
<Head>
|
||||
<title>{getPageTitle('Starter Page')}</title>
|
||||
<title>{getPageTitle('Aquaculture Ops')}</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Modern multi-tenant aquaculture operations, marketplace, and investor visibility SaaS."
|
||||
/>
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div
|
||||
className={`flex ${
|
||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
||||
} min-h-screen w-full`}
|
||||
>
|
||||
{contentType === 'image' && contentPosition !== 'background'
|
||||
? imageBlock(illustrationImage)
|
||||
: null}
|
||||
{contentType === 'video' && contentPosition !== 'background'
|
||||
? videoBlock(illustrationVideo)
|
||||
: null}
|
||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
||||
<CardBoxComponentTitle title="Welcome to your Aquaculture Ops CRUD app!"/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
||||
</div>
|
||||
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
href='/login'
|
||||
label='Login'
|
||||
color='info'
|
||||
className='w-full'
|
||||
/>
|
||||
|
||||
</BaseButtons>
|
||||
</CardBox>
|
||||
<header className="sticky top-0 z-20 border-b border-teal-900/10 bg-white/85 backdrop-blur-xl">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
|
||||
<Link href="/" className="flex items-center gap-3 font-black tracking-tight">
|
||||
<span className="grid h-10 w-10 place-items-center rounded-2xl bg-teal-700 text-white shadow-lg shadow-teal-700/20">
|
||||
AQ
|
||||
</span>
|
||||
<span>Aquaculture Ops</span>
|
||||
</Link>
|
||||
<nav className="flex items-center gap-3 text-sm font-semibold">
|
||||
<Link className="hidden text-slate-600 transition hover:text-teal-700 sm:inline" href="/api-docs">
|
||||
REST API
|
||||
</Link>
|
||||
<Link className="hidden text-slate-600 transition hover:text-teal-700 sm:inline" href="/farm-ops">
|
||||
Farm Ops
|
||||
</Link>
|
||||
<BaseButton href="/login" label="Login" color="whiteDark" />
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</SectionFullScreen>
|
||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(20,184,166,0.22),_transparent_34%),radial-gradient(circle_at_85%_20%,_rgba(14,165,233,0.18),_transparent_30%)]" />
|
||||
<div className="relative mx-auto grid min-h-[calc(100vh-73px)] max-w-7xl gap-10 px-6 py-16 lg:grid-cols-[1.08fr_0.92fr] lg:items-center lg:py-24">
|
||||
<div>
|
||||
<p className="mb-5 inline-flex rounded-full bg-teal-100 px-4 py-2 text-xs font-black uppercase tracking-[0.24em] text-teal-800 ring-1 ring-teal-200">
|
||||
Multi-tenant farm operations + marketplace
|
||||
</p>
|
||||
<h1 className="max-w-4xl text-5xl font-black leading-[0.95] tracking-tight text-slate-950 md:text-7xl">
|
||||
Run smarter fish farms from pond to paid order.
|
||||
</h1>
|
||||
<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
|
||||
A clean, data-first SaaS workspace for farmers, operators, buyers, investors, and admins — built around daily records, fulfillment statuses, auditability, and role-based access.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<BaseButton href="/farm-ops" label="Open Farm Ops workflow" color="info" roundedFull />
|
||||
<BaseButton href="/login" label="Admin login" color="whiteDark" roundedFull />
|
||||
</div>
|
||||
<div className="mt-10 grid max-w-2xl grid-cols-3 gap-3">
|
||||
{metrics.map((metric) => (
|
||||
<div key={metric.label} className="rounded-3xl bg-white/80 p-5 shadow-sm ring-1 ring-slate-200 backdrop-blur">
|
||||
<div className="text-3xl font-black text-teal-700">{metric.value}</div>
|
||||
<div className="mt-1 text-xs font-semibold uppercase tracking-wide text-slate-500">{metric.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardBox className="border-0 bg-slate-950 text-white shadow-2xl shadow-teal-900/20 ring-1 ring-slate-800">
|
||||
<div className="rounded-3xl bg-gradient-to-br from-teal-400/20 via-sky-400/10 to-transparent p-5 ring-1 ring-white/10">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-cyan-200">Today’s command center</p>
|
||||
<h2 className="mt-1 text-3xl font-black">Feed → Observe → Sell</h2>
|
||||
</div>
|
||||
<span className="rounded-full bg-emerald-400/20 px-3 py-1 text-xs font-bold text-emerald-200 ring-1 ring-emerald-300/20">
|
||||
Live MVP slice
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-3">
|
||||
{workflows.map((workflow, index) => (
|
||||
<div key={workflow} className="flex gap-4 rounded-2xl bg-white/10 p-4 ring-1 ring-white/10">
|
||||
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-cyan-300 text-sm font-black text-slate-950">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-sm leading-6 text-slate-200">{workflow}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-2xl bg-white p-4 text-slate-900">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.2em] text-teal-700">First workflow</p>
|
||||
<p className="mt-1 font-black">Quick feeding log with confirmation, latest list, and detail view.</p>
|
||||
</div>
|
||||
<BaseButton href="/farm-ops" label="Launch" color="info" small />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="border-t border-teal-900/10 bg-white px-6 py-6">
|
||||
<div className="mx-auto flex max-w-7xl flex-col justify-between gap-3 text-sm text-slate-500 md:flex-row">
|
||||
<p>© 2026 Aquaculture Ops. Built for modern, multi-tenant farming teams.</p>
|
||||
<div className="flex gap-4">
|
||||
<Link className="hover:text-teal-700" href="/privacy-policy/">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link className="hover:text-teal-700" href="/login">
|
||||
Admin interface
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
return <LayoutGuest>{page}</LayoutGuest>
|
||||
}
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import React, { ReactElement, useEffect, useState } from 'react';
|
||||
import Head from 'next/head';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
import { useAppDispatch } from '../stores/hooks';
|
||||
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||
|
||||
import { useRouter } from 'next/router';
|
||||
import LayoutAuthenticated from '../layouts/Authenticated';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user