1 files changed, 67 insertions, 0 deletions
diff --git a/webapp/components/phone-number-checklist.tsx b/webapp/components/phone-number-checklist.tsx
new file mode 100644
index 0000000..5aa50db
--- /dev/null
+++ b/webapp/components/phone-number-checklist.tsx
@@ -0,0 +1,67 @@
+// PhoneNumberChecklist.tsx
+"use client";
+
+import React, { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { CheckCircle, Circle, Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type PhoneNumberChecklistProps = {
+  selectedPhoneNumber: string;
+  allConfigsReady: boolean;
+  setAllConfigsReady: (ready: boolean) => void;
+};
+
+const PhoneNumberChecklist: React.FC<PhoneNumberChecklistProps> = ({
+  selectedPhoneNumber,
+  allConfigsReady,
+  setAllConfigsReady,
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  return (
+    <Card className="flex items-center justify-between p-4">
+      <div className="flex flex-col">
+        <span className="text-sm text-gray-500">Number</span>
+        <div className="flex items-center">
+          <span className="font-medium w-36">
+            {isVisible ? selectedPhoneNumber || "None" : "••••••••••"}
+          </span>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsVisible(!isVisible)}
+            className="h-8 w-8"
+          >
+            {isVisible ? (
+              <Eye className="h-4 w-4" />
+            ) : (
+              <EyeOff className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          {allConfigsReady ? (
+            <CheckCircle className="text-green-500 w-4 h-4" />
+          ) : (
+            <Circle className="text-gray-400 w-4 h-4" />
+          )}
+          <span className="text-sm text-gray-700">
+            {allConfigsReady ? "Setup Ready" : "Setup Not Ready"}
+          </span>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setAllConfigsReady(false)}
+        >
+          Checklist
+        </Button>
+      </div>
+    </Card>
+  );
+};
+
+export default PhoneNumberChecklist;