Added support for challenges and tweaked qual awarding rules

This commit is contained in:
2026-05-22 09:00:32 -04:00
parent 7532436b9a
commit f8b1811b74
10 changed files with 259 additions and 54 deletions
@@ -0,0 +1,45 @@
'use strict';
var dbm;
var type;
var seed;
var fs = require('fs');
var path = require('path');
var Promise;
exports.setup = function(options, seedLink) {
dbm = options.dbmigrate;
type = dbm.dataType;
seed = seedLink;
Promise = options.Promise;
};
exports.up = function(db) {
var filePath = path.join(__dirname, 'sqls', '20260522120000-course-event-challenge-up.sql');
return new Promise(function(resolve, reject) {
fs.readFile(filePath, { encoding: 'utf-8' }, function(err, data) {
if (err) return reject(err);
console.log('received data: ' + data);
resolve(data);
});
}).then(function(data) {
return db.runSql(data);
});
};
exports.down = function(db) {
var filePath = path.join(__dirname, 'sqls', '20260522120000-course-event-challenge-down.sql');
return new Promise(function(resolve, reject) {
fs.readFile(filePath, { encoding: 'utf-8' }, function(err, data) {
if (err) return reject(err);
console.log('received data: ' + data);
resolve(data);
});
}).then(function(data) {
return db.runSql(data);
});
};
exports._meta = {
version: 1,
};
@@ -0,0 +1,2 @@
ALTER TABLE course_events
DROP COLUMN is_challenge;
@@ -0,0 +1,2 @@
ALTER TABLE course_events
ADD COLUMN is_challenge TINYINT(1) NOT NULL DEFAULT 0 AFTER hasQual;
+88 -17
View File
@@ -104,36 +104,107 @@ function key(memberId, courseId) {
} }
const scoped = buildScopeClause(args); const scoped = buildScopeClause(args);
const evidenceScopedClauses = [];
const evidenceScopedParams = [];
if (args.courseId !== null) {
evidenceScopedClauses.push("e.course_id = ?");
evidenceScopedParams.push(args.courseId);
}
if (args.memberId !== null) {
evidenceScopedClauses.push("ca.attendee_id = ?");
evidenceScopedParams.push(args.memberId);
}
const evidenceScopedSql = evidenceScopedClauses.length
? ` AND ${evidenceScopedClauses.join(" AND ")}`
: "";
const passRows = await conn.query( const evidenceRows = await conn.query(
`SELECT `SELECT
ca.attendee_id AS member_id, ca.attendee_id AS member_id,
e.course_id, e.course_id,
e.id AS course_event_id, e.id AS course_event_id,
e.event_date e.event_date,
IFNULL(e.is_challenge, 0) AS is_challenge,
IFNULL(e.hasBookwork, 0) AS event_has_bookwork,
IFNULL(e.hasQual, 0) AS event_has_qual,
ca.passed_bookwork,
ca.passed_qual,
IFNULL(c.hasBookwork, 0) AS course_has_bookwork,
IFNULL(c.hasQual, 0) AS course_has_qual
FROM course_events e FROM course_events e
INNER JOIN courses c ON c.id = e.course_id
INNER JOIN course_attendees ca ON ca.course_event_id = e.id INNER JOIN course_attendees ca ON ca.course_event_id = e.id
WHERE ca.attendee_role_id = 2 WHERE ca.attendee_role_id = 2
AND (e.deleted IS NULL OR e.deleted = 0) AND (e.deleted IS NULL OR e.deleted = 0)
AND ( ${evidenceScopedSql}
(e.hasBookwork = 1 AND e.hasQual = 1 AND ca.passed_bookwork = 1 AND ca.passed_qual = 1)
OR (e.hasBookwork = 1 AND IFNULL(e.hasQual, 0) = 0 AND ca.passed_bookwork = 1)
OR (IFNULL(e.hasBookwork, 0) = 0 AND e.hasQual = 1 AND ca.passed_qual = 1)
)
${scoped.sql}
ORDER BY ca.attendee_id ASC, e.course_id ASC, e.event_date DESC, e.id DESC;`, ORDER BY ca.attendee_id ASC, e.course_id ASC, e.event_date DESC, e.id DESC;`,
scoped.params evidenceScopedParams
); );
const latestByPair = new Map(); const aggregateByPair = new Map();
for (const row of passRows) { for (const row of evidenceRows) {
const mapKey = key(Number(row.member_id), Number(row.course_id)); const memberId = Number(row.member_id);
if (!latestByPair.has(mapKey)) { const courseId = Number(row.course_id);
latestByPair.set(mapKey, { const mapKey = key(memberId, courseId);
memberId: Number(row.member_id), const bookworkEvidence = Number(row.event_has_bookwork) === 1 && Number(row.passed_bookwork) === 1;
courseId: Number(row.course_id), const qualEvidence = Number(row.event_has_qual) === 1 && Number(row.passed_qual) === 1;
const challengeQualEvidence = Number(row.is_challenge) === 1 && Number(row.event_has_qual) === 1 && Number(row.passed_qual) === 1;
const existing = aggregateByPair.get(mapKey) || {
memberId,
courseId,
courseHasBookwork: Number(row.course_has_bookwork) === 1,
courseHasQual: Number(row.course_has_qual) === 1,
hasBookworkPass: false,
hasQualPass: false,
hasChallengeQualPass: false,
latestEvidence: null,
};
existing.hasBookworkPass = existing.hasBookworkPass || bookworkEvidence;
existing.hasQualPass = existing.hasQualPass || qualEvidence;
existing.hasChallengeQualPass = existing.hasChallengeQualPass || challengeQualEvidence;
if (bookworkEvidence || qualEvidence || challengeQualEvidence) {
const nextLatest = {
courseEventId: Number(row.course_event_id), courseEventId: Number(row.course_event_id),
eventDate: row.event_date, eventDate: row.event_date,
};
if (!existing.latestEvidence) {
existing.latestEvidence = nextLatest;
} else {
const currentDate = new Date(existing.latestEvidence.eventDate).getTime();
const nextDate = new Date(nextLatest.eventDate).getTime();
if (nextDate > currentDate || (nextDate === currentDate && nextLatest.courseEventId > existing.latestEvidence.courseEventId)) {
existing.latestEvidence = nextLatest;
}
}
}
aggregateByPair.set(mapKey, existing);
}
const latestByPair = new Map();
for (const [mapKey, pair] of aggregateByPair.entries()) {
const hasBookwork = pair.courseHasBookwork;
const hasQual = pair.courseHasQual;
let qualifies = false;
if (hasBookwork && hasQual) {
qualifies = (pair.hasBookworkPass && pair.hasQualPass) || pair.hasChallengeQualPass;
} else if (hasBookwork && !hasQual) {
qualifies = pair.hasBookworkPass;
} else if (!hasBookwork && hasQual) {
qualifies = pair.hasQualPass;
}
if (qualifies && pair.latestEvidence) {
latestByPair.set(mapKey, {
memberId: pair.memberId,
courseId: pair.courseId,
courseEventId: pair.latestEvidence.courseEventId,
eventDate: pair.latestEvidence.eventDate,
}); });
} }
} }
@@ -164,7 +235,7 @@ function key(memberId, courseId) {
courseId: args.courseId, courseId: args.courseId,
}, },
actorId: args.actorId, actorId: args.actorId,
historicalPassingRows: passRows.length, historicalPassingRows: evidenceRows.length,
activePairsComputed: latestByPair.size, activePairsComputed: latestByPair.size,
currentlyActivePairs: currentRows.length, currentlyActivePairs: currentRows.length,
wouldDeactivate, wouldDeactivate,
+5 -3
View File
@@ -86,7 +86,7 @@ export async function insertCourseEvent(event: CourseEventDetails): Promise<numb
let course: Course = await getCourseByID(event.course_id); let course: Course = await getCourseByID(event.course_id);
await con.beginTransaction(); await con.beginTransaction();
const res = await con.query("INSERT INTO course_events (course_id, event_date, remarks, created_by, hasBookwork, hasQual) VALUES (?, ?, ?, ?, ?, ?);", [event.course_id, toDateTime(event.event_date), event.remarks, event.created_by, course.hasBookwork, course.hasQual]); const res = await con.query("INSERT INTO course_events (course_id, event_date, remarks, created_by, hasBookwork, hasQual, is_challenge) VALUES (?, ?, ?, ?, ?, ?, ?);", [event.course_id, toDateTime(event.event_date), event.remarks, event.created_by, course.hasBookwork, course.hasQual, event.is_challenge ? 1 : 0]);
var eventID: number = res.insertId; var eventID: number = res.insertId;
for (const attendee of event.attendees) { for (const attendee of event.attendees) {
@@ -127,6 +127,7 @@ export async function getCourseEvents(sortDir: string, search: string = "", page
E.id AS event_id, E.id AS event_id,
E.course_id, E.course_id,
E.event_date AS date, E.event_date AS date,
IFNULL(E.is_challenge, 0) AS is_challenge,
E.created_by, E.created_by,
C.name AS course_name, C.name AS course_name,
C.short_name AS course_shortname, C.short_name AS course_shortname,
@@ -176,9 +177,10 @@ export async function updateCourseEvent(eventId: number, event: CourseEventDetai
event_date = ?, event_date = ?,
remarks = ?, remarks = ?,
hasBookwork = ?, hasBookwork = ?,
hasQual = ? hasQual = ?,
is_challenge = ?
WHERE id = ?;`, WHERE id = ?;`,
[event.course_id, toDateTime(event.event_date), event.remarks, course.hasBookwork, course.hasQual, eventId] [event.course_id, toDateTime(event.event_date), event.remarks, course.hasBookwork, course.hasQual, event.is_challenge ? 1 : 0, eventId]
); );
await con.query(`DELETE FROM course_attendees WHERE course_event_id = ?;`, [eventId]); await con.query(`DELETE FROM course_attendees WHERE course_event_id = ?;`, [eventId]);
+51 -24
View File
@@ -19,7 +19,7 @@ interface SyncOutcome {
async function getEventQualificationContext(con: any, courseEventId: number): Promise<EventQualificationContext | null> { async function getEventQualificationContext(con: any, courseEventId: number): Promise<EventQualificationContext | null> {
const eventRows = await con.query( const eventRows = await con.query(
`SELECT e.event_date, e.hasBookwork, e.hasQual, c.id AS course_id `SELECT e.event_date, c.hasBookwork, c.hasQual, c.id AS course_id
FROM course_events e FROM course_events e
INNER JOIN courses c ON c.id = e.course_id INNER JOIN courses c ON c.id = e.course_id
WHERE e.id = ?;`, WHERE e.id = ?;`,
@@ -85,28 +85,49 @@ async function getEventQualificationContext(con: any, courseEventId: number): Pr
}; };
} }
function attendeePassed(attendee: CourseAttendee, hasBookwork: boolean, hasQual: boolean): boolean { async function getLatestPassingCourseEvent(
if (attendee.attendee_role_id !== 2) { con: any,
return false; memberId: number,
courseId: number,
hasBookwork: boolean,
hasQual: boolean
): Promise<{ course_event_id: number, event_date: Date } | null> {
const evidenceRows = await con.query(
`SELECT
MAX(CASE WHEN IFNULL(e.hasBookwork, 0) = 1 AND ca.passed_bookwork = 1 THEN 1 ELSE 0 END) AS has_bookwork_pass,
MAX(CASE WHEN IFNULL(e.hasQual, 0) = 1 AND ca.passed_qual = 1 THEN 1 ELSE 0 END) AS has_qual_pass,
MAX(CASE WHEN IFNULL(e.is_challenge, 0) = 1 AND IFNULL(e.hasQual, 0) = 1 AND ca.passed_qual = 1 THEN 1 ELSE 0 END) AS has_challenge_qual_pass
FROM course_events e
INNER JOIN course_attendees ca ON ca.course_event_id = e.id
WHERE e.course_id = ?
AND ca.attendee_id = ?
AND ca.attendee_role_id = 2
AND (e.deleted IS NULL OR e.deleted = 0);`,
[courseId, memberId]
);
if (!evidenceRows.length) {
return null;
} }
const hasBookworkPass = Number(evidenceRows[0].has_bookwork_pass) === 1;
const hasQualPass = Number(evidenceRows[0].has_qual_pass) === 1;
const hasChallengeQualPass = Number(evidenceRows[0].has_challenge_qual_pass) === 1;
let hasPassingRecord = false;
if (hasBookwork && hasQual) { if (hasBookwork && hasQual) {
return attendee.passed_bookwork && attendee.passed_qual; hasPassingRecord = (hasBookworkPass && hasQualPass) || hasChallengeQualPass;
} else if (hasBookwork && !hasQual) {
hasPassingRecord = hasBookworkPass;
} else if (!hasBookwork && hasQual) {
hasPassingRecord = hasQualPass;
} }
if (hasBookwork && !hasQual) { if (!hasPassingRecord) {
return attendee.passed_bookwork; return null;
} }
if (!hasBookwork && hasQual) { const latestRows = await con.query(
return attendee.passed_qual;
}
return false;
}
async function getLatestPassingCourseEvent(con: any, memberId: number, courseId: number): Promise<{ course_event_id: number, event_date: Date } | null> {
const rows = await con.query(
`SELECT e.id AS course_event_id, e.event_date `SELECT e.id AS course_event_id, e.event_date
FROM course_events e FROM course_events e
INNER JOIN course_attendees ca ON ca.course_event_id = e.id INNER JOIN course_attendees ca ON ca.course_event_id = e.id
@@ -115,22 +136,22 @@ async function getLatestPassingCourseEvent(con: any, memberId: number, courseId:
AND ca.attendee_role_id = 2 AND ca.attendee_role_id = 2
AND (e.deleted IS NULL OR e.deleted = 0) AND (e.deleted IS NULL OR e.deleted = 0)
AND ( AND (
(e.hasBookwork = 1 AND e.hasQual = 1 AND ca.passed_bookwork = 1 AND ca.passed_qual = 1) (IFNULL(e.hasBookwork, 0) = 1 AND ca.passed_bookwork = 1)
OR (e.hasBookwork = 1 AND IFNULL(e.hasQual, 0) = 0 AND ca.passed_bookwork = 1) OR (IFNULL(e.hasQual, 0) = 1 AND ca.passed_qual = 1)
OR (IFNULL(e.hasBookwork, 0) = 0 AND e.hasQual = 1 AND ca.passed_qual = 1) OR (IFNULL(e.is_challenge, 0) = 1 AND IFNULL(e.hasQual, 0) = 1 AND ca.passed_qual = 1)
) )
ORDER BY e.event_date DESC, e.id DESC ORDER BY e.event_date DESC, e.id DESC
LIMIT 1;`, LIMIT 1;`,
[courseId, memberId] [courseId, memberId]
); );
if (!rows.length) { if (!latestRows.length) {
return null; return null;
} }
return { return {
course_event_id: Number(rows[0].course_event_id), course_event_id: Number(latestRows[0].course_event_id),
event_date: new Date(rows[0].event_date), event_date: new Date(latestRows[0].event_date),
}; };
} }
@@ -165,7 +186,7 @@ export async function syncQualificationsForCourseEvent(courseEventId: number, ac
const expectedMembers = new Set<number>(); const expectedMembers = new Set<number>();
for (const attendee of context.attendees) { for (const attendee of context.attendees) {
if (attendeePassed(attendee, context.hasBookwork, context.hasQual)) { if (attendee.attendee_role_id === 2) {
expectedMembers.add(attendee.attendee_id); expectedMembers.add(attendee.attendee_id);
} }
} }
@@ -191,7 +212,13 @@ export async function syncQualificationsForCourseEvent(courseEventId: number, ac
for (let i = 0; i < impactedList.length; i++) { for (let i = 0; i < impactedList.length; i++) {
const memberId = impactedList[i]; const memberId = impactedList[i];
const latestPass = await getLatestPassingCourseEvent(con, memberId, context.courseId); const latestPass = await getLatestPassingCourseEvent(
con,
memberId,
context.courseId,
context.hasBookwork,
context.hasQual
);
if (latestPass) { if (latestPass) {
await con.query( await con.query(
+1
View File
@@ -11,6 +11,7 @@ export const courseEventAttendeeSchema = z.object({
export const trainingReportSchema = z.object({ export const trainingReportSchema = z.object({
id: z.number().int().positive().optional(), id: z.number().int().positive().optional(),
course_id: z.number({ invalid_type_error: "Must select a training" }).int(), course_id: z.number({ invalid_type_error: "Must select a training" }).int(),
is_challenge: z.boolean().default(false),
event_date: z event_date: z
.string() .string()
.refine( .refine(
+2
View File
@@ -18,6 +18,7 @@ export interface CourseEventDetails {
course_id: number | null; // FK → courses.id course_id: number | null; // FK → courses.id
event_type: number | null; // FK → event_types.id event_type: number | null; // FK → event_types.id
event_date: Date; // datetime (not nullable) event_date: Date; // datetime (not nullable)
is_challenge?: boolean;
guilded_event_id: number | null; guilded_event_id: number | null;
@@ -88,4 +89,5 @@ export interface CourseEventSummary {
date: string; date: string;
created_by: number; created_by: number;
created_by_name: string; created_by_name: string;
is_challenge?: boolean;
} }
@@ -34,6 +34,7 @@ const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
validateOnMount: false, validateOnMount: false,
initialValues: { initialValues: {
course_id: null, course_id: null,
is_challenge: false,
event_date: "", event_date: "",
remarks: "", remarks: "",
attendees: [], attendees: [],
@@ -59,6 +60,17 @@ watch(() => values.course_id, (newCourseId, oldCourseId) => {
}); });
}); });
watch(() => values.is_challenge, (isChallenge) => {
if (!isChallenge) {
return;
}
values.attendees.forEach((a, index) => {
// @ts-ignore
setFieldValue(`attendees[${index}].passed_bookwork`, false);
});
});
const submitForm = handleSubmit(onSubmit); const submitForm = handleSubmit(onSubmit);
function toMySQLDateTime(date: Date): string { function toMySQLDateTime(date: Date): string {
@@ -92,6 +104,15 @@ async function onSubmit(vals) {
const { remove, push, fields } = useFieldArray('attendees'); const { remove, push, fields } = useFieldArray('attendees');
const selectedCourse = computed<Course | undefined>(() => { return trainings.value?.find(c => c.id == values.course_id) }) const selectedCourse = computed<Course | undefined>(() => { return trainings.value?.find(c => c.id == values.course_id) })
const bookworkDisabledMessage = computed(() => {
if (values.is_challenge) {
return "Bookwork is waived for challenge reports";
}
if (!selectedCourse.value?.hasBookwork) {
return "This course does not have bookwork";
}
return "";
});
const trainings = ref<Course[] | null>(null); const trainings = ref<Course[] | null>(null);
const members = ref<MemberLight[] | null>(null); const members = ref<MemberLight[] | null>(null);
@@ -195,6 +216,24 @@ const filteredMembers = computed(() => {
</VeeField> </VeeField>
</FieldGroup> </FieldGroup>
</div> </div>
<div class="w-[190px]">
<FieldGroup>
<VeeField name="is_challenge">
<Field>
<FieldLabel class="scroll-m-20 text-lg tracking-tight">Challenge</FieldLabel>
<div class="h-9 px-2 border rounded flex items-center gap-2">
<Checkbox :model-value="values.is_challenge"
@update:model-value="(v) => setFieldValue('is_challenge', !!v)"></Checkbox>
<p class="text-sm text-muted-foreground">Mark report as challenge</p>
</div>
<FieldDescription class="mt-2 text-xs">
Challenge waives bookwork, but qualification pass is still required.
</FieldDescription>
</Field>
</VeeField>
</FieldGroup>
</div>
</div> </div>
<VeeFieldArray name="attendees" v-slot="{ fields, push, remove }"> <VeeFieldArray name="attendees" v-slot="{ fields, push, remove }">
@@ -335,9 +374,9 @@ const filteredMembers = computed(() => {
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox" <VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox"
:value="false" :unchecked-value="true"> :value="false" :unchecked-value="true">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<Tooltip :open="!selectedCourse?.hasBookwork" <Tooltip :open="!!bookworkDisabledMessage"
message="This course does not have bookwork"> :message="bookworkDisabledMessage">
<Checkbox :disabled="!selectedCourse?.hasBookwork" <Checkbox :disabled="!selectedCourse?.hasBookwork || values.is_challenge"
:name="`attendees[${index}].passed_bookwork`" :model-value="!field.checked" :name="`attendees[${index}].passed_bookwork`" :model-value="!field.checked"
@update:model-value="field['onUpdate:modelValue']"> @update:model-value="field['onUpdate:modelValue']">
</Checkbox> </Checkbox>
+21 -7
View File
@@ -34,6 +34,7 @@ import {
} from '@/components/ui/pagination' } from '@/components/ui/pagination'
import Tooltip from '@/components/tooltip/Tooltip.vue'; import Tooltip from '@/components/tooltip/Tooltip.vue';
import { CopyLink } from '@/lib/copyLink'; import { CopyLink } from '@/lib/copyLink';
import Badge from '@/components/ui/badge/Badge.vue';
enum sidePanelState { view, create, closed }; enum sidePanelState { view, create, closed };
@@ -187,6 +188,10 @@ function formatDate(date: Date | string): string {
}); });
} }
function isChallengeReport(report: { is_challenge?: boolean | number | null }): boolean {
return report?.is_challenge === true || Number(report?.is_challenge || 0) === 1;
}
function setPageSize(size: number) { function setPageSize(size: number) {
pageSize.value = size pageSize.value = size
pageNum.value = 1; pageNum.value = 1;
@@ -246,9 +251,12 @@ const expanded = ref<number>(null);
<button v-for="report in trainingReports" :key="`mobile-report-${report.event_id}`" <button v-for="report in trainingReports" :key="`mobile-report-${report.event_id}`"
class="w-full rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-muted/40" class="w-full rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-muted/40"
@click="openTrainingReport(report.event_id)"> @click="openTrainingReport(report.event_id)">
<p class="font-semibold text-foreground"> <div class="flex items-center gap-2">
{{ report.course_name.length > 35 ? report.course_shortname : report.course_name }} <p class="font-semibold text-foreground">
</p> {{ report.course_name.length > 35 ? report.course_shortname : report.course_name }}
</p>
<Badge v-if="isChallengeReport(report)" variant="outline" class="uppercase text-xs">Challenge</Badge>
</div>
<p class="mt-1 text-sm text-muted-foreground">{{ formatDate(report.date) }}</p> <p class="mt-1 text-sm text-muted-foreground">{{ formatDate(report.date) }}</p>
<div class="mt-2 flex items-center gap-2 text-xs text-muted-foreground"> <div class="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
<span class="font-medium">Posted by:</span> <span class="font-medium">Posted by:</span>
@@ -274,8 +282,12 @@ const expanded = ref<number>(null);
<TableBody v-if="loaded"> <TableBody v-if="loaded">
<TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id" <TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
@click="openTrainingReport(report.event_id)"> @click="openTrainingReport(report.event_id)">
<TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname : <TableCell class="font-medium">
report.course_name }}</TableCell> <div class="flex items-center gap-2">
<span>{{ report.course_name.length > 30 ? report.course_shortname : report.course_name }}</span>
<Badge v-if="isChallengeReport(report)" variant="outline" class="uppercase text-[10px]">Challenge</Badge>
</div>
</TableCell>
<TableCell>{{ report.date.split('T')[0] }}</TableCell> <TableCell>{{ report.date.split('T')[0] }}</TableCell>
<TableCell class="text-right"> <TableCell class="text-right">
<MemberCard v-if="report.created_by" :member-id="report.created_by"></MemberCard> <MemberCard v-if="report.created_by" :member-id="report.created_by"></MemberCard>
@@ -341,8 +353,10 @@ const expanded = ref<number>(null);
</div> </div>
<div v-if="TRLoaded" :class="isMobile ? 'my-3 pb-8' : 'my-5 max-h-[70vh] overflow-y-auto overflow-x-hidden scrollbar-themed'"> <div v-if="TRLoaded" :class="isMobile ? 'my-3 pb-8' : 'my-5 max-h-[70vh] overflow-y-auto overflow-x-hidden scrollbar-themed'">
<div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4"> <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4">
<p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }} <div class="flex items-center gap-2">
</p> <p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}</p>
<Badge v-if="isChallengeReport(focusedTrainingReport)" variant="outline" class="uppercase text-xs">Challenge</Badge>
</div>
<div class="mt-2 flex flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-10"> <div class="mt-2 flex flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-10">
<p class="text-muted-foreground">{{ formatDate(focusedTrainingReport.event_date) }}</p> <p class="text-muted-foreground">{{ formatDate(focusedTrainingReport.event_date) }}</p>
<div class="flex gap-2 items-center">Created by: <div class="flex gap-2 items-center">Created by: