├── .env
├── .gitignore
├── README.md
├── components
    ├── AddCampaignModal.tsx
    ├── AddPostModal.tsx
    ├── AddProviderModal.tsx
    ├── Button.tsx
    ├── CalendarEvent.tsx
    ├── Card.tsx
    ├── Dropdown.tsx
    ├── FormGroup.tsx
    ├── ProviderOptionLabel.tsx
    ├── ResourceAction.tsx
    ├── ResourceCard.tsx
    ├── SideModal.tsx
    ├── TimeInput.tsx
    ├── UpdateCampaignModal.tsx
    ├── UpdatePostModal.tsx
    └── UpdateProviderModal.tsx
├── db
    └── index.ts
├── layouts
    └── AppLayout.tsx
├── lib
    ├── data
    │   ├── campaigns.json
    │   └── providers.json
    ├── providers.ts
    ├── types.ts
    └── util.ts
├── next-env.d.ts
├── package-lock.json
├── package.json
├── pages
    ├── _app.tsx
    ├── api
    │   ├── campaigns
    │   │   ├── [id].tsx
    │   │   └── index.ts
    │   ├── posts
    │   │   ├── [id].tsx
    │   │   └── index.ts
    │   └── providers
    │   │   ├── [id].tsx
    │   │   └── index.ts
    ├── campaigns.tsx
    ├── index.tsx
    └── providers.tsx
├── postcss.config.js
├── prettier.config.js
├── prisma
    ├── schema.prisma
    └── seed.ts
├── public
    ├── Facebook.png
    ├── Instagram.png
    ├── LinkedIn.png
    ├── Twitter.png
    ├── favicon.ico
    ├── logo.svg
    └── vercel.svg
├── styles
    ├── calendar.css
    └── styles.css
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock


/.env:
--------------------------------------------------------------------------------
1 | # Environment variables declared in this file are automatically made available to Prisma.
2 | # See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
3 | 
4 | # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server and MongoDB (Preview).
5 | # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
6 | 
7 | TAILWIND_MODE=watch
8 | DATABASE_URL="file:./dev.db"


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SocialCue
 2 | 
 3 | Welcome to SocialCue! 👋
 4 | 
 5 | This is the demo app used in [**How To Prisma**](https://howtoprisma.com). It's built with Next.js, TypeScript, Tailwind, and a bunch of other great libraries.
 6 | 
 7 | It's a social media scheduling app that does just about everything except actually publishing the posts 😄
 8 | 
 9 | ![app screenshot](https://res.cloudinary.com/dkpz9r2q7/image/upload/v1642022319/Screen_Shot_2022-01-12_at_4.18.10_PM_dijbo4.png)
10 | 
11 | ## Installation and Running the App
12 | 
13 | Clone the repo and install dependencies.
14 | 
15 | ```bash
16 | # npm
17 | npm install
18 | 
19 | # yarn
20 | yarn
21 | ```
22 | 
23 | ## Sync Prisma Schema into `dev.db`
24 | 
25 | This project uses [SQLite](https://www.sqlite.org/index.html), a small and fast database engine that is great for local development and testing.
26 | 
27 | The project doesn't come with the SQLite database file included. Instead, the file gets created on the fly by Prisma.
28 | 
29 | The database file is called `dev.db` and it's found in the `prisma` directory.
30 | 
31 | Use Prisma's `db push` command to generate the database file and sync the schema found in `prisma/schema.prisma`.
32 | 
33 | ```bash
34 | # npm
35 | npx prisma db push
36 | 
37 | # yarn
38 | yarn prisma db push
39 | ```
40 | 
41 | ## Seed the Database
42 | 
43 | The project comes with a file to seed the database with some initial data. It's found in `prisma/seed.ts`.
44 | 
45 | Use Prisma's `db seed` command to get some initial data in place.
46 | 
47 | ```bash
48 | # npm
49 | npx prisma db seed
50 | 
51 | # yarn
52 | yarn prisma db seed
53 | ```
54 | 
55 | ## Run the App
56 | 
57 | Use Next.js's devleopment server to start the app.
58 | 
59 | ```bash
60 | # npm
61 | npm run dev
62 | 
63 | # yarn
64 | yarn run dev
65 | ```
66 | 
67 | ## License
68 | 
69 | MIT
70 | 


--------------------------------------------------------------------------------
/components/AddCampaignModal.tsx:
--------------------------------------------------------------------------------
 1 | import { CheckIcon } from '@heroicons/react/outline';
 2 | import { useForm } from 'react-hook-form';
 3 | import { useMutation } from 'react-query';
 4 | import Button from '../components/Button';
 5 | import FormGroup from '../components/FormGroup';
 6 | import SideModal from '../components/SideModal';
 7 | import { CampaignResult } from '../lib/types';
 8 | 
 9 | interface AddCampaignModalProps {
10 |   isOpen: boolean;
11 |   onClose: () => void;
12 |   onCampaignAddSuccess: (result: CampaignResult) => void;
13 |   onCampaignAddError: (err: string) => void;
14 | }
15 | 
16 | const AddCampaignModal = (props: AddCampaignModalProps) => {
17 |   const { isOpen, onClose, onCampaignAddSuccess, onCampaignAddError } = props;
18 | 
19 |   const {
20 |     register,
21 |     handleSubmit,
22 |     formState: { errors }
23 |   } = useForm();
24 | 
25 |   const addCampaignMutation = useMutation(
26 |     'addCampaign',
27 |     async ({ name, description }: { name: string; description: string }) => {
28 |       try {
29 |         const response = await fetch('./api/campaigns', {
30 |           method: 'POST',
31 |           body: JSON.stringify({ name, description })
32 |         });
33 | 
34 |         if (!response.ok) {
35 |           throw new Error('Something went wrong');
36 |         }
37 | 
38 |         return await response.json();
39 |       } catch (err) {
40 |         throw new Error(err);
41 |       }
42 |     },
43 |     {
44 |       onSuccess: (result) => onCampaignAddSuccess(result),
45 |       onError: (err: { message: string }) => onCampaignAddError(err.message)
46 |     }
47 |   );
48 | 
49 |   const onSubmit = (values) => addCampaignMutation.mutate(values);
50 | 
51 |   return (
52 |     <SideModal title="Add Campaign" isOpen={isOpen} onClose={onClose}>
53 |       <div>
54 |         <form onSubmit={handleSubmit(onSubmit)}>
55 |           <FormGroup>
56 |             <label className="form-label">Name</label>
57 |             <input
58 |               {...register('name', { required: true })}
59 |               placeholder="My social campaign"
60 |               name="name"
61 |               className="form-input"
62 |             />
63 |             {errors.name && <p className="form-error">Name is required</p>}
64 |           </FormGroup>
65 | 
66 |           <FormGroup>
67 |             <label className="form-label">Description</label>
68 |             <textarea
69 |               className="form-textarea h-48"
70 |               {...register('description', { required: true })}
71 |               placeholder="This campaign will get lots of follows"
72 |             />
73 |             {errors.description && (
74 |               <p className="form-error">Description is required</p>
75 |             )}
76 |           </FormGroup>
77 | 
78 |           <div className="mt-6">
79 |             <Button type="submit" text="Submit" icon={CheckIcon} />
80 |           </div>
81 |         </form>
82 |       </div>
83 |     </SideModal>
84 |   );
85 | };
86 | 
87 | export default AddCampaignModal;
88 | 


--------------------------------------------------------------------------------
/components/AddPostModal.tsx:
--------------------------------------------------------------------------------
  1 | import { CheckIcon } from '@heroicons/react/outline';
  2 | import { Campaign, Provider } from '@prisma/client';
  3 | import { useForm } from 'react-hook-form';
  4 | import { useMutation } from 'react-query';
  5 | import Select from 'react-select';
  6 | import { PostResult } from '../lib/types';
  7 | import { getPublishAtTime } from '../lib/util';
  8 | import Button from './Button';
  9 | import FormGroup from './FormGroup';
 10 | import ProviderOptionLabel from './ProviderOptionLabel';
 11 | import SideModal from './SideModal';
 12 | import TimeInput from './TimeInput';
 13 | 
 14 | interface AddPostModalProps {
 15 |   isOpen: boolean;
 16 |   date: Date;
 17 |   onClose: () => void;
 18 |   onAddPostSuccess: (result: PostResult) => void;
 19 |   onAddPostError: (err: string) => void;
 20 |   providers: Provider[];
 21 |   campaigns: Campaign[];
 22 | }
 23 | 
 24 | const AddPostModal = (props: AddPostModalProps) => {
 25 |   const {
 26 |     isOpen,
 27 |     date,
 28 |     onClose,
 29 |     onAddPostSuccess,
 30 |     onAddPostError,
 31 |     providers,
 32 |     campaigns
 33 |   } = props;
 34 | 
 35 |   const {
 36 |     register,
 37 |     handleSubmit,
 38 |     setValue,
 39 |     formState: { errors }
 40 |   } = useForm();
 41 | 
 42 |   const addPostMutation = useMutation(
 43 |     'addPost',
 44 |     async ({
 45 |       provider,
 46 |       campaigns,
 47 |       body,
 48 |       publishAt
 49 |     }: {
 50 |       provider: string;
 51 |       campaigns: string;
 52 |       body: string;
 53 |       publishAt: Date;
 54 |     }) => {
 55 |       try {
 56 |         const response = await fetch('./api/posts', {
 57 |           method: 'POST',
 58 |           body: JSON.stringify({ provider, campaigns, body, publishAt })
 59 |         });
 60 | 
 61 |         if (!response.ok) {
 62 |           throw new Error('Something went wrong');
 63 |         }
 64 | 
 65 |         return await response.json();
 66 |       } catch (err) {
 67 |         throw new Error(err);
 68 |       }
 69 |     },
 70 |     {
 71 |       onSuccess: (result) => onAddPostSuccess(result),
 72 |       onError: (err: { message: string }) => onAddPostError(err.message)
 73 |     }
 74 |   );
 75 | 
 76 |   const onSubmit = (data) => {
 77 |     const { provider, body, campaigns, time } = data;
 78 | 
 79 |     const publishAt = getPublishAtTime(date, time);
 80 | 
 81 |     addPostMutation.mutate({
 82 |       provider,
 83 |       campaigns,
 84 |       body,
 85 |       publishAt
 86 |     });
 87 |   };
 88 | 
 89 |   return (
 90 |     <SideModal title="Add Post" isOpen={isOpen} onClose={onClose}>
 91 |       <div>
 92 |         <form onSubmit={handleSubmit(onSubmit)}>
 93 |           <FormGroup>
 94 |             <label className="form-label">Account</label>
 95 |             <Select
 96 |               {...register('provider', { required: true })}
 97 |               name="provider"
 98 |               options={providers.map((p) => ({
 99 |                 value: p.id,
100 |                 label: `${p.name} - ${p.account}`,
101 |                 provider: p.name
102 |               }))}
103 |               formatOptionLabel={ProviderOptionLabel}
104 |               onChange={(provider) => setValue('provider', provider.value)}
105 |             />
106 |             {errors.provider && (
107 |               <p className="form-error">Provider is required</p>
108 |             )}
109 |           </FormGroup>
110 | 
111 |           <FormGroup>
112 |             <label className="form-label">Campaigns</label>
113 |             <Select
114 |               {...register('campaigns')}
115 |               name="campaigns"
116 |               options={campaigns.map((campaign) => ({
117 |                 value: campaign.id,
118 |                 label: campaign.name
119 |               }))}
120 |               onChange={(campaigns) => {
121 |                 setValue(
122 |                   'campaigns',
123 |                   campaigns.map((c) => c.value)
124 |                 );
125 |               }}
126 |               isMulti
127 |             />
128 |           </FormGroup>
129 | 
130 |           <FormGroup>
131 |             <label className="form-label">Post Body</label>
132 |             <textarea
133 |               className="form-textarea h-48"
134 |               {...register('body', { required: true })}
135 |               placeholder="My post here"
136 |             />
137 |             {errors.body && <p className="form-error">Body is required</p>}
138 |           </FormGroup>
139 | 
140 |           <FormGroup>
141 |             <label className="form-label">Post Time</label>
142 |             <TimeInput
143 |               {...register('time', { required: true })}
144 |               onChange={(value) => setValue('time', value)}
145 |             />
146 |             {errors.time && <p className="form-error">Time is required</p>}
147 |           </FormGroup>
148 | 
149 |           <div className="mt-6">
150 |             <Button type="submit" text="Submit" icon={CheckIcon} />
151 |           </div>
152 |         </form>
153 |       </div>
154 |     </SideModal>
155 |   );
156 | };
157 | 
158 | export default AddPostModal;
159 | 


--------------------------------------------------------------------------------
/components/AddProviderModal.tsx:
--------------------------------------------------------------------------------
  1 | import { CheckIcon } from '@heroicons/react/outline';
  2 | import { useForm } from 'react-hook-form';
  3 | import { useMutation } from 'react-query';
  4 | import Select from 'react-select';
  5 | import Button from '../components/Button';
  6 | import ProviderOptionLabel from '../components/ProviderOptionLabel';
  7 | import SideModal from '../components/SideModal';
  8 | import { ProviderOption } from '../lib/providers';
  9 | import { ProviderResult } from '../lib/types';
 10 | import FormGroup from './FormGroup';
 11 | 
 12 | interface AddProviderModalProps {
 13 |   isOpen: boolean;
 14 |   providerOptions: ProviderOption[];
 15 |   onClose: () => void;
 16 |   onProviderAddSuccess: (result: ProviderResult) => void;
 17 |   onProviderAddError: (err: string) => void;
 18 | }
 19 | 
 20 | const AddProviderModal = (props: AddProviderModalProps) => {
 21 |   const {
 22 |     isOpen,
 23 |     providerOptions,
 24 |     onClose,
 25 |     onProviderAddSuccess,
 26 |     onProviderAddError
 27 |   } = props;
 28 | 
 29 |   const {
 30 |     register,
 31 |     handleSubmit,
 32 |     setValue,
 33 |     formState: { errors }
 34 |   } = useForm();
 35 | 
 36 |   const addProviderMutation = useMutation(
 37 |     'addProvider',
 38 |     async ({ name, account }: { name: string; account: string }) => {
 39 |       try {
 40 |         const response = await fetch('./api/providers', {
 41 |           method: 'POST',
 42 |           body: JSON.stringify({ name, account })
 43 |         });
 44 | 
 45 |         if (!response.ok) {
 46 |           throw new Error('Something went wrong');
 47 |         }
 48 | 
 49 |         return await response.json();
 50 |       } catch (err) {
 51 |         throw new Error(err);
 52 |       }
 53 |     },
 54 |     {
 55 |       onSuccess: (result) => onProviderAddSuccess(result),
 56 |       onError: (err: { message: string }) => onProviderAddError(err.message)
 57 |     }
 58 |   );
 59 | 
 60 |   const onSubmit = (values) => addProviderMutation.mutate(values);
 61 | 
 62 |   return (
 63 |     <SideModal title="Add Provider" isOpen={isOpen} onClose={onClose}>
 64 |       <div>
 65 |         <form onSubmit={handleSubmit(onSubmit)}>
 66 |           <FormGroup>
 67 |             <label className="form-label">Provider</label>
 68 |             <Select
 69 |               {...register('name', { required: true })}
 70 |               name="name"
 71 |               formatOptionLabel={ProviderOptionLabel}
 72 |               options={providerOptions}
 73 |               onChange={({ value }) => {
 74 |                 setValue('name', value);
 75 |               }}
 76 |             />
 77 |             {errors.name && <p className="form-error">Provider is required</p>}
 78 |           </FormGroup>
 79 | 
 80 |           <FormGroup>
 81 |             <label className="form-label">Username/Account Handle</label>
 82 |             <input
 83 |               className="form-input"
 84 |               {...register('account', { required: true })}
 85 |               placeholder="johndoe"
 86 |             />
 87 |             {errors.account && (
 88 |               <p className="form-error">Username/handle is required</p>
 89 |             )}
 90 |           </FormGroup>
 91 | 
 92 |           <div className="mt-6">
 93 |             <Button type="submit" text="Submit" icon={CheckIcon} />
 94 |           </div>
 95 |         </form>
 96 |       </div>
 97 |     </SideModal>
 98 |   );
 99 | };
100 | 
101 | export default AddProviderModal;
102 | 


--------------------------------------------------------------------------------
/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import classnames from 'classnames';
 2 | import { SVGProps } from 'react';
 3 | 
 4 | interface ButtonProps {
 5 |   type?: 'submit' | 'button';
 6 |   text: string;
 7 |   icon?: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 8 |   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 9 |   color?: 'primary' | 'danger';
10 |   size?: 'sm' | 'md';
11 | }
12 | 
13 | const Button = (props: ButtonProps) => {
14 |   const buttonClasses = classnames({
15 |     'm-auto inline-flex shadow-lg': true,
16 |     'bg-white border border-red-600 text-red-600': props.color === 'danger',
17 |     'bg-violet hover:bg-purple-600 text-purple-100':
18 |       props.color === 'primary' || !props.color,
19 |     'px-4 py-2 rounded-lg': props.size === 'md' || !props.size,
20 |     'px-2 py-1 text-xs rounded-md': props.size === 'sm'
21 |   });
22 |   return (
23 |     <button
24 |       type={props.type || 'button'}
25 |       onClick={props.onClick}
26 |       className={buttonClasses}
27 |     >
28 |       {props.icon ? (
29 |         <span className="mr-2 inline-block w-4 h-4 m-auto">
30 |           {props.icon(null)}
31 |         </span>
32 |       ) : null}
33 |       <span>{props.text}</span>
34 |     </button>
35 |   );
36 | };
37 | 
38 | export default Button;
39 | 


--------------------------------------------------------------------------------
/components/CalendarEvent.tsx:
--------------------------------------------------------------------------------
 1 | import format from 'date-fns/format';
 2 | import Image from 'next/image';
 3 | 
 4 | const CalendarEvent = ({ event }) => {
 5 |   if (!event.provider) {
 6 |     return null;
 7 |   }
 8 |   return (
 9 |     <div className="px-4 py-2 text-sm rounded-lg overflow-scroll">
10 |       <div className="flex">
11 |         <Image
12 |           src={`/${event.provider.name}.png`}
13 |           width="20"
14 |           height="20"
15 |           objectFit="contain"
16 |           alt="social icon"
17 |         />
18 |         <p className="text-gray-600 text-xs my-auto ml-2">
19 |           {format(new Date(event.start), 'HH:mm')}
20 |         </p>
21 |       </div>
22 |     </div>
23 |   );
24 | };
25 | 
26 | export default CalendarEvent;
27 | 


--------------------------------------------------------------------------------
/components/Card.tsx:
--------------------------------------------------------------------------------
 1 | interface CardProps {
 2 |   children: React.ReactNode;
 3 | }
 4 | 
 5 | const Card = (props: CardProps) => {
 6 |   return (
 7 |     <div className="rounded-xl bg-white px-6 py-4 shadow my-4">
 8 |       {props.children}
 9 |     </div>
10 |   );
11 | };
12 | 
13 | export default Card;
14 | 


--------------------------------------------------------------------------------
/components/Dropdown.tsx:
--------------------------------------------------------------------------------
 1 | import { Menu, Transition } from '@headlessui/react';
 2 | import { DotsVerticalIcon } from '@heroicons/react/solid';
 3 | import { Fragment, SVGProps } from 'react';
 4 | 
 5 | function classNames(...classes) {
 6 |   return classes.filter(Boolean).join(' ');
 7 | }
 8 | 
 9 | type DropdownItem = {
10 |   text: string;
11 |   icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
12 |   action: () => void;
13 | };
14 | 
15 | interface DropdownProps {
16 |   items: DropdownItem[];
17 | }
18 | 
19 | const Dropdown = (props: DropdownProps) => {
20 |   return (
21 |     <Menu as="div" className="relative inline-block text-left">
22 |       <div>
23 |         <Menu.Button className="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-violet">
24 |           <span className="sr-only">Open options</span>
25 |           <DotsVerticalIcon className="h-5 w-5" aria-hidden="true" />
26 |         </Menu.Button>
27 |       </div>
28 | 
29 |       <Transition
30 |         as={Fragment}
31 |         enter="transition ease-out duration-100"
32 |         enterFrom="transform opacity-0 scale-95"
33 |         enterTo="transform opacity-100 scale-100"
34 |         leave="transition ease-in duration-75"
35 |         leaveFrom="transform opacity-100 scale-100"
36 |         leaveTo="transform opacity-0 scale-95"
37 |       >
38 |         <Menu.Items className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
39 |           <div className="py-1">
40 |             {props.items.map((item, i: number) => {
41 |               return (
42 |                 <Menu.Item key={i}>
43 |                   {({ active }) => (
44 |                     <button
45 |                       onClick={item.action}
46 |                       className={classNames(
47 |                         active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
48 |                         'block px-4 py-2 text-sm w-full text-left'
49 |                       )}
50 |                     >
51 |                       <div className="flex group">
52 |                         <div className="w-5 text-gray-400 mr-2 group-hover:text-gray-500">
53 |                           {item.icon(null)}
54 |                         </div>
55 |                         <div>{item.text}</div>
56 |                       </div>
57 |                     </button>
58 |                   )}
59 |                 </Menu.Item>
60 |               );
61 |             })}
62 |           </div>
63 |         </Menu.Items>
64 |       </Transition>
65 |     </Menu>
66 |   );
67 | };
68 | 
69 | export default Dropdown;
70 | 


--------------------------------------------------------------------------------
/components/FormGroup.tsx:
--------------------------------------------------------------------------------
 1 | import classnames from 'classnames';
 2 | 
 3 | interface FormGroupProps {
 4 |   children: React.ReactNode;
 5 |   className?: string;
 6 | }
 7 | 
 8 | const FormGroup = (props: FormGroupProps) => {
 9 |   const classes = classnames({
10 |     'my-4': true,
11 |     [props.className]: !!props.className
12 |   });
13 |   return <div className={classes}>{props.children}</div>;
14 | };
15 | 
16 | export default FormGroup;
17 | 


--------------------------------------------------------------------------------
/components/ProviderOptionLabel.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | 
 3 | interface ProviderOptionLabelProps {
 4 |   value: string;
 5 |   label: string;
 6 |   provider: string;
 7 | }
 8 | 
 9 | const ProviderOptionLabel = ({ label, provider }: ProviderOptionLabelProps) => (
10 |   <div className="flex">
11 |     <Image
12 |       width="25"
13 |       height="25"
14 |       objectFit="contain"
15 |       alt={`${provider} logo`}
16 |       src={`/${provider}.png`}
17 |     />
18 |     <p className="ml-2 my-auto">{label}</p>
19 |   </div>
20 | );
21 | 
22 | export default ProviderOptionLabel;
23 | 


--------------------------------------------------------------------------------
/components/ResourceAction.tsx:
--------------------------------------------------------------------------------
 1 | import { PlusIcon } from '@heroicons/react/solid';
 2 | import { SVGProps } from 'react';
 3 | import Button from './Button';
 4 | 
 5 | interface ResourceActionProps {
 6 |   emptyMessage: string;
 7 |   resourceCount: number;
 8 |   emptyIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 9 |   actionText: string;
10 |   onClick: (boolean) => void;
11 | }
12 | 
13 | const ResourceAction = (props: ResourceActionProps) => {
14 |   return (
15 |     <>
16 |       {props.resourceCount === 0 ? (
17 |         <div className="flex mt-12 flex-col">
18 |           <div className="w-8 m-auto text-violet">{props.emptyIcon(null)}</div>
19 |           <p className="m-auto text-gray-800 text-semibold text-lg mt-2">
20 |             {props.emptyMessage}
21 |           </p>
22 |           <div className="mt-4 m-auto">
23 |             <Button
24 |               text={props.actionText}
25 |               icon={PlusIcon}
26 |               onClick={props.onClick}
27 |             />
28 |           </div>
29 |         </div>
30 |       ) : (
31 |         <div className="mb-6">
32 |           <Button
33 |             text={props.actionText}
34 |             icon={PlusIcon}
35 |             onClick={props.onClick}
36 |           />
37 |         </div>
38 |       )}
39 |     </>
40 |   );
41 | };
42 | 
43 | export default ResourceAction;
44 | 


--------------------------------------------------------------------------------
/components/ResourceCard.tsx:
--------------------------------------------------------------------------------
 1 | import { PencilAltIcon, TrashIcon } from '@heroicons/react/outline';
 2 | import Dropdown from '../components/Dropdown';
 3 | import Card from './Card';
 4 | 
 5 | interface ResourceCardProps {
 6 |   children: React.ReactNode;
 7 |   onEdit: () => void;
 8 |   onDelete: () => void;
 9 | }
10 | const ResourceCard = (props: ResourceCardProps) => {
11 |   return (
12 |     <Card>
13 |       <div className="flex justify-between">
14 |         <div className="">{props.children}</div>
15 |         <Dropdown
16 |           items={[
17 |             {
18 |               text: 'Edit',
19 |               icon: PencilAltIcon,
20 |               action: props.onEdit
21 |             },
22 |             {
23 |               text: 'Delete',
24 |               icon: TrashIcon,
25 |               action: props.onDelete
26 |             }
27 |           ]}
28 |         />
29 |       </div>
30 |     </Card>
31 |   );
32 | };
33 | export default ResourceCard;
34 | 


--------------------------------------------------------------------------------
/components/SideModal.tsx:
--------------------------------------------------------------------------------
 1 | import { Dialog, Transition } from '@headlessui/react';
 2 | import { XIcon } from '@heroicons/react/outline';
 3 | import { Fragment } from 'react';
 4 | 
 5 | interface SideModalProps {
 6 |   title: string;
 7 |   isOpen: boolean;
 8 |   children: React.ReactNode;
 9 |   onClose: () => void;
10 | }
11 | const SideModal = (props: SideModalProps) => {
12 |   return (
13 |     <Transition.Root show={props.isOpen} as={Fragment}>
14 |       <Dialog
15 |         as="div"
16 |         className="fixed inset-0 overflow-hidden z-10"
17 |         onClose={props.onClose}
18 |       >
19 |         <div className="absolute inset-0 overflow-hidden">
20 |           <Transition.Child
21 |             as={Fragment}
22 |             enter="ease-in-out duration-300"
23 |             enterFrom="opacity-0"
24 |             enterTo="opacity-100"
25 |             leave="ease-in-out duration-300"
26 |             leaveFrom="opacity-100"
27 |             leaveTo="opacity-0"
28 |           >
29 |             <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
30 |           </Transition.Child>
31 | 
32 |           <div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
33 |             <Transition.Child
34 |               as={Fragment}
35 |               enter="transform transition ease-in-out duration-300 sm:duration-400"
36 |               enterFrom="translate-x-full"
37 |               enterTo="translate-x-0"
38 |               leave="transform transition ease-in-out duration-300 sm:duration-400"
39 |               leaveFrom="translate-x-0"
40 |               leaveTo="translate-x-full"
41 |             >
42 |               <div className="w-screen max-w-md">
43 |                 <div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
44 |                   <div className="px-4 sm:px-6">
45 |                     <div className="flex items-start justify-between">
46 |                       <Dialog.Title className="text-lg font-medium text-gray-900">
47 |                         {props.title}
48 |                       </Dialog.Title>
49 |                       <div className="ml-3 h-7 flex items-center">
50 |                         <button
51 |                           type="button"
52 |                           className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none"
53 |                           onClick={props.onClose}
54 |                         >
55 |                           <span className="sr-only">Close panel</span>
56 |                           <XIcon className="h-6 w-6" aria-hidden="true" />
57 |                         </button>
58 |                       </div>
59 |                     </div>
60 |                   </div>
61 |                   <div className="mt-6 relative flex-1 px-4 sm:px-6">
62 |                     <div className="absolute inset-0 px-4 sm:px-6">
63 |                       {props.children}
64 |                     </div>
65 |                   </div>
66 |                 </div>
67 |               </div>
68 |             </Transition.Child>
69 |           </div>
70 |         </div>
71 |       </Dialog>
72 |     </Transition.Root>
73 |   );
74 | };
75 | 
76 | export default SideModal;
77 | 


--------------------------------------------------------------------------------
/components/TimeInput.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import InputMask from 'react-input-mask';
 3 | 
 4 | interface TimeInputProps {
 5 |   time?: string;
 6 |   onChange: (value: string) => void;
 7 | }
 8 | 
 9 | const TimeInput = React.forwardRef((props: TimeInputProps, ref) => {
10 |   const [time, setTime] = useState(props.time || '');
11 |   const startsWithTwo = time[0] === '2';
12 | 
13 |   const handleInput = ({ target: { value } }) => {
14 |     setTime(value);
15 |     props.onChange(value);
16 |   };
17 | 
18 |   const mask = [
19 |     /[0-2]/,
20 |     startsWithTwo ? /[0-3]/ : /[0-9]/,
21 |     ':',
22 |     /[0-5]/,
23 |     /[0-9]/
24 |   ];
25 | 
26 |   return (
27 |     <InputMask
28 |       ref={ref}
29 |       {...props}
30 |       mask={mask}
31 |       className="form-input"
32 |       placeholder="12:30"
33 |       onChange={handleInput}
34 |       value={time}
35 |     />
36 |   );
37 | });
38 | 
39 | export default TimeInput;
40 | 


--------------------------------------------------------------------------------
/components/UpdateCampaignModal.tsx:
--------------------------------------------------------------------------------
  1 | import { CheckIcon } from '@heroicons/react/outline';
  2 | import { Campaign } from '@prisma/client';
  3 | import { useForm } from 'react-hook-form';
  4 | import { useMutation } from 'react-query';
  5 | import { CampaignResult } from '../lib/types';
  6 | import Button from './Button';
  7 | import FormGroup from './FormGroup';
  8 | import SideModal from './SideModal';
  9 | 
 10 | interface UpdateCampaignModalProps {
 11 |   campaign: Campaign;
 12 |   isOpen: boolean;
 13 |   onClose: () => void;
 14 |   onCampaignUpdateSuccess: (result: CampaignResult) => void;
 15 |   onCampaignUpdateError: (err: string) => void;
 16 | }
 17 | 
 18 | const UpdateCampaignModal = (props: UpdateCampaignModalProps) => {
 19 |   const {
 20 |     campaign,
 21 |     isOpen,
 22 |     onClose,
 23 |     onCampaignUpdateSuccess,
 24 |     onCampaignUpdateError
 25 |   } = props;
 26 | 
 27 |   if (!campaign) {
 28 |     return null;
 29 |   }
 30 | 
 31 |   const {
 32 |     register,
 33 |     handleSubmit,
 34 |     formState: { errors }
 35 |   } = useForm({
 36 |     defaultValues: {
 37 |       name: campaign.name,
 38 |       description: campaign.description
 39 |     }
 40 |   });
 41 | 
 42 |   const updateCampaignMutation = useMutation(
 43 |     'updateCampaign',
 44 |     async ({ name, description }: { name: string; description: string }) => {
 45 |       try {
 46 |         const response = await fetch(`./api/campaigns/${campaign.id}`, {
 47 |           method: 'PATCH',
 48 |           body: JSON.stringify({ name, description })
 49 |         });
 50 | 
 51 |         if (!response.ok) {
 52 |           throw new Error('Something went wrong');
 53 |         }
 54 | 
 55 |         return await response.json();
 56 |       } catch (err) {
 57 |         throw new Error(err);
 58 |       }
 59 |     },
 60 |     {
 61 |       onSuccess: (result) => onCampaignUpdateSuccess(result),
 62 |       onError: (err: { message: string }) => onCampaignUpdateError(err.message)
 63 |     }
 64 |   );
 65 | 
 66 |   const onSubmit = (values) => updateCampaignMutation.mutate(values);
 67 | 
 68 |   return (
 69 |     <SideModal title="Update Campaign" isOpen={isOpen} onClose={onClose}>
 70 |       <div>
 71 |         <form onSubmit={handleSubmit(onSubmit)}>
 72 |           <FormGroup>
 73 |             <label className="form-label">Name</label>
 74 |             <input
 75 |               {...register('name', { required: true })}
 76 |               placeholder="My social campaign"
 77 |               name="name"
 78 |               className="form-input"
 79 |             />
 80 |             {errors.name && <p className="form-error">Name is required</p>}
 81 |           </FormGroup>
 82 | 
 83 |           <FormGroup>
 84 |             <label className="form-label">Description</label>
 85 |             <textarea
 86 |               className="form-textarea h-48"
 87 |               {...register('description', { required: true })}
 88 |               placeholder="This campaign will get lots of follows"
 89 |             />
 90 |             {errors.description && (
 91 |               <p className="form-error">Description is required</p>
 92 |             )}
 93 |           </FormGroup>
 94 | 
 95 |           <div className="mt-6">
 96 |             <Button type="submit" text="Submit" icon={CheckIcon} />
 97 |           </div>
 98 |         </form>
 99 |       </div>
100 |     </SideModal>
101 |   );
102 | };
103 | 
104 | export default UpdateCampaignModal;
105 | 


--------------------------------------------------------------------------------
/components/UpdatePostModal.tsx:
--------------------------------------------------------------------------------
  1 | import { CheckIcon, TrashIcon } from '@heroicons/react/outline';
  2 | import { Campaign, Post, Provider } from '@prisma/client';
  3 | import { useForm } from 'react-hook-form';
  4 | import { useMutation } from 'react-query';
  5 | import Select from 'react-select';
  6 | import Button from '../components/Button';
  7 | import FormGroup from '../components/FormGroup';
  8 | import ProviderOptionLabel from '../components/ProviderOptionLabel';
  9 | import SideModal from '../components/SideModal';
 10 | import { PostResult } from '../lib/types';
 11 | import { getPublishAtTime, getTime } from '../lib/util';
 12 | import TimeInput from './TimeInput';
 13 | 
 14 | interface UpdatePostModalProps {
 15 |   post: Post & { provider: Provider; campaigns: Campaign[] };
 16 |   providers: Provider[];
 17 |   campaigns: Campaign[];
 18 |   onClose: () => void;
 19 |   onUpdatePostSuccess: (result: PostResult) => void;
 20 |   onUpdatePostError: (err: string) => void;
 21 |   onDeletePostSuccess: (result: PostResult) => void;
 22 |   onDeletePostError: (err: string) => void;
 23 | }
 24 | 
 25 | const UpdatePostModal = (props: UpdatePostModalProps) => {
 26 |   const {
 27 |     providers,
 28 |     campaigns,
 29 |     post,
 30 |     onClose,
 31 |     onUpdatePostSuccess,
 32 |     onUpdatePostError,
 33 |     onDeletePostSuccess,
 34 |     onDeletePostError
 35 |   } = props;
 36 | 
 37 |   if (!post) {
 38 |     return null;
 39 |   }
 40 | 
 41 |   const {
 42 |     register,
 43 |     handleSubmit,
 44 |     setValue,
 45 |     getValues,
 46 |     formState: { errors }
 47 |   } = useForm({
 48 |     defaultValues: {
 49 |       provider: post.provider.id,
 50 |       campaigns: post.campaigns
 51 |         ? post.campaigns.map((campaign) => campaign.id)
 52 |         : [],
 53 |       body: post.body,
 54 |       time: getTime(post.publishAt as unknown as string)
 55 |     }
 56 |   });
 57 | 
 58 |   const updatePostMutation = useMutation(
 59 |     'updatePost',
 60 |     async ({
 61 |       id,
 62 |       provider,
 63 |       campaigns,
 64 |       body,
 65 |       publishAt
 66 |     }: {
 67 |       id: string;
 68 |       provider: string;
 69 |       campaigns: string;
 70 |       body: string;
 71 |       publishAt: Date;
 72 |     }) => {
 73 |       try {
 74 |         const response = await fetch(`./api/posts/${id}`, {
 75 |           method: 'PATCH',
 76 |           body: JSON.stringify({ provider, campaigns, body, publishAt })
 77 |         });
 78 | 
 79 |         if (!response.ok) {
 80 |           throw new Error('Something went wrong');
 81 |         }
 82 | 
 83 |         return await response.json();
 84 |       } catch (err) {
 85 |         throw new Error(err);
 86 |       }
 87 |     },
 88 |     {
 89 |       onSuccess: (result) => onUpdatePostSuccess(result),
 90 |       onError: (err: { message: string }) => onUpdatePostError(err.message)
 91 |     }
 92 |   );
 93 | 
 94 |   const deletePostMutation = useMutation(
 95 |     'deletePost',
 96 |     async ({ id }: { id: string }) => {
 97 |       try {
 98 |         const response = await fetch(`./api/posts/${id}`, {
 99 |           method: 'DELETE'
100 |         });
101 | 
102 |         if (!response.ok) {
103 |           throw new Error('Something went wrong');
104 |         }
105 | 
106 |         return await response.json();
107 |       } catch (err) {
108 |         throw new Error(err);
109 |       }
110 |     },
111 |     {
112 |       onSuccess: (result) => onDeletePostSuccess(result),
113 |       onError: (err: { message: string }) => onDeletePostError(err.message)
114 |     }
115 |   );
116 | 
117 |   const onSubmit = (data) => {
118 |     const { provider, campaigns, body, time } = data;
119 | 
120 |     const publishAt = getPublishAtTime(post.publishAt, time);
121 | 
122 |     updatePostMutation.mutate({
123 |       id: post.id,
124 |       provider,
125 |       campaigns,
126 |       body,
127 |       publishAt
128 |     });
129 |   };
130 | 
131 |   return (
132 |     <SideModal title="Edit Post" isOpen={!!post} onClose={onClose}>
133 |       <div>
134 |         <form onSubmit={handleSubmit(onSubmit)}>
135 |           <FormGroup>
136 |             <label className="form-label">Account</label>
137 |             <Select
138 |               {...register('provider', { required: true })}
139 |               name="provider"
140 |               options={providers.map((p) => ({
141 |                 value: p.id,
142 |                 label: `${p.name} - ${p.account}`,
143 |                 provider: p.name
144 |               }))}
145 |               formatOptionLabel={ProviderOptionLabel}
146 |               onChange={(provider) => setValue('provider', provider.value)}
147 |               value={{
148 |                 value: post.provider.id,
149 |                 label: `${post.provider.name} - ${post.provider.account}`,
150 |                 provider: post.provider.name
151 |               }}
152 |             />
153 |             {errors.provider && (
154 |               <p className="form-error">Provider is required</p>
155 |             )}
156 |           </FormGroup>
157 | 
158 |           <FormGroup>
159 |             <label className="form-label">Campaigns</label>
160 |             <Select
161 |               {...register('campaigns')}
162 |               name="campaigns"
163 |               options={campaigns.map((campaign) => ({
164 |                 value: campaign.id,
165 |                 label: campaign.name
166 |               }))}
167 |               onChange={(campaigns) => {
168 |                 setValue(
169 |                   'campaigns',
170 |                   campaigns.map((c) => c.value)
171 |                 );
172 |               }}
173 |               isMulti
174 |               defaultValue={post.campaigns.map((campaign) => ({
175 |                 value: campaign.id,
176 |                 label: campaign.name
177 |               }))}
178 |             />
179 |           </FormGroup>
180 | 
181 |           <FormGroup>
182 |             <label className="form-label">Post Body</label>
183 |             <textarea
184 |               className="form-textarea h-48"
185 |               {...register('body', { required: true })}
186 |               placeholder="My post here"
187 |             />
188 |             {errors.body && <p className="form-error">Body is required</p>}
189 |           </FormGroup>
190 | 
191 |           <FormGroup>
192 |             <label className="form-label">Post Time</label>
193 |             <TimeInput
194 |               {...register('time', { required: true })}
195 |               time={getValues('time')}
196 |               onChange={(value) => setValue('time', value)}
197 |             />
198 |             {errors.time && <p className="form-error">Time is required</p>}
199 |           </FormGroup>
200 | 
201 |           <div className="mt-6">
202 |             <Button type="submit" text="Submit" icon={CheckIcon} />
203 |           </div>
204 |         </form>
205 |       </div>
206 |       <section className="mt-16">
207 |         <div className="px-2 py-1 bg-red-600 rounded-tr rounded-tl">
208 |           <p className="text-red-50 font-bold text-sm">Danger Zone</p>
209 |         </div>
210 |         <div className="px-3 py-4 border border-red-600 rounded-br rounded-bl">
211 |           <Button
212 |             text="Delete Post"
213 |             type="button"
214 |             color="danger"
215 |             size="sm"
216 |             icon={TrashIcon}
217 |             onClick={() => {
218 |               if (confirm('Are you sure you want to delete this post?')) {
219 |                 deletePostMutation.mutate({ id: post.id });
220 |               }
221 |             }}
222 |           />
223 |         </div>
224 |       </section>
225 |     </SideModal>
226 |   );
227 | };
228 | 
229 | export default UpdatePostModal;
230 | 


--------------------------------------------------------------------------------
/components/UpdateProviderModal.tsx:
--------------------------------------------------------------------------------
  1 | import { CheckIcon } from '@heroicons/react/outline';
  2 | import { Provider } from '@prisma/client';
  3 | import { useForm } from 'react-hook-form';
  4 | import { useMutation } from 'react-query';
  5 | import Select from 'react-select';
  6 | import { ProviderOption } from '../lib/providers';
  7 | import { ProviderResult } from '../lib/types';
  8 | import Button from './Button';
  9 | import FormGroup from './FormGroup';
 10 | import ProviderOptionLabel from './ProviderOptionLabel';
 11 | import SideModal from './SideModal';
 12 | 
 13 | interface UpdateProviderModalProps {
 14 |   isOpen: boolean;
 15 |   provider: Provider;
 16 |   providerOptions: ProviderOption[];
 17 |   onClose: () => void;
 18 |   onProviderUpdateSuccess: (result: ProviderResult) => void;
 19 |   onProviderUpdateError: (err: string) => void;
 20 | }
 21 | 
 22 | const UpdateProviderModal = (props: UpdateProviderModalProps) => {
 23 |   const {
 24 |     isOpen,
 25 |     provider,
 26 |     providerOptions,
 27 |     onClose,
 28 |     onProviderUpdateSuccess,
 29 |     onProviderUpdateError
 30 |   } = props;
 31 | 
 32 |   if (!provider) {
 33 |     return null;
 34 |   }
 35 | 
 36 |   const {
 37 |     register,
 38 |     handleSubmit,
 39 |     setValue,
 40 |     formState: { errors }
 41 |   } = useForm({
 42 |     defaultValues: {
 43 |       name: provider.name,
 44 |       account: provider.account
 45 |     }
 46 |   });
 47 | 
 48 |   const updateProviderMutation = useMutation(
 49 |     'updateProvider',
 50 |     async ({ name, account }: { name: string; account: string }) => {
 51 |       try {
 52 |         const response = await fetch(`./api/providers/${provider.id}`, {
 53 |           method: 'PATCH',
 54 |           body: JSON.stringify({ name, account })
 55 |         });
 56 | 
 57 |         if (!response.ok) {
 58 |           throw new Error('Something went wrong');
 59 |         }
 60 | 
 61 |         return await response.json();
 62 |       } catch (err) {
 63 |         throw new Error(err);
 64 |       }
 65 |     },
 66 |     {
 67 |       onSuccess: (result) => onProviderUpdateSuccess(result),
 68 |       onError: (err: { message: string }) => onProviderUpdateError(err.message)
 69 |     }
 70 |   );
 71 | 
 72 |   const onSubmit = (values) => updateProviderMutation.mutate(values);
 73 | 
 74 |   return (
 75 |     <SideModal title="Update Provider" isOpen={isOpen} onClose={onClose}>
 76 |       <div>
 77 |         <form onSubmit={handleSubmit(onSubmit)}>
 78 |           <FormGroup>
 79 |             <label className="form-label">Provider</label>
 80 |             <Select
 81 |               {...register('name', { required: true })}
 82 |               name="name"
 83 |               formatOptionLabel={ProviderOptionLabel}
 84 |               options={providerOptions}
 85 |               onChange={({ value }) => {
 86 |                 setValue('name', value);
 87 |               }}
 88 |               value={{
 89 |                 value: provider.name,
 90 |                 label: provider.name,
 91 |                 provider: provider.name
 92 |               }}
 93 |             />
 94 |             {errors.name && <p className="form-error">Provider is required</p>}
 95 |           </FormGroup>
 96 | 
 97 |           <FormGroup>
 98 |             <label className="form-label">Username/Account Handle</label>
 99 |             <input
100 |               className="form-input"
101 |               {...register('account', { required: true })}
102 |               placeholder="johndoe"
103 |             />
104 |             {errors.account && (
105 |               <p className="form-error">Username/handle is required</p>
106 |             )}
107 |           </FormGroup>
108 | 
109 |           <div className="mt-6">
110 |             <Button type="submit" text="Submit" icon={CheckIcon} />
111 |           </div>
112 |         </form>
113 |       </div>
114 |     </SideModal>
115 |   );
116 | };
117 | 
118 | export default UpdateProviderModal;
119 | 


--------------------------------------------------------------------------------
/db/index.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from '@prisma/client';
 2 | 
 3 | declare global {
 4 |   var prisma: PrismaClient | undefined;
 5 | }
 6 | 
 7 | export const prisma = global.prisma || new PrismaClient();
 8 | 
 9 | if (process.env.NODE_ENV !== 'production') {
10 |   global.prisma = prisma;
11 | }
12 | 


--------------------------------------------------------------------------------
/layouts/AppLayout.tsx:
--------------------------------------------------------------------------------
  1 | import { Dialog, Transition } from '@headlessui/react';
  2 | import {
  3 |   CalendarIcon,
  4 |   ChatAlt2Icon,
  5 |   MenuIcon,
  6 |   SpeakerphoneIcon,
  7 |   XIcon
  8 | } from '@heroicons/react/outline';
  9 | import classnames from 'classnames';
 10 | import { useRouter } from 'next/dist/client/router';
 11 | import Head from 'next/head';
 12 | import Link from 'next/link';
 13 | import { Fragment, useState } from 'react';
 14 | import { Toaster } from 'react-hot-toast';
 15 | 
 16 | type NavItem = {
 17 |   name: string;
 18 |   href: string;
 19 |   icon: React.ReactNode;
 20 | };
 21 | 
 22 | const navItems: NavItem[] = [
 23 |   { name: 'Schedule', href: '/', icon: CalendarIcon },
 24 |   { name: 'Campaigns', href: '/campaigns', icon: SpeakerphoneIcon },
 25 |   { name: 'Providers', href: '/providers', icon: ChatAlt2Icon }
 26 | ];
 27 | 
 28 | interface AppLayoutProps {
 29 |   children: React.ReactNode;
 30 | }
 31 | 
 32 | export default function AppLayout(props: AppLayoutProps) {
 33 |   const [sidebarOpen, setSidebarOpen] = useState(false);
 34 |   const router = useRouter();
 35 | 
 36 |   return (
 37 |     <>
 38 |       <Head>
 39 |         <link
 40 |           href="https://fonts.googleapis.com/css2?family=Paytone+One&display=swap"
 41 |           rel="stylesheet"
 42 |         />
 43 |         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 44 |       </Head>
 45 |       <div>
 46 |         {sidebarOpen && (
 47 |           <Transition.Root show={sidebarOpen} as={Fragment}>
 48 |             <Dialog
 49 |               as="div"
 50 |               className="fixed inset-0 flex z-40 md:hidden"
 51 |               onClose={setSidebarOpen}
 52 |             >
 53 |               <Transition.Child
 54 |                 as={Fragment}
 55 |                 enter="transition-opacity ease-linear duration-300"
 56 |                 enterFrom="opacity-0"
 57 |                 enterTo="opacity-100"
 58 |                 leave="transition-opacity ease-linear duration-300"
 59 |                 leaveFrom="opacity-100"
 60 |                 leaveTo="opacity-0"
 61 |               >
 62 |                 <Dialog.Overlay className="fixed inset-0 bg-gray-600 bg-opacity-75" />
 63 |               </Transition.Child>
 64 |               <Transition.Child
 65 |                 as={Fragment}
 66 |                 enter="transition ease-in-out duration-300 transform"
 67 |                 enterFrom="-translate-x-full"
 68 |                 enterTo="translate-x-0"
 69 |                 leave="transition ease-in-out duration-300 transform"
 70 |                 leaveFrom="translate-x-0"
 71 |                 leaveTo="-translate-x-full"
 72 |               >
 73 |                 <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
 74 |                   <Transition.Child
 75 |                     as={Fragment}
 76 |                     enter="ease-in-out duration-300"
 77 |                     enterFrom="opacity-0"
 78 |                     enterTo="opacity-100"
 79 |                     leave="ease-in-out duration-300"
 80 |                     leaveFrom="opacity-100"
 81 |                     leaveTo="opacity-0"
 82 |                   >
 83 |                     <div className="absolute top-0 right-0 -mr-12 pt-2">
 84 |                       <button
 85 |                         type="button"
 86 |                         className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
 87 |                         onClick={() => setSidebarOpen(false)}
 88 |                       >
 89 |                         <span className="sr-only">Close sidebar</span>
 90 |                         <XIcon
 91 |                           className="h-6 w-6 text-white"
 92 |                           aria-hidden="true"
 93 |                         />
 94 |                       </button>
 95 |                     </div>
 96 |                   </Transition.Child>
 97 |                   <div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
 98 |                     <div className="flex-shrink-0 flex items-center px-4 justify-center">
 99 |                       <img
100 |                         className="-m-10 sm:m-0"
101 |                         src="/logo.svg"
102 |                         alt="Workflow"
103 |                       />
104 |                     </div>
105 |                     <nav className="mt-5 px-2 space-y-1">
106 |                       {navItems.map((item) => (
107 |                         <Link key={item.name} href={item.href}>
108 |                           <div
109 |                             className={classnames({
110 |                               'group flex items-center px-2 py-2 text-sm font-medium rounded-md cursor-pointer':
111 |                                 true,
112 |                               'bg-gray-100 text-gray-800 font-bold':
113 |                                 item.href === router.route,
114 |                               'text-gray-600 hover:bg-gray-50 hover:text-gray-900':
115 |                                 item.href !== router.route
116 |                             })}
117 |                           >
118 |                             {/*// @ts-ignore */}
119 |                             <item.icon
120 |                               className={classnames({
121 |                                 'mr-3 flex-shrink-0 h-6 w-6': true,
122 |                                 'text-violet': item.href === router.route,
123 |                                 'text-gray-400 group-hover:text-gray-500':
124 |                                   item.href !== router.route
125 |                               })}
126 |                               aria-hidden="true"
127 |                             />
128 |                             {item.name}
129 |                           </div>
130 |                         </Link>
131 |                       ))}
132 |                     </nav>
133 |                   </div>
134 |                 </div>
135 |               </Transition.Child>
136 |               <div className="flex-shrink-0 w-14"></div>
137 |             </Dialog>
138 |           </Transition.Root>
139 |         )}
140 | 
141 |         <div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
142 |           <div className="flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white">
143 |             <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
144 |               <div className="flex items-center flex-shrink-0 px-4 -m-16">
145 |                 <img className="w-auto" src="/logo.svg" alt="Workflow" />
146 |               </div>
147 |               <nav className="mt-5 flex-1 px-4 bg-white space-y-1">
148 |                 {navItems.map((item) => (
149 |                   <Link key={item.name} href={item.href}>
150 |                     <div
151 |                       className={classnames({
152 |                         'group flex items-center px-2 py-2 text-sm font-medium rounded-md cursor-pointer':
153 |                           true,
154 |                         'bg-gray-100 text-gray-800 font-bold':
155 |                           item.href === router.route,
156 |                         'text-gray-600 hover:bg-gray-50 hover:text-gray-900':
157 |                           item.href !== router.route
158 |                       })}
159 |                     >
160 |                       {/*// @ts-ignore */}
161 |                       <item.icon
162 |                         className={classnames({
163 |                           'mr-3 flex-shrink-0 h-6 w-6': true,
164 |                           'text-violet': item.href === router.route,
165 |                           'text-gray-400 group-hover:text-gray-500':
166 |                             item.href !== router.route
167 |                         })}
168 |                         aria-hidden="true"
169 |                       />
170 |                       {item.name}
171 |                     </div>
172 |                   </Link>
173 |                 ))}
174 |               </nav>
175 |             </div>
176 |           </div>
177 |         </div>
178 |         <div className="md:pl-64 flex flex-col flex-1">
179 |           <div className="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-gray-100">
180 |             <button
181 |               type="button"
182 |               className="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet"
183 |               onClick={() => setSidebarOpen(true)}
184 |             >
185 |               <span className="sr-only">Open sidebar</span>
186 |               <MenuIcon className="h-6 w-6" aria-hidden="true" />
187 |             </button>
188 |           </div>
189 |           <main className="flex-1 bg-gray-50">
190 |             <Toaster position="top-right" />
191 |             <div className="py-10 h-screen">
192 |               <div className="container mx-auto px-4 sm:px-8">
193 |                 <h1 className="text-2xl font-semibold text-gray-900 border-b-4 border-violet inline-block">
194 |                   {navItems.find((item) => item.href === router.route)?.name}
195 |                 </h1>
196 |                 <main className="mt-12">{props.children}</main>
197 |               </div>
198 |             </div>
199 |           </main>
200 |         </div>
201 |       </div>
202 |     </>
203 |   );
204 | }
205 | 


--------------------------------------------------------------------------------
/lib/data/campaigns.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": "1",
 4 |     "name": "My first campaign",
 5 |     "description": "This is a Twitter campaign for Twitter",
 6 |     "posts": []
 7 |   },
 8 |   {
 9 |     "id": "2",
10 |     "name": "My second campaign",
11 |     "description": "This is an Instagram campaign for Instagram",
12 |     "posts": []
13 |   }
14 | ]


--------------------------------------------------------------------------------
/lib/data/providers.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": "1",
 4 |     "name": "Twitter",
 5 |     "account": "courselift"
 6 |   },
 7 |   {
 8 |     "id": "2",
 9 |     "name": "Instagram",
10 |     "account": "courselift"
11 |   },
12 |   {
13 |     "id": "3",
14 |     "name": "LinkedIn",
15 |     "account": "courselift"
16 |   }
17 | ]


--------------------------------------------------------------------------------
/lib/providers.ts:
--------------------------------------------------------------------------------
 1 | export type ProviderOption = {
 2 |   label: string;
 3 |   value: string;
 4 |   provider: string;
 5 | };
 6 | 
 7 | export const providerOptions: ProviderOption[] = [
 8 |   {
 9 |     label: 'Twitter',
10 |     value: 'Twitter',
11 |     provider: 'Twitter'
12 |   },
13 |   {
14 |     label: 'Instagram',
15 |     value: 'Instagram',
16 |     provider: 'Instagram'
17 |   },
18 |   {
19 |     label: 'Facebook',
20 |     value: 'Facebook',
21 |     provider: 'Facebook'
22 |   },
23 |   {
24 |     label: 'LinkedIn',
25 |     value: 'LinkedIn',
26 |     provider: 'LinkedIn'
27 |   }
28 | ];
29 | 


--------------------------------------------------------------------------------
/lib/types.ts:
--------------------------------------------------------------------------------
 1 | import { Campaign, Post, Provider } from '@prisma/client';
 2 | 
 3 | export type Result = {
 4 |   message: string;
 5 |   data: Post | Campaign | Provider;
 6 | };
 7 | 
 8 | export type PostResult = {
 9 |   message: string;
10 |   data: Post & { provider: Provider };
11 | };
12 | 
13 | export type CampaignResult = {
14 |   message: string;
15 |   data: Campaign;
16 | };
17 | 
18 | export type ProviderResult = {
19 |   message: string;
20 |   data: Provider;
21 | };
22 | 


--------------------------------------------------------------------------------
/lib/util.ts:
--------------------------------------------------------------------------------
 1 | import format from 'date-fns/format';
 2 | import getDay from 'date-fns/getDay';
 3 | import enUS from 'date-fns/locale/en-US';
 4 | import parse from 'date-fns/parse';
 5 | import startOfWeek from 'date-fns/startOfWeek';
 6 | import { dateFnsLocalizer } from 'react-big-calendar';
 7 | 
 8 | export const getPublishAtTime = (date: Date, time: string) => {
 9 |   const hour = parseInt(time.slice(0, 2));
10 |   const minute = parseInt(time.slice(3, 5));
11 |   const publishAt = new Date(new Date(date).setHours(hour, minute));
12 |   return publishAt;
13 | };
14 | 
15 | export const getTime = (publishAt: string) => {
16 |   const date = new Date(publishAt);
17 | 
18 |   const hours = date.getHours();
19 |   const minutes = date.getMinutes();
20 | 
21 |   return `${hours}:${minutes}`;
22 | };
23 | 
24 | export const localizer = dateFnsLocalizer({
25 |   format,
26 |   parse,
27 |   startOfWeek,
28 |   getDay,
29 |   locales: {
30 |     'en-US': enUS
31 |   }
32 | });
33 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "next dev",
 5 |     "build": "next build",
 6 |     "start": "next start"
 7 |   },
 8 |   "prisma": {
 9 |     "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
10 |   },
11 |   "dependencies": {
12 |     "@headlessui/react": "^1.4.2",
13 |     "@heroicons/react": "^1.0.5",
14 |     "@prisma/client": "^3.8.1",
15 |     "@tailwindcss/forms": "^0.4.0",
16 |     "@types/react-big-calendar": "^0.36.2",
17 |     "classnames": "^2.3.1",
18 |     "date-fns": "^2.28.0",
19 |     "next": "^12.0.8",
20 |     "pluralize": "^8.0.0",
21 |     "react": "^17.0.2",
22 |     "react-big-calendar": "^0.38.4",
23 |     "react-dom": "^17.0.2",
24 |     "react-hook-form": "^7.23.0",
25 |     "react-hot-toast": "^2.2.0",
26 |     "react-input-mask": "^3.0.0-alpha.2",
27 |     "react-query": "^3.34.8",
28 |     "react-select": "^5.2.1",
29 |     "ts-node": "^10.4.0"
30 |   },
31 |   "devDependencies": {
32 |     "@types/classnames": "^2.3.1",
33 |     "@types/node": "^17.0.8",
34 |     "@types/react": "^17.0.38",
35 |     "autoprefixer": "^10.4.2",
36 |     "postcss": "^8.4.5",
37 |     "prisma": "^3.8.1",
38 |     "tailwindcss": "^3.0.13",
39 |     "typescript": "^4.5.4"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { QueryClient, QueryClientProvider } from 'react-query';
 2 | import AppLayout from './../layouts/AppLayout';
 3 | import './../styles/calendar.css';
 4 | import './../styles/styles.css';
 5 | 
 6 | const queryClient = new QueryClient();
 7 | 
 8 | function App({ Component, pageProps }) {
 9 |   return (
10 |     <AppLayout>
11 |       <QueryClientProvider client={queryClient}>
12 |         <Component {...pageProps} />
13 |       </QueryClientProvider>
14 |     </AppLayout>
15 |   );
16 | }
17 | 
18 | export default App;
19 | 


--------------------------------------------------------------------------------
/pages/api/campaigns/[id].tsx:
--------------------------------------------------------------------------------
 1 | import { Campaign } from '@prisma/client';
 2 | import type { NextApiRequest, NextApiResponse } from 'next';
 3 | import { prisma } from './../../../db';
 4 | 
 5 | type ResponseData = {
 6 |   message: string;
 7 |   data?: Campaign;
 8 | };
 9 | 
10 | export default async (
11 |   req: NextApiRequest,
12 |   res: NextApiResponse<ResponseData>
13 | ) => {
14 |   if (!['PATCH', 'DELETE'].includes(req.method)) {
15 |     return res.status(400).json({ message: 'Method not supported' });
16 |   }
17 | 
18 |   const { id } = req.query;
19 | 
20 |   if (req.method === 'PATCH') {
21 |     try {
22 |       const { name, description } = JSON.parse(req.body);
23 | 
24 |       const campaign = await prisma.campaign.update({
25 |         where: { id: id as string },
26 |         data: {
27 |           name,
28 |           description,
29 |           updatedAt: new Date()
30 |         }
31 |       });
32 | 
33 |       return res
34 |         .status(200)
35 |         .json({ message: 'Campaign updated!', data: campaign });
36 |     } catch (err) {
37 |       return res.status(400).json({ message: 'Something went wrong' });
38 |     }
39 |   }
40 | 
41 |   if (req.method === 'DELETE') {
42 |     try {
43 |       const campaign = await prisma.campaign.delete({
44 |         where: { id: id as string }
45 |       });
46 | 
47 |       return res
48 |         .status(200)
49 |         .json({ message: 'Campaign deleted!', data: campaign });
50 |     } catch (err) {
51 |       return res.status(400).json({ message: 'Something went wrong' });
52 |     }
53 |   }
54 | };
55 | 


--------------------------------------------------------------------------------
/pages/api/campaigns/index.ts:
--------------------------------------------------------------------------------
 1 | import { Campaign, Prisma } from '@prisma/client';
 2 | import type { NextApiRequest, NextApiResponse } from 'next';
 3 | import { prisma } from './../../../db';
 4 | 
 5 | type ResponseData = {
 6 |   message: string;
 7 |   data?: Campaign;
 8 | };
 9 | 
10 | export default async (
11 |   req: NextApiRequest,
12 |   res: NextApiResponse<ResponseData>
13 | ) => {
14 |   if (req.method === 'POST') {
15 |     try {
16 |       const { name, description } = JSON.parse(req.body);
17 | 
18 |       const data: Prisma.CampaignCreateInput = {
19 |         name,
20 |         description
21 |       };
22 | 
23 |       const campaign = await prisma.campaign.create({ data });
24 | 
25 |       res.status(200).json({ message: 'Provider added!', data: campaign });
26 |     } catch (err) {
27 |       return res.status(400).json({ message: 'Something went wrong' });
28 |     }
29 |   } else {
30 |     res.status(400).json({ message: 'Method not supported' });
31 |   }
32 | };
33 | 


--------------------------------------------------------------------------------
/pages/api/posts/[id].tsx:
--------------------------------------------------------------------------------
 1 | import { Post } from '@prisma/client';
 2 | import type { NextApiRequest, NextApiResponse } from 'next';
 3 | import { prisma } from './../../../db';
 4 | 
 5 | const makeCampaignsFragment = (campaigns) => {
 6 |   if (!campaigns || !campaigns.length) {
 7 |     return {
 8 |       set: []
 9 |     };
10 |   } else {
11 |     return {
12 |       connect: campaigns.map((campaign) => ({ id: campaign }))
13 |     };
14 |   }
15 | };
16 | 
17 | type ResponseData = {
18 |   message: string;
19 |   data?: Post;
20 | };
21 | 
22 | export default async (
23 |   req: NextApiRequest,
24 |   res: NextApiResponse<ResponseData>
25 | ) => {
26 |   const { id } = req.query;
27 | 
28 |   if (req.method === 'PATCH') {
29 |     try {
30 |       const data = JSON.parse(req.body);
31 | 
32 |       const post = await prisma.post.update({
33 |         where: { id: id as string },
34 |         data: {
35 |           body: data.body,
36 |           publishAt: data.publishAt,
37 |           provider: {
38 |             connect: {
39 |               id: data.provider
40 |             }
41 |           },
42 |           campaigns: makeCampaignsFragment(data.campaigns),
43 |           updatedAt: new Date()
44 |         },
45 |         include: {
46 |           provider: true,
47 |           campaigns: true
48 |         }
49 |       });
50 | 
51 |       res.status(200).json({ message: 'Post updated!', data: post });
52 |     } catch (err) {
53 |       return res.status(400).json({ message: 'Something went wrong' });
54 |     }
55 |   } else if (req.method === 'DELETE') {
56 |     try {
57 |       const post = await prisma.post.delete({
58 |         where: { id: id as string }
59 |       });
60 | 
61 |       res.status(200).json({ message: 'Post deleted!', data: post });
62 |     } catch (err) {
63 |       return res.status(400).json({ message: 'Something went wrong' });
64 |     }
65 |   } else {
66 |     res.status(400).json({ message: 'Method not supported' });
67 |   }
68 | };
69 | 


--------------------------------------------------------------------------------
/pages/api/posts/index.ts:
--------------------------------------------------------------------------------
 1 | import { Post, Prisma } from '@prisma/client';
 2 | import type { NextApiRequest, NextApiResponse } from 'next';
 3 | import { prisma } from './../../../db';
 4 | 
 5 | type ResponseData = {
 6 |   message: string;
 7 |   data?: Post;
 8 | };
 9 | 
10 | export default async (
11 |   req: NextApiRequest,
12 |   res: NextApiResponse<ResponseData>
13 | ) => {
14 |   if (req.method === 'POST') {
15 |     try {
16 |       const { provider, campaigns, body, publishAt } = JSON.parse(req.body);
17 | 
18 |       const data: Prisma.PostCreateInput = {
19 |         body,
20 |         publishAt,
21 |         provider: {
22 |           connect: {
23 |             id: provider
24 |           }
25 |         },
26 |         campaigns: {
27 |           connect: campaigns.map((c) => ({ id: c }))
28 |         }
29 |       };
30 | 
31 |       const post = await prisma.post.create({
32 |         data,
33 |         include: {
34 |           provider: true,
35 |           campaigns: true
36 |         }
37 |       });
38 | 
39 |       res.status(200).json({ message: 'Post added!', data: post });
40 |     } catch (err) {
41 |       return res.status(400).json({ message: 'Something went wrong' });
42 |     }
43 |   } else {
44 |     res.status(400).json({ message: 'Method not supported' });
45 |   }
46 | };
47 | 


--------------------------------------------------------------------------------
/pages/api/providers/[id].tsx:
--------------------------------------------------------------------------------
 1 | import { Prisma, Provider } from '@prisma/client';
 2 | import type { NextApiRequest, NextApiResponse } from 'next';
 3 | import { prisma } from './../../../db';
 4 | 
 5 | type ResponseData = {
 6 |   message: string;
 7 |   data?: Provider;
 8 | };
 9 | 
10 | export default async (
11 |   req: NextApiRequest,
12 |   res: NextApiResponse<ResponseData>
13 | ) => {
14 |   if (!['PATCH', 'DELETE'].includes(req.method)) {
15 |     return res.status(400).json({ message: 'Method not supported' });
16 |   }
17 | 
18 |   const { id } = req.query;
19 | 
20 |   if (req.method === 'PATCH') {
21 |     try {
22 |       const { name, account } = JSON.parse(req.body);
23 | 
24 |       const input: Prisma.ProviderUpdateArgs = {
25 |         where: {
26 |           id: id as string
27 |         },
28 |         data: {
29 |           name,
30 |           account,
31 |           updatedAt: new Date()
32 |         }
33 |       };
34 | 
35 |       const provider = await prisma.provider.update(input);
36 | 
37 |       return res
38 |         .status(200)
39 |         .json({ message: 'Provider updated!', data: provider });
40 |     } catch (err) {
41 |       return res.status(400).json({ message: 'Something went wrong' });
42 |     }
43 |   }
44 | 
45 |   if (req.method === 'DELETE') {
46 |     try {
47 |       const provider = await prisma.provider.delete({
48 |         where: { id: id as string }
49 |       });
50 | 
51 |       return res
52 |         .status(200)
53 |         .json({ message: 'Provider deleted!', data: provider });
54 |     } catch (err) {
55 |       return res.status(400).json({ message: 'Something went wrong' });
56 |     }
57 |   }
58 | };
59 | 


--------------------------------------------------------------------------------
/pages/api/providers/index.ts:
--------------------------------------------------------------------------------
 1 | import { Prisma, Provider } from '@prisma/client';
 2 | import type { NextApiRequest, NextApiResponse } from 'next';
 3 | import { prisma } from './../../../db';
 4 | 
 5 | type ResponseData = {
 6 |   message: string;
 7 |   data?: Provider;
 8 | };
 9 | 
10 | export default async (
11 |   req: NextApiRequest,
12 |   res: NextApiResponse<ResponseData>
13 | ) => {
14 |   if (req.method === 'POST') {
15 |     try {
16 |       const { name, account } = JSON.parse(req.body);
17 | 
18 |       const data: Prisma.ProviderCreateInput = {
19 |         name,
20 |         account
21 |       };
22 | 
23 |       const provider = await prisma.provider.create({ data });
24 | 
25 |       res.status(200).json({ message: 'Provider added!', data: provider });
26 |     } catch (err) {
27 |       return res.status(400).json({ message: 'Something went wrong' });
28 |     }
29 |   } else {
30 |     res.status(400).json({ message: 'Method not supported' });
31 |   }
32 | };
33 | 


--------------------------------------------------------------------------------
/pages/campaigns.tsx:
--------------------------------------------------------------------------------
  1 | import { SpeakerphoneIcon } from '@heroicons/react/solid';
  2 | import { GetServerSideProps } from 'next';
  3 | import Head from 'next/head';
  4 | import pluralize from 'pluralize';
  5 | import { useState } from 'react';
  6 | import toast from 'react-hot-toast';
  7 | import { useMutation } from 'react-query';
  8 | import AddCampaignModal from '../components/AddCampaignModal';
  9 | import ResourceAction from '../components/ResourceAction';
 10 | import ResourceCard from '../components/ResourceCard';
 11 | import UpdateCampaignModal from '../components/UpdateCampaignModal';
 12 | import { prisma } from './../db';
 13 | 
 14 | export const getServerSideProps: GetServerSideProps = async () => {
 15 |   const campaigns = await prisma.campaign.findMany({
 16 |     include: {
 17 |       posts: {
 18 |         where: {
 19 |           publishAt: {
 20 |             gte: new Date()
 21 |           }
 22 |         },
 23 |         select: {
 24 |           id: true
 25 |         }
 26 |       }
 27 |     }
 28 |   });
 29 | 
 30 |   return {
 31 |     props: {
 32 |       campaignsData: JSON.parse(JSON.stringify(campaigns))
 33 |     }
 34 |   };
 35 | };
 36 | 
 37 | const Campaigns = ({ campaignsData }) => {
 38 |   const [campaigns, setCampaigns] = useState(campaignsData);
 39 |   const [addCampaignOpen, setAddCampaignOpen] = useState(false);
 40 |   const [campaignForEdit, setCampaignForEdit] = useState(null);
 41 | 
 42 |   const deleteCampaignMutation = useMutation(
 43 |     'deleteCampaign',
 44 |     async ({ id }: { id: string }) => {
 45 |       try {
 46 |         const response = await fetch(`./api/campaigns/${id}`, {
 47 |           method: 'DELETE'
 48 |         });
 49 | 
 50 |         if (!response.ok) {
 51 |           throw new Error('Something went wrong');
 52 |         }
 53 | 
 54 |         return await response.json();
 55 |       } catch (err) {
 56 |         throw new Error(err);
 57 |       }
 58 |     },
 59 |     {
 60 |       onSuccess: (result) => {
 61 |         toast.success(result.message);
 62 |         setCampaigns(
 63 |           campaigns.filter((provider) => provider.id !== result.data.id)
 64 |         );
 65 |       },
 66 |       onError: (err: { message: string }) => {
 67 |         toast.error(err.message);
 68 |       }
 69 |     }
 70 |   );
 71 | 
 72 |   return (
 73 |     <div>
 74 |       <Head>
 75 |         <title>Campaigns | SocialCue</title>
 76 |       </Head>
 77 |       <ResourceAction
 78 |         actionText="Add Campaign"
 79 |         emptyIcon={SpeakerphoneIcon}
 80 |         onClick={() => setAddCampaignOpen(true)}
 81 |         resourceCount={campaigns.length}
 82 |         emptyMessage="No campaigns yet"
 83 |       />
 84 | 
 85 |       {campaigns.map((campaign) => (
 86 |         <ResourceCard
 87 |           onEdit={() => setCampaignForEdit(campaign)}
 88 |           onDelete={() => {
 89 |             if (confirm('Are you sure you want to delete this campaign?')) {
 90 |               deleteCampaignMutation.mutate({ id: campaign.id });
 91 |             }
 92 |           }}
 93 |           key={campaign.id}
 94 |         >
 95 |           <p className="text-lg font-semibold text-gray-700">{campaign.name}</p>
 96 |           <div className="mb-4">
 97 |             <span className="bg-purple-200 px-2 py-1 rounded-full text-purple-800 text-xs">
 98 |               {campaign.posts ? (
 99 |                 <>
100 |                   {campaign.posts.length}{' '}
101 |                   {pluralize('Posts', campaign.posts.length)} Scheduled
102 |                 </>
103 |               ) : (
104 |                 <span>0 Posts Scheduled</span>
105 |               )}
106 |             </span>
107 |           </div>
108 |           <p className="mt-2 text-gray-600">{campaign.description}</p>
109 |         </ResourceCard>
110 |       ))}
111 | 
112 |       <AddCampaignModal
113 |         isOpen={addCampaignOpen}
114 |         onClose={() => setAddCampaignOpen(false)}
115 |         onCampaignAddSuccess={(result) => {
116 |           toast.success(result.message);
117 |           setCampaigns([...campaigns, result.data]);
118 |           setAddCampaignOpen(false);
119 |         }}
120 |         onCampaignAddError={(err) => toast.error(err)}
121 |       />
122 | 
123 |       <UpdateCampaignModal
124 |         campaign={campaignForEdit}
125 |         isOpen={!!campaignForEdit}
126 |         onClose={() => setCampaignForEdit(null)}
127 |         onCampaignUpdateSuccess={(result) => {
128 |           toast.success(result.message);
129 |           setCampaigns(
130 |             campaigns.map((campaign) => {
131 |               if (campaign.id === result.data.id) {
132 |                 return result.data;
133 |               }
134 |               return campaign;
135 |             })
136 |           );
137 |           setCampaignForEdit(null);
138 |         }}
139 |         onCampaignUpdateError={(err) => toast.error(err)}
140 |       />
141 |     </div>
142 |   );
143 | };
144 | 
145 | export default Campaigns;
146 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import { GetServerSideProps } from 'next';
  2 | import Head from 'next/head';
  3 | import { useState } from 'react';
  4 | import { Calendar } from 'react-big-calendar';
  5 | import toast from 'react-hot-toast';
  6 | import AddPostModal from '../components/AddPostModal';
  7 | import CalendarEvent from '../components/CalendarEvent';
  8 | import UpdatePostModal from '../components/UpdatePostModal';
  9 | import { localizer } from '../lib/util';
 10 | import { prisma } from './../db';
 11 | 
 12 | export const getServerSideProps: GetServerSideProps = async () => {
 13 |   const posts = await prisma.post.findMany({
 14 |     include: {
 15 |       provider: true,
 16 |       campaigns: true
 17 |     }
 18 |   });
 19 |   const providers = await prisma.provider.findMany();
 20 |   const campaigns = await prisma.campaign.findMany();
 21 |   return {
 22 |     props: {
 23 |       posts: JSON.parse(JSON.stringify(posts)),
 24 |       providers: JSON.parse(JSON.stringify(providers)),
 25 |       campaigns: JSON.parse(JSON.stringify(campaigns))
 26 |     }
 27 |   };
 28 | };
 29 | 
 30 | const Index = ({ posts, providers, campaigns }) => {
 31 |   const [events, setEvents] = useState(
 32 |     posts.map((p) => ({
 33 |       ...p,
 34 |       start: p.publishAt,
 35 |       end: p.publishAt
 36 |     }))
 37 |   );
 38 | 
 39 |   const [newPost, setNewPost] = useState(null);
 40 |   const [postToUpdate, setPostToUpdate] = useState(null);
 41 | 
 42 |   return (
 43 |     <div>
 44 |       <Head>
 45 |         <title>Schedule | SocialCue</title>
 46 |       </Head>
 47 |       <div className="p-8 -m-8 overflow-scroll">
 48 |         <Calendar
 49 |           className="shadow-lg p-4 rounded-xl bg-gradient-to-br from-purple-50 via-white to-purple-50 min-w-max"
 50 |           localizer={localizer}
 51 |           events={events}
 52 |           startAccessor="start"
 53 |           endAccessor="end"
 54 |           style={{ minHeight: '1000px', minWidth: '800px' }}
 55 |           components={{
 56 |             event: CalendarEvent
 57 |           }}
 58 |           selectable
 59 |           onSelectSlot={(slot) => setNewPost(slot.start)}
 60 |           onDrillDown={(date) => setNewPost(date)}
 61 |           onSelectEvent={(event) => setPostToUpdate(event)}
 62 |           views={['month']}
 63 |         />
 64 |       </div>
 65 | 
 66 |       <AddPostModal
 67 |         isOpen={!!newPost}
 68 |         date={new Date(newPost)}
 69 |         onClose={() => setNewPost(null)}
 70 |         onAddPostSuccess={(result) => {
 71 |           toast.success(result.message);
 72 |           setEvents([
 73 |             ...events,
 74 |             {
 75 |               ...result.data,
 76 |               start: result.data.publishAt,
 77 |               end: result.data.publishAt
 78 |             }
 79 |           ]);
 80 |           setNewPost(null);
 81 |         }}
 82 |         onAddPostError={(err) => toast.error(err)}
 83 |         providers={providers}
 84 |         campaigns={campaigns}
 85 |       />
 86 | 
 87 |       <UpdatePostModal
 88 |         onClose={() => setPostToUpdate(null)}
 89 |         onUpdatePostSuccess={(result) => {
 90 |           toast.success(result.message);
 91 |           setEvents(
 92 |             events.map((event) => {
 93 |               if (event.id === result.data.id) {
 94 |                 return {
 95 |                   ...result.data,
 96 |                   start: result.data.publishAt,
 97 |                   end: result.data.publishAt
 98 |                 };
 99 |               }
100 |               return event;
101 |             })
102 |           );
103 | 
104 |           setPostToUpdate(null);
105 |         }}
106 |         onUpdatePostError={(err) => toast.error(err)}
107 |         onDeletePostSuccess={(result) => {
108 |           toast.success(result.message);
109 |           setEvents(events.filter((event) => event.id !== postToUpdate.id));
110 |           setPostToUpdate(null);
111 |         }}
112 |         onDeletePostError={(err) => toast.error(err)}
113 |         providers={providers}
114 |         campaigns={campaigns}
115 |         post={postToUpdate}
116 |       />
117 |     </div>
118 |   );
119 | };
120 | 
121 | export default Index;
122 | 


--------------------------------------------------------------------------------
/pages/providers.tsx:
--------------------------------------------------------------------------------
  1 | import { ChatAlt2Icon } from '@heroicons/react/outline';
  2 | import { GetServerSideProps } from 'next';
  3 | import Head from 'next/head';
  4 | import Image from 'next/image';
  5 | import { useState } from 'react';
  6 | import toast from 'react-hot-toast';
  7 | import { useMutation } from 'react-query';
  8 | import AddProviderModal from '../components/AddProviderModal';
  9 | import ResourceAction from '../components/ResourceAction';
 10 | import ResourceCard from '../components/ResourceCard';
 11 | import UpdateProviderModal from '../components/UpdateProviderModal';
 12 | import { providerOptions } from '../lib/providers';
 13 | import { prisma } from './../db';
 14 | 
 15 | export const getServerSideProps: GetServerSideProps = async () => {
 16 |   const providers = await prisma.provider.findMany();
 17 |   return {
 18 |     props: {
 19 |       providers: JSON.parse(JSON.stringify(providers))
 20 |     }
 21 |   };
 22 | };
 23 | 
 24 | const Providers = ({ providers }) => {
 25 |   const [socialProviders, setSocialProviders] = useState(providers);
 26 |   const [addProviderOpen, setAddProviderOpen] = useState(false);
 27 |   const [providerToEdit, setProviderToEdit] = useState(null);
 28 | 
 29 |   const deleteProviderMutation = useMutation(
 30 |     'deleteProvider',
 31 |     async ({ id }: { id: string }) => {
 32 |       try {
 33 |         const response = await fetch(`./api/providers/${id}`, {
 34 |           method: 'DELETE'
 35 |         });
 36 | 
 37 |         if (!response.ok) {
 38 |           throw new Error('Something went wrong');
 39 |         }
 40 | 
 41 |         return await response.json();
 42 |       } catch (err) {
 43 |         throw new Error(err);
 44 |       }
 45 |     },
 46 |     {
 47 |       onSuccess: (result) => {
 48 |         toast.success(result.message);
 49 |         setSocialProviders(
 50 |           socialProviders.filter((provider) => provider.id !== result.data.id)
 51 |         );
 52 |         setAddProviderOpen(false);
 53 |       },
 54 |       onError: (err: { message: string }) => {
 55 |         toast.error(err.message);
 56 |       }
 57 |     }
 58 |   );
 59 | 
 60 |   return (
 61 |     <div>
 62 |       <Head>
 63 |         <title>Providers | SocialCue</title>
 64 |       </Head>
 65 |       <ResourceAction
 66 |         actionText="Add Provider"
 67 |         emptyIcon={ChatAlt2Icon}
 68 |         onClick={() => setAddProviderOpen(true)}
 69 |         resourceCount={socialProviders.length}
 70 |         emptyMessage="No providers yet"
 71 |       />
 72 |       {socialProviders.map((provider) => (
 73 |         <ResourceCard
 74 |           onEdit={() => setProviderToEdit(provider)}
 75 |           onDelete={() => {
 76 |             if (confirm('Are you sure you want to delete this provider?')) {
 77 |               deleteProviderMutation.mutate({ id: provider.id });
 78 |             }
 79 |           }}
 80 |           key={provider.id}
 81 |         >
 82 |           <div className="flex mb-2 py-2">
 83 |             <Image
 84 |               width="25"
 85 |               height="25"
 86 |               objectFit="contain"
 87 |               alt={`${provider.name} logo`}
 88 |               src={`/${provider.name}.png`}
 89 |             />
 90 |             <div className="flex">
 91 |               <p className="text-gray-600 my-auto ml-2">{provider.name}</p>
 92 |             </div>
 93 |           </div>
 94 |           <a
 95 |             href={`https://${provider.name}.com/${provider.account}`}
 96 |             target="_blank"
 97 |             className="text-lg font-semibold text-violet hover:underline"
 98 |           >
 99 |             @{provider.account}
100 |           </a>
101 |         </ResourceCard>
102 |       ))}
103 | 
104 |       <AddProviderModal
105 |         isOpen={addProviderOpen}
106 |         providerOptions={providerOptions}
107 |         onClose={() => setAddProviderOpen(false)}
108 |         onProviderAddSuccess={(result) => {
109 |           toast.success(result.message);
110 |           setSocialProviders([...socialProviders, result.data]);
111 |           setAddProviderOpen(false);
112 |         }}
113 |         onProviderAddError={(err) => {
114 |           toast.error(err);
115 |         }}
116 |       />
117 | 
118 |       <UpdateProviderModal
119 |         isOpen={!!providerToEdit}
120 |         provider={providerToEdit}
121 |         providerOptions={providerOptions}
122 |         onClose={() => setProviderToEdit(null)}
123 |         onProviderUpdateSuccess={(result) => {
124 |           toast.success(result.message);
125 |           setSocialProviders(
126 |             socialProviders.map((provider) => {
127 |               if (provider.id === result.data.id) {
128 |                 return result.data;
129 |               }
130 |               return provider;
131 |             })
132 |           );
133 |           setProviderToEdit(null);
134 |           setAddProviderOpen(false);
135 |         }}
136 |         onProviderUpdateError={(err) => toast.error(err)}
137 |       />
138 |     </div>
139 |   );
140 | };
141 | 
142 | export default Providers;
143 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | // If you want to use other PostCSS plugins, see the following:
2 | // https://tailwindcss.com/docs/using-with-preprocessors
3 | module.exports = {
4 |   plugins: {
5 |     tailwindcss: {},
6 |     autoprefixer: {}
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   trailingComma: 'none',
3 |   tabWidth: 2,
4 |   semi: true,
5 |   singleQuote: true
6 | };
7 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "sqlite"
10 |   url      = env("DATABASE_URL")
11 | }
12 | 
13 | model Post {
14 |   id         String     @id @default(cuid())
15 |   body       String
16 |   publishAt  DateTime
17 |   provider   Provider?  @relation(fields: [providerId], references: [id])
18 |   providerId String?
19 |   campaigns  Campaign[]
20 |   createdAt  DateTime   @default(now())
21 |   updatedAt  DateTime   @default(now())
22 | }
23 | 
24 | model Provider {
25 |   id        String   @id @default(cuid())
26 |   name      String
27 |   account   String
28 |   posts     Post[]
29 |   createdAt DateTime @default(now())
30 |   updatedAt DateTime @default(now())
31 | }
32 | 
33 | model Campaign {
34 |   id          String   @id @default(cuid())
35 |   name        String
36 |   description String
37 |   posts       Post[]
38 |   createdAt   DateTime @default(now())
39 |   updatedAt   DateTime @default(now())
40 | }
41 | 


--------------------------------------------------------------------------------
/prisma/seed.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient, Prisma } from '@prisma/client';
 2 | 
 3 | const prisma = new PrismaClient();
 4 | 
 5 | const data: Prisma.ProviderUncheckedCreateInput[] = [
 6 |   {
 7 |     name: 'Twitter',
 8 |     account: 'courselift',
 9 |     posts: {
10 |       create: [
11 |         {
12 |           body: 'My first post',
13 |           publishAt: new Date(),
14 |           campaigns: {
15 |             create: [
16 |               {
17 |                 name: 'My first campaign',
18 |                 description: 'This is a Twitter campaign for Twitter'
19 |               }
20 |             ]
21 |           }
22 |         }
23 |       ]
24 |     }
25 |   }
26 | ];
27 | 
28 | async function main() {
29 |   await prisma.provider.deleteMany();
30 |   await prisma.campaign.deleteMany();
31 |   await prisma.post.deleteMany();
32 | 
33 |   for (let item of data) {
34 |     await prisma.provider.create({ data: item });
35 |   }
36 | }
37 | 
38 | main()
39 |   .catch((e) => {
40 |     console.error(e);
41 |     process.exit(1);
42 |   })
43 |   .finally(async () => {
44 |     await prisma.$disconnect();
45 |   });
46 | 


--------------------------------------------------------------------------------
/public/Facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenkie/socialcue/49f2c6ff48ae20b1602688c35e5b75dd1b8c6396/public/Facebook.png


--------------------------------------------------------------------------------
/public/Instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenkie/socialcue/49f2c6ff48ae20b1602688c35e5b75dd1b8c6396/public/Instagram.png


--------------------------------------------------------------------------------
/public/LinkedIn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenkie/socialcue/49f2c6ff48ae20b1602688c35e5b75dd1b8c6396/public/LinkedIn.png


--------------------------------------------------------------------------------
/public/Twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenkie/socialcue/49f2c6ff48ae20b1602688c35e5b75dd1b8c6396/public/Twitter.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenkie/socialcue/49f2c6ff48ae20b1602688c35e5b75dd1b8c6396/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="SvgjsSvg1001" width="475" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1002"></defs><rect id="SvgjsRect1008" width="475" height="300" fill="#ffffff"></rect><g id="SvgjsG1013" transform="matrix(1,0,0,1,187.38625144958496,127.56399536132812)"><path id="SvgjsPath1014" d="M19.476000009536744 20.015999526977538Q19.476000009536744 22.28399952697754 18.783000009536742 23.948999526977538Q18.090000009536745 25.61399952697754 16.79400000953674 26.70299952697754Q15.498000009536742 27.791999526977538 13.617000009536744 28.33199952697754Q11.736000009536744 28.87199952697754 9.360000009536742 28.87199952697754Q4.086000009536743 28.87199952697754 0.10800000953674327 26.96399952697754Q1.2060000095367434 24.22799952697754 1.8360000095367432 21.95999952697754Q1.9440000095367433 21.58199952697754 2.052000009536743 21.311999526977537L4.752000009536743 21.97799952697754Q5.238000009536743 22.085999526977538 5.796000009536743 22.21199952697754Q6.354000009536743 22.33799952697754 6.912000009536744 22.436999526977537Q7.470000009536744 22.53599952697754 7.974000009536743 22.60799952697754Q8.478000009536743 22.67999952697754 8.856000009536743 22.67999952697754Q9.468000009536743 22.67999952697754 10.035000009536743 22.634999526977538Q10.602000009536743 22.58999952697754 11.034000009536744 22.427999526977537Q11.466000009536744 22.265999526977538 11.727000009536743 21.95999952697754Q11.988000009536742 21.65399952697754 11.988000009536742 21.131999526977538Q11.988000009536742 20.50199952697754 11.394000009536743 20.06999952697754Q10.800000009536744 19.637999526977538 9.909000009536744 19.29599952697754Q9.018000009536744 18.95399952697754 7.9560000095367425 18.674999526977537Q6.894000009536743 18.39599952697754 5.976000009536743 18.07199952697754Q4.698000009536743 17.67599952697754 3.6000000095367435 16.991999526977537Q2.502000009536743 16.30799952697754 1.701000009536743 15.36299952697754Q0.9000000095367433 14.417999526977539 0.45000000953674313 13.22099952697754Q9.536743172944284e-9 12.02399952697754 9.536743172944284e-9 10.58399952697754Q9.536743172944284e-9 2.3759995269775374 9.864000009536744 2.3759995269775374Q14.544000009536743 2.3759995269775374 18.57600000953674 4.31999952697754L16.596000009536745 9.827999526977539Q14.850000009536743 9.37799952697754 13.833000009536743 9.11699952697754Q12.816000009536744 8.855999526977538 12.204000009536744 8.72999952697754Q11.592000009536743 8.603999526977539 11.232000009536744 8.567999526977538Q10.872000009536743 8.53199952697754 10.476000009536744 8.53199952697754L9.864000009536744 8.53199952697754Q9.666000009536743 8.53199952697754 9.531000009536744 8.52299952697754Q9.396000009536744 8.513999526977539 9.270000009536743 8.513999526977539Q8.460000009536744 8.513999526977539 8.028000009536743 8.756999526977538Q7.596000009536743 8.99999952697754 7.596000009536743 9.75599952697754Q7.596000009536743 10.88999952697754 9.576000009536743 11.483999526977538Q14.454000009536744 12.617999526977538 16.965000009536745 14.777999526977538Q19.476000009536744 16.93799952697754 19.476000009536744 20.015999526977538ZM28.710000009536742 19.043999526977537Q28.710000009536742 20.05199952697754 29.007000009536743 20.80799952697754Q29.304000009536743 21.56399952697754 29.790000009536744 22.067999526977538Q30.276000009536745 22.57199952697754 30.90600000953674 22.823999526977538Q31.536000009536743 23.07599952697754 32.184000009536746 23.07599952697754Q32.83200000953674 23.07599952697754 33.453000009536744 22.823999526977538Q34.074000009536746 22.57199952697754 34.569000009536744 22.067999526977538Q35.06400000953674 21.56399952697754 35.361000009536745 20.80799952697754Q35.65800000953674 20.05199952697754 35.65800000953674 19.043999526977537Q35.65800000953674 18.03599952697754 35.361000009536745 17.27999952697754Q35.06400000953674 16.52399952697754 34.569000009536744 16.02899952697754Q34.074000009536746 15.533999526977539 33.453000009536744 15.28199952697754Q32.83200000953674 15.029999526977539 32.184000009536746 15.029999526977539Q31.536000009536743 15.029999526977539 30.90600000953674 15.28199952697754Q30.276000009536745 15.533999526977539 29.790000009536744 16.02899952697754Q29.304000009536743 16.52399952697754 29.007000009536743 17.27999952697754Q28.710000009536742 18.03599952697754 28.710000009536742 19.043999526977537ZM21.510000009536743 19.043999526977537Q21.600000009536743 16.72199952697754 22.473000009536744 14.95799952697754Q23.346000009536745 13.193999526977539 24.786000009536743 11.98799952697754Q26.226000009536744 10.78199952697754 28.125000009536745 10.169999526977538Q30.024000009536742 9.55799952697754 32.166000009536745 9.55799952697754Q34.50600000953674 9.55799952697754 36.450000009536744 10.259999526977538Q38.39400000953675 10.96199952697754 39.79800000953674 12.21299952697754Q41.20200000953675 13.463999526977538 41.97600000953674 15.209999526977539Q42.75000000953674 16.95599952697754 42.75000000953674 19.043999526977537Q42.75000000953674 20.73599952697754 42.309000009536746 22.10399952697754Q41.86800000953674 23.47199952697754 41.11200000953674 24.52499952697754Q40.35600000953674 25.57799952697754 39.33000000953675 26.35199952697754Q38.30400000953674 27.125999526977537 37.11600000953674 27.62099952697754Q35.928000009536746 28.11599952697754 34.65900000953674 28.349999526977538Q33.39000000953674 28.58399952697754 32.130000009536744 28.58399952697754Q29.754000009536743 28.58399952697754 27.801000009536743 27.890999526977538Q25.848000009536744 27.19799952697754 24.444000009536744 25.93799952697754Q23.040000009536744 24.67799952697754 22.275000009536743 22.922999526977538Q21.510000009536743 21.16799952697754 21.510000009536743 19.043999526977537ZM60.282000009536745 11.05199952697754L59.562000009536746 15.947999526977538Q57.61800000953674 15.335999526977538 55.962000009536744 15.335999526977538Q55.11600000953674 15.335999526977538 54.441000009536744 15.60599952697754Q53.76600000953675 15.87599952697754 53.28900000953674 16.36199952697754Q52.812000009536746 16.84799952697754 52.55100000953674 17.540999526977537Q52.29000000953674 18.23399952697754 52.29000000953674 19.079999526977538Q52.29000000953674 19.92599952697754 52.55100000953674 20.61899952697754Q52.812000009536746 21.311999526977537 53.29800000953674 21.81599952697754Q53.78400000953674 22.31999952697754 54.477000009536745 22.58999952697754Q55.17000000953674 22.85999952697754 56.03400000953674 22.85999952697754Q57.672000009536745 22.85999952697754 59.49000000953674 22.247999526977537L60.21000000953674 27.39599952697754Q58.824000009536746 28.11599952697754 57.501000009536746 28.349999526977538Q56.178000009536746 28.58399952697754 54.630000009536744 28.58399952697754Q52.45200000953675 28.58399952697754 50.61600000953674 27.89999952697754Q48.78000000953674 27.21599952697754 47.44800000953674 25.97399952697754Q46.11600000953674 24.73199952697754 45.36900000953674 22.97699952697754Q44.62200000953674 21.22199952697754 44.62200000953674 19.079999526977538Q44.62200000953674 16.93799952697754 45.43200000953674 15.18299952697754Q46.242000009536746 13.427999526977539 47.61900000953674 12.17699952697754Q48.99600000953674 10.925999526977538 50.81400000953674 10.24199952697754Q52.632000009536746 9.55799952697754 54.630000009536744 9.55799952697754Q55.51200000953674 9.55799952697754 56.22300000953674 9.620999526977538Q56.934000009536746 9.68399952697754 57.58200000953674 9.85499952697754Q58.230000009536745 10.02599952697754 58.87800000953674 10.31399952697754Q59.526000009536745 10.60199952697754 60.282000009536745 11.05199952697754ZM62.712000009536744 3.707999526977538Q62.712000009536744 2.8979995269775394 63.06300000953674 2.2139995269775383Q63.41400000953675 1.5299995269775408 63.99000000953674 1.0349995269775398Q64.56600000953674 0.5399995269775388 65.32200000953674 0.26999952697753926Q66.07800000953674 -4.730224603122224e-7 66.88800000953674 -4.730224603122224e-7Q67.82400000953675 -4.730224603122224e-7 68.58900000953675 0.3329995269775381Q69.35400000953675 0.6659995269775401 69.89400000953674 1.1969995269775389Q70.43400000953675 1.7279995269775377 70.73100000953674 2.3849995269775377Q71.02800000953674 3.0419995269775377 71.02800000953674 3.707999526977538Q71.02800000953674 4.5359995269775375 70.68600000953674 5.2199995269775386Q70.34400000953674 5.90399952697754 69.76800000953675 6.398999526977541Q69.19200000953674 6.893999526977538 68.44500000953674 7.172999526977538Q67.69800000953674 7.451999526977538 66.88800000953674 7.451999526977538Q66.00600000953675 7.451999526977538 65.24100000953675 7.163999526977538Q64.47600000953675 6.875999526977537 63.91800000953674 6.362999526977539Q63.36000000953675 5.849999526977538 63.03600000953675 5.17499952697754Q62.712000009536744 4.49999952697754 62.712000009536744 3.707999526977538ZM73.83600000953675 22.175999526977538L74.23200000953675 27.323999526977538Q72.05400000953674 28.58399952697754 69.40800000953675 28.58399952697754Q67.84200000953675 28.58399952697754 66.61800000953674 28.061999526977537Q65.39400000953674 27.53999952697754 64.55700000953674 26.576999526977538Q63.72000000953675 25.61399952697754 63.288000009536745 24.24599952697754Q62.85600000953674 22.87799952697754 62.85600000953674 21.20399952697754L62.85600000953674 9.827999526977539L70.66800000953674 9.827999526977539L70.66800000953674 20.84399952697754Q70.66800000953674 21.72599952697754 71.13600000953674 22.16699952697754Q71.60400000953675 22.60799952697754 72.32400000953675 22.60799952697754Q73.04400000953675 22.60799952697754 73.83600000953675 22.175999526977538ZM90.55800000953674 28.29599952697754L90.55800000953674 24.875999526977537Q89.69400000953674 26.675999526977538 88.21800000953674 27.62999952697754Q86.74200000953674 28.58399952697754 84.51000000953674 28.58399952697754Q82.71000000953674 28.58399952697754 81.07200000953674 27.85499952697754Q79.43400000953675 27.125999526977537 78.19200000953674 25.83899952697754Q76.95000000953674 24.55199952697754 76.21200000953674 22.78799952697754Q75.47400000953674 21.02399952697754 75.47400000953674 18.95399952697754Q75.47400000953674 16.90199952697754 76.22100000953674 15.17399952697754Q76.96800000953674 13.44599952697754 78.21900000953674 12.19499952697754Q79.47000000953675 10.943999526977539 81.09900000953674 10.250999526977537Q82.72800000953674 9.55799952697754 84.51000000953674 9.55799952697754Q85.42800000953675 9.55799952697754 86.31900000953674 9.800999526977538Q87.21000000953674 10.04399952697754 88.01100000953674 10.574999526977539Q88.81200000953675 11.105999526977538 89.46900000953674 11.91599952697754Q90.12600000953674 12.725999526977539 90.55800000953674 13.85999952697754L90.55800000953674 9.55799952697754L98.29800000953675 9.55799952697754L98.29800000953675 28.29599952697754L90.55800000953674 28.29599952697754ZM90.55800000953674 19.22399952697754L90.55800000953674 18.93599952697754Q90.52200000953674 18.21599952697754 90.21600000953674 17.567999526977538Q89.91000000953674 16.91999952697754 89.41500000953674 16.442999526977538Q88.92000000953675 15.965999526977539 88.27200000953674 15.686999526977539Q87.62400000953674 15.40799952697754 86.92200000953675 15.40799952697754Q86.13000000953674 15.40799952697754 85.45500000953675 15.70499952697754Q84.78000000953675 16.00199952697754 84.28500000953674 16.49699952697754Q83.79000000953674 16.991999526977537 83.50200000953674 17.65799952697754Q83.21400000953675 18.323999526977538 83.21400000953675 19.079999526977538Q83.21400000953675 19.87199952697754 83.52000000953674 20.54699952697754Q83.82600000953674 21.22199952697754 84.33900000953675 21.707999526977538Q84.85200000953674 22.19399952697754 85.51800000953675 22.47299952697754Q86.18400000953675 22.75199952697754 86.92200000953675 22.75199952697754Q87.67800000953675 22.75199952697754 88.32600000953674 22.46399952697754Q88.97400000953674 22.175999526977538 89.46000000953674 21.689999526977537Q89.94600000953675 21.20399952697754 90.23400000953674 20.564999526977537Q90.52200000953674 19.92599952697754 90.55800000953674 19.22399952697754ZM113.77800000953674 22.175999526977538L114.06600000953674 27.323999526977538Q111.56400000953674 28.58399952697754 108.52200000953674 28.58399952697754Q106.95600000953674 28.58399952697754 105.73200000953675 28.070999526977538Q104.50800000953674 27.55799952697754 103.67100000953674 26.59499952697754Q102.83400000953674 25.631999526977538 102.40200000953675 24.27299952697754Q101.97000000953675 22.91399952697754 101.97000000953675 21.20399952697754L101.97000000953675 3.9959995269775384L109.74600000953674 2.8439995269775373L109.74600000953674 20.66399952697754Q109.74600000953674 21.65399952697754 110.37600000953674 22.13099952697754Q111.00600000953675 22.60799952697754 112.08600000953675 22.60799952697754Q112.91400000953675 22.60799952697754 113.77800000953674 22.175999526977538ZM129.40200000953675 22.21199952697754Q130.03200000953674 22.21199952697754 130.57200000953674 22.14899952697754Q131.11200000953676 22.085999526977538 131.64300000953673 21.95999952697754Q132.17400000953674 21.83399952697754 132.73200000953673 21.63599952697754Q133.29000000953675 21.43799952697754 133.97400000953675 21.16799952697754L134.98200000953673 27.01799952697754Q131.77800000953675 28.87199952697754 127.99800000953675 28.87199952697754Q122.65200000953675 28.87199952697754 118.83600000953675 25.271999526977538Q114.84000000953674 21.52799952697754 114.78600000953675 15.60599952697754Q114.78600000953675 12.725999526977539 115.77600000953674 10.295999526977539Q116.76600000953674 7.865999526977539 118.51200000953675 6.11099952697754Q120.25800000953674 4.355999526977538 122.63400000953675 3.3749995269775397Q125.01000000953674 2.393999526977538 127.78200000953674 2.393999526977538Q131.72400000953675 2.393999526977538 134.94600000953673 4.22999952697754L133.97400000953675 9.95399952697754Q131.32800000953674 8.945999526977538 129.18600000953674 8.945999526977538Q126.18000000953674 8.945999526977538 124.62300000953674 10.68299952697754Q123.06600000953674 12.41999952697754 123.06600000953674 15.569999526977538Q123.06600000953674 17.13599952697754 123.48900000953674 18.36899952697754Q123.91200000953674 19.601999526977536 124.72200000953674 20.45699952697754Q125.53200000953674 21.311999526977537 126.71100000953675 21.76199952697754Q127.89000000953675 22.21199952697754 129.40200000953675 22.21199952697754ZM145.04400000953675 9.827999526977539L145.04400000953675 20.62799952697754Q145.04400000953675 21.113999526977537 145.23300000953674 21.518999526977538Q145.42200000953673 21.92399952697754 145.75500000953673 22.21199952697754Q146.08800000953676 22.49999952697754 146.52900000953673 22.66199952697754Q146.97000000953673 22.823999526977538 147.45600000953675 22.823999526977538Q147.92400000953674 22.823999526977538 148.33800000953676 22.65299952697754Q148.75200000953674 22.48199952697754 149.05800000953676 22.18499952697754Q149.36400000953674 21.887999526977538 149.54400000953675 21.491999526977537Q149.72400000953675 21.09599952697754 149.72400000953675 20.62799952697754L149.72400000953675 9.827999526977539L157.17600000953675 9.827999526977539L157.17600000953675 20.375999526977537Q157.17600000953675 22.28399952697754 156.43800000953675 23.80499952697754Q155.70000000953675 25.32599952697754 154.39500000953674 26.387999526977538Q153.09000000953674 27.44999952697754 151.30800000953676 28.01699952697754Q149.52600000953674 28.58399952697754 147.42000000953675 28.58399952697754Q145.35000000953676 28.58399952697754 143.53200000953674 28.03499952697754Q141.71400000953673 27.48599952697754 140.36400000953674 26.43299952697754Q139.01400000953674 25.37999952697754 138.23100000953676 23.84999952697754Q137.44800000953674 22.31999952697754 137.44800000953674 20.375999526977537L137.44800000953674 9.827999526977539L145.04400000953675 9.827999526977539ZM171.46800000953675 23.41799952697754Q173.98800000953673 23.41799952697754 176.90400000953673 22.12199952697754L177.80400000953674 27.07199952697754Q174.45600000953675 28.58399952697754 170.28000000953674 28.58399952697754Q167.95800000953673 28.58399952697754 166.04100000953673 27.87299952697754Q164.12400000953673 27.16199952697754 162.74700000953675 25.89299952697754Q161.37000000953674 24.62399952697754 160.60500000953675 22.87799952697754Q159.84000000953674 21.131999526977538 159.84000000953674 19.079999526977538Q159.84000000953674 16.91999952697754 160.64100000953675 15.164999526977539Q161.44200000953674 13.40999952697754 162.82800000953674 12.158999526977539Q164.21400000953673 10.907999526977537 166.06800000953675 10.23299952697754Q167.92200000953673 9.55799952697754 170.02800000953675 9.55799952697754Q172.15200000953675 9.55799952697754 173.75400000953675 10.268999526977538Q175.35600000953676 10.97999952697754 176.42700000953675 12.21299952697754Q177.49800000953675 13.44599952697754 178.02900000953673 15.09299952697754Q178.56000000953674 16.73999952697754 178.56000000953674 18.61199952697754Q178.56000000953674 18.863999526977537 178.54200000953674 19.09799952697754Q178.52400000953673 19.33199952697754 178.48800000953673 19.54799952697754L167.43600000953674 20.98799952697754Q167.86800000953673 22.28399952697754 168.87600000953674 22.85099952697754Q169.88400000953675 23.41799952697754 171.46800000953675 23.41799952697754ZM167.11200000953676 17.60399952697754L172.83600000953675 16.34399952697754Q172.20600000953675 14.039999526977539 170.02800000953675 14.039999526977539Q169.34400000953676 14.039999526977539 168.80400000953674 14.309999526977538Q168.26400000953674 14.57999952697754 167.89500000953674 15.056999526977538Q167.52600000953674 15.533999526977539 167.32800000953674 16.19099952697754Q167.13000000953673 16.84799952697754 167.11200000953676 17.60399952697754Z " fill="#7a0bdd"></path></g><g id="SvgjsG1015" transform="matrix(1,0,0,1,57.38625144958496,62)"><path id="color_1" d="M108.79747,53.00875H74.0717a2.61837,2.61837,0,0,0-2.6163,2.615v7.2783H64.1771a2.61837,2.61837,0,0,0-2.615,2.6163v7.2783h-7.2783a2.61836,2.61836,0,0,0-2.6163,2.615v33.96454a2.61919,2.61919,0,0,0,2.6163,2.615H89.00955a2.61809,2.61809,0,0,0,2.615-2.615v-7.2783h7.2783a2.61864,2.61864,0,0,0,2.6163-2.6163v-7.277h7.2783a2.61917,2.61917,0,0,0,2.615-2.6163V55.62377A2.61808,2.61808,0,0,0,108.79747,53.00875ZM91.43394,60.905a5.42514,5.42514,0,1,1-5.42578,5.42578A5.42617,5.42617,0,0,1,91.43394,60.905Zm10.20165,24.83885a.85777.85777,0,0,1-.85845.85845H82.09075a.85859.85859,0,0,1-.85845-.85845v-.513a10.20165,10.20165,0,1,1,20.40329,0Z" fill="#7a0bdd"></path></g></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/calendar.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | .rbc-btn {
  3 |   color: inherit;
  4 |   font: inherit;
  5 |   margin: 0;
  6 | }
  7 | 
  8 | button.rbc-btn {
  9 |   overflow: visible;
 10 |   text-transform: none;
 11 |   -webkit-appearance: button;
 12 |   cursor: pointer;
 13 | }
 14 | 
 15 | button[disabled].rbc-btn {
 16 |   cursor: not-allowed;
 17 | }
 18 | 
 19 | button.rbc-input::-moz-focus-inner {
 20 |   border: 0;
 21 |   padding: 0;
 22 | }
 23 | 
 24 | .rbc-calendar {
 25 |   box-sizing: border-box;
 26 |   height: 100%;
 27 |   display: flex;
 28 |   flex-direction: column;
 29 |   align-items: stretch;
 30 | }
 31 | 
 32 | .rbc-calendar *,
 33 | .rbc-calendar *:before,
 34 | .rbc-calendar *:after {
 35 |   box-sizing: inherit;
 36 | }
 37 | 
 38 | .rbc-abs-full,
 39 | .rbc-row-bg {
 40 |   overflow: hidden;
 41 |   position: absolute;
 42 |   top: 0;
 43 |   left: 0;
 44 |   right: 0;
 45 |   bottom: 0;
 46 | }
 47 | 
 48 | .rbc-ellipsis,
 49 | .rbc-event-label,
 50 | .rbc-row-segment .rbc-event-content,
 51 | .rbc-show-more {
 52 |   display: block;
 53 |   overflow: hidden;
 54 |   text-overflow: ellipsis;
 55 |   white-space: nowrap;
 56 | }
 57 | 
 58 | .rbc-rtl {
 59 |   direction: rtl;
 60 | }
 61 | 
 62 | .rbc-off-range {
 63 |   color: #999999;
 64 | }
 65 | 
 66 | .rbc-off-range-bg {
 67 |   background: rgba(112, 26, 213, 0.07);
 68 |   border-bottom-left-radius: 6px;
 69 |   border-bottom-right-radius: 6px;
 70 | }
 71 | 
 72 | .rbc-header {
 73 |   overflow: hidden;
 74 |   flex: 1 0 0%;
 75 |   text-overflow: ellipsis;
 76 |   white-space: nowrap;
 77 |   padding: 0 3px;
 78 |   text-align: center;
 79 |   vertical-align: middle;
 80 |   font-weight: bold;
 81 |   font-size: 90%;
 82 |   min-height: 0;
 83 | }
 84 | 
 85 | .rbc-rtl .rbc-header + .rbc-header {
 86 |   border-left-width: 0;
 87 |   border-right: 1px solid #ddd;
 88 | }
 89 | .rbc-header > a,
 90 | .rbc-header > a:active,
 91 | .rbc-header > a:visited {
 92 |   color: inherit;
 93 |   text-decoration: none;
 94 | }
 95 | 
 96 | .rbc-row-content {
 97 |   position: relative;
 98 |   user-select: none;
 99 |   -webkit-user-select: none;
100 |   z-index: 4;
101 | }
102 | 
103 | .rbc-row-content-scrollable {
104 |   display: flex;
105 |   flex-direction: column;
106 |   height: 100%;
107 | }
108 | .rbc-row-content-scrollable .rbc-row-content-scroll-container {
109 |   height: 100%;
110 |   overflow-y: scroll;
111 |   /* Hide scrollbar for Chrome, Safari and Opera */
112 |   -ms-overflow-style: none;
113 |   /* IE and Edge */
114 |   scrollbar-width: none;
115 |   /* Firefox */
116 | }
117 | .rbc-row-content-scrollable
118 |   .rbc-row-content-scroll-container::-webkit-scrollbar {
119 |   display: none;
120 | }
121 | 
122 | .rbc-toolbar {
123 |   display: flex;
124 |   flex-direction: row-reverse;
125 |   flex-wrap: wrap;
126 |   justify-content: center;
127 |   align-items: center;
128 |   margin-bottom: 20px;
129 |   font-size: 16px;
130 |   justify-content: space-between;
131 |   padding: 0 6px;
132 | }
133 | 
134 | .rbc-toolbar .rbc-btn-group:last-child {
135 |   display: none;
136 | }
137 | 
138 | .rbc-toolbar .rbc-toolbar-label {
139 |   justify-content: space-between;
140 |   text-align: center;
141 |   font-size: 22px;
142 |   font-family: 'Paytone One', sans-serif;
143 |   border-bottom: 3px solid #701ad5;
144 |   display: block;
145 | }
146 | .rbc-toolbar button {
147 |   color: #373a3c;
148 |   display: inline-block;
149 |   margin: 0;
150 |   text-align: center;
151 |   vertical-align: middle;
152 |   background: none;
153 |   background-image: none;
154 |   border: 1px solid #ccc;
155 |   padding: 0.375rem 1rem;
156 |   border-radius: 4px;
157 |   line-height: normal;
158 |   white-space: nowrap;
159 | }
160 | .rbc-toolbar button:active,
161 | .rbc-toolbar button.rbc-active {
162 |   background-image: none;
163 |   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
164 |   background-color: #e6e6e6;
165 |   border-color: #adadad;
166 | }
167 | .rbc-toolbar button:active:hover,
168 | .rbc-toolbar button:active:focus,
169 | .rbc-toolbar button.rbc-active:hover,
170 | .rbc-toolbar button.rbc-active:focus {
171 |   color: #373a3c;
172 |   background-color: #d4d4d4;
173 |   border-color: #8c8c8c;
174 | }
175 | .rbc-toolbar button:focus {
176 |   color: #373a3c;
177 |   background-color: #e6e6e6;
178 |   border-color: #adadad;
179 | }
180 | .rbc-toolbar button:hover {
181 |   color: #373a3c;
182 |   background-color: #e6e6e6;
183 |   border-color: #adadad;
184 | }
185 | 
186 | .rbc-btn-group {
187 |   display: inline-block;
188 |   white-space: nowrap;
189 | }
190 | .rbc-btn-group > button {
191 |   font-size: 14px;
192 | }
193 | .rbc-btn-group > button:first-child:not(:last-child) {
194 |   border-top-right-radius: 0;
195 |   border-bottom-right-radius: 0;
196 | }
197 | .rbc-btn-group > button:last-child:not(:first-child) {
198 |   border-top-left-radius: 0;
199 |   border-bottom-left-radius: 0;
200 | }
201 | .rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
202 |   border-radius: 4px;
203 |   border-top-left-radius: 0;
204 |   border-bottom-left-radius: 0;
205 | }
206 | .rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
207 |   border-radius: 4px;
208 |   border-top-right-radius: 0;
209 |   border-bottom-right-radius: 0;
210 | }
211 | .rbc-btn-group > button:not(:first-child):not(:last-child) {
212 |   border-radius: 0;
213 | }
214 | .rbc-btn-group button + button {
215 |   margin-left: -1px;
216 | }
217 | .rbc-rtl .rbc-btn-group button + button {
218 |   margin-left: 0;
219 |   margin-right: -1px;
220 | }
221 | .rbc-btn-group + .rbc-btn-group,
222 | .rbc-btn-group + button {
223 |   margin-left: 10px;
224 | }
225 | 
226 | .rbc-slot-selecting .rbc-event,
227 | .rbc-slot-selecting .rbc-day-slot .rbc-background-event,
228 | .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
229 |   cursor: inherit;
230 |   pointer-events: none;
231 | }
232 | .rbc-event.rbc-selected,
233 | .rbc-day-slot .rbc-selected.rbc-background-event {
234 |   cursor: pointer;
235 | }
236 | .rbc-event:focus,
237 | .rbc-day-slot .rbc-background-event:focus {
238 |   outline: 5px auto #3b99fc;
239 | }
240 | 
241 | .rbc-event-label {
242 |   font-size: 80%;
243 | }
244 | 
245 | .rbc-event-overlaps {
246 |   box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
247 | }
248 | 
249 | .rbc-event-continues-prior {
250 |   border-top-left-radius: 0;
251 |   border-bottom-left-radius: 0;
252 | }
253 | 
254 | .rbc-event-continues-after {
255 |   border-top-right-radius: 0;
256 |   border-bottom-right-radius: 0;
257 | }
258 | 
259 | .rbc-event-continues-earlier {
260 |   border-top-left-radius: 0;
261 |   border-top-right-radius: 0;
262 | }
263 | 
264 | .rbc-event-continues-later {
265 |   border-bottom-left-radius: 0;
266 |   border-bottom-right-radius: 0;
267 | }
268 | 
269 | .rbc-row {
270 |   display: flex;
271 |   flex-direction: row;
272 | }
273 | 
274 | .rbc-row-segment {
275 |   padding: 0 1px 1px 1px;
276 | }
277 | 
278 | .rbc-selected-cell {
279 |   background-color: rgba(0, 0, 0, 0.1);
280 | }
281 | 
282 | .rbc-show-more {
283 |   background-color: rgba(255, 255, 255, 0.3);
284 |   z-index: 4;
285 |   font-weight: bold;
286 |   font-size: 85%;
287 |   height: auto;
288 |   line-height: normal;
289 | }
290 | 
291 | .rbc-month-view {
292 |   position: relative;
293 |   border: 0px solid #ddd;
294 |   display: flex;
295 |   flex-direction: column;
296 |   flex: 1 0 0;
297 |   width: 100%;
298 |   user-select: none;
299 |   -webkit-user-select: none;
300 |   height: 100%;
301 | }
302 | 
303 | .rbc-month-header {
304 |   display: flex;
305 |   flex-direction: row;
306 | }
307 | 
308 | .rbc-month-row {
309 |   display: flex;
310 |   position: relative;
311 |   flex-direction: column;
312 |   flex: 1 0 0;
313 |   flex-basis: 0px;
314 |   overflow: hidden;
315 |   height: 100%;
316 | }
317 | .rbc-month-row + .rbc-month-row {
318 |   border-top: 0px solid #ddd;
319 | }
320 | 
321 | .rbc-date-cell {
322 |   flex: 1 1 0;
323 |   min-width: 0;
324 |   padding-left: 15px;
325 |   padding-top: 10px;
326 |   font-size: 28px;
327 |   text-align: left;
328 |   font-family: 'Paytone One', sans-serif;
329 |   color: rgba(0, 0, 0, 0.5);
330 | }
331 | 
332 | .rbc-date-cell.rbc-now {
333 |   font-weight: bold;
334 |   color: #6b12be;
335 | }
336 | .rbc-date-cell > a,
337 | .rbc-date-cell > a:active,
338 | .rbc-date-cell > a:visited {
339 |   color: inherit;
340 |   text-decoration: none;
341 | }
342 | 
343 | .rbc-row-bg {
344 |   display: flex;
345 |   flex-direction: row;
346 |   flex: 1 0 0;
347 |   overflow: hidden;
348 |   border-radius: 10px;
349 | }
350 | 
351 | .rbc-day-bg {
352 |   position: relative;
353 |   flex: 1 0 0%;
354 |   margin: 6px;
355 |   border-top: 3px solid #6b12be;
356 |   transition: all 0.1s ease-in-out;
357 | }
358 | 
359 | .rbc-day-bg:hover::before {
360 |   content: '+';
361 |   position: absolute;
362 |   opacity: 0.8;
363 |   left: 40%;
364 |   top: 25%;
365 |   font-size: 48px;
366 |   color: #701ad5;
367 |   font-family: 'Paytone One', sans-serif;
368 | }
369 | .rbc-day-bg:hover {
370 |   background-color: rgba(112, 26, 213, 0.15);
371 |   cursor: pointer;
372 |   border-bottom-left-radius: 6px;
373 |   border-bottom-right-radius: 6px;
374 | }
375 | .rbc-day-bg + .rbc-day-bg {
376 |   border-left: 0px solid #ddd;
377 | }
378 | .rbc-rtl .rbc-day-bg + .rbc-day-bg {
379 |   border-left-width: 0;
380 |   border-right: 1px solid #ddd;
381 | }
382 | 
383 | .rbc-overlay {
384 |   position: absolute;
385 |   z-index: 5;
386 |   border: 1px solid #e5e5e5;
387 |   background-color: #fff;
388 |   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
389 |   padding: 10px;
390 | }
391 | .rbc-overlay > * + * {
392 |   margin-top: 1px;
393 | }
394 | 
395 | .rbc-overlay-header {
396 |   border-bottom: 1px solid #e5e5e5;
397 |   margin: -10px -10px 5px -10px;
398 |   padding: 2px 10px;
399 | }
400 | 
401 | .rbc-agenda-view {
402 |   display: flex;
403 |   flex-direction: column;
404 |   flex: 1 0 0;
405 |   overflow: auto;
406 | }
407 | .rbc-agenda-view table.rbc-agenda-table {
408 |   width: 100%;
409 |   border: 1px solid #ddd;
410 |   border-spacing: 0;
411 |   border-collapse: collapse;
412 | }
413 | .rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
414 |   padding: 5px 10px;
415 |   vertical-align: top;
416 | }
417 | .rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
418 |   padding-left: 15px;
419 |   padding-right: 15px;
420 |   text-transform: lowercase;
421 | }
422 | .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
423 |   border-left: 1px solid #ddd;
424 | }
425 | .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
426 |   border-left-width: 0;
427 |   border-right: 1px solid #ddd;
428 | }
429 | .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
430 |   border-top: 1px solid #ddd;
431 | }
432 | .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
433 |   padding: 3px 5px;
434 |   text-align: left;
435 |   border-bottom: 1px solid #ddd;
436 | }
437 | .rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
438 |   text-align: right;
439 | }
440 | 
441 | .rbc-agenda-time-cell {
442 |   text-transform: lowercase;
443 | }
444 | .rbc-agenda-time-cell .rbc-continues-after:after {
445 |   content: ' »';
446 | }
447 | .rbc-agenda-time-cell .rbc-continues-prior:before {
448 |   content: '« ';
449 | }
450 | 
451 | .rbc-agenda-date-cell,
452 | .rbc-agenda-time-cell {
453 |   white-space: nowrap;
454 | }
455 | 
456 | .rbc-agenda-event-cell {
457 |   width: 100%;
458 | }
459 | 
460 | .rbc-time-column {
461 |   display: flex;
462 |   flex-direction: column;
463 |   min-height: 100%;
464 | }
465 | .rbc-time-column .rbc-timeslot-group {
466 |   flex: 1;
467 | }
468 | 
469 | .rbc-timeslot-group {
470 |   border-bottom: 1px solid #ddd;
471 |   min-height: 40px;
472 |   display: flex;
473 |   flex-flow: column nowrap;
474 | }
475 | 
476 | .rbc-time-gutter,
477 | .rbc-header-gutter {
478 |   flex: none;
479 | }
480 | 
481 | .rbc-label {
482 |   padding: 0 5px;
483 | }
484 | 
485 | .rbc-day-slot {
486 |   position: relative;
487 | }
488 | .rbc-day-slot .rbc-events-container {
489 |   bottom: 0;
490 |   left: 0;
491 |   position: absolute;
492 |   right: 0;
493 |   margin-right: 10px;
494 |   top: 0;
495 | }
496 | .rbc-day-slot .rbc-events-container.rbc-rtl {
497 |   left: 10px;
498 |   right: 0;
499 | }
500 | .rbc-day-slot .rbc-event,
501 | .rbc-day-slot .rbc-background-event {
502 |   border: 1px solid #265985;
503 |   display: flex;
504 |   max-height: 100%;
505 |   min-height: 20px;
506 |   flex-flow: column wrap;
507 |   align-items: flex-start;
508 |   overflow: hidden;
509 |   position: absolute;
510 | }
511 | .rbc-day-slot .rbc-background-event {
512 |   opacity: 0.75;
513 | }
514 | .rbc-day-slot .rbc-event-label {
515 |   flex: none;
516 |   padding-right: 5px;
517 |   width: auto;
518 | }
519 | .rbc-day-slot .rbc-event-content {
520 |   width: 100%;
521 |   flex: 1 1 0;
522 |   word-wrap: break-word;
523 |   line-height: 1;
524 |   height: 100%;
525 |   min-height: 1em;
526 | }
527 | .rbc-day-slot .rbc-time-slot {
528 |   border-top: 1px solid #f7f7f7;
529 | }
530 | 
531 | .rbc-time-view-resources .rbc-time-gutter,
532 | .rbc-time-view-resources .rbc-time-header-gutter {
533 |   position: sticky;
534 |   left: 0;
535 |   background-color: white;
536 |   border-right: 1px solid #ddd;
537 |   z-index: 10;
538 |   margin-right: -1px;
539 | }
540 | 
541 | .rbc-time-view-resources .rbc-time-header {
542 |   overflow: hidden;
543 | }
544 | 
545 | .rbc-time-view-resources .rbc-time-header-content {
546 |   min-width: auto;
547 |   flex: 1 0 0;
548 |   flex-basis: 0px;
549 | }
550 | 
551 | .rbc-time-view-resources .rbc-time-header-cell-single-day {
552 |   display: none;
553 | }
554 | 
555 | .rbc-time-view-resources .rbc-day-slot {
556 |   min-width: 140px;
557 | }
558 | 
559 | .rbc-time-view-resources .rbc-header,
560 | .rbc-time-view-resources .rbc-day-bg {
561 |   width: 140px;
562 |   flex: 1 1 0;
563 |   flex-basis: 0 px;
564 | }
565 | 
566 | .rbc-time-header-content + .rbc-time-header-content {
567 |   margin-left: -1px;
568 | }
569 | 
570 | .rbc-time-slot {
571 |   flex: 1 0 0;
572 | }
573 | .rbc-time-slot.rbc-now {
574 |   font-weight: bold;
575 | }
576 | 
577 | .rbc-day-header {
578 |   text-align: center;
579 | }
580 | 
581 | .rbc-slot-selection {
582 |   z-index: 10;
583 |   position: absolute;
584 |   background-color: rgba(0, 0, 0, 0.5);
585 |   color: white;
586 |   font-size: 75%;
587 |   width: 100%;
588 |   padding: 3px;
589 | }
590 | 
591 | .rbc-slot-selecting {
592 |   cursor: move;
593 | }
594 | 
595 | .rbc-time-view {
596 |   display: flex;
597 |   flex-direction: column;
598 |   flex: 1;
599 |   width: 100%;
600 |   border: 1px solid #ddd;
601 |   min-height: 0;
602 | }
603 | .rbc-time-view .rbc-time-gutter {
604 |   white-space: nowrap;
605 | }
606 | .rbc-time-view .rbc-allday-cell {
607 |   box-sizing: content-box;
608 |   width: 100%;
609 |   height: 100%;
610 |   position: relative;
611 | }
612 | .rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
613 |   border-left: 1px solid #ddd;
614 | }
615 | .rbc-time-view .rbc-allday-events {
616 |   position: relative;
617 |   z-index: 4;
618 | }
619 | .rbc-time-view .rbc-row {
620 |   box-sizing: border-box;
621 |   min-height: 20px;
622 | }
623 | 
624 | .rbc-time-header {
625 |   display: flex;
626 |   flex: 0 0 auto;
627 |   flex-direction: row;
628 | }
629 | .rbc-time-header.rbc-overflowing {
630 |   border-right: 1px solid #ddd;
631 | }
632 | .rbc-rtl .rbc-time-header.rbc-overflowing {
633 |   border-right-width: 0;
634 |   border-left: 1px solid #ddd;
635 | }
636 | .rbc-time-header > .rbc-row:first-child {
637 |   border-bottom: 1px solid #ddd;
638 | }
639 | .rbc-time-header > .rbc-row.rbc-row-resource {
640 |   border-bottom: 1px solid #ddd;
641 | }
642 | 
643 | .rbc-time-header-cell-single-day {
644 |   display: none;
645 | }
646 | 
647 | .rbc-time-header-content {
648 |   flex: 1;
649 |   display: flex;
650 |   min-width: 0;
651 |   flex-direction: column;
652 |   border-left: 1px solid #ddd;
653 | }
654 | .rbc-rtl .rbc-time-header-content {
655 |   border-left-width: 0;
656 |   border-right: 1px solid #ddd;
657 | }
658 | .rbc-time-header-content > .rbc-row.rbc-row-resource {
659 |   border-bottom: 1px solid #ddd;
660 |   flex-shrink: 0;
661 | }
662 | 
663 | .rbc-time-content {
664 |   display: flex;
665 |   flex: 1 0 0%;
666 |   align-items: flex-start;
667 |   width: 100%;
668 |   border-top: 2px solid #ddd;
669 |   overflow-y: auto;
670 |   position: relative;
671 | }
672 | .rbc-time-content > .rbc-time-gutter {
673 |   flex: none;
674 | }
675 | .rbc-time-content > * + * > * {
676 |   border-left: 1px solid #ddd;
677 | }
678 | .rbc-rtl .rbc-time-content > * + * > * {
679 |   border-left-width: 0;
680 |   border-right: 1px solid #ddd;
681 | }
682 | .rbc-time-content > .rbc-day-slot {
683 |   width: 100%;
684 |   user-select: none;
685 |   -webkit-user-select: none;
686 | }
687 | 
688 | .rbc-current-time-indicator {
689 |   position: absolute;
690 |   z-index: 3;
691 |   left: 0;
692 |   right: 0;
693 |   height: 1px;
694 |   background-color: #74ad31;
695 |   pointer-events: none;
696 | }
697 | 


--------------------------------------------------------------------------------
/styles/styles.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html,
 6 | body {
 7 |   height: 100%;
 8 | }
 9 | 
10 | h1,
11 | h2,
12 | h3,
13 | h4 {
14 |   font-family: 'Paytone One', sans-serif;
15 | }
16 | 
17 | .form-textarea {
18 |   @apply focus:ring-violet focus:border-violet block w-full sm:text-sm border border-gray-200 rounded-md p-3;
19 | }
20 | 
21 | .form-input {
22 |   @apply focus:ring-violet focus:border-violet block sm:text-sm border border-gray-200 rounded-md p-3 w-full;
23 | }
24 | 
25 | .form-label {
26 |   @apply block text-sm font-medium text-gray-700 mb-1;
27 | }
28 | 
29 | .form-error {
30 |   @apply mt-2 text-sm text-red-500;
31 | }
32 | 
33 | [type='text']:focus {
34 |   --tw-ring-color: none;
35 | }
36 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require('tailwindcss/colors');
 2 | 
 3 | module.exports = {
 4 |   content: [
 5 |     './pages/**/*.{js,ts,jsx,tsx}',
 6 |     './components/**/*.{js,ts,jsx,tsx}',
 7 |     './layouts/**/*.{js,ts,jsx,tsx}'
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       colors: {
12 |         violet: '#701ad5',
13 |         mint: '#77fba3',
14 |         gray: colors.neutral
15 |       }
16 |     }
17 |   },
18 |   plugins: [require('@tailwindcss/forms')]
19 | };
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "incremental": true,
15 |     "esModuleInterop": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "jsx": "preserve"
21 |   },
22 |   "include": [
23 |     "next-env.d.ts",
24 |     "**/*.ts",
25 |     "**/*.tsx"
26 |   ],
27 |   "exclude": [
28 |     "node_modules"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------