diff --git a/apps/erp/app/components/Form/RadioGroup.tsx b/apps/erp/app/components/Form/RadioGroup.tsx new file mode 100644 index 0000000000..cf816ce42d --- /dev/null +++ b/apps/erp/app/components/Form/RadioGroup.tsx @@ -0,0 +1,29 @@ +import { Radios } from "@carbon/form"; + +type RadioGroupProps = { + name: string; + label?: string; + options: { label: string; value: string; description?: string }[]; + orientation?: "horizontal" | "vertical"; +}; + +const RadioGroup = ({ + name, + label, + options, + orientation = "vertical" +}: RadioGroupProps) => { + // Filter out description field as Radios doesn't support it + const radioOptions = options.map(({ label, value }) => ({ label, value })); + + return ( + + ); +}; + +export default RadioGroup; diff --git a/apps/erp/app/components/Form/index.ts b/apps/erp/app/components/Form/index.ts index 8abf7eff21..1031663637 100644 --- a/apps/erp/app/components/Form/index.ts +++ b/apps/erp/app/components/Form/index.ts @@ -27,7 +27,6 @@ import { TimePicker, Timezone } from "@carbon/form"; - import Abilities from "./Abilities"; import Ability from "./Ability"; import Account from "./Account"; @@ -57,6 +56,7 @@ import Part from "./Part"; import PaymentTerm from "./PaymentTerm"; import Process from "./Process"; import Processes from "./Processes"; +import RadioGroup from "./RadioGroup"; import Sequence from "./Sequence"; import SequenceOrCustomId from "./SequenceOrCustomId"; import Service from "./Service"; @@ -128,6 +128,7 @@ export { PhoneInput, Process, Processes, + RadioGroup, Radios, Select, SelectControlled, diff --git a/apps/erp/app/components/TrainingPanel.tsx b/apps/erp/app/components/TrainingPanel.tsx new file mode 100644 index 0000000000..e8b5281ae6 --- /dev/null +++ b/apps/erp/app/components/TrainingPanel.tsx @@ -0,0 +1,87 @@ +import { Button, IconButton } from "@carbon/react"; +import { AnimatePresence, motion } from "framer-motion"; +import { LuExternalLink, LuX } from "react-icons/lu"; +import type { TrainingVideo } from "~/utils/training"; +import { getVideoEmbedUrl } from "~/utils/training"; + +type TrainingPanelProps = { + training: TrainingVideo | null; + isOpen: boolean; + onDismiss: () => void; +}; + +export default function TrainingPanel({ + training, + isOpen, + onDismiss +}: TrainingPanelProps) { + if (!training) return null; + + const embedUrl = getVideoEmbedUrl(training.videoUrl, training.videoType); + + return ( + + {isOpen && ( + +
+