654 lines
35 KiB
TypeScript
654 lines
35 KiB
TypeScript
"use client";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Calendar } from "@/components/ui/calendar";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { CalendarIcon } from "lucide-react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { format } from "date-fns";
|
|
import { cn } from "@/lib/utils";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
|
|
const Schedule = () => {
|
|
const city = [
|
|
{
|
|
key: 1,
|
|
id: "metro-jaya",
|
|
name: "Polda Metro Jaya",
|
|
},
|
|
{
|
|
key: 2,
|
|
id: "jawa-barat",
|
|
name: "Polda Jawa Barat",
|
|
},
|
|
{
|
|
key: 3,
|
|
id: "banten",
|
|
name: "Polda Banten",
|
|
},
|
|
{
|
|
key: 4,
|
|
id: "jawa-tengah",
|
|
name: "Polda Jawa Tengah",
|
|
},
|
|
{
|
|
key: 5,
|
|
id: "daerah-istimewa-yogyakarta",
|
|
name: "Polda D.I Yogyakarta",
|
|
},
|
|
{
|
|
key: 6,
|
|
id: "jawa-timur",
|
|
name: "Polda Jawa Timur",
|
|
},
|
|
{
|
|
key: 7,
|
|
id: "aceh",
|
|
name: "Polda Aceh",
|
|
},
|
|
{
|
|
key: 8,
|
|
id: "sumatera-utara",
|
|
name: "Polda Sumatera Utara",
|
|
},
|
|
{
|
|
key: 9,
|
|
id: "sumatera-barat",
|
|
name: "Polda Sumatera Barat",
|
|
},
|
|
];
|
|
|
|
const days = ["S", "S", "R", "K", "J", "S", "M"];
|
|
|
|
const months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
|
|
|
|
const [startDate, setStartDate] = useState<Date | undefined>(new Date());
|
|
const [dateAWeek, setDateAWeek] = useState<string[]>([]);
|
|
const [scheduleSearch, setScheduleSearch] = useState();
|
|
const [todayList, setTodayList] = useState([]);
|
|
|
|
const curr = new Date();
|
|
const startDays = (curr.getDay() + 7 - 1) % 7;
|
|
|
|
curr.setDate(curr.getDate() - startDays);
|
|
const dateListInit = [];
|
|
curr.setDate(curr.getDate() - curr.getDay() + 1);
|
|
for (let i = 0; i < 7; i++) {
|
|
dateListInit.push(new Date(curr).toISOString().slice(0, 10));
|
|
curr.setDate(curr.getDate() + 1);
|
|
}
|
|
const [dateList, setDateList] = useState<string[]>(dateListInit);
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
setDateAWeek(dateList);
|
|
}
|
|
|
|
initState();
|
|
}, []);
|
|
|
|
const handleChangeDate = (date: Date | undefined) => {
|
|
setStartDate(date);
|
|
const dateListTemp = [];
|
|
const curr = date;
|
|
if (curr) {
|
|
const startDays = (curr.getDay() + 7 - 1) % 7;
|
|
|
|
curr.setDate(curr.getDate() - startDays);
|
|
curr.setDate(curr.getDate() - curr.getDay() + 1);
|
|
for (let i = 0; i < 7; i++) {
|
|
dateListTemp.push(new Date(curr).toISOString().slice(0, 10));
|
|
curr.setDate(curr.getDate() + 1);
|
|
}
|
|
|
|
console.log("Change Date :", dateListTemp);
|
|
setDateList(dateListTemp);
|
|
setDateAWeek(dateListTemp);
|
|
}
|
|
};
|
|
|
|
function getLastWeek(today: Date | undefined) {
|
|
if (today) {
|
|
return new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
|
|
}
|
|
}
|
|
|
|
function getNextWeek(today: Date | undefined) {
|
|
if (today) {
|
|
return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
|
|
}
|
|
}
|
|
|
|
const changeNextWeek = () => {
|
|
console.log("Today :", startDate);
|
|
const dayInNextWeek = getNextWeek(startDate);
|
|
console.log("Next week :", dayInNextWeek);
|
|
const dateListTemp = [];
|
|
const curr = dayInNextWeek;
|
|
if (curr) {
|
|
const startDays = (curr.getDay() + 7 - 1) % 7;
|
|
|
|
curr.setDate(curr.getDate() - startDays);
|
|
curr.setDate(curr.getDate() - curr.getDay() + 1);
|
|
for (let i = 0; i < 7; i++) {
|
|
const newDate = new Date(curr);
|
|
|
|
if (i == 0) {
|
|
setStartDate(newDate);
|
|
}
|
|
|
|
const dateFormatter = Intl.DateTimeFormat("sv-SE");
|
|
dateListTemp.push(dateFormatter.format(newDate));
|
|
curr.setDate(curr.getDate() + 1);
|
|
}
|
|
|
|
console.log(dateListTemp);
|
|
setDateList(dateListTemp);
|
|
setDateAWeek(dateListTemp);
|
|
}
|
|
};
|
|
|
|
const changePrevWeek = () => {
|
|
console.log(startDate);
|
|
const dayInPrevWeek = getLastWeek(startDate);
|
|
console.log("Prev week :", dayInPrevWeek);
|
|
console.log(startDate);
|
|
const dateListTemp = [];
|
|
const curr = dayInPrevWeek;
|
|
if (curr) {
|
|
const startDays = (curr.getDay() + 7 - 1) % 7;
|
|
|
|
curr.setDate(curr.getDate() - startDays);
|
|
curr.setDate(curr.getDate() - curr.getDay() + 1);
|
|
for (let i = 0; i < 7; i++) {
|
|
const newDate = new Date(curr);
|
|
|
|
if (i == 0) {
|
|
setStartDate(newDate);
|
|
}
|
|
|
|
const dateFormatter = Intl.DateTimeFormat("sv-SE");
|
|
dateListTemp.push(dateFormatter.format(newDate));
|
|
curr.setDate(curr.getDate() + 1);
|
|
}
|
|
|
|
console.log(dateListTemp);
|
|
setDateList(dateListTemp);
|
|
setDateAWeek(dateListTemp);
|
|
}
|
|
};
|
|
|
|
const categories = [
|
|
{ id: 1, title: "POLDA METRO JAYA" },
|
|
{ id: 2, title: "POLDA JAWA BARAT" },
|
|
{ id: 3, title: "POLDA BANTEN" },
|
|
{ id: 4, title: "POLDA JAWA TENGAH" },
|
|
{ id: 5, title: "POLDA D.I YOGYAKARTA" },
|
|
{ id: 6, title: "POLDA JAWA TIMUR" },
|
|
{ id: 7, title: "POLDA ACEH" },
|
|
{ id: 8, title: "POLDA SUMATERA UTARA" },
|
|
{ id: 9, title: "POLDA SUMATERA BARAT" },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Awal Komponen Kiri */}
|
|
<div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-gray-50 dark:bg-slate-800">
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
|
|
<CalendarIcon />
|
|
{startDate ? format(startDate, "MMM yyyy") : <span>Pick a date</span>}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={startDate}
|
|
onSelect={(e) => {
|
|
handleChangeDate(e);
|
|
}}
|
|
initialFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<div className="container relative py-4">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
<path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
|
|
</svg>
|
|
Filter
|
|
<svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
<path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
|
|
</svg>
|
|
</a>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="flex p-0 rounded-md">
|
|
<DropdownMenuItem className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 rounded-none">
|
|
<div className="gap-6 flex flex-row justify-end">
|
|
<div> Filter</div>
|
|
<button className="text-blue-400">Simpan</button>
|
|
</div>
|
|
<div className="border w-full border-t border-slate-500"></div>
|
|
<div className="overflow-y-auto flex flex-col gap-2 h-[200px] ">
|
|
<p>Region Filter</p>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
<Checkbox id="terms" />
|
|
<p>POLDA METRO JAYA</p>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row gap-6">
|
|
<div className="h-[500px] overflow-y-auto w-3/4 ">
|
|
<div className="container-fluid relative">
|
|
<div className="grid grid-cols-1 mt-8">
|
|
<div className="relative block bg-white dark:bg-slate-900">
|
|
<table className="w-full text-sm text-start">
|
|
<thead className="text-md">
|
|
<tr className="h-full">
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
|
|
<th className={`flex flex-row border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}>
|
|
<a className="cursor-pointer h-fit self-center bottom-0" onClick={() => changePrevWeek()}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
|
|
</svg>
|
|
</a>{" "}
|
|
<div className="flex flex-col ">
|
|
<p className="text-2xl">{dateAWeek[0]?.split("-")[2]}</p>
|
|
<p>Monday</p>
|
|
</div>
|
|
</th>
|
|
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[1] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
|
<div className="text-2xl">{dateAWeek[1]?.split("-")[2]}</div>Tuesday
|
|
</th>
|
|
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[2] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
|
<div className="text-2xl">{dateAWeek[2]?.split("-")[2]}</div>Wednesday
|
|
</th>
|
|
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[3] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
|
<div className="text-2xl">{dateAWeek[3]?.split("-")[2]}</div>Thursday
|
|
</th>
|
|
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[4] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
|
<div className="text-2xl">{dateAWeek[4]?.split("-")[2]}</div>Friday
|
|
</th>
|
|
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[5] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
|
<div className="text-2xl">{dateAWeek[5]?.split("-")[2]}</div>Saturday
|
|
</th>
|
|
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
|
<div className="flex flex-col ">
|
|
<p className="text-2xl">{dateAWeek[6]?.split("-")[2]}</p>
|
|
<p>Sunday</p>
|
|
</div>
|
|
<a onClick={() => changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
|
|
</svg>
|
|
</a>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
<td className="border border-gray-100 dark:border-gray-700"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-1/4 flex flex-col gap-6">
|
|
<div className="relative text-gray-600 dark:text-white">
|
|
<input type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm focus:outline-none" />
|
|
<span className="absolute left-2 top-1/2 transform -translate-y-1/2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
<g fill="none" fill-rule="evenodd">
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
<path fill="currentColor" d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" />
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div className="card border border-slate-400 p-2 rounded-lg">
|
|
<div className="card-header">
|
|
<a className="accordion-icon">
|
|
<h5 className="py-2 theme-text text-left">
|
|
Jadwal Hari Ini
|
|
<span className="float-right">
|
|
<Icon icon="fa:angle-down" className="ml-1" />
|
|
</span>
|
|
</h5>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="card border border-slate-400 p-2 rounded-lg">
|
|
<div className="card-header">
|
|
<a className="accordion-icon">
|
|
<h5 className="py-2 theme-text text-left">
|
|
Jadwal Sebelumnya
|
|
<span className="float-right">
|
|
<Icon icon="fa:angle-down" className="ml-1" />
|
|
</span>
|
|
</h5>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="card border border-slate-400 p-2 rounded-lg">
|
|
<div className="card-header">
|
|
<a className="accordion-icon">
|
|
<h5 className="py-2 theme-text text-left">
|
|
Jadwal Selanjutnya
|
|
<span className="float-right">
|
|
<Icon icon="fa:angle-down" className="ml-1" />
|
|
</span>
|
|
</h5>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Schedule;
|