Witty workflow

A platform for managing your business

View Demo · Report Bug · Request Feature

!! This app is in active development !!

The app's CRUD functionality has been severally restricted in this demonstration app. Follow the below steps to activate CRUD functionality on the desired resources in order to achieve the desired functionality

THIS REPOSITORY SHOULD BE USED ON A BRAND-NEW PROJECT

Table of Contents

1. About The Project
   • Built With
2. Key features
3. Getting Started
   • Installation
4. Command list
5. Configuration
6. Usage
7. Roadmap
8. Contributing
9. License
10. Contact
11. Acknowledgments
12. Known issues
    • Workaround

About The Project

WittyWorkflow is a dynamic web application poised to evolve into a robust platform designed to streamline business management. The application incorporates a range of features to empower users in efficiently managing their businesses. Below is an overview of the key functionalities of the app:

Key Features:

• Dynamic Hero: Engage your audience with a visually appealing and dynamic hero section that captures attention and communicates your brand essence. The hero is fully customizable from the admin panel to ensure a seamless user experience.

• Role-Based Access: Utilizing the powerful Filament PHP, WittyWorkflow offers role-based access control, enabling different panels for different user roles. Admins have full access to all functionalities, while staff members and customers have a more limited view.

• SPA functionality with Wire:Navigate : Enhance navigation with an SPA like menu featuring wire:navigate functionality, bringing Single Page Application (SPA) functionality to your site for smooth transitions between links.

• Public Email Form and Footer: Facilitate communication by implementing a public email form and completing the footer for a professional and polished user interface.

• Enhanced Footer: Showing different requirements/terms/help etc. of what your business has/requires/offers

• Appointments: Manage your appointments

• Email Notifications on Appointment Changes: Receive email notifications for changes in appointments, ensuring you never miss valuable information about your upcoming appointments.

• Full control: On what section shows/hides from the landing page depending on your businesses need for the section

• 2-Factor authentication: To enhance security of your accounts

• Theme customization: To give every user the ability to customize the look and feel of the app to their liking

• Application health: See how your application is performing and make the necessary changes in the server

• Business information: Have full access on different aspects of your business including system users, section visibility, business services, announcements and much more...

• E-commerce: TALL stack e-commerce shop. Stripe integration

• Shop panel control Have control over the shop products and orders straight from you admin panel.

(back to top)

Built With

This section lists all major frameworks/libraries used to bootstrap this project.

• 
• 
• 
• 

(back to top)

Getting Started

This project is built with Filament 3

Installation

To get started clone this repository.

1. Clone the repo

   https://github.com/kristi11/ww-filament.git
   

   or if you have a different name you'd like to use for the project create an empty folder with your desired name, cd into that folder and run the following command:

   https://github.com/kristi11/ww-filament.git .
   

   this will clone all the project's content without the project name folder.

2. Install NPM dependencies

   npm install
   

   and run npm npm run dev if you're working locally or npm run build if you're working on production.

3. Install the composer dependencies.

   composer install
   

4. Create a copy of your .env file.

    cp .env.example .env
   

5. Generate an app encryption key.

   php artisan key:generate
   

   if using laravel forge there's no need to generate key since when creating the server forge will take care of the key generation.

6. Create an empty database for your application. I personally like using TablePlus, but you can use whatever you like.

7. In the .env file, add database information to allow Laravel to connect to the database. The default database name is ww_filament. If you are using a different name, you'll need to edit the DB_DATABASE variable in the .env file with your database name.

8. Migrate and seed the database.

   php artisan migrate:fresh --seed
   

9. WittyWorkflow uses Shield plugin to provide proper user roles. We need to setup the plugin and generate the permissions for that package

   php artisan shield:setup --fresh
   php artisan shield:generate --all --panel=admin
   

   and define the super admin of the system

   php artisan shield:super-admin --user="1"
   

   --user=1 is the id of the user that will be the super admin. You can change it to whatever user you want to be the super admin. the credentials for the super admin are the following:

   email: admin@example.com
   password: password
   

10. Link the storage folder.

    php artisan storage:link
    

11. Run the application.

    php artisan serve
    

12. Visit your application in the browser.

    http://localhost:8000
    

Command list

git clone https://github.com/kristi11/ww-filament.git .
npm install
composer install
cp .env.example .env
php artisan key:generate
php artisan migrate:fresh --seed
php artisan shield:setup --fresh
php artisan shield:generate --all --panel=admin
php artisan shield:super-admin --user="1"
php artisan storage:link

Don't forget to run npm run dev and php artisan serve after the above commands are ran.

I use Mailtrap for email testing. You can use whatever you like. If you want to use Mailtrap, create an account and add the credentials to the .env file. If you are using forge you can add the credentials to the server environment variables.

If you decide to use Mailtrap, you can use the following credentials:

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=your_username
MAIL_PASSWORD=your_password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=your_email
MAIL_FROM_NAME="${APP_NAME}"

This app uses DigitalOcean Spaces to store files. If you want to use DigitalOcean Spaces you need to add the credentials to the .env file.

DO_SPACES_KEY=key
DO_SPACES_SECRET=secret
DO_SPACES_BUCKET=bucket-name
DO_SPACES_REGION=region
DO_SPACES_ENDPOINT=endpoint-that-is-provided-by-DigitalOcean

Here's a youtube video on how to set up Digital Ocean Spaces with Laravel.

If you are using forge you can add the credentials to the server environment variables.

Add the Stripe credentials:

STRIPE_KEY=your-stripe-key
STRIPE_SECRET=your-stripe-secret
STRIPE_WEBHOOK_SECRET=your-stripe-webhook-secret

In your local server (for testing purposes only) use stripe-cli and run stripe login to log in into stripe and then stripe listen --forward-to {your url here}/stripe/webhook --format JSON to listen to Stripe's webhook. After running the stripe listen command you will be provided with the STRIPE_WEBHOOK_SECRET that you need to paste into your .env file for the webhook to function properly. Installation instructions for your local development environment will be in the stripe-cli link above

To make test purchases in your local environment you can enter card nr. 4242 4242 4242 4242. Any 4 numbers for expiration date for example 03/11 and any 3 numbers for CVC code for example 111. This is stripe's testing card numbers

To enter Stripe's live mode you need to complete your business profile in Stripe's dashboard and change the API keys from test to live API keys. Also after running php artian cashier:webhook in your production server you need to go to the webhooks page click on the newly created webhook and copy the Signin secret to your STRIPE_WEBHOOK_SECRET in your .env file. Also i noticed that the php artian cashier:webhook doesn't generate the checkout.session.completed so you will have to do that manually in order for the purchase to go through. To do that click on the newly created webhook and as of 11/13/2024 you can go to the ... button on the right side of the page, choose update details and on the events to send click select events... and enter checkout.session.completed. This way stripe will start listening for the event and proceed the payment.

To make a test live purchase in the store login and choose a product to purchase. After clicking checkout in the cart, in your order details click Add promotion code and enter 100OFF for a 100% discount in your order just so you can see that everything works as intended.

Your application is now ready for use. Enjoy! To install it in production follow your servers specific needs.

(back to top)

Configuration

Disabled features:

The following features have been disabled to maintain a proper demonstration environment. You should enable this features when working on your own project to get the full functionality of the app.

Editing:

• Profile editing (change on Adminpanelprovider.php and TeamPanelProvider.php)

Permission management:

• Permission management for user roles (change on RoleResource.php)

Editing and deleting:

• User resource (change on UserResource.php)
• Hero resource (change on HeroResource.php)
• SectionColors resource (change on SectionColorResource.php)
• Service resource (change on ServiceResource.php)
• Section visibility on the landing page (change on PublicPageResource.php)
• Address resource (change on AddressResource.php)
• BusinessHours resource (change on BusinessHoursResource.php)
• Flexibility resource (change on FlexibilityResource.php)
• Announcement resource (change on AnnouncementResource.php)
• Social resource (change on SocialResource.php)
• Gallery resource creating, (change on GalleryResource.php)
• About resource (change on AboutResource.php)
• Contact resource (change on ContactResource.php)
• FAQ resource (change on FAQdataResource.php)
• Help resource (change on HelpResource.php)
• Privacy resource (change on PrivacyResource.php)
• Terms resource (change on TermsResource.php)
• Support resource (change on SupportResource.php)

To enable these features you need to comment or delete the following functions on the desired resources:

public static function canEdit(Model $record): bool
    {
        return false;
    }
public static function canDelete(Model $record): bool
    {
        return false;
    }

You can also comment the can create function based on necessity of your app:

public static function canCreate(): bool
    {
        return false;
    }

If the canCreate function simply returns false, it's safe to be added/removed based on your app's needs. If the function checks if the record exists then returns the proper action, it shouldn't be messed with, since only 1 database row has to be created for the app to work properly and avoid duplicate data.

WittyWorkflow uses filament-breezy to manage user profiles. Change the following values to shouldRegisterUserMenu: true and shouldRegisterNavigation: true to enable profile editing on AdminPanelProvider.php and TeamPanelProvider.php for the Admin and Team member roles

->myProfile(
    shouldRegisterUserMenu: false, // Sets the 'account' link in the panel User Menu (default = false)
    shouldRegisterNavigation: false, // Adds a main navigation item for the My Profile page (default = false)
    navigationGroup: 'Settings', // Sets the navigation group for the My Profile page (default = null)
    hasAvatars: false, // Enables the avatar upload form component (default = false)
    slug: 'profile' // Sets the slug for the profile page (default = 'my-profile')

)
->enableTwoFactorAuthentication(
    force: false, // force the user to enable 2FA before they can use the application (default = false)
)

**Bulk actions have been disabled for the resources to maintain the integrity of a demonstration environment on a

production server since this repo is being used to show the live server on the official website**

To enable the bulk actions uncomment the following code on the necessary resources

//Tables\Actions\DeleteBulkAction::make(),

Role configuration

WittyWorkflow used the Shield package to manage roles as stated above. In order to give permissions to manage appointments go on the Roles section of the dashboard under Filament Shield sidebar menu and for both team_user and panel_user choose select all on the Appointment model permissions and to give the panel_user view permissions on the gallery choose view and view any under the Gallery model permissions.

Role explanation

In order to use the Team role you need to create the role from the admin panel and the name of the role should be 'team_user' as it doesnt exist by default and then assign that role to a desired user. Multiple roles can be assigned to a user

• super_admin = The super admin of the system
• team_user = The team members of the system assigned by the Super Admin
• panel_user = The panel for the customers

Usage

For App examples, please refer to WittyWorkflow

(back to top)

To access the super-admin dashboard go to the Admin dashboard and enter the following credentials:

Email: admin@example.com
Password: password

To access the team dashboard go to the Team dashboard and enter the following credentials:

Email: team@example.com
Password: password

To access the customer dashboard go to the Customer dashboard and create an account

(back to top)

Roadmap

1. Create separate dashboards for each user role
2. Add Filament Shield for managing user roles and permissions
3. Create business information resources (appointments, services, users etc )
4. Add socials resource for referencing business's social profiles
5. Add CRUD functionality to sections of the public page for a more controlled and customizable experience
6. Add Hero animations
7. Add footer resources to give users an easy way to add their policies, FAQ and other business related information
8. Add flash notifications and email notifications for appointment changes
9. Add shop for purchases
10. Add more animated hero options the user can choose from
11. Improve visuals (ongoing effort)
12. Add How to section showing the users how to use the app
13. Add analytics to admin dashboard
14. Improve SEO
15. Add Announce package to announce different messages to system users
16. Add Themes package to give users more options on system layout and design
17. Add Filament Breezy for 2-factor authentication and better profile updating
18. Add Language-switch to support different languages
19. Add Spatie Laravel Health to check how the app is running

(back to top)

Known issues

The following are the known issues that need addressing and i hope that the community will step in and work on them:

• table actions throw Property type not supported in Livewire for property: [{"amount":"{amount here}","currency":"USD"}]. I suspect it has to do with the fact that i have set up Money plugin for sales since the shop is using the Money object for the item prices but filament also has a money() function that formats money so they maybe are interfering with each-other. The error occurs only on models that have the protected $casts = [ 'price' => MoneyCast::class, ]; and only on the edit action on the filament panel so editing a product would throw the error.

• Cart items don't get sent from session id to user_id if the user was logged out when placing the order but after filling out the cart logs in/registers for an account to continue with the order.

(back to top)

Workaround

2 Workarounds on the first issue are:

• Whenever a product change needs to occur simply delete the product  and re-add it again
  

• Disable the `protected $casts = [
       'price' => MoneyCast::class,
       ];` to edit the product and enable it again.
  

These are just temporary workarounds until a solution is found

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please contact me at tanellari@gmail.com

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Kristi Tanellari - @TanellariKristi - tanellari@gmail.com

Project Link: https://github.com/kristi11/ww-filament/

(back to top)

Acknowledgments

I've included a few of my favorite links to kick things off!

• Laravel
• Filament
• Livewire
• Tailwind CSS
• README Template
• Img Shields
• Choose an Open Source License
• GitHub Pages

(back to top)