50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
/**
|
|
* Check-in Dashboard App - Overview of automatic check-ins
|
|
*/
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
export function CheckinDashboard({ projectId }: { projectId?: number }) {
|
|
const [questions] = useState([
|
|
{ id: 1, title: 'What did you work on today?', schedule: 'Weekdays at 5pm', answers_count: 45, paused: false },
|
|
{ id: 2, title: 'What are your goals for this week?', schedule: 'Mondays at 9am', answers_count: 12, paused: false },
|
|
{ id: 3, title: 'Any blockers or concerns?', schedule: 'Every other day at 10am', answers_count: 28, paused: true },
|
|
]);
|
|
|
|
return (
|
|
<div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
|
<h1 style={{ fontSize: '24px', margin: 0 }}>Automatic Check-ins</h1>
|
|
<button style={{ padding: '10px 20px', background: '#1d8cf8', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
|
|
New Check-in
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gap: '16px' }}>
|
|
{questions.map(question => (
|
|
<div key={question.id} style={{
|
|
border: '1px solid #ddd',
|
|
borderRadius: '8px',
|
|
padding: '20px',
|
|
background: 'white',
|
|
opacity: question.paused ? 0.6 : 1
|
|
}}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '12px' }}>
|
|
<h3 style={{ fontSize: '18px', margin: 0 }}>{question.title}</h3>
|
|
{question.paused && (
|
|
<span style={{ padding: '4px 12px', background: '#999', color: 'white', borderRadius: '12px', fontSize: '12px' }}>
|
|
PAUSED
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>{question.schedule}</div>
|
|
<div style={{ fontSize: '14px', color: '#1d8cf8', fontWeight: 'bold' }}>
|
|
{question.answers_count} responses
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|