create offer

components.json

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

package.json

@@ -12,15 +12,20 @@
  "@hookform/resolvers": "^3.3.2",
  "@nextui-org/react": "^2.2.9",
  "@radix-ui/react-dialog": "^1.0.5",
+ "@radix-ui/react-popover": "^1.0.7",
+ "@radix-ui/react-slot": "^1.0.2",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.0.0",
+ "date-fns": "^3.0.6",
  "framer-motion": "^10.16.5",
  "lucide-react": "^0.302.0",
  "next": "14.0.3",
  "next-auth": "^4.24.5",
  "react": "^18",
+ "react-day-picker": "^8.10.0",
  "react-dom": "^18",
  "react-hook-form": "^7.48.2",
+ "react-select-async-paginate": "^0.7.3",
  "sonner": "^1.2.3",
  "tailwind-merge": "^2.2.0",
  "tailwindcss-animate": "^1.0.7",

src/actions/specials.ts

@@ -0,0 +1,48 @@
+"use server";
+
+import { apiConfig } from "@/lib/apiConfig";
+import { apiHandler } from "@/lib/apiHandler";
+import { ResponseMeta, SeverActionResponse } from "@/types";
+import { CreateOfferDto } from "@/types/dtos/offers";
+import { Special } from "@/types/specials";
+import { Query } from "@/types/url";
+import { getErrorMessage } from "@/utils/helpers";
+import { Tags } from "@/utils/tags";
+import { revalidateTag } from "next/cache";
+
+export interface GetOffersResponse {
+ meta: ResponseMeta;
+ items: Special[];
+}
+export async function getOffers(
+ query: Query,
+): Promise<SeverActionResponse<GetOffersResponse>> {
+ try {
+ const endpoint = apiConfig.special_offers.list(query);
+ const offers = await apiHandler<GetOffersResponse>({
+ endpoint,
+ method: "GET",
+ next: { tags: [Tags.offers] },
+ });
+ return { results: offers };
+ } catch (error) {
+ return { error: getErrorMessage(error) };
+ }
+}
+export async function createOffer(body: CreateOfferDto) {
+ try {
+ const endpoint = apiConfig.special_offers.create();
+ await apiHandler({ endpoint, method: "POST", body });
+ } catch (error) {
+ throw new Error(getErrorMessage(error));
+ }
+}
+export async function deleteOffer(offerId: string) {
+ try {
+ const endpoint = apiConfig.special_offers.delete(offerId);
+ await apiHandler<Special[]>({ endpoint, method: "DELETE" });
+ revalidateTag(Tags.offers);
+ } catch (error) {
+ throw new Error(getErrorMessage(error));
+ }
+}

src/app/(dashboard)/specials/_sections/CreateOfferContent.tsx

@@ -0,0 +1,110 @@
+import { DatePicker } from "@/components/shared/input/DatePicker";
+import InfiniteScrollSelect from "@/components/shared/input/InfiniteScrollSelectInput";
+import TextField from "@/components/shared/input/TextField";
+import { apiConfig } from "@/lib/apiConfig";
+import { Place } from "@/types/place";
+import { SpecialType } from "@/types/specials";
+import { Textarea } from "@nextui-org/react";
+import React from "react";
+import { Controller } from "react-hook-form";
+
+interface Props {
+ control: any;
+ watch: (field: string) => string;
+}
+export default function CreateOfferContent({ control, watch }: Props) {
+ const startDate = watch("start_date");
+ console.log(startDate);
+ return (
+ <div className='grid md:grid-cols-2 gap-5'>
+ <TextField
+ control={control}
+ label='Title'
+ name='title'
+ placeholder='Title'
+ radius='sm'
+ variant='bordered'
+ labelPlacement='outside'
+ />
+ <Controller
+ name='place'
+ render={({ field }) => (
+ <InfiniteScrollSelect
+ url={apiConfig.places.list({})}
+ {...field}
+ getOptionLabel={(option: Place) => option?.name}
+ getOptionValue={(option: Place) => option.id}
+ isOptionSelected={(option: Place, selectedValue: Place[]) => {
+ const isSelected = option?.id === selectedValue?.[0]?.id;
+ return isSelected;
+ }}
+ label='Establishment'
+ />
+ )}
+ control={control}
+ />
+ <Controller
+ name='type'
+ render={({ field }) => (
+ <InfiniteScrollSelect
+ url={apiConfig.special_offers.list_offer_types()}
+ getOptionLabel={(option: SpecialType) => option?.name}
+ getOptionValue={(option: SpecialType) => option?.id}
+ isOptionSelected={(
+ option: SpecialType,
+ selectedValue: SpecialType[],
+ ) => {
+ const isSelected = option?.id === selectedValue?.[0]?.id;
+ return isSelected;
+ }}
+ label='Offer Type'
+ {...field}
+ />
+ )}
+ control={control}
+ />
+
+ <DatePicker
+ name='start_date'
+ control={control}
+ label='Offer starting date'
+ minDate={new Date()}
+ />
+ <DatePicker
+ minDate={new Date()}
+ name='end_date'
+ control={control}
+ label='Offer ending date'
+ />
+ <TextField
+ control={control}
+ label='Price'
+ name='price'
+ placeholder='Price'
+ radius='sm'
+ variant='bordered'
+ labelPlacement='outside'
+ />
+ <TextField
+ control={control}
+ label='Discount'
+ name='discount'
+ placeholder='Discount'
+ radius='sm'
+ variant='bordered'
+ labelPlacement='outside'
+ />
+ <Textarea
+ label='Description'
+ variant='bordered'
+ labelPlacement='outside'
+ placeholder='Add offer description'
+ disableAnimation
+ classNames={{
+ // base: "max-w-xs",
+ input: "resize-y min-h-[40px]",
+ }}
+ />
+ </div>
+ );
+}

src/app/(dashboard)/specials/_sections/OffersListSection.tsx

@@ -0,0 +1,55 @@
+"use client";
+import { GetOffersResponse } from "@/actions/specials";
+import HStack from "@/components/shared/layout/HStack";
+import { pluralize } from "@/utils/helpers";
+import { Button, Pagination } from "@nextui-org/react";
+import React from "react";
+import OffersTable from "./OffersTable";
+import useQueryParams from "@/hooks/useQueryParam";
+import { DASHBOARD_PATHS } from "@/config/routes";
+import { useRouter } from "next/navigation";
+
+interface Props {
+ offers: GetOffersResponse;
+}
+export default function OffersListSection({ offers }: Props) {
+ const totalPages = offers?.meta?.totalPages;
+ const totalOffers = offers?.meta?.totalItems;
+
+ const { add } = useQueryParams();
+ const router = useRouter();
+
+ return (
+ <div>
+ <HStack className='items-center justify-between'>
+ <div>
+ <h3 className='font-semibold text-xl'>
+ {totalOffers} {pluralize("Offer", totalOffers)}
+ </h3>
+ <p className='text-gray-400'>List of all Offers</p>
+ </div>
+
+ <Button
+ onClick={() => router.push(DASHBOARD_PATHS.specials.new())}
+ radius='sm'
+ color='primary'
+ disableRipple
+ >
+ Create new offer
+ </Button>
+ </HStack>
+ <OffersTable offers={offers?.items} />
+ {totalPages > 1 && (
+ <HStack className='justify-center mt-2'>
+ <Pagination
+ total={totalPages}
+ initialPage={1}
+ variant='bordered'
+ showControls
+ onChange={(page) => add("page", page.toString())}
+ />
+ </HStack>
+ )}
+ </div>
+ );
+}