A platform for managing your business
View Demo
·
Report Bug
·
Request Feature
Table of Contents
WittyWorkflow is a TALL stack small business management tool. It includes an E-commerce shop, appointment management, role based access and much more. Below is an overview of the key functionalities of the app:
-
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 featuringwire: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
-
Appointment management: 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.
-
Email Notifications on shop purchases: Be notified every time a purchase is made.
-
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.
-
One Time Passwords (OTP) for an extra added layer of security.
This section lists all major frameworks/libraries used to bootstrap this project.
This project is built with Filament 3
To get started clone this repository.
-
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.
-
Install NPM dependencies
npm install
and run npm
npm run dev
if you're working locally ornpm run build
if you're working on production. -
Install the composer dependencies.
composer install
-
Create a copy of your .env file.
cp .env.example .env
-
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.
-
Create an empty database for your application. I personally like using TablePlus, but you can use whatever you like.
-
In the
.env
file, add database information to allow Laravel to connect to the database. The default database name isww_filament
. If you are using a different name, you'll need to edit theDB_DATABASE
variable in the.env
file with your database name. -
Migrate and seed the database.
php artisan migrate:fresh --seed
-
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 theid
of the user that will be thesuper admin
. You can change it to whatever user you want to be thesuper admin
. the credentials for the super admin are the following:email: admin@example.com password: password
-
Link the storage folder.
php artisan storage:link
-
Run the application.
php artisan serve
-
Visit your application in the browser.
http://localhost:8000
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.
Note
Don't forget to update your Mail settings to reflect your production server's needs
I use Mailtrap for local 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.
Important
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.
Important
If the canCreate()
, canEdit()
or canDelete()
functions return anything other than a true
or false
value is best not to mess with that value because that value is supposed to be that way.
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)
)
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, inside the Settings
sidebar menu group 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. Also give the panel_user
all permissions on the Order
model permissions.
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 systemteam_user
= The team members of the system assigned by the Super Adminpanel_user
= The panel for the customers
There are quite a few steps you need to take to add/edit/delete variants and i'll walk you through all of them:
- Create migration to
add/edit/delete
database variants. - Update the
ProductVariant.php
factory if needed. As of now only thesize
andcolor
variants are assigned on the initial database seed just to keep things simple. - Add the
Enum
for the newly created variant inApp/Enums
. To keep things simple, the enum can be named the same name as the database column but you can name it whatever you want. - Update the
getForm()
function inProductVariant.php
model, add/edit/delete the desired variants. - Update the
$table
function inProductVariantResource.php
, add/edit/delete the desired variants. - Update the
$table
function inVariationsRelationManager.php
, add/edit/delete the desired variants. - Add/Update/Delete the newly created Enum name inside
config/enums.php
. - Update '$casts' on the
ProductVariant.php
model
If the above steps have been implemented, your newly created variant is ready for use throughout the app.
Note
The App comes preloaded with some general variants and some tech variants. You should add the variant types that fit the type of store you're building.
Important
OTP is now available for an extra added layer of security. To enable OTP just go to your desired panels and uncomment //FilamentOtpLoginPlugin::make(),
. The available panels are AdminPanelProvider.php
, CustomerPanelProvider.php
and TeamPanelProvider.php
. If you're going to enable OTP is advisable to enable it on all panels but that depends on your app's needs.
For App examples, please refer to WittyWorkflow
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
- Create separate dashboards for each user role
- Add Filament Shield for managing user roles and permissions
- Create business information resources (appointments, services, users etc )
- Add socials resource for referencing business's social profiles
- Add CRUD functionality to sections of the public page for a more controlled and customizable experience
- Add Hero animations
- Add footer resources to give users an easy way to add their policies, FAQ and other business related information
- Add flash notifications and email notifications for appointment changes
- Add shop for purchases
- Add more animated hero options the user can choose from
- Improve visuals (ongoing effort)
- Add How to section showing the users how to use the app
- Add analytics to admin dashboard
- Improve SEO
- Add Announce package to announce different messages to system users
- Add Themes package to give users more options on system layout and design
- Add Filament Breezy for 2-factor authentication and better profile updating
- Add Language-switch to support different languages
- Add Spatie Laravel Health to check how the app is running.
- Add CRUD for shipping/billing address in the app so you don't have to enter it manually when checking out.
- Add in app tracking for orders. Thinking of using laravel reverb for live tracking.
- Add One Time Passwords (OTP) for an extra added layer of security
Note
The following are the known issues that need addressing and i hope that the community will step in and work on them:
- Cart items don't get sent from
session id
touser_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.
For now as a workaround only logged in users can add to cart.
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
Distributed under the MIT License. See LICENSE
for more information.
Kristi Tanellari - @TanellariKristi - tanellari@gmail.com
Project Link: https://github.com/kristi11/ww-filament/
I've included a few of my favorite links to kick things off!