noticeboard/frontend/src/components/NoticeBoard.js

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useReducer, useState } from 'react';
import { Pin, PinOff, Trash2, Plus, X } from 'lucide-react';
const CATEGORIES = [
    { value: 'all', label: 'All' },
    { value: 'general', label: 'General' },
    { value: 'kitchen', label: 'Kitchen' },
    { value: 'housekeeping', label: 'Housekeeping' },
    { value: 'management', label: 'Management' },
];
export function NoticeBoard({ user }) {
    const [notices, setNotices] = useState([]);
    const [category, setCategory] = useState('all');
    const [showForm, setShowForm] = useState(false);
    const [, forceRefresh] = useReducer(x => x + 1, 0);
    useEffect(() => {
        const params = category !== 'all' ? `?category=${category}` : '';
        fetch(`/notices/api/notices${params}`, { credentials: 'include' })
            .then(r => r.json())
            .then(setNotices);
    }, [category, forceRefresh]);
    async function togglePin(id) {
        await fetch(`/notices/api/notices/${id}/pin`, { method: 'PATCH', credentials: 'include' });
        forceRefresh();
    }
    async function deleteNotice(id) {
        if (!confirm('Delete this notice?'))
            return;
        await fetch(`/notices/api/notices/${id}`, { method: 'DELETE', credentials: 'include' });
        forceRefresh();
    }
    return (_jsxs("div", { style: { maxWidth: '720px', margin: '0 auto', padding: '1.5rem 1rem' }, children: [_jsxs("header", { style: {
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    marginBottom: '1.25rem',
                }, children: [_jsxs("div", { children: [_jsx("h1", { style: { fontSize: '1.15rem', fontWeight: 700, color: 'var(--text-dark)' }, children: "Noticeboard" }), _jsx("p", { style: { fontSize: '0.75rem', color: 'var(--text-mid)', marginTop: '0.1rem' }, children: user.name })] }), user.is_admin && (_jsx("button", { onClick: () => setShowForm(v => !v), style: {
                            background: showForm ? 'var(--card-bg)' : 'var(--gold)',
                            color: showForm ? 'var(--text-mid)' : 'var(--navy)',
                            border: showForm ? '1px solid var(--card-border)' : 'none',
                            borderRadius: '7px', padding: '0.45rem 0.9rem',
                            fontSize: '0.82rem', fontWeight: 600,
                            display: 'flex', alignItems: 'center', gap: '0.4rem',
                        }, children: showForm ? _jsxs(_Fragment, { children: [_jsx(X, { size: 14, strokeWidth: 2 }), " Cancel"] }) : _jsxs(_Fragment, { children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), " Post"] }) }))] }), showForm && user.is_admin && (_jsx(PostForm, { onPosted: () => { setShowForm(false); forceRefresh(); } })), _jsx("div", { style: { display: 'flex', gap: '0.4rem', marginBottom: '1.25rem', flexWrap: 'wrap' }, children: CATEGORIES.map(c => (_jsx("button", { onClick: () => setCategory(c.value), style: {
                        background: category === c.value ? 'var(--navy)' : 'var(--card-bg)',
                        color: category === c.value ? 'var(--gold)' : 'var(--text-mid)',
                        border: `1px solid ${category === c.value ? 'var(--navy)' : 'var(--card-border)'}`,
                        borderRadius: '20px', padding: '0.3rem 0.875rem',
                        fontSize: '0.78rem', fontWeight: 500,
                    }, children: c.label }, c.value))) }), notices.length === 0 && (_jsx("p", { style: { color: 'var(--text-mid)', textAlign: 'center', padding: '3rem 0', fontSize: '0.9rem' }, children: "No notices yet." })), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.75rem' }, children: notices.map(n => (_jsx("div", { style: {
                        background: 'var(--card-bg)',
                        borderRadius: 'var(--radius)',
                        padding: '1rem 1.125rem',
                        border: `1px solid ${n.pinned ? 'var(--gold)' : 'var(--card-border)'}`,
                        borderLeft: `3px solid ${n.pinned ? 'var(--gold)' : 'var(--card-border)'}`,
                        boxShadow: 'var(--shadow-sm)',
                    }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.4rem' }, children: [n.pinned && (_jsx("span", { style: {
                                                    fontSize: '0.65rem', background: 'var(--gold)', color: 'var(--navy)',
                                                    borderRadius: '4px', padding: '0.1rem 0.4rem', fontWeight: 700,
                                                    letterSpacing: '0.04em',
                                                }, children: "PINNED" })), _jsx("span", { style: {
                                                    fontSize: '0.65rem', background: 'var(--body-bg)', color: 'var(--text-mid)',
                                                    borderRadius: '4px', padding: '0.1rem 0.4rem',
                                                    textTransform: 'uppercase', letterSpacing: '0.04em',
                                                    border: '1px solid var(--card-border)',
                                                }, children: n.category })] }), _jsx("h2", { style: { fontSize: '0.95rem', fontWeight: 600, color: 'var(--text-dark)', marginBottom: '0.35rem' }, children: n.title }), _jsx("p", { style: { color: 'var(--text-mid)', fontSize: '0.875rem', lineHeight: 1.5, whiteSpace: 'pre-wrap' }, children: n.body }), _jsxs("p", { style: { color: 'var(--text-mid)', fontSize: '0.72rem', marginTop: '0.75rem' }, children: [n.author_name, " \u00B7 ", new Date(n.created_at).toLocaleDateString('en-GB', {
                                                day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'
                                            }), n.expires_at && ` · expires ${new Date(n.expires_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}`] })] }), user.is_admin && (_jsxs("div", { style: { display: 'flex', gap: '0.35rem', flexShrink: 0 }, children: [_jsx("button", { onClick: () => togglePin(n.id), title: n.pinned ? 'Unpin' : 'Pin', style: iconBtn, children: n.pinned
                                            ? _jsx(PinOff, { size: 15, strokeWidth: 1.75 })
                                            : _jsx(Pin, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { onClick: () => deleteNotice(n.id), title: "Delete", style: { ...iconBtn, color: 'var(--danger)' }, children: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }) })] }))] }) }, n.id))) })] }));
}
function PostForm({ onPosted }) {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');
    const [category, setCategory] = useState('general');
    const [pinned, setPinned] = useState(false);
    const [expires, setExpires] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState('');
    async function submit(e) {
        e.preventDefault();
        setSubmitting(true);
        setError('');
        try {
            const res = await fetch('/notices/api/notices', {
                method: 'POST',
                credentials: 'include',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ title, body, category, pinned, expires_at: expires || null }),
            });
            if (res.ok)
                onPosted();
            else
                setError('Failed to post notice');
        }
        catch {
            setError('Connection error');
        }
        finally {
            setSubmitting(false);
        }
    }
    return (_jsxs("form", { onSubmit: submit, style: {
            background: 'var(--card-bg)', borderRadius: 'var(--radius)',
            padding: '1.25rem', marginBottom: '1.25rem',
            border: '1px solid var(--gold)',
            boxShadow: 'var(--shadow-md)',
            display: 'flex', flexDirection: 'column', gap: '0.75rem',
        }, children: [_jsx("h2", { style: { fontSize: '0.875rem', fontWeight: 600, color: 'var(--text-dark)' }, children: "New Notice" }), _jsx("input", { value: title, onChange: e => setTitle(e.target.value), placeholder: "Title", required: true, style: inputStyle }), _jsx("textarea", { value: body, onChange: e => setBody(e.target.value), placeholder: "Notice content\u2026", required: true, rows: 4, style: { ...inputStyle, resize: 'vertical', lineHeight: 1.5 } }), _jsxs("div", { style: { display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }, children: [_jsx("select", { value: category, onChange: e => setCategory(e.target.value), style: { ...inputStyle, flex: 1 }, children: CATEGORIES.filter(c => c.value !== 'all').map(c => (_jsx("option", { value: c.value, children: c.label }, c.value))) }), _jsx("input", { type: "date", value: expires, onChange: e => setExpires(e.target.value), style: { ...inputStyle, flex: 1 }, title: "Expires (optional)" })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.875rem',
                    cursor: 'pointer', color: 'var(--text-dark)' }, children: [_jsx("input", { type: "checkbox", checked: pinned, onChange: e => setPinned(e.target.checked) }), "Pin to top"] }), error && _jsx("p", { style: { color: 'var(--danger)', fontSize: '0.875rem' }, children: error }), _jsx("button", { type: "submit", disabled: submitting, style: submitBtn, children: submitting ? 'Posting…' : 'Post notice' })] }));
}
const inputStyle = {
    background: 'var(--body-bg)', border: '1px solid var(--card-border)',
    borderRadius: '7px', color: 'var(--text-dark)', padding: '0.6rem 0.75rem',
    fontSize: '0.9rem', width: '100%', outline: 'none',
};
const iconBtn = {
    background: 'var(--body-bg)', border: '1px solid var(--card-border)',
    borderRadius: '6px', padding: '0.3rem', color: 'var(--text-mid)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
};
const submitBtn = {
    background: 'var(--gold)', color: 'var(--navy)', border: 'none',
    borderRadius: '7px', padding: '0.625rem', fontSize: '0.9rem', fontWeight: 600,
};