feat:spesific target
This commit is contained in:
Rama Priyanto
parent
d2484e8a49
commit
1a87749950
|
|
@ -1,5 +1,5 @@
|
|||
import { AppSidebar } from "@/components/ui/app-sidebar"
|
||||
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
|
||||
import { SidebarProvider } from "@/components/ui/sidebar"
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
"use client"
|
||||
import SpesificTargetTable from "@/components/table/spesific-target/spesific-target-table"
|
||||
import dynamic from "next/dynamic"
|
||||
|
||||
const Navbar = dynamic(() => import("@/components/ui/navbar"), {
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
export default function SpesificTarget() {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<Navbar title="Spesific Target" />
|
||||
<SpesificTargetTable />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
"use client"
|
||||
|
||||
import { ReloadIcon } from "@/components/icons"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupInput,
|
||||
} from "@/components/ui/input-group"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { ChevronLeft, ChevronRight, PlusIcon, SearchIcon } from "lucide-react"
|
||||
import { useEffect, useState } from "react"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
|
||||
const dummyData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "POLRI - DIV Humas",
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "POLRI - Korlantas",
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "TNI",
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "DPR",
|
||||
status: 4,
|
||||
},
|
||||
]
|
||||
|
||||
export default function SpesificTargetTable() {
|
||||
const [selectedTarget, setSelectedTarget] = useState("")
|
||||
const [search, setSearch] = useState("")
|
||||
const [limit, setLimit] = useState("5")
|
||||
const [page, setPage] = useState(1)
|
||||
// const [totalPage, setTotalPage] = useState(1)
|
||||
const [selectedDataTable, setSelectedDataTable] = useState<string[]>([])
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [formStatus, setFormStatus] = useState<"create" | "edit">("create")
|
||||
|
||||
const getData = async () => {
|
||||
const req = {
|
||||
search: search,
|
||||
page: page,
|
||||
limit: limit,
|
||||
}
|
||||
console.log("request", req)
|
||||
}
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [page, limit])
|
||||
|
||||
const resetFilter = () => {
|
||||
setSearch("")
|
||||
setPage(1)
|
||||
getData()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 text-black">
|
||||
<div className="flex flex-col gap-2 rounded-xl bg-white">
|
||||
<p className="mx-4 text-3xl font-semibold">Spesific Target</p>
|
||||
<p className="mx-4 text-sm text-gray-700">
|
||||
Manage your Spesific Target
|
||||
</p>
|
||||
|
||||
<div className="m-4 flex flex-row items-end gap-4 rounded-xl border border-violet-200 p-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-xs font-light uppercase">Search</p>
|
||||
<InputGroup className="h-10 w-100 rounded-lg border border-violet-300 bg-transparent text-black outline-none focus:border-transparent focus:ring-0 focus:outline-none">
|
||||
<InputGroupInput
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
id="inline-end-input"
|
||||
type="text"
|
||||
placeholder="Search e.g name"
|
||||
/>
|
||||
<InputGroupAddon align="inline-start">
|
||||
<a
|
||||
className="cursor-pointer"
|
||||
// onClick={() => setViewPassword(!viewPassword)}
|
||||
>
|
||||
<SearchIcon />
|
||||
</a>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={getData}
|
||||
className="h-10 w-24 bg-blue-600 text-white"
|
||||
>
|
||||
Filter
|
||||
</Button>
|
||||
<Button
|
||||
onClick={resetFilter}
|
||||
className="bg-grey-50 h-10 w-24 border-2 border-gray-300 text-black"
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (!isOpen) {
|
||||
setSelectedTarget("")
|
||||
setFormStatus("create")
|
||||
setIsOpen(true)
|
||||
}
|
||||
}}
|
||||
className="mx-4 h-10 w-50 bg-blue-600 text-white"
|
||||
>
|
||||
<PlusIcon /> Add Spesific Target
|
||||
</Button>
|
||||
|
||||
<div className="flex-roew m-4 flex items-center gap-2 rounded-xl border border-violet-200 bg-white p-4">
|
||||
<Table>
|
||||
<TableHeader className="bg-violet-50">
|
||||
<TableRow className="hover:bg-transparent">
|
||||
<TableHead className="text-black">NO</TableHead>
|
||||
<TableHead className="text-black">Name</TableHead>
|
||||
|
||||
<TableHead className="text-black">Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{dummyData.map((target, index) => (
|
||||
<TableRow className="hover:bg-gray-200" key={target.id}>
|
||||
<TableCell className="font-medium">{index + 1}</TableCell>
|
||||
<TableCell>{target.name}</TableCell>
|
||||
|
||||
<TableCell className="space-x-2">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setFormStatus("edit")
|
||||
setSelectedTarget(target.name)
|
||||
setIsOpen(true)
|
||||
console.log("selectData", target.id)
|
||||
}}
|
||||
className="cursor-pointer border border-gray-300 bg-white text-black"
|
||||
>
|
||||
<ReloadIcon /> Edit
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
console.log("selectData", target.id)
|
||||
}}
|
||||
className="cursor-pointer bg-red-700 text-white"
|
||||
>
|
||||
<ReloadIcon /> Delete
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter className="bg-violet-50">
|
||||
<TableRow className="hover:bg-transparent">
|
||||
<TableCell colSpan={3} className="">
|
||||
<div className="flex flex-row items-center justify-end gap-2">
|
||||
<p className="text-blue-400">ROWS PER PAGE: </p>
|
||||
<Select value={limit} onValueChange={setLimit}>
|
||||
<SelectTrigger className="w-20">
|
||||
<SelectValue placeholder="value" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="5">5</SelectItem>
|
||||
<SelectItem value="10">10</SelectItem>
|
||||
<SelectItem value="25">25</SelectItem>
|
||||
<SelectItem value="50">50</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<a className="cursor-pointer">
|
||||
<ChevronLeft />
|
||||
</a>
|
||||
<a className="cursor-pointer">
|
||||
<ChevronRight />
|
||||
</a>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="max-w-sm lg:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{formStatus == "create"
|
||||
? "Add New Spesific Target"
|
||||
: "Edit Spesific Target"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="my-5 flex flex-col gap-2">
|
||||
<p className="text-xs font-light uppercase">name</p>
|
||||
<Input
|
||||
value={selectedTarget}
|
||||
onChange={(e) => setSelectedTarget(e.target.value)}
|
||||
className="h-10 rounded-lg border border-violet-300 bg-transparent text-black outline-none focus:border-transparent focus:ring-0 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button className="h-10 w-24" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button className="h-10 w-24 bg-blue-600">
|
||||
{formStatus == "create" ? "Submit" : "Save"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue