Insurance Carriers
diff --git a/apps/Frontend/src/components/claims/tooth-ui.tsx b/apps/Frontend/src/components/claims/tooth-ui.tsx
new file mode 100644
index 0000000..d0d84ab
--- /dev/null
+++ b/apps/Frontend/src/components/claims/tooth-ui.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+
+const NONE = "__NONE__" as const;
+export type ToothVal = "" | "X" | "O";
+
+interface ToothProps {
+ name: string;
+ value: ToothVal; // "" | "X" | "O"
+ onChange: (name: string, v: ToothVal) => void;
+}
+
+/**
+ * Clean, single select:
+ * - Empty state shows a blank trigger (no "None" text).
+ * - First menu item sets empty value, but its label is visually blank.
+ * - Cell fills column width so the grid can wrap -> no overflow.
+ */
+function ToothSelect({ name, value, onChange }: ToothProps) {
+ const label = name.replace("T_", "");
+ const uiValue = (value === "" ? NONE : value) as typeof NONE | "X" | "O";
+
+ return (
+
+
{label}
+
+
+
+ );
+}
+
+export const ToothSelectRadix = React.memo(
+ ToothSelect,
+ (prev, next) => prev.value === next.value && prev.name === next.name
+);
+
+export function TeethGrid({
+ title,
+ toothNames,
+ values,
+ onChange,
+}: {
+ title: string;
+ toothNames: string[];
+ values: Record
;
+ onChange: (name: string, v: ToothVal) => void;
+}) {
+ return (
+
+
{title}
+
+ {/* responsive grid that auto-fits cells; no horizontal overflow */}
+
+ {toothNames.map((name) => (
+
+ ))}
+
+