Exam Front-end Tim2 Hisyam Abdul Malik

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/AdminLayout.tsx

@@ -0,0 +1,17 @@
+import AdminSidebar from "./AdminSidebar";
+
+const AdminLayout: React.FC<{
+    children: React.ReactNode
+}> = ({ children }) => {
+    return (
+        <>
+            <div className="flex w-full h-screen overflow-hidden">
+                <AdminSidebar />
+                {children}
+            </div>
+        </>
+    );
+
+}
+
+export const WithAdminLayout = (page: React.ReactElement) => <AdminLayout>{page}</AdminLayout>;

components/AdminSidebar.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import Link from 'next/link';
+
+const AdminSidebar = () => {
+    return (
+        <div className='w-56 bg-slate-800 h-screen flex flex-col items-center py-6'>
+            <div className='mb-6'>
+                <img src='/images/cgv-logo.png' alt='Admin Panel Logo' className='w-32 h-auto' />
+            </div>
+            <Avatar className='mb-4'>
+                <AvatarImage src="https://github.com/shadcn.png" className='w-24 h-24 rounded-full border-2 border-white' />
+            </Avatar>
+            <ul className='flex flex-col text-white font-medium text-lg gap-4 w-full px-4'>
+                <li>
+                    <Link className='block p-2 rounded hover:bg-slate-600 cursor-pointer' href='/admin/dashboard'>
+                        Dashboard
+                    </Link>
+                </li>
+                <li>
+                    <Link className='block p-2 rounded hover:bg-slate-600 cursor-pointer' href='/admin/movies'>
+                        Movies
+                    </Link>
+                </li>
+                <li>
+                    <Link className='block p-2 rounded hover:bg-slate-600 cursor-pointer' href='/admin/directors'>
+                        Director
+                    </Link>
+                </li>
+                <li>
+                    <Link className='block p-2 rounded hover:bg-slate-600 cursor-pointer' href='/admin/starrings'>
+                        Starring
+                    </Link>
+                </li>
+                <li>
+                    <Link className='block p-2 rounded hover:bg-slate-600 cursor-pointer' href='/admin/genres'>
+                        Genre
+                    </Link>
+                </li>
+                <li>
+                    <Link className='block p-2 rounded hover:bg-slate-600 cursor-pointer' href='/admin/regions'>
+                        Region
+                    </Link>
+                </li>
+                <li className='mt-auto'>
+                    <button
+                        className='block w-full p-2 bg-red-500 hover:bg-red-600 text-white font-semibold rounded transition duration-300 ease-in-out'
+                        onClick={() => alert('Logout')}
+                    >
+                        Logout
+                    </button>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default AdminSidebar;

components/AuditoriumCards.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Link from 'next/link';
+
+const AuditoriumCards = () => {
+  const auditoriums = [
+    { name: "Gold Class", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2308/SA202308041819584206.jpg", link: "/auditoriums/gold-class" },
+    { name: "Velvet Class", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2308/SA202308041826292094.jpg", link: "/auditoriums/velvet-class" },
+    { name: "Satin Class", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2308/SA202308041827191534.jpg", link: "/auditoriums/satin-class" },
+    { name: "Sweet Box", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2308/SA202308041828077499.jpg", link: "/auditoriums/sweet-box" },
+    { name: "4DX", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2308/SA202308041830356804.jpg", link: "/auditoriums/4dx" },
+    { name: "ScreenX", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2308/SA202308041831366877.jpg", link: "/auditoriums/screenx" },
+    { name: "Starium", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2308/SA202308041829003710.jpg", link: "/auditoriums/starium" },
+    { name: "SphereX", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2308/SA202308041829541327.jpg", link: "/auditoriums/spherex" },
+    { name: "Private Box", src: "https://cdn.cgv.id/uploads_v2/special_audi/web/thumbnails/2402/SA202402170700368566.png", link: "/auditoriums/private-box" }
+  ];
+
+  return (
+    <div className="grid grid-cols-2 gap-4 place-content-center">
+      {auditoriums.map(auditorium => (
+        <Link href={auditorium.link} key={auditorium.name}>
+          <div className="relative rounded-xl overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:rotate-2 cursor-pointer">
+            <img
+              src={auditorium.src}
+              alt={auditorium.name}
+              className="w-full rounded-xl hover:opacity-80"
+            />
+            <p className="absolute bottom-2 left-2 text-white text-lg font-bold">{auditorium.name}</p>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default AuditoriumCards;
+
+

components/Checkbox.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useController } from 'react-hook-form';
+
+const IsShowingCheckBox = ({ control, name, label }) => {
+    const { field: { onChange, onBlur, value, ref } } = useController({
+        control,
+        name,
+        defaultValue: true,
+    });
+
+    const handleChange = (event) => {
+        onChange(event.target.checked);
+    };
+
+    return (
+        <div className="checkbox-container">
+            <input
+                type="checkbox"
+                name={name}
+                id={name}
+                checked={value}
+                onChange={handleChange}
+                onBlur={onBlur}
+                ref={ref}
+            />
+            <label htmlFor={name}>{label}</label>
+        </div>
+    );
+};
+
+export default IsShowingCheckBox;

components/CustomSelect.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useController } from "react-hook-form";
+
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+export function CustomSelect({ control, name, label, getOptions }) {
+    const [, setSelectedLabel] = React.useState(label);
+
+    const { field: { value, onChange } } = useController({
+        control,
+        name,
+    });
+
+    const handleChange = (event) => {
+        onChange(event.target.value);
+        const selectedOption = options.find((option) => option.value === event.target.value);
+        setSelectedLabel(selectedOption?.label || label);
+    };
+
+    const options = getOptions();
+
+    return (
+        <Select>
+            <SelectTrigger>
+                <SelectValue>{value || label}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+                <SelectGroup>
+                    <SelectLabel>{label}</SelectLabel>
+                    {options.map((option) => (
+                        <SelectItem key={option.value} value={option.value} onClick={handleChange}>
+                            {option.label || option.value}
+                        </SelectItem>
+                    ))}
+                </SelectGroup>
+            </SelectContent>
+        </Select>
+    );
+}