build ok,

002_source/cms/src/components/dashboard/jobs/jobs-card.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { dayjs } from '@/lib/dayjs';
+
+import type { Job } from './types';
+
+export interface JobsCardProps {
+  jobs?: Job[];
+}
+
+export function JobsCard({ jobs = [] }: JobsCardProps): React.JSX.Element {
+  return (
+    <Card variant="outlined">
+      <Stack divider={<Divider />}>
+        {jobs.map((job) => {
+          const location = job.isRemote ? 'Remote possible' : `(${job.country}, ${job.state}, ${job.city})`;
+          const salary = `${job.currency} ${new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: job.currency,
+            notation: 'compact',
+          }).format(job.budgetMin)} - ${job.currency} ${new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: job.currency,
+            notation: 'compact',
+          }).format(job.budgetMax)}`;
+
+          return (
+            <Stack
+              direction="row"
+              key={job.id}
+              sx={{ alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between', px: 2, py: 1.5 }}
+            >
+              <div>
+                <Typography variant="subtitle1">{job.title}</Typography>
+                <Typography color="text.secondary" variant="caption">
+                  {location} • {salary}
+                </Typography>
+              </div>
+              <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+                <Typography color="text.secondary" variant="caption">
+                  {dayjs(job.publishedAt).fromNow()}
+                </Typography>
+                <Button size="small">Apply</Button>
+              </Stack>
+            </Stack>
+          );
+        })}
+      </Stack>
+    </Card>
+  );
+}