init project portal web
This commit is contained in:
Sweli Giri
@ -0,0 +1,31 @@
|
||||
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
|
||||
import { observer } from "mobx-react-lite"
|
||||
|
||||
interface Props {
|
||||
mainState: PricePlanDetailState
|
||||
}
|
||||
|
||||
const CreateEvent = observer(({mainState}: Props) => {
|
||||
if (mainState.getFlow() >= 1) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<button
|
||||
className="relative w-24 h-24 rounded-full border-4 border-[#00879E] bg-white flex items-center justify-center hover:bg-[#e6f6f8] transition"
|
||||
onClick={() => mainState.setUsageEventModalIsOpen(!mainState.getUsageEventModalIsOpen())}
|
||||
>
|
||||
<svg className="w-10 h-10 text-[#00879E]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path d="M4 4h16v16H4V4z" />
|
||||
<path d="M8 8h8M8 12h8M8 16h8" />
|
||||
</svg>
|
||||
<span className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[#00879E] text-white text-sm font-bold flex items-center justify-center">+</span>
|
||||
</button>
|
||||
<span className="mt-2 text-[#00879E] font-medium">Event</span>
|
||||
</div>
|
||||
<div className="text-[#00879E] text-3xl">{'→'}</div>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export default CreateEvent
|
||||
@ -0,0 +1,94 @@
|
||||
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state";
|
||||
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
|
||||
const getStepStyle = (active: boolean) => ({
|
||||
borderColor: active ? "#00879E" : "#D1D5DB", // tailwind: gray-300
|
||||
textColor: active ? "#00879E" : "#9CA3AF", // tailwind: gray-400
|
||||
bgColor: active ? "#00879E" : "#D1D5DB",
|
||||
iconText: active ? "text-[#00879E]" : "text-gray-400",
|
||||
opacity: active ? "opacity-100" : "opacity-30"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
mainState: PricePlanDetailState
|
||||
formState: RatePlanFormState
|
||||
}
|
||||
|
||||
const CreateRatePlan = observer(({
|
||||
mainState,
|
||||
formState
|
||||
}: Props) => {
|
||||
const isRatePlanActive = mainState.getFlow() >= 1;
|
||||
const isPriceActive = mainState.getFlow() >= 2;
|
||||
|
||||
const ratePlanStyle = getStepStyle(isRatePlanActive);
|
||||
const priceStyle = getStepStyle(isPriceActive);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`flex flex-col items-center text-center ${ratePlanStyle.opacity}`}>
|
||||
<div
|
||||
className="relative w-24 h-24 cursor-pointer rounded-full bg-white flex items-center justify-center"
|
||||
style={{ borderWidth: "4px", borderColor: ratePlanStyle.borderColor }}
|
||||
onClick={() => {
|
||||
formState.setOpen(true)
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className={`w-10 h-10 ${ratePlanStyle.iconText}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M4 4h16v16H4V4z" />
|
||||
<path d="M8 8h8M8 12h8M8 16h8" />
|
||||
</svg>
|
||||
<span
|
||||
className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
|
||||
style={{ backgroundColor: ratePlanStyle.bgColor }}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</div>
|
||||
<span className={`mt-2 font-medium`} style={{ color: ratePlanStyle.textColor }}>
|
||||
Rate Plan
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={`text-3xl`} style={{ color: isPriceActive ? "#00879E" : "#D1D5DB", opacity: isPriceActive ? 1 : 0.3 }}>
|
||||
→
|
||||
</div>
|
||||
|
||||
<div className={`flex flex-col items-center text-center ${priceStyle.opacity}`}>
|
||||
<div
|
||||
className="relative w-24 h-24 rounded-full bg-white flex items-center justify-center"
|
||||
style={{ borderWidth: "4px", borderColor: priceStyle.borderColor }}
|
||||
>
|
||||
<svg
|
||||
className={`w-10 h-10 ${priceStyle.iconText}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 8c-2.21 0-4 1.79-4 4 0 1.84 1.28 3.39 3 3.87V18h2v-2.13c1.72-.48 3-2.03 3-3.87 0-2.21-1.79-4-4-4z" />
|
||||
</svg>
|
||||
<span
|
||||
className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
|
||||
style={{ backgroundColor: priceStyle.bgColor }}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</div>
|
||||
<span className={`mt-2 font-medium`} style={{ color: priceStyle.textColor }}>
|
||||
Price
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})
|
||||
|
||||
export default CreateRatePlan
|
||||
24
lib/price-plan-detail/view/tab/usage-content/flow/index.tsx
Normal file
24
lib/price-plan-detail/view/tab/usage-content/flow/index.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
|
||||
import CreateEvent from "./create-event"
|
||||
import CreateRatePlan from "./create-rate-plan"
|
||||
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
|
||||
import { observer } from "mobx-react-lite"
|
||||
|
||||
interface Props {
|
||||
mainState: PricePlanDetailState
|
||||
formState: RatePlanFormState
|
||||
}
|
||||
const RatePlanFlow = observer( ({mainState, formState}: Props) => {
|
||||
if(mainState.getFlow() >= 2) return null
|
||||
|
||||
return (
|
||||
<section className={`flex gap-12 justify-center items-center ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
|
||||
{/* Step 1 */}
|
||||
<CreateEvent mainState={mainState} />
|
||||
{/* Step 2 */}
|
||||
<CreateRatePlan mainState={mainState} formState={formState} />
|
||||
</section>
|
||||
)
|
||||
})
|
||||
|
||||
export default RatePlanFlow
|
||||
32
lib/price-plan-detail/view/tab/usage-content/index.tsx
Normal file
32
lib/price-plan-detail/view/tab/usage-content/index.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { TabsContent } from "@/components/ui/tabs"
|
||||
import { OptionProps } from "@/lib/helper/type"
|
||||
import UsageEvents from "./usage-events"
|
||||
import RatePlanFlow from "./flow"
|
||||
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
|
||||
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
|
||||
import RatePlanSection from "./rate-plan"
|
||||
import { observer } from "mobx-react-lite"
|
||||
|
||||
interface Props {
|
||||
usageEventOptions: OptionProps[]
|
||||
mainState: PricePlanDetailState
|
||||
formState: RatePlanFormState
|
||||
}
|
||||
|
||||
const TabsUsageContent = observer(({
|
||||
usageEventOptions,
|
||||
mainState,
|
||||
formState
|
||||
}: Props) => {
|
||||
return (
|
||||
<TabsContent value="usage" className="m-0">
|
||||
<div className="grid grid-cols-12 min-h-[50vh]">
|
||||
<UsageEvents eventOptions={usageEventOptions} mainState={mainState}/>
|
||||
<RatePlanFlow mainState={mainState} formState={formState}/>
|
||||
<RatePlanSection mainState={mainState} ratePlanFormState={formState}/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
)
|
||||
})
|
||||
|
||||
export default TabsUsageContent
|
||||
@ -0,0 +1,78 @@
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
|
||||
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
|
||||
import { ChevronDown, Plus, Tickets } from "lucide-react"
|
||||
import { observer } from "mobx-react-lite"
|
||||
|
||||
interface Props {
|
||||
mainState: PricePlanDetailState
|
||||
ratePlanFormState: RatePlanFormState
|
||||
}
|
||||
|
||||
const RatePlanSection = observer(({ mainState, ratePlanFormState }: Props) => {
|
||||
if (mainState.getFlow() < 2) return null
|
||||
|
||||
return (
|
||||
<div className={`p-4 ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button className="h-6 rounded-sm" onClick={() => ratePlanFormState.setOpen(true)}>
|
||||
<Plus />
|
||||
<span>New Rate Plan</span>
|
||||
</Button>
|
||||
<Button className="h-6" variant="outline">
|
||||
<Plus />
|
||||
<span>New From Template</span>
|
||||
</Button>
|
||||
<Button className="h-6" variant="outline">
|
||||
<Plus />
|
||||
<span>Reservation Rule</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Input placeholder="Search Rate Plan Name" className="h-6 placeholder:text-zinc-400" />
|
||||
</div>
|
||||
</div>
|
||||
<ul className="border border-primary mt-8">
|
||||
{mainState.getRatePlans().map((item, idx) => (
|
||||
<li key={item.getRatePlanName() + idx} className="px-4 py-2 border-b last:border-none">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<Tickets />
|
||||
<span>{item.getRatePlanName()}</span>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={`cursor-pointer transition-transform duration-300 ${item.getIsExpand() ? 'rotate-180' : ''}`}
|
||||
onClick={() => item.setIsExpand(!item.getIsExpand())}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`transition-all duration-300 overflow-hidden ${item.getIsExpand() ? 'max-h-40 opacity-100 mt-5' : 'max-h-0 opacity-0'
|
||||
}`}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Button className="h-6">
|
||||
<Plus />
|
||||
Price Version
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>New Version</DropdownMenuItem>
|
||||
<DropdownMenuItem>New From Template</DropdownMenuItem>
|
||||
<DropdownMenuItem>Shared From Template</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default RatePlanSection
|
||||
@ -0,0 +1,62 @@
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { OptionProps } from "@/lib/helper/type"
|
||||
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
|
||||
import { Ellipsis, PlusIcon } from "lucide-react"
|
||||
import { observer } from "mobx-react-lite"
|
||||
|
||||
interface Props {
|
||||
eventOptions: OptionProps[]
|
||||
mainState: PricePlanDetailState
|
||||
}
|
||||
|
||||
const UsageEvents = observer(({
|
||||
eventOptions,
|
||||
mainState
|
||||
}:Props) => {
|
||||
|
||||
if (mainState.getFlow() < 1) return null
|
||||
|
||||
return (
|
||||
<section className="col-span-3 border-r border-primary text-sm font-semibold">
|
||||
<div className="flex justify-between p-2 border-b-2 border-primary">
|
||||
<h4 className="text-center">Usage Event</h4>
|
||||
<PlusIcon className="cursor-pointer" onClick={() => mainState.setUsageEventModalIsOpen(true)}/>
|
||||
</div>
|
||||
<ul className="py-2 space-y-2">
|
||||
{eventOptions.filter(item => mainState.getUsageEventSelected().includes(item.value)).map((item, index) => (
|
||||
<li
|
||||
onClick={() => mainState.setEventSelected(item)}
|
||||
key={index}
|
||||
className={`list-none cursor-pointer px-6 ${item.value == mainState.getEventSelected()?.value ? "bg-blue-200" : ""}`}
|
||||
>
|
||||
<div className="flex justify-between gap-2 items-center">
|
||||
<span>{item.name}</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 p-0">
|
||||
<Ellipsis className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
const updated = [...mainState.getUsageEventSelected()]
|
||||
updated.splice(index, 1)
|
||||
mainState.setUsageEventSelected(updated)
|
||||
}}
|
||||
className="text-red-500"
|
||||
>
|
||||
Remove
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
|
||||
export default UsageEvents
|
||||
Reference in New Issue
Block a user