added skeleton ui for generating a users keychip with code copied from cozy

app/(authenticated)/(admin)/admin/(admin components)/generateKeychip/generateKeychip.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@radix-ui/react-dropdown-menu";
+import React, { useState } from "react";
+
+const GenerateKeychip = () => {
+  const [serial, setSerial] = useState("");
+
+  const generateRandomSerial = () => {
+    let uniqueNumbers = "";
+    while (uniqueNumbers.length < 4) {
+      const digit = Math.floor(Math.random() * 10);
+      if (!uniqueNumbers.includes(digit.toString())) {
+        uniqueNumbers += digit;
+      }
+    }
+    const randomNumbers = Math.floor(1000 + Math.random() * 9000);
+    const randomSerial = `A69E01A${uniqueNumbers}${randomNumbers}`;
+    setSerial(randomSerial);
+  };
+
+  return (
+    <Card x-chunk="aimecard">
+      <CardHeader>
+        <CardTitle className="text-2xl">Create Keychip</CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <div className="mb-4 text-lg">Current Access Code:</div>
+        <form className="grid gap-4">
+          <div className="grid gap-2">
+            <Label>Arcade Name</Label>
+            <Input name="arcadeName" type="text" placeholder="Arcade Name" />
+          </div>
+          <div className="grid gap-2">
+            <Label>Arcade Nickname</Label>
+            <Input
+              name="arcadeNickname"
+              type="text"
+              placeholder="Arcade Nickname"
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>Generate Serial</Label>
+            <Input
+              name="GenerateSerial"
+              type="text"
+              placeholder="*******************"
+              value={serial} // Bind the serial state to the input field
+              readOnly
+            />
+          </div>
+          <Button
+            type="button"
+            className="w-full"
+            onClick={generateRandomSerial}
+          >
+            Generate Random Keychip
+          </Button>
+
+          <Button type="submit" className="w-full">
+            Finalize Keychip
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default GenerateKeychip;

app/(authenticated)/(admin)/admin/(admin components)/generateKeychip/page.tsx

@@ -0,0 +1,6 @@
+import GenerateKeychip from "./generateKeychip";
+
+const GenerateKeychipPage = async () => {
+  return <GenerateKeychip />;
+};
+export default GenerateKeychipPage;

app/(authenticated)/(admin)/admin/(admin components)/unlockUser/unlock.tsx

@@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@radix-ui/react-dropdown-menu";
 import React from "react";
 
-const UnlockUser = () => {
+const GenerateKeychip = () => {
   return (
     <Card x-chunk="aimecard">
       <CardHeader>
@@ -12,7 +12,7 @@ const UnlockUser = () => {
       </CardHeader>
 
       <CardContent>
-        <div className="text-lg mb-4">Current Access Code:</div>
+        <div className="mb-4 text-lg">Current Access Code:</div>
         <form className="grid gap-4">
           <div className="grid gap-2">
             <Label>Access Code</Label>
@@ -31,4 +31,4 @@ const UnlockUser = () => {
   );
 };
 
-export default UnlockUser;
+export default GenerateKeychip;

components/navigationbar/adminnavigation.tsx

@@ -5,7 +5,9 @@ import { usePathname } from "next/navigation";
 
 const NAV_ITEMS = [
   { href: "/admin/home", label: "Home" },
-  { href: "/admin/unlock", label: "Unlock User" },
+  { href: "/admin/generateKeychip", label: "Generate Keychip" },
+
+  { href: "/admin/unlockUser", label: "Unlock User" },
   { href: "/admin/extraction", label: "Extract Game Files" },
   { href: "/admin/gameversions", label: "Edit Game Version" },
 ];